Integrated latest changes at 08-10-2023 1:30:19 AM

Author: SyncfusionBuild

ej2-angular-toc.html

@@ -1598,6 +1598,9 @@
             <li><a href="/ej2-angular/pdfviewer/open-pdf-file/from-azure-blob-storage">From Azure Blob Storage</a></li>
             <li><a href="/ej2-angular/pdfviewer/open-pdf-file/from-google-cloud-storage">From Google Cloud Storage</a></li>
             <li><a href="/ej2-angular/pdfviewer/open-pdf-file/from-google-drive">From Google Drive</a></li>
+            <li><a href="/ej2-angular/pdfviewer/open-pdf-file/from-one-drive">From One Drive</a></li>
+            <li><a href="/ej2-angular/pdfviewer/open-pdf-file/from-dropbox-cloud-file-storage">From Dropbox cloud file storage</a></li>
+            <li><a href="/ej2-angular/pdfviewer/open-pdf-file/from-box-cloud-file-storage">From Box cloud file storage</a></li>
           </ul>
         </li>
         <li>Save PDF File
@@ -1606,6 +1609,9 @@
             <li><a href="/ej2-angular/pdfviewer/save-pdf-file/to-azure-blob-storage">To Azure Blob Storage</a></li>
             <li><a href="/ej2-angular/pdfviewer/save-pdf-file/to-google-cloud-storage">To Google Cloud Storage</a></li>
             <li><a href="/ej2-angular/pdfviewer/save-pdf-file/to-google-drive">To Google Drive</a></li>
+            <li><a href="/ej2-angular/pdfviewer/save-pdf-file/to-one-drive">To One Drive</a></li>
+            <li><a href="/ej2-angular/pdfviewer/save-pdf-file/to-dropbox-cloud-file-storage">To Dropbox cloud file storage</a></li>
+            <li><a href="/ej2-angular/pdfviewer/save-pdf-file/to-box-cloud-file-storage">To Box cloud file storage</a></li>
           </ul>
         </li>
         <li>Annotation

ej2-angular/appearance/images/material3-customize.PNG

