@syncfusion/ej2-navigations 22.2.5 → 22.2.8-184993

package/dist/global/index.d.ts

@@ -1,12 +1,3 @@
-/*!
-*  filename: index.d.ts
-*  version : 22.2.5
-*  Copyright Syncfusion Inc. 2001 - 2020. 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
-*  licensing@syncfusion.com. Any infringement will be prosecuted under
-*  applicable laws. 
-*/
 import * as _navigations from '@syncfusion/ej2-navigations';
 
 export declare namespace ej {

package/package.json

@@ -1,166 +1,166 @@
 {
-  "_from": "@syncfusion/ej2-navigations@*",
-  "_id": "@syncfusion/ej2-navigations@22.1.39",
-  "_inBundle": false,
-  "_integrity": "sha512-K4OYPZQuHbKY4odT9j1dRVDIs0R25jo3xR/NTCKfwamdcJqWCnHIxEg3c6ELK7mIgn6C9fzHmXsns39xueDKew==",
-  "_location": "/@syncfusion/ej2-navigations",
-  "_phantomChildren": {},
-  "_requested": {
-    "type": "range",
-    "registry": true,
-    "raw": "@syncfusion/ej2-navigations@*",
-    "name": "@syncfusion/ej2-navigations",
-    "escapedName": "@syncfusion%2fej2-navigations",
-    "scope": "@syncfusion",
-    "rawSpec": "*",
-    "saveSpec": null,
-    "fetchSpec": "*"
-  },
-  "_requiredBy": [
-    "/",
-    "/@syncfusion/ej2",
-    "/@syncfusion/ej2-angular-navigations",
-    "/@syncfusion/ej2-charts",
-    "/@syncfusion/ej2-diagrams",
-    "/@syncfusion/ej2-documenteditor",
-    "/@syncfusion/ej2-dropdowns",
-    "/@syncfusion/ej2-filemanager",
-    "/@syncfusion/ej2-gantt",
-    "/@syncfusion/ej2-grids",
-    "/@syncfusion/ej2-image-editor",
-    "/@syncfusion/ej2-inplace-editor",
-    "/@syncfusion/ej2-kanban",
-    "/@syncfusion/ej2-pdfviewer",
-    "/@syncfusion/ej2-pivotview",
-    "/@syncfusion/ej2-react-navigations",
-    "/@syncfusion/ej2-ribbon",
-    "/@syncfusion/ej2-richtexteditor",
-    "/@syncfusion/ej2-schedule",
-    "/@syncfusion/ej2-spreadsheet",
-    "/@syncfusion/ej2-vue-navigations"
-  ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-navigations/-/ej2-navigations-22.1.39.tgz",
-  "_shasum": "a1bae66925958586e35fc5b8a9892a6e64072f88",
-  "_spec": "@syncfusion/ej2-navigations@*",
-  "_where": "/jenkins/workspace/elease-automation_release_21.1.1/packages/included",
-  "author": {
-    "name": "Syncfusion Inc."
-  },
-  "bugs": {
-    "url": "https://github.com/syncfusion/ej2-javascript-ui-controls/issues"
-  },
-  "bundleDependencies": false,
-  "dependencies": {
-    "@syncfusion/ej2-base": "~22.2.5",
-    "@syncfusion/ej2-buttons": "~22.2.5",
-    "@syncfusion/ej2-data": "~22.2.5",
-    "@syncfusion/ej2-inputs": "~22.2.5",
-    "@syncfusion/ej2-lists": "~22.2.5",
-    "@syncfusion/ej2-popups": "~22.2.5"
-  },
-  "deprecated": false,
-  "description": "A package of Essential JS 2 navigation components such as Tree-view, Tab, Toolbar, Context-menu, and Accordion which is used to navigate from one page to another",
-  "devDependencies": {},
-  "es2015": "./dist/es6/ej2-navigations.es5.js",
-  "homepage": "https://www.syncfusion.com/javascript-ui-controls",
-  "keywords": [
-    "ej2",
-    "syncfusion",
-    "web-components",
-    "javascript",
-    "typescript",
-    "model",
-    "toolbar",
-    "horizontal-scroll",
-    "ribbon",
-    "navbar",
-    "navigation-bar",
-    "toolbar-customization",
-    "scrollable-toolbar",
-    "toolbar-popup",
-    "multirow-toolbar",
-    "extended-toolbar",
-    "overflow",
-    "command-buttons",
-    "accordion",
-    "panelbar",
-    "ejTab",
-    "tab",
-    "tabStrip",
-    "scrollable-tab",
-    "popup-tab",
-    "multirow-tab",
-    "header-orientation",
-    "close-tab",
-    "tab-wizard",
-    "tab-with-menu",
-    "ejAccordion",
-    "accordion",
-    "accordion-wizard",
-    "multiple-open-panel-bar",
-    "multiple-open-accordion",
-    "panel-bar",
-    "collapsible-panel-bar",
-    "context-menu",
-    "context menu",
-    "contextmenu",
-    "ej2 contextmenu",
-    "treeview",
-    "tree",
-    "ej2-treeview",
-    "tree structure",
-    "hierarchical structure",
-    "tree navigation",
-    "treeview-checkbox",
-    "drag and drop",
-    "tree editing",
-    "load on demand",
-    "accordion tree",
-    "sidebar",
-    "dock size",
-    "showbackdrop",
-    "target",
-    "position",
-    "dock",
-    "gestures",
-    "sticky-sidebar",
-    "fixed",
-    "hamburger",
-    "sidenav",
-    "nav",
-    "hamburger-menu",
-    "side-menu",
-    "navigation-bar",
-    "sticky",
-    "drawer",
-    "slidebar",
-    "slide",
-    "slide-panel",
-    "multiple-sidebar",
-    "slide-navigation",
-    "navigation-drawer",
-    "breadcrumb",
-    "breadcrumb navigation",
-    "breadcrumb trail",
-    "ej2 breadcrumb",
-    "navigation links",
-    "navigational aid",
-    "previous page navigation",
-    "current page hierarchy",
-    "current page location",
-    "path of url",
-    "trace page location",
-    "list of breadcrumb links"
-  ],
-  "license": "SEE LICENSE IN license",
-  "main": "./dist/ej2-navigations.umd.min.js",
-  "module": "./index.js",
-  "name": "@syncfusion/ej2-navigations",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
-  },
-  "typings": "index.d.ts",
-  "version": "22.2.5",
-  "sideEffects": false
-}
+	"_from": "@syncfusion/ej2-navigations@*",
+	"_id": "@syncfusion/ej2-navigations@22.2.7",
+	"_inBundle": false,
+	"_integrity": "sha512-7Uz9JOqY5jJxwhyzEm/75NlZPwU2FSgHGayMBKK7HD/fi4Xs7JZUrC51E6un9JZk8/QGRgqVtf5zSgLbBHAYHA==",
+	"_location": "/@syncfusion/ej2-navigations",
+	"_phantomChildren": {},
+	"_requested": {
+	  "type": "range",
+	  "registry": true,
+	  "raw": "@syncfusion/ej2-navigations@*",
+	  "name": "@syncfusion/ej2-navigations",
+	  "escapedName": "@syncfusion%2fej2-navigations",
+	  "scope": "@syncfusion",
+	  "rawSpec": "*",
+	  "saveSpec": null,
+	  "fetchSpec": "*"
+	},
+	"_requiredBy": [
+	  "/",
+	  "/@syncfusion/ej2",
+	  "/@syncfusion/ej2-angular-navigations",
+	  "/@syncfusion/ej2-charts",
+	  "/@syncfusion/ej2-diagrams",
+	  "/@syncfusion/ej2-documenteditor",
+	  "/@syncfusion/ej2-dropdowns",
+	  "/@syncfusion/ej2-filemanager",
+	  "/@syncfusion/ej2-gantt",
+	  "/@syncfusion/ej2-grids",
+	  "/@syncfusion/ej2-image-editor",
+	  "/@syncfusion/ej2-inplace-editor",
+	  "/@syncfusion/ej2-kanban",
+	  "/@syncfusion/ej2-pdfviewer",
+	  "/@syncfusion/ej2-pivotview",
+	  "/@syncfusion/ej2-react-navigations",
+	  "/@syncfusion/ej2-ribbon",
+	  "/@syncfusion/ej2-richtexteditor",
+	  "/@syncfusion/ej2-schedule",
+	  "/@syncfusion/ej2-spreadsheet",
+	  "/@syncfusion/ej2-vue-navigations"
+	],
+	"_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-navigations/-/ej2-navigations-22.2.7.tgz",
+	"_shasum": "5fcaed69c7a93538c2bb9312dde3fe7375060919",
+	"_spec": "@syncfusion/ej2-navigations@*",
+	"_where": "/jenkins/workspace/elease-automation_release_21.1.1/packages/included",
+	"author": {
+	  "name": "Syncfusion Inc."
+	},
+	"bugs": {
+	  "url": "https://github.com/syncfusion/ej2-javascript-ui-controls/issues"
+	},
+	"bundleDependencies": false,
+	"dependencies": {
+	  "@syncfusion/ej2-base": "~22.2.5",
+	  "@syncfusion/ej2-buttons": "~22.2.8",
+	  "@syncfusion/ej2-data": "~22.2.5",
+	  "@syncfusion/ej2-inputs": "~22.2.7",
+	  "@syncfusion/ej2-lists": "~22.2.8",
+	  "@syncfusion/ej2-popups": "~22.2.7"
+	},
+	"deprecated": false,
+	"description": "A package of Essential JS 2 navigation components such as Tree-view, Tab, Toolbar, Context-menu, and Accordion which is used to navigate from one page to another",
+	"devDependencies": {},
+	"es2015": "./dist/es6/ej2-navigations.es5.js",
+	"homepage": "https://www.syncfusion.com/javascript-ui-controls",
+	"keywords": [
+	  "ej2",
+	  "syncfusion",
+	  "web-components",
+	  "javascript",
+	  "typescript",
+	  "model",
+	  "toolbar",
+	  "horizontal-scroll",
+	  "ribbon",
+	  "navbar",
+	  "navigation-bar",
+	  "toolbar-customization",
+	  "scrollable-toolbar",
+	  "toolbar-popup",
+	  "multirow-toolbar",
+	  "extended-toolbar",
+	  "overflow",
+	  "command-buttons",
+	  "accordion",
+	  "panelbar",
+	  "ejTab",
+	  "tab",
+	  "tabStrip",
+	  "scrollable-tab",
+	  "popup-tab",
+	  "multirow-tab",
+	  "header-orientation",
+	  "close-tab",
+	  "tab-wizard",
+	  "tab-with-menu",
+	  "ejAccordion",
+	  "accordion",
+	  "accordion-wizard",
+	  "multiple-open-panel-bar",
+	  "multiple-open-accordion",
+	  "panel-bar",
+	  "collapsible-panel-bar",
+	  "context-menu",
+	  "context menu",
+	  "contextmenu",
+	  "ej2 contextmenu",
+	  "treeview",
+	  "tree",
+	  "ej2-treeview",
+	  "tree structure",
+	  "hierarchical structure",
+	  "tree navigation",
+	  "treeview-checkbox",
+	  "drag and drop",
+	  "tree editing",
+	  "load on demand",
+	  "accordion tree",
+	  "sidebar",
+	  "dock size",
+	  "showbackdrop",
+	  "target",
+	  "position",
+	  "dock",
+	  "gestures",
+	  "sticky-sidebar",
+	  "fixed",
+	  "hamburger",
+	  "sidenav",
+	  "nav",
+	  "hamburger-menu",
+	  "side-menu",
+	  "navigation-bar",
+	  "sticky",
+	  "drawer",
+	  "slidebar",
+	  "slide",
+	  "slide-panel",
+	  "multiple-sidebar",
+	  "slide-navigation",
+	  "navigation-drawer",
+	  "breadcrumb",
+	  "breadcrumb navigation",
+	  "breadcrumb trail",
+	  "ej2 breadcrumb",
+	  "navigation links",
+	  "navigational aid",
+	  "previous page navigation",
+	  "current page hierarchy",
+	  "current page location",
+	  "path of url",
+	  "trace page location",
+	  "list of breadcrumb links"
+	],
+	"license": "SEE LICENSE IN license",
+	"main": "./dist/ej2-navigations.umd.min.js",
+	"module": "./index.js",
+	"name": "@syncfusion/ej2-navigations",
+	"repository": {
+	  "type": "git",
+	  "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
+	},
+	"typings": "index.d.ts",
+	"version": "22.2.8-184993",
+	"sideEffects": false
+  }

