@progress/kendo-angular-layout 25.1.0-develop.1 → 25.1.0-develop.3

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

@@ -3,11 +3,11 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
-import { Injectable, Directive, Optional, isDevMode, ContentChildren, ViewChildren, HostBinding, ViewChild, Input, SkipSelf, Host, Component, EventEmitter, forwardRef, HostListener, ContentChild, Output, Inject, QueryList, NgZone, ElementRef, ViewEncapsulation, TemplateRef, NgModule } from '@angular/core';
+import { Injectable, Directive, Optional, isDevMode, signal, ContentChildren, ViewChildren, HostBinding, ViewChild, Input, SkipSelf, Host, ChangeDetectionStrategy, Component, EventEmitter, forwardRef, HostListener, ContentChild, Output, Inject, QueryList, NgZone, afterNextRender, ElementRef, ViewEncapsulation, computed, TemplateRef, NgModule } from '@angular/core';
 import * as i1 from '@progress/kendo-angular-l10n';
 import { LocalizationService, L10N_PREFIX, ComponentMessages } from '@progress/kendo-angular-l10n';
 import * as i1$1 from '@progress/kendo-angular-common';
-import { Keys, getLicenseMessage, shouldShowValidationUI, normalizeKeys, WatermarkOverlayComponent, KENDO_WEBMCP_HOST, provideComponentName, isDocumentAvailable, anyChanged, isObjectPresent, removeHTMLAttributes, parseAttributes, setHTMLAttributes, DraggableDirective, PreventableEvent as PreventableEvent$1, guid, ResizeSensorComponent, hasObservers, isPresent as isPresent$1, focusableSelector, isChanged } from '@progress/kendo-angular-common';
+import { Keys, getLicenseMessage, shouldShowValidationUI, normalizeKeys, WatermarkOverlayComponent, KENDO_WEBMCP_HOST, provideComponentName, isDocumentAvailable, isObjectPresent, removeHTMLAttributes, parseAttributes, setHTMLAttributes, DraggableDirective, PreventableEvent as PreventableEvent$1, guid, ResizeSensorComponent, hasObservers, isPresent as isPresent$1, focusableSelector, isChanged } from '@progress/kendo-angular-common';
 import { validatePackage } from '@progress/kendo-licensing';
 import * as i2 from '@angular/animations';
 import { trigger, state, style, transition, animate, AUTO_STYLE } from '@angular/animations';
@@ -29,8 +29,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1786626694,
-    version: '25.1.0-develop.1',
+    publishDate: 1787036864,
+    version: '25.1.0-develop.3',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };
 
@@ -324,25 +324,45 @@ class PanelBarItemComponent {
     /**
      * Sets the title of the PanelBar item ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/panelbar/items#titles)).
      */
-    title;
+    set title(value) {
+        this._title.set(value);
+    }
+    get title() {
+        return this._title();
+    }
     /**
      * Allows the component to set the `"id"` property to each item.
      * Used to set the `id` attributes of the nested elements and to enable the WAI-ARIA support.
      */
-    id = `default-${nextId++}`;
+    set id(value) {
+        this._id.set(value);
+    }
+    get id() {
+        return this._id();
+    }
     /**
      * Defines the icon that renders next to the title ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/panelbar/items#title-icons)).
      *
      * @default ''
      */
-    icon = '';
+    set icon(value) {
+        this._icon.set(value);
+    }
+    get icon() {
+        return this._icon();
+    }
     /**
      * Defines the icon that renders next to the title by using a custom CSS class
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/panelbar/items#title-icons)).
      *
      * @default ''
      */
-    iconClass = '';
+    set iconClass(value) {
+        this._iconClass.set(value);
+    }
+    get iconClass() {
+        return this._iconClass();
+    }
     /**
      * Defines an SVG icon to render.
      * You can use either an [existing Kendo SVG icon](https://www.telerik.com/kendo-angular-ui/components/icons/svgicon/svgicon-list) or a custom one.
@@ -351,10 +371,10 @@ class PanelBarItemComponent {
         if (isDevMode() && icon && this.icon && this.iconClass) {
             throw new Error('Setting both icon/svgIcon and iconClass options at the same time is not supported.');
         }
-        this._svgIcon = icon;
+        this._svgIcon.set(icon);
     }
     get svgIcon() {
-        return this._svgIcon;
+        return this._svgIcon();
     }
     /**
      * Defines the location of the image that displays next to the title
@@ -362,13 +382,23 @@ class PanelBarItemComponent {
      *
      * @default ''
      */
-    imageUrl = '';
+    set imageUrl(value) {
+        this._imageUrl.set(value);
+    }
+    get imageUrl() {
+        return this._imageUrl();
+    }
     /**
      * When set to `true`, disables a PanelBar item ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/panelbar/items#disabled-state)).
      *
      * @default false
      */
-    disabled = false;
+    set disabled(value) {
+        this._disabled.set(value);
+    }
+    get disabled() {
+        return this._disabled();
+    }
     /**
      * When set to `true`, expands the PanelBar item ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/panelbar/items#expanded-state)).
      */
@@ -378,43 +408,86 @@ class PanelBarItemComponent {
         if (!this.keepContent) {
             this.toggleExpandedChildAnimations(value);
         }
-        this._expanded = value;
+        this._expanded.set(value);
     }
     get expanded() {
-        return this._expanded;
+        return this._expanded();
     }
     /**
      * Sets the selected state of a PanelBar item ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/panelbar/items#selected-state)).
      *
      * @default false
      */
-    selected = false;
+    set selected(value) {
+        this._selected.set(value);
+    }
+    get selected() {
+        return this._selected();
+    }
     /**
      * Sets the content of the PanelBar item.
      * It is used when the [`items`](https://www.telerik.com/kendo-angular-ui/components/layout/api/panelbarcomponent#items) property of the PanelBar is set.
      */
-    content;
+    set content(value) {
+        this._content.set(value);
+    }
+    get content() {
+        return this._content();
+    }
     /**
      * @hidden
      */
-    items;
+    set items(value) {
+        this._items.set(value);
+    }
+    get items() {
+        return this._items();
+    }
     /**
      * @hidden
      */
-    template;
+    set template(value) {
+        this._template.set(value);
+    }
+    get template() {
+        return this._template();
+    }
     header;
     contentWrapper;
-    contentHeight;
-    contentOverflow;
-    keepContent = false;
-    childrenItems;
-    hasChildItems = false;
-    hasItems = false;
-    hasContent = false;
-    state = "inactive";
+    get contentHeight() {
+        return this._contentHeight();
+    }
+    set contentHeight(value) {
+        this._contentHeight.set(value);
+    }
+    get contentOverflow() {
+        return this._contentOverflow();
+    }
+    set contentOverflow(value) {
+        this._contentOverflow.set(value);
+    }
+    get keepContent() {
+        return this._keepContent();
+    }
+    set keepContent(value) {
+        this._keepContent.set(value);
+    }
+    get state() {
+        return this._state();
+    }
+    set state(value) {
+        this._state.set(value);
+    }
     get animate() {
         return this.eventService.animate;
     }
+    childrenItems;
+    get hasChildItems() { return this._hasChildItems(); }
+    set hasChildItems(value) { this._hasChildItems.set(value); }
+    get hasItems() { return this._hasItems(); }
+    set hasItems(value) { this._hasItems.set(value); }
+    get hasContent() { return this._hasContent(); }
+    set hasContent(value) { this._hasContent.set(value); }
     role = "treeitem";
     titleAttribute = null;
     kItemClass = true;
@@ -447,12 +520,41 @@ class PanelBarItemComponent {
     //ContentChild does not support descendants property, so we use ContentChildren for contentTemplate instead
     contentTemplate;
     titleTemplates;
-    focused = false;
-    wrapperFocused = false;
+    get focused() {
+        return this._focused();
+    }
+    set focused(value) {
+        this._focused.set(value);
+    }
+    get wrapperFocused() {
+        return this._wrapperFocused();
+    }
+    set wrapperFocused(value) {
+        this._wrapperFocused.set(value);
+    }
     subscriptions = new Subscription(() => { });
-    _expanded = false;
+    _title = signal(undefined, ...(ngDevMode ? [{ debugName: "_title" }] : []));
+    _id = signal(`default-${nextId++}`, ...(ngDevMode ? [{ debugName: "_id" }] : []));
+    _icon = signal('', ...(ngDevMode ? [{ debugName: "_icon" }] : []));
+    _iconClass = signal('', ...(ngDevMode ? [{ debugName: "_iconClass" }] : []));
+    _imageUrl = signal('', ...(ngDevMode ? [{ debugName: "_imageUrl" }] : []));
+    _disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
+    _selected = signal(false, ...(ngDevMode ? [{ debugName: "_selected" }] : []));
+    _content = signal(undefined, ...(ngDevMode ? [{ debugName: "_content" }] : []));
+    _items = signal(undefined, ...(ngDevMode ? [{ debugName: "_items" }] : []));
+    _template = signal(undefined, ...(ngDevMode ? [{ debugName: "_template" }] : []));
+    _expanded = signal(false, ...(ngDevMode ? [{ debugName: "_expanded" }] : []));
+    _svgIcon = signal(undefined, ...(ngDevMode ? [{ debugName: "_svgIcon" }] : []));
+    _state = signal('inactive', ...(ngDevMode ? [{ debugName: "_state" }] : []));
+    _focused = signal(false, ...(ngDevMode ? [{ debugName: "_focused" }] : []));
+    _wrapperFocused = signal(false, ...(ngDevMode ? [{ debugName: "_wrapperFocused" }] : []));
+    _keepContent = signal(false, ...(ngDevMode ? [{ debugName: "_keepContent" }] : []));
+    _contentHeight = signal(undefined, ...(ngDevMode ? [{ debugName: "_contentHeight" }] : []));
+    _contentOverflow = signal(undefined, ...(ngDevMode ? [{ debugName: "_contentOverflow" }] : []));
+    _hasChildItems = signal(false, ...(ngDevMode ? [{ debugName: "_hasChildItems" }] : []));
+    _hasItems = signal(false, ...(ngDevMode ? [{ debugName: "_hasItems" }] : []));
+    _hasContent = signal(false, ...(ngDevMode ? [{ debugName: "_hasContent" }] : []));
     level;
-    _svgIcon;
     constructor(parent, eventService, element, renderer) {
         this.parent = parent;
         this.eventService = eventService;
@@ -764,7 +866,7 @@ class PanelBarItemComponent {
                     animate(200, style({ height: 0, display: 'none' }))
                 ])
             ])
-        ], deferBlockDependencies: [() => [PanelBarItemComponent, NgTemplateOutlet]] });
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [PanelBarItemComponent, NgTemplateOutlet]] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: PanelBarItemComponent, decorators: [{
             type: Component,
@@ -928,7 +1030,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
             }
     `,
                     standalone: true,
-                    imports: [IconWrapperComponent, NgTemplateOutlet]
+                    imports: [IconWrapperComponent, NgTemplateOutlet],
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }], ctorParameters: () => [{ type: PanelBarItemComponent, decorators: [{
                     type: SkipSelf
@@ -1152,26 +1255,54 @@ class PanelBarComponent {
      *
      * @default 'multiple
      */
-    expandMode = PanelBarExpandMode.Default;
+    set expandMode(value) {
+        this._expandMode.set(value);
+        this.eventService.expandMode = value;
+        if (this.childrenItems) {
+            setTimeout(this.updateChildrenHeight);
+        }
+    }
+    get expandMode() {
+        return this._expandMode();
+    }
     /**
      * Allows the PanelBar to modify the selected state of the items.
      *
      * @default true
      */
-    selectable = true;
+    set selectable(value) {
+        this._selectable.set(value);
+    }
+    get selectable() {
+        return this._selectable();
+    }
     /**
      * Sets the animate state of the PanelBar ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/panelbar/animations)).
      *
      * @default true
      */
-    animate = true;
+    set animate(value) {
+        this._animate.set(value);
+        this.eventService.animate = value;
+    }
+    get animate() {
+        return this._animate();
+    }
     /**
      * Sets the height of the component when the `"full"` expand mode is used.
      * This option is ignored when the `"multiple"` or `"single"` expand modes are used.
      *
      * @default '400px'
      */
-    height = '400px';
+    set height(value) {
+        this._height.set(value);
+        if (this.childrenItems) {
+            setTimeout(this.updateChildrenHeight);
+        }
+    }
+    get height() {
+        return this._height();
+    }
     /**
     * Controls how the PanelBar renders item content.
     *
@@ -1185,24 +1316,27 @@ class PanelBarComponent {
     *
     * @default false
     */
-    get keepItemContent() {
-        return this._keepItemContent;
-    }
     set keepItemContent(keepItemContent) {
-        this._keepItemContent = keepItemContent;
+        this._keepItemContent.set(keepItemContent);
         this.eventService.onKeepContent(keepItemContent);
     }
+    get keepItemContent() {
+        return this._keepItemContent();
+    }
     /**
      * Sets the items of the PanelBar as an array of `PanelBarItemModel` instances
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/panelbar/items)).
      */
     set items(data) {
         if (data) {
-            this._items = parsePanelBarItems(data);
+            this._items.set(parsePanelBarItems(data));
+        }
+        if (this.childrenItems) {
+            setTimeout(this.updateChildrenHeight);
         }
     }
     get items() {
-        return this._items;
+        return this._items();
     }
     /**
      * Fires when the state of the PanelBar changes.
@@ -1262,8 +1396,12 @@ class PanelBarComponent {
     childrenItems;
     isViewInit = true;
     focused = false;
-    _items;
-    _keepItemContent = false;
+    _expandMode = signal(PanelBarExpandMode.Default, ...(ngDevMode ? [{ debugName: "_expandMode" }] : []));
+    _selectable = signal(true, ...(ngDevMode ? [{ debugName: "_selectable" }] : []));
+    _animate = signal(true, ...(ngDevMode ? [{ debugName: "_animate" }] : []));
+    _height = signal('400px', ...(ngDevMode ? [{ debugName: "_height" }] : []));
+    _items = signal(undefined, ...(ngDevMode ? [{ debugName: "_items" }] : []));
+    _keepItemContent = signal(false, ...(ngDevMode ? [{ debugName: "_keepItemContent" }] : []));
     elementRef;
     eventService;
     keyBindings;
@@ -1321,19 +1459,6 @@ class PanelBarComponent {
         }
         this.validateConfiguration();
     }
-    ngOnChanges(changes) {
-        if (changes['height'] || changes['expandMode'] || changes['items']) {
-            if (this.childrenItems) {
-                setTimeout(this.updateChildrenHeight);
-            }
-        }
-        if (changes['animate']) {
-            this.eventService.animate = this.animate;
-        }
-        if (changes['expandMode']) {
-            this.eventService.expandMode = this.expandMode;
-        }
-    }
     get templateRef() {
         return this.template ? this.template.templateRef : undefined;
     }
@@ -1662,7 +1787,7 @@ class PanelBarComponent {
             },
             provideComponentName('panelbar'),
             { provide: KENDO_WEBMCP_HOST, useExisting: forwardRef(() => PanelBarComponent) }
-        ], queries: [{ propertyName: "template", first: true, predicate: PanelBarItemTemplateDirective, descendants: true }, { propertyName: "contentItems", predicate: PanelBarItemComponent, descendants: true }, { propertyName: "contentChildItems", predicate: PanelBarItemComponent }], viewQueries: [{ propertyName: "viewChildItems", predicate: PanelBarItemComponent, descendants: true }], exportAs: ["kendoPanelbar"], usesOnChanges: true, ngImport: i0, template: `
+        ], queries: [{ propertyName: "template", first: true, predicate: PanelBarItemTemplateDirective, descendants: true }, { propertyName: "contentItems", predicate: PanelBarItemComponent, descendants: true }, { propertyName: "contentChildItems", predicate: PanelBarItemComponent }], viewQueries: [{ propertyName: "viewChildItems", predicate: PanelBarItemComponent, descendants: true }], exportAs: ["kendoPanelbar"], ngImport: i0, template: `
         @if (contentChildItems && !items) {
           <ng-content select="kendo-panelbar-item"></ng-content>
         }
@@ -1691,7 +1816,7 @@ class PanelBarComponent {
         @if (showLicenseWatermark) {
           <div kendoWatermarkOverlay [licenseMessage]="licenseMessage"></div>
         }
-        `, isInline: true, dependencies: [{ kind: "component", type: PanelBarItemComponent, selector: "kendo-panelbar-item", inputs: ["title", "id", "icon", "iconClass", "svgIcon", "imageUrl", "disabled", "expanded", "selected", "content", "items", "template"], exportAs: ["kendoPanelbarItem"] }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay], kendo-watermark-overlay", inputs: ["licenseMessage"] }] });
+        `, isInline: true, dependencies: [{ kind: "component", type: PanelBarItemComponent, selector: "kendo-panelbar-item", inputs: ["title", "id", "icon", "iconClass", "svgIcon", "imageUrl", "disabled", "expanded", "selected", "content", "items", "template"], exportAs: ["kendoPanelbarItem"] }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay], kendo-watermark-overlay", inputs: ["licenseMessage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: PanelBarComponent, decorators: [{
             type: Component,
@@ -1739,7 +1864,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
         }
         `,
                     standalone: true,
