@syncfusion/ej2-navigations - npm Package Compare versions

Comparing version 27.2.5 to 28.1.33

dist/global/index.d.ts

 /*!
 *  filename: index.d.ts
-*  version : 27.2.5
-*  Copyright Syncfusion Inc. 2001 - 2023. All rights reserved.
+*  version : 28.1.33
+*  Copyright Syncfusion Inc. 2001 - 2024. All rights reserved.
 *  Use of this code is subject to the terms of our license.
@@ -6,0 +6,0 @@ *  A copy of the current license can be obtained at any time by e-mailing

package.json

 {
   "_from": "@syncfusion/ej2-navigations@*",
-  "_id": "@syncfusion/ej2-navigations@27.2.4",
+  "_id": "@syncfusion/ej2-navigations@22.42.3",
   "_inBundle": false,
-  "_integrity": "sha512-GCmn63RwpvF61RmqeTULfV1HbEhZyt2IsBLqJFPEz6Bgs9+1+5E8my38kvN78NaKQ+r0+lPh8CgD12Z8ezdF0g==",
+  "_integrity": "sha512-RX6GTiVPFJ765WKvMPISlHeieMchRrSJd1Wwi99lh51uK6gsrTzLIKNzSI9UsBXyjC8NNigPfd8UIOBzKKediA==",
   "_location": "/@syncfusion/ej2-navigations",
@@ -43,6 +43,6 @@ "_phantomChildren": {},
   ],
-  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-navigations/-/ej2-navigations-27.2.4.tgz",
-  "_shasum": "66244247af321344aaf7c9a31dcef43e1043e83c",
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-release/@syncfusion/ej2-navigations/-/ej2-navigations-22.42.3.tgz",
+  "_shasum": "338d4553f460c0ebc346b0852e92e524b55673c3",
   "_spec": "@syncfusion/ej2-navigations@*",
-  "_where": "/jenkins/workspace/elease-automation_release_27.1.1/packages/included",
+  "_where": "/jenkins/workspace/elease-automation_release_28.1.1/packages/included",
   "author": {
@@ -56,8 +56,8 @@ "name": "Syncfusion Inc."
   "dependencies": {
-    "@syncfusion/ej2-base": "~27.2.5",
-    "@syncfusion/ej2-buttons": "~27.2.4",
-    "@syncfusion/ej2-data": "~27.2.2",
-    "@syncfusion/ej2-inputs": "~27.2.4",
-    "@syncfusion/ej2-lists": "~27.2.5",
-    "@syncfusion/ej2-popups": "~27.2.2"
+    "@syncfusion/ej2-base": "~28.1.33",
+    "@syncfusion/ej2-buttons": "~28.1.33",
+    "@syncfusion/ej2-data": "~28.1.33",
+    "@syncfusion/ej2-inputs": "~28.1.33",
+    "@syncfusion/ej2-lists": "~28.1.33",
+    "@syncfusion/ej2-popups": "~28.1.33"
   },
@@ -167,4 +167,4 @@ "deprecated": false,
   "typings": "index.d.ts",
-  "version": "27.2.5",
+  "version": "28.1.33",
   "sideEffects": false
 }

README.md

@@ -295,3 +295,3 @@ # JavaScript Navigation Controls
 
-> This is a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this component, is subject to the terms and conditions of Syncfusion's [EULA](https://www.syncfusion.com/eula/es/). To acquire a license for 80+ [JavaScript UI controls](https://www.syncfusion.com/javascript-ui-controls), you can [purchase](https://www.syncfusion.com/sales/products) or [start a free 30-day trial](https://www.syncfusion.com/account/manage-trials/start-trials).
+> This is a commercial product and requires a paid license for possession or use. Syncfusion<sup>®</sup> licensed software, including this component, is subject to the terms and conditions of Syncfusion<sup>®</sup> [EULA](https://www.syncfusion.com/eula/es/). To acquire a license for 80+ [JavaScript UI controls](https://www.syncfusion.com/javascript-ui-controls), you can [purchase](https://www.syncfusion.com/sales/products) or [start a free 30-day trial](https://www.syncfusion.com/account/manage-trials/start-trials).
 
@@ -302,2 +302,2 @@ > A [free community license](https://www.syncfusion.com/products/communitylicense) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.
 
-© Copyright 2024 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution.
+© Copyright 2024 Syncfusion<sup>®</sup> Inc. All Rights Reserved. The Syncfusion<sup>®</sup> Essential Studio<sup>®</sup> license and copyright applies to this distribution.

src/carousel/carousel-model.d.ts

@@ -201,2 +201,14 @@ import { Component, EventHandler, Collection, Property, Event, EmitType, formatUnit, INotifyPropertyChanged, NotifyPropertyChanges, Browser } from '@syncfusion/ej2-base';import { ChildProperty, addClass, removeClass, setStyleAttribute, attributes, getUniqueID, compile, getInstance, L10n } from '@syncfusion/ej2-base';import { append, closest, isNullOrUndefined, remove, classList, Touch, SwipeEventArgs, KeyboardEvents, KeyboardEventArgs, BaseEventArgs } from '@syncfusion/ej2-base';import { Button } from '@syncfusion/ej2-buttons';
     /**
+     * Defines whether to enable keyboard actions or not.
+     *
+     * * @remarks
+     * If any form input component is placed on the carousel slide, interacting with it may cause
+     * the left/right arrow keys to navigate to other slides. Disabling keyboard interaction helps
+     * prevent this unintended navigation, leading to a smoother user experience.
+     *
+     * @default true
+     */
+    allowKeyboardInteraction?: boolean;
+
+    /**
      * Defines whether to show the indicator positions or not. The indicator positions allow to know the current slide position of the carousel component.
@@ -203,0 +215,0 @@ *

src/carousel/carousel.d.ts

@@ -265,2 +265,13 @@ import { Component, EmitType, INotifyPropertyChanged } from '@syncfusion/ej2-base';
     /**
+     * Defines whether to enable keyboard actions or not.
+     *
+     * * @remarks
+     * If any form input component is placed on the carousel slide, interacting with it may cause
+     * the left/right arrow keys to navigate to other slides. Disabling keyboard interaction helps
+     * prevent this unintended navigation, leading to a smoother user experience.
+     *
+     * @default true
+     */
+    allowKeyboardInteraction: boolean;
+    /**
      * Defines whether to show the indicator positions or not. The indicator positions allow to know the current slide position of the carousel component.
@@ -267,0 +278,0 @@ *

src/carousel/carousel.js

@@ -186,2 +186,11 @@ var __extends = (this && this.__extends) || (function () {
                     break;
+                case 'allowKeyboardInteraction':
+                    if (this.keyModule) {
+                        this.keyModule.destroy();
+                        this.keyModule = null;
+                    }
+                    if (newProp.allowKeyboardInteraction) {
+                        this.renderKeyboardActions();
+                    }
+                    break;
                 case 'enableRtl':
@@ -558,2 +567,5 @@ rtlElement = [].slice.call(this.element.querySelectorAll("." + CLS_PREV_BUTTON + ",\n                ." + CLS_NEXT_BUTTON + ", ." + CLS_PLAY_BUTTON));
     Carousel.prototype.renderKeyboardActions = function () {
+        if (!this.allowKeyboardInteraction) {
+            return;
+        }
         this.keyModule = new KeyboardEvents(this.element, { keyAction: this.keyHandler.bind(this), keyConfigs: this.keyConfigs });
@@ -882,2 +894,5 @@ };
     Carousel.prototype.keyHandler = function (e) {
+        if (!this.allowKeyboardInteraction) {
+            return;
+        }
         var direction;
@@ -1031,2 +1046,3 @@ var slideIndex;
         }
+        e.preventDefault();
         this.isSwipe = false;
@@ -1041,2 +1057,3 @@ this.itemsContainer.classList.add('e-swipe-start');
         }
+        this.isSwipe = true;
         e.preventDefault();
@@ -1054,3 +1071,2 @@ var pageX = e.touches ? e.touches[0].pageX : e.pageX;
     Carousel.prototype.swipStop = function () {
-        this.isSwipe = true;
         var time = Date.now() - this.timeStampStart;
@@ -1241,4 +1257,6 @@ var distanceX = this.getTranslateValue(this.itemsContainer) - this.initialTranslate;
         }
-        this.keyModule.destroy();
-        this.keyModule = null;
+        if (this.keyModule) {
+            this.keyModule.destroy();
+            this.keyModule = null;
+        }
         this.resetSlideInterval();
@@ -1309,2 +1327,5 @@ this.destroyButtons();
         Property(true)
+    ], Carousel.prototype, "allowKeyboardInteraction", void 0);
+    __decorate([
+        Property(true)
     ], Carousel.prototype, "showIndicators", void 0);
@@ -1311,0 +1332,0 @@ __decorate([

src/common/menu-base-model.d.ts

@@ -109,2 +109,9 @@ import { Component, Property, ChildProperty, NotifyPropertyChanges, INotifyPropertyChanged, AnimationModel, isBlazor } from '@syncfusion/ej2-base';import { Event, EventHandler, EmitType, BaseEventArgs, KeyboardEvents, KeyboardEventArgs, Touch, TapEventArgs } from '@syncfusion/ej2-base';import { Animation, AnimationOptions, TouchEventArgs, MouseEventArgs } from '@syncfusion/ej2-base';import { Browser, Collection, setValue, getValue, getUniqueID, getInstance, isNullOrUndefined } from '@syncfusion/ej2-base';import { select, selectAll, closest, detach, append, rippleEffect, isVisible, Complex, addClass, removeClass } from '@syncfusion/ej2-base';import { ListBase, ListBaseOptions } from '@syncfusion/ej2-lists';import { getZindexPartial, calculatePosition, OffsetPosition, isCollide, fit, Popup } from '@syncfusion/ej2-popups';import { SanitizeHtmlHelper } from '@syncfusion/ej2-base';import { getScrollableParent } from '@syncfusion/ej2-popups';import { HScroll } from '../common/h-scroll';import { VScroll } from '../common/v-scroll';import { addScrolling, destroyScroll } from '../common/menu-scroll';
 
+    /**
+     * Specifies the htmlAttributes property to support adding custom attributes to the menu items in the menu component.
+     *
+     * @default null
+     */
+    htmlAttributes?: Record<string, string>;
+
 }
