@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.
- package/dist/cdn/js/kendo-angular-dropdowns.js +2 -2
- package/dist/cdn/main.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 +1 -2
- package/dist/es/dropdowntrees/multiselecttree.component.js +62 -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/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.js +1 -2
- package/dist/es2015/dropdowntrees/multiselecttree.component.d.ts +14 -0
- package/dist/es2015/dropdowntrees/multiselecttree.component.js +87 -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 +301 -51
- package/dist/fesm5/index.js +311 -58
- 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 +1 -2
- package/dist/npm/dropdowntrees/multiselecttree.component.js +62 -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: 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
|
};
|
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: 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 =>
|
|
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
|
-
|
|
10127
|
-
|
|
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
|
-
//
|
|
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
|
-
(
|
|
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
|
|
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
|
-
|
|
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.
|
|
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 };
|