@syncfusion/ej2-navigations 27.2.5 → 28.1.33

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

@@ -1102,6 +1102,9 @@ __decorate$2([
 __decorate$2([
     Property('')
 ], MenuItem.prototype, "url", void 0);
+__decorate$2([
+    Property()
+], MenuItem.prototype, "htmlAttributes", void 0);
 /**
  * Animation configuration settings.
  */
@@ -1809,7 +1812,10 @@ let MenuBase = class MenuBase extends Component {
                 const data = {
                     text: item[this.getField('text')].toString(), iconCss: ICONS + ' e-previous'
                 };
-                const hdata = new MenuItem(this.items[0], 'items', data, true);
+                if (this.template) {
+                    item.iconCss = (item.iconCss || '') + ICONS + ' e-previous';
+                }
+                const hdata = new MenuItem(this.items[0], 'items', this.template ? item : data, true);
                 const hli = this.createItems([hdata]).children[0];
                 hli.classList.add(HEADER);
                 this.uList.insertBefore(hli, this.uList.children[0]);
@@ -2055,6 +2061,9 @@ let MenuBase = class MenuBase extends Component {
                                 timingFunction: this.animationSettings.easing
                             } : null;
                             this.popupObj.show(animationOptions, this.lItem);
+                            if (Browser.isDevice) {
+                                this.popupWrapper.style.left = this.left + 'px';
+                            }
                         }
                     }
                     else {
@@ -2195,8 +2204,34 @@ let MenuBase = class MenuBase extends Component {
             }
         }
         this.toggleVisiblity(ul, false);
-        ul.style.top = top + px;
-        ul.style.left = left + px;
+        const wrapper = closest(this.element, '.e-' + this.getModuleName() + '-wrapper');
+        if (!this.isMenu && this.enableScrolling && ul && wrapper && wrapper.offsetHeight > 0) {
+            const menuVScroll = closest(ul, '.e-menu-vscroll');
+            ul.style.display = 'block';
+            if (menuVScroll) {
+                destroyScroll(getInstance(menuVScroll, VScroll), menuVScroll);
+            }
+            const cmenuWidth = Math.ceil(this.getMenuWidth(ul, ul.offsetWidth, this.enableRtl));
+            const cmenu = addScrolling(this.createElement, wrapper, ul, 'vscroll', this.enableRtl, wrapper.offsetHeight);
+            Object.assign(cmenu.style, {
+                top: `${top}px`,
+                left: `${left}px`,
+                width: `${cmenuWidth}px`,
+                position: 'absolute',
+                display: 'none'
+            });
+        }
+        else {
+            ul.style.top = top + px;
+            ul.style.left = left + px;
+        }
+    }
+    getMenuWidth(cmenu, width, isRtl) {
+        const caretIcon = cmenu.getElementsByClassName(CARET)[0];
+        if (caretIcon) {
+            width += parseInt(getComputedStyle(caretIcon)[isRtl ? 'marginRight' : 'marginLeft'], 10);
+        }
+        return width < 120 ? 120 : width;
     }
     toggleVisiblity(ul, isVisible = true) {
         ul.style.visibility = isVisible ? 'hidden' : '';
@@ -2220,15 +2255,24 @@ let MenuBase = class MenuBase extends Component {
                     args.curData.htmlAttributes = {};
                 }
                 if (Browser.isIE) {
-                    args.curData.htmlAttributes.role = 'menuitem';
-                    args.curData.htmlAttributes.tabindex = '-1';
+                    if (!args.curData.htmlAttributes.role) {
+                        args.curData.htmlAttributes.role = 'menuitem';
+                    }
+                    if (!args.curData.htmlAttributes.tabindex) {
+                        args.curData.htmlAttributes.tabindex = '-1';
+                    }
                 }
                 else {
-                    Object.assign(args.curData.htmlAttributes, { role: 'menuitem', tabindex: '-1' });
+                    Object.assign(args.curData.htmlAttributes, {
+                        role: args.curData.htmlAttributes.role || 'menuitem',
+                        tabindex: args.curData.htmlAttributes.tabindex || '-1'
+                    });
                 }
                 if (this.isMenu && !args.curData[this.getField('separator', level)]) {
-                    args.curData.htmlAttributes['aria-label'] = args.curData[args.fields.text] ?
-                        args.curData[args.fields.text] : args.curData[args.fields.id];
+                    if (!args.curData.htmlAttributes['aria-label']) {
+                        args.curData.htmlAttributes['aria-label'] = args.curData[args.fields.text] ?
+                            args.curData[args.fields.text] : args.curData[args.fields.id];
+                    }
                 }
                 if (args.curData[args.fields[fields.iconCss]] === '') {
                     args.curData[args.fields[fields.iconCss]] = null;
@@ -2237,7 +2281,9 @@ let MenuBase = class MenuBase extends Component {
             itemCreated: (args) => {
                 if (args.curData[this.getField('separator', level)]) {
                     args.item.classList.add(SEPARATOR);
-                    args.item.setAttribute('role', 'separator');
+                    if (!args.curData.htmlAttributes.role) {
+                        args.item.setAttribute('role', 'separator');
+                    }
                 }
                 if (showIcon && !args.curData[args.fields.iconCss]
                     && !args.curData[this.getField('separator', level)]) {
@@ -2482,9 +2528,10 @@ let MenuBase = class MenuBase extends Component {
             }
         }
         else {
-            if (this.isMenu && trgt.tagName === 'DIV' && this.navIdx.length && closest(trgt, '.e-menu-vscroll')) {
-                const popupEle = closest(trgt, '.' + POPUP);
-                const cIdx = Array.prototype.indexOf.call(this.getPopups(), popupEle) + 1;
+            if (trgt.tagName === 'DIV' && closest(trgt, '.e-menu-vscroll') && (this.navIdx.length || !this.isMenu && this.enableScrolling && this.navIdx.length === 0)) {
+                const popupEle = this.isMenu ? closest(trgt, '.' + POPUP) : closest(trgt, '.e-menu-vscroll');
+                const cIdx = this.isMenu ? Array.prototype.indexOf.call(this.getPopups(), popupEle) + 1
+                    : this.getIdx(wrapper, select('ul.e-menu-parent', popupEle));
                 if (cIdx < this.navIdx.length) {
                     this.closeMenu(cIdx + 1, e);
                     if (popupEle) {
@@ -2632,7 +2679,9 @@ let MenuBase = class MenuBase extends Component {
         }
     }
     getIdx(ul, li, skipHdr = true) {
-        let idx = Array.prototype.indexOf.call(ul.children, li);
+        const ulElem = !this.isMenu && this.enableScrolling && select('.e-menu-vscroll', ul)
+            ? selectAll('.e-menu-parent', ul) : Array.from(ul.children);
+        let idx = Array.prototype.indexOf.call(ulElem, li);
         if (skipHdr && ul.children[0].classList.contains(HEADER)) {
             idx--;
         }
@@ -2715,7 +2764,7 @@ let MenuBase = class MenuBase extends Component {
                     }
                     else {
                         let ul = wrapper.children[0];
-                        if (this.element.classList.contains('e-vertical')) {
+                        if (this.element.classList.contains('e-vertical') || !this.isMenu) {
                             destroyScroll(getInstance(ul, VScroll), ul);
                         }
                         else {
@@ -2877,6 +2926,8 @@ let MenuBase = class MenuBase extends Component {
     toggleAnimation(ul, isMenuOpen = true) {
         let pUlHeight;
         let pElement;
+        const animateElement = (this.enableScrolling && !this.isMenu && closest(ul, '.e-menu-vscroll'))
+            ? closest(ul, '.e-menu-vscroll') : ul;
         if (this.animationSettings.effect === 'None' || !isMenuOpen) {
             if (this.hamburgerMode && ul) {
                 ul.style.top = '0px';
@@ -2885,7 +2936,7 @@ let MenuBase = class MenuBase extends Component {
             this.end(ul, isMenuOpen);
         }
         else {
-            this.animation.animate(ul, {
+            this.animation.animate(animateElement, {
                 name: this.animationSettings.effect,
                 duration: this.animationSettings.duration,
                 timingFunction: this.animationSettings.easing,
@@ -2903,7 +2954,7 @@ let MenuBase = class MenuBase extends Component {
                     }
                     else {
                         options.element.style.display = 'block';
-                        options.element.style.maxHeight = options.element.getBoundingClientRect().height + 'px';
+                        options.element.style.maxHeight = this.isMenu ? options.element.getBoundingClientRect().height + 'px' : options.element.scrollHeight + 'px';
                     }
                 },
                 progress: (options) => {
@@ -2940,11 +2991,15 @@ let MenuBase = class MenuBase extends Component {
         }
     }
     end(ul, isMenuOpen) {
-        if (isMenuOpen && (this.isMenu || (!this.isMenu && this.isContextMenuClosed))) {
-            if (this.isMenu || !Browser.isDevice) {
+        if (isMenuOpen && this.isContextMenuClosed) {
+            if (this.isMenu || !Browser.isDevice || (!this.isMenu && this.isAnimationNone && Browser.isDevice)) {
                 ul.style.display = 'block';
             }
             ul.style.maxHeight = '';
+            const scrollMenu = this.enableScrolling && !this.isMenu ? closest(ul, '.e-menu-vscroll') : null;
+            if (scrollMenu) {
+                scrollMenu.style.display = 'block';
+            }
             this.triggerOpen(ul);
             if (ul.querySelector('.' + FOCUSED)) {
                 ul.querySelector('.' + FOCUSED).focus();
@@ -2972,6 +3027,10 @@ let MenuBase = class MenuBase extends Component {
             }
         }
         else {
+            const scrollMenu = this.enableScrolling && !this.isMenu ? closest(ul, '.e-menu-vscroll') : null;
+            if (scrollMenu) {
+                destroyScroll(getInstance(scrollMenu, VScroll), scrollMenu);
+            }
             if (ul === this.element) {
                 const fli = this.getLIByClass(this.element, FOCUSED);
                 if (fli) {
@@ -3011,7 +3070,9 @@ let MenuBase = class MenuBase extends Component {
         level = isCallBack ? level + 1 : 0;
         for (let i = 0, len = items.length; i < len; i++) {
             item = items[i];
-            if ((isUniqueId ? item[this.getField('itemId', level)] : item[this.getField('text', level)]) === data) {
+            const currentField = isUniqueId ? item[this.getField('itemId', level)] : item[this.getField('text', level)];
+            const itemId = (item.htmlAttributes && 'id' in item.htmlAttributes) ? item.htmlAttributes.id : currentField;
+            if (itemId === data) {
                 nIndex.push(i);
                 break;
             }
@@ -7097,6 +7158,7 @@ let ContextMenu = class ContextMenu extends MenuBase {
         super.preRender();
     }
     initialize() {
+        this.template = this.itemTemplate ? this.itemTemplate : null;
         super.initialize();
         attributes(this.element, { 'role': 'menubar', 'tabindex': '0' });
         this.element.style.zIndex = getZindexPartial(this.element).toString();
@@ -7142,6 +7204,9 @@ let ContextMenu = class ContextMenu extends MenuBase {
                     this.unWireEvents(oldProp.target);
                     this.wireEvents();
                     break;
+                case 'itemTemplate':
+                    this.itemTemplate = newProp.itemTemplate;
+                    this.refresh();
             }
         }
     }
@@ -7164,6 +7229,12 @@ __decorate$5([
 __decorate$5([
     Collection([], MenuItem)
 ], ContextMenu.prototype, "items", void 0);
+__decorate$5([
+    Property(null)
+], ContextMenu.prototype, "itemTemplate", void 0);
+__decorate$5([
+    Property(false)
+], ContextMenu.prototype, "enableScrolling", void 0);
 ContextMenu = __decorate$5([
     NotifyPropertyChanges
 ], ContextMenu);
@@ -7359,6 +7430,10 @@ let Menu = class Menu extends MenuBase {
                         }
                     }
                     break;
+                case 'template':
+                    this.template = newProp.template;
+                    this.refresh();
+                    break;
             }
         }
         super.onPropertyChanged(newProp, oldProp);
@@ -7836,6 +7911,17 @@ let Tab = class Tab extends Component {
             }
         }
     }
+    createContentElement(index) {
+        const contentElement = this.createElement('div', {
+            id: CLS_CONTENT$1 + this.tabId + '_' + index, className: CLS_ITEM$2,
+            attrs: { 'role': 'tabpanel', 'aria-labelledby': CLS_ITEM$2 + this.tabId + '_' + index }
+        });
+        if (['Dynamic', 'Demand'].indexOf(this.loadOn) !== -1 ||
+            (this.loadOn === 'Init' && index === Number(this.extIndex(this.itemIndexArray[0])))) {
+            addClass([contentElement], CLS_ACTIVE$1);
+        }
+        return contentElement;
+    }
     renderContent() {
         this.cntEle = select('.' + CLS_CONTENT$1, this.element);
         const hdrItem = selectAll('.' + CLS_TB_ITEM, this.element);
@@ -7850,11 +7936,26 @@ let Tab = class Tab extends Component {
                 }
             }
         }
+        else {
+            if (selectAll('.' + CLS_TB_ITEM, this.element).length > 0) {
+                if (this.loadOn === 'Init') {
+                    for (let i = 0; i < this.itemIndexArray.length; i++) {
+                        if (this.itemIndexArray[i]) {
+                            this.cntEle.appendChild(this.createContentElement(Number(this.extIndex(this.itemIndexArray[i]))));
+                        }
+                    }
+                }
+                else if (this.loadOn === 'Dynamic') {
+                    this.cntEle.appendChild(this.createContentElement(this.selectedItem > 0 ?
+                        this.selectedItem : Number(this.extIndex(this.itemIndexArray[0]))));
+                }
+            }
+        }
     }
     reRenderItems() {
         this.renderContainer();
         if (!isNullOrUndefined(this.cntEle)) {
-            this.touchModule = new Touch(this.cntEle, { swipe: this.swipeHandler.bind(this) });
+            this.bindSwipeEvents();
         }
     }
     parseObject(items, index) {
@@ -8351,6 +8452,27 @@ let Tab = class Tab extends Component {
             }
         }
     }
+    loadContentInitMode(ele) {
+        if (!ele) {
+            return;
+        }
+        if (this.loadOn === 'Init') {
+            for (let i = 0; i < this.items.length; i++) {
+                if (this.cntEle.children.item(i)) {
+                    this.getContent(this.cntEle.children.item(i), this.items[i].content, 'render', i);
+                }
+            }
+        }
+        if (this.prevIndex !== this.selectedItem) {
+            ele.classList.remove(CLS_ACTIVE$1);
+        }
+    }
+    loadContentElement() {
+        if (!this.isTemplate) {
+            const ele = this.cntEle.children.item(0);
+            this.loadContentInitMode(ele);
+        }
+    }
     setContentHeight(val) {
         if (this.element.classList.contains(CLS_FILL)) {
             removeClass([this.element], [CLS_FILL]);
@@ -8360,6 +8482,7 @@ let Tab = class Tab extends Component {
         }
         const hdrEle = this.getTabHeader();
         if (this.heightAdjustMode === 'None') {
+            this.loadContentElement();
             if (this.height === 'auto') {
                 return;
             }
@@ -8372,6 +8495,7 @@ let Tab = class Tab extends Component {
         else if (this.heightAdjustMode === 'Fill') {
             addClass([this.element], [CLS_FILL]);
             setStyleAttribute(this.element, { 'height': '100%' });
+            this.loadContentElement();
             this.cntEle.style.height = 'calc(100% - ' + this.hdrEle.offsetHeight + 'px)';
         }
         else if (this.heightAdjustMode === 'Auto') {
@@ -8386,11 +8510,8 @@ let Tab = class Tab extends Component {
             }
             else {
                 this.cntEle = select('.' + CLS_CONTENT$1, this.element);
-                if (val === true) {
-                    this.cntEle.appendChild(this.createElement('div', {
-                        id: (CLS_CONTENT$1 + this.tabId + '_' + 0), className: CLS_ITEM$2 + ' ' + CLS_ACTIVE$1,
-                        attrs: { 'role': 'tabpanel', 'aria-labelledby': CLS_ITEM$2 + this.tabId + '_' + 0 }
-                    }));
+                if (val === true && this.loadOn === 'Demand') {
+                    this.cntEle.appendChild(this.createContentElement(Number(this.extIndex(this.itemIndexArray[0]))));
                 }
                 const ele = this.cntEle.children.item(0);
                 for (let i = 0; i < this.items.length; i++) {
@@ -8404,14 +8525,15 @@ let Tab = class Tab extends Component {
                     this.clearTemplate(['content']);
                 }
                 this.templateEle = [];
-                this.getContent(ele, this.items[0].content, 'render', 0);
-                if (this.prevIndex !== this.selectedItem) {
-                    ele.classList.remove(CLS_ACTIVE$1);
+                if (this.loadOn === 'Demand') {
+                    this.getContent(ele, this.items[0].content, 'render', 0);
                 }
+                this.loadContentInitMode(ele);
             }
             setStyleAttribute(this.cntEle, { 'height': this.maxHeight + 'px' });
         }
         else {
+            this.loadContentElement();
             setStyleAttribute(this.cntEle, { 'height': 'auto' });
         }
     }
@@ -8493,7 +8615,7 @@ let Tab = class Tab extends Component {
             return;
         }
         if (!this.isTemplate) {
-            attributes(trg.firstElementChild, { 'aria-controls': CLS_CONTENT$1 + this.tabId + '_' + value });
+            attributes(trg.firstElementChild, { 'aria-controls': CLS_CONTENT$1 + this.tabId + '_' + this.extIndex(trg.id) });
         }
         const id = trg.id;
         this.removeActiveClass();
@@ -8514,6 +8636,9 @@ let Tab = class Tab extends Component {
         }
         else {
             this.cntEle = select('.' + CLS_TAB + ' > .' + CLS_CONTENT$1, this.element);
+            while (this.loadOn === 'Dynamic' && this.cntEle.firstElementChild) {
+                this.cntEle.removeChild(this.cntEle.firstElementChild);
+            }
             const item = this.getTrgContent(this.cntEle, this.extIndex(id));
             if (isNullOrUndefined(item)) {
                 this.cntEle.appendChild(this.createElement('div', {
@@ -8588,13 +8713,18 @@ let Tab = class Tab extends Component {
             }
         }
     }
+    bindSwipeEvents() {
+        if (this.swipeMode !== 'None') {
+            this.touchModule = new Touch(this.cntEle, { swipe: this.swipeHandler.bind(this) });
+        }
+    }
     wireEvents() {
         this.bindDraggable();
         window.addEventListener('resize', this.resizeContext);
         EventHandler.add(this.element, 'mouseover', this.hoverHandler, this);
         EventHandler.add(this.element, 'keydown', this.spaceKeyDown, this);
         if (!isNullOrUndefined(this.cntEle)) {
-            this.touchModule = new Touch(this.cntEle, { swipe: this.swipeHandler.bind(this) });
+            this.bindSwipeEvents();
         }
         this.keyModule = new KeyboardEvents(this.element, { keyAction: this.keyHandler.bind(this), keyConfigs: this.keyConfigs });
         this.tabKeyModule = new KeyboardEvents(this.element, {
@@ -8639,7 +8769,9 @@ let Tab = class Tab extends Component {
         }
     }
     swipeHandler(e) {
-        if (e.velocity < 3 && isNullOrUndefined(e.originalEvent.changedTouches)) {
+        if ((e.velocity < 3 && isNullOrUndefined(e.originalEvent.changedTouches)) ||
+            (this.swipeMode === 'Touch' && ((e.originalEvent.type === 'mouseup') || e.originalEvent.type === 'mouseleave')) ||
+            (this.swipeMode === 'Mouse' && e.originalEvent.type === 'touchend') || (this.swipeMode === 'None')) {
             return;
         }
         if (this.isNested) {
@@ -9229,7 +9361,7 @@ let Tab = class Tab extends Component {
                     this.items.splice((index + i), 0, item);
                     i++;
                 }
-                if (this.isTemplate && !isNullOrUndefined(item.header) && !isNullOrUndefined(item.header.text)) {
+                if (!isNullOrUndefined(item.header) && !isNullOrUndefined(item.header.text) && (this.isTemplate || this.loadOn === 'Init')) {
                     const no = lastEleIndex + place;
                     const ele = this.createElement('div', {
                         id: CLS_CONTENT$1 + this.tabId + '_' + no, className: CLS_ITEM$2,
@@ -9614,6 +9746,13 @@ let Tab = class Tab extends Component {
                 case 'allowDragAndDrop':
                     this.bindDraggable();
                     break;
+                case 'swipeMode':
+                    if (this.touchModule) {
+                        this.touchModule.destroy();
+                        this.touchModule = null;
+                    }
+                    this.bindSwipeEvents();
+                    break;
                 case 'dragArea':
                     if (this.allowDragAndDrop) {
                         this.draggableItems.forEach((item) => {
@@ -9766,6 +9905,9 @@ __decorate$7([
 __decorate$7([
     Property('100%')
 ], Tab.prototype, "width", void 0);
+__decorate$7([
+    Property('Both')
+], Tab.prototype, "swipeMode", void 0);
 __decorate$7([
     Property('auto')
 ], Tab.prototype, "height", void 0);
@@ -9785,7 +9927,7 @@ __decorate$7([
     Property('Scrollable')
 ], Tab.prototype, "overflowMode", void 0);
 __decorate$7([
-    Property('Dynamic')
+    Property('Demand')
 ], Tab.prototype, "loadOn", void 0);
 __decorate$7([
     Property(false)
@@ -10029,6 +10171,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         this.mouseDownStatus = false;
         this.isDropIn = false;
         this.OldCheckedData = [];
+        this.isHiddenItem = false;
     }
     /**
      * Get component name.
@@ -10515,10 +10658,6 @@ let TreeView = TreeView_1 = class TreeView extends Component {
                     this.changeState(node, 'uncheck', null, true, true);
                 }
             }
-            const parentElement = closest(node, '.' + PARENTITEM);
-            if (!isNullOrUndefined(parentElement)) {
-                this.ensureParentCheckState(closest(parentElement, '.' + LISTITEM));
-            }
         }
     }
     /**
@@ -11629,6 +11768,9 @@ let TreeView = TreeView_1 = class TreeView extends Component {
             this.expandArgs.isInteracted = this.isInteracted;
             this.trigger('nodeExpanded', this.expandArgs);
         }
+        if (this.isHiddenItem) {
+            this.collapseAll([this.getNodeData(currLi).id]);
+        }
     }
     addExpand(liEle) {
         liEle.setAttribute('aria-expanded', 'true');
@@ -12148,7 +12290,9 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         this.expandOnType = (this.expandOn === 'Auto') ? (Browser.isDevice ? 'Click' : 'DblClick') : this.expandOn;
     }
     expandHandler(e) {
-        const target = e.originalEvent.target;
+        const target = Browser.isDevice && e.originalEvent.changedTouches && !Browser.isIos
+            ? document.elementFromPoint(e.originalEvent.changedTouches[0].clientX, e.originalEvent.changedTouches[0].clientY)
+            : e.originalEvent.target;
         if (!target || target.classList.contains(INPUT) || target.classList.contains(ROOT) ||
             target.classList.contains(PARENTITEM) || target.classList.contains(LISTITEM) ||
             target.classList.contains(ICON) || this.showCheckBox && closest(target, '.' + CHECKBOXWRAP)) {
@@ -14482,15 +14626,6 @@ let TreeView = TreeView_1 = class TreeView extends Component {
             }
         }
     }
-    /**
-     * Checks whether the checkedNodes entered are valid and sets the valid checkedNodes while changing via setmodel(for hierarchical DS)
-     *
-     * @param {Object[]} childItems - The child items to check.
-     * @param {string} node - The node to set the check state for.
-     * @param {Object} [treeData] - The optional tree data.
-     * @returns {void}
-     * @private
-     */
     /**
      * Checks whether the checkedNodes entered are valid and sets the valid checkedNodes while changing via setmodel(for hierarchical DS)
      *
@@ -14964,9 +15099,11 @@ let TreeView = TreeView_1 = class TreeView extends Component {
                     const pid = getValue(this.fields.parentID, nodes[parseInt(i.toString(), 10)]);
                     dropLi = pid ? this.getElement(pid.toString()) : pid;
                     if (!isNullOrUndefined(pid) && isNullOrUndefined(dropLi)) {
+                        this.isHiddenItem = true;
                         this.preventExpand = false;
                         this.ensureVisible(pid);
                         this.preventExpand = preventTargetExpand;
+                        this.isHiddenItem = false;
                         dropLi = this.getElement(pid.toString());
                     }
                     this.addGivenNodes([nodes[parseInt(i.toString(), 10)]], dropLi, index);
@@ -15075,7 +15212,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         else if (this.dataType === 2) {
             parentsId = this.getHierarchicalParentId(node, this.treeData, parentsId);
         }
-        this.expandAll(parentsId.reverse());
+        this.expandAll(parentsId.reverse(), null, null, this.isHiddenItem);
         const liEle = this.getElement(node);
         if (!isNullOrUndefined(liEle)) {
             if (typeof node == 'object') {
@@ -15175,10 +15312,16 @@ let TreeView = TreeView_1 = class TreeView extends Component {
      * @returns {void}
      */
     moveNodes(sourceNodes, target, index, preventTargetExpand) {
-        const dropLi = this.getElement(target);
+        if (isNullOrUndefined(sourceNodes) || sourceNodes.length === 0) {
+            return;
+        }
+        let dropLi = this.getElement(target);
         const nodeData = [];
         if (isNullOrUndefined(dropLi)) {
-            return;
+            this.isHiddenItem = true;
+            this.ensureVisible(target);
+            this.isHiddenItem = false;
+            dropLi = this.getElement(target);
         }
         for (let i = 0; i < sourceNodes.length; i++) {
             const dragLi = this.getElement(sourceNodes[parseInt(i.toString(), 10)]);
@@ -17175,6 +17318,15 @@ let Carousel = class Carousel extends Component {
                         this.reRenderSlides();
                     }
                     break;
+                case 'allowKeyboardInteraction':
+                    if (this.keyModule) {
+                        this.keyModule.destroy();
+                        this.keyModule = null;
+                    }
+                    if (newProp.allowKeyboardInteraction) {
+                        this.renderKeyboardActions();
+                    }
+                    break;
                 case 'enableRtl':
                     rtlElement = [].slice.call(this.element.querySelectorAll(`.${CLS_PREV_BUTTON},
                 .${CLS_NEXT_BUTTON}, .${CLS_PLAY_BUTTON}`));
@@ -17542,6 +17694,9 @@ let Carousel = class Carousel extends Component {
         append(template, indicatorBar);
     }
     renderKeyboardActions() {
+        if (!this.allowKeyboardInteraction) {
+            return;
+        }
         this.keyModule = new KeyboardEvents(this.element, { keyAction: this.keyHandler.bind(this), keyConfigs: this.keyConfigs });
     }
     renderTouchActions() {
@@ -17858,6 +18013,9 @@ let Carousel = class Carousel extends Component {
         }
     }
     keyHandler(e) {
+        if (!this.allowKeyboardInteraction) {
+            return;
+        }
         let direction;
         let slideIndex;
         let isSlideTransition = false;
@@ -18005,6 +18163,7 @@ let Carousel = class Carousel extends Component {
         if (!this.timeStampStart) {
             this.timeStampStart = Date.now();
         }
+        e.preventDefault();
         this.isSwipe = false;
         this.itemsContainer.classList.add('e-swipe-start');
         this.prevPageX = e.touches ? e.touches[0].pageX : e.pageX;
@@ -18014,6 +18173,7 @@ let Carousel = class Carousel extends Component {
         if (!this.itemsContainer.classList.contains('e-swipe-start')) {
             return;
         }
+        this.isSwipe = true;
         e.preventDefault();
         const pageX = e.touches ? e.touches[0].pageX : e.pageX;
         const positionDiff = this.prevPageX - (pageX);
@@ -18026,7 +18186,6 @@ let Carousel = class Carousel extends Component {
         this.itemsContainer.style.transform = `translateX(${this.initialTranslate + (this.enableRtl ? positionDiff : -positionDiff)}px)`;
     }
     swipStop() {
-        this.isSwipe = true;
         const time = Date.now() - this.timeStampStart;
         let distanceX = this.getTranslateValue(this.itemsContainer) - this.initialTranslate;
         distanceX = distanceX < 0 ? distanceX * -1 : distanceX;
@@ -18210,8 +18369,10 @@ let Carousel = class Carousel extends Component {
             this.touchModule.destroy();
             this.touchModule = null;
         }
-        this.keyModule.destroy();
-        this.keyModule = null;
+        if (this.keyModule) {
+            this.keyModule.destroy();
+            this.keyModule = null;
+        }
         this.resetSlideInterval();
         this.destroyButtons();
         this.unWireEvents();
@@ -18276,6 +18437,9 @@ __decorate$b([
 __decorate$b([
     Property(true)
 ], Carousel.prototype, "enableTouchSwipe", void 0);
+__decorate$b([
+    Property(true)
+], Carousel.prototype, "allowKeyboardInteraction", void 0);
 __decorate$b([
     Property(true)
 ], Carousel.prototype, "showIndicators", void 0);
@@ -18512,6 +18676,10 @@ var __decorate$d = (undefined && undefined.__decorate) || function (decorators,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 const PROGRESSVALUE = '--progress-value';
+const PROGRESSPOS = '--progress-position';
+const VERTICALSTEP = 'e-vertical';
+const HORIZSTEP = 'e-horizontal';
+const ITEMLIST = 'e-stepper-steps';
 /**
  * Defines the status of the step.
  */
@@ -18624,8 +18792,8 @@ let StepperBase = class StepperBase extends Component {
     render() {
     }
     updateOrientaion(wrapper) {
-        if (wrapper.classList.contains('e-horizontal') || wrapper.classList.contains('e-vertical')) {
-            wrapper.classList.remove('e-horizontal', 'e-vertical');
+        if (wrapper.classList.contains(HORIZSTEP) || wrapper.classList.contains(VERTICALSTEP)) {
+            wrapper.classList.remove(HORIZSTEP, VERTICALSTEP);
         }
         if (!(isNullOrUndefined(this.orientation))) {
             wrapper.classList.add('e-' + this.orientation.toLocaleLowerCase());
@@ -18634,23 +18802,23 @@ let StepperBase = class StepperBase extends Component {
     renderProgressBar(wrapper) {
         this.progressStep = this.createElement('div', { className: 'e-stepper-progressbar' });
         this.progressbar = this.createElement('div', { className: 'e-progressbar-value' });
+        const beforeLabel = (wrapper.querySelector('li').querySelector('.e-step-label-container'));
         this.progressStep.appendChild(this.progressbar);
         wrapper.prepend(this.progressStep);
         this.progressbar.style.setProperty(PROGRESSVALUE, (0) + '%');
-        const beforeLabel = (wrapper.querySelector('li').querySelector('.e-step-label-container'));
-        if (wrapper.classList.contains('e-vertical')) {
+        if (wrapper.classList.contains(VERTICALSTEP)) {
             if (wrapper.classList.contains('e-label-bottom') || wrapper.classList.contains('e-label-top')) {
-                const stepsContainer = (wrapper.querySelector('.e-stepper-steps'));
-                this.progressStep.style.setProperty('--progress-position', (stepsContainer.offsetWidth / 2) + 'px');
+                const stepsContainer = (wrapper.querySelector('.' + ITEMLIST));
+                this.progressStep.style.setProperty(PROGRESSPOS, (stepsContainer.offsetWidth / 2) + 'px');
             }
             else {
-                this.progressStep.style.setProperty('--progress-position', ((this.progressBarPosition / 2) - 1) + 'px');
+                this.progressStep.style.setProperty(PROGRESSPOS, ((this.progressBarPosition / 2) - 1) + 'px');
             }
         }
         if (beforeLabel && (beforeLabel.classList.contains('e-label-before'))) {
-            this.progressStep.style.setProperty('--progress-position', (((this.progressBarPosition) - 1)) + 5 + 'px');
+            this.progressStep.style.setProperty(PROGRESSPOS, (((this.progressBarPosition) - 1)) + 5 + 'px');
         }
-        if (wrapper.classList.contains('e-horizontal')) {
+        if (wrapper.classList.contains(HORIZSTEP)) {
             this.setProgressPosition(wrapper);
         }
     }
@@ -18667,9 +18835,9 @@ let StepperBase = class StepperBase extends Component {
             }
             this.progressStep.style.setProperty('--progress-top-position', topPos + 'px');
         }
-        const lastEle = wrapper.querySelector('.e-stepper-steps').lastChild.firstChild;
+        const lastEle = wrapper.querySelector('.' + ITEMLIST).lastChild.firstChild;
         if (wrapper.classList.contains('e-rtl')) {
-            const leftPost = ((stepItemEle.offsetLeft + stepItemEle.offsetWidth) - wrapper.querySelector('.e-stepper-steps').offsetWidth);
+            const leftPost = ((stepItemEle.offsetLeft + stepItemEle.offsetWidth) - wrapper.querySelector('.' + ITEMLIST).offsetWidth);
             this.progressStep.style.setProperty('--progress-left-position', Math.abs(leftPost) + 'px');
             this.progressStep.style.setProperty('--progress-bar-width', Math.abs(lastEle.offsetLeft - stepItemEle.offsetLeft) + 'px');
         }
@@ -18716,7 +18884,7 @@ var __decorate$e = (undefined && undefined.__decorate) || function (decorators,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 const ITEMCONTAINER = 'e-step-container';
-const ITEMLIST = 'e-stepper-steps';
+const ITEMLIST$1 = 'e-stepper-steps';
 const ICONCSS = 'e-indicator';
 const TEXTCSS = 'e-step-text-container';
 const STEPLABEL = 'e-step-label-container';
@@ -18733,8 +18901,8 @@ const RTL$3 = 'e-rtl';
 const TEMPLATE = 'e-step-template';
 const LABELAFTER = 'e-label-after';
 const LABELBEFORE = 'e-label-before';
-const VERTICALSTEP = 'e-vertical';
-const HORIZSTEP = 'e-horizontal';
+const VERTICALSTEP$1 = 'e-vertical';
+const HORIZSTEP$1 = 'e-horizontal';
 const STEPICON = 'e-step-item';
 const STEPTEXT = 'e-step-text';
 const TEXT = 'e-text';
@@ -18865,7 +19033,7 @@ let Stepper = class Stepper extends StepperBase {
     initialize() {
         this.element.setAttribute('aria-label', this.element.id);
         this.updatePosition();
-        this.stepperItemList = this.createElement('ol', { className: ITEMLIST });
+        this.stepperItemList = this.createElement('ol', { className: ITEMLIST$1 });
         this.updateOrientaion(this.element);
         this.updateStepType();
         this.element.appendChild(this.stepperItemList);
@@ -18882,28 +19050,29 @@ let Stepper = class Stepper extends StepperBase {
         this.updateTemplateFunction();
         this.renderItems();
         if (this.steps.length > 0) {
-            if (this.steps.length > 1) {
-                if (this.isAngular && this.template) {
-                    setTimeout(() => {
-                        this.renderProgressBar(this.element);
-                    });
-                }
-                else {
-                    this.renderProgressBar(this.element);
-                }
-            }
+            this.initiateProgressBar();
             this.checkValidStep();
             this.updateAnimation();
             this.updateTooltip();
             this.wireKeyboardEvent();
         }
     }
+    initiateProgressBar() {
+        if (this.steps.length > 1) {
+            if (this.isAngular && this.template) {
+                setTimeout(() => { this.renderProgressBar(this.element); });
+            }
+            else {
+                this.renderProgressBar(this.element);
+            }
+        }
+    }
     updatePosition() {
         this.progressBarPosition = this.beforeLabelWidth = this.textEleWidth = 0;
     }
     renderDefault(index) {
-        return (!this.steps[parseInt((index).toString(), 10)].iconCss && !this.steps[parseInt((index).toString(), 10)].text &&
-            !this.steps[parseInt((index).toString(), 10)].label) ? true : false;
+        const step = this.steps[parseInt(index.toString(), 10)];
+        return !step.iconCss && !step.text && !step.label;
     }
     updateAnimation() {
         const progressEle = this.element.querySelector('.e-progressbar-value');
@@ -18927,12 +19096,16 @@ let Stepper = class Stepper extends StepperBase {
         }
     }
     updateStepType() {
-        if (!(isNullOrUndefined(this.stepType)) && (this.stepType.toLowerCase() === 'indicator' || this.stepType.toLowerCase() === 'label' || this.stepType.toLowerCase() === 'default')) {
-            if (this.stepType.toLowerCase() !== 'default') {
-                this.element.classList.add('e-step-type-' + this.stepType.toLowerCase());
-            }
-            if (((this.stepType.toLowerCase() === 'indicator' || 'label') && (this.labelContainer))) {
-                this.clearLabelPosition();
+        if (!isNullOrUndefined(this.stepType)) {
+            const stepTypeLower = this.stepType.toLowerCase();
+            const validStepTypes = ['indicator', 'label', 'default'];
+            if (validStepTypes.indexOf(stepTypeLower) !== -1) {
+                if (stepTypeLower !== 'default') {
+                    this.element.classList.add('e-step-type-' + stepTypeLower);
+                }
+                if ((stepTypeLower === 'indicator' || stepTypeLower === 'label') && this.labelContainer) {
+                    this.clearLabelPosition();
+                }
             }
         }
     }
@@ -18945,7 +19118,7 @@ let Stepper = class Stepper extends StepperBase {
         EventHandler.remove(window, 'click', this.updateStepFocus);
     }
     updateResize() {
-        if (this.stepperItemList && this.progressbar && this.element.classList.contains(HORIZSTEP)) {
+        if (this.stepperItemList && this.progressbar && this.element.classList.contains(HORIZSTEP$1)) {
             this.setProgressPosition(this.element, true);
         }
         this.navigateToStep(this.activeStep, null, null, false, false);
@@ -19004,19 +19177,23 @@ let Stepper = class Stepper extends StepperBase {
         }
     }
     renderItems() {
+        const isHorizontal = this.element.classList.contains(HORIZSTEP$1);
+        const isVertical = this.element.classList.contains(VERTICALSTEP$1);
+        const labelPositionLower = !isNullOrUndefined(this.labelPosition) ? this.labelPosition.toLowerCase() : '';
         for (let index = 0; index < this.steps.length; index++) {
             this.stepperItemContainer = this.createElement('li', { className: ITEMCONTAINER });
-            this.stepperItemContainer.classList[(index === 0) ? 'add' : 'remove'](SELECTED$2, INPROGRESS);
-            this.stepperItemContainer.classList[(index !== 0) ? 'add' : 'remove'](NOTSTARTED);
-            if (this.element.classList.contains(HORIZSTEP)) {
-                this.stepperItemContainer.style.setProperty('--max-width', 100 / this.steps.length + '%');
-            }
             const stepSpan = this.createElement('span', { className: 'e-step' });
             const item = this.steps[parseInt(index.toString(), 10)];
             let isItemLabel = item.label ? true : false;
             let isItemText = item.text ? true : false;
+            const isIndicator = this.element.classList.contains(STEPINDICATOR);
+            this.stepperItemContainer.classList[(index === 0) ? 'add' : 'remove'](SELECTED$2, INPROGRESS);
+            this.stepperItemContainer.classList[(index !== 0) ? 'add' : 'remove'](NOTSTARTED);
+            if (isHorizontal) {
+                this.stepperItemContainer.style.setProperty('--max-width', 100 / this.steps.length + '%');
+            }
             if (this.renderDefault(index) && (isNullOrUndefined(this.template) || this.template === '')) {
-                const isIndicator = (!this.element.classList.contains('e-step-type-default') && this.stepType.toLowerCase() === 'indicator') ? true : false;
+                const isIndicator = !this.element.classList.contains('e-step-type-default') && this.stepType.toLowerCase() === 'indicator';
                 if (isIndicator) {
                     stepSpan.classList.add('e-icons', INDICATORICON);
                 }
@@ -19032,10 +19209,7 @@ let Stepper = class Stepper extends StepperBase {
                     !this.element.classList.contains(LABELINDICATOR)))) {
                     if (item.iconCss) {
                         const itemIcon = item.iconCss.trim().split(' ');
-                        stepSpan.classList.add(ICONCSS);
-                        for (let i = 0; i < itemIcon.length; i++) {
-                            stepSpan.classList.add(itemIcon[parseInt(i.toString(), 10)]);
-                        }
+                        stepSpan.classList.add(ICONCSS, ...itemIcon);
                         this.stepperItemContainer.classList.add(STEPICON);
                     }
                     else if (!item.iconCss && isItemText && isItemLabel) {
@@ -19044,51 +19218,41 @@ let Stepper = class Stepper extends StepperBase {
                         this.stepperItemContainer.classList.add(STEPICON);
                     }
                     this.stepperItemContainer.appendChild(stepSpan);
-                    if ((this.element.classList.contains(HORIZSTEP) && (this.labelPosition.toLowerCase() === 'start' || this.labelPosition.toLowerCase() === 'end') && isItemLabel) ||
-                        (this.element.classList.contains(VERTICALSTEP) && (this.labelPosition.toLowerCase() === 'top' || this.labelPosition.toLowerCase() === 'bottom') && isItemLabel)) {
-                        this.element.classList.add('e-label-' + this.labelPosition.toLowerCase());
-                        const textSpan = this.createElement('span', { className: TEXTCSS + ' ' + TEXT });
-                        textSpan.innerText = item.label;
-                        this.stepperItemContainer.appendChild(textSpan);
-                        this.stepperItemContainer.classList.add(STEPTEXT);
+                    if (((isHorizontal && (labelPositionLower === 'start' || labelPositionLower === 'end') && isItemLabel) ||
+                        (isVertical && (labelPositionLower === 'top' || labelPositionLower === 'bottom') && isItemLabel)) && !isIndicator) {
+                        this.element.classList.add('e-label-' + labelPositionLower);
+                        this.createTextLabelElement(item.label);
                         isRender = false;
                     }
                 }
-                if (isItemText && (!item.iconCss || !this.element.classList.contains(STEPINDICATOR)) && isRender &&
+                if (isItemText && (!item.iconCss || !isIndicator) && isRender &&
                     !(item.iconCss && isItemLabel)) {
-                    if ((!item.iconCss && this.element.classList.contains(STEPINDICATOR)) ||
+                    if ((!item.iconCss && isIndicator) ||
                         ((!item.iconCss || this.element.classList.contains(LABELINDICATOR)) && !isItemLabel)) {
                         if (!item.iconCss && !isItemLabel) {
                             this.element.classList.add('e-step-type-indicator');
                         }
                         this.checkValidState(item, stepSpan);
-                        isItemLabel = null;
+                        isItemLabel = false;
                     }
                     else {
-                        const textSpan = this.createElement('span', { className: TEXT });
                         if (!isItemLabel) {
-                            textSpan.innerText = item.text;
-                            textSpan.classList.add(TEXTCSS);
-                            this.stepperItemContainer.appendChild(textSpan);
-                            this.stepperItemContainer.classList.add(STEPTEXT);
+                            this.createTextLabelElement(item.text);
                         }
                         if (isItemLabel && this.element.classList.contains(LABELINDICATOR)) {
+                            const textSpan = this.createElement('span', { className: TEXT });
                             textSpan.innerText = item.label;
                         }
-                        isItemText = item.label ? false : true;
+                        isItemText = isItemLabel ? false : true;
                     }
                 }
-                if (isItemLabel && (!item.iconCss || !this.element.classList.contains(STEPINDICATOR)) && isRender) {
-                    if (!item.iconCss && !isItemText && this.element.classList.contains(STEPINDICATOR)) {
+                if (isItemLabel && isItemLabel && (!item.iconCss || !isIndicator) && isRender) {
+                    if (!item.iconCss && !isItemText && isIndicator) {
                         this.checkValidState(item, stepSpan, true);
                     }
                     else if ((!((this.element.classList.contains(LABELINDICATOR)) && isItemText)) ||
                         (this.element.classList.contains(LABELINDICATOR) && isItemLabel)) {
-                        this.labelContainer = this.createElement('span', { className: STEPLABEL });
-                        const labelSpan = this.createElement('span', { className: LABEL });
-                        labelSpan.innerText = item.label;
-                        this.labelContainer.appendChild(labelSpan);
-                        this.stepperItemContainer.classList.add(STEPSLABEL);
+                        this.createTextLabelElement(item.label, true);
                         this.updateLabelPosition();
                         if ((!item.iconCss && !isItemText && !this.stepperItemContainer.classList.contains(STEPICON)) ||
                             this.element.classList.contains(LABELINDICATOR)) {
@@ -19107,8 +19271,8 @@ let Stepper = class Stepper extends StepperBase {
                 const optionalContent = this.l10n.getConstant('optional');
                 optionalSpan.innerText = optionalContent;
                 if (isItemLabel && (this.labelContainer && ((this.element.classList.contains(LABELAFTER) && !this.stepperItemContainer.classList.contains('e-step-label-only'))
-                    || (this.element.classList.contains(HORIZSTEP) && this.element.classList.contains(LABELBEFORE) && !this.stepperItemContainer.classList.contains('e-step-label-only'))))
-                    || (this.element.classList.contains(VERTICALSTEP) && this.element.classList.contains(LABELBEFORE))) {
+                    || (isHorizontal && this.element.classList.contains(LABELBEFORE) && !this.stepperItemContainer.classList.contains('e-step-label-only'))))
+                    || (isVertical && this.element.classList.contains(LABELBEFORE))) {
                     this.labelContainer.appendChild(optionalSpan);
                 }
                 else {
@@ -19146,16 +19310,16 @@ let Stepper = class Stepper extends StepperBase {
             this.trigger('beforeStepRender', eventArgs, (args) => {
                 this.stepperItemList.appendChild(args.element);
             });
-            if (this.isAngular && this.template) {
-                setTimeout(() => {
+            if (isVertical) {
+                if (this.isAngular && this.template) {
+                    setTimeout(() => { this.calculateProgressBarPosition(); });
+                }
+                else {
                     this.calculateProgressBarPosition();
-                });
-            }
-            else {
-                this.calculateProgressBarPosition();
+                }
             }
         }
-        if (this.element.classList.contains(VERTICALSTEP)) {
+        if (isVertical) {
             if (this.element.classList.contains(LABELBEFORE)) {
                 const listItems = this.stepperItemList.querySelectorAll('.' + LABEL);
                 for (let i = 0; i < listItems.length; i++) {
@@ -19165,37 +19329,47 @@ let Stepper = class Stepper extends StepperBase {
             }
         }
     }
+    createTextLabelElement(content, isLabelEle = false) {
+        const spanEle = this.createElement('span', { className: isLabelEle ? LABEL : `${TEXTCSS} ${TEXT}` });
+        spanEle.innerText = content;
+        if (isLabelEle) {
+            this.labelContainer = this.createElement('span', { className: STEPLABEL });
+            this.labelContainer.appendChild(spanEle);
+        }
+        else {
+            this.stepperItemContainer.appendChild(spanEle);
+        }
+        this.stepperItemContainer.classList.add(isLabelEle ? STEPSLABEL : STEPTEXT);
+    }
     calculateProgressBarPosition() {
         const isBeforeLabel = (this.element.classList.contains(LABELBEFORE)) ? true : false;
-        const isStepVertical = (this.element.classList.contains(VERTICALSTEP)) ? true : false;
-        if (isStepVertical) {
-            const iconOnly = (this.stepperItemContainer.classList.contains(STEPICON) &&
-                !this.stepperItemContainer.classList.contains(STEPTEXT) &&
-                !this.stepperItemContainer.classList.contains(STEPSLABEL)) ? true : false;
-            const textEle = (this.stepperItemContainer.querySelector('.' + TEXTCSS));
-            if (textEle) {
-                this.textEleWidth = this.textEleWidth < textEle.offsetWidth ? textEle.offsetWidth : this.textEleWidth;
+        const iconOnly = (this.stepperItemContainer.classList.contains(STEPICON) &&
+            !this.stepperItemContainer.classList.contains(STEPTEXT) &&
+            !this.stepperItemContainer.classList.contains(STEPSLABEL));
+        const textEle = (this.stepperItemContainer.querySelector('.' + TEXTCSS));
+        if (textEle) {
+            this.textEleWidth = this.textEleWidth < textEle.offsetWidth ? textEle.offsetWidth : this.textEleWidth;
+        }
+        if (isBeforeLabel) {
+            const labelWidth = this.stepperItemContainer.querySelector('.' + LABEL).offsetWidth + 15;
+            this.beforeLabelWidth = Math.max(this.beforeLabelWidth, labelWidth);
+            const iconEle = this.element.querySelector('ol').lastChild.querySelector('.' + ICONCSS);
+            const textEle = this.stepperItemContainer.querySelector('.' + TEXTCSS);
+            if (iconEle || textEle) {
+                const itemWidth = this.beforeLabelWidth + ((this.stepperItemContainer.querySelector('.' + ICONCSS)
+                    || textEle).offsetWidth / 2);
+                this.progressBarPosition = Math.max(this.progressBarPosition, itemWidth);
             }
-            if (isBeforeLabel) {
-                let itemWidth;
-                const labelWidth = this.stepperItemContainer.querySelector('.' + LABEL).offsetWidth + 15;
-                if (this.beforeLabelWidth < labelWidth) {
-                    this.beforeLabelWidth = labelWidth;
-                }
-                if (this.element.querySelector('ol').lastChild.querySelector('.' + ICONCSS)) {
-                    itemWidth = (this.beforeLabelWidth + (this.stepperItemContainer.querySelector('.' + ICONCSS).offsetWidth / 2));
-                }
-                else if (this.stepperItemContainer.querySelector('.' + TEXTCSS)) {
-                    itemWidth = (this.beforeLabelWidth + (this.stepperItemContainer.querySelector('.' + TEXTCSS).offsetWidth / 2));
-                }
-                if (this.progressBarPosition < itemWidth) {
-                    this.progressBarPosition = itemWidth;
-                }
-            }
-            else if (this.progressBarPosition < (iconOnly ? this.stepperItemContainer.offsetWidth : this.element.querySelector('ol').lastChild.firstChild.offsetWidth)) {
-                this.progressBarPosition = iconOnly ? this.stepperItemContainer.offsetWidth : this.element.querySelector('ol').lastChild.firstChild.offsetWidth;
+            else {
+                this.progressBarPosition = Math.max(this.progressBarPosition, (this.beforeLabelWidth / 2));
             }
         }
+        else {
+            const lastChild = this.element.querySelector('ol').lastChild;
+            const lastChildWidth = iconOnly ? this.stepperItemContainer.offsetWidth :
+                lastChild.firstChild.offsetWidth;
+            this.progressBarPosition = Math.max(this.progressBarPosition, lastChildWidth);
+        }
     }
     checkValidState(item, stepSpan, isLabel) {
         if (item.isValid == null) {
@@ -19215,13 +19389,10 @@ let Stepper = class Stepper extends StepperBase {
         }
     }
     updateCurrentLabel() {
-        let currentLabelPos;
-        if (this.element.classList.contains(HORIZSTEP)) {
-            currentLabelPos = this.labelPosition.toLowerCase() === 'top' ? 'before' : this.labelPosition.toLowerCase() === 'bottom' ? 'after' : this.labelPosition.toLowerCase();
-        }
-        else {
-            currentLabelPos = this.labelPosition.toLowerCase() === 'start' ? 'before' : this.labelPosition.toLowerCase() === 'end' ? 'after' : this.labelPosition.toLowerCase();
-        }
+        const labelPos = this.labelPosition.toLowerCase();
+        const currentLabelPos = this.element.classList.contains(HORIZSTEP$1)
+            ? (labelPos === 'top' ? 'before' : labelPos === 'bottom' ? 'after' : labelPos)
+            : (labelPos === 'start' ? 'before' : labelPos === 'end' ? 'after' : labelPos);
         return currentLabelPos;
     }
     updateLabelPosition() {
@@ -19248,49 +19419,49 @@ let Stepper = class Stepper extends StepperBase {
         }
     }
     checkValidStep() {
+        const isStepIndicator = this.element.classList.contains(STEPINDICATOR);
         for (let index = 0; index < this.steps.length; index++) {
             const item = this.steps[parseInt(index.toString(), 10)];
             const itemElement = this.stepperItemElements[parseInt(index.toString(), 10)];
             if (item.isValid !== null) {
                 let indicatorEle;
                 let iconEle;
-                if (this.element.classList.contains(STEPINDICATOR) && !item.iconCss) {
+                if (isStepIndicator && !item.iconCss) {
                     indicatorEle = itemElement.querySelector('.' + ICONCSS);
                 }
                 else {
                     iconEle = itemElement.querySelector('.' + ICONCSS);
                 }
-                if (!indicatorEle && this.element.classList.contains(STEPINDICATOR) && this.renderDefault(index)) {
+                if (!indicatorEle && isStepIndicator && this.renderDefault(index)) {
                     indicatorEle = itemElement.querySelector('.' + INDICATORICON);
                 }
                 const textLabelIcon = itemElement.querySelector('.e-step-validation-icon');
                 const itemIcon = item.iconCss.trim().split(' ');
                 const validStep = itemElement.classList.contains('e-step-valid');
+                const validIconClass = validStep ? 'e-check' : 'e-circle-info';
                 if (indicatorEle) {
                     indicatorEle.classList.remove(INDICATORICON);
                     if (indicatorEle.innerHTML !== '') {
                         indicatorEle.innerHTML = '';
                     }
-                    indicatorEle.classList.add('e-icons', validStep ? 'e-check' : 'e-circle-info', ICONCSS);
+                    indicatorEle.classList.add('e-icons', validIconClass, ICONCSS);
                 }
-                if (this.renderDefault(index) && !this.element.classList.contains(STEPINDICATOR)) {
+                if (this.renderDefault(index) && !isStepIndicator) {
                     const stepSpan = itemElement.querySelector('.e-step');
-                    stepSpan.classList.add('e-icons', validStep ? 'e-check' : 'e-circle-info', ICONCSS);
+                    stepSpan.classList.add('e-icons', validIconClass, ICONCSS);
                 }
                 if (iconEle) {
                     if (iconEle.innerHTML !== '') {
                         iconEle.innerHTML = '';
                     }
                     else if (itemIcon.length > 0) {
-                        for (let i = 0; i < itemIcon.length; i++) {
-                            iconEle.classList.remove(itemIcon[parseInt(i.toString(), 10)]);
-                        }
+                        itemIcon.forEach((icon) => { iconEle.classList.remove(icon); });
                     }
-                    iconEle.classList.add('e-icons', validStep ? 'e-check' : 'e-circle-info');
+                    iconEle.classList.add('e-icons', validIconClass);
                 }
                 if (textLabelIcon) {
                     textLabelIcon.classList.add(validStep ? 'e-circle-check' : 'e-circle-info');
-                    if (this.element.classList.contains(VERTICALSTEP)) {
+                    if (this.element.classList.contains(VERTICALSTEP$1)) {
                         const labelEle = itemElement.querySelector('.' + LABEL);
                         const textEle = itemElement.querySelector('.' + TEXT);
                         const itemWidth = textEle ? textEle.offsetWidth + textEle.getBoundingClientRect().left :
@@ -19319,19 +19490,28 @@ let Stepper = class Stepper extends StepperBase {
         }
     }
     wireItemsEvents(itemElement, index) {
-        EventHandler.add(itemElement, 'click', (e) => {
-            if (this.linear) {
-                const linearModeValue = index - this.activeStep;
-                if (Math.abs(linearModeValue) === 1) {
-                    this.stepClickHandler(index, e, itemElement);
-                }
-            }
-            else {
+        EventHandler.add(itemElement, 'click', this.linearModeHandler.bind(this, itemElement, index), this);
+        EventHandler.add(itemElement, 'mouseover', this.openStepperTooltip.bind(this, index), this);
+        EventHandler.add(itemElement, 'mouseleave', this.closeStepperTooltip, this);
+    }
+    unWireItemsEvents() {
+        for (let index = 0; index < this.steps.length; index++) {
+            const itemElement = this.stepperItemElements[parseInt(index.toString(), 10)];
+            EventHandler.remove(itemElement, 'click', this.linearModeHandler.bind(this, itemElement, index));
+            EventHandler.remove(itemElement, 'mouseover', this.openStepperTooltip.bind(this, index));
+            EventHandler.remove(itemElement, 'mouseleave', this.closeStepperTooltip);
+        }
+    }
+    linearModeHandler(itemElement, index, e) {
+        if (this.linear) {
+            const linearModeValue = index - this.activeStep;
+            if (Math.abs(linearModeValue) === 1) {
                 this.stepClickHandler(index, e, itemElement);
             }
-        }, this);
-        EventHandler.add(itemElement, 'mouseover', () => this.openStepperTooltip(index), this);
-        EventHandler.add(itemElement, 'mouseleave', () => this.closeStepperTooltip(), this);
+        }
+        else {
+            this.stepClickHandler(index, e, itemElement);
+        }
     }
     openStepperTooltip(index) {
         const currentStep = this.steps[parseInt(index.toString(), 10)];
@@ -19472,7 +19652,7 @@ let Stepper = class Stepper extends StepperBase {
         }
     }
     navigationHandler(index, stepStatus, isUpdated) {
-        index = (index >= this.steps.length - 1) ? this.steps.length - 1 : index;
+        index = Math.min(index, this.steps.length - 1);
         const Itemslength = this.stepperItemElements.length;
         if (index >= 0 && index < Itemslength - 1) {
             index = this.stepperItemElements[parseInt(index.toString(), 10)].classList.contains(DISABLED$2) ? this.activeStep : index;
@@ -19489,46 +19669,8 @@ let Stepper = class Stepper extends StepperBase {
                 itemElement.classList.add(SELECTED$2);
             }
             if (this.activeStep >= 0 && this.progressbar) {
-                if (this.element.classList.contains(HORIZSTEP)) {
-                    if ((this.element.classList.contains(LABELBEFORE) || this.element.classList.contains(LABELAFTER)) &&
-                        !this.element.classList.contains(STEPINDICATOR) &&
-                        this.stepperItemElements[parseInt(this.activeStep.toString(), 10)].classList.contains(STEPICON)) {
-                        const progressPos = this.element.querySelector('.e-stepper-progressbar');
-                        const selectedEle = this.stepperItemElements[parseInt(this.activeStep.toString(), 10)]
-                            .firstChild;
-                        let value = this.activeStep === 0 ? 0 : (selectedEle.offsetLeft - progressPos.offsetLeft +
-                            (selectedEle.offsetWidth / 2)) / progressPos.offsetWidth * 100;
-                        if (this.element.classList.contains(RTL$3)) {
-                            value = (progressPos.getBoundingClientRect().right - selectedEle.getBoundingClientRect().right +
-                                (selectedEle.offsetWidth / 2)) / progressPos.offsetWidth * 100;
-                            this.progressbar.style.setProperty(PROGRESSVALUE$1, (value) + '%');
-                        }
-                        else {
-                            this.progressbar.style.setProperty(PROGRESSVALUE$1, (value) + '%');
-                        }
-                    }
-                    else {
-                        let totalLiWidth = 0;
-                        let activeLiWidth = 0;
-                        for (let j = 0; j < this.stepperItemElements.length; j++) {
-                            totalLiWidth = totalLiWidth + this.stepperItemElements[parseInt(j.toString(), 10)].offsetWidth;
-                            if (j <= this.activeStep) {
-                                if (j < this.activeStep) {
-                                    activeLiWidth = activeLiWidth +
-                                        this.stepperItemElements[parseInt(j.toString(), 10)].offsetWidth;
-                                }
-                                else if (j === this.activeStep && j !== 0) {
-                                    activeLiWidth = activeLiWidth +
-                                        (this.stepperItemElements[parseInt(j.toString(), 10)].offsetWidth / 2);
-                                }
-                            }
-                        }
-                        const spaceWidth = (this.stepperItemList.offsetWidth - totalLiWidth) /
-                            (this.stepperItemElements.length - 1);
-                        const progressValue = ((activeLiWidth + (spaceWidth * this.activeStep)) /
-                            this.stepperItemList.offsetWidth) * 100;
-                        this.progressbar.style.setProperty(PROGRESSVALUE$1, (progressValue) + '%');
-                    }
+                if (this.element.classList.contains(HORIZSTEP$1)) {
+                    this.calculateProgressbarPos();
                 }
                 else {
                     this.progressbar.style.setProperty(PROGRESSVALUE$1, ((100 / (this.steps.length - 1)) * index) + '%');
@@ -19577,26 +19719,63 @@ let Stepper = class Stepper extends StepperBase {
                 }
             }
             this.isProtectedOnChange = prevOnChange;
-            if (this.renderDefault(i) && this.element.classList.contains(STEPINDICATOR) && !itemElement.classList.contains('e-step-valid') && !itemElement.classList.contains('e-step-error')) {
-                if (itemElement.classList.contains(COMPLETED)) {
-                    itemElement.firstChild.classList.remove('e-icons', 'e-step-indicator');
-                    itemElement.firstChild.classList.add(ICONCSS, 'e-icons', 'e-check');
-                }
-                else if (itemElement.classList.contains(INPROGRESS) || itemElement.classList.contains(NOTSTARTED)) {
-                    itemElement.firstChild.classList.remove(ICONCSS, 'e-icons', 'e-check');
-                    itemElement.firstChild.classList.add('e-icons', 'e-step-indicator');
+            this.updateIndicatorStatus(i, itemElement);
+        }
+        this.updateStepInteractions();
+    }
+    calculateProgressbarPos() {
+        if ((this.element.classList.contains(LABELBEFORE) || this.element.classList.contains(LABELAFTER)) &&
+            !this.element.classList.contains(STEPINDICATOR) &&
+            this.stepperItemElements[parseInt(this.activeStep.toString(), 10)].classList.contains(STEPICON)) {
+            const progressPos = this.element.querySelector('.e-stepper-progressbar');
+            const selectedEle = this.stepperItemElements[parseInt(this.activeStep.toString(), 10)]
+                .firstChild;
+            let value = this.activeStep === 0 ? 0 : (selectedEle.offsetLeft - progressPos.offsetLeft +
+                (selectedEle.offsetWidth / 2)) / progressPos.offsetWidth * 100;
+            if (this.element.classList.contains(RTL$3)) {
+                value = (progressPos.getBoundingClientRect().right - selectedEle.getBoundingClientRect().right +
+                    (selectedEle.offsetWidth / 2)) / progressPos.offsetWidth * 100;
+                this.progressbar.style.setProperty(PROGRESSVALUE$1, (value) + '%');
+            }
+            else {
+                this.progressbar.style.setProperty(PROGRESSVALUE$1, (value) + '%');
+            }
+        }
+        else {
+            let totalLiWidth = 0;
+            let activeLiWidth = 0;
+            this.stepperItemElements.forEach((element, index) => {
+                const itemWidth = element.offsetWidth;
+                totalLiWidth += itemWidth;
+                if (index <= this.activeStep) {
+                    activeLiWidth += (index === this.activeStep && index !== 0) ? (itemWidth / 2) : itemWidth;
                 }
+            });
+            const spaceWidth = (this.stepperItemList.offsetWidth - totalLiWidth) /
+                (this.stepperItemElements.length - 1);
+            const progressValue = ((activeLiWidth + (spaceWidth * this.activeStep)) /
+                this.stepperItemList.offsetWidth) * 100;
+            this.progressbar.style.setProperty(PROGRESSVALUE$1, (progressValue) + '%');
+        }
+    }
+    updateIndicatorStatus(index, itemElement) {
+        if (this.renderDefault(index) && this.element.classList.contains(STEPINDICATOR) && !itemElement.classList.contains('e-step-valid')
+            && !itemElement.classList.contains('e-step-error')) {
+            if (itemElement.classList.contains(COMPLETED)) {
+                itemElement.firstChild.classList.remove('e-icons', 'e-step-indicator');
+                itemElement.firstChild.classList.add(ICONCSS, 'e-icons', 'e-check');
+            }
+            else if (itemElement.classList.contains(INPROGRESS) || itemElement.classList.contains(NOTSTARTED)) {
+                itemElement.firstChild.classList.remove(ICONCSS, 'e-icons', 'e-check');
+                itemElement.firstChild.classList.add('e-icons', 'e-step-indicator');
             }
         }
-        this.updateStepInteractions();
     }
     updateStepInteractions() {
         this.element.classList.toggle(LINEARSTEP, this.linear);
         this.stepperItemElements.forEach((step, index) => {
-            const isPreviousStep = (index === this.activeStep - 1);
-            const isNextStep = (index === this.activeStep + 1);
-            step.classList.toggle(PREVSTEP, isPreviousStep);
-            step.classList.toggle(NEXTSTEP, isNextStep);
+            step.classList.toggle(PREVSTEP, (index === this.activeStep - 1));
+            step.classList.toggle(NEXTSTEP, (index === this.activeStep + 1));
         });
     }
     removeItemElements() {
@@ -19652,7 +19831,7 @@ let Stepper = class Stepper extends StepperBase {
     }
     updateElementClassArray() {
         const classArray = [RTL$3, READONLY, 'e-steps-focus', LABELAFTER, LABELBEFORE, 'e-label-top',
-            'e-label-bottom', 'e-label-start', 'e-label-end', STEPINDICATOR, LABELINDICATOR, VERTICALSTEP, HORIZSTEP, LINEARSTEP];
+            'e-label-bottom', 'e-label-start', 'e-label-end', STEPINDICATOR, LABELINDICATOR, VERTICALSTEP$1, HORIZSTEP$1, LINEARSTEP];
         removeClass([this.element], classArray);
     }
     /**
@@ -19663,6 +19842,7 @@ let Stepper = class Stepper extends StepperBase {
     destroy() {
         super.destroy();
         this.unWireEvents();
+        this.unWireItemsEvents();
         // unwires the events and detach the li elements
         this.removeItemElements();
         this.clearTemplate();
@@ -19708,7 +19888,7 @@ let Stepper = class Stepper extends StepperBase {
             case 'rightarrow':
             case 'tab':
             case 'shiftTab':
-                this.handleNavigation(this.enableRtl && this.element.classList.contains(HORIZSTEP) ? (e.action === 'leftarrow' || e.action === 'tab' || e.action === 'uparrow') : (e.action === 'rightarrow' || e.action === 'tab' || e.action === 'downarrow'), e);
+                this.handleNavigation(this.enableRtl && this.element.classList.contains(HORIZSTEP$1) ? (e.action === 'leftarrow' || e.action === 'tab' || e.action === 'uparrow') : (e.action === 'rightarrow' || e.action === 'tab' || e.action === 'downarrow'), e);
                 break;
             case 'space':
             case 'enter':
@@ -19809,6 +19989,66 @@ let Stepper = class Stepper extends StepperBase {
         this.updateAnimation();
         this.navigateToStep(this.activeStep, null, this.stepperItemElements[this.activeStep], true);
     }
+    updateDynamicSteps(steps, prevSteps) {
+        if (!(steps instanceof Array && prevSteps instanceof Array)) {
+            const stepCounts = Object.keys(steps);
+            for (let i = 0; i < stepCounts.length; i++) {
+                const index = parseInt(Object.keys(steps)[i], 10);
+                const changedPropsCount = Object.keys(steps[index]).length;
+                for (let j = 0; j < changedPropsCount; j++) {
+                    const property = Object.keys(steps[index])[j];
+                    if (property === 'status') {
+                        if (this.activeStep === index) {
+                            this.navigationHandler(index, steps[index].status);
+                        }
+                        else {
+                            this.steps[index].status = prevSteps[index].status;
+                        }
+                    }
+                    else {
+                        this.removeItemElements();
+                        this.renderItems();
+                        this.updateStepperStatus();
+                    }
+                    if (property === 'label' && (this.steps[index].iconCss || this.steps[index].text) &&
+                        this.stepType.toLowerCase() === 'default') {
+                        this.refreshProgressbar();
+                    }
+                    this.updateStepInteractions();
+                    this.checkValidStep();
+                }
+            }
+        }
+        else {
+            this.renderStepperItems(true, true);
+        }
+    }
+    updateDynamicActiveStep(activeStep, preActiveStep) {
+        this.activeStep = (activeStep > this.steps.length - 1 || activeStep < -1) ? preActiveStep : this.activeStep;
+        if (this.activeStep >= 0 && this.stepperItemElements[parseInt(this.activeStep.toString(), 10)].classList.contains(DISABLED$2)) {
+            this.activeStep = preActiveStep;
+        }
+        if (this.linear) {
+            const linearModeValue = preActiveStep - this.activeStep;
+            if (Math.abs(linearModeValue) === 1) {
+                this.navigateToStep(this.activeStep, null, null, true);
+            }
+        }
+        else {
+            this.navigateToStep(this.activeStep, null, this.stepperItemElements[this.activeStep], true);
+        }
+    }
+    updateDynamicCssClass(cssClass, prevCssClass) {
+        if (prevCssClass) {
+            removeClass([this.element], prevCssClass.trim().split(' '));
+        }
+        if (cssClass) {
+            addClass([this.element], cssClass.trim().split(' '));
+        }
+        if (this.tooltipObj) {
+            this.tooltipObj.setProperties({ cssClass: this.cssClass ? (STEPPERTOOLTIP + ' ' + this.cssClass) : STEPPERTOOLTIP });
+        }
+    }
     /**
      * Called internally if any of the property value changed.
      *
@@ -19821,38 +20061,7 @@ let Stepper = class Stepper extends StepperBase {
         for (const prop of Object.keys(newProp)) {
             switch (prop) {
                 case 'steps': {
-                    if (!(newProp.steps instanceof Array && oldProp.steps instanceof Array)) {
-                        const stepCounts = Object.keys(newProp.steps);
-                        for (let i = 0; i < stepCounts.length; i++) {
-                            const index = parseInt(Object.keys(newProp.steps)[i], 10);
-                            const changedPropsCount = Object.keys(newProp.steps[index]).length;
-                            for (let j = 0; j < changedPropsCount; j++) {
-                                const property = Object.keys(newProp.steps[index])[j];
-                                if (property === 'status') {
-                                    if (this.activeStep === index) {
-                                        this.navigationHandler(index, newProp.steps[index].status);
-                                    }
-                                    else {
-                                        this.steps[index].status = oldProp.steps[index].status;
-                                    }
-                                }
-                                else {
-                                    this.removeItemElements();
-                                    this.renderItems();
-                                    this.updateStepperStatus();
-                                }
-                                if (property === 'label' && (this.steps[index].iconCss || this.steps[index].text) &&
-                                    this.stepType.toLowerCase() === 'default') {
-                                    this.refreshProgressbar();
-                                }
-                                this.updateStepInteractions();
-                                this.checkValidStep();
-                            }
-                        }
-                    }
-                    else {
-                        this.renderStepperItems(true, true);
-                    }
+                    this.updateDynamicSteps(newProp.steps, oldProp.steps);
                     break;
                 }
                 case 'orientation':
@@ -19860,21 +20069,7 @@ let Stepper = class Stepper extends StepperBase {
                     this.renderStepperItems(true);
                     break;
                 case 'activeStep':
-                    this.activeStep = (newProp.activeStep > this.steps.length - 1 || newProp.activeStep < -1) ?
-                        oldProp.activeStep : this.activeStep;
-                    if (this.activeStep >= 0 && this.stepperItemElements[parseInt(this.activeStep.toString(), 10)]
-                        .classList.contains(DISABLED$2)) {
-                        this.activeStep = oldProp.activeStep;
-                    }
-                    if (this.linear) {
-                        const linearModeValue = oldProp.activeStep - this.activeStep;
-                        if (Math.abs(linearModeValue) === 1) {
-                            this.navigateToStep(this.activeStep, null, null, true);
-                        }
-                    }
-                    else {
-                        this.navigateToStep(this.activeStep, null, this.stepperItemElements[this.activeStep], true);
-                    }
+                    this.updateDynamicActiveStep(newProp.activeStep, oldProp.activeStep);
                     break;
                 case 'enableRtl':
                     this.element.classList[this.enableRtl ? 'add' : 'remove'](RTL$3);
@@ -19883,15 +20078,7 @@ let Stepper = class Stepper extends StepperBase {
                     this.element.classList[this.readOnly ? 'add' : 'remove'](READONLY);
                     break;
                 case 'cssClass':
-                    if (oldProp.cssClass) {
-                        removeClass([this.element], oldProp.cssClass.trim().split(' '));
-                    }
-                    if (newProp.cssClass) {
-                        addClass([this.element], newProp.cssClass.trim().split(' '));
-                    }
-                    if (this.tooltipObj) {
-                        this.tooltipObj.setProperties({ cssClass: this.cssClass ? (STEPPERTOOLTIP + ' ' + this.cssClass) : STEPPERTOOLTIP });
-                    }
+                    this.updateDynamicCssClass(newProp.cssClass, oldProp.cssClass);
                     break;
                 case 'labelPosition':
                     this.renderStepperItems(true);