@progress/kendo-angular-treeview 19.1.2-develop.2 → 19.1.2-develop.4

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 (67) hide show
  1. package/check-mode.d.ts +4 -3
  2. package/check.directive.d.ts +20 -9
  3. package/checkable-settings.d.ts +14 -19
  4. package/checkbox/checked-state.d.ts +1 -1
  5. package/directives.d.ts +15 -1
  6. package/disable.directive.d.ts +1 -1
  7. package/drag-and-drop/drag-and-drop-editing.directive.d.ts +20 -8
  8. package/drag-and-drop/drag-and-drop.directive.d.ts +29 -20
  9. package/drag-and-drop/drag-clue/drag-clue-template.directive.d.ts +16 -9
  10. package/drag-and-drop/drop-hint/drop-hint-template.directive.d.ts +16 -7
  11. package/drag-and-drop/models/drop-action.d.ts +17 -2
  12. package/drag-and-drop/models/drop-position.d.ts +10 -1
  13. package/drag-and-drop/models/editing-service.d.ts +6 -6
  14. package/drag-and-drop/models/scroll-settings.d.ts +6 -6
  15. package/drag-and-drop/models/tree-item-filter-state.d.ts +11 -10
  16. package/drag-and-drop/models/treeitem-add-remove-args.d.ts +7 -7
  17. package/drag-and-drop/models/treeitem-drag-event.d.ts +5 -5
  18. package/drag-and-drop/models/treeitem-drag-start-event.d.ts +3 -3
  19. package/drag-and-drop/models/treeitem-drop-event.d.ts +10 -11
  20. package/esm2022/check.directive.mjs +20 -9
  21. package/esm2022/directives.mjs +15 -1
  22. package/esm2022/disable.directive.mjs +1 -1
  23. package/esm2022/drag-and-drop/drag-and-drop-editing.directive.mjs +20 -8
  24. package/esm2022/drag-and-drop/drag-and-drop.directive.mjs +29 -20
  25. package/esm2022/drag-and-drop/drag-clue/drag-clue-template.directive.mjs +16 -9
  26. package/esm2022/drag-and-drop/drop-hint/drop-hint-template.directive.mjs +16 -7
  27. package/esm2022/drag-and-drop/models/drop-action.mjs +17 -2
  28. package/esm2022/drag-and-drop/models/drop-position.mjs +10 -1
  29. package/esm2022/drag-and-drop/models/treeitem-drag-event.mjs +5 -5
  30. package/esm2022/drag-and-drop/models/treeitem-drag-start-event.mjs +3 -3
  31. package/esm2022/drag-and-drop/models/treeitem-drop-event.mjs +10 -11
  32. package/esm2022/expand.directive.mjs +19 -8
  33. package/esm2022/flat-binding.directive.mjs +19 -4
  34. package/esm2022/hierarchy-binding.directive.mjs +18 -4
  35. package/esm2022/load-more/load-more-button-template.directive.mjs +14 -6
  36. package/esm2022/load-more/load-more.directive.mjs +25 -13
  37. package/esm2022/localization/custom-messages.component.mjs +10 -1
  38. package/esm2022/localization/messages.mjs +1 -1
  39. package/esm2022/node-template.directive.mjs +14 -46
  40. package/esm2022/package-metadata.mjs +2 -2
  41. package/esm2022/selection/select.directive.mjs +19 -8
  42. package/esm2022/treeview.component.mjs +73 -129
  43. package/esm2022/treeview.module.mjs +15 -0
  44. package/expand.directive.d.ts +19 -8
  45. package/fesm2022/progress-kendo-angular-treeview.mjs +391 -299
  46. package/filter-expand-settings.interface.d.ts +13 -12
  47. package/filter-state.interface.d.ts +6 -6
  48. package/flat-binding.directive.d.ts +19 -4
  49. package/hierarchy-binding.directive.d.ts +18 -4
  50. package/load-more/load-more-button-template.directive.d.ts +14 -6
  51. package/load-more/load-more-request-args.d.ts +6 -7
  52. package/load-more/load-more.directive.d.ts +25 -13
  53. package/localization/custom-messages.component.d.ts +10 -1
  54. package/localization/messages.d.ts +1 -1
  55. package/node-click-event.interface.d.ts +4 -4
  56. package/node-template.directive.d.ts +14 -46
  57. package/package.json +7 -7
  58. package/schematics/ngAdd/index.js +4 -4
  59. package/selection/select.directive.d.ts +19 -8
  60. package/selection/selectable-settings.d.ts +5 -49
  61. package/selection/selection-mode.d.ts +3 -42
  62. package/size.d.ts +1 -1
  63. package/treeitem-lookup.interface.d.ts +9 -8
  64. package/treeitem.interface.d.ts +3 -3
  65. package/treeview-filter-settings.d.ts +13 -23
  66. package/treeview.component.d.ts +73 -129
  67. package/treeview.module.d.ts +15 -0
@@ -28,8 +28,8 @@ const packageMetadata = {
28
28
  productName: 'Kendo UI for Angular',
29
29
  productCode: 'KENDOUIANGULAR',
30
30
  productCodes: ['KENDOUIANGULAR'],
31
- publishDate: 1749820447,
32
- version: '19.1.2-develop.2',
31
+ publishDate: 1750156943,
32
+ version: '19.1.2-develop.4',
33
33
  licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
34
34
  };
35
35
 
@@ -830,57 +830,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
830
830
  }] });
831
831
 
832
832
  /**
833
- * Represents the template for the TreeView nodes ([more information and example]({% slug nodetemplate_treeview %})).
834
- * The template helps to customize the content of the nodes. To define the node template, nest an `<ng-template>`
835
- * tag with the `kendoTreeViewNodeTemplate` directive inside a `<kendo-treeview>` tag.
836
- *
833
+ * Represents the template for TreeView nodes ([more information and example](slug:nodetemplate_treeview)).
837
834
  *
838
- * The node data item and its hierarchical index are available as context variables:
835
+ * Use this template to customize the content of the nodes. To define the node template, nest an `<ng-template>`
836
+ * tag with the `kendoTreeViewNodeTemplate` directive inside a `<kendo-treeview>` tag.
839
837
  *
840
- * - `let-dataItem` (`any`) - available as implicit context variable
841
- * - `let-index="index"` (`string`)
838
+ * The template context provides the node data item and its hierarchical index as variables:
842
839
  *
840
+ * - `let-dataItem`&mdash;The data item for the current node.
841
+ * - `let-index="index"`&mdash;The hierarchical index of the current node.
843
842
  *
844
843
  * @example
845
- * ```ts
846
- *
847
- * import { Component } from '@angular/core';
848
- * @Component({
849
- * selector: 'my-app',
850
- * template: `
851
- * <kendo-treeview
852
- * [nodes]="data"
853
- * kendoTreeViewExpandable
854
- *
855
- * kendoTreeViewHierarchyBinding
856
- * childrenField="items">
857
- * <ng-template kendoTreeViewNodeTemplate let-dataItem let-index="index">
858
- * <span [style.fontWeight]="dataItem.items ? 'bolder': 'normal' ">{{ index }}: {{ dataItem.text }}</span>
859
- * </ng-template>
860
- * </kendo-treeview>
861
- * `
862
- * })
863
- * export class AppComponent {
864
- * public data: any[] = [
865
- * {
866
- * text: "Inbox",
867
- * items: [{ text: "Read Mail" }]
868
- * },
869
- * {
870
- * text: "Drafts"
871
- * },
872
- * {
873
- * text: "Search Folders",
874
- * items: [
875
- * { text: "Categorized Mail" },
876
- * { text: "Large Mail" },
877
- * { text: "Unread Mail"}
878
- * ]
879
- * },
880
- * { text: "Settings" }
881
- * ];
882
- * }
883
- *
844
+ * ```html
845
+ * <kendo-treeview>
846
+ * <ng-template kendoTreeViewNodeTemplate let-dataItem let-index="index">
847
+ * <span [style.fontWeight]="dataItem.items ? 'bolder': 'normal' ">
848
+ * {{ index }}: {{ dataItem.text }}
849
+ * </span>
850
+ * </ng-template>
851
+ * </kendo-treeview>
884
852
  * ```
885
853
  */
886
854
  class NodeTemplateDirective {
@@ -902,14 +870,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
902
870
  }] }]; } });
903
871
 
