@progress/kendo-angular-treeview 22.1.0-develop.13 → 22.1.0-develop.14

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

@@ -14,7 +14,7 @@ import { caretAltDownIcon, caretAltRightIcon, caretAltLeftIcon, searchIcon, canc
 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.13',
+    version: '22.1.0-develop.14',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -1049,9 +1049,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 +1097,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 +1346,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 +1403,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
  */
@@ -1458,6 +1457,9 @@ class TreeViewGroupComponent {
     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';
     }
@@ -1626,21 +1628,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 +1730,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 +1761,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 +1835,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 +1848,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 +1867,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 +1919,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 +1950,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 +2024,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 +2037,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 +2058,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,
@@ -3910,7 +3901,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;
     }
@@ -4543,7 +4534,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);

package/package-metadata.mjs

@@ -7,7 +7,7 @@ export const packageMetadata = {
   "productCodes": [
     "KENDOUIANGULAR"
   ],
-  "publishDate": 1770023299,
-  "version": "22.1.0-develop.13",
+  "publishDate": 1770038062,
+  "version": "22.1.0-develop.14",
   "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-treeview",
-  "version": "22.1.0-develop.13",
+  "version": "22.1.0-develop.14",
   "description": "Kendo UI TreeView for Angular",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -19,7 +19,7 @@
     "package": {
       "productName": "Kendo UI for Angular",
       "productCode": "KENDOUIANGULAR",
-      "publishDate": 1770023299,
+      "publishDate": 1770038062,
       "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
     }
   },
@@ -29,15 +29,15 @@
     "@angular/core": "19 - 21",
     "@angular/platform-browser": "19 - 21",
     "@progress/kendo-licensing": "^1.10.0",
-    "@progress/kendo-angular-common": "22.1.0-develop.13",
-    "@progress/kendo-angular-inputs": "22.1.0-develop.13",
-    "@progress/kendo-angular-icons": "22.1.0-develop.13",
-    "@progress/kendo-angular-l10n": "22.1.0-develop.13",
+    "@progress/kendo-angular-common": "22.1.0-develop.14",
+    "@progress/kendo-angular-inputs": "22.1.0-develop.14",
+    "@progress/kendo-angular-icons": "22.1.0-develop.14",
+    "@progress/kendo-angular-l10n": "22.1.0-develop.14",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "22.1.0-develop.13",
+    "@progress/kendo-angular-schematics": "22.1.0-develop.14",
     "@progress/kendo-common": "^1.0.1",
     "@progress/kendo-draggable": "^3.0.2"
   },

package/schematics/ngAdd/index.js

@@ -9,10 +9,10 @@ const schematics_1 = require("@angular-devkit/schematics");
 function default_1(options) {
     const finalOptions = Object.assign(Object.assign({}, options), { mainNgModule: 'TreeViewModule', package: 'treeview', peerDependencies: {
             // Peers of kendo-angular-inputs
-            '@progress/kendo-angular-buttons': '22.1.0-develop.13',
-            '@progress/kendo-angular-dialog': '22.1.0-develop.13',
-            '@progress/kendo-angular-intl': '22.1.0-develop.13',
-            '@progress/kendo-angular-popup': '22.1.0-develop.13',
+            '@progress/kendo-angular-buttons': '22.1.0-develop.14',
+            '@progress/kendo-angular-dialog': '22.1.0-develop.14',
+            '@progress/kendo-angular-intl': '22.1.0-develop.14',
+            '@progress/kendo-angular-popup': '22.1.0-develop.14',
             '@progress/kendo-drawing': '^1.9.3',
             // Peer dependency of icons
             '@progress/kendo-svg-icons': '^4.0.0'

package/treeview-group.component.d.ts

@@ -70,6 +70,7 @@ export declare class TreeViewGroupComponent implements OnChanges, OnInit, OnDest
     initialNodesLoaded: boolean;
     loadingMoreNodes: boolean;
     isItemExpandable: (node: any, index: any) => boolean;
+    isContentDisabled(node: any, index: any): boolean;
     getFontIcon(node: any, index: any): string;
     getSvgIcon(node: any, index: any): SVGIcon;
     get moreNodesAvailable(): boolean;
@@ -116,10 +117,6 @@ export declare class TreeViewGroupComponent implements OnChanges, OnInit, OnDest
      * @hidden
      */
     isItemDisabled(node: any, index: any): boolean;
-    /**
-     * @hidden
-     */
-    setItemClasses(dataLength: number, index: any): string;
     private loadMoreLocalNodes;
     private fetchMoreNodes;
     private setNodeChildren;

package/{treeview-item-content.directive.d.ts → treeview-item-content-wrapper.directive.d.ts}

@@ -9,9 +9,9 @@ import * as i0 from "@angular/core";
 /**
  * @hidden
  *
- * A directive which manages the expanded state of the TreeView.
+ * A directive which manages the states of the TreeView items.
  */
-export declare class TreeViewItemContentDirective implements OnChanges, OnDestroy {
+export declare class TreeViewItemContentWrapperDirective implements OnChanges, OnDestroy {
     private element;
     private navigationService;
     private selectionService;
@@ -27,6 +27,6 @@ export declare class TreeViewItemContentDirective implements OnChanges, OnDestro
     private updateFocusClass;
     private updateSelectionClass;
     private render;
-    static ɵfac: i0.ɵɵFactoryDeclaration<TreeViewItemContentDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<TreeViewItemContentDirective, "[kendoTreeViewItemContent]", never, { "dataItem": { "alias": "dataItem"; "required": false; }; "index": { "alias": "index"; "required": false; }; "initialSelection": { "alias": "initialSelection"; "required": false; }; "isSelected": { "alias": "isSelected"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TreeViewItemContentWrapperDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TreeViewItemContentWrapperDirective, "[kendoTreeViewItemContentWrapper]", never, { "dataItem": { "alias": "dataItem"; "required": false; }; "index": { "alias": "index"; "required": false; }; "initialSelection": { "alias": "initialSelection"; "required": false; }; "isSelected": { "alias": "isSelected"; "required": false; }; }, {}, never, never, true, never>;
 }