package/src/accordion/accordion-model.d.ts

@@ -1,4 +1,4 @@
-import { Component, EventHandler, Property, Event, EmitType, AnimationModel, KeyboardEvents, rippleEffect } from '@syncfusion/ej2-base';import { KeyboardEventArgs, BaseEventArgs, Effect, getUniqueID, compile as templateCompiler } from '@syncfusion/ej2-base';import { isVisible, closest, attributes, detach, select, addClass, removeClass, append } from '@syncfusion/ej2-base';import { INotifyPropertyChanged, NotifyPropertyChanges, ChildProperty, Collection, Animation } from '@syncfusion/ej2-base';import { setStyleAttribute as setStyle, Complex } from '@syncfusion/ej2-base';import { isNullOrUndefined as isNOU, formatUnit, selectAll, SanitizeHtmlHelper, isRippleEnabled } from '@syncfusion/ej2-base';
+import { Component, EventHandler, Property, Event, EmitType, AnimationModel, KeyboardEvents, rippleEffect, animationMode } from '@syncfusion/ej2-base';import { KeyboardEventArgs, BaseEventArgs, Effect, getUniqueID, compile as templateCompiler } from '@syncfusion/ej2-base';import { isVisible, closest, attributes, detach, select, addClass, removeClass, append } from '@syncfusion/ej2-base';import { INotifyPropertyChanged, NotifyPropertyChanges, ChildProperty, Collection, Animation } from '@syncfusion/ej2-base';import { setStyleAttribute as setStyle, Complex } from '@syncfusion/ej2-base';import { isNullOrUndefined as isNOU, formatUnit, selectAll, SanitizeHtmlHelper, isRippleEnabled } from '@syncfusion/ej2-base';
 import {ExpandMode,AccordionClickArgs,ExpandEventArgs,ExpandedEventArgs} from "./accordion";
 import {ComponentModel} from '@syncfusion/ej2-base';
 

