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

package/dist/npm/dropdownlist/dropdownlist.component.js

@@ -61,7 +61,8 @@ exports.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;
@@ -70,13 +71,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-" + util_1.guid();
         /**
          * Sets the height of the options list. By default, `listHeight` is 200px.
          *
@@ -154,7 +150,12 @@ var DropDownListComponent = /** @class */ (function () {
          * Fires each time the DropDownList gets blurred.
          */
         this.onBlur = new core_1.EventEmitter();
-        this.widgetClasses = true;
+        this.hostClasses = true;
+        /**
+         * @hidden
+         */
+        this.focusableId = "k-" + util_1.guid();
+        this.role = 'listbox';
         this.groupIndices = [];
         this.listBoxId = util_1.guid();
         this.optionPrefix = util_1.guid();
@@ -166,16 +167,20 @@ var DropDownListComponent = /** @class */ (function () {
         this.last = "";
         this.filterFocused = new core_1.EventEmitter();
         this.filterBlurred = new core_1.EventEmitter();
-        this.wrapperFocused = new core_1.EventEmitter();
-        this.wrapperBlurred = new core_1.EventEmitter();
+        this.hostElementFocused = new core_1.EventEmitter();
+        this.hostElementBlurred = new core_1.EventEmitter();
         this.selectionSubscription = new rxjs_1.Subscription();
         this._open = false;
         this._popupSettings = { animate: true };
+        this._size = 'medium';
+        this._rounded = 'medium';
+        this._fillMode = 'solid';
         kendo_licensing_1.validatePackage(package_metadata_1.packageMetadata);
         this.direction = localization.rtl ? 'rtl' : 'ltr';
         this.data = [];
         this.subscribeEvents();
         this.subscribeTouchEvents();
+        this.subscribeFocusEvents();
         this.popupMouseDownHandler = this.onMouseDown.bind(this);
     }
     DropDownListComponent_1 = DropDownListComponent;
@@ -384,11 +389,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, util_1.getSizeClass('picker', this.size));
+            if (size) {
+                this.renderer.addClass(this.wrapper.nativeElement, util_1.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, util_1.getRoundedClass(this.rounded));
+            if (rounded) {
+                this.renderer.addClass(this.wrapper.nativeElement, util_1.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, util_1.getFillModeClass('picker', this.fillMode));
+            if (fillMode) {
+                this.renderer.addClass(this.wrapper.nativeElement, util_1.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
@@ -399,9 +481,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 (kendo_angular_common_1.hasObservers(this.onFocus)) {
@@ -411,6 +497,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
      */
@@ -471,30 +631,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,
@@ -502,7 +644,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;
@@ -511,6 +653,7 @@ var DropDownListComponent = /** @class */ (function () {
         });
         this.setMessages();
         this.assignAriaDescribedBy();
+        this.setComponentClasses();
     };
     /**
      * @hidden
@@ -692,6 +835,36 @@ var DropDownListComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(DropDownListComponent.prototype, "selectButtonClasses", {
+        /**
+         * @hidden
+         */
+        get: function () {
+            return (this.size ? util_1.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 ? util_1.getSizeClass('input', this.size) : '') + " " + (this.fillMode ? 'k-input-' + this.fillMode : '') + " " + (this.rounded ? util_1.getRoundedClass(this.rounded) : '');
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DropDownListComponent.prototype, "optionLabelSizeClass", {
+        /**
+         * @hidden
+         */
+        get: function () {
+            return "" + (this.size ? util_1.getSizeClass('list', this.size) : '');
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(DropDownListComponent.prototype, "listContainerClasses", {
         /**
          * @hidden
@@ -839,13 +1012,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(operators_1.concatMap(function () { return rxjs_1.interval(10).pipe(operators_1.take(1), operators_1.takeUntil(_this.wrapperFocused)); }))
+        this.filterBlurredSubscription = this.filterBlurred.pipe(operators_1.concatMap(function () { return rxjs_1.interval(10).pipe(operators_1.take(1), operators_1.takeUntil(_this.hostElementFocused)); }))
             .subscribe(function () {
-            _this.wrapperBlurred.emit();
+            _this.hostElementBlurred.emit();
         });
         this._zone.runOutsideAngular(function () {
             _this.componentBlurredSubscription =
-                rxjs_1.merge(_this.wrapperBlurred.pipe(operators_1.concatMap(function () { return rxjs_1.interval(10).pipe(operators_1.take(1), operators_1.takeUntil(_this.filterFocused)); })), _this.navigationService.tab).pipe(operators_1.tap(function (event) { return event instanceof navigation_service_1.NavigationEvent && _this.focus(); }), operators_1.filter(function () { return _this.isFocused; }))
+                rxjs_1.merge(_this.hostElementBlurred.pipe(operators_1.concatMap(function () { return rxjs_1.interval(10).pipe(operators_1.take(1), operators_1.takeUntil(_this.filterFocused)); })), _this.navigationService.tab).pipe(operators_1.tap(function (event) { return event instanceof navigation_service_1.NavigationEvent && _this.focus(); }), operators_1.filter(function () { return _this.isFocused; }))
                     .subscribe(function () { return _this.componentBlur(); });
         });
     };
@@ -858,7 +1031,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 && !util_1.inDropDown(_this.hostElement, target, _this.popupRef)) {
+                if (_this.isFocused && !util_1.inDropDown(_this.wrapper, target, _this.popupRef)) {
                     _this._zone.run(function () {
                         if (_this.filterFocused) {
                             // Close popup if filter is focused
@@ -870,6 +1043,25 @@ var DropDownListComponent = /** @class */ (function () {
             });
         });
     };
+    DropDownListComponent.prototype.subscribeFocusEvents = function () {
+        var _this = this;
+        if (kendo_angular_common_1.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 (kendo_angular_common_1.isDocumentAvailable()) {
+            var useCapture = true;
+            document.removeEventListener('focus', this.focusComponent, useCapture);
+            document.removeEventListener('blur', this.blurComponent, useCapture);
+        }
+    };
     DropDownListComponent.prototype.unsubscribeEvents = function () {
         if (!kendo_angular_common_1.isDocumentAvailable()) {
             return;
@@ -881,6 +1073,7 @@ var DropDownListComponent = /** @class */ (function () {
         this.escSubscription.unsubscribe();
         this.componentBlurredSubscription.unsubscribe();
         this.filterBlurredSubscription.unsubscribe();
+        this.unSubscribeFocusEvents();
         if (this.touchstartDisposeHandler) {
             this.touchstartDisposeHandler();
         }
@@ -973,7 +1166,7 @@ var DropDownListComponent = /** @class */ (function () {
             kendo_angular_common_1.hasObservers(this.close) ||
             kendo_angular_common_1.hasObservers(this.onBlur) ||
             kendo_angular_common_1.hasObservers(this.filterChange) ||
-            util_1.isUntouched(this.hostElement.nativeElement)) {
+            util_1.isUntouched(this.wrapper.nativeElement)) {
             this._zone.run(function () {
                 if (valueHasChanged) {
                     _this.selectionService.change(_this.selectionService.selected[0]);
@@ -1157,11 +1350,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, util_1.getSizeClass('picker', this.size));
+        }
+        if (this.rounded) {
+            this.renderer.addClass(this.wrapper.nativeElement, util_1.getRoundedClass(this.rounded));
+        }
+        if (this.fillMode) {
+            this.renderer.addClass(this.wrapper.nativeElement, util_1.getFillModeClass('picker', this.fillMode));
+        }
+    };
     var DropDownListComponent_1;
-    tslib_1.__decorate([
-        core_1.Input(),
-        tslib_1.__metadata("design:type", String)
-    ], DropDownListComponent.prototype, "focusableId", void 0);
     tslib_1.__decorate([
         core_1.Input(),
         tslib_1.__metadata("design:type", String)
@@ -1245,6 +1445,21 @@ var DropDownListComponent = /** @class */ (function () {
         tslib_1.__metadata("design:type", Number),
         tslib_1.__metadata("design:paramtypes", [Number])
     ], DropDownListComponent.prototype, "tabIndex", null);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], DropDownListComponent.prototype, "size", null);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], DropDownListComponent.prototype, "rounded", null);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], DropDownListComponent.prototype, "fillMode", null);
     tslib_1.__decorate([
         core_1.Output(),
         tslib_1.__metadata("design:type", core_1.EventEmitter)
@@ -1317,24 +1532,90 @@ var DropDownListComponent = /** @class */ (function () {
         core_1.ViewChild('popupTemplate', { static: true }),
         tslib_1.__metadata("design:type", core_1.TemplateRef)
     ], DropDownListComponent.prototype, "popupTemplate", void 0);
-    tslib_1.__decorate([
-        core_1.ViewChild('wrapper', { static: true }),
-        tslib_1.__metadata("design:type", core_1.ElementRef)
-    ], DropDownListComponent.prototype, "wrapper", void 0);
     tslib_1.__decorate([
         core_1.ViewChild('optionsList', { static: false }),
         tslib_1.__metadata("design:type", list_component_1.ListComponent)
     ], DropDownListComponent.prototype, "optionsList", void 0);
     tslib_1.__decorate([
-        core_1.HostBinding('class.k-widget'),
-        core_1.HostBinding('class.k-dropdown'),
+        core_1.HostBinding('class.k-dropdownlist'),
+        core_1.HostBinding('class.k-picker'),
         tslib_1.__metadata("design:type", Boolean)
-    ], DropDownListComponent.prototype, "widgetClasses", void 0);
+    ], DropDownListComponent.prototype, "hostClasses", void 0);
+    tslib_1.__decorate([
+        core_1.HostBinding('class.k-disabled'),
+        core_1.HostBinding('attr.aria-disabled'),
+        tslib_1.__metadata("design:type", Boolean),
+        tslib_1.__metadata("design:paramtypes", [])
+    ], DropDownListComponent.prototype, "isDisabled", null);
+    tslib_1.__decorate([
+        core_1.HostBinding('class.k-loading'),
+        tslib_1.__metadata("design:type", Boolean),
+        tslib_1.__metadata("design:paramtypes", [])
+    ], DropDownListComponent.prototype, "isLoading", null);
+    tslib_1.__decorate([
+        core_1.Input('id'),
+        core_1.HostBinding('attr.id'),
+        tslib_1.__metadata("design:type", String)
+    ], DropDownListComponent.prototype, "focusableId", void 0);
     tslib_1.__decorate([
         core_1.HostBinding('attr.dir'),
         tslib_1.__metadata("design:type", String),
         tslib_1.__metadata("design:paramtypes", [])
     ], DropDownListComponent.prototype, "dir", null);
+    tslib_1.__decorate([
+        core_1.HostBinding('attr.tabindex'),
+        tslib_1.__metadata("design:type", Number),
+        tslib_1.__metadata("design:paramtypes", [])
+    ], DropDownListComponent.prototype, "hostTabIndex", null);
+    tslib_1.__decorate([
+        core_1.HostBinding('attr.readonly'),
+        core_1.HostBinding('attr.aria-readonly'),
+        tslib_1.__metadata("design:type", Boolean),
+        tslib_1.__metadata("design:paramtypes", [])
+    ], DropDownListComponent.prototype, "isReadonly", null);
+    tslib_1.__decorate([
+        core_1.HostBinding('attr.role'),
+        core_1.HostBinding('attr.aria-haspopup'),
+        tslib_1.__metadata("design:type", String)
+    ], DropDownListComponent.prototype, "role", void 0);
+    tslib_1.__decorate([
+        core_1.HostBinding('attr.aria-expanded'),
+        tslib_1.__metadata("design:type", Boolean),
+        tslib_1.__metadata("design:paramtypes", [])
+    ], DropDownListComponent.prototype, "isAriaExpanded", null);
+    tslib_1.__decorate([
+        core_1.HostBinding('attr.aria-owns'),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [])
+    ], DropDownListComponent.prototype, "hostAriaOwns", null);
+    tslib_1.__decorate([
+        core_1.HostBinding('attr.aria-activedescendant'),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [])
+    ], DropDownListComponent.prototype, "hostAriaActivedescendant", null);
+    tslib_1.__decorate([
+        core_1.HostBinding('attr.aria-label'),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [])
+    ], DropDownListComponent.prototype, "hostNoDataLabel", null);
+    tslib_1.__decorate([
+        core_1.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([
+        core_1.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([
+        core_1.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([
         core_1.Component({
             exportAs: 'kendoDropDownList',
@@ -1357,10 +1638,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, core_1.Optional()), tslib_1.__param(10, core_1.Inject(touch_enabled_1.TOUCH_ENABLED)),
-        tslib_1.__metadata("design:paramtypes", [kendo_angular_l10n_1.LocalizationService,
+        tslib_1.__metadata("design:paramtypes", [core_1.ElementRef,
+            kendo_angular_l10n_1.LocalizationService,
             kendo_angular_popup_1.PopupService,
             selection_service_1.SelectionService,
             navigation_service_1.NavigationService,
@@ -1368,7 +1650,6 @@ var DropDownListComponent = /** @class */ (function () {
             data_service_1.DataService,
             core_1.NgZone,
             core_1.Renderer2,
-            core_1.ElementRef,
             core_1.ChangeDetectorRef, Boolean])
     ], DropDownListComponent);
     return DropDownListComponent;