@progress/kendo-angular-treeview 5.4.3 → 6.0.0-dev.202112021059

package/dist/es2015/selection/select.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, OnChanges, SimpleChanges } from '@angular/core';
 import { TreeViewComponent } from '../treeview.component';
 import { SelectableSettings } from './selectable-settings';
 import { Subscription } from 'rxjs';
@@ -11,7 +11,7 @@ import { TreeItem } from '../treeitem.interface';
  * A directive which manages the in-memory selection state of the TreeView node
  * ([see example]({% slug selection_treeview %})).
  */
-export declare class SelectDirective implements OnDestroy {
+export declare class SelectDirective implements OnDestroy, OnChanges {
     protected treeView: TreeViewComponent;
     /**
      * @hidden
@@ -39,8 +39,16 @@ export declare class SelectDirective implements OnDestroy {
     protected subscriptions: Subscription;
     private readonly options;
     private selectActions;
-    private _selectedKeys;
+    /**
+     * Reflectes the internal `selectedKeys` state.
+     */
+    private state;
+    /**
+     * Holds the last emitted `selectedKeys` collection.
+     */
+    private lastChange;
     constructor(treeView: TreeViewComponent);
+    ngOnChanges(changes: SimpleChanges): void;
     ngOnDestroy(): void;
     protected itemKey(e: any): any;
     protected select(e: any): void;

package/dist/es2015/selection/select.directive.js

@@ -7,6 +7,7 @@ import { Directive, EventEmitter, HostBinding, Input, Output } from '@angular/co
 import { TreeViewComponent } from '../treeview.component';
 import { isBoolean, isPresent, noop } from '../utils';
 import { Subscription } from 'rxjs';
+import { isChanged } from '@progress/kendo-angular-common';
 /**
  * A directive which manages the in-memory selection state of the TreeView node
  * ([see example]({% slug selection_treeview %})).
@@ -23,9 +24,12 @@ let SelectDirective = class SelectDirective {
             'multiple': (e) => this.selectMultiple(e),
             'single': (e) => this.selectSingle(e)
         };
-        this._selectedKeys = [];
+        /**
+         * 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.selectedKeys.indexOf(this.itemKey({ dataItem, index })) > -1);
+        this.treeView.isSelected = (dataItem, index) => (this.state.has(this.itemKey({ dataItem, index })));
     }
     /**
      * @hidden
@@ -33,16 +37,6 @@ let SelectDirective = class SelectDirective {
     set isSelected(value) {
         this.treeView.isSelected = value;
     }
-    /**
-     * Defines the collection that will store the selected keys
-     * ([see example]({% slug selection_treeview %}#toc-selection-modes)).
-     */
-    get selectedKeys() {
-        return this._selectedKeys;
-    }
-    set selectedKeys(keys) {
-        this._selectedKeys = keys;
-    }
     get getAriaMultiselectable() {
         return this.options.mode === 'multiple';
     }
@@ -57,6 +51,11 @@ let SelectDirective = class SelectDirective {
         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);
+        }
+    }
     ngOnDestroy() {
         this.subscriptions.unsubscribe();
     }