@@ -111,0 +118,0 @@

src/common/menu-base.d.ts

@@ -111,2 +111,8 @@ import { Component, ChildProperty, INotifyPropertyChanged } from '@syncfusion/ej2-base';
     url: string;
+    /**
+     * Specifies the htmlAttributes property to support adding custom attributes to the menu items in the menu component.
+     *
+     * @default null
+     */
+    htmlAttributes: Record<string, string>;
 }
@@ -377,2 +383,3 @@ /**
     private setPosition;
+    getMenuWidth(cmenu: Element, width: number, isRtl: boolean): number;
     private toggleVisiblity;
@@ -379,0 +386,0 @@ private createItems;

src/context-menu/context-menu-model.d.ts

@@ -32,2 +32,17 @@ import { attributes, getUniqueID, Collection, NotifyPropertyChanges, INotifyPropertyChanged, Property } from '@syncfusion/ej2-base';import { getZindexPartial } from '@syncfusion/ej2-popups';import { MenuBase, MenuItem } from '../common/menu-base';import { MenuItemModel } from './../common/menu-base-model';
 
+    /**
+     * This property allows you to define custom templates for items in the ContextMenu.
+     *
+     * @default null
+     * @aspType string
+     */
+    itemTemplate?: string | Function;
+
+    /**
+     * Specifies whether to enable / disable the scrollable option in ContextMenu.
+     *
+     * @default false
+     */
+    enableScrolling?: boolean;
+
 }

src/context-menu/context-menu.d.ts

