@progress/kendo-angular-dropdowns 25.1.0-develop.8 → 25.1.0

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

@@ -3,20 +3,20 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
-import { EventEmitter, Output, HostBinding, Input, Component, Directive, Injectable, HostListener, afterNextRender, ViewChild, ViewChildren, forwardRef, isDevMode, ViewContainerRef, ContentChild, ContentChildren, signal, ChangeDetectionStrategy, NgModule } from '@angular/core';
+import { EventEmitter, Output, HostBinding, Input, Component, Directive, Injectable, HostListener, afterNextRender, ViewChild, ViewChildren, signal, forwardRef, isDevMode, ViewContainerRef, ContentChild, ChangeDetectionStrategy, runInInjectionContext, ContentChildren, NgModule } from '@angular/core';
 import * as i10 from '@progress/kendo-angular-common';
 import { isDocumentAvailable, isObjectPresent, removeHTMLAttributes, parseAttributes, isSafari, normalizeKeys, Keys, setHTMLAttributes, replaceMessagePlaceholder, isChanged, TemplateContextDirective, ResizeSensorComponent, closest as closest$1, hasFocusableParent, parseCSSClassNames, isControlRequired, guid, hasObservers, SeparatorComponent, SuffixTemplateDirective, PrefixTemplateDirective, KendoInput, KENDO_WEBMCP_HOST, provideComponentName, MultiTabStop, anyChanged, EventsOutsideAngularDirective, scrollbarWidth, ToggleButtonTabStopDirective, ResizeBatchService, KENDO_ADORNMENTS, KENDO_TOGGLEBUTTONTABSTOP } from '@progress/kendo-angular-common';
 export { PrefixTemplateDirective, SeparatorComponent, SuffixTemplateDirective, ToggleButtonTabStopDirective } from '@progress/kendo-angular-common';
 import * as i7 from '@progress/kendo-angular-utils';
 import { AdaptiveService } from '@progress/kendo-angular-utils';
 import * as i8 from '@angular/forms';
