@progress/kendo-angular-treeview 17.0.0-develop.9 → 17.0.1-develop.1

package/README.md

@@ -1,33 +1,46 @@
-<a href="https://www.telerik.com/kendo-angular-ui/" target="_blank">
+<a href="https://www.telerik.com/kendo-angular-ui/components/treeview" target="_blank">
 <img width="631" src="https://www.telerik.com/kendo-angular-ui/npm-banner.svg">
 </a>
 
 ## Kendo UI for Angular TreeView Component
 
-> **Important**
-> * This package is part of [Kendo UI for Angular](https://www.telerik.com/kendo-angular-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-treeview)&mdash;a commercial library.
-> * You will need to install a license key when adding the package to your project. For more information, please refer to the [Kendo UI for Angular My License page](https://www.telerik.com/kendo-angular-ui/my-license?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-treeview).
-> * To receive a license key, you need to either [purchase a license](https://www.telerik.com/purchase/kendo-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-treeview) or register for a [free trial](https://www.telerik.com/download-login-v2-kendo-angular-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-treeview). Doing so indicates that you [accept the Kendo UI for Angular License Agreement](https://www.telerik.com/purchase/license-agreement/kendo-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-treeview).
-> * The 30-day free trial gives you access to all the Kendo UI for Angular components and their full functionality. Additionally, for the period of your license, you get access to our legendary technical support provided directly by the Kendo UI for Angular dev team!
->
-> [Start using Kendo UI for Angular](https://www.telerik.com/download-login-v2-kendo-angular-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-treeview) and speed up your development process!
+> * This package is part of the [Kendo UI for Angular](https://www.telerik.com/kendo-angular-ui/)&mdash;a commercial UI library.
+> * You must [install a license key](https://www.telerik.com/kendo-angular-ui/my-license) when adding the package to your project. To receive a license key, either [purchase a license](https://www.telerik.com/purchase/kendo-ui) or register for a [free trial](https://www.telerik.com/download-login-v2-kendo-angular-ui).
+> * The 30-day free trial gives you access to all the Kendo UI for Angular components and their full functionality. Additionally, for the period of your license, you get access to our legendary technical support provided directly by the Kendo UI for Angular team!
 
-Kendo UI for Angular is a commercial UI library designed and built for developing business applications with Angular. Every UI component in the Kendo UI for Angular suite has been built from the ground-up specifically for Angular.
+The Kendo UI for Angular TreeView includes a comprehensive set of ready-to-use features covering everything from filtering, node selection and rendering checkboxes to dragging and dropping of nodes and persisting the disabled and expanded states.
+
+## Key Features
+
+Among the many features which the Kendo UI for Angular TreeView delivers are:
+
+* Data Binding&mdash;The TreeView features built-in data binding directives, which enable you to work with various types of collections and help you visualize a hierarchical list. [Read more about the data binding functionality of the TreeView...](https://www.telerik.com/kendo-angular-ui/components/treeview/data-binding)
+* Filtering&mdash;The TreeView provides options for displaying only those nodes which meet specified criteria and for additionally customizing the filtering logic. [Read more about filtering the TreeView nodes...](https://www.telerik.com/kendo-angular-ui/components/treeview/filtering)
+* Load More&mdash;The TreeView supports a **Load more** button, which means that the component can render the next portion of data on demand. This approach boosts the performance of the component when it has to display a large number of nodes. [Read more about the **Load more** button feature of the TreeView...](https://www.telerik.com/kendo-angular-ui/components/treeview/load-more-button)
+* Dragging and Dropping&mdash;The TreeView provides built-in directives, which enable you to drag and drop nodes inside the TreeView  [Read more about the drag and drop feature of the TreeView...](https://www.telerik.com/kendo-angular-ui/components/treeview/drag-and-drop)
+* Selection and Checkboxes&mdash;The TreeView provides built-in directives, which allow you to select a single or multiple nodes either by using node checkboxes or clicking the nodes itself. Read more about the [selection feature](https://www.telerik.com/kendo-angular-ui/components/treeview/selection) and [checkbox feature](https://www.telerik.com/kendo-angular-ui/components/treeview/checkboxes) of the TreeView.
+* Node Template&mdash;You can visually customize the content of the TreeView nodes by utilizing the ready-to-use node template. [Read more about the node template of the TreeView...](https://www.telerik.com/kendo-angular-ui/components/treeview/node-template)
+* Persisting the State&mdash;You can control which nodes to be expanded and collapsed or to render the nodes in their disabled state so that the users will not be able to interact with them. Read more about how to persist the [disabled state](https://www.telerik.com/kendo-angular-ui/components/treeview/disabled-state) and [expanded state](https://www.telerik.com/kendo-angular-ui/components/treeview/expand-state) of the TreeView.
+* Appearance&mdash;You can use the options provided by the TreeView component to customize its appearance. [Read more about the customizable appearance of the TreeView...](https://www.telerik.com/kendo-angular-ui/components/treeview/appearance)
+* Globalization&mdash;The Kendo UI for Angular TreeView supports globalization to ensure that it can fit well in any application, no matter what languages and locales need to be supported. Additionally, the TreeView supports rendering in a right-to-left (RTL) direction. [Read more about the globalization of the TreeView...](https://www.telerik.com/kendo-angular-ui/components/treeview/globalization)
+* Accessibility&mdash;The TreeView is accessible for screen readers and supports WAI-ARIA attributes. [Read more about the accessibility of the TreeView...](https://www.telerik.com/kendo-angular-ui/components/treeview/accessibility)
+
+## Support Options
+
+For any issues you might encounter while working with the Kendo UI for Angular TreeView, you have the following support channels available:
+
+* Industry-leading technical support&mdash;Kendo UI for Angular paid license holders and users with an active (free) trial license can take advantage of our outstanding customer support. To submit a ticket, use the [dedicated Kendo UI for Angular support system](https://www.telerik.com/account/support-center/contact-us/technical-support).
+* Product forums&mdash;The [Kendo UI for Angular forums](https://www.telerik.com/forums/kendo-angular-ui) are part of the free support you can get from the community and from the Kendo UI for Angular team.
+* Feedback portal&mdash;The [Kendo UI for Angular feedback portal](https://feedback.telerik.com/kendo-angular-ui) is where you can request and vote for new features to be added.
 
 ## Resources
 
-* [Get Started with Kendo UI for Angular (requires trial registration)](https://www.telerik.com/kendo-angular-ui/getting-started)
+* [Getting Started with Kendo UI for Angular](https://www.telerik.com/kendo-angular-ui/getting-started)
+* [Getting Started with the Kendo UI for Angular TreeView](https://www.telerik.com/kendo-angular-ui/components/treeview/installation/getting-started)
 * [Demos, documentation, and component reference](https://www.telerik.com/kendo-angular-ui/components)
 * [Blogs](http://www.telerik.com/blogs/kendo-ui)
 * [Kendo UI for Angular pricing and licensing](https://www.telerik.com/purchase/kendo-ui)
 
-## Questions and Feedback
-
-* [Official Forums](https://www.telerik.com/forums/kendo-angular-ui)
-* [GitHub Issues](https://github.com/telerik/kendo-angular/issues)
-* [Feedback Portal](https://feedback.telerik.com/kendo-angular-ui)
-* [StackOverflow](https://stackoverflow.com/questions/tagged/kendo-ui-angular2)
-
 *Copyright © 2024 Progress Software Corporation and/or one of its subsidiaries or affiliates. All rights reserved.*
 
 *Progress, Telerik, and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries.*

package/check-mode.d.ts

@@ -12,4 +12,4 @@
  * {% embed_file shared/main.ts %}
  * {% endmeta %}
  */
-export declare type CheckMode = "single" | "multiple";
+export type CheckMode = "single" | "multiple";

package/check.directive.d.ts

@@ -69,5 +69,5 @@ export declare class CheckDirective implements OnChanges, OnDestroy {
     private notify;
     private addCheckedItemsChildren;
     static ɵfac: i0.ɵɵFactoryDeclaration<CheckDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<CheckDirective, "[kendoTreeViewCheckable]", never, { "isChecked": "isChecked"; "checkKey": "checkBy"; "checkedKeys": "checkedKeys"; "checkable": "kendoTreeViewCheckable"; }, { "checkedKeysChange": "checkedKeysChange"; }, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<CheckDirective, "[kendoTreeViewCheckable]", never, { "isChecked": { "alias": "isChecked"; "required": false; }; "checkKey": { "alias": "checkBy"; "required": false; }; "checkedKeys": { "alias": "checkedKeys"; "required": false; }; "checkable": { "alias": "kendoTreeViewCheckable"; "required": false; }; }, { "checkedKeysChange": "checkedKeysChange"; }, never, never, true, never>;
 }

package/checkbox/checked-state.d.ts

@@ -5,4 +5,4 @@
 /**
  * The checked state of the CheckBox component.
  */
-export declare type CheckedState = 'none' | 'indeterminate' | 'checked';
+export type CheckedState = 'none' | 'indeterminate' | 'checked';

package/disable.directive.d.ts

@@ -29,5 +29,5 @@ export declare class DisableDirective implements OnChanges {
     ngOnChanges(changes?: any): void;
     protected itemKey(e: any): any;
     static ɵfac: i0.ɵɵFactoryDeclaration<DisableDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DisableDirective, "[kendoTreeViewDisable]", never, { "isDisabled": "isDisabled"; "disableKey": "kendoTreeViewDisable"; "disabledKeys": "disabledKeys"; }, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DisableDirective, "[kendoTreeViewDisable]", never, { "isDisabled": { "alias": "isDisabled"; "required": false; }; "disableKey": { "alias": "kendoTreeViewDisable"; "required": false; }; "disabledKeys": { "alias": "disabledKeys"; "required": false; }; }, {}, never, never, true, never>;
 }

package/drag-and-drop/drag-and-drop-editing.directive.d.ts

@@ -28,5 +28,5 @@ export declare class DragAndDropEditingDirective implements OnDestroy {
     private handleAdd;
     private handleRemove;
     static ɵfac: i0.ɵɵFactoryDeclaration<DragAndDropEditingDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DragAndDropEditingDirective, "[kendoTreeViewDragAndDropEditing]", never, { "editService": "editService"; }, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DragAndDropEditingDirective, "[kendoTreeViewDragAndDropEditing]", never, { "editService": { "alias": "editService"; "required": false; }; }, {}, never, never, true, never>;
 }

package/drag-and-drop/drag-and-drop.directive.d.ts

@@ -113,5 +113,5 @@ export declare class DragAndDropDirective implements AfterContentInit, OnDestroy
     private shouldInitiateDragStart;
     private initiateDragStart;
     static ɵfac: i0.ɵɵFactoryDeclaration<DragAndDropDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DragAndDropDirective, "[kendoTreeViewDragAndDrop]", never, { "allowCopy": "allowCopy"; "dropZoneTreeViews": "dropZoneTreeViews"; "startDragAfter": "startDragAfter"; "autoScroll": "autoScroll"; }, {}, ["dragClueTemplate", "dropHintTemplate"], never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DragAndDropDirective, "[kendoTreeViewDragAndDrop]", never, { "allowCopy": { "alias": "allowCopy"; "required": false; }; "dropZoneTreeViews": { "alias": "dropZoneTreeViews"; "required": false; }; "startDragAfter": { "alias": "startDragAfter"; "required": false; }; "autoScroll": { "alias": "autoScroll"; "required": false; }; }, {}, ["dragClueTemplate", "dropHintTemplate"], never, true, never>;
 }

package/{esm2020 → esm2022}/check.directive.mjs

@@ -32,36 +32,33 @@ const matchKey = index => k => {
  * ([see example]({% slug checkboxes_treeview %})).
  */
 export class CheckDirective {
-    constructor(treeView, zone) {
-        this.treeView = treeView;
-        this.zone = zone;
-        /**
-         * Fires when the `checkedKeys` collection was updated.
-         */
-        this.checkedKeysChange = new EventEmitter();
-        this.subscriptions = new Subscription();
-        this.checkActions = {
-            'multiple': (e) => this.checkMultiple(e),
-            'single': (e) => this.checkSingle(e)
-        };
-        /**
-         * Reflectes the internal `checkedKeys` state.
-         */
-        this.state = new Set();
-        this.subscriptions.add(this.treeView.checkedChange
-            .subscribe((e) => this.check(e)));
-        const expandedItems = [];
-        this.subscriptions.add(this.treeView.childrenLoaded
-            .pipe(filter(() => this.options.checkChildren && this.treeView.loadOnDemand), tap(item => expandedItems.push(item)), switchMap(() => this.zone.onStable.pipe(take(1))))
-            .subscribe(() => this.addCheckedItemsChildren(expandedItems)));
-        this.treeView.isChecked = this.isItemChecked.bind(this);
-    }
+    treeView;
+    zone;
     /**
      * @hidden
      */
     set isChecked(value) {
         this.treeView.isChecked = value;
     }
+    /**
+     * Defines the item key that will be stored in the `checkedKeys` collection.
+     */
+    checkKey;
+    /**
+     * Defines the collection that will store the checked keys
+     * ([see example]({% slug checkboxes_treeview %})).
+     */
+    checkedKeys;
+    /**
+     * Defines the checkable settings ([see example]({% slug checkboxes_treeview %}#toc-setup)).
+     * If no value is provided, the default [`CheckableSettings`]({% slug api_treeview_checkablesettings %}) are applied.
+     */
+    checkable;
+    /**
+     * Fires when the `checkedKeys` collection was updated.
+     */
+    checkedKeysChange = new EventEmitter();
+    subscriptions = new Subscription();
     get options() {
         const defaultOptions = {
             checkChildren: true,
@@ -78,6 +75,30 @@ export class CheckDirective {
             : this.checkable;
         return Object.assign(defaultOptions, checkSettings);
     }
+    checkActions = {
+        'multiple': (e) => this.checkMultiple(e),
+        'single': (e) => this.checkSingle(e)
+    };
+    /**
+     * Reflectes the internal `checkedKeys` state.
+     */
+    state = new Set();
+    clickSubscription;
+    /**
+     * Holds the last emitted `checkedKeys` collection.
+     */
+    lastChange;
+    constructor(treeView, zone) {
+        this.treeView = treeView;
+        this.zone = zone;
+        this.subscriptions.add(this.treeView.checkedChange
+            .subscribe((e) => this.check(e)));
+        const expandedItems = [];
+        this.subscriptions.add(this.treeView.childrenLoaded
+            .pipe(filter(() => this.options.checkChildren && this.treeView.loadOnDemand), tap(item => expandedItems.push(item)), switchMap(() => this.zone.onStable.pipe(take(1))))
+            .subscribe(() => this.addCheckedItemsChildren(expandedItems)));
+        this.treeView.isChecked = this.isItemChecked.bind(this);
+    }
     ngOnChanges(changes) {
         if (changes.checkable) {
             this.treeView.checkboxes = this.options.enabled;
@@ -275,10 +296,10 @@ export class CheckDirective {
             this.zone.run(() => this.notify());
         }
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CheckDirective, deps: [{ token: i1.TreeViewComponent }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: CheckDirective, isStandalone: true, selector: "[kendoTreeViewCheckable]", inputs: { isChecked: "isChecked", checkKey: ["checkBy", "checkKey"], checkedKeys: "checkedKeys", checkable: ["kendoTreeViewCheckable", "checkable"] }, outputs: { checkedKeysChange: "checkedKeysChange" }, usesOnChanges: true, ngImport: i0 });
 }
-CheckDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CheckDirective, deps: [{ token: i1.TreeViewComponent }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CheckDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoTreeViewCheckable]',

package/{esm2020 → esm2022}/data-bound-component.mjs

@@ -11,9 +11,9 @@ import * as i0 from "@angular/core";
  * the TreeView or the DropDownTree components.
  */
 export class DataBoundComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DataBoundComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DataBoundComponent });
 }
-DataBoundComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DataBoundComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-DataBoundComponent.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DataBoundComponent });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DataBoundComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DataBoundComponent, decorators: [{
             type: Injectable
         }] });

package/{esm2020 → esm2022}/data-change-notification.service.mjs

@@ -7,9 +7,7 @@ import { EventEmitter } from '@angular/core';
  * @hidden
  */
 export class DataChangeNotificationService {
-    constructor() {
-        this.changes = new EventEmitter();
-    }
+    changes = new EventEmitter();
     notify() {
         this.changes.emit();
     }

package/{esm2020 → esm2022}/disable.directive.mjs

@@ -11,21 +11,27 @@ import * as i1 from "./treeview.component";
  * ([see example]({% slug disabledstate_treeview %})).
  */
 export class DisableDirective {
-    constructor(treeView, cdr) {
-        this.treeView = treeView;
-        this.cdr = cdr;
-        /**
-         * Defines the collection that will store the disabled keys.
-         */
-        this.disabledKeys = [];
-        this.treeView.isDisabled = (dataItem, index) => (this.disabledKeys.indexOf(this.itemKey({ dataItem, index })) > -1);
-    }
+    treeView;
+    cdr;
     /**
      * @hidden
      */
     set isDisabled(value) {
         this.treeView.isDisabled = value;
     }
+    /**
+     * Defines the item key that will be stored in the `disabledKeys` collection.
+     */
+    disableKey;
+    /**
+     * Defines the collection that will store the disabled keys.
+     */
+    disabledKeys = [];
+    constructor(treeView, cdr) {
+        this.treeView = treeView;
+        this.cdr = cdr;
+        this.treeView.isDisabled = (dataItem, index) => (this.disabledKeys.indexOf(this.itemKey({ dataItem, index })) > -1);
+    }
     ngOnChanges(changes = {}) {
         const { disabledKeys } = changes;
         if (disabledKeys && !disabledKeys.firstChange) {
@@ -43,10 +49,10 @@ export class DisableDirective {
             return this.disableKey(e);
         }
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DisableDirective, deps: [{ token: i1.TreeViewComponent }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DisableDirective, isStandalone: true, selector: "[kendoTreeViewDisable]", inputs: { isDisabled: "isDisabled", disableKey: ["kendoTreeViewDisable", "disableKey"], disabledKeys: "disabledKeys" }, usesOnChanges: true, ngImport: i0 });
 }
-DisableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DisableDirective, deps: [{ token: i1.TreeViewComponent }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
-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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DisableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoTreeViewDisable]',

package/{esm2020 → esm2022}/drag-and-drop/drag-and-drop-editing.directive.mjs

@@ -18,12 +18,7 @@ import * as i1 from "../treeview.component";
  * handlers when the corresponding events are triggered by the TreeView component.
  */
 export 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)));
-    }
+    treeview;
     /**
      * Specifies the handlers called on drag-and-drop [`addItem`]({% slug api_treeview_treeviewcomponent %}#toc-additem)
      * and [`removeItem`]({% slug api_treeview_treeviewcomponent %}#toc-removeitem) events.
@@ -31,6 +26,12 @@ export class DragAndDropEditingDirective {
     set editService(service) {
         this.treeview.editService = service;
     }
+    subscriptions = new Subscription();
+    constructor(treeview) {
+        this.treeview = treeview;
+        this.subscriptions.add(this.treeview.addItem.subscribe(this.handleAdd.bind(this)));
+        this.subscriptions.add(this.treeview.removeItem.subscribe(this.handleRemove.bind(this)));
+    }
     ngOnDestroy() {
         this.subscriptions.unsubscribe();
     }
@@ -46,10 +47,10 @@ export class DragAndDropEditingDirective {
         }
         this.treeview.editService.remove(args);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DragAndDropEditingDirective, deps: [{ token: i1.TreeViewComponent }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DragAndDropEditingDirective, isStandalone: true, selector: "[kendoTreeViewDragAndDropEditing]", inputs: { editService: "editService" }, ngImport: i0 });
 }
-DragAndDropEditingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DragAndDropEditingDirective, deps: [{ token: i1.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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DragAndDropEditingDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoTreeViewDragAndDropEditing]',

package/{esm2020 → esm2022}/drag-and-drop/drag-and-drop.directive.mjs

@@ -35,60 +35,81 @@ const DEFAULT_SCROLL_SETTINGS = {
  * events when the corresponding actions occur on the respective TreeView instance.
  */
 export class DragAndDropDirective {
+    element;
+    zone;
+    treeview;
+    dragClueService;
+    dropHintService;
+    /**
+     * Specifies whether the `removeItem` event will be fired after an item is dropped when the `ctrl` key is pressed.
+     * If enabled, the `removeItem` event will not be fired on the source TreeView
+     * ([see example]({% slug draganddrop_treeview %}#toc-multiple-treeviews)).
+     *
+     * @default false
+     */
+    allowCopy = false;
+    /**
+     * Specifes the TreeViewComponent instances into which dragged items from the current TreeViewComponent can be dropped
+     * ([see example]({% slug draganddrop_treeview %}#toc-multiple-treeviews)).
+     */
+    dropZoneTreeViews = [];
+    /**
+     * Specifies the distance in pixels from the initial item pointerdown event, before the dragging is initiated.
+     * The `nodeDragStart` and all consequent TreeView drag events will not be fired until the actual dragging begins.
+     *
+     * @default 5
+     */
+    startDragAfter = 5;
+    /**
+     * Controlls the auto-scrolling behavior during drag-and-drop ([see example]({% slug draganddrop_treeview %}#toc-auto-scrolling)).
+     * Enbaled by default. To turn the auto-scrolling off, set this prop to `false`.
+     *
+     * By default, the scrolling will be performed by 1 pixel at every 1 millisecond, when the dragged item reaches the top or the bottom of the scrollable container.
+     * The `step` and `interval` can be overridden by providing a `DragAndDropScrollSettings` object to this prop.
+     *
+     * @default true
+     */
+    autoScroll = true;
+    /**
+     * @hidden
+     */
+    dragClueTemplate;
+    /**
+     * @hidden
+     */
+    dropHintTemplate;
+    /**
+     * @hidden
+     */
+    userSelectStyle = 'none';
+    draggable;
+    draggedItem;
+    /**
+     * The pointer event of the last successful item pointerdown event (the draggable `press` event).
+     * Used for determining whether the `startDragAfter` distance is covered and for the `nodeDragStart` event args.
+     * Used also as a flag for whether a drag attempt is pending. Should be set to `null` once the dragging begins.
+     */
+    pendingDragStartEvent;
+    get scrollSettings() {
+        const userProvidedSettings = typeof this.autoScroll === 'boolean' ?
+            { enabled: this.autoScroll } :
+            this.autoScroll;
+        return Object.assign({}, DEFAULT_SCROLL_SETTINGS, userProvidedSettings);
+    }
+    /**
+     * Describes 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
+     */
+    containerOffset = { top: 0, left: 0 };
     constructor(element, zone, treeview, dragClueService, dropHintService) {
         this.element = element;
         this.zone = zone;
         this.treeview = treeview;
         this.dragClueService = dragClueService;
         this.dropHintService = dropHintService;
-        /**
-         * Specifies whether the `removeItem` event will be fired after an item is dropped when the `ctrl` key is pressed.
-         * If enabled, the `removeItem` event will not be fired on the source TreeView
-         * ([see example]({% slug draganddrop_treeview %}#toc-multiple-treeviews)).
-         *
-         * @default false
-         */
-        this.allowCopy = false;
-        /**
-         * Specifes the TreeViewComponent instances into which dragged items from the current TreeViewComponent can be dropped
-         * ([see example]({% slug draganddrop_treeview %}#toc-multiple-treeviews)).
-         */
-        this.dropZoneTreeViews = [];
-        /**
-         * Specifies the distance in pixels from the initial item pointerdown event, before the dragging is initiated.
-         * The `nodeDragStart` and all consequent TreeView drag events will not be fired until the actual dragging begins.
-         *
-         * @default 5
-         */
-        this.startDragAfter = 5;
-        /**
-         * Controlls the auto-scrolling behavior during drag-and-drop ([see example]({% slug draganddrop_treeview %}#toc-auto-scrolling)).
-         * Enbaled by default. To turn the auto-scrolling off, set this prop to `false`.
-         *
-         * By default, the scrolling will be performed by 1 pixel at every 1 millisecond, when the dragged item reaches the top or the bottom of the scrollable container.
-         * The `step` and `interval` can be overridden by providing a `DragAndDropScrollSettings` object to this prop.
-         *
-         * @default true
-         */
-        this.autoScroll = true;
-        /**
-         * @hidden
-         */
-        this.userSelectStyle = 'none';
-        /**
-         * Describes 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
-         */
-        this.containerOffset = { top: 0, left: 0 };
         this.treeview.touchActions = false;
     }
-    get scrollSettings() {
-        const userProvidedSettings = typeof this.autoScroll === 'boolean' ?
-            { enabled: this.autoScroll } :
-            this.autoScroll;
-        return Object.assign({}, DEFAULT_SCROLL_SETTINGS, userProvidedSettings);
-    }
     ngAfterContentInit() {
         this.initalizeDraggable();
         this.dragClueService.initialize(this.treeview.assetsContainer, this.dragClueTemplate && this.dragClueTemplate.templateRef);
@@ -270,13 +291,13 @@ export class DragAndDropDirective {
         this.containerOffset = getContainerOffset(this.draggedItem);
         this.pendingDragStartEvent = null;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DragAndDropDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i1.TreeViewComponent }, { token: i2.DragClueService }, { token: i3.DropHintService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", 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 });
 }
-DragAndDropDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DragAndDropDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i1.TreeViewComponent }, { token: i2.DragClueService }, { token: i3.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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DragAndDropDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoTreeViewDragAndDrop]',

package/{esm2020 → esm2022}/drag-and-drop/drag-clue/drag-clue-template.directive.mjs

@@ -19,13 +19,14 @@ import * as i0 from "@angular/core";
  * - `let-destinationItem="destinationItem"` ([`TreeItemLookup`]({% slug api_treeview_treeitemlookup %}))
  */
 export class DragClueTemplateDirective {
+    templateRef;
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DragClueTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DragClueTemplateDirective, isStandalone: true, selector: "[kendoTreeViewDragClueTemplate]", ngImport: i0 });
 }
-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, isStandalone: true, selector: "[kendoTreeViewDragClueTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DragClueTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DragClueTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoTreeViewDragClueTemplate]',

package/{esm2020 → esm2022}/drag-and-drop/drag-clue/drag-clue.component.mjs

@@ -12,11 +12,29 @@ import * as i0 from "@angular/core";
  * @hidden
  */
 export class DragClueComponent {
-    constructor(cdr) {
-        this.cdr = cdr;
-        this.hostClasses = true;
-        this.posistionStyle = 'fixed';
-    }
+    cdr;
+    hostClasses = true;
+    /**
+     * The text value of the dragged TreeView item.
+     */
+    text;
+    /**
+     * The attempted operation according to the current drop target.
+     */
+    action;
+    /**
+     * The look-up info for the currently dragged item.
+     */
+    sourceItem;
+    /**
+     * The look-up info for the destination item (if hovering a valid drop target).
+     */
+    destinationItem;
+    /**
+     * Defines the drag clue content template.
+     */
+    template;
+    posistionStyle = 'fixed';
     get statusIconClass() {
         switch (this.action) {
             case DropAction.Add: return 'plus';
@@ -37,13 +55,15 @@ export class DragClueComponent {
             default: return cancelIcon;
         }
     }
+    constructor(cdr) {
+        this.cdr = cdr;
+    }
     // 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, 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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DragClueComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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"
@@ -66,7 +86,8 @@ DragClueComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
         >
         </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: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DragClueComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,

package/{esm2020 → esm2022}/drag-and-drop/drag-clue/drag-clue.service.mjs

@@ -21,6 +21,9 @@ export const RETURN_ANIMATION_DURATION = 200;
  * @hidden
  */
 export class DragClueService extends DragAndDropAssetService {
+    componentFactoryResolver;
+    returnAnimation;
+    scrollInterval;
     constructor(componentFactoryResolver) {
         super();
         this.componentFactoryResolver = componentFactoryResolver;
@@ -115,9 +118,9 @@ export class DragClueService extends DragAndDropAssetService {
             this.scrollInterval = null;
         }
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DragClueService, deps: [{ token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DragClueService });
 }
-DragClueService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DragClueService, deps: [{ token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Injectable });
-DragClueService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DragClueService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DragClueService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DragClueService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }]; } });

package/{esm2020 → esm2022}/drag-and-drop/drop-hint/drop-hint-template.directive.mjs

@@ -16,13 +16,14 @@ import * as i0 from "@angular/core";
  * - `let-destinationItem="destinationItem"` ([`TreeItemLookup`]({% slug api_treeview_treeitemlookup %}))
  */
 export class DropHintTemplateDirective {
+    templateRef;
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropHintTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DropHintTemplateDirective, isStandalone: true, selector: "[kendoTreeViewDropHintTemplate]", ngImport: i0 });
 }
-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, isStandalone: true, selector: "[kendoTreeViewDropHintTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DropHintTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropHintTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoTreeViewDropHintTemplate]',