@progress/kendo-angular-dropdowns 25.1.0-develop.9 → 25.1.1-develop.1

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: 1787656937,
-    version: '25.1.0-develop.9',
+    publishDate: 1788947714,
+    version: '25.1.1-develop.1',
     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);
@@ -715,10 +715,10 @@ class SearchBarComponent {
         const attributesToRender = Object.assign({}, this.mutableAttributes, this.parsedAttributes);
         setHTMLAttributes(attributesToRender, this.renderer, this.input.nativeElement, this.injector);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: SearchBarComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", type: SearchBarComponent, isStandalone: true, selector: "input[kendoSearchbar]", inputs: { tagListId: "tagListId", readonly: "readonly", disabled: "disabled", isRequired: "isRequired", isSuggestable: "isSuggestable", hasListAutocomplete: "hasListAutocomplete", userInput: "userInput", suggestedText: "suggestedText", inputAttributes: "inputAttributes", id: "id", activeDescendant: "activeDescendant", tabIndex: "tabIndex", isLoading: "isLoading", ariaControls: "ariaControls", ariaExpanded: "ariaExpanded", placeholder: "placeholder" }, outputs: { valueChange: "valueChange", onBlur: "onBlur", onFocus: "onFocus", onClick: "onClick", onNavigate: "onNavigate" }, host: { properties: { "attr.id": "this.id", "attr.aria-activedescendant": "this.activeDescendant", "attr.tabindex": "this.tabIndex", "attr.aria-busy": "this.isLoading", "attr.aria-controls": "this.ariaControls", "attr.aria-expanded": "this.ariaExpanded", "attr.aria-invalid": "this.attrAriaInvalid", "attr.placeholder": "this.placeholder", "attr.role": "this.role", "attr.dir": "this.dir" } }, usesOnChanges: true, ngImport: i0, template: ``, isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: SearchBarComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.30", type: SearchBarComponent, isStandalone: true, selector: "input[kendoSearchbar]", inputs: { tagListId: "tagListId", readonly: "readonly", disabled: "disabled", isRequired: "isRequired", isSuggestable: "isSuggestable", hasListAutocomplete: "hasListAutocomplete", userInput: "userInput", suggestedText: "suggestedText", inputAttributes: "inputAttributes", id: "id", activeDescendant: "activeDescendant", tabIndex: "tabIndex", isLoading: "isLoading", ariaControls: "ariaControls", ariaExpanded: "ariaExpanded", placeholder: "placeholder" }, outputs: { valueChange: "valueChange", onBlur: "onBlur", onFocus: "onFocus", onClick: "onClick", onNavigate: "onNavigate" }, host: { properties: { "attr.id": "this.id", "attr.aria-activedescendant": "this.activeDescendant", "attr.tabindex": "this.tabIndex", "attr.aria-busy": "this.isLoading", "attr.aria-controls": "this.ariaControls", "attr.aria-expanded": "this.ariaExpanded", "attr.aria-invalid": "this.attrAriaInvalid", "attr.placeholder": "this.placeholder", "attr.role": "this.role", "attr.dir": "this.dir" } }, usesOnChanges: true, ngImport: i0, template: ``, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: SearchBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: SearchBarComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'input[kendoSearchbar]',
@@ -831,10 +831,10 @@ class ItemTemplateDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ItemTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: ItemTemplateDirective, isStandalone: true, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: ItemTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: ItemTemplateDirective, isStandalone: true, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ItemTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: ItemTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]',
@@ -875,10 +875,10 @@ class HeaderTemplateDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: HeaderTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: HeaderTemplateDirective, isStandalone: true, selector: "[kendoDropDownListHeaderTemplate],[kendoComboBoxHeaderTemplate],[kendoDropDownTreeHeaderTemplate],[kendoMultiColumnComboBoxHeaderTemplate],[kendoAutoCompleteHeaderTemplate],[kendoMultiSelectHeaderTemplate],[kendoMultiSelectTreeHeaderTemplate]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: HeaderTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: HeaderTemplateDirective, isStandalone: true, selector: "[kendoDropDownListHeaderTemplate],[kendoComboBoxHeaderTemplate],[kendoDropDownTreeHeaderTemplate],[kendoMultiColumnComboBoxHeaderTemplate],[kendoAutoCompleteHeaderTemplate],[kendoMultiSelectHeaderTemplate],[kendoMultiSelectTreeHeaderTemplate]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: HeaderTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: HeaderTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoDropDownListHeaderTemplate],[kendoComboBoxHeaderTemplate],[kendoDropDownTreeHeaderTemplate],[kendoMultiColumnComboBoxHeaderTemplate],[kendoAutoCompleteHeaderTemplate],[kendoMultiSelectHeaderTemplate],[kendoMultiSelectTreeHeaderTemplate]',
@@ -919,10 +919,10 @@ class FooterTemplateDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: FooterTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: FooterTemplateDirective, isStandalone: true, selector: "[kendoDropDownListFooterTemplate],[kendoComboBoxFooterTemplate],[kendoDropDownTreeFooterTemplate],[kendoMultiColumnComboBoxFooterTemplate],[kendoAutoCompleteFooterTemplate],[kendoMultiSelectFooterTemplate],[kendoMultiSelectTreeFooterTemplate]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: FooterTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: FooterTemplateDirective, isStandalone: true, selector: "[kendoDropDownListFooterTemplate],[kendoComboBoxFooterTemplate],[kendoDropDownTreeFooterTemplate],[kendoMultiColumnComboBoxFooterTemplate],[kendoAutoCompleteFooterTemplate],[kendoMultiSelectFooterTemplate],[kendoMultiSelectTreeFooterTemplate]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: FooterTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: FooterTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoDropDownListFooterTemplate],[kendoComboBoxFooterTemplate],[kendoDropDownTreeFooterTemplate],[kendoMultiColumnComboBoxFooterTemplate],[kendoAutoCompleteFooterTemplate],[kendoMultiSelectFooterTemplate],[kendoMultiSelectTreeFooterTemplate]',
@@ -969,10 +969,10 @@ class GroupTemplateDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: GroupTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: GroupTemplateDirective, isStandalone: true, selector: "[kendoDropDownListGroupTemplate],[kendoComboBoxGroupTemplate],[kendoMultiColumnComboBoxGroupTemplate],[kendoAutoCompleteGroupTemplate],[kendoMultiSelectGroupTemplate]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: GroupTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: GroupTemplateDirective, isStandalone: true, selector: "[kendoDropDownListGroupTemplate],[kendoComboBoxGroupTemplate],[kendoMultiColumnComboBoxGroupTemplate],[kendoAutoCompleteGroupTemplate],[kendoMultiSelectGroupTemplate]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: GroupTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: GroupTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoDropDownListGroupTemplate],[kendoComboBoxGroupTemplate],[kendoMultiColumnComboBoxGroupTemplate],[kendoAutoCompleteGroupTemplate],[kendoMultiSelectGroupTemplate]',
@@ -1019,10 +1019,10 @@ class FixedGroupTemplateDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: FixedGroupTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: FixedGroupTemplateDirective, isStandalone: true, selector: "[kendoDropDownListFixedGroupTemplate],[kendoComboBoxFixedGroupTemplate],[kendoMultiColumnComboBoxFixedGroupTemplate],[kendoAutoCompleteFixedGroupTemplate],[kendoMultiSelectFixedGroupTemplate]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: FixedGroupTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: FixedGroupTemplateDirective, isStandalone: true, selector: "[kendoDropDownListFixedGroupTemplate],[kendoComboBoxFixedGroupTemplate],[kendoMultiColumnComboBoxFixedGroupTemplate],[kendoAutoCompleteFixedGroupTemplate],[kendoMultiSelectFixedGroupTemplate]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: FixedGroupTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: FixedGroupTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoDropDownListFixedGroupTemplate],[kendoComboBoxFixedGroupTemplate],[kendoMultiColumnComboBoxFixedGroupTemplate],[kendoAutoCompleteFixedGroupTemplate],[kendoMultiSelectFixedGroupTemplate]',
@@ -1265,10 +1265,10 @@ class DataService {
         }
         return flat;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: DataService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: DataService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: DataService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: DataService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: DataService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: DataService, decorators: [{
             type: Injectable
         }] });
 
