@progress/kendo-angular-navigation 1.1.6 → 2.0.0-next.202203211629

package/{dist/fesm2015/index.js → fesm2015/kendo-angular-navigation.js}

@@ -2,12 +2,15 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { __decorate, __metadata, __param } from 'tslib';
-import { HostBinding, Input, Component, Renderer2, ElementRef, NgModule, Directive, Optional, TemplateRef, EventEmitter, Output, ViewChildren, QueryList, NgZone, isDevMode, ViewChild, ContentChild, ChangeDetectorRef } from '@angular/core';
+import * as i0 from '@angular/core';
+import { Component, HostBinding, Input, NgModule, Directive, Optional, EventEmitter, Output, ViewChildren, isDevMode, ElementRef, ViewChild, ContentChild } from '@angular/core';
+import * as i1 from '@progress/kendo-angular-l10n';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { validatePackage } from '@progress/kendo-licensing';
+import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import { isDocumentAvailable, Keys, ResizeSensorComponent, ResizeSensorModule } from '@progress/kendo-angular-common';
+import * as i3 from '@progress/kendo-angular-common';
+import { isDocumentAvailable, Keys, ResizeSensorModule } from '@progress/kendo-angular-common';
 import { fromEvent, merge, ReplaySubject, Subject, Subscription } from 'rxjs';
 import { filter, map, startWith, share } from 'rxjs/operators';
 
@@ -18,7 +21,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-navigation',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1647344375,
+    publishDate: 1647880113,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };
@@ -27,7 +30,7 @@ const packageMetadata = {
  * Represents the [Kendo UI AppBar component for Angular]({% slug overview_appbar %}).
  * Used to display information, actions, branding titles and additional navigation on the current screen.
  */
-let AppBarComponent = class AppBarComponent {
+class AppBarComponent {
     constructor(localizationService) {
         this.localizationService = localizationService;
         this.hostClass = true;
@@ -104,84 +107,70 @@ let AppBarComponent = class AppBarComponent {
             this.dynamicRTLSubscription.unsubscribe();
         }
     }
-};
-__decorate([
-    HostBinding('class.k-appbar'),
-    __metadata("design:type", Boolean)
-], AppBarComponent.prototype, "hostClass", void 0);
-__decorate([
-    HostBinding('class.k-appbar-top'),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [])
-], AppBarComponent.prototype, "topClass", null);
-__decorate([
-    HostBinding('class.k-appbar-bottom'),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [])
-], AppBarComponent.prototype, "bottomClass", null);
-__decorate([
-    HostBinding('class.k-appbar-sticky'),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [])
-], AppBarComponent.prototype, "stickyClass", null);
-__decorate([
-    HostBinding('class.k-appbar-fixed'),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [])
-], AppBarComponent.prototype, "fixedClass", null);
-__decorate([
-    HostBinding('class.k-appbar-static'),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [])
-], AppBarComponent.prototype, "staticClass", null);
-__decorate([
-    HostBinding('class.k-appbar-light'),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [])
-], AppBarComponent.prototype, "lightClass", null);
-__decorate([
-    HostBinding('class.k-appbar-dark'),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [])
-], AppBarComponent.prototype, "darkClass", null);
-__decorate([
-    HostBinding('class.k-appbar-inherit'),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [])
-], AppBarComponent.prototype, "inheritClass", null);
-__decorate([
-    HostBinding('attr.dir'),
-    __metadata("design:type", String)
-], AppBarComponent.prototype, "direction", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], AppBarComponent.prototype, "position", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], AppBarComponent.prototype, "positionMode", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], AppBarComponent.prototype, "themeColor", void 0);
-AppBarComponent = __decorate([
-    Component({
-        exportAs: 'kendoAppBar',
-        selector: 'kendo-appbar',
-        template: `
+}
+AppBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: AppBarComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+AppBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: AppBarComponent, selector: "kendo-appbar", inputs: { position: "position", positionMode: "positionMode", themeColor: "themeColor" }, host: { properties: { "class.k-appbar": "this.hostClass", "class.k-appbar-top": "this.topClass", "class.k-appbar-bottom": "this.bottomClass", "class.k-appbar-sticky": "this.stickyClass", "class.k-appbar-fixed": "this.fixedClass", "class.k-appbar-static": "this.staticClass", "class.k-appbar-light": "this.lightClass", "class.k-appbar-dark": "this.darkClass", "class.k-appbar-inherit": "this.inheritClass", "attr.dir": "this.direction" } }, providers: [
+        LocalizationService,
+        {
+            provide: L10N_PREFIX,
+            useValue: 'kendo.appbar.component'
+        }
+    ], exportAs: ["kendoAppBar"], ngImport: i0, template: `
+        <ng-content></ng-content>
+    `, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: AppBarComponent, decorators: [{
+            type: Component,
+            args: [{
+                    exportAs: 'kendoAppBar',
+                    selector: 'kendo-appbar',
+                    template: `
         <ng-content></ng-content>
     `,
-        providers: [
-            LocalizationService,
-            {
-                provide: L10N_PREFIX,
-                useValue: 'kendo.appbar.component'
-            }
-        ]
-    }),
-    __metadata("design:paramtypes", [LocalizationService])
-], AppBarComponent);
+                    providers: [
+                        LocalizationService,
+                        {
+                            provide: L10N_PREFIX,
+                            useValue: 'kendo.appbar.component'
+                        }
+                    ]
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; }, propDecorators: { hostClass: [{
+                type: HostBinding,
+                args: ['class.k-appbar']
+            }], topClass: [{
+                type: HostBinding,
+                args: ['class.k-appbar-top']
+            }], bottomClass: [{
+                type: HostBinding,
+                args: ['class.k-appbar-bottom']
+            }], stickyClass: [{
+                type: HostBinding,
+                args: ['class.k-appbar-sticky']
+            }], fixedClass: [{
+                type: HostBinding,
+                args: ['class.k-appbar-fixed']
+            }], staticClass: [{
+                type: HostBinding,
+                args: ['class.k-appbar-static']
+            }], lightClass: [{
+                type: HostBinding,
+                args: ['class.k-appbar-light']
+            }], darkClass: [{
+                type: HostBinding,
+                args: ['class.k-appbar-dark']
+            }], inheritClass: [{
+                type: HostBinding,
+                args: ['class.k-appbar-inherit']
+            }], direction: [{
+                type: HostBinding,
+                args: ['attr.dir']
+            }], position: [{
+                type: Input
+            }], positionMode: [{
+                type: Input
+            }], themeColor: [{
+                type: Input
+            }] } });
 
 /**
  * Represents the [Kendo UI AppBarSection component for Angular]({% slug contentarrangement_appbar %}#toc-sections).
@@ -201,41 +190,27 @@ AppBarComponent = __decorate([
  * })
  * class AppComponent {}
  */
-let AppBarSectionComponent = class AppBarSectionComponent {
-    /**
-     * Represents the [Kendo UI AppBarSection component for Angular]({% slug contentarrangement_appbar %}#toc-sections).
-     *
-     * @example
-     *
-     * ```ts-no-run
-     *  * _@Component({
-     *    selector: 'my-app',
-     *    template: `
-     *        <kendo-appbar>
-     *            <kendo-appbar-section>
-     *                <h2>Page Title</h2>
-     *            </kendo-appbar-section>
-     *        </kendo-appbar>
-     *    `
-     * })
-     * class AppComponent {}
-     */
+class AppBarSectionComponent {
     constructor() {
         this.hostClass = true;
     }
-};
-__decorate([
-    HostBinding('class.k-appbar-section'),
-    __metadata("design:type", Boolean)
-], AppBarSectionComponent.prototype, "hostClass", void 0);
-AppBarSectionComponent = __decorate([
-    Component({
-        selector: 'kendo-appbar-section',
-        template: `
+}
+AppBarSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: AppBarSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AppBarSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: AppBarSectionComponent, selector: "kendo-appbar-section", host: { properties: { "class.k-appbar-section": "this.hostClass" } }, ngImport: i0, template: `
+        <ng-content></ng-content>
+    `, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: AppBarSectionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-appbar-section',
+                    template: `
         <ng-content></ng-content>
     `
-    })
-], AppBarSectionComponent);
+                }]
+        }], propDecorators: { hostClass: [{
+                type: HostBinding,
+                args: ['class.k-appbar-section']
+            }] } });
 
 /**
  * @hidden
@@ -279,7 +254,7 @@ const outerWidth = (element) => {
  * class AppComponent {}
  * ```
  */
-let AppBarSpacerComponent = class AppBarSpacerComponent {
+class AppBarSpacerComponent {
     constructor(renderer, element) {
         this.renderer = renderer;
         this.element = element;
@@ -294,35 +269,32 @@ let AppBarSpacerComponent = class AppBarSpacerComponent {
             this.renderer.setStyle(element, 'flexBasis', this.width);
         }
     }
-};
-__decorate([
-    HostBinding('class.k-appbar-spacer'),
-    __metadata("design:type", Boolean)
-], AppBarSpacerComponent.prototype, "hostClass", void 0);
-__decorate([
-    HostBinding('class.k-appbar-spacer-sized'),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [])
-], AppBarSpacerComponent.prototype, "sizedClass", null);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], AppBarSpacerComponent.prototype, "width", void 0);
-AppBarSpacerComponent = __decorate([
-    Component({
-        selector: 'kendo-appbar-spacer',
-        template: ``
-    }),
-    __metadata("design:paramtypes", [Renderer2, ElementRef])
-], AppBarSpacerComponent);
+}
+AppBarSpacerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: AppBarSpacerComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+AppBarSpacerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: AppBarSpacerComponent, selector: "kendo-appbar-spacer", inputs: { width: "width" }, host: { properties: { "class.k-appbar-spacer": "this.hostClass", "class.k-appbar-spacer-sized": "this.sizedClass" } }, ngImport: i0, template: ``, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: AppBarSpacerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-appbar-spacer',
+                    template: ``
+                }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { hostClass: [{
+                type: HostBinding,
+                args: ['class.k-appbar-spacer']
+            }], sizedClass: [{
+                type: HostBinding,
+                args: ['class.k-appbar-spacer-sized']
+            }], width: [{
+                type: Input
+            }] } });
 
-const exportedModules = [
+const exportedModules$1 = [
     AppBarComponent,
     AppBarSectionComponent,
     AppBarSpacerComponent
 ];
-const declarations = [
-    ...exportedModules
+const declarations$2 = [
+    ...exportedModules$1
 ];
 /**
  * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
@@ -356,15 +328,23 @@ const declarations = [
  *
  * ```
  */
-let AppBarModule = class AppBarModule {
-};
-AppBarModule = __decorate([
-    NgModule({
-        declarations: [declarations],
-        exports: [exportedModules],
-        imports: [CommonModule]
-    })
-], AppBarModule);
+class AppBarModule {
+}
+AppBarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: AppBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AppBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: AppBarModule, declarations: [AppBarComponent,
+        AppBarSectionComponent,
+        AppBarSpacerComponent], imports: [CommonModule], exports: [AppBarComponent,
+        AppBarSectionComponent,
+        AppBarSpacerComponent] });
+AppBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: AppBarModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: AppBarModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [declarations$2],
+                    exports: [exportedModules$1],
+                    imports: [CommonModule]
+                }]
+        }] });
 
 /**
  * Represents a template that defines the content of a Breadcrumb item.
@@ -372,18 +352,21 @@ AppBarModule = __decorate([
  *
  * For more information and example refer to the [Templates]({% slug templates_breadcrumb %}) article.
  */
