@progress/kendo-angular-navigation 2.1.1 → 11.0.0-develop.101

package/fesm2015/progress-kendo-angular-navigation.mjs

@@ -0,0 +1,2325 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+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 i3 from '@progress/kendo-angular-common';
+import { closestInScope as closestInScope$1, isDocumentAvailable, Keys, ResizeSensorModule } from '@progress/kendo-angular-common';
+import * as i1$1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { fromEvent, merge, ReplaySubject, Subject, Subscription } from 'rxjs';
+import { filter, map, startWith, share } from 'rxjs/operators';
+
+/**
+ * @hidden
+ */
+const packageMetadata = {
+    name: '@progress/kendo-angular-navigation',
+    productName: 'Kendo UI for Angular',
+    productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
+    publishDate: 1673510422,
+    version: '',
+    licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
+};
+
+/**
+ * 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.
+ */
+class AppBarComponent {
+    constructor(localizationService) {
+        this.localizationService = localizationService;
+        this.hostClass = true;
+        /**
+         * Specifies the position of the AppBar
+         * ([see example]({% slug positioning_appbar %}#toc-position)).
+         *
+         * * The possible values are:
+         * * `top` (Default)—Positions the AppBar at the top of the content.
+         *    Setting the `position` property to `top` requires adding the Appbar component before the page content.
+         *    The position property applies CSS `top: 0` style in [`fixed mode`]({% slug api_navigation_appbarcomponent %}#toc-positionMode) and also adds a `box-shadow` to the bottom of the AppBar.
+         *
+         * * `bottom`—Positions the AppBar at the bottom of the content.
+         *    Setting the `position` property to `bottom` requires adding the Appbar component after the page content.
+         *   The position property applies CSS `bottom: 0` style in [`fixed mode`]({% slug api_navigation_appbarcomponent %}#toc-positionMode) and also adds a `box-shadow ` to the top of the AppBar.
+         *
+         */
+        this.position = 'top';
+        /**
+         * Specifies the positionMode of the AppBar
+         * ([see example]({% slug positioning_appbar %}#toc-positionmode)).
+         *
+         * * The possible values are:
+         * * `static` (Default)—Does not position the AppBar in any special way. It is positioned according to the normal flow of the page.
+         * * `sticky`—Positions the AppBar based on the user's scroll position. A sticky element toggles between static and fixed CSS [`position`](https://developer.mozilla.org/en-US/docs/Web/CSS/position) property, depending on the scroll position.
+         * * `fixed`—Positions the AppBar relative to the viewport. It always stays in the same place even if the page is scrolled.
+         */
+        this.positionMode = 'static';
+        /**
+         * Specifies the theme color of the AppBar.
+         * The theme color will be applied as background color of the component.
+         *
+         *
+         * * The possible values are:
+         * * `light` (Default)—Applies coloring based on light theme color.
+         * * `dark`—Applies coloring based on dark theme color.
+         * * `inherit`— Applies inherited coloring value.
+         *
+         */
+        this.themeColor = 'light';
+        this.rtl = false;
+        validatePackage(packageMetadata);
+        this.dynamicRTLSubscription = this.localizationService.changes.subscribe(({ rtl }) => {
+            this.rtl = rtl;
+            this.direction = this.rtl ? 'rtl' : 'ltr';
+        });
+    }
+    get topClass() {
+        return this.position === 'top';
+    }
+    get bottomClass() {
+        return this.position === 'bottom';
+    }
+    get stickyClass() {
+        return this.positionMode === 'sticky';
+    }
+    get fixedClass() {
+        return this.positionMode === 'fixed';
+    }
+    get staticClass() {
+        return this.positionMode === 'static';
+    }
+    get lightClass() {
+        return this.themeColor === 'light';
+    }
+    get darkClass() {
+        return this.themeColor === 'dark';
+    }
+    get inheritClass() {
+        return this.themeColor === 'inherit';
+    }
+    ngOnDestroy() {
+        if (this.dynamicRTLSubscription) {
+            this.dynamicRTLSubscription.unsubscribe();
+        }
+    }
+}
+AppBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AppBarComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+AppBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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: "13.3.11", 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'
+                        }
+                    ]
+                }]
+        }], 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).
+ *
+ * @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;
+    }
+}
+AppBarSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AppBarSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AppBarSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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: "13.3.11", ngImport: i0, type: AppBarSectionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-appbar-section',
+                    template: `
+        <ng-content></ng-content>
+    `
+                }]
+        }], propDecorators: { hostClass: [{
+                type: HostBinding,
+                args: ['class.k-appbar-section']
+            }] } });
+
+/**
+ * @hidden
+ */
+const isPresent = (value) => value !== null && value !== undefined;
+/**
+ * @hidden
+ */
+const outerWidth = (element) => {
+    let width = element.offsetWidth;
+    const style = getComputedStyle(element);
+    width += (parseFloat(style.marginLeft) || 0) + (parseFloat(style.marginRight) || 0);
+    return width;
+};
+/**
+ * @hidden
+ */
+const getFirstAndLastFocusable = (parent) => {
+    const all = getAllFocusableChildren(parent);
+    const firstFocusable = all.length > 0 ? all[0] : parent;
+    const lastFocusable = all.length > 0 ? all[all.length - 1] : parent;
+    return [firstFocusable, lastFocusable];
+};
+/**
+ * @hidden
+ */
+const getAllFocusableChildren = (parent) => {
+    return parent.querySelectorAll(focusableSelector);
+};
+/**
+ * @hidden
+ */
+const focusableSelector = [
+    'a[href]',
+    'area[href]',
+    'input:not([disabled])',
+    'select:not([disabled])',
+    'textarea:not([disabled])',
+    'button:not([disabled])',
+    'iframe',
+    'object',
+    'embed',
+    '*[tabindex]',
+    '*[contenteditable]'
+].join(',');
+/**
+ * @hidden
+ */
+let idx = 0;
+/**
+ * @hidden
+ */
+const hexColorRegex = /^#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/;
+/**
+ * @hidden
+ */
+const getId = (prefix) => {
+    return `${prefix}${++idx}`;
+};
+/**
+ * @hidden
+ */
+const ACTIONSHEET_ITEM_INDEX_ATTRIBUTE = 'kendo-actionsheet-item-index';
+/**
+ * @hidden
+ */
+const getActionSheetItemIndex = (target, targetAttr, scope) => {
+    const item = closestItem$1(target, targetAttr, scope);
+    if (item) {
+        return itemIndex$1(item, targetAttr);
+    }
+};
+const itemIndex$1 = (item, indexAttr) => +item.getAttribute(indexAttr);
+const hasItemIndex$1 = (item, indexAttr) => isPresent(item.getAttribute(indexAttr));
+const closestItem$1 = (target, targetAttr, scope) => closestInScope$1(target, el => hasItemIndex$1(el, targetAttr), scope);
+
+/**
+ * Represents the [Kendo UI AppBarSpacer component for Angular]({% slug contentarrangement_appbar %}#toc-spacings).
+ * Used to give additional white space between the AppBar sections and provides a way for customizing its width.
+ *
+ * @example
+ *
+ * ```ts-no-run
+ *  * _@Component({
+ *    selector: 'my-app',
+ *    template: `
+ *        <kendo-appbar>
+ *            <kendo-appbar-section>
+ *                 <button kendoButton fillMode="flat">
+ *                     <kendo-icon name="menu"></kendo-icon>
+ *                 </button>
+ *            </kendo-appbar-section>
+ *
+ *            <kendo-appbar-spacer></kendo-appbar-spacer>
+ *
+ *            <kendo-appbar-section>
+ *                <h2>Page Title</h2>
+ *            </kendo-appbar-section>
+ *        </kendo-appbar>
+ *    `
+ * })
+ * class AppComponent {}
+ * ```
+ */
+class AppBarSpacerComponent {
+    constructor(renderer, element) {
+        this.renderer = renderer;
+        this.element = element;
+        this.hostClass = true;
+    }
+    get sizedClass() {
+        return isPresent(this.width);
+    }
+    ngAfterViewInit() {
+        if (isPresent(this.width)) {
+            const element = this.element.nativeElement;
+            this.renderer.setStyle(element, 'flexBasis', this.width);
+        }
+    }
+}
+AppBarSpacerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AppBarSpacerComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+AppBarSpacerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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: "13.3.11", 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$2 = [
+    AppBarComponent,
+    AppBarSectionComponent,
+    AppBarSpacerComponent
+];
+const declarations$3 = [
+    ...exportedModules$2
+];
+/**
+ * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
+ * definition for the AppBar component.
+ *
+ * * @example
+ *
+ * ```ts-no-run
+ * // Import the AppBar module
+ * import { AppBarModule } from '@progress/kendo-angular-navigation';
+ *
+ * // The browser platform with a compiler
+ * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+ * import { BrowserModule } from '@angular/platform-browser';
+ *
+ * import { NgModule } from '@angular/core';
+ *
+ * // Import the app component
+ * import { AppComponent } from './app.component';
+ *
+ * // Define the app module
+ * _@NgModule({
+ *     declarations: [AppComponent], // declare app component
+ *     imports:      [BrowserModule, AppBarModule], // import AppBar module
+ *     bootstrap:    [AppComponent]
+ * })
+ * export class AppModule {}
+ *
+ * // Compile and launch the module
+ * platformBrowserDynamic().bootstrapModule(AppModule);
+ *
+ * ```
+ */
+class AppBarModule {
+}
+AppBarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AppBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AppBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AppBarModule, declarations: [AppBarComponent,
+        AppBarSectionComponent,
+        AppBarSpacerComponent], imports: [CommonModule], exports: [AppBarComponent,
+        AppBarSectionComponent,
+        AppBarSpacerComponent] });
+AppBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AppBarModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AppBarModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [declarations$3],
+                    exports: [exportedModules$2],
+                    imports: [CommonModule]
+                }]
+        }] });
+
+/**
+ * Represents a template that defines the content of a Breadcrumb item.
+ * To define the template, nest an `<ng-template>` tag with the `kendoBreadCrumbItemTemplate` directive inside the `<kendo-breadcrumb>` tag.
+ *
+ * For more information and example refer to the [Templates]({% slug templates_breadcrumb %}) article.
+ */
+class BreadCrumbItemTemplateDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+}
+BreadCrumbItemTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BreadCrumbItemTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+BreadCrumbItemTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: BreadCrumbItemTemplateDirective, selector: "[kendoBreadCrumbItemTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BreadCrumbItemTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoBreadCrumbItemTemplate]'
+                }]
+        }], ctorParameters: function () {
+        return [{ type: i0.TemplateRef, decorators: [{
+                        type: Optional
+                    }] }];
+    } });
+
+/**
+ * @hidden
+ */
+const BREADCRUMB_ITEM_INDEX = 'data-kendo-breadcrumb-index';
+
+/**
+ * @hidden
+ */
+class BreadCrumbItemComponent {
+    constructor(el) {
+        this.el = el;
+        this.index = -1;
+        this.hostClasses = true;
+        this.disabled = false;
+    }
+    get isRootItem() {
+        return this.item.context.isFirst;
+    }
+    get isDisabled() {
+        return this.disabled || null;
+    }
+    get isLastItem() {
+        return this.item.context.isLast;
+    }
+    ngOnInit() {
+        this.disabled = this.item.data && (this.item.data.disabled || this.item.context.isLast);
+    }
+    ngAfterViewInit() {
+        if (isDocumentAvailable()) {
+            this.width = outerWidth(this.el.nativeElement);
+        }
+    }
+    onImageLoad() {
+        if (isDocumentAvailable()) {
+            this.width = outerWidth(this.el.nativeElement);
+        }
+    }
+}
+BreadCrumbItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BreadCrumbItemComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+BreadCrumbItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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-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: "13.3.11", ngImport: i0, type: BreadCrumbItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: '[kendoBreadCrumbItem]',
+                    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-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>
+    `
+                }]
+        }], 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)) {
+        target = target.parentNode;
+    }
+    if (target !== scope) {
+        return target;
+    }
+};
+const hasItemIndex = (item, indexAttr) => isPresent(item.getAttribute(indexAttr));
+/**
+ * @hidden
+ */
+const itemIndex = (item, indexAttr) => +item.getAttribute(indexAttr);
+/**
+ * @hidden
+ */
+const closestItem = (target, targetAttr, scope) => closestInScope(target, targetAttr, hasItemIndex, scope);
+
+const DEFAULT_ICON = 'chevron-right';
+const DEFAULT_RTL_ICON = 'chevron-left';
+/**
+ * @hidden
+ */
+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: "13.3.11", ngImport: i0, type: BreadCrumbSeparatorDirective, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+BreadCrumbSeparatorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", 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: "13.3.11", 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;
+        this.items = [];
+        this.collapseMode = 'auto';
+        this.itemClick = new EventEmitter();
+        const element = this.el.nativeElement;
+        this.isRootItemContainer = element.classList.contains('k-breadcrumb-root-item-container');
+        this.zone.runOutsideAngular(() => {
+            const click$ = fromEvent(element, 'click');
+            const enterKey$ = fromEvent(element, 'keydown').pipe(filter((ev /* KeyboardEvent causes lint error */) => ev.keyCode === Keys.Enter));
+            this.domEventsSubscription = merge(click$, enterKey$)
+                .pipe(map((ev) => ev.target), filter(e => !e.classList.contains('k-breadcrumb-delimiter-icon')), // do not trigger handler when a separator is clicked
+            map(e => this.getItemIndex(e)), filter(isPresent), map(i => parseInt(i, 10)), map(i => this.items[i]), filter(item => !item.data.disabled && !item.context.isLast), map(item => item.data))
+                .subscribe(el => {
+                this.zone.run(() => this.itemClick.emit(el));
+            });
+        });
+    }
+    ngOnDestroy() {
+        this.domEventsSubscription.unsubscribe();
+    }
+    getItemIndex(target) {
+        const item = closestItem(target, BREADCRUMB_ITEM_INDEX, this.el.nativeElement);
+        if (item) {
+            return itemIndex(item, BREADCRUMB_ITEM_INDEX);
+        }
+    }
+}
+BreadCrumbListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BreadCrumbListComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+BreadCrumbListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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: "13.3.11", ngImport: i0, type: BreadCrumbListComponent, decorators: [{
+            type: Component,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: '[kendoBreadCrumbList]',
+                    template: `
+        <ng-container *ngFor="let item of items; let i = index; let isFirst = first; let isLast = last">
+            <li
+                #renderedItem
+                kendoBreadCrumbItem
+                *ngIf="!(collapseMode === 'wrap' && isFirst) || isRootItemContainer"
+                [attr.${BREADCRUMB_ITEM_INDEX}]="i"
+                [item]="item"
+                [index]="i"
+                [collapseMode]="collapseMode"
+                [itemTemplate]="itemTemplate"
+            >
+                <span kendoBreadCrumbSeparator [icon]="separatorIcon" *ngIf="collapseMode === 'wrap' && !isFirst"></span>
+                <span
+                    kendoBreadCrumbSeparator
+                    [icon]="separatorIcon"
+                    *ngIf="collapseMode !== 'wrap' && !isLast && !(item?.context.collapsed && items[i + 1]?.context.collapsed)"
+                ></span>
+            </li>
+        </ng-container>
+    `
+                }]
+        }], 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;
+/**
+ * @hidden
+ */
+const collapsed = (itemComponent) => getCollapsed(itemComponent) === true;
+/**
+ * @hidden
+ */
+const expanded = (itemComponent) => getCollapsed(itemComponent) === false;
+const toggleFirst = (collapsed) => (itemComponents) => (itemComponents.find(ic => getCollapsed(ic) === collapsed).item.context.collapsed = !collapsed);
+/**
+ * @hidden
+ */
+const collapseFirst = toggleFirst(false);
+/**
+ * @hidden
+ */
+const expandFirst = toggleFirst(true);
+
+/**
+ * Represents the [Kendo UI Breadcrumb component for Angular]({% slug overview_breadcrumb %}).
+ *
+ * @example
+ * ```ts-no-run
+ * _@Component({
+ *      selector: 'my-app',
+ *      template: `
+ *          <kendo-breadcrumb
+ *              [items]="items"
+ *              (itemClick)="onItemClick($event)">
+ *          </kendo-breadcrumb>
+ *      `
+ * })
+ * class AppComponent {
+ *      public items: BreadCrumbItem[] = [
+ *          { text: 'Home', title: 'Home', icon: 'home' },
+ *          { text: 'Kids', title: 'Kids' },
+ *          { text: '8y-16y', title: '8y-16y', disabled: true },
+ *          { text: 'New collection', title: 'New collection' },
+ *          { text: 'Jeans', title: 'Jeans' }
+ *      ];
+ *
+ *      public onItemClick(item: BreadCrumbItem): void {
+ *          console.log(item);
+ *      }
+ * }
+ * ```
+ */
+class BreadCrumbComponent {
+    constructor(el, cdr, zone, localization) {
+        this.el = el;
+        this.cdr = cdr;
+        this.zone = zone;
+        this.localization = localization;
+        /**
+         * Fires when a Breadcrumb item is clicked. The event will not be fired by disabled items and the last item.
+         */
+        this.itemClick = new EventEmitter();
+        this.hostClasses = true;
+        this._items = [];
+        this._collapseMode = 'auto';
+        this.updateItems = new ReplaySubject();
+        this.afterViewInit = new Subject();
+        this.subscriptions = new Subscription();
+        this.direction = 'ltr';
+        validatePackage(packageMetadata);
+        const updateItems$ = this.updateItems.asObservable().pipe(startWith([]));
+        this.direction = localization.rtl ? 'rtl' : 'ltr';
+        this.itemsData$ = updateItems$.pipe(map(items => items.filter(Boolean)), map(items => items.map((item, index, collection) => ({
+            context: {
+                collapsed: false,
+                isLast: index === collection.length - 1,
+                isFirst: index === 0
+            },
+            data: item
+        }))), share());
+        this.firstItem$ = updateItems$.pipe(map(items => {
+            if (items.length > 0) {
+                return [
+                    {
+                        context: {
+                            collapsed: false,
+                            isLast: items.length === 1,
+                            isFirst: true
+                        },
+                        data: items[0]
+                    }
+                ];
+            }
+            return [];
+        }), share());
+    }
+    /**
+     * The collection of items that will be rendered in the Breadcrumb.
+     */
+    set items(items) {
+        this._items = items || [];
+        this.updateItems.next(this._items);
+    }
+    get items() {
+        return this._items;
+    }
+    /**
+     * Specifies the collapse mode of the Breadcrumb ([see example]({% slug collapse_modes_breadcrumb %})).
+     *
+     * The possible values are:
+     * - `auto` (default)&mdash;items are automatically collapsed based on the width of the Breadcrumb.
+     * - `wrap`&mdash;items are wrapped on multiple rows.
+     * - `none`&mdash;all items are expanded on the same row.
+     *
+     * For more information and example refer to the [Collapse Modes]({% slug collapse_modes_breadcrumb %}) article.
+     */
+    set collapseMode(mode) {
+        if (isDevMode() && ['auto', 'wrap', 'none'].indexOf(mode) < 0) {
+            throw new Error('Invalid collapse mode. Allowed values are "auto", "wrap" or "none". \nFor more details see https://www.telerik.com/kendo-angular-ui/components/navigation/api/BreadCrumbCollapseMode/');
+        }
+        this._collapseMode = mode || 'auto';
+        this.updateItems.next(this.items);
+    }
+    get collapseMode() {
+        return this._collapseMode;
+    }
+    get wrapMode() {
+        return this.collapseMode === 'wrap';
+    }
+    get getDir() {
+        return this.direction;
+    }
+    ngOnInit() {
+        this.subscriptions.add(this.localization.changes.subscribe(({ rtl }) => (this.direction = rtl ? 'rtl' : 'ltr')));
+    }
+    ngAfterViewInit() {
+        this.attachResizeHandler();
+        this.afterViewInit.next();
+    }
+    ngOnDestroy() {
+        this.subscriptions.unsubscribe();
+    }
+    handleResize() {
+        const autoCollapseCandidates = [
+            ...this.listComponent.renderedItems.toArray().filter(ri => !ri.item.context.isFirst && !ri.item.context.isLast)
+        ];
+        const componentWidth = outerWidth(this.el.nativeElement);
+        const itemsContainerWidth = Math.floor(this.itemsContainers
+            .toArray()
+            .map(el => outerWidth(el.nativeElement))
+            .reduce((acc, curr) => acc + curr, 0));
+        const nextExpandWidth = ([...autoCollapseCandidates].reverse().find(collapsed) || { width: 0 }).width;
+        // // shrink
+        if (componentWidth <= itemsContainerWidth && autoCollapseCandidates.find(expanded)) {
+            collapseFirst(autoCollapseCandidates);
+            // needed by resize sensor
+            this.cdr.detectChanges();
+            return this.handleResize();
+        }
+        // expand
+        if (componentWidth > itemsContainerWidth + nextExpandWidth && autoCollapseCandidates.find(collapsed)) {
+            expandFirst([...autoCollapseCandidates].reverse());
+            // needed by resize sensor
+            this.cdr.detectChanges();
+            return this.handleResize();
+        }
+    }
+    shouldResize() {
+        return isDocumentAvailable() && this.collapseMode === 'auto';
+    }
+    attachResizeHandler() {
+        // resize when:
+        // the component is initialized
+        // the container is resized
+        // items are added/removed
+        this.subscriptions.add(merge(this.resizeSensor.resize, this.itemsData$, this.afterViewInit.asObservable())
+            .pipe(filter(() => this.shouldResize()))
+            .subscribe(() => {
+            this.zone.runOutsideAngular(() => setTimeout(() => {
+                this.zone.run(() => {
+                    if (this.listComponent) {
+                        this.handleResize();
+                        this.resizeSensor.acceptSize();
+                    }
+                });
+            }));
+        }));
+    }
+}
+BreadCrumbComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", 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: "13.3.11", 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: "13.3.11", 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
+            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>
+    `
+                }]
+        }], 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$2 = [
+    BreadCrumbItemTemplateDirective
+];
+const exportedModules$1 = [
+    BreadCrumbComponent,
+    BreadCrumbItemComponent,
+    BreadCrumbListComponent,
+    ...templateDirectives$2
+];
+const declarations$2 = [
+    ...exportedModules$1,
+    BreadCrumbSeparatorDirective
+];
+/**
+ * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
+ * definition for the BreadCrumb component.
+ * @example
+ *
+ * ```ts-no-run
+ * // Import the BreadCrumb module
+ * import { BreadCrumbModule } from '@progress/kendo-angular-navigation';
+ *
+ * // The browser platform with a compiler
+ * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+ * import { BrowserModule } from '@angular/platform-browser';
+ *
+ * import { NgModule } from '@angular/core';
+ *
+ * // Import the app component
+ * import { AppComponent } from './app.component';
+ *
+ * // Define the app module
+ * _@NgModule({
+ *     declarations: [AppComponent], // declare app component
+ *     imports:      [BrowserModule, BreadCrumbModule], // import BreadCrumb module
+ *     bootstrap:    [AppComponent]
+ * })
+ * export class AppModule {}
+ *
+ * // Compile and launch the module
+ * platformBrowserDynamic().bootstrapModule(AppModule);
+ *
+ * ```
+ */
+class BreadCrumbModule {
+}
+BreadCrumbModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BreadCrumbModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+BreadCrumbModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", 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: "13.3.11", ngImport: i0, type: BreadCrumbModule, imports: [[CommonModule, ResizeSensorModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BreadCrumbModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [declarations$2],
+                    exports: [exportedModules$1],
+                    imports: [CommonModule, ResizeSensorModule]
+                }]
+        }] });
+
+/**
+ * @hidden
+ */
+class BottomNavigationItemComponent {
+    get disabledClass() {
+        return this.item.disabled;
+    }
+    get horizontalItemClass() {
+        return this.orientation === 'horizontal';
+    }
+    get verticalItemClass() {
+        return this.orientation === 'vertical';
+    }
+    get label() {
+        return this.item.text ? this.item.text : null;
+    }
+    get tabindex() {
+        return this.item.tabIndex ? this.item.tabIndex : 0;
+    }
+    get selectedClass() {
+        return this.selectedIdx ? this.selectedIdx === this.index : this.item.selected;
+    }
+    get itemIcon() {
+        return this.item.icon || this.item.iconClass ? true : false;
+    }
+    get iconClasses() {
+        const kendoIcon = this.item.icon ? `k-icon k-i-${this.item.icon}` : '';
+        const customIcon = this.item.iconClass ? this.item.iconClass : '';
+        return `${kendoIcon} ${customIcon}`;
+    }
+}
+BottomNavigationItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BottomNavigationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+BottomNavigationItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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-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-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: "13.3.11", ngImport: i0, type: BottomNavigationItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    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>
+        </ng-container>
+        <ng-template *ngIf="itemTemplate"
+            [ngTemplateOutlet]="itemTemplate?.templateRef"
+            [ngTemplateOutletContext]="{ $implicit: item }">
+        </ng-template>
+    `
+                }]
+        }], 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-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-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: "13.3.11", ngImport: i0, type: BottomNavigationItemTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+BottomNavigationItemTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: BottomNavigationItemTemplateDirective, selector: "[kendoBottomNavigationItemTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BottomNavigationItemTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoBottomNavigationItemTemplate]'
+                }]
+        }], ctorParameters: function () {
+        return [{ type: i0.TemplateRef, decorators: [{
+                        type: Optional
+                    }] }];
+    } });
+
+/**
+ * @hidden
+ */
+class PreventableEvent {
+    /**
+     * @hidden
+     */
+    constructor(args) {
+        this.prevented = false;
+        Object.assign(this, args);
+    }
+    /**
+     * Prevents the default action for a specified event.
+     * In this way, the source component suppresses
+     * the built-in behavior that follows the event.
+     */
+    preventDefault() {
+        this.prevented = true;
+    }
+    /**
+     * Returns `true` if the event was prevented
+     * by any of its subscribers.
+     *
+     * @returns `true` if the default action was prevented.
+     * Otherwise, returns `false`.
+     */
+    isDefaultPrevented() {
+        return this.prevented;
+    }
+}
+
+/**
+ * Arguments for the `select` event of the BottomNavigation.
+ */
+class BottomNavigationSelectEvent extends PreventableEvent {
+}
+
+/**
+ * @hidden
+ */
+const BOTTOMNAVIGATION_ITEM_INDEX = 'data-kendo-bottomnavigation-index';
+/**
+ * @hidden
+ */
+const colors = ['primary', 'secondary', 'tertiary', 'info', 'success', 'warning', 'error', 'dark', 'light', 'inverse'];
+
+/**
+ * Represents the [Kendo UI BottomNavigation component for Angular]({% slug overview_bottomnavigation %}).
+ *
+ * @example
+ * ```ts-no-run
+ * _@Component({
+ *      selector: 'my-app',
+ *      template: `
+ *          <kendo-bottomnavigation [items]="items"></kendo-bottomnavigation>
+ *      `
+ * })
+ * class AppComponent {
+ *      public items: Array<any> = [
+ *          { text: 'Inbox', icon: 'envelop', selected: true },
+ *          { text: 'Calendar', icon: 'calendar'},
+ *          { text: 'Profile', icon: 'user'}
+ *      ]
+ * }
+ * ```
+ */
+class BottomNavigationComponent {
+    constructor(localization, hostElement, ngZone, changeDetector, renderer) {
+        this.localization = localization;
+        this.hostElement = hostElement;
+        this.ngZone = ngZone;
+        this.changeDetector = changeDetector;
+        this.renderer = renderer;
+        /**
+         * Sets a top border to the BottomNavigation ([see example]({% slug appearance_bottomnavigation %})).
+         *
+         * @default false
+         */
+        this.border = false;
+        /**
+         * Disables the whole BottomNavigation.
+         *
+         * @default false
+         */
+        this.disabled = false;
+        /**
+         * Fires each time an item is selected. This event is preventable.
+         */
+        this.select = new EventEmitter();
+        /**
+         * @hidden
+         */
+        this.hostClass = true;
+        /**
+         * @hidden
+         */
+        this.role = 'navigation';
+        this._fill = 'flat';
+        this._itemFlow = 'vertical';
+        this._positionMode = 'fixed';
+        this._themeColor = 'primary';
+        this._nativeHostElement = this.hostElement.nativeElement;
+        this.subscriptions = new Subscription();
+        this.rtl = false;
+        validatePackage(packageMetadata);
+        this.dynamicRTLSubscription = this.localization.changes.subscribe(({ rtl }) => {
+            this.rtl = rtl;
+            this.direction = this.rtl ? 'rtl' : 'ltr';
+        });
+    }
+    /**
+     * The fill style of the BottomNavigation ([see example]({% slug appearance_bottomnavigation %})).
+     *
+     * * The possible values are:
+     * * (Default) `flat`
+     * * `solid`
+     */
+    set fill(fill) {
+        this.renderer.removeClass(this._nativeHostElement, `k-bottom-nav-${this.fill}`);
+        this._fill = fill === 'solid' ? 'solid' : 'flat';
+        this.renderer.addClass(this._nativeHostElement, `k-bottom-nav-${this._fill}`);
+    }
+    get fill() {
+        return this._fill;
+    }
+    /**
+     * Specifies how the icon and text label are positioned in the BottomNavigation items ([see example]({% slug items_bottomnavigation %}#toc-itemflow)).
+     *
+     * The possible values are:
+     * * (Default) `vertical` - Renders the text below the icon.
+     * * `horizontal` - Renders the icon and the text on the same line.
+     */
+    set itemFlow(itemFlow) {
+        this.renderer.removeClass(this._nativeHostElement, `k-bottom-nav-item-flow-${this.itemFlow}`);
+        this._itemFlow = itemFlow === 'horizontal' ? 'horizontal' : 'vertical';
+        this.renderer.addClass(this._nativeHostElement, `k-bottom-nav-item-flow-${this._itemFlow}`);
+    }
+    get itemFlow() {
+        return this._itemFlow;
+    }
+    /**
+     * Specifies the position and behavior of the BottomNavigation when the page is scrollable ([see example]({% slug positioning_bottomnavigation %})).
+     *
+     * The possible values are:
+     * * (Default) `fixed` - The BottomNavigation always stays at the bottom of the viewport, regardless of the page scroll position.
+     * * `sticky` - Positions the BottomNavigation at the end of the scrollable container.
+     */
+    set positionMode(positionMode) {
+        this.renderer.removeClass(this._nativeHostElement, `k-pos-${this.positionMode}`);
+        this._positionMode = positionMode === 'sticky' ? 'sticky' : 'fixed';
+        this.renderer.addClass(this._nativeHostElement, `k-pos-${this._positionMode}`);
+    }
+    get positionMode() {
+        return this._positionMode;
+    }
+    /**
+     * Specifies the theme color of the BottomNavigation ([see example]({% slug appearance_bottomnavigation %})).
+     *
+     * * The possible values are:
+     * * (Default) `primary` - Applies coloring based on the primary theme color.
+     * * `secondary` - Applies coloring based on the secondary theme color.
+     * * `tertiary` - Applies coloring based on the tertiary theme color.
+     * * `info` - Applies coloring based on the info theme color.
+     * * `success` - Applies coloring based on the success theme color.
+     * * `warning` - Applies coloring based on the warning theme color.
+     * * `error` - Applies coloring based on the error theme color.
+     * * `dark` - Applies coloring based on the dark theme color.
+     * * `light` - Applies coloring based on the light theme color.
+     * * `inverse` - Applies coloring based on the inverted theme color.
+     */
+    set themeColor(themeColor) {
+        const newColor = colors.find(color => color === themeColor);
+        if (newColor) {
+            this.renderer.removeClass(this._nativeHostElement, `k-bottom-nav-${this._themeColor}`);
+            this._themeColor = themeColor;
+            this.renderer.addClass(this._nativeHostElement, `k-bottom-nav-${this._themeColor}`);
+        }
+    }
+    get themeColor() {
+        return this._themeColor;
+    }
+    /**
+     * @hidden
+     */
+    get borderClass() {
+        return this.border;
+    }
+    /**
+     * @hidden
+     */
+    get disabledClass() {
+        return this.disabled;
+    }
+    /**
+     * @hidden
+     */
+    ngOnInit() {
+        this.initDomEvents();
+    }
+    /**
+     * @hidden
+     */
+    ngAfterViewInit() {
+        this.applyClasses();
+    }
+    /**
+     * @hidden
+     */
+    ngOnDestroy() {
+        if (this.dynamicRTLSubscription) {
+            this.dynamicRTLSubscription.unsubscribe();
+        }
+        this.subscriptions.unsubscribe();
+    }
+    /**
+     * @hidden
+     */
+    selectItem(idx, args) {
+        const eventArgs = new BottomNavigationSelectEvent(Object.assign({}, args));
+        this.select.emit(eventArgs);
+        if (!eventArgs.isDefaultPrevented()) {
+            this.selectedIdx = idx;
+        }
+    }
+    applyClasses() {
+        this.renderer.addClass(this._nativeHostElement, `k-bottom-nav-${this.fill}`);
+        this.renderer.addClass(this._nativeHostElement, `k-bottom-nav-item-flow-${this.itemFlow}`);
+        this.renderer.addClass(this._nativeHostElement, `k-pos-${this.positionMode}`);
+        this.renderer.addClass(this._nativeHostElement, `k-bottom-nav-${this.themeColor}`);
+    }
+    initDomEvents() {
+        if (!this.hostElement) {
+            return;
+        }
+        this.ngZone.runOutsideAngular(() => {
+            this.subscriptions.add(this.renderer.listen(this._nativeHostElement, 'click', this.clickHandler.bind(this)));
+            this.subscriptions.add(this.renderer.listen(this._nativeHostElement, 'keydown', this.keyDownHandler.bind(this)));
+        });
+    }
+    clickHandler(e) {
+        const itemIdx = this.getBottomNavigationItemIndex(e.target);
+        const item = this.items[itemIdx];
+        if (!item) {
+            return;
+        }
+        if (item.disabled) {
+            e.preventDefault();
+            return;
+        }
+        const args = {
+            index: itemIdx,
+            item: item,
+            originalEvent: e,
+            sender: this
+        };
+        this.ngZone.run(() => {
+            this.selectItem(itemIdx, args);
+            this.changeDetector.markForCheck();
+        });
+    }
+    keyDownHandler(e) {
+        const isEnterOrSpace = e.keyCode === Keys.Enter || e.keyCode === Keys.Space;
+        if (!isEnterOrSpace) {
+            return;
+        }
+        this.clickHandler(e);
+    }
+    getBottomNavigationItemIndex(target) {
+        const item = closestItem(target, BOTTOMNAVIGATION_ITEM_INDEX, this._nativeHostElement);
+        if (item) {
+            return itemIndex(item, BOTTOMNAVIGATION_ITEM_INDEX);
+        }
+    }
+}
+BottomNavigationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", 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: "13.3.11", 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-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: "13.3.11", 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"
+                role="link"
+                class="k-bottom-nav-item"
+                [disabledComponent]="disabled"
+                [item]="item"
+                [index]="idx"
+                [selectedIdx]="selectedIdx"
+                [itemTemplate]="itemTemplate"
+                [attr.${BOTTOMNAVIGATION_ITEM_INDEX}]="idx"
+                [ngClass]="item.cssClass"
+                [ngStyle]="item.cssStyle"
+                [orientation]="itemFlow">
+            </span>
+        </ng-container>
+    `
+                }]
+        }], 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-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$1 = [BottomNavigationItemComponent, ...exportedComponents];
+/**
+ * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
+ * definition for the BottomNavigation component.
+ * @example
+ *
+ * ```ts-no-run
+ * // Import the BottomNavigation module
+ * import { BottomNavigationModule } from '@progress/kendo-angular-navigation';
+ *
+ * // The browser platform with a compiler
+ * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+ * import { BrowserModule } from '@angular/platform-browser';
+ *
+ * import { NgModule } from '@angular/core';
+ *
+ * // Import the app component
+ * import { AppComponent } from './app.component';
+ *
+ * // Define the app module
+ * _@NgModule({
+ *     declarations: [AppComponent], // declare app component
+ *     imports:      [BrowserModule, BottomNavigationModule], // import BottomNavigation module
+ *     bootstrap:    [AppComponent]
+ * })
+ * export class AppModule {}
+ *
+ * // Compile and launch the module
+ * platformBrowserDynamic().bootstrapModule(AppModule);
+ *
+ * ```
+ */
+class BottomNavigationModule {
+}
+BottomNavigationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BottomNavigationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+BottomNavigationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BottomNavigationModule, declarations: [BottomNavigationItemComponent, BottomNavigationComponent, BottomNavigationItemTemplateDirective], imports: [CommonModule], exports: [BottomNavigationComponent, BottomNavigationItemTemplateDirective] });
+BottomNavigationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BottomNavigationModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BottomNavigationModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [declarations$1],
+                    exports: [exportedComponents],
+                    imports: [CommonModule]
+                }]
+        }] });
+
+/**
+ * Arguments for the `itemClick` event of the ActionSheet.
+ */
+class ActionSheetItemClickEvent {
+}
+
+/**
+ * Represents a template that defines the header content of the ActionSheet. Utilizing the template overrides both the `title` and `subtitle` of the ActionSheet.
+ * To define the template, nest an `<ng-template>` tag
+ * with the `kendoActionSheetHeaderTemplate` directive inside the `<kendo-actionsheet>` tag.
+ */
+class ActionSheetHeaderTemplateDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+}
+ActionSheetHeaderTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ActionSheetHeaderTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+ActionSheetHeaderTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: ActionSheetHeaderTemplateDirective, selector: "[kendoActionSheetHeaderTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ActionSheetHeaderTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoActionSheetHeaderTemplate]'
+                }]
+        }], ctorParameters: function () {
+        return [{ type: i0.TemplateRef, decorators: [{
+                        type: Optional
+                    }] }];
+    } });
+
+/**
+ * Represents a template that defines the item content of the ActionSheet.
+ * To define the template, nest an `<ng-template>` tag
+ * with the `kendoActionSheetItemTemplate` directive inside the `<kendo-actionsheet>` tag.
+ */
+class ActionSheetItemTemplateDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+}
+ActionSheetItemTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ActionSheetItemTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+ActionSheetItemTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: ActionSheetItemTemplateDirective, selector: "[kendoActionSheetItemTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ActionSheetItemTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoActionSheetItemTemplate]'
+                }]
+        }], ctorParameters: function () {
+        return [{ type: i0.TemplateRef, decorators: [{
+                        type: Optional
+                    }] }];
+    } });
+
+/**
+ * Represents a template that defines the items list content of the ActionSheet.
+ * To define the template, nest an `<ng-template>` tag
+ * with the `kendoActionSheetContentTemplate` directive inside the `<kendo-actionsheet>` tag.
+ */
+class ActionSheetContentTemplateDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+}
+ActionSheetContentTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ActionSheetContentTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+ActionSheetContentTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: ActionSheetContentTemplateDirective, selector: "[kendoActionSheetContentTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ActionSheetContentTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoActionSheetContentTemplate]'
+                }]
+        }], ctorParameters: function () {
+        return [{ type: i0.TemplateRef, decorators: [{
+                        type: Optional
+                    }] }];
+    } });
+
+/**
+ * Represents a template that defines the footer of the ActionSheet.
+ * To define the template, nest an `<ng-template>` tag
+ * with the `kendoActionSheetFooterTemplate` directive inside the `<kendo-actionsheet>` tag.
+ */
+class ActionSheetFooterTemplateDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+}
+ActionSheetFooterTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ActionSheetFooterTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+ActionSheetFooterTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: ActionSheetFooterTemplateDirective, selector: "[kendoActionSheetFooterTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ActionSheetFooterTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoActionSheetFooterTemplate]'
+                }]
+        }], ctorParameters: function () {
+        return [{ type: i0.TemplateRef, decorators: [{
+                        type: Optional
+                    }] }];
+    } });
+
+/**
+ * @hidden
+ */
+class ActionSheetItemComponent {
+    constructor() {
+        this.pointerClass = true;
+    }
+    manageIconClasses(item) {
+        const classes = ['k-actionsheet-item-icon'];
+        if (item.icon) {
+            classes.push(`k-icon k-i-${item.icon}`);
+        }
+        if (item.iconClass) {
+            classes.push(`${item.iconClass}`);
+        }
+        const isHexColor = isPresent(item.iconColor) && hexColorRegex.test(item.iconColor);
+        const isThemeColor = isPresent(item.iconColor) && item.iconColor !== '' && !isHexColor;
+        if (isThemeColor) {
+            classes.push(`k-text-${item.iconColor}`);
+        }
+        return classes.join(' ');
+    }
+    manageIconStyles(item) {
+        const isHexColor = isPresent(item.iconColor) && hexColorRegex.test(item.iconColor);
+        const isSizeSet = isPresent(item.iconSize) && item.iconSize !== '';
+        const styles = {};
+        if (isHexColor) {
+            styles.color = item.iconColor;
+        }
+        if (isSizeSet) {
+            styles.fontSize = item.iconSize;
+        }
+        return styles;
+    }
+}
+ActionSheetItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ActionSheetItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ActionSheetItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ActionSheetItemComponent, selector: "[kendoActionSheetItem]", inputs: { itemTemplate: "itemTemplate", item: "item" }, host: { properties: { "class.k-cursor-pointer": "this.pointerClass" } }, ngImport: i0, template: `
+        <ng-template *ngIf="itemTemplate; else defaultTemplate"
+            [ngTemplateOutlet]="itemTemplate"
+            [ngTemplateOutletContext]="{
+                $implicit: item
+            }">
+        </ng-template>
+        <ng-template #defaultTemplate>
+            <span class="k-actionsheet-action">
+                <span *ngIf="item.icon || item.iconClass" class="k-icon-wrap">
+                    <span
+                        [class]="manageIconClasses(item)"
+                        [style]="manageIconStyles(item)">
+                    </span>
+                </span>
+                <span *ngIf="item.title || item.description" class="k-actionsheet-item-text">
+                    <span *ngIf="item.title" class="k-actionsheet-item-title">{{item.title}}</span>
+                    <span *ngIf="item.description" class="k-actionsheet-item-description">{{item.description}}</span>
+                </span>
+            </span>
+        </ng-template>
+    `, isInline: true, directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ActionSheetItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: '[kendoActionSheetItem]',
+                    template: `
+        <ng-template *ngIf="itemTemplate; else defaultTemplate"
+            [ngTemplateOutlet]="itemTemplate"
+            [ngTemplateOutletContext]="{
+                $implicit: item
+            }">
+        </ng-template>
+        <ng-template #defaultTemplate>
+            <span class="k-actionsheet-action">
+                <span *ngIf="item.icon || item.iconClass" class="k-icon-wrap">
+                    <span
+                        [class]="manageIconClasses(item)"
+                        [style]="manageIconStyles(item)">
+                    </span>
+                </span>
+                <span *ngIf="item.title || item.description" class="k-actionsheet-item-text">
+                    <span *ngIf="item.title" class="k-actionsheet-item-title">{{item.title}}</span>
+                    <span *ngIf="item.description" class="k-actionsheet-item-description">{{item.description}}</span>
+                </span>
+            </span>
+        </ng-template>
+    `
+                }]
+        }], propDecorators: { itemTemplate: [{
+                type: Input
+            }], item: [{
+                type: Input
+            }], pointerClass: [{
+                type: HostBinding,
+                args: ['class.k-cursor-pointer']
+            }] } });
+
+/**
+ * @hidden
+ */
+class ActionSheetListComponent {
+    constructor(renderer, ngZone, element) {
+        this.renderer = renderer;
+        this.ngZone = ngZone;
+        this.element = element;
+        this.groupItems = [];
+        this.allItems = [];
+        this.itemClick = new EventEmitter();
+        this.subscriptions = new Subscription();
+    }
+    ngAfterViewInit() {
+        this.initDomEvents();
+    }
+    ngOnDestroy() {
+        this.subscriptions.unsubscribe();
+    }
+    initDomEvents() {
+        if (!this.element) {
+            return;
+        }
+        this.ngZone.runOutsideAngular(() => {
+            const nativeElement = this.element.nativeElement;
+            this.subscriptions.add(this.renderer.listen(nativeElement, 'click', this.clickHandler.bind(this)));
+        });
+    }
+    clickHandler(e) {
+        const itemIndex = getActionSheetItemIndex(e.target, ACTIONSHEET_ITEM_INDEX_ATTRIBUTE, this.element.nativeElement);
+        const item = this.allItems[itemIndex];
+        if (!item) {
+            return;
+        }
+        if (item.disabled) {
+            e.preventDefault();
+            return;
+        }
+        this.ngZone.run(() => {
+            this.itemClick.emit({ item, originalEvent: e });
+        });
+    }
+    setAttrIndex(item) {
+        return this.allItems.indexOf(item);
+    }
+}
+ActionSheetListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ActionSheetListComponent, deps: [{ token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+ActionSheetListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ActionSheetListComponent, selector: "[kendoActionSheetList]", inputs: { groupItems: "groupItems", allItems: "allItems", itemTemplate: "itemTemplate" }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: "\n            <span *ngFor=\"let item of groupItems\" kendoActionSheetItem\n                tabindex=\"0\"\n                role=\"button\"\n                [attr.aria-disabled]=\"item.disabled\"\n                [class.k-actionsheet-item]=\"true\"\n                [attr.kendo-actionsheet-item-index]=\"setAttrIndex(item)\"\n                [class.k-disabled]=\"item.disabled\"\n                [ngClass]=\"item.cssClass\"\n                [ngStyle]=\"item.cssStyle\"\n                [itemTemplate]=\"itemTemplate\"\n                [item]=\"item\">\n            </span>\n    ", isInline: true, components: [{ type: ActionSheetItemComponent, selector: "[kendoActionSheetItem]", inputs: ["itemTemplate", "item"] }], directives: [{ 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: "13.3.11", ngImport: i0, type: ActionSheetListComponent, decorators: [{
+            type: Component,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: '[kendoActionSheetList]',
+                    template: `
+            <span *ngFor="let item of groupItems" kendoActionSheetItem
+                tabindex="0"
+                role="button"
+                [attr.aria-disabled]="item.disabled"
+                [class.k-actionsheet-item]="true"
+                [attr.${ACTIONSHEET_ITEM_INDEX_ATTRIBUTE}]="setAttrIndex(item)"
+                [class.k-disabled]="item.disabled"
+                [ngClass]="item.cssClass"
+                [ngStyle]="item.cssStyle"
+                [itemTemplate]="itemTemplate"
+                [item]="item">
+            </span>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ElementRef }]; }, propDecorators: { groupItems: [{
+                type: Input
+            }], allItems: [{
+                type: Input
+            }], itemTemplate: [{
+                type: Input
+            }], itemClick: [{
+                type: Output
+            }] } });
+
+/**
+ * Represents the [Kendo UI ActionSheet component for Angular]({% slug overview_actionsheet %}).
+ * Used to display a set of choices related to a task the user initiates.
+ */
+class ActionSheetComponent {
+    constructor(element, ngZone, renderer, localizationService) {
+        this.element = element;
+        this.ngZone = ngZone;
+        this.renderer = renderer;
+        this.localizationService = localizationService;
+        /**
+         * @hidden
+         */
+        this.hostClass = true;
+        /**
+         * Fires when an ActionSheet item is clicked.
+         */
+        this.itemClick = new EventEmitter();
+        /**
+         * Fires when the modal overlay is clicked.
+         */
+        this.overlayClick = new EventEmitter();
+        /**
+         * @hidden
+         */
+        this.titleId = null;
+        this.rtl = false;
+        this.domSubs = new Subscription();
+        validatePackage(packageMetadata);
+        this.dynamicRTLSubscription = this.localizationService.changes.subscribe(({ rtl }) => {
+            this.rtl = rtl;
+            this.direction = this.rtl ? 'rtl' : 'ltr';
+        });
+        this.titleId = getId('k-actionsheet-title');
+    }
+    ngAfterViewInit() {
+        this.handleInitialFocus();
+        this.initDomEvents();
+    }
+    ngOnDestroy() {
+        this.domSubs.unsubscribe();
+        if (this.dynamicRTLSubscription) {
+            this.dynamicRTLSubscription.unsubscribe();
+        }
+    }
+    /**
+     * @hidden
+     */
+    get topGroupItems() {
+        var _a;
+        return (_a = this.items) === null || _a === void 0 ? void 0 : _a.filter(item => !item.group || item.group === 'top');
+    }
+    /**
+     * @hidden
+     */
+    get bottomGroupItems() {
+        var _a;
+        return (_a = this.items) === null || _a === void 0 ? void 0 : _a.filter(item => item.group === 'bottom');
+    }
+    /**
+     * @hidden
+     */
+    onItemClick(ev) {
+        this.itemClick.emit(ev);
+    }
+    /**
+     * @hidden
+     */
+    onOverlayClick() {
+        this.overlayClick.emit();
+    }
+    /**
+     * @hidden
+     */
+    get shouldRenderSeparator() {
+        var _a, _b;
+        return ((_a = this.topGroupItems) === null || _a === void 0 ? void 0 : _a.length) > 0 && ((_b = this.bottomGroupItems) === null || _b === void 0 ? void 0 : _b.length) > 0;
+    }
+    initDomEvents() {
+        if (!this.element) {
+            return;
+        }
+        this.ngZone.runOutsideAngular(() => {
+            this.domSubs.add(this.renderer.listen(this.element.nativeElement, 'keydown', (ev) => {
+                this.onKeyDown(ev);
+            }));
+        });
+    }
+    onKeyDown(event) {
+        const target = event.target;
+        if (event.keyCode === Keys.Tab) {
+            this.ngZone.run(() => {
+                this.keepFocusWithinComponent(target, event);
+            });
+        }
+        if (event.keyCode === Keys.Escape) {
+            this.ngZone.run(() => {
+                this.overlayClick.emit();
+            });
+        }
+        if (event.keyCode === Keys.Enter) {
+            this.ngZone.run(() => {
+                this.triggerItemClick(target, event);
+            });
+        }
+    }
+    handleInitialFocus() {
+        const [firstFocusable] = getFirstAndLastFocusable(this.element.nativeElement);
+        if (firstFocusable) {
+            firstFocusable.focus();
+        }
+    }
+    keepFocusWithinComponent(target, event) {
+        const wrapper = this.element.nativeElement;
+        const [firstFocusable, lastFocusable] = getFirstAndLastFocusable(wrapper);
+        const tabAfterLastFocusable = !event.shiftKey && target === lastFocusable;
+        const shiftTabAfterFirstFocusable = event.shiftKey && target === firstFocusable;
+        if (tabAfterLastFocusable) {
+            event.preventDefault();
+            firstFocusable.focus();
+        }
+        if (shiftTabAfterFirstFocusable) {
+            event.preventDefault();
+            lastFocusable.focus();
+        }
+    }
+    triggerItemClick(target, event) {
+        const itemIndex = getActionSheetItemIndex(target, ACTIONSHEET_ITEM_INDEX_ATTRIBUTE, this.element.nativeElement);
+        const item = this.items[itemIndex];
+        if (!item || item.disabled) {
+            return;
+        }
+        this.itemClick.emit({ item, originalEvent: event });
+    }
+}
+ActionSheetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ActionSheetComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+ActionSheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ActionSheetComponent, selector: "kendo-actionsheet", inputs: { title: "title", subtitle: "subtitle", items: "items" }, outputs: { itemClick: "itemClick", overlayClick: "overlayClick" }, host: { properties: { "class.k-actionsheet-container": "this.hostClass", "attr.dir": "this.direction" } }, providers: [
+        LocalizationService,
+        {
+            provide: L10N_PREFIX,
+            useValue: 'kendo.actionsheet.component'
+        }
+    ], queries: [{ propertyName: "headerTemplate", first: true, predicate: ActionSheetHeaderTemplateDirective, descendants: true }, { propertyName: "contentTemplate", first: true, predicate: ActionSheetContentTemplateDirective, descendants: true }, { propertyName: "itemTemplate", first: true, predicate: ActionSheetItemTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: ActionSheetFooterTemplateDirective, descendants: true }], exportAs: ["kendoActionSheet"], ngImport: i0, template: `
+        <div class="k-overlay" (click)="onOverlayClick()"></div>
+        <div class="k-animation-container">
+            <div class="k-child-animation-container" [style]="'bottom: 0px; width: 100%;'">
+                <div class="k-actionsheet k-actionsheet-bottom"
+                    [style]="'--kendo-actionsheet-height: auto; --kendo-actionsheet-max-height: none;'"
+                    role="dialog"
+                    aria-modal="true"
+                    [attr.aria-labelledby]="titleId">
+
+                    <div *ngIf="title || headerTemplate" class="k-actionsheet-titlebar">
+                        <div class="k-actionsheet-titlebar-group k-hbox">
+                            <div class="k-actionsheet-title" [id]="titleId">
+                                <ng-template *ngIf="headerTemplate; else defaultTemplate"
+                                    [ngTemplateOutlet]="headerTemplate?.templateRef">
+                                </ng-template>
+                                <ng-template #defaultTemplate>
+                                    <div *ngIf="title" class="k-text-center">{{title}}</div>
+                                    <div *ngIf="subtitle" class="k-actionsheet-subtitle k-text-center">{{subtitle}}</div>
+                                </ng-template>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div *ngIf="items || contentTemplate" class="k-actionsheet-content">
+                        <ng-template *ngIf="contentTemplate; else defaultContentTemplate"
+                            [ngTemplateOutlet]="contentTemplate?.templateRef">
+                        </ng-template>
+                        <ng-template #defaultContentTemplate>
+                            <div *ngIf="topGroupItems" kendoActionSheetList
+                                class="k-list-ul"
+                                role="group"
+                                [groupItems]="topGroupItems"
+                                [allItems]="items"
+                                [itemTemplate]="itemTemplate?.templateRef"
+                                (itemClick)="onItemClick($event)">
+                            </div>
+    
+                            <hr *ngIf="shouldRenderSeparator" class="k-hr"/>
+    
+                            <div *ngIf="bottomGroupItems" kendoActionSheetList
+                                class="k-list-ul"
+                                role="group"
+                                [groupItems]="bottomGroupItems"
+                                [allItems]="items"
+                                [itemTemplate]="itemTemplate?.templateRef"
+                                (itemClick)="onItemClick($event)">
+                            </div>
+                        </ng-template>
+                    </div>
+                    <div  *ngIf="footerTemplate" class="k-actionsheet-footer">
+                        <ng-template
+                            [ngTemplateOutlet]="footerTemplate?.templateRef">
+                        </ng-template>
+                    </div>
+                </div>
+            </div>
+        </div>
+    `, isInline: true, components: [{ type: ActionSheetListComponent, selector: "[kendoActionSheetList]", inputs: ["groupItems", "allItems", "itemTemplate"], outputs: ["itemClick"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ActionSheetComponent, decorators: [{
+            type: Component,
+            args: [{
+                    exportAs: 'kendoActionSheet',
+                    selector: 'kendo-actionsheet',
+                    template: `
+        <div class="k-overlay" (click)="onOverlayClick()"></div>
+        <div class="k-animation-container">
+            <div class="k-child-animation-container" [style]="'bottom: 0px; width: 100%;'">
+                <div class="k-actionsheet k-actionsheet-bottom"
+                    [style]="'--kendo-actionsheet-height: auto; --kendo-actionsheet-max-height: none;'"
+                    role="dialog"
+                    aria-modal="true"
+                    [attr.aria-labelledby]="titleId">
+
+                    <div *ngIf="title || headerTemplate" class="k-actionsheet-titlebar">
+                        <div class="k-actionsheet-titlebar-group k-hbox">
+                            <div class="k-actionsheet-title" [id]="titleId">
+                                <ng-template *ngIf="headerTemplate; else defaultTemplate"
+                                    [ngTemplateOutlet]="headerTemplate?.templateRef">
+                                </ng-template>
+                                <ng-template #defaultTemplate>
+                                    <div *ngIf="title" class="k-text-center">{{title}}</div>
+                                    <div *ngIf="subtitle" class="k-actionsheet-subtitle k-text-center">{{subtitle}}</div>
+                                </ng-template>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div *ngIf="items || contentTemplate" class="k-actionsheet-content">
+                        <ng-template *ngIf="contentTemplate; else defaultContentTemplate"
+                            [ngTemplateOutlet]="contentTemplate?.templateRef">
+                        </ng-template>
+                        <ng-template #defaultContentTemplate>
+                            <div *ngIf="topGroupItems" kendoActionSheetList
+                                class="k-list-ul"
+                                role="group"
+                                [groupItems]="topGroupItems"
+                                [allItems]="items"
+                                [itemTemplate]="itemTemplate?.templateRef"
+                                (itemClick)="onItemClick($event)">
+                            </div>
+    
+                            <hr *ngIf="shouldRenderSeparator" class="k-hr"/>
+    
+                            <div *ngIf="bottomGroupItems" kendoActionSheetList
+                                class="k-list-ul"
+                                role="group"
+                                [groupItems]="bottomGroupItems"
+                                [allItems]="items"
+                                [itemTemplate]="itemTemplate?.templateRef"
+                                (itemClick)="onItemClick($event)">
+                            </div>
+                        </ng-template>
+                    </div>
+                    <div  *ngIf="footerTemplate" class="k-actionsheet-footer">
+                        <ng-template
+                            [ngTemplateOutlet]="footerTemplate?.templateRef">
+                        </ng-template>
+                    </div>
+                </div>
+            </div>
+        </div>
+    `,
+                    providers: [
+                        LocalizationService,
+                        {
+                            provide: L10N_PREFIX,
+                            useValue: 'kendo.actionsheet.component'
+                        }
+                    ]
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i1.LocalizationService }]; }, propDecorators: { hostClass: [{
+                type: HostBinding,
+                args: ['class.k-actionsheet-container']
+            }], direction: [{
+                type: HostBinding,
+                args: ['attr.dir']
+            }], title: [{
+                type: Input
+            }], subtitle: [{
+                type: Input
+            }], items: [{
+                type: Input
+            }], itemClick: [{
+                type: Output
+            }], overlayClick: [{
+                type: Output
+            }], headerTemplate: [{
+                type: ContentChild,
+                args: [ActionSheetHeaderTemplateDirective]
+            }], contentTemplate: [{
+                type: ContentChild,
+                args: [ActionSheetContentTemplateDirective]
+            }], itemTemplate: [{
+                type: ContentChild,
+                args: [ActionSheetItemTemplateDirective]
+            }], footerTemplate: [{
+                type: ContentChild,
+                args: [ActionSheetFooterTemplateDirective]
+            }] } });
+
+const templateDirectives = [
+    ActionSheetHeaderTemplateDirective,
+    ActionSheetItemTemplateDirective,
+    ActionSheetContentTemplateDirective,
+    ActionSheetFooterTemplateDirective
+];
+const exportedModules = [
+    ActionSheetComponent,
+    ...templateDirectives
+];
+const declarations = [
+    ActionSheetItemComponent,
+    ActionSheetListComponent,
+    ...exportedModules
+];
+/**
+ * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
+ * definition for the ActionSheet component.
+ *
+ * * @example
+ *
+ * ```ts-no-run
+ * // Import the ActionSheet module
+ * import { ActionSheetModule } from '@progress/kendo-angular-navigation';
+ *
+ * // The browser platform with a compiler
+ * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+ * import { BrowserModule } from '@angular/platform-browser';
+ *
+ * import { NgModule } from '@angular/core';
+ *
+ * // Import the app component
+ * import { AppComponent } from './app.component';
+ *
+ * // Define the app module
+ * _@NgModule({
+ *     declarations: [AppComponent], // declare app component
+ *     imports:      [BrowserModule, ActionSheetModule], // import ActionSheet module
+ *     bootstrap:    [AppComponent]
+ * })
+ * export class AppModule {}
+ *
+ * // Compile and launch the module
+ * platformBrowserDynamic().bootstrapModule(AppModule);
+ *
+ * ```
+ */
+class ActionSheetModule {
+}
+ActionSheetModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ActionSheetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ActionSheetModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ActionSheetModule, declarations: [ActionSheetItemComponent,
+        ActionSheetListComponent, ActionSheetComponent, ActionSheetHeaderTemplateDirective,
+        ActionSheetItemTemplateDirective,
+        ActionSheetContentTemplateDirective,
+        ActionSheetFooterTemplateDirective], imports: [CommonModule], exports: [ActionSheetComponent, ActionSheetHeaderTemplateDirective,
+        ActionSheetItemTemplateDirective,
+        ActionSheetContentTemplateDirective,
+        ActionSheetFooterTemplateDirective] });
+ActionSheetModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ActionSheetModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ActionSheetModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [declarations],
+                    exports: [exportedModules],
+                    imports: [CommonModule]
+                }]
+        }] });
+
+/**
+ * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
+ * definition for the Navigation components.
+ *
+ * @example
+ *
+ * ```ts-no-run
+ * // Import the Navigation module
+ * import { NavigationModule } from '@progress/kendo-angular-navigation';
+ *
+ * // The browser platform with a compiler
+ * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+ *
+ * import { NgModule } from '@angular/core';
+ *
+ * // Import the app component
+ * import { AppComponent } from './app.component';
+ *
+ * // Define the app module
+ * _@NgModule({
+ *     declarations: [AppComponent], // declare app component
+ *     imports:      [BrowserModule, NavigationModule], // import Navigation module
+ *     bootstrap:    [AppComponent]
+ * })
+ * export class AppModule {}
+ *
+ * // Compile and launch the module
+ * platformBrowserDynamic().bootstrapModule(AppModule);
+ *
+ * ```
+ */
+class NavigationModule {
+}
+NavigationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavigationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NavigationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavigationModule, exports: [AppBarModule,
+        BreadCrumbModule,
+        BottomNavigationModule,
+        ActionSheetModule] });
+NavigationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavigationModule, imports: [AppBarModule,
+        BreadCrumbModule,
+        BottomNavigationModule,
+        ActionSheetModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavigationModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [
+                        AppBarModule,
+                        BreadCrumbModule,
+                        BottomNavigationModule,
+                        ActionSheetModule
+                    ]
+                }]
+        }] });
+
+// AppBar exports
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ActionSheetComponent, ActionSheetContentTemplateDirective, ActionSheetFooterTemplateDirective, ActionSheetHeaderTemplateDirective, ActionSheetItemClickEvent, ActionSheetItemTemplateDirective, ActionSheetModule, AppBarComponent, AppBarModule, AppBarSectionComponent, AppBarSpacerComponent, BottomNavigationComponent, BottomNavigationItemTemplateDirective, BottomNavigationModule, BottomNavigationSelectEvent, BreadCrumbComponent, BreadCrumbItemComponent, BreadCrumbItemTemplateDirective, BreadCrumbListComponent, BreadCrumbModule, NavigationModule };
+