@progress/kendo-angular-navigation 16.5.0 → 16.6.0-develop.1

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

@@ -3,21 +3,18 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
-import { Component, HostBinding, Input, NgModule, Directive, Optional, EventEmitter, Output, ViewChildren, isDevMode, ElementRef, ViewChild, ContentChild } from '@angular/core';
+import { 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 * as i3 from '@progress/kendo-angular-common';
-import { focusableSelector, closestInScope as closestInScope$1, isDocumentAvailable, Keys, ResizeSensorModule, isPresent as isPresent$1 } from '@progress/kendo-angular-common';
-import * as i1$1 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import { fromEvent, merge, ReplaySubject, Subject, Subscription } from 'rxjs';
-import { filter, map, startWith, share, take } from 'rxjs/operators';
-import * as i2 from '@progress/kendo-angular-icons';
-import { IconsModule } from '@progress/kendo-angular-icons';
-import { chevronRightIcon, chevronLeftIcon } from '@progress/kendo-svg-icons';
-import * as i2$1 from '@angular/animations';
+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
@@ -26,8 +23,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-navigation',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1721813984,
-    version: '16.5.0',
+    publishDate: 1721827583,
+    version: '16.6.0-develop.1',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -138,7 +135,7 @@ class AppBarComponent {
     }
 }
 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, selector: "kendo-appbar", inputs: { position: "position", positionMode: "positionMode", themeColor: "themeColor" }, host: { properties: { "class.k-appbar": "this.hostClass", "attr.dir": "this.direction" } }, providers: [
+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,
@@ -161,7 +158,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                             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,
@@ -201,7 +199,7 @@ class AppBarSectionComponent {
     }
 }
 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, selector: "kendo-appbar-section", host: { properties: { "class.k-appbar-section": "this.hostClass" } }, ngImport: i0, template: `
+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: [{
@@ -210,7 +208,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     selector: 'kendo-appbar-section',
                     template: `
         <ng-content></ng-content>
-    `
+    `,
+                    standalone: true
                 }]
         }], propDecorators: { hostClass: [{
                 type: HostBinding,
@@ -321,12 +320,13 @@ class AppBarSpacerComponent {
     }
 }
 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, 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 });
+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: ``
+                    template: ``,
+                    standalone: true
                 }]
         }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { hostClass: [{
                 type: HostBinding,
@@ -338,81 +338,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }] } });
 
-const exportedModules$2 = [
-    AppBarComponent,
-    AppBarSectionComponent,
-    AppBarSpacerComponent
-];
-const declarations$3 = [
-    ...exportedModules$2
-];
 /**
- * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
- * definition for the AppBar component.
- *
- * @example
- *
- * ```ts-no-run
- * // Import the AppBar module
- * import { AppBarModule } from '@progress/kendo-angular-navigation';
- *
- * // The browser platform with a compiler
- * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
- * import { BrowserModule } from '@angular/platform-browser';
- *
- * import { NgModule } from '@angular/core';
- *
- * // Import the app component
- * import { AppComponent } from './app.component';
- *
- * // Define the app module
- * _@NgModule({
- *     declarations: [AppComponent], // declare app component
- *     imports:      [BrowserModule, AppBarModule], // import AppBar module
- *     bootstrap:    [AppComponent]
- * })
- * export class AppModule {}
- *
- * // Compile and launch the module
- * platformBrowserDynamic().bootstrapModule(AppModule);
- *
- * ```
+ * Arguments for the `itemClick` event of the ActionSheet.
  */
