@syncfusion/ej2-navigations 22.2.7 → 22.2.8-184993

package/dist/es6/ej2-navigations.es5.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';
@@ -1359,10 +1359,10 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
             }
             this.targetElement = target;
             if (!this.isMenu) {
-                EventHandler.add(this.targetElement, 'scroll', this.scrollHandler, this);
+                EventHandler.add(this.targetElement, 'mousewheel DOMMouseScroll', this.scrollHandler, this);
                 for (var _i = 0, _a = getScrollableParent(this.targetElement); _i < _a.length; _i++) {
                     var parent_1 = _a[_i];
-                    EventHandler.add(parent_1, 'scroll', this.scrollHandler, this);
+                    EventHandler.add(parent_1, 'mousewheel DOMMouseScroll', this.scrollHandler, this);
                 }
             }
         }
@@ -1540,7 +1540,7 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
             var popups_1 = [];
             var allPopup = selectAll('.' + POPUP);
             allPopup.forEach(function (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_1.push(elem);
                 }
             });
@@ -1707,7 +1707,7 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
                         _this.afterCloseMenu(e);
                     }
                     else if (isOpen && !_this.hamburgerMode && closedLi && !trgtLi && _this.keyType !== 'left' && (_this.navIdx.length || !_this.isMenu && _this.navIdx.length === 0)) {
-                        var ele = (e && e.target.classList.contains('e-vscroll'))
+                        var 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');
@@ -1716,7 +1716,9 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
                             }
                         }
                         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) ||
@@ -1908,7 +1910,7 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
             if (isNullOrUndefined(e)) {
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 var ev = document.createEvent('MouseEvents');
-                ev.initEvent("click", true, false);
+                ev.initEvent('click', true, false);
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 var targetEvent = this.copyObject(ev, {});
                 targetEvent.target = targetEvent.srcElement = target;
@@ -1921,6 +1923,7 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
             }
         }
     };
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     MenuBase.prototype.copyObject = function (source, destination) {
         for (var prop in source) {
             destination["" + prop] = source["" + prop];
@@ -2488,6 +2491,9 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
                     if (!cli.classList.contains(SEPARATOR)) {
                         this.showSubMenu = true;
                         var cul = cli.parentNode;
+                        if (isNullOrUndefined(cul)) {
+                            return;
+                        }
                         this.cliIdx = this.getIdx(cul, cli);
                         if (this.isMenu || !Browser.isDevice) {
                             var culIdx = this.isMenu ? Array.prototype.indexOf.call([wrapper].concat(this.getPopups()), closest(cul, '.' + 'e-' + this.getModuleName() + '-wrapper'))
@@ -2723,7 +2729,12 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
                     }
                     break;
                 case 'enableRtl':
-                    wrapper.classList.toggle(RTL);
+                    if (this_1.enableRtl) {
+                        wrapper.classList.add(RTL);
+                    }
+                    else {
+                        wrapper.classList.remove(RTL);
+                    }
                     break;
                 case 'showItemOnClick':
                     this_1.unWireEvents();
@@ -2888,10 +2899,10 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
                 }
             }
             if (!this.isMenu) {
-                EventHandler.remove(this.targetElement, 'scroll', this.scrollHandler);
+                EventHandler.remove(this.targetElement, 'mousewheel DOMMouseScroll', this.scrollHandler);
                 for (var _i = 0, _a = getScrollableParent(this.targetElement); _i < _a.length; _i++) {
                     var parent_2 = _a[_i];
-                    EventHandler.remove(parent_2, 'scroll', this.scrollHandler);
+                    EventHandler.remove(parent_2, 'mousewheel DOMMouseScroll', this.scrollHandler);
                 }
             }
         }
@@ -3167,7 +3178,7 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
                 if (ishide && validUl === items[i]) {
                     ul.children[index].classList.add(HIDE);
                 }
-                else {
+                else if (!ishide && validUl === items[i]) {
                     ul.children[index].classList.remove(HIDE);
                 }
             }