package/src/accordion/accordion.d.ts

@@ -197,6 +197,8 @@ export declare class Accordion extends Component<HTMLElement> implements INotify
     private isDestroy;
     private templateEle;
     private isAngular;
+    private isReact;
+    private isVue;
     private headerTemplateFn;
     private itemTemplateFn;
     private removeRippleEffect;
@@ -340,7 +342,7 @@ export declare class Accordion extends Component<HTMLElement> implements INotify
     private initialize;
     private renderControl;
     private wireFocusEvents;
-    private unwireEvents;
+    private unWireEvents;
     private wireEvents;
     private templateParser;
     private initializeHeaderTemplate;
@@ -437,7 +439,6 @@ export declare class Accordion extends Component<HTMLElement> implements INotify
     private restoreContent;
     private updateItem;
     private setTemplate;
-    private templateCompile;
     private clearAccordionTemplate;
     protected getPersistData(): string;
     /**

package/src/accordion/accordion.js

@@ -18,7 +18,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { Component, EventHandler, Property, Event, KeyboardEvents, rippleEffect } from '@syncfusion/ej2-base';
+import { Component, EventHandler, Property, Event, KeyboardEvents, rippleEffect, animationMode } from '@syncfusion/ej2-base';
 import { getUniqueID, compile as templateCompiler } from '@syncfusion/ej2-base';
 import { isVisible, closest, attributes, detach, select, addClass, removeClass, append } from '@syncfusion/ej2-base';
 import { NotifyPropertyChanges, ChildProperty, Collection, Animation } from '@syncfusion/ej2-base';
@@ -164,7 +164,7 @@ var Accordion = /** @class */ (function (_super) {
         }
         var ele = this.element;
         _super.prototype.destroy.call(this);
-        this.unwireEvents();
+        this.unWireEvents();
         this.isDestroy = true;
         this.restoreContent(null);
         [].slice.call(ele.children).forEach(function (el) {
@@ -252,7 +252,7 @@ var Accordion = /** @class */ (function (_super) {
             }
         }
     };
-    Accordion.prototype.unwireEvents = function () {
+    Accordion.prototype.unWireEvents = function () {
         EventHandler.remove(this.element, 'click', this.clickHandler);
         if (!isNOU(this.keyModule)) {
             this.keyModule.destroy();
@@ -571,7 +571,7 @@ var Accordion = /** @class */ (function (_super) {
             var ctnEle = this.headerEleGenerate();
             var hdrEle = this.createElement('div', { className: CLS_HEADERCTN });
             ctnEle.appendChild(hdrEle);
-            ctnEle.appendChild(this.fetchElement(hdrEle, item.header, index, true));
+            ctnEle.appendChild(this.fetchElement(hdrEle, item.header, index));
             innerEle.appendChild(ctnEle);
         }
         var hdr = select('.' + CLS_HEADER, innerEle);
@@ -633,8 +633,7 @@ var Accordion = /** @class */ (function (_super) {
             return true;
         }
     };
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    Accordion.prototype.fetchElement = function (ele, value, index, isHeader) {
+    Accordion.prototype.fetchElement = function (ele, value, index) {
         var templateFn;
         var temString;
         try {
@@ -652,9 +651,11 @@ var Accordion = /** @class */ (function (_super) {
             if (typeof (value) === 'string') {
                 ele.innerHTML = SanitizeHtmlHelper.sanitize(value);
             }
-            else if (!isNOU(this.trgtEle) && (value instanceof (HTMLElement))) {
+            else if (value instanceof (HTMLElement)) {
                 ele.appendChild(value);
-                ele.firstElementChild.style.display = '';
+                if (this.trgtEle) {
+                    ele.firstElementChild.style.display = '';
+                }
             }
             else {
                 templateFn = templateCompiler(value);
@@ -718,7 +719,7 @@ var Accordion = /** @class */ (function (_super) {
                 this.items[parseInt(index.toString(), 10)].content =
                     SanitizeHtmlHelper.sanitize(this.items[parseInt(index.toString(), 10)].content);
             }
-            itemcnt.appendChild(this.fetchElement(ctn, this.items[parseInt(index.toString(), 10)].content, index, false));
+            itemcnt.appendChild(this.fetchElement(ctn, this.items[parseInt(index.toString(), 10)].content, index));
         }
         return itemcnt;
     };
@@ -752,7 +753,7 @@ var Accordion = /** @class */ (function (_super) {
                     expandState.classList.remove(CLS_EXPANDSTATE);
                 }
                 trgtItemEle.classList.add(CLS_EXPANDSTATE);
-                if ((animation.name === 'None')) {
+                if ((animation.name === 'None' && animationMode !== 'Enable') || (animationMode === 'Disable')) {
                     _this.expandProgress('begin', icon, trgt, trgtItemEle, expandArgs);
                     _this.expandProgress('end', icon, trgt, trgtItemEle, expandArgs);
                 }
@@ -764,6 +765,10 @@ var Accordion = /** @class */ (function (_super) {
     };
     Accordion.prototype.expandAnimation = function (ef, icn, trgt, trgtItemEle, animate, args) {
         var _this = this;
+        if (ef === 'None' && animationMode === 'Enable') {
+            ef = 'SlideDown';
+            animate.name = 'SlideDown';
+        }
         var height;
         this.lastActiveItemId = trgtItemEle.id;
         if (ef === 'SlideDown') {
@@ -858,7 +863,7 @@ var Accordion = /** @class */ (function (_super) {
                 _this.expandedItemsPop(trgtItemEle);
                 trgtItemEle.classList.remove(CLS_EXPANDSTATE);
                 icon.classList.add(CLS_TOGANIMATE);
-                if ((animation.name === 'None')) {
+                if ((animation.name === 'None' && animationMode !== 'Enable') || (animationMode === 'Disable')) {
                     _this.collapseProgress('begin', icon, trgt, trgtItemEle, expandArgs);
                     _this.collapseProgress('end', icon, trgt, trgtItemEle, expandArgs);
                 }
@@ -870,6 +875,10 @@ var Accordion = /** @class */ (function (_super) {
     };
     Accordion.prototype.collapseAnimation = function (ef, trgt, trgtItEl, icn, animate, args) {
         var _this = this;
+        if (ef === 'None' && animationMode === 'Enable') {
+            ef = 'SlideUp';
+            animate.name = 'SlideUp';
+        }
         var height;
         var trgtHeight;
         var itemHeight;
@@ -970,7 +979,7 @@ var Accordion = /** @class */ (function (_super) {
                 EventHandler.add(innerItemEle.querySelector('.' + CLS_HEADER), 'focus', _this.focusIn, _this);
                 EventHandler.add(innerItemEle.querySelector('.' + CLS_HEADER), 'blur', _this.focusOut, _this);
                 _this.expandedIndices = [];
-                _this.expandedItemRefresh(ele);
+                _this.expandedItemRefresh();
                 if (addItem && addItem.expanded) {
                     _this.expandItem(true, itemIndex);
                 }
@@ -980,8 +989,7 @@ var Accordion = /** @class */ (function (_super) {
             this.renderReactTemplates();
         }
     };
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    Accordion.prototype.expandedItemRefresh = function (ele) {
+    Accordion.prototype.expandedItemRefresh = function () {
         var _this = this;
         var itemEle = this.getItemElements();
         [].slice.call(itemEle).forEach(function (el) {
@@ -997,8 +1005,12 @@ var Accordion = /** @class */ (function (_super) {
      * @returns {void}.
      */
     Accordion.prototype.removeItem = function (index) {
-        if (this.isReact) {
-            this.clearTemplate(['headerTemplate', 'itemTemplate'], index);
+        if (this.isReact || this.isAngular) {
+            var item = selectAll('.' + CLS_ITEM, this.element)[parseInt(index.toString(), 10)];
+            var header = select('.' + CLS_HEADERCTN, item);
+            var content = select('.' + CLS_CTENT, item);
+            this.clearAccordionTemplate(header, this.dataSource.length > 0 ? 'headerTemplate' : 'header', CLS_HEADERCTN);
+            this.clearAccordionTemplate(content, this.dataSource.length > 0 ? 'itemTemplate' : 'content', CLS_CTENT);
         }
         var itemEle = this.getItemElements();
         var ele = itemEle[parseInt(index.toString(), 10)];
@@ -1010,7 +1022,7 @@ var Accordion = /** @class */ (function (_super) {
         detach(ele);
         items.splice(index, 1);
         this.expandedIndices = [];
-        this.expandedItemRefresh(this.element);
+        this.expandedItemRefresh();
     };
     /**
      * Sets focus to the specified index item header in Accordion.
@@ -1187,28 +1199,18 @@ var Accordion = /** @class */ (function (_super) {
         }
     };
     Accordion.prototype.setTemplate = function (template, toElement, index) {
-        toElement.innerHTML = '';
-        this.templateCompile(toElement, template, index);
+        this.fetchElement(toElement, template, index);
         if (this.isReact) {
             this.renderReactTemplates();
         }
     };
-    Accordion.prototype.templateCompile = function (ele, cnt, index) {
-        var tempEle = this.createElement('div');
-        this.fetchElement(tempEle, cnt, index, false);
-        if (tempEle.childNodes.length !== 0) {
-            [].slice.call(tempEle.childNodes).forEach(function (childEle) {
-                ele.appendChild(childEle);
-            });
-        }
-    };
     Accordion.prototype.clearAccordionTemplate = function (templateEle, templateName, className) {
         if (this.registeredTemplate && this.registeredTemplate["" + templateName]) {
             var registeredTemplates = this.registeredTemplate;
             for (var index = 0; index < registeredTemplates["" + templateName].length; index++) {
                 var registeredItem = registeredTemplates["" + templateName][parseInt(index.toString(), 10)].rootNodes[0];
-                var closestItem = closest(registeredItem.containerInfo, '.' + className);
-                if (!isNOU(closestItem) && closestItem === templateEle) {
+                var closestItem = closest(registeredItem, '.' + className);
+                if (!isNOU(closestItem) && closestItem === templateEle || isNOU(registeredItem.parentNode)) {
                     this.clearTemplate([templateName], [registeredTemplates["" + templateName][parseInt(index.toString(), 10)]]);
                     break;
                 }
@@ -1278,7 +1280,8 @@ var Accordion = /** @class */ (function (_super) {
                                 if (property[parseInt(k.toString(), 10)] === 'disabled' && !isNOU(item)) {
                                     this.enableItem(index, !newVal);
                                 }
-                                if (property[parseInt(k.toString(), 10)] === 'content' && !isNOU(item) && item.children.length === 2) {
+                                if (property.indexOf('header') < 0 && property[parseInt(k.toString(), 10)] === 'content'
+                                    && !isNOU(item) && item.children.length === 2) {
                                     if (typeof newVal === 'function') {
                                         if (this.isAngular || this.isReact) {
                                             this.clearAccordionTemplate(content, property[parseInt(k.toString(), 10)], CLS_CTENT);

package/src/appbar/appbar.js

@@ -67,6 +67,7 @@ var AppBar = /** @class */ (function (_super) {
         // pre render code
     };
     AppBar.prototype.render = function () {
+        this.element.classList.add(CLS_APPBAR);
         if (this.element.tagName !== 'HEADER') {
             this.element.setAttribute('role', 'header');
         }

package/src/breadcrumb/breadcrumb-model.d.ts

@@ -1,4 +1,4 @@
-import { Component, NotifyPropertyChanges, INotifyPropertyChanged, ChildProperty, Property, Collection, append, extend, Event, EmitType, BaseEventArgs, EventHandler, closest, addClass, removeClass, detach, remove } from '@syncfusion/ej2-base';import { ListBase, ListBaseOptions } from '@syncfusion/ej2-lists';import { Popup } from '@syncfusion/ej2-popups';
+import { Component, NotifyPropertyChanges, INotifyPropertyChanged, ChildProperty, Property, Collection, append, extend, Event, EmitType, BaseEventArgs, EventHandler, closest, addClass, removeClass, detach, remove, initializeCSPTemplate, isNullOrUndefined } from '@syncfusion/ej2-base';import { ListBase, ListBaseOptions } from '@syncfusion/ej2-lists';import { Popup } from '@syncfusion/ej2-popups';
 import {BreadcrumbOverflowMode,BreadcrumbBeforeItemRenderEventArgs,BreadcrumbClickEventArgs} from "./breadcrumb";
 import {ComponentModel} from '@syncfusion/ej2-base';
 

package/src/breadcrumb/breadcrumb.js

@@ -17,7 +17,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { Component, NotifyPropertyChanges, ChildProperty, Property, Collection, append, extend, Event, EventHandler, closest, addClass, removeClass, detach, remove } from '@syncfusion/ej2-base';
+import { Component, NotifyPropertyChanges, ChildProperty, Property, Collection, append, extend, Event, EventHandler, closest, addClass, removeClass, detach, remove, initializeCSPTemplate, isNullOrUndefined } from '@syncfusion/ej2-base';
 import { ListBase } from '@syncfusion/ej2-lists';
 import { Popup } from '@syncfusion/ej2-popups';
 var ICONRIGHT = 'e-icon-right';
@@ -293,7 +293,14 @@ var Breadcrumb = /** @class */ (function (_super) {
                 if (i % 2) {
                     // separator item
                     wrapDiv = this.createElement('div', { className: 'e-breadcrumb-item-wrapper' });
-                    listBaseOptions.template = this.separatorTemplate ? this.separatorTemplate : '/';
+                    if ((this.separatorTemplate && this.separatorTemplate === '/') || isNullOrUndefined(this.separatorTemplate)) {
+                        listBaseOptions.template = initializeCSPTemplate(function () {
+                            return '/';
+                        });
+                    }
+                    else {
+                        listBaseOptions.template = this.separatorTemplate;
+                    }
                     listBaseOptions.itemClass = 'e-breadcrumb-separator';
                     isSingleLevel = false;
                     item = [{ previousItem: items[j_1], nextItem: items[j_1 + 1] }];
@@ -302,6 +309,7 @@ var Breadcrumb = /** @class */ (function (_super) {
                     // list item
                     listBaseOptions.itemClass = '';
                     if (this.itemTemplate) {
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         listBaseOptions.template = this.itemTemplate;
                         isSingleLevel = false;
                     }

package/src/carousel/carousel.d.ts

@@ -376,6 +376,7 @@ export declare class Carousel extends Component<HTMLElement> implements INotifyP
     private swipStop;
     private swipeNavigation;
     private swipeModehandlers;
+    private resizeHandler;
     private wireEvents;
     private unWireEvents;
     /**