-class AppBarModule {
+class ActionSheetItemClickEvent {
 }
-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, declarations: [AppBarComponent,
-        AppBarSectionComponent,
-        AppBarSpacerComponent], imports: [CommonModule], exports: [AppBarComponent,
-        AppBarSectionComponent,
-        AppBarSpacerComponent] });
-AppBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AppBarModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AppBarModule, decorators: [{
-            type: NgModule,
+
+/**
+ * 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: [{
-                    declarations: [declarations$3],
-                    exports: [exportedModules$2],
-                    imports: [CommonModule]
+                    selector: '[kendoActionSheetHeaderTemplate]',
+                    standalone: true
                 }]
-        }] });
+        }], ctorParameters: function () {
+        return [{ type: i0.TemplateRef, decorators: [{
+                        type: Optional
+                    }] }];
+    } });
 
 /**
- * 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.
+ * 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 BreadCrumbItemTemplateDirective {
+class ActionSheetItemTemplateDirective {
     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, selector: "[kendoBreadCrumbItemTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BreadCrumbItemTemplateDirective, decorators: [{
+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: '[kendoBreadCrumbItemTemplate]'
+                    selector: '[kendoActionSheetItemTemplate]',
+                    standalone: true
                 }]
         }], ctorParameters: function () {
         return [{ type: i0.TemplateRef, decorators: [{
@@ -421,776 +393,813 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
     } });
 
 /**
- * @hidden
+ * 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.
  */
-const BREADCRUMB_ITEM_INDEX = 'data-kendo-breadcrumb-index';
+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
  */
-const DEFAULT_SIZE = 'medium';
-const SIZES = {
-    small: 'sm',
-    medium: 'md',
-    large: 'lg'
-};
+function slideUp(duration, height) {
+    return [
+        style({ overflow: 'hidden', display: 'block', height: 0 }),
+        animate(`${duration}ms ease-in`, style({ height: `${height}` }))
+    ];
+}
 /**
  * @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;
-    }
-};
+function slideDown(duration, height) {
+    return [
+        style({ overflow: 'hidden', height: `${height}` }),
+        animate(`${duration}ms ease-in`, style({ overflow: 'hidden', height: 0 }))
+    ];
+}
 
 /**
  * @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);
+class ActionSheetItemComponent {
+    constructor() {
+        this.pointerClass = true;
     }
-    ngAfterViewInit() {
-        if (isDocumentAvailable()) {
-            this.width = outerWidth(this.el.nativeElement);
+    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(' ');
     }
-    onImageLoad() {
-        if (isDocumentAvailable()) {
-            this.width = outerWidth(this.el.nativeElement);
+    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;
     }
 }
-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, 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>
+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-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: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.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: [{
+        <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: '[kendoBreadCrumbItem]',
+                    selector: '[kendoActionSheetItem]',
                     template: `
-        <ng-template #separator>
-            <ng-content select="[kendoBreadCrumbSeparator]"></ng-content>
+        <ng-template *ngIf="itemTemplate; else defaultTemplate"
+            [ngTemplateOutlet]="itemTemplate"
+            [ngTemplateOutletContext]="{
+                $implicit: item
+            }">
         </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>
+        <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
-                *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>
-    `
+        </ng-template>
+    `,
+                    standalone: true,
+                    imports: [NgIf, NgTemplateOutlet, IconWrapperComponent]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { item: [{
-                type: Input
-            }], collapseMode: [{
-                type: Input
-            }], index: [{
+        }], propDecorators: { itemTemplate: [{
                 type: Input
-            }], itemTemplate: [{
+            }], item: [{
                 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: [{
+            }], pointerClass: [{
                 type: HostBinding,
-                args: ['class.k-breadcrumb-last-item']
+                args: ['class.k-cursor-pointer']
             }] } });
 
-const closestInScope = (target, targetAttr, predicate, scope) => {
-    while (target && target !== scope && !predicate(target, targetAttr)) {
-        target = target.parentNode;
-    }
-    if (target !== scope) {
-        return target;
-    }
-};
-const hasItemIndex = (item, indexAttr) => isPresent(item.getAttribute(indexAttr));
-/**
- * @hidden
- */
-const itemIndex = (item, indexAttr) => +item.getAttribute(indexAttr);
-/**
- * @hidden
- */
-const closestItem = (target, targetAttr, scope) => closestInScope(target, targetAttr, hasItemIndex, scope);
-
-const DEFAULT_ICON = 'chevron-right';
-const DEFAULT_RTL_ICON = 'chevron-left';
-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';
+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();
     }
-    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;
-        }
+    ngAfterViewInit() {
+        this.initDomEvents();
     }
-    get icon() {
-        return this._icon;
+    ngOnDestroy() {
+        this.subscriptions.unsubscribe();
     }
-    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;
+    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)));
+        });
     }
-    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;
-            }
+    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 });
         });
     }
-    ngOnDestroy() {
-        this.localizationChangesSubscription.unsubscribe();
+    setAttrIndex(item) {
+        return this.allItems.indexOf(item);
     }
 }