@@ -4060,10 +4071,16 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
      * @returns {void}
      */
     Toolbar.prototype.render = function () {
+        var _this = this;
         this.initialize();
         this.renderControl();
         this.wireEvents();
         this.renderComplete();
+        if (this.isReact && this.portals && this.portals.length > 0) {
+            this.renderReactTemplates(function () {
+                _this.refreshOverflow();
+            });
+        }
     };
     Toolbar.prototype.initialize = function () {
         var width = formatUnit(this.width);
@@ -5191,7 +5208,7 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
                 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)]);
             }
             var btnItem = innerItems[parseInt(index.toString(), 10)].querySelector('.e-control.e-btn');
             if (!isNullOrUndefined(btnItem) && !isNullOrUndefined(btnItem.ej2_instances[0]) && !(btnItem.ej2_instances[0].isDestroyed)) {
@@ -5240,7 +5257,7 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
             var tempArray = void 0;
             if (!isNullOrUndefined(templateFn)) {
                 var 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(function (ele) {
@@ -5308,7 +5325,8 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
         var dom;
         var innerEle = this.createElement('div', { className: CLS_ITEM });
         var 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 = [];
@@ -5386,7 +5404,12 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
     };
     Toolbar.prototype.activeEleRemove = function (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') {
@@ -5504,6 +5527,30 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
             nextEle = innerItems[++eleIndex];
         }
     };
+    Toolbar.prototype.clearToolbarTemplate = function (templateEle) {
+        if (this.registeredTemplate && this.registeredTemplate["" + 'template']) {
+            var registeredTemplates = this.registeredTemplate;
+            for (var index = 0; index < registeredTemplates["" + 'template'].length; index++) {
+                var registeredItem = registeredTemplates["" + 'template'][parseInt(index.toString(), 10)].rootNodes[0];
+                var 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) {
+            var portals = this.portals;
+            for (var index = 0; index < portals.length; index++) {
+                var portalItem = portals[parseInt(index.toString(), 10)];
+                var 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.
      *
@@ -5526,31 +5573,29 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
                             var index = parseInt(Object.keys(newProp.items)[parseInt(i.toString(), 10)], 10);
                             var property = Object.keys(newProp.items[parseInt(index.toString(), 10)])[0];
                             var newProperty = Object(newProp.items[parseInt(index.toString(), 10)])["" + property];
-                            if (typeof newProperty !== 'function') {
-                                if (this.tbarAlign || property === 'align') {
-                                    this.refresh();
-                                    this.trigger('created');
-                                    break;
-                                }
-                                var popupPriCheck = property === 'showAlwaysInPopup' && !newProperty;
-                                var booleanCheck = property === 'overflow' && this.popupPriCount !== 0;
-                                if ((popupPriCheck) || (this.items[parseInt(index.toString(), 10)].showAlwaysInPopup) && booleanCheck) {
-                                    --this.popupPriCount;
-                                }
-                                if (isNullOrUndefined(this.scrollModule)) {
-                                    this.destroyMode();
-                                }
-                                var 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;
+                            }
+                            var popupPriCheck = property === 'showAlwaysInPopup' && !newProperty;
+                            var booleanCheck = property === 'overflow' && this.popupPriCount !== 0;
+                            if ((popupPriCheck) || (this.items[parseInt(index.toString(), 10)].showAlwaysInPopup) && booleanCheck) {
+                                --this.popupPriCount;
+                            }
+                            if (isNullOrUndefined(this.scrollModule)) {
+                                this.destroyMode();
+                            }
+                            var 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);
                             }
                         }
                     }
@@ -5874,7 +5919,7 @@ var Accordion = /** @__PURE__ @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) {
@@ -5962,7 +6007,7 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
             }
         }
     };
-    Accordion.prototype.unwireEvents = function () {
+    Accordion.prototype.unWireEvents = function () {
         EventHandler.remove(this.element, 'click', this.clickHandler);
         if (!isNullOrUndefined(this.keyModule)) {
             this.keyModule.destroy();
@@ -6281,7 +6326,7 @@ var Accordion = /** @__PURE__ @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);
@@ -6343,8 +6388,7 @@ var Accordion = /** @__PURE__ @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 {
@@ -6362,9 +6406,11 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
             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);
@@ -6428,7 +6474,7 @@ var Accordion = /** @__PURE__ @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;
     };
@@ -6462,7 +6508,7 @@ var Accordion = /** @__PURE__ @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);
                 }
@@ -6474,6 +6520,10 @@ var Accordion = /** @__PURE__ @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') {
@@ -6568,7 +6618,7 @@ var Accordion = /** @__PURE__ @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);
                 }
@@ -6580,6 +6630,10 @@ var Accordion = /** @__PURE__ @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;
@@ -6680,7 +6734,7 @@ var Accordion = /** @__PURE__ @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);
                 }
@@ -6690,8 +6744,7 @@ var Accordion = /** @__PURE__ @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) {
@@ -6707,8 +6760,12 @@ var Accordion = /** @__PURE__ @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$1, 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)];
@@ -6720,7 +6777,7 @@ var Accordion = /** @__PURE__ @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.
@@ -6897,28 +6954,18 @@ var Accordion = /** @__PURE__ @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 (!isNullOrUndefined(closestItem) && closestItem === templateEle) {
+                var closestItem = closest(registeredItem, '.' + className);
+                if (!isNullOrUndefined(closestItem) && closestItem === templateEle || isNullOrUndefined(registeredItem.parentNode)) {
                     this.clearTemplate([templateName], [registeredTemplates["" + templateName][parseInt(index.toString(), 10)]]);
                     break;
                 }
@@ -6988,7 +7035,8 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
                                 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);
@@ -7833,11 +7881,20 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
      * @returns {void}
      */
     Tab.prototype.render = function () {
+        var _this = this;
         this.btnCls = this.createElement('span', { className: CLS_ICONS + ' ' + CLS_ICON_CLOSE, attrs: { title: this.title } });
         this.tabId = this.element.id.length > 0 ? ('-' + this.element.id) : getRandomId();
         this.renderContainer();
         this.wireEvents();
         this.initRender = false;
+        if (this.isReact && this.portals && this.portals.length > 0) {
+            this.renderReactTemplates(function () {
+                if (!isNullOrUndefined(_this.tbObj)) {
+                    _this.tbObj.refreshOverflow();
+                }
+                _this.refreshActiveBorder();
+            });
+        }
     };
     Tab.prototype.renderContainer = function () {
         var ele = this.element;
@@ -8050,10 +8107,7 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
             tCont.appendChild(_this.btnCls.cloneNode(true));
             var 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);
             }
             var attrObj = {
@@ -8211,10 +8265,9 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
         if (!isNullOrUndefined(newCnt)) {
             this.prevActiveEle = newCnt.id;
         }
-        var 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) {
+        var 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);
             }