904
872
  /**
905
- * Represents the template for the TreeView load more buttons.
906
- * To define a button template, nest an `<ng-template>`
907
- * tag with the `kendoTreeViewLoadMoreButtonTemplate` directive inside a `<kendo-treeview>` tag
908
- * ([see example]({% slug loadmorebutton_treeview %}#toc-button-template)).
873
+ * Represents a directive for customizing the load more button in the TreeView.
874
+ *
875
+ * To define the template, nest an `<ng-template>` tag with the `kendoTreeViewLoadMoreButtonTemplate` directive inside a `<kendo-treeview>` tag
876
+ * ([see example](slug:loadmorebutton_treeview#button-template)).
909
877
  *
910
- * The hierarchical index of the load more button node is available as a context variable:
878
+ * The template context provides the following variable:
879
+ * - `let-index="index"`&mdash;The hierarchical index of the load more button node.
911
880
  *
912
- * - `let-index="index"` (`string`)
881
+ * @example
882
+ * ```html
883
+ * <kendo-treeview>
884
+ * <ng-template kendoTreeViewLoadMoreButtonTemplate let-index="index">
885
+ * Load more at {{ index }}
886
+ * </ng-template>
887
+ * </kendo-treeview>
888
+ * ```
913
889
  */
914
890
  class LoadMoreButtonTemplateDirective {
915
891
  templateRef;
@@ -2139,7 +2115,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
2139
2115
  */
2140
2116
  class TreeViewMessages extends ComponentMessages {
2141
2117
  /**
2142
- * The text of the `Load More` button title.
2118
+ * Sets the text for the `Load More` button title.
2143
2119
  */
2144
2120
  loadMore;
2145
2121
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TreeViewMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
@@ -2212,8 +2188,19 @@ const providers = [
2212
2188
  }
2213
2189
  ];
2214
2190
  /**
2215
- * Represents the [Kendo UI TreeView component for Angular]({% slug overview_treeview %}).
2191
+ * Represents the [Kendo UI TreeView component for Angular](slug:overview_treeview).
2216
2192
  *
2193
+ * @example
2194
+ * ```html
2195
+ * <kendo-treeview
2196
+ * kendoTreeViewExpandable
2197
+ * [nodes]="data"
2198
+ * textField="text"
2199
+ * [children]="fetchChildren"
2200
+ * [hasChildren]="hasChildren"
2201
+ * >
2202
+ * </kendo-treeview>
2203
+ * ```
2217
2204
  */
2218
2205
  class TreeViewComponent {
2219
2206
  element;
@@ -2245,16 +2232,17 @@ class TreeViewComponent {
2245
2232
  */
2246
2233
  searchbox;
2247
2234
  /**
2248
- * The hint which is displayed when the component is empty.
2235
+ * Sets the placeholder text for the filter input when the component is empty.
2249
2236
  */
2250
2237
  filterInputPlaceholder = "";
2251
2238
  /**
2252
- * Determines whether to allow expanding disabled nodes.
2239
+ * Allows expanding disabled nodes.
2240
+ *
2253
2241
  * @default false
2254
2242
  */
2255
2243
  expandDisabledNodes;
2256
2244
  /**
2257
- * Determines whether the content animation is enabled.
2245
+ * Enables or disables content animation.
2258
2246
  */
2259
2247
  set animate(value) {
2260
2248
  this._animate = value;
@@ -2269,79 +2257,73 @@ class TreeViewComponent {
2269
2257
  */
2270
2258
  childrenLoaded = new EventEmitter();
2271
2259
  /**
2272
- * Fires when the user blurs the component.
2273
- */
2260
+ * Fires when the component loses focus.
2261
+ */
2274
2262
  onBlur = new EventEmitter();
2275
2263
  /**
2276
- * Fires when the user focuses the component.
2264
+ * Fires when the component receives focus.
2277
2265
  */
2278
2266
  onFocus = new EventEmitter();
2279
2267
  /**
2280
- * Fires when the user expands a TreeView node.
2268
+ * Fires when a TreeView node expands.
2281
2269
  */
2282
2270
  expand = new EventEmitter();
2283
2271
  /**
2284
- * Fires when the user collapses a TreeView node.
2272
+ * Fires when a TreeView node collapses.
2285
2273
  */
2286
2274
  collapse = new EventEmitter();
2287
2275
  /**
2288
- * Fires just before the dragging of the node starts ([see example]({% slug draganddrop_treeview %}#toc-setup)). This event is preventable.
2289
- * If you prevent the event default, no drag hint will be created and the subsequent drag-related events will not be fired.
2276
+ * Fires just before node dragging starts ([see example](slug:draganddrop_treeview#setup)). This event is preventable.
2277
+ * Prevent the default event to stop drag hint creation and further drag events.
2290
2278
  */
2291
2279
  nodeDragStart = new EventEmitter();
2292
2280
  /**
2293
- * Fires when an item is being dragged ([see example]({% slug draganddrop_treeview %}#toc-setup)).
2281
+ * Fires when an item is being dragged ([see example](slug:draganddrop_treeview#setup)).
2294
2282
  */
2295
2283
  nodeDrag = new EventEmitter();
2296
2284
  /**
2297
- * Emits when the built-in filtering mechanism in the data-binding directives updates the node's visibility.
2298
- * Used for the built-in auto-expand functionalities of the component and available for custom implementations.
2285
+ * Emits when the built-in filtering mechanism updates node visibility.
2286
+ * Used for the built-in auto-expand functionalities. Handle this event for custom implementations.
2299
2287
  */
2300
2288
  filterStateChange = new EventEmitter();
2301
2289
  /**
2302
- * Fires on the target TreeView when a dragged item is dropped ([see example]({% slug draganddrop_treeview %}#toc-setup)).
2303
- * This event is preventable. If you prevent the event default (`event.preventDefualt()`) or invalidate its state (`event.setValid(false)`),
2304
- * the `addItem` and `removeItem` events will not be triggered.
2290
+ * Fires on the target TreeView when a dragged item is dropped ([see example](slug:draganddrop_treeview#setup)).
2291
+ *
2292
+ * Prevent the default event (`event.preventDefault()`) or set the event as invalid (`event.setValid(false)`) to stop the `addItem` and `removeItem` events from triggering.
2305
2293
  *
2306
- * Both operations cancel the default drop operation, but the indication to the user is different. `event.setValid(false)` indicates that the operation was
2307
- * unsuccessful by animating the drag clue to its original position. `event.preventDefault()` simply removes the clue, as if it has been dropped successfully.
2308
- * As a general rule, use `preventDefault` to manually handle the add and remove operations, and `setValid(false)` to indicate the operation was unsuccessful.
2294
+ * Use `preventDefault` to handle add/remove manually, or `setValid(false)` to indicate an unsuccessful operation. While `setValid(false)` animates the drag clue to its original position, `event.preventDefault()` simply removes the clue.
2309
2295
  */
2310
2296
  nodeDrop = new EventEmitter();
2311
2297
  /**
2312
- * Fires on the source TreeView after the dragged item has been dropped ([see example]({% slug draganddrop_treeview %}#toc-setup)).
2298
+ * Fires on the source TreeView after the dragged item is dropped ([see example](slug:draganddrop_treeview#setup)).
2313
2299
  */
2314
2300
  nodeDragEnd = new EventEmitter();
2315
2301
  /**
2316
- * Fires after a dragged item is dropped ([see example]({% slug draganddrop_treeview %}#toc-setup)).
2317
- * Called on the TreeView where the item is dropped.
2302
+ * Fires after a dragged item is dropped ([see example](slug:draganddrop_treeview#setup)). Called on the TreeView where the item is dropped.
2318
2303
  */
2319
2304
  addItem = new EventEmitter();
2320
2305
  /**
2321
- * Fires after a dragged item is dropped ([see example]({% slug draganddrop_treeview %}#toc-setup)).
2322
- * Called on the TreeView from where the item is dragged.
2306
+ * Fires after a dragged item is dropped ([see example](slug:draganddrop_treeview#setup)). Called on the TreeView from where the item is dragged.
2323
2307
  */
2324
2308
  removeItem = new EventEmitter();
2325
2309
  /**
2326
- * Fires when the user selects a TreeView node checkbox
2327
- * ([see example]({% slug checkboxes_treeview %}#toc-modifying-the-checked-state)).
2310
+ * Fires when a TreeView node checkbox is selected ([see example](slug:checkboxes_treeview#toc-modifying-the-checked-state)).
2328
2311
  */
2329
2312
  checkedChange = new EventEmitter();
2330
2313
  /**
2331
- * Fires when the user selects a TreeView node
2332
- * ([see example]({% slug selection_treeview %}#toc-modifying-the-selection)).
2314
+ * Fires when a TreeView node is selected ([see example](slug:selection_treeview#toc-modifying-the-selection)).
2333
2315
  */
2334
2316
  selectionChange = new EventEmitter();
2335
2317
  /**
2336
- * Fires when the value of the built-in filter input element changes.
2318
+ * Fires when the value of the built-in filter input changes.
2337
2319
  */
2338
2320
  filterChange = new EventEmitter();
2339
2321
  /**
2340
- * Fires when the user clicks a TreeView node.
2322
+ * Fires when a TreeView node is clicked.
2341
2323
  */
2342
2324
  nodeClick = new EventEmitter();
2343
2325
  /**
2344
- * Fires when the user double clicks a TreeView node.
2326
+ * Fires when a TreeView node is double-clicked.
2345
2327
  */
2346
2328
  nodeDblClick = new EventEmitter();
2347
2329
  /**
@@ -2385,36 +2367,10 @@ class TreeViewComponent {
2385
2367
  /**
2386
2368
  * A function that defines how to track node changes.
2387
2369
  * By default, the TreeView tracks the nodes by data item object reference.
2388
- *
2389
- * @example
2390
- * ```ts
2391
- * @Component({
2392
- * selector: 'my-app',
2393
- * template: `
2394
- * <kendo-treeview
2395
- * [nodes]="data"
2396
- * textField="text"
2397
- * [trackBy]="trackBy"
2398
- * >
2399
- * </kendo-treeview>
2400
- * `
2401
- * })
2402
- * export class AppComponent {
2403
- * public data: any[] = [
2404
- * { text: "Furniture" },
2405
- * { text: "Decor" }
2406
- * ];
2407
- *
2408
- * public trackBy(index: number, item: any): any {
2409
- * return item.text;
2410
- * }
2411
- * }
2412
- * ```
2413
2370
  */
2414
2371
  trackBy = trackBy;
2415
2372
  /**
2416
- * The nodes which will be displayed by the TreeView
2417
- * ([see example]({% slug databinding_treeview %})).
2373
+ * The nodes displayed by the TreeView ([see example](slug:databinding_treeview)).
2418
2374
  */
2419
2375
  set nodes(value) {
2420
2376
  this.data.next(value || []);
@@ -2424,15 +2380,12 @@ class TreeViewComponent {
2424
2380
  return this.data.value;
2425
2381
  }
2426
2382
  /**
2427
- * The fields of the data item that provide the text content of the nodes
2428
- * ([see example]({% slug databinding_treeview %})). If the `textField` input is set
2429
- * to an array, each hierarchical level uses the field that corresponds to the same
2430
- * index in the array, or the last item in the array.
2383
+ * The fields of the data item that provide the text content of the nodes ([see example](slug:databinding_treeview)).
2384
+ * If set to an array, each level uses the field at the same index or the last item in the array.
2431
2385
  */
2432
2386
  textField;
2433
2387
  /**
2434
- * A function which determines if a specific node has child nodes
2435
- * ([see example]({% slug databinding_treeview %})).
2388
+ * A function that determines if a node has child nodes ([see example](slug:databinding_treeview)).
2436
2389
  */
2437
2390
  get hasChildren() {
2438
2391
  return this._hasChildren || hasChildren;
@@ -2442,8 +2395,7 @@ class TreeViewComponent {
2442
2395
  this.expandIcons = Boolean(this._isExpanded && this._hasChildren);
2443
2396
  }
2444
2397
  /**
2445
- * A function which determines if a specific node is checked
2446
- * ([see example]({% slug checkboxes_treeview %}#toc-modifying-the-checked-state)).
2398
+ * A function that determines if a node is checked ([see example](slug:checkboxes_treeview#toc-modifying-the-checked-state)).
2447
2399
  */
2448
2400
  get isChecked() {
2449
2401
  return this._isChecked || isChecked;
@@ -2453,17 +2405,15 @@ class TreeViewComponent {
2453
2405
  this.checkboxes = Boolean(this._isChecked);
2454
2406
  }
2455
2407
  /**
2456
- * A function which determines if a specific node is disabled.
2408
+ * A function that determines if a node is disabled.
2457
2409
  */
2458
2410
  isDisabled = isDisabled;
2459
2411
  /**
2460
- * A function which determines if a specific node has a checkbox.
2461
- *
2462
- * > If there is no checkbox for a node, then this node is not checkable and is excluded from any built-in check functionality.
2412
+ * A function that determines if a node has a checkbox. If there is no checkbox, the node is not checkable and is excluded from built-in check functionality.
2463
2413
  */
2464
2414
  hasCheckbox = hasCheckbox;
2465
2415
  /**
2466
- * A function which determines if a specific node is expanded.
2416
+ * A function that determines if a node is expanded.
2467
2417
  */
2468
2418
  get isExpanded() {
2469
2419
  return this._isExpanded || isExpanded;
@@ -2473,8 +2423,7 @@ class TreeViewComponent {
2473
2423
  this.expandIcons = Boolean(this._isExpanded && this._hasChildren);
2474
2424
  }
2475
2425
  /**
2476
- * A function which determines if a specific node is selected
2477
- * ([see example]({% slug selection_treeview %}#toc-modifying-the-selection)).
2426
+ * A function that determines if a node is selected ([see example](slug:selection_treeview#modifying-the-selection)).
2478
2427
  */
2479
2428
  get isSelected() {
2480
2429
  return this._isSelected || isSelected;
@@ -2484,42 +2433,41 @@ class TreeViewComponent {
2484
2433
  this.selectable = Boolean(this._isSelected);
2485
2434
  }
2486
2435
  /**
2487
- * A callback which determines whether a TreeView node should be rendered as hidden. The utility .k-hidden class is used to hide the nodes.
2488
- * Useful for custom filtering implementations.
2436
+ * A callback that determines whether a TreeView node should be rendered as hidden. Uses the `.k-hidden` utility class. Useful for custom filtering.
2437
+ *
2489
2438
  */
2490
2439
  isVisible = isVisible;
2491
2440
  /**
2492
- * Determines whether the TreeView keyboard navigable is enabled.
2441
+ * Enables keyboard navigation for the TreeView.
2442
+ *
2443
+ * @default true
2493
2444
  */
2494
2445
  navigable = true;
2495
2446
  /**
2496
- * A function which provides the child nodes for a given parent node
2497
- * ([see example]({% slug databinding_treeview %})).
2447
+ * A function that provides the child nodes for a given parent node ([see example](slug:databinding_treeview)).
2498
2448
  */
2499
2449
  children = () => of([]);
2500
2450
  /**
2501
- * Indicates whether the child nodes will be fetched on node expand or will be initially prefetched.
2451
+ * Indicates whether child nodes are fetched on expand or initally prefetched.
2452
+ *
2502
2453
  * @default true
2503
2454
  */
2504
2455
  loadOnDemand = true;
2505
2456
  /**
2506
- * Renders the built-in input element for filtering the TreeView.
2507
- * 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).
2508
- * A built-in filtering implementation is available to use with the [`kendoTreeViewHierarchyBinding`]({% slug api_treeview_hierarchybindingdirective %}) and [`kendoTreeViewFlatDataBinding`]({% slug api_treeview_flatdatabindingdirective %}) directives.
2457
+ * Renders the built-in input element for filtering. If `true`, emits the `filterChange` event that can be handled for [manual filtering](slug:filtering_treeview#toc-manual-filtering).
2458
+ * Built-in filtering is available with [`kendoTreeViewHierarchyBinding`](slug:api_treeview_hierarchybindingdirective) and [`kendoTreeViewFlatDataBinding`](slug:api_treeview_flatdatabindingdirective) directives.
2459
+ *
2460
+ * @default false
2509
2461
  */
2510
2462
  filterable = false;
2511
2463
  /**
2512
- * Sets an initial value of the built-in input element used for filtering.
2464
+ * Sets the initial value of the built-in filter input.
2513
2465
  */
2514
2466
  filter = '';
2515
2467
  /**
2516
2468
  * Sets the size of the component.
2517
2469
  *
2518
- * The possible values are:
2519
- * * `small`
2520
- * * `medium` (default)
2521
- * * `large`
2522
- * * `none`
2470
+ * @default 'medium'
2523
2471
  */
2524
2472
  set size(size) {
2525
2473
  const newSize = size ? size : 'medium';
@@ -2542,7 +2490,8 @@ class TreeViewComponent {
2542
2490
  return `treeview_${this._nextId}`;
2543
2491
  }
2544
2492
  /**
2545
- * Indicates whether only parent nodes should be disabled or their child nodes as well
2493
+ * Indicates whether only parent nodes should be disabled or their child nodes as well.
2494
+ *
2546
2495
  * @default false
2547
2496
  */
2548
2497
  disableParentNodesOnly = false;
@@ -2643,31 +2592,7 @@ class TreeViewComponent {
2643
2592
  }
2644
2593
  }
2645
2594
  /**
2646
- * Focuses the first focusable item in the TreeView component if no hierarchical index is provided.
2647
- *
2648
- * @example
2649
- * ```ts
2650
- * import { Component } from '@angular/core';
2651
- *
2652
- * @Component({
2653
- * selector: 'my-app',
2654
- * template: `
2655
- * <button (click)="treeview.focus('1')">Focuses the second node</button>
2656
- * <kendo-treeview
2657
- * #treeview
2658
- * [nodes]="data"
2659
- * textField="text"
2660
- * >
2661
- * </kendo-treeview>
2662
- * `
2663
- * })
2664
- * export class AppComponent {
2665
- * public data: any[] = [
2666
- * { text: "Furniture" },
2667
- * { text: "Decor" }
2668
- * ];
2669
- * }
2670
- * ```
2595
+ * Focuses the first focusable item in the TreeView if no hierarchical index is provided.
2671
2596
  */
2672
2597
  focus(index) {
2673
2598
  const focusIndex = index || nodeIndex(this.navigationService.focusableItem);
@@ -2678,23 +2603,22 @@ class TreeViewComponent {
2678
2603
  }
2679
2604
  }
2680
2605
  /**
2681
- * Based on the specified index, returns the TreeItemLookup node.
2606
+ * Returns the `TreeItemLookup` node for the specified index.
2682
2607
  *
2683
2608
  * @param index - The index of the node.
2684
- * @returns {TreeItemLookup} - The item that was searched (looked up).
2609
+ * @returns {TreeItemLookup} - The looked up item.
2685
2610
  */
2686
2611
  itemLookup(index) {
2687
2612
  return this.treeViewLookupService.itemLookup(index);
2688
2613
  }
2689
2614
  /**
2690
- * Triggers the [`children`]({% slug api_treeview_treeviewcomponent %}#toc-children) function for every expanded node,
2691
- * causing all rendered child nodes to be fetched again.
2615
+ * Calls the [`children`](slug:api_treeview_treeviewcomponent#children) function for every expanded node and fetches all rendered child nodes again.
2692
2616
  */
2693
2617
  rebindChildren() {
2694
2618
  this.dataChangeNotification.notify();
2695
2619
  }
2696
2620
  /**
2697
- * Triggers the `expand` event for the provided node and displays it's loading indicator.
2621
+ * Triggers the `expand` event for the provided node and shows its loading indicator.
2698
2622
  */
2699
2623
  expandNode(item, index) {
2700
2624
  this.expandService.expand(index, item);
@@ -2706,23 +2630,19 @@ class TreeViewComponent {
2706
2630
  this.expandService.collapse(index, item);
2707
2631
  }
2708
2632
  /**
2709
- * Gets the current page size of the checked data item children collection
2710
- * ([see example]({% slug loadmorebutton_treeview %}#toc-managing-page-sizes)).
2711
- *
2712
- * > Since the root nodes collection is not associated with any parent data item, pass `null` as `dataItem` param to get its page size.
2633
+ * Gets the current page size of the data item's children collection ([see example](slug:loadmorebutton_treeview#managing-page-sizes)).
2634
+ * Pass `null` as `dataItem` to get the root collection's page size.
2713
2635
  *
2714
2636
  * @param dataItem {any} - The parent data item of the targeted collection.
2715
- * @returns {number} - The page size of the checked data item children collection.
2637
+ * @returns {number} - The page size of the data item's children collection.
2716
2638
  */
2717
2639
  getNodePageSize(dataItem) {
2718
2640
  this.verifyLoadMoreService();
2719
2641
  return this.loadMoreService.getGroupSize(dataItem);
2720
2642
  }
2721
2643
  /**
2722
- * Sets the page size of the targeted data item children collection
2723
- * ([see example]({% slug loadmorebutton_treeview %}#toc-managing-page-sizes)).
2724
- *
2725
- * > Since the root nodes collection is not associated with any parent data item, pass `null` as `dataItem` param to target its page size.
2644
+ * Sets the page size of the data item's children collection ([see example](slug:loadmorebutton_treeview#managing-page-sizes)).
2645
+ * Pass `null` as `dataItem` to set the root collection's page size.
2726
2646
  *
2727
2647
  * @param dataItem {any} - The parent data item of the targeted collection.
2728
2648
  * @param pageSize {number} - The new page size.
@@ -3094,8 +3014,18 @@ const matchKey = index => k => {
3094
3014
  }, { key: "", result: false }).result;
3095
3015
  };
3096
3016
  /**
3097
- * A directive which manages the in-memory checked state of the TreeView node
3098
- * ([see example]({% slug checkboxes_treeview %})).
3017
+ * Represents a directive that manages the in-memory checked state of the TreeView node
3018
+ * ([see example](slug:checkboxes_treeview)).
3019
+ *
3020
+ * @example
3021
+ * ```html
3022
+ * <kendo-treeview
3023
+ * kendoTreeViewCheckable
3024
+ * checkBy="id"
3025
+ * [(checkedKeys)]="checkedKeys"
3026
+ * [nodes]="data">
3027
+ * </kendo-treeview
3028
+ * ```
3099
3029
  */
3100
3030
  class CheckDirective {
3101
3031
  treeView;
@@ -3107,21 +3037,22 @@ class CheckDirective {
3107
3037
  this.treeView.isChecked = value;
3108
3038
  }
3109
3039
  /**
3110
- * Defines the item key that will be stored in the `checkedKeys` collection.
3040
+ * Defines the item key stored in the `checkedKeys` collection.
3111
3041
  */
3112
3042
  checkKey;
3113
3043
  /**
3114
- * Defines the collection that will store the checked keys
3115
- * ([see example]({% slug checkboxes_treeview %})).
3044
+ * Defines the collection that stores the checked keys
3045
+ * ([see example](slug:checkboxes_treeview)).
3116
3046
  */
3117
3047
  checkedKeys;
3118
3048
  /**
3119
- * Defines the checkable settings ([see example]({% slug checkboxes_treeview %}#toc-setup)).
3120
- * If no value is provided, the default [`CheckableSettings`]({% slug api_treeview_checkablesettings %}) are applied.
3049
+ * Defines the checkable settings
3050
+ * ([see example](slug:checkboxes_treeview#setup)).
3051
+ * If you do not provide a value, the default [`CheckableSettings`](slug:api_treeview_checkablesettings) apply.
3121
3052
  */
3122
3053
  checkable;
3123
3054
  /**
3124
- * Fires when the `checkedKeys` collection was updated.
3055
+ * Fires when the `checkedKeys` collection updates.
3125
3056
  */
3126
3057
  checkedKeysChange = new EventEmitter();
3127
3058
  subscriptions = new Subscription();
@@ -3146,7 +3077,7 @@ class CheckDirective {
3146
3077
  'single': (e) => this.checkSingle(e)
3147
3078
  };
3148
3079
  /**
3149
- * Reflectes the internal `checkedKeys` state.
3080
+ * Reflects the internal `checkedKeys` state.
3150
3081
  */
3151
3082
  state = new Set();
3152
3083
  clickSubscription;
@@ -3386,7 +3317,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
3386
3317
  }] } });
3387
3318
 
3388
3319
  /**
3389
- * A directive which manages the disabled in-memory state of the TreeView node
3320
+ * Represents a directive which manages the disabled in-memory state of the TreeView node
3390
3321
  * ([see example]({% slug disabledstate_treeview %})).
3391
3322
  */
3392
3323
  class DisableDirective {
@@ -3447,19 +3378,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
3447
3378
  }] } });
3448
3379
 
3449
3380
  /**
3450
- * A directive which enables the update of the initially provided data array during drag-and-drop.
3381
+ * Represents the directive that enables you to update the initially provided data array during drag-and-drop.
3382
+ *
3383
+ * Use this directive with one of the data-binding directives ([`kendoTreeViewHierarchyBinding`](slug:api_treeview_hierarchybindingdirective)
3384
+ * or [`kendoTreeViewFlatDataBinding`](slug:api_treeview_flatdatabindingdirective)), which set their own edit handlers, or provide
3385
+ * your own [`editService`](slug:api_treeview_editservice) to this directive.
3451
3386
  *
3452
- * Either use this directive in combination with one of the data binding directives ([`kendoTreeViewHierarchyBinding`]({% slug api_treeview_hierarchybindingdirective %})
3453
- * or [`kendoTreeViewFlatDataBinding`]({% slug api_treeview_flatdatabindingdirective %})) which set their own edit handlers, or provide
3454
- * your own [`editService`]({% slug api_treeview_editservice %}) to this directive. The latter subscribes to and calls the
3455
- * [`addItem`]({% slug api_treeview_treeviewcomponent %}#toc-additem) and [`removeItem`]({% slug api_treeview_treeviewcomponent %}#toc-removeitem)
3456
- * handlers when the corresponding events are triggered by the TreeView component.
3387
+ * Providing a custom `editService` allows you to handle the
3388
+ * [`addItem`](slug:api_treeview_treeviewcomponent#additem) and [`removeItem`](slug:api_treeview_treeviewcomponent#removeitem)
3389
+ * events when they are triggered by the TreeView component.
3390
+ *
3391
+ * @example
3392
+ * ```html
3393
+ * <kendo-treeview
3394
+ * kendoTreeViewDragAndDrop
3395
+ * kendoTreeViewDragAndDropEditing
3396
+ * [nodes]="nodes"
3397
+ * textField="text">
3398
+ * </kendo-treeview>
3399
+ * ```
3457
3400
  */
3458
3401
  class DragAndDropEditingDirective {
3459
3402
  treeview;
3460
3403
  /**
3461
- * Specifies the handlers called on drag-and-drop [`addItem`]({% slug api_treeview_treeviewcomponent %}#toc-additem)
3462
- * and [`removeItem`]({% slug api_treeview_treeviewcomponent %}#toc-removeitem) events.
3404
+ * Specifies the handlers called on drag-and-drop [`addItem`](slug:api_treeview_treeviewcomponent#additem)
3405
+ * and [`removeItem`](slug:api_treeview_treeviewcomponent#removeitem) events.
3463
3406
  */
3464
3407
  set editService(service) {
3465
3408
  this.treeview.editService = service;
@@ -3499,26 +3442,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
3499
3442
  }] } });
