@progress/kendo-angular-navigation 17.0.0-develop.3 → 17.0.0-develop.30

package/{fesm2020 → fesm2022}/progress-kendo-angular-navigation.mjs

@@ -23,8 +23,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-navigation',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1728917159,
-    version: '17.0.0-develop.3',
+    publishDate: 1730388874,
+    version: '17.0.0-develop.30',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -36,21 +36,14 @@ const DEFAULT_POSITION_MODE = 'static';
  * Used to display information, actions, branding titles and additional navigation on the current screen.
  */
 class AppBarComponent {
-    constructor(localizationService, host, renderer) {
-        this.localizationService = localizationService;
-        this.host = host;
-        this.renderer = renderer;
-        this.hostClass = true;
-        this.rtl = false;
-        this._themeColor = DEFAULT_THEME_COLOR;
-        this._position = DEFAULT_POSITION;
-        this._positionMode = DEFAULT_POSITION_MODE;
-        validatePackage(packageMetadata);
-        this.dynamicRTLSubscription = this.localizationService.changes.subscribe(({ rtl }) => {
-            this.rtl = rtl;
-            this.direction = this.rtl ? 'rtl' : 'ltr';
-        });
-    }
+    localizationService;
+    host;
+    renderer;
+    hostClass = true;
+    /**
+     * @hidden
+     */
+    direction;
     /**
      * Specifies the position of the AppBar
      * ([see example]({% slug positioning_appbar %}#toc-position)).
@@ -110,6 +103,21 @@ class AppBarComponent {
     get themeColor() {
         return this._themeColor;
     }
+    dynamicRTLSubscription;
+    rtl = false;
+    _themeColor = DEFAULT_THEME_COLOR;
+    _position = DEFAULT_POSITION;
+    _positionMode = DEFAULT_POSITION_MODE;
+    constructor(localizationService, host, renderer) {
+        this.localizationService = localizationService;
+        this.host = host;
+        this.renderer = renderer;
+        validatePackage(packageMetadata);
+        this.dynamicRTLSubscription = this.localizationService.changes.subscribe(({ rtl }) => {
+            this.rtl = rtl;
+            this.direction = this.rtl ? 'rtl' : 'ltr';
+        });
+    }
     ngAfterViewInit() {
         const stylingOptions = ['position', 'positionMode', 'themeColor'];
         stylingOptions.forEach(input => {
@@ -133,18 +141,18 @@ class AppBarComponent {
             this.renderer.addClass(elem, `k-appbar-${newValue}`);
         }
     }
-}
-AppBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AppBarComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-AppBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: AppBarComponent, isStandalone: true, selector: "kendo-appbar", inputs: { position: "position", positionMode: "positionMode", themeColor: "themeColor" }, host: { properties: { "class.k-appbar": "this.hostClass", "attr.dir": "this.direction" } }, providers: [
-        LocalizationService,
-        {
-            provide: L10N_PREFIX,
-            useValue: 'kendo.appbar.component'
-        }
-    ], exportAs: ["kendoAppBar"], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppBarComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppBarComponent, isStandalone: true, selector: "kendo-appbar", inputs: { position: "position", positionMode: "positionMode", themeColor: "themeColor" }, host: { properties: { "class.k-appbar": "this.hostClass", "attr.dir": "this.direction" } }, providers: [
+            LocalizationService,
+            {
+                provide: L10N_PREFIX,
+                useValue: 'kendo.appbar.component'
+            }
+        ], exportAs: ["kendoAppBar"], ngImport: i0, template: `
         <ng-content></ng-content>
     `, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AppBarComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppBarComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoAppBar',
@@ -194,15 +202,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * class AppComponent {}
  */
 class AppBarSectionComponent {
-    constructor() {
-        this.hostClass = true;
-    }
-}
-AppBarSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AppBarSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AppBarSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: AppBarSectionComponent, isStandalone: true, selector: "kendo-appbar-section", host: { properties: { "class.k-appbar-section": "this.hostClass" } }, ngImport: i0, template: `
+    hostClass = true;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppBarSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppBarSectionComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-appbar-section',
@@ -304,13 +310,21 @@ const closestItem$1 = (target, targetAttr, scope) => closestInScope$1(target, el
  * ```
  */
 class AppBarSpacerComponent {
+    renderer;
+    element;
+    hostClass = true;
+    get sizedClass() {
+        return isPresent(this.width);
+    }
+    /**
+     * Specifies the width of the AppBarSpacer.
+     *
+     * If not set, the AppBarSpacer will take all the available space.
+     */
+    width;
     constructor(renderer, element) {
         this.renderer = renderer;
         this.element = element;
-        this.hostClass = true;
-    }
-    get sizedClass() {
-        return isPresent(this.width);
     }
     ngAfterViewInit() {
         if (isPresent(this.width)) {
@@ -318,10 +332,10 @@ class AppBarSpacerComponent {
             this.renderer.setStyle(element, 'flexBasis', this.width);
         }
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppBarSpacerComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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 });
 }
-AppBarSpacerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AppBarSpacerComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-AppBarSpacerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: AppBarSpacerComponent, isStandalone: true, selector: "kendo-appbar-spacer", inputs: { width: "width" }, host: { properties: { "class.k-spacer": "this.hostClass", "class.k-spacer-sized": "this.sizedClass" } }, ngImport: i0, template: ``, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AppBarSpacerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppBarSpacerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-appbar-spacer',
@@ -342,6 +356,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * Arguments for the `itemClick` event of the ActionSheet.
  */
 class ActionSheetItemClickEvent {
+    /**
+     * The ActionSheet item that was clicked.
+     */
+    item;
+    /**
+     * The DOM event that triggered the `itemClick` event.
+     */
+    originalEvent;
 }
 
 /**
@@ -350,13 +372,14 @@ class ActionSheetItemClickEvent {
  * with the `kendoActionSheetHeaderTemplate` directive inside the `<kendo-actionsheet>` tag.
  */
 class ActionSheetHeaderTemplateDirective {
+    templateRef;
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ActionSheetHeaderTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ActionSheetHeaderTemplateDirective, isStandalone: true, selector: "[kendoActionSheetHeaderTemplate]", ngImport: i0 });
 }
