@syncfusion/ej2-navigations 27.2.5 → 28.1.35

package/src/stepper/stepper.js

@@ -178,7 +178,6 @@ var Stepper = /** @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 });
@@ -198,28 +197,30 @@ var Stepper = /** @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');
@@ -243,12 +244,16 @@ var Stepper = /** @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();
+                }
             }
         }
     };
@@ -321,23 +326,28 @@ var Stepper = /** @class */ (function (_super) {
     };
     Stepper.prototype.renderItems = function () {
         var _this = this;
+        var _a;
+        var isHorizontal = this.element.classList.contains(HORIZSTEP);
+        var isVertical = this.element.classList.contains(VERTICALSTEP);
+        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, 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, 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();
                 }
@@ -349,10 +359,7 @@ var Stepper = /** @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) {
@@ -361,51 +368,41 @@ var Stepper = /** @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)) {
@@ -424,8 +421,8 @@ var Stepper = /** @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 {
@@ -463,16 +460,16 @@ var Stepper = /** @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++) {
@@ -482,37 +479,48 @@ var Stepper = /** @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) {
@@ -532,13 +540,10 @@ var Stepper = /** @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)
+            ? (labelPos === 'top' ? 'before' : labelPos === 'bottom' ? 'after' : labelPos)
+            : (labelPos === 'start' ? 'before' : labelPos === 'end' ? 'after' : labelPos);
         return currentLabelPos;
     };
     Stepper.prototype.updateLabelPosition = function () {
@@ -565,49 +570,49 @@ var Stepper = /** @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)) {
                         var labelEle = itemElement.querySelector('.' + LABEL);
                         var textEle = itemElement.querySelector('.' + TEXT);
                         var itemWidth = textEle ? textEle.offsetWidth + textEle.getBoundingClientRect().left :
@@ -617,6 +622,10 @@ var Stepper = /** @class */ (function (_super) {
                     }
                 }
             }
+        };
+        var this_1 = this;
+        for (var index = 0; index < this.steps.length; index++) {
+            _loop_1(index);
         }
     };
     Stepper.prototype.updateTooltip = function () {
@@ -636,20 +645,28 @@ var Stepper = /** @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)];
@@ -791,7 +808,7 @@ var Stepper = /** @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) ? this.activeStep : index;
@@ -809,45 +826,7 @@ var Stepper = /** @class */ (function (_super) {
             }
             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)) {
-                            value = (progressPos.getBoundingClientRect().right - selectedEle.getBoundingClientRect().right +
-                                (selectedEle.offsetWidth / 2)) / progressPos.offsetWidth * 100;
-                            this.progressbar.style.setProperty(PROGRESSVALUE, (value) + '%');
-                        }
-                        else {
-                            this.progressbar.style.setProperty(PROGRESSVALUE, (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, (progressValue) + '%');
-                    }
+                    this.calculateProgressbarPos();
                 }
                 else {
                     this.progressbar.style.setProperty(PROGRESSVALUE, ((100 / (this.steps.length - 1)) * index) + '%');
@@ -896,27 +875,65 @@ var Stepper = /** @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)) {
+                value = (progressPos.getBoundingClientRect().right - selectedEle.getBoundingClientRect().right +
+                    (selectedEle.offsetWidth / 2)) / progressPos.offsetWidth * 100;
+                this.progressbar.style.setProperty(PROGRESSVALUE, (value) + '%');
+            }
+            else {
+                this.progressbar.style.setProperty(PROGRESSVALUE, (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, (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 () {
@@ -983,6 +1000,7 @@ var Stepper = /** @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();
@@ -1129,6 +1147,66 @@ var Stepper = /** @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)) {
+            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.
      *
@@ -1142,38 +1220,7 @@ var Stepper = /** @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':
@@ -1181,21 +1228,7 @@ var Stepper = /** @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)) {
-                        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);
@@ -1204,15 +1237,7 @@ var Stepper = /** @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);