3500
3443
 
3501
3444
  /**
3502
- * Describes the attempted drop action during dragging.
3503
- * Passed as `action` value to the [`kendoTreeViewDragClueTemplate`]({% slug api_treeview_dragcluetemplatedirective %}) directive.
3445
+ * Represents the attempted drop action during dragging.
3446
+ * Passed as `action` value to the [`kendoTreeViewDragClueTemplate`](slug:api_treeview_dragcluetemplatedirective) directive.
3504
3447
  * By default, this value defines the rendered icon in the drag clue.
3505
3448
  */
3506
3449
  var DropAction;
3507
3450
  (function (DropAction) {
3451
+ /**
3452
+ * The dragged item is added as a child to the target node.
3453
+ */
3508
3454
  DropAction[DropAction["Add"] = 0] = "Add";
3455
+ /**
3456
+ * The dragged item is inserted above the target node at the same level.
3457
+ */
3509
3458
  DropAction[DropAction["InsertTop"] = 1] = "InsertTop";
3459
+ /**
3460
+ * The dragged item is inserted below the target node at the same level.
3461
+ */
3510
3462
  DropAction[DropAction["InsertBottom"] = 2] = "InsertBottom";
3463
+ /**
3464
+ * The dragged item is inserted in the middle position relative to the target node.
3465
+ */
3511
3466
  DropAction[DropAction["InsertMiddle"] = 3] = "InsertMiddle";
3467
+ /**
3468
+ * The drop action is not valid for the current target location.
3469
+ */
3512
3470
  DropAction[DropAction["Invalid"] = 4] = "Invalid";
3513
3471
  })(DropAction || (DropAction = {}));
