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

package/{dist/es2015 → esm2015}/multiselect/multiselect.component.js

@@ -2,12 +2,9 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-/* tslint:disable:member-ordering */
-import * as tslib_1 from "tslib";
-var MultiSelectComponent_1;
 import { guid, isPresent, isArray, isObjectArray, resolveAllValues, selectedIndices, getter, isNumber, isUntouched, inDropDown, getSizeClass, getRoundedClass, getFillModeClass } from '../common/util';
 import { SearchBarComponent } from '../common/searchbar.component';
-import { ViewChild, Renderer2, ViewContainerRef, Component, HostBinding, Input, ElementRef, TemplateRef, Output, EventEmitter, isDevMode, forwardRef, ContentChild, ChangeDetectorRef, KeyValueDiffers, NgZone, Optional, Inject, HostListener } from '@angular/core';
+import { ViewChild, ViewContainerRef, Component, HostBinding, Input, Output, EventEmitter, isDevMode, forwardRef, ContentChild, Optional, Inject, HostListener } from '@angular/core';
 import { Subscription, Subject, of } from 'rxjs';
 import { catchError, filter, map, tap } from 'rxjs/operators';
 import { isChanged, isDocumentAvailable, KendoInput, hasObservers, anyChanged } from '@progress/kendo-angular-common';
@@ -32,17 +29,29 @@ import { MultiselectMessages } from '../common/constants/error-messages';
 import { PreventableEvent } from '../common/models/preventable-event';
 import { RemoveTagEvent } from '../common/models/remove-tag-event';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
-import { PopupService } from '@progress/kendo-angular-popup';
 import { FilterableComponent } from '../common/filtering/filterable-component';
 import { TOUCH_ENABLED } from '../common/constants/touch-enabled';
 import { DataService } from '../common/data.service';
-import { ListComponent } from '../common/list.component';
 import { normalizeCheckboxesSettings } from '../common/models/checkboxes-settings';
 import { normalizeVirtualizationSettings } from '../common/models/virtualization-settings';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-l10n";
+import * as i2 from "@progress/kendo-angular-popup";
+import * as i3 from "../common/data.service";
+import * as i4 from "../common/selection/selection.service";
+import * as i5 from "../common/navigation/navigation.service";
+import * as i6 from "../common/disabled-items/disabled-items.service";
+import * as i7 from "../common/taglist.component";
+import * as i8 from "../common/searchbar.component";
+import * as i9 from "../common/list.component";
+import * as i10 from "@progress/kendo-angular-common";
+import * as i11 from "../common/localization/localized-messages.directive";
+import * as i12 from "@angular/common";
+import * as i13 from "../common/templates/template-context.directive";
+import * as i14 from "../common/selection/selectable.directive";
 const MULTISELECT_VALUE_ACCESSOR = {
     multi: true,
     provide: NG_VALUE_ACCESSOR,
-    // tslint:disable-next-line:no-use-before-declare
     useExisting: forwardRef(() => MultiSelectComponent)
 };
 /**
@@ -62,7 +71,7 @@ const MULTISELECT_VALUE_ACCESSOR = {
  * }
  * ```
  */
