npm - @progress/kendo-angular-navigation - Versions diffs - 25.3.1-develop.2 → 25.4.0-develop.10 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/fesm2022/progress-kendo-angular-navigation.mjs +511 -221
package/{types/progress-kendo-angular-navigation.d.ts → index.d.ts} +112 -37
package/package-metadata.mjs +2 -2
package/package.json +10 -11

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

@@ -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: 1791536869,
-    version: '25.3.1-develop.2',
+    publishDate: 1792513813,
+    version: '25.4.0-develop.10',
     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" }] : []));
+    _position = signal(DEFAULT_POSITION, ...(ngDevMode ? [{ debugName: "_position" }] : []));
+    _positionMode = signal(DEFAULT_POSITION_MODE, ...(ngDevMode ? [{ debugName: "_positionMode" }] : []));
     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: "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: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", 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.33", 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: "21.2.23", ngImport: i0, type: AppBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", 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: "21.2.23", 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: "21.2.23", ngImpo
  */
 class AppBarSectionComponent {
     hostClass = true;
-    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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: AppBarSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.33", 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: "21.2.23", ngImport: i0, type: AppBarSectionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", 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: "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 });
+    _width = signal(undefined, ...(ngDevMode ? [{ debugName: "_width" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", 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.33", 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: "21.2.23", ngImport: i0, type: AppBarSpacerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", 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: "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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", 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.33", type: ActionSheetHeaderTemplateDirective, isStandalone: true, selector: "[kendoActionSheetHeaderTemplate]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ActionSheetHeaderTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", 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: "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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", 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.33", type: ActionSheetItemTemplateDirective, isStandalone: true, selector: "[kendoActionSheetItemTemplate]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ActionSheetItemTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", 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: "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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", 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.33", type: ActionSheetContentTemplateDirective, isStandalone: true, selector: "[kendoActionSheetContentTemplate]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ActionSheetContentTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", 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: "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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", 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.33", type: ActionSheetFooterTemplateDirective, isStandalone: true, selector: "[kendoActionSheetFooterTemplate]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ActionSheetFooterTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", 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: "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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", 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.33", type: ActionSheetTemplateDirective, isStandalone: true, selector: "[kendoActionSheetTemplate]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ActionSheetTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", 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" }] : []));
+    _item = signal(undefined, ...(ngDevMode ? [{ debugName: "_item" }] : []));
     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: "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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: ActionSheetItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.33", 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: "21.2.23", ngImport: i0, type: ActionSheetItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: ActionSheetItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: '[kendoActionSheetItem]',
@@ -632,7 +653,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", 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" }] : []));
+    _allItems = signal([], ...(ngDevMode ? [{ debugName: "_allItems" }] : []));
+    _itemTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_itemTemplate" }] : []));
     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: "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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", 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.33", 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: "21.2.23", ngImport: i0, type: ActionSheetListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: ActionSheetListComponent, decorators: [{
             type: Component,
             args: [{
                     selector: '[kendoActionSheetList]',
@@ -715,7 +755,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", 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" }] : []));
+    _actions = signal(undefined, ...(ngDevMode ? [{ debugName: "_actions" }] : []));
+    _actionsLayout = signal({ orientation: 'horizontal', alignment: 'stretched' }, ...(ngDevMode ? [{ debugName: "_actionsLayout" }] : []));
+    _overlayClickClose = signal(false, ...(ngDevMode ? [{ debugName: "_overlayClickClose" }] : []));
+    _title = signal(undefined, ...(ngDevMode ? [{ debugName: "_title" }] : []));
+    _subtitle = signal(undefined, ...(ngDevMode ? [{ debugName: "_subtitle" }] : []));
+    _items = signal(undefined, ...(ngDevMode ? [{ debugName: "_items" }] : []));
+    _cssStyle = signal(undefined, ...(ngDevMode ? [{ debugName: "_cssStyle" }] : []));
+    _animation = signal(true, ...(ngDevMode ? [{ debugName: "_animation" }] : []));
+    _expanded = signal(false, ...(ngDevMode ? [{ debugName: "_expanded" }] : []));
+    _titleId = signal(getId('k-actionsheet-title'), ...(ngDevMode ? [{ debugName: "_titleId" }] : []));
+    _initialFocus = signal(true, ...(ngDevMode ? [{ debugName: "_initialFocus" }] : []));
+    _currentView = signal(1, ...(ngDevMode ? [{ debugName: "_currentView" }] : []));
+    _pendingInitialFocus = signal(false, ...(ngDevMode ? [{ debugName: "_pendingInitialFocus" }] : []));
+    _pendingAnimationExpanded = signal(null, ...(ngDevMode ? [{ debugName: "_pendingAnimationExpanded" }] : []));
     dynamicRTLSubscription;
