@progress/kendo-angular-navigation 25.3.1-develop.1 → 25.4.0-develop.1

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

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
-import { Input, HostBinding, Component, Optional, Directive, EventEmitter, Output, ContentChild, ContentChildren, forwardRef, ViewChild, Host, ViewChildren, isDevMode, ElementRef, NgModule } from '@angular/core';
+import { signal, Input, HostBinding, ChangeDetectionStrategy, Component, Optional, Directive, EventEmitter, Output, ContentChild, ContentChildren, forwardRef, ViewChild, afterNextRender, Host, 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';
@@ -25,8 +25,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1791447250,
-    version: '25.3.1-develop.1',
+    publishDate: 1791873115,
+    version: '25.4.0-develop.1',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -67,10 +67,10 @@ class AppBarComponent {
     set position(position) {
         const newPosition = position ? position : DEFAULT_POSITION;
         this.handleHostClasses(newPosition, this.position);
-        this._position = newPosition;
+        this._position.set(newPosition);
     }
     get position() {
-        return this._position;
+        return this._position();
     }
     /**
      * Sets the position mode of the AppBar ([see example](https://www.telerik.com/kendo-angular-ui/components/navigation/appbar/positioning#position-mode)).
@@ -80,26 +80,26 @@ class AppBarComponent {
     set positionMode(positionMode) {
         const newPositionMode = positionMode ? positionMode : DEFAULT_POSITION_MODE;
         this.handleHostClasses(newPositionMode, this.positionMode);
-        this._positionMode = newPositionMode;
+        this._positionMode.set(newPositionMode);
     }
     get positionMode() {
-        return this._positionMode;
+        return this._positionMode();
     }
     /**
      * Sets the theme color of the AppBar. The theme color is applied as the background color of the component. The default value is set by the Kendo theme.
      */
     set themeColor(themeColor) {
         this.handleHostClasses(themeColor, this.themeColor);
-        this._themeColor = themeColor;
+        this._themeColor.set(themeColor);
     }
     get themeColor() {
-        return this._themeColor;
+        return this._themeColor();
     }
     dynamicRTLSubscription;
     rtl = false;
-    _themeColor;
-    _position = DEFAULT_POSITION;
-    _positionMode = DEFAULT_POSITION_MODE;
+    _themeColor = signal(undefined, ...(ngDevMode ? [{ debugName: "_themeColor" }] : /* istanbul ignore next */ []));
+    _position = signal(DEFAULT_POSITION, ...(ngDevMode ? [{ debugName: "_position" }] : /* istanbul ignore next */ []));
+    _positionMode = signal(DEFAULT_POSITION_MODE, ...(ngDevMode ? [{ debugName: "_positionMode" }] : /* istanbul ignore next */ []));
     constructor(localizationService, host, renderer) {
         this.localizationService = localizationService;
         this.host = host;
@@ -133,8 +133,8 @@ class AppBarComponent {
             this.renderer.addClass(elem, `k-appbar-${newValue}`);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.32", 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: "20.3.32", 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: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", 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: "21.2.23", 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,
@@ -142,13 +142,13 @@ class AppBarComponent {
             }
         ], exportAs: ["kendoAppBar"], ngImport: i0, template: `
         <ng-content></ng-content>
-    `, isInline: true });
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: AppBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: AppBarComponent, decorators: [{
             type: Component,
             args: [{
-                    exportAs: 'kendoAppBar',
                     selector: 'kendo-appbar',
+                    exportAs: 'kendoAppBar',
                     template: `
         <ng-content></ng-content>
     `,
@@ -159,6 +159,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.32", ngImpo
                             useValue: 'kendo.appbar.component'
                         }
                     ],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     standalone: true
                 }]
         }], ctorParameters: () => [{ type: i1.LocalizationService }, { type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { hostClass: [{
@@ -191,18 +192,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.32", ngImpo
  */
 class AppBarSectionComponent {
     hostClass = true;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: AppBarSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.32", type: AppBarSectionComponent, isStandalone: true, selector: "kendo-appbar-section", host: { properties: { "class.k-appbar-section": "this.hostClass" } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: AppBarSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.23", 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 });
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: AppBarSectionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: AppBarSectionComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-appbar-section',
                     template: `
         <ng-content></ng-content>
     `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     standalone: true
                 }]
         }], propDecorators: { hostClass: [{
@@ -301,7 +303,12 @@ class AppBarSpacerComponent {
      *
      * If not set, the AppBarSpacer will take all of the available space.
      */
-    width;
+    set width(value) {
+        this._width.set(value);
+    }
+    get width() {
+        return this._width();
+    }
     constructor(renderer, element) {
         this.renderer = renderer;
         this.element = element;
@@ -312,14 +319,16 @@ class AppBarSpacerComponent {
             this.renderer.setStyle(element, 'flexBasis', this.width);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: AppBarSpacerComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.32", 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 });
+    _width = signal(undefined, ...(ngDevMode ? [{ debugName: "_width" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: AppBarSpacerComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.23", 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, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: AppBarSpacerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: AppBarSpacerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-appbar-spacer',
                     template: ``,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     standalone: true
                 }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { hostClass: [{
@@ -367,10 +376,10 @@ class ActionSheetHeaderTemplateDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: ActionSheetHeaderTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.32", type: ActionSheetHeaderTemplateDirective, isStandalone: true, selector: "[kendoActionSheetHeaderTemplate]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ActionSheetHeaderTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.23", type: ActionSheetHeaderTemplateDirective, isStandalone: true, selector: "[kendoActionSheetHeaderTemplate]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: ActionSheetHeaderTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ActionSheetHeaderTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoActionSheetHeaderTemplate]',
@@ -399,10 +408,10 @@ class ActionSheetItemTemplateDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: ActionSheetItemTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.32", type: ActionSheetItemTemplateDirective, isStandalone: true, selector: "[kendoActionSheetItemTemplate]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ActionSheetItemTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.23", type: ActionSheetItemTemplateDirective, isStandalone: true, selector: "[kendoActionSheetItemTemplate]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: ActionSheetItemTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ActionSheetItemTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoActionSheetItemTemplate]',
@@ -431,10 +440,10 @@ class ActionSheetContentTemplateDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: ActionSheetContentTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.32", type: ActionSheetContentTemplateDirective, isStandalone: true, selector: "[kendoActionSheetContentTemplate]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ActionSheetContentTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.23", type: ActionSheetContentTemplateDirective, isStandalone: true, selector: "[kendoActionSheetContentTemplate]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: ActionSheetContentTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ActionSheetContentTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoActionSheetContentTemplate]',
@@ -463,10 +472,10 @@ class ActionSheetFooterTemplateDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: ActionSheetFooterTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.32", type: ActionSheetFooterTemplateDirective, isStandalone: true, selector: "[kendoActionSheetFooterTemplate]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ActionSheetFooterTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.23", type: ActionSheetFooterTemplateDirective, isStandalone: true, selector: "[kendoActionSheetFooterTemplate]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: ActionSheetFooterTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ActionSheetFooterTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoActionSheetFooterTemplate]',
@@ -495,10 +504,10 @@ class ActionSheetTemplateDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: ActionSheetTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.32", type: ActionSheetTemplateDirective, isStandalone: true, selector: "[kendoActionSheetTemplate]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ActionSheetTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.23", type: ActionSheetTemplateDirective, isStandalone: true, selector: "[kendoActionSheetTemplate]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: ActionSheetTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ActionSheetTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoActionSheetTemplate]',
@@ -531,9 +540,21 @@ function slideDown(duration, height) {
  * @hidden
  */
 class ActionSheetItemComponent {
-    itemTemplate;
-    item;
+    set itemTemplate(value) {
+        this._itemTemplate.set(value);
+    }
+    get itemTemplate() {
+        return this._itemTemplate();
+    }
+    set item(value) {
+        this._item.set(value);
+    }
+    get item() {
+        return this._item();
+    }
     pointerClass = true;
+    _itemTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_itemTemplate" }] : /* istanbul ignore next */ []));
+    _item = signal(undefined, ...(ngDevMode ? [{ debugName: "_item" }] : /* istanbul ignore next */ []));
     manageIconClasses(item) {
         const classes = ['k-actionsheet-item-icon'];
         const isHexColor = isPresent(item.iconColor) && hexColorRegex.test(item.iconColor);
@@ -555,8 +576,8 @@ class ActionSheetItemComponent {
         }
         return styles;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: ActionSheetItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.32", 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: "21.2.23", ngImport: i0, type: ActionSheetItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: ActionSheetItemComponent, isStandalone: true, selector: "[kendoActionSheetItem]", inputs: { itemTemplate: "itemTemplate", item: "item" }, host: { properties: { "class.k-cursor-pointer": "this.pointerClass" } }, ngImport: i0, template: `
         @if (itemTemplate) {
           <ng-template
             [ngTemplateOutlet]="itemTemplate"
@@ -590,9 +611,9 @@ class ActionSheetItemComponent {
             }
           </span>
         }
-        `, isInline: true, dependencies: [{ 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"] }] });
+        `, isInline: true, dependencies: [{ 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: ActionSheetItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ActionSheetItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: '[kendoActionSheetItem]',
@@ -632,7 +653,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.32", ngImpo
         }
         `,
                     standalone: true,
-                    imports: [NgTemplateOutlet, IconWrapperComponent]
+                    imports: [NgTemplateOutlet, IconWrapperComponent],
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }], propDecorators: { itemTemplate: [{
                 type: Input
@@ -650,11 +672,29 @@ class ActionSheetListComponent {
     renderer;
     ngZone;
     element;
-    groupItems = [];
-    allItems = [];
-    itemTemplate;
+    set groupItems(value) {
+        this._groupItems.set(value);
+    }
+    get groupItems() {
+        return this._groupItems();
+    }
+    set allItems(value) {
+        this._allItems.set(value);
+    }
+    get allItems() {
+        return this._allItems();
+    }
+    set itemTemplate(value) {
+        this._itemTemplate.set(value);
+    }
+    get itemTemplate() {
+        return this._itemTemplate();
+    }
     itemClick = new EventEmitter();
     subscriptions = new Subscription();
+    _groupItems = signal([], ...(ngDevMode ? [{ debugName: "_groupItems" }] : /* istanbul ignore next */ []));
+    _allItems = signal([], ...(ngDevMode ? [{ debugName: "_allItems" }] : /* istanbul ignore next */ []));
+    _itemTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_itemTemplate" }] : /* istanbul ignore next */ []));
     constructor(renderer, ngZone, element) {
         this.renderer = renderer;
         this.ngZone = ngZone;
@@ -692,10 +732,10 @@ class ActionSheetListComponent {
     setAttrIndex(item) {
         return this.allItems.indexOf(item);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: ActionSheetListComponent, deps: [{ token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.32", type: ActionSheetListComponent, isStandalone: true, selector: "[kendoActionSheetList]", inputs: { groupItems: "groupItems", allItems: "allItems", itemTemplate: "itemTemplate" }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: "\n            @for (item of groupItems; track item) {\n              <span kendoActionSheetItem\n                tabindex=\"0\"\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            }\n            ", isInline: true, dependencies: [{ 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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ActionSheetListComponent, deps: [{ token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: ActionSheetListComponent, isStandalone: true, selector: "[kendoActionSheetList]", inputs: { groupItems: "groupItems", allItems: "allItems", itemTemplate: "itemTemplate" }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: "\n            @for (item of groupItems; track item) {\n              <span kendoActionSheetItem\n                tabindex=\"0\"\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            }\n            ", isInline: true, dependencies: [{ 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: ActionSheetListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ActionSheetListComponent, decorators: [{
             type: Component,
             args: [{
                     selector: '[kendoActionSheetList]',
@@ -715,7 +755,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.32", ngImpo
             }
             `,
                     standalone: true,
-                    imports: [ActionSheetItemComponent, NgClass, NgStyle]
+                    imports: [ActionSheetItemComponent, NgClass, NgStyle],
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ElementRef }], propDecorators: { groupItems: [{
                 type: Input
@@ -749,7 +790,11 @@ class ActionSheetComponent {
     /**
      * @hidden
      */
-    currentView = 1;
+    get currentView() { return this._currentView(); }
+    /**
+     * @hidden
+     */
+    set currentView(value) { this._currentView.set(value); }
     /**
      * @hidden
      */
@@ -763,58 +808,99 @@ class ActionSheetComponent {
     /**
      * Specifies the action buttons displayed in the ActionSheet footer.
      */
-    actions;
+    set actions(value) {
+        this._actions.set(value);
+    }
+    get actions() {
+        return this._actions();
+    }
     /**
      * Configures the layout of the action buttons in the footer. By default, actions are arranged horizontally and stretched to fill the container.
      */
-    actionsLayout = {
-        orientation: 'horizontal',
-        alignment: 'stretched'
-    };
+    set actionsLayout(value) {
+        this._actionsLayout.set(value);
+    }
+    get actionsLayout() {
+        return this._actionsLayout();
+    }
     /**
      * Determines whether the ActionSheet closes when the overlay is clicked.
      *
      * @default false
      */
-    overlayClickClose = false;
+    set overlayClickClose(value) {
+        this._overlayClickClose.set(value);
+    }
+    get overlayClickClose() {
+        return this._overlayClickClose();
+    }
     /**
      * Sets the title text displayed in the ActionSheet header.
      */
-    title;
+    set title(value) {
+        this._title.set(value);
+    }
+    get title() {
+        return this._title();
+    }
     /**
      * Sets the subtitle text displayed below the title in the header.
      */
-    subtitle;
+    set subtitle(value) {
+        this._subtitle.set(value);
+    }
+    get subtitle() {
+        return this._subtitle();
+    }
     /**
      * Provides the collection of items rendered in the ActionSheet content area.
      */
-    items;
+    set items(value) {
+        this._items.set(value);
+    }
+    get items() {
+        return this._items();
+    }
     /**
      * Applies CSS classes to the inner ActionSheet element. Accepts any value supported by [`ngClass`](link:site.data.urls.angular['ngclassapi']).
      */
     set cssClass(value) {
-        this._cssClass = value;
-        this.isFullscreen = this.hasFullscreenClass(value);
+        this._cssClass.set(value);
     }
     get cssClass() {
-        return this._cssClass;
+        return this._cssClass();
     }
     /**
      * Applies inline styles to the inner ActionSheet element. Accepts any value supported by [`ngStyle`](link:site.data.urls.angular['ngstyleapi']).
      */
-    cssStyle;
+    set cssStyle(value) {
+        this._cssStyle.set(value);
+    }
+    get cssStyle() {
+        return this._cssStyle();
+    }
     /**
      * Configures the opening and closing animations for the ActionSheet ([see example](https://www.telerik.com/kendo-angular-ui/components/navigation/actionsheet/animations)).
      *
      * @default true
      */
-    animation = true;
+    set animation(value) {
+        this._animation.set(value);
+    }
+    get animation() {
+        return this._animation();
+    }
     /**
      * Controls whether the ActionSheet is expanded or collapsed.
      *
      * @default false
      */
-    expanded = false;
+    set expanded(value) {
+        this._expanded.set(value);
+    }
+    get expanded() {
+        return this._expanded();
+    }
     /**
      * Sets the `aria-labelledby` attribute of the ActionSheet wrapper element.
      * Use this option when the built-in header element is replaced through the [`ActionSheetHeaderTemplate`](https://www.telerik.com/kendo-angular-ui/components/navigation/api/actionsheetheadertemplatedirective)
@@ -823,13 +909,23 @@ class ActionSheetComponent {
      * @remarks
      * This property is related to accessibility.
      */
-    titleId = getId('k-actionsheet-title');
+    set titleId(value) {
+        this._titleId.set(value);
+    }
+    get titleId() {
+        return this._titleId();
+    }
     /**
      * @hidden
      *
      * Determines if the ActionSheet should focus the first focusable element when opened.
      */
-    initialFocus = true;
+    set initialFocus(value) {
+        this._initialFocus.set(value);
+    }
+    get initialFocus() {
+        return this._initialFocus();
+    }
     /**
      * Fires when the `expanded` property of the component is updated.
      * You can use this event to provide two-way binding for the `expanded` property.
@@ -883,13 +979,29 @@ class ActionSheetComponent {
      * @hidden
      */
     footerTemplate;
-    _cssClass;
+    _cssClass = signal(undefined, ...(ngDevMode ? [{ debugName: "_cssClass" }] : /* istanbul ignore next */ []));
+    _actions = signal(undefined, ...(ngDevMode ? [{ debugName: "_actions" }] : /* istanbul ignore next */ []));
+    _actionsLayout = signal({ orientation: 'horizontal', alignment: 'stretched' }, ...(ngDevMode ? [{ debugName: "_actionsLayout" }] : /* istanbul ignore next */ []));
+    _overlayClickClose = signal(false, ...(ngDevMode ? [{ debugName: "_overlayClickClose" }] : /* istanbul ignore next */ []));
+    _title = signal(undefined, ...(ngDevMode ? [{ debugName: "_title" }] : /* istanbul ignore next */ []));
+    _subtitle = signal(undefined, ...(ngDevMode ? [{ debugName: "_subtitle" }] : /* istanbul ignore next */ []));
+    _items = signal(undefined, ...(ngDevMode ? [{ debugName: "_items" }] : /* istanbul ignore next */ []));
+    _cssStyle = signal(undefined, ...(ngDevMode ? [{ debugName: "_cssStyle" }] : /* istanbul ignore next */ []));
+    _animation = signal(true, ...(ngDevMode ? [{ debugName: "_animation" }] : /* istanbul ignore next */ []));
+    _expanded = signal(false, ...(ngDevMode ? [{ debugName: "_expanded" }] : /* istanbul ignore next */ []));
+    _titleId = signal(getId('k-actionsheet-title'), ...(ngDevMode ? [{ debugName: "_titleId" }] : /* istanbul ignore next */ []));
+    _initialFocus = signal(true, ...(ngDevMode ? [{ debugName: "_initialFocus" }] : /* istanbul ignore next */ []));
+    _currentView = signal(1, ...(ngDevMode ? [{ debugName: "_currentView" }] : /* istanbul ignore next */ []));
+    _pendingInitialFocus = signal(false, ...(ngDevMode ? [{ debugName: "_pendingInitialFocus" }] : /* istanbul ignore next */ []));
+    _pendingAnimationExpanded = signal(null, ...(ngDevMode ? [{ debugName: "_pendingAnimationExpanded" }] : /* istanbul ignore next */ []));
     dynamicRTLSubscription;
-    rtl = false;
+    rtl = signal(false, ...(ngDevMode ? [{ debugName: "rtl" }] : /* istanbul ignore next */ []));
     domSubs = new Subscription();
-    player;
+    player = signal(undefined, ...(ngDevMode ? [{ debugName: "player" }] : /* istanbul ignore next */ []));
     animationEnd = new EventEmitter();
-    isFullscreen = false;
+    get _isFullscreen() {
+        return this.hasFullscreenClass(this._cssClass());
+    }
     constructor(element, ngZone, renderer, localizationService, builder, cdr) {
         this.element = element;
         this.ngZone = ngZone;
@@ -899,17 +1011,28 @@ class ActionSheetComponent {
         this.cdr = cdr;
         validatePackage(packageMetadata);
         this.dynamicRTLSubscription = this.localizationService.changes.subscribe(({ rtl }) => {
-            this.rtl = rtl;
-            this.direction = this.rtl ? 'rtl' : 'ltr';
+            this.rtl.set(rtl);
+            this.direction = this.rtl() ? 'rtl' : 'ltr';
         });
     }
     ngAfterViewInit() {
         this.initDomEvents();
         this.setCssVariables();
     }
+    ngAfterViewChecked() {
+        if (this._pendingInitialFocus()) {
+            this._pendingInitialFocus.set(false);
+            this.handleInitialFocus();
+        }
+        const pendingAnimation = this._pendingAnimationExpanded();
+        if (pendingAnimation !== null && this.childContainer) {
+            this._pendingAnimationExpanded.set(null);
+        }
+    }
     ngOnChanges(changes) {
         if (changes['expanded'] && this.expanded) {
-            this.setExpanded(true);
+            this.expandedChange.emit(true);
+            this._pendingInitialFocus.set(true);
         }
     }
     ngOnDestroy() {
@@ -917,8 +1040,8 @@ class ActionSheetComponent {
         if (this.dynamicRTLSubscription) {
             this.dynamicRTLSubscription.unsubscribe();
         }
-        if (this.player) {
-            this.player.destroy();
+        if (this.player()) {
+            this.player().destroy();
         }
     }
     /**
@@ -959,7 +1082,12 @@ class ActionSheetComponent {
         if (this.animation) {
             this.animationEnd.pipe(take(1))
                 .subscribe(() => { this.onAnimationEnd(current); });
-            this.playAnimation(current);
+            if (!this.childContainer) {
+                this._pendingAnimationExpanded.set(current);
+            }
+            else {
+                this.playAnimation(current);
+            }
         }
         else {
             this[current ? 'expand' : 'collapse'].emit();
@@ -1015,7 +1143,7 @@ class ActionSheetComponent {
      */
     get childContainerStyle() {
         const baseStyle = 'bottom: 0px; width: 100%;';
-        return this.isFullscreen ? `${baseStyle} height: 100%;` : baseStyle;
+        return this._isFullscreen ? `${baseStyle} height: 100%;` : baseStyle;
     }
     initDomEvents() {
         if (!this.element) {
@@ -1118,18 +1246,18 @@ class ActionSheetComponent {
         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.player.set(factory.create(this.childContainer.nativeElement));
+        this.player().onDone(() => {
+            if (this.player()) {
                 this.animationEnd.emit();
-                this.player.destroy();
-                this.player = null;
+                this.player().destroy();
+                this.player.set(null);
             }
         });
-        this.player.play();
+        this.player().play();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.32", 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: "17.0.0", version: "20.3.32", type: ActionSheetComponent, isStandalone: true, selector: "kendo-actionsheet", inputs: { actions: "actions", actionsLayout: "actionsLayout", overlayClickClose: "overlayClickClose", title: "title", subtitle: "subtitle", items: "items", cssClass: "cssClass", cssStyle: "cssStyle", animation: "animation", expanded: "expanded", titleId: "titleId", initialFocus: "initialFocus" }, outputs: { expandedChange: "expandedChange", action: "action", expand: "expand", collapse: "collapse", itemClick: "itemClick", overlayClick: "overlayClick" }, host: { properties: { "class.k-actionsheet-container": "this.hostClass", "attr.dir": "this.direction" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", 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: "17.0.0", version: "21.2.23", type: ActionSheetComponent, isStandalone: true, selector: "kendo-actionsheet", inputs: { actions: "actions", actionsLayout: "actionsLayout", overlayClickClose: "overlayClickClose", title: "title", subtitle: "subtitle", items: "items", cssClass: "cssClass", cssStyle: "cssStyle", animation: "animation", expanded: "expanded", titleId: "titleId", initialFocus: "initialFocus" }, outputs: { expandedChange: "expandedChange", action: "action", 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,
@@ -1245,9 +1373,9 @@ class ActionSheetComponent {
             </div>
           </div>
         }
-        `, isInline: true, dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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"] }, { kind: "component", type: ButtonDirective, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
+        `, isInline: true, dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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"] }, { kind: "component", type: ButtonDirective, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: ActionSheetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ActionSheetComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoActionSheet',
@@ -1371,7 +1499,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.32", ngImpo
                         provideComponentName('actionsheet')
                     ],
                     standalone: true,
-                    imports: [NgStyle, NgClass, NgTemplateOutlet, ActionSheetListComponent, ButtonDirective]
+                    imports: [NgStyle, NgClass, NgTemplateOutlet, ActionSheetListComponent, ButtonDirective],
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i1.LocalizationService }, { type: i2.AnimationBuilder }, { type: i0.ChangeDetectorRef }], propDecorators: { hostClass: [{
                 type: HostBinding,
@@ -1448,10 +1577,25 @@ class ActionSheetViewComponent {
     actionSheet;
     renderer;
     host;
-    zone;
-    title;
-    subtitle;
-    titleId = getId('k-actionsheet-title');
+    injector;
+    set title(value) {
+        this._title.set(value);
+    }
+    get title() {
+        return this._title();
+    }
+    set subtitle(value) {
+        this._subtitle.set(value);
+    }
+    get subtitle() {
+        return this._subtitle();
+    }
+    set titleId(value) {
+        this._titleId.set(value);
+    }
+    get titleId() {
+        return this._titleId();
+    }
     hostClass = true;
     transitionDuration = '500ms';
     transitionProperty = 'transform';
@@ -1460,17 +1604,20 @@ class ActionSheetViewComponent {
     footerTemplate;
     actionSheetTemplate;
     ngAfterViewInit() {
-        this.zone.onStable.pipe(take(1)).subscribe(() => {
+        afterNextRender(() => {
             if (this.actionSheet?.actionSheetViews?.length > 1) {
                 this.renderer.addClass(this.host.nativeElement, 'k-actionsheet-view-animated');
             }
-        });
+        }, { injector: this.injector });
     }
-    constructor(actionSheet, renderer, host, zone) {
+    _title = signal(undefined, ...(ngDevMode ? [{ debugName: "_title" }] : /* istanbul ignore next */ []));
+    _subtitle = signal(undefined, ...(ngDevMode ? [{ debugName: "_subtitle" }] : /* istanbul ignore next */ []));
+    _titleId = signal(getId('k-actionsheet-title'), ...(ngDevMode ? [{ debugName: "_titleId" }] : /* istanbul ignore next */ []));
+    constructor(actionSheet, renderer, host, injector) {
         this.actionSheet = actionSheet;
         this.renderer = renderer;
         this.host = host;
-        this.zone = zone;
+        this.injector = injector;
     }
     get orientationClass() {
         return this.actionSheet?.orientationClass;
@@ -1478,8 +1625,8 @@ class ActionSheetViewComponent {
     get alignmentClass() {
         return this.actionSheet?.alignmentClass;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: ActionSheetViewComponent, deps: [{ token: ActionSheetComponent, host: true, optional: true }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.32", type: ActionSheetViewComponent, isStandalone: true, selector: "kendo-actionsheet-view", inputs: { title: "title", subtitle: "subtitle", titleId: "titleId" }, host: { properties: { "class.k-actionsheet-view": "this.hostClass", "style.transition-duration": "this.transitionDuration", "style.transition-property": "this.transitionProperty" } }, queries: [{ propertyName: "headerTemplate", first: true, predicate: ActionSheetHeaderTemplateDirective, descendants: true }, { propertyName: "contentTemplate", first: true, predicate: ActionSheetContentTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: ActionSheetFooterTemplateDirective, descendants: true }, { propertyName: "actionSheetTemplate", first: true, predicate: ActionSheetTemplateDirective, descendants: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ActionSheetViewComponent, deps: [{ token: ActionSheetComponent, host: true, optional: true }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: ActionSheetViewComponent, isStandalone: true, selector: "kendo-actionsheet-view", inputs: { title: "title", subtitle: "subtitle", titleId: "titleId" }, host: { properties: { "class.k-actionsheet-view": "this.hostClass", "style.transition-duration": "this.transitionDuration", "style.transition-property": "this.transitionProperty" } }, queries: [{ propertyName: "headerTemplate", first: true, predicate: ActionSheetHeaderTemplateDirective, descendants: true }, { propertyName: "contentTemplate", first: true, predicate: ActionSheetContentTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: ActionSheetFooterTemplateDirective, descendants: true }, { propertyName: "actionSheetTemplate", first: true, predicate: ActionSheetTemplateDirective, descendants: true }], ngImport: i0, template: `
         @if (actionSheetTemplate) {
           <ng-template
             [ngTemplateOutlet]="actionSheetTemplate?.templateRef">
@@ -1518,9 +1665,9 @@ class ActionSheetViewComponent {
           }
         }
         
-        `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+        `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: ActionSheetViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ActionSheetViewComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-actionsheet-view',
@@ -1565,13 +1712,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.32", ngImpo
         
         `,
                     standalone: true,
-                    imports: [NgClass, NgTemplateOutlet]
+                    imports: [NgClass, NgTemplateOutlet],
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }], ctorParameters: () => [{ type: ActionSheetComponent, decorators: [{
                     type: Optional
                 }, {
                     type: Host
-                }] }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { title: [{
+                }] }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.Injector }], propDecorators: { title: [{
                 type: Input
             }], subtitle: [{
                 type: Input
@@ -1678,10 +1826,10 @@ class BottomNavigationItemTemplateDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: BottomNavigationItemTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.32", type: BottomNavigationItemTemplateDirective, isStandalone: true, selector: "[kendoBottomNavigationItemTemplate]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: BottomNavigationItemTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.23", type: BottomNavigationItemTemplateDirective, isStandalone: true, selector: "[kendoBottomNavigationItemTemplate]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: BottomNavigationItemTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: BottomNavigationItemTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoBottomNavigationItemTemplate]',
@@ -1726,12 +1874,42 @@ const fills = ['solid', 'flat'];
  * @hidden
  */
 class BottomNavigationItemComponent {
-    itemTemplate;
-    item;
-    index;
-    disabledComponent;
-    selectedIdx;
-    orientation;
+    set itemTemplate(value) {
+        this._itemTemplate.set(value);
+    }
+    get itemTemplate() {
+        return this._itemTemplate();
+    }
+    set item(value) {
+        this._item.set(value);
+    }
+    get item() {
+        return this._item();
+    }
+    set index(value) {
+        this._index.set(value);
+    }
+    get index() {
+        return this._index();
+    }
+    set disabledComponent(value) {
+        this._disabledComponent.set(value);
+    }
+    get disabledComponent() {
+        return this._disabledComponent();
+    }
+    set selectedIdx(value) {
+        this._selectedIdx.set(value);
+    }
+    get selectedIdx() {
+        return this._selectedIdx();
+    }
+    set orientation(value) {
+        this._orientation.set(value);
+    }
+    get orientation() {
+        return this._orientation();
+    }
     get disabledClass() {
         return this.item.disabled;
     }
@@ -1752,8 +1930,14 @@ class BottomNavigationItemComponent {
         const customIcon = this.item.iconClass ? this.item.iconClass : '';
         return `${kendoIcon} ${customIcon}`;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: BottomNavigationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.32", 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: `
+    _itemTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_itemTemplate" }] : /* istanbul ignore next */ []));
+    _item = signal(undefined, ...(ngDevMode ? [{ debugName: "_item" }] : /* istanbul ignore next */ []));
+    _index = signal(undefined, ...(ngDevMode ? [{ debugName: "_index" }] : /* istanbul ignore next */ []));
+    _disabledComponent = signal(false, ...(ngDevMode ? [{ debugName: "_disabledComponent" }] : /* istanbul ignore next */ []));
+    _selectedIdx = signal(undefined, ...(ngDevMode ? [{ debugName: "_selectedIdx" }] : /* istanbul ignore next */ []));
+    _orientation = signal(undefined, ...(ngDevMode ? [{ debugName: "_orientation" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: BottomNavigationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", 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: `
         @if (!itemTemplate) {
           @if (itemIcon) {
             <kendo-icon-wrapper
@@ -1773,9 +1957,9 @@ class BottomNavigationItemComponent {
             [ngTemplateOutletContext]="{ $implicit: item }">
           </ng-template>
         }
-        `, isInline: true, dependencies: [{ 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"] }] });
+        `, isInline: true, dependencies: [{ 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: BottomNavigationItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: BottomNavigationItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: '[kendoBottomNavigationItem]',
@@ -1801,7 +1985,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.32", ngImpo
         }
         `,
                     standalone: true,
-                    imports: [IconWrapperComponent, NgTemplateOutlet]
+                    imports: [IconWrapperComponent, NgTemplateOutlet],
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }], propDecorators: { itemTemplate: [{
                 type: Input
@@ -1861,24 +2046,38 @@ class BottomNavigationComponent {
     localization;
     hostElement;
     ngZone;
-    changeDetector;
     renderer;
     /**
      * Provides the collection of items rendered in the BottomNavigation ([see example](https://www.telerik.com/kendo-angular-ui/components/navigation/bottomnavigation/items)).
      */
-    items;
+    set items(value) {
+        this._items.set(value);
+    }
+    get items() {
+        return this._items();
+    }
     /**
      * Shows a top border on the BottomNavigation ([see example](https://www.telerik.com/kendo-angular-ui/components/navigation/bottomnavigation/appearance)).
      *
      * @default false
      */
-    border = false;
+    set border(value) {
+        this._border.set(value);
+    }
+    get border() {
+        return this._border();
+    }
     /**
      * Disables the entire BottomNavigation.
      *
      * @default false
      */
-    disabled = false;
+    set disabled(value) {
+        this._disabled.set(value);
+    }
+    get disabled() {
+        return this._disabled();
+    }
     /**
      * Sets the fill style of the BottomNavigation ([see example](https://www.telerik.com/kendo-angular-ui/components/navigation/bottomnavigation/appearance)). The default value is set by the Kendo theme.
      */
@@ -1887,13 +2086,13 @@ class BottomNavigationComponent {
         this.renderer.removeClass(this._nativeHostElement, `k-bottom-nav-${this.fill}`);
         this.renderer.removeClass(this._nativeHostElement, `k-bottom-nav-${this.themeColor}`);
         if (newFill) {
-            this._fill = fill;
-            this.renderer.addClass(this._nativeHostElement, `k-bottom-nav-${this._fill}`);
+            this._fill.set(fill);
+            this.renderer.addClass(this._nativeHostElement, `k-bottom-nav-${this._fill()}`);
             this.themeColor && this.renderer.addClass(this._nativeHostElement, `k-bottom-nav-${this.themeColor}`);
         }
     }
     get fill() {
-        return this._fill;
+        return this._fill();
     }
     /**
      * Controls how the icon and text label are positioned in the BottomNavigation items.
@@ -1902,11 +2101,11 @@ class BottomNavigationComponent {
      */
     set itemFlow(itemFlow) {
         this.renderer.removeClass(this._nativeHostElement, `k-bottom-nav-item-flow-${this.itemFlow}`);
-        this._itemFlow = itemFlow === 'horizontal' ? 'horizontal' : 'vertical';
-        this.renderer.addClass(this._nativeHostElement, `k-bottom-nav-item-flow-${this._itemFlow}`);
+        this._itemFlow.set(itemFlow === 'horizontal' ? 'horizontal' : 'vertical');
+        this.renderer.addClass(this._nativeHostElement, `k-bottom-nav-item-flow-${this._itemFlow()}`);
     }
     get itemFlow() {
-        return this._itemFlow;
+        return this._itemFlow();
     }
     /**
      * Sets the position and behavior of the BottomNavigation when the page is scrollable ([see example](https://www.telerik.com/kendo-angular-ui/components/navigation/bottomnavigation/position-mode)).
@@ -1915,11 +2114,11 @@ class BottomNavigationComponent {
      */
     set positionMode(positionMode) {
         this.renderer.removeClass(this._nativeHostElement, `k-pos-${this.positionMode}`);
-        this._positionMode = positionMode === 'sticky' ? 'sticky' : 'fixed';
-        this.renderer.addClass(this._nativeHostElement, `k-pos-${this._positionMode}`);
+        this._positionMode.set(positionMode === 'sticky' ? 'sticky' : 'fixed');
+        this.renderer.addClass(this._nativeHostElement, `k-pos-${this._positionMode()}`);
     }
     get positionMode() {
-        return this._positionMode;
+        return this._positionMode();
     }
     /**
      * Sets the theme color of the BottomNavigation ([see example](https://www.telerik.com/kendo-angular-ui/components/navigation/bottomnavigation/appearance)).
@@ -1927,13 +2126,13 @@ class BottomNavigationComponent {
     set themeColor(themeColor) {
         const newColor = colors.find(color => color === themeColor);
         if (newColor) {
-            this.renderer.removeClass(this._nativeHostElement, `k-bottom-nav-${this._themeColor}`);
-            this._themeColor = themeColor;
-            this.renderer.addClass(this._nativeHostElement, `k-bottom-nav-${this._themeColor}`);
+            this.renderer.removeClass(this._nativeHostElement, `k-bottom-nav-${this._themeColor()}`);
+            this._themeColor.set(themeColor);
+            this.renderer.addClass(this._nativeHostElement, `k-bottom-nav-${this._themeColor()}`);
         }
     }
     get themeColor() {
-        return this._themeColor;
+        return this._themeColor();
     }
     /**
      * Fires when a user selects an item. This event is preventable.
@@ -1970,20 +2169,25 @@ class BottomNavigationComponent {
     /**
      * @hidden
      */
-    selectedIdx;
-    _fill;
-    _itemFlow = 'vertical';
-    _positionMode = 'fixed';
-    _themeColor;
+    get selectedIdx() {
+        return this._selectedIdx();
+    }
+    _items = signal(undefined, ...(ngDevMode ? [{ debugName: "_items" }] : /* istanbul ignore next */ []));
+    _border = signal(false, ...(ngDevMode ? [{ debugName: "_border" }] : /* istanbul ignore next */ []));
+    _disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
+    _fill = signal(undefined, ...(ngDevMode ? [{ debugName: "_fill" }] : /* istanbul ignore next */ []));
+    _itemFlow = signal('vertical', ...(ngDevMode ? [{ debugName: "_itemFlow" }] : /* istanbul ignore next */ []));
+    _positionMode = signal('fixed', ...(ngDevMode ? [{ debugName: "_positionMode" }] : /* istanbul ignore next */ []));
+    _themeColor = signal(undefined, ...(ngDevMode ? [{ debugName: "_themeColor" }] : /* istanbul ignore next */ []));
+    _selectedIdx = signal(undefined, ...(ngDevMode ? [{ debugName: "_selectedIdx" }] : /* istanbul ignore next */ []));
     _nativeHostElement;
     dynamicRTLSubscription;
     subscriptions = new Subscription();
     rtl = false;
-    constructor(localization, hostElement, ngZone, changeDetector, renderer) {
+    constructor(localization, hostElement, ngZone, renderer) {
         this.localization = localization;
         this.hostElement = hostElement;
         this.ngZone = ngZone;
-        this.changeDetector = changeDetector;
         this.renderer = renderer;
         validatePackage(packageMetadata);
         this._nativeHostElement = this.hostElement.nativeElement;
@@ -2020,7 +2224,7 @@ class BottomNavigationComponent {
         const eventArgs = new BottomNavigationSelectEvent({ ...args });
         this.select.emit(eventArgs);
         if (!eventArgs.isDefaultPrevented()) {
-            this.selectedIdx = idx;
+            this._selectedIdx.set(idx);
         }
     }
     applyClasses() {
@@ -2056,7 +2260,6 @@ class BottomNavigationComponent {
         };
         this.ngZone.run(() => {
             this.selectItem(itemIdx, args);
-            this.changeDetector.markForCheck();
         });
     }
     keyDownHandler(e) {
@@ -2072,21 +2275,21 @@ class BottomNavigationComponent {
             return itemIndex(item, BOTTOMNAVIGATION_ITEM_INDEX);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.32", 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: "17.0.0", version: "20.3.32", 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: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: BottomNavigationComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", 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'
             },
             provideComponentName('bottomnavigation')
-        ], queries: [{ propertyName: "itemTemplate", first: true, predicate: BottomNavigationItemTemplateDirective, descendants: true }], exportAs: ["kendoBottomNavigation"], ngImport: i0, template: "\n        @if (items) {\n          @for (item of items; track item; let idx = $index) {\n            <span kendoBottomNavigationItem\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          }\n        }\n        ", isInline: true, dependencies: [{ 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"] }] });
+        ], queries: [{ propertyName: "itemTemplate", first: true, predicate: BottomNavigationItemTemplateDirective, descendants: true }], exportAs: ["kendoBottomNavigation"], ngImport: i0, template: "\n        @if (items) {\n          @for (item of items; track item; let idx = $index) {\n            <span kendoBottomNavigationItem\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          }\n        }\n        ", isInline: true, dependencies: [{ 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: BottomNavigationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: BottomNavigationComponent, decorators: [{
             type: Component,
             args: [{
-                    exportAs: 'kendoBottomNavigation',
                     selector: 'kendo-bottomnavigation',
+                    exportAs: 'kendoBottomNavigation',
                     providers: [
                         LocalizationService,
                         {
@@ -2115,9 +2318,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.32", ngImpo
         }
         `,
                     standalone: true,
-                    imports: [BottomNavigationItemComponent, NgClass, NgStyle]
+                    imports: [BottomNavigationItemComponent, NgClass, NgStyle],
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }], ctorParameters: () => [{ type: i1.LocalizationService }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }], propDecorators: { items: [{
+        }], ctorParameters: () => [{ type: i1.LocalizationService }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }], propDecorators: { items: [{
                 type: Input
             }], border: [{
                 type: Input
@@ -2175,10 +2379,10 @@ class BreadCrumbItemTemplateDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: BreadCrumbItemTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.32", type: BreadCrumbItemTemplateDirective, isStandalone: true, selector: "[kendoBreadCrumbItemTemplate]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: BreadCrumbItemTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.23", type: BreadCrumbItemTemplateDirective, isStandalone: true, selector: "[kendoBreadCrumbItemTemplate]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: BreadCrumbItemTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: BreadCrumbItemTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoBreadCrumbItemTemplate]',
@@ -2224,10 +2428,30 @@ const getStylingClasses = (stylingOption, previousValue, newValue) => {
  */
 class BreadCrumbItemComponent {
     el;
-    item;
-    collapseMode;
-    index = -1;
-    itemTemplate;
+    set item(value) {
+        this._item.set(value);
+    }
+    get item() {
+        return this._item();
+    }
+    set collapseMode(value) {
+        this._collapseMode.set(value);
+    }
+    get collapseMode() {
+        return this._collapseMode();
+    }
+    set index(value) {
+        this._index.set(value);
+    }
+    get index() {
+        return this._index();
+    }
+    set itemTemplate(value) {
+        this._itemTemplate.set(value);
+    }
+    get itemTemplate() {
+        return this._itemTemplate();
+    }
     hostClasses = true;
     get isRootItem() {
         return this.item.context.isFirst;
@@ -2237,11 +2461,27 @@ class BreadCrumbItemComponent {
     }
     width;
     disabled = false;
+    get collapsed() {
+        return this._collapsed();
+    }
+    /**
+     * @hidden
+     */
+    setCollapsed(value) {
+        this._collapsed.set(value);
+        this.item.context.collapsed = value;
+    }
+    _item = signal(undefined, ...(ngDevMode ? [{ debugName: "_item" }] : /* istanbul ignore next */ []));
+    _collapseMode = signal(undefined, ...(ngDevMode ? [{ debugName: "_collapseMode" }] : /* istanbul ignore next */ []));
+    _index = signal(-1, ...(ngDevMode ? [{ debugName: "_index" }] : /* istanbul ignore next */ []));
+    _itemTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_itemTemplate" }] : /* istanbul ignore next */ []));
+    _collapsed = signal(false, ...(ngDevMode ? [{ debugName: "_collapsed" }] : /* istanbul ignore next */ []));
     constructor(el) {
         this.el = el;
     }
     ngOnInit() {
         this.disabled = this.item.data && (this.item.data.disabled || this.item.context.isLast);
+        this._collapsed.set(this.item?.context?.collapsed ?? false);
     }
     ngAfterViewInit() {
         if (isDocumentAvailable()) {
@@ -2253,8 +2493,8 @@ class BreadCrumbItemComponent {
             this.width = outerWidth(this.el.nativeElement);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: BreadCrumbItemComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.32", 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", "class.k-breadcrumb-last-item": "this.isLastItem" } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: BreadCrumbItemComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", 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", "class.k-breadcrumb-last-item": "this.isLastItem" } }, ngImport: i0, template: `
         <ng-template #separator>
           <ng-content select="[kendoBreadCrumbSeparator]"></ng-content>
         </ng-template>
@@ -2263,7 +2503,7 @@ class BreadCrumbItemComponent {
           <ng-container *ngTemplateOutlet="separator"></ng-container>
         }
         
-        @if (!item.context.collapsed) {
+        @if (!collapsed) {
           @if (!itemTemplate) {
             <span
                 [ngClass]="{
@@ -2307,9 +2547,9 @@ class BreadCrumbItemComponent {
         @if (collapseMode !== 'wrap') {
           <ng-container *ngTemplateOutlet="separator"></ng-container>
         }
-        `, isInline: true, dependencies: [{ 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"] }] });
+        `, isInline: true, dependencies: [{ 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: BreadCrumbItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: BreadCrumbItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: '[kendoBreadCrumbItem]',
@@ -2322,7 +2562,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.32", ngImpo
           <ng-container *ngTemplateOutlet="separator"></ng-container>
         }
         
-        @if (!item.context.collapsed) {
+        @if (!collapsed) {
           @if (!itemTemplate) {
             <span
                 [ngClass]="{
@@ -2368,7 +2608,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.32", ngImpo
         }
         `,
                     standalone: true,
-                    imports: [NgTemplateOutlet, NgClass, IconWrapperComponent]
+                    imports: [NgTemplateOutlet, NgClass, IconWrapperComponent],
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { item: [{
                 type: Input
@@ -2451,8 +2692,8 @@ class BreadCrumbSeparatorDirective {
     ngOnDestroy() {
         this.localizationChangesSubscription.unsubscribe();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: BreadCrumbSeparatorDirective, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.32", type: BreadCrumbSeparatorDirective, isStandalone: true, selector: "[kendoBreadCrumbSeparator]", inputs: { icon: "icon", svgIcon: "svgIcon" }, host: { properties: { "attr.aria-hidden": "this.ariaHidden" } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: BreadCrumbSeparatorDirective, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.23", type: BreadCrumbSeparatorDirective, isStandalone: true, selector: "[kendoBreadCrumbSeparator]", inputs: { icon: "icon", svgIcon: "svgIcon" }, host: { properties: { "attr.aria-hidden": "this.ariaHidden" } }, ngImport: i0, template: `
         <kendo-icon-wrapper
             size='xsmall'
             [name]="icon"
@@ -2462,7 +2703,7 @@ class BreadCrumbSeparatorDirective {
         </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: "20.3.32", ngImport: i0, type: BreadCrumbSeparatorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: BreadCrumbSeparatorDirective, decorators: [{
             type: Component,
             args: [{
                     selector: '[kendoBreadCrumbSeparator]',
@@ -2493,18 +2734,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.32", ngImpo
 class BreadCrumbListComponent {
     el;
     zone;
-    items = [];
-    itemTemplate;
-    collapseMode = 'auto';
-    separatorIcon;
-    separatorSVGIcon;
+    cdr;
+    set items(value) {
+        this._items.set(value);
+    }
+    get items() {
+        return this._items();
+    }
+    set itemTemplate(value) {
+        this._itemTemplate.set(value);
+    }
+    get itemTemplate() {
+        return this._itemTemplate();
+    }
+    set collapseMode(value) {
+        this._collapseMode.set(value);
+    }
+    get collapseMode() {
+        return this._collapseMode();
+    }
+    set separatorIcon(value) {
+        this._separatorIcon.set(value);
+    }
+    get separatorIcon() {
+        return this._separatorIcon();
+    }
+    set separatorSVGIcon(value) {
+        this._separatorSVGIcon.set(value);
+    }
+    get separatorSVGIcon() {
+        return this._separatorSVGIcon();
+    }
     itemClick = new EventEmitter();
     renderedItems;
     isRootItemContainer;
     domEventsSubscription;
-    constructor(el, zone) {
+    _items = signal([], ...(ngDevMode ? [{ debugName: "_items" }] : /* istanbul ignore next */ []));
+    _itemTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_itemTemplate" }] : /* istanbul ignore next */ []));
+    _collapseMode = signal('auto', ...(ngDevMode ? [{ debugName: "_collapseMode" }] : /* istanbul ignore next */ []));
+    _separatorIcon = signal(undefined, ...(ngDevMode ? [{ debugName: "_separatorIcon" }] : /* istanbul ignore next */ []));
+    _separatorSVGIcon = signal(undefined, ...(ngDevMode ? [{ debugName: "_separatorSVGIcon" }] : /* istanbul ignore next */ []));
+    constructor(el, zone, cdr) {
         this.el = el;
         this.zone = zone;
+        this.cdr = cdr;
         const element = this.el.nativeElement;
         this.isRootItemContainer = element.classList.contains('k-breadcrumb-root-item-container');
         this.zone.runOutsideAngular(() => {
@@ -2521,16 +2794,24 @@ class BreadCrumbListComponent {
     ngOnDestroy() {
         this.domEventsSubscription.unsubscribe();
     }
+    /**
+     * @hidden
+     * Forces synchronous change detection so in-place mutations to item.context.collapsed
+     * are reflected in the template.
+     */
+    refresh() {
+        this.cdr.detectChanges();
+    }
     getItemIndex(target) {
         const item = closestItem(target, BREADCRUMB_ITEM_INDEX, this.el.nativeElement);
         if (item) {
             return itemIndex(item, BREADCRUMB_ITEM_INDEX);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: BreadCrumbListComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.32", 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        @for (item of items; track item; let i = $index; let isFirst = $first; let isLast = $last) {\n          @if (!(collapseMode === 'wrap' && isFirst) || isRootItemContainer) {\n            <li\n              #renderedItem\n              kendoBreadCrumbItem\n              [attr.data-kendo-breadcrumb-index]=\"i\"\n              [item]=\"item\"\n              [index]=\"i\"\n              [collapseMode]=\"collapseMode\"\n              [itemTemplate]=\"itemTemplate\"\n              >\n              @if (collapseMode === 'wrap' && !isFirst) {\n                <span kendoBreadCrumbSeparator [icon]=\"separatorIcon\" [svgIcon]=\"separatorSVGIcon\"></span>\n              }\n              @if (collapseMode !== 'wrap' && !isLast && !(item?.context.collapsed && items[i + 1]?.context.collapsed)) {\n                <span\n                  kendoBreadCrumbSeparator\n                  [icon]=\"separatorIcon\"\n                  [svgIcon]=\"separatorSVGIcon\"\n                ></span>\n              }\n            </li>\n          }\n        }\n        ", isInline: true, dependencies: [{ kind: "component", type: BreadCrumbItemComponent, selector: "[kendoBreadCrumbItem]", inputs: ["item", "collapseMode", "index", "itemTemplate"] }, { kind: "component", type: BreadCrumbSeparatorDirective, selector: "[kendoBreadCrumbSeparator]", inputs: ["icon", "svgIcon"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: BreadCrumbListComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", 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        @for (item of items; track item; let i = $index; let isFirst = $first; let isLast = $last) {\n          @if (!(collapseMode === 'wrap' && isFirst) || isRootItemContainer) {\n            <li\n              #renderedItem\n              kendoBreadCrumbItem\n              [attr.data-kendo-breadcrumb-index]=\"i\"\n              [item]=\"item\"\n              [index]=\"i\"\n              [collapseMode]=\"collapseMode\"\n              [itemTemplate]=\"itemTemplate\"\n              >\n              @if (collapseMode === 'wrap' && !isFirst) {\n                <span kendoBreadCrumbSeparator [icon]=\"separatorIcon\" [svgIcon]=\"separatorSVGIcon\"></span>\n              }\n              @if (collapseMode !== 'wrap' && !isLast && !(item?.context.collapsed && items[i + 1]?.context.collapsed)) {\n                <span\n                  kendoBreadCrumbSeparator\n                  [icon]=\"separatorIcon\"\n                  [svgIcon]=\"separatorSVGIcon\"\n                ></span>\n              }\n            </li>\n          }\n        }\n        ", isInline: true, dependencies: [{ kind: "component", type: BreadCrumbItemComponent, selector: "[kendoBreadCrumbItem]", inputs: ["item", "collapseMode", "index", "itemTemplate"] }, { kind: "component", type: BreadCrumbSeparatorDirective, selector: "[kendoBreadCrumbSeparator]", inputs: ["icon", "svgIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: BreadCrumbListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: BreadCrumbListComponent, decorators: [{
             type: Component,
             args: [{
                     selector: '[kendoBreadCrumbList]',
@@ -2561,9 +2842,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.32", ngImpo
         }
         `,
                     standalone: true,
-                    imports: [BreadCrumbItemComponent, BreadCrumbSeparatorDirective]
+                    imports: [BreadCrumbItemComponent, BreadCrumbSeparatorDirective],
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { items: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }], propDecorators: { items: [{
                 type: Input
             }], itemTemplate: [{
                 type: Input
@@ -2589,7 +2871,12 @@ 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);
+const toggleFirst = (collapsed) => (itemComponents) => {
+    const target = itemComponents.find(ic => getCollapsed(ic) === collapsed);
+    if (target) {
+        target.setCollapsed(!collapsed);
+    }
+};
 /**
  * @hidden
  */
@@ -2641,11 +2928,11 @@ class BreadCrumbComponent {
      * Configures the collection of items that will be rendered in the Breadcrumb.
      */
     set items(items) {
-        this._items = items || [];
-        this.updateItems.next(this._items);
+        this._items.set(items || []);
+        this.updateItems.next(this._items());
     }
     get items() {
-        return this._items;
+        return this._items();
     }
     /**
      * Specifies the name of a [built-in font icon](https://www.telerik.com/kendo-angular-ui/components/icons/icon/icon-list) in a Kendo UI theme to be rendered as a separator.
@@ -2665,21 +2952,21 @@ class BreadCrumbComponent {
         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._collapseMode.set(mode || 'auto');
         this.updateItems.next(this.items);
     }
     get collapseMode() {
-        return this._collapseMode;
+        return this._collapseMode();
     }
     /**
      * Determines the padding of all Breadcrumb elements. The default value is set by the Kendo theme.
      */
     set size(size) {
         this.handleClasses(size, 'size');
-        this._size = size;
+        this._size.set(size);
     }
     get size() {
-        return this._size;
+        return this._size();
     }
     /**
      * Fires when you click a Breadcrumb item. The event will not be fired by disabled items and the last item.
@@ -2711,9 +2998,9 @@ class BreadCrumbComponent {
     }
     itemsData$;
     firstItem$;
-    _items = [];
-    _collapseMode = 'auto';
-    _size;
+    _items = signal([], ...(ngDevMode ? [{ debugName: "_items" }] : /* istanbul ignore next */ []));
+    _collapseMode = signal('auto', ...(ngDevMode ? [{ debugName: "_collapseMode" }] : /* istanbul ignore next */ []));
+    _size = signal(undefined, ...(ngDevMode ? [{ debugName: "_size" }] : /* istanbul ignore next */ []));
     updateItems = new ReplaySubject();
     afterViewInit = new Subject();
     subscriptions = new Subscription();
@@ -2772,9 +3059,10 @@ class BreadCrumbComponent {
             .map(el => outerWidth(el.nativeElement))
             .reduce((acc, curr) => acc + curr, 0));
         const nextExpandWidth = Math.ceil(([...autoCollapseCandidates].reverse().find(collapsed) || { width: 0 }).width);
-        // // shrink
+        // shrink
         if (componentWidth <= itemsContainerWidth && autoCollapseCandidates.find(expanded)) {
             collapseFirst(autoCollapseCandidates);
+            this.listComponent.refresh();
             // needed by resize sensor
             this.cdr.detectChanges();
             return this.handleResize();
@@ -2782,6 +3070,7 @@ class BreadCrumbComponent {
         // expand
         if (componentWidth > itemsContainerWidth + nextExpandWidth && autoCollapseCandidates.find(collapsed)) {
             expandFirst([...autoCollapseCandidates].reverse());
+            this.listComponent.refresh();
             // needed by resize sensor
             this.cdr.detectChanges();
             return this.handleResize();
@@ -2821,8 +3110,8 @@ class BreadCrumbComponent {
             });
         }));
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.32", 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: "17.0.0", version: "20.3.32", 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: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", 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: "17.0.0", version: "21.2.23", 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,
@@ -2856,13 +3145,13 @@ class BreadCrumbComponent {
           [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: "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" }] });
+        `, isInline: true, dependencies: [{ 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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: BreadCrumbComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: BreadCrumbComponent, decorators: [{
             type: Component,
             args: [{
-                    exportAs: 'kendoBreadCrumb',
                     selector: 'kendo-breadcrumb',
+                    exportAs: 'kendoBreadCrumb',
                     providers: [
                         LocalizationService,
                         {
@@ -2900,7 +3189,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.32", ngImpo
         <kendo-resize-sensor [rateLimit]="1000" #resizeSensor></kendo-resize-sensor>
         `,
                     standalone: true,
-                    imports: [BreadCrumbListComponent, NgClass, ResizeSensorComponent, AsyncPipe]
+                    imports: [BreadCrumbListComponent, NgClass, ResizeSensorComponent, AsyncPipe],
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }], ctorParameters: () => [{ type: i1.LocalizationService }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.Renderer2 }], propDecorators: { items: [{
                 type: Input
@@ -3094,11 +3384,11 @@ const KENDO_NAVIGATION = [
  * ```
  */
 class AppBarModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: AppBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.32", ngImport: i0, type: AppBarModule, imports: [AppBarComponent, AppBarSectionComponent, AppBarSpacerComponent], exports: [AppBarComponent, AppBarSectionComponent, AppBarSpacerComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: AppBarModule });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: AppBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.23", ngImport: i0, type: AppBarModule, imports: [AppBarComponent, AppBarSectionComponent, AppBarSpacerComponent], exports: [AppBarComponent, AppBarSectionComponent, AppBarSpacerComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: AppBarModule });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: AppBarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: AppBarModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [...KENDO_APPBAR],
@@ -3127,11 +3417,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.32", ngImpo
  * ```
  */
 class NavigationModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: NavigationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.32", ngImport: i0, type: NavigationModule, imports: [ActionSheetComponent, ActionSheetViewComponent, ActionSheetHeaderTemplateDirective, ActionSheetItemTemplateDirective, ActionSheetContentTemplateDirective, ActionSheetFooterTemplateDirective, ActionSheetTemplateDirective, AppBarComponent, AppBarSectionComponent, AppBarSpacerComponent, BottomNavigationComponent, BottomNavigationItemTemplateDirective, BreadCrumbComponent, BreadCrumbItemTemplateDirective], exports: [ActionSheetComponent, ActionSheetViewComponent, ActionSheetHeaderTemplateDirective, ActionSheetItemTemplateDirective, ActionSheetContentTemplateDirective, ActionSheetFooterTemplateDirective, ActionSheetTemplateDirective, AppBarComponent, AppBarSectionComponent, AppBarSpacerComponent, BottomNavigationComponent, BottomNavigationItemTemplateDirective, BreadCrumbComponent, BreadCrumbItemTemplateDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: NavigationModule, providers: [IconsService, ResizeBatchService], imports: [ActionSheetComponent, BottomNavigationComponent, BreadCrumbComponent] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: NavigationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.23", ngImport: i0, type: NavigationModule, imports: [ActionSheetComponent, ActionSheetViewComponent, ActionSheetHeaderTemplateDirective, ActionSheetItemTemplateDirective, ActionSheetContentTemplateDirective, ActionSheetFooterTemplateDirective, ActionSheetTemplateDirective, AppBarComponent, AppBarSectionComponent, AppBarSpacerComponent, BottomNavigationComponent, BottomNavigationItemTemplateDirective, BreadCrumbComponent, BreadCrumbItemTemplateDirective], exports: [ActionSheetComponent, ActionSheetViewComponent, ActionSheetHeaderTemplateDirective, ActionSheetItemTemplateDirective, ActionSheetContentTemplateDirective, ActionSheetFooterTemplateDirective, ActionSheetTemplateDirective, AppBarComponent, AppBarSectionComponent, AppBarSpacerComponent, BottomNavigationComponent, BottomNavigationItemTemplateDirective, BreadCrumbComponent, BreadCrumbItemTemplateDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: NavigationModule, providers: [IconsService, ResizeBatchService], imports: [ActionSheetComponent, BottomNavigationComponent, BreadCrumbComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: NavigationModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: NavigationModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...KENDO_NAVIGATION],
@@ -3161,11 +3451,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.32", ngImpo
  * ```
  */
 class BreadCrumbModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: BreadCrumbModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.32", ngImport: i0, type: BreadCrumbModule, imports: [BreadCrumbComponent, BreadCrumbItemTemplateDirective], exports: [BreadCrumbComponent, BreadCrumbItemTemplateDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: BreadCrumbModule, providers: [IconsService, ResizeBatchService], imports: [BreadCrumbComponent] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: BreadCrumbModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.23", ngImport: i0, type: BreadCrumbModule, imports: [BreadCrumbComponent, BreadCrumbItemTemplateDirective], exports: [BreadCrumbComponent, BreadCrumbItemTemplateDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: BreadCrumbModule, providers: [IconsService, ResizeBatchService], imports: [BreadCrumbComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: BreadCrumbModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: BreadCrumbModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [...KENDO_BREADCRUMB],
@@ -3195,11 +3485,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.32", ngImpo
  * ```
  */
 class BottomNavigationModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: BottomNavigationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.32", ngImport: i0, type: BottomNavigationModule, imports: [BottomNavigationComponent, BottomNavigationItemTemplateDirective], exports: [BottomNavigationComponent, BottomNavigationItemTemplateDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: BottomNavigationModule, providers: [IconsService], imports: [BottomNavigationComponent] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: BottomNavigationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.23", ngImport: i0, type: BottomNavigationModule, imports: [BottomNavigationComponent, BottomNavigationItemTemplateDirective], exports: [BottomNavigationComponent, BottomNavigationItemTemplateDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: BottomNavigationModule, providers: [IconsService], imports: [BottomNavigationComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: BottomNavigationModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: BottomNavigationModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [...KENDO_BOTTOMNAVIGATION],
@@ -3229,11 +3519,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.32", ngImpo
  * ```
  */
 class ActionSheetModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: ActionSheetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.32", ngImport: i0, type: ActionSheetModule, imports: [ActionSheetComponent, ActionSheetViewComponent, ActionSheetHeaderTemplateDirective, ActionSheetItemTemplateDirective, ActionSheetContentTemplateDirective, ActionSheetFooterTemplateDirective, ActionSheetTemplateDirective], exports: [ActionSheetComponent, ActionSheetViewComponent, ActionSheetHeaderTemplateDirective, ActionSheetItemTemplateDirective, ActionSheetContentTemplateDirective, ActionSheetFooterTemplateDirective, ActionSheetTemplateDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: ActionSheetModule, providers: [IconsService], imports: [ActionSheetComponent] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ActionSheetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.23", ngImport: i0, type: ActionSheetModule, imports: [ActionSheetComponent, ActionSheetViewComponent, ActionSheetHeaderTemplateDirective, ActionSheetItemTemplateDirective, ActionSheetContentTemplateDirective, ActionSheetFooterTemplateDirective, ActionSheetTemplateDirective], exports: [ActionSheetComponent, ActionSheetViewComponent, ActionSheetHeaderTemplateDirective, ActionSheetItemTemplateDirective, ActionSheetContentTemplateDirective, ActionSheetFooterTemplateDirective, ActionSheetTemplateDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ActionSheetModule, providers: [IconsService], imports: [ActionSheetComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: ActionSheetModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ActionSheetModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [...KENDO_ACTIONSHEET],