3514
3472
 
3515
3473
  /**
3516
- * Describes where the dragged item is dropped relative to the drop target item.
3474
+ * Specifies where a dragged item is dropped relative to the target item.
3517
3475
  */
3518
3476
  var DropPosition;
3519
3477
  (function (DropPosition) {
3478
+ /**
3479
+ * The item is dropped over the target item.
3480
+ */
3520
3481
  DropPosition[DropPosition["Over"] = 0] = "Over";
3482
+ /**
3483
+ * The item is dropped before the target item.
3484
+ */
3521
3485
  DropPosition[DropPosition["Before"] = 1] = "Before";
3486
+ /**
3487
+ * The item is dropped after the target item.
3488
+ */
3522
3489
  DropPosition[DropPosition["After"] = 2] = "After";
3523
3490
  })(DropPosition || (DropPosition = {}));
3524
3491
 
@@ -3554,31 +3521,31 @@ class PreventableEvent {
3554
3521
  }
3555
3522
 
3556
3523
  /**
3557
- * Arguments for the TreeView [`nodeDrop`]({% slug api_treeview_treeviewcomponent %}#toc-nodedrop) event.
3524
+ * Arguments for the TreeView [`nodeDrop`](slug:api_treeview_treeviewcomponent#nodedrop) event.
3558
3525
  */