@@ -81,29 +80,29 @@ let SelectDirective = class SelectDirective {
     }
     selectSingle(node) {
         const key = this.itemKey(node);
-        if (this.selectedKeys[0] === key) {
-            return;
+        if (!this.state.has(key)) {
+            this.state.clear();
+            this.state.add(key);
+            this.notify();
         }
-        this.selectedKeys = [key];
-        this.notify();
     }
     selectMultiple(node) {
         const key = this.itemKey(node);
-        const idx = this.selectedKeys.indexOf(key);
-        const isSelected = idx > -1;
+        const isSelected = this.state.has(key);
         if (!isPresent(key)) {
             return;
         }
         if (isSelected) {
-            this.selectedKeys.splice(idx, 1);
+            this.state.delete(key);
         }
         else {
-            this.selectedKeys.push(key);
+            this.state.add(key);
         }
         this.notify();
     }
     notify() {
-        this.selectedKeysChange.emit(this.selectedKeys.slice());
+        this.lastChange = Array.from(this.state);
+        this.selectedKeysChange.emit(this.lastChange);
     }
 };
 tslib_1.__decorate([
@@ -121,9 +120,8 @@ tslib_1.__decorate([
 ], SelectDirective.prototype, "selection", void 0);
 tslib_1.__decorate([
     Input(),
-    tslib_1.__metadata("design:type", Array),
-    tslib_1.__metadata("design:paramtypes", [Array])
-], SelectDirective.prototype, "selectedKeys", null);
+    tslib_1.__metadata("design:type", Array)
+], SelectDirective.prototype, "selectedKeys", void 0);
 tslib_1.__decorate([
     Output(),
     tslib_1.__metadata("design:type", EventEmitter)

package/dist/es2015/utils.d.ts

@@ -125,9 +125,8 @@ export declare const fetchLoadedDescendants: (lookup: TreeItemLookup, filterExpr
 /**
  * @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 declare const sameValues: (a: any[], b: any[]) => boolean;
+export declare const sameValues: (as: Set<any>, bs: Set<any>) => boolean;

package/dist/es2015/utils.js

@@ -282,16 +282,14 @@ export const fetchLoadedDescendants = (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 const sameValues = (a, b) => {
-    if (a.length !== b.length) {
+export const sameValues = (as, bs) => {
+    if (as.size !== bs.size) {
         return false;
     }
-    const values = new Set(b);
-    return a.every(v => values.has(v));
+    return Array.from(as).every(v => bs.has(v));
 };
 export { ɵ0, ɵ1, ɵ2, ɵ3, ɵ4, ɵ5, ɵ6, ɵ7, ɵ8, ɵ9 };

package/dist/fesm2015/index.js

@@ -22,7 +22,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-treeview',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1638439762,
+    publishDate: 1638442548,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };
@@ -405,17 +405,15 @@ const fetchLoadedDescendants = (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
  */
-const sameValues = (a, b) => {
-    if (a.length !== b.length) {
+const sameValues = (as, bs) => {
+    if (as.size !== bs.size) {
         return false;
     }
-    const values = new Set(b);
-    return a.every(v => values.has(v));
+    return Array.from(as).every(v => bs.has(v));
 };
 
 const safe = node => (node || {});
@@ -2299,7 +2297,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 = [];
@@ -2314,16 +2315,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,
@@ -2344,6 +2335,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();
@@ -2353,11 +2347,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';
         }
@@ -2388,7 +2382,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) {
@@ -2423,7 +2421,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) &&
@@ -2431,61 +2428,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());
         }
     }
