@progress/kendo-angular-dropdowns 5.4.0-dev.202107151438 → 5.5.0-dev.202110290903

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 (43) 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/localization/messages.js +4 -0
  4. package/dist/es/common/shared.module.js +3 -1
  5. package/dist/es/dropdowntrees/checked-state/base-check.directive.js +54 -0
  6. package/dist/es/dropdowntrees/checked-state/check-all.directive.js +181 -0
  7. package/dist/es/dropdowntrees/checked-state/check.directive.js +15 -36
  8. package/dist/es/dropdowntrees/dropdowntree.component.js +1 -2
  9. package/dist/es/dropdowntrees/multiselecttree.component.js +62 -17
  10. package/dist/es/index.js +2 -0
  11. package/dist/es/multiselect/multiselect.component.js +8 -1
  12. package/dist/es/package-metadata.js +1 -1
  13. package/dist/es2015/common/localization/messages.d.ts +4 -0
  14. package/dist/es2015/common/localization/messages.js +4 -0
  15. package/dist/es2015/common/shared.module.js +3 -1
  16. package/dist/es2015/dropdowntrees/checked-state/base-check.directive.d.ts +32 -0
  17. package/dist/es2015/dropdowntrees/checked-state/base-check.directive.js +48 -0
  18. package/dist/es2015/dropdowntrees/checked-state/check-all.directive.d.ts +53 -0
  19. package/dist/es2015/dropdowntrees/checked-state/check-all.directive.js +161 -0
  20. package/dist/es2015/dropdowntrees/checked-state/check.directive.d.ts +3 -5
  21. package/dist/es2015/dropdowntrees/checked-state/check.directive.js +5 -26
  22. package/dist/es2015/dropdowntrees/dropdowntree.component.js +1 -2
  23. package/dist/es2015/dropdowntrees/multiselecttree.component.d.ts +14 -0
  24. package/dist/es2015/dropdowntrees/multiselecttree.component.js +87 -20
  25. package/dist/es2015/index.d.ts +2 -0
  26. package/dist/es2015/index.js +2 -0
  27. package/dist/es2015/index.metadata.json +1 -1
  28. package/dist/es2015/multiselect/multiselect.component.js +8 -1
  29. package/dist/es2015/package-metadata.js +1 -1
  30. package/dist/fesm2015/index.js +301 -51
  31. package/dist/fesm5/index.js +311 -58
  32. package/dist/npm/common/localization/messages.js +4 -0
  33. package/dist/npm/common/shared.module.js +3 -1
  34. package/dist/npm/dropdowntrees/checked-state/base-check.directive.js +56 -0
  35. package/dist/npm/dropdowntrees/checked-state/check-all.directive.js +183 -0
  36. package/dist/npm/dropdowntrees/checked-state/check.directive.js +14 -35
  37. package/dist/npm/dropdowntrees/dropdowntree.component.js +1 -2
  38. package/dist/npm/dropdowntrees/multiselecttree.component.js +62 -17
  39. package/dist/npm/index.js +4 -0
  40. package/dist/npm/multiselect/multiselect.component.js +8 -1
  41. package/dist/npm/package-metadata.js +1 -1
  42. package/dist/systemjs/kendo-angular-dropdowns.js +1 -1
  43. 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: 1626359778,
12
+ publishDate: 1635498056,
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: 1626359778,
26
+ publishDate: 1635498056,
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
  };
@@ -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;
@@ -8643,8 +8650,8 @@ let DropDownTreeComponent = DropDownTreeComponent_1 = class DropDownTreeComponen
8643
8650
  dataItem;
8644
8651
  const shouldUpdateValue = newValue !== this.value;
8645
8652
  if (shouldUpdateValue) {
8646
- this.dataItem = dataItem;
8647
8653
  this.value = newValue;
8654
+ this.dataItem = dataItem;
8648
8655
  this.emitValueChange(this.value);
8649
8656
  }
8650
8657
  this.togglePopup(false);
@@ -8844,7 +8851,6 @@ let DropDownTreeComponent = DropDownTreeComponent_1 = class DropDownTreeComponen
8844
8851
  }
8845
8852
  clearState() {
8846
8853
  this.text = undefined;
8847
- this.valueDepth = undefined;
8848
8854
  this.selectedKeys = [];
8849
8855
  }