-    rtl = false;
+    rtl = signal(false, ...(ngDevMode ? [{ debugName: "rtl" }] : []));
     domSubs = new Subscription();
-    player;
+    player = signal(undefined, ...(ngDevMode ? [{ debugName: "player" }] : []));
     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: "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: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", 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.33", 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: "21.2.23", ngImport: i0, type: ActionSheetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: ActionSheetComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoActionSheet',
@@ -1371,7 +1499,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", 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" }] : []));
+    _subtitle = signal(undefined, ...(ngDevMode ? [{ debugName: "_subtitle" }] : []));
+    _titleId = signal(getId('k-actionsheet-title'), ...(ngDevMode ? [{ debugName: "_titleId" }] : []));
+    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: "21.2.23", 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: "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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", 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: "20.3.33", 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: "21.2.23", ngImport: i0, type: ActionSheetViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: ActionSheetViewComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-actionsheet-view',
@@ -1565,13 +1712,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", 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: "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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", 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.33", type: BottomNavigationItemTemplateDirective, isStandalone: true, selector: "[kendoBottomNavigationItemTemplate]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: BottomNavigationItemTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", 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: "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: `
+    _itemTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_itemTemplate" }] : []));
+    _item = signal(undefined, ...(ngDevMode ? [{ debugName: "_item" }] : []));
+    _index = signal(undefined, ...(ngDevMode ? [{ debugName: "_index" }] : []));
+    _disabledComponent = signal(false, ...(ngDevMode ? [{ debugName: "_disabledComponent" }] : []));
+    _selectedIdx = signal(undefined, ...(ngDevMode ? [{ debugName: "_selectedIdx" }] : []));
+    _orientation = signal(undefined, ...(ngDevMode ? [{ debugName: "_orientation" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: BottomNavigationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.33", 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: "21.2.23", ngImport: i0, type: BottomNavigationItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: BottomNavigationItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: '[kendoBottomNavigationItem]',
@@ -1801,7 +1985,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", 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" }] : []));
+    _border = signal(false, ...(ngDevMode ? [{ debugName: "_border" }] : []));
+    _disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
+    _fill = signal(undefined, ...(ngDevMode ? [{ debugName: "_fill" }] : []));
+    _itemFlow = signal('vertical', ...(ngDevMode ? [{ debugName: "_itemFlow" }] : []));
+    _positionMode = signal('fixed', ...(ngDevMode ? [{ debugName: "_positionMode" }] : []));
+    _themeColor = signal(undefined, ...(ngDevMode ? [{ debugName: "_themeColor" }] : []));
+    _selectedIdx = signal(undefined, ...(ngDevMode ? [{ debugName: "_selectedIdx" }] : []));
     _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: "21.2.23", 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: "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: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", 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: "20.3.33", 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: "21.2.23", ngImport: i0, type: BottomNavigationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", 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: "21.2.23", 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: "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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", 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.33", type: BreadCrumbItemTemplateDirective, isStandalone: true, selector: "[kendoBreadCrumbItemTemplate]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: BreadCrumbItemTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", 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" }] : []));
