@progress/kendo-angular-dropdowns 7.2.5-dev.202212021231 → 11.0.0-develop.100

package/{esm2015/dropdowntrees/checked-state/check.directive.js → esm2020/dropdowntrees/checked-state/check.directive.mjs}

@@ -1,8 +1,9 @@
 /**-----------------------------------------------------------------------------------------
-* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { Directive, EventEmitter, Input, Output } from '@angular/core';
+import { TreeViewComponent } from '@progress/kendo-angular-treeview';
 import { Subscription } from 'rxjs';
 import { filter } from 'rxjs/operators';
 import { fetchDescendentNodes, isPresent } from '../../common/util';
@@ -35,10 +36,10 @@ export class CheckDirective extends BaseCheckDirective {
         this.treeView.isChecked = this.getCheckedState.bind(this);
     }
     ngOnChanges(changes) {
-        if (isPresent(changes.checkable)) {
+        if (isPresent(changes['checkable'])) {
             this.toggleCheckOnClick();
         }
-        if (isPresent(changes.checkedItems)) {
+        if (isPresent(changes['checkedItems'])) {
             this.updateItems();
         }
     }
@@ -136,9 +137,9 @@ export class CheckDirective extends BaseCheckDirective {
         return false;
     }
 }
-CheckDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CheckDirective, deps: [{ token: i1.TreeViewComponent }], target: i0.ɵɵFactoryTarget.Directive });
-CheckDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: CheckDirective, selector: "[kendoMultiSelectTreeCheckable]", inputs: { checkable: "checkable", valueField: "valueField", checkedItems: "checkedItems" }, outputs: { checkedItemsChange: "checkedItemsChange" }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CheckDirective, decorators: [{
+CheckDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CheckDirective, deps: [{ token: i1.TreeViewComponent }], target: i0.ɵɵFactoryTarget.Directive });
+CheckDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: CheckDirective, selector: "[kendoMultiSelectTreeCheckable]", inputs: { checkable: "checkable", valueField: "valueField", checkedItems: "checkedItems" }, outputs: { checkedItemsChange: "checkedItemsChange" }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CheckDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoMultiSelectTreeCheckable]'

package/esm2020/dropdowntrees/checked-state/checkable-settings.mjs

@@ -0,0 +1,5 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+export {};

package/esm2020/dropdowntrees/checked-state/checked-item.mjs

@@ -0,0 +1,5 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+export {};

package/{esm2015/dropdowntrees/data-binding/dropdowntree/flat-binding.directive.js → esm2020/dropdowntrees/data-binding/dropdowntree/flat-binding.directive.mjs}

@@ -1,10 +1,10 @@
 /**-----------------------------------------------------------------------------------------
-* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { Directive, Input } from '@angular/core';
 import { isChanged } from '@progress/kendo-angular-common';
-import { FlatDataBindingDirective } from '@progress/kendo-angular-treeview';
+import { DataBoundComponent, FlatDataBindingDirective } from '@progress/kendo-angular-treeview';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-treeview";
 /**
@@ -23,15 +23,15 @@ export class DropDownTreeFlatBindingDirective extends FlatDataBindingDirective {
     }
     ngOnChanges(changes) {
         if (isChanged('nodes', changes, false)) {
-            this.dropDownTree.nodes = changes.nodes.currentValue;
-            super.nodes = changes.nodes.currentValue;
+            this.dropDownTree.nodes = changes['nodes'].currentValue;
+            super.nodes = changes['nodes'].currentValue;
         }
         super.ngOnChanges(changes);
     }
 }
-DropDownTreeFlatBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DropDownTreeFlatBindingDirective, deps: [{ token: i1.DataBoundComponent }], target: i0.ɵɵFactoryTarget.Directive });
-DropDownTreeFlatBindingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: DropDownTreeFlatBindingDirective, selector: "[kendoDropDownTreeFlatBinding]", inputs: { nodes: ["kendoDropDownTreeFlatBinding", "nodes"], idField: ["valueField", "idField"] }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DropDownTreeFlatBindingDirective, decorators: [{
+DropDownTreeFlatBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DropDownTreeFlatBindingDirective, deps: [{ token: i1.DataBoundComponent }], target: i0.ɵɵFactoryTarget.Directive });
+DropDownTreeFlatBindingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: DropDownTreeFlatBindingDirective, selector: "[kendoDropDownTreeFlatBinding]", inputs: { nodes: ["kendoDropDownTreeFlatBinding", "nodes"], idField: ["valueField", "idField"] }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DropDownTreeFlatBindingDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoDropDownTreeFlatBinding]'

package/{esm2015/dropdowntrees/data-binding/dropdowntree/hierarchy-binding.directive.js → esm2020/dropdowntrees/data-binding/dropdowntree/hierarchy-binding.directive.mjs}

@@ -1,10 +1,10 @@
 /**-----------------------------------------------------------------------------------------
-* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { Directive, Input } from '@angular/core';
 import { isChanged } from '@progress/kendo-angular-common';
-import { HierarchyBindingDirective } from '@progress/kendo-angular-treeview';
+import { DataBoundComponent, HierarchyBindingDirective } from '@progress/kendo-angular-treeview';
 import { getter } from '@progress/kendo-common';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-treeview";
@@ -45,15 +45,15 @@ export class DropDownTreeHierarchyBindingDirective extends HierarchyBindingDirec
     }
     ngOnChanges(changes) {
         if (isChanged('nodes', changes, false)) {
-            this.dropDownTree.nodes = changes.nodes.currentValue;
-            super.nodes = changes.nodes.currentValue;
+            this.dropDownTree.nodes = changes['nodes'].currentValue;
+            super.nodes = changes['nodes'].currentValue;
         }
         super.ngOnChanges(changes);
     }
 }
-DropDownTreeHierarchyBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DropDownTreeHierarchyBindingDirective, deps: [{ token: i1.DataBoundComponent }], target: i0.ɵɵFactoryTarget.Directive });
-DropDownTreeHierarchyBindingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: DropDownTreeHierarchyBindingDirective, selector: "[kendoDropDownTreeHierarchyBinding]", inputs: { nodes: ["kendoDropDownTreeHierarchyBinding", "nodes"] }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DropDownTreeHierarchyBindingDirective, decorators: [{
+DropDownTreeHierarchyBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DropDownTreeHierarchyBindingDirective, deps: [{ token: i1.DataBoundComponent }], target: i0.ɵɵFactoryTarget.Directive });
+DropDownTreeHierarchyBindingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: DropDownTreeHierarchyBindingDirective, selector: "[kendoDropDownTreeHierarchyBinding]", inputs: { nodes: ["kendoDropDownTreeHierarchyBinding", "nodes"] }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DropDownTreeHierarchyBindingDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoDropDownTreeHierarchyBinding]'

package/{esm2015/dropdowntrees/data-binding/multiselecttree/flat-binding.directive.js → esm2020/dropdowntrees/data-binding/multiselecttree/flat-binding.directive.mjs}

@@ -1,10 +1,10 @@
 /**-----------------------------------------------------------------------------------------
-* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { Directive, Input } from '@angular/core';
 import { isChanged } from '@progress/kendo-angular-common';
-import { FlatDataBindingDirective } from '@progress/kendo-angular-treeview';
+import { DataBoundComponent, FlatDataBindingDirective } from '@progress/kendo-angular-treeview';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-treeview";
 /**
@@ -23,15 +23,15 @@ export class MultiSelectTreeFlatBindingDirective extends FlatDataBindingDirectiv
     }
     ngOnChanges(changes) {
         if (isChanged('nodes', changes, false)) {
-            this.multiSelectTree.nodes = changes.nodes.currentValue;
-            super.nodes = changes.nodes.currentValue;
+            this.multiSelectTree.nodes = changes['nodes'].currentValue;
+            super.nodes = changes['nodes'].currentValue;
         }
         super.ngOnChanges(changes);
     }
 }
-MultiSelectTreeFlatBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MultiSelectTreeFlatBindingDirective, deps: [{ token: i1.DataBoundComponent }], target: i0.ɵɵFactoryTarget.Directive });
-MultiSelectTreeFlatBindingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: MultiSelectTreeFlatBindingDirective, selector: "[kendoMultiSelectTreeFlatBinding]", inputs: { nodes: ["kendoMultiSelectTreeFlatBinding", "nodes"], idField: ["valueField", "idField"] }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MultiSelectTreeFlatBindingDirective, decorators: [{
+MultiSelectTreeFlatBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MultiSelectTreeFlatBindingDirective, deps: [{ token: i1.DataBoundComponent }], target: i0.ɵɵFactoryTarget.Directive });
+MultiSelectTreeFlatBindingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: MultiSelectTreeFlatBindingDirective, selector: "[kendoMultiSelectTreeFlatBinding]", inputs: { nodes: ["kendoMultiSelectTreeFlatBinding", "nodes"], idField: ["valueField", "idField"] }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MultiSelectTreeFlatBindingDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoMultiSelectTreeFlatBinding]'

package/{esm2015/dropdowntrees/data-binding/multiselecttree/hierarchy-binding.directive.js → esm2020/dropdowntrees/data-binding/multiselecttree/hierarchy-binding.directive.mjs}

@@ -1,10 +1,10 @@
 /**-----------------------------------------------------------------------------------------
-* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { Directive, Input } from '@angular/core';
 import { isChanged } from '@progress/kendo-angular-common';
-import { HierarchyBindingDirective } from '@progress/kendo-angular-treeview';
+import { DataBoundComponent, HierarchyBindingDirective } from '@progress/kendo-angular-treeview';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-treeview";
 /**
@@ -23,15 +23,15 @@ export class MultiSelectTreeHierarchyBindingDirective extends HierarchyBindingDi
     }
     ngOnChanges(changes) {
         if (isChanged('nodes', changes, false)) {
-            this.multiSelectTree.nodes = changes.nodes.currentValue;
-            super.nodes = changes.nodes.currentValue;
+            this.multiSelectTree.nodes = changes['nodes'].currentValue;
+            super.nodes = changes['nodes'].currentValue;
         }
         super.ngOnChanges(changes);
     }
 }
-MultiSelectTreeHierarchyBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MultiSelectTreeHierarchyBindingDirective, deps: [{ token: i1.DataBoundComponent }], target: i0.ɵɵFactoryTarget.Directive });
-MultiSelectTreeHierarchyBindingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: MultiSelectTreeHierarchyBindingDirective, selector: "[kendoMultiSelectTreeHierarchyBinding]", inputs: { nodes: ["kendoMultiSelectTreeHierarchyBinding", "nodes"] }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MultiSelectTreeHierarchyBindingDirective, decorators: [{
+MultiSelectTreeHierarchyBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MultiSelectTreeHierarchyBindingDirective, deps: [{ token: i1.DataBoundComponent }], target: i0.ɵɵFactoryTarget.Directive });
+MultiSelectTreeHierarchyBindingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: MultiSelectTreeHierarchyBindingDirective, selector: "[kendoMultiSelectTreeHierarchyBinding]", inputs: { nodes: ["kendoMultiSelectTreeHierarchyBinding", "nodes"] }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MultiSelectTreeHierarchyBindingDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoMultiSelectTreeHierarchyBinding]'

package/{esm2015/dropdowntrees/dropdowntree.component.js → esm2020/dropdowntrees/dropdowntree.component.mjs}

@@ -1,10 +1,11 @@
 /**-----------------------------------------------------------------------------------------
-* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { ChangeDetectionStrategy, Component, EventEmitter, HostBinding, Input, Output, ViewChild, ContentChild, forwardRef, ViewContainerRef, isDevMode, Optional, Inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, HostBinding, Input, Output, NgZone, Renderer2, TemplateRef, ViewChild, ChangeDetectorRef, ContentChild, forwardRef, ViewContainerRef, isDevMode, Optional, Inject, HostListener, Injector } from '@angular/core';
 import { anyChanged, guid, hasObservers, isDocumentAvailable, KendoInput } from '@progress/kendo-angular-common';
-import { DataBoundComponent, ExpandableComponent } from '@progress/kendo-angular-treeview';
+import { PopupService } from '@progress/kendo-angular-popup';
+import { TreeViewComponent, DataBoundComponent, ExpandableComponent } from '@progress/kendo-angular-treeview';
 import { getter } from '@progress/kendo-common';
 import { NgControl, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { DataService } from '../common/data.service';
@@ -13,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, Subscription } 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([]);
@@ -56,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';
@@ -197,6 +212,9 @@ export class DropDownTreeComponent {
         this._size = 'medium';
         this._rounded = 'medium';
         this._fillMode = 'solid';
+        this._searchableNodes = [];
+        this._typedValue = '';
+        this.printableCharacters = new Subject();
         this.subs = new Subscription();
         this.onTouchedCallback = noop;
         this.onChangeCallback = noop;
@@ -238,6 +256,12 @@ export class DropDownTreeComponent {
     get isReadonly() {
         return this.readonly ? '' : null;
     }
+    /**
+     * @hidden
+     */
+    handleClick() {
+        this.togglePopup(!this.isOpen);
+    }
     /**
      * @hidden
      */
