@syncfusion/ej2-navigations 22.2.5 → 22.2.8-184993

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

@@ -1,4 +1,4 @@
-import { Animation, Browser, ChildProperty, Collection, Complex, Component, Draggable, Droppable, Event, EventHandler, KeyboardEvents, L10n, NotifyPropertyChanges, Property, SanitizeHtmlHelper, Touch, addClass, append, attributes, classList, closest, compile, createElement, detach, extend, formatUnit, getElement, getInstance, getRandomId, getUniqueID, getValue, isBlazor, isNullOrUndefined, isRippleEnabled, isUndefined, isVisible, matches, merge, remove, removeClass, rippleEffect, select, selectAll, setStyleAttribute, setValue } from '@syncfusion/ej2-base';
+import { Animation, Browser, ChildProperty, Collection, Complex, Component, Draggable, Droppable, Event, EventHandler, KeyboardEvents, L10n, NotifyPropertyChanges, Property, SanitizeHtmlHelper, Touch, addClass, animationMode, append, attributes, classList, closest, compile, createElement, detach, extend, formatUnit, getElement, getInstance, getRandomId, getUniqueID, getValue, initializeCSPTemplate, isBlazor, isNullOrUndefined, isRippleEnabled, isUndefined, isVisible, matches, merge, remove, removeClass, rippleEffect, select, selectAll, setStyleAttribute, setValue } from '@syncfusion/ej2-base';
 import { ListBase } from '@syncfusion/ej2-lists';
 import { Popup, calculatePosition, createSpinner, fit, getScrollableParent, getZindexPartial, hideSpinner, isCollide, showSpinner } from '@syncfusion/ej2-popups';
 import { Button, createCheckBox, rippleMouseHandler } from '@syncfusion/ej2-buttons';
@@ -1284,9 +1284,9 @@ let MenuBase = class MenuBase extends Component {
             }
             this.targetElement = target;
             if (!this.isMenu) {
-                EventHandler.add(this.targetElement, 'scroll', this.scrollHandler, this);
+                EventHandler.add(this.targetElement, 'mousewheel DOMMouseScroll', this.scrollHandler, this);
                 for (const parent of getScrollableParent(this.targetElement)) {
-                    EventHandler.add(parent, 'scroll', this.scrollHandler, this);
+                    EventHandler.add(parent, 'mousewheel DOMMouseScroll', this.scrollHandler, this);
                 }
             }
         }
