@progress/kendo-angular-dropdowns 11.0.0-develop.92 → 11.0.0-develop.94

package/esm2020/dropdownlist/dropdownlist.component.mjs

@@ -31,6 +31,7 @@ import { DataService } from '../common/data.service';
 import { FilterableComponent } from '../common/filtering/filterable-component';
 import { ListComponent } from '../common/list.component';
 import { normalizeVirtualizationSettings } from '../common/models/virtualization-settings';
+import { caretAltDownIcon, searchIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 import * as i2 from "@progress/kendo-angular-popup";
@@ -38,14 +39,15 @@ import * as i3 from "../common/selection/selection.service";
 import * as i4 from "../common/navigation/navigation.service";
 import * as i5 from "../common/disabled-items/disabled-items.service";
 import * as i6 from "../common/data.service";
-import * as i7 from "../common/list.component";
-import * as i8 from "@progress/kendo-angular-common";
-import * as i9 from "../common/localization/localized-messages.directive";
-import * as i10 from "@angular/common";
-import * as i11 from "../common/templates/template-context.directive";
-import * as i12 from "@angular/forms";
-import * as i13 from "../common/filter-input.directive";
-import * as i14 from "../common/selection/selectable.directive";
+import * as i7 from "@progress/kendo-angular-icons";
+import * as i8 from "../common/list.component";
+import * as i9 from "@progress/kendo-angular-common";
+import * as i10 from "../common/localization/localized-messages.directive";
+import * as i11 from "@angular/common";
+import * as i12 from "../common/templates/template-context.directive";
+import * as i13 from "@angular/forms";
+import * as i14 from "../common/filter-input.directive";
+import * as i15 from "../common/selection/selectable.directive";
 /**
  * @hidden
  */
@@ -88,6 +90,14 @@ export class DropDownListComponent {
         this.cdr = cdr;
         this.touchEnabled = touchEnabled;
         this.injector = injector;
+        /**
+         * @hidden
+         */
+        this.searchIcon = searchIcon;
+        /**
+         * @hidden
+         */
+        this.caretAltDownIcon = caretAltDownIcon;
         /**
          * Sets the height of the options list. By default, `listHeight` is 200px.
          *
@@ -749,7 +759,7 @@ export class DropDownListComponent {
      * @hidden
      */
     get buttonClasses() {
-        return this.loading ? 'k-i-loading k-input-loading-icon' : this.iconClass || 'k-i-caret-alt-down';
+        return this.loading ? 'k-i-loading k-input-loading-icon' : this.iconClass;
     }
     /**
      * @hidden
@@ -1278,12 +1288,15 @@ DropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 mousedown: onMouseDown
             }"
         >
-            <span
-                class="k-button-icon k-icon"
+            <kendo-icon-wrapper
+                *ngIf="!loading && !iconClass"
                 unselectable="on"
-                [ngClass]="buttonClasses"
-            ></span>
-        </button>
+                name="caret-alt-down"
+                [svgIcon]="caretAltDownIcon"
+            >
+            </kendo-icon-wrapper>
+            <span *ngIf="loading || iconClass" class="k-button-icon k-icon" [ngClass]="buttonClasses"></span>
+            </button>
         <ng-template #popupTemplate>
             <!--filterable-->
 
@@ -1293,7 +1306,12 @@ DropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                         class="k-searchbox k-input"
                         [ngClass]="filterInputClasses"
                     >
-                        <span class="k-input-icon k-icon k-i-search" unselectable="on"></span>
+                        <kendo-icon-wrapper
+                            class="k-icon"
+                            name="search"
+                            [svgIcon]="searchIcon"
+                        >
+                        </kendo-icon-wrapper>
                         <input
                             role="searchbox"
                             aria-autocomplete="list"
@@ -1386,7 +1404,7 @@ DropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             <kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
         </ng-template>
         <ng-container #container></ng-container>
-  `, isInline: true, components: [{ type: i7.ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize"] }, { type: i8.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i9.LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i11.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i10.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i8.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i12.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i13.FilterInputDirective, selector: "[filterInput]", inputs: ["filterInput"] }, { type: i12.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i12.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i14.SelectableDirective, selector: "[kendoDropDownsSelectable]", inputs: ["index", "checkboxes", "height", "multipleSelection"] }] });
+  `, isInline: true, components: [{ type: i7.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: i8.ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize"] }, { type: i9.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i10.LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i12.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i9.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i13.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i14.FilterInputDirective, selector: "[filterInput]", inputs: ["filterInput"] }, { type: i13.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i13.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i15.SelectableDirective, selector: "[kendoDropDownsSelectable]", inputs: ["index", "checkboxes", "height", "multipleSelection"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DropDownListComponent, decorators: [{
             type: Component,
             args: [{
@@ -1441,12 +1459,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 mousedown: onMouseDown
             }"
         >
-            <span
-                class="k-button-icon k-icon"
+            <kendo-icon-wrapper
+                *ngIf="!loading && !iconClass"
                 unselectable="on"
-                [ngClass]="buttonClasses"
-            ></span>
-        </button>
+                name="caret-alt-down"
+                [svgIcon]="caretAltDownIcon"
+            >
+            </kendo-icon-wrapper>
+            <span *ngIf="loading || iconClass" class="k-button-icon k-icon" [ngClass]="buttonClasses"></span>
+            </button>
         <ng-template #popupTemplate>
             <!--filterable-->
 
@@ -1456,7 +1477,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                         class="k-searchbox k-input"
                         [ngClass]="filterInputClasses"
                     >
-                        <span class="k-input-icon k-icon k-i-search" unselectable="on"></span>
+                        <kendo-icon-wrapper
+                            class="k-icon"
+                            name="search"
+                            [svgIcon]="searchIcon"
+                        >
+                        </kendo-icon-wrapper>
                         <input
                             role="searchbox"
                             aria-autocomplete="list"

package/esm2020/dropdowntrees/dropdowntree.component.mjs

@@ -14,27 +14,29 @@ import { NavigationService } from '../common/navigation/navigation.service';
 import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
 import { SelectionService } from '../common/selection/selection.service';
 import { PreventableEvent } from '../common/models/preventable-event';
-import { getFillModeClass, getRoundedClass, getSizeClass, inDropDown, isArray, isPresent, isUntouched, noop } from '../common/util';
+import { getFillModeClass, getRoundedClass, getSearchableItems, getSizeClass, inDropDown, isArray, isLetter, isPresent, isUntouched, noop } from '../common/util';
 import { NoDataTemplateDirective } from '../common/templates/no-data-template.directive';
-import { of } from 'rxjs';
-import { tap } from 'rxjs/operators';
+import { of, Subject, Subscription } from 'rxjs';
+import { debounceTime, tap } from 'rxjs/operators';
 import { HeaderTemplateDirective } from '../common/templates/header-template.directive';
 import { FooterTemplateDirective } from '../common/templates/footer-template.directive';
 import { NodeTemplateDirective } from './templates/node-template.directive';
 import { DropDownTreeMessages } from '../common/constants/error-messages';
 import { TOUCH_ENABLED } from '../common/constants/touch-enabled';
 import { ValueTemplateDirective } from '../common/templates/value-template.directive';
+import { caretAltDownIcon, searchIcon, xIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-popup";
 import * as i2 from "../common/navigation/navigation.service";
 import * as i3 from "@progress/kendo-angular-l10n";
-import * as i4 from "@progress/kendo-angular-treeview";
-import * as i5 from "../common/localization/localized-messages.directive";
-import * as i6 from "@angular/common";
-import * as i7 from "../common/templates/template-context.directive";
-import * as i8 from "@angular/forms";
-import * as i9 from "../common/filter-input.directive";
-import * as i10 from "@progress/kendo-angular-common";
+import * as i4 from "@progress/kendo-angular-icons";
+import * as i5 from "@progress/kendo-angular-treeview";
+import * as i6 from "../common/localization/localized-messages.directive";
+import * as i7 from "@angular/common";
+import * as i8 from "../common/templates/template-context.directive";
+import * as i9 from "@angular/forms";
+import * as i10 from "../common/filter-input.directive";
+import * as i11 from "@progress/kendo-angular-common";
 const DEFAULT_POPUP_SETTINGS = { animate: true };
 const hasChildren = () => false;
 const fetchChildren = () => of([]);
@@ -57,6 +59,18 @@ export class DropDownTreeComponent {
         this.cdr = cdr;
         this.localization = localization;
         this.touchEnabled = touchEnabled;
+        /**
+         * @hidden
+         */
+        this.searchIcon = searchIcon;
+        /**
+         * @hidden
+         */
+        this.caretAltDownIcon = caretAltDownIcon;
+        /**
+         * @hidden
+         */
+        this.xIcon = xIcon;
         this.hostClasses = true;
         this.role = 'combobox';
         this.ariaHasPopup = 'tree';
@@ -198,7 +212,10 @@ export class DropDownTreeComponent {
         this._size = 'medium';
         this._rounded = 'medium';
         this._fillMode = 'solid';
-        this.subscriptions = [];
+        this._searchableNodes = [];
+        this._typedValue = '';
+        this.printableCharacters = new Subject();
+        this.subs = new Subscription();
         this.onTouchedCallback = noop;
         this.onChangeCallback = noop;
         this.direction = localization.rtl ? 'rtl' : 'ltr';
@@ -252,6 +269,9 @@ export class DropDownTreeComponent {
         if (this.disabled || this.readonly) {
             return;
         }
+        if (isLetter(event.key)) {
+            this.printableCharacters.next(event.key);
+        }
         const eventData = event;
         this.navigationService.process({
             originalEvent: eventData
@@ -501,9 +521,20 @@ export class DropDownTreeComponent {
         return ngControl?.control || null;
     }
     ngOnInit() {
+        this.subs.add(this.printableCharacters.pipe(tap((char) => {
+            this._typedValue += char;
+            const itemToFocus = this._searchableNodes.find((node) => {
+                return node.text.toLowerCase().indexOf(this._typedValue) === 0;
+            });
+            this.treeview.focus(itemToFocus?.index);
+            const htmlItem = document.querySelector(`kendo-popup[id='${this._popupId}'] li.k-treeview-item[data-treeindex='${itemToFocus?.index}']`);
+            htmlItem?.scrollIntoView();
+        }), debounceTime(1000)).subscribe(() => {
+            this._typedValue = '';
+        }));
         this.renderer.removeAttribute(this.wrapper.nativeElement, 'tabindex');
         this.assignAriaDescribedBy();
-        this.subscriptions.push(this.localization
+        this.subs.add(this.localization
             .changes.subscribe(({ rtl }) => {
             this.direction = rtl ? 'rtl' : 'ltr';
             this.cdr.markForCheck();
@@ -757,7 +788,7 @@ export class DropDownTreeComponent {
      * @hidden
      */
     get buttonClasses() {
-        return this.loading ? 'k-i-loading k-input-loading-icon' : 'k-i-caret-alt-down';
+        return this.loading ? 'k-i-loading k-input-loading-icon' : null;
     }
     /**
      * @hidden
@@ -802,6 +833,16 @@ export class DropDownTreeComponent {
         }
         return null;
     }
+    /**
+     * @hidden
+     */
+    onChildrenLoaded() {
+        setTimeout(() => {
+            if (this.popupRef) {
+                this._searchableNodes = getSearchableItems(this._popupId, this.popupRef.popupElement);
+            }
+        });
+    }
     /**
      * @hidden
      *
@@ -858,6 +899,7 @@ export class DropDownTreeComponent {
         this.popupRef.popupOpen.subscribe(() => {
             this.cdr.detectChanges();
             this.opened.emit();
+            this._searchableNodes = getSearchableItems(this._popupId, this.popupRef.popupElement);
         });
         this.popupRef.popupClose.subscribe(() => {
             this.closed.emit();
@@ -899,33 +941,41 @@ export class DropDownTreeComponent {
         this.selectedKeys = [];
     }
     subscribeEvents() {
-        this.subscriptions.push(this.navigationService.open.subscribe((event) => {
-            event.originalEvent.preventDefault();
-            this.togglePopup(true);
-        }), this.navigationService.close.subscribe((event) => {
-            event.originalEvent.preventDefault();
-            this.togglePopup(false);
-            this.focus();
-        }), this.navigationService.enter
-            .pipe(tap((event) => event.originalEvent.preventDefault()))
-            .subscribe(() => this.togglePopup(true)), this.navigationService.esc
-            .subscribe(() => this.handleEscape()), this.navigationService.tab.subscribe(() => this.focus()), this.navigationService.down.subscribe((event) => {
-            if (!this.treeview) {
-                return;
-            }
-            event.originalEvent.preventDefault();
-            if (!this.treeview.isActive) {
-                this.treeview.focus();
-            }
-        }), this.navigationService.up.subscribe((event) => {
-            if (!this.treeview) {
-                return;
-            }
-            event.originalEvent.preventDefault();
-            if (this.filterable && this.treeview['navigationService']['activeIndex'] === '0') {
-                this.filterInput.nativeElement.focus();
-            }
-        }));
+        [
+            this.navigationService.open.subscribe((event) => {
+                event.originalEvent.preventDefault();
+                this.togglePopup(true);
+            }),
+            this.navigationService.close.subscribe((event) => {
+                event.originalEvent.preventDefault();
+                this.togglePopup(false);
+                this.focus();
+            }),
+            this.navigationService.enter
+                .pipe(tap((event) => event.originalEvent.preventDefault()))
+                .subscribe(() => this.togglePopup(true)),
+            this.navigationService.esc
+                .subscribe(() => this.handleEscape()),
+            this.navigationService.tab.subscribe(() => this.focus()),
+            this.navigationService.down.subscribe((event) => {
+                if (!this.treeview) {
+                    return;
+                }
+                event.originalEvent.preventDefault();
+                if (!this.treeview.isActive) {
+                    this.treeview.focus();
+                }
+            }),
+            this.navigationService.up.subscribe((event) => {
+                if (!this.treeview) {
+                    return;
+                }
+                event.originalEvent.preventDefault();
+                if (this.filterable && this.treeview['navigationService']['activeIndex'] === '0') {
+                    this.filterInput.nativeElement.focus();
+                }
+            })
+        ].forEach(sub => this.subs.add(sub));
     }
     subscribeTouchEvents() {
         if (!isDocumentAvailable() || !this.touchEnabled) {
@@ -964,7 +1014,7 @@ export class DropDownTreeComponent {
         }
     }
     unsubscribeEvents() {
-        this.subscriptions.forEach(sub => sub.unsubscribe());
+        this.subs.unsubscribe();
         this.unSubscribeFocusEvents();
         if (this.touchstartDisposeHandler) {
             this.touchstartDisposeHandler();
@@ -1057,7 +1107,12 @@ DropDownTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             [attr.title]="messageFor('clearTitle')"
             (click)="clearValue($event)"
         >
-            <span class="k-icon k-i-x"></span>
+            <kendo-icon-wrapper
+                class="k-icon"
+                name="x"
+                [svgIcon]="xIcon"
+            >
+            </kendo-icon-wrapper>
         </span>
         <button
             tabindex="-1"
@@ -1067,10 +1122,13 @@ DropDownTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             [ngClass]="selectButtonClasses"
             [attr.aria-label]="messageFor('selectButtonText')"
         >
-            <span
-                class="k-button-icon k-icon"
-                [ngClass]="buttonClasses"
-            ></span>
+            <span *ngIf="loading" class="k-button-icon k-icon" [ngClass]="buttonClasses"></span>
+            <kendo-icon-wrapper
+                *ngIf="!loading"
+                name="caret-alt-down"
+                [svgIcon]="caretAltDownIcon"
+            >
+            </kendo-icon-wrapper>
         </button>
         <ng-template #popupTemplate>
             <span
@@ -1082,7 +1140,12 @@ DropDownTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                     [ngClass]="filterInputClasses"
                 >
                     <span class="k-input-prefix">
-                        <span class="k-input-icon k-icon k-i-search"></span>
+                        <kendo-icon-wrapper
+                            class="k-icon"
+                            name="search"
+                            [svgIcon]="searchIcon"
+                        >
+                        </kendo-icon-wrapper>
                     </span>
                     <input
                         #filterInput
@@ -1136,6 +1199,7 @@ DropDownTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 (selectionChange)="onSelectionChange($event)"
                 (expand)="nodeExpand.emit($event)"
                 (collapse)="nodeCollapse.emit($event)"
+                (childrenLoaded)="onChildrenLoaded()"
             >
             </kendo-treeview>
             <!--footer template-->
@@ -1158,7 +1222,7 @@ DropDownTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             </div>
         </ng-template>
         <ng-container #container></ng-container>
-    `, isInline: true, components: [{ type: i4.TreeViewComponent, selector: "kendo-treeview", inputs: ["filterInputPlaceholder", "expandDisabledNodes", "animate", "nodeTemplate", "loadMoreButtonTemplate", "trackBy", "nodes", "textField", "hasChildren", "isChecked", "isDisabled", "isExpanded", "isSelected", "isVisible", "navigable", "children", "loadOnDemand", "filterable", "filter", "size", "disableParentNodesOnly"], outputs: ["childrenLoaded", "blur", "focus", "expand", "collapse", "nodeDragStart", "nodeDrag", "filterStateChange", "nodeDrop", "nodeDragEnd", "addItem", "removeItem", "checkedChange", "selectionChange", "filterChange", "nodeClick", "nodeDblClick"], exportAs: ["kendoTreeView"] }], directives: [{ type: i5.LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i9.FilterInputDirective, selector: "[filterInput]", inputs: ["filterInput"] }, { type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i10.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i4.SelectDirective, selector: "[kendoTreeViewSelectable]", inputs: ["isSelected", "selectBy", "kendoTreeViewSelectable", "selectedKeys"], outputs: ["selectedKeysChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, components: [{ type: i4.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: i5.TreeViewComponent, selector: "kendo-treeview", inputs: ["filterInputPlaceholder", "expandDisabledNodes", "animate", "nodeTemplate", "loadMoreButtonTemplate", "trackBy", "nodes", "textField", "hasChildren", "isChecked", "isDisabled", "isExpanded", "isSelected", "isVisible", "navigable", "children", "loadOnDemand", "filterable", "filter", "size", "disableParentNodesOnly"], outputs: ["childrenLoaded", "blur", "focus", "expand", "collapse", "nodeDragStart", "nodeDrag", "filterStateChange", "nodeDrop", "nodeDragEnd", "addItem", "removeItem", "checkedChange", "selectionChange", "filterChange", "nodeClick", "nodeDblClick"], exportAs: ["kendoTreeView"] }], directives: [{ type: i6.LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i9.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i10.FilterInputDirective, selector: "[filterInput]", inputs: ["filterInput"] }, { type: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i9.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i11.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i5.SelectDirective, selector: "[kendoTreeViewSelectable]", inputs: ["isSelected", "selectBy", "kendoTreeViewSelectable", "selectedKeys"], outputs: ["selectedKeysChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DropDownTreeComponent, decorators: [{
             type: Component,
             args: [{
@@ -1226,7 +1290,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             [attr.title]="messageFor('clearTitle')"
             (click)="clearValue($event)"
         >
-            <span class="k-icon k-i-x"></span>
+            <kendo-icon-wrapper
+                class="k-icon"
+                name="x"
+                [svgIcon]="xIcon"
+            >
+            </kendo-icon-wrapper>
         </span>
         <button
             tabindex="-1"
@@ -1236,10 +1305,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             [ngClass]="selectButtonClasses"
             [attr.aria-label]="messageFor('selectButtonText')"
         >
-            <span
-                class="k-button-icon k-icon"
-                [ngClass]="buttonClasses"
-            ></span>
+            <span *ngIf="loading" class="k-button-icon k-icon" [ngClass]="buttonClasses"></span>
+            <kendo-icon-wrapper
+                *ngIf="!loading"
+                name="caret-alt-down"
+                [svgIcon]="caretAltDownIcon"
+            >
+            </kendo-icon-wrapper>
         </button>
         <ng-template #popupTemplate>
             <span
@@ -1251,7 +1323,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     [ngClass]="filterInputClasses"
                 >
                     <span class="k-input-prefix">
-                        <span class="k-input-icon k-icon k-i-search"></span>
+                        <kendo-icon-wrapper
+                            class="k-icon"
+                            name="search"
+                            [svgIcon]="searchIcon"
+                        >
+                        </kendo-icon-wrapper>
                     </span>
                     <input
                         #filterInput
@@ -1305,6 +1382,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 (selectionChange)="onSelectionChange($event)"
                 (expand)="nodeExpand.emit($event)"
                 (collapse)="nodeCollapse.emit($event)"
+                (childrenLoaded)="onChildrenLoaded()"
             >
             </kendo-treeview>
             <!--footer template-->