@@ -0,0 +1,117 @@
+---
+layout: post
+title: Material 3 Theme in Angular | Syncfusion
+description: Learn here all about Icons in Syncfusion Angular Appearance component of Syncfusion Essential JS 2 and more.
+platform: ej2-angular
+control: Material 3 
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Material 3 Theme
+
+Material 3 is an updated theme that encompasses enhanced theming, components, and personalization features, including dynamic color capabilities. It has been specifically designed to align seamlessly with the new visual style and system UI introduced in Android 12 and above. For more detailed information, please refer to the following link: [ Link to Material 3 Information](https://m3.material.io/).
+
+## Syncfusion Material 3 Theme
+
+Syncfusion has introduced the Material theme across all EJ2 Controls. The theme includes light and dark variants and utilizes CSS variables for easy customization of control colors in CSS format. This implementation enables seamless switching between light and dark color schemes, offering users a flexible solution to suit their preferences and application needs.
+
+> Note: Please be aware that in the Material 3 theme, we utilize CSS variables with rgb() values for our color variables. Using hex values in this context may lead to improper functionality. For example, in previous versions of our Material theme or other themes, the primary color variable was defined as follows: `$primary: #6200ee;`. In the Material 3 theme, the primary color variable is defined as follows: `--color-sf-primary: 98, 0, 238;`.
+
+## What are CSS Variables?
+
+CSS variables, also known as custom properties, are a powerful feature in CSS that allows you to define reusable values and apply them throughout your stylesheets. Prefixed with "--," CSS variables can be utilized in any property value within a CSS rule. To retrieve the value of a CSS variable, the var() function is used. CSS variables can access the Document Object Model (DOM), enabling the creation of variables with either local or global scope. For further details, please consult the following link: [Link to CSS Variables Information](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties).
+
+### How does Syncfusion Theming utilize CSS Variables?
+
+The Material 3 theme in our system incorporates CSS variable support, utilizing CSS variables with rgb() values for color customization.
+
+```CSS
+:root {
+  --color-sf-black: 0, 0, 0;
+  --color-sf-white: 255, 255, 255;
+  --color-sf-primary: 103, 80, 164;
+  --color-sf-primary-container: 234, 221, 255;
+  --color-sf-secondary: 98, 91, 113;
+  --color-sf-secondary-container: 232, 222, 248;
+  --color-sf-tertiary: 125, 82, 96;
+  --color-sf-tertiary-container: 255, 216, 228;
+  --color-sf-surface: 255, 255, 255;
+  --color-sf-surface-variant: 231, 224, 236;
+  --color-sf-background: var(--color-sf-surface);
+  --color-sf-on-primary: 255, 255, 255;
+  --color-sf-on-primary-container: 33, 0, 94;
+  --color-sf-on-secondary: 255, 255, 255;
+  --color-sf-on-secondary-container: 30, 25, 43;
+  --color-sf-on-tertiary: 255, 255, 255;
+}
+```
+
+### Exploring Color Customization
+
+Through the utilization of these CSS variables, customization of the color variables becomes remarkably straightforward. For example, to customize the primary color variable in this theme, simply modify its value in the root values.
+
+**Default primary value**
+
+![default primary value](images/material3-default.PNG)
+
+**Customized primary value**
+
+![customized primary value](images/material3-customize.PNG)
+
+With this CSS variable support, you can effortlessly customize the color variable values for our EJ2 controls.
+
+## Dark mode support
+
+The controls in our system now seamlessly transition between light and dark modes without any noticeable delay. This achievement was made by consolidating the configurations of the light theme and dark theme into [material3 light theme](https://unpkg.com/@syncfusion/ej2@22.1.34/material3.css) file.
+
+![dark mode](images/material3.gif)
+
+{% tabs %}
+{% highlight ts tabtitle="app.component.ts" %}
+{% include code-snippet/common/material3-cs1/app/app.component.ts %}
+{% endhighlight %}
+{% highlight ts tabtitle="app.module.ts" %}
+{% include code-snippet/common/material3-cs1/app/app.module.ts %}
+{% endhighlight %}
+{% highlight ts tabtitle="main.ts" %}
+{% include code-snippet/common/material3-cs1/app/main.ts %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/samples/common/material3-cs1" %}
+
+The above example demonstrates the appearance of an application in dark mode. By using CSS variable support, the transition between light and dark mode is smooth and visually pleasing.
+
+```CSS
+.e-dark-mode {
+  --color-sf-black: 0, 0, 0;
+  --color-sf-white: 255, 255, 255;
+  --color-sf-primary: 208, 188, 255;
+  --color-sf-primary-container: 79, 55, 139;
+  --color-sf-secondary: 204, 194, 220;
+  --color-sf-secondary-container: 74, 68, 88;
+  --color-sf-tertiary: 239, 184, 200;
+  --color-sf-tertiary-container: 99, 59, 72;
+  --color-sf-surface: 28, 27, 31;
+  --color-sf-surface-variant: 28, 27, 31;
+  --color-sf-background: var(--color-sf-surface);
+  --color-sf-on-primary: 55, 30, 115;
+  --color-sf-on-primary-container: 234, 221, 255;
+  --color-sf-on-secondary: 51, 45, 65;
+  --color-sf-on-secondary-container: 232, 222, 248;
+  --color-sf-on-tertiary: 73, 37, 50;
+}
+```
+
+### How to switch to dark mode
+
+With this CSS variable support, transitioning between light and dark theme modes has become effortless. To switch to dark mode, simply add the `e-dark-mode` class to the body section of your application. Upon adding this class, the theme will seamlessly switch to dark mode. Please refer to the example image below for guidance.
+
+![dark mode](images/material3-dark.PNG)
+
+## ThemeStudio application
+
+The ThemeStudio application now includes seamless integration with the Material 3 theme, offering a comprehensive solution for customization requirements. This enhancement enables users to effortlessly customize and personalize their themes.
+
+Access the Syncfusion ThemeStudio application, featuring the Material 3 theme, via the following link: [Link to Syncfusion ThemeStudio with Material 3 Theme](https://ej2.syncfusion.com/themestudio/?theme=material3)

ej2-angular/appearance/images/material3-dark.PNG

@@ -0,0 +1,101 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "material3": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/material3",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": [
+              "zone.js"
+            ],
+            "tsConfig": "tsconfig.app.json",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.css"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "browserTarget": "material3:build:production"
+            },
+            "development": {
+              "browserTarget": "material3:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "material3:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ],
+            "tsConfig": "tsconfig.spec.json",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.css"
+            ],
+            "scripts": []
+          }
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": "d1961fdb-0820-4c41-a2fc-4f0431831ebc"
+  }
+}