@@ -48,2 +48,15 @@ /// <reference path="../common/menu-base-model.d.ts" />
     /**
+     * This property allows you to define custom templates for items in the ContextMenu.
+     *
+     * @default null
+     * @aspType string
+     */
+    itemTemplate: string | Function;
+    /**
+     * Specifies whether to enable / disable the scrollable option in ContextMenu.
+     *
+     * @default false
+     */
+    enableScrolling: boolean;
+    /**
      * For internal use only - prerender processing.
@@ -50,0 +63,0 @@ *

src/context-menu/context-menu.js

@@ -61,2 +61,3 @@ var __extends = (this && this.__extends) || (function () {
     ContextMenu.prototype.initialize = function () {
+        this.template = this.itemTemplate ? this.itemTemplate : null;
         _super.prototype.initialize.call(this);
@@ -108,2 +109,5 @@ attributes(this.element, { 'role': 'menubar', 'tabindex': '0' });
                     break;
+                case 'itemTemplate':
+                    this.itemTemplate = newProp.itemTemplate;
+                    this.refresh();
             }
@@ -130,2 +134,8 @@ }
     ], ContextMenu.prototype, "items", void 0);
+    __decorate([
+        Property(null)
+    ], ContextMenu.prototype, "itemTemplate", void 0);
+    __decorate([
+        Property(false)
+    ], ContextMenu.prototype, "enableScrolling", void 0);
     ContextMenu = __decorate([
@@ -132,0 +142,0 @@ NotifyPropertyChanges

src/menu/menu.js

@@ -214,2 +214,6 @@ var __extends = (this && this.__extends) || (function () {
                     break;
+                case 'template':
+                    this.template = newProp.template;
+                    this.refresh();
+                    break;
             }
@@ -216,0 +220,0 @@ }

src/stepper-base/stepper-base.js

@@ -22,2 +22,6 @@ var __extends = (this && this.__extends) || (function () {
 var PROGRESSVALUE = '--progress-value';
+var PROGRESSPOS = '--progress-position';
+var VERTICALSTEP = 'e-vertical';
+var HORIZSTEP = 'e-horizontal';
+var ITEMLIST = 'e-stepper-steps';
 /**
@@ -142,4 +146,4 @@ * Defines the status of the step.
     StepperBase.prototype.updateOrientaion = function (wrapper) {
-        if (wrapper.classList.contains('e-horizontal') || wrapper.classList.contains('e-vertical')) {
-            wrapper.classList.remove('e-horizontal', 'e-vertical');
+        if (wrapper.classList.contains(HORIZSTEP) || wrapper.classList.contains(VERTICALSTEP)) {
+            wrapper.classList.remove(HORIZSTEP, VERTICALSTEP);
         }
@@ -153,19 +157,19 @@ if (!(isNullOrUndefined(this.orientation))) {
         this.progressbar = this.createElement('div', { className: 'e-progressbar-value' });
+        var beforeLabel = (wrapper.querySelector('li').querySelector('.e-step-label-container'));
         this.progressStep.appendChild(this.progressbar);
         wrapper.prepend(this.progressStep);
         this.progressbar.style.setProperty(PROGRESSVALUE, (0) + '%');
-        var beforeLabel = (wrapper.querySelector('li').querySelector('.e-step-label-container'));
-        if (wrapper.classList.contains('e-vertical')) {
+        if (wrapper.classList.contains(VERTICALSTEP)) {
             if (wrapper.classList.contains('e-label-bottom') || wrapper.classList.contains('e-label-top')) {
-                var stepsContainer = (wrapper.querySelector('.e-stepper-steps'));
-                this.progressStep.style.setProperty('--progress-position', (stepsContainer.offsetWidth / 2) + 'px');
+                var stepsContainer = (wrapper.querySelector('.' + ITEMLIST));
+                this.progressStep.style.setProperty(PROGRESSPOS, (stepsContainer.offsetWidth / 2) + 'px');
             }
             else {
-                this.progressStep.style.setProperty('--progress-position', ((this.progressBarPosition / 2) - 1) + 'px');
+                this.progressStep.style.setProperty(PROGRESSPOS, ((this.progressBarPosition / 2) - 1) + 'px');
             }
         }
         if (beforeLabel && (beforeLabel.classList.contains('e-label-before'))) {
-            this.progressStep.style.setProperty('--progress-position', (((this.progressBarPosition) - 1)) + 5 + 'px');
+            this.progressStep.style.setProperty(PROGRESSPOS, (((this.progressBarPosition) - 1)) + 5 + 'px');
         }
-        if (wrapper.classList.contains('e-horizontal')) {
+        if (wrapper.classList.contains(HORIZSTEP)) {
             this.setProgressPosition(wrapper);
@@ -187,5 +191,5 @@ }
         }
-        var lastEle = wrapper.querySelector('.e-stepper-steps').lastChild.firstChild;
+        var lastEle = wrapper.querySelector('.' + ITEMLIST).lastChild.firstChild;
         if (wrapper.classList.contains('e-rtl')) {
-            var leftPost = ((stepItemEle.offsetLeft + stepItemEle.offsetWidth) - wrapper.querySelector('.e-stepper-steps').offsetWidth);
+            var leftPost = ((stepItemEle.offsetLeft + stepItemEle.offsetWidth) - wrapper.querySelector('.' + ITEMLIST).offsetWidth);
             this.progressStep.style.setProperty('--progress-left-position', Math.abs(leftPost) + 'px');
@@ -192,0 +196,0 @@ this.progressStep.style.setProperty('--progress-bar-width', Math.abs(lastEle.offsetLeft - stepItemEle.offsetLeft) + 'px');

src/stepper/stepper.d.ts

@@ -289,2 +289,3 @@ /// <reference path="../stepper-base/stepper-base-model.d.ts" />
     private initialize;
+    private initiateProgressBar;
     private updatePosition;
@@ -301,2 +302,3 @@ private renderDefault;
     private renderItems;
+    private createTextLabelElement;
     private calculateProgressBarPosition;
@@ -310,2 +312,4 @@ private checkValidState;
     private wireItemsEvents;
+    private unWireItemsEvents;
+    private linearModeHandler;
     private openStepperTooltip;
@@ -329,2 +333,4 @@ private closeStepperTooltip;
     private navigationHandler;
+    private calculateProgressbarPos;
+    private updateIndicatorStatus;
     private updateStepInteractions;
@@ -367,2 +373,5 @@ private removeItemElements;
     private renderStepperItems;
+    private updateDynamicSteps;
+    private updateDynamicActiveStep;
+    private updateDynamicCssClass;
     /**
@@ -369,0 +378,0 @@ * Called internally if any of the property value changed.

src/stepper/stepper.js

@@ -181,3 +181,2 @@ var __extends = (this && this.__extends) || (function () {
     Stepper.prototype.initialize = function () {
-        var _this = this;
         this.element.setAttribute('aria-label', this.element.id);
@@ -202,12 +201,3 @@ this.updatePosition();
         if (this.steps.length > 0) {
-            if (this.steps.length > 1) {
-                if (this.isAngular && this.template) {
-                    setTimeout(function () {
-                        _this.renderProgressBar(_this.element);
-                    });
-                }
-                else {
-                    this.renderProgressBar(this.element);
-                }
-            }
+            this.initiateProgressBar();
             this.checkValidStep();
@@ -219,2 +209,13 @@ this.updateAnimation();
     };
+    Stepper.prototype.initiateProgressBar = function () {
+        var _this = this;
+        if (this.steps.length > 1) {
+            if (this.isAngular && this.template) {
+                setTimeout(function () { _this.renderProgressBar(_this.element); });
+            }
+            else {
+                this.renderProgressBar(this.element);
+            }
+        }
+    };
     Stepper.prototype.updatePosition = function () {
@@ -224,4 +225,4 @@ this.progressBarPosition = this.beforeLabelWidth = this.textEleWidth = 0;
     Stepper.prototype.renderDefault = function (index) {
-        return (!this.steps[parseInt((index).toString(), 10)].iconCss && !this.steps[parseInt((index).toString(), 10)].text &&
-            !this.steps[parseInt((index).toString(), 10)].label) ? true : false;
+        var step = this.steps[parseInt(index.toString(), 10)];
+        return !step.iconCss && !step.text && !step.label;
     };
@@ -250,9 +251,13 @@ Stepper.prototype.updateAnimation = function () {
     Stepper.prototype.updateStepType = function () {
-        if (!(isNullOrUndefined(this.stepType)) && (this.stepType.toLowerCase() === 'indicator' || this.stepType.toLowerCase() === 'label' || this.stepType.toLowerCase() === 'default')) {
-            if (this.stepType.toLowerCase() !== 'default') {
-                this.element.classList.add('e-step-type-' + this.stepType.toLowerCase());
+        if (!isNullOrUndefined(this.stepType)) {
+            var stepTypeLower = this.stepType.toLowerCase();
+            var validStepTypes = ['indicator', 'label', 'default'];
+            if (validStepTypes.indexOf(stepTypeLower) !== -1) {
+                if (stepTypeLower !== 'default') {
+                    this.element.classList.add('e-step-type-' + stepTypeLower);
+                }
+                if ((stepTypeLower === 'indicator' || stepTypeLower === 'label') && this.labelContainer) {
+                    this.clearLabelPosition();
+                }
             }
-            if (((this.stepType.toLowerCase() === 'indicator' || 'label') && (this.labelContainer))) {
-                this.clearLabelPosition();
-            }
         }
@@ -329,19 +334,24 @@ };
         var _this = this;
+        var _a;
+        var isHorizontal = this.element.classList.contains(HORIZSTEP);
+        var isVertical = this.element.classList.contains(VERTICALSTEP);
+        var labelPositionLower = !isNullOrUndefined(this.labelPosition) ? this.labelPosition.toLowerCase() : '';
         for (var index = 0; index < this.steps.length; index++) {
             this.stepperItemContainer = this.createElement('li', { className: ITEMCONTAINER });
+            var stepSpan = this.createElement('span', { className: 'e-step' });
+            var item = this.steps[parseInt(index.toString(), 10)];
+            var isItemLabel = item.label ? true : false;
+            var isItemText = item.text ? true : false;
+            var isIndicator = this.element.classList.contains(STEPINDICATOR);
             this.stepperItemContainer.classList[(index === 0) ? 'add' : 'remove'](SELECTED, INPROGRESS);
             this.stepperItemContainer.classList[(index !== 0) ? 'add' : 'remove'](NOTSTARTED);
-            if (this.element.classList.contains(HORIZSTEP)) {
+            if (isHorizontal) {
                 this.stepperItemContainer.style.setProperty('--max-width', 100 / this.steps.length + '%');
             }
-            var stepSpan = this.createElement('span', { className: 'e-step' });
-            var item = this.steps[parseInt(index.toString(), 10)];
-            var isItemLabel = item.label ? true : false;
-            var isItemText = item.text ? true : false;
             if (this.renderDefault(index) && (isNullOrUndefined(this.template) || this.template === '')) {
-                var isIndicator = (!this.element.classList.contains('e-step-type-default') && this.stepType.toLowerCase() === 'indicator') ? true : false;
-                if (isIndicator) {
+                var isIndicator_1 = !this.element.classList.contains('e-step-type-default') && this.stepType.toLowerCase() === 'indicator';
+                if (isIndicator_1) {
                     stepSpan.classList.add('e-icons', INDICATORICON);
                 }
-                if (!isIndicator && item.isValid == null) {
+                if (!isIndicator_1 && item.isValid == null) {
                     stepSpan.classList.add('e-step-content');
@@ -358,6 +368,3 @@ stepSpan.innerHTML = (index + 1).toString();
                         var itemIcon = item.iconCss.trim().split(' ');
-                        stepSpan.classList.add(ICONCSS);
-                        for (var i = 0; i < itemIcon.length; i++) {
-                            stepSpan.classList.add(itemIcon[parseInt(i.toString(), 10)]);
-                        }
+                        (_a = stepSpan.classList).add.apply(_a, [ICONCSS].concat(itemIcon));
                         this.stepperItemContainer.classList.add(STEPICON);
@@ -371,15 +378,12 @@ }
                     this.stepperItemContainer.appendChild(stepSpan);
-                    if ((this.element.classList.contains(HORIZSTEP) && (this.labelPosition.toLowerCase() === 'start' || this.labelPosition.toLowerCase() === 'end') && isItemLabel) ||
-                        (this.element.classList.contains(VERTICALSTEP) && (this.labelPosition.toLowerCase() === 'top' || this.labelPosition.toLowerCase() === 'bottom') && isItemLabel)) {
-                        this.element.classList.add('e-label-' + this.labelPosition.toLowerCase());
-                        var textSpan = this.createElement('span', { className: TEXTCSS + ' ' + TEXT });
-                        textSpan.innerText = item.label;
-                        this.stepperItemContainer.appendChild(textSpan);
-                        this.stepperItemContainer.classList.add(STEPTEXT);
+                    if (((isHorizontal && (labelPositionLower === 'start' || labelPositionLower === 'end') && isItemLabel) ||
+                        (isVertical && (labelPositionLower === 'top' || labelPositionLower === 'bottom') && isItemLabel)) && !isIndicator) {
+                        this.element.classList.add('e-label-' + labelPositionLower);
+                        this.createTextLabelElement(item.label);
                         isRender = false;
                     }
                 }
-                if (isItemText && (!item.iconCss || !this.element.classList.contains(STEPINDICATOR)) && isRender &&
+                if (isItemText && (!item.iconCss || !isIndicator) && isRender &&
                     !(item.iconCss && isItemLabel)) {
-                    if ((!item.iconCss && this.element.classList.contains(STEPINDICATOR)) ||
+                    if ((!item.iconCss && isIndicator) ||
                         ((!item.iconCss || this.element.classList.contains(LABELINDICATOR)) && !isItemLabel)) {
@@ -390,20 +394,17 @@ if (!item.iconCss && !isItemLabel) {
                         this.checkValidState(item, stepSpan);
-                        isItemLabel = null;
+                        isItemLabel = false;
                     }
                     else {
-                        var textSpan = this.createElement('span', { className: TEXT });
                         if (!isItemLabel) {
-                            textSpan.innerText = item.text;
-                            textSpan.classList.add(TEXTCSS);
-                            this.stepperItemContainer.appendChild(textSpan);
-                            this.stepperItemContainer.classList.add(STEPTEXT);
+                            this.createTextLabelElement(item.text);
                         }
                         if (isItemLabel && this.element.classList.contains(LABELINDICATOR)) {
+                            var textSpan = this.createElement('span', { className: TEXT });
                             textSpan.innerText = item.label;
                         }
-                        isItemText = item.label ? false : true;
+                        isItemText = isItemLabel ? false : true;
                     }
                 }
-                if (isItemLabel && (!item.iconCss || !this.element.classList.contains(STEPINDICATOR)) && isRender) {
-                    if (!item.iconCss && !isItemText && this.element.classList.contains(STEPINDICATOR)) {
+                if (isItemLabel && isItemLabel && (!item.iconCss || !isIndicator) && isRender) {
+                    if (!item.iconCss && !isItemText && isIndicator) {
                         this.checkValidState(item, stepSpan, true);
@@ -413,7 +414,3 @@ }
                         (this.element.classList.contains(LABELINDICATOR) && isItemLabel)) {
-                        this.labelContainer = this.createElement('span', { className: STEPLABEL });
-                        var labelSpan = this.createElement('span', { className: LABEL });
-                        labelSpan.innerText = item.label;
-                        this.labelContainer.appendChild(labelSpan);
-                        this.stepperItemContainer.classList.add(STEPSLABEL);
+                        this.createTextLabelElement(item.label, true);
                         this.updateLabelPosition();
@@ -437,4 +434,4 @@ if ((!item.iconCss && !isItemText && !this.stepperItemContainer.classList.contains(STEPICON)) ||
                 if (isItemLabel && (this.labelContainer && ((this.element.classList.contains(LABELAFTER) && !this.stepperItemContainer.classList.contains('e-step-label-only'))
-                    || (this.element.classList.contains(HORIZSTEP) && this.element.classList.contains(LABELBEFORE) && !this.stepperItemContainer.classList.contains('e-step-label-only'))))
-                    || (this.element.classList.contains(VERTICALSTEP) && this.element.classList.contains(LABELBEFORE))) {
+                    || (isHorizontal && this.element.classList.contains(LABELBEFORE) && !this.stepperItemContainer.classList.contains('e-step-label-only'))))
+                    || (isVertical && this.element.classList.contains(LABELBEFORE))) {
                     this.labelContainer.appendChild(optionalSpan);
@@ -477,12 +474,12 @@ }
             });
-            if (this.isAngular && this.template) {
-                setTimeout(function () {
-                    _this.calculateProgressBarPosition();
-                });
+            if (isVertical) {
+                if (this.isAngular && this.template) {
+                    setTimeout(function () { _this.calculateProgressBarPosition(); });
+                }
+                else {
+                    this.calculateProgressBarPosition();
+                }
             }
-            else {
-                this.calculateProgressBarPosition();
-            }
         }
-        if (this.element.classList.contains(VERTICALSTEP)) {
+        if (isVertical) {
             if (this.element.classList.contains(LABELBEFORE)) {
@@ -497,33 +494,44 @@ var listItems = this.stepperItemList.querySelectorAll('.' + LABEL);
     };
+    Stepper.prototype.createTextLabelElement = function (content, isLabelEle) {
+        if (isLabelEle === void 0) { isLabelEle = false; }
+        var spanEle = this.createElement('span', { className: isLabelEle ? LABEL : TEXTCSS + " " + TEXT });
+        spanEle.innerText = content;
+        if (isLabelEle) {
+            this.labelContainer = this.createElement('span', { className: STEPLABEL });
+            this.labelContainer.appendChild(spanEle);
+        }
+        else {
+            this.stepperItemContainer.appendChild(spanEle);
+        }
+        this.stepperItemContainer.classList.add(isLabelEle ? STEPSLABEL : STEPTEXT);
+    };
     Stepper.prototype.calculateProgressBarPosition = function () {
         var isBeforeLabel = (this.element.classList.contains(LABELBEFORE)) ? true : false;
-        var isStepVertical = (this.element.classList.contains(VERTICALSTEP)) ? true : false;
-        if (isStepVertical) {
-            var iconOnly = (this.stepperItemContainer.classList.contains(STEPICON) &&
-                !this.stepperItemContainer.classList.contains(STEPTEXT) &&
-                !this.stepperItemContainer.classList.contains(STEPSLABEL)) ? true : false;
-            var textEle = (this.stepperItemContainer.querySelector('.' + TEXTCSS));
-            if (textEle) {
-                this.textEleWidth = this.textEleWidth < textEle.offsetWidth ? textEle.offsetWidth : this.textEleWidth;
+        var iconOnly = (this.stepperItemContainer.classList.contains(STEPICON) &&
+            !this.stepperItemContainer.classList.contains(STEPTEXT) &&
+            !this.stepperItemContainer.classList.contains(STEPSLABEL));
+        var textEle = (this.stepperItemContainer.querySelector('.' + TEXTCSS));
+        if (textEle) {
+            this.textEleWidth = this.textEleWidth < textEle.offsetWidth ? textEle.offsetWidth : this.textEleWidth;
+        }
+        if (isBeforeLabel) {
+            var labelWidth = this.stepperItemContainer.querySelector('.' + LABEL).offsetWidth + 15;
+            this.beforeLabelWidth = Math.max(this.beforeLabelWidth, labelWidth);
+            var iconEle = this.element.querySelector('ol').lastChild.querySelector('.' + ICONCSS);
+            var textEle_1 = this.stepperItemContainer.querySelector('.' + TEXTCSS);
+            if (iconEle || textEle_1) {
+                var itemWidth = this.beforeLabelWidth + ((this.stepperItemContainer.querySelector('.' + ICONCSS)
+                    || textEle_1).offsetWidth / 2);
+                this.progressBarPosition = Math.max(this.progressBarPosition, itemWidth);
             }
-            if (isBeforeLabel) {
-                var itemWidth = void 0;
-                var labelWidth = this.stepperItemContainer.querySelector('.' + LABEL).offsetWidth + 15;
-                if (this.beforeLabelWidth < labelWidth) {
-                    this.beforeLabelWidth = labelWidth;
-                }
-                if (this.element.querySelector('ol').lastChild.querySelector('.' + ICONCSS)) {
-                    itemWidth = (this.beforeLabelWidth + (this.stepperItemContainer.querySelector('.' + ICONCSS).offsetWidth / 2));
-                }
-                else if (this.stepperItemContainer.querySelector('.' + TEXTCSS)) {
-                    itemWidth = (this.beforeLabelWidth + (this.stepperItemContainer.querySelector('.' + TEXTCSS).offsetWidth / 2));
-                }
-                if (this.progressBarPosition < itemWidth) {
-                    this.progressBarPosition = itemWidth;
-                }
+            else {
+                this.progressBarPosition = Math.max(this.progressBarPosition, (this.beforeLabelWidth / 2));
             }
-            else if (this.progressBarPosition < (iconOnly ? this.stepperItemContainer.offsetWidth : this.element.querySelector('ol').lastChild.firstChild.offsetWidth)) {
-                this.progressBarPosition = iconOnly ? this.stepperItemContainer.offsetWidth : this.element.querySelector('ol').lastChild.firstChild.offsetWidth;
-            }
         }
+        else {
+            var lastChild = this.element.querySelector('ol').lastChild;
+            var lastChildWidth = iconOnly ? this.stepperItemContainer.offsetWidth :
+                lastChild.firstChild.offsetWidth;
+            this.progressBarPosition = Math.max(this.progressBarPosition, lastChildWidth);
+        }
     };
@@ -548,9 +556,6 @@ Stepper.prototype.checkValidState = function (item, stepSpan, isLabel) {
     Stepper.prototype.updateCurrentLabel = function () {
-        var currentLabelPos;
-        if (this.element.classList.contains(HORIZSTEP)) {
-            currentLabelPos = this.labelPosition.toLowerCase() === 'top' ? 'before' : this.labelPosition.toLowerCase() === 'bottom' ? 'after' : this.labelPosition.toLowerCase();
-        }
-        else {
-            currentLabelPos = this.labelPosition.toLowerCase() === 'start' ? 'before' : this.labelPosition.toLowerCase() === 'end' ? 'after' : this.labelPosition.toLowerCase();
-        }
+        var labelPos = this.labelPosition.toLowerCase();
+        var currentLabelPos = this.element.classList.contains(HORIZSTEP)
+            ? (labelPos === 'top' ? 'before' : labelPos === 'bottom' ? 'after' : labelPos)
+            : (labelPos === 'start' ? 'before' : labelPos === 'end' ? 'after' : labelPos);
         return currentLabelPos;
@@ -582,15 +587,16 @@ };
     Stepper.prototype.checkValidStep = function () {
-        for (var index = 0; index < this.steps.length; index++) {
-            var item = this.steps[parseInt(index.toString(), 10)];
-            var itemElement = this.stepperItemElements[parseInt(index.toString(), 10)];
+        var isStepIndicator = this.element.classList.contains(STEPINDICATOR);
+        var _loop_1 = function (index) {
+            var item = this_1.steps[parseInt(index.toString(), 10)];
+            var itemElement = this_1.stepperItemElements[parseInt(index.toString(), 10)];
             if (item.isValid !== null) {
                 var indicatorEle = void 0;
-                var iconEle = void 0;
-                if (this.element.classList.contains(STEPINDICATOR) && !item.iconCss) {
+                var iconEle_1;
+                if (isStepIndicator && !item.iconCss) {
                     indicatorEle = itemElement.querySelector('.' + ICONCSS);
                 }
                 else {
-                    iconEle = itemElement.querySelector('.' + ICONCSS);
+                    iconEle_1 = itemElement.querySelector('.' + ICONCSS);
                 }
-                if (!indicatorEle && this.element.classList.contains(STEPINDICATOR) && this.renderDefault(index)) {
+                if (!indicatorEle && isStepIndicator && this_1.renderDefault(index)) {
                     indicatorEle = itemElement.querySelector('.' + INDICATORICON);
@@ -601,2 +607,3 @@ }
                 var validStep = itemElement.classList.contains('e-step-valid');
+                var validIconClass = validStep ? 'e-check' : 'e-circle-info';
                 if (indicatorEle) {
@@ -607,22 +614,20 @@ indicatorEle.classList.remove(INDICATORICON);
                     }
-                    indicatorEle.classList.add('e-icons', validStep ? 'e-check' : 'e-circle-info', ICONCSS);
+                    indicatorEle.classList.add('e-icons', validIconClass, ICONCSS);
                 }
-                if (this.renderDefault(index) && !this.element.classList.contains(STEPINDICATOR)) {
+                if (this_1.renderDefault(index) && !isStepIndicator) {
                     var stepSpan = itemElement.querySelector('.e-step');
-                    stepSpan.classList.add('e-icons', validStep ? 'e-check' : 'e-circle-info', ICONCSS);
+                    stepSpan.classList.add('e-icons', validIconClass, ICONCSS);
                 }
-                if (iconEle) {
-                    if (iconEle.innerHTML !== '') {
-                        iconEle.innerHTML = '';
+                if (iconEle_1) {
+                    if (iconEle_1.innerHTML !== '') {
+                        iconEle_1.innerHTML = '';
                     }
                     else if (itemIcon.length > 0) {
-                        for (var i = 0; i < itemIcon.length; i++) {
-                            iconEle.classList.remove(itemIcon[parseInt(i.toString(), 10)]);
-                        }
+                        itemIcon.forEach(function (icon) { iconEle_1.classList.remove(icon); });
                     }
-                    iconEle.classList.add('e-icons', validStep ? 'e-check' : 'e-circle-info');
+                    iconEle_1.classList.add('e-icons', validIconClass);
                 }
                 if (textLabelIcon) {
                     textLabelIcon.classList.add(validStep ? 'e-circle-check' : 'e-circle-info');
-                    if (this.element.classList.contains(VERTICALSTEP)) {
+                    if (this_1.element.classList.contains(VERTICALSTEP)) {
                         var labelEle = itemElement.querySelector('.' + LABEL);
@@ -637,2 +642,6 @@ var textEle = itemElement.querySelector('.' + TEXT);
             }
+        };
+        var this_1 = this;
+        for (var index = 0; index < this.steps.length; index++) {
+            _loop_1(index);
         }
@@ -657,16 +666,24 @@ };
     Stepper.prototype.wireItemsEvents = function (itemElement, index) {
-        var _this = this;
-        EventHandler.add(itemElement, 'click', function (e) {
-            if (_this.linear) {
-                var linearModeValue = index - _this.activeStep;
-                if (Math.abs(linearModeValue) === 1) {
-                    _this.stepClickHandler(index, e, itemElement);
-                }
+        EventHandler.add(itemElement, 'click', this.linearModeHandler.bind(this, itemElement, index), this);
+        EventHandler.add(itemElement, 'mouseover', this.openStepperTooltip.bind(this, index), this);
+        EventHandler.add(itemElement, 'mouseleave', this.closeStepperTooltip, this);
+    };
+    Stepper.prototype.unWireItemsEvents = function () {
+        for (var index = 0; index < this.steps.length; index++) {
+            var itemElement = this.stepperItemElements[parseInt(index.toString(), 10)];
+            EventHandler.remove(itemElement, 'click', this.linearModeHandler.bind(this, itemElement, index));
+            EventHandler.remove(itemElement, 'mouseover', this.openStepperTooltip.bind(this, index));
+            EventHandler.remove(itemElement, 'mouseleave', this.closeStepperTooltip);
+        }
+    };
+    Stepper.prototype.linearModeHandler = function (itemElement, index, e) {
+        if (this.linear) {
+            var linearModeValue = index - this.activeStep;
+            if (Math.abs(linearModeValue) === 1) {
+                this.stepClickHandler(index, e, itemElement);
             }
-            else {
-                _this.stepClickHandler(index, e, itemElement);
-            }
-        }, this);
-        EventHandler.add(itemElement, 'mouseover', function () { return _this.openStepperTooltip(index); }, this);
-        EventHandler.add(itemElement, 'mouseleave', function () { return _this.closeStepperTooltip(); }, this);
+        }
+        else {
+            this.stepClickHandler(index, e, itemElement);
+        }
     };
@@ -813,3 +830,3 @@ Stepper.prototype.openStepperTooltip = function (index) {
     Stepper.prototype.navigationHandler = function (index, stepStatus, isUpdated) {
-        index = (index >= this.steps.length - 1) ? this.steps.length - 1 : index;
+        index = Math.min(index, this.steps.length - 1);
         var Itemslength = this.stepperItemElements.length;
@@ -832,41 +849,3 @@ if (index >= 0 && index < Itemslength - 1) {
                 if (this.element.classList.contains(HORIZSTEP)) {
-                    if ((this.element.classList.contains(LABELBEFORE) || this.element.classList.contains(LABELAFTER)) &&
-                        !this.element.classList.contains(STEPINDICATOR) &&
-                        this.stepperItemElements[parseInt(this.activeStep.toString(), 10)].classList.contains(STEPICON)) {
-                        var progressPos = this.element.querySelector('.e-stepper-progressbar');
-                        var selectedEle = this.stepperItemElements[parseInt(this.activeStep.toString(), 10)]
-                            .firstChild;
-                        var value = this.activeStep === 0 ? 0 : (selectedEle.offsetLeft - progressPos.offsetLeft +
-                            (selectedEle.offsetWidth / 2)) / progressPos.offsetWidth * 100;
-                        if (this.element.classList.contains(RTL)) {
-                            value = (progressPos.getBoundingClientRect().right - selectedEle.getBoundingClientRect().right +
-                                (selectedEle.offsetWidth / 2)) / progressPos.offsetWidth * 100;
-                            this.progressbar.style.setProperty(PROGRESSVALUE, (value) + '%');
-                        }
-                        else {
-                            this.progressbar.style.setProperty(PROGRESSVALUE, (value) + '%');
-                        }
-                    }
-                    else {
-                        var totalLiWidth = 0;
-                        var activeLiWidth = 0;
-                        for (var j = 0; j < this.stepperItemElements.length; j++) {
-                            totalLiWidth = totalLiWidth + this.stepperItemElements[parseInt(j.toString(), 10)].offsetWidth;
-                            if (j <= this.activeStep) {
-                                if (j < this.activeStep) {
-                                    activeLiWidth = activeLiWidth +
-                                        this.stepperItemElements[parseInt(j.toString(), 10)].offsetWidth;
-                                }
-                                else if (j === this.activeStep && j !== 0) {
-                                    activeLiWidth = activeLiWidth +
-                                        (this.stepperItemElements[parseInt(j.toString(), 10)].offsetWidth / 2);
-                                }
-                            }
-                        }
-                        var spaceWidth = (this.stepperItemList.offsetWidth - totalLiWidth) /
-                            (this.stepperItemElements.length - 1);
-                        var progressValue = ((activeLiWidth + (spaceWidth * this.activeStep)) /
-                            this.stepperItemList.offsetWidth) * 100;
-                        this.progressbar.style.setProperty(PROGRESSVALUE, (progressValue) + '%');
-                    }
+                    this.calculateProgressbarPos();
                 }
@@ -920,14 +899,54 @@ else {
             this.isProtectedOnChange = prevOnChange_1;
-            if (this.renderDefault(i) && this.element.classList.contains(STEPINDICATOR) && !itemElement.classList.contains('e-step-valid') && !itemElement.classList.contains('e-step-error')) {
-                if (itemElement.classList.contains(COMPLETED)) {
-                    itemElement.firstChild.classList.remove('e-icons', 'e-step-indicator');
-                    itemElement.firstChild.classList.add(ICONCSS, 'e-icons', 'e-check');
+            this.updateIndicatorStatus(i, itemElement);
+        }
+        this.updateStepInteractions();
+    };
+    Stepper.prototype.calculateProgressbarPos = function () {
+        var _this = this;
+        if ((this.element.classList.contains(LABELBEFORE) || this.element.classList.contains(LABELAFTER)) &&
+            !this.element.classList.contains(STEPINDICATOR) &&
+            this.stepperItemElements[parseInt(this.activeStep.toString(), 10)].classList.contains(STEPICON)) {
+            var progressPos = this.element.querySelector('.e-stepper-progressbar');
+            var selectedEle = this.stepperItemElements[parseInt(this.activeStep.toString(), 10)]
+                .firstChild;
+            var value = this.activeStep === 0 ? 0 : (selectedEle.offsetLeft - progressPos.offsetLeft +
+                (selectedEle.offsetWidth / 2)) / progressPos.offsetWidth * 100;
+            if (this.element.classList.contains(RTL)) {
+                value = (progressPos.getBoundingClientRect().right - selectedEle.getBoundingClientRect().right +
+                    (selectedEle.offsetWidth / 2)) / progressPos.offsetWidth * 100;
+                this.progressbar.style.setProperty(PROGRESSVALUE, (value) + '%');
+            }
+            else {
+                this.progressbar.style.setProperty(PROGRESSVALUE, (value) + '%');
+            }
+        }
+        else {
+            var totalLiWidth_1 = 0;
+            var activeLiWidth_1 = 0;
+            this.stepperItemElements.forEach(function (element, index) {
+                var itemWidth = element.offsetWidth;
+                totalLiWidth_1 += itemWidth;
+                if (index <= _this.activeStep) {
+                    activeLiWidth_1 += (index === _this.activeStep && index !== 0) ? (itemWidth / 2) : itemWidth;
                 }
-                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');
-                }
+            });
+            var spaceWidth = (this.stepperItemList.offsetWidth - totalLiWidth_1) /
+                (this.stepperItemElements.length - 1);
+            var progressValue = ((activeLiWidth_1 + (spaceWidth * this.activeStep)) /
+                this.stepperItemList.offsetWidth) * 100;
+            this.progressbar.style.setProperty(PROGRESSVALUE, (progressValue) + '%');
+        }
+    };
+    Stepper.prototype.updateIndicatorStatus = function (index, itemElement) {
+        if (this.renderDefault(index) && this.element.classList.contains(STEPINDICATOR) && !itemElement.classList.contains('e-step-valid')
+            && !itemElement.classList.contains('e-step-error')) {
+            if (itemElement.classList.contains(COMPLETED)) {
+                itemElement.firstChild.classList.remove('e-icons', 'e-step-indicator');
+                itemElement.firstChild.classList.add(ICONCSS, 'e-icons', 'e-check');
             }
+            else if (itemElement.classList.contains(INPROGRESS) || itemElement.classList.contains(NOTSTARTED)) {
+                itemElement.firstChild.classList.remove(ICONCSS, 'e-icons', 'e-check');
+                itemElement.firstChild.classList.add('e-icons', 'e-step-indicator');
+            }
         }
-        this.updateStepInteractions();
     };
@@ -938,6 +957,4 @@ Stepper.prototype.updateStepInteractions = function () {
         this.stepperItemElements.forEach(function (step, index) {
-            var isPreviousStep = (index === _this.activeStep - 1);
-            var isNextStep = (index === _this.activeStep + 1);
-            step.classList.toggle(PREVSTEP, isPreviousStep);
-            step.classList.toggle(NEXTSTEP, isNextStep);
+            step.classList.toggle(PREVSTEP, (index === _this.activeStep - 1));
+            step.classList.toggle(NEXTSTEP, (index === _this.activeStep + 1));
         });
@@ -1009,2 +1026,3 @@ };
         this.unWireEvents();
+        this.unWireItemsEvents();
         // unwires the events and detach the li elements
@@ -1156,2 +1174,62 @@ this.removeItemElements();
     };
+    Stepper.prototype.updateDynamicSteps = function (steps, prevSteps) {
+        if (!(steps instanceof Array && prevSteps instanceof Array)) {
+            var stepCounts = Object.keys(steps);
+            for (var i = 0; i < stepCounts.length; i++) {
+                var index = parseInt(Object.keys(steps)[i], 10);
+                var changedPropsCount = Object.keys(steps[index]).length;
+                for (var j = 0; j < changedPropsCount; j++) {
+                    var property = Object.keys(steps[index])[j];
+                    if (property === 'status') {
+                        if (this.activeStep === index) {
+                            this.navigationHandler(index, steps[index].status);
+                        }
+                        else {
+                            this.steps[index].status = prevSteps[index].status;
+                        }
+                    }
+                    else {
+                        this.removeItemElements();
+                        this.renderItems();
+                        this.updateStepperStatus();
+                    }
+                    if (property === 'label' && (this.steps[index].iconCss || this.steps[index].text) &&
+                        this.stepType.toLowerCase() === 'default') {
+                        this.refreshProgressbar();
+                    }
+                    this.updateStepInteractions();
+                    this.checkValidStep();
+                }
+            }
+        }
+        else {
+            this.renderStepperItems(true, true);
+        }
+    };
+    Stepper.prototype.updateDynamicActiveStep = function (activeStep, preActiveStep) {
+        this.activeStep = (activeStep > this.steps.length - 1 || activeStep < -1) ? preActiveStep : this.activeStep;
+        if (this.activeStep >= 0 && this.stepperItemElements[parseInt(this.activeStep.toString(), 10)].classList.contains(DISABLED)) {
+            this.activeStep = preActiveStep;
+        }
+        if (this.linear) {
+            var linearModeValue = preActiveStep - this.activeStep;
+            if (Math.abs(linearModeValue) === 1) {
+                this.navigateToStep(this.activeStep, null, null, true);
+            }
+        }
+        else {
+            this.navigateToStep(this.activeStep, null, this.stepperItemElements[this.activeStep], true);
+        }
+    };
+    Stepper.prototype.updateDynamicCssClass = function (cssClass, prevCssClass) {
+        if (prevCssClass) {
+            removeClass([this.element], prevCssClass.trim().split(' '));
+        }
+        if (cssClass) {
+            addClass([this.element], cssClass.trim().split(' '));
+        }
+        if (this.tooltipObj) {
+            this.tooltipObj.setProperties({ cssClass: this.cssClass ? (STEPPERTOOLTIP + ' ' + this.cssClass) : STEPPERTOOLTIP });
+        }
+    };
     /**
@@ -1170,34 +1248,3 @@ * Called internally if any of the property value changed.
                 case 'steps': {
-                    if (!(newProp.steps instanceof Array && oldProp.steps instanceof Array)) {
-                        var stepCounts = Object.keys(newProp.steps);
-                        for (var i = 0; i < stepCounts.length; i++) {
-                            var index = parseInt(Object.keys(newProp.steps)[i], 10);
-                            var changedPropsCount = Object.keys(newProp.steps[index]).length;
-                            for (var j = 0; j < changedPropsCount; j++) {
-                                var property = Object.keys(newProp.steps[index])[j];
-                                if (property === 'status') {
-                                    if (this.activeStep === index) {
-                                        this.navigationHandler(index, newProp.steps[index].status);
-                                    }
-                                    else {
-                                        this.steps[index].status = oldProp.steps[index].status;
-                                    }
-                                }
-                                else {
-                                    this.removeItemElements();
-                                    this.renderItems();
-                                    this.updateStepperStatus();
-                                }
-                                if (property === 'label' && (this.steps[index].iconCss || this.steps[index].text) &&
-                                    this.stepType.toLowerCase() === 'default') {
-                                    this.refreshProgressbar();
-                                }
-                                this.updateStepInteractions();
-                                this.checkValidStep();
-                            }
-                        }
-                    }
-                    else {
-                        this.renderStepperItems(true, true);
-                    }
+                    this.updateDynamicSteps(newProp.steps, oldProp.steps);
                     break;
@@ -1210,17 +1257,3 @@ }
                 case 'activeStep':
-                    this.activeStep = (newProp.activeStep > this.steps.length - 1 || newProp.activeStep < -1) ?
-                        oldProp.activeStep : this.activeStep;
-                    if (this.activeStep >= 0 && this.stepperItemElements[parseInt(this.activeStep.toString(), 10)]
-                        .classList.contains(DISABLED)) {
-                        this.activeStep = oldProp.activeStep;
-                    }
-                    if (this.linear) {
-                        var linearModeValue = oldProp.activeStep - this.activeStep;
-                        if (Math.abs(linearModeValue) === 1) {
-                            this.navigateToStep(this.activeStep, null, null, true);
-                        }
-                    }
-                    else {
-                        this.navigateToStep(this.activeStep, null, this.stepperItemElements[this.activeStep], true);
-                    }
+                    this.updateDynamicActiveStep(newProp.activeStep, oldProp.activeStep);
                     break;
@@ -1234,11 +1267,3 @@ case 'enableRtl':
                 case 'cssClass':
-                    if (oldProp.cssClass) {
-                        removeClass([this.element], oldProp.cssClass.trim().split(' '));
-                    }
-                    if (newProp.cssClass) {
-                        addClass([this.element], newProp.cssClass.trim().split(' '));
-                    }
-                    if (this.tooltipObj) {
-                        this.tooltipObj.setProperties({ cssClass: this.cssClass ? (STEPPERTOOLTIP + ' ' + this.cssClass) : STEPPERTOOLTIP });
-                    }
+                    this.updateDynamicCssClass(newProp.cssClass, oldProp.cssClass);
                     break;
@@ -1245,0 +1270,0 @@ case 'labelPosition':

src/tab/tab-model.d.ts

 import { Component, Property, Event, EmitType, closest, Collection, Complex, attributes, detach, Instance, isNullOrUndefined, animationMode } from '@syncfusion/ej2-base';import { INotifyPropertyChanged, NotifyPropertyChanges, ChildProperty, select, isVisible } from '@syncfusion/ej2-base';import { KeyboardEvents, KeyboardEventArgs, MouseEventArgs, Effect, Browser, formatUnit, DomElements, L10n } from '@syncfusion/ej2-base';import { setStyleAttribute as setStyle, isNullOrUndefined as isNOU, selectAll, addClass, removeClass, remove } from '@syncfusion/ej2-base';import { EventHandler, rippleEffect, Touch, SwipeEventArgs, compile, Animation, AnimationModel, BaseEventArgs } from '@syncfusion/ej2-base';import { getRandomId, SanitizeHtmlHelper, Draggable, DragEventArgs as DragArgs, DropEventArgs } from '@syncfusion/ej2-base';import { Base } from '@syncfusion/ej2-base';import { Popup, PopupModel } from '@syncfusion/ej2-popups';import { Toolbar, OverflowMode, ClickEventArgs } from '../toolbar/toolbar';
-import {HeaderPosition,HeightStyles,ContentLoad,AddEventArgs,SelectingEventArgs,SelectEventArgs,RemoveEventArgs,DragEventArgs} from "./tab";
+import {TabSwipeMode,HeaderPosition,HeightStyles,ContentLoad,AddEventArgs,SelectingEventArgs,SelectEventArgs,RemoveEventArgs,DragEventArgs} from "./tab";
 import {ComponentModel} from '@syncfusion/ej2-base';
@@ -183,2 +183,15 @@
     /**
+     * Defines whether the tab transition should occur or not when performing Touch/Mouse swipe action. 
+     *  
+     * @remarks 
+     * - `Both`: Enables swiping for both touch and mouse input. 
+     * - `Touch`: Enables swiping only for touch input. 
+     * - `Mouse`: Enables swiping only for mouse input. 
+     * - `None`: Disables swiping for both touch and mouse input. 
+     * 
+     * @default "Both"
+     */ 
+    swipeMode?: TabSwipeMode;
+
+    /**
      * Specifies the height of the Tab component. By default, Tab height is set based on the height of its parent.
@@ -249,3 +262,3 @@ * To use height property, heightAdjustMode must be set to 'None'.
      *
-     * @default 'Dynamic'
+     * @default 'Demand'
      */
