@progress/kendo-angular-dropdowns 6.0.2 → 7.0.0-next.202204011414

package/{dist/es2015 → esm2015}/dropdowntrees/multiselecttree.component.js

@@ -2,15 +2,12 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import * as tslib_1 from "tslib";
-var MultiSelectTreeComponent_1;
-import { ChangeDetectorRef, Component, ContentChild, ElementRef, EventEmitter, forwardRef, HostBinding, HostListener, Inject, Input, isDevMode, NgZone, Optional, Output, Renderer2, TemplateRef, ViewChild, ViewContainerRef } from '@angular/core';
+import { Component, ContentChild, EventEmitter, forwardRef, HostBinding, HostListener, Inject, Input, isDevMode, Optional, Output, ViewChild, ViewContainerRef } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { anyChanged, guid, hasObservers, Keys, KendoInput, isDocumentAvailable } from '@progress/kendo-angular-common';
 import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
 import { NavigationService } from '../common/navigation/navigation.service';
-import { PopupService } from '@progress/kendo-angular-popup';
-import { DataBoundComponent, ExpandableComponent, TreeViewComponent } from '@progress/kendo-angular-treeview';
+import { DataBoundComponent, ExpandableComponent } from '@progress/kendo-angular-treeview';
 import { DataService } from '../common/data.service';
 import { DisabledItemsService } from '../common/disabled-items/disabled-items.service';
 import { SelectionService } from '../common/selection/selection.service';
@@ -28,21 +25,30 @@ import { GroupTagTemplateDirective } from '../common/templates/group-tag-templat
 import { TOUCH_ENABLED } from '../common/constants/touch-enabled';
 import { merge, of } from 'rxjs';
 import { filter, tap } from 'rxjs/operators';
-/* tslint:disable:member-ordering */
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-popup";
+import * as i2 from "../common/navigation/navigation.service";
+import * as i3 from "@progress/kendo-angular-l10n";
+import * as i4 from "../common/taglist.component";
+import * as i5 from "@progress/kendo-angular-treeview";
+import * as i6 from "../common/localization/localized-messages.directive";
+import * as i7 from "@angular/common";
+import * as i8 from "@angular/forms";
+import * as i9 from "../common/filter-input.directive";
+import * as i10 from "@progress/kendo-angular-common";
+import * as i11 from "../common/templates/template-context.directive";
+import * as i12 from "./checked-state/check-all.directive";
+import * as i13 from "./checked-state/check.directive";
 const DEFAULT_POPUP_SETTINGS = { animate: true };
 const DEFAULT_CHECKABLE_SETTINGS = { checkChildren: true, checkOnClick: true };
 const hasChildren = () => false;
-const ɵ0 = hasChildren;
 const fetchChildren = () => of([]);
-const ɵ1 = fetchChildren;
 const itemDisabled = () => false;
-const ɵ2 = itemDisabled;
 const isNodeVisible = () => true;
-const ɵ3 = isNodeVisible;
 /**
  * Represents the [Kendo UI MultiSelectTree component for Angular]({% slug overview_multiselecttree %}).
  */
-let MultiSelectTreeComponent = MultiSelectTreeComponent_1 = class MultiSelectTreeComponent {
+export class MultiSelectTreeComponent {
     constructor(wrapper, popupService, renderer, navigationService, _zone, localization, cdr, touchEnabled) {
         this.wrapper = wrapper;
         this.popupService = popupService;
@@ -612,7 +618,7 @@ let MultiSelectTreeComponent = MultiSelectTreeComponent_1 = class MultiSelectTre
             }
             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({}, item, { level: this.valueDepth[index] || 0 })));
+                this.dataItems = this.dataItems.map((item, index) => (Object.assign(Object.assign({}, item), { level: this.valueDepth[index] || 0 })));
             }
         }
     }
@@ -862,8 +868,8 @@ let MultiSelectTreeComponent = MultiSelectTreeComponent_1 = class MultiSelectTre
     /**
      * @hidden
      */
