@progress/kendo-angular-dropdowns 7.2.4 → 11.0.0-develop.100

package/{fesm2015/kendo-angular-dropdowns.js → fesm2020/progress-kendo-angular-dropdowns.mjs}

@@ -1,24 +1,27 @@
 /**-----------------------------------------------------------------------------------------
-* 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 * as i0 from '@angular/core';
-import { EventEmitter, Component, Input, Output, ViewChild, HostBinding, Directive, Injectable, InjectionToken, HostListener, ViewChildren, forwardRef, isDevMode, ViewContainerRef, Optional, Inject, ContentChild, ContentChildren, ChangeDetectionStrategy, NgModule } from '@angular/core';
-import * as i9 from '@progress/kendo-angular-common';
+import { EventEmitter, Component, Input, Output, ViewChild, HostBinding, Directive, Injectable, HostListener, ViewChildren, InjectionToken, forwardRef, isDevMode, ViewContainerRef, Optional, Inject, ContentChild, ContentChildren, ChangeDetectionStrategy, NgModule } from '@angular/core';
+import * as i10 from '@progress/kendo-angular-common';
 import { isDocumentAvailable, Keys, isChanged, hasObservers, KendoInput, anyChanged, guid as guid$1, ResizeSensorModule, EventsModule } from '@progress/kendo-angular-common';
-import * as i12 from '@angular/forms';
+import * as i13 from '@angular/forms';
 import { NgControl, NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { validatePackage } from '@progress/kendo-licensing';
 import { getter as getter$1, detectDesktopBrowser, detectMobileOS, pointers, touchEnabled } from '@progress/kendo-common';
-import { Subscription, merge, fromEvent, Subject, of, interval } from 'rxjs';
 import * as i1 from '@progress/kendo-angular-l10n';
 import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
+import { Subscription, merge, fromEvent, Subject, of, interval } from 'rxjs';
 import * as i2 from '@progress/kendo-angular-popup';
 import { PopupModule } from '@progress/kendo-angular-popup';
 export { PopupComponent } from '@progress/kendo-angular-popup';
-import { map, switchMap, take, auditTime, tap, filter, partition, throttleTime, catchError, skipWhile, concatMap, takeUntil } from 'rxjs/operators';
-import * as i11 from '@angular/common';
+import { map, switchMap, take, auditTime, tap, filter, partition, throttleTime, catchError, skipWhile, concatMap, takeUntil, debounceTime } from 'rxjs/operators';
+import * as i12 from '@angular/common';
 import { CommonModule } from '@angular/common';
+import { xIcon, caretAltDownIcon, searchIcon, xCircleIcon, plusIcon } from '@progress/kendo-svg-icons';
+import * as i8 from '@progress/kendo-angular-icons';
+import { IconsModule } from '@progress/kendo-angular-icons';
 import * as i1$1 from '@progress/kendo-angular-treeview';
 import { DataBoundComponent, ExpandableComponent, FlatDataBindingDirective, HierarchyBindingDirective, ExpandDirective, TreeViewModule } from '@progress/kendo-angular-treeview';
 
@@ -29,9 +32,9 @@ const packageMetadata = {
     name: '@progress/kendo-angular-dropdowns',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1668698206,
+    publishDate: 1673469313,
     version: '',
-    licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
+    licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
 /* eslint-disable no-bitwise */
@@ -376,6 +379,32 @@ const isJapanese = (input) => {
     const japaneseRegex = /[\u3000-\u303F]|[\u3040-\u309F]|[\u30A0-\u30FF]|[\uFF00-\uFFEF]|[\u4E00-\u9FAF]|[\u2605-\u2606]|[\u2190-\u2195]|\u203B/g;
     return japaneseRegex.test(input);
 };
+/**
+ * @hidden
+ */
+const isLetter = (text) => {
+    const isLetter = /[a-zA-Z]/;
+    return isLetter.test(text) && text?.length === 1;
+};
+/**
+ * @hidden
+ */
+const getTextField = (field, level) => {
+    if (isArray(field)) {
+        return field[level];
+    }
+    return field;
+};
+/**
+ * @hidden
+ */
+const getSearchableItems = (popupId, popupElement) => {
+    const nodeSeletor = `kendo-popup[id='${popupId}'] li.k-treeview-item`;
+    const liElements = Array.from(popupElement.querySelectorAll(nodeSeletor));
+    return liElements.map((liElement) => {
+        return { text: liElement.innerText, index: liElement.getAttribute('data-treeindex') };
+    });
+};
 
 /**
  * @hidden
@@ -428,7 +457,7 @@ class SearchBarComponent {
      */
     get formControl() {
         const ngControl = this.injector.get(NgControl, null);
-        return (ngControl === null || ngControl === void 0 ? void 0 : ngControl.control) || null;
+        return ngControl?.control || null;
     }
     get value() {
         return this.input.nativeElement.value;
@@ -448,6 +477,9 @@ class SearchBarComponent {
             .changes.subscribe(({ rtl }) => this.direction = rtl ? 'rtl' : 'ltr'));
     }
     ngOnChanges(changes) {
+        if (!isDocumentAvailable()) {
+            return;
+        }
         let previousUserInput;
         if (this.input && (changes.userInput || changes.suggestedText)) {
             if (changes.userInput && changes.userInput.previousValue) {
@@ -553,8 +585,8 @@ class SearchBarComponent {
         this.renderer.setAttribute(input, 'size', size.toString());
     }
 }
-SearchBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SearchBarComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-SearchBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SearchBarComponent, selector: "kendo-searchbar", inputs: { id: "id", listId: "listId", tagListId: "tagListId", activeDescendant: "activeDescendant", disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", popupOpen: "popupOpen", role: "role", isLoading: "isLoading", isSuggestable: "isSuggestable", isFilterable: "isFilterable", userInput: "userInput", suggestedText: "suggestedText", placeholder: "placeholder" }, outputs: { valueChange: "valueChange", onBlur: "onBlur", onFocus: "onFocus", onClick: "onClick", onNavigate: "onNavigate" }, host: { properties: { "class.k-searchbar": "this.searchBarClass" } }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
+SearchBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SearchBarComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+SearchBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: SearchBarComponent, selector: "kendo-searchbar", inputs: { id: "id", listId: "listId", tagListId: "tagListId", activeDescendant: "activeDescendant", disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", popupOpen: "popupOpen", role: "role", isLoading: "isLoading", isSuggestable: "isSuggestable", isFilterable: "isFilterable", userInput: "userInput", suggestedText: "suggestedText", placeholder: "placeholder" }, outputs: { valueChange: "valueChange", onBlur: "onBlur", onFocus: "onFocus", onClick: "onClick", onNavigate: "onNavigate" }, host: { properties: { "class.k-searchbar": "this.searchBarClass" } }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
         <input #input
             autocomplete="off"
             [id]="id"
@@ -580,8 +612,8 @@ SearchBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
             [attr.aria-busy]="isLoading"
             [attr.aria-invalid]="formControl?.invalid"
         />
-   `, isInline: true, directives: [{ type: i9.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SearchBarComponent, decorators: [{
+   `, isInline: true, directives: [{ type: i10.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SearchBarComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-searchbar',
@@ -693,9 +725,9 @@ class ItemTemplateDirective {
         this.templateRef = templateRef;
     }
 }
-ItemTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ItemTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-ItemTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ItemTemplateDirective, decorators: [{
+ItemTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ItemTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+ItemTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ItemTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]'
@@ -735,9 +767,9 @@ class HeaderTemplateDirective {
         this.templateRef = templateRef;
     }
 }
-HeaderTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: HeaderTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-HeaderTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: HeaderTemplateDirective, selector: "[kendoDropDownListHeaderTemplate],[kendoComboBoxHeaderTemplate],[kendoDropDownTreeHeaderTemplate],[kendoMultiColumnComboBoxHeaderTemplate],[kendoAutoCompleteHeaderTemplate],[kendoMultiSelectHeaderTemplate],[kendoMultiSelectTreeHeaderTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: HeaderTemplateDirective, decorators: [{
+HeaderTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: HeaderTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+HeaderTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: HeaderTemplateDirective, selector: "[kendoDropDownListHeaderTemplate],[kendoComboBoxHeaderTemplate],[kendoDropDownTreeHeaderTemplate],[kendoMultiColumnComboBoxHeaderTemplate],[kendoAutoCompleteHeaderTemplate],[kendoMultiSelectHeaderTemplate],[kendoMultiSelectTreeHeaderTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: HeaderTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoDropDownListHeaderTemplate],[kendoComboBoxHeaderTemplate],[kendoDropDownTreeHeaderTemplate],[kendoMultiColumnComboBoxHeaderTemplate],[kendoAutoCompleteHeaderTemplate],[kendoMultiSelectHeaderTemplate],[kendoMultiSelectTreeHeaderTemplate]'
@@ -777,9 +809,9 @@ class FooterTemplateDirective {
         this.templateRef = templateRef;
     }
 }
-FooterTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FooterTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-FooterTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: FooterTemplateDirective, selector: "[kendoDropDownListFooterTemplate],[kendoComboBoxFooterTemplate],[kendoDropDownTreeFooterTemplate],[kendoMultiColumnComboBoxFooterTemplate],[kendoAutoCompleteFooterTemplate],[kendoMultiSelectFooterTemplate],[kendoMultiSelectTreeFooterTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FooterTemplateDirective, decorators: [{
+FooterTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FooterTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+FooterTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: FooterTemplateDirective, selector: "[kendoDropDownListFooterTemplate],[kendoComboBoxFooterTemplate],[kendoDropDownTreeFooterTemplate],[kendoMultiColumnComboBoxFooterTemplate],[kendoAutoCompleteFooterTemplate],[kendoMultiSelectFooterTemplate],[kendoMultiSelectTreeFooterTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FooterTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoDropDownListFooterTemplate],[kendoComboBoxFooterTemplate],[kendoDropDownTreeFooterTemplate],[kendoMultiColumnComboBoxFooterTemplate],[kendoAutoCompleteFooterTemplate],[kendoMultiSelectFooterTemplate],[kendoMultiSelectTreeFooterTemplate]'
@@ -825,9 +857,9 @@ class GroupTemplateDirective {
         this.templateRef = templateRef;
     }
 }
-GroupTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: GroupTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-GroupTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: GroupTemplateDirective, selector: "[kendoDropDownListGroupTemplate],[kendoComboBoxGroupTemplate],[kendoMultiColumnComboBoxGroupTemplate],[kendoAutoCompleteGroupTemplate],[kendoMultiSelectGroupTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: GroupTemplateDirective, decorators: [{
+GroupTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GroupTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+GroupTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: GroupTemplateDirective, selector: "[kendoDropDownListGroupTemplate],[kendoComboBoxGroupTemplate],[kendoMultiColumnComboBoxGroupTemplate],[kendoAutoCompleteGroupTemplate],[kendoMultiSelectGroupTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GroupTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoDropDownListGroupTemplate],[kendoComboBoxGroupTemplate],[kendoMultiColumnComboBoxGroupTemplate],[kendoAutoCompleteGroupTemplate],[kendoMultiSelectGroupTemplate]'
@@ -873,9 +905,9 @@ class FixedGroupTemplateDirective {
         this.templateRef = templateRef;
     }
 }
-FixedGroupTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FixedGroupTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-FixedGroupTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: FixedGroupTemplateDirective, selector: "[kendoDropDownListFixedGroupTemplate],[kendoComboBoxFixedGroupTemplate],[kendoMultiColumnComboBoxFixedGroupTemplate],[kendoAutoCompleteFixedGroupTemplate],[kendoMultiSelectFixedGroupTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FixedGroupTemplateDirective, decorators: [{
+FixedGroupTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FixedGroupTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+FixedGroupTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: FixedGroupTemplateDirective, selector: "[kendoDropDownListFixedGroupTemplate],[kendoComboBoxFixedGroupTemplate],[kendoMultiColumnComboBoxFixedGroupTemplate],[kendoAutoCompleteFixedGroupTemplate],[kendoMultiSelectFixedGroupTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FixedGroupTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoDropDownListFixedGroupTemplate],[kendoComboBoxFixedGroupTemplate],[kendoMultiColumnComboBoxFixedGroupTemplate],[kendoAutoCompleteFixedGroupTemplate],[kendoMultiSelectFixedGroupTemplate]'
@@ -929,7 +961,7 @@ class DataService {
      * Used to calculate the last item index of each group.
      */
     getGroupIndices(data) {
-        let groupIndices = [];
+        const groupIndices = [];
         for (let i = 0; i <= data.length - 1; i++) {
             groupIndices[i] = (groupIndices[i - 1] || 0) + data[i].items.length;
         }
@@ -1117,9 +1149,9 @@ class DataService {
         return flat;
     }
 }
-DataService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DataService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-DataService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DataService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DataService, decorators: [{
+DataService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DataService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+DataService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DataService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DataService, decorators: [{
             type: Injectable
         }] });
 
@@ -1154,9 +1186,9 @@ class DisabledItemsService {
         }
     }
 }
-DisabledItemsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DisabledItemsService, deps: [{ token: DataService }], target: i0.ɵɵFactoryTarget.Injectable });
-DisabledItemsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DisabledItemsService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DisabledItemsService, decorators: [{
+DisabledItemsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DisabledItemsService, deps: [{ token: DataService }], target: i0.ɵɵFactoryTarget.Injectable });
+DisabledItemsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DisabledItemsService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DisabledItemsService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: DataService }]; } });
 
@@ -1277,7 +1309,7 @@ class SelectionService {
         }
     }
     selectFromTo(from, to) {
-        let addedIndices = [];
+        const addedIndices = [];
         for (let i = from; i <= to; i++) {
             if (!this.isSelected(i) && !this.disabledItemsService.isIndexDisabled(i)) {
                 addedIndices.push(i);
@@ -1286,7 +1318,7 @@ class SelectionService {
         this.addMultiple(addedIndices);
     }
     unselectFromTo(from, to) {
-        let indicesToBeUnselected = [];
+        const indicesToBeUnselected = [];
         for (let i = from; i >= to; i--) {
             if (this.isSelected(i) && !this.disabledItemsService.isIndexDisabled(i)) {
                 indicesToBeUnselected.push(i);
@@ -1295,7 +1327,7 @@ class SelectionService {
         this.unselectMultiple(indicesToBeUnselected);
     }
     unselectNotNeededIndices(startOfSelection, endOfSelection, totalItems) {
-        let indicesToBeUnselected = [];
+        const indicesToBeUnselected = [];
         for (let i = 0; i < startOfSelection; i++) {
             if (this.isSelected(i)) {
                 indicesToBeUnselected.push(i);
@@ -1309,9 +1341,9 @@ class SelectionService {
         this.unselectMultiple(indicesToBeUnselected);
     }
 }
-SelectionService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SelectionService, deps: [{ token: DisabledItemsService }], target: i0.ɵɵFactoryTarget.Injectable });
-SelectionService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SelectionService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SelectionService, decorators: [{
+SelectionService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SelectionService, deps: [{ token: DisabledItemsService }], target: i0.ɵɵFactoryTarget.Injectable });
+SelectionService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SelectionService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SelectionService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: DisabledItemsService }]; } });
 
@@ -1501,9 +1533,9 @@ class NavigationService {
         }
     }
 }
-NavigationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NavigationService, deps: [{ token: DisabledItemsService }, { token: SelectionService }], target: i0.ɵɵFactoryTarget.Injectable });
-NavigationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NavigationService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NavigationService, decorators: [{
+NavigationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavigationService, deps: [{ token: DisabledItemsService }, { token: SelectionService }], target: i0.ɵɵFactoryTarget.Injectable });
+NavigationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavigationService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavigationService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: DisabledItemsService }, { type: SelectionService }]; } });
 
@@ -1540,9 +1572,9 @@ class NoDataTemplateDirective {
         this.templateRef = templateRef;
     }
 }
-NoDataTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NoDataTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-NoDataTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: NoDataTemplateDirective, selector: "[kendoDropDownListNoDataTemplate],[kendoDropDownTreeNoDataTemplate],[kendoComboBoxNoDataTemplate],[kendoMultiColumnComboBoxNoDataTemplate],[kendoAutoCompleteNoDataTemplate],[kendoMultiSelectNoDataTemplate],[kendoMultiSelectTreeNoDataTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NoDataTemplateDirective, decorators: [{
+NoDataTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NoDataTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+NoDataTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: NoDataTemplateDirective, selector: "[kendoDropDownListNoDataTemplate],[kendoDropDownTreeNoDataTemplate],[kendoComboBoxNoDataTemplate],[kendoMultiColumnComboBoxNoDataTemplate],[kendoAutoCompleteNoDataTemplate],[kendoMultiSelectNoDataTemplate],[kendoMultiSelectTreeNoDataTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NoDataTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoDropDownListNoDataTemplate],[kendoDropDownTreeNoDataTemplate],[kendoComboBoxNoDataTemplate],[kendoMultiColumnComboBoxNoDataTemplate],[kendoAutoCompleteNoDataTemplate],[kendoMultiSelectNoDataTemplate],[kendoMultiSelectTreeNoDataTemplate]'
@@ -1583,32 +1615,6 @@ class PreventableEvent {
 class FilterableComponent {
 }
 
-/**
- * @hidden
- */
-const DEFAULTS = {
-    pageSize: 50,
-    itemHeight: 28
-};
-/**
- * @hidden
- */
-const normalizeVirtualizationSettings = (settings, defaultOverrides) => {
-    const defaults = Object.assign({}, DEFAULTS, defaultOverrides);
-    if (settings === true) {
-        return defaults;
-    }
-    if (!settings) {
-        return null;
-    }
-    return Object.assign({ pageSize: DEFAULTS.pageSize }, settings);
-};
-
-/**
- * @hidden
- */
-const TOUCH_ENABLED = new InjectionToken('dropdowns-touch-enabled');
-
 /**
  * @hidden
  */
@@ -1617,9 +1623,9 @@ class ListItemDirective {
         this.element = element;
     }
 }
-ListItemDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ListItemDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-ListItemDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: ListItemDirective, selector: "\"li[role=option], li[role=group]\"", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ListItemDirective, decorators: [{
+ListItemDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ListItemDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+ListItemDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: ListItemDirective, selector: "\"li[role=option], li[role=group]\"", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ListItemDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '"li[role=option], li[role=group]"' // eslint-disable-line
@@ -1643,9 +1649,9 @@ class TemplateContextDirective {
         }
     }
 }
-TemplateContextDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TemplateContextDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-TemplateContextDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TemplateContextDirective, selector: "[templateContext]", inputs: { templateContext: "templateContext" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TemplateContextDirective, decorators: [{
+TemplateContextDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TemplateContextDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+TemplateContextDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: TemplateContextDirective, selector: "[templateContext]", inputs: { templateContext: "templateContext" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TemplateContextDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[templateContext]' // eslint-disable-line
@@ -1690,9 +1696,9 @@ class SelectableDirective {
         }
     }
 }
-SelectableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SelectableDirective, deps: [{ token: SelectionService }], target: i0.ɵɵFactoryTarget.Directive });
-SelectableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: SelectableDirective, selector: "[kendoDropDownsSelectable]", inputs: { index: "index", checkboxes: "checkboxes", height: "height", multipleSelection: "multipleSelection" }, host: { listeners: { "click": "onClick($event)" }, properties: { "attr.index": "this.index", "style.height.px": "this.height", "style.minHeight.px": "this.height", "class.k-focus": "this.focusedClassName", "class.k-selected": "this.selectedClassName" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SelectableDirective, decorators: [{
+SelectableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SelectableDirective, deps: [{ token: SelectionService }], target: i0.ɵɵFactoryTarget.Directive });
+SelectableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: SelectableDirective, selector: "[kendoDropDownsSelectable]", inputs: { index: "index", checkboxes: "checkboxes", height: "height", multipleSelection: "multipleSelection" }, host: { listeners: { "click": "onClick($event)" }, properties: { "attr.index": "this.index", "style.height.px": "this.height", "style.minHeight.px": "this.height", "class.k-focus": "this.focusedClassName", "class.k-selected": "this.selectedClassName" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SelectableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoDropDownsSelectable]'
@@ -1782,7 +1788,7 @@ class ListComponent {
         if (this.virtual.pageSize) {
             return this.virtual.pageSize;
         }
-        let size = Math.round(this.height / this.virtual.itemHeight);
+        const size = Math.round(this.height / this.virtual.itemHeight);
         return size;
     }
     get scrollHeight() {
@@ -1804,7 +1810,7 @@ class ListComponent {
         if (isChanged('data', changes, false)) {
             if (this.lastLoaded <= 0) {
                 this.lastLoaded = this.data.length - 1;
-                this.scrollToFocused = !changes.data.isFirstChange();
+                this.scrollToFocused = !changes['data'].isFirstChange();
             }
             this.setOverflow();
         }
@@ -1983,7 +1989,7 @@ class ListComponent {
         }
     }
     scrollWithOnePage(action) {
-        let content = this.content.nativeElement;
+        const content = this.content.nativeElement;
         const contentOffsetHeight = content.clientHeight;
         if (action === NavigationAction.PageDown) {
             content.scrollTop += contentOffsetHeight;
@@ -1993,7 +1999,7 @@ class ListComponent {
         }
     }
     scrollToIndex(index) {
-        let content = this.content.nativeElement;
+        const content = this.content.nativeElement;
         let contentScrollTop = content.scrollTop;
         const itemOffsetTop = index * this.virtual.itemHeight;
         const itemOffsetHeight = this.virtual.itemHeight;
@@ -2012,7 +2018,12 @@ class ListComponent {
             return;
         }
         const nativeElement = item.nativeElement;
-        let content = this.content.nativeElement, itemOffsetTop = nativeElement.offsetTop, itemOffsetHeight = nativeElement.offsetHeight, contentScrollTop = content.scrollTop, contentOffsetHeight = content.clientHeight, bottomDistance = itemOffsetTop + itemOffsetHeight;
+        const content = this.content.nativeElement;
+        const itemOffsetTop = nativeElement.offsetTop;
+        const itemOffsetHeight = nativeElement.offsetHeight;
+        let contentScrollTop = content.scrollTop;
+        const contentOffsetHeight = content.clientHeight;
+        const bottomDistance = itemOffsetTop + itemOffsetHeight;
         if (contentScrollTop > itemOffsetTop) {
             contentScrollTop = itemOffsetTop;
         }
@@ -2078,8 +2089,8 @@ class ListComponent {
         }
     }
 }
-ListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ListComponent, deps: [{ token: DataService }, { token: i0.ElementRef }, { token: SelectionService }, { token: DisabledItemsService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ListComponent, selector: "kendo-list", inputs: { selected: "selected", focused: "focused", textField: "textField", valueField: "valueField", height: "height", template: "template", groupTemplate: "groupTemplate", fixedGroupTemplate: "fixedGroupTemplate", show: "show", id: "id", optionPrefix: "optionPrefix", multipleSelection: "multipleSelection", virtual: "virtual", type: "type", checkboxes: "checkboxes", ariaLive: "ariaLive", isMultiselect: "isMultiselect", data: "data", size: "size", rounded: "rounded" }, outputs: { onClick: "onClick", pageChange: "pageChange", listResize: "listResize" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }, { propertyName: "list", first: true, predicate: ["list"], descendants: true, static: true }, { propertyName: "virtualContainer", first: true, predicate: ["virtualContainer"], descendants: true }, { propertyName: "items", predicate: ListItemDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+ListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ListComponent, deps: [{ token: DataService }, { token: i0.ElementRef }, { token: SelectionService }, { token: DisabledItemsService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ListComponent, selector: "kendo-list", inputs: { selected: "selected", focused: "focused", textField: "textField", valueField: "valueField", height: "height", template: "template", groupTemplate: "groupTemplate", fixedGroupTemplate: "fixedGroupTemplate", show: "show", id: "id", optionPrefix: "optionPrefix", multipleSelection: "multipleSelection", virtual: "virtual", type: "type", checkboxes: "checkboxes", ariaLive: "ariaLive", isMultiselect: "isMultiselect", data: "data", size: "size", rounded: "rounded" }, outputs: { onClick: "onClick", pageChange: "pageChange", listResize: "listResize" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }, { propertyName: "list", first: true, predicate: ["list"], descendants: true, static: true }, { propertyName: "virtualContainer", first: true, predicate: ["virtualContainer"], descendants: true }, { propertyName: "items", predicate: ListItemDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
     <div *ngIf="dataService.grouped"
         [class]="listGroupStickyHeaderClass"
         [ngStyle]="{
@@ -2202,8 +2213,8 @@ ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
         </div>
     </div>
     </div>
-  `, isInline: true, components: [{ type: i9.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i11.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: ListItemDirective, selector: "\"li[role=option], li[role=group]\"" }, { type: SelectableDirective, selector: "[kendoDropDownsSelectable]", inputs: ["index", "checkboxes", "height", "multipleSelection"] }, { type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ListComponent, decorators: [{
+  `, isInline: true, components: [{ type: i10.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i12.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i12.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: ListItemDirective, selector: "\"li[role=option], li[role=group]\"" }, { type: SelectableDirective, selector: "[kendoDropDownsSelectable]", inputs: ["index", "checkboxes", "height", "multipleSelection"] }, { type: i12.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ListComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-list',
@@ -2392,14 +2403,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 args: ['virtualContainer', { static: false }]
             }] } });
 
+/**
+ * @hidden
+ */
+const DEFAULTS = {
+    pageSize: 50,
+    itemHeight: 28
+};
+/**
+ * @hidden
+ */
+const normalizeVirtualizationSettings = (settings, defaultOverrides) => {
+    const defaults = Object.assign({}, DEFAULTS, defaultOverrides);
+    if (settings === true) {
+        return defaults;
+    }
+    if (!settings) {
+        return null;
+    }
+    return { pageSize: DEFAULTS.pageSize, ...settings };
+};
+
+/**
+ * @hidden
+ */
+const TOUCH_ENABLED = new InjectionToken('dropdowns-touch-enabled');
+
 /**
  * @hidden
  */
 class Messages extends ComponentMessages {
 }
-Messages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-Messages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: Messages, inputs: { noDataText: "noDataText", clearTitle: "clearTitle", checkAllText: "checkAllText", selectButtonText: "selectButtonText" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: Messages, decorators: [{
+Messages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+Messages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: Messages, inputs: { noDataText: "noDataText", clearTitle: "clearTitle", checkAllText: "checkAllText", selectButtonText: "selectButtonText" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: Messages, decorators: [{
             type: Directive
         }], propDecorators: { noDataText: [{
                 type: Input
@@ -2420,14 +2457,14 @@ class LocalizedMessagesDirective extends Messages {
         this.service = service;
     }
 }
-LocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-LocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  ", providers: [
+LocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+LocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  ", providers: [
         {
             provide: Messages,
             useExisting: forwardRef(() => LocalizedMessagesDirective)
         }
     ], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
             type: Directive,
             args: [{
                     providers: [
@@ -2493,6 +2530,10 @@ class AutoCompleteComponent {
         this.renderer = renderer;
         this.hostElement = hostElement;
         this.touchEnabled = touchEnabled;
+        /**
+         * @hidden
+         */
+        this.xIcon = xIcon;
         /**
          * Defines whether the first match from the suggestions list will be automatically focused.
          * By default, `highlightFirst` is set to `true`.
@@ -2867,7 +2908,7 @@ class AutoCompleteComponent {
     }
     ngOnChanges(changes) {
         const virtual = this.virtual;
-        const requestInitialData = virtual && changes.data && changes.data.isFirstChange();
+        const requestInitialData = virtual && changes['data'] && changes['data'].isFirstChange();
         if (requestInitialData) {
             this.pageChange({ skip: 0, take: virtual.pageSize });
         }
@@ -3202,7 +3243,7 @@ class AutoCompleteComponent {
         if (!isPresent(index)) {
             return;
         }
-        let text = getter(this.dataService.itemAt(index), this.valueField);
+        const text = getter(this.dataService.itemAt(index), this.valueField);
         this.change(text);
     }
     handleItemFocus(_event) {
@@ -3313,8 +3354,8 @@ class AutoCompleteComponent {
         }
     }
 }
-AutoCompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: AutoCompleteComponent, deps: [{ token: i1.LocalizationService }, { token: DataService }, { token: i2.PopupService }, { token: SelectionService }, { token: NavigationService }, { token: DisabledItemsService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-AutoCompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: AutoCompleteComponent, selector: "kendo-autocomplete", inputs: { highlightFirst: "highlightFirst", focusableId: "focusableId", data: "data", value: "value", valueField: "valueField", placeholder: "placeholder", popupSettings: "popupSettings", listHeight: "listHeight", loading: "loading", clearButton: "clearButton", suggest: "suggest", disabled: "disabled", itemDisabled: "itemDisabled", readonly: "readonly", tabindex: "tabindex", tabIndex: "tabIndex", filterable: "filterable", virtual: "virtual", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", filterChange: "filterChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-autocomplete": "this.widgetClasses", "class.k-input": "this.widgetClasses", "class.k-disabled": "this.isDisabled", "class.k-loading": "this.isLoading", "attr.dir": "this.dir" } }, providers: [
+AutoCompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AutoCompleteComponent, deps: [{ token: i1.LocalizationService }, { token: DataService }, { token: i2.PopupService }, { token: SelectionService }, { token: NavigationService }, { token: DisabledItemsService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+AutoCompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AutoCompleteComponent, selector: "kendo-autocomplete", inputs: { highlightFirst: "highlightFirst", focusableId: "focusableId", data: "data", value: "value", valueField: "valueField", placeholder: "placeholder", popupSettings: "popupSettings", listHeight: "listHeight", loading: "loading", clearButton: "clearButton", suggest: "suggest", disabled: "disabled", itemDisabled: "itemDisabled", readonly: "readonly", tabindex: "tabindex", tabIndex: "tabIndex", filterable: "filterable", virtual: "virtual", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", filterChange: "filterChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-autocomplete": "this.widgetClasses", "class.k-input": "this.widgetClasses", "class.k-disabled": "this.isDisabled", "class.k-loading": "this.isLoading", "attr.dir": "this.dir" } }, providers: [
         AUTOCOMPLETE_VALUE_ACCESSOR,
         DataService,
         SelectionService,
@@ -3372,7 +3413,11 @@ AutoCompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             (click)="clearValue($event)"
             (mousedown)="$event.preventDefault()"
         >
-            <span class="k-icon k-i-x"></span>
+            <kendo-icon-wrapper
+                name="x"
+                [svgIcon]="xIcon"
+            >
+            </kendo-icon-wrapper>
         </span>
         <span *ngIf="loading" class="k-icon k-i-loading k-input-loading-icon"></span>
         <ng-template #popupTemplate>
@@ -3423,8 +3468,8 @@ AutoCompleteComponent.ɵ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: SearchBarComponent, selector: "kendo-searchbar", inputs: ["id", "listId", "tagListId", "activeDescendant", "disabled", "readonly", "tabIndex", "popupOpen", "role", "isLoading", "isSuggestable", "isFilterable", "userInput", "suggestedText", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { type: 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: 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: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: AutoCompleteComponent, decorators: [{
+  `, isInline: true, components: [{ type: SearchBarComponent, selector: "kendo-searchbar", inputs: ["id", "listId", "tagListId", "activeDescendant", "disabled", "readonly", "tabIndex", "popupOpen", "role", "isLoading", "isSuggestable", "isFilterable", "userInput", "suggestedText", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { type: i8.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: 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: i10.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AutoCompleteComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoAutoComplete',
@@ -3488,7 +3533,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             (click)="clearValue($event)"
             (mousedown)="$event.preventDefault()"
         >
-            <span class="k-icon k-i-x"></span>
+            <kendo-icon-wrapper
+                name="x"
+                [svgIcon]="xIcon"
+            >
+            </kendo-icon-wrapper>
         </span>
         <span *ngIf="loading" class="k-icon k-i-loading k-input-loading-icon"></span>
         <ng-template #popupTemplate>
@@ -3753,6 +3802,14 @@ class ComboBoxComponent {
         this.cdr = cdr;
         this.renderer = renderer;
         this.touchEnabled = touchEnabled;
+        /**
+         * @hidden
+         */
+        this.xIcon = xIcon;
+        /**
+         * @hidden
+         */
+        this.caretAltDownIcon = caretAltDownIcon;
         this.selected = [];
         /**
          * @hidden
@@ -4328,7 +4385,7 @@ class ComboBoxComponent {
     }
     ngOnChanges(changes) {
         const virtual = this.virtual;
-        const requestInitialData = virtual && changes.data && changes.data.isFirstChange();
+        const requestInitialData = virtual && changes['data'] && changes['data'].isFirstChange();
         if (requestInitialData) {
             this.pageChange({ skip: 0, take: virtual.pageSize });
         }
@@ -4421,7 +4478,7 @@ class ComboBoxComponent {
      * @hidden
      */
     clearValue(event) {
-        event === null || event === void 0 ? void 0 : event.stopImmediatePropagation();
+        event?.stopImmediatePropagation();
         if (event) {
             this.focus();
         }
@@ -4458,7 +4515,7 @@ class ComboBoxComponent {
      * @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
@@ -4943,8 +5000,8 @@ class ComboBoxComponent {
         }
     }
 }
-ComboBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ComboBoxComponent, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i2.PopupService }, { token: SelectionService }, { token: NavigationService }, { token: DisabledItemsService }, { token: DataService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-ComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ComboBoxComponent, selector: "kendo-combobox", inputs: { focusableId: "focusableId", allowCustom: "allowCustom", data: "data", value: "value", textField: "textField", valueField: "valueField", valuePrimitive: "valuePrimitive", valueNormalizer: "valueNormalizer", placeholder: "placeholder", popupSettings: "popupSettings", listHeight: "listHeight", iconClass: "iconClass", loading: "loading", suggest: "suggest", clearButton: "clearButton", disabled: "disabled", itemDisabled: "itemDisabled", readonly: "readonly", tabindex: "tabindex", tabIndex: "tabIndex", filterable: "filterable", virtual: "virtual", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", selectionChange: "selectionChange", filterChange: "filterChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-combobox": "this.widgetClasses", "class.k-input": "this.widgetClasses", "class.k-disabled": "this.isDisabled", "class.k-loading": "this.isLoading", "attr.dir": "this.dir" } }, providers: [
+ComboBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ComboBoxComponent, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i2.PopupService }, { token: SelectionService }, { token: NavigationService }, { token: DisabledItemsService }, { token: DataService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+ComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ComboBoxComponent, selector: "kendo-combobox", inputs: { focusableId: "focusableId", allowCustom: "allowCustom", data: "data", value: "value", textField: "textField", valueField: "valueField", valuePrimitive: "valuePrimitive", valueNormalizer: "valueNormalizer", placeholder: "placeholder", popupSettings: "popupSettings", listHeight: "listHeight", iconClass: "iconClass", loading: "loading", suggest: "suggest", clearButton: "clearButton", disabled: "disabled", itemDisabled: "itemDisabled", readonly: "readonly", tabindex: "tabindex", tabIndex: "tabIndex", filterable: "filterable", virtual: "virtual", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", selectionChange: "selectionChange", filterChange: "filterChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-combobox": "this.widgetClasses", "class.k-input": "this.widgetClasses", "class.k-disabled": "this.isDisabled", "class.k-loading": "this.isLoading", "attr.dir": "this.dir" } }, providers: [
         COMBOBOX_VALUE_ACCESSOR,
         DataService,
         SelectionService,
@@ -5004,7 +5061,11 @@ ComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
                 mousedown: preventEventDefault
             }"
         >
-            <span class="k-icon k-i-x"></span>
+            <kendo-icon-wrapper
+                name="x"
+                [svgIcon]="xIcon"
+            >
+            </kendo-icon-wrapper>
         </span>
         <button
             #select
@@ -5018,7 +5079,13 @@ ComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
                 mousedown: preventEventDefault
             }"
         >
-            <span class="k-button-icon k-icon" [ngClass]="buttonClasses"></span>
+            <kendo-icon-wrapper
+                *ngIf="!loading && !iconClass"
+                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>
             <!--header template-->
@@ -5068,8 +5135,8 @@ ComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             <kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
         </ng-template>
         <ng-container #container></ng-container>
-  `, isInline: true, components: [{ type: SearchBarComponent, selector: "kendo-searchbar", inputs: ["id", "listId", "tagListId", "activeDescendant", "disabled", "readonly", "tabIndex", "popupOpen", "role", "isLoading", "isSuggestable", "isFilterable", "userInput", "suggestedText", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { type: 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: 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: i9.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ComboBoxComponent, decorators: [{
+  `, isInline: true, components: [{ type: SearchBarComponent, selector: "kendo-searchbar", inputs: ["id", "listId", "tagListId", "activeDescendant", "disabled", "readonly", "tabIndex", "popupOpen", "role", "isLoading", "isSuggestable", "isFilterable", "userInput", "suggestedText", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { type: i8.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: 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: i10.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i12.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ComboBoxComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoComboBox',
@@ -5135,7 +5202,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 mousedown: preventEventDefault
             }"
         >
-            <span class="k-icon k-i-x"></span>
+            <kendo-icon-wrapper
+                name="x"
+                [svgIcon]="xIcon"
+            >
+            </kendo-icon-wrapper>
         </span>
         <button
             #select
@@ -5149,7 +5220,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 mousedown: preventEventDefault
             }"
         >
-            <span class="k-button-icon k-icon" [ngClass]="buttonClasses"></span>
+            <kendo-icon-wrapper
+                *ngIf="!loading && !iconClass"
+                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>
             <!--header template-->
@@ -5361,9 +5438,9 @@ class ValueTemplateDirective {
         this.templateRef = templateRef;
     }
 }
-ValueTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ValueTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-ValueTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: ValueTemplateDirective, selector: "[kendoDropDownListValueTemplate],[kendoDropDownTreeValueTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ValueTemplateDirective, decorators: [{
+ValueTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ValueTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+ValueTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: ValueTemplateDirective, selector: "[kendoDropDownListValueTemplate],[kendoDropDownTreeValueTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ValueTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoDropDownListValueTemplate],[kendoDropDownTreeValueTemplate]'
@@ -5387,9 +5464,9 @@ class FilterInputDirective {
         this.zone.runOutsideAngular(() => setTimeout(fn));
     }
 }
-FilterInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterInputDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-FilterInputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: FilterInputDirective, selector: "[filterInput]", inputs: { focused: ["filterInput", "focused"] }, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterInputDirective, decorators: [{
+FilterInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FilterInputDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+FilterInputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: FilterInputDirective, selector: "[filterInput]", inputs: { focused: ["filterInput", "focused"] }, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FilterInputDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[filterInput]' // eslint-disable-line
@@ -5441,6 +5518,14 @@ 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.
          *
@@ -5834,8 +5919,7 @@ class DropDownListComponent {
         return this.ariaControls;
     }
     get hostAriaInvalid() {
-        var _a;
-        return this.formControl ? (_a = this.formControl) === null || _a === void 0 ? void 0 : _a.invalid.toString() : null;
+        return this.formControl ? this.formControl?.invalid.toString() : null;
     }
     get hostAriaActivedescendant() {
         return this.ariaActivedescendant;
@@ -5845,7 +5929,7 @@ class DropDownListComponent {
      */
     keydown(event) {
         const firstIndex = isPresent(this.defaultItem) ? -1 : 0;
-        let focused = isNaN(this.selectionService.focused) ? this.firstFocusableIndex(firstIndex) : this.selectionService.focused;
+        const focused = isNaN(this.selectionService.focused) ? this.firstFocusableIndex(firstIndex) : this.selectionService.focused;
         let offset = 0;
         if (this.disabled || this.readonly) {
             return;
@@ -5950,7 +6034,7 @@ class DropDownListComponent {
      */
     ngOnChanges(changes) {
         const virtual = this.virtual;
-        const requestInitialData = virtual && changes.data && changes.data.isFirstChange();
+        const requestInitialData = virtual && changes['data'] && changes['data'].isFirstChange();
         if (requestInitialData) {
             this.pageChange({ skip: 0, take: virtual.pageSize });
         }
@@ -5972,7 +6056,7 @@ class DropDownListComponent {
      */
     get formControl() {
         const ngControl = this.injector.get(NgControl, null);
-        return (ngControl === null || ngControl === void 0 ? void 0 : ngControl.control) || null;
+        return ngControl?.control || null;
     }
     /**
      * Focuses a specific item of the DropDownList based on a provided index.
@@ -6103,7 +6187,7 @@ 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
@@ -6457,7 +6541,7 @@ class DropDownListComponent {
         });
         const isInLoop = sameCharsOnly(this.word, this.last);
         let dataLength = data.length;
-        let hasSelected = !isNaN(this.selectionService.selected[0]);
+        const hasSelected = !isNaN(this.selectionService.selected[0]);
         let startIndex = !hasSelected ? 0 : this.selectionService.selected[0];
         let text, index, defaultItem;
         if (this.defaultItem && !this.disabledItemsService.isItemDisabled(this.defaultItem)) {
@@ -6583,8 +6667,8 @@ class DropDownListComponent {
         }
     }
 }
-DropDownListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DropDownListComponent, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i2.PopupService }, { token: SelectionService }, { token: NavigationService }, { token: DisabledItemsService }, { token: DataService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: TOUCH_ENABLED, optional: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-DropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: { iconClass: "iconClass", loading: "loading", data: "data", value: "value", textField: "textField", valueField: "valueField", popupSettings: "popupSettings", listHeight: "listHeight", defaultItem: "defaultItem", disabled: "disabled", itemDisabled: "itemDisabled", readonly: "readonly", filterable: "filterable", virtual: "virtual", ignoreCase: "ignoreCase", delay: "delay", valuePrimitive: "valuePrimitive", tabindex: "tabindex", tabIndex: "tabIndex", size: "size", rounded: "rounded", fillMode: "fillMode", focusableId: ["id", "focusableId"] }, outputs: { valueChange: "valueChange", filterChange: "filterChange", selectionChange: "selectionChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur" }, host: { listeners: { "keydown": "keydown($event)", "keypress": "keypress($event)", "click": "click($event)" }, properties: { "class.k-dropdownlist": "this.hostClasses", "class.k-picker": "this.hostClasses", "class.k-disabled": "this.isDisabledClass", "attr.disabled": "this.isDisabledAttribute", "class.k-loading": "this.isLoading", "attr.id": "this.focusableId", "attr.dir": "this.dir", "attr.tabindex": "this.hostTabIndex", "attr.readonly": "this.readonlyAttr", "attr.aria-busy": "this.isBusy", "attr.role": "this.role", "attr.aria-haspopup": "this.haspopup", "attr.aria-expanded": "this.isAriaExpanded", "attr.aria-controls": "this.hostAriaControls", "attr.aria-invalid": "this.hostAriaInvalid", "attr.aria-activedescendant": "this.hostAriaActivedescendant" } }, providers: [
+DropDownListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DropDownListComponent, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i2.PopupService }, { token: SelectionService }, { token: NavigationService }, { token: DisabledItemsService }, { token: DataService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: TOUCH_ENABLED, optional: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+DropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: { iconClass: "iconClass", loading: "loading", data: "data", value: "value", textField: "textField", valueField: "valueField", popupSettings: "popupSettings", listHeight: "listHeight", defaultItem: "defaultItem", disabled: "disabled", itemDisabled: "itemDisabled", readonly: "readonly", filterable: "filterable", virtual: "virtual", ignoreCase: "ignoreCase", delay: "delay", valuePrimitive: "valuePrimitive", tabindex: "tabindex", tabIndex: "tabIndex", size: "size", rounded: "rounded", fillMode: "fillMode", focusableId: ["id", "focusableId"] }, outputs: { valueChange: "valueChange", filterChange: "filterChange", selectionChange: "selectionChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur" }, host: { listeners: { "keydown": "keydown($event)", "keypress": "keypress($event)", "click": "click($event)" }, properties: { "class.k-dropdownlist": "this.hostClasses", "class.k-picker": "this.hostClasses", "class.k-disabled": "this.isDisabledClass", "attr.disabled": "this.isDisabledAttribute", "class.k-loading": "this.isLoading", "attr.id": "this.focusableId", "attr.dir": "this.dir", "attr.tabindex": "this.hostTabIndex", "attr.readonly": "this.readonlyAttr", "attr.aria-busy": "this.isBusy", "attr.role": "this.role", "attr.aria-haspopup": "this.haspopup", "attr.aria-expanded": "this.isAriaExpanded", "attr.aria-controls": "this.hostAriaControls", "attr.aria-invalid": "this.hostAriaInvalid", "attr.aria-activedescendant": "this.hostAriaActivedescendant" } }, providers: [
         DROPDOWNLIST_VALUE_ACCESSOR,
         DataService,
         SelectionService,
@@ -6632,12 +6716,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-->
 
@@ -6647,7 +6734,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"
@@ -6740,8 +6832,8 @@ 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: 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: 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: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i9.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: 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: SelectableDirective, selector: "[kendoDropDownsSelectable]", inputs: ["index", "checkboxes", "height", "multipleSelection"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DropDownListComponent, decorators: [{
+  `, isInline: true, components: [{ type: i8.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: 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: i10.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i12.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i10.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: 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: 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: [{
                     exportAs: 'kendoDropDownList',
@@ -6795,12 +6887,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", 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-->
 
@@ -6810,7 +6905,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", 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"
@@ -7102,9 +7202,9 @@ class CustomItemTemplateDirective {
         this.templateRef = templateRef;
     }
 }
-CustomItemTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CustomItemTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-CustomItemTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: CustomItemTemplateDirective, selector: "[kendoMultiSelectCustomItemTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CustomItemTemplateDirective, decorators: [{
+CustomItemTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CustomItemTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+CustomItemTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: CustomItemTemplateDirective, selector: "[kendoMultiSelectCustomItemTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CustomItemTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoMultiSelectCustomItemTemplate]'
@@ -7141,9 +7241,9 @@ class TagTemplateDirective {
         this.templateRef = templateRef;
     }
 }
-TagTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TagTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-TagTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TagTemplateDirective, selector: "[kendoMultiSelectTagTemplate],[kendoMultiSelectTreeTagTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TagTemplateDirective, decorators: [{
+TagTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TagTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+TagTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: TagTemplateDirective, selector: "[kendoMultiSelectTagTemplate],[kendoMultiSelectTreeTagTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TagTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoMultiSelectTagTemplate],[kendoMultiSelectTreeTagTemplate]'
@@ -7181,9 +7281,9 @@ class GroupTagTemplateDirective {
         this.templateRef = templateRef;
     }
 }
-GroupTagTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: GroupTagTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-GroupTagTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: GroupTagTemplateDirective, selector: "[kendoMultiSelectGroupTagTemplate],[kendoMultiSelectTreeGroupTagTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: GroupTagTemplateDirective, decorators: [{
+GroupTagTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GroupTagTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+GroupTagTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: GroupTagTemplateDirective, selector: "[kendoMultiSelectGroupTagTemplate],[kendoMultiSelectTreeGroupTagTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GroupTagTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoMultiSelectGroupTagTemplate],[kendoMultiSelectTreeGroupTagTemplate]'
@@ -7223,6 +7323,10 @@ class TagListComponent {
     constructor(renderer, hostElement) {
         this.renderer = renderer;
         this.hostElement = hostElement;
+        /**
+         * @hidden
+         */
+        this.xCircleIcon = xCircleIcon;
         this.rounded = 'medium';
         this.fillMode = 'solid';
         /**
@@ -7295,8 +7399,8 @@ class TagListComponent {
         }
     }
 }
-TagListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TagListComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-TagListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TagListComponent, selector: "kendo-taglist", inputs: { tags: "tags", textField: "textField", valueField: "valueField", valueDepth: "valueDepth", focused: "focused", template: "template", groupTemplate: "groupTemplate", disabled: "disabled", tagPrefix: "tagPrefix", id: "id", size: "size", rounded: "rounded", fillMode: "fillMode", disabledIndices: "disabledIndices" }, outputs: { removeTag: "removeTag" }, host: { properties: { "class.k-input-values": "this.hostClasses", "class.k-chip-list": "this.hostClasses", "class.k-selection-multiple": "this.hostClasses", "attr.id": "this.hostId" } }, ngImport: i0, template: `
+TagListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TagListComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+TagListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: TagListComponent, selector: "kendo-taglist", inputs: { tags: "tags", textField: "textField", valueField: "valueField", valueDepth: "valueDepth", focused: "focused", template: "template", groupTemplate: "groupTemplate", disabled: "disabled", tagPrefix: "tagPrefix", id: "id", size: "size", rounded: "rounded", fillMode: "fillMode", disabledIndices: "disabledIndices" }, outputs: { removeTag: "removeTag" }, host: { properties: { "class.k-input-values": "this.hostClasses", "class.k-chip-list": "this.hostClasses", "class.k-selection-multiple": "this.hostClasses", "attr.id": "this.hostId" } }, ngImport: i0, template: `
         <div
             *ngFor="let tag of tags; let index = index;"
             [attr.id]="itemId(tag, index)"
@@ -7342,17 +7446,20 @@ TagListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
                     </span>
                 </ng-template>
             </span>
-
             <span class="k-chip-actions">
                 <span aria-label="delete" [attr.aria-hidden]="index !== focused" class="k-chip-action k-chip-remove-action">
-                    <span class="k-icon k-i-x-circle" (mousedown)="deleteTag($event, tag, index)">
-                    </span>
+                    <kendo-icon-wrapper
+                        (mousedown)="deleteTag($event, tag, index)"
+                        name="x-circle"
+                        [svgIcon]="xCircleIcon"
+                    >
+                    </kendo-icon-wrapper>
                 </span>
             </span>
         </div>
         <ng-content></ng-content>
-  `, isInline: true, directives: [{ type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TagListComponent, decorators: [{
+  `, isInline: true, components: [{ type: i8.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i12.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i12.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TagListComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-taglist',
@@ -7402,11 +7509,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     </span>
                 </ng-template>
             </span>
-
             <span class="k-chip-actions">
                 <span aria-label="delete" [attr.aria-hidden]="index !== focused" class="k-chip-action k-chip-remove-action">
-                    <span class="k-icon k-i-x-circle" (mousedown)="deleteTag($event, tag, index)">
-                    </span>
+                    <kendo-icon-wrapper
+                        (mousedown)="deleteTag($event, tag, index)"
+                        name="x-circle"
+                        [svgIcon]="xCircleIcon"
+                    >
+                    </kendo-icon-wrapper>
                 </span>
             </span>
         </div>
@@ -7496,6 +7606,14 @@ class MultiSelectComponent {
         this.renderer = renderer;
         this._zone = _zone;
         this.touchEnabled = touchEnabled;
+        /**
+         * @hidden
+         */
+        this.xIcon = xIcon;
+        /**
+         * @hidden
+         */
+        this.plusIcon = plusIcon;
         this.listBoxId = guid();
         this.tagListId = guid();
         this.tagPrefix = "tag-" + guid();
@@ -8239,8 +8357,8 @@ class MultiSelectComponent {
      * @hidden
      */
     clearAll(event) {
-        event === null || event === void 0 ? void 0 : event.stopImmediatePropagation();
-        event === null || event === void 0 ? void 0 : event.preventDefault();
+        event?.stopImmediatePropagation();
+        event?.preventDefault();
         this.focus();
         this.clearFilter();
         this.selectionService.lastClickedIndex = null;
@@ -8717,7 +8835,7 @@ class MultiSelectComponent {
     findIndex(text, startsFrom = 0) {
         let itemText;
         text = text.toLowerCase();
-        let index = this.dataService.findIndex(item => {
+        const index = this.dataService.findIndex(item => {
             if (this.dataService.grouped) {
                 itemText = getter(item.value, this.textField);
             }
@@ -8868,8 +8986,8 @@ class MultiSelectComponent {
         }
     }
 }
-MultiSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MultiSelectComponent, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i2.PopupService }, { token: DataService }, { token: SelectionService }, { token: NavigationService }, { token: DisabledItemsService }, { token: i0.ChangeDetectorRef }, { token: i0.KeyValueDiffers }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MultiSelectComponent, selector: "kendo-multiselect", inputs: { focusableId: "focusableId", autoClose: "autoClose", loading: "loading", data: "data", value: "value", valueField: "valueField", textField: "textField", tabindex: "tabindex", tabIndex: "tabIndex", size: "size", rounded: "rounded", fillMode: "fillMode", placeholder: "placeholder", disabled: "disabled", itemDisabled: "itemDisabled", checkboxes: "checkboxes", readonly: "readonly", filterable: "filterable", virtual: "virtual", popupSettings: "popupSettings", listHeight: "listHeight", valuePrimitive: "valuePrimitive", clearButton: "clearButton", tagMapper: "tagMapper", allowCustom: "allowCustom", valueNormalizer: "valueNormalizer" }, outputs: { filterChange: "filterChange", valueChange: "valueChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur", removeTag: "removeTag" }, host: { listeners: { "keydown": "handleKeyboardEvent($event)", "mousedown": "hostMousedown($event)" }, properties: { "class.k-multiselect": "this.hostClasses", "class.k-input": "this.hostClasses", "attr.dir": "this.dir", "class.k-disabled": "this.disabledClass", "class.k-loading": "this.isLoading" } }, providers: [
+MultiSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MultiSelectComponent, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i2.PopupService }, { token: DataService }, { token: SelectionService }, { token: NavigationService }, { token: DisabledItemsService }, { token: i0.ChangeDetectorRef }, { token: i0.KeyValueDiffers }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: MultiSelectComponent, selector: "kendo-multiselect", inputs: { focusableId: "focusableId", autoClose: "autoClose", loading: "loading", data: "data", value: "value", valueField: "valueField", textField: "textField", tabindex: "tabindex", tabIndex: "tabIndex", size: "size", rounded: "rounded", fillMode: "fillMode", placeholder: "placeholder", disabled: "disabled", itemDisabled: "itemDisabled", checkboxes: "checkboxes", readonly: "readonly", filterable: "filterable", virtual: "virtual", popupSettings: "popupSettings", listHeight: "listHeight", valuePrimitive: "valuePrimitive", clearButton: "clearButton", tagMapper: "tagMapper", allowCustom: "allowCustom", valueNormalizer: "valueNormalizer" }, outputs: { filterChange: "filterChange", valueChange: "valueChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur", removeTag: "removeTag" }, host: { listeners: { "keydown": "handleKeyboardEvent($event)", "mousedown": "hostMousedown($event)" }, properties: { "class.k-multiselect": "this.hostClasses", "class.k-input": "this.hostClasses", "attr.dir": "this.dir", "class.k-disabled": "this.disabledClass", "class.k-loading": "this.isLoading" } }, providers: [
         MULTISELECT_VALUE_ACCESSOR,
         DataService,
         SelectionService,
@@ -8943,7 +9061,12 @@ MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
             tabindex="-1"
             (mousedown)="clearAll($event)"
         >
-            <span class="k-icon k-i-x"></span>
+            <kendo-icon-wrapper
+                class="k-icon"
+                name="x"
+                [svgIcon]="xIcon"
+            >
+            </kendo-icon-wrapper>
         </span>
         <span
             *ngIf="loading"
@@ -8971,7 +9094,12 @@ MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
                         }">
                     </ng-template>
                     <ng-template #default_custom_item_template>{{ text }}</ng-template>
-                    <span class="k-icon k-i-plus" style="float: right"></span>
+                    <kendo-icon-wrapper
+                        class="k-icon"
+                        name="plus"
+                        [svgIcon]="plusIcon"
+                    >
+                    </kendo-icon-wrapper>
                 </div>
             </div>
             <!--list-->
@@ -9018,8 +9146,8 @@ MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
             <kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
         </ng-template>
         <ng-container #container></ng-container>
-  `, isInline: true, components: [{ type: TagListComponent, selector: "kendo-taglist", inputs: ["tags", "textField", "valueField", "valueDepth", "focused", "template", "groupTemplate", "disabled", "tagPrefix", "id", "size", "rounded", "fillMode", "disabledIndices"], outputs: ["removeTag"] }, { type: SearchBarComponent, selector: "kendo-searchbar", inputs: ["id", "listId", "tagListId", "activeDescendant", "disabled", "readonly", "tabIndex", "popupOpen", "role", "isLoading", "isSuggestable", "isFilterable", "userInput", "suggestedText", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { type: 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: 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: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: SelectableDirective, selector: "[kendoDropDownsSelectable]", inputs: ["index", "checkboxes", "height", "multipleSelection"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MultiSelectComponent, decorators: [{
+  `, isInline: true, components: [{ type: TagListComponent, selector: "kendo-taglist", inputs: ["tags", "textField", "valueField", "valueDepth", "focused", "template", "groupTemplate", "disabled", "tagPrefix", "id", "size", "rounded", "fillMode", "disabledIndices"], outputs: ["removeTag"] }, { type: SearchBarComponent, selector: "kendo-searchbar", inputs: ["id", "listId", "tagListId", "activeDescendant", "disabled", "readonly", "tabIndex", "popupOpen", "role", "isLoading", "isSuggestable", "isFilterable", "userInput", "suggestedText", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { type: i8.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: 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: i10.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i12.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: SelectableDirective, selector: "[kendoDropDownsSelectable]", inputs: ["index", "checkboxes", "height", "multipleSelection"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MultiSelectComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoMultiSelect',
@@ -9099,7 +9227,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             tabindex="-1"
             (mousedown)="clearAll($event)"
         >
-            <span class="k-icon k-i-x"></span>
+            <kendo-icon-wrapper
+                class="k-icon"
+                name="x"
+                [svgIcon]="xIcon"
+            >
+            </kendo-icon-wrapper>
         </span>
         <span
             *ngIf="loading"
@@ -9127,7 +9260,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                         }">
                     </ng-template>
                     <ng-template #default_custom_item_template>{{ text }}</ng-template>
-                    <span class="k-icon k-i-plus" style="float: right"></span>
+                    <kendo-icon-wrapper
+                        class="k-icon"
+                        name="plus"
+                        [svgIcon]="plusIcon"
+                    >
+                    </kendo-icon-wrapper>
                 </div>
             </div>
             <!--list-->
@@ -9331,9 +9469,9 @@ class ColumnCellTemplateDirective {
         this.templateRef = templateRef;
     }
 }
-ColumnCellTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColumnCellTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-ColumnCellTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: ColumnCellTemplateDirective, selector: "[kendoMultiColumnComboBoxColumnCellTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColumnCellTemplateDirective, decorators: [{
+ColumnCellTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColumnCellTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+ColumnCellTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: ColumnCellTemplateDirective, selector: "[kendoMultiColumnComboBoxColumnCellTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColumnCellTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoMultiColumnComboBoxColumnCellTemplate]'
@@ -9352,9 +9490,9 @@ class ColumnHeaderTemplateDirective {
         this.templateRef = templateRef;
     }
 }
-ColumnHeaderTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColumnHeaderTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-ColumnHeaderTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: ColumnHeaderTemplateDirective, selector: "[kendoMultiColumnComboBoxColumnHeaderTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColumnHeaderTemplateDirective, decorators: [{
+ColumnHeaderTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColumnHeaderTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+ColumnHeaderTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: ColumnHeaderTemplateDirective, selector: "[kendoMultiColumnComboBoxColumnHeaderTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColumnHeaderTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoMultiColumnComboBoxColumnHeaderTemplate]'
@@ -9379,9 +9517,9 @@ class ComboBoxColumnComponent {
         this.matchesMedia = true;
     }
 }
-ComboBoxColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ComboBoxColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ComboBoxColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ComboBoxColumnComponent, selector: "kendo-combobox-column", inputs: { field: "field", title: "title", width: "width", hidden: "hidden", style: "style", headerStyle: "headerStyle", class: "class", headerClass: "headerClass", media: "media" }, queries: [{ propertyName: "cellTemplate", first: true, predicate: ColumnCellTemplateDirective, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: ColumnHeaderTemplateDirective, descendants: true }], ngImport: i0, template: '', isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ComboBoxColumnComponent, decorators: [{
+ComboBoxColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ComboBoxColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ComboBoxColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ComboBoxColumnComponent, selector: "kendo-combobox-column", inputs: { field: "field", title: "title", width: "width", hidden: "hidden", style: "style", headerStyle: "headerStyle", class: "class", headerClass: "headerClass", media: "media" }, queries: [{ propertyName: "cellTemplate", first: true, predicate: ColumnCellTemplateDirective, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: ColumnHeaderTemplateDirective, descendants: true }], ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ComboBoxColumnComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-combobox-column',
@@ -9584,8 +9722,8 @@ class MultiColumnComboBoxComponent extends ComboBoxComponent {
         });
     }
 }
-MultiColumnComboBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MultiColumnComboBoxComponent, deps: [{ token: i1.LocalizationService }, { token: i2.PopupService }, { token: SelectionService }, { token: NavigationService }, { token: DisabledItemsService }, { token: DataService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: TOUCH_ENABLED }], target: i0.ɵɵFactoryTarget.Component });
-MultiColumnComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MultiColumnComboBoxComponent, selector: "kendo-multicolumncombobox", host: { properties: { "class.k-dropdowngrid": "this.hostClasses", "class.k-disabled": "this.isDisabled" } }, providers: [
+MultiColumnComboBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MultiColumnComboBoxComponent, deps: [{ token: i1.LocalizationService }, { token: i2.PopupService }, { token: SelectionService }, { token: NavigationService }, { token: DisabledItemsService }, { token: DataService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: TOUCH_ENABLED }], target: i0.ɵɵFactoryTarget.Component });
+MultiColumnComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: MultiColumnComboBoxComponent, selector: "kendo-multicolumncombobox", host: { properties: { "class.k-dropdowngrid": "this.hostClasses", "class.k-disabled": "this.isDisabled" } }, providers: [
         SelectionService,
         DataService,
         NavigationService,
@@ -9656,7 +9794,11 @@ MultiColumnComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
                 mousedown: preventEventDefault
             }"
         >
-            <span class="k-icon k-i-x"></span>
+            <kendo-icon-wrapper
+                name="x"
+                [svgIcon]="xIcon"
+            >
+            </kendo-icon-wrapper>
         </span>
 
         <button
@@ -9672,7 +9814,13 @@ MultiColumnComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
                 mousedown: preventEventDefault
             }"
         >
-            <span class="k-button-icon k-icon" [ngClass]="buttonClasses"></span>
+            <kendo-icon-wrapper
+                *ngIf="!loading && !iconClass"
+                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>
@@ -9828,8 +9976,8 @@ MultiColumnComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
 
         <!-- when the popupSettings.appendTo value is set to 'component', this container is used -->
         <ng-container #container></ng-container>
-    `, isInline: true, components: [{ type: SearchBarComponent, selector: "kendo-searchbar", inputs: ["id", "listId", "tagListId", "activeDescendant", "disabled", "readonly", "tabIndex", "popupOpen", "role", "isLoading", "isSuggestable", "isFilterable", "userInput", "suggestedText", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { type: 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: 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: i9.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i11.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MultiColumnComboBoxComponent, decorators: [{
+    `, isInline: true, components: [{ type: SearchBarComponent, selector: "kendo-searchbar", inputs: ["id", "listId", "tagListId", "activeDescendant", "disabled", "readonly", "tabIndex", "popupOpen", "role", "isLoading", "isSuggestable", "isFilterable", "userInput", "suggestedText", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { type: i8.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: 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: i10.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i12.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i12.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i12.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MultiColumnComboBoxComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [
@@ -9905,7 +10053,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 mousedown: preventEventDefault
             }"
         >
-            <span class="k-icon k-i-x"></span>
+            <kendo-icon-wrapper
+                name="x"
+                [svgIcon]="xIcon"
+            >
+            </kendo-icon-wrapper>
         </span>
 
         <button
@@ -9921,7 +10073,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 mousedown: preventEventDefault
             }"
         >
-            <span class="k-button-icon k-icon" [ngClass]="buttonClasses"></span>
+            <kendo-icon-wrapper
+                *ngIf="!loading && !iconClass"
+                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>
@@ -10110,9 +10268,9 @@ class NodeTemplateDirective {
         this.templateRef = templateRef;
     }
 }
-NodeTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NodeTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-NodeTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: NodeTemplateDirective, selector: "[kendoDropDownTreeNodeTemplate], [kendoMultiSelectTreeNodeTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NodeTemplateDirective, decorators: [{
+NodeTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NodeTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+NodeTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: NodeTemplateDirective, selector: "[kendoDropDownTreeNodeTemplate], [kendoMultiSelectTreeNodeTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NodeTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoDropDownTreeNodeTemplate], [kendoMultiSelectTreeNodeTemplate]'
@@ -10141,6 +10299,18 @@ 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';
@@ -10282,7 +10452,10 @@ 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';
@@ -10336,6 +10509,9 @@ 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
@@ -10582,12 +10758,23 @@ 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.subscriptions.push(this.localization
+        this.subs.add(this.localization
             .changes.subscribe(({ rtl }) => {
             this.direction = rtl ? 'rtl' : 'ltr';
             this.cdr.markForCheck();
@@ -10690,7 +10877,7 @@ 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);
             }
@@ -10841,7 +11028,7 @@ 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
@@ -10886,6 +11073,16 @@ class DropDownTreeComponent {
         }
         return null;
     }
+    /**
+     * @hidden
+     */
+    onChildrenLoaded() {
+        setTimeout(() => {
+            if (this.popupRef) {
+                this._searchableNodes = getSearchableItems(this._popupId, this.popupRef.popupElement);
+            }
+        });
+    }
     /**
      * @hidden
      *
@@ -10942,6 +11139,7 @@ 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();
@@ -10983,33 +11181,41 @@ 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) {
@@ -11048,7 +11254,7 @@ class DropDownTreeComponent {
         }
     }
     unsubscribeEvents() {
-        this.subscriptions.forEach(sub => sub.unsubscribe());
+        this.subs.unsubscribe();
         this.unSubscribeFocusEvents();
         if (this.touchstartDisposeHandler) {
             this.touchstartDisposeHandler();
@@ -11079,8 +11285,8 @@ class DropDownTreeComponent {
         }
     }
 }
-DropDownTreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DropDownTreeComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: i2.PopupService }, { token: NavigationService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }, { token: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-DropDownTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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: [
+DropDownTreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DropDownTreeComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: i2.PopupService }, { token: NavigationService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i1.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,
@@ -11141,7 +11347,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"
@@ -11151,10 +11362,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
@@ -11166,7 +11380,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
@@ -11220,6 +11439,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-->
@@ -11242,8 +11462,8 @@ DropDownTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             </div>
         </ng-template>
         <ng-container #container></ng-container>
-    `, isInline: true, components: [{ type: i1$1.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: 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: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: 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: i9.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i1$1.SelectDirective, selector: "[kendoTreeViewSelectable]", inputs: ["isSelected", "selectBy", "kendoTreeViewSelectable", "selectedKeys"], outputs: ["selectedKeysChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DropDownTreeComponent, decorators: [{
+    `, isInline: true, components: [{ type: i8.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: i1$1.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: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i12.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: 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: i10.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i1$1.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',
@@ -11310,7 +11530,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", 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"
@@ -11320,10 +11545,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", 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
@@ -11335,7 +11563,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", 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
@@ -11389,6 +11622,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 (selectionChange)="onSelectionChange($event)"
                 (expand)="nodeExpand.emit($event)"
                 (collapse)="nodeCollapse.emit($event)"
+                (childrenLoaded)="onChildrenLoaded()"
             >
             </kendo-treeview>
             <!--footer template-->
@@ -11650,9 +11884,9 @@ class MultiSelectTreeLookupService {
         });
     }
 }
-MultiSelectTreeLookupService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MultiSelectTreeLookupService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-MultiSelectTreeLookupService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MultiSelectTreeLookupService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MultiSelectTreeLookupService, decorators: [{
+MultiSelectTreeLookupService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MultiSelectTreeLookupService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+MultiSelectTreeLookupService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MultiSelectTreeLookupService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MultiSelectTreeLookupService, decorators: [{
             type: Injectable
         }] });
 
@@ -11668,7 +11902,7 @@ class BaseCheckDirective {
         }
         const level = getHierarchicalItemLevel(item.index);
         const key = this.getKey(item, level);
-        const candidate = Object.assign(Object.assign({}, item), { level, key });
+        const candidate = { ...item, level, key };
         this.checkedItems.push(candidate);
         this.checkedKeys.add(key);
     }
@@ -11678,7 +11912,7 @@ class BaseCheckDirective {
         }
         const level = getHierarchicalItemLevel(item.index);
         const key = this.getKey(item, level);
-        const candidate = Object.assign(Object.assign({}, item), { level, key });
+        const candidate = { ...item, level, key };
         this.checkedItems = this.checkedItems
             .filter(item => valueFrom(item, this.valueField) !== valueFrom(candidate, this.valueField));
         this.checkedKeys.delete(key);
@@ -11703,9 +11937,9 @@ class BaseCheckDirective {
         return valueFrom(item, this.valueField) + '_' + (this.isHeterogeneous ? level : 0);
     }
 }
-BaseCheckDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: BaseCheckDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-BaseCheckDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: BaseCheckDirective, inputs: { valueField: "valueField", checkedItems: "checkedItems", isHeterogeneous: "isHeterogeneous" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: BaseCheckDirective, decorators: [{
+BaseCheckDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BaseCheckDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+BaseCheckDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: BaseCheckDirective, inputs: { valueField: "valueField", checkedItems: "checkedItems", isHeterogeneous: "isHeterogeneous" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BaseCheckDirective, decorators: [{
             type: Directive
         }], propDecorators: { valueField: [{
                 type: Input
@@ -11767,7 +12001,7 @@ class CheckAllDirective extends BaseCheckDirective {
         return isChecked;
     }
     ngOnChanges(changes) {
-        if (isPresent(changes.checkedItems)) {
+        if (isPresent(changes['checkedItems'])) {
             this.updateItems();
             this.renderer.setProperty(this.element.nativeElement, 'checked', this.isChecked);
             this.renderer.setProperty(this.element.nativeElement, 'indeterminate', this.isIndeterminate);
@@ -11836,9 +12070,9 @@ class CheckAllDirective extends BaseCheckDirective {
         return childrenChecked || this.isItemChecked(lookup.item);
     }
 }
-CheckAllDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CheckAllDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-CheckAllDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: CheckAllDirective, selector: "[checkAll]", inputs: { lastAction: "lastAction", treeview: "treeview", checkedItems: "checkedItems", valueField: "valueField", focused: ["checkAll", "focused"] }, outputs: { checkedItemsChange: "checkedItemsChange" }, host: { listeners: { "change": "handleChange($event.target)" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CheckAllDirective, decorators: [{
+CheckAllDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CheckAllDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+CheckAllDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: CheckAllDirective, selector: "[checkAll]", inputs: { lastAction: "lastAction", treeview: "treeview", checkedItems: "checkedItems", valueField: "valueField", focused: ["checkAll", "focused"] }, outputs: { checkedItemsChange: "checkedItemsChange" }, host: { listeners: { "change": "handleChange($event.target)" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CheckAllDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line
@@ -11888,10 +12122,10 @@ 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();
         }
     }
@@ -11989,9 +12223,9 @@ class CheckDirective extends BaseCheckDirective {
         return false;
     }
 }
-CheckDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CheckDirective, deps: [{ token: i1$1.TreeViewComponent }], target: i0.ɵɵFactoryTarget.Directive });
-CheckDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", 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.16", ngImport: i0, type: CheckDirective, decorators: [{
+CheckDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CheckDirective, deps: [{ token: i1$1.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]'
@@ -12030,6 +12264,14 @@ class MultiSelectTreeComponent {
         this.cdr = cdr;
         this.lookup = lookup;
         this.touchEnabled = touchEnabled;
+        /**
+         * @hidden
+         */
+        this.searchIcon = searchIcon;
+        /**
+         * @hidden
+         */
+        this.xIcon = xIcon;
         this.hostClasses = true;
         this.role = 'combobox';
         this.ariaHasPopup = 'tree';
@@ -12195,7 +12437,10 @@ class MultiSelectTreeComponent {
         this._size = 'medium';
         this._rounded = 'medium';
         this._fillMode = 'solid';
-        this.subscriptions = [];
+        this._searchableNodes = [];
+        this._typedValue = '';
+        this.printableCharacters = new Subject();
+        this.subs = new Subscription();
         this.lastAction = 'check';
         this.onTouchedCallback = noop;
         this.onChangeCallback = noop;
@@ -12244,7 +12489,7 @@ class MultiSelectTreeComponent {
      */
     get formControl() {
         const ngControl = this.injector.get(NgControl, null);
-        return (ngControl === null || ngControl === void 0 ? void 0 : ngControl.control) || null;
+        return ngControl?.control || null;
     }
     /**
      * @hidden
@@ -12264,6 +12509,9 @@ class MultiSelectTreeComponent {
         if (this.disabled || this.readonly) {
             return;
         }
+        if (isLetter(event.key)) {
+            this.printableCharacters.next(event.key);
+        }
         const eventData = event;
         const action = this.navigationService.process({
             originalEvent: eventData
@@ -12271,6 +12519,10 @@ class MultiSelectTreeComponent {
         if (action === NavigationAction.Open) {
             eventData.preventDefault();
         }
+        if (this.isOpen && action === NavigationAction.Enter) {
+            const spaceKeyDownEvent = new KeyboardEvent('keydown', { 'key': ' ', 'code': 'Space', 'keyCode': 32, 'which': 32 });
+            this.treeview?.element.nativeElement.dispatchEvent(spaceKeyDownEvent);
+        }
     }
     set treeview(treeview) {
         this._treeview = treeview;
@@ -12590,9 +12842,20 @@ class MultiSelectTreeComponent {
         return this.checkAllInput && document.activeElement === this.checkAllInput.nativeElement;
     }
     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.renderer.setAttribute(this.wrapper.nativeElement, 'aria-expanded', String(this.isOpen));
-        this.subscriptions.push(this.localization
+        this.subs.add(this.localization
             .changes.subscribe(({ rtl }) => {
             this.direction = rtl ? 'rtl' : 'ltr';
             this.cdr.markForCheck();
@@ -12615,14 +12878,18 @@ class MultiSelectTreeComponent {
             this.setState();
         }
         if (anyChanged(['valueDepth', 'value', 'dataItems'], changes, false)) {
-            if (changes.value && !changes.dataItems && !this.valuePrimitive) {
+            if (changes['value'] && !changes['dataItems'] && !this.valuePrimitive) {
                 // Update the dataItems if the value is updated programmatically (non-primitive values only)
                 // In the primitive case, the client should update the dataItems as well
                 this.dataItems = this.value;
             }
             else {
                 // Re-map the dataItems because `valueDepth` is not yet available when the check directive parses the items
-                this.dataItems = this.dataItems.map((item, index) => (Object.assign(Object.assign({}, item), { key: valueFrom({ dataItem: item.dataItem, index: null, level: this.valueDepth[index] || 0 }, this.valueField) + '_' + (this.isHeterogeneous ? this.valueDepth[index] : 0), level: this.valueDepth[index] || 0 })));
+                this.dataItems = this.dataItems.map((item, index) => ({
+                    ...item,
+                    key: valueFrom({ dataItem: item.dataItem, index: null, level: this.valueDepth[index] || 0 }, this.valueField) + '_' + (this.isHeterogeneous ? this.valueDepth[index] : 0),
+                    level: this.valueDepth[index] || 0
+                }));
             }
         }
         if (anyChanged(['data', 'children', 'hasChildren', 'loadOnDemand', 'valueField'], changes, true) && !this.loadOnDemand) {
@@ -12649,7 +12916,7 @@ class MultiSelectTreeComponent {
      * should be rendered inside the input when the component is not focused.
      */
     isEmpty() {
-        return !Boolean(this.placeholder) && (!isPresent(this.value) || this.value.length === 0);
+        return !this.placeholder && (!isPresent(this.value) || this.value.length === 0);
     }
     /**
      * Focuses the MultiSelectTree.
@@ -12995,9 +13262,11 @@ class MultiSelectTreeComponent {
         popupWrapper.style.height = this.height;
         this.renderer.setAttribute(popupWrapper, 'dir', this.direction);
         this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-expanded', 'true');
+        this.renderer.setAttribute(popupWrapper, 'id', this._popupId);
         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();
@@ -13020,20 +13289,33 @@ class MultiSelectTreeComponent {
         }
     }
     subscribeEvents() {
-        this.subscriptions.push(this.navigationService.open.subscribe((event) => {
-            event.originalEvent.preventDefault();
-            this.togglePopup(true);
-        }), this.navigationService.enter
-            .pipe(tap((event) => event.originalEvent.preventDefault()))
-            .subscribe(() => this.togglePopup(true)), merge(this.navigationService.close, this.navigationService.esc).subscribe((event) => {
-            event.originalEvent.preventDefault();
-            this.focus();
-            this.togglePopup(false);
-        }), this.navigationService.tab.subscribe(this.handleTabKey.bind(this)), this.navigationService.up.subscribe(this.handleUpKey.bind(this)), this.navigationService.down.subscribe(this.handleDownKey.bind(this)), this.navigationService.left
-            .pipe(filter(() => !this.isTreeViewActive))
-            .subscribe(this.direction === 'rtl' ? this.handleRightKey.bind(this) : this.handleLeftKey.bind(this)), this.navigationService.right
-            .pipe(filter(() => !this.isTreeViewActive))
-            .subscribe(this.direction === 'rtl' ? this.handleLeftKey.bind(this) : this.handleRightKey.bind(this)), this.navigationService.home.pipe(filter(() => !this.isOpen)).subscribe(this.handleHome.bind(this)), this.navigationService.end.pipe(filter(() => !this.isOpen)).subscribe(this.handleEnd.bind(this)), this.navigationService.backspace.pipe(filter(() => this.isTagFocused)).subscribe(this.handleBackspace.bind(this)), this.navigationService.delete.pipe(filter(() => this.isTagFocused)).subscribe(this.handleDelete.bind(this)));
+        [
+            this.navigationService.open.subscribe((event) => {
+                event.originalEvent.preventDefault();
+                this.togglePopup(true);
+            }),
+            this.navigationService.enter
+                .pipe(tap((event) => event.originalEvent.preventDefault()))
+                .subscribe(() => this.togglePopup(true)),
+            merge(this.navigationService.close, this.navigationService.esc).subscribe((event) => {
+                event.originalEvent.preventDefault();
+                this.focus();
+                this.togglePopup(false);
+            }),
+            this.navigationService.tab.subscribe(this.handleTabKey.bind(this)),
+            this.navigationService.up.subscribe(this.handleUpKey.bind(this)),
+            this.navigationService.down.subscribe(this.handleDownKey.bind(this)),
+            this.navigationService.left
+                .pipe(filter(() => !this.isTreeViewActive))
+                .subscribe(this.direction === 'rtl' ? this.handleRightKey.bind(this) : this.handleLeftKey.bind(this)),
+            this.navigationService.right
+                .pipe(filter(() => !this.isTreeViewActive))
+                .subscribe(this.direction === 'rtl' ? this.handleLeftKey.bind(this) : this.handleRightKey.bind(this)),
+            this.navigationService.home.pipe(filter(() => !this.isOpen)).subscribe(this.handleHome.bind(this)),
+            this.navigationService.end.pipe(filter(() => !this.isOpen)).subscribe(this.handleEnd.bind(this)),
+            this.navigationService.backspace.pipe(filter(() => this.isTagFocused)).subscribe(this.handleBackspace.bind(this)),
+            this.navigationService.delete.pipe(filter(() => this.isTagFocused)).subscribe(this.handleDelete.bind(this))
+        ].forEach(sub => this.subs.add(sub));
     }
     subscribeFocusEvents() {
         if (isDocumentAvailable()) {
@@ -13164,7 +13446,7 @@ class MultiSelectTreeComponent {
         }
     }
     unsubscribeEvents() {
-        this.subscriptions.forEach(sub => sub.unsubscribe());
+        this.subs.unsubscribe();
         this.unSubscribeFocusEvents();
     }
     /**
@@ -13199,6 +13481,16 @@ class MultiSelectTreeComponent {
         this.value = newValue;
         this.emitValueChange(this.value);
     }
+    /**
+     * @hidden
+     */
+    onChildrenLoaded() {
+        setTimeout(() => {
+            if (this.popupRef) {
+                this._searchableNodes = getSearchableItems(this._popupId, this.popupRef.popupElement);
+            }
+        });
+    }
     /**
      * @hidden
      *
@@ -13262,8 +13554,8 @@ class MultiSelectTreeComponent {
         }
     }
 }
-MultiSelectTreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MultiSelectTreeComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: i2.PopupService }, { token: i0.Renderer2 }, { token: NavigationService }, { token: i0.NgZone }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: MultiSelectTreeLookupService }, { token: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-MultiSelectTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MultiSelectTreeComponent, selector: "kendo-multiselecttree", inputs: { tabindex: "tabindex", size: "size", rounded: "rounded", fillMode: "fillMode", popupSettings: "popupSettings", checkableSettings: "checkableSettings", data: "data", value: "value", dataItems: "dataItems", textField: "textField", valueField: "valueField", valueDepth: "valueDepth", loading: "loading", placeholder: "placeholder", listHeight: "listHeight", disabled: "disabled", readonly: "readonly", valuePrimitive: "valuePrimitive", loadOnDemand: "loadOnDemand", focusableId: "focusableId", clearButton: "clearButton", filterable: "filterable", checkAll: "checkAll", hasChildren: "hasChildren", fetchChildren: "fetchChildren", isNodeExpanded: "isNodeExpanded", isNodeVisible: "isNodeVisible", itemDisabled: "itemDisabled", tagMapper: "tagMapper" }, outputs: { onFocus: "focus", onBlur: "blur", open: "open", opened: "opened", close: "close", closed: "closed", nodeExpand: "nodeExpand", nodeCollapse: "nodeCollapse", valueChange: "valueChange", removeTag: "removeTag", filterChange: "filterChange" }, host: { listeners: { "click": "handleClick()", "keydown": "handleKeydown($event)" }, properties: { "class.k-multiselect-tree": "this.hostClasses", "class.k-input": "this.hostClasses", "class.k-disabled": "this.isDisabled", "attr.aria-disabled": "this.isDisabled", "attr.aria-controls": "this.hostAriaControls", "attr.aria-autocomplete": "this.hostAriaAutocomplete", "class.k-loading": "this.isLoading", "attr.aria-invalid": "this.hostAriaInvalid", "attr.aria-busy": "this.isBusy", "attr.id": "this.id", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabIndex", "attr.role": "this.role", "attr.aria-expanded": "this.isAriaExpanded", "attr.aria-haspopup": "this.ariaHasPopup", "attr.readonly": "this.isReadonly", "attr.aria-describedby": "this.ariaDescribedBy", "attr.aria-activedescendant": "this.ariaActiveDescendant" } }, providers: [
+MultiSelectTreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MultiSelectTreeComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: i2.PopupService }, { token: i0.Renderer2 }, { token: NavigationService }, { token: i0.NgZone }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: MultiSelectTreeLookupService }, { token: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+MultiSelectTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: MultiSelectTreeComponent, selector: "kendo-multiselecttree", inputs: { tabindex: "tabindex", size: "size", rounded: "rounded", fillMode: "fillMode", popupSettings: "popupSettings", checkableSettings: "checkableSettings", data: "data", value: "value", dataItems: "dataItems", textField: "textField", valueField: "valueField", valueDepth: "valueDepth", loading: "loading", placeholder: "placeholder", listHeight: "listHeight", disabled: "disabled", readonly: "readonly", valuePrimitive: "valuePrimitive", loadOnDemand: "loadOnDemand", focusableId: "focusableId", clearButton: "clearButton", filterable: "filterable", checkAll: "checkAll", hasChildren: "hasChildren", fetchChildren: "fetchChildren", isNodeExpanded: "isNodeExpanded", isNodeVisible: "isNodeVisible", itemDisabled: "itemDisabled", tagMapper: "tagMapper" }, outputs: { onFocus: "focus", onBlur: "blur", open: "open", opened: "opened", close: "close", closed: "closed", nodeExpand: "nodeExpand", nodeCollapse: "nodeCollapse", valueChange: "valueChange", removeTag: "removeTag", filterChange: "filterChange" }, host: { listeners: { "click": "handleClick()", "keydown": "handleKeydown($event)" }, properties: { "class.k-multiselect-tree": "this.hostClasses", "class.k-input": "this.hostClasses", "class.k-disabled": "this.isDisabled", "attr.aria-disabled": "this.isDisabled", "attr.aria-controls": "this.hostAriaControls", "attr.aria-autocomplete": "this.hostAriaAutocomplete", "class.k-loading": "this.isLoading", "attr.aria-invalid": "this.hostAriaInvalid", "attr.aria-busy": "this.isBusy", "attr.id": "this.id", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabIndex", "attr.role": "this.role", "attr.aria-expanded": "this.isAriaExpanded", "attr.aria-haspopup": "this.ariaHasPopup", "attr.readonly": "this.isReadonly", "attr.aria-describedby": "this.ariaDescribedBy", "attr.aria-activedescendant": "this.ariaActiveDescendant" } }, providers: [
         LocalizationService,
         NavigationService,
         DataService,
@@ -13334,7 +13626,12 @@ MultiSelectTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
             tabindex="-1"
             (click)="clearAll($event)"
         >
-            <span class="k-icon k-i-x"></span>
+            <kendo-icon-wrapper
+                class="k-icon"
+                name="x"
+                [svgIcon]="xIcon"
+            >
+            </kendo-icon-wrapper>
         </span>
         <span
             *ngIf="loading"
@@ -13351,7 +13648,12 @@ MultiSelectTreeComponent.ɵ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
@@ -13439,6 +13741,7 @@ MultiSelectTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
                     focusout: handleBlur
                 }"
                 [scope]="this"
+                (childrenLoaded)="onChildrenLoaded()"
             >
             </kendo-treeview>
             <!--footer template-->
@@ -13461,8 +13764,8 @@ MultiSelectTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
             </div>
         </ng-template>
         <ng-container #container></ng-container>
-    `, isInline: true, components: [{ type: TagListComponent, selector: "kendo-taglist", inputs: ["tags", "textField", "valueField", "valueDepth", "focused", "template", "groupTemplate", "disabled", "tagPrefix", "id", "size", "rounded", "fillMode", "disabledIndices"], outputs: ["removeTag"] }, { type: i1$1.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: 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: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: 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: i9.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: CheckAllDirective, selector: "[checkAll]", inputs: ["lastAction", "treeview", "checkedItems", "valueField", "checkAll"], outputs: ["checkedItemsChange"] }, { type: CheckDirective, selector: "[kendoMultiSelectTreeCheckable]", inputs: ["checkable", "valueField", "checkedItems"], outputs: ["checkedItemsChange"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MultiSelectTreeComponent, decorators: [{
+    `, isInline: true, components: [{ type: TagListComponent, selector: "kendo-taglist", inputs: ["tags", "textField", "valueField", "valueDepth", "focused", "template", "groupTemplate", "disabled", "tagPrefix", "id", "size", "rounded", "fillMode", "disabledIndices"], outputs: ["removeTag"] }, { type: i8.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: i1$1.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: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i12.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: 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: i10.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: CheckAllDirective, selector: "[checkAll]", inputs: ["lastAction", "treeview", "checkedItems", "valueField", "checkAll"], outputs: ["checkedItemsChange"] }, { type: CheckDirective, selector: "[kendoMultiSelectTreeCheckable]", inputs: ["checkable", "valueField", "checkedItems"], outputs: ["checkedItemsChange"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MultiSelectTreeComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoMultiSelectTree',
@@ -13539,7 +13842,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             tabindex="-1"
             (click)="clearAll($event)"
         >
-            <span class="k-icon k-i-x"></span>
+            <kendo-icon-wrapper
+                class="k-icon"
+                name="x"
+                [svgIcon]="xIcon"
+            >
+            </kendo-icon-wrapper>
         </span>
         <span
             *ngIf="loading"
@@ -13556,7 +13864,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", 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
@@ -13644,6 +13957,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     focusout: handleBlur
                 }"
                 [scope]="this"
+                (childrenLoaded)="onChildrenLoaded()"
             >
             </kendo-treeview>
             <!--footer template-->
@@ -13866,15 +14180,15 @@ 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.16", ngImport: i0, type: DropDownTreeFlatBindingDirective, deps: [{ token: i1$1.DataBoundComponent }], target: i0.ɵɵFactoryTarget.Directive });
-DropDownTreeFlatBindingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", 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.16", ngImport: i0, type: DropDownTreeFlatBindingDirective, decorators: [{
+DropDownTreeFlatBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DropDownTreeFlatBindingDirective, deps: [{ token: i1$1.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]'
@@ -13924,15 +14238,15 @@ class DropDownTreeHierarchyBindingDirective extends HierarchyBindingDirective {
     }
     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.16", ngImport: i0, type: DropDownTreeHierarchyBindingDirective, deps: [{ token: i1$1.DataBoundComponent }], target: i0.ɵɵFactoryTarget.Directive });
-DropDownTreeHierarchyBindingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: DropDownTreeHierarchyBindingDirective, selector: "[kendoDropDownTreeHierarchyBinding]", inputs: { nodes: ["kendoDropDownTreeHierarchyBinding", "nodes"] }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DropDownTreeHierarchyBindingDirective, decorators: [{
+DropDownTreeHierarchyBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DropDownTreeHierarchyBindingDirective, deps: [{ token: i1$1.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]'
@@ -13958,15 +14272,15 @@ class MultiSelectTreeFlatBindingDirective extends FlatDataBindingDirective {
     }
     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.16", ngImport: i0, type: MultiSelectTreeFlatBindingDirective, deps: [{ token: i1$1.DataBoundComponent }], target: i0.ɵɵFactoryTarget.Directive });
-MultiSelectTreeFlatBindingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", 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.16", ngImport: i0, type: MultiSelectTreeFlatBindingDirective, decorators: [{
+MultiSelectTreeFlatBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MultiSelectTreeFlatBindingDirective, deps: [{ token: i1$1.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]'
@@ -13995,15 +14309,15 @@ class MultiSelectTreeHierarchyBindingDirective extends HierarchyBindingDirective
     }
     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.16", ngImport: i0, type: MultiSelectTreeHierarchyBindingDirective, deps: [{ token: i1$1.DataBoundComponent }], target: i0.ɵɵFactoryTarget.Directive });
-MultiSelectTreeHierarchyBindingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: MultiSelectTreeHierarchyBindingDirective, selector: "[kendoMultiSelectTreeHierarchyBinding]", inputs: { nodes: ["kendoMultiSelectTreeHierarchyBinding", "nodes"] }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MultiSelectTreeHierarchyBindingDirective, decorators: [{
+MultiSelectTreeHierarchyBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MultiSelectTreeHierarchyBindingDirective, deps: [{ token: i1$1.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]'
@@ -14032,9 +14346,9 @@ class DropDownTreesExpandDirective extends ExpandDirective {
     }
     ;
 }
-DropDownTreesExpandDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DropDownTreesExpandDirective, deps: [{ token: i1$1.ExpandableComponent }], target: i0.ɵɵFactoryTarget.Directive });
-DropDownTreesExpandDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: DropDownTreesExpandDirective, selector: "[kendoDropDownTreeExpandable], [kendoMultiSelectTreeExpandable]", inputs: { isExpanded: ["isNodeExpanded", "isExpanded"] }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DropDownTreesExpandDirective, decorators: [{
+DropDownTreesExpandDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DropDownTreesExpandDirective, deps: [{ token: i1$1.ExpandableComponent }], target: i0.ɵɵFactoryTarget.Directive });
+DropDownTreesExpandDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: DropDownTreesExpandDirective, selector: "[kendoDropDownTreeExpandable], [kendoMultiSelectTreeExpandable]", inputs: { isExpanded: ["isNodeExpanded", "isExpanded"] }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DropDownTreesExpandDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoDropDownTreeExpandable], [kendoMultiSelectTreeExpandable]'
@@ -14057,14 +14371,14 @@ class CustomMessagesComponent extends Messages {
         return true;
     }
 }
-CustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-CustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CustomMessagesComponent, selector: "kendo-dropdownlist-messages,kendo-combobox-messages,kendo-multicolumncombobox-messages,kendo-autocomplete-messages,kendo-multiselect-messages,kendo-dropdowntree-messages,kendo-multiselecttree-messages", providers: [
+CustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+CustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CustomMessagesComponent, selector: "kendo-dropdownlist-messages,kendo-combobox-messages,kendo-multicolumncombobox-messages,kendo-autocomplete-messages,kendo-multiselect-messages,kendo-dropdowntree-messages,kendo-multiselecttree-messages", providers: [
         {
             provide: Messages,
             useExisting: forwardRef(() => CustomMessagesComponent)
         }
     ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CustomMessagesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CustomMessagesComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [
@@ -14180,9 +14494,9 @@ class FilterDirective {
         return Object.assign({}, DEFAULT_FILTER_SETTINGS, settings, { fields: this.getFilterFields(providedFields) });
     }
 }
-FilterDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterDirective, deps: [{ token: FilterableComponent }], target: i0.ɵɵFactoryTarget.Directive });
-FilterDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: FilterDirective, selector: "[kendoDropDownFilter]", inputs: { data: "data", rawSettings: ["kendoDropDownFilter", "rawSettings"], filterable: "filterable" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterDirective, decorators: [{
+FilterDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FilterDirective, deps: [{ token: FilterableComponent }], target: i0.ɵɵFactoryTarget.Directive });
+FilterDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: FilterDirective, selector: "[kendoDropDownFilter]", inputs: { data: "data", rawSettings: ["kendoDropDownFilter", "rawSettings"], filterable: "filterable" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FilterDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoDropDownFilter]'
@@ -14227,8 +14541,8 @@ const SHARED_DIRECTIVES = [
  */
 class SharedDirectivesModule {
 }
-SharedDirectivesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SharedDirectivesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SharedDirectivesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SharedDirectivesModule, declarations: [HeaderTemplateDirective,
+SharedDirectivesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SharedDirectivesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SharedDirectivesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SharedDirectivesModule, declarations: [HeaderTemplateDirective,
         FooterTemplateDirective,
         ItemTemplateDirective,
         GroupTemplateDirective,
@@ -14253,8 +14567,8 @@ SharedDirectivesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0",
         CustomMessagesComponent,
         FilterDirective,
         FilterInputDirective] });
-SharedDirectivesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SharedDirectivesModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SharedDirectivesModule, decorators: [{
+SharedDirectivesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SharedDirectivesModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SharedDirectivesModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [SHARED_DIRECTIVES],
@@ -14277,29 +14591,29 @@ const INTERNAL_DIRECTIVES = [
  */
 class SharedModule {
 }
-SharedModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SharedModule, declarations: [ListComponent,
+SharedModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SharedModule, declarations: [ListComponent,
         ListItemDirective,
         SelectableDirective,
         SearchBarComponent,
         TemplateContextDirective,
         TagListComponent,
         CheckDirective,
-        CheckAllDirective], imports: [CommonModule, FormsModule, ReactiveFormsModule, PopupModule, ResizeSensorModule, SharedDirectivesModule, EventsModule], exports: [ListComponent,
+        CheckAllDirective], imports: [CommonModule, FormsModule, ReactiveFormsModule, PopupModule, ResizeSensorModule, SharedDirectivesModule, EventsModule, IconsModule], exports: [ListComponent,
         ListItemDirective,
         SelectableDirective,
         SearchBarComponent,
         TemplateContextDirective,
         TagListComponent,
         CheckDirective,
-        CheckAllDirective, CommonModule, FormsModule, ReactiveFormsModule, PopupModule, ResizeSensorModule, SharedDirectivesModule, EventsModule] });
-SharedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SharedModule, imports: [[CommonModule, FormsModule, ReactiveFormsModule, PopupModule, ResizeSensorModule, SharedDirectivesModule, EventsModule], CommonModule, FormsModule, ReactiveFormsModule, PopupModule, ResizeSensorModule, SharedDirectivesModule, EventsModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SharedModule, decorators: [{
+        CheckAllDirective, CommonModule, FormsModule, ReactiveFormsModule, PopupModule, ResizeSensorModule, SharedDirectivesModule, EventsModule, IconsModule] });
+SharedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SharedModule, imports: [[CommonModule, FormsModule, ReactiveFormsModule, PopupModule, ResizeSensorModule, SharedDirectivesModule, EventsModule, IconsModule], CommonModule, FormsModule, ReactiveFormsModule, PopupModule, ResizeSensorModule, SharedDirectivesModule, EventsModule, IconsModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SharedModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [INTERNAL_DIRECTIVES],
-                    exports: [INTERNAL_DIRECTIVES, CommonModule, FormsModule, ReactiveFormsModule, PopupModule, ResizeSensorModule, SharedDirectivesModule, EventsModule],
-                    imports: [CommonModule, FormsModule, ReactiveFormsModule, PopupModule, ResizeSensorModule, SharedDirectivesModule, EventsModule]
+                    exports: [INTERNAL_DIRECTIVES, CommonModule, FormsModule, ReactiveFormsModule, PopupModule, ResizeSensorModule, SharedDirectivesModule, EventsModule, IconsModule],
+                    imports: [CommonModule, FormsModule, ReactiveFormsModule, PopupModule, ResizeSensorModule, SharedDirectivesModule, EventsModule, IconsModule]
                 }]
         }] });
 
@@ -14346,9 +14660,9 @@ class MultiSelectTreeSummaryTagDirective {
         };
     }
 }
-MultiSelectTreeSummaryTagDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MultiSelectTreeSummaryTagDirective, deps: [{ token: MultiSelectTreeComponent }], target: i0.ɵɵFactoryTarget.Directive });
-MultiSelectTreeSummaryTagDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: MultiSelectTreeSummaryTagDirective, selector: "[kendoMultiSelectTreeSummaryTag]", inputs: { showAfter: ["kendoMultiSelectTreeSummaryTag", "showAfter"] }, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MultiSelectTreeSummaryTagDirective, decorators: [{
+MultiSelectTreeSummaryTagDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MultiSelectTreeSummaryTagDirective, deps: [{ token: MultiSelectTreeComponent }], target: i0.ɵɵFactoryTarget.Directive });
+MultiSelectTreeSummaryTagDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: MultiSelectTreeSummaryTagDirective, selector: "[kendoMultiSelectTreeSummaryTag]", inputs: { showAfter: ["kendoMultiSelectTreeSummaryTag", "showAfter"] }, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MultiSelectTreeSummaryTagDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoMultiSelectTreeSummaryTag]'
@@ -14374,8 +14688,8 @@ const DROPDOWNTREE_DIRECTIVES = [
  */
 class DropDownTreesModule {
 }
-DropDownTreesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DropDownTreesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DropDownTreesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DropDownTreesModule, declarations: [DropDownTreeComponent,
+DropDownTreesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DropDownTreesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DropDownTreesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DropDownTreesModule, declarations: [DropDownTreeComponent,
         MultiSelectTreeComponent,
         DropDownTreeFlatBindingDirective,
         DropDownTreeHierarchyBindingDirective,
@@ -14392,8 +14706,8 @@ DropDownTreesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", ver
         DropDownTreesExpandDirective,
         NodeTemplateDirective,
         MultiSelectTreeSummaryTagDirective, SharedDirectivesModule] });
-DropDownTreesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DropDownTreesModule, imports: [[SharedModule, TreeViewModule], SharedDirectivesModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DropDownTreesModule, decorators: [{
+DropDownTreesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DropDownTreesModule, imports: [[SharedModule, TreeViewModule], SharedDirectivesModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DropDownTreesModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [DROPDOWNTREE_DIRECTIVES],
@@ -14436,8 +14750,7 @@ class SummaryTagDirective {
         const showAfter = parseNumber(this.showAfter);
         this.multiSelectComponent.tagMapper = (tags) => {
             if (tags.length > showAfter) {
-                let result;
-                result = tags.slice(0, showAfter);
+                const result = tags.slice(0, showAfter);
                 result.push(tags.slice(showAfter, tags.length));
                 return result;
             }
@@ -14447,9 +14760,9 @@ class SummaryTagDirective {
         };
     }
 }
-SummaryTagDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SummaryTagDirective, deps: [{ token: MultiSelectComponent }], target: i0.ɵɵFactoryTarget.Directive });
-SummaryTagDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: SummaryTagDirective, selector: "[kendoMultiSelectSummaryTag]", inputs: { showAfter: ["kendoMultiSelectSummaryTag", "showAfter"] }, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SummaryTagDirective, decorators: [{
+SummaryTagDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SummaryTagDirective, deps: [{ token: MultiSelectComponent }], target: i0.ɵɵFactoryTarget.Directive });
+SummaryTagDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: SummaryTagDirective, selector: "[kendoMultiSelectSummaryTag]", inputs: { showAfter: ["kendoMultiSelectSummaryTag", "showAfter"] }, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SummaryTagDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoMultiSelectSummaryTag]'
@@ -14475,10 +14788,10 @@ const AUTOCOMPLETE_DIRECTIVES = [
  */
 class AutoCompleteModule {
 }
-AutoCompleteModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: AutoCompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AutoCompleteModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: AutoCompleteModule, declarations: [AutoCompleteComponent], imports: [SharedModule], exports: [AutoCompleteComponent, SharedDirectivesModule] });
-AutoCompleteModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: AutoCompleteModule, imports: [[SharedModule], SharedDirectivesModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: AutoCompleteModule, decorators: [{
+AutoCompleteModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AutoCompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AutoCompleteModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AutoCompleteModule, declarations: [AutoCompleteComponent], imports: [SharedModule], exports: [AutoCompleteComponent, SharedDirectivesModule] });
+AutoCompleteModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AutoCompleteModule, imports: [[SharedModule], SharedDirectivesModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AutoCompleteModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AUTOCOMPLETE_DIRECTIVES],
@@ -14510,8 +14823,8 @@ const COMBOBOX_DIRECTIVES = [
  */
 class ComboBoxModule {
 }
-ComboBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ComboBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ComboBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ComboBoxModule, declarations: [ComboBoxComponent,
+ComboBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ComboBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ComboBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ComboBoxModule, declarations: [ComboBoxComponent,
         MultiColumnComboBoxComponent,
         ComboBoxColumnComponent,
         ColumnHeaderTemplateDirective,
@@ -14520,8 +14833,8 @@ ComboBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         ComboBoxColumnComponent,
         ColumnHeaderTemplateDirective,
         ColumnCellTemplateDirective, SharedDirectivesModule] });
-ComboBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ComboBoxModule, providers: [{ provide: TOUCH_ENABLED, useValue: touchEnabled }], imports: [[SharedModule], SharedDirectivesModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ComboBoxModule, decorators: [{
+ComboBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ComboBoxModule, providers: [{ provide: TOUCH_ENABLED, useValue: touchEnabled }], imports: [[SharedModule], SharedDirectivesModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ComboBoxModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [COMBOBOX_DIRECTIVES],
@@ -14548,10 +14861,10 @@ const DROPDOWNLIST_DIRECTIVES = [
  */
 class DropDownListModule {
 }
-DropDownListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DropDownListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DropDownListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DropDownListModule, declarations: [DropDownListComponent], imports: [SharedModule], exports: [DropDownListComponent, SharedDirectivesModule] });
-DropDownListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DropDownListModule, imports: [[SharedModule], SharedDirectivesModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DropDownListModule, decorators: [{
+DropDownListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DropDownListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DropDownListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DropDownListModule, declarations: [DropDownListComponent], imports: [SharedModule], exports: [DropDownListComponent, SharedDirectivesModule] });
+DropDownListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DropDownListModule, imports: [[SharedModule], SharedDirectivesModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DropDownListModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [DROPDOWNLIST_DIRECTIVES],
@@ -14583,14 +14896,14 @@ const MULTISELECT_DIRECTIVES = [
  */
 class MultiSelectModule {
 }
-MultiSelectModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MultiSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-MultiSelectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MultiSelectModule, declarations: [MultiSelectComponent,
+MultiSelectModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MultiSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+MultiSelectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MultiSelectModule, declarations: [MultiSelectComponent,
         SummaryTagDirective,
         CustomItemTemplateDirective], imports: [SharedModule], exports: [MultiSelectComponent,
         SummaryTagDirective,
         CustomItemTemplateDirective, SharedDirectivesModule] });
-MultiSelectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MultiSelectModule, providers: [{ provide: TOUCH_ENABLED, useValue: touchEnabled }], imports: [[SharedModule], SharedDirectivesModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MultiSelectModule, decorators: [{
+MultiSelectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MultiSelectModule, providers: [{ provide: TOUCH_ENABLED, useValue: touchEnabled }], imports: [[SharedModule], SharedDirectivesModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MultiSelectModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MULTISELECT_DIRECTIVES],
@@ -14633,10 +14946,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  */
 class DropDownsModule {
 }
-DropDownsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DropDownsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DropDownsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DropDownsModule, exports: [AutoCompleteModule, ComboBoxModule, DropDownListModule, MultiSelectModule, DropDownTreesModule] });
-DropDownsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DropDownsModule, imports: [AutoCompleteModule, ComboBoxModule, DropDownListModule, MultiSelectModule, DropDownTreesModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DropDownsModule, decorators: [{
+DropDownsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DropDownsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DropDownsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DropDownsModule, exports: [AutoCompleteModule, ComboBoxModule, DropDownListModule, MultiSelectModule, DropDownTreesModule] });
+DropDownsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DropDownsModule, imports: [AutoCompleteModule, ComboBoxModule, DropDownListModule, MultiSelectModule, DropDownTreesModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DropDownsModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [AutoCompleteModule, ComboBoxModule, DropDownListModule, MultiSelectModule, DropDownTreesModule]