@@ -252,0 +265,0 @@ loadOn?: ContentLoad;

src/tab/tab.d.ts

@@ -29,2 +29,10 @@ import { Component, EmitType } from '@syncfusion/ej2-base';
 /**
+ * Enables or disables the tab swiping action through Touch and Mouse.
+ * - `Both`: Enables swiping for both touch and mouse input.
+ * - `Touch`: Enables swiping only for touch input.
+ * - `Mouse`: Enables swiping only for mouse input.
+ * - `None`: Disables swiping for both touch and mouse input.
+ */
+export declare type TabSwipeMode = 'Both' | 'Touch' | 'Mouse' | 'None';
+/**
  * Specifies the options of Tab content display mode.
@@ -313,2 +321,14 @@ * ```props
     /**
+     * Defines whether the tab transition should occur or not when performing Touch/Mouse swipe action.
+     *
+     * @remarks
+     * - `Both`: Enables swiping for both touch and mouse input.
+     * - `Touch`: Enables swiping only for touch input.
+     * - `Mouse`: Enables swiping only for mouse input.
+     * - `None`: Disables swiping for both touch and mouse input.
+     *
+     * @default "Both"
+     */
+    swipeMode: TabSwipeMode;
+    /**
      * Specifies the height of the Tab component. By default, Tab height is set based on the height of its parent.
@@ -373,5 +393,5 @@ * To use height property, heightAdjustMode must be set to 'None'.
      *
-     * @default 'Dynamic'
+     * @default 'Demand'
      */
