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

package/dist/es/dropdownlist/dropdownlist.component.js

@@ -4,7 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 /* tslint:disable:member-ordering */
 import * as tslib_1 from "tslib";
-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';
@@ -12,7 +12,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';
@@ -59,7 +59,8 @@ export var DROPDOWNLIST_VALUE_ACCESSOR = {
  * ```
  */
 var DropDownListComponent = /** @class */ (function () {
-    function DropDownListComponent(localization, popupService, selectionService, navigationService, disabledItemsService, dataService, _zone, renderer, hostElement, cdr, touchEnabled) {
+    function DropDownListComponent(wrapper, localization, popupService, selectionService, navigationService, disabledItemsService, dataService, _zone, renderer, cdr, touchEnabled) {
+        this.wrapper = wrapper;
         this.localization = localization;
         this.popupService = popupService;
         this.selectionService = selectionService;
@@ -68,13 +69,8 @@ var DropDownListComponent = /** @class */ (function () {
         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.
          *
@@ -152,7 +148,12 @@ var DropDownListComponent = /** @class */ (function () {
          * 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();
@@ -164,16 +165,20 @@ var DropDownListComponent = /** @class */ (function () {
         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);
     }
     DropDownListComponent_1 = DropDownListComponent;
@@ -382,11 +387,88 @@ var DropDownListComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(DropDownListComponent.prototype, "size", {
+        get: function () {
+            return this._size;
+        },
+        /**
+         * Sets the size of the component.
+         *
+         * The possible values are:
+         * * `'small'`
+         * * `'medium'` (default)
+         * * `'large'`
+         * * `null`
+         *
+         */
+        set: function (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;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DropDownListComponent.prototype, "rounded", {
+        get: function () {
+            return this._rounded;
+        },
+        /**
+         * Sets the border radius of the component.
+         *
+         * The possible values are:
+         * * `'small'`
+         * * `'medium'` (default)
+         * * `'large'`
+         * * `'full'`
+         * * `null`
+         *
+         */
+        set: function (rounded) {
+            this.renderer.removeClass(this.wrapper.nativeElement, getRoundedClass(this.rounded));
+            if (rounded) {
+                this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(rounded));
+            }
+            this._rounded = rounded;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DropDownListComponent.prototype, "fillMode", {
+        get: function () {
+            return this._fillMode;
+        },
+        /**
+         * Sets the fillMode of the component.
+         *
+         * The possible values are:
+         * * `'flat'`
+         * * `'solid'` (default)
+         * * `'outline'`
+         * * `null`
+         *
+         */
+        set: function (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;
+        },
+        enumerable: true,
+        configurable: true
+    });
     /**
      * @hidden
      */
-    DropDownListComponent.prototype.blurComponent = function () {
-        this.wrapperBlurred.emit();
+    DropDownListComponent.prototype.blurComponent = function (event) {
+        if (event.target !== this.wrapper.nativeElement) {
+            return;
+        }
+        event.stopImmediatePropagation();
+        this.hostElementBlurred.emit();
     };
     /**
      * @hidden
@@ -397,9 +479,13 @@ var DropDownListComponent = /** @class */ (function () {
     /**
      * @hidden
      */
-    DropDownListComponent.prototype.focusComponent = function () {
+    DropDownListComponent.prototype.focusComponent = function (event) {
         var _this = this;
-        this.wrapperFocused.emit();
+        if (event.target !== this.wrapper.nativeElement) {
+            return;
+        }
+        event.stopImmediatePropagation();
+        this.hostElementFocused.emit();
         if (!this.isFocused) {
             this.isFocused = true;
             if (hasObservers(this.onFocus)) {
@@ -409,6 +495,80 @@ var DropDownListComponent = /** @class */ (function () {
             }
         }
     };
+    /**
+     * @hidden
+     */
+    DropDownListComponent.prototype.onResize = function () {
+        if (this._open) {
+            var popupWrapper = this.popupRef.popupElement;
+            var _a = this.width, min = _a.min, max = _a.max;
+            popupWrapper.style.minWidth = min;
+            popupWrapper.style.width = max;
+        }
+    };
+    Object.defineProperty(DropDownListComponent.prototype, "isDisabled", {
+        get: function () {
+            return this.disabled;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DropDownListComponent.prototype, "isLoading", {
+        get: function () {
+            return this.loading;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DropDownListComponent.prototype, "dir", {
+        get: function () {
+            return this.direction;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DropDownListComponent.prototype, "hostTabIndex", {
+        get: function () {
+            return this.widgetTabIndex;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DropDownListComponent.prototype, "isReadonly", {
+        get: function () {
+            return this.readonly;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DropDownListComponent.prototype, "isAriaExpanded", {
+        get: function () {
+            return this.ariaExpanded;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DropDownListComponent.prototype, "hostAriaOwns", {
+        get: function () {
+            return this.ariaOwns;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DropDownListComponent.prototype, "hostAriaActivedescendant", {
+        get: function () {
+            return this.ariaActivedescendant;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DropDownListComponent.prototype, "hostNoDataLabel", {
+        get: function () {
+            return this.noDataLabel;
+        },
+        enumerable: true,
+        configurable: true
+    });
     /**
      * @hidden
      */
@@ -469,30 +629,12 @@ var DropDownListComponent = /** @class */ (function () {
         this.focus();
         this.togglePopup(!this.isOpen);
     };
-    /**
-     * @hidden
-     */
-    DropDownListComponent.prototype.onResize = function () {
-        if (this._open) {
-            var popupWrapper = this.popupRef.popupElement;
-            var _a = this.width, min = _a.min, max = _a.max;
-            popupWrapper.style.minWidth = min;
-            popupWrapper.style.width = max;
-        }
-    };
-    Object.defineProperty(DropDownListComponent.prototype, "dir", {
-        get: function () {
-            return this.direction;
-        },
-        enumerable: true,
-        configurable: true
-    });
     Object.defineProperty(DropDownListComponent.prototype, "isFocused", {
         get: function () {
             return this._isFocused;
         },
         set: function (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;
         },
         enumerable: true,
@@ -500,7 +642,7 @@ var DropDownListComponent = /** @class */ (function () {
     });
     DropDownListComponent.prototype.ngOnInit = function () {
         var _this = this;
-        this.renderer.removeAttribute(this.hostElement.nativeElement, "tabindex");
+        this.renderer.removeAttribute(this.wrapper.nativeElement, "tabindex");
         this.localizationChangesSubscription = this.localization
             .changes.subscribe(function (_a) {
             var rtl = _a.rtl;
@@ -509,6 +651,7 @@ var DropDownListComponent = /** @class */ (function () {
         });
         this.setMessages();
         this.assignAriaDescribedBy();
+        this.setComponentClasses();
     };
     /**
      * @hidden
@@ -690,6 +833,36 @@ var DropDownListComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(DropDownListComponent.prototype, "selectButtonClasses", {
+        /**
+         * @hidden
+         */
+        get: function () {
+            return (this.size ? getSizeClass('button', this.size) : '') + " " + (this.fillMode ? 'k-button-' + this.fillMode : '') + " " + (this.fillMode ? 'k-button-' + this.fillMode + '-base' : '');
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DropDownListComponent.prototype, "filterInputClasses", {
+        /**
+         * @hidden
+         */
+        get: function () {
+            return (this.size ? getSizeClass('input', this.size) : '') + " " + (this.fillMode ? 'k-input-' + this.fillMode : '') + " " + (this.rounded ? getRoundedClass(this.rounded) : '');
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DropDownListComponent.prototype, "optionLabelSizeClass", {
+        /**
+         * @hidden
+         */
+        get: function () {
+            return "" + (this.size ? getSizeClass('list', this.size) : '');
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(DropDownListComponent.prototype, "listContainerClasses", {
         /**
          * @hidden
@@ -837,13 +1010,13 @@ var DropDownListComponent = /** @class */ (function () {
             .subscribe(this.handleEnter.bind(this));
         this.escSubscription = this.navigationService.esc
             .subscribe(this.handleEscape.bind(this));
-        this.filterBlurredSubscription = this.filterBlurred.pipe(concatMap(function () { return interval(10).pipe(take(1), takeUntil(_this.wrapperFocused)); }))
+        this.filterBlurredSubscription = this.filterBlurred.pipe(concatMap(function () { return interval(10).pipe(take(1), takeUntil(_this.hostElementFocused)); }))
             .subscribe(function () {
-            _this.wrapperBlurred.emit();
+            _this.hostElementBlurred.emit();
         });
         this._zone.runOutsideAngular(function () {
             _this.componentBlurredSubscription =
-                merge(_this.wrapperBlurred.pipe(concatMap(function () { return interval(10).pipe(take(1), takeUntil(_this.filterFocused)); })), _this.navigationService.tab).pipe(tap(function (event) { return event instanceof NavigationEvent && _this.focus(); }), filter(function () { return _this.isFocused; }))
+                merge(_this.hostElementBlurred.pipe(concatMap(function () { return interval(10).pipe(take(1), takeUntil(_this.filterFocused)); })), _this.navigationService.tab).pipe(tap(function (event) { return event instanceof NavigationEvent && _this.focus(); }), filter(function () { return _this.isFocused; }))
                     .subscribe(function () { return _this.componentBlur(); });
         });
     };
@@ -856,7 +1029,7 @@ var DropDownListComponent = /** @class */ (function () {
             // Roll up DropDownList on iOS when tapped outside
             return _this.touchstartDisposeHandler = _this.renderer.listen(document, 'touchstart', function (e) {
                 var target = e.target;
-                if (_this.isFocused && !inDropDown(_this.hostElement, target, _this.popupRef)) {
+                if (_this.isFocused && !inDropDown(_this.wrapper, target, _this.popupRef)) {
                     _this._zone.run(function () {
                         if (_this.filterFocused) {
                             // Close popup if filter is focused
@@ -868,6 +1041,25 @@ var DropDownListComponent = /** @class */ (function () {
             });
         });
     };
+    DropDownListComponent.prototype.subscribeFocusEvents = function () {
+        var _this = this;
+        if (isDocumentAvailable()) {
+            this.focusComponent = this.focusComponent.bind(this);
+            this.blurComponent = this.blurComponent.bind(this);
+            this._zone.runOutsideAngular(function () {
+                var useCapture = true;
+                document.addEventListener('focus', _this.focusComponent, useCapture);
+                document.addEventListener('blur', _this.blurComponent, useCapture);
+            });
+        }
+    };
+    DropDownListComponent.prototype.unSubscribeFocusEvents = function () {
+        if (isDocumentAvailable()) {
+            var useCapture = true;
+            document.removeEventListener('focus', this.focusComponent, useCapture);
+            document.removeEventListener('blur', this.blurComponent, useCapture);
+        }
+    };
     DropDownListComponent.prototype.unsubscribeEvents = function () {
         if (!isDocumentAvailable()) {
             return;
@@ -879,6 +1071,7 @@ var DropDownListComponent = /** @class */ (function () {
         this.escSubscription.unsubscribe();
         this.componentBlurredSubscription.unsubscribe();
         this.filterBlurredSubscription.unsubscribe();
+        this.unSubscribeFocusEvents();
         if (this.touchstartDisposeHandler) {
             this.touchstartDisposeHandler();
         }
@@ -971,7 +1164,7 @@ var DropDownListComponent = /** @class */ (function () {
             hasObservers(this.close) ||
             hasObservers(this.onBlur) ||
             hasObservers(this.filterChange) ||
-            isUntouched(this.hostElement.nativeElement)) {
+            isUntouched(this.wrapper.nativeElement)) {
             this._zone.run(function () {
                 if (valueHasChanged) {
                     _this.selectionService.change(_this.selectionService.selected[0]);
@@ -1155,11 +1348,18 @@ var DropDownListComponent = /** @class */ (function () {
         var newValue = (this.valueLabelId + " " + trimmed).trim();
         this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-describedby', newValue);
     };
+    DropDownListComponent.prototype.setComponentClasses = function () {
+        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));
+        }
+    };
     var DropDownListComponent_1;
-    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)
@@ -1243,6 +1443,21 @@ var DropDownListComponent = /** @class */ (function () {
         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)
@@ -1315,24 +1530,90 @@ var DropDownListComponent = /** @class */ (function () {
         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',
@@ -1355,10 +1636,11 @@ var DropDownListComponent = /** @class */ (function () {
                 }
             ],
             selector: 'kendo-dropdownlist',
-            template: "\n        <ng-container kendoDropDownListLocalizedMessages\n            i18n-noDataText=\"kendo.dropdownlist.noDataText|The text displayed in the popup when there are no items\"\n            noDataText=\"NO DATA FOUND\"\n        >\n        </ng-container>\n        <span #wrapper unselectable=\"on\"\n          role=\"listbox\"\n          [id]=\"focusableId\"\n          [ngClass]=\"{\n            'k-dropdown-wrap': true,\n            'k-state-disabled': this.disabled\n          }\"\n          [attr.dir]=\"direction\"\n          [attr.readonly]=\"readonly\"\n          [attr.tabindex]=\"widgetTabIndex\"\n          [attr.aria-disabled]=\"disabled\"\n          [attr.aria-readonly]=\"readonly\"\n          aria-haspopup=\"listbox\"\n          [attr.aria-expanded]=\"ariaExpanded\"\n          [attr.aria-owns]=\"ariaOwns\"\n          [attr.aria-activedescendant]=\"ariaActivedescendant\"\n          [attr.aria-label]=\"noDataLabel\"\n          (keydown)=\"keydown($event)\"\n          (keypress)=\"keypress($event)\"\n          (click)=\"click($event)\"\n          [kendoEventsOutsideAngular]=\"{\n            focus: focusComponent,\n            blur: blurComponent\n            }\"\n          [scope]=\"this\"\n        >\n            <span class=\"k-input\" unselectable=\"on\" [id]=\"valueLabelId\">\n               <ng-template *ngIf=\"valueTemplate\"\n                   [templateContext]=\"{\n                       templateRef: valueTemplate.templateRef,\n                       $implicit: dataItem\n                   }\">\n               </ng-template>\n               <ng-template [ngIf]=\"!valueTemplate\">{{ getText() }}</ng-template>\n           </span>\n           <span class=\"k-select\" unselectable=\"on\">\n               <span\n                    class=\"k-icon\"\n                    unselectable=\"on\"\n                    [ngClass]=\"buttonClasses\"\n                >\n                </span>\n           </span>\n           <ng-template #popupTemplate>\n               <!--filterable-->\n\n               <ng-template [ngIf]=\"filterable\">\n                   <span class=\"k-list-filter\" (click)=\"$event.stopImmediatePropagation()\">\n                       <input\n                           [attr.aria-owns]=\"ariaOwns\"\n                           [attr.aria-activedescendant]=\"ariaActivedescendant\"\n                           [attr.aria-label]=\"noDataLabel\"\n                           tabindex=\"-1\"\n                           [filterInput]=\"isFocused && !touchEnabled\"\n                           [dir]=\"direction\"\n                           [(ngModel)]=\"filterText\"\n                           class=\"k-textbox\"\n                           (keydown)=\"keydown($event)\"\n                           (input)=\"handleFilter($event)\"\n                           (focus)=\"onFilterFocus()\"\n                           (blur)=\"blurFilterInput()\" />\n                       <span class=\"k-icon k-i-search\" unselectable=\"on\"></span>\n                   </span>\n               </ng-template>\n               <!--default item-->\n               <ng-template [ngIf]=\"defaultItem && !itemTemplate\">\n                   <div class=\"k-list-optionlabel\" [ngClass]=\"{ 'k-state-disabled': isDisabledDefaultItem }\" kendoDropDownsSelectable [index]=\"-1\">\n                       {{ getDefaultItemText() }}\n                   </div>\n               </ng-template>\n               <ng-template [ngIf]=\"defaultItem && itemTemplate\">\n                   <div class=\"k-list-optionlabel\" [ngClass]=\"{ 'k-state-disabled': isDisabledDefaultItem }\" kendoDropDownsSelectable [index]=\"-1\">\n                       <ng-template\n                           [templateContext]=\"{\n                               templateRef: itemTemplate.templateRef,\n                               $implicit: defaultItem\n                           }\">\n                       </ng-template>\n                   </div>\n               </ng-template>\n               <!--header template-->\n               <ng-template *ngIf=\"headerTemplate\"\n                   [templateContext]=\"{\n                       templateRef: headerTemplate.templateRef\n                   }\">\n               </ng-template>\n               <!--list-->\n               <kendo-list\n                   #optionsList\n                   [id]=\"listBoxId\"\n                   [optionPrefix]=\"optionPrefix\"\n                   [data]=\"data\"\n                   [textField]=\"textField\"\n                   [valueField]=\"valueField\"\n                   [template]=\"itemTemplate\"\n                   [groupTemplate]=\"groupTemplate\"\n                   [fixedGroupTemplate]=\"fixedGroupTemplate\"\n                   [height]=\"listHeight\"\n                   [show]=\"isOpen\"\n                   [virtual]=\"virtual\"\n                   (pageChange)=\"pageChange($event)\"\n                   >\n               </kendo-list>\n               <!--no-data template-->\n               <div class=\"k-nodata\" *ngIf=\"data.length === 0\">\n                   <ng-template [ngIf]=\"noDataTemplate\"\n                       [templateContext]=\"{\n                           templateRef: noDataTemplate ? noDataTemplate.templateRef : undefined\n                       }\">\n                   </ng-template>\n                   <ng-template [ngIf]=\"!noDataTemplate\">\n                       <div>{{ noDataText }}</div>\n                   </ng-template>\n               </div>\n               <!--footer template-->\n               <ng-template *ngIf=\"footerTemplate\"\n                   [templateContext]=\"{\n                       templateRef: footerTemplate.templateRef\n                   }\">\n               </ng-template>\n            </ng-template>\n        </span>\n        <ng-template [ngIf]=\"isOpen\">\n            <kendo-resize-sensor (resize)=\"onResize()\"></kendo-resize-sensor>\n        </ng-template>\n        <ng-container #container></ng-container>\n  "
+            template: "\n        <ng-container kendoDropDownListLocalizedMessages\n            i18n-noDataText=\"kendo.dropdownlist.noDataText|The text displayed in the popup when there are no items\"\n            noDataText=\"NO DATA FOUND\"\n        >\n        </ng-container>\n        <span class=\"k-input-inner\" unselectable=\"on\" [id]=\"valueLabelId\">\n            <span class=\"k-input-value-text\">\n                <ng-template *ngIf=\"valueTemplate\"\n                    [templateContext]=\"{\n                        templateRef: valueTemplate.templateRef,\n                        $implicit: dataItem\n                    }\">\n                </ng-template>\n                <ng-template [ngIf]=\"!valueTemplate\">{{ getText() }}</ng-template>\n            </span>\n        </span>\n        <button\n            tabindex=\"-1\"\n            unselectable=\"on\"\n            type=\"button\"\n            class=\"k-input-button k-button k-icon-button\"\n            [ngClass]=\"selectButtonClasses\"\n            [kendoEventsOutsideAngular]=\"{\n                mousedown: onMouseDown\n            }\"\n        >\n            <span\n                class=\"k-button-icon k-icon\"\n                unselectable=\"on\"\n                [ngClass]=\"buttonClasses\"\n            ></span>\n        </button>\n        <ng-template #popupTemplate>\n            <!--filterable-->\n\n            <ng-template [ngIf]=\"filterable\">\n                <div class=\"k-list-filter\" (click)=\"$event.stopImmediatePropagation()\">\n                    <span\n                        class=\"k-searchbox k-input\"\n                        [ngClass]=\"filterInputClasses\"\n                    >\n                        <span class=\"k-input-icon k-icon k-i-search\" unselectable=\"on\"></span>\n                        <input\n                            [attr.aria-owns]=\"ariaOwns\"\n                            [attr.aria-activedescendant]=\"ariaActivedescendant\"\n                            [attr.aria-label]=\"noDataLabel\"\n                            tabindex=\"-1\"\n                            [filterInput]=\"isFocused && !touchEnabled\"\n                            [dir]=\"direction\"\n                            [(ngModel)]=\"filterText\"\n                            class=\"k-input-inner\"\n                            (keydown)=\"keydown($event)\"\n                            (input)=\"handleFilter($event)\"\n                            (focus)=\"onFilterFocus()\"\n                            (blur)=\"blurFilterInput()\" />\n                    </span>\n                </div>\n            </ng-template>\n            <!--default item-->\n            <ng-template [ngIf]=\"defaultItem && !itemTemplate\">\n                <div\n                    class=\"k-list\"\n                    [ngClass]=\"optionLabelSizeClass\"\n                >\n                    <div class=\"k-list-optionlabel k-list-item\" [ngClass]=\"{ 'k-disabled': isDisabledDefaultItem }\" kendoDropDownsSelectable [index]=\"-1\">\n                        {{ getDefaultItemText() }}\n                    </div>\n                </div>\n            </ng-template>\n            <ng-template [ngIf]=\"defaultItem && itemTemplate\">\n                <div\n                    class=\"k-list\"\n                    [ngClass]=\"optionLabelSizeClass\"\n                >\n                    <div class=\"k-list-optionlabel k-list-item\" [ngClass]=\"{ 'k-disabled': isDisabledDefaultItem }\" kendoDropDownsSelectable [index]=\"-1\">\n                        <ng-template\n                            [templateContext]=\"{\n                                templateRef: itemTemplate.templateRef,\n                                $implicit: defaultItem\n                            }\">\n                        </ng-template>\n                    </div>\n                </div>\n            </ng-template>\n            <!--header template-->\n            <ng-template *ngIf=\"headerTemplate\"\n                [templateContext]=\"{\n                    templateRef: headerTemplate.templateRef\n                }\">\n            </ng-template>\n            <!--list-->\n            <kendo-list\n                #optionsList\n                [size]=\"size\"\n                [rounded]=\"rounded\"\n                [id]=\"listBoxId\"\n                [optionPrefix]=\"optionPrefix\"\n                [data]=\"data\"\n                [textField]=\"textField\"\n                [valueField]=\"valueField\"\n                [template]=\"itemTemplate\"\n                [groupTemplate]=\"groupTemplate\"\n                [fixedGroupTemplate]=\"fixedGroupTemplate\"\n                [height]=\"listHeight\"\n                [show]=\"isOpen\"\n                [virtual]=\"virtual\"\n                (pageChange)=\"pageChange($event)\"\n                >\n            </kendo-list>\n            <!--no-data template-->\n            <div class=\"k-no-data\" *ngIf=\"data.length === 0\">\n                <ng-template [ngIf]=\"noDataTemplate\"\n                    [templateContext]=\"{\n                        templateRef: noDataTemplate ? noDataTemplate.templateRef : undefined\n                    }\">\n                </ng-template>\n                <ng-template [ngIf]=\"!noDataTemplate\">\n                    <div>{{ noDataText }}</div>\n                </ng-template>\n            </div>\n            <!--footer template-->\n            <ng-template *ngIf=\"footerTemplate\"\n                [templateContext]=\"{\n                    templateRef: footerTemplate.templateRef\n                }\">\n            </ng-template>\n        </ng-template>\n        <ng-template [ngIf]=\"isOpen\">\n            <kendo-resize-sensor (resize)=\"onResize()\"></kendo-resize-sensor>\n        </ng-template>\n        <ng-container #container></ng-container>\n  "
         }),
         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,
@@ -1366,7 +1648,6 @@ var DropDownListComponent = /** @class */ (function () {
             DataService,
             NgZone,
             Renderer2,
-            ElementRef,
             ChangeDetectorRef, Boolean])
     ], DropDownListComponent);
     return DropDownListComponent;