@progress/kendo-angular-treeview 5.4.2-dev.202111011443 → 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 +2 -2
- 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/treeview.component.js +23 -10
- 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/main.d.ts +1 -0
- 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/treeview-filter-settings.d.ts +2 -0
- package/dist/es2015/treeview.component.d.ts +20 -5
- package/dist/es2015/treeview.component.js +24 -11
- package/dist/es2015/utils.d.ts +2 -3
- package/dist/es2015/utils.js +4 -6
- package/dist/fesm2015/index.js +117 -113
- package/dist/fesm5/index.js +117 -125
- 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/treeview.component.js +23 -10
- 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)
|
|
@@ -52,9 +52,10 @@ var providers = [
|
|
|
52
52
|
* Represents the [Kendo UI TreeView component for Angular]({% slug overview_treeview %}).
|
|
53
53
|
*
|
|
54
54
|
* @example
|
|
55
|
-
* {% meta height:
|
|
56
|
-
* {% embed_file
|
|
57
|
-
* {% embed_file
|
|
55
|
+
* {% meta height:450 %}
|
|
56
|
+
* {% embed_file get-started/app.component.ts preview %}
|
|
57
|
+
* {% embed_file get-started/app.module.ts %}
|
|
58
|
+
* {% embed_file shared/main.ts %}
|
|
58
59
|
* {% endmeta %}
|
|
59
60
|
*/
|
|
60
61
|
var TreeViewComponent = /** @class */ (function () {
|
|
@@ -255,21 +256,33 @@ var TreeViewComponent = /** @class */ (function () {
|
|
|
255
256
|
configurable: true
|
|
256
257
|
});
|
|
257
258
|
Object.defineProperty(TreeViewComponent.prototype, "nodeTemplateRef", {
|
|
259
|
+
get: function () {
|
|
260
|
+
return this._nodeTemplateRef || this.nodeTemplateQuery;
|
|
261
|
+
},
|
|
258
262
|
/**
|
|
259
263
|
* @hidden
|
|
264
|
+
*
|
|
265
|
+
* Defines the template for each node.
|
|
266
|
+
* Takes precedence over nested templates in the TreeView tag.
|
|
260
267
|
*/
|
|
261
268
|
set: function (template) {
|
|
262
|
-
this.
|
|
269
|
+
this._nodeTemplateRef = template;
|
|
263
270
|
},
|
|
264
271
|
enumerable: true,
|
|
265
272
|
configurable: true
|
|
266
273
|
});
|
|
267
274
|
Object.defineProperty(TreeViewComponent.prototype, "loadMoreButtonTemplateRef", {
|
|
275
|
+
get: function () {
|
|
276
|
+
return this._loadMoreButtonTemplateRef || this.loadMoreButtonTemplateQuery;
|
|
277
|
+
},
|
|
268
278
|
/**
|
|
269
279
|
* @hidden
|
|
280
|
+
*
|
|
281
|
+
* Defines the template for each load-more button.
|
|
282
|
+
* Takes precedence over nested templates in the TreeView tag.
|
|
270
283
|
*/
|
|
271
284
|
set: function (template) {
|
|
272
|
-
this.
|
|
285
|
+
this._loadMoreButtonTemplateRef = template;
|
|
273
286
|
},
|
|
274
287
|
enumerable: true,
|
|
275
288
|
configurable: true
|
|
@@ -705,18 +718,18 @@ var TreeViewComponent = /** @class */ (function () {
|
|
|
705
718
|
tslib_1.__metadata("design:type", EventEmitter)
|
|
706
719
|
], TreeViewComponent.prototype, "nodeDblClick", void 0);
|
|
707
720
|
tslib_1.__decorate([
|
|
708
|
-
ContentChild(NodeTemplateDirective, { static:
|
|
721
|
+
ContentChild(NodeTemplateDirective, { static: false }),
|
|
709
722
|
tslib_1.__metadata("design:type", NodeTemplateDirective)
|
|
710
|
-
], TreeViewComponent.prototype, "
|
|
723
|
+
], TreeViewComponent.prototype, "nodeTemplateQuery", void 0);
|
|
711
724
|
tslib_1.__decorate([
|
|
712
725
|
Input('nodeTemplate'),
|
|
713
726
|
tslib_1.__metadata("design:type", NodeTemplateDirective),
|
|
714
727
|
tslib_1.__metadata("design:paramtypes", [NodeTemplateDirective])
|
|
715
728
|
], TreeViewComponent.prototype, "nodeTemplateRef", null);
|
|
716
729
|
tslib_1.__decorate([
|
|
717
|
-
ContentChild(LoadMoreButtonTemplateDirective, { static:
|
|
730
|
+
ContentChild(LoadMoreButtonTemplateDirective, { static: false }),
|
|
718
731
|
tslib_1.__metadata("design:type", LoadMoreButtonTemplateDirective)
|
|
719
|
-
], TreeViewComponent.prototype, "
|
|
732
|
+
], TreeViewComponent.prototype, "loadMoreButtonTemplateQuery", void 0);
|
|
720
733
|
tslib_1.__decorate([
|
|
721
734
|
Input('loadMoreButtonTemplate'),
|
|
722
735
|
tslib_1.__metadata("design:type", LoadMoreButtonTemplateDirective),
|
|
@@ -789,7 +802,7 @@ var TreeViewComponent = /** @class */ (function () {
|
|
|
789
802
|
exportAs: 'kendoTreeView',
|
|
790
803
|
providers: providers,
|
|
791
804
|
selector: 'kendo-treeview',
|
|
792
|
-
template: "\n <kendo-textbox\n #filterInput\n *ngIf=\"filterable\"\n [value]=\"filter\"\n [clearButton]=\"true\"\n (valueChange)=\"filterChange.emit($event)\"\n [placeholder]=\"filterInputPlaceholder\"\n >\n <ng-template kendoTextBoxPrefixTemplate>\n <span class=\"k-icon k-i-search\"></span>\n </ng-template>\n </kendo-textbox>\n <ul class=\"k-treeview-lines\"\n kendoTreeViewGroup\n role=\"group\"\n [loadOnDemand]=\"loadOnDemand\"\n [checkboxes]=\"checkboxes\"\n [expandIcons]=\"expandIcons\"\n [selectable]=\"selectable\"\n [touchActions]=\"touchActions\"\n [children]=\"children\"\n [hasChildren]=\"hasChildren\"\n [isChecked]=\"isChecked\"\n [isDisabled]=\"isDisabled\"\n [isExpanded]=\"isExpanded\"\n [isSelected]=\"isSelected\"\n [isVisible]=\"isVisible\"\n [nodeTemplateRef]=\"
|
|
805
|
+
template: "\n <kendo-textbox\n #filterInput\n *ngIf=\"filterable\"\n [value]=\"filter\"\n [clearButton]=\"true\"\n (valueChange)=\"filterChange.emit($event)\"\n [placeholder]=\"filterInputPlaceholder\"\n >\n <ng-template kendoTextBoxPrefixTemplate>\n <span class=\"k-icon k-i-search\"></span>\n </ng-template>\n </kendo-textbox>\n <ul class=\"k-treeview-lines\"\n kendoTreeViewGroup\n role=\"group\"\n [loadOnDemand]=\"loadOnDemand\"\n [checkboxes]=\"checkboxes\"\n [expandIcons]=\"expandIcons\"\n [selectable]=\"selectable\"\n [touchActions]=\"touchActions\"\n [children]=\"children\"\n [hasChildren]=\"hasChildren\"\n [isChecked]=\"isChecked\"\n [isDisabled]=\"isDisabled\"\n [isExpanded]=\"isExpanded\"\n [isSelected]=\"isSelected\"\n [isVisible]=\"isVisible\"\n [nodeTemplateRef]=\"nodeTemplateRef?.templateRef\"\n [loadMoreButtonTemplateRef]=\"loadMoreButtonTemplateRef?.templateRef\"\n [textField]=\"textField\"\n [nodes]=\"fetchNodes\"\n [loadMoreService]=\"loadMoreService\"\n [trackBy]=\"trackBy\"\n >\n </ul>\n <ng-container #assetsContainer></ng-container>\n "
|
|
793
806
|
}),
|
|
794
807
|
tslib_1.__metadata("design:paramtypes", [ElementRef,
|
|
795
808
|
ChangeDetectorRef,
|
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;
|