-let BreadCrumbItemTemplateDirective = class BreadCrumbItemTemplateDirective {
+class BreadCrumbItemTemplateDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
-};
-BreadCrumbItemTemplateDirective = __decorate([
-    Directive({
-        selector: '[kendoBreadCrumbItemTemplate]'
-    }),
-    __param(0, Optional()),
-    __metadata("design:paramtypes", [TemplateRef])
-], BreadCrumbItemTemplateDirective);
+}
+BreadCrumbItemTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: BreadCrumbItemTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+BreadCrumbItemTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: BreadCrumbItemTemplateDirective, selector: "[kendoBreadCrumbItemTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: BreadCrumbItemTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoBreadCrumbItemTemplate]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
+                    type: Optional
+                }] }]; } });
 
 /**
  * @hidden
@@ -393,7 +376,7 @@ const BREADCRUMB_ITEM_INDEX = 'data-kendo-breadcrumb-index';
 /**
  * @hidden
  */
-let BreadCrumbItemComponent = class BreadCrumbItemComponent {
+class BreadCrumbItemComponent {
     constructor(el) {
         this.el = el;
         this.index = -1;
@@ -422,47 +405,57 @@ let BreadCrumbItemComponent = class BreadCrumbItemComponent {
             this.width = outerWidth(this.el.nativeElement);
         }
     }
-};
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], BreadCrumbItemComponent.prototype, "item", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], BreadCrumbItemComponent.prototype, "collapseMode", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Number)
-], BreadCrumbItemComponent.prototype, "index", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", TemplateRef)
-], BreadCrumbItemComponent.prototype, "itemTemplate", void 0);
-__decorate([
-    HostBinding('class.k-flex-none'),
-    HostBinding('class.k-breadcrumb-item'),
-    __metadata("design:type", Boolean)
-], BreadCrumbItemComponent.prototype, "hostClasses", void 0);
-__decorate([
-    HostBinding('class.k-breadcrumb-root-item'),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [])
-], BreadCrumbItemComponent.prototype, "isRootItem", null);
-__decorate([
-    HostBinding('attr.aria-disabled'),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [])
-], BreadCrumbItemComponent.prototype, "isDisabled", null);
-__decorate([
-    HostBinding('class.k-breadcrumb-last-item'),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [])
-], BreadCrumbItemComponent.prototype, "isLastItem", null);
-BreadCrumbItemComponent = __decorate([
-    Component({
-        selector: '[kendoBreadCrumbItem]',
-        template: `
+}
+BreadCrumbItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: BreadCrumbItemComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+BreadCrumbItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: BreadCrumbItemComponent, selector: "[kendoBreadCrumbItem]", inputs: { item: "item", collapseMode: "collapseMode", index: "index", itemTemplate: "itemTemplate" }, host: { properties: { "class.k-flex-none": "this.hostClasses", "class.k-breadcrumb-item": "this.hostClasses", "class.k-breadcrumb-root-item": "this.isRootItem", "attr.aria-disabled": "this.isDisabled", "class.k-breadcrumb-last-item": "this.isLastItem" } }, ngImport: i0, template: `
+        <ng-template #separator>
+            <ng-content select="[kendoBreadCrumbSeparator]"></ng-content>
+        </ng-template>
+
+        <ng-container *ngIf="collapseMode === 'wrap'">
+            <ng-container *ngTemplateOutlet="separator"></ng-container>
+        </ng-container>
+
+        <ng-container *ngIf="!item.context.collapsed">
+            <span
+                *ngIf="!itemTemplate"
+                [ngClass]="{
+                    'k-breadcrumb-root-link': item.context.isFirst,
+                    'k-breadcrumb-link': index !== 0,
+                    'k-breadcrumb-icontext-link': !!item.data.icon && !!item.data.text,
+                    'k-breadcrumb-icon-link': !!item.data.icon && !item.data.text,
+                    'k-state-disabled': disabled
+                }"
+                [title]="item.data.title || ''"
+                [tabindex]="disabled ? -1 : 0"
+                [attr.aria-current]="item.context.isLast ? true : null"
+                role="link"
+                class="k-cursor-pointer k-flex-none"
+            >
+                <img *ngIf="item.data.imageUrl" (load)="onImageLoad()" [src]="item.data.imageUrl" class="k-image" role="presentation" />
+                <span *ngIf="item.data.icon && !item.data.iconClass" class="k-icon k-i-{{ item.data.icon }}"></span>
+                <span *ngIf="item.data.iconClass" class="{{ item.data.iconClass }}"></span>
+                {{ item.data.text }}
+            </span>
+            <ng-template
+                *ngIf="itemTemplate"
+                [ngTemplateOutlet]="itemTemplate"
+                [ngTemplateOutletContext]="{
+                    $implicit: item.data,
+                    index: index
+                }"
+            ></ng-template>
+        </ng-container>
+
+        <ng-container *ngIf="collapseMode !== 'wrap'">
+            <ng-container *ngTemplateOutlet="separator"></ng-container>
+        </ng-container>
+    `, isInline: true, directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: BreadCrumbItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[kendoBreadCrumbItem]',
+                    template: `
         <ng-template #separator>
             <ng-content select="[kendoBreadCrumbSeparator]"></ng-content>
         </ng-template>
@@ -506,9 +499,31 @@ BreadCrumbItemComponent = __decorate([
             <ng-container *ngTemplateOutlet="separator"></ng-container>
         </ng-container>
     `
-    }),
-    __metadata("design:paramtypes", [ElementRef])
-], BreadCrumbItemComponent);
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { item: [{
+                type: Input
+            }], collapseMode: [{
+                type: Input
+            }], index: [{
+                type: Input
+            }], itemTemplate: [{
+                type: Input
+            }], hostClasses: [{
+                type: HostBinding,
+                args: ['class.k-flex-none']
+            }, {
+                type: HostBinding,
+                args: ['class.k-breadcrumb-item']
+            }], isRootItem: [{
+                type: HostBinding,
+                args: ['class.k-breadcrumb-root-item']
+            }], isDisabled: [{
+                type: HostBinding,
+                args: ['attr.aria-disabled']
+            }], isLastItem: [{
+                type: HostBinding,
+                args: ['class.k-breadcrumb-last-item']
+            }] } });
 
 const closestInScope = (target, targetAttr, predicate, scope) => {
     while (target && target !== scope && !predicate(target, targetAttr)) {
@@ -528,10 +543,72 @@ const itemIndex = (item, indexAttr) => +item.getAttribute(indexAttr);
  */
 const closestItem = (target, targetAttr, scope) => closestInScope(target, targetAttr, hasItemIndex, scope);
 
+const DEFAULT_ICON = 'arrow-chevron-right';
+const DEFAULT_RTL_ICON = 'arrow-chevron-left';
 /**
  * @hidden
  */
-let BreadCrumbListComponent = class BreadCrumbListComponent {
+class BreadCrumbSeparatorDirective {
+    constructor(el, localization) {
+        this.el = el;
+        this.localization = localization;
+        this.defaultClasses = true;
+        this.ariaHidden = true;
+        this.direction = 'ltr';
+        this.direction = this.localization.rtl ? 'rtl' : 'ltr';
+    }
+    set icon(icon) {
+        const element = this.el.nativeElement;
+        element.classList.remove(`k-i-${this._icon}`);
+        if (isPresent(icon)) {
+            this._icon = icon;
+            this.hasDefaultIcon = false;
+        }
+        else {
+            this._icon = this.direction === 'ltr' ? DEFAULT_ICON : DEFAULT_RTL_ICON;
+            this.hasDefaultIcon = true;
+        }
+        element.classList.add(`k-i-${this._icon}`);
+    }
+    get icon() {
+        return this._icon;
+    }
+    ngOnInit() {
+        this.localizationChangesSubscription = this.localization.changes.subscribe(({ rtl }) => {
+            this.direction = rtl ? 'rtl' : 'ltr';
+            if (this.hasDefaultIcon) {
+                this.icon = undefined;
+            }
+        });
+    }
+    ngOnDestroy() {
+        this.localizationChangesSubscription.unsubscribe();
+    }
+}
+BreadCrumbSeparatorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: BreadCrumbSeparatorDirective, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+BreadCrumbSeparatorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: BreadCrumbSeparatorDirective, selector: "[kendoBreadCrumbSeparator]", inputs: { icon: "icon" }, host: { properties: { "class.k-breadcrumb-delimiter-icon": "this.defaultClasses", "class.k-icon": "this.defaultClasses", "attr.aria-hidden": "this.ariaHidden" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: BreadCrumbSeparatorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoBreadCrumbSeparator]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.LocalizationService }]; }, propDecorators: { icon: [{
+                type: Input
+            }], defaultClasses: [{
+                type: HostBinding,
+                args: ['class.k-breadcrumb-delimiter-icon']
+            }, {
+                type: HostBinding,
+                args: ['class.k-icon']
+            }], ariaHidden: [{
+                type: HostBinding,
+                args: ['attr.aria-hidden']
+            }] } });
+
+/**
+ * @hidden
+ */
+class BreadCrumbListComponent {
     constructor(el, zone) {
         this.el = el;
         this.zone = zone;
@@ -560,35 +637,14 @@ let BreadCrumbListComponent = class BreadCrumbListComponent {
             return itemIndex(item, BREADCRUMB_ITEM_INDEX);
         }
     }
-};
-__decorate([
-    Input(),
-    __metadata("design:type", Array)
-], BreadCrumbListComponent.prototype, "items", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", TemplateRef)
-], BreadCrumbListComponent.prototype, "itemTemplate", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], BreadCrumbListComponent.prototype, "collapseMode", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], BreadCrumbListComponent.prototype, "separatorIcon", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", EventEmitter)
-], BreadCrumbListComponent.prototype, "itemClick", void 0);
-__decorate([
-    ViewChildren(BreadCrumbItemComponent),
-    __metadata("design:type", QueryList)
-], BreadCrumbListComponent.prototype, "renderedItems", void 0);
-BreadCrumbListComponent = __decorate([
-    Component({
-        selector: '[kendoBreadCrumbList]',
-        template: `
+}
+BreadCrumbListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: BreadCrumbListComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+BreadCrumbListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: BreadCrumbListComponent, selector: "[kendoBreadCrumbList]", inputs: { items: "items", itemTemplate: "itemTemplate", collapseMode: "collapseMode", separatorIcon: "separatorIcon" }, outputs: { itemClick: "itemClick" }, viewQueries: [{ propertyName: "renderedItems", predicate: BreadCrumbItemComponent, descendants: true }], ngImport: i0, template: "\n        <ng-container *ngFor=\"let item of items; let i = index; let isFirst = first; let isLast = last\">\n            <li\n                #renderedItem\n                kendoBreadCrumbItem\n                *ngIf=\"!(collapseMode === 'wrap' && isFirst) || isRootItemContainer\"\n                [attr.data-kendo-breadcrumb-index]=\"i\"\n                [item]=\"item\"\n                [index]=\"i\"\n                [collapseMode]=\"collapseMode\"\n                [itemTemplate]=\"itemTemplate\"\n            >\n                <span kendoBreadCrumbSeparator [icon]=\"separatorIcon\" *ngIf=\"collapseMode === 'wrap' && !isFirst\"></span>\n                <span\n                    kendoBreadCrumbSeparator\n                    [icon]=\"separatorIcon\"\n                    *ngIf=\"collapseMode !== 'wrap' && !isLast && !(item?.context.collapsed && items[i + 1]?.context.collapsed)\"\n                ></span>\n            </li>\n        </ng-container>\n    ", isInline: true, components: [{ type: BreadCrumbItemComponent, selector: "[kendoBreadCrumbItem]", inputs: ["item", "collapseMode", "index", "itemTemplate"] }], directives: [{ type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: BreadCrumbSeparatorDirective, selector: "[kendoBreadCrumbSeparator]", inputs: ["icon"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: BreadCrumbListComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[kendoBreadCrumbList]',
+                    template: `
         <ng-container *ngFor="let item of items; let i = index; let isFirst = first; let isLast = last">
             <li
                 #renderedItem
@@ -609,9 +665,21 @@ BreadCrumbListComponent = __decorate([
             </li>
         </ng-container>
     `
-    }),
-    __metadata("design:paramtypes", [ElementRef, NgZone])
-], BreadCrumbListComponent);
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { items: [{
+                type: Input
+            }], itemTemplate: [{
+                type: Input
+            }], collapseMode: [{
+                type: Input
+            }], separatorIcon: [{
+                type: Input
+            }], itemClick: [{
+                type: Output
+            }], renderedItems: [{
+                type: ViewChildren,
+                args: [BreadCrumbItemComponent]
+            }] } });
 
 const getCollapsed = (itemComponent) => itemComponent.item.context.collapsed;
 /**
@@ -661,7 +729,7 @@ const expandFirst = toggleFirst(true);
  * }
  * ```
  */