-    handleFilterInputChange(term) {
-        this.filterChange.next(term);
+    handleFilterInputChange(input) {
+        this.filterChange.next(input.value);
         this.allNodesHidden = this.nodes.every((node, index) => !this.isVisible(node, String(index)));
     }
     /**
@@ -1175,325 +1181,36 @@ let MultiSelectTreeComponent = MultiSelectTreeComponent_1 = class MultiSelectTre
             this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', this.fillMode));
         }
     }
-};
-tslib_1.__decorate([
-    HostBinding('class.k-dropdowntree'),
-    HostBinding('class.k-input'),
-    tslib_1.__metadata("design:type", Boolean)
-], MultiSelectTreeComponent.prototype, "hostClasses", void 0);
-tslib_1.__decorate([
-    HostBinding('class.k-disabled'),
-    HostBinding('attr.aria-disabled'),
-    tslib_1.__metadata("design:type", Boolean),
-    tslib_1.__metadata("design:paramtypes", [])
-], MultiSelectTreeComponent.prototype, "isDisabled", null);
-tslib_1.__decorate([
-    HostBinding('class.k-loading'),
-    tslib_1.__metadata("design:type", Boolean),
-    tslib_1.__metadata("design:paramtypes", [])
-], MultiSelectTreeComponent.prototype, "isLoading", null);
-tslib_1.__decorate([
-    HostBinding('attr.id'),
-    tslib_1.__metadata("design:type", String),
-    tslib_1.__metadata("design:paramtypes", [])
-], MultiSelectTreeComponent.prototype, "id", null);
-tslib_1.__decorate([
-    HostBinding('attr.dir'),
-    tslib_1.__metadata("design:type", String)
-], MultiSelectTreeComponent.prototype, "direction", void 0);
-tslib_1.__decorate([
-    HostBinding('attr.tabindex'),
-    tslib_1.__metadata("design:type", Number),
-    tslib_1.__metadata("design:paramtypes", [])
-], MultiSelectTreeComponent.prototype, "hostTabIndex", null);
-tslib_1.__decorate([
-    HostBinding('attr.role'),
-    tslib_1.__metadata("design:type", String)
-], MultiSelectTreeComponent.prototype, "role", void 0);
-tslib_1.__decorate([
-    HostBinding('attr.aria-expanded'),
-    tslib_1.__metadata("design:type", Boolean),
-    tslib_1.__metadata("design:paramtypes", [])
-], MultiSelectTreeComponent.prototype, "isAriaExpanded", null);
-tslib_1.__decorate([
-    HostBinding('attr.aria-haspopup'),
-    tslib_1.__metadata("design:type", String)
-], MultiSelectTreeComponent.prototype, "ariaHasPopup", void 0);
-tslib_1.__decorate([
-    HostBinding('attr.readonly'),
-    HostBinding('attr.aria-readonly'),
-    tslib_1.__metadata("design:type", Boolean),
-    tslib_1.__metadata("design:paramtypes", [])
-], MultiSelectTreeComponent.prototype, "isReadonly", null);
-tslib_1.__decorate([
-    HostBinding('attr.aria-describedby'),
-    tslib_1.__metadata("design:type", String),
-    tslib_1.__metadata("design:paramtypes", [])
-], MultiSelectTreeComponent.prototype, "ariaDescribedBy", null);
-tslib_1.__decorate([
-    HostBinding('attr.aria-activedescendant'),
-    tslib_1.__metadata("design:type", String),
-    tslib_1.__metadata("design:paramtypes", [])
-], MultiSelectTreeComponent.prototype, "ariaActiveDescendant", null);
-tslib_1.__decorate([
-    HostListener('click'),
-    tslib_1.__metadata("design:type", Function),
-    tslib_1.__metadata("design:paramtypes", []),
-    tslib_1.__metadata("design:returntype", void 0)
-], MultiSelectTreeComponent.prototype, "handleClick", null);
-tslib_1.__decorate([
-    HostListener('keydown', ['$event']),
-    tslib_1.__metadata("design:type", Function),
-    tslib_1.__metadata("design:paramtypes", [Object]),
-    tslib_1.__metadata("design:returntype", void 0)
-], MultiSelectTreeComponent.prototype, "handleKeydown", null);
-tslib_1.__decorate([
-    ContentChild(HeaderTemplateDirective, { static: false }),
-    tslib_1.__metadata("design:type", HeaderTemplateDirective)
-], MultiSelectTreeComponent.prototype, "headerTemplate", void 0);
-tslib_1.__decorate([
-    ContentChild(FooterTemplateDirective, { static: false }),
-    tslib_1.__metadata("design:type", FooterTemplateDirective)
-], MultiSelectTreeComponent.prototype, "footerTemplate", void 0);
-tslib_1.__decorate([
-    ContentChild(NodeTemplateDirective, { static: false }),
-    tslib_1.__metadata("design:type", NodeTemplateDirective)
-], MultiSelectTreeComponent.prototype, "nodeTemplate", void 0);
-tslib_1.__decorate([
-    ContentChild(NoDataTemplateDirective, { static: false }),
-    tslib_1.__metadata("design:type", NoDataTemplateDirective)
-], MultiSelectTreeComponent.prototype, "noDataTemplate", void 0);
-tslib_1.__decorate([
-    ContentChild(TagTemplateDirective, { static: false }),
-    tslib_1.__metadata("design:type", TagTemplateDirective)
-], MultiSelectTreeComponent.prototype, "tagTemplate", void 0);
-tslib_1.__decorate([
-    ContentChild(GroupTagTemplateDirective, { static: false }),
-    tslib_1.__metadata("design:type", GroupTagTemplateDirective)
-], MultiSelectTreeComponent.prototype, "groupTagTemplate", void 0);
-tslib_1.__decorate([
-    ViewChild('popupTemplate', { static: true }),
-    tslib_1.__metadata("design:type", TemplateRef)
-], MultiSelectTreeComponent.prototype, "popupTemplate", void 0);
-tslib_1.__decorate([
-    ViewChild('container', { read: ViewContainerRef, static: true }),
-    tslib_1.__metadata("design:type", ViewContainerRef)
-], MultiSelectTreeComponent.prototype, "container", void 0);
-tslib_1.__decorate([
-    ViewChild('treeview', { static: false }),
-    tslib_1.__metadata("design:type", TreeViewComponent),
-    tslib_1.__metadata("design:paramtypes", [TreeViewComponent])
-], MultiSelectTreeComponent.prototype, "treeview", null);
-tslib_1.__decorate([
-    ViewChild('filterInput', { static: false }),
-    tslib_1.__metadata("design:type", ElementRef)
-], MultiSelectTreeComponent.prototype, "filterInput", void 0);
-tslib_1.__decorate([
-    ViewChild('checkAllInput', { static: false }),
-    tslib_1.__metadata("design:type", ElementRef)
-], MultiSelectTreeComponent.prototype, "checkAllInput", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Number),
-    tslib_1.__metadata("design:paramtypes", [Number])
-], MultiSelectTreeComponent.prototype, "tabindex", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String),
-    tslib_1.__metadata("design:paramtypes", [String])
-], MultiSelectTreeComponent.prototype, "size", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String),
-    tslib_1.__metadata("design:paramtypes", [String])
-], MultiSelectTreeComponent.prototype, "rounded", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String),
-    tslib_1.__metadata("design:paramtypes", [String])
-], MultiSelectTreeComponent.prototype, "fillMode", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Object),
-    tslib_1.__metadata("design:paramtypes", [Object])
-], MultiSelectTreeComponent.prototype, "popupSettings", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Object),
-    tslib_1.__metadata("design:paramtypes", [Object])
-], MultiSelectTreeComponent.prototype, "checkableSettings", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Array),
-    tslib_1.__metadata("design:paramtypes", [Array])
-], MultiSelectTreeComponent.prototype, "data", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Array),
-    tslib_1.__metadata("design:paramtypes", [Array])
-], MultiSelectTreeComponent.prototype, "value", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Array),
-    tslib_1.__metadata("design:paramtypes", [Array])
-], MultiSelectTreeComponent.prototype, "dataItems", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Object)
-], MultiSelectTreeComponent.prototype, "textField", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Object)
-], MultiSelectTreeComponent.prototype, "valueField", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Array)
-], MultiSelectTreeComponent.prototype, "valueDepth", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Boolean)
-], MultiSelectTreeComponent.prototype, "loading", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String)
-], MultiSelectTreeComponent.prototype, "placeholder", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Number)
-], MultiSelectTreeComponent.prototype, "listHeight", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Boolean)
-], MultiSelectTreeComponent.prototype, "disabled", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Boolean)
-], MultiSelectTreeComponent.prototype, "readonly", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Boolean)
-], MultiSelectTreeComponent.prototype, "valuePrimitive", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Boolean)
-], MultiSelectTreeComponent.prototype, "loadOnDemand", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String)
-], MultiSelectTreeComponent.prototype, "focusableId", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Boolean)
-], MultiSelectTreeComponent.prototype, "clearButton", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Boolean)
-], MultiSelectTreeComponent.prototype, "filterable", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Boolean)
-], MultiSelectTreeComponent.prototype, "checkAll", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Function)
-], MultiSelectTreeComponent.prototype, "hasChildren", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Function)
-], MultiSelectTreeComponent.prototype, "fetchChildren", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Function)
-], MultiSelectTreeComponent.prototype, "isNodeExpanded", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Function)
-], MultiSelectTreeComponent.prototype, "isNodeVisible", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Function)
-], MultiSelectTreeComponent.prototype, "itemDisabled", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Object)
-], MultiSelectTreeComponent.prototype, "tagMapper", void 0);
-tslib_1.__decorate([
-    Output('focus'),
-    tslib_1.__metadata("design:type", EventEmitter)
-], MultiSelectTreeComponent.prototype, "onFocus", void 0);
-tslib_1.__decorate([
-    Output('blur'),
-    tslib_1.__metadata("design:type", EventEmitter)
-], MultiSelectTreeComponent.prototype, "onBlur", void 0);
-tslib_1.__decorate([
-    Output(),
-    tslib_1.__metadata("design:type", EventEmitter)
-], MultiSelectTreeComponent.prototype, "open", void 0);
-tslib_1.__decorate([
-    Output(),
-    tslib_1.__metadata("design:type", EventEmitter)
-], MultiSelectTreeComponent.prototype, "opened", void 0);
-tslib_1.__decorate([
-    Output(),
-    tslib_1.__metadata("design:type", EventEmitter)
-], MultiSelectTreeComponent.prototype, "close", void 0);
-tslib_1.__decorate([
-    Output(),
-    tslib_1.__metadata("design:type", EventEmitter)
-], MultiSelectTreeComponent.prototype, "closed", void 0);
-tslib_1.__decorate([
-    Output(),
-    tslib_1.__metadata("design:type", EventEmitter)
-], MultiSelectTreeComponent.prototype, "nodeExpand", void 0);
-tslib_1.__decorate([
-    Output(),
-    tslib_1.__metadata("design:type", EventEmitter)
-], MultiSelectTreeComponent.prototype, "nodeCollapse", void 0);
-tslib_1.__decorate([
-    Output(),
-    tslib_1.__metadata("design:type", EventEmitter)
-], MultiSelectTreeComponent.prototype, "valueChange", void 0);
-tslib_1.__decorate([
-    Output(),
-    tslib_1.__metadata("design:type", EventEmitter)
-], MultiSelectTreeComponent.prototype, "removeTag", void 0);
-tslib_1.__decorate([
-    Output(),
-    tslib_1.__metadata("design:type", EventEmitter)
-], MultiSelectTreeComponent.prototype, "filterChange", void 0);
-MultiSelectTreeComponent = MultiSelectTreeComponent_1 = tslib_1.__decorate([
-    Component({
-        exportAs: 'kendoMultiSelectTree',
-        providers: [
-            LocalizationService,
-            NavigationService,
-            DataService,
-            DisabledItemsService,
-            SelectionService,
-            {
-                provide: L10N_PREFIX,
-                useValue: 'kendo.multiselecttree'
-            },
-            {
-                multi: true,
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => MultiSelectTreeComponent_1)
-            },
-            {
-                provide: DataBoundComponent,
-                useExisting: forwardRef(() => MultiSelectTreeComponent_1)
-            },
-            {
-                provide: ExpandableComponent,
-                useExisting: forwardRef(() => MultiSelectTreeComponent_1)
-            },
-            {
-                provide: KendoInput,
-                useExisting: forwardRef(() => MultiSelectTreeComponent_1)
-            }
-        ],
-        selector: 'kendo-multiselecttree',
-        template: `
+}
+MultiSelectTreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MultiSelectTreeComponent, deps: [{ token: i0.ElementRef }, { token: i1.PopupService }, { token: i0.Renderer2 }, { token: i2.NavigationService }, { token: i0.NgZone }, { token: i3.LocalizationService }, { token: i0.ChangeDetectorRef }, { 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-dropdowntree": "this.hostClasses", "class.k-input": "this.hostClasses", "class.k-disabled": "this.isDisabled", "attr.aria-disabled": "this.isDisabled", "class.k-loading": "this.isLoading", "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-readonly": "this.isReadonly", "attr.aria-describedby": "this.ariaDescribedBy", "attr.aria-activedescendant": "this.ariaActiveDescendant" } }, providers: [
+        LocalizationService,
+        NavigationService,
+        DataService,
+        DisabledItemsService,
+        SelectionService,
+        {
+            provide: L10N_PREFIX,
+            useValue: 'kendo.multiselecttree'
+        },
+        {
+            multi: true,
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => MultiSelectTreeComponent)
+        },
+        {
+            provide: DataBoundComponent,
+            useExisting: forwardRef(() => MultiSelectTreeComponent)
+        },
+        {
+            provide: ExpandableComponent,
+            useExisting: forwardRef(() => MultiSelectTreeComponent)
+        },
+        {
+            provide: KendoInput,
+            useExisting: forwardRef(() => MultiSelectTreeComponent)
+        }
+    ], queries: [{ propertyName: "headerTemplate", first: true, predicate: HeaderTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: FooterTemplateDirective, descendants: true }, { propertyName: "nodeTemplate", first: true, predicate: NodeTemplateDirective, descendants: true }, { propertyName: "noDataTemplate", first: true, predicate: NoDataTemplateDirective, descendants: true }, { propertyName: "tagTemplate", first: true, predicate: TagTemplateDirective, descendants: true }, { propertyName: "groupTagTemplate", first: true, predicate: GroupTagTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "treeview", first: true, predicate: ["treeview"], descendants: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }, { propertyName: "checkAllInput", first: true, predicate: ["checkAllInput"], descendants: true }], exportAs: ["kendoMultiSelectTree"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoMultiSelectTreeLocalizedMessages
             i18n-noDataText="kendo.multiselecttree.noDataText|The text displayed in the popup when there are no items"
             noDataText="NO DATA FOUND"
@@ -1557,7 +1274,210 @@ MultiSelectTreeComponent = MultiSelectTreeComponent_1 = tslib_1.__decorate([
                     </span>
                     <input
                         #filterInput
-                        (input)="handleFilterInputChange($event.target.value)"
+                        (input)="handleFilterInputChange($event.target)"
+                        [filterInput]="filterable && !touchEnabled"
+                        (keydown)="handleKeydown($event)"
+                        [(ngModel)]="filter"
+                        class="k-input-inner"
+                        role="textbox"
+                        aria-haspopup="true"
+                        aria-expanded="false"
+                        tabindex="0"
+                        aria-disabled="false"
+                        aria-readonly="false"
+                        [kendoEventsOutsideAngular]="{
+                            blur: handleBlur
+                        }"
+                        [scope]="this"
+                    >
+                </span>
+            </span>
+            <!--header template-->
+            <ng-template
+                *ngIf="headerTemplate"
+                [templateContext]="{
+                    templateRef: headerTemplate?.templateRef
+                }">
+            </ng-template>
+            <div *ngIf="checkAll" class="k-check-all">
+                <input
+                    #checkAllInput
+                    [checkAll]="!filterable && !touchEnabled"
+                    type="checkbox"
+                    class="k-checkbox"
+                    [ngClass]="checkAllCheckboxClasses"
+                    role="checkbox"
+                    tabindex="0"
+                    aria-disabled="false"
+                    aria-readonly="false"
+                    [treeview]="treeview"
+                    [checkedItems]="checkedItems"
+                    [valueField]="valueField"
+                    [lastAction]="lastAction"
+                    (checkedItemsChange)="handleCheckedItemsChange($event)"
+                    (keydown)="handleKeydown($event)"
+                    [kendoEventsOutsideAngular]="{
+                        blur: handleBlur
+                    }"
+                    [scope]="this"
+                >
+                <span
+                    class="k-checkbox-label"
+                    (click)="toggleCheckAll()"
+                    (mousedown)="$event.preventDefault()"
+                >
+                    {{ messageFor('checkAllText') }}
+                </span>
+            </div>
+            <kendo-treeview
+                #treeview
+                [size]="size"
+                [nodes]="data"
+                [style.maxHeight.px]="listHeight"
+                [animate]="false"
+                kendoMultiSelectTreeCheckable
+                [checkable]="checkableSettings"
+                [checkedItems]="checkedItems"
+                [valueField]="valueField"
+                [textField]="textField"
+                [children]="children"
+                [hasChildren]="hasChildren"
+                [isExpanded]="isNodeExpanded"
+                [isDisabled]="itemDisabled"
+                [nodeTemplate]="nodeTemplate"
+                [loadOnDemand]="loadOnDemand"
+                [filter]="filter"
+                [isVisible]="isNodeVisible"
+                (keydown)="handleKeydown($event)"
+                (nodeClick)="handleNodeClick($event)"
+                (expand)="nodeExpand.emit($event)"
+                (collapse)="nodeCollapse.emit($event)"
+                (checkedItemsChange)="handleCheckedItemsChange($event)"
+                [kendoEventsOutsideAngular]="{
+                    focusout: handleBlur
+                }"
+                [scope]="this"
+            >
+            </kendo-treeview>
+            <!--footer template-->
+            <ng-template
+                *ngIf="footerTemplate"
+                [templateContext]="{
+                    templateRef: footerTemplate?.templateRef
+                }">
+            </ng-template>
+            <!--no-data template-->
+            <div class="k-no-data" *ngIf="data?.length === 0 || allNodesHidden">
+                <ng-template [ngIf]="noDataTemplate"
+                    [templateContext]="{
+                        templateRef: noDataTemplate?.templateRef
+                    }">
+                </ng-template>
+                <ng-template [ngIf]="!noDataTemplate">
+                    <div>{{ messageFor('noDataText') }}</div>
+                </ng-template>
+            </div>
+        </ng-template>
+        <ng-container #container></ng-container>
+    `, isInline: true, components: [{ type: i4.TagListComponent, selector: "kendo-taglist", inputs: ["tags", "textField", "valueField", "valueDepth", "focused", "template", "groupTemplate", "disabled", "tagPrefix", "id", "size", "rounded", "fillMode", "disabledIndices"], outputs: ["removeTag"] }, { type: i5.TreeViewComponent, selector: "kendo-treeview", inputs: ["filterInputPlaceholder", "animate", "nodeTemplate", "loadMoreButtonTemplate", "trackBy", "nodes", "textField", "hasChildren", "isChecked", "isDisabled", "isExpanded", "isSelected", "isVisible", "navigable", "children", "loadOnDemand", "filterable", "filter", "size"], outputs: ["childrenLoaded", "blur", "focus", "expand", "collapse", "nodeDragStart", "nodeDrag", "filterStateChange", "nodeDrop", "nodeDragEnd", "addItem", "removeItem", "checkedChange", "selectionChange", "filterChange", "nodeClick", "nodeDblClick"], exportAs: ["kendoTreeView"] }], directives: [{ type: i6.LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i9.FilterInputDirective, selector: "[filterInput]", inputs: ["filterInput"] }, { type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i10.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i11.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i12.CheckAllDirective, selector: "[checkAll]", inputs: ["lastAction", "treeview", "checkedItems", "valueField", "checkAll"], outputs: ["checkedItemsChange"] }, { type: i13.CheckDirective, selector: "[kendoMultiSelectTreeCheckable]", inputs: ["checkable", "valueField", "checkedItems"], outputs: ["checkedItemsChange"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MultiSelectTreeComponent, decorators: [{
+            type: Component,
+            args: [{
+                    exportAs: 'kendoMultiSelectTree',
+                    providers: [
+                        LocalizationService,
+                        NavigationService,
+                        DataService,
+                        DisabledItemsService,
+                        SelectionService,
+                        {
+                            provide: L10N_PREFIX,
+                            useValue: 'kendo.multiselecttree'
+                        },
+                        {
+                            multi: true,
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => MultiSelectTreeComponent)
+                        },
+                        {
+                            provide: DataBoundComponent,
+                            useExisting: forwardRef(() => MultiSelectTreeComponent)
+                        },
+                        {
+                            provide: ExpandableComponent,
+                            useExisting: forwardRef(() => MultiSelectTreeComponent)
+                        },
+                        {
+                            provide: KendoInput,
+                            useExisting: forwardRef(() => MultiSelectTreeComponent)
+                        }
+                    ],
+                    selector: 'kendo-multiselecttree',
+                    template: `
+        <ng-container kendoMultiSelectTreeLocalizedMessages
+            i18n-noDataText="kendo.multiselecttree.noDataText|The text displayed in the popup when there are no items"
+            noDataText="NO DATA FOUND"
+
+            i18n-clearTitle="kendo.multiselecttree.clearTitle|The title of the clear button"
+            clearTitle="clear"
+
+            i18n-checkAllText="kendo.multiselecttree.checkAllText|The text displayed for the check-all checkbox"
+            checkAllText="Check all"
+        >
+        </ng-container>
+        <kendo-taglist
+            [size]="size"
+            [rounded]="rounded"
+            [fillMode]="fillMode"
+            [id]="tagListId"
+            [tags]="tags"
+            [focused]="focusedTagIndex"
+            [textField]="textField"
+            [valueField]="valueField"
+            [valueDepth]="valueDepth"
+            [disabled]="disabled"
+            [tagPrefix]="tagPrefix"
+            [template]="tagTemplate"
+            [groupTemplate]="groupTagTemplate"
+            [disabledIndices]="disabledIndices"
+            (removeTag)="handleRemoveTag($event)"
+        >
+            <span *ngIf="!tags || !tags.length"
+                class="k-input-inner k-readonly"
+            >
+                <span class="k-input-value-text">{{ placeholder }}</span>
+            </span>
+        </kendo-taglist>
+        <span
+            *ngIf="!disabled && !loading && !readonly && clearButton && tags?.length"
+            class="k-clear-value"
+            [attr.title]="messageFor('clearTitle')"
+            role="button"
+            tabindex="-1"
+            (click)="clearAll($event)"
+        >
+            <span class="k-icon k-i-x"></span>
+        </span>
+        <span
+            *ngIf="loading"
+            class="k-icon k-i-loading"
+        >
+        </span>
+        <ng-template #popupTemplate>
+            <span
+                *ngIf="filterable"
+                class="k-list-filter"
+            >
+                <span
+                    class="k-textbox k-input"
+                    [ngClass]="filterInputClasses"
+                >
+                    <span class="k-input-prefix">
+                        <span class="k-input-icon k-icon k-i-search"></span>
+                    </span>
+                    <input
+                        #filterInput
+                        (input)="handleFilterInputChange($event.target)"
                         [filterInput]="filterable && !touchEnabled"
                         (keydown)="handleKeydown($event)"
                         [(ngModel)]="filter"
@@ -1663,15 +1583,176 @@ MultiSelectTreeComponent = MultiSelectTreeComponent_1 = tslib_1.__decorate([
         </ng-template>
         <ng-container #container></ng-container>
     `
-    }),
-    tslib_1.__param(7, Optional()), tslib_1.__param(7, Inject(TOUCH_ENABLED)),
-    tslib_1.__metadata("design:paramtypes", [ElementRef,
-        PopupService,
-        Renderer2,
-        NavigationService,
-        NgZone,
-        LocalizationService,
-        ChangeDetectorRef, Boolean])
-], MultiSelectTreeComponent);
-export { MultiSelectTreeComponent };
-export { ɵ0, ɵ1, ɵ2, ɵ3 };
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.PopupService }, { type: i0.Renderer2 }, { type: i2.NavigationService }, { type: i0.NgZone }, { type: i3.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [TOUCH_ENABLED]
+                }] }]; }, propDecorators: { hostClasses: [{
+                type: HostBinding,
+                args: ['class.k-dropdowntree']
+            }, {
+                type: HostBinding,
+                args: ['class.k-input']
+            }], isDisabled: [{
+                type: HostBinding,
+                args: ['class.k-disabled']
+            }, {
+                type: HostBinding,
+                args: ['attr.aria-disabled']
+            }], isLoading: [{
+                type: HostBinding,
+                args: ['class.k-loading']
+            }], id: [{
+                type: HostBinding,
+                args: ['attr.id']
+            }], direction: [{
+                type: HostBinding,
+                args: ['attr.dir']
+            }], hostTabIndex: [{
+                type: HostBinding,
+                args: ['attr.tabindex']
+            }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], isAriaExpanded: [{
+                type: HostBinding,
+                args: ['attr.aria-expanded']
+            }], ariaHasPopup: [{
+                type: HostBinding,
+                args: ['attr.aria-haspopup']
+            }], isReadonly: [{
+                type: HostBinding,
+                args: ['attr.readonly']
+            }, {
+                type: HostBinding,
+                args: ['attr.aria-readonly']
+            }], ariaDescribedBy: [{
+                type: HostBinding,
+                args: ['attr.aria-describedby']
+            }], ariaActiveDescendant: [{
+                type: HostBinding,
+                args: ['attr.aria-activedescendant']
+            }], handleClick: [{
+                type: HostListener,
+                args: ['click']
+            }], handleKeydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }], headerTemplate: [{
+                type: ContentChild,
+                args: [HeaderTemplateDirective, { static: false }]
+            }], footerTemplate: [{
+                type: ContentChild,
+                args: [FooterTemplateDirective, { static: false }]
+            }], nodeTemplate: [{
+                type: ContentChild,
+                args: [NodeTemplateDirective, { static: false }]
+            }], noDataTemplate: [{
+                type: ContentChild,
+                args: [NoDataTemplateDirective, { static: false }]
+            }], tagTemplate: [{
+                type: ContentChild,
+                args: [TagTemplateDirective, { static: false }]
+            }], groupTagTemplate: [{
+                type: ContentChild,
+                args: [GroupTagTemplateDirective, { static: false }]
+            }], popupTemplate: [{
+                type: ViewChild,
+                args: ['popupTemplate', { static: true }]
+            }], container: [{
+                type: ViewChild,
+                args: ['container', { read: ViewContainerRef, static: true }]
+            }], treeview: [{
+                type: ViewChild,
+                args: ['treeview', { static: false }]
+            }], filterInput: [{
+                type: ViewChild,
+                args: ['filterInput', { static: false }]
+            }], checkAllInput: [{
+                type: ViewChild,
+                args: ['checkAllInput', { static: false }]
+            }], tabindex: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], rounded: [{
+                type: Input
+            }], fillMode: [{
+                type: Input
+            }], popupSettings: [{
+                type: Input
+            }], checkableSettings: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], dataItems: [{
+                type: Input
+            }], textField: [{
+                type: Input
+            }], valueField: [{
+                type: Input
+            }], valueDepth: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], listHeight: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], valuePrimitive: [{
+                type: Input
+            }], loadOnDemand: [{
+                type: Input
+            }], focusableId: [{
+                type: Input
+            }], clearButton: [{
+                type: Input
+            }], filterable: [{
+                type: Input
+            }], checkAll: [{
+                type: Input
+            }], hasChildren: [{
+                type: Input
+            }], fetchChildren: [{
+                type: Input
+            }], isNodeExpanded: [{
+                type: Input
+            }], isNodeVisible: [{
+                type: Input
+            }], itemDisabled: [{
+                type: Input
+            }], tagMapper: [{
+                type: Input
+            }], onFocus: [{
+                type: Output,
+                args: ['focus']
+            }], onBlur: [{
+                type: Output,
+                args: ['blur']
+            }], open: [{
+                type: Output
+            }], opened: [{
+                type: Output
+            }], close: [{
+                type: Output
+            }], closed: [{
+                type: Output
+            }], nodeExpand: [{
+                type: Output
+            }], nodeCollapse: [{
+                type: Output
+            }], valueChange: [{
+                type: Output
+            }], removeTag: [{
+                type: Output
+            }], filterChange: [{
+                type: Output
+            }] } });