@syncfusion/ej2-navigations 27.2.5 → 28.1.35

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

@@ -1167,6 +1167,9 @@ var MenuItem = /** @__PURE__ @class */ (function (_super) {
     __decorate$2([
         Property('')
     ], MenuItem.prototype, "url", void 0);
+    __decorate$2([
+        Property()
+    ], MenuItem.prototype, "htmlAttributes", void 0);
     return MenuItem;
 }(ChildProperty));
 /**
@@ -1896,7 +1899,10 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
                 var data = {
                     text: item[this.getField('text')].toString(), iconCss: ICONS + ' e-previous'
                 };
-                var hdata = new MenuItem(this.items[0], 'items', data, true);
+                if (this.template) {
+                    item.iconCss = (item.iconCss || '') + ICONS + ' e-previous';
+                }
+                var hdata = new MenuItem(this.items[0], 'items', this.template ? item : data, true);
                 var hli = this.createItems([hdata]).children[0];
                 hli.classList.add(HEADER);
                 this.uList.insertBefore(hli, this.uList.children[0]);
@@ -2145,6 +2151,9 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
                                 timingFunction: _this.animationSettings.easing
                             } : null;
                             _this.popupObj.show(animationOptions, _this.lItem);
+                            if (Browser.isDevice) {
+                                _this.popupWrapper.style.left = _this.left + 'px';
+                            }
                         }
                     }
                     else {
@@ -2285,8 +2294,34 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
             }
         }
         this.toggleVisiblity(ul, false);
-        ul.style.top = top + px;
-        ul.style.left = left + px;
+        var wrapper = closest(this.element, '.e-' + this.getModuleName() + '-wrapper');
+        if (!this.isMenu && this.enableScrolling && ul && wrapper && wrapper.offsetHeight > 0) {
+            var menuVScroll = closest(ul, '.e-menu-vscroll');
+            ul.style.display = 'block';
+            if (menuVScroll) {
+                destroyScroll(getInstance(menuVScroll, VScroll), menuVScroll);
+            }
+            var cmenuWidth = Math.ceil(this.getMenuWidth(ul, ul.offsetWidth, this.enableRtl));
+            var 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;
+        }
+    };
+    MenuBase.prototype.getMenuWidth = function (cmenu, width, isRtl) {
+        var caretIcon = cmenu.getElementsByClassName(CARET)[0];
+        if (caretIcon) {
+            width += parseInt(getComputedStyle(caretIcon)[isRtl ? 'marginRight' : 'marginLeft'], 10);
+        }
+        return width < 120 ? 120 : width;
     };
     MenuBase.prototype.toggleVisiblity = function (ul, isVisible) {
         if (isVisible === void 0) { isVisible = true; }
@@ -2312,15 +2347,24 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
                     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;
@@ -2329,7 +2373,9 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
             itemCreated: function (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)]) {
@@ -2579,9 +2625,10 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
             }
         }
         else {
-            if (this.isMenu && trgt.tagName === 'DIV' && this.navIdx.length && closest(trgt, '.e-menu-vscroll')) {
-                var popupEle = closest(trgt, '.' + POPUP);
-                var 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)) {
+                var popupEle = this.isMenu ? closest(trgt, '.' + POPUP) : closest(trgt, '.e-menu-vscroll');
+                var 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) {
@@ -2730,7 +2777,9 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
     };
     MenuBase.prototype.getIdx = function (ul, li, skipHdr) {
         if (skipHdr === void 0) { skipHdr = true; }
-        var idx = Array.prototype.indexOf.call(ul.children, li);
+        var ulElem = !this.isMenu && this.enableScrolling && select('.e-menu-vscroll', ul)
+            ? selectAll('.e-menu-parent', ul) : Array.from(ul.children);
+        var idx = Array.prototype.indexOf.call(ulElem, li);
         if (skipHdr && ul.children[0].classList.contains(HEADER)) {
             idx--;
         }
@@ -2814,7 +2863,7 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
                     }
                     else {
                         var ul_3 = wrapper.children[0];
-                        if (this_1.element.classList.contains('e-vertical')) {
+                        if (this_1.element.classList.contains('e-vertical') || !this_1.isMenu) {
                             destroyScroll(getInstance(ul_3, VScroll), ul_3);
                         }
                         else {
@@ -2985,6 +3034,8 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
         if (isMenuOpen === void 0) { isMenuOpen = true; }
         var pUlHeight;
         var pElement;
+        var 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';
@@ -2993,7 +3044,7 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
             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,
@@ -3011,7 +3062,7 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
                     }
                     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: function (options) {
@@ -3048,11 +3099,15 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
         }
     };
     MenuBase.prototype.end = function (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 = '';
+            var 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();
@@ -3080,6 +3135,10 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
             }
         }
         else {
+            var scrollMenu = this.enableScrolling && !this.isMenu ? closest(ul, '.e-menu-vscroll') : null;
+            if (scrollMenu) {
+                destroyScroll(getInstance(scrollMenu, VScroll), scrollMenu);
+            }
             if (ul === this.element) {
                 var fli = this.getLIByClass(this.element, FOCUSED);
                 if (fli) {
@@ -3123,7 +3182,9 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
         level = isCallBack ? level + 1 : 0;
         for (var i = 0, len = items.length; i < len; i++) {
             item = items[i];
-            if ((isUniqueId ? item[this.getField('itemId', level)] : item[this.getField('text', level)]) === data) {
+            var currentField = isUniqueId ? item[this.getField('itemId', level)] : item[this.getField('text', level)];
+            var itemId = (item.htmlAttributes && 'id' in item.htmlAttributes) ? item.htmlAttributes.id : currentField;
+            if (itemId === data) {
                 nIndex.push(i);
                 break;
             }
@@ -6292,56 +6353,60 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
     Accordion.prototype.afterContentRender = function (trgt, eventArgs, acrdnItem, acrdnHdr, acrdnCtn, acrdnCtnItem) {
         var _this = this;
         var acrdActive = [];
-        this.trigger('clicked', eventArgs);
-        var cntclkCheck = (acrdnCtn && !isNullOrUndefined(select('.e-target', acrdnCtn)));
-        var inlineAcrdnSel = '.' + CLS_CONTENT + ' .' + CLS_ROOT$2;
-        var inlineEleAcrdn = acrdnCtn && !isNullOrUndefined(select('.' + CLS_ROOT$2, acrdnCtn)) && isNullOrUndefined(closest(trgt, inlineAcrdnSel));
-        var nestContCheck = acrdnCtn && isNullOrUndefined(select('.' + CLS_ROOT$2, acrdnCtn)) || !(closest(trgt, '.' + CLS_ROOT$2) === this.element);
-        cntclkCheck = cntclkCheck && (inlineEleAcrdn || nestContCheck);
-        trgt.classList.remove('e-target');
-        if (trgt.classList.contains(CLS_CONTENT) || trgt.classList.contains(CLS_CTENT) || cntclkCheck) {
-            return;
-        }
-        var acrdcontainer = this.element.querySelector('.' + CLS_CONTAINER);
-        var acrdnchild = (acrdcontainer) ? acrdcontainer.children : this.element.children;
-        [].slice.call(acrdnchild).forEach(function (el) {
-            if (el.classList.contains(CLS_ACTIVE)) {
-                acrdActive.push(el);
-            }
-        });
-        var acrdAniEle = [].slice.call(this.element.querySelectorAll('.' + CLS_ITEM$1 + ' [' + CLS_ANIMATE + ']'));
-        if (acrdAniEle.length > 0) {
-            for (var _i = 0, acrdAniEle_1 = acrdAniEle; _i < acrdAniEle_1.length; _i++) {
-                var el = acrdAniEle_1[_i];
-                acrdActive.push(el.parentElement);
-            }
-        }
-        var sameContentCheck = acrdActive.indexOf(acrdnCtnItem) !== -1 && acrdnCtn.getAttribute('e-animate') === 'true';
-        var sameHeader = false;
-        if (!isNullOrUndefined(acrdnItem) && !isNullOrUndefined(acrdnHdr)) {
-            var acrdnCtn_1 = select('.' + CLS_CONTENT, acrdnItem);
-            var acrdnRoot = closest(acrdnItem, '.' + CLS_ACRDN_ROOT);
-            var expandState = acrdnRoot.querySelector('.' + CLS_EXPANDSTATE);
-            if (isNullOrUndefined(acrdnCtn_1)) {
+        this.trigger('clicked', eventArgs, function (eventArgs) {
+            if (eventArgs.cancel) {
                 return;
             }
-            sameHeader = (expandState === acrdnItem);
-            if (isVisible(acrdnCtn_1) && (!sameContentCheck || acrdnCtnItem.classList.contains(CLS_SLCTED))) {
-                this.collapse(acrdnCtn_1);
+            var cntclkCheck = (acrdnCtn && !isNullOrUndefined(select('.e-target', acrdnCtn)));
+            var inlineAcrdnSel = '.' + CLS_CONTENT + ' .' + CLS_ROOT$2;
+            var inlineEleAcrdn = acrdnCtn && !isNullOrUndefined(select('.' + CLS_ROOT$2, acrdnCtn)) && isNullOrUndefined(closest(trgt, inlineAcrdnSel));
+            var nestContCheck = acrdnCtn && isNullOrUndefined(select('.' + CLS_ROOT$2, acrdnCtn)) || !(closest(trgt, '.' + CLS_ROOT$2) === _this.element);
+            cntclkCheck = cntclkCheck && (inlineEleAcrdn || nestContCheck);
+            trgt.classList.remove('e-target');
+            if (trgt.classList.contains(CLS_CONTENT) || trgt.classList.contains(CLS_CTENT) || cntclkCheck) {
+                return;
             }
-            else {
-                if ((acrdActive.length > 0) && this.expandMode === 'Single' && !sameContentCheck) {
-                    acrdActive.forEach(function (el) {
-                        _this.collapse(select('.' + CLS_CONTENT, el));
-                        el.classList.remove(CLS_EXPANDSTATE);
-                    });
+            var acrdcontainer = _this.element.querySelector('.' + CLS_CONTAINER);
+            var acrdnchild = (acrdcontainer) ? acrdcontainer.children : _this.element.children;
+            [].slice.call(acrdnchild).forEach(function (el) {
+                if (el.classList.contains(CLS_ACTIVE)) {
+                    acrdActive.push(el);
+                }
+            });
+            var acrdAniEle = [].slice.call(_this.element.querySelectorAll('.' + CLS_ITEM$1 + ' [' + CLS_ANIMATE + ']'));
+            if (acrdAniEle.length > 0) {
+                for (var _i = 0, acrdAniEle_1 = acrdAniEle; _i < acrdAniEle_1.length; _i++) {
+                    var el = acrdAniEle_1[_i];
+                    acrdActive.push(el.parentElement);
+                }
+            }
+            var sameContentCheck = acrdActive.indexOf(acrdnCtnItem) !== -1 && acrdnCtn.getAttribute('e-animate') === 'true';
+            var sameHeader = false;
+            if (!isNullOrUndefined(acrdnItem) && !isNullOrUndefined(acrdnHdr)) {
+                var acrdnCtn_1 = select('.' + CLS_CONTENT, acrdnItem);
+                var acrdnRoot = closest(acrdnItem, '.' + CLS_ACRDN_ROOT);
+                var expandState = acrdnRoot.querySelector('.' + CLS_EXPANDSTATE);
+                if (isNullOrUndefined(acrdnCtn_1)) {
+                    return;
+                }
+                sameHeader = (expandState === acrdnItem);
+                if (isVisible(acrdnCtn_1) && (!sameContentCheck || acrdnCtnItem.classList.contains(CLS_SLCTED))) {
+                    _this.collapse(acrdnCtn_1);
+                }
+                else {
+                    if ((acrdActive.length > 0) && _this.expandMode === 'Single' && !sameContentCheck) {
+                        acrdActive.forEach(function (el) {
+                            _this.collapse(select('.' + CLS_CONTENT, el));
+                            el.classList.remove(CLS_EXPANDSTATE);
+                        });
+                    }
+                    _this.expand(acrdnCtn_1);
+                }
+                if (!isNullOrUndefined(expandState) && !sameHeader) {
+                    expandState.classList.remove(CLS_EXPANDSTATE);
                 }
-                this.expand(acrdnCtn_1);
-            }
-            if (!isNullOrUndefined(expandState) && !sameHeader) {
-                expandState.classList.remove(CLS_EXPANDSTATE);
             }
-        }
+        });
     };
     Accordion.prototype.eleMoveFocus = function (action, root, trgt) {
         var clst;
@@ -6695,9 +6760,12 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
     };
     Accordion.prototype.collapse = function (trgt) {
         var _this = this;
+        if (isNullOrUndefined(trgt)) {
+            return;
+        }
         var items = this.getItems();
         var trgtItemEle = closest(trgt, '.' + CLS_ITEM$1);
-        if (isNullOrUndefined(trgt) || !isVisible(trgt) || trgtItemEle.classList.contains(CLS_DISABLE$3)) {
+        if (!isVisible(trgt) || trgtItemEle.classList.contains(CLS_DISABLE$3)) {
             return;
         }
         var animation = {
@@ -7311,6 +7379,7 @@ var ContextMenu = /** @__PURE__ @class */ (function (_super) {
         _super.prototype.preRender.call(this);
     };
     ContextMenu.prototype.initialize = function () {
+        this.template = this.itemTemplate ? this.itemTemplate : null;
         _super.prototype.initialize.call(this);
         attributes(this.element, { 'role': 'menubar', 'tabindex': '0' });
         this.element.style.zIndex = getZindexPartial(this.element).toString();
@@ -7357,6 +7426,9 @@ var ContextMenu = /** @__PURE__ @class */ (function (_super) {
                     this.unWireEvents(oldProp.target);
                     this.wireEvents();
                     break;
+                case 'itemTemplate':
+                    this.itemTemplate = newProp.itemTemplate;
+                    this.refresh();
             }
         }
     };
@@ -7378,6 +7450,12 @@ var ContextMenu = /** @__PURE__ @class */ (function (_super) {
     __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);
@@ -7592,6 +7670,10 @@ var Menu = /** @__PURE__ @class */ (function (_super) {
                         }
                     }
                     break;
+                case 'template':
+                    this.template = newProp.template;
+                    this.refresh();
+                    break;
             }
         }
         _super.prototype.onPropertyChanged.call(this, newProp, oldProp);
