@progress/kendo-angular-treeview 16.5.0 → 16.6.0-develop.10

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

@@ -4,22 +4,21 @@
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
 import { EventEmitter, Injectable, Directive, Optional, Input, HostBinding, Component, forwardRef, isDevMode, ViewContainerRef, ChangeDetectionStrategy, ViewChild, Output, ContentChild, Host, NgModule } from '@angular/core';
-import { isDocumentAvailable, Keys, anyChanged, hasObservers, isChanged, guid } from '@progress/kendo-angular-common';
+import { isDocumentAvailable, Keys, anyChanged, hasObservers, 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';
 import { Subject, Subscription, of, EMPTY, BehaviorSubject, merge } from 'rxjs';
 import { validatePackage } from '@progress/kendo-licensing';
 import { getter, setter } from '@progress/kendo-common';
 import { caretAltDownIcon, caretAltRightIcon, caretAltLeftIcon, searchIcon, cancelIcon, insertMiddleIcon, insertBottomIcon, insertTopIcon, plusIcon } from '@progress/kendo-svg-icons';
-import * as i9$1 from '@progress/kendo-angular-inputs';
-import { InputsModule } from '@progress/kendo-angular-inputs';
-import * as i9 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i11 from '@progress/kendo-angular-icons';
-import { IconsModule } from '@progress/kendo-angular-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 { NgFor, NgClass, NgIf, NgSwitch, NgSwitchCase, NgTemplateOutlet, NgSwitchDefault } from '@angular/common';
+import { IconWrapperComponent, IconsService } from '@progress/kendo-angular-icons';
 import { Draggable } from '@progress/kendo-draggable';
+import { DialogContainerService, DialogService, WindowService, WindowContainerService } from '@progress/kendo-angular-dialog';
+import { PopupService } from '@progress/kendo-angular-popup';
 
 /**
  * @hidden
@@ -28,8 +27,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-treeview',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1721814110,
-    version: '16.5.0',
+    publishDate: 1722606887,
+    version: '16.6.0-develop.10',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -899,11 +898,12 @@ class NodeTemplateDirective {
     }
 }
 NodeTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NodeTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-NodeTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: NodeTemplateDirective, selector: "[kendoTreeViewNodeTemplate]", ngImport: i0 });
+NodeTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: NodeTemplateDirective, isStandalone: true, selector: "[kendoTreeViewNodeTemplate]", ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NodeTemplateDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[kendoTreeViewNodeTemplate]'
+                    selector: '[kendoTreeViewNodeTemplate]',
+                    standalone: true
                 }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
                     type: Optional
@@ -925,11 +925,12 @@ class LoadMoreButtonTemplateDirective {
     }
 }
 LoadMoreButtonTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LoadMoreButtonTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-LoadMoreButtonTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: LoadMoreButtonTemplateDirective, selector: "[kendoTreeViewLoadMoreButtonTemplate]", ngImport: i0 });
+LoadMoreButtonTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: LoadMoreButtonTemplateDirective, isStandalone: true, selector: "[kendoTreeViewLoadMoreButtonTemplate]", ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LoadMoreButtonTemplateDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[kendoTreeViewLoadMoreButtonTemplate]'
+                    selector: '[kendoTreeViewLoadMoreButtonTemplate]',
+                    standalone: true
                 }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
                     type: Optional
@@ -1076,6 +1077,123 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             type: Injectable
         }] });
 
+/**
+ * @hidden
+ *
+ * A directive which manages the expanded state of the TreeView.
+ */
+class TreeViewItemContentDirective {
+    constructor(element, navigationService, selectionService, renderer) {
+        this.element = element;
+        this.navigationService = navigationService;
+        this.selectionService = selectionService;
+        this.renderer = renderer;
+        this.initialSelection = false;
+        this.isSelected = isSelected;
+        this.subscriptions = new Subscription();
+        this.subscriptions.add(this.navigationService.moves
+            .subscribe(this.updateFocusClass.bind(this)));
+        this.subscriptions.add(this.navigationService.selects
+            .pipe(filter((index) => index === this.index))
+            .subscribe((index) => this.selectionService.select(index, this.dataItem)));
+        this.subscriptions.add(this.selectionService.changes
+            .subscribe(() => {
+            this.updateSelectionClass(this.isSelected(this.dataItem, this.index));
+        }));
+    }
+    ngOnChanges(changes) {
+        if (changes['initialSelection']) {
+            this.updateSelectionClass(this.initialSelection);
+        }
+        if (changes['index']) {
+            this.updateFocusClass();
+        }
+    }
+    ngOnDestroy() {
+        this.subscriptions.unsubscribe();
+    }
+    updateFocusClass() {
+        this.render(this.navigationService.isActive(this.index), 'k-focus');
+    }
+    updateSelectionClass(selected) {
+        this.render(selected, 'k-selected');
+    }
+    render(addClass, className) {
+        const action = addClass ? 'addClass' : 'removeClass';
+        this.renderer[action](this.element.nativeElement, className);
+    }
+}
+TreeViewItemContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TreeViewItemContentDirective, deps: [{ token: i0.ElementRef }, { token: NavigationService }, { token: SelectionService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+TreeViewItemContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: TreeViewItemContentDirective, isStandalone: true, selector: "[kendoTreeViewItemContent]", inputs: { dataItem: "dataItem", index: "index", initialSelection: "initialSelection", isSelected: "isSelected" }, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TreeViewItemContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoTreeViewItemContent]',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: NavigationService }, { type: SelectionService }, { type: i0.Renderer2 }]; }, propDecorators: { dataItem: [{
+                type: Input
+            }], index: [{
+                type: Input
+            }], initialSelection: [{
+                type: Input
+            }], isSelected: [{
+                type: Input
+            }] } });
+
+/**
+ * @hidden
+ */
+class LoadingIndicatorDirective {
+    constructor(expandService, loadingService, cd) {
+        this.expandService = expandService;
+        this.loadingService = loadingService;
+        this.cd = cd;
+        this._loading = false;
+    }
+    get loading() {
+        return this._loading;
+    }
+    set loading(value) {
+        this._loading = value;
+        this.cd.markForCheck();
+    }
+    ngOnInit() {
+        const loadingNotifications = this.loadingService
+            .changes
+            .pipe(filter(index => index === this.index));
+        this.subscription = this.expandService
+            .changes
+            .pipe(filter(({ index }) => index === this.index), tap(({ expand }) => {
+            if (!expand && this.loading) {
+                this.loading = false;
+            }
+        }), filter(({ expand }) => expand), switchMap(x => of(x).pipe(delay(100), takeUntil(loadingNotifications))))
+            .subscribe(() => this.loading = true);
+        this.subscription.add(loadingNotifications.subscribe(() => this.loading = false));
+    }
+    ngOnDestroy() {
+        if (this.subscription) {
+            this.subscription.unsubscribe();
+        }
+    }
+}
+LoadingIndicatorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LoadingIndicatorDirective, deps: [{ token: ExpandStateService }, { token: LoadingNotificationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+LoadingIndicatorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: LoadingIndicatorDirective, isStandalone: true, selector: "[kendoTreeViewLoading]", inputs: { index: ["kendoTreeViewLoading", "index"] }, host: { properties: { "class.k-i-loading": "this.loading" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LoadingIndicatorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoTreeViewLoading]',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: ExpandStateService }, { type: LoadingNotificationService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { loading: [{
+                type: HostBinding,
+                args: ["class.k-i-loading"]
+            }], index: [{
+                type: Input,
+                args: ["kendoTreeViewLoading"]
+            }] } });
+
 const buildItem = (index, dataItem) => ({ dataItem, index });
 let id = 0;
 const TREE_ITEM_ROLE = 'treeitem';
@@ -1250,10 +1368,13 @@ class TreeViewItemDirective {
     }
 }
 TreeViewItemDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TreeViewItemDirective, deps: [{ token: i0.ElementRef }, { token: ExpandStateService }, { token: NavigationService }, { token: SelectionService }, { token: TreeViewLookupService }, { token: i0.Renderer2 }, { token: IndexBuilderService }], target: i0.ɵɵFactoryTarget.Directive });
-TreeViewItemDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: TreeViewItemDirective, selector: "[kendoTreeViewItem]", inputs: { dataItem: "dataItem", index: "index", parentDataItem: "parentDataItem", parentIndex: "parentIndex", role: "role", loadOnDemand: "loadOnDemand", checkable: "checkable", selectable: "selectable", expandable: "expandable", isChecked: "isChecked", isDisabled: "isDisabled", isVisible: "isVisible", isExpanded: "isExpanded", isSelected: "isSelected" }, usesOnChanges: true, ngImport: i0 });
+TreeViewItemDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: TreeViewItemDirective, isStandalone: true, selector: "[kendoTreeViewItem]", inputs: { dataItem: "dataItem", index: "index", parentDataItem: "parentDataItem", parentIndex: "parentIndex", role: "role", loadOnDemand: "loadOnDemand", checkable: "checkable", selectable: "selectable", expandable: "expandable", isChecked: "isChecked", isDisabled: "isDisabled", isVisible: "isVisible", isExpanded: "isExpanded", isSelected: "isSelected" }, usesOnChanges: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TreeViewItemDirective, decorators: [{
             type: Directive,
-            args: [{ selector: '[kendoTreeViewItem]' }]
+            args: [{
+                    selector: '[kendoTreeViewItem]',
+                    standalone: true
+                }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: ExpandStateService }, { type: NavigationService }, { type: SelectionService }, { type: TreeViewLookupService }, { type: i0.Renderer2 }, { type: IndexBuilderService }]; }, propDecorators: { dataItem: [{
                 type: Input
             }], index: [{
@@ -1284,117 +1405,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }] } });
 
-/**
- * @hidden
- *
- * A directive which manages the expanded state of the TreeView.
- */
-class TreeViewItemContentDirective {
-    constructor(element, navigationService, selectionService, renderer) {
-        this.element = element;
-        this.navigationService = navigationService;
-        this.selectionService = selectionService;
-        this.renderer = renderer;
-        this.initialSelection = false;
-        this.isSelected = isSelected;
-        this.subscriptions = new Subscription();
-        this.subscriptions.add(this.navigationService.moves
-            .subscribe(this.updateFocusClass.bind(this)));
-        this.subscriptions.add(this.navigationService.selects
-            .pipe(filter((index) => index === this.index))
-            .subscribe((index) => this.selectionService.select(index, this.dataItem)));
-        this.subscriptions.add(this.selectionService.changes
-            .subscribe(() => {
-            this.updateSelectionClass(this.isSelected(this.dataItem, this.index));
-        }));
-    }
-    ngOnChanges(changes) {
-        if (changes['initialSelection']) {
-            this.updateSelectionClass(this.initialSelection);
-        }
-        if (changes['index']) {
-            this.updateFocusClass();
-        }
-    }
-    ngOnDestroy() {
-        this.subscriptions.unsubscribe();
-    }
-    updateFocusClass() {
-        this.render(this.navigationService.isActive(this.index), 'k-focus');
-    }
-    updateSelectionClass(selected) {
-        this.render(selected, 'k-selected');
-    }
-    render(addClass, className) {
-        const action = addClass ? 'addClass' : 'removeClass';
-        this.renderer[action](this.element.nativeElement, className);
-    }
-}
-TreeViewItemContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TreeViewItemContentDirective, deps: [{ token: i0.ElementRef }, { token: NavigationService }, { token: SelectionService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-TreeViewItemContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: TreeViewItemContentDirective, selector: "[kendoTreeViewItemContent]", inputs: { dataItem: "dataItem", index: "index", initialSelection: "initialSelection", isSelected: "isSelected" }, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TreeViewItemContentDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: '[kendoTreeViewItemContent]' }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: NavigationService }, { type: SelectionService }, { type: i0.Renderer2 }]; }, propDecorators: { dataItem: [{
-                type: Input
-            }], index: [{
-                type: Input
-            }], initialSelection: [{
-                type: Input
-            }], isSelected: [{
-                type: Input
-            }] } });
-
-/**
- * @hidden
- */
-class LoadingIndicatorDirective {
-    constructor(expandService, loadingService, cd) {
-        this.expandService = expandService;
-        this.loadingService = loadingService;
-        this.cd = cd;
-        this._loading = false;
-    }
-    get loading() {
-        return this._loading;
-    }
-    set loading(value) {
-        this._loading = value;
-        this.cd.markForCheck();
-    }
-    ngOnInit() {
-        const loadingNotifications = this.loadingService
-            .changes
-            .pipe(filter(index => index === this.index));
-        this.subscription = this.expandService
-            .changes
-            .pipe(filter(({ index }) => index === this.index), tap(({ expand }) => {
-            if (!expand && this.loading) {
-                this.loading = false;
-            }
-        }), filter(({ expand }) => expand), switchMap(x => of(x).pipe(delay(100), takeUntil(loadingNotifications))))
-            .subscribe(() => this.loading = true);
-        this.subscription.add(loadingNotifications.subscribe(() => this.loading = false));
-    }
-    ngOnDestroy() {
-        if (this.subscription) {
-            this.subscription.unsubscribe();
-        }
-    }
-}
-LoadingIndicatorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LoadingIndicatorDirective, deps: [{ token: ExpandStateService }, { token: LoadingNotificationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
-LoadingIndicatorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: LoadingIndicatorDirective, selector: "[kendoTreeViewLoading]", inputs: { index: ["kendoTreeViewLoading", "index"] }, host: { properties: { "class.k-i-loading": "this.loading" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LoadingIndicatorDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: '[kendoTreeViewLoading]' }]
-        }], ctorParameters: function () { return [{ type: ExpandStateService }, { type: LoadingNotificationService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { loading: [{
-                type: HostBinding,
-                args: ["class.k-i-loading"]
-            }], index: [{
-                type: Input,
-                args: ["kendoTreeViewLoading"]
-            }] } });
-
 const TOP_ITEM = 'k-treeview-top';
 const MID_ITEM = 'k-treeview-mid';
 const BOT_ITEM = 'k-treeview-bot';
@@ -1682,7 +1692,7 @@ class TreeViewGroupComponent {
     }
 }
 TreeViewGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", 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 }], target: i0.ɵɵFactoryTarget.Component });
-TreeViewGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TreeViewGroupComponent, 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", 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: `
+TreeViewGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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", 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: `
         <li
             *ngFor="let node of data; let index = index; trackBy: trackBy"
             class="k-treeview-item"
