@progress/kendo-angular-treeview 5.4.3 → 6.0.0-dev.202112021059
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cdn/js/kendo-angular-treeview.js +1 -1
- package/dist/cdn/main.js +1 -1
- package/dist/es/check.directive.js +30 -39
- package/dist/es/expand.directive.js +40 -41
- package/dist/es/package-metadata.js +1 -1
- package/dist/es/selection/select.directive.js +22 -28
- package/dist/es/utils.js +4 -6
- package/dist/es2015/check.directive.d.ts +8 -1
- package/dist/es2015/check.directive.js +30 -35
- package/dist/es2015/expand.directive.d.ts +12 -3
- package/dist/es2015/expand.directive.js +39 -36
- package/dist/es2015/index.metadata.json +1 -1
- package/dist/es2015/package-metadata.js +1 -1
- package/dist/es2015/selection/select.directive.d.ts +11 -3
- package/dist/es2015/selection/select.directive.js +22 -24
- package/dist/es2015/utils.d.ts +2 -3
- package/dist/es2015/utils.js +4 -6
- package/dist/fesm2015/index.js +93 -102
- package/dist/fesm5/index.js +94 -115
- package/dist/npm/check.directive.js +30 -39
- package/dist/npm/expand.directive.js +40 -41
- package/dist/npm/package-metadata.js +1 -1
- package/dist/npm/selection/select.directive.js +22 -28
- package/dist/npm/utils.js +4 -6
- package/dist/systemjs/kendo-angular-treeview.js +1 -1
- package/package.json +1 -1
|
@@ -8,6 +8,7 @@ import { TreeViewComponent } from './treeview.component';
|
|
|
8
8
|
import { fetchLoadedDescendants, isBoolean, isPresent, noop } from './utils';
|
|
9
9
|
import { Subscription } from 'rxjs';
|
|
10
10
|
import { filter, take, switchMap, tap } from 'rxjs/operators';
|
|
11
|
+
import { isChanged } from '@progress/kendo-angular-common';
|
|
11
12
|
var indexChecked = function (keys, index) { return keys.filter(function (k) { return k === index; }).length > 0; };
|
|
12
13
|
var ɵ0 = indexChecked;
|
|
13
14
|
var matchKey = function (index) { return function (k) {
|
|
@@ -46,7 +47,10 @@ var CheckDirective = /** @class */ (function () {
|
|
|
46
47
|
'multiple': function (e) { return _this.checkMultiple(e); },
|
|
47
48
|
'single': function (e) { return _this.checkSingle(e); }
|
|
48
49
|
};
|
|
49
|
-
|
|
50
|
+
/**
|
|
51
|
+
* Reflectes the internal `checkedKeys` state.
|
|
52
|
+
*/
|
|
53
|
+
this.state = new Set();
|
|
50
54
|
this.subscriptions.add(this.treeView.checkedChange
|
|
51
55
|
.subscribe(function (e) { return _this.check(e); }));
|
|
52
56
|
var expandedItems = [];
|
|
@@ -65,20 +69,6 @@ var CheckDirective = /** @class */ (function () {
|
|
|
65
69
|
enumerable: true,
|
|
66
70
|
configurable: true
|
|
67
71
|
});
|
|
68
|
-
Object.defineProperty(CheckDirective.prototype, "checkedKeys", {
|
|
69
|
-
/**
|
|
70
|
-
* Defines the collection that will store the checked keys
|
|
71
|
-
* ([see example]({% slug checkboxes_treeview %})).
|
|
72
|
-
*/
|
|
73
|
-
get: function () {
|
|
74
|
-
return this._checkedKeys;
|
|
75
|
-
},
|
|
76
|
-
set: function (keys) {
|
|
77
|
-
this._checkedKeys = keys;
|
|
78
|
-
},
|
|
79
|
-
enumerable: true,
|
|
80
|
-
configurable: true
|
|
81
|
-
});
|
|
82
72
|
Object.defineProperty(CheckDirective.prototype, "options", {
|
|
83
73
|
get: function () {
|
|
84
74
|
var defaultOptions = {
|
|
@@ -103,6 +93,9 @@ var CheckDirective = /** @class */ (function () {
|
|
|
103
93
|
this.treeView.checkboxes = this.options.enabled;
|
|
104
94
|
this.toggleCheckOnClick();
|
|
105
95
|
}
|
|
96
|
+
if (isChanged('checkedKeys', changes, false) && changes.checkedKeys.currentValue !== this.lastChange) {
|
|
97
|
+
this.state = new Set(changes.checkedKeys.currentValue);
|
|
98
|
+
}
|
|
106
99
|
};
|
|
107
100
|
CheckDirective.prototype.ngOnDestroy = function () {
|
|
108
101
|
this.subscriptions.unsubscribe();
|
|
@@ -112,11 +105,11 @@ var CheckDirective = /** @class */ (function () {
|
|
|
112
105
|
if (!this.checkKey) {
|
|
113
106
|
return this.isIndexChecked(index);
|
|
114
107
|
}
|
|
115
|
-
var
|
|
116
|
-
return
|
|
108
|
+
var hasKey = this.state.has(this.itemKey({ dataItem: dataItem, index: index }));
|
|
109
|
+
return hasKey ? 'checked' : 'none';
|
|
117
110
|
};
|
|
118
111
|
CheckDirective.prototype.isIndexChecked = function (index) {
|
|
119
|
-
var checkedKeys = this.
|
|
112
|
+
var checkedKeys = Array.from(this.state).filter(matchKey(index));
|
|
120
113
|
if (indexChecked(checkedKeys, index)) {
|
|
121
114
|
return 'checked';
|
|
122
115
|
}
|
|
@@ -147,7 +140,11 @@ var CheckDirective = /** @class */ (function () {
|
|
|
147
140
|
};
|
|
148
141
|
CheckDirective.prototype.checkSingle = function (node) {
|
|
149
142
|
var key = this.itemKey(node.item);
|
|
150
|
-
|
|
143
|
+
var hasKey = this.state.has(key);
|
|
144
|
+
this.state.clear();
|
|
145
|
+
if (!hasKey) {
|
|
146
|
+
this.state.add(key);
|
|
147
|
+
}
|
|
151
148
|
this.notify();
|
|
152
149
|
};
|
|
153
150
|
CheckDirective.prototype.checkMultiple = function (node) {
|
|
@@ -184,7 +181,6 @@ var CheckDirective = /** @class */ (function () {
|
|
|
184
181
|
if (!isPresent(currentKey)) {
|
|
185
182
|
return;
|
|
186
183
|
}
|
|
187
|
-
var checkedKeys = new Set(this.checkedKeys);
|
|
188
184
|
var pendingCheck = [currentKey];
|
|
189
185
|
if (this.options.checkChildren) {
|
|
190
186
|
var descendants = fetchLoadedDescendants(node, function (_a) {
|
|
@@ -198,63 +194,59 @@ var CheckDirective = /** @class */ (function () {
|
|
|
198
194
|
});
|
|
199
195
|
pendingCheck.push.apply(pendingCheck, descendants);
|
|
200
196
|
}
|
|
201
|
-
var shouldCheck = !
|
|
197
|
+
var shouldCheck = !this.state.has(currentKey);
|
|
202
198
|
pendingCheck.forEach(function (key) {
|
|
203
199
|
if (shouldCheck) {
|
|
204
|
-
|
|
200
|
+
_this.state.add(key);
|
|
205
201
|
}
|
|
206
202
|
else {
|
|
207
|
-
|
|
203
|
+
_this.state.delete(key);
|
|
208
204
|
}
|
|
209
205
|
});
|
|
210
|
-
this.checkedKeys = Array.from(checkedKeys);
|
|
211
206
|
};
|
|
212
207
|
CheckDirective.prototype.checkParents = function (parent) {
|
|
213
208
|
var _this = this;
|
|
214
209
|
if (!isPresent(parent)) {
|
|
215
210
|
return;
|
|
216
211
|
}
|
|
217
|
-
var checkedKeys = new Set(this.checkedKeys);
|
|
218
212
|
var currentParent = parent;
|
|
219
213
|
while (currentParent) {
|
|
220
214
|
var parentKey = this.itemKey(currentParent.item);
|
|
221
|
-
var allChildrenSelected = currentParent.children.every(function (item) { return
|
|
215
|
+
var allChildrenSelected = currentParent.children.every(function (item) { return _this.state.has(_this.itemKey(item)); });
|
|
222
216
|
if (allChildrenSelected) {
|
|
223
|
-
|
|
217
|
+
this.state.add(parentKey);
|
|
224
218
|
}
|
|
225
219
|
else {
|
|
226
|
-
|
|
220
|
+
this.state.delete(parentKey);
|
|
227
221
|
}
|
|
228
222
|
currentParent = currentParent.parent;
|
|
229
223
|
}
|
|
230
|
-
this.checkedKeys = Array.from(checkedKeys);
|
|
231
224
|
};
|
|
232
225
|
CheckDirective.prototype.notify = function () {
|
|
233
|
-
this.
|
|
226
|
+
this.lastChange = Array.from(this.state);
|
|
227
|
+
this.checkedKeysChange.emit(this.lastChange);
|
|
234
228
|
};
|
|
235
229
|
CheckDirective.prototype.addCheckedItemsChildren = function (lookups) {
|
|
236
230
|
var _this = this;
|
|
237
231
|
if (!isPresent(lookups) || lookups.length === 0) {
|
|
238
232
|
return;
|
|
239
233
|
}
|
|
240
|
-
var initiallyCheckedItemsCount = this.
|
|
241
|
-
var checkedKeys = new Set(this.checkedKeys);
|
|
234
|
+
var initiallyCheckedItemsCount = this.state.size;
|
|
242
235
|
lookups.forEach(function (lookup) {
|
|
243
236
|
var itemKey = _this.itemKey(lookup.item);
|
|
244
|
-
if (!
|
|
237
|
+
if (!_this.state.has(itemKey)) {
|
|
245
238
|
return;
|
|
246
239
|
}
|
|
247
240
|
lookup.children.forEach(function (item) {
|
|
248
241
|
// ensure both the parent item and each child node is enabled
|
|
249
242
|
if (!_this.treeView.isDisabled(lookup.item.dataItem, lookup.item.index) &&
|
|
250
243
|
!_this.treeView.isDisabled(item.dataItem, item.index)) {
|
|
251
|
-
|
|
244
|
+
_this.state.add(_this.itemKey(item));
|
|
252
245
|
}
|
|
253
246
|
});
|
|
254
247
|
});
|
|
255
|
-
var hasNewlyCheckedItems = initiallyCheckedItemsCount !==
|
|
248
|
+
var hasNewlyCheckedItems = initiallyCheckedItemsCount !== this.state.size;
|
|
256
249
|
if (hasNewlyCheckedItems) {
|
|
257
|
-
this.checkedKeys = Array.from(checkedKeys);
|
|
258
250
|
this.zone.run(function () { return _this.notify(); });
|
|
259
251
|
}
|
|
260
252
|
};
|
|
@@ -269,9 +261,8 @@ var CheckDirective = /** @class */ (function () {
|
|
|
269
261
|
], CheckDirective.prototype, "checkKey", void 0);
|
|
270
262
|
tslib_1.__decorate([
|
|
271
263
|
Input(),
|
|
272
|
-
tslib_1.__metadata("design:type", Array)
|
|
273
|
-
|
|
274
|
-
], CheckDirective.prototype, "checkedKeys", null);
|
|
264
|
+
tslib_1.__metadata("design:type", Array)
|
|
265
|
+
], CheckDirective.prototype, "checkedKeys", void 0);
|
|
275
266
|
tslib_1.__decorate([
|
|
276
267
|
Input('kendoTreeViewCheckable'),
|
|
277
268
|
tslib_1.__metadata("design:type", Object)
|
|
@@ -8,6 +8,7 @@ import { ExpandableComponent } from './expandable-component';
|
|
|
8
8
|
import { Subscription, merge } from 'rxjs';
|
|
9
9
|
import { map } from 'rxjs/operators';
|
|
10
10
|
import { isArrayWithAtLeastOneItem, isBoolean, sameValues } from './utils';
|
|
11
|
+
import { isChanged } from '@progress/kendo-angular-common';
|
|
11
12
|
var DEFAULT_FILTER_EXPAND_SETTINGS = {
|
|
12
13
|
maxAutoExpandResults: -1,
|
|
13
14
|
expandMatches: false,
|
|
@@ -32,8 +33,11 @@ var ExpandDirective = /** @class */ (function () {
|
|
|
32
33
|
*/
|
|
33
34
|
this.expandedKeysChange = new EventEmitter();
|
|
34
35
|
this.subscriptions = new Subscription();
|
|
35
|
-
|
|
36
|
-
|
|
36
|
+
/**
|
|
37
|
+
* Reflectes the internal `expandedKeys` state.
|
|
38
|
+
*/
|
|
39
|
+
this.state = new Set();
|
|
40
|
+
this.originalExpandedKeys = new Set();
|
|
37
41
|
this.isFiltered = false;
|
|
38
42
|
/**
|
|
39
43
|
* Fills array with the correct expand keys according to wrapper metadata.
|
|
@@ -66,7 +70,7 @@ var ExpandDirective = /** @class */ (function () {
|
|
|
66
70
|
this.subscriptions.add(this.component.filterStateChange.subscribe(this.handleAutoExpand.bind(this)));
|
|
67
71
|
}
|
|
68
72
|
this.component.isExpanded = function (dataItem, index) {
|
|
69
|
-
return _this.
|
|
73
|
+
return _this.state.has(_this.itemKey({ dataItem: dataItem, index: index }));
|
|
70
74
|
};
|
|
71
75
|
}
|
|
72
76
|
Object.defineProperty(ExpandDirective.prototype, "isExpanded", {
|
|
@@ -87,19 +91,11 @@ var ExpandDirective = /** @class */ (function () {
|
|
|
87
91
|
enumerable: true,
|
|
88
92
|
configurable: true
|
|
89
93
|
});
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
return this._expandedKeys;
|
|
96
|
-
},
|
|
97
|
-
set: function (keys) {
|
|
98
|
-
this._expandedKeys = keys;
|
|
99
|
-
},
|
|
100
|
-
enumerable: true,
|
|
101
|
-
configurable: true
|
|
102
|
-
});
|
|
94
|
+
ExpandDirective.prototype.ngOnChanges = function (changes) {
|
|
95
|
+
if (isChanged('expandedKeys', changes, false) && changes.expandedKeys.currentValue !== this.lastChange) {
|
|
96
|
+
this.state = new Set(changes.expandedKeys.currentValue);
|
|
97
|
+
}
|
|
98
|
+
};
|
|
103
99
|
ExpandDirective.prototype.ngOnDestroy = function () {
|
|
104
100
|
this.subscriptions.unsubscribe();
|
|
105
101
|
};
|
|
@@ -119,19 +115,19 @@ var ExpandDirective = /** @class */ (function () {
|
|
|
119
115
|
};
|
|
120
116
|
ExpandDirective.prototype.toggleExpand = function (_a) {
|
|
121
117
|
var index = _a.index, dataItem = _a.dataItem, expand = _a.expand;
|
|
122
|
-
var
|
|
123
|
-
var
|
|
118
|
+
var key = this.itemKey({ index: index, dataItem: dataItem });
|
|
119
|
+
var isExpanded = this.state.has(key);
|
|
124
120
|
var notify = false;
|
|
125
|
-
if (
|
|
126
|
-
this.
|
|
121
|
+
if (isExpanded && !expand) {
|
|
122
|
+
this.state.delete(key);
|
|
127
123
|
notify = true;
|
|
128
124
|
}
|
|
129
|
-
else if (
|
|
130
|
-
this.
|
|
125
|
+
else if (!isExpanded && expand) {
|
|
126
|
+
this.state.add(key);
|
|
131
127
|
notify = true;
|
|
132
128
|
}
|
|
133
129
|
if (notify) {
|
|
134
|
-
this.
|
|
130
|
+
this.notify();
|
|
135
131
|
}
|
|
136
132
|
};
|
|
137
133
|
ExpandDirective.prototype.handleAutoExpand = function (_a) {
|
|
@@ -142,7 +138,7 @@ var ExpandDirective = /** @class */ (function () {
|
|
|
142
138
|
}
|
|
143
139
|
var _b = this.filterExpandSettings, maxAutoExpandResults = _b.maxAutoExpandResults, autoExpandMatches = _b.expandMatches, expandedOnClear = _b.expandedOnClear;
|
|
144
140
|
if (!this.isFiltered) {
|
|
145
|
-
this.originalExpandedKeys = this.
|
|
141
|
+
this.originalExpandedKeys = new Set(this.state);
|
|
146
142
|
}
|
|
147
143
|
var exitingFilteredState = this.isFiltered && !term;
|
|
148
144
|
var maxExceeded = maxAutoExpandResults !== -1 && matchCount > maxAutoExpandResults;
|
|
@@ -150,18 +146,18 @@ var ExpandDirective = /** @class */ (function () {
|
|
|
150
146
|
if (exitAutoExpandedState) {
|
|
151
147
|
switch (expandedOnClear) {
|
|
152
148
|
case "initial": {
|
|
153
|
-
if (!sameValues(this.
|
|
154
|
-
this.
|
|
155
|
-
this.
|
|
149
|
+
if (!sameValues(this.state, this.originalExpandedKeys)) {
|
|
150
|
+
this.state = this.originalExpandedKeys;
|
|
151
|
+
this.notify();
|
|
156
152
|
}
|
|
157
153
|
break;
|
|
158
154
|
}
|
|
159
155
|
case "all": {
|
|
160
|
-
this.
|
|
156
|
+
this.state = new Set(nodes.reduce(function (acc, rootNode) {
|
|
161
157
|
_this.getEveryExpandKey(acc, rootNode);
|
|
162
158
|
return acc;
|
|
163
|
-
}, []);
|
|
164
|
-
this.
|
|
159
|
+
}, []));
|
|
160
|
+
this.notify();
|
|
165
161
|
break;
|
|
166
162
|
}
|
|
167
163
|
case "unchanged": {
|
|
@@ -169,9 +165,9 @@ var ExpandDirective = /** @class */ (function () {
|
|
|
169
165
|
}
|
|
170
166
|
case "none":
|
|
171
167
|
default: {
|
|
172
|
-
if (this.
|
|
173
|
-
this.
|
|
174
|
-
this.
|
|
168
|
+
if (this.state.size !== 0) {
|
|
169
|
+
this.state.clear();
|
|
170
|
+
this.notify();
|
|
175
171
|
}
|
|
176
172
|
break;
|
|
177
173
|
}
|
|
@@ -179,16 +175,20 @@ var ExpandDirective = /** @class */ (function () {
|
|
|
179
175
|
this.isFiltered = false;
|
|
180
176
|
return;
|
|
181
177
|
}
|
|
182
|
-
var indicesToExpand = nodes.reduce(function (acc, rootNode) {
|
|
178
|
+
var indicesToExpand = new Set(nodes.reduce(function (acc, rootNode) {
|
|
183
179
|
_this.updateExpandedNodes(acc, rootNode, autoExpandMatches);
|
|
184
180
|
return acc;
|
|
185
|
-
}, []);
|
|
186
|
-
if (!sameValues(this.
|
|
187
|
-
this.
|
|
188
|
-
this.
|
|
181
|
+
}, []));
|
|
182
|
+
if (!sameValues(this.state, indicesToExpand)) {
|
|
183
|
+
this.state = indicesToExpand;
|
|
184
|
+
this.notify();
|
|
189
185
|
}
|
|
190
186
|
this.isFiltered = true;
|
|
191
187
|
};
|
|
188
|
+
ExpandDirective.prototype.notify = function () {
|
|
189
|
+
this.lastChange = Array.from(this.state);
|
|
190
|
+
this.expandedKeysChange.emit(this.lastChange);
|
|
191
|
+
};
|
|
192
192
|
tslib_1.__decorate([
|
|
193
193
|
Input(),
|
|
194
194
|
tslib_1.__metadata("design:type", Function),
|
|
@@ -208,9 +208,8 @@ var ExpandDirective = /** @class */ (function () {
|
|
|
208
208
|
], ExpandDirective.prototype, "expandedKeysChange", void 0);
|
|
209
209
|
tslib_1.__decorate([
|
|
210
210
|
Input(),
|
|
211
|
-
tslib_1.__metadata("design:type", Array)
|
|
212
|
-
|
|
213
|
-
], ExpandDirective.prototype, "expandedKeys", null);
|
|
211
|
+
tslib_1.__metadata("design:type", Array)
|
|
212
|
+
], ExpandDirective.prototype, "expandedKeys", void 0);
|
|
214
213
|
ExpandDirective = tslib_1.__decorate([
|
|
215
214
|
Directive({ selector: '[kendoTreeViewExpandable]' }),
|
|
216
215
|
tslib_1.__metadata("design:paramtypes", [ExpandableComponent])
|
|
@@ -9,7 +9,7 @@ export var packageMetadata = {
|
|
|
9
9
|
name: '@progress/kendo-angular-treeview',
|
|
10
10
|
productName: 'Kendo UI for Angular',
|
|
11
11
|
productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
|
|
12
|
-
publishDate:
|
|
12
|
+
publishDate: 1638442548,
|
|
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
|
};
|
|
@@ -7,6 +7,7 @@ import { Directive, EventEmitter, HostBinding, Input, Output } from '@angular/co
|
|
|
7
7
|
import { TreeViewComponent } from '../treeview.component';
|
|
8
8
|
import { isBoolean, isPresent, noop } from '../utils';
|
|
9
9
|
import { Subscription } from 'rxjs';
|
|
10
|
+
import { isChanged } from '@progress/kendo-angular-common';
|
|
10
11
|
/**
|
|
11
12
|
* A directive which manages the in-memory selection state of the TreeView node
|
|
12
13
|
* ([see example]({% slug selection_treeview %})).
|
|
@@ -24,9 +25,12 @@ var SelectDirective = /** @class */ (function () {
|
|
|
24
25
|
'multiple': function (e) { return _this.selectMultiple(e); },
|
|
25
26
|
'single': function (e) { return _this.selectSingle(e); }
|
|
26
27
|
};
|
|
27
|
-
|
|
28
|
+
/**
|
|
29
|
+
* Reflectes the internal `selectedKeys` state.
|
|
30
|
+
*/
|
|
31
|
+
this.state = new Set();
|
|
28
32
|
this.subscriptions.add(this.treeView.selectionChange.subscribe(this.select.bind(this)));
|
|
29
|
-
this.treeView.isSelected = function (dataItem, index) { return (_this.
|
|
33
|
+
this.treeView.isSelected = function (dataItem, index) { return (_this.state.has(_this.itemKey({ dataItem: dataItem, index: index }))); };
|
|
30
34
|
}
|
|
31
35
|
Object.defineProperty(SelectDirective.prototype, "isSelected", {
|
|
32
36
|
/**
|
|
@@ -38,20 +42,6 @@ var SelectDirective = /** @class */ (function () {
|
|
|
38
42
|
enumerable: true,
|
|
39
43
|
configurable: true
|
|
40
44
|
});
|
|
41
|
-
Object.defineProperty(SelectDirective.prototype, "selectedKeys", {
|
|
42
|
-
/**
|
|
43
|
-
* Defines the collection that will store the selected keys
|
|
44
|
-
* ([see example]({% slug selection_treeview %}#toc-selection-modes)).
|
|
45
|
-
*/
|
|
46
|
-
get: function () {
|
|
47
|
-
return this._selectedKeys;
|
|
48
|
-
},
|
|
49
|
-
set: function (keys) {
|
|
50
|
-
this._selectedKeys = keys;
|
|
51
|
-
},
|
|
52
|
-
enumerable: true,
|
|
53
|
-
configurable: true
|
|
54
|
-
});
|
|
55
45
|
Object.defineProperty(SelectDirective.prototype, "getAriaMultiselectable", {
|
|
56
46
|
get: function () {
|
|
57
47
|
return this.options.mode === 'multiple';
|
|
@@ -74,6 +64,11 @@ var SelectDirective = /** @class */ (function () {
|
|
|
74
64
|
enumerable: true,
|
|
75
65
|
configurable: true
|
|
76
66
|
});
|
|
67
|
+
SelectDirective.prototype.ngOnChanges = function (changes) {
|
|
68
|
+
if (isChanged('selectedKeys', changes, false) && changes.selectedKeys.currentValue !== this.lastChange) {
|
|
69
|
+
this.state = new Set(changes.selectedKeys.currentValue);
|
|
70
|
+
}
|
|
71
|
+
};
|
|
77
72
|
SelectDirective.prototype.ngOnDestroy = function () {
|
|
78
73
|
this.subscriptions.unsubscribe();
|
|
79
74
|
};
|
|
@@ -98,29 +93,29 @@ var SelectDirective = /** @class */ (function () {
|
|
|
98
93
|
};
|
|
99
94
|
SelectDirective.prototype.selectSingle = function (node) {
|
|
100
95
|
var key = this.itemKey(node);
|
|
101
|
-
if (this.
|
|
102
|
-
|
|
96
|
+
if (!this.state.has(key)) {
|
|
97
|
+
this.state.clear();
|
|
98
|
+
this.state.add(key);
|
|
99
|
+
this.notify();
|
|
103
100
|
}
|
|
104
|
-
this.selectedKeys = [key];
|
|
105
|
-
this.notify();
|
|
106
101
|
};
|
|
107
102
|
SelectDirective.prototype.selectMultiple = function (node) {
|
|
108
103
|
var key = this.itemKey(node);
|
|
109
|
-
var
|
|
110
|
-
var isSelected = idx > -1;
|
|
104
|
+
var isSelected = this.state.has(key);
|
|
111
105
|
if (!isPresent(key)) {
|
|
112
106
|
return;
|
|
113
107
|
}
|
|
114
108
|
if (isSelected) {
|
|
115
|
-
this.
|
|
109
|
+
this.state.delete(key);
|
|
116
110
|
}
|
|
117
111
|
else {
|
|
118
|
-
this.
|
|
112
|
+
this.state.add(key);
|
|
119
113
|
}
|
|
120
114
|
this.notify();
|
|
121
115
|
};
|
|
122
116
|
SelectDirective.prototype.notify = function () {
|
|
123
|
-
this.
|
|
117
|
+
this.lastChange = Array.from(this.state);
|
|
118
|
+
this.selectedKeysChange.emit(this.lastChange);
|
|
124
119
|
};
|
|
125
120
|
tslib_1.__decorate([
|
|
126
121
|
Input(),
|
|
@@ -137,9 +132,8 @@ var SelectDirective = /** @class */ (function () {
|
|
|
137
132
|
], SelectDirective.prototype, "selection", void 0);
|
|
138
133
|
tslib_1.__decorate([
|
|
139
134
|
Input(),
|
|
140
|
-
tslib_1.__metadata("design:type", Array)
|
|
141
|
-
|
|
142
|
-
], SelectDirective.prototype, "selectedKeys", null);
|
|
135
|
+
tslib_1.__metadata("design:type", Array)
|
|
136
|
+
], SelectDirective.prototype, "selectedKeys", void 0);
|
|
143
137
|
tslib_1.__decorate([
|
|
144
138
|
Output(),
|
|
145
139
|
tslib_1.__metadata("design:type", EventEmitter)
|
package/dist/es/utils.js
CHANGED
|
@@ -286,16 +286,14 @@ export var fetchLoadedDescendants = function (lookup, filterExpression) {
|
|
|
286
286
|
/**
|
|
287
287
|
* @hidden
|
|
288
288
|
*
|
|
289
|
-
* Compares two
|
|
289
|
+
* Compares two Seets to determine whether all unique elements in one, are present in the other.
|
|
290
290
|
* Important:
|
|
291
291
|
* - it disregards the element order
|
|
292
|
-
* - it disregards element repetitions - sameValues([1, 1, 2], [1, 2, 2]) will return true
|
|
293
292
|
*/
|
|
294
|
-
export var sameValues = function (
|
|
295
|
-
if (
|
|
293
|
+
export var sameValues = function (as, bs) {
|
|
294
|
+
if (as.size !== bs.size) {
|
|
296
295
|
return false;
|
|
297
296
|
}
|
|
298
|
-
|
|
299
|
-
return a.every(function (v) { return values.has(v); });
|
|
297
|
+
return Array.from(as).every(function (v) { return bs.has(v); });
|
|
300
298
|
};
|
|
301
299
|
export { ɵ0, ɵ1, ɵ2, ɵ3, ɵ4, ɵ5, ɵ6, ɵ7, ɵ8, ɵ9 };
|
|
@@ -41,8 +41,15 @@ export declare class CheckDirective implements OnChanges, OnDestroy {
|
|
|
41
41
|
protected subscriptions: Subscription;
|
|
42
42
|
private readonly options;
|
|
43
43
|
private checkActions;
|
|
44
|
-
|
|
44
|
+
/**
|
|
45
|
+
* Reflectes the internal `checkedKeys` state.
|
|
46
|
+
*/
|
|
47
|
+
private state;
|
|
45
48
|
private clickSubscription;
|
|
49
|
+
/**
|
|
50
|
+
* Holds the last emitted `checkedKeys` collection.
|
|
51
|
+
*/
|
|
52
|
+
private lastChange;
|
|
46
53
|
constructor(treeView: TreeViewComponent, zone: NgZone);
|
|
47
54
|
ngOnChanges(changes: any): void;
|
|
48
55
|
ngOnDestroy(): void;
|
|
@@ -8,6 +8,7 @@ import { TreeViewComponent } from './treeview.component';
|
|
|
8
8
|
import { fetchLoadedDescendants, isBoolean, isPresent, noop } from './utils';
|
|
9
9
|
import { Subscription } from 'rxjs';
|
|
10
10
|
import { filter, take, switchMap, tap } from 'rxjs/operators';
|
|
11
|
+
import { isChanged } from '@progress/kendo-angular-common';
|
|
11
12
|
const indexChecked = (keys, index) => keys.filter(k => k === index).length > 0;
|
|
12
13
|
const ɵ0 = indexChecked;
|
|
13
14
|
const matchKey = index => k => {
|
|
@@ -44,7 +45,10 @@ let CheckDirective = class CheckDirective {
|
|
|
44
45
|
'multiple': (e) => this.checkMultiple(e),
|
|
45
46
|
'single': (e) => this.checkSingle(e)
|
|
46
47
|
};
|
|
47
|
-
|
|
48
|
+
/**
|
|
49
|
+
* Reflectes the internal `checkedKeys` state.
|
|
50
|
+
*/
|
|
51
|
+
this.state = new Set();
|
|
48
52
|
this.subscriptions.add(this.treeView.checkedChange
|
|
49
53
|
.subscribe((e) => this.check(e)));
|
|
50
54
|
let expandedItems = [];
|
|
@@ -59,16 +63,6 @@ let CheckDirective = class CheckDirective {
|
|
|
59
63
|
set isChecked(value) {
|
|
60
64
|
this.treeView.isChecked = value;
|
|
61
65
|
}
|
|
62
|
-
/**
|
|
63
|
-
* Defines the collection that will store the checked keys
|
|
64
|
-
* ([see example]({% slug checkboxes_treeview %})).
|
|
65
|
-
*/
|
|
66
|
-
get checkedKeys() {
|
|
67
|
-
return this._checkedKeys;
|
|
68
|
-
}
|
|
69
|
-
set checkedKeys(keys) {
|
|
70
|
-
this._checkedKeys = keys;
|
|
71
|
-
}
|
|
72
66
|
get options() {
|
|
73
67
|
const defaultOptions = {
|
|
74
68
|
checkChildren: true,
|
|
@@ -89,6 +83,9 @@ let CheckDirective = class CheckDirective {
|
|
|
89
83
|
this.treeView.checkboxes = this.options.enabled;
|
|
90
84
|
this.toggleCheckOnClick();
|
|
91
85
|
}
|
|
86
|
+
if (isChanged('checkedKeys', changes, false) && changes.checkedKeys.currentValue !== this.lastChange) {
|
|
87
|
+
this.state = new Set(changes.checkedKeys.currentValue);
|
|
88
|
+
}
|
|
92
89
|
}
|
|
93
90
|
ngOnDestroy() {
|
|
94
91
|
this.subscriptions.unsubscribe();
|
|
@@ -98,11 +95,11 @@ let CheckDirective = class CheckDirective {
|
|
|
98
95
|
if (!this.checkKey) {
|
|
99
96
|
return this.isIndexChecked(index);
|
|
100
97
|
}
|
|
101
|
-
const
|
|
102
|
-
return
|
|
98
|
+
const hasKey = this.state.has(this.itemKey({ dataItem, index }));
|
|
99
|
+
return hasKey ? 'checked' : 'none';
|
|
103
100
|
}
|
|
104
101
|
isIndexChecked(index) {
|
|
105
|
-
const checkedKeys = this.
|
|
102
|
+
const checkedKeys = Array.from(this.state).filter(matchKey(index));
|
|
106
103
|
if (indexChecked(checkedKeys, index)) {
|
|
107
104
|
return 'checked';
|
|
108
105
|
}
|
|
@@ -133,7 +130,11 @@ let CheckDirective = class CheckDirective {
|
|
|
133
130
|
}
|
|
134
131
|
checkSingle(node) {
|
|
135
132
|
const key = this.itemKey(node.item);
|
|
136
|
-
|
|
133
|
+
const hasKey = this.state.has(key);
|
|
134
|
+
this.state.clear();
|
|
135
|
+
if (!hasKey) {
|
|
136
|
+
this.state.add(key);
|
|
137
|
+
}
|
|
137
138
|
this.notify();
|
|
138
139
|
}
|
|
139
140
|
checkMultiple(node) {
|
|
@@ -168,7 +169,6 @@ let CheckDirective = class CheckDirective {
|
|
|
168
169
|
if (!isPresent(currentKey)) {
|
|
169
170
|
return;
|
|
170
171
|
}
|
|
171
|
-
const checkedKeys = new Set(this.checkedKeys);
|
|
172
172
|
const pendingCheck = [currentKey];
|
|
173
173
|
if (this.options.checkChildren) {
|
|
174
174
|
const descendants = fetchLoadedDescendants(node, ({ item }) => this.treeView.isVisible(item.dataItem, item.index) &&
|
|
@@ -176,61 +176,57 @@ let CheckDirective = class CheckDirective {
|
|
|
176
176
|
.map(({ item }) => this.itemKey(item));
|
|
177
177
|
pendingCheck.push(...descendants);
|
|
178
178
|
}
|
|
179
|
-
const shouldCheck = !
|
|
179
|
+
const shouldCheck = !this.state.has(currentKey);
|
|
180
180
|
pendingCheck.forEach(key => {
|
|
181
181
|
if (shouldCheck) {
|
|
182
|
-
|
|
182
|
+
this.state.add(key);
|
|
183
183
|
}
|
|
184
184
|
else {
|
|
185
|
-
|
|
185
|
+
this.state.delete(key);
|
|
186
186
|
}
|
|
187
187
|
});
|
|
188
|
-
this.checkedKeys = Array.from(checkedKeys);
|
|
189
188
|
}
|
|
190
189
|
checkParents(parent) {
|
|
191
190
|
if (!isPresent(parent)) {
|
|
192
191
|
return;
|
|
193
192
|
}
|
|
194
|
-
const checkedKeys = new Set(this.checkedKeys);
|
|
195
193
|
let currentParent = parent;
|
|
196
194
|
while (currentParent) {
|
|
197
195
|
const parentKey = this.itemKey(currentParent.item);
|
|
198
|
-
const allChildrenSelected = currentParent.children.every(item =>
|
|
196
|
+
const allChildrenSelected = currentParent.children.every(item => this.state.has(this.itemKey(item)));
|
|
199
197
|
if (allChildrenSelected) {
|
|
200
|
-
|
|
198
|
+
this.state.add(parentKey);
|
|
201
199
|
}
|
|
202
200
|
else {
|
|
203
|
-
|
|
201
|
+
this.state.delete(parentKey);
|
|
204
202
|
}
|
|
205
203
|
currentParent = currentParent.parent;
|
|
206
204
|
}
|
|
207
|
-
this.checkedKeys = Array.from(checkedKeys);
|
|
208
205
|
}
|
|
209
206
|
notify() {
|
|
210
|
-
this.
|
|
207
|
+
this.lastChange = Array.from(this.state);
|
|
208
|
+
this.checkedKeysChange.emit(this.lastChange);
|
|
211
209
|
}
|
|
212
210
|
addCheckedItemsChildren(lookups) {
|
|
213
211
|
if (!isPresent(lookups) || lookups.length === 0) {
|
|
214
212
|
return;
|
|
215
213
|
}
|
|
216
|
-
const initiallyCheckedItemsCount = this.
|
|
217
|
-
const checkedKeys = new Set(this.checkedKeys);
|
|
214
|
+
const initiallyCheckedItemsCount = this.state.size;
|
|
218
215
|
lookups.forEach(lookup => {
|
|
219
216
|
const itemKey = this.itemKey(lookup.item);
|
|
220
|
-
if (!
|
|
217
|
+
if (!this.state.has(itemKey)) {
|
|
221
218
|
return;
|
|
222
219
|
}
|
|
223
220
|
lookup.children.forEach(item => {
|
|
224
221
|
// ensure both the parent item and each child node is enabled
|
|
225
222
|
if (!this.treeView.isDisabled(lookup.item.dataItem, lookup.item.index) &&
|
|
226
223
|
!this.treeView.isDisabled(item.dataItem, item.index)) {
|
|
227
|
-
|
|
224
|
+
this.state.add(this.itemKey(item));
|
|
228
225
|
}
|
|
229
226
|
});
|
|
230
227
|
});
|
|
231
|
-
const hasNewlyCheckedItems = initiallyCheckedItemsCount !==
|
|
228
|
+
const hasNewlyCheckedItems = initiallyCheckedItemsCount !== this.state.size;
|
|
232
229
|
if (hasNewlyCheckedItems) {
|
|
233
|
-
this.checkedKeys = Array.from(checkedKeys);
|
|
234
230
|
this.zone.run(() => this.notify());
|
|
235
231
|
}
|
|
236
232
|
}
|
|
@@ -246,9 +242,8 @@ tslib_1.__decorate([
|
|
|
246
242
|
], CheckDirective.prototype, "checkKey", void 0);
|
|
247
243
|
tslib_1.__decorate([
|
|
248
244
|
Input(),
|
|
249
|
-
tslib_1.__metadata("design:type", Array)
|
|
250
|
-
|
|
251
|
-
], CheckDirective.prototype, "checkedKeys", null);
|
|
245
|
+
tslib_1.__metadata("design:type", Array)
|
|
246
|
+
], CheckDirective.prototype, "checkedKeys", void 0);
|
|
252
247
|
tslib_1.__decorate([
|
|
253
248
|
Input('kendoTreeViewCheckable'),
|
|
254
249
|
tslib_1.__metadata("design:type", Object)
|