@progress/kendo-angular-treeview 17.0.0-develop.4 → 17.0.0-develop.41

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.
Files changed (104) hide show
  1. package/README.md +30 -17
  2. package/check-mode.d.ts +1 -1
  3. package/check.directive.d.ts +1 -1
  4. package/checkbox/checked-state.d.ts +1 -1
  5. package/disable.directive.d.ts +1 -1
  6. package/drag-and-drop/drag-and-drop-editing.directive.d.ts +1 -1
  7. package/drag-and-drop/drag-and-drop.directive.d.ts +1 -1
  8. package/{esm2020 → esm2022}/check.directive.mjs +48 -27
  9. package/{esm2020 → esm2022}/data-bound-component.mjs +3 -3
  10. package/{esm2020 → esm2022}/data-change-notification.service.mjs +1 -3
  11. package/{esm2020 → esm2022}/disable.directive.mjs +18 -12
  12. package/{esm2020 → esm2022}/drag-and-drop/drag-and-drop-editing.directive.mjs +10 -9
  13. package/{esm2020 → esm2022}/drag-and-drop/drag-and-drop.directive.mjs +73 -52
  14. package/{esm2020 → esm2022}/drag-and-drop/drag-clue/drag-clue-template.directive.mjs +4 -3
  15. package/{esm2020 → esm2022}/drag-and-drop/drag-clue/drag-clue.component.mjs +30 -9
  16. package/{esm2020 → esm2022}/drag-and-drop/drag-clue/drag-clue.service.mjs +6 -3
  17. package/{esm2020 → esm2022}/drag-and-drop/drop-hint/drop-hint-template.directive.mjs +4 -3
  18. package/{esm2020 → esm2022}/drag-and-drop/drop-hint/drop-hint.component.mjs +24 -7
  19. package/{esm2020 → esm2022}/drag-and-drop/drop-hint/drop-hint.service.mjs +4 -3
  20. package/{esm2020 → esm2022}/drag-and-drop/editing-services/drag-and-drop-asset.service.mjs +4 -3
  21. package/{esm2020 → esm2022}/drag-and-drop/editing-services/flat-editing.service.mjs +2 -0
  22. package/{esm2020 → esm2022}/drag-and-drop/editing-services/hierarchy-editing.service.mjs +2 -0
  23. package/{esm2020 → esm2022}/drag-and-drop/models/preventable-event.mjs +1 -3
  24. package/{esm2020 → esm2022}/drag-and-drop/models/treeitem-drag-event.mjs +12 -0
  25. package/{esm2020 → esm2022}/drag-and-drop/models/treeitem-drag-start-event.mjs +8 -0
  26. package/{esm2020 → esm2022}/drag-and-drop/models/treeitem-drop-event.mjs +28 -4
  27. package/{esm2020 → esm2022}/expand-state.service.mjs +4 -6
  28. package/{esm2020 → esm2022}/expand.directive.mjs +67 -54
  29. package/{esm2020 → esm2022}/expandable-component.mjs +3 -3
  30. package/{esm2020 → esm2022}/filtering-base.mjs +13 -8
  31. package/{esm2020 → esm2022}/flat-binding.directive.mjs +26 -16
  32. package/{esm2020 → esm2022}/hierarchy-binding.directive.mjs +19 -15
  33. package/{esm2020 → esm2022}/index-builder.service.mjs +4 -6
  34. package/{esm2020 → esm2022}/load-more/load-more-button-template.directive.mjs +4 -3
  35. package/{esm2020 → esm2022}/load-more/load-more.directive.mjs +38 -20
  36. package/{esm2020 → esm2022}/loading-indicator.directive.mjs +14 -9
  37. package/{esm2020 → esm2022}/loading-notification.service.mjs +4 -6
  38. package/{esm2020 → esm2022}/localization/custom-messages.component.mjs +9 -8
  39. package/{esm2020 → esm2022}/localization/localized-messages.directive.mjs +9 -8
  40. package/{esm2020 → esm2022}/localization/messages.mjs +7 -3
  41. package/{esm2020 → esm2022}/navigation/navigation-model.mjs +2 -4
  42. package/{esm2020 → esm2022}/navigation/navigation.service.mjs +38 -36
  43. package/{esm2020 → esm2022}/node-children.service.mjs +4 -6
  44. package/{esm2020 → esm2022}/node-template.directive.mjs +4 -3
  45. package/{esm2020 → esm2022}/package-metadata.mjs +2 -2
  46. package/{esm2020 → esm2022}/selection/select.directive.mjs +45 -25
  47. package/{esm2020 → esm2022}/selection/selection.service.mjs +5 -6
  48. package/{esm2020 → esm2022}/treeview-group.component.mjs +86 -56
  49. package/{esm2020 → esm2022}/treeview-item-content.directive.mjs +12 -6
  50. package/{esm2020 → esm2022}/treeview-item.directive.mjs +37 -21
  51. package/{esm2020 → esm2022}/treeview-lookup.service.mjs +4 -6
  52. package/{esm2020 → esm2022}/treeview.component.mjs +253 -194
  53. package/{esm2020 → esm2022}/treeview.module.mjs +12 -12
  54. package/expand.directive.d.ts +1 -1
  55. package/{fesm2020 → fesm2022}/progress-kendo-angular-treeview.mjs +1015 -694
  56. package/filtering-base.d.ts +1 -1
  57. package/flat-binding.directive.d.ts +1 -1
  58. package/hierarchy-binding.directive.d.ts +1 -1
  59. package/load-more/load-more.directive.d.ts +1 -1
  60. package/loading-indicator.directive.d.ts +1 -1
  61. package/localization/messages.d.ts +1 -1
  62. package/package.json +15 -21
  63. package/schematics/ngAdd/index.js +4 -4
  64. package/selection/select.directive.d.ts +1 -1
  65. package/selection/selection-mode.d.ts +1 -1
  66. package/size.d.ts +1 -1
  67. package/treeview-filter-settings.d.ts +1 -1
  68. package/treeview-group.component.d.ts +1 -1
  69. package/treeview-item-content.directive.d.ts +1 -1
  70. package/treeview-item.directive.d.ts +1 -1
  71. package/treeview.component.d.ts +1 -1
  72. package/fesm2015/progress-kendo-angular-treeview.mjs +0 -5545
  73. /package/{esm2020 → esm2022}/check-mode.mjs +0 -0
  74. /package/{esm2020 → esm2022}/checkable-settings.mjs +0 -0
  75. /package/{esm2020 → esm2022}/checkbox/checked-state.mjs +0 -0
  76. /package/{esm2020 → esm2022}/default-callbacks.mjs +0 -0
  77. /package/{esm2020 → esm2022}/directives.mjs +0 -0
  78. /package/{esm2020 → esm2022}/drag-and-drop/drag-and-drop-utils.mjs +0 -0
  79. /package/{esm2020 → esm2022}/drag-and-drop/models/drop-action.mjs +0 -0
  80. /package/{esm2020 → esm2022}/drag-and-drop/models/drop-position.mjs +0 -0
  81. /package/{esm2020 → esm2022}/drag-and-drop/models/editing-service.mjs +0 -0
  82. /package/{esm2020 → esm2022}/drag-and-drop/models/scroll-direction.mjs +0 -0
  83. /package/{esm2020 → esm2022}/drag-and-drop/models/scroll-settings.mjs +0 -0
  84. /package/{esm2020 → esm2022}/drag-and-drop/models/tree-item-filter-state.mjs +0 -0
  85. /package/{esm2020 → esm2022}/drag-and-drop/models/treeitem-add-remove-args.mjs +0 -0
  86. /package/{esm2020 → esm2022}/drag-and-drop/models.mjs +0 -0
  87. /package/{esm2020 → esm2022}/filter-expand-settings.interface.mjs +0 -0
  88. /package/{esm2020 → esm2022}/filter-state.interface.mjs +0 -0
  89. /package/{esm2020 → esm2022}/funcs.mjs +0 -0
  90. /package/{esm2020 → esm2022}/index.mjs +0 -0
  91. /package/{esm2020 → esm2022}/load-more/load-more-request-args.mjs +0 -0
  92. /package/{esm2020 → esm2022}/load-more/load-more-utils.mjs +0 -0
  93. /package/{esm2020 → esm2022}/load-more/load-more.service.mjs +0 -0
  94. /package/{esm2020 → esm2022}/navigation/navigation-item.interface.mjs +0 -0
  95. /package/{esm2020 → esm2022}/navigation/navigation-state.interface.mjs +0 -0
  96. /package/{esm2020 → esm2022}/node-click-event.interface.mjs +0 -0
  97. /package/{esm2020 → esm2022}/progress-kendo-angular-treeview.mjs +0 -0
  98. /package/{esm2020 → esm2022}/selection/selectable-settings.mjs +0 -0
  99. /package/{esm2020 → esm2022}/selection/selection-mode.mjs +0 -0
  100. /package/{esm2020 → esm2022}/size.mjs +0 -0
  101. /package/{esm2020 → esm2022}/treeitem-lookup.interface.mjs +0 -0
  102. /package/{esm2020 → esm2022}/treeitem.interface.mjs +0 -0
  103. /package/{esm2020 → esm2022}/treeview-filter-settings.mjs +0 -0
  104. /package/{esm2020 → esm2022}/utils.mjs +0 -0