@@ -8107,6 +8189,17 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
             }
         }
     };
+    Tab.prototype.createContentElement = function (index) {
+        var 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;
+    };
     Tab.prototype.renderContent = function () {
         this.cntEle = select('.' + CLS_CONTENT$1, this.element);
         var hdrItem = selectAll('.' + CLS_TB_ITEM, this.element);
@@ -8121,11 +8214,26 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
                 }
             }
         }
+        else {
+            if (selectAll('.' + CLS_TB_ITEM, this.element).length > 0) {
+                if (this.loadOn === 'Init') {
+                    for (var 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]))));
+                }
+            }
+        }
     };
     Tab.prototype.reRenderItems = function () {
         this.renderContainer();
         if (!isNullOrUndefined(this.cntEle)) {
-            this.touchModule = new Touch(this.cntEle, { swipe: this.swipeHandler.bind(this) });
+            this.bindSwipeEvents();
         }
     };
     Tab.prototype.parseObject = function (items, index) {
@@ -8627,6 +8735,27 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
             }
         }
     };
+    Tab.prototype.loadContentInitMode = function (ele) {
+        if (!ele) {
+            return;
+        }
+        if (this.loadOn === 'Init') {
+            for (var 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);
+        }
+    };
+    Tab.prototype.loadContentElement = function () {
+        if (!this.isTemplate) {
+            var ele = this.cntEle.children.item(0);
+            this.loadContentInitMode(ele);
+        }
+    };
     Tab.prototype.setContentHeight = function (val) {
         if (this.element.classList.contains(CLS_FILL)) {
             removeClass([this.element], [CLS_FILL]);
@@ -8636,6 +8765,7 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
         }
         var hdrEle = this.getTabHeader();
         if (this.heightAdjustMode === 'None') {
+            this.loadContentElement();
             if (this.height === 'auto') {
                 return;
             }
@@ -8648,6 +8778,7 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
         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') {
@@ -8662,11 +8793,8 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
             }
             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]))));
                 }
                 var ele = this.cntEle.children.item(0);
                 for (var i = 0; i < this.items.length; i++) {
@@ -8680,14 +8808,15 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
                     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' });
         }
     };