@@ -1831,7 +1841,7 @@ TreeViewGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
                 </span>
             </div>
         </li>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i9.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i9.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i9.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i9.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i9.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i9.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i9$1.CheckBoxComponent, selector: "kendo-checkbox", inputs: ["checkedState", "rounded"], outputs: ["checkedStateChange"], exportAs: ["kendoCheckBox"] }, { kind: "component", type: i11.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", "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: TreeViewItemContentDirective, selector: "[kendoTreeViewItemContent]", inputs: ["dataItem", "index", "initialSelection", "isSelected"] }, { kind: "directive", type: LoadingIndicatorDirective, selector: "[kendoTreeViewLoading]", inputs: ["kendoTreeViewLoading"] }], animations: [
+    `, isInline: true, dependencies: [{ kind: "component", type: TreeViewGroupComponent, selector: "[kendoTreeViewGroup]", inputs: ["checkboxes", "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: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: TreeViewItemDirective, selector: "[kendoTreeViewItem]", inputs: ["dataItem", "index", "parentDataItem", "parentIndex", "role", "loadOnDemand", "checkable", "selectable", "expandable", "isChecked", "isDisabled", "isVisible", "isExpanded", "isSelected"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: LoadingIndicatorDirective, selector: "[kendoTreeViewLoading]", inputs: ["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: TreeViewItemContentDirective, selector: "[kendoTreeViewItemContent]", inputs: ["dataItem", "index", "initialSelection", "isSelected"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgSwitchDefault, selector: "[ngSwitchDefault]" }], animations: [
         trigger('toggle', [
             transition('void => *', [
                 style({ height: 0 }),
@@ -2009,7 +2019,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 </span>
             </div>
         </li>
-    `
+    `,
+                    standalone: true,
+                    imports: [NgFor, TreeViewItemDirective, NgClass, NgIf, LoadingIndicatorDirective, IconWrapperComponent, CheckBoxComponent, TreeViewItemContentDirective, NgSwitch, NgSwitchCase, NgTemplateOutlet, NgSwitchDefault]
                 }]
         }], ctorParameters: function () { return [{ type: ExpandStateService }, { type: LoadingNotificationService }, { type: IndexBuilderService }, { type: TreeViewLookupService }, { type: NavigationService }, { type: NodeChildrenService }, { type: DataChangeNotificationService }, { type: i0.ChangeDetectorRef }, { type: i1.LocalizationService }]; }, propDecorators: { kGroupClass: [{
                 type: HostBinding,
@@ -2096,7 +2108,7 @@ class LocalizedMessagesDirective extends TreeViewMessages {
     }
 }
 LocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-LocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: LocalizedMessagesDirective, selector: "[kendoTreeViewLocalizedMessages]", providers: [
+LocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: LocalizedMessagesDirective, isStandalone: true, selector: "[kendoTreeViewLocalizedMessages]", providers: [
         {
             provide: TreeViewMessages,
             useExisting: forwardRef(() => LocalizedMessagesDirective)
@@ -2111,7 +2123,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                             useExisting: forwardRef(() => LocalizedMessagesDirective)
                         }
                     ],
-                    selector: '[kendoTreeViewLocalizedMessages]'
+                    selector: '[kendoTreeViewLocalizedMessages]',
+                    standalone: true
                 }]
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
 
@@ -2143,11 +2156,6 @@ const providers = [
 /**
  * Represents the [Kendo UI TreeView component for Angular]({% slug overview_treeview %}).
  *
- * {% meta height:450 %}
- * {% embed_file get-started/app.component.ts preview %}
- * {% embed_file get-started/app.module.ts %}
- * {% embed_file shared/main.ts %}
- * {% endmeta %}
  */
 class TreeViewComponent {
     constructor(element, changeDetectorRef, expandService, navigationService, nodeChildrenService, selectionService, treeViewLookupService, ngZone, renderer, dataChangeNotification, localization) {
@@ -2720,7 +2728,7 @@ class TreeViewComponent {
     }
 }
 TreeViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TreeViewComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: ExpandStateService }, { token: NavigationService }, { token: NodeChildrenService }, { token: SelectionService }, { token: TreeViewLookupService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: DataChangeNotificationService }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-TreeViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TreeViewComponent, selector: "kendo-treeview", inputs: { filterInputPlaceholder: "filterInputPlaceholder", expandDisabledNodes: "expandDisabledNodes", animate: "animate", nodeTemplateRef: ["nodeTemplate", "nodeTemplateRef"], loadMoreButtonTemplateRef: ["loadMoreButtonTemplate", "loadMoreButtonTemplateRef"], trackBy: "trackBy", nodes: "nodes", textField: "textField", hasChildren: "hasChildren", isChecked: "isChecked", isDisabled: "isDisabled", hasCheckbox: "hasCheckbox", isExpanded: "isExpanded", isSelected: "isSelected", isVisible: "isVisible", navigable: "navigable", children: "children", loadOnDemand: "loadOnDemand", filterable: "filterable", filter: "filter", size: "size", disableParentNodesOnly: "disableParentNodesOnly" }, outputs: { childrenLoaded: "childrenLoaded", onBlur: "blur", onFocus: "focus", expand: "expand", collapse: "collapse", nodeDragStart: "nodeDragStart", nodeDrag: "nodeDrag", filterStateChange: "filterStateChange", nodeDrop: "nodeDrop", nodeDragEnd: "nodeDragEnd", addItem: "addItem", removeItem: "removeItem", checkedChange: "checkedChange", selectionChange: "selectionChange", filterChange: "filterChange", nodeClick: "nodeClick", nodeDblClick: "nodeDblClick" }, host: { properties: { "class.k-treeview": "this.classNames", "attr.dir": "this.direction", "@.disabled": "this.animate" } }, providers: providers, queries: [{ propertyName: "nodeTemplateQuery", first: true, predicate: NodeTemplateDirective, descendants: true }, { propertyName: "loadMoreButtonTemplateQuery", first: true, predicate: LoadMoreButtonTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "assetsContainer", first: true, predicate: ["assetsContainer"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "searchbox", first: true, predicate: ["searchbox"], descendants: true }], exportAs: ["kendoTreeView"], usesOnChanges: true, ngImport: i0, template: `
+TreeViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TreeViewComponent, isStandalone: true, selector: "kendo-treeview", inputs: { filterInputPlaceholder: "filterInputPlaceholder", expandDisabledNodes: "expandDisabledNodes", animate: "animate", nodeTemplateRef: ["nodeTemplate", "nodeTemplateRef"], loadMoreButtonTemplateRef: ["loadMoreButtonTemplate", "loadMoreButtonTemplateRef"], trackBy: "trackBy", nodes: "nodes", textField: "textField", hasChildren: "hasChildren", isChecked: "isChecked", isDisabled: "isDisabled", hasCheckbox: "hasCheckbox", isExpanded: "isExpanded", isSelected: "isSelected", isVisible: "isVisible", navigable: "navigable", children: "children", loadOnDemand: "loadOnDemand", filterable: "filterable", filter: "filter", size: "size", disableParentNodesOnly: "disableParentNodesOnly" }, outputs: { childrenLoaded: "childrenLoaded", onBlur: "blur", onFocus: "focus", expand: "expand", collapse: "collapse", nodeDragStart: "nodeDragStart", nodeDrag: "nodeDrag", filterStateChange: "filterStateChange", nodeDrop: "nodeDrop", nodeDragEnd: "nodeDragEnd", addItem: "addItem", removeItem: "removeItem", checkedChange: "checkedChange", selectionChange: "selectionChange", filterChange: "filterChange", nodeClick: "nodeClick", nodeDblClick: "nodeDblClick" }, host: { properties: { "class.k-treeview": "this.classNames", "attr.dir": "this.direction", "@.disabled": "this.animate" } }, providers: providers, queries: [{ propertyName: "nodeTemplateQuery", first: true, predicate: NodeTemplateDirective, descendants: true }, { propertyName: "loadMoreButtonTemplateQuery", first: true, predicate: LoadMoreButtonTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "assetsContainer", first: true, predicate: ["assetsContainer"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "searchbox", first: true, predicate: ["searchbox"], descendants: true }], exportAs: ["kendoTreeView"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoTreeViewLocalizedMessages
             i18n-loadMore="kendo.treeview.loadMore|The title of the Load More button"
             loadMore="Load more..."
@@ -2777,7 +2785,7 @@ TreeViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
         >
         </ul>
         <ng-container #assetsContainer></ng-container>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i9$1.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: i9$1.TextBoxPrefixTemplateDirective, selector: "[kendoTextBoxPrefixTemplate]", inputs: ["showSeparator"] }, { kind: "component", type: i11.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", "loadMoreService", "size", "expandDisabledNodes", "isChecked", "isDisabled", "hasCheckbox", "isExpanded", "isVisible", "isSelected", "children", "hasChildren"] }, { kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoTreeViewLocalizedMessages]" }], changeDetection: i0.ChangeDetectionStrategy.Default });
+    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoTreeViewLocalizedMessages]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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", "loadMoreService", "size", "expandDisabledNodes", "isChecked", "isDisabled", "hasCheckbox", "isExpanded", "isVisible", "isSelected", "children", "hasChildren"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TreeViewComponent, decorators: [{
             type: Component,
             args: [{
@@ -2842,7 +2850,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
         >
         </ul>
         <ng-container #assetsContainer></ng-container>
-    `
+    `,
+                    standalone: true,
+                    imports: [LocalizedMessagesDirective, NgIf, TextBoxComponent, TextBoxPrefixTemplateDirective, IconWrapperComponent, TreeViewGroupComponent]
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: ExpandStateService }, { type: NavigationService }, { type: NodeChildrenService }, { type: SelectionService }, { type: TreeViewLookupService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: DataChangeNotificationService }, { type: i1.LocalizationService }]; }, propDecorators: { classNames: [{
                 type: HostBinding,
@@ -3216,10 +3226,13 @@ class CheckDirective {
     }
 }
 CheckDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CheckDirective, deps: [{ token: TreeViewComponent }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-CheckDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: CheckDirective, selector: "[kendoTreeViewCheckable]", inputs: { isChecked: "isChecked", checkKey: ["checkBy", "checkKey"], checkedKeys: "checkedKeys", checkable: ["kendoTreeViewCheckable", "checkable"] }, outputs: { checkedKeysChange: "checkedKeysChange" }, usesOnChanges: true, ngImport: i0 });
+CheckDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", 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: "15.2.10", ngImport: i0, type: CheckDirective, decorators: [{
             type: Directive,
-            args: [{ selector: '[kendoTreeViewCheckable]' }]
+            args: [{
+                    selector: '[kendoTreeViewCheckable]',
+                    standalone: true
+                }]
         }], ctorParameters: function () { return [{ type: TreeViewComponent }, { type: i0.NgZone }]; }, propDecorators: { isChecked: [{
                 type: Input
             }], checkKey: [{
@@ -3273,10 +3286,13 @@ class DisableDirective {
     }
 }
 DisableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DisableDirective, deps: [{ token: TreeViewComponent }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
-DisableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DisableDirective, selector: "[kendoTreeViewDisable]", inputs: { isDisabled: "isDisabled", disableKey: ["kendoTreeViewDisable", "disableKey"], disabledKeys: "disabledKeys" }, usesOnChanges: true, ngImport: i0 });
+DisableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DisableDirective, isStandalone: true, selector: "[kendoTreeViewDisable]", inputs: { isDisabled: "isDisabled", disableKey: ["kendoTreeViewDisable", "disableKey"], disabledKeys: "disabledKeys" }, usesOnChanges: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DisableDirective, decorators: [{
             type: Directive,
-            args: [{ selector: '[kendoTreeViewDisable]' }]
+            args: [{
+                    selector: '[kendoTreeViewDisable]',
+                    standalone: true
+                }]
         }], ctorParameters: function () { return [{ type: TreeViewComponent }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { isDisabled: [{
                 type: Input
             }], disableKey: [{
@@ -3286,370 +3302,111 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }] } });
 
-const DEFAULT_FILTER_EXPAND_SETTINGS = {
-    maxAutoExpandResults: -1,
-    expandMatches: false,
-    expandedOnClear: "none"
-};
 /**
- * A directive which manages the expanded state of the TreeView.
- * ([see example]({% slug expandedstate_treeview %})).
+ * A directive which enables the update of the initially provided data array during drag-and-drop.
+ *
+ * Either use this directive in combination with one of the data binding directives ([`kendoTreeViewHierarchyBinding`]({% slug api_treeview_hierarchybindingdirective %})
+ * or [`kendoTreeViewFlatDataBinding`]({% slug api_treeview_flatdatabindingdirective %})) which set their own edit handlers, or provide
+ * your own [`editService`]({% slug api_treeview_editservice %}) to this directive. The latter subscribes to and calls the
+ * [`addItem`]({% slug api_treeview_treeviewcomponent %}#toc-additem) and [`removeItem`]({% slug api_treeview_treeviewcomponent %}#toc-removeitem)
+ * handlers when the corresponding events are triggered by the TreeView component.
  */
-class ExpandDirective {
-    constructor(component) {
-        this.component = component;
-        /**
-         * Whether or not to auto-expand the nodes leading from the root node to each filter result.
-         * To fine-tune this behavior, pass a [`FilterExpandSettings`]({% slug api_treeview_filterexpandsettings %}) object to this input.
-         * @default false
-         */
-        this.expandOnFilter = false;
-        /**
-         * Fires when the `expandedKeys` collection was updated.
-         */
-        this.expandedKeysChange = new EventEmitter();
+class DragAndDropEditingDirective {
+    constructor(treeview) {
+        this.treeview = treeview;
         this.subscriptions = new Subscription();
-        /**
-         * Reflectes the internal `expandedKeys` state.
-         */
-        this.state = new Set();
-        this.originalExpandedKeys = new Set();
-        this.isFiltered = false;
-        /**
-         * Fills array with the correct expand keys according to wrapper metadata.
-         */
-        this.updateExpandedNodes = (collection, node, autoExpandMatches) => {
-            if (node.containsMatches || node.isMatch && autoExpandMatches && isArrayWithAtLeastOneItem(node.children)) {
-                collection.push(this.itemKey({ dataItem: node.dataItem, index: node.index }));
-            }
-            if (isArrayWithAtLeastOneItem(node.children)) {
-                node.children.forEach(child => {
-                    this.updateExpandedNodes(collection, child, autoExpandMatches);
-                });
-            }
-        };
-        /**
-         * Fills array with the expand key of every node.
-         */
-        this.getEveryExpandKey = (collection, node) => {
-            if (isArrayWithAtLeastOneItem(node.children)) {
-                collection.push(this.itemKey({ dataItem: node.dataItem, index: node.index }));
-            }
-            if (isArrayWithAtLeastOneItem(node.children)) {
-                node.children.forEach(child => {
-                    this.getEveryExpandKey(collection, child);
-                });
-            }
-        };
-        this.subscriptions.add(merge(this.component.expand.pipe(map(e => ({ expand: true, ...e }))), this.component.collapse.pipe(map(e => ({ expand: false, ...e })))).subscribe(this.toggleExpand.bind(this)));
-        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.subscriptions.add(this.treeview.addItem.subscribe(this.handleAdd.bind(this)));
+        this.subscriptions.add(this.treeview.removeItem.subscribe(this.handleRemove.bind(this)));
     }
     /**
-     * @hidden
+     * Specifies the handlers called on drag-and-drop [`addItem`]({% slug api_treeview_treeviewcomponent %}#toc-additem)
+     * and [`removeItem`]({% slug api_treeview_treeviewcomponent %}#toc-removeitem) events.
      */
-    set isExpanded(value) {
-        this.component.isExpanded = value;
-    }
-    get filterExpandSettings() {
-        const settings = isBoolean(this.expandOnFilter) ? { enabled: this.expandOnFilter } : { ...this.expandOnFilter, enabled: true };
-        return Object.assign({}, DEFAULT_FILTER_EXPAND_SETTINGS, settings);
-    }
-    ngOnChanges(changes) {
-        if (isChanged('expandedKeys', changes, false) && changes['expandedKeys'].currentValue !== this.lastChange) {
-            this.state = new Set(changes['expandedKeys'].currentValue);
-        }
+    set editService(service) {
+        this.treeview.editService = service;
     }
     ngOnDestroy() {
         this.subscriptions.unsubscribe();
     }
-    /**
-     * @hidden
-     */
-    itemKey(e) {
-        if (this.expandKey) {
-            if (typeof this.expandKey === "string") {
-                return e.dataItem[this.expandKey];
-            }
-            if (typeof this.expandKey === "function") {
-                return this.expandKey(e);
-            }
-        }
-        return e.index;
-    }
-    toggleExpand({ index, dataItem, expand }) {
-        const key = this.itemKey({ index, dataItem });
-        const isExpanded = this.state.has(key);
-        let notify = false;
-        if (isExpanded && !expand) {
-            this.state.delete(key);
-            notify = true;
-        }
-        else if (!isExpanded && expand) {
-            this.state.add(key);
-            notify = true;
-        }
-        if (notify) {
-            this.notify();
+    handleAdd(args) {
+        if (!isPresent(this.treeview.editService)) {
+            throw new Error('No `editService` provided. Either provide your own implementation or use this directive in combination with one of the data binding directives (`kendoTreeViewHierarchyBinding` or `kendoTreeViewFlatDataBinding`).');
         }
+        this.treeview.editService.add(args);
     }
-    handleAutoExpand({ nodes, matchCount, term }) {
-        if (!this.filterExpandSettings.enabled) {
-            return;
-        }
-        const { maxAutoExpandResults, expandMatches: autoExpandMatches, expandedOnClear } = this.filterExpandSettings;
-        if (!this.isFiltered) {
-            this.originalExpandedKeys = new Set(this.state);
-        }
-        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;
-                        this.notify();
-                    }
-                    break;
-                }
-                case "all": {
-                    this.state = new Set(nodes.reduce((acc, rootNode) => {
-                        this.getEveryExpandKey(acc, rootNode);
-                        return acc;
-                    }, []));
-                    this.notify();
-                    break;
-                }
-                case "unchanged": {
-                    break;
-                }
-                case "none":
-                default: {
-                    if (this.state.size !== 0) {
-                        this.state.clear();
-                        this.notify();
-                    }
-                    break;
-                }
-            }
-            this.isFiltered = 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;
-            this.notify();
+    handleRemove(args) {
+        if (!isPresent(this.treeview.editService)) {
+            throw new Error('No `editService` provided. Either provide your own implementation or use this directive in combination with one of the data binding directives (`kendoTreeViewHierarchyBinding` or `kendoTreeViewFlatDataBinding`).');
         }
-        this.isFiltered = true;
-    }
-    notify() {
-        this.lastChange = Array.from(this.state);
-        this.expandedKeysChange.emit(this.lastChange);
+        this.treeview.editService.remove(args);
     }
 }
-ExpandDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ExpandDirective, deps: [{ token: ExpandableComponent }], target: i0.ɵɵFactoryTarget.Directive });
-ExpandDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: ExpandDirective, selector: "[kendoTreeViewExpandable]", inputs: { isExpanded: "isExpanded", expandKey: ["expandBy", "expandKey"], expandOnFilter: "expandOnFilter", expandedKeys: "expandedKeys" }, outputs: { expandedKeysChange: "expandedKeysChange" }, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ExpandDirective, decorators: [{
+DragAndDropEditingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DragAndDropEditingDirective, deps: [{ token: TreeViewComponent }], target: i0.ɵɵFactoryTarget.Directive });
+DragAndDropEditingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DragAndDropEditingDirective, isStandalone: true, selector: "[kendoTreeViewDragAndDropEditing]", inputs: { editService: "editService" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DragAndDropEditingDirective, decorators: [{
             type: Directive,
-            args: [{ selector: '[kendoTreeViewExpandable]' }]
-        }], ctorParameters: function () { return [{ type: ExpandableComponent }]; }, propDecorators: { isExpanded: [{
-                type: Input
-            }], expandKey: [{
-                type: Input,
-                args: ["expandBy"]
-            }], expandOnFilter: [{
-                type: Input
-            }], expandedKeysChange: [{
-                type: Output
-            }], expandedKeys: [{
+            args: [{
+                    selector: '[kendoTreeViewDragAndDropEditing]',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: TreeViewComponent }]; }, propDecorators: { editService: [{
                 type: Input
             }] } });
 
 /**
- * A directive which manages the in-memory selection state of the TreeView node
- * ([see example]({% slug selection_treeview %})).
+ * Describes the attempted drop action during dragging.
+ * Passed as `action` value to the [`kendoTreeViewDragClueTemplate`]({% slug api_treeview_dragcluetemplatedirective %}) directive.
+ * By default, this value defines the rendered icon in the drag clue.
  */
-class SelectDirective {
-    constructor(treeView, navigationService) {
-        this.treeView = treeView;
-        this.navigationService = navigationService;
-        /**
-         * Fires when the `selectedKeys` collection was updated.
-         */
-        this.selectedKeysChange = new EventEmitter();
-        this.subscriptions = new Subscription();
-        this.selectActions = {
-            'multiple': (e) => this.selectMultiple(e),
-            'single': (e) => this.selectSingle(e)
-        };
-        /**
-         * Reflectes the internal `selectedKeys` state.
-         */
-        this.state = new Set();
-        this.subscriptions.add(this.treeView.selectionChange.subscribe(this.select.bind(this)));
-        this.treeView.isSelected = (dataItem, index) => (this.state.has(this.itemKey({ dataItem, index })));
-        this.navigationService.deselectAllButCurrentItem.subscribe((node) => {
-            this.selectSingle(node);
-        });
+var DropAction;
+(function (DropAction) {
+    DropAction[DropAction["Add"] = 0] = "Add";
+    DropAction[DropAction["InsertTop"] = 1] = "InsertTop";
+    DropAction[DropAction["InsertBottom"] = 2] = "InsertBottom";
+    DropAction[DropAction["InsertMiddle"] = 3] = "InsertMiddle";
+    DropAction[DropAction["Invalid"] = 4] = "Invalid";
+})(DropAction || (DropAction = {}));
+
+/**
+ * Describes where the dragged item is dropped relative to the drop target item.
+ */
+var DropPosition;
+(function (DropPosition) {
+    DropPosition[DropPosition["Over"] = 0] = "Over";
+    DropPosition[DropPosition["Before"] = 1] = "Before";
+    DropPosition[DropPosition["After"] = 2] = "After";
+})(DropPosition || (DropPosition = {}));
+
+/**
+ * @hidden
+ */
+var ScrollDirection;
+(function (ScrollDirection) {
+    ScrollDirection[ScrollDirection["Up"] = -1] = "Up";
+    ScrollDirection[ScrollDirection["Down"] = 1] = "Down";
+})(ScrollDirection || (ScrollDirection = {}));
+
+/**
+ * @hidden
+ */
+class PreventableEvent {
+    constructor() {
+        this.prevented = false;
     }
     /**
-     * @hidden
+     * Prevents the default action for a specified event.
+     * In this way, the source component suppresses the built-in behavior that follows the event.
      */
-    set isSelected(value) {
-        this.treeView.isSelected = value;
-    }
-    get getAriaMultiselectable() {
-        return this.options.mode === 'multiple';
-    }
-    get options() {
-        const defaultOptions = {
-            enabled: true,
-            mode: 'single'
-        };
-        if (!isPresent(this.selection) || typeof this.selection === 'string') {
-            return defaultOptions;
-        }
-        const selectionSettings = isBoolean(this.selection) ? { enabled: this.selection } : this.selection;
-        return Object.assign(defaultOptions, selectionSettings);
+    preventDefault() {
+        this.prevented = true;
     }
-    ngOnChanges(changes) {
-        if (isChanged('selectedKeys', changes, false) && changes['selectedKeys'].currentValue !== this.lastChange) {
-            this.state = new Set(changes['selectedKeys'].currentValue);
-        }
-        const isSelectionBooleanTrue = typeof this.selection === 'boolean' && this.selection;
-        this.navigationService.selection = isSelectionBooleanTrue ? 'single' : this.selection?.mode;
-    }
-    ngOnDestroy() {
-        this.subscriptions.unsubscribe();
-    }
-    itemKey(e) {
-        if (!this.selectKey) {
-            return e.index;
-        }
-        if (typeof this.selectKey === 'string') {
-            return e.dataItem[this.selectKey];
-        }
-        if (typeof this.selectKey === 'function') {
-            return this.selectKey(e);
-        }
-    }
-    select(e) {
-        const { enabled, mode } = this.options;
-        const performSelection = this.selectActions[mode] || noop;
-        if (!enabled) {
-            return;
-        }
-        performSelection(e);
-    }
-    selectSingle(node) {
-        const key = this.itemKey(node);
-        if (!this.state.has(key)) {
-            this.state.clear();
-            this.state.add(key);
-            this.notify();
-        }
-    }
-    selectMultiple(node) {
-        const key = this.itemKey(node);
-        const isSelected = this.state.has(key);
-        if (!isPresent(key)) {
-            return;
-        }
-        if (isSelected) {
-            this.state.delete(key);
-        }
-        else {
-            this.state.add(key);
-        }
-        this.notify();
-    }
-    notify() {
-        this.lastChange = Array.from(this.state);
-        this.selectedKeysChange.emit(this.lastChange);
-    }
-}
-SelectDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SelectDirective, deps: [{ token: TreeViewComponent }, { token: NavigationService }], target: i0.ɵɵFactoryTarget.Directive });
-SelectDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: SelectDirective, selector: "[kendoTreeViewSelectable]", inputs: { isSelected: "isSelected", selectKey: ["selectBy", "selectKey"], selection: ["kendoTreeViewSelectable", "selection"], selectedKeys: "selectedKeys" }, outputs: { selectedKeysChange: "selectedKeysChange" }, host: { properties: { "attr.aria-multiselectable": "this.getAriaMultiselectable" } }, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SelectDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: '[kendoTreeViewSelectable]' }]
-        }], ctorParameters: function () { return [{ type: TreeViewComponent }, { type: NavigationService }]; }, propDecorators: { isSelected: [{
-                type: Input
-            }], selectKey: [{
-                type: Input,
-                args: ['selectBy']
-            }], selection: [{
-                type: Input,
-                args: ['kendoTreeViewSelectable']
-            }], selectedKeys: [{
-                type: Input
-            }], selectedKeysChange: [{
-                type: Output
-            }], getAriaMultiselectable: [{
-                type: HostBinding,
-                args: ['attr.aria-multiselectable']
-            }] } });
-
-/**
- * Describes the attempted drop action during dragging.
- * Passed as `action` value to the [`kendoTreeViewDragClueTemplate`]({% slug api_treeview_dragcluetemplatedirective %}) directive.
- * By default, this value defines the rendered icon in the drag clue.
- */
-var DropAction;
-(function (DropAction) {
-    DropAction[DropAction["Add"] = 0] = "Add";
-    DropAction[DropAction["InsertTop"] = 1] = "InsertTop";
-    DropAction[DropAction["InsertBottom"] = 2] = "InsertBottom";
-    DropAction[DropAction["InsertMiddle"] = 3] = "InsertMiddle";
-    DropAction[DropAction["Invalid"] = 4] = "Invalid";
-})(DropAction || (DropAction = {}));
-
-/**
- * Describes where the dragged item is dropped relative to the drop target item.
- */
-var DropPosition;
-(function (DropPosition) {
-    DropPosition[DropPosition["Over"] = 0] = "Over";
-    DropPosition[DropPosition["Before"] = 1] = "Before";
-    DropPosition[DropPosition["After"] = 2] = "After";
-})(DropPosition || (DropPosition = {}));
-
-/**
- * @hidden
- */
-var ScrollDirection;
-(function (ScrollDirection) {
-    ScrollDirection[ScrollDirection["Up"] = -1] = "Up";
-    ScrollDirection[ScrollDirection["Down"] = 1] = "Down";
-})(ScrollDirection || (ScrollDirection = {}));
-
-/**
- * @hidden
- */
-class PreventableEvent {
-    constructor() {
-        this.prevented = false;
-    }
-    /**
-     * Prevents the default action for a specified event.
-     * In this way, the source component suppresses the built-in behavior that follows the event.
-     */
-    preventDefault() {
-        this.prevented = true;
-    }
-    /**
-     * If the event is prevented by any of its subscribers, returns `true`.
-     *
-     * @returns `true` if the default action was prevented. Otherwise, returns `false`.
-     */
-    isDefaultPrevented() {
-        return this.prevented;
+    /**
+     * If the event is prevented by any of its subscribers, returns `true`.
+     *
+     * @returns `true` if the default action was prevented. Otherwise, returns `false`.
+     */
+    isDefaultPrevented() {
+        return this.prevented;
     }
 }
 
@@ -3702,121 +3459,262 @@ class TreeItemDragEvent {
     constructor() { }
 }
 
-/**
- * Checks if the browser supports relative stacking context.
- * https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
- */
-const hasRelativeStackingContext = memoize(() => {
-    if (!(isDocumentAvailable() && isPresent(document.body))) {
-        return false;
-    }
-    const top = 10;
-    const parent = document.createElement("div");
-    parent.style.transform = "matrix(10, 0, 0, 10, 0, 0)";
-    const innerDiv = document.createElement('div');
-    innerDiv.innerText = 'child';
-    innerDiv.style.position = 'fixed';
-    innerDiv.style.top = `${top}px`;
-    parent.appendChild(innerDiv);
-    document.body.appendChild(parent);
-    const isDifferent = parent.children[0].getBoundingClientRect().top !== top;
-    document.body.removeChild(parent);
-    return isDifferent;
-});
-/**
- * Stores the result of the passed function's first invokation and returns it instead of invoking it again afterwards.
- */
-function memoize(fn) {
-    let result;
-    let called = false;
-    return (...args) => {
-        if (called) {
-            return result;
-        }
-        result = fn(...args);
-        called = true;
-        return result;
-    };
-}
 /**
  * @hidden
- *
- * Gets the offset of the parent element if the latter has the `transform` CSS prop applied.
- * Transformed parents create new stacking context and the `fixed` children must be position based on the transformed parent.
- * https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
- *
- * If no parent container is `transform`-ed the function will return `{ left: 0, top: 0 }`;
  */
-const getContainerOffset = (element) => {
-    if (!(element && hasRelativeStackingContext())) {
-        return { left: 0, top: 0 };
+class DragClueComponent {
+    constructor(cdr) {
+        this.cdr = cdr;
+        this.hostClasses = true;
+        this.posistionStyle = 'fixed';
     }
-    let offsetParent = element.parentElement;
-    while (offsetParent) {
-        if (window.getComputedStyle(offsetParent).transform !== 'none') {
-            break;
+    get statusIconClass() {
+        switch (this.action) {
+            case DropAction.Add: return 'plus';
+            case DropAction.InsertTop: return 'insert-top';
+            case DropAction.InsertBottom: return 'insert-bottom';
+            case DropAction.InsertMiddle: return 'insert-middle';
+            case DropAction.Invalid:
+            default: return 'cancel';
         }
-        offsetParent = offsetParent.parentElement;
-    }
-    if (offsetParent) {
-        const rect = offsetParent.getBoundingClientRect();
-        return {
-            left: rect.left - offsetParent.scrollLeft,
-            top: rect.top - offsetParent.scrollTop
-        };
-    }
-    return { left: 0, top: 0 };
-};
-/**
- * @hidden
- */
-const getDropAction = (dropPosition, dropTarget) => {
-    if (!(isPresent(dropPosition) && isPresent(dropTarget))) {
-        return DropAction.Invalid;
-    }
-    switch (dropPosition) {
-        case DropPosition.Over:
-            return DropAction.Add;
-        case DropPosition.Before:
-            return isPresent(closestNode(dropTarget).previousElementSibling) ? DropAction.InsertMiddle : DropAction.InsertTop;
-        case DropPosition.After:
-            return isPresent(closestNode(dropTarget).nextElementSibling) ? DropAction.InsertMiddle : DropAction.InsertBottom;
-        default:
-            return DropAction.Invalid;
-    }
-};
-/**
- * @hidden
- */
-const getDropPosition = (draggedItem, target, clientY, targetTreeView, containerOffset) => {
-    if (!(isPresent(draggedItem) && isPresent(target) && isPresent(targetTreeView) && isPresent(containerOffset))) {
-        return;
     }
-    // the .k-treeview-mid element starts just after the checkbox/expand arrow and stretches till the end of the treeview on the right
-    const item = closestWithMatch(target, '.k-treeview-top, .k-treeview-mid, .k-treeview-bot');
-    if (!isPresent(item)) {
-        return;
+    get statusSVGIcon() {
+        switch (this.action) {
+            case DropAction.Add: return plusIcon;
+            case DropAction.InsertTop: return insertTopIcon;
+            case DropAction.InsertBottom: return insertBottomIcon;
+            case DropAction.InsertMiddle: return insertMiddleIcon;
+            case DropAction.Invalid:
+            default: return cancelIcon;
+        }
     }
-    // the content element (.k-treeview-leaf:not(.k-treeview-load-more-button)) holds just the treeview item text
-    const content = getContentElement(item);
-    const targetChildOfDraggedItem = hasParent(item, closestNode(draggedItem));
-    if (!isPresent(content) || (content === draggedItem) || targetChildOfDraggedItem) {
-        return;
+    // exposed as a public method that can be called from outside as the component uses `OnPush` strategy
+    detectChanges() {
+        this.cdr.detectChanges();
     }
-    const itemViewPortCoords = content.getBoundingClientRect();
-    /*
-        if the user is hovering a treeview item, split the item height into four parts:
-            - dropping into the top quarter should insert the dragged item before the drop target
-            - dropping into the bottom quarter should insert the dragged item after the drop target
-            - dropping into the second or third quarter should add the item as child node of the drop target
-
-        if the user is NOT hovering a treeview item (he's dragging somewhere on the right), split the item height to just two parts:
-            - dropping should insert before or after
-    */
-    const itemDivisionHeight = itemViewPortCoords.height / (isContent(target) ? 4 : 2);
-    // clear any possible container offset created by parent elements with `transform` css property set
-    const pointerPosition = clientY - containerOffset.top;
-    const itemTop = itemViewPortCoords.top - containerOffset.top;
+}
+DragClueComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DragClueComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+DragClueComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DragClueComponent, isStandalone: true, selector: "kendo-treeview-drag-clue", host: { properties: { "class.k-header": "this.hostClasses", "class.k-drag-clue": "this.hostClasses", "style.position": "this.posistionStyle" } }, ngImport: i0, template: `
+        <ng-container *ngIf="!template">
+            <kendo-icon-wrapper
+                innerCssClass="k-drag-status"
+                [name]="statusIconClass"
+                [svgIcon]="statusSVGIcon"
+                >
+            </kendo-icon-wrapper>
+            <span>{{text}}</span>
+        </ng-container>
+
+        <ng-template
+            *ngIf="template"
+            [ngTemplateOutlet]="template"
+            [ngTemplateOutletContext]="{
+                text: text,
+                action: action,
+                sourceItem: sourceItem,
+                destinationItem: destinationItem
+            }"
+        >
+        </ng-template>
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DragClueComponent, decorators: [{
+            type: Component,
+            args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    selector: 'kendo-treeview-drag-clue',
+                    template: `
+        <ng-container *ngIf="!template">
+            <kendo-icon-wrapper
+                innerCssClass="k-drag-status"
+                [name]="statusIconClass"
+                [svgIcon]="statusSVGIcon"
+                >
+            </kendo-icon-wrapper>
+            <span>{{text}}</span>
+        </ng-container>
+
+        <ng-template
+            *ngIf="template"
+            [ngTemplateOutlet]="template"
+            [ngTemplateOutletContext]="{
+                text: text,
+                action: action,
+                sourceItem: sourceItem,
+                destinationItem: destinationItem
+            }"
+        >
+        </ng-template>
+    `,
+                    standalone: true,
+                    imports: [NgIf, IconWrapperComponent, NgTemplateOutlet]
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { hostClasses: [{
+                type: HostBinding,
+                args: ['class.k-header']
+            }, {
+                type: HostBinding,
+                args: ['class.k-drag-clue']
+            }], posistionStyle: [{
+                type: HostBinding,
+                args: ['style.position']
+            }] } });
+
+/**
+ * @hidden
+ */
+class DragAndDropAssetService {
+    get componentRef() {
+        if (!isPresent(this._componentRef)) {
+            throw new Error('The `initalize` method must be called before calling other service methods.');
+        }
+        return this._componentRef;
+    }
+    set componentRef(componentRef) {
+        this._componentRef = componentRef;
+    }
+    get element() {
+        return this.componentRef.location.nativeElement;
+    }
+    ngOnDestroy() {
+        if (!isPresent(this._componentRef)) {
+            return;
+        }
+        this.element.parentElement.removeChild(this.element);
+        this.componentRef.destroy();
+        this.componentRef = null;
+    }
+    show() {
+        this.element.style.display = '';
+    }
+    hide() {
+        this.element.style.display = 'none';
+    }
+    move(left, top, offset = 0) {
+        this.element.style.left = `${left + offset}px`;
+        this.element.style.top = `${top + offset}px`;
+    }
+}
+DragAndDropAssetService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DragAndDropAssetService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+DragAndDropAssetService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DragAndDropAssetService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DragAndDropAssetService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * Checks if the browser supports relative stacking context.
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
+ */
+const hasRelativeStackingContext = memoize(() => {
+    if (!(isDocumentAvailable() && isPresent(document.body))) {
+        return false;
+    }
+    const top = 10;
+    const parent = document.createElement("div");
+    parent.style.transform = "matrix(10, 0, 0, 10, 0, 0)";
+    const innerDiv = document.createElement('div');
+    innerDiv.innerText = 'child';
+    innerDiv.style.position = 'fixed';
+    innerDiv.style.top = `${top}px`;
+    parent.appendChild(innerDiv);
+    document.body.appendChild(parent);
+    const isDifferent = parent.children[0].getBoundingClientRect().top !== top;
+    document.body.removeChild(parent);
+    return isDifferent;
+});
+/**
+ * Stores the result of the passed function's first invokation and returns it instead of invoking it again afterwards.
+ */
+function memoize(fn) {
+    let result;
+    let called = false;
+    return (...args) => {
+        if (called) {
+            return result;
+        }
+        result = fn(...args);
+        called = true;
+        return result;
+    };
+}
+/**
+ * @hidden
+ *
+ * Gets the offset of the parent element if the latter has the `transform` CSS prop applied.
+ * Transformed parents create new stacking context and the `fixed` children must be position based on the transformed parent.
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
+ *
+ * If no parent container is `transform`-ed the function will return `{ left: 0, top: 0 }`;
+ */
+const getContainerOffset = (element) => {
+    if (!(element && hasRelativeStackingContext())) {
+        return { left: 0, top: 0 };
+    }
+    let offsetParent = element.parentElement;
+    while (offsetParent) {
+        if (window.getComputedStyle(offsetParent).transform !== 'none') {
+            break;
+        }
+        offsetParent = offsetParent.parentElement;
+    }
+    if (offsetParent) {
+        const rect = offsetParent.getBoundingClientRect();
+        return {
+            left: rect.left - offsetParent.scrollLeft,
+            top: rect.top - offsetParent.scrollTop
+        };
+    }
+    return { left: 0, top: 0 };
+};
+/**
+ * @hidden
+ */
+const getDropAction = (dropPosition, dropTarget) => {
+    if (!(isPresent(dropPosition) && isPresent(dropTarget))) {
+        return DropAction.Invalid;
+    }
+    switch (dropPosition) {
+        case DropPosition.Over:
+            return DropAction.Add;
+        case DropPosition.Before:
+            return isPresent(closestNode(dropTarget).previousElementSibling) ? DropAction.InsertMiddle : DropAction.InsertTop;
+        case DropPosition.After:
+            return isPresent(closestNode(dropTarget).nextElementSibling) ? DropAction.InsertMiddle : DropAction.InsertBottom;
+        default:
+            return DropAction.Invalid;
+    }
+};
+/**
+ * @hidden
+ */
+const getDropPosition = (draggedItem, target, clientY, targetTreeView, containerOffset) => {
+    if (!(isPresent(draggedItem) && isPresent(target) && isPresent(targetTreeView) && isPresent(containerOffset))) {
+        return;
+    }
+    // the .k-treeview-mid element starts just after the checkbox/expand arrow and stretches till the end of the treeview on the right
+    const item = closestWithMatch(target, '.k-treeview-top, .k-treeview-mid, .k-treeview-bot');
+    if (!isPresent(item)) {
+        return;
+    }
+    // the content element (.k-treeview-leaf:not(.k-treeview-load-more-button)) holds just the treeview item text
+    const content = getContentElement(item);
+    const targetChildOfDraggedItem = hasParent(item, closestNode(draggedItem));
+    if (!isPresent(content) || (content === draggedItem) || targetChildOfDraggedItem) {
+        return;
+    }
+    const itemViewPortCoords = content.getBoundingClientRect();
+    /*
+        if the user is hovering a treeview item, split the item height into four parts:
+            - dropping into the top quarter should insert the dragged item before the drop target
+            - dropping into the bottom quarter should insert the dragged item after the drop target
+            - dropping into the second or third quarter should add the item as child node of the drop target
+
+        if the user is NOT hovering a treeview item (he's dragging somewhere on the right), split the item height to just two parts:
+            - dropping should insert before or after
+    */
+    const itemDivisionHeight = itemViewPortCoords.height / (isContent(target) ? 4 : 2);
+    // clear any possible container offset created by parent elements with `transform` css property set
+    const pointerPosition = clientY - containerOffset.top;
+    const itemTop = itemViewPortCoords.top - containerOffset.top;
     if (pointerPosition < itemTop + itemDivisionHeight) {
         return DropPosition.Before;
     }
@@ -3969,266 +3867,18 @@ const scrollElementBy = (element, step, direction) => {
 /**
  * @hidden
  */
-const copyPageSize = (treeview, source, target) => {
-    if (!isPresent(treeview.loadMoreService)) {
-        return;
-    }
-    const sourceGroupSize = treeview.getNodePageSize(source);
-    treeview.setNodePageSize(target, sourceGroupSize);
-};
-/**
- * @hidden
- */
-const incrementPageSize = (treeview, dataItem) => {
-    if (!isPresent(treeview.loadMoreService)) {
-        return;
-    }
-    const currentPageSize = treeview.getNodePageSize(dataItem);
-    treeview.setNodePageSize(dataItem, currentPageSize + 1);
-};
+const CLUE_OFFSET = 10;
 /**
  * @hidden
  */
-const decrementPageSize = (treeview, dataItem) => {
-    if (!isPresent(treeview.loadMoreService)) {
-        return;
-    }
-    const currentPageSize = treeview.getNodePageSize(dataItem);
-    treeview.setNodePageSize(dataItem, currentPageSize - 1);
-};
-
+const RETURN_ANIMATION_DURATION = 200;
 /**
  * @hidden
  */
-class HierarchyEditingService {
-    constructor(hierarchyBinding) {
-        this.hierarchyBinding = hierarchyBinding;
-    }
-    add({ sourceItem, destinationItem, dropPosition, sourceTree, destinationTree }) {
-        // shallow clone the item as not to mistake it for its 'older' version when the remove handler kicks in to splice the item at its old position
-        const clonedSourceDataItem = Object.assign({}, getDataItem(sourceItem));
-        if (dropPosition === DropPosition.Over) {
-            // expand the item that was dropped into
-            expandDropTarget(destinationItem, destinationTree);
-            const destinationChildren = this.childrenFor(getDataItem(destinationItem));
-            // add the moved node just before the load more button if load more is enabled
-            const targetIndex = isPresent(destinationTree.loadMoreService) ?
-                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);
-            this.movedItemNewIndex = buildTreeIndex(destinationItem.item.index, targetIndex);
-        }
-        else {
-            const destinationParentNodes = this.getParentNodes(destinationItem, destinationTree);
-            const shiftIndex = dropPosition === DropPosition.After ? 1 : 0;
-            const targetIndex = destinationParentNodes.indexOf(getDataItem(destinationItem)) + shiftIndex;
-            destinationParentNodes.splice(targetIndex, 0, clonedSourceDataItem);
-            const parentIndex = destinationItem.parent ? destinationItem.parent.item.index : null;
-            this.movedItemNewIndex = buildTreeIndex(parentIndex, targetIndex);
-        }
-        // increment the parent page size => an item is moved into it
-        const updatedParent = dropPosition === DropPosition.Over ? getDataItem(destinationItem) : getDataItem(destinationItem.parent);
-        incrementPageSize(destinationTree, updatedParent);
-        // the page sizes are stored by data-item reference => copy the old item ref page size to the new item reference
-        copyPageSize(destinationTree, getDataItem(sourceItem), clonedSourceDataItem);
-        // the source tree nodes are reloaded on `removeItem` - reload the destination tree nodes if the soruce and the destination tree are different
-        if (sourceTree !== destinationTree && !destinationTree.loadOnDemand) {
-            destinationTree.preloadChildNodes();
-        }
-        // 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) {
-            // ensure the focus target is rendered and registered
-            destinationTree.changeDetectorRef.detectChanges();
-            destinationTree.focus(this.movedItemNewIndex);
-        }
-    }
-    remove({ sourceItem, sourceTree, destinationTree }) {
-        const sourceParentNodes = this.getParentNodes(sourceItem, sourceTree);
-        const sourceItemIndex = sourceParentNodes.indexOf(getDataItem(sourceItem));
-        sourceParentNodes.splice(sourceItemIndex, 1);
-        // emit collapse for the parent node if its last child node was spliced
-        collapseEmptyParent(sourceItem.parent, sourceParentNodes, sourceTree);
-        // decrement source item parent page size => an item has been removed from it
-        decrementPageSize(sourceTree, getDataItem(sourceItem.parent));
-        // reload the treeview nodes
-        if (!sourceTree.loadOnDemand) {
-            sourceTree.preloadChildNodes();
-        }
-        // 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
-            destinationTree.changeDetectorRef.detectChanges();
-            // after the source item is removed from its original position, the candidate index might have to be corrected
-            const index = updateMovedItemIndex(this.movedItemNewIndex, sourceItem.item.index);
-            destinationTree.focus(index);
-        }
-    }
-    getParentNodes(node, treeView) {
-        return isPresent(node.parent) ?
-            this.childrenFor(getDataItem(node.parent)) :
-            treeView.nodes;
-    }
-    childrenFor(dataItem) {
-        return getter(this.hierarchyBinding.childrenField)(dataItem) || [];
-    }
-}
-
-/**
- * @hidden
- */
-class DragClueComponent {
-    constructor(cdr) {
-        this.cdr = cdr;
-        this.hostClasses = true;
-        this.posistionStyle = 'fixed';
-    }
-    get statusIconClass() {
-        switch (this.action) {
-            case DropAction.Add: return 'plus';
-            case DropAction.InsertTop: return 'insert-top';
-            case DropAction.InsertBottom: return 'insert-bottom';
-            case DropAction.InsertMiddle: return 'insert-middle';
-            case DropAction.Invalid:
-            default: return 'cancel';
-        }
-    }
-    get statusSVGIcon() {
-        switch (this.action) {
-            case DropAction.Add: return plusIcon;
-            case DropAction.InsertTop: return insertTopIcon;
-            case DropAction.InsertBottom: return insertBottomIcon;
-            case DropAction.InsertMiddle: return insertMiddleIcon;
-            case DropAction.Invalid:
-            default: return cancelIcon;
-        }
-    }
-    // exposed as a public method that can be called from outside as the component uses `OnPush` strategy
-    detectChanges() {
-        this.cdr.detectChanges();
-    }
-}
-DragClueComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DragClueComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-DragClueComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DragClueComponent, selector: "kendo-treeview-drag-clue", host: { properties: { "class.k-header": "this.hostClasses", "class.k-drag-clue": "this.hostClasses", "style.position": "this.posistionStyle" } }, ngImport: i0, template: `
-        <ng-container *ngIf="!template">
-            <kendo-icon-wrapper
-                innerCssClass="k-drag-status"
-                [name]="statusIconClass"
-                [svgIcon]="statusSVGIcon"
-                >
-            </kendo-icon-wrapper>
-            <span>{{text}}</span>
-        </ng-container>
-
-        <ng-template
-            *ngIf="template"
-            [ngTemplateOutlet]="template"
-            [ngTemplateOutletContext]="{
-                text: text,
-                action: action,
-                sourceItem: sourceItem,
-                destinationItem: destinationItem
-            }"
-        >
-        </ng-template>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i9.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i11.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DragClueComponent, decorators: [{
-            type: Component,
-            args: [{
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    selector: 'kendo-treeview-drag-clue',
-                    template: `
-        <ng-container *ngIf="!template">
-            <kendo-icon-wrapper
-                innerCssClass="k-drag-status"
-                [name]="statusIconClass"
-                [svgIcon]="statusSVGIcon"
-                >
-            </kendo-icon-wrapper>
-            <span>{{text}}</span>
-        </ng-container>
-
-        <ng-template
-            *ngIf="template"
-            [ngTemplateOutlet]="template"
-            [ngTemplateOutletContext]="{
-                text: text,
-                action: action,
-                sourceItem: sourceItem,
-                destinationItem: destinationItem
-            }"
-        >
-        </ng-template>
-    `
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { hostClasses: [{
-                type: HostBinding,
-                args: ['class.k-header']
-            }, {
-                type: HostBinding,
-                args: ['class.k-drag-clue']
-            }], posistionStyle: [{
-                type: HostBinding,
-                args: ['style.position']
-            }] } });
-
-/**
- * @hidden
- */
-class DragAndDropAssetService {
-    get componentRef() {
-        if (!isPresent(this._componentRef)) {
-            throw new Error('The `initalize` method must be called before calling other service methods.');
-        }
-        return this._componentRef;
-    }
-    set componentRef(componentRef) {
-        this._componentRef = componentRef;
-    }
-    get element() {
-        return this.componentRef.location.nativeElement;
-    }
-    ngOnDestroy() {
-        if (!isPresent(this._componentRef)) {
-            return;
-        }
-        this.element.parentElement.removeChild(this.element);
-        this.componentRef.destroy();
-        this.componentRef = null;
-    }
-    show() {
-        this.element.style.display = '';
-    }
-    hide() {
-        this.element.style.display = 'none';
-    }
-    move(left, top, offset = 0) {
-        this.element.style.left = `${left + offset}px`;
-        this.element.style.top = `${top + offset}px`;
-    }
-}
-DragAndDropAssetService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DragAndDropAssetService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-DragAndDropAssetService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DragAndDropAssetService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DragAndDropAssetService, decorators: [{
-            type: Injectable
-        }] });
-
-/**
- * @hidden
- */
-const CLUE_OFFSET = 10;
-/**
- * @hidden
- */
-const RETURN_ANIMATION_DURATION = 200;
-/**
- * @hidden
- */
-class DragClueService extends DragAndDropAssetService {
-    constructor(componentFactoryResolver) {
-        super();
-        this.componentFactoryResolver = componentFactoryResolver;
+class DragClueService extends DragAndDropAssetService {
+    constructor(componentFactoryResolver) {
+        super();
+        this.componentFactoryResolver = componentFactoryResolver;
     }
     initialize(container, template) {
         if (isPresent(this._componentRef)) {
@@ -4343,7 +3993,7 @@ class DropHintComponent {
     }
 }
 DropHintComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DropHintComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-DropHintComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DropHintComponent, selector: "kendo-treeview-drop-hint", host: { properties: { "class.k-drop-hint-container": "this.hostClass", "style.position": "this.position", "style.pointer-events": "this.pointerEvents" } }, ngImport: i0, template: `
+DropHintComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DropHintComponent, isStandalone: true, selector: "kendo-treeview-drop-hint", host: { properties: { "class.k-drop-hint-container": "this.hostClass", "style.position": "this.position", "style.pointer-events": "this.pointerEvents" } }, ngImport: i0, template: `
         <div
             *ngIf="!template"
             class="k-drop-hint k-drop-hint-h"
@@ -4362,7 +4012,7 @@ DropHintComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
             }"
         >
         <ng-template>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i9.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DropHintComponent, decorators: [{
             type: Component,
             args: [{
@@ -4387,7 +4037,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }"
         >
         <ng-template>
-    `
+    `,
+                    standalone: true,
+                    imports: [NgIf, NgTemplateOutlet]
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { hostClass: [{
                 type: HostBinding,
@@ -4455,11 +4107,12 @@ class DragClueTemplateDirective {
     }
 }
 DragClueTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DragClueTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-DragClueTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DragClueTemplateDirective, selector: "[kendoTreeViewDragClueTemplate]", ngImport: i0 });
+DragClueTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DragClueTemplateDirective, isStandalone: true, selector: "[kendoTreeViewDragClueTemplate]", ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DragClueTemplateDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[kendoTreeViewDragClueTemplate]'
+                    selector: '[kendoTreeViewDragClueTemplate]',
+                    standalone: true
                 }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
                     type: Optional
@@ -4482,11 +4135,12 @@ class DropHintTemplateDirective {
     }
 }
 DropHintTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DropHintTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-DropHintTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DropHintTemplateDirective, selector: "[kendoTreeViewDropHintTemplate]", ngImport: i0 });
+DropHintTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DropHintTemplateDirective, isStandalone: true, selector: "[kendoTreeViewDropHintTemplate]", ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DropHintTemplateDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[kendoTreeViewDropHintTemplate]'
+                    selector: '[kendoTreeViewDropHintTemplate]',
+                    standalone: true
                 }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
                     type: Optional
@@ -4746,47 +4400,403 @@ class DragAndDropDirective {
         this.pendingDragStartEvent = null;
     }
 }
-DragAndDropDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DragAndDropDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: TreeViewComponent }, { token: DragClueService }, { token: DropHintService }], target: i0.ɵɵFactoryTarget.Directive });
-DragAndDropDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DragAndDropDirective, selector: "[kendoTreeViewDragAndDrop]", inputs: { allowCopy: "allowCopy", dropZoneTreeViews: "dropZoneTreeViews", startDragAfter: "startDragAfter", autoScroll: "autoScroll" }, host: { properties: { "style.user-select": "this.userSelectStyle", "style.-ms-user-select": "this.userSelectStyle", "style.-moz-user-select": "this.userSelectStyle", "style.-webkit-user-select": "this.userSelectStyle" } }, providers: [
-        DragClueService,
-        DropHintService
-    ], queries: [{ propertyName: "dragClueTemplate", first: true, predicate: DragClueTemplateDirective, descendants: true }, { propertyName: "dropHintTemplate", first: true, predicate: DropHintTemplateDirective, descendants: true }], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DragAndDropDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kendoTreeViewDragAndDrop]',
-                    providers: [
-                        DragClueService,
-                        DropHintService
-                    ]
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: TreeViewComponent }, { type: DragClueService }, { type: DropHintService }]; }, propDecorators: { allowCopy: [{
-                type: Input
-            }], dropZoneTreeViews: [{
-                type: Input
-            }], startDragAfter: [{
-                type: Input
-            }], autoScroll: [{
-                type: Input
-            }], dragClueTemplate: [{
-                type: ContentChild,
-                args: [DragClueTemplateDirective, { static: false }]
-            }], dropHintTemplate: [{
-                type: ContentChild,
-                args: [DropHintTemplateDirective, { static: false }]
-            }], userSelectStyle: [{
-                type: HostBinding,
-                args: ['style.user-select']
-            }, {
-                type: HostBinding,
-                args: ['style.-ms-user-select']
-            }, {
-                type: HostBinding,
-                args: ['style.-moz-user-select']
-            }, {
-                type: HostBinding,
-                args: ['style.-webkit-user-select']
-            }] } });
+DragAndDropDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DragAndDropDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: TreeViewComponent }, { token: DragClueService }, { token: DropHintService }], target: i0.ɵɵFactoryTarget.Directive });
+DragAndDropDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DragAndDropDirective, isStandalone: true, selector: "[kendoTreeViewDragAndDrop]", inputs: { allowCopy: "allowCopy", dropZoneTreeViews: "dropZoneTreeViews", startDragAfter: "startDragAfter", autoScroll: "autoScroll" }, host: { properties: { "style.user-select": "this.userSelectStyle", "style.-ms-user-select": "this.userSelectStyle", "style.-moz-user-select": "this.userSelectStyle", "style.-webkit-user-select": "this.userSelectStyle" } }, providers: [
+        DragClueService,
+        DropHintService
+    ], queries: [{ propertyName: "dragClueTemplate", first: true, predicate: DragClueTemplateDirective, descendants: true }, { propertyName: "dropHintTemplate", first: true, predicate: DropHintTemplateDirective, descendants: true }], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DragAndDropDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoTreeViewDragAndDrop]',
+                    providers: [
+                        DragClueService,
+                        DropHintService
+                    ],
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: TreeViewComponent }, { type: DragClueService }, { type: DropHintService }]; }, propDecorators: { allowCopy: [{
+                type: Input
+            }], dropZoneTreeViews: [{
+                type: Input
+            }], startDragAfter: [{
+                type: Input
+            }], autoScroll: [{
+                type: Input
+            }], dragClueTemplate: [{
+                type: ContentChild,
+                args: [DragClueTemplateDirective, { static: false }]
+            }], dropHintTemplate: [{
+                type: ContentChild,
+                args: [DropHintTemplateDirective, { static: false }]
+            }], userSelectStyle: [{
+                type: HostBinding,
+                args: ['style.user-select']
+            }, {
+                type: HostBinding,
+                args: ['style.-ms-user-select']
+            }, {
+                type: HostBinding,
+                args: ['style.-moz-user-select']
+            }, {
+                type: HostBinding,
+                args: ['style.-webkit-user-select']
+            }] } });
+
+const DEFAULT_FILTER_EXPAND_SETTINGS = {
+    maxAutoExpandResults: -1,
+    expandMatches: false,
+    expandedOnClear: "none"
+};
+/**
+ * A directive which manages the expanded state of the TreeView.
+ * ([see example]({% slug expandedstate_treeview %})).
+ */
+class ExpandDirective {
+    constructor(component) {
+        this.component = component;
+        /**
+         * Whether or not to auto-expand the nodes leading from the root node to each filter result.
+         * To fine-tune this behavior, pass a [`FilterExpandSettings`]({% slug api_treeview_filterexpandsettings %}) object to this input.
+         * @default false
+         */
+        this.expandOnFilter = false;
+        /**
+         * Fires when the `expandedKeys` collection was updated.
+         */
+        this.expandedKeysChange = new EventEmitter();
+        this.subscriptions = new Subscription();
+        /**
+         * Reflectes the internal `expandedKeys` state.
+         */
+        this.state = new Set();
+        this.originalExpandedKeys = new Set();
+        this.isFiltered = false;
+        /**
+         * Fills array with the correct expand keys according to wrapper metadata.
+         */
+        this.updateExpandedNodes = (collection, node, autoExpandMatches) => {
+            if (node.containsMatches || node.isMatch && autoExpandMatches && isArrayWithAtLeastOneItem(node.children)) {
+                collection.push(this.itemKey({ dataItem: node.dataItem, index: node.index }));
+            }
+            if (isArrayWithAtLeastOneItem(node.children)) {
+                node.children.forEach(child => {
+                    this.updateExpandedNodes(collection, child, autoExpandMatches);
+                });
+            }
+        };
+        /**
+         * Fills array with the expand key of every node.
+         */
+        this.getEveryExpandKey = (collection, node) => {
+            if (isArrayWithAtLeastOneItem(node.children)) {
+                collection.push(this.itemKey({ dataItem: node.dataItem, index: node.index }));
+            }
+            if (isArrayWithAtLeastOneItem(node.children)) {
+                node.children.forEach(child => {
+                    this.getEveryExpandKey(collection, child);
+                });
+            }
+        };
+        this.subscriptions.add(merge(this.component.expand.pipe(map(e => ({ expand: true, ...e }))), this.component.collapse.pipe(map(e => ({ expand: false, ...e })))).subscribe(this.toggleExpand.bind(this)));
+        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 }));
+    }
+    /**
+     * @hidden
+     */
+    set isExpanded(value) {
+        this.component.isExpanded = value;
+    }
+    get filterExpandSettings() {
+        const settings = isBoolean(this.expandOnFilter) ? { enabled: this.expandOnFilter } : { ...this.expandOnFilter, enabled: true };
+        return Object.assign({}, DEFAULT_FILTER_EXPAND_SETTINGS, settings);
+    }
+    ngOnChanges(changes) {
+        if (isChanged('expandedKeys', changes, false) && changes['expandedKeys'].currentValue !== this.lastChange) {
+            this.state = new Set(changes['expandedKeys'].currentValue);
+        }
+    }
+    ngOnDestroy() {
+        this.subscriptions.unsubscribe();
+    }
+    /**
+     * @hidden
+     */
+    itemKey(e) {
+        if (this.expandKey) {
+            if (typeof this.expandKey === "string") {
+                return e.dataItem[this.expandKey];
+            }
+            if (typeof this.expandKey === "function") {
+                return this.expandKey(e);
+            }
+        }
+        return e.index;
+    }
+    toggleExpand({ index, dataItem, expand }) {
+        const key = this.itemKey({ index, dataItem });
+        const isExpanded = this.state.has(key);
+        let notify = false;
+        if (isExpanded && !expand) {
+            this.state.delete(key);
+            notify = true;
+        }
+        else if (!isExpanded && expand) {
+            this.state.add(key);
+            notify = true;
+        }
+        if (notify) {
+            this.notify();
+        }
+    }
+    handleAutoExpand({ nodes, matchCount, term }) {
+        if (!this.filterExpandSettings.enabled) {
+            return;
+        }
+        const { maxAutoExpandResults, expandMatches: autoExpandMatches, expandedOnClear } = this.filterExpandSettings;
+        if (!this.isFiltered) {
+            this.originalExpandedKeys = new Set(this.state);
+        }
+        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;
+                        this.notify();
+                    }
+                    break;
+                }
+                case "all": {
+                    this.state = new Set(nodes.reduce((acc, rootNode) => {
+                        this.getEveryExpandKey(acc, rootNode);
+                        return acc;
+                    }, []));
+                    this.notify();
+                    break;
+                }
+                case "unchanged": {
+                    break;
+                }
+                case "none":
+                default: {
+                    if (this.state.size !== 0) {
+                        this.state.clear();
+                        this.notify();
+                    }
+                    break;
+                }
+            }
+            this.isFiltered = 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;
+            this.notify();
+        }
+        this.isFiltered = true;
+    }
+    notify() {
+        this.lastChange = Array.from(this.state);
+        this.expandedKeysChange.emit(this.lastChange);
+    }
+}
+ExpandDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ExpandDirective, deps: [{ token: ExpandableComponent }], target: i0.ɵɵFactoryTarget.Directive });
+ExpandDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: ExpandDirective, isStandalone: true, selector: "[kendoTreeViewExpandable]", inputs: { isExpanded: "isExpanded", expandKey: ["expandBy", "expandKey"], expandOnFilter: "expandOnFilter", expandedKeys: "expandedKeys" }, outputs: { expandedKeysChange: "expandedKeysChange" }, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ExpandDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoTreeViewExpandable]',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: ExpandableComponent }]; }, propDecorators: { isExpanded: [{
+                type: Input
+            }], expandKey: [{
+                type: Input,
+                args: ["expandBy"]
+            }], expandOnFilter: [{
+                type: Input
+            }], expandedKeysChange: [{
+                type: Output
+            }], expandedKeys: [{
+                type: Input
+            }] } });
+
+/**
+ * @hidden
+ * Performs the right-to-left function composition. Functions must have a unary.
+ */
+const compose = (...args) => (data) => args.reduceRight((acc, curr) => curr(acc), data);
+
+/**
+ * @hidden
+ */
+const copyPageSize = (treeview, source, target) => {
+    if (!isPresent(treeview.loadMoreService)) {
+        return;
+    }
+    const sourceGroupSize = treeview.getNodePageSize(source);
+    treeview.setNodePageSize(target, sourceGroupSize);
+};
+/**
+ * @hidden
+ */
+const incrementPageSize = (treeview, dataItem) => {
+    if (!isPresent(treeview.loadMoreService)) {
+        return;
+    }
+    const currentPageSize = treeview.getNodePageSize(dataItem);
+    treeview.setNodePageSize(dataItem, currentPageSize + 1);
+};
+/**
+ * @hidden
+ */
+const decrementPageSize = (treeview, dataItem) => {
+    if (!isPresent(treeview.loadMoreService)) {
+        return;
+    }
+    const currentPageSize = treeview.getNodePageSize(dataItem);
+    treeview.setNodePageSize(dataItem, currentPageSize - 1);
+};
+
+/**
+ * @hidden
+ */
+class FlatEditingService {
+    constructor(flatBinding) {
+        this.flatBinding = flatBinding;
+    }
+    add({ sourceItem, destinationItem, dropPosition, sourceTree, destinationTree }) {
+        // shallow clone the item as not to mistake it for its 'older' version when the remove handler kicks in to splice the item at its old position
+        const clonedSourceDataItem = Object.assign({}, getDataItem(sourceItem));
+        if (dropPosition === DropPosition.Over) {
+            // expand the item that was dropped into
+            expandDropTarget(destinationItem, destinationTree);
+            const destinationItemId = getter(this.flatBinding.idField)(getDataItem(destinationItem));
+            setter(this.flatBinding.parentIdField)(clonedSourceDataItem, destinationItemId);
+            const lastChildNodeIndex = this.getLastVisibleChildNodeIndex(destinationTree, this.flatBinding.originalData, getDataItem(destinationItem));
+            // insert after the last visible child
+            const targetIndex = lastChildNodeIndex + 1;
+            this.flatBinding.originalData.splice(targetIndex, 0, clonedSourceDataItem);
+            // rebind the treeview data before searching for the focus target index
+            this.rebindData();
+            const focusTarget = this.fetchChildNodes(getDataItem(destinationItem), destinationTree).indexOf(clonedSourceDataItem);
+            this.movedItemNewIndex = buildTreeIndex(destinationItem.item.index, focusTarget);
+        }
+        else {
+            const shiftIndex = dropPosition === DropPosition.After ? 1 : 0;
+            const targetIndex = this.flatBinding.originalData.indexOf(getDataItem(destinationItem)) + shiftIndex;
+            this.flatBinding.originalData.splice(targetIndex, 0, clonedSourceDataItem);
+            const destinationItemParentId = getter(this.flatBinding.parentIdField)(getDataItem(destinationItem));
+            setter(this.flatBinding.parentIdField)(clonedSourceDataItem, destinationItemParentId);
+            // rebind the treeview data before searching for the focus target index
+            this.rebindData();
+            const parentIndex = destinationItem.parent ?
+                destinationItem.parent.item.index :
+                null;
+            const parentContainer = destinationItem.parent ?
+                this.fetchChildNodes(getDataItem(destinationItem.parent), destinationTree) :
+                destinationTree.nodes;
+            const focusTarget = parentContainer.indexOf(clonedSourceDataItem);
+            this.movedItemNewIndex = buildTreeIndex(parentIndex, focusTarget);
+        }
+        if (sourceTree !== destinationTree) {
+            this.addChildNodes(clonedSourceDataItem, sourceTree);
+        }
+        // increment the parent page size => an item is moved into it
+        const updatedParent = dropPosition === DropPosition.Over ? getDataItem(destinationItem) : getDataItem(destinationItem.parent);
+        incrementPageSize(destinationTree, updatedParent);
+        // the page sizes are stored by data-item reference => copy the old item ref page size to the new item reference
+        copyPageSize(destinationTree, getDataItem(sourceItem), clonedSourceDataItem);
+        // the source tree nodes are reloaded on `removeItem` - reload the destination tree nodes if the soruce and the destination tree are different
+        if (sourceTree !== destinationTree && !destinationTree.loadOnDemand) {
+            destinationTree.preloadChildNodes();
+        }
+        // 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) {
+            // ensure the focus target is rendered and registered
+            destinationTree.changeDetectorRef.detectChanges();
+            destinationTree.focus(this.movedItemNewIndex);
+        }
+    }
+    remove({ sourceItem, sourceTree, destinationTree }) {
+        const sourceDataItem = getDataItem(sourceItem);
+        const sourceItemIndex = this.flatBinding.originalData.indexOf(sourceDataItem);
+        this.flatBinding.originalData.splice(sourceItemIndex, 1);
+        if (sourceTree !== destinationTree) {
+            this.removeChildNodes(sourceDataItem, sourceTree);
+        }
+        this.rebindData();
+        // emit collapse for the parent node if its last child node was spliced
+        const parentChildren = sourceItem.parent ? sourceItem.parent.children : [];
+        collapseEmptyParent(sourceItem.parent, parentChildren, sourceTree);
+        // decrement source item parent page size => an item has been removed from it
+        decrementPageSize(sourceTree, getDataItem(sourceItem.parent));
+        // reload the treeview nodes
+        if (!sourceTree.loadOnDemand) {
+            sourceTree.preloadChildNodes();
+        }
+        // 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
+            destinationTree.changeDetectorRef.detectChanges();
+            // after the source item is removed from its original position, the candidate index might have to be corrected
+            const index = updateMovedItemIndex(this.movedItemNewIndex, sourceItem.item.index);
+            destinationTree.focus(index);
+        }
+    }
+    addChildNodes(dataItem, source) {
+        const itemChildren = this.fetchAllDescendantNodes(dataItem, source);
+        this.flatBinding.originalData.push(...itemChildren);
+    }
+    removeChildNodes(dataItem, source) {
+        const sourceChildren = this.fetchAllDescendantNodes(dataItem, source);
+        sourceChildren.forEach(item => {
+            const index = this.flatBinding.originalData.indexOf(item);
+            this.flatBinding.originalData.splice(index, 1);
+        });
+    }
+    fetchAllDescendantNodes(node, treeview) {
+        let nodes = this.fetchChildNodes(node, treeview);
+        nodes.forEach(node => nodes = nodes.concat(this.fetchAllDescendantNodes(node, treeview) || []));
+        return nodes;
+    }
+    fetchChildNodes(node, treeview) {
+        if (!node) {
+            return [];
+        }
+        let nodes = [];
+        treeview
+            .children(node)
+            .pipe(take(1))
+            .subscribe(children => nodes = nodes.concat(children || []));
+        return nodes;
+    }
+    getLastVisibleChildNodeIndex(treeview, data, node) {
+        if (!isPresent(treeview.loadMoreService) || !treeview.hasChildren(node)) {
+            return data.length;
+        }
+        const visibleNodesCount = treeview.loadMoreService.getGroupSize(node);
+        const visibleChildren = this.fetchChildNodes(node, treeview).slice(0, visibleNodesCount);
+        const lastNode = visibleChildren[visibleChildren.length - 1];
+        const lastNodeIndex = data.indexOf(lastNode);
+        return lastNodeIndex;
+    }
+    rebindData() {
+        this.flatBinding.nodes = this.flatBinding.originalData;
+        this.flatBinding.updateNodes(this.flatBinding.originalData);
+    }
+}
 
 /**
  * @hidden
@@ -4875,8 +4885,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }] } });
 
+const findChildren = (prop, nodes, value) => nodes.filter((x) => prop(x) === value);
 const indexBuilder$1 = new IndexBuilderService();
-const mapToWrappers = (currentLevelNodes, childrenField, parent = null, parentIndex = '') => {
+const mapToTree = (currentLevelNodes, allNodes, parentIdField, idField, parent = null, parentIndex = '') => {
     if (!isArrayWithAtLeastOneItem(currentLevelNodes)) {
         return [];
     }
@@ -4888,40 +4899,26 @@ const mapToWrappers = (currentLevelNodes, childrenField, parent = null, parentIn
             parent,
             visible: true
         };
-        wrapper.children = mapToWrappers(getter(childrenField)(node), childrenField, wrapper, index);
+        wrapper.children = mapToTree(findChildren(getter(parentIdField), allNodes || [], getter(idField)(node)), allNodes, parentIdField, idField, wrapper, index);
         return wrapper;
     });
 };
 /**
- * A directive which encapsulates the retrieval of child nodes.
+ * A directive which encapsulates the retrieval of the child nodes.
  */