@@ -66,200 +66,43 @@ const providers = [
66
66
  *
67
67
  */
68
68
  export class TreeViewComponent {
69
- constructor(element, changeDetectorRef, expandService, navigationService, nodeChildrenService, selectionService, treeViewLookupService, ngZone, renderer, dataChangeNotification, localization) {
70
- this.element = element;
71
- this.changeDetectorRef = changeDetectorRef;
72
- this.expandService = expandService;
73
- this.navigationService = navigationService;
74
- this.nodeChildrenService = nodeChildrenService;
75
- this.selectionService = selectionService;
76
- this.treeViewLookupService = treeViewLookupService;
77
- this.ngZone = ngZone;
78
- this.renderer = renderer;
79
- this.dataChangeNotification = dataChangeNotification;
80
- this.localization = localization;
81
- /**
82
- * @hidden
83
- */
84
- this.searchIcon = searchIcon;
85
- this.classNames = true;
86
- /**
87
- * The hint which is displayed when the component is empty.
88
- */
89
- this.filterInputPlaceholder = "";
90
- /** @hidden */
91
- this.fetchNodes = () => this.data;
92
- /**
93
- * Fires when the children of the expanded node are loaded.
94
- */
95
- this.childrenLoaded = new EventEmitter();
96
- /**
97
- * Fires when the user blurs the component.
98
- */
99
- this.onBlur = new EventEmitter();
100
- /**
101
- * Fires when the user focuses the component.
102
- */
103
- this.onFocus = new EventEmitter();
104
- /**
105
- * Fires when the user expands a TreeView node.
106
- */
107
- this.expand = new EventEmitter();
108
- /**
109
- * Fires when the user collapses a TreeView node.
110
- */
111
- this.collapse = new EventEmitter();
112
- /**
113
- * Fires just before the dragging of the node starts ([see example]({% slug draganddrop_treeview %}#toc-setup)). This event is preventable.
114
- * If you prevent the event default, no drag hint will be created and the subsequent drag-related events will not be fired.
115
- */
116
- this.nodeDragStart = new EventEmitter();
117
- /**
118
- * Fires when an item is being dragged ([see example]({% slug draganddrop_treeview %}#toc-setup)).
119
- */
120
- this.nodeDrag = new EventEmitter();
121
- /**
122
- * Emits when the built-in filtering mechanism in the data-binding directives updates the node's visibility.
123
- * Used for the built-in auto-expand functionalities of the component and available for custom implementations.
124
- */
125
- this.filterStateChange = new EventEmitter();
126
- /**
127
- * Fires on the target TreeView when a dragged item is dropped ([see example]({% slug draganddrop_treeview %}#toc-setup)).
128
- * This event is preventable. If you prevent the event default (`event.preventDefualt()`) or invalidate its state (`event.setValid(false)`),
129
- * the `addItem` and `removeItem` events will not be triggered.
130
- *
131
- * Both operations cancel the default drop operation, but the indication to the user is different. `event.setValid(false)` indicates that the operation was
132
- * unsuccessful by animating the drag clue to its original position. `event.preventDefault()` simply removes the clue, as if it has been dropped successfully.
133
- * As a general rule, use `preventDefault` to manually handle the add and remove operations, and `setValid(false)` to indicate the operation was unsuccessful.
134
- */
135
- this.nodeDrop = new EventEmitter();
136
- /**
137
- * Fires on the source TreeView after the dragged item has been dropped ([see example]({% slug draganddrop_treeview %}#toc-setup)).
138
- */
139
- this.nodeDragEnd = new EventEmitter();
140
- /**
141
- * Fires after a dragged item is dropped ([see example]({% slug draganddrop_treeview %}#toc-setup)).
142
- * Called on the TreeView where the item is dropped.
143
- */
144
- this.addItem = new EventEmitter();
145
- /**
146
- * Fires after a dragged item is dropped ([see example]({% slug draganddrop_treeview %}#toc-setup)).
147
- * Called on the TreeView from where the item is dragged.
148
- */
149
- this.removeItem = new EventEmitter();
150
- /**
151
- * Fires when the user selects a TreeView node checkbox
152
- * ([see example]({% slug checkboxes_treeview %}#toc-modifying-the-checked-state)).
153
- */
154
- this.checkedChange = new EventEmitter();
155
- /**
156
- * Fires when the user selects a TreeView node
157
- * ([see example]({% slug selection_treeview %}#toc-modifying-the-selection)).
158
- */
159
- this.selectionChange = new EventEmitter();
160
- /**
161
- * Fires when the value of the built-in filter input element changes.
162
- */
163
- this.filterChange = new EventEmitter();
164
- /**
165
- * Fires when the user clicks a TreeView node.
166
- */
167
- this.nodeClick = new EventEmitter();
168
- /**
169
- * Fires when the user double clicks a TreeView node.
170
- */
171
- this.nodeDblClick = new EventEmitter();
172
- /**
173
- * A function that defines how to track node changes.
174
- * By default, the TreeView tracks the nodes by data item object reference.
175
- *
176
- * @example
177
- * ```ts
178
- * @Component({
179
- * selector: 'my-app',
180
- * template: `
181
- * <kendo-treeview
182
- * [nodes]="data"
183
- * textField="text"
184
- * [trackBy]="trackBy"
185
- * >
186
- * </kendo-treeview>
187
- * `
188
- * })
189
- * export class AppComponent {
190
- * public data: any[] = [
191
- * { text: "Furniture" },
192
- * { text: "Decor" }
193
- * ];
194
- *
195
- * public trackBy(index: number, item: any): any {
196
- * return item.text;
197
- * }
198
- * }
199
- * ```
200
- */
201
- this.trackBy = trackBy;
202
- /**
203
- * A function which determines if a specific node is disabled.
204
- */
205
- this.isDisabled = isDisabled;
206
- /**
207
- * A function which determines if a specific node has a checkbox.
208
- *
209
- * > If there is no checkbox for a node, then this node is not checkable and is excluded from any built-in check functionality.
210
- */
211
- this.hasCheckbox = hasCheckbox;
212
- /**
213
- * A callback which determines whether a TreeView node should be rendered as hidden. The utility .k-hidden class is used to hide the nodes.
214
- * Useful for custom filtering implementations.
215
- */
216
- this.isVisible = isVisible;
217
- /**
218
- * Determines whether the TreeView keyboard navigable is enabled.
219
- */
220
- this.navigable = true;
221
- /**
222
- * A function which provides the child nodes for a given parent node
223
- * ([see example]({% slug databinding_treeview %})).
224
- */
225
- this.children = () => of([]);
226
- /**
227
- * Indicates whether the child nodes will be fetched on node expand or will be initially prefetched.
228
- * @default true
229
- */
230
- this.loadOnDemand = true;
231
- /**
232
- * Renders the built-in input element for filtering the TreeView.
233
- * If set to `true`, the component emits the `filterChange` event, which can be used to [filter the TreeView manually]({% slug filtering_treeview %}#toc-manual-filtering).
234
- * A built-in filtering implementation is available to use with the [`kendoTreeViewHierarchyBinding`]({% slug api_treeview_hierarchybindingdirective %}) and [`kendoTreeViewFlatDataBinding`]({% slug api_treeview_flatdatabindingdirective %}) directives.
235
- */
236
- this.filterable = false;
237
- /**
238
- * Sets an initial value of the built-in input element used for filtering.
239
- */
240
- this.filter = '';
241
- /**
242
- * Indicates whether only parent nodes should be disabled or their child nodes as well
243
- * @default false
244
- */
245
- this.disableParentNodesOnly = false;
246
- this.checkboxes = false;
247
- this.expandIcons = false;
248
- this.selectable = false;
249
- this.touchActions = true;
250
- this.data = new BehaviorSubject([]);
251
- this._animate = true;
252
- this._size = 'medium';
253
- this.subscriptions = new Subscription();
254
- this.domSubscriptions = [];
255
- this._nextId = nextId;
256
- validatePackage(packageMetadata);
257
- nextId++;
258
- }
69
+ element;
70
+ changeDetectorRef;
71
+ expandService;
72
+ navigationService;
73
+ nodeChildrenService;
74
+ selectionService;
75
+ treeViewLookupService;
76
+ ngZone;
77
+ renderer;
78
+ dataChangeNotification;
79
+ localization;
80
+ /**
81
+ * @hidden
82
+ */
83
+ searchIcon = searchIcon;
84
+ classNames = true;
259
85
  /** @hidden */
260
86
  get direction() {
261
87
  return this.localization.rtl ? 'rtl' : 'ltr';
262
88
  }
89
+ /**
90
+ * @hidden
91
+ */
92
+ assetsContainer;
93
+ /**
94
+ * @hidden
95
+ */
96
+ searchbox;
97
+ /**
98
+ * The hint which is displayed when the component is empty.
99
+ */
100
+ filterInputPlaceholder = "";
101
+ /**
102
+ * Determines whether to allow expanding disabled nodes.
103
+ * @default false
104
+ */
105
+ expandDisabledNodes;
263
106
  /**
264
107
  * Determines whether the content animation is enabled.
265
108
  */
@@ -269,6 +112,95 @@ export class TreeViewComponent {
269
112
  get animate() {
270
113
  return !this._animate;
271
114
  }
115
+ /** @hidden */
116
+ fetchNodes = () => this.data;
117
+ /**
118
+ * Fires when the children of the expanded node are loaded.
119
+ */
120
+ childrenLoaded = new EventEmitter();
121
+ /**
122
+ * Fires when the user blurs the component.
123
+ */
124
+ onBlur = new EventEmitter();
125
+ /**
126
+ * Fires when the user focuses the component.
127
+ */
128
+ onFocus = new EventEmitter();
129
+ /**
130
+ * Fires when the user expands a TreeView node.
131
+ */
132
+ expand = new EventEmitter();
133
+ /**
134
+ * Fires when the user collapses a TreeView node.
135
+ */
136
+ collapse = new EventEmitter();
137
+ /**
138
+ * Fires just before the dragging of the node starts ([see example]({% slug draganddrop_treeview %}#toc-setup)). This event is preventable.
139
+ * If you prevent the event default, no drag hint will be created and the subsequent drag-related events will not be fired.
140
+ */
141
+ nodeDragStart = new EventEmitter();
142
+ /**
143
+ * Fires when an item is being dragged ([see example]({% slug draganddrop_treeview %}#toc-setup)).
144
+ */
145
+ nodeDrag = new EventEmitter();
146
+ /**
147
+ * Emits when the built-in filtering mechanism in the data-binding directives updates the node's visibility.
148
+ * Used for the built-in auto-expand functionalities of the component and available for custom implementations.
149
+ */
150
+ filterStateChange = new EventEmitter();
151
+ /**
152
+ * Fires on the target TreeView when a dragged item is dropped ([see example]({% slug draganddrop_treeview %}#toc-setup)).
153
+ * This event is preventable. If you prevent the event default (`event.preventDefualt()`) or invalidate its state (`event.setValid(false)`),
154
+ * the `addItem` and `removeItem` events will not be triggered.
155
+ *
156
+ * Both operations cancel the default drop operation, but the indication to the user is different. `event.setValid(false)` indicates that the operation was
157
+ * unsuccessful by animating the drag clue to its original position. `event.preventDefault()` simply removes the clue, as if it has been dropped successfully.
158
+ * As a general rule, use `preventDefault` to manually handle the add and remove operations, and `setValid(false)` to indicate the operation was unsuccessful.
159
+ */
160
+ nodeDrop = new EventEmitter();
161
+ /**
162
+ * Fires on the source TreeView after the dragged item has been dropped ([see example]({% slug draganddrop_treeview %}#toc-setup)).
163
+ */
164
+ nodeDragEnd = new EventEmitter();
165
+ /**
166
+ * Fires after a dragged item is dropped ([see example]({% slug draganddrop_treeview %}#toc-setup)).
167
+ * Called on the TreeView where the item is dropped.
168
+ */
169
+ addItem = new EventEmitter();
170
+ /**
171
+ * Fires after a dragged item is dropped ([see example]({% slug draganddrop_treeview %}#toc-setup)).
172
+ * Called on the TreeView from where the item is dragged.
173
+ */
174
+ removeItem = new EventEmitter();
175
+ /**
176
+ * Fires when the user selects a TreeView node checkbox
177
+ * ([see example]({% slug checkboxes_treeview %}#toc-modifying-the-checked-state)).
178
+ */
179
+ checkedChange = new EventEmitter();
180
+ /**
181
+ * Fires when the user selects a TreeView node
182
+ * ([see example]({% slug selection_treeview %}#toc-modifying-the-selection)).
183
+ */
184
+ selectionChange = new EventEmitter();
185
+ /**
186
+ * Fires when the value of the built-in filter input element changes.
187
+ */
188
+ filterChange = new EventEmitter();
189
+ /**
190
+ * Fires when the user clicks a TreeView node.
191
+ */
192
+ nodeClick = new EventEmitter();
193
+ /**
194
+ * Fires when the user double clicks a TreeView node.
195
+ */
196
+ nodeDblClick = new EventEmitter();
197
+ /**
198
+ * @hidden
199
+ *
200
+ * Queries the template for a node template declaration.
201
+ * Ignored if a `[nodeTemplate]` value is explicitly provided.
202
+ */
203
+ nodeTemplateQuery;
272
204
  /**
273
205
  * @hidden
274
206
  *
@@ -281,6 +213,13 @@ export class TreeViewComponent {
281
213
  get nodeTemplateRef() {
282
214
  return this._nodeTemplateRef || this.nodeTemplateQuery;
283
215
  }
216
+ /**
217
+ * @hidden
218
+ *
219
+ * Queries the template for a load-more button template declaration.
220
+ * Ignored if a `[loadMoreButtonTemplate]` value is explicitly provided.
221
+ */
222
+ loadMoreButtonTemplateQuery;
284
223
  /**
285
224
  * @hidden
286
225
  *
@@ -293,6 +232,36 @@ export class TreeViewComponent {
293
232
  get loadMoreButtonTemplateRef() {
294
233
  return this._loadMoreButtonTemplateRef || this.loadMoreButtonTemplateQuery;
295
234
  }
235
+ /**
236
+ * A function that defines how to track node changes.
237
+ * By default, the TreeView tracks the nodes by data item object reference.
238
+ *
239
+ * @example
240
+ * ```ts
241
+ * @Component({
242
+ * selector: 'my-app',
243
+ * template: `
244
+ * <kendo-treeview
245
+ * [nodes]="data"
246
+ * textField="text"
247
+ * [trackBy]="trackBy"
248
+ * >
249
+ * </kendo-treeview>
250
+ * `
251
+ * })
252
+ * export class AppComponent {
253
+ * public data: any[] = [
254
+ * { text: "Furniture" },
255
+ * { text: "Decor" }
256
+ * ];
257
+ *
258
+ * public trackBy(index: number, item: any): any {
259
+ * return item.text;
260
+ * }
261
+ * }
262
+ * ```
263
+ */
264
+ trackBy = trackBy;
296
265
  /**
297
266
  * The nodes which will be displayed by the TreeView
298
267
  * ([see example]({% slug databinding_treeview %})).
@@ -304,6 +273,13 @@ export class TreeViewComponent {
304
273
  get nodes() {
305
274
  return this.data.value;
306
275
  }
276
+ /**
277
+ * The fields of the data item that provide the text content of the nodes
278
+ * ([see example]({% slug databinding_treeview %})). If the `textField` input is set
279
+ * to an array, each hierarchical level uses the field that corresponds to the same
280
+ * index in the array, or the last item in the array.
281
+ */
282
+ textField;
307
283
  /**
308
284
  * A function which determines if a specific node has child nodes
309
285
  * ([see example]({% slug databinding_treeview %})).
@@ -326,6 +302,16 @@ export class TreeViewComponent {
326
302
  this._isChecked = callback;
327
303
  this.checkboxes = Boolean(this._isChecked);
328
304
  }
305
+ /**
306
+ * A function which determines if a specific node is disabled.
307
+ */
308
+ isDisabled = isDisabled;
309
+ /**
310
+ * A function which determines if a specific node has a checkbox.
311
+ *
312
+ * > If there is no checkbox for a node, then this node is not checkable and is excluded from any built-in check functionality.
313
+ */
314
+ hasCheckbox = hasCheckbox;
329
315
  /**
330
316
  * A function which determines if a specific node is expanded.
331
317
  */
@@ -347,6 +333,35 @@ export class TreeViewComponent {
347
333
  this._isSelected = callback;
348
334
  this.selectable = Boolean(this._isSelected);
349
335
  }
336
+ /**
337
+ * A callback which determines whether a TreeView node should be rendered as hidden. The utility .k-hidden class is used to hide the nodes.
338
+ * Useful for custom filtering implementations.
339
+ */
340
+ isVisible = isVisible;
341
+ /**
342
+ * Determines whether the TreeView keyboard navigable is enabled.
343
+ */
344
+ navigable = true;
345
+ /**
346
+ * A function which provides the child nodes for a given parent node
347
+ * ([see example]({% slug databinding_treeview %})).
348
+ */
349
+ children = () => of([]);
350
+ /**
351
+ * Indicates whether the child nodes will be fetched on node expand or will be initially prefetched.
352
+ * @default true
353
+ */
354
+ loadOnDemand = true;
355
+ /**
356
+ * Renders the built-in input element for filtering the TreeView.
357
+ * If set to `true`, the component emits the `filterChange` event, which can be used to [filter the TreeView manually]({% slug filtering_treeview %}#toc-manual-filtering).
358
+ * A built-in filtering implementation is available to use with the [`kendoTreeViewHierarchyBinding`]({% slug api_treeview_hierarchybindingdirective %}) and [`kendoTreeViewFlatDataBinding`]({% slug api_treeview_flatdatabindingdirective %}) directives.
359
+ */
360
+ filterable = false;
361
+ /**
362
+ * Sets an initial value of the built-in input element used for filtering.
363
+ */
364
+ filter = '';
350
365
  /**
351
366
  * Sets the size of the component.
352
367
  *
@@ -376,6 +391,50 @@ export class TreeViewComponent {
376
391
  get treeviewId() {
377
392
  return `treeview_${this._nextId}`;
378
393
  }
394
+ /**
395
+ * Indicates whether only parent nodes should be disabled or their child nodes as well
396
+ * @default false
397
+ */
398
+ disableParentNodesOnly = false;
399
+ /**
400
+ * @hidden
401
+ */
402
+ loadMoreService;
403
+ /**
404
+ * @hidden
405
+ */
406
+ editService;
407
+ checkboxes = false;
408
+ expandIcons = false;
409
+ selectable = false;
410
+ touchActions = true;
411
+ data = new BehaviorSubject([]);
412
+ _animate = true;
413
+ _isChecked;
414
+ _isExpanded;
415
+ _isSelected;
416
+ _hasChildren;
417
+ _nodeTemplateRef;
418
+ _loadMoreButtonTemplateRef;
419
+ _size = 'medium';
420
+ subscriptions = new Subscription();
421
+ domSubscriptions = [];
422
+ _nextId = nextId;
423
+ constructor(element, changeDetectorRef, expandService, navigationService, nodeChildrenService, selectionService, treeViewLookupService, ngZone, renderer, dataChangeNotification, localization) {
424
+ this.element = element;
425
+ this.changeDetectorRef = changeDetectorRef;
426
+ this.expandService = expandService;
427
+ this.navigationService = navigationService;
428
+ this.nodeChildrenService = nodeChildrenService;
429
+ this.selectionService = selectionService;
430
+ this.treeViewLookupService = treeViewLookupService;
431
+ this.ngZone = ngZone;
432
+ this.renderer = renderer;
433
+ this.dataChangeNotification = dataChangeNotification;
434
+ this.localization = localization;
435
+ validatePackage(packageMetadata);
436
+ nextId++;
437
+ }
379
438
  ngOnChanges(changes) {
380
439
  this.navigationService.navigable = Boolean(this.navigable);
381
440
  // TODO: should react to changes.loadOnDemand as well - should preload the data or clear the already cached items
@@ -634,9 +693,8 @@ export class TreeViewComponent {
634
693
  }
635
694
  });
636
695
  }
637
- }
638
- TreeViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", 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 });
639
- TreeViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TreeViewComponent, isStandalone: true, 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", hasCheckbox: "hasCheckbox", 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.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 }, { propertyName: "searchbox", first: true, predicate: ["searchbox"], descendants: true }], exportAs: ["kendoTreeView"], usesOnChanges: true, ngImport: i0, template: `
696
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", 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 });
697
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TreeViewComponent, isStandalone: true, 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", hasCheckbox: "hasCheckbox", 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.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 }, { propertyName: "searchbox", first: true, predicate: ["searchbox"], descendants: true }], exportAs: ["kendoTreeView"], usesOnChanges: true, ngImport: i0, template: `
640
698
  <ng-container kendoTreeViewLocalizedMessages
