@progress/kendo-angular-dropdowns 5.5.1 → 6.0.1-dev.202201201129

package/dist/es2015/dropdownlist/dropdownlist.component.js

@@ -5,7 +5,7 @@
 /* tslint:disable:member-ordering */
 import * as tslib_1 from "tslib";
 var DropDownListComponent_1;
-import { Component, Renderer2, forwardRef, ElementRef, Input, Output, HostBinding, EventEmitter, ContentChild, ViewChild, ViewContainerRef, isDevMode, Optional, Inject, NgZone, TemplateRef, ChangeDetectorRef } from '@angular/core';
+import { Component, Renderer2, forwardRef, ElementRef, Input, Output, HostBinding, EventEmitter, ContentChild, ViewChild, ViewContainerRef, isDevMode, Optional, Inject, NgZone, TemplateRef, ChangeDetectorRef, HostListener } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
@@ -13,7 +13,7 @@ import { merge, interval, Subscription } from 'rxjs';
 import { concatMap, filter, map, skipWhile, take, takeUntil, tap } from 'rxjs/operators';
 import { isDocumentAvailable, KendoInput, hasObservers, anyChanged, isChanged } from '@progress/kendo-angular-common';
 import { Keys } from '@progress/kendo-angular-common';
-import { isPresent, guid, getter, shuffleData, sameCharsOnly, matchText, isUntouched, inDropDown } from '../common/util';
+import { isPresent, guid, getter, shuffleData, sameCharsOnly, matchText, isUntouched, inDropDown, getSizeClass, getRoundedClass, getFillModeClass } from '../common/util';
 import { SelectionService } from '../common/selection/selection.service';
 import { NavigationService, NavigationEvent } from '../common/navigation/navigation.service';
 import { ItemTemplateDirective } from '../common/templates/item-template.directive';