@@ -1304,10 +1304,10 @@ class DisabledItemsService {
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: DisabledItemsService, deps: [{ token: DataService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: DisabledItemsService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: DisabledItemsService, deps: [{ token: DataService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: DisabledItemsService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: DisabledItemsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: DisabledItemsService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: DataService }] });
 
@@ -1462,10 +1462,10 @@ class SelectionService {
         }
         this.unselectMultiple(indicesToBeUnselected);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: SelectionService, deps: [{ token: DisabledItemsService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: SelectionService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: SelectionService, deps: [{ token: DisabledItemsService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: SelectionService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: SelectionService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: SelectionService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: DisabledItemsService }] });
 
@@ -1666,10 +1666,10 @@ class NavigationService {
             return this.disabledItemsService.isIndexDisabled(index);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: NavigationService, deps: [{ token: DisabledItemsService }, { token: SelectionService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: NavigationService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: NavigationService, deps: [{ token: DisabledItemsService }, { token: SelectionService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: NavigationService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: NavigationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: NavigationService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: DisabledItemsService }, { type: SelectionService }] });
 
@@ -1706,10 +1706,10 @@ class NoDataTemplateDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: NoDataTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: NoDataTemplateDirective, isStandalone: true, selector: "[kendoDropDownListNoDataTemplate],[kendoDropDownTreeNoDataTemplate],[kendoComboBoxNoDataTemplate],[kendoMultiColumnComboBoxNoDataTemplate],[kendoAutoCompleteNoDataTemplate],[kendoMultiSelectNoDataTemplate],[kendoMultiSelectTreeNoDataTemplate]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: NoDataTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: NoDataTemplateDirective, isStandalone: true, selector: "[kendoDropDownListNoDataTemplate],[kendoDropDownTreeNoDataTemplate],[kendoComboBoxNoDataTemplate],[kendoMultiColumnComboBoxNoDataTemplate],[kendoAutoCompleteNoDataTemplate],[kendoMultiSelectNoDataTemplate],[kendoMultiSelectTreeNoDataTemplate]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: NoDataTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: NoDataTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoDropDownListNoDataTemplate],[kendoDropDownTreeNoDataTemplate],[kendoComboBoxNoDataTemplate],[kendoMultiColumnComboBoxNoDataTemplate],[kendoAutoCompleteNoDataTemplate],[kendoMultiSelectNoDataTemplate],[kendoMultiSelectTreeNoDataTemplate]',
@@ -1778,10 +1778,10 @@ class ListItemDirective {
     constructor(element) {
         this.element = element;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ListItemDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: ListItemDirective, isStandalone: true, selector: "\"li[role=option], li[role=group], li[role=presentation]\"", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: ListItemDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: ListItemDirective, isStandalone: true, selector: "\"li[role=option], li[role=group], li[role=presentation]\"", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ListItemDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: ListItemDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '"li[role=option], li[role=group], li[role=presentation]"',
@@ -1829,10 +1829,10 @@ class SelectableDirective {
             this.selectionService.change(this.index);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: SelectableDirective, deps: [{ token: SelectionService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: SelectableDirective, isStandalone: true, selector: "[kendoDropDownsSelectable]", inputs: { index: "index", checkboxes: "checkboxes", height: "height", isMultiselect: "isMultiselect", multipleSelection: "multipleSelection" }, host: { listeners: { "click": "onClick($event)" }, properties: { "attr.index": "this.index", "style.height.px": "this.height", "style.minHeight.px": "this.height", "class.k-focus": "this.focusedClassName", "class.k-selected": "this.selectedClassName" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: SelectableDirective, deps: [{ token: SelectionService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: SelectableDirective, isStandalone: true, selector: "[kendoDropDownsSelectable]", inputs: { index: "index", checkboxes: "checkboxes", height: "height", isMultiselect: "isMultiselect", multipleSelection: "multipleSelection" }, host: { listeners: { "click": "onClick($event)" }, properties: { "attr.index": "this.index", "style.height.px": "this.height", "style.minHeight.px": "this.height", "class.k-focus": "this.focusedClassName", "class.k-selected": "this.selectedClassName" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: SelectableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: SelectableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoDropDownsSelectable]',
@@ -1900,10 +1900,10 @@ class CustomItemTemplateDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: CustomItemTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: CustomItemTemplateDirective, isStandalone: true, selector: "[kendoMultiSelectCustomItemTemplate]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: CustomItemTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: CustomItemTemplateDirective, isStandalone: true, selector: "[kendoMultiSelectCustomItemTemplate]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: CustomItemTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: CustomItemTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoMultiSelectCustomItemTemplate]',
@@ -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();
     }
@@ -2378,8 +2377,8 @@ class ListComponent {
     initSelectAllCheckboxState() {
         this.updateSelectAllCheckboxState();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ListComponent, deps: [{ token: DataService }, { token: i0.ElementRef }, { token: SelectionService }, { token: DisabledItemsService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: ListComponent, isStandalone: true, selector: "kendo-list", inputs: { selected: "selected", focused: "focused", textField: "textField", valueField: "valueField", height: "height", template: "template", groupTemplate: "groupTemplate", fixedGroupTemplate: "fixedGroupTemplate", show: "show", id: "id", optionPrefix: "optionPrefix", multipleSelection: "multipleSelection", virtual: "virtual", type: "type", checkboxes: "checkboxes", ariaLive: "ariaLive", ariaLabel: "ariaLabel", isMultiselect: "isMultiselect", isActionSheetExpanded: "isActionSheetExpanded", showStickyHeader: "showStickyHeader", rowWidth: "rowWidth", columnsWidths: "columnsWidths", customItemTemplate: "customItemTemplate", text: "text", allowCustom: "allowCustom", defaultItem: "defaultItem", selectAll: "selectAll", selectAllText: "selectAllText", isAllSelected: "isAllSelected", isPartiallySelected: "isPartiallySelected", data: "data", size: "size", rounded: "rounded" }, outputs: { selectAllClick: "selectAllClick", onClick: "onClick", pageChange: "pageChange", listResize: "listResize", popupListScroll: "popupListScroll" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }, { propertyName: "list", first: true, predicate: ["list"], descendants: true }, { propertyName: "virtualContainer", first: true, predicate: ["virtualContainer"], descendants: true }, { propertyName: "items", predicate: ListItemDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: ListComponent, deps: [{ token: DataService }, { token: i0.ElementRef }, { token: SelectionService }, { token: DisabledItemsService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: ListComponent, isStandalone: true, selector: "kendo-list", inputs: { selected: "selected", focused: "focused", textField: "textField", valueField: "valueField", height: "height", template: "template", groupTemplate: "groupTemplate", fixedGroupTemplate: "fixedGroupTemplate", show: "show", id: "id", optionPrefix: "optionPrefix", multipleSelection: "multipleSelection", virtual: "virtual", type: "type", checkboxes: "checkboxes", ariaLive: "ariaLive", ariaLabel: "ariaLabel", isMultiselect: "isMultiselect", isActionSheetExpanded: "isActionSheetExpanded", showStickyHeader: "showStickyHeader", rowWidth: "rowWidth", columnsWidths: "columnsWidths", customItemTemplate: "customItemTemplate", text: "text", allowCustom: "allowCustom", defaultItem: "defaultItem", selectAll: "selectAll", selectAllText: "selectAllText", isAllSelected: "isAllSelected", isPartiallySelected: "isPartiallySelected", data: "data", size: "size", rounded: "rounded" }, outputs: { selectAllClick: "selectAllClick", onClick: "onClick", pageChange: "pageChange", listResize: "listResize", popupListScroll: "popupListScroll" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }, { propertyName: "list", first: true, predicate: ["list"], descendants: true }, { propertyName: "virtualContainer", first: true, predicate: ["virtualContainer"], descendants: true }, { propertyName: "items", predicate: ListItemDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
     @if (selectAll) {
       <div class="k-list-sticky-header">
         <div
@@ -2711,7 +2710,7 @@ class ListComponent {
     <ng-content select=".k-no-data"></ng-content>
     `, isInline: true, dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "directive", type: ListItemDirective, selector: "\"li[role=option], li[role=group], li[role=presentation]\"" }, { kind: "directive", type: SelectableDirective, selector: "[kendoDropDownsSelectable]", inputs: ["index", "checkboxes", "height", "isMultiselect", "multipleSelection"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: CheckBoxComponent, selector: "kendo-checkbox", inputs: ["checkedState", "rounded"], outputs: ["checkedStateChange"], exportAs: ["kendoCheckBox"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: ListComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-list',
@@ -3212,8 +3211,8 @@ class AdaptiveRendererComponent {
     get windowSize() {
         return this.adaptiveService.size;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: AdaptiveRendererComponent, deps: [{ token: i1.LocalizationService }, { token: i7.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: AdaptiveRendererComponent, isStandalone: true, selector: "kendo-adaptive-renderer", inputs: { title: "title", subtitle: "subtitle", showTextInput: "showTextInput", sharedPopupActionSheetTemplate: "sharedPopupActionSheetTemplate", text: "text", placeholder: "placeholder", searchBarValue: "searchBarValue", filterable: "filterable", showListContainer: "showListContainer" }, outputs: { closePopup: "closePopup", textInputChange: "textInputChange", navigate: "navigate", onExpand: "onExpand" }, viewQueries: [{ propertyName: "actionSheet", first: true, predicate: ActionSheetComponent, descendants: true }, { propertyName: "actionSheetSearchBar", first: true, predicate: ["actionSheetSearchBar"], descendants: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: AdaptiveRendererComponent, deps: [{ token: i1.LocalizationService }, { token: i7.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: AdaptiveRendererComponent, isStandalone: true, selector: "kendo-adaptive-renderer", inputs: { title: "title", subtitle: "subtitle", showTextInput: "showTextInput", sharedPopupActionSheetTemplate: "sharedPopupActionSheetTemplate", text: "text", placeholder: "placeholder", searchBarValue: "searchBarValue", filterable: "filterable", showListContainer: "showListContainer" }, outputs: { closePopup: "closePopup", textInputChange: "textInputChange", navigate: "navigate", onExpand: "onExpand" }, viewQueries: [{ propertyName: "actionSheet", first: true, predicate: ActionSheetComponent, descendants: true }, { propertyName: "actionSheetSearchBar", first: true, predicate: ["actionSheetSearchBar"], descendants: true }], ngImport: i0, template: `
         <kendo-actionsheet
           #actionSheet
           [animation]="{ duration: animationDuration }"
@@ -3292,7 +3291,7 @@ class AdaptiveRendererComponent {
         </kendo-actionsheet>
         `, isInline: true, dependencies: [{ kind: "component", type: ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["actions", "actionsLayout", "overlayClickClose", "title", "subtitle", "items", "cssClass", "cssStyle", "animation", "expanded", "titleId", "initialFocus"], outputs: ["expandedChange", "action", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "directive", type: TextBoxPrefixTemplateDirective, selector: "[kendoTextBoxPrefixTemplate]", inputs: ["showSeparator"] }, { 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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: AdaptiveRendererComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: AdaptiveRendererComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-adaptive-renderer',
@@ -3493,10 +3492,10 @@ class SharedDropDownEventsDirective {
     ngOnDestroy() {
         this.subscriptions.unsubscribe();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: SharedDropDownEventsDirective, deps: [{ token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: SharedDropDownEventsDirective, isStandalone: true, selector: "[kendoDropDownSharedEvents]", inputs: { hostElement: "hostElement", clearButtonClicked: "clearButtonClicked", isFocused: "isFocused" }, outputs: { isFocusedChange: "isFocusedChange", onFocus: "onFocus", handleBlur: "handleBlur" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: SharedDropDownEventsDirective, deps: [{ token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: SharedDropDownEventsDirective, isStandalone: true, selector: "[kendoDropDownSharedEvents]", inputs: { hostElement: "hostElement", clearButtonClicked: "clearButtonClicked", isFocused: "isFocused" }, outputs: { isFocusedChange: "isFocusedChange", onFocus: "onFocus", handleBlur: "handleBlur" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: SharedDropDownEventsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: SharedDropDownEventsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoDropDownSharedEvents]',
@@ -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,19 +3634,28 @@ 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;
-    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 });
+    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.30", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: Messages, decorators: [{
             type: Directive
         }], propDecorators: { noDataText: [{
                 type: Input
@@ -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
             }] } });
 
 /**
@@ -3620,15 +3694,15 @@ class LocalizedMessagesDirective extends Messages {
         super();
         this.service = service;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: LocalizedMessagesDirective, isStandalone: true, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  ", providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: LocalizedMessagesDirective, isStandalone: true, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  ", providers: [
             {
                 provide: Messages,
                 useExisting: forwardRef(() => LocalizedMessagesDirective)
             }
         ], usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
             type: Directive,
             args: [{
                     providers: [
@@ -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`&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. 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&mdash;
      * 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();
         }
     }
@@ -4785,8 +4900,8 @@ class AutoCompleteComponent {
             this.togglePopup(false);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: AutoCompleteComponent, deps: [{ token: i1.LocalizationService }, { token: DataService }, { token: i2.PopupService }, { token: SelectionService }, { token: NavigationService }, { token: DisabledItemsService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.Injector }, { token: i7.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: AutoCompleteComponent, isStandalone: true, selector: "kendo-autocomplete", inputs: { highlightFirst: "highlightFirst", showStickyHeader: "showStickyHeader", focusableId: "focusableId", data: "data", value: "value", valueField: "valueField", placeholder: "placeholder", adaptiveMode: "adaptiveMode", adaptiveTitle: "adaptiveTitle", adaptiveSubtitle: "adaptiveSubtitle", popupSettings: "popupSettings", listHeight: "listHeight", loading: "loading", clearButton: "clearButton", suggest: "suggest", disabled: "disabled", itemDisabled: "itemDisabled", readonly: "readonly", tabindex: "tabindex", tabIndex: "tabIndex", filterable: "filterable", virtual: "virtual", size: "size", rounded: "rounded", fillMode: "fillMode", inputAttributes: "inputAttributes" }, outputs: { valueChange: "valueChange", filterChange: "filterChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur", inputFocus: "inputFocus", inputBlur: "inputBlur" }, host: { properties: { "class.k-readonly": "this.readonly", "class.k-disabled": "this.isDisabled", "class.k-loading": "this.isLoading", "attr.dir": "this.dir" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: AutoCompleteComponent, deps: [{ token: i1.LocalizationService }, { token: DataService }, { token: i2.PopupService }, { token: SelectionService }, { token: NavigationService }, { token: DisabledItemsService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.Injector }, { token: i7.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: AutoCompleteComponent, isStandalone: true, selector: "kendo-autocomplete", inputs: { highlightFirst: "highlightFirst", showStickyHeader: "showStickyHeader", focusableId: "focusableId", data: "data", value: "value", valueField: "valueField", placeholder: "placeholder", adaptiveMode: "adaptiveMode", adaptiveTitle: "adaptiveTitle", adaptiveSubtitle: "adaptiveSubtitle", popupSettings: "popupSettings", listHeight: "listHeight", loading: "loading", clearButton: "clearButton", suggest: "suggest", disabled: "disabled", itemDisabled: "itemDisabled", readonly: "readonly", tabindex: "tabindex", tabIndex: "tabIndex", filterable: "filterable", virtual: "virtual", size: "size", rounded: "rounded", fillMode: "fillMode", inputAttributes: "inputAttributes" }, outputs: { valueChange: "valueChange", filterChange: "filterChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur", inputFocus: "inputFocus", inputBlur: "inputBlur" }, host: { properties: { "class.k-readonly": "this.readonly", "class.k-disabled": "this.isDisabled", "class.k-loading": "this.isLoading", "attr.dir": "this.dir" } }, providers: [
             AUTOCOMPLETE_VALUE_ACCESSOR,
             DataService,
             SelectionService,
@@ -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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", 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();
         }
@@ -6866,8 +7027,8 @@ class ComboBoxComponent extends MultiTabStop {
             this.togglePopup(false);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ComboBoxComponent, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i2.PopupService }, { token: SelectionService }, { token: NavigationService }, { token: DisabledItemsService }, { token: DataService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: i0.ElementRef }, { token: i7.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: ComboBoxComponent, isStandalone: true, selector: "kendo-combobox", inputs: { icon: "icon", svgIcon: "svgIcon", inputAttributes: "inputAttributes", showStickyHeader: "showStickyHeader", focusableId: "focusableId", allowCustom: "allowCustom", data: "data", value: "value", textField: "textField", valueField: "valueField", valuePrimitive: "valuePrimitive", valueNormalizer: "valueNormalizer", placeholder: "placeholder", adaptiveMode: "adaptiveMode", adaptiveTitle: "adaptiveTitle", adaptiveSubtitle: "adaptiveSubtitle", popupSettings: "popupSettings", listHeight: "listHeight", loading: "loading", suggest: "suggest", clearButton: "clearButton", disabled: "disabled", itemDisabled: "itemDisabled", readonly: "readonly", tabindex: "tabindex", tabIndex: "tabIndex", filterable: "filterable", virtual: "virtual", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", selectionChange: "selectionChange", filterChange: "filterChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur", inputFocus: "inputFocus", inputBlur: "inputBlur", escape: "escape" }, host: { properties: { "class.k-readonly": "this.readonly", "class.k-disabled": "this.isDisabled", "class.k-loading": "this.isLoading", "attr.dir": "this.dir" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: ComboBoxComponent, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i2.PopupService }, { token: SelectionService }, { token: NavigationService }, { token: DisabledItemsService }, { token: DataService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: i0.ElementRef }, { token: i7.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: ComboBoxComponent, isStandalone: true, selector: "kendo-combobox", inputs: { icon: "icon", svgIcon: "svgIcon", inputAttributes: "inputAttributes", showStickyHeader: "showStickyHeader", focusableId: "focusableId", allowCustom: "allowCustom", data: "data", value: "value", textField: "textField", valueField: "valueField", valuePrimitive: "valuePrimitive", valueNormalizer: "valueNormalizer", placeholder: "placeholder", adaptiveMode: "adaptiveMode", adaptiveTitle: "adaptiveTitle", adaptiveSubtitle: "adaptiveSubtitle", popupSettings: "popupSettings", listHeight: "listHeight", loading: "loading", suggest: "suggest", clearButton: "clearButton", disabled: "disabled", itemDisabled: "itemDisabled", readonly: "readonly", tabindex: "tabindex", tabIndex: "tabIndex", filterable: "filterable", virtual: "virtual", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", selectionChange: "selectionChange", filterChange: "filterChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur", inputFocus: "inputFocus", inputBlur: "inputBlur", escape: "escape" }, host: { properties: { "class.k-readonly": "this.readonly", "class.k-disabled": "this.isDisabled", "class.k-loading": "this.isLoading", "attr.dir": "this.dir" } }, providers: [
             COMBOBOX_VALUE_ACCESSOR,
             DataService,
             SelectionService,
@@ -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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", 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"
@@ -7486,10 +7648,10 @@ class ValueTemplateDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ValueTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: ValueTemplateDirective, isStandalone: true, selector: "[kendoDropDownListValueTemplate],[kendoDropDownTreeValueTemplate]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: ValueTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: ValueTemplateDirective, isStandalone: true, selector: "[kendoDropDownListValueTemplate],[kendoDropDownTreeValueTemplate]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ValueTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: ValueTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoDropDownListValueTemplate],[kendoDropDownTreeValueTemplate]',
@@ -7516,10 +7678,10 @@ class FilterInputDirective {
     nextTick(fn) {
         this.zone.runOutsideAngular(() => setTimeout(fn));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: FilterInputDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: FilterInputDirective, isStandalone: true, selector: "[filterInput]", inputs: { focused: ["filterInput", "focused"] }, usesOnChanges: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: FilterInputDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: FilterInputDirective, isStandalone: true, selector: "[filterInput]", inputs: { focused: ["filterInput", "focused"] }, usesOnChanges: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: FilterInputDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: FilterInputDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[filterInput]',
@@ -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() {
@@ -8912,8 +9129,8 @@ class DropDownListComponent {
         this.selectionService.focus(this.selectionService.focused);
         this.opened.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: DropDownListComponent, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i2.PopupService }, { token: SelectionService }, { token: NavigationService }, { token: DisabledItemsService }, { token: DataService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.Injector }, { token: i7.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: DropDownListComponent, isStandalone: true, selector: "kendo-dropdownlist", inputs: { customIconClass: "customIconClass", showStickyHeader: "showStickyHeader", icon: "icon", svgIcon: "svgIcon", loading: "loading", data: "data", value: "value", textField: "textField", valueField: "valueField", adaptiveMode: "adaptiveMode", adaptiveTitle: "adaptiveTitle", adaptiveSubtitle: "adaptiveSubtitle", popupSettings: "popupSettings", listHeight: "listHeight", defaultItem: "defaultItem", disabled: "disabled", itemDisabled: "itemDisabled", readonly: "readonly", filterable: "filterable", virtual: "virtual", ignoreCase: "ignoreCase", delay: "delay", valuePrimitive: "valuePrimitive", tabindex: "tabindex", tabIndex: "tabIndex", size: "size", rounded: "rounded", fillMode: "fillMode", leftRightArrowsNavigation: "leftRightArrowsNavigation", focusableId: ["id", "focusableId"] }, outputs: { valueChange: "valueChange", filterChange: "filterChange", selectionChange: "selectionChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur" }, host: { listeners: { "keydown": "keydown($event)", "keypress": "keypress($event)", "click": "click()" }, properties: { "class.k-readonly": "this.readonly", "class.k-dropdownlist": "this.hostClasses", "class.k-picker": "this.hostClasses", "class.k-disabled": "this.isDisabledClass", "attr.aria-disabled": "this.isDisabledClass", "class.k-loading": "this.isLoading", "attr.id": "this.focusableId", "attr.dir": "this.dir", "attr.tabindex": "this.hostTabIndex", "attr.readonly": "this.readonlyAttr", "attr.aria-busy": "this.isBusy", "attr.role": "this.role", "attr.aria-haspopup": "this.haspopup", "attr.aria-invalid": "this.hostAriaInvalid" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: DropDownListComponent, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i2.PopupService }, { token: SelectionService }, { token: NavigationService }, { token: DisabledItemsService }, { token: DataService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.Injector }, { token: i7.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: DropDownListComponent, isStandalone: true, selector: "kendo-dropdownlist", inputs: { customIconClass: "customIconClass", showStickyHeader: "showStickyHeader", icon: "icon", svgIcon: "svgIcon", loading: "loading", data: "data", value: "value", textField: "textField", valueField: "valueField", adaptiveMode: "adaptiveMode", adaptiveTitle: "adaptiveTitle", adaptiveSubtitle: "adaptiveSubtitle", popupSettings: "popupSettings", listHeight: "listHeight", defaultItem: "defaultItem", disabled: "disabled", itemDisabled: "itemDisabled", readonly: "readonly", filterable: "filterable", virtual: "virtual", ignoreCase: "ignoreCase", delay: "delay", valuePrimitive: "valuePrimitive", tabindex: "tabindex", tabIndex: "tabIndex", size: "size", rounded: "rounded", fillMode: "fillMode", leftRightArrowsNavigation: "leftRightArrowsNavigation", focusableId: ["id", "focusableId"] }, outputs: { valueChange: "valueChange", filterChange: "filterChange", selectionChange: "selectionChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur" }, host: { listeners: { "keydown": "keydown($event)", "keypress": "keypress($event)", "click": "click()" }, properties: { "class.k-readonly": "this.readonly", "class.k-dropdownlist": "this.hostClasses", "class.k-picker": "this.hostClasses", "class.k-disabled": "this.isDisabledClass", "attr.aria-disabled": "this.isDisabledClass", "class.k-loading": "this.isLoading", "attr.id": "this.focusableId", "attr.dir": "this.dir", "attr.tabindex": "this.hostTabIndex", "attr.readonly": "this.readonlyAttr", "attr.aria-busy": "this.isBusy", "attr.role": "this.role", "attr.aria-haspopup": "this.haspopup", "attr.aria-invalid": "this.hostAriaInvalid" } }, providers: [
             DROPDOWNLIST_VALUE_ACCESSOR,
             DataService,
             SelectionService,
@@ -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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", 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
@@ -9495,10 +9713,10 @@ class TagTemplateDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: TagTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: TagTemplateDirective, isStandalone: true, selector: "[kendoMultiSelectTagTemplate],[kendoMultiSelectTreeTagTemplate]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: TagTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: TagTemplateDirective, isStandalone: true, selector: "[kendoMultiSelectTagTemplate],[kendoMultiSelectTreeTagTemplate]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: TagTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: TagTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoMultiSelectTagTemplate],[kendoMultiSelectTreeTagTemplate]',
@@ -9537,10 +9755,10 @@ class GroupTagTemplateDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: GroupTagTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: GroupTagTemplateDirective, isStandalone: true, selector: "[kendoMultiSelectGroupTagTemplate],[kendoMultiSelectTreeGroupTagTemplate]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: GroupTagTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: GroupTagTemplateDirective, isStandalone: true, selector: "[kendoMultiSelectGroupTagTemplate],[kendoMultiSelectTreeGroupTagTemplate]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: GroupTagTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: GroupTagTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoMultiSelectGroupTagTemplate],[kendoMultiSelectTreeGroupTagTemplate]',
@@ -9679,8 +9897,8 @@ class TagListComponent {
             return prop.find(item => item in tag);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: TagListComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: TagListComponent, isStandalone: true, selector: "kendo-taglist", inputs: { tags: "tags", textField: "textField", valueField: "valueField", valueDepth: "valueDepth", focused: "focused", template: "template", groupTemplate: "groupTemplate", disabled: "disabled", tagPrefix: "tagPrefix", id: "id", ariaLabel: "ariaLabel", size: "size", rounded: "rounded", fillMode: "fillMode", disabledIndices: "disabledIndices" }, outputs: { removeTag: "removeTag" }, host: { properties: { "class.k-chip-list": "this.hostClass", "attr.id": "this.hostId", "attr.role": "this.taglistRole", "attr.aria-label": "this.hostAriaLabel", "attr.aria-multiselectable": "this.multiselectable", "attr.aria-orientation": "this.ariaOrientation" } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: TagListComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: TagListComponent, isStandalone: true, selector: "kendo-taglist", inputs: { tags: "tags", textField: "textField", valueField: "valueField", valueDepth: "valueDepth", focused: "focused", template: "template", groupTemplate: "groupTemplate", disabled: "disabled", tagPrefix: "tagPrefix", id: "id", ariaLabel: "ariaLabel", size: "size", rounded: "rounded", fillMode: "fillMode", disabledIndices: "disabledIndices" }, outputs: { removeTag: "removeTag" }, host: { properties: { "class.k-chip-list": "this.hostClass", "attr.id": "this.hostId", "attr.role": "this.taglistRole", "attr.aria-label": "this.hostAriaLabel", "attr.aria-multiselectable": "this.multiselectable", "attr.aria-orientation": "this.ariaOrientation" } }, ngImport: i0, template: `
         @for (tag of tags; track $index; let index = $index) {
           <div
             [attr.id]="itemId(tag, index)"
@@ -9752,7 +9970,7 @@ class TagListComponent {
         <ng-content></ng-content>
         `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: TagListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: TagListComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-taglist',
@@ -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();
         });
@@ -11797,8 +12086,8 @@ class MultiSelectComponent {
             this.isPartiallySelected = this.isPartiallySelectedComputed;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: MultiSelectComponent, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i2.PopupService }, { token: DataService }, { token: SelectionService }, { token: NavigationService }, { token: DisabledItemsService }, { token: i0.ChangeDetectorRef }, { token: i0.KeyValueDiffers }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.Injector }, { token: i7.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: MultiSelectComponent, isStandalone: true, selector: "kendo-multiselect", inputs: { showStickyHeader: "showStickyHeader", selectAll: "selectAll", summaryTagAfter: "summaryTagAfter", focusableId: "focusableId", autoClose: "autoClose", loading: "loading", data: "data", value: "value", valueField: "valueField", textField: "textField", tabindex: "tabindex", tabIndex: "tabIndex", size: "size", rounded: "rounded", fillMode: "fillMode", placeholder: "placeholder", adaptiveMode: "adaptiveMode", adaptiveTitle: "adaptiveTitle", adaptiveSubtitle: "adaptiveSubtitle", disabled: "disabled", itemDisabled: "itemDisabled", checkboxes: "checkboxes", readonly: "readonly", filterable: "filterable", virtual: "virtual", popupSettings: "popupSettings", listHeight: "listHeight", valuePrimitive: "valuePrimitive", clearButton: "clearButton", tagMapper: "tagMapper", allowCustom: "allowCustom", valueNormalizer: "valueNormalizer", inputAttributes: "inputAttributes" }, outputs: { filterChange: "filterChange", valueChange: "valueChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur", inputFocus: "inputFocus", inputBlur: "inputBlur", removeTag: "removeTag", selectAllChange: "selectAllChange" }, host: { properties: { "class.k-readonly": "this.readonly", "attr.dir": "this.dir", "class.k-disabled": "this.disabledClass", "class.k-loading": "this.isLoading" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: MultiSelectComponent, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i2.PopupService }, { token: DataService }, { token: SelectionService }, { token: NavigationService }, { token: DisabledItemsService }, { token: i0.ChangeDetectorRef }, { token: i0.KeyValueDiffers }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.Injector }, { token: i7.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: MultiSelectComponent, isStandalone: true, selector: "kendo-multiselect", inputs: { showStickyHeader: "showStickyHeader", selectAll: "selectAll", summaryTagAfter: "summaryTagAfter", focusableId: "focusableId", autoClose: "autoClose", loading: "loading", data: "data", value: "value", valueField: "valueField", textField: "textField", tabindex: "tabindex", tabIndex: "tabIndex", size: "size", rounded: "rounded", fillMode: "fillMode", placeholder: "placeholder", adaptiveMode: "adaptiveMode", adaptiveTitle: "adaptiveTitle", adaptiveSubtitle: "adaptiveSubtitle", disabled: "disabled", itemDisabled: "itemDisabled", checkboxes: "checkboxes", readonly: "readonly", filterable: "filterable", virtual: "virtual", popupSettings: "popupSettings", listHeight: "listHeight", valuePrimitive: "valuePrimitive", clearButton: "clearButton", tagMapper: "tagMapper", allowCustom: "allowCustom", valueNormalizer: "valueNormalizer", inputAttributes: "inputAttributes" }, outputs: { filterChange: "filterChange", valueChange: "valueChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur", inputFocus: "inputFocus", inputBlur: "inputBlur", removeTag: "removeTag", selectAllChange: "selectAllChange" }, host: { properties: { "class.k-readonly": "this.readonly", "attr.dir": "this.dir", "class.k-disabled": "this.disabledClass", "class.k-loading": "this.isLoading" } }, providers: [
             MULTISELECT_VALUE_ACCESSOR,
             DataService,
             SelectionService,
@@ -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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", 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"
@@ -12448,10 +12738,10 @@ class ColumnCellTemplateDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ColumnCellTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: ColumnCellTemplateDirective, isStandalone: true, selector: "[kendoMultiColumnComboBoxColumnCellTemplate]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: ColumnCellTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: ColumnCellTemplateDirective, isStandalone: true, selector: "[kendoMultiColumnComboBoxColumnCellTemplate]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ColumnCellTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: ColumnCellTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoMultiColumnComboBoxColumnCellTemplate]',
@@ -12483,10 +12773,10 @@ class ColumnHeaderTemplateDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ColumnHeaderTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: ColumnHeaderTemplateDirective, isStandalone: true, selector: "[kendoMultiColumnComboBoxColumnHeaderTemplate]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: ColumnHeaderTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: ColumnHeaderTemplateDirective, isStandalone: true, selector: "[kendoMultiColumnComboBoxColumnHeaderTemplate]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ColumnHeaderTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: ColumnHeaderTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoMultiColumnComboBoxColumnHeaderTemplate]',
@@ -12567,10 +12857,10 @@ class ComboBoxColumnComponent {
      * @hidden
      */
     matchesMedia = true;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ComboBoxColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", type: ComboBoxColumnComponent, isStandalone: true, selector: "kendo-combobox-column", inputs: { field: "field", title: "title", width: "width", hidden: "hidden", style: "style", headerStyle: "headerStyle", class: "class", headerClass: "headerClass", media: "media" }, queries: [{ propertyName: "cellTemplate", first: true, predicate: ColumnCellTemplateDirective, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: ColumnHeaderTemplateDirective, descendants: true }], ngImport: i0, template: '', isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: ComboBoxColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.30", type: ComboBoxColumnComponent, isStandalone: true, selector: "kendo-combobox-column", inputs: { field: "field", title: "title", width: "width", hidden: "hidden", style: "style", headerStyle: "headerStyle", class: "class", headerClass: "headerClass", media: "media" }, queries: [{ propertyName: "cellTemplate", first: true, predicate: ColumnCellTemplateDirective, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: ColumnHeaderTemplateDirective, descendants: true }], ngImport: i0, template: '', isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ComboBoxColumnComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: ComboBoxColumnComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-combobox-column',
@@ -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()) {
@@ -12857,8 +13159,8 @@ class MultiColumnComboBoxComponent extends ComboBoxComponent {
         }
         return this.headerTable?.nativeElement.offsetWidth;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: MultiColumnComboBoxComponent, deps: [{ token: i1.LocalizationService }, { token: i2.PopupService }, { token: SelectionService }, { token: NavigationService }, { token: DisabledItemsService }, { token: DataService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.Injector }, { token: i0.ElementRef }, { token: i7.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: MultiColumnComboBoxComponent, isStandalone: true, selector: "kendo-multicolumncombobox", host: { properties: { "class.k-dropdowngrid": "this.hostClasses", "class.k-disabled": "this.isDisabled" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: MultiColumnComboBoxComponent, deps: [{ token: i1.LocalizationService }, { token: i2.PopupService }, { token: SelectionService }, { token: NavigationService }, { token: DisabledItemsService }, { token: DataService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.Injector }, { token: i0.ElementRef }, { token: i7.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: MultiColumnComboBoxComponent, isStandalone: true, selector: "kendo-multicolumncombobox", host: { properties: { "class.k-dropdowngrid": "this.hostClasses", "class.k-disabled": "this.isDisabled" } }, providers: [
             SelectionService,
             DataService,
             NavigationService,
@@ -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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", 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)"
@@ -13516,10 +13819,10 @@ class NodeTemplateDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: NodeTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: NodeTemplateDirective, isStandalone: true, selector: "[kendoDropDownTreeNodeTemplate], [kendoMultiSelectTreeNodeTemplate]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: NodeTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: NodeTemplateDirective, isStandalone: true, selector: "[kendoDropDownTreeNodeTemplate], [kendoMultiSelectTreeNodeTemplate]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: NodeTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: NodeTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoDropDownTreeNodeTemplate], [kendoMultiSelectTreeNodeTemplate]',
@@ -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;
@@ -14810,8 +15180,8 @@ class DropDownTreeComponent {
         this.opened.emit();
         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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", 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.30", 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,
@@ -15042,9 +15412,10 @@ class DropDownTreeComponent {
         }
         `, 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: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: FilterInputDirective, selector: "[filterInput]", inputs: ["filterInput"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { 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: SelectDirective, selector: "[kendoTreeViewSelectable]", inputs: ["isSelected", "selectBy", "kendoTreeViewSelectable", "selectedKeys"], outputs: ["selectedKeysChange"] }, { 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: DropDownTreeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", 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: [{
@@ -15520,10 +15890,10 @@ class MultiSelectTreeLookupService {
             };
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: MultiSelectTreeLookupService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: MultiSelectTreeLookupService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: MultiSelectTreeLookupService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: MultiSelectTreeLookupService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: MultiSelectTreeLookupService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: MultiSelectTreeLookupService, decorators: [{
             type: Injectable
         }] });
 
@@ -15584,10 +15954,10 @@ class BaseCheckDirective {
     getKey(item, level) {
         return valueFrom(item, this.valueField) + '_' + (this.isHeterogeneous ? level : 0);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: BaseCheckDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: BaseCheckDirective, isStandalone: true, inputs: { valueField: "valueField", checkedItems: "checkedItems", isHeterogeneous: "isHeterogeneous" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: BaseCheckDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: BaseCheckDirective, isStandalone: true, inputs: { valueField: "valueField", checkedItems: "checkedItems", isHeterogeneous: "isHeterogeneous" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: BaseCheckDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: BaseCheckDirective, decorators: [{
             type: Directive
         }], propDecorators: { valueField: [{
                 type: Input
@@ -15735,10 +16105,10 @@ class CheckDirective extends BaseCheckDirective {
         }
         return false;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: CheckDirective, deps: [{ token: i1$1.TreeViewComponent }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: CheckDirective, isStandalone: true, selector: "[kendoMultiSelectTreeCheckable]", inputs: { checkable: "checkable", valueField: "valueField", checkedItems: "checkedItems" }, outputs: { checkedItemsChange: "checkedItemsChange" }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: CheckDirective, deps: [{ token: i1$1.TreeViewComponent }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: CheckDirective, isStandalone: true, selector: "[kendoMultiSelectTreeCheckable]", inputs: { checkable: "checkable", valueField: "valueField", checkedItems: "checkedItems" }, outputs: { checkedItemsChange: "checkedItemsChange" }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: CheckDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: CheckDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoMultiSelectTreeCheckable]',
@@ -15888,10 +16258,10 @@ class CheckAllDirective extends BaseCheckDirective {
         });
         return childrenChecked || this.isItemChecked(lookup.item);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: CheckAllDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: CheckAllDirective, isStandalone: true, selector: "[checkAll]", inputs: { lastAction: "lastAction", treeview: "treeview", checkedItems: "checkedItems", valueField: "valueField", focused: ["checkAll", "focused"] }, outputs: { checkedItemsChange: "checkedItemsChange" }, host: { listeners: { "change": "handleChange($event.target)" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: CheckAllDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: CheckAllDirective, isStandalone: true, selector: "[checkAll]", inputs: { lastAction: "lastAction", treeview: "treeview", checkedItems: "checkedItems", valueField: "valueField", focused: ["checkAll", "focused"] }, outputs: { checkedItemsChange: "checkedItemsChange" }, host: { listeners: { "change": "handleChange($event.target)" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: CheckAllDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: CheckAllDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[checkAll]',
@@ -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);
@@ -17494,8 +17940,8 @@ class MultiSelectTreeComponent {
         this.cdr.detectChanges();
         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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", 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.30", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", 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: [{
@@ -18259,10 +18706,10 @@ class DropDownTreeFlatBindingDirective extends FlatDataBindingDirective {
         }
         super.ngOnChanges(changes);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: DropDownTreeFlatBindingDirective, deps: [{ token: i1$1.DataBoundComponent }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: DropDownTreeFlatBindingDirective, isStandalone: true, selector: "[kendoDropDownTreeFlatBinding]", inputs: { nodes: ["kendoDropDownTreeFlatBinding", "nodes"], idField: ["valueField", "idField"] }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: DropDownTreeFlatBindingDirective, deps: [{ token: i1$1.DataBoundComponent }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: DropDownTreeFlatBindingDirective, isStandalone: true, selector: "[kendoDropDownTreeFlatBinding]", inputs: { nodes: ["kendoDropDownTreeFlatBinding", "nodes"], idField: ["valueField", "idField"] }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: DropDownTreeFlatBindingDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: DropDownTreeFlatBindingDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoDropDownTreeFlatBinding]',
@@ -18316,10 +18763,10 @@ class DropDownTreeHierarchyBindingDirective extends HierarchyBindingDirective {
         }
         super.ngOnChanges(changes);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: DropDownTreeHierarchyBindingDirective, deps: [{ token: i1$1.DataBoundComponent }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: DropDownTreeHierarchyBindingDirective, isStandalone: true, selector: "[kendoDropDownTreeHierarchyBinding]", inputs: { nodes: ["kendoDropDownTreeHierarchyBinding", "nodes"] }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: DropDownTreeHierarchyBindingDirective, deps: [{ token: i1$1.DataBoundComponent }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: DropDownTreeHierarchyBindingDirective, isStandalone: true, selector: "[kendoDropDownTreeHierarchyBinding]", inputs: { nodes: ["kendoDropDownTreeHierarchyBinding", "nodes"] }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: DropDownTreeHierarchyBindingDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: DropDownTreeHierarchyBindingDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoDropDownTreeHierarchyBinding]',
@@ -18374,10 +18821,10 @@ class MultiSelectTreeFlatBindingDirective extends FlatDataBindingDirective {
         }
         super.ngOnChanges(changes);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: MultiSelectTreeFlatBindingDirective, deps: [{ token: i1$1.DataBoundComponent }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: MultiSelectTreeFlatBindingDirective, isStandalone: true, selector: "[kendoMultiSelectTreeFlatBinding]", inputs: { nodes: ["kendoMultiSelectTreeFlatBinding", "nodes"], idField: ["valueField", "idField"] }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: MultiSelectTreeFlatBindingDirective, deps: [{ token: i1$1.DataBoundComponent }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: MultiSelectTreeFlatBindingDirective, isStandalone: true, selector: "[kendoMultiSelectTreeFlatBinding]", inputs: { nodes: ["kendoMultiSelectTreeFlatBinding", "nodes"], idField: ["valueField", "idField"] }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: MultiSelectTreeFlatBindingDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: MultiSelectTreeFlatBindingDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoMultiSelectTreeFlatBinding]',
@@ -18431,10 +18878,10 @@ class MultiSelectTreeHierarchyBindingDirective extends HierarchyBindingDirective
         }
         super.ngOnChanges(changes);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: MultiSelectTreeHierarchyBindingDirective, deps: [{ token: i1$1.DataBoundComponent }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: MultiSelectTreeHierarchyBindingDirective, isStandalone: true, selector: "[kendoMultiSelectTreeHierarchyBinding]", inputs: { nodes: ["kendoMultiSelectTreeHierarchyBinding", "nodes"] }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: MultiSelectTreeHierarchyBindingDirective, deps: [{ token: i1$1.DataBoundComponent }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: MultiSelectTreeHierarchyBindingDirective, isStandalone: true, selector: "[kendoMultiSelectTreeHierarchyBinding]", inputs: { nodes: ["kendoMultiSelectTreeHierarchyBinding", "nodes"] }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: MultiSelectTreeHierarchyBindingDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: MultiSelectTreeHierarchyBindingDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoMultiSelectTreeHierarchyBinding]',
@@ -18482,10 +18929,10 @@ class DropDownTreesExpandDirective extends ExpandDirective {
         super(dropDownTree);
         this.dropDownTree = dropDownTree;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: DropDownTreesExpandDirective, deps: [{ token: i1$1.ExpandableComponent }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: DropDownTreesExpandDirective, isStandalone: true, selector: "[kendoDropDownTreeExpandable], [kendoMultiSelectTreeExpandable]", inputs: { isExpanded: ["isNodeExpanded", "isExpanded"] }, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: DropDownTreesExpandDirective, deps: [{ token: i1$1.ExpandableComponent }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: DropDownTreesExpandDirective, isStandalone: true, selector: "[kendoDropDownTreeExpandable], [kendoMultiSelectTreeExpandable]", inputs: { isExpanded: ["isNodeExpanded", "isExpanded"] }, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: DropDownTreesExpandDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: DropDownTreesExpandDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoDropDownTreeExpandable], [kendoMultiSelectTreeExpandable]',
@@ -18612,10 +19059,10 @@ class FilterDirective {
         const providedFields = isPresent(settings) && typeof settings === 'object' ? settings.fields : [];
         return Object.assign({}, DEFAULT_FILTER_SETTINGS, settings, { fields: this.getFilterFields(providedFields) });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: FilterDirective, deps: [{ token: FilterableComponent }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: FilterDirective, isStandalone: true, selector: "[kendoDropDownFilter]", inputs: { data: "data", rawSettings: ["kendoDropDownFilter", "rawSettings"], filterable: "filterable" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: FilterDirective, deps: [{ token: FilterableComponent }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: FilterDirective, isStandalone: true, selector: "[kendoDropDownFilter]", inputs: { data: "data", rawSettings: ["kendoDropDownFilter", "rawSettings"], filterable: "filterable" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: FilterDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: FilterDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoDropDownFilter]',
@@ -18697,15 +19144,15 @@ class CustomMessagesComponent extends Messages {
     get override() {
         return true;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: CustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", type: CustomMessagesComponent, isStandalone: true, selector: "kendo-dropdownlist-messages,kendo-combobox-messages,kendo-multicolumncombobox-messages,kendo-autocomplete-messages,kendo-multiselect-messages,kendo-dropdowntree-messages,kendo-multiselecttree-messages", providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: CustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.30", type: CustomMessagesComponent, isStandalone: true, selector: "kendo-dropdownlist-messages,kendo-combobox-messages,kendo-multicolumncombobox-messages,kendo-autocomplete-messages,kendo-multiselect-messages,kendo-dropdowntree-messages,kendo-multiselecttree-messages", providers: [
             {
                 provide: Messages,
                 useExisting: forwardRef(() => CustomMessagesComponent)
             }
         ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: CustomMessagesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: CustomMessagesComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [
@@ -18768,10 +19215,10 @@ class MultiSelectTreeSummaryTagDirective {
             }
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: MultiSelectTreeSummaryTagDirective, deps: [{ token: MultiSelectTreeComponent }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: MultiSelectTreeSummaryTagDirective, isStandalone: true, selector: "[kendoMultiSelectTreeSummaryTag]", inputs: { showAfter: ["kendoMultiSelectTreeSummaryTag", "showAfter"] }, usesOnChanges: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: MultiSelectTreeSummaryTagDirective, deps: [{ token: MultiSelectTreeComponent }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: MultiSelectTreeSummaryTagDirective, isStandalone: true, selector: "[kendoMultiSelectTreeSummaryTag]", inputs: { showAfter: ["kendoMultiSelectTreeSummaryTag", "showAfter"] }, usesOnChanges: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: MultiSelectTreeSummaryTagDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: MultiSelectTreeSummaryTagDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoMultiSelectTreeSummaryTag]',
@@ -18940,9 +19387,9 @@ const KENDO_DROPDOWNS = [
  * - `CustomMessagesComponent`&mdash;The custom messages component.
  */
 class DropDownTreesModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: DropDownTreesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.27", ngImport: i0, type: DropDownTreesModule, imports: [DropDownTreeComponent, DropDownTreeFlatBindingDirective, DropDownTreeHierarchyBindingDirective, DropDownTreesExpandDirective, NodeTemplateDirective, HeaderTemplateDirective, FooterTemplateDirective, ValueTemplateDirective, NoDataTemplateDirective, CustomMessagesComponent, MultiSelectTreeComponent, MultiSelectTreeFlatBindingDirective, MultiSelectTreeHierarchyBindingDirective, DropDownTreesExpandDirective, NodeTemplateDirective, MultiSelectTreeSummaryTagDirective, GroupTagTemplateDirective, TagTemplateDirective, HeaderTemplateDirective, FooterTemplateDirective, ValueTemplateDirective, NoDataTemplateDirective, CustomMessagesComponent], exports: [DropDownTreeComponent, DropDownTreeFlatBindingDirective, DropDownTreeHierarchyBindingDirective, DropDownTreesExpandDirective, NodeTemplateDirective, HeaderTemplateDirective, FooterTemplateDirective, ValueTemplateDirective, NoDataTemplateDirective, CustomMessagesComponent, MultiSelectTreeComponent, MultiSelectTreeFlatBindingDirective, MultiSelectTreeHierarchyBindingDirective, DropDownTreesExpandDirective, NodeTemplateDirective, MultiSelectTreeSummaryTagDirective, GroupTagTemplateDirective, TagTemplateDirective, HeaderTemplateDirective, FooterTemplateDirective, ValueTemplateDirective, NoDataTemplateDirective, CustomMessagesComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: DropDownTreesModule, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: DropDownTreesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: DropDownTreesModule, imports: [DropDownTreeComponent, DropDownTreeFlatBindingDirective, DropDownTreeHierarchyBindingDirective, DropDownTreesExpandDirective, NodeTemplateDirective, HeaderTemplateDirective, FooterTemplateDirective, ValueTemplateDirective, NoDataTemplateDirective, CustomMessagesComponent, MultiSelectTreeComponent, MultiSelectTreeFlatBindingDirective, MultiSelectTreeHierarchyBindingDirective, DropDownTreesExpandDirective, NodeTemplateDirective, MultiSelectTreeSummaryTagDirective, GroupTagTemplateDirective, TagTemplateDirective, HeaderTemplateDirective, FooterTemplateDirective, ValueTemplateDirective, NoDataTemplateDirective, CustomMessagesComponent], exports: [DropDownTreeComponent, DropDownTreeFlatBindingDirective, DropDownTreeHierarchyBindingDirective, DropDownTreesExpandDirective, NodeTemplateDirective, HeaderTemplateDirective, FooterTemplateDirective, ValueTemplateDirective, NoDataTemplateDirective, CustomMessagesComponent, MultiSelectTreeComponent, MultiSelectTreeFlatBindingDirective, MultiSelectTreeHierarchyBindingDirective, DropDownTreesExpandDirective, NodeTemplateDirective, MultiSelectTreeSummaryTagDirective, GroupTagTemplateDirective, TagTemplateDirective, HeaderTemplateDirective, FooterTemplateDirective, ValueTemplateDirective, NoDataTemplateDirective, CustomMessagesComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: DropDownTreesModule, providers: [
             IconsService,
             PopupService,
             ResizeBatchService,
@@ -18953,7 +19400,7 @@ class DropDownTreesModule {
             AdaptiveService
         ], imports: [DropDownTreeComponent, MultiSelectTreeComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: DropDownTreesModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: DropDownTreesModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...KENDO_DROPDOWNTREE, ...KENDO_MULTISELECTTREE],
@@ -18992,11 +19439,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
  * ```
  */
 class DropDownsModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: DropDownsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.27", ngImport: i0, type: DropDownsModule, imports: [AutoCompleteComponent, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, i10.SuffixTemplateDirective, i10.PrefixTemplateDirective, i10.SeparatorComponent, ComboBoxComponent, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, i10.SuffixTemplateDirective, i10.PrefixTemplateDirective, i10.SeparatorComponent, i10.ToggleButtonTabStopDirective, MultiColumnComboBoxComponent, ComboBoxColumnComponent, ColumnHeaderTemplateDirective, ColumnCellTemplateDirective, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, i10.SuffixTemplateDirective, i10.PrefixTemplateDirective, i10.SeparatorComponent, i10.ToggleButtonTabStopDirective, DropDownListComponent, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, ValueTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, MultiSelectComponent, CustomItemTemplateDirective, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, GroupTagTemplateDirective, TagTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, i10.SuffixTemplateDirective, i10.PrefixTemplateDirective, i10.SeparatorComponent, DropDownTreeComponent, DropDownTreeFlatBindingDirective, DropDownTreeHierarchyBindingDirective, DropDownTreesExpandDirective, NodeTemplateDirective, HeaderTemplateDirective, FooterTemplateDirective, ValueTemplateDirective, NoDataTemplateDirective, CustomMessagesComponent, MultiSelectTreeComponent, MultiSelectTreeFlatBindingDirective, MultiSelectTreeHierarchyBindingDirective, DropDownTreesExpandDirective, NodeTemplateDirective, MultiSelectTreeSummaryTagDirective, GroupTagTemplateDirective, TagTemplateDirective, HeaderTemplateDirective, FooterTemplateDirective, ValueTemplateDirective, NoDataTemplateDirective, CustomMessagesComponent, i10.PrefixTemplateDirective, i10.SuffixTemplateDirective, i10.SeparatorComponent, i10.ToggleButtonTabStopDirective], exports: [AutoCompleteComponent, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, i10.SuffixTemplateDirective, i10.PrefixTemplateDirective, i10.SeparatorComponent, ComboBoxComponent, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, i10.SuffixTemplateDirective, i10.PrefixTemplateDirective, i10.SeparatorComponent, i10.ToggleButtonTabStopDirective, MultiColumnComboBoxComponent, ComboBoxColumnComponent, ColumnHeaderTemplateDirective, ColumnCellTemplateDirective, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, i10.SuffixTemplateDirective, i10.PrefixTemplateDirective, i10.SeparatorComponent, i10.ToggleButtonTabStopDirective, DropDownListComponent, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, ValueTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, MultiSelectComponent, CustomItemTemplateDirective, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, GroupTagTemplateDirective, TagTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, i10.SuffixTemplateDirective, i10.PrefixTemplateDirective, i10.SeparatorComponent, DropDownTreeComponent, DropDownTreeFlatBindingDirective, DropDownTreeHierarchyBindingDirective, DropDownTreesExpandDirective, NodeTemplateDirective, HeaderTemplateDirective, FooterTemplateDirective, ValueTemplateDirective, NoDataTemplateDirective, CustomMessagesComponent, MultiSelectTreeComponent, MultiSelectTreeFlatBindingDirective, MultiSelectTreeHierarchyBindingDirective, DropDownTreesExpandDirective, NodeTemplateDirective, MultiSelectTreeSummaryTagDirective, GroupTagTemplateDirective, TagTemplateDirective, HeaderTemplateDirective, FooterTemplateDirective, ValueTemplateDirective, NoDataTemplateDirective, CustomMessagesComponent, i10.PrefixTemplateDirective, i10.SuffixTemplateDirective, i10.SeparatorComponent, i10.ToggleButtonTabStopDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: DropDownsModule, providers: [PopupService, ResizeBatchService, IconsService, DialogContainerService, DialogService, WindowService, WindowContainerService, AdaptiveService], imports: [AutoCompleteComponent, i10.SeparatorComponent, ComboBoxComponent, i10.SeparatorComponent, MultiColumnComboBoxComponent, i10.SeparatorComponent, DropDownListComponent, MultiSelectComponent, i10.SeparatorComponent, DropDownTreeComponent, MultiSelectTreeComponent, i10.SeparatorComponent] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: DropDownsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: DropDownsModule, imports: [AutoCompleteComponent, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, i10.SuffixTemplateDirective, i10.PrefixTemplateDirective, i10.SeparatorComponent, ComboBoxComponent, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, i10.SuffixTemplateDirective, i10.PrefixTemplateDirective, i10.SeparatorComponent, i10.ToggleButtonTabStopDirective, MultiColumnComboBoxComponent, ComboBoxColumnComponent, ColumnHeaderTemplateDirective, ColumnCellTemplateDirective, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, i10.SuffixTemplateDirective, i10.PrefixTemplateDirective, i10.SeparatorComponent, i10.ToggleButtonTabStopDirective, DropDownListComponent, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, ValueTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, MultiSelectComponent, CustomItemTemplateDirective, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, GroupTagTemplateDirective, TagTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, i10.SuffixTemplateDirective, i10.PrefixTemplateDirective, i10.SeparatorComponent, DropDownTreeComponent, DropDownTreeFlatBindingDirective, DropDownTreeHierarchyBindingDirective, DropDownTreesExpandDirective, NodeTemplateDirective, HeaderTemplateDirective, FooterTemplateDirective, ValueTemplateDirective, NoDataTemplateDirective, CustomMessagesComponent, MultiSelectTreeComponent, MultiSelectTreeFlatBindingDirective, MultiSelectTreeHierarchyBindingDirective, DropDownTreesExpandDirective, NodeTemplateDirective, MultiSelectTreeSummaryTagDirective, GroupTagTemplateDirective, TagTemplateDirective, HeaderTemplateDirective, FooterTemplateDirective, ValueTemplateDirective, NoDataTemplateDirective, CustomMessagesComponent, i10.PrefixTemplateDirective, i10.SuffixTemplateDirective, i10.SeparatorComponent, i10.ToggleButtonTabStopDirective], exports: [AutoCompleteComponent, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, i10.SuffixTemplateDirective, i10.PrefixTemplateDirective, i10.SeparatorComponent, ComboBoxComponent, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, i10.SuffixTemplateDirective, i10.PrefixTemplateDirective, i10.SeparatorComponent, i10.ToggleButtonTabStopDirective, MultiColumnComboBoxComponent, ComboBoxColumnComponent, ColumnHeaderTemplateDirective, ColumnCellTemplateDirective, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, i10.SuffixTemplateDirective, i10.PrefixTemplateDirective, i10.SeparatorComponent, i10.ToggleButtonTabStopDirective, DropDownListComponent, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, ValueTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, MultiSelectComponent, CustomItemTemplateDirective, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, GroupTagTemplateDirective, TagTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, i10.SuffixTemplateDirective, i10.PrefixTemplateDirective, i10.SeparatorComponent, DropDownTreeComponent, DropDownTreeFlatBindingDirective, DropDownTreeHierarchyBindingDirective, DropDownTreesExpandDirective, NodeTemplateDirective, HeaderTemplateDirective, FooterTemplateDirective, ValueTemplateDirective, NoDataTemplateDirective, CustomMessagesComponent, MultiSelectTreeComponent, MultiSelectTreeFlatBindingDirective, MultiSelectTreeHierarchyBindingDirective, DropDownTreesExpandDirective, NodeTemplateDirective, MultiSelectTreeSummaryTagDirective, GroupTagTemplateDirective, TagTemplateDirective, HeaderTemplateDirective, FooterTemplateDirective, ValueTemplateDirective, NoDataTemplateDirective, CustomMessagesComponent, i10.PrefixTemplateDirective, i10.SuffixTemplateDirective, i10.SeparatorComponent, i10.ToggleButtonTabStopDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: DropDownsModule, providers: [PopupService, ResizeBatchService, IconsService, DialogContainerService, DialogService, WindowService, WindowContainerService, AdaptiveService], imports: [AutoCompleteComponent, i10.SeparatorComponent, ComboBoxComponent, i10.SeparatorComponent, MultiColumnComboBoxComponent, i10.SeparatorComponent, DropDownListComponent, MultiSelectComponent, i10.SeparatorComponent, DropDownTreeComponent, MultiSelectTreeComponent, i10.SeparatorComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: DropDownsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: DropDownsModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [...KENDO_DROPDOWNS, ...KENDO_ADORNMENTS, ...KENDO_TOGGLEBUTTONTABSTOP],
@@ -19036,16 +19483,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
  * ```
  */
 class MultiSelectModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: MultiSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.27", ngImport: i0, type: MultiSelectModule, imports: [MultiSelectComponent, CustomItemTemplateDirective, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, GroupTagTemplateDirective, TagTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, i10.SuffixTemplateDirective, i10.PrefixTemplateDirective, i10.SeparatorComponent, i10.PrefixTemplateDirective, i10.SuffixTemplateDirective, i10.SeparatorComponent], exports: [MultiSelectComponent, CustomItemTemplateDirective, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, GroupTagTemplateDirective, TagTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, i10.SuffixTemplateDirective, i10.PrefixTemplateDirective, i10.SeparatorComponent, i10.PrefixTemplateDirective, i10.SuffixTemplateDirective, i10.SeparatorComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: MultiSelectModule, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: MultiSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: MultiSelectModule, imports: [MultiSelectComponent, CustomItemTemplateDirective, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, GroupTagTemplateDirective, TagTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, i10.SuffixTemplateDirective, i10.PrefixTemplateDirective, i10.SeparatorComponent, i10.PrefixTemplateDirective, i10.SuffixTemplateDirective, i10.SeparatorComponent], exports: [MultiSelectComponent, CustomItemTemplateDirective, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, GroupTagTemplateDirective, TagTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, i10.SuffixTemplateDirective, i10.PrefixTemplateDirective, i10.SeparatorComponent, i10.PrefixTemplateDirective, i10.SuffixTemplateDirective, i10.SeparatorComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: MultiSelectModule, providers: [
             PopupService,
             ResizeBatchService,
             IconsService,
             AdaptiveService
         ], imports: [MultiSelectComponent, i10.SeparatorComponent, i10.SeparatorComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: MultiSelectModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: MultiSelectModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...KENDO_MULTISELECT, ...KENDO_ADORNMENTS],
@@ -19086,16 +19533,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
  * - `PrefixTemplateDirective`&mdash;The prefix template directive.
  */
 class AutoCompleteModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: AutoCompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.27", ngImport: i0, type: AutoCompleteModule, imports: [AutoCompleteComponent, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, i10.SuffixTemplateDirective, i10.PrefixTemplateDirective, i10.SeparatorComponent, i10.PrefixTemplateDirective, i10.SuffixTemplateDirective, i10.SeparatorComponent], exports: [AutoCompleteComponent, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, i10.SuffixTemplateDirective, i10.PrefixTemplateDirective, i10.SeparatorComponent, i10.PrefixTemplateDirective, i10.SuffixTemplateDirective, i10.SeparatorComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: AutoCompleteModule, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: AutoCompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: AutoCompleteModule, imports: [AutoCompleteComponent, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, i10.SuffixTemplateDirective, i10.PrefixTemplateDirective, i10.SeparatorComponent, i10.PrefixTemplateDirective, i10.SuffixTemplateDirective, i10.SeparatorComponent], exports: [AutoCompleteComponent, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, i10.SuffixTemplateDirective, i10.PrefixTemplateDirective, i10.SeparatorComponent, i10.PrefixTemplateDirective, i10.SuffixTemplateDirective, i10.SeparatorComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: AutoCompleteModule, providers: [
             PopupService,
             ResizeBatchService,
             IconsService,
             AdaptiveService
         ], imports: [AutoCompleteComponent, i10.SeparatorComponent, i10.SeparatorComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: AutoCompleteModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: AutoCompleteModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...KENDO_AUTOCOMPLETE, ...KENDO_ADORNMENTS],
@@ -19139,16 +19586,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
  * ```
  */
 class ComboBoxModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ComboBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.27", ngImport: i0, type: ComboBoxModule, imports: [ComboBoxComponent, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, i10.SuffixTemplateDirective, i10.PrefixTemplateDirective, i10.SeparatorComponent, i10.ToggleButtonTabStopDirective, MultiColumnComboBoxComponent, ComboBoxColumnComponent, ColumnHeaderTemplateDirective, ColumnCellTemplateDirective, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, i10.SuffixTemplateDirective, i10.PrefixTemplateDirective, i10.SeparatorComponent, i10.ToggleButtonTabStopDirective, i10.PrefixTemplateDirective, i10.SuffixTemplateDirective, i10.SeparatorComponent, i10.ToggleButtonTabStopDirective], exports: [ComboBoxComponent, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, i10.SuffixTemplateDirective, i10.PrefixTemplateDirective, i10.SeparatorComponent, i10.ToggleButtonTabStopDirective, MultiColumnComboBoxComponent, ComboBoxColumnComponent, ColumnHeaderTemplateDirective, ColumnCellTemplateDirective, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, i10.SuffixTemplateDirective, i10.PrefixTemplateDirective, i10.SeparatorComponent, i10.ToggleButtonTabStopDirective, i10.PrefixTemplateDirective, i10.SuffixTemplateDirective, i10.SeparatorComponent, i10.ToggleButtonTabStopDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ComboBoxModule, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: ComboBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: ComboBoxModule, imports: [ComboBoxComponent, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, i10.SuffixTemplateDirective, i10.PrefixTemplateDirective, i10.SeparatorComponent, i10.ToggleButtonTabStopDirective, MultiColumnComboBoxComponent, ComboBoxColumnComponent, ColumnHeaderTemplateDirective, ColumnCellTemplateDirective, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, i10.SuffixTemplateDirective, i10.PrefixTemplateDirective, i10.SeparatorComponent, i10.ToggleButtonTabStopDirective, i10.PrefixTemplateDirective, i10.SuffixTemplateDirective, i10.SeparatorComponent, i10.ToggleButtonTabStopDirective], exports: [ComboBoxComponent, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, i10.SuffixTemplateDirective, i10.PrefixTemplateDirective, i10.SeparatorComponent, i10.ToggleButtonTabStopDirective, MultiColumnComboBoxComponent, ComboBoxColumnComponent, ColumnHeaderTemplateDirective, ColumnCellTemplateDirective, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, i10.SuffixTemplateDirective, i10.PrefixTemplateDirective, i10.SeparatorComponent, i10.ToggleButtonTabStopDirective, i10.PrefixTemplateDirective, i10.SuffixTemplateDirective, i10.SeparatorComponent, i10.ToggleButtonTabStopDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: ComboBoxModule, providers: [
             PopupService,
             ResizeBatchService,
             IconsService,
             AdaptiveService
         ], imports: [ComboBoxComponent, i10.SeparatorComponent, MultiColumnComboBoxComponent, i10.SeparatorComponent, i10.SeparatorComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ComboBoxModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: ComboBoxModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...KENDO_COMBOBOX, ...KENDO_MULTICOLUMNCOMBOBOX, ...KENDO_ADORNMENTS, ...KENDO_TOGGLEBUTTONTABSTOP],
@@ -19198,16 +19645,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
  * ```
  */
 class DropDownListModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: DropDownListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.27", ngImport: i0, type: DropDownListModule, imports: [DropDownListComponent, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, ValueTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent], exports: [DropDownListComponent, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, ValueTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: DropDownListModule, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: DropDownListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: DropDownListModule, imports: [DropDownListComponent, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, ValueTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent], exports: [DropDownListComponent, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, ValueTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: DropDownListModule, providers: [
             PopupService,
             ResizeBatchService,
             IconsService,
             AdaptiveService
         ], imports: [DropDownListComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: DropDownListModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: DropDownListModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...KENDO_DROPDOWNLIST],