-import { NgControl, NG_VALUE_ACCESSOR, ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { NgControl, NG_VALUE_ACCESSOR, TouchedChangeEvent, ReactiveFormsModule, FormsModule } from '@angular/forms';
 import { validatePackage } from '@progress/kendo-licensing';
 import { getter as getter$1, touchEnabled, pointers } from '@progress/kendo-common';
 import * as i1 from '@progress/kendo-angular-l10n';
 import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { Subscription, merge, fromEvent, Subject, of, interval } from 'rxjs';
-import { map, switchMap, take, auditTime, tap, filter, partition, throttleTime, catchError, skipWhile, concatMap, takeUntil, debounceTime } from 'rxjs/operators';
+import { map, auditTime, tap, take, filter, partition, throttleTime, catchError, skipWhile, concatMap, takeUntil, debounceTime } from 'rxjs/operators';
 import * as i2 from '@progress/kendo-angular-popup';
 import { PopupService } from '@progress/kendo-angular-popup';
 import { NgStyle, NgClass, NgTemplateOutlet } from '@angular/common';
@@ -37,8 +37,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1787574795,
-    version: '25.1.0-develop.8',
+    publishDate: 1788864937,
+    version: '25.1.0',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -403,7 +403,7 @@ const isTruthy = (value) => !!value;
  * @hidden
  */
 const setListBoxAriaLabelledBy = (optionsList, element, renderer) => {
-    const listBox = optionsList.wrapper.nativeElement.querySelector('kendo-list ul');
+    const listBox = optionsList?.wrapper.nativeElement.querySelector('kendo-list ul');
     const ariaLabel = element.nativeElement.getAttribute('aria-labelledby') || element.nativeElement.getAttribute('data-kendo-label-id');
     if (ariaLabel) {
         renderer.setAttribute(listBox, 'aria-labelledby', ariaLabel);
@@ -2059,11 +2059,10 @@ class ListComponent {
         this.renderer = renderer;
         this.localization = localization;
         this.injector = injector;
-        this.selectSubscription = merge(this.selectionService.onSelect.pipe(map((args) => args.indices[0])), this.selectionService.onFocus)
-            .pipe(
-        // handle only the very last onSelect/onFocus emission
-        switchMap(event => this.zone.onStable.pipe(take(1), map(() => event))))
-            .subscribe(this.scrollToItem.bind(this));
+        this.selectSubscription = merge(this.selectionService.onSelect.pipe(map((args) => args.indices[0])), this.selectionService.onFocus).subscribe((index) => {
+            this.scrollToItem(index);
+            this.cdr.markForCheck();
+        });
         this.prepareClasses();
         this.initSelectAllCheckboxState();
     }
@@ -3523,11 +3522,21 @@ class Messages extends ComponentMessages {
     /**
      * The text displayed in the popup when there are no items.
      */
-    noDataText;
+    set noDataText(value) {
+        this._noDataText.set(value);
+    }
+    get noDataText() {
+        return this._noDataText();
+    }
     /**
      * The title of the clear button.
      */
-    clearTitle;
+    set clearTitle(value) {
+        this._clearTitle.set(value);
+    }
+    get clearTitle() {
+        return this._clearTitle();
+    }
     /**
      * The text of the Select All item in the popup.
      */
@@ -3535,33 +3544,89 @@ class Messages extends ComponentMessages {
     /**
      * The text of the Check All checkbox label in the tree popup.
      */
-    checkAllText;
+    set checkAllText(value) {
+        this._checkAllText.set(value);
+    }
+    get checkAllText() {
+        return this._checkAllText();
+    }
     /**
       * The text set as aria-label on the select button. Available for DropDownList, ComboBox, MultiColumnComboBox, and DropDownTree.
      */
-    selectButtonText;
+    set selectButtonText(value) {
+        this._selectButtonText.set(value);
+    }
+    get selectButtonText() {
+        return this._selectButtonText();
+    }
     /**
       * The text set as aria-label on the list filter input. Available for DropDownList, DropDownTree, and MultiSelectTree.
      */
-    filterInputLabel;
+    set filterInputLabel(value) {
+        this._filterInputLabel.set(value);
+    }
+    get filterInputLabel() {
+        return this._filterInputLabel();
+    }
     /**
      * The text set as aria-label on the popup containing the list of options when its role is `region`.
      */
-    popupLabel;
+    set popupLabel(value) {
+        this._popupLabel.set(value);
+    }
+    get popupLabel() {
+        return this._popupLabel();
+    }
     /**
      * The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode.
      */
-    adaptiveCloseButtonTitle;
+    set adaptiveCloseButtonTitle(value) {
+        this._adaptiveCloseButtonTitle.set(value);
+    }
+    get adaptiveCloseButtonTitle() {
+        return this._adaptiveCloseButtonTitle();
+    }
     /**
       * The text for the input's placeholder when filtering is enabled. Available for DropDownTree and MultiSelectTree.
      */
-    filterInputPlaceholder;
+    set filterInputPlaceholder(value) {
+        this._filterInputPlaceholder.set(value);
+    }
+    get filterInputPlaceholder() {
+        return this._filterInputPlaceholder();
+    }
+    /**
+    * The accessible label of the listbox that contains the list of options. Available for DropDownList, ComboBox, MultiColumnComboBox, AutoComplete, and MultiSelect.
+     */
+    set listboxLabel(value) {
+        this._listboxLabel.set(value);
+    }
+    ;
+    get listboxLabel() {
+        return this._listboxLabel();
+    }
+    /**
+    * The accessible label of the input element. Available for MultiSelectTree.
+     */
+    set inputLabel(value) {
+        this._inputLabel.set(value);
+    }
+    ;
+    get inputLabel() {
+        return this._inputLabel();
+    }
     /**
       * The accessible label of the tag list element that contains the selected items. Available for MultiSelect and MultiSelectTree.
      */
-    chipListLabel;
+    set chipListLabel(value) {
+        this._chipListLabel.set(value);
+    }
+    ;
+    get chipListLabel() {
+        return this._chipListLabel();
+    }
     /**
-      * The text displayed when the user types a custom value that is not in the list of options. Available for ComboBox and MultiSelect.
+     * The text displayed when the user types a custom value that is not in the list of options. Available for ComboBox and MultiSelect.
      *
      * The text includes a localizable string and the custom value.
      * For example, when adding a custom value **Test**, the default text is **Use "Test"**.
@@ -3569,17 +3634,26 @@ class Messages extends ComponentMessages {
      * You can reorder the custom value and the localizable part by using a placeholder in `useCustomValueText`.
      * Use `{customValue}` to insert the value, for example, **Add: {customValue}**.
      */
-    useCustomValueText;
-    /**
-    * The accessible label of the listbox that contains the list of options. Available for DropDownList, ComboBox, MultiColumnComboBox, AutoComplete, and MultiSelect.
-     */
-    listboxLabel;
-    /**
-    * The accessible label of the input element. Available for MultiSelectTree.
-     */
-    inputLabel;
+    set useCustomValueText(value) {
+        this._useCustomValueText.set(value);
+    }
+    get useCustomValueText() {
+        return this._useCustomValueText();
+    }
+    _noDataText = signal(undefined, ...(ngDevMode ? [{ debugName: "_noDataText" }] : []));
+    _clearTitle = signal(undefined, ...(ngDevMode ? [{ debugName: "_clearTitle" }] : []));
+    _checkAllText = signal(undefined, ...(ngDevMode ? [{ debugName: "_checkAllText" }] : []));
+    _selectButtonText = signal(undefined, ...(ngDevMode ? [{ debugName: "_selectButtonText" }] : []));
+    _filterInputLabel = signal(undefined, ...(ngDevMode ? [{ debugName: "_filterInputLabel" }] : []));
+    _popupLabel = signal(undefined, ...(ngDevMode ? [{ debugName: "_popupLabel" }] : []));
+    _adaptiveCloseButtonTitle = signal(undefined, ...(ngDevMode ? [{ debugName: "_adaptiveCloseButtonTitle" }] : []));
+    _filterInputPlaceholder = signal(undefined, ...(ngDevMode ? [{ debugName: "_filterInputPlaceholder" }] : []));
+    _useCustomValueText = signal(undefined, ...(ngDevMode ? [{ debugName: "_useCustomValueText" }] : []));
+    _listboxLabel = signal(undefined, ...(ngDevMode ? [{ debugName: "_listboxLabel" }] : []));
+    _inputLabel = signal(undefined, ...(ngDevMode ? [{ debugName: "_inputLabel" }] : []));
+    _chipListLabel = signal(undefined, ...(ngDevMode ? [{ debugName: "_chipListLabel" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: Messages, isStandalone: true, inputs: { noDataText: "noDataText", clearTitle: "clearTitle", selectAllText: "selectAllText", checkAllText: "checkAllText", selectButtonText: "selectButtonText", filterInputLabel: "filterInputLabel", popupLabel: "popupLabel", adaptiveCloseButtonTitle: "adaptiveCloseButtonTitle", filterInputPlaceholder: "filterInputPlaceholder", chipListLabel: "chipListLabel", useCustomValueText: "useCustomValueText", listboxLabel: "listboxLabel", inputLabel: "inputLabel" }, usesInheritance: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: Messages, isStandalone: true, inputs: { noDataText: "noDataText", clearTitle: "clearTitle", selectAllText: "selectAllText", checkAllText: "checkAllText", selectButtonText: "selectButtonText", filterInputLabel: "filterInputLabel", popupLabel: "popupLabel", adaptiveCloseButtonTitle: "adaptiveCloseButtonTitle", filterInputPlaceholder: "filterInputPlaceholder", listboxLabel: "listboxLabel", inputLabel: "inputLabel", chipListLabel: "chipListLabel", useCustomValueText: "useCustomValueText" }, usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: Messages, decorators: [{
             type: Directive
@@ -3601,14 +3675,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
                 type: Input
             }], filterInputPlaceholder: [{
                 type: Input
-            }], chipListLabel: [{
-                type: Input
-            }], useCustomValueText: [{
-                type: Input
             }], listboxLabel: [{
                 type: Input
             }], inputLabel: [{
                 type: Input
+            }], chipListLabel: [{
+                type: Input
+            }], useCustomValueText: [{
+                type: Input
             }] } });
 
 /**
@@ -3785,7 +3859,7 @@ class AutoCompleteComponent {
      */
     toggle(open) {
         Promise.resolve(null).then(() => {
-            const shouldOpen = isPresent(open) ? open : !this._open;
+            const shouldOpen = isPresent(open) ? open : !this._open();
             this._toggle(shouldOpen);
         });
     }
@@ -3793,7 +3867,7 @@ class AutoCompleteComponent {
      * Returns the current open state. Returns `true` if the popup or actionSheet is open.
      */
     get isOpen() {
-        return isTruthy(this._open || this.isActionSheetExpanded);
+        return isTruthy(this._open() || this.isActionSheetExpanded);
     }
     /**
      * @hidden
@@ -3830,18 +3904,21 @@ class AutoCompleteComponent {
      *
      * @default true
      */
-    highlightFirst = true;
+    set highlightFirst(value) { this._highlightFirst.set(value); }
+    get highlightFirst() { return this._highlightFirst(); }
     /**
      * Shows or hides the current group sticky header when using grouped data.
      * By default, the sticky header is displayed ([see example](https://www.telerik.com/kendo-angular-ui/components/dropdowns/autocomplete/grouping#sticky-header)).
      *
      * @default true
      */
-    showStickyHeader = true;
+    set showStickyHeader(value) { this._showStickyHeader.set(value); }
+    get showStickyHeader() { return this._showStickyHeader(); }
     /**
      * @hidden
      */
-    focusableId = `k-${guid()}`;
+    set focusableId(value) { this._focusableId.set(value); }
+    get focusableId() { return this._focusableId(); }
     /**
      * Sets the data of the AutoComplete.
      *
@@ -3875,12 +3952,11 @@ class AutoCompleteComponent {
      */
     set value(newValue) {
         this.verifySettings(newValue);
-        this._value = newValue || NO_VALUE;
+        this._value.set(newValue || NO_VALUE);
         this.text = this.value;
-        this.cdr.markForCheck();
     }
     get value() {
-        return this._value || NO_VALUE;
+        return this._value() || NO_VALUE;
     }
     /**
      * Specifies the `string` property of the data item that represents the item value.
@@ -3888,31 +3964,36 @@ class AutoCompleteComponent {
      *
      * > The `valueField` property can be set to point to a nested property value - e.g. `category.name`.
      */
-    valueField;
+    set valueField(value) { this._valueField.set(value); }
+    get valueField() { return this._valueField(); }
     /**
      * Sets the placeholder of the AutoComplete.
      *
      * @default ""
      */
-    placeholder = "";
+    set placeholder(value) { this._placeholder.set(value); }
+    get placeholder() { return this._placeholder(); }
     /**
      * Enables or disables the adaptive mode. By default, the adaptive rendering is disabled.
      *
      * @default 'none'
      */
-    adaptiveMode = 'none';
+    set adaptiveMode(value) { this._adaptiveMode.set(value); }
+    get adaptiveMode() { return this._adaptiveMode(); }
     /**
      * Sets the title of the ActionSheet that renders instead of the Popup when using small screen devices.
      * By default, the ActionSheet title uses the text provided for the label of the AutoComplete.
      *
      * @default ''
      */
-    adaptiveTitle = '';
+    set adaptiveTitle(value) { this._adaptiveTitle.set(value); }
+    get adaptiveTitle() { return this._adaptiveTitle(); }
     /**
      * Sets the subtitle of the ActionSheet that renders instead of the Popup when using small screen devices.
      * By default, the ActionSheet does not render a subtitle.
      */
-    adaptiveSubtitle;
+    set adaptiveSubtitle(value) { this._adaptiveSubtitle.set(value); }
+    get adaptiveSubtitle() { return this._adaptiveSubtitle(); }
     /**
      * @hidden
      */
@@ -3930,10 +4011,10 @@ class AutoCompleteComponent {
      * - `appendTo: "root" | "component" | ViewContainerRef`—Specifies the component to which the popup will be appended.
      */
     set popupSettings(settings) {
-        this._popupSettings = Object.assign({ animate: true }, settings);
+        this._popupSettings.set(Object.assign({ animate: true }, settings));
     }
     get popupSettings() {
-        return this._popupSettings;
+        return this._popupSettings();
     }
     /**
     * Sets the height of the options list in the popup. By default, `listHeight` is 200px.
@@ -3945,21 +4026,21 @@ class AutoCompleteComponent {
     * @default 200
     */
     set listHeight(_listHeight) {
-        this._listHeight = _listHeight;
+        this._listHeight.set(_listHeight);
     }
     get listHeight() {
         if (this.isAdaptive) {
             return;
         }
-        return this._listHeight;
+        return this._listHeight();
     }
-    _listHeight = 200;
     /**
      * Sets and gets the loading state of the AutoComplete.
      *
      * @default false
      */
-    loading;
+    set loading(value) { this._loading.set(value); }
+    get loading() { return this._loading(); }
     /**
      * @hidden
      *
@@ -3968,19 +4049,22 @@ class AutoCompleteComponent {
      *
      * @default true
      */
-    clearButton = true;
+    set clearButton(value) { this._clearButton.set(value); }
+    get clearButton() { return this._clearButton(); }
     /**
      * Enables the auto-completion of the text based on the first data item.
      *
      * @default false
      */
-    suggest;
+    set suggest(value) { this._suggest.set(value); }
+    get suggest() { return this._suggest(); }
     /**
      * Sets the disabled state of the component. To learn how to disable the component in reactive forms, refer to the article on [Forms Support](https://www.telerik.com/kendo-angular-ui/components/dropdowns/autocomplete/forms#managing-the-autocomplete-disabled-state-in-reactive-forms).
      *
      * @default false
      */
-    disabled = false;
+    set disabled(value) { this._disabled.set(value); }
+    get disabled() { return this._disabled(); }
     /**
      * Defines a Boolean function that is executed for each data item in the component
      * ([see examples](https://www.telerik.com/kendo-angular-ui/components/dropdowns/autocomplete/disabled-items)).
@@ -3997,13 +4081,15 @@ class AutoCompleteComponent {
      *
      * @default false
      */
-    readonly = false;
+    set readonly(value) { this._readonly.set(value); }
+    get readonly() { return this._readonly(); }
     /**
      * Specifies the [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
      *
      * @default 0
      */
-    tabindex = 0;
+    set tabindex(value) { this._tabindex.set(value); }
+    get tabindex() { return this._tabindex(); }
     /**
      * @hidden
      */
@@ -4019,17 +4105,18 @@ class AutoCompleteComponent {
      *
      * @default false
      */
-    filterable = false;
+    set filterable(value) { this._filterable.set(value); }
+    get filterable() { return this._filterable(); }
     /**
      * Enables the [virtualization](https://www.telerik.com/kendo-angular-ui/components/dropdowns/autocomplete/virtualization) functionality.
      *
      * @default false
      */
     set virtual(settings) {
-        this._virtualSettings = normalizeVirtualizationSettings(settings);
+        this._virtualSettings.set(normalizeVirtualizationSettings(settings));
     }
     get virtual() {
-        return this._virtualSettings;
+        return this._virtualSettings();
     }
     /**
      * Sets the size of the component. The default value is set by the Kendo theme.
@@ -4039,10 +4126,10 @@ class AutoCompleteComponent {
         if (size) {
             this.renderer.addClass(this.wrapper, getSizeClass('input', size));
         }
-        this._size = size;
+        this._size.set(size);
     }
     get size() {
-        return this._size;
+        return this._size();
     }
     /**
      * Sets the border radius of the component. The default value is set by the Kendo theme.
@@ -4052,10 +4139,10 @@ class AutoCompleteComponent {
         if (rounded) {
             this.renderer.addClass(this.wrapper, getRoundedClass(rounded));
         }
-        this._rounded = rounded;
+        this._rounded.set(rounded);
     }
     get rounded() {
-        return this._rounded;
+        return this._rounded();
     }
     /**
      * Sets the fillMode of the component. The default value is set by the Kendo theme.
@@ -4065,10 +4152,10 @@ class AutoCompleteComponent {
         if (fillMode) {
             this.renderer.addClass(this.wrapper, getFillModeClass('input', fillMode));
         }
-        this._fillMode = fillMode;
+        this._fillMode.set(fillMode);
     }
     get fillMode() {
-        return this._fillMode;
+        return this._fillMode();
     }
     /**
      * Sets the HTML attributes of the inner focusable input element. Attributes which are essential for certain component functionalities cannot be changed.
@@ -4076,7 +4163,8 @@ class AutoCompleteComponent {
      * @remarks
      * This property is related to accessibility.
      */
-    inputAttributes;
+    set inputAttributes(value) { this._inputAttributes.set(value); }
+    get inputAttributes() { return this._inputAttributes(); }
     /**
      * Fires each time the value changes—
      * when the component is blurred or the value is cleared through the **Clear** button
@@ -4160,7 +4248,8 @@ class AutoCompleteComponent {
     get dir() {
         return this.direction;
     }
-    text;
+    get text() { return this._text(); }
+    set text(value) { this._text.set(value); }
     listBoxId = `k-${guid()}`;
     optionPrefix = `k-${guid()}`;
     popupRef;
@@ -4225,6 +4314,14 @@ class AutoCompleteComponent {
     ngAfterViewInit() {
         this.windowSize = this.adaptiveService.size;
         this.cdr.detectChanges();
+        const control = this.formControl;
+        if (control && control.events) {
+            this.subs.add(control.events.subscribe(e => {
+                if (e instanceof TouchedChangeEvent) {
+                    this.cdr.markForCheck();
+                }
+            }));
+        }
     }
     ngOnDestroy() {
         this.destroyPopup();
@@ -4288,7 +4385,6 @@ class AutoCompleteComponent {
      * @hidden
      */
     setDisabledState(isDisabled) {
-        this.cdr.markForCheck();
         this.disabled = isDisabled;
     }
     /**
@@ -4332,7 +4428,7 @@ class AutoCompleteComponent {
             this.windowSize = currentWindowSize;
             this.cdr.detectChanges();
         }
-        if (this._open && !this.isActionSheetExpanded) {
+        if (this._open() && !this.isActionSheetExpanded) {
             const popupWrapper = this.popupRef.popupElement;
             const { min, max } = this.width;
             popupWrapper.style.minWidth = min;
@@ -4373,6 +4469,7 @@ class AutoCompleteComponent {
             return;
         }
         this.selectionService.focus(index);
+        this.cdr.markForCheck();
     }
     /**
      * @hidden
@@ -4548,10 +4645,11 @@ class AutoCompleteComponent {
         this.valueChangeSubject.next(value);
     }
     popupMouseDownHandler = (event) => event.preventDefault();
-    _popupSettings = { animate: true };
-    _virtualSettings;
-    _open = false;
-    _value = "";
+    _popupSettings = signal({ animate: true }, ...(ngDevMode ? [{ debugName: "_popupSettings" }] : []));
+    _listHeight = signal(200, ...(ngDevMode ? [{ debugName: "_listHeight" }] : []));
+    _virtualSettings = signal(undefined, ...(ngDevMode ? [{ debugName: "_virtualSettings" }] : []));
+    _open = signal(false, ...(ngDevMode ? [{ debugName: "_open" }] : []));
+    _value = signal("", ...(ngDevMode ? [{ debugName: "_value" }] : []));
     suggestedText;
     backspacePressed;
     subs = new Subscription();
@@ -4560,9 +4658,26 @@ class AutoCompleteComponent {
     wrapper;
     _isFocused = false;
     direction;
-    _size = undefined;
-    _rounded = undefined;
-    _fillMode = undefined;
+    _size = signal(undefined, ...(ngDevMode ? [{ debugName: "_size" }] : []));
+    _rounded = signal(undefined, ...(ngDevMode ? [{ debugName: "_rounded" }] : []));
+    _fillMode = signal(undefined, ...(ngDevMode ? [{ debugName: "_fillMode" }] : []));
+    _highlightFirst = signal(true, ...(ngDevMode ? [{ debugName: "_highlightFirst" }] : []));
+    _text = signal(undefined, ...(ngDevMode ? [{ debugName: "_text" }] : []));
+    _showStickyHeader = signal(true, ...(ngDevMode ? [{ debugName: "_showStickyHeader" }] : []));
+    _focusableId = signal(`k-${guid()}`, ...(ngDevMode ? [{ debugName: "_focusableId" }] : []));
+    _valueField = signal(undefined, ...(ngDevMode ? [{ debugName: "_valueField" }] : []));
+    _placeholder = signal("", ...(ngDevMode ? [{ debugName: "_placeholder" }] : []));
+    _adaptiveMode = signal('none', ...(ngDevMode ? [{ debugName: "_adaptiveMode" }] : []));
+    _adaptiveTitle = signal('', ...(ngDevMode ? [{ debugName: "_adaptiveTitle" }] : []));
+    _adaptiveSubtitle = signal(undefined, ...(ngDevMode ? [{ debugName: "_adaptiveSubtitle" }] : []));
+    _loading = signal(undefined, ...(ngDevMode ? [{ debugName: "_loading" }] : []));
+    _clearButton = signal(true, ...(ngDevMode ? [{ debugName: "_clearButton" }] : []));
+    _suggest = signal(undefined, ...(ngDevMode ? [{ debugName: "_suggest" }] : []));
+    _disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
+    _readonly = signal(false, ...(ngDevMode ? [{ debugName: "_readonly" }] : []));
+    _tabindex = signal(0, ...(ngDevMode ? [{ debugName: "_tabindex" }] : []));
+    _filterable = signal(false, ...(ngDevMode ? [{ debugName: "_filterable" }] : []));
+    _inputAttributes = signal(undefined, ...(ngDevMode ? [{ debugName: "_inputAttributes" }] : []));
     subscribeEvents() {
         if (!isDocumentAvailable()) {
             return;
@@ -4692,13 +4807,13 @@ class AutoCompleteComponent {
         }
     }
     _toggle(open) {
-        this._open = open;
+        this._open.set(open);
         this.destroyPopup();
         if (this.isActionSheetExpanded) {
             this.actionSheet.toggle(false);
             this.focus();
         }
-        if (this._open) {
+        if (this._open()) {
             this.createPopup();
         }
     }
@@ -4970,11 +5085,13 @@ class AutoCompleteComponent {
             </ng-template>
           }
         </ng-template>
-        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { kind: "directive", type: SharedDropDownEventsDirective, selector: "[kendoDropDownSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }, { kind: "component", type: SearchBarComponent, selector: "input[kendoSearchbar]", inputs: ["tagListId", "readonly", "disabled", "isRequired", "isSuggestable", "hasListAutocomplete", "userInput", "suggestedText", "inputAttributes", "id", "activeDescendant", "tabIndex", "isLoading", "ariaControls", "ariaExpanded", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { 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"] }, { kind: "component", type: AdaptiveRendererComponent, selector: "kendo-adaptive-renderer", inputs: ["title", "subtitle", "showTextInput", "sharedPopupActionSheetTemplate", "text", "placeholder", "searchBarValue", "filterable", "showListContainer"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "ariaLabel", "isMultiselect", "isActionSheetExpanded", "showStickyHeader", "rowWidth", "columnsWidths", "customItemTemplate", "text", "allowCustom", "defaultItem", "selectAll", "selectAllText", "isAllSelected", "isPartiallySelected", "data", "size", "rounded"], outputs: ["selectAllClick", "onClick", "pageChange", "listResize", "popupListScroll"] }] });
+        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { kind: "directive", type: SharedDropDownEventsDirective, selector: "[kendoDropDownSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }, { kind: "component", type: SearchBarComponent, selector: "input[kendoSearchbar]", inputs: ["tagListId", "readonly", "disabled", "isRequired", "isSuggestable", "hasListAutocomplete", "userInput", "suggestedText", "inputAttributes", "id", "activeDescendant", "tabIndex", "isLoading", "ariaControls", "ariaExpanded", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { 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"] }, { kind: "component", type: AdaptiveRendererComponent, selector: "kendo-adaptive-renderer", inputs: ["title", "subtitle", "showTextInput", "sharedPopupActionSheetTemplate", "text", "placeholder", "searchBarValue", "filterable", "showListContainer"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "ariaLabel", "isMultiselect", "isActionSheetExpanded", "showStickyHeader", "rowWidth", "columnsWidths", "customItemTemplate", "text", "allowCustom", "defaultItem", "selectAll", "selectAllText", "isAllSelected", "isPartiallySelected", "data", "size", "rounded"], outputs: ["selectAllClick", "onClick", "pageChange", "listResize", "popupListScroll"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: AutoCompleteComponent, decorators: [{
             type: Component,
             args: [{
+                    selector: 'kendo-autocomplete',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     exportAs: 'kendoAutoComplete',
                     providers: [
                         AUTOCOMPLETE_VALUE_ACCESSOR,
@@ -4998,7 +5115,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
                         { provide: KENDO_WEBMCP_HOST, useExisting: forwardRef(() => AutoCompleteComponent) },
                         provideComponentName('autocomplete')
                     ],
-                    selector: 'kendo-autocomplete',
                     template: `
         <ng-container kendoAutoCompleteLocalizedMessages
           i18n-noDataText="kendo.autocomplete.noDataText|The text displayed in the popup when there are no items"
@@ -5386,18 +5502,21 @@ class ComboBoxComponent extends MultiTabStop {
     /**
      * @hidden
      */
-    icon;
+    set icon(value) { this._icon.set(value); }
+    get icon() { return this._icon(); }
     /**
      * @hidden
      */
-    svgIcon;
+    set svgIcon(value) { this._svgIcon.set(value); }
+    get svgIcon() { return this._svgIcon(); }
     /**
      * Sets the HTML attributes of the inner focusable input element. Attributes essential for certain component functionalities cannot be changed.
      *
      * @remarks
      * This property is related to accessibility.
      */
-    inputAttributes;
+    set inputAttributes(value) { this._inputAttributes.set(value); }
+    get inputAttributes() { return this._inputAttributes(); }
     /**
      * @hidden
      */
@@ -5427,10 +5546,10 @@ class ComboBoxComponent extends MultiTabStop {
      */
     chevronDownIcon = chevronDownIcon;
     set text(text) {
-        this._text = isPresent(text) ? text.toString() : "";
+        this._text.set(isPresent(text) ? text.toString() : "");
     }
     get text() {
-        return this._text;
+        return this._text();
     }
     /**
      * @hidden
@@ -5478,11 +5597,13 @@ class ComboBoxComponent extends MultiTabStop {
      * By default the sticky header is displayed ([see example](https://www.telerik.com/kendo-angular-ui/components/dropdowns/autocomplete/grouping#sticky-header)).
      * @default true
      */
-    showStickyHeader = true;
+    set showStickyHeader(value) { this._showStickyHeader.set(value); }
+    get showStickyHeader() { return this._showStickyHeader(); }
     /**
      * @hidden
      */
-    focusableId = `k-${guid()}`;
+    set focusableId(value) { this._focusableId.set(value); }
+    get focusableId() { return this._focusableId(); }
     /**
      * Specifies whether the ComboBox allows user-defined values that are not present in the dataset
      * ([more information and examples](https://www.telerik.com/kendo-angular-ui/components/dropdowns/combobox/custom-values)).
@@ -5491,7 +5612,8 @@ class ComboBoxComponent extends MultiTabStop {
      * The feature is not available when using adaptive mode.
      * @default false
      */
-    allowCustom = false;
+    set allowCustom(value) { this._allowCustom.set(value); }
+    get allowCustom() { return this._allowCustom(); }
     /**
      * Sets the data of the ComboBox.
      * The data must be provided in an array-like list.
@@ -5528,38 +5650,39 @@ class ComboBoxComponent extends MultiTabStop {
      * All selected values not present in the dataset are custom values. When the `Enter` key is pressed or the component loses focus, custom values are dismissed unless `allowCustom` is set to `true`.
      */
     set value(newValue) {
-        this._value = newValue;
+        this._value.set(newValue);
         this.setState();
-        this.cdr.markForCheck();
     }
     get value() {
-        return this._value;
+        return this._value();
     }
     /**
      * Sets the data item field that represents the item text. If the data contains only primitive values, do not define this property.
      *
      * The `textField` property can be set to a nested property value, for example, `category.name`.
      */
-    textField;
+    set textField(value) { this._textField.set(value); }
+    get textField() { return this._textField(); }
     /**
      * Sets the data item field that represents the item value.
      * If the data contains only primitive values, do not define it.
      *
      * > The `valueField` property can be set to point to a nested property value - e.g. `category.id`.
      */
-    valueField;
+    set valueField(value) { this._valueField.set(value); }
+    get valueField() { return this._valueField(); }
     /**
      * Specifies the type of the selected value. If set to `true`, the selected value must be a primitive type.
      * ([more information and example](https://www.telerik.com/kendo-angular-ui/components/dropdowns/combobox/value-binding#primitive-values-from-object-fields))
      */
     set valuePrimitive(isPrimitive) {
-        this._valuePrimitive = isPrimitive;
+        this._valuePrimitive.set(isPrimitive);
     }
     get valuePrimitive() {
-        if (!isPresent(this._valuePrimitive)) {
+        if (!isPresent(this._valuePrimitive())) {
             return !isPresent(this.valueField);
         }
-        return this._valuePrimitive;
+        return this._valuePrimitive();
     }
     /**
      * A user-defined callback which returns normalized custom values.
@@ -5604,27 +5727,32 @@ class ComboBoxComponent extends MultiTabStop {
      * }
      * ```
      */
-    valueNormalizer = (text) => text.pipe(map((userInput) => userInput));
+    set valueNormalizer(fn) { this._valueNormalizer.set(fn); }
+    get valueNormalizer() { return this._valueNormalizer(); }
     /**
      * The hint that is displayed when the component is empty.
      * @default ''
      */
-    placeholder = "";
+    set placeholder(value) { this._placeholder.set(value); }
+    get placeholder() { return this._placeholder(); }
     /**
      * Enables or disables the adaptive mode. By default, adaptive rendering is disabled.
      * @default 'none'
      */
-    adaptiveMode = 'none';
+    set adaptiveMode(value) { this._adaptiveMode.set(value); }
+    get adaptiveMode() { return this._adaptiveMode(); }
     /**
      * Sets the title of the ActionSheet that is rendered instead of the Popup when using small screen devices.
      * By default, the ActionSheet title uses the text provided for the label of the ComboBox.
      * @default ''
      */
-    adaptiveTitle = '';
+    set adaptiveTitle(value) { this._adaptiveTitle.set(value); }
+    get adaptiveTitle() { return this._adaptiveTitle(); }
     /**
      * Sets the subtitle of the ActionSheet that is rendered instead of the Popup when using small screen devices. By default, the ActionSheet does not render a subtitle.
      */
-    adaptiveSubtitle;
+    set adaptiveSubtitle(value) { this._adaptiveSubtitle.set(value); }
+    get adaptiveSubtitle() { return this._adaptiveSubtitle(); }
     /**
      * @hidden
      */
@@ -5635,10 +5763,10 @@ class ComboBoxComponent extends MultiTabStop {
      * Configures the popup of the ComboBox.
      */
     set popupSettings(settings) {
-        this._popupSettings = Object.assign({ animate: true }, settings);
+        this._popupSettings.set(Object.assign({ animate: true }, settings));
     }
     get popupSettings() {
-        return this._popupSettings;
+        return this._popupSettings();
     }
     /**
      * Sets the height of the options list in the popup. By default, `listHeight` is 200px.
@@ -5649,34 +5777,37 @@ class ComboBoxComponent extends MultiTabStop {
      * When using `adaptiveMode` and the screen size is `small` or `medium` the `listHeight` property is set to null.
      */
     set listHeight(_listHeight) {
-        this._listHeight = _listHeight;
+        this._listHeight.set(_listHeight);
     }
     get listHeight() {
         if (this.isAdaptive) {
             return;
         }
-        return this._listHeight;
+        return this._listHeight();
     }
-    _listHeight = 200;
     /**
      * Sets and gets the loading state of the ComboBox.
      */
-    loading;
+    set loading(value) { this._loading.set(value); }
+    get loading() { return this._loading(); }
     /**
      * Enables the auto-completion of the text based on the first data item.
      * @default false
      */
-    suggest = false;
+    set suggest(value) { this._suggest.set(value); }
+    get suggest() { return this._suggest(); }
     /**
      * If set to `true`, renders a button on hovering over the component.
      * Clicking this button resets the value of the component to `undefined` and triggers the `change` event.
      * @default true
      */
-    clearButton = true;
+    set clearButton(value) { this._clearButton.set(value); }
+    get clearButton() { return this._clearButton(); }
     /**
      * Sets the disabled state of the component. To learn how to disable the component in reactive forms, refer to the articles on [ComboBox Forms Support](https://www.telerik.com/kendo-angular-ui/components/dropdowns/combobox/forms#managing-the-combobox-disabled-state-in-reactive-forms) and [MultiColumnComboBox Forms Support](https://www.telerik.com/kendo-angular-ui/components/dropdowns/multicolumncombobox/forms#managing-the-multicolumncombobox-disabled-state-in-reactive-forms).
      */
-    disabled = false;
+    set disabled(value) { this._disabled.set(value); }
+    get disabled() { return this._disabled(); }
     /**
      * Defines a Boolean function that is executed for each data item in the component ([see examples](https://www.telerik.com/kendo-angular-ui/components/dropdowns/combobox/disabled-items)). Determines whether the item is disabled.
      */
@@ -5690,13 +5821,15 @@ class ComboBoxComponent extends MultiTabStop {
      * Sets the read-only state of the component.
      * @default false
      */
-    readonly = false;
+    set readonly(value) { this._readonly.set(value); }
+    get readonly() { return this._readonly(); }
     /**
      * Specifies the [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
      *
      * @default 0
      */
-    tabindex = 0;
+    set tabindex(value) { this._tabindex.set(value); }
+    get tabindex() { return this._tabindex(); }
     /**
      * @hidden
      */
@@ -5710,18 +5843,19 @@ class ComboBoxComponent extends MultiTabStop {
      * Enables the [filtering](https://www.telerik.com/kendo-angular-ui/components/dropdowns/combobox/filtering) functionality.
      * If set to `true`, the component emits the `filterChange` event.
      */
-    filterable = false;
+    set filterable(value) { this._filterable.set(value); }
+    get filterable() { return this._filterable(); }
     /**
      * Enables the [virtualization](https://www.telerik.com/kendo-angular-ui/components/dropdowns/combobox/virtualization) functionality.
      */
     set virtual(settings) {
-        this._virtualSettings = normalizeVirtualizationSettings(settings, {
+        this._virtualSettings.set(normalizeVirtualizationSettings(settings, {
             itemHeight: this.defaultVirtualItemHeight,
             pageSize: this.defaultVirtualPageSize
-        });
+        }));
     }
     get virtual() {
-        return this._virtualSettings;
+        return this._virtualSettings();
     }
     /**
      * Sets the size of the component. The default value is set by the Kendo theme.
@@ -5731,10 +5865,10 @@ class ComboBoxComponent extends MultiTabStop {
         if (size) {
             this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('input', size));
         }
-        this._size = size;
+        this._size.set(size);
     }
     get size() {
-        return this._size;
+        return this._size();
     }
     /**
      * Sets the border radius of the component. The default value is set by the Kendo theme.
@@ -5744,10 +5878,10 @@ class ComboBoxComponent extends MultiTabStop {
         if (rounded) {
             this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(rounded));
         }
-        this._rounded = rounded;
+        this._rounded.set(rounded);
     }
     get rounded() {
-        return this._rounded;
+        return this._rounded();
     }
     /**
      * Sets the fillMode of the component. The default value is set by the Kendo theme.
@@ -5757,10 +5891,10 @@ class ComboBoxComponent extends MultiTabStop {
         if (fillMode) {
             this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', fillMode));
         }
-        this._fillMode = fillMode;
+        this._fillMode.set(fillMode);
     }
     get fillMode() {
-        return this._fillMode;
+        return this._fillMode();
     }
     /**
      * Fires each time the value is changed&mdash;
@@ -5906,29 +6040,50 @@ class ComboBoxComponent extends MultiTabStop {
      * Used for the default virtualization settings config.
      */
     defaultVirtualPageSize = 50;
+    subs = new Subscription();
     valueSubscription;
     _filtering = false;
-    _text = '';
+    _text = signal('', ...(ngDevMode ? [{ debugName: "_text" }] : []));
     filterText = '';
-    _open = false;
-    _value;
-    _valuePrimitive;
+    _open = signal(false, ...(ngDevMode ? [{ debugName: "_open" }] : []));
+    _value = signal(undefined, ...(ngDevMode ? [{ debugName: "_value" }] : []));
+    _valuePrimitive = signal(undefined, ...(ngDevMode ? [{ debugName: "_valuePrimitive" }] : []));
     _previousDataItem;
     suggestedText;
     backspacePressed;
-    _popupSettings = { animate: true };
-    _virtualSettings;
+    _popupSettings = signal({ animate: true }, ...(ngDevMode ? [{ debugName: "_popupSettings" }] : []));
+    _virtualSettings = signal(undefined, ...(ngDevMode ? [{ debugName: "_virtualSettings" }] : []));
     popupMouseDownHandler = (event) => event.preventDefault();
     customValueSubject = new Subject();
     valueSubject = new Subject();
     clearValueSubject = new Subject();
     direction;
-    subs = new Subscription();
     touchstartDisposeHandler;
     selectClickDisposeHandler;
-    _size = undefined;
-    _rounded = undefined;
-    _fillMode = undefined;
+    _size = signal(undefined, ...(ngDevMode ? [{ debugName: "_size" }] : []));
+    _rounded = signal(undefined, ...(ngDevMode ? [{ debugName: "_rounded" }] : []));
+    _fillMode = signal(undefined, ...(ngDevMode ? [{ debugName: "_fillMode" }] : []));
+    _icon = signal(undefined, ...(ngDevMode ? [{ debugName: "_icon" }] : []));
+    _svgIcon = signal(undefined, ...(ngDevMode ? [{ debugName: "_svgIcon" }] : []));
+    _inputAttributes = signal(undefined, ...(ngDevMode ? [{ debugName: "_inputAttributes" }] : []));
+    _showStickyHeader = signal(true, ...(ngDevMode ? [{ debugName: "_showStickyHeader" }] : []));
+    _focusableId = signal(`k-${guid()}`, ...(ngDevMode ? [{ debugName: "_focusableId" }] : []));
+    _allowCustom = signal(false, ...(ngDevMode ? [{ debugName: "_allowCustom" }] : []));
+    _textField = signal(undefined, ...(ngDevMode ? [{ debugName: "_textField" }] : []));
+    _valueField = signal(undefined, ...(ngDevMode ? [{ debugName: "_valueField" }] : []));
+    _valueNormalizer = signal((text) => text.pipe(map((userInput) => userInput)), ...(ngDevMode ? [{ debugName: "_valueNormalizer" }] : []));
+    _placeholder = signal("", ...(ngDevMode ? [{ debugName: "_placeholder" }] : []));
+    _adaptiveMode = signal('none', ...(ngDevMode ? [{ debugName: "_adaptiveMode" }] : []));
+    _adaptiveTitle = signal('', ...(ngDevMode ? [{ debugName: "_adaptiveTitle" }] : []));
+    _adaptiveSubtitle = signal(undefined, ...(ngDevMode ? [{ debugName: "_adaptiveSubtitle" }] : []));
+    _loading = signal(undefined, ...(ngDevMode ? [{ debugName: "_loading" }] : []));
+    _suggest = signal(false, ...(ngDevMode ? [{ debugName: "_suggest" }] : []));
+    _clearButton = signal(true, ...(ngDevMode ? [{ debugName: "_clearButton" }] : []));
+    _disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
+    _readonly = signal(false, ...(ngDevMode ? [{ debugName: "_readonly" }] : []));
+    _tabindex = signal(0, ...(ngDevMode ? [{ debugName: "_tabindex" }] : []));
+    _filterable = signal(false, ...(ngDevMode ? [{ debugName: "_filterable" }] : []));
+    _listHeight = signal(200, ...(ngDevMode ? [{ debugName: "_listHeight" }] : []));
     constructor(wrapper, localization, popupService, selectionService, navigationService, disabledItemsService, dataService, zone, cdr, renderer, injector, hostElement, adaptiveService) {
         super();
         this.wrapper = wrapper;
@@ -5961,6 +6116,14 @@ class ComboBoxComponent extends MultiTabStop {
     ngAfterViewInit() {
         this.windowSize = this.adaptiveService.size;
         this.cdr.detectChanges();
+        const control = this.formControl;
+        if (control && control.events) {
+            this.subs.add(control.events.subscribe(e => {
+                if (e instanceof TouchedChangeEvent) {
+                    this.cdr.markForCheck();
+                }
+            }));
+        }
     }
     createValueStream() {
         const valueStream = this.valueSubject.pipe(filter((candidate) => {
@@ -6170,16 +6333,15 @@ class ComboBoxComponent extends MultiTabStop {
      */
     toggle(open) {
         Promise.resolve(null).then(() => {
-            const shouldOpen = isPresent(open) ? open : !this._open;
+            const shouldOpen = isPresent(open) ? open : !this._open();
             this._toggle(shouldOpen);
-            this.cdr.markForCheck();
         });
     }
     /**
      * Returns the current open state. Returns `true` if the popup or actionSheet is open.
      */
     get isOpen() {
-        return isTruthy(this._open || this.isActionSheetExpanded);
+        return isTruthy(this._open() || this.isActionSheetExpanded);
     }
     /**
      * @hidden
@@ -6252,7 +6414,6 @@ class ComboBoxComponent extends MultiTabStop {
      * @hidden
      */
     setDisabledState(isDisabled) {
-        this.cdr.markForCheck();
         this.disabled = isDisabled;
     }
     /**
@@ -6744,13 +6905,13 @@ class ComboBoxComponent extends MultiTabStop {
         this.popupRef.popupAnchorViewportLeave.subscribe(() => this.togglePopup(false));
     }
     _toggle(open) {
-        this._open = open;
+        this._open.set(open);
         this.destroyPopup();
         if (this.isActionSheetExpanded) {
             this.actionSheet.toggle(false);
             this.focus();
         }
-        if (this._open) {
+        if (this._open()) {
             this.windowSize = this.adaptiveService.size;
             this.createPopup();
         }
@@ -7081,11 +7242,13 @@ class ComboBoxComponent extends MultiTabStop {
             </ng-template>
           }
         </ng-template>
-        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { kind: "directive", type: SharedDropDownEventsDirective, selector: "[kendoDropDownSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }, { kind: "component", type: SearchBarComponent, selector: "input[kendoSearchbar]", inputs: ["tagListId", "readonly", "disabled", "isRequired", "isSuggestable", "hasListAutocomplete", "userInput", "suggestedText", "inputAttributes", "id", "activeDescendant", "tabIndex", "isLoading", "ariaControls", "ariaExpanded", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { 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: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: AdaptiveRendererComponent, selector: "kendo-adaptive-renderer", inputs: ["title", "subtitle", "showTextInput", "sharedPopupActionSheetTemplate", "text", "placeholder", "searchBarValue", "filterable", "showListContainer"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "ariaLabel", "isMultiselect", "isActionSheetExpanded", "showStickyHeader", "rowWidth", "columnsWidths", "customItemTemplate", "text", "allowCustom", "defaultItem", "selectAll", "selectAllText", "isAllSelected", "isPartiallySelected", "data", "size", "rounded"], outputs: ["selectAllClick", "onClick", "pageChange", "listResize", "popupListScroll"] }] });
+        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { kind: "directive", type: SharedDropDownEventsDirective, selector: "[kendoDropDownSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }, { kind: "component", type: SearchBarComponent, selector: "input[kendoSearchbar]", inputs: ["tagListId", "readonly", "disabled", "isRequired", "isSuggestable", "hasListAutocomplete", "userInput", "suggestedText", "inputAttributes", "id", "activeDescendant", "tabIndex", "isLoading", "ariaControls", "ariaExpanded", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { 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: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: AdaptiveRendererComponent, selector: "kendo-adaptive-renderer", inputs: ["title", "subtitle", "showTextInput", "sharedPopupActionSheetTemplate", "text", "placeholder", "searchBarValue", "filterable", "showListContainer"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "ariaLabel", "isMultiselect", "isActionSheetExpanded", "showStickyHeader", "rowWidth", "columnsWidths", "customItemTemplate", "text", "allowCustom", "defaultItem", "selectAll", "selectAllText", "isAllSelected", "isPartiallySelected", "data", "size", "rounded"], outputs: ["selectAllClick", "onClick", "pageChange", "listResize", "popupListScroll"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ComboBoxComponent, decorators: [{
             type: Component,
             args: [{
+                    selector: 'kendo-combobox',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     exportAs: 'kendoComboBox',
                     providers: [
                         COMBOBOX_VALUE_ACCESSOR,
@@ -7110,7 +7273,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
                         { provide: KENDO_WEBMCP_HOST, useExisting: forwardRef(() => ComboBoxComponent) },
                         provideComponentName('combobox')
                     ],
-                    selector: 'kendo-combobox',
                     template: `
         <ng-container kendoComboBoxLocalizedMessages
           i18n-noDataText="kendo.combobox.noDataText|The text displayed in the popup when there are no items"
@@ -7584,7 +7746,8 @@ class DropDownListComponent {
     /**
      * @hidden
      */
-    customIconClass;
+    set customIconClass(v) { this._customIconClass.set(v); }
+    get customIconClass() { return this._customIconClass(); }
     /**
      * @hidden
      */
@@ -7658,19 +7821,23 @@ class DropDownListComponent {
      * Shows or hides the current group sticky header when using grouped data.
      * The sticky header displays by default. [see example.](https://www.telerik.com/kendo-angular-ui/components/dropdowns/autocomplete/grouping#sticky-header)
      */
-    showStickyHeader = true;
+    set showStickyHeader(v) { this._showStickyHeader.set(v); }
+    get showStickyHeader() { return this._showStickyHeader(); }
     /**
      * @hidden
      */
-    icon;
+    set icon(v) { this._icon.set(v); }
+    get icon() { return this._icon(); }
     /**
      * @hidden
      */
-    svgIcon;
+    set svgIcon(v) { this._svgIcon.set(v); }
+    get svgIcon() { return this._svgIcon(); }
     /**
      * Sets and gets the loading state of the `DropDownListComponent`.
      */
-    loading;
+    set loading(v) { this._loading.set(v); }
+    get loading() { return this._loading(); }
     /**
      * Sets the data of the `DropDownListComponent`.
      *
@@ -7705,12 +7872,11 @@ class DropDownListComponent {
         if (!isPresent(newValue)) {
             this._previousDataItem = undefined;
         }
-        this._value = newValue;
+        this._value.set(newValue);
         this.setState();
-        this.cdr.markForCheck();
     }
     get value() {
-        return this._value;
+        return this._value();
     }
     /**
      * Sets the data item field that represents the item text.
@@ -7718,28 +7884,33 @@ class DropDownListComponent {
      *
      * The `textField` property can point to a nested property value, for example, `category.name`.
      */
-    textField;
+    set textField(v) { this._textField.set(v); }
+    get textField() { return this._textField(); }
     /**
      * Sets the data item field that represents the item value.
      * If the data contains only primitive values, do not define this property.
      *
      * The `valueField` property can point to a nested property value, for example, `category.id`.
      */
-    valueField;
+    set valueField(v) { this._valueField.set(v); }
+    get valueField() { return this._valueField(); }
     /**
      * Enables or disables the adaptive mode. The adaptive rendering is disabled by default.
      */
-    adaptiveMode = 'none';
+    set adaptiveMode(v) { this._adaptiveMode.set(v); }
+    get adaptiveMode() { return this._adaptiveMode(); }
     /**
      * Sets the title of the ActionSheet rendered instead of the Popup on small screens.
      * By default, the ActionSheet title uses the label text of the `DropDownListComponent`.
      */
-    adaptiveTitle = '';
+    set adaptiveTitle(v) { this._adaptiveTitle.set(v); }
+    get adaptiveTitle() { return this._adaptiveTitle(); }
     /**
      * Sets the subtitle of the ActionSheet rendered instead of the Popup on small screens.
      * By default, the ActionSheet does not render a subtitle.
      */
-    adaptiveSubtitle = '';
+    set adaptiveSubtitle(v) { this._adaptiveSubtitle.set(v); }
+    get adaptiveSubtitle() { return this._adaptiveSubtitle(); }
     /**
      * @hidden
      */
@@ -7773,10 +7944,10 @@ class DropDownListComponent {
      * - `appendTo: "root" | "component" | ViewContainerRef`&mdash;Specifies the component to which the popup will be appended.
      */
     set popupSettings(settings) {
-        this._popupSettings = Object.assign({ animate: true }, settings);
+        this._popupSettings.set(Object.assign({ animate: true }, settings));
     }
     get popupSettings() {
-        return this._popupSettings;
+        return this._popupSettings();
     }
     /**
      * Sets the height of the options list in the popup.
@@ -7789,23 +7960,24 @@ class DropDownListComponent {
      * @default 200
      */
     set listHeight(_listHeight) {
-        this._listHeight = _listHeight;
+        this._listHeight.set(_listHeight);
     }
     get listHeight() {
         if (this.isAdaptive) {
             return;
         }
-        return this._listHeight;
+        return this._listHeight();
     }
-    _listHeight = 200;
     /**
      * Sets the text of the default empty item. The value type must match the data type.
      */
-    defaultItem;
+    set defaultItem(v) { this._defaultItem.set(v); }
+    get defaultItem() { return this._defaultItem(); }
     /**
      * Sets the disabled state of the component. To disable the component in reactive forms, see [Forms Support](https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist/forms#managing-the-dropdownlist-disabled-state-in-reactive-forms).
      */
-    disabled;
+    set disabled(v) { this._disabled.set(v); }
+    get disabled() { return this._disabled(); }
     /**
      * Defines a Boolean function executed for each data item in the component. Determines whether the item is disabled. [See examples.](https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist/disabled-items)
      */
@@ -7820,47 +7992,52 @@ class DropDownListComponent {
      *
      * @default false
      */
-    readonly = false;
+    get readonly() { return this._readonly(); }
+    set readonly(v) { this._readonly.set(v); }
     /**
      * Enables the [filtering](https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist/filtering) functionality of the `DropDownListComponent`.
      */
-    filterable = false;
+    set filterable(v) { this._filterable.set(v); }
+    get filterable() { return this._filterable(); }
     /**
      * Enables the [virtualization](https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist/virtualization) functionality.
      */
     set virtual(settings) {
-        this._virtualSettings = normalizeVirtualizationSettings(settings);
+        this._virtualSettings.set(normalizeVirtualizationSettings(settings));
     }
     get virtual() {
-        return this._virtualSettings;
+        return this._virtualSettings();
     }
     /**
      * Enables a case-insensitive search. Use this option when filtration is disabled.
      */
-    ignoreCase = true;
+    set ignoreCase(v) { this._ignoreCase.set(v); }
+    get ignoreCase() { return this._ignoreCase(); }
     /**
      * Sets the delay before an item search is performed. Use this option when filtration is disabled.
      */
-    delay = 500;
+    set delay(v) { this._delay.set(v); }
+    get delay() { return this._delay(); }
     /**
      * Specifies the type of the selected value. If set to `true`, the selected value must be a primitive value.
      * * [More information and example.](https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist/value-binding#primitive-values-from-object-fields)
      */
     set valuePrimitive(isPrimitive) {
-        this._valuePrimitive = isPrimitive;
+        this._valuePrimitive.set(isPrimitive);
     }
     get valuePrimitive() {
-        if (!isPresent(this._valuePrimitive)) {
+        if (!isPresent(this._valuePrimitive())) {
             return !isPresent(this.valueField);
         }
-        return this._valuePrimitive;
+        return this._valuePrimitive();
     }
     /**
      * Specifies the [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
      *
      * @default 0
      */
-    tabindex = 0;
+    set tabindex(v) { this._tabindex.set(v); }
+    get tabindex() { return this._tabindex(); }
     /**
      * @hidden
      */
@@ -7878,10 +8055,10 @@ class DropDownListComponent {
         if (size) {
             this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('picker', size));
         }
-        this._size = size;
+        this._size.set(size);
     }
     get size() {
-        return this._size;
+        return this._size();
     }
     /**
      * Sets the border radius of the component. The default value is set by the Kendo theme.
@@ -7891,10 +8068,10 @@ class DropDownListComponent {
         if (rounded) {
             this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(rounded));
         }
-        this._rounded = rounded;
+        this._rounded.set(rounded);
     }
     get rounded() {
-        return this._rounded;
+        return this._rounded();
     }
     /**
      * Sets the fillMode of the component. The default value is set by the Kendo theme.
@@ -7904,16 +8081,17 @@ class DropDownListComponent {
         if (fillMode) {
             this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('picker', fillMode));
         }
-        this._fillMode = fillMode;
+        this._fillMode.set(fillMode);
     }
     get fillMode() {
-        return this._fillMode;
+        return this._fillMode();
     }
     /**
      * Toggles the left and right arrow keys navigation functionality.
      * @hidden
      */
-    leftRightArrowsNavigation = true;
+    set leftRightArrowsNavigation(v) { this._leftRightArrowsNavigation.set(v); }
+    get leftRightArrowsNavigation() { return this._leftRightArrowsNavigation(); }
     /**
      * Fires each time the value changes. [See example.](https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist/events).
      */
@@ -8022,7 +8200,8 @@ class DropDownListComponent {
     /**
      * @hidden
      */
-    focusableId = `k-${guid()}`;
+    get focusableId() { return this._focusableId(); }
+    set focusableId(id) { this._focusableId.set(id); }
     get dir() {
         return this.direction;
     }
@@ -8121,7 +8300,7 @@ class DropDownListComponent {
     }
     groupIndices = [];
     optionPrefix = `k-${guid()}`;
-    valueLabelId;
+    valueLabelId = signal('', ...(ngDevMode ? [{ debugName: "valueLabelId" }] : []));
     filterText = '';
     listBoxId = `k-${guid()}`;
     subs = new Subscription();
@@ -8133,6 +8312,9 @@ class DropDownListComponent {
     get isFocused() {
         return this._isFocused;
     }
+    get text() {
+        return this._text();
+    }
     direction;
     dataItem;
     popupRef;
@@ -8147,16 +8329,36 @@ class DropDownListComponent {
     hostElementFocused = new EventEmitter();
     hostElementBlurred = new EventEmitter();
     touchstartDisposeHandler;
-    _value;
-    _open = false;
+    _customIconClass = signal(undefined, ...(ngDevMode ? [{ debugName: "_customIconClass" }] : []));
+    _showStickyHeader = signal(true, ...(ngDevMode ? [{ debugName: "_showStickyHeader" }] : []));
+    _icon = signal(undefined, ...(ngDevMode ? [{ debugName: "_icon" }] : []));
+    _svgIcon = signal(undefined, ...(ngDevMode ? [{ debugName: "_svgIcon" }] : []));
+    _loading = signal(undefined, ...(ngDevMode ? [{ debugName: "_loading" }] : []));
+    _textField = signal(undefined, ...(ngDevMode ? [{ debugName: "_textField" }] : []));
+    _valueField = signal(undefined, ...(ngDevMode ? [{ debugName: "_valueField" }] : []));
+    _adaptiveMode = signal('none', ...(ngDevMode ? [{ debugName: "_adaptiveMode" }] : []));
+    _adaptiveTitle = signal('', ...(ngDevMode ? [{ debugName: "_adaptiveTitle" }] : []));
+    _adaptiveSubtitle = signal('', ...(ngDevMode ? [{ debugName: "_adaptiveSubtitle" }] : []));
+    _listHeight = signal(200, ...(ngDevMode ? [{ debugName: "_listHeight" }] : []));
+    _defaultItem = signal(undefined, ...(ngDevMode ? [{ debugName: "_defaultItem" }] : []));
+    _disabled = signal(undefined, ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
+    _readonly = signal(false, ...(ngDevMode ? [{ debugName: "_readonly" }] : []));
+    _filterable = signal(false, ...(ngDevMode ? [{ debugName: "_filterable" }] : []));
+    _ignoreCase = signal(true, ...(ngDevMode ? [{ debugName: "_ignoreCase" }] : []));
+    _delay = signal(500, ...(ngDevMode ? [{ debugName: "_delay" }] : []));
+    _tabindex = signal(0, ...(ngDevMode ? [{ debugName: "_tabindex" }] : []));
+    _leftRightArrowsNavigation = signal(true, ...(ngDevMode ? [{ debugName: "_leftRightArrowsNavigation" }] : []));
+    _focusableId = signal(`k-${guid()}`, ...(ngDevMode ? [{ debugName: "_focusableId" }] : []));
+    _value = signal(undefined, ...(ngDevMode ? [{ debugName: "_value" }] : []));
+    _open = signal(false, ...(ngDevMode ? [{ debugName: "_open" }] : []));
     _previousDataItem;
-    _valuePrimitive;
-    text;
-    _popupSettings = { animate: true };
-    _virtualSettings;
-    _size = undefined;
-    _rounded = undefined;
-    _fillMode = undefined;
+    _valuePrimitive = signal(undefined, ...(ngDevMode ? [{ debugName: "_valuePrimitive" }] : []));
+    _text = signal(undefined, ...(ngDevMode ? [{ debugName: "_text" }] : []));
+    _popupSettings = signal({ animate: true }, ...(ngDevMode ? [{ debugName: "_popupSettings" }] : []));
+    _virtualSettings = signal(undefined, ...(ngDevMode ? [{ debugName: "_virtualSettings" }] : []));
+    _size = signal(undefined, ...(ngDevMode ? [{ debugName: "_size" }] : []));
+    _rounded = signal(undefined, ...(ngDevMode ? [{ debugName: "_rounded" }] : []));
+    _fillMode = signal(undefined, ...(ngDevMode ? [{ debugName: "_fillMode" }] : []));
     constructor(wrapper, localization, popupService, selectionService, navigationService, disabledItemsService, dataService, _zone, renderer, cdr, injector, adaptiveService) {
         this.wrapper = wrapper;
         this.localization = localization;
@@ -8194,6 +8396,14 @@ class DropDownListComponent {
     }
     ngAfterViewInit() {
         this.windowSize = this.adaptiveService.size;
+        const control = this.formControl;
+        if (control && control.events) {
+            this.subs.add(control.events.subscribe(e => {
+                if (e instanceof TouchedChangeEvent) {
+                    this.cdr.markForCheck();
+                }
+            }));
+        }
     }
     /**
      * @hidden
@@ -8288,17 +8498,20 @@ class DropDownListComponent {
         // The Promise is required to open the popup on load.
         // Otherwise, the "Expression has changed..." type error will be thrown.
         Promise.resolve(null).then(() => {
-            const shouldOpen = isPresent(open) ? open : !this._open;
+            const shouldOpen = isPresent(open) ? open : !this._open();
+            if (shouldOpen) {
+                this.focus();
+            }
             this._toggle(shouldOpen);
         });
     }
     _toggle(open) {
-        this._open = open;
+        this._open.set(open);
         this.destroyPopup();
         if (this.isActionSheetExpanded) {
             this.closeActionSheet();
         }
-        if (this._open) {
+        if (this._open()) {
             this.createPopup();
         }
     }
@@ -8333,7 +8546,7 @@ class DropDownListComponent {
      * Returns the current open state. Returns `true` if the popup or actionSheet is open.
      */
     get isOpen() {
-        return isTruthy(this._open || this.isActionSheetExpanded);
+        return isTruthy(this._open() || this.isActionSheetExpanded);
     }
     /**
      * Resets the value of the `DropDownListComponent`. If you use the `reset` method to clear the value, the model does not update automatically and the `selectionChange` and `valueChange` events are not fired.
@@ -8369,7 +8582,6 @@ class DropDownListComponent {
      * @hidden
      */
     setDisabledState(isDisabled) {
-        this.cdr.markForCheck();
         this.disabled = isDisabled;
     }
     /**
@@ -8402,7 +8614,7 @@ class DropDownListComponent {
      * @hidden
      */
     getText() {
-        return this.text;
+        return this._text();
     }
     createPopup() {
         if (this.virtual) {
@@ -8470,13 +8682,13 @@ class DropDownListComponent {
     }
     updateState({ dataItem, confirm = false }) {
         this.dataItem = dataItem;
-        this.text = getter(dataItem, this.textField);
+        this._text.set(getter(dataItem, this.textField));
         if (confirm) {
             this._previousDataItem = dataItem;
         }
     }
     clearState() {
-        this.text = undefined;
+        this._text.set(undefined);
         this.dataItem = undefined;
     }
     resetSelection(index) {
@@ -8683,6 +8895,13 @@ class DropDownListComponent {
     componentBlur() {
         if (!this.isActionSheetExpanded) {
             this.isFocused = false;
+            if (isDocumentAvailable()) {
+                setTimeout(() => {
+                    if (this.searchInput && document.activeElement === this.searchInput.nativeElement) {
+                        this.searchInput.nativeElement.blur();
+                    }
+                });
+            }
             const selectionPresent = isPresent(this.selectionService.selected[0]);
             const valueHasChanged = selectionPresent && getter(this.value, this.valueField) !== getter(this.dataService.itemAt(this.selectionService.selected[0]), this.valueField);
             if (valueHasChanged ||
@@ -8870,11 +9089,9 @@ class DropDownListComponent {
     }
     assignAriaDescribedBy() {
         const currentValue = this.wrapper.nativeElement.getAttribute('aria-describedby') || '';
-        const trimmed = currentValue.replace(this.valueLabelId, '').trim();
-        // reset the value label ID to force readers to read the new value
-        this.valueLabelId = `k-${guid()}`;
-        // add to the current value - don't replace it
-        const newValue = `${this.valueLabelId} ${trimmed}`.trim();
+        const trimmed = currentValue.replace(this.valueLabelId(), '').trim();
+        this.valueLabelId.set(`k-${guid()}`);
+        const newValue = `${this.valueLabelId()} ${trimmed}`.trim();
         this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-describedby', newValue);
     }
     setComponentClasses() {
@@ -8956,7 +9173,7 @@ class DropDownListComponent {
           listboxLabel="Options"
           >
         </ng-container>
-        <span class="k-input-inner" unselectable="on" [id]="valueLabelId" (click)="$event.preventDefault()">
+        <span class="k-input-inner" unselectable="on" [id]="valueLabelId()" (click)="$event.preventDefault()">
           <span class="k-input-value-text">
             @if (valueTemplate) {
               <ng-template
@@ -9096,11 +9313,13 @@ class DropDownListComponent {
             </ng-template>
           }
         </ng-template>
-        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: AdaptiveRendererComponent, selector: "kendo-adaptive-renderer", inputs: ["title", "subtitle", "showTextInput", "sharedPopupActionSheetTemplate", "text", "placeholder", "searchBarValue", "filterable", "showListContainer"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: FilterInputDirective, selector: "[filterInput]", inputs: ["filterInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "ariaLabel", "isMultiselect", "isActionSheetExpanded", "showStickyHeader", "rowWidth", "columnsWidths", "customItemTemplate", "text", "allowCustom", "defaultItem", "selectAll", "selectAllText", "isAllSelected", "isPartiallySelected", "data", "size", "rounded"], outputs: ["selectAllClick", "onClick", "pageChange", "listResize", "popupListScroll"] }] });
+        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: AdaptiveRendererComponent, selector: "kendo-adaptive-renderer", inputs: ["title", "subtitle", "showTextInput", "sharedPopupActionSheetTemplate", "text", "placeholder", "searchBarValue", "filterable", "showListContainer"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: FilterInputDirective, selector: "[filterInput]", inputs: ["filterInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "ariaLabel", "isMultiselect", "isActionSheetExpanded", "showStickyHeader", "rowWidth", "columnsWidths", "customItemTemplate", "text", "allowCustom", "defaultItem", "selectAll", "selectAllText", "isAllSelected", "isPartiallySelected", "data", "size", "rounded"], outputs: ["selectAllClick", "onClick", "pageChange", "listResize", "popupListScroll"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: DropDownListComponent, decorators: [{
             type: Component,
             args: [{
+                    selector: 'kendo-dropdownlist',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     exportAs: 'kendoDropDownList',
                     providers: [
                         DROPDOWNLIST_VALUE_ACCESSOR,
@@ -9122,7 +9341,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
                         { provide: KENDO_WEBMCP_HOST, useExisting: forwardRef(() => DropDownListComponent) },
                         provideComponentName('dropdownlist')
                     ],
-                    selector: 'kendo-dropdownlist',
                     template: `
         <ng-container kendoDropDownListLocalizedMessages
           i18n-noDataText="kendo.dropdownlist.noDataText|The text displayed in the popup when there are no items"
@@ -9147,7 +9365,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
           listboxLabel="Options"
           >
         </ng-container>
-        <span class="k-input-inner" unselectable="on" [id]="valueLabelId" (click)="$event.preventDefault()">
+        <span class="k-input-inner" unselectable="on" [id]="valueLabelId()" (click)="$event.preventDefault()">
           <span class="k-input-value-text">
             @if (valueTemplate) {
               <ng-template
@@ -9943,12 +10161,30 @@ class MultiSelectComponent {
     tagListId = `k-${guid()}`;
     tagPrefix = "tag-" + guid();
     optionPrefix = "option-" + guid();
-    popupRef;
-    text;
-    tags;
-    isAllSelected = false;
-    isPartiallySelected = false;
-    focusedTagIndex = undefined;
+    get popupRef() {
+        return this._popupRef();
+    }
+    set popupRef(value) {
+        this._popupRef.set(value);
+    }
+    get isAllSelected() {
+        return this._isAllSelected();
+    }
+    set isAllSelected(value) {
+        this._isAllSelected.set(value);
+    }
+    set isPartiallySelected(value) {
+        this._isPartiallySelected.set(value);
+    }
+    get isPartiallySelected() {
+        return this._isPartiallySelected();
+    }
+    get text() { return this._text(); }
+    set text(v) { this._text.set(v); }
+    get tags() { return this._tags(); }
+    set tags(v) { this._tags.set(v); }
+    get focusedTagIndex() { return this._focusedTagIndex(); }
+    set focusedTagIndex(v) { this._focusedTagIndex.set(v); }
     /**
      * @hidden
      */
@@ -10137,7 +10373,8 @@ class MultiSelectComponent {
      * Shows or hides the current group sticky header when using grouped data.
      * By default the sticky header is displayed ([see example](https://www.telerik.com/kendo-angular-ui/components/dropdowns/autocomplete/grouping#sticky-header)).
      */
-    showStickyHeader = true;
+    set showStickyHeader(v) { this._showStickyHeader.set(v); }
+    get showStickyHeader() { return this._showStickyHeader(); }
     /**
      * Renders a Select All sticky header item at the top of the popup list.
      * Clicking it selects or deselects all currently available items and triggers the `valueChange` event.
@@ -10157,19 +10394,22 @@ class MultiSelectComponent {
     /**
      * @hidden
      */
-    focusableId = `k-${guid()}`;
+    set focusableId(v) { this._focusableId.set(v); }
+    get focusableId() { return this._focusableId(); }
     /**
      * Controls whether the options list closes after item selection finishes ([see example](https://www.telerik.com/kendo-angular-ui/components/dropdowns/multiselect/open-state#keeping-the-options-list-open-while-on-focus)).
      * Set to `false` to keep the list open while the component has focus.
      *
      * @default true
      */
-    autoClose = true;
+    set autoClose(v) { this._autoClose.set(v); }
+    get autoClose() { return this._autoClose(); }
     /**
      * Controls the loading state of the MultiSelect.
      * Set to `true` to display the loading indicator.
      */
-    loading;
+    set loading(v) { this._loading.set(v); }
+    get loading() { return this._loading(); }
     /**
      * Sets the data source for the MultiSelect.
      * Provide the data as an array of items.
@@ -10201,7 +10441,7 @@ class MultiSelectComponent {
      * > The component ignores selected values that don't exist in the data source.
      */
     set value(values) {
-        this._value = values ? values : [];
+        this._value.set(values ? values : []);
         if (!this.differ && this.value) {
             this.differ = this.differs.find(this.value).create();
         }
@@ -10211,26 +10451,29 @@ class MultiSelectComponent {
         }
     }
     get value() {
-        return this._value;
+        return this._value();
     }
     /**
      * Sets the field name that contains the item value in the data objects.
      * Skip this property when your data contains only primitive values.
      * Supports nested property paths like `category.id`.
      */
-    valueField;
+    set valueField(v) { this._valueField.set(v); }
+    get valueField() { return this._valueField(); }
     /**
      * Sets the field name that contains the item text in the data objects.
      * Skip this property when your data contains only primitive values.
      * Supports nested property paths like `category.name`.
      */
-    textField;
+    set textField(v) { this._textField.set(v); }
+    get textField() { return this._textField(); }
     /**
      * Sets the [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) attribute of the component.
      *
      * @default 0
      */
-    tabindex = 0;
+    set tabindex(v) { this._tabindex.set(v); }
+    get tabindex() { return this._tabindex(); }
     /**
      * @hidden
      */
@@ -10248,10 +10491,10 @@ class MultiSelectComponent {
         if (size) {
             this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('input', size));
         }
-        this._size = size;
+        this._size.set(size);
     }
     get size() {
-        return this._size;
+        return this._size();
     }
     /**
      * Sets the border radius of the component. The default value is set by the Kendo theme.
@@ -10261,10 +10504,10 @@ class MultiSelectComponent {
         if (rounded) {
             this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(rounded));
         }
-        this._rounded = rounded;
+        this._rounded.set(rounded);
     }
     get rounded() {
-        return this._rounded;
+        return this._rounded();
     }
     /**
      * Sets the fill mode of the component. The default value is set by the Kendo theme.
@@ -10274,20 +10517,20 @@ class MultiSelectComponent {
         if (fillMode) {
             this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', fillMode));
         }
-        this._fillMode = fillMode;
+        this._fillMode.set(fillMode);
     }
     get fillMode() {
-        return this._fillMode;
+        return this._fillMode();
     }
     /**
      * Sets the placeholder text for the MultiSelect input.
      * When the values are selected, it disappears.
      */
     set placeholder(text) {
-        this._placeholder = text || '';
+        this._placeholder.set(text || '');
     }
     get placeholder() {
-        return this.selectedDataItems.length ? '' : this._placeholder;
+        return this.selectedDataItems.length ? '' : this._placeholder();
     }
     /**
      * Controls the adaptive mode behavior of the component.
@@ -10295,17 +10538,20 @@ class MultiSelectComponent {
      *
      * @default "none"
      */
-    adaptiveMode = 'none';
+    set adaptiveMode(v) { this._adaptiveMode.set(v); }
+    get adaptiveMode() { return this._adaptiveMode(); }
     /**
      * Sets the title text for the ActionSheet in adaptive mode.
      * Uses the component's label text by default.
      */
-    adaptiveTitle = '';
+    set adaptiveTitle(v) { this._adaptiveTitle.set(v); }
+    get adaptiveTitle() { return this._adaptiveTitle(); }
     /**
      * Sets the subtitle text for the ActionSheet in adaptive mode.
      * No subtitle appears by default.
      */
-    adaptiveSubtitle;
+    set adaptiveSubtitle(v) { this._adaptiveSubtitle.set(v); }
+    get adaptiveSubtitle() { return this._adaptiveSubtitle(); }
     /**
      * @hidden
      */
@@ -10319,7 +10565,8 @@ class MultiSelectComponent {
      *
      * @default false
      */
-    disabled = false;
+    set disabled(v) { this._disabled.set(v); }
+    get disabled() { return this._disabled(); }
     /**
      * Determines wether the item will be disabled. The function is executed for each data item.
      * The function receives the item as an argument and should return `true` if the item is disabled.
@@ -10337,10 +10584,10 @@ class MultiSelectComponent {
      * @default false
      */
     set checkboxes(settings) {
-        this._checkboxes = normalizeCheckboxesSettings(settings);
+        this._checkboxes.set(normalizeCheckboxesSettings(settings));
     }
     get checkboxes() {
-        return this._checkboxes;
+        return this._checkboxes();
     }
     /**
      * Controls the read-only state of the component.
@@ -10348,33 +10595,35 @@ class MultiSelectComponent {
      *
      * @default false
      */
-    readonly = false;
+    get readonly() { return this._readonly(); }
+    set readonly(v) { this._readonly.set(v); }
     /**
      * Enables the filtering functionality of the MultiSelect.
      * Set to `true` to allow users to filter the data by typing.
      *
      * @default false
      */
-    filterable = false;
+    set filterable(v) { this._filterable.set(v); }
+    get filterable() { return this._filterable(); }
     /**
      * Enables virtualization to improve performance with large datasets.
      * Pass `true` for default settings or an object to configure virtualization.
      */
     set virtual(settings) {
-        this._virtualSettings = normalizeVirtualizationSettings(settings);
+        this._virtualSettings.set(normalizeVirtualizationSettings(settings));
     }
     get virtual() {
-        return this._virtualSettings;
+        return this._virtualSettings();
     }
     /**
      * Configures the popup appearance and behavior.
      * Set properties like `animate`, `width`, `height`, `popupClass`, and `appendTo`.
      */
     set popupSettings(settings) {
-        this._popupSettings = Object.assign({ animate: true }, settings);
+        this._popupSettings.set(Object.assign({ animate: true }, settings));
     }
     get popupSettings() {
-        return this._popupSettings;
+        return this._popupSettings();
     }
     /**
      * Sets the height of the options list in the popup.
@@ -10382,29 +10631,28 @@ class MultiSelectComponent {
      *
      * @default 200
      */
-    set listHeight(_listHeight) {
-        this._listHeight = _listHeight;
+    set listHeight(v) {
+        this._listHeight.set(v);
     }
     get listHeight() {
         if (this.isAdaptive) {
             return;
         }
-        return this._listHeight;
+        return this._listHeight();
     }
-    _listHeight = 200;
     /**
      * Controls the type of selected values.
      * Set to `true` for primitive values or `false` for object references.
      * When undefined, the component determines the type based on `valueField`.
      */
     set valuePrimitive(isPrimitive) {
-        this._valuePrimitive = isPrimitive;
+        this._valuePrimitive.set(isPrimitive);
     }
     get valuePrimitive() {
-        if (!isPresent(this._valuePrimitive)) {
+        if (!isPresent(this._valuePrimitive())) {
             return !isPresent(this.valueField);
         }
-        return this._valuePrimitive;
+        return this._valuePrimitive();
     }
     /**
      * Controls whether a clear button appears when items are selected.
@@ -10412,14 +10660,16 @@ class MultiSelectComponent {
      *
      * @default true
      */
-    clearButton = true;
+    set clearButton(v) { this._clearButton.set(v); }
+    get clearButton() { return this._clearButton(); }
     /**
      * Sets a function that transforms selected data items into display tags.
      * Use this to customize how selected items appear as tags.
      *
      * @default (tags) => tags || []
      */
-    tagMapper = (tags) => tags || [];
+    set tagMapper(fn) { this._tagMapper.set(fn); }
+    get tagMapper() { return this._tagMapper(); }
     /**
      * Allows users to add custom values not present in the data source.
      * Set to `true` to enable custom value input.
@@ -10427,20 +10677,14 @@ class MultiSelectComponent {
      *
      * @default false
      */
-    allowCustom = false;
+    set allowCustom(v) { this._allowCustom.set(v); }
+    get allowCustom() { return this._allowCustom(); }
     /**
      * Sets a function that normalizes custom user input into data items.
      * Use this when your data items differ from simple strings.
      */
-    valueNormalizer = (text) => text.pipe(map((userInput) => {
-        const comparer = (item) => typeof item === 'string' && userInput.toLowerCase() === item.toLowerCase();
-        const matchingValue = this.value.find(comparer);
-        if (matchingValue) {
-            return matchingValue;
-        }
-        const matchingItem = this.dataService.find(comparer);
-        return matchingItem ? matchingItem : userInput;
-    }));
+    set valueNormalizer(fn) { this._valueNormalizer.set(fn); }
+    get valueNormalizer() { return this._valueNormalizer(); }
     /**
      * Sets HTML attributes for the inner input element.
      * You cannot change attributes essential for component functionality.
@@ -10448,7 +10692,8 @@ class MultiSelectComponent {
      * @remarks
      * This property is related to accessibility.
      */
-    inputAttributes;
+    set inputAttributes(v) { this._inputAttributes.set(v); }
+    get inputAttributes() { return this._inputAttributes(); }
     /**
      * Fires when the user types in the input field.
      * Use this event to filter the data source based on user input.
@@ -10571,9 +10816,11 @@ class MultiSelectComponent {
     }
     disabledIndices;
     initialized = false;
-    _size;
-    _rounded;
-    _fillMode;
+    _isPartiallySelected = signal(false, ...(ngDevMode ? [{ debugName: "_isPartiallySelected" }] : []));
+    _isAllSelected = signal(null, ...(ngDevMode ? [{ debugName: "_isAllSelected" }] : []));
+    _size = signal(undefined, ...(ngDevMode ? [{ debugName: "_size" }] : []));
+    _rounded = signal(undefined, ...(ngDevMode ? [{ debugName: "_rounded" }] : []));
+    _fillMode = signal(undefined, ...(ngDevMode ? [{ debugName: "_fillMode" }] : []));
     _valueHolder = [];
     isCustomValueSelected = false;
     preserveFocusIndex = null;
@@ -10603,6 +10850,7 @@ class MultiSelectComponent {
             : pageData;
         return data;
     }
+    _focusedTagIndex = signal(undefined, ...(ngDevMode ? [{ debugName: "_focusedTagIndex" }] : []));
     constructor(wrapper, localization, popupService, dataService, selectionService, navigationService, disabledItemsService, cdr, differs, renderer, _zone, injector, adaptiveService) {
         this.wrapper = wrapper;
         this.localization = localization;
@@ -10822,7 +11070,7 @@ class MultiSelectComponent {
             this.addCustomValue(this.text);
             this.addCustomValue(text);
         }
-        this.text = text;
+        this._text.set(text);
         if (text && !this.isOpen) {
             this.openPopup();
         }
@@ -10852,7 +11100,7 @@ class MultiSelectComponent {
         if (this.filterable && this.text) {
             this.filterChange.emit("");
         }
-        this.text = "";
+        this._text.set('');
         /* Clearing the value from the input as the setInputSize calculation will be incorrect otherwise.
          Calling cdr.detectChanges to clear the input value as a result of property binding
          causes JAWS to read outdated tag values in IE upon tag selection for some reason. */
@@ -10983,13 +11231,23 @@ class MultiSelectComponent {
         this.searchbar.setInputSize();
         this.subs.add(this.renderer.listen(this.wrapper.nativeElement, 'mousedown', this.handleMousedown.bind(this)));
         this.subs.add(this.renderer.listen(this.wrapper.nativeElement, 'keydown', this.handleKeydown.bind(this)));
-        this._zone.onStable.pipe(take(1)).subscribe(() => {
-            const ariaLabel = this.searchbar.input.nativeElement.getAttribute('aria-labelledby') ||
-                this.searchbar.input.nativeElement.getAttribute('data-kendo-label-id');
-            if (ariaLabel) {
-                this.renderer.setAttribute(this.tagList.hostElement.nativeElement, 'aria-labelledby', ariaLabel);
-            }
+        runInInjectionContext(this.injector, () => {
+            afterNextRender(() => {
+                const ariaLabel = this.searchbar.input.nativeElement.getAttribute('aria-labelledby') ||
+                    this.searchbar.input.nativeElement.getAttribute('data-kendo-label-id');
+                if (ariaLabel) {
+                    this.renderer.setAttribute(this.tagList.hostElement.nativeElement, 'aria-labelledby', ariaLabel);
+                }
+            });
         });
+        const control = this.formControl;
+        if (control && control.events) {
+            this.subs.add(control.events.subscribe(e => {
+                if (e instanceof TouchedChangeEvent) {
+                    this.cdr.markForCheck();
+                }
+            }));
+        }
     }
     ngOnDestroy() {
         this._toggle(false);
@@ -11006,23 +11264,22 @@ class MultiSelectComponent {
         // The Promise is required for opening the popup on load.
         // Otherwise, the "Expression has changed..." type error will be thrown.
         Promise.resolve(null).then(() => {
-            const shouldOpen = isPresent(open) ? open : !this._open;
+            const shouldOpen = isPresent(open) ? open : !this._open();
             this._toggle(shouldOpen);
-            this.cdr.markForCheck();
         });
     }
     /**
      * Returns the current open state. Returns `true` if the popup or actionSheet is open.
      */
     get isOpen() {
-        return isTruthy(this._open || this.isActionSheetExpanded);
+        return isTruthy(this._open() || this.isActionSheetExpanded);
     }
     /**
      * Resets the MultiSelect by clearing the text and value.
      * This method does not trigger the `selectionChange` and `valueChange` events.
      */
     reset() {
-        this.text = "";
+        this._text.set('');
         this.value = [];
     }
     /**
@@ -11054,7 +11311,6 @@ class MultiSelectComponent {
      * @hidden
      */
     setDisabledState(isDisabled) {
-        this.cdr.markForCheck();
         this.disabled = isDisabled;
     }
     /**
@@ -11068,13 +11324,43 @@ class MultiSelectComponent {
     }
     onChangeCallback = (_) => { };
     onTouchedCallback = (_) => { };
-    _placeholder = '';
-    _open = false;
-    _value = [];
-    _popupSettings = { animate: true };
-    _virtualSettings;
-    _valuePrimitive;
-    _checkboxes = { enabled: false };
+    _popupRef = signal(null, ...(ngDevMode ? [{ debugName: "_popupRef" }] : []));
+    _placeholder = signal('', ...(ngDevMode ? [{ debugName: "_placeholder" }] : []));
+    _open = signal(false, ...(ngDevMode ? [{ debugName: "_open" }] : []));
+    _value = signal([], ...(ngDevMode ? [{ debugName: "_value" }] : []));
+    _popupSettings = signal({ animate: true }, ...(ngDevMode ? [{ debugName: "_popupSettings" }] : []));
+    _virtualSettings = signal(undefined, ...(ngDevMode ? [{ debugName: "_virtualSettings" }] : []));
+    _valuePrimitive = signal(undefined, ...(ngDevMode ? [{ debugName: "_valuePrimitive" }] : []));
+    _checkboxes = signal({ enabled: false }, ...(ngDevMode ? [{ debugName: "_checkboxes" }] : []));
+    _text = signal(undefined, ...(ngDevMode ? [{ debugName: "_text" }] : []));
+    _tags = signal(undefined, ...(ngDevMode ? [{ debugName: "_tags" }] : []));
+    _showStickyHeader = signal(true, ...(ngDevMode ? [{ debugName: "_showStickyHeader" }] : []));
+    _focusableId = signal(`k-${guid()}`, ...(ngDevMode ? [{ debugName: "_focusableId" }] : []));
+    _autoClose = signal(true, ...(ngDevMode ? [{ debugName: "_autoClose" }] : []));
+    _loading = signal(undefined, ...(ngDevMode ? [{ debugName: "_loading" }] : []));
+    _valueField = signal(undefined, ...(ngDevMode ? [{ debugName: "_valueField" }] : []));
+    _textField = signal(undefined, ...(ngDevMode ? [{ debugName: "_textField" }] : []));
+    _tabindex = signal(0, ...(ngDevMode ? [{ debugName: "_tabindex" }] : []));
+    _adaptiveMode = signal('none', ...(ngDevMode ? [{ debugName: "_adaptiveMode" }] : []));
+    _adaptiveTitle = signal('', ...(ngDevMode ? [{ debugName: "_adaptiveTitle" }] : []));
+    _adaptiveSubtitle = signal(undefined, ...(ngDevMode ? [{ debugName: "_adaptiveSubtitle" }] : []));
+    _disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
+    _readonly = signal(false, ...(ngDevMode ? [{ debugName: "_readonly" }] : []));
+    _filterable = signal(false, ...(ngDevMode ? [{ debugName: "_filterable" }] : []));
+    _clearButton = signal(true, ...(ngDevMode ? [{ debugName: "_clearButton" }] : []));
+    _tagMapper = signal((tags) => tags || [], ...(ngDevMode ? [{ debugName: "_tagMapper" }] : []));
+    _allowCustom = signal(false, ...(ngDevMode ? [{ debugName: "_allowCustom" }] : []));
+    _valueNormalizer = signal((text) => text.pipe(map((userInput) => {
+        const comparer = (item) => typeof item === 'string' && userInput.toLowerCase() === item.toLowerCase();
+        const matchingValue = this.value.find(comparer);
+        if (matchingValue) {
+            return matchingValue;
+        }
+        const matchingItem = this.dataService.find(comparer);
+        return matchingItem ? matchingItem : userInput;
+    })), ...(ngDevMode ? [{ debugName: "_valueNormalizer" }] : []));
+    _inputAttributes = signal(undefined, ...(ngDevMode ? [{ debugName: "_inputAttributes" }] : []));
+    _listHeight = signal(200, ...(ngDevMode ? [{ debugName: "_listHeight" }] : []));
     _isFocused = false;
     set isFocused(isFocused) {
         this.renderer[isFocused ? 'addClass' : 'removeClass'](this.wrapper.nativeElement, 'k-focus');
@@ -11243,7 +11529,9 @@ class MultiSelectComponent {
                 const itemIndex = this.dataService.indexOf(newValue);
                 const customItem = itemIndex === -1;
                 if (this.value.indexOf(newValue) === -1) {
-                    !this.isActionSheetExpanded && (this.tags = this.buildTags([...this.selectedDataItems, normalizedValue]));
+                    if (!this.isActionSheetExpanded) {
+                        this.tags = this.buildTags([...this.selectedDataItems, normalizedValue]);
+                    }
                     if (!customItem) {
                         this.selectionService.add(itemIndex);
                     }
@@ -11386,6 +11674,7 @@ class MultiSelectComponent {
             this.selectionService.selectFromTo(0, dataItemsCount - 1);
             this.selectionService.emitMultipleAddedRemoved();
         }
+        this.cdr.markForCheck();
     }
     handleSelectAllToBeginning() {
         const selectedItemsCount = this.selectionService.selected.length;
@@ -11565,14 +11854,14 @@ class MultiSelectComponent {
         return eventArgs.isDefaultPrevented();
     }
     _toggle(open) {
-        this._open = open;
+        this._open.set(open);
         this.destroyPopup();
         if (this.isActionSheetExpanded) {
             this.actionSheet.toggle(false);
             this.closed.emit();
             this.isFocused = false;
         }
-        if (this._open) {
+        if (this._open()) {
             this.createPopup();
         }
     }
@@ -11624,7 +11913,7 @@ class MultiSelectComponent {
             if (!this.dataService.grouped) {
                 setListBoxAriaLabelledBy(this.optionsList, this.searchbar.input, this.renderer);
             }
-            this.optionsList.scrollToItem(this.selectionService.focused);
+            this.optionsList?.scrollToItem(this.selectionService.focused);
             this.selectionService.focus(this.selectionService.focused);
             this.opened.emit();
         });
@@ -12025,12 +12314,14 @@ class MultiSelectComponent {
             </ng-template>
           }
         </ng-template>
-        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { kind: "directive", type: SharedDropDownEventsDirective, selector: "[kendoDropDownSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }, { kind: "component", type: TagListComponent, selector: "kendo-taglist", inputs: ["tags", "textField", "valueField", "valueDepth", "focused", "template", "groupTemplate", "disabled", "tagPrefix", "id", "ariaLabel", "size", "rounded", "fillMode", "disabledIndices"], outputs: ["removeTag"] }, { kind: "component", type: SearchBarComponent, selector: "input[kendoSearchbar]", inputs: ["tagListId", "readonly", "disabled", "isRequired", "isSuggestable", "hasListAutocomplete", "userInput", "suggestedText", "inputAttributes", "id", "activeDescendant", "tabIndex", "isLoading", "ariaControls", "ariaExpanded", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { 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"] }, { kind: "component", type: AdaptiveRendererComponent, selector: "kendo-adaptive-renderer", inputs: ["title", "subtitle", "showTextInput", "sharedPopupActionSheetTemplate", "text", "placeholder", "searchBarValue", "filterable", "showListContainer"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "ariaLabel", "isMultiselect", "isActionSheetExpanded", "showStickyHeader", "rowWidth", "columnsWidths", "customItemTemplate", "text", "allowCustom", "defaultItem", "selectAll", "selectAllText", "isAllSelected", "isPartiallySelected", "data", "size", "rounded"], outputs: ["selectAllClick", "onClick", "pageChange", "listResize", "popupListScroll"] }] });
+        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { kind: "directive", type: SharedDropDownEventsDirective, selector: "[kendoDropDownSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }, { kind: "component", type: TagListComponent, selector: "kendo-taglist", inputs: ["tags", "textField", "valueField", "valueDepth", "focused", "template", "groupTemplate", "disabled", "tagPrefix", "id", "ariaLabel", "size", "rounded", "fillMode", "disabledIndices"], outputs: ["removeTag"] }, { kind: "component", type: SearchBarComponent, selector: "input[kendoSearchbar]", inputs: ["tagListId", "readonly", "disabled", "isRequired", "isSuggestable", "hasListAutocomplete", "userInput", "suggestedText", "inputAttributes", "id", "activeDescendant", "tabIndex", "isLoading", "ariaControls", "ariaExpanded", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { 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"] }, { kind: "component", type: AdaptiveRendererComponent, selector: "kendo-adaptive-renderer", inputs: ["title", "subtitle", "showTextInput", "sharedPopupActionSheetTemplate", "text", "placeholder", "searchBarValue", "filterable", "showListContainer"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "ariaLabel", "isMultiselect", "isActionSheetExpanded", "showStickyHeader", "rowWidth", "columnsWidths", "customItemTemplate", "text", "allowCustom", "defaultItem", "selectAll", "selectAllText", "isAllSelected", "isPartiallySelected", "data", "size", "rounded"], outputs: ["selectAllClick", "onClick", "pageChange", "listResize", "popupListScroll"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: MultiSelectComponent, decorators: [{
             type: Component,
             args: [{
+                    selector: 'kendo-multiselect',
                     exportAs: 'kendoMultiSelect',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     providers: [
                         MULTISELECT_VALUE_ACCESSOR,
                         DataService,
@@ -12053,7 +12344,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
                         },
                         provideComponentName('multiselect')
                     ],
-                    selector: 'kendo-multiselect',
                     template: `
         <ng-container kendoMultiSelectLocalizedMessages
           i18n-noDataText="kendo.multiselect.noDataText|The text displayed in the popup when there are no items"
@@ -12684,8 +12974,10 @@ class MultiColumnComboBoxComponent extends ComboBoxComponent {
     set headerTable(headerTable) {
         this._headerTable = headerTable;
         if (this.headerTable) {
-            this.zone.onStable.pipe(take(1)).subscribe(() => {
-                this.rowWidth = this.calculateRowWidth();
+            runInInjectionContext(this.injector, () => {
+                afterNextRender(() => {
+                    this.rowWidth.set(this.calculateRowWidth());
+                });
             });
         }
     }
@@ -12696,18 +12988,20 @@ class MultiColumnComboBoxComponent extends ComboBoxComponent {
      * @hidden
      */
     set headerColumns(columns) {
-        this.zone.onStable.pipe(take(1)).subscribe(() => {
-            this.headerColumnWidths = columns.map(column => column.nativeElement.offsetWidth);
+        runInInjectionContext(this.injector, () => {
+            afterNextRender(() => {
+                this.headerColumnWidths.set(columns.map(column => column.nativeElement.offsetWidth));
+            });
         });
     }
     /**
      * @hidden
      */
-    rowWidth;
+    rowWidth = signal(undefined, ...(ngDevMode ? [{ debugName: "rowWidth" }] : []));
     /**
      * @hidden
      */
-    headerColumnWidths = [];
+    headerColumnWidths = signal([], ...(ngDevMode ? [{ debugName: "headerColumnWidths" }] : []));
     /**
      * @hidden
      */
@@ -12766,12 +13060,20 @@ class MultiColumnComboBoxComponent extends ComboBoxComponent {
         this.updateColumnsMediaState();
         this.addWindowResizeListener();
         this.windowSize = this.adaptiveService.size;
-        this.rowWidth = this.calculateRowWidth();
+        this.rowWidth.set(this.calculateRowWidth());
         this.totalColumnsWidth = this.columns.reduce((total, currentColumn) => total + currentColumn.width, 0);
         this.columnsChangeSubscription = this.columns.changes.subscribe(() => {
-            this.rowWidth = this.calculateRowWidth();
+            this.rowWidth.set(this.calculateRowWidth());
             this.totalColumnsWidth = this.columns.reduce((total, currentColumn) => total + currentColumn.width, 0);
         });
+        const control = this.formControl;
+        if (control && control.events) {
+            this.subs.add(control.events.subscribe(e => {
+                if (e instanceof TouchedChangeEvent) {
+                    this.cdr.markForCheck();
+                }
+            }));
+        }
         this.cdr.detectChanges();
     }
     ngOnDestroy() {
@@ -12815,7 +13117,7 @@ class MultiColumnComboBoxComponent extends ComboBoxComponent {
         if (!this.virtual) {
             return this.columns.get(index).width;
         }
-        return this.headerColumnWidths[index];
+        return this.headerColumnWidths()[index];
     }
     verifySettings() {
         if (!isDevMode()) {
@@ -13122,8 +13424,8 @@ class MultiColumnComboBoxComponent extends ComboBoxComponent {
             [id]="listBoxId"
             [virtual]="virtual"
             [type]="'dropdowngrid'"
-            [rowWidth]="rowWidth"
             [columnsWidths]="visibleColumnsWidths"
+            [rowWidth]="rowWidth()"
             [showStickyHeader]="showStickyHeader"
             [ariaLabel]="messageFor('listboxLabel')"
             (pageChange)="pageChange($event)"
@@ -13164,11 +13466,13 @@ class MultiColumnComboBoxComponent extends ComboBoxComponent {
           }
         </div>
         </ng-template>
-        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { kind: "directive", type: SharedDropDownEventsDirective, selector: "[kendoDropDownSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }, { kind: "component", type: SearchBarComponent, selector: "input[kendoSearchbar]", inputs: ["tagListId", "readonly", "disabled", "isRequired", "isSuggestable", "hasListAutocomplete", "userInput", "suggestedText", "inputAttributes", "id", "activeDescendant", "tabIndex", "isLoading", "ariaControls", "ariaExpanded", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { 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: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: AdaptiveRendererComponent, selector: "kendo-adaptive-renderer", inputs: ["title", "subtitle", "showTextInput", "sharedPopupActionSheetTemplate", "text", "placeholder", "searchBarValue", "filterable", "showListContainer"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "ariaLabel", "isMultiselect", "isActionSheetExpanded", "showStickyHeader", "rowWidth", "columnsWidths", "customItemTemplate", "text", "allowCustom", "defaultItem", "selectAll", "selectAllText", "isAllSelected", "isPartiallySelected", "data", "size", "rounded"], outputs: ["selectAllClick", "onClick", "pageChange", "listResize", "popupListScroll"] }] });
+        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { kind: "directive", type: SharedDropDownEventsDirective, selector: "[kendoDropDownSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }, { kind: "component", type: SearchBarComponent, selector: "input[kendoSearchbar]", inputs: ["tagListId", "readonly", "disabled", "isRequired", "isSuggestable", "hasListAutocomplete", "userInput", "suggestedText", "inputAttributes", "id", "activeDescendant", "tabIndex", "isLoading", "ariaControls", "ariaExpanded", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { 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: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: AdaptiveRendererComponent, selector: "kendo-adaptive-renderer", inputs: ["title", "subtitle", "showTextInput", "sharedPopupActionSheetTemplate", "text", "placeholder", "searchBarValue", "filterable", "showListContainer"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "ariaLabel", "isMultiselect", "isActionSheetExpanded", "showStickyHeader", "rowWidth", "columnsWidths", "customItemTemplate", "text", "allowCustom", "defaultItem", "selectAll", "selectAllText", "isAllSelected", "isPartiallySelected", "data", "size", "rounded"], outputs: ["selectAllClick", "onClick", "pageChange", "listResize", "popupListScroll"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: MultiColumnComboBoxComponent, decorators: [{
             type: Component,
             args: [{
+                    selector: 'kendo-multicolumncombobox',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     providers: [
                         SelectionService,
                         DataService,
@@ -13202,7 +13506,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
                         },
                         provideComponentName('multicolumncombobox')
                     ],
-                    selector: 'kendo-multicolumncombobox',
                     template: `
         <ng-container
           kendoMultiColumnComboBoxLocalizedMessages
@@ -13435,8 +13738,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
             [id]="listBoxId"
             [virtual]="virtual"
             [type]="'dropdowngrid'"
-            [rowWidth]="rowWidth"
             [columnsWidths]="visibleColumnsWidths"
+            [rowWidth]="rowWidth()"
             [showStickyHeader]="showStickyHeader"
             [ariaLabel]="messageFor('listboxLabel')"
             (pageChange)="pageChange($event)"
@@ -13556,11 +13859,13 @@ class DropDownTreeComponent {
     /**
      * @hidden
      */
-    icon;
+    set icon(value) { this._icon.set(value); }
+    get icon() { return this._icon(); }
     /**
      * @hidden
      */
-    svgIcon;
+    set svgIcon(value) { this._svgIcon.set(value); }
+    get svgIcon() { return this._svgIcon(); }
     /**
      * @hidden
      */
@@ -13601,6 +13906,9 @@ class DropDownTreeComponent {
     get isReadonly() {
         return this.readonly ? '' : null;
     }
+    get isReadonlyClass() {
+        return this.readonly;
+    }
     get hostAriaInvalid() {
         return (this.formControl?.invalid && (this.formControl?.touched || this.formControl?.dirty)) ? true : null;
     }
@@ -13702,23 +14010,25 @@ class DropDownTreeComponent {
     /**
      * Sets and gets the loading state of the DropDownTree.
      */
-    loading;
+    set loading(value) { this._loading.set(value); }
+    get loading() { return this._loading(); }
     /**
      * If set to `true`, renders a button on hovering over the component.
      * Clicking this button resets the value of the component to `undefined` and triggers the `change` event.
      */
-    clearButton = true;
+    set clearButton(value) { this._clearButton.set(value); }
+    get clearButton() { return this._clearButton(); }
     /**
      * Sets the data of the DropDownTree.
      *
      * > The data has to be provided in an array-like list with objects.
      */
     set data(data) {
-        this._nodes = data;
+        this._data.set(data);
         this.setState();
     }
     get data() {
-        return this._nodes;
+        return this._data();
     }
     /**
      * Sets the value of the DropDownTree.
@@ -13727,11 +14037,11 @@ class DropDownTreeComponent {
      *
      */
     set value(newValue) {
-        this._value = newValue;
+        this._value.set(newValue);
         this.setState();
     }
     get value() {
-        return this._value;
+        return this._value();
     }
     /**
      * The fields of the data item that provide the text content of the nodes inside the
@@ -13741,7 +14051,8 @@ class DropDownTreeComponent {
      *
      * > The `textField` property can be set to point to a nested property value - e.g. `category.name`.
      */
-    textField;
+    set textField(value) { this._textField.set(value); }
+    get textField() { return this._textField(); }
     /**
      * The fields of the data item that provide the value of the nodes inside the
      * DropDownTree ([see example](https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdowntree/data-binding)). If the `valueField`
@@ -13750,24 +14061,29 @@ class DropDownTreeComponent {
      *
      * > The `valueField` property can be set to point to a nested property value - e.g. `category.id`.
      */
-    valueField;
+    set valueField(value) { this._valueField.set(value); }
+    get valueField() { return this._valueField(); }
     /**
      * Sets the level in the data set where the value can be found when `valueField` is an Array.
      * The field serves to correctly allocate a data item used when the DropDownTree is initialized with a value.
      */
-    valueDepth;
+    set valueDepth(value) { this._valueDepth.set(value); }
+    get valueDepth() { return this._valueDepth(); }
     /**
      * A function which determines if a specific node has child nodes.
      */
-    hasChildren = hasChildren$1;
+    set hasChildren(fn) { this._hasChildren.set(fn); }
+    get hasChildren() { return this._hasChildren(); }
     /**
      * A function which provides the child nodes for a given parent node.
      */
-    fetchChildren = fetchChildren$1;
+    set fetchChildren(fn) { this._fetchChildren.set(fn); }
+    get fetchChildren() { return this._fetchChildren(); }
     /**
      * Sets the placeholder of the input element of the DropDownTree.
      */
-    placeholder = "";
+    set placeholder(value) { this._placeholder.set(value); }
+    get placeholder() { return this._placeholder(); }
     /**
      * Configures the popup of the DropDownTree.
      *
@@ -13779,21 +14095,21 @@ class DropDownTreeComponent {
      * - `appendTo: "root" | "component" | ViewContainerRef`&mdash;Specifies the component to which the popup will be appended.
      */
     set popupSettings(settings) {
-        this._popupSettings = Object.assign({}, DEFAULT_POPUP_SETTINGS$1, settings);
+        this._popupSettings.set(Object.assign({}, DEFAULT_POPUP_SETTINGS$1, settings));
     }
     get popupSettings() {
-        return this._popupSettings;
+        return this._popupSettings();
     }
     /**
      * Keeps the current `dataItem` object in order to resolve selection.
      * Needs to be provided when `value` is bound in and `valuePrimitive` is set to true.
      */
     set dataItem(item) {
-        this._dataItem = item;
+        this._dataItem.set(item);
         this.setState();
     }
     get dataItem() {
-        return this._dataItem ? this._dataItem : this.value;
+        return this._dataItem() ? this._dataItem() : this.value;
     }
     /**
      * Sets the height of the options list in the popup. By default, `listHeight` is 200px.
@@ -13804,31 +14120,33 @@ class DropDownTreeComponent {
      * When using `adaptiveMode` and the screen size is `small` or `medium` the `listHeight` property is set to null.
      */
     set listHeight(_listHeight) {
-        this._listHeight = _listHeight;
+        this._listHeight.set(_listHeight);
     }
     get listHeight() {
         if (this.isAdaptive) {
             return;
         }
-        return this._listHeight;
+        return this._listHeight();
     }
-    _listHeight = 200;
     /**
      * Sets the disabled state of the component. To learn how to disable the component in reactive forms, refer to the article on [Forms Support](https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdowntree/forms#managing-the-dropdowntree-disabled-state-in-reactive-forms).
      */
-    disabled = false;
+    set disabled(value) { this._disabled.set(value); }
+    get disabled() { return this._disabled(); }
     /**
      * Sets the read-only state of the component.
      *
      * @default false
      */
-    readonly = false;
+    set readonly(value) { this._readonly.set(value); }
+    get readonly() { return this._readonly(); }
     /**
      * Specifies the type of the selected value
      * ([more information and example](https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdowntree/value-binding#primitive-values)).
      * If set to `true`, the selected value has to be of a primitive value.
      */
-    valuePrimitive = false;
+    set valuePrimitive(value) { this._valuePrimitive.set(value); }
+    get valuePrimitive() { return this._valuePrimitive(); }
     /**
      * Specifies the [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
      *
@@ -13837,10 +14155,10 @@ class DropDownTreeComponent {
     set tabindex(value) {
         const providedTabIndex = Number(value);
         const defaultTabIndex = 0;
-        this._tabindex = !isNaN(providedTabIndex) ? providedTabIndex : defaultTabIndex;
+        this._tabindex.set(!isNaN(providedTabIndex) ? providedTabIndex : defaultTabIndex);
     }
     get tabindex() {
-        return this.disabled ? -1 : this._tabindex;
+        return this.disabled ? -1 : this._tabindex();
     }
     /**
      * Sets the size of the component. The default value is set by the Kendo theme.
@@ -13850,10 +14168,10 @@ class DropDownTreeComponent {
         if (size) {
             this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('picker', size));
         }
-        this._size = size;
+        this._size.set(size);
     }
     get size() {
-        return this._size;
+        return this._size();
     }
     /**
      * Sets the border radius of the component. The default value is set by the Kendo theme.
@@ -13863,10 +14181,10 @@ class DropDownTreeComponent {
         if (rounded) {
             this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(rounded));
         }
-        this._rounded = rounded;
+        this._rounded.set(rounded);
     }
     get rounded() {
-        return this._rounded;
+        return this._rounded();
     }
     /**
      * Sets the fillMode of the component. The default value is set by the Kendo theme.
@@ -13876,51 +14194,58 @@ class DropDownTreeComponent {
         if (fillMode) {
             this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('picker', fillMode));
         }
-        this._fillMode = fillMode;
+        this._fillMode.set(fillMode);
     }
     get fillMode() {
-        return this._fillMode;
+        return this._fillMode();
     }
     /**
      * A function that is executed for each data item and determines if a specific item is disabled.
      */
-    itemDisabled = itemDisabled$1;
+    set itemDisabled(fn) { this._itemDisabled.set(fn); }
+    get itemDisabled() { return this._itemDisabled(); }
     /**
      * A function that is executed for each data item and determines if a specific node is expanded.
      */
-    isNodeExpanded;
+    set isNodeExpanded(fn) { this._isNodeExpanded.set(fn); }
+    get isNodeExpanded() { return this._isNodeExpanded(); }
     /**
      * A callback which determines whether a tree node should be rendered as hidden. The utility `.k-hidden` class is used to hide the nodes.
      * Useful for custom filtering implementations.
      */
-    isNodeVisible = isNodeVisible$1;
+    set isNodeVisible(fn) { this._isNodeVisible.set(fn); }
+    get isNodeVisible() { return this._isNodeVisible(); }
     /**
      * Indicates whether the child nodes will be fetched on node expand or will be initially prefetched.
      * @default true
      */
-    loadOnDemand = true;
+    set loadOnDemand(value) { this._loadOnDemand.set(value); }
+    get loadOnDemand() { return this._loadOnDemand(); }
     /**
      * Renders the built-in input element for filtering the DropDownTree.
      * If set to `true`, the component emits the `filterChange` event, which can be used to [filter the DropDownTree manually](https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdowntree/filtering#manual-filtering).
      * A built-in filtering implementation is available to use with the [`kendoDropDownTreeHierarchyBinding`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/dropdowntreehierarchybindingdirective) and [`kendoDropDownTreeFlatBinding`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/dropdowntreeflatbindingdirective) directives.
      */
-    filterable = false;
+    set filterable(value) { this._filterable.set(value); }
+    get filterable() { return this._filterable(); }
     /**
      * @hidden
      */
-    filter = '';
+    set filter(value) { this._filter.set(value); }
+    get filter() { return this._filter(); }
     /**
      * @hidden
      *
      * Used by the kendo-label and kendo-floatinglabel to access and associate the focusable element with the provided label via aria-labelledby.
      */
-    focusableId = `k-${guid()}`;
+    set focusableId(value) { this._focusableId.set(value); }
+    get focusableId() { return this._focusableId(); }
     set isFocused(isFocused) {
         this.renderer[isFocused ? 'addClass' : 'removeClass'](this.wrapper.nativeElement, 'k-focus');
-        this._isFocused = isFocused;
+        this._isFocused.set(isFocused);
     }
     get isFocused() {
-        return this._isFocused;
+        return this._isFocused();
     }
     get width() {
         const wrapperWidth = this.wrapper.nativeElement.offsetWidth;
@@ -13956,15 +14281,18 @@ class DropDownTreeComponent {
     /**
      * @hidden
      */
-    selectedKeys = [];
+    get selectedKeys() { return this._selectedKeys(); }
+    set selectedKeys(value) { this._selectedKeys.set(value); }
     /**
      * @hidden
      */
-    selectBy;
+    get selectBy() { return this._selectBy(); }
+    set selectBy(value) { this._selectBy.set(value); }
     /**
      * @hidden
      */
-    text;
+    get text() { return this._text(); }
+    set text(value) { this._text.set(value); }
     /**
      * @hidden
      */
@@ -13976,17 +14304,20 @@ class DropDownTreeComponent {
     /**
      * Enables or disables the adaptive mode. By default the adaptive rendering is disabled.
      */
-    adaptiveMode = 'none';
+    set adaptiveMode(value) { this._adaptiveMode.set(value); }
+    get adaptiveMode() { return this._adaptiveMode(); }
     /**
      * Sets the title of the ActionSheet that is rendered instead of the Popup when using small screen devices.
      * By default the ActionSheet title uses the text provided for the label of the DropDownTree.
      */
-    adaptiveTitle = '';
+    set adaptiveTitle(value) { this._adaptiveTitle.set(value); }
+    get adaptiveTitle() { return this._adaptiveTitle(); }
     /**
      * Sets the subtitle of the ActionSheet that is rendered instead of the Popup when using small screen devices.
      * By default the ActionSheet does not render a subtitle.
     */
-    adaptiveSubtitle = '';
+    set adaptiveSubtitle(value) { this._adaptiveSubtitle.set(value); }
+    get adaptiveSubtitle() { return this._adaptiveSubtitle(); }
     /**
      * @hidden
      */
@@ -13996,7 +14327,8 @@ class DropDownTreeComponent {
     /**
     * @hidden
     */
-    windowSize = 'large';
+    get windowSize() { return this._windowSize(); }
+    set windowSize(value) { this._windowSize.set(value); }
     /**
      * @hidden
      */
@@ -14082,7 +14414,8 @@ class DropDownTreeComponent {
     /**
      * @hidden
      */
-    allNodesHidden = false;
+    get allNodesHidden() { return this._allNodesHidden(); }
+    set allNodesHidden(value) { this._allNodesHidden.set(value); }
     /**
      * @hidden
      *
@@ -14097,17 +14430,7 @@ class DropDownTreeComponent {
         return ngControl?.control || null;
     }
     treeViewId = `k-${guid()}`;
-    _nodes;
-    _value;
-    _popupSettings = DEFAULT_POPUP_SETTINGS$1;
-    _tabindex = 0;
-    _isFocused = false;
-    _dataItem;
     _treeview;
-    _size;
-    _rounded;
-    _fillMode;
-    _popupRef = signal(null, ...(ngDevMode ? [{ debugName: "_popupRef" }] : []));
     _searchableNodes = [];
     _typedValue = '';
     printableCharacters = new Subject();
@@ -14116,6 +14439,45 @@ class DropDownTreeComponent {
     // Keep an instance of the last focused node for when the popup close is prevented
     // in order to be able to properly restore the focus
     lastNodeOnFocus;
+    _popupRef = signal(undefined, ...(ngDevMode ? [{ debugName: "_popupRef" }] : []));
+    _icon = signal(undefined, ...(ngDevMode ? [{ debugName: "_icon" }] : []));
+    _svgIcon = signal(undefined, ...(ngDevMode ? [{ debugName: "_svgIcon" }] : []));
+    _loading = signal(undefined, ...(ngDevMode ? [{ debugName: "_loading" }] : []));
+    _clearButton = signal(true, ...(ngDevMode ? [{ debugName: "_clearButton" }] : []));
+    _textField = signal(undefined, ...(ngDevMode ? [{ debugName: "_textField" }] : []));
+    _valueField = signal(undefined, ...(ngDevMode ? [{ debugName: "_valueField" }] : []));
+    _valueDepth = signal(undefined, ...(ngDevMode ? [{ debugName: "_valueDepth" }] : []));
+    _hasChildren = signal(hasChildren$1, ...(ngDevMode ? [{ debugName: "_hasChildren" }] : []));
+    _fetchChildren = signal(fetchChildren$1, ...(ngDevMode ? [{ debugName: "_fetchChildren" }] : []));
+    _placeholder = signal('', ...(ngDevMode ? [{ debugName: "_placeholder" }] : []));
+    _disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
+    _readonly = signal(false, ...(ngDevMode ? [{ debugName: "_readonly" }] : []));
+    _valuePrimitive = signal(false, ...(ngDevMode ? [{ debugName: "_valuePrimitive" }] : []));
+    _loadOnDemand = signal(true, ...(ngDevMode ? [{ debugName: "_loadOnDemand" }] : []));
+    _filterable = signal(false, ...(ngDevMode ? [{ debugName: "_filterable" }] : []));
+    _filter = signal('', ...(ngDevMode ? [{ debugName: "_filter" }] : []));
+    _focusableId = signal(`k-${guid()}`, ...(ngDevMode ? [{ debugName: "_focusableId" }] : []));
+    _adaptiveMode = signal('none', ...(ngDevMode ? [{ debugName: "_adaptiveMode" }] : []));
+    _adaptiveTitle = signal('', ...(ngDevMode ? [{ debugName: "_adaptiveTitle" }] : []));
+    _adaptiveSubtitle = signal('', ...(ngDevMode ? [{ debugName: "_adaptiveSubtitle" }] : []));
+    _isNodeExpanded = signal(undefined, ...(ngDevMode ? [{ debugName: "_isNodeExpanded" }] : []));
+    _isNodeVisible = signal(isNodeVisible$1, ...(ngDevMode ? [{ debugName: "_isNodeVisible" }] : []));
+    _itemDisabled = signal(itemDisabled$1, ...(ngDevMode ? [{ debugName: "_itemDisabled" }] : []));
+    _data = signal(undefined, ...(ngDevMode ? [{ debugName: "_data" }] : []));
+    _value = signal(undefined, ...(ngDevMode ? [{ debugName: "_value" }] : []));
+    _popupSettings = signal(DEFAULT_POPUP_SETTINGS$1, ...(ngDevMode ? [{ debugName: "_popupSettings" }] : []));
+    _dataItem = signal(undefined, ...(ngDevMode ? [{ debugName: "_dataItem" }] : []));
+    _listHeight = signal(200, ...(ngDevMode ? [{ debugName: "_listHeight" }] : []));
+    _tabindex = signal(0, ...(ngDevMode ? [{ debugName: "_tabindex" }] : []));
+    _size = signal(undefined, ...(ngDevMode ? [{ debugName: "_size" }] : []));
+    _rounded = signal(undefined, ...(ngDevMode ? [{ debugName: "_rounded" }] : []));
+    _fillMode = signal(undefined, ...(ngDevMode ? [{ debugName: "_fillMode" }] : []));
+    _isFocused = signal(false, ...(ngDevMode ? [{ debugName: "_isFocused" }] : []));
+    _text = signal(undefined, ...(ngDevMode ? [{ debugName: "_text" }] : []));
+    _allNodesHidden = signal(false, ...(ngDevMode ? [{ debugName: "_allNodesHidden" }] : []));
+    _selectedKeys = signal([], ...(ngDevMode ? [{ debugName: "_selectedKeys" }] : []));
+    _selectBy = signal(undefined, ...(ngDevMode ? [{ debugName: "_selectBy" }] : []));
+    _windowSize = signal('large', ...(ngDevMode ? [{ debugName: "_windowSize" }] : []));
     constructor(injector, wrapper, popupService, navigationService, renderer, _zone, cdr, localization, adaptiveService) {
         this.injector = injector;
         this.wrapper = wrapper;
@@ -14184,6 +14546,14 @@ class DropDownTreeComponent {
         this.windowSize = this.adaptiveService.size;
         this.subs.add(this.renderer.listen(this.wrapper.nativeElement, 'click', this.handleClick.bind(this)));
         this.subs.add(this.renderer.listen(this.wrapper.nativeElement, 'keydown', this.handleKeydown.bind(this)));
+        const control = this.formControl;
+        if (control && control.events) {
+            this.subs.add(control.events.subscribe(e => {
+                if (e instanceof TouchedChangeEvent) {
+                    this.cdr.markForCheck();
+                }
+            }));
+        }
     }
     /**
      * @hidden
@@ -14444,7 +14814,6 @@ class DropDownTreeComponent {
      */
     setDisabledState(isDisabled) {
         this.disabled = isDisabled;
-        this.cdr.markForCheck();
     }
     /**
      * @hidden
@@ -14454,10 +14823,12 @@ class DropDownTreeComponent {
         this.filter = value;
         this.filterChange.next(value);
         this.allNodesHidden = this.areNodesHidden(this.nodes);
-        this._zone.onStable.pipe(take(1)).subscribe(() => {
-            if (this.data.length === 0 || this.allNodesHidden || this.filter === '') {
-                this.filterInput?.nativeElement.focus();
-            }
+        runInInjectionContext(this.injector, () => {
+            afterNextRender(() => {
+                if (this.data.length === 0 || this.allNodesHidden || this.filter === '') {
+                    this.filterInput?.nativeElement.focus();
+                }
+            });
         });
     }
     /**
@@ -14645,7 +15016,6 @@ class DropDownTreeComponent {
         else {
             this.clearState();
         }
-        this.cdr.markForCheck();
     }
     clearState() {
         this.text = undefined;
@@ -14811,7 +15181,7 @@ class DropDownTreeComponent {
         this.removeTreeViewFromTabOrder();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: DropDownTreeComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: i2.PopupService }, { token: NavigationService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }, { token: i7.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: DropDownTreeComponent, isStandalone: true, selector: "kendo-dropdowntree", inputs: { icon: "icon", svgIcon: "svgIcon", loading: "loading", clearButton: "clearButton", data: "data", value: "value", textField: "textField", valueField: "valueField", valueDepth: "valueDepth", hasChildren: "hasChildren", fetchChildren: "fetchChildren", placeholder: "placeholder", popupSettings: "popupSettings", dataItem: "dataItem", listHeight: "listHeight", disabled: "disabled", readonly: "readonly", valuePrimitive: "valuePrimitive", tabindex: "tabindex", size: "size", rounded: "rounded", fillMode: "fillMode", itemDisabled: "itemDisabled", isNodeExpanded: "isNodeExpanded", isNodeVisible: "isNodeVisible", loadOnDemand: "loadOnDemand", filterable: "filterable", filter: "filter", focusableId: "focusableId", adaptiveMode: "adaptiveMode", adaptiveTitle: "adaptiveTitle", adaptiveSubtitle: "adaptiveSubtitle" }, outputs: { open: "open", opened: "opened", close: "close", closed: "closed", nodeExpand: "nodeExpand", nodeCollapse: "nodeCollapse", onFocus: "focus", onBlur: "blur", valueChange: "valueChange", filterChange: "filterChange" }, host: { properties: { "class.k-dropdowntree": "this.hostClasses", "class.k-picker": "this.hostClasses", "attr.readonly": "this.isReadonly", "attr.aria-invalid": "this.hostAriaInvalid", "class.k-disabled": "this.isDisabled", "attr.aria-disabled": "this.isDisabled", "class.k-loading": "this.isLoading", "attr.aria-busy": "this.isBusy", "attr.aria-controls": "this.hostAriaControls", "attr.id": "this.id", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabIndex", "attr.role": "this.role", "attr.aria-haspopup": "this.ariaHasPopup", "attr.aria-expanded": "this.isAriaExpanded", "attr.aria-autocomplete": "this.hostAriaAutocomplete", "class.k-readonly": "this.readonly" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: DropDownTreeComponent, isStandalone: true, selector: "kendo-dropdowntree", inputs: { icon: "icon", svgIcon: "svgIcon", loading: "loading", clearButton: "clearButton", data: "data", value: "value", textField: "textField", valueField: "valueField", valueDepth: "valueDepth", hasChildren: "hasChildren", fetchChildren: "fetchChildren", placeholder: "placeholder", popupSettings: "popupSettings", dataItem: "dataItem", listHeight: "listHeight", disabled: "disabled", readonly: "readonly", valuePrimitive: "valuePrimitive", tabindex: "tabindex", size: "size", rounded: "rounded", fillMode: "fillMode", itemDisabled: "itemDisabled", isNodeExpanded: "isNodeExpanded", isNodeVisible: "isNodeVisible", loadOnDemand: "loadOnDemand", filterable: "filterable", filter: "filter", focusableId: "focusableId", adaptiveMode: "adaptiveMode", adaptiveTitle: "adaptiveTitle", adaptiveSubtitle: "adaptiveSubtitle" }, outputs: { open: "open", opened: "opened", close: "close", closed: "closed", nodeExpand: "nodeExpand", nodeCollapse: "nodeCollapse", onFocus: "focus", onBlur: "blur", valueChange: "valueChange", filterChange: "filterChange" }, host: { properties: { "class.k-dropdowntree": "this.hostClasses", "class.k-picker": "this.hostClasses", "attr.readonly": "this.isReadonly", "class.k-readonly": "this.isReadonlyClass", "attr.aria-invalid": "this.hostAriaInvalid", "class.k-disabled": "this.isDisabled", "attr.aria-disabled": "this.isDisabled", "class.k-loading": "this.isLoading", "attr.aria-busy": "this.isBusy", "attr.aria-controls": "this.hostAriaControls", "attr.id": "this.id", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabIndex", "attr.role": "this.role", "attr.aria-haspopup": "this.ariaHasPopup", "attr.aria-expanded": "this.isAriaExpanded", "attr.aria-autocomplete": "this.hostAriaAutocomplete" } }, providers: [
             DataService,
             SelectionService,
             NavigationService,
@@ -15045,6 +15415,7 @@ class DropDownTreeComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: DropDownTreeComponent, decorators: [{
             type: Component,
             args: [{
+                    selector: 'kendo-dropdowntree',
                     exportAs: 'kendoDropDownTree',
                     providers: [
                         DataService,
@@ -15079,7 +15450,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
                         },
                         provideComponentName('dropdowntree')
                     ],
-                    selector: 'kendo-dropdowntree',
                     template: `
         <ng-container kendoDropDownTreeLocalizedMessages
           i18n-noDataText="kendo.dropdowntree.noDataText|The text displayed in the popup when there are no items"
@@ -15298,6 +15668,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
             }], isReadonly: [{
                 type: HostBinding,
                 args: ['attr.readonly']
+            }], isReadonlyClass: [{
+                type: HostBinding,
+                args: ['class.k-readonly']
             }], hostAriaInvalid: [{
                 type: HostBinding,
                 args: ['attr.aria-invalid']
@@ -15416,9 +15789,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
                 type: Input
             }], readonly: [{
                 type: Input
-            }, {
-                type: HostBinding,
-                args: ['class.k-readonly']
             }], valuePrimitive: [{
                 type: Input
             }], tabindex: [{
@@ -16003,6 +16373,9 @@ class MultiSelectTreeComponent {
     get isReadonly() {
         return this.readonly ? '' : null;
     }
+    get isReadonlyClass() {
+        return this.readonly;
+    }
     get ariaActiveDescendant() {
         return this.focusedTagId;
     }
@@ -16028,19 +16401,22 @@ class MultiSelectTreeComponent {
      *
      * @default 'none'
      */
-    adaptiveMode = 'none';
+    set adaptiveMode(value) { this._adaptiveMode.set(value); }
+    get adaptiveMode() { return this._adaptiveMode(); }
     /**
      * Sets the title text for the ActionSheet in adaptive mode on small screens.
      * Uses the component label by default if not set.
      *
      * @default ''
      */
-    adaptiveTitle = '';
+    set adaptiveTitle(value) { this._adaptiveTitle.set(value); }
+    get adaptiveTitle() { return this._adaptiveTitle(); }
     /**
      * Sets the subtitle text for the ActionSheet in adaptive mode on small screens.
      * No subtitle appears by default.
      */
-    adaptiveSubtitle;
+    set adaptiveSubtitle(value) { this._adaptiveSubtitle.set(value); }
+    get adaptiveSubtitle() { return this._adaptiveSubtitle(); }
     /**
      * @hidden
      */
@@ -16050,7 +16426,8 @@ class MultiSelectTreeComponent {
     /**
     * @hidden
     */
-    windowSize = 'large';
+    get windowSize() { return this._windowSize(); }
+    set windowSize(value) { this._windowSize.set(value); }
     /**
      * @hidden
      */
@@ -16138,7 +16515,11 @@ class MultiSelectTreeComponent {
              * the popup is appended to a container and opened upon initialization.
              * Otherwise, the "Expression has changed..." type error will be thrown.
              */
-            Promise.resolve(null).then(() => this.treeview.animate = true);
+            Promise.resolve(null).then(() => {
+                if (this.treeview) {
+                    this.treeview.animate = true;
+                }
+            });
         }
     }
     get treeview() {
@@ -16155,10 +16536,10 @@ class MultiSelectTreeComponent {
     set tabindex(value) {
         const providedTabIndex = parseNumber(value);
         const defaultTabIndex = 0;
-        this._tabindex = !isNaN(providedTabIndex) ? providedTabIndex : defaultTabIndex;
+        this._tabindex.set(!isNaN(providedTabIndex) ? providedTabIndex : defaultTabIndex);
     }
     get tabindex() {
-        return this.disabled ? -1 : this._tabindex;
+        return this.disabled ? -1 : this._tabindex();
     }
     /**
      * Sets the visual size of the component. The default value is set by the Kendo theme.
@@ -16168,10 +16549,10 @@ class MultiSelectTreeComponent {
         if (size) {
             this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('input', size));
         }
-        this._size = size;
+        this._size.set(size);
     }
     get size() {
-        return this._size;
+        return this._size();
     }
     /**
      * Sets the border radius style of the component. The default value is set by the Kendo theme.
@@ -16181,10 +16562,10 @@ class MultiSelectTreeComponent {
         if (rounded) {
             this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(rounded));
         }
-        this._rounded = rounded;
+        this._rounded.set(rounded);
     }
     get rounded() {
-        return this._rounded;
+        return this._rounded();
     }
     /**
      * Sets the fill style for the component background and borders. The default value is set by the Kendo theme.
@@ -16194,22 +16575,22 @@ class MultiSelectTreeComponent {
         if (fillMode) {
             this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', fillMode));
         }
-        this._fillMode = fillMode;
+        this._fillMode.set(fillMode);
     }
     get fillMode() {
-        return this._fillMode;
+        return this._fillMode();
     }
     /**
      * Configures the popup container settings: animation, dimensions, styling and positioning.
      */
     set popupSettings(settings) {
-        this._popupSettings = Object.assign({}, DEFAULT_POPUP_SETTINGS, settings);
+        this._popupSettings.set(Object.assign({}, DEFAULT_POPUP_SETTINGS, settings));
         // `detectChanges` needed, otherwise upon value initialization and `appendTo` property
         // an error is thrown => ExpressionChangedAfterItHasBeenCheckedError
         this.cdr.detectChanges();
     }
     get popupSettings() {
-        return this._popupSettings;
+        return this._popupSettings();
     }
     /**
      * Configures the checkbox behavior for the MultiSelecTree nodes.
@@ -16218,17 +16599,17 @@ class MultiSelectTreeComponent {
      * @default '{ checkChildren: true, checkOnClick: true }'
      */
     set checkableSettings(settings) {
-        this._checkableSettings = Object.assign({}, DEFAULT_CHECKABLE_SETTINGS, settings);
+        this._checkableSettings.set(Object.assign({}, DEFAULT_CHECKABLE_SETTINGS, settings));
     }
     get checkableSettings() {
-        return this._checkableSettings;
+        return this._checkableSettings();
     }
     /**
      * Sets the hierarchical data source for the tree structure.
      * Provide an array of objects that contain the tree data and structure.
      */
     set data(data) {
-        this._nodes = data;
+        this._data.set(data);
         this.setState();
         if (this.isContentInit) {
             // Needed for when the data is loaded later/asynchronously because it would not exist on ngContentInit
@@ -16236,25 +16617,25 @@ class MultiSelectTreeComponent {
         }
     }
     get data() {
-        return this._nodes;
+        return this._data();
     }
     /**
      * Sets the selected values in the component.
      * Accepts primitive values if `valuePrimitive` is `true`, or objects if `false`.
      */
     set value(value) {
-        this._value = value ? value : [];
+        this._value.set(value ? value : []);
         this.setState();
     }
     get value() {
-        return this._value;
+        return this._value();
     }
     /**
      * Sets the data items that correspond to the selected values.
      * Required when using primitive values to resolve the full data objects.
      */
     set dataItems(items) {
-        this._dataItems = (items || []).map((dataItem, index) => {
+        this._dataItems.set((items || []).map((dataItem, index) => {
             if (hasProps(dataItem, ['dataItem', 'index', 'level'])) {
                 return dataItem;
             }
@@ -16266,11 +16647,11 @@ class MultiSelectTreeComponent {
                 level,
                 key
             };
-        });
+        }));
         this.setState();
     }
     get dataItems() {
-        return this._dataItems || this.value.map((value, index) => {
+        return this._dataItems() || this.value.map((value, index) => {
             const level = this.valueDepth[index] || 0;
             const key = valueFrom({ dataItem: value, level }, this.valueField) + '_' + (this.isHeterogeneous ? this.valueDepth[index] : 0);
             return {
@@ -16285,33 +16666,38 @@ class MultiSelectTreeComponent {
      * Specifies which data field provides the display text for tree nodes.
      * > The `textField` property can be set to point to a nested property value - e.g. `category.name`.
      */
-    textField;
+    set textField(value) { this._textField.set(value); }
+    get textField() { return this._textField(); }
     /**
      * Specifies which data field provides the unique values for tree nodes.
      * > The `valueField` property can be set to point to a nested property value - e.g. `category.id`.
      */
-    valueField;
+    set valueField(value) { this._valueField.set(value); }
+    get valueField() { return this._valueField(); }
     /**
      * Sets the levels in the data set where the values can be found when `valueField` is an Array.
      * The field serves to correctly allocate a data item used when the MultiSelectTree is initialized with a value.
      *
      * @default []
      */
-    valueDepth = [];
+    set valueDepth(value) { this._valueDepth.set(value); }
+    get valueDepth() { return this._valueDepth(); }
     /**
      * Controls the loading state visual indicator.
      * Shows a loading spinner when set to `true`.
      *
      * @default false
      */
-    loading;
+    set loading(value) { this._loading.set(value); }
+    get loading() { return this._loading(); }
     /**
      * Sets the placeholder text shown when no items are selected.
      * Helps guide users on what action to take.
      *
      * @default ''
      */
-    placeholder = '';
+    set placeholder(value) { this._placeholder.set(value); }
+    get placeholder() { return this._placeholder(); }
     /**
      * Sets the maximum height of the options list in the popup.
      * Controls vertical scrolling when content exceeds this height.
@@ -16319,97 +16705,110 @@ class MultiSelectTreeComponent {
      * @default 200
      */
     set listHeight(_listHeight) {
-        this._listHeight = _listHeight;
+        this._listHeight.set(_listHeight);
     }
     get listHeight() {
         if (this.isAdaptive) {
             return;
         }
-        return this._listHeight;
+        return this._listHeight();
     }
-    _listHeight = 200;
     /**
      * Controls whether the component accepts user input.
      * Prevents all user interactions when set to `true`.
      *
      * @default false
      */
-    disabled = false;
+    set disabled(value) { this._disabled.set(value); }
+    get disabled() { return this._disabled(); }
     /**
      * Sets the component to read-only mode.
      * Displays current selections but prevents changes.
      *
      * @default false
      */
-    readonly = false;
+    set readonly(value) { this._readonly.set(value); }
+    get readonly() { return this._readonly(); }
     /**
      * Determines the data type of selected values.
      * Set to `true` for primitive values, false for complex objects.
      *
      * @default false
      */
-    valuePrimitive = false;
+    set valuePrimitive(value) { this._valuePrimitive.set(value); }
+    get valuePrimitive() { return this._valuePrimitive(); }
     /**
      * Controls when child nodes load from the data source.
      * Set to `true` to load children only when parent nodes expand.
      *
      * @default false
      */
-    loadOnDemand = false;
+    set loadOnDemand(value) { this._loadOnDemand.set(value); }
+    get loadOnDemand() { return this._loadOnDemand(); }
     /**
      * Sets the unique identifier for the focusable element.
      * Used internally for accessibility and label association.
      */
-    focusableId = `k-${guid()}`;
+    set focusableId(value) { this._focusableId.set(value); }
+    get focusableId() { return this._focusableId(); }
     /**
      * Shows a clear button to reset all selections.
      * Appears on hover when selections exist and the component is not disabled.
      *
      * @default true
      */
-    clearButton = true;
+    set clearButton(value) { this._clearButton.set(value); }
+    get clearButton() { return this._clearButton(); }
     /**
      * Enables the built-in filter input for searching tree nodes.
      * Shows a search box above the tree when enabled.
      *
      * @default false
      */
-    filterable = false;
+    set filterable(value) { this._filterable.set(value); }
+    get filterable() { return this._filterable(); }
     /**
      * Shows a checkbox to select or deselect all visible tree nodes.
      * Appears above the tree when checkboxes are enabled.
      *
      * @default false
      */
-    checkAll = false;
+    set checkAll(value) { this._checkAll.set(value); }
+    get checkAll() { return this._checkAll(); }
     /**
      * Determines if a tree node contains child nodes.
      * Return `true` if the node has children, false otherwise.
      */
-    hasChildren = hasChildren;
+    set hasChildren(fn) { this._hasChildren.set(fn); }
+    get hasChildren() { return this._hasChildren(); }
     /**
      * Function that provides child nodes for a parent node.
      * Return an Observable of child objects for the given parent.
      */
-    fetchChildren = fetchChildren;
+    set fetchChildren(fn) { this._fetchChildren.set(fn); }
+    get fetchChildren() { return this._fetchChildren(); }
     /**
      * Determines if a specific node is expanded. The function is executed for each data item.
      */
-    isNodeExpanded;
+    set isNodeExpanded(fn) { this._isNodeExpanded.set(fn); }
+    get isNodeExpanded() { return this._isNodeExpanded(); }
     /**
      * Determines if a tree node should be hidden.
      */
-    isNodeVisible = isNodeVisible;
+    set isNodeVisible(fn) { this._isNodeVisible.set(fn); }
+    get isNodeVisible() { return this._isNodeVisible(); }
     /**
      * Determines if a tree node is disabled. The function is executed for each data item.
      */
-    itemDisabled = itemDisabled;
+    set itemDisabled(fn) { this._itemDisabled.set(fn); }
+    get itemDisabled() { return this._itemDisabled(); }
     /**
      * @param { Any[] } dataItems - The selected data items from the list.
      * @returns { Any[] } - The tags that will be rendered by the component.
      * Transforms the provided array of data items into an array of tags.
      */
-    tagMapper = (tags) => tags || [];
+    set tagMapper(fn) { this._tagMapper.set(fn); }
+    get tagMapper() { return this._tagMapper(); }
     /**
      * Fires when the component receives focus.
      */
@@ -16474,10 +16873,10 @@ class MultiSelectTreeComponent {
     }
     set isFocused(isFocused) {
         this.renderer[isFocused ? 'addClass' : 'removeClass'](this.wrapper.nativeElement, 'k-focus');
-        this._isFocused = isFocused;
+        this._isFocused.set(isFocused);
     }
     get isFocused() {
-        return this._isFocused;
+        return this._isFocused();
     }
     /**
      * Returns the current open state. Returns `true` if the popup or actionSheet is open.
@@ -16623,18 +17022,21 @@ class MultiSelectTreeComponent {
     /**
      * @hidden
      */
-    filter = '';
+    get filter() { return this._filter(); }
+    set filter(value) { this._filter.set(value); }
     /**
      * @hidden
      */
-    checkedItems = [];
+    get checkedItems() { return this._checkedItems(); }
+    set checkedItems(value) { this._checkedItems.set(value); }
     /**
      * @hidden
      * The flag is needed in order to determine how to construct the items map keys.
      * If `true`, then the key consists of the item's value and level (depth),
      * else the key consists of the item's value and 0 (no leveling required)
      */
-    isHeterogeneous;
+    get isHeterogeneous() { return this._isHeterogeneous(); }
+    set isHeterogeneous(value) { this._isHeterogeneous.set(value); }
     /**
      * @hidden
      */
@@ -16642,24 +17044,18 @@ class MultiSelectTreeComponent {
     /**
      * @hidden
      */
-    allNodesHidden = false;
+    get allNodesHidden() { return this._allNodesHidden(); }
+    set allNodesHidden(value) { this._allNodesHidden.set(value); }
     tagListId = `k-${guid()}`;
     tagPrefix = "tag-" + guid();
     popupRef;
-    tags;
-    focusedTagIndex = undefined;
-    disabledIndices;
-    _nodes;
-    _value = [];
-    _tabindex = 0;
-    _popupSettings = DEFAULT_POPUP_SETTINGS;
-    _checkableSettings = DEFAULT_CHECKABLE_SETTINGS;
-    _isFocused = false;
+    get tags() { return this._tags(); }
+    set tags(value) { this._tags.set(value); }
+    get focusedTagIndex() { return this._focusedTagIndex(); }
+    set focusedTagIndex(value) { this._focusedTagIndex.set(value); }
+    get disabledIndices() { return this._disabledIndices(); }
+    set disabledIndices(value) { this._disabledIndices.set(value); }
     _treeview;
-    _dataItems;
-    _size;
-    _rounded;
-    _fillMode;
     _searchableNodes = [];
     _typedValue = '';
     printableCharacters = new Subject();
@@ -16669,6 +17065,50 @@ class MultiSelectTreeComponent {
     lastNodeOnFocus;
     // Used as check to avoid unnecessary 'registerLookupItems()' calls upon initialization
     isContentInit;
+    // Signal backing fields — inputs
+    _adaptiveMode = signal('none', ...(ngDevMode ? [{ debugName: "_adaptiveMode" }] : []));
+    _adaptiveTitle = signal('', ...(ngDevMode ? [{ debugName: "_adaptiveTitle" }] : []));
+    _adaptiveSubtitle = signal(undefined, ...(ngDevMode ? [{ debugName: "_adaptiveSubtitle" }] : []));
+    _textField = signal(undefined, ...(ngDevMode ? [{ debugName: "_textField" }] : []));
+    _valueField = signal(undefined, ...(ngDevMode ? [{ debugName: "_valueField" }] : []));
+    _valueDepth = signal([], ...(ngDevMode ? [{ debugName: "_valueDepth" }] : []));
+    _loading = signal(undefined, ...(ngDevMode ? [{ debugName: "_loading" }] : []));
+    _placeholder = signal('', ...(ngDevMode ? [{ debugName: "_placeholder" }] : []));
+    _disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
+    _readonly = signal(false, ...(ngDevMode ? [{ debugName: "_readonly" }] : []));
+    _valuePrimitive = signal(false, ...(ngDevMode ? [{ debugName: "_valuePrimitive" }] : []));
+    _loadOnDemand = signal(false, ...(ngDevMode ? [{ debugName: "_loadOnDemand" }] : []));
+    _focusableId = signal(`k-${guid()}`, ...(ngDevMode ? [{ debugName: "_focusableId" }] : []));
+    _clearButton = signal(true, ...(ngDevMode ? [{ debugName: "_clearButton" }] : []));
+    _filterable = signal(false, ...(ngDevMode ? [{ debugName: "_filterable" }] : []));
+    _checkAll = signal(false, ...(ngDevMode ? [{ debugName: "_checkAll" }] : []));
+    _hasChildren = signal(hasChildren, ...(ngDevMode ? [{ debugName: "_hasChildren" }] : []));
+    _fetchChildren = signal(fetchChildren, ...(ngDevMode ? [{ debugName: "_fetchChildren" }] : []));
+    _isNodeExpanded = signal(undefined, ...(ngDevMode ? [{ debugName: "_isNodeExpanded" }] : []));
+    _isNodeVisible = signal(isNodeVisible, ...(ngDevMode ? [{ debugName: "_isNodeVisible" }] : []));
+    _itemDisabled = signal(itemDisabled, ...(ngDevMode ? [{ debugName: "_itemDisabled" }] : []));
+    _tagMapper = signal((tags) => tags || [], ...(ngDevMode ? [{ debugName: "_tagMapper" }] : []));
+    // Signal backing fields — existing setter/getter pairs
+    _data = signal(undefined, ...(ngDevMode ? [{ debugName: "_data" }] : []));
+    _value = signal([], ...(ngDevMode ? [{ debugName: "_value" }] : []));
+    _dataItems = signal(undefined, ...(ngDevMode ? [{ debugName: "_dataItems" }] : []));
+    _listHeight = signal(200, ...(ngDevMode ? [{ debugName: "_listHeight" }] : []));
+    _tabindex = signal(0, ...(ngDevMode ? [{ debugName: "_tabindex" }] : []));
+    _size = signal(undefined, ...(ngDevMode ? [{ debugName: "_size" }] : []));
+    _rounded = signal(undefined, ...(ngDevMode ? [{ debugName: "_rounded" }] : []));
+    _fillMode = signal(undefined, ...(ngDevMode ? [{ debugName: "_fillMode" }] : []));
+    _popupSettings = signal(DEFAULT_POPUP_SETTINGS, ...(ngDevMode ? [{ debugName: "_popupSettings" }] : []));
+    _checkableSettings = signal(DEFAULT_CHECKABLE_SETTINGS, ...(ngDevMode ? [{ debugName: "_checkableSettings" }] : []));
+    // Signal backing fields — internal state driving template
+    _isFocused = signal(false, ...(ngDevMode ? [{ debugName: "_isFocused" }] : []));
+    _filter = signal('', ...(ngDevMode ? [{ debugName: "_filter" }] : []));
+    _checkedItems = signal([], ...(ngDevMode ? [{ debugName: "_checkedItems" }] : []));
+    _isHeterogeneous = signal(undefined, ...(ngDevMode ? [{ debugName: "_isHeterogeneous" }] : []));
+    _allNodesHidden = signal(false, ...(ngDevMode ? [{ debugName: "_allNodesHidden" }] : []));
+    _tags = signal(undefined, ...(ngDevMode ? [{ debugName: "_tags" }] : []));
+    _focusedTagIndex = signal(undefined, ...(ngDevMode ? [{ debugName: "_focusedTagIndex" }] : []));
+    _disabledIndices = signal(undefined, ...(ngDevMode ? [{ debugName: "_disabledIndices" }] : []));
+    _windowSize = signal('large', ...(ngDevMode ? [{ debugName: "_windowSize" }] : []));
     constructor(injector, wrapper, popupService, renderer, navigationService, _zone, localization, cdr, lookup, adaptiveService) {
         this.injector = injector;
         this.wrapper = wrapper;
@@ -16708,6 +17148,14 @@ class MultiSelectTreeComponent {
         this.windowSize = this.adaptiveService.size;
         this.subs.add(this.renderer.listen(this.wrapper.nativeElement, 'click', this.handleClick.bind(this)));
         this.subs.add(this.renderer.listen(this.wrapper.nativeElement, 'keydown', this.handleKeydown.bind(this)));
+        const control = this.formControl;
+        if (control && control.events) {
+            this.subs.add(control.events.subscribe(e => {
+                if (e instanceof TouchedChangeEvent) {
+                    this.cdr.markForCheck();
+                }
+            }));
+        }
     }
     /**
      * @hidden
@@ -17031,7 +17479,6 @@ class MultiSelectTreeComponent {
      */
     setDisabledState(isDisabled) {
         this.disabled = isDisabled;
-        this.cdr.markForCheck();
     }
     /**
      * @hidden
@@ -17383,7 +17830,6 @@ class MultiSelectTreeComponent {
             this.setTags();
             this.checkedItems = this.dataItems.slice();
         }
-        this.cdr.markForCheck();
     }
     setTags() {
         const source = this.dataItems.map(item => item.dataItem);
@@ -17495,7 +17941,7 @@ class MultiSelectTreeComponent {
         this.opened.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: MultiSelectTreeComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: i2.PopupService }, { token: i0.Renderer2 }, { token: NavigationService }, { token: i0.NgZone }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: MultiSelectTreeLookupService }, { token: i7.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: MultiSelectTreeComponent, isStandalone: true, selector: "kendo-multiselecttree", inputs: { adaptiveMode: "adaptiveMode", adaptiveTitle: "adaptiveTitle", adaptiveSubtitle: "adaptiveSubtitle", tabindex: "tabindex", size: "size", rounded: "rounded", fillMode: "fillMode", popupSettings: "popupSettings", checkableSettings: "checkableSettings", data: "data", value: "value", dataItems: "dataItems", textField: "textField", valueField: "valueField", valueDepth: "valueDepth", loading: "loading", placeholder: "placeholder", listHeight: "listHeight", disabled: "disabled", readonly: "readonly", valuePrimitive: "valuePrimitive", loadOnDemand: "loadOnDemand", focusableId: "focusableId", clearButton: "clearButton", filterable: "filterable", checkAll: "checkAll", hasChildren: "hasChildren", fetchChildren: "fetchChildren", isNodeExpanded: "isNodeExpanded", isNodeVisible: "isNodeVisible", itemDisabled: "itemDisabled", tagMapper: "tagMapper" }, outputs: { onFocus: "focus", onBlur: "blur", open: "open", opened: "opened", close: "close", closed: "closed", nodeExpand: "nodeExpand", nodeCollapse: "nodeCollapse", valueChange: "valueChange", removeTag: "removeTag", filterChange: "filterChange" }, host: { properties: { "class.k-disabled": "this.isDisabled", "class.k-loading": "this.isLoading", "attr.aria-invalid": "this.hostAriaInvalid", "attr.aria-busy": "this.isBusy", "attr.id": "this.id", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabIndex", "attr.readonly": "this.isReadonly", "attr.aria-activedescendant": "this.ariaActiveDescendant", "class.k-readonly": "this.readonly" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: MultiSelectTreeComponent, isStandalone: true, selector: "kendo-multiselecttree", inputs: { adaptiveMode: "adaptiveMode", adaptiveTitle: "adaptiveTitle", adaptiveSubtitle: "adaptiveSubtitle", tabindex: "tabindex", size: "size", rounded: "rounded", fillMode: "fillMode", popupSettings: "popupSettings", checkableSettings: "checkableSettings", data: "data", value: "value", dataItems: "dataItems", textField: "textField", valueField: "valueField", valueDepth: "valueDepth", loading: "loading", placeholder: "placeholder", listHeight: "listHeight", disabled: "disabled", readonly: "readonly", valuePrimitive: "valuePrimitive", loadOnDemand: "loadOnDemand", focusableId: "focusableId", clearButton: "clearButton", filterable: "filterable", checkAll: "checkAll", hasChildren: "hasChildren", fetchChildren: "fetchChildren", isNodeExpanded: "isNodeExpanded", isNodeVisible: "isNodeVisible", itemDisabled: "itemDisabled", tagMapper: "tagMapper" }, outputs: { onFocus: "focus", onBlur: "blur", open: "open", opened: "opened", close: "close", closed: "closed", nodeExpand: "nodeExpand", nodeCollapse: "nodeCollapse", valueChange: "valueChange", removeTag: "removeTag", filterChange: "filterChange" }, host: { properties: { "class.k-disabled": "this.isDisabled", "class.k-loading": "this.isLoading", "attr.aria-invalid": "this.hostAriaInvalid", "attr.aria-busy": "this.isBusy", "attr.id": "this.id", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabIndex", "attr.readonly": "this.isReadonly", "class.k-readonly": "this.isReadonlyClass", "attr.aria-activedescendant": "this.ariaActiveDescendant" } }, providers: [
             LocalizationService,
             NavigationService,
             DataService,
@@ -17771,11 +18217,12 @@ class MultiSelectTreeComponent {
         @if (isOpen || isAdaptiveModeEnabled) {
           <kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
         }
-        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { kind: "component", type: TagListComponent, selector: "kendo-taglist", inputs: ["tags", "textField", "valueField", "valueDepth", "focused", "template", "groupTemplate", "disabled", "tagPrefix", "id", "ariaLabel", "size", "rounded", "fillMode", "disabledIndices"], outputs: ["removeTag"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AdaptiveRendererComponent, selector: "kendo-adaptive-renderer", inputs: ["title", "subtitle", "showTextInput", "sharedPopupActionSheetTemplate", "text", "placeholder", "searchBarValue", "filterable", "showListContainer"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: FilterInputDirective, selector: "[filterInput]", inputs: ["filterInput"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "directive", type: CheckAllDirective, selector: "[checkAll]", inputs: ["lastAction", "treeview", "checkedItems", "valueField", "checkAll"], outputs: ["checkedItemsChange"] }, { kind: "component", type: TreeViewComponent, selector: "kendo-treeview", inputs: ["filterInputPlaceholder", "expandDisabledNodes", "animate", "nodeTemplate", "loadMoreButtonTemplate", "loadMoreButtonRole", "trackBy", "nodes", "textField", "hasChildren", "isChecked", "isDisabled", "hasCheckbox", "isExpanded", "isSelected", "isVisible", "navigable", "children", "loadOnDemand", "filterable", "filter", "size", "disableParentNodesOnly"], outputs: ["childrenLoaded", "blur", "focus", "expand", "collapse", "nodeDragStart", "nodeDrag", "filterStateChange", "nodeDrop", "nodeDragEnd", "addItem", "removeItem", "checkedChange", "selectionChange", "filterChange", "nodeClick", "nodeDblClick"], exportAs: ["kendoTreeView"] }, { kind: "directive", type: CheckDirective, selector: "[kendoMultiSelectTreeCheckable]", inputs: ["checkable", "valueField", "checkedItems"], outputs: ["checkedItemsChange"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }] });
+        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { kind: "component", type: TagListComponent, selector: "kendo-taglist", inputs: ["tags", "textField", "valueField", "valueDepth", "focused", "template", "groupTemplate", "disabled", "tagPrefix", "id", "ariaLabel", "size", "rounded", "fillMode", "disabledIndices"], outputs: ["removeTag"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AdaptiveRendererComponent, selector: "kendo-adaptive-renderer", inputs: ["title", "subtitle", "showTextInput", "sharedPopupActionSheetTemplate", "text", "placeholder", "searchBarValue", "filterable", "showListContainer"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: FilterInputDirective, selector: "[filterInput]", inputs: ["filterInput"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "directive", type: CheckAllDirective, selector: "[checkAll]", inputs: ["lastAction", "treeview", "checkedItems", "valueField", "checkAll"], outputs: ["checkedItemsChange"] }, { kind: "component", type: TreeViewComponent, selector: "kendo-treeview", inputs: ["filterInputPlaceholder", "expandDisabledNodes", "animate", "nodeTemplate", "loadMoreButtonTemplate", "loadMoreButtonRole", "trackBy", "nodes", "textField", "hasChildren", "isChecked", "isDisabled", "hasCheckbox", "isExpanded", "isSelected", "isVisible", "navigable", "children", "loadOnDemand", "filterable", "filter", "size", "disableParentNodesOnly"], outputs: ["childrenLoaded", "blur", "focus", "expand", "collapse", "nodeDragStart", "nodeDrag", "filterStateChange", "nodeDrop", "nodeDragEnd", "addItem", "removeItem", "checkedChange", "selectionChange", "filterChange", "nodeClick", "nodeDblClick"], exportAs: ["kendoTreeView"] }, { kind: "directive", type: CheckDirective, selector: "[kendoMultiSelectTreeCheckable]", inputs: ["checkable", "valueField", "checkedItems"], outputs: ["checkedItemsChange"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: MultiSelectTreeComponent, decorators: [{
             type: Component,
             args: [{
+                    selector: 'kendo-multiselecttree',
                     exportAs: 'kendoMultiSelectTree',
                     providers: [
                         LocalizationService,
@@ -17807,7 +18254,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
                         },
                         provideComponentName('multiselecttree')
                     ],
-                    selector: 'kendo-multiselecttree',
                     template: `
         <ng-container kendoMultiSelectTreeLocalizedMessages
           i18n-noDataText="kendo.multiselecttree.noDataText|The text displayed in the popup when there are no items"
@@ -18056,6 +18502,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
           <kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
         }
         `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     standalone: true,
                     imports: [LocalizedMessagesDirective, TagListComponent, IconWrapperComponent, NgTemplateOutlet, AdaptiveRendererComponent, NgClass, FilterInputDirective, EventsOutsideAngularDirective, TemplateContextDirective, CheckAllDirective, TreeViewComponent, CheckDirective, ResizeSensorComponent, SeparatorComponent]
                 }]
@@ -18083,6 +18530,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
             }], isReadonly: [{
                 type: HostBinding,
                 args: ['attr.readonly']
+            }], isReadonlyClass: [{
+                type: HostBinding,
+                args: ['class.k-readonly']
             }], ariaActiveDescendant: [{
                 type: HostBinding,
                 args: ['attr.aria-activedescendant']
@@ -18162,9 +18612,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
                 type: Input
             }], readonly: [{
                 type: Input
-            }, {
-                type: HostBinding,
-                args: ['class.k-readonly']
             }], valuePrimitive: [{
                 type: Input
             }], loadOnDemand: [{