@progress/kendo-angular-navigation 17.0.0-develop.4 → 17.0.0-develop.41

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

@@ -1,2613 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2024 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, Directive, Optional, EventEmitter, Output, ViewChild, ContentChild, ViewChildren, isDevMode, ElementRef, NgModule } 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 { focusableSelector, closestInScope as closestInScope$1, isPresent as isPresent$1, isDocumentAvailable, Keys, ResizeSensorComponent, ResizeBatchService } from '@progress/kendo-angular-common';
-import { NgIf, NgTemplateOutlet, NgFor, NgClass, NgStyle, AsyncPipe } from '@angular/common';
-import { Subscription, fromEvent, merge, ReplaySubject, Subject } from 'rxjs';
-import * as i2 from '@angular/animations';
-import { style, animate } from '@angular/animations';
-import { take, filter, map, startWith, share } from 'rxjs/operators';
-import { IconWrapperComponent, IconsService } from '@progress/kendo-angular-icons';
-import { chevronRightIcon, chevronLeftIcon } from '@progress/kendo-svg-icons';
-
-/**
- * @hidden
- */
-const packageMetadata = {
-    name: '@progress/kendo-angular-navigation',
-    productName: 'Kendo UI for Angular',
-    productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1728984996,
-    version: '17.0.0-develop.4',
-    licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
-};
-
-const DEFAULT_THEME_COLOR = 'light';
-const DEFAULT_POSITION = 'top';
-const DEFAULT_POSITION_MODE = 'static';
-/**
- * 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, host, renderer) {
-        this.localizationService = localizationService;
-        this.host = host;
-        this.renderer = renderer;
-        this.hostClass = true;
-        this.rtl = false;
-        this._themeColor = DEFAULT_THEME_COLOR;
-        this._position = DEFAULT_POSITION;
-        this._positionMode = DEFAULT_POSITION_MODE;
-        validatePackage(packageMetadata);
-        this.dynamicRTLSubscription = this.localizationService.changes.subscribe(({ rtl }) => {
-            this.rtl = rtl;
-            this.direction = this.rtl ? 'rtl' : 'ltr';
-        });
-    }
-    /**
-     * 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.
-     *
-     */
-    set position(position) {
-        const newPosition = position ? position : DEFAULT_POSITION;
-        this.handleHostClasses(newPosition, this.position);
-        this._position = newPosition;
-    }
-    get position() {
-        return this._position;
-    }
-    /**
-     * Specifies the positionMode of the AppBar
-     * ([see example](slug:positioning_appbar#toc-position-mode)).
-     *
-     * * 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.
-     */
-    set positionMode(positionMode) {
-        const newPositionMode = positionMode ? positionMode : DEFAULT_POSITION_MODE;
-        this.handleHostClasses(newPositionMode, this.positionMode);
-        this._positionMode = newPositionMode;
-    }
-    get positionMode() {
-        return this._positionMode;
-    }
-    /**
-     * 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.
-     * * `primary`— Applies primary coloring value.
-     *
-     */
-    set themeColor(themeColor) {
-        const newThemeColor = themeColor ? themeColor : DEFAULT_THEME_COLOR;
-        this.handleHostClasses(newThemeColor, this.themeColor);
-        this._themeColor = newThemeColor;
-    }
-    get themeColor() {
-        return this._themeColor;
-    }
-    ngAfterViewInit() {
-        const stylingOptions = ['position', 'positionMode', 'themeColor'];
-        stylingOptions.forEach(input => {
-            this.handleHostClasses(this[input]);
-        });
-    }
-    ngOnDestroy() {
-        if (this.dynamicRTLSubscription) {
-            this.dynamicRTLSubscription.unsubscribe();
-        }
-    }
-    handleHostClasses(newValue, previousValue) {
-        const elem = this.host.nativeElement;
-        if (previousValue && newValue === previousValue) {
-            return;
-        }
-        if (previousValue) {
-            this.renderer.removeClass(elem, `k-appbar-${previousValue}`);
-        }
-        if (newValue) {
-            this.renderer.addClass(elem, `k-appbar-${newValue}`);
-        }
-    }
-}
-AppBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AppBarComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-AppBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: AppBarComponent, isStandalone: true, selector: "kendo-appbar", inputs: { position: "position", positionMode: "positionMode", themeColor: "themeColor" }, host: { properties: { "class.k-appbar": "this.hostClass", "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: "15.2.10", 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'
-                        }
-                    ],
-                    standalone: true
-                }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { hostClass: [{
-                type: HostBinding,
-                args: ['class.k-appbar']
-            }], 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: "15.2.10", ngImport: i0, type: AppBarSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AppBarSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: AppBarSectionComponent, isStandalone: true, 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: "15.2.10", ngImport: i0, type: AppBarSectionComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'kendo-appbar-section',
-                    template: `
-        <ng-content></ng-content>
-    `,
-                    standalone: true
-                }]
-        }], propDecorators: { hostClass: [{
-                type: HostBinding,
-                args: ['class.k-appbar-section']
-            }] } });
-
-/**
- * @hidden
- */
-const isPresent = (value) => value !== null && value !== undefined;
-/**
- * @hidden
- */
-const outerWidth = (element) => {
-    const style = getComputedStyle(element);
-    let width = parseFloat(style.width);
-    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
- */
-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: "15.2.10", ngImport: i0, type: AppBarSpacerComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-AppBarSpacerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: AppBarSpacerComponent, isStandalone: true, selector: "kendo-appbar-spacer", inputs: { width: "width" }, host: { properties: { "class.k-spacer": "this.hostClass", "class.k-spacer-sized": "this.sizedClass" } }, ngImport: i0, template: ``, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AppBarSpacerComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'kendo-appbar-spacer',
-                    template: ``,
-                    standalone: true
-                }]
-        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { hostClass: [{
-                type: HostBinding,
-                args: ['class.k-spacer']
-            }], sizedClass: [{
-                type: HostBinding,
-                args: ['class.k-spacer-sized']
-            }], width: [{
-                type: Input
-            }] } });
-
-/**
- * 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: "15.2.10", ngImport: i0, type: ActionSheetHeaderTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-ActionSheetHeaderTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: ActionSheetHeaderTemplateDirective, isStandalone: true, selector: "[kendoActionSheetHeaderTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ActionSheetHeaderTemplateDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kendoActionSheetHeaderTemplate]',
-                    standalone: true
-                }]
-        }], 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: "15.2.10", ngImport: i0, type: ActionSheetItemTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-ActionSheetItemTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: ActionSheetItemTemplateDirective, isStandalone: true, selector: "[kendoActionSheetItemTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ActionSheetItemTemplateDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kendoActionSheetItemTemplate]',
-                    standalone: true
-                }]
-        }], 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: "15.2.10", ngImport: i0, type: ActionSheetContentTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-ActionSheetContentTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: ActionSheetContentTemplateDirective, isStandalone: true, selector: "[kendoActionSheetContentTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ActionSheetContentTemplateDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kendoActionSheetContentTemplate]',
-                    standalone: true
-                }]
-        }], 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: "15.2.10", ngImport: i0, type: ActionSheetFooterTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-ActionSheetFooterTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: ActionSheetFooterTemplateDirective, isStandalone: true, selector: "[kendoActionSheetFooterTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ActionSheetFooterTemplateDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kendoActionSheetFooterTemplate]',
-                    standalone: true
-                }]
-        }], ctorParameters: function () {
-        return [{ type: i0.TemplateRef, decorators: [{
-                        type: Optional
-                    }] }];
-    } });
-
-/**
- * Represents a template that defines the content of the ActionSheet.
- * To define the template, nest an `<ng-template>` tag
- * with the `kendoActionSheetTemplate` directive inside the `<kendo-actionsheet>` tag.
- */
-class ActionSheetTemplateDirective {
-    constructor(templateRef) {
-        this.templateRef = templateRef;
-    }
-}
-ActionSheetTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ActionSheetTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-ActionSheetTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: ActionSheetTemplateDirective, isStandalone: true, selector: "[kendoActionSheetTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ActionSheetTemplateDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kendoActionSheetTemplate]',
-                    standalone: true
-                }]
-        }], ctorParameters: function () {
-        return [{ type: i0.TemplateRef, decorators: [{
-                        type: Optional
-                    }] }];
-    } });
-
-/**
- * @hidden
- */
-function slideUp(duration, height) {
-    return [
-        style({ overflow: 'hidden', display: 'block', height: 0 }),
-        animate(`${duration}ms ease-in`, style({ height: `${height}` }))
-    ];
-}
-/**
- * @hidden
- */
-function slideDown(duration, height) {
-    return [
-        style({ overflow: 'hidden', height: `${height}` }),
-        animate(`${duration}ms ease-in`, style({ overflow: 'hidden', height: 0 }))
-    ];
-}
-
-/**
- * @hidden
- */
-class ActionSheetItemComponent {
-    constructor() {
-        this.pointerClass = true;
-    }
-    manageIconClasses(item) {
-        const classes = ['k-actionsheet-item-icon'];
-        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: "15.2.10", ngImport: i0, type: ActionSheetItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ActionSheetItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ActionSheetItemComponent, isStandalone: true, 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 || item.svgIcon" class="k-icon-wrap">
-                    <kendo-icon-wrapper
-                        [name]="item.icon"
-                        [customFontClass]="item.iconClass"
-                        [class]="manageIconClasses(item)"
-                        [svgIcon]="item.svgIcon"
-                        [style]="manageIconStyles(item)"
-                    >
-                    </kendo-icon-wrapper>
-                </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, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", 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 || item.svgIcon" class="k-icon-wrap">
-                    <kendo-icon-wrapper
-                        [name]="item.icon"
-                        [customFontClass]="item.iconClass"
-                        [class]="manageIconClasses(item)"
-                        [svgIcon]="item.svgIcon"
-                        [style]="manageIconStyles(item)"
-                    >
-                    </kendo-icon-wrapper>
-                </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>
-    `,
-                    standalone: true,
-                    imports: [NgIf, NgTemplateOutlet, IconWrapperComponent]
-                }]
-        }], 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: "15.2.10", ngImport: i0, type: ActionSheetListComponent, deps: [{ token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-ActionSheetListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ActionSheetListComponent, isStandalone: true, 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, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ActionSheetItemComponent, selector: "[kendoActionSheetItem]", inputs: ["itemTemplate", "item"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", 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>
-    `,
-                    standalone: true,
-                    imports: [NgFor, ActionSheetItemComponent, NgClass, NgStyle]
-                }]
-        }], 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
-            }] } });
-
-const DEFAULT_ANIMATION_CONFIG = { duration: 300 };
-/**
- * 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, builder, cdr) {
-        this.element = element;
-        this.ngZone = ngZone;
-        this.renderer = renderer;
-        this.localizationService = localizationService;
-        this.builder = builder;
-        this.cdr = cdr;
-        /**
-         * Configures the ActionSheet opening and closing animations ([see example]({% slug animations_actionsheet %})).
-         * By default the animations are turned off. The default animations' duration is `300ms`.
-         *
-         * @default true
-         */
-        this.animation = true;
-        /**
-         * Specifies the state of the ActionSheet.
-         *
-         * @default false
-         */
-        this.expanded = false;
-        /**
-         * Sets the `aria-labelledby` attribute of the ActionSheet wrapper element.
-         * Use this option when the built-in header element is replaced through the [`ActionSheetHeaderTemplate`]({% slug api_navigation_actionsheetheadertemplatedirective %})
-         * or [`ActionSheetContentTemplate`]({% slug api_navigation_actionsheetcontenttemplatedirective %}).
-         *
-         */
-        this.titleId = getId('k-actionsheet-title');
-        /**
-         * Fires when the `expanded` property of the component is updated.
-         * Used to provide a two-way binding for the `expanded` property.
-         */
-        this.expandedChange = new EventEmitter();
-        /**
-         * Fires when the ActionSheet is expanded and its animation is complete.
-         */
-        this.expand = new EventEmitter();
-        /**
-         * Fires when the ActionSheet is collapsed and its animation is complete.
-         */
-        this.collapse = new EventEmitter();
-        /**
-         * Fires when an ActionSheet item is clicked.
-         */
-        this.itemClick = new EventEmitter();
-        /**
-         * Fires when the modal overlay is clicked.
-         */
-        this.overlayClick = new EventEmitter();
-        this.rtl = false;
-        this.domSubs = new Subscription();
-        this.animationEnd = new EventEmitter();
-        validatePackage(packageMetadata);
-        this.dynamicRTLSubscription = this.localizationService.changes.subscribe(({ rtl }) => {
-            this.rtl = rtl;
-            this.direction = this.rtl ? 'rtl' : 'ltr';
-        });
-    }
-    /**
-     * @hidden
-     */
-    get hostClass() {
-        return this.expanded;
-    }
-    ngAfterViewInit() {
-        this.initDomEvents();
-        this.setCssVariables();
-    }
-    ngOnChanges(changes) {
-        if (changes['expanded'] && this.expanded) {
-            this.setExpanded(true);
-        }
-    }
-    ngOnDestroy() {
-        this.domSubs.unsubscribe();
-        if (this.dynamicRTLSubscription) {
-            this.dynamicRTLSubscription.unsubscribe();
-        }
-        if (this.player) {
-            this.player.destroy();
-        }
-    }
-    /**
-     * Toggles the visibility of the ActionSheet.
-     *
-     * @param expanded? - Boolean. Specifies if the ActionSheet will be expanded or collapsed.
-     */
-    toggle(expanded) {
-        const previous = this.expanded;
-        const current = isPresent$1(expanded) ? expanded : !previous;
-        if (current === previous) {
-            return;
-        }
-        if (current === true) {
-            this.setExpanded(true);
-        }
-        else if (current === false && !this.animation) {
-            this.setExpanded(false);
-        }
-        if (this.animation) {
-            this.animationEnd.pipe(take(1))
-                .subscribe(() => { this.onAnimationEnd(current); });
-            this.playAnimation(current);
-        }
-        else {
-            this[current ? 'expand' : 'collapse'].emit();
-        }
-    }
-    /**
-     * @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);
-            }));
-        });
-    }
-    setCssVariables() {
-        if (!this.element || !isDocumentAvailable()) {
-            return;
-        }
-        // The following syntax is used as it does not violate CSP compliance
-        this.element.nativeElement.style.setProperty('--kendo-actionsheet-height', 'auto');
-        this.element.nativeElement.style.setProperty('--kendo-actionsheet-max-height', 'none');
-    }
-    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 = isPresent$1(itemIndex) ? this.items[itemIndex] : null;
-        if (!item || item.disabled) {
-            return;
-        }
-        this.itemClick.emit({ item, originalEvent: event });
-    }
-    setExpanded(value) {
-        this.expanded = value;
-        this.expandedChange.emit(value);
-        if (this.expanded) {
-            this.cdr.detectChanges();
-            this.handleInitialFocus();
-        }
-    }
-    onAnimationEnd(currentExpanded) {
-        if (currentExpanded) {
-            this.expand.emit();
-        }
-        else {
-            this.setExpanded(false);
-            this.collapse.emit();
-        }
-    }
-    playAnimation(expanded) {
-        const duration = typeof this.animation !== 'boolean' && this.animation.duration ? this.animation.duration : DEFAULT_ANIMATION_CONFIG.duration;
-        const contentHeight = getComputedStyle(this.childContainer.nativeElement).height;
-        const animation = expanded ? slideUp(duration, contentHeight) : slideDown(duration, contentHeight);
-        const factory = this.builder.build(animation);
-        this.player = factory.create(this.childContainer.nativeElement);
-        this.player.onDone(() => {
-            if (this.player) {
-                this.animationEnd.emit();
-                this.player.destroy();
-                this.player = null;
-            }
-        });
-        this.player.play();
-    }
-}
-ActionSheetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ActionSheetComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i2.AnimationBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-ActionSheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ActionSheetComponent, isStandalone: true, selector: "kendo-actionsheet", inputs: { title: "title", subtitle: "subtitle", items: "items", cssClass: "cssClass", animation: "animation", expanded: "expanded", titleId: "titleId" }, outputs: { expandedChange: "expandedChange", expand: "expand", collapse: "collapse", 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: "actionSheetTemplate", first: true, predicate: ActionSheetTemplateDirective, descendants: true }, { 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 }], viewQueries: [{ propertyName: "childContainer", first: true, predicate: ["childContainer"], descendants: true }], exportAs: ["kendoActionSheet"], usesOnChanges: true, ngImport: i0, template: `
-        <ng-container *ngIf="expanded">
-            <div class="k-overlay" (click)="onOverlayClick()"></div>
-            <div class="k-animation-container k-animation-container-shown">
-                <div #childContainer class="k-child-animation-container" [style]="'bottom: 0px; width: 100%;'">
-                    <div class="k-actionsheet k-actionsheet-bottom"
-                        [ngClass]="cssClass"
-                        role="dialog"
-                        aria-modal="true"
-                        [attr.aria-labelledby]="titleId">
-
-                        <ng-template *ngIf="actionSheetTemplate; else defaultTemplate"
-                            [ngTemplateOutlet]="actionSheetTemplate?.templateRef">
-                        </ng-template>
-
-                        <ng-template #defaultTemplate>
-                            <div *ngIf="title || subtitle || headerTemplate" class="k-actionsheet-titlebar">
-                                <ng-template *ngIf="headerTemplate; else defaultHeaderTemplate"
-                                    [ngTemplateOutlet]="headerTemplate?.templateRef">
-                                </ng-template>
-
-                                <ng-template #defaultHeaderTemplate>
-                                    <div class="k-actionsheet-titlebar-group k-hbox">
-                                        <div class="k-actionsheet-title" [id]="titleId">
-                                            <div *ngIf="title" class="k-text-center">{{title}}</div>
-                                            <div *ngIf="subtitle" class="k-actionsheet-subtitle k-text-center">{{subtitle}}</div>
-                                        </div>
-                                    </div>
-                                </ng-template>
-                            </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>
-                        </ng-template>
-                    </div>
-                </div>
-            </div>
-        </ng-container>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ActionSheetListComponent, selector: "[kendoActionSheetList]", inputs: ["groupItems", "allItems", "itemTemplate"], outputs: ["itemClick"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ActionSheetComponent, decorators: [{
-            type: Component,
-            args: [{
-                    exportAs: 'kendoActionSheet',
-                    selector: 'kendo-actionsheet',
-                    template: `
-        <ng-container *ngIf="expanded">
-            <div class="k-overlay" (click)="onOverlayClick()"></div>
-            <div class="k-animation-container k-animation-container-shown">
-                <div #childContainer class="k-child-animation-container" [style]="'bottom: 0px; width: 100%;'">
-                    <div class="k-actionsheet k-actionsheet-bottom"
-                        [ngClass]="cssClass"
-                        role="dialog"
-                        aria-modal="true"
-                        [attr.aria-labelledby]="titleId">
-
-                        <ng-template *ngIf="actionSheetTemplate; else defaultTemplate"
-                            [ngTemplateOutlet]="actionSheetTemplate?.templateRef">
-                        </ng-template>
-
-                        <ng-template #defaultTemplate>
-                            <div *ngIf="title || subtitle || headerTemplate" class="k-actionsheet-titlebar">
-                                <ng-template *ngIf="headerTemplate; else defaultHeaderTemplate"
-                                    [ngTemplateOutlet]="headerTemplate?.templateRef">
-                                </ng-template>
-
-                                <ng-template #defaultHeaderTemplate>
-                                    <div class="k-actionsheet-titlebar-group k-hbox">
-                                        <div class="k-actionsheet-title" [id]="titleId">
-                                            <div *ngIf="title" class="k-text-center">{{title}}</div>
-                                            <div *ngIf="subtitle" class="k-actionsheet-subtitle k-text-center">{{subtitle}}</div>
-                                        </div>
-                                    </div>
-                                </ng-template>
-                            </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>
-                        </ng-template>
-                    </div>
-                </div>
-            </div>
-        </ng-container>
-    `,
-                    providers: [
-                        LocalizationService,
-                        {
-                            provide: L10N_PREFIX,
-                            useValue: 'kendo.actionsheet.component'
-                        }
-                    ],
-                    standalone: true,
-                    imports: [NgIf, NgClass, NgTemplateOutlet, ActionSheetListComponent]
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i1.LocalizationService }, { type: i2.AnimationBuilder }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { hostClass: [{
-                type: HostBinding,
-                args: ['class.k-actionsheet-container']
-            }], direction: [{
-                type: HostBinding,
-                args: ['attr.dir']
-            }], title: [{
-                type: Input
-            }], subtitle: [{
-                type: Input
-            }], items: [{
-                type: Input
-            }], cssClass: [{
-                type: Input
-            }], animation: [{
-                type: Input
-            }], expanded: [{
-                type: Input
-            }], titleId: [{
-                type: Input
-            }], expandedChange: [{
-                type: Output
-            }], expand: [{
-                type: Output
-            }], collapse: [{
-                type: Output
-            }], itemClick: [{
-                type: Output
-            }], overlayClick: [{
-                type: Output
-            }], childContainer: [{
-                type: ViewChild,
-                args: ['childContainer']
-            }], actionSheetTemplate: [{
-                type: ContentChild,
-                args: [ActionSheetTemplateDirective]
-            }], headerTemplate: [{
-                type: ContentChild,
-                args: [ActionSheetHeaderTemplateDirective]
-            }], contentTemplate: [{
-                type: ContentChild,
-                args: [ActionSheetContentTemplateDirective]
-            }], itemTemplate: [{
-                type: ContentChild,
-                args: [ActionSheetItemTemplateDirective]
-            }], footerTemplate: [{
-                type: ContentChild,
-                args: [ActionSheetFooterTemplateDirective]
-            }] } });
-
-/**
- * @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 {
-}
-
-/**
- * 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: "15.2.10", ngImport: i0, type: BottomNavigationItemTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-BottomNavigationItemTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: BottomNavigationItemTemplateDirective, isStandalone: true, selector: "[kendoBottomNavigationItemTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BottomNavigationItemTemplateDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kendoBottomNavigationItemTemplate]',
-                    standalone: true
-                }]
-        }], ctorParameters: function () {
-        return [{ type: i0.TemplateRef, decorators: [{
-                        type: Optional
-                    }] }];
-    } });
-
-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);
-
-/**
- * @hidden
- */
-const BOTTOMNAVIGATION_ITEM_INDEX = 'data-kendo-bottomnavigation-index';
-/**
- * @hidden
- */
-const colors = ['primary', 'secondary', 'tertiary', 'info', 'success', 'warning', 'error', 'dark', 'light', 'inverse'];
-
-/**
- * @hidden
- */
-class BottomNavigationItemComponent {
-    get disabledClass() {
-        return this.item.disabled;
-    }
-    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 Boolean(this.item.icon || this.item.iconClass || this.item.svgIcon);
-    }
-    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: "15.2.10", ngImport: i0, type: BottomNavigationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BottomNavigationItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BottomNavigationItemComponent, isStandalone: true, 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", "attr.aria-label": "this.label", "attr.tabindex": "this.tabindex", "attr.aria-current": "this.selectedClass", "class.k-selected": "this.selectedClass" } }, ngImport: i0, template: `
-        <ng-container *ngIf="!itemTemplate">
-            <kendo-icon-wrapper *ngIf="itemIcon"
-                innerCssClass="k-bottom-nav-item-icon"
-                size="xlarge"
-                [name]="item.icon"
-                [customFontClass]="item.iconClass"
-                [svgIcon]="item.svgIcon"></kendo-icon-wrapper>
-            <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, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BottomNavigationItemComponent, decorators: [{
-            type: Component,
-            args: [{
-                    // eslint-disable-next-line @angular-eslint/component-selector
-                    selector: '[kendoBottomNavigationItem]',
-                    template: `
-        <ng-container *ngIf="!itemTemplate">
-            <kendo-icon-wrapper *ngIf="itemIcon"
-                innerCssClass="k-bottom-nav-item-icon"
-                size="xlarge"
-                [name]="item.icon"
-                [customFontClass]="item.iconClass"
-                [svgIcon]="item.svgIcon"></kendo-icon-wrapper>
-            <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>
-    `,
-                    standalone: true,
-                    imports: [NgIf, IconWrapperComponent, NgTemplateOutlet]
-                }]
-        }], 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']
-            }], label: [{
-                type: HostBinding,
-                args: ['attr.aria-label']
-            }], tabindex: [{
-                type: HostBinding,
-                args: ['attr.tabindex']
-            }], selectedClass: [{
-                type: HostBinding,
-                args: ['attr.aria-current']
-            }, {
-                type: HostBinding,
-                args: ['class.k-selected']
-            }] } });
-
-/**
- * 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.renderer.removeClass(this._nativeHostElement, `k-bottom-nav-${this.fill}-${this.themeColor}`);
-        this._fill = fill === 'solid' ? 'solid' : 'flat';
-        this.renderer.addClass(this._nativeHostElement, `k-bottom-nav-${this._fill}`);
-        this.renderer.addClass(this._nativeHostElement, `k-bottom-nav-${this._fill}-${this.themeColor}`);
-    }
-    get fill() {
-        return this._fill;
-    }
-    /**
-     * Specifies how the icon and text label are positioned in the BottomNavigation items.
-     *
-     * 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.fill}-${this._themeColor}`);
-            this._themeColor = themeColor;
-            this.renderer.addClass(this._nativeHostElement, `k-bottom-nav-${this.fill}-${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.fill}-${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: "15.2.10", 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: "14.0.0", version: "15.2.10", type: BottomNavigationComponent, isStandalone: true, 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-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, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: BottomNavigationItemComponent, selector: "[kendoBottomNavigationItem]", inputs: ["itemTemplate", "item", "index", "disabledComponent", "selectedIdx", "orientation"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", 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>
-    `,
-                    standalone: true,
-                    imports: [NgIf, NgFor, BottomNavigationItemComponent, NgClass, NgStyle]
-                }]
-        }], 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-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 }]
-            }] } });
-
-/**
- * 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: "15.2.10", ngImport: i0, type: BreadCrumbItemTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-BreadCrumbItemTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: BreadCrumbItemTemplateDirective, isStandalone: true, selector: "[kendoBreadCrumbItemTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BreadCrumbItemTemplateDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kendoBreadCrumbItemTemplate]',
-                    standalone: true
-                }]
-        }], ctorParameters: function () {
-        return [{ type: i0.TemplateRef, decorators: [{
-                        type: Optional
-                    }] }];
-    } });
-
-/**
- * @hidden
- */
-const BREADCRUMB_ITEM_INDEX = 'data-kendo-breadcrumb-index';
-/**
- * @hidden
- */
-const DEFAULT_SIZE = 'medium';
-const SIZES = {
-    small: 'sm',
-    medium: 'md',
-    large: 'lg'
-};
-/**
- * @hidden
- *
- * Returns the styling classes to be added and removed
- */
-const getStylingClasses = (stylingOption, previousValue, newValue) => {
-    switch (stylingOption) {
-        case 'size':
-            return {
-                toRemove: `k-breadcrumb-${SIZES[previousValue]}`,
-                toAdd: newValue !== 'none' ? `k-breadcrumb-${SIZES[newValue]}` : ''
-            };
-        default:
-            break;
-    }
-};
-
-/**
- * @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: "15.2.10", ngImport: i0, type: BreadCrumbItemComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-BreadCrumbItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BreadCrumbItemComponent, isStandalone: true, selector: "[kendoBreadCrumbItem]", inputs: { item: "item", collapseMode: "collapseMode", index: "index", itemTemplate: "itemTemplate" }, host: { properties: { "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-disabled]="disabled"
-                [attr.aria-current]="item.context.isLast ? 'page' : null"
-                role="link"
-            >
-                <img *ngIf="item.data.imageUrl" (load)="onImageLoad()" [src]="item.data.imageUrl" class="k-image" role="presentation" />
-                <kendo-icon-wrapper *ngIf="item.data.icon || item.data.iconClass || item.data.svgIcon"
-                    [name]="item.data.icon"
-                    [customFontClass]="item.data.iconClass"
-                    [svgIcon]="item.data.svgIcon"
-                >
-                </kendo-icon-wrapper>
-                <span class="k-breadcrumb-item-text">{{ item.data.text }}</span>
-            </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, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", 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-disabled]="disabled"
-                [attr.aria-current]="item.context.isLast ? 'page' : null"
-                role="link"
-            >
-                <img *ngIf="item.data.imageUrl" (load)="onImageLoad()" [src]="item.data.imageUrl" class="k-image" role="presentation" />
-                <kendo-icon-wrapper *ngIf="item.data.icon || item.data.iconClass || item.data.svgIcon"
-                    [name]="item.data.icon"
-                    [customFontClass]="item.data.iconClass"
-                    [svgIcon]="item.data.svgIcon"
-                >
-                </kendo-icon-wrapper>
-                <span class="k-breadcrumb-item-text">{{ item.data.text }}</span>
-            </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>
-    `,
-                    standalone: true,
-                    imports: [NgIf, NgTemplateOutlet, NgClass, IconWrapperComponent]
-                }]
-        }], 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-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 DEFAULT_ICON = 'chevron-right';
-const DEFAULT_RTL_ICON = 'chevron-left';
-const DEFAULT_SVG_ICON = chevronRightIcon;
-const DEFAULT_RTL_SVG_ICON = chevronLeftIcon;
-/**
- * @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) {
-        if (isPresent(icon)) {
-            this._icon = icon;
-            this.hasDefaultIcon = false;
-        }
-        else {
-            this._icon = this.direction === 'ltr' ? DEFAULT_ICON : DEFAULT_RTL_ICON;
-            this.hasDefaultIcon = true;
-        }
-    }
-    get icon() {
-        return this._icon;
-    }
-    set svgIcon(svgIcon) {
-        if (isPresent(svgIcon)) {
-            this._svgIcon = svgIcon;
-            this.hasDefaultSvgIcon = false;
-        }
-        else {
-            this._svgIcon = this.direction === 'ltr' ? DEFAULT_SVG_ICON : DEFAULT_RTL_SVG_ICON;
-            this.hasDefaultSvgIcon = true;
-        }
-    }
-    get svgIcon() {
-        return this._svgIcon;
-    }
-    ngOnInit() {
-        this.localizationChangesSubscription = this.localization.changes.subscribe(({ rtl }) => {
-            this.direction = rtl ? 'rtl' : 'ltr';
-            if (this.hasDefaultIcon) {
-                this.icon = undefined;
-            }
-            if (this.hasDefaultSvgIcon) {
-                this.svgIcon = undefined;
-            }
-        });
-    }
-    ngOnDestroy() {
-        this.localizationChangesSubscription.unsubscribe();
-    }
-}
-BreadCrumbSeparatorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BreadCrumbSeparatorDirective, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-BreadCrumbSeparatorDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BreadCrumbSeparatorDirective, isStandalone: true, selector: "[kendoBreadCrumbSeparator]", inputs: { icon: "icon", svgIcon: "svgIcon" }, host: { properties: { "class.k-breadcrumb-delimiter-icon": "this.defaultClasses", "class.k-icon": "this.defaultClasses", "attr.aria-hidden": "this.ariaHidden" } }, ngImport: i0, template: `
-        <kendo-icon-wrapper
-            size='xsmall'
-            [name]="icon"
-            [svgIcon]="svgIcon"
-        >
-        </kendo-icon-wrapper>
-    `, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BreadCrumbSeparatorDirective, decorators: [{
-            type: Component,
-            args: [{
-                    selector: '[kendoBreadCrumbSeparator]',
-                    template: `
-        <kendo-icon-wrapper
-            size='xsmall'
-            [name]="icon"
-            [svgIcon]="svgIcon"
-        >
-        </kendo-icon-wrapper>
-    `,
-                    standalone: true,
-                    imports: [IconWrapperComponent]
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.LocalizationService }]; }, propDecorators: { icon: [{
-                type: Input
-            }], svgIcon: [{
-                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: "15.2.10", ngImport: i0, type: BreadCrumbListComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-BreadCrumbListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BreadCrumbListComponent, isStandalone: true, selector: "[kendoBreadCrumbList]", inputs: { items: "items", itemTemplate: "itemTemplate", collapseMode: "collapseMode", separatorIcon: "separatorIcon", separatorSVGIcon: "separatorSVGIcon" }, 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\" [svgIcon]=\"separatorSVGIcon\" *ngIf=\"collapseMode === 'wrap' && !isFirst\"></span>\n                <span\n                    kendoBreadCrumbSeparator\n                    [icon]=\"separatorIcon\"\n                    [svgIcon]=\"separatorSVGIcon\"\n                    *ngIf=\"collapseMode !== 'wrap' && !isLast && !(item?.context.collapsed && items[i + 1]?.context.collapsed)\"\n                ></span>\n            </li>\n        </ng-container>\n    ", isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: BreadCrumbItemComponent, selector: "[kendoBreadCrumbItem]", inputs: ["item", "collapseMode", "index", "itemTemplate"] }, { kind: "component", type: BreadCrumbSeparatorDirective, selector: "[kendoBreadCrumbSeparator]", inputs: ["icon", "svgIcon"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", 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" [svgIcon]="separatorSVGIcon" *ngIf="collapseMode === 'wrap' && !isFirst"></span>
-                <span
-                    kendoBreadCrumbSeparator
-                    [icon]="separatorIcon"
-                    [svgIcon]="separatorSVGIcon"
-                    *ngIf="collapseMode !== 'wrap' && !isLast && !(item?.context.collapsed && items[i + 1]?.context.collapsed)"
-                ></span>
-            </li>
-        </ng-container>
-    `,
-                    standalone: true,
-                    imports: [NgFor, NgIf, BreadCrumbItemComponent, BreadCrumbSeparatorDirective]
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { items: [{
-                type: Input
-            }], itemTemplate: [{
-                type: Input
-            }], collapseMode: [{
-                type: Input
-            }], separatorIcon: [{
-                type: Input
-            }], separatorSVGIcon: [{
-                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);
-
-/* eslint-disable @typescript-eslint/no-inferrable-types */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/**
- * 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(localization, el, cdr, zone, renderer) {
-        this.localization = localization;
-        this.el = el;
-        this.cdr = cdr;
-        this.zone = zone;
-        this.renderer = renderer;
-        /**
-         * 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.hostAriaLabel = 'Breadcrumb';
-        this._items = [];
-        this._collapseMode = 'auto';
-        this._size = DEFAULT_SIZE;
-        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;
-    }
-    /**
-     * Specifies the padding of all Breadcrumb elements.
-     *
-     * The possible values are:
-     * * `small`
-     * * `medium` (default)
-     * * `large`
-     * * `none`
-     */
-    set size(size) {
-        const newSize = size ? size : DEFAULT_SIZE;
-        this.handleClasses(newSize, 'size');
-        this._size = newSize;
-    }
-    get size() {
-        return this._size;
-    }
-    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')));
-        this.handleClasses(this.size, 'size');
-    }
-    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 = Math.floor(outerWidth(this.el.nativeElement));
-        const itemsContainerWidth = Math.round(this.itemsContainers
-            .toArray()
-            .map(el => outerWidth(el.nativeElement))
-            .reduce((acc, curr) => acc + curr, 0));
-        const nextExpandWidth = Math.ceil(([...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();
-                    }
-                });
-            }));
-        }));
-    }
-    handleClasses(value, input) {
-        const elem = this.el.nativeElement;
-        const classes = getStylingClasses(input, this[input], value);
-        if (classes.toRemove) {
-            this.renderer.removeClass(elem, classes.toRemove);
-        }
-        if (classes.toAdd) {
-            this.renderer.addClass(elem, classes.toAdd);
-        }
-    }
-}
-BreadCrumbComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BreadCrumbComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-BreadCrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BreadCrumbComponent, isStandalone: true, selector: "kendo-breadcrumb", inputs: { items: "items", separatorIcon: "separatorIcon", separatorSVGIcon: "separatorSVGIcon", collapseMode: "collapseMode", size: "size" }, outputs: { itemClick: "itemClick" }, host: { properties: { "class.k-breadcrumb": "this.hostClasses", "class.k-breadcrumb-wrap": "this.wrapMode", "attr.aria-label": "this.hostAriaLabel", "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"
-            [separatorSVGIcon]="separatorSVGIcon"
-            (itemClick)="itemClick.emit($event)"
-        ></ol>
-        <ol
-            #itemsContainer
-            kendoBreadCrumbList
-            class="k-breadcrumb-container"
-            [items]="itemsData$ | async"
-            [itemTemplate]="itemTemplate?.templateRef"
-            [collapseMode]="collapseMode"
-            [separatorIcon]="separatorIcon"
-            [separatorSVGIcon]="separatorSVGIcon"
-            (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, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: BreadCrumbListComponent, selector: "[kendoBreadCrumbList]", inputs: ["items", "itemTemplate", "collapseMode", "separatorIcon", "separatorSVGIcon"], outputs: ["itemClick"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", 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"
-            [separatorSVGIcon]="separatorSVGIcon"
-            (itemClick)="itemClick.emit($event)"
-        ></ol>
-        <ol
-            #itemsContainer
-            kendoBreadCrumbList
-            class="k-breadcrumb-container"
-            [items]="itemsData$ | async"
-            [itemTemplate]="itemTemplate?.templateRef"
-            [collapseMode]="collapseMode"
-            [separatorIcon]="separatorIcon"
-            [separatorSVGIcon]="separatorSVGIcon"
-            (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>
-    `,
-                    standalone: true,
-                    imports: [NgIf, BreadCrumbListComponent, NgClass, ResizeSensorComponent, AsyncPipe]
-                }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.Renderer2 }]; }, propDecorators: { items: [{
-                type: Input
-            }], separatorIcon: [{
-                type: Input
-            }], separatorSVGIcon: [{
-                type: Input
-            }], collapseMode: [{
-                type: Input
-            }], size: [{
-                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]
-            }], hostClasses: [{
-                type: HostBinding,
-                args: ['class.k-breadcrumb']
-            }], wrapMode: [{
-                type: HostBinding,
-                args: ['class.k-breadcrumb-wrap']
-            }], hostAriaLabel: [{
-                type: HostBinding,
-                args: ['attr.aria-label']
-            }], getDir: [{
-                type: HostBinding,
-                args: ['attr.dir']
-            }] } });
-
-/**
-* Utility array that contains all `ActionSheet` related components and directives.
-*/
-const KENDO_ACTIONSHEET = [
-    ActionSheetComponent,
-    ActionSheetHeaderTemplateDirective,
-    ActionSheetItemTemplateDirective,
-    ActionSheetContentTemplateDirective,
-    ActionSheetFooterTemplateDirective,
-    ActionSheetTemplateDirective
-];
-/**
-* Utility array that contains all `AppBar` related components and directives.
-*/
-const KENDO_APPBAR = [
-    AppBarComponent,
-    AppBarSectionComponent,
-    AppBarSpacerComponent
-];
-/**
-* Utility array that contains all `BottomNavigation` related components and directives.
-*/
-const KENDO_BOTTOMNAVIGATION = [
-    BottomNavigationComponent,
-    BottomNavigationItemTemplateDirective
-];
-/**
-* Utility array that contains all `BreadCrumb` related components and directives.
-*/
-const KENDO_BREADCRUMB = [
-    BreadCrumbComponent,
-    BreadCrumbItemTemplateDirective
-];
-/**
-* Utility array that contains all `@progress/kendo-angular-navigation` related components and directives.
-*/
-const KENDO_NAVIGATION = [
-    ...KENDO_ACTIONSHEET,
-    ...KENDO_APPBAR,
-    ...KENDO_BOTTOMNAVIGATION,
-    ...KENDO_BREADCRUMB
-];
-
-// IMPORTANT: NgModule export kept for backwards compatibility
-/**
- * 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: "15.2.10", ngImport: i0, type: AppBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AppBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: AppBarModule, imports: [AppBarComponent, AppBarSectionComponent, AppBarSpacerComponent], exports: [AppBarComponent, AppBarSectionComponent, AppBarSpacerComponent] });
-AppBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AppBarModule, imports: [KENDO_APPBAR] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AppBarModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    exports: [...KENDO_APPBAR],
-                    imports: [...KENDO_APPBAR]
-                }]
-        }] });
-
-// IMPORTANT: NgModule export kept for backwards compatibility
-/**
- * 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: "15.2.10", ngImport: i0, type: NavigationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NavigationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: NavigationModule, imports: [ActionSheetComponent, ActionSheetHeaderTemplateDirective, ActionSheetItemTemplateDirective, ActionSheetContentTemplateDirective, ActionSheetFooterTemplateDirective, ActionSheetTemplateDirective, AppBarComponent, AppBarSectionComponent, AppBarSpacerComponent, BottomNavigationComponent, BottomNavigationItemTemplateDirective, BreadCrumbComponent, BreadCrumbItemTemplateDirective], exports: [ActionSheetComponent, ActionSheetHeaderTemplateDirective, ActionSheetItemTemplateDirective, ActionSheetContentTemplateDirective, ActionSheetFooterTemplateDirective, ActionSheetTemplateDirective, AppBarComponent, AppBarSectionComponent, AppBarSpacerComponent, BottomNavigationComponent, BottomNavigationItemTemplateDirective, BreadCrumbComponent, BreadCrumbItemTemplateDirective] });
-NavigationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NavigationModule, providers: [IconsService, ResizeBatchService], imports: [ActionSheetComponent, AppBarComponent, AppBarSectionComponent, AppBarSpacerComponent, BottomNavigationComponent, BreadCrumbComponent] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NavigationModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [...KENDO_NAVIGATION],
-                    exports: [...KENDO_NAVIGATION],
-                    providers: [IconsService, ResizeBatchService]
-                }]
-        }] });
-
-// IMPORTANT: NgModule export kept for backwards compatibility
-/**
- * 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: "15.2.10", ngImport: i0, type: BreadCrumbModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-BreadCrumbModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: BreadCrumbModule, imports: [BreadCrumbComponent, BreadCrumbItemTemplateDirective], exports: [BreadCrumbComponent, BreadCrumbItemTemplateDirective] });
-BreadCrumbModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BreadCrumbModule, providers: [IconsService, ResizeBatchService], imports: [BreadCrumbComponent] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BreadCrumbModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    exports: [...KENDO_BREADCRUMB],
-                    imports: [...KENDO_BREADCRUMB],
-                    providers: [IconsService, ResizeBatchService]
-                }]
-        }] });
-
-// IMPORTANT: NgModule export kept for backwards compatibility
-/**
- * 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: "15.2.10", ngImport: i0, type: BottomNavigationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-BottomNavigationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: BottomNavigationModule, imports: [BottomNavigationComponent, BottomNavigationItemTemplateDirective], exports: [BottomNavigationComponent, BottomNavigationItemTemplateDirective] });
-BottomNavigationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BottomNavigationModule, providers: [IconsService], imports: [BottomNavigationComponent] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BottomNavigationModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    exports: [...KENDO_BOTTOMNAVIGATION],
-                    imports: [...KENDO_BOTTOMNAVIGATION],
-                    providers: [IconsService]
-                }]
-        }] });
-
-// IMPORTANT: NgModule export kept for backwards compatibility
-/**
- * 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: "15.2.10", ngImport: i0, type: ActionSheetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ActionSheetModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: ActionSheetModule, imports: [ActionSheetComponent, ActionSheetHeaderTemplateDirective, ActionSheetItemTemplateDirective, ActionSheetContentTemplateDirective, ActionSheetFooterTemplateDirective, ActionSheetTemplateDirective], exports: [ActionSheetComponent, ActionSheetHeaderTemplateDirective, ActionSheetItemTemplateDirective, ActionSheetContentTemplateDirective, ActionSheetFooterTemplateDirective, ActionSheetTemplateDirective] });
-ActionSheetModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ActionSheetModule, providers: [IconsService], imports: [ActionSheetComponent] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ActionSheetModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    exports: [...KENDO_ACTIONSHEET],
-                    imports: [...KENDO_ACTIONSHEET],
-                    providers: [IconsService]
-                }]
-        }] });
-
-// AppBar exports
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { ActionSheetComponent, ActionSheetContentTemplateDirective, ActionSheetFooterTemplateDirective, ActionSheetHeaderTemplateDirective, ActionSheetItemClickEvent, ActionSheetItemTemplateDirective, ActionSheetModule, ActionSheetTemplateDirective, AppBarComponent, AppBarModule, AppBarSectionComponent, AppBarSpacerComponent, BottomNavigationComponent, BottomNavigationItemTemplateDirective, BottomNavigationModule, BottomNavigationSelectEvent, BreadCrumbComponent, BreadCrumbItemComponent, BreadCrumbItemTemplateDirective, BreadCrumbListComponent, BreadCrumbModule, KENDO_ACTIONSHEET, KENDO_APPBAR, KENDO_BOTTOMNAVIGATION, KENDO_BREADCRUMB, KENDO_NAVIGATION, NavigationModule };
-