@progress/kendo-angular-dropdowns 5.4.0-dev.202106231124 → 5.5.0-dev.202110281138

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.
Files changed (47) hide show
  1. package/dist/cdn/js/kendo-angular-dropdowns.js +2 -2
  2. package/dist/cdn/main.js +1 -1
  3. package/dist/es/common/list.component.js +1 -1
  4. package/dist/es/common/localization/messages.js +4 -0
  5. package/dist/es/common/shared.module.js +3 -1
  6. package/dist/es/dropdowntrees/checked-state/base-check.directive.js +54 -0
  7. package/dist/es/dropdowntrees/checked-state/check-all.directive.js +181 -0
  8. package/dist/es/dropdowntrees/checked-state/check.directive.js +15 -36
  9. package/dist/es/dropdowntrees/dropdowntree.component.js +4 -0
  10. package/dist/es/dropdowntrees/multiselecttree.component.js +66 -17
  11. package/dist/es/index.js +2 -0
  12. package/dist/es/multiselect/multiselect.component.js +8 -1
  13. package/dist/es/package-metadata.js +1 -1
  14. package/dist/es2015/common/list.component.js +6 -6
  15. package/dist/es2015/common/localization/messages.d.ts +4 -0
  16. package/dist/es2015/common/localization/messages.js +4 -0
  17. package/dist/es2015/common/shared.module.js +3 -1
  18. package/dist/es2015/dropdowntrees/checked-state/base-check.directive.d.ts +32 -0
  19. package/dist/es2015/dropdowntrees/checked-state/base-check.directive.js +48 -0
  20. package/dist/es2015/dropdowntrees/checked-state/check-all.directive.d.ts +53 -0
  21. package/dist/es2015/dropdowntrees/checked-state/check-all.directive.js +161 -0
  22. package/dist/es2015/dropdowntrees/checked-state/check.directive.d.ts +3 -5
  23. package/dist/es2015/dropdowntrees/checked-state/check.directive.js +5 -26
  24. package/dist/es2015/dropdowntrees/dropdowntree.component.d.ts +4 -0
  25. package/dist/es2015/dropdowntrees/dropdowntree.component.js +4 -0
  26. package/dist/es2015/dropdowntrees/multiselecttree.component.d.ts +18 -0
  27. package/dist/es2015/dropdowntrees/multiselecttree.component.js +91 -20
  28. package/dist/es2015/index.d.ts +2 -0
  29. package/dist/es2015/index.js +2 -0
  30. package/dist/es2015/index.metadata.json +1 -1
  31. package/dist/es2015/multiselect/multiselect.component.js +8 -1
  32. package/dist/es2015/package-metadata.js +1 -1
  33. package/dist/fesm2015/index.js +314 -55
  34. package/dist/fesm5/index.js +319 -57
  35. package/dist/npm/common/list.component.js +1 -1
  36. package/dist/npm/common/localization/messages.js +4 -0
  37. package/dist/npm/common/shared.module.js +3 -1
  38. package/dist/npm/dropdowntrees/checked-state/base-check.directive.js +56 -0
  39. package/dist/npm/dropdowntrees/checked-state/check-all.directive.js +183 -0
  40. package/dist/npm/dropdowntrees/checked-state/check.directive.js +14 -35
  41. package/dist/npm/dropdowntrees/dropdowntree.component.js +4 -0
  42. package/dist/npm/dropdowntrees/multiselecttree.component.js +66 -17
  43. package/dist/npm/index.js +4 -0
  44. package/dist/npm/multiselect/multiselect.component.js +8 -1
  45. package/dist/npm/package-metadata.js +1 -1
  46. package/dist/systemjs/kendo-angular-dropdowns.js +1 -1
  47. package/package.json +1 -1
@@ -908,7 +908,11 @@ let MultiSelectComponent = MultiSelectComponent_1 = class MultiSelectComponent {
908
908
  data = data.filter(item => !item.header).map(item => item.value);
909
909
  }
910
910
  const dataItemValues = new Set(dataItems.map(item => getter(item, this.valueField)));
911
- this.value = this.value.filter(value => !dataItemValues.has(getter(value, this.valueField)));
911
+ this.value = this.value.filter(value => {
912
+ const index = selectedIndices([value], data, this.valueField)[0];
913
+ const isDataItemDisabled = this.disabledItemsService.isIndexDisabled(index);
914
+ return !dataItemValues.has(getter(value, this.valueField)) || isDataItemDisabled;
915
+ });
912
916
  this.emitValueChange();
913
917
  }
