@syncfusion/ej2-angular-base 19.3.55 → 19.3.60

package/schematics/ng-add/theme.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const change_1 = require("@schematics/angular/utility/change");
-const config_1 = require("@schematics/angular/utility/config");
+const helpers_1 = require("../utils/helpers/helpers");
 const get_project_1 = require("../utils/get-project");
 const package_1 = require("../utils/package");
 const project_style_file_1 = require("../utils/project-style-file");
@@ -21,12 +21,13 @@ exports.addEJ2ThemeToPackageJson = addEJ2ThemeToPackageJson;
  */
 function addEJ2Theme(options, theme) {
     return (host) => {
-        const themePath = `@import \'..\/node_modules/@syncfusion/ej2-${theme}-theme/styles/${theme}.css\';\n`;
+        let themePath = `@import \'..\/node_modules/@syncfusion/ej2-${theme}-theme/styles/${theme}.css\'`;
         const strippedThemePath = `./node_modules/@syncfusion/ej2-${theme}-theme/styles/${theme}.css`;
-        const workspace = config_1.getWorkspace(host);
+        const workspace = helpers_1.getWorkspace(host);
         const project = get_project_1.getProjectFromWorkspace(workspace, options.project);
-        const stylesPath = project_style_file_1.getProjectStyleFile(project, 'css');
+        const stylesPath = project_style_file_1.getProjectStyleFile(project);
         const stylesBuffer = host.read(stylesPath);
+        themePath += stylesPath.includes("sass") ? `\n` : `;\n`;
         // Because the build setup for the Angular CLI can be changed so dramatically, we can't know
         // where to generate anything if the project is not using the default config for build and test.
         project_style_file_1.assertDefaultBuildersConfigured(project);

package/schematics/utils/get-project.js

@@ -9,6 +9,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 function getProjectFromWorkspace(workspace, projectName) {
     let project = workspace.projects[projectName || workspace.defaultProject];
+    if (workspace.defaultProject === undefined) {
+        project = workspace.projects[projectName || Object.keys(workspace.projects)[0]];
+    }
     if (!project) {
         throw new Error(`Could not find project in workspace: ${projectName}`);
     }

package/schematics/utils/helpers/helpers.d.ts

@@ -93,7 +93,7 @@ export interface ProjectBuildOptions {
     [k: string]: any;
 }
 /** Gets the Angular CLI workspace config (angular.json) */
-export declare function getWorkspace(host: Tree): Workspace;
+export declare function getWorkspace(host: Tree): any;
 /**
  * Gets a project from the Angular CLI workspace. If no project name is given, the first project
  * will be retrieved.

package/schematics/utils/project-style-file.js

@@ -10,9 +10,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const core_1 = require("@angular-devkit/core");
 const schematics_1 = require("@angular-devkit/schematics");
 /** Regular expression that matches all possible Angular CLI default style files. */
-const defaultStyleFileRegex = /styles\.(c|le|sc)ss/;
+const defaultStyleFileRegex = /styles\.(c|le|sa|sc)ss/;
 /** Regular expression that matches all files that have a proper stylesheet extension. */
-const validStyleFileRegex = /\.(c|le|sc)ss/;
+const validStyleFileRegex = /\.(c|le|sa|sc)ss/;
 /**
  * Gets a style file with the given extension in a project and returns its path. If no
  * extension is specified, any style file with a valid extension will be returned.

package/src/complex-array-base.js

@@ -21,8 +21,14 @@ var ComplexBase = /** @class */ (function () {
         var templateProperties = Object.keys(this);
         for (var i = 0; i < templateProperties.length; i++) {
             var tempProp = getValue(templateProperties[i], this);
-            if (typeof tempProp === 'object' && tempProp.elementRef && !getValue(templateProperties[i].indexOf('Ref') !== -1 ? templateProperties[i] : templateProperties[i] + 'Ref', this)) {
-                setValue(templateProperties[i].indexOf('Ref') !== -1 ? templateProperties[i] : templateProperties[i] + 'Ref', tempProp, this);
+            if (typeof tempProp === 'object' && tempProp && tempProp.elementRef) {
+                if (!getValue(templateProperties[i].indexOf('Ref') !== -1 ? templateProperties[i] : templateProperties[i] + 'Ref', this)) {
+                    setValue(templateProperties[i].indexOf('Ref') !== -1 ? templateProperties[i] : templateProperties[i] + 'Ref', tempProp, this);
+                }
+                if (getValue("viewContainerRef", this) && !getValue("_viewContainerRef", tempProp.elementRef.nativeElement) && !getValue("propName", tempProp.elementRef.nativeElement)) {
+                    setValue("_viewContainerRef", getValue("viewContainerRef", this), tempProp.elementRef.nativeElement);
+                    setValue("propName", templateProperties[i].replace("Ref", ''), tempProp.elementRef.nativeElement);
+                }
             }
         }
         templateProperties = Object.keys(this);
@@ -41,7 +47,7 @@ var ComplexBase = /** @class */ (function () {
         if (this.directivePropList) {
             for (var k = 0; k < this.directivePropList.length; k++) {
                 var dirPropName = this.directivePropList[k];
-                if (propList.indexOf(dirPropName) !== -1 && getValue(dirPropName, this)) {
+                if (propList.indexOf(dirPropName) !== -1 && (getValue(dirPropName, this) === false || getValue(dirPropName, this))) {
                     setValue(dirPropName, getValue(dirPropName, this), this.propCollection);
                 }
             }
@@ -175,9 +181,12 @@ var ArrayBase = /** @class */ (function () {
                         this.list[i].propCollection.dataSource = this.list[i].dataSource;
                         this.list[i].hasChanges = true;
                     }
-                    isSourceChanged = (JSON.stringify(this.list[i].propCollection.dataSource) !==
-                        JSON.stringify(childrenDataSource[i].propCollection.dataSource));
+                    if (this.list[i].property !== "series") {
+                        isSourceChanged = (JSON.stringify(this.list[i].propCollection.dataSource) !==
+                            JSON.stringify(childrenDataSource[i].propCollection.dataSource));
+                    }
                 }
+                isSourceChanged = this.list[i].hasChanges !== childrenDataSource[i].hasChanges;
             }
         }
         this.hasNewChildren = (this.list.length !== this.children.length || isSourceChanged) ? true : null;

package/src/component-base.js

@@ -75,6 +75,19 @@ var ComponentBase = /** @class */ (function () {
             tempOnThis.tagObjects.push(tagObject);
         }
         var complexTemplates = Object.keys(tempOnThis);
+        for (var i = 0; i < complexTemplates.length; i++) {
+            var compProp = getValue(complexTemplates[i], tempOnThis);
+            if (typeof compProp === 'object' && compProp && compProp.elementRef) {
+                if (typeof compProp === 'object' && compProp && compProp.elementRef && complexTemplates[i].indexOf('_') !== -1 && complexTemplates[i].indexOf('Ref') === -1) {
+                    setValue(complexTemplates[i] + 'Ref', compProp, tempOnThis);
+                }
+                if (tempOnThis.viewContainerRef && !getValue("_viewContainerRef", compProp.elementRef.nativeElement) && !getValue("propName", compProp.elementRef.nativeElement)) {
+                    setValue("_viewContainerRef", tempOnThis.viewContainerRef, compProp.elementRef.nativeElement);
+                    setValue("propName", complexTemplates[i].replace("Ref", ''), compProp.elementRef.nativeElement);
+                }
+            }
+        }
+        complexTemplates = Object.keys(tempOnThis);
         complexTemplates = complexTemplates.filter(function (val) {
             return /Ref$/i.test(val) && /\_/i.test(val);
         });
@@ -124,6 +137,7 @@ var ComponentBase = /** @class */ (function () {
         templateProperties = templateProperties.filter(function (val) {
             return /Ref$/i.test(val);
         });
+        var ngtempRef = tempAfterViewThis.getModuleName() === 'DocumentEditor';
         for (var _i = 0, templateProperties_1 = templateProperties; _i < templateProperties_1.length; _i++) {
             var tempName = templateProperties_1[_i];
             var propName = tempName.replace('Ref', '');
@@ -131,13 +145,21 @@ var ComponentBase = /** @class */ (function () {
         }
         // Used setTimeout for template binding
         // Refer Link: https://github.com/angular/angular/issues/6005
-        setTimeout(function () {
+        var appendToComponent = function (tempAfterViewThis) {
             /* istanbul ignore else  */
-            if (typeof window !== 'undefined' && document.body.contains(tempAfterViewThis.element)) {
+            if (typeof window !== 'undefined' && tempAfterViewThis.element) {
                 tempAfterViewThis.appendTo(tempAfterViewThis.element);
                 tempAfterViewThis.ngEle.nativeElement.style.visibility = '';
             }
-        });
+        };
+        if (!ngtempRef && !tempAfterViewThis.getModuleName().includes('btn')) {
+            setTimeout(function () {
+                appendToComponent(tempAfterViewThis);
+            });
+        }
+        else {
+            appendToComponent(tempAfterViewThis);
+        }
     };
     // tslint:disable-next-line:no-any
     ComponentBase.prototype.ngOnDestroy = function (isTempRef) {
@@ -149,9 +171,28 @@ var ComponentBase = /** @class */ (function () {
                 tempOnDestroyThis.destroy();
                 tempOnDestroyThis.clearTemplate(null);
                 // removing bounded events and tagobjects from component after destroy
-                tempOnDestroyThis.ngBoundedEvents = {};
-                tempOnDestroyThis.tagObjects = {};
-                tempOnDestroyThis.ngEle = null;
+                setTimeout(function () {
+                    for (var _i = 0, _a = Object.keys(tempOnDestroyThis); _i < _a.length; _i++) {
+                        var key = _a[_i];
+                        var value = tempOnDestroyThis[key];
+                        if (value && /object/.test(typeof value) && Object.keys(value).length !== 0) {
+                            if (/properties|changedProperties|childChangedProperties|oldProperties|moduleLoader/.test(key)) {
+                                for (var _b = 0, _c = Object.keys(tempOnDestroyThis[key]); _b < _c.length; _b++) {
+                                    var propKey = _c[_b];
+                                    var propValue = value[propKey];
+                                    if (propValue && /object/.test(typeof propValue) && Object.keys(propValue).length !== 0 && (propValue.parent || propValue.parentObj)) {
+                                        tempOnDestroyThis[key][propKey] = null;
+                                    }
+                                }
+                            }
+                            else {
+                                if (value.parent || value.parentObj) {
+                                    tempOnDestroyThis[key] = null;
+                                }
+                            }
+                        }
+                    }
+                });
             }
         });
     };
@@ -191,24 +232,40 @@ var ComponentBase = /** @class */ (function () {
                                 var complexPropName = compDirPropList[k];
                                 obj[complexPropName] = tagObject.instance.list[h].propCollection[complexPropName];
                             }
-                            for (var i = 0; i < tagObject.instance.list[h].tags.length; i++) {
+                            var _loop_1 = function (i) {
                                 var tag = tagObject.instance.list[h].tags[i];
                                 var childObj = getValue('child' + tag.substring(0, 1).toUpperCase() + tag.substring(1), tagObject.instance.list[h]);
                                 if (childObj) {
                                     var innerchildObj = tagObject.instance.list[h]['child' + tag.substring(0, 1).toUpperCase() + tag.substring(1)];
-                                    if (innerchildObj) {
-                                        for (var j = 0; j < innerchildObj.list.length; j++) {
-                                            var innerTag = innerchildObj.list[0].tags[0];
-                                            if (innerTag) {
-                                                var innerchildTag = getValue('child' + innerTag.substring(0, 1).toUpperCase() + innerTag.substring(1), innerchildObj.list[j]);
-                                                if (innerchildTag) {
-                                                    innerchildObj.list[j].tagObjects.push({ instance: innerchildTag, name: innerTag });
+                                    // Update the inner child tag objects
+                                    var updateChildTag_1 = function (innerchild) {
+                                        var innerLevelTag = [];
+                                        if (innerchild) {
+                                            for (var j = 0; j < innerchild.list.length; j++) {
+                                                var innerTag = innerchild.list[0].tags[0];
+                                                if (innerTag) {
+                                                    var innerchildTag = getValue('child' + innerTag.substring(0, 1).toUpperCase() + innerTag.substring(1), innerchild.list[j]);
+                                                    if (innerchildTag) {
+                                                        innerchild.list[j].tagObjects.push({ instance: innerchildTag, name: innerTag });
+                                                        innerLevelTag.push(innerchildTag);
+                                                    }
                                                 }
                                             }
                                         }
-                                    }
+                                        // check for inner level tag
+                                        if (innerLevelTag.length !== 0) {
+                                            for (var l = 0; l < innerLevelTag.length; l++) {
+                                                updateChildTag_1(innerLevelTag[l]);
+                                            }
+                                        }
+                                        ;
+                                    };
+                                    updateChildTag_1(innerchildObj);
                                     tagObject.instance.list[h].tagObjects.push({ instance: childObj, name: tag });
                                 }
+                            };
+                            for (var i = 0; i < tagObject.instance.list[h].tags.length; i++) {
+                                _loop_1(i);
                             }
                             tagObject.instance.list[h].propCollection[tagObject.instance.propertyName].push(obj);
                         }
@@ -219,7 +276,7 @@ var ComponentBase = /** @class */ (function () {
                 }
                 else {
                     /* istanbul ignore next */
-                    if ((tempAfterContentThis[tagObject.name].length !== tagObject.instance.list.length) || (tempAfterContentThis.getModuleName() === 'diagram')) {
+                    if ((tempAfterContentThis[tagObject.name].length !== tagObject.instance.list.length) || (/diagram|DashboardLayout/.test(tempAfterContentThis.getModuleName()))) {
                         tempAfterContentThis[tagObject.name] = tagObject.instance.list;
                     }
                     for (var _b = 0, _c = tagObject.instance.list; _b < _c.length; _b++) {
@@ -230,7 +287,7 @@ var ComponentBase = /** @class */ (function () {
                         complexTemplates = complexTemplates.filter(function (val) {
                             return /Ref$/i.test(val);
                         });
-                        if (curChild.properties && Object.keys(curChild.properties).length !== 0 && /chart/.test(tempAfterContentThis.getModuleName())) {
+                        if (curChild.properties && Object.keys(curChild.properties).length !== 0) {
                             for (var _d = 0, complexTemplates_2 = complexTemplates; _d < complexTemplates_2.length; _d++) {
                                 var complexPropName = complexTemplates_2[_d];
                                 complexPropName = complexPropName.replace(/Ref/, '');
@@ -266,7 +323,7 @@ var ComponentBase = /** @class */ (function () {
     };
     ComponentBase.prototype.addTwoWay = function (propList) {
         var _this = this;
-        var _loop_1 = function (prop) {
+        var _loop_2 = function (prop) {
             getValue(prop, this_1);
             Object.defineProperty(this_1, prop, {
                 get: function () {
@@ -279,7 +336,7 @@ var ComponentBase = /** @class */ (function () {
         var this_1 = this;
         for (var _i = 0, propList_1 = propList; _i < propList_1.length; _i++) {
             var prop = propList_1[_i];
-            _loop_1(prop);
+            _loop_2(prop);
         }
     };
     ComponentBase.prototype.addEventListener = function (eventName, handler) {

package/src/form-base.d.ts

@@ -1,4 +1,4 @@
-import { EventEmitter } from '@angular/core';
+import { EventEmitter, ChangeDetectorRef } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 /**
  * Angular Form Base Module
@@ -26,6 +26,7 @@ export declare class FormBase<T> implements ControlValueAccessor {
     preventChange: boolean;
     isUpdated: boolean;
     oldValue: any;
+    cdr: ChangeDetectorRef;
     localChange(e: {
         value?: T;
         checked?: T;

package/src/form-base.js

@@ -39,6 +39,7 @@ var FormBase = /** @class */ (function () {
                 }
             }
         }
+        // this.cdr.markForCheck();
     };
     FormBase.prototype.registerOnChange = function (registerFunction) {
         this.propagateChange = registerFunction;
@@ -64,16 +65,21 @@ var FormBase = /** @class */ (function () {
         // Used setTimeout for template binding
         // Refer Link: https://github.com/angular/angular/issues/6005
         // Removed setTimeout, Because we have called markForCheck() method in Angular Template Compiler
-        // setTimeout(() => {
         /* istanbul ignore else */
         if (typeof window !== 'undefined') {
-            tempFormAfterViewThis.appendTo(tempFormAfterViewThis.element);
+            if ((tempFormAfterViewThis.getModuleName()).includes('dropdown')) {
+                setTimeout(function () {
+                    tempFormAfterViewThis.appendTo(tempFormAfterViewThis.element);
+                });
+            }
+            else {
+                tempFormAfterViewThis.appendTo(tempFormAfterViewThis.element);
+            }
             var ele = tempFormAfterViewThis.inputElement || tempFormAfterViewThis.element;
             ele.addEventListener('focus', tempFormAfterViewThis.ngOnFocus.bind(tempFormAfterViewThis));
             ele.addEventListener('blur', tempFormAfterViewThis.ngOnBlur.bind(tempFormAfterViewThis));
         }
         this.isFormInit = false;
-        // });
     };
     FormBase.prototype.setDisabledState = function (disabled) {
         this.enabled = !disabled;
@@ -107,6 +113,7 @@ var FormBase = /** @class */ (function () {
         // When binding Html textbox value to syncfusion textbox, change event triggered dynamically.
         // To prevent change event, trigger change in component side based on `preventChange` value
         this.preventChange = this.isFormInit ? false : true;
+        // this.cdr.markForCheck();
         if (value === null) {
             return;
         }
@@ -116,6 +123,7 @@ var FormBase = /** @class */ (function () {
         if (this.skipFromEvent !== true) {
             this.focus.emit(e);
         }
+        // this.cdr.markForCheck();
     };
     FormBase.prototype.ngOnBlur = function (e) {
         this.propagateTouch();
@@ -123,6 +131,7 @@ var FormBase = /** @class */ (function () {
         if (this.skipFromEvent !== true) {
             this.blur.emit(e);
         }
+        // this.cdr.markForCheck();
     };
     FormBase.isFormBase = true;
     return FormBase;

package/src/template.js

@@ -5,7 +5,7 @@ var stringCompiler = getTemplateEngine();
  * Angular Template Compiler
  */
 export function compile(templateEle, helper) {
-    if (typeof templateEle === 'string') {
+    if (typeof templateEle === 'string' || (typeof templateEle === 'function' && templateEle.prototype && templateEle.prototype.CSPTemplate)) {
         return stringCompiler(templateEle, helper);
     }
     else {
@@ -17,7 +17,12 @@ export function compile(templateEle, helper) {
             /* istanbul ignore next */
             var conRef = contRef_1 ? contRef_1 : component.viewContainerRef;
             var viewRef = conRef.createEmbeddedView(templateEle, context);
-            viewRef.markForCheck();
+            if (getValue('currentInstance.element.nodeName', conRef) === 'EJS-MENTION') {
+                viewRef.detectChanges();
+            }
+            else {
+                viewRef.markForCheck();
+            }
             /* istanbul ignore next */
             var viewCollection = (component && component.registeredTemplate) ?
                 component.registeredTemplate : getValue('currentInstance.registeredTemplate', conRef);

package/src/util.js

@@ -7,7 +7,7 @@ import { isNullOrUndefined } from '@syncfusion/ej2-base';
 export function applyMixins(derivedClass, baseClass) {
     baseClass.forEach(function (baseClass) {
         Object.getOwnPropertyNames(baseClass.prototype).forEach(function (name) {
-            if (!derivedClass.prototype.hasOwnProperty(name) || baseClass.isFormBase) {
+            if (!derivedClass.prototype.hasOwnProperty(name) || (baseClass.isFormBase && name !== 'constructor')) {
                 derivedClass.prototype[name] = baseClass.prototype[name];
             }
         });
@@ -50,16 +50,28 @@ export function clearTemplate(_this, templateNames, index) {
         var regProperties = templateNames && templateNames.filter(function (val) {
             return (/\./g.test(val) ? false : true);
         });
+        var tabaccordionTemp = /tab|accordion|toolbar/.test(_this.getModuleName());
         for (var _i = 0, _a = (regProperties && regProperties || regTemplates); _i < _a.length; _i++) {
             var registeredTemplate = _a[_i];
             /* istanbul ignore next */
             if (index && index.length) {
                 for (var e = 0; e < index.length; e++) {
-                    for (var m = 0; m < _this.registeredTemplate.template.length; m++) {
-                        var value = _this.registeredTemplate.template[m].rootNodes[0];
-                        if (value === index[e]) {
-                            var rt = _this.registeredTemplate[registeredTemplate];
-                            rt[m].destroy();
+                    if (tabaccordionTemp) {
+                        for (var m = 0; m < _this.registeredTemplate[registeredTemplate].length; m++) {
+                            var value = _this.registeredTemplate[registeredTemplate][m];
+                            if (value && value === index[e]) {
+                                value.destroy();
+                                _this.registeredTemplate[registeredTemplate].splice(m, 1);
+                            }
+                        }
+                    }
+                    else {
+                        for (var m = 0; m < _this.registeredTemplate.template.length; m++) {
+                            var value = _this.registeredTemplate.template[m].rootNodes[0];
+                            if (value === index[e]) {
+                                var rt = _this.registeredTemplate[registeredTemplate];
+                                rt[m].destroy();
+                            }
                         }
                     }
                 }
@@ -82,7 +94,9 @@ export function clearTemplate(_this, templateNames, index) {
                     }
                 }
             }
-            delete _this.registeredTemplate[registeredTemplate];
+            if (!tabaccordionTemp || !index) {
+                delete _this.registeredTemplate[registeredTemplate];
+            }
         }
     }
     var _loop_1 = function (tagObject) {

package/styles/bootstrap-dark.scss

@@ -1 +1 @@
-@import 'ej2-base/styles/bootstrap-dark-definition.scss';
+@import 'ej2-base/styles/definition/bootstrap-dark.scss';

package/styles/bootstrap.scss

@@ -1 +1 @@
-@import 'ej2-base/styles/bootstrap-definition.scss';
+@import 'ej2-base/styles/definition/bootstrap.scss';

package/styles/bootstrap4.scss

@@ -1 +1 @@
-@import 'ej2-base/styles/bootstrap4-definition.scss';
+@import 'ej2-base/styles/definition/bootstrap4.scss';

package/styles/bootstrap5-dark.scss

@@ -1 +1 @@
-@import 'ej2-base/styles/bootstrap5-dark-definition.scss';
+@import 'ej2-base/styles/definition/bootstrap5-dark.scss';

package/styles/bootstrap5.scss

@@ -1 +1 @@
-@import 'ej2-base/styles/bootstrap5-definition.scss';
+@import 'ej2-base/styles/definition/bootstrap5.scss';

package/styles/fabric-dark.scss

@@ -1 +1 @@
-@import 'ej2-base/styles/fabric-dark-definition.scss';
+@import 'ej2-base/styles/definition/fabric-dark.scss';

package/styles/fabric.scss

@@ -1 +1 @@
-@import 'ej2-base/styles/fabric-definition.scss';
+@import 'ej2-base/styles/definition/fabric.scss';

package/styles/fluent-dark.scss

@@ -0,0 +1 @@
+@import 'ej2-base/styles/definition/fluent-dark.scss';

package/styles/fluent.scss

@@ -0,0 +1 @@
+@import 'ej2-base/styles/definition/fluent.scss';

package/styles/highcontrast-light.scss

@@ -1 +1 @@
-@import 'ej2-base/styles/highcontrast-light-definition.scss';
+@import 'ej2-base/styles/definition/highcontrast-light.scss';

package/styles/highcontrast.scss

@@ -1 +1 @@
-@import 'ej2-base/styles/highcontrast-definition.scss';
+@import 'ej2-base/styles/definition/highcontrast.scss';

package/styles/material-dark.css

@@ -1 +0,0 @@
-@import url("https://fonts.googleapis.com/css?family=Roboto:400,500");

package/styles/material-dark.scss

@@ -1 +1 @@
-@import 'ej2-base/styles/material-dark-definition.scss';
+@import 'ej2-base/styles/definition/material-dark.scss';

package/styles/material.css

@@ -1 +0,0 @@
-@import url("https://fonts.googleapis.com/css?family=Roboto:400,500");

package/styles/material.scss

@@ -1 +1 @@
-@import 'ej2-base/styles/material-definition.scss';
+@import 'ej2-base/styles/definition/material.scss';

package/styles/material3-dark.css

@@ -0,0 +1,54 @@
+:root {
+  --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: 73, 69, 79;
+  --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;
+  --color-sf-on-tertiary-containe: 255, 216, 228;
+  --color-sf-on-surface: 230, 225, 229;
+  --color-sf-on-surface-variant: 202, 196, 208;
+  --color-sf-on-background: 230, 225, 229;
+  --color-sf-outline: 147, 143, 153;
+  --color-sf-outline-variant: 68, 71, 70;
+  --color-sf-shadow: 0, 0, 0;
+  --color-sf-surface-tint-color: 208, 188, 255;
+  --color-sf-inverse-surface: 230, 225, 229;
+  --color-sf-inverse-on-surface: 49, 48, 51;
+  --color-sf-inverse-primary: 103, 80, 164;
+  --color-sf-scrim: 0, 0, 0;
+  --color-sf-error: 242, 184, 181;
+  --color-sf-error-container: 140, 29, 24;
+  --color-sf-on-error: 96, 20, 16;
+  --color-sf-on-error-container: 249, 222, 220;
+  --color-sf-success: 83, 202, 23;
+  --color-sf-success-container: 22, 62, 2;
+  --color-sf-on-success: 13, 39, 0;
+  --color-sf-on-success-container: 183, 250, 150;
+  --color-sf-info: 71, 172, 251;
+  --color-sf-info-container: 0, 67, 120;
+  --color-sf-on-info: 0, 51, 91;
+  --color-sf-on-info-container: 173, 219, 255;
+  --color-sf-warning: 245, 180, 130;
+  --color-sf-warning-container: 123, 65, 0;
+  --color-sf-on-warning: 99, 52, 0;
+  --color-sf-on-warning-container: 255, 220, 193;
+  --color-sf-spreadsheet-gridline: 231, 224, 236;
+  --color-sf-shadow-focus-ring1: 0 0 0 1px #000000, 0 0 0 3px #ffffff;
+  --color-sf-success-text: 0, 0, 0;
+  --color-sf-warning-text: 0, 0, 0;
+  --color-sf-info-text: 0, 0, 0;
+  --color-sf-danger-text: 0, 0, 0;
+  --color-sf-diagram-palette-background: var(--color-sf-inverse-surface);
+  --color-sf-content-text-color-alt2: var(--color-sf-on-secondary);
+}

package/styles/material3-dark.scss

@@ -0,0 +1 @@
+@import 'ej2-base/styles/definition/material3-dark.scss';