-    protected loadOn: ContentLoad;
+    loadOn: ContentLoad;
     /**
@@ -545,2 +565,3 @@ * Enable or disable persisting component's state between page reloads.
     private renderHeader;
+    private createContentElement;
     private renderContent;
@@ -576,2 +597,4 @@ private reRenderItems;
     private setCssClass;
+    private loadContentInitMode;
+    private loadContentElement;
     private setContentHeight;
@@ -586,2 +609,3 @@ private getHeight;
     private bindDraggable;
+    private bindSwipeEvents;
     private wireEvents;
@@ -588,0 +612,0 @@ private unWireEvents;

src/toolbar/toolbar-model.d.ts

@@ -231,8 +231,2 @@ import { Component, EventHandler, Property, Event, EmitType, BaseEventArgs } from '@syncfusion/ej2-base';import { addClass, removeClass, isVisible, closest, attributes, detach, classList, KeyboardEvents } from '@syncfusion/ej2-base';import { selectAll, setStyleAttribute as setStyle, KeyboardEventArgs, select } from '@syncfusion/ej2-base';import { isNullOrUndefined as isNOU, getUniqueID, formatUnit, Collection, compile as templateCompiler } from '@syncfusion/ej2-base';import { INotifyPropertyChanged, NotifyPropertyChanges, ChildProperty, Browser, SanitizeHtmlHelper } from '@syncfusion/ej2-base';import { Popup } from '@syncfusion/ej2-popups';import { calculatePosition } from '@syncfusion/ej2-popups';import { Button, IconPosition } from '@syncfusion/ej2-buttons';import { HScroll } from '../common/h-scroll';import { VScroll } from '../common/v-scroll';
      * Specifies the scrolling distance in scroller.
-     * The possible values for this property as follows
-     * * Scrollable - All the elements are displayed in a single line with horizontal scrolling enabled.
-     * * Popup - Prioritized elements are displayed on the Toolbar and the rest of elements are moved to the *popup*.
-     * * MultiRow - Displays the overflow toolbar items as an in-line of a toolbar.
-     * * Extended - Hide the overflowing toolbar items in the next row.  Show the overflowing toolbar items when you click the expand icons.
-     * * If the popup content overflows the height of the page, the rest of the elements will be hidden.
      *
@@ -239,0 +233,0 @@ * {% codeBlock src='toolbar/scrollStep/index.md' %}{% endcodeBlock %}

src/toolbar/toolbar.d.ts

@@ -302,8 +302,2 @@ import { Component, EmitType, BaseEventArgs } from '@syncfusion/ej2-base';
      * Specifies the scrolling distance in scroller.
-     * The possible values for this property as follows
-     * * Scrollable - All the elements are displayed in a single line with horizontal scrolling enabled.
-     * * Popup - Prioritized elements are displayed on the Toolbar and the rest of elements are moved to the *popup*.
-     * * MultiRow - Displays the overflow toolbar items as an in-line of a toolbar.
-     * * Extended - Hide the overflowing toolbar items in the next row.  Show the overflowing toolbar items when you click the expand icons.
-     * * If the popup content overflows the height of the page, the rest of the elements will be hidden.
      *
@@ -310,0 +304,0 @@ * {% codeBlock src='toolbar/scrollStep/index.md' %}{% endcodeBlock %}

src/treeview/treeview.d.ts

@@ -551,2 +551,3 @@ import { Component, EmitType } from '@syncfusion/ej2-base';
     private OldCheckedData;
+    private isHiddenItem;
     /**
@@ -1314,11 +1315,2 @@ * Indicates whether the TreeView allows drag and drop of nodes. To drag and drop a node in
      * @param {Object} [treeData] - The optional tree data.
-     * @returns {void}
-     * @private
-     */
-    /**
-     * Checks whether the checkedNodes entered are valid and sets the valid checkedNodes while changing via setmodel(for hierarchical DS)
-     *
-     * @param {Object[]} childItems - The child items to check.
-     * @param {string} node - The node to set the check state for.
-     * @param {Object} [treeData] - The optional tree data.
      * @param {string[]} [nodes=[]] - The list of node IDs to check.
@@ -1325,0 +1317,0 @@ * @returns {void}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

36470546

increased by7.71%

Number of package files

1437

increased by6.68%

Lines of code

742628

increased by9.88%

Dependency changes

• + Added@syncfusion/ej2-base@28.1.33(transitive)

• + Added@syncfusion/ej2-buttons@28.1.33(transitive)

• + Added@syncfusion/ej2-data@28.1.33(transitive)

• + Added@syncfusion/ej2-icons@28.1.33(transitive)

• + Added@syncfusion/ej2-inputs@28.1.33(transitive)

• + Added@syncfusion/ej2-lists@28.1.33(transitive)

• + Added@syncfusion/ej2-popups@28.1.33(transitive)

• + Added@syncfusion/ej2-splitbuttons@28.1.33(transitive)

• - Removed@syncfusion/ej2-base@27.2.5(transitive)

• - Removed@syncfusion/ej2-buttons@27.2.4(transitive)

• - Removed@syncfusion/ej2-data@27.2.2(transitive)

• - Removed@syncfusion/ej2-icons@27.2.2(transitive)

• - Removed@syncfusion/ej2-inputs@27.2.4(transitive)

• - Removed@syncfusion/ej2-lists@27.2.5(transitive)

• - Removed@syncfusion/ej2-popups@27.2.2(transitive)

• - Removed@syncfusion/ej2-splitbuttons@27.2.2(transitive)

• Updated@syncfusion/ej2-base@~28.1.33

• Updated@syncfusion/ej2-buttons@~28.1.33

• Updated@syncfusion/ej2-data@~28.1.33

• Updated@syncfusion/ej2-inputs@~28.1.33

• Updated@syncfusion/ej2-lists@~28.1.33

• Updated@syncfusion/ej2-popups@~28.1.33