@progress/kendo-angular-treeview 22.1.0-develop.8 → 23.0.0-develop.1

package/fesm2022/progress-kendo-angular-treeview.mjs

@@ -10,11 +10,11 @@ import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/k
 import { Subject, Subscription, of, EMPTY, BehaviorSubject, merge } from 'rxjs';
 import { validatePackage } from '@progress/kendo-licensing';
 import { getter, setter } from '@progress/kendo-common';
-import { caretAltDownIcon, caretAltRightIcon, caretAltLeftIcon, searchIcon, cancelIcon, insertMiddleIcon, insertBottomIcon, insertTopIcon, plusIcon } from '@progress/kendo-svg-icons';
+import { chevronDownIcon, chevronRightIcon, chevronLeftIcon, searchIcon, cancelIcon, insertMiddleIcon, insertBottomIcon, insertTopIcon, plusIcon } from '@progress/kendo-svg-icons';
 import { CheckBoxComponent, TextBoxComponent, TextBoxPrefixTemplateDirective } from '@progress/kendo-angular-inputs';
 import { trigger, transition, style, animate } from '@angular/animations';
 import { filter, tap, switchMap, delay, takeUntil, catchError, finalize, take, map } from 'rxjs/operators';
-import { NgClass, NgTemplateOutlet } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
 import { IconWrapperComponent, IconsService } from '@progress/kendo-angular-icons';
 import { Draggable } from '@progress/kendo-draggable';
 import { DialogContainerService, DialogService, WindowService, WindowContainerService } from '@progress/kendo-angular-dialog';
