@syncfusion/ej2-angular-navigations 19.2.59 → 19.3.44

package/README.md

@@ -25,6 +25,13 @@ Following list of components are available in the package
   * [View Online Demos](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=accordion#/material/accordion/default.html)
   * [Product Page](https://www.syncfusion.com/products/angular/accordion)
 
+  * Breadcrumb - Graphical user interface that helps to identify or highlight the current location within a hierarchical structure of websites. The aim is to make the user aware of their current position in a hierarchy of website links.
+
+  * [Getting Started](https://ej2.syncfusion.com/angular/documentation/breadcrumb/getting-started?lang=typescript&utm_source=npm&utm_campaign=breadcrumb)
+  * [API References](https://ej2.syncfusion.com/angular/documentation/api/breadcrumb?utm_source=npm&utm_campaign=breadcrumb)
+  * [View Online Demos](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=contextmenu#/material/breadcrumb/default)
+  * [Product Page](https://www.syncfusion.com/angular-ui-components/angular-breadcrumb)
+
 * ContextMenu - Graphical user interface that appears on the user right click/touch hold action. It has the support to provide nested level menu items.
 
   * [Getting Started](https://ej2.syncfusion.com/angular/documentation/context-menu/getting-started?lang=typescript&utm_source=npm&utm_campaign=context-menu)
@@ -94,6 +101,14 @@ Sidebar component is used in the following samples.
 3. **RTL Support** - Supports right-to-left alignment.
 4. **Accessibility** - Provides built-in compliance with the WAI-ARIA specifications and it is achieved through attributes. By default, it allows to interact with Accordion by using keyboard shortcuts.
 
+### Breadcrumb
+
+1. **Overflow Mode** - Used to limit the number of breadcrumb items to be displayed.
+2. **Icons** - Icons can be specified in Breadcrumb items.
+3. **Template** - Supports template for item and separator.
+4. **Bind To Location** - Supports items to be rendered based on the URL or current location.
+5. **Accessibility** - Provided with built-in accessibility support that helps to access all the Breadcrumb component features through the keyboard, screen readers, or other assistive technology devices.
+
 ### ContextMenu
 
 1. **Separator** - Supports menu items grouping by using the Separator.

package/dist/ej2-angular-navigations.umd.js

@@ -1,6 +1,6 @@
 /*!
 *  filename: ej2-angular-navigations.umd.js
-*  version : 19.2.59
+*  version : 19.3.44
 *  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing
@@ -652,6 +652,71 @@ ContextMenuAllModule.decorators = [
  * @nocollapse
  */
 ContextMenuAllModule.ctorParameters = function () { return []; };
+var input$2 = ['iconCss', 'text', 'url'];
+var outputs$5 = [];
+/**
+ * `e-breadcrumb-item` directive represent a item of the Angular Breadcrumb.
+ * It must be contained in a Breadcrumb component(`ejs-breadcrumb`).
+ * ```html
+ * <ejs-breadcrumb>
+ *   <e-breadcrumb-items>
+ *    <e-breadcrumb-item text='Home' url='/'></e-breadcrumb-item>
+ *    <e-breadcrumb-item text='Index' url='./index'></e-breadcrumb-item>
+ *   </e-breadcrumb-items>
+ * </ejs-breadcrumb>
+ * ```
+ */
+var BreadcrumbItemDirective = /** @class */ (function (_super) {
+    __extends(BreadcrumbItemDirective, _super);
+    /**
+     * @param {?} viewContainerRef
+     */
+    function BreadcrumbItemDirective(viewContainerRef) {
+        var _this = _super.call(this) || this;
+        _this.viewContainerRef = viewContainerRef;
+        ej2AngularBase.setValue('currentInstance', _this, _this.viewContainerRef);
+        _this.registerEvents(outputs$5);
+        _this.directivePropList = input$2;
+        return _this;
+    }
+    return BreadcrumbItemDirective;
+}(ej2AngularBase.ComplexBase));
+BreadcrumbItemDirective.decorators = [
+    { type: core.Directive, args: [{
+                selector: 'ejs-breadcrumb>e-breadcrumb-items>e-breadcrumb-item',
+                inputs: input$2,
+                outputs: outputs$5,
+                queries: {}
+            },] },
+];
+/**
+ * @nocollapse
+ */
+BreadcrumbItemDirective.ctorParameters = function () { return [
+    { type: core.ViewContainerRef, },
+]; };
+/**
+ * BreadcrumbItem Array Directive
+ */
+var BreadcrumbItemsDirective = /** @class */ (function (_super) {
+    __extends(BreadcrumbItemsDirective, _super);
+    function BreadcrumbItemsDirective() {
+        return _super.call(this, 'items') || this;
+    }
+    return BreadcrumbItemsDirective;
+}(ej2AngularBase.ArrayBase));
+BreadcrumbItemsDirective.decorators = [
+    { type: core.Directive, args: [{
+                selector: 'ejs-breadcrumb>e-breadcrumb-items',
+                queries: {
+                    children: new core.ContentChildren(BreadcrumbItemDirective)
+                },
+            },] },
+];
+/**
+ * @nocollapse
+ */
+BreadcrumbItemsDirective.ctorParameters = function () { return []; };
 var __decorate$5 = (this && this.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
@@ -666,8 +731,169 @@ var __metadata$5 = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
         return Reflect.metadata(k, v);
 };
-var input$2 = ['content', 'cssClass', 'disabled', 'header', 'headerTemplate', 'id', 'visible'];
-var outputs$5 = [];
+var inputs$3 = ['activeItem', 'cssClass', 'enableActiveItemNavigation', 'enableNavigation', 'enablePersistence', 'enableRtl', 'itemTemplate', 'items', 'locale', 'maxItems', 'overflowMode', 'separatorTemplate', 'url', 'width'];
+var outputs$6 = ['beforeItemRender', 'created', 'itemClick', 'activeItemChange'];
+var twoWays$3 = ['activeItem'];
+/**
+ * Represents the EJ2 Angular Breadcrumb Component.
+ * ```html
+ * <ejs-breadcrumb [items]='breadcrumbItems'></ejs-breadcrumb>
+ * ```
+ */
+exports.BreadcrumbComponent = /** @class */ (function (_super) {
+    __extends(BreadcrumbComponent, _super);
+    /**
+     * @param {?} ngEle
+     * @param {?} srenderer
+     * @param {?} viewContainerRef
+     * @param {?} injector
+     */
+    function BreadcrumbComponent(ngEle, srenderer, viewContainerRef, injector) {
+        var _this = _super.call(this) || this;
+        _this.ngEle = ngEle;
+        _this.srenderer = srenderer;
+        _this.viewContainerRef = viewContainerRef;
+        _this.injector = injector;
+        _this.tags = ['items'];
+        _this.element = _this.ngEle.nativeElement;
+        _this.injectedModules = _this.injectedModules || [];
+        _this.registerEvents(outputs$6);
+        _this.addTwoWay.call(_this, twoWays$3);
+        ej2AngularBase.setValue('currentInstance', _this, _this.viewContainerRef);
+        _this.context = new ej2AngularBase.ComponentBase();
+        return _this;
+    }
+    /**
+     * @return {?}
+     */
+    BreadcrumbComponent.prototype.ngOnInit = function () {
+        this.context.ngOnInit(this);
+    };
+    /**
+     * @return {?}
+     */
+    BreadcrumbComponent.prototype.ngAfterViewInit = function () {
+        this.context.ngAfterViewInit(this);
+    };
+    /**
+     * @return {?}
+     */
+    BreadcrumbComponent.prototype.ngOnDestroy = function () {
+        this.context.ngOnDestroy(this);
+    };
+    /**
+     * @return {?}
+     */
+    BreadcrumbComponent.prototype.ngAfterContentChecked = function () {
+        this.tagObjects[0].instance = this.childItems;
+        this.context.ngAfterContentChecked(this);
+    };
+    return BreadcrumbComponent;
+}(ej2Navigations.Breadcrumb));
+exports.BreadcrumbComponent.decorators = [
+    { type: core.Component, args: [{
+                selector: 'ejs-breadcrumb',
+                inputs: inputs$3,
+                outputs: outputs$6,
+                template: '',
+                changeDetection: core.ChangeDetectionStrategy.OnPush,
+                queries: {
+                    childItems: new core.ContentChild(BreadcrumbItemsDirective)
+                }
+            },] },
+];
+/**
+ * @nocollapse
+ */
+exports.BreadcrumbComponent.ctorParameters = function () { return [
+    { type: core.ElementRef, },
+    { type: core.Renderer2, },
+    { type: core.ViewContainerRef, },
+    { type: core.Injector, },
+]; };
+exports.BreadcrumbComponent.propDecorators = {
+    'separatorTemplate': [{ type: core.ContentChild, args: ['separatorTemplate',] },],
+    'itemTemplate': [{ type: core.ContentChild, args: ['itemTemplate',] },],
+};
+__decorate$5([
+    ej2AngularBase.Template(),
+    __metadata$5("design:type", Object)
+], exports.BreadcrumbComponent.prototype, "separatorTemplate", void 0);
+__decorate$5([
+    ej2AngularBase.Template(),
+    __metadata$5("design:type", Object)
+], exports.BreadcrumbComponent.prototype, "itemTemplate", void 0);
+exports.BreadcrumbComponent = __decorate$5([
+    ej2AngularBase.ComponentMixins([ej2AngularBase.ComponentBase]),
+    __metadata$5("design:paramtypes", [core.ElementRef,
+        core.Renderer2,
+        core.ViewContainerRef,
+        core.Injector])
+], exports.BreadcrumbComponent);
+/**
+ * NgModule definition for the Breadcrumb component.
+ */
+var BreadcrumbModule = /** @class */ (function () {
+    function BreadcrumbModule() {
+    }
+    return BreadcrumbModule;
+}());
+BreadcrumbModule.decorators = [
+    { type: core.NgModule, args: [{
+                imports: [common.CommonModule],
+                declarations: [
+                    exports.BreadcrumbComponent,
+                    BreadcrumbItemDirective,
+                    BreadcrumbItemsDirective
+                ],
+                exports: [
+                    exports.BreadcrumbComponent,
+                    BreadcrumbItemDirective,
+                    BreadcrumbItemsDirective
+                ]
+            },] },
+];
+/**
+ * @nocollapse
+ */
+BreadcrumbModule.ctorParameters = function () { return []; };
+/**
+ * NgModule definition for the Breadcrumb component with providers.
+ */
+var BreadcrumbAllModule = /** @class */ (function () {
+    function BreadcrumbAllModule() {
+    }
+    return BreadcrumbAllModule;
+}());
+BreadcrumbAllModule.decorators = [
+    { type: core.NgModule, args: [{
+                imports: [common.CommonModule, BreadcrumbModule],
+                exports: [
+                    BreadcrumbModule
+                ],
+                providers: []
+            },] },
+];
+/**
+ * @nocollapse
+ */
+BreadcrumbAllModule.ctorParameters = function () { return []; };
+var __decorate$6 = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata$6 = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
+        return Reflect.metadata(k, v);
+};
+var input$3 = ['content', 'cssClass', 'disabled', 'header', 'headerTemplate', 'id', 'visible'];
+var outputs$7 = [];
 /**
  * 'e-tabitem' directive represent a item of the Angular Tab.
  * It must be contained in a Tab component(`ejs-tab`).
@@ -689,8 +915,8 @@ var TabItemDirective = /** @class */ (function (_super) {
         var _this = _super.call(this) || this;
         _this.viewContainerRef = viewContainerRef;
         ej2AngularBase.setValue('currentInstance', _this, _this.viewContainerRef);
-        _this.registerEvents(outputs$5);
-        _this.directivePropList = input$2;
+        _this.registerEvents(outputs$7);
+        _this.directivePropList = input$3;
         return _this;
     }
     return TabItemDirective;
@@ -698,8 +924,8 @@ var TabItemDirective = /** @class */ (function (_super) {
 TabItemDirective.decorators = [
     { type: core.Directive, args: [{
                 selector: 'e-tabitems>e-tabitem',
-                inputs: input$2,
-                outputs: outputs$5,
+                inputs: input$3,
+                outputs: outputs$7,
                 queries: {}
             },] },
 ];
@@ -714,17 +940,17 @@ TabItemDirective.propDecorators = {
     'header_text': [{ type: core.ContentChild, args: ['headerText',] },],
     'headerTemplate': [{ type: core.ContentChild, args: ['headerTemplate',] },],
 };
-__decorate$5([
+__decorate$6([
     ej2AngularBase.Template(),
-    __metadata$5("design:type", Object)
+    __metadata$6("design:type", Object)
 ], TabItemDirective.prototype, "content", void 0);
-__decorate$5([
+__decorate$6([
     ej2AngularBase.Template(),
-    __metadata$5("design:type", Object)
+    __metadata$6("design:type", Object)
 ], TabItemDirective.prototype, "header_text", void 0);
-__decorate$5([
+__decorate$6([
     ej2AngularBase.Template(),
-    __metadata$5("design:type", Object)
+    __metadata$6("design:type", Object)
 ], TabItemDirective.prototype, "headerTemplate", void 0);
 /**
  * TabItem Array Directive
@@ -748,7 +974,7 @@ TabItemsDirective.decorators = [
  * @nocollapse
  */
 TabItemsDirective.ctorParameters = function () { return []; };
-var __decorate$6 = (this && this.__decorate) || function (decorators, target, key, desc) {
+var __decorate$7 = (this && this.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
         r = Reflect.decorate(decorators, target, key, desc);
@@ -758,13 +984,13 @@ var __decorate$6 = (this && this.__decorate) || function (decorators, target, ke
                 r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-var __metadata$6 = (this && this.__metadata) || function (k, v) {
+var __metadata$7 = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
         return Reflect.metadata(k, v);
 };
-var inputs$3 = ['allowDragAndDrop', 'animation', 'cssClass', 'dragArea', 'enableHtmlSanitizer', 'enablePersistence', 'enableRtl', 'headerPlacement', 'height', 'heightAdjustMode', 'items', 'loadOn', 'locale', 'overflowMode', 'scrollStep', 'selectedItem', 'showCloseButton', 'width'];
-var outputs$6 = ['added', 'adding', 'created', 'destroyed', 'dragged', 'dragging', 'onDragStart', 'removed', 'removing', 'selected', 'selecting'];
-var twoWays$3 = [''];
+var inputs$4 = ['allowDragAndDrop', 'animation', 'cssClass', 'dragArea', 'enableHtmlSanitizer', 'enablePersistence', 'enableRtl', 'headerPlacement', 'height', 'heightAdjustMode', 'items', 'loadOn', 'locale', 'overflowMode', 'scrollStep', 'selectedItem', 'showCloseButton', 'width'];
+var outputs$8 = ['added', 'adding', 'created', 'destroyed', 'dragged', 'dragging', 'onDragStart', 'removed', 'removing', 'selected', 'selecting'];
+var twoWays$4 = [''];
 /**
  * Represents the Angular Tab Component.
  * ```html
@@ -788,8 +1014,8 @@ exports.TabComponent = /** @class */ (function (_super) {
         _this.tags = ['items'];
         _this.element = _this.ngEle.nativeElement;
         _this.injectedModules = _this.injectedModules || [];
-        _this.registerEvents(outputs$6);
-        _this.addTwoWay.call(_this, twoWays$3);
+        _this.registerEvents(outputs$8);
+        _this.addTwoWay.call(_this, twoWays$4);
         ej2AngularBase.setValue('currentInstance', _this, _this.viewContainerRef);
         _this.containerContext = new ej2AngularBase.ComponentBase();
         return _this;
@@ -824,8 +1050,8 @@ exports.TabComponent = /** @class */ (function (_super) {
 exports.TabComponent.decorators = [
     { type: core.Component, args: [{
                 selector: 'ejs-tab',
-                inputs: inputs$3,
-                outputs: outputs$6,
+                inputs: inputs$4,
+                outputs: outputs$8,
                 template: "<ng-content select='div'></ng-content>",
                 changeDetection: core.ChangeDetectionStrategy.OnPush,
                 queries: {
@@ -842,9 +1068,9 @@ exports.TabComponent.ctorParameters = function () { return [
     { type: core.ViewContainerRef, },
     { type: core.Injector, },
 ]; };
-exports.TabComponent = __decorate$6([
+exports.TabComponent = __decorate$7([
     ej2AngularBase.ComponentMixins([ej2AngularBase.ComponentBase]),
-    __metadata$6("design:paramtypes", [core.ElementRef,
+    __metadata$7("design:paramtypes", [core.ElementRef,
         core.Renderer2,
         core.ViewContainerRef,
         core.Injector])
@@ -897,7 +1123,7 @@ TabAllModule.decorators = [
  * @nocollapse
  */
 TabAllModule.ctorParameters = function () { return []; };
-var __decorate$7 = (this && this.__decorate) || function (decorators, target, key, desc) {
+var __decorate$8 = (this && this.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
         r = Reflect.decorate(decorators, target, key, desc);
@@ -907,13 +1133,13 @@ var __decorate$7 = (this && this.__decorate) || function (decorators, target, ke
                 r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-var __metadata$7 = (this && this.__metadata) || function (k, v) {
+var __metadata$8 = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
         return Reflect.metadata(k, v);
 };
-var inputs$4 = ['allowDragAndDrop', 'allowEditing', 'allowMultiSelection', 'animation', 'autoCheck', 'checkedNodes', 'cssClass', 'disabled', 'dragArea', 'enableHtmlSanitizer', 'enablePersistence', 'enableRtl', 'expandOn', 'expandedNodes', 'fields', 'fullRowNavigable', 'fullRowSelect', 'loadOnDemand', 'locale', 'nodeTemplate', 'selectedNodes', 'showCheckBox', 'sortOrder'];
-var outputs$7 = ['actionFailure', 'created', 'dataBound', 'dataSourceChanged', 'destroyed', 'drawNode', 'keyPress', 'nodeChecked', 'nodeChecking', 'nodeClicked', 'nodeCollapsed', 'nodeCollapsing', 'nodeDragStart', 'nodeDragStop', 'nodeDragging', 'nodeDropped', 'nodeEdited', 'nodeEditing', 'nodeExpanded', 'nodeExpanding', 'nodeSelected', 'nodeSelecting'];
-var twoWays$4 = [''];
+var inputs$5 = ['allowDragAndDrop', 'allowEditing', 'allowMultiSelection', 'animation', 'autoCheck', 'checkedNodes', 'cssClass', 'disabled', 'dragArea', 'enableHtmlSanitizer', 'enablePersistence', 'enableRtl', 'expandOn', 'expandedNodes', 'fields', 'fullRowNavigable', 'fullRowSelect', 'loadOnDemand', 'locale', 'nodeTemplate', 'selectedNodes', 'showCheckBox', 'sortOrder'];
+var outputs$9 = ['actionFailure', 'created', 'dataBound', 'dataSourceChanged', 'destroyed', 'drawNode', 'keyPress', 'nodeChecked', 'nodeChecking', 'nodeClicked', 'nodeCollapsed', 'nodeCollapsing', 'nodeDragStart', 'nodeDragStop', 'nodeDragging', 'nodeDropped', 'nodeEdited', 'nodeEditing', 'nodeExpanded', 'nodeExpanding', 'nodeSelected', 'nodeSelecting'];
+var twoWays$5 = [''];
 /**
  * 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
@@ -936,8 +1162,8 @@ exports.TreeViewComponent = /** @class */ (function (_super) {
         _this.injector = injector;
         _this.element = _this.ngEle.nativeElement;
         _this.injectedModules = _this.injectedModules || [];
-        _this.registerEvents(outputs$7);
-        _this.addTwoWay.call(_this, twoWays$4);
+        _this.registerEvents(outputs$9);
+        _this.addTwoWay.call(_this, twoWays$5);
         ej2AngularBase.setValue('currentInstance', _this, _this.viewContainerRef);
         _this.context = new ej2AngularBase.ComponentBase();
         return _this;
@@ -971,8 +1197,8 @@ exports.TreeViewComponent = /** @class */ (function (_super) {
 exports.TreeViewComponent.decorators = [
     { type: core.Component, args: [{
                 selector: 'ejs-treeview',
-                inputs: inputs$4,
-                outputs: outputs$7,
+                inputs: inputs$5,
+                outputs: outputs$9,
                 template: '',
                 changeDetection: core.ChangeDetectionStrategy.OnPush,
                 queries: {}
@@ -990,13 +1216,13 @@ exports.TreeViewComponent.ctorParameters = function () { return [
 exports.TreeViewComponent.propDecorators = {
     'nodeTemplate': [{ type: core.ContentChild, args: ['nodeTemplate',] },],
 };
-__decorate$7([
+__decorate$8([
     ej2AngularBase.Template(),
-    __metadata$7("design:type", Object)
+    __metadata$8("design:type", Object)
 ], exports.TreeViewComponent.prototype, "nodeTemplate", void 0);
-exports.TreeViewComponent = __decorate$7([
+exports.TreeViewComponent = __decorate$8([
     ej2AngularBase.ComponentMixins([ej2AngularBase.ComponentBase]),
-    __metadata$7("design:paramtypes", [core.ElementRef,
+    __metadata$8("design:paramtypes", [core.ElementRef,
         core.Renderer2,
         core.ViewContainerRef,
         core.Injector])
@@ -1045,7 +1271,7 @@ TreeViewAllModule.decorators = [
  * @nocollapse
  */
 TreeViewAllModule.ctorParameters = function () { return []; };
-var __decorate$8 = (this && this.__decorate) || function (decorators, target, key, desc) {
+var __decorate$9 = (this && this.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
         r = Reflect.decorate(decorators, target, key, desc);
@@ -1055,13 +1281,13 @@ var __decorate$8 = (this && this.__decorate) || function (decorators, target, ke
                 r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-var __metadata$8 = (this && this.__metadata) || function (k, v) {
+var __metadata$9 = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
         return Reflect.metadata(k, v);
 };
-var inputs$5 = ['animate', 'closeOnDocumentClick', 'dockSize', 'enableDock', 'enableGestures', 'enablePersistence', 'enableRtl', 'height', 'isOpen', 'locale', 'mediaQuery', 'position', 'showBackdrop', 'target', 'type', 'width', 'zIndex'];
-var outputs$8 = ['change', 'close', 'created', 'destroyed', 'open', 'isOpenChange'];
-var twoWays$5 = ['isOpen'];
+var inputs$6 = ['animate', 'closeOnDocumentClick', 'dockSize', 'enableDock', 'enableGestures', 'enablePersistence', 'enableRtl', 'height', 'isOpen', 'locale', 'mediaQuery', 'position', 'showBackdrop', 'target', 'type', 'width', 'zIndex'];
+var outputs$10 = ['change', 'close', 'created', 'destroyed', 'open', 'isOpenChange'];
+var twoWays$6 = ['isOpen'];
 /**
  * Represents the Essential JS 2 Angular Sidebar Component.
  * ```html
@@ -1084,8 +1310,8 @@ exports.SidebarComponent = /** @class */ (function (_super) {
         _this.injector = injector;
         _this.element = _this.ngEle.nativeElement;
         _this.injectedModules = _this.injectedModules || [];
-        _this.registerEvents(outputs$8);
-        _this.addTwoWay.call(_this, twoWays$5);
+        _this.registerEvents(outputs$10);
+        _this.addTwoWay.call(_this, twoWays$6);
         ej2AngularBase.setValue('currentInstance', _this, _this.viewContainerRef);
         _this.containerContext = new ej2AngularBase.ComponentBase();
         return _this;
@@ -1119,8 +1345,8 @@ exports.SidebarComponent = /** @class */ (function (_super) {
 exports.SidebarComponent.decorators = [
     { type: core.Component, args: [{
                 selector: 'ejs-sidebar',
-                inputs: inputs$5,
-                outputs: outputs$8,
+                inputs: inputs$6,
+                outputs: outputs$10,
                 template: "<ng-content ></ng-content>",
                 changeDetection: core.ChangeDetectionStrategy.OnPush,
                 queries: {}
@@ -1135,9 +1361,9 @@ exports.SidebarComponent.ctorParameters = function () { return [
     { type: core.ViewContainerRef, },
     { type: core.Injector, },
 ]; };
-exports.SidebarComponent = __decorate$8([
+exports.SidebarComponent = __decorate$9([
     ej2AngularBase.ComponentMixins([ej2AngularBase.ComponentBase]),
-    __metadata$8("design:paramtypes", [core.ElementRef,
+    __metadata$9("design:paramtypes", [core.ElementRef,
         core.Renderer2,
         core.ViewContainerRef,
         core.Injector])
@@ -1186,8 +1412,8 @@ SidebarAllModule.decorators = [
  * @nocollapse
  */
 SidebarAllModule.ctorParameters = function () { return []; };
-var input$3 = ['iconCss', 'id', 'items', 'separator', 'text', 'url'];
-var outputs$9 = [];
+var input$4 = ['iconCss', 'id', 'items', 'separator', 'text', 'url'];
+var outputs$11 = [];
 var MenuItemDirective = /** @class */ (function (_super) {
     __extends(MenuItemDirective, _super);
     /**
@@ -1197,8 +1423,8 @@ var MenuItemDirective = /** @class */ (function (_super) {
         var _this = _super.call(this) || this;
         _this.viewContainerRef = viewContainerRef;
         ej2AngularBase.setValue('currentInstance', _this, _this.viewContainerRef);
-        _this.registerEvents(outputs$9);
-        _this.directivePropList = input$3;
+        _this.registerEvents(outputs$11);
+        _this.directivePropList = input$4;
         return _this;
     }
     return MenuItemDirective;
@@ -1206,8 +1432,8 @@ var MenuItemDirective = /** @class */ (function (_super) {
 MenuItemDirective.decorators = [
     { type: core.Directive, args: [{
                 selector: 'ejs-menu>e-menu-items>e-menu-item>',
-                inputs: input$3,
-                outputs: outputs$9,
+                inputs: input$4,
+                outputs: outputs$11,
                 queries: {}
             },] },
 ];
@@ -1239,7 +1465,7 @@ MenuItemsDirective.decorators = [
  * @nocollapse
  */
 MenuItemsDirective.ctorParameters = function () { return []; };
-var __decorate$9 = (this && this.__decorate) || function (decorators, target, key, desc) {
+var __decorate$10 = (this && this.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
         r = Reflect.decorate(decorators, target, key, desc);
@@ -1249,13 +1475,13 @@ var __decorate$9 = (this && this.__decorate) || function (decorators, target, ke
                 r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-var __metadata$9 = (this && this.__metadata) || function (k, v) {
+var __metadata$10 = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
         return Reflect.metadata(k, v);
 };
-var inputs$6 = ['animationSettings', 'cssClass', 'enableHtmlSanitizer', 'enablePersistence', 'enableRtl', 'enableScrolling', 'fields', 'filter', 'hamburgerMode', 'hoverDelay', 'items', 'locale', 'orientation', 'showItemOnClick', 'target', 'template', 'title'];
-var outputs$10 = ['beforeClose', 'beforeItemRender', 'beforeOpen', 'created', 'onClose', 'onOpen', 'select'];
-var twoWays$6 = [''];
+var inputs$7 = ['animationSettings', 'cssClass', 'enableHtmlSanitizer', 'enablePersistence', 'enableRtl', 'enableScrolling', 'fields', 'filter', 'hamburgerMode', 'hoverDelay', 'items', 'locale', 'orientation', 'showItemOnClick', 'target', 'template', 'title'];
+var outputs$12 = ['beforeClose', 'beforeItemRender', 'beforeOpen', 'created', 'onClose', 'onOpen', 'select'];
+var twoWays$7 = [''];
 /**
  * Represents the EJ2 Angular Menu Component.
  * ```html
@@ -1279,8 +1505,8 @@ exports.MenuComponent = /** @class */ (function (_super) {
         _this.tags = ['items'];
         _this.element = _this.ngEle.nativeElement;
         _this.injectedModules = _this.injectedModules || [];
-        _this.registerEvents(outputs$10);
-        _this.addTwoWay.call(_this, twoWays$6);
+        _this.registerEvents(outputs$12);
+        _this.addTwoWay.call(_this, twoWays$7);
         ej2AngularBase.setValue('currentInstance', _this, _this.viewContainerRef);
         _this.context = new ej2AngularBase.ComponentBase();
         return _this;
@@ -1315,8 +1541,8 @@ exports.MenuComponent = /** @class */ (function (_super) {
 exports.MenuComponent.decorators = [
     { type: core.Component, args: [{
                 selector: 'ejs-menu',
-                inputs: inputs$6,
-                outputs: outputs$10,
+                inputs: inputs$7,
+                outputs: outputs$12,
                 template: '',
                 changeDetection: core.ChangeDetectionStrategy.OnPush,
                 queries: {
@@ -1336,13 +1562,13 @@ exports.MenuComponent.ctorParameters = function () { return [
 exports.MenuComponent.propDecorators = {
     'template': [{ type: core.ContentChild, args: ['template',] },],
 };
-__decorate$9([
+__decorate$10([
     ej2AngularBase.Template(),
-    __metadata$9("design:type", Object)
+    __metadata$10("design:type", Object)
 ], exports.MenuComponent.prototype, "template", void 0);
-exports.MenuComponent = __decorate$9([
+exports.MenuComponent = __decorate$10([
     ej2AngularBase.ComponentMixins([ej2AngularBase.ComponentBase]),
-    __metadata$9("design:paramtypes", [core.ElementRef,
+    __metadata$10("design:paramtypes", [core.ElementRef,
         core.Renderer2,
         core.ViewContainerRef,
         core.Injector])
@@ -1406,6 +1632,10 @@ exports.ToolbarModule = ToolbarModule;
 exports.ToolbarAllModule = ToolbarAllModule;
 exports.ContextMenuModule = ContextMenuModule;
 exports.ContextMenuAllModule = ContextMenuAllModule;
+exports.BreadcrumbItemDirective = BreadcrumbItemDirective;
+exports.BreadcrumbItemsDirective = BreadcrumbItemsDirective;
+exports.BreadcrumbModule = BreadcrumbModule;
+exports.BreadcrumbAllModule = BreadcrumbAllModule;
 exports.TabItemDirective = TabItemDirective;
 exports.TabItemsDirective = TabItemsDirective;
 exports.TabModule = TabModule;
@@ -1420,18 +1650,20 @@ exports.MenuModule = MenuModule;
 exports.MenuAllModule = MenuAllModule;
 exports.ɵa = inputs;
 exports.ɵb = outputs$1;
+exports.ɵg = inputs$3;
+exports.ɵh = outputs$6;
 exports.ɵe = inputs$2;
 exports.ɵf = outputs$4;
+exports.ɵo = inputs$7;
+exports.ɵp = outputs$12;
 exports.ɵm = inputs$6;
 exports.ɵn = outputs$10;
-exports.ɵk = inputs$5;
-exports.ɵl = outputs$8;
-exports.ɵg = inputs$3;
-exports.ɵh = outputs$6;
+exports.ɵi = inputs$4;
+exports.ɵj = outputs$8;
 exports.ɵc = inputs$1;
 exports.ɵd = outputs$3;
-exports.ɵi = inputs$4;
-exports.ɵj = outputs$7;
+exports.ɵk = inputs$5;
+exports.ɵl = outputs$9;
 exports.MenuAnimationSettings = ej2Navigations.MenuAnimationSettings;
 exports.MenuItem = ej2Navigations.MenuItem;
 exports.HScroll = ej2Navigations.HScroll;
@@ -1456,6 +1688,8 @@ exports.ActionSettings = ej2Navigations.ActionSettings;
 exports.NodeAnimationSettings = ej2Navigations.NodeAnimationSettings;
 exports.TreeView = ej2Navigations.TreeView;
 exports.Sidebar = ej2Navigations.Sidebar;
+exports.BreadcrumbItem = ej2Navigations.BreadcrumbItem;
+exports.Breadcrumb = ej2Navigations.Breadcrumb;
 
 Object.defineProperty(exports, '__esModule', { value: true });