@progress/kendo-angular-treeview 7.1.0-dev.202206141206 → 7.1.0-dev.202206151232
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/bundles/kendo-angular-treeview.umd.js +1 -1
- package/check.directive.d.ts +1 -0
- package/checkable-settings.d.ts +7 -0
- package/esm2015/check.directive.js +24 -7
- package/esm2015/navigation/navigation.service.js +13 -0
- package/esm2015/package-metadata.js +1 -1
- package/esm2015/treeview-group.component.js +12 -3
- package/esm2015/treeview-item.directive.js +2 -3
- package/esm2015/treeview.component.js +16 -3
- package/fesm2015/kendo-angular-treeview.js +68 -17
- package/navigation/navigation.service.d.ts +1 -0
- package/package.json +1 -1
- package/treeview-group.component.d.ts +6 -2
- package/treeview.component.d.ts +6 -1
package/check.directive.d.ts
CHANGED
|
@@ -64,6 +64,7 @@ export declare class CheckDirective implements OnChanges, OnDestroy {
|
|
|
64
64
|
private unsubscribeClick;
|
|
65
65
|
private checkNode;
|
|
66
66
|
private checkParents;
|
|
67
|
+
private allChildrenSelected;
|
|
67
68
|
private notify;
|
|
68
69
|
private addCheckedItemsChildren;
|
|
69
70
|
static ɵfac: i0.ɵɵFactoryDeclaration<CheckDirective, never>;
|
package/checkable-settings.d.ts
CHANGED
|
@@ -45,4 +45,11 @@ export interface CheckableSettings {
|
|
|
45
45
|
* Defaults to `false`.
|
|
46
46
|
*/
|
|
47
47
|
checkOnClick?: boolean;
|
|
48
|
+
/**
|
|
49
|
+
* Determines whether disabled children will be checked if their parent is checked.
|
|
50
|
+
* Defaults to `false`
|
|
51
|
+
*
|
|
52
|
+
* > The option works only together with the multiple selection mode and `checkChildren: true`.
|
|
53
|
+
*/
|
|
54
|
+
checkDisabledChildren?: boolean;
|
|
48
55
|
}
|
|
@@ -169,10 +169,12 @@ export class CheckDirective {
|
|
|
169
169
|
}
|
|
170
170
|
const pendingCheck = [currentKey];
|
|
171
171
|
if (this.options.checkChildren) {
|
|
172
|
-
const descendants = fetchLoadedDescendants(node, ({ item }) => this.treeView.
|
|
173
|
-
|
|
174
|
-
.
|
|
175
|
-
|
|
172
|
+
const descendants = fetchLoadedDescendants(node, ({ item }) => (this.treeView.disableParentNodesOnly || this.options.checkDisabledChildren ?
|
|
173
|
+
this.treeView.isVisible(item.dataItem, item.index) :
|
|
174
|
+
this.treeView.isVisible(item.dataItem, item.index) &&
|
|
175
|
+
!this.treeView.isDisabled(item.dataItem, item.index)));
|
|
176
|
+
pendingCheck.push(...descendants.filter((item) => this.options.checkDisabledChildren || !this.treeView.isDisabled(item.item.dataItem, item.item.index))
|
|
177
|
+
.map(({ item }) => this.itemKey(item)));
|
|
176
178
|
}
|
|
177
179
|
const shouldCheck = !this.state.has(currentKey);
|
|
178
180
|
pendingCheck.forEach(key => {
|
|
@@ -191,8 +193,9 @@ export class CheckDirective {
|
|
|
191
193
|
let currentParent = parent;
|
|
192
194
|
while (currentParent) {
|
|
193
195
|
const parentKey = this.itemKey(currentParent.item);
|
|
196
|
+
const isDisabled = this.treeView.isDisabled(currentParent.item.dataItem, currentParent.item.index);
|
|
194
197
|
const allChildrenSelected = currentParent.children.every(item => this.state.has(this.itemKey(item)));
|
|
195
|
-
if (allChildrenSelected) {
|
|
198
|
+
if ((!isDisabled || this.options.checkDisabledChildren) && allChildrenSelected) {
|
|
196
199
|
this.state.add(parentKey);
|
|
197
200
|
}
|
|
198
201
|
else {
|
|
@@ -201,6 +204,12 @@ export class CheckDirective {
|
|
|
201
204
|
currentParent = currentParent.parent;
|
|
202
205
|
}
|
|
203
206
|
}
|
|
207
|
+
allChildrenSelected(children) {
|
|
208
|
+
return children.every(item => {
|
|
209
|
+
const childrenSel = this.allChildrenSelected(item.children);
|
|
210
|
+
return this.state.has(this.itemKey(item.item)) && childrenSel;
|
|
211
|
+
});
|
|
212
|
+
}
|
|
204
213
|
notify() {
|
|
205
214
|
this.lastChange = Array.from(this.state);
|
|
206
215
|
this.checkedKeysChange.emit(this.lastChange);
|
|
@@ -210,6 +219,7 @@ export class CheckDirective {
|
|
|
210
219
|
return;
|
|
211
220
|
}
|
|
212
221
|
const initiallyCheckedItemsCount = this.state.size;
|
|
222
|
+
const disabledItems = new Set();
|
|
213
223
|
lookups.forEach(lookup => {
|
|
214
224
|
const itemKey = this.itemKey(lookup.item);
|
|
215
225
|
if (!this.state.has(itemKey)) {
|
|
@@ -217,12 +227,19 @@ export class CheckDirective {
|
|
|
217
227
|
}
|
|
218
228
|
lookup.children.forEach(item => {
|
|
219
229
|
// ensure both the parent item and each child node is enabled
|
|
220
|
-
if (!this.treeView.isDisabled(lookup.item.dataItem, lookup.item.index) &&
|
|
221
|
-
!this.treeView.isDisabled(item.dataItem, item.index))
|
|
230
|
+
if ((!this.treeView.isDisabled(lookup.item.dataItem, lookup.item.index) &&
|
|
231
|
+
!this.treeView.isDisabled(item.dataItem, item.index)) ||
|
|
232
|
+
this.treeView.disableParentNodesOnly || this.options.checkDisabledChildren) {
|
|
222
233
|
this.state.add(this.itemKey(item));
|
|
223
234
|
}
|
|
235
|
+
if (this.treeView.disableParentNodesOnly &&
|
|
236
|
+
!this.options.checkDisabledChildren &&
|
|
237
|
+
this.treeView.isDisabled(item.dataItem, item.index)) {
|
|
238
|
+
disabledItems.add(this.itemKey(item));
|
|
239
|
+
}
|
|
224
240
|
});
|
|
225
241
|
});
|
|
242
|
+
disabledItems.forEach(item => this.state.delete(item));
|
|
226
243
|
const hasNewlyCheckedItems = initiallyCheckedItemsCount !== this.state.size;
|
|
227
244
|
if (hasNewlyCheckedItems) {
|
|
228
245
|
this.zone.run(() => this.notify());
|
|
@@ -126,6 +126,9 @@ export class NavigationService {
|
|
|
126
126
|
return nodeIndex(this.focusableItem) === index;
|
|
127
127
|
}
|
|
128
128
|
isDisabled(index) {
|
|
129
|
+
if (!index) {
|
|
130
|
+
return false;
|
|
131
|
+
}
|
|
129
132
|
return this.model.findNode(index).disabled;
|
|
130
133
|
}
|
|
131
134
|
registerItem(id, index, disabled, loadMoreButton = false, visible = true) {
|
|
@@ -138,6 +141,16 @@ export class NavigationService {
|
|
|
138
141
|
}
|
|
139
142
|
this.model.registerItem(id, index, disabled, loadMoreButton, visible);
|
|
140
143
|
}
|
|
144
|
+
updateItem(index, disabled, visible = true) {
|
|
145
|
+
const itemAtIndex = this.model.findNode(index);
|
|
146
|
+
if (isPresent(itemAtIndex)) {
|
|
147
|
+
if (this.isActive(index)) {
|
|
148
|
+
this.deactivate();
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
itemAtIndex.disabled = disabled;
|
|
152
|
+
itemAtIndex.visible = visible;
|
|
153
|
+
}
|
|
141
154
|
unregisterItem(id, index) {
|
|
142
155
|
if (this.isActive(index)) {
|
|
143
156
|
this.activateParent(index);
|
|
@@ -9,7 +9,7 @@ export const packageMetadata = {
|
|
|
9
9
|
name: '@progress/kendo-angular-treeview',
|
|
10
10
|
productName: 'Kendo UI for Angular',
|
|
11
11
|
productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
|
|
12
|
-
publishDate:
|
|
12
|
+
publishDate: 1655296333,
|
|
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
|
};
|
|
@@ -45,7 +45,6 @@ export class TreeViewGroupComponent {
|
|
|
45
45
|
this.initialNodesLoaded = false;
|
|
46
46
|
this.loadingMoreNodes = false;
|
|
47
47
|
this.isItemExpandable = (node, index) => this.expandDisabledNodes || !this.isItemDisabled(node, index);
|
|
48
|
-
this.isItemDisabled = (node, index) => this.disabled || this.isDisabled(node, this.nodeIndex(index));
|
|
49
48
|
this._data = [];
|
|
50
49
|
this.singleRecordSubscriptions = new Subscription();
|
|
51
50
|
this.isChecked = () => 'none';
|
|
@@ -163,6 +162,12 @@ export class TreeViewGroupComponent {
|
|
|
163
162
|
this.loadMoreLocalNodes();
|
|
164
163
|
}
|
|
165
164
|
}
|
|
165
|
+
/**
|
|
166
|
+
* @hidden
|
|
167
|
+
*/
|
|
168
|
+
isItemDisabled(node, index) {
|
|
169
|
+
return (this.disabled && !this.disableParentNodesOnly) || this.isDisabled(node, this.nodeIndex(index));
|
|
170
|
+
}
|
|
166
171
|
/**
|
|
167
172
|
* @hidden
|
|
168
173
|
*/
|
|
@@ -259,7 +264,7 @@ export class TreeViewGroupComponent {
|
|
|
259
264
|
}
|
|
260
265
|
}
|
|
261
266
|
TreeViewGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TreeViewGroupComponent, deps: [{ token: i1.ExpandStateService }, { token: i2.LoadingNotificationService }, { token: i3.IndexBuilderService }, { token: i4.TreeViewLookupService }, { token: i5.NavigationService }, { token: i6.NodeChildrenService }, { token: i7.DataChangeNotificationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
262
|
-
TreeViewGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TreeViewGroupComponent, selector: "[kendoTreeViewGroup]", inputs: { checkboxes: "checkboxes", expandIcons: "expandIcons", disabled: "disabled", selectable: "selectable", touchActions: "touchActions", loadOnDemand: "loadOnDemand", trackBy: "trackBy", nodes: "nodes", textField: "textField", parentDataItem: "parentDataItem", parentIndex: "parentIndex", nodeTemplateRef: "nodeTemplateRef", loadMoreButtonTemplateRef: "loadMoreButtonTemplateRef", loadMoreService: "loadMoreService", size: "size", expandDisabledNodes: "expandDisabledNodes", isChecked: "isChecked", isDisabled: "isDisabled", isExpanded: "isExpanded", isVisible: "isVisible", isSelected: "isSelected", children: "children", hasChildren: "hasChildren" }, host: { properties: { "class.k-treeview-group": "this.kGroupClass", "attr.role": "this.role" } }, usesOnChanges: true, ngImport: i0, template: `
|
|
267
|
+
TreeViewGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TreeViewGroupComponent, selector: "[kendoTreeViewGroup]", inputs: { checkboxes: "checkboxes", expandIcons: "expandIcons", disabled: "disabled", selectable: "selectable", touchActions: "touchActions", disableParentNodesOnly: "disableParentNodesOnly", loadOnDemand: "loadOnDemand", trackBy: "trackBy", nodes: "nodes", textField: "textField", parentDataItem: "parentDataItem", parentIndex: "parentIndex", nodeTemplateRef: "nodeTemplateRef", loadMoreButtonTemplateRef: "loadMoreButtonTemplateRef", loadMoreService: "loadMoreService", size: "size", expandDisabledNodes: "expandDisabledNodes", isChecked: "isChecked", isDisabled: "isDisabled", isExpanded: "isExpanded", isVisible: "isVisible", isSelected: "isSelected", children: "children", hasChildren: "hasChildren" }, host: { properties: { "class.k-treeview-group": "this.kGroupClass", "attr.role": "this.role" } }, usesOnChanges: true, ngImport: i0, template: `
|
|
263
268
|
<li
|
|
264
269
|
*ngFor="let node of data; let index = index; trackBy: trackBy"
|
|
265
270
|
class="k-treeview-item"
|
|
@@ -362,6 +367,7 @@ TreeViewGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
|
|
|
362
367
|
[loadMoreService]="loadMoreService"
|
|
363
368
|
[@toggle]="true"
|
|
364
369
|
[trackBy]="trackBy"
|
|
370
|
+
[disableParentNodesOnly]="disableParentNodesOnly"
|
|
365
371
|
>
|
|
366
372
|
</ul>
|
|
367
373
|
</li>
|
|
@@ -407,7 +413,7 @@ TreeViewGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
|
|
|
407
413
|
</span>
|
|
408
414
|
</div>
|
|
409
415
|
</li>
|
|
410
|
-
`, isInline: true, components: [{ type: i8.CheckBoxComponent, selector: "kendo-checkbox", inputs: ["id", "isChecked", "node", "index", "labelText", "tabindex", "size"], outputs: ["checkStateChange"] }, { type: TreeViewGroupComponent, selector: "[kendoTreeViewGroup]", inputs: ["checkboxes", "expandIcons", "disabled", "selectable", "touchActions", "loadOnDemand", "trackBy", "nodes", "textField", "parentDataItem", "parentIndex", "nodeTemplateRef", "loadMoreButtonTemplateRef", "loadMoreService", "size", "expandDisabledNodes", "isChecked", "isDisabled", "isExpanded", "isVisible", "isSelected", "children", "hasChildren"] }], directives: [{ type: i9.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10.TreeViewItemDirective, selector: "[kendoTreeViewItem]", inputs: ["dataItem", "index", "parentDataItem", "parentIndex", "role", "loadOnDemand", "checkable", "selectable", "expandable", "isChecked", "isDisabled", "isVisible", "isExpanded", "isSelected"] }, { type: i9.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i11.LoadingIndicatorDirective, selector: "[kendoTreeViewLoading]", inputs: ["kendoTreeViewLoading"] }, { type: i12.TreeViewItemContentDirective, selector: "[kendoTreeViewItemContent]", inputs: ["dataItem", "index", "initialSelection", "isSelected"] }, { type: i9.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i9.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i9.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i9.NgSwitchDefault, selector: "[ngSwitchDefault]" }], animations: [
|
|
416
|
+
`, isInline: true, components: [{ type: i8.CheckBoxComponent, selector: "kendo-checkbox", inputs: ["id", "isChecked", "node", "index", "labelText", "tabindex", "size"], outputs: ["checkStateChange"] }, { type: TreeViewGroupComponent, selector: "[kendoTreeViewGroup]", inputs: ["checkboxes", "expandIcons", "disabled", "selectable", "touchActions", "disableParentNodesOnly", "loadOnDemand", "trackBy", "nodes", "textField", "parentDataItem", "parentIndex", "nodeTemplateRef", "loadMoreButtonTemplateRef", "loadMoreService", "size", "expandDisabledNodes", "isChecked", "isDisabled", "isExpanded", "isVisible", "isSelected", "children", "hasChildren"] }], directives: [{ type: i9.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10.TreeViewItemDirective, selector: "[kendoTreeViewItem]", inputs: ["dataItem", "index", "parentDataItem", "parentIndex", "role", "loadOnDemand", "checkable", "selectable", "expandable", "isChecked", "isDisabled", "isVisible", "isExpanded", "isSelected"] }, { type: i9.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i11.LoadingIndicatorDirective, selector: "[kendoTreeViewLoading]", inputs: ["kendoTreeViewLoading"] }, { type: i12.TreeViewItemContentDirective, selector: "[kendoTreeViewItemContent]", inputs: ["dataItem", "index", "initialSelection", "isSelected"] }, { type: i9.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i9.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i9.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i9.NgSwitchDefault, selector: "[ngSwitchDefault]" }], animations: [
|
|
411
417
|
trigger('toggle', [
|
|
412
418
|
transition('void => *', [
|
|
413
419
|
style({ height: 0 }),
|
|
@@ -539,6 +545,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
|
|
|
539
545
|
[loadMoreService]="loadMoreService"
|
|
540
546
|
[@toggle]="true"
|
|
541
547
|
[trackBy]="trackBy"
|
|
548
|
+
[disableParentNodesOnly]="disableParentNodesOnly"
|
|
542
549
|
>
|
|
543
550
|
</ul>
|
|
544
551
|
</li>
|
|
@@ -602,6 +609,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
|
|
|
602
609
|
type: Input
|
|
603
610
|
}], touchActions: [{
|
|
604
611
|
type: Input
|
|
612
|
+
}], disableParentNodesOnly: [{
|
|
613
|
+
type: Input
|
|
605
614
|
}], loadOnDemand: [{
|
|
606
615
|
type: Input
|
|
607
616
|
}], trackBy: [{
|
|
@@ -160,13 +160,12 @@ export class TreeViewItemDirective {
|
|
|
160
160
|
updateNodeAvailability() {
|
|
161
161
|
const service = this.navigationService;
|
|
162
162
|
if (this.isDisabled || !this.isVisible) {
|
|
163
|
-
service.activateClosest(this.index); // activate before
|
|
163
|
+
service.activateClosest(this.index); // activate before updating the item
|
|
164
164
|
}
|
|
165
165
|
else {
|
|
166
166
|
service.activateFocusable();
|
|
167
167
|
}
|
|
168
|
-
service.
|
|
169
|
-
service.registerItem(this.id, this.index, this.isDisabled, this.isButton, this.isVisible);
|
|
168
|
+
service.updateItem(this.index, this.isDisabled, this.isVisible);
|
|
170
169
|
}
|
|
171
170
|
setAriaAttributes() {
|
|
172
171
|
this.setAttribute('aria-level', this.ib.level(this.index).toString());
|
|
@@ -231,6 +231,11 @@ export class TreeViewComponent {
|
|
|
231
231
|
* Sets an initial value of the built-in input element used for filtering.
|
|
232
232
|
*/
|
|
233
233
|
this.filter = '';
|
|
234
|
+
/**
|
|
235
|
+
* Indicates whether only parent nodes should be disabled or their child nodes as well
|
|
236
|
+
* @default false
|
|
237
|
+
*/
|
|
238
|
+
this.disableParentNodesOnly = false;
|
|
234
239
|
this.checkboxes = false;
|
|
235
240
|
this.expandIcons = false;
|
|
236
241
|
this.selectable = false;
|
|
@@ -517,7 +522,11 @@ export class TreeViewComponent {
|
|
|
517
522
|
focusItem = closestNode(e.target);
|
|
518
523
|
}
|
|
519
524
|
if (focusItem) {
|
|
520
|
-
|
|
525
|
+
const nodeIndex = nodeId(e.target);
|
|
526
|
+
if (this.navigationService.isDisabled(nodeIndex)) {
|
|
527
|
+
return;
|
|
528
|
+
}
|
|
529
|
+
this.navigationService.activateIndex(nodeIndex);
|
|
521
530
|
if (!this.isActive && hasObservers(this.onFocus)) {
|
|
522
531
|
this.ngZone.run(() => {
|
|
523
532
|
this.onFocus.emit();
|
|
@@ -603,7 +612,7 @@ export class TreeViewComponent {
|
|
|
603
612
|
}
|
|
604
613
|
}
|
|
605
614
|
TreeViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TreeViewComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.ExpandStateService }, { token: i2.NavigationService }, { token: i3.NodeChildrenService }, { token: i4.SelectionService }, { token: i5.TreeViewLookupService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i6.DataChangeNotificationService }, { token: i7.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
606
|
-
TreeViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TreeViewComponent, selector: "kendo-treeview", inputs: { filterInputPlaceholder: "filterInputPlaceholder", expandDisabledNodes: "expandDisabledNodes", animate: "animate", nodeTemplateRef: ["nodeTemplate", "nodeTemplateRef"], loadMoreButtonTemplateRef: ["loadMoreButtonTemplate", "loadMoreButtonTemplateRef"], trackBy: "trackBy", nodes: "nodes", textField: "textField", hasChildren: "hasChildren", isChecked: "isChecked", isDisabled: "isDisabled", isExpanded: "isExpanded", isSelected: "isSelected", isVisible: "isVisible", navigable: "navigable", children: "children", loadOnDemand: "loadOnDemand", filterable: "filterable", filter: "filter", size: "size" }, outputs: { childrenLoaded: "childrenLoaded", onBlur: "blur", onFocus: "focus", expand: "expand", collapse: "collapse", nodeDragStart: "nodeDragStart", nodeDrag: "nodeDrag", filterStateChange: "filterStateChange", nodeDrop: "nodeDrop", nodeDragEnd: "nodeDragEnd", addItem: "addItem", removeItem: "removeItem", checkedChange: "checkedChange", selectionChange: "selectionChange", filterChange: "filterChange", nodeClick: "nodeClick", nodeDblClick: "nodeDblClick" }, host: { properties: { "class.k-treeview": "this.classNames", "attr.role": "this.role", "attr.dir": "this.direction", "@.disabled": "this.animate" } }, providers: providers, queries: [{ propertyName: "nodeTemplateQuery", first: true, predicate: NodeTemplateDirective, descendants: true }, { propertyName: "loadMoreButtonTemplateQuery", first: true, predicate: LoadMoreButtonTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "assetsContainer", first: true, predicate: ["assetsContainer"], descendants: true, read: ViewContainerRef, static: true }], exportAs: ["kendoTreeView"], usesOnChanges: true, ngImport: i0, template: `
|
|
615
|
+
TreeViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TreeViewComponent, selector: "kendo-treeview", inputs: { filterInputPlaceholder: "filterInputPlaceholder", expandDisabledNodes: "expandDisabledNodes", animate: "animate", nodeTemplateRef: ["nodeTemplate", "nodeTemplateRef"], loadMoreButtonTemplateRef: ["loadMoreButtonTemplate", "loadMoreButtonTemplateRef"], trackBy: "trackBy", nodes: "nodes", textField: "textField", hasChildren: "hasChildren", isChecked: "isChecked", isDisabled: "isDisabled", isExpanded: "isExpanded", isSelected: "isSelected", isVisible: "isVisible", navigable: "navigable", children: "children", loadOnDemand: "loadOnDemand", filterable: "filterable", filter: "filter", size: "size", disableParentNodesOnly: "disableParentNodesOnly" }, outputs: { childrenLoaded: "childrenLoaded", onBlur: "blur", onFocus: "focus", expand: "expand", collapse: "collapse", nodeDragStart: "nodeDragStart", nodeDrag: "nodeDrag", filterStateChange: "filterStateChange", nodeDrop: "nodeDrop", nodeDragEnd: "nodeDragEnd", addItem: "addItem", removeItem: "removeItem", checkedChange: "checkedChange", selectionChange: "selectionChange", filterChange: "filterChange", nodeClick: "nodeClick", nodeDblClick: "nodeDblClick" }, host: { properties: { "class.k-treeview": "this.classNames", "attr.role": "this.role", "attr.dir": "this.direction", "@.disabled": "this.animate" } }, providers: providers, queries: [{ propertyName: "nodeTemplateQuery", first: true, predicate: NodeTemplateDirective, descendants: true }, { propertyName: "loadMoreButtonTemplateQuery", first: true, predicate: LoadMoreButtonTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "assetsContainer", first: true, predicate: ["assetsContainer"], descendants: true, read: ViewContainerRef, static: true }], exportAs: ["kendoTreeView"], usesOnChanges: true, ngImport: i0, template: `
|
|
607
616
|
<span
|
|
608
617
|
class="k-treeview-filter"
|
|
609
618
|
*ngIf="filterable"
|
|
@@ -633,6 +642,7 @@ TreeViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
|
|
|
633
642
|
[hasChildren]="hasChildren"
|
|
634
643
|
[isChecked]="isChecked"
|
|
635
644
|
[isDisabled]="isDisabled"
|
|
645
|
+
[disableParentNodesOnly]="disableParentNodesOnly"
|
|
636
646
|
[isExpanded]="isExpanded"
|
|
637
647
|
[isSelected]="isSelected"
|
|
638
648
|
[isVisible]="isVisible"
|
|
@@ -646,7 +656,7 @@ TreeViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
|
|
|
646
656
|
>
|
|
647
657
|
</ul>
|
|
648
658
|
<ng-container #assetsContainer></ng-container>
|
|
649
|
-
`, isInline: true, components: [{ type: i8.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "errorIcon", "clearButtonIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { type: i9.TreeViewGroupComponent, selector: "[kendoTreeViewGroup]", inputs: ["checkboxes", "expandIcons", "disabled", "selectable", "touchActions", "loadOnDemand", "trackBy", "nodes", "textField", "parentDataItem", "parentIndex", "nodeTemplateRef", "loadMoreButtonTemplateRef", "loadMoreService", "size", "expandDisabledNodes", "isChecked", "isDisabled", "isExpanded", "isVisible", "isSelected", "children", "hasChildren"] }], directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.TextBoxPrefixTemplateDirective, selector: "[kendoTextBoxPrefixTemplate]" }], changeDetection: i0.ChangeDetectionStrategy.Default });
|
|
659
|
+
`, isInline: true, components: [{ type: i8.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "errorIcon", "clearButtonIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { type: i9.TreeViewGroupComponent, selector: "[kendoTreeViewGroup]", inputs: ["checkboxes", "expandIcons", "disabled", "selectable", "touchActions", "disableParentNodesOnly", "loadOnDemand", "trackBy", "nodes", "textField", "parentDataItem", "parentIndex", "nodeTemplateRef", "loadMoreButtonTemplateRef", "loadMoreService", "size", "expandDisabledNodes", "isChecked", "isDisabled", "isExpanded", "isVisible", "isSelected", "children", "hasChildren"] }], directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.TextBoxPrefixTemplateDirective, selector: "[kendoTextBoxPrefixTemplate]" }], changeDetection: i0.ChangeDetectionStrategy.Default });
|
|
650
660
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TreeViewComponent, decorators: [{
|
|
651
661
|
type: Component,
|
|
652
662
|
args: [{
|
|
@@ -684,6 +694,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
|
|
|
684
694
|
[hasChildren]="hasChildren"
|
|
685
695
|
[isChecked]="isChecked"
|
|
686
696
|
[isDisabled]="isDisabled"
|
|
697
|
+
[disableParentNodesOnly]="disableParentNodesOnly"
|
|
687
698
|
[isExpanded]="isExpanded"
|
|
688
699
|
[isSelected]="isSelected"
|
|
689
700
|
[isVisible]="isVisible"
|
|
@@ -798,4 +809,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
|
|
|
798
809
|
type: Input
|
|
799
810
|
}], size: [{
|
|
800
811
|
type: Input
|
|
812
|
+
}], disableParentNodesOnly: [{
|
|
813
|
+
type: Input
|
|
801
814
|
}] } });
|
|
@@ -25,7 +25,7 @@ const packageMetadata = {
|
|
|
25
25
|
name: '@progress/kendo-angular-treeview',
|
|
26
26
|
productName: 'Kendo UI for Angular',
|
|
27
27
|
productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
|
|
28
|
-
publishDate:
|
|
28
|
+
publishDate: 1655296333,
|
|
29
29
|
version: '',
|
|
30
30
|
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'
|
|
31
31
|
};
|
|
@@ -700,6 +700,9 @@ class NavigationService {
|
|
|
700
700
|
return nodeIndex(this.focusableItem) === index;
|
|
701
701
|
}
|
|
702
702
|
isDisabled(index) {
|
|
703
|
+
if (!index) {
|
|
704
|
+
return false;
|
|
705
|
+
}
|
|
703
706
|
return this.model.findNode(index).disabled;
|
|
704
707
|
}
|
|
705
708
|
registerItem(id, index, disabled, loadMoreButton = false, visible = true) {
|
|
@@ -712,6 +715,16 @@ class NavigationService {
|
|
|
712
715
|
}
|
|
713
716
|
this.model.registerItem(id, index, disabled, loadMoreButton, visible);
|
|
714
717
|
}
|
|
718
|
+
updateItem(index, disabled, visible = true) {
|
|
719
|
+
const itemAtIndex = this.model.findNode(index);
|
|
720
|
+
if (isPresent(itemAtIndex)) {
|
|
721
|
+
if (this.isActive(index)) {
|
|
722
|
+
this.deactivate();
|
|
723
|
+
}
|
|
724
|
+
}
|
|
725
|
+
itemAtIndex.disabled = disabled;
|
|
726
|
+
itemAtIndex.visible = visible;
|
|
727
|
+
}
|
|
715
728
|
unregisterItem(id, index) {
|
|
716
729
|
if (this.isActive(index)) {
|
|
717
730
|
this.activateParent(index);
|
|
@@ -1304,13 +1317,12 @@ class TreeViewItemDirective {
|
|
|
1304
1317
|
updateNodeAvailability() {
|
|
1305
1318
|
const service = this.navigationService;
|
|
1306
1319
|
if (this.isDisabled || !this.isVisible) {
|
|
1307
|
-
service.activateClosest(this.index); // activate before
|
|
1320
|
+
service.activateClosest(this.index); // activate before updating the item
|
|
1308
1321
|
}
|
|
1309
1322
|
else {
|
|
1310
1323
|
service.activateFocusable();
|
|
1311
1324
|
}
|
|
1312
|
-
service.
|
|
1313
|
-
service.registerItem(this.id, this.index, this.isDisabled, this.isButton, this.isVisible);
|
|
1325
|
+
service.updateItem(this.index, this.isDisabled, this.isVisible);
|
|
1314
1326
|
}
|
|
1315
1327
|
setAriaAttributes() {
|
|
1316
1328
|
this.setAttribute('aria-level', this.ib.level(this.index).toString());
|
|
@@ -1500,7 +1512,6 @@ class TreeViewGroupComponent {
|
|
|
1500
1512
|
this.initialNodesLoaded = false;
|
|
1501
1513
|
this.loadingMoreNodes = false;
|
|
1502
1514
|
this.isItemExpandable = (node, index) => this.expandDisabledNodes || !this.isItemDisabled(node, index);
|
|
1503
|
-
this.isItemDisabled = (node, index) => this.disabled || this.isDisabled(node, this.nodeIndex(index));
|
|
1504
1515
|
this._data = [];
|
|
1505
1516
|
this.singleRecordSubscriptions = new Subscription();
|
|
1506
1517
|
this.isChecked = () => 'none';
|
|
@@ -1618,6 +1629,12 @@ class TreeViewGroupComponent {
|
|
|
1618
1629
|
this.loadMoreLocalNodes();
|
|
1619
1630
|
}
|
|
1620
1631
|
}
|
|
1632
|
+
/**
|
|
1633
|
+
* @hidden
|
|
1634
|
+
*/
|
|
1635
|
+
isItemDisabled(node, index) {
|
|
1636
|
+
return (this.disabled && !this.disableParentNodesOnly) || this.isDisabled(node, this.nodeIndex(index));
|
|
1637
|
+
}
|
|
1621
1638
|
/**
|
|
1622
1639
|
* @hidden
|
|
1623
1640
|
*/
|
|
@@ -1714,7 +1731,7 @@ class TreeViewGroupComponent {
|
|
|
1714
1731
|
}
|
|
1715
1732
|
}
|
|
1716
1733
|
TreeViewGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TreeViewGroupComponent, deps: [{ token: ExpandStateService }, { token: LoadingNotificationService }, { token: IndexBuilderService }, { token: TreeViewLookupService }, { token: NavigationService }, { token: NodeChildrenService }, { token: DataChangeNotificationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1717
|
-
TreeViewGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TreeViewGroupComponent, selector: "[kendoTreeViewGroup]", inputs: { checkboxes: "checkboxes", expandIcons: "expandIcons", disabled: "disabled", selectable: "selectable", touchActions: "touchActions", loadOnDemand: "loadOnDemand", trackBy: "trackBy", nodes: "nodes", textField: "textField", parentDataItem: "parentDataItem", parentIndex: "parentIndex", nodeTemplateRef: "nodeTemplateRef", loadMoreButtonTemplateRef: "loadMoreButtonTemplateRef", loadMoreService: "loadMoreService", size: "size", expandDisabledNodes: "expandDisabledNodes", isChecked: "isChecked", isDisabled: "isDisabled", isExpanded: "isExpanded", isVisible: "isVisible", isSelected: "isSelected", children: "children", hasChildren: "hasChildren" }, host: { properties: { "class.k-treeview-group": "this.kGroupClass", "attr.role": "this.role" } }, usesOnChanges: true, ngImport: i0, template: `
|
|
1734
|
+
TreeViewGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TreeViewGroupComponent, selector: "[kendoTreeViewGroup]", inputs: { checkboxes: "checkboxes", expandIcons: "expandIcons", disabled: "disabled", selectable: "selectable", touchActions: "touchActions", disableParentNodesOnly: "disableParentNodesOnly", loadOnDemand: "loadOnDemand", trackBy: "trackBy", nodes: "nodes", textField: "textField", parentDataItem: "parentDataItem", parentIndex: "parentIndex", nodeTemplateRef: "nodeTemplateRef", loadMoreButtonTemplateRef: "loadMoreButtonTemplateRef", loadMoreService: "loadMoreService", size: "size", expandDisabledNodes: "expandDisabledNodes", isChecked: "isChecked", isDisabled: "isDisabled", isExpanded: "isExpanded", isVisible: "isVisible", isSelected: "isSelected", children: "children", hasChildren: "hasChildren" }, host: { properties: { "class.k-treeview-group": "this.kGroupClass", "attr.role": "this.role" } }, usesOnChanges: true, ngImport: i0, template: `
|
|
1718
1735
|
<li
|
|
1719
1736
|
*ngFor="let node of data; let index = index; trackBy: trackBy"
|
|
1720
1737
|
class="k-treeview-item"
|
|
@@ -1817,6 +1834,7 @@ TreeViewGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
|
|
|
1817
1834
|
[loadMoreService]="loadMoreService"
|
|
1818
1835
|
[@toggle]="true"
|
|
1819
1836
|
[trackBy]="trackBy"
|
|
1837
|
+
[disableParentNodesOnly]="disableParentNodesOnly"
|
|
1820
1838
|
>
|
|
1821
1839
|
</ul>
|
|
1822
1840
|
</li>
|
|
@@ -1862,7 +1880,7 @@ TreeViewGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
|
|
|
1862
1880
|
</span>
|
|
1863
1881
|
</div>
|
|
1864
1882
|
</li>
|
|
1865
|
-
`, isInline: true, components: [{ type: CheckBoxComponent, selector: "kendo-checkbox", inputs: ["id", "isChecked", "node", "index", "labelText", "tabindex", "size"], outputs: ["checkStateChange"] }, { type: TreeViewGroupComponent, selector: "[kendoTreeViewGroup]", inputs: ["checkboxes", "expandIcons", "disabled", "selectable", "touchActions", "loadOnDemand", "trackBy", "nodes", "textField", "parentDataItem", "parentIndex", "nodeTemplateRef", "loadMoreButtonTemplateRef", "loadMoreService", "size", "expandDisabledNodes", "isChecked", "isDisabled", "isExpanded", "isVisible", "isSelected", "children", "hasChildren"] }], directives: [{ type: i9.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: TreeViewItemDirective, selector: "[kendoTreeViewItem]", inputs: ["dataItem", "index", "parentDataItem", "parentIndex", "role", "loadOnDemand", "checkable", "selectable", "expandable", "isChecked", "isDisabled", "isVisible", "isExpanded", "isSelected"] }, { type: i9.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: LoadingIndicatorDirective, selector: "[kendoTreeViewLoading]", inputs: ["kendoTreeViewLoading"] }, { type: TreeViewItemContentDirective, selector: "[kendoTreeViewItemContent]", inputs: ["dataItem", "index", "initialSelection", "isSelected"] }, { type: i9.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i9.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i9.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i9.NgSwitchDefault, selector: "[ngSwitchDefault]" }], animations: [
|
|
1883
|
+
`, isInline: true, components: [{ type: CheckBoxComponent, selector: "kendo-checkbox", inputs: ["id", "isChecked", "node", "index", "labelText", "tabindex", "size"], outputs: ["checkStateChange"] }, { type: TreeViewGroupComponent, selector: "[kendoTreeViewGroup]", inputs: ["checkboxes", "expandIcons", "disabled", "selectable", "touchActions", "disableParentNodesOnly", "loadOnDemand", "trackBy", "nodes", "textField", "parentDataItem", "parentIndex", "nodeTemplateRef", "loadMoreButtonTemplateRef", "loadMoreService", "size", "expandDisabledNodes", "isChecked", "isDisabled", "isExpanded", "isVisible", "isSelected", "children", "hasChildren"] }], directives: [{ type: i9.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: TreeViewItemDirective, selector: "[kendoTreeViewItem]", inputs: ["dataItem", "index", "parentDataItem", "parentIndex", "role", "loadOnDemand", "checkable", "selectable", "expandable", "isChecked", "isDisabled", "isVisible", "isExpanded", "isSelected"] }, { type: i9.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: LoadingIndicatorDirective, selector: "[kendoTreeViewLoading]", inputs: ["kendoTreeViewLoading"] }, { type: TreeViewItemContentDirective, selector: "[kendoTreeViewItemContent]", inputs: ["dataItem", "index", "initialSelection", "isSelected"] }, { type: i9.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i9.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i9.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i9.NgSwitchDefault, selector: "[ngSwitchDefault]" }], animations: [
|
|
1866
1884
|
trigger('toggle', [
|
|
1867
1885
|
transition('void => *', [
|
|
1868
1886
|
style({ height: 0 }),
|
|
@@ -1994,6 +2012,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
|
|
|
1994
2012
|
[loadMoreService]="loadMoreService"
|
|
1995
2013
|
[@toggle]="true"
|
|
1996
2014
|
[trackBy]="trackBy"
|
|
2015
|
+
[disableParentNodesOnly]="disableParentNodesOnly"
|
|
1997
2016
|
>
|
|
1998
2017
|
</ul>
|
|
1999
2018
|
</li>
|
|
@@ -2057,6 +2076,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
|
|
|
2057
2076
|
type: Input
|
|
2058
2077
|
}], touchActions: [{
|
|
2059
2078
|
type: Input
|
|
2079
|
+
}], disableParentNodesOnly: [{
|
|
2080
|
+
type: Input
|
|
2060
2081
|
}], loadOnDemand: [{
|
|
2061
2082
|
type: Input
|
|
2062
2083
|
}], trackBy: [{
|
|
@@ -2293,6 +2314,11 @@ class TreeViewComponent {
|
|
|
2293
2314
|
* Sets an initial value of the built-in input element used for filtering.
|
|
2294
2315
|
*/
|
|
2295
2316
|
this.filter = '';
|
|
2317
|
+
/**
|
|
2318
|
+
* Indicates whether only parent nodes should be disabled or their child nodes as well
|
|
2319
|
+
* @default false
|
|
2320
|
+
*/
|
|
2321
|
+
this.disableParentNodesOnly = false;
|
|
2296
2322
|
this.checkboxes = false;
|
|
2297
2323
|
this.expandIcons = false;
|
|
2298
2324
|
this.selectable = false;
|
|
@@ -2579,7 +2605,11 @@ class TreeViewComponent {
|
|
|
2579
2605
|
focusItem = closestNode(e.target);
|
|
2580
2606
|
}
|
|
2581
2607
|
if (focusItem) {
|
|
2582
|
-
|
|
2608
|
+
const nodeIndex = nodeId(e.target);
|
|
2609
|
+
if (this.navigationService.isDisabled(nodeIndex)) {
|
|
2610
|
+
return;
|
|
2611
|
+
}
|
|
2612
|
+
this.navigationService.activateIndex(nodeIndex);
|
|
2583
2613
|
if (!this.isActive && hasObservers(this.onFocus)) {
|
|
2584
2614
|
this.ngZone.run(() => {
|
|
2585
2615
|
this.onFocus.emit();
|
|
@@ -2665,7 +2695,7 @@ class TreeViewComponent {
|
|
|
2665
2695
|
}
|
|
2666
2696
|
}
|
|
2667
2697
|
TreeViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TreeViewComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: ExpandStateService }, { token: NavigationService }, { token: NodeChildrenService }, { token: SelectionService }, { token: TreeViewLookupService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: DataChangeNotificationService }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
2668
|
-
TreeViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TreeViewComponent, selector: "kendo-treeview", inputs: { filterInputPlaceholder: "filterInputPlaceholder", expandDisabledNodes: "expandDisabledNodes", animate: "animate", nodeTemplateRef: ["nodeTemplate", "nodeTemplateRef"], loadMoreButtonTemplateRef: ["loadMoreButtonTemplate", "loadMoreButtonTemplateRef"], trackBy: "trackBy", nodes: "nodes", textField: "textField", hasChildren: "hasChildren", isChecked: "isChecked", isDisabled: "isDisabled", isExpanded: "isExpanded", isSelected: "isSelected", isVisible: "isVisible", navigable: "navigable", children: "children", loadOnDemand: "loadOnDemand", filterable: "filterable", filter: "filter", size: "size" }, outputs: { childrenLoaded: "childrenLoaded", onBlur: "blur", onFocus: "focus", expand: "expand", collapse: "collapse", nodeDragStart: "nodeDragStart", nodeDrag: "nodeDrag", filterStateChange: "filterStateChange", nodeDrop: "nodeDrop", nodeDragEnd: "nodeDragEnd", addItem: "addItem", removeItem: "removeItem", checkedChange: "checkedChange", selectionChange: "selectionChange", filterChange: "filterChange", nodeClick: "nodeClick", nodeDblClick: "nodeDblClick" }, host: { properties: { "class.k-treeview": "this.classNames", "attr.role": "this.role", "attr.dir": "this.direction", "@.disabled": "this.animate" } }, providers: providers, queries: [{ propertyName: "nodeTemplateQuery", first: true, predicate: NodeTemplateDirective, descendants: true }, { propertyName: "loadMoreButtonTemplateQuery", first: true, predicate: LoadMoreButtonTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "assetsContainer", first: true, predicate: ["assetsContainer"], descendants: true, read: ViewContainerRef, static: true }], exportAs: ["kendoTreeView"], usesOnChanges: true, ngImport: i0, template: `
|
|
2698
|
+
TreeViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TreeViewComponent, selector: "kendo-treeview", inputs: { filterInputPlaceholder: "filterInputPlaceholder", expandDisabledNodes: "expandDisabledNodes", animate: "animate", nodeTemplateRef: ["nodeTemplate", "nodeTemplateRef"], loadMoreButtonTemplateRef: ["loadMoreButtonTemplate", "loadMoreButtonTemplateRef"], trackBy: "trackBy", nodes: "nodes", textField: "textField", hasChildren: "hasChildren", isChecked: "isChecked", isDisabled: "isDisabled", isExpanded: "isExpanded", isSelected: "isSelected", isVisible: "isVisible", navigable: "navigable", children: "children", loadOnDemand: "loadOnDemand", filterable: "filterable", filter: "filter", size: "size", disableParentNodesOnly: "disableParentNodesOnly" }, outputs: { childrenLoaded: "childrenLoaded", onBlur: "blur", onFocus: "focus", expand: "expand", collapse: "collapse", nodeDragStart: "nodeDragStart", nodeDrag: "nodeDrag", filterStateChange: "filterStateChange", nodeDrop: "nodeDrop", nodeDragEnd: "nodeDragEnd", addItem: "addItem", removeItem: "removeItem", checkedChange: "checkedChange", selectionChange: "selectionChange", filterChange: "filterChange", nodeClick: "nodeClick", nodeDblClick: "nodeDblClick" }, host: { properties: { "class.k-treeview": "this.classNames", "attr.role": "this.role", "attr.dir": "this.direction", "@.disabled": "this.animate" } }, providers: providers, queries: [{ propertyName: "nodeTemplateQuery", first: true, predicate: NodeTemplateDirective, descendants: true }, { propertyName: "loadMoreButtonTemplateQuery", first: true, predicate: LoadMoreButtonTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "assetsContainer", first: true, predicate: ["assetsContainer"], descendants: true, read: ViewContainerRef, static: true }], exportAs: ["kendoTreeView"], usesOnChanges: true, ngImport: i0, template: `
|
|
2669
2699
|
<span
|
|
2670
2700
|
class="k-treeview-filter"
|
|
2671
2701
|
*ngIf="filterable"
|
|
@@ -2695,6 +2725,7 @@ TreeViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
|
|
|
2695
2725
|
[hasChildren]="hasChildren"
|
|
2696
2726
|
[isChecked]="isChecked"
|
|
2697
2727
|
[isDisabled]="isDisabled"
|
|
2728
|
+
[disableParentNodesOnly]="disableParentNodesOnly"
|
|
2698
2729
|
[isExpanded]="isExpanded"
|
|
2699
2730
|
[isSelected]="isSelected"
|
|
2700
2731
|
[isVisible]="isVisible"
|
|
@@ -2708,7 +2739,7 @@ TreeViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
|
|
|
2708
2739
|
>
|
|
2709
2740
|
</ul>
|
|
2710
2741
|
<ng-container #assetsContainer></ng-container>
|
|
2711
|
-
`, isInline: true, components: [{ type: i8.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "errorIcon", "clearButtonIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { type: TreeViewGroupComponent, selector: "[kendoTreeViewGroup]", inputs: ["checkboxes", "expandIcons", "disabled", "selectable", "touchActions", "loadOnDemand", "trackBy", "nodes", "textField", "parentDataItem", "parentIndex", "nodeTemplateRef", "loadMoreButtonTemplateRef", "loadMoreService", "size", "expandDisabledNodes", "isChecked", "isDisabled", "isExpanded", "isVisible", "isSelected", "children", "hasChildren"] }], directives: [{ type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.TextBoxPrefixTemplateDirective, selector: "[kendoTextBoxPrefixTemplate]" }], changeDetection: i0.ChangeDetectionStrategy.Default });
|
|
2742
|
+
`, isInline: true, components: [{ type: i8.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "errorIcon", "clearButtonIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { type: TreeViewGroupComponent, selector: "[kendoTreeViewGroup]", inputs: ["checkboxes", "expandIcons", "disabled", "selectable", "touchActions", "disableParentNodesOnly", "loadOnDemand", "trackBy", "nodes", "textField", "parentDataItem", "parentIndex", "nodeTemplateRef", "loadMoreButtonTemplateRef", "loadMoreService", "size", "expandDisabledNodes", "isChecked", "isDisabled", "isExpanded", "isVisible", "isSelected", "children", "hasChildren"] }], directives: [{ type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.TextBoxPrefixTemplateDirective, selector: "[kendoTextBoxPrefixTemplate]" }], changeDetection: i0.ChangeDetectionStrategy.Default });
|
|
2712
2743
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TreeViewComponent, decorators: [{
|
|
2713
2744
|
type: Component,
|
|
2714
2745
|
args: [{
|
|
@@ -2746,6 +2777,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
|
|
|
2746
2777
|
[hasChildren]="hasChildren"
|
|
2747
2778
|
[isChecked]="isChecked"
|
|
2748
2779
|
[isDisabled]="isDisabled"
|
|
2780
|
+
[disableParentNodesOnly]="disableParentNodesOnly"
|
|
2749
2781
|
[isExpanded]="isExpanded"
|
|
2750
2782
|
[isSelected]="isSelected"
|
|
2751
2783
|
[isVisible]="isVisible"
|
|
@@ -2860,6 +2892,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
|
|
|
2860
2892
|
type: Input
|
|
2861
2893
|
}], size: [{
|
|
2862
2894
|
type: Input
|
|
2895
|
+
}], disableParentNodesOnly: [{
|
|
2896
|
+
type: Input
|
|
2863
2897
|
}] } });
|
|
2864
2898
|
|
|
2865
2899
|
const indexChecked = (keys, index) => keys.filter(k => k === index).length > 0;
|
|
@@ -3022,10 +3056,12 @@ class CheckDirective {
|
|
|
3022
3056
|
}
|
|
3023
3057
|
const pendingCheck = [currentKey];
|
|
3024
3058
|
if (this.options.checkChildren) {
|
|
3025
|
-
const descendants = fetchLoadedDescendants(node, ({ item }) => this.treeView.
|
|
3026
|
-
|
|
3027
|
-
.
|
|
3028
|
-
|
|
3059
|
+
const descendants = fetchLoadedDescendants(node, ({ item }) => (this.treeView.disableParentNodesOnly || this.options.checkDisabledChildren ?
|
|
3060
|
+
this.treeView.isVisible(item.dataItem, item.index) :
|
|
3061
|
+
this.treeView.isVisible(item.dataItem, item.index) &&
|
|
3062
|
+
!this.treeView.isDisabled(item.dataItem, item.index)));
|
|
3063
|
+
pendingCheck.push(...descendants.filter((item) => this.options.checkDisabledChildren || !this.treeView.isDisabled(item.item.dataItem, item.item.index))
|
|
3064
|
+
.map(({ item }) => this.itemKey(item)));
|
|
3029
3065
|
}
|
|
3030
3066
|
const shouldCheck = !this.state.has(currentKey);
|
|
3031
3067
|
pendingCheck.forEach(key => {
|
|
@@ -3044,8 +3080,9 @@ class CheckDirective {
|
|
|
3044
3080
|
let currentParent = parent;
|
|
3045
3081
|
while (currentParent) {
|
|
3046
3082
|
const parentKey = this.itemKey(currentParent.item);
|
|
3083
|
+
const isDisabled = this.treeView.isDisabled(currentParent.item.dataItem, currentParent.item.index);
|
|
3047
3084
|
const allChildrenSelected = currentParent.children.every(item => this.state.has(this.itemKey(item)));
|
|
3048
|
-
if (allChildrenSelected) {
|
|
3085
|
+
if ((!isDisabled || this.options.checkDisabledChildren) && allChildrenSelected) {
|
|
3049
3086
|
this.state.add(parentKey);
|
|
3050
3087
|
}
|
|
3051
3088
|
else {
|
|
@@ -3054,6 +3091,12 @@ class CheckDirective {
|
|
|
3054
3091
|
currentParent = currentParent.parent;
|
|
3055
3092
|
}
|
|
3056
3093
|
}
|
|
3094
|
+
allChildrenSelected(children) {
|
|
3095
|
+
return children.every(item => {
|
|
3096
|
+
const childrenSel = this.allChildrenSelected(item.children);
|
|
3097
|
+
return this.state.has(this.itemKey(item.item)) && childrenSel;
|
|
3098
|
+
});
|
|
3099
|
+
}
|
|
3057
3100
|
notify() {
|
|
3058
3101
|
this.lastChange = Array.from(this.state);
|
|
3059
3102
|
this.checkedKeysChange.emit(this.lastChange);
|
|
@@ -3063,6 +3106,7 @@ class CheckDirective {
|
|
|
3063
3106
|
return;
|
|
3064
3107
|
}
|
|
3065
3108
|
const initiallyCheckedItemsCount = this.state.size;
|
|
3109
|
+
const disabledItems = new Set();
|
|
3066
3110
|
lookups.forEach(lookup => {
|
|
3067
3111
|
const itemKey = this.itemKey(lookup.item);
|
|
3068
3112
|
if (!this.state.has(itemKey)) {
|
|
@@ -3070,12 +3114,19 @@ class CheckDirective {
|
|
|
3070
3114
|
}
|
|
3071
3115
|
lookup.children.forEach(item => {
|
|
3072
3116
|
// ensure both the parent item and each child node is enabled
|
|
3073
|
-
if (!this.treeView.isDisabled(lookup.item.dataItem, lookup.item.index) &&
|
|
3074
|
-
!this.treeView.isDisabled(item.dataItem, item.index))
|
|
3117
|
+
if ((!this.treeView.isDisabled(lookup.item.dataItem, lookup.item.index) &&
|
|
3118
|
+
!this.treeView.isDisabled(item.dataItem, item.index)) ||
|
|
3119
|
+
this.treeView.disableParentNodesOnly || this.options.checkDisabledChildren) {
|
|
3075
3120
|
this.state.add(this.itemKey(item));
|
|
3076
3121
|
}
|
|
3122
|
+
if (this.treeView.disableParentNodesOnly &&
|
|
3123
|
+
!this.options.checkDisabledChildren &&
|
|
3124
|
+
this.treeView.isDisabled(item.dataItem, item.index)) {
|
|
3125
|
+
disabledItems.add(this.itemKey(item));
|
|
3126
|
+
}
|
|
3077
3127
|
});
|
|
3078
3128
|
});
|
|
3129
|
+
disabledItems.forEach(item => this.state.delete(item));
|
|
3079
3130
|
const hasNewlyCheckedItems = initiallyCheckedItemsCount !== this.state.size;
|
|
3080
3131
|
if (hasNewlyCheckedItems) {
|
|
3081
3132
|
this.zone.run(() => this.notify());
|
|
@@ -46,6 +46,7 @@ export declare class NavigationService {
|
|
|
46
46
|
isFocusable(index: string): boolean;
|
|
47
47
|
isDisabled(index: string): boolean;
|
|
48
48
|
registerItem(id: number, index: string, disabled: boolean, loadMoreButton?: boolean, visible?: boolean): void;
|
|
49
|
+
updateItem(index: string, disabled: boolean, visible?: boolean): void;
|
|
49
50
|
unregisterItem(id: number, index: string): void;
|
|
50
51
|
move(e: any): void;
|
|
51
52
|
private expand;
|
package/package.json
CHANGED
|
@@ -34,6 +34,7 @@ export declare class TreeViewGroupComponent implements OnChanges, OnInit, OnDest
|
|
|
34
34
|
disabled: boolean;
|
|
35
35
|
selectable: boolean;
|
|
36
36
|
touchActions: boolean;
|
|
37
|
+
disableParentNodesOnly: boolean;
|
|
37
38
|
loadOnDemand: boolean;
|
|
38
39
|
trackBy: TrackByFunction<object>;
|
|
39
40
|
nodes: (node: any, index: string) => Observable<any[]>;
|
|
@@ -48,7 +49,6 @@ export declare class TreeViewGroupComponent implements OnChanges, OnInit, OnDest
|
|
|
48
49
|
initialNodesLoaded: boolean;
|
|
49
50
|
loadingMoreNodes: boolean;
|
|
50
51
|
isItemExpandable: (node: any, index: any) => boolean;
|
|
51
|
-
isItemDisabled: (node: any, index: any) => boolean;
|
|
52
52
|
get moreNodesAvailable(): boolean;
|
|
53
53
|
get pageSize(): number;
|
|
54
54
|
set pageSize(pageSize: number);
|
|
@@ -82,6 +82,10 @@ export declare class TreeViewGroupComponent implements OnChanges, OnInit, OnDest
|
|
|
82
82
|
fetchChildren(node: any, index: string): Observable<any>;
|
|
83
83
|
get nextFields(): string[];
|
|
84
84
|
loadMoreNodes(): void;
|
|
85
|
+
/**
|
|
86
|
+
* @hidden
|
|
87
|
+
*/
|
|
88
|
+
isItemDisabled(node: any, index: any): boolean;
|
|
85
89
|
/**
|
|
86
90
|
* @hidden
|
|
87
91
|
*/
|
|
@@ -95,5 +99,5 @@ export declare class TreeViewGroupComponent implements OnChanges, OnInit, OnDest
|
|
|
95
99
|
private reselectItemAt;
|
|
96
100
|
private registerLoadedNodes;
|
|
97
101
|
static ɵfac: i0.ɵɵFactoryDeclaration<TreeViewGroupComponent, never>;
|
|
98
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<TreeViewGroupComponent, "[kendoTreeViewGroup]", never, { "checkboxes": "checkboxes"; "expandIcons": "expandIcons"; "disabled": "disabled"; "selectable": "selectable"; "touchActions": "touchActions"; "loadOnDemand": "loadOnDemand"; "trackBy": "trackBy"; "nodes": "nodes"; "textField": "textField"; "parentDataItem": "parentDataItem"; "parentIndex": "parentIndex"; "nodeTemplateRef": "nodeTemplateRef"; "loadMoreButtonTemplateRef": "loadMoreButtonTemplateRef"; "loadMoreService": "loadMoreService"; "size": "size"; "expandDisabledNodes": "expandDisabledNodes"; "isChecked": "isChecked"; "isDisabled": "isDisabled"; "isExpanded": "isExpanded"; "isVisible": "isVisible"; "isSelected": "isSelected"; "children": "children"; "hasChildren": "hasChildren"; }, {}, never, never>;
|
|
102
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<TreeViewGroupComponent, "[kendoTreeViewGroup]", never, { "checkboxes": "checkboxes"; "expandIcons": "expandIcons"; "disabled": "disabled"; "selectable": "selectable"; "touchActions": "touchActions"; "disableParentNodesOnly": "disableParentNodesOnly"; "loadOnDemand": "loadOnDemand"; "trackBy": "trackBy"; "nodes": "nodes"; "textField": "textField"; "parentDataItem": "parentDataItem"; "parentIndex": "parentIndex"; "nodeTemplateRef": "nodeTemplateRef"; "loadMoreButtonTemplateRef": "loadMoreButtonTemplateRef"; "loadMoreService": "loadMoreService"; "size": "size"; "expandDisabledNodes": "expandDisabledNodes"; "isChecked": "isChecked"; "isDisabled": "isDisabled"; "isExpanded": "isExpanded"; "isVisible": "isVisible"; "isSelected": "isSelected"; "children": "children"; "hasChildren": "hasChildren"; }, {}, never, never>;
|
|
99
103
|
}
|