@syncfusion/ej2-layouts 33.2.3 → 34.1.29

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 33.2.3
+*  version : 34.1.29
 *  Copyright Syncfusion Inc. 2001 - 2025. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syncfusion/ej2-layouts",
-  "version": "33.2.3",
+  "version": "34.1.29",
   "description": "A package of Essential JS 2 layout pure CSS components such as card and avatar. The card is used as small container to show content in specific structure, whereas the avatars are icons, initials or figures representing particular person.",
   "author": "Syncfusion Inc.",
   "license": "SEE LICENSE IN license",
@@ -8,7 +8,7 @@
   "module": "./index.js",
   "es2015": "./dist/es6/ej2-layouts.es5.js",
   "dependencies": {
-    "@syncfusion/ej2-base": "~33.2.3"
+    "@syncfusion/ej2-base": "~34.1.29"
   },
   "devDependencies": {},
   "keywords": [

package/src/dashboard-layout/dashboard-layout.d.ts

@@ -387,6 +387,9 @@ export declare class DashboardLayout extends Component<HTMLElement> implements I
     protected updateOldRowColumn(): void;
     protected createSubElement(cssClass: string[], idValue: string, className: string): HTMLElement;
     private templateParser;
+    private hasTemplateExpressions;
+    private createCspSafeTemplate;
+    private isCSPError;
     protected renderTemplate(content: string, appendElement: HTMLElement, type: string, isStringTemplate: boolean, prop: string): void;
     protected renderPanels(cellElement: HTMLElement, panelModel: PanelModel, panelId: string, isStringTemplate: boolean): HTMLElement;
     protected disablePanel(panelElement: HTMLElement): void;

package/src/dashboard-layout/dashboard-layout.js

@@ -351,20 +351,65 @@ var DashboardLayout = /** @class */ (function (_super) {
     DashboardLayout.prototype.templateParser = function (template) {
         if (template) {
             try {
-                if (typeof template !== 'function' && document.querySelectorAll(template).length) {
-                    return compile(document.querySelector(template).innerHTML.trim());
+                if (typeof template === 'string' && (template.charAt(0) === '.' || template.charAt(0) === '#')) {
+                    try {
+                        var elements = document.querySelectorAll(template);
+                        if (elements.length > 0) {
+                            return compile(elements[0].innerHTML.trim());
+                        }
+                    }
+                    catch (selectorError) {
+                        // Not a valid CSS selector, treat as HTML string below
+                    }
                 }
-                else {
+                if (typeof template === 'function') {
                     return compile(template);
                 }
+                if (typeof template === 'string') {
+                    if (!this.hasTemplateExpressions(template)) {
+                        var sanitizedValue = SanitizeHtmlHelper.sanitize(template);
+                        return compile((this.enableHtmlSanitizer && typeof (template) === 'string') ? sanitizedValue : template);
+                    }
+                    return compile(template);
+                }
+                return compile(template);
             }
             catch (error) {
-                var sanitizedValue = SanitizeHtmlHelper.sanitize(template);
-                return compile((this.enableHtmlSanitizer && typeof (template) === 'string') ? sanitizedValue : template);
+                if (this.isCSPError(error) && typeof template === 'string') {
+                    return this.createCspSafeTemplate(template);
+                }
+                else {
+                    var sanitizedValue = SanitizeHtmlHelper.sanitize(template);
+                    return compile((this.enableHtmlSanitizer && typeof (template) === 'string') ? sanitizedValue : template);
+                }
             }
         }
         return undefined;
     };
+    DashboardLayout.prototype.hasTemplateExpressions = function (template) {
+        return /\{\{[\s\S]*?\}\}/.test(template) || /\{\d+\}/.test(template);
+    };
+    DashboardLayout.prototype.createCspSafeTemplate = function (template) {
+        var _this = this;
+        var sanitized = this.enableHtmlSanitizer ? SanitizeHtmlHelper.sanitize(template) : template;
+        return function (dataContext) {
+            var result = sanitized.replace(/\{\{:(\w+)\}\}/g, function (match, prop) {
+                return dataContext[prop] !== undefined ? String(dataContext[prop]) : match;
+            });
+            var wrapper = _this.createElement('div');
+            wrapper.innerHTML = result;
+            return Array.from(wrapper.children);
+        };
+    };
+    DashboardLayout.prototype.isCSPError = function (error) {
+        if (error instanceof EvalError) {
+            return true;
+        }
+        var msg = error.message || '';
+        return msg.includes('Content Security Policy') ||
+            msg.includes('unsafe-eval') ||
+            msg.includes('refused to evaluate');
+    };
     DashboardLayout.prototype.renderTemplate = function (content, appendElement, type, isStringTemplate, prop) {
         var templateFn = this.templateParser(content);
         var templateElements = [];

package/src/splitter/splitter.js

@@ -1256,14 +1256,12 @@ var Splitter = /** @class */ (function (_super) {
         if (cCount > 0) {
             if (!expandPane.classList.contains(COLLAPSE_PANE)) {
                 addClass([expandPane], EXPAND_PANE);
-                expandPane.setAttribute('aria-expanded', 'true');
             }
         }
         else if (cCount === 0) {
             for (var i = 0; i < this.allPanes.length; i++) {
                 if (!this.allPanes[i].classList.contains(COLLAPSE_PANE)) {
                     removeClass([this.allPanes[i]], EXPAND_PANE);
-                    this.allPanes[i].setAttribute('aria-expanded', 'false');
                 }
             }
         }
@@ -1274,7 +1272,6 @@ var Splitter = /** @class */ (function (_super) {
         this.updateFlexGrow();
         if (flexStatus) {
             this.previousPane.classList.remove(EXPAND_PANE);
-            this.previousPane.setAttribute('aria-expanded', 'false');
             this.previousPane.style.flexGrow = '';
         }
     };
@@ -1398,13 +1395,11 @@ var Splitter = /** @class */ (function (_super) {
         var expandPane = isLeftOrUp ? this.nextPane : this.previousPane;
         var collapsePaneIndex = isLeftOrUp ? this.prevPaneIndex : this.nextPaneIndex;
         removeClass([collapsePane], EXPAND_PANE);
-        collapsePane.setAttribute('aria-expanded', 'false');
         addClass([collapsePane], collapseClass);
         collapsePane.setAttribute('aria-hidden', 'true');
         var isFlexPane = collapsePane.style.flexBasis === '';
         if (isFlexPane) {
             addClass([expandPane], EXPAND_PANE);
-            expandPane.setAttribute('aria-expanded', 'true');
         }
         else {
             var isFlexPaneHidden = true;
@@ -1413,7 +1408,6 @@ var Splitter = /** @class */ (function (_super) {
                     if (this.allPanes[i].style.flexBasis === '' && !this.allPanes[i].classList.contains(COLLAPSE_PANE)
                         && !this.allPanes[i].classList.contains(EXPAND_PANE)) {
                         addClass([this.allPanes[i]], EXPAND_PANE);
-                        this.allPanes[i].setAttribute('aria-expanded', 'true');
                         isFlexPaneHidden = false;
                         break;
                     }
@@ -1421,7 +1415,6 @@ var Splitter = /** @class */ (function (_super) {
             }
             if (isFlexPaneHidden) {
                 addClass([expandPane], EXPAND_PANE);
-                expandPane.setAttribute('aria-expanded', 'true');
             }
         }
         if (!this.collapseFlag) {

package/styles/avatar/_all.scss

@@ -1 +1 @@
-@use 'layout' as *;
+@forward 'layout';

package/styles/avatar/_bds-definition.scss

@@ -1,5 +1,4 @@
-@use 'ej2-base/styles/definition/bds' as *;
-@forward 'ej2-base/styles/definition/bds';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
 
 // Avatar Base
 $avatar-base-border-radius: 8px !default;

package/styles/avatar/_bootstrap-dark-definition.scss

@@ -1,5 +1,4 @@
-@use 'ej2-base/styles/definition/bootstrap-dark' as *;
-@forward 'ej2-base/styles/definition/bootstrap-dark';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
 
 // Avatar Base
 $avatar-base-border-radius: 5px !default;

package/styles/avatar/_bootstrap-definition.scss

@@ -1,5 +1,4 @@
-@use 'ej2-base/styles/definition/bootstrap' as *;
-@forward 'ej2-base/styles/definition/bootstrap';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
 
 // Avatar Base
 $avatar-base-border-radius: 5px !default;

package/styles/avatar/_bootstrap4-definition.scss

@@ -1,5 +1,4 @@
-@use 'ej2-base/styles/definition/bootstrap4' as *;
-@forward 'ej2-base/styles/definition/bootstrap4';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
 
 // Avatar Base
 $avatar-base-border-radius: 4px !default;

package/styles/avatar/_bootstrap5-dark-definition.scss

@@ -1,5 +1,4 @@
-@use 'ej2-base/styles/definition/bootstrap5-dark' as *;
-@forward 'ej2-base/styles/definition/bootstrap5-dark';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
 
 // Avatar Base
 $avatar-base-border-radius: 2px !default;

package/styles/avatar/_bootstrap5-definition.scss

@@ -1,5 +1,4 @@
-@use 'ej2-base/styles/definition/bootstrap5' as *;
-@forward 'ej2-base/styles/definition/bootstrap5';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
 
 // Avatar Base
 $avatar-base-border-radius: 2px !default;

package/styles/avatar/_bootstrap5.3-definition.scss

@@ -1,5 +1,4 @@
-@use 'ej2-base/styles/definition/bootstrap5.3' as *;
-@forward 'ej2-base/styles/definition/bootstrap5.3';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
 
 // Avatar Base
 $avatar-base-border-radius: $radius-2 !default;

package/styles/avatar/_fabric-dark-definition.scss

@@ -1,5 +1,4 @@
-@use 'ej2-base/styles/definition/fabric-dark' as *;
-@forward 'ej2-base/styles/definition/fabric-dark';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
 
 // Avatar Base
 $avatar-base-border-radius: 5px !default;

package/styles/avatar/_fabric-definition.scss

@@ -1,5 +1,4 @@
-@use 'ej2-base/styles/definition/fabric' as *;
-@forward 'ej2-base/styles/definition/fabric';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
 
 // Avatar Base
 $avatar-base-border-radius: 5px !default;

package/styles/avatar/_fluent-dark-definition.scss

@@ -1,5 +1,4 @@
-@use 'ej2-base/styles/definition/fluent-dark' as *;
-@forward 'ej2-base/styles/definition/fluent-dark';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
 
 // Avatar Base
 $avatar-base-border-radius: 4px !default;

package/styles/avatar/_fluent-definition.scss

@@ -1,5 +1,4 @@
-@use 'ej2-base/styles/definition/fluent' as *;
-@forward 'ej2-base/styles/definition/fluent';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
 
 // Avatar Base
 $avatar-base-border-radius: 4px !default;

package/styles/avatar/_fluent2-definition.scss

@@ -1,5 +1,4 @@
-@use 'ej2-base/styles/definition/fluent2' as *;
-@forward 'ej2-base/styles/definition/fluent2';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
 
 // Avatar Base
 $avatar-base-border-radius: $radius-4 !default;

package/styles/avatar/_fusionnew-definition.scss

@@ -1,5 +1,4 @@
-@use 'ej2-base/styles/definition/fusionnew' as *;
-@forward 'ej2-base/styles/definition/fusionnew';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
 
 // Avatar Base
 $avatar-base-border-radius: 2px !default;

package/styles/avatar/_highcontrast-definition.scss

@@ -1,5 +1,4 @@
-@use 'ej2-base/styles/definition/highcontrast' as *;
-@forward 'ej2-base/styles/definition/highcontrast';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
 
 // Avatar Base
 $avatar-base-border-radius: 5px !default;

package/styles/avatar/_highcontrast-light-definition.scss

@@ -1,5 +1,4 @@
-@use 'ej2-base/styles/definition/highcontrast-light' as *;
-@forward 'ej2-base/styles/definition/highcontrast-light';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
 
 // Avatar Base
 $avatar-base-border-radius: 5px !default;

package/styles/avatar/_layout.scss

@@ -1,4 +1,4 @@
-@use 'ej2-base/styles/common/mixin' as *;
+@use 'variables' as *;
 @mixin avatar-size($height, $width, $line-height) {
   height: $height;
   width: $width;

package/styles/avatar/_material-dark-definition.scss

@@ -1,5 +1,4 @@
-@use 'ej2-base/styles/definition/material-dark' as *;
-@forward 'ej2-base/styles/definition/material-dark';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
 
 // Avatar Base
 $avatar-base-border-radius: 5px !default;

package/styles/avatar/_material-definition.scss

@@ -1,5 +1,4 @@
-@use 'ej2-base/styles/definition/material' as *;
-@forward 'ej2-base/styles/definition/material';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
 
 // Avatar Base
 $avatar-base-border-radius: 5px !default;

package/styles/avatar/_material3-dark-definition.scss

@@ -1,5 +1,5 @@
-@use 'ej2-base/styles/definition/material3-dark' as *;
-@forward 'ej2-base/styles/definition/material3-dark';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $avatar-base-border-radius: $radius-4 !default;
 $avatar-base-background-color: rgba($primary-light) !default;
 $avatar-base-font-size: $text-xl !default;

package/styles/avatar/_material3-definition.scss

@@ -1,5 +1,5 @@
-@use 'ej2-base/styles/definition/material3' as *;
-@forward 'ej2-base/styles/definition/material3';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $avatar-base-border-radius: $radius-4 !default;
 $avatar-base-background-color: rgba($primary-light) !default;
 $avatar-base-font-size: $text-xl !default;

package/styles/avatar/_tailwind-dark-definition.scss

@@ -1,5 +1,4 @@
-@use 'ej2-base/styles/definition/tailwind-dark' as *;
-@forward 'ej2-base/styles/definition/tailwind-dark';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
 
 // Avatar Base
 $avatar-base-border-radius: 4px !default;

package/styles/avatar/_tailwind-definition.scss

@@ -1,5 +1,4 @@
-@use 'ej2-base/styles/definition/tailwind' as *;
-@forward 'ej2-base/styles/definition/tailwind';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
 
 // Avatar Base
 $avatar-base-border-radius: 4px !default;

package/styles/avatar/_tailwind3-definition.scss

@@ -1,5 +1,4 @@
-@use 'ej2-base/styles/definition/tailwind3' as *;
-@forward 'ej2-base/styles/definition/tailwind3';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
 
 // Avatar Base
 $avatar-base-border-radius: $radius-6 !default;

package/styles/avatar/_variables.scss

@@ -0,0 +1,2 @@
+@forward '@syncfusion/ej2-base/styles/common/_base-variables';
+@forward '_material3-definition';

package/styles/avatar/bds.css

@@ -2,14 +2,6 @@
 
 
 
-.e-avatar {
-  border: 1px solid var(--color-sf-utility-avatar-border-color);
-}
-
-
-
-
-
 .e-avatar {
   border: 1px solid var(--color-sf-utility-avatar-border-color);
 }

package/styles/avatar/bds.scss

@@ -1,3 +1,2 @@
-@use 'ej2-base/styles/definition/bds' as *;
 @use 'bds-definition' as *;
-@use 'all.bds' as *;
+@use 'all' as *;

package/styles/avatar/bootstrap-dark.scss

@@ -1,3 +1,2 @@
-@use 'ej2-base/styles/definition/bootstrap-dark' as *;
 @use 'bootstrap-dark-definition' as *;
-@use 'all.bootstrap-dark' as *;
+@use 'all' as *;

package/styles/avatar/bootstrap.scss

@@ -1,3 +1,2 @@
-@use 'ej2-base/styles/definition/bootstrap' as *;
 @use 'bootstrap-definition' as *;
-@use 'all.bootstrap' as *;
+@use 'all' as *;

package/styles/avatar/bootstrap4.scss

@@ -1,3 +1,2 @@
-@use 'ej2-base/styles/definition/bootstrap4' as *;
 @use 'bootstrap4-definition' as *;
-@use 'all.bootstrap4' as *;
+@use 'all' as *;

package/styles/avatar/bootstrap5-dark.scss

@@ -1,3 +1,2 @@
-@use 'ej2-base/styles/definition/bootstrap5-dark' as *;
 @use 'bootstrap5-dark-definition' as *;
-@use 'all.bootstrap5-dark' as *;
+@use 'all' as *;

package/styles/avatar/bootstrap5.3.css

@@ -8,90 +8,6 @@
 
 
 
-/* Font Family */
-/* Font Sizes */
-/* Radius */
-/* 1px */
-/* 2px */
-/* 3px */
-/* 4px */
-/* 5px */
-/* 6px */
-/* 7px */
-/* 8px */
-/* 9px */
-/* 10px */
-/* 11px */
-/* 12px */
-/* 13px */
-/* 14px */
-/* 15px */
-/* 16px */
-/* 17px */
-/* 18px */
-/* 19px */
-/* 20px */
-/* 21px */
-/* 22px */
-/* 23px */
-/* 24px */
-/* 25px */
-/* 26px */
-/* 27px */
-/* 28px */
-/* 29px */
-/* 30px */
-/* 31px */
-/* 32px */
-/* 33px */
-/* 34px */
-/* 35px */
-/* 36px */
-/* 37px */
-/* 38px */
-/* 39px */
-/* 40px */
-/* 41px */
-/* 42px */
-/* 43px */
-/* 44px */
-/* 45px */
-/* 46px */
-/* 47px */
-/* 48px */
-/* 49px */
-/* 50px */
-/* 5em */
-/* 65% */
-/* border */
-/* 0px */
-/* 1px */
-/* 1.5px */
-/* 2px */
-/* 3px */
-/* 4px */
-/* 5px */
-/* 6px */
-/* 7px */
-/* 8px */
-/* 9px */
-/* 10px */
-/* 11px */
-/* 12px */
-/* 13px */
-/* 14px */
-/* 15px */
-/* 16px */
-
-
-
-
-
-
-
-
-
-
 /* Font Family */
 /* Font Sizes */
 /* Radius */

package/styles/avatar/bootstrap5.3.scss

@@ -1,3 +1,2 @@
-@use 'ej2-base/styles/definition/bootstrap5.3' as *;
 @use 'bootstrap5.3-definition' as *;
-@use 'all.bootstrap5.3' as *;
+@use 'all' as *;

package/styles/avatar/bootstrap5.scss

@@ -1,3 +1,2 @@
-@use 'ej2-base/styles/definition/bootstrap5' as *;
 @use 'bootstrap5-definition' as *;
-@use 'all.bootstrap5' as *;
+@use 'all' as *;

package/styles/avatar/fabric-dark.scss

@@ -1,3 +1,2 @@
-@use 'ej2-base/styles/definition/fabric-dark' as *;
 @use 'fabric-dark-definition' as *;
-@use 'all.fabric-dark' as *;
+@use 'all' as *;

package/styles/avatar/fabric.scss

@@ -1,3 +1,2 @@
-@use 'ej2-base/styles/definition/fabric' as *;
 @use 'fabric-definition' as *;
-@use 'all.fabric' as *;
+@use 'all' as *;

package/styles/avatar/fluent-dark.scss

@@ -1,3 +1,2 @@
-@use 'ej2-base/styles/definition/fluent-dark' as *;
 @use 'fluent-dark-definition' as *;
-@use 'all.fluent-dark' as *;
+@use 'all' as *;

package/styles/avatar/fluent.scss

@@ -1,3 +1,2 @@
-@use 'ej2-base/styles/definition/fluent' as *;
 @use 'fluent-definition' as *;
-@use 'all.fluent' as *;
+@use 'all' as *;

package/styles/avatar/fluent2.css

@@ -6,92 +6,6 @@
 
 
 
-/* Font Family */
-/* Font Sizes */
-/* Radius */
-/* 1px */
-/* 2px */
-/* 3px */
-/* 4px */
-/* 5px */
-/* 6px */
-/* 7px */
-/* 8px */
-/* 9px */
-/* 10px */
-/* 11px */
-/* 12px */
-/* 13px */
-/* 14px */
-/* 15px */
-/* 16px */
-/* 17px */
-/* 18px */
-/* 19px */
-/* 20px */
-/* 21px */
-/* 22px */
-/* 23px */
-/* 24px */
-/* 25px */
-/* 26px */
-/* 27px */
-/* 28px */
-/* 29px */
-/* 30px */
-/* 31px */
-/* 32px */
-/* 33px */
-/* 34px */
-/* 35px */
-/* 36px */
-/* 37px */
-/* 38px */
-/* 39px */
-/* 40px */
-/* 41px */
-/* 42px */
-/* 43px */
-/* 44px */
-/* 45px */
-/* 46px */
-/* 47px */
-/* 48px */
-/* 49px */
-/* 50px */
-/* 5em */
-/* 65% */
-/* border */
-/* 0px */
-/* 1px */
-/* 1.5px */
-/* 2px */
-/* 3px */
-/* 4px */
-/* 5px */
-/* 6px */
-/* 7px */
-/* 8px */
-/* 9px */
-/* 10px */
-/* 11px */
-/* 12px */
-/* 13px */
-/* 14px */
-/* 15px */
-/* 16px */
-
-
-
-
-
-
-
-
-
-
-
-
 /* Font Family */
 /* Font Sizes */
 /* Radius */

package/styles/avatar/fluent2.scss

@@ -1,3 +1,2 @@
-@use 'ej2-base/styles/definition/fluent2' as *;
 @use 'fluent2-definition' as *;
-@use 'all.fluent2' as *;
+@use 'all' as *;

package/styles/avatar/highcontrast-light.scss

@@ -1,3 +1,2 @@
-@use 'ej2-base/styles/definition/highcontrast-light' as *;
 @use 'highcontrast-light-definition' as *;
-@use 'all.highcontrast-light' as *;
+@use 'all' as *;

package/styles/avatar/highcontrast.scss

@@ -1,3 +1,2 @@
-@use 'ej2-base/styles/definition/highcontrast' as *;
 @use 'highcontrast-definition' as *;
-@use 'all.highcontrast' as *;
+@use 'all' as *;