914
918
  removeSingleTag(dataItem) {
@@ -917,6 +921,9 @@ let MultiSelectComponent = MultiSelectComponent_1 = class MultiSelectComponent {
917
921
  data = data.filter(item => !item.header).map(item => item.value);
918
922
  }
919
923
  const index = selectedIndices([dataItem], data, this.valueField)[0];
924
+ if (this.disabledItemsService.isIndexDisabled(index)) {
925
+ return;
926
+ }
920
927
  if (isNumber(index)) {
921
928
  this.selectionService.unselect(index);
922
929
  this.selectionService.focused = index;
@@ -9,7 +9,7 @@ export const packageMetadata = {
9
9
  name: '@progress/kendo-angular-dropdowns',
10
10
  productName: 'Kendo UI for Angular',
11
11
  productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
12
- publishDate: 1624447339,
12
+ publishDate: 1635420981,
13
13
  version: '',
14
14
  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'
15
15
  };
@@ -23,7 +23,7 @@ const packageMetadata = {
23
23
  name: '@progress/kendo-angular-dropdowns',
24
24
  productName: 'Kendo UI for Angular',
25
25
  productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
26
- publishDate: 1624447339,
26
+ publishDate: 1635420981,
27
27
  version: '',
28
28
  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'
29
29
  };
@@ -1734,12 +1734,12 @@ ListComponent = __decorate([
1734
1734
  [attr.tabIndex]="-1"
1735
1735
  class="k-item"
1736
1736
  [ngClass]="{ 'k-virtual-item': virtual, 'k-state-disabled': isDisabled(itemIndex) }">
1737
- <label class="k-checkbox-label">
1738
- <input *ngIf="checkboxes.enabled"
1739
- type="checkbox"
1740
- class="k-checkbox"
1741
- (change)="onCheckedChange($event, itemIndex)"
1742
- [checked]="isChecked(itemIndex)"
1737
+ <label *ngIf="checkboxes.enabled"
1738
+ class="k-checkbox-label">
1739
+ <input type="checkbox"
1740
+ class="k-checkbox"
1741
+ (change)="onCheckedChange($event, itemIndex)"
1742
+ [checked]="isChecked(itemIndex)"
1743
1743
  />
1744
1744
  </label>
1745
1745
  <ng-template *ngIf="template"
@@ -6859,7 +6859,11 @@ let MultiSelectComponent = MultiSelectComponent_1 = class MultiSelectComponent {
6859
6859
  data = data.filter(item => !item.header).map(item => item.value);
6860
6860
  }
6861
6861
  const dataItemValues = new Set(dataItems.map(item => getter$1(item, this.valueField)));
6862
- this.value = this.value.filter(value => !dataItemValues.has(getter$1(value, this.valueField)));
6862
+ this.value = this.value.filter(value => {
6863
+ const index = selectedIndices([value], data, this.valueField)[0];
6864
+ const isDataItemDisabled = this.disabledItemsService.isIndexDisabled(index);
6865
+ return !dataItemValues.has(getter$1(value, this.valueField)) || isDataItemDisabled;
6866
+ });
6863
6867
  this.emitValueChange();
6864
6868
  }
6865
6869
  removeSingleTag(dataItem) {
@@ -6868,6 +6872,9 @@ let MultiSelectComponent = MultiSelectComponent_1 = class MultiSelectComponent {
6868
6872
  data = data.filter(item => !item.header).map(item => item.value);
6869
6873
  }
6870
6874
  const index = selectedIndices([dataItem], data, this.valueField)[0];
6875
+ if (this.disabledItemsService.isIndexDisabled(index)) {
6876
+ return;
6877
+ }
6871
6878
  if (isNumber(index)) {
6872
6879
  this.selectionService.unselect(index);
6873
6880
  this.selectionService.focused = index;
@@ -8258,6 +8265,10 @@ let DropDownTreeComponent = DropDownTreeComponent_1 = class DropDownTreeComponen
8258
8265
  * @hidden
8259
8266
  */
8260
8267
  this.selectedKeys = [];
8268
+ /**
8269
+ * @hidden
8270
+ */
8271
+ this.filterStateChange = new EventEmitter();
8261
8272
  /**
8262
8273
  * @hidden
8263
8274
  */
@@ -9350,6 +9361,12 @@ let MultiSelectTreeComponent = MultiSelectTreeComponent_1 = class MultiSelectTre
9350
9361
  * @default false
9351
9362
  */
9352
9363
  this.filterable = false;
9364
+ /**
9365
+ * If `checkАll` is set to `true` and the checkboxes are enabled, a tri-state checkbox appears above the embedded treeview.
9366
+ * Clicking the checkbox checks or unchecks all enabled items of the treeview that are loaded.
9367
+ * @default false
9368
+ */
9369
+ this.checkAll = false;
9353
9370
  /**
9354
9371
  * A function which determines if a specific node has child nodes.
9355
9372
  */
@@ -9424,6 +9441,10 @@ let MultiSelectTreeComponent = MultiSelectTreeComponent_1 = class MultiSelectTre
9424
9441
  * Fires when the value of the built-in filter input element changes.
9425
9442
  */
9426
9443
  this.filterChange = new EventEmitter();
9444
+ /**
9445
+ * @hidden
9446
+ */
9447
+ this.filterStateChange = new EventEmitter();
9427
9448
  /**
9428
9449
  * @hidden
9429
9450
  */
@@ -9449,6 +9470,7 @@ let MultiSelectTreeComponent = MultiSelectTreeComponent_1 = class MultiSelectTre
9449
9470
  this._checkableSettings = DEFAULT_CHECKABLE_SETTINGS;
9450
9471
  this._isFocused = false;
9451
9472
  this.subscriptions = [];
9473
+ this.lastAction = 'check';
9452
9474
  this.onTouchedCallback = noop;
9453
9475
  this.onChangeCallback = noop;
9454
9476
  this.direction = localization.rtl ? 'rtl' : 'ltr';
@@ -9458,7 +9480,7 @@ let MultiSelectTreeComponent = MultiSelectTreeComponent_1 = class MultiSelectTre
9458
9480
  this._treeview = treeview;
9459
9481
  if (treeview) {
9460
9482
  // If filtering is enabled, focus the TreeView on mobile devices instead of the filter input
9461
- if (this.isFocused && !this.filterable || this.touchEnabled) {
9483
+ if (this.isFocused && !this.filterable && !this.checkAll || this.touchEnabled) {
9462
9484
  treeview.focus();
9463
9485
  }
9464
9486
  /**
@@ -9689,6 +9711,12 @@ let MultiSelectTreeComponent = MultiSelectTreeComponent_1 = class MultiSelectTre
9689
9711
  get isWrapperActive() {
9690
9712
  return document.activeElement === this.wrapper.nativeElement;
9691
9713
  }
9714
+ get isFilterActive() {
9715
+ return this.filterInput && document.activeElement === this.filterInput.nativeElement;
9716
+ }
9717
+ get isCheckAllActive() {
9718
+ return this.checkAllInput && document.activeElement === this.checkAllInput.nativeElement;
9719
+ }
9692
9720
  ngOnInit() {
9693
9721
  this.renderer.removeAttribute(this.hostElement.nativeElement, 'tabindex');
9694
9722
  this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-expanded', String(this.isOpen));
@@ -9905,6 +9933,7 @@ let MultiSelectTreeComponent = MultiSelectTreeComponent_1 = class MultiSelectTre
9905
9933
  */
9906
9934
  handleCheckedItemsChange(items) {
9907
9935
  this.valueDepth = items.map(item => item.level);
9936
+ this.lastAction = items.length > this.dataItems.length ? 'check' : 'uncheck';
9908
9937
  this.dataItems = items.slice();
9909
9938
  this.updateValue(this.dataItems);
9910
9939
  }
@@ -9924,12 +9953,12 @@ let MultiSelectTreeComponent = MultiSelectTreeComponent_1 = class MultiSelectTre
9924
9953
  if (tag instanceof Array) {
9925
9954
  // Remove group tag
9926
9955
  this.dataItems = this.dataItems.filter((_item, i) => i < this.showAfter || this.disabledIndices.has(i));
9927
- this.valueDepth = this.valueDepth.filter((_item, i) => i < this.showAfter);
9956
+ this.valueDepth = this.valueDepth.filter((_item, i) => i < this.showAfter || this.disabledIndices.has(i));
9928
9957
  }
9929
9958
  else {
9930
9959
  // Remove single tag
9931
- this.dataItems = this.dataItems.filter((_item, i) => i !== index);
9932
- this.valueDepth = this.valueDepth.filter((_item, i) => i !== index);
9960
+ this.dataItems = this.dataItems.filter((_item, i) => i !== index || this.disabledIndices.has(i));
9961
+ this.valueDepth = this.valueDepth.filter((_item, i) => i !== index || this.disabledIndices.has(i));
9933
9962
  }
9934
9963
  this.updateValue(this.dataItems);
9935
9964
  // focus the wrapper if the component is not focused - the floating label reacts to focus/blur
@@ -9954,7 +9983,7 @@ let MultiSelectTreeComponent = MultiSelectTreeComponent_1 = class MultiSelectTre
9954
9983
  this.value = this.value.filter((_item, index) => this.disabledIndices.has(index));
9955
9984
  this.dataItems = this.dataItems.filter((_item, index) => this.disabledIndices.has(index));
9956
9985
  this.valueDepth = this.valueDepth.filter((_depth, index) => this.disabledIndices.has(index));
9957
- this.emitValueChange();
9986
+ this.emitValueChange(this.value);
9958
9987
  }
9959
9988
  /**
9960
9989
  * @hidden
@@ -9993,6 +10022,13 @@ let MultiSelectTreeComponent = MultiSelectTreeComponent_1 = class MultiSelectTre
9993
10022
  this.filterChange.next(term);
9994
10023
  this.allNodesHidden = this.nodes.every((node, index) => !this.isVisible(node, String(index)));
9995
10024
  }
10025
+ /**
10026
+ * @hidden
10027
+ */
10028
+ toggleCheckAll() {
10029
+ this.checkAllInput.nativeElement.focus();
10030
+ this.checkAllInput.nativeElement.click();
10031
+ }
9996
10032
  verifySettings() {
9997
10033
  if (!isDevMode()) {
9998
10034
  return;
@@ -10115,17 +10151,20 @@ let MultiSelectTreeComponent = MultiSelectTreeComponent_1 = class MultiSelectTre
10115
10151
  return;
10116
10152
  }
10117
10153
  const isFirstNodeActive = this.treeview['navigationService']['activeIndex'] === '0';
10118
- if (this.filterable) {
10119
- const isFilterActive = this.filterInput.nativeElement === document.activeElement;
10120
- if (isFilterActive) {
10121
- this.focus();
10122
- }
10123
- else if (!isFilterActive && isFirstNodeActive) {
10124
- this.filterInput.nativeElement.focus();
10125
- }
10126
- }
10127
- if (!this.filterable && isFirstNodeActive) {
10154
+ // Current focus is on the filter input => should focus the wrapper
10155
+ if (this.filterable && this.isFilterActive) {
10128
10156
  this.focus();
10157
+ // Current focus is on the treeview first node => should focus the check all checkbox if enabled
10158
+ }
10159
+ else if (this.checkAll && !this.isCheckAllActive && isFirstNodeActive) {
10160
+ this.checkAllInput.nativeElement.focus();
10161
+ // Current focus is either on the check all checkbox or the treeview's first node
10162
+ // => should focus either the filter input (if enabled) or the wrapper
10163
+ }
10164
+ else if (this.isCheckAllActive || isFirstNodeActive) {
10165
+ this.filterable ?
10166
+ this.filterInput.nativeElement.focus() :
10167
+ this.focus();
10129
10168
  }
10130
10169
  }
10131
10170
  handleDownKey(event) {
@@ -10133,9 +10172,14 @@ let MultiSelectTreeComponent = MultiSelectTreeComponent_1 = class MultiSelectTre
10133
10172
  return;
10134
10173
  }
10135
10174
  event.originalEvent.preventDefault();
10136
- // Put the focus back on the filter input if the wrapper is focused
10175
+ // Current focus is on the wrapper => should focus the filter input
10137
10176
  if (this.filterable && this.isWrapperActive) {
10138
10177
  this.filterInput.nativeElement.focus();
10178
+ // Current focus is on the wrapper/filter input => should focus check all checkbox if enabled
10179
+ }
10180
+ else if (this.checkAll && (this.isWrapperActive || this.isFilterActive)) {
10181
+ this.checkAllInput.nativeElement.focus();
10182
+ // Should focus the treeview if filterable and check all are disabled
10139
10183
  }
10140
10184
  else if (!this.treeview.isActive) {
10141
10185
  this.treeview.focus();
@@ -10293,6 +10337,10 @@ __decorate([
10293
10337
  ViewChild('filterInput', { static: false }),
10294
10338
  __metadata("design:type", ElementRef)
10295
10339
  ], MultiSelectTreeComponent.prototype, "filterInput", void 0);
10340
+ __decorate([
10341
+ ViewChild('checkAllInput', { static: false }),
10342
+ __metadata("design:type", ElementRef)
10343
+ ], MultiSelectTreeComponent.prototype, "checkAllInput", void 0);
10296
10344
  __decorate([
10297
10345
  Input(),
10298
10346
  __metadata("design:type", Number),
@@ -10375,6 +10423,10 @@ __decorate([
10375
10423
  Input(),
10376
10424
  __metadata("design:type", Boolean)
10377
10425
  ], MultiSelectTreeComponent.prototype, "filterable", void 0);
10426
+ __decorate([
10427
+ Input(),
10428
+ __metadata("design:type", Boolean)
10429
+ ], MultiSelectTreeComponent.prototype, "checkAll", void 0);
10378
10430
  __decorate([
10379
10431
  Input(),
10380
10432
  __metadata("design:type", Function)
@@ -10482,6 +10534,9 @@ MultiSelectTreeComponent = MultiSelectTreeComponent_1 = __decorate([
10482
10534
 
10483
10535
  i18n-clearTitle="kendo.multiselecttree.clearTitle|The title of the clear button"
10484
10536
  clearTitle="clear"
10537
+
10538
+ i18n-checkAllText="kendo.multiselecttree.checkAllText|The text displayed for the check-all checkbox"
10539
+ checkAllText="Check all"
10485
10540
  >
10486
10541
  </ng-container>
10487
10542
  <div #wrapper
@@ -10532,7 +10587,7 @@ MultiSelectTreeComponent = MultiSelectTreeComponent_1 = __decorate([
10532
10587
  [attr.title]="messageFor('clearTitle')"
10533
10588
  role="button"
10534
10589
  tabindex="-1"
10535
- (mousedown)="clearAll($event)"
10590
+ (click)="clearAll($event)"
10536
10591
  >
10537
10592
  </span>
10538
10593
  <span
@@ -10550,9 +10605,7 @@ MultiSelectTreeComponent = MultiSelectTreeComponent_1 = __decorate([
10550
10605
  #filterInput
10551
10606
  (input)="handleFilterInputChange($event.target.value)"
10552
10607
  [filterInput]="filterable && !touchEnabled"
10553
- (keydown.arrowdown)="handleKeydown($event)"
10554
- (keydown.arrowup)="handleKeydown($event)"
10555
- (keydown.alt.arrowup)="handleKeydown($event)"
10608
+ (keydown)="handleKeydown($event)"
10556
10609
  [(ngModel)]="filter"
10557
10610
  class="k-textbox"
10558
10611
  role="textbox"
@@ -10575,6 +10628,35 @@ MultiSelectTreeComponent = MultiSelectTreeComponent_1 = __decorate([
10575
10628
  templateRef: headerTemplate?.templateRef
10576
10629
  }">
10577
10630
  </ng-template>
10631
+ <div *ngIf="checkAll" class="k-check-all">
10632
+ <input
10633
+ #checkAllInput
10634
+ [checkAll]="!filterable && !touchEnabled"
10635
+ type="checkbox"
10636
+ class="k-checkbox"
10637
+ role="checkbox"
10638
+ tabindex="0"
10639
+ aria-disabled="false"
10640
+ aria-readonly="false"
10641
+ [treeview]="treeview"
10642
+ [checkedItems]="checkedItems"
10643
+ [valueField]="valueField"
10644
+ [lastAction]="lastAction"
10645
+ (checkedItemsChange)="handleCheckedItemsChange($event)"
10646
+ (keydown)="handleKeydown($event)"
10647
+ [kendoEventsOutsideAngular]="{
10648
+ blur: handleBlur
10649
+ }"
10650
+ [scope]="this"
10651
+ >
10652
+ <span
10653
+ class="k-checkbox-label"
10654
+ (click)="toggleCheckAll()"
10655
+ (mousedown)="$event.preventDefault()"
10656
+ >
10657
+ {{ messageFor('checkAllText') }}
10658
+ </span>
10659
+ </div>
10578
10660
  <kendo-treeview
10579
10661
  #treeview
10580
10662
  [nodes]="data"
@@ -10933,6 +11015,10 @@ __decorate([
10933
11015
  Input(),
10934
11016
  __metadata("design:type", String)
10935
11017
  ], Messages.prototype, "clearTitle", void 0);
11018
+ __decorate([
11019
+ Input(),
11020
+ __metadata("design:type", String)
11021
+ ], Messages.prototype, "checkAllText", void 0);
10936
11022
 
10937
11023
  var LocalizedMessagesDirective_1;
10938
11024
  /**
@@ -11292,8 +11378,51 @@ TemplateContextDirective = __decorate([
11292
11378
  *
11293
11379
  * A directive which manages the in-memory checked state of the MultiSelectTree nodes.
11294
11380
  */
11295
- let CheckDirective = class CheckDirective {
11381
+ class BaseCheckDirective {
11382
+ addItem(item) {
11383
+ if (this.isItemChecked(item)) {
11384
+ return;
11385
+ }
11386
+ const level = getHierarchicalItemLevel(item.index);
11387
+ const candidate = Object.assign({}, item, { level });
11388
+ this.checkedItems.push(candidate);
11389
+ this.checkedKeys.add(valueFrom(candidate, this.valueField));
11390
+ }
11391
+ removeItem(item) {
11392
+ if (!this.isItemChecked(item)) {
11393
+ return;
11394
+ }
11395
+ const level = getHierarchicalItemLevel(item.index);
11396
+ const candidate = Object.assign({}, item, { level });
11397
+ this.checkedItems = this.checkedItems
11398
+ .filter(item => valueFrom(item, this.valueField) !== valueFrom(candidate, this.valueField));
11399
+ this.checkedKeys.delete(valueFrom(candidate, this.valueField));
11400
+ }
11401
+ isItemChecked(item) {
11402
+ return this.checkedKeys.has(valueFrom(item, this.valueField));
11403
+ }
11404
+ updateItems() {
11405
+ this.checkedItems = this.checkedItems || [];
11406
+ this.checkedKeys = new Set(this.checkedItems.map(item => valueFrom(item, this.valueField)));
11407
+ }
11408
+ }
11409
+ __decorate([
11410
+ Input(),
11411
+ __metadata("design:type", Object)
11412
+ ], BaseCheckDirective.prototype, "valueField", void 0);
11413
+ __decorate([
11414
+ Input(),
11415
+ __metadata("design:type", Array)
11416
+ ], BaseCheckDirective.prototype, "checkedItems", void 0);
11417
+
11418
+ /**
11419
+ * @hidden
11420
+ *
11421
+ * A directive which manages the in-memory checked state of the MultiSelectTree nodes.
11422
+ */
11423
+ let CheckDirective = class CheckDirective extends BaseCheckDirective {
11296
11424
  constructor(treeView) {
11425
+ super();
11297
11426
  this.treeView = treeView;
11298
11427
  /**
11299
11428
  * Fires when the `checkedItems` collection was updated.
@@ -11316,8 +11445,7 @@ let CheckDirective = class CheckDirective {
11316
11445
  this.toggleCheckOnClick();
11317
11446
  }
11318
11447
  if (isPresent(changes.checkedItems)) {
11319
- this.checkedItems = this.checkedItems || [];
11320
- this.checkedKeys = new Set(this.checkedItems.map(item => valueFrom(item, this.valueField)));
11448
+ this.updateItems();
11321
11449
  }
11322
11450
  }
11323
11451
  ngOnDestroy() {
@@ -11397,28 +11525,6 @@ let CheckDirective = class CheckDirective {
11397
11525
  currentParent = currentParent.parent;
11398
11526
  }
11399
11527
  }
11400
- addItem(item) {
11401
- if (this.isItemChecked(item)) {
11402
- return;
11403
- }
11404
- const level = getHierarchicalItemLevel(item.index);
11405
- const candidate = Object.assign({}, item, { level });
11406
- this.checkedItems.push(candidate);
11407
- this.checkedKeys.add(valueFrom(candidate, this.valueField));
11408
- }
11409
- removeItem(item) {
11410
- if (!this.isItemChecked(item)) {
11411
- return;
11412
- }
11413
- const level = getHierarchicalItemLevel(item.index);
11414
- const candidate = Object.assign({}, item, { level });
11415
- this.checkedItems = this.checkedItems
11416
- .filter(item => valueFrom(item, this.valueField) !== valueFrom(candidate, this.valueField));
11417
- this.checkedKeys.delete(valueFrom(candidate, this.valueField));
11418
- }
11419
- isItemChecked(item) {
11420
- return this.checkedKeys.has(valueFrom(item, this.valueField));
11421
- }
11422
11528
  isItemIndeterminate(lookup) {
11423
11529
  const children = lookup.children;
11424
11530
  if (!Array.isArray(children) || children.length === 0) {
@@ -11459,6 +11565,158 @@ CheckDirective = __decorate([
11459
11565
  __metadata("design:paramtypes", [TreeViewComponent])
11460
11566
  ], CheckDirective);
11461
11567
 
11568
+ /**
11569
+ * @hidden
11570
+ *
11571
+ * A directive which manages the in-memory checked state of the MultiSelectTree nodes.
11572
+ */
11573
+ let CheckAllDirective = class CheckAllDirective extends BaseCheckDirective {
11574
+ constructor(element, zone, cdr, renderer) {
11575
+ super();
11576
+ this.element = element;
11577
+ this.zone = zone;
11578
+ this.cdr = cdr;
11579
+ this.renderer = renderer;
11580
+ /**
11581
+ * Fires when the `checkedItems` collection was updated.
11582
+ */
11583
+ this.checkedItemsChange = new EventEmitter();
11584
+ /**
11585
+ * Holds a Set with just the checked item keys.
11586
+ *
11587
+ * Should be updated each time the `checkedItems` value or content is changed.
11588
+ * Can be used for efficient look-up of whether an item is checked or not (O(1) access time).
11589
+ */
11590
+ this.checkedKeys = new Set();
11591
+ }
11592
+ handleChange(event) {
11593
+ // Need to store the current checkbox state at the moment of click
11594
+ this.currentCheckedState = event.checked;
11595
+ this.currentIndeterminateState = this.isIndeterminate;
11596
+ this.treeview.nodes.map((_value, index) => {
11597
+ const itemIndex = String(index);
11598
+ const itemLookup = this.treeview.itemLookup(itemIndex);
11599
+ this.checkNode(itemLookup);
11600
+ });
11601
+ this.checkedItemsChange.emit(this.checkedItems.slice());
11602
+ }
11603
+ get isIndeterminate() {
11604
+ const isIndeterminate = this.treeview.nodes.some((_node, index) => {
11605
+ const itemIndex = String(index);
11606
+ const itemLookup = this.treeview.itemLookup(itemIndex);
11607
+ return this.someChecked(itemLookup);
11608
+ });
11609
+ return this.isChecked ? false : isIndeterminate;
11610
+ }
11611
+ get isChecked() {
11612
+ const isChecked = this.treeview.nodes.every((_node, index) => {
11613
+ const itemIndex = String(index);
11614
+ const itemLookup = this.treeview.itemLookup(itemIndex);
11615
+ return this.allChecked(itemLookup);
11616
+ });
11617
+ return isChecked;
11618
+ }
11619
+ ngOnChanges(changes) {
11620
+ if (isPresent(changes.checkedItems)) {
11621
+ this.updateItems();
11622
+ this.renderer.setProperty(this.element.nativeElement, 'checked', this.isChecked);
11623
+ this.renderer.setProperty(this.element.nativeElement, 'indeterminate', this.isIndeterminate);
11624
+ }
11625
+ }
11626
+ ngOnInit() {
11627
+ if (this.focused) {
11628
+ this.nextTick(() => this.element.nativeElement.focus());
11629
+ }
11630
+ }
11631
+ nextTick(fn) {
11632
+ this.zone.runOutsideAngular(() => setTimeout(fn));
11633
+ }
11634
+ checkNode(itemLookup) {
11635
+ if (this.treeview.isDisabled(itemLookup.item.dataItem, itemLookup.item.index)) {
11636
+ return;
11637
+ }
11638
+ const pendingCheck = [];
11639
+ const filter$$1 = (item) => this.treeview.isVisible(item.dataItem, item.index) &&
11640
+ !this.treeview.isDisabled(item.dataItem, item.index);
11641
+ pendingCheck.push(itemLookup.item);
11642
+ fetchDescendentNodes(itemLookup, filter$$1)
11643
+ .forEach(lookup => pendingCheck.push(lookup.item));
11644
+ pendingCheck.forEach(item => {
11645
+ if (this.currentIndeterminateState) {
11646
+ this.lastAction === 'check' ?
11647
+ this.addItem(item) :
11648
+ this.removeItem(item);
11649
+ return;
11650
+ }
11651
+ this.currentCheckedState ?
11652
+ this.addItem(item) :
11653
+ this.removeItem(item);
11654
+ });
11655
+ }
11656
+ allChecked(lookup) {
11657
+ const children = lookup && lookup.children;
11658
+ if (!Array.isArray(children)) {
11659
+ return;
11660
+ }
11661
+ const childrenChecked = children.every(child => {
11662
+ if (child.children.length) {
11663
+ return this.isItemChecked(child.item) && this.allChecked(child);
11664
+ }
11665
+ return this.isItemChecked(child.item);
11666
+ });
11667
+ return childrenChecked && this.isItemChecked(lookup.item);
11668
+ }
11669
+ someChecked(lookup) {
11670
+ const children = lookup && lookup.children;
11671
+ if (!Array.isArray(children)) {
11672
+ return;
11673
+ }
11674
+ const childrenChecked = children.some(child => {
11675
+ if (child.children.length) {
11676
+ return this.isItemChecked(child.item) || this.someChecked(child);
11677
+ }
11678
+ return this.isItemChecked(child.item);
11679
+ });
11680
+ return childrenChecked || this.isItemChecked(lookup.item);
11681
+ }
11682
+ };
11683
+ __decorate([
11684
+ Input(),
11685
+ __metadata("design:type", String)
11686
+ ], CheckAllDirective.prototype, "lastAction", void 0);
11687
+ __decorate([
11688
+ Input(),
11689
+ __metadata("design:type", TreeViewComponent)
11690
+ ], CheckAllDirective.prototype, "treeview", void 0);
11691
+ __decorate([
11692
+ Input(),
11693
+ __metadata("design:type", Array)
11694
+ ], CheckAllDirective.prototype, "checkedItems", void 0);
11695
+ __decorate([
11696
+ Input(),
11697
+ __metadata("design:type", Object)
11698
+ ], CheckAllDirective.prototype, "valueField", void 0);
11699
+ __decorate([
11700
+ Input('checkAll'),
11701
+ __metadata("design:type", Boolean)
11702
+ ], CheckAllDirective.prototype, "focused", void 0);
11703
+ __decorate([
11704
+ Output(),
11705
+ __metadata("design:type", EventEmitter)
11706
+ ], CheckAllDirective.prototype, "checkedItemsChange", void 0);
11707
+ __decorate([
11708
+ HostListener('change', ['$event.target']),
11709
+ __metadata("design:type", Function),
11710
+ __metadata("design:paramtypes", [Object]),
11711
+ __metadata("design:returntype", void 0)
11712
+ ], CheckAllDirective.prototype, "handleChange", null);
11713
+ CheckAllDirective = __decorate([
11714
+ Directive({
11715
+ selector: '[checkAll]' // tslint:disable-line
11716
+ }),
11717
+ __metadata("design:paramtypes", [ElementRef, NgZone, ChangeDetectorRef, Renderer2])
11718
+ ], CheckAllDirective);
11719
+
11462
11720
  const INTERNAL_DIRECTIVES = [
11463
11721
  ListComponent,
11464
11722
  ListItemDirective,
@@ -11466,7 +11724,8 @@ const INTERNAL_DIRECTIVES = [
11466
11724
  SearchBarComponent,
11467
11725
  TemplateContextDirective,
11468
11726
  TagListComponent,
11469
- CheckDirective
11727
+ CheckDirective,
11728
+ CheckAllDirective
11470
11729
  ];
11471
11730
  /**
11472
11731
  * @hidden
@@ -11773,4 +12032,4 @@ DropDownsModule = __decorate([
11773
12032
  * Generated bundle index. Do not edit.
11774
12033
  */
11775
12034
 
11776
- export { AUTOCOMPLETE_VALUE_ACCESSOR, COMBOBOX_VALUE_ACCESSOR, TOUCH_ENABLED, DataService, DisabledItemsService, FilterInputDirective, FilterableComponent, ListItemDirective, CustomMessagesComponent, LocalizedMessagesDirective, Messages, NavigationService, SearchBarComponent, SelectionService, TagListComponent, NoDataTemplateDirective, TagTemplateDirective, DROPDOWNLIST_VALUE_ACCESSOR, CheckDirective, MultiSelectTreeSummaryTagDirective, AutoCompleteComponent, ComboBoxComponent, DropDownListComponent, MultiSelectComponent, MultiColumnComboBoxComponent, ComboBoxColumnComponent, ColumnCellTemplateDirective, ColumnHeaderTemplateDirective, DropDownTreeComponent, MultiSelectTreeComponent, DropDownTreeFlatBindingDirective, DropDownTreeHierarchyBindingDirective, MultiSelectTreeFlatBindingDirective, MultiSelectTreeHierarchyBindingDirective, DropDownTreesExpandDirective, DropDownTreesModule, NodeTemplateDirective, ItemTemplateDirective, GroupTemplateDirective, FixedGroupTemplateDirective, CustomItemTemplateDirective, HeaderTemplateDirective, FooterTemplateDirective, ValueTemplateDirective, TemplateContextDirective, GroupTagTemplateDirective, SelectableDirective, SummaryTagDirective, FilterDirective, DropDownsModule, MultiSelectModule, SharedModule, AutoCompleteModule, ComboBoxModule, DropDownListModule, SharedDirectivesModule, ListComponent, PreventableEvent, RemoveTagEvent };
12035
+ export { AUTOCOMPLETE_VALUE_ACCESSOR, COMBOBOX_VALUE_ACCESSOR, TOUCH_ENABLED, DataService, DisabledItemsService, FilterInputDirective, FilterableComponent, ListItemDirective, CustomMessagesComponent, LocalizedMessagesDirective, Messages, NavigationService, SearchBarComponent, SelectionService, TagListComponent, NoDataTemplateDirective, TagTemplateDirective, DROPDOWNLIST_VALUE_ACCESSOR, BaseCheckDirective, CheckAllDirective, CheckDirective, MultiSelectTreeSummaryTagDirective, AutoCompleteComponent, ComboBoxComponent, DropDownListComponent, MultiSelectComponent, MultiColumnComboBoxComponent, ComboBoxColumnComponent, ColumnCellTemplateDirective, ColumnHeaderTemplateDirective, DropDownTreeComponent, MultiSelectTreeComponent, DropDownTreeFlatBindingDirective, DropDownTreeHierarchyBindingDirective, MultiSelectTreeFlatBindingDirective, MultiSelectTreeHierarchyBindingDirective, DropDownTreesExpandDirective, DropDownTreesModule, NodeTemplateDirective, ItemTemplateDirective, GroupTemplateDirective, FixedGroupTemplateDirective, CustomItemTemplateDirective, HeaderTemplateDirective, FooterTemplateDirective, ValueTemplateDirective, TemplateContextDirective, GroupTagTemplateDirective, SelectableDirective, SummaryTagDirective, FilterDirective, DropDownsModule, MultiSelectModule, SharedModule, AutoCompleteModule, ComboBoxModule, DropDownListModule, SharedDirectivesModule, ListComponent, PreventableEvent, RemoveTagEvent };