-let BreadCrumbComponent = class BreadCrumbComponent {
+class BreadCrumbComponent {
     constructor(el, cdr, zone, localization) {
         this.el = el;
         this.cdr = cdr;
@@ -797,68 +865,52 @@ let BreadCrumbComponent = class BreadCrumbComponent {
             }));
         }));
     }
-};
-__decorate([
-    Input(),
-    __metadata("design:type", Array),
-    __metadata("design:paramtypes", [Array])
-], BreadCrumbComponent.prototype, "items", null);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], BreadCrumbComponent.prototype, "separatorIcon", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String),
-    __metadata("design:paramtypes", [String])
-], BreadCrumbComponent.prototype, "collapseMode", null);
-__decorate([
-    Output(),
-    __metadata("design:type", EventEmitter)
-], BreadCrumbComponent.prototype, "itemClick", void 0);
-__decorate([
-    ViewChild('resizeSensor', { static: true }),
-    __metadata("design:type", ResizeSensorComponent)
-], BreadCrumbComponent.prototype, "resizeSensor", void 0);
-__decorate([
-    ViewChildren('itemsContainer', { read: ElementRef }),
-    __metadata("design:type", QueryList)
-], BreadCrumbComponent.prototype, "itemsContainers", void 0);
-__decorate([
-    ViewChild(BreadCrumbListComponent, { static: true }),
-    __metadata("design:type", BreadCrumbListComponent)
-], BreadCrumbComponent.prototype, "listComponent", void 0);
-__decorate([
-    ContentChild(BreadCrumbItemTemplateDirective, { static: false }),
-    __metadata("design:type", BreadCrumbItemTemplateDirective)
-], BreadCrumbComponent.prototype, "itemTemplate", void 0);
-__decorate([
-    HostBinding('class.k-widget'),
-    HostBinding('class.k-breadcrumb'),
-    __metadata("design:type", Boolean)
-], BreadCrumbComponent.prototype, "hostClasses", void 0);
-__decorate([
-    HostBinding('class.k-breadcrumb-wrap'),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [])
-], BreadCrumbComponent.prototype, "wrapMode", null);
-__decorate([
-    HostBinding('attr.dir'),
-    __metadata("design:type", String),
-    __metadata("design:paramtypes", [])
-], BreadCrumbComponent.prototype, "getDir", null);
-BreadCrumbComponent = __decorate([
-    Component({
-        exportAs: 'kendoBreadCrumb',
-        selector: 'kendo-breadcrumb',
-        providers: [
-            LocalizationService,
-            {
-                provide: L10N_PREFIX,
-                useValue: 'kendo.breadcrumb'
-            }
-        ],
-        template: `
+}
+BreadCrumbComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: BreadCrumbComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+BreadCrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: BreadCrumbComponent, selector: "kendo-breadcrumb", inputs: { items: "items", separatorIcon: "separatorIcon", collapseMode: "collapseMode" }, outputs: { itemClick: "itemClick" }, host: { properties: { "class.k-widget": "this.hostClasses", "class.k-breadcrumb": "this.hostClasses", "class.k-breadcrumb-wrap": "this.wrapMode", "attr.dir": "this.getDir" } }, providers: [
+        LocalizationService,
+        {
+            provide: L10N_PREFIX,
+            useValue: 'kendo.breadcrumb'
+        }
+    ], queries: [{ propertyName: "itemTemplate", first: true, predicate: BreadCrumbItemTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "resizeSensor", first: true, predicate: ["resizeSensor"], descendants: true, static: true }, { propertyName: "listComponent", first: true, predicate: BreadCrumbListComponent, descendants: true, static: true }, { propertyName: "itemsContainers", predicate: ["itemsContainer"], descendants: true, read: ElementRef }], exportAs: ["kendoBreadCrumb"], ngImport: i0, template: `
+        <ol
+            #itemsContainer
+            kendoBreadCrumbList
+            class="k-breadcrumb-root-item-container"
+            *ngIf="collapseMode === 'wrap'"
+            [items]="firstItem$ | async"
+            [itemTemplate]="itemTemplate?.templateRef"
+            [collapseMode]="collapseMode"
+            [separatorIcon]="separatorIcon"
+            (itemClick)="itemClick.emit($event)"
+        ></ol>
+        <ol
+            #itemsContainer
+            kendoBreadCrumbList
+            class="k-breadcrumb-container"
+            [items]="itemsData$ | async"
+            [itemTemplate]="itemTemplate?.templateRef"
+            [collapseMode]="collapseMode"
+            [separatorIcon]="separatorIcon"
+            (itemClick)="itemClick.emit($event)"
+            [ngClass]="{ 'k-flex-wrap': collapseMode === 'wrap', 'k-flex-none': collapseMode === 'none' }"
+        ></ol>
+        <kendo-resize-sensor [rateLimit]="1000" #resizeSensor></kendo-resize-sensor>
+    `, isInline: true, components: [{ type: BreadCrumbListComponent, selector: "[kendoBreadCrumbList]", inputs: ["items", "itemTemplate", "collapseMode", "separatorIcon"], outputs: ["itemClick"] }, { type: i3.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "async": i1$1.AsyncPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: BreadCrumbComponent, decorators: [{
+            type: Component,
+            args: [{
+                    exportAs: 'kendoBreadCrumb',
+                    selector: 'kendo-breadcrumb',
+                    providers: [
+                        LocalizationService,
+                        {
+                            provide: L10N_PREFIX,
+                            useValue: 'kendo.breadcrumb'
+                        }
+                    ],
+                    template: `
         <ol
             #itemsContainer
             kendoBreadCrumbList
@@ -883,87 +935,52 @@ BreadCrumbComponent = __decorate([
         ></ol>
         <kendo-resize-sensor [rateLimit]="1000" #resizeSensor></kendo-resize-sensor>
     `
-    }),
-    __metadata("design:paramtypes", [ElementRef,
-        ChangeDetectorRef,
-        NgZone,
-        LocalizationService])
-], BreadCrumbComponent);
-
-const DEFAULT_ICON = 'arrow-chevron-right';
-const DEFAULT_RTL_ICON = 'arrow-chevron-left';
-/**
- * @hidden
- */
-let BreadCrumbSeparatorDirective = class BreadCrumbSeparatorDirective {
-    constructor(el, localization) {
-        this.el = el;
-        this.localization = localization;
-        this.defaultClasses = true;
-        this.ariaHidden = true;
-        this.direction = 'ltr';
-        this.direction = this.localization.rtl ? 'rtl' : 'ltr';
-    }
-    set icon(icon) {
-        const element = this.el.nativeElement;
-        element.classList.remove(`k-i-${this._icon}`);
-        if (isPresent(icon)) {
-            this._icon = icon;
-            this.hasDefaultIcon = false;
-        }
-        else {
-            this._icon = this.direction === 'ltr' ? DEFAULT_ICON : DEFAULT_RTL_ICON;
-            this.hasDefaultIcon = true;
-        }
-        element.classList.add(`k-i-${this._icon}`);
-    }
-    get icon() {
-        return this._icon;
-    }
-    ngOnInit() {
-        this.localizationChangesSubscription = this.localization.changes.subscribe(({ rtl }) => {
-            this.direction = rtl ? 'rtl' : 'ltr';
-            if (this.hasDefaultIcon) {
-                this.icon = undefined;
-            }
-        });
-    }
-    ngOnDestroy() {
-        this.localizationChangesSubscription.unsubscribe();
-    }
-};
-__decorate([
-    Input(),
-    __metadata("design:type", String),
-    __metadata("design:paramtypes", [String])
-], BreadCrumbSeparatorDirective.prototype, "icon", null);
-__decorate([
-    HostBinding('class.k-breadcrumb-delimiter-icon'),
-    HostBinding('class.k-icon'),
-    __metadata("design:type", Boolean)
-], BreadCrumbSeparatorDirective.prototype, "defaultClasses", void 0);
-__decorate([
-    HostBinding('attr.aria-hidden'),
-    __metadata("design:type", Boolean)
-], BreadCrumbSeparatorDirective.prototype, "ariaHidden", void 0);
-BreadCrumbSeparatorDirective = __decorate([
-    Directive({
-        selector: '[kendoBreadCrumbSeparator]'
-    }),
-    __metadata("design:paramtypes", [ElementRef, LocalizationService])
-], BreadCrumbSeparatorDirective);
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i1.LocalizationService }]; }, propDecorators: { items: [{
+                type: Input
+            }], separatorIcon: [{
+                type: Input
+            }], collapseMode: [{
+                type: Input
+            }], itemClick: [{
+                type: Output
+            }], resizeSensor: [{
+                type: ViewChild,
+                args: ['resizeSensor', { static: true }]
+            }], itemsContainers: [{
+                type: ViewChildren,
+                args: ['itemsContainer', { read: ElementRef }]
+            }], listComponent: [{
+                type: ViewChild,
+                args: [BreadCrumbListComponent, { static: true }]
+            }], itemTemplate: [{
+                type: ContentChild,
+                args: [BreadCrumbItemTemplateDirective, { static: false }]
+            }], hostClasses: [{
+                type: HostBinding,
+                args: ['class.k-widget']
+            }, {
+                type: HostBinding,
+                args: ['class.k-breadcrumb']
+            }], wrapMode: [{
+                type: HostBinding,
+                args: ['class.k-breadcrumb-wrap']
+            }], getDir: [{
+                type: HostBinding,
+                args: ['attr.dir']
+            }] } });
 
-const templateDirectives = [
+const templateDirectives$1 = [
     BreadCrumbItemTemplateDirective
 ];
-const exportedModules$1 = [
+const exportedModules = [
     BreadCrumbComponent,
     BreadCrumbItemComponent,
     BreadCrumbListComponent,
-    ...templateDirectives
+    ...templateDirectives$1
 ];
 const declarations$1 = [
-    ...exportedModules$1,
+    ...exportedModules,
     BreadCrumbSeparatorDirective
 ];
 /**
@@ -997,38 +1014,28 @@ const declarations$1 = [
  *
  * ```
  */
-let BreadCrumbModule = class BreadCrumbModule {
-};
-BreadCrumbModule = __decorate([
-    NgModule({
-        declarations: [declarations$1],
-        exports: [exportedModules$1],
-        imports: [CommonModule, ResizeSensorModule]
-    })
-], BreadCrumbModule);
-
-/**
- * Represents a template that defines the item content of the BottomNavigation.
- * To define the template, nest an `<ng-template>` tag
- * with the `kendoBottomNavigationItemTemplate` directive inside the `<kendo-bottomnavigation>` tag ([see example]({% slug templates_bottomnavigation %})).
- */
-let BottomNavigationItemTemplateDirective = class BottomNavigationItemTemplateDirective {
-    constructor(templateRef) {
-        this.templateRef = templateRef;
-    }
-};
-BottomNavigationItemTemplateDirective = __decorate([
-    Directive({
-        selector: '[kendoBottomNavigationItemTemplate]'
-    }),
-    __param(0, Optional()),
-    __metadata("design:paramtypes", [TemplateRef])
-], BottomNavigationItemTemplateDirective);
+class BreadCrumbModule {
+}
+BreadCrumbModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: BreadCrumbModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+BreadCrumbModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: BreadCrumbModule, declarations: [BreadCrumbComponent,
+        BreadCrumbItemComponent,
+        BreadCrumbListComponent, BreadCrumbItemTemplateDirective, BreadCrumbSeparatorDirective], imports: [CommonModule, ResizeSensorModule], exports: [BreadCrumbComponent,
+        BreadCrumbItemComponent,
+        BreadCrumbListComponent, BreadCrumbItemTemplateDirective] });
+BreadCrumbModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: BreadCrumbModule, imports: [[CommonModule, ResizeSensorModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: BreadCrumbModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [declarations$1],
+                    exports: [exportedModules],
+                    imports: [CommonModule, ResizeSensorModule]
+                }]
+        }] });
 
 /**
  * @hidden
  */
