@progress/kendo-angular-treeview 12.0.2-develop.2 → 12.0.2-develop.3

package/esm2020/package-metadata.mjs

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-treeview',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1683808964,
-    version: '12.0.2-develop.2',
+    publishDate: 1683884228,
+    version: '12.0.2-develop.3',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

package/esm2020/treeview-group.component.mjs

@@ -55,7 +55,6 @@ export class TreeViewGroupComponent {
          */
         this.caretAltRightIcon = caretAltRightIcon;
         this.kGroupClass = true;
-        this.role = 'group';
         this.loadOnDemand = true;
         this.textField = "";
         this.size = 'medium';
@@ -72,6 +71,9 @@ export class TreeViewGroupComponent {
         this.children = () => of([]);
         this.hasChildren = () => false;
     }
+    get role() {
+        return this.parentIndex ? 'group' : 'tree';
+    }
     getFontIcon(node, index) {
         return this.isExpanded(node, index) ? 'caret-alt-down' : 'caret-alt-right';
     }

package/esm2020/treeview.component.mjs

@@ -23,6 +23,7 @@ import { SelectionService } from './selection/selection.service';
 import { TreeViewLookupService } from './treeview-lookup.service';
 import { closestNode, focusableNode, hasParent, isContent, isFocusable, match, nodeId, isLoadMoreButton, isPresent, nodeIndex, buildTreeItem, getSizeClass } from './utils';
 import { searchIcon } from '@progress/kendo-svg-icons';
+import { TextBoxComponent } from '@progress/kendo-angular-inputs';
 import * as i0 from "@angular/core";
 import * as i1 from "./expand-state.service";
 import * as i2 from "./navigation/navigation.service";
@@ -35,6 +36,7 @@ import * as i8 from "@progress/kendo-angular-inputs";
 import * as i9 from "@progress/kendo-angular-icons";
 import * as i10 from "./treeview-group.component";
 import * as i11 from "@angular/common";
+let nextId = 0;
 const LOAD_MORE_DOC_LINK = 'http://www.telerik.com/kendo-angular-ui/components/treeview/load-more-button/';
 const providers = [
     ExpandStateService,
@@ -87,7 +89,6 @@ export class TreeViewComponent {
          */
         this.searchIcon = searchIcon;
         this.classNames = true;
-        this.role = 'tree';
         /**
          * The hint which is displayed when the component is empty.
          */
@@ -252,7 +253,9 @@ export class TreeViewComponent {
         this._size = 'medium';
         this.subscriptions = new Subscription();
         this.domSubscriptions = [];
+        this._nextId = nextId;
         validatePackage(packageMetadata);
+        nextId++;
     }
     /** @hidden */
     get direction() {
@@ -365,6 +368,12 @@ export class TreeViewComponent {
     get size() {
         return this._size;
     }
+    /**
+     * @hidden
+     */
+    get treeviewId() {
+        return `treeview_${this._nextId}`;
+    }
     ngOnChanges(changes) {
         this.navigationService.navigable = Boolean(this.navigable);
         // TODO: should react to changes.loadOnDemand as well - should preload the data or clear the already cached items
@@ -403,6 +412,13 @@ export class TreeViewComponent {
             this.renderer.addClass(this.element.nativeElement, getSizeClass('treeview', this.size));
         }
     }
+    ngAfterViewInit() {
+        if (this.searchbox) {
+            this.renderer.setAttribute(this.searchbox.input.nativeElement, 'role', 'searchbox');
+            this.renderer.setAttribute(this.searchbox.input.nativeElement, 'aria-controls', this.treeviewId);
+            this.renderer.setAttribute(this.searchbox.input.nativeElement, 'aria-label', 'searchbar');
+        }
+    }
     /**
      * Blurs the focused TreeView item.
      */
@@ -618,12 +634,13 @@ export class TreeViewComponent {
     }
 }
 TreeViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TreeViewComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.ExpandStateService }, { token: i2.NavigationService }, { token: i3.NodeChildrenService }, { token: i4.SelectionService }, { token: i5.TreeViewLookupService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i6.DataChangeNotificationService }, { token: i7.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-TreeViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TreeViewComponent, selector: "kendo-treeview", inputs: { filterInputPlaceholder: "filterInputPlaceholder", expandDisabledNodes: "expandDisabledNodes", animate: "animate", nodeTemplateRef: ["nodeTemplate", "nodeTemplateRef"], loadMoreButtonTemplateRef: ["loadMoreButtonTemplate", "loadMoreButtonTemplateRef"], trackBy: "trackBy", nodes: "nodes", textField: "textField", hasChildren: "hasChildren", isChecked: "isChecked", isDisabled: "isDisabled", isExpanded: "isExpanded", isSelected: "isSelected", isVisible: "isVisible", navigable: "navigable", children: "children", loadOnDemand: "loadOnDemand", filterable: "filterable", filter: "filter", size: "size", disableParentNodesOnly: "disableParentNodesOnly" }, outputs: { childrenLoaded: "childrenLoaded", onBlur: "blur", onFocus: "focus", expand: "expand", collapse: "collapse", nodeDragStart: "nodeDragStart", nodeDrag: "nodeDrag", filterStateChange: "filterStateChange", nodeDrop: "nodeDrop", nodeDragEnd: "nodeDragEnd", addItem: "addItem", removeItem: "removeItem", checkedChange: "checkedChange", selectionChange: "selectionChange", filterChange: "filterChange", nodeClick: "nodeClick", nodeDblClick: "nodeDblClick" }, host: { properties: { "class.k-treeview": "this.classNames", "attr.role": "this.role", "attr.dir": "this.direction", "@.disabled": "this.animate" } }, providers: providers, queries: [{ propertyName: "nodeTemplateQuery", first: true, predicate: NodeTemplateDirective, descendants: true }, { propertyName: "loadMoreButtonTemplateQuery", first: true, predicate: LoadMoreButtonTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "assetsContainer", first: true, predicate: ["assetsContainer"], descendants: true, read: ViewContainerRef, static: true }], exportAs: ["kendoTreeView"], usesOnChanges: true, ngImport: i0, template: `
+TreeViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TreeViewComponent, selector: "kendo-treeview", inputs: { filterInputPlaceholder: "filterInputPlaceholder", expandDisabledNodes: "expandDisabledNodes", animate: "animate", nodeTemplateRef: ["nodeTemplate", "nodeTemplateRef"], loadMoreButtonTemplateRef: ["loadMoreButtonTemplate", "loadMoreButtonTemplateRef"], trackBy: "trackBy", nodes: "nodes", textField: "textField", hasChildren: "hasChildren", isChecked: "isChecked", isDisabled: "isDisabled", isExpanded: "isExpanded", isSelected: "isSelected", isVisible: "isVisible", navigable: "navigable", children: "children", loadOnDemand: "loadOnDemand", filterable: "filterable", filter: "filter", size: "size", disableParentNodesOnly: "disableParentNodesOnly" }, outputs: { childrenLoaded: "childrenLoaded", onBlur: "blur", onFocus: "focus", expand: "expand", collapse: "collapse", nodeDragStart: "nodeDragStart", nodeDrag: "nodeDrag", filterStateChange: "filterStateChange", nodeDrop: "nodeDrop", nodeDragEnd: "nodeDragEnd", addItem: "addItem", removeItem: "removeItem", checkedChange: "checkedChange", selectionChange: "selectionChange", filterChange: "filterChange", nodeClick: "nodeClick", nodeDblClick: "nodeDblClick" }, host: { properties: { "class.k-treeview": "this.classNames", "attr.dir": "this.direction", "@.disabled": "this.animate" } }, providers: providers, queries: [{ propertyName: "nodeTemplateQuery", first: true, predicate: NodeTemplateDirective, descendants: true }, { propertyName: "loadMoreButtonTemplateQuery", first: true, predicate: LoadMoreButtonTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "assetsContainer", first: true, predicate: ["assetsContainer"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "searchbox", first: true, predicate: ["searchbox"], descendants: true }], exportAs: ["kendoTreeView"], usesOnChanges: true, ngImport: i0, template: `
         <span
             class="k-treeview-filter"
             *ngIf="filterable"
         >
             <kendo-textbox
+                #searchbox
                 [size]="size"
                 [value]="filter"
                 [clearButton]="true"
@@ -642,7 +659,8 @@ TreeViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
         </span>
         <ul class="k-treeview-lines"
             kendoTreeViewGroup
-            role="group"
+            [attr.id]="treeviewId"
+            role="tree"
             [size]="size"
             [loadOnDemand]="loadOnDemand"
             [checkboxes]="checkboxes"
@@ -681,6 +699,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             *ngIf="filterable"
         >
             <kendo-textbox
+                #searchbox
                 [size]="size"
                 [value]="filter"
                 [clearButton]="true"
@@ -699,7 +718,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         </span>
         <ul class="k-treeview-lines"
             kendoTreeViewGroup
-            role="group"
+            [attr.id]="treeviewId"
+            role="tree"
             [size]="size"
             [loadOnDemand]="loadOnDemand"
             [checkboxes]="checkboxes"
@@ -729,15 +749,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.ExpandStateService }, { type: i2.NavigationService }, { type: i3.NodeChildrenService }, { type: i4.SelectionService }, { type: i5.TreeViewLookupService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i6.DataChangeNotificationService }, { type: i7.LocalizationService }]; }, propDecorators: { classNames: [{
                 type: HostBinding,
                 args: ["class.k-treeview"]
-            }], role: [{
-                type: HostBinding,
-                args: ["attr.role"]
             }], direction: [{
                 type: HostBinding,
                 args: ["attr.dir"]
             }], assetsContainer: [{
                 type: ViewChild,
                 args: ['assetsContainer', { read: ViewContainerRef, static: true }]
+            }], searchbox: [{
+                type: ViewChild,
+                args: ['searchbox']
             }], filterInputPlaceholder: [{
                 type: Input
             }], expandDisabledNodes: [{

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

@@ -28,8 +28,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-treeview',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1683808964,
-    version: '12.0.2-develop.2',
+    publishDate: 1683884228,
+    version: '12.0.2-develop.3',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -1537,7 +1537,6 @@ class TreeViewGroupComponent {
          */
         this.caretAltRightIcon = caretAltRightIcon;
         this.kGroupClass = true;
-        this.role = 'group';
         this.loadOnDemand = true;
         this.textField = "";
         this.size = 'medium';
@@ -1554,6 +1553,9 @@ class TreeViewGroupComponent {
         this.children = () => of([]);
         this.hasChildren = () => false;
     }
+    get role() {
+        return this.parentIndex ? 'group' : 'tree';
+    }
     getFontIcon(node, index) {
         return this.isExpanded(node, index) ? 'caret-alt-down' : 'caret-alt-right';
     }
@@ -2152,6 +2154,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }] } });
 