+    _collapseMode = signal(undefined, ...(ngDevMode ? [{ debugName: "_collapseMode" }] : []));
+    _index = signal(-1, ...(ngDevMode ? [{ debugName: "_index" }] : []));
+    _itemTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_itemTemplate" }] : []));
+    _collapsed = signal(false, ...(ngDevMode ? [{ debugName: "_collapsed" }] : []));
     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: "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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: BreadCrumbItemComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.33", 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: "21.2.23", ngImport: i0, type: BreadCrumbItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: BreadCrumbItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: '[kendoBreadCrumbItem]',
@@ -2322,7 +2562,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", 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: "21.2.23", 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: "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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", 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.33", 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: "21.2.23", ngImport: i0, type: BreadCrumbSeparatorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: BreadCrumbSeparatorDirective, decorators: [{
             type: Component,
             args: [{
                     selector: '[kendoBreadCrumbSeparator]',
@@ -2493,18 +2734,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", 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" }] : []));
+    _itemTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_itemTemplate" }] : []));
+    _collapseMode = signal('auto', ...(ngDevMode ? [{ debugName: "_collapseMode" }] : []));
+    _separatorIcon = signal(undefined, ...(ngDevMode ? [{ debugName: "_separatorIcon" }] : []));
+    _separatorSVGIcon = signal(undefined, ...(ngDevMode ? [{ debugName: "_separatorSVGIcon" }] : []));
+    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: "21.2.23", ngImport: i0, type: BreadCrumbListComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], 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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", 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: "20.3.33", 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: "21.2.23", ngImport: i0, type: BreadCrumbListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: BreadCrumbListComponent, decorators: [{
             type: Component,
             args: [{
                     selector: '[kendoBreadCrumbList]',
@@ -2561,9 +2842,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", 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" }] : []));
+    _collapseMode = signal('auto', ...(ngDevMode ? [{ debugName: "_collapseMode" }] : []));
+    _size = signal(undefined, ...(ngDevMode ? [{ debugName: "_size" }] : []));
     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: "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: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", 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.33", 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: "21.2.23", ngImport: i0, type: BreadCrumbComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", 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: "21.2.23", 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: "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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: AppBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.33", ngImport: i0, type: AppBarModule, imports: [AppBarComponent, AppBarSectionComponent, AppBarSpacerComponent], exports: [AppBarComponent, AppBarSectionComponent, AppBarSpacerComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: AppBarModule });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: AppBarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: AppBarModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [...KENDO_APPBAR],
@@ -3127,11 +3417,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
  * ```
  */
 class NavigationModule {
-    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] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: NavigationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.33", 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.33", ngImport: i0, type: NavigationModule, providers: [IconsService, ResizeBatchService], imports: [ActionSheetComponent, BottomNavigationComponent, BreadCrumbComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: NavigationModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: NavigationModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...KENDO_NAVIGATION],
@@ -3161,11 +3451,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
  * ```
  */
 class BreadCrumbModule {
-    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] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: BreadCrumbModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.33", ngImport: i0, type: BreadCrumbModule, imports: [BreadCrumbComponent, BreadCrumbItemTemplateDirective], exports: [BreadCrumbComponent, BreadCrumbItemTemplateDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: BreadCrumbModule, providers: [IconsService, ResizeBatchService], imports: [BreadCrumbComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: BreadCrumbModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: BreadCrumbModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [...KENDO_BREADCRUMB],
@@ -3195,11 +3485,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
  * ```
  */
 class BottomNavigationModule {
-    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] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: BottomNavigationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.33", ngImport: i0, type: BottomNavigationModule, imports: [BottomNavigationComponent, BottomNavigationItemTemplateDirective], exports: [BottomNavigationComponent, BottomNavigationItemTemplateDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: BottomNavigationModule, providers: [IconsService], imports: [BottomNavigationComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: BottomNavigationModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: BottomNavigationModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [...KENDO_BOTTOMNAVIGATION],
@@ -3229,11 +3519,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
  * ```
  */
 class ActionSheetModule {
-    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] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: ActionSheetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.33", 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.33", ngImport: i0, type: ActionSheetModule, providers: [IconsService], imports: [ActionSheetComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ActionSheetModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: ActionSheetModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [...KENDO_ACTIONSHEET],