-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, 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: i2.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: [{
+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: [{
-                    selector: '[kendoBreadCrumbSeparator]',
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: '[kendoActionSheetList]',
                     template: `
-        <kendo-icon-wrapper
-            size='xsmall'
-            [name]="icon"
-            [svgIcon]="svgIcon"
-        >
-        </kendo-icon-wrapper>
-    `
+            <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.ElementRef }, { type: i1.LocalizationService }]; }, propDecorators: { icon: [{
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ElementRef }]; }, propDecorators: { groupItems: [{
                 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, 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: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.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>
-    `
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { items: [{
+            }], allItems: [{
                 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 */
+const DEFAULT_ANIMATION_CONFIG = { duration: 300 };
 /**
- * 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);
- *      }
- * }
- * ```
+ * 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 BreadCrumbComponent {
-    constructor(localization, el, cdr, zone, renderer) {
-        this.localization = localization;
-        this.el = el;
-        this.cdr = cdr;
-        this.zone = zone;
+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;
         /**
-         * Fires when a Breadcrumb item is clicked. The event will not be fired by disabled items and the last item.
+         * 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();
-        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';
+        /**
+         * Fires when the modal overlay is clicked.
+         */
+        this.overlayClick = new EventEmitter();
+        this.rtl = false;
+        this.domSubs = new Subscription();
+        this.animationEnd = new EventEmitter();
         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());
+        this.dynamicRTLSubscription = this.localizationService.changes.subscribe(({ rtl }) => {
+            this.rtl = rtl;
+            this.direction = this.rtl ? 'rtl' : 'ltr';
+        });
     }
     /**
-     * The collection of items that will be rendered in the Breadcrumb.
+     * @hidden
      */
-    set items(items) {
-        this._items = items || [];
-        this.updateItems.next(this._items);
+    get hostClass() {
+        return this.expanded;
     }
-    get items() {
-        return this._items;
+    ngAfterViewInit() {
+        this.initDomEvents();
+        this.setCssVariables();
     }
-    /**
-     * 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/');
+    ngOnChanges(changes) {
+        if (changes['expanded'] && this.expanded) {
+            this.setExpanded(true);
         }
-        this._collapseMode = mode || 'auto';
-        this.updateItems.next(this.items);
     }
-    get collapseMode() {
-        return this._collapseMode;
+    ngOnDestroy() {
+        this.domSubs.unsubscribe();
+        if (this.dynamicRTLSubscription) {
+            this.dynamicRTLSubscription.unsubscribe();
+        }
+        if (this.player) {
+            this.player.destroy();
+        }
     }
     /**
-     * Specifies the padding of all Breadcrumb elements.
+     * Toggles the visibility of the ActionSheet.
      *
-     * The possible values are:
-     * * `small`
-     * * `medium` (default)
-     * * `large`
-     * * `none`
+     * @param expanded? - Boolean. Specifies if the ActionSheet will be expanded or collapsed.
      */
-    set size(size) {
-        const newSize = size ? size : DEFAULT_SIZE;
-        this.handleClasses(newSize, 'size');
-        this._size = newSize;
+    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();
+        }
     }
-    get size() {
-        return this._size;
+    /**
+     * @hidden
+     */
+    get topGroupItems() {
+        var _a;
+        return (_a = this.items) === null || _a === void 0 ? void 0 : _a.filter(item => !item.group || item.group === 'top');
     }
-    get wrapMode() {
-        return this.collapseMode === 'wrap';
+    /**
+     * @hidden
+     */
+    get bottomGroupItems() {
+        var _a;
+        return (_a = this.items) === null || _a === void 0 ? void 0 : _a.filter(item => item.group === 'bottom');
     }
-    get getDir() {
-        return this.direction;
+    /**
+     * @hidden
+     */
+    onItemClick(ev) {
+        this.itemClick.emit(ev);
     }
-    ngOnInit() {
-        this.subscriptions.add(this.localization.changes.subscribe(({ rtl }) => (this.direction = rtl ? 'rtl' : 'ltr')));
-        this.handleClasses(this.size, 'size');
+    /**
+     * @hidden
+     */
+    onOverlayClick() {
+        this.overlayClick.emit();
     }
-    ngAfterViewInit() {
-        this.attachResizeHandler();
-        this.afterViewInit.next();
+    /**
+     * @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;
     }
-    ngOnDestroy() {
-        this.subscriptions.unsubscribe();
+    initDomEvents() {
+        if (!this.element) {
+            return;
+        }
+        this.ngZone.runOutsideAngular(() => {
+            this.domSubs.add(this.renderer.listen(this.element.nativeElement, 'keydown', (ev) => {
+                this.onKeyDown(ev);
+            }));
+        });
     }
-    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();
+    setCssVariables() {
+        if (!this.element || !isDocumentAvailable()) {
+            return;
         }
-        // expand
-        if (componentWidth > itemsContainerWidth + nextExpandWidth && autoCollapseCandidates.find(collapsed)) {
-            expandFirst([...autoCollapseCandidates].reverse());
-            // needed by resize sensor
-            this.cdr.detectChanges();
-            return this.handleResize();
+        // 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);
+            });
         }
     }
-    shouldResize() {
-        return isDocumentAvailable() && this.collapseMode === 'auto';
+    handleInitialFocus() {
+        const [firstFocusable] = getFirstAndLastFocusable(this.element.nativeElement);
+        if (firstFocusable) {
+            firstFocusable.focus();
+        }
     }
-    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();
-                    }
-                });
-            }));
-        }));
+    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();
+        }
     }
-    handleClasses(value, input) {
-        const elem = this.el.nativeElement;
-        const classes = getStylingClasses(input, this[input], value);
-        if (classes.toRemove) {
-            this.renderer.removeClass(elem, classes.toRemove);
+    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;
         }
-        if (classes.toAdd) {
-            this.renderer.addClass(elem, classes.toAdd);
+        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();
     }
 }
-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, 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: [
+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.breadcrumb'
+            useValue: 'kendo.actionsheet.component'
         }
-    ], 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: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: BreadCrumbListComponent, selector: "[kendoBreadCrumbList]", inputs: ["items", "itemTemplate", "collapseMode", "separatorIcon", "separatorSVGIcon"], outputs: ["itemClick"] }, { kind: "pipe", type: i1$1.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,
-                        {
+    ], 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.breadcrumb'
+                            useValue: 'kendo.actionsheet.component'
                         }
                     ],
-                    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, NgClass, NgTemplateOutlet, ActionSheetListComponent]
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.Renderer2 }]; }, propDecorators: { items: [{
+        }], 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
-            }], separatorIcon: [{
+            }], subtitle: [{
                 type: Input
-            }], separatorSVGIcon: [{
+            }], items: [{
                 type: Input
-            }], collapseMode: [{
+            }], cssClass: [{
                 type: Input
-            }], size: [{
+            }], animation: [{
+                type: Input
+            }], expanded: [{
                 type: Input
+            }], titleId: [{
+                type: Input
+            }], expandedChange: [{
+                type: Output
+            }], expand: [{
+                type: Output
+            }], collapse: [{
+                type: Output
             }], itemClick: [{
                 type: Output
-            }], resizeSensor: [{
-                type: ViewChild,
-                args: ['resizeSensor', { static: true }]
-            }], itemsContainers: [{
-                type: ViewChildren,
-                args: ['itemsContainer', { read: ElementRef }]
-            }], listComponent: [{
+            }], overlayClick: [{
+                type: Output
+            }], childContainer: [{
                 type: ViewChild,
-                args: [BreadCrumbListComponent, { static: true }]
+                args: ['childContainer']
+            }], actionSheetTemplate: [{
+                type: ContentChild,
+                args: [ActionSheetTemplateDirective]
+            }], headerTemplate: [{
+                type: ContentChild,
+                args: [ActionSheetHeaderTemplateDirective]
+            }], contentTemplate: [{
+                type: ContentChild,
+                args: [ActionSheetContentTemplateDirective]
             }], 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']
+                args: [ActionSheetItemTemplateDirective]
+            }], footerTemplate: [{
+                type: ContentChild,
+                args: [ActionSheetFooterTemplateDirective]
             }] } });
 
-const templateDirectives$2 = [
-    BreadCrumbItemTemplateDirective
-];
-const exportedModules$1 = [
-    BreadCrumbComponent,
-    BreadCrumbItemComponent,
-    BreadCrumbListComponent,
-    ...templateDirectives$2
-];
-const declarations$2 = [
-    ...exportedModules$1,
-    BreadCrumbSeparatorDirective
-];
 /**
- * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
- * definition for the BreadCrumb component.
- * @example
- *
- * ```ts-no-run
- * // Import the BreadCrumb module
- * import { BreadCrumbModule } from '@progress/kendo-angular-navigation';
- *
- * // The browser platform with a compiler
- * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
- * import { BrowserModule } from '@angular/platform-browser';
- *
- * import { NgModule } from '@angular/core';
- *
- * // Import the app component
- * import { AppComponent } from './app.component';
- *
- * // Define the app module
- * _@NgModule({
- *     declarations: [AppComponent], // declare app component
- *     imports:      [BrowserModule, BreadCrumbModule], // import BreadCrumb module
- *     bootstrap:    [AppComponent]
- * })
- * export class AppModule {}
- *
- * // Compile and launch the module
- * platformBrowserDynamic().bootstrapModule(AppModule);
- *
- * ```
+ * @hidden
  */
-class BreadCrumbModule {
+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;
+    }
 }
-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, declarations: [BreadCrumbComponent,
-        BreadCrumbItemComponent,
-        BreadCrumbListComponent, BreadCrumbItemTemplateDirective, BreadCrumbSeparatorDirective], imports: [CommonModule, ResizeSensorModule, IconsModule], exports: [BreadCrumbComponent,
-        BreadCrumbItemComponent,
-        BreadCrumbListComponent, BreadCrumbItemTemplateDirective] });
-BreadCrumbModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BreadCrumbModule, imports: [CommonModule, ResizeSensorModule, IconsModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BreadCrumbModule, decorators: [{
-            type: NgModule,
+
+/**
+ * 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: [{
-                    declarations: [declarations$2],
-                    exports: [exportedModules$1],
-                    imports: [CommonModule, ResizeSensorModule, IconsModule]
+                    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
@@ -1218,7 +1227,7 @@ class BottomNavigationItemComponent {
     }
 }
 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, 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: `
+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"
@@ -1232,7 +1241,7 @@ BottomNavigationItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "1
             [ngTemplateOutlet]="itemTemplate?.templateRef"
             [ngTemplateOutletContext]="{ $implicit: item }">
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
+    `, 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: [{
@@ -1252,7 +1261,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             [ngTemplateOutlet]="itemTemplate?.templateRef"
             [ngTemplateOutletContext]="{ $implicit: item }">
         </ng-template>
-    `
+    `,
+                    standalone: true,
+                    imports: [NgIf, IconWrapperComponent, NgTemplateOutlet]
                 }]
         }], propDecorators: { itemTemplate: [{
                 type: Input
@@ -1286,75 +1297,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 args: ['class.k-selected']
             }] } });
 
-/**
- * Represents a template that defines the item content of the BottomNavigation.
- * To define the template, nest an `<ng-template>` tag
- * with the `kendoBottomNavigationItemTemplate` directive inside the `<kendo-bottomnavigation>` tag ([see example]({% slug templates_bottomnavigation %})).
- */
-class BottomNavigationItemTemplateDirective {
-    constructor(templateRef) {
-        this.templateRef = templateRef;
-    }
-}
-BottomNavigationItemTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "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, selector: "[kendoBottomNavigationItemTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BottomNavigationItemTemplateDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kendoBottomNavigationItemTemplate]'
-                }]
-        }], ctorParameters: function () {
-        return [{ type: i0.TemplateRef, decorators: [{
-                        type: Optional
-                    }] }];
-    } });
-
-/**
- * @hidden
- */
-class PreventableEvent {
-    /**
-     * @hidden
-     */
-    constructor(args) {
-        this.prevented = false;
-        Object.assign(this, args);
-    }
-    /**
-     * Prevents the default action for a specified event.
-     * In this way, the source component suppresses
-     * the built-in behavior that follows the event.
-     */
-    preventDefault() {
-        this.prevented = true;
-    }
-    /**
-     * Returns `true` if the event was prevented
-     * by any of its subscribers.
-     *
-     * @returns `true` if the default action was prevented.
-     * Otherwise, returns `false`.
-     */
-    isDefaultPrevented() {
-        return this.prevented;
-    }
-}
-
-/**
- * Arguments for the `select` event of the BottomNavigation.
- */
-class BottomNavigationSelectEvent extends PreventableEvent {
-}
-
-/**
- * @hidden
- */
-const BOTTOMNAVIGATION_ITEM_INDEX = 'data-kendo-bottomnavigation-index';
-/**
- * @hidden
- */
-const colors = ['primary', 'secondary', 'tertiary', 'info', 'success', 'warning', 'error', 'dark', 'light', 'inverse'];
-
 /**
  * Represents the [Kendo UI BottomNavigation component for Angular]({% slug overview_bottomnavigation %}).
  *
@@ -1586,13 +1528,13 @@ class BottomNavigationComponent {
     }
 }
 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, 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: [
+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: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: BottomNavigationItemComponent, selector: "[kendoBottomNavigationItem]", inputs: ["itemTemplate", "item", "index", "disabledComponent", "selectedIdx", "orientation"] }] });
+    ], 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: [{
@@ -1622,7 +1564,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 [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
@@ -1660,76 +1604,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 args: [BottomNavigationItemTemplateDirective, { static: false }]
             }] } });
 
-const templateDirectives$1 = [BottomNavigationItemTemplateDirective];
-const exportedComponents = [BottomNavigationComponent, ...templateDirectives$1];
-const declarations$1 = [BottomNavigationItemComponent, ...exportedComponents];
 /**
- * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
- * definition for the BottomNavigation component.
- * @example
- *
- * ```ts-no-run
- * // Import the BottomNavigation module
- * import { BottomNavigationModule } from '@progress/kendo-angular-navigation';
- *
- * // The browser platform with a compiler
- * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
- * import { BrowserModule } from '@angular/platform-browser';
- *
- * import { NgModule } from '@angular/core';
- *
- * // Import the app component
- * import { AppComponent } from './app.component';
- *
- * // Define the app module
- * _@NgModule({
- *     declarations: [AppComponent], // declare app component
- *     imports:      [BrowserModule, BottomNavigationModule], // import BottomNavigation module
- *     bootstrap:    [AppComponent]
- * })
- * export class AppModule {}
- *
- * // Compile and launch the module
- * platformBrowserDynamic().bootstrapModule(AppModule);
+ * 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.
  *
- * ```
- */
-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, declarations: [BottomNavigationItemComponent, BottomNavigationComponent, BottomNavigationItemTemplateDirective], imports: [CommonModule, IconsModule], exports: [BottomNavigationComponent, BottomNavigationItemTemplateDirective] });
-BottomNavigationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BottomNavigationModule, imports: [CommonModule, IconsModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BottomNavigationModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [declarations$1],
-                    exports: [exportedComponents],
-                    imports: [CommonModule, IconsModule]
-                }]
-        }] });
-
-/**
- * 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.
+ * For more information and example refer to the [Templates]({% slug templates_breadcrumb %}) article.
  */