@@ -60,7 +60,8 @@ export const DROPDOWNLIST_VALUE_ACCESSOR = {
  * ```
  */
 let DropDownListComponent = DropDownListComponent_1 = class DropDownListComponent {
-    constructor(localization, popupService, selectionService, navigationService, disabledItemsService, dataService, _zone, renderer, hostElement, cdr, touchEnabled) {
+    constructor(wrapper, localization, popupService, selectionService, navigationService, disabledItemsService, dataService, _zone, renderer, cdr, touchEnabled) {
+        this.wrapper = wrapper;
         this.localization = localization;
         this.popupService = popupService;
         this.selectionService = selectionService;
@@ -69,13 +70,8 @@ let DropDownListComponent = DropDownListComponent_1 = class DropDownListComponen
         this.dataService = dataService;
         this._zone = _zone;
         this.renderer = renderer;
-        this.hostElement = hostElement;
         this.cdr = cdr;
         this.touchEnabled = touchEnabled;
-        /**
-         * @hidden
-         */
-        this.focusableId = `k-${guid()}`;
         /**
          * Sets the height of the options list. By default, `listHeight` is 200px.
          *
@@ -153,7 +149,12 @@ let DropDownListComponent = DropDownListComponent_1 = class DropDownListComponen
          * Fires each time the DropDownList gets blurred.
          */
         this.onBlur = new EventEmitter();
-        this.widgetClasses = true;
+        this.hostClasses = true;
+        /**
+         * @hidden
+         */
+        this.focusableId = `k-${guid()}`;
+        this.role = 'listbox';
         this.groupIndices = [];
         this.listBoxId = guid();
         this.optionPrefix = guid();
@@ -165,16 +166,20 @@ let DropDownListComponent = DropDownListComponent_1 = class DropDownListComponen
         this.last = "";
         this.filterFocused = new EventEmitter();
         this.filterBlurred = new EventEmitter();
-        this.wrapperFocused = new EventEmitter();
-        this.wrapperBlurred = new EventEmitter();
+        this.hostElementFocused = new EventEmitter();
+        this.hostElementBlurred = new EventEmitter();
         this.selectionSubscription = new Subscription();
         this._open = false;
         this._popupSettings = { animate: true };
+        this._size = 'medium';
+        this._rounded = 'medium';
+        this._fillMode = 'solid';
         validatePackage(packageMetadata);
         this.direction = localization.rtl ? 'rtl' : 'ltr';
         this.data = [];
         this.subscribeEvents();
         this.subscribeTouchEvents();
+        this.subscribeFocusEvents();
         this.popupMouseDownHandler = this.onMouseDown.bind(this);
     }
     get width() {
@@ -322,11 +327,76 @@ let DropDownListComponent = DropDownListComponent_1 = class DropDownListComponen
     get tabIndex() {
         return this.tabindex;
     }
+    /**
+     * Sets the size of the component.
+     *
+     * The possible values are:
+     * * `'small'`
+     * * `'medium'` (default)
+     * * `'large'`
+     * * `null`
+     *
+     */
+    set size(size) {
+        this.renderer.removeClass(this.wrapper.nativeElement, getSizeClass('picker', this.size));
+        if (size) {
+            this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('picker', size));
+        }
+        this._size = size;
+    }
+    get size() {
+        return this._size;
+    }
+    /**
+     * Sets the border radius of the component.
+     *
+     * The possible values are:
+     * * `'small'`
+     * * `'medium'` (default)
+     * * `'large'`
+     * * `'full'`
+     * * `null`
+     *
+     */
+    set rounded(rounded) {
+        this.renderer.removeClass(this.wrapper.nativeElement, getRoundedClass(this.rounded));
+        if (rounded) {
+            this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(rounded));
+        }
+        this._rounded = rounded;
+    }
+    get rounded() {
+        return this._rounded;
+    }
+    /**
+     * Sets the fillMode of the component.
+     *
+     * The possible values are:
+     * * `'flat'`
+     * * `'solid'` (default)
+     * * `'outline'`
+     * * `null`
+     *
+     */
+    set fillMode(fillMode) {
+        this.renderer.removeClass(this.wrapper.nativeElement, getFillModeClass('picker', this.fillMode));
+        if (fillMode) {
+            this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('picker', fillMode));
+        }
+        this._fillMode = fillMode;
+    }
+    get fillMode() {
+        return this._fillMode;
+    }
     /**
      * @hidden
      */
-    blurComponent() {
-        this.wrapperBlurred.emit();
+    blurComponent(event) {
+        if (event.target !== this.wrapper.nativeElement) {
+            return;
+        }
+        event.stopImmediatePropagation();
+        this.hostElementBlurred.emit();
     }
     /**
      * @hidden
@@ -337,8 +407,12 @@ let DropDownListComponent = DropDownListComponent_1 = class DropDownListComponen
     /**
      * @hidden
      */
-    focusComponent() {
-        this.wrapperFocused.emit();
+    focusComponent(event) {
+        if (event.target !== this.wrapper.nativeElement) {
+            return;
+        }
+        event.stopImmediatePropagation();
+        this.hostElementFocused.emit();
         if (!this.isFocused) {
             this.isFocused = true;
             if (hasObservers(this.onFocus)) {
@@ -348,6 +422,44 @@ let DropDownListComponent = DropDownListComponent_1 = class DropDownListComponen
             }
         }
     }
+    /**
+     * @hidden
+     */
+    onResize() {
+        if (this._open) {
+            const popupWrapper = this.popupRef.popupElement;
+            const { min, max } = this.width;
+            popupWrapper.style.minWidth = min;
+            popupWrapper.style.width = max;
+        }
+    }
+    get isDisabled() {
+        return this.disabled;
+    }
+    get isLoading() {
+        return this.loading;
+    }
+    get dir() {
+        return this.direction;
+    }
+    get hostTabIndex() {
+        return this.widgetTabIndex;
+    }
+    get isReadonly() {
+        return this.readonly;
+    }
+    get isAriaExpanded() {
+        return this.ariaExpanded;
+    }
+    get hostAriaOwns() {
+        return this.ariaOwns;
+    }
+    get hostAriaActivedescendant() {
+        return this.ariaActivedescendant;
+    }
+    get hostNoDataLabel() {
+        return this.noDataLabel;
+    }
     /**
      * @hidden
      */
@@ -408,29 +520,15 @@ let DropDownListComponent = DropDownListComponent_1 = class DropDownListComponen
         this.focus();
         this.togglePopup(!this.isOpen);
     }
-    /**
-     * @hidden
-     */
-    onResize() {
-        if (this._open) {
-            const popupWrapper = this.popupRef.popupElement;
-            const { min, max } = this.width;
-            popupWrapper.style.minWidth = min;
-            popupWrapper.style.width = max;
-        }
-    }
-    get dir() {
-        return this.direction;
-    }
     set isFocused(isFocused) {
-        this.renderer[isFocused ? 'addClass' : 'removeClass'](this.wrapper.nativeElement, 'k-state-focused');
+        this.renderer[isFocused ? 'addClass' : 'removeClass'](this.wrapper.nativeElement, 'k-focus');
         this._isFocused = isFocused;
     }
     get isFocused() {
         return this._isFocused;
     }
     ngOnInit() {
-        this.renderer.removeAttribute(this.hostElement.nativeElement, "tabindex");
+        this.renderer.removeAttribute(this.wrapper.nativeElement, "tabindex");
         this.localizationChangesSubscription = this.localization
             .changes.subscribe(({ rtl }) => {
             this.direction = rtl ? 'rtl' : 'ltr';
@@ -438,6 +536,7 @@ let DropDownListComponent = DropDownListComponent_1 = class DropDownListComponen
         });
         this.setMessages();
         this.assignAriaDescribedBy();
+        this.setComponentClasses();
     }
     /**
      * @hidden
@@ -610,6 +709,24 @@ let DropDownListComponent = DropDownListComponent_1 = class DropDownListComponen
     get buttonClasses() {
         return this.loading ? 'k-i-loading' : this.iconClass || 'k-i-arrow-s';
     }
+    /**
+     * @hidden
+     */
+    get selectButtonClasses() {
+        return `${this.size ? getSizeClass('button', this.size) : ''} ${this.fillMode ? 'k-button-' + this.fillMode : ''} ${this.fillMode ? 'k-button-' + this.fillMode + '-base' : ''}`;
+    }
+    /**
+     * @hidden
+     */
+    get filterInputClasses() {
+        return `${this.size ? getSizeClass('input', this.size) : ''} ${this.fillMode ? 'k-input-' + this.fillMode : ''} ${this.rounded ? getRoundedClass(this.rounded) : ''}`;
+    }
+    /**
+     * @hidden
+     */
+    get optionLabelSizeClass() {
+        return `${this.size ? getSizeClass('list', this.size) : ''}`;
+    }
     /**
      * @hidden
      */
@@ -744,13 +861,13 @@ let DropDownListComponent = DropDownListComponent_1 = class DropDownListComponen
             .subscribe(this.handleEnter.bind(this));
         this.escSubscription = this.navigationService.esc
             .subscribe(this.handleEscape.bind(this));
-        this.filterBlurredSubscription = this.filterBlurred.pipe(concatMap(() => interval(10).pipe(take(1), takeUntil(this.wrapperFocused))))
+        this.filterBlurredSubscription = this.filterBlurred.pipe(concatMap(() => interval(10).pipe(take(1), takeUntil(this.hostElementFocused))))
             .subscribe(() => {
-            this.wrapperBlurred.emit();
+            this.hostElementBlurred.emit();
         });
         this._zone.runOutsideAngular(() => {
             this.componentBlurredSubscription =
-                merge(this.wrapperBlurred.pipe(concatMap(() => interval(10).pipe(take(1), takeUntil(this.filterFocused)))), this.navigationService.tab).pipe(tap(event => event instanceof NavigationEvent && this.focus()), filter(() => this.isFocused))
+                merge(this.hostElementBlurred.pipe(concatMap(() => interval(10).pipe(take(1), takeUntil(this.filterFocused)))), this.navigationService.tab).pipe(tap(event => event instanceof NavigationEvent && this.focus()), filter(() => this.isFocused))
                     .subscribe(() => this.componentBlur());
         });
     }
@@ -762,7 +879,7 @@ let DropDownListComponent = DropDownListComponent_1 = class DropDownListComponen
         // Roll up DropDownList on iOS when tapped outside
         this.touchstartDisposeHandler = this.renderer.listen(document, 'touchstart', (e) => {
             const target = e.target;
-            if (this.isFocused && !inDropDown(this.hostElement, target, this.popupRef)) {
+            if (this.isFocused && !inDropDown(this.wrapper, target, this.popupRef)) {
                 this._zone.run(() => {
                     if (this.filterFocused) {
                         // Close popup if filter is focused
@@ -773,6 +890,24 @@ let DropDownListComponent = DropDownListComponent_1 = class DropDownListComponen
             }
         }));
     }
+    subscribeFocusEvents() {
+        if (isDocumentAvailable()) {
+            this.focusComponent = this.focusComponent.bind(this);
+            this.blurComponent = this.blurComponent.bind(this);
+            this._zone.runOutsideAngular(() => {
+                const useCapture = true;
+                document.addEventListener('focus', this.focusComponent, useCapture);
+                document.addEventListener('blur', this.blurComponent, useCapture);
+            });
+        }
+    }
+    unSubscribeFocusEvents() {
+        if (isDocumentAvailable()) {
+            const useCapture = true;
+            document.removeEventListener('focus', this.focusComponent, useCapture);
+            document.removeEventListener('blur', this.blurComponent, useCapture);
+        }
+    }
     unsubscribeEvents() {
         if (!isDocumentAvailable()) {
             return;
@@ -784,6 +919,7 @@ let DropDownListComponent = DropDownListComponent_1 = class DropDownListComponen
         this.escSubscription.unsubscribe();
         this.componentBlurredSubscription.unsubscribe();
         this.filterBlurredSubscription.unsubscribe();
+        this.unSubscribeFocusEvents();
         if (this.touchstartDisposeHandler) {
             this.touchstartDisposeHandler();
         }
@@ -875,7 +1011,7 @@ let DropDownListComponent = DropDownListComponent_1 = class DropDownListComponen
             hasObservers(this.close) ||
             hasObservers(this.onBlur) ||
             hasObservers(this.filterChange) ||
-            isUntouched(this.hostElement.nativeElement)) {
+            isUntouched(this.wrapper.nativeElement)) {
             this._zone.run(() => {
                 if (valueHasChanged) {
                     this.selectionService.change(this.selectionService.selected[0]);
@@ -1055,11 +1191,18 @@ let DropDownListComponent = DropDownListComponent_1 = class DropDownListComponen
         const newValue = `${this.valueLabelId} ${trimmed}`.trim();
         this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-describedby', newValue);
     }
+    setComponentClasses() {
+        if (this.size) {
+            this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('picker', this.size));
+        }
+        if (this.rounded) {
+            this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(this.rounded));
+        }
+        if (this.fillMode) {
+            this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('picker', this.fillMode));
+        }
+    }
 };
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String)
-], DropDownListComponent.prototype, "focusableId", void 0);
 tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", String)
@@ -1143,6 +1286,21 @@ tslib_1.__decorate([
     tslib_1.__metadata("design:type", Number),
     tslib_1.__metadata("design:paramtypes", [Number])
 ], DropDownListComponent.prototype, "tabIndex", null);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String),
+    tslib_1.__metadata("design:paramtypes", [String])
+], DropDownListComponent.prototype, "size", null);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String),
+    tslib_1.__metadata("design:paramtypes", [String])
+], DropDownListComponent.prototype, "rounded", null);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String),
+    tslib_1.__metadata("design:paramtypes", [String])
+], DropDownListComponent.prototype, "fillMode", null);
 tslib_1.__decorate([
     Output(),
     tslib_1.__metadata("design:type", EventEmitter)
@@ -1215,24 +1373,90 @@ tslib_1.__decorate([
     ViewChild('popupTemplate', { static: true }),
     tslib_1.__metadata("design:type", TemplateRef)
 ], DropDownListComponent.prototype, "popupTemplate", void 0);
-tslib_1.__decorate([
-    ViewChild('wrapper', { static: true }),
-    tslib_1.__metadata("design:type", ElementRef)
-], DropDownListComponent.prototype, "wrapper", void 0);
 tslib_1.__decorate([
     ViewChild('optionsList', { static: false }),
     tslib_1.__metadata("design:type", ListComponent)
 ], DropDownListComponent.prototype, "optionsList", void 0);
 tslib_1.__decorate([
-    HostBinding('class.k-widget'),
-    HostBinding('class.k-dropdown'),
+    HostBinding('class.k-dropdownlist'),
+    HostBinding('class.k-picker'),
     tslib_1.__metadata("design:type", Boolean)
-], DropDownListComponent.prototype, "widgetClasses", void 0);
+], DropDownListComponent.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", [])
+], DropDownListComponent.prototype, "isDisabled", null);
+tslib_1.__decorate([
+    HostBinding('class.k-loading'),
+    tslib_1.__metadata("design:type", Boolean),
+    tslib_1.__metadata("design:paramtypes", [])
+], DropDownListComponent.prototype, "isLoading", null);
+tslib_1.__decorate([
+    Input('id'),
+    HostBinding('attr.id'),
+    tslib_1.__metadata("design:type", String)
+], DropDownListComponent.prototype, "focusableId", void 0);
 tslib_1.__decorate([
     HostBinding('attr.dir'),
     tslib_1.__metadata("design:type", String),
     tslib_1.__metadata("design:paramtypes", [])
 ], DropDownListComponent.prototype, "dir", null);
+tslib_1.__decorate([
+    HostBinding('attr.tabindex'),
+    tslib_1.__metadata("design:type", Number),
+    tslib_1.__metadata("design:paramtypes", [])
+], DropDownListComponent.prototype, "hostTabIndex", null);
+tslib_1.__decorate([
+    HostBinding('attr.readonly'),
+    HostBinding('attr.aria-readonly'),
+    tslib_1.__metadata("design:type", Boolean),
+    tslib_1.__metadata("design:paramtypes", [])
+], DropDownListComponent.prototype, "isReadonly", null);
+tslib_1.__decorate([
+    HostBinding('attr.role'),
+    HostBinding('attr.aria-haspopup'),
+    tslib_1.__metadata("design:type", String)
+], DropDownListComponent.prototype, "role", void 0);
+tslib_1.__decorate([
+    HostBinding('attr.aria-expanded'),
+    tslib_1.__metadata("design:type", Boolean),
+    tslib_1.__metadata("design:paramtypes", [])
+], DropDownListComponent.prototype, "isAriaExpanded", null);
+tslib_1.__decorate([
+    HostBinding('attr.aria-owns'),
+    tslib_1.__metadata("design:type", String),
+    tslib_1.__metadata("design:paramtypes", [])
+], DropDownListComponent.prototype, "hostAriaOwns", null);
+tslib_1.__decorate([
+    HostBinding('attr.aria-activedescendant'),
+    tslib_1.__metadata("design:type", String),
+    tslib_1.__metadata("design:paramtypes", [])
+], DropDownListComponent.prototype, "hostAriaActivedescendant", null);
+tslib_1.__decorate([
+    HostBinding('attr.aria-label'),
+    tslib_1.__metadata("design:type", String),
+    tslib_1.__metadata("design:paramtypes", [])
+], DropDownListComponent.prototype, "hostNoDataLabel", 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)
+], DropDownListComponent.prototype, "keydown", null);
+tslib_1.__decorate([
+    HostListener('keypress', ['$event']),
+    tslib_1.__metadata("design:type", Function),
+    tslib_1.__metadata("design:paramtypes", [Object]),
+    tslib_1.__metadata("design:returntype", void 0)
+], DropDownListComponent.prototype, "keypress", null);
+tslib_1.__decorate([
+    HostListener('click', ['$event']),
+    tslib_1.__metadata("design:type", Function),
+    tslib_1.__metadata("design:paramtypes", [MouseEvent]),
+    tslib_1.__metadata("design:returntype", void 0)
+], DropDownListComponent.prototype, "click", null);
 DropDownListComponent = DropDownListComponent_1 = tslib_1.__decorate([
     Component({
         exportAs: 'kendoDropDownList',
@@ -1261,128 +1485,128 @@ DropDownListComponent = DropDownListComponent_1 = tslib_1.__decorate([
             noDataText="NO DATA FOUND"
         >
         </ng-container>
-        <span #wrapper unselectable="on"
-          role="listbox"
-          [id]="focusableId"
-          [ngClass]="{
-            'k-dropdown-wrap': true,
-            'k-state-disabled': this.disabled
-          }"
-          [attr.dir]="direction"
-          [attr.readonly]="readonly"
-          [attr.tabindex]="widgetTabIndex"
-          [attr.aria-disabled]="disabled"
-          [attr.aria-readonly]="readonly"
-          aria-haspopup="listbox"
-          [attr.aria-expanded]="ariaExpanded"
-          [attr.aria-owns]="ariaOwns"
-          [attr.aria-activedescendant]="ariaActivedescendant"
-          [attr.aria-label]="noDataLabel"
-          (keydown)="keydown($event)"
-          (keypress)="keypress($event)"
-          (click)="click($event)"
-          [kendoEventsOutsideAngular]="{
-            focus: focusComponent,
-            blur: blurComponent
+        <span class="k-input-inner" unselectable="on" [id]="valueLabelId">
+            <span class="k-input-value-text">
+                <ng-template *ngIf="valueTemplate"
+                    [templateContext]="{
+                        templateRef: valueTemplate.templateRef,
+                        $implicit: dataItem
+                    }">
+                </ng-template>
+                <ng-template [ngIf]="!valueTemplate">{{ getText() }}</ng-template>
+            </span>
+        </span>
+        <button
+            tabindex="-1"
+            unselectable="on"
+            type="button"
+            class="k-input-button k-button k-icon-button"
+            [ngClass]="selectButtonClasses"
+            [kendoEventsOutsideAngular]="{
+                mousedown: onMouseDown
             }"
-          [scope]="this"
         >
-            <span class="k-input" unselectable="on" [id]="valueLabelId">
-               <ng-template *ngIf="valueTemplate"
-                   [templateContext]="{
-                       templateRef: valueTemplate.templateRef,
-                       $implicit: dataItem
-                   }">
-               </ng-template>
-               <ng-template [ngIf]="!valueTemplate">{{ getText() }}</ng-template>
-           </span>
-           <span class="k-select" unselectable="on">
-               <span
-                    class="k-icon"
-                    unselectable="on"
-                    [ngClass]="buttonClasses"
-                >
-                </span>
-           </span>
-           <ng-template #popupTemplate>
-               <!--filterable-->
+            <span
+                class="k-button-icon k-icon"
+                unselectable="on"
+                [ngClass]="buttonClasses"
+            ></span>
+        </button>
+        <ng-template #popupTemplate>
+            <!--filterable-->
 
-               <ng-template [ngIf]="filterable">
-                   <span class="k-list-filter" (click)="$event.stopImmediatePropagation()">
-                       <input
-                           [attr.aria-owns]="ariaOwns"
-                           [attr.aria-activedescendant]="ariaActivedescendant"
-                           [attr.aria-label]="noDataLabel"
-                           tabindex="-1"
-                           [filterInput]="isFocused && !touchEnabled"
-                           [dir]="direction"
-                           [(ngModel)]="filterText"
-                           class="k-textbox"
-                           (keydown)="keydown($event)"
-                           (input)="handleFilter($event)"
-                           (focus)="onFilterFocus()"
-                           (blur)="blurFilterInput()" />
-                       <span class="k-icon k-i-search" unselectable="on"></span>
-                   </span>
-               </ng-template>
-               <!--default item-->
-               <ng-template [ngIf]="defaultItem && !itemTemplate">
-                   <div class="k-list-optionlabel" [ngClass]="{ 'k-state-disabled': isDisabledDefaultItem }" kendoDropDownsSelectable [index]="-1">
-                       {{ getDefaultItemText() }}
-                   </div>
-               </ng-template>
-               <ng-template [ngIf]="defaultItem && itemTemplate">
-                   <div class="k-list-optionlabel" [ngClass]="{ 'k-state-disabled': isDisabledDefaultItem }" kendoDropDownsSelectable [index]="-1">
-                       <ng-template
-                           [templateContext]="{
-                               templateRef: itemTemplate.templateRef,
-                               $implicit: defaultItem
-                           }">
-                       </ng-template>
-                   </div>
-               </ng-template>
-               <!--header template-->
-               <ng-template *ngIf="headerTemplate"
-                   [templateContext]="{
-                       templateRef: headerTemplate.templateRef
-                   }">
-               </ng-template>
-               <!--list-->
-               <kendo-list
-                   #optionsList
-                   [id]="listBoxId"
-                   [optionPrefix]="optionPrefix"
-                   [data]="data"
-                   [textField]="textField"
-                   [valueField]="valueField"
-                   [template]="itemTemplate"
-                   [groupTemplate]="groupTemplate"
-                   [fixedGroupTemplate]="fixedGroupTemplate"
-                   [height]="listHeight"
-                   [show]="isOpen"
-                   [virtual]="virtual"
-                   (pageChange)="pageChange($event)"
-                   >
-               </kendo-list>
-               <!--no-data template-->
-               <div class="k-nodata" *ngIf="data.length === 0">
-                   <ng-template [ngIf]="noDataTemplate"
-                       [templateContext]="{
-                           templateRef: noDataTemplate ? noDataTemplate.templateRef : undefined
-                       }">
-                   </ng-template>
-                   <ng-template [ngIf]="!noDataTemplate">
-                       <div>{{ noDataText }}</div>
-                   </ng-template>
-               </div>
-               <!--footer template-->
-               <ng-template *ngIf="footerTemplate"
-                   [templateContext]="{
-                       templateRef: footerTemplate.templateRef
-                   }">
-               </ng-template>
+            <ng-template [ngIf]="filterable">
+                <div class="k-list-filter" (click)="$event.stopImmediatePropagation()">
+                    <span
+                        class="k-searchbox k-input"
+                        [ngClass]="filterInputClasses"
+                    >
+                        <span class="k-input-icon k-icon k-i-search" unselectable="on"></span>
+                        <input
+                            [attr.aria-owns]="ariaOwns"
+                            [attr.aria-activedescendant]="ariaActivedescendant"
+                            [attr.aria-label]="noDataLabel"
+                            tabindex="-1"
+                            [filterInput]="isFocused && !touchEnabled"
+                            [dir]="direction"
+                            [(ngModel)]="filterText"
+                            class="k-input-inner"
+                            (keydown)="keydown($event)"
+                            (input)="handleFilter($event)"
+                            (focus)="onFilterFocus()"
+                            (blur)="blurFilterInput()" />
+                    </span>
+                </div>
             </ng-template>
-        </span>
+            <!--default item-->
+            <ng-template [ngIf]="defaultItem && !itemTemplate">
+                <div
+                    class="k-list"
+                    [ngClass]="optionLabelSizeClass"
+                >
+                    <div class="k-list-optionlabel k-list-item" [ngClass]="{ 'k-disabled': isDisabledDefaultItem }" kendoDropDownsSelectable [index]="-1">
+                        {{ getDefaultItemText() }}
+                    </div>
+                </div>
+            </ng-template>
+            <ng-template [ngIf]="defaultItem && itemTemplate">
+                <div
+                    class="k-list"
+                    [ngClass]="optionLabelSizeClass"
+                >
+                    <div class="k-list-optionlabel k-list-item" [ngClass]="{ 'k-disabled': isDisabledDefaultItem }" kendoDropDownsSelectable [index]="-1">
+                        <ng-template
+                            [templateContext]="{
+                                templateRef: itemTemplate.templateRef,
+                                $implicit: defaultItem
+                            }">
+                        </ng-template>
+                    </div>
+                </div>
+            </ng-template>
+            <!--header template-->
+            <ng-template *ngIf="headerTemplate"
+                [templateContext]="{
+                    templateRef: headerTemplate.templateRef
+                }">
+            </ng-template>
+            <!--list-->
+            <kendo-list
+                #optionsList
+                [size]="size"
+                [rounded]="rounded"
+                [id]="listBoxId"
+                [optionPrefix]="optionPrefix"
+                [data]="data"
+                [textField]="textField"
+                [valueField]="valueField"
+                [template]="itemTemplate"
+                [groupTemplate]="groupTemplate"
+                [fixedGroupTemplate]="fixedGroupTemplate"
+                [height]="listHeight"
+                [show]="isOpen"
+                [virtual]="virtual"
+                (pageChange)="pageChange($event)"
+                >
+            </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>{{ 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>
@@ -1390,7 +1614,8 @@ DropDownListComponent = DropDownListComponent_1 = tslib_1.__decorate([
   `
     }),
     tslib_1.__param(10, Optional()), tslib_1.__param(10, Inject(TOUCH_ENABLED)),
-    tslib_1.__metadata("design:paramtypes", [LocalizationService,
+    tslib_1.__metadata("design:paramtypes", [ElementRef,
+        LocalizationService,
         PopupService,
         SelectionService,
         NavigationService,
@@ -1398,7 +1623,6 @@ DropDownListComponent = DropDownListComponent_1 = tslib_1.__decorate([
         DataService,
         NgZone,
         Renderer2,
-        ElementRef,
         ChangeDetectorRef, Boolean])
 ], DropDownListComponent);
 export { DropDownListComponent };