@progress/kendo-angular-treeview 25.3.1-develop.2 → 25.4.0-develop.1

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

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
-import { EventEmitter, Injectable, Optional, Directive, Input, HostBinding, Component, forwardRef, isDevMode, ViewContainerRef, ContentChild, Output, ViewChild, ChangeDetectionStrategy, Host, NgModule } from '@angular/core';
+import { EventEmitter, Injectable, Optional, Directive, signal, Input, HostBinding, ChangeDetectionStrategy, Component, forwardRef, isDevMode, ViewContainerRef, ContentChild, Output, ViewChild, afterNextRender, Host, NgModule } from '@angular/core';
 import { isDocumentAvailable, Keys, normalizeKeys, anyChanged, provideComponentName, hasObservers, KENDO_WEBMCP_HOST, isChanged, guid, ResizeBatchService } from '@progress/kendo-angular-common';
 import * as i1 from '@progress/kendo-angular-l10n';
 import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
@@ -13,7 +13,7 @@ import { getter, setter } from '@progress/kendo-common';
 import { chevronDownIcon, chevronRightIcon, chevronLeftIcon, searchIcon, cancelIcon, insertMiddleIcon, insertBottomIcon, insertTopIcon, plusIcon } from '@progress/kendo-svg-icons';
 import { CheckBoxComponent, TextBoxComponent, TextBoxPrefixTemplateDirective } from '@progress/kendo-angular-inputs';
 import { trigger, transition, style, animate } from '@angular/animations';
-import { filter, tap, switchMap, delay, takeUntil, catchError, finalize, take, map } from 'rxjs/operators';
+import { filter, tap, switchMap, delay, takeUntil, catchError, finalize, map, take } from 'rxjs/operators';
 import { NgTemplateOutlet } from '@angular/common';
 import { IconWrapperComponent, IconsService } from '@progress/kendo-angular-icons';
 import { Draggable } from '@progress/kendo-draggable';
