@syncfusion/ej2-navigations 23.2.7 → 24.1.41

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

@@ -1,6 +1,6 @@
 import { Animation, Browser, ChildProperty, Collection, Complex, Component, Draggable, Droppable, Event, EventHandler, KeyboardEvents, L10n, NotifyPropertyChanges, Property, SanitizeHtmlHelper, Touch, addClass, animationMode, append, attributes, classList, closest, compile, createElement, detach, extend, formatUnit, getElement, getInstance, getRandomId, getUniqueID, getValue, initializeCSPTemplate, isBlazor, isNullOrUndefined, isRippleEnabled, isUndefined, isVisible, matches, merge, remove, removeClass, rippleEffect, select, selectAll, setStyleAttribute, setValue } from '@syncfusion/ej2-base';
 import { ListBase } from '@syncfusion/ej2-lists';
-import { Popup, calculatePosition, createSpinner, fit, getScrollableParent, getZindexPartial, hideSpinner, isCollide, showSpinner } from '@syncfusion/ej2-popups';
+import { Popup, Tooltip, calculatePosition, createSpinner, fit, getScrollableParent, getZindexPartial, hideSpinner, isCollide, showSpinner } from '@syncfusion/ej2-popups';
 import { Button, createCheckBox, rippleMouseHandler } from '@syncfusion/ej2-buttons';
 import { DataManager, Query } from '@syncfusion/ej2-data';
 import { Input } from '@syncfusion/ej2-inputs';
@@ -1262,6 +1262,10 @@ let MenuBase = class MenuBase extends Component {
                 }
             }
         }
