@syncfusion/ej2-angular-navigations 20.2.50 → 20.3.47

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 } from '@syncfusion/ej2-navigations';
+import { Accordion, Toolbar, ContextMenu, Breadcrumb, Carousel, Tab, TreeView, Sidebar, Menu, AppBar } 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$e = [];
+let outputs$f = [];
 /**
  * 'e-accordionitem' directive represent a item of the Angular Accordion.
  * It must be contained in a Accordion component(`ejs-accordion`).
@@ -25,7 +25,7 @@ class AccordionItemDirective extends ComplexBase {
         super();
         this.viewContainerRef = viewContainerRef;
         setValue('currentInstance', this, this.viewContainerRef);
-        this.registerEvents(outputs$e);
+        this.registerEvents(outputs$f);
         this.directivePropList = input$5;
     }
 }
@@ -42,7 +42,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
             args: [{
                     selector: 'e-accordionitems>e-accordionitem',
                     inputs: input$5,
-                    outputs: outputs$e,
+                    outputs: outputs$f,
                     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$8 = ['animation', 'dataSource', 'enableHtmlSanitizer', 'enablePersistence', 'enableRtl', 'expandMode', 'expandedIndices', 'headerTemplate', 'height', 'itemTemplate', 'items', 'locale', 'width'];
-const outputs$d = ['clicked', 'created', 'destroyed', 'expanded', 'expanding', 'expandedIndicesChange'];
-const twoWays$8 = ['expandedIndices'];
+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'];
 /**
  * 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$d);
-        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();
     }
@@ -126,8 +126,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
             type: Component,
             args: [{
                     selector: 'ejs-accordion',
-                    inputs: inputs$8,
-                    outputs: outputs$d,
+                    inputs: inputs$9,
+                    outputs: outputs$e,
                     template: `<ng-content select='div'></ng-content>`,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     queries: {
@@ -191,7 +191,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
         }] });
 
 let input$4 = ['align', 'cssClass', 'disabled', 'htmlAttributes', 'id', 'overflow', 'prefixIcon', 'showAlwaysInPopup', 'showTextOn', 'suffixIcon', 'template', 'text', 'tooltipText', 'type', 'visible', 'width'];
-let outputs$c = ['click'];
+let outputs$d = ['click'];
 /**
  * 'e-item' directive represent a item of the Angular Toolbar.
  * It must be contained in a Toolbar component(`ejs-toolbar`).
@@ -209,7 +209,7 @@ class ItemDirective extends ComplexBase {
         super();
         this.viewContainerRef = viewContainerRef;
         setValue('currentInstance', this, this.viewContainerRef);
-        this.registerEvents(outputs$c);
+        this.registerEvents(outputs$d);
         this.directivePropList = input$4;
     }
 }
@@ -223,7 +223,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
             args: [{
                     selector: 'e-items>e-item',
                     inputs: input$4,
-                    outputs: outputs$c,
+                    outputs: outputs$d,
                     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$7 = ['allowKeyboard', 'cssClass', 'enableCollision', 'enableHtmlSanitizer', 'enablePersistence', 'enableRtl', 'height', 'items', 'locale', 'overflowMode', 'scrollStep', 'width'];
-const outputs$b = ['beforeCreate', 'clicked', 'created', 'destroyed'];
-const twoWays$7 = [''];
+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 = [''];
 /**
  * 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$b);
-        this.addTwoWay.call(this, twoWays$7);
+        this.registerEvents(outputs$c);
+        this.addTwoWay.call(this, twoWays$8);
         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$7,
-                    outputs: outputs$b,
+                    inputs: inputs$8,
+                    outputs: outputs$c,
                     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$6 = ['animationSettings', 'cssClass', 'enableHtmlSanitizer', 'enablePersistence', 'enableRtl', 'enableScrolling', 'fields', 'filter', 'hoverDelay', 'items', 'locale', 'showItemOnClick', 'target', 'template'];
-const outputs$a = ['beforeClose', 'beforeItemRender', 'beforeOpen', 'created', 'onClose', 'onOpen', 'select'];
-const twoWays$6 = [''];
+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 = [''];
 /**
  * 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$a);
-        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();
     }
@@ -402,8 +402,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
             type: Component,
             args: [{
                     selector: 'ejs-contextmenu',
-                    inputs: inputs$6,
-                    outputs: outputs$a,
+                    inputs: inputs$7,
+                    outputs: outputs$b,
                     template: '',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     queries: {}
@@ -451,7 +451,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
         }] });
 
 let input$3 = ['disabled', 'iconCss', 'text', 'url'];
-let outputs$9 = [];
+let outputs$a = [];
 /**
  * `e-breadcrumb-item` directive represent a item of the Angular Breadcrumb.
  * It must be contained in a Breadcrumb component(`ejs-breadcrumb`).
@@ -469,7 +469,7 @@ class BreadcrumbItemDirective extends ComplexBase {
         super();
         this.viewContainerRef = viewContainerRef;
         setValue('currentInstance', this, this.viewContainerRef);
-        this.registerEvents(outputs$9);
+        this.registerEvents(outputs$a);
         this.directivePropList = input$3;
     }
 }
@@ -480,7 +480,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
             args: [{
                     selector: 'ejs-breadcrumb>e-breadcrumb-items>e-breadcrumb-item',
                     inputs: input$3,
-                    outputs: outputs$9,
+                    outputs: outputs$a,
                     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$5 = ['activeItem', 'cssClass', 'disabled', 'enableActiveItemNavigation', 'enableNavigation', 'enablePersistence', 'enableRtl', 'itemTemplate', 'items', 'locale', 'maxItems', 'overflowMode', 'separatorTemplate', 'url'];
-const outputs$8 = ['beforeItemRender', 'created', 'itemClick', 'activeItemChange'];
-const twoWays$5 = ['activeItem'];
+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'];
 /**
  * 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$8);
-        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();
     }
@@ -558,8 +558,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
             type: Component,
             args: [{
                     selector: 'ejs-breadcrumb',
-                    inputs: inputs$5,
-                    outputs: outputs$8,
+                    inputs: inputs$6,
+                    outputs: outputs$9,
                     template: '',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     queries: {
@@ -623,7 +623,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
         }] });
 
 let input$2 = ['cssClass', 'htmlAttributes', 'interval', 'template'];
-let outputs$7 = [];
+let outputs$8 = [];
 /**
  * `e-carousel-item` directive represent a item of the Angular Carousel.
  * It must be contained in a Carousel component(`ejs-carousel`).
@@ -641,7 +641,7 @@ class CarouselItemDirective extends ComplexBase {
         super();
         this.viewContainerRef = viewContainerRef;
         setValue('currentInstance', this, this.viewContainerRef);
-        this.registerEvents(outputs$7);
+        this.registerEvents(outputs$8);
         this.directivePropList = input$2;
     }
 }
@@ -655,7 +655,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
             args: [{
                     selector: 'ejs-carousel>e-carousel-items>e-carousel-item',
                     inputs: input$2,
-                    outputs: outputs$7,
+                    outputs: outputs$8,
                     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$4 = ['animationEffect', 'autoPlay', 'buttonsVisibility', 'cssClass', 'dataSource', 'enablePersistence', 'enableRtl', 'enableTouchSwipe', 'height', 'htmlAttributes', 'indicatorsTemplate', 'interval', 'itemTemplate', 'items', 'locale', 'loop', 'nextButtonTemplate', 'pauseOnHover', 'playButtonTemplate', 'previousButtonTemplate', 'selectedIndex', 'showIndicators', 'showPlayButton', 'width'];
-const outputs$6 = ['slideChanged', 'slideChanging', 'selectedIndexChange'];
-const twoWays$4 = ['selectedIndex'];
+const inputs$5 = ['animationEffect', 'autoPlay', 'buttonsVisibility', 'cssClass', 'dataSource', 'enablePersistence', 'enableRtl', 'enableTouchSwipe', 'height', 'htmlAttributes', 'indicatorsTemplate', 'interval', 'itemTemplate', 'items', 'locale', 'loop', 'nextButtonTemplate', 'partialVisible', 'pauseOnHover', 'playButtonTemplate', 'previousButtonTemplate', 'selectedIndex', 'showIndicators', 'showPlayButton', 'width'];
+const outputs$7 = ['slideChanged', 'slideChanging', 'selectedIndexChange'];
+const twoWays$5 = ['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$6);
-        this.addTwoWay.call(this, twoWays$4);
+        this.registerEvents(outputs$7);
+        this.addTwoWay.call(this, twoWays$5);
         setValue('currentInstance', this, this.viewContainerRef);
         this.context = new ComponentBase();
     }
@@ -722,7 +722,7 @@ let CarouselComponent = class CarouselComponent extends Carousel {
     }
 };
 CarouselComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: CarouselComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-CarouselComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: CarouselComponent, selector: "ejs-carousel", inputs: { animationEffect: "animationEffect", autoPlay: "autoPlay", buttonsVisibility: "buttonsVisibility", cssClass: "cssClass", dataSource: "dataSource", enablePersistence: "enablePersistence", enableRtl: "enableRtl", enableTouchSwipe: "enableTouchSwipe", height: "height", htmlAttributes: "htmlAttributes", indicatorsTemplate: "indicatorsTemplate", interval: "interval", itemTemplate: "itemTemplate", items: "items", locale: "locale", loop: "loop", nextButtonTemplate: "nextButtonTemplate", pauseOnHover: "pauseOnHover", playButtonTemplate: "playButtonTemplate", previousButtonTemplate: "previousButtonTemplate", selectedIndex: "selectedIndex", showIndicators: "showIndicators", showPlayButton: "showPlayButton", width: "width" }, outputs: { slideChanged: "slideChanged", slideChanging: "slideChanging", selectedIndexChange: "selectedIndexChange" }, queries: [{ propertyName: "indicatorsTemplate", first: true, predicate: ["indicatorsTemplate"], descendants: true }, { propertyName: "nextButtonTemplate", first: true, predicate: ["nextButtonTemplate"], descendants: true }, { propertyName: "previousButtonTemplate", first: true, predicate: ["previousButtonTemplate"], descendants: true }, { propertyName: "playButtonTemplate", first: true, predicate: ["playButtonTemplate"], descendants: true }, { propertyName: "itemTemplate", first: true, predicate: ["itemTemplate"], descendants: true }, { propertyName: "childItems", first: true, predicate: CarouselItemsDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CarouselComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: CarouselComponent, selector: "ejs-carousel", inputs: { animationEffect: "animationEffect", autoPlay: "autoPlay", buttonsVisibility: "buttonsVisibility", cssClass: "cssClass", dataSource: "dataSource", enablePersistence: "enablePersistence", enableRtl: "enableRtl", enableTouchSwipe: "enableTouchSwipe", height: "height", htmlAttributes: "htmlAttributes", indicatorsTemplate: "indicatorsTemplate", interval: "interval", itemTemplate: "itemTemplate", items: "items", locale: "locale", loop: "loop", nextButtonTemplate: "nextButtonTemplate", partialVisible: "partialVisible", pauseOnHover: "pauseOnHover", playButtonTemplate: "playButtonTemplate", previousButtonTemplate: "previousButtonTemplate", selectedIndex: "selectedIndex", showIndicators: "showIndicators", showPlayButton: "showPlayButton", width: "width" }, outputs: { slideChanged: "slideChanged", slideChanging: "slideChanging", selectedIndexChange: "selectedIndexChange" }, queries: [{ propertyName: "indicatorsTemplate", first: true, predicate: ["indicatorsTemplate"], descendants: true }, { propertyName: "nextButtonTemplate", first: true, predicate: ["nextButtonTemplate"], descendants: true }, { propertyName: "previousButtonTemplate", first: true, predicate: ["previousButtonTemplate"], descendants: true }, { propertyName: "playButtonTemplate", first: true, predicate: ["playButtonTemplate"], descendants: true }, { propertyName: "itemTemplate", first: true, predicate: ["itemTemplate"], descendants: true }, { propertyName: "childItems", first: true, predicate: CarouselItemsDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 __decorate([
     Template()
 ], CarouselComponent.prototype, "indicatorsTemplate", void 0);
@@ -745,8 +745,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
             type: Component,
             args: [{
                     selector: 'ejs-carousel',
-                    inputs: inputs$4,
-                    outputs: outputs$6,
+                    inputs: inputs$5,
+                    outputs: outputs$7,
                     template: '',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     queries: {
@@ -819,7 +819,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
         }] });
 
 let input$1 = ['content', 'cssClass', 'disabled', 'header', 'headerTemplate', 'id', 'visible'];
-let outputs$5 = [];
+let outputs$6 = [];
 /**
  * 'e-tabitem' directive represent a item of the Angular Tab.
  * It must be contained in a Tab component(`ejs-tab`).
@@ -837,7 +837,7 @@ class TabItemDirective extends ComplexBase {
         super();
         this.viewContainerRef = viewContainerRef;
         setValue('currentInstance', this, this.viewContainerRef);
-        this.registerEvents(outputs$5);
+        this.registerEvents(outputs$6);
         this.directivePropList = input$1;
     }
 }
@@ -857,7 +857,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
             args: [{
                     selector: 'e-tabitems>e-tabitem',
                     inputs: input$1,
-                    outputs: outputs$5,
+                    outputs: outputs$6,
                     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$3 = ['allowDragAndDrop', 'animation', 'cssClass', 'dragArea', 'enableHtmlSanitizer', 'enablePersistence', 'enableRtl', 'headerPlacement', 'height', 'heightAdjustMode', 'items', 'loadOn', 'locale', 'overflowMode', 'reorderActiveTab', 'scrollStep', 'selectedItem', 'showCloseButton', 'width'];
-const outputs$4 = ['added', 'adding', 'created', 'destroyed', 'dragged', 'dragging', 'onDragStart', 'removed', 'removing', 'selected', 'selecting'];
-const twoWays$3 = [''];
+const inputs$4 = ['allowDragAndDrop', 'animation', '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 = [''];
 /**
  * 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$4);
-        this.addTwoWay.call(this, twoWays$3);
+        this.registerEvents(outputs$5);
+        this.addTwoWay.call(this, twoWays$4);
         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$3,
-                    outputs: outputs$4,
+                    inputs: inputs$4,
+                    outputs: outputs$5,
                     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$2 = ['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$3 = ['actionFailure', 'created', 'dataBound', 'dataSourceChanged', 'destroyed', 'drawNode', 'keyPress', 'nodeChecked', 'nodeChecking', 'nodeClicked', 'nodeCollapsed', 'nodeCollapsing', 'nodeDragStart', 'nodeDragStop', 'nodeDragging', 'nodeDropped', 'nodeEdited', 'nodeEditing', 'nodeExpanded', 'nodeExpanding', 'nodeSelected', 'nodeSelecting'];
-const twoWays$2 = [''];
+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 = [''];
 /**
  * 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$3);
-        this.addTwoWay.call(this, twoWays$2);
+        this.registerEvents(outputs$4);
+        this.addTwoWay.call(this, twoWays$3);
         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$2,
-                    outputs: outputs$3,
+                    inputs: inputs$3,
+                    outputs: outputs$4,
                     template: '',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     queries: {}
@@ -1095,9 +1095,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 }]
         }] });
 
-const inputs$1 = ['animate', 'closeOnDocumentClick', 'dockSize', 'enableDock', 'enableGestures', 'enablePersistence', 'enableRtl', 'height', 'isOpen', 'locale', 'mediaQuery', 'position', 'showBackdrop', 'target', 'type', 'width', 'zIndex'];
-const outputs$2 = ['change', 'close', 'created', 'destroyed', 'open', 'isOpenChange'];
-const twoWays$1 = ['isOpen'];
+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'];
 /**
  * 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$2);
-        this.addTwoWay.call(this, twoWays$1);
+        this.registerEvents(outputs$3);
+        this.addTwoWay.call(this, twoWays$2);
         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$1,
-                    outputs: outputs$2,
+                    inputs: inputs$2,
+                    outputs: outputs$3,
                     template: `<ng-content ></ng-content>`,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     queries: {}
@@ -1189,13 +1189,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
         }] });
 
 let input = ['iconCss', 'id', 'items', 'separator', 'text', 'url'];
-let outputs$1 = [];
+let outputs$2 = [];
 class MenuItemDirective extends ComplexBase {
     constructor(viewContainerRef) {
         super();
         this.viewContainerRef = viewContainerRef;
         setValue('currentInstance', this, this.viewContainerRef);
-        this.registerEvents(outputs$1);
+        this.registerEvents(outputs$2);
         this.directivePropList = input;
     }
 }
@@ -1206,7 +1206,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
             args: [{
                     selector: 'ejs-menu>e-menu-items>e-menu-item>',
                     inputs: input,
-                    outputs: outputs$1,
+                    outputs: outputs$2,
                     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 = ['animationSettings', 'cssClass', 'enableHtmlSanitizer', 'enablePersistence', 'enableRtl', 'enableScrolling', 'fields', 'filter', 'hamburgerMode', 'hoverDelay', 'items', 'locale', 'orientation', 'showItemOnClick', 'target', 'template', 'title'];
-const outputs = ['beforeClose', 'beforeItemRender', 'beforeOpen', 'created', 'onClose', 'onOpen', 'select'];
-const twoWays = [''];
+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 = [''];
 /**
  * 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);
-        this.addTwoWay.call(this, twoWays);
+        this.registerEvents(outputs$1);
+        this.addTwoWay.call(this, twoWays$1);
         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,
-                    outputs: outputs,
+                    inputs: inputs$1,
+                    outputs: outputs$1,
                     template: '',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     queries: {
@@ -1342,11 +1342,104 @@ 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 = [''];
+/**
+ * Represents the Essential JS 2 Angular AppBar Component.
+ * ```html
+ * <ejs-appbar></ejs-appbar>
+ * ```
+ */
+let AppBarComponent = class AppBarComponent extends AppBar {
+    constructor(ngEle, srenderer, viewContainerRef, injector) {
+        super();
+        this.ngEle = ngEle;
+        this.srenderer = srenderer;
+        this.viewContainerRef = viewContainerRef;
+        this.injector = injector;
+        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.containerContext.ngAfterContentChecked(this);
+    }
+};
+AppBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: AppBarComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+AppBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: AppBarComponent, selector: "ejs-appbar", inputs: { colorMode: "colorMode", cssClass: "cssClass", enablePersistence: "enablePersistence", enableRtl: "enableRtl", htmlAttributes: "htmlAttributes", isSticky: "isSticky", locale: "locale", mode: "mode", position: "position" }, outputs: { created: "created", destroyed: "destroyed" }, usesInheritance: true, ngImport: i0, template: `<ng-content ></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+AppBarComponent = __decorate([
+    ComponentMixins([ComponentBase])
+], AppBarComponent);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: AppBarComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ejs-appbar',
+                    inputs: inputs,
+                    outputs: outputs,
+                    template: `<ng-content ></ng-content>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    queries: {}
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }, { type: i0.Injector }]; } });
+
+/**
+ * NgModule definition for the AppBar component.
+ */
+class AppBarModule {
+}
+AppBarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: AppBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AppBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: AppBarModule, declarations: [AppBarComponent], imports: [CommonModule], exports: [AppBarComponent] });
+AppBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: AppBarModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: AppBarModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                    declarations: [
+                        AppBarComponent
+                    ],
+                    exports: [
+                        AppBarComponent
+                    ]
+                }]
+        }] });
+
+/**
+ * NgModule definition for the AppBar component with providers.
+ */
+class AppBarAllModule {
+}
+AppBarAllModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: AppBarAllModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AppBarAllModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: AppBarAllModule, imports: [CommonModule, AppBarModule], exports: [AppBarModule] });
+AppBarAllModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: AppBarAllModule, providers: [], imports: [[CommonModule, AppBarModule], AppBarModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: AppBarAllModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, AppBarModule],
+                    exports: [
+                        AppBarModule
+                    ],
+                    providers: []
+                }]
+        }] });
+
 // Mapping root file for package generation
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionAllModule, AccordionComponent, AccordionItemDirective, AccordionItemsDirective, AccordionModule, 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, TabAllModule, TabComponent, TabItemDirective, TabItemsDirective, TabModule, ToolbarAllModule, ToolbarComponent, ToolbarModule, TreeViewAllModule, TreeViewComponent, TreeViewModule };
 //# sourceMappingURL=syncfusion-ej2-angular-navigations.mjs.map