-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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ActionSheetHeaderTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoActionSheetHeaderTemplate]',
@@ -372,13 +395,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * with the `kendoActionSheetItemTemplate` directive inside the `<kendo-actionsheet>` tag.
  */
 class ActionSheetItemTemplateDirective {
+    templateRef;
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ActionSheetItemTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ActionSheetItemTemplateDirective, isStandalone: true, selector: "[kendoActionSheetItemTemplate]", ngImport: i0 });
 }
-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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ActionSheetItemTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoActionSheetItemTemplate]',
@@ -394,13 +418,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * with the `kendoActionSheetContentTemplate` directive inside the `<kendo-actionsheet>` tag.
  */
 class ActionSheetContentTemplateDirective {
+    templateRef;
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ActionSheetContentTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ActionSheetContentTemplateDirective, isStandalone: true, selector: "[kendoActionSheetContentTemplate]", ngImport: i0 });
 }
-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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ActionSheetContentTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoActionSheetContentTemplate]',
@@ -416,13 +441,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * with the `kendoActionSheetFooterTemplate` directive inside the `<kendo-actionsheet>` tag.
  */
 class ActionSheetFooterTemplateDirective {
+    templateRef;
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ActionSheetFooterTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ActionSheetFooterTemplateDirective, isStandalone: true, selector: "[kendoActionSheetFooterTemplate]", ngImport: i0 });
 }
-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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ActionSheetFooterTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoActionSheetFooterTemplate]',
@@ -438,13 +464,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * with the `kendoActionSheetTemplate` directive inside the `<kendo-actionsheet>` tag.
  */
 class ActionSheetTemplateDirective {
+    templateRef;
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ActionSheetTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ActionSheetTemplateDirective, isStandalone: true, selector: "[kendoActionSheetTemplate]", ngImport: i0 });
 }