8850
8856
  subscribeEvents() {
@@ -9354,6 +9360,12 @@ let MultiSelectTreeComponent = MultiSelectTreeComponent_1 = class MultiSelectTre
9354
9360
  * @default false
9355
9361
  */
9356
9362
  this.filterable = false;
9363
+ /**
9364
+ * If `checkАll` is set to `true` and the checkboxes are enabled, a tri-state checkbox appears above the embedded treeview.
9365
+ * Clicking the checkbox checks or unchecks all enabled items of the treeview that are loaded.
9366
+ * @default false
9367
+ */
9368
+ this.checkAll = false;
9357
9369
  /**
9358
9370
  * A function which determines if a specific node has child nodes.
9359
9371
  */
@@ -9457,6 +9469,7 @@ let MultiSelectTreeComponent = MultiSelectTreeComponent_1 = class MultiSelectTre
9457
9469
  this._checkableSettings = DEFAULT_CHECKABLE_SETTINGS;
9458
9470
  this._isFocused = false;
9459
9471
  this.subscriptions = [];
9472
+ this.lastAction = 'check';
9460
9473
  this.onTouchedCallback = noop;
9461
9474
  this.onChangeCallback = noop;
9462
9475
  this.direction = localization.rtl ? 'rtl' : 'ltr';
@@ -9466,7 +9479,7 @@ let MultiSelectTreeComponent = MultiSelectTreeComponent_1 = class MultiSelectTre
9466
9479
  this._treeview = treeview;
9467
9480
  if (treeview) {
9468
9481
  // If filtering is enabled, focus the TreeView on mobile devices instead of the filter input
9469
- if (this.isFocused && !this.filterable || this.touchEnabled) {
9482
+ if (this.isFocused && !this.filterable && !this.checkAll || this.touchEnabled) {
9470
9483
  treeview.focus();
9471
9484
  }
9472
9485
  /**
@@ -9697,6 +9710,12 @@ let MultiSelectTreeComponent = MultiSelectTreeComponent_1 = class MultiSelectTre
9697
9710
  get isWrapperActive() {
9698
9711
  return document.activeElement === this.wrapper.nativeElement;
9699
9712
  }
9713
+ get isFilterActive() {
9714
+ return this.filterInput && document.activeElement === this.filterInput.nativeElement;
9715
+ }
9716
+ get isCheckAllActive() {
9717
+ return this.checkAllInput && document.activeElement === this.checkAllInput.nativeElement;
9718
+ }
9700
9719
  ngOnInit() {
9701
9720
  this.renderer.removeAttribute(this.hostElement.nativeElement, 'tabindex');
9702
9721
  this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-expanded', String(this.isOpen));
@@ -9913,6 +9932,7 @@ let MultiSelectTreeComponent = MultiSelectTreeComponent_1 = class MultiSelectTre
9913
9932
  */
9914
9933
  handleCheckedItemsChange(items) {
9915
9934
  this.valueDepth = items.map(item => item.level);
9935
+ this.lastAction = items.length > this.dataItems.length ? 'check' : 'uncheck';
9916
9936
  this.dataItems = items.slice();
9917
9937
  this.updateValue(this.dataItems);
9918
9938
  }
@@ -9932,12 +9952,12 @@ let MultiSelectTreeComponent = MultiSelectTreeComponent_1 = class MultiSelectTre
9932
9952
  if (tag instanceof Array) {
9933
9953
  // Remove group tag
9934
9954
  this.dataItems = this.dataItems.filter((_item, i) => i < this.showAfter || this.disabledIndices.has(i));
9935
- this.valueDepth = this.valueDepth.filter((_item, i) => i < this.showAfter);
9955
+ this.valueDepth = this.valueDepth.filter((_item, i) => i < this.showAfter || this.disabledIndices.has(i));
9936
9956
  }
9937
9957
  else {
9938
9958
  // Remove single tag
9939
- this.dataItems = this.dataItems.filter((_item, i) => i !== index);
9940
- this.valueDepth = this.valueDepth.filter((_item, i) => i !== index);
9959
+ this.dataItems = this.dataItems.filter((_item, i) => i !== index || this.disabledIndices.has(i));
9960
+ this.valueDepth = this.valueDepth.filter((_item, i) => i !== index || this.disabledIndices.has(i));
9941
9961
  }
9942
9962
  this.updateValue(this.dataItems);
9943
9963
  // focus the wrapper if the component is not focused - the floating label reacts to focus/blur
@@ -9962,7 +9982,7 @@ let MultiSelectTreeComponent = MultiSelectTreeComponent_1 = class MultiSelectTre
9962
9982
  this.value = this.value.filter((_item, index) => this.disabledIndices.has(index));
9963
9983
  this.dataItems = this.dataItems.filter((_item, index) => this.disabledIndices.has(index));
9964
9984
  this.valueDepth = this.valueDepth.filter((_depth, index) => this.disabledIndices.has(index));
9965
- this.emitValueChange();
9985
+ this.emitValueChange(this.value);
9966
9986
  }
9967
9987
  /**
9968
9988
  * @hidden
@@ -10001,6 +10021,13 @@ let MultiSelectTreeComponent = MultiSelectTreeComponent_1 = class MultiSelectTre
10001
10021
  this.filterChange.next(term);
10002
10022
  this.allNodesHidden = this.nodes.every((node, index) => !this.isVisible(node, String(index)));
10003
10023
  }
10024
+ /**
10025
+ * @hidden
10026
+ */
10027
+ toggleCheckAll() {
10028
+ this.checkAllInput.nativeElement.focus();
10029
+ this.checkAllInput.nativeElement.click();
10030
+ }
10004
10031
  verifySettings() {
10005
10032
  if (!isDevMode()) {
10006
10033
  return;
@@ -10123,17 +10150,20 @@ let MultiSelectTreeComponent = MultiSelectTreeComponent_1 = class MultiSelectTre
10123
10150
  return;
10124
10151
  }
10125
10152
  const isFirstNodeActive = this.treeview['navigationService']['activeIndex'] === '0';
10126
- if (this.filterable) {
10127
- const isFilterActive = this.filterInput.nativeElement === document.activeElement;
10128
- if (isFilterActive) {
10129
- this.focus();
10130
- }
10131
- else if (!isFilterActive && isFirstNodeActive) {
10132
- this.filterInput.nativeElement.focus();
10133
- }
10134
- }
10135
- if (!this.filterable && isFirstNodeActive) {
10153
+ // Current focus is on the filter input => should focus the wrapper
10154
+ if (this.filterable && this.isFilterActive) {
10136
10155
  this.focus();
10156
+ // Current focus is on the treeview first node => should focus the check all checkbox if enabled
10157
+ }
10158
+ else if (this.checkAll && !this.isCheckAllActive && isFirstNodeActive) {
10159
+ this.checkAllInput.nativeElement.focus();
10160
+ // Current focus is either on the check all checkbox or the treeview's first node
10161
+ // => should focus either the filter input (if enabled) or the wrapper
10162
+ }
10163
+ else if (this.isCheckAllActive || isFirstNodeActive) {
10164
+ this.filterable ?
10165
+ this.filterInput.nativeElement.focus() :
10166
+ this.focus();
10137
10167
  }
10138
10168
  }
10139
10169
  handleDownKey(event) {
@@ -10141,9 +10171,14 @@ let MultiSelectTreeComponent = MultiSelectTreeComponent_1 = class MultiSelectTre
10141
10171
  return;
10142
10172
  }
10143
10173
  event.originalEvent.preventDefault();
10144
- // Put the focus back on the filter input if the wrapper is focused
10174
+ // Current focus is on the wrapper => should focus the filter input
10145
10175
  if (this.filterable && this.isWrapperActive) {
10146
10176
  this.filterInput.nativeElement.focus();
10177
+ // Current focus is on the wrapper/filter input => should focus check all checkbox if enabled
10178
+ }
10179
+ else if (this.checkAll && (this.isWrapperActive || this.isFilterActive)) {
10180
+ this.checkAllInput.nativeElement.focus();
10181
+ // Should focus the treeview if filterable and check all are disabled
10147
10182
  }
10148
10183
  else if (!this.treeview.isActive) {
10149
10184
  this.treeview.focus();
@@ -10301,6 +10336,10 @@ __decorate([
10301
10336
  ViewChild('filterInput', { static: false }),
10302
10337
  __metadata("design:type", ElementRef)
10303
10338
  ], MultiSelectTreeComponent.prototype, "filterInput", void 0);
10339
+ __decorate([
10340
+ ViewChild('checkAllInput', { static: false }),
10341
+ __metadata("design:type", ElementRef)
10342
+ ], MultiSelectTreeComponent.prototype, "checkAllInput", void 0);
10304
10343
  __decorate([
10305
10344
  Input(),
10306
10345
  __metadata("design:type", Number),
@@ -10383,6 +10422,10 @@ __decorate([
10383
10422
  Input(),
10384
10423
  __metadata("design:type", Boolean)
10385
10424
  ], MultiSelectTreeComponent.prototype, "filterable", void 0);
10425
+ __decorate([
10426
+ Input(),
10427
+ __metadata("design:type", Boolean)
10428
+ ], MultiSelectTreeComponent.prototype, "checkAll", void 0);
10386
10429
  __decorate([
10387
10430
  Input(),
10388
10431
  __metadata("design:type", Function)
@@ -10490,6 +10533,9 @@ MultiSelectTreeComponent = MultiSelectTreeComponent_1 = __decorate([
10490
10533
 
10491
10534
  i18n-clearTitle="kendo.multiselecttree.clearTitle|The title of the clear button"
10492
10535
  clearTitle="clear"
10536
+
10537
+ i18n-checkAllText="kendo.multiselecttree.checkAllText|The text displayed for the check-all checkbox"
10538
+ checkAllText="Check all"
10493
10539
  >
10494
10540
  </ng-container>
10495
10541
  <div #wrapper
@@ -10540,7 +10586,7 @@ MultiSelectTreeComponent = MultiSelectTreeComponent_1 = __decorate([
10540
10586
  [attr.title]="messageFor('clearTitle')"
10541
10587
  role="button"
10542
10588
  tabindex="-1"
10543
- (mousedown)="clearAll($event)"
10589
+ (click)="clearAll($event)"
10544
10590
  >
10545
10591
  </span>
10546
10592
  <span
@@ -10558,9 +10604,7 @@ MultiSelectTreeComponent = MultiSelectTreeComponent_1 = __decorate([
10558
10604
  #filterInput
10559
10605
  (input)="handleFilterInputChange($event.target.value)"
10560
10606
  [filterInput]="filterable && !touchEnabled"
10561
- (keydown.arrowdown)="handleKeydown($event)"
10562
- (keydown.arrowup)="handleKeydown($event)"
10563
- (keydown.alt.arrowup)="handleKeydown($event)"
10607
+ (keydown)="handleKeydown($event)"
10564
10608
  [(ngModel)]="filter"
10565
10609
  class="k-textbox"
10566
10610
  role="textbox"
@@ -10583,6 +10627,35 @@ MultiSelectTreeComponent = MultiSelectTreeComponent_1 = __decorate([
10583
10627
  templateRef: headerTemplate?.templateRef
10584
10628
  }">
10585
10629
  </ng-template>
10630
+ <div *ngIf="checkAll" class="k-check-all">
10631
+ <input
10632
+ #checkAllInput
10633
+ [checkAll]="!filterable && !touchEnabled"
10634
+ type="checkbox"
10635
+ class="k-checkbox"
10636
+ role="checkbox"
10637
+ tabindex="0"
10638
+ aria-disabled="false"
10639
+ aria-readonly="false"
10640
+ [treeview]="treeview"
10641
+ [checkedItems]="checkedItems"
10642
+ [valueField]="valueField"
10643
+ [lastAction]="lastAction"
10644
+ (checkedItemsChange)="handleCheckedItemsChange($event)"
10645
+ (keydown)="handleKeydown($event)"
10646
+ [kendoEventsOutsideAngular]="{
10647
+ blur: handleBlur
10648
+ }"
10649
+ [scope]="this"
10650
+ >
10651
+ <span
10652
+ class="k-checkbox-label"
10653
+ (click)="toggleCheckAll()"
10654
+ (mousedown)="$event.preventDefault()"
10655
+ >
10656
+ {{ messageFor('checkAllText') }}
10657
+ </span>
10658
+ </div>
10586
10659
  <kendo-treeview
10587
10660
  #treeview
10588
10661
  [nodes]="data"
@@ -10941,6 +11014,10 @@ __decorate([
10941
11014
  Input(),
10942
11015
  __metadata("design:type", String)
10943
11016
  ], Messages.prototype, "clearTitle", void 0);
11017
+ __decorate([
11018
+ Input(),
11019
+ __metadata("design:type", String)
11020
+ ], Messages.prototype, "checkAllText", void 0);
10944
11021
 
10945
11022
  var LocalizedMessagesDirective_1;
10946
11023
  /**
@@ -11300,8 +11377,51 @@ TemplateContextDirective = __decorate([
11300
11377
  *
11301
11378
  * A directive which manages the in-memory checked state of the MultiSelectTree nodes.
11302
11379
  */
11303
- let CheckDirective = class CheckDirective {
11380
+ class BaseCheckDirective {
11381
+ addItem(item) {
11382
+ if (this.isItemChecked(item)) {
11383
+ return;
11384
+ }
11385
+ const level = getHierarchicalItemLevel(item.index);
11386
+ const candidate = Object.assign({}, item, { level });
11387
+ this.checkedItems.push(candidate);
11388
+ this.checkedKeys.add(valueFrom(candidate, this.valueField));
11389
+ }
11390
+ removeItem(item) {
11391
+ if (!this.isItemChecked(item)) {
11392
+ return;
11393
+ }
11394
+ const level = getHierarchicalItemLevel(item.index);
11395
+ const candidate = Object.assign({}, item, { level });
11396
+ this.checkedItems = this.checkedItems
11397
+ .filter(item => valueFrom(item, this.valueField) !== valueFrom(candidate, this.valueField));
11398
+ this.checkedKeys.delete(valueFrom(candidate, this.valueField));
11399
+ }
11400
+ isItemChecked(item) {
11401
+ return this.checkedKeys.has(valueFrom(item, this.valueField));
11402
+ }
11403
+ updateItems() {
11404
+ this.checkedItems = this.checkedItems || [];
11405
+ this.checkedKeys = new Set(this.checkedItems.map(item => valueFrom(item, this.valueField)));
11406
+ }
11407
+ }
11408
+ __decorate([
11409
+ Input(),
11410
+ __metadata("design:type", Object)
11411
+ ], BaseCheckDirective.prototype, "valueField", void 0);
11412
+ __decorate([
11413
+ Input(),
11414
+ __metadata("design:type", Array)
11415
+ ], BaseCheckDirective.prototype, "checkedItems", void 0);
11416
+
11417
+ /**
11418
+ * @hidden
11419
+ *
11420
+ * A directive which manages the in-memory checked state of the MultiSelectTree nodes.
11421
+ */
11422
+ let CheckDirective = class CheckDirective extends BaseCheckDirective {
11304
11423
  constructor(treeView) {
11424
+ super();
11305
11425
  this.treeView = treeView;
11306
11426
  /**
11307
11427
  * Fires when the `checkedItems` collection was updated.
@@ -11324,8 +11444,7 @@ let CheckDirective = class CheckDirective {
11324
11444
  this.toggleCheckOnClick();
11325
11445
  }
11326
11446
  if (isPresent(changes.checkedItems)) {
11327
- this.checkedItems = this.checkedItems || [];
11328
- this.checkedKeys = new Set(this.checkedItems.map(item => valueFrom(item, this.valueField)));
11447
+ this.updateItems();
11329
11448
  }
11330
11449
  }
11331
11450
  ngOnDestroy() {
@@ -11405,28 +11524,6 @@ let CheckDirective = class CheckDirective {
11405
11524
  currentParent = currentParent.parent;
11406
11525
  }
11407
11526
  }
11408
- addItem(item) {
11409
- if (this.isItemChecked(item)) {
11410
- return;
11411
- }
11412
- const level = getHierarchicalItemLevel(item.index);
11413
- const candidate = Object.assign({}, item, { level });
11414
- this.checkedItems.push(candidate);
11415
- this.checkedKeys.add(valueFrom(candidate, this.valueField));
11416
- }
11417
- removeItem(item) {
11418
- if (!this.isItemChecked(item)) {
11419
- return;
11420
- }
11421
- const level = getHierarchicalItemLevel(item.index);
11422
- const candidate = Object.assign({}, item, { level });
11423
- this.checkedItems = this.checkedItems
11424
- .filter(item => valueFrom(item, this.valueField) !== valueFrom(candidate, this.valueField));
11425
- this.checkedKeys.delete(valueFrom(candidate, this.valueField));
11426
- }
11427
- isItemChecked(item) {
11428
- return this.checkedKeys.has(valueFrom(item, this.valueField));
11429
- }
11430
11527
  isItemIndeterminate(lookup) {
11431
11528
  const children = lookup.children;
11432
11529
  if (!Array.isArray(children) || children.length === 0) {
@@ -11467,6 +11564,158 @@ CheckDirective = __decorate([
11467
11564
  __metadata("design:paramtypes", [TreeViewComponent])
11468
11565
  ], CheckDirective);
11469
11566
 
11567
+ /**
11568
+ * @hidden
11569
+ *
11570
+ * A directive which manages the in-memory checked state of the MultiSelectTree nodes.
11571
+ */
11572
+ let CheckAllDirective = class CheckAllDirective extends BaseCheckDirective {
11573
+ constructor(element, zone, cdr, renderer) {
11574
+ super();
11575
+ this.element = element;
11576
+ this.zone = zone;
11577
+ this.cdr = cdr;
11578
+ this.renderer = renderer;
11579
+ /**
11580
+ * Fires when the `checkedItems` collection was updated.
11581
+ */
11582
+ this.checkedItemsChange = new EventEmitter();
11583
+ /**
11584
+ * Holds a Set with just the checked item keys.
11585
+ *
11586
+ * Should be updated each time the `checkedItems` value or content is changed.
11587
+ * Can be used for efficient look-up of whether an item is checked or not (O(1) access time).
11588
+ */
11589
+ this.checkedKeys = new Set();
11590
+ }
11591
+ handleChange(event) {
11592
+ // Need to store the current checkbox state at the moment of click
11593
+ this.currentCheckedState = event.checked;
11594
+ this.currentIndeterminateState = this.isIndeterminate;
11595
+ this.treeview.nodes.map((_value, index) => {
11596
+ const itemIndex = String(index);
11597
+ const itemLookup = this.treeview.itemLookup(itemIndex);
11598
+ this.checkNode(itemLookup);
11599
+ });
11600
+ this.checkedItemsChange.emit(this.checkedItems.slice());
11601
+ }
11602
+ get isIndeterminate() {
11603
+ const isIndeterminate = this.treeview.nodes.some((_node, index) => {
11604
+ const itemIndex = String(index);
11605
+ const itemLookup = this.treeview.itemLookup(itemIndex);
11606
+ return this.someChecked(itemLookup);
11607
+ });
11608
+ return this.isChecked ? false : isIndeterminate;
11609
+ }
11610
+ get isChecked() {
11611
+ const isChecked = this.treeview.nodes.every((_node, index) => {
11612
+ const itemIndex = String(index);
11613
+ const itemLookup = this.treeview.itemLookup(itemIndex);
11614
+ return this.allChecked(itemLookup);
11615
+ });
11616
+ return isChecked;
11617
+ }
11618
+ ngOnChanges(changes) {
11619
+ if (isPresent(changes.checkedItems)) {
11620
+ this.updateItems();
11621
+ this.renderer.setProperty(this.element.nativeElement, 'checked', this.isChecked);
11622
+ this.renderer.setProperty(this.element.nativeElement, 'indeterminate', this.isIndeterminate);
11623
+ }
11624
+ }
11625
+ ngOnInit() {
11626
+ if (this.focused) {
11627
+ this.nextTick(() => this.element.nativeElement.focus());
11628
+ }
11629
+ }
11630
+ nextTick(fn) {
11631
+ this.zone.runOutsideAngular(() => setTimeout(fn));
11632
+ }
11633
+ checkNode(itemLookup) {
11634
+ if (this.treeview.isDisabled(itemLookup.item.dataItem, itemLookup.item.index)) {
11635
+ return;
11636
+ }
11637
+ const pendingCheck = [];
11638
+ const filter$$1 = (item) => this.treeview.isVisible(item.dataItem, item.index) &&
11639
+ !this.treeview.isDisabled(item.dataItem, item.index);
11640
+ pendingCheck.push(itemLookup.item);
11641
+ fetchDescendentNodes(itemLookup, filter$$1)
11642
+ .forEach(lookup => pendingCheck.push(lookup.item));
11643
+ pendingCheck.forEach(item => {
11644
+ if (this.currentIndeterminateState) {
11645
+ this.lastAction === 'check' ?
11646
+ this.addItem(item) :
11647
+ this.removeItem(item);
11648
+ return;
11649
+ }
11650
+ this.currentCheckedState ?
11651
+ this.addItem(item) :
11652
+ this.removeItem(item);
11653
+ });
11654
+ }
11655
+ allChecked(lookup) {
11656
+ const children = lookup && lookup.children;
11657
+ if (!Array.isArray(children)) {
11658
+ return;
11659
+ }
11660
+ const childrenChecked = children.every(child => {
11661
+ if (child.children.length) {
11662
+ return this.isItemChecked(child.item) && this.allChecked(child);
11663
+ }
11664
+ return this.isItemChecked(child.item);
11665
+ });
11666
+ return childrenChecked && this.isItemChecked(lookup.item);
11667
+ }
11668
+ someChecked(lookup) {
11669
+ const children = lookup && lookup.children;
11670
+ if (!Array.isArray(children)) {
11671
+ return;
11672
+ }
11673
+ const childrenChecked = children.some(child => {
11674
+ if (child.children.length) {
11675
+ return this.isItemChecked(child.item) || this.someChecked(child);
11676
+ }
11677
+ return this.isItemChecked(child.item);
11678
+ });
11679
+ return childrenChecked || this.isItemChecked(lookup.item);
11680
+ }
11681
+ };
11682
+ __decorate([
11683
+ Input(),
11684
+ __metadata("design:type", String)
11685
+ ], CheckAllDirective.prototype, "lastAction", void 0);
11686
+ __decorate([
11687
+ Input(),
11688
+ __metadata("design:type", TreeViewComponent)
11689
+ ], CheckAllDirective.prototype, "treeview", void 0);
11690
+ __decorate([
11691
+ Input(),
11692
+ __metadata("design:type", Array)
11693
+ ], CheckAllDirective.prototype, "checkedItems", void 0);
11694
+ __decorate([
11695
+ Input(),
11696
+ __metadata("design:type", Object)
11697
+ ], CheckAllDirective.prototype, "valueField", void 0);
11698
+ __decorate([
11699
+ Input('checkAll'),
11700
+ __metadata("design:type", Boolean)
11701
+ ], CheckAllDirective.prototype, "focused", void 0);
11702
+ __decorate([
11703
+ Output(),
11704
+ __metadata("design:type", EventEmitter)
11705
+ ], CheckAllDirective.prototype, "checkedItemsChange", void 0);
11706
+ __decorate([
11707
+ HostListener('change', ['$event.target']),
11708
+ __metadata("design:type", Function),
11709
+ __metadata("design:paramtypes", [Object]),
11710
+ __metadata("design:returntype", void 0)
11711
+ ], CheckAllDirective.prototype, "handleChange", null);
11712
+ CheckAllDirective = __decorate([
11713
+ Directive({
11714
+ selector: '[checkAll]' // tslint:disable-line
11715
+ }),
11716
+ __metadata("design:paramtypes", [ElementRef, NgZone, ChangeDetectorRef, Renderer2])
11717
+ ], CheckAllDirective);
11718
+
11470
11719
  const INTERNAL_DIRECTIVES = [
11471
11720
  ListComponent,
11472
11721
  ListItemDirective,
@@ -11474,7 +11723,8 @@ const INTERNAL_DIRECTIVES = [
11474
11723
  SearchBarComponent,
11475
11724
  TemplateContextDirective,
11476
11725
  TagListComponent,
11477
- CheckDirective
11726
+ CheckDirective,
11727
+ CheckAllDirective
11478
11728
  ];
11479
11729
  /**
11480
11730
  * @hidden
@@ -11781,4 +12031,4 @@ DropDownsModule = __decorate([
11781
12031
  * Generated bundle index. Do not edit.
11782
12032
  */
11783
12033
 
11784
- 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 };
12034
+ 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 };