@progress/kendo-angular-treeview 5.4.2 → 6.0.0-dev.202201111033

package/dist/es/treeview.component.js

@@ -22,7 +22,7 @@ import { DataBoundComponent } from './data-bound-component';
 import { ExpandableComponent } from './expandable-component';
 import { SelectionService } from './selection/selection.service';
 import { TreeViewLookupService } from './treeview-lookup.service';
-import { closestNode, focusableNode, hasParent, isContent, isFocusable, match, nodeId, isLoadMoreButton, isPresent, nodeIndex, buildTreeItem } from './utils';
+import { closestNode, focusableNode, hasParent, isContent, isFocusable, match, nodeId, isLoadMoreButton, isPresent, nodeIndex, buildTreeItem, getSizeClass } from './utils';
 var LOAD_MORE_DOC_LINK = 'http://www.telerik.com/kendo-angular-ui/components/treeview/load-more-button/';
 var providers = [
     ExpandStateService,
@@ -52,9 +52,10 @@ var providers = [
  * Represents the [Kendo UI TreeView component for Angular]({% slug overview_treeview %}).
  *
  * @example
- * {% meta height:350 %}
- * {% embed_file basic-usage/app.component.ts preview %}
- * {% embed_file basic-usage/app.module.ts %}
+ * {% meta height:450 %}
+ * {% embed_file get-started/app.component.ts preview %}
+ * {% embed_file get-started/app.module.ts %}
+ * {% embed_file shared/main.ts %}
  * {% endmeta %}
  */
 var TreeViewComponent = /** @class */ (function () {
@@ -229,6 +230,7 @@ var TreeViewComponent = /** @class */ (function () {
         this.isActive = false;
         this.data = new BehaviorSubject([]);
         this._animate = true;
+        this._size = 'medium';
         this.subscriptions = new Subscription();
         this.domSubscriptions = [];
         validatePackage(packageMetadata);
@@ -255,21 +257,33 @@ var TreeViewComponent = /** @class */ (function () {
         configurable: true
     });
     Object.defineProperty(TreeViewComponent.prototype, "nodeTemplateRef", {
+        get: function () {
+            return this._nodeTemplateRef || this.nodeTemplateQuery;
+        },
         /**
          * @hidden
+         *
+         * Defines the template for each node.
+         * Takes precedence over nested templates in the TreeView tag.
          */
         set: function (template) {
-            this.nodeTemplate = template;
+            this._nodeTemplateRef = template;
         },
         enumerable: true,
         configurable: true
     });
     Object.defineProperty(TreeViewComponent.prototype, "loadMoreButtonTemplateRef", {
+        get: function () {
+            return this._loadMoreButtonTemplateRef || this.loadMoreButtonTemplateQuery;
+        },
         /**
          * @hidden
+         *
+         * Defines the template for each load-more button.
+         * Takes precedence over nested templates in the TreeView tag.
          */
         set: function (template) {
-            this.loadMoreButtonTemplate = template;
+            this._loadMoreButtonTemplateRef = template;
         },
         enumerable: true,
         configurable: true
@@ -348,6 +362,30 @@ var TreeViewComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(TreeViewComponent.prototype, "size", {
+        get: function () {
+            return this._size;
+        },
+        /**
+         * Sets the size of the component.
+         *
+         * The possible values are:
+         * * `'small'`
+         * * `'medium'` (default)
+         * * `'large'`
+         * * `null`
+         *
+         */
+        set: function (size) {
+            this.renderer.removeClass(this.element.nativeElement, getSizeClass('treeview', this.size));
+            if (size) {
+                this.renderer.addClass(this.element.nativeElement, getSizeClass('treeview', size));
+            }
+            this._size = size;
+        },
+        enumerable: true,
+        configurable: true
+    });
     TreeViewComponent.prototype.ngOnChanges = function (changes) {
         this.navigationService.navigable = Boolean(this.navigable);
         // TODO: should react to changes.loadOnDemand as well - should preload the data or clear the already cached items
@@ -388,6 +426,9 @@ var TreeViewComponent = /** @class */ (function () {
                 _this.attachDomHandlers();
             });
         }
+        if (this.size) {
+            this.renderer.addClass(this.element.nativeElement, getSizeClass('treeview', this.size));
+        }
     };
     /**
      * Blurs the focused TreeView item.
@@ -547,7 +588,7 @@ var TreeViewComponent = /** @class */ (function () {
             return;
         }
         var index = nodeId(closestNode(target));
-        // the disabled check is probably not needed due to the k-state-disabled styles
+        // the disabled check is probably not needed due to the k-disabled styles
         if (!index || this.navigationService.isDisabled(index)) {
             return;
         }
@@ -609,7 +650,6 @@ var TreeViewComponent = /** @class */ (function () {
         });
     };
     tslib_1.__decorate([
-        HostBinding("class.k-widget"),
         HostBinding("class.k-treeview"),
         tslib_1.__metadata("design:type", Boolean)
     ], TreeViewComponent.prototype, "classNames", void 0);
@@ -705,18 +745,18 @@ var TreeViewComponent = /** @class */ (function () {
         tslib_1.__metadata("design:type", EventEmitter)
     ], TreeViewComponent.prototype, "nodeDblClick", void 0);
     tslib_1.__decorate([
-        ContentChild(NodeTemplateDirective, { static: true }),
+        ContentChild(NodeTemplateDirective, { static: false }),
         tslib_1.__metadata("design:type", NodeTemplateDirective)
-    ], TreeViewComponent.prototype, "nodeTemplate", void 0);
+    ], TreeViewComponent.prototype, "nodeTemplateQuery", void 0);
     tslib_1.__decorate([
         Input('nodeTemplate'),
         tslib_1.__metadata("design:type", NodeTemplateDirective),
         tslib_1.__metadata("design:paramtypes", [NodeTemplateDirective])
     ], TreeViewComponent.prototype, "nodeTemplateRef", null);
     tslib_1.__decorate([
-        ContentChild(LoadMoreButtonTemplateDirective, { static: true }),
+        ContentChild(LoadMoreButtonTemplateDirective, { static: false }),
         tslib_1.__metadata("design:type", LoadMoreButtonTemplateDirective)
-    ], TreeViewComponent.prototype, "loadMoreButtonTemplate", void 0);
+    ], TreeViewComponent.prototype, "loadMoreButtonTemplateQuery", void 0);
     tslib_1.__decorate([
         Input('loadMoreButtonTemplate'),
         tslib_1.__metadata("design:type", LoadMoreButtonTemplateDirective),
@@ -783,13 +823,18 @@ var TreeViewComponent = /** @class */ (function () {
         Input(),
         tslib_1.__metadata("design:type", String)
     ], TreeViewComponent.prototype, "filter", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], TreeViewComponent.prototype, "size", null);
     TreeViewComponent = tslib_1.__decorate([
         Component({
             changeDetection: ChangeDetectionStrategy.Default,
             exportAs: 'kendoTreeView',
             providers: providers,
             selector: 'kendo-treeview',
-            template: "\n        <kendo-textbox\n            #filterInput\n            *ngIf=\"filterable\"\n            [value]=\"filter\"\n            [clearButton]=\"true\"\n            (valueChange)=\"filterChange.emit($event)\"\n            [placeholder]=\"filterInputPlaceholder\"\n        >\n            <ng-template kendoTextBoxPrefixTemplate>\n                <span class=\"k-icon k-i-search\"></span>\n            </ng-template>\n        </kendo-textbox>\n        <ul class=\"k-treeview-lines\"\n            kendoTreeViewGroup\n            role=\"group\"\n            [loadOnDemand]=\"loadOnDemand\"\n            [checkboxes]=\"checkboxes\"\n            [expandIcons]=\"expandIcons\"\n            [selectable]=\"selectable\"\n            [touchActions]=\"touchActions\"\n            [children]=\"children\"\n            [hasChildren]=\"hasChildren\"\n            [isChecked]=\"isChecked\"\n            [isDisabled]=\"isDisabled\"\n            [isExpanded]=\"isExpanded\"\n            [isSelected]=\"isSelected\"\n            [isVisible]=\"isVisible\"\n            [nodeTemplateRef]=\"nodeTemplate?.templateRef\"\n            [loadMoreButtonTemplateRef]=\"loadMoreButtonTemplate?.templateRef\"\n            [textField]=\"textField\"\n            [nodes]=\"fetchNodes\"\n            [loadMoreService]=\"loadMoreService\"\n            [trackBy]=\"trackBy\"\n        >\n        </ul>\n        <ng-container #assetsContainer></ng-container>\n    "
+            template: "\n        <span\n            class=\"k-treeview-filter\"\n            *ngIf=\"filterable\"\n        >\n            <kendo-textbox\n                [size]=\"size\"\n                [value]=\"filter\"\n                [clearButton]=\"true\"\n                (valueChange)=\"filterChange.emit($event)\"\n                [placeholder]=\"filterInputPlaceholder\"\n            >\n                <ng-template kendoTextBoxPrefixTemplate>\n                    <span class=\"k-input-icon k-icon k-i-search\"></span>\n                </ng-template>\n            </kendo-textbox>\n        </span>\n        <ul class=\"k-treeview-lines\"\n            kendoTreeViewGroup\n            role=\"group\"\n            [size]=\"size\"\n            [loadOnDemand]=\"loadOnDemand\"\n            [checkboxes]=\"checkboxes\"\n            [expandIcons]=\"expandIcons\"\n            [selectable]=\"selectable\"\n            [touchActions]=\"touchActions\"\n            [children]=\"children\"\n            [hasChildren]=\"hasChildren\"\n            [isChecked]=\"isChecked\"\n            [isDisabled]=\"isDisabled\"\n            [isExpanded]=\"isExpanded\"\n            [isSelected]=\"isSelected\"\n            [isVisible]=\"isVisible\"\n            [nodeTemplateRef]=\"nodeTemplateRef?.templateRef\"\n            [loadMoreButtonTemplateRef]=\"loadMoreButtonTemplateRef?.templateRef\"\n            [textField]=\"textField\"\n            [nodes]=\"fetchNodes\"\n            [loadMoreService]=\"loadMoreService\"\n            [trackBy]=\"trackBy\"\n        >\n        </ul>\n        <ng-container #assetsContainer></ng-container>\n    "
         }),
         tslib_1.__metadata("design:paramtypes", [ElementRef,
             ChangeDetectorRef,

package/dist/es/utils.js

@@ -90,7 +90,7 @@ export var isFocusable = function (element) {
  * @hidden
  */
 export var isContent = function (element) {
-    var scopeSelector = '.k-in:not(.k-treeview-load-more-button),.k-treeview-item,.k-treeview';
+    var scopeSelector = '.k-treeview-leaf:not(.k-treeview-load-more-button),.k-treeview-item,.k-treeview';
     if (!isDocumentAvailable()) {
         return null;
     }
@@ -99,20 +99,20 @@ export var isContent = function (element) {
         node = node.parentNode;
     }
     if (node) {
-        return match(node, '.k-in:not(.k-treeview-load-more-button)');
+        return match(node, '.k-treeview-leaf:not(.k-treeview-load-more-button)');
     }
 };
 /**
  * @hidden
  *
- * Returns the nested .k-in:not(.k-treeview-load-more-button) element.
+ * Returns the nested .k-treeview-leaf:not(.k-treeview-load-more-button) element.
  * If the passed parent item is itself a content node, it is returned.
  */
 export var getContentElement = function (parent) {
     if (!isPresent(parent)) {
         return null;
     }
-    var selector = '.k-in:not(.k-treeview-load-more-button)';
+    var selector = '.k-treeview-leaf:not(.k-treeview-load-more-button)';
     if (match(parent, selector)) {
         return parent;
     }
@@ -122,7 +122,7 @@ export var getContentElement = function (parent) {
  * @hidden
  */
 export var isLoadMoreButton = function (element) {
-    return isPresent(closestWithMatch(element, '.k-in.k-treeview-load-more-button'));
+    return isPresent(closestWithMatch(element, '.k-treeview-leaf.k-treeview-load-more-button'));
 };
 /**
  * @hidden
@@ -286,16 +286,26 @@ export var fetchLoadedDescendants = function (lookup, filterExpression) {
 /**
  * @hidden
  *
- * Compares two arrays to determine whether all unique elements in one, are present in the other.
+ * Compares two Seets to determine whether all unique elements in one, are present in the other.
  * Important:
  *  - it disregards the element order
- *  - it disregards element repetitions - sameValues([1, 1, 2], [1, 2, 2]) will return true
  */
-export var sameValues = function (a, b) {
-    if (a.length !== b.length) {
+export var sameValues = function (as, bs) {
+    if (as.size !== bs.size) {
         return false;
     }
-    var values = new Set(b);
-    return a.every(function (v) { return values.has(v); });
+    return Array.from(as).every(function (v) { return bs.has(v); });
+};
+/**
+ * @hidden
+ * Returns the size class based on the component and size input.
+ */
+export var getSizeClass = function (component, size) {
+    var SIZE_CLASSES = {
+        'small': "k-" + component + "-sm",
+        'medium': "k-" + component + "-md",
+        'large': "k-" + component + "-lg"
+    };
+    return SIZE_CLASSES[size];
 };
 export { ɵ0, ɵ1, ɵ2, ɵ3, ɵ4, ɵ5, ɵ6, ɵ7, ɵ8, ɵ9 };

package/dist/es2015/check.directive.d.ts

@@ -41,8 +41,15 @@ export declare class CheckDirective implements OnChanges, OnDestroy {
     protected subscriptions: Subscription;
     private readonly options;
     private checkActions;
-    private _checkedKeys;
+    /**
+     * Reflectes the internal `checkedKeys` state.
+     */
+    private state;
     private clickSubscription;
+    /**
+     * Holds the last emitted `checkedKeys` collection.
+     */
+    private lastChange;
     constructor(treeView: TreeViewComponent, zone: NgZone);
     ngOnChanges(changes: any): void;
     ngOnDestroy(): void;

package/dist/es2015/check.directive.js

@@ -8,6 +8,7 @@ import { TreeViewComponent } from './treeview.component';
 import { fetchLoadedDescendants, isBoolean, isPresent, noop } from './utils';
 import { Subscription } from 'rxjs';
 import { filter, take, switchMap, tap } from 'rxjs/operators';
+import { isChanged } from '@progress/kendo-angular-common';
 const indexChecked = (keys, index) => keys.filter(k => k === index).length > 0;
 const ɵ0 = indexChecked;
 const matchKey = index => k => {
@@ -44,7 +45,10 @@ let CheckDirective = class CheckDirective {
             'multiple': (e) => this.checkMultiple(e),
             'single': (e) => this.checkSingle(e)
         };
-        this._checkedKeys = [];
+        /**
+         * Reflectes the internal `checkedKeys` state.
+         */
+        this.state = new Set();
         this.subscriptions.add(this.treeView.checkedChange
             .subscribe((e) => this.check(e)));
         let expandedItems = [];
@@ -59,16 +63,6 @@ let CheckDirective = class CheckDirective {
     set isChecked(value) {
         this.treeView.isChecked = value;
     }
-    /**
-     * Defines the collection that will store the checked keys
-     * ([see example]({% slug checkboxes_treeview %})).
-     */
-    get checkedKeys() {
-        return this._checkedKeys;
-    }
-    set checkedKeys(keys) {
-        this._checkedKeys = keys;
-    }
     get options() {
         const defaultOptions = {
             checkChildren: true,
@@ -89,6 +83,9 @@ let CheckDirective = class CheckDirective {
             this.treeView.checkboxes = this.options.enabled;
             this.toggleCheckOnClick();
         }
+        if (isChanged('checkedKeys', changes, false) && changes.checkedKeys.currentValue !== this.lastChange) {
+            this.state = new Set(changes.checkedKeys.currentValue);
+        }
     }
     ngOnDestroy() {
         this.subscriptions.unsubscribe();
@@ -98,11 +95,11 @@ let CheckDirective = class CheckDirective {
         if (!this.checkKey) {
             return this.isIndexChecked(index);
         }
-        const keyIndex = this.checkedKeys.indexOf(this.itemKey({ dataItem, index }));
-        return keyIndex > -1 ? 'checked' : 'none';
+        const hasKey = this.state.has(this.itemKey({ dataItem, index }));
+        return hasKey ? 'checked' : 'none';
     }
     isIndexChecked(index) {
-        const checkedKeys = this.checkedKeys.filter(matchKey(index));
+        const checkedKeys = Array.from(this.state).filter(matchKey(index));
         if (indexChecked(checkedKeys, index)) {
             return 'checked';
         }
@@ -133,7 +130,11 @@ let CheckDirective = class CheckDirective {
     }
     checkSingle(node) {
         const key = this.itemKey(node.item);
-        this.checkedKeys = this.checkedKeys[0] !== key ? [key] : [];
+        const hasKey = this.state.has(key);
+        this.state.clear();
+        if (!hasKey) {
+            this.state.add(key);
+        }
         this.notify();
     }
     checkMultiple(node) {
@@ -168,7 +169,6 @@ let CheckDirective = class CheckDirective {
         if (!isPresent(currentKey)) {
             return;
         }
-        const checkedKeys = new Set(this.checkedKeys);
         const pendingCheck = [currentKey];
         if (this.options.checkChildren) {
             const descendants = fetchLoadedDescendants(node, ({ item }) => this.treeView.isVisible(item.dataItem, item.index) &&
@@ -176,61 +176,57 @@ let CheckDirective = class CheckDirective {
                 .map(({ item }) => this.itemKey(item));
             pendingCheck.push(...descendants);
         }
-        const shouldCheck = !checkedKeys.has(currentKey);
+        const shouldCheck = !this.state.has(currentKey);
         pendingCheck.forEach(key => {
             if (shouldCheck) {
-                checkedKeys.add(key);
+                this.state.add(key);
             }
             else {
-                checkedKeys.delete(key);
+                this.state.delete(key);
             }
         });
-        this.checkedKeys = Array.from(checkedKeys);
     }
     checkParents(parent) {
         if (!isPresent(parent)) {
             return;
         }
-        const checkedKeys = new Set(this.checkedKeys);
         let currentParent = parent;
         while (currentParent) {
             const parentKey = this.itemKey(currentParent.item);
-            const allChildrenSelected = currentParent.children.every(item => checkedKeys.has(this.itemKey(item)));
+            const allChildrenSelected = currentParent.children.every(item => this.state.has(this.itemKey(item)));
             if (allChildrenSelected) {
-                checkedKeys.add(parentKey);
+                this.state.add(parentKey);
             }
             else {
-                checkedKeys.delete(parentKey);
+                this.state.delete(parentKey);
             }
             currentParent = currentParent.parent;
         }
-        this.checkedKeys = Array.from(checkedKeys);
     }
     notify() {
-        this.checkedKeysChange.emit(this.checkedKeys.slice());
+        this.lastChange = Array.from(this.state);
+        this.checkedKeysChange.emit(this.lastChange);
     }
     addCheckedItemsChildren(lookups) {
         if (!isPresent(lookups) || lookups.length === 0) {
             return;
         }
-        const initiallyCheckedItemsCount = this.checkedKeys.length;
-        const checkedKeys = new Set(this.checkedKeys);
+        const initiallyCheckedItemsCount = this.state.size;
         lookups.forEach(lookup => {
             const itemKey = this.itemKey(lookup.item);
-            if (!checkedKeys.has(itemKey)) {
+            if (!this.state.has(itemKey)) {
                 return;
             }
             lookup.children.forEach(item => {
                 // ensure both the parent item and each child node is enabled
                 if (!this.treeView.isDisabled(lookup.item.dataItem, lookup.item.index) &&
                     !this.treeView.isDisabled(item.dataItem, item.index)) {
-                    checkedKeys.add(this.itemKey(item));
+                    this.state.add(this.itemKey(item));
                 }
             });
         });
-        const hasNewlyCheckedItems = initiallyCheckedItemsCount !== checkedKeys.size;
+        const hasNewlyCheckedItems = initiallyCheckedItemsCount !== this.state.size;
         if (hasNewlyCheckedItems) {
-            this.checkedKeys = Array.from(checkedKeys);
             this.zone.run(() => this.notify());
         }
     }
@@ -246,9 +242,8 @@ tslib_1.__decorate([
 ], CheckDirective.prototype, "checkKey", void 0);
 tslib_1.__decorate([
     Input(),
-    tslib_1.__metadata("design:type", Array),
-    tslib_1.__metadata("design:paramtypes", [Array])
-], CheckDirective.prototype, "checkedKeys", null);
+    tslib_1.__metadata("design:type", Array)
+], CheckDirective.prototype, "checkedKeys", void 0);
 tslib_1.__decorate([
     Input('kendoTreeViewCheckable'),
     tslib_1.__metadata("design:type", Object)

package/dist/es2015/checkbox/checkbox.component.d.ts

@@ -3,6 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { ChangeDetectorRef, DoCheck, ElementRef, EventEmitter, OnInit, Renderer2 } from '@angular/core';
+import { TreeViewSize } from '../size';
 import { CheckedState } from './checked-state';
 /**
  * @hidden
@@ -39,12 +40,17 @@ export declare class CheckBoxComponent implements OnInit, DoCheck {
      * Specifies the [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
      */
     tabindex: number;
+    /**
+     * Specifies the size of the component.
+     */
+    size: TreeViewSize;
     /**
      * Fires when the user changes the check state of the component.
      */
     checkStateChange: EventEmitter<CheckedState>;
     readonly indeterminate: boolean;
     readonly checked: boolean;
+    readonly checkBoxClasses: any;
     private checkState;
     constructor(element: ElementRef, renderer: Renderer2, changeDetector: ChangeDetectorRef);
     ngOnInit(): void;

package/dist/es2015/checkbox/checkbox.component.js

@@ -5,6 +5,7 @@
 import * as tslib_1 from "tslib";
 import { ChangeDetectorRef, Component, ElementRef, EventEmitter, HostBinding, Input, Output, Renderer2 } from '@angular/core';
 import { guid } from '@progress/kendo-angular-common';
+import { getSizeClass } from '../utils';
 /**
  * @hidden
  *
@@ -24,6 +25,10 @@ let CheckBoxComponent = class CheckBoxComponent {
          * Specifies the [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
          */
         this.tabindex = 0;
+        /**
+         * Specifies the size of the component.
+         */
+        this.size = 'medium';
         /**
          * Fires when the user changes the check state of the component.
          */
@@ -39,6 +44,9 @@ let CheckBoxComponent = class CheckBoxComponent {
     get checked() {
         return this.checkState === 'checked';
     }
+    get checkBoxClasses() {
+        return `k-checkbox ${this.size ? getSizeClass('checkbox', this.size) : ''} k-rounded-md`;
+    }
     ngOnInit() {
         this.renderer.removeAttribute(this.element.nativeElement, "tabindex");
     }
@@ -82,6 +90,10 @@ tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", Number)
 ], CheckBoxComponent.prototype, "tabindex", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String)
+], CheckBoxComponent.prototype, "size", void 0);
 tslib_1.__decorate([
     Output(),
     tslib_1.__metadata("design:type", EventEmitter)
@@ -91,8 +103,8 @@ CheckBoxComponent = tslib_1.__decorate([
         selector: 'kendo-checkbox',
         template: `
         <input
-            class="k-checkbox"
             type="checkbox"
+            [class]="checkBoxClasses"
             [id]="id"
             [checked]="checked"
             [indeterminate]="indeterminate"

package/dist/es2015/drag-and-drop/drag-and-drop-utils.js

@@ -92,12 +92,12 @@ export const getDropPosition = (draggedItem, target, clientY, targetTreeView, co
     if (!(isPresent(draggedItem) && isPresent(target) && isPresent(targetTreeView) && isPresent(containerOffset))) {
         return;
     }
-    // the .k-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-mid');
+    // 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-mid');
     if (!isPresent(item)) {
         return;
     }
-    // the content element (.k-in:not(.k-treeview-load-more-button)) holds just the treeview item text
+    // 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) {

package/dist/es2015/drag-and-drop/drag-and-drop.directive.js

@@ -102,7 +102,7 @@ let DragAndDropDirective = class DragAndDropDirective {
             return;
         }
         // store the drag target on press, show it only when it's actually dragged
-        this.draggedItem = closestWithMatch(originalEvent.target, '.k-in');
+        this.draggedItem = closestWithMatch(originalEvent.target, '.k-treeview-leaf');
         // record the current pointer down coords - copared to the `startDragAfter` value to calculate whether to initiate dragging
         this.pendingDragStartEvent = originalEvent;
     }
@@ -122,7 +122,7 @@ let DragAndDropDirective = class DragAndDropDirective {
         }
         const targetTreeView = this.getTargetTreeView(dropTarget);
         const dropPosition = getDropPosition(this.draggedItem, dropTarget, clientY, targetTreeView, this.containerOffset);
-        const dropHintAnchor = closestWithMatch(dropTarget, '.k-mid');
+        const dropHintAnchor = closestWithMatch(dropTarget, '.k-treeview-mid');
         const dropAction = getDropAction(dropPosition, dropTarget);
         const sourceItem = treeItemFromEventTarget(this.treeview, this.draggedItem);
         const destinationItem = treeItemFromEventTarget(targetTreeView, dropTarget);

package/dist/es2015/expand.directive.d.ts

@@ -2,7 +2,7 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { EventEmitter, OnDestroy } from '@angular/core';
+import { EventEmitter, OnDestroy, SimpleChanges, OnChanges } from '@angular/core';
 import { ExpandableComponent } from './expandable-component';
 import { Subscription } from 'rxjs';
 import { TreeItem } from './treeitem.interface';
@@ -17,7 +17,7 @@ interface ExpandTreeItem extends TreeItem {
  * A directive which manages the expanded state of the TreeView.
  * ([see example]({% slug expandedstate_treeview %})).
  */
-export declare class ExpandDirective implements OnDestroy {
+export declare class ExpandDirective implements OnDestroy, OnChanges {
     protected component: ExpandableComponent;
     /**
      * @hidden
@@ -43,10 +43,18 @@ export declare class ExpandDirective implements OnDestroy {
      */
     expandedKeys: any[];
     protected subscriptions: Subscription;
-    private _expandedKeys;
+    /**
+     * Reflectes the internal `expandedKeys` state.
+     */
+    private state;
     private originalExpandedKeys;
     private isFiltered;
+    /**
+     * Holds the last emitted `expandedKeys` collection.
+     */
+    private lastChange;
     constructor(component: ExpandableComponent);
+    ngOnChanges(changes: SimpleChanges): void;
     ngOnDestroy(): void;
     /**
      * @hidden
@@ -62,5 +70,6 @@ export declare class ExpandDirective implements OnDestroy {
      * Fills array with the expand key of every node.
      */
     private getEveryExpandKey;
+    private notify;
 }
 export {};