-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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ActionSheetTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoActionSheetTemplate]',
@@ -477,9 +504,9 @@ function slideDown(duration, height) {
  * @hidden
  */
 class ActionSheetItemComponent {
-    constructor() {
-        this.pointerClass = true;
-    }
+    itemTemplate;
+    item;
+    pointerClass = true;
     manageIconClasses(item) {
         const classes = ['k-actionsheet-item-icon'];
         const isHexColor = isPresent(item.iconColor) && hexColorRegex.test(item.iconColor);
@@ -501,9 +528,8 @@ class ActionSheetItemComponent {
         }
         return styles;
     }
-}
-ActionSheetItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ActionSheetItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ActionSheetItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ActionSheetItemComponent, isStandalone: true, selector: "[kendoActionSheetItem]", inputs: { itemTemplate: "itemTemplate", item: "item" }, host: { properties: { "class.k-cursor-pointer": "this.pointerClass" } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ActionSheetItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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]="{
@@ -529,7 +555,8 @@ ActionSheetItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0
             </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: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ActionSheetItemComponent, decorators: [{
             type: Component,
             args: [{
                     // eslint-disable-next-line @angular-eslint/component-selector
@@ -576,14 +603,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * @hidden
  */
 class ActionSheetListComponent {
+    renderer;
+    ngZone;
+    element;
+    groupItems = [];
+    allItems = [];
+    itemTemplate;
+    itemClick = new EventEmitter();
+    subscriptions = new Subscription();
     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();
@@ -617,10 +648,10 @@ class ActionSheetListComponent {
     setAttrIndex(item) {
         return this.allItems.indexOf(item);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ActionSheetListComponent, deps: [{ token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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"] }] });
 }
-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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ActionSheetListComponent, decorators: [{
             type: Component,
             args: [{
                     // eslint-disable-next-line @angular-eslint/component-selector
@@ -658,6 +689,109 @@ const DEFAULT_ANIMATION_CONFIG = { duration: 300 };
  * Used to display a set of choices related to a task the user initiates.
  */
 class ActionSheetComponent {
+    element;
+    ngZone;
+    renderer;
+    localizationService;
+    builder;
+    cdr;
+    /**
+     * @hidden
+     */
+    get hostClass() {
+        return this.expanded;
+    }
+    /**
+     * @hidden
+     */
+    direction;
+    /**
+     * Specifies the text that is rendered as title.
+     */
+    title;
+    /**
+     * Specifies the text that is rendered under the title.
+     */
+    subtitle;
+    /**
+     * The collection of items that will be rendered in the ActionSheet.
+     */
+    items;
+    /**
+     * The CSS classes that will be rendered on the inner ActionSheet element.
+     * Supports the type of values that are supported by [ngClass](link:site.data.urls.angular['ngclassapi']).
+     */
+    cssClass;
+    /**
+     * 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
+     */
+    animation = true;
+    /**
+     * Specifies the state of the ActionSheet.
+     *
+     * @default false
+     */
+    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 %}).
+     *
+     */
+    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.
+     */
+    expandedChange = new EventEmitter();
+    /**
+     * Fires when the ActionSheet is expanded and its animation is complete.
+     */
+    expand = new EventEmitter();
+    /**
+     * Fires when the ActionSheet is collapsed and its animation is complete.
+     */
+    collapse = new EventEmitter();
+    /**
+     * Fires when an ActionSheet item is clicked.
+     */
+    itemClick = new EventEmitter();
+    /**
+     * Fires when the modal overlay is clicked.
+     */
+    overlayClick = new EventEmitter();
+    /**
+     * @hidden
+     */
+    childContainer;
+    /**
+     * @hidden
+     */
+    actionSheetTemplate;
+    /**
+     * @hidden
+     */
+    headerTemplate;
+    /**
+     * @hidden
+     */
+    contentTemplate;
+    /**
+     * @hidden
+     */
+    itemTemplate;
+    /**
+     * @hidden
+     */
+    footerTemplate;
+    dynamicRTLSubscription;
+    rtl = false;
+    domSubs = new Subscription();
+    player;
+    animationEnd = new EventEmitter();
     constructor(element, ngZone, renderer, localizationService, builder, cdr) {
         this.element = element;
         this.ngZone = ngZone;
@@ -665,62 +799,12 @@ class ActionSheetComponent {
         this.localizationService = localizationService;
         this.builder = builder;
         this.cdr = cdr;
-        /**
-         * Configures the ActionSheet opening and closing animations ([see example]({% slug animations_actionsheet %})).
-         * By default the animations are turned off. The default animations' duration is `300ms`.
-         *
-         * @default true
-         */
-        this.animation = true;
-        /**
-         * Specifies the state of the ActionSheet.
-         *
-         * @default false
-         */
-        this.expanded = false;
-        /**
-         * Sets the `aria-labelledby` attribute of the ActionSheet wrapper element.
-         * Use this option when the built-in header element is replaced through the [`ActionSheetHeaderTemplate`]({% slug api_navigation_actionsheetheadertemplatedirective %})
-         * or [`ActionSheetContentTemplate`]({% slug api_navigation_actionsheetcontenttemplatedirective %}).
-         *
-         */
-        this.titleId = getId('k-actionsheet-title');
-        /**
-         * Fires when the `expanded` property of the component is updated.
-         * Used to provide a two-way binding for the `expanded` property.
-         */
-        this.expandedChange = new EventEmitter();
-        /**
-         * Fires when the ActionSheet is expanded and its animation is complete.
-         */
-        this.expand = new EventEmitter();
-        /**
-         * Fires when the ActionSheet is collapsed and its animation is complete.
-         */
-        this.collapse = new EventEmitter();
-        /**
-         * Fires when an ActionSheet item is clicked.
-         */
-        this.itemClick = new EventEmitter();
-        /**
-         * Fires when the modal overlay is clicked.
-         */
-        this.overlayClick = new EventEmitter();
-        this.rtl = false;
-        this.domSubs = new Subscription();
-        this.animationEnd = new EventEmitter();
         validatePackage(packageMetadata);
         this.dynamicRTLSubscription = this.localizationService.changes.subscribe(({ rtl }) => {
             this.rtl = rtl;
             this.direction = this.rtl ? 'rtl' : 'ltr';
         });
     }
-    /**
-     * @hidden
-     */
-    get hostClass() {
-        return this.expanded;
-    }
     ngAfterViewInit() {
         this.initDomEvents();
         this.setCssVariables();
@@ -891,15 +975,14 @@ class ActionSheetComponent {
         });
         this.player.play();
     }
-}
-ActionSheetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ActionSheetComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i2.AnimationBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-ActionSheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ActionSheetComponent, isStandalone: true, selector: "kendo-actionsheet", inputs: { title: "title", subtitle: "subtitle", items: "items", cssClass: "cssClass", animation: "animation", expanded: "expanded", titleId: "titleId" }, outputs: { expandedChange: "expandedChange", expand: "expand", collapse: "collapse", itemClick: "itemClick", overlayClick: "overlayClick" }, host: { properties: { "class.k-actionsheet-container": "this.hostClass", "attr.dir": "this.direction" } }, providers: [
-        LocalizationService,
-        {
-            provide: L10N_PREFIX,
-            useValue: 'kendo.actionsheet.component'
-        }
-    ], queries: [{ propertyName: "actionSheetTemplate", first: true, predicate: ActionSheetTemplateDirective, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: ActionSheetHeaderTemplateDirective, descendants: true }, { propertyName: "contentTemplate", first: true, predicate: ActionSheetContentTemplateDirective, descendants: true }, { propertyName: "itemTemplate", first: true, predicate: ActionSheetItemTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: ActionSheetFooterTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "childContainer", first: true, predicate: ["childContainer"], descendants: true }], exportAs: ["kendoActionSheet"], usesOnChanges: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", 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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ActionSheetComponent, isStandalone: true, selector: "kendo-actionsheet", inputs: { title: "title", subtitle: "subtitle", items: "items", cssClass: "cssClass", animation: "animation", expanded: "expanded", titleId: "titleId" }, outputs: { expandedChange: "expandedChange", expand: "expand", collapse: "collapse", itemClick: "itemClick", overlayClick: "overlayClick" }, host: { properties: { "class.k-actionsheet-container": "this.hostClass", "attr.dir": "this.direction" } }, providers: [
+            LocalizationService,
+            {
+                provide: L10N_PREFIX,
+                useValue: 'kendo.actionsheet.component'
+            }
+        ], queries: [{ propertyName: "actionSheetTemplate", first: true, predicate: ActionSheetTemplateDirective, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: ActionSheetHeaderTemplateDirective, descendants: true }, { propertyName: "contentTemplate", first: true, predicate: ActionSheetContentTemplateDirective, descendants: true }, { propertyName: "itemTemplate", first: true, predicate: ActionSheetItemTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: ActionSheetFooterTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "childContainer", first: true, predicate: ["childContainer"], descendants: true }], exportAs: ["kendoActionSheet"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container *ngIf="expanded">
             <div class="k-overlay" (click)="onOverlayClick()"></div>
             <div class="k-animation-container k-animation-container-shown">
@@ -967,7 +1050,8 @@ ActionSheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
             </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: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ActionSheetComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoActionSheet',
@@ -1104,13 +1188,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * @hidden
  */
 class PreventableEvent {
-    /**
-     * @hidden
-     */
-    constructor(args) {
-        this.prevented = false;
-        Object.assign(this, args);
-    }
+    prevented = false;
     /**
      * Prevents the default action for a specified event.
      * In this way, the source component suppresses
@@ -1129,12 +1207,34 @@ class PreventableEvent {
     isDefaultPrevented() {
         return this.prevented;
     }
+    /**
+     * @hidden
+     */
+    constructor(args) {
+        Object.assign(this, args);
+    }
 }
 
 /**
  * Arguments for the `select` event of the BottomNavigation.
  */
 class BottomNavigationSelectEvent extends PreventableEvent {
+    /**
+     * The index of the selected item in the `items` collection.
+     */
+    index;
+    /**
+     * The selected BottomNavigation item.
+     */
+    item;
+    /**
+     * The DOM event that triggered the selection.
+     */
+    originalEvent;
+    /**
+     * The BottomNavigation that triggered the event.
+     */
+    sender;
 }
 
 /**
@@ -1143,13 +1243,14 @@ class BottomNavigationSelectEvent extends PreventableEvent {
  * with the `kendoBottomNavigationItemTemplate` directive inside the `<kendo-bottomnavigation>` tag ([see example]({% slug templates_bottomnavigation %})).
  */
 class BottomNavigationItemTemplateDirective {
+    templateRef;
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BottomNavigationItemTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: BottomNavigationItemTemplateDirective, isStandalone: true, selector: "[kendoBottomNavigationItemTemplate]", ngImport: i0 });
 }
-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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BottomNavigationItemTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoBottomNavigationItemTemplate]',
@@ -1190,6 +1291,12 @@ const colors = ['primary', 'secondary', 'tertiary', 'info', 'success', 'warning'
  * @hidden
  */
 class BottomNavigationItemComponent {
+    itemTemplate;
+    item;
+    index;
+    disabledComponent;
+    selectedIdx;
+    orientation;
     get disabledClass() {
         return this.item.disabled;
     }
@@ -1210,9 +1317,8 @@ class BottomNavigationItemComponent {
         const customIcon = this.item.iconClass ? this.item.iconClass : '';
         return `${kendoIcon} ${customIcon}`;
     }
-}
-BottomNavigationItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BottomNavigationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BottomNavigationItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BottomNavigationItemComponent, isStandalone: true, selector: "[kendoBottomNavigationItem]", inputs: { itemTemplate: "itemTemplate", item: "item", index: "index", disabledComponent: "disabledComponent", selectedIdx: "selectedIdx", orientation: "orientation" }, host: { properties: { "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "attr.aria-label": "this.label", "attr.tabindex": "this.tabindex", "attr.aria-current": "this.selectedClass", "class.k-selected": "this.selectedClass" } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BottomNavigationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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"
@@ -1227,7 +1333,8 @@ BottomNavigationItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "1
             [ngTemplateOutletContext]="{ $implicit: item }">
         </ng-template>
     `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BottomNavigationItemComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BottomNavigationItemComponent, decorators: [{
             type: Component,
             args: [{
                     // eslint-disable-next-line @angular-eslint/component-selector
@@ -1303,49 +1410,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * ```
  */
 class BottomNavigationComponent {
-    constructor(localization, hostElement, ngZone, changeDetector, renderer) {
-        this.localization = localization;
-        this.hostElement = hostElement;
-        this.ngZone = ngZone;
-        this.changeDetector = changeDetector;
-        this.renderer = renderer;
-        /**
-         * Sets a top border to the BottomNavigation ([see example]({% slug appearance_bottomnavigation %})).
-         *
-         * @default false
-         */
-        this.border = false;
-        /**
-         * Disables the whole BottomNavigation.
-         *
-         * @default false
-         */
-        this.disabled = false;
-        /**
-         * Fires each time an item is selected. This event is preventable.
-         */
-        this.select = new EventEmitter();
-        /**
-         * @hidden
-         */
-        this.hostClass = true;
-        /**
-         * @hidden
-         */
-        this.role = 'navigation';
-        this._fill = 'flat';
-        this._itemFlow = 'vertical';
-        this._positionMode = 'fixed';
-        this._themeColor = 'primary';
-        this._nativeHostElement = this.hostElement.nativeElement;
-        this.subscriptions = new Subscription();
-        this.rtl = false;
-        validatePackage(packageMetadata);
-        this.dynamicRTLSubscription = this.localization.changes.subscribe(({ rtl }) => {
-            this.rtl = rtl;
-            this.direction = this.rtl ? 'rtl' : 'ltr';
-        });
-    }
+    localization;
+    hostElement;
+    ngZone;
+    changeDetector;
+    renderer;
+    /**
+     * The collection of items that will be rendered in the BottomNavigation ([see example]({% slug items_bottomnavigation %})).
+     */
+    items;
+    /**
+     * Sets a top border to the BottomNavigation ([see example]({% slug appearance_bottomnavigation %})).
+     *
+     * @default false
+     */
+    border = false;
+    /**
+     * Disables the whole BottomNavigation.
+     *
+     * @default false
+     */
+    disabled = false;
     /**
      * The fill style of the BottomNavigation ([see example]({% slug appearance_bottomnavigation %})).
      *
@@ -1419,6 +1504,14 @@ class BottomNavigationComponent {
     get themeColor() {
         return this._themeColor;
     }
+    /**
+     * Fires each time an item is selected. This event is preventable.
+     */
+    select = new EventEmitter();
+    /**
+     * @hidden
+     */
+    hostClass = true;
     /**
      * @hidden
      */
@@ -1431,6 +1524,43 @@ class BottomNavigationComponent {
     get disabledClass() {
         return this.disabled;
     }
+    /**
+     * @hidden
+     */
+    role = 'navigation';
+    /**
+     * @hidden
+     */
+    direction;
+    /**
+     * @hidden
+     */
+    itemTemplate;
+    /**
+     * @hidden
+     */
+    selectedIdx;
+    _fill = 'flat';
+    _itemFlow = 'vertical';
+    _positionMode = 'fixed';
+    _themeColor = 'primary';
+    _nativeHostElement;
+    dynamicRTLSubscription;
+    subscriptions = new Subscription();
+    rtl = false;
+    constructor(localization, hostElement, ngZone, changeDetector, renderer) {
+        this.localization = localization;
+        this.hostElement = hostElement;
+        this.ngZone = ngZone;
+        this.changeDetector = changeDetector;
+        this.renderer = renderer;
+        validatePackage(packageMetadata);
+        this._nativeHostElement = this.hostElement.nativeElement;
+        this.dynamicRTLSubscription = this.localization.changes.subscribe(({ rtl }) => {
+            this.rtl = rtl;
+            this.direction = this.rtl ? 'rtl' : 'ltr';
+        });
+    }
     /**
      * @hidden
      */
@@ -1511,16 +1641,16 @@ class BottomNavigationComponent {
             return itemIndex(item, BOTTOMNAVIGATION_ITEM_INDEX);
         }
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BottomNavigationComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BottomNavigationComponent, isStandalone: true, selector: "kendo-bottomnavigation", inputs: { items: "items", border: "border", disabled: "disabled", fill: "fill", itemFlow: "itemFlow", positionMode: "positionMode", themeColor: "themeColor" }, outputs: { select: "select" }, host: { properties: { "class.k-bottom-nav": "this.hostClass", "class.k-bottom-nav-border": "this.borderClass", "class.k-disabled": "this.disabledClass", "attr.role": "this.role", "attr.dir": "this.direction" } }, providers: [
+            LocalizationService,
+            {
+                provide: L10N_PREFIX,
+                useValue: 'kendo.bottomnavigation'
+            }
+        ], queries: [{ propertyName: "itemTemplate", first: true, predicate: BottomNavigationItemTemplateDirective, descendants: true }], exportAs: ["kendoBottomNavigation"], ngImport: i0, template: "\n        <ng-container *ngIf=\"items\">\n            <span kendoBottomNavigationItem\n                *ngFor=\"let item of items; let idx=index\"\n                role=\"link\"\n                class=\"k-bottom-nav-item\"\n                [disabledComponent]=\"disabled\"\n                [item]=\"item\"\n                [index]=\"idx\"\n                [selectedIdx]=\"selectedIdx\"\n                [itemTemplate]=\"itemTemplate\"\n                [attr.data-kendo-bottomnavigation-index]=\"idx\"\n                [ngClass]=\"item.cssClass\"\n                [ngStyle]=\"item.cssStyle\"\n                [orientation]=\"itemFlow\">\n            </span>\n        </ng-container>\n    ", isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: BottomNavigationItemComponent, selector: "[kendoBottomNavigationItem]", inputs: ["itemTemplate", "item", "index", "disabledComponent", "selectedIdx", "orientation"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 }
-BottomNavigationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BottomNavigationComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-BottomNavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BottomNavigationComponent, isStandalone: true, selector: "kendo-bottomnavigation", inputs: { items: "items", border: "border", disabled: "disabled", fill: "fill", itemFlow: "itemFlow", positionMode: "positionMode", themeColor: "themeColor" }, outputs: { select: "select" }, host: { properties: { "class.k-bottom-nav": "this.hostClass", "class.k-bottom-nav-border": "this.borderClass", "class.k-disabled": "this.disabledClass", "attr.role": "this.role", "attr.dir": "this.direction" } }, providers: [
-        LocalizationService,
-        {
-            provide: L10N_PREFIX,
-            useValue: 'kendo.bottomnavigation'
-        }
-    ], queries: [{ propertyName: "itemTemplate", first: true, predicate: BottomNavigationItemTemplateDirective, descendants: true }], exportAs: ["kendoBottomNavigation"], ngImport: i0, template: "\n        <ng-container *ngIf=\"items\">\n            <span kendoBottomNavigationItem\n                *ngFor=\"let item of items; let idx=index\"\n                role=\"link\"\n                class=\"k-bottom-nav-item\"\n                [disabledComponent]=\"disabled\"\n                [item]=\"item\"\n                [index]=\"idx\"\n                [selectedIdx]=\"selectedIdx\"\n                [itemTemplate]=\"itemTemplate\"\n                [attr.data-kendo-bottomnavigation-index]=\"idx\"\n                [ngClass]=\"item.cssClass\"\n                [ngStyle]=\"item.cssStyle\"\n                [orientation]=\"itemFlow\">\n            </span>\n        </ng-container>\n    ", isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: BottomNavigationItemComponent, selector: "[kendoBottomNavigationItem]", inputs: ["itemTemplate", "item", "index", "disabledComponent", "selectedIdx", "orientation"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BottomNavigationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BottomNavigationComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoBottomNavigation',
@@ -1596,13 +1726,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * For more information and example refer to the [Templates]({% slug templates_breadcrumb %}) article.
  */
 class BreadCrumbItemTemplateDirective {
+    templateRef;
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BreadCrumbItemTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: BreadCrumbItemTemplateDirective, isStandalone: true, selector: "[kendoBreadCrumbItemTemplate]", ngImport: i0 });
 }
-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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BreadCrumbItemTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoBreadCrumbItemTemplate]',
@@ -1646,12 +1777,12 @@ const getStylingClasses = (stylingOption, previousValue, newValue) => {
  * @hidden
  */
 class BreadCrumbItemComponent {
-    constructor(el) {
-        this.el = el;
-        this.index = -1;
-        this.hostClasses = true;
-        this.disabled = false;
-    }
+    el;
+    item;
+    collapseMode;
+    index = -1;
+    itemTemplate;
+    hostClasses = true;
     get isRootItem() {
         return this.item.context.isFirst;
     }
@@ -1661,6 +1792,11 @@ class BreadCrumbItemComponent {
     get isLastItem() {
         return this.item.context.isLast;
     }
+    width;
+    disabled = false;
+    constructor(el) {
+        this.el = el;
+    }
     ngOnInit() {
         this.disabled = this.item.data && (this.item.data.disabled || this.item.context.isLast);
     }
@@ -1674,9 +1810,8 @@ class BreadCrumbItemComponent {
             this.width = outerWidth(this.el.nativeElement);
         }
     }
-}
-BreadCrumbItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BreadCrumbItemComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-BreadCrumbItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BreadCrumbItemComponent, isStandalone: true, selector: "[kendoBreadCrumbItem]", inputs: { item: "item", collapseMode: "collapseMode", index: "index", itemTemplate: "itemTemplate" }, host: { properties: { "class.k-breadcrumb-item": "this.hostClasses", "class.k-breadcrumb-root-item": "this.isRootItem", "attr.aria-disabled": "this.isDisabled", "class.k-breadcrumb-last-item": "this.isLastItem" } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BreadCrumbItemComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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>
@@ -1724,7 +1859,8 @@ BreadCrumbItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
             <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: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BreadCrumbItemComponent, decorators: [{
             type: Component,
             args: [{
                     // eslint-disable-next-line @angular-eslint/component-selector
@@ -1810,14 +1946,8 @@ 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';
-    }
+    el;
+    localization;
     set icon(icon) {
         if (isPresent(icon)) {
             this._icon = icon;
@@ -1844,6 +1974,19 @@ class BreadCrumbSeparatorDirective {
     get svgIcon() {
         return this._svgIcon;
     }
+    defaultClasses = true;
+    ariaHidden = true;
+    _icon;
+    _svgIcon;
+    hasDefaultIcon;
+    hasDefaultSvgIcon;
+    direction = 'ltr';
+    localizationChangesSubscription;
+    constructor(el, localization) {
+        this.el = el;
+        this.localization = localization;
+        this.direction = this.localization.rtl ? 'rtl' : 'ltr';
+    }
     ngOnInit() {
         this.localizationChangesSubscription = this.localization.changes.subscribe(({ rtl }) => {
             this.direction = rtl ? 'rtl' : 'ltr';
@@ -1858,9 +2001,8 @@ class BreadCrumbSeparatorDirective {
     ngOnDestroy() {
         this.localizationChangesSubscription.unsubscribe();
     }
-}
-BreadCrumbSeparatorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BreadCrumbSeparatorDirective, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-BreadCrumbSeparatorDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BreadCrumbSeparatorDirective, isStandalone: true, selector: "[kendoBreadCrumbSeparator]", inputs: { icon: "icon", svgIcon: "svgIcon" }, host: { properties: { "class.k-breadcrumb-delimiter-icon": "this.defaultClasses", "class.k-icon": "this.defaultClasses", "attr.aria-hidden": "this.ariaHidden" } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BreadCrumbSeparatorDirective, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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"
@@ -1868,7 +2010,8 @@ BreadCrumbSeparatorDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14
         >
         </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: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BreadCrumbSeparatorDirective, decorators: [{
             type: Component,
             args: [{
                     selector: '[kendoBreadCrumbSeparator]',
@@ -1902,12 +2045,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * @hidden
  */
 class BreadCrumbListComponent {
+    el;
+    zone;
+    items = [];
+    itemTemplate;
+    collapseMode = 'auto';
+    separatorIcon;
+    separatorSVGIcon;
+    itemClick = new EventEmitter();
+    renderedItems;
+    isRootItemContainer;
+    domEventsSubscription;
     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(() => {
@@ -1930,10 +2081,10 @@ class BreadCrumbListComponent {
             return itemIndex(item, BREADCRUMB_ITEM_INDEX);
         }
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BreadCrumbListComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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"] }] });
 }
-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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BreadCrumbListComponent, decorators: [{
             type: Component,
             args: [{
                     // eslint-disable-next-line @angular-eslint/component-selector
@@ -2031,52 +2182,11 @@ const expandFirst = toggleFirst(true);
  * ```
  */
 class BreadCrumbComponent {
-    constructor(localization, el, cdr, zone, renderer) {
-        this.localization = localization;
-        this.el = el;
-        this.cdr = cdr;
-        this.zone = zone;
-        this.renderer = renderer;
-        /**
-         * Fires when a Breadcrumb item is clicked. The event will not be fired by disabled items and the last item.
-         */
-        this.itemClick = new EventEmitter();
-        this.hostClasses = true;
-        this.hostAriaLabel = 'Breadcrumb';
-        this._items = [];
-        this._collapseMode = 'auto';
-        this._size = DEFAULT_SIZE;
-        this.updateItems = new ReplaySubject();
-        this.afterViewInit = new Subject();
-        this.subscriptions = new Subscription();
-        this.direction = 'ltr';
-        validatePackage(packageMetadata);
-        const updateItems$ = this.updateItems.asObservable().pipe(startWith([]));
-        this.direction = localization.rtl ? 'rtl' : 'ltr';
-        this.itemsData$ = updateItems$.pipe(map(items => items.filter(Boolean)), map(items => items.map((item, index, collection) => ({
-            context: {
-                collapsed: false,
-                isLast: index === collection.length - 1,
-                isFirst: index === 0
-            },
-            data: item
-        }))), share());
-        this.firstItem$ = updateItems$.pipe(map(items => {
-            if (items.length > 0) {
-                return [
-                    {
-                        context: {
-                            collapsed: false,
-                            isLast: items.length === 1,
-                            isFirst: true
-                        },
-                        data: items[0]
-                    }
-                ];
-            }
-            return [];
-        }), share());
-    }
+    localization;
+    el;
+    cdr;
+    zone;
+    renderer;
     /**
      * The collection of items that will be rendered in the Breadcrumb.
      */
@@ -2087,6 +2197,14 @@ class BreadCrumbComponent {
     get items() {
         return this._items;
     }
+    /**
+     * Defines a name of a [built-in icon]({% slug icons %}) in a Kendo UI theme.
+     */
+    separatorIcon;
+    /**
+     * Defines an [`SVGIcon`](slug:api_icons_svgicon) to be rendered as a separator.
+     */
+    separatorSVGIcon;
     /**
      * Specifies the collapse mode of the Breadcrumb ([see example]({% slug collapse_modes_breadcrumb %})).
      *
@@ -2124,12 +2242,76 @@ class BreadCrumbComponent {
     get size() {
         return this._size;
     }
+    /**
+     * Fires when a Breadcrumb item is clicked. The event will not be fired by disabled items and the last item.
+     */
+    itemClick = new EventEmitter();
+    /**
+     * @hidden
+     */
+    resizeSensor;
+    /**
+     * @hidden
+     */
+    itemsContainers;
+    /**
+     * @hidden
+     */
+    listComponent;
+    /**
+     * @hidden
+     */
+    itemTemplate;
+    hostClasses = true;
     get wrapMode() {
         return this.collapseMode === 'wrap';
     }
+    hostAriaLabel = 'Breadcrumb';
     get getDir() {
         return this.direction;
     }
+    itemsData$;
+    firstItem$;
+    _items = [];
+    _collapseMode = 'auto';
+    _size = DEFAULT_SIZE;
+    updateItems = new ReplaySubject();
+    afterViewInit = new Subject();
+    subscriptions = new Subscription();
+    direction = 'ltr';
+    constructor(localization, el, cdr, zone, renderer) {
+        this.localization = localization;
+        this.el = el;
+        this.cdr = cdr;
+        this.zone = zone;
+        this.renderer = renderer;
+        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());
+    }
     ngOnInit() {
         this.subscriptions.add(this.localization.changes.subscribe(({ rtl }) => (this.direction = rtl ? 'rtl' : 'ltr')));
         this.handleClasses(this.size, 'size');
@@ -2197,15 +2379,14 @@ class BreadCrumbComponent {
             this.renderer.addClass(elem, classes.toAdd);
         }
     }
-}
-BreadCrumbComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BreadCrumbComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-BreadCrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BreadCrumbComponent, isStandalone: true, selector: "kendo-breadcrumb", inputs: { items: "items", separatorIcon: "separatorIcon", separatorSVGIcon: "separatorSVGIcon", collapseMode: "collapseMode", size: "size" }, outputs: { itemClick: "itemClick" }, host: { properties: { "class.k-breadcrumb": "this.hostClasses", "class.k-breadcrumb-wrap": "this.wrapMode", "attr.aria-label": "this.hostAriaLabel", "attr.dir": "this.getDir" } }, providers: [
-        LocalizationService,
-        {
-            provide: L10N_PREFIX,
-            useValue: 'kendo.breadcrumb'
-        }
-    ], queries: [{ propertyName: "itemTemplate", first: true, predicate: BreadCrumbItemTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "resizeSensor", first: true, predicate: ["resizeSensor"], descendants: true, static: true }, { propertyName: "listComponent", first: true, predicate: BreadCrumbListComponent, descendants: true, static: true }, { propertyName: "itemsContainers", predicate: ["itemsContainer"], descendants: true, read: ElementRef }], exportAs: ["kendoBreadCrumb"], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BreadCrumbComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BreadCrumbComponent, isStandalone: true, selector: "kendo-breadcrumb", inputs: { items: "items", separatorIcon: "separatorIcon", separatorSVGIcon: "separatorSVGIcon", collapseMode: "collapseMode", size: "size" }, outputs: { itemClick: "itemClick" }, host: { properties: { "class.k-breadcrumb": "this.hostClasses", "class.k-breadcrumb-wrap": "this.wrapMode", "attr.aria-label": "this.hostAriaLabel", "attr.dir": "this.getDir" } }, providers: [
+            LocalizationService,
+            {
+                provide: L10N_PREFIX,
+                useValue: 'kendo.breadcrumb'
+            }
+        ], queries: [{ propertyName: "itemTemplate", first: true, predicate: BreadCrumbItemTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "resizeSensor", first: true, predicate: ["resizeSensor"], descendants: true, static: true }, { propertyName: "listComponent", first: true, predicate: BreadCrumbListComponent, descendants: true, static: true }, { propertyName: "itemsContainers", predicate: ["itemsContainer"], descendants: true, read: ElementRef }], exportAs: ["kendoBreadCrumb"], ngImport: i0, template: `
         <ol
             #itemsContainer
             kendoBreadCrumbList
@@ -2232,7 +2413,8 @@ BreadCrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
         ></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: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BreadCrumbComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoBreadCrumb',
@@ -2389,11 +2571,11 @@ const KENDO_NAVIGATION = [
  * ```
  */
 class AppBarModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: AppBarModule, imports: [AppBarComponent, AppBarSectionComponent, AppBarSpacerComponent], exports: [AppBarComponent, AppBarSectionComponent, AppBarSpacerComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppBarModule });
 }
-AppBarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AppBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AppBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: AppBarModule, imports: [AppBarComponent, AppBarSectionComponent, AppBarSpacerComponent], exports: [AppBarComponent, AppBarSectionComponent, AppBarSpacerComponent] });
-AppBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AppBarModule, imports: [KENDO_APPBAR] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AppBarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppBarModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [...KENDO_APPBAR],
@@ -2434,11 +2616,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * ```
  */
 class NavigationModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavigationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", 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] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavigationModule, providers: [IconsService, ResizeBatchService], imports: [ActionSheetComponent, BottomNavigationComponent, BreadCrumbComponent] });
 }
-NavigationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NavigationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NavigationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: NavigationModule, imports: [ActionSheetComponent, ActionSheetHeaderTemplateDirective, ActionSheetItemTemplateDirective, ActionSheetContentTemplateDirective, ActionSheetFooterTemplateDirective, ActionSheetTemplateDirective, AppBarComponent, AppBarSectionComponent, AppBarSpacerComponent, BottomNavigationComponent, BottomNavigationItemTemplateDirective, BreadCrumbComponent, BreadCrumbItemTemplateDirective], exports: [ActionSheetComponent, ActionSheetHeaderTemplateDirective, ActionSheetItemTemplateDirective, ActionSheetContentTemplateDirective, ActionSheetFooterTemplateDirective, ActionSheetTemplateDirective, AppBarComponent, AppBarSectionComponent, AppBarSpacerComponent, BottomNavigationComponent, BottomNavigationItemTemplateDirective, BreadCrumbComponent, BreadCrumbItemTemplateDirective] });
-NavigationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NavigationModule, providers: [IconsService, ResizeBatchService], imports: [ActionSheetComponent, AppBarComponent, AppBarSectionComponent, AppBarSpacerComponent, BottomNavigationComponent, BreadCrumbComponent] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NavigationModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavigationModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...KENDO_NAVIGATION],
@@ -2480,11 +2662,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * ```
  */
 class BreadCrumbModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BreadCrumbModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: BreadCrumbModule, imports: [BreadCrumbComponent, BreadCrumbItemTemplateDirective], exports: [BreadCrumbComponent, BreadCrumbItemTemplateDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BreadCrumbModule, providers: [IconsService, ResizeBatchService], imports: [BreadCrumbComponent] });
 }
-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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BreadCrumbModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [...KENDO_BREADCRUMB],
@@ -2526,11 +2708,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * ```
  */
 class BottomNavigationModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BottomNavigationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: BottomNavigationModule, imports: [BottomNavigationComponent, BottomNavigationItemTemplateDirective], exports: [BottomNavigationComponent, BottomNavigationItemTemplateDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BottomNavigationModule, providers: [IconsService], imports: [BottomNavigationComponent] });
 }
-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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BottomNavigationModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [...KENDO_BOTTOMNAVIGATION],
@@ -2573,11 +2755,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * ```
  */
 class ActionSheetModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ActionSheetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: ActionSheetModule, imports: [ActionSheetComponent, ActionSheetHeaderTemplateDirective, ActionSheetItemTemplateDirective, ActionSheetContentTemplateDirective, ActionSheetFooterTemplateDirective, ActionSheetTemplateDirective], exports: [ActionSheetComponent, ActionSheetHeaderTemplateDirective, ActionSheetItemTemplateDirective, ActionSheetContentTemplateDirective, ActionSheetFooterTemplateDirective, ActionSheetTemplateDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ActionSheetModule, providers: [IconsService], imports: [ActionSheetComponent] });
 }
-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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ActionSheetModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [...KENDO_ACTIONSHEET],