-let BottomNavigationItemComponent = class BottomNavigationItemComponent {
+class BottomNavigationItemComponent {
     get disabledClass() {
         return this.item.disabled;
     }
@@ -1055,67 +1062,23 @@ let BottomNavigationItemComponent = class BottomNavigationItemComponent {
         const customIcon = this.item.iconClass ? this.item.iconClass : '';
         return `${kendoIcon} ${customIcon}`;
     }
-};
-__decorate([
-    Input(),
-    __metadata("design:type", BottomNavigationItemTemplateDirective)
-], BottomNavigationItemComponent.prototype, "itemTemplate", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], BottomNavigationItemComponent.prototype, "item", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Number)
-], BottomNavigationItemComponent.prototype, "index", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], BottomNavigationItemComponent.prototype, "disabledComponent", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Number)
-], BottomNavigationItemComponent.prototype, "selectedIdx", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], BottomNavigationItemComponent.prototype, "orientation", void 0);
-__decorate([
-    HostBinding('attr.aria-disabled'),
-    HostBinding('class.k-state-disabled'),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [])
-], BottomNavigationItemComponent.prototype, "disabledClass", null);
-__decorate([
-    HostBinding('class.k-hstack'),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [])
-], BottomNavigationItemComponent.prototype, "horizontalItemClass", null);
-__decorate([
-    HostBinding('class.k-vstack'),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [])
-], BottomNavigationItemComponent.prototype, "verticalItemClass", null);
-__decorate([
-    HostBinding('attr.aria-label'),
-    __metadata("design:type", String),
-    __metadata("design:paramtypes", [])
-], BottomNavigationItemComponent.prototype, "label", null);
-__decorate([
-    HostBinding('attr.tabindex'),
-    __metadata("design:type", Number),
-    __metadata("design:paramtypes", [])
-], BottomNavigationItemComponent.prototype, "tabindex", null);
-__decorate([
-    HostBinding('attr.aria-selected'),
-    HostBinding('class.k-state-selected'),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [])
-], BottomNavigationItemComponent.prototype, "selectedClass", null);
-BottomNavigationItemComponent = __decorate([
-    Component({
-        selector: '[kendoBottomNavigationItem]',
-        template: `
+}
+BottomNavigationItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: BottomNavigationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+BottomNavigationItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: BottomNavigationItemComponent, selector: "[kendoBottomNavigationItem]", inputs: { itemTemplate: "itemTemplate", item: "item", index: "index", disabledComponent: "disabledComponent", selectedIdx: "selectedIdx", orientation: "orientation" }, host: { properties: { "attr.aria-disabled": "this.disabledClass", "class.k-state-disabled": "this.disabledClass", "class.k-hstack": "this.horizontalItemClass", "class.k-vstack": "this.verticalItemClass", "attr.aria-label": "this.label", "attr.tabindex": "this.tabindex", "attr.aria-selected": "this.selectedClass", "class.k-state-selected": "this.selectedClass" } }, ngImport: i0, template: `
+        <ng-container *ngIf="!itemTemplate">
+            <span *ngIf="itemIcon" class="k-bottom-nav-item-icon" [ngClass]="iconClasses"></span>
+            <span *ngIf="item.text" class="k-bottom-nav-item-text">{{item.text}}</span>
+        </ng-container>
+        <ng-template *ngIf="itemTemplate"
+            [ngTemplateOutlet]="itemTemplate?.templateRef"
+            [ngTemplateOutletContext]="{ $implicit: item }">
+        </ng-template>
+    `, isInline: true, directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: BottomNavigationItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[kendoBottomNavigationItem]',
+                    template: `
         <ng-container *ngIf="!itemTemplate">
             <span *ngIf="itemIcon" class="k-bottom-nav-item-icon" [ngClass]="iconClasses"></span>
             <span *ngIf="item.text" class="k-bottom-nav-item-text">{{item.text}}</span>
@@ -1125,8 +1088,65 @@ BottomNavigationItemComponent = __decorate([
             [ngTemplateOutletContext]="{ $implicit: item }">
         </ng-template>
     `
-    })
-], BottomNavigationItemComponent);
+                }]
+        }], propDecorators: { itemTemplate: [{
+                type: Input
+            }], item: [{
+                type: Input
+            }], index: [{
+                type: Input
+            }], disabledComponent: [{
+                type: Input
+            }], selectedIdx: [{
+                type: Input
+            }], orientation: [{
+                type: Input
+            }], disabledClass: [{
+                type: HostBinding,
+                args: ['attr.aria-disabled']
+            }, {
+                type: HostBinding,
+                args: ['class.k-state-disabled']
+            }], horizontalItemClass: [{
+                type: HostBinding,
+                args: ['class.k-hstack']
+            }], verticalItemClass: [{
+                type: HostBinding,
+                args: ['class.k-vstack']
+            }], label: [{
+                type: HostBinding,
+                args: ['attr.aria-label']
+            }], tabindex: [{
+                type: HostBinding,
+                args: ['attr.tabindex']
+            }], selectedClass: [{
+                type: HostBinding,
+                args: ['attr.aria-selected']
+            }, {
+                type: HostBinding,
+                args: ['class.k-state-selected']
+            }] } });
+
+/**
+ * Represents a template that defines the item content of the BottomNavigation.
+ * To define the template, nest an `<ng-template>` tag
+ * with the `kendoBottomNavigationItemTemplate` directive inside the `<kendo-bottomnavigation>` tag ([see example]({% slug templates_bottomnavigation %})).
+ */
+class BottomNavigationItemTemplateDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+}
+BottomNavigationItemTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: BottomNavigationItemTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+BottomNavigationItemTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: BottomNavigationItemTemplateDirective, selector: "[kendoBottomNavigationItemTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: BottomNavigationItemTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoBottomNavigationItemTemplate]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
+                    type: Optional
+                }] }]; } });
 
 /**
  * @hidden
@@ -1194,7 +1214,7 @@ const colors = ['primary', 'secondary', 'tertiary', 'info', 'success', 'warning'
  * }
  * ```
  */
-let BottomNavigationComponent = class BottomNavigationComponent {
+class BottomNavigationComponent {
     constructor(localization, hostElement, ngZone, changeDetector, renderer) {
         this.localization = localization;
         this.hostElement = hostElement;
@@ -1401,83 +1421,28 @@ let BottomNavigationComponent = class BottomNavigationComponent {
             return itemIndex(item, BOTTOMNAVIGATION_ITEM_INDEX);
         }
     }
-};
-__decorate([
-    Input(),
-    __metadata("design:type", Array)
-], BottomNavigationComponent.prototype, "items", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], BottomNavigationComponent.prototype, "border", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], BottomNavigationComponent.prototype, "disabled", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String),
-    __metadata("design:paramtypes", [String])
-], BottomNavigationComponent.prototype, "fill", null);
-__decorate([
-    Input(),
-    __metadata("design:type", String),
-    __metadata("design:paramtypes", [String])
-], BottomNavigationComponent.prototype, "itemFlow", null);
-__decorate([
-    Input(),
-    __metadata("design:type", String),
-    __metadata("design:paramtypes", [String])
-], BottomNavigationComponent.prototype, "positionMode", null);
-__decorate([
-    Input(),
-    __metadata("design:type", String),
-    __metadata("design:paramtypes", [String])
-], BottomNavigationComponent.prototype, "themeColor", null);
-__decorate([
-    Output(),
-    __metadata("design:type", EventEmitter)
-], BottomNavigationComponent.prototype, "select", void 0);
-__decorate([
-    HostBinding('class.k-hstack'),
-    HostBinding('class.k-justify-content-stretch'),
-    HostBinding('class.k-bottom-nav'),
-    __metadata("design:type", Boolean)
-], BottomNavigationComponent.prototype, "hostClass", void 0);
-__decorate([
-    HostBinding('class.k-bottom-nav-border'),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [])
-], BottomNavigationComponent.prototype, "borderClass", null);
-__decorate([
-    HostBinding('class.k-state-disabled'),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [])
-], BottomNavigationComponent.prototype, "disabledClass", null);
-__decorate([
-    HostBinding('attr.role'),
-    __metadata("design:type", String)
-], BottomNavigationComponent.prototype, "role", void 0);
-__decorate([
-    HostBinding('attr.dir'),
-    __metadata("design:type", String)
-], BottomNavigationComponent.prototype, "direction", void 0);
-__decorate([
-    ContentChild(BottomNavigationItemTemplateDirective, { static: false }),
-    __metadata("design:type", BottomNavigationItemTemplateDirective)
-], BottomNavigationComponent.prototype, "itemTemplate", void 0);
-BottomNavigationComponent = __decorate([
-    Component({
-        exportAs: 'kendoBottomNavigation',
-        selector: 'kendo-bottomnavigation',
-        providers: [
-            LocalizationService,
-            {
-                provide: L10N_PREFIX,
-                useValue: 'kendo.bottomnavigation'
-            }
-        ],
-        template: `
+}
+BottomNavigationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: BottomNavigationComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+BottomNavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: BottomNavigationComponent, selector: "kendo-bottomnavigation", inputs: { items: "items", border: "border", disabled: "disabled", fill: "fill", itemFlow: "itemFlow", positionMode: "positionMode", themeColor: "themeColor" }, outputs: { select: "select" }, host: { properties: { "class.k-hstack": "this.hostClass", "class.k-justify-content-stretch": "this.hostClass", "class.k-bottom-nav": "this.hostClass", "class.k-bottom-nav-border": "this.borderClass", "class.k-state-disabled": "this.disabledClass", "attr.role": "this.role", "attr.dir": "this.direction" } }, providers: [
+        LocalizationService,
+        {
+            provide: L10N_PREFIX,
+            useValue: 'kendo.bottomnavigation'
+        }
+    ], queries: [{ propertyName: "itemTemplate", first: true, predicate: BottomNavigationItemTemplateDirective, descendants: true }], exportAs: ["kendoBottomNavigation"], ngImport: i0, template: "\n        <ng-container *ngIf=\"items\">\n            <span kendoBottomNavigationItem\n                *ngFor=\"let item of items; let idx=index\"\n                role=\"link\"\n                class=\"k-bottom-nav-item\"\n                [disabledComponent]=\"disabled\"\n                [item]=\"item\"\n                [index]=\"idx\"\n                [selectedIdx]=\"selectedIdx\"\n                [itemTemplate]=\"itemTemplate\"\n                [attr.data-kendo-bottomnavigation-index]=\"idx\"\n                [ngClass]=\"item.cssClass\"\n                [ngStyle]=\"item.cssStyle\"\n                [orientation]=\"itemFlow\">\n            </span>\n        </ng-container>\n    ", isInline: true, components: [{ type: BottomNavigationItemComponent, selector: "[kendoBottomNavigationItem]", inputs: ["itemTemplate", "item", "index", "disabledComponent", "selectedIdx", "orientation"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: BottomNavigationComponent, decorators: [{
+            type: Component,
+            args: [{
+                    exportAs: 'kendoBottomNavigation',
+                    selector: 'kendo-bottomnavigation',
+                    providers: [
+                        LocalizationService,
+                        {
+                            provide: L10N_PREFIX,
+                            useValue: 'kendo.bottomnavigation'
+                        }
+                    ],
+                    template: `
         <ng-container *ngIf="items">
             <span kendoBottomNavigationItem
                 *ngFor="let item of items; let idx=index"
@@ -1495,17 +1460,52 @@ BottomNavigationComponent = __decorate([
             </span>
         </ng-container>
     `
-    }),
-    __metadata("design:paramtypes", [LocalizationService,
-        ElementRef,
-        NgZone,
-        ChangeDetectorRef,
-        Renderer2])
-], BottomNavigationComponent);
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }]; }, propDecorators: { items: [{
+                type: Input
+            }], border: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], fill: [{
+                type: Input
+            }], itemFlow: [{
+                type: Input
+            }], positionMode: [{
+                type: Input
+            }], themeColor: [{
+                type: Input
+            }], select: [{
+                type: Output
+            }], hostClass: [{
+                type: HostBinding,
+                args: ['class.k-hstack']
+            }, {
+                type: HostBinding,
+                args: ['class.k-justify-content-stretch']
+            }, {
+                type: HostBinding,
+                args: ['class.k-bottom-nav']
+            }], borderClass: [{
+                type: HostBinding,
+                args: ['class.k-bottom-nav-border']
+            }], disabledClass: [{
+                type: HostBinding,
+                args: ['class.k-state-disabled']
+            }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], direction: [{
+                type: HostBinding,
+                args: ['attr.dir']
+            }], itemTemplate: [{
+                type: ContentChild,
+                args: [BottomNavigationItemTemplateDirective, { static: false }]
+            }] } });
 
-const templateDirectives$1 = [BottomNavigationItemTemplateDirective];
-const exportedComponents = [BottomNavigationComponent, ...templateDirectives$1];
-const declarations$2 = [BottomNavigationItemComponent, ...exportedComponents];
+const templateDirectives = [BottomNavigationItemTemplateDirective];
+const exportedComponents = [BottomNavigationComponent, ...templateDirectives];
+const declarations = [BottomNavigationItemComponent, ...exportedComponents];
 /**
  * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
  * definition for the BottomNavigation component.
@@ -1537,15 +1537,19 @@ const declarations$2 = [BottomNavigationItemComponent, ...exportedComponents];
  *
  * ```
  */
-let BottomNavigationModule = class BottomNavigationModule {
-};
-BottomNavigationModule = __decorate([
-    NgModule({
-        declarations: [declarations$2],
-        exports: [exportedComponents],
-        imports: [CommonModule]
-    })
-], BottomNavigationModule);
+class BottomNavigationModule {
+}
+BottomNavigationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: BottomNavigationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+BottomNavigationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: BottomNavigationModule, declarations: [BottomNavigationItemComponent, BottomNavigationComponent, BottomNavigationItemTemplateDirective], imports: [CommonModule], exports: [BottomNavigationComponent, BottomNavigationItemTemplateDirective] });
+BottomNavigationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: BottomNavigationModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: BottomNavigationModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [declarations],
+                    exports: [exportedComponents],
+                    imports: [CommonModule]
+                }]
+        }] });
 
 /**
  * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
@@ -1578,17 +1582,25 @@ BottomNavigationModule = __decorate([
  *
  * ```
  */