@@ -8771,7 +8900,7 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
             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) });
         }
         var id = trg.id;
         this.removeActiveClass();
@@ -8792,6 +8921,9 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
         }
         else {
             this.cntEle = select('.' + CLS_TAB + ' > .' + CLS_CONTENT$1, this.element);
+            while (this.loadOn === 'Dynamic' && this.cntEle.firstElementChild) {
+                this.cntEle.removeChild(this.cntEle.firstElementChild);
+            }
             var item = this.getTrgContent(this.cntEle, this.extIndex(id));
             if (isNullOrUndefined(item)) {
                 this.cntEle.appendChild(this.createElement('div', {
@@ -8867,13 +8999,18 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
             }
         }
     };
+    Tab.prototype.bindSwipeEvents = function () {
+        if (this.swipeMode !== 'None') {
+            this.touchModule = new Touch(this.cntEle, { swipe: this.swipeHandler.bind(this) });
+        }
+    };
     Tab.prototype.wireEvents = function () {
         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, {
@@ -8918,7 +9055,9 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
         }
     };
     Tab.prototype.swipeHandler = function (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) {
@@ -9515,7 +9654,7 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
                     _this.items.splice((index + i_1), 0, item);
                     i_1++;
                 }
-                if (_this.isTemplate && !isNullOrUndefined(item.header) && !isNullOrUndefined(item.header.text)) {
+                if (!isNullOrUndefined(item.header) && !isNullOrUndefined(item.header.text) && (_this.isTemplate || _this.loadOn === 'Init')) {
                     var no = lastEleIndex + place;
                     var ele = _this.createElement('div', {
                         id: CLS_CONTENT$1 + _this.tabId + '_' + no, className: CLS_ITEM$2,
@@ -9906,6 +10045,13 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
                 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(function (item) {
@@ -10057,6 +10203,9 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
     __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);
@@ -10076,7 +10225,7 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
         Property('Scrollable')
     ], Tab.prototype, "overflowMode", void 0);
     __decorate$7([
-        Property('Dynamic')
+        Property('Demand')
     ], Tab.prototype, "loadOn", void 0);
     __decorate$7([
         Property(false)
@@ -10350,6 +10499,7 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
         _this.mouseDownStatus = false;
         _this.isDropIn = false;
         _this.OldCheckedData = [];
+        _this.isHiddenItem = false;
         return _this;
     }
     TreeView_1 = TreeView;
@@ -10846,10 +10996,6 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
                     this.changeState(node, 'uncheck', null, true, true);
                 }
             }
-            var parentElement = closest(node, '.' + PARENTITEM);
-            if (!isNullOrUndefined(parentElement)) {
-                this.ensureParentCheckState(closest(parentElement, '.' + LISTITEM));
-            }
         }
     };
     /**
@@ -11968,6 +12114,9 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
             this.expandArgs.isInteracted = this.isInteracted;
             this.trigger('nodeExpanded', this.expandArgs);
         }
+        if (this.isHiddenItem) {
+            this.collapseAll([this.getNodeData(currLi).id]);
+        }
     };
     TreeView.prototype.addExpand = function (liEle) {
         liEle.setAttribute('aria-expanded', 'true');
@@ -12500,7 +12649,9 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
         this.expandOnType = (this.expandOn === 'Auto') ? (Browser.isDevice ? 'Click' : 'DblClick') : this.expandOn;
     };
     TreeView.prototype.expandHandler = function (e) {
-        var target = e.originalEvent.target;
+        var 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)) {
@@ -14849,15 +15000,6 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
             }
         }
     };
-    /**
-     * 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)
      *
@@ -15340,9 +15482,11 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
                     var 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);
@@ -15451,7 +15595,7 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
         else if (this.dataType === 2) {
             parentsId = this.getHierarchicalParentId(node, this.treeData, parentsId);
         }
-        this.expandAll(parentsId.reverse());
+        this.expandAll(parentsId.reverse(), null, null, this.isHiddenItem);
         var liEle = this.getElement(node);
         if (!isNullOrUndefined(liEle)) {
             if (typeof node == 'object') {
@@ -15551,10 +15695,16 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
      * @returns {void}
      */
     TreeView.prototype.moveNodes = function (sourceNodes, target, index, preventTargetExpand) {
+        if (isNullOrUndefined(sourceNodes) || sourceNodes.length === 0) {
+            return;
+        }
         var dropLi = this.getElement(target);
         var nodeData = [];
         if (isNullOrUndefined(dropLi)) {
-            return;
+            this.isHiddenItem = true;
+            this.ensureVisible(target);
+            this.isHiddenItem = false;
+            dropLi = this.getElement(target);
         }
         for (var i = 0; i < sourceNodes.length; i++) {
             var dragLi = this.getElement(sourceNodes[parseInt(i.toString(), 10)]);
@@ -17620,6 +17770,15 @@ var Carousel = /** @__PURE__ @class */ (function (_super) {
                         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 + ",\n                ." + CLS_NEXT_BUTTON + ", ." + CLS_PLAY_BUTTON));
                     rtlElement.push(this.element);
@@ -17991,6 +18150,9 @@ var Carousel = /** @__PURE__ @class */ (function (_super) {
         append(template, indicatorBar);
     };
     Carousel.prototype.renderKeyboardActions = function () {
+        if (!this.allowKeyboardInteraction) {
+            return;
+        }
         this.keyModule = new KeyboardEvents(this.element, { keyAction: this.keyHandler.bind(this), keyConfigs: this.keyConfigs });
     };
     Carousel.prototype.renderTouchActions = function () {
@@ -18314,6 +18476,9 @@ var Carousel = /** @__PURE__ @class */ (function (_super) {
         }
     };
     Carousel.prototype.keyHandler = function (e) {
+        if (!this.allowKeyboardInteraction) {
+            return;
+        }
         var direction;
         var slideIndex;
         var isSlideTransition = false;
@@ -18462,6 +18627,7 @@ var Carousel = /** @__PURE__ @class */ (function (_super) {
         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;
@@ -18471,6 +18637,7 @@ var Carousel = /** @__PURE__ @class */ (function (_super) {
         if (!this.itemsContainer.classList.contains('e-swipe-start')) {
             return;
         }
+        this.isSwipe = true;
         e.preventDefault();
         var pageX = e.touches ? e.touches[0].pageX : e.pageX;
         var positionDiff = this.prevPageX - (pageX);
@@ -18483,7 +18650,6 @@ var Carousel = /** @__PURE__ @class */ (function (_super) {
         this.itemsContainer.style.transform = "translateX(" + (this.initialTranslate + (this.enableRtl ? positionDiff : -positionDiff)) + "px)";
     };
     Carousel.prototype.swipStop = function () {
-        this.isSwipe = true;
         var time = Date.now() - this.timeStampStart;
         var distanceX = this.getTranslateValue(this.itemsContainer) - this.initialTranslate;
         distanceX = distanceX < 0 ? distanceX * -1 : distanceX;
@@ -18547,7 +18713,7 @@ var Carousel = /** @__PURE__ @class */ (function (_super) {
         }
     };
     Carousel.prototype.wireEvents = function () {
-        if (!(this.animationEffect === 'Custom')) {
+        if (this.animationEffect !== 'Custom' && this.enableTouchSwipe) {
             this.swipeModehandlers();
         }
         EventHandler.add(this.element, 'focusin focusout', this.onFocusActions, this);
@@ -18669,8 +18835,10 @@ var Carousel = /** @__PURE__ @class */ (function (_super) {
             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();
@@ -18734,6 +18902,9 @@ var Carousel = /** @__PURE__ @class */ (function (_super) {
     __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);
@@ -19003,6 +19174,10 @@ var __decorate$d = (undefined && undefined.__decorate) || function (decorators,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 var PROGRESSVALUE = '--progress-value';
+var PROGRESSPOS = '--progress-position';
+var VERTICALSTEP = 'e-vertical';
+var HORIZSTEP = 'e-horizontal';
+var ITEMLIST = 'e-stepper-steps';
 /**
  * Defines the status of the step.
  */
@@ -19121,8 +19296,8 @@ var StepperBase = /** @__PURE__ @class */ (function (_super) {
     StepperBase.prototype.render = function () {
     };
     StepperBase.prototype.updateOrientaion = function (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());
@@ -19131,23 +19306,23 @@ var StepperBase = /** @__PURE__ @class */ (function (_super) {
     StepperBase.prototype.renderProgressBar = function (wrapper) {
         this.progressStep = this.createElement('div', { className: 'e-stepper-progressbar' });
         this.progressbar = this.createElement('div', { className: 'e-progressbar-value' });
+        var beforeLabel = (wrapper.querySelector('li').querySelector('.e-step-label-container'));
         this.progressStep.appendChild(this.progressbar);
         wrapper.prepend(this.progressStep);
         this.progressbar.style.setProperty(PROGRESSVALUE, (0) + '%');
-        var 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')) {
-                var stepsContainer = (wrapper.querySelector('.e-stepper-steps'));
-                this.progressStep.style.setProperty('--progress-position', (stepsContainer.offsetWidth / 2) + 'px');
+                var 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);
         }
     };
@@ -19164,9 +19339,9 @@ var StepperBase = /** @__PURE__ @class */ (function (_super) {
             }
             this.progressStep.style.setProperty('--progress-top-position', topPos + 'px');
         }
-        var lastEle = wrapper.querySelector('.e-stepper-steps').lastChild.firstChild;
+        var lastEle = wrapper.querySelector('.' + ITEMLIST).lastChild.firstChild;
         if (wrapper.classList.contains('e-rtl')) {
-            var leftPost = ((stepItemEle.offsetLeft + stepItemEle.offsetWidth) - wrapper.querySelector('.e-stepper-steps').offsetWidth);
+            var 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');
         }
@@ -19227,7 +19402,7 @@ var __decorate$e = (undefined && undefined.__decorate) || function (decorators,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 var ITEMCONTAINER = 'e-step-container';
-var ITEMLIST = 'e-stepper-steps';
+var ITEMLIST$1 = 'e-stepper-steps';
 var ICONCSS = 'e-indicator';
 var TEXTCSS = 'e-step-text-container';
 var STEPLABEL = 'e-step-label-container';
@@ -19244,8 +19419,8 @@ var RTL$3 = 'e-rtl';
 var TEMPLATE = 'e-step-template';
 var LABELAFTER = 'e-label-after';
 var LABELBEFORE = 'e-label-before';
-var VERTICALSTEP = 'e-vertical';
-var HORIZSTEP = 'e-horizontal';
+var VERTICALSTEP$1 = 'e-vertical';
+var HORIZSTEP$1 = 'e-horizontal';
 var STEPICON = 'e-step-item';
 var STEPTEXT = 'e-step-text';
 var TEXT = 'e-text';
@@ -19381,10 +19556,9 @@ var Stepper = /** @__PURE__ @class */ (function (_super) {
         this.updateStepperStatus(true);
     };
     Stepper.prototype.initialize = function () {
-        var _this = this;
         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);
@@ -19401,28 +19575,30 @@ var Stepper = /** @__PURE__ @class */ (function (_super) {
         this.updateTemplateFunction();
         this.renderItems();
         if (this.steps.length > 0) {
-            if (this.steps.length > 1) {
-                if (this.isAngular && this.template) {
-                    setTimeout(function () {
-                        _this.renderProgressBar(_this.element);
-                    });
-                }
-                else {
-                    this.renderProgressBar(this.element);
-                }
-            }
+            this.initiateProgressBar();
             this.checkValidStep();
             this.updateAnimation();
             this.updateTooltip();
             this.wireKeyboardEvent();
         }
     };
+    Stepper.prototype.initiateProgressBar = function () {
+        var _this = this;
+        if (this.steps.length > 1) {
+            if (this.isAngular && this.template) {
+                setTimeout(function () { _this.renderProgressBar(_this.element); });
+            }
+            else {
+                this.renderProgressBar(this.element);
+            }
+        }
+    };
     Stepper.prototype.updatePosition = function () {
         this.progressBarPosition = this.beforeLabelWidth = this.textEleWidth = 0;
     };
     Stepper.prototype.renderDefault = function (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;
+        var step = this.steps[parseInt(index.toString(), 10)];
+        return !step.iconCss && !step.text && !step.label;
     };
     Stepper.prototype.updateAnimation = function () {
         var progressEle = this.element.querySelector('.e-progressbar-value');
@@ -19446,12 +19622,16 @@ var Stepper = /** @__PURE__ @class */ (function (_super) {
         }
     };
     Stepper.prototype.updateStepType = function () {
-        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)) {
+            var stepTypeLower = this.stepType.toLowerCase();
+            var 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();
+                }
             }
         }
     };
@@ -19464,7 +19644,7 @@ var Stepper = /** @__PURE__ @class */ (function (_super) {
         EventHandler.remove(window, 'click', this.updateStepFocus);
     };
     Stepper.prototype.updateResize = function () {
-        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);
@@ -19524,23 +19704,28 @@ var Stepper = /** @__PURE__ @class */ (function (_super) {
     };
     Stepper.prototype.renderItems = function () {
         var _this = this;
+        var _a;
+        var isHorizontal = this.element.classList.contains(HORIZSTEP$1);
+        var isVertical = this.element.classList.contains(VERTICALSTEP$1);
+        var labelPositionLower = !isNullOrUndefined(this.labelPosition) ? this.labelPosition.toLowerCase() : '';
         for (var 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 + '%');
-            }
             var stepSpan = this.createElement('span', { className: 'e-step' });
             var item = this.steps[parseInt(index.toString(), 10)];
             var isItemLabel = item.label ? true : false;
             var isItemText = item.text ? true : false;
+            var 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 === '')) {
-                var isIndicator = (!this.element.classList.contains('e-step-type-default') && this.stepType.toLowerCase() === 'indicator') ? true : false;
-                if (isIndicator) {
+                var isIndicator_1 = !this.element.classList.contains('e-step-type-default') && this.stepType.toLowerCase() === 'indicator';
+                if (isIndicator_1) {
                     stepSpan.classList.add('e-icons', INDICATORICON);
                 }
-                if (!isIndicator && item.isValid == null) {
+                if (!isIndicator_1 && item.isValid == null) {
                     stepSpan.classList.add('e-step-content');
                     stepSpan.innerHTML = (index + 1).toString();
                 }
@@ -19552,10 +19737,7 @@ var Stepper = /** @__PURE__ @class */ (function (_super) {
                     !this.element.classList.contains(LABELINDICATOR)))) {
                     if (item.iconCss) {
                         var itemIcon = item.iconCss.trim().split(' ');
-                        stepSpan.classList.add(ICONCSS);
-                        for (var i = 0; i < itemIcon.length; i++) {
-                            stepSpan.classList.add(itemIcon[parseInt(i.toString(), 10)]);
-                        }
+                        (_a = stepSpan.classList).add.apply(_a, [ICONCSS].concat(itemIcon));
                         this.stepperItemContainer.classList.add(STEPICON);
                     }
                     else if (!item.iconCss && isItemText && isItemLabel) {
@@ -19564,51 +19746,41 @@ var Stepper = /** @__PURE__ @class */ (function (_super) {
                         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());
-                        var 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 {
-                        var 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)) {
+                            var 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 });
-                        var 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)) {
@@ -19627,8 +19799,8 @@ var Stepper = /** @__PURE__ @class */ (function (_super) {
                 var 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 {
@@ -19666,16 +19838,16 @@ var Stepper = /** @__PURE__ @class */ (function (_super) {
             this.trigger('beforeStepRender', eventArgs, function (args) {
                 _this.stepperItemList.appendChild(args.element);
             });
-            if (this.isAngular && this.template) {
-                setTimeout(function () {
-                    _this.calculateProgressBarPosition();
-                });
-            }
-            else {
-                this.calculateProgressBarPosition();
+            if (isVertical) {
+                if (this.isAngular && this.template) {
+                    setTimeout(function () { _this.calculateProgressBarPosition(); });
+                }
+                else {
+                    this.calculateProgressBarPosition();
+                }
             }
         }
-        if (this.element.classList.contains(VERTICALSTEP)) {
+        if (isVertical) {
             if (this.element.classList.contains(LABELBEFORE)) {
                 var listItems = this.stepperItemList.querySelectorAll('.' + LABEL);
                 for (var i = 0; i < listItems.length; i++) {
@@ -19685,37 +19857,48 @@ var Stepper = /** @__PURE__ @class */ (function (_super) {
             }
         }
     };
+    Stepper.prototype.createTextLabelElement = function (content, isLabelEle) {
+        if (isLabelEle === void 0) { isLabelEle = false; }
+        var 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);
+    };
     Stepper.prototype.calculateProgressBarPosition = function () {
         var isBeforeLabel = (this.element.classList.contains(LABELBEFORE)) ? true : false;
-        var isStepVertical = (this.element.classList.contains(VERTICALSTEP)) ? true : false;
-        if (isStepVertical) {
-            var iconOnly = (this.stepperItemContainer.classList.contains(STEPICON) &&
-                !this.stepperItemContainer.classList.contains(STEPTEXT) &&
-                !this.stepperItemContainer.classList.contains(STEPSLABEL)) ? true : false;
-            var textEle = (this.stepperItemContainer.querySelector('.' + TEXTCSS));
-            if (textEle) {
-                this.textEleWidth = this.textEleWidth < textEle.offsetWidth ? textEle.offsetWidth : this.textEleWidth;
-            }
-            if (isBeforeLabel) {
-                var itemWidth = void 0;
-                var 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;
-                }
+        var iconOnly = (this.stepperItemContainer.classList.contains(STEPICON) &&
+            !this.stepperItemContainer.classList.contains(STEPTEXT) &&
+            !this.stepperItemContainer.classList.contains(STEPSLABEL));
+        var textEle = (this.stepperItemContainer.querySelector('.' + TEXTCSS));
+        if (textEle) {
+            this.textEleWidth = this.textEleWidth < textEle.offsetWidth ? textEle.offsetWidth : this.textEleWidth;
+        }
+        if (isBeforeLabel) {
+            var labelWidth = this.stepperItemContainer.querySelector('.' + LABEL).offsetWidth + 15;
+            this.beforeLabelWidth = Math.max(this.beforeLabelWidth, labelWidth);
+            var iconEle = this.element.querySelector('ol').lastChild.querySelector('.' + ICONCSS);
+            var textEle_1 = this.stepperItemContainer.querySelector('.' + TEXTCSS);
+            if (iconEle || textEle_1) {
+                var itemWidth = this.beforeLabelWidth + ((this.stepperItemContainer.querySelector('.' + ICONCSS)
+                    || textEle_1).offsetWidth / 2);
+                this.progressBarPosition = Math.max(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 {
+            var lastChild = this.element.querySelector('ol').lastChild;
+            var lastChildWidth = iconOnly ? this.stepperItemContainer.offsetWidth :
+                lastChild.firstChild.offsetWidth;
+            this.progressBarPosition = Math.max(this.progressBarPosition, lastChildWidth);
+        }
     };
     Stepper.prototype.checkValidState = function (item, stepSpan, isLabel) {
         if (item.isValid == null) {
@@ -19735,13 +19918,10 @@ var Stepper = /** @__PURE__ @class */ (function (_super) {
         }
     };
     Stepper.prototype.updateCurrentLabel = function () {
-        var 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();
-        }
+        var labelPos = this.labelPosition.toLowerCase();
+        var currentLabelPos = this.element.classList.contains(HORIZSTEP$1)
+            ? (labelPos === 'top' ? 'before' : labelPos === 'bottom' ? 'after' : labelPos)
+            : (labelPos === 'start' ? 'before' : labelPos === 'end' ? 'after' : labelPos);
         return currentLabelPos;
     };
     Stepper.prototype.updateLabelPosition = function () {
@@ -19768,49 +19948,49 @@ var Stepper = /** @__PURE__ @class */ (function (_super) {
         }
     };
     Stepper.prototype.checkValidStep = function () {
-        for (var index = 0; index < this.steps.length; index++) {
-            var item = this.steps[parseInt(index.toString(), 10)];
-            var itemElement = this.stepperItemElements[parseInt(index.toString(), 10)];
+        var isStepIndicator = this.element.classList.contains(STEPINDICATOR);
+        var _loop_1 = function (index) {
+            var item = this_1.steps[parseInt(index.toString(), 10)];
+            var itemElement = this_1.stepperItemElements[parseInt(index.toString(), 10)];
             if (item.isValid !== null) {
                 var indicatorEle = void 0;
-                var iconEle = void 0;
-                if (this.element.classList.contains(STEPINDICATOR) && !item.iconCss) {
+                var iconEle_1;
+                if (isStepIndicator && !item.iconCss) {
                     indicatorEle = itemElement.querySelector('.' + ICONCSS);
                 }
                 else {
-                    iconEle = itemElement.querySelector('.' + ICONCSS);
+                    iconEle_1 = itemElement.querySelector('.' + ICONCSS);
                 }
-                if (!indicatorEle && this.element.classList.contains(STEPINDICATOR) && this.renderDefault(index)) {
+                if (!indicatorEle && isStepIndicator && this_1.renderDefault(index)) {
                     indicatorEle = itemElement.querySelector('.' + INDICATORICON);
                 }
                 var textLabelIcon = itemElement.querySelector('.e-step-validation-icon');
                 var itemIcon = item.iconCss.trim().split(' ');
                 var validStep = itemElement.classList.contains('e-step-valid');
+                var 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_1.renderDefault(index) && !isStepIndicator) {
                     var 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 = '';
+                if (iconEle_1) {
+                    if (iconEle_1.innerHTML !== '') {
+                        iconEle_1.innerHTML = '';
                     }
                     else if (itemIcon.length > 0) {
-                        for (var i = 0; i < itemIcon.length; i++) {
-                            iconEle.classList.remove(itemIcon[parseInt(i.toString(), 10)]);
-                        }
+                        itemIcon.forEach(function (icon) { iconEle_1.classList.remove(icon); });
                     }
-                    iconEle.classList.add('e-icons', validStep ? 'e-check' : 'e-circle-info');
+                    iconEle_1.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_1.element.classList.contains(VERTICALSTEP$1)) {
                         var labelEle = itemElement.querySelector('.' + LABEL);
                         var textEle = itemElement.querySelector('.' + TEXT);
                         var itemWidth = textEle ? textEle.offsetWidth + textEle.getBoundingClientRect().left :
@@ -19820,6 +20000,10 @@ var Stepper = /** @__PURE__ @class */ (function (_super) {
                     }
                 }
             }
+        };
+        var this_1 = this;
+        for (var index = 0; index < this.steps.length; index++) {
+            _loop_1(index);
         }
     };
     Stepper.prototype.updateTooltip = function () {
@@ -19839,20 +20023,28 @@ var Stepper = /** @__PURE__ @class */ (function (_super) {
         }
     };
     Stepper.prototype.wireItemsEvents = function (itemElement, index) {
-        var _this = this;
-        EventHandler.add(itemElement, 'click', function (e) {
-            if (_this.linear) {
-                var linearModeValue = index - _this.activeStep;
-                if (Math.abs(linearModeValue) === 1) {
-                    _this.stepClickHandler(index, e, itemElement);
-                }
-            }
-            else {
-                _this.stepClickHandler(index, e, itemElement);
+        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);
+    };
+    Stepper.prototype.unWireItemsEvents = function () {
+        for (var index = 0; index < this.steps.length; index++) {
+            var 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);
+        }
+    };
+    Stepper.prototype.linearModeHandler = function (itemElement, index, e) {
+        if (this.linear) {
+            var linearModeValue = index - this.activeStep;
+            if (Math.abs(linearModeValue) === 1) {
+                this.stepClickHandler(index, e, itemElement);
             }
-        }, this);
-        EventHandler.add(itemElement, 'mouseover', function () { return _this.openStepperTooltip(index); }, this);
-        EventHandler.add(itemElement, 'mouseleave', function () { return _this.closeStepperTooltip(); }, this);
+        }
+        else {
+            this.stepClickHandler(index, e, itemElement);
+        }
     };
     Stepper.prototype.openStepperTooltip = function (index) {
         var currentStep = this.steps[parseInt(index.toString(), 10)];
@@ -19994,7 +20186,7 @@ var Stepper = /** @__PURE__ @class */ (function (_super) {
         }
     };
     Stepper.prototype.navigationHandler = function (index, stepStatus, isUpdated) {
-        index = (index >= this.steps.length - 1) ? this.steps.length - 1 : index;
+        index = Math.min(index, this.steps.length - 1);
         var Itemslength = this.stepperItemElements.length;
         if (index >= 0 && index < Itemslength - 1) {
             index = this.stepperItemElements[parseInt(index.toString(), 10)].classList.contains(DISABLED$2) ? this.activeStep : index;
@@ -20011,46 +20203,8 @@ var Stepper = /** @__PURE__ @class */ (function (_super) {
                 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)) {
-                        var progressPos = this.element.querySelector('.e-stepper-progressbar');
-                        var selectedEle = this.stepperItemElements[parseInt(this.activeStep.toString(), 10)]
-                            .firstChild;
-                        var 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 {
-                        var totalLiWidth = 0;
-                        var activeLiWidth = 0;
-                        for (var 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);
-                                }
-                            }
-                        }
-                        var spaceWidth = (this.stepperItemList.offsetWidth - totalLiWidth) /
-                            (this.stepperItemElements.length - 1);
-                        var 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) + '%');
@@ -20099,27 +20253,65 @@ var Stepper = /** @__PURE__ @class */ (function (_super) {
                 }
             }
             this.isProtectedOnChange = prevOnChange_1;
-            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();
+    };
+    Stepper.prototype.calculateProgressbarPos = function () {
+        var _this = this;
+        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)) {
+            var progressPos = this.element.querySelector('.e-stepper-progressbar');
+            var selectedEle = this.stepperItemElements[parseInt(this.activeStep.toString(), 10)]
+                .firstChild;
+            var 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 {
+            var totalLiWidth_1 = 0;
+            var activeLiWidth_1 = 0;
+            this.stepperItemElements.forEach(function (element, index) {
+                var itemWidth = element.offsetWidth;
+                totalLiWidth_1 += itemWidth;
+                if (index <= _this.activeStep) {
+                    activeLiWidth_1 += (index === _this.activeStep && index !== 0) ? (itemWidth / 2) : itemWidth;
                 }
+            });
+            var spaceWidth = (this.stepperItemList.offsetWidth - totalLiWidth_1) /
+                (this.stepperItemElements.length - 1);
+            var progressValue = ((activeLiWidth_1 + (spaceWidth * this.activeStep)) /
+                this.stepperItemList.offsetWidth) * 100;
+            this.progressbar.style.setProperty(PROGRESSVALUE$1, (progressValue) + '%');
+        }
+    };
+    Stepper.prototype.updateIndicatorStatus = function (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();
     };
     Stepper.prototype.updateStepInteractions = function () {
         var _this = this;
         this.element.classList.toggle(LINEARSTEP, this.linear);
         this.stepperItemElements.forEach(function (step, index) {
-            var isPreviousStep = (index === _this.activeStep - 1);
-            var 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));
         });
     };
     Stepper.prototype.removeItemElements = function () {
@@ -20175,7 +20367,7 @@ var Stepper = /** @__PURE__ @class */ (function (_super) {
     };
     Stepper.prototype.updateElementClassArray = function () {
         var 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);
     };
     /**
@@ -20186,6 +20378,7 @@ var Stepper = /** @__PURE__ @class */ (function (_super) {
     Stepper.prototype.destroy = function () {
         _super.prototype.destroy.call(this);
         this.unWireEvents();
+        this.unWireItemsEvents();
         // unwires the events and detach the li elements
         this.removeItemElements();
         this.clearTemplate();
@@ -20231,7 +20424,7 @@ var Stepper = /** @__PURE__ @class */ (function (_super) {
             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':
@@ -20332,6 +20525,66 @@ var Stepper = /** @__PURE__ @class */ (function (_super) {
         this.updateAnimation();
         this.navigateToStep(this.activeStep, null, this.stepperItemElements[this.activeStep], true);
     };
+    Stepper.prototype.updateDynamicSteps = function (steps, prevSteps) {
+        if (!(steps instanceof Array && prevSteps instanceof Array)) {
+            var stepCounts = Object.keys(steps);
+            for (var i = 0; i < stepCounts.length; i++) {
+                var index = parseInt(Object.keys(steps)[i], 10);
+                var changedPropsCount = Object.keys(steps[index]).length;
+                for (var j = 0; j < changedPropsCount; j++) {
+                    var 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);
+        }
+    };
+    Stepper.prototype.updateDynamicActiveStep = function (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) {
+            var 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);
+        }
+    };
+    Stepper.prototype.updateDynamicCssClass = function (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.
      *
@@ -20345,38 +20598,7 @@ var Stepper = /** @__PURE__ @class */ (function (_super) {
             var prop = _a[_i];
             switch (prop) {
                 case 'steps': {
-                    if (!(newProp.steps instanceof Array && oldProp.steps instanceof Array)) {
-                        var stepCounts = Object.keys(newProp.steps);
-                        for (var i = 0; i < stepCounts.length; i++) {
-                            var index = parseInt(Object.keys(newProp.steps)[i], 10);
-                            var changedPropsCount = Object.keys(newProp.steps[index]).length;
-                            for (var j = 0; j < changedPropsCount; j++) {
-                                var 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':
@@ -20384,21 +20606,7 @@ var Stepper = /** @__PURE__ @class */ (function (_super) {
                     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) {
-                        var 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);
@@ -20407,15 +20615,7 @@ var Stepper = /** @__PURE__ @class */ (function (_super) {
                     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);