-let MultiSelectComponent = MultiSelectComponent_1 = class MultiSelectComponent {
+export class MultiSelectComponent {
     constructor(wrapper, localization, popupService, dataService, selectionService, navigationService, disabledItemsService, cdr, differs, renderer, _zone, touchEnabled) {
         this.wrapper = wrapper;
         this.localization = localization;
@@ -225,11 +234,11 @@ let MultiSelectComponent = MultiSelectComponent_1 = class MultiSelectComponent {
         /**
          * Fires each time the user focuses the MultiSelect.
          */
-        this.onFocus = new EventEmitter(); //tslint:disable-line:no-output-rename
+        this.onFocus = new EventEmitter();
         /**
          * Fires each time the MultiSelect gets blurred.
          */
-        this.onBlur = new EventEmitter(); //tslint:disable-line:no-output-rename
+        this.onBlur = new EventEmitter();
         /**
          * Fires each time a tag is about to be removed.
          * This event is preventable. If you cancel it, the tag will not be removed.
@@ -1326,269 +1335,179 @@ let MultiSelectComponent = MultiSelectComponent_1 = class MultiSelectComponent {
             this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', this.fillMode));
         }
     }
-};
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String)
-], MultiSelectComponent.prototype, "focusableId", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Boolean)
-], MultiSelectComponent.prototype, "autoClose", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Boolean)
-], MultiSelectComponent.prototype, "loading", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Array),
-    tslib_1.__metadata("design:paramtypes", [Array])
-], MultiSelectComponent.prototype, "data", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Array),
-    tslib_1.__metadata("design:paramtypes", [Array])
-], MultiSelectComponent.prototype, "value", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String)
-], MultiSelectComponent.prototype, "valueField", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String)
-], MultiSelectComponent.prototype, "textField", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Number)
-], MultiSelectComponent.prototype, "tabindex", void 0);
-tslib_1.__decorate([
-    Input("tabIndex"),
-    tslib_1.__metadata("design:type", Number),
-    tslib_1.__metadata("design:paramtypes", [Number])
-], MultiSelectComponent.prototype, "tabIndex", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String),
-    tslib_1.__metadata("design:paramtypes", [String])
-], MultiSelectComponent.prototype, "size", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String),
-    tslib_1.__metadata("design:paramtypes", [String])
-], MultiSelectComponent.prototype, "rounded", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String),
-    tslib_1.__metadata("design:paramtypes", [String])
-], MultiSelectComponent.prototype, "fillMode", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String),
-    tslib_1.__metadata("design:paramtypes", [String])
-], MultiSelectComponent.prototype, "placeholder", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Boolean)
-], MultiSelectComponent.prototype, "disabled", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Function),
-    tslib_1.__metadata("design:paramtypes", [Function])
-], MultiSelectComponent.prototype, "itemDisabled", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Object),
-    tslib_1.__metadata("design:paramtypes", [Object])
-], MultiSelectComponent.prototype, "checkboxes", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Boolean)
-], MultiSelectComponent.prototype, "readonly", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Boolean)
-], MultiSelectComponent.prototype, "filterable", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Object),
-    tslib_1.__metadata("design:paramtypes", [Object])
-], MultiSelectComponent.prototype, "virtual", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Object),
-    tslib_1.__metadata("design:paramtypes", [Object])
-], MultiSelectComponent.prototype, "popupSettings", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Number)
-], MultiSelectComponent.prototype, "listHeight", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Boolean),
-    tslib_1.__metadata("design:paramtypes", [Boolean])
-], MultiSelectComponent.prototype, "valuePrimitive", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Boolean)
-], MultiSelectComponent.prototype, "clearButton", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Object)
-], MultiSelectComponent.prototype, "tagMapper", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Boolean)
-], MultiSelectComponent.prototype, "allowCustom", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Function)
-], MultiSelectComponent.prototype, "valueNormalizer", void 0);
-tslib_1.__decorate([
-    Output(),
-    tslib_1.__metadata("design:type", EventEmitter)
-], MultiSelectComponent.prototype, "filterChange", void 0);
-tslib_1.__decorate([
-    Output(),
-    tslib_1.__metadata("design:type", EventEmitter)
-], MultiSelectComponent.prototype, "valueChange", void 0);
-tslib_1.__decorate([
-    Output(),
-    tslib_1.__metadata("design:type", EventEmitter)
-], MultiSelectComponent.prototype, "open", void 0);
-tslib_1.__decorate([
-    Output(),
-    tslib_1.__metadata("design:type", EventEmitter)
-], MultiSelectComponent.prototype, "opened", void 0);
-tslib_1.__decorate([
-    Output(),
-    tslib_1.__metadata("design:type", EventEmitter)
-], MultiSelectComponent.prototype, "close", void 0);
-tslib_1.__decorate([
-    Output(),
-    tslib_1.__metadata("design:type", EventEmitter)
-], MultiSelectComponent.prototype, "closed", void 0);
-tslib_1.__decorate([
-    Output('focus'),
-    tslib_1.__metadata("design:type", EventEmitter)
-], MultiSelectComponent.prototype, "onFocus", void 0);
-tslib_1.__decorate([
-    Output('blur'),
-    tslib_1.__metadata("design:type", EventEmitter)
-], MultiSelectComponent.prototype, "onBlur", void 0);
-tslib_1.__decorate([
-    Output(),
-    tslib_1.__metadata("design:type", EventEmitter)
-], MultiSelectComponent.prototype, "removeTag", void 0);
-tslib_1.__decorate([
-    ViewChild('container', { read: ViewContainerRef, static: true }),
-    tslib_1.__metadata("design:type", ViewContainerRef)
-], MultiSelectComponent.prototype, "container", void 0);
-tslib_1.__decorate([
-    ViewChild(SearchBarComponent, { static: true }),
-    tslib_1.__metadata("design:type", SearchBarComponent)
-], MultiSelectComponent.prototype, "searchbar", void 0);
-tslib_1.__decorate([
-    ViewChild('popupTemplate', { static: true }),
-    tslib_1.__metadata("design:type", TemplateRef)
-], MultiSelectComponent.prototype, "popupTemplate", void 0);
-tslib_1.__decorate([
-    ViewChild('optionsList', { static: false }),
-    tslib_1.__metadata("design:type", ListComponent)
-], MultiSelectComponent.prototype, "optionsList", void 0);
-tslib_1.__decorate([
-    ContentChild(ItemTemplateDirective, { static: false }),
-    tslib_1.__metadata("design:type", ItemTemplateDirective)
-], MultiSelectComponent.prototype, "template", void 0);
-tslib_1.__decorate([
-    ContentChild(CustomItemTemplateDirective, { static: false }),
-    tslib_1.__metadata("design:type", CustomItemTemplateDirective)
-], MultiSelectComponent.prototype, "customItemTemplate", void 0);
-tslib_1.__decorate([
-    ContentChild(GroupTemplateDirective, { static: false }),
-    tslib_1.__metadata("design:type", GroupTemplateDirective)
-], MultiSelectComponent.prototype, "groupTemplate", void 0);
-tslib_1.__decorate([
-    ContentChild(FixedGroupTemplateDirective, { static: false }),
-    tslib_1.__metadata("design:type", FixedGroupTemplateDirective)
-], MultiSelectComponent.prototype, "fixedGroupTemplate", void 0);
-tslib_1.__decorate([
-    ContentChild(HeaderTemplateDirective, { static: false }),
-    tslib_1.__metadata("design:type", HeaderTemplateDirective)
-], MultiSelectComponent.prototype, "headerTemplate", void 0);
-tslib_1.__decorate([
-    ContentChild(FooterTemplateDirective, { static: false }),
-    tslib_1.__metadata("design:type", FooterTemplateDirective)
-], MultiSelectComponent.prototype, "footerTemplate", void 0);
-tslib_1.__decorate([
-    ContentChild(TagTemplateDirective, { static: false }),
-    tslib_1.__metadata("design:type", TagTemplateDirective)
-], MultiSelectComponent.prototype, "tagTemplate", void 0);
-tslib_1.__decorate([
-    ContentChild(GroupTagTemplateDirective, { static: false }),
-    tslib_1.__metadata("design:type", GroupTagTemplateDirective)
-], MultiSelectComponent.prototype, "groupTagTemplate", void 0);
-tslib_1.__decorate([
-    ContentChild(NoDataTemplateDirective, { static: false }),
-    tslib_1.__metadata("design:type", NoDataTemplateDirective)
-], MultiSelectComponent.prototype, "noDataTemplate", void 0);
-tslib_1.__decorate([
-    HostBinding('class.k-multiselect'),
-    HostBinding('class.k-input'),
-    tslib_1.__metadata("design:type", Boolean)
-], MultiSelectComponent.prototype, "hostClasses", void 0);
-tslib_1.__decorate([
-    HostBinding('attr.dir'),
-    tslib_1.__metadata("design:type", String),
-    tslib_1.__metadata("design:paramtypes", [])
-], MultiSelectComponent.prototype, "dir", null);
-tslib_1.__decorate([
-    HostBinding('class.k-disabled'),
-    tslib_1.__metadata("design:type", Boolean),
-    tslib_1.__metadata("design:paramtypes", [])
-], MultiSelectComponent.prototype, "disabledClass", null);
-tslib_1.__decorate([
-    HostBinding('class.k-loading'),
-    tslib_1.__metadata("design:type", Boolean),
-    tslib_1.__metadata("design:paramtypes", [])
-], MultiSelectComponent.prototype, "isLoading", null);
-tslib_1.__decorate([
-    HostBinding('attr.role'),
-    tslib_1.__metadata("design:type", String)
-], MultiSelectComponent.prototype, "role", void 0);
-tslib_1.__decorate([
-    HostBinding('attr.aria-expanded'),
-    tslib_1.__metadata("design:type", Boolean),
-    tslib_1.__metadata("design:paramtypes", [])
-], MultiSelectComponent.prototype, "isAriaExpanded", null);
-tslib_1.__decorate([
-    HostListener('mousedown', ['$event']),
-    tslib_1.__metadata("design:type", Function),
-    tslib_1.__metadata("design:paramtypes", [Object]),
-    tslib_1.__metadata("design:returntype", void 0)
-], MultiSelectComponent.prototype, "hostMousedown", null);
-MultiSelectComponent = MultiSelectComponent_1 = tslib_1.__decorate([
-    Component({
-        exportAs: 'kendoMultiSelect',
-        providers: [
-            MULTISELECT_VALUE_ACCESSOR,
-            DataService,
-            SelectionService,
-            NavigationService,
-            DisabledItemsService,
-            LocalizationService,
-            {
-                provide: L10N_PREFIX,
-                useValue: 'kendo.multiselect'
-            },
-            {
-                provide: FilterableComponent, useExisting: forwardRef(() => MultiSelectComponent_1)
-            },
-            {
-                provide: KendoInput, useExisting: forwardRef(() => MultiSelectComponent_1)
-            }
-        ],
-        selector: 'kendo-multiselect',
-        template: `
+}
+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: i3.DataService }, { token: i4.SelectionService }, { token: i5.NavigationService }, { token: i6.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: { "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", "attr.role": "this.role", "attr.aria-expanded": "this.isAriaExpanded" } }, providers: [
+        MULTISELECT_VALUE_ACCESSOR,
+        DataService,
+        SelectionService,
+        NavigationService,
+        DisabledItemsService,
+        LocalizationService,
+        {
+            provide: L10N_PREFIX,
+            useValue: 'kendo.multiselect'
+        },
+        {
+            provide: FilterableComponent, useExisting: forwardRef(() => MultiSelectComponent)
+        },
+        {
+            provide: KendoInput, useExisting: forwardRef(() => MultiSelectComponent)
+        }
+    ], queries: [{ propertyName: "template", first: true, predicate: ItemTemplateDirective, descendants: true }, { propertyName: "customItemTemplate", first: true, predicate: CustomItemTemplateDirective, descendants: true }, { propertyName: "groupTemplate", first: true, predicate: GroupTemplateDirective, descendants: true }, { propertyName: "fixedGroupTemplate", first: true, predicate: FixedGroupTemplateDirective, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: HeaderTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: FooterTemplateDirective, descendants: true }, { propertyName: "tagTemplate", first: true, predicate: TagTemplateDirective, descendants: true }, { propertyName: "groupTagTemplate", first: true, predicate: GroupTagTemplateDirective, descendants: true }, { propertyName: "noDataTemplate", first: true, predicate: NoDataTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "searchbar", first: true, predicate: SearchBarComponent, descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "optionsList", first: true, predicate: ["optionsList"], descendants: true }], exportAs: ["kendoMultiSelect"], usesOnChanges: true, ngImport: i0, template: `
+        <ng-container kendoMultiSelectLocalizedMessages
+            i18n-noDataText="kendo.multiselect.noDataText|The text displayed in the popup when there are no items"
+            noDataText="NO DATA FOUND"
+
+            i18n-clearTitle="kendo.multiselect.clearTitle|The title of the clear button"
+            clearTitle="clear"
+        >
+        </ng-container>
+        <kendo-taglist
+            [size]="size"
+            [rounded]="rounded"
+            [fillMode]="fillMode"
+            [id]="tagListId"
+            [tags]="tags"
+            [textField]="textField"
+            [valueField]="valueField"
+            [focused]="focusedTagIndex"
+            [disabled]="disabled"
+            [template]="tagTemplate"
+            [groupTemplate]="groupTagTemplate"
+            [tagPrefix]="tagPrefix"
+            [disabledIndices]="disabledIndices"
+            (removeTag)="handleRemoveTag($event)"
+        >
+            <kendo-searchbar
+                #searchbar
+                [id]="focusableId"
+                [role]="'textbox'"
+                [tagListId]="tagListId"
+                [activeDescendant]="activeDescendant"
+                [noDataLabel]="noDataLabel"
+                [userInput]="text"
+                [disabled]="disabled"
+                [readonly]="readonly"
+                [tabIndex]="tabIndex"
+                [popupOpen]="isOpen"
+                [placeholder]="placeholder"
+                (onNavigate)="handleNavigate($event)"
+                (valueChange)="handleFilter($event)"
+                (onBlur)="onSearchBarBlur()"
+                (onFocus)="onSearchBarFocus()"
+            >
+            </kendo-searchbar>
+        </kendo-taglist>
+
+        <span
+            *ngIf="!loading && !readonly && clearButton && (tags?.length || text?.length)"
+            class="k-clear-value"
+            [style.visibility]="clearButtonVisiblity"
+            [attr.title]="messageFor('clearTitle')"
+            role="button"
+            tabindex="-1"
+            (mousedown)="clearAll($event)"
+        >
+            <span class="k-icon k-i-x"></span>
+        </span>
+        <span
+            *ngIf="loading"
+            class="k-icon k-i-loading"
+        >
+        </span>
+        <ng-template #popupTemplate>
+            <!--header template-->
+            <ng-template *ngIf="headerTemplate"
+                [templateContext]="{
+                    templateRef: headerTemplate.templateRef
+                }">
+            </ng-template>
+            <!--custom item template-->
+            <div
+                *ngIf="allowCustom && text"
+                class="k-list"
+                [ngClass]="customItemSizeClass"
+            >
+                <div class="k-list-item k-custom-item" kendoDropDownsSelectable [multipleSelection]="true" [index]="-1">
+                    <ng-template *ngIf="customItemTemplate;else default_custom_item_template"
+                        [templateContext]="{
+                            templateRef: customItemTemplate.templateRef,
+                            $implicit: text
+                        }">
+                    </ng-template>
+                    <ng-template #default_custom_item_template>{{ text }}</ng-template>
+                    <span class="k-icon k-i-plus" style="float: right"></span>
+                </div>
+            </div>
+            <!--list-->
+            <kendo-list
+                #optionsList
+                [size]="size"
+                [rounded]="rounded"
+                [id]="listBoxId"
+                [optionPrefix]="optionPrefix"
+                [data]="data"
+                [textField]="textField"
+                [valueField]="valueField"
+                [height]="listHeight"
+                [template]="template"
+                [groupTemplate]="groupTemplate"
+                [fixedGroupTemplate]="fixedGroupTemplate"
+                [show]="isOpen"
+                [multipleSelection]="true"
+                [virtual]="virtual"
+                (pageChange)="pageChange($event)"
+                [checkboxes]="checkboxes"
+                >
+            </kendo-list>
+            <!--no data template-->
+            <div class="k-no-data" *ngIf="data.length === 0">
+                <ng-template [ngIf]="noDataTemplate"
+                    [templateContext]="{
+                        templateRef: noDataTemplate ? noDataTemplate.templateRef : undefined
+                    }">
+                </ng-template>
+                <ng-template [ngIf]="!noDataTemplate">
+                    <div>{{ messageFor('noDataText') }}</div>
+                </ng-template>
+            </div>
+            <!--footer template-->
+            <ng-template *ngIf="footerTemplate"
+                [templateContext]="{
+                    templateRef: footerTemplate.templateRef
+                }">
+            </ng-template>
+        </ng-template>
+        <ng-template [ngIf]="isOpen">
+            <kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
+        </ng-template>
+        <ng-container #container></ng-container>
+  `, isInline: true, components: [{ type: i7.TagListComponent, selector: "kendo-taglist", inputs: ["tags", "textField", "valueField", "valueDepth", "focused", "template", "groupTemplate", "disabled", "tagPrefix", "id", "size", "rounded", "fillMode", "disabledIndices"], outputs: ["removeTag"] }, { type: i8.SearchBarComponent, selector: "kendo-searchbar", inputs: ["id", "listId", "tagListId", "activeDescendant", "noDataLabel", "disabled", "readonly", "tabIndex", "popupOpen", "role", "userInput", "suggestedText", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { type: i9.ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize"] }, { type: i10.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i11.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: i13.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i12.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i14.SelectableDirective, selector: "[kendoDropDownsSelectable]", inputs: ["index", "checkboxes", "height", "multipleSelection"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MultiSelectComponent, decorators: [{
+            type: Component,
+            args: [{
+                    exportAs: 'kendoMultiSelect',
+                    providers: [
+                        MULTISELECT_VALUE_ACCESSOR,
+                        DataService,
+                        SelectionService,
+                        NavigationService,
+                        DisabledItemsService,
+                        LocalizationService,
+                        {
+                            provide: L10N_PREFIX,
+                            useValue: 'kendo.multiselect'
+                        },
+                        {
+                            provide: FilterableComponent, useExisting: forwardRef(() => MultiSelectComponent)
+                        },
+                        {
+                            provide: KendoInput, useExisting: forwardRef(() => MultiSelectComponent)
+                        }
+                    ],
+                    selector: 'kendo-multiselect',
+                    template: `
         <ng-container kendoMultiSelectLocalizedMessages
             i18n-noDataText="kendo.multiselect.noDataText|The text displayed in the popup when there are no items"
             noDataText="NO DATA FOUND"
@@ -1718,18 +1637,146 @@ MultiSelectComponent = MultiSelectComponent_1 = tslib_1.__decorate([
         </ng-template>
         <ng-container #container></ng-container>
   `
-    }),
-    tslib_1.__param(11, Optional()), tslib_1.__param(11, Inject(TOUCH_ENABLED)),
-    tslib_1.__metadata("design:paramtypes", [ElementRef,
-        LocalizationService,
-        PopupService,
-        DataService,
-        SelectionService,
-        NavigationService,
-        DisabledItemsService,
-        ChangeDetectorRef,
-        KeyValueDiffers,
-        Renderer2,
-        NgZone, Boolean])
-], MultiSelectComponent);
-export { MultiSelectComponent };
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.LocalizationService }, { type: i2.PopupService }, { type: i3.DataService }, { type: i4.SelectionService }, { type: i5.NavigationService }, { type: i6.DisabledItemsService }, { type: i0.ChangeDetectorRef }, { type: i0.KeyValueDiffers }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [TOUCH_ENABLED]
+                }] }]; }, propDecorators: { focusableId: [{
+                type: Input
+            }], autoClose: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], valueField: [{
+                type: Input
+            }], textField: [{
+                type: Input
+            }], tabindex: [{
+                type: Input
+            }], tabIndex: [{
+                type: Input,
+                args: ["tabIndex"]
+            }], size: [{
+                type: Input
+            }], rounded: [{
+                type: Input
+            }], fillMode: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], itemDisabled: [{
+                type: Input
+            }], checkboxes: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], filterable: [{
+                type: Input
+            }], virtual: [{
+                type: Input
+            }], popupSettings: [{
+                type: Input
+            }], listHeight: [{
+                type: Input
+            }], valuePrimitive: [{
+                type: Input
+            }], clearButton: [{
+                type: Input
+            }], tagMapper: [{
+                type: Input
+            }], allowCustom: [{
+                type: Input
+            }], valueNormalizer: [{
+                type: Input
+            }], filterChange: [{
+                type: Output
+            }], valueChange: [{
+                type: Output
+            }], open: [{
+                type: Output
+            }], opened: [{
+                type: Output
+            }], close: [{
+                type: Output
+            }], closed: [{
+                type: Output
+            }], onFocus: [{
+                type: Output,
+                args: ['focus']
+            }], onBlur: [{
+                type: Output,
+                args: ['blur']
+            }], removeTag: [{
+                type: Output
+            }], container: [{
+                type: ViewChild,
+                args: ['container', { read: ViewContainerRef, static: true }]
+            }], searchbar: [{
+                type: ViewChild,
+                args: [SearchBarComponent, { static: true }]
+            }], popupTemplate: [{
+                type: ViewChild,
+                args: ['popupTemplate', { static: true }]
+            }], optionsList: [{
+                type: ViewChild,
+                args: ['optionsList', { static: false }]
+            }], template: [{
+                type: ContentChild,
+                args: [ItemTemplateDirective, { static: false }]
+            }], customItemTemplate: [{
+                type: ContentChild,
+                args: [CustomItemTemplateDirective, { static: false }]
+            }], groupTemplate: [{
+                type: ContentChild,
+                args: [GroupTemplateDirective, { static: false }]
+            }], fixedGroupTemplate: [{
+                type: ContentChild,
+                args: [FixedGroupTemplateDirective, { static: false }]
+            }], headerTemplate: [{
+                type: ContentChild,
+                args: [HeaderTemplateDirective, { static: false }]
+            }], footerTemplate: [{
+                type: ContentChild,
+                args: [FooterTemplateDirective, { static: false }]
+            }], tagTemplate: [{
+                type: ContentChild,
+                args: [TagTemplateDirective, { static: false }]
+            }], groupTagTemplate: [{
+                type: ContentChild,
+                args: [GroupTagTemplateDirective, { static: false }]
+            }], noDataTemplate: [{
+                type: ContentChild,
+                args: [NoDataTemplateDirective, { static: false }]
+            }], hostClasses: [{
+                type: HostBinding,
+                args: ['class.k-multiselect']
+            }, {
+                type: HostBinding,
+                args: ['class.k-input']
+            }], dir: [{
+                type: HostBinding,
+                args: ['attr.dir']
+            }], disabledClass: [{
+                type: HostBinding,
+                args: ['class.k-disabled']
+            }], isLoading: [{
+                type: HostBinding,
+                args: ['class.k-loading']
+            }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], isAriaExpanded: [{
+                type: HostBinding,
+                args: ['attr.aria-expanded']
+            }], hostMousedown: [{
+                type: HostListener,
+                args: ['mousedown', ['$event']]
+            }] } });