@progress/kendo-angular-buttons 25.0.0-develop.1 → 25.0.0-develop.3

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

@@ -3,10 +3,10 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
-import { Injectable, isDevMode, EventEmitter, HostListener, HostBinding, Output, Input, Optional, Component, ContentChildren, Directive, InjectionToken, Inject, ElementRef, ViewContainerRef, ViewChild, ContentChild, forwardRef, SkipSelf, ChangeDetectionStrategy, NgModule } from '@angular/core';
+import { Injectable, isDevMode, EventEmitter, signal, HostListener, HostBinding, Output, Input, Optional, ChangeDetectionStrategy, Component, ContentChildren, Directive, InjectionToken, Inject, ElementRef, ViewContainerRef, ViewChild, ContentChild, forwardRef, SkipSelf, afterNextRender, NgModule } from '@angular/core';
 import { Subject, Subscription, fromEvent, merge, of, Observable, from } from 'rxjs';
 import * as i12 from '@progress/kendo-angular-common';
-import { isDocumentAvailable, isFirefox, isSafari, isChanged, hasObservers, KENDO_WEBMCP_HOST, normalizeKeys, Keys, TemplateContextDirective, MultiTabStop, guid, parseCSSClassNames, isPresent as isPresent$1, EventsOutsideAngularDirective, replaceMessagePlaceholder, anyChanged, PreventableEvent as PreventableEvent$1, ResizeSensorComponent, ToggleButtonTabStopDirective, ResizeBatchService, KENDO_TOGGLEBUTTONTABSTOP } from '@progress/kendo-angular-common';
+import { isDocumentAvailable, isFirefox, isSafari, hasObservers, KENDO_WEBMCP_HOST, isChanged, normalizeKeys, Keys, TemplateContextDirective, MultiTabStop, guid, parseCSSClassNames, isPresent as isPresent$1, EventsOutsideAngularDirective, replaceMessagePlaceholder, anyChanged, PreventableEvent as PreventableEvent$1, ResizeSensorComponent, ToggleButtonTabStopDirective, ResizeBatchService, KENDO_TOGGLEBUTTONTABSTOP } from '@progress/kendo-angular-common';
 export { ToggleButtonTabStopDirective } from '@progress/kendo-angular-common';
 import { chevronDownIcon, xCircleIcon, moreVerticalIcon, microphoneIcon, stopIcon, pasteSparkleIcon } from '@progress/kendo-svg-icons';
 import * as i1 from '@progress/kendo-angular-l10n';