-                    imports: [PanelBarItemComponent, WatermarkOverlayComponent]
+                    imports: [PanelBarItemComponent, WatermarkOverlayComponent],
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: PanelBarService }, { type: i1.LocalizationService }], propDecorators: { expandMode: [{
                 type: Input
@@ -1860,9 +1986,6 @@ class SplitterService {
             pane.collapsed = !pane.collapsed;
             pane.collapsedChange.emit(pane.collapsed);
             this.emit(this.layoutChange, {});
-            if (pane.collapsed) {
-                pane.detectChanges();
-            }
         }
         this.syncPaneExpandState();
         return pane.collapsible;
@@ -2075,11 +2198,11 @@ class SplitterPaneComponent {
      * @hidden
      */
     set order(paneOrder) {
-        this._order = paneOrder;
+        this._order.set(paneOrder);
         this.setOrderStyles();
     }
     get order() {
-        return this._order;
+        return this._order();
     }
     /**
      * Defines the initial size of the pane.
@@ -2087,16 +2210,16 @@ class SplitterPaneComponent {
      * The value must be between the `min` and `max` properties.
      */
     set size(newSize) {
-        this._size = newSize;
+        this._size.set(newSize);
         // Only set flex-basis if the pane is not collapsed
-        if (!this._collapsed) {
+        if (!this._collapsed()) {
             this.renderer.setStyle(this.nativeElement, '-ms-flex-preferred-size', newSize);
             this.renderer.setStyle(this.nativeElement, 'flex-basis', newSize);
         }
         this.setStaticPaneClass();
     }
     get size() {
-        return this._size;
+        return this._size();
     }
     /**
      * Defines the HTML attributes of the splitter bar.
@@ -2104,66 +2227,98 @@ class SplitterPaneComponent {
      * You cannot change attributes that are essential for certain functionalities.
      */
     set splitterBarAttributes(attributes) {
-        this._splitterBarAttributes = attributes;
+        this._splitterBarAttributes.set(attributes);
         const splitterBar = this.splitterService.getPaneSplitterBar(this);
         if (splitterBar) {
             splitterBar.htmlAttributes = attributes;
         }
     }
     get splitterBarAttributes() {
-        return this._splitterBarAttributes;
+        return this._splitterBarAttributes();
     }
     /**
      * Defines the CSS classes that are rendered on the splitter bar.
      * Supports the same values as [`ngClass`](link:site.data.urls.angular['ngclassapi']).
      */
-    splitterBarClass;
+    set splitterBarClass(value) {
+        this._splitterBarClass.set(value);
+    }
+    get splitterBarClass() {
+        return this._splitterBarClass();
+    }
     /**
      * Defines the minimum possible size of the pane.
      * Accepts values in pixels and percentages.
      */
-    min;
+    set min(value) {
+        this._min.set(value);
+    }
+    get min() {
+        return this._min();
+    }
     /**
      * Defines the maximum possible size of the pane.
      * Accepts values in pixels and percentages.
      */
-    max;
+    set max(value) {
+        this._max.set(value);
+    }
+    get max() {
+        return this._max();
+    }
     /**
      * Determines if you can resize the pane and provide space for other panes.
      *
      * @default true
      */
-    resizable = true;
+    set resizable(value) {
+        this._resizable.set(value);
+        this.setStaticPaneClass();
+    }
+    get resizable() {
+        return this._resizable();
+    }
     /**
      * Determines if you can hide the pane and provide space for other panes.
      *
      * @default false
      */
-    collapsible = false;
+    set collapsible(value) {
+        this._collapsible.set(value);
+        this.setStaticPaneClass();
+    }
+    get collapsible() {
+        return this._collapsible();
+    }
     /**
      * Determines if overflowing content is scrollable or hidden.
      *
      * @default true
      */
-    scrollable = true;
+    set scrollable(value) {
+        this._scrollable.set(value);
+    }
+    get scrollable() {
+        return this._scrollable();
+    }
     /**
      * Determines if the pane is initially collapsed.
      *
      * @default false
      */
     set collapsed(value) {
-        const hasChanged = this._collapsed !== value;
-        this._collapsed = value;
+        const hasChanged = this._collapsed() !== value;
+        this._collapsed.set(value);
         if (hasChanged && this.nativeElement) {
-            if (this._collapsed) {
+            if (this._collapsed()) {
                 // When collapsing, clear the flex-basis to allow other panes to expand
                 this.renderer.setStyle(this.nativeElement, '-ms-flex-preferred-size', '0');
                 this.renderer.setStyle(this.nativeElement, 'flex-basis', '0');
             }
-            else if (this._size) {
+            else if (this._size()) {
                 // When expanding, restore the size if it was set
-                this.renderer.setStyle(this.nativeElement, '-ms-flex-preferred-size', this._size);
-                this.renderer.setStyle(this.nativeElement, 'flex-basis', this._size);
+                this.renderer.setStyle(this.nativeElement, '-ms-flex-preferred-size', this._size());
+                this.renderer.setStyle(this.nativeElement, 'flex-basis', this._size());
             }
             // Trigger the same forceExpand logic that tryToggle does
             // This ensures remaining panes expand when a pane is collapsed
@@ -2173,16 +2328,22 @@ class SplitterPaneComponent {
         }
     }
     get collapsed() {
-        return this._collapsed;
+        return this._collapsed();
     }
     /**
      * @hidden
      */
-    orientation = 'horizontal';
+    set orientation(value) {
+        this._orientation.set(value);
+    }
+    get orientation() {
+        return this._orientation();
+    }
     /**
      * @hidden
      */
     set containsSplitter(value) {
+        this._containsSplitter.set(value);
         if (value) {
             this.renderer.addClass(this.nativeElement, 'k-pane-flex');
         }
@@ -2190,10 +2351,18 @@ class SplitterPaneComponent {
             this.renderer.removeClass(this.nativeElement, 'k-pane-flex');
         }
     }
+    get containsSplitter() {
+        return this._containsSplitter();
+    }
     /**
      * @hidden
      */
-    overlayContent = false;
+    set overlayContent(value) {
+        this._overlayContent.set(value);
+    }
+    get overlayContent() {
+        return this._overlayContent();
+    }
     /**
      * Fires when the Splitter pane size changes.
      * The event data contains the new pane size.
@@ -2221,10 +2390,10 @@ class SplitterPaneComponent {
      * @hidden
      */
     set forceExpand(value) {
-        if (this._forceExpand === value) {
+        if (this._forceExpand() === value) {
             return;
         }
-        this._forceExpand = value;
+        this._forceExpand.set(value);
         // Enforce min/max constraints during flex redistribution so panes
         // do not exceed their bounds when absorbing a collapsed pane's space.
         const sizeProp = this.orientation === 'vertical' ? 'height' : 'width';
@@ -2246,17 +2415,26 @@ class SplitterPaneComponent {
         }
     }
     get forceExpand() {
-        return this._forceExpand;
+        return this._forceExpand();
     }
     /**
      * @hidden
      */
     isResized = false;
-    _size;
-    _order;
-    _splitterBarAttributes;
-    _collapsed = false;
-    _forceExpand = false;
+    _size = signal(undefined, ...(ngDevMode ? [{ debugName: "_size" }] : []));
+    _order = signal(undefined, ...(ngDevMode ? [{ debugName: "_order" }] : []));
+    _splitterBarAttributes = signal(undefined, ...(ngDevMode ? [{ debugName: "_splitterBarAttributes" }] : []));
+    _splitterBarClass = signal(undefined, ...(ngDevMode ? [{ debugName: "_splitterBarClass" }] : []));
+    _min = signal(undefined, ...(ngDevMode ? [{ debugName: "_min" }] : []));
+    _max = signal(undefined, ...(ngDevMode ? [{ debugName: "_max" }] : []));
+    _collapsed = signal(false, ...(ngDevMode ? [{ debugName: "_collapsed" }] : []));
+    _forceExpand = signal(false, ...(ngDevMode ? [{ debugName: "_forceExpand" }] : []));
+    _resizable = signal(true, ...(ngDevMode ? [{ debugName: "_resizable" }] : []));
+    _collapsible = signal(false, ...(ngDevMode ? [{ debugName: "_collapsible" }] : []));
+    _scrollable = signal(true, ...(ngDevMode ? [{ debugName: "_scrollable" }] : []));
+    _orientation = signal('horizontal', ...(ngDevMode ? [{ debugName: "_orientation" }] : []));
+    _containsSplitter = signal(false, ...(ngDevMode ? [{ debugName: "_containsSplitter" }] : []));
+    _overlayContent = signal(false, ...(ngDevMode ? [{ debugName: "_overlayContent" }] : []));
     constructor(element, renderer, cdr, splitterService) {
         this.element = element;
         this.renderer = renderer;
@@ -2274,11 +2452,6 @@ class SplitterPaneComponent {
         }
         this.setStaticPaneClass();
     }
-    ngOnChanges(changes) {
-        if (anyChanged(['resizable', 'collapsible'], changes)) {
-            this.setStaticPaneClass();
-        }
-    }
     /**
      * @hidden
      */
@@ -2300,8 +2473,7 @@ class SplitterPaneComponent {
      * @hidden
      */
     toggleOverlay(show) {
-        this.overlayContent = show;
-        this.cdr.detectChanges();
+        this._overlayContent.set(show);
     }
     /**
      * @hidden
@@ -2326,20 +2498,21 @@ class SplitterPaneComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: SplitterPaneComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: SplitterService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: SplitterPaneComponent, isStandalone: true, selector: "kendo-splitter-pane", inputs: { order: "order", size: "size", splitterBarAttributes: "splitterBarAttributes", splitterBarClass: "splitterBarClass", min: "min", max: "max", resizable: "resizable", collapsible: "collapsible", scrollable: "scrollable", collapsed: "collapsed", orientation: "orientation", containsSplitter: "containsSplitter", overlayContent: "overlayContent" }, outputs: { sizeChange: "sizeChange", collapsedChange: "collapsedChange" }, host: { properties: { "attr.role": "this.ariaRole", "class.k-pane": "this.hostClass", "class.k-scrollable": "this.scrollablePaneClass" } }, exportAs: ["kendoSplitterPane"], usesOnChanges: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: SplitterPaneComponent, isStandalone: true, selector: "kendo-splitter-pane", inputs: { order: "order", size: "size", splitterBarAttributes: "splitterBarAttributes", splitterBarClass: "splitterBarClass", min: "min", max: "max", resizable: "resizable", collapsible: "collapsible", scrollable: "scrollable", collapsed: "collapsed", orientation: "orientation", containsSplitter: "containsSplitter", overlayContent: "overlayContent" }, outputs: { sizeChange: "sizeChange", collapsedChange: "collapsedChange" }, host: { properties: { "attr.role": "this.ariaRole", "class.k-pane": "this.hostClass", "class.k-scrollable": "this.scrollablePaneClass" } }, exportAs: ["kendoSplitterPane"], ngImport: i0, template: `
         @if (!collapsed) {
           <ng-content></ng-content>
         }
         @if (overlayContent) {
           <div class="k-splitter-overlay k-overlay"></div>
         }
-        `, isInline: true });
+        `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: SplitterPaneComponent, decorators: [{
             type: Component,
             args: [{
-                    exportAs: 'kendoSplitterPane',
                     selector: 'kendo-splitter-pane',
+                    exportAs: 'kendoSplitterPane',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
         @if (!collapsed) {
           <ng-content></ng-content>
@@ -2413,10 +2586,11 @@ class SplitterBarComponent {
     splitterService;
     element;
     renderer;
-    cdr;
     ariaRole = 'separator';
     ariaLabel = 'Splitter pane';
-    focused = false;
+    get focused() {
+        return this._focused();
+    }
     get hostOrientation() {
         return this.orientation === 'horizontal' ? 'vertical' : null;
     }
@@ -2443,23 +2617,36 @@ class SplitterBarComponent {
     get order() {
         return 2 * this.index + 1;
     }
-    orientation = 'horizontal';
-    index = 0;
+    set orientation(value) {
+        this._orientation.set(value);
+    }
+    get orientation() {
+        return this._orientation();
+    }
+    set index(value) {
+        this._index.set(value);
+    }
+    get index() {
+        return this._index();
+    }
     set htmlAttributes(attributes) {
         if (isObjectPresent(this.parsedAttributes)) {
             removeHTMLAttributes(this.parsedAttributes, this.renderer, this.element.nativeElement);
         }
-        this._htmlAttributes = attributes;
-        this.parsedAttributes = this.htmlAttributes ?
-            parseAttributes(this.htmlAttributes, this.defaultAttributes) :
-            this.htmlAttributes;
+        this._htmlAttributes.set(attributes);
+        this.parsedAttributes = this._htmlAttributes() ?
+            parseAttributes(this._htmlAttributes(), this.defaultAttributes) :
+            this._htmlAttributes();
         this.setHtmlAttributes();
     }
     get htmlAttributes() {
-        return this._htmlAttributes;
+        return this._htmlAttributes();
     }
     subscriptions = new Subscription();
-    _htmlAttributes;
+    _htmlAttributes = signal(null, ...(ngDevMode ? [{ debugName: "_htmlAttributes" }] : []));
+    _orientation = signal('horizontal', ...(ngDevMode ? [{ debugName: "_orientation" }] : []));
+    _index = signal(0, ...(ngDevMode ? [{ debugName: "_index" }] : []));
+    _focused = signal(false, ...(ngDevMode ? [{ debugName: "_focused" }] : []));
     parsedAttributes = {};
     get defaultAttributes() {
         return {
@@ -2470,13 +2657,12 @@ class SplitterBarComponent {
     get mutableAttributes() {
         return { 'tabindex': this.tabIndex };
     }
-    constructor(draggable, localization, splitterService, element, renderer, cdr) {
+    constructor(draggable, localization, splitterService, element, renderer) {
         this.draggable = draggable;
         this.localization = localization;
         this.splitterService = splitterService;
         this.element = element;
         this.renderer = renderer;
-        this.cdr = cdr;
     }
     ngOnInit() {
         let state;
@@ -2497,8 +2683,8 @@ class SplitterBarComponent {
         this.subscriptions.add(this.draggable.kendoRelease.subscribe(() => this.splitterService.toggleContentOverlay(this.index, false)));
         const element = this.element.nativeElement;
         this.subscriptions.add(this.renderer.listen(element, 'keydown', event => this.onKeyDown(event)));
-        this.subscriptions.add(this.renderer.listen(element, 'focusin', () => this.focused = true));
-        this.subscriptions.add(this.renderer.listen(element, 'focusout', () => this.focused = false));
+        this.subscriptions.add(this.renderer.listen(element, 'focusin', () => this._focused.set(true)));
+        this.subscriptions.add(this.renderer.listen(element, 'focusout', () => this._focused.set(false)));
         this.subscriptions.add(this.renderer.listen(element, 'dblclick', () => this.togglePane()));
     }
     ngOnDestroy() {
@@ -2594,7 +2780,6 @@ class SplitterBarComponent {
         else {
             this.tryToggleNearest();
         }
-        this.cdr.markForCheck();
     }
     get expandLast() {
         const panes = this.splitterService.panes;
@@ -2628,7 +2813,7 @@ class SplitterBarComponent {
         const attributesToRender = { ...this.mutableAttributes, ...this.parsedAttributes };
         setHTMLAttributes(attributesToRender, this.renderer, this.element.nativeElement);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: SplitterBarComponent, deps: [{ token: i1$1.DraggableDirective, host: true }, { token: i1.LocalizationService }, { token: SplitterService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: SplitterBarComponent, deps: [{ token: i1$1.DraggableDirective, host: true }, { token: i1.LocalizationService }, { token: SplitterService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: SplitterBarComponent, isStandalone: true, selector: "kendo-splitter-bar", inputs: { orientation: "orientation", index: "index", htmlAttributes: "htmlAttributes" }, host: { properties: { "attr.role": "this.ariaRole", "attr.aria-label": "this.ariaLabel", "class.k-focus": "this.focused", "attr.aria-orientation": "this.hostOrientation", "attr.aria-keyshortcuts": "this.ariaKeyShortcuts", "attr.tabindex": "this.tabIndex", "class": "this.hostClasses", "style.-ms-flex-order": "this.order", "style.order": "this.order" } }, ngImport: i0, template: `
         @if (shouldShowIcon('prev')) {
           <div class="k-collapse-prev" (click)="togglePrevious()">
@@ -2649,12 +2834,13 @@ class SplitterBarComponent {
             ></kendo-icon-wrapper>
           </div>
         }
-        `, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
+        `, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: SplitterBarComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-splitter-bar',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
         @if (shouldShowIcon('prev')) {
           <div class="k-collapse-prev" (click)="togglePrevious()">
@@ -2681,7 +2867,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
                 }]
         }], ctorParameters: () => [{ type: i1$1.DraggableDirective, decorators: [{
                     type: Host
-                }] }, { type: i1.LocalizationService }, { type: SplitterService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }], propDecorators: { ariaRole: [{
+                }] }, { type: i1.LocalizationService }, { type: SplitterService }, { type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { ariaRole: [{
                 type: HostBinding,
                 args: ['attr.role']
             }], ariaLabel: [{
@@ -2740,6 +2926,7 @@ class SplitterComponent {
     localization;
     renderer;
     ngZone;
+    cdr;
     enclosingPane;
     /**
      * Defines the orientation of the panes within the Splitter.
@@ -2747,12 +2934,22 @@ class SplitterComponent {
      *
      * @default 'horizontal'
      */
-    orientation = 'horizontal';
+    set orientation(value) {
+        this._orientation.set(value);
+    }
+    get orientation() {
+        return this._orientation();
+    }
     /**
      * Defines the width or height of the Splitter splitbars in pixels.
      * The dimension depends on the orientation of the Splitter.
      */
-    splitbarWidth;
+    set splitbarWidth(value) {
+        this._splitbarWidth.set(value);
+    }
+    get splitbarWidth() {
+        return this._splitbarWidth();
+    }
     /**
      * Defines the distance in pixels that you move the separator during keyboard navigation.
      *
@@ -2768,7 +2965,12 @@ class SplitterComponent {
      * Defines the CSS classes that are rendered on the splitter bars.
      * Supports the same values as [`ngClass`](link:site.data.urls.angular['ngclassapi']).
      */
-    splitterBarClass;
+    set splitterBarClass(value) {
+        this._splitterBarClass.set(value);
+    }
+    get splitterBarClass() {
+        return this._splitterBarClass();
+    }
     /**
      * Fires when the layout of the Splitter changes.
      * Use this event to trigger layout calculations on components that are positioned inside the panes.
@@ -2811,14 +3013,18 @@ class SplitterComponent {
      * @hidden
      */
     panes;
+    _orientation = signal('horizontal', ...(ngDevMode ? [{ debugName: "_orientation" }] : []));
+    _splitbarWidth = signal(undefined, ...(ngDevMode ? [{ debugName: "_splitbarWidth" }] : []));
+    _splitterBarClass = signal(undefined, ...(ngDevMode ? [{ debugName: "_splitterBarClass" }] : []));
     paneChangesSubscription;
     _styleObserver;
-    constructor(element, splitterService, localization, renderer, ngZone, enclosingPane) {
+    constructor(element, splitterService, localization, renderer, ngZone, cdr, enclosingPane) {
         this.element = element;
         this.splitterService = splitterService;
         this.localization = localization;
         this.renderer = renderer;
         this.ngZone = ngZone;
+        this.cdr = cdr;
         this.enclosingPane = enclosingPane;
         validatePackage(packageMetadata);
         if (enclosingPane) {
@@ -2889,6 +3095,7 @@ class SplitterComponent {
             },
             direction: this.direction
         });
+        this.cdr.markForCheck();
     }
     get direction() {
         return this.localization.rtl ? 'rtl' : 'ltr';
@@ -2896,7 +3103,7 @@ class SplitterComponent {
     setFixedHeight() {
         this.splitterService.fixedHeight = getComputedStyle(this.element.nativeElement).getPropertyValue('height') !== 'auto';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: SplitterComponent, deps: [{ token: i0.ElementRef }, { token: SplitterService }, { token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: SplitterPaneComponent, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: SplitterComponent, deps: [{ token: i0.ElementRef }, { token: SplitterService }, { token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: SplitterPaneComponent, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: SplitterComponent, isStandalone: true, selector: "kendo-splitter", inputs: { orientation: "orientation", splitbarWidth: "splitbarWidth", resizeStep: "resizeStep", splitterBarClass: "splitterBarClass" }, outputs: { layoutChange: "layoutChange" }, host: { properties: { "class.k-splitter": "this.hostClasses", "class.k-splitter-flex": "this.hostClasses", "class.k-splitter-horizontal": "this.horizontalHostClasses", "class.k-splitter-vertical": "this.verticalHostClasses", "attr.dir": "this.dir" } }, providers: [
             SplitterService,
             LocalizationService,
@@ -2923,13 +3130,14 @@ class SplitterComponent {
           </kendo-splitter-bar>
         }
       }
-      `, isInline: true, dependencies: [{ kind: "component", type: SplitterBarComponent, selector: "kendo-splitter-bar", inputs: ["orientation", "index", "htmlAttributes"] }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+      `, isInline: true, dependencies: [{ kind: "component", type: SplitterBarComponent, selector: "kendo-splitter-bar", inputs: ["orientation", "index", "htmlAttributes"] }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: SplitterComponent, decorators: [{
             type: Component,
             args: [{
-                    exportAs: 'kendoSplitter',
                     selector: 'kendo-splitter',
+                    exportAs: 'kendoSplitter',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     providers: [
                         SplitterService,
                         LocalizationService,
@@ -2961,7 +3169,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
                     standalone: true,
                     imports: [SplitterBarComponent, DraggableDirective, NgStyle, NgClass]
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: SplitterService }, { type: i1.LocalizationService }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: SplitterPaneComponent, decorators: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: SplitterService }, { type: i1.LocalizationService }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: SplitterPaneComponent, decorators: [{
                     type: Optional
                 }, {
                     type: Host
@@ -3105,49 +3313,58 @@ class TabStripTabComponent {
     /**
      * Sets the title text for the tab ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/tabstrip/tabs#tab-titles)).
      */
-    title;
+    set title(value) { this._title.set(value); }
+    get title() { return this._title(); }
     /**
      * Disables the tab and prevents user interaction ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/tabstrip/tabs#disabled-tabs)).
      *
      * @default false
      */
-    disabled = false;
+    set disabled(value) { this._disabled.set(value); }
+    get disabled() { return this._disabled(); }
     /**
      * Specifies the CSS classes to apply to the `tab` element.
      * Accepts the same values as [`ngClass`](link:site.data.urls.angular['ngclassapi']).
      */
-    cssClass;
+    set cssClass(value) { this._cssClass.set(value); }
+    get cssClass() { return this._cssClass(); }
     /**
      * Specifies the CSS styles to apply to the `tab` element.
      * Accepts the same values as [`ngStyle`](link:site.data.urls.angular['ngstyleapi']).
      */
-    cssStyle;
+    set cssStyle(value) { this._cssStyle.set(value); }
+    get cssStyle() { return this._cssStyle(); }
     /**
      * Selects the tab when the TabStrip loads
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/tabstrip/tabs#selected-tab)).
      */
-    selected;
+    set selected(value) { this._selected.set(value); }
+    get selected() { return this._selected(); }
     /**
      * Shows a close button inside the tab when set to `true`.
      * This setting overrides the TabStrip `closable` option.
      */
-    closable;
+    set closable(value) { this._closable.set(value); }
+    get closable() { return this._closable(); }
     /**
      * Sets the name of an existing font icon in the Kendo UI theme for the close button.
      * This setting overrides the TabStrip `closeIcon` option.
      */
-    closeIcon;
+    set closeIcon(value) { this._closeIcon.set(value); }
+    get closeIcon() { return this._closeIcon(); }
     /**
      * Sets custom CSS classes for the close button icon.
      * You can define a single class or multiple classes separated by spaces.
      * This setting overrides the TabStrip `closeIcon` option.
      */
-    closeIconClass;
+    set closeIconClass(value) { this._closeIconClass.set(value); }
+    get closeIconClass() { return this._closeIconClass(); }
     /**
      * Sets an SVG icon for the close button.
      * You can use an [existing Kendo SVG icon](https://www.telerik.com/kendo-angular-ui/components/icons/svgicon/svgicon-list) or provide a custom one.
      */
-    closeSVGIcon;
+    set closeSVGIcon(value) { this._closeSVGIcon.set(value); }
+    get closeSVGIcon() { return this._closeSVGIcon(); }
     get tabContent() {
         return this._tabContent.first;
     }
@@ -3161,21 +3378,33 @@ class TabStripTabComponent {
     _tabContent = new QueryList();
     // guards against nested tabstrip components; `descendants` is not defined by default;
     _tabTitleDirective;
+    _title = signal(undefined, ...(ngDevMode ? [{ debugName: "_title" }] : []));
+    _disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
+    _cssClass = signal(undefined, ...(ngDevMode ? [{ debugName: "_cssClass" }] : []));
+    _cssStyle = signal(undefined, ...(ngDevMode ? [{ debugName: "_cssStyle" }] : []));
+    _selected = signal(undefined, ...(ngDevMode ? [{ debugName: "_selected" }] : []));
+    _closable = signal(undefined, ...(ngDevMode ? [{ debugName: "_closable" }] : []));
+    _closeIcon = signal(undefined, ...(ngDevMode ? [{ debugName: "_closeIcon" }] : []));
+    _closeIconClass = signal(undefined, ...(ngDevMode ? [{ debugName: "_closeIconClass" }] : []));
+    _closeSVGIcon = signal(undefined, ...(ngDevMode ? [{ debugName: "_closeSVGIcon" }] : []));
     /**
      * @hidden
      *
      * Currently only disabled tabs can be focused. Otherwise they will be
      * immediately selected
      */
-    focused = false;
+    set focused(value) { this._focused.set(value); }
+    get focused() { return this._focused(); }
+    _focused = signal(false, ...(ngDevMode ? [{ debugName: "_focused" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: TabStripTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", type: TabStripTabComponent, isStandalone: true, selector: "kendo-tabstrip-tab", inputs: { title: "title", disabled: "disabled", cssClass: "cssClass", cssStyle: "cssStyle", selected: "selected", closable: "closable", closeIcon: "closeIcon", closeIconClass: "closeIconClass", closeSVGIcon: "closeSVGIcon" }, queries: [{ propertyName: "_tabDirective", predicate: TabTemplateDirective }, { propertyName: "_tabContent", predicate: TabContentDirective }, { propertyName: "_tabTitleDirective", predicate: TabTitleDirective }], exportAs: ["kendoTabStripTab"], ngImport: i0, template: ``, isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", type: TabStripTabComponent, isStandalone: true, selector: "kendo-tabstrip-tab", inputs: { title: "title", disabled: "disabled", cssClass: "cssClass", cssStyle: "cssStyle", selected: "selected", closable: "closable", closeIcon: "closeIcon", closeIconClass: "closeIconClass", closeSVGIcon: "closeSVGIcon" }, queries: [{ propertyName: "_tabDirective", predicate: TabTemplateDirective }, { propertyName: "_tabContent", predicate: TabContentDirective }, { propertyName: "_tabTitleDirective", predicate: TabTitleDirective }], exportAs: ["kendoTabStripTab"], ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: TabStripTabComponent, decorators: [{
             type: Component,
             args: [{
-                    exportAs: 'kendoTabStripTab',
                     selector: 'kendo-tabstrip-tab',
+                    exportAs: 'kendoTabStripTab',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     template: ``,
                     standalone: true
                 }]
@@ -3756,9 +3985,12 @@ class TabStripScrollableButtonComponent {
     get nextClass() {
         return !this.prev;
     }
-    prev = false;
-    tabPosition;
-    scrollable;
+    set prev(value) { this._prev.set(value); }
+    get prev() { return this._prev(); }
+    set tabPosition(value) { this._tabPosition.set(value); }
+    get tabPosition() { return this._tabPosition(); }
+    set scrollable(value) { this._scrollable.set(value); }
+    get scrollable() { return this._scrollable(); }
     tabScroll = new EventEmitter();
     onClick = new EventEmitter();
     get hostBoundingClientRect() {
@@ -3778,6 +4010,9 @@ class TabStripScrollableButtonComponent {
     chevronUpIcon = chevronUpIcon;
     chevronDownIcon = chevronDownIcon;
     subs = new Subscription();
+    _prev = signal(false, ...(ngDevMode ? [{ debugName: "_prev" }] : []));
+    _tabPosition = signal(undefined, ...(ngDevMode ? [{ debugName: "_tabPosition" }] : []));
+    _scrollable = signal(undefined, ...(ngDevMode ? [{ debugName: "_scrollable" }] : []));
     constructor(host, renderer, ngZone, localization) {
         this.host = host;
         this.renderer = renderer;
@@ -3885,7 +4120,7 @@ class TabStripScrollableButtonComponent {
             innerCssClass="k-button-icon"
         >
         </kendo-icon-wrapper>
-    `, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
+    `, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: TabStripScrollableButtonComponent, decorators: [{
             type: Component,
@@ -3900,6 +4135,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
         </kendo-icon-wrapper>
     `,
                     selector: '[kendoTabStripScrollableButton]',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     standalone: true,
                     imports: [IconWrapperComponent]
                 }]
@@ -3929,13 +4165,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
  */
 class TabComponent {
     localization;
-    tab;
-    index;
-    tabStripClosable;
-    tabStripCloseIcon;
-    customTabstripCloseIcon;
-    closeSVGIcon;
+    set tab(value) { this._tab.set(value); }
+    get tab() { return this._tab(); }
+    set index(value) { this._index.set(value); }
+    get index() { return this._index(); }
+    set tabStripClosable(value) { this._tabStripClosable.set(value); }
+    get tabStripClosable() { return this._tabStripClosable(); }
+    set tabStripCloseIcon(value) { this._tabStripCloseIcon.set(value); }
+    get tabStripCloseIcon() { return this._tabStripCloseIcon(); }
+    set customTabstripCloseIcon(value) { this._customTabstripCloseIcon.set(value); }
+    get customTabstripCloseIcon() { return this._customTabstripCloseIcon(); }
+    set closeSVGIcon(value) { this._closeSVGIcon.set(value); }
+    get closeSVGIcon() { return this._closeSVGIcon(); }
     tabClose = new EventEmitter();
+    _tab = signal(undefined, ...(ngDevMode ? [{ debugName: "_tab" }] : []));
+    _index = signal(undefined, ...(ngDevMode ? [{ debugName: "_index" }] : []));
+    _tabStripClosable = signal(undefined, ...(ngDevMode ? [{ debugName: "_tabStripClosable" }] : []));
+    _tabStripCloseIcon = signal(undefined, ...(ngDevMode ? [{ debugName: "_tabStripCloseIcon" }] : []));
+    _customTabstripCloseIcon = signal(undefined, ...(ngDevMode ? [{ debugName: "_customTabstripCloseIcon" }] : []));
+    _closeSVGIcon = signal(undefined, ...(ngDevMode ? [{ debugName: "_closeSVGIcon" }] : []));
     hostClasses = true;
     get activeClass() {
         return this.tab.selected || null;
@@ -4020,12 +4268,13 @@ class TabComponent {
             innerCssClass="k-button-icon" [customFontClass]="customCloseIconClasses"></kendo-icon-wrapper>
           </span>
         }
-        `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
+        `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: TabComponent, decorators: [{
             type: Component,
             args: [{
                     selector: '[kendoTabStripTab]',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
         @if (!tab.tabTemplate) {
           @if (!tab.tabTitle) {
@@ -4100,15 +4349,33 @@ class TabStripMessages extends ComponentMessages {
     /**
      * Sets the title for the **Close** button in the TabStrip tab.
      */
-    closeTitle;
+    set closeTitle(value) {
+        this._closeTitle.set(value);
+    }
+    get closeTitle() {
+        return this._closeTitle();
+    }
     /**
      * Sets the title for the **Previous Tab** button when the TabStrip is scrollable.
      */
-    previousTabButton;
+    set previousTabButton(value) {
+        this._previousTabButton.set(value);
+    }
+    get previousTabButton() {
+        return this._previousTabButton();
+    }
     /**
      * Sets the title for the **Next Tab** button when the TabStrip is scrollable.
      */
-    nextTabButton;
+    set nextTabButton(value) {
+        this._nextTabButton.set(value);
+    }
+    get nextTabButton() {
+        return this._nextTabButton();
+    }
+    _closeTitle = signal(undefined, ...(ngDevMode ? [{ debugName: "_closeTitle" }] : []));
+    _previousTabButton = signal(undefined, ...(ngDevMode ? [{ debugName: "_previousTabButton" }] : []));
+    _nextTabButton = signal(undefined, ...(ngDevMode ? [{ debugName: "_nextTabButton" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: TabStripMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: TabStripMessages, isStandalone: true, selector: "kendo-tabstrip-messages-base", inputs: { closeTitle: "closeTitle", previousTabButton: "previousTabButton", nextTabButton: "nextTabButton" }, usesInheritance: true, ngImport: i0 });
 }
@@ -4184,35 +4451,40 @@ class TabStripComponent {
     tabstripService;
     scrollService;
     ngZone;
+    injector;
+    cdr;
     /**
      * Sets the height of the TabStrip.
      * Accepts a CSS size value, such as `100px`, `50%`, or `auto`.
      */
     set height(value) {
-        this._height = value;
+        this._height.set(value);
         this.renderer.setStyle(this.wrapper.nativeElement, 'height', value);
     }
     get height() {
-        return this._height;
+        return this._height();
     }
     /**
      * Sets whether the TabStrip should animate when switching tabs.
      *
      * @default true
      */
-    animate = true;
+    set animate(value) { this._animate.set(value); }
+    get animate() { return this._animate(); }
     /**
      * Sets the alignment of the tabs.
      *
      * @default 'start'
      */
-    tabAlignment = 'start';
+    set tabAlignment(value) { this._tabAlignment.set(value); }
+    get tabAlignment() { return this._tabAlignment(); }
     /**
      * Sets the position of the tabs.
      *
      * @default 'top'
      */
-    tabPosition = 'top';
+    set tabPosition(value) { this._tabPosition.set(value); }
+    get tabPosition() { return this._tabPosition(); }
     /**
     * Controls how the TabStrip renders tab content.
     *
@@ -4226,13 +4498,15 @@ class TabStripComponent {
     *
     * @default false
     */
-    keepTabContent = false;
+    set keepTabContent(value) { this._keepTabContent.set(value); }
+    get keepTabContent() { return this._keepTabContent(); }
     /**
      * When set to `true`, renders a close button inside each tab.
      *
      * @default false
      */
-    closable = false;
+    set closable(value) { this._closable.set(value); }
+    get closable() { return this._closable(); }
     /**
      * Enables scrolling of the tab list.
      * When set to `true` and the total size of all tabs exceeds the size of the TabStrip container, scroll buttons appear on each end of the tab list.
@@ -4240,7 +4514,7 @@ class TabStripComponent {
      * @default false
      */
     set scrollable(value) {
-        this._scrollableSettings = normalizeScrollableSettings(value);
+        this._scrollableSettings.set(normalizeScrollableSettings(value));
         if (this.tablist) {
             this.toggleScrollButtons(this.scrollService.tabsOverflow);
             if (this.isScrollable && this.mouseScrollEnabled) {
@@ -4249,7 +4523,7 @@ class TabStripComponent {
         }
     }
     get scrollable() {
-        return this._scrollableSettings;
+        return this._scrollableSettings();
     }
     /**
      * Sets the size of the TabStrip.
@@ -4273,21 +4547,23 @@ class TabStripComponent {
                 this.renderer.addClass(this.wrapper.nativeElement, 'k-tabstrip-lg');
                 break;
         }
-        this._size = value;
-        this.ngZone.onStable.pipe(take(1)).subscribe(() => this.onResize());
+        this._size.set(value);
+        afterNextRender(() => this.onResize(), { injector: this.injector });
     }
     get size() {
-        return this._size;
+        return this._size();
     }
     /**
      * Defines the name of an existing font icon in the Kendo UI theme for the close icon.
      * @default 'x'
      */
-    closeIcon = 'x';
+    set closeIcon(value) { this._closeIcon.set(value); }
+    get closeIcon() { return this._closeIcon(); }
     /**
      * Defines a custom CSS class, or multiple classes separated by spaces, applied to the close button.
      */
-    closeIconClass;
+    set closeIconClass(value) { this._closeIconClass.set(value); }
+    get closeIconClass() { return this._closeIconClass(); }
     /**
      * Defines an SVGIcon to render for the close icon.
      * The input accepts either an [existing Kendo SVG icon](https://www.telerik.com/kendo-angular-ui/components/icons/svgicon/svgicon-list) or a custom one.
@@ -4296,17 +4572,18 @@ class TabStripComponent {
         if (isDevMode() && icon && this.closeIcon && this.closeIcon !== 'x') {
             throw new Error('Setting both closeIcon and svgIcon options at the same time is not supported.');
         }
-        this._closeSVGIcon = icon;
+        this._closeSVGIcon.set(icon);
     }
     get closeSVGIcon() {
-        return this._closeSVGIcon;
+        return this._closeSVGIcon();
     }
     /**
      * If set to `false`, the content area is hidden, but the tab headers are still visible.
      *
      * @default true
      */
-    showContentArea = true;
+    set showContentArea(value) { this._showContentArea.set(value); }
+    get showContentArea() { return this._showContentArea(); }
     /**
      * Fires each time a tab is selected.
      * The event data contains the index of the selected tab and its title.
@@ -4339,10 +4616,10 @@ class TabStripComponent {
         return this.localization.rtl ? 'rtl' : 'ltr';
     }
     get tabStripScrollable() {
-        return this._scrollableSettings.enabled;
+        return this._scrollableSettings().enabled;
     }
     get tabStripScrollableOverlay() {
-        return this._scrollableSettings.enabled && !this.hasScrollButtons.visible;
+        return this._scrollableSettings().enabled && !this.hasScrollButtons.visible;
     }
     /**
      * A query list of all declared tabs.
@@ -4376,22 +4653,32 @@ class TabStripComponent {
      * @hidden
      */
     licenseMessage;
-    _height;
-    _scrollableSettings = normalizeScrollableSettings(false);
+    _height = signal(undefined, ...(ngDevMode ? [{ debugName: "_height" }] : []));
+    _scrollableSettings = signal(normalizeScrollableSettings(false), ...(ngDevMode ? [{ debugName: "_scrollableSettings" }] : []));
     subscriptions = new Subscription();
     subscriptionsArePresent = false;
-    _closeSVGIcon;
+    _closeSVGIcon = signal(undefined, ...(ngDevMode ? [{ debugName: "_closeSVGIcon" }] : []));
     tabStripId = guid();
     tabsChangesSub;
     activeStateChangeSub;
-    _size;
-    constructor(localization, renderer, wrapper, tabstripService, scrollService, ngZone) {
+    _size = signal(undefined, ...(ngDevMode ? [{ debugName: "_size" }] : []));
+    _animate = signal(true, ...(ngDevMode ? [{ debugName: "_animate" }] : []));
+    _tabAlignment = signal('start', ...(ngDevMode ? [{ debugName: "_tabAlignment" }] : []));
+    _tabPosition = signal('top', ...(ngDevMode ? [{ debugName: "_tabPosition" }] : []));
+    _keepTabContent = signal(false, ...(ngDevMode ? [{ debugName: "_keepTabContent" }] : []));
+    _closable = signal(false, ...(ngDevMode ? [{ debugName: "_closable" }] : []));
+    _closeIcon = signal('x', ...(ngDevMode ? [{ debugName: "_closeIcon" }] : []));
+    _closeIconClass = signal(undefined, ...(ngDevMode ? [{ debugName: "_closeIconClass" }] : []));
+    _showContentArea = signal(true, ...(ngDevMode ? [{ debugName: "_showContentArea" }] : []));
+    constructor(localization, renderer, wrapper, tabstripService, scrollService, ngZone, injector, cdr) {
         this.localization = localization;
         this.renderer = renderer;
         this.wrapper = wrapper;
         this.tabstripService = tabstripService;
         this.scrollService = scrollService;
         this.ngZone = ngZone;
+        this.injector = injector;
+        this.cdr = cdr;
         const isValid = validatePackage(packageMetadata);
         this.licenseMessage = getLicenseMessage(packageMetadata);
         this.showLicenseWatermark = shouldShowValidationUI(isValid);
@@ -4421,10 +4708,11 @@ class TabStripComponent {
         });
         this.initDomEvents();
         this.tabsChangesSub = this.tabs.changes.subscribe(() => {
-            this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+            afterNextRender(() => {
                 this.toggleScrollButtons(this.scrollService.tabsOverflow);
                 this.scrollService.toggleScrollButtonsState();
-            });
+            }, { injector: this.injector });
+            this.cdr.markForCheck();
         });
         this.isScrollable && !this.hasScrollButtons.visible && this.setScrollableOverlayClasses();
     }
@@ -4435,7 +4723,7 @@ class TabStripComponent {
         const positionChange = changes['tabPosition'];
         if (positionChange) {
             const tabsAtBottomChanged = positionChange.previousValue === 'bottom' || positionChange.currentValue === 'bottom';
-            this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+            afterNextRender(() => {
                 if (tabsAtBottomChanged) {
                     if (this.subscriptionsArePresent) {
                         this.subscriptions.unsubscribe();
@@ -4451,7 +4739,7 @@ class TabStripComponent {
                     this.initDomEvents();
                 }
                 this.scrollService.restoreScrollPosition();
-            });
+            }, { injector: this.injector });
         }
     }
     ngOnDestroy() {
@@ -4469,19 +4757,19 @@ class TabStripComponent {
      * @hidden
      */
     get isScrollable() {
-        return this._scrollableSettings.enabled;
+        return this._scrollableSettings().enabled;
     }
     /**
      * @hidden
      */
     get hasScrollButtons() {
-        return tabStripHasScrollButtons(this._scrollableSettings);
+        return tabStripHasScrollButtons(this._scrollableSettings());
     }
     /**
      * @hidden
      */
     get mouseScrollEnabled() {
-        return mouseScrollEnabled(this._scrollableSettings);
+        return mouseScrollEnabled(this._scrollableSettings());
     }
     /**
      * @hidden
@@ -4548,7 +4836,7 @@ class TabStripComponent {
      * @hidden
      */
     scrollToSelectedTab() {
-        if (this._scrollableSettings.enabled) {
+        if (this._scrollableSettings().enabled) {
             this.scrollService.scrollToSelectedTab();
         }
     }
@@ -4577,8 +4865,8 @@ class TabStripComponent {
         this.subscriptionsArePresent = true;
     }
     toggleScrollButtons(tabsOverflow) {
-        this.ngZone.onStable.pipe(take(1)).subscribe(() => {
-            const scrollButtonsSetting = this._scrollableSettings.scrollButtons;
+        afterNextRender(() => {
+            const scrollButtonsSetting = this._scrollableSettings().scrollButtons;
             const scrollButtonsArePresent = this.prevScrollButton && this.nextScrollButton;
             const shouldShowButtons = scrollButtonsArePresent && tabsOverflow;
             const shouldHideButtons = scrollButtonsArePresent &&
@@ -4598,7 +4886,7 @@ class TabStripComponent {
                     this.scrollService.toggleScrollButtonsState();
                 });
             }
-        });
+        }, { injector: this.injector });
     }
     attachTablistScrollHandler(tablist) {
         this.ngZone.runOutsideAngular(() => {
@@ -4638,7 +4926,7 @@ class TabStripComponent {
             this.renderer.addClass(wrapper, 'k-tabstrip-scrollable-end');
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: TabStripComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: TabStripService }, { token: ScrollService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: TabStripComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: TabStripService }, { token: ScrollService }, { token: i0.NgZone }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: TabStripComponent, isStandalone: true, selector: "kendo-tabstrip", inputs: { height: "height", animate: "animate", tabAlignment: "tabAlignment", tabPosition: "tabPosition", keepTabContent: "keepTabContent", closable: "closable", scrollable: "scrollable", size: "size", closeIcon: "closeIcon", closeIconClass: "closeIconClass", closeSVGIcon: "closeSVGIcon", showContentArea: "showContentArea" }, outputs: { tabSelect: "tabSelect", tabClose: "tabClose", tabScroll: "tabScroll" }, host: { properties: { "class.k-tabstrip": "this.hostClasses", "class.k-tabstrip-top": "this.tabsAtTop", "class.k-tabstrip-right": "this.tabsAtRight", "class.k-tabstrip-bottom": "this.tabsAtBottom", "class.k-tabstrip-left": "this.tabsAtLeft", "attr.dir": "this.dir", "class.k-tabstrip-scrollable": "this.tabStripScrollable", "class.k-tabstrip-scrollable-overlay": "this.tabStripScrollableOverlay" } }, providers: [
             TabStripService,
             ScrollService,
@@ -4817,11 +5105,14 @@ class TabStripComponent {
                     animate('400ms ease-in')
                 ])
             ])
-        ], deferBlockDependencies: [() => [NgTemplateOutlet, NgClass]] });
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [NgTemplateOutlet, NgClass]] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: TabStripComponent, decorators: [{
             type: Component,
             args: [{
+                    selector: 'kendo-tabstrip',
+                    exportAs: 'kendoTabStrip',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     animations: [
                         trigger('state', [
                             state('active', style({ opacity: 1 })),
@@ -4842,8 +5133,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
                         provideComponentName('tabstrip'),
                         { provide: KENDO_WEBMCP_HOST, useExisting: forwardRef(() => TabStripComponent) }
                     ],
-                    exportAs: 'kendoTabStrip',
-                    selector: 'kendo-tabstrip',
                     template: `
         <ng-container kendoTabStripLocalizedMessages
           i18n-closeTitle="kendo.tabstrip.closeTitle|The title for the **Close** button in the TabStrip tab."
@@ -5008,7 +5297,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
                     standalone: true,
                     imports: [LocalizedTabStripMessagesDirective, NgTemplateOutlet, NgClass, TabStripScrollableButtonComponent, TabComponent, NgStyle, ResizeSensorComponent, WatermarkOverlayComponent]
                 }]
-        }], ctorParameters: () => [{ type: i1.LocalizationService }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: TabStripService }, { type: ScrollService }, { type: i0.NgZone }], propDecorators: { height: [{
+        }], ctorParameters: () => [{ type: i1.LocalizationService }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: TabStripService }, { type: ScrollService }, { type: i0.NgZone }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }], propDecorators: { height: [{
                 type: Input
             }], animate: [{
                 type: Input
@@ -5802,50 +6091,90 @@ class DrawerComponent {
      *
      * @default 'overlay'
      */
-    mode = 'overlay';
+    set mode(value) {
+        this._mode.set(value);
+    }
+    get mode() {
+        return this._mode();
+    }
     /**
      * Specifies the position of the Drawer
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/drawer/positioning)).
      *
      * @default 'start'
      */
-    position = 'start';
+    set position(value) {
+        this._position.set(value);
+    }
+    get position() {
+        return this._position();
+    }
     /**
      * Enables the mini (compact) view of the Drawer which displays when the component is collapsed
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/drawer/display-modes#mini-view)).
      *
      * @default false
      */
-    mini = false;
+    set mini(value) {
+        this._mini.set(value);
+    }
+    get mini() {
+        return this._mini();
+    }
     /**
      * Specifies the state of the Drawer.
      *
      * @default false
      */
-    expanded = false;
+    set expanded(value) {
+        this._expanded.set(value);
+    }
+    get expanded() {
+        return this._expanded();
+    }
     /**
      * Defines the width of the Drawer when it is expanded.
      *
      * @default 240
      */
-    width = 240;
+    set width(value) {
+        this._width.set(value);
+    }
+    get width() {
+        return this._width();
+    }
     /**
      * Defines the width of the Drawer when the mini view is enabled and the component is collapsed.
      * By default, the mini view width is determined by the used Kendo Theme.
      */
-    miniWidth;
+    set miniWidth(value) {
+        this._miniWidth.set(value);
+    }
+    get miniWidth() {
+        return this._miniWidth();
+    }
     /**
      * Specifies if the Drawer automatically collapses when an item or the overlay is clicked.
      *
      * @default true
      */
-    autoCollapse = true;
+    set autoCollapse(value) {
+        this._autoCollapse.set(value);
+    }
+    get autoCollapse() {
+        return this._autoCollapse();
+    }
     /**
      * Defines the collection of items that render in the Drawer.
      *
      * @default []
      */
-    items = [];
+    set items(value) {
+        this._items.set(value);
+    }
+    get items() {
+        return this._items();
+    }
     /**
      * Defines a callback function which determines if an item should be expanded.
      * This is useful for hierarchical data structures where the expansion state of an item depends on its parent or other items.
@@ -5862,14 +6191,21 @@ class DrawerComponent {
     /**
      * @hidden
      */
-    direction;
+    get direction() {
+        return this._direction();
+    }
     /**
      * Specifies the animation settings of the Drawer
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/drawer/interaction-modes#toggling-between-states)).
      *
      * @default { type: 'slide', duration: 200 }
      */
-    animation = DEFAULT_ANIMATION;
+    set animation(value) {
+        this._animation.set(value);
+    }
+    get animation() {
+        return this._animation();
+    }
     /**
      * Fires when the Drawer is expanded and its animation is complete.
      */
@@ -5913,6 +6249,16 @@ class DrawerComponent {
      */
     licenseMessage;
     viewItems;
+    _mode = signal('overlay', ...(ngDevMode ? [{ debugName: "_mode" }] : []));
+    _position = signal('start', ...(ngDevMode ? [{ debugName: "_position" }] : []));
+    _mini = signal(false, ...(ngDevMode ? [{ debugName: "_mini" }] : []));
+    _expanded = signal(false, ...(ngDevMode ? [{ debugName: "_expanded" }] : []));
+    _width = signal(240, ...(ngDevMode ? [{ debugName: "_width" }] : []));
+    _miniWidth = signal(undefined, ...(ngDevMode ? [{ debugName: "_miniWidth" }] : []));
+    _autoCollapse = signal(true, ...(ngDevMode ? [{ debugName: "_autoCollapse" }] : []));
+    _items = signal([], ...(ngDevMode ? [{ debugName: "_items" }] : []));
+    _animation = signal(DEFAULT_ANIMATION, ...(ngDevMode ? [{ debugName: "_animation" }] : []));
+    _direction = signal(undefined, ...(ngDevMode ? [{ debugName: "_direction" }] : []));
     pendingToggle = null;
     animatingViaToggle = false;
     dynamicRTLSubscription;
@@ -5925,7 +6271,7 @@ class DrawerComponent {
         this.showLicenseWatermark = shouldShowValidationUI(isValid);
         this.dynamicRTLSubscription = this.localizationService.changes.subscribe(({ rtl }) => {
             this.rtl = rtl;
-            this.direction = this.rtl ? 'rtl' : 'ltr';
+            this._direction.set(rtl ? 'rtl' : 'ltr');
         });
         this.drawerService.owner = this;
     }
@@ -6103,7 +6449,7 @@ class DrawerComponent {
         @if (showLicenseWatermark) {
           <div kendoWatermarkOverlay [licenseMessage]="licenseMessage"></div>
         }
-        `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DrawerListComponent, selector: "[kendoDrawerList]", inputs: ["itemTemplate", "mini", "expanded", "view"], outputs: ["select", "viewChange"] }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay], kendo-watermark-overlay", inputs: ["licenseMessage"] }] });
+        `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DrawerListComponent, selector: "[kendoDrawerList]", inputs: ["itemTemplate", "mini", "expanded", "view"], outputs: ["select", "viewChange"] }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay], kendo-watermark-overlay", inputs: ["licenseMessage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: DrawerComponent, decorators: [{
             type: Component,
@@ -6160,7 +6506,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
         }
         `,
                     standalone: true,
-                    imports: [NgTemplateOutlet, DrawerListComponent, WatermarkOverlayComponent]
+                    imports: [NgTemplateOutlet, DrawerListComponent, WatermarkOverlayComponent],
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }], ctorParameters: () => [{ type: i1.LocalizationService }, { type: DrawerService }], propDecorators: { hostClasses: [{
                 type: HostBinding,
@@ -6251,18 +6598,19 @@ class DrawerContainerComponent {
     /**
      * @hidden
      */
-    direction;
+    get direction() {
+        return this._direction();
+    }
     /**
      * @hidden
      */
     drawer;
+    _direction = signal(undefined, ...(ngDevMode ? [{ debugName: "_direction" }] : []));
     dynamicRTLSubscription;
-    rtl = false;
     constructor(localizationService) {
         this.localizationService = localizationService;
         this.dynamicRTLSubscription = this.localizationService.changes.subscribe(({ rtl }) => {
-            this.rtl = rtl;
-            this.direction = this.rtl ? 'rtl' : 'ltr';
+            this._direction.set(rtl ? 'rtl' : 'ltr');
         });
     }
     ngOnDestroy() {
@@ -6298,7 +6646,7 @@ class DrawerContainerComponent {
           <div class="k-overlay" (click)="closeDrawer()"></div>
         }
         <ng-content></ng-content>
-        `, isInline: true });
+        `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: DrawerContainerComponent, decorators: [{
             type: Component,
@@ -6317,7 +6665,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
         }
         <ng-content></ng-content>
         `,
-                    standalone: true
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }], ctorParameters: () => [{ type: i1.LocalizationService }], propDecorators: { hostClass: [{
                 type: HostBinding,
@@ -6359,7 +6708,7 @@ class DrawerContentComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: DrawerContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", type: DrawerContentComponent, isStandalone: true, selector: "kendo-drawer-content", host: { properties: { "class.k-drawer-content": "this.hostClasses" } }, ngImport: i0, template: `
         <ng-content></ng-content>
-    `, isInline: true, encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: DrawerContentComponent, decorators: [{
             type: Component,
@@ -6369,7 +6718,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
         <ng-content></ng-content>
     `,
                     encapsulation: ViewEncapsulation.None,
-                    standalone: true
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }], ctorParameters: () => [], propDecorators: { hostClasses: [{
                 type: HostBinding,
@@ -6553,19 +6903,23 @@ let StepperActivateEvent$1 = class StepperActivateEvent extends PreventableEvent
 class StepperService {
     localization;
     ngZone;
-    changeDetector;
     owner;
     currentStep = DEFAULT_CURRENT_STEP;
-    focusedStep;
+    set focusedStep(value) {
+        this._focusedStep.set(value);
+    }
+    get focusedStep() {
+        return this._focusedStep();
+    }
     triggerValidation = new EventEmitter();
     focusedStepChange = new EventEmitter();
     get handlers() {
         return this.localization.rtl ? handlersRTL : handlers;
     }
-    constructor(localization, ngZone, changeDetector) {
+    _focusedStep = signal(undefined, ...(ngDevMode ? [{ debugName: "_focusedStep" }] : []));
+    constructor(localization, ngZone) {
         this.localization = localization;
         this.ngZone = ngZone;
-        this.changeDetector = changeDetector;
     }
     emit(event, eventArgs) {
         const stepper = this.owner;
@@ -6585,7 +6939,6 @@ class StepperService {
             if (!this.emit('activate', eventArgs)) {
                 this.currentStep = currentIdx;
                 this.owner['currentStepChange'].emit(currentIdx);
-                this.changeDetector.detectChanges();
             }
         });
     }
@@ -6673,12 +7026,12 @@ class StepperService {
     get isHorizontal() {
         return this.owner.orientation === 'horizontal';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: StepperService, deps: [{ token: i1.LocalizationService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: StepperService, deps: [{ token: i1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: StepperService });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: StepperService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1.LocalizationService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }] });
+        }], ctorParameters: () => [{ type: i1.LocalizationService }, { type: i0.NgZone }] });
 
 /**
  * @hidden
@@ -6692,23 +7045,52 @@ class StepperStepComponent {
     service;
     localization;
     ngZone;
-    step;
-    index;
-    current;
-    type;
-    successIcon;
-    successSVGIcon;
-    errorIcon;
-    errorSVGIcon;
-    svgIcon;
-    indicatorTemplate;
-    labelTemplate;
-    stepTemplate;
+    set step(value) { this._step.set(value); }
+    get step() { return this._step(); }
+    set index(value) { this._index.set(value); }
+    get index() { return this._index(); }
+    set current(value) {
+        this._current.set(value);
+        this.handleValidityChecks();
+    }
+    get current() { return this._current(); }
+    set type(value) { this._type.set(value); }
+    get type() { return this._type(); }
+    set successIcon(value) { this._successIcon.set(value); }
+    get successIcon() { return this._successIcon(); }
+    set successSVGIcon(value) { this._successSVGIcon.set(value); }
+    get successSVGIcon() { return this._successSVGIcon(); }
+    set errorIcon(value) { this._errorIcon.set(value); }
+    get errorIcon() { return this._errorIcon(); }
+    set errorSVGIcon(value) { this._errorSVGIcon.set(value); }
+    get errorSVGIcon() { return this._errorSVGIcon(); }
+    set svgIcon(value) { this._svgIcon.set(value); }
+    get svgIcon() { return this._svgIcon(); }
+    set indicatorTemplate(value) { this._indicatorTemplate.set(value); }
+    get indicatorTemplate() { return this._indicatorTemplate(); }
+    set labelTemplate(value) { this._labelTemplate.set(value); }
+    get labelTemplate() { return this._labelTemplate(); }
+    set stepTemplate(value) { this._stepTemplate.set(value); }
+    get stepTemplate() { return this._stepTemplate(); }
     stepLink;
-    isStepValid = undefined;
-    shouldCheckValidity = undefined;
+    get isStepValid() { return this._isStepValid(); }
+    get shouldCheckValidity() { return this._shouldCheckValidityState(); }
     checkCircleIcon = checkCircleIcon;
     exclamationCircleIcon = exclamationCircleIcon;
+    _step = signal(undefined, ...(ngDevMode ? [{ debugName: "_step" }] : []));
+    _index = signal(undefined, ...(ngDevMode ? [{ debugName: "_index" }] : []));
+    _current = signal(undefined, ...(ngDevMode ? [{ debugName: "_current" }] : []));
+    _type = signal(undefined, ...(ngDevMode ? [{ debugName: "_type" }] : []));
+    _successIcon = signal(undefined, ...(ngDevMode ? [{ debugName: "_successIcon" }] : []));
+    _successSVGIcon = signal(undefined, ...(ngDevMode ? [{ debugName: "_successSVGIcon" }] : []));
+    _errorIcon = signal(undefined, ...(ngDevMode ? [{ debugName: "_errorIcon" }] : []));
+    _errorSVGIcon = signal(undefined, ...(ngDevMode ? [{ debugName: "_errorSVGIcon" }] : []));
+    _svgIcon = signal(undefined, ...(ngDevMode ? [{ debugName: "_svgIcon" }] : []));
+    _indicatorTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_indicatorTemplate" }] : []));
+    _labelTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_labelTemplate" }] : []));
+    _stepTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_stepTemplate" }] : []));
+    _isStepValid = signal(undefined, ...(ngDevMode ? [{ debugName: "_isStepValid" }] : []));
+    _shouldCheckValidityState = signal(undefined, ...(ngDevMode ? [{ debugName: "_shouldCheckValidityState" }] : []));
     subs;
     constructor(service, localization, ngZone) {
         this.service = service;
@@ -6737,11 +7119,6 @@ class StepperStepComponent {
     ngOnInit() {
         this.handleValidityChecks();
     }
-    ngOnChanges(changes) {
-        if (changes['current'] && !changes['current'].firstChange) {
-            this.handleValidityChecks();
-        }
-    }
     ngOnDestroy() {
         if (this.subs) {
             this.subs.unsubscribe();
@@ -6855,7 +7232,7 @@ class StepperStepComponent {
     get transitionDuration() {
         return this.service.owner.animationDuration;
     }
-    _shouldCheckValidity() {
+    computeShouldCheckValidity() {
         if (isPresent(this.step.validate)) {
             if (typeof this.step.validate === 'boolean') {
                 return this.step.validate;
@@ -6867,14 +7244,14 @@ class StepperStepComponent {
         return isPresent(this.step.isValid) && this.index < this.current;
     }
     handleValidityChecks() {
-        this.isStepValid = undefined;
-        this.shouldCheckValidity = this._shouldCheckValidity();
-        if (this.shouldCheckValidity) {
-            this.isStepValid = this.updateStepValidity();
+        this._isStepValid.set(undefined);
+        this._shouldCheckValidityState.set(this.computeShouldCheckValidity());
+        if (this._shouldCheckValidityState()) {
+            this._isStepValid.set(this.updateStepValidity());
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: StepperStepComponent, deps: [{ token: StepperService }, { token: i1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: StepperStepComponent, isStandalone: true, selector: "[kendoStepperStep]", inputs: { step: "step", index: "index", current: "current", type: "type", successIcon: "successIcon", successSVGIcon: "successSVGIcon", errorIcon: "errorIcon", errorSVGIcon: "errorSVGIcon", svgIcon: "svgIcon", indicatorTemplate: "indicatorTemplate", labelTemplate: "labelTemplate", stepTemplate: "stepTemplate" }, host: { properties: { "class.k-step-error": "this.errorStepClass", "class.k-step-success": "this.successStepClass" } }, viewQueries: [{ propertyName: "stepLink", first: true, predicate: ["stepLink"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: StepperStepComponent, isStandalone: true, selector: "[kendoStepperStep]", inputs: { step: "step", index: "index", current: "current", type: "type", successIcon: "successIcon", successSVGIcon: "successSVGIcon", errorIcon: "errorIcon", errorSVGIcon: "errorSVGIcon", svgIcon: "svgIcon", indicatorTemplate: "indicatorTemplate", labelTemplate: "labelTemplate", stepTemplate: "stepTemplate" }, host: { properties: { "class.k-step-error": "this.errorStepClass", "class.k-step-success": "this.successStepClass" } }, viewQueries: [{ propertyName: "stepLink", first: true, predicate: ["stepLink"], descendants: true, static: true }], ngImport: i0, template: `
         <a href='#' class='k-step-link' #stepLink
           [attr.tabindex]='tabIndexAttr'
           [attr.title]='step.label'
@@ -6947,12 +7324,13 @@ class StepperStepComponent {
             }
           }
         </a>
-        `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
+        `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: StepperStepComponent, decorators: [{
             type: Component,
             args: [{
                     selector: '[kendoStepperStep]',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
         <a href='#' class='k-step-link' #stepLink
           [attr.tabindex]='tabIndexAttr'
@@ -7073,21 +7451,47 @@ class StepperListComponent {
     ngZone;
     service;
     element;
-    linear;
-    stepType;
-    orientation;
-    currentStep;
-    steps;
-    successIcon;
-    successSVGIcon;
-    errorIcon;
-    errorSVGIcon;
-    svgIcon;
-    indicatorTemplate;
-    labelTemplate;
-    stepTemplate;
+    set linear(value) { this._linear.set(value); }
+    get linear() { return this._linear(); }
+    set stepType(value) { this._stepType.set(value); }
+    get stepType() { return this._stepType(); }
+    set orientation(value) { this._orientation.set(value); }
+    get orientation() { return this._orientation(); }
+    set currentStep(value) { this._currentStep.set(value); }
+    get currentStep() { return this._currentStep(); }
+    set steps(value) { this._steps.set(value); }
+    get steps() { return this._steps(); }
+    set successIcon(value) { this._successIcon.set(value); }
+    get successIcon() { return this._successIcon(); }
+    set successSVGIcon(value) { this._successSVGIcon.set(value); }
+    get successSVGIcon() { return this._successSVGIcon(); }
+    set errorIcon(value) { this._errorIcon.set(value); }
+    get errorIcon() { return this._errorIcon(); }
+    set errorSVGIcon(value) { this._errorSVGIcon.set(value); }
+    get errorSVGIcon() { return this._errorSVGIcon(); }
+    set svgIcon(value) { this._svgIcon.set(value); }
+    get svgIcon() { return this._svgIcon(); }
+    set indicatorTemplate(value) { this._indicatorTemplate.set(value); }
+    get indicatorTemplate() { return this._indicatorTemplate(); }
+    set labelTemplate(value) { this._labelTemplate.set(value); }
+    get labelTemplate() { return this._labelTemplate(); }
+    set stepTemplate(value) { this._stepTemplate.set(value); }
+    get stepTemplate() { return this._stepTemplate(); }
     listKeydown = new EventEmitter();
     listClick = new EventEmitter();
+    _linear = signal(undefined, ...(ngDevMode ? [{ debugName: "_linear" }] : []));
+    _stepType = signal(undefined, ...(ngDevMode ? [{ debugName: "_stepType" }] : []));
+    _orientation = signal(undefined, ...(ngDevMode ? [{ debugName: "_orientation" }] : []));
+    _currentStep = signal(undefined, ...(ngDevMode ? [{ debugName: "_currentStep" }] : []));
+    _steps = signal(undefined, ...(ngDevMode ? [{ debugName: "_steps" }] : []));
+    _successIcon = signal(undefined, ...(ngDevMode ? [{ debugName: "_successIcon" }] : []));
+    _successSVGIcon = signal(undefined, ...(ngDevMode ? [{ debugName: "_successSVGIcon" }] : []));
+    _errorIcon = signal(undefined, ...(ngDevMode ? [{ debugName: "_errorIcon" }] : []));
+    _errorSVGIcon = signal(undefined, ...(ngDevMode ? [{ debugName: "_errorSVGIcon" }] : []));
+    _svgIcon = signal(undefined, ...(ngDevMode ? [{ debugName: "_svgIcon" }] : []));
+    _indicatorTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_indicatorTemplate" }] : []));
+    _labelTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_labelTemplate" }] : []));
+    _stepTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_stepTemplate" }] : []));
     domSubs;
     constructor(renderer, ngZone, service, element) {
         this.renderer = renderer;
@@ -7164,12 +7568,13 @@ class StepperListComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: StepperListComponent, deps: [{ token: i0.Renderer2 }, { token: i0.NgZone }, { token: StepperService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: StepperListComponent, isStandalone: true, selector: "[kendoStepperList]", inputs: { linear: "linear", stepType: "stepType", orientation: "orientation", currentStep: "currentStep", steps: "steps", successIcon: "successIcon", successSVGIcon: "successSVGIcon", errorIcon: "errorIcon", errorSVGIcon: "errorSVGIcon", svgIcon: "svgIcon", indicatorTemplate: "indicatorTemplate", labelTemplate: "labelTemplate", stepTemplate: "stepTemplate" }, outputs: { listKeydown: "listKeydown", listClick: "listClick" }, ngImport: i0, template: "\n        @for (step of steps; track step; let idx = $index) {\n          <li kendoStepperStep\n            [attr.data-kendo-stepper-index]='idx'\n            [type]='stepType'\n            [step]='step'\n            [index]='idx'\n            [current]='currentStep'\n            [successIcon]='successIcon'\n            [successSVGIcon]='successSVGIcon'\n            [errorIcon]='errorIcon'\n            [errorSVGIcon]='errorSVGIcon'\n            [svgIcon]='svgIcon'\n            [indicatorTemplate]='indicatorTemplate'\n            [labelTemplate]='labelTemplate'\n            [stepTemplate]='stepTemplate'\n            class='k-step'\n            [class.k-step-first]='idx === 0'\n            [class.k-step-last]='idx === steps.length - 1'\n            [class.k-step-done]='idx < currentStep'\n            [class.k-step-current]='idx === currentStep'\n            [class.k-step-optional]='step.optional'\n            [class.k-disabled]='step.disabled'\n            [class.k-focus]='idx === focusedStep || (!isPresent(focusedStep) && idx === currentStep)'\n            [ngClass]='step.cssClass'\n            [ngStyle]='step.cssStyle'\n            [style.max-width.%] = 'maxStepWidth'\n            [style.max-height.%] = 'maxStepHeight'\n            >\n          </li>\n        }\n        ", isInline: true, dependencies: [{ kind: "component", type: StepperStepComponent, selector: "[kendoStepperStep]", inputs: ["step", "index", "current", "type", "successIcon", "successSVGIcon", "errorIcon", "errorSVGIcon", "svgIcon", "indicatorTemplate", "labelTemplate", "stepTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: StepperListComponent, isStandalone: true, selector: "[kendoStepperList]", inputs: { linear: "linear", stepType: "stepType", orientation: "orientation", currentStep: "currentStep", steps: "steps", successIcon: "successIcon", successSVGIcon: "successSVGIcon", errorIcon: "errorIcon", errorSVGIcon: "errorSVGIcon", svgIcon: "svgIcon", indicatorTemplate: "indicatorTemplate", labelTemplate: "labelTemplate", stepTemplate: "stepTemplate" }, outputs: { listKeydown: "listKeydown", listClick: "listClick" }, ngImport: i0, template: "\n        @for (step of steps; track step; let idx = $index) {\n          <li kendoStepperStep\n            [attr.data-kendo-stepper-index]='idx'\n            [type]='stepType'\n            [step]='step'\n            [index]='idx'\n            [current]='currentStep'\n            [successIcon]='successIcon'\n            [successSVGIcon]='successSVGIcon'\n            [errorIcon]='errorIcon'\n            [errorSVGIcon]='errorSVGIcon'\n            [svgIcon]='svgIcon'\n            [indicatorTemplate]='indicatorTemplate'\n            [labelTemplate]='labelTemplate'\n            [stepTemplate]='stepTemplate'\n            class='k-step'\n            [class.k-step-first]='idx === 0'\n            [class.k-step-last]='idx === steps.length - 1'\n            [class.k-step-done]='idx < currentStep'\n            [class.k-step-current]='idx === currentStep'\n            [class.k-step-optional]='step.optional'\n            [class.k-disabled]='step.disabled'\n            [class.k-focus]='idx === focusedStep || (!isPresent(focusedStep) && idx === currentStep)'\n            [ngClass]='step.cssClass'\n            [ngStyle]='step.cssStyle'\n            [style.max-width.%] = 'maxStepWidth'\n            [style.max-height.%] = 'maxStepHeight'\n            >\n          </li>\n        }\n        ", isInline: true, dependencies: [{ kind: "component", type: StepperStepComponent, selector: "[kendoStepperStep]", inputs: ["step", "index", "current", "type", "successIcon", "successSVGIcon", "errorIcon", "errorSVGIcon", "svgIcon", "indicatorTemplate", "labelTemplate", "stepTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: StepperListComponent, decorators: [{
             type: Component,
             args: [{
                     selector: '[kendoStepperList]',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
         @for (step of steps; track step; let idx = $index) {
           <li kendoStepperStep
@@ -7244,7 +7649,13 @@ class StepperMessages extends ComponentMessages {
     /**
      * Specifies the optional text.
      */
-    optional;
+    set optional(value) {
+        this._optional.set(value);
+    }
+    get optional() {
+        return this._optional();
+    }
+    _optional = signal(undefined, ...(ngDevMode ? [{ debugName: "_optional" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: StepperMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: StepperMessages, isStandalone: true, selector: "kendo-stepper-messages-base", inputs: { optional: "optional" }, usesInheritance: true, ngImport: i0 });
 }
@@ -7329,24 +7740,40 @@ class StepperComponent {
      *
      * @default 'indicator'
      */
-    stepType = 'indicator';
+    set stepType(value) {
+        this._stepType.set(value);
+    }
+    get stepType() {
+        return this._stepType();
+    }
     /**
      * Specifies the linear flow of the Stepper.
      *
      * @default true
      */
-    linear = true;
+    set linear(value) {
+        this._linear.set(value);
+    }
+    get linear() {
+        return this._linear();
+    }
     /**
      * Specifies the orientation of the Stepper
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/stepper/orientation)).
      *
      * @default 'horizontal'
      */
-    orientation = 'horizontal';
+    set orientation(value) {
+        this._orientation.set(value);
+    }
+    get orientation() {
+        return this._orientation();
+    }
     /**
      * Specifies the index of the current step.
      */
     set currentStep(value) {
+        this._currentStep.set(value);
         this.stepperService.currentStep = value;
     }
     get currentStep() {
@@ -7358,48 +7785,73 @@ class StepperComponent {
      */
     set steps(steps) {
         if (isPresent(steps) && steps.length > 0) {
-            this._steps = steps;
+            this._steps.set(steps);
         }
     }
     get steps() {
-        return this._steps;
+        return this._steps();
     }
     /**
      * Specifies an SVG icon to be rendered inside the step indicator instead of the default numeric or text content.
      * You can use either an [existing Kendo SVG icon](https://www.telerik.com/kendo-angular-ui/components/icons/svgicon/svgicon-list) or a custom one.
      */
     set svgIcon(icon) {
-        this._svgIcon = icon;
+        this._svgIcon.set(icon);
     }
     get svgIcon() {
-        return this._svgIcon;
+        return this._svgIcon();
     }
     /**
      * Specifies an SVG icon to be rendered for the success icon.
      * You can use either an [existing Kendo SVG icon](https://www.telerik.com/kendo-angular-ui/components/icons/svgicon/svgicon-list) or a custom one.
      */
-    successSVGIcon;
+    set successSVGIcon(value) {
+        this._successSVGIcon.set(value);
+    }
+    get successSVGIcon() {
+        return this._successSVGIcon();
+    }
     /**
      * Specifies an SVG icon to be rendered for the error icon.
      * You can use either an [existing Kendo SVG icon](https://www.telerik.com/kendo-angular-ui/components/icons/svgicon/svgicon-list) or a custom one.
      */
-    errorSVGIcon;
+    set errorSVGIcon(value) {
+        this._errorSVGIcon.set(value);
+    }
+    get errorSVGIcon() {
+        return this._errorSVGIcon();
+    }
     /**
      * Specifies an SVG icon that will be rendered inside the step for valid previous steps.
      * You can use either an [existing Kendo SVG icon](https://www.telerik.com/kendo-angular-ui/components/icons/svgicon/svgicon-list) or a custom one.
      */
-    successIcon;
+    set successIcon(value) {
+        this._successIcon.set(value);
+    }
+    get successIcon() {
+        return this._successIcon();
+    }
     /**
     * Specifies an SVG icon that will be rendered inside the step for invalid previous steps.
     * You can use either an [existing Kendo SVG icon](https://www.telerik.com/kendo-angular-ui/components/icons/svgicon/svgicon-list) or a custom one.
     */
-    errorIcon;
+    set errorIcon(value) {
+        this._errorIcon.set(value);
+    }
+    get errorIcon() {
+        return this._errorIcon();
+    }
     /**
      * Specifies the duration of the progress indicator animation in milliseconds.
      *
      * @default true
      */
-    animation = true;
+    set animation(value) {
+        this._animation.set(value);
+    }
+    get animation() {
+        return this._animation();
+    }
     /**
      * Fires when a step is about to be activated. You can prevent this event.
      */
@@ -7422,10 +7874,31 @@ class StepperComponent {
      */
     indicatorTemplate;
     dynamicRTLSubscription;
-    _steps = [];
-    _successSVGIcon;
-    _errorSVGIcon;
-    _svgIcon;
+    _steps = signal([], ...(ngDevMode ? [{ debugName: "_steps" }] : []));
+    _svgIcon = signal(undefined, ...(ngDevMode ? [{ debugName: "_svgIcon" }] : []));
+    _stepType = signal('indicator', ...(ngDevMode ? [{ debugName: "_stepType" }] : []));
+    _linear = signal(true, ...(ngDevMode ? [{ debugName: "_linear" }] : []));
+    _orientation = signal('horizontal', ...(ngDevMode ? [{ debugName: "_orientation" }] : []));
+    _currentStep = signal(0, ...(ngDevMode ? [{ debugName: "_currentStep" }] : []));
+    _successSVGIcon = signal(undefined, ...(ngDevMode ? [{ debugName: "_successSVGIcon" }] : []));
+    _errorSVGIcon = signal(undefined, ...(ngDevMode ? [{ debugName: "_errorSVGIcon" }] : []));
+    _successIcon = signal(undefined, ...(ngDevMode ? [{ debugName: "_successIcon" }] : []));
+    _errorIcon = signal(undefined, ...(ngDevMode ? [{ debugName: "_errorIcon" }] : []));
+    _animation = signal(true, ...(ngDevMode ? [{ debugName: "_animation" }] : []));
+    _progressAnimation = computed(() => {
+        const animation = this._animation();
+        let duration;
+        if (typeof animation === 'number') {
+            duration = animation;
+        }
+        else if (typeof animation === 'boolean' && animation) {
+            duration = DEFAULT_ANIMATION_DURATION;
+        }
+        else {
+            duration = 0;
+        }
+        return { duration };
+    }, ...(ngDevMode ? [{ debugName: "_progressAnimation" }] : []));
     constructor(renderer, elem, localization, stepperService) {
         this.renderer = renderer;
         this.elem = elem;
@@ -7474,7 +7947,7 @@ class StepperComponent {
      * @hidden
      */
     get progressAnimation() {
-        return { duration: this.animationDuration };
+        return this._progressAnimation();
     }
     /**
      * @hidden
@@ -7588,12 +8061,14 @@ class StepperComponent {
             <kendo-progressbar-messages progressBarLabel="progress"></kendo-progressbar-messages>
           </kendo-progressbar>
         }
-        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedStepperMessagesDirective, selector: "\n      [kendoStepperLocalizedMessages]\n    " }, { kind: "component", type: StepperListComponent, selector: "[kendoStepperList]", inputs: ["linear", "stepType", "orientation", "currentStep", "steps", "successIcon", "successSVGIcon", "errorIcon", "errorSVGIcon", "svgIcon", "indicatorTemplate", "labelTemplate", "stepTemplate"], outputs: ["listKeydown", "listClick"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ProgressBarComponent, selector: "kendo-progressbar", inputs: ["label", "progressCssStyle", "progressCssClass", "emptyCssStyle", "emptyCssClass", "animation", "max"], outputs: ["animationEnd"], exportAs: ["kendoProgressBar"] }, { kind: "component", type: ProgressBarCustomMessagesComponent, selector: "kendo-progressbar-messages" }] });
+        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedStepperMessagesDirective, selector: "\n      [kendoStepperLocalizedMessages]\n    " }, { kind: "component", type: StepperListComponent, selector: "[kendoStepperList]", inputs: ["linear", "stepType", "orientation", "currentStep", "steps", "successIcon", "successSVGIcon", "errorIcon", "errorSVGIcon", "svgIcon", "indicatorTemplate", "labelTemplate", "stepTemplate"], outputs: ["listKeydown", "listClick"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ProgressBarComponent, selector: "kendo-progressbar", inputs: ["label", "progressCssStyle", "progressCssClass", "emptyCssStyle", "emptyCssClass", "animation", "max"], outputs: ["animationEnd"], exportAs: ["kendoProgressBar"] }, { kind: "component", type: ProgressBarCustomMessagesComponent, selector: "kendo-progressbar-messages" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: StepperComponent, decorators: [{
             type: Component,
             args: [{
+                    selector: 'kendo-stepper',
                     exportAs: 'kendoStepper',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     providers: [
                         LocalizationService,
                         StepperService,
@@ -7604,7 +8079,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
                         provideComponentName('stepper'),
                         { provide: KENDO_WEBMCP_HOST, useExisting: forwardRef(() => StepperComponent) }
                     ],
-                    selector: 'kendo-stepper',
                     template: `
         <ng-container kendoStepperLocalizedMessages
           i18n-optional="kendo.stepper.optional|The text for the optional segment of the step label"
@@ -7782,7 +8256,13 @@ class Messages extends ComponentMessages {
     /**
      * Defines the alt attribute text of the image in the Avatar.
      */
-    avatarAlt;
+    set avatarAlt(value) {
+        this._avatarAlt.set(value);
+    }
+    get avatarAlt() {
+        return this._avatarAlt();
+    }
+    _avatarAlt = signal(undefined, ...(ngDevMode ? [{ debugName: "_avatarAlt" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: Messages, isStandalone: true, selector: "kendoAvatarMessages", inputs: { avatarAlt: "avatarAlt" }, usesInheritance: true, ngImport: i0 });
 }
@@ -7878,13 +8358,13 @@ class AvatarComponent {
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/avatar/appearance#size)). The default value is set by the Kendo theme.
      */
     set size(size) {
-        if (size !== this._size) {
+        if (size !== this._size()) {
             this.handleClasses('size', size);
-            this._size = size;
+            this._size.set(size);
         }
     }
     get size() {
-        return this._size;
+        return this._size();
     }
     /**
      * Specifies the rounded styling of the Avatar
@@ -7893,36 +8373,36 @@ class AvatarComponent {
     set rounded(rounded) {
         if (rounded !== this.rounded) {
             this.handleClasses('rounded', rounded);
-            this._rounded = rounded;
+            this._rounded.set(rounded);
         }
     }
     get rounded() {
-        return this._rounded;
+        return this._rounded();
     }
     /**
      * Specifies the theme color of the Avatar.
      * The theme color applies as background and border color while adjusting the text color accordingly. The default value is set by the Kendo theme.
      */
     set themeColor(themeColor) {
-        if (themeColor !== this._themeColor) {
-            this._themeColor = themeColor;
+        if (themeColor !== this._themeColor()) {
+            this._themeColor.set(themeColor);
             this.handleFillModeAndThemeColorClasses(this.fillMode, this.themeColor);
         }
     }
     get themeColor() {
-        return this._themeColor;
+        return this._themeColor();
     }
     /**
      * Specifies the fill style of the Avatar. The default value is set by the Kendo theme.
      */
     set fillMode(fillMode) {
         if (fillMode !== this.fillMode) {
-            this._fillMode = fillMode;
+            this._fillMode.set(fillMode);
             this.handleFillModeAndThemeColorClasses(this.fillMode, this.themeColor);
         }
     }
     get fillMode() {
-        return this._fillMode;
+        return this._fillMode();
     }
     /**
      * Specifies the appearance fill style of the avatar.
@@ -7938,16 +8418,31 @@ class AvatarComponent {
      *
      * @default false
      */
-    border = false;
+    set border(value) {
+        this._border.set(value);
+    }
+    get border() {
+        return this._border();
+    }
     /**
      * Defines a CSS class or multiple classes separated by spaces.
      * You can apply these classes to a `span` element inside the Avatar and also use custom icons.
      */
-    iconClass;
+    set iconClass(value) {
+        this._iconClass.set(value);
+    }
+    get iconClass() {
+        return this._iconClass();
+    }
     /**
      * Sets the width of the Avatar.
      */
-    width;
+    set width(value) {
+        this._width.set(value);
+    }
+    get width() {
+        return this._width();
+    }
     /**
      * @hidden
      */
@@ -7957,7 +8452,12 @@ class AvatarComponent {
     /**
      * Sets the height of the Avatar.
      */
-    height;
+    set height(value) {
+        this._height.set(value);
+    }
+    get height() {
+        return this._height();
+    }
     /**
      * @hidden
      */
@@ -7968,20 +8468,40 @@ class AvatarComponent {
      * Defines the CSS styles that render on the content element of the Avatar.
      * Supports the type of values that [`ngStyle`](link:site.data.urls.angular['ngstyleapi']) supports.
      */
-    cssStyle;
+    set cssStyle(value) {
+        this._cssStyle.set(value);
+    }
+    get cssStyle() {
+        return this._cssStyle();
+    }
     /**
      * Sets the initials for the Avatar.
      */
-    initials;
+    set initials(value) {
+        this._initials.set(value);
+    }
+    get initials() {
+        return this._initials();
+    }
     /**
      * Sets the icon for the Avatar.
      * All [Kendo UI Icons](https://www.telerik.com/kendo-angular-ui/components/styling/icons#icons-list) are supported.
      */
-    icon;
+    set icon(value) {
+        this._icon.set(value);
+    }
+    get icon() {
+        return this._icon();
+    }
     /**
      * Sets the image source of the Avatar.
      */
-    imageSrc;
+    set imageSrc(value) {
+        this._imageSrc.set(value);
+    }
+    get imageSrc() {
+        return this._imageSrc();
+    }
     /**
      * Defines an SVG icon to render.
      * You can use either an [existing Kendo SVG icon](https://www.telerik.com/kendo-angular-ui/components/icons/svgicon/svgicon-list) or a custom one.
@@ -7990,16 +8510,24 @@ class AvatarComponent {
         if (isDevMode() && icon && this.icon && this.iconClass) {
             throw new Error('Setting both icon/svgIcon and iconClass options at the same time is not supported.');
         }
-        this._svgIcon = icon;
+        this._svgIcon.set(icon);
     }
     get svgIcon() {
-        return this._svgIcon;
-    }
-    _themeColor = undefined;
-    _size = undefined;
-    _fillMode = undefined;
-    _rounded = undefined;
-    _svgIcon;
+        return this._svgIcon();
+    }
+    _themeColor = signal(undefined, ...(ngDevMode ? [{ debugName: "_themeColor" }] : []));
+    _size = signal(undefined, ...(ngDevMode ? [{ debugName: "_size" }] : []));
+    _fillMode = signal(undefined, ...(ngDevMode ? [{ debugName: "_fillMode" }] : []));
+    _rounded = signal(undefined, ...(ngDevMode ? [{ debugName: "_rounded" }] : []));
+    _svgIcon = signal(undefined, ...(ngDevMode ? [{ debugName: "_svgIcon" }] : []));
+    _border = signal(false, ...(ngDevMode ? [{ debugName: "_border" }] : []));
+    _iconClass = signal(undefined, ...(ngDevMode ? [{ debugName: "_iconClass" }] : []));
+    _width = signal(undefined, ...(ngDevMode ? [{ debugName: "_width" }] : []));
+    _height = signal(undefined, ...(ngDevMode ? [{ debugName: "_height" }] : []));
+    _cssStyle = signal(undefined, ...(ngDevMode ? [{ debugName: "_cssStyle" }] : []));
+    _initials = signal(undefined, ...(ngDevMode ? [{ debugName: "_initials" }] : []));
+    _icon = signal(undefined, ...(ngDevMode ? [{ debugName: "_icon" }] : []));
+    _imageSrc = signal(undefined, ...(ngDevMode ? [{ debugName: "_imageSrc" }] : []));
     _themeColorClasses = ['k-avatar-primary', 'k-avatar-secondary', 'k-avatar-tertiary', 'k-avatar-base'];
     constructor(localization, renderer, element) {
         this.localization = localization;
@@ -8103,7 +8631,7 @@ class AvatarComponent {
             </kendo-icon-wrapper>
           </span>
         }
-        `, isInline: true, dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: LocalizedAvatarMessagesDirective, selector: "[kendoAvatarLocalizedMessages]" }] });
+        `, isInline: true, dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: LocalizedAvatarMessagesDirective, selector: "[kendoAvatarLocalizedMessages]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: AvatarComponent, decorators: [{
             type: Component,
@@ -8151,7 +8679,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
         }
         `,
                     standalone: true,
-                    imports: [NgStyle, IconWrapperComponent, LocalizedAvatarMessagesDirective]
+                    imports: [NgStyle, IconWrapperComponent, LocalizedAvatarMessagesDirective],
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }], ctorParameters: () => [{ type: i1.LocalizationService }, { type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { hostClass: [{
                 type: HostBinding,
@@ -8278,27 +8807,40 @@ class CardComponent {
     /**
      * @hidden
      */
-    direction;
+    get direction() {
+        return this._direction();
+    }
     /**
      * Specifies the layout of the Card content.
      *
      * @default 'vertical'
      */
-    orientation = 'vertical';
+    set orientation(value) {
+        this._orientation.set(value);
+    }
+    get orientation() {
+        return this._orientation();
+    }
     /**
      * Defines the width of the Card.
      *
      * @default '285px'
      */
-    width = '285px';
+    set width(value) {
+        this._width.set(value);
+    }
+    get width() {
+        return this._width();
+    }
+    _direction = signal(undefined, ...(ngDevMode ? [{ debugName: "_direction" }] : []));
+    _orientation = signal('vertical', ...(ngDevMode ? [{ debugName: "_orientation" }] : []));
+    _width = signal('285px', ...(ngDevMode ? [{ debugName: "_width" }] : []));
     dynamicRTLSubscription;
-    rtl = false;
     constructor(localizationService) {
         this.localizationService = localizationService;
         validatePackage(packageMetadata);
         this.dynamicRTLSubscription = this.localizationService.changes.subscribe(({ rtl }) => {
-            this.rtl = rtl;
-            this.direction = this.rtl ? 'rtl' : 'ltr';
+            this._direction.set(rtl ? 'rtl' : 'ltr');
         });
     }
     ngOnDestroy() {
@@ -8315,7 +8857,7 @@ class CardComponent {
             }
         ], ngImport: i0, template: `
         <ng-content></ng-content>
-    `, isInline: true });
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: CardComponent, decorators: [{
             type: Component,
@@ -8331,7 +8873,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
                     template: `
         <ng-content></ng-content>
     `,
-                    standalone: true
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }], ctorParameters: () => [{ type: i1.LocalizationService }], propDecorators: { hostClass: [{
                 type: HostBinding,
@@ -8371,7 +8914,7 @@ class CardHeaderComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: CardHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", type: CardHeaderComponent, isStandalone: true, selector: "kendo-card-header", host: { properties: { "class.k-card-header": "this.hostClass" } }, ngImport: i0, template: `
         <ng-content></ng-content>
-    `, isInline: true });
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: CardHeaderComponent, decorators: [{
             type: Component,
@@ -8380,7 +8923,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
                     template: `
         <ng-content></ng-content>
     `,
-                    standalone: true
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }], propDecorators: { hostClass: [{
                 type: HostBinding,
@@ -8403,7 +8947,7 @@ class CardBodyComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: CardBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", type: CardBodyComponent, isStandalone: true, selector: "kendo-card-body", host: { properties: { "class.k-card-body": "this.hostClass" } }, ngImport: i0, template: `
         <ng-content></ng-content>
-    `, isInline: true });
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: CardBodyComponent, decorators: [{
             type: Component,
@@ -8412,7 +8956,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
                     template: `
         <ng-content></ng-content>
     `,
-                    standalone: true
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }], propDecorators: { hostClass: [{
                 type: HostBinding,
@@ -8435,7 +8980,7 @@ class CardFooterComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: CardFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", type: CardFooterComponent, isStandalone: true, selector: "kendo-card-footer", host: { properties: { "class.k-card-footer": "this.hostClass" } }, ngImport: i0, template: `
         <ng-content></ng-content>
-    `, isInline: true });
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: CardFooterComponent, decorators: [{
             type: Component,
@@ -8444,7 +8989,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
                     template: `
         <ng-content></ng-content>
     `,
-                    standalone: true
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }], propDecorators: { hostClass: [{
                 type: HostBinding,
@@ -8488,13 +9034,23 @@ class CardActionsComponent {
      *
      * @default 'horizontal'
      */
-    orientation = 'horizontal';
+    set orientation(value) {
+        this._orientation.set(value);
+    }
+    get orientation() {
+        return this._orientation();
+    }
     /**
      * Specifies the layout of the Card action buttons.
      *
      * @default 'start'
      */
-    layout = 'start';
+    set layout(value) {
+        this._layout.set(value);
+    }
+    get layout() {
+        return this._layout();
+    }
     /**
      * Defines the Card actions declaratively.
      * You can pass an array of `CardAction` objects or a `TemplateRef`.
@@ -8519,6 +9075,8 @@ class CardActionsComponent {
      * @hidden
      */
     actionsTemplate;
+    _orientation = signal('horizontal', ...(ngDevMode ? [{ debugName: "_orientation" }] : []));
+    _layout = signal('start', ...(ngDevMode ? [{ debugName: "_layout" }] : []));
     /**
      * @hidden
      */
@@ -8548,7 +9106,7 @@ class CardActionsComponent {
         @if (actionsTemplate) {
           <ng-template [ngTemplateOutlet]="actionsTemplate"></ng-template>
         }
-        `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+        `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: CardActionsComponent, decorators: [{
             type: Component,
@@ -8578,7 +9136,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
         }
         `,
                     standalone: true,
-                    imports: [NgTemplateOutlet]
+                    imports: [NgTemplateOutlet],
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }], propDecorators: { hostClass: [{
                 type: HostBinding,
@@ -8863,19 +9422,34 @@ class ExpansionPanelComponent {
      * Specifies the primary text in the header of the ExpansionPanel
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/expansionpanel/title#titles-and-subtitles)).
      */
-    title = '';
+    set title(value) {
+        this._title.set(value);
+    }
+    get title() {
+        return this._title();
+    }
     /**
      * Specifies the secondary text in the header of the ExpansionPanel, which renders next to the collapse/expand icon
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/expansionpanel/title#titles-and-subtitles)).
      */
-    subtitle = '';
+    set subtitle(value) {
+        this._subtitle.set(value);
+    }
+    get subtitle() {
+        return this._subtitle();
+    }
     /**
      * Specifies whether the ExpansionPanel is disabled. If disabled, the ExpansionPanel can be neither expanded nor collapsed
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/expansionpanel/disabled-state)).
      *
      * @default false
      */
-    disabled = false;
+    set disabled(value) {
+        this._disabled.set(value);
+    }
+    get disabled() {
+        return this._disabled();
+    }
     /**
      * Specifies whether the ExpansionPanel is expanded. The property supports two-way binding
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/expansionpanel/interaction#setting-the-initial-state)).
@@ -8886,7 +9460,7 @@ class ExpansionPanelComponent {
         if (value === this.expanded) {
             return;
         }
-        this._expanded = value;
+        this._expanded.set(value);
         if (this.expanded) {
             this.removeContentHiddenClass();
         }
@@ -8895,7 +9469,7 @@ class ExpansionPanelComponent {
         }
     }
     get expanded() {
-        return this._expanded;
+        return this._expanded();
     }
     /**
      * Defines an SVG icon for the expanded state of the component.
@@ -8905,10 +9479,10 @@ class ExpansionPanelComponent {
         if (isDevMode() && icon && this.expandIcon) {
             throw new Error('Setting both expandIcon/svgExpandIcon options at the same time is not supported.');
         }
-        this._svgExpandIcon = icon;
+        this._svgExpandIcon.set(icon);
     }
     get svgExpandIcon() {
-        return this._svgExpandIcon;
+        return this._svgExpandIcon();
     }
     /**
      * Defines an SVG icon for the collapsed state of the component.
@@ -8918,28 +9492,43 @@ class ExpansionPanelComponent {
         if (isDevMode() && icon && this.collapseIcon) {
             throw new Error('Setting both collapseIcon/svgCollapseIcon options at the same time is not supported.');
         }
-        this._svgCollapseIcon = icon;
+        this._svgCollapseIcon.set(icon);
     }
     get svgCollapseIcon() {
-        return this._svgCollapseIcon;
+        return this._svgCollapseIcon();
     }
     /**
      * Sets a custom icon via CSS class(es) for the collapsed state of the component
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/expansionpanel/icons#icons)).
      */
-    expandIcon;
+    set expandIcon(value) {
+        this._expandIcon.set(value);
+    }
+    get expandIcon() {
+        return this._expandIcon();
+    }
     /**
      * Sets a custom icon via CSS class(es) for the expanded state of the component
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/expansionpanel/icons#icons)).
      */
-    collapseIcon;
+    set collapseIcon(value) {
+        this._collapseIcon.set(value);
+    }
+    get collapseIcon() {
+        return this._collapseIcon();
+    }
     /**
      * Specifies the animation settings of the ExpansionPanel
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/expansionpanel/animations)).
      *
      * @default true
      */
-    animation = true;
+    set animation(value) {
+        this._animation.set(value);
+    }
+    get animation() {
+        return this._animation();
+    }
     /**
      * Fires when the `expanded` property of the component is updated.
      * Used to provide a two-way binding for the `expanded` property
@@ -8974,16 +9563,25 @@ class ExpansionPanelComponent {
     get disabledClass() {
         return this.disabled;
     }
-    direction;
+    get direction() {
+        return this._direction();
+    }
     /**
      * @hidden
      */
     focused = false;
     animationEnd = new EventEmitter();
     subscriptions = new Subscription();
-    _expanded = false;
-    _svgExpandIcon = chevronDownIcon;
-    _svgCollapseIcon = chevronUpIcon;
+    _title = signal('', ...(ngDevMode ? [{ debugName: "_title" }] : []));
+    _subtitle = signal('', ...(ngDevMode ? [{ debugName: "_subtitle" }] : []));
+    _disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
+    _expanded = signal(false, ...(ngDevMode ? [{ debugName: "_expanded" }] : []));
+    _expandIcon = signal(undefined, ...(ngDevMode ? [{ debugName: "_expandIcon" }] : []));
+    _collapseIcon = signal(undefined, ...(ngDevMode ? [{ debugName: "_collapseIcon" }] : []));
+    _animation = signal(true, ...(ngDevMode ? [{ debugName: "_animation" }] : []));
+    _svgExpandIcon = signal(chevronDownIcon, ...(ngDevMode ? [{ debugName: "_svgExpandIcon" }] : []));
+    _svgCollapseIcon = signal(chevronUpIcon, ...(ngDevMode ? [{ debugName: "_svgCollapseIcon" }] : []));
+    _direction = signal('ltr', ...(ngDevMode ? [{ debugName: "_direction" }] : []));
     nextId = incrementingId++;
     constructor(renderer, hostElement, ngZone, localizationService, builder) {
         this.renderer = renderer;
@@ -8992,11 +9590,11 @@ class ExpansionPanelComponent {
         this.localizationService = localizationService;
         this.builder = builder;
         validatePackage(packageMetadata);
-        this.direction = localizationService.rtl ? 'rtl' : 'ltr';
+        this._direction.set(localizationService.rtl ? 'rtl' : 'ltr');
     }
     ngOnInit() {
         this.renderer.removeAttribute(this.hostElement.nativeElement, 'title');
-        this.subscriptions = this.localizationService.changes.subscribe(({ rtl }) => { this.direction = rtl ? 'rtl' : 'ltr'; });
+        this.subscriptions = this.localizationService.changes.subscribe(({ rtl }) => { this._direction.set(rtl ? 'rtl' : 'ltr'); });
         const elem = this.hostElement.nativeElement;
         const header = this.header.nativeElement;
         this.subscriptions.add(this.renderer.listen(header, 'focus', () => this.focusExpansionPanel(elem)));
@@ -9141,7 +9739,7 @@ class ExpansionPanelComponent {
         }
     }
     setExpanded(value) {
-        this._expanded = value;
+        this._expanded.set(value);
         this.expandedChange.emit(value);
     }
     animateContent() {
@@ -9227,7 +9825,7 @@ class ExpansionPanelComponent {
             <ng-content></ng-content>
           </div>
         </div>
-        `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
+        `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ExpansionPanelComponent, decorators: [{
             type: Component,
@@ -9285,7 +9883,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
         </div>
         `,
                     standalone: true,
-                    imports: [NgTemplateOutlet, IconWrapperComponent]
+                    imports: [NgTemplateOutlet, IconWrapperComponent],
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i1.LocalizationService }, { type: i2.AnimationBuilder }], propDecorators: { title: [{
                 type: Input
@@ -9617,7 +10216,7 @@ class TileLayoutDraggingService {
     cdr;
     localization;
     reorderable = new BehaviorSubject(null);
-    resizable = new BehaviorSubject(null);
+    resizable = signal(null, ...(ngDevMode ? [{ debugName: "resizable" }] : []));
     reorder = new Subject();
     resize = new Subject();
     tileLayoutSettings;
@@ -9733,7 +10332,7 @@ class TileLayoutDraggingService {
             });
             this.cdr.markForCheck();
         }
-        else if (this.resizable && resizing) {
+        else if (this.resizable() && resizing) {
             this.zone.run(() => {
                 this.startingPoint = {
                     top: originalEvent.clientY,
@@ -10222,12 +10821,13 @@ class TileLayoutItemHeaderComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: TileLayoutItemHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", type: TileLayoutItemHeaderComponent, isStandalone: true, selector: "kendo-tilelayout-item-header", host: { properties: { "class.k-tilelayout-item-header": "this.hostClass", "class.k-card-header": "this.hostClass" } }, ngImport: i0, template: `
         <ng-content></ng-content>
-    `, isInline: true });
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: TileLayoutItemHeaderComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-tilelayout-item-header',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
         <ng-content></ng-content>
     `,
@@ -10247,8 +10847,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
 class TileLayoutResizeHandleDirective {
     el;
     renderer;
-    resizeDirection;
-    rtl;
+    set resizeDirection(value) { this._resizeDirection.set(value); }
+    get resizeDirection() { return this._resizeDirection(); }
+    set rtl(value) { this._rtl.set(value); }
+    get rtl() { return this._rtl(); }
+    _resizeDirection = signal(undefined, ...(ngDevMode ? [{ debugName: "_resizeDirection" }] : []));
+    _rtl = signal(undefined, ...(ngDevMode ? [{ debugName: "_rtl" }] : []));
     constructor(el, renderer) {
         this.el = el;
         this.renderer = renderer;
@@ -10320,47 +10924,54 @@ class TileLayoutItemComponent {
     /**
      * Sets the title text that appears in the item header ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/tilelayout/tiles-configuration#tiles-configuration)).
      */
-    title;
+    set title(value) { this._title.set(value); }
+    get title() { return this._title(); }
     /**
      * Sets how many rows the tile item spans ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/tilelayout/resizing#programmatic-resizing)).
      * @default 1
      */
-    rowSpan = 1;
+    set rowSpan(value) { this._rowSpan.set(value); }
+    get rowSpan() { return this._rowSpan(); }
     /**
      *  Sets how many columns the tile item spans ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/tilelayout/resizing#programmatic-resizing)).
      * @default 1
      */
-    colSpan = 1;
+    set colSpan(value) { this._colSpan.set(value); }
+    get colSpan() { return this._colSpan(); }
     /**
      * Sets the order of the tile item within the TileLayout.
      * When not set, items receive increasing order values based on their DOM position.
      */
     set order(value) {
-        this._order = value;
-        this.renderer.setStyle(this.elem.nativeElement, 'order', `${this._order}`);
+        this._order.set(value);
+        this.renderer.setStyle(this.elem.nativeElement, 'order', `${this._order()}`);
     }
     get order() {
-        return this._order;
+        return this._order();
     }
     /**
      * Sets the starting column position of the item ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/tilelayout/tiles-configuration#size-and-position)).
      */
-    col;
+    set col(value) { this._col.set(value); }
+    get col() { return this._col(); }
     /**
      * Sets the starting row position of the item ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/tilelayout/tiles-configuration#size-and-position)).
      */
-    row;
+    set row(value) { this._row.set(value); }
+    get row() { return this._row(); }
     /**
      * Enables or disables individual item reordering.
      *
      * @default true
      */
-    reorderable = true;
+    set reorderable(value) { this._reorderable.set(value); }
+    get reorderable() { return this._reorderable(); }
     /**
      * Enables or disables individual item resizing.
      * @default true
      */
-    resizable = true;
+    set resizable(value) { this._resizable.set(value); }
+    get resizable() { return this._resizable(); }
     itemClass = true;
     hostRole = 'listitem';
     get hostTabindex() {
@@ -10400,16 +11011,16 @@ class TileLayoutItemComponent {
      * @hidden
      */
     get isResizable() {
-        return this.resizable && this.draggingService.resizable.getValue();
+        return this.resizable && this.draggingService.resizable();
     }
     /**
      * @hidden
      */
-    resizeDirections;
+    get resizeDirections() { return this._resizeDirections(); }
     /**
      * @hidden
      */
-    rtl;
+    get rtl() { return this._rtl(); }
     headers;
     /**
      * @hidden
@@ -10418,7 +11029,16 @@ class TileLayoutItemComponent {
     subs = new Subscription();
     keyboardNavigationSubs;
     focusableItems;
-    _order;
+    _order = signal(undefined, ...(ngDevMode ? [{ debugName: "_order" }] : []));
+    _title = signal(undefined, ...(ngDevMode ? [{ debugName: "_title" }] : []));
+    _rowSpan = signal(1, ...(ngDevMode ? [{ debugName: "_rowSpan" }] : []));
+    _colSpan = signal(1, ...(ngDevMode ? [{ debugName: "_colSpan" }] : []));
+    _col = signal(undefined, ...(ngDevMode ? [{ debugName: "_col" }] : []));
+    _row = signal(undefined, ...(ngDevMode ? [{ debugName: "_row" }] : []));
+    _reorderable = signal(true, ...(ngDevMode ? [{ debugName: "_reorderable" }] : []));
+    _resizable = signal(true, ...(ngDevMode ? [{ debugName: "_resizable" }] : []));
+    _rtl = signal(undefined, ...(ngDevMode ? [{ debugName: "_rtl" }] : []));
+    _resizeDirections;
     constructor(elem, zone, renderer, localization, draggingService, keyboardNavigationService) {
         this.elem = elem;
         this.zone = zone;
@@ -10426,12 +11046,11 @@ class TileLayoutItemComponent {
         this.localization = localization;
         this.draggingService = draggingService;
         this.keyboardNavigationService = keyboardNavigationService;
+        this._resizeDirections = computed(() => this.draggingService.resizable() && this._resizable()
+            ? (this._rtl() ? RTL_RESIZE_DIRECTIONS : RESIZE_DIRECTIONS)
+            : undefined, ...(ngDevMode ? [{ debugName: "_resizeDirections" }] : []));
         this.subs.add(this.localization.changes.subscribe(({ rtl }) => {
-            this.rtl = rtl;
-        }));
-        this.subs.add(this.draggingService.resizable.subscribe(resizable => {
-            this.resizeDirections = resizable && this.resizable ?
-                this.rtl ? RTL_RESIZE_DIRECTIONS : RESIZE_DIRECTIONS : undefined;
+            this._rtl.set(rtl);
         }));
         this.titleId = getId('k-tilelayout-title');
     }
@@ -10464,10 +11083,6 @@ class TileLayoutItemComponent {
         if (changes['reorderable'] && !changes['reorderable'].firstChange) {
             this.toggleCursorClass(changes['reorderable'].currentValue && this.draggingService.reorderable.getValue());
         }
-        if (changes['resizable']) {
-            this.resizeDirections = this.resizable && this.draggingService.resizable.getValue() ?
-                this.rtl ? RTL_RESIZE_DIRECTIONS : RESIZE_DIRECTIONS : undefined;
-        }
     }
     ngOnDestroy() {
         this.subs.unsubscribe();
@@ -10511,12 +11126,13 @@ class TileLayoutItemComponent {
             </div>
           }
         }
-        `, isInline: true, dependencies: [{ kind: "component", type: TileLayoutItemHeaderComponent, selector: "kendo-tilelayout-item-header" }, { kind: "directive", type: TileLayoutResizeHandleDirective, selector: "[kendoTileLayoutResizeHandle]", inputs: ["resizeDirection", "rtl"] }] });
+        `, isInline: true, dependencies: [{ kind: "component", type: TileLayoutItemHeaderComponent, selector: "kendo-tilelayout-item-header" }, { kind: "directive", type: TileLayoutResizeHandleDirective, selector: "[kendoTileLayoutResizeHandle]", inputs: ["resizeDirection", "rtl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: TileLayoutItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-tilelayout-item',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
         @if (title) {
           <kendo-tilelayout-item-header>
@@ -10619,13 +11235,15 @@ class TileLayoutComponent {
      * Specifies the number of columns ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/tilelayout/tiles-configuration#size-and-position)).
      * @default 1
      */
-    columns = 1;
+    set columns(value) { this._columns.set(value); }
+    get columns() { return this._columns(); }
     /**
      * Sets the width of the columns.
      * Use numeric values for pixels or string values for other CSS units ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/tilelayout/tiles-configuration#size-and-position)).
      * @default '1fr'
      */
-    columnWidth = '1fr';
+    set columnWidth(value) { this._columnWidth.set(value); }
+    get columnWidth() { return this._columnWidth(); }
     /**
      * Sets the spacing between layout items in pixels.
      * Use an object with `rows` and `columns` properties to set different horizontal and vertical spacing.
@@ -10634,27 +11252,33 @@ class TileLayoutComponent {
      * @default { rows: 16, columns: 16 }
      */
     set gap(value) {
-        this._gap = (typeof value === 'number') ? { rows: value, columns: value } : Object.assign(this._gap, value);
+        const newGap = (typeof value === 'number')
+            ? { rows: value, columns: value }
+            : Object.assign({}, this._gap(), value);
+        this._gap.set(newGap);
     }
     get gap() {
-        return this._gap;
+        return this._gap();
     }
     /**
      * Enables or disables item reordering ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/tilelayout/reordering)).
      * @default false
      */
-    reorderable = false;
+    set reorderable(value) { this._reorderable.set(value); }
+    get reorderable() { return this._reorderable(); }
     /**
      * Enables or disables item resizing ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/tilelayout/resizing)).
      * @default false
      */
-    resizable = false;
+    set resizable(value) { this._resizable.set(value); }
+    get resizable() { return this._resizable(); }
     /**
      * Sets the height of the rows.
      * Use numeric values for pixels or string values for other CSS units ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/tilelayout/tiles-configuration#size-and-position)).
      * @default '1fr'
      */
-    rowHeight = '1fr';
+    set rowHeight(value) { this._rowHeight.set(value); }
+    get rowHeight() { return this._rowHeight(); }
     /**
      *
      * Controls how the auto-placement algorithm works, specifying exactly how auto-placed items are flowed in the TileLayout ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/tilelayout/auto-flow)).
@@ -10662,7 +11286,8 @@ class TileLayoutComponent {
      * For further reference, check the [grid-auto-flow CSS article](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow).
      * @default 'column'
      */
-    autoFlow = 'column';
+    set autoFlow(value) { this._autoFlow.set(value); }
+    get autoFlow() { return this._autoFlow(); }
     /**
      * Enables or disables [keyboard navigation](https://www.telerik.com/kendo-angular-ui/components/layout/tilelayout/keyboard-navigation).
      * @default true
@@ -10670,7 +11295,8 @@ class TileLayoutComponent {
      * @remarks
      * This property is related to accessibility.
      */
-    navigable = true;
+    set navigable(value) { this._navigable.set(value); }
+    get navigable() { return this._navigable(); }
     /**
      * Fires when item reordering is completed ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/tilelayout/reordering)).
      * You can prevent this event to cancel the reorder operation.
@@ -10686,7 +11312,9 @@ class TileLayoutComponent {
     get gapStyle() {
         return `${this.gap.rows}px ${this.gap.columns}px`;
     }
-    direction;
+    get direction() {
+        return this._direction();
+    }
     get currentColStart() {
         return this.draggingService.colStart;
     }
@@ -10715,10 +11343,15 @@ class TileLayoutComponent {
     licenseMessage;
     draggable;
     subs = new Subscription();
-    _gap = {
-        rows: 16,
-        columns: 16
-    };
+    _columns = signal(1, ...(ngDevMode ? [{ debugName: "_columns" }] : []));
+    _columnWidth = signal('1fr', ...(ngDevMode ? [{ debugName: "_columnWidth" }] : []));
+    _gap = signal({ rows: 16, columns: 16 }, ...(ngDevMode ? [{ debugName: "_gap" }] : []));
+    _reorderable = signal(false, ...(ngDevMode ? [{ debugName: "_reorderable" }] : []));
+    _resizable = signal(false, ...(ngDevMode ? [{ debugName: "_resizable" }] : []));
+    _rowHeight = signal('1fr', ...(ngDevMode ? [{ debugName: "_rowHeight" }] : []));
+    _autoFlow = signal('column', ...(ngDevMode ? [{ debugName: "_autoFlow" }] : []));
+    _navigable = signal(true, ...(ngDevMode ? [{ debugName: "_navigable" }] : []));
+    _direction = signal(undefined, ...(ngDevMode ? [{ debugName: "_direction" }] : []));
     constructor(zone, elem, renderer, localization, draggingService, navigationService) {
         this.zone = zone;
         this.elem = elem;
@@ -10734,7 +11367,7 @@ class TileLayoutComponent {
         this.applyColStyling();
         this.applyRowStyling();
         this.draggingService.reorderable.next(this.reorderable);
-        this.draggingService.resizable.next(this.resizable);
+        this.draggingService.resizable.set(this.resizable);
         this.navigationService.owner = this;
         this.navigationService.navigable.next(this.navigable);
         if (hasObservers(this.reorder)) {
@@ -10748,13 +11381,11 @@ class TileLayoutComponent {
                 this.initializeDraggable();
             }
         }));
-        this.subs.add(this.draggingService.resizable.subscribe(resizable => {
-            if (resizable && !this.draggable) {
-                this.initializeDraggable();
-            }
-        }));
+        if (this.resizable && !this.draggable) {
+            this.initializeDraggable();
+        }
         this.subs.add(this.localization.changes.subscribe(({ rtl }) => {
-            this.direction = rtl ? 'rtl' : 'ltr';
+            this._direction.set(rtl ? 'rtl' : 'ltr');
         }));
     }
     ngAfterViewInit() {
@@ -10782,7 +11413,11 @@ class TileLayoutComponent {
             this.draggingService.reorderable.next(changes['reorderable'].currentValue);
         }
         if (isChanged('resizable', changes)) {
-            this.draggingService.resizable.next(changes['resizable'].currentValue);
+            const newResizable = changes['resizable'].currentValue;
+            this.draggingService.resizable.set(newResizable);
+            if (newResizable && !this.draggable) {
+                this.initializeDraggable();
+            }
         }
         if (changes['gap'] || changes['autoFlow'] || changes['columns']) {
             this.draggingService.tileLayoutSettings = this.draggingServiceConfig();
@@ -10886,12 +11521,13 @@ class TileLayoutComponent {
         @if (showLicenseWatermark) {
           <div kendoWatermarkOverlay [licenseMessage]="licenseMessage"></div>
         }
-        `, isInline: true, dependencies: [{ kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay], kendo-watermark-overlay", inputs: ["licenseMessage"] }] });
+        `, isInline: true, dependencies: [{ kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay], kendo-watermark-overlay", inputs: ["licenseMessage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: TileLayoutComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-tilelayout',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     providers: [
                         LocalizationService,
                         TileLayoutDraggingService,
@@ -10980,12 +11616,13 @@ class TileLayoutItemBodyComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: TileLayoutItemBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", type: TileLayoutItemBodyComponent, isStandalone: true, selector: "kendo-tilelayout-item-body", host: { properties: { "class.k-tilelayout-item-body": "this.hostClass", "class.k-card-body": "this.hostClass", "style.min-height": "this.minHeight" } }, ngImport: i0, template: `
         <ng-content></ng-content>
-    `, isInline: true });
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: TileLayoutItemBodyComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-tilelayout-item-body',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
         <ng-content></ng-content>
     `,
@@ -11134,7 +11771,12 @@ class GridLayoutComponent {
      * You can define rows by passing an array where the number of elements determines the number of rows or each element defines the size of the corresponding row.
      * For example, you can use CSS units like `px`, `%`, `fr`, or `auto` to define the row sizes.
      */
-    rows;
+    set rows(value) {
+        this._rows.set(value);
+    }
+    get rows() {
+        return this._rows();
+    }
     /**
      * Specifies the number of columns and their widths
      * ([More details](https://www.telerik.com/kendo-angular-ui/components/layout/gridlayout/layout#rows-and-columns)).
@@ -11142,28 +11784,41 @@ class GridLayoutComponent {
      * You can define columns by passing an array where the number of elements determines the number of columns or each element defines the size of the corresponding column.
      * For example, you can use CSS units like `px`, `%`, `fr`, or `auto` to define the column sizes.
      */
-    cols;
+    set cols(value) {
+        this._cols.set(value);
+    }
+    get cols() {
+        return this._cols();
+    }
     /**
      * Specifies the gaps between the elements ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/gridlayout/layout#gap)).
      *
      * @default 0
      */
-    gap = 0;
+    set gap(value) {
+        this._gap.set(value);
+    }
+    get gap() {
+        return this._gap();
+    }
     /**
      * Specifies the horizontal and vertical alignment of the inner GridLayout elements
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/gridlayout/layout#alignment)).
      */
     set align(align) {
-        this._align = Object.assign({}, this._align, align);
+        this._align.set(Object.assign({}, this._align(), align));
         this.handleAlignClasses();
     }
     get align() {
-        return this._align;
+        return this._align();
     }
-    _align = {
+    _align = signal({
         horizontal: 'stretch',
         vertical: 'stretch'
-    };
+    }, ...(ngDevMode ? [{ debugName: "_align" }] : []));
+    _rows = signal(undefined, ...(ngDevMode ? [{ debugName: "_rows" }] : []));
+    _cols = signal(undefined, ...(ngDevMode ? [{ debugName: "_cols" }] : []));
+    _gap = signal(0, ...(ngDevMode ? [{ debugName: "_gap" }] : []));
     justifyClass;
     alignClass;
     constructor(renderer, element, localization) {
@@ -11232,7 +11887,7 @@ class GridLayoutComponent {
             }
         ], exportAs: ["kendoGridLayout"], usesOnChanges: true, ngImport: i0, template: `
         <ng-content></ng-content>
-    `, isInline: true });
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: GridLayoutComponent, decorators: [{
             type: Component,
@@ -11249,7 +11904,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
                     template: `
         <ng-content></ng-content>
     `,
-                    standalone: true
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i1.LocalizationService }], propDecorators: { hostClass: [{
                 type: HostBinding,
@@ -11284,24 +11940,48 @@ class GridLayoutItemComponent {
      * Sets the row of the item in the GridLayout
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/gridlayout/items#size-and-position)).
      */
-    row;
+    set row(value) {
+        this._row.set(value);
+    }
+    get row() {
+        return this._row();
+    }
     /**
      * Sets the column of the item in the GridLayout
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/gridlayout/items#size-and-position)).
      */
-    col;
+    set col(value) {
+        this._col.set(value);
+    }
+    get col() {
+        return this._col();
+    }
     /**
      * Specifies how many rows the item spans ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/gridlayout/items#size-and-position)).
      *
      * @default 1
      */
-    rowSpan;
+    set rowSpan(value) {
+        this._rowSpan.set(value);
+    }
+    get rowSpan() {
+        return this._rowSpan();
+    }
     /**
      * Specifies how many columns the item spans ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/gridlayout/items#size-and-position)).
      *
      * @default 1
      */
-    colSpan;
+    set colSpan(value) {
+        this._colSpan.set(value);
+    }
+    get colSpan() {
+        return this._colSpan();
+    }
+    _row = signal(undefined, ...(ngDevMode ? [{ debugName: "_row" }] : []));
+    _col = signal(undefined, ...(ngDevMode ? [{ debugName: "_col" }] : []));
+    _rowSpan = signal(undefined, ...(ngDevMode ? [{ debugName: "_rowSpan" }] : []));
+    _colSpan = signal(undefined, ...(ngDevMode ? [{ debugName: "_colSpan" }] : []));
     constructor(renderer, element) {
         this.renderer = renderer;
         this.element = element;
@@ -11323,7 +12003,7 @@ class GridLayoutItemComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: GridLayoutItemComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", type: GridLayoutItemComponent, isStandalone: true, selector: "kendo-gridlayout-item", inputs: { row: "row", col: "col", rowSpan: "rowSpan", colSpan: "colSpan" }, usesOnChanges: true, ngImport: i0, template: `
         <ng-content></ng-content>
-    `, isInline: true });
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: GridLayoutItemComponent, decorators: [{
             type: Component,
@@ -11332,7 +12012,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
                     template: `
         <ng-content></ng-content>
     `,
-                    standalone: true
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { row: [{
                 type: Input
@@ -11376,29 +12057,41 @@ class StackLayoutComponent {
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/stacklayout/layout#alignment)).
      */
     set align(align) {
-        this._align = Object.assign({}, this._align, align);
+        this._align.set(Object.assign({}, this._align(), align));
         this.handleAlignClasses();
     }
     get align() {
-        return this._align;
+        return this._align();
     }
     /**
      * Specifies the gap between the inner StackLayout elements ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/stacklayout/layout#gap)).
      *
      * @default 0
      */
-    gap = 0;
+    set gap(value) {
+        this._gap.set(value);
+    }
+    get gap() {
+        return this._gap();
+    }
     /**
      * Specifies the orientation of the StackLayout
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/stacklayout/layout#orientation)).
      *
      * @default 'horizontal'
      */
-    orientation = 'horizontal';
-    _align = {
+    set orientation(value) {
+        this._orientation.set(value);
+    }
+    get orientation() {
+        return this._orientation();
+    }
+    _align = signal({
         horizontal: 'stretch',
         vertical: 'stretch'
-    };
+    }, ...(ngDevMode ? [{ debugName: "_align" }] : []));
+    _gap = signal(0, ...(ngDevMode ? [{ debugName: "_gap" }] : []));
+    _orientation = signal('horizontal', ...(ngDevMode ? [{ debugName: "_orientation" }] : []));
     justifyClass;
     alignClass;
     constructor(renderer, element, localization) {
@@ -11454,7 +12147,7 @@ class StackLayoutComponent {
             }
         ], exportAs: ["kendoStackLayout"], usesOnChanges: true, ngImport: i0, template: `
         <ng-content></ng-content>
-    `, isInline: true });
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: StackLayoutComponent, decorators: [{
             type: Component,
@@ -11471,7 +12164,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
                     template: `
         <ng-content></ng-content>
     `,
-                    standalone: true
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i1.LocalizationService }], propDecorators: { hostClass: [{
                 type: HostBinding,
@@ -11500,11 +12194,23 @@ class TimelineMessages extends ComponentMessages {
     /**
      * The title of the previous button in horizontal orientation.
      */
-    previous;
+    set previous(value) {
+        this._previous.set(value);
+    }
+    get previous() {
+        return this._previous();
+    }
     /**
      * The title of the next button in horizontal orientation.
      */
-    next;
+    set next(value) {
+        this._next.set(value);
+    }
+    get next() {
+        return this._next();
+    }
+    _previous = signal(undefined, ...(ngDevMode ? [{ debugName: "_previous" }] : []));
+    _next = signal(undefined, ...(ngDevMode ? [{ debugName: "_next" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: TimelineMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: TimelineMessages, isStandalone: true, selector: "kendo-timeline-messages-base", inputs: { previous: "previous", next: "next" }, usesInheritance: true, ngImport: i0 });
 }
@@ -11730,20 +12436,34 @@ class TimelineCardComponent {
     element;
     timelineService;
     renderer;
-    event;
-    expanded = false;
-    collapsible = true;
-    reversed = false;
-    orientation;
-    navigable;
-    tabIndex;
-    animationDuration;
-    index;
-    eventWidth;
-    eventHeight;
-    headerTemplate;
-    bodyTemplate;
-    actionsTemplate;
+    set event(v) { this._event.set(v); }
+    get event() { return this._event(); }
+    set expanded(v) { this._expanded.set(v); }
+    get expanded() { return this._expanded(); }
+    set collapsible(v) { this._collapsible.set(v); }
+    get collapsible() { return this._collapsible(); }
+    set reversed(v) { this._reversed.set(v); }
+    get reversed() { return this._reversed(); }
+    set orientation(v) { this._orientation.set(v); }
+    get orientation() { return this._orientation(); }
+    set navigable(v) { this._navigable.set(v); }
+    get navigable() { return this._navigable(); }
+    set tabIndex(v) { this._tabIndex.set(v); }
+    get tabIndex() { return this._tabIndex(); }
+    set animationDuration(v) { this._animationDuration.set(v); }
+    get animationDuration() { return this._animationDuration(); }
+    set index(v) { this._index.set(v); }
+    get index() { return this._index(); }
+    set eventWidth(v) { this._eventWidth.set(v); }
+    get eventWidth() { return this._eventWidth(); }
+    set eventHeight(v) { this._eventHeight.set(v); }
+    get eventHeight() { return this._eventHeight(); }
+    set headerTemplate(v) { this._headerTemplate.set(v); }
+    get headerTemplate() { return this._headerTemplate(); }
+    set bodyTemplate(v) { this._bodyTemplate.set(v); }
+    get bodyTemplate() { return this._bodyTemplate(); }
+    set actionsTemplate(v) { this._actionsTemplate.set(v); }
+    get actionsTemplate() { return this._actionsTemplate(); }
     set calloutStyle(value) {
         // applies only to horizontal orientation where the callout points upwards
         if (!this.calloutElementRef || !this.calloutElementRef.nativeElement.classList.contains('k-callout-n')) {
@@ -11784,7 +12504,21 @@ class TimelineCardComponent {
     }
     calloutSvgIcon = chevronRightIcon;
     calloutFontIcon = 'chevron-right';
-    animationState = this.expanded ? 'expanded' : 'collapsed';
+    _event = signal(undefined, ...(ngDevMode ? [{ debugName: "_event" }] : []));
+    _expanded = signal(false, ...(ngDevMode ? [{ debugName: "_expanded" }] : []));
+    _collapsible = signal(true, ...(ngDevMode ? [{ debugName: "_collapsible" }] : []));
+    _reversed = signal(false, ...(ngDevMode ? [{ debugName: "_reversed" }] : []));
+    _orientation = signal(undefined, ...(ngDevMode ? [{ debugName: "_orientation" }] : []));
+    _navigable = signal(undefined, ...(ngDevMode ? [{ debugName: "_navigable" }] : []));
+    _tabIndex = signal(undefined, ...(ngDevMode ? [{ debugName: "_tabIndex" }] : []));
+    _animationDuration = signal(undefined, ...(ngDevMode ? [{ debugName: "_animationDuration" }] : []));
+    _index = signal(undefined, ...(ngDevMode ? [{ debugName: "_index" }] : []));
+    _eventWidth = signal(undefined, ...(ngDevMode ? [{ debugName: "_eventWidth" }] : []));
+    _eventHeight = signal(undefined, ...(ngDevMode ? [{ debugName: "_eventHeight" }] : []));
+    _headerTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_headerTemplate" }] : []));
+    _bodyTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_bodyTemplate" }] : []));
+    _actionsTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_actionsTemplate" }] : []));
+    animationState = 'collapsed';
     animationInProgress = false;
     constructor(element, timelineService, renderer) {
         this.element = element;
@@ -11797,19 +12531,19 @@ class TimelineCardComponent {
     ngOnChanges(changes) {
         if (isChanged('collapsible', changes, false)) {
             if (!this.collapsible) {
-                this.expanded = true;
+                this._expanded.set(true);
             }
         }
     }
     toggle() {
         if (this.orientation === 'vertical') {
-            this.expanded = this.collapsible ? !this.expanded : true;
+            this._expanded.set(this.collapsible ? !this.expanded : true);
             this.timelineService.onToggle(this.index);
         }
     }
     expand() {
         if (!this.expanded) {
-            this.expanded = true;
+            this._expanded.set(true);
             this.timelineService.onToggle(this.index);
         }
     }
@@ -11817,7 +12551,7 @@ class TimelineCardComponent {
         if (!this.collapsible || !this.expanded) {
             return;
         }
-        this.expanded = false;
+        this._expanded.set(false);
         this.timelineService.onToggle(this.index);
     }
     onActionClick(event) {
@@ -11854,7 +12588,6 @@ class TimelineCardComponent {
           class="k-card-with-callout k-card-vertical"
           (click)="toggle()"
           [attr.role]="role"
-          [attr.aria-label]="ariaCardLabel"
           [attr.aria-live]="ariaLive"
           [attr.aria-expanded]="ariaExpanded"
           [attr.tabindex]="tabIndex"
@@ -11972,7 +12705,7 @@ class TimelineCardComponent {
                     animate('{{animationDuration}}ms')
                 ], { params: { animationDuration: '400' } }),
             ])
-        ] });
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: TimelineCardComponent, decorators: [{
             type: Component,
@@ -11995,8 +12728,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
                         ])
                     ],
                     providers: [],
-                    exportAs: 'kendoTimelineCard',
                     selector: 'kendo-timeline-card',
+                    exportAs: 'kendoTimelineCard',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
         <kendo-card
           [ngStyle]="{ 'height': orientation === 'horizontal' ? eventHeight + 'px' : null }"
@@ -12004,7 +12738,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
           class="k-card-with-callout k-card-vertical"
           (click)="toggle()"
           [attr.role]="role"
-          [attr.aria-label]="ariaCardLabel"
           [attr.aria-live]="ariaLive"
           [attr.aria-expanded]="ariaExpanded"
           [attr.tabindex]="tabIndex"
@@ -12166,58 +12899,112 @@ class TimelineHorizontalComponent {
     renderer;
     timelineService;
     localization;
-    events = [];
-    alterMode;
-    collapsibleEvents;
-    navigable;
-    showDateLabels;
-    animationDuration;
-    eventHeight;
-    dateFormat;
-    headerTemplate;
-    bodyTemplate;
-    actionsTemplate;
+    set events(v) { this._events.set(v); }
+    get events() { return this._events(); }
+    set alterMode(v) { this._alterMode.set(v); }
+    get alterMode() { return this._alterMode(); }
+    set collapsibleEvents(v) { this._collapsibleEvents.set(v); }
+    get collapsibleEvents() { return this._collapsibleEvents(); }
+    set navigable(v) { this._navigable.set(v); }
+    get navigable() { return this._navigable(); }
+    set showDateLabels(v) { this._showDateLabels.set(v); }
+    get showDateLabels() { return this._showDateLabels(); }
+    set animationDuration(v) { this._animationDuration.set(v); }
+    get animationDuration() { return this._animationDuration(); }
+    set eventHeight(v) { this._eventHeight.set(v); }
+    get eventHeight() { return this._eventHeight(); }
+    set dateFormat(v) { this._dateFormat.set(v); }
+    get dateFormat() { return this._dateFormat(); }
+    set headerTemplate(v) { this._headerTemplate.set(v); }
+    get headerTemplate() { return this._headerTemplate(); }
+    set bodyTemplate(v) { this._bodyTemplate.set(v); }
+    get bodyTemplate() { return this._bodyTemplate(); }
+    set actionsTemplate(v) { this._actionsTemplate.set(v); }
+    get actionsTemplate() { return this._actionsTemplate(); }
     cardElementRefs;
     circleElementRefs;
     flagElementRefs;
     trackElementRef;
     scrollableTrackElementRef;
     cardComponents;
-    get selectedEvent() {
-        return this._selectedEvent;
-    }
+    get selectedEvent() { return this._selectedEvent(); }
     set selectedEvent(value) {
-        if (this._selectedEvent === value) {
+        if (this._selectedEvent() === value) {
             return;
         }
         const newSelectedIndex = this.events.findIndex(event => event === value);
         if (newSelectedIndex === -1 && value !== null) {
             return;
         }
-        this._selectedEvent = value;
-        this.selectedEventIndex = newSelectedIndex;
-        this.calloutStyle = this.calloutOffset;
-    }
-    trackWrapWidth;
-    scrollableTrackWidth;
-    cardWidth;
+        this._selectedEvent.set(value);
+        this._selectedEventIndex.set(newSelectedIndex);
+        this._calloutStyle.set(this.calloutOffset);
+    }
+    get trackWrapWidth() { return this._trackWrapWidth; }
+    set trackWrapWidth(v) { this._trackWrapWidth = v; }
+    get scrollableTrackWidth() { return this._scrollableTrackWidth; }
+    set scrollableTrackWidth(v) { this._scrollableTrackWidth = v; }
+    get cardWidth() { return this._cardWidth; }
+    set cardWidth(v) { this._cardWidth = v; }
+    get calloutStyle() { return this._calloutStyle(); }
+    set calloutStyle(v) { this._calloutStyle.set(v); }
+    get animationState() { return this._animationState(); }
+    set animationState(v) { this._animationState.set(v); }
+    get translateValue() { return this._translateValue(); }
+    set translateValue(v) { this._translateValue.set(v); }
+    get eventsInInterval() { return this._eventsInInterval(); }
+    set eventsInInterval(v) { this._eventsInInterval.set(v); }
+    get selectedCardIndex() { return this._selectedCardIndex(); }
+    set selectedCardIndex(v) { this._selectedCardIndex.set(v); }
+    get selectedEventIndex() { return this._selectedEventIndex(); }
+    set selectedEventIndex(v) { this._selectedEventIndex.set(v); }
+    get tabFlex() { return this._tabFlex(); }
+    set tabFlex(v) { this._tabFlex.set(v); }
+    get tabWidth() { return this._tabWidth; }
+    set tabWidth(v) { this._tabWidth = v; }
+    get visibleTabsCount() { return this._visibleTabsCount(); }
+    set visibleTabsCount(v) { this._visibleTabsCount.set(v); }
+    get firstCircleInView() { return this._firstCircleInView(); }
+    set firstCircleInView(v) { this._firstCircleInView.set(v); }
+    get visibleEvents() { return this._visibleEvents; }
+    set visibleEvents(v) { this._visibleEvents = v; }
+    get trackItems() { return this._trackItems(); }
+    set trackItems(v) { this._trackItems.set(v); }
+    get previousTitle() { return this._previousTitle(); }
+    set previousTitle(v) { this._previousTitle.set(v); }
+    get nextTitle() { return this._nextTitle(); }
+    set nextTitle(v) { this._nextTitle.set(v); }
     svgLeftIcon = chevronLeftIcon;
     svgRightIcon = chevronRightIcon;
-    calloutStyle;
-    animationState = 'center';
-    translateValue = 0;
-    eventsInInterval = [0, 1, 2];
-    selectedCardIndex = 0;
-    selectedEventIndex;
-    tabFlex;
-    tabWidth = DEFAULT_TAB_WIDTH;
-    visibleTabsCount;
-    firstCircleInView = 0;
-    visibleEvents = [];
-    trackItems = [];
-    previousTitle = 'previous';
-    nextTitle = 'next';
-    _selectedEvent;
+    _selectedEvent = signal(null, ...(ngDevMode ? [{ debugName: "_selectedEvent" }] : []));
+    _calloutStyle = signal({}, ...(ngDevMode ? [{ debugName: "_calloutStyle" }] : []));
+    _animationState = signal('center', ...(ngDevMode ? [{ debugName: "_animationState" }] : []));
+    _translateValue = signal(0, ...(ngDevMode ? [{ debugName: "_translateValue" }] : []));
+    _eventsInInterval = signal([0, 1, 2], ...(ngDevMode ? [{ debugName: "_eventsInInterval" }] : []));
+    _selectedCardIndex = signal(0, ...(ngDevMode ? [{ debugName: "_selectedCardIndex" }] : []));
+    _selectedEventIndex = signal(undefined, ...(ngDevMode ? [{ debugName: "_selectedEventIndex" }] : []));
+    _tabFlex = signal(undefined, ...(ngDevMode ? [{ debugName: "_tabFlex" }] : []));
+    _visibleTabsCount = signal(undefined, ...(ngDevMode ? [{ debugName: "_visibleTabsCount" }] : []));
+    _firstCircleInView = signal(0, ...(ngDevMode ? [{ debugName: "_firstCircleInView" }] : []));
+    _trackItems = signal([], ...(ngDevMode ? [{ debugName: "_trackItems" }] : []));
+    _previousTitle = signal('previous', ...(ngDevMode ? [{ debugName: "_previousTitle" }] : []));
+    _nextTitle = signal('next', ...(ngDevMode ? [{ debugName: "_nextTitle" }] : []));
+    _events = signal([], ...(ngDevMode ? [{ debugName: "_events" }] : []));
+    _alterMode = signal(undefined, ...(ngDevMode ? [{ debugName: "_alterMode" }] : []));
+    _collapsibleEvents = signal(undefined, ...(ngDevMode ? [{ debugName: "_collapsibleEvents" }] : []));
+    _navigable = signal(undefined, ...(ngDevMode ? [{ debugName: "_navigable" }] : []));
+    _showDateLabels = signal(undefined, ...(ngDevMode ? [{ debugName: "_showDateLabels" }] : []));
+    _animationDuration = signal(undefined, ...(ngDevMode ? [{ debugName: "_animationDuration" }] : []));
+    _eventHeight = signal(undefined, ...(ngDevMode ? [{ debugName: "_eventHeight" }] : []));
+    _dateFormat = signal(undefined, ...(ngDevMode ? [{ debugName: "_dateFormat" }] : []));
+    _headerTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_headerTemplate" }] : []));
+    _bodyTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_bodyTemplate" }] : []));
+    _actionsTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_actionsTemplate" }] : []));
+    _trackWrapWidth;
+    _scrollableTrackWidth;
+    _cardWidth;
+    _tabWidth = DEFAULT_TAB_WIDTH;
+    _visibleEvents = [];
     subscriptions = new Subscription();
     constructor(cdr, _zone, renderer, timelineService, localization) {
         this.cdr = cdr;
@@ -12546,7 +13333,6 @@ class TimelineHorizontalComponent {
             this.selectedCardIndex = this.getOtherSelectedCardIndex(direction);
             this.focusTrackItem(this.selectedEventIndex);
             this.animateCards();
-            this.cdr.markForCheck();
         }
     }
     navigateToInterval(start, selectedIndex = 0, selectFirst = false, selectLast = false) {
@@ -12567,10 +13353,9 @@ class TimelineHorizontalComponent {
             this.selectedEvent = this.events[selectedIndex];
         }
         this.selectedCardIndex = this.getOtherSelectedCardIndex(forward);
-        this.cdr.detectChanges();
         this.focusTrackItem(this.selectedEventIndex);
         this.animateCards();
-        this.calloutStyle = this.calloutOffset;
+        this._calloutStyle.set(this.calloutOffset);
         this.cdr.markForCheck();
     }
     animateCards() {
@@ -12591,7 +13376,7 @@ class TimelineHorizontalComponent {
             this.tabFlex = 100 / this.visibleTabsCount;
             this.circleElementRefs.forEach(item => this.renderer.setStyle(item.nativeElement, 'flex', `1 0 ${this.tabFlex}%`));
             this.flagElementRefs.forEach(item => this.renderer.setStyle(item.nativeElement, 'flex', `1 0 ${this.tabFlex}%`));
-            this.cdr.detectChanges();
+            this.cdr.markForCheck();
             this.visibleEvents = this.trackItems
                 .slice(this.firstCircleInView, this.firstCircleInView + this.visibleTabsCount)
                 .filter(event => !event.isFlag);
@@ -12603,12 +13388,11 @@ class TimelineHorizontalComponent {
     }
     l10nChange() {
         if (this.localization.get('previous')) {
-            this.previousTitle = this.localization.get('previous');
+            this._previousTitle.set(this.localization.get('previous'));
         }
         if (this.localization.get('next')) {
-            this.nextTitle = this.localization.get('next');
+            this._nextTitle.set(this.localization.get('next'));
         }
-        this.cdr.markForCheck();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: TimelineHorizontalComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: TimelineService }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: TimelineHorizontalComponent, isStandalone: true, selector: "kendo-timeline-horizontal", inputs: { events: "events", alterMode: "alterMode", collapsibleEvents: "collapsibleEvents", navigable: "navigable", showDateLabels: "showDateLabels", animationDuration: "animationDuration", eventHeight: "eventHeight", dateFormat: "dateFormat", headerTemplate: "headerTemplate", bodyTemplate: "bodyTemplate", actionsTemplate: "actionsTemplate" }, providers: [], viewQueries: [{ propertyName: "trackElementRef", first: true, predicate: ["track"], descendants: true }, { propertyName: "scrollableTrackElementRef", first: true, predicate: ["scrollableTrack"], descendants: true }, { propertyName: "cardElementRefs", predicate: ["card"], descendants: true, read: ElementRef }, { propertyName: "circleElementRefs", predicate: ["trackCircle"], descendants: true }, { propertyName: "flagElementRefs", predicate: ["trackFlag"], descendants: true }, { propertyName: "cardComponents", predicate: TimelineCardComponent, descendants: true }], exportAs: ["kendoTimelineHorizontal"], usesOnChanges: true, ngImport: i0, template: `
@@ -12738,11 +13522,15 @@ class TimelineHorizontalComponent {
                     animate('{{animationDuration}}ms', style({ transform: `translateX(100%)` }))
                 ], { params: { animationDuration: '400' } })
             ])
-        ] });
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: TimelineHorizontalComponent, decorators: [{
             type: Component,
             args: [{
+                    providers: [],
+                    selector: 'kendo-timeline-horizontal',
+                    exportAs: 'kendoTimelineHorizontal',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     animations: [
                         trigger('trackSlide', [
                             state('left', style({
@@ -12764,9 +13552,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
                             ], { params: { animationDuration: '400' } })
                         ])
                     ],
-                    providers: [],
-                    exportAs: 'kendoTimelineHorizontal',
-                    selector: 'kendo-timeline-horizontal',
                     template: `
         <div class="k-timeline-track-wrap" #track>
           <button
@@ -12925,21 +13710,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
  */
 class TimelineVerticalComponent {
     renderer;
-    events = [];
-    alterMode;
-    collapsibleEvents;
-    navigable;
-    showDateLabels;
-    animationDuration;
-    eventWidth;
-    dateFormat;
-    headerTemplate;
-    bodyTemplate;
-    actionsTemplate;
+    set events(v) { this._events.set(v); }
+    get events() { return this._events(); }
+    set alterMode(v) { this._alterMode.set(v); }
+    get alterMode() { return this._alterMode(); }
+    set collapsibleEvents(v) { this._collapsibleEvents.set(v); }
+    get collapsibleEvents() { return this._collapsibleEvents(); }
+    set navigable(v) { this._navigable.set(v); }
+    get navigable() { return this._navigable(); }
+    set showDateLabels(v) { this._showDateLabels.set(v); }
+    get showDateLabels() { return this._showDateLabels(); }
+    set animationDuration(v) { this._animationDuration.set(v); }
+    get animationDuration() { return this._animationDuration(); }
+    set eventWidth(v) { this._eventWidth.set(v); }
+    get eventWidth() { return this._eventWidth(); }
+    set dateFormat(v) { this._dateFormat.set(v); }
+    get dateFormat() { return this._dateFormat(); }
+    set headerTemplate(v) { this._headerTemplate.set(v); }
+    get headerTemplate() { return this._headerTemplate(); }
+    set bodyTemplate(v) { this._bodyTemplate.set(v); }
+    get bodyTemplate() { return this._bodyTemplate(); }
+    set actionsTemplate(v) { this._actionsTemplate.set(v); }
+    get actionsTemplate() { return this._actionsTemplate(); }
     cards;
     dateElementRefs;
     innerDateElementRefs;
     subscriptions = new Subscription();
+    _events = signal([], ...(ngDevMode ? [{ debugName: "_events" }] : []));
+    _alterMode = signal(undefined, ...(ngDevMode ? [{ debugName: "_alterMode" }] : []));
+    _collapsibleEvents = signal(undefined, ...(ngDevMode ? [{ debugName: "_collapsibleEvents" }] : []));
+    _navigable = signal(undefined, ...(ngDevMode ? [{ debugName: "_navigable" }] : []));
+    _showDateLabels = signal(undefined, ...(ngDevMode ? [{ debugName: "_showDateLabels" }] : []));
+    _animationDuration = signal(undefined, ...(ngDevMode ? [{ debugName: "_animationDuration" }] : []));
+    _eventWidth = signal(undefined, ...(ngDevMode ? [{ debugName: "_eventWidth" }] : []));
+    _dateFormat = signal(undefined, ...(ngDevMode ? [{ debugName: "_dateFormat" }] : []));
+    _headerTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_headerTemplate" }] : []));
+    _bodyTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_bodyTemplate" }] : []));
+    _actionsTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_actionsTemplate" }] : []));
     constructor(renderer) {
         this.renderer = renderer;
     }
@@ -12958,7 +13765,7 @@ class TimelineVerticalComponent {
         if (index < 0 || index >= this.cards.length) {
             return;
         }
-        this.cards.get(index).expand();
+        this.cards.get(index)?.expand();
     }
     collapse(index) {
         if (index < 0 || index >= this.cards.length) {
@@ -13026,14 +13833,15 @@ class TimelineVerticalComponent {
             }
           </ul>
         }
-        `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: TimelineCardComponent, selector: "kendo-timeline-card", inputs: ["event", "expanded", "collapsible", "reversed", "orientation", "navigable", "tabIndex", "animationDuration", "index", "eventWidth", "eventHeight", "headerTemplate", "bodyTemplate", "actionsTemplate", "calloutStyle"], exportAs: ["kendoTimelineCard"] }, { kind: "pipe", type: DatePipe, name: "kendoDate" }] });
+        `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: TimelineCardComponent, selector: "kendo-timeline-card", inputs: ["event", "expanded", "collapsible", "reversed", "orientation", "navigable", "tabIndex", "animationDuration", "index", "eventWidth", "eventHeight", "headerTemplate", "bodyTemplate", "actionsTemplate", "calloutStyle"], exportAs: ["kendoTimelineCard"] }, { kind: "pipe", type: DatePipe, name: "kendoDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: TimelineVerticalComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [],
-                    exportAs: 'kendoTimelineVertical',
                     selector: 'kendo-timeline-vertical',
+                    exportAs: 'kendoTimelineVertical',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
         @if (events && events.length > 0) {
           <ul>
@@ -13162,11 +13970,11 @@ class TimelineComponent {
             return;
         }
         this.originalData = events;
-        this._events = processItems(this.originalData, this.modelFields);
+        this._events.set(processItems(this.originalData, this.modelFields));
         this.updateEvents();
     }
     get events() {
-        return this._events;
+        return this._events();
     }
     /**
      * The names of the model fields from which the Timeline will read its data.
@@ -13174,7 +13982,8 @@ class TimelineComponent {
     set modelFields(value) {
         this._modelFields = { ...defaultModelFields, ...value };
         if (this.originalData) {
-            this.events = this.originalData;
+            this._events.set(processItems(this.originalData, this._modelFields));
+            this.updateEvents();
         }
     }
     get modelFields() {
@@ -13185,20 +13994,35 @@ class TimelineComponent {
      *
      * @default 'vertical'
      */
-    orientation = 'vertical';
+    set orientation(value) {
+        this._orientation.set(value);
+    }
+    get orientation() {
+        return this._orientation();
+    }
     /**
      * Specifies whether to render events alternatingly on both sides of the axis.
      * Applicable when `orientation` is set to `vertical`.
      *
      * @default false
      */
-    alterMode = false;
+    set alterMode(value) {
+        this._alterMode.set(value);
+    }
+    get alterMode() {
+        return this._alterMode();
+    }
     /**
      * Specifies whether the event cards can be collapsed.
      *
      * @default true
      */
-    collapsibleEvents = true;
+    set collapsibleEvents(value) {
+        this._collapsibleEvents.set(value);
+    }
+    get collapsibleEvents() {
+        return this._collapsibleEvents();
+    }
     /**
      * Specifies whether the user can use dedicated shortcuts to interact with the Timeline.
      *
@@ -13207,20 +14031,35 @@ class TimelineComponent {
      * @remarks
      * This property is related to accessibility.
      */
-    navigable = true;
+    set navigable(value) {
+        this._navigable.set(value);
+    }
+    get navigable() {
+        return this._navigable();
+    }
     /**
      * Specifies whether an event's date label will be visible.
      *
      * @default true
      */
-    showDateLabels = true;
+    set showDateLabels(value) {
+        this._showDateLabels.set(value);
+    }
+    get showDateLabels() {
+        return this._showDateLabels();
+    }
     /**
      * Specifies the time for sliding to the next event in `horizontal` mode and the time for collapsing the event in `vertical` mode.
      * The default animation duration values are `300ms` for `horizontal` mode and `400ms` for `vertical` mode.
      *
      * @default true
      */
-    animation;
+    set animation(value) {
+        this._animation.set(value);
+    }
+    get animation() {
+        return this._animation();
+    }
     /**
      * Specifies the order of the Timeline events.
      * `asc` - chronological order
@@ -13229,14 +14068,14 @@ class TimelineComponent {
      * @default 'asc'
      */
     set eventsOrder(order) {
-        if (order === this._eventsOrder) {
+        if (order === this._eventsOrder()) {
             return;
         }
-        this._eventsOrder = order;
+        this._eventsOrder.set(order);
         this.updateEvents();
     }
     get eventsOrder() {
-        return this._eventsOrder;
+        return this._eventsOrder();
     }
     /**
      * Sets a specific width for the event.
@@ -13245,14 +14084,14 @@ class TimelineComponent {
      * @default 400
      */
     get eventWidth() {
-        return this._eventWidth;
+        return this._eventWidth();
     }
     set eventWidth(value) {
         if (value) {
-            this._eventWidth = value;
+            this._eventWidth.set(value);
         }
         else {
-            this._eventWidth = DEFAULT_EVENT_WIDTH;
+            this._eventWidth.set(DEFAULT_EVENT_WIDTH);
         }
     }
     /**
@@ -13262,14 +14101,14 @@ class TimelineComponent {
      * @default 600
      */
     get eventHeight() {
-        return this._eventHeight;
+        return this._eventHeight();
     }
     set eventHeight(value) {
         if (value) {
-            this._eventHeight = value;
+            this._eventHeight.set(value);
         }
         else {
-            this._eventHeight = DEFAULT_EVENT_HEIGHT;
+            this._eventHeight.set(DEFAULT_EVENT_HEIGHT);
         }
     }
     /**
@@ -13291,14 +14130,14 @@ class TimelineComponent {
      */
     set dateFormat(value) {
         if (isPresent$1(value) && value !== '') {
-            this._dateFormat = value;
+            this._dateFormat.set(value);
         }
         else {
-            this._dateFormat = DEFAULT_DATE_FORMAT;
+            this._dateFormat.set(DEFAULT_DATE_FORMAT);
         }
     }
     get dateFormat() {
-        return this._dateFormat;
+        return this._dateFormat();
     }
     hostClass = true;
     get verticalClass() {
@@ -13359,13 +14198,19 @@ class TimelineComponent {
      * @hidden
      */
     actionsTemplate;
-    _events = [];
+    _events = signal([], ...(ngDevMode ? [{ debugName: "_events" }] : []));
     _modelFields = defaultModelFields;
-    _eventWidth = DEFAULT_EVENT_WIDTH;
-    _eventHeight = DEFAULT_EVENT_HEIGHT;
-    _dateFormat = DEFAULT_DATE_FORMAT;
+    _orientation = signal('vertical', ...(ngDevMode ? [{ debugName: "_orientation" }] : []));
+    _alterMode = signal(false, ...(ngDevMode ? [{ debugName: "_alterMode" }] : []));
+    _collapsibleEvents = signal(true, ...(ngDevMode ? [{ debugName: "_collapsibleEvents" }] : []));
+    _navigable = signal(true, ...(ngDevMode ? [{ debugName: "_navigable" }] : []));
+    _showDateLabels = signal(true, ...(ngDevMode ? [{ debugName: "_showDateLabels" }] : []));
+    _animation = signal(undefined, ...(ngDevMode ? [{ debugName: "_animation" }] : []));
+    _eventWidth = signal(DEFAULT_EVENT_WIDTH, ...(ngDevMode ? [{ debugName: "_eventWidth" }] : []));
+    _eventHeight = signal(DEFAULT_EVENT_HEIGHT, ...(ngDevMode ? [{ debugName: "_eventHeight" }] : []));
+    _dateFormat = signal(DEFAULT_DATE_FORMAT, ...(ngDevMode ? [{ debugName: "_dateFormat" }] : []));
     originalData = [];
-    _eventsOrder = 'asc';
+    _eventsOrder = signal('asc', ...(ngDevMode ? [{ debugName: "_eventsOrder" }] : []));
     subscriptions = new Subscription();
     constructor(timelineService) {
         this.timelineService = timelineService;
@@ -13413,13 +14258,13 @@ class TimelineComponent {
         this.timelineVertical?.collapse(index);
     }
     updateEvents() {
-        const sortOrder = this._eventsOrder === 'asc' ? 1 : -1;
-        this._events = [...this._events].sort((a, b) => {
+        const sortOrder = this._eventsOrder() === 'asc' ? 1 : -1;
+        const sorted = [...this._events()].sort((a, b) => {
             return sortOrder * (a.date.getTime() - b.date.getTime());
         });
-        if (this._events.length > 0) {
-            let flag = this._events[0].date.getFullYear() - sortOrder;
-            this._events.forEach((event) => {
+        if (sorted.length > 0) {
+            let flag = sorted[0].date.getFullYear() - sortOrder;
+            sorted.forEach((event) => {
                 if (event.date.getFullYear() === flag) {
                     event.flag = null;
                 }
@@ -13429,6 +14274,7 @@ class TimelineComponent {
                 }
             });
         }
+        this._events.set(sorted);
     }
     initTemplates() {
         this.headerTemplate = this.cardHeaderTemplate?.first;
@@ -13495,11 +14341,14 @@ class TimelineComponent {
             >
           </kendo-timeline-horizontal>
         }
-        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedTimelineMessagesDirective, selector: "[kendoTimelineLocalizedMessages]" }, { kind: "component", type: TimelineVerticalComponent, selector: "kendo-timeline-vertical", inputs: ["events", "alterMode", "collapsibleEvents", "navigable", "showDateLabels", "animationDuration", "eventWidth", "dateFormat", "headerTemplate", "bodyTemplate", "actionsTemplate"], exportAs: ["kendoTimelineVertical"] }, { kind: "component", type: TimelineHorizontalComponent, selector: "kendo-timeline-horizontal", inputs: ["events", "alterMode", "collapsibleEvents", "navigable", "showDateLabels", "animationDuration", "eventHeight", "dateFormat", "headerTemplate", "bodyTemplate", "actionsTemplate"], exportAs: ["kendoTimelineHorizontal"] }] });
+        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedTimelineMessagesDirective, selector: "[kendoTimelineLocalizedMessages]" }, { kind: "component", type: TimelineVerticalComponent, selector: "kendo-timeline-vertical", inputs: ["events", "alterMode", "collapsibleEvents", "navigable", "showDateLabels", "animationDuration", "eventWidth", "dateFormat", "headerTemplate", "bodyTemplate", "actionsTemplate"], exportAs: ["kendoTimelineVertical"] }, { kind: "component", type: TimelineHorizontalComponent, selector: "kendo-timeline-horizontal", inputs: ["events", "alterMode", "collapsibleEvents", "navigable", "showDateLabels", "animationDuration", "eventHeight", "dateFormat", "headerTemplate", "bodyTemplate", "actionsTemplate"], exportAs: ["kendoTimelineHorizontal"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: TimelineComponent, decorators: [{
             type: Component,
             args: [{
+                    selector: 'kendo-timeline',
+                    exportAs: 'kendoTimeline',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     providers: [
                         TimelineService,
                         LocalizationService,
@@ -13509,8 +14358,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
                         },
                         provideComponentName('timeline')
                     ],
-                    exportAs: 'kendoTimeline',
-                    selector: 'kendo-timeline',
                     template: `
         <ng-container kendoTimelineLocalizedMessages
           i18n-previous="kendo.timeline.previous|The title of the previous button in horizontal orientation."