-class HierarchyBindingDirective extends FilteringBase {
-    constructor(component, dragAndDropDirective) {
+class FlatDataBindingDirective extends FilteringBase {
+    constructor(component) {
         super(component);
         this.component = component;
-        this.dragAndDropDirective = dragAndDropDirective;
         /**
          * @hidden
          */
         this.loadOnDemand = true;
+        /**
+         * @hidden
+         */
         this.originalData = [];
-        const shouldFilter = !isPresent(this.dragAndDropDirective);
-        this.component.isVisible = shouldFilter ? (node) => this.visibleNodes.has(node) : isVisible;
-    }
-    /**
-     * The field name which holds the data items of the child component.
-     */
-    set childrenField(value) {
-        if (!value) {
-            throw new Error("'childrenField' cannot be empty");
-        }
-        this._childrenField = value;
-    }
-    /**
-     * The field name which holds the data items of the child component.
-     */
-    get childrenField() {
-        return this._childrenField;
+        this.component.isVisible = (node) => this.visibleNodes.has(node);
     }
     /**
      * @hidden
@@ -4930,14 +4927,15 @@ class HierarchyBindingDirective extends FilteringBase {
     set isVisible(fn) {
         this.component.isVisible = fn;
     }
+    /**
+     * @hidden
+     */
     ngOnInit() {
-        if (isPresent(this.childrenField)) {
-            this.component.children = item => of(getter(this.childrenField)(item));
-            this.component.hasChildren = item => {
-                const children = getter(this.childrenField)(item);
-                return Boolean(children && children.length);
-            };
-            this.component.editService = new HierarchyEditingService(this);
+        if (isPresent(this.parentIdField) && isPresent(this.idField)) {
+            const fetchChildren = (node) => findChildren(getter(this.parentIdField), this.originalData || [], getter(this.idField)(node));
+            this.component.hasChildren = (node) => fetchChildren(node).length > 0;
+            this.component.children = (node) => of(fetchChildren(node));
+            this.component.editService = new FlatEditingService(this);
             this.component.filterChange.subscribe(this.handleFilterChange.bind(this));
             if (this.component.filter) {
                 this.handleFilterChange(this.component.filter);
@@ -4947,8 +4945,11 @@ class HierarchyBindingDirective extends FilteringBase {
             }
         }
     }
+    /**
+     * @hidden
+     */
     ngOnChanges(changes) {
-        if (isChanged('childrenField', changes, false)) {
+        if (isChanged('parentIdField', changes, false)) {
             this.nodes = this.originalData;
             this.updateNodes(this.originalData);
         }
@@ -4965,41 +4966,43 @@ class HierarchyBindingDirective extends FilteringBase {
      */
     updateNodes(values) {
         this.originalData = values || [];
-        this.filterData = mapToWrappers(values, this.childrenField) || [];
-        this.updateVisibleNodes(this.filterData);
+        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);
+            this.updateVisibleNodes(this.filterData);
+        }
+        else {
+            this.component.nodes = this.originalData.slice(0);
+        }
     }
 }
-HierarchyBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HierarchyBindingDirective, deps: [{ token: DataBoundComponent }, { token: DragAndDropDirective, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-HierarchyBindingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: HierarchyBindingDirective, selector: "[kendoTreeViewHierarchyBinding]", inputs: { childrenField: "childrenField", nodes: "nodes", isVisible: "isVisible", loadOnDemand: "loadOnDemand" }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HierarchyBindingDirective, decorators: [{
+FlatDataBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FlatDataBindingDirective, deps: [{ token: DataBoundComponent }], target: i0.ɵɵFactoryTarget.Directive });
+FlatDataBindingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: FlatDataBindingDirective, isStandalone: true, selector: "[kendoTreeViewFlatDataBinding]", inputs: { nodes: "nodes", parentIdField: "parentIdField", idField: "idField", loadOnDemand: "loadOnDemand", isVisible: "isVisible" }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FlatDataBindingDirective, decorators: [{
             type: Directive,
-            args: [{ selector: '[kendoTreeViewHierarchyBinding]' }]
-        }], ctorParameters: function () { return [{ type: DataBoundComponent }, { type: DragAndDropDirective, decorators: [{
-                    type: Optional
-                }, {
-                    type: Host
-                }] }]; }, propDecorators: { childrenField: [{
+            args: [{
+                    selector: "[kendoTreeViewFlatDataBinding]",
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: DataBoundComponent }]; }, propDecorators: { nodes: [{
                 type: Input
-            }], nodes: [{
+            }], parentIdField: [{
                 type: Input
-            }], isVisible: [{
+            }], idField: [{
                 type: Input
             }], loadOnDemand: [{
                 type: Input
+            }], isVisible: [{
+                type: Input
             }] } });
 
-/**
- * @hidden
- * Performs the right-to-left function composition. Functions must have a unary.
- */
-const compose = (...args) => (data) => args.reduceRight((acc, curr) => curr(acc), data);
-
 /**
  * @hidden
  */
-class FlatEditingService {
-    constructor(flatBinding) {
-        this.flatBinding = flatBinding;
+class HierarchyEditingService {
+    constructor(hierarchyBinding) {
+        this.hierarchyBinding = hierarchyBinding;
     }
     add({ sourceItem, destinationItem, dropPosition, sourceTree, destinationTree }) {
         // shallow clone the item as not to mistake it for its 'older' version when the remove handler kicks in to splice the item at its old position
@@ -5007,36 +5010,22 @@ class FlatEditingService {
         if (dropPosition === DropPosition.Over) {
             // expand the item that was dropped into
             expandDropTarget(destinationItem, destinationTree);
-            const destinationItemId = getter(this.flatBinding.idField)(getDataItem(destinationItem));
-            setter(this.flatBinding.parentIdField)(clonedSourceDataItem, destinationItemId);
-            const lastChildNodeIndex = this.getLastVisibleChildNodeIndex(destinationTree, this.flatBinding.originalData, getDataItem(destinationItem));
-            // insert after the last visible child
-            const targetIndex = lastChildNodeIndex + 1;
-            this.flatBinding.originalData.splice(targetIndex, 0, clonedSourceDataItem);
-            // rebind the treeview data before searching for the focus target index
-            this.rebindData();
-            const focusTarget = this.fetchChildNodes(getDataItem(destinationItem), destinationTree).indexOf(clonedSourceDataItem);
-            this.movedItemNewIndex = buildTreeIndex(destinationItem.item.index, focusTarget);
+            const destinationChildren = this.childrenFor(getDataItem(destinationItem));
+            // add the moved node just before the load more button if load more is enabled
+            const targetIndex = isPresent(destinationTree.loadMoreService) ?
+                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);
+            this.movedItemNewIndex = buildTreeIndex(destinationItem.item.index, targetIndex);
         }
         else {
+            const destinationParentNodes = this.getParentNodes(destinationItem, destinationTree);
             const shiftIndex = dropPosition === DropPosition.After ? 1 : 0;
-            const targetIndex = this.flatBinding.originalData.indexOf(getDataItem(destinationItem)) + shiftIndex;
-            this.flatBinding.originalData.splice(targetIndex, 0, clonedSourceDataItem);
-            const destinationItemParentId = getter(this.flatBinding.parentIdField)(getDataItem(destinationItem));
-            setter(this.flatBinding.parentIdField)(clonedSourceDataItem, destinationItemParentId);
-            // rebind the treeview data before searching for the focus target index
-            this.rebindData();
-            const parentIndex = destinationItem.parent ?
-                destinationItem.parent.item.index :
-                null;
-            const parentContainer = destinationItem.parent ?
-                this.fetchChildNodes(getDataItem(destinationItem.parent), destinationTree) :
-                destinationTree.nodes;
-            const focusTarget = parentContainer.indexOf(clonedSourceDataItem);
-            this.movedItemNewIndex = buildTreeIndex(parentIndex, focusTarget);
-        }
-        if (sourceTree !== destinationTree) {
-            this.addChildNodes(clonedSourceDataItem, sourceTree);
+            const targetIndex = destinationParentNodes.indexOf(getDataItem(destinationItem)) + shiftIndex;
+            destinationParentNodes.splice(targetIndex, 0, clonedSourceDataItem);
+            const parentIndex = destinationItem.parent ? destinationItem.parent.item.index : null;
+            this.movedItemNewIndex = buildTreeIndex(parentIndex, targetIndex);
         }
         // increment the parent page size => an item is moved into it
         const updatedParent = dropPosition === DropPosition.Over ? getDataItem(destinationItem) : getDataItem(destinationItem.parent);
@@ -5056,16 +5045,11 @@ class FlatEditingService {
         }
     }
     remove({ sourceItem, sourceTree, destinationTree }) {
-        const sourceDataItem = getDataItem(sourceItem);
-        const sourceItemIndex = this.flatBinding.originalData.indexOf(sourceDataItem);
-        this.flatBinding.originalData.splice(sourceItemIndex, 1);
-        if (sourceTree !== destinationTree) {
-            this.removeChildNodes(sourceDataItem, sourceTree);
-        }
-        this.rebindData();
+        const sourceParentNodes = this.getParentNodes(sourceItem, sourceTree);
+        const sourceItemIndex = sourceParentNodes.indexOf(getDataItem(sourceItem));
+        sourceParentNodes.splice(sourceItemIndex, 1);
         // emit collapse for the parent node if its last child node was spliced
-        const parentChildren = sourceItem.parent ? sourceItem.parent.children : [];
-        collapseEmptyParent(sourceItem.parent, parentChildren, sourceTree);
+        collapseEmptyParent(sourceItem.parent, sourceParentNodes, sourceTree);
         // decrement source item parent page size => an item has been removed from it
         decrementPageSize(sourceTree, getDataItem(sourceItem.parent));
         // reload the treeview nodes
@@ -5081,52 +5065,18 @@ class FlatEditingService {
             destinationTree.focus(index);
         }
     }
-    addChildNodes(dataItem, source) {
-        const itemChildren = this.fetchAllDescendantNodes(dataItem, source);
-        this.flatBinding.originalData.push(...itemChildren);
-    }
-    removeChildNodes(dataItem, source) {
-        const sourceChildren = this.fetchAllDescendantNodes(dataItem, source);
-        sourceChildren.forEach(item => {
-            const index = this.flatBinding.originalData.indexOf(item);
-            this.flatBinding.originalData.splice(index, 1);
-        });
-    }
-    fetchAllDescendantNodes(node, treeview) {
-        let nodes = this.fetchChildNodes(node, treeview);
-        nodes.forEach(node => nodes = nodes.concat(this.fetchAllDescendantNodes(node, treeview) || []));
-        return nodes;
-    }
-    fetchChildNodes(node, treeview) {
-        if (!node) {
-            return [];
-        }
-        let nodes = [];
-        treeview
-            .children(node)
-            .pipe(take(1))
-            .subscribe(children => nodes = nodes.concat(children || []));
-        return nodes;
-    }
-    getLastVisibleChildNodeIndex(treeview, data, node) {
-        if (!isPresent(treeview.loadMoreService) || !treeview.hasChildren(node)) {
-            return data.length;
-        }
-        const visibleNodesCount = treeview.loadMoreService.getGroupSize(node);
-        const visibleChildren = this.fetchChildNodes(node, treeview).slice(0, visibleNodesCount);
-        const lastNode = visibleChildren[visibleChildren.length - 1];
-        const lastNodeIndex = data.indexOf(lastNode);
-        return lastNodeIndex;
+    getParentNodes(node, treeView) {
+        return isPresent(node.parent) ?
+            this.childrenFor(getDataItem(node.parent)) :
+            treeView.nodes;
     }
-    rebindData() {
-        this.flatBinding.nodes = this.flatBinding.originalData;
-        this.flatBinding.updateNodes(this.flatBinding.originalData);
+    childrenFor(dataItem) {
+        return getter(this.hierarchyBinding.childrenField)(dataItem) || [];
     }
 }
 
-const findChildren = (prop, nodes, value) => nodes.filter((x) => prop(x) === value);
 const indexBuilder = new IndexBuilderService();
-const mapToTree = (currentLevelNodes, allNodes, parentIdField, idField, parent = null, parentIndex = '') => {
+const mapToWrappers = (currentLevelNodes, childrenField, parent = null, parentIndex = '') => {
     if (!isArrayWithAtLeastOneItem(currentLevelNodes)) {
         return [];
     }
@@ -5138,26 +5088,40 @@ const mapToTree = (currentLevelNodes, allNodes, parentIdField, idField, parent =
             parent,
             visible: true
         };
-        wrapper.children = mapToTree(findChildren(getter(parentIdField), allNodes || [], getter(idField)(node)), allNodes, parentIdField, idField, wrapper, index);
+        wrapper.children = mapToWrappers(getter(childrenField)(node), childrenField, wrapper, index);
         return wrapper;
     });
 };
 /**
- * A directive which encapsulates the retrieval of the child nodes.
+ * A directive which encapsulates the retrieval of child nodes.
  */
-class FlatDataBindingDirective extends FilteringBase {
-    constructor(component) {
+class HierarchyBindingDirective extends FilteringBase {
+    constructor(component, dragAndDropDirective) {
         super(component);
         this.component = component;
+        this.dragAndDropDirective = dragAndDropDirective;
         /**
          * @hidden
          */
         this.loadOnDemand = true;
-        /**
-         * @hidden
-         */
         this.originalData = [];
-        this.component.isVisible = (node) => this.visibleNodes.has(node);
+        const shouldFilter = !isPresent(this.dragAndDropDirective);
+        this.component.isVisible = shouldFilter ? (node) => this.visibleNodes.has(node) : isVisible;
+    }
+    /**
+     * The field name which holds the data items of the child component.
+     */
+    set childrenField(value) {
+        if (!value) {
+            throw new Error("'childrenField' cannot be empty");
+        }
+        this._childrenField = value;
+    }
+    /**
+     * The field name which holds the data items of the child component.
+     */
+    get childrenField() {
+        return this._childrenField;
     }
     /**
      * @hidden
@@ -5166,15 +5130,14 @@ class FlatDataBindingDirective extends FilteringBase {
     set isVisible(fn) {
         this.component.isVisible = fn;
     }
-    /**
-     * @hidden
-     */
     ngOnInit() {
-        if (isPresent(this.parentIdField) && isPresent(this.idField)) {
-            const fetchChildren = (node) => findChildren(getter(this.parentIdField), this.originalData || [], getter(this.idField)(node));
-            this.component.hasChildren = (node) => fetchChildren(node).length > 0;
-            this.component.children = (node) => of(fetchChildren(node));
-            this.component.editService = new FlatEditingService(this);
+        if (isPresent(this.childrenField)) {
+            this.component.children = item => of(getter(this.childrenField)(item));
+            this.component.hasChildren = item => {
+                const children = getter(this.childrenField)(item);
+                return Boolean(children && children.length);
+            };
+            this.component.editService = new HierarchyEditingService(this);
             this.component.filterChange.subscribe(this.handleFilterChange.bind(this));
             if (this.component.filter) {
                 this.handleFilterChange(this.component.filter);
@@ -5184,11 +5147,8 @@ class FlatDataBindingDirective extends FilteringBase {
             }
         }
     }
-    /**
-     * @hidden
-     */
     ngOnChanges(changes) {
-        if (isChanged('parentIdField', changes, false)) {
+        if (isChanged('childrenField', changes, false)) {
             this.nodes = this.originalData;
             this.updateNodes(this.originalData);
         }
@@ -5205,81 +5165,29 @@ class FlatDataBindingDirective extends FilteringBase {
      */
     updateNodes(values) {
         this.originalData = values || [];
-        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);
-            this.updateVisibleNodes(this.filterData);
-        }
-        else {
-            this.component.nodes = this.originalData.slice(0);
-        }
+        this.filterData = mapToWrappers(values, this.childrenField) || [];
+        this.updateVisibleNodes(this.filterData);
     }
 }
-FlatDataBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FlatDataBindingDirective, deps: [{ token: DataBoundComponent }], target: i0.ɵɵFactoryTarget.Directive });
-FlatDataBindingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: FlatDataBindingDirective, selector: "[kendoTreeViewFlatDataBinding]", inputs: { nodes: "nodes", parentIdField: "parentIdField", idField: "idField", loadOnDemand: "loadOnDemand", isVisible: "isVisible" }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FlatDataBindingDirective, decorators: [{
+HierarchyBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HierarchyBindingDirective, deps: [{ token: DataBoundComponent }, { token: DragAndDropDirective, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+HierarchyBindingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: HierarchyBindingDirective, isStandalone: true, selector: "[kendoTreeViewHierarchyBinding]", inputs: { childrenField: "childrenField", nodes: "nodes", isVisible: "isVisible", loadOnDemand: "loadOnDemand" }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HierarchyBindingDirective, decorators: [{
             type: Directive,
-            args: [{ selector: "[kendoTreeViewFlatDataBinding]" }]
-        }], ctorParameters: function () { return [{ type: DataBoundComponent }]; }, propDecorators: { nodes: [{
-                type: Input
-            }], parentIdField: [{
-                type: Input
-            }], idField: [{
+            args: [{
+                    selector: '[kendoTreeViewHierarchyBinding]',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: DataBoundComponent }, { type: DragAndDropDirective, decorators: [{
+                    type: Optional
+                }, {
+                    type: Host
+                }] }]; }, propDecorators: { childrenField: [{
                 type: Input
-            }], loadOnDemand: [{
+            }], nodes: [{
                 type: Input
             }], isVisible: [{
                 type: Input
-            }] } });
-
-/**
- * A directive which enables the update of the initially provided data array during drag-and-drop.
- *
- * Either use this directive in combination with one of the data binding directives ([`kendoTreeViewHierarchyBinding`]({% slug api_treeview_hierarchybindingdirective %})
- * or [`kendoTreeViewFlatDataBinding`]({% slug api_treeview_flatdatabindingdirective %})) which set their own edit handlers, or provide
- * your own [`editService`]({% slug api_treeview_editservice %}) to this directive. The latter subscribes to and calls the
- * [`addItem`]({% slug api_treeview_treeviewcomponent %}#toc-additem) and [`removeItem`]({% slug api_treeview_treeviewcomponent %}#toc-removeitem)
- * handlers when the corresponding events are triggered by the TreeView component.
- */
-class DragAndDropEditingDirective {
-    constructor(treeview) {
-        this.treeview = treeview;
-        this.subscriptions = new Subscription();
-        this.subscriptions.add(this.treeview.addItem.subscribe(this.handleAdd.bind(this)));
-        this.subscriptions.add(this.treeview.removeItem.subscribe(this.handleRemove.bind(this)));
-    }
-    /**
-     * Specifies the handlers called on drag-and-drop [`addItem`]({% slug api_treeview_treeviewcomponent %}#toc-additem)
-     * and [`removeItem`]({% slug api_treeview_treeviewcomponent %}#toc-removeitem) events.
-     */
-    set editService(service) {
-        this.treeview.editService = service;
-    }
-    ngOnDestroy() {
-        this.subscriptions.unsubscribe();
-    }
-    handleAdd(args) {
-        if (!isPresent(this.treeview.editService)) {
-            throw new Error('No `editService` provided. Either provide your own implementation or use this directive in combination with one of the data binding directives (`kendoTreeViewHierarchyBinding` or `kendoTreeViewFlatDataBinding`).');
-        }
-        this.treeview.editService.add(args);
-    }
-    handleRemove(args) {
-        if (!isPresent(this.treeview.editService)) {
-            throw new Error('No `editService` provided. Either provide your own implementation or use this directive in combination with one of the data binding directives (`kendoTreeViewHierarchyBinding` or `kendoTreeViewFlatDataBinding`).');
-        }
-        this.treeview.editService.remove(args);
-    }
-}
-DragAndDropEditingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DragAndDropEditingDirective, deps: [{ token: TreeViewComponent }], target: i0.ɵɵFactoryTarget.Directive });
-DragAndDropEditingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DragAndDropEditingDirective, selector: "[kendoTreeViewDragAndDropEditing]", inputs: { editService: "editService" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DragAndDropEditingDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kendoTreeViewDragAndDropEditing]'
-                }]
-        }], ctorParameters: function () { return [{ type: TreeViewComponent }]; }, propDecorators: { editService: [{
+            }], loadOnDemand: [{
                 type: Input
             }] } });
 
@@ -5360,11 +5268,12 @@ class LoadMoreDirective {
     }
 }
 LoadMoreDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LoadMoreDirective, deps: [{ token: TreeViewComponent }], target: i0.ɵɵFactoryTarget.Directive });
-LoadMoreDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: LoadMoreDirective, selector: "[kendoTreeViewLoadMore]", inputs: { loadMoreNodes: ["kendoTreeViewLoadMore", "loadMoreNodes"], pageSize: "pageSize", totalRootNodes: "totalRootNodes", totalField: "totalField" }, usesOnChanges: true, ngImport: i0 });
+LoadMoreDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: LoadMoreDirective, isStandalone: true, selector: "[kendoTreeViewLoadMore]", inputs: { loadMoreNodes: ["kendoTreeViewLoadMore", "loadMoreNodes"], pageSize: "pageSize", totalRootNodes: "totalRootNodes", totalField: "totalField" }, usesOnChanges: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LoadMoreDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[kendoTreeViewLoadMore]'
+                    selector: '[kendoTreeViewLoadMore]',
+                    standalone: true
                 }]
         }], ctorParameters: function () { return [{ type: TreeViewComponent }]; }, propDecorators: { loadMoreNodes: [{
                 type: Input,
@@ -5390,7 +5299,7 @@ class CustomMessagesComponent extends TreeViewMessages {
     }
 }
 CustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-CustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CustomMessagesComponent, selector: "kendo-treeview-messages", providers: [
+CustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CustomMessagesComponent, isStandalone: true, selector: "kendo-treeview-messages", providers: [
         {
             provide: TreeViewMessages,
             useExisting: forwardRef(() => CustomMessagesComponent)
@@ -5406,106 +5315,143 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         }
                     ],
                     selector: 'kendo-treeview-messages',
-                    template: ``
+                    template: ``,
+                    standalone: true
                 }]
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
 
-const COMPONENT_DIRECTIVES = [
-    TreeViewComponent,
-    TreeViewGroupComponent,
-    TreeViewItemDirective,
-    TreeViewItemContentDirective,
-    NodeTemplateDirective,
-    CheckDirective,
-    DisableDirective,
-    ExpandDirective,
-    SelectDirective,
-    HierarchyBindingDirective,
-    LoadingIndicatorDirective,
-    FlatDataBindingDirective,
-    DragAndDropDirective,
-    DragClueTemplateDirective,
-    DragClueComponent,
-    DropHintTemplateDirective,
-    DropHintComponent,
-    DragAndDropEditingDirective,
-    LoadMoreDirective,
-    LoadMoreButtonTemplateDirective,
-    LocalizedMessagesDirective,
-    CustomMessagesComponent,
-];
 /**
- * @hidden
+ * A directive which manages the in-memory selection state of the TreeView node
+ * ([see example]({% slug selection_treeview %})).
  */
-class SharedModule {
+class SelectDirective {
+    constructor(treeView, navigationService) {
+        this.treeView = treeView;
+        this.navigationService = navigationService;
+        /**
+         * Fires when the `selectedKeys` collection was updated.
+         */
+        this.selectedKeysChange = new EventEmitter();
+        this.subscriptions = new Subscription();
+        this.selectActions = {
+            'multiple': (e) => this.selectMultiple(e),
+            'single': (e) => this.selectSingle(e)
+        };
+        /**
+         * Reflectes the internal `selectedKeys` state.
+         */
+        this.state = new Set();
+        this.subscriptions.add(this.treeView.selectionChange.subscribe(this.select.bind(this)));
+        this.treeView.isSelected = (dataItem, index) => (this.state.has(this.itemKey({ dataItem, index })));
+        this.navigationService.deselectAllButCurrentItem.subscribe((node) => {
+            this.selectSingle(node);
+        });
+    }
+    /**
+     * @hidden
+     */
+    set isSelected(value) {
+        this.treeView.isSelected = value;
+    }
+    get getAriaMultiselectable() {
+        return this.options.mode === 'multiple';
+    }
+    get options() {
+        const defaultOptions = {
+            enabled: true,
+            mode: 'single'
+        };
+        if (!isPresent(this.selection) || typeof this.selection === 'string') {
+            return defaultOptions;
+        }
+        const selectionSettings = isBoolean(this.selection) ? { enabled: this.selection } : this.selection;
+        return Object.assign(defaultOptions, selectionSettings);
+    }
+    ngOnChanges(changes) {
+        if (isChanged('selectedKeys', changes, false) && changes['selectedKeys'].currentValue !== this.lastChange) {
+            this.state = new Set(changes['selectedKeys'].currentValue);
+        }
+        const isSelectionBooleanTrue = typeof this.selection === 'boolean' && this.selection;
+        this.navigationService.selection = isSelectionBooleanTrue ? 'single' : this.selection?.mode;
+    }
+    ngOnDestroy() {
+        this.subscriptions.unsubscribe();
+    }
+    itemKey(e) {
+        if (!this.selectKey) {
+            return e.index;
+        }
+        if (typeof this.selectKey === 'string') {
+            return e.dataItem[this.selectKey];
+        }
+        if (typeof this.selectKey === 'function') {
+            return this.selectKey(e);
+        }
+    }
+    select(e) {
+        const { enabled, mode } = this.options;
+        const performSelection = this.selectActions[mode] || noop;
+        if (!enabled) {
+            return;
+        }
+        performSelection(e);
+    }
+    selectSingle(node) {
+        const key = this.itemKey(node);
+        if (!this.state.has(key)) {
+            this.state.clear();
+            this.state.add(key);
+            this.notify();
+        }
+    }
+    selectMultiple(node) {
+        const key = this.itemKey(node);
+        const isSelected = this.state.has(key);
+        if (!isPresent(key)) {
+            return;
+        }
+        if (isSelected) {
+            this.state.delete(key);
+        }
+        else {
+            this.state.add(key);
+        }
+        this.notify();
+    }
+    notify() {
+        this.lastChange = Array.from(this.state);
+        this.selectedKeysChange.emit(this.lastChange);
+    }
 }
-SharedModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: SharedModule, declarations: [TreeViewComponent,
-        TreeViewGroupComponent,
-        TreeViewItemDirective,
-        TreeViewItemContentDirective,
-        NodeTemplateDirective,
-        CheckDirective,
-        DisableDirective,
-        ExpandDirective,
-        SelectDirective,
-        HierarchyBindingDirective,
-        LoadingIndicatorDirective,
-        FlatDataBindingDirective,
-        DragAndDropDirective,
-        DragClueTemplateDirective,
-        DragClueComponent,
-        DropHintTemplateDirective,
-        DropHintComponent,
-        DragAndDropEditingDirective,
-        LoadMoreDirective,
-        LoadMoreButtonTemplateDirective,
-        LocalizedMessagesDirective,
-        CustomMessagesComponent], imports: [CommonModule,
-        InputsModule,
-        IconsModule], exports: [TreeViewComponent,
-        TreeViewGroupComponent,
-        TreeViewItemDirective,
-        TreeViewItemContentDirective,
-        NodeTemplateDirective,
-        CheckDirective,
-        DisableDirective,
-        ExpandDirective,
-        SelectDirective,
-        HierarchyBindingDirective,
-        LoadingIndicatorDirective,
-        FlatDataBindingDirective,
-        DragAndDropDirective,
-        DragClueTemplateDirective,
-        DragClueComponent,
-        DropHintTemplateDirective,
-        DropHintComponent,
-        DragAndDropEditingDirective,
-        LoadMoreDirective,
-        LoadMoreButtonTemplateDirective,
-        LocalizedMessagesDirective,
-        CustomMessagesComponent] });
-SharedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SharedModule, imports: [CommonModule,
-        InputsModule,
-        IconsModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SharedModule, decorators: [{
-            type: NgModule,
+SelectDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SelectDirective, deps: [{ token: TreeViewComponent }, { token: NavigationService }], target: i0.ɵɵFactoryTarget.Directive });
+SelectDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: SelectDirective, isStandalone: true, selector: "[kendoTreeViewSelectable]", inputs: { isSelected: "isSelected", selectKey: ["selectBy", "selectKey"], selection: ["kendoTreeViewSelectable", "selection"], selectedKeys: "selectedKeys" }, outputs: { selectedKeysChange: "selectedKeysChange" }, host: { properties: { "attr.aria-multiselectable": "this.getAriaMultiselectable" } }, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SelectDirective, decorators: [{
+            type: Directive,
             args: [{
-                    declarations: [COMPONENT_DIRECTIVES],
-                    exports: [COMPONENT_DIRECTIVES],
-                    imports: [
-                        CommonModule,
-                        InputsModule,
-                        IconsModule
-                    ],
-                    entryComponents: [
-                        DragClueComponent,
-                        DropHintComponent
-                    ]
+                    selector: '[kendoTreeViewSelectable]',
+                    standalone: true
                 }]
-        }] });
+        }], ctorParameters: function () { return [{ type: TreeViewComponent }, { type: NavigationService }]; }, propDecorators: { isSelected: [{
+                type: Input
+            }], selectKey: [{
+                type: Input,
+                args: ['selectBy']
+            }], selection: [{
+                type: Input,
+                args: ['kendoTreeViewSelectable']
+            }], selectedKeys: [{
+                type: Input
+            }], selectedKeysChange: [{
+                type: Output
+            }], getAriaMultiselectable: [{
+                type: HostBinding,
+                args: ['attr.aria-multiselectable']
+            }] } });
 