ej2-angular/appearance/images/material3-default.PNG

@@ -0,0 +1,19 @@
+ <!-- checked state. -->
+ <div [ngClass]="{'e-dark-mode': isChecked, 'dark': isChecked}">
+ <ejs-checkbox label="Enable Darkmode" (change)="toggleCheckbox()"></ejs-checkbox><br/>
+
+  <!-- Primary Button - Used to represent a primary action. -->
+  <button ejs-button cssClass="e-primary">Button</button>
+
+  <!-- Success Button - Used to represent a positive action. -->
+  <button ejs-button cssClass="e-success">Button</button>
+
+  <!-- Info Button - Used to represent an informative action -->
+  <button ejs-button cssClass="e-info">Button</button>
+
+  <!-- Warning Button - Used to represent an action with caution. -->
+  <button ejs-button cssClass="e-warning">Button</button>
+
+  <!-- Danger Button - Used to represent a negative action. -->
+  <button ejs-button cssClass="e-danger">Button</button>
+  </div>

ej2-angular/appearance/images/material3.gif

@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'app-root',
+    styleUrls:['./style.css'],
+    templateUrl:'app.component.html'  
+})
+
+export class AppComponent { 
+  public className:string="";
+  public checked:boolean=true;
+
+  public isChecked = false;
+
+  toggleCheckbox() {
+    this.isChecked = !this.isChecked;
+    if (this.isChecked) {
+      document.body.classList.add('dark');
+    }
+    else{
+      document.body.classList.remove('dark');
+    } 
+  }
+  
+}

ej2-angular/appearance/material 3.md

@@ -0,0 +1,25 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { ButtonModule, CheckBoxModule } from '@syncfusion/ej2-angular-buttons';
+import { AppComponent } from './app.component';
+import { enableRipple } from '@syncfusion/ej2-base';
+import { SwitchModule} from '@syncfusion/ej2-angular-buttons';
+import { FormsModule } from '@angular/forms';
+
+enableRipple(true);
+
+/**
+ * Module
+ */
+@NgModule({
+    imports: [
+        BrowserModule,
+        ButtonModule,
+        CheckBoxModule,
+        SwitchModule,
+        FormsModule
+    ],
+    declarations: [AppComponent],
+    bootstrap: [AppComponent]
+})
+export class AppModule { }

ej2-angular/code-snippet/common/material3-cs1/angular.json

@@ -0,0 +1,6 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { enableProdMode } from '@angular/core';
+import { AppModule } from './app/app.module';
+
+enableProdMode();
+platformBrowserDynamic().bootstrapModule(AppModule);

ej2-angular/code-snippet/common/material3-cs1/app/app.component.html

@@ -0,0 +1,17 @@
+button {
+    margin: 25px 5px 20px 20px;
+  }
+  
+  #loader {
+    color: #008cff;
+    height: 40px;
+    width: 30%;
+    position: absolute;
+    font-family:  'Helvetica Neue','calibiri';
+    font-size:16px;
+    top: 45%;
+    left: 45%;
+  }
+.dark{
+    background-color: black;
+}

ej2-angular/code-snippet/common/material3-cs1/app/app.component.ts

@@ -0,0 +1,22 @@
+
+@import '../node_modules/@syncfusion/ej2-base/styles/material3.css';
+@import '../node_modules/@syncfusion/ej2-buttons/styles/material3.css';
+@import '../node_modules/@syncfusion/ej2-angular-base/styles/material3.css';
+@import '../node_modules/@syncfusion/ej2-angular-buttons/styles/material3.css';
+button {
+  margin: 25px 5px 20px 20px;
+}
+
+#loader {
+  color: #008cff;
+  height: 40px;
+  width: 30%;
+  position: absolute;
+  font-family:  'Helvetica Neue','calibiri';
+  font-size:16px;
+  top: 45%;
+  left: 45%;
+}
+.dark{
+    background-color: black;
+}

ej2-angular/code-snippet/common/material3-cs1/app/app.module.ts

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Material3</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>