-let NavigationModule = class NavigationModule {
-};
-NavigationModule = __decorate([
-    NgModule({
-        exports: [
-            AppBarModule,
-            BreadCrumbModule,
-            BottomNavigationModule
-        ]
-    })
-], NavigationModule);
+class NavigationModule {
+}
+NavigationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NavigationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NavigationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NavigationModule, exports: [AppBarModule,
+        BreadCrumbModule,
+        BottomNavigationModule] });
+NavigationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NavigationModule, imports: [AppBarModule,
+        BreadCrumbModule,
+        BottomNavigationModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NavigationModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [
+                        AppBarModule,
+                        BreadCrumbModule,
+                        BottomNavigationModule
+                    ]
+                }]
+        }] });
 
 // AppBar exports
 
@@ -1596,4 +1608,5 @@ NavigationModule = __decorate([
  * Generated bundle index. Do not edit.
  */
 
-export { BottomNavigationItemComponent, BOTTOMNAVIGATION_ITEM_INDEX, BreadCrumbItemComponent, BreadCrumbListComponent, BREADCRUMB_ITEM_INDEX, BreadCrumbSeparatorDirective, PreventableEvent, AppBarComponent, AppBarSectionComponent, AppBarSpacerComponent, AppBarModule, NavigationModule, BreadCrumbComponent, BreadCrumbItemTemplateDirective, BreadCrumbModule, BottomNavigationComponent, BottomNavigationItemTemplateDirective, BottomNavigationSelectEvent, BottomNavigationModule };
+export { AppBarComponent, AppBarModule, AppBarSectionComponent, AppBarSpacerComponent, BottomNavigationComponent, BottomNavigationItemTemplateDirective, BottomNavigationModule, BottomNavigationSelectEvent, BreadCrumbComponent, BreadCrumbItemComponent, BreadCrumbItemTemplateDirective, BreadCrumbListComponent, BreadCrumbModule, NavigationModule };
+