@syncfusion/ej2-navigations 25.2.6 → 26.1.35

package/src/stepper/stepper.js

@@ -42,7 +42,7 @@ var LABELAFTER = 'e-label-after';
 var LABELBEFORE = 'e-label-before';
 var VERTICALSTEP = 'e-vertical';
 var HORIZSTEP = 'e-horizontal';
-var STEPICON = 'e-step-icon';
+var STEPICON = 'e-step-item';
 var STEPTEXT = 'e-step-text';
 var TEXT = 'e-text';
 var STEPSLABEL = 'e-step-label';
@@ -163,7 +163,7 @@ var Stepper = /** @class */ (function (_super) {
     /**
      * To get component name.
      *
-     * @returns {string} - Module Name
+     * @returns {string} - It returns the current module name.
      * @private
      */
     Stepper.prototype.getModuleName = function () {
@@ -240,8 +240,10 @@ var Stepper = /** @class */ (function (_super) {
         }
     };
     Stepper.prototype.updateStepType = function () {
-        if (this.stepType.toLowerCase() === 'indicator' || 'label' || 'default') {
-            this.stepType.toLowerCase() !== 'default' ? this.element.classList.add('e-step-type-' + this.stepType.toLowerCase()) : '';
+        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();
             }
@@ -271,7 +273,10 @@ var Stepper = /** @class */ (function (_super) {
             var item = this.steps[parseInt(index.toString(), 10)];
             var status_1 = item.status.toLowerCase();
             if (isInitial && this.activeStep === 0 && index === 0) {
+                var prevOnChange = this.isProtectedOnChange;
+                this.isProtectedOnChange = true;
                 item.status = StepStatus.InProgress;
+                this.isProtectedOnChange = prevOnChange;
             }
             if (item && status_1 !== 'notstarted' && index === this.activeStep) {
                 for (var i = 0; i < this.steps.length; i++) {
@@ -316,12 +321,13 @@ var Stepper = /** @class */ (function (_super) {
                 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)];
             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) {
                     stepSpan.classList.add('e-icons', INDICATORICON);
                 }
-                if (!isIndicator) {
+                if (!isIndicator && item.isValid == null) {
                     stepSpan.classList.add('e-step-content');
                     stepSpan.innerHTML = (index + 1).toString();
                 }
@@ -329,15 +335,22 @@ var Stepper = /** @class */ (function (_super) {
             }
             else if (isNullOrUndefined(this.template) || this.template === '') {
                 var isRender = true;
-                var item = this.steps[parseInt(index.toString(), 10)];
-                if (item.iconCss && (((!item.text && !item.label) || !this.element.classList.contains(LABELINDICATOR)))) {
-                    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)]);
+                if ((item.iconCss || (!item.iconCss && item.text && item.label)) && (((!item.text && !item.label) ||
+                    !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)]);
+                        }
+                        this.stepperItemContainer.classList.add(STEPICON);
+                    }
+                    else if (!item.iconCss && item.text && item.label) {
+                        stepSpan.classList.add(ICONCSS);
+                        stepSpan.innerHTML = item.text;
+                        this.stepperItemContainer.classList.add(STEPICON);
                     }
                     this.stepperItemContainer.appendChild(stepSpan);
-                    this.stepperItemContainer.classList.add(STEPICON);
                     if ((this.element.classList.contains(HORIZSTEP) && (this.labelPosition.toLowerCase() === 'start' || this.labelPosition.toLowerCase() === 'end') && item.label) ||
                         (this.element.classList.contains(VERTICALSTEP) && (this.labelPosition.toLowerCase() === 'top' || this.labelPosition.toLowerCase() === 'bottom') && item.label)) {
                         this.element.classList.add('e-label-' + this.labelPosition.toLowerCase());
@@ -348,8 +361,13 @@ var Stepper = /** @class */ (function (_super) {
                         isRender = false;
                     }
                 }
-                if (item.text && (!item.iconCss || !this.element.classList.contains(STEPINDICATOR)) && isRender && !(item.iconCss && item.label)) {
-                    if (!item.iconCss && this.element.classList.contains(STEPINDICATOR)) {
+                if (item.text && (!item.iconCss || !this.element.classList.contains(STEPINDICATOR)) && isRender &&
+                    !(item.iconCss && item.label)) {
+                    if ((!item.iconCss && this.element.classList.contains(STEPINDICATOR)) ||
+                        ((!item.iconCss || this.element.classList.contains(LABELINDICATOR)) && !item.label)) {
+                        if (!item.iconCss && !item.label) {
+                            this.element.classList.add('e-step-type-indicator');
+                        }
                         this.checkValidState(item, stepSpan);
                         var prevOnChange = this.isProtectedOnChange;
                         this.isProtectedOnChange = true;
@@ -357,21 +375,13 @@ var Stepper = /** @class */ (function (_super) {
                         this.isProtectedOnChange = prevOnChange;
                     }
                     else {
-                        this.textContainer = this.createElement('span', { className: TEXTCSS });
                         var textSpan = this.createElement('span', { className: TEXT });
                         if (!item.label) {
                             textSpan.innerText = item.text;
-                            (item.isValid !== null && (!item.iconCss || this.element.classList.contains(LABELINDICATOR))) ? this.textContainer.appendChild(textSpan) : textSpan.classList.add(TEXTCSS);
-                            this.stepperItemContainer.appendChild((item.isValid !== null && (!item.iconCss || this.element.classList.contains(LABELINDICATOR))) ? this.textContainer : textSpan);
+                            textSpan.classList.add(TEXTCSS);
+                            this.stepperItemContainer.appendChild(textSpan);
                             this.stepperItemContainer.classList.add(STEPTEXT);
                         }
-                        if (!item.iconCss || this.element.classList.contains(LABELINDICATOR)) {
-                            this.stepperItemContainer.classList.add('e-step-text-only');
-                            if (!item.label && item.isValid !== null) {
-                                var iconSpan = this.createElement('span', { className: 'e-step-validation-icon e-icons' });
-                                this.textContainer.appendChild(iconSpan);
-                            }
-                        }
                         if (item.label && this.element.classList.contains(LABELINDICATOR)) {
                             textSpan.innerText = item.label;
                         }
@@ -381,25 +391,20 @@ var Stepper = /** @class */ (function (_super) {
                         this.isProtectedOnChange = prevOnChange;
                     }
                 }
-                if (item.cssClass) {
-                    addClass([this.stepperItemContainer], item.cssClass.trim().split(' '));
-                }
-                if (item.disabled) {
-                    this.stepperItemContainer.classList[item.disabled ? 'add' : 'remove'](DISABLED);
-                    attributes(this.stepperItemContainer, { 'tabindex': '-1', 'aria-disabled': 'true' });
-                }
                 if (item.label && (!item.iconCss || !this.element.classList.contains(STEPINDICATOR)) && isRender) {
                     if (!item.iconCss && !item.text && this.element.classList.contains(STEPINDICATOR)) {
                         this.checkValidState(item, stepSpan, true);
                     }
-                    else if ((!((this.element.classList.contains(LABELINDICATOR)) && item.text)) || (this.element.classList.contains(LABELINDICATOR) && item.label)) {
+                    else if ((!((this.element.classList.contains(LABELINDICATOR)) && item.text)) ||
+                        (this.element.classList.contains(LABELINDICATOR) && item.label)) {
                         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.updateLabelPosition();
-                        if ((!item.iconCss && !item.text) || this.element.classList.contains(LABELINDICATOR)) {
+                        if ((!item.iconCss && !item.text && !this.stepperItemContainer.classList.contains(STEPICON)) ||
+                            this.element.classList.contains(LABELINDICATOR)) {
                             this.stepperItemContainer.classList.add('e-step-label-only');
                             if (item.isValid !== null) {
                                 var iconSpan = this.createElement('span', { className: 'e-step-validation-icon e-icons' });
@@ -408,22 +413,37 @@ var Stepper = /** @class */ (function (_super) {
                         }
                     }
                 }
-                if (item.optional) {
-                    var optionalSpan = this.createElement('span', { className: OPTIONAL });
-                    this.l10n.setLocale(this.locale);
-                    var optionalContent = this.l10n.getConstant('optional');
-                    optionalSpan.innerText = optionalContent;
-                    if (item.label && (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))) {
-                        this.labelContainer.appendChild(optionalSpan);
-                    }
-                    else {
-                        this.stepperItemContainer.appendChild(optionalSpan);
-                    }
+            }
+            if (item.optional) {
+                var optionalSpan = this.createElement('span', { className: OPTIONAL });
+                this.l10n.setLocale(this.locale);
+                var optionalContent = this.l10n.getConstant('optional');
+                optionalSpan.innerText = optionalContent;
+                if (item.label && (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))) {
+                    this.labelContainer.appendChild(optionalSpan);
+                }
+                else {
+                    this.stepperItemContainer.appendChild(optionalSpan);
                 }
                 if (item.isValid !== null) {
-                    item.isValid ? this.stepperItemContainer.classList.add('e-step-valid') : this.stepperItemContainer.classList.add('e-step-error');
+                    this.stepperItemContainer.classList.add(item.isValid ? 'e-step-valid' : 'e-step-error');
+                }
+            }
+            if (item.cssClass) {
+                addClass([this.stepperItemContainer], item.cssClass.trim().split(' '));
+            }
+            if (item.disabled) {
+                this.stepperItemContainer.classList[item.disabled ? 'add' : 'remove'](DISABLED);
+                attributes(this.stepperItemContainer, { 'tabindex': '-1', 'aria-disabled': 'true' });
+            }
+            if (item.isValid !== null) {
+                if (item.isValid) {
+                    this.stepperItemContainer.classList.add('e-step-valid');
+                }
+                else {
+                    this.stepperItemContainer.classList.add('e-step-error');
                 }
             }
             this.renderItemContent(index, false);
@@ -462,7 +482,9 @@ var Stepper = /** @class */ (function (_super) {
         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 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;
@@ -519,7 +541,12 @@ var Stepper = /** @class */ (function (_super) {
         this.clearLabelPosition();
         this.labelContainer.classList.add('e-label-' + this.updateCurrentLabel());
         if (this.labelPosition.toLowerCase() === 'start' && this.orientation.toLowerCase() === 'vertical') {
-            this.stepperItemContainer.firstChild ? this.stepperItemContainer.firstChild.before(this.labelContainer) : this.stepperItemContainer.appendChild(this.labelContainer);
+            if (this.stepperItemContainer.firstChild) {
+                this.stepperItemContainer.firstChild.before(this.labelContainer);
+            }
+            else {
+                this.stepperItemContainer.appendChild(this.labelContainer);
+            }
         }
         else {
             this.stepperItemContainer.appendChild(this.labelContainer);
@@ -546,15 +573,31 @@ var Stepper = /** @class */ (function (_super) {
                 else {
                     iconEle = itemElement.querySelector('.' + ICONCSS);
                 }
+                if (!indicatorEle && this.element.classList.contains(STEPINDICATOR) && this.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');
                 if (indicatorEle) {
-                    indicatorEle.classList.add('e-icons', validStep ? 'e-check' : 'e-circle-info');
+                    indicatorEle.classList.remove(INDICATORICON);
+                    if (indicatorEle.innerHTML !== '') {
+                        indicatorEle.innerHTML = '';
+                    }
+                    indicatorEle.classList.add('e-icons', validStep ? 'e-check' : 'e-circle-info', ICONCSS);
+                }
+                if (this.renderDefault(index) && !this.element.classList.contains(STEPINDICATOR)) {
+                    var stepSpan = itemElement.querySelector('.e-step');
+                    stepSpan.classList.add('e-icons', validStep ? 'e-check' : 'e-circle-info', ICONCSS);
                 }
                 if (iconEle) {
-                    for (var i = 0; i < itemIcon.length; i++) {
-                        iconEle.classList.remove(itemIcon[parseInt(i.toString(), 10)]);
+                    if (iconEle.innerHTML !== '') {
+                        iconEle.innerHTML = '';
+                    }
+                    else if (itemIcon.length > 0) {
+                        for (var i = 0; i < itemIcon.length; i++) {
+                            iconEle.classList.remove(itemIcon[parseInt(i.toString(), 10)]);
+                        }
                     }
                     iconEle.classList.add('e-icons', validStep ? 'e-check' : 'e-circle-info');
                 }
@@ -611,7 +654,7 @@ var Stepper = /** @class */ (function (_super) {
                 this.updateTooltipContent(index);
                 this.tooltipObj.open(this.stepperItemElements[parseInt((index).toString(), 10)]);
                 if (this.stepType.toLocaleLowerCase() !== 'label' && ((this.stepType.toLocaleLowerCase() === 'indicator') ||
-                    (currentStep.label !== '' && currentStep.iconCss !== ''))) {
+                    (currentStep.label !== '' && currentStep.iconCss !== '') || (currentStep.label === null && currentStep.iconCss === '' && currentStep.text !== ''))) {
                     var tooltipPopupClass = currentStep.status.toLowerCase() === 'inprogress' ?
                         STEPPERTOOLTIP + " " + STEPPERIPROGRESSTIP + " " + (this.cssClass ? this.cssClass : '') : STEPPERTOOLTIP + " " + (this.cssClass ? this.cssClass : '');
                     this.tooltipObj.setProperties({ cssClass: tooltipPopupClass.trim() });
@@ -663,8 +706,12 @@ var Stepper = /** @class */ (function (_super) {
             this.removeItemContent(listItems[parseInt((index).toString(), 10)]);
         }
         if (this.template) {
-            isrerender ? listItems[parseInt((index).toString(), 10)].classList.add(TEMPLATE) :
+            if (isrerender) {
+                listItems[parseInt((index).toString(), 10)].classList.add(TEMPLATE);
+            }
+            else {
                 this.stepperItemContainer.classList.add(TEMPLATE);
+            }
             var item = this.steps[parseInt(index.toString(), 10)];
             append(this.templateFunction({ step: item, currentStep: index }, this, 'stepperTemplate', (this.element.id + '_stepperTemplate'), this.isStringTemplate), isrerender ? listItems[parseInt((index).toString(), 10)] : this.stepperItemContainer);
         }
@@ -721,7 +768,7 @@ var Stepper = /** @class */ (function (_super) {
             element: itemElement, event: e, isInteracted: isInteracted,
             previousStep: this.activeStep, activeStep: index, cancel: false
         };
-        if (isUpdated != false) {
+        if (isUpdated !== false) {
             var previousStep_1 = this.activeStep;
             this.trigger('stepChanging', eventArgs, function (args) {
                 if (args.cancel) {
@@ -758,13 +805,17 @@ 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) &&
+                    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;
+                        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;
+                            value = (progressPos.getBoundingClientRect().right - selectedEle.getBoundingClientRect().right +
+                                (selectedEle.offsetWidth / 2)) / progressPos.offsetWidth * 100;
                             this.progressbar.style.setProperty(PROGRESSVALUE, (value) + '%');
                         }
                         else {
@@ -778,15 +829,19 @@ var Stepper = /** @class */ (function (_super) {
                             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;
+                                    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);
+                                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;
+                        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) + '%');
                     }
                 }
@@ -815,7 +870,7 @@ var Stepper = /** @class */ (function (_super) {
             var prevOnChange_1 = this.isProtectedOnChange;
             this.isProtectedOnChange = true;
             if (isUpdated !== false) {
-                if (i < this.activeStep || (this.steps.length - 1 === this.activeStep && item.status.toLowerCase() === "completed")) {
+                if (i < this.activeStep || (this.steps.length - 1 === this.activeStep && item.status.toLowerCase() === 'completed')) {
                     item.status = StepStatus.Completed;
                 }
                 else if (i === this.activeStep) {
@@ -827,17 +882,17 @@ var Stepper = /** @class */ (function (_super) {
                 if (stepStatus && this.activeStep === i) {
                     item.status = stepStatus;
                 }
-                if (item.status.toLowerCase() === "completed") {
+                if (item.status.toLowerCase() === 'completed') {
                     itemElement.classList.remove(SELECTED, INPROGRESS, NOTSTARTED);
                     itemElement.classList.add(COMPLETED);
                 }
-                if (item.status.toLowerCase() === "notstarted") {
+                if (item.status.toLowerCase() === 'notstarted') {
                     itemElement.classList.remove(SELECTED, INPROGRESS, COMPLETED);
                     itemElement.classList.add(NOTSTARTED);
                 }
             }
             this.isProtectedOnChange = prevOnChange_1;
-            if (this.renderDefault(i) && this.element.classList.contains(STEPINDICATOR)) {
+            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');
@@ -977,10 +1032,10 @@ var Stepper = /** @class */ (function (_super) {
             }
             if ((e.action === 'home' || e.action === 'end')) {
                 if (e.action === 'home') {
-                    isRTL ? index = stepItems.length - 1 : index = 0;
+                    index = isRTL ? stepItems.length - 1 : 0;
                 }
                 else {
-                    isRTL ? index = 0 : index = stepItems.length - 1;
+                    index = isRTL ? 0 : stepItems.length - 1;
                 }
             }
             if (index >= 0 && index < stepItems.length) {
@@ -1010,10 +1065,18 @@ var Stepper = /** @class */ (function (_super) {
         this.updateElementClassArray();
         this.removeItemElements();
         this.element.querySelector('.e-stepper-progressbar').remove();
-        isUpdate ? this.updatePosition() : null;
-        isStepType ? this.updateStepType() : null;
-        this.readOnly ? (!this.element.classList.contains(READONLY)) ? this.element.classList.add(READONLY) : null : null;
-        this.enableRtl ? (!this.element.classList.contains(RTL)) ? this.element.classList.add(RTL) : null : null;
+        if (isUpdate) {
+            this.updatePosition();
+        }
+        if (isStepType) {
+            this.updateStepType();
+        }
+        if (this.readOnly && !this.element.classList.contains(READONLY)) {
+            this.element.classList.add(READONLY);
+        }
+        if (this.enableRtl && !this.element.classList.contains(RTL)) {
+            this.element.classList.add(RTL);
+        }
         this.updateOrientaion(this.element);
         this.renderItems();
         this.renderProgressBar(this.element);
@@ -1068,8 +1131,10 @@ 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 = (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) {

package/src/stepper-base/stepper-base-model.d.ts

@@ -1,4 +1,4 @@
-import { Component, INotifyPropertyChanged, NotifyPropertyChanges, Property, ChildProperty, Collection, removeClass, Event, EmitType } from '@syncfusion/ej2-base';
+import { Component, INotifyPropertyChanged, NotifyPropertyChanges, Property, ChildProperty, Collection, Event, EmitType, isNullOrUndefined } from '@syncfusion/ej2-base';
 import {StepStatus,StepperOrientation} from "./stepper-base";
 import {ComponentModel} from '@syncfusion/ej2-base';
 

package/src/stepper-base/stepper-base.d.ts

@@ -152,14 +152,14 @@ export declare class StepperBase extends Component<HTMLElement> implements INoti
      * This method is abstract member of the Component<HTMLElement>.
      *
      * @private
-     * @returns {string}
+     * @returns {string} - It returns the current module name.
      */
     getModuleName(): string;
     /**
      * This method is abstract member of the Component<HTMLElement>.
      *
      * @private
-     * @returns {string}
+     * @returns {string} - It returns the persisted data.
      */
     protected getPersistData(): string;
     /**
@@ -175,8 +175,8 @@ export declare class StepperBase extends Component<HTMLElement> implements INoti
     /**
      * This method is abstract member of the Component<HTMLElement>.
      *
-     * @param newProp
-     * @param oldProp
+     * @param  {StepperBaseModel} newProp - Specifies new properties
+     * @param  {StepperBaseModel} oldProp - Specifies old properties
      * @private
      * @returns {void}
      */

package/src/stepper-base/stepper-base.js

@@ -17,7 +17,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { Component, NotifyPropertyChanges, Property, ChildProperty, Collection, Event } from '@syncfusion/ej2-base';
+import { Component, NotifyPropertyChanges, Property, ChildProperty, Collection, Event, isNullOrUndefined } from '@syncfusion/ej2-base';
 var PROGRESSVALUE = '--progress-value';
 /**
  * Defines the status of the step.
@@ -107,13 +107,14 @@ var StepperBase = /** @class */ (function (_super) {
      * @private
      * @returns {void}
      */
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
     StepperBase.prototype.preRender = function () {
     };
     /**
      * This method is abstract member of the Component<HTMLElement>.
      *
      * @private
-     * @returns {string}
+     * @returns {string} - It returns the current module name.
      */
     StepperBase.prototype.getModuleName = function () {
         return 'stepperBase';
@@ -122,7 +123,7 @@ var StepperBase = /** @class */ (function (_super) {
      * This method is abstract member of the Component<HTMLElement>.
      *
      * @private
-     * @returns {string}
+     * @returns {string} - It returns the persisted data.
      */
     StepperBase.prototype.getPersistData = function () {
         return this.addOnPersist([]);
@@ -133,13 +134,16 @@ var StepperBase = /** @class */ (function (_super) {
      * @private
      * @returns {void}
      */
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
     StepperBase.prototype.render = function () {
     };
     StepperBase.prototype.updateOrientaion = function (wrapper) {
         if (wrapper.classList.contains('e-horizontal') || wrapper.classList.contains('e-vertical')) {
-            wrapper.classList.contains('e-horizontal') ? wrapper.classList.remove('e-horizontal') : wrapper.classList.remove('e-vertical');
+            wrapper.classList.remove('e-horizontal', 'e-vertical');
+        }
+        if (!(isNullOrUndefined(this.orientation))) {
+            wrapper.classList.add('e-' + this.orientation.toLocaleLowerCase());
         }
-        wrapper.classList.add('e-' + this.orientation.toLocaleLowerCase());
     };
     StepperBase.prototype.renderProgressBar = function (wrapper) {
         this.progressStep = this.createElement('div', { className: 'e-stepper-progressbar' });
@@ -167,7 +171,7 @@ var StepperBase = /** @class */ (function (_super) {
     StepperBase.prototype.setProgressPosition = function (wrapper, isResize) {
         var stepItemContainer = (wrapper.querySelector('.e-step-container'));
         var stepItemEle = stepItemContainer.firstElementChild;
-        if (isResize != true) {
+        if (isResize !== true) {
             var topPos = 0;
             if (wrapper.classList.contains('e-label-before')) {
                 topPos = (stepItemContainer.offsetParent.offsetHeight - (stepItemEle.offsetHeight / 2) - 1);
@@ -191,11 +195,12 @@ var StepperBase = /** @class */ (function (_super) {
     /**
      * This method is abstract member of the Component<HTMLElement>.
      *
-     * @param newProp
-     * @param oldProp
+     * @param  {StepperBaseModel} newProp - Specifies new properties
+     * @param  {StepperBaseModel} oldProp - Specifies old properties
      * @private
      * @returns {void}
      */
+    // eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars
     StepperBase.prototype.onPropertyChanged = function (newProp, oldProp) {
     };
     __decorate([

package/src/tab/tab-model.d.ts

@@ -154,7 +154,7 @@ export interface TabItemModel {
      *
      * @default -1
      */
-    tabIndex?: number
+    tabIndex?: number;
 
 }
 

package/src/tab/tab.d.ts

@@ -289,9 +289,6 @@ export declare class Tab extends Component<HTMLElement> implements INotifyProper
     private draggingItems;
     private draggableItems;
     private tbId;
-    private isAngular;
-    private isReact;
-    private isVue;
     private resizeContext;
     /**
      * Contains the keyboard configuration of the Tab.

package/src/tab/tab.js

@@ -534,7 +534,7 @@ var Tab = /** @class */ (function (_super) {
                 }
             }
             var tabIndex = isNOU(item.tabIndex) ? '-1' : item.tabIndex.toString();
-            var wrapAttrs = (item.disabled) ? {} : { tabIndex: tabIndex, 'data-tabindex': tabIndex, role: 'tab', 'aria-selected': 'false', 'aria-disabled': 'false' };
+            var wrapAttrs = (item.disabled) ? { role: 'tab', 'aria-disabled': 'true' } : { tabIndex: tabIndex, 'data-tabindex': tabIndex, role: 'tab', 'aria-selected': 'false', 'aria-disabled': 'false' };
             tCont.appendChild(_this.btnCls.cloneNode(true));
             var wrap = _this.createElement('div', { className: CLS_WRAP, attrs: wrapAttrs });
             wrap.appendChild(tCont);
@@ -945,7 +945,7 @@ var Tab = /** @class */ (function (_super) {
         }
     };
     Tab.prototype.setCssClass = function (ele, cls, val) {
-        if (cls === '') {
+        if (cls === '' || isNOU(cls)) {
             return;
         }
         var list = cls.split(' ');

package/src/toolbar/toolbar-model.d.ts

@@ -236,7 +236,7 @@ export interface ToolbarModel extends ComponentModel{
      * * If the popup content overflows the height of the page, the rest of the elements will be hidden.
      *
      * {% codeBlock src='toolbar/scrollStep/index.md' %}{% endcodeBlock %}
-     * 
+     *
      * @default null
      */
     scrollStep?: number;