@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.
- package/dist/cdn/js/kendo-angular-dropdowns.js +2 -2
- package/dist/cdn/main.js +1 -1
- package/dist/es/common/list.component.js +1 -1
- package/dist/es/common/localization/messages.js +4 -0
- package/dist/es/common/shared.module.js +3 -1
- package/dist/es/dropdowntrees/checked-state/base-check.directive.js +54 -0
- package/dist/es/dropdowntrees/checked-state/check-all.directive.js +181 -0
- package/dist/es/dropdowntrees/checked-state/check.directive.js +15 -36
- package/dist/es/dropdowntrees/dropdowntree.component.js +4 -0
- package/dist/es/dropdowntrees/multiselecttree.component.js +66 -17
- package/dist/es/index.js +2 -0
- package/dist/es/multiselect/multiselect.component.js +8 -1
- package/dist/es/package-metadata.js +1 -1
- package/dist/es2015/common/list.component.js +6 -6
- package/dist/es2015/common/localization/messages.d.ts +4 -0
- package/dist/es2015/common/localization/messages.js +4 -0
- package/dist/es2015/common/shared.module.js +3 -1
- package/dist/es2015/dropdowntrees/checked-state/base-check.directive.d.ts +32 -0
- package/dist/es2015/dropdowntrees/checked-state/base-check.directive.js +48 -0
- package/dist/es2015/dropdowntrees/checked-state/check-all.directive.d.ts +53 -0
- package/dist/es2015/dropdowntrees/checked-state/check-all.directive.js +161 -0
- package/dist/es2015/dropdowntrees/checked-state/check.directive.d.ts +3 -5
- package/dist/es2015/dropdowntrees/checked-state/check.directive.js +5 -26
- package/dist/es2015/dropdowntrees/dropdowntree.component.d.ts +4 -0
- package/dist/es2015/dropdowntrees/dropdowntree.component.js +4 -0
- package/dist/es2015/dropdowntrees/multiselecttree.component.d.ts +18 -0
- package/dist/es2015/dropdowntrees/multiselecttree.component.js +91 -20
- package/dist/es2015/index.d.ts +2 -0
- package/dist/es2015/index.js +2 -0
- package/dist/es2015/index.metadata.json +1 -1
- package/dist/es2015/multiselect/multiselect.component.js +8 -1
- package/dist/es2015/package-metadata.js +1 -1
- package/dist/fesm2015/index.js +314 -55
- package/dist/fesm5/index.js +319 -57
- package/dist/npm/common/list.component.js +1 -1
- package/dist/npm/common/localization/messages.js +4 -0
- package/dist/npm/common/shared.module.js +3 -1
- package/dist/npm/dropdowntrees/checked-state/base-check.directive.js +56 -0
- package/dist/npm/dropdowntrees/checked-state/check-all.directive.js +183 -0
- package/dist/npm/dropdowntrees/checked-state/check.directive.js +14 -35
- package/dist/npm/dropdowntrees/dropdowntree.component.js +4 -0
- package/dist/npm/dropdowntrees/multiselecttree.component.js +66 -17
- package/dist/npm/index.js +4 -0
- package/dist/npm/multiselect/multiselect.component.js +8 -1
- package/dist/npm/package-metadata.js +1 -1
- package/dist/systemjs/kendo-angular-dropdowns.js +1 -1
- 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 =>
|
|
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:
|
|
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
|
};
|
package/dist/fesm2015/index.js
CHANGED
|
@@ -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:
|
|
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
|
|
1738
|
-
|
|
1739
|
-
|
|
1740
|
-
|
|
1741
|
-
|
|
1742
|
-
|
|
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 =>
|
|
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
|
-
|
|
10119
|
-
|
|
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
|
-
//
|
|
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
|
-
(
|
|
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
|
|
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
|
-
|
|
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.
|
|
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 };
|