@@ -29,7 +29,7 @@ const packageMetadata = {
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
     publishDate: 0,
-    version: '22.1.0-develop.8',
+    version: '23.0.0-develop.1',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -223,16 +223,25 @@ const isFocusable = (element) => {
  * @hidden
  */
 const isContent = (element) => {
-    const scopeSelector = '.k-treeview-leaf:not(.k-treeview-load-more-button),.k-treeview-item,.k-treeview';
+    const scopeSelector = '.k-treeview-leaf:not(.k-treeview-load-more-button),.k-treeview-item-content,.k-treeview-item,.k-treeview';
     if (!isDocumentAvailable()) {
         return null;
     }
+    if (closestWithMatch(element, '.k-treeview-toggle')) {
+        return false;
+    }
+    if (closestWithMatch(element, 'kendo-checkbox') || (element.tagName?.toLowerCase() === 'input' && element.type === 'checkbox')) {
+        return false;
+    }
     let node = element;
     while (node && !match(node, scopeSelector)) {
         node = node.parentNode;
     }
     if (node) {
-        return match(node, '.k-treeview-leaf:not(.k-treeview-load-more-button)');
+        if (isLoadMoreButton(element)) {
+            return false;
+        }
+        return match(node, '.k-treeview-leaf:not(.k-treeview-load-more-button)') || match(node, '.k-treeview-item-content');
     }
 };
 /**
@@ -833,7 +842,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
         }] });
 
 /**
- * Represents the template for TreeView nodes ([more information and example](slug:nodetemplate_treeview)).
+ * Represents the template for TreeView nodes ([more information and example](https://www.telerik.com/kendo-angular-ui/components/treeview/node-template)).
  *
  * Use this template to customize the content of the nodes. To define the node template, nest an `<ng-template>`
  * tag with the `kendoTreeViewNodeTemplate` directive inside a `<kendo-treeview>` tag.
@@ -876,7 +885,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
  * Represents a directive for customizing the load more button in the TreeView.
  *
  * To define the template, nest an `<ng-template>` tag with the `kendoTreeViewLoadMoreButtonTemplate` directive inside a `<kendo-treeview>` tag
- * ([see example](slug:loadmorebutton_treeview#button-template)).
+ * ([see example](https://www.telerik.com/kendo-angular-ui/components/treeview/load-more-button#button-template)).
  *
  * The template context provides the following variable:
  * - `let-index="index"`&mdash;The hierarchical index of the load more button node.
@@ -1049,9 +1058,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
 /**
  * @hidden
  *
- * A directive which manages the expanded state of the TreeView.
+ * A directive which manages the states of the TreeView items.
  */
-class TreeViewItemContentDirective {
+class TreeViewItemContentWrapperDirective {
     element;
     navigationService;
     selectionService;
@@ -1097,13 +1106,13 @@ class TreeViewItemContentDirective {
         const action = addClass ? 'addClass' : 'removeClass';
         this.renderer[action](this.element.nativeElement, className);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TreeViewItemContentDirective, deps: [{ token: i0.ElementRef }, { token: NavigationService }, { token: SelectionService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.18", type: TreeViewItemContentDirective, isStandalone: true, selector: "[kendoTreeViewItemContent]", inputs: { dataItem: "dataItem", index: "index", initialSelection: "initialSelection", isSelected: "isSelected" }, usesOnChanges: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TreeViewItemContentWrapperDirective, deps: [{ token: i0.ElementRef }, { token: NavigationService }, { token: SelectionService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.18", type: TreeViewItemContentWrapperDirective, isStandalone: true, selector: "[kendoTreeViewItemContentWrapper]", inputs: { dataItem: "dataItem", index: "index", initialSelection: "initialSelection", isSelected: "isSelected" }, usesOnChanges: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TreeViewItemContentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TreeViewItemContentWrapperDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[kendoTreeViewItemContent]',
+                    selector: '[kendoTreeViewItemContentWrapper]',
                     standalone: true
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: NavigationService }, { type: SelectionService }, { type: i0.Renderer2 }], propDecorators: { dataItem: [{
@@ -1346,6 +1355,8 @@ class TreeViewItemDirective {
         service.updateItem(this.index, this.isDisabled, this.isVisible);
     }
     setAriaAttributes() {
+        // using renderer.setStyle is not suitable here as it does not add custom styles such as --kendo-treeview-level
+        this.element.nativeElement.style?.setProperty('--kendo-treeview-level', this.ib.level(this.index).toString());
         this.setAttribute('aria-level', this.ib.level(this.index).toString());
         // don't render attributes when the component configuration doesn't allow the specified state
         this.setAttribute('aria-expanded', this.expandable ? this.isExpanded.toString() : null);
@@ -1401,9 +1412,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 type: Input
             }] } });
 
-const TOP_ITEM = 'k-treeview-top';
-const MID_ITEM = 'k-treeview-mid';
-const BOT_ITEM = 'k-treeview-bot';
 /**
  * @hidden
  */
@@ -1421,15 +1429,15 @@ class TreeViewGroupComponent {
     /**
      * @hidden
      */
-    caretAltDownIcon = caretAltDownIcon;
+    chevronDownIcon = chevronDownIcon;
     /**
      * @hidden
      */
-    caretAltRightIcon = caretAltRightIcon;
+    chevronRightIcon = chevronRightIcon;
     /**
      * @hidden
      */
-    caretAltLeftIcon = caretAltLeftIcon;
+    chevronLeftIcon = chevronLeftIcon;
     /**
      * @hidden
      */
@@ -1453,16 +1461,25 @@ class TreeViewGroupComponent {
     nodeTemplateRef;
     loadMoreButtonTemplateRef;
     loadMoreService;
-    size = 'medium';
+    size = undefined;
     expandDisabledNodes;
     initialNodesLoaded = false;
     loadingMoreNodes = false;
     isItemExpandable = (node, index) => this.expandDisabledNodes || !this.isItemDisabled(node, index);
+    isContentDisabled(node, index) {
+        return this.expandIcons && this.hasChildren(node) ? !this.isItemExpandable(node, index) : this.isItemDisabled(node, index);
+    }
     getFontIcon(node, index) {
-        return this.isExpanded(node, index) ? 'caret-alt-down' : !this.localization.rtl ? 'caret-alt-right' : 'caret-alt-left';
+        if (this.isExpanded(node, index)) {
+            return 'chevron-down';
+        }
+        return this.localization.rtl ? 'chevron-left' : 'chevron-right';
     }
     getSvgIcon(node, index) {
-        return this.isExpanded(node, index) ? caretAltDownIcon : !this.localization.rtl ? caretAltRightIcon : caretAltLeftIcon;
+        if (this.isExpanded(node, index)) {
+            return chevronDownIcon;
+        }
+        return this.localization.rtl ? chevronLeftIcon : chevronRightIcon;
     }
     get moreNodesAvailable() {
         if (!isPresent(this.loadMoreService) || this.data.length === 0) {
@@ -1626,21 +1643,6 @@ class TreeViewGroupComponent {
     isItemDisabled(node, index) {
         return (this.disabled && !this.disableParentNodesOnly) || this.isDisabled(node, this.nodeIndex(index));
     }
-    /**
-     * @hidden
-     */
-    setItemClasses(dataLength, index) {
-        if (dataLength === 1) {
-            return this.parentIndex ? BOT_ITEM : `${TOP_ITEM} ${BOT_ITEM}`;
-        }
-        if (index === 0) {
-            return TOP_ITEM;
-        }
-        if (index > 0 && index < dataLength - 1) {
-            return MID_ITEM;
-        }
-        return index === this.totalNodesCount - 1 ? BOT_ITEM : MID_ITEM;
-    }
     loadMoreLocalNodes() {
         const initialLoadMoreButtonIndex = this.loadMoreButtonIndex;
         this.pageSize += this.loadMoreService.getInitialPageSize(this.parentDataItem);
@@ -1743,10 +1745,16 @@ class TreeViewGroupComponent {
             [isSelected]="isSelected(node, nodeIndex(index))"
             [attr.data-treeindex]="nodeIndex(index)"
             >
-            <div [ngClass]="setItemClasses(data.length, index)">
+
+            <div kendoTreeViewItemContentWrapper
+                [dataItem]="node"
+                [index]="nodeIndex(index)"
+                [initialSelection]="isSelected(node, nodeIndex(index))"
+                [isSelected]="isSelected"
+                class="k-treeview-item-content"
+                [class.k-disabled]="isContentDisabled(node, index)">
               @if (expandIcons && hasChildren(node)) {
                 <span
-                  [class.k-disabled]="!isItemExpandable(node, index)"
                   class="k-treeview-toggle"
                   [kendoTreeViewLoading]="nodeIndex(index)"
                   (click)="expandNode(nodeIndex(index), node, !isExpanded(node, nodeIndex(index)))"
@@ -1768,16 +1776,11 @@ class TreeViewGroupComponent {
                   [inputAttributes]="getCheckboxAttributes(index)"
                 ></kendo-checkbox>
               }
-              <span kendoTreeViewItemContent
+              <span
                 [id]="nodeIndex(index)"
                 [attr.data-treeindex]="nodeIndex(index)"
-                [dataItem]="node"
-                [index]="nodeIndex(index)"
-                [initialSelection]="isSelected(node, nodeIndex(index))"
-                [isSelected]="isSelected"
                 class="k-treeview-leaf"
                 [style.touch-action]="touchActions ? '' : 'none'"
-                [class.k-disabled]="isItemDisabled(node, index)"
                 >
                 <span class="k-treeview-leaf-text">
                   @switch (hasTemplate) {
@@ -1847,7 +1850,10 @@ class TreeViewGroupComponent {
             [parentIndex]="parentIndex"
             [attr.data-treeindex]="loadMoreButtonIndex"
             >
-            <div class="k-treeview-bot">
+            <div 
+                kendoTreeViewItemContentWrapper
+                [index]="loadMoreButtonIndex"
+                class="k-treeview-item-content">
               @if (loadingMoreNodes) {
                 <span
                   class="k-icon k-i-loading"
@@ -1857,8 +1863,6 @@ class TreeViewGroupComponent {
               <span
                 class="k-treeview-leaf k-treeview-load-more-button"
                 [attr.data-treeindex]="loadMoreButtonIndex"
-                kendoTreeViewItemContent
-                [index]="loadMoreButtonIndex"
                 >
                 <span class="k-treeview-leaf-text">
                   @if (loadMoreButtonTemplateRef) {
@@ -1878,7 +1882,7 @@ class TreeViewGroupComponent {
             </div>
           </li>
         }
-        `, isInline: true, dependencies: [{ 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"] }, { kind: "directive", type: TreeViewItemDirective, selector: "[kendoTreeViewItem]", inputs: ["dataItem", "index", "parentDataItem", "parentIndex", "role", "loadOnDemand", "checkable", "selectable", "expandable", "isChecked", "isDisabled", "isVisible", "isExpanded", "isSelected"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: LoadingIndicatorDirective, selector: "[kendoTreeViewLoading]", inputs: ["kendoTreeViewLoading"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: CheckBoxComponent, selector: "kendo-checkbox", inputs: ["checkedState", "rounded"], outputs: ["checkedStateChange"], exportAs: ["kendoCheckBox"] }, { kind: "directive", type: TreeViewItemContentDirective, selector: "[kendoTreeViewItemContent]", inputs: ["dataItem", "index", "initialSelection", "isSelected"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [
+        `, isInline: true, dependencies: [{ 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"] }, { kind: "directive", type: TreeViewItemDirective, selector: "[kendoTreeViewItem]", inputs: ["dataItem", "index", "parentDataItem", "parentIndex", "role", "loadOnDemand", "checkable", "selectable", "expandable", "isChecked", "isDisabled", "isVisible", "isExpanded", "isSelected"] }, { kind: "directive", type: LoadingIndicatorDirective, selector: "[kendoTreeViewLoading]", inputs: ["kendoTreeViewLoading"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: CheckBoxComponent, selector: "kendo-checkbox", inputs: ["checkedState", "rounded"], outputs: ["checkedStateChange"], exportAs: ["kendoCheckBox"] }, { kind: "directive", type: TreeViewItemContentWrapperDirective, selector: "[kendoTreeViewItemContentWrapper]", inputs: ["dataItem", "index", "initialSelection", "isSelected"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [
             trigger('toggle', [
                 transition('void => *', [
                     style({ height: 0 }),
@@ -1930,10 +1934,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
             [isSelected]="isSelected(node, nodeIndex(index))"
             [attr.data-treeindex]="nodeIndex(index)"
             >
-            <div [ngClass]="setItemClasses(data.length, index)">
+
+            <div kendoTreeViewItemContentWrapper
+                [dataItem]="node"
+                [index]="nodeIndex(index)"
+                [initialSelection]="isSelected(node, nodeIndex(index))"
+                [isSelected]="isSelected"
+                class="k-treeview-item-content"
+                [class.k-disabled]="isContentDisabled(node, index)">
               @if (expandIcons && hasChildren(node)) {
                 <span
-                  [class.k-disabled]="!isItemExpandable(node, index)"
                   class="k-treeview-toggle"
                   [kendoTreeViewLoading]="nodeIndex(index)"
                   (click)="expandNode(nodeIndex(index), node, !isExpanded(node, nodeIndex(index)))"
@@ -1955,16 +1965,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                   [inputAttributes]="getCheckboxAttributes(index)"
                 ></kendo-checkbox>
               }
-              <span kendoTreeViewItemContent
+              <span
                 [id]="nodeIndex(index)"
                 [attr.data-treeindex]="nodeIndex(index)"
-                [dataItem]="node"
-                [index]="nodeIndex(index)"
-                [initialSelection]="isSelected(node, nodeIndex(index))"
-                [isSelected]="isSelected"
                 class="k-treeview-leaf"
                 [style.touch-action]="touchActions ? '' : 'none'"
-                [class.k-disabled]="isItemDisabled(node, index)"
                 >
                 <span class="k-treeview-leaf-text">
                   @switch (hasTemplate) {
@@ -2034,7 +2039,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
             [parentIndex]="parentIndex"
             [attr.data-treeindex]="loadMoreButtonIndex"
             >
-            <div class="k-treeview-bot">
+            <div 
+                kendoTreeViewItemContentWrapper
+                [index]="loadMoreButtonIndex"
+                class="k-treeview-item-content">
               @if (loadingMoreNodes) {
                 <span
                   class="k-icon k-i-loading"
@@ -2044,8 +2052,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
               <span
                 class="k-treeview-leaf k-treeview-load-more-button"
                 [attr.data-treeindex]="loadMoreButtonIndex"
-                kendoTreeViewItemContent
-                [index]="loadMoreButtonIndex"
                 >
                 <span class="k-treeview-leaf-text">
                   @if (loadMoreButtonTemplateRef) {
@@ -2067,7 +2073,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
         }
         `,
                     standalone: true,
-                    imports: [TreeViewItemDirective, NgClass, LoadingIndicatorDirective, IconWrapperComponent, CheckBoxComponent, TreeViewItemContentDirective, NgTemplateOutlet]
+                    imports: [TreeViewItemDirective, LoadingIndicatorDirective, IconWrapperComponent, CheckBoxComponent, TreeViewItemContentWrapperDirective, NgTemplateOutlet]
                 }]
         }], ctorParameters: () => [{ type: ExpandStateService }, { type: LoadingNotificationService }, { type: IndexBuilderService }, { type: TreeViewLookupService }, { type: NavigationService }, { type: NodeChildrenService }, { type: DataChangeNotificationService }, { type: i0.ChangeDetectorRef }, { type: i1.LocalizationService }, { type: i0.Renderer2 }], propDecorators: { kGroupClass: [{
                 type: HostBinding,
@@ -2180,7 +2186,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
         }], ctorParameters: () => [{ type: i1.LocalizationService }] });
 
 let nextId = 0;
-const LOAD_MORE_DOC_LINK$1 = 'https://www.telerik.com/kendo-angular-ui/components/treeview/load-more-button/';
+const LOAD_MORE_DOC_LINK$1 = 'https://www.telerik.com/kendo-angular-ui/components/treeview/load-more-button';
 const providers = [
     ExpandStateService,
     IndexBuilderService,
@@ -2205,7 +2211,7 @@ const providers = [
     }
 ];
 /**
- * Represents the [Kendo UI TreeView component for Angular](slug:overview_treeview).
+ * Represents the [Kendo UI TreeView component for Angular](https://www.telerik.com/kendo-angular-ui/components/treeview).
  *
  * @example
  * ```html
@@ -2292,12 +2298,12 @@ class TreeViewComponent {
      */
     collapse = new EventEmitter();
     /**
-     * Fires just before node dragging starts ([see example](slug:draganddrop_treeview#setup)). This event is preventable.
+     * Fires just before node dragging starts ([see example](https://www.telerik.com/kendo-angular-ui/components/treeview/drag-and-drop#setup)). This event is preventable.
      * Prevent the default event to stop drag hint creation and further drag events.
      */
     nodeDragStart = new EventEmitter();
     /**
-     * Fires when an item is being dragged ([see example](slug:draganddrop_treeview#setup)).
+     * Fires when an item is being dragged ([see example](https://www.telerik.com/kendo-angular-ui/components/treeview/drag-and-drop#setup)).
      */
     nodeDrag = new EventEmitter();
     /**
@@ -2306,7 +2312,7 @@ class TreeViewComponent {
      */
     filterStateChange = new EventEmitter();
     /**
-     * Fires on the target TreeView when a dragged item is dropped ([see example](slug:draganddrop_treeview#setup)).
+     * Fires on the target TreeView when a dragged item is dropped ([see example](https://www.telerik.com/kendo-angular-ui/components/treeview/drag-and-drop#setup)).
      *
      * Prevent the default event (`event.preventDefault()`) or set the event as invalid (`event.setValid(false)`) to stop the `addItem` and `removeItem` events from triggering.
      *
@@ -2314,23 +2320,23 @@ class TreeViewComponent {
      */
     nodeDrop = new EventEmitter();
     /**
-     * Fires on the source TreeView after the dragged item is dropped ([see example](slug:draganddrop_treeview#setup)).
+     * Fires on the source TreeView after the dragged item is dropped ([see example](https://www.telerik.com/kendo-angular-ui/components/treeview/drag-and-drop#setup)).
      */
     nodeDragEnd = new EventEmitter();
     /**
-     * Fires after a dragged item is dropped ([see example](slug:draganddrop_treeview#setup)). Called on the TreeView where the item is dropped.
+     * Fires after a dragged item is dropped ([see example](https://www.telerik.com/kendo-angular-ui/components/treeview/drag-and-drop#setup)). Called on the TreeView where the item is dropped.
      */
     addItem = new EventEmitter();
     /**
-     * Fires after a dragged item is dropped ([see example](slug:draganddrop_treeview#setup)). Called on the TreeView from where the item is dragged.
+     * Fires after a dragged item is dropped ([see example](https://www.telerik.com/kendo-angular-ui/components/treeview/drag-and-drop#setup)). Called on the TreeView from where the item is dragged.
      */
     removeItem = new EventEmitter();
     /**
-     * Fires when a TreeView node checkbox is selected ([see example](slug:checkboxes_treeview#toc-modifying-the-checked-state)).
+     * Fires when a TreeView node checkbox is selected ([see example](https://www.telerik.com/kendo-angular-ui/components/treeview/checkboxes#modifying-the-checked-state)).
      */
     checkedChange = new EventEmitter();
     /**
-     * Fires when a TreeView node is selected ([see example](slug:selection_treeview#modifying-the-selection-behavior)).
+     * Fires when a TreeView node is selected ([see example](https://www.telerik.com/kendo-angular-ui/components/treeview/selection#modifying-the-selection-behavior)).
      */
     selectionChange = new EventEmitter();
     /**
@@ -2389,7 +2395,7 @@ class TreeViewComponent {
      */
     trackBy = trackBy;
     /**
-     * The nodes displayed by the TreeView ([see example](slug:databinding_treeview)).
+     * The nodes displayed by the TreeView ([see example](https://www.telerik.com/kendo-angular-ui/components/treeview/data-binding)).
      */
     set nodes(value) {
         this.data.next(value || []);
@@ -2399,12 +2405,12 @@ class TreeViewComponent {
         return this.data.value;
     }
     /**
-     * The fields of the data item that provide the text content of the nodes ([see example](slug:databinding_treeview)).
+     * The fields of the data item that provide the text content of the nodes ([see example](https://www.telerik.com/kendo-angular-ui/components/treeview/data-binding)).
      * If set to an array, each level uses the field at the same index or the last item in the array.
      */
     textField;
     /**
-     * A function that determines if a node has child nodes ([see example](slug:databinding_treeview)).
+     * A function that determines if a node has child nodes ([see example](https://www.telerik.com/kendo-angular-ui/components/treeview/data-binding)).
      */
     get hasChildren() {
         return this._hasChildren || hasChildren;
@@ -2414,7 +2420,7 @@ class TreeViewComponent {
         this.expandIcons = Boolean(this._isExpanded && this._hasChildren);
     }
     /**
-     * A function that determines if a node is checked ([see example](slug:checkboxes_treeview#toc-modifying-the-checked-state)).
+     * A function that determines if a node is checked ([see example](https://www.telerik.com/kendo-angular-ui/components/treeview/checkboxes#modifying-the-checked-state)).
      */
     get isChecked() {
         return this._isChecked || isChecked;
@@ -2442,7 +2448,7 @@ class TreeViewComponent {
         this.expandIcons = Boolean(this._isExpanded && this._hasChildren);
     }
     /**
-     * A function that determines if a node is selected ([see example](slug:selection_treeview#modifying-the-selection-behavior)).
+     * A function that determines if a node is selected ([see example](https://www.telerik.com/kendo-angular-ui/components/treeview/selection#modifying-the-selection-behavior)).
      */
     get isSelected() {
         return this._isSelected || isSelected;
@@ -2463,7 +2469,7 @@ class TreeViewComponent {
      */
     navigable = true;
     /**
-     * A function that provides the child nodes for a given parent node ([see example](slug:databinding_treeview)).
+     * A function that provides the child nodes for a given parent node ([see example](https://www.telerik.com/kendo-angular-ui/components/treeview/data-binding)).
      */
     children = () => of([]);
     /**
@@ -2473,8 +2479,8 @@ class TreeViewComponent {
      */
     loadOnDemand = true;
     /**
-     * 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).
-     * Built-in filtering is available with [`kendoTreeViewHierarchyBinding`](slug:api_treeview_hierarchybindingdirective) and [`kendoTreeViewFlatDataBinding`](slug:api_treeview_flatdatabindingdirective) directives.
+     * Renders the built-in input element for filtering. If `true`, emits the `filterChange` event that can be handled for [manual filtering](https://www.telerik.com/kendo-angular-ui/components/treeview/filtering#manual-filtering).
+     * Built-in filtering is available with [`kendoTreeViewHierarchyBinding`](https://www.telerik.com/kendo-angular-ui/components/treeview/api/hierarchybindingdirective) and [`kendoTreeViewFlatDataBinding`](https://www.telerik.com/kendo-angular-ui/components/treeview/api/flatdatabindingdirective) directives.
      *
      * @default false
      */
@@ -2486,14 +2492,15 @@ class TreeViewComponent {
     /**
      * Sets the size of the component.
      *
-     * @default 'medium'
+     * @default undefined
      */
     set size(size) {
-        const newSize = size ? size : 'medium';
-        if (this.size !== 'none') {
+        if (isPresent(this.size)) {
             this.renderer.removeClass(this.element.nativeElement, getSizeClass('treeview', this.size));
         }
-        this.renderer.addClass(this.element.nativeElement, getSizeClass('treeview', newSize));
+        if (isPresent(size)) {
+            this.renderer.addClass(this.element.nativeElement, getSizeClass('treeview', size));
+        }
         this._size = size;
     }
     get size() {
@@ -2534,7 +2541,7 @@ class TreeViewComponent {
     _hasChildren;
     _nodeTemplateRef;
     _loadMoreButtonTemplateRef;
-    _size = 'medium';
+    _size = undefined;
     subscriptions = new Subscription();
     domSubscriptions = [];
     _nextId = nextId;
@@ -2631,7 +2638,7 @@ class TreeViewComponent {
         return this.treeViewLookupService.itemLookup(index);
     }
     /**
-     * Calls the [`children`](slug:api_treeview_treeviewcomponent#children) function for every expanded node and fetches all rendered child nodes again.
+     * Calls the [`children`](https://www.telerik.com/kendo-angular-ui/components/treeview/api/treeviewcomponent#children) function for every expanded node and fetches all rendered child nodes again.
      */
     rebindChildren() {
         this.dataChangeNotification.notify();
@@ -2649,7 +2656,7 @@ class TreeViewComponent {
         this.expandService.collapse(index, item);
     }
     /**
-     * Gets the current page size of the data item's children collection ([see example](slug:loadmorebutton_treeview#managing-page-sizes)).
+     * Gets the current page size of the data item's children collection ([see example](https://www.telerik.com/kendo-angular-ui/components/treeview/load-more-button#managing-page-sizes)).
      * Pass `null` as `dataItem` to get the root collection's page size.
      *
      * @param dataItem {any} - The parent data item of the targeted collection.
@@ -2660,7 +2667,7 @@ class TreeViewComponent {
         return this.loadMoreService.getGroupSize(dataItem);
     }
     /**
-     * Sets the page size of the data item's children collection ([see example](slug:loadmorebutton_treeview#managing-page-sizes)).
+     * Sets the page size of the data item's children collection ([see example](https://www.telerik.com/kendo-angular-ui/components/treeview/load-more-button#managing-page-sizes)).
      * Pass `null` as `dataItem` to set the root collection's page size.
      *
      * @param dataItem {any} - The parent data item of the targeted collection.
@@ -3036,7 +3043,7 @@ const matchKey = index => k => {
 };
 /**
  * Represents a directive that manages the in-memory checked state of the TreeView node
- * ([see example](slug:checkboxes_treeview)).
+ * ([see example](https://www.telerik.com/kendo-angular-ui/components/treeview/checkboxes)).
  *
  * @example
  * ```html
@@ -3066,13 +3073,13 @@ class CheckDirective {
     checkKey;
     /**
      * Defines the collection that stores the checked keys
-     * ([see example](slug:checkboxes_treeview)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/treeview/checkboxes)).
      */
     checkedKeys;
     /**
      * Defines the checkable settings
-     * ([see example](slug:checkboxes_treeview#setup)).
-     * If you do not provide a value, the default [`CheckableSettings`](slug:api_treeview_checkablesettings) apply.
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/treeview/checkboxes#setup)).
+     * If you do not provide a value, the default [`CheckableSettings`](https://www.telerik.com/kendo-angular-ui/components/treeview/api/checkablesettings) apply.
      */
     checkable;
     /**
@@ -3342,7 +3349,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
 
 /**
  * Represents a directive which manages the disabled in-memory state of the TreeView node
- * ([see example]({% slug disabledstate_treeview %})).
+ * ([see example](https://www.telerik.com/kendo-angular-ui/components/treeview/disabled-state)).
  *
  * @example
  * ```html
@@ -3419,12 +3426,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
 /**
  * Represents the directive that enables you to update the initially provided data array during drag-and-drop.
  *
- * Use this directive with one of the data-binding directives ([`kendoTreeViewHierarchyBinding`](slug:api_treeview_hierarchybindingdirective)
- * or [`kendoTreeViewFlatDataBinding`](slug:api_treeview_flatdatabindingdirective)), which set their own edit handlers, or provide
- * your own [`editService`](slug:api_treeview_editservice) to this directive.
+ * Use this directive with one of the data-binding directives ([`kendoTreeViewHierarchyBinding`](https://www.telerik.com/kendo-angular-ui/components/treeview/api/hierarchybindingdirective)
+ * or [`kendoTreeViewFlatDataBinding`](https://www.telerik.com/kendo-angular-ui/components/treeview/api/flatdatabindingdirective)), which set their own edit handlers, or provide
+ * your own [`editService`](https://www.telerik.com/kendo-angular-ui/components/treeview/api/editservice) to this directive.
  *
  * Providing a custom `editService` allows you to handle the
- * [`addItem`](slug:api_treeview_treeviewcomponent#additem) and [`removeItem`](slug:api_treeview_treeviewcomponent#removeitem)
+ * [`addItem`](https://www.telerik.com/kendo-angular-ui/components/treeview/api/treeviewcomponent#additem) and [`removeItem`](https://www.telerik.com/kendo-angular-ui/components/treeview/api/treeviewcomponent#removeitem)
  * events when they are triggered by the TreeView component.
  *
  * @example
@@ -3443,8 +3450,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
 class DragAndDropEditingDirective {
     treeview;
     /**
-     * Specifies the handlers called on drag-and-drop [`addItem`](slug:api_treeview_treeviewcomponent#additem)
-     * and [`removeItem`](slug:api_treeview_treeviewcomponent#removeitem) events.
+     * Specifies the handlers called on drag-and-drop [`addItem`](https://www.telerik.com/kendo-angular-ui/components/treeview/api/treeviewcomponent#additem)
+     * and [`removeItem`](https://www.telerik.com/kendo-angular-ui/components/treeview/api/treeviewcomponent#removeitem) events.
      */
     set editService(service) {
         this.treeview.editService = service;
@@ -3485,7 +3492,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
 
 /**
  * Represents the attempted drop action during dragging.
- * Passed as `action` value to the [`kendoTreeViewDragClueTemplate`](slug:api_treeview_dragcluetemplatedirective) directive.
+ * Passed as `action` value to the [`kendoTreeViewDragClueTemplate`](https://www.telerik.com/kendo-angular-ui/components/treeview/api/dragcluetemplatedirective) directive.
  * By default, this value defines the rendered icon in the drag clue.
  */
 var DropAction;
@@ -3563,7 +3570,7 @@ class PreventableEvent {
 }
 
 /**
- * Arguments for the TreeView [`nodeDrop`](slug:api_treeview_treeviewcomponent#nodedrop) event.
+ * Arguments for the TreeView [`nodeDrop`](https://www.telerik.com/kendo-angular-ui/components/treeview/api/treeviewcomponent#nodedrop) event.
  */
 class TreeItemDropEvent extends PreventableEvent {
     /**
@@ -3613,7 +3620,7 @@ class TreeItemDropEvent extends PreventableEvent {
 }
 
 /**
- * Arguments for the TreeView [`nodeDragStart`](slug:api_treeview_treeviewcomponent#nodedragstart) event.
+ * Arguments for the TreeView [`nodeDragStart`](https://www.telerik.com/kendo-angular-ui/components/treeview/api/treeviewcomponent#nodedragstart) event.
  */
 class TreeItemDragStartEvent extends PreventableEvent {
     /**
@@ -3634,8 +3641,8 @@ class TreeItemDragStartEvent extends PreventableEvent {
 }
 
 /**
- * Arguments for the TreeView [`nodeDrag`](slug:api_treeview_treeviewcomponent#nodedrag) and
- * [`nodeDragEnd`](slug:api_treeview_treeviewcomponent#nodedragend) events.
+ * Arguments for the TreeView [`nodeDrag`](https://www.telerik.com/kendo-angular-ui/components/treeview/api/treeviewcomponent#nodedrag) and
+ * [`nodeDragEnd`](https://www.telerik.com/kendo-angular-ui/components/treeview/api/treeviewcomponent#nodedragend) events.
  */
 class TreeItemDragEvent {
     /** @hidden */
@@ -3910,7 +3917,7 @@ const getDropPosition = (draggedItem, target, clientY, targetTreeView, container
         return;
     }
     // the .k-treeview-mid element starts just after the checkbox/expand arrow and stretches till the end of the treeview on the right
-    const item = closestWithMatch(target, '.k-treeview-top, .k-treeview-mid, .k-treeview-bot');
+    const item = closestWithMatch(target, '.k-treeview-item-content');
     if (!isPresent(item)) {
         return;
     }
@@ -4329,13 +4336,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
  * Represents the template for the TreeView drag clue when you drag an item.
  *
  * To define the drag clue template, nest an `<ng-template>` tag with the `kendoTreeViewDragClueTemplate` directive inside a `<kendo-treeview>` tag
- * ([see example](slug:draganddrop_treeview#toc-templates)).
+ * ([see example](https://www.telerik.com/kendo-angular-ui/components/treeview/drag-and-drop#templates)).
  *
  * The template context provides the following variables:
  * - `let-text="text"` (`string`)&mdash;The display text of the item being dragged.
- * - `let-action="action"` ([`DropAction`](slug:api_treeview_dropaction))&mdash;The type of drop action that will occur.
- * - `let-sourceItem="sourceItem"` ([`TreeItemLookup`](slug:api_treeview_treeitemlookup))&mdash;The TreeView item that is being dragged from its original position.
- * - `let-destinationItem="destinationItem"` ([`TreeItemLookup`](slug:api_treeview_treeitemlookup))&mdash;The TreeView item that serves as the target for the drop operation.
+ * - `let-action="action"` ([`DropAction`](https://www.telerik.com/kendo-angular-ui/components/treeview/api/dropaction))&mdash;The type of drop action that will occur.
+ * - `let-sourceItem="sourceItem"` ([`TreeItemLookup`](https://www.telerik.com/kendo-angular-ui/components/treeview/api/treeitemlookup))&mdash;The TreeView item that is being dragged from its original position.
+ * - `let-destinationItem="destinationItem"` ([`TreeItemLookup`](https://www.telerik.com/kendo-angular-ui/components/treeview/api/treeitemlookup))&mdash;The TreeView item that serves as the target for the drop operation.
  *
  * @example
  * ```html
@@ -4368,12 +4375,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
  * Represents the template for the TreeView drop hint when you drag an item.
  *
  * To define the hint template, nest an `<ng-template>` tag with the `kendoTreeViewDropHintTemplate` directive inside a `<kendo-treeview>` tag
- * ([see example](slug:draganddrop_treeview#toc-templates)).
+ * ([see example](https://www.telerik.com/kendo-angular-ui/components/treeview/drag-and-drop#templates)).
  *
  * The template context provides the following variables:
- * - `let-action="action"` ([`DropAction`](slug:api_treeview_dropaction))&mdash;The drop action being performed.
- * - `let-sourceItem="sourceItem"` ([`TreeItemLookup`](slug:api_treeview_treeitemlookup))&mdash;The item being dragged.
- * - `let-destinationItem="destinationItem"` ([`TreeItemLookup`](slug:api_treeview_treeitemlookup))&mdash;The target item for the drop operation.
+ * - `let-action="action"` ([`DropAction`](https://www.telerik.com/kendo-angular-ui/components/treeview/api/dropaction))&mdash;The drop action being performed.
+ * - `let-sourceItem="sourceItem"` ([`TreeItemLookup`](https://www.telerik.com/kendo-angular-ui/components/treeview/api/treeitemlookup))&mdash;The item being dragged.
+ * - `let-destinationItem="destinationItem"` ([`TreeItemLookup`](https://www.telerik.com/kendo-angular-ui/components/treeview/api/treeitemlookup))&mdash;The target item for the drop operation.
  *
  * @example
  * ```html
@@ -4409,14 +4416,14 @@ const DEFAULT_SCROLL_SETTINGS = {
 };
 /**
  * Represents the directive that enables you to drag and drop items inside the current TreeView or between multiple linked TreeView component instances
- * ([see example](slug:draganddrop_treeview)).
+ * ([see example](https://www.telerik.com/kendo-angular-ui/components/treeview/drag-and-drop)).
  *
- * Triggers the [`nodeDragStart`](slug:api_treeview_treeviewcomponent#nodedragstart),
- * [`nodeDrag`](slug:api_treeview_treeviewcomponent#nodedrag),
- * [`nodeDrop`](slug:api_treeview_treeviewcomponent#nodedrop),
- * [`nodeDragEnd`](slug:api_treeview_treeviewcomponent#nodedragend),
- * [`addItem`](slug:api_treeview_treeviewcomponent#additem) and
- * [`removeItem`](slug:api_treeview_treeviewcomponent#removeitem)
+ * Triggers the [`nodeDragStart`](https://www.telerik.com/kendo-angular-ui/components/treeview/api/treeviewcomponent#nodedragstart),
+ * [`nodeDrag`](https://www.telerik.com/kendo-angular-ui/components/treeview/api/treeviewcomponent#nodedrag),
+ * [`nodeDrop`](https://www.telerik.com/kendo-angular-ui/components/treeview/api/treeviewcomponent#nodedrop),
+ * [`nodeDragEnd`](https://www.telerik.com/kendo-angular-ui/components/treeview/api/treeviewcomponent#nodedragend),
+ * [`addItem`](https://www.telerik.com/kendo-angular-ui/components/treeview/api/treeviewcomponent#additem) and
+ * [`removeItem`](https://www.telerik.com/kendo-angular-ui/components/treeview/api/treeviewcomponent#removeitem)
  * events when you perform the corresponding actions.
  *
  * @example
@@ -4440,14 +4447,14 @@ class DragAndDropDirective {
     /**
      * Specifies whether the `removeItem` event fires after the user drops an item while pressing the `ctrl` key.
      * If enabled, the `removeItem` event does not fire on the source TreeView
-     * ([see example](slug:draganddrop_treeview#multiple-treeviews)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/treeview/drag-and-drop#multiple-treeviews)).
      *
      * @default false
      */
     allowCopy = false;
     /**
      * Specifies the `TreeViewComponent` instances into which the user can drop dragged items from the current `TreeViewComponent`
-     * ([see example](slug:draganddrop_treeview#multiple-treeviews)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/treeview/drag-and-drop#multiple-treeviews)).
      */
     dropZoneTreeViews = [];
     /**
@@ -4458,7 +4465,7 @@ class DragAndDropDirective {
      */
     startDragAfter = 5;
     /**
-     * Controls the auto-scrolling behavior during drag-and-drop ([see example](slug:draganddrop_treeview#auto-scrolling)).
+     * Controls the auto-scrolling behavior during drag-and-drop ([see example](https://www.telerik.com/kendo-angular-ui/components/treeview/drag-and-drop#auto-scrolling)).
      * Enabled by default. To turn off auto-scrolling, set this property to `false`.
      *
      * By default, scrolling occurs by 1 pixel every 1 millisecond when the dragged item reaches the top or bottom of the scrollable container.
@@ -4523,7 +4530,7 @@ class DragAndDropDirective {
             return;
         }
         // store the drag target on press, show it only when it's actually dragged
-        this.draggedItem = closestWithMatch(originalEvent.target, '.k-treeview-leaf');
+        this.draggedItem = closestWithMatch(originalEvent.target, '.k-treeview-item-content');
         // record the current pointer down coords - copared to the `startDragAfter` value to calculate whether to initiate dragging
         this.pendingDragStartEvent = originalEvent;
     }
@@ -4543,7 +4550,7 @@ class DragAndDropDirective {
         }
         const targetTreeView = this.getTargetTreeView(dropTarget);
         const dropPosition = getDropPosition(this.draggedItem, dropTarget, clientY, targetTreeView, this.containerOffset);
-        const dropHintAnchor = closestWithMatch(dropTarget, '.k-treeview-top, .k-treeview-mid, .k-treeview-bot');
+        const dropHintAnchor = closestWithMatch(dropTarget, '.k-treeview-item-content');
         const dropAction = getDropAction(dropPosition, dropTarget);
         const sourceItem = treeItemFromEventTarget(this.treeview, this.draggedItem);
         const destinationItem = treeItemFromEventTarget(targetTreeView, dropTarget);
@@ -4739,7 +4746,7 @@ const DEFAULT_FILTER_EXPAND_SETTINGS = {
 };
 /**
  * Represents a directive that manages the expanded state of the TreeView
- * ([see example](slug:expandedstate_treeview)).
+ * ([see example](https://www.telerik.com/kendo-angular-ui/components/treelist/expanded-state)).
  *
  * @example
  * ```html
@@ -4769,7 +4776,7 @@ class ExpandDirective {
     expandKey;
     /**
      * Specifies whether to auto-expand the nodes leading from the root node to each filter result.
-     * To fine-tune this behavior, pass a [`FilterExpandSettings`](slug:api_treeview_filterexpandsettings) object to this input.
+     * To fine-tune this behavior, pass a [`FilterExpandSettings`](https://www.telerik.com/kendo-angular-ui/components/treeview/api/filterexpandsettings) object to this input.
      * @default false
      */
     expandOnFilter = false;
@@ -5585,10 +5592,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 type: Input
             }] } });
 
-const LOAD_MORE_DOC_LINK = 'https://www.telerik.com/kendo-angular-ui/components/treeview/load-more-button/';
+const LOAD_MORE_DOC_LINK = 'https://www.telerik.com/kendo-angular-ui/components/treeview/load-more-button';
 /**
  * Represents the directive that enables you to display only a limited number of nodes per level
- * ([see example](slug:loadmorebutton_treeview)).
+ * ([see example](https://www.telerik.com/kendo-angular-ui/components/treeview/load-more-button)).
  *
  * @example
  * ```html
@@ -5609,7 +5616,7 @@ class LoadMoreDirective {
     /**
      * Sets the callback function that runs when the load more button is clicked.
      * Provide a function when you fetch additional nodes on demand
-     * ([see example](slug:loadmorebutton_treeview#remote-data)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/treeview/load-more-button#remote-data)).
      *
      */
     set loadMoreNodes(loadMoreNodes) {
@@ -5626,13 +5633,13 @@ class LoadMoreDirective {
     /**
      * Sets the total number of root nodes.
      * Use this property when you fetch additional nodes on demand
-     * ([see example](slug:loadmorebutton_treeview#remote-data)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/treeview/load-more-button#remote-data)).
      */
     totalRootNodes;
     /**
      * Sets the field that contains the total number of child nodes for the data item.
      * Use this property when you fetch additional nodes on demand
-     * ([see example](slug:loadmorebutton_treeview#remote-data)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/treeview/load-more-button#remote-data)).
      */
     totalField;
     /**
@@ -5761,7 +5768,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
 
 /**
  * Manages the in-memory selection state of TreeView nodes
- * ([see example](slug:selection_treeview)).
+ * ([see example](https://www.telerik.com/kendo-angular-ui/components/treeview/selection)).
  *
  * @example
  * ```html
@@ -5792,12 +5799,12 @@ class SelectDirective {
     selectKey;
     /**
      * Sets the current selection mode
-     * ([see example](slug:selection_treeview)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/treeview/selection)).
      */
     selection;
     /**
      * Defines the collection that stores the selected keys
-     * ([see example](slug:selection_treeview)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/treeview/selection)).
      */
     selectedKeys;
     /**