@@ -2501,9 +2494,8 @@ __decorate([
 ], CheckDirective.prototype, "checkKey", void 0);
 __decorate([
     Input(),
-    __metadata("design:type", Array),
-    __metadata("design:paramtypes", [Array])
-], CheckDirective.prototype, "checkedKeys", null);
+    __metadata("design:type", Array)
+], CheckDirective.prototype, "checkedKeys", void 0);
 __decorate([
     Input('kendoTreeViewCheckable'),
     __metadata("design:type", Object)
@@ -2598,8 +2590,11 @@ let ExpandDirective = class ExpandDirective {
          */
         this.expandedKeysChange = new EventEmitter();
         this.subscriptions = new Subscription();
-        this._expandedKeys = [];
-        this.originalExpandedKeys = [];
+        /**
+         * 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.
@@ -2631,7 +2626,7 @@ let ExpandDirective = class ExpandDirective {
         if (this.component.filterStateChange) {
             this.subscriptions.add(this.component.filterStateChange.subscribe(this.handleAutoExpand.bind(this)));
         }
-        this.component.isExpanded = (dataItem, index) => this.expandedKeys.indexOf(this.itemKey({ dataItem, index })) > -1;
+        this.component.isExpanded = (dataItem, index) => this.state.has(this.itemKey({ dataItem, index }));
     }
     /**
      * @hidden
@@ -2643,14 +2638,10 @@ let ExpandDirective = class ExpandDirective {
         const settings = isBoolean(this.expandOnFilter) ? { enabled: this.expandOnFilter } : Object.assign({}, this.expandOnFilter, { enabled: true });
         return Object.assign({}, DEFAULT_FILTER_EXPAND_SETTINGS, settings);
     }
-    /**
-     * Defines the collection that will store the expanded keys.
-     */
-    get expandedKeys() {
-        return this._expandedKeys;
-    }
-    set expandedKeys(keys) {
-        this._expandedKeys = keys;
+    ngOnChanges(changes) {
+        if (isChanged('expandedKeys', changes, false) && changes.expandedKeys.currentValue !== this.lastChange) {
+            this.state = new Set(changes.expandedKeys.currentValue);
+        }
     }
     ngOnDestroy() {
         this.subscriptions.unsubscribe();
@@ -2670,19 +2661,19 @@ let ExpandDirective = class ExpandDirective {
         return e.index;
     }
     toggleExpand({ index, dataItem, expand }) {
-        const item = this.itemKey({ index, dataItem });
-        const idx = this.expandedKeys.indexOf(item);
+        const key = this.itemKey({ index, dataItem });
+        const isExpanded = this.state.has(key);
         let notify = false;
-        if (idx > -1 && !expand) {
-            this.expandedKeys.splice(idx, 1);
+        if (isExpanded && !expand) {
+            this.state.delete(key);
             notify = true;
         }
-        else if (idx === -1 && expand) {
-            this.expandedKeys.push(item);
+        else if (!isExpanded && expand) {
+            this.state.add(key);
             notify = true;
         }
         if (notify) {
-            this.expandedKeysChange.emit(this.expandedKeys);
+            this.notify();
         }
     }
     handleAutoExpand({ nodes, matchCount, term }) {
@@ -2691,7 +2682,7 @@ let ExpandDirective = class ExpandDirective {
         }
         const { maxAutoExpandResults, expandMatches: autoExpandMatches, expandedOnClear } = this.filterExpandSettings;
         if (!this.isFiltered) {
-            this.originalExpandedKeys = this.expandedKeys.slice();
+            this.originalExpandedKeys = new Set(this.state);
         }
         const exitingFilteredState = this.isFiltered && !term;
         const maxExceeded = maxAutoExpandResults !== -1 && matchCount > maxAutoExpandResults;
@@ -2699,18 +2690,18 @@ let ExpandDirective = class ExpandDirective {
         if (exitAutoExpandedState) {
             switch (expandedOnClear) {
                 case "initial": {
-                    if (!sameValues(this.expandedKeys, this.originalExpandedKeys)) {
-                        this.expandedKeys = this.originalExpandedKeys;
-                        this.expandedKeysChange.emit(this.expandedKeys);
+                    if (!sameValues(this.state, this.originalExpandedKeys)) {
+                        this.state = this.originalExpandedKeys;
+                        this.notify();
                     }
                     break;
                 }
                 case "all": {
-                    this.expandedKeys = nodes.reduce((acc, rootNode) => {
+                    this.state = new Set(nodes.reduce((acc, rootNode) => {
                         this.getEveryExpandKey(acc, rootNode);
                         return acc;
-                    }, []);
-                    this.expandedKeysChange.emit(this.expandedKeys);
+                    }, []));
+                    this.notify();
                     break;
                 }
                 case "unchanged": {
@@ -2718,9 +2709,9 @@ let ExpandDirective = class ExpandDirective {
                 }
                 case "none":
                 default: {
-                    if (this.expandedKeys.length !== 0) {
-                        this.expandedKeys = [];
-                        this.expandedKeysChange.emit(this.expandedKeys);
+                    if (this.state.size !== 0) {
+                        this.state.clear();
+                        this.notify();
                     }
                     break;
                 }
@@ -2728,16 +2719,20 @@ let ExpandDirective = class ExpandDirective {
             this.isFiltered = false;
             return;
         }
-        const indicesToExpand = nodes.reduce((acc, rootNode) => {
+        const indicesToExpand = new Set(nodes.reduce((acc, rootNode) => {
             this.updateExpandedNodes(acc, rootNode, autoExpandMatches);
             return acc;
-        }, []);
-        if (!sameValues(this.expandedKeys, indicesToExpand)) {
-            this.expandedKeys = indicesToExpand;
-            this.expandedKeysChange.emit(this.expandedKeys);
+        }, []));
+        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);
+    }
 };
 __decorate([
     Input(),
@@ -2758,9 +2753,8 @@ __decorate([
 ], ExpandDirective.prototype, "expandedKeysChange", void 0);
 __decorate([
     Input(),
-    __metadata("design:type", Array),
-    __metadata("design:paramtypes", [Array])
-], ExpandDirective.prototype, "expandedKeys", null);
+    __metadata("design:type", Array)
+], ExpandDirective.prototype, "expandedKeys", void 0);
 ExpandDirective = __decorate([
     Directive({ selector: '[kendoTreeViewExpandable]' }),
     __metadata("design:paramtypes", [ExpandableComponent])
@@ -2782,9 +2776,12 @@ let SelectDirective = class SelectDirective {
             'multiple': (e) => this.selectMultiple(e),
             'single': (e) => this.selectSingle(e)
         };
-        this._selectedKeys = [];
+        /**
+         * 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.selectedKeys.indexOf(this.itemKey({ dataItem, index })) > -1);
+        this.treeView.isSelected = (dataItem, index) => (this.state.has(this.itemKey({ dataItem, index })));
     }
     /**
      * @hidden
@@ -2792,16 +2789,6 @@ let SelectDirective = class SelectDirective {
     set isSelected(value) {
         this.treeView.isSelected = value;
     }
-    /**
-     * Defines the collection that will store the selected keys
-     * ([see example]({% slug selection_treeview %}#toc-selection-modes)).
-     */
-    get selectedKeys() {
-        return this._selectedKeys;
-    }
-    set selectedKeys(keys) {
-        this._selectedKeys = keys;
-    }
     get getAriaMultiselectable() {
         return this.options.mode === 'multiple';
     }
@@ -2816,6 +2803,11 @@ let SelectDirective = class SelectDirective {
         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);
+        }
+    }
     ngOnDestroy() {
         this.subscriptions.unsubscribe();
     }
@@ -2840,29 +2832,29 @@ let SelectDirective = class SelectDirective {
     }
     selectSingle(node) {
         const key = this.itemKey(node);
-        if (this.selectedKeys[0] === key) {
-            return;
+        if (!this.state.has(key)) {
+            this.state.clear();
+            this.state.add(key);
+            this.notify();
         }
-        this.selectedKeys = [key];
-        this.notify();
     }
     selectMultiple(node) {
         const key = this.itemKey(node);
-        const idx = this.selectedKeys.indexOf(key);
-        const isSelected = idx > -1;
+        const isSelected = this.state.has(key);
         if (!isPresent(key)) {
             return;
         }
         if (isSelected) {
-            this.selectedKeys.splice(idx, 1);
+            this.state.delete(key);
         }
         else {
-            this.selectedKeys.push(key);
+            this.state.add(key);
         }
         this.notify();
     }
     notify() {
-        this.selectedKeysChange.emit(this.selectedKeys.slice());
+        this.lastChange = Array.from(this.state);
+        this.selectedKeysChange.emit(this.lastChange);
     }
 };
 __decorate([
@@ -2880,9 +2872,8 @@ __decorate([
 ], SelectDirective.prototype, "selection", void 0);
 __decorate([
     Input(),
-    __metadata("design:type", Array),
-    __metadata("design:paramtypes", [Array])
-], SelectDirective.prototype, "selectedKeys", null);
+    __metadata("design:type", Array)
+], SelectDirective.prototype, "selectedKeys", void 0);
 __decorate([
     Output(),
     __metadata("design:type", EventEmitter)