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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -22,7 +22,7 @@ var packageMetadata = {
22
22
  name: '@progress/kendo-angular-treeview',
23
23
  productName: 'Kendo UI for Angular',
24
24
  productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
25
- publishDate: 1635777660,
25
+ publishDate: 1638442548,
26
26
  version: '',
27
27
  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'
28
28
  };
@@ -407,17 +407,15 @@ var fetchLoadedDescendants = function (lookup, filterExpression) {
407
407
  /**
408
408
  * @hidden
409
409
  *
410
- * Compares two arrays to determine whether all unique elements in one, are present in the other.
410
+ * Compares two Seets to determine whether all unique elements in one, are present in the other.
411
411
  * Important:
412
412
  * - it disregards the element order
413
- * - it disregards element repetitions - sameValues([1, 1, 2], [1, 2, 2]) will return true
414
413
  */
415
- var sameValues = function (a, b) {
416
- if (a.length !== b.length) {
414
+ var sameValues = function (as, bs) {
415
+ if (as.size !== bs.size) {
417
416
  return false;
418
417
  }
419
- var values = new Set(b);
420
- return a.every(function (v) { return values.has(v); });
418
+ return Array.from(as).every(function (v) { return bs.has(v); });
421
419
  };
422
420
 
423
421
  var safe = function (node) { return (node || {}); };
@@ -1081,9 +1079,10 @@ var providers = [
1081
1079
  * Represents the [Kendo UI TreeView component for Angular]({% slug overview_treeview %}).
1082
1080
  *
1083
1081
  * @example
1084
- * {% meta height:350 %}
1085
- * {% embed_file basic-usage/app.component.ts preview %}
1086
- * {% embed_file basic-usage/app.module.ts %}
1082
+ * {% meta height:450 %}
1083
+ * {% embed_file get-started/app.component.ts preview %}
1084
+ * {% embed_file get-started/app.module.ts %}
1085
+ * {% embed_file shared/main.ts %}
1087
1086
  * {% endmeta %}
1088
1087
  */
1089
1088
  var TreeViewComponent = /** @class */ (function () {
@@ -1284,21 +1283,33 @@ var TreeViewComponent = /** @class */ (function () {
1284
1283
  configurable: true
1285
1284
  });
1286
1285
  Object.defineProperty(TreeViewComponent.prototype, "nodeTemplateRef", {
1286
+ get: function () {
1287
+ return this._nodeTemplateRef || this.nodeTemplateQuery;
1288
+ },
1287
1289
  /**
1288
1290
  * @hidden
1291
+ *
1292
+ * Defines the template for each node.
1293
+ * Takes precedence over nested templates in the TreeView tag.
1289
1294
  */
1290
1295
  set: function (template) {
1291
- this.nodeTemplate = template;
1296
+ this._nodeTemplateRef = template;
1292
1297
  },
1293
1298
  enumerable: true,
1294
1299
  configurable: true
1295
1300
  });
1296
1301
  Object.defineProperty(TreeViewComponent.prototype, "loadMoreButtonTemplateRef", {
1302
+ get: function () {
1303
+ return this._loadMoreButtonTemplateRef || this.loadMoreButtonTemplateQuery;
1304
+ },
1297
1305
  /**
1298
1306
  * @hidden
1307
+ *
1308
+ * Defines the template for each load-more button.
1309
+ * Takes precedence over nested templates in the TreeView tag.
1299
1310
  */
1300
1311
  set: function (template) {
1301
- this.loadMoreButtonTemplate = template;
1312
+ this._loadMoreButtonTemplateRef = template;
1302
1313
  },
1303
1314
  enumerable: true,
1304
1315
  configurable: true
@@ -1734,18 +1745,18 @@ var TreeViewComponent = /** @class */ (function () {
1734
1745
  __metadata("design:type", EventEmitter)
1735
1746
  ], TreeViewComponent.prototype, "nodeDblClick", void 0);
1736
1747
  __decorate([
1737
- ContentChild(NodeTemplateDirective, { static: true }),
1748
+ ContentChild(NodeTemplateDirective, { static: false }),
1738
1749
  __metadata("design:type", NodeTemplateDirective)
1739
- ], TreeViewComponent.prototype, "nodeTemplate", void 0);
1750
+ ], TreeViewComponent.prototype, "nodeTemplateQuery", void 0);
1740
1751
  __decorate([
1741
1752
  Input('nodeTemplate'),
1742
1753
  __metadata("design:type", NodeTemplateDirective),
1743
1754
  __metadata("design:paramtypes", [NodeTemplateDirective])
1744
1755
  ], TreeViewComponent.prototype, "nodeTemplateRef", null);
1745
1756
  __decorate([
1746
- ContentChild(LoadMoreButtonTemplateDirective, { static: true }),
1757
+ ContentChild(LoadMoreButtonTemplateDirective, { static: false }),
1747
1758
  __metadata("design:type", LoadMoreButtonTemplateDirective)
1748
- ], TreeViewComponent.prototype, "loadMoreButtonTemplate", void 0);
1759
+ ], TreeViewComponent.prototype, "loadMoreButtonTemplateQuery", void 0);
1749
1760
  __decorate([
1750
1761
  Input('loadMoreButtonTemplate'),
1751
1762
  __metadata("design:type", LoadMoreButtonTemplateDirective),
@@ -1818,7 +1829,7 @@ var TreeViewComponent = /** @class */ (function () {
1818
1829
  exportAs: 'kendoTreeView',
1819
1830
  providers: providers,
1820
1831
  selector: 'kendo-treeview',
1821
- 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 "
1832
+ 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]=\"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 "
1822
1833
  }),
1823
1834
  __metadata("design:paramtypes", [ElementRef,
1824
1835
  ChangeDetectorRef,
@@ -2241,7 +2252,10 @@ var CheckDirective = /** @class */ (function () {
2241
2252
  'multiple': function (e) { return _this.checkMultiple(e); },
2242
2253
  'single': function (e) { return _this.checkSingle(e); }
2243
2254
  };
2244
- this._checkedKeys = [];
2255
+ /**
2256
+ * Reflectes the internal `checkedKeys` state.
2257
+ */
2258
+ this.state = new Set();
2245
2259
  this.subscriptions.add(this.treeView.checkedChange
2246
2260
  .subscribe(function (e) { return _this.check(e); }));
2247
2261
  var expandedItems = [];
@@ -2260,20 +2274,6 @@ var CheckDirective = /** @class */ (function () {
2260
2274
  enumerable: true,
2261
2275
  configurable: true
2262
2276
  });
2263
- Object.defineProperty(CheckDirective.prototype, "checkedKeys", {
2264
- /**
2265
- * Defines the collection that will store the checked keys
2266
- * ([see example]({% slug checkboxes_treeview %})).
2267
- */
2268
- get: function () {
2269
- return this._checkedKeys;
2270
- },
2271
- set: function (keys) {
2272
- this._checkedKeys = keys;
2273
- },
2274
- enumerable: true,
2275
- configurable: true
2276
- });
2277
2277
  Object.defineProperty(CheckDirective.prototype, "options", {
2278
2278
  get: function () {
2279
2279
  var defaultOptions = {
@@ -2298,6 +2298,9 @@ var CheckDirective = /** @class */ (function () {
2298
2298
  this.treeView.checkboxes = this.options.enabled;
2299
2299
  this.toggleCheckOnClick();
2300
2300
  }
2301
+ if (isChanged('checkedKeys', changes, false) && changes.checkedKeys.currentValue !== this.lastChange) {
2302
+ this.state = new Set(changes.checkedKeys.currentValue);
2303
+ }
2301
2304
  };
2302
2305
  CheckDirective.prototype.ngOnDestroy = function () {
2303
2306
  this.subscriptions.unsubscribe();
@@ -2307,11 +2310,11 @@ var CheckDirective = /** @class */ (function () {
2307
2310
  if (!this.checkKey) {
2308
2311
  return this.isIndexChecked(index);
2309
2312
  }
2310
- var keyIndex = this.checkedKeys.indexOf(this.itemKey({ dataItem: dataItem, index: index }));
2311
- return keyIndex > -1 ? 'checked' : 'none';
2313
+ var hasKey = this.state.has(this.itemKey({ dataItem: dataItem, index: index }));
2314
+ return hasKey ? 'checked' : 'none';
2312
2315
  };
2313
2316
  CheckDirective.prototype.isIndexChecked = function (index) {
2314
- var checkedKeys = this.checkedKeys.filter(matchKey(index));
2317
+ var checkedKeys = Array.from(this.state).filter(matchKey(index));
2315
2318
  if (indexChecked(checkedKeys, index)) {
2316
2319
  return 'checked';
2317
2320
  }
@@ -2342,7 +2345,11 @@ var CheckDirective = /** @class */ (function () {
2342
2345
  };
2343
2346
  CheckDirective.prototype.checkSingle = function (node) {
2344
2347
  var key = this.itemKey(node.item);
2345
- this.checkedKeys = this.checkedKeys[0] !== key ? [key] : [];
2348
+ var hasKey = this.state.has(key);
2349
+ this.state.clear();
2350
+ if (!hasKey) {
2351
+ this.state.add(key);
2352
+ }
2346
2353
  this.notify();
2347
2354
  };
2348
2355
  CheckDirective.prototype.checkMultiple = function (node) {
@@ -2379,7 +2386,6 @@ var CheckDirective = /** @class */ (function () {
2379
2386
  if (!isPresent(currentKey)) {
2380
2387
  return;
2381
2388
  }
2382
- var checkedKeys = new Set(this.checkedKeys);
2383
2389
  var pendingCheck = [currentKey];
2384
2390
  if (this.options.checkChildren) {
2385
2391
  var descendants = fetchLoadedDescendants(node, function (_a) {
@@ -2393,63 +2399,59 @@ var CheckDirective = /** @class */ (function () {
2393
2399
  });
2394
2400
  pendingCheck.push.apply(pendingCheck, descendants);
2395
2401
  }
2396
- var shouldCheck = !checkedKeys.has(currentKey);
2402
+ var shouldCheck = !this.state.has(currentKey);
2397
2403
  pendingCheck.forEach(function (key) {
2398
2404
  if (shouldCheck) {
2399
- checkedKeys.add(key);
2405
+ _this.state.add(key);
2400
2406
  }
2401
2407
  else {
2402
- checkedKeys.delete(key);
2408
+ _this.state.delete(key);
2403
2409
  }
2404
2410
  });
2405
- this.checkedKeys = Array.from(checkedKeys);
2406
2411
  };
2407
2412
  CheckDirective.prototype.checkParents = function (parent) {
2408
2413
  var _this = this;
2409
2414
  if (!isPresent(parent)) {
2410
2415
  return;
2411
2416
  }
2412
- var checkedKeys = new Set(this.checkedKeys);
2413
2417
  var currentParent = parent;
2414
2418
  while (currentParent) {
2415
2419
  var parentKey = this.itemKey(currentParent.item);
2416
- var allChildrenSelected = currentParent.children.every(function (item) { return checkedKeys.has(_this.itemKey(item)); });
2420
+ var allChildrenSelected = currentParent.children.every(function (item) { return _this.state.has(_this.itemKey(item)); });
2417
2421
  if (allChildrenSelected) {
2418
- checkedKeys.add(parentKey);
2422
+ this.state.add(parentKey);
2419
2423
  }
2420
2424
  else {
2421
- checkedKeys.delete(parentKey);
2425
+ this.state.delete(parentKey);
2422
2426
  }
2423
2427
  currentParent = currentParent.parent;
2424
2428
  }
2425
- this.checkedKeys = Array.from(checkedKeys);
2426
2429
  };
2427
2430
  CheckDirective.prototype.notify = function () {
2428
- this.checkedKeysChange.emit(this.checkedKeys.slice());
2431
+ this.lastChange = Array.from(this.state);
2432
+ this.checkedKeysChange.emit(this.lastChange);
2429
2433
  };
2430
2434
  CheckDirective.prototype.addCheckedItemsChildren = function (lookups) {
2431
2435
  var _this = this;
2432
2436
  if (!isPresent(lookups) || lookups.length === 0) {
2433
2437
  return;
2434
2438
  }
2435
- var initiallyCheckedItemsCount = this.checkedKeys.length;
2436
- var checkedKeys = new Set(this.checkedKeys);
2439
+ var initiallyCheckedItemsCount = this.state.size;
2437
2440
  lookups.forEach(function (lookup) {
2438
2441
  var itemKey = _this.itemKey(lookup.item);
2439
- if (!checkedKeys.has(itemKey)) {
2442
+ if (!_this.state.has(itemKey)) {
2440
2443
  return;
2441
2444
  }
2442
2445
  lookup.children.forEach(function (item) {
2443
2446
  // ensure both the parent item and each child node is enabled
2444
2447
  if (!_this.treeView.isDisabled(lookup.item.dataItem, lookup.item.index) &&
2445
2448
  !_this.treeView.isDisabled(item.dataItem, item.index)) {
2446
- checkedKeys.add(_this.itemKey(item));
2449
+ _this.state.add(_this.itemKey(item));
2447
2450
  }
2448
2451
  });
2449
2452
  });
2450
- var hasNewlyCheckedItems = initiallyCheckedItemsCount !== checkedKeys.size;
2453
+ var hasNewlyCheckedItems = initiallyCheckedItemsCount !== this.state.size;
2451
2454
  if (hasNewlyCheckedItems) {
2452
- this.checkedKeys = Array.from(checkedKeys);
2453
2455
  this.zone.run(function () { return _this.notify(); });
2454
2456
  }
2455
2457
  };
@@ -2464,9 +2466,8 @@ var CheckDirective = /** @class */ (function () {
2464
2466
  ], CheckDirective.prototype, "checkKey", void 0);
2465
2467
  __decorate([
2466
2468
  Input(),
2467
- __metadata("design:type", Array),
2468
- __metadata("design:paramtypes", [Array])
2469
- ], CheckDirective.prototype, "checkedKeys", null);
2469
+ __metadata("design:type", Array)
2470
+ ], CheckDirective.prototype, "checkedKeys", void 0);
2470
2471
  __decorate([
2471
2472
  Input('kendoTreeViewCheckable'),
2472
2473
  __metadata("design:type", Object)
@@ -2571,8 +2572,11 @@ var ExpandDirective = /** @class */ (function () {
2571
2572
  */
2572
2573
  this.expandedKeysChange = new EventEmitter();
2573
2574
  this.subscriptions = new Subscription();
2574
- this._expandedKeys = [];
2575
- this.originalExpandedKeys = [];
2575
+ /**
2576
+ * Reflectes the internal `expandedKeys` state.
2577
+ */
2578
+ this.state = new Set();
2579
+ this.originalExpandedKeys = new Set();
2576
2580
  this.isFiltered = false;
2577
2581
  /**
2578
2582
  * Fills array with the correct expand keys according to wrapper metadata.
@@ -2605,7 +2609,7 @@ var ExpandDirective = /** @class */ (function () {
2605
2609
  this.subscriptions.add(this.component.filterStateChange.subscribe(this.handleAutoExpand.bind(this)));
2606
2610
  }
2607
2611
  this.component.isExpanded = function (dataItem, index) {
2608
- return _this.expandedKeys.indexOf(_this.itemKey({ dataItem: dataItem, index: index })) > -1;
2612
+ return _this.state.has(_this.itemKey({ dataItem: dataItem, index: index }));
2609
2613
  };
2610
2614
  }
2611
2615
  Object.defineProperty(ExpandDirective.prototype, "isExpanded", {
@@ -2626,19 +2630,11 @@ var ExpandDirective = /** @class */ (function () {
2626
2630
  enumerable: true,
2627
2631
  configurable: true
2628
2632
  });
2629
- Object.defineProperty(ExpandDirective.prototype, "expandedKeys", {
2630
- /**
2631
- * Defines the collection that will store the expanded keys.
2632
- */
2633
- get: function () {
2634
- return this._expandedKeys;
2635
- },
2636
- set: function (keys) {
2637
- this._expandedKeys = keys;
2638
- },
2639
- enumerable: true,
2640
- configurable: true
2641
- });
2633
+ ExpandDirective.prototype.ngOnChanges = function (changes) {
2634
+ if (isChanged('expandedKeys', changes, false) && changes.expandedKeys.currentValue !== this.lastChange) {
2635
+ this.state = new Set(changes.expandedKeys.currentValue);
2636
+ }
2637
+ };
2642
2638
  ExpandDirective.prototype.ngOnDestroy = function () {
2643
2639
  this.subscriptions.unsubscribe();
2644
2640
  };
@@ -2658,19 +2654,19 @@ var ExpandDirective = /** @class */ (function () {
2658
2654
  };
2659
2655
  ExpandDirective.prototype.toggleExpand = function (_a) {
2660
2656
  var index = _a.index, dataItem = _a.dataItem, expand = _a.expand;
2661
- var item = this.itemKey({ index: index, dataItem: dataItem });
2662
- var idx = this.expandedKeys.indexOf(item);
2657
+ var key = this.itemKey({ index: index, dataItem: dataItem });
2658
+ var isExpanded = this.state.has(key);
2663
2659
  var notify = false;
2664
- if (idx > -1 && !expand) {
2665
- this.expandedKeys.splice(idx, 1);
2660
+ if (isExpanded && !expand) {
2661
+ this.state.delete(key);
2666
2662
  notify = true;
2667
2663
  }
2668
- else if (idx === -1 && expand) {
2669
- this.expandedKeys.push(item);
2664
+ else if (!isExpanded && expand) {
2665
+ this.state.add(key);
2670
2666
  notify = true;
2671
2667
  }
2672
2668
  if (notify) {
2673
- this.expandedKeysChange.emit(this.expandedKeys);
2669
+ this.notify();
2674
2670
  }
2675
2671
  };
2676
2672
  ExpandDirective.prototype.handleAutoExpand = function (_a) {
@@ -2681,7 +2677,7 @@ var ExpandDirective = /** @class */ (function () {
2681
2677
  }
2682
2678
  var _b = this.filterExpandSettings, maxAutoExpandResults = _b.maxAutoExpandResults, autoExpandMatches = _b.expandMatches, expandedOnClear = _b.expandedOnClear;
2683
2679
  if (!this.isFiltered) {
2684
- this.originalExpandedKeys = this.expandedKeys.slice();
2680
+ this.originalExpandedKeys = new Set(this.state);
2685
2681
  }
2686
2682
  var exitingFilteredState = this.isFiltered && !term;
2687
2683
  var maxExceeded = maxAutoExpandResults !== -1 && matchCount > maxAutoExpandResults;
@@ -2689,18 +2685,18 @@ var ExpandDirective = /** @class */ (function () {
2689
2685
  if (exitAutoExpandedState) {
2690
2686
  switch (expandedOnClear) {
2691
2687
  case "initial": {
2692
- if (!sameValues(this.expandedKeys, this.originalExpandedKeys)) {
2693
- this.expandedKeys = this.originalExpandedKeys;
2694
- this.expandedKeysChange.emit(this.expandedKeys);
2688
+ if (!sameValues(this.state, this.originalExpandedKeys)) {
2689
+ this.state = this.originalExpandedKeys;
2690
+ this.notify();
2695
2691
  }
2696
2692
  break;
2697
2693
  }
2698
2694
  case "all": {
2699
- this.expandedKeys = nodes.reduce(function (acc, rootNode) {
2695
+ this.state = new Set(nodes.reduce(function (acc, rootNode) {
2700
2696
  _this.getEveryExpandKey(acc, rootNode);
2701
2697
  return acc;
2702
- }, []);
2703
- this.expandedKeysChange.emit(this.expandedKeys);
2698
+ }, []));
2699
+ this.notify();
2704
2700
  break;
2705
2701
  }
2706
2702
  case "unchanged": {
@@ -2708,9 +2704,9 @@ var ExpandDirective = /** @class */ (function () {
2708
2704
  }
2709
2705
  case "none":
2710
2706
  default: {
2711
- if (this.expandedKeys.length !== 0) {
2712
- this.expandedKeys = [];
2713
- this.expandedKeysChange.emit(this.expandedKeys);
2707
+ if (this.state.size !== 0) {
2708
+ this.state.clear();
2709
+ this.notify();
2714
2710
  }
2715
2711
  break;
2716
2712
  }
@@ -2718,16 +2714,20 @@ var ExpandDirective = /** @class */ (function () {
2718
2714
  this.isFiltered = false;
2719
2715
  return;
2720
2716
  }
2721
- var indicesToExpand = nodes.reduce(function (acc, rootNode) {
2717
+ var indicesToExpand = new Set(nodes.reduce(function (acc, rootNode) {
2722
2718
  _this.updateExpandedNodes(acc, rootNode, autoExpandMatches);
2723
2719
  return acc;
2724
- }, []);
2725
- if (!sameValues(this.expandedKeys, indicesToExpand)) {
2726
- this.expandedKeys = indicesToExpand;
2727
- this.expandedKeysChange.emit(this.expandedKeys);
2720
+ }, []));
2721
+ if (!sameValues(this.state, indicesToExpand)) {
2722
+ this.state = indicesToExpand;
2723
+ this.notify();
2728
2724
  }
2729
2725
  this.isFiltered = true;
2730
2726
  };
2727
+ ExpandDirective.prototype.notify = function () {
2728
+ this.lastChange = Array.from(this.state);
2729
+ this.expandedKeysChange.emit(this.lastChange);
2730
+ };
2731
2731
  __decorate([
2732
2732
  Input(),
2733
2733
  __metadata("design:type", Function),
@@ -2747,9 +2747,8 @@ var ExpandDirective = /** @class */ (function () {
2747
2747
  ], ExpandDirective.prototype, "expandedKeysChange", void 0);
2748
2748
  __decorate([
2749
2749
  Input(),
2750
- __metadata("design:type", Array),
2751
- __metadata("design:paramtypes", [Array])
2752
- ], ExpandDirective.prototype, "expandedKeys", null);
2750
+ __metadata("design:type", Array)
2751
+ ], ExpandDirective.prototype, "expandedKeys", void 0);
2753
2752
  ExpandDirective = __decorate([
2754
2753
  Directive({ selector: '[kendoTreeViewExpandable]' }),
2755
2754
  __metadata("design:paramtypes", [ExpandableComponent])
@@ -2774,9 +2773,12 @@ var SelectDirective = /** @class */ (function () {
2774
2773
  'multiple': function (e) { return _this.selectMultiple(e); },
2775
2774
  'single': function (e) { return _this.selectSingle(e); }
2776
2775
  };
2777
- this._selectedKeys = [];
2776
+ /**
2777
+ * Reflectes the internal `selectedKeys` state.
2778
+ */
2779
+ this.state = new Set();
2778
2780
  this.subscriptions.add(this.treeView.selectionChange.subscribe(this.select.bind(this)));
2779
- this.treeView.isSelected = function (dataItem, index) { return (_this.selectedKeys.indexOf(_this.itemKey({ dataItem: dataItem, index: index })) > -1); };
2781
+ this.treeView.isSelected = function (dataItem, index) { return (_this.state.has(_this.itemKey({ dataItem: dataItem, index: index }))); };
2780
2782
  }
2781
2783
  Object.defineProperty(SelectDirective.prototype, "isSelected", {
2782
2784
  /**
@@ -2788,20 +2790,6 @@ var SelectDirective = /** @class */ (function () {
2788
2790
  enumerable: true,
2789
2791
  configurable: true
2790
2792
  });
2791
- Object.defineProperty(SelectDirective.prototype, "selectedKeys", {
2792
- /**
2793
- * Defines the collection that will store the selected keys
2794
- * ([see example]({% slug selection_treeview %}#toc-selection-modes)).
2795
- */
2796
- get: function () {
2797
- return this._selectedKeys;
2798
- },
2799
- set: function (keys) {
2800
- this._selectedKeys = keys;
2801
- },
2802
- enumerable: true,
2803
- configurable: true
2804
- });
2805
2793
  Object.defineProperty(SelectDirective.prototype, "getAriaMultiselectable", {
2806
2794
  get: function () {
2807
2795
  return this.options.mode === 'multiple';
@@ -2824,6 +2812,11 @@ var SelectDirective = /** @class */ (function () {
2824
2812
  enumerable: true,
2825
2813
  configurable: true
2826
2814
  });
2815
+ SelectDirective.prototype.ngOnChanges = function (changes) {
2816
+ if (isChanged('selectedKeys', changes, false) && changes.selectedKeys.currentValue !== this.lastChange) {
2817
+ this.state = new Set(changes.selectedKeys.currentValue);
2818
+ }
2819
+ };
2827
2820
  SelectDirective.prototype.ngOnDestroy = function () {
2828
2821
  this.subscriptions.unsubscribe();
2829
2822
  };
@@ -2848,29 +2841,29 @@ var SelectDirective = /** @class */ (function () {
2848
2841
  };
2849
2842
  SelectDirective.prototype.selectSingle = function (node) {
2850
2843
  var key = this.itemKey(node);
2851
- if (this.selectedKeys[0] === key) {
2852
- return;
2844
+ if (!this.state.has(key)) {
2845
+ this.state.clear();
2846
+ this.state.add(key);
2847
+ this.notify();
2853
2848
  }
2854
- this.selectedKeys = [key];
2855
- this.notify();
2856
2849
  };
2857
2850
  SelectDirective.prototype.selectMultiple = function (node) {
2858
2851
  var key = this.itemKey(node);
2859
- var idx = this.selectedKeys.indexOf(key);
2860
- var isSelected = idx > -1;
2852
+ var isSelected = this.state.has(key);
2861
2853
  if (!isPresent(key)) {
2862
2854
  return;
2863
2855
  }
2864
2856
  if (isSelected) {
2865
- this.selectedKeys.splice(idx, 1);
2857
+ this.state.delete(key);
2866
2858
  }
2867
2859
  else {
2868
- this.selectedKeys.push(key);
2860
+ this.state.add(key);
2869
2861
  }
2870
2862
  this.notify();
2871
2863
  };
2872
2864
  SelectDirective.prototype.notify = function () {
2873
- this.selectedKeysChange.emit(this.selectedKeys.slice());
2865
+ this.lastChange = Array.from(this.state);
2866
+ this.selectedKeysChange.emit(this.lastChange);
2874
2867
  };
2875
2868
  __decorate([
2876
2869
  Input(),
@@ -2887,9 +2880,8 @@ var SelectDirective = /** @class */ (function () {
2887
2880
  ], SelectDirective.prototype, "selection", void 0);
2888
2881
  __decorate([
2889
2882
  Input(),
2890
- __metadata("design:type", Array),
2891
- __metadata("design:paramtypes", [Array])
2892
- ], SelectDirective.prototype, "selectedKeys", null);
2883
+ __metadata("design:type", Array)
2884
+ ], SelectDirective.prototype, "selectedKeys", void 0);
2893
2885
  __decorate([
2894
2886
  Output(),
2895
2887
  __metadata("design:type", EventEmitter)