-class ActionSheetHeaderTemplateDirective {
+class BreadCrumbItemTemplateDirective {
     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, selector: "[kendoActionSheetHeaderTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ActionSheetHeaderTemplateDirective, decorators: [{
+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: '[kendoActionSheetHeaderTemplate]'
+                    selector: '[kendoBreadCrumbItemTemplate]',
+                    standalone: true
                 }]
         }], ctorParameters: function () {
         return [{ type: i0.TemplateRef, decorators: [{
@@ -1738,765 +1630,758 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
     } });
 
 /**
- * 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.
+ * @hidden
  */
-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, selector: "[kendoActionSheetItemTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ActionSheetItemTemplateDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kendoActionSheetItemTemplate]'
-                }]
-        }], ctorParameters: function () {
-        return [{ type: i0.TemplateRef, decorators: [{
-                        type: Optional
-                    }] }];
-    } });
-
+const BREADCRUMB_ITEM_INDEX = 'data-kendo-breadcrumb-index';
 /**
- * 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.
+ * @hidden
  */
-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, selector: "[kendoActionSheetContentTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ActionSheetContentTemplateDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kendoActionSheetContentTemplate]'
-                }]
-        }], ctorParameters: function () {
-        return [{ type: i0.TemplateRef, decorators: [{
-                        type: Optional
-                    }] }];
-    } });
-
-/**
- * Represents a template that defines the footer of the ActionSheet.
- * To define the template, nest an `<ng-template>` tag
- * with the `kendoActionSheetFooterTemplate` directive inside the `<kendo-actionsheet>` tag.
- */
-class ActionSheetFooterTemplateDirective {
-    constructor(templateRef) {
-        this.templateRef = templateRef;
-    }
-}
-ActionSheetFooterTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "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, selector: "[kendoActionSheetFooterTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ActionSheetFooterTemplateDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kendoActionSheetFooterTemplate]'
-                }]
-        }], 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, selector: "[kendoActionSheetTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ActionSheetTemplateDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kendoActionSheetTemplate]'
-                }]
-        }], 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}` }))
-    ];
-}
+const DEFAULT_SIZE = 'medium';
+const SIZES = {
+    small: 'sm',
+    medium: 'md',
+    large: 'lg'
+};
 /**
  * @hidden
+ *
+ * Returns the styling classes to be added and removed
  */
-function slideDown(duration, height) {
-    return [
-        style({ overflow: 'hidden', height: `${height}` }),
-        animate(`${duration}ms ease-in`, style({ overflow: 'hidden', height: 0 }))
-    ];
-}
+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 ActionSheetItemComponent {
-    constructor() {
-        this.pointerClass = true;
+class BreadCrumbItemComponent {
+    constructor(el) {
+        this.el = el;
+        this.index = -1;
+        this.hostClasses = true;
+        this.disabled = false;
     }
-    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(' ');
+    get isRootItem() {
+        return this.item.context.isFirst;
     }
-    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;
+    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);
         }
-        if (isSizeSet) {
-            styles.fontSize = item.iconSize;
+    }
+    onImageLoad() {
+        if (isDocumentAvailable()) {
+            this.width = outerWidth(this.el.nativeElement);
         }
-        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, 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
-            }">
+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-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>
+
+        <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>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.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: [{
+            <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: '[kendoActionSheetItem]',
+                    selector: '[kendoBreadCrumbItem]',
                     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 #separator>
+            <ng-content select="[kendoBreadCrumbSeparator]"></ng-content>
         </ng-template>
-    `
-                }]
-        }], propDecorators: { itemTemplate: [{
-                type: Input
-            }], item: [{
-                type: Input
-            }], pointerClass: [{
-                type: HostBinding,
-                args: ['class.k-cursor-pointer']
-            }] } });
 