@@ -8226,7 +8279,7 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
             var 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
             };
         }
@@ -8234,7 +8287,7 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
             var 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
             };
         }
@@ -8344,7 +8397,7 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
     };
     Tab.prototype.getContent = function (ele, cnt, callType, index) {
         var 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);
@@ -8695,7 +8748,7 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
     };
     Tab.prototype.showPopup = function (config) {
         var tbPop = select('.e-popup.e-toolbar-pop', this.hdrEle);
-        if (tbPop.classList.contains('e-popup-close')) {
+        if (tbPop && tbPop.classList.contains('e-popup-close')) {
             var tbPopObj = (tbPop && tbPop.ej2_instances[0]);
             tbPopObj.position.X = (this.headerPlacement === 'Left') ? 'left' : 'right';
             tbPopObj.dataBind();
@@ -9010,6 +9063,9 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
         }
     };
     Tab.prototype.clearTabTemplate = function (templateEle, templateName, className) {
+        if (!this.clearTemplates) {
+            return;
+        }
         if (this.registeredTemplate && this.registeredTemplate[templateName]) {
             var registeredTemplates = this.registeredTemplate;
             for (var index = 0; index < registeredTemplates[templateName].length; index++) {
@@ -9143,8 +9199,8 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
             clonedElement: this.cloneElement,
             cancel: false
         };
-        this.trigger('onDragStart', dragArgs, function (tabitemDragArgs) {
-            if (tabitemDragArgs.cancel) {
+        this.trigger('onDragStart', dragArgs, function (tabItemDragArgs) {
+            if (tabItemDragArgs.cancel) {
                 var dragObj = e.element.ej2_instances[0];
                 if (!isNullOrUndefined(dragObj)) {
                     dragObj.intDestroy(e.event);
@@ -9912,6 +9968,9 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
     __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);
@@ -10796,6 +10855,7 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
         return list;
     };
     TreeView.prototype.finalizeNode = function (element) {
+        var _this = this;
         var iNodes = selectAll('.' + IMAGE, element);
         for (var k = 0; k < iNodes.length; k++) {
             iNodes[k].setAttribute('alt', IMAGE);
@@ -10816,6 +10876,9 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
             }
         }
         var eNodes = selectAll('.' + EXPANDED, element);
+        if (!this.loadOnDemand && this.fields.dataSource instanceof DataManager) {
+            this.isInitalExpand = this.treeData.filter(function (e) { return e[_this.fields.expanded] == true; }).length > 0 ? true : this.isInitalExpand;
+        }
         if (!this.isInitalExpand) {
             for (var i = 0; i < eNodes.length; i++) {
                 this.renderChildNodes(eNodes[i]);
@@ -11320,7 +11383,11 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
         }
     };
     TreeView.prototype.doExpandAction = function () {
+        var _this = this;
         var eUids = this.expandedNodes;
+        if (!this.loadOnDemand && this.fields.dataSource instanceof DataManager) {
+            this.isInitalExpand = this.treeData.filter(function (e) { return e[_this.fields.expanded] == true; }).length > 0 ? true : this.isInitalExpand;
+        }
         if (this.isInitalExpand && eUids.length > 0) {
             this.setProperties({ expandedNodes: [] }, true);
             /* eslint-disable */
@@ -11513,7 +11580,7 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
                 if (this.isAnimate && !this.isRefreshed) {
                     this.aniObj.animate(ul_1, {
                         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: function (args) {
                             liEle_1.style.overflow = 'hidden';
@@ -11615,7 +11682,7 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
         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: function (args) {
                     liEle.style.overflow = 'hidden';
@@ -11762,6 +11829,9 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
         if (callback) {
             callback();
         }
+        if (expandChild) {
+            this.expandedNodes.push(parentLi.getAttribute('data-uid'));
+        }
         if (this.treeList.length === 0 && !this.isLoaded) {
             this.finalize();
         }
@@ -13195,6 +13265,9 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
         else {
             this.dropAsChildNode(dragLi, dropLi, dragObj, null, e, offsetY, true);
         }
+        if (this.showCheckBox) {
+            this.ensureIndeterminate();
+        }
     };
     TreeView.prototype.dropAsSiblingNode = function (dragLi, dropLi, e, dragObj) {
         var dropUl = closest(dropLi, '.' + PARENTITEM);
@@ -14753,9 +14826,9 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
             }
         }
         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());
         var liEle = this.getElement(node);
         if (!isNullOrUndefined(liEle)) {
             if (typeof node == 'object') {
@@ -15330,7 +15403,7 @@ var Sidebar = /** @__PURE__ @class */ (function (_super) {
             this.show();
         }
         else if (!this.isOpen) {
-            addClass([this.element], CLOSE);
+            addClass([this.element], [CLOSE, DISABLEANIMATION]);
         }
     };
     Sidebar.prototype.checkType = function (val) {
@@ -15785,7 +15858,7 @@ var Sidebar = /** @__PURE__ @class */ (function (_super) {
         }
         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 = '';
@@ -16172,7 +16245,14 @@ var Breadcrumb = /** @__PURE__ @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] }];
@@ -16181,6 +16261,7 @@ var Breadcrumb = /** @__PURE__ @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;
                     }
@@ -16964,6 +17045,7 @@ var Carousel = /** @__PURE__ @class */ (function (_super) {
     };
     Carousel.prototype.initialize = function () {
         var carouselClasses = [];
+        carouselClasses.push(CLS_CAROUSEL);
         if (this.cssClass) {
             carouselClasses.push(this.cssClass);
         }
@@ -16978,7 +17060,7 @@ var Carousel = /** @__PURE__ @class */ (function (_super) {
         }
         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);
         }
@@ -17052,7 +17134,7 @@ var Carousel = /** @__PURE__ @class */ (function (_super) {
             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) {
@@ -17759,6 +17841,13 @@ var Carousel = /** @__PURE__ @class */ (function (_super) {
             EventHandler.add(this.itemsContainer, 'mouseup touchend', this.swipStop, this);
         }
     };
+    Carousel.prototype.resizeHandler = function () {
+        if (this.itemsContainer && this.itemsContainer.firstElementChild) {
+            var numOfItems = this.getNumOfItems();
+            var slideWidth = this.itemsContainer.firstElementChild.clientWidth;
+            this.itemsContainer.style.transform = this.getTranslateX(slideWidth, this.selectedIndex + numOfItems);
+        }
+    };
     Carousel.prototype.wireEvents = function () {
         if (!(this.animationEffect === 'Custom')) {
             this.swipeModehandlers();
@@ -17767,6 +17856,7 @@ var Carousel = /** @__PURE__ @class */ (function (_super) {
         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);
     };
     Carousel.prototype.unWireEvents = function () {
         var _this = this;
@@ -17786,6 +17876,7 @@ var Carousel = /** @__PURE__ @class */ (function (_super) {
         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.
@@ -18044,6 +18135,7 @@ var AppBar = /** @__PURE__ @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');
         }