@@ -245,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
@@ -491,9 +518,20 @@ export class DropDownTreeComponent {
      */
     get formControl() {
         const ngControl = this.injector.get(NgControl, null);
-        return (ngControl === null || ngControl === void 0 ? void 0 : ngControl.control) || null;
+        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.subs.add(this.localization
@@ -524,10 +562,6 @@ export class DropDownTreeComponent {
     ngAfterContentChecked() {
         this.verifySettings();
     }
-    ngAfterViewInit() {
-        this.subs.add(this.renderer.listen(this.wrapper.nativeElement, 'click', this.handleClick.bind(this)));
-        this.subs.add(this.renderer.listen(this.wrapper.nativeElement, 'keydown', this.handleKeydown.bind(this)));
-    }
     /**
      * @hidden
      *
@@ -583,14 +617,17 @@ export class DropDownTreeComponent {
             return;
         }
         this.isFocused = false;
-        this.togglePopup(false);
         if (hasObservers(this.onBlur) ||
             isUntouched(this.wrapper.nativeElement)) {
             this._zone.run(() => {
+                this.togglePopup(false);
                 this.onBlur.emit();
                 this.onTouchedCallback();
             });
         }
+        else {
+            this.togglePopup(false);
+        }
     }
     /**
      * Focuses a specific item of the DropDownTree based on a provided index in the format of `1_1`.
@@ -600,7 +637,7 @@ export class DropDownTreeComponent {
     focusItemAt(index) {
         if (this.treeview) {
             const lookup = this.treeview.itemLookup(index);
-            let isItemDisabled = !isPresent(lookup) || this.treeview.isDisabled(lookup.item.dataItem, lookup.item.index);
+            const isItemDisabled = !isPresent(lookup) || this.treeview.isDisabled(lookup.item.dataItem, lookup.item.index);
             if (!isItemDisabled) {
                 this.treeview.focus(index);
             }
@@ -751,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
@@ -796,6 +833,16 @@ export class DropDownTreeComponent {
         }
         return null;
     }
+    /**
+     * @hidden
+     */
+    onChildrenLoaded() {
+        setTimeout(() => {
+            if (this.popupRef) {
+                this._searchableNodes = getSearchableItems(this._popupId, this.popupRef.popupElement);
+            }
+        });
+    }
     /**
      * @hidden
      *
@@ -852,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();
@@ -872,14 +920,6 @@ export class DropDownTreeComponent {
             }
         }
     }
-    handleClick(e) {
-        // The check is needed otherwise when appended to the component, the popup reopens on click
-        // https://github.com/telerik/kendo-angular/issues/3738        
-        if ((this.popupRef && !this.popupRef.popupElement.contains(e.target))
-            || (!this.popupRef && !e.target.className.includes('k-treeview-leaf'))) {
-            this.togglePopup(!this.isOpen);
-        }
-    }
     handleEscape() {
         this.togglePopup(false);
         this.focus();
@@ -913,25 +953,10 @@ export class DropDownTreeComponent {
             }),
             this.navigationService.enter
                 .pipe(tap((event) => event.originalEvent.preventDefault()))
-                .subscribe((e) => {
-                // The check is needed otherwise when appended to the component, the popup reopens on click
-                // https://github.com/telerik/kendo-angular/issues/3738     
-                if (e.originalEvent.target === this.wrapper.nativeElement) {
-                    this.togglePopup(true);
-                }
-                if (!this.isOpen) {
-                    this.focus();
-                }
-            }),
+                .subscribe(() => this.togglePopup(true)),
             this.navigationService.esc
                 .subscribe(() => this.handleEscape()),
-            this.navigationService.tab.subscribe(() => {
-                this.focus();
-                if (this.isOpen) {
-                    this.treeview.blur();
-                    this.removeTreeViewFromTabOrder();
-                }
-            }),
+            this.navigationService.tab.subscribe(() => this.focus()),
             this.navigationService.down.subscribe((event) => {
                 if (!this.treeview) {
                     return;
@@ -1019,22 +1044,9 @@ export class DropDownTreeComponent {
             this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('picker', this.fillMode));
         }
     }
-    /**
-     * Remove the `TreeView` from the tab order, otherwise a focus loop between the page elements will occur
-     * and the user will not be able to tab to the rest of the browser elements
-     */
-    removeTreeViewFromTabOrder() {
-        const nodes = this.treeview.element.nativeElement.querySelectorAll('li');
-        nodes.forEach(item => {
-            if (item.getAttribute('tabindex') === '0') {
-                this.lastNodeOnFocus = item;
-                this.lastNodeOnFocus.setAttribute('tabindex', '-1');
-            }
-        });
-    }
 }
-DropDownTreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DropDownTreeComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: i1.PopupService }, { token: i2.NavigationService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i3.LocalizationService }, { token: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-DropDownTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DropDownTreeComponent, selector: "kendo-dropdowntree", inputs: { loading: "loading", clearButton: "clearButton", data: "data", value: "value", textField: "textField", valueField: "valueField", valueDepth: "valueDepth", hasChildren: "hasChildren", fetchChildren: "fetchChildren", placeholder: "placeholder", popupSettings: "popupSettings", dataItem: "dataItem", listHeight: "listHeight", disabled: "disabled", readonly: "readonly", valuePrimitive: "valuePrimitive", tabindex: "tabindex", size: "size", rounded: "rounded", fillMode: "fillMode", itemDisabled: "itemDisabled", isNodeExpanded: "isNodeExpanded", isNodeVisible: "isNodeVisible", loadOnDemand: "loadOnDemand", filterable: "filterable", filter: "filter", focusableId: "focusableId" }, outputs: { open: "open", opened: "opened", close: "close", closed: "closed", nodeExpand: "nodeExpand", nodeCollapse: "nodeCollapse", onFocus: "focus", onBlur: "blur", valueChange: "valueChange", filterChange: "filterChange" }, host: { properties: { "class.k-dropdowntree": "this.hostClasses", "class.k-picker": "this.hostClasses", "attr.aria-invalid": "this.hostAriaInvalid", "class.k-disabled": "this.isDisabled", "attr.disabled": "this.isDisabledAttribute", "class.k-loading": "this.isLoading", "attr.aria-busy": "this.isBusy", "attr.aria-controls": "this.hostAriaControls", "attr.id": "this.id", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabIndex", "attr.role": "this.role", "attr.aria-haspopup": "this.ariaHasPopup", "attr.aria-expanded": "this.isAriaExpanded", "attr.aria-autocomplete": "this.hostAriaAutocomplete", "attr.readonly": "this.isReadonly" } }, providers: [
+DropDownTreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DropDownTreeComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: i1.PopupService }, { token: i2.NavigationService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i3.LocalizationService }, { token: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+DropDownTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: DropDownTreeComponent, selector: "kendo-dropdowntree", inputs: { loading: "loading", clearButton: "clearButton", data: "data", value: "value", textField: "textField", valueField: "valueField", valueDepth: "valueDepth", hasChildren: "hasChildren", fetchChildren: "fetchChildren", placeholder: "placeholder", popupSettings: "popupSettings", dataItem: "dataItem", listHeight: "listHeight", disabled: "disabled", readonly: "readonly", valuePrimitive: "valuePrimitive", tabindex: "tabindex", size: "size", rounded: "rounded", fillMode: "fillMode", itemDisabled: "itemDisabled", isNodeExpanded: "isNodeExpanded", isNodeVisible: "isNodeVisible", loadOnDemand: "loadOnDemand", filterable: "filterable", filter: "filter", focusableId: "focusableId" }, outputs: { open: "open", opened: "opened", close: "close", closed: "closed", nodeExpand: "nodeExpand", nodeCollapse: "nodeCollapse", onFocus: "focus", onBlur: "blur", valueChange: "valueChange", filterChange: "filterChange" }, host: { listeners: { "click": "handleClick()", "keydown": "handleKeydown($event)" }, properties: { "class.k-dropdowntree": "this.hostClasses", "class.k-picker": "this.hostClasses", "attr.aria-invalid": "this.hostAriaInvalid", "class.k-disabled": "this.isDisabled", "attr.disabled": "this.isDisabledAttribute", "class.k-loading": "this.isLoading", "attr.aria-busy": "this.isBusy", "attr.aria-controls": "this.hostAriaControls", "attr.id": "this.id", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabIndex", "attr.role": "this.role", "attr.aria-haspopup": "this.ariaHasPopup", "attr.aria-expanded": "this.isAriaExpanded", "attr.aria-autocomplete": "this.hostAriaAutocomplete", "attr.readonly": "this.isReadonly" } }, providers: [
         DataService,
         SelectionService,
         NavigationService,
@@ -1095,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"
@@ -1105,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
@@ -1120,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
@@ -1174,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-->
@@ -1196,8 +1222,8 @@ 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 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DropDownTreeComponent, decorators: [{
+    `, 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: [{
                     exportAs: 'kendoDropDownTree',
@@ -1264,7 +1290,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", 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"
@@ -1274,10 +1305,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", 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
@@ -1289,7 +1323,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", 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
@@ -1343,6 +1382,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 (selectionChange)="onSelectionChange($event)"
                 (expand)="nodeExpand.emit($event)"
                 (collapse)="nodeCollapse.emit($event)"
+                (childrenLoaded)="onChildrenLoaded()"
             >
             </kendo-treeview>
             <!--footer template-->
@@ -1421,6 +1461,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
             }], isReadonly: [{
                 type: HostBinding,
                 args: ['attr.readonly']
+            }], handleClick: [{
+                type: HostListener,
+                args: ['click']
+            }], handleKeydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
             }], noDataTemplate: [{
                 type: ContentChild,
                 args: [NoDataTemplateDirective, { static: false }]