-/**
- * @hidden
- */
-class ActionSheetListComponent {
-    constructor(renderer, ngZone, element) {
-        this.renderer = renderer;
-        this.ngZone = ngZone;
-        this.element = element;
-        this.groupItems = [];
-        this.allItems = [];
-        this.itemClick = new EventEmitter();
-        this.subscriptions = new Subscription();
-    }
-    ngAfterViewInit() {
-        this.initDomEvents();
-    }
-    ngOnDestroy() {
-        this.subscriptions.unsubscribe();
-    }
-    initDomEvents() {
-        if (!this.element) {
-            return;
-        }
-        this.ngZone.runOutsideAngular(() => {
-            const nativeElement = this.element.nativeElement;
-            this.subscriptions.add(this.renderer.listen(nativeElement, 'click', this.clickHandler.bind(this)));
-        });
+        <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';
     }
-    clickHandler(e) {
-        const itemIndex = getActionSheetItemIndex(e.target, ACTIONSHEET_ITEM_INDEX_ATTRIBUTE, this.element.nativeElement);
-        const item = this.allItems[itemIndex];
-        if (!item) {
-            return;
+    set icon(icon) {
+        if (isPresent(icon)) {
+            this._icon = icon;
+            this.hasDefaultIcon = false;
         }
-        if (item.disabled) {
-            e.preventDefault();
-            return;
+        else {
+            this._icon = this.direction === 'ltr' ? DEFAULT_ICON : DEFAULT_RTL_ICON;
+            this.hasDefaultIcon = true;
         }
-        this.ngZone.run(() => {
-            this.itemClick.emit({ item, originalEvent: e });
+    }
+    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;
+            }
         });
     }
-    setAttrIndex(item) {
-        return this.allItems.indexOf(item);
+    ngOnDestroy() {
+        this.localizationChangesSubscription.unsubscribe();
     }
 }
-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, 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: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ActionSheetItemComponent, selector: "[kendoActionSheetItem]", inputs: ["itemTemplate", "item"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ActionSheetListComponent, decorators: [{
+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: '[kendoActionSheetList]',
+                    selector: '[kendoBreadCrumbList]',
                     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"
+        <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"
-                [item]="item">
-            </span>
-    `
+            >
+                <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.Renderer2 }, { type: i0.NgZone }, { type: i0.ElementRef }]; }, propDecorators: { groupItems: [{
-                type: Input
-            }], allItems: [{
+        }], 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 DEFAULT_ANIMATION_CONFIG = { duration: 300 };
+const getCollapsed = (itemComponent) => itemComponent.item.context.collapsed;
 /**
- * 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.
+ * @hidden
  */
-class ActionSheetComponent {
-    constructor(element, ngZone, renderer, localizationService, builder, cdr) {
-        this.element = element;
-        this.ngZone = ngZone;
-        this.renderer = renderer;
-        this.localizationService = localizationService;
-        this.builder = builder;
+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;
         /**
-         * 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.
+         * Fires when a Breadcrumb item is clicked. The event will not be fired by disabled items and the last item.
          */
         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();
+        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);
-        this.dynamicRTLSubscription = this.localizationService.changes.subscribe(({ rtl }) => {
-            this.rtl = rtl;
-            this.direction = this.rtl ? 'rtl' : 'ltr';
-        });
+        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());
     }
     /**
-     * @hidden
+     * The collection of items that will be rendered in the Breadcrumb.
      */
-    get hostClass() {
-        return this.expanded;
-    }
-    ngAfterViewInit() {
-        this.initDomEvents();
-        this.setCssVariables();
-    }
-    ngOnChanges(changes) {
-        if (changes['expanded'] && this.expanded) {
-            this.setExpanded(true);
-        }
+    set items(items) {
+        this._items = items || [];
+        this.updateItems.next(this._items);
     }
-    ngOnDestroy() {
-        this.domSubs.unsubscribe();
-        if (this.dynamicRTLSubscription) {
-            this.dynamicRTLSubscription.unsubscribe();
-        }
-        if (this.player) {
-            this.player.destroy();
-        }
+    get items() {
+        return this._items;
     }
     /**
-     * Toggles the visibility of the ActionSheet.
+     * Specifies the collapse mode of the Breadcrumb ([see example]({% slug collapse_modes_breadcrumb %})).
      *
-     * @param expanded? - Boolean. Specifies if the ActionSheet will be expanded or collapsed.
+     * 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.
      */
-    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();
+    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);
     }
-    /**
-     * @hidden
-     */
-    get topGroupItems() {
-        var _a;
-        return (_a = this.items) === null || _a === void 0 ? void 0 : _a.filter(item => !item.group || item.group === 'top');
+    get collapseMode() {
+        return this._collapseMode;
     }
     /**
-     * @hidden
+     * Specifies the padding of all Breadcrumb elements.
+     *
+     * The possible values are:
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `none`
      */
-    get bottomGroupItems() {
-        var _a;
-        return (_a = this.items) === null || _a === void 0 ? void 0 : _a.filter(item => item.group === 'bottom');
+    set size(size) {
+        const newSize = size ? size : DEFAULT_SIZE;
+        this.handleClasses(newSize, 'size');
+        this._size = newSize;
     }
-    /**
-     * @hidden
-     */
-    onItemClick(ev) {
-        this.itemClick.emit(ev);
+    get size() {
+        return this._size;
     }
-    /**
-     * @hidden
-     */
-    onOverlayClick() {
-        this.overlayClick.emit();
+    get wrapMode() {
+        return this.collapseMode === 'wrap';
     }
-    /**
-     * @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;
+    get getDir() {
+        return this.direction;
     }
-    initDomEvents() {
-        if (!this.element) {
-            return;
-        }
-        this.ngZone.runOutsideAngular(() => {
-            this.domSubs.add(this.renderer.listen(this.element.nativeElement, 'keydown', (ev) => {
-                this.onKeyDown(ev);
-            }));
-        });
+    ngOnInit() {
+        this.subscriptions.add(this.localization.changes.subscribe(({ rtl }) => (this.direction = rtl ? 'rtl' : 'ltr')));
+        this.handleClasses(this.size, 'size');
     }
-    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);
-            });
-        }
+    ngAfterViewInit() {
+        this.attachResizeHandler();
+        this.afterViewInit.next();
     }
-    handleInitialFocus() {
-        const [firstFocusable] = getFirstAndLastFocusable(this.element.nativeElement);
-        if (firstFocusable) {
-            firstFocusable.focus();
-        }
+    ngOnDestroy() {
+        this.subscriptions.unsubscribe();
     }
-    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();
+    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();
         }
-        if (shiftTabAfterFirstFocusable) {
-            event.preventDefault();
-            lastFocusable.focus();
+        // expand
+        if (componentWidth > itemsContainerWidth + nextExpandWidth && autoCollapseCandidates.find(collapsed)) {
+            expandFirst([...autoCollapseCandidates].reverse());
+            // needed by resize sensor
+            this.cdr.detectChanges();
+            return this.handleResize();
         }
     }
-    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 });
+    shouldResize() {
+        return isDocumentAvailable() && this.collapseMode === 'auto';
     }
-    setExpanded(value) {
-        this.expanded = value;
-        this.expandedChange.emit(value);
-        if (this.expanded) {
-            this.cdr.detectChanges();
-            this.handleInitialFocus();
-        }
+    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();
+                    }
+                });
+            }));
+        }));
     }
-    onAnimationEnd(currentExpanded) {
-        if (currentExpanded) {
-            this.expand.emit();
+    handleClasses(value, input) {
+        const elem = this.el.nativeElement;
+        const classes = getStylingClasses(input, this[input], value);
+        if (classes.toRemove) {
+            this.renderer.removeClass(elem, classes.toRemove);
         }
-        else {
-            this.setExpanded(false);
-            this.collapse.emit();
+        if (classes.toAdd) {
+            this.renderer.addClass(elem, classes.toAdd);
         }
     }
-    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$1.AnimationBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-ActionSheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ActionSheetComponent, 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: [
+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.actionsheet.component'
+            useValue: 'kendo.breadcrumb'
         }
-    ], 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: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.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>
-    `,
+    ], 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.actionsheet.component'
+                            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: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i1.LocalizationService }, { type: i2$1.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: [{
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.Renderer2 }]; }, propDecorators: { items: [{
                 type: Input
-            }], cssClass: [{
+            }], separatorIcon: [{
                 type: Input
-            }], animation: [{
+            }], separatorSVGIcon: [{
                 type: Input
-            }], expanded: [{
+            }], collapseMode: [{
                 type: Input
-            }], titleId: [{
+            }], size: [{
                 type: Input
-            }], expandedChange: [{
-                type: Output
-            }], expand: [{
-                type: Output
-            }], collapse: [{
-                type: Output
             }], itemClick: [{
                 type: Output
-            }], overlayClick: [{
-                type: Output
-            }], childContainer: [{
+            }], resizeSensor: [{
                 type: ViewChild,
-                args: ['childContainer']
-            }], actionSheetTemplate: [{
-                type: ContentChild,
-                args: [ActionSheetTemplateDirective]
-            }], headerTemplate: [{
-                type: ContentChild,
-                args: [ActionSheetHeaderTemplateDirective]
-            }], contentTemplate: [{
-                type: ContentChild,
-                args: [ActionSheetContentTemplateDirective]
+                args: ['resizeSensor', { static: true }]
+            }], itemsContainers: [{
+                type: ViewChildren,
+                args: ['itemsContainer', { read: ElementRef }]
+            }], listComponent: [{
+                type: ViewChild,
+                args: [BreadCrumbListComponent, { static: true }]
             }], itemTemplate: [{
                 type: ContentChild,
-                args: [ActionSheetItemTemplateDirective]
-            }], footerTemplate: [{
-                type: ContentChild,
-                args: [ActionSheetFooterTemplateDirective]
+                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']
             }] } });
 
-const templateDirectives = [
+/**
+* Utility array that contains all `ActionSheet` related components and directives.
+*/
+const KENDO_ACTIONSHEET = [
+    ActionSheetComponent,
     ActionSheetHeaderTemplateDirective,
     ActionSheetItemTemplateDirective,
     ActionSheetContentTemplateDirective,
     ActionSheetFooterTemplateDirective,
     ActionSheetTemplateDirective
 ];
-const exportedModules = [
-    ActionSheetComponent,
-    ...templateDirectives
+/**
+* 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
 ];
-const declarations = [
-    ActionSheetItemComponent,
-    ActionSheetListComponent,
-    ...exportedModules
+/**
+* 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 ActionSheet component.
+ * definition for the AppBar component.
  *
  * @example
  *
  * ```ts-no-run
- * // Import the ActionSheet module
- * import { ActionSheetModule } from '@progress/kendo-angular-navigation';
+ * // Import the AppBar module
+ * import { AppBarModule } from '@progress/kendo-angular-navigation';
  *
  * // The browser platform with a compiler
  * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
@@ -2510,7 +2395,7 @@ const declarations = [
  * // Define the app module
  * _@NgModule({
  *     declarations: [AppComponent], // declare app component
- *     imports:      [BrowserModule, ActionSheetModule], // import ActionSheet module
+ *     imports:      [BrowserModule, AppBarModule], // import AppBar module
  *     bootstrap:    [AppComponent]
  * })
  * export class AppModule {}
@@ -2520,29 +2405,20 @@ const declarations = [
  *
  * ```
  */
-class ActionSheetModule {
+class AppBarModule {
 }
-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, declarations: [ActionSheetItemComponent,
-        ActionSheetListComponent, ActionSheetComponent, ActionSheetHeaderTemplateDirective,
-        ActionSheetItemTemplateDirective,
-        ActionSheetContentTemplateDirective,
-        ActionSheetFooterTemplateDirective,
-        ActionSheetTemplateDirective], imports: [CommonModule, IconsModule], exports: [ActionSheetComponent, ActionSheetHeaderTemplateDirective,
-        ActionSheetItemTemplateDirective,
-        ActionSheetContentTemplateDirective,
-        ActionSheetFooterTemplateDirective,
-        ActionSheetTemplateDirective] });
-ActionSheetModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ActionSheetModule, imports: [CommonModule, IconsModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ActionSheetModule, decorators: [{
+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: [{
-                    declarations: [declarations],
-                    exports: [exportedModules],
-                    imports: [CommonModule, IconsModule]
+                    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.
@@ -2577,23 +2453,153 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
 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, exports: [AppBarModule,
-        BreadCrumbModule,
-        BottomNavigationModule,
-        ActionSheetModule] });
-NavigationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NavigationModule, imports: [AppBarModule,
-        BreadCrumbModule,
-        BottomNavigationModule,
-        ActionSheetModule] });
+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: [{
-                    exports: [
-                        AppBarModule,
-                        BreadCrumbModule,
-                        BottomNavigationModule,
-                        ActionSheetModule
-                    ]
+                    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]
                 }]
         }] });
 
@@ -2603,5 +2609,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * 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, NavigationModule };
+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 };