+        else {
+            this.element.parentElement.setAttribute('role', 'dialog');
+            this.element.parentElement.setAttribute('aria-label', 'context menu');
+        }
     }
     wireEvents() {
         const wrapper = this.getWrapper();
@@ -4044,6 +4048,10 @@ let Toolbar = class Toolbar extends Component {
             if (this.cssClass) {
                 addClass([innerItems[0]], this.cssClass.split(' '));
             }
+            const scrollEle = this.scrollModule.element.querySelector('.' + CLS_HSCROLLBAR$1 + ', .' + 'e-vscroll-bar');
+            if (scrollEle) {
+                scrollEle.removeAttribute('tabindex');
+            }
             this.remove(this.scrollModule.element, CLS_TBARPOS);
             setStyleAttribute(this.element, { overflow: 'hidden' });
         }
@@ -8648,7 +8656,6 @@ let Tab = class Tab extends Component {
         const scrCnt = select('.' + this.scrCntClass, this.tbItems);
         if (!this.isVertical() && !isNullOrUndefined(scrCnt)) {
             const scrBar = select('.e-hscroll-bar', this.tbItems);
-            scrBar.removeAttribute('tabindex');
             const scrStart = scrBar.scrollLeft;
             const scrEnd = scrStart + scrBar.offsetWidth;
             const eleStart = target.offsetLeft;
@@ -10035,9 +10042,11 @@ let TreeView = TreeView_1 = class TreeView extends Component {
     setDisabledMode() {
         if (this.disabled) {
             this.element.classList.add(DISABLED$1);
+            this.element.setAttribute('aria-disabled', 'true');
         }
         else {
             this.element.classList.remove(DISABLED$1);
+            this.element.setAttribute('aria-disabled', 'false');
         }
     }
     setEnableRtl() {
@@ -10060,12 +10069,11 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         (isEnabled ? addClass : removeClass)([this.element], FULLROWWRAP);
     }
     setMultiSelect(isEnabled) {
-        const firstUl = select('.' + PARENTITEM, this.element);
         if (isEnabled) {
-            firstUl.setAttribute('aria-multiselectable', 'true');
+            this.element.setAttribute('aria-multiselectable', 'true');
         }
         else {
-            firstUl.removeAttribute('aria-multiselectable');
+            this.element.setAttribute('aria-multiselectable', 'false');
         }
     }
     // eslint-disable-next-line
@@ -10430,7 +10438,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         if (this.showCheckBox) {
             let checkboxEle = createCheckBox(this.createElement, true, { cssClass: this.touchClass });
             checkboxEle.setAttribute('role', 'checkbox');
-            checkboxEle.setAttribute('aria-label', 'checkbox');
+            checkboxEle.setAttribute('aria-label', e.text);
             let icon = select('div.' + ICON, e.item);
             let id = e.item.getAttribute('data-uid');
             e.item.childNodes[0].insertBefore(checkboxEle, e.item.childNodes[0].childNodes[isNullOrUndefined(icon) ? 0 : 1]);
@@ -15691,7 +15699,9 @@ let Breadcrumb = class Breadcrumb extends Component {
     }
     initialize() {
         this._maxItems = this.maxItems;
-        this.element.setAttribute('aria-label', 'breadcrumb');
+        if (isNullOrUndefined(this.element.getAttribute('aria-label'))) {
+            this.element.setAttribute('aria-label', 'breadcrumb');
+        }
         if (this.cssClass) {
             addClass([this.element], this.cssClass.replace(/\s+/g, ' ').trim().split(' '));
         }
@@ -16018,6 +16028,9 @@ let Breadcrumb = class Breadcrumb extends Component {
     }
     beforeItemRenderChanges(prevItem, currItem, elem, isRightIcon) {
         const wrapElem = elem.querySelector('.e-anchor-wrap');
+        if (wrapElem) {
+            wrapElem.parentElement.setAttribute('aria-label', 'home');
+        }
         if (currItem.text !== prevItem.text) {
             wrapElem.childNodes.forEach((child) => {
                 if (child.nodeType === Node.TEXT_NODE) {
@@ -16642,7 +16655,7 @@ let Carousel = class Carousel extends Component {
         }
         addClass([this.element], carouselClasses);
         setStyleAttribute(this.element, { 'width': formatUnit(this.width), 'height': formatUnit(this.height) });
-        attributes(this.element, { 'tabindex': '0', 'role': 'group', 'aria-roledescription': 'carousel', 'aria-label': this.localeObj.getConstant('slideShow') });
+        attributes(this.element, { 'role': 'group', 'aria-roledescription': 'carousel', 'aria-label': this.localeObj.getConstant('slideShow') });
         if (!isNullOrUndefined(this.htmlAttributes)) {
             this.setHtmlAttributes(this.htmlAttributes, this.element);
         }
@@ -16650,7 +16663,7 @@ let Carousel = class Carousel extends Component {
     renderSlides() {
         let slideContainer = this.element.querySelector('.' + CLS_SLIDE_CONTAINER);
         if (!slideContainer) {
-            slideContainer = this.createElement('div', { className: CLS_SLIDE_CONTAINER });
+            slideContainer = this.createElement('div', { className: CLS_SLIDE_CONTAINER, attrs: { 'tabindex': '0', 'role': 'tabpanel' } });
             this.element.appendChild(slideContainer);
         }
         this.itemsContainer = this.createElement('div', { className: CLS_ITEMS$2, attrs: { 'aria-live': this.autoPlay ? 'off' : 'polite' } });
@@ -17545,7 +17558,7 @@ let Carousel = class Carousel extends Component {
         this.unWireEvents();
         [].slice.call(this.element.children).forEach((ele) => { this.element.removeChild(ele); });
         removeClass([this.element], [CLS_CAROUSEL, this.cssClass, CLS_RTL$5, CLS_SWIPE]);
-        ['tabindex', 'role', 'style'].forEach((attr) => { this.element.removeAttribute(attr); });
+        ['role', 'style'].forEach((attr) => { this.element.removeAttribute(attr); });
         this.itemsContainer = null;
         super.destroy();
     }
@@ -17837,9 +17850,1331 @@ AppBar = __decorate$12([
 
 /** AppBar export modules */
 
+var __decorate$13 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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;
+};
+const PROGRESSVALUE = '--progress-value';
+/**
+ * Defines the status of the step.
+ */
+var StepStatus;
+(function (StepStatus) {
+    /**
+     * Shows the status of the step is not started.
+     */
+    StepStatus["NotStarted"] = "NotStarted";
+    /**
+     * Shows the step is in progress.
+     */
+    StepStatus["InProgress"] = "InProgress";
+    /**
+     * Shows the status of the step is completed.
+     */
+    StepStatus["Completed"] = "Completed";
+})(StepStatus || (StepStatus = {}));
+/**
+ * Specifies the steps of the Stepper.
+ */
+class Step extends ChildProperty {
+}
+__decorate$13([
+    Property('')
+], Step.prototype, "cssClass", void 0);
+__decorate$13([
+    Property(false)
+], Step.prototype, "disabled", void 0);
+__decorate$13([
+    Property('')
+], Step.prototype, "iconCss", void 0);
+__decorate$13([
+    Property(null)
+], Step.prototype, "isValid", void 0);
+__decorate$13([
+    Property('')
+], Step.prototype, "label", void 0);
+__decorate$13([
+    Property(false)
+], Step.prototype, "optional", void 0);
+__decorate$13([
+    Property(StepStatus.NotStarted)
+], Step.prototype, "status", void 0);
+__decorate$13([
+    Property('')
+], Step.prototype, "text", void 0);
+/**
+ * Defines the orientation type of the Stepper.
+ */
+var StepperOrientation;
+(function (StepperOrientation) {
+    /**
+     * Steps are displayed horizontally.
+     */
+    StepperOrientation["Horizontal"] = "Horizontal";
+    /**
+     * Steps are displayed vertically.
+     */
+    StepperOrientation["Vertical"] = "Vertical";
+})(StepperOrientation || (StepperOrientation = {}));
+/**
+ * StepperBase component act as base class to the stepper component.
+ */
+let StepperBase = class StepperBase extends Component {
+    /**
+     * * Constructor for Base class
+     *
+     * @param {StepperBaseModel} options - Specifies the Base model.
+     * @param {string | HTMLElement} element - Specifies the element to render as component.
+     * @private
+     */
+    constructor(options, element) {
+        super(options, element);
+    }
+    /**
+     * This method is abstract member of the Component<HTMLElement>.
+     *
+     * @private
+     * @returns {void}
+     */
+    preRender() {
+    }
+    /**
+     * This method is abstract member of the Component<HTMLElement>.
+     *
+     * @private
+     * @returns {string}
+     */
+    getModuleName() {
+        return 'stepperBase';
+    }
+    /**
+     * This method is abstract member of the Component<HTMLElement>.
+     *
+     * @private
+     * @returns {string}
+     */
+    getPersistData() {
+        return this.addOnPersist([]);
+    }
+    /**
+     * This method is abstract member of the Component<HTMLElement>.
+     *
+     * @private
+     * @returns {void}
+     */
+    render() {
+    }
+    updateOrientaion(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.add('e-' + this.orientation.toLocaleLowerCase());
+    }
+    renderProgressBar(wrapper) {
+        this.progressStep = this.createElement('div', { className: 'e-stepper-progressbar' });
+        this.progressbar = this.createElement('div', { className: 'e-progressbar-value' });
+        this.progressStep.appendChild(this.progressbar);
+        wrapper.prepend(this.progressStep);
+        this.progressbar.style.setProperty(PROGRESSVALUE, (0) + '%');
+        const beforeLabel = (wrapper.querySelector('li').querySelector('.e-step-label-container'));
+        if (wrapper.classList.contains('e-vertical')) {
+            if (wrapper.classList.contains('e-label-bottom') || wrapper.classList.contains('e-label-top')) {
+                const stepsContainer = (wrapper.querySelector('.e-stepper-steps'));
+                this.progressStep.style.setProperty('--progress-position', (stepsContainer.offsetWidth / 2) + 'px');
+            }
+            else {
+                this.progressStep.style.setProperty('--progress-position', ((this.progressBarPosition / 2) - 1) + 'px');
+            }
+        }
+        if (beforeLabel && (beforeLabel.classList.contains('e-label-before'))) {
+            this.progressStep.style.setProperty('--progress-position', (((this.progressBarPosition) - 1)) + 5 + 'px');
+        }
+        if (wrapper.classList.contains('e-horizontal')) {
+            this.setProgressPosition(wrapper);
+        }
+    }
+    setProgressPosition(wrapper, isResize) {
+        const stepItemContainer = (wrapper.querySelector('.e-step-container'));
+        const stepItemEle = stepItemContainer.firstElementChild;
+        if (isResize != true) {
+            let topPos = 0;
+            if (wrapper.classList.contains('e-label-before')) {
+                topPos = (stepItemContainer.offsetParent.offsetHeight - (stepItemEle.offsetHeight / 2) - 1);
+            }
+            else {
+                topPos = (stepItemEle.offsetHeight / 2);
+            }
+            this.progressStep.style.setProperty('--progress-top-position', topPos + 'px');
+        }
+        const lastEle = wrapper.querySelector('.e-stepper-steps').lastChild.firstChild;
+        if (wrapper.classList.contains('e-rtl')) {
+            const leftPost = ((stepItemEle.offsetLeft + stepItemEle.offsetWidth) - wrapper.querySelector('.e-stepper-steps').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');
+        }
+        else {
+            this.progressStep.style.setProperty('--progress-left-position', (stepItemEle.offsetLeft + 1) + 'px');
+            this.progressStep.style.setProperty('--progress-bar-width', ((lastEle.offsetWidth + lastEle.offsetLeft - 2) - (stepItemEle.offsetLeft + 2)) + 'px');
+        }
+    }
+    /**
+     * This method is abstract member of the Component<HTMLElement>.
+     *
+     * @param newProp
+     * @param oldProp
+     * @private
+     * @returns {void}
+     */
+    onPropertyChanged(newProp, oldProp) {
+    }
+};
+__decorate$13([
+    Collection([], Step)
+], StepperBase.prototype, "steps", void 0);
+__decorate$13([
+    Property('')
+], StepperBase.prototype, "cssClass", void 0);
+__decorate$13([
+    Property(false)
+], StepperBase.prototype, "readOnly", void 0);
+__decorate$13([
+    Property(StepperOrientation.Horizontal)
+], StepperBase.prototype, "orientation", void 0);
+__decorate$13([
+    Event()
+], StepperBase.prototype, "created", void 0);
+StepperBase = __decorate$13([
+    NotifyPropertyChanges
+], StepperBase);
+
+/**
+ * export all modules from current location
+ */
+
+var __decorate$14 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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;
+};
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference
+///<reference path='../stepper-base/stepper-base-model.d.ts'/>
+const ITEMCONTAINER = 'e-step-container';
+const ITEMLIST = 'e-stepper-steps';
+const ICONCSS = 'e-indicator';
+const TEXTCSS = 'e-step-text-container';
+const STEPLABEL = 'e-step-label-container';
+const OPTIONAL = 'e-step-label-optional';
+const SELECTED$2 = 'e-step-selected';
+const INPROGRESS = 'e-step-inprogress';
+const NOTSTARTED = 'e-step-notstarted';
+const FOCUS$1 = 'e-step-focus';
+const COMPLETED = 'e-step-completed';
+const DISABLED$2 = 'e-step-disabled';
+const READONLY = 'e-stepper-readonly';
+const PROGRESSVALUE$1 = '--progress-value';
+const RTL$3 = 'e-rtl';
+const TEMPLATE = 'e-step-template';
+const LABELAFTER = 'e-label-after';
+const LABELBEFORE = 'e-label-before';
+const VERTICALSTEP = 'e-vertical';
+const HORIZSTEP = 'e-horizontal';
+const STEPICON = 'e-step-icon';
+const STEPTEXT = 'e-step-text';
+const TEXT = 'e-text';
+const STEPSLABEL = 'e-step-label';
+const LABEL = 'e-label';
+const STEPINDICATOR = 'e-step-type-indicator';
+const LABELINDICATOR = 'e-step-type-label';
+const INDICATORICON = 'e-step-indicator';
+const STEPPERTOOLTIP = 'e-stepper-tooltip';
+const STEPPERIPROGRESSTIP = 'e-step-inprogress-tip';
+/**
+ * Defines the step progress animation of the Stepper.
+ */
+class StepperAnimationSettings extends ChildProperty {
+}
+__decorate$14([
+    Property(true)
+], StepperAnimationSettings.prototype, "enable", void 0);
+__decorate$14([
+    Property(2000)
+], StepperAnimationSettings.prototype, "duration", void 0);
+__decorate$14([
+    Property(0)
+], StepperAnimationSettings.prototype, "delay", void 0);
+/**
+ * Defines the label position in the Stepper.
+ */
+var StepLabelPosition;
+(function (StepLabelPosition) {
+    /**
+     * Displays the label on top position regardless of the Stepper's orientation.
+     */
+    StepLabelPosition["Top"] = "Top";
+    /**
+     * Displays the label on bottom position regardless of the Stepper's orientation.
+     */
+    StepLabelPosition["Bottom"] = "Bottom";
+    /**
+     * Displays the label on left side regardless of the Stepper's orientation.
+     */
+    StepLabelPosition["Start"] = "Start";
+    /**
+     * Displays the label on right side regardless of the Stepper's orientation.
+     */
+    StepLabelPosition["End"] = "End";
+})(StepLabelPosition || (StepLabelPosition = {}));
+/**
+ * Defines whether steps are display with only indicator, only labels or combination of both.
+ */
+var StepType;
+(function (StepType) {
+    /**
+     * Steps are shown indicator with label defined.
+     */
+    StepType["Default"] = "Default";
+    /**
+     * Steps are shown with only label.
+     */
+    StepType["Label"] = "Label";
+    /**
+     * Steps are shown with only indicator.
+     */
+    StepType["Indicator"] = "Indicator";
+})(StepType || (StepType = {}));
+/**
+ * The Stepper component visualizes several steps and indicates the current progress by highlighting already completed steps.
+ *
+ * ```html
+ * <nav id="stepper"></nav>
+ * ```
+ * ```typescript
+ * <script>
+ *   let stepperObj: Stepper = new Stepper({steps : [{}, {}, {}, {}, {}]});
+ *   stepperObj.appendTo('#stepper');
+ * </script>
+ * ```
+ */
+let Stepper = class Stepper extends StepperBase {
+    /**
+     * * Constructor for creating the Stepper component.
+     *
+     * @param {StepperModel} options - Specifies the Stepper model.
+     * @param {string | HTMLElement} element - Specifies the element to render as component.
+     * @private
+     */
+    constructor(options, element) {
+        super(options, element);
+        this.stepperItemElements = [];
+    }
+    preRender() {
+        if (!this.element.id) {
+            this.element.id = getUniqueID('e-' + this.getModuleName());
+        }
+        const localeText = { optional: 'Optional' };
+        this.l10n = new L10n('stepper', localeText, this.locale);
+        this.keyConfigs = {
+            downarrow: 'downarrow',
+            leftarrow: 'leftarrow',
+            rightarrow: 'rightarrow',
+            uparrow: 'uparrow',
+            space: 'space',
+            enter: 'enter',
+            home: 'home',
+            end: 'end',
+            tab: 'tab',
+            escape: 'escape'
+        };
+        this.tooltipOpen = false;
+    }
+    /**
+     * To get component name.
+     *
+     * @returns {string} - Module Name
+     * @private
+     */
+    getModuleName() {
+        return 'stepper';
+    }
+    render() {
+        this.initialize();
+        this.navigationHandler(this.activeStep, null, false);
+        this.updateStepperStatus(true);
+    }
+    initialize() {
+        this.element.setAttribute('aria-label', this.element.id);
+        this.updatePosition();
+        this.stepperItemList = this.createElement('ol', { className: ITEMLIST });
+        this.updateOrientaion(this.element);
+        this.updateStepType();
+        this.element.appendChild(this.stepperItemList);
+        if (this.cssClass) {
+            addClass([this.element], this.cssClass.trim().split(' '));
+        }
+        if (this.readOnly) {
+            this.element.classList.add(READONLY);
+        }
+        if (this.enableRtl) {
+            this.element.classList.add(RTL$3);
+        }
+        this.wireEvents();
+        this.updateTemplateFunction();
+        this.renderItems();
+        if (this.steps.length > 0) {
+            if (this.steps.length > 1) {
+                if (this.isAngular && this.template) {
+                    setTimeout(() => {
+                        this.renderProgressBar(this.element);
+                    });
+                }
+                else {
+                    this.renderProgressBar(this.element);
+                }
+            }
+            this.checkValidStep();
+            this.updateAnimation();
+            this.updateTooltip();
+            this.wireKeyboardEvent();
+        }
+    }
+    updatePosition() {
+        this.progressBarPosition = this.beforeLabelWidth = this.textEleWidth = 0;
+    }
+    renderDefault(index) {
+        return (!this.steps[parseInt((index).toString(), 10)].iconCss && !this.steps[parseInt((index).toString(), 10)].text &&
+            !this.steps[parseInt((index).toString(), 10)].label) ? true : false;
+    }
+    updateAnimation() {
+        const progressEle = this.element.querySelector('.e-progressbar-value');
+        if (this.animation.enable) {
+            if (this.animation.duration >= 0) {
+                if (progressEle) {
+                    progressEle.style.setProperty('--duration', ((this.animation.duration) + 'ms'));
+                }
+            }
+            if (this.animation.delay >= 0) {
+                if (progressEle) {
+                    progressEle.style.setProperty('--delay', ((this.animation.delay) + 'ms'));
+                }
+            }
+        }
+        else {
+            if (progressEle) {
+                progressEle.style.setProperty('--delay', (0 + 'ms'));
+                progressEle.style.setProperty('--duration', (0 + 'ms'));
+            }
+        }
+    }
+    updateStepType() {
+        if (this.stepType.toLowerCase() === 'indicator' || 'label' || 'default') {
+            this.stepType.toLowerCase() !== 'default' ? this.element.classList.add('e-step-type-' + this.stepType.toLowerCase()) : '';
+            if (((this.stepType.toLowerCase() === 'indicator' || 'label') && (this.labelContainer))) {
+                this.clearLabelPosition();
+            }
+        }
+    }
+    wireEvents() {
+        EventHandler.add(window, 'resize', () => {
+            if (this.stepperItemList && this.progressbar && this.element.classList.contains(HORIZSTEP)) {
+                this.setProgressPosition(this.element, true);
+            }
+        }, this);
+        EventHandler.add(window, 'click', () => { this.updateStepFocus(); }, this);
+    }
+    updateStepFocus() {
+        if (this.isKeyNavFocus) {
+            this.isKeyNavFocus = false;
+            const isFocus = this.element.querySelector('.' + FOCUS$1);
+            if (isFocus) {
+                isFocus.classList.remove(FOCUS$1);
+                this.element.classList.remove('e-steps-focus');
+            }
+        }
+    }
+    updateStepperStatus(isInitial) {
+        for (let index = 0; index < this.steps.length; index++) {
+            const item = this.steps[parseInt(index.toString(), 10)];
+            const status = item.status.toLowerCase();
+            if (isInitial && this.activeStep === 0 && index === 0) {
+                item.status = StepStatus.InProgress;
+            }
+            if (item && status !== 'notstarted' && index === this.activeStep) {
+                for (let i = 0; i < this.steps.length; i++) {
+                    const itemElement = this.stepperItemElements[parseInt(i.toString(), 10)];
+                    itemElement.classList.remove(SELECTED$2, INPROGRESS, COMPLETED, NOTSTARTED);
+                    const prevOnChange = this.isProtectedOnChange;
+                    this.isProtectedOnChange = true;
+                    if (status === 'completed') {
+                        this.updateStatusClass(i, index, itemElement);
+                    }
+                    else {
+                        this.updateStatusClass(i, index, itemElement, true);
+                    }
+                    this.isProtectedOnChange = prevOnChange;
+                }
+            }
+            else if (item && status !== 'notstarted' && index !== this.activeStep) {
+                this.navigationHandler(this.activeStep, null, true);
+            }
+        }
+    }
+    updateStatusClass(currentStep, index, ele, isInprogress) {
+        const stepItem = this.steps[parseInt(currentStep.toString(), 10)];
+        if (currentStep < index) {
+            ele.classList.add(COMPLETED);
+            stepItem.status = StepStatus.Completed;
+        }
+        else if (currentStep === index) {
+            ele.classList.add(isInprogress ? INPROGRESS : COMPLETED, SELECTED$2);
+        }
+        else {
+            ele.classList.add(NOTSTARTED);
+        }
+    }
+    renderItems() {
+        for (let index = 0; index < this.steps.length; index++) {
+            this.stepperItemContainer = this.createElement('li', { className: ITEMCONTAINER });
+            this.stepperItemContainer.classList[(index === 0) ? 'add' : 'remove'](SELECTED$2, INPROGRESS);
+            this.stepperItemContainer.classList[(index !== 0) ? 'add' : 'remove'](NOTSTARTED);
+            if (this.element.classList.contains(HORIZSTEP)) {
+                this.stepperItemContainer.style.setProperty('--max-width', 100 / this.steps.length + '%');
+            }
+            const stepSpan = this.createElement('span', { className: 'e-step' });
+            if (this.renderDefault(index) && (isNullOrUndefined(this.template) || this.template === '')) {
+                const isIndicator = (!this.element.classList.contains('e-step-type-default') && this.stepType.toLowerCase() === 'indicator') ? true : false;
+                if (isIndicator) {
+                    stepSpan.classList.add('e-icons', INDICATORICON);
+                }
+                if (!isIndicator) {
+                    stepSpan.classList.add('e-step-content');
+                    stepSpan.innerHTML = (index + 1).toString();
+                }
+                this.stepperItemContainer.appendChild(stepSpan);
+            }
+            else if (isNullOrUndefined(this.template) || this.template === '') {
+                let isRender = true;
+                const item = this.steps[parseInt(index.toString(), 10)];
+                if (item.iconCss && (((!item.text && !item.label) || !this.element.classList.contains(LABELINDICATOR)))) {
+                    const itemIcon = item.iconCss.trim().split(' ');
+                    stepSpan.classList.add(ICONCSS);
+                    for (let i = 0; i < itemIcon.length; i++) {
+                        stepSpan.classList.add(itemIcon[parseInt(i.toString(), 10)]);
+                    }
+                    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());
+                        const textSpan = this.createElement('span', { className: TEXTCSS + ' ' + TEXT });
+                        textSpan.innerText = item.label;
+                        this.stepperItemContainer.appendChild(textSpan);
+                        this.stepperItemContainer.classList.add(STEPTEXT);
+                        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)) {
+                        this.checkValidState(item, stepSpan);
+                        const prevOnChange = this.isProtectedOnChange;
+                        this.isProtectedOnChange = true;
+                        item.label = null;
+                        this.isProtectedOnChange = prevOnChange;
+                    }
+                    else {
+                        this.textContainer = this.createElement('span', { className: TEXTCSS });
+                        const 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);
+                            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) {
+                                const 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;
+                        }
+                        const prevOnChange = this.isProtectedOnChange;
+                        this.isProtectedOnChange = true;
+                        item.text = item.label ? null : item.text;
+                        this.isProtectedOnChange = prevOnChange;
+                    }
+                }
+                if (item.cssClass) {
+                    addClass([this.stepperItemContainer], item.cssClass.trim().split(' '));
+                }
+                if (item.disabled) {
+                    this.stepperItemContainer.classList[item.disabled ? 'add' : 'remove'](DISABLED$2);
+                    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)) {
+                        this.labelContainer = this.createElement('span', { className: STEPLABEL });
+                        const labelSpan = this.createElement('span', { className: LABEL });
+                        labelSpan.innerText = item.label;
+                        this.labelContainer.appendChild(labelSpan);
+                        this.stepperItemContainer.classList.add(STEPSLABEL);
+                        this.updateLabelPosition();
+                        if ((!item.iconCss && !item.text) || this.element.classList.contains(LABELINDICATOR)) {
+                            this.stepperItemContainer.classList.add('e-step-label-only');
+                            if (item.isValid !== null) {
+                                const iconSpan = this.createElement('span', { className: 'e-step-validation-icon e-icons' });
+                                this.labelContainer.appendChild(iconSpan);
+                            }
+                        }
+                    }
+                }
+                if (item.optional) {
+                    const optionalSpan = this.createElement('span', { className: OPTIONAL });
+                    this.l10n.setLocale(this.locale);
+                    const 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.renderItemContent(index, false);
+            if (this.stepperItemContainer.classList.contains(INPROGRESS)) {
+                attributes(this.stepperItemContainer, { 'tabindex': '0', 'aria-current': 'true' });
+            }
+            else {
+                attributes(this.stepperItemContainer, { 'tabindex': '-1' });
+            }
+            this.wireItemsEvents(this.stepperItemContainer, index);
+            this.stepperItemElements.push(this.stepperItemContainer);
+            const eventArgs = { element: this.stepperItemContainer, index: index };
+            this.trigger('beforeStepRender', eventArgs, (args) => {
+                this.stepperItemList.appendChild(args.element);
+            });
+            if (this.isAngular && this.template) {
+                setTimeout(() => {
+                    this.calculateProgressBarPosition();
+                });
+            }
+            else {
+                this.calculateProgressBarPosition();
+            }
+        }
+        if (this.element.classList.contains(VERTICALSTEP)) {
+            if (this.element.classList.contains(LABELBEFORE)) {
+                const listItems = this.stepperItemList.querySelectorAll('.' + LABEL);
+                for (let i = 0; i < listItems.length; i++) {
+                    const labelEle = listItems[parseInt((i).toString(), 10)];
+                    labelEle.style.setProperty('--label-width', (this.beforeLabelWidth) + 5 + 'px');
+                }
+            }
+        }
+    }
+    calculateProgressBarPosition() {
+        const isBeforeLabel = (this.element.classList.contains(LABELBEFORE)) ? true : false;
+        const isStepVertical = (this.element.classList.contains(VERTICALSTEP)) ? true : false;
+        if (isStepVertical) {
+            const iconOnly = (this.stepperItemContainer.classList.contains(STEPICON) && !this.stepperItemContainer.classList.contains(STEPTEXT) && !this.stepperItemContainer.classList.contains(STEPSLABEL)) ? true : false;
+            const textEle = (this.stepperItemContainer.querySelector('.' + TEXTCSS));
+            if (textEle) {
+                this.textEleWidth = this.textEleWidth < textEle.offsetWidth ? textEle.offsetWidth : this.textEleWidth;
+            }
+            if (isBeforeLabel) {
+                let itemWidth;
+                const labelWidth = this.stepperItemContainer.querySelector('.' + LABEL).offsetWidth + 15;
+                if (this.beforeLabelWidth < labelWidth) {
+                    this.beforeLabelWidth = labelWidth;
+                }
+                if (this.element.querySelector('ol').lastChild.querySelector('.' + ICONCSS)) {
+                    itemWidth = (this.beforeLabelWidth + (this.stepperItemContainer.querySelector('.' + ICONCSS).offsetWidth / 2));
+                }
+                else if (this.stepperItemContainer.querySelector('.' + TEXTCSS)) {
+                    itemWidth = (this.beforeLabelWidth + (this.stepperItemContainer.querySelector('.' + TEXTCSS).offsetWidth / 2));
+                }
+                if (this.progressBarPosition < itemWidth) {
+                    this.progressBarPosition = itemWidth;
+                }
+            }
+            else if (this.progressBarPosition < (iconOnly ? this.stepperItemContainer.offsetWidth : this.element.querySelector('ol').lastChild.firstChild.offsetWidth)) {
+                this.progressBarPosition = iconOnly ? this.stepperItemContainer.offsetWidth : this.element.querySelector('ol').lastChild.firstChild.offsetWidth;
+            }
+        }
+    }
+    checkValidState(item, stepSpan, isLabel) {
+        if (item.isValid == null) {
+            stepSpan.classList.add('e-step-content');
+            if (isLabel) {
+                stepSpan.innerHTML = item.label;
+            }
+            else {
+                stepSpan.innerHTML = item.label ? item.label : item.text;
+            }
+            this.stepperItemContainer.appendChild(stepSpan);
+        }
+        else {
+            stepSpan.classList.add(ICONCSS);
+            this.stepperItemContainer.appendChild(stepSpan);
+            this.stepperItemContainer.classList.add(STEPICON);
+        }
+    }
+    updateCurrentLabel() {
+        let currentLabelPos;
+        if (this.element.classList.contains(HORIZSTEP)) {
+            currentLabelPos = this.labelPosition.toLowerCase() === 'top' ? 'before' : this.labelPosition.toLowerCase() === 'bottom' ? 'after' : this.labelPosition.toLowerCase();
+        }
+        else {
+            currentLabelPos = this.labelPosition.toLowerCase() === 'start' ? 'before' : this.labelPosition.toLowerCase() === 'end' ? 'after' : this.labelPosition.toLowerCase();
+        }
+        return currentLabelPos;
+    }
+    updateLabelPosition() {
+        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);
+        }
+        else {
+            this.stepperItemContainer.appendChild(this.labelContainer);
+        }
+        this.element.classList.add('e-label-' + this.updateCurrentLabel());
+    }
+    clearLabelPosition() {
+        const removeCss = this.labelContainer.classList.value.match(/(e-label-[after|before]+)/g);
+        if (removeCss) {
+            removeClass([this.labelContainer], removeCss);
+            removeClass([this.element], removeCss);
+        }
+    }
+    checkValidStep() {
+        for (let index = 0; index < this.steps.length; index++) {
+            const item = this.steps[parseInt(index.toString(), 10)];
+            const itemElement = this.stepperItemElements[parseInt(index.toString(), 10)];
+            if (item.isValid !== null) {
+                let indicatorEle;
+                let iconEle;
+                if (this.element.classList.contains(STEPINDICATOR) && !item.iconCss) {
+                    indicatorEle = itemElement.querySelector('.' + ICONCSS);
+                }
+                else {
+                    iconEle = itemElement.querySelector('.' + ICONCSS);
+                }
+                const textLabelIcon = itemElement.querySelector('.e-step-validation-icon');
+                const itemIcon = item.iconCss.trim().split(' ');
+                const validStep = itemElement.classList.contains('e-step-valid');
+                if (indicatorEle) {
+                    indicatorEle.classList.add('e-icons', validStep ? 'e-check' : 'e-circle-info');
+                }
+                if (iconEle) {
+                    for (let 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');
+                }
+                if (textLabelIcon) {
+                    textLabelIcon.classList.add(validStep ? 'e-circle-check' : 'e-circle-info');
+                    if (this.element.classList.contains(VERTICALSTEP)) {
+                        const labelEle = itemElement.querySelector('.' + LABEL);
+                        const textEle = itemElement.querySelector('.' + TEXT);
+                        const itemWidth = textEle ? textEle.offsetWidth + textEle.getBoundingClientRect().left :
+                            labelEle.offsetWidth + labelEle.getBoundingClientRect().left;
+                        const validationIcon = itemElement.querySelector('.e-step-validation-icon');
+                        validationIcon.style.setProperty('--icon-position', (itemWidth + 20) + 'px');
+                    }
+                }
+            }
+        }
+    }
+    updateTooltip() {
+        if (this.showTooltip) {
+            this.tooltipObj = new Tooltip({
+                target: '.e-step-container', windowCollision: true,
+                opensOn: 'Custom', cssClass: this.cssClass ? (STEPPERTOOLTIP + ' ' + this.cssClass) : STEPPERTOOLTIP,
+                position: 'TopCenter'
+            });
+            this.tooltipObj.appendTo(this.stepperItemList);
+        }
+        else {
+            if (!isNullOrUndefined(this.tooltipObj)) {
+                this.tooltipObj.destroy();
+                this.tooltipObj = null;
+            }
+        }
+    }
+    wireItemsEvents(itemElement, index) {
+        EventHandler.add(itemElement, 'click', (e) => {
+            if (this.linear) {
+                const linearModeValue = index - this.activeStep;
+                if (Math.abs(linearModeValue) === 1) {
+                    this.stepClickHandler(index, e, itemElement);
+                }
+            }
+            else {
+                this.stepClickHandler(index, e, itemElement);
+            }
+        }, this);
+        EventHandler.add(itemElement, 'mouseover', () => this.openStepperTooltip(index), this);
+        EventHandler.add(itemElement, 'mouseleave', () => this.closeStepperTooltip(), this);
+    }
+    openStepperTooltip(index) {
+        const currentStep = this.steps[parseInt(index.toString(), 10)];
+        if (this.showTooltip && (currentStep.label || currentStep.text)) {
+            if (!this.tooltipOpen) {
+                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 !== ''))) {
+                    const tooltipPopupClass = currentStep.status.toLowerCase() === 'inprogress' ?
+                        `${STEPPERTOOLTIP} ${STEPPERIPROGRESSTIP} ${this.cssClass ? this.cssClass : ''}` : `${STEPPERTOOLTIP} ${this.cssClass ? this.cssClass : ''}`;
+                    this.tooltipObj.setProperties({ cssClass: tooltipPopupClass.trim() });
+                }
+                this.tooltipOpen = true;
+            }
+        }
+    }
+    closeStepperTooltip() {
+        if (this.tooltipOpen) {
+            this.tooltipObj.close();
+            this.tooltipOpen = false;
+        }
+    }
+    updateTooltipContent(index) {
+        if (this.showTooltip) {
+            if (this.isReact) {
+                this.clearTemplate(['stepperTooltipTemplate']);
+            }
+            let content;
+            const currentStep = this.steps[parseInt(index.toString(), 10)];
+            if (this.tooltipTemplate) {
+                content = this.createElement('span', { className: 'e-stepper-tooltip-content' });
+                const templateFunction = this.getTemplateFunction(this.tooltipTemplate);
+                append(templateFunction({ value: currentStep }, this, 'stepperTooltipTemplate', (this.element.id + 'tooltipTemplate'), this.isStringTemplate), content);
+                this.tooltipObj.setProperties({ content: content }, true);
+            }
+            else {
+                const content = currentStep.label ? currentStep.label : currentStep.text;
+                this.tooltipObj.setProperties({ content: initializeCSPTemplate(function () { return content; }) }, true);
+            }
+            this.renderReactTemplates();
+        }
+    }
+    stepClickHandler(index, e, itemElement) {
+        const clickEventArgs = {
+            element: itemElement, event: e, previousStep: this.activeStep,
+            activeStep: index
+        };
+        this.trigger('stepClick', clickEventArgs);
+        this.navigateToStep(index, e, itemElement, true);
+    }
+    updateTemplateFunction() {
+        this.templateFunction = this.template ? this.getTemplateFunction(this.template) : null;
+    }
+    renderItemContent(index, isrerender) {
+        const listItems = this.stepperItemList.querySelectorAll('li');
+        if (isrerender) {
+            this.removeItemContent(listItems[parseInt((index).toString(), 10)]);
+        }
+        if (this.template) {
+            isrerender ? listItems[parseInt((index).toString(), 10)].classList.add(TEMPLATE) :
+                this.stepperItemContainer.classList.add(TEMPLATE);
+            const 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);
+        }
+        this.renderReactTemplates();
+    }
+    removeItemContent(ele) {
+        ele.classList.remove(TEMPLATE);
+        const firstChild = ele.firstElementChild;
+        for (let i = 0; i < ele.childElementCount; i++) {
+            firstChild.remove();
+        }
+    }
+    updateContent() {
+        if (this.isReact) {
+            this.clearTemplate(['stepperTemplate']);
+        }
+        for (let i = 0; i < this.steps.length; i++) {
+            this.renderItemContent(i, true);
+        }
+    }
+    /**
+     * Gets template content based on the template property value.
+     *
+     * @param {string | Function} template - Template property value.
+     * @returns {Function} - Return template function.
+     * @hidden
+     */
+    getTemplateFunction(template) {
+        if (typeof template === 'string') {
+            let content = '';
+            try {
+                const tempEle = select(template);
+                if (tempEle) {
+                    //Return innerHTML incase of jsrenderer script else outerHTML
+                    content = tempEle.tagName === 'SCRIPT' ? tempEle.innerHTML : tempEle.outerHTML;
+                }
+                else {
+                    content = template;
+                }
+            }
+            catch (e) {
+                content = template;
+            }
+            return compile(content);
+        }
+        else {
+            /* eslint-disable-next-line  @typescript-eslint/no-explicit-any */
+            return compile(template);
+        }
+    }
+    navigateToStep(index, e, itemElement, isInteracted, isUpdated) {
+        const eventArgs = {
+            element: itemElement, event: e, isInteracted: isInteracted,
+            previousStep: this.activeStep, activeStep: index, cancel: false
+        };
+        if (isUpdated != false) {
+            const previousStep = this.activeStep;
+            this.trigger('stepChanging', eventArgs, (args) => {
+                if (args.cancel) {
+                    return;
+                }
+                this.navigationHandler(index);
+                const eventArgs = {
+                    element: itemElement, event: e, isInteracted: isInteracted,
+                    previousStep: previousStep, activeStep: this.activeStep
+                };
+                this.trigger('stepChanged', eventArgs);
+            });
+        }
+        else {
+            this.navigationHandler(index);
+        }
+    }
+    navigationHandler(index, stepStatus, isUpdated) {
+        index = (index >= this.steps.length - 1) ? this.steps.length - 1 : index;
+        const Itemslength = this.stepperItemElements.length;
+        if (index >= 0 && index < Itemslength - 1) {
+            index = this.stepperItemElements[parseInt(index.toString(), 10)].classList.contains(DISABLED$2) ? this.activeStep : index;
+        }
+        const prevOnChange = this.isProtectedOnChange;
+        this.isProtectedOnChange = true;
+        this.activeStep = index;
+        this.isProtectedOnChange = prevOnChange;
+        for (let i = 0; i < this.steps.length; i++) {
+            const itemElement = this.stepperItemElements[parseInt(i.toString(), 10)];
+            const item = this.steps[parseInt(i.toString(), 10)];
+            itemElement.classList.remove(SELECTED$2, INPROGRESS, COMPLETED, NOTSTARTED);
+            if (i === this.activeStep || this.activeStep === this.steps.length - 1) {
+                itemElement.classList.add(SELECTED$2);
+            }
+            if (this.activeStep >= 0 && this.progressbar) {
+                if (this.element.classList.contains(HORIZSTEP)) {
+                    if ((this.element.classList.contains(LABELBEFORE) || this.element.classList.contains(LABELAFTER)) && !this.element.classList.contains(STEPINDICATOR) &&
+                        this.stepperItemElements[parseInt(this.activeStep.toString(), 10)].classList.contains(STEPICON)) {
+                        const progressPos = this.element.querySelector('.e-stepper-progressbar');
+                        const selectedEle = this.stepperItemElements[parseInt(this.activeStep.toString(), 10)].firstChild;
+                        let value = this.activeStep === 0 ? 0 : (selectedEle.offsetLeft - progressPos.offsetLeft + (selectedEle.offsetWidth / 2)) / progressPos.offsetWidth * 100;
+                        if (this.element.classList.contains(RTL$3)) {
+                            const elementPos = this.stepperItemElements[0].firstChild;
+                            value = ((progressPos.offsetWidth - selectedEle.offsetLeft) + Math.abs((elementPos.offsetLeft + elementPos.offsetWidth) - this.stepperItemList.offsetWidth)) / progressPos.offsetWidth * 100;
+                            this.progressbar.style.setProperty(PROGRESSVALUE$1, (value) + '%');
+                        }
+                        else {
+                            this.progressbar.style.setProperty(PROGRESSVALUE$1, (value) + '%');
+                        }
+                    }
+                    else {
+                        let totalLiWidth = 0;
+                        let activeLiWidth = 0;
+                        for (let j = 0; j < this.stepperItemElements.length; j++) {
+                            totalLiWidth = totalLiWidth + this.stepperItemElements[parseInt(j.toString(), 10)].offsetWidth;
+                            if (j <= this.activeStep) {
+                                if (j < this.activeStep) {
+                                    activeLiWidth = activeLiWidth + this.stepperItemElements[parseInt(j.toString(), 10)].offsetWidth;
+                                }
+                                else if (j == this.activeStep && j !== 0) {
+                                    activeLiWidth = activeLiWidth + (this.stepperItemElements[parseInt(j.toString(), 10)].offsetWidth / 2);
+                                }
+                            }
+                        }
+                        const spaceWidth = (this.stepperItemList.offsetWidth - totalLiWidth) / (this.stepperItemElements.length - 1);
+                        const progressValue = ((activeLiWidth + (spaceWidth * this.activeStep)) / this.stepperItemList.offsetWidth) * 100;
+                        this.progressbar.style.setProperty(PROGRESSVALUE$1, (progressValue) + '%');
+                    }
+                }
+                else {
+                    this.progressbar.style.setProperty(PROGRESSVALUE$1, ((100 / (this.steps.length - 1)) * index) + '%');
+                }
+            }
+            else if (this.activeStep < 0 && this.progressbar) {
+                this.progressbar.style.setProperty(PROGRESSVALUE$1, 0 + '%');
+            }
+            if (i === this.activeStep) {
+                itemElement.classList.add(INPROGRESS);
+            }
+            else if (this.activeStep > 0 && i < this.activeStep) {
+                itemElement.classList.add(COMPLETED);
+            }
+            else {
+                itemElement.classList.add(NOTSTARTED);
+            }
+            if (itemElement.classList.contains(INPROGRESS)) {
+                attributes(itemElement, { 'tabindex': '0', 'aria-current': 'true' });
+            }
+            else {
+                attributes(itemElement, { 'tabindex': '-1', 'aria-current': 'false' });
+            }
+            const prevOnChange = this.isProtectedOnChange;
+            this.isProtectedOnChange = true;
+            if (isUpdated != false) {
+                if (i < this.activeStep || (this.steps.length - 1 === this.activeStep && item.status.toLowerCase() === "completed")) {
+                    item.status = StepStatus.Completed;
+                }
+                else if (i === this.activeStep) {
+                    item.status = StepStatus.InProgress;
+                }
+                else if (i > this.activeStep) {
+                    item.status = StepStatus.NotStarted;
+                }
+                if (stepStatus && this.activeStep === i) {
+                    item.status = stepStatus;
+                }
+                if (item.status.toLowerCase() === "completed") {
+                    itemElement.classList.remove(SELECTED$2, INPROGRESS, NOTSTARTED);
+                    itemElement.classList.add(COMPLETED);
+                }
+                if (item.status.toLowerCase() === "notstarted") {
+                    itemElement.classList.remove(SELECTED$2, INPROGRESS, COMPLETED);
+                    itemElement.classList.add(NOTSTARTED);
+                }
+            }
+            this.isProtectedOnChange = prevOnChange;
+            if (this.renderDefault(i) && this.element.classList.contains(STEPINDICATOR)) {
+                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');
+                }
+            }
+        }
+    }
+    removeItemElements() {
+        for (let i = 0; i < this.stepperItemElements.length; i++) {
+            remove(this.stepperItemElements[parseInt(i.toString(), 10)]);
+        }
+        this.stepperItemElements = [];
+    }
+    nextStep() {
+        if (this.activeStep !== this.steps.length - 1) {
+            this.navigateToStep(this.activeStep + 1, null, null, false);
+        }
+    }
+    previousStep() {
+        if (this.activeStep > 0) {
+            this.navigateToStep(this.activeStep - 1, null, null, false);
+        }
+    }
+    reset() {
+        if (this.activeStep !== 0) {
+            const isDisabled = this.stepperItemElements[0].classList.contains(DISABLED$2) ? true : false;
+            this.navigateToStep(isDisabled ? -1 : 0, null, null, false);
+        }
+    }
+    updateElementClassArray() {
+        const classArray = [RTL$3, READONLY, 'e-steps-focus', LABELAFTER, LABELBEFORE, 'e-label-top',
+            'e-label-bottom', 'e-label-start', 'e-label-end', STEPINDICATOR, LABELINDICATOR, VERTICALSTEP, HORIZSTEP];
+        removeClass([this.element], classArray);
+    }
+    destroy() {
+        super.destroy();
+        EventHandler.remove(window, 'resize', () => { if (this.stepperItemList && this.progressbar) {
+            this.setProgressPosition(this.element, true);
+        } });
+        EventHandler.remove(window, 'click', () => { this.updateStepFocus(); });
+        // unwires the events and detach the li elements
+        this.removeItemElements();
+        this.clearTemplate();
+        if (this.stepperItemList) {
+            remove(this.stepperItemList);
+        }
+        this.stepperItemList = null;
+        if (this.progressStep) {
+            remove(this.progressStep);
+        }
+        this.progressStep = null;
+        this.progressbar = null;
+        this.progressBarPosition = null;
+        this.stepperItemContainer = null;
+        this.textContainer = null;
+        this.labelContainer = null;
+        this.updateElementClassArray();
+        this.element.removeAttribute('aria-label');
+        if (this.showTooltip) {
+            this.tooltipObj.destroy();
+            this.tooltipObj = null;
+        }
+        if (this.keyboardModuleStepper) {
+            this.keyboardModuleStepper.destroy();
+        }
+        this.keyboardModuleStepper = null;
+    }
+    wireKeyboardEvent() {
+        this.keyboardModuleStepper = new KeyboardEvents(this.element, {
+            keyAction: this.keyActionHandler.bind(this),
+            keyConfigs: this.keyConfigs,
+            eventName: 'keydown'
+        });
+    }
+    keyActionHandler(e) {
+        if (this.readOnly) {
+            return;
+        }
+        switch (e.action) {
+            case 'uparrow':
+            case 'downarrow':
+                if (this.element.classList.contains(VERTICALSTEP)) {
+                    this.handleNavigation(e.action === 'uparrow' ? false : true, e);
+                }
+                break;
+            case 'leftarrow':
+            case 'rightarrow':
+                if (this.element.classList.contains(HORIZSTEP)) {
+                    this.handleNavigation(this.enableRtl ? e.action === 'leftarrow' : e.action === 'rightarrow', e);
+                }
+                break;
+            case 'tab':
+            case 'space':
+            case 'enter':
+            case 'escape':
+                this.handleNavigation(null, e);
+                break;
+            case 'home':
+            case 'end':
+                this.handleNavigation(null, e, this.enableRtl);
+                break;
+        }
+    }
+    handleNavigation(isNextStep, e, isRTL) {
+        this.isKeyNavFocus = true;
+        this.element.classList.add('e-steps-focus');
+        let focusedEle = this.element.querySelector('.' + FOCUS$1);
+        if (!focusedEle) {
+            focusedEle = this.element.querySelector('.' + SELECTED$2);
+        }
+        const stepItems = Array.prototype.slice.call(this.stepperItemList.children);
+        let index = stepItems.indexOf(focusedEle);
+        if (e.action === 'tab' || e.action === 'escape') {
+            stepItems[parseInt(index.toString(), 10)].classList.remove(FOCUS$1);
+            this.element.classList.remove('e-steps-focus');
+        }
+        if (!(e.action === 'space' || e.action === 'enter' || e.action === 'tab')) {
+            const prevIndex = index;
+            index = isNextStep ? index + 1 : index - 1;
+            while ((index >= 0 && index < stepItems.length) && stepItems[parseInt(index.toString(), 10)].classList.contains(DISABLED$2)) {
+                index = isNextStep ? index + 1 : index - 1;
+            }
+            index = (index < 0) ? 0 : (index > stepItems.length - 1) ? stepItems.length - 1 : index;
+            if (stepItems[parseInt(prevIndex.toString(), 10)].classList.contains(FOCUS$1)) {
+                stepItems[parseInt(prevIndex.toString(), 10)].classList.remove(FOCUS$1);
+            }
+            if ((e.action === 'home' || e.action === 'end')) {
+                if (e.action === 'home') {
+                    isRTL ? index = stepItems.length - 1 : index = 0;
+                }
+                else {
+                    isRTL ? index = 0 : index = stepItems.length - 1;
+                }
+            }
+            if (index >= 0 && index < stepItems.length) {
+                stepItems[parseInt(index.toString(), 10)].classList.add(FOCUS$1);
+            }
+        }
+        else if ((e.action === 'space' || e.action === 'enter')) {
+            if (this.linear) {
+                const linearModeValue = this.activeStep - index;
+                if (Math.abs(linearModeValue) === 1) {
+                    this.navigateToStep(index, null, null, true);
+                }
+            }
+            else {
+                this.navigateToStep(index, null, null, true);
+            }
+        }
+    }
+    renderStepperItems(isUpdate, isStepType) {
+        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$3)) ? this.element.classList.add(RTL$3) : null : null;
+        this.updateOrientaion(this.element);
+        this.renderItems();
+        this.renderProgressBar(this.element);
+        this.checkValidStep();
+        this.updateAnimation();
+        this.navigateToStep(this.activeStep, null, this.stepperItemElements[this.activeStep], true);
+    }
+    /**
+     * Called internally if any of the property value changed.
+     *
+     * @param  {StepperModel} newProp - Specifies new properties
+     * @param  {StepperModel} oldProp - Specifies old properties
+     * @returns {void}
+     * @private
+     */
+    onPropertyChanged(newProp, oldProp) {
+        for (const prop of Object.keys(newProp)) {
+            switch (prop) {
+                case 'steps': {
+                    if (!(newProp.steps instanceof Array && oldProp.steps instanceof Array)) {
+                        const stepCounts = Object.keys(newProp.steps);
+                        for (let i = 0; i < stepCounts.length; i++) {
+                            const index = parseInt(Object.keys(newProp.steps)[i], 10);
+                            const changedPropsCount = Object.keys(newProp.steps[index]).length;
+                            for (let j = 0; j < changedPropsCount; j++) {
+                                const property = Object.keys(newProp.steps[index])[j];
+                                if (property === 'status') {
+                                    if (this.activeStep === index) {
+                                        this.navigationHandler(index, newProp.steps[index].status);
+                                    }
+                                    else {
+                                        this.steps[index].status = oldProp.steps[index].status;
+                                    }
+                                }
+                                else {
+                                    this.removeItemElements();
+                                    this.renderItems();
+                                    this.updateStepperStatus();
+                                }
+                                this.checkValidStep();
+                            }
+                        }
+                    }
+                    else {
+                        this.renderStepperItems(true, true);
+                    }
+                    break;
+                }
+                case 'orientation':
+                    this.updateOrientaion(this.element);
+                    this.renderStepperItems(true);
+                    break;
+                case 'activeStep':
+                    this.activeStep = (newProp.activeStep > this.steps.length - 1 || newProp.activeStep < -1) ? oldProp.activeStep : this.activeStep;
+                    if (this.activeStep >= 0 && this.stepperItemElements[parseInt(this.activeStep.toString(), 10)].classList.contains(DISABLED$2)) {
+                        this.activeStep = oldProp.activeStep;
+                    }
+                    if (this.linear) {
+                        const linearModeValue = oldProp.activeStep - this.activeStep;
+                        if (Math.abs(linearModeValue) === 1) {
+                            this.navigateToStep(this.activeStep, null, null, true);
+                        }
+                    }
+                    else {
+                        this.navigateToStep(this.activeStep, null, this.stepperItemElements[this.activeStep], true);
+                    }
+                    break;
+                case 'enableRtl':
+                    this.element.classList[this.enableRtl ? 'add' : 'remove'](RTL$3);
+                    break;
+                case 'readOnly':
+                    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 });
+                    }
+                    break;
+                case 'labelPosition':
+                    this.renderStepperItems(true);
+                    break;
+                case 'showTooltip':
+                    this.updateTooltip();
+                    break;
+                case 'stepType':
+                    this.renderStepperItems(true, true);
+                    break;
+                case 'template':
+                    this.updateTemplateFunction();
+                    this.updateContent();
+                    break;
+                case 'animation':
+                    this.updateAnimation();
+                    break;
+            }
+        }
+    }
+};
+__decorate$14([
+    Property(0)
+], Stepper.prototype, "activeStep", void 0);
+__decorate$14([
+    Complex({}, StepperAnimationSettings)
+], Stepper.prototype, "animation", void 0);
+__decorate$14([
+    Property(false)
+], Stepper.prototype, "linear", void 0);
+__decorate$14([
+    Property(false)
+], Stepper.prototype, "showTooltip", void 0);
+__decorate$14([
+    Property('')
+], Stepper.prototype, "template", void 0);
+__decorate$14([
+    Property('')
+], Stepper.prototype, "tooltipTemplate", void 0);
+__decorate$14([
+    Property(StepLabelPosition.Bottom)
+], Stepper.prototype, "labelPosition", void 0);
+__decorate$14([
+    Property(StepType.Default)
+], Stepper.prototype, "stepType", void 0);
+__decorate$14([
+    Event()
+], Stepper.prototype, "stepChanged", void 0);
+__decorate$14([
+    Event()
+], Stepper.prototype, "stepChanging", void 0);
+__decorate$14([
+    Event()
+], Stepper.prototype, "stepClick", void 0);
+__decorate$14([
+    Event()
+], Stepper.prototype, "beforeStepRender", void 0);
+Stepper = __decorate$14([
+    NotifyPropertyChanges
+], Stepper);
+
+/** Stepper export modules */
+
 /**
  * Navigation all modules
  */
 