@@ -1462,7 +1462,7 @@ let MenuBase = class MenuBase extends Component {
             const popups = [];
             const allPopup = selectAll('.' + POPUP);
             allPopup.forEach((elem) => {
-                if (this.element.id === elem.id.split('-')[2] || elem.id.split('-')[2] + "-" + elem.id.split('-')[3]) {
+                if (this.element.id === elem.id.split('-')[2] || elem.id.split('-')[2] + '-' + elem.id.split('-')[3]) {
                     popups.push(elem);
                 }
             });
@@ -1626,7 +1626,7 @@ let MenuBase = class MenuBase extends Component {
                         this.afterCloseMenu(e);
                     }
                     else if (isOpen && !this.hamburgerMode && closedLi && !trgtLi && this.keyType !== 'left' && (this.navIdx.length || !this.isMenu && this.navIdx.length === 0)) {
-                        let ele = (e && e.target.classList.contains('e-vscroll'))
+                        let ele = (e && (e.target.classList.contains('e-vscroll') || e.target.classList.contains('e-scroll-nav')))
                             ? closest(e.target, '.e-menu-wrapper') : null;
                         if (ele) {
                             ele = ele.querySelector('.e-menu-item');
@@ -1635,7 +1635,9 @@ let MenuBase = class MenuBase extends Component {
                             }
                         }
                         else {
-                            this.closeMenu(this.navIdx[this.navIdx.length - 1], e);
+                            if (!(e && e.target.classList.contains('e-nav-arrow'))) {
+                                this.closeMenu(this.navIdx[this.navIdx.length - 1], e);
+                            }
                         }
                     }
                     else if (isOpen && !isIterated && !ulIndex && ((this.hamburgerMode && this.navIdx.length) ||
@@ -1821,9 +1823,9 @@ let MenuBase = class MenuBase extends Component {
             if (isNullOrUndefined(e)) {
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 const ev = document.createEvent('MouseEvents');
-                ev.initEvent("click", true, false);
+                ev.initEvent('click', true, false);
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                let targetEvent = this.copyObject(ev, {});
+                const targetEvent = this.copyObject(ev, {});
                 targetEvent.target = targetEvent.srcElement = target;
                 targetEvent.currentTarget = target;
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -1834,6 +1836,7 @@ let MenuBase = class MenuBase extends Component {
             }
         }
     }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     copyObject(source, destination) {
         for (const prop in source) {
             destination[`${prop}`] = source[`${prop}`];
@@ -2391,6 +2394,9 @@ let MenuBase = class MenuBase extends Component {
                     if (!cli.classList.contains(SEPARATOR)) {
                         this.showSubMenu = true;
                         const cul = cli.parentNode;
+                        if (isNullOrUndefined(cul)) {
+                            return;
+                        }
                         this.cliIdx = this.getIdx(cul, cli);
                         if (this.isMenu || !Browser.isDevice) {
                             const culIdx = this.isMenu ? Array.prototype.indexOf.call([wrapper].concat(this.getPopups()), closest(cul, '.' + 'e-' + this.getModuleName() + '-wrapper'))
@@ -2451,6 +2457,9 @@ let MenuBase = class MenuBase extends Component {
         }
     }
     afterCloseMenu(e) {
+        if (isNullOrUndefined(e)) {
+            return;
+        }
         let isHeader;
         if (this.showSubMenu) {
             if (this.showItemOnClick && this.navIdx.length === 0) {
@@ -2621,7 +2630,12 @@ let MenuBase = class MenuBase extends Component {
                     }
                     break;
                 case 'enableRtl':
-                    wrapper.classList.toggle(RTL);
+                    if (this.enableRtl) {
+                        wrapper.classList.add(RTL);
+                    }
+                    else {
+                        wrapper.classList.remove(RTL);
+                    }
                     break;
                 case 'showItemOnClick':
                     this.unWireEvents();
@@ -2780,9 +2794,9 @@ let MenuBase = class MenuBase extends Component {
                 }
             }
             if (!this.isMenu) {
-                EventHandler.remove(this.targetElement, 'scroll', this.scrollHandler);
+                EventHandler.remove(this.targetElement, 'mousewheel DOMMouseScroll', this.scrollHandler);
                 for (const parent of getScrollableParent(this.targetElement)) {
-                    EventHandler.remove(parent, 'scroll', this.scrollHandler);
+                    EventHandler.remove(parent, 'mousewheel DOMMouseScroll', this.scrollHandler);
                 }
             }
         }
@@ -3047,11 +3061,11 @@ let MenuBase = class MenuBase extends Component {
             index = navIdx.pop();
             ul = this.getUlByNavIdx(navIdx.length);
             if (ul) {
-                let validUl = isUniqueId ? ul.children[index].id : ul.children[index].textContent;
+                const validUl = isUniqueId ? ul.children[index].id : ul.children[index].textContent;
                 if (ishide && validUl === items[i]) {
                     ul.children[index].classList.add(HIDE);
                 }
-                else {
+                else if (!ishide && validUl === items[i]) {
                     ul.children[index].classList.remove(HIDE);
                 }
             }
@@ -3921,6 +3935,11 @@ let Toolbar = class Toolbar extends Component {
         this.renderControl();
         this.wireEvents();
         this.renderComplete();
+        if (this.isReact && this.portals && this.portals.length > 0) {
+            this.renderReactTemplates(() => {
+                this.refreshOverflow();
+            });
+        }
     }
     initialize() {
         const width = formatUnit(this.width);
@@ -5035,7 +5054,7 @@ let Toolbar = class Toolbar extends Component {
                 this.tbarAlgEle[(this.items[parseInt(eleIdx.toString(), 10)].align + 's').toLowerCase()].splice(parseInt(indexAgn.toString(), 10), 1);
             }
             if (this.isReact) {
-                this.clearTemplate();
+                this.clearToolbarTemplate(innerItems[parseInt(index.toString(), 10)]);
             }
             const btnItem = innerItems[parseInt(index.toString(), 10)].querySelector('.e-control.e-btn');
             if (!isNullOrUndefined(btnItem) && !isNullOrUndefined(btnItem.ej2_instances[0]) && !(btnItem.ej2_instances[0].isDestroyed)) {
@@ -5084,7 +5103,7 @@ let Toolbar = class Toolbar extends Component {
             let tempArray;
             if (!isNullOrUndefined(templateFn)) {
                 const toolbarTemplateID = this.element.id + index + '_template';
-                tempArray = templateFn({}, this, 'template', toolbarTemplateID, this.isStringTemplate);
+                tempArray = templateFn({}, this, 'template', toolbarTemplateID, this.isStringTemplate, undefined, undefined, this.root);
             }
             if (!isNullOrUndefined(tempArray) && tempArray.length > 0) {
                 [].slice.call(tempArray).forEach((ele) => {
@@ -5152,7 +5171,8 @@ let Toolbar = class Toolbar extends Component {
         let dom;
         const innerEle = this.createElement('div', { className: CLS_ITEM });
         const tempDom = this.createElement('div', {
-            innerHTML: this.enableHtmlSanitizer ? SanitizeHtmlHelper.sanitize(item.tooltipText) : item.tooltipText
+            innerHTML: this.enableHtmlSanitizer && !isNullOrUndefined(item.tooltipText) ?
+                SanitizeHtmlHelper.sanitize(item.tooltipText) : item.tooltipText
         });
         if (!this.tbarEle) {
             this.tbarEle = [];
@@ -5230,7 +5250,12 @@ let Toolbar = class Toolbar extends Component {
     }
     activeEleRemove(curEle) {
         if (!isNullOrUndefined(this.activeEle)) {
-            this.activeEle.setAttribute('tabindex', this.getDataTabindex(this.activeEle));
+            if (!curEle.parentElement.classList.contains(CLS_TEMPLATE)) {
+                this.activeEle.setAttribute('tabindex', this.getDataTabindex(this.activeEle));
+            }
+            else {
+                this.activeEle.removeAttribute('tabindex');
+            }
         }
         this.activeEle = curEle;
         if (this.getDataTabindex(this.activeEle) === '-1') {
@@ -5347,6 +5372,30 @@ let Toolbar = class Toolbar extends Component {
             nextEle = innerItems[++eleIndex];
         }
     }
+    clearToolbarTemplate(templateEle) {
+        if (this.registeredTemplate && this.registeredTemplate[`${'template'}`]) {
+            const registeredTemplates = this.registeredTemplate;
+            for (let index = 0; index < registeredTemplates[`${'template'}`].length; index++) {
+                const registeredItem = registeredTemplates[`${'template'}`][parseInt(index.toString(), 10)].rootNodes[0];
+                const closestItem = closest(registeredItem, '.' + CLS_ITEM);
+                if (!isNullOrUndefined(closestItem) && closestItem === templateEle) {
+                    this.clearTemplate(['template'], [registeredTemplates[`${'template'}`][parseInt(index.toString(), 10)]]);
+                    break;
+                }
+            }
+        }
+        else if (this.portals && this.portals.length > 0) {
+            const portals = this.portals;
+            for (let index = 0; index < portals.length; index++) {
+                const portalItem = portals[parseInt(index.toString(), 10)];
+                const closestItem = closest(portalItem.containerInfo, '.' + CLS_ITEM);
+                if (!isNullOrUndefined(closestItem) && closestItem === templateEle) {
+                    this.clearTemplate(['template'], index);
+                    break;
+                }
+            }
+        }
+    }
     /**
      * Gets called when the model property changes.The data that describes the old and new values of the property that changed.
      *
@@ -5368,31 +5417,29 @@ let Toolbar = class Toolbar extends Component {
                             const index = parseInt(Object.keys(newProp.items)[parseInt(i.toString(), 10)], 10);
                             const property = Object.keys(newProp.items[parseInt(index.toString(), 10)])[0];
                             const newProperty = Object(newProp.items[parseInt(index.toString(), 10)])[`${property}`];
-                            if (typeof newProperty !== 'function') {
-                                if (this.tbarAlign || property === 'align') {
-                                    this.refresh();
-                                    this.trigger('created');
-                                    break;
-                                }
-                                const popupPriCheck = property === 'showAlwaysInPopup' && !newProperty;
-                                const booleanCheck = property === 'overflow' && this.popupPriCount !== 0;
-                                if ((popupPriCheck) || (this.items[parseInt(index.toString(), 10)].showAlwaysInPopup) && booleanCheck) {
-                                    --this.popupPriCount;
-                                }
-                                if (isNullOrUndefined(this.scrollModule)) {
-                                    this.destroyMode();
-                                }
-                                const itemCol = [].slice.call(selectAll('.' + CLS_ITEMS + ' .' + CLS_ITEM, tEle));
-                                if (this.isReact && this.items[parseInt(index.toString(), 10)].template) {
-                                    this.clearTemplate();
-                                }
-                                detach(itemCol[parseInt(index.toString(), 10)]);
-                                this.tbarEle.splice(index, 1);
-                                this.addItems([this.items[parseInt(index.toString(), 10)]], index);
-                                this.items.splice(index, 1);
-                                if (this.items[parseInt(index.toString(), 10)].template) {
-                                    this.tbarEle.splice(this.items.length, 1);
-                                }
+                            if (this.tbarAlign || property === 'align') {
+                                this.refresh();
+                                this.trigger('created');
+                                break;
+                            }
+                            const popupPriCheck = property === 'showAlwaysInPopup' && !newProperty;
+                            const booleanCheck = property === 'overflow' && this.popupPriCount !== 0;
+                            if ((popupPriCheck) || (this.items[parseInt(index.toString(), 10)].showAlwaysInPopup) && booleanCheck) {
+                                --this.popupPriCount;
+                            }
+                            if (isNullOrUndefined(this.scrollModule)) {
+                                this.destroyMode();
+                            }
+                            const itemCol = [].slice.call(selectAll('.' + CLS_ITEMS + ' .' + CLS_ITEM, tEle));
+                            if (this.isReact && this.items[parseInt(index.toString(), 10)].template) {
+                                this.clearToolbarTemplate(itemCol[parseInt(index.toString(), 10)]);
+                            }
+                            detach(itemCol[parseInt(index.toString(), 10)]);
+                            this.tbarEle.splice(index, 1);
+                            this.addItems([this.items[parseInt(index.toString(), 10)]], index);
+                            this.items.splice(index, 1);
+                            if (this.items[parseInt(index.toString(), 10)].template) {
+                                this.tbarEle.splice(this.items.length, 1);
                             }
                         }
                     }
@@ -5685,7 +5732,7 @@ let Accordion = class Accordion extends Component {
         }
         const ele = this.element;
         super.destroy();
-        this.unwireEvents();
+        this.unWireEvents();
         this.isDestroy = true;
         this.restoreContent(null);
         [].slice.call(ele.children).forEach((el) => {
@@ -5772,7 +5819,7 @@ let Accordion = class Accordion extends Component {
             }
         }
     }
-    unwireEvents() {
+    unWireEvents() {
         EventHandler.remove(this.element, 'click', this.clickHandler);
         if (!isNullOrUndefined(this.keyModule)) {
             this.keyModule.destroy();
@@ -6088,7 +6135,7 @@ let Accordion = class Accordion extends Component {
             const ctnEle = this.headerEleGenerate();
             const 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);
         }
         let hdr = select('.' + CLS_HEADER, innerEle);
@@ -6150,8 +6197,7 @@ let Accordion = class Accordion extends Component {
             return true;
         }
     }
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    fetchElement(ele, value, index, isHeader) {
+    fetchElement(ele, value, index) {
         let templateFn;
         let temString;
         try {
@@ -6169,9 +6215,11 @@ let Accordion = class Accordion extends Component {
             if (typeof (value) === 'string') {
                 ele.innerHTML = SanitizeHtmlHelper.sanitize(value);
             }
-            else if (!isNullOrUndefined(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 = compile(value);
@@ -6235,7 +6283,7 @@ let Accordion = class Accordion extends Component {
                 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;
     }
@@ -6268,7 +6316,7 @@ let Accordion = class Accordion extends Component {
                     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);
                 }
@@ -6279,6 +6327,10 @@ let Accordion = class Accordion extends Component {
         });
     }
     expandAnimation(ef, icn, trgt, trgtItemEle, animate, args) {
+        if (ef === 'None' && animationMode === 'Enable') {
+            ef = 'SlideDown';
+            animate.name = 'SlideDown';
+        }
         let height;
         this.lastActiveItemId = trgtItemEle.id;
         if (ef === 'SlideDown') {
@@ -6372,7 +6424,7 @@ let Accordion = class Accordion extends Component {
                 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);
                 }
@@ -6383,6 +6435,10 @@ let Accordion = class Accordion extends Component {
         });
     }
     collapseAnimation(ef, trgt, trgtItEl, icn, animate, args) {
+        if (ef === 'None' && animationMode === 'Enable') {
+            ef = 'SlideUp';
+            animate.name = 'SlideUp';
+        }
         let height;
         let trgtHeight;
         let itemHeight;
@@ -6482,7 +6538,7 @@ let Accordion = class Accordion extends Component {
                 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);
                 }
@@ -6492,8 +6548,7 @@ let Accordion = class Accordion extends Component {
             this.renderReactTemplates();
         }
     }
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    expandedItemRefresh(ele) {
+    expandedItemRefresh() {
         const itemEle = this.getItemElements();
         [].slice.call(itemEle).forEach((el) => {
             if (el.classList.contains(CLS_SLCTED)) {
@@ -6508,8 +6563,12 @@ let Accordion = class Accordion extends Component {
      * @returns {void}.
      */
     removeItem(index) {
-        if (this.isReact) {
-            this.clearTemplate(['headerTemplate', 'itemTemplate'], index);
+        if (this.isReact || this.isAngular) {
+            const item = selectAll('.' + CLS_ITEM$1, this.element)[parseInt(index.toString(), 10)];
+            const header = select('.' + CLS_HEADERCTN, item);
+            const 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);
         }
         const itemEle = this.getItemElements();
         const ele = itemEle[parseInt(index.toString(), 10)];
@@ -6521,7 +6580,7 @@ let Accordion = class Accordion extends Component {
         detach(ele);
         items.splice(index, 1);
         this.expandedIndices = [];
-        this.expandedItemRefresh(this.element);
+        this.expandedItemRefresh();
     }
     /**
      * Sets focus to the specified index item header in Accordion.
@@ -6697,28 +6756,18 @@ let Accordion = class Accordion extends Component {
         }
     }
     setTemplate(template, toElement, index) {
-        toElement.innerHTML = '';
-        this.templateCompile(toElement, template, index);
+        this.fetchElement(toElement, template, index);
         if (this.isReact) {
             this.renderReactTemplates();
         }
     }
-    templateCompile(ele, cnt, index) {
-        const tempEle = this.createElement('div');
-        this.fetchElement(tempEle, cnt, index, false);
-        if (tempEle.childNodes.length !== 0) {
-            [].slice.call(tempEle.childNodes).forEach((childEle) => {
-                ele.appendChild(childEle);
-            });
-        }
-    }
     clearAccordionTemplate(templateEle, templateName, className) {
         if (this.registeredTemplate && this.registeredTemplate[`${templateName}`]) {
             const registeredTemplates = this.registeredTemplate;
             for (let index = 0; index < registeredTemplates[`${templateName}`].length; index++) {
                 const registeredItem = registeredTemplates[`${templateName}`][parseInt(index.toString(), 10)].rootNodes[0];
-                const closestItem = closest(registeredItem.containerInfo, '.' + className);
-                if (!isNullOrUndefined(closestItem) && closestItem === templateEle) {
+                const closestItem = closest(registeredItem, '.' + className);
+                if (!isNullOrUndefined(closestItem) && closestItem === templateEle || isNullOrUndefined(registeredItem.parentNode)) {
                     this.clearTemplate([templateName], [registeredTemplates[`${templateName}`][parseInt(index.toString(), 10)]]);
                     break;
                 }
@@ -6787,7 +6836,8 @@ let Accordion = class Accordion extends Component {
                                 if (property[parseInt(k.toString(), 10)] === 'disabled' && !isNullOrUndefined(item)) {
                                     this.enableItem(index, !newVal);
                                 }
-                                if (property[parseInt(k.toString(), 10)] === 'content' && !isNullOrUndefined(item) && item.children.length === 2) {
+                                if (property.indexOf('header') < 0 && property[parseInt(k.toString(), 10)] === 'content'
+                                    && !isNullOrUndefined(item) && item.children.length === 2) {
                                     if (typeof newVal === 'function') {
                                         if (this.isAngular || this.isReact) {
                                             this.clearAccordionTemplate(content, property[parseInt(k.toString(), 10)], CLS_CTENT);
@@ -7567,6 +7617,14 @@ let Tab = class Tab extends Component {
         this.renderContainer();
         this.wireEvents();
         this.initRender = false;
+        if (this.isReact && this.portals && this.portals.length > 0) {
+            this.renderReactTemplates(() => {
+                if (!isNullOrUndefined(this.tbObj)) {
+                    this.tbObj.refreshOverflow();
+                }
+                this.refreshActiveBorder();
+            });
+        }
     }
     renderContainer() {
         const ele = this.element;
@@ -7777,10 +7835,7 @@ let Tab = class Tab extends Component {
             tCont.appendChild(this.btnCls.cloneNode(true));
             const wrap = this.createElement('div', { className: CLS_WRAP, attrs: wrapAttrs });
             wrap.appendChild(tCont);
-            if (this.itemIndexArray === []) {
-                this.itemIndexArray.push(CLS_ITEM$2 + this.tabId + '_' + this.lastIndex);
-            }
-            else {
+            if (this.itemIndexArray instanceof Array) {
                 this.itemIndexArray.splice((index + i), 0, CLS_ITEM$2 + this.tabId + '_' + this.lastIndex);
             }
             const attrObj = {
@@ -7936,10 +7991,9 @@ let Tab = class Tab extends Component {
         if (!isNullOrUndefined(newCnt)) {
             this.prevActiveEle = newCnt.id;
         }
-        const isPrevent = isNullOrUndefined(this.animation) || this.animation.next === {} || this.animation.previous === {}
-            || isNullOrUndefined(this.animation.next.effect) || isNullOrUndefined(this.animation.previous.effect)
-            || this.animation.previous.effect == 'None' || this.animation.next.effect == 'None';
-        if (this.initRender || value === false || this.animation === {} || isPrevent) {
+        const isPrevent = isNullOrUndefined(this.animation) || isNullOrUndefined(this.animation.next.effect) || isNullOrUndefined(this.animation.previous.effect)
+            || this.animation.previous.effect === 'None' || this.animation.next.effect === 'None';
+        if (this.initRender || value === false || isPrevent) {
             if (oldCnt && oldCnt !== newCnt) {
                 oldCnt.classList.remove(CLS_ACTIVE$1);
             }
@@ -7951,7 +8005,7 @@ let Tab = class Tab extends Component {
             const openEff = this.animation.previous.effect;
             animateObj = {
                 name: ((openEff === 'None') ? '' : ((openEff !== 'SlideLeftIn') ? openEff : 'SlideLeftIn')),
-                duration: this.animation.previous.duration,
+                duration: (this.animation.previous.duration === 0 && animationMode === 'Enable') ? 600 : this.animation.previous.duration,
                 timingFunction: this.animation.previous.easing
             };
         }
@@ -7959,7 +8013,7 @@ let Tab = class Tab extends Component {
             const clsEff = this.animation.next.effect;
             animateObj = {
                 name: ((clsEff === 'None') ? '' : ((clsEff !== 'SlideRightIn') ? clsEff : 'SlideRightIn')),
-                duration: this.animation.next.duration,
+                duration: (this.animation.next.duration === 0 && animationMode === 'Enable') ? 600 : this.animation.next.duration,
                 timingFunction: this.animation.next.easing
             };
         }
@@ -8068,7 +8122,7 @@ let Tab = class Tab extends Component {
     }
     getContent(ele, cnt, callType, index) {
         let eleStr;
-        cnt = isNullOrUndefined(cnt) ? "" : cnt;
+        cnt = isNullOrUndefined(cnt) ? '' : cnt;
         if (typeof cnt === 'string' || isNullOrUndefined(cnt.innerHTML)) {
             if (typeof cnt === 'string' && this.enableHtmlSanitizer) {
                 cnt = SanitizeHtmlHelper.sanitize(cnt);
@@ -8417,7 +8471,7 @@ let Tab = class Tab extends Component {
     }
     showPopup(config) {
         const tbPop = select('.e-popup.e-toolbar-pop', this.hdrEle);
-        if (tbPop.classList.contains('e-popup-close')) {
+        if (tbPop && tbPop.classList.contains('e-popup-close')) {
             const tbPopObj = (tbPop && tbPop.ej2_instances[0]);
             tbPopObj.position.X = (this.headerPlacement === 'Left') ? 'left' : 'right';
             tbPopObj.dataBind();
@@ -8731,6 +8785,9 @@ let Tab = class Tab extends Component {
         }
     }
     clearTabTemplate(templateEle, templateName, className) {
+        if (!this.clearTemplates) {
+            return;
+        }
         if (this.registeredTemplate && this.registeredTemplate[templateName]) {
             const registeredTemplates = this.registeredTemplate;
             for (let index = 0; index < registeredTemplates[templateName].length; index++) {
@@ -8862,8 +8919,8 @@ let Tab = class Tab extends Component {
             clonedElement: this.cloneElement,
             cancel: false
         };
-        this.trigger('onDragStart', dragArgs, (tabitemDragArgs) => {
-            if (tabitemDragArgs.cancel) {
+        this.trigger('onDragStart', dragArgs, (tabItemDragArgs) => {
+            if (tabItemDragArgs.cancel) {
                 const dragObj = e.element.ej2_instances[0];
                 if (!isNullOrUndefined(dragObj)) {
                     dragObj.intDestroy(e.event);
@@ -9204,7 +9261,9 @@ let Tab = class Tab extends Component {
             }
         }
         this.setActiveBorder();
-        item.setAttribute('aria-hidden', '' + value);
+        if (!isNullOrUndefined(item.firstElementChild)) {
+            item.firstElementChild.setAttribute('aria-hidden', '' + value);
+        }
         if (this.overflowMode === 'Popup' && this.tbObj) {
             this.tbObj.refreshOverflow();
         }
@@ -9621,6 +9680,9 @@ __decorate$7([
 __decorate$7([
     Property(false)
 ], Tab.prototype, "allowDragAndDrop", void 0);
+__decorate$7([
+    Property(true)
+], Tab.prototype, "clearTemplates", void 0);
 __decorate$7([
     Complex({}, TabAnimationSettings)
 ], Tab.prototype, "animation", void 0);
@@ -10489,6 +10551,9 @@ let TreeView = TreeView_1 = class TreeView extends Component {
             }
         }
         let eNodes = selectAll('.' + EXPANDED, element);
+        if (!this.loadOnDemand && this.fields.dataSource instanceof DataManager) {
+            this.isInitalExpand = this.treeData.filter(e => e[this.fields.expanded] == true).length > 0 ? true : this.isInitalExpand;
+        }
         if (!this.isInitalExpand) {
             for (let i = 0; i < eNodes.length; i++) {
                 this.renderChildNodes(eNodes[i]);
@@ -10993,6 +11058,9 @@ let TreeView = TreeView_1 = class TreeView extends Component {
     }
     doExpandAction() {
         let eUids = this.expandedNodes;
+        if (!this.loadOnDemand && this.fields.dataSource instanceof DataManager) {
+            this.isInitalExpand = this.treeData.filter(e => e[this.fields.expanded] == true).length > 0 ? true : this.isInitalExpand;
+        }
         if (this.isInitalExpand && eUids.length > 0) {
             this.setProperties({ expandedNodes: [] }, true);
             /* eslint-disable */
@@ -11184,7 +11252,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
                 if (this.isAnimate && !this.isRefreshed) {
                     this.aniObj.animate(ul, {
                         name: this.animation.expand.effect,
-                        duration: this.animation.expand.duration,
+                        duration: (this.animation.expand.duration === 0 && animationMode === 'Enable') ? 400 : this.animation.expand.duration,
                         timingFunction: this.animation.expand.easing,
                         begin: (args) => {
                             liEle.style.overflow = 'hidden';
@@ -11284,7 +11352,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         if (this.isAnimate) {
             this.aniObj.animate(ul, {
                 name: this.animation.collapse.effect,
-                duration: this.animation.collapse.duration,
+                duration: (this.animation.collapse.duration === 0 && animationMode === 'Enable') ? 400 : this.animation.collapse.duration,
                 timingFunction: this.animation.collapse.easing,
                 begin: (args) => {
                     liEle.style.overflow = 'hidden';
@@ -11430,6 +11498,9 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         if (callback) {
             callback();
         }
+        if (expandChild) {
+            this.expandedNodes.push(parentLi.getAttribute('data-uid'));
+        }
         if (this.treeList.length === 0 && !this.isLoaded) {
             this.finalize();
         }
@@ -12852,6 +12923,9 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         else {
             this.dropAsChildNode(dragLi, dropLi, dragObj, null, e, offsetY, true);
         }
+        if (this.showCheckBox) {
+            this.ensureIndeterminate();
+        }
     }
     dropAsSiblingNode(dragLi, dropLi, e, dragObj) {
         let dropUl = closest(dropLi, '.' + PARENTITEM);
@@ -14402,9 +14476,9 @@ let TreeView = TreeView_1 = class TreeView extends Component {
             }
         }
         else if (this.dataType == 2) {
-            parentsId = this.getHierarchicalParentId(node, this.treeData, parentsId).reverse();
+            parentsId = this.getHierarchicalParentId(node, this.treeData, parentsId);
         }
-        this.expandAll(parentsId);
+        this.expandAll(parentsId.reverse());
         let liEle = this.getElement(node);
         if (!isNullOrUndefined(liEle)) {
             if (typeof node == 'object') {
@@ -14962,7 +15036,7 @@ let Sidebar = class Sidebar extends Component {
             this.show();
         }
         else if (!this.isOpen) {
-            addClass([this.element], CLOSE);
+            addClass([this.element], [CLOSE, DISABLEANIMATION]);
         }
     }
     checkType(val) {
@@ -15414,7 +15488,7 @@ let Sidebar = class Sidebar extends Component {
         }
         this.destroyBackDrop();
         if (this.element) {
-            removeClass([this.element], [OPEN, CLOSE, PUSH, SLIDE, OVER, LEFT, RIGHT, TRASITION]);
+            removeClass([this.element], [OPEN, CLOSE, PUSH, SLIDE, OVER, LEFT, RIGHT, TRASITION, DISABLEANIMATION]);
             removeClass([this.element], SIDEBARABSOLUTE);
             this.element.style.width = '';
             this.element.style.zIndex = '';
@@ -15778,7 +15852,14 @@ let Breadcrumb = class Breadcrumb extends Component {
                 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], nextItem: items[j + 1] }];
@@ -15787,6 +15868,7 @@ let Breadcrumb = class Breadcrumb extends Component {
                     // list item
                     listBaseOptions.itemClass = '';
                     if (this.itemTemplate) {
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         listBaseOptions.template = this.itemTemplate;
                         isSingleLevel = false;
                     }
@@ -16546,6 +16628,7 @@ let Carousel = class Carousel extends Component {
     }
     initialize() {
         const carouselClasses = [];
+        carouselClasses.push(CLS_CAROUSEL);
         if (this.cssClass) {
             carouselClasses.push(this.cssClass);
         }
@@ -16560,7 +16643,7 @@ let Carousel = class Carousel extends Component {
         }
         addClass([this.element], carouselClasses);
         setStyleAttribute(this.element, { 'width': formatUnit(this.width), 'height': formatUnit(this.height) });
-        attributes(this.element, { 'tabindex': '0', 'aria-roledescription': 'carousel', 'aria-label': this.localeObj.getConstant('slideShow') });
+        attributes(this.element, { 'tabindex': '0', 'role': 'group', 'aria-roledescription': 'carousel', 'aria-label': this.localeObj.getConstant('slideShow') });
         if (!isNullOrUndefined(this.htmlAttributes)) {
             this.setHtmlAttributes(this.htmlAttributes, this.element);
         }
@@ -16631,7 +16714,7 @@ let Carousel = class Carousel extends Component {
             className: `${CLS_ITEM$3} ${item.cssClass ? item.cssClass : ''} ${this.selectedIndex === index && !isClone ? CLS_ACTIVE$2 : ''}`,
             attrs: {
                 'aria-hidden': this.selectedIndex === index && !isClone ? 'false' : 'true', 'data-index': index.toString(),
-                'aria-role': 'group', 'aria-roledescription': 'slide'
+                'role': 'group', 'aria-roledescription': 'slide'
             }
         });
         if (isClone) {
@@ -17328,6 +17411,13 @@ let Carousel = class Carousel extends Component {
             EventHandler.add(this.itemsContainer, 'mouseup touchend', this.swipStop, this);
         }
     }
+    resizeHandler() {
+        if (this.itemsContainer && this.itemsContainer.firstElementChild) {
+            const numOfItems = this.getNumOfItems();
+            const slideWidth = this.itemsContainer.firstElementChild.clientWidth;
+            this.itemsContainer.style.transform = this.getTranslateX(slideWidth, this.selectedIndex + numOfItems);
+        }
+    }
     wireEvents() {
         if (!(this.animationEffect === 'Custom')) {
             this.swipeModehandlers();
@@ -17336,6 +17426,7 @@ let Carousel = class Carousel extends Component {
         EventHandler.add(this.element, 'mouseenter mouseleave', this.onHoverActions, this);
         EventHandler.add(this.element.firstElementChild, 'animationend', this.onTransitionEnd, this);
         EventHandler.add(this.element.firstElementChild, 'transitionend', this.onTransitionEnd, this);
+        EventHandler.add(window, 'resize', this.resizeHandler, this);
     }
     unWireEvents() {
         const indicators = [].slice.call(this.element.querySelectorAll(`.${CLS_INDICATOR_BAR}`));
@@ -17354,6 +17445,7 @@ let Carousel = class Carousel extends Component {
         EventHandler.remove(this.element.firstElementChild, 'transitionend', this.onTransitionEnd);
         EventHandler.clearEvents(this.element);
         EventHandler.clearEvents(this.itemsContainer);
+        EventHandler.remove(window, 'resize', this.resizeHandler);
     }
     /**
      * Method to transit from the current slide to the previous slide.
@@ -17596,6 +17688,7 @@ let AppBar = class AppBar extends Component {
         // pre render code
     }
     render() {
+        this.element.classList.add(CLS_APPBAR);
         if (this.element.tagName !== 'HEADER') {
             this.element.setAttribute('role', 'header');
         }