@progress/kendo-angular-treeview 11.0.0-develop.98 → 11.0.0

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

@@ -10,11 +10,14 @@ import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { Subject, of, Subscription, EMPTY, BehaviorSubject, merge } from 'rxjs';
 import { validatePackage } from '@progress/kendo-licensing';
 import { getter, setter } from '@progress/kendo-common';
-import * as i8 from '@progress/kendo-angular-inputs';
+import { caretAltDownIcon, caretAltRightIcon, searchIcon, cancelIcon, insertMiddleIcon, insertBottomIcon, insertTopIcon, plusIcon } from '@progress/kendo-svg-icons';
+import * as i8$1 from '@progress/kendo-angular-inputs';
 import { InputsModule } from '@progress/kendo-angular-inputs';
+import * as i8 from '@progress/kendo-angular-icons';
+import { IconsModule } from '@progress/kendo-angular-icons';
 import { trigger, transition, style, animate } from '@angular/animations';
 import { filter, tap, switchMap, delay, takeUntil, catchError, finalize, take, map } from 'rxjs/operators';
-import * as i9 from '@angular/common';
+import * as i10 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { Draggable } from '@progress/kendo-draggable';
 
@@ -25,8 +28,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-treeview',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1673460802,
-    version: '',
+    publishDate: 1674032380,
+    version: '11.0.0',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -1525,6 +1528,14 @@ class TreeViewGroupComponent {
         this.nodeChildrenService = nodeChildrenService;
         this.dataChangeNotification = dataChangeNotification;
         this.changeDetectorRef = changeDetectorRef;
+        /**
+         * @hidden
+         */
+        this.caretAltDownIcon = caretAltDownIcon;
+        /**
+         * @hidden
+         */
+        this.caretAltRightIcon = caretAltRightIcon;
         this.kGroupClass = true;
         this.role = 'group';
         this.loadOnDemand = true;
@@ -1543,6 +1554,12 @@ class TreeViewGroupComponent {
         this.children = () => of([]);
         this.hasChildren = () => false;
     }
+    getFontIcon(node, index) {
+        return this.isExpanded(node, index) ? 'caret-alt-down' : 'caret-alt-right';
+    }
+    getSvgIcon(node, index) {
+        return this.isExpanded(node, index) ? caretAltDownIcon : caretAltRightIcon;
+    }
     get moreNodesAvailable() {
         if (!isPresent(this.loadMoreService) || this.data.length === 0) {
             return false;
@@ -1693,7 +1710,7 @@ class TreeViewGroupComponent {
             skip: this.data.length,
             take: this.loadMoreService.getInitialPageSize(this.parentDataItem)
         })
-            .pipe(finalize(() => this.loadingMoreNodes = false))
+            .pipe(finalize(() => this.loadingMoreNodes = true))
             .subscribe(items => {
             if (!(Array.isArray(items) && items.length > 0)) {
                 return;
@@ -1756,7 +1773,7 @@ TreeViewGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
         <li
             *ngFor="let node of data; let index = index; trackBy: trackBy"
             class="k-treeview-item"
-            [class.k-display-none]="!isVisible(node, nodeIndex(index))"
+            [class.k-hidden]="!isVisible(node, nodeIndex(index))"
             kendoTreeViewItem
             [attr.aria-setsize]="totalNodesCount"
             [dataItem]="node"
@@ -1782,12 +1799,11 @@ TreeViewGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                     (click)="expandNode(nodeIndex(index), node, !isExpanded(node, nodeIndex(index)))"
                     *ngIf="expandIcons && hasChildren(node)"
                 >
-                    <span
-                        class="k-icon"
-                        [class.k-i-caret-alt-down]="isExpanded(node, nodeIndex(index))"
-                        [class.k-i-caret-alt-right]="!isExpanded(node, nodeIndex(index))"
-                    >
-                    </span>
+                    <kendo-icon-wrapper
+                        [name]="getFontIcon(node, nodeIndex(index))"
+                        [svgIcon]="getSvgIcon(node, nodeIndex(index))"
+                        >
+                    </kendo-icon-wrapper>
                 </span>
                 <kendo-checkbox
                     *ngIf="checkboxes"
@@ -1876,7 +1892,7 @@ TreeViewGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             <div class="k-treeview-bot">
                 <span
                     *ngIf="loadingMoreNodes"
-                    class="k-icon k-i-loading k-i-caret-alt-right"
+                    class="k-icon k-i-loading"
                 >
                 </span>
                 <span
@@ -1901,7 +1917,7 @@ TreeViewGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 </span>
             </div>
         </li>
-    `, isInline: true, components: [{ type: CheckBoxComponent, selector: "kendo-checkbox", inputs: ["id", "isChecked", "node", "index", "labelText", "tabindex", "size"], outputs: ["checkStateChange"] }, { type: TreeViewGroupComponent, selector: "[kendoTreeViewGroup]", inputs: ["checkboxes", "expandIcons", "disabled", "selectable", "touchActions", "disableParentNodesOnly", "loadOnDemand", "trackBy", "nodes", "textField", "parentDataItem", "parentIndex", "nodeTemplateRef", "loadMoreButtonTemplateRef", "loadMoreService", "size", "expandDisabledNodes", "isChecked", "isDisabled", "isExpanded", "isVisible", "isSelected", "children", "hasChildren"] }], directives: [{ type: i9.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: TreeViewItemDirective, selector: "[kendoTreeViewItem]", inputs: ["dataItem", "index", "parentDataItem", "parentIndex", "role", "loadOnDemand", "checkable", "selectable", "expandable", "isChecked", "isDisabled", "isVisible", "isExpanded", "isSelected"] }, { type: i9.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: LoadingIndicatorDirective, selector: "[kendoTreeViewLoading]", inputs: ["kendoTreeViewLoading"] }, { type: TreeViewItemContentDirective, selector: "[kendoTreeViewItemContent]", inputs: ["dataItem", "index", "initialSelection", "isSelected"] }, { type: i9.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i9.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i9.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i9.NgSwitchDefault, selector: "[ngSwitchDefault]" }], animations: [
+    `, isInline: true, components: [{ type: i8.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: CheckBoxComponent, selector: "kendo-checkbox", inputs: ["id", "isChecked", "node", "index", "labelText", "tabindex", "size"], outputs: ["checkStateChange"] }, { type: TreeViewGroupComponent, selector: "[kendoTreeViewGroup]", inputs: ["checkboxes", "expandIcons", "disabled", "selectable", "touchActions", "disableParentNodesOnly", "loadOnDemand", "trackBy", "nodes", "textField", "parentDataItem", "parentIndex", "nodeTemplateRef", "loadMoreButtonTemplateRef", "loadMoreService", "size", "expandDisabledNodes", "isChecked", "isDisabled", "isExpanded", "isVisible", "isSelected", "children", "hasChildren"] }], directives: [{ type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: TreeViewItemDirective, selector: "[kendoTreeViewItem]", inputs: ["dataItem", "index", "parentDataItem", "parentIndex", "role", "loadOnDemand", "checkable", "selectable", "expandable", "isChecked", "isDisabled", "isVisible", "isExpanded", "isSelected"] }, { type: i10.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: LoadingIndicatorDirective, selector: "[kendoTreeViewLoading]", inputs: ["kendoTreeViewLoading"] }, { type: TreeViewItemContentDirective, selector: "[kendoTreeViewItemContent]", inputs: ["dataItem", "index", "initialSelection", "isSelected"] }, { type: i10.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i10.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i10.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i10.NgSwitchDefault, selector: "[ngSwitchDefault]" }], animations: [
         trigger('toggle', [
             transition('void => *', [
                 style({ height: 0 }),
@@ -1934,7 +1950,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         <li
             *ngFor="let node of data; let index = index; trackBy: trackBy"
             class="k-treeview-item"
-            [class.k-display-none]="!isVisible(node, nodeIndex(index))"
+            [class.k-hidden]="!isVisible(node, nodeIndex(index))"
             kendoTreeViewItem
             [attr.aria-setsize]="totalNodesCount"
             [dataItem]="node"
@@ -1960,12 +1976,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     (click)="expandNode(nodeIndex(index), node, !isExpanded(node, nodeIndex(index)))"
                     *ngIf="expandIcons && hasChildren(node)"
                 >
-                    <span
-                        class="k-icon"
-                        [class.k-i-caret-alt-down]="isExpanded(node, nodeIndex(index))"
-                        [class.k-i-caret-alt-right]="!isExpanded(node, nodeIndex(index))"
-                    >
-                    </span>
+                    <kendo-icon-wrapper
+                        [name]="getFontIcon(node, nodeIndex(index))"
+                        [svgIcon]="getSvgIcon(node, nodeIndex(index))"
+                        >
+                    </kendo-icon-wrapper>
                 </span>
                 <kendo-checkbox
                     *ngIf="checkboxes"
@@ -2054,7 +2069,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             <div class="k-treeview-bot">
                 <span
                     *ngIf="loadingMoreNodes"
-                    class="k-icon k-i-loading k-i-caret-alt-right"
+                    class="k-icon k-i-loading"
                 >
                 </span>
                 <span
@@ -2184,6 +2199,10 @@ class TreeViewComponent {
         this.renderer = renderer;
         this.dataChangeNotification = dataChangeNotification;
         this.localization = localization;
+        /**
+         * @hidden
+         */
+        this.searchIcon = searchIcon;
         this.classNames = true;
         this.role = 'tree';
         /**
@@ -2307,7 +2326,7 @@ class TreeViewComponent {
          */
         this.isDisabled = isDisabled;
         /**
-         * A callback which determines whether a TreeView node should be rendered as hidden. The utility .k-display-none class is used to hide the nodes.
+         * A callback which determines whether a TreeView node should be rendered as hidden. The utility .k-hidden class is used to hide the nodes.
          * Useful for custom filtering implementations.
          */
         this.isVisible = isVisible;
@@ -2729,7 +2748,12 @@ TreeViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
                 [placeholder]="filterInputPlaceholder"
             >
                 <ng-template kendoTextBoxPrefixTemplate>
-                    <span class="k-input-icon k-icon k-i-search"></span>
+                    <kendo-icon-wrapper
+                        innerCssClass="k-input-icon"
+                        name="search"
+                        [svgIcon]="searchIcon"
+                        >
+                    </kendo-icon-wrapper>
                 </ng-template>
             </kendo-textbox>
         </span>
@@ -2760,7 +2784,7 @@ TreeViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
         >
         </ul>
         <ng-container #assetsContainer></ng-container>
-    `, isInline: true, components: [{ type: i8.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "errorIcon", "clearButtonIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { type: TreeViewGroupComponent, selector: "[kendoTreeViewGroup]", inputs: ["checkboxes", "expandIcons", "disabled", "selectable", "touchActions", "disableParentNodesOnly", "loadOnDemand", "trackBy", "nodes", "textField", "parentDataItem", "parentIndex", "nodeTemplateRef", "loadMoreButtonTemplateRef", "loadMoreService", "size", "expandDisabledNodes", "isChecked", "isDisabled", "isExpanded", "isVisible", "isSelected", "children", "hasChildren"] }], directives: [{ type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.TextBoxPrefixTemplateDirective, selector: "[kendoTextBoxPrefixTemplate]" }], changeDetection: i0.ChangeDetectionStrategy.Default });
+    `, isInline: true, components: [{ type: i8$1.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "errorIcon", "clearButtonIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { type: i8.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: TreeViewGroupComponent, selector: "[kendoTreeViewGroup]", inputs: ["checkboxes", "expandIcons", "disabled", "selectable", "touchActions", "disableParentNodesOnly", "loadOnDemand", "trackBy", "nodes", "textField", "parentDataItem", "parentIndex", "nodeTemplateRef", "loadMoreButtonTemplateRef", "loadMoreService", "size", "expandDisabledNodes", "isChecked", "isDisabled", "isExpanded", "isVisible", "isSelected", "children", "hasChildren"] }], directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8$1.TextBoxPrefixTemplateDirective, selector: "[kendoTextBoxPrefixTemplate]" }], changeDetection: i0.ChangeDetectionStrategy.Default });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TreeViewComponent, decorators: [{
             type: Component,
             args: [{
@@ -2781,7 +2805,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 [placeholder]="filterInputPlaceholder"
             >
                 <ng-template kendoTextBoxPrefixTemplate>
-                    <span class="k-input-icon k-icon k-i-search"></span>
+                    <kendo-icon-wrapper
+                        innerCssClass="k-input-icon"
+                        name="search"
+                        [svgIcon]="searchIcon"
+                        >
+                    </kendo-icon-wrapper>
                 </ng-template>
             </kendo-textbox>
         </span>
@@ -4110,12 +4139,22 @@ class DragClueComponent {
     }
     get statusIconClass() {
         switch (this.action) {
-            case DropAction.Add: return 'k-i-plus';
-            case DropAction.InsertTop: return 'k-i-insert-top';
-            case DropAction.InsertBottom: return 'k-i-insert-bottom';
-            case DropAction.InsertMiddle: return 'k-i-insert-middle';
+            case DropAction.Add: return 'plus';
+            case DropAction.InsertTop: return 'insert-top';
+            case DropAction.InsertBottom: return 'insert-bottom';
+            case DropAction.InsertMiddle: return 'insert-middle';
             case DropAction.Invalid:
-            default: return 'k-i-cancel';
+            default: return 'cancel';
+        }
+    }
+    get statusSVGIcon() {
+        switch (this.action) {
+            case DropAction.Add: return plusIcon;
+            case DropAction.InsertTop: return insertTopIcon;
+            case DropAction.InsertBottom: return insertBottomIcon;
+            case DropAction.InsertMiddle: return insertMiddleIcon;
+            case DropAction.Invalid:
+            default: return cancelIcon;
         }
     }
     // exposed as a public method that can be called from outside as the component uses `OnPush` strategy
@@ -4126,7 +4165,12 @@ class DragClueComponent {
 DragClueComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DragClueComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 DragClueComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: DragClueComponent, selector: "kendo-treeview-drag-clue", host: { properties: { "class.k-header": "this.hostClasses", "class.k-drag-clue": "this.hostClasses", "style.position": "this.posistionStyle" } }, ngImport: i0, template: `
         <ng-container *ngIf="!template">
-            <span class="k-icon {{statusIconClass}} k-drag-status"></span>
+            <kendo-icon-wrapper
+                innerCssClass="k-drag-status"
+                [name]="statusIconClass"
+                [svgIcon]="statusSVGIcon"
+                >
+            </kendo-icon-wrapper>
             <span>{{text}}</span>
         </ng-container>
 
@@ -4141,7 +4185,7 @@ DragClueComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             }"
         >
         </ng-template>
-    `, isInline: true, directives: [{ type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, components: [{ type: i8.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DragClueComponent, decorators: [{
             type: Component,
             args: [{
@@ -4149,7 +4193,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     selector: 'kendo-treeview-drag-clue',
                     template: `
         <ng-container *ngIf="!template">
-            <span class="k-icon {{statusIconClass}} k-drag-status"></span>
+            <kendo-icon-wrapper
+                innerCssClass="k-drag-status"
+                [name]="statusIconClass"
+                [svgIcon]="statusSVGIcon"
+                >
+            </kendo-icon-wrapper>
             <span>{{text}}</span>
         </ng-container>
 
@@ -4366,7 +4415,7 @@ DropHintComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             }"
         >
         <ng-template>
-    `, isInline: true, directives: [{ type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DropHintComponent, decorators: [{
             type: Component,
             args: [{
@@ -5370,7 +5419,8 @@ SharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         LoadMoreDirective,
         LoadMoreButtonTemplateDirective], imports: [CommonModule,
         CheckBoxModule,
-        InputsModule], exports: [TreeViewComponent,
+        InputsModule,
+        IconsModule], exports: [TreeViewComponent,
         TreeViewGroupComponent,
         TreeViewItemDirective,
         TreeViewItemContentDirective,
@@ -5393,7 +5443,8 @@ SharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
 SharedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SharedModule, imports: [[
             CommonModule,
             CheckBoxModule,
-            InputsModule
+            InputsModule,
+            IconsModule
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SharedModule, decorators: [{
             type: NgModule,
@@ -5403,7 +5454,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     imports: [
                         CommonModule,
                         CheckBoxModule,
-                        InputsModule
+                        InputsModule,
+                        IconsModule
                     ],
                     entryComponents: [
                         DragClueComponent,

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

@@ -10,11 +10,14 @@ import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { Subject, of, Subscription, EMPTY, BehaviorSubject, merge } from 'rxjs';
 import { validatePackage } from '@progress/kendo-licensing';
 import { getter, setter } from '@progress/kendo-common';
-import * as i8 from '@progress/kendo-angular-inputs';
+import { caretAltDownIcon, caretAltRightIcon, searchIcon, cancelIcon, insertMiddleIcon, insertBottomIcon, insertTopIcon, plusIcon } from '@progress/kendo-svg-icons';
+import * as i8$1 from '@progress/kendo-angular-inputs';
 import { InputsModule } from '@progress/kendo-angular-inputs';
+import * as i8 from '@progress/kendo-angular-icons';
+import { IconsModule } from '@progress/kendo-angular-icons';
 import { trigger, transition, style, animate } from '@angular/animations';
 import { filter, tap, switchMap, delay, takeUntil, catchError, finalize, take, map } from 'rxjs/operators';
-import * as i9 from '@angular/common';
+import * as i10 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { Draggable } from '@progress/kendo-draggable';
 
@@ -25,8 +28,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-treeview',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1673460802,
-    version: '',
+    publishDate: 1674032380,
+    version: '11.0.0',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -1521,6 +1524,14 @@ class TreeViewGroupComponent {
         this.nodeChildrenService = nodeChildrenService;
         this.dataChangeNotification = dataChangeNotification;
         this.changeDetectorRef = changeDetectorRef;
+        /**
+         * @hidden
+         */
+        this.caretAltDownIcon = caretAltDownIcon;
+        /**
+         * @hidden
+         */
+        this.caretAltRightIcon = caretAltRightIcon;
         this.kGroupClass = true;
         this.role = 'group';
         this.loadOnDemand = true;
@@ -1539,6 +1550,12 @@ class TreeViewGroupComponent {
         this.children = () => of([]);
         this.hasChildren = () => false;
     }
+    getFontIcon(node, index) {
+        return this.isExpanded(node, index) ? 'caret-alt-down' : 'caret-alt-right';
+    }
+    getSvgIcon(node, index) {
+        return this.isExpanded(node, index) ? caretAltDownIcon : caretAltRightIcon;
+    }
     get moreNodesAvailable() {
         if (!isPresent(this.loadMoreService) || this.data.length === 0) {
             return false;
@@ -1689,7 +1706,7 @@ class TreeViewGroupComponent {
             skip: this.data.length,
             take: this.loadMoreService.getInitialPageSize(this.parentDataItem)
         })
-            .pipe(finalize(() => this.loadingMoreNodes = false))
+            .pipe(finalize(() => this.loadingMoreNodes = true))
             .subscribe(items => {
             if (!(Array.isArray(items) && items.length > 0)) {
                 return;
@@ -1752,7 +1769,7 @@ TreeViewGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
         <li
             *ngFor="let node of data; let index = index; trackBy: trackBy"
             class="k-treeview-item"
-            [class.k-display-none]="!isVisible(node, nodeIndex(index))"
+            [class.k-hidden]="!isVisible(node, nodeIndex(index))"
             kendoTreeViewItem
             [attr.aria-setsize]="totalNodesCount"
             [dataItem]="node"
@@ -1778,12 +1795,11 @@ TreeViewGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                     (click)="expandNode(nodeIndex(index), node, !isExpanded(node, nodeIndex(index)))"
                     *ngIf="expandIcons && hasChildren(node)"
                 >
-                    <span
-                        class="k-icon"
-                        [class.k-i-caret-alt-down]="isExpanded(node, nodeIndex(index))"
-                        [class.k-i-caret-alt-right]="!isExpanded(node, nodeIndex(index))"
-                    >
-                    </span>
+                    <kendo-icon-wrapper
+                        [name]="getFontIcon(node, nodeIndex(index))"
+                        [svgIcon]="getSvgIcon(node, nodeIndex(index))"
+                        >
+                    </kendo-icon-wrapper>
                 </span>
                 <kendo-checkbox
                     *ngIf="checkboxes"
@@ -1872,7 +1888,7 @@ TreeViewGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             <div class="k-treeview-bot">
                 <span
                     *ngIf="loadingMoreNodes"
-                    class="k-icon k-i-loading k-i-caret-alt-right"
+                    class="k-icon k-i-loading"
                 >
                 </span>
                 <span
@@ -1897,7 +1913,7 @@ TreeViewGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 </span>
             </div>
         </li>
-    `, isInline: true, components: [{ type: CheckBoxComponent, selector: "kendo-checkbox", inputs: ["id", "isChecked", "node", "index", "labelText", "tabindex", "size"], outputs: ["checkStateChange"] }, { type: TreeViewGroupComponent, selector: "[kendoTreeViewGroup]", inputs: ["checkboxes", "expandIcons", "disabled", "selectable", "touchActions", "disableParentNodesOnly", "loadOnDemand", "trackBy", "nodes", "textField", "parentDataItem", "parentIndex", "nodeTemplateRef", "loadMoreButtonTemplateRef", "loadMoreService", "size", "expandDisabledNodes", "isChecked", "isDisabled", "isExpanded", "isVisible", "isSelected", "children", "hasChildren"] }], directives: [{ type: i9.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: TreeViewItemDirective, selector: "[kendoTreeViewItem]", inputs: ["dataItem", "index", "parentDataItem", "parentIndex", "role", "loadOnDemand", "checkable", "selectable", "expandable", "isChecked", "isDisabled", "isVisible", "isExpanded", "isSelected"] }, { type: i9.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: LoadingIndicatorDirective, selector: "[kendoTreeViewLoading]", inputs: ["kendoTreeViewLoading"] }, { type: TreeViewItemContentDirective, selector: "[kendoTreeViewItemContent]", inputs: ["dataItem", "index", "initialSelection", "isSelected"] }, { type: i9.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i9.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i9.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i9.NgSwitchDefault, selector: "[ngSwitchDefault]" }], animations: [
+    `, isInline: true, components: [{ type: i8.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: CheckBoxComponent, selector: "kendo-checkbox", inputs: ["id", "isChecked", "node", "index", "labelText", "tabindex", "size"], outputs: ["checkStateChange"] }, { type: TreeViewGroupComponent, selector: "[kendoTreeViewGroup]", inputs: ["checkboxes", "expandIcons", "disabled", "selectable", "touchActions", "disableParentNodesOnly", "loadOnDemand", "trackBy", "nodes", "textField", "parentDataItem", "parentIndex", "nodeTemplateRef", "loadMoreButtonTemplateRef", "loadMoreService", "size", "expandDisabledNodes", "isChecked", "isDisabled", "isExpanded", "isVisible", "isSelected", "children", "hasChildren"] }], directives: [{ type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: TreeViewItemDirective, selector: "[kendoTreeViewItem]", inputs: ["dataItem", "index", "parentDataItem", "parentIndex", "role", "loadOnDemand", "checkable", "selectable", "expandable", "isChecked", "isDisabled", "isVisible", "isExpanded", "isSelected"] }, { type: i10.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: LoadingIndicatorDirective, selector: "[kendoTreeViewLoading]", inputs: ["kendoTreeViewLoading"] }, { type: TreeViewItemContentDirective, selector: "[kendoTreeViewItemContent]", inputs: ["dataItem", "index", "initialSelection", "isSelected"] }, { type: i10.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i10.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i10.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i10.NgSwitchDefault, selector: "[ngSwitchDefault]" }], animations: [
         trigger('toggle', [
             transition('void => *', [
                 style({ height: 0 }),
@@ -1930,7 +1946,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         <li
             *ngFor="let node of data; let index = index; trackBy: trackBy"
             class="k-treeview-item"
-            [class.k-display-none]="!isVisible(node, nodeIndex(index))"
+            [class.k-hidden]="!isVisible(node, nodeIndex(index))"
             kendoTreeViewItem
             [attr.aria-setsize]="totalNodesCount"
             [dataItem]="node"
@@ -1956,12 +1972,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     (click)="expandNode(nodeIndex(index), node, !isExpanded(node, nodeIndex(index)))"
                     *ngIf="expandIcons && hasChildren(node)"
                 >
-                    <span
-                        class="k-icon"
-                        [class.k-i-caret-alt-down]="isExpanded(node, nodeIndex(index))"
-                        [class.k-i-caret-alt-right]="!isExpanded(node, nodeIndex(index))"
-                    >
-                    </span>
+                    <kendo-icon-wrapper
+                        [name]="getFontIcon(node, nodeIndex(index))"
+                        [svgIcon]="getSvgIcon(node, nodeIndex(index))"
+                        >
+                    </kendo-icon-wrapper>
                 </span>
                 <kendo-checkbox
                     *ngIf="checkboxes"
@@ -2050,7 +2065,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             <div class="k-treeview-bot">
                 <span
                     *ngIf="loadingMoreNodes"
-                    class="k-icon k-i-loading k-i-caret-alt-right"
+                    class="k-icon k-i-loading"
                 >
                 </span>
                 <span
@@ -2180,6 +2195,10 @@ class TreeViewComponent {
         this.renderer = renderer;
         this.dataChangeNotification = dataChangeNotification;
         this.localization = localization;
+        /**
+         * @hidden
+         */
+        this.searchIcon = searchIcon;
         this.classNames = true;
         this.role = 'tree';
         /**
@@ -2303,7 +2322,7 @@ class TreeViewComponent {
          */
         this.isDisabled = isDisabled;
         /**
-         * A callback which determines whether a TreeView node should be rendered as hidden. The utility .k-display-none class is used to hide the nodes.
+         * A callback which determines whether a TreeView node should be rendered as hidden. The utility .k-hidden class is used to hide the nodes.
          * Useful for custom filtering implementations.
          */
         this.isVisible = isVisible;
@@ -2725,7 +2744,12 @@ TreeViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
                 [placeholder]="filterInputPlaceholder"
             >
                 <ng-template kendoTextBoxPrefixTemplate>
-                    <span class="k-input-icon k-icon k-i-search"></span>
+                    <kendo-icon-wrapper
+                        innerCssClass="k-input-icon"
+                        name="search"
+                        [svgIcon]="searchIcon"
+                        >
+                    </kendo-icon-wrapper>
                 </ng-template>
             </kendo-textbox>
         </span>
@@ -2756,7 +2780,7 @@ TreeViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
         >
         </ul>
         <ng-container #assetsContainer></ng-container>
-    `, isInline: true, components: [{ type: i8.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "errorIcon", "clearButtonIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { type: TreeViewGroupComponent, selector: "[kendoTreeViewGroup]", inputs: ["checkboxes", "expandIcons", "disabled", "selectable", "touchActions", "disableParentNodesOnly", "loadOnDemand", "trackBy", "nodes", "textField", "parentDataItem", "parentIndex", "nodeTemplateRef", "loadMoreButtonTemplateRef", "loadMoreService", "size", "expandDisabledNodes", "isChecked", "isDisabled", "isExpanded", "isVisible", "isSelected", "children", "hasChildren"] }], directives: [{ type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.TextBoxPrefixTemplateDirective, selector: "[kendoTextBoxPrefixTemplate]" }], changeDetection: i0.ChangeDetectionStrategy.Default });
+    `, isInline: true, components: [{ type: i8$1.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "errorIcon", "clearButtonIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { type: i8.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: TreeViewGroupComponent, selector: "[kendoTreeViewGroup]", inputs: ["checkboxes", "expandIcons", "disabled", "selectable", "touchActions", "disableParentNodesOnly", "loadOnDemand", "trackBy", "nodes", "textField", "parentDataItem", "parentIndex", "nodeTemplateRef", "loadMoreButtonTemplateRef", "loadMoreService", "size", "expandDisabledNodes", "isChecked", "isDisabled", "isExpanded", "isVisible", "isSelected", "children", "hasChildren"] }], directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8$1.TextBoxPrefixTemplateDirective, selector: "[kendoTextBoxPrefixTemplate]" }], changeDetection: i0.ChangeDetectionStrategy.Default });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TreeViewComponent, decorators: [{
             type: Component,
             args: [{
@@ -2777,7 +2801,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 [placeholder]="filterInputPlaceholder"
             >
                 <ng-template kendoTextBoxPrefixTemplate>
-                    <span class="k-input-icon k-icon k-i-search"></span>
+                    <kendo-icon-wrapper
+                        innerCssClass="k-input-icon"
+                        name="search"
+                        [svgIcon]="searchIcon"
+                        >
+                    </kendo-icon-wrapper>
                 </ng-template>
             </kendo-textbox>
         </span>
@@ -4021,12 +4050,22 @@ class DragClueComponent {
     }
     get statusIconClass() {
         switch (this.action) {
-            case DropAction.Add: return 'k-i-plus';
-            case DropAction.InsertTop: return 'k-i-insert-top';
-            case DropAction.InsertBottom: return 'k-i-insert-bottom';
-            case DropAction.InsertMiddle: return 'k-i-insert-middle';
+            case DropAction.Add: return 'plus';
+            case DropAction.InsertTop: return 'insert-top';
+            case DropAction.InsertBottom: return 'insert-bottom';
+            case DropAction.InsertMiddle: return 'insert-middle';
             case DropAction.Invalid:
-            default: return 'k-i-cancel';
+            default: return 'cancel';
+        }
+    }
+    get statusSVGIcon() {
+        switch (this.action) {
+            case DropAction.Add: return plusIcon;
+            case DropAction.InsertTop: return insertTopIcon;
+            case DropAction.InsertBottom: return insertBottomIcon;
+            case DropAction.InsertMiddle: return insertMiddleIcon;
+            case DropAction.Invalid:
+            default: return cancelIcon;
         }
     }
     // exposed as a public method that can be called from outside as the component uses `OnPush` strategy
@@ -4037,7 +4076,12 @@ class DragClueComponent {
 DragClueComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DragClueComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 DragClueComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: DragClueComponent, selector: "kendo-treeview-drag-clue", host: { properties: { "class.k-header": "this.hostClasses", "class.k-drag-clue": "this.hostClasses", "style.position": "this.posistionStyle" } }, ngImport: i0, template: `
         <ng-container *ngIf="!template">
-            <span class="k-icon {{statusIconClass}} k-drag-status"></span>
+            <kendo-icon-wrapper
+                innerCssClass="k-drag-status"
+                [name]="statusIconClass"
+                [svgIcon]="statusSVGIcon"
+                >
+            </kendo-icon-wrapper>
             <span>{{text}}</span>
         </ng-container>
 
@@ -4052,7 +4096,7 @@ DragClueComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             }"
         >
         </ng-template>
-    `, isInline: true, directives: [{ type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, components: [{ type: i8.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DragClueComponent, decorators: [{
             type: Component,
             args: [{
@@ -4060,7 +4104,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     selector: 'kendo-treeview-drag-clue',
                     template: `
         <ng-container *ngIf="!template">
-            <span class="k-icon {{statusIconClass}} k-drag-status"></span>
+            <kendo-icon-wrapper
+                innerCssClass="k-drag-status"
+                [name]="statusIconClass"
+                [svgIcon]="statusSVGIcon"
+                >
+            </kendo-icon-wrapper>
             <span>{{text}}</span>
         </ng-container>
 
@@ -4277,7 +4326,7 @@ DropHintComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             }"
         >
         <ng-template>
-    `, isInline: true, directives: [{ type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DropHintComponent, decorators: [{
             type: Component,
             args: [{
@@ -5362,7 +5411,8 @@ SharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         LoadMoreDirective,
         LoadMoreButtonTemplateDirective], imports: [CommonModule,
         CheckBoxModule,
-        InputsModule], exports: [TreeViewComponent,
+        InputsModule,
+        IconsModule], exports: [TreeViewComponent,
         TreeViewGroupComponent,
         TreeViewItemDirective,
         TreeViewItemContentDirective,
@@ -5385,7 +5435,8 @@ SharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
 SharedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SharedModule, imports: [[
             CommonModule,
             CheckBoxModule,
-            InputsModule
+            InputsModule,
+            IconsModule
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SharedModule, decorators: [{
             type: NgModule,
@@ -5395,7 +5446,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     imports: [
                         CommonModule,
                         CheckBoxModule,
-                        InputsModule
+                        InputsModule,
+                        IconsModule
                     ],
                     entryComponents: [
                         DragClueComponent,