3559
3526
  class TreeItemDropEvent extends PreventableEvent {
3560
3527
  /**
3561
- * A reference of the TreeView from which the dragged item originates.
3528
+ * Reference to the TreeView from which the dragged item originates.
3562
3529
  */
3563
3530
  sourceTree;
3564
3531
  /**
3565
- * A reference of the TreeView onto which the dragged item is dropped.
3532
+ * Reference to the TreeView onto which the dragged item is dropped.
3566
3533
  */
3567
3534
  destinationTree;
3568
3535
  /**
3569
- * The look-up info for the dragged item.
3536
+ * Lookup information for the dragged item.
3570
3537
  */
3571
3538
  sourceItem;
3572
3539
  /**
3573
- * The look-up info for the item onto which the dragged item is dropped.
3540
+ * Lookup information for the item onto which the dragged item is dropped.
3574
3541
  */
3575
3542
  destinationItem;
3576
3543
  /**
3577
- * Describes where the dragged item is dropped relative to the drop target item.
3544
+ * Represents the drop position relative to the target item.
3578
3545
  */
3579
3546
  dropPosition;
3580
3547
  /**
3581
- * The original pointer event holding details about the current pointer position.
3548
+ * The original pointer event containing details about the pointer position.
3582
3549
  */
3583
3550
  originalEvent;
3584
3551
  /**
@@ -3594,10 +3561,9 @@ class TreeItemDropEvent extends PreventableEvent {
3594
3561
  this.originalEvent = originalEvent;
3595
3562
  }
3596
3563
  /**
3597
- * Specifies if the drop action should be marked as valid.
3598
- * If set to `false`, the [`addItem`]({% slug api_treeview_treeviewcomponent %}#toc-additem) and
3599
- * [`removeItem`]({% slug api_treeview_treeviewcomponent %}#toc-removeitem) events will not be fired and the drag clue
3600
- * will be animated back to the source item to indicate the action is marked as invalid.
3564
+ * Sets whether the drop action is valid.
3565
+ * If set to `false`, the `addItem` and `removeItem` events will not be fired and the drag clue
3566
+ * will animate back to the source item to indicate the action is invalid.
3601
3567
  */
3602
3568
  setValid(isValid) {
3603
3569
  this.isValid = isValid;
@@ -3605,15 +3571,15 @@ class TreeItemDropEvent extends PreventableEvent {
3605
3571
  }
3606
3572
 
3607
3573
  /**
3608
- * Arguments for the TreeView [`nodeDragStart`]({% slug api_treeview_treeviewcomponent %}#toc-nodedragstart) event.
3574
+ * Arguments for the TreeView [`nodeDragStart`](slug:api_treeview_treeviewcomponent#nodedragstart) event.
3609
3575
  */
3610
3576
  class TreeItemDragStartEvent extends PreventableEvent {
3611
3577
  /**
3612
- * The look-up info for the dragged item.
3578
+ * Lookup information for the dragged item.
3613
3579
  */
3614
3580
  sourceItem;
3615
3581
  /**
3616
- * The original pointer event holding details about the current pointer position.
3582
+ * The original pointer event containing details about the pointer position.
3617
3583
  */
3618
3584
  originalEvent;
3619
3585
  /**
@@ -3626,22 +3592,22 @@ class TreeItemDragStartEvent extends PreventableEvent {
3626
3592
  }
3627
3593
 
3628
3594
  /**
3629
- * Arguments for the TreeView [`nodeDrag`]({% slug api_treeview_treeviewcomponent %}#toc-nodedrag) and
3630
- * [`nodeDragEnd`]({% slug api_treeview_treeviewcomponent %}#toc-nodedragend) events.
3595
+ * Arguments for the TreeView [`nodeDrag`](slug:api_treeview_treeviewcomponent#nodedrag) and
3596
+ * [`nodeDragEnd`](slug:api_treeview_treeviewcomponent#nodedragend) events.
3631
3597
  */
3632
3598
  class TreeItemDragEvent {
3633
3599
  /** @hidden */
3634
3600
  constructor() { }
3635
3601
  /**
3636
- * The look-up info for the dragged item.
3602
+ * Lookup information for the dragged item.
3637
3603
  */
3638
3604
  sourceItem;
3639
3605
  /**
3640
- * The look-up info for the item that the dragged node is placed over if there is such.
3606
+ * Lookup information for the item currently under the dragged node, if any.
3641
3607
  */
3642
3608
  destinationItem;
3643
3609
  /**
3644
- * The original pointer event holding details about the current pointer position.
3610
+ * The original pointer event containing details about the pointer position.
3645
3611
  */
3646
3612
  originalEvent;
3647
3613
  }
@@ -4312,18 +4278,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
4312
4278
  }], ctorParameters: function () { return []; } });