-const EXPORTS = [
+/**
+ * Utility array that contains all `@progress/kendo-angular-treeview` related components and directives
+ */
+const KENDO_TREEVIEW = [
     TreeViewComponent,
     NodeTemplateDirective,
     CheckDirective,
@@ -5520,37 +5466,40 @@ const EXPORTS = [
     DragAndDropEditingDirective,
     LoadMoreDirective,
     LoadMoreButtonTemplateDirective,
-    LocalizedMessagesDirective,
-    CustomMessagesComponent,
+    CustomMessagesComponent
 ];
+
+//IMPORTANT: NgModule export kept for backwards compatibility
 /**
  * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi']) definition for the TreeView component.
  */
 class TreeViewModule {
 }
 TreeViewModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TreeViewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-TreeViewModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: TreeViewModule, imports: [SharedModule], exports: [TreeViewComponent,
-        NodeTemplateDirective,
-        CheckDirective,
-        DisableDirective,
-        ExpandDirective,
-        SelectDirective,
-        HierarchyBindingDirective,
-        FlatDataBindingDirective,
-        DragAndDropDirective,
-        DragClueTemplateDirective,
-        DropHintTemplateDirective,
-        DragAndDropEditingDirective,
-        LoadMoreDirective,
-        LoadMoreButtonTemplateDirective,
-        LocalizedMessagesDirective,
-        CustomMessagesComponent] });
-TreeViewModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TreeViewModule, imports: [SharedModule] });
+TreeViewModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: TreeViewModule, imports: [TreeViewComponent, NodeTemplateDirective, CheckDirective, DisableDirective, ExpandDirective, SelectDirective, HierarchyBindingDirective, FlatDataBindingDirective, DragAndDropDirective, DragClueTemplateDirective, DropHintTemplateDirective, DragAndDropEditingDirective, LoadMoreDirective, LoadMoreButtonTemplateDirective, CustomMessagesComponent], exports: [TreeViewComponent, NodeTemplateDirective, CheckDirective, DisableDirective, ExpandDirective, SelectDirective, HierarchyBindingDirective, FlatDataBindingDirective, DragAndDropDirective, DragClueTemplateDirective, DropHintTemplateDirective, DragAndDropEditingDirective, LoadMoreDirective, LoadMoreButtonTemplateDirective, CustomMessagesComponent] });
+TreeViewModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TreeViewModule, providers: [
+        IconsService,
+        PopupService,
+        ResizeBatchService,
+        DialogContainerService,
+        DialogService,
+        WindowService,
+        WindowContainerService
+    ], imports: [TreeViewComponent, CustomMessagesComponent] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TreeViewModule, decorators: [{
             type: NgModule,
             args: [{
-                    exports: [EXPORTS],
-                    imports: [SharedModule]
+                    imports: [...KENDO_TREEVIEW],
+                    exports: [...KENDO_TREEVIEW],
+                    providers: [
+                        IconsService,
+                        PopupService,
+                        ResizeBatchService,
+                        DialogContainerService,
+                        DialogService,
+                        WindowService,
+                        WindowContainerService
+                    ]
                 }]
         }] });
 
