@progress/kendo-angular-treeview 5.4.2-dev.202111011443 → 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/treeview-filter-settings.d.ts

@@ -32,6 +32,8 @@ export interface TreeViewFilterSettings {
      * Determines the behavior of the filtering algorithm.
      * - `"strict"`—does not show child nodes of filter matches. Instead, only matching nodes themselves are displayed.
      * - `"lenient"`—all child nodes of each filter match are included in the filter results.
+     *
+     * The default mode is `"lenient"`
      */
     mode?: "strict" | "lenient";
 }

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

@@ -25,9 +25,10 @@ import { FilterState } from './filter-state.interface';
  * 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 %}
  */
 export declare class TreeViewComponent implements OnChanges, OnInit, OnDestroy, DataBoundComponent {
@@ -145,18 +146,30 @@ export declare class TreeViewComponent implements OnChanges, OnInit, OnDestroy,
     nodeDblClick: EventEmitter<NodeClickEvent>;
     /**
      * @hidden
+     *
+     * Queries the template for a node template declaration.
+     * Ignored if a `[nodeTemplate]` value is explicitly provided.
      */
-    nodeTemplate: NodeTemplateDirective;
+    nodeTemplateQuery: NodeTemplateDirective;
     /**
      * @hidden
+     *
+     * Defines the template for each node.
+     * Takes precedence over nested templates in the TreeView tag.
      */
     nodeTemplateRef: NodeTemplateDirective;
     /**
      * @hidden
+     *
+     * Queries the template for a load-more button template declaration.
+     * Ignored if a `[loadMoreButtonTemplate]` value is explicitly provided.
      */
-    loadMoreButtonTemplate: LoadMoreButtonTemplateDirective;
+    loadMoreButtonTemplateQuery: LoadMoreButtonTemplateDirective;
     /**
      * @hidden
+     *
+     * Defines the template for each load-more button.
+     * Takes precedence over nested templates in the TreeView tag.
      */
     loadMoreButtonTemplateRef: LoadMoreButtonTemplateDirective;
     /**
@@ -272,6 +285,8 @@ export declare class TreeViewComponent implements OnChanges, OnInit, OnDestroy,
     private _isExpanded;
     private _isSelected;
     private _hasChildren;
+    private _nodeTemplateRef;
+    private _loadMoreButtonTemplateRef;
     private subscriptions;
     private domSubscriptions;
     constructor(element: ElementRef<HTMLElement>, changeDetectorRef: ChangeDetectorRef, expandService: ExpandStateService, navigationService: NavigationService, nodeChildrenService: NodeChildrenService, selectionService: SelectionService, treeViewLookupService: TreeViewLookupService, ngZone: NgZone, renderer: Renderer2, dataChangeNotification: DataChangeNotificationService, localization: LocalizationService);

package/dist/es2015/treeview.component.js

@@ -52,9 +52,10 @@ const 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 %}
  */
 let TreeViewComponent = class TreeViewComponent {
@@ -247,15 +248,27 @@ let TreeViewComponent = class TreeViewComponent {
     }
     /**
      * @hidden
+     *
+     * Defines the template for each node.
+     * Takes precedence over nested templates in the TreeView tag.
      */
     set nodeTemplateRef(template) {
-        this.nodeTemplate = template;
+        this._nodeTemplateRef = template;
+    }
+    get nodeTemplateRef() {
+        return this._nodeTemplateRef || this.nodeTemplateQuery;
     }
     /**
      * @hidden
+     *
+     * Defines the template for each load-more button.
+     * Takes precedence over nested templates in the TreeView tag.
      */
     set loadMoreButtonTemplateRef(template) {
-        this.loadMoreButtonTemplate = template;
+        this._loadMoreButtonTemplateRef = template;
+    }
+    get loadMoreButtonTemplateRef() {
+        return this._loadMoreButtonTemplateRef || this.loadMoreButtonTemplateQuery;
     }
     /**
      * The nodes which will be displayed by the TreeView
@@ -653,18 +666,18 @@ tslib_1.__decorate([
     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),
@@ -765,8 +778,8 @@ TreeViewComponent = tslib_1.__decorate([
             [isExpanded]="isExpanded"
             [isSelected]="isSelected"
             [isVisible]="isVisible"
-            [nodeTemplateRef]="nodeTemplate?.templateRef"
-            [loadMoreButtonTemplateRef]="loadMoreButtonTemplate?.templateRef"
+            [nodeTemplateRef]="nodeTemplateRef?.templateRef"
+            [loadMoreButtonTemplateRef]="loadMoreButtonTemplateRef?.templateRef"
             [textField]="textField"
             [nodes]="fetchNodes"
             [loadMoreService]="loadMoreService"

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 };