+let nextId = 0;
 const LOAD_MORE_DOC_LINK$1 = 'http://www.telerik.com/kendo-angular-ui/components/treeview/load-more-button/';
 const providers = [
     ExpandStateService,
@@ -2204,7 +2207,6 @@ class TreeViewComponent {
          */
         this.searchIcon = searchIcon;
         this.classNames = true;
-        this.role = 'tree';
         /**
          * The hint which is displayed when the component is empty.
          */
@@ -2369,7 +2371,9 @@ class TreeViewComponent {
         this._size = 'medium';
         this.subscriptions = new Subscription();
         this.domSubscriptions = [];
+        this._nextId = nextId;
         validatePackage(packageMetadata);
+        nextId++;
     }
     /** @hidden */
     get direction() {
@@ -2482,6 +2486,12 @@ class TreeViewComponent {
     get size() {
         return this._size;
     }
+    /**
+     * @hidden
+     */
+    get treeviewId() {
+        return `treeview_${this._nextId}`;
+    }
     ngOnChanges(changes) {
         this.navigationService.navigable = Boolean(this.navigable);
         // TODO: should react to changes.loadOnDemand as well - should preload the data or clear the already cached items
@@ -2520,6 +2530,13 @@ class TreeViewComponent {
             this.renderer.addClass(this.element.nativeElement, getSizeClass('treeview', this.size));
         }
     }
+    ngAfterViewInit() {
+        if (this.searchbox) {
+            this.renderer.setAttribute(this.searchbox.input.nativeElement, 'role', 'searchbox');
+            this.renderer.setAttribute(this.searchbox.input.nativeElement, 'aria-controls', this.treeviewId);
+            this.renderer.setAttribute(this.searchbox.input.nativeElement, 'aria-label', 'searchbar');
+        }
+    }
     /**
      * Blurs the focused TreeView item.
      */
@@ -2735,12 +2752,13 @@ class TreeViewComponent {
     }
 }
 TreeViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TreeViewComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: ExpandStateService }, { token: NavigationService }, { token: NodeChildrenService }, { token: SelectionService }, { token: TreeViewLookupService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: DataChangeNotificationService }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-TreeViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TreeViewComponent, selector: "kendo-treeview", inputs: { filterInputPlaceholder: "filterInputPlaceholder", expandDisabledNodes: "expandDisabledNodes", animate: "animate", nodeTemplateRef: ["nodeTemplate", "nodeTemplateRef"], loadMoreButtonTemplateRef: ["loadMoreButtonTemplate", "loadMoreButtonTemplateRef"], trackBy: "trackBy", nodes: "nodes", textField: "textField", hasChildren: "hasChildren", isChecked: "isChecked", isDisabled: "isDisabled", isExpanded: "isExpanded", isSelected: "isSelected", isVisible: "isVisible", navigable: "navigable", children: "children", loadOnDemand: "loadOnDemand", filterable: "filterable", filter: "filter", size: "size", disableParentNodesOnly: "disableParentNodesOnly" }, outputs: { childrenLoaded: "childrenLoaded", onBlur: "blur", onFocus: "focus", expand: "expand", collapse: "collapse", nodeDragStart: "nodeDragStart", nodeDrag: "nodeDrag", filterStateChange: "filterStateChange", nodeDrop: "nodeDrop", nodeDragEnd: "nodeDragEnd", addItem: "addItem", removeItem: "removeItem", checkedChange: "checkedChange", selectionChange: "selectionChange", filterChange: "filterChange", nodeClick: "nodeClick", nodeDblClick: "nodeDblClick" }, host: { properties: { "class.k-treeview": "this.classNames", "attr.role": "this.role", "attr.dir": "this.direction", "@.disabled": "this.animate" } }, providers: providers, queries: [{ propertyName: "nodeTemplateQuery", first: true, predicate: NodeTemplateDirective, descendants: true }, { propertyName: "loadMoreButtonTemplateQuery", first: true, predicate: LoadMoreButtonTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "assetsContainer", first: true, predicate: ["assetsContainer"], descendants: true, read: ViewContainerRef, static: true }], exportAs: ["kendoTreeView"], usesOnChanges: true, ngImport: i0, template: `
+TreeViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TreeViewComponent, selector: "kendo-treeview", inputs: { filterInputPlaceholder: "filterInputPlaceholder", expandDisabledNodes: "expandDisabledNodes", animate: "animate", nodeTemplateRef: ["nodeTemplate", "nodeTemplateRef"], loadMoreButtonTemplateRef: ["loadMoreButtonTemplate", "loadMoreButtonTemplateRef"], trackBy: "trackBy", nodes: "nodes", textField: "textField", hasChildren: "hasChildren", isChecked: "isChecked", isDisabled: "isDisabled", isExpanded: "isExpanded", isSelected: "isSelected", isVisible: "isVisible", navigable: "navigable", children: "children", loadOnDemand: "loadOnDemand", filterable: "filterable", filter: "filter", size: "size", disableParentNodesOnly: "disableParentNodesOnly" }, outputs: { childrenLoaded: "childrenLoaded", onBlur: "blur", onFocus: "focus", expand: "expand", collapse: "collapse", nodeDragStart: "nodeDragStart", nodeDrag: "nodeDrag", filterStateChange: "filterStateChange", nodeDrop: "nodeDrop", nodeDragEnd: "nodeDragEnd", addItem: "addItem", removeItem: "removeItem", checkedChange: "checkedChange", selectionChange: "selectionChange", filterChange: "filterChange", nodeClick: "nodeClick", nodeDblClick: "nodeDblClick" }, host: { properties: { "class.k-treeview": "this.classNames", "attr.dir": "this.direction", "@.disabled": "this.animate" } }, providers: providers, queries: [{ propertyName: "nodeTemplateQuery", first: true, predicate: NodeTemplateDirective, descendants: true }, { propertyName: "loadMoreButtonTemplateQuery", first: true, predicate: LoadMoreButtonTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "assetsContainer", first: true, predicate: ["assetsContainer"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "searchbox", first: true, predicate: ["searchbox"], descendants: true }], exportAs: ["kendoTreeView"], usesOnChanges: true, ngImport: i0, template: `
         <span
             class="k-treeview-filter"
             *ngIf="filterable"
         >
             <kendo-textbox
+                #searchbox
                 [size]="size"
                 [value]="filter"
                 [clearButton]="true"
@@ -2759,7 +2777,8 @@ TreeViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
         </span>
         <ul class="k-treeview-lines"
             kendoTreeViewGroup
-            role="group"
+            [attr.id]="treeviewId"
+            role="tree"
             [size]="size"
             [loadOnDemand]="loadOnDemand"
             [checkboxes]="checkboxes"
@@ -2798,6 +2817,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             *ngIf="filterable"
         >
             <kendo-textbox
+                #searchbox
                 [size]="size"
                 [value]="filter"
                 [clearButton]="true"
@@ -2816,7 +2836,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         </span>
         <ul class="k-treeview-lines"
             kendoTreeViewGroup
-            role="group"
+            [attr.id]="treeviewId"
+            role="tree"
             [size]="size"
             [loadOnDemand]="loadOnDemand"
             [checkboxes]="checkboxes"
@@ -2846,15 +2867,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: ExpandStateService }, { type: NavigationService }, { type: NodeChildrenService }, { type: SelectionService }, { type: TreeViewLookupService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: DataChangeNotificationService }, { type: i1.LocalizationService }]; }, propDecorators: { classNames: [{
                 type: HostBinding,
                 args: ["class.k-treeview"]
-            }], role: [{
-                type: HostBinding,
-                args: ["attr.role"]
             }], direction: [{
                 type: HostBinding,
                 args: ["attr.dir"]
             }], assetsContainer: [{
                 type: ViewChild,
                 args: ['assetsContainer', { read: ViewContainerRef, static: true }]
+            }], searchbox: [{
+                type: ViewChild,
+                args: ['searchbox']
             }], filterInputPlaceholder: [{
                 type: Input
             }], expandDisabledNodes: [{

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

@@ -28,8 +28,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-treeview',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1683808964,
-    version: '12.0.2-develop.2',
+    publishDate: 1683884228,
+    version: '12.0.2-develop.3',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -1533,7 +1533,6 @@ class TreeViewGroupComponent {
          */
         this.caretAltRightIcon = caretAltRightIcon;
         this.kGroupClass = true;
-        this.role = 'group';
         this.loadOnDemand = true;
         this.textField = "";
         this.size = 'medium';
@@ -1550,6 +1549,9 @@ class TreeViewGroupComponent {
         this.children = () => of([]);
         this.hasChildren = () => false;
     }
+    get role() {
+        return this.parentIndex ? 'group' : 'tree';
+    }
     getFontIcon(node, index) {
         return this.isExpanded(node, index) ? 'caret-alt-down' : 'caret-alt-right';
     }
@@ -2148,6 +2150,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }] } });
 