@@ -49,8 +49,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1783679760,
-    version: '25.0.0-develop.1',
+    publishDate: 1783692393,
+    version: '25.0.0-develop.3',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -199,7 +199,13 @@ class ButtonComponent {
      *
      * @default false
      */
-    toggleable = false;
+    set toggleable(value) {
+        this._toggleable.set(value);
+        this.toggleAriaPressed(value);
+    }
+    get toggleable() {
+        return this._toggleable();
+    }
     /**
      * Backwards-compatible alias
      *
@@ -221,10 +227,10 @@ class ButtonComponent {
      * @default false
      */
     get selected() {
-        return this._selected || false;
+        return this._selected() || false;
     }
     set selected(value) {
-        this._selected = value;
+        this._selected.set(value);
     }
     /**
      * @hidden
@@ -292,10 +298,10 @@ class ButtonComponent {
      */
     set size(size) {
         this.handleClasses(size, 'size');
-        this._size = size;
+        this._size.set(size);
     }
     get size() {
-        return this._size;
+        return this._size();
     }
     /**
      * Sets the border radius of the Button.
@@ -303,10 +309,10 @@ class ButtonComponent {
      */
     set rounded(rounded) {
         this.handleClasses(rounded, 'rounded');
-        this._rounded = rounded;
+        this._rounded.set(rounded);
     }
     get rounded() {
-        return this._rounded;
+        return this._rounded();
     }
     /**
      * Sets the background and border styles of the Button.
@@ -314,10 +320,10 @@ class ButtonComponent {
      */
     set fillMode(fillMode) {
         this.handleClasses(fillMode, 'fillMode');
-        this._fillMode = fillMode;
+        this._fillMode.set(fillMode);
     }
     get fillMode() {
-        return this._fillMode;
+        return this._fillMode();
     }
     /**
      * Sets a predefined theme color for the Button.
@@ -326,10 +332,10 @@ class ButtonComponent {
      */
     set themeColor(themeColor) {
         this.handleThemeColor(themeColor);
-        this._themeColor = themeColor;
+        this._themeColor.set(themeColor);
     }
     get themeColor() {
-        return this._themeColor;
+        return this._themeColor();
     }
     /**
      * Sets an SVG icon to display inside the Button.
@@ -353,19 +359,26 @@ class ButtonComponent {
      */
     click = new EventEmitter();
     element;
-    isDisabled = false;
     chevronDownIcon = chevronDownIcon;
-    _size = undefined;
-    _rounded = undefined;
-    _fillMode = undefined;
-    _themeColor = undefined;
+    get isDisabled() {
+        return this._disabled();
+    }
+    set isDisabled(value) {
+        this._disabled.set(value);
+    }
+    _size = signal(undefined, ...(ngDevMode ? [{ debugName: "_size" }] : []));
+    _rounded = signal(undefined, ...(ngDevMode ? [{ debugName: "_rounded" }] : []));
+    _fillMode = signal(undefined, ...(ngDevMode ? [{ debugName: "_fillMode" }] : []));
+    _themeColor = signal(undefined, ...(ngDevMode ? [{ debugName: "_themeColor" }] : []));
     _focused = false;
-    direction;
-    _selected;
     subs = new Subscription();
     _iconClass;
     _icon;
     _svgIcon;
+    _disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
+    _selected = signal(false, ...(ngDevMode ? [{ debugName: "_selected" }] : []));
+    _toggleable = signal(false, ...(ngDevMode ? [{ debugName: "_toggleable" }] : []));
+    _direction = signal('', ...(ngDevMode ? [{ debugName: "_direction" }] : []));
     set isFocused(isFocused) {
         toggleClass('k-focus', isFocused, this.renderer, this.element);
         this._focused = isFocused;
@@ -381,10 +394,10 @@ class ButtonComponent {
         return this.isDisabled;
     }
     get classActive() {
-        return this.selected;
+        return this._selected();
     }
     get getDirection() {
-        return this.direction;
+        return this._direction();
     }
     /**
      * @hidden
@@ -412,8 +425,8 @@ class ButtonComponent {
         this.service = service;
         this.ngZone = ngZone;
         validatePackage(packageMetadata);
-        this.direction = localization.rtl ? 'rtl' : 'ltr';
-        this.subs.add(localization.changes.subscribe(({ rtl }) => (this.direction = rtl ? 'rtl' : 'ltr')));
+        this._direction.set(localization.rtl ? 'rtl' : 'ltr');
+        this.subs.add(localization.changes.subscribe(({ rtl }) => this._direction.set(rtl ? 'rtl' : 'ltr')));
         this.element = element.nativeElement;
         this.renderer.addClass(this.element, 'k-button');
     }
@@ -432,11 +445,6 @@ class ButtonComponent {
             }));
         });
     }
-    ngOnChanges(change) {
-        if (isChanged('togglable', change) || isChanged('toggleable', change)) {
-            this.toggleAriaPressed(this.toggleable);
-        }
-    }
     ngOnDestroy() {
         this.subs.unsubscribe();
     }
@@ -547,7 +555,7 @@ class ButtonComponent {
                 provide: KENDO_WEBMCP_HOST,
                 useExisting: ButtonComponent
             }
-        ], exportAs: ["kendoButton"], usesOnChanges: true, ngImport: i0, template: `
+        ], exportAs: ["kendoButton"], ngImport: i0, template: `
         <ng-template #iconTemplate>
             @if (icon || svgIcon) {
                 <kendo-icon-wrapper
@@ -586,11 +594,13 @@ class ButtonComponent {
             </span>
         }
 
-        `, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+        `, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
             args: [{
+                    selector: 'button[kendoButton]',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     exportAs: 'kendoButton',
                     providers: [
                         LocalizationService,
@@ -603,7 +613,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                             useExisting: ButtonComponent
                         }
                     ],
-                    selector: 'button[kendoButton]',
                     template: `
         <ng-template #iconTemplate>
             @if (icon || svgIcon) {
@@ -772,7 +781,7 @@ class ButtonGroupComponent {
      */
     set tabIndex(value) {
         this._tabIndex = value;
-        this.currentTabIndex = value;
+        this._currentTabIndex.set(value);
     }
     get tabIndex() {
         return this._tabIndex;
@@ -795,9 +804,9 @@ class ButtonGroupComponent {
     navigate = new EventEmitter();
     buttons;
     _tabIndex = 0;
-    currentTabIndex = 0;
+    _currentTabIndex = signal(0, ...(ngDevMode ? [{ debugName: "_currentTabIndex" }] : []));
     lastFocusedIndex = -1;
-    direction;
+    _direction = signal(undefined, ...(ngDevMode ? [{ debugName: "_direction" }] : []));
     subs = new Subscription();
     wrapperClasses = true;
     get disabledClass() {
@@ -808,7 +817,7 @@ class ButtonGroupComponent {
     }
     role = 'group';
     get dir() {
-        return this.direction;
+        return this._direction();
     }
     get ariaDisabled() {
         return this.disabled;
@@ -820,14 +829,14 @@ class ButtonGroupComponent {
         if (this.disabled) {
             return undefined;
         }
-        return this.navigable ? this.currentTabIndex : undefined;
+        return this.navigable ? this._currentTabIndex() : undefined;
     }
     constructor(service, localization, renderer, element) {
         this.service = service;
         this.renderer = renderer;
         this.element = element;
         validatePackage(packageMetadata);
-        this.subs.add(localization.changes.subscribe(({ rtl }) => this.direction = rtl ? 'rtl' : 'ltr'));
+        this.subs.add(localization.changes.subscribe(({ rtl }) => this._direction.set(rtl ? 'rtl' : 'ltr')));
     }
     ngOnInit() {
         this.subs.add(this.service.buttonClicked$.subscribe((button) => {
@@ -846,7 +855,7 @@ class ButtonGroupComponent {
                 button.setSelected(newSelectionValue);
             }
             if (this.navigable) {
-                this.currentTabIndex = -1;
+                this._currentTabIndex.set(-1);
                 this.renderer.setAttribute(button, tabindex, '0');
             }
         }));
@@ -855,13 +864,13 @@ class ButtonGroupComponent {
         this.handleSubs('focusout', (event) => this.navigable && event.relatedTarget && event.relatedTarget.parentNode !== this.element.nativeElement, () => {
             this.lastFocusedIndex = this.buttons.toArray().findIndex(button => button.tabIndex !== -1);
             this.defocus(this.buttons.toArray());
-            this.currentTabIndex = this.tabIndex;
+            this._currentTabIndex.set(this.tabIndex);
         });
         this.subs.add(fromEvent(this.element.nativeElement, 'focusout')
             .pipe(filter((event) => this.navigable && event.relatedTarget && event.relatedTarget.parentNode !== this.element.nativeElement))
             .subscribe(() => {
             this.defocus(this.buttons.toArray());
-            this.currentTabIndex = this.tabIndex;
+            this._currentTabIndex.set(this.tabIndex);
         }));
     }
     ngOnChanges(changes) {
@@ -875,10 +884,10 @@ class ButtonGroupComponent {
         if (isChanged('navigable', changes)) {
             if (changes['navigable'].currentValue) {
                 this.defocus(this.buttons.toArray());
-                this.currentTabIndex = 0;
+                this._currentTabIndex.set(0);
             }
             else {
-                this.currentTabIndex = -1;
+                this._currentTabIndex.set(-1);
                 this.buttons.forEach((button) => this.renderer.setAttribute(button, tabindex, '0'));
             }
         }
@@ -971,7 +980,7 @@ class ButtonGroupComponent {
             .subscribe(handler));
     }
     focusHandler = () => {
-        this.currentTabIndex = -1;
+        this._currentTabIndex.set(-1);
         this.defocus(this.buttons.toArray());
         const firstFocusableIndex = this.buttons.toArray().findIndex(current => !current.disabled);
         const index = this.lastFocusedIndex === -1 ? firstFocusableIndex : this.lastFocusedIndex;
@@ -989,11 +998,13 @@ class ButtonGroupComponent {
             }
         ], queries: [{ propertyName: "buttons", predicate: ButtonComponent }], exportAs: ["kendoButtonGroup"], usesOnChanges: true, ngImport: i0, template: `
         <ng-content select="[kendoButton]"></ng-content>
-    `, isInline: true });
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ButtonGroupComponent, decorators: [{
             type: Component,
             args: [{
+                    selector: 'kendo-buttongroup',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     exportAs: 'kendoButtonGroup',
                     providers: [
                         KendoButtonService,
@@ -1003,7 +1014,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                             useValue: 'kendo.buttongroup'
                         }
                     ],
-                    selector: 'kendo-buttongroup',
                     template: `
         <ng-content select="[kendoButton]"></ng-content>
     `,
@@ -1064,8 +1074,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
 class ChipComponent {
     element;
     renderer;
-    ngZone;
     localizationService;
+    ngZone;
     /**
      * Sets the label text of the Chip.
      *
@@ -1096,7 +1106,13 @@ class ChipComponent {
      * Specifies the selected state of the Chip.
      * @default false
      */
-    selected = false;
+    set selected(value) {
+        this._selected.set(value);
+        this.setAriSelected(value);
+    }
+    get selected() {
+        return this._selected();
+    }
     /**
      * Specifies if the Chip is removable.
      * If set to `true`, the Chip renders a remove icon.
@@ -1201,15 +1217,17 @@ class ChipComponent {
         return this.disabled || null;
     }
     get selectedClass() {
-        return this.selected;
+        return this._selected();
     }
     get focusedClass() {
-        return this.focused;
+        return this._focused();
     }
     /**
      * @hidden
      */
-    direction;
+    get direction() {
+        return this._direction();
+    }
     /**
      * @hidden
      */
@@ -1226,33 +1244,27 @@ class ChipComponent {
     _rounded = undefined;
     _fillMode = undefined;
     _themeColor = undefined;
-    focused = false;
+    _focused = signal(false, ...(ngDevMode ? [{ debugName: "_focused" }] : []));
+    _selected = signal(false, ...(ngDevMode ? [{ debugName: "_selected" }] : []));
+    _direction = signal('', ...(ngDevMode ? [{ debugName: "_direction" }] : []));
     subs = new Subscription();
-    constructor(element, renderer, ngZone, localizationService) {
+    constructor(element, renderer, localizationService, ngZone) {
         this.element = element;
         this.renderer = renderer;
-        this.ngZone = ngZone;
         this.localizationService = localizationService;
+        this.ngZone = ngZone;
         validatePackage(packageMetadata);
-        this.direction = localizationService.rtl ? 'rtl' : 'ltr';
+        this._direction.set(localizationService.rtl ? 'rtl' : 'ltr');
     }
     ngOnInit() {
         this.subs.add(this.localizationService.changes
-            .subscribe(({ rtl }) => this.direction = rtl ? 'rtl' : 'ltr'));
+            .subscribe(({ rtl }) => this._direction.set(rtl ? 'rtl' : 'ltr')));
         this.renderer.setAttribute(this.element.nativeElement, 'role', 'button');
-        this.renderer.setAttribute(this.element.nativeElement, 'aria-pressed', `${this.selected}`);
+        this.renderer.setAttribute(this.element.nativeElement, 'aria-pressed', `${this._selected()}`);
     }
     ngOnDestroy() {
         this.subs.unsubscribe();
     }
-    ngOnChanges(changes) {
-        if (changes?.['selected']) {
-            const hasAriaSelected = this.element.nativeElement.hasAttribute('aria-selected');
-            if (!hasAriaSelected) {
-                this.renderer.setAttribute(this.element.nativeElement, 'aria-pressed', `${this.selected}`);
-            }
-        }
-    }
     ngAfterViewInit() {
         const chip = this.element.nativeElement;
         this.attachElementEventHandlers(chip);
@@ -1380,14 +1392,20 @@ class ChipComponent {
             });
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ChipComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    setAriSelected(value) {
+        const hasAriaSelected = this.element?.nativeElement.hasAttribute('aria-selected');
+        if (!hasAriaSelected) {
+            this.renderer.setAttribute(this.element.nativeElement, 'aria-pressed', `${value}`);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ChipComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: ChipComponent, isStandalone: true, selector: "kendo-chip", inputs: { label: "label", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", avatarSettings: "avatarSettings", selected: "selected", removable: "removable", removeIcon: "removeIcon", removeSvgIcon: "removeSvgIcon", hasMenu: "hasMenu", menuIcon: "menuIcon", menuSvgIcon: "menuSvgIcon", disabled: "disabled", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor" }, outputs: { remove: "remove", menuToggle: "menuToggle", contentClick: "contentClick" }, host: { properties: { "attr.tabindex": "this.tabIndex", "class.k-chip": "this.hostClass", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "class.k-selected": "this.selectedClass", "class.k-focus": "this.focusedClass", "attr.dir": "this.direction" } }, providers: [
             LocalizationService,
             {
                 provide: L10N_PREFIX,
                 useValue: 'kendo.chip'
             }
-        ], usesOnChanges: true, ngImport: i0, template: `
+        ], ngImport: i0, template: `
         @if (icon || svgIcon) {
           <kendo-icon-wrapper
             size="small"
@@ -1452,12 +1470,13 @@ class ChipComponent {
             }
           </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"] }] });
+        `, 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ChipComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-chip',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
         @if (icon || svgIcon) {
           <kendo-icon-wrapper
@@ -1534,7 +1553,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                     standalone: true,
                     imports: [NgStyle, IconWrapperComponent]
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i1.LocalizationService }], propDecorators: { label: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.LocalizationService }, { type: i0.NgZone }], propDecorators: { label: [{
                 type: Input
             }], icon: [{
                 type: Input
@@ -1623,7 +1642,9 @@ class ChipListComponent {
     /**
      * @hidden
      */
-    direction;
+    get direction() {
+        return this._direction();
+    }
     /**
      * Sets the selection mode of the ChipList.
      *
@@ -1662,6 +1683,7 @@ class ChipListComponent {
     _size = undefined;
     subs = new Subscription();
     _navigable = true;
+    _direction = signal('', ...(ngDevMode ? [{ debugName: "_direction" }] : []));
     /**
      * @hidden
      */
@@ -1712,11 +1734,11 @@ class ChipListComponent {
         this.element = element;
         this.ngZone = ngZone;
         validatePackage(packageMetadata);
-        this.direction = localizationService.rtl ? 'rtl' : 'ltr';
+        this._direction.set(localizationService.rtl ? 'rtl' : 'ltr');
     }
     ngOnInit() {
         this.dynamicRTLSubscription = this.localizationService.changes
-            .subscribe(({ rtl }) => this.direction = rtl ? 'rtl' : 'ltr');
+            .subscribe(({ rtl }) => this._direction.set(rtl ? 'rtl' : 'ltr'));
     }
     ngAfterViewInit() {
         const stylingInputs = ['size'];
@@ -1880,12 +1902,13 @@ class ChipListComponent {
             }
         ], queries: [{ propertyName: "chips", predicate: ChipComponent }], ngImport: i0, template: `
         <ng-content></ng-content>
-    `, isInline: true });
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ChipListComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-chiplist, kendo-chip-list',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
         <ng-content></ng-content>
     `,
@@ -2388,7 +2411,7 @@ class ListButton extends MultiTabStop {
     focusService;
     navigationService;
     wrapperRef;
-    _zone;
+    zone;
     popupService;
     elRef;
     cdr;
@@ -2396,16 +2419,16 @@ class ListButton extends MultiTabStop {
     listId = guid();
     buttonId = guid();
     _data;
-    _open = false;
+    _open = signal(false, ...(ngDevMode ? [{ debugName: "_open" }] : []));
     _disabled = false;
-    _active = false;
+    _active = signal(false, ...(ngDevMode ? [{ debugName: "_active" }] : []));
     _popupSettings = { animate: true, popupClass: '' };
     _isFocused = false;
     _itemClick;
     _blur;
     wrapper;
     subs = new Subscription();
-    direction;
+    direction = signal(undefined, ...(ngDevMode ? [{ debugName: "direction" }] : []));
     popupRef;
     popupSubs = new Subscription();
     button;
@@ -2480,7 +2503,7 @@ class ListButton extends MultiTabStop {
      */
     get anchorAlign() {
         const align = { horizontal: this.popupSettings.align || 'left', vertical: 'bottom' };
-        if (this.direction === 'rtl' && !isPresent(this.popupSettings.align)) {
+        if (this.direction() === 'rtl' && !isPresent(this.popupSettings.align)) {
             align.horizontal = 'right';
         }
         return align;
@@ -2490,18 +2513,18 @@ class ListButton extends MultiTabStop {
      */
     get popupAlign() {
         const align = { horizontal: this.popupSettings.align || 'left', vertical: 'top' };
-        if (this.direction === 'rtl' && !isPresent(this.popupSettings.align)) {
+        if (this.direction() === 'rtl' && !isPresent(this.popupSettings.align)) {
             align.horizontal = 'right';
         }
         return align;
     }
     isClosePrevented = false;
-    constructor(focusService, navigationService, wrapperRef, _zone, popupService, elRef, localization, cdr, containerService) {
+    constructor(focusService, navigationService, wrapperRef, zone, popupService, elRef, localization, cdr, containerService) {
         super();
         this.focusService = focusService;
         this.navigationService = navigationService;
         this.wrapperRef = wrapperRef;
-        this._zone = _zone;
+        this.zone = zone;
         this.popupService = popupService;
         this.elRef = elRef;
         this.cdr = cdr;
@@ -2510,7 +2533,7 @@ class ListButton extends MultiTabStop {
         this.focusService = focusService;
         this.navigationService = navigationService;
         this.wrapper = wrapperRef.nativeElement;
-        this.subs.add(localization.changes.subscribe(({ rtl }) => (this.direction = rtl ? 'rtl' : 'ltr')));
+        this.subs.add(localization.changes.subscribe(({ rtl }) => (this.direction.set(rtl ? 'rtl' : 'ltr'))));
         this.subscribeEvents();
     }
     ngOnChanges(changes) {
@@ -2534,7 +2557,7 @@ class ListButton extends MultiTabStop {
         return popupClasses.join(' ');
     }
     get openState() {
-        return this._open;
+        return this._open();
     }
     /**
      * @hidden
@@ -2543,13 +2566,13 @@ class ListButton extends MultiTabStop {
         if (this.disabled) {
             return;
         }
-        this._open = open;
+        this._open.set(open);
     }
     /**
      * Returns the current open state of the popup.
      */
     get isOpen() {
-        return this._open;
+        return this._open();
     }
     /**
      * @hidden
@@ -2596,11 +2619,11 @@ class ListButton extends MultiTabStop {
         }));
     }
     subscribeComponentBlurredEvent() {
-        this._zone.runOutsideAngular(() => {
+        this.zone.runOutsideAngular(() => {
             this.subs.add(this.navigationService.tab.pipe(filter(() => this._isFocused), tap(() => this.focusButton())).subscribe(this.handleTab.bind(this)));
             this.subs.add(fromEvent(document, 'click')
                 .pipe(filter((event) => !this.wrapperContains(event.target)), filter(() => this._isFocused))
-                .subscribe(() => this._zone.run(() => this.blurWrapper())));
+                .subscribe(() => this.zone.run(() => this.blurWrapper())));
         });
     }
     subscribeNavigationEvents() {
@@ -2707,7 +2730,7 @@ class ListButton extends MultiTabStop {
     }
     onNavigationEnterUp(_args) {
         if (!this._disabled && !this.openState) {
-            this._active = false;
+            this._active.set(false);
         }
         if (this.openState) {
             const focused = this.focusService.focused;
@@ -2788,11 +2811,12 @@ class ListButton extends MultiTabStop {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ListButton, deps: [{ token: FocusService }, { token: NavigationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i3.PopupService }, { token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: PopupContainerService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: ListButton, isStandalone: true, selector: "ng-component", inputs: { disabled: "disabled", tabIndex: "tabIndex", buttonClass: "buttonClass", popupSettings: "popupSettings" }, outputs: { open: "open", close: "close", escape: "escape" }, viewQueries: [{ propertyName: "button", first: true, predicate: ["button"], descendants: true, read: ElementRef }, { propertyName: "buttonList", first: true, predicate: ["buttonList"], descendants: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '', isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: ListButton, isStandalone: true, selector: "ng-component", inputs: { disabled: "disabled", tabIndex: "tabIndex", buttonClass: "buttonClass", popupSettings: "popupSettings" }, outputs: { open: "open", close: "close", escape: "escape" }, viewQueries: [{ propertyName: "button", first: true, predicate: ["button"], descendants: true, read: ElementRef }, { propertyName: "buttonList", first: true, predicate: ["buttonList"], descendants: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ListButton, decorators: [{
             type: Component,
             args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     template: ''
                 }]
         }], ctorParameters: () => [{ type: FocusService }, { type: NavigationService }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i3.PopupService }, { type: i0.ElementRef }, { type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: PopupContainerService }], propDecorators: { button: [{
@@ -2897,24 +2921,39 @@ class DropDownButtonComponent extends ListButton {
     /**
      * Specifies the padding of the DropDownButton. See [DropDownButton Appearance](https://www.telerik.com/kendo-angular-ui/components/buttons/dropdownbutton/appearance#size). The default value is set by the Kendo theme.
      */
-    size = undefined;
+    set size(size) {
+        this._size.set(size);
+    }
+    get size() {
+        return this._size();
+    }
     /**
      * Specifies the border radius of the DropDownButton. See [DropDownButton Appearance](https://www.telerik.com/kendo-angular-ui/components/buttons/dropdownbutton/appearance#roundness). The default value is set by the Kendo theme.
      */
-    rounded = undefined;
+    set rounded(rounded) {
+        this._rounded.set(rounded);
+    }
+    get rounded() {
+        return this._rounded();
+    }
     /**
      * Specifies the background and border styles of the DropDownButton. See [DropDownButton Appearance](https://www.telerik.com/kendo-angular-ui/components/buttons/dropdownbutton/appearance#fill-mode). The default value is set by the Kendo theme.
      */
     set fillMode(fillMode) {
-        this._fillMode = fillMode === 'clear' ? 'flat' : fillMode;
+        this._fillMode.set(fillMode === 'clear' ? 'flat' : fillMode);
     }
     get fillMode() {
-        return this._fillMode;
+        return this._fillMode();
     }
     /**
      * Specifies predefined theme colors for the DropDownButton. See [DropDownButton Appearance](https://www.telerik.com/kendo-angular-ui/components/buttons/dropdownbutton/appearance#theme-colors).
      */
-    themeColor = undefined;
+    set themeColor(themeColor) {
+        this._themeColor.set(themeColor);
+    }
+    get themeColor() {
+        return this._themeColor();
+    }
     /**
      * Sets attributes for the main button.
      */
@@ -2944,16 +2983,19 @@ class DropDownButtonComponent extends ListButton {
     }
     hostDisplayStyle = 'inline-flex';
     get dir() {
-        return this.direction;
+        return this.direction();
     }
     /**
      * @hidden
      */
     get active() {
-        return this._active;
+        return this._active();
     }
     itemTemplate;
-    _fillMode = undefined;
+    _size = signal(undefined, ...(ngDevMode ? [{ debugName: "_size" }] : []));
+    _rounded = signal(undefined, ...(ngDevMode ? [{ debugName: "_rounded" }] : []));
+    _fillMode = signal(undefined, ...(ngDevMode ? [{ debugName: "_fillMode" }] : []));
+    _themeColor = signal(undefined, ...(ngDevMode ? [{ debugName: "_themeColor" }] : []));
     _buttonAttributes = null;
     documentMouseUpSub;
     /**
@@ -2963,10 +3005,10 @@ class DropDownButtonComponent extends ListButton {
         this.keyDownHandler(event, true);
         const code = normalizeKeys(event);
         if (code === Keys.Space) {
-            this._active = true;
+            this._active.set(true);
         }
         if (code === Keys.Enter) {
-            this._active = true;
+            this._active.set(true);
             event.preventDefault();
         }
     }
@@ -2975,7 +3017,7 @@ class DropDownButtonComponent extends ListButton {
      */
     keyup(event) {
         this.keyUpHandler(event);
-        this._active = false;
+        this._active.set(false);
     }
     /**
      * @hidden
@@ -2985,7 +3027,7 @@ class DropDownButtonComponent extends ListButton {
             event.preventDefault();
         }
         else {
-            this._active = true;
+            this._active.set(true);
         }
     }
     /**
@@ -2995,7 +3037,7 @@ class DropDownButtonComponent extends ListButton {
         if (this._disabled) {
             event.preventDefault();
         }
-        this._active = false;
+        this._active.set(false);
     }
     /**
      * @hidden
@@ -3038,7 +3080,7 @@ class DropDownButtonComponent extends ListButton {
         zone.runOutsideAngular(() => {
             this.documentMouseUpSub = this.renderer.listen('document', 'mouseup', () => {
                 if (this.active) {
-                    zone.run(() => this._active = false);
+                    zone.run(() => this._active.set(false));
                 }
             });
         });
@@ -3153,11 +3195,13 @@ class DropDownButtonComponent extends ListButton {
             </kendo-button-list>
         </ng-template>
         <ng-container #container></ng-container>
-    `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ListComponent, selector: "kendo-button-list", inputs: ["data", "textField", "itemTemplate", "size"], outputs: ["onItemClick", "onItemBlur"] }] });
+    `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ListComponent, selector: "kendo-button-list", inputs: ["data", "textField", "itemTemplate", "size"], outputs: ["onItemClick", "onItemBlur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DropDownButtonComponent, decorators: [{
             type: Component,
             args: [{
+                    selector: 'kendo-dropdownbutton',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     exportAs: 'kendoDropDownButton',
                     providers: [
                         FocusService,
@@ -3170,7 +3214,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         },
                         PopupContainerService
                     ],
-                    selector: 'kendo-dropdownbutton',
                     template: `
         <button kendoButton #button
             type="button"
@@ -3684,17 +3727,19 @@ class FloatingActionButtonComponent {
     element;
     focusService;
     navigationService;
-    ngZone;
     popupService;
     builder;
     localizationService;
+    ngZone;
     get fixedClass() {
         return this.positionMode === 'fixed';
     }
     get absoluteClass() {
         return this.positionMode === 'absolute';
     }
-    direction;
+    get direction() {
+        return this._direction();
+    }
     button;
     popupTemplate;
     dialItemTemplate;
@@ -3850,6 +3895,7 @@ class FloatingActionButtonComponent {
     _disabled = false;
     _align = { horizontal: 'end', vertical: 'bottom' };
     _offset = { x: DEFAULT_OFFSET, y: DEFAULT_OFFSET };
+    _direction = signal(undefined, ...(ngDevMode ? [{ debugName: "_direction" }] : []));
     subscriptions = new Subscription();
     popupMouseDownListener;
     rtl = false;
@@ -3857,20 +3903,21 @@ class FloatingActionButtonComponent {
     popupRef;
     initialSetup = true;
     focusChangedProgrammatically = false;
-    constructor(renderer, element, focusService, navigationService, ngZone, popupService, builder, localizationService) {
+    constructor(renderer, element, focusService, navigationService, popupService, builder, localizationService, ngZone) {
         this.renderer = renderer;
         this.element = element;
         this.focusService = focusService;
         this.navigationService = navigationService;
-        this.ngZone = ngZone;
         this.popupService = popupService;
         this.builder = builder;
         this.localizationService = localizationService;
+        this.ngZone = ngZone;
         validatePackage(packageMetadata);
         this.subscribeNavigationEvents();
+        this._direction.set(this.localizationService.rtl ? 'rtl' : 'ltr');
         this.subscriptions.add(this.localizationService.changes.subscribe(({ rtl }) => {
             this.rtl = rtl;
-            this.direction = this.rtl ? 'rtl' : 'ltr';
+            this._direction.set(rtl ? 'rtl' : 'ltr');
         }));
     }
     ngAfterViewInit() {
@@ -3926,7 +3973,9 @@ class FloatingActionButtonComponent {
             return;
         }
         if (shouldOpen) {
-            setTimeout(() => this.openDial());
+            this.ngZone.runOutsideAngular(() => {
+                setTimeout(() => this.openDial());
+            });
         }
         else {
             this.closeDial();
@@ -4337,7 +4386,7 @@ class FloatingActionButtonComponent {
         }
         return DEFAULT_DURATION;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FloatingActionButtonComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: FocusService }, { token: NavigationService }, { token: i0.NgZone }, { token: i3.PopupService }, { token: i4.AnimationBuilder }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FloatingActionButtonComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: FocusService }, { token: NavigationService }, { token: i3.PopupService }, { token: i4.AnimationBuilder }, { token: i1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: FloatingActionButtonComponent, isStandalone: true, selector: "kendo-floatingactionbutton", inputs: { themeColor: "themeColor", size: "size", rounded: "rounded", disabled: "disabled", align: "align", offset: "offset", positionMode: "positionMode", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", buttonClass: "buttonClass", dialClass: "dialClass", text: "text", dialItemAnimation: "dialItemAnimation", tabIndex: "tabIndex", dialItems: "dialItems" }, outputs: { onBlur: "blur", onFocus: "focus", dialItemClick: "dialItemClick", open: "open", close: "close" }, host: { properties: { "class.k-pos-fixed": "this.fixedClass", "class.k-pos-absolute": "this.absoluteClass", "attr.dir": "this.direction" } }, providers: [
             FocusService,
             NavigationService,
@@ -4409,12 +4458,13 @@ class FloatingActionButtonComponent {
             >
           </ul>
         </ng-template>
-        `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { 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"] }, { kind: "component", type: DialListComponent, selector: "[kendoDialList]", inputs: ["dialItems", "dialItemTemplate", "align"] }] });
+        `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { 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"] }, { kind: "component", type: DialListComponent, selector: "[kendoDialList]", inputs: ["dialItems", "dialItemTemplate", "align"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FloatingActionButtonComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-floatingactionbutton',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     providers: [
                         FocusService,
                         NavigationService,
@@ -4491,7 +4541,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                     standalone: true,
                     imports: [NgClass, EventsOutsideAngularDirective, NgTemplateOutlet, IconWrapperComponent, DialListComponent]
                 }]
-        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: FocusService }, { type: NavigationService }, { type: i0.NgZone }, { type: i3.PopupService }, { type: i4.AnimationBuilder }, { type: i1.LocalizationService }], propDecorators: { fixedClass: [{
+        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: FocusService }, { type: NavigationService }, { type: i3.PopupService }, { type: i4.AnimationBuilder }, { type: i1.LocalizationService }, { type: i0.NgZone }], propDecorators: { fixedClass: [{
                 type: HostBinding,
                 args: ['class.k-pos-fixed']
             }], absoluteClass: [{
@@ -4583,11 +4633,23 @@ class Messages extends ComponentMessages {
      * </kendo-splitbutton>
      * ```
      */
-    splitButtonLabel;
+    set splitButtonLabel(value) {
+        this._splitButtonLabel.set(value);
+    }
+    get splitButtonLabel() {
+        return this._splitButtonLabel();
+    }
     /**
      * Specifies the text for the SplitButton toggle button `aria-label`.
      */
-    toggleButtonLabel;
+    set toggleButtonLabel(value) {
+        this._toggleButtonLabel.set(value);
+    }
+    get toggleButtonLabel() {
+        return this._toggleButtonLabel();
+    }
+    _toggleButtonLabel = signal(undefined, ...(ngDevMode ? [{ debugName: "_toggleButtonLabel" }] : []));
+    _splitButtonLabel = signal(undefined, ...(ngDevMode ? [{ debugName: "_splitButtonLabel" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: Messages, isStandalone: true, selector: "kendo-splitbutton-messages-base", inputs: { splitButtonLabel: "splitButtonLabel", toggleButtonLabel: "toggleButtonLabel" }, usesInheritance: true, ngImport: i0 });
 }
@@ -4734,30 +4796,40 @@ class SplitButtonComponent extends ListButton {
     /**
      * Configures the padding of the SplitButton ([see example](https://www.telerik.com/kendo-angular-ui/components/buttons/api/splitbuttoncomponent#size)). The default value is set by the Kendo theme.
      */
-    size = undefined;
+    set size(size) {
+        this._size.set(size);
+    }
+    get size() {
+        return this._size();
+    }
     /**
      * Configures the border radius of the SplitButton ([see example](https://www.telerik.com/kendo-angular-ui/components/buttons/api/splitbuttoncomponent#rounded)). The default value is set by the Kendo theme.
      */
     set rounded(rounded) {
         this.handleClasses(rounded, 'rounded');
-        this._rounded = rounded;
+        this._rounded.set(rounded);
     }
     get rounded() {
-        return this._rounded;
+        return this._rounded();
     }
     /**
      * Configures the background and border styles of the SplitButton ([see example](https://www.telerik.com/kendo-angular-ui/components/buttons/api/splitbuttoncomponent#fillmode)). The default value is set by the Kendo theme.
      */
     set fillMode(fillMode) {
-        this._fillMode = fillMode === 'clear' ? 'flat' : fillMode;
+        this._fillMode.set(fillMode === 'clear' ? 'flat' : fillMode);
     }
     get fillMode() {
-        return this._fillMode;
+        return this._fillMode();
     }
     /**
      * Configures the theme color of the SplitButton. The theme color applies to the background, border, and text ([see example](https://www.telerik.com/kendo-angular-ui/components/buttons/api/splitbuttoncomponent#themecolor)). The default value is set by the Kendo theme.
      */
-    themeColor = undefined;
+    set themeColor(themeColor) {
+        this._themeColor.set(themeColor);
+    }
+    get themeColor() {
+        return this._themeColor();
+    }
     /**
      * Disables the SplitButton when set to `true` ([see example](https://www.telerik.com/kendo-angular-ui/components/buttons/splitbutton/data-binding#arrays-of-complex-data)).
      */
@@ -4853,7 +4925,9 @@ class SplitButtonComponent extends ListButton {
      * Specifies a template to customize the content of the items in the drop-down list.
      */
     itemTemplate;
-    activeArrow = false;
+    get activeArrow() {
+        return this._activeArrow();
+    }
     listId = guid();
     /**
      * @hidden
@@ -4865,7 +4939,7 @@ class SplitButtonComponent extends ListButton {
      * @hidden
      */
     get active() {
-        return this._active;
+        return this._active();
     }
     /**
      * @hidden
@@ -4873,11 +4947,14 @@ class SplitButtonComponent extends ListButton {
     get componentTabIndex() {
         return this.disabled ? -1 : this.tabIndex;
     }
-    buttonText = '';
+    buttonText = signal('', ...(ngDevMode ? [{ debugName: "buttonText" }] : []));
     arrowButtonClicked = false;
-    _rounded = undefined;
-    _fillMode = undefined;
+    _rounded = signal(undefined, ...(ngDevMode ? [{ debugName: "_rounded" }] : []));
+    _fillMode = signal(undefined, ...(ngDevMode ? [{ debugName: "_fillMode" }] : []));
+    _themeColor = signal(undefined, ...(ngDevMode ? [{ debugName: "_themeColor" }] : []));
+    _size = signal(undefined, ...(ngDevMode ? [{ debugName: "_size" }] : []));
     _buttonAttributes = null;
+    _activeArrow = signal(false, ...(ngDevMode ? [{ debugName: "_activeArrow" }] : []));
     documentMouseUpSub;
     set isFocused(value) {
         this._isFocused = value;
@@ -4889,14 +4966,14 @@ class SplitButtonComponent extends ListButton {
         return true;
     }
     get dir() {
-        return this.direction;
+        return this.direction();
     }
     /**
      * @hidden
      */
     get ariaLabel() {
         const localizationMsg = this.messageFor('splitButtonLabel') || '';
-        return replaceMessagePlaceholder(localizationMsg, 'buttonText', this.buttonText);
+        return replaceMessagePlaceholder(localizationMsg, 'buttonText', this.buttonText());
     }
     /**
      * @hidden
@@ -4934,14 +5011,14 @@ class SplitButtonComponent extends ListButton {
      * @hidden
      */
     toggleButtonActiveState(enable) {
-        this._active = enable;
+        this._active.set(enable);
     }
     /**
      * @hidden
      */
     toggleArrowButtonActiveState(enable) {
         this.arrowButtonClicked = true;
-        this.activeArrow = enable;
+        this._activeArrow.set(enable);
     }
     /**
      * @hidden
@@ -4963,14 +5040,14 @@ class SplitButtonComponent extends ListButton {
     keydown(event) {
         this.keyDownHandler(event, true);
         if (event.code === Keys.Space) {
-            this._active = true;
+            this._active.set(true);
         }
     }
     /**
      * @hidden
      */
     keyup(event) {
-        this._active = false;
+        this._active.set(false);
         if (event.code !== Keys.Space) {
             this.keyUpHandler(event);
         }
@@ -5036,7 +5113,7 @@ class SplitButtonComponent extends ListButton {
      */
     get anchorAlign() {
         const align = { horizontal: this.popupSettings.align || 'left', vertical: 'bottom' };
-        if (this.direction === 'rtl' && !isPresent(this.popupSettings.align)) {
+        if (this.direction() === 'rtl' && !isPresent(this.popupSettings.align)) {
             align.horizontal = 'right';
         }
         return align;
@@ -5046,7 +5123,7 @@ class SplitButtonComponent extends ListButton {
      */
     get popupAlign() {
         const align = { horizontal: this.popupSettings.align || 'left', vertical: 'top' };
-        if (this.direction === 'rtl' && !isPresent(this.popupSettings.align)) {
+        if (this.direction() === 'rtl' && !isPresent(this.popupSettings.align)) {
             align.horizontal = 'right';
         }
         return align;
@@ -5085,10 +5162,10 @@ class SplitButtonComponent extends ListButton {
         zone.runOutsideAngular(() => {
             this.documentMouseUpSub = this.renderer.listen('document', 'mouseup', () => {
                 if (this.active) {
-                    zone.run(() => this._active = false);
+                    zone.run(() => this._active.set(false));
                 }
                 if (this.activeArrow) {
-                    zone.run(() => this.activeArrow = false);
+                    zone.run(() => this._activeArrow.set(false));
                 }
             });
         });
@@ -5105,8 +5182,8 @@ class SplitButtonComponent extends ListButton {
                 .split('\n')
                 .join('')
                 .trim();
-            if (innerText !== this.buttonText) {
-                this.buttonText = innerText;
+            if (innerText !== this.buttonText()) {
+                this.buttonText.set(innerText);
             }
         }
     }
@@ -5220,11 +5297,13 @@ class SplitButtonComponent extends ListButton {
             </kendo-button-list>
           </ng-template>
           <ng-container #container></ng-container>
-        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedSplitButtonMessagesDirective, selector: "[kendoSplitButtonLocalizedMessages]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ListComponent, selector: "kendo-button-list", inputs: ["data", "textField", "itemTemplate", "size"], outputs: ["onItemClick", "onItemBlur"] }] });
+        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedSplitButtonMessagesDirective, selector: "[kendoSplitButtonLocalizedMessages]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ListComponent, selector: "kendo-button-list", inputs: ["data", "textField", "itemTemplate", "size"], outputs: ["onItemClick", "onItemBlur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SplitButtonComponent, decorators: [{
             type: Component,
             args: [{
+                    selector: 'kendo-splitbutton',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     exportAs: 'kendoSplitButton',
                     providers: [
                         FocusService,
@@ -5241,7 +5320,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                             useExisting: forwardRef(() => SplitButtonComponent)
                         }
                     ],
-                    selector: 'kendo-splitbutton',
                     template: `
         <ng-container kendoSplitButtonLocalizedMessages
           i18n-splitButtonLabel="kendo.splitbutton.splitButtonLabel|The text for the SplitButton aria-label"
@@ -5520,7 +5598,7 @@ class SpeechToTextButtonComponent {
         return this.isDisabled;
     }
     get getDirection() {
-        return this.direction;
+        return this._direction();
     }
     /**
      * @hidden
@@ -5600,8 +5678,8 @@ class SpeechToTextButtonComponent {
         this.renderer = renderer;
         this.ngZone = ngZone;
         validatePackage(packageMetadata);
-        this.direction = localization.rtl ? 'rtl' : 'ltr';
-        this.subs.add(localization.changes.subscribe(({ rtl }) => (this.direction = rtl ? 'rtl' : 'ltr')));
+        this._direction.set(localization.rtl ? 'rtl' : 'ltr');
+        this.subs.add(localization.changes.subscribe(({ rtl }) => this._direction.set(rtl ? 'rtl' : 'ltr')));
         this.element = element.nativeElement;
         this.renderer.addClass(this.element, 'k-button');
     }
@@ -5689,7 +5767,7 @@ class SpeechToTextButtonComponent {
     _fillMode = undefined;
     _themeColor = undefined;
     _focused = false;
-    direction;
+    _direction = signal('', ...(ngDevMode ? [{ debugName: "_direction" }] : []));
     handleClasses(value, input) {
         const elem = this.element;
         const classes = getStylingClasses('button', input, this[input], value);
@@ -5790,11 +5868,13 @@ class SpeechToTextButtonComponent {
             [svgIcon]="buttonSvgIcon">
         </kendo-icon-wrapper>
         <span class="k-button-text"><ng-content></ng-content></span>
-    `, 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.25", ngImport: i0, type: SpeechToTextButtonComponent, decorators: [{
             type: Component,
             args: [{
+                    selector: 'button[kendoSpeechToTextButton]',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     exportAs: 'kendoSpeechToTextButton',
                     providers: [
                         LocalizationService,
@@ -5803,7 +5883,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                             useValue: 'kendo.speechtotextbutton'
                         }
                     ],
-                    selector: 'button[kendoSpeechToTextButton]',
                     template: `
         <kendo-icon-wrapper
             innerCssClass="k-button-icon"
@@ -6204,7 +6283,7 @@ class SmartPasteButtonComponent {
         return this.isDisabled;
     }
     get getDirection() {
-        return this.direction;
+        return this._direction();
     }
     onFocus() {
         this.isFocused = true;
@@ -6248,7 +6327,7 @@ class SmartPasteButtonComponent {
     _fillMode = undefined;
     _themeColor = undefined;
     _focused = false;
-    direction;
+    _direction = signal('', ...(ngDevMode ? [{ debugName: "_direction" }] : []));
     _iconClass;
     _icon = DEFAULT_ICON;
     _svgIcon = DEFAULT_SVG_ICON;
@@ -6262,8 +6341,8 @@ class SmartPasteButtonComponent {
         this.http = http;
         this.controlContainer = controlContainer;
         validatePackage(packageMetadata);
-        this.direction = localization.rtl ? 'rtl' : 'ltr';
-        this.subs.add(localization.changes.subscribe(({ rtl }) => (this.direction = rtl ? 'rtl' : 'ltr')));
+        this._direction.set(localization.rtl ? 'rtl' : 'ltr');
+        this.subs.add(localization.changes.subscribe(({ rtl }) => this._direction.set(rtl ? 'rtl' : 'ltr')));
         this.element = elementRef.nativeElement;
         this.renderer.addClass(this.element, 'k-button');
     }
@@ -6495,11 +6574,13 @@ class SmartPasteButtonComponent {
           <span class="k-button-icon" [ngClass]="iconClass"></span>
         }
         <span class="k-button-text"><ng-content></ng-content></span>
-    `, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SmartPasteButtonComponent, decorators: [{
             type: Component,
             args: [{
+                    selector: 'button[kendoSmartPasteButton]',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     exportAs: 'kendoSmartPasteButton',
                     providers: [
                         LocalizationService,
@@ -6508,7 +6589,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                             useValue: 'kendo.smartpastebutton'
                         }
                     ],
-                    selector: 'button[kendoSmartPasteButton]',
                     standalone: true,
                     imports: [IconWrapperComponent, NgClass],
                     template: `
@@ -6597,12 +6677,13 @@ class SegmentedControlComponent {
     renderer;
     wrapper;
     zone;
+    injector;
     hostClass = true;
     get stretchedClass() {
         return this._layoutMode === 'stretch';
     }
     get direction() {
-        return this._direction;
+        return this._direction();
     }
     hostRole = 'group';
     thumb;
@@ -6664,16 +6745,17 @@ class SegmentedControlComponent {
     _items = [];
     _size;
     _layoutMode = 'compact';
-    _direction;
+    _direction = signal('', ...(ngDevMode ? [{ debugName: "_direction" }] : []));
     subs = new Subscription();
-    constructor(renderer, wrapper, zone, localization) {
+    constructor(renderer, wrapper, zone, injector, localization) {
         this.renderer = renderer;
         this.wrapper = wrapper;
         this.zone = zone;
+        this.injector = injector;
         validatePackage(packageMetadata);
-        this._direction = localization.rtl ? 'rtl' : 'ltr';
+        this._direction.set(localization.rtl ? 'rtl' : 'ltr');
         this.subs.add(localization.changes.subscribe(({ rtl }) => {
-            this._direction = rtl ? 'rtl' : 'ltr';
+            this._direction.set(rtl ? 'rtl' : 'ltr');
         }));
     }
     ngAfterViewInit() {
@@ -6725,7 +6807,7 @@ class SegmentedControlComponent {
         if (!isDocumentAvailable()) {
             return;
         }
-        this.zone.onStable.pipe(take(1)).subscribe(() => {
+        afterNextRender(() => {
             const element = this.wrapper.nativeElement;
             if (!element?.getBoundingClientRect) {
                 return;
@@ -6741,9 +6823,9 @@ class SegmentedControlComponent {
             const right = controlRect.right - itemRect.right;
             this.renderer.setStyle(selectionIndicator, 'left', `${left}px`);
             this.renderer.setStyle(selectionIndicator, 'right', `${right}px`);
-        });
+        }, { injector: this.injector });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SegmentedControlComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SegmentedControlComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Injector }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SegmentedControlComponent, isStandalone: true, selector: "kendo-segmented-control", inputs: { items: "items", layoutMode: "layoutMode", size: "size", selected: "selected" }, outputs: { selectedChange: "selectedChange" }, host: { properties: { "class.k-segmented-control": "this.hostClass", "class.k-segmented-control-stretched": "this.stretchedClass", "attr.dir": "this.direction", "attr.role": "this.hostRole" } }, providers: [
             LocalizationService,
             {
@@ -6820,7 +6902,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         }
     `
                 }]
-        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i1.LocalizationService }], propDecorators: { hostClass: [{
+        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Injector }, { type: i1.LocalizationService }], propDecorators: { hostClass: [{
                 type: HostBinding,
                 args: ['class.k-segmented-control']
             }], stretchedClass: [{