4313
4279
 
4314
4280
  /**
4315
- * Represents the template for the TreeView drag clue when an item is dragged. To define the clue template,
4316
- * nest an `<ng-template>` tag with the `kendoTreeViewDragClueTemplate` directive inside a `<kendo-treeview>` tag
4317
- * ([see example]({% slug draganddrop_treeview %}#toc-templates)).
4318
- *
4281
+ * Represents the template for the TreeView drag clue when you drag an item.
4319
4282
  *
4320
- * The text, attempted drop action, source item and destination item are available as context variables in the template:
4283
+ * To define the drag clue template, nest an `<ng-template>` tag with the `kendoTreeViewDragClueTemplate` directive inside a `<kendo-treeview>` tag
4284
+ * ([see example](slug:draganddrop_treeview#toc-templates)).
4321
4285
  *
4286
+ * The template context provides the following variables:
4287
+ * - `let-text="text"` (`string`)&mdash;The display text of the item being dragged.
4288
+ * - `let-action="action"` ([`DropAction`](slug:api_treeview_dropaction))&mdash;The type of drop action that will occur.
4289
+ * - `let-sourceItem="sourceItem"` ([`TreeItemLookup`](slug:api_treeview_treeitemlookup))&mdash;The TreeView item that is being dragged from its original position.
4290
+ * - `let-destinationItem="destinationItem"` ([`TreeItemLookup`](slug:api_treeview_treeitemlookup))&mdash;The TreeView item that serves as the target for the drop operation.
4322
4291
  *
4323
- * - `let-text="text"` (`string`)
4324
- * - `let-action="action"` ([`DropAction`]({% slug api_treeview_dropaction %}))
4325
- * - `let-sourceItem="sourceItem"` ([`TreeItemLookup`]({% slug api_treeview_treeitemlookup %}))
4326
- * - `let-destinationItem="destinationItem"` ([`TreeItemLookup`]({% slug api_treeview_treeitemlookup %}))
4292
+ * @example
4293
+ * ```html
4294
+ * <kendo-treeview>
4295
+ * <ng-template kendoTreeViewDragClueTemplate let-text="text">
4296
+ * Dragging: {{ text }}
4297
+ * </ng-template>
4298
+ * </kendo-treeview>
4299
+ * ```
4327
4300
  */
4328
4301
  class DragClueTemplateDirective {
4329
4302
  templateRef;
@@ -4344,15 +4317,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
4344
4317
  }] }]; } });
4345
4318
 
4346
4319
  /**
4347
- * Represents the template for the TreeView drop hint when an item is dragged. To define the hint template,
4348
- * nest an `<ng-template>` tag with the `kendoTreeViewDropHintTemplate` directive inside a `<kendo-treeview>` tag
4349
- * ([see example]({% slug draganddrop_treeview %}#toc-templates)).
4320
+ * Represents the template for the TreeView drop hint when you drag an item.
4321
+ *
4322
+ * To define the hint template, nest an `<ng-template>` tag with the `kendoTreeViewDropHintTemplate` directive inside a `<kendo-treeview>` tag
4323
+ * ([see example](slug:draganddrop_treeview#toc-templates)).
4350
4324
  *
4351
- * The attempted drop action, source item and destination item are available as context variables in the template:
4325
+ * The template context provides the following variables:
4326
+ * - `let-action="action"` ([`DropAction`](slug:api_treeview_dropaction))&mdash;The drop action being performed.
4327
+ * - `let-sourceItem="sourceItem"` ([`TreeItemLookup`](slug:api_treeview_treeitemlookup))&mdash;The item being dragged.
4328
+ * - `let-destinationItem="destinationItem"` ([`TreeItemLookup`](slug:api_treeview_treeitemlookup))&mdash;The target item for the drop operation.
4352
4329
  *
4353
- * - `let-action="action"` ([`DropAction`]({% slug api_treeview_dropaction %}))
4354
- * - `let-sourceItem="sourceItem"` ([`TreeItemLookup`]({% slug api_treeview_treeitemlookup %}))
4355
- * - `let-destinationItem="destinationItem"` ([`TreeItemLookup`]({% slug api_treeview_treeitemlookup %}))
4330
+ * @example
4331
+ * ```html
4332
+ * <kendo-treeview>
4333
+ * <ng-template kendoTreeViewDropHintTemplate let-action="action">
4334
+ * Drop action: {{ action }}
4335
+ * </ng-template>
4336
+ * </kendo-treeview>
4337
+ * ```
4356
4338
  */