-export { MenuAnimationSettings, MenuItem, FieldSettings, HScroll, VScroll, addScrolling, destroyScroll, Item, Toolbar, AccordionActionSettings, AccordionAnimationSettings, AccordionItem, Accordion, ContextMenu, Menu, TabActionSettings, TabAnimationSettings, Header, TabItem, Tab, FieldsSettings, ActionSettings, NodeAnimationSettings, TreeView, Sidebar, BreadcrumbOverflowMode, BreadcrumbItem, Breadcrumb, CarouselSwipeMode, CarouselItem, Carousel, AppBar };
+export { MenuAnimationSettings, MenuItem, FieldSettings, HScroll, VScroll, addScrolling, destroyScroll, Item, Toolbar, AccordionActionSettings, AccordionAnimationSettings, AccordionItem, Accordion, ContextMenu, Menu, TabActionSettings, TabAnimationSettings, Header, TabItem, Tab, FieldsSettings, ActionSettings, NodeAnimationSettings, TreeView, Sidebar, BreadcrumbOverflowMode, BreadcrumbItem, Breadcrumb, CarouselSwipeMode, CarouselItem, Carousel, AppBar, StepStatus, Step, StepperOrientation, StepperBase, StepperAnimationSettings, StepLabelPosition, StepType, Stepper };
 //# sourceMappingURL=ej2-navigations.es2015.js.map