@@ -5558,5 +5507,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { CheckDirective, CustomMessagesComponent, DataBoundComponent, DisableDirective, DragAndDropDirective, DragAndDropEditingDirective, DragClueService, DragClueTemplateDirective, DropAction, DropHintService, DropHintTemplateDirective, DropPosition, ExpandDirective, ExpandableComponent, FlatDataBindingDirective, HierarchyBindingDirective, LoadMoreButtonTemplateDirective, LoadMoreDirective, LocalizedMessagesDirective, NodeTemplateDirective, SelectDirective, TreeItemDragEvent, TreeItemDragStartEvent, TreeItemDropEvent, TreeViewComponent, TreeViewModule };
+export { CheckDirective, CustomMessagesComponent, DataBoundComponent, DisableDirective, DragAndDropDirective, DragAndDropEditingDirective, DragClueService, DragClueTemplateDirective, DropAction, DropHintService, DropHintTemplateDirective, DropPosition, ExpandDirective, ExpandableComponent, FlatDataBindingDirective, HierarchyBindingDirective, KENDO_TREEVIEW, LoadMoreButtonTemplateDirective, LoadMoreDirective, LocalizedMessagesDirective, NodeTemplateDirective, SelectDirective, TreeItemDragEvent, TreeItemDragStartEvent, TreeItemDropEvent, TreeViewComponent, TreeViewModule };