@progress/kendo-angular-buttons 24.2.2 → 25.0.0-develop.12

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';
@@ -34,10 +34,10 @@ class KendoButtonService {
     click(button) {
         this.buttonClicked.next(button);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: KendoButtonService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: KendoButtonService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KendoButtonService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KendoButtonService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: KendoButtonService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KendoButtonService, decorators: [{
             type: Injectable
         }] });
 
@@ -49,8 +49,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1783511255,
-    version: '24.2.2',
+    publishDate: 1785317773,
+    version: '25.0.0-develop.12',
     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();
     }
@@ -536,8 +544,8 @@ class ButtonComponent {
             this.renderer.addClass(elem, themeColorClass.toAdd);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: KendoButtonService, optional: true }, { token: i1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: ButtonComponent, isStandalone: true, selector: "button[kendoButton]", inputs: { arrowIcon: "arrowIcon", toggleable: "toggleable", togglable: "togglable", selected: "selected", tabIndex: "tabIndex", imageUrl: "imageUrl", iconPosition: "iconPosition", iconClass: "iconClass", icon: "icon", disabled: "disabled", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor", svgIcon: "svgIcon" }, outputs: { selectedChange: "selectedChange", click: "click" }, host: { listeners: { "focus": "onFocus()", "blur": "onBlur()" }, properties: { "class.k-icon-button": "this.iconButtonClass", "class.k-disabled": "this.classDisabled", "class.k-selected": "this.classActive", "attr.dir": "this.getDirection" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: KendoButtonService, optional: true }, { token: i1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: ButtonComponent, isStandalone: true, selector: "button[kendoButton]", inputs: { arrowIcon: "arrowIcon", toggleable: "toggleable", togglable: "togglable", selected: "selected", tabIndex: "tabIndex", imageUrl: "imageUrl", iconPosition: "iconPosition", iconClass: "iconClass", icon: "icon", disabled: "disabled", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor", svgIcon: "svgIcon" }, outputs: { selectedChange: "selectedChange", click: "click" }, host: { listeners: { "focus": "onFocus()", "blur": "onBlur()" }, properties: { "class.k-icon-button": "this.iconButtonClass", "class.k-disabled": "this.classDisabled", "class.k-selected": "this.classActive", "attr.dir": "this.getDirection" } }, providers: [
             LocalizationService,
             {
                 provide: L10N_PREFIX,
@@ -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: "19.2.25", ngImport: i0, type: ButtonComponent, decorators: [{
+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: "19.2.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;
@@ -979,8 +988,8 @@ class ButtonGroupComponent {
             return i === index;
         }));
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ButtonGroupComponent, deps: [{ token: KendoButtonService }, { token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: ButtonGroupComponent, isStandalone: true, selector: "kendo-buttongroup", inputs: { disabled: "disabled", selection: "selection", width: "width", tabIndex: "tabIndex", navigable: "navigable" }, outputs: { navigate: "navigate" }, host: { properties: { "class.k-button-group": "this.wrapperClasses", "class.k-disabled": "this.disabledClass", "class.k-button-group-stretched": "this.stretchedClass", "attr.role": "this.role", "attr.dir": "this.dir", "attr.aria-disabled": "this.ariaDisabled", "style.width": "this.wrapperWidth", "attr.tabindex": "this.wrapperTabIndex" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ButtonGroupComponent, deps: [{ token: KendoButtonService }, { token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: ButtonGroupComponent, isStandalone: true, selector: "kendo-buttongroup", inputs: { disabled: "disabled", selection: "selection", width: "width", tabIndex: "tabIndex", navigable: "navigable" }, outputs: { navigate: "navigate" }, host: { properties: { "class.k-button-group": "this.wrapperClasses", "class.k-disabled": "this.disabledClass", "class.k-button-group-stretched": "this.stretchedClass", "attr.role": "this.role", "attr.dir": "this.dir", "attr.aria-disabled": "this.ariaDisabled", "style.width": "this.wrapperWidth", "attr.tabindex": "this.wrapperTabIndex" } }, providers: [
             KendoButtonService,
             LocalizationService,
             {
@@ -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: "19.2.25", ngImport: i0, type: ButtonGroupComponent, decorators: [{
+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: "19.2.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: "19.2.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: "19.2.25", ngImport: i0, type: ChipComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.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: [
+    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: "19.2.25", ngImport: i0, type: ChipComponent, decorators: [{
+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: "19.2.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'];
@@ -1871,8 +1893,8 @@ class ChipListComponent {
             chip.sizeIsSet = false;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ChipListComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: ChipListComponent, isStandalone: true, selector: "kendo-chiplist, kendo-chip-list", inputs: { orientation: "orientation", selection: "selection", size: "size", role: "role", navigable: "navigable" }, outputs: { selectedChange: "selectedChange", remove: "remove" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.k-chip-list": "this.hostClass", "attr.aria-orientation": "this.orientation", "attr.dir": "this.direction", "attr.aria-multiselectable": "this.multiple", "attr.role": "this.role" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ChipListComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: ChipListComponent, isStandalone: true, selector: "kendo-chiplist, kendo-chip-list", inputs: { orientation: "orientation", selection: "selection", size: "size", role: "role", navigable: "navigable" }, outputs: { selectedChange: "selectedChange", remove: "remove" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.k-chip-list": "this.hostClass", "attr.aria-orientation": "this.orientation", "attr.dir": "this.direction", "attr.aria-multiselectable": "this.multiple", "attr.role": "this.role" } }, providers: [
             LocalizationService,
             {
                 provide: L10N_PREFIX,
@@ -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: "19.2.25", ngImport: i0, type: ChipListComponent, decorators: [{
+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>
     `,
@@ -1966,10 +1989,10 @@ class ButtonItemTemplateDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ButtonItemTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: ButtonItemTemplateDirective, isStandalone: true, selector: "[kendoDropDownButtonItemTemplate],[kendoSplitButtonItemTemplate]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ButtonItemTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: ButtonItemTemplateDirective, isStandalone: true, selector: "[kendoDropDownButtonItemTemplate],[kendoSplitButtonItemTemplate]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ButtonItemTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ButtonItemTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoDropDownButtonItemTemplate],[kendoSplitButtonItemTemplate]',
@@ -2003,10 +2026,10 @@ class FocusService {
         this.focusedIndex = index;
         this.onFocus.emit(index);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FocusService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FocusService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FocusService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FocusService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FocusService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FocusService, decorators: [{
             type: Injectable
         }] });
 
@@ -2132,10 +2155,10 @@ class NavigationService {
             return args.current !== args.end ? args.current + args.step : args.end;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: NavigationService, deps: [{ token: NAVIGATION_CONFIG }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: NavigationService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: NavigationService, deps: [{ token: NAVIGATION_CONFIG }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: NavigationService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: NavigationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: NavigationService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
@@ -2148,10 +2171,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
 class PopupContainerService {
     container;
     template;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: PopupContainerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: PopupContainerService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PopupContainerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PopupContainerService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: PopupContainerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PopupContainerService, decorators: [{
             type: Injectable
         }] });
 
@@ -2200,10 +2223,10 @@ class FocusableDirective {
             }
         }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FocusableDirective, deps: [{ token: FocusService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: FocusableDirective, isStandalone: true, selector: "[kendoButtonFocusable]", inputs: { index: "index" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FocusableDirective, deps: [{ token: FocusService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: FocusableDirective, isStandalone: true, selector: "[kendoButtonFocusable]", inputs: { index: "index" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FocusableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FocusableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoButtonFocusable]',
@@ -2252,8 +2275,8 @@ class ListComponent {
     onBlur() {
         this.onItemBlur.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: ListComponent, isStandalone: true, selector: "kendo-button-list", inputs: { data: "data", textField: "textField", itemTemplate: "itemTemplate", size: "size" }, outputs: { onItemClick: "onItemClick", onItemBlur: "onItemBlur" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: ListComponent, isStandalone: true, selector: "kendo-button-list", inputs: { data: "data", textField: "textField", itemTemplate: "itemTemplate", size: "size" }, outputs: { onItemClick: "onItemClick", onItemBlur: "onItemBlur" }, ngImport: i0, template: `
         <ul class="k-menu-group" role="list" [ngClass]="sizeClass">
           @for (dataItem of data; track dataItem; let index = $index; let isFirst = $first; let isLast = $last) {
             <li kendoButtonFocusable
@@ -2307,7 +2330,7 @@ class ListComponent {
         </ul>
         `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoButtonFocusable]", inputs: ["index"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ListComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-button-list',
@@ -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;
@@ -2787,12 +2810,13 @@ class ListButton extends MultiTabStop {
             this.isClosePrevented = false;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.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: "19.2.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 ɵ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, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ListButton, decorators: [{
+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));
                 }
             });
         });
@@ -3098,8 +3140,8 @@ class DropDownButtonComponent extends ListButton {
         }
         super.ngOnDestroy();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: DropDownButtonComponent, 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 }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: DropDownButtonComponent, isStandalone: true, selector: "kendo-dropdownbutton", inputs: { arrowIcon: "arrowIcon", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", imageUrl: "imageUrl", textField: "textField", data: "data", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor", buttonAttributes: "buttonAttributes" }, outputs: { itemClick: "itemClick", onFocus: "focus", onBlur: "blur" }, host: { listeners: { "keydown": "keydown($event)", "keyup": "keyup($event)", "mousedown": "mousedown($event)", "mouseup": "mouseup($event)" }, properties: { "class.k-focus": "this.focused", "style.display": "this.hostDisplayStyle", "attr.dir": "this.dir" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DropDownButtonComponent, 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 }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: DropDownButtonComponent, isStandalone: true, selector: "kendo-dropdownbutton", inputs: { arrowIcon: "arrowIcon", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", imageUrl: "imageUrl", textField: "textField", data: "data", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor", buttonAttributes: "buttonAttributes" }, outputs: { itemClick: "itemClick", onFocus: "focus", onBlur: "blur" }, host: { listeners: { "keydown": "keydown($event)", "keyup": "keyup($event)", "mousedown": "mousedown($event)", "mouseup": "mouseup($event)" }, properties: { "class.k-focus": "this.focused", "style.display": "this.hostDisplayStyle", "attr.dir": "this.dir" } }, providers: [
             FocusService,
             NavigationService,
             NAVIGATION_SETTINGS_PROVIDER$2,
@@ -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: "19.2.25", ngImport: i0, type: DropDownButtonComponent, decorators: [{
+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: "19.2.25", ngImpo
                         },
                         PopupContainerService
                     ],
-                    selector: 'kendo-dropdownbutton',
                     template: `
         <button kendoButton #button
             type="button"
@@ -3360,10 +3403,10 @@ class DialItemTemplateDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: DialItemTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: DialItemTemplateDirective, isStandalone: true, selector: "[kendoDialItemTemplate]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DialItemTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: DialItemTemplateDirective, isStandalone: true, selector: "[kendoDialItemTemplate]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: DialItemTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DialItemTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoDialItemTemplate]',
@@ -3393,10 +3436,10 @@ class FloatingActionButtonTemplateDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FloatingActionButtonTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: FloatingActionButtonTemplateDirective, isStandalone: true, selector: "[kendoFloatingActionButtonTemplate]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FloatingActionButtonTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: FloatingActionButtonTemplateDirective, isStandalone: true, selector: "[kendoFloatingActionButtonTemplate]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FloatingActionButtonTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FloatingActionButtonTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoFloatingActionButtonTemplate]',
@@ -3467,8 +3510,8 @@ class DialItemComponent {
         };
         return directions[dir][align];
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: DialItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: DialItemComponent, isStandalone: true, selector: "[kendoDialItem]", inputs: { cssClass: "cssClass", cssStyle: "cssStyle", isFocused: "isFocused", index: "index", item: "item", dialItemTemplate: "dialItemTemplate", align: "align" }, host: { properties: { "class.k-fab-item": "this.hostClass", "attr.role": "this.role", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "attr.title": "this.title", "attr.aria-label": "this.title", "attr.data-fab-item-index": "this.indexAttr" } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DialItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: DialItemComponent, isStandalone: true, selector: "[kendoDialItem]", inputs: { cssClass: "cssClass", cssStyle: "cssStyle", isFocused: "isFocused", index: "index", item: "item", dialItemTemplate: "dialItemTemplate", align: "align" }, host: { properties: { "class.k-fab-item": "this.hostClass", "attr.role": "this.role", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "attr.title": "this.title", "attr.aria-label": "this.title", "attr.data-fab-item-index": "this.indexAttr" } }, ngImport: i0, template: `
         @if (dialItemTemplate) {
           <ng-template
             [ngTemplateOutlet]="dialItemTemplate"
@@ -3491,7 +3534,7 @@ class DialItemComponent {
         }
         `, 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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: DialItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DialItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: '[kendoDialItem]',
@@ -3585,8 +3628,8 @@ class DialListComponent {
     ngOnDestroy() {
         this.subscriptions.unsubscribe();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: DialListComponent, deps: [{ token: FocusService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: DialListComponent, isStandalone: true, selector: "[kendoDialList]", inputs: { dialItems: "dialItems", dialItemTemplate: "dialItemTemplate", align: "align" }, host: { properties: { "class.k-fab-items": "this.hostClass", "class.k-fab-items-bottom": "this.bottomClass", "class.k-fab-items-top": "this.topClass" } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DialListComponent, deps: [{ token: FocusService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: DialListComponent, isStandalone: true, selector: "[kendoDialList]", inputs: { dialItems: "dialItems", dialItemTemplate: "dialItemTemplate", align: "align" }, host: { properties: { "class.k-fab-items": "this.hostClass", "class.k-fab-items-bottom": "this.bottomClass", "class.k-fab-items-top": "this.topClass" } }, ngImport: i0, template: `
         @for (item of dialItems; track item; let idx = $index) {
           <li
             kendoButtonFocusable
@@ -3603,7 +3646,7 @@ class DialListComponent {
         }
         `, isInline: true, dependencies: [{ kind: "directive", type: FocusableDirective, selector: "[kendoButtonFocusable]", inputs: ["index"] }, { kind: "component", type: DialItemComponent, selector: "[kendoDialItem]", inputs: ["cssClass", "cssStyle", "isFocused", "index", "item", "dialItemTemplate", "align"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: DialListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DialListComponent, decorators: [{
             type: Component,
             args: [{
                     selector: '[kendoDialList]',
@@ -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,8 +4386,8 @@ class FloatingActionButtonComponent {
         }
         return DEFAULT_DURATION;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.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 ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.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: [
+    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,
             NAVIGATION_SETTINGS_PROVIDER$1,
@@ -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: "19.2.25", ngImport: i0, type: FloatingActionButtonComponent, decorators: [{
+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: "19.2.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,15 +4633,27 @@ 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;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: Messages, isStandalone: true, selector: "kendo-splitbutton-messages-base", inputs: { splitButtonLabel: "splitButtonLabel", toggleButtonLabel: "toggleButtonLabel" }, usesInheritance: true, ngImport: i0 });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: Messages, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: Messages, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kendo-splitbutton-messages-base'
@@ -4615,13 +4677,13 @@ class SplitButtonCustomMessagesComponent extends Messages {
     get override() {
         return true;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SplitButtonCustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: SplitButtonCustomMessagesComponent, isStandalone: true, selector: "kendo-splitbutton-messages", providers: [{
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SplitButtonCustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: SplitButtonCustomMessagesComponent, isStandalone: true, selector: "kendo-splitbutton-messages", providers: [{
                 provide: Messages,
                 useExisting: forwardRef(() => SplitButtonCustomMessagesComponent)
             }], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SplitButtonCustomMessagesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SplitButtonCustomMessagesComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [{
@@ -4643,15 +4705,15 @@ class LocalizedSplitButtonMessagesDirective extends Messages {
         super();
         this.service = service;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: LocalizedSplitButtonMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: LocalizedSplitButtonMessagesDirective, isStandalone: true, selector: "[kendoSplitButtonLocalizedMessages]", providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: LocalizedSplitButtonMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: LocalizedSplitButtonMessagesDirective, isStandalone: true, selector: "[kendoSplitButtonLocalizedMessages]", providers: [
             {
                 provide: Messages,
                 useExisting: forwardRef(() => LocalizedSplitButtonMessagesDirective)
             }
         ], usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: LocalizedSplitButtonMessagesDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: LocalizedSplitButtonMessagesDirective, decorators: [{
             type: Directive,
             args: [{
                     providers: [
@@ -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);
             }
         }
     }
@@ -5136,8 +5213,8 @@ class SplitButtonComponent extends ListButton {
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SplitButtonComponent, deps: [{ token: FocusService }, { token: NavigationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i3.PopupService }, { token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: PopupContainerService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: SplitButtonComponent, isStandalone: true, selector: "kendo-splitbutton", inputs: { text: "text", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", type: "type", imageUrl: "imageUrl", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor", disabled: "disabled", popupSettings: "popupSettings", tabIndex: "tabIndex", textField: "textField", data: "data", arrowButtonClass: "arrowButtonClass", arrowButtonIcon: "arrowButtonIcon", arrowButtonSvgIcon: "arrowButtonSvgIcon", buttonAttributes: "buttonAttributes" }, outputs: { buttonClick: "buttonClick", itemClick: "itemClick", onFocus: "focus", onBlur: "blur", open: "open", close: "close" }, host: { listeners: { "keydown": "keydown($event)", "keyup": "keyup($event)" }, properties: { "class.k-focus": "this.isFocused", "class.k-split-button": "this.widgetClasses", "class.k-button-group": "this.widgetClasses", "attr.dir": "this.dir" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SplitButtonComponent, deps: [{ token: FocusService }, { token: NavigationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i3.PopupService }, { token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: PopupContainerService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SplitButtonComponent, isStandalone: true, selector: "kendo-splitbutton", inputs: { text: "text", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", type: "type", imageUrl: "imageUrl", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor", disabled: "disabled", popupSettings: "popupSettings", tabIndex: "tabIndex", textField: "textField", data: "data", arrowButtonClass: "arrowButtonClass", arrowButtonIcon: "arrowButtonIcon", arrowButtonSvgIcon: "arrowButtonSvgIcon", buttonAttributes: "buttonAttributes" }, outputs: { buttonClick: "buttonClick", itemClick: "itemClick", onFocus: "focus", onBlur: "blur", open: "open", close: "close" }, host: { listeners: { "keydown": "keydown($event)", "keyup": "keyup($event)" }, properties: { "class.k-focus": "this.isFocused", "class.k-split-button": "this.widgetClasses", "class.k-button-group": "this.widgetClasses", "attr.dir": "this.dir" } }, providers: [
             FocusService,
             NavigationService,
             NAVIGATION_SETTINGS_PROVIDER,
@@ -5154,7 +5231,7 @@ class SplitButtonComponent extends ListButton {
         ], queries: [{ propertyName: "itemTemplate", first: true, predicate: ButtonItemTemplateDirective, descendants: true }], exportAs: ["kendoSplitButton"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoSplitButtonLocalizedMessages
           i18n-splitButtonLabel="kendo.splitbutton.splitButtonLabel|The text for the SplitButton aria-label"
-          splitButtonLabel="{{ '{buttonText} splitbutton' }}"
+          splitButtonLabel="[[buttonText]] splitbutton"
           i18n-toggleButtonLabel="kendo.splitbutton.toggleButtonLabel|The text for the SplitButton toggle button aria-label"
           toggleButtonLabel="Toggle options"
         ></ng-container>
@@ -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: "19.2.25", ngImport: i0, type: SplitButtonComponent, decorators: [{
+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,11 +5320,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                             useExisting: forwardRef(() => SplitButtonComponent)
                         }
                     ],
-                    selector: 'kendo-splitbutton',
                     template: `
         <ng-container kendoSplitButtonLocalizedMessages
           i18n-splitButtonLabel="kendo.splitbutton.splitButtonLabel|The text for the SplitButton aria-label"
-          splitButtonLabel="{{ '{buttonText} splitbutton' }}"
+          splitButtonLabel="[[buttonText]] splitbutton"
           i18n-toggleButtonLabel="kendo.splitbutton.toggleButtonLabel|The text for the SplitButton toggle button aria-label"
           toggleButtonLabel="Toggle options"
         ></ng-container>
@@ -5520,7 +5598,7 @@ class SpeechToTextButtonComponent {
         return this.isDisabled;
     }
     get getDirection() {
-        return this.direction;
+        return this._direction();
     }
     /**
      * @hidden
@@ -5600,15 +5678,20 @@ 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');
     }
     /**
      * Indicates whether the button is actively listening for incoming audio.
      */
-    isListening = false;
+    get isListening() {
+        return this._isListening();
+    }
+    set isListening(value) {
+        this._isListening.set(value);
+    }
     /**
      * Indicates whether web speech functionality is supported.
      */
@@ -5653,7 +5736,7 @@ class SpeechToTextButtonComponent {
                 }
                 const result = asyncFactory();
                 const observable = this.toObservable(result);
-                observable.pipe(take(1)).subscribe(() => this.isListening = !this.isListening);
+                observable.pipe(take(1)).subscribe(() => this._isListening.set(!this._isListening()));
             });
         }
     }
@@ -5688,8 +5771,9 @@ class SpeechToTextButtonComponent {
     _rounded = undefined;
     _fillMode = undefined;
     _themeColor = undefined;
+    _isListening = signal(false, ...(ngDevMode ? [{ debugName: "_isListening" }] : []));
     _focused = false;
-    direction;
+    _direction = signal('', ...(ngDevMode ? [{ debugName: "_direction" }] : []));
     handleClasses(value, input) {
         const elem = this.element;
         const classes = getStylingClasses('button', input, this[input], value);
@@ -5705,13 +5789,13 @@ class SpeechToTextButtonComponent {
     }
     handleStart() {
         this.ngZone.run(() => {
-            this.isListening = true;
+            this._isListening.set(true);
             this.start.emit();
         });
     }
     handleEnd() {
         this.ngZone.run(() => {
-            this.isListening = false;
+            this._isListening.set(false);
             this.end.emit();
         });
     }
@@ -5756,7 +5840,7 @@ class SpeechToTextButtonComponent {
             this.speechRecognition.stop();
             this.speechRecognition.destroy();
             this.speechRecognition = null;
-            this.isListening = false;
+            this._isListening.set(false);
         }
     }
     createWebSpeech() {
@@ -5776,8 +5860,8 @@ class SpeechToTextButtonComponent {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SpeechToTextButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: SpeechToTextButtonComponent, isStandalone: true, selector: "button[kendoSpeechToTextButton]", inputs: { disabled: "disabled", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor", integrationMode: "integrationMode", lang: "lang", continuous: "continuous", interimResults: "interimResults", maxAlternatives: "maxAlternatives" }, outputs: { start: "start", end: "end", result: "result", error: "error", click: "click" }, host: { listeners: { "focus": "onFocus()", "blur": "onBlur()" }, properties: { "class.k-icon-button": "this.iconButtonClass", "class.k-listening": "this.listeningClass", "class.k-speech-to-text-button": "this.speechToTextButtonClass", "class.k-disabled": "this.classDisabled", "attr.dir": "this.getDirection" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SpeechToTextButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: SpeechToTextButtonComponent, isStandalone: true, selector: "button[kendoSpeechToTextButton]", inputs: { disabled: "disabled", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor", integrationMode: "integrationMode", lang: "lang", continuous: "continuous", interimResults: "interimResults", maxAlternatives: "maxAlternatives" }, outputs: { start: "start", end: "end", result: "result", error: "error", click: "click" }, host: { listeners: { "focus": "onFocus()", "blur": "onBlur()" }, properties: { "class.k-icon-button": "this.iconButtonClass", "class.k-listening": "this.listeningClass", "class.k-speech-to-text-button": "this.speechToTextButtonClass", "class.k-disabled": "this.classDisabled", "attr.dir": "this.getDirection" } }, providers: [
             LocalizationService,
             {
                 provide: L10N_PREFIX,
@@ -5790,11 +5874,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: "19.2.25", ngImport: i0, type: SpeechToTextButtonComponent, decorators: [{
+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 +5889,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                             useValue: 'kendo.speechtotextbutton'
                         }
                     ],
-                    selector: 'button[kendoSpeechToTextButton]',
                     template: `
         <kendo-icon-wrapper
             innerCssClass="k-button-icon"
@@ -6204,7 +6289,7 @@ class SmartPasteButtonComponent {
         return this.isDisabled;
     }
     get getDirection() {
-        return this.direction;
+        return this._direction();
     }
     onFocus() {
         this.isFocused = true;
@@ -6248,7 +6333,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 +6347,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');
     }
@@ -6295,7 +6380,7 @@ class SmartPasteButtonComponent {
      * Reads clipboard content and sends it to the AI service for processing.
      */
     async paste() {
-        if (!this.nativeForm) {
+        if (!this.nativeForm || this.isDisabled) {
             return;
         }
         if (this.smartPasteBusy) {
@@ -6472,8 +6557,8 @@ class SmartPasteButtonComponent {
             this.currentRequestSubscription = null;
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SmartPasteButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i0.NgZone }, { token: i2.HttpClient }, { token: i3$1.ControlContainer, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: SmartPasteButtonComponent, isStandalone: true, selector: "button[kendoSmartPasteButton]", inputs: { formFields: "formFields", disabled: "disabled", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor", svgIcon: "svgIcon", imageUrl: "imageUrl", iconClass: "iconClass", icon: "icon", requestUrl: "requestUrl", requestOptions: "requestOptions", smartPasteFormFields: "smartPasteFormFields" }, outputs: { requestStart: "requestStart", requestEnd: "requestEnd", requestCancel: "requestCancel" }, host: { listeners: { "focus": "onFocus()", "blur": "onBlur()" }, properties: { "class.k-icon-button": "this.iconButtonClass", "class.k-disabled": "this.classDisabled", "attr.dir": "this.getDirection" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SmartPasteButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i0.NgZone }, { token: i2.HttpClient }, { token: i3$1.ControlContainer, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SmartPasteButtonComponent, isStandalone: true, selector: "button[kendoSmartPasteButton]", inputs: { formFields: "formFields", disabled: "disabled", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor", svgIcon: "svgIcon", imageUrl: "imageUrl", iconClass: "iconClass", icon: "icon", requestUrl: "requestUrl", requestOptions: "requestOptions", smartPasteFormFields: "smartPasteFormFields" }, outputs: { requestStart: "requestStart", requestEnd: "requestEnd", requestCancel: "requestCancel" }, host: { listeners: { "focus": "onFocus()", "blur": "onBlur()" }, properties: { "class.k-icon-button": "this.iconButtonClass", "class.k-disabled": "this.classDisabled", "attr.dir": "this.getDirection" } }, providers: [
             LocalizationService,
             {
                 provide: L10N_PREFIX,
@@ -6495,11 +6580,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: "19.2.25", ngImport: i0, type: SmartPasteButtonComponent, decorators: [{
+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 +6595,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                             useValue: 'kendo.smartpastebutton'
                         }
                     ],
-                    selector: 'button[kendoSmartPasteButton]',
                     standalone: true,
                     imports: [IconWrapperComponent, NgClass],
                     template: `
@@ -6597,12 +6683,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 +6751,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 +6813,7 @@ class SegmentedControlComponent {
         if (!isDocumentAvailable()) {
             return;
         }
-        this.zone.onStable.pipe(take(1)).subscribe(() => {
+        afterNextRender(() => {
             const element = this.wrapper.nativeElement;
             if (!element?.getBoundingClientRect) {
                 return;
@@ -6741,10 +6829,10 @@ 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: "19.2.25", ngImport: i0, type: SegmentedControlComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.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: [
+    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,
             {
                 provide: L10N_PREFIX,
@@ -6778,7 +6866,7 @@ class SegmentedControlComponent {
         }
     `, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SegmentedControlComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SegmentedControlComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-segmented-control',
@@ -6820,7 +6908,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.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: [{
@@ -7071,11 +7159,11 @@ const KENDO_BUTTONS = [
  * ```
  */
 class ButtonGroupModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ButtonGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.25", ngImport: i0, type: ButtonGroupModule, imports: [ButtonComponent, ButtonGroupComponent], exports: [ButtonComponent, ButtonGroupComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ButtonGroupModule, providers: [IconsService], imports: [ButtonComponent] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ButtonGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: ButtonGroupModule, imports: [ButtonComponent, ButtonGroupComponent], exports: [ButtonComponent, ButtonGroupComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ButtonGroupModule, providers: [IconsService], imports: [ButtonComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ButtonGroupModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ButtonGroupModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [...KENDO_BUTTONGROUP],
@@ -7107,11 +7195,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
  * ```
  */
 class ButtonModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.25", ngImport: i0, type: ButtonModule, imports: [ButtonComponent], exports: [ButtonComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ButtonModule, providers: [IconsService], imports: [ButtonComponent] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: ButtonModule, imports: [ButtonComponent], exports: [ButtonComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ButtonModule, providers: [IconsService], imports: [ButtonComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ButtonModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ButtonModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [ButtonComponent],
@@ -7143,11 +7231,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
  * ```
  */
 class ButtonsModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ButtonsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.25", ngImport: i0, type: ButtonsModule, imports: [ButtonComponent, ButtonComponent, ButtonGroupComponent, DropDownButtonComponent, ButtonItemTemplateDirective, ChipComponent, ChipComponent, ChipListComponent, FloatingActionButtonComponent, DialItemTemplateDirective, FloatingActionButtonTemplateDirective, SplitButtonComponent, SplitButtonCustomMessagesComponent, i12.ToggleButtonTabStopDirective, ButtonItemTemplateDirective, SpeechToTextButtonComponent, SmartPasteButtonComponent, SegmentedControlComponent, i12.ToggleButtonTabStopDirective], exports: [ButtonComponent, ButtonComponent, ButtonGroupComponent, DropDownButtonComponent, ButtonItemTemplateDirective, ChipComponent, ChipComponent, ChipListComponent, FloatingActionButtonComponent, DialItemTemplateDirective, FloatingActionButtonTemplateDirective, SplitButtonComponent, SplitButtonCustomMessagesComponent, i12.ToggleButtonTabStopDirective, ButtonItemTemplateDirective, SpeechToTextButtonComponent, SmartPasteButtonComponent, SegmentedControlComponent, i12.ToggleButtonTabStopDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ButtonsModule, providers: [IconsService, PopupService, ResizeBatchService], imports: [ButtonComponent, ButtonComponent, DropDownButtonComponent, ChipComponent, ChipComponent, FloatingActionButtonComponent, SplitButtonComponent, SpeechToTextButtonComponent, SmartPasteButtonComponent, SegmentedControlComponent] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ButtonsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: ButtonsModule, imports: [ButtonComponent, ButtonComponent, ButtonGroupComponent, DropDownButtonComponent, ButtonItemTemplateDirective, ChipComponent, ChipComponent, ChipListComponent, FloatingActionButtonComponent, DialItemTemplateDirective, FloatingActionButtonTemplateDirective, SplitButtonComponent, SplitButtonCustomMessagesComponent, i12.ToggleButtonTabStopDirective, ButtonItemTemplateDirective, SpeechToTextButtonComponent, SmartPasteButtonComponent, SegmentedControlComponent, i12.ToggleButtonTabStopDirective], exports: [ButtonComponent, ButtonComponent, ButtonGroupComponent, DropDownButtonComponent, ButtonItemTemplateDirective, ChipComponent, ChipComponent, ChipListComponent, FloatingActionButtonComponent, DialItemTemplateDirective, FloatingActionButtonTemplateDirective, SplitButtonComponent, SplitButtonCustomMessagesComponent, i12.ToggleButtonTabStopDirective, ButtonItemTemplateDirective, SpeechToTextButtonComponent, SmartPasteButtonComponent, SegmentedControlComponent, i12.ToggleButtonTabStopDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ButtonsModule, providers: [IconsService, PopupService, ResizeBatchService], imports: [ButtonComponent, ButtonComponent, DropDownButtonComponent, ChipComponent, ChipComponent, FloatingActionButtonComponent, SplitButtonComponent, SpeechToTextButtonComponent, SmartPasteButtonComponent, SegmentedControlComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ButtonsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ButtonsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...KENDO_BUTTONS, ...KENDO_TOGGLEBUTTONTABSTOP],
@@ -7167,11 +7255,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
  * - `SplitButtonCustomMessagesComponent`&mdash;The SplitButton custom messages component class.
  */
 class SplitButtonModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SplitButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.25", ngImport: i0, type: SplitButtonModule, imports: [SplitButtonComponent, SplitButtonCustomMessagesComponent, i12.ToggleButtonTabStopDirective, ButtonItemTemplateDirective, i12.ToggleButtonTabStopDirective], exports: [SplitButtonComponent, SplitButtonCustomMessagesComponent, i12.ToggleButtonTabStopDirective, ButtonItemTemplateDirective, i12.ToggleButtonTabStopDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SplitButtonModule, providers: [IconsService, PopupService, ResizeBatchService], imports: [SplitButtonComponent] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SplitButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: SplitButtonModule, imports: [SplitButtonComponent, SplitButtonCustomMessagesComponent, i12.ToggleButtonTabStopDirective, ButtonItemTemplateDirective, i12.ToggleButtonTabStopDirective], exports: [SplitButtonComponent, SplitButtonCustomMessagesComponent, i12.ToggleButtonTabStopDirective, ButtonItemTemplateDirective, i12.ToggleButtonTabStopDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SplitButtonModule, providers: [IconsService, PopupService, ResizeBatchService], imports: [SplitButtonComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SplitButtonModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SplitButtonModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [...KENDO_SPLITBUTTON, ...KENDO_TOGGLEBUTTONTABSTOP],
@@ -7206,11 +7294,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
  * ```
  */
 class DropDownButtonModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: DropDownButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.25", ngImport: i0, type: DropDownButtonModule, imports: [DropDownButtonComponent, ButtonItemTemplateDirective], exports: [DropDownButtonComponent, ButtonItemTemplateDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: DropDownButtonModule, providers: [IconsService, PopupService, ResizeBatchService], imports: [DropDownButtonComponent] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DropDownButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: DropDownButtonModule, imports: [DropDownButtonComponent, ButtonItemTemplateDirective], exports: [DropDownButtonComponent, ButtonItemTemplateDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DropDownButtonModule, providers: [IconsService, PopupService, ResizeBatchService], imports: [DropDownButtonComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: DropDownButtonModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DropDownButtonModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [...KENDO_DROPDOWNBUTTON],
@@ -7242,11 +7330,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
  * ```
  */
 class ChipModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ChipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.25", ngImport: i0, type: ChipModule, imports: [ChipComponent, ChipListComponent], exports: [ChipComponent, ChipListComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ChipModule, providers: [IconsService], imports: [ChipComponent] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ChipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: ChipModule, imports: [ChipComponent, ChipListComponent], exports: [ChipComponent, ChipListComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ChipModule, providers: [IconsService], imports: [ChipComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ChipModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ChipModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [...KENDO_CHIPLIST],
@@ -7277,11 +7365,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
  * ```
  */
 class FloatingActionButtonModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FloatingActionButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.25", ngImport: i0, type: FloatingActionButtonModule, imports: [FloatingActionButtonComponent, DialItemTemplateDirective, FloatingActionButtonTemplateDirective], exports: [FloatingActionButtonComponent, DialItemTemplateDirective, FloatingActionButtonTemplateDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FloatingActionButtonModule, providers: [IconsService, PopupService, ResizeBatchService], imports: [FloatingActionButtonComponent] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FloatingActionButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: FloatingActionButtonModule, imports: [FloatingActionButtonComponent, DialItemTemplateDirective, FloatingActionButtonTemplateDirective], exports: [FloatingActionButtonComponent, DialItemTemplateDirective, FloatingActionButtonTemplateDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FloatingActionButtonModule, providers: [IconsService, PopupService, ResizeBatchService], imports: [FloatingActionButtonComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FloatingActionButtonModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FloatingActionButtonModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [...KENDO_FLOATINGACTIONBUTTON],
@@ -7300,11 +7388,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
  * - `SpeechToTextButtonComponent`&mdash;The SpeechToTextButton component class.
  */
 class SpeechToTextButtonModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SpeechToTextButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.25", ngImport: i0, type: SpeechToTextButtonModule, imports: [SpeechToTextButtonComponent], exports: [SpeechToTextButtonComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SpeechToTextButtonModule, providers: [IconsService], imports: [KENDO_SPEECHTOTEXTBUTTON] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SpeechToTextButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: SpeechToTextButtonModule, imports: [SpeechToTextButtonComponent], exports: [SpeechToTextButtonComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SpeechToTextButtonModule, providers: [IconsService], imports: [KENDO_SPEECHTOTEXTBUTTON] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SpeechToTextButtonModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SpeechToTextButtonModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [...KENDO_SPEECHTOTEXTBUTTON],
@@ -7330,11 +7418,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
  * ```
  */
 class SmartPasteButtonModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SmartPasteButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.25", ngImport: i0, type: SmartPasteButtonModule, imports: [SmartPasteButtonComponent], exports: [SmartPasteButtonComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SmartPasteButtonModule, imports: [SmartPasteButtonComponent] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SmartPasteButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: SmartPasteButtonModule, imports: [SmartPasteButtonComponent], exports: [SmartPasteButtonComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SmartPasteButtonModule, imports: [SmartPasteButtonComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SmartPasteButtonModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SmartPasteButtonModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [SmartPasteButtonComponent],
@@ -7352,11 +7440,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
  * - `SegmentedControlComponent`&mdash;The SegmentedControl component class.
  */
 class SegmentedControlModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SegmentedControlModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.25", ngImport: i0, type: SegmentedControlModule, imports: [SegmentedControlComponent], exports: [SegmentedControlComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SegmentedControlModule, providers: [IconsService], imports: [KENDO_SEGMENTEDCONTROL] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SegmentedControlModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: SegmentedControlModule, imports: [SegmentedControlComponent], exports: [SegmentedControlComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SegmentedControlModule, providers: [IconsService], imports: [KENDO_SEGMENTEDCONTROL] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SegmentedControlModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SegmentedControlModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [...KENDO_SEGMENTEDCONTROL],