@syncfusion/ej2-angular-navigations 23.2.7 → 24.1.41

package/fesm2015/syncfusion-ej2-angular-navigations.mjs

@@ -2,12 +2,12 @@ import { __decorate } from 'tslib';
 import * as i0 from '@angular/core';
 import { Directive, ContentChild, ContentChildren, Component, ChangeDetectionStrategy, NgModule } from '@angular/core';
 import { ComplexBase, setValue, Template, ArrayBase, ComponentBase, ComponentMixins } from '@syncfusion/ej2-angular-base';
-import { Accordion, Toolbar, ContextMenu, Breadcrumb, Carousel, Tab, TreeView, Sidebar, Menu, AppBar } from '@syncfusion/ej2-navigations';
+import { Accordion, Toolbar, ContextMenu, Breadcrumb, Carousel, Tab, TreeView, Sidebar, Menu, AppBar, Stepper } from '@syncfusion/ej2-navigations';
 export * from '@syncfusion/ej2-navigations';
 import { CommonModule } from '@angular/common';
 
-let input$5 = ['content', 'cssClass', 'disabled', 'expanded', 'header', 'iconCss', 'id', 'visible'];
-let outputs$f = [];
+let input$6 = ['content', 'cssClass', 'disabled', 'expanded', 'header', 'iconCss', 'id', 'visible'];
+let outputs$h = [];
 /**
  * 'e-accordionitem' directive represent a item of the Angular Accordion.
  * It must be contained in a Accordion component(`ejs-accordion`).
@@ -25,8 +25,8 @@ class AccordionItemDirective extends ComplexBase {
         super();
         this.viewContainerRef = viewContainerRef;
         setValue('currentInstance', this, this.viewContainerRef);
-        this.registerEvents(outputs$f);
-        this.directivePropList = input$5;
+        this.registerEvents(outputs$h);
+        this.directivePropList = input$6;
     }
 }
 AccordionItemDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: AccordionItemDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
@@ -41,8 +41,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
             type: Directive,
             args: [{
                     selector: 'e-accordionitems>e-accordionitem',
-                    inputs: input$5,
-                    outputs: outputs$f,
+                    inputs: input$6,
+                    outputs: outputs$h,
                     queries: {}
                 }]
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; }, propDecorators: { header: [{
@@ -73,9 +73,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 }]
         }], ctorParameters: function () { return []; } });
 
-const inputs$9 = ['animation', 'dataSource', 'enableHtmlSanitizer', 'enablePersistence', 'enableRtl', 'expandMode', 'expandedIndices', 'headerTemplate', 'height', 'itemTemplate', 'items', 'locale', 'width'];
-const outputs$e = ['clicked', 'created', 'destroyed', 'expanded', 'expanding', 'expandedIndicesChange'];
-const twoWays$9 = ['expandedIndices'];
+const inputs$a = ['animation', 'dataSource', 'enableHtmlSanitizer', 'enablePersistence', 'enableRtl', 'expandMode', 'expandedIndices', 'headerTemplate', 'height', 'itemTemplate', 'items', 'locale', 'width'];
+const outputs$g = ['clicked', 'created', 'destroyed', 'expanded', 'expanding', 'expandedIndicesChange'];
+const twoWays$a = ['expandedIndices'];
 /**
  * Represents the Angular Accordion Component.
  * ```html
@@ -92,8 +92,8 @@ let AccordionComponent = class AccordionComponent extends Accordion {
         this.tags = ['items'];
         this.element = this.ngEle.nativeElement;
         this.injectedModules = this.injectedModules || [];
-        this.registerEvents(outputs$e);
-        this.addTwoWay.call(this, twoWays$9);
+        this.registerEvents(outputs$g);
+        this.addTwoWay.call(this, twoWays$a);
         setValue('currentInstance', this, this.viewContainerRef);
         this.containerContext = new ComponentBase();
     }
@@ -126,8 +126,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
             type: Component,
             args: [{
                     selector: 'ejs-accordion',
-                    inputs: inputs$9,
-                    outputs: outputs$e,
+                    inputs: inputs$a,
+                    outputs: outputs$g,
                     template: `<ng-content select='div'></ng-content>`,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     queries: {
@@ -190,8 +190,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 }]
         }] });
 
-let input$4 = ['align', 'cssClass', 'disabled', 'htmlAttributes', 'id', 'overflow', 'prefixIcon', 'showAlwaysInPopup', 'showTextOn', 'suffixIcon', 'tabIndex', 'template', 'text', 'tooltipText', 'type', 'visible', 'width'];
-let outputs$d = ['click'];
+let input$5 = ['align', 'cssClass', 'disabled', 'htmlAttributes', 'id', 'overflow', 'prefixIcon', 'showAlwaysInPopup', 'showTextOn', 'suffixIcon', 'tabIndex', 'template', 'text', 'tooltipText', 'type', 'visible', 'width'];
+let outputs$f = ['click'];
 /**
  * 'e-item' directive represent a item of the Angular Toolbar.
  * It must be contained in a Toolbar component(`ejs-toolbar`).
@@ -209,8 +209,8 @@ class ItemDirective extends ComplexBase {
         super();
         this.viewContainerRef = viewContainerRef;
         setValue('currentInstance', this, this.viewContainerRef);
-        this.registerEvents(outputs$d);
-        this.directivePropList = input$4;
+        this.registerEvents(outputs$f);
+        this.directivePropList = input$5;
     }
 }
 ItemDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ItemDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
@@ -222,8 +222,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
             type: Directive,
             args: [{
                     selector: 'e-items>e-item',
-                    inputs: input$4,
-                    outputs: outputs$d,
+                    inputs: input$5,
+                    outputs: outputs$f,
                     queries: {}
                 }]
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; }, propDecorators: { template: [{
@@ -251,9 +251,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 }]
         }], ctorParameters: function () { return []; } });
 
-const inputs$8 = ['allowKeyboard', 'cssClass', 'enableCollision', 'enableHtmlSanitizer', 'enablePersistence', 'enableRtl', 'height', 'items', 'locale', 'overflowMode', 'scrollStep', 'width'];
-const outputs$c = ['beforeCreate', 'clicked', 'created', 'destroyed'];
-const twoWays$8 = [''];
+const inputs$9 = ['allowKeyboard', 'cssClass', 'enableCollision', 'enableHtmlSanitizer', 'enablePersistence', 'enableRtl', 'height', 'items', 'locale', 'overflowMode', 'scrollStep', 'width'];
+const outputs$e = ['beforeCreate', 'clicked', 'created', 'destroyed'];
+const twoWays$9 = [''];
 /**
  * Represents the Angular Toolbar Component.
  * ```html
@@ -270,8 +270,8 @@ let ToolbarComponent = class ToolbarComponent extends Toolbar {
         this.tags = ['items'];
         this.element = this.ngEle.nativeElement;
         this.injectedModules = this.injectedModules || [];
-        this.registerEvents(outputs$c);
-        this.addTwoWay.call(this, twoWays$8);
+        this.registerEvents(outputs$e);
+        this.addTwoWay.call(this, twoWays$9);
         setValue('currentInstance', this, this.viewContainerRef);
         this.containerContext = new ComponentBase();
     }
@@ -298,8 +298,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
             type: Component,
             args: [{
                     selector: 'ejs-toolbar',
-                    inputs: inputs$8,
-                    outputs: outputs$c,
+                    inputs: inputs$9,
+                    outputs: outputs$e,
                     template: `<ng-content select='div'></ng-content>`,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     queries: {
@@ -356,9 +356,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 }]
         }] });
 
-const inputs$7 = ['animationSettings', 'cssClass', 'enableHtmlSanitizer', 'enablePersistence', 'enableRtl', 'enableScrolling', 'fields', 'filter', 'hoverDelay', 'items', 'locale', 'showItemOnClick', 'target', 'template'];
-const outputs$b = ['beforeClose', 'beforeItemRender', 'beforeOpen', 'created', 'onClose', 'onOpen', 'select'];
-const twoWays$7 = [''];
+const inputs$8 = ['animationSettings', 'cssClass', 'enableHtmlSanitizer', 'enablePersistence', 'enableRtl', 'enableScrolling', 'fields', 'filter', 'hoverDelay', 'items', 'locale', 'showItemOnClick', 'target', 'template'];
+const outputs$d = ['beforeClose', 'beforeItemRender', 'beforeOpen', 'created', 'onClose', 'onOpen', 'select'];
+const twoWays$8 = [''];
 /**
  * Represents the EJ2 Angular ContextMenu Component.
  * ```html
@@ -375,8 +375,8 @@ let ContextMenuComponent = class ContextMenuComponent extends ContextMenu {
         this.injector = injector;
         this.element = this.ngEle.nativeElement;
         this.injectedModules = this.injectedModules || [];
-        this.registerEvents(outputs$b);
-        this.addTwoWay.call(this, twoWays$7);
+        this.registerEvents(outputs$d);
+        this.addTwoWay.call(this, twoWays$8);
         setValue('currentInstance', this, this.viewContainerRef);
         this.context = new ComponentBase();
     }
@@ -402,8 +402,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
             type: Component,
             args: [{
                     selector: 'ejs-contextmenu',
-                    inputs: inputs$7,
-                    outputs: outputs$b,
+                    inputs: inputs$8,
+                    outputs: outputs$d,
                     template: '',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     queries: {}
@@ -450,8 +450,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 }]
         }] });
 
-let input$3 = ['disabled', 'iconCss', 'text', 'url'];
-let outputs$a = [];
+let input$4 = ['disabled', 'iconCss', 'text', 'url'];
+let outputs$c = [];
 /**
  * `e-breadcrumb-item` directive represent a item of the Angular Breadcrumb.
  * It must be contained in a Breadcrumb component(`ejs-breadcrumb`).
@@ -469,8 +469,8 @@ class BreadcrumbItemDirective extends ComplexBase {
         super();
         this.viewContainerRef = viewContainerRef;
         setValue('currentInstance', this, this.viewContainerRef);
-        this.registerEvents(outputs$a);
-        this.directivePropList = input$3;
+        this.registerEvents(outputs$c);
+        this.directivePropList = input$4;
     }
 }
 BreadcrumbItemDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: BreadcrumbItemDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
@@ -479,8 +479,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
             type: Directive,
             args: [{
                     selector: 'ejs-breadcrumb>e-breadcrumb-items>e-breadcrumb-item',
-                    inputs: input$3,
-                    outputs: outputs$a,
+                    inputs: input$4,
+                    outputs: outputs$c,
                     queries: {}
                 }]
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; } });
@@ -505,9 +505,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 }]
         }], ctorParameters: function () { return []; } });
 
-const inputs$6 = ['activeItem', 'cssClass', 'disabled', 'enableActiveItemNavigation', 'enableNavigation', 'enablePersistence', 'enableRtl', 'itemTemplate', 'items', 'locale', 'maxItems', 'overflowMode', 'separatorTemplate', 'url'];
-const outputs$9 = ['beforeItemRender', 'created', 'itemClick', 'activeItemChange'];
-const twoWays$6 = ['activeItem'];
+const inputs$7 = ['activeItem', 'cssClass', 'disabled', 'enableActiveItemNavigation', 'enableNavigation', 'enablePersistence', 'enableRtl', 'itemTemplate', 'items', 'locale', 'maxItems', 'overflowMode', 'separatorTemplate', 'url'];
+const outputs$b = ['beforeItemRender', 'created', 'itemClick', 'activeItemChange'];
+const twoWays$7 = ['activeItem'];
 /**
  * Represents the EJ2 Angular Breadcrumb Component.
  * ```html
@@ -524,8 +524,8 @@ let BreadcrumbComponent = class BreadcrumbComponent extends Breadcrumb {
         this.tags = ['items'];
         this.element = this.ngEle.nativeElement;
         this.injectedModules = this.injectedModules || [];
-        this.registerEvents(outputs$9);
-        this.addTwoWay.call(this, twoWays$6);
+        this.registerEvents(outputs$b);
+        this.addTwoWay.call(this, twoWays$7);
         setValue('currentInstance', this, this.viewContainerRef);
         this.context = new ComponentBase();
     }
@@ -558,8 +558,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
             type: Component,
             args: [{
                     selector: 'ejs-breadcrumb',
-                    inputs: inputs$6,
-                    outputs: outputs$9,
+                    inputs: inputs$7,
+                    outputs: outputs$b,
                     template: '',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     queries: {
@@ -622,8 +622,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 }]
         }] });
 
-let input$2 = ['cssClass', 'htmlAttributes', 'interval', 'template'];
-let outputs$8 = [];
+let input$3 = ['cssClass', 'htmlAttributes', 'interval', 'template'];
+let outputs$a = [];
 /**
  * `e-carousel-item` directive represent a item of the Angular Carousel.
  * It must be contained in a Carousel component(`ejs-carousel`).
@@ -641,8 +641,8 @@ class CarouselItemDirective extends ComplexBase {
         super();
         this.viewContainerRef = viewContainerRef;
         setValue('currentInstance', this, this.viewContainerRef);
-        this.registerEvents(outputs$8);
-        this.directivePropList = input$2;
+        this.registerEvents(outputs$a);
+        this.directivePropList = input$3;
     }
 }
 CarouselItemDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: CarouselItemDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
@@ -654,8 +654,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
             type: Directive,
             args: [{
                     selector: 'ejs-carousel>e-carousel-items>e-carousel-item',
-                    inputs: input$2,
-                    outputs: outputs$8,
+                    inputs: input$3,
+                    outputs: outputs$a,
                     queries: {}
                 }]
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; }, propDecorators: { template: [{
@@ -683,9 +683,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 }]
         }], ctorParameters: function () { return []; } });
 
-const inputs$5 = ['animationEffect', 'autoPlay', 'buttonsVisibility', 'cssClass', 'dataSource', 'enablePersistence', 'enableRtl', 'enableTouchSwipe', 'height', 'htmlAttributes', 'indicatorsTemplate', 'indicatorsType', 'interval', 'itemTemplate', 'items', 'locale', 'loop', 'nextButtonTemplate', 'partialVisible', 'pauseOnHover', 'playButtonTemplate', 'previousButtonTemplate', 'selectedIndex', 'showIndicators', 'showPlayButton', 'swipeMode', 'width'];
-const outputs$7 = ['slideChanged', 'slideChanging', 'selectedIndexChange'];
-const twoWays$5 = ['selectedIndex'];
+const inputs$6 = ['animationEffect', 'autoPlay', 'buttonsVisibility', 'cssClass', 'dataSource', 'enablePersistence', 'enableRtl', 'enableTouchSwipe', 'height', 'htmlAttributes', 'indicatorsTemplate', 'indicatorsType', 'interval', 'itemTemplate', 'items', 'locale', 'loop', 'nextButtonTemplate', 'partialVisible', 'pauseOnHover', 'playButtonTemplate', 'previousButtonTemplate', 'selectedIndex', 'showIndicators', 'showPlayButton', 'swipeMode', 'width'];
+const outputs$9 = ['slideChanged', 'slideChanging', 'selectedIndexChange'];
+const twoWays$6 = ['selectedIndex'];
 /**
  * Represents the EJ2 Angular Carousel Component.
  * ```html
@@ -702,8 +702,8 @@ let CarouselComponent = class CarouselComponent extends Carousel {
         this.tags = ['items'];
         this.element = this.ngEle.nativeElement;
         this.injectedModules = this.injectedModules || [];
-        this.registerEvents(outputs$7);
-        this.addTwoWay.call(this, twoWays$5);
+        this.registerEvents(outputs$9);
+        this.addTwoWay.call(this, twoWays$6);
         setValue('currentInstance', this, this.viewContainerRef);
         this.context = new ComponentBase();
     }
@@ -745,8 +745,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
             type: Component,
             args: [{
                     selector: 'ejs-carousel',
-                    inputs: inputs$5,
-                    outputs: outputs$7,
+                    inputs: inputs$6,
+                    outputs: outputs$9,
                     template: '',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     queries: {
@@ -818,8 +818,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 }]
         }] });
 
-let input$1 = ['content', 'cssClass', 'disabled', 'header', 'headerTemplate', 'id', 'tabIndex', 'visible'];
-let outputs$6 = [];
+let input$2 = ['content', 'cssClass', 'disabled', 'header', 'headerTemplate', 'id', 'tabIndex', 'visible'];
+let outputs$8 = [];
 /**
  * 'e-tabitem' directive represent a item of the Angular Tab.
  * It must be contained in a Tab component(`ejs-tab`).
@@ -837,8 +837,8 @@ class TabItemDirective extends ComplexBase {
         super();
         this.viewContainerRef = viewContainerRef;
         setValue('currentInstance', this, this.viewContainerRef);
-        this.registerEvents(outputs$6);
-        this.directivePropList = input$1;
+        this.registerEvents(outputs$8);
+        this.directivePropList = input$2;
     }
 }
 TabItemDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: TabItemDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
@@ -856,8 +856,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
             type: Directive,
             args: [{
                     selector: 'e-tabitems>e-tabitem',
-                    inputs: input$1,
-                    outputs: outputs$6,
+                    inputs: input$2,
+                    outputs: outputs$8,
                     queries: {}
                 }]
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; }, propDecorators: { content: [{
@@ -891,9 +891,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 }]
         }], ctorParameters: function () { return []; } });
 
-const inputs$4 = ['allowDragAndDrop', 'animation', 'clearTemplates', 'cssClass', 'dragArea', 'enableHtmlSanitizer', 'enablePersistence', 'enableRtl', 'headerPlacement', 'height', 'heightAdjustMode', 'items', 'loadOn', 'locale', 'overflowMode', 'reorderActiveTab', 'scrollStep', 'selectedItem', 'showCloseButton', 'width'];
-const outputs$5 = ['added', 'adding', 'created', 'destroyed', 'dragged', 'dragging', 'onDragStart', 'removed', 'removing', 'selected', 'selecting'];
-const twoWays$4 = [''];
+const inputs$5 = ['allowDragAndDrop', 'animation', 'clearTemplates', 'cssClass', 'dragArea', 'enableHtmlSanitizer', 'enablePersistence', 'enableRtl', 'headerPlacement', 'height', 'heightAdjustMode', 'items', 'loadOn', 'locale', 'overflowMode', 'reorderActiveTab', 'scrollStep', 'selectedItem', 'showCloseButton', 'width'];
+const outputs$7 = ['added', 'adding', 'created', 'destroyed', 'dragged', 'dragging', 'onDragStart', 'removed', 'removing', 'selected', 'selecting'];
+const twoWays$5 = [''];
 /**
  * Represents the Angular Tab Component.
  * ```html
@@ -910,8 +910,8 @@ let TabComponent = class TabComponent extends Tab {
         this.tags = ['items'];
         this.element = this.ngEle.nativeElement;
         this.injectedModules = this.injectedModules || [];
-        this.registerEvents(outputs$5);
-        this.addTwoWay.call(this, twoWays$4);
+        this.registerEvents(outputs$7);
+        this.addTwoWay.call(this, twoWays$5);
         setValue('currentInstance', this, this.viewContainerRef);
         this.containerContext = new ComponentBase();
     }
@@ -938,8 +938,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
             type: Component,
             args: [{
                     selector: 'ejs-tab',
-                    inputs: inputs$4,
-                    outputs: outputs$5,
+                    inputs: inputs$5,
+                    outputs: outputs$7,
                     template: `<ng-content select='div'></ng-content>`,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     queries: {
@@ -996,9 +996,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 }]
         }] });
 
-const inputs$3 = ['allowDragAndDrop', 'allowEditing', 'allowMultiSelection', 'allowTextWrap', 'animation', 'autoCheck', 'checkedNodes', 'cssClass', 'disabled', 'dragArea', 'enableHtmlSanitizer', 'enablePersistence', 'enableRtl', 'expandOn', 'expandedNodes', 'fields', 'fullRowNavigable', 'fullRowSelect', 'loadOnDemand', 'locale', 'nodeTemplate', 'selectedNodes', 'showCheckBox', 'sortOrder'];
-const outputs$4 = ['actionFailure', 'created', 'dataBound', 'dataSourceChanged', 'destroyed', 'drawNode', 'keyPress', 'nodeChecked', 'nodeChecking', 'nodeClicked', 'nodeCollapsed', 'nodeCollapsing', 'nodeDragStart', 'nodeDragStop', 'nodeDragging', 'nodeDropped', 'nodeEdited', 'nodeEditing', 'nodeExpanded', 'nodeExpanding', 'nodeSelected', 'nodeSelecting'];
-const twoWays$3 = [''];
+const inputs$4 = ['allowDragAndDrop', 'allowEditing', 'allowMultiSelection', 'allowTextWrap', 'animation', 'autoCheck', 'checkedNodes', 'cssClass', 'disabled', 'dragArea', 'enableHtmlSanitizer', 'enablePersistence', 'enableRtl', 'expandOn', 'expandedNodes', 'fields', 'fullRowNavigable', 'fullRowSelect', 'loadOnDemand', 'locale', 'nodeTemplate', 'selectedNodes', 'showCheckBox', 'sortOrder'];
+const outputs$6 = ['actionFailure', 'created', 'dataBound', 'dataSourceChanged', 'destroyed', 'drawNode', 'keyPress', 'nodeChecked', 'nodeChecking', 'nodeClicked', 'nodeCollapsed', 'nodeCollapsing', 'nodeDragStart', 'nodeDragStop', 'nodeDragging', 'nodeDropped', 'nodeEdited', 'nodeEditing', 'nodeExpanded', 'nodeExpanding', 'nodeSelected', 'nodeSelecting'];
+const twoWays$4 = [''];
 /**
  * TreeView component is used to represent the hierarchical data in tree like structure with advanced functions to perform edit, drag and drop, selection with check-box and more.
  * ```html
@@ -1014,8 +1014,8 @@ let TreeViewComponent = class TreeViewComponent extends TreeView {
         this.injector = injector;
         this.element = this.ngEle.nativeElement;
         this.injectedModules = this.injectedModules || [];
-        this.registerEvents(outputs$4);
-        this.addTwoWay.call(this, twoWays$3);
+        this.registerEvents(outputs$6);
+        this.addTwoWay.call(this, twoWays$4);
         setValue('currentInstance', this, this.viewContainerRef);
         this.context = new ComponentBase();
     }
@@ -1044,8 +1044,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
             type: Component,
             args: [{
                     selector: 'ejs-treeview',
-                    inputs: inputs$3,
-                    outputs: outputs$4,
+                    inputs: inputs$4,
+                    outputs: outputs$6,
                     template: '',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     queries: {}
@@ -1095,9 +1095,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 }]
         }] });
 
-const inputs$2 = ['animate', 'closeOnDocumentClick', 'dockSize', 'enableDock', 'enableGestures', 'enablePersistence', 'enableRtl', 'height', 'isOpen', 'locale', 'mediaQuery', 'position', 'showBackdrop', 'target', 'type', 'width', 'zIndex'];
-const outputs$3 = ['change', 'close', 'created', 'destroyed', 'open', 'isOpenChange'];
-const twoWays$2 = ['isOpen'];
+const inputs$3 = ['animate', 'closeOnDocumentClick', 'dockSize', 'enableDock', 'enableGestures', 'enablePersistence', 'enableRtl', 'height', 'isOpen', 'locale', 'mediaQuery', 'position', 'showBackdrop', 'target', 'type', 'width', 'zIndex'];
+const outputs$5 = ['change', 'close', 'created', 'destroyed', 'open', 'isOpenChange'];
+const twoWays$3 = ['isOpen'];
 /**
  * Represents the Essential JS 2 Angular Sidebar Component.
  * ```html
@@ -1113,8 +1113,8 @@ let SidebarComponent = class SidebarComponent extends Sidebar {
         this.injector = injector;
         this.element = this.ngEle.nativeElement;
         this.injectedModules = this.injectedModules || [];
-        this.registerEvents(outputs$3);
-        this.addTwoWay.call(this, twoWays$2);
+        this.registerEvents(outputs$5);
+        this.addTwoWay.call(this, twoWays$3);
         setValue('currentInstance', this, this.viewContainerRef);
         this.containerContext = new ComponentBase();
     }
@@ -1140,8 +1140,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
             type: Component,
             args: [{
                     selector: 'ejs-sidebar',
-                    inputs: inputs$2,
-                    outputs: outputs$3,
+                    inputs: inputs$3,
+                    outputs: outputs$5,
                     template: `<ng-content ></ng-content>`,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     queries: {}
@@ -1188,15 +1188,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 }]
         }] });
 
-let input = ['iconCss', 'id', 'items', 'separator', 'text', 'url'];
-let outputs$2 = [];
+let input$1 = ['iconCss', 'id', 'items', 'separator', 'text', 'url'];
+let outputs$4 = [];
 class MenuItemDirective extends ComplexBase {
     constructor(viewContainerRef) {
         super();
         this.viewContainerRef = viewContainerRef;
         setValue('currentInstance', this, this.viewContainerRef);
-        this.registerEvents(outputs$2);
-        this.directivePropList = input;
+        this.registerEvents(outputs$4);
+        this.directivePropList = input$1;
     }
 }
 MenuItemDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: MenuItemDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
@@ -1205,8 +1205,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
             type: Directive,
             args: [{
                     selector: 'ejs-menu>e-menu-items>e-menu-item>',
-                    inputs: input,
-                    outputs: outputs$2,
+                    inputs: input$1,
+                    outputs: outputs$4,
                     queries: {}
                 }]
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; } });
@@ -1231,9 +1231,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 }]
         }], ctorParameters: function () { return []; } });
 
-const inputs$1 = ['animationSettings', 'cssClass', 'enableHtmlSanitizer', 'enablePersistence', 'enableRtl', 'enableScrolling', 'fields', 'filter', 'hamburgerMode', 'hoverDelay', 'items', 'locale', 'orientation', 'showItemOnClick', 'target', 'template', 'title'];
-const outputs$1 = ['beforeClose', 'beforeItemRender', 'beforeOpen', 'created', 'onClose', 'onOpen', 'select'];
-const twoWays$1 = [''];
+const inputs$2 = ['animationSettings', 'cssClass', 'enableHtmlSanitizer', 'enablePersistence', 'enableRtl', 'enableScrolling', 'fields', 'filter', 'hamburgerMode', 'hoverDelay', 'items', 'locale', 'orientation', 'showItemOnClick', 'target', 'template', 'title'];
+const outputs$3 = ['beforeClose', 'beforeItemRender', 'beforeOpen', 'created', 'onClose', 'onOpen', 'select'];
+const twoWays$2 = [''];
 /**
  * Represents the EJ2 Angular Menu Component.
  * ```html
@@ -1250,8 +1250,8 @@ let MenuComponent = class MenuComponent extends Menu {
         this.tags = ['items'];
         this.element = this.ngEle.nativeElement;
         this.injectedModules = this.injectedModules || [];
-        this.registerEvents(outputs$1);
-        this.addTwoWay.call(this, twoWays$1);
+        this.registerEvents(outputs$3);
+        this.addTwoWay.call(this, twoWays$2);
         setValue('currentInstance', this, this.viewContainerRef);
         this.context = new ComponentBase();
     }
@@ -1281,8 +1281,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
             type: Component,
             args: [{
                     selector: 'ejs-menu',
-                    inputs: inputs$1,
-                    outputs: outputs$1,
+                    inputs: inputs$2,
+                    outputs: outputs$3,
                     template: '',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     queries: {
@@ -1342,9 +1342,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 }]
         }] });
 
-const inputs = ['colorMode', 'cssClass', 'enablePersistence', 'enableRtl', 'htmlAttributes', 'isSticky', 'locale', 'mode', 'position'];
-const outputs = ['created', 'destroyed'];
-const twoWays = [''];
+const inputs$1 = ['colorMode', 'cssClass', 'enablePersistence', 'enableRtl', 'htmlAttributes', 'isSticky', 'locale', 'mode', 'position'];
+const outputs$2 = ['created', 'destroyed'];
+const twoWays$1 = [''];
 /**
  * Represents the Essential JS 2 Angular AppBar Component.
  * ```html
@@ -1360,8 +1360,8 @@ let AppBarComponent = class AppBarComponent extends AppBar {
         this.injector = injector;
         this.element = this.ngEle.nativeElement;
         this.injectedModules = this.injectedModules || [];
-        this.registerEvents(outputs);
-        this.addTwoWay.call(this, twoWays);
+        this.registerEvents(outputs$2);
+        this.addTwoWay.call(this, twoWays$1);
         setValue('currentInstance', this, this.viewContainerRef);
         this.containerContext = new ComponentBase();
     }
@@ -1387,8 +1387,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
             type: Component,
             args: [{
                     selector: 'ejs-appbar',
-                    inputs: inputs,
-                    outputs: outputs,
+                    inputs: inputs$1,
+                    outputs: outputs$2,
                     template: `<ng-content ></ng-content>`,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     queries: {}
@@ -1435,11 +1435,183 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 }]
         }] });
 
+let input = ['cssClass', 'disabled', 'iconCss', 'isValid', 'label', 'optional', 'status', 'text'];
+let outputs$1 = [];
+/**
+ * 'e-step' directive represents a step of the Angular Stepper.
+ * It must be contained in a Stepper component(`ejs-stepper`).
+ * ```html
+ * <ejs-stepper>
+ *  <e-steps>
+ *   <e-step [icon]='e-icons e-folder' [text]='Step 1' />
+ *   <e-step [icon]='e-icons e-folder' [text]='Step 2' />
+ *  </e-steps>
+ * </ejs-stepper>
+ * ```
+ */
+class StepDirective extends ComplexBase {
+    constructor(viewContainerRef) {
+        super();
+        this.viewContainerRef = viewContainerRef;
+        setValue('currentInstance', this, this.viewContainerRef);
+        this.registerEvents(outputs$1);
+        this.directivePropList = input;
+    }
+}
+StepDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: StepDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+StepDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: StepDirective, selector: "ejs-stepper>e-steps>e-step", inputs: { cssClass: "cssClass", disabled: "disabled", iconCss: "iconCss", isValid: "isValid", label: "label", optional: "optional", status: "status", text: "text" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: StepDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ejs-stepper>e-steps>e-step',
+                    inputs: input,
+                    outputs: outputs$1,
+                    queries: {}
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; } });
+/**
+ * Step Array Directive
+ * @private
+ */
+class StepsDirective extends ArrayBase {
+    constructor() {
+        super('steps');
+    }
+}
+StepsDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: StepsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+StepsDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: StepsDirective, selector: "ejs-stepper>e-steps", queries: [{ propertyName: "children", predicate: StepDirective }], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: StepsDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ejs-stepper>e-steps',
+                    queries: {
+                        children: new ContentChildren(StepDirective)
+                    },
+                }]
+        }], ctorParameters: function () { return []; } });
+
+const inputs = ['activeStep', 'animation', 'cssClass', 'enablePersistence', 'enableRtl', 'labelPosition', 'linear', 'locale', 'orientation', 'readOnly', 'showTooltip', 'stepType', 'steps', 'template', 'tooltipTemplate'];
+const outputs = ['beforeStepRender', 'created', 'stepChanged', 'stepChanging', 'stepClick', 'activeStepChange'];
+const twoWays = ['activeStep'];
+/**
+ * Represents the EJ2 Angular Stepper Component.
+ * ```html
+ * <nav ejs-stepper [steps]='stepItems'></nav>
+ * ```
+ */
+let StepperComponent = class StepperComponent extends Stepper {
+    constructor(ngEle, srenderer, viewContainerRef, injector) {
+        super();
+        this.ngEle = ngEle;
+        this.srenderer = srenderer;
+        this.viewContainerRef = viewContainerRef;
+        this.injector = injector;
+        this.tags = ['steps'];
+        this.element = this.ngEle.nativeElement;
+        this.injectedModules = this.injectedModules || [];
+        this.registerEvents(outputs);
+        this.addTwoWay.call(this, twoWays);
+        setValue('currentInstance', this, this.viewContainerRef);
+        this.containerContext = new ComponentBase();
+    }
+    ngOnInit() {
+        this.containerContext.ngOnInit(this);
+    }
+    ngAfterViewInit() {
+        this.containerContext.ngAfterViewInit(this);
+    }
+    ngOnDestroy() {
+        this.containerContext.ngOnDestroy(this);
+    }
+    ngAfterContentChecked() {
+        this.tagObjects[0].instance = this.childSteps;
+        this.containerContext.ngAfterContentChecked(this);
+    }
+};
+StepperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: StepperComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+StepperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: StepperComponent, selector: "ejs-stepper", inputs: { activeStep: "activeStep", animation: "animation", cssClass: "cssClass", enablePersistence: "enablePersistence", enableRtl: "enableRtl", labelPosition: "labelPosition", linear: "linear", locale: "locale", orientation: "orientation", readOnly: "readOnly", showTooltip: "showTooltip", stepType: "stepType", steps: "steps", template: "template", tooltipTemplate: "tooltipTemplate" }, outputs: { beforeStepRender: "beforeStepRender", created: "created", stepChanged: "stepChanged", stepChanging: "stepChanging", stepClick: "stepClick", activeStepChange: "activeStepChange" }, queries: [{ propertyName: "template", first: true, predicate: ["template"], descendants: true }, { propertyName: "tooltipTemplate", first: true, predicate: ["tooltipTemplate"], descendants: true }, { propertyName: "childSteps", first: true, predicate: StepsDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: `<ng-content select='nav'></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+__decorate([
+    Template()
+], StepperComponent.prototype, "template", void 0);
+__decorate([
+    Template()
+], StepperComponent.prototype, "tooltipTemplate", void 0);
+StepperComponent = __decorate([
+    ComponentMixins([ComponentBase])
+], StepperComponent);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: StepperComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ejs-stepper',
+                    inputs: inputs,
+                    outputs: outputs,
+                    template: `<ng-content select='nav'></ng-content>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    queries: {
+                        childSteps: new ContentChild(StepsDirective)
+                    }
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }, { type: i0.Injector }]; }, propDecorators: { template: [{
+                type: ContentChild,
+                args: ['template']
+            }], tooltipTemplate: [{
+                type: ContentChild,
+                args: ['tooltipTemplate']
+            }] } });
+
+/**
+ * NgModule definition for the Stepper component.
+ */
+class StepperModule {
+}
+StepperModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: StepperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+StepperModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: StepperModule, declarations: [StepperComponent,
+        StepDirective,
+        StepsDirective], imports: [CommonModule], exports: [StepperComponent,
+        StepDirective,
+        StepsDirective] });
+StepperModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: StepperModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: StepperModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                    declarations: [
+                        StepperComponent,
+                        StepDirective,
+                        StepsDirective
+                    ],
+                    exports: [
+                        StepperComponent,
+                        StepDirective,
+                        StepsDirective
+                    ]
+                }]
+        }] });
+
+/**
+ * NgModule definition for the Stepper component with providers.
+ */
+class StepperAllModule {
+}
+StepperAllModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: StepperAllModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+StepperAllModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: StepperAllModule, imports: [CommonModule, StepperModule], exports: [StepperModule] });
+StepperAllModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: StepperAllModule, providers: [], imports: [[CommonModule, StepperModule], StepperModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: StepperAllModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, StepperModule],
+                    exports: [
+                        StepperModule
+                    ],
+                    providers: []
+                }]
+        }] });
+
 // Mapping root file for package generation
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionAllModule, AccordionComponent, AccordionItemDirective, AccordionItemsDirective, AccordionModule, AppBarAllModule, AppBarComponent, AppBarModule, BreadcrumbAllModule, BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbItemsDirective, BreadcrumbModule, CarouselAllModule, CarouselComponent, CarouselItemDirective, CarouselItemsDirective, CarouselModule, ContextMenuAllModule, ContextMenuComponent, ContextMenuModule, ItemDirective, ItemsDirective, MenuAllModule, MenuComponent, MenuItemDirective, MenuItemsDirective, MenuModule, SidebarAllModule, SidebarComponent, SidebarModule, TabAllModule, TabComponent, TabItemDirective, TabItemsDirective, TabModule, ToolbarAllModule, ToolbarComponent, ToolbarModule, TreeViewAllModule, TreeViewComponent, TreeViewModule };
+export { AccordionAllModule, AccordionComponent, AccordionItemDirective, AccordionItemsDirective, AccordionModule, AppBarAllModule, AppBarComponent, AppBarModule, BreadcrumbAllModule, BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbItemsDirective, BreadcrumbModule, CarouselAllModule, CarouselComponent, CarouselItemDirective, CarouselItemsDirective, CarouselModule, ContextMenuAllModule, ContextMenuComponent, ContextMenuModule, ItemDirective, ItemsDirective, MenuAllModule, MenuComponent, MenuItemDirective, MenuItemsDirective, MenuModule, SidebarAllModule, SidebarComponent, SidebarModule, StepDirective, StepperAllModule, StepperComponent, StepperModule, StepsDirective, TabAllModule, TabComponent, TabItemDirective, TabItemsDirective, TabModule, ToolbarAllModule, ToolbarComponent, ToolbarModule, TreeViewAllModule, TreeViewComponent, TreeViewModule };
 //# sourceMappingURL=syncfusion-ej2-angular-navigations.mjs.map