641
699
  i18n-loadMore="kendo.treeview.loadMore|The title of the Load More button"
642
700
  loadMore="Load more..."
@@ -694,7 +752,8 @@ TreeViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
694
752
  </ul>
695
753
  <ng-container #assetsContainer></ng-container>
696
754
  `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoTreeViewLocalizedMessages]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "directive", type: TextBoxPrefixTemplateDirective, selector: "[kendoTextBoxPrefixTemplate]", inputs: ["showSeparator"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: TreeViewGroupComponent, selector: "[kendoTreeViewGroup]", inputs: ["checkboxes", "expandIcons", "disabled", "selectable", "touchActions", "disableParentNodesOnly", "loadOnDemand", "trackBy", "nodes", "textField", "parentDataItem", "parentIndex", "nodeTemplateRef", "loadMoreButtonTemplateRef", "loadMoreService", "size", "expandDisabledNodes", "isChecked", "isDisabled", "hasCheckbox", "isExpanded", "isVisible", "isSelected", "children", "hasChildren"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
697
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TreeViewComponent, decorators: [{
755
+ }
756
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TreeViewComponent, decorators: [{
698
757
  type: Component,
699
758
  args: [{
700
759
  changeDetection: ChangeDetectionStrategy.Default,
@@ -29,19 +29,19 @@ import * as i15 from "./localization/custom-messages.component";
29
29
  * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi']) definition for the TreeView component.
30
30
  */
31
31
  export class TreeViewModule {
32
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TreeViewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
33
+ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: TreeViewModule, imports: [i1.TreeViewComponent, i2.NodeTemplateDirective, i3.CheckDirective, i4.DisableDirective, i5.ExpandDirective, i6.SelectDirective, i7.HierarchyBindingDirective, i8.FlatDataBindingDirective, i9.DragAndDropDirective, i10.DragClueTemplateDirective, i11.DropHintTemplateDirective, i12.DragAndDropEditingDirective, i13.LoadMoreDirective, i14.LoadMoreButtonTemplateDirective, i15.CustomMessagesComponent], exports: [i1.TreeViewComponent, i2.NodeTemplateDirective, i3.CheckDirective, i4.DisableDirective, i5.ExpandDirective, i6.SelectDirective, i7.HierarchyBindingDirective, i8.FlatDataBindingDirective, i9.DragAndDropDirective, i10.DragClueTemplateDirective, i11.DropHintTemplateDirective, i12.DragAndDropEditingDirective, i13.LoadMoreDirective, i14.LoadMoreButtonTemplateDirective, i15.CustomMessagesComponent] });
34
+ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TreeViewModule, providers: [
35
+ IconsService,
36
+ PopupService,
37
+ ResizeBatchService,
38
+ DialogContainerService,
39
+ DialogService,
40
+ WindowService,
41
+ WindowContainerService
42
+ ], imports: [i1.TreeViewComponent] });
32
43
  }
33
- TreeViewModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TreeViewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
34
- TreeViewModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: TreeViewModule, imports: [i1.TreeViewComponent, i2.NodeTemplateDirective, i3.CheckDirective, i4.DisableDirective, i5.ExpandDirective, i6.SelectDirective, i7.HierarchyBindingDirective, i8.FlatDataBindingDirective, i9.DragAndDropDirective, i10.DragClueTemplateDirective, i11.DropHintTemplateDirective, i12.DragAndDropEditingDirective, i13.LoadMoreDirective, i14.LoadMoreButtonTemplateDirective, i15.CustomMessagesComponent], exports: [i1.TreeViewComponent, i2.NodeTemplateDirective, i3.CheckDirective, i4.DisableDirective, i5.ExpandDirective, i6.SelectDirective, i7.HierarchyBindingDirective, i8.FlatDataBindingDirective, i9.DragAndDropDirective, i10.DragClueTemplateDirective, i11.DropHintTemplateDirective, i12.DragAndDropEditingDirective, i13.LoadMoreDirective, i14.LoadMoreButtonTemplateDirective, i15.CustomMessagesComponent] });
35
- TreeViewModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TreeViewModule, providers: [
36
- IconsService,
37
- PopupService,
38
- ResizeBatchService,
39
- DialogContainerService,
40
- DialogService,
41
- WindowService,
42
- WindowContainerService
43
- ], imports: [i1.TreeViewComponent, i15.CustomMessagesComponent] });
44
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TreeViewModule, decorators: [{
44
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TreeViewModule, decorators: [{
45
45
  type: NgModule,
46
46
  args: [{
47
47
  imports: [...KENDO_TREEVIEW],
@@ -73,6 +73,6 @@ export declare class ExpandDirective implements OnDestroy, OnChanges {
73
73
  private getEveryExpandKey;
74
74
  private notify;
75
75
  static ɵfac: i0.ɵɵFactoryDeclaration<ExpandDirective, never>;
76
- static ɵdir: i0.ɵɵDirectiveDeclaration<ExpandDirective, "[kendoTreeViewExpandable]", never, { "isExpanded": "isExpanded"; "expandKey": "expandBy"; "expandOnFilter": "expandOnFilter"; "expandedKeys": "expandedKeys"; }, { "expandedKeysChange": "expandedKeysChange"; }, never, never, true, never>;
76
+ static ɵdir: i0.ɵɵDirectiveDeclaration<ExpandDirective, "[kendoTreeViewExpandable]", never, { "isExpanded": { "alias": "isExpanded"; "required": false; }; "expandKey": { "alias": "expandBy"; "required": false; }; "expandOnFilter": { "alias": "expandOnFilter"; "required": false; }; "expandedKeys": { "alias": "expandedKeys"; "required": false; }; }, { "expandedKeysChange": "expandedKeysChange"; }, never, never, true, never>;
77
77
  }
78
78
  export {};