4357
4339
  class DropHintTemplateDirective {
4358
4340
  templateRef;
@@ -4378,16 +4360,25 @@ const DEFAULT_SCROLL_SETTINGS = {
4378
4360
  interval: 1
4379
4361
  };
4380
4362
  /**
4381
- * A directive which enables the dragging and dropping items inside the current TreeView or between multiple linked TreeView component instances
4382
- * ([see example]({% slug draganddrop_treeview %})).
4363
+ * Represents the directive that enables you to drag and drop items inside the current TreeView or between multiple linked TreeView component instances
4364
+ * ([see example](slug:draganddrop_treeview)).
4365
+ *
4366
+ * Triggers the [`nodeDragStart`](slug:api_treeview_treeviewcomponent#nodedragstart),
4367
+ * [`nodeDrag`](slug:api_treeview_treeviewcomponent#nodedrag),
4368
+ * [`nodeDrop`](slug:api_treeview_treeviewcomponent#nodedrop),
4369
+ * [`nodeDragEnd`](slug:api_treeview_treeviewcomponent#nodedragend),
4370
+ * [`addItem`](slug:api_treeview_treeviewcomponent#additem) and
4371
+ * [`removeItem`](slug:api_treeview_treeviewcomponent#removeitem)
4372
+ * events when you perform the corresponding actions.
4383
4373
  *
4384
- * Triggers the [`nodeDragStart`]({% slug api_treeview_treeviewcomponent %}#toc-nodedragstart),
4385
- * [`nodeDrag`]({% slug api_treeview_treeviewcomponent %}#toc-nodedrag),
4386
- * [`nodeDrop`]({% slug api_treeview_treeviewcomponent %}#toc-nodedrop),
4387
- * [`nodeDragEnd`]({% slug api_treeview_treeviewcomponent %}#toc-nodedragend),
4388
- * [`addItem`]({% slug api_treeview_treeviewcomponent %}#toc-additem) and
4389
- * [`removeItem`]({% slug api_treeview_treeviewcomponent %}#toc-removeitem)
4390
- * events when the corresponding actions occur on the respective TreeView instance.
4374
+ * @example
4375
+ * ```html
4376
+ * <kendo-treeview
4377
+ * kendoTreeViewDragAndDrop
4378
+ * [dropZoneTreeViews]="treeView"
4379
+ * >
4380
+ * </kendo-treeview>
4381
+ * ```
4391
4382
  */
4392
4383
  class DragAndDropDirective {
4393
4384
  element;
@@ -4396,31 +4387,31 @@ class DragAndDropDirective {
4396
4387
  dragClueService;
4397
4388
  dropHintService;
4398
4389
  /**
4399
- * Specifies whether the `removeItem` event will be fired after an item is dropped when the `ctrl` key is pressed.
4400
- * If enabled, the `removeItem` event will not be fired on the source TreeView
4401
- * ([see example]({% slug draganddrop_treeview %}#toc-multiple-treeviews)).
4390
+ * Specifies whether the `removeItem` event fires after the user drops an item while pressing the `ctrl` key.
4391
+ * If enabled, the `removeItem` event does not fire on the source TreeView
4392
+ * ([see example](slug:draganddrop_treeview#multiple-treeviews)).
4402
4393
  *
4403
4394
  * @default false
4404
4395
  */
4405
4396
  allowCopy = false;
4406
4397
  /**
4407
- * Specifes the TreeViewComponent instances into which dragged items from the current TreeViewComponent can be dropped
4408
- * ([see example]({% slug draganddrop_treeview %}#toc-multiple-treeviews)).
4398
+ * Specifies the `TreeViewComponent` instances into which the user can drop dragged items from the current `TreeViewComponent`
4399
+ * ([see example](slug:draganddrop_treeview#multiple-treeviews)).
4409
4400
  */
4410
4401
  dropZoneTreeViews = [];
4411
4402
  /**
4412
- * Specifies the distance in pixels from the initial item pointerdown event, before the dragging is initiated.
4413
- * The `nodeDragStart` and all consequent TreeView drag events will not be fired until the actual dragging begins.
4403
+ * Specifies the distance in pixels from the initial item `pointerdown` event before dragging starts.
4404
+ * The `nodeDragStart` and all subsequent TreeView drag events do not fire until dragging begins.
4414
4405
  *
4415
4406
  * @default 5
4416
4407
  */
4417
4408
  startDragAfter = 5;
4418
4409
  /**
4419
- * Controlls the auto-scrolling behavior during drag-and-drop ([see example]({% slug draganddrop_treeview %}#toc-auto-scrolling)).
4420
- * Enbaled by default. To turn the auto-scrolling off, set this prop to `false`.
4410
+ * Controls the auto-scrolling behavior during drag-and-drop ([see example](slug:draganddrop_treeview#auto-scrolling)).
4411
+ * Enabled by default. To turn off auto-scrolling, set this property to `false`.
4421
4412
  *
4422
- * By default, the scrolling will be performed by 1 pixel at every 1 millisecond, when the dragged item reaches the top or the bottom of the scrollable container.
4423
- * The `step` and `interval` can be overridden by providing a `DragAndDropScrollSettings` object to this prop.
4413
+ * By default, scrolling occurs by 1 pixel every 1 millisecond when the dragged item reaches the top or bottom of the scrollable container.
4414
+ * You can override the `step` and `interval` by providing a `DragAndDropScrollSettings` object.
4424
4415
  *
4425
4416
  * @default true
4426
4417
  */
@@ -4696,8 +4687,19 @@ const DEFAULT_FILTER_EXPAND_SETTINGS = {
4696
4687
  expandedOnClear: "none"
4697
4688
  };
4698
4689
  /**
4699
- * A directive which manages the expanded state of the TreeView.
4700
- * ([see example]({% slug expandedstate_treeview %})).
4690
+ * Represents a directive that manages the expanded state of the TreeView
4691
+ * ([see example](slug:expandedstate_treeview)).
4692
+ *
4693
+ * @example
4694
+ * ```html
4695
+ * <kendo-treeview
4696
+ * kendoTreeViewExpandable
4697
+ * expandBy="id"
4698
+ * [(expandedKeys)]="expandedKeys"
4699
+ * [expandOnFilter]="true"
4700
+ * [nodes]="data">
4701
+ * </kendo-treeview>
4702
+ * ```
4701
4703
  */
4702
4704
  class ExpandDirective {
4703
4705
  component;
@@ -4708,12 +4710,12 @@ class ExpandDirective {
4708
4710
  this.component.isExpanded = value;
4709
4711
  }
4710
4712
  /**
4711
- * Defines the item key that will be stored in the `expandedKeys` collection.
4713
+ * Defines the item key stored in the `expandedKeys` collection.
4712
4714
  */
4713
4715
  expandKey;
4714
4716
  /**
4715
- * Whether or not to auto-expand the nodes leading from the root node to each filter result.
4716
- * To fine-tune this behavior, pass a [`FilterExpandSettings`]({% slug api_treeview_filterexpandsettings %}) object to this input.
4717
+ * Specifies whether to auto-expand the nodes leading from the root node to each filter result.
4718
+ * To fine-tune this behavior, pass a [`FilterExpandSettings`](slug:api_treeview_filterexpandsettings) object to this input.
4717
4719
  * @default false
4718
4720
  */
4719
4721
  expandOnFilter = false;
@@ -4722,16 +4724,16 @@ class ExpandDirective {
4722
4724
  return Object.assign({}, DEFAULT_FILTER_EXPAND_SETTINGS, settings);
4723
4725
  }
4724
4726
  /**
4725
- * Fires when the `expandedKeys` collection was updated.
4727
+ * Fires when the `expandedKeys` collection updates.
4726
4728
  */
4727
4729
  expandedKeysChange = new EventEmitter();
4728
4730
  /**
4729
- * Defines the collection that will store the expanded keys.
4731
+ * Defines the collection that stores the expanded keys.
4730
4732
  */
4731
4733
  expandedKeys;
4732
4734
  subscriptions = new Subscription();
4733
4735
  /**
4734
- * Reflectes the internal `expandedKeys` state.
4736
+ * Reflects the internal `expandedKeys` state.
4735
4737
  */
4736
4738
  state = new Set();
4737
4739
  originalExpandedKeys = new Set();
@@ -5171,12 +5173,27 @@ const mapToTree = (currentLevelNodes, allNodes, parentIdField, idField, parent =
5171
5173
  });
5172
5174
  };
5173
5175
  /**
5174
- * A directive which encapsulates the retrieval of the child nodes.
5176
+ * Represents a directive that handles flat data binding and provides built-in filtering functionality for the TreeView.
5177
+ *
5178
+ * Use this directive to bind flat data where parent-child relationships are defined by ID fields.
5179
+ * The directive also enables the built-in filter input and automatic filter handling when used with the `filterable` property.
5180
+ *
5181
+ * @example
5182
+ * ```html
5183
+ * <kendo-treeview
5184
+ * kendoTreeViewFlatDataBinding
5185
+ * idField="id"
5186
+ * parentIdField="parentId"
5187
+ * textField="text"
5188
+ * [nodes]="data"
5189
+ * [filterable]="true">
5190
+ * </kendo-treeview>
5191
+ * ```
5175
5192
  */
5176
5193
  class FlatDataBindingDirective extends FilteringBase {
5177
5194
  component;
5178
5195
  /**
5179
- * The nodes which will be displayed by the TreeView.
5196
+ * Specifies the flat data collection that renders as nodes in the TreeView.
5180
5197
  */
5181
5198
  set nodes(nodes) {
5182
5199
  // Needs to be a setter so that it can be accessed via `super` call (typescript v5)
@@ -5187,11 +5204,11 @@ class FlatDataBindingDirective extends FilteringBase {
5187
5204
  }
5188
5205
  _nodes;
5189
5206
  /**
5190
- * Represents the parent field whose value will be matched with the parent node.
5207
+ * Specifies the field name that contains the parent node identifier.
5191
5208
  */
5192
5209
  parentIdField;
5193
5210
  /**
5194
- * Represents the unique field which identifies a node.
5211
+ * Specifies the field name that contains the unique node identifier.
5195
5212
  */
5196
5213
  idField;
5197
5214
  /**
@@ -5382,13 +5399,27 @@ const mapToWrappers = (currentLevelNodes, childrenField, parent = null, parentIn
5382
5399
  });
5383
5400
  };
5384
5401
  /**
5385
- * A directive which encapsulates the retrieval of child nodes.
5402
+ * Represents a directive that handles hierarchical data binding and provides built-in filtering functionality for the TreeView.
5403
+ *
5404
+ * Use this directive to bind hierarchical data where child nodes are nested within parent nodes.
5405
+ * The directive also enables the built-in filter input and automatic filter handling when used with the `filterable` property.
5406
+ *
5407
+ * @example
5408
+ * ```html
5409
+ * <kendo-treeview
5410
+ * kendoTreeViewHierarchyBinding
5411
+ * childrenField="items"
5412
+ * textField="text"
5413
+ * [nodes]="data"
5414
+ * [filterable]="true">
5415
+ * </kendo-treeview>
5416
+ * ```
5386
5417
  */
5387
5418
  class HierarchyBindingDirective extends FilteringBase {
5388
5419
  component;
5389
5420
  dragAndDropDirective;
5390
5421
  /**
5391
- * The field name which holds the data items of the child component.
5422
+ * Specifies the field name of the parent node that holds the child data items.
5392
5423
  */
5393
5424
  set childrenField(value) {
5394
5425
  if (!value) {
@@ -5397,13 +5428,13 @@ class HierarchyBindingDirective extends FilteringBase {
5397
5428
  this._childrenField = value;
5398
5429
  }
5399
5430
  /**
5400
- * The field name which holds the data items of the child component.
5431
+ * Specifies the field name of the parent node that holds the child data items.
5401
5432
  */
5402
5433
  get childrenField() {
5403
5434
  return this._childrenField;
5404
5435
  }
5405
5436
  /**
5406
- * The nodes which will be displayed by the TreeView.
5437
+ * Specifies the hierarchical data displayed by the TreeView.
5407
5438
  */
5408
5439
  set nodes(nodes) {
5409
5440
  // Needs to be a setter so that it can be accessed via `super` call (typescript v5)
@@ -5496,15 +5527,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
5496
5527
 
5497
5528
  const LOAD_MORE_DOC_LINK = 'https://www.telerik.com/kendo-angular-ui/components/treeview/load-more-button/';
5498
5529
  /**
5499
- * A directive that enables the display of only a limited amount of nodes per level
5500
- * ([see example]({% slug loadmorebutton_treeview %})).
5530
+ * Represents the directive that enables you to display only a limited number of nodes per level
5531
+ * ([see example](slug:loadmorebutton_treeview)).
5532
+ *
5533
+ * @example
5534
+ * ```html
5535
+ * <kendo-treeview
5536
+ * ...
5537
+ * kendoTreeViewLoadMore
5538
+ * [pageSize]="10"
5539
+ * [totalRootNodes]="100"
5540
+ * totalField="totalChildren">
5541
+ * </kendo-treeview>
5542
+ * ```
5501
5543
  */
5502
5544
  class LoadMoreDirective {
5503
5545
  treeview;
5504
5546
  /**
5505
- * Specifies the callback that will be called when the load more button is clicked.
5506
- * Providing a function is only required when additional nodes are fetched on demand
5507
- * ([see example]({% slug loadmorebutton_treeview %}#toc-remote-data)).
5547
+ * Sets the callback function that runs when the load more button is clicked.
5548
+ * Provide a function when you fetch additional nodes on demand
5549
+ * ([see example](slug:loadmorebutton_treeview#remote-data)).
5550
+ *
5508
5551
  */
5509
5552
  set loadMoreNodes(loadMoreNodes) {
5510
5553
  if (typeof loadMoreNodes === 'string') {
@@ -5513,20 +5556,20 @@ class LoadMoreDirective {
5513
5556
  this.treeview.loadMoreService.loadMoreNodes = loadMoreNodes;
5514
5557
  }
5515
5558
  /**
5516
- * Specifies the initial number of nodes that will be rendered on each level.
5517
- * Every time the load more button is clicked, the data item page size will be incremented with this number.
5559
+ * Sets the initial number of nodes to render on each level.
5560
+ * Each time the load more button is clicked, the page size increases by this number.
5518
5561
  */
5519
5562
  pageSize;
5520
5563
  /**
5521
- * Specifies the total number of root nodes.
5522
- * Used when additional nodes are fetched on demand
5523
- * ([see example]({% slug loadmorebutton_treeview %}#toc-remote-data)).
5564
+ * Sets the total number of root nodes.
5565
+ * Use this property when you fetch additional nodes on demand
5566
+ * ([see example](slug:loadmorebutton_treeview#remote-data)).
5524
5567
  */
5525
5568
  totalRootNodes;
5526
5569
  /**
5527
- * Specifies which field holds information about the total number of child nodes of the data item.
5528
- * Used when additional nodes are fetched on demand
5529
- * ([see example]({% slug loadmorebutton_treeview %}#toc-remote-data)).
5570
+ * Sets the field that contains the total number of child nodes for the data item.
5571
+ * Use this property when you fetch additional nodes on demand
5572
+ * ([see example](slug:loadmorebutton_treeview#remote-data)).
5530
5573
  */
5531
5574
  totalField;
5532
5575
  /**
@@ -5608,7 +5651,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
5608
5651
  }] } });
5609
5652
 
5610
5653
  /**
5611
- * Custom component messages override default component messages
5654
+ * Represents the custom messages component of the TreeView.
5655
+ *
5656
+ * Use this component to override default messages for the TreeView.
5657
+ *
5658
+ * @example
5659
+ * ```html
5660
+ * <kendo-treeview-messages
5661
+ * loadMore="Load more items">
5662
+ * </kendo-treeview-messages>
5663
+ * ```
5612
5664
  */
5613
5665
  class CustomMessagesComponent extends TreeViewMessages {
5614
5666
  service;
@@ -5643,8 +5695,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
5643
5695
  }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
5644
5696
 
5645
5697
  /**
5646
- * A directive which manages the in-memory selection state of the TreeView node
5647
- * ([see example]({% slug selection_treeview %})).
5698
+ * Manages the in-memory selection state of TreeView nodes
5699
+ * ([see example](slug:selection_treeview)).
5700
+ *
5701
+ * @example
5702
+ * ```html
5703
+ * <kendo-treeview
5704
+ * ...
5705
+ * kendoTreeViewSelectable
5706
+ * selectBy="id"
5707
+ * [(selectedKeys)]="selectedKeys"
5708
+ * >
5709
+ * </kendo-treeview>
5710
+ * ```
5648
5711
  */
5649
5712
  class SelectDirective {
5650
5713
  treeView;
@@ -5656,21 +5719,21 @@ class SelectDirective {
5656
5719
  this.treeView.isSelected = value;
5657
5720
  }
5658
5721
  /**
5659
- * Defines the item key that will be stored in the `selectedKeys` collection.
5722
+ * Sets the item key stored in the `selectedKeys` collection.
5660
5723
  */
5661
5724
  selectKey;
5662
5725
  /**
5663
- * Defines the current selection mode
5664
- * ([see example](slug:selection_treeview#toc-modes)).
5726
+ * Sets the current selection mode
5727
+ * ([see example](slug:selection_treeview#modes)).
5665
5728
  */
5666
5729
  selection;
5667
5730
  /**
5668
- * Defines the collection that will store the selected keys
5731
+ * Defines the collection that stores the selected keys
5669
5732
  * ([see example](slug:selection_treeview#toc-modes)).
5670
5733
  */
5671
5734
  selectedKeys;
5672
5735
  /**
5673
- * Fires when the `selectedKeys` collection was updated.
5736
+ * Emits when the `selectedKeys` collection updates.
5674
5737
  */
5675
5738
  selectedKeysChange = new EventEmitter();
5676
5739
  get getAriaMultiselectable() {
@@ -5693,7 +5756,7 @@ class SelectDirective {
5693
5756
  'single': (e) => this.selectSingle(e)
5694
5757
  };
5695
5758
  /**
5696
- * Reflectes the internal `selectedKeys` state.
5759
+ * Reflects the internal `selectedKeys` state.
5697
5760
  */
5698
5761
  state = new Set();
5699
5762
  /**
@@ -5791,7 +5854,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
5791
5854
  }] } });
5792
5855
 
5793
5856
  /**
5794
- * Utility array that contains all `@progress/kendo-angular-treeview` related components and directives
5857
+ * Use the `KENDO_TREEVIEW ` utility array to add all `@progress/kendo-angular-treeview` related components and directives to a standalone Angular component.
5858
+ *
5859
+ * @example
5860
+ * ```typescript
5861
+ * import { Component } from '@angular/core';
5862
+ * import { KENDO_TREEVIEW } from '@progress/kendo-angular-treeview';
5863
+ *
5864
+ * @Component({
5865
+ * selector: 'my-app',
5866
+ * standalone: true,
5867
+ * imports: [KENDO_TREEVIEW],
5868
+ * template: `<kendo-treeview></kendo-treeview>`
5869
+ * })
5870
+ * export class AppComponent {}
5871
+ * ```
5795
5872
  */
5796
5873
  const KENDO_TREEVIEW = [
5797
5874
  TreeViewComponent,
@@ -5814,6 +5891,21 @@ const KENDO_TREEVIEW = [
5814
5891
  //IMPORTANT: NgModule export kept for backwards compatibility
5815
5892
  /**
5816
5893
  * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi']) definition for the TreeView component.
5894
+ *
5895
+ * @example
5896
+ * ```ts
5897
+ * import { NgModule } from '@angular/core';
5898
+ * import { BrowserModule } from '@angular/platform-browser';
5899
+ * import { TreeViewModule } from '@progress/kendo-angular-treeview';
5900
+ * import { AppComponent } from './app.component';
5901
+ *
5902
+ * @NgModule({
5903
+ * imports: [BrowserModule, TreeViewModule],
5904
+ * declarations: [AppComponent],
5905
+ * bootstrap: [AppComponent]
5906
+ * })
5907
+ * export class AppModule {}
5908
+ * ```
5817
5909
  */
5818
5910
  class TreeViewModule {
5819
5911
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TreeViewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });