@syncfusion/ej2-layouts 33.1.47 → 34.1.29

package/dist/es6/ej2-layouts.es2015.js

@@ -272,6 +272,7 @@ let Splitter = class Splitter extends Component {
         this.onMouseUpHandler = this.onMouseUp.bind(this);
         this.onTouchMoveHandler = this.onMouseMove.bind(this);
         this.onTouchEndHandler = this.onMouseUp.bind(this);
+        this.documentClickHandler = this.onDocumentClick.bind(this);
         this.wrapper = this.element.cloneNode(true);
         this.wrapperParent = this.element.parentElement;
         removeClass([this.wrapper], ['e-control', 'e-lib', ROOT]);
@@ -318,7 +319,7 @@ let Splitter = class Splitter extends Component {
         this.collapseFlag = true;
         this.isCollapsed();
         this.collapseFlag = false;
-        EventHandler.add(document, 'touchstart click', this.onDocumentClick, this);
+        EventHandler.add(document, 'touchstart click', this.documentClickHandler);
         this.renderComplete();
         this.element.ownerDocument.defaultView.addEventListener('resize', this.onReportWindowSize, true);
         EventHandler.add(this.element, 'keydown', this.onMove, this);
@@ -1222,14 +1223,12 @@ let Splitter = class Splitter extends Component {
         if (cCount > 0) {
             if (!expandPane.classList.contains(COLLAPSE_PANE)) {
                 addClass([expandPane], EXPAND_PANE);
-                expandPane.setAttribute('aria-expanded', 'true');
             }
         }
         else if (cCount === 0) {
             for (let 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');
                 }
             }
         }
@@ -1240,7 +1239,6 @@ let Splitter = class Splitter extends Component {
         this.updateFlexGrow();
         if (flexStatus) {
             this.previousPane.classList.remove(EXPAND_PANE);
-            this.previousPane.setAttribute('aria-expanded', 'false');
             this.previousPane.style.flexGrow = '';
         }
     }
@@ -1363,13 +1361,11 @@ let Splitter = class Splitter extends Component {
         const expandPane = isLeftOrUp ? this.nextPane : this.previousPane;
         const collapsePaneIndex = isLeftOrUp ? this.prevPaneIndex : this.nextPaneIndex;
         removeClass([collapsePane], EXPAND_PANE);
-        collapsePane.setAttribute('aria-expanded', 'false');
         addClass([collapsePane], collapseClass);
         collapsePane.setAttribute('aria-hidden', 'true');
         const isFlexPane = collapsePane.style.flexBasis === '';
         if (isFlexPane) {
             addClass([expandPane], EXPAND_PANE);
-            expandPane.setAttribute('aria-expanded', 'true');
         }
         else {
             let isFlexPaneHidden = true;
@@ -1378,7 +1374,6 @@ let Splitter = class Splitter extends Component {
                     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;
                     }
@@ -1386,7 +1381,6 @@ let Splitter = class Splitter extends Component {
             }
             if (isFlexPaneHidden) {
                 addClass([expandPane], EXPAND_PANE);
-                expandPane.setAttribute('aria-expanded', 'true');
             }
         }
         if (!this.collapseFlag) {
@@ -2200,7 +2194,8 @@ let Splitter = class Splitter extends Component {
     destroy() {
         if (!this.isDestroyed) {
             super.destroy();
-            EventHandler.remove(document, 'touchstart click', this.onDocumentClick);
+            EventHandler.remove(document, 'touchstart click', this.documentClickHandler);
+            this.documentClickHandler = null;
             EventHandler.remove(this.element, 'keydown', this.onMove);
             this.element.ownerDocument.defaultView.removeEventListener('resize', this.onReportWindowSize, true);
             while (this.element.attributes.length > 0) {
@@ -2777,20 +2772,64 @@ let DashboardLayout = class DashboardLayout extends Component {
     templateParser(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 {
+                        const 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)) {
+                        const sanitizedValue = SanitizeHtmlHelper.sanitize(template);
+                        return compile((this.enableHtmlSanitizer && typeof (template) === 'string') ? sanitizedValue : template);
+                    }
+                    return compile(template);
+                }
+                return compile(template);
             }
             catch (error) {
-                const 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 {
+                    const sanitizedValue = SanitizeHtmlHelper.sanitize(template);
+                    return compile((this.enableHtmlSanitizer && typeof (template) === 'string') ? sanitizedValue : template);
+                }
             }
         }
         return undefined;
     }
+    hasTemplateExpressions(template) {
+        return /\{\{[\s\S]*?\}\}/.test(template) || /\{\d+\}/.test(template);
+    }
+    createCspSafeTemplate(template) {
+        const sanitized = this.enableHtmlSanitizer ? SanitizeHtmlHelper.sanitize(template) : template;
+        return (dataContext) => {
+            const result = sanitized.replace(/\{\{:(\w+)\}\}/g, (match, prop) => {
+                return dataContext[prop] !== undefined ? String(dataContext[prop]) : match;
+            });
+            const wrapper = this.createElement('div');
+            wrapper.innerHTML = result;
+            return Array.from(wrapper.children);
+        };
+    }
+    isCSPError(error) {
+        if (error instanceof EvalError) {
+            return true;
+        }
+        const msg = error.message || '';
+        return msg.includes('Content Security Policy') ||
+            msg.includes('unsafe-eval') ||
+            msg.includes('refused to evaluate');
+    }
     renderTemplate(content, appendElement, type, isStringTemplate, prop) {
         const templateFn = this.templateParser(content);
         const templateElements = [];