@@ -28,8 +28,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1791536932,
-    version: '25.3.1-develop.2',
+    publishDate: 1791873158,
+    version: '25.4.0-develop.1',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -1079,11 +1079,19 @@ class TreeViewItemContentWrapperDirective {
     navigationService;
     selectionService;
     renderer;
-    dataItem;
-    index;
-    initialSelection = false;
-    isSelected = isSelected;
+    set dataItem(value) { this._dataItem.set(value); }
+    get dataItem() { return this._dataItem(); }
+    set index(value) { this._index.set(value); }
+    get index() { return this._index(); }
+    set initialSelection(value) { this._initialSelection.set(value); }
+    get initialSelection() { return this._initialSelection(); }
+    set isSelected(value) { this._isSelected.set(value); }
+    get isSelected() { return this._isSelected(); }
+    _isSelected = signal(isSelected, ...(ngDevMode ? [{ debugName: "_isSelected" }] : /* istanbul ignore next */ []));
+    _initialSelection = signal(false, ...(ngDevMode ? [{ debugName: "_initialSelection" }] : /* istanbul ignore next */ []));
     subscriptions = new Subscription();
+    _dataItem = signal(undefined, ...(ngDevMode ? [{ debugName: "_dataItem" }] : /* istanbul ignore next */ []));
+    _index = signal(undefined, ...(ngDevMode ? [{ debugName: "_index" }] : /* istanbul ignore next */ []));
     constructor(element, navigationService, selectionService, renderer) {
         this.element = element;
         this.navigationService = navigationService;
@@ -1145,35 +1153,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
 class LoadingIndicatorDirective {
     expandService;
     loadingService;
-    cd;
     get loading() {
-        return this._loading;
+        return this._loading();
     }
     set loading(value) {
-        this._loading = value;
-        this.cd.markForCheck();
+        this._loading.set(value);
     }
     set index(value) {
         // Cancel any pending loading timer when the node's index shifts (e.g., after drag-and-drop reorder)
-        if (this._index !== undefined && this._index !== value) {
+        if (this._index() !== undefined && this._index() !== value) {
             this.cancelLoading$.next();
             if (this.loading) {
                 this.loading = false;
             }
         }
-        this._index = value;
+        this._index.set(value);
     }
     get index() {
-        return this._index;
+        return this._index();
     }
-    _index;
-    _loading = false;
+    _index = signal(null, ...(ngDevMode ? [{ debugName: "_index" }] : /* istanbul ignore next */ []));
     cancelLoading$ = new Subject();
+    _loading = signal(false, ...(ngDevMode ? [{ debugName: "_loading" }] : /* istanbul ignore next */ []));
     subscription;
-    constructor(expandService, loadingService, cd) {
+    constructor(expandService, loadingService) {
         this.expandService = expandService;
         this.loadingService = loadingService;
-        this.cd = cd;
     }
     ngOnInit() {
         const loadingNotifications = this.loadingService
@@ -1194,7 +1199,7 @@ class LoadingIndicatorDirective {
             this.subscription.unsubscribe();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: LoadingIndicatorDirective, deps: [{ token: ExpandStateService }, { token: LoadingNotificationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: LoadingIndicatorDirective, deps: [{ token: ExpandStateService }, { token: LoadingNotificationService }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.23", type: LoadingIndicatorDirective, isStandalone: true, selector: "[kendoTreeViewLoading]", inputs: { index: ["kendoTreeViewLoading", "index"] }, exportAs: ["kendoTreeViewLoading"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: LoadingIndicatorDirective, decorators: [{
@@ -1204,7 +1209,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
                     exportAs: 'kendoTreeViewLoading',
                     standalone: true
                 }]
-        }], ctorParameters: () => [{ type: ExpandStateService }, { type: LoadingNotificationService }, { type: i0.ChangeDetectorRef }], propDecorators: { index: [{
+        }], ctorParameters: () => [{ type: ExpandStateService }, { type: LoadingNotificationService }], propDecorators: { index: [{
                 type: Input,
                 args: ["kendoTreeViewLoading"]
             }] } });
@@ -1226,16 +1231,62 @@ class TreeViewItemDirective {
     lookupService;
     renderer;
     ib;
-    dataItem;
-    index;
-    parentDataItem;
-    parentIndex;
-    role = TREE_ITEM_ROLE;
-    loadOnDemand = true;
-    checkable;
-    selectable;
-    expandable;
+    set dataItem(value) {
+        this._dataItem.set(value);
+    }
+    get dataItem() {
+        return this._dataItem();
+    }
+    set index(value) {
+        this._index.set(value);
+    }
+    get index() {
+        return this._index();
+    }
+    set parentDataItem(value) {
+        this._parentDataItem.set(value);
+    }
+    get parentDataItem() {
+        return this._parentDataItem();
+    }
+    set parentIndex(value) {
+        this._parentIndex.set(value);
+    }
+    get parentIndex() {
+        return this._parentIndex();
+    }
+    set role(value) {
+        this._role.set(value);
+    }
+    get role() {
+        return this._role();
+    }
+    set loadOnDemand(value) {
+        this._loadOnDemand.set(value);
+    }
+    get loadOnDemand() {
+        return this._loadOnDemand();
+    }
+    set checkable(value) {
+        this._checkable.set(value);
+    }
+    get checkable() {
+        return this._checkable();
+    }
+    set selectable(value) {
+        this._selectable.set(value);
+    }
+    get selectable() {
+        return this._selectable();
+    }
+    set expandable(value) {
+        this._expandable.set(value);
+    }
+    get expandable() {
+        return this._expandable();
+    }
     set isChecked(checked) {
+        this._isChecked.set(checked);
         if (checked === 'checked') {
             this.ariaChecked = 'true';
         }
@@ -1246,19 +1297,29 @@ class TreeViewItemDirective {
             this.ariaChecked = 'false';
         }
     }
-    isDisabled = false;
-    isVisible = true;
-    get isExpanded() {
-        return this._isExpanded || false;
+    set isDisabled(value) {
+        this._isDisabled.set(value);
+    }
+    get isDisabled() {
+        return this._isDisabled();
+    }
+    set isVisible(value) {
+        this._isVisible.set(value);
+    }
+    get isVisible() {
+        return this._isVisible();
     }
     set isExpanded(isExpanded) {
-        this._isExpanded = isExpanded;
+        this._isExpanded.set(isExpanded);
     }
-    get isSelected() {
-        return this._isSelected || false;
+    get isExpanded() {
+        return this._isExpanded() || false;
     }
     set isSelected(isSelected) {
-        this._isSelected = isSelected;
+        this._isSelected.set(isSelected);
+    }
+    get isSelected() {
+        return this._isSelected() || false;
     }
     get isButton() {
         return this.role === BUTTON_ROLE;
@@ -1271,8 +1332,20 @@ class TreeViewItemDirective {
     }
     ariaChecked = 'false';
     id = id++;
-    _isExpanded;
-    _isSelected;
+    _dataItem = signal(undefined, ...(ngDevMode ? [{ debugName: "_dataItem" }] : /* istanbul ignore next */ []));
+    _index = signal(undefined, ...(ngDevMode ? [{ debugName: "_index" }] : /* istanbul ignore next */ []));
+    _parentDataItem = signal(undefined, ...(ngDevMode ? [{ debugName: "_parentDataItem" }] : /* istanbul ignore next */ []));
+    _parentIndex = signal(undefined, ...(ngDevMode ? [{ debugName: "_parentIndex" }] : /* istanbul ignore next */ []));
+    _role = signal(TREE_ITEM_ROLE, ...(ngDevMode ? [{ debugName: "_role" }] : /* istanbul ignore next */ []));
+    _loadOnDemand = signal(true, ...(ngDevMode ? [{ debugName: "_loadOnDemand" }] : /* istanbul ignore next */ []));
+    _checkable = signal(undefined, ...(ngDevMode ? [{ debugName: "_checkable" }] : /* istanbul ignore next */ []));
+    _selectable = signal(undefined, ...(ngDevMode ? [{ debugName: "_selectable" }] : /* istanbul ignore next */ []));
+    _expandable = signal(undefined, ...(ngDevMode ? [{ debugName: "_expandable" }] : /* istanbul ignore next */ []));
+    _isChecked = signal(undefined, ...(ngDevMode ? [{ debugName: "_isChecked" }] : /* istanbul ignore next */ []));
+    _isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_isDisabled" }] : /* istanbul ignore next */ []));
+    _isVisible = signal(true, ...(ngDevMode ? [{ debugName: "_isVisible" }] : /* istanbul ignore next */ []));
+    _isExpanded = signal(false, ...(ngDevMode ? [{ debugName: "_isExpanded" }] : /* istanbul ignore next */ []));
+    _isSelected = signal(false, ...(ngDevMode ? [{ debugName: "_isSelected" }] : /* istanbul ignore next */ []));
     isInitialized = false;
     subscriptions = [];
     constructor(element, expandService, navigationService, selectionService, lookupService, renderer, ib) {
@@ -1470,31 +1543,49 @@ class TreeViewGroupComponent {
     /**
      * @hidden
      */
-    loadMoreTitle;
+    loadMoreTitle = signal(undefined, ...(ngDevMode ? [{ debugName: "loadMoreTitle" }] : /* istanbul ignore next */ []));
     kGroupClass = true;
     get role() {
         return this.parentIndex ? 'group' : 'tree';
     }
-    checkboxes;
-    expandIcons;
-    disabled;
-    selectable;
-    touchActions;
-    disableParentNodesOnly;
-    loadOnDemand = true;
-    trackBy;
-    nodes;
-    textField = "";
-    parentDataItem;
-    parentIndex;
-    nodeTemplateRef;
-    loadMoreButtonTemplateRef;
-    loadMoreButtonRole;
-    loadMoreService;
-    size = undefined;
-    expandDisabledNodes;
-    initialNodesLoaded = false;
-    loadingMoreNodes = false;
+    set checkboxes(value) { this._checkboxes.set(value); }
+    get checkboxes() { return this._checkboxes(); }
+    set loadMoreButtonRole(value) { this._loadMoreButtonRole.set(value); }
+    get loadMoreButtonRole() { return this._loadMoreButtonRole(); }
+    set expandIcons(value) { this._expandIcons.set(value); }
+    get expandIcons() { return this._expandIcons(); }
+    set disabled(value) { this._disabled.set(value); }
+    get disabled() { return this._disabled(); }
+    set selectable(value) { this._selectable.set(value); }
+    get selectable() { return this._selectable(); }
+    set touchActions(value) { this._touchActions.set(value); }
+    get touchActions() { return this._touchActions(); }
+    set disableParentNodesOnly(value) { this._disableParentNodesOnly.set(value); }
+    get disableParentNodesOnly() { return this._disableParentNodesOnly(); }
+    set loadOnDemand(value) { this._loadOnDemand.set(value); }
+    get loadOnDemand() { return this._loadOnDemand(); }
+    set trackBy(value) { this._trackBy.set(value); }
+    get trackBy() { return this._trackBy(); }
+    set nodes(value) { this._nodes.set(value); }
+    get nodes() { return this._nodes(); }
+    set textField(value) { this._textField.set(value); }
+    get textField() { return this._textField(); }
+    set parentDataItem(value) { this._parentDataItem.set(value); }
+    get parentDataItem() { return this._parentDataItem(); }
+    set parentIndex(value) { this._parentIndex.set(value); }
+    get parentIndex() { return this._parentIndex(); }
+    set nodeTemplateRef(value) { this._nodeTemplateRef.set(value); }
+    get nodeTemplateRef() { return this._nodeTemplateRef(); }
+    set loadMoreButtonTemplateRef(value) { this._loadMoreButtonTemplateRef.set(value); }
+    get loadMoreButtonTemplateRef() { return this._loadMoreButtonTemplateRef(); }
+    set loadMoreService(value) { this._loadMoreService.set(value); }
+    get loadMoreService() { return this._loadMoreService(); }
+    set size(value) { this._size.set(value); }
+    get size() { return this._size(); }
+    set expandDisabledNodes(value) { this._expandDisabledNodes.set(value); }
+    get expandDisabledNodes() { return this._expandDisabledNodes(); }
+    initialNodesLoaded = signal(false, ...(ngDevMode ? [{ debugName: "initialNodesLoaded" }] : /* istanbul ignore next */ []));
+    loadingMoreNodes = signal(false, ...(ngDevMode ? [{ debugName: "loadingMoreNodes" }] : /* istanbul ignore next */ []));
     isItemExpandable = (node, index) => this.expandDisabledNodes || !this.isItemDisabled(node, index);
     isContentDisabled(node, index) {
         return this.expandIcons && this.hasChildren(node) ? !this.isItemExpandable(node, index) : this.isItemDisabled(node, index);
@@ -1529,12 +1620,12 @@ class TreeViewGroupComponent {
     get data() {
         if (isPresent(this.pageSize)) {
             const normalizedSizeValue = this.pageSize > 0 ? this.pageSize : 0;
-            return this._data.slice(0, normalizedSizeValue);
+            return this._data().slice(0, normalizedSizeValue);
         }
-        return this._data;
+        return this._data();
     }
     set data(data) {
-        this._data = data;
+        this._data.set(data);
         this.registerLoadedNodes(this.data);
     }
     get loadMoreButtonIndex() {
@@ -1550,13 +1641,39 @@ class TreeViewGroupComponent {
         if (!this.loadMoreService) {
             return this.data.length;
         }
-        return this.loadMoreService.getTotalNodesCount(this.parentDataItem, this._data.length);
+        return this.loadMoreService.getTotalNodesCount(this.parentDataItem, this._data().length);
     }
-    _data = [];
+    _data = signal([], ...(ngDevMode ? [{ debugName: "_data" }] : /* istanbul ignore next */ []));
     nodesSubscription;
     loadMoreNodesSubscription;
     singleRecordSubscriptions = new Subscription();
     localizationSubscriptions = new Subscription();
+    _checkboxes = signal(undefined, ...(ngDevMode ? [{ debugName: "_checkboxes" }] : /* istanbul ignore next */ []));
+    _expandIcons = signal(undefined, ...(ngDevMode ? [{ debugName: "_expandIcons" }] : /* istanbul ignore next */ []));
+    _disabled = signal(undefined, ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
+    _selectable = signal(undefined, ...(ngDevMode ? [{ debugName: "_selectable" }] : /* istanbul ignore next */ []));
+    _touchActions = signal(undefined, ...(ngDevMode ? [{ debugName: "_touchActions" }] : /* istanbul ignore next */ []));
+    _disableParentNodesOnly = signal(undefined, ...(ngDevMode ? [{ debugName: "_disableParentNodesOnly" }] : /* istanbul ignore next */ []));
+    _loadOnDemand = signal(true, ...(ngDevMode ? [{ debugName: "_loadOnDemand" }] : /* istanbul ignore next */ []));
+    _trackBy = signal(undefined, ...(ngDevMode ? [{ debugName: "_trackBy" }] : /* istanbul ignore next */ []));
+    _nodes = signal(undefined, ...(ngDevMode ? [{ debugName: "_nodes" }] : /* istanbul ignore next */ []));
+    _textField = signal('', ...(ngDevMode ? [{ debugName: "_textField" }] : /* istanbul ignore next */ []));
+    _parentDataItem = signal(undefined, ...(ngDevMode ? [{ debugName: "_parentDataItem" }] : /* istanbul ignore next */ []));
+    _parentIndex = signal(undefined, ...(ngDevMode ? [{ debugName: "_parentIndex" }] : /* istanbul ignore next */ []));
+    _nodeTemplateRef = signal(undefined, ...(ngDevMode ? [{ debugName: "_nodeTemplateRef" }] : /* istanbul ignore next */ []));
+    _loadMoreButtonTemplateRef = signal(undefined, ...(ngDevMode ? [{ debugName: "_loadMoreButtonTemplateRef" }] : /* istanbul ignore next */ []));
+    _loadMoreService = signal(undefined, ...(ngDevMode ? [{ debugName: "_loadMoreService" }] : /* istanbul ignore next */ []));
+    _size = signal(undefined, ...(ngDevMode ? [{ debugName: "_size" }] : /* istanbul ignore next */ []));
+    _expandDisabledNodes = signal(undefined, ...(ngDevMode ? [{ debugName: "_expandDisabledNodes" }] : /* istanbul ignore next */ []));
+    _loadMoreButtonRole = signal(undefined, ...(ngDevMode ? [{ debugName: "_loadMoreButtonRole" }] : /* istanbul ignore next */ []));
+    _isChecked = signal(() => 'none', ...(ngDevMode ? [{ debugName: "_isChecked" }] : /* istanbul ignore next */ []));
+    _isDisabled = signal(() => false, ...(ngDevMode ? [{ debugName: "_isDisabled" }] : /* istanbul ignore next */ []));
+    _hasCheckbox = signal(() => true, ...(ngDevMode ? [{ debugName: "_hasCheckbox" }] : /* istanbul ignore next */ []));
+    _isExpanded = signal(() => false, ...(ngDevMode ? [{ debugName: "_isExpanded" }] : /* istanbul ignore next */ []));
+    _isVisible = signal(() => true, ...(ngDevMode ? [{ debugName: "_isVisible" }] : /* istanbul ignore next */ []));
+    _isSelected = signal(() => false, ...(ngDevMode ? [{ debugName: "_isSelected" }] : /* istanbul ignore next */ []));
+    _children = signal(() => of([]), ...(ngDevMode ? [{ debugName: "_children" }] : /* istanbul ignore next */ []));
+    _hasChildren = signal(() => false, ...(ngDevMode ? [{ debugName: "_hasChildren" }] : /* istanbul ignore next */ []));
     constructor(expandService, loadingService, indexBuilder, treeViewLookupService, navigationService, nodeChildrenService, dataChangeNotification, changeDetectorRef, localization, renderer) {
         this.expandService = expandService;
         this.loadingService = loadingService;
@@ -1569,14 +1686,22 @@ class TreeViewGroupComponent {
         this.localization = localization;
         this.renderer = renderer;
     }
-    isChecked = () => 'none';
-    isDisabled = () => false;
-    hasCheckbox = () => true;
-    isExpanded = () => false;
-    isVisible = () => true;
-    isSelected = () => false;
-    children = () => of([]);
-    hasChildren = () => false;
+    set isChecked(value) { this._isChecked.set(value); }
+    get isChecked() { return this._isChecked(); }
+    set isDisabled(value) { this._isDisabled.set(value); }
+    get isDisabled() { return this._isDisabled(); }
+    set hasCheckbox(value) { this._hasCheckbox.set(value); }
+    get hasCheckbox() { return this._hasCheckbox(); }
+    set isExpanded(value) { this._isExpanded.set(value); }
+    get isExpanded() { return this._isExpanded(); }
+    set isVisible(value) { this._isVisible.set(value); }
+    get isVisible() { return this._isVisible(); }
+    set isSelected(value) { this._isSelected.set(value); }
+    get isSelected() { return this._isSelected(); }
+    set children(value) { this._children.set(value); }
+    get children() { return this._children(); }
+    set hasChildren(value) { this._hasChildren.set(value); }
+    get hasChildren() { return this._hasChildren(); }
     get hasTemplate() {
         return isPresent(this.nodeTemplateRef);
     }
@@ -1631,20 +1756,29 @@ class TreeViewGroupComponent {
             .pipe(filter(index => index === this.loadMoreButtonIndex))
             .subscribe(this.loadMoreNodes.bind(this)));
         this.localizationSubscriptions.add(this.localization.changes.subscribe(this.l10nChange.bind(this)));
+        // Keyboard check (Space) and selection (Enter) happen outside Angular's change detection
+        // because the keydown handler runs outside the zone. The OnPush component is not
+        // automatically marked dirty by keyboard events the way it is by click events, so
+        // we have to mark it explicitly whenever a check or selection action is triggered.
+        this.singleRecordSubscriptions.add(this.navigationService.checks
+            .subscribe(() => this.changeDetectorRef.markForCheck()));
+        this.singleRecordSubscriptions.add(this.navigationService.selects
+            .subscribe(() => this.changeDetectorRef.markForCheck()));
+        this.singleRecordSubscriptions.add(this.navigationService.deselectAllButCurrentItem
+            .subscribe(() => this.changeDetectorRef.markForCheck()));
     }
     ngOnChanges(changes) {
         if (changes.parentIndex && this.loadOnDemand) {
             this.setNodeChildren(this.mapToTreeItem(this.data));
         }
         if (this.localization.get('loadMore')) {
-            this.loadMoreTitle = this.localization.get('loadMore');
+            this.loadMoreTitle.set(this.localization.get('loadMore'));
         }
     }
     l10nChange() {
         if (this.localization.get('loadMore')) {
-            this.loadMoreTitle = this.localization.get('loadMore');
+            this.loadMoreTitle.set(this.localization.get('loadMore'));
         }
-        this.changeDetectorRef.markForCheck();
     }
     fetchChildren(node, index) {
         return this.children(node)
@@ -1682,10 +1816,10 @@ class TreeViewGroupComponent {
         this.reselectItemAt(initialLoadMoreButtonIndex);
     }
     fetchMoreNodes() {
-        if (this.loadingMoreNodes) {
+        if (this.loadingMoreNodes()) {
             return;
         }
-        this.loadingMoreNodes = true;
+        this.loadingMoreNodes.set(true);
         if (isPresent(this.loadMoreNodesSubscription)) {
             this.loadMoreNodesSubscription.unsubscribe();
         }
@@ -1695,7 +1829,7 @@ class TreeViewGroupComponent {
             skip: this.data.length,
             take: this.loadMoreService.getInitialPageSize(this.parentDataItem)
         })
-            .pipe(finalize(() => this.loadingMoreNodes = false))
+            .pipe(finalize(() => this.loadingMoreNodes.set(false)))
             .subscribe(items => {
             if (!(Array.isArray(items) && items.length > 0)) {
                 return;
@@ -1734,7 +1868,8 @@ class TreeViewGroupComponent {
         this.nodesSubscription = this.nodes(this.parentDataItem, this.parentIndex)
             .subscribe(data => {
             this.data = data;
-            this.initialNodesLoaded = true;
+            this.initialNodesLoaded.set(true);
+            this.changeDetectorRef.markForCheck();
         });
     }
     reselectItemAt(index) {
@@ -1753,7 +1888,7 @@ class TreeViewGroupComponent {
         this.emitChildrenLoaded(mappedChildren);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: TreeViewGroupComponent, deps: [{ token: ExpandStateService }, { token: LoadingNotificationService }, { token: IndexBuilderService }, { token: TreeViewLookupService }, { token: NavigationService }, { token: NodeChildrenService }, { token: DataChangeNotificationService }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: TreeViewGroupComponent, isStandalone: true, selector: "[kendoTreeViewGroup]", inputs: { checkboxes: "checkboxes", expandIcons: "expandIcons", disabled: "disabled", selectable: "selectable", touchActions: "touchActions", disableParentNodesOnly: "disableParentNodesOnly", loadOnDemand: "loadOnDemand", trackBy: "trackBy", nodes: "nodes", textField: "textField", parentDataItem: "parentDataItem", parentIndex: "parentIndex", nodeTemplateRef: "nodeTemplateRef", loadMoreButtonTemplateRef: "loadMoreButtonTemplateRef", loadMoreButtonRole: "loadMoreButtonRole", loadMoreService: "loadMoreService", size: "size", expandDisabledNodes: "expandDisabledNodes", isChecked: "isChecked", isDisabled: "isDisabled", hasCheckbox: "hasCheckbox", isExpanded: "isExpanded", isVisible: "isVisible", isSelected: "isSelected", children: "children", hasChildren: "hasChildren" }, host: { properties: { "class.k-treeview-group": "this.kGroupClass", "attr.role": "this.role" } }, usesOnChanges: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: TreeViewGroupComponent, isStandalone: true, selector: "[kendoTreeViewGroup]", inputs: { checkboxes: "checkboxes", loadMoreButtonRole: "loadMoreButtonRole", expandIcons: "expandIcons", disabled: "disabled", selectable: "selectable", touchActions: "touchActions", disableParentNodesOnly: "disableParentNodesOnly", loadOnDemand: "loadOnDemand", trackBy: "trackBy", nodes: "nodes", textField: "textField", parentDataItem: "parentDataItem", parentIndex: "parentIndex", nodeTemplateRef: "nodeTemplateRef", loadMoreButtonTemplateRef: "loadMoreButtonTemplateRef", loadMoreService: "loadMoreService", size: "size", expandDisabledNodes: "expandDisabledNodes", isChecked: "isChecked", isDisabled: "isDisabled", hasCheckbox: "hasCheckbox", isExpanded: "isExpanded", isVisible: "isVisible", isSelected: "isSelected", children: "children", hasChildren: "hasChildren" }, host: { properties: { "class.k-treeview-group": "this.kGroupClass", "attr.role": "this.role" } }, usesOnChanges: true, ngImport: i0, template: `
         @for (node of data; track trackBy ? trackBy(index, node) : index; let index = $index) {
           <li
             class="k-treeview-item"
@@ -1872,7 +2007,7 @@ class TreeViewGroupComponent {
             }
           </li>
         }
-        @if (initialNodesLoaded && moreNodesAvailable) {
+        @if (initialNodesLoaded() && moreNodesAvailable) {
           <li
             class="k-treeview-item"
             kendoTreeViewItem
@@ -1889,7 +2024,7 @@ class TreeViewGroupComponent {
                 kendoTreeViewItemContentWrapper
                 [index]="loadMoreButtonIndex"
                 class="k-treeview-item-content">
-              @if (loadingMoreNodes) {
+              @if (loadingMoreNodes()) {
                 <span
                   class="k-icon k-i-loading"
                   >
@@ -1910,14 +2045,14 @@ class TreeViewGroupComponent {
                     </ng-template>
                   }
                   @if (!loadMoreButtonTemplateRef) {
-                    {{ loadMoreTitle }}
+                    {{ loadMoreTitle() }}
                   }
                 </span>
               </span>
             </div>
           </li>
         }
-        `, isInline: true, dependencies: [{ kind: "component", type: TreeViewGroupComponent, selector: "[kendoTreeViewGroup]", inputs: ["checkboxes", "expandIcons", "disabled", "selectable", "touchActions", "disableParentNodesOnly", "loadOnDemand", "trackBy", "nodes", "textField", "parentDataItem", "parentIndex", "nodeTemplateRef", "loadMoreButtonTemplateRef", "loadMoreButtonRole", "loadMoreService", "size", "expandDisabledNodes", "isChecked", "isDisabled", "hasCheckbox", "isExpanded", "isVisible", "isSelected", "children", "hasChildren"] }, { kind: "directive", type: TreeViewItemDirective, selector: "[kendoTreeViewItem]", inputs: ["dataItem", "index", "parentDataItem", "parentIndex", "role", "loadOnDemand", "checkable", "selectable", "expandable", "isChecked", "isDisabled", "isVisible", "isExpanded", "isSelected"] }, { kind: "directive", type: LoadingIndicatorDirective, selector: "[kendoTreeViewLoading]", inputs: ["kendoTreeViewLoading"], exportAs: ["kendoTreeViewLoading"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: CheckBoxComponent, selector: "kendo-checkbox", inputs: ["checkedState", "rounded"], outputs: ["checkedStateChange"], exportAs: ["kendoCheckBox"] }, { kind: "directive", type: TreeViewItemContentWrapperDirective, selector: "[kendoTreeViewItemContentWrapper]", inputs: ["dataItem", "index", "initialSelection", "isSelected"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [
+        `, isInline: true, dependencies: [{ kind: "component", type: TreeViewGroupComponent, selector: "[kendoTreeViewGroup]", inputs: ["checkboxes", "loadMoreButtonRole", "expandIcons", "disabled", "selectable", "touchActions", "disableParentNodesOnly", "loadOnDemand", "trackBy", "nodes", "textField", "parentDataItem", "parentIndex", "nodeTemplateRef", "loadMoreButtonTemplateRef", "loadMoreService", "size", "expandDisabledNodes", "isChecked", "isDisabled", "hasCheckbox", "isExpanded", "isVisible", "isSelected", "children", "hasChildren"] }, { kind: "directive", type: TreeViewItemDirective, selector: "[kendoTreeViewItem]", inputs: ["dataItem", "index", "parentDataItem", "parentIndex", "role", "loadOnDemand", "checkable", "selectable", "expandable", "isChecked", "isDisabled", "isVisible", "isExpanded", "isSelected"] }, { kind: "directive", type: LoadingIndicatorDirective, selector: "[kendoTreeViewLoading]", inputs: ["kendoTreeViewLoading"], exportAs: ["kendoTreeViewLoading"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: CheckBoxComponent, selector: "kendo-checkbox", inputs: ["checkedState", "rounded"], outputs: ["checkedStateChange"], exportAs: ["kendoCheckBox"] }, { kind: "directive", type: TreeViewItemContentWrapperDirective, selector: "[kendoTreeViewItemContentWrapper]", inputs: ["dataItem", "index", "initialSelection", "isSelected"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [
             trigger('toggle', [
                 transition('void => *', [
                     style({ height: 0 }),
@@ -1928,7 +2063,7 @@ class TreeViewGroupComponent {
                     animate('0.1s ease-in', style({ height: 0 }))
                 ])
             ])
-        ] });
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: TreeViewGroupComponent, decorators: [{
             type: Component,
@@ -1945,6 +2080,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
                             ])
                         ])
                     ],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     selector: '[kendoTreeViewGroup]',
                     template: `
         @for (node of data; track trackBy ? trackBy(index, node) : index; let index = $index) {
@@ -2065,7 +2201,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
             }
           </li>
         }
-        @if (initialNodesLoaded && moreNodesAvailable) {
+        @if (initialNodesLoaded() && moreNodesAvailable) {
           <li
             class="k-treeview-item"
             kendoTreeViewItem
@@ -2082,7 +2218,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
                 kendoTreeViewItemContentWrapper
                 [index]="loadMoreButtonIndex"
                 class="k-treeview-item-content">
-              @if (loadingMoreNodes) {
+              @if (loadingMoreNodes()) {
                 <span
                   class="k-icon k-i-loading"
                   >
@@ -2103,7 +2239,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
                     </ng-template>
                   }
                   @if (!loadMoreButtonTemplateRef) {
-                    {{ loadMoreTitle }}
+                    {{ loadMoreTitle() }}
                   }
                 </span>
               </span>
@@ -2122,6 +2258,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
                 args: ["attr.role"]
             }], checkboxes: [{
                 type: Input
+            }], loadMoreButtonRole: [{
+                type: Input
             }], expandIcons: [{
                 type: Input
             }], disabled: [{
@@ -2148,8 +2286,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
                 type: Input
             }], loadMoreButtonTemplateRef: [{
                 type: Input
-            }], loadMoreButtonRole: [{
-                type: Input
             }], loadMoreService: [{
                 type: Input
             }], size: [{
@@ -2181,7 +2317,13 @@ class TreeViewMessages extends ComponentMessages {
     /**
      * Sets the text for the `Load More` button title.
      */
-    loadMore;
+    set loadMore(value) {
+        this._loadMore.set(value);
+    }
+    get loadMore() {
+        return this._loadMore();
+    }
+    _loadMore = signal(null, ...(ngDevMode ? [{ debugName: "_loadMore" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: TreeViewMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.23", type: TreeViewMessages, isStandalone: true, selector: "kendo-treeview-messages-base", inputs: { loadMore: "loadMore" }, usesInheritance: true, ngImport: i0 });
 }
@@ -2300,21 +2442,31 @@ class TreeViewComponent {
     /**
      * Sets the placeholder text for the filter input when the component is empty.
      */
-    filterInputPlaceholder = "";
+    set filterInputPlaceholder(value) {
+        this._filterInputPlaceholder.set(value);
+    }
+    get filterInputPlaceholder() {
+        return this._filterInputPlaceholder();
+    }
     /**
      * Allows expanding disabled nodes.
      *
      * @default false
      */
-    expandDisabledNodes;
+    set expandDisabledNodes(value) {
+        this._expandDisabledNodes.set(value);
+    }
+    get expandDisabledNodes() {
+        return this._expandDisabledNodes();
+    }
     /**
      * Enables or disables content animation.
      */
     set animate(value) {
-        this._animate = value;
+        this._animate.set(value);
     }
     get animate() {
-        return !this._animate;
+        return !this._animate();
     }
     /** @hidden */
     fetchNodes = () => this.data;
@@ -2406,10 +2558,10 @@ class TreeViewComponent {
      * Takes precedence over nested templates in the TreeView tag.
      */
     set nodeTemplateRef(template) {
-        this._nodeTemplateRef = template;
+        this._nodeTemplateRef.set(template);
     }
     get nodeTemplateRef() {
-        return this._nodeTemplateRef || this.nodeTemplateQuery;
+        return this._nodeTemplateRef() || this.nodeTemplateQuery;
     }
     /**
      * @hidden
@@ -2425,10 +2577,10 @@ class TreeViewComponent {
      * Takes precedence over nested templates in the TreeView tag.
      */
     set loadMoreButtonTemplateRef(template) {
-        this._loadMoreButtonTemplateRef = template;
+        this._loadMoreButtonTemplateRef.set(template);
     }
     get loadMoreButtonTemplateRef() {
-        return this._loadMoreButtonTemplateRef || this.loadMoreButtonTemplateQuery;
+        return this._loadMoreButtonTemplateRef() || this.loadMoreButtonTemplateQuery;
     }
     /**
      * @hidden
@@ -2436,12 +2588,22 @@ class TreeViewComponent {
      * Overrides the role attribute on the load-more button element.
      * Used by DropDownTree to set role="treeitem" for a11y compliance.
      */
-    loadMoreButtonRole;
+    set loadMoreButtonRole(value) {
+        this._loadMoreButtonRole.set(value);
+    }
+    get loadMoreButtonRole() {
+        return this._loadMoreButtonRole();
+    }
     /**
      * A function that defines how to track node changes.
      * By default, the TreeView tracks the nodes by data item object reference.
      */
-    trackBy = trackBy;
+    set trackBy(value) {
+        this._trackBy.set(value);
+    }
+    get trackBy() {
+        return this._trackBy();
+    }
     /**
      * The nodes displayed by the TreeView ([see example](https://www.telerik.com/kendo-angular-ui/components/treeview/data-binding)).
      */
@@ -2456,60 +2618,80 @@ class TreeViewComponent {
      * The fields of the data item that provide the text content of the nodes ([see example](https://www.telerik.com/kendo-angular-ui/components/treeview/data-binding)).
      * If set to an array, each level uses the field at the same index or the last item in the array.
      */
-    textField;
+    set textField(value) {
+        this._textField.set(value);
+    }
+    get textField() {
+        return this._textField();
+    }
     /**
      * A function that determines if a node has child nodes ([see example](https://www.telerik.com/kendo-angular-ui/components/treeview/data-binding)).
      */
     get hasChildren() {
-        return this._hasChildren || hasChildren;
+        return this._hasChildren() || hasChildren;
     }
     set hasChildren(callback) {
-        this._hasChildren = callback;
-        this.expandIcons = Boolean(this._isExpanded && this._hasChildren);
+        this._hasChildren.set(callback);
+        this.expandIcons = Boolean(this._isExpanded() && this._hasChildren());
     }
     /**
      * A function that determines if a node is checked ([see example](https://www.telerik.com/kendo-angular-ui/components/treeview/checkboxes#modifying-the-checked-state)).
      */
     get isChecked() {
-        return this._isChecked || isChecked;
+        return this._isChecked() || isChecked;
     }
     set isChecked(callback) {
-        this._isChecked = callback;
-        this.checkboxes = Boolean(this._isChecked);
+        this._isChecked.set(callback);
+        this.checkboxes = Boolean(this._isChecked());
     }
     /**
      * A function that determines if a node is disabled.
      */
-    isDisabled = isDisabled;
+    set isDisabled(value) {
+        this._isDisabled.set(value);
+    }
+    get isDisabled() {
+        return this._isDisabled();
+    }
     /**
      * A function that determines if a node has a checkbox. If there is no checkbox, the node is not checkable and is excluded from built-in check functionality.
      */
-    hasCheckbox = hasCheckbox;
+    set hasCheckbox(value) {
+        this._hasCheckbox.set(value);
+    }
+    get hasCheckbox() {
+        return this._hasCheckbox();
+    }
     /**
      * A function that determines if a node is expanded.
      */
     get isExpanded() {
-        return this._isExpanded || isExpanded;
+        return this._isExpanded() || isExpanded;
     }
     set isExpanded(callback) {
-        this._isExpanded = callback;
-        this.expandIcons = Boolean(this._isExpanded && this._hasChildren);
+        this._isExpanded.set(callback);
+        this.expandIcons = Boolean(this._isExpanded() && this._hasChildren());
     }
     /**
      * A function that determines if a node is selected ([see example](https://www.telerik.com/kendo-angular-ui/components/treeview/selection#modifying-the-selection-behavior)).
      */
     get isSelected() {
-        return this._isSelected || isSelected;
+        return this._isSelected() || isSelected;
     }
     set isSelected(callback) {
-        this._isSelected = callback;
-        this.selectable = Boolean(this._isSelected);
+        this._isSelected.set(callback);
+        this.selectable = Boolean(this._isSelected());
     }
     /**
      * A callback that determines whether a TreeView node should be rendered as hidden. Uses the `.k-hidden` utility class. Useful for custom filtering.
      *
      */
-    isVisible = isVisible;
+    set isVisible(value) {
+        this._isVisible.set(value);
+    }
+    get isVisible() {
+        return this._isVisible();
+    }
     /**
      * Enables keyboard navigation for the TreeView.
      *
@@ -2518,28 +2700,53 @@ class TreeViewComponent {
      * @remarks
      * This property is related to accessibility.
      */
-    navigable = true;
+    set navigable(value) {
+        this._navigable.set(value);
+    }
+    get navigable() {
+        return this._navigable();
+    }
     /**
      * A function that provides the child nodes for a given parent node ([see example](https://www.telerik.com/kendo-angular-ui/components/treeview/data-binding)).
      */
-    children = () => of([]);
+    set children(value) {
+        this._children.set(value);
+    }
+    get children() {
+        return this._children();
+    }
     /**
      * Indicates whether child nodes are fetched on expand or initally 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. If `true`, emits the `filterChange` event that can be handled for [manual filtering](https://www.telerik.com/kendo-angular-ui/components/treeview/filtering#manual-filtering).
      * Built-in filtering is available with [`kendoTreeViewHierarchyBinding`](https://www.telerik.com/kendo-angular-ui/components/treeview/api/hierarchybindingdirective) and [`kendoTreeViewFlatDataBinding`](https://www.telerik.com/kendo-angular-ui/components/treeview/api/flatdatabindingdirective) directives.
      *
      * @default false
      */
-    filterable = false;
+    set filterable(value) {
+        this._filterable.set(value);
+    }
+    get filterable() {
+        return this._filterable();
+    }
     /**
      * Sets the initial value of the built-in filter input.
      */
-    filter = '';
+    set filter(value) {
+        this._filter.set(value);
+    }
+    get filter() {
+        return this._filter();
+    }
     /**
      * Sets the size of the component.
      *
@@ -2552,10 +2759,10 @@ class TreeViewComponent {
         if (isPresent(size)) {
             this.renderer.addClass(this.element.nativeElement, getSizeClass('treeview', size));
         }
-        this._size = size;
+        this._size.set(size);
     }
     get size() {
-        return this._size;
+        return this._size();
     }
     get isActive() {
         return this.navigationService.isTreeViewActive;
@@ -2571,7 +2778,12 @@ class TreeViewComponent {
      *
      * @default false
      */
-    disableParentNodesOnly = false;
+    set disableParentNodesOnly(value) {
+        this._disableParentNodesOnly.set(value);
+    }
+    get disableParentNodesOnly() {
+        return this._disableParentNodesOnly();
+    }
     /**
      * @hidden
      */
@@ -2586,20 +2798,42 @@ class TreeViewComponent {
      * @hidden
      */
     editService;
-    checkboxes = false;
-    expandIcons = false;
-    selectable = false;
-    touchActions = true;
+    get checkboxes() { return this._checkboxes(); }
+    set checkboxes(value) { this._checkboxes.set(value); }
+    get expandIcons() { return this._expandIcons(); }
+    set expandIcons(value) { this._expandIcons.set(value); }
+    get selectable() { return this._selectable(); }
+    set selectable(value) { this._selectable.set(value); }
+    get touchActions() { return this._touchActions(); }
+    set touchActions(value) { this._touchActions.set(value); }
     data = new BehaviorSubject([]);
-    _animate = true;
-    _isChecked;
-    _isExpanded;
-    _isSelected;
-    _hasChildren;
     _loadMoreService;
-    _nodeTemplateRef;
-    _loadMoreButtonTemplateRef;
-    _size = undefined;
+    _checkboxes = signal(false, ...(ngDevMode ? [{ debugName: "_checkboxes" }] : /* istanbul ignore next */ []));
+    _expandIcons = signal(false, ...(ngDevMode ? [{ debugName: "_expandIcons" }] : /* istanbul ignore next */ []));
+    _selectable = signal(false, ...(ngDevMode ? [{ debugName: "_selectable" }] : /* istanbul ignore next */ []));
+    _touchActions = signal(true, ...(ngDevMode ? [{ debugName: "_touchActions" }] : /* istanbul ignore next */ []));
+    _animate = signal(true, ...(ngDevMode ? [{ debugName: "_animate" }] : /* istanbul ignore next */ []));
+    _filterInputPlaceholder = signal('', ...(ngDevMode ? [{ debugName: "_filterInputPlaceholder" }] : /* istanbul ignore next */ []));
+    _expandDisabledNodes = signal(undefined, ...(ngDevMode ? [{ debugName: "_expandDisabledNodes" }] : /* istanbul ignore next */ []));
+    _trackBy = signal(trackBy, ...(ngDevMode ? [{ debugName: "_trackBy" }] : /* istanbul ignore next */ []));
+    _textField = signal(undefined, ...(ngDevMode ? [{ debugName: "_textField" }] : /* istanbul ignore next */ []));
+    _isChecked = signal(undefined, ...(ngDevMode ? [{ debugName: "_isChecked" }] : /* istanbul ignore next */ []));
+    _isExpanded = signal(undefined, ...(ngDevMode ? [{ debugName: "_isExpanded" }] : /* istanbul ignore next */ []));
+    _isSelected = signal(undefined, ...(ngDevMode ? [{ debugName: "_isSelected" }] : /* istanbul ignore next */ []));
+    _isDisabled = signal(isDisabled, ...(ngDevMode ? [{ debugName: "_isDisabled" }] : /* istanbul ignore next */ []));
+    _hasCheckbox = signal(hasCheckbox, ...(ngDevMode ? [{ debugName: "_hasCheckbox" }] : /* istanbul ignore next */ []));
+    _isVisible = signal(isVisible, ...(ngDevMode ? [{ debugName: "_isVisible" }] : /* istanbul ignore next */ []));
+    _hasChildren = signal(undefined, ...(ngDevMode ? [{ debugName: "_hasChildren" }] : /* istanbul ignore next */ []));
+    _nodeTemplateRef = signal(undefined, ...(ngDevMode ? [{ debugName: "_nodeTemplateRef" }] : /* istanbul ignore next */ []));
+    _loadMoreButtonTemplateRef = signal(undefined, ...(ngDevMode ? [{ debugName: "_loadMoreButtonTemplateRef" }] : /* istanbul ignore next */ []));
+    _navigable = signal(true, ...(ngDevMode ? [{ debugName: "_navigable" }] : /* istanbul ignore next */ []));
+    _children = signal(() => of([]), ...(ngDevMode ? [{ debugName: "_children" }] : /* istanbul ignore next */ []));
+    _loadOnDemand = signal(true, ...(ngDevMode ? [{ debugName: "_loadOnDemand" }] : /* istanbul ignore next */ []));
+    _filterable = signal(false, ...(ngDevMode ? [{ debugName: "_filterable" }] : /* istanbul ignore next */ []));
+    _filter = signal('', ...(ngDevMode ? [{ debugName: "_filter" }] : /* istanbul ignore next */ []));
+    _size = signal(undefined, ...(ngDevMode ? [{ debugName: "_size" }] : /* istanbul ignore next */ []));
+    _disableParentNodesOnly = signal(false, ...(ngDevMode ? [{ debugName: "_disableParentNodesOnly" }] : /* istanbul ignore next */ []));
+    _loadMoreButtonRole = signal(undefined, ...(ngDevMode ? [{ debugName: "_loadMoreButtonRole" }] : /* istanbul ignore next */ []));
     subscriptions = new Subscription();
     domSubscriptions = [];
     _nextId = nextId;
@@ -2918,12 +3152,12 @@ class TreeViewComponent {
           >
         </ul>
         <ng-container #assetsContainer></ng-container>
-        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoTreeViewLocalizedMessages]" }, { 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: "component", type: TreeViewGroupComponent, selector: "[kendoTreeViewGroup]", inputs: ["checkboxes", "expandIcons", "disabled", "selectable", "touchActions", "disableParentNodesOnly", "loadOnDemand", "trackBy", "nodes", "textField", "parentDataItem", "parentIndex", "nodeTemplateRef", "loadMoreButtonTemplateRef", "loadMoreButtonRole", "loadMoreService", "size", "expandDisabledNodes", "isChecked", "isDisabled", "hasCheckbox", "isExpanded", "isVisible", "isSelected", "children", "hasChildren"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoTreeViewLocalizedMessages]" }, { 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: "component", type: TreeViewGroupComponent, selector: "[kendoTreeViewGroup]", inputs: ["checkboxes", "loadMoreButtonRole", "expandIcons", "disabled", "selectable", "touchActions", "disableParentNodesOnly", "loadOnDemand", "trackBy", "nodes", "textField", "parentDataItem", "parentIndex", "nodeTemplateRef", "loadMoreButtonTemplateRef", "loadMoreService", "size", "expandDisabledNodes", "isChecked", "isDisabled", "hasCheckbox", "isExpanded", "isVisible", "isSelected", "children", "hasChildren"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: TreeViewComponent, decorators: [{
             type: Component,
             args: [{
-                    changeDetection: ChangeDetectionStrategy.Default,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     exportAs: 'kendoTreeView',
                     providers: [...providers, { provide: KENDO_WEBMCP_HOST, useExisting: forwardRef(() => TreeViewComponent) }],
                     selector: 'kendo-treeview',
@@ -3134,6 +3368,7 @@ const matchKey = index => k => {
 class CheckDirective {
     treeView;
     zone;
+    injector;
     /**
      * @hidden
      */
@@ -3143,18 +3378,33 @@ class CheckDirective {
     /**
      * Defines the item key stored in the `checkedKeys` collection.
      */
-    checkKey;
+    set checkKey(value) {
+        this._checkKey.set(value);
+    }
+    get checkKey() {
+        return this._checkKey();
+    }
     /**
      * Defines the collection that stores the checked keys
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/treeview/checkboxes)).
      */
-    checkedKeys;
+    set checkedKeys(value) {
+        this._checkedKeys.set(value);
+    }
+    get checkedKeys() {
+        return this._checkedKeys();
+    }
     /**
      * Defines the checkable settings
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/treeview/checkboxes#setup)).
      * If you do not provide a value, the default [`CheckableSettings`](https://www.telerik.com/kendo-angular-ui/components/treeview/api/checkablesettings) apply.
      */
-    checkable;
+    set checkable(value) {
+        this._checkable.set(value);
+    }
+    get checkable() {
+        return this._checkable();
+    }
     /**
      * Fires when the `checkedKeys` collection updates.
      */
@@ -3183,21 +3433,37 @@ class CheckDirective {
     /**
      * Reflects the internal `checkedKeys` state.
      */
-    state = new Set();
+    state = signal(new Set(), ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
     clickSubscription;
+    _checkKey = signal(null, ...(ngDevMode ? [{ debugName: "_checkKey" }] : /* istanbul ignore next */ []));
+    _checkedKeys = signal([], ...(ngDevMode ? [{ debugName: "_checkedKeys" }] : /* istanbul ignore next */ []));
+    _checkable = signal(null, ...(ngDevMode ? [{ debugName: "_checkable" }] : /* istanbul ignore next */ []));
     /**
      * Holds the last emitted `checkedKeys` collection.
      */
     lastChange;
-    constructor(treeView, zone) {
+    constructor(treeView, zone, injector) {
         this.treeView = treeView;
         this.zone = zone;
+        this.injector = injector;
         this.subscriptions.add(this.treeView.checkedChange
             .subscribe((e) => this.check(e)));
         const expandedItems = [];
+        let pendingRender = null;
         this.subscriptions.add(this.treeView.childrenLoaded
-            .pipe(filter(() => this.options.checkChildren && this.treeView.loadOnDemand), tap(item => expandedItems.push(item)), switchMap(() => this.zone.onStable.pipe(take(1))))
-            .subscribe(() => this.addCheckedItemsChildren(expandedItems)));
+            .pipe(filter(() => this.options.checkChildren && this.treeView.loadOnDemand), tap(item => expandedItems.push(item)))
+            .subscribe(() => {
+            // Cancel any previously scheduled render to batch multiple rapid childrenLoaded events
+            // (mirrors the previous switchMap(zone.onStable) cancellation behavior)
+            if (pendingRender) {
+                pendingRender.destroy();
+                pendingRender = null;
+            }
+            pendingRender = afterNextRender(() => {
+                pendingRender = null;
+                this.addCheckedItemsChildren(expandedItems);
+            }, { injector: this.injector });
+        }));
         this.treeView.isChecked = this.isItemChecked.bind(this);
     }
     ngOnChanges(changes) {
@@ -3206,7 +3472,7 @@ class CheckDirective {
             this.toggleCheckOnClick();
         }
         if (isChanged('checkedKeys', changes, false) && changes.checkedKeys.currentValue !== this.lastChange) {
-            this.state = new Set(changes.checkedKeys.currentValue);
+            this.state.set(new Set(changes.checkedKeys.currentValue));
         }
     }
     ngOnDestroy() {
@@ -3217,11 +3483,11 @@ class CheckDirective {
         if (!this.checkKey) {
             return this.isIndexChecked(index);
         }
-        const hasKey = this.state.has(this.itemKey({ dataItem, index }));
+        const hasKey = this.state().has(this.itemKey({ dataItem, index }));
         return hasKey ? 'checked' : 'none';
     }
     isIndexChecked(index) {
-        const checkedKeys = Array.from(this.state).filter(matchKey(index));
+        const checkedKeys = Array.from(this.state()).filter(matchKey(index));
         if (indexChecked(checkedKeys, index)) {
             return 'checked';
         }
@@ -3252,10 +3518,10 @@ class CheckDirective {
     }
     checkSingle(node) {
         const key = this.itemKey(node.item);
-        const hasKey = this.state.has(key);
-        this.state.clear();
+        const hasKey = this.state().has(key);
+        this.state().clear();
         if (!hasKey) {
-            this.state.add(key);
+            this.state().add(key);
         }
         this.notify();
     }
@@ -3305,13 +3571,13 @@ class CheckDirective {
                 this.treeView.hasCheckbox(item.item.dataItem, item.item.index))
                 .map(({ item }) => this.itemKey(item)));
         }
-        const shouldCheck = !this.state.has(currentKey);
+        const shouldCheck = !this.state().has(currentKey);
         pendingCheck.forEach(key => {
             if (shouldCheck) {
-                this.state.add(key);
+                this.state().add(key);
             }
             else {
-                this.state.delete(key);
+                this.state().delete(key);
                 if (this.options.uncheckCollapsedChildren &&
                     this.options.mode === 'multiple' &&
                     this.treeView.loadOnDemand) {
@@ -3319,8 +3585,8 @@ class CheckDirective {
                         this.uncheckChildren(node.item.dataItem, node.item.index);
                         return;
                     }
-                    const checkedKeys = Array.from(this.state).filter(matchKey(node.item.index));
-                    checkedKeys.forEach(key => this.state.delete(key));
+                    const checkedKeys = Array.from(this.state()).filter(matchKey(node.item.index));
+                    checkedKeys.forEach(key => this.state().delete(key));
                 }
             }
         });
@@ -3328,7 +3594,7 @@ class CheckDirective {
     uncheckChildren(dataItem, parentNodeIndex) {
         this.treeView.children(dataItem).subscribe(children => children.forEach((item, index) => {
             const nodeIndex = `${parentNodeIndex}_${index}`;
-            this.state.delete(this.itemKey({ dataItem: item, index: nodeIndex }));
+            this.state().delete(this.itemKey({ dataItem: item, index: nodeIndex }));
             if (this.treeView.hasChildren(item)) {
                 this.uncheckChildren(item, nodeIndex);
             }
@@ -3342,13 +3608,13 @@ class CheckDirective {
         while (currentParent) {
             const parentKey = this.itemKey(currentParent.item);
             const isDisabled = this.treeView.isDisabled(currentParent.item.dataItem, currentParent.item.index);
-            const allChildrenSelected = currentParent.children.every(item => this.state.has(this.itemKey(item)));
+            const allChildrenSelected = currentParent.children.every(item => this.state().has(this.itemKey(item)));
             const hasCheckbox = this.treeView.hasCheckbox(currentParent.item.dataItem, currentParent.item.index);
             if (hasCheckbox && (!isDisabled || this.options.checkDisabledChildren) && allChildrenSelected) {
-                this.state.add(parentKey);
+                this.state().add(parentKey);
             }
             else {
-                this.state.delete(parentKey);
+                this.state().delete(parentKey);
             }
             currentParent = currentParent.parent;
         }
@@ -3356,22 +3622,22 @@ class CheckDirective {
     allChildrenSelected(children) {
         return children.every(item => {
             const childrenSel = this.allChildrenSelected(item.children);
-            return this.state.has(this.itemKey(item.item)) && childrenSel;
+            return this.state().has(this.itemKey(item.item)) && childrenSel;
         });
     }
     notify() {
-        this.lastChange = Array.from(this.state);
+        this.lastChange = Array.from(this.state());
         this.checkedKeysChange.emit(this.lastChange);
     }
     addCheckedItemsChildren(lookups) {
         if (!isPresent(lookups) || lookups.length === 0) {
             return;
         }
-        const initiallyCheckedItemsCount = this.state.size;
+        const initiallyCheckedItemsCount = this.state().size;
         const disabledItems = new Set();
         lookups.forEach(lookup => {
             const itemKey = this.itemKey(lookup.item);
-            if (!this.state.has(itemKey)) {
+            if (!this.state().has(itemKey)) {
                 return;
             }
             lookup.children.forEach(item => {
@@ -3381,7 +3647,7 @@ class CheckDirective {
                     (this.treeView.hasCheckbox(lookup.item.dataItem, lookup.item.index) &&
                         this.treeView.hasCheckbox(item.dataItem, item.index)) ||
                     this.treeView.disableParentNodesOnly || this.options.checkDisabledChildren) {
-                    this.state.add(this.itemKey(item));
+                    this.state().add(this.itemKey(item));
                 }
                 if (this.treeView.disableParentNodesOnly &&
                     !this.options.checkDisabledChildren &&
@@ -3391,13 +3657,13 @@ class CheckDirective {
                 }
             });
         });
-        disabledItems.forEach(item => this.state.delete(item));
-        const hasNewlyCheckedItems = initiallyCheckedItemsCount !== this.state.size;
+        disabledItems.forEach(item => this.state().delete(item));
+        const hasNewlyCheckedItems = initiallyCheckedItemsCount !== this.state().size;
         if (hasNewlyCheckedItems) {
             this.zone.run(() => this.notify());
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: CheckDirective, deps: [{ token: TreeViewComponent }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: CheckDirective, deps: [{ token: TreeViewComponent }, { token: i0.NgZone }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.23", type: CheckDirective, isStandalone: true, selector: "[kendoTreeViewCheckable]", inputs: { isChecked: "isChecked", checkKey: ["checkBy", "checkKey"], checkedKeys: "checkedKeys", checkable: ["kendoTreeViewCheckable", "checkable"] }, outputs: { checkedKeysChange: "checkedKeysChange" }, usesOnChanges: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: CheckDirective, decorators: [{
@@ -3406,7 +3672,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
                     selector: '[kendoTreeViewCheckable]',
                     standalone: true
                 }]
-        }], ctorParameters: () => [{ type: TreeViewComponent }, { type: i0.NgZone }], propDecorators: { isChecked: [{
+        }], ctorParameters: () => [{ type: TreeViewComponent }, { type: i0.NgZone }, { type: i0.Injector }], propDecorators: { isChecked: [{
                 type: Input
             }], checkKey: [{
                 type: Input,
@@ -3451,11 +3717,23 @@ class DisableDirective {
     /**
      * Defines the item key that will be stored in the `disabledKeys` collection.
      */
-    disableKey;
+    set disableKey(value) {
+        this._disableKey.set(value);
+    }
+    get disableKey() {
+        return this._disableKey();
+    }
     /**
      * Defines the collection that will store the disabled keys.
      */
-    disabledKeys = [];
+    set disabledKeys(value) {
+        this._disabledKeys.set(value);
+    }
+    get disabledKeys() {
+        return this._disabledKeys();
+    }
+    _disableKey = signal(null, ...(ngDevMode ? [{ debugName: "_disableKey" }] : /* istanbul ignore next */ []));
+    _disabledKeys = signal([], ...(ngDevMode ? [{ debugName: "_disabledKeys" }] : /* istanbul ignore next */ []));
     constructor(treeView, cdr) {
         this.treeView = treeView;
         this.cdr = cdr;
@@ -3743,19 +4021,39 @@ class DragClueComponent {
     /**
      * The text value of the dragged TreeView item.
      */
-    text;
+    set text(value) {
+        this._text.set(value);
+    }
+    get text() {
+        return this._text();
+    }
     /**
      * The attempted operation according to the current drop target.
      */
-    action;
+    set action(value) {
+        this._action.set(value);
+    }
+    get action() {
+        return this._action();
+    }
     /**
      * The look-up info for the currently dragged item.
      */
-    sourceItem;
+    set sourceItem(value) {
+        this._sourceItem.set(value);
+    }
+    get sourceItem() {
+        return this._sourceItem();
+    }
     /**
      * The look-up info for the destination item (if hovering a valid drop target).
      */
-    destinationItem;
+    set destinationItem(value) {
+        this._destinationItem.set(value);
+    }
+    get destinationItem() {
+        return this._destinationItem();
+    }
     /**
      * Defines the drag clue content template.
      */
@@ -3784,6 +4082,10 @@ class DragClueComponent {
     constructor(cdr) {
         this.cdr = cdr;
     }
+    _text = signal(undefined, ...(ngDevMode ? [{ debugName: "_text" }] : /* istanbul ignore next */ []));
+    _action = signal(undefined, ...(ngDevMode ? [{ debugName: "_action" }] : /* istanbul ignore next */ []));
+    _sourceItem = signal(undefined, ...(ngDevMode ? [{ debugName: "_sourceItem" }] : /* istanbul ignore next */ []));
+    _destinationItem = signal(undefined, ...(ngDevMode ? [{ debugName: "_destinationItem" }] : /* istanbul ignore next */ []));
     // exposed as a public method that can be called from outside as the component uses `OnPush` strategy
     detectChanges() {
         this.cdr.detectChanges();
@@ -4291,15 +4593,33 @@ class DropHintComponent {
     /**
      * The attempted operation according to the current drop target.
      */
-    action;
+    set action(value) {
+        this._action.set(value);
+    }
+    get action() {
+        return this._action();
+    }
     /**
      * The look-up info for the currently dragged item.
      */
-    sourceItem;
+    set sourceItem(value) {
+        this._sourceItem.set(value);
+    }
+    get sourceItem() {
+        return this._sourceItem();
+    }
     /**
      * The look-up info for the destination item.
      */
-    destinationItem;
+    set destinationItem(value) {
+        this._destinationItem.set(value);
+    }
+    get destinationItem() {
+        return this._destinationItem();
+    }
+    _action = signal(undefined, ...(ngDevMode ? [{ debugName: "_action" }] : /* istanbul ignore next */ []));
+    _sourceItem = signal(undefined, ...(ngDevMode ? [{ debugName: "_sourceItem" }] : /* istanbul ignore next */ []));
+    _destinationItem = signal(undefined, ...(ngDevMode ? [{ debugName: "_destinationItem" }] : /* istanbul ignore next */ []));
     constructor(changeDetectorRef) {
         this.changeDetectorRef = changeDetectorRef;
     }
@@ -4719,6 +5039,10 @@ class DragAndDropDirective {
             if (!(originalEvent.ctrlKey && this.allowCopy)) {
                 args.sourceTree.removeItem.emit(args);
             }
+            args.destinationTree.rebindChildren();
+            if (args.sourceTree !== args.destinationTree) {
+                args.sourceTree.rebindChildren();
+            }
         }
         else if (event.isDefaultPrevented()) {
             // directly hide the clue if the default is prevented
@@ -4846,13 +5170,23 @@ class ExpandDirective {
     /**
      * Defines the item key stored in the `expandedKeys` collection.
      */
-    expandKey;
+    set expandKey(value) {
+        this._expandKey.set(value);
+    }
+    get expandKey() {
+        return this._expandKey();
+    }
     /**
      * Specifies whether to auto-expand the nodes leading from the root node to each filter result.
      * To fine-tune this behavior, pass a [`FilterExpandSettings`](https://www.telerik.com/kendo-angular-ui/components/treeview/api/filterexpandsettings) object to this input.
      * @default false
      */
-    expandOnFilter = false;
+    set expandOnFilter(value) {
+        this._expandOnFilter.set(value);
+    }
+    get expandOnFilter() {
+        return this._expandOnFilter();
+    }
     get filterExpandSettings() {
         const settings = isBoolean(this.expandOnFilter) ? { enabled: this.expandOnFilter } : { ...this.expandOnFilter, enabled: true };
         return Object.assign({}, DEFAULT_FILTER_EXPAND_SETTINGS, settings);
@@ -4864,14 +5198,22 @@ class ExpandDirective {
     /**
      * Defines the collection that stores the expanded keys.
      */
-    expandedKeys;
+    set expandedKeys(value) {
+        this._expandedKeys.set(value);
+    }
+    get expandedKeys() {
+        return this._expandedKeys();
+    }
     subscriptions = new Subscription();
     /**
      * Reflects the internal `expandedKeys` state.
      */
-    state = new Set();
-    originalExpandedKeys = new Set();
-    isFiltered = false;
+    state = signal(new Set(), ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+    _expandedKeys = signal(null, ...(ngDevMode ? [{ debugName: "_expandedKeys" }] : /* istanbul ignore next */ []));
+    originalExpandedKeys = signal(new Set(), ...(ngDevMode ? [{ debugName: "originalExpandedKeys" }] : /* istanbul ignore next */ []));
+    isFiltered = signal(false, ...(ngDevMode ? [{ debugName: "isFiltered" }] : /* istanbul ignore next */ []));
+    _expandKey = signal(null, ...(ngDevMode ? [{ debugName: "_expandKey" }] : /* istanbul ignore next */ []));
+    _expandOnFilter = signal(false, ...(ngDevMode ? [{ debugName: "_expandOnFilter" }] : /* istanbul ignore next */ []));
     /**
      * Holds the last emitted `expandedKeys` collection.
      */
@@ -4882,11 +5224,11 @@ class ExpandDirective {
         if (this.component.filterStateChange) {
             this.subscriptions.add(this.component.filterStateChange.subscribe(this.handleAutoExpand.bind(this)));
         }
-        this.component.isExpanded = (dataItem, index) => this.state.has(this.itemKey({ dataItem, index }));
+        this.component.isExpanded = (dataItem, index) => this.state().has(this.itemKey({ dataItem, index }));
     }
     ngOnChanges(changes) {
         if (isChanged('expandedKeys', changes, false) && changes['expandedKeys'].currentValue !== this.lastChange) {
-            this.state = new Set(changes['expandedKeys'].currentValue);
+            this.state.set(new Set(changes['expandedKeys'].currentValue));
         }
     }
     ngOnDestroy() {
@@ -4908,14 +5250,18 @@ class ExpandDirective {
     }
     toggleExpand({ index, dataItem, expand }) {
         const key = this.itemKey({ index, dataItem });
-        const isExpanded = this.state.has(key);
+        const isExpanded = this.state().has(key);
         let notify = false;
         if (isExpanded && !expand) {
-            this.state.delete(key);
+            const newState = new Set(this.state());
+            newState.delete(key);
+            this.state.set(newState);
             notify = true;
         }
         else if (!isExpanded && expand) {
-            this.state.add(key);
+            const newState = new Set(this.state());
+            newState.add(key);
+            this.state.set(newState);
             notify = true;
         }
         if (notify) {
@@ -4927,26 +5273,26 @@ class ExpandDirective {
             return;
         }
         const { maxAutoExpandResults, expandMatches: autoExpandMatches, expandedOnClear } = this.filterExpandSettings;
-        if (!this.isFiltered) {
-            this.originalExpandedKeys = new Set(this.state);
+        if (!this.isFiltered()) {
+            this.originalExpandedKeys.set(new Set(this.state()));
         }
-        const exitingFilteredState = this.isFiltered && !term;
+        const exitingFilteredState = this.isFiltered() && !term;
         const maxExceeded = maxAutoExpandResults !== -1 && matchCount > maxAutoExpandResults;
         const exitAutoExpandedState = exitingFilteredState || maxExceeded;
         if (exitAutoExpandedState) {
             switch (expandedOnClear) {
                 case "initial": {
-                    if (!sameValues(this.state, this.originalExpandedKeys)) {
-                        this.state = this.originalExpandedKeys;
+                    if (!sameValues(this.state(), this.originalExpandedKeys())) {
+                        this.state.set(this.originalExpandedKeys());
                         this.notify();
                     }
                     break;
                 }
                 case "all": {
-                    this.state = new Set(nodes.reduce((acc, rootNode) => {
+                    this.state.set(new Set(nodes.reduce((acc, rootNode) => {
                         this.getEveryExpandKey(acc, rootNode);
                         return acc;
-                    }, []));
+                    }, [])));
                     this.notify();
                     break;
                 }
@@ -4955,25 +5301,25 @@ class ExpandDirective {
                 }
                 case "none":
                 default: {
-                    if (this.state.size !== 0) {
-                        this.state.clear();
+                    if (this.state().size !== 0) {
+                        this.state().clear();
                         this.notify();
                     }
                     break;
                 }
             }
-            this.isFiltered = false;
+            this.isFiltered.set(false);
             return;
         }
         const indicesToExpand = new Set(nodes.reduce((acc, rootNode) => {
             this.updateExpandedNodes(acc, rootNode, autoExpandMatches);
             return acc;
         }, []));
-        if (!sameValues(this.state, indicesToExpand)) {
-            this.state = indicesToExpand;
+        if (!sameValues(this.state(), indicesToExpand)) {
+            this.state.set(indicesToExpand);
             this.notify();
         }
-        this.isFiltered = true;
+        this.isFiltered.set(true);
     }
     /**
      * Fills array with the correct expand keys according to wrapper metadata.
@@ -5002,7 +5348,7 @@ class ExpandDirective {
         }
     };
     notify() {
-        this.lastChange = Array.from(this.state);
+        this.lastChange = Array.from(this.state());
         this.expandedKeysChange.emit(this.lastChange);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ExpandDirective, deps: [{ token: ExpandableComponent }], target: i0.ɵɵFactoryTarget.Directive });
@@ -5213,23 +5559,23 @@ class FilteringBase {
     /**
      * Stores the unfiltered nodes
      */
-    filterData;
-    visibleNodes = new Set();
-    currentFilterTerm = '';
+    filterData = signal(null, ...(ngDevMode ? [{ debugName: "filterData" }] : /* istanbul ignore next */ []));
+    visibleNodes = signal(new Set(), ...(ngDevMode ? [{ debugName: "visibleNodes" }] : /* istanbul ignore next */ []));
+    currentFilterTerm = signal('', ...(ngDevMode ? [{ debugName: "currentFilterTerm" }] : /* istanbul ignore next */ []));
     /**
      * The settings which are applied when performing a filter on the component's data.
      */
     set filterSettings(settings) {
-        this._filterSettings = {
+        this._filterSettings.set({
             ...DEFAULT_FILTER_SETTINGS,
             ...settings
-        };
-        this.handleFilterChange(this.currentFilterTerm);
+        });
+        this.handleFilterChange(this.currentFilterTerm());
     }
     get filterSettings() {
-        return this._filterSettings;
+        return this._filterSettings();
     }
-    _filterSettings = DEFAULT_FILTER_SETTINGS;
+    _filterSettings = signal(DEFAULT_FILTER_SETTINGS, ...(ngDevMode ? [{ debugName: "_filterSettings" }] : /* istanbul ignore next */ []));
     /**
      * Applies a filter and changes the visibility of the component's nodes accordingly.
      */
@@ -5243,37 +5589,41 @@ class FilteringBase {
      * @hidden
      */
     handleFilterChange(term) {
-        this.currentFilterTerm = term || '';
-        if (!this.filterData) {
+        this.currentFilterTerm.set(term || '');
+        if (!this.filterData()) {
             return;
         }
-        this.currentFilterTerm = term;
-        this.resetNodesVisibility(this.filterData);
+        this.currentFilterTerm.set(term);
+        this.resetNodesVisibility(this.filterData());
         if (term) {
-            filterTree(this.filterData, term, this.filterSettings, this.component.textField);
+            filterTree(this.filterData(), term, this.filterSettings, this.component.textField);
         }
-        this.updateVisibleNodes(this.filterData);
+        this.updateVisibleNodes(this.filterData());
         if (isPresent(this.component.filterStateChange)) {
             this.component.filterStateChange.emit({
-                nodes: this.filterData,
-                matchCount: this.visibleNodes.size,
+                nodes: this.filterData(),
+                matchCount: this.visibleNodes().size,
                 term,
                 filterSettings: this.filterSettings
             });
         }
     }
     updateVisibleNodes(items) {
+        const newVisible = new Set();
+        this.collectVisibleNodes(items, newVisible);
+        this.visibleNodes.set(newVisible);
+    }
+    collectVisibleNodes(items, set) {
         items.forEach((wrapper) => {
             if (wrapper.visible) {
-                this.visibleNodes.add(wrapper.dataItem);
+                set.add(wrapper.dataItem);
             }
             if (wrapper.children) {
-                this.updateVisibleNodes(wrapper.children);
+                this.collectVisibleNodes(wrapper.children, set);
             }
         });
     }
     resetNodesVisibility(items) {
-        this.visibleNodes.clear();
         items.forEach((wrapper) => {
             wrapper.visible = true;
             if (wrapper.children) {
@@ -5338,24 +5688,39 @@ class FlatDataBindingDirective extends FilteringBase {
      */
     set nodes(nodes) {
         // Needs to be a setter so that it can be accessed via `super` call (typescript v5)
-        this._nodes = nodes;
+        this._nodes.set(nodes);
     }
     get nodes() {
-        return this._nodes;
+        return this._nodes();
     }
-    _nodes;
+    _nodes = signal(null, ...(ngDevMode ? [{ debugName: "_nodes" }] : /* istanbul ignore next */ []));
     /**
      * Specifies the field name that contains the parent node identifier.
      */
-    parentIdField;
+    set parentIdField(value) {
+        this._parentIdField.set(value);
+    }
+    get parentIdField() {
+        return this._parentIdField();
+    }
     /**
      * Specifies the field name that contains the unique node identifier.
      */
-    idField;
+    set idField(value) {
+        this._idField.set(value);
+    }
+    get idField() {
+        return this._idField();
+    }
     /**
      * @hidden
      */
-    loadOnDemand = true;
+    set loadOnDemand(value) {
+        this._loadOnDemand.set(value);
+    }
+    get loadOnDemand() {
+        return this._loadOnDemand();
+    }
     /**
      * @hidden
      * A callback which determines whether a TreeView node should be rendered as hidden.
@@ -5366,11 +5731,20 @@ class FlatDataBindingDirective extends FilteringBase {
     /**
      * @hidden
      */
-    originalData = [];
+    set originalData(value) {
+        this._originalData.set(value);
+    }
+    get originalData() {
+        return this._originalData();
+    }
+    _loadOnDemand = signal(true, ...(ngDevMode ? [{ debugName: "_loadOnDemand" }] : /* istanbul ignore next */ []));
+    _idField = signal(null, ...(ngDevMode ? [{ debugName: "_idField" }] : /* istanbul ignore next */ []));
+    _parentIdField = signal(null, ...(ngDevMode ? [{ debugName: "_parentIdField" }] : /* istanbul ignore next */ []));
+    _originalData = signal([], ...(ngDevMode ? [{ debugName: "_originalData" }] : /* istanbul ignore next */ []));
     constructor(component) {
         super(component);
         this.component = component;
-        this.component.isVisible = (node) => this.visibleNodes.has(node);
+        this.component.isVisible = (node) => this.visibleNodes().has(node);
     }
     /**
      * @hidden
@@ -5414,12 +5788,12 @@ class FlatDataBindingDirective extends FilteringBase {
         if (!isNullOrEmptyString(this.parentIdField)) {
             const prop = getter(this.parentIdField);
             this.component.nodes = this.originalData.filter(compose(isBlank, prop));
-            this.filterData = mapToTree(this.component.nodes, this.originalData, this.parentIdField, this.idField);
-            if (this.currentFilterTerm) {
-                this.handleFilterChange(this.currentFilterTerm);
+            this.filterData.set(mapToTree(this.component.nodes, this.originalData, this.parentIdField, this.idField));
+            if (this.currentFilterTerm()) {
+                this.handleFilterChange(this.currentFilterTerm());
             }
             else {
-                this.updateVisibleNodes(this.filterData);
+                this.updateVisibleNodes(this.filterData());
             }
         }
         else {
@@ -5468,7 +5842,8 @@ class HierarchyEditingService {
                 Math.min(destinationTree.loadMoreService.getGroupSize(getDataItem(destinationItem)), destinationChildren.length) : // the page size might be greater than the actual children array length
                 destinationChildren.length;
             destinationChildren.splice(targetIndex, 0, clonedSourceDataItem);
-            setter(this.hierarchyBinding.childrenField)(getDataItem(destinationItem), destinationChildren);
+            // Replace the mutated array with a new reference so signal-backed child groups detect the change on re-subscribe
+            setter(this.hierarchyBinding.childrenField)(getDataItem(destinationItem), destinationChildren.slice());
             this.movedItemNewIndex = buildTreeIndex(destinationItem.item.index, targetIndex);
             this.rebindData();
         }
@@ -5477,6 +5852,13 @@ class HierarchyEditingService {
             const shiftIndex = dropPosition === DropPosition.After ? 1 : 0;
             const targetIndex = destinationParentNodes.indexOf(getDataItem(destinationItem)) + shiftIndex;
             destinationParentNodes.splice(targetIndex, 0, clonedSourceDataItem);
+            // Replace the mutated array with a new reference so signal-backed child groups detect the change on re-subscribe
+            if (isPresent(destinationItem.parent)) {
+                setter(this.hierarchyBinding.childrenField)(getDataItem(destinationItem.parent), destinationParentNodes.slice());
+            }
+            else {
+                destinationTree.nodes = destinationParentNodes.slice();
+            }
             const parentIndex = destinationItem.parent ? destinationItem.parent.item.index : null;
             this.movedItemNewIndex = buildTreeIndex(parentIndex, targetIndex);
             this.rebindData();
@@ -5490,6 +5872,7 @@ class HierarchyEditingService {
         if (sourceTree !== destinationTree && !destinationTree.loadOnDemand) {
             destinationTree.preloadChildNodes();
         }
+        destinationTree.rebindChildren();
         // if the source and destination trees are the same, focusing the moved item here will not have the desired effect
         // as the `remove` handler has not yet kicked-in to remove the item from its old position
         if (sourceTree !== destinationTree) {
@@ -5502,6 +5885,13 @@ class HierarchyEditingService {
         const sourceParentNodes = this.getParentNodes(sourceItem, sourceTree);
         const sourceItemIndex = sourceParentNodes.indexOf(getDataItem(sourceItem));
         sourceParentNodes.splice(sourceItemIndex, 1);
+        // Replace the mutated array with a new reference so signal-backed child groups detect the change on re-subscribe
+        if (isPresent(sourceItem.parent)) {
+            setter(this.hierarchyBinding.childrenField)(getDataItem(sourceItem.parent), sourceParentNodes.slice());
+        }
+        else {
+            sourceTree.nodes = sourceParentNodes.slice();
+        }
         this.rebindData();
         // emit collapse for the parent node if its last child node was spliced
         collapseEmptyParent(sourceItem.parent, sourceParentNodes, sourceTree);
@@ -5511,6 +5901,7 @@ class HierarchyEditingService {
         if (!sourceTree.loadOnDemand) {
             sourceTree.preloadChildNodes();
         }
+        sourceTree.rebindChildren();
         // if the source and destination trees are different we want to focus only the moved item in the destination tree
         if (sourceTree === destinationTree) {
             // ensure the focus target is rendered and registered
@@ -5593,12 +5984,12 @@ class HierarchyBindingDirective extends FilteringBase {
      */
     set nodes(nodes) {
         // Needs to be a setter so that it can be accessed via `super` call (typescript v5)
-        this._nodes = nodes;
+        this._nodes.set(nodes);
     }
     get nodes() {
-        return this._nodes;
+        return this._nodes();
     }
-    _nodes;
+    _nodes = signal(null, ...(ngDevMode ? [{ debugName: "_nodes" }] : /* istanbul ignore next */ []));
     /**
      * @hidden
      * A callback which determines whether a TreeView node should be rendered as hidden.
@@ -5619,7 +6010,7 @@ class HierarchyBindingDirective extends FilteringBase {
         super(component);
         this.component = component;
         this.dragAndDropDirective = dragAndDropDirective;
-        this.component.isVisible = (node) => !this.currentFilterTerm || this.visibleNodes.has(node);
+        this.component.isVisible = (node) => !this.currentFilterTerm() || this.visibleNodes().has(node);
     }
     ngOnInit() {
         if (isPresent(this.childrenField)) {
@@ -5656,12 +6047,12 @@ class HierarchyBindingDirective extends FilteringBase {
      */
     updateNodes(values) {
         this.originalData = values || [];
-        this.filterData = mapToWrappers(values, this.childrenField) || [];
-        if (this.currentFilterTerm) {
-            this.handleFilterChange(this.currentFilterTerm);
+        this.filterData.set(mapToWrappers(values, this.childrenField) || []);
+        if (this.currentFilterTerm()) {
+            this.handleFilterChange(this.currentFilterTerm());
         }
         else {
-            this.updateVisibleNodes(this.filterData);
+            this.updateVisibleNodes(this.filterData());
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: HierarchyBindingDirective, deps: [{ token: DataBoundComponent }, { token: DragAndDropDirective, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
@@ -5891,17 +6282,32 @@ class SelectDirective {
     /**
      * Sets the item key stored in the `selectedKeys` collection.
      */
-    selectKey;
+    set selectKey(value) {
+        this._selectKey.set(value);
+    }
+    get selectKey() {
+        return this._selectKey();
+    }
     /**
      * Sets the current selection mode
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/treeview/selection)).
      */
-    selection;
+    set selection(value) {
+        this._selection.set(value);
+    }
+    get selection() {
+        return this._selection();
+    }
     /**
      * Defines the collection that stores the selected keys
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/treeview/selection)).
      */
-    selectedKeys;
+    set selectedKeys(value) {
+        this._selectedKeys.set(value);
+    }
+    get selectedKeys() {
+        return this._selectedKeys();
+    }
     /**
      * Emits when the `selectedKeys` collection updates.
      */
@@ -5933,6 +6339,9 @@ class SelectDirective {
      * Holds the last emitted `selectedKeys` collection.
      */
     lastChange;
+    _selectedKeys = signal([], ...(ngDevMode ? [{ debugName: "_selectedKeys" }] : /* istanbul ignore next */ []));
+    _selectKey = signal(null, ...(ngDevMode ? [{ debugName: "_selectKey" }] : /* istanbul ignore next */ []));
+    _selection = signal(null, ...(ngDevMode ? [{ debugName: "_selection" }] : /* istanbul ignore next */ []));
     constructor(treeView, navigationService) {
         this.treeView = treeView;
         this.navigationService = navigationService;
@@ -5945,6 +6354,7 @@ class SelectDirective {
     ngOnChanges(changes) {
         if (isChanged('selectedKeys', changes, false) && changes['selectedKeys'].currentValue !== this.lastChange) {
             this.state = new Set(changes['selectedKeys'].currentValue);
+            this.treeView.isSelected = (dataItem, index) => this.state.has(this.itemKey({ dataItem, index }));
         }
         const isSelectionBooleanTrue = typeof this.selection === 'boolean' && this.selection;
         this.navigationService.selection = isSelectionBooleanTrue ? 'single' : this.selection?.mode;