+let nextId = 0;
 const LOAD_MORE_DOC_LINK$1 = 'http://www.telerik.com/kendo-angular-ui/components/treeview/load-more-button/';
 const providers = [
     ExpandStateService,
@@ -2200,7 +2203,6 @@ class TreeViewComponent {
          */
         this.searchIcon = searchIcon;
         this.classNames = true;
-        this.role = 'tree';
         /**
          * The hint which is displayed when the component is empty.
          */
@@ -2365,7 +2367,9 @@ class TreeViewComponent {
         this._size = 'medium';
         this.subscriptions = new Subscription();
         this.domSubscriptions = [];
+        this._nextId = nextId;
         validatePackage(packageMetadata);
+        nextId++;
     }
     /** @hidden */
     get direction() {
@@ -2478,6 +2482,12 @@ class TreeViewComponent {
     get size() {
         return this._size;
     }
+    /**
+     * @hidden
+     */
+    get treeviewId() {
+        return `treeview_${this._nextId}`;
+    }
     ngOnChanges(changes) {
         this.navigationService.navigable = Boolean(this.navigable);
         // TODO: should react to changes.loadOnDemand as well - should preload the data or clear the already cached items
@@ -2516,6 +2526,13 @@ class TreeViewComponent {
             this.renderer.addClass(this.element.nativeElement, getSizeClass('treeview', this.size));
         }
     }
+    ngAfterViewInit() {
+        if (this.searchbox) {
+            this.renderer.setAttribute(this.searchbox.input.nativeElement, 'role', 'searchbox');
+            this.renderer.setAttribute(this.searchbox.input.nativeElement, 'aria-controls', this.treeviewId);
+            this.renderer.setAttribute(this.searchbox.input.nativeElement, 'aria-label', 'searchbar');
+        }
+    }
     /**
      * Blurs the focused TreeView item.
      */
@@ -2731,12 +2748,13 @@ class TreeViewComponent {
     }
 }
 TreeViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TreeViewComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: ExpandStateService }, { token: NavigationService }, { token: NodeChildrenService }, { token: SelectionService }, { token: TreeViewLookupService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: DataChangeNotificationService }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-TreeViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TreeViewComponent, selector: "kendo-treeview", inputs: { filterInputPlaceholder: "filterInputPlaceholder", expandDisabledNodes: "expandDisabledNodes", animate: "animate", nodeTemplateRef: ["nodeTemplate", "nodeTemplateRef"], loadMoreButtonTemplateRef: ["loadMoreButtonTemplate", "loadMoreButtonTemplateRef"], trackBy: "trackBy", nodes: "nodes", textField: "textField", hasChildren: "hasChildren", isChecked: "isChecked", isDisabled: "isDisabled", isExpanded: "isExpanded", isSelected: "isSelected", isVisible: "isVisible", navigable: "navigable", children: "children", loadOnDemand: "loadOnDemand", filterable: "filterable", filter: "filter", size: "size", disableParentNodesOnly: "disableParentNodesOnly" }, outputs: { childrenLoaded: "childrenLoaded", onBlur: "blur", onFocus: "focus", expand: "expand", collapse: "collapse", nodeDragStart: "nodeDragStart", nodeDrag: "nodeDrag", filterStateChange: "filterStateChange", nodeDrop: "nodeDrop", nodeDragEnd: "nodeDragEnd", addItem: "addItem", removeItem: "removeItem", checkedChange: "checkedChange", selectionChange: "selectionChange", filterChange: "filterChange", nodeClick: "nodeClick", nodeDblClick: "nodeDblClick" }, host: { properties: { "class.k-treeview": "this.classNames", "attr.role": "this.role", "attr.dir": "this.direction", "@.disabled": "this.animate" } }, providers: providers, queries: [{ propertyName: "nodeTemplateQuery", first: true, predicate: NodeTemplateDirective, descendants: true }, { propertyName: "loadMoreButtonTemplateQuery", first: true, predicate: LoadMoreButtonTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "assetsContainer", first: true, predicate: ["assetsContainer"], descendants: true, read: ViewContainerRef, static: true }], exportAs: ["kendoTreeView"], usesOnChanges: true, ngImport: i0, template: `
+TreeViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TreeViewComponent, selector: "kendo-treeview", inputs: { filterInputPlaceholder: "filterInputPlaceholder", expandDisabledNodes: "expandDisabledNodes", animate: "animate", nodeTemplateRef: ["nodeTemplate", "nodeTemplateRef"], loadMoreButtonTemplateRef: ["loadMoreButtonTemplate", "loadMoreButtonTemplateRef"], trackBy: "trackBy", nodes: "nodes", textField: "textField", hasChildren: "hasChildren", isChecked: "isChecked", isDisabled: "isDisabled", isExpanded: "isExpanded", isSelected: "isSelected", isVisible: "isVisible", navigable: "navigable", children: "children", loadOnDemand: "loadOnDemand", filterable: "filterable", filter: "filter", size: "size", disableParentNodesOnly: "disableParentNodesOnly" }, outputs: { childrenLoaded: "childrenLoaded", onBlur: "blur", onFocus: "focus", expand: "expand", collapse: "collapse", nodeDragStart: "nodeDragStart", nodeDrag: "nodeDrag", filterStateChange: "filterStateChange", nodeDrop: "nodeDrop", nodeDragEnd: "nodeDragEnd", addItem: "addItem", removeItem: "removeItem", checkedChange: "checkedChange", selectionChange: "selectionChange", filterChange: "filterChange", nodeClick: "nodeClick", nodeDblClick: "nodeDblClick" }, host: { properties: { "class.k-treeview": "this.classNames", "attr.dir": "this.direction", "@.disabled": "this.animate" } }, providers: providers, queries: [{ propertyName: "nodeTemplateQuery", first: true, predicate: NodeTemplateDirective, descendants: true }, { propertyName: "loadMoreButtonTemplateQuery", first: true, predicate: LoadMoreButtonTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "assetsContainer", first: true, predicate: ["assetsContainer"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "searchbox", first: true, predicate: ["searchbox"], descendants: true }], exportAs: ["kendoTreeView"], usesOnChanges: true, ngImport: i0, template: `
         <span
             class="k-treeview-filter"
             *ngIf="filterable"
         >
             <kendo-textbox
+                #searchbox
                 [size]="size"
                 [value]="filter"
                 [clearButton]="true"
@@ -2755,7 +2773,8 @@ TreeViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
         </span>
         <ul class="k-treeview-lines"
             kendoTreeViewGroup
-            role="group"
+            [attr.id]="treeviewId"
+            role="tree"
             [size]="size"
             [loadOnDemand]="loadOnDemand"
             [checkboxes]="checkboxes"
@@ -2794,6 +2813,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             *ngIf="filterable"
         >
             <kendo-textbox
+                #searchbox
                 [size]="size"
                 [value]="filter"
                 [clearButton]="true"
@@ -2812,7 +2832,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         </span>
         <ul class="k-treeview-lines"
             kendoTreeViewGroup
-            role="group"
+            [attr.id]="treeviewId"
+            role="tree"
             [size]="size"
             [loadOnDemand]="loadOnDemand"
             [checkboxes]="checkboxes"
@@ -2842,15 +2863,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: ExpandStateService }, { type: NavigationService }, { type: NodeChildrenService }, { type: SelectionService }, { type: TreeViewLookupService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: DataChangeNotificationService }, { type: i1.LocalizationService }]; }, propDecorators: { classNames: [{
                 type: HostBinding,
                 args: ["class.k-treeview"]
-            }], role: [{
-                type: HostBinding,
-                args: ["attr.role"]
             }], direction: [{
                 type: HostBinding,
                 args: ["attr.dir"]
             }], assetsContainer: [{
                 type: ViewChild,
                 args: ['assetsContainer', { read: ViewContainerRef, static: true }]
+            }], searchbox: [{
+                type: ViewChild,
+                args: ['searchbox']
             }], filterInputPlaceholder: [{
                 type: Input
             }], expandDisabledNodes: [{

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-treeview",
-  "version": "12.0.2-develop.2",
+  "version": "12.0.2-develop.3",
   "description": "Kendo UI TreeView for Angular",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -23,15 +23,15 @@
     "@angular/core": "13 - 16",
     "@angular/platform-browser": "13 - 16",
     "@progress/kendo-licensing": "^1.0.2",
-    "@progress/kendo-angular-common": "12.0.2-develop.2",
-    "@progress/kendo-angular-inputs": "12.0.2-develop.2",
-    "@progress/kendo-angular-icons": "12.0.2-develop.2",
-    "@progress/kendo-angular-l10n": "12.0.2-develop.2",
+    "@progress/kendo-angular-common": "12.0.2-develop.3",
+    "@progress/kendo-angular-inputs": "12.0.2-develop.3",
+    "@progress/kendo-angular-icons": "12.0.2-develop.3",
+    "@progress/kendo-angular-l10n": "12.0.2-develop.3",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "12.0.2-develop.2",
+    "@progress/kendo-angular-schematics": "12.0.2-develop.3",
     "@progress/kendo-common": "^0.2.0",
     "@progress/kendo-draggable": "^3.0.2"
   },

package/schematics/ngAdd/index.js

@@ -4,10 +4,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': '12.0.2-develop.2',
-            '@progress/kendo-angular-dialog': '12.0.2-develop.2',
-            '@progress/kendo-angular-intl': '12.0.2-develop.2',
-            '@progress/kendo-angular-popup': '12.0.2-develop.2',
+            '@progress/kendo-angular-buttons': '12.0.2-develop.3',
+            '@progress/kendo-angular-dialog': '12.0.2-develop.3',
+            '@progress/kendo-angular-intl': '12.0.2-develop.3',
+            '@progress/kendo-angular-popup': '12.0.2-develop.3',
             '@progress/kendo-drawing': '^1.9.3',
             // Peer dependency of icons
             '@progress/kendo-svg-icons': '^1.0.0'

package/treeview-group.component.d.ts

@@ -37,7 +37,7 @@ export declare class TreeViewGroupComponent implements OnChanges, OnInit, OnDest
      */
     caretAltRightIcon: SVGIcon;
     kGroupClass: boolean;
-    role: string;
+    get role(): string;
     checkboxes: boolean;
     expandIcons: boolean;
     disabled: boolean;

package/treeview.component.d.ts

@@ -2,7 +2,7 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { ElementRef, EventEmitter, NgZone, OnChanges, OnDestroy, OnInit, Renderer2, ViewContainerRef, TrackByFunction, SimpleChanges, ChangeDetectorRef } from '@angular/core';
+import { ElementRef, EventEmitter, NgZone, OnChanges, OnDestroy, OnInit, Renderer2, ViewContainerRef, TrackByFunction, SimpleChanges, ChangeDetectorRef, AfterViewInit } from '@angular/core';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { CheckedState } from './checkbox/checked-state';
@@ -23,6 +23,7 @@ import { TreeItemDropEvent, TreeItemAddRemoveArgs, EditService, TreeItemDragEven
 import { FilterState } from './filter-state.interface';
 import { TreeViewSize } from './size';
 import { SVGIcon } from '@progress/kendo-svg-icons';
+import { TextBoxComponent } from '@progress/kendo-angular-inputs';
 import * as i0 from "@angular/core";
 /**
  * Represents the [Kendo UI TreeView component for Angular]({% slug overview_treeview %}).
@@ -34,7 +35,7 @@ import * as i0 from "@angular/core";
  * {% embed_file shared/main.ts %}
  * {% endmeta %}
  */
-export declare class TreeViewComponent implements OnChanges, OnInit, OnDestroy, DataBoundComponent {
+export declare class TreeViewComponent implements OnChanges, OnInit, AfterViewInit, OnDestroy, DataBoundComponent {
     element: ElementRef<HTMLElement>;
     changeDetectorRef: ChangeDetectorRef;
     protected expandService: ExpandStateService;
@@ -51,13 +52,16 @@ export declare class TreeViewComponent implements OnChanges, OnInit, OnDestroy,
      */
     searchIcon: SVGIcon;
     classNames: boolean;
-    role: string;
     /** @hidden */
     get direction(): string;
     /**
      * @hidden
      */
     assetsContainer: ViewContainerRef;
+    /**
+     * @hidden
+     */
+    searchbox: TextBoxComponent;
     /**
      * The hint which is displayed when the component is empty.
      */
@@ -297,6 +301,10 @@ export declare class TreeViewComponent implements OnChanges, OnInit, OnDestroy,
      */
     set size(size: TreeViewSize);
     get size(): TreeViewSize;
+    /**
+     * @hidden
+     */
+    get treeviewId(): string;
     /**
      * Indicates whether only parent nodes should be disabled or their child nodes as well
      * @default false
@@ -326,10 +334,12 @@ export declare class TreeViewComponent implements OnChanges, OnInit, OnDestroy,
     private _size;
     private subscriptions;
     private domSubscriptions;
+    private _nextId;
     constructor(element: ElementRef<HTMLElement>, changeDetectorRef: ChangeDetectorRef, expandService: ExpandStateService, navigationService: NavigationService, nodeChildrenService: NodeChildrenService, selectionService: SelectionService, treeViewLookupService: TreeViewLookupService, ngZone: NgZone, renderer: Renderer2, dataChangeNotification: DataChangeNotificationService, localization: LocalizationService);
     ngOnChanges(changes: SimpleChanges): void;
     ngOnDestroy(): void;
     ngOnInit(): void;
+    ngAfterViewInit(): void;
     /**
      * Blurs the focused TreeView item.
      */