primeng 11.3.1 → 11.4.2

package/bundles/primeng-dropdown.umd.js

@@ -299,18 +299,21 @@
     function __importDefault(mod) {
         return (mod && mod.__esModule) ? mod : { default: mod };
     }
-    function __classPrivateFieldGet(receiver, privateMap) {
-        if (!privateMap.has(receiver)) {
-            throw new TypeError("attempted to get private field on non-instance");
-        }
-        return privateMap.get(receiver);
+    function __classPrivateFieldGet(receiver, state, kind, f) {
+        if (kind === "a" && !f)
+            throw new TypeError("Private accessor was defined without a getter");
+        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+            throw new TypeError("Cannot read private member from an object whose class did not declare it");
+        return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
     }
-    function __classPrivateFieldSet(receiver, privateMap, value) {
-        if (!privateMap.has(receiver)) {
-            throw new TypeError("attempted to set private field on non-instance");
-        }
-        privateMap.set(receiver, value);
-        return value;
+    function __classPrivateFieldSet(receiver, state, value, kind, f) {
+        if (kind === "m")
+            throw new TypeError("Private method is not writable");
+        if (kind === "a" && !f)
+            throw new TypeError("Private accessor was defined without a setter");
+        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+            throw new TypeError("Cannot write private member to an object whose class did not declare it");
+        return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
     }
 
     var DROPDOWN_VALUE_ACCESSOR = {
@@ -347,17 +350,20 @@
         onClick: [{ type: core.Output }]
     };
     var Dropdown = /** @class */ (function () {
-        function Dropdown(el, renderer, cd, zone, filterService) {
+        function Dropdown(el, renderer, cd, zone, filterService, config) {
             this.el = el;
             this.renderer = renderer;
             this.cd = cd;
             this.zone = zone;
             this.filterService = filterService;
+            this.config = config;
             this.scrollHeight = '200px';
             this.resetFilterOnHide = false;
             this.dropdownIcon = 'pi pi-chevron-down';
+            this.optionGroupChildren = "items";
             this.autoDisplayFirst = true;
-            this.emptyFilterMessage = 'No results found';
+            this.emptyFilterMessage = '';
+            this.emptyMessage = '';
             this.autoZIndex = true;
             this.baseZIndex = 0;
             this.showTransitionOptions = '.12s cubic-bezier(0, 0, 0.2, 1)';
@@ -368,6 +374,7 @@
             this.tooltipPositionStyle = 'absolute';
             this.autofocusFilter = true;
             this.onChange = new core.EventEmitter();
+            this.onFilter = new core.EventEmitter();
             this.onFocus = new core.EventEmitter();
             this.onBlur = new core.EventEmitter();
             this.onClick = new core.EventEmitter();
@@ -382,8 +389,11 @@
                 return this._disabled;
             },
             set: function (_disabled) {
-                if (_disabled)
+                if (_disabled) {
                     this.focused = false;
+                    if (this.overlayVisible)
+                        this.hide();
+                }
                 this._disabled = _disabled;
                 if (!this.cd.destroyed) {
                     this.cd.detectChanges();
@@ -403,6 +413,18 @@
                     case 'selectedItem':
                         _this.selectedItemTemplate = item.template;
                         break;
+                    case 'header':
+                        _this.headerTemplate = item.template;
+                        break;
+                    case 'footer':
+                        _this.footerTemplate = item.template;
+                        break;
+                    case 'emptyfilter':
+                        _this.emptyFilterTemplate = item.template;
+                        break;
+                    case 'empty':
+                        _this.emptyTemplate = item.template;
+                        break;
                     case 'group':
                         _this.groupTemplate = item.template;
                         break;
@@ -425,7 +447,6 @@
                 this.optionsToDisplay = this._options;
                 this.updateSelectedOption(this.value);
                 this.optionsChanged = true;
-                this.updateFilledState();
                 if (this._filterValue && this._filterValue.length) {
                     this.activateFilter();
                 }
@@ -456,6 +477,20 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(Dropdown.prototype, "emptyMessageLabel", {
+            get: function () {
+                return this.emptyMessage || this.config.getTranslation(api.TranslationKeys.EMPTY_MESSAGE);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(Dropdown.prototype, "emptyFilterMessageLabel", {
+            get: function () {
+                return this.emptyFilterMessage || this.config.getTranslation(api.TranslationKeys.EMPTY_FILTER_MESSAGE);
+            },
+            enumerable: false,
+            configurable: true
+        });
         Dropdown.prototype.updateEditableLabel = function () {
             if (this.editableInputViewChild && this.editableInputViewChild.nativeElement) {
                 this.editableInputViewChild.nativeElement.value = (this.selectedOption ? this.getOptionLabel(this.selectedOption) : this.value || '');
@@ -465,7 +500,7 @@
             return this.optionLabel ? utils.ObjectUtils.resolveFieldData(option, this.optionLabel) : (option.label != undefined ? option.label : option);
         };
         Dropdown.prototype.getOptionValue = function (option) {
-            return this.optionValue ? utils.ObjectUtils.resolveFieldData(option, this.optionValue) : (this.optionLabel ? option : option.value);
+            return this.optionValue ? utils.ObjectUtils.resolveFieldData(option, this.optionValue) : (this.optionLabel || option.value === undefined ? option : option.value);
         };
         Dropdown.prototype.isOptionDisabled = function (option) {
             return this.optionDisabled ? utils.ObjectUtils.resolveFieldData(option, this.optionDisabled) : (option.disabled !== undefined ? option.disabled : false);
@@ -484,7 +519,7 @@
                 this.accessibleViewChild.nativeElement.focus();
             }
             setTimeout(function () {
-                _this.hide(event);
+                _this.hide();
             }, 150);
         };
         Dropdown.prototype.selectItem = function (event, option) {
@@ -492,7 +527,6 @@
             if (this.selectedOption != option) {
                 this.selectedOption = option;
                 this.value = this.getOptionValue(option);
-                this.filled = true;
                 this.onModelChange(this.value);
                 this.updateEditableLabel();
                 this.onChange.emit({
@@ -541,7 +575,6 @@
             this.value = value;
             this.updateSelectedOption(value);
             this.updateEditableLabel();
-            this.updateFilledState();
             this.cd.markForCheck();
         };
         Dropdown.prototype.resetFilter = function () {
@@ -575,7 +608,7 @@
             this.onClick.emit(event);
             this.accessibleViewChild.nativeElement.focus();
             if (this.overlayVisible)
-                this.hide(event);
+                this.hide();
             else
                 this.show();
             this.cd.detectChanges();
@@ -588,12 +621,15 @@
         Dropdown.prototype.isOutsideClicked = function (event) {
             return !(this.el.nativeElement.isSameNode(event.target) || this.el.nativeElement.contains(event.target) || (this.overlay && this.overlay.contains(event.target)));
         };
+        Dropdown.prototype.isEmpty = function () {
+            return !this.optionsToDisplay || (this.optionsToDisplay && this.optionsToDisplay.length === 0);
+        };
         Dropdown.prototype.onEditableInputClick = function () {
             this.bindDocumentClickListener();
         };
         Dropdown.prototype.onEditableInputFocus = function (event) {
             this.focused = true;
-            this.hide(event);
+            this.hide();
             this.onFocus.emit(event);
         };
         Dropdown.prototype.onEditableInputChange = function (event) {
@@ -640,6 +676,7 @@
                     break;
                 case 'void':
                     this.onOverlayHide();
+                    this.onHide.emit(event);
                     break;
             }
         };
@@ -678,7 +715,7 @@
                 this.el.nativeElement.appendChild(this.overlay);
             }
         };
-        Dropdown.prototype.hide = function (event) {
+        Dropdown.prototype.hide = function () {
             this.overlayVisible = false;
             if (this.filter && this.resetFilterOnHide) {
                 this.resetFilter();
@@ -687,7 +724,6 @@
                 this.virtualAutoScrolled = false;
             }
             this.cd.markForCheck();
-            this.onHide.emit(event);
         };
         Dropdown.prototype.alignOverlay = function () {
             if (this.overlay) {
@@ -844,18 +880,18 @@
                 //enter
                 case 13:
                     if (!this.filter || (this.optionsToDisplay && this.optionsToDisplay.length > 0)) {
-                        this.hide(event);
+                        this.hide();
                     }
                     event.preventDefault();
                     break;
                 //escape and tab
                 case 27:
                 case 9:
-                    this.hide(event);
+                    this.hide();
                     break;
                 //search item based on keyboard input
                 default:
-                    if (search) {
+                    if (search && !event.metaKey) {
                         this.search(event);
                     }
                     break;
@@ -992,7 +1028,7 @@
                 return (index != -1) ? opts[index] : null;
             }
         };
-        Dropdown.prototype.onFilter = function (event) {
+        Dropdown.prototype.onFilterInputChange = function (event) {
             var inputValue = event.target.value;
             if (inputValue && inputValue.length) {
                 this._filterValue = inputValue;
@@ -1003,30 +1039,27 @@
                 this.optionsToDisplay = this.options;
             }
             this.optionsChanged = true;
+            this.onFilter.emit({ originalEvent: event, filter: this._filterValue });
         };
         Dropdown.prototype.activateFilter = function () {
-            var e_2, _a;
+            var e_2, _a, _b;
             var searchFields = (this.filterBy || this.optionLabel || 'label').split(',');
             if (this.options && this.options.length) {
                 if (this.group) {
                     var filteredGroups = [];
                     try {
-                        for (var _b = __values(this.options), _c = _b.next(); !_c.done; _c = _b.next()) {
-                            var optgroup = _c.value;
+                        for (var _c = __values(this.options), _d = _c.next(); !_d.done; _d = _c.next()) {
+                            var optgroup = _d.value;
                             var filteredSubOptions = this.filterService.filter(this.getOptionGroupChildren(optgroup), searchFields, this.filterValue, this.filterMatchMode, this.filterLocale);
                             if (filteredSubOptions && filteredSubOptions.length) {
-                                filteredGroups.push({
-                                    label: optgroup.label,
-                                    value: optgroup.value,
-                                    items: filteredSubOptions
-                                });
+                                filteredGroups.push(Object.assign(Object.assign({}, optgroup), (_b = {}, _b[this.optionGroupChildren] = filteredSubOptions, _b)));
                             }
                         }
                     }
                     catch (e_2_1) { e_2 = { error: e_2_1 }; }
                     finally {
                         try {
-                            if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                            if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
                         }
                         finally { if (e_2) throw e_2.error; }
                     }
@@ -1053,7 +1086,7 @@
                 var documentTarget = this.el ? this.el.nativeElement.ownerDocument : 'document';
                 this.documentClickListener = this.renderer.listen(documentTarget, 'click', function (event) {
                     if (_this.isOutsideClicked(event)) {
-                        _this.hide(event);
+                        _this.hide();
                         _this.unbindDocumentClickListener();
                     }
                     _this.cd.markForCheck();
@@ -1078,7 +1111,7 @@
         };
         Dropdown.prototype.onWindowResize = function () {
             if (!dom.DomHandler.isAndroid()) {
-                this.hide(event);
+                this.hide();
             }
         };
         Dropdown.prototype.bindScrollListener = function () {
@@ -1086,7 +1119,7 @@
             if (!this.scrollHandler) {
                 this.scrollHandler = new dom.ConnectedOverlayScrollHandler(this.containerViewChild.nativeElement, function (event) {
                     if (_this.overlayVisible) {
-                        _this.hide(event);
+                        _this.hide();
                     }
                 });
             }
@@ -1097,9 +1130,6 @@
                 this.scrollHandler.unbindScrollListener();
             }
         };
-        Dropdown.prototype.updateFilledState = function () {
-            this.filled = (this.selectedOption != null);
-        };
         Dropdown.prototype.clear = function (event) {
             this.value = null;
             this.onModelChange(this.value);
@@ -1109,7 +1139,6 @@
             });
             this.updateSelectedOption(this.value);
             this.updateEditableLabel();
-            this.updateFilledState();
         };
         Dropdown.prototype.onOverlayHide = function () {
             this.unbindDocumentClickListener();
@@ -1132,7 +1161,7 @@
     Dropdown.decorators = [
         { type: core.Component, args: [{
                     selector: 'p-dropdown',
-                    template: "\n         <div #container [ngClass]=\"{'p-dropdown p-component':true,\n            'p-disabled':disabled, 'p-dropdown-open':overlayVisible, 'p-focus':focused, 'p-dropdown-clearable': showClear && !disabled}\"\n            (click)=\"onMouseclick($event)\" [ngStyle]=\"style\" [class]=\"styleClass\">\n            <div class=\"p-hidden-accessible\">\n                <input #in [attr.id]=\"inputId\" type=\"text\" readonly (focus)=\"onInputFocus($event)\" aria-haspopup=\"listbox\"\n                    aria-haspopup=\"listbox\" [attr.aria-expanded]=\"overlayVisible\" [attr.aria-labelledby]=\"ariaLabelledBy\" (blur)=\"onInputBlur($event)\" (keydown)=\"onKeydown($event, true)\"\n                    [disabled]=\"disabled\" [attr.tabindex]=\"tabindex\" [attr.autofocus]=\"autofocus\">\n            </div>\n            <span [ngClass]=\"{'p-dropdown-label p-inputtext':true,'p-dropdown-label-empty':(label == null || label.length === 0)}\" *ngIf=\"!editable && (label != null)\" [pTooltip]=\"tooltip\" [tooltipPosition]=\"tooltipPosition\" [positionStyle]=\"tooltipPositionStyle\" [tooltipStyleClass]=\"tooltipStyleClass\">\n                <ng-container *ngIf=\"!selectedItemTemplate\">{{label||'empty'}}</ng-container>\n                <ng-container *ngTemplateOutlet=\"selectedItemTemplate; context: {$implicit: selectedOption}\"></ng-container>\n            </span>\n            <span [ngClass]=\"{'p-dropdown-label p-inputtext p-placeholder':true,'p-dropdown-label-empty': (placeholder == null || placeholder.length === 0)}\" *ngIf=\"!editable && (label == null)\">{{placeholder||'empty'}}</span>\n            <input #editableInput type=\"text\" [attr.maxlength]=\"maxlength\" class=\"p-dropdown-label p-inputtext\" *ngIf=\"editable\" [disabled]=\"disabled\" [attr.placeholder]=\"placeholder\"\n                aria-haspopup=\"listbox\" [attr.aria-expanded]=\"overlayVisible\" (click)=\"onEditableInputClick()\" (input)=\"onEditableInputChange($event)\" (focus)=\"onEditableInputFocus($event)\" (blur)=\"onInputBlur($event)\">\n            <i class=\"p-dropdown-clear-icon pi pi-times\" (click)=\"clear($event)\" *ngIf=\"value != null && showClear && !disabled\"></i>\n            <div class=\"p-dropdown-trigger\" role=\"button\" aria-haspopup=\"listbox\" [attr.aria-expanded]=\"overlayVisible\">\n                <span class=\"p-dropdown-trigger-icon\" [ngClass]=\"dropdownIcon\"></span>\n            </div>\n            <div *ngIf=\"overlayVisible\" [ngClass]=\"'p-dropdown-panel p-component'\" [@overlayAnimation]=\"{value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}\" (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\" [ngStyle]=\"panelStyle\" [class]=\"panelStyleClass\">\n                <div class=\"p-dropdown-header\" *ngIf=\"filter\" >\n                    <div class=\"p-dropdown-filter-container\" (click)=\"$event.stopPropagation()\">\n                        <input #filter type=\"text\" autocomplete=\"off\" [value]=\"filterValue||''\" class=\"p-dropdown-filter p-inputtext p-component\" [attr.placeholder]=\"filterPlaceholder\"\n                        (keydown.enter)=\"$event.preventDefault()\" (keydown)=\"onKeydown($event, false)\" (input)=\"onFilter($event)\" [attr.aria-label]=\"ariaFilterLabel\">\n                        <span class=\"p-dropdown-filter-icon pi pi-search\"></span>\n                    </div>\n                </div>\n                <div class=\"p-dropdown-items-wrapper\" [style.max-height]=\"virtualScroll ? 'auto' : (scrollHeight||'auto')\">\n                    <ul class=\"p-dropdown-items\" role=\"listbox\">\n                        <ng-container *ngIf=\"group\">\n                            <ng-template ngFor let-optgroup [ngForOf]=\"optionsToDisplay\">\n                                <li class=\"p-dropdown-item-group\">\n                                    <span *ngIf=\"!groupTemplate\">{{getOptionGroupLabel(optgroup)||'empty'}}</span>\n                                    <ng-container *ngTemplateOutlet=\"groupTemplate; context: {$implicit: optgroup}\"></ng-container>\n                                </li>\n                                <ng-container *ngTemplateOutlet=\"itemslist; context: {$implicit: getOptionGroupChildren(optgroup), selectedOption: selectedOption}\"></ng-container>\n                            </ng-template>\n                        </ng-container>\n                        <ng-container *ngIf=\"!group\">\n                            <ng-container *ngTemplateOutlet=\"itemslist; context: {$implicit: optionsToDisplay, selectedOption: selectedOption}\"></ng-container>\n                        </ng-container>\n                        <ng-template #itemslist let-options let-selectedOption=\"selectedOption\">\n                            <ng-container *ngIf=\"!virtualScroll; else virtualScrollList\">\n                                <ng-template ngFor let-option let-i=\"index\" [ngForOf]=\"options\">\n                                    <p-dropdownItem [option]=\"option\" [selected]=\"selectedOption == option\" [label]=\"getOptionLabel(option)\" [disabled]=\"isOptionDisabled(option)\"\n                                                    (onClick)=\"onItemClick($event)\"\n                                                    [template]=\"itemTemplate\"></p-dropdownItem>\n                                </ng-template>\n                            </ng-container>\n                            <ng-template #virtualScrollList>\n                                <cdk-virtual-scroll-viewport (scrolledIndexChange)=\"scrollToSelectedVirtualScrollElement()\" #viewport [ngStyle]=\"{'height': scrollHeight}\" [itemSize]=\"itemSize\" *ngIf=\"virtualScroll && optionsToDisplay && optionsToDisplay.length\">\n                                    <ng-container *cdkVirtualFor=\"let option of options; let i = index; let c = count; let f = first; let l = last; let e = even; let o = odd\">\n                                        <p-dropdownItem [option]=\"option\" [selected]=\"selectedOption == option\" [label]=\"getOptionLabel(option)\" [disabled]=\"isOptionDisabled(option)\"\n                                                                   (onClick)=\"onItemClick($event)\"\n                                                                   [template]=\"itemTemplate\"></p-dropdownItem>\n                                    </ng-container>\n                                </cdk-virtual-scroll-viewport>\n                            </ng-template>\n                        </ng-template>\n                        <li *ngIf=\"filter && (!optionsToDisplay || (optionsToDisplay && optionsToDisplay.length === 0))\" class=\"p-dropdown-empty-message\">{{emptyFilterMessage}}</li>\n                    </ul>\n                </div>\n            </div>\n        </div>\n    ",
+                    template: "\n         <div #container [ngClass]=\"{'p-dropdown p-component':true,\n            'p-disabled':disabled, 'p-dropdown-open':overlayVisible, 'p-focus':focused, 'p-dropdown-clearable': showClear && !disabled}\"\n            (click)=\"onMouseclick($event)\" [ngStyle]=\"style\" [class]=\"styleClass\">\n            <div class=\"p-hidden-accessible\">\n                <input #in [attr.id]=\"inputId\" type=\"text\" readonly (focus)=\"onInputFocus($event)\" aria-haspopup=\"listbox\"\n                    aria-haspopup=\"listbox\" [attr.aria-expanded]=\"overlayVisible\" [attr.aria-labelledby]=\"ariaLabelledBy\" (blur)=\"onInputBlur($event)\" (keydown)=\"onKeydown($event, true)\"\n                    [disabled]=\"disabled\" [attr.tabindex]=\"tabindex\" [attr.autofocus]=\"autofocus\">\n            </div>\n            <span [ngClass]=\"{'p-dropdown-label p-inputtext':true,'p-dropdown-label-empty':(label == null || label.length === 0)}\" *ngIf=\"!editable && (label != null)\" [pTooltip]=\"tooltip\" [tooltipPosition]=\"tooltipPosition\" [positionStyle]=\"tooltipPositionStyle\" [tooltipStyleClass]=\"tooltipStyleClass\">\n                <ng-container *ngIf=\"!selectedItemTemplate\">{{label||'empty'}}</ng-container>\n                <ng-container *ngTemplateOutlet=\"selectedItemTemplate; context: {$implicit: selectedOption}\"></ng-container>\n            </span>\n            <span [ngClass]=\"{'p-dropdown-label p-inputtext p-placeholder':true,'p-dropdown-label-empty': (placeholder == null || placeholder.length === 0)}\" *ngIf=\"!editable && (label == null)\">{{placeholder||'empty'}}</span>\n            <input #editableInput type=\"text\" [attr.maxlength]=\"maxlength\" class=\"p-dropdown-label p-inputtext\" *ngIf=\"editable\" [disabled]=\"disabled\" [attr.placeholder]=\"placeholder\"\n                aria-haspopup=\"listbox\" [attr.aria-expanded]=\"overlayVisible\" (click)=\"onEditableInputClick()\" (input)=\"onEditableInputChange($event)\" (focus)=\"onEditableInputFocus($event)\" (blur)=\"onInputBlur($event)\">\n            <i class=\"p-dropdown-clear-icon pi pi-times\" (click)=\"clear($event)\" *ngIf=\"value != null && showClear && !disabled\"></i>\n            <div class=\"p-dropdown-trigger\" role=\"button\" aria-haspopup=\"listbox\" [attr.aria-expanded]=\"overlayVisible\">\n                <span class=\"p-dropdown-trigger-icon\" [ngClass]=\"dropdownIcon\"></span>\n            </div>\n            <div *ngIf=\"overlayVisible\" [ngClass]=\"'p-dropdown-panel p-component'\" [@overlayAnimation]=\"{value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}\" (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\" [ngStyle]=\"panelStyle\" [class]=\"panelStyleClass\">\n                <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n                <div class=\"p-dropdown-header\" *ngIf=\"filter\" >\n                    <div class=\"p-dropdown-filter-container\" (click)=\"$event.stopPropagation()\">\n                        <input #filter type=\"text\" autocomplete=\"off\" [value]=\"filterValue||''\" class=\"p-dropdown-filter p-inputtext p-component\" [attr.placeholder]=\"filterPlaceholder\"\n                        (keydown.enter)=\"$event.preventDefault()\" (keydown)=\"onKeydown($event, false)\" (input)=\"onFilterInputChange($event)\" [attr.aria-label]=\"ariaFilterLabel\">\n                        <span class=\"p-dropdown-filter-icon pi pi-search\"></span>\n                    </div>\n                </div>\n                <div class=\"p-dropdown-items-wrapper\" [style.max-height]=\"virtualScroll ? 'auto' : (scrollHeight||'auto')\">\n                    <ul class=\"p-dropdown-items\" [ngClass]=\"{'p-dropdown-virtualscroll': virtualScroll}\" role=\"listbox\">\n                        <ng-container *ngIf=\"group\">\n                            <ng-template ngFor let-optgroup [ngForOf]=\"optionsToDisplay\">\n                                <li class=\"p-dropdown-item-group\">\n                                    <span *ngIf=\"!groupTemplate\">{{getOptionGroupLabel(optgroup)||'empty'}}</span>\n                                    <ng-container *ngTemplateOutlet=\"groupTemplate; context: {$implicit: optgroup}\"></ng-container>\n                                </li>\n                                <ng-container *ngTemplateOutlet=\"itemslist; context: {$implicit: getOptionGroupChildren(optgroup), selectedOption: selectedOption}\"></ng-container>\n                            </ng-template>\n                        </ng-container>\n                        <ng-container *ngIf=\"!group\">\n                            <ng-container *ngTemplateOutlet=\"itemslist; context: {$implicit: optionsToDisplay, selectedOption: selectedOption}\"></ng-container>\n                        </ng-container>\n                        <ng-template #itemslist let-options let-selectedOption=\"selectedOption\">\n                            <ng-container *ngIf=\"!virtualScroll; else virtualScrollList\">\n                                <ng-template ngFor let-option let-i=\"index\" [ngForOf]=\"options\">\n                                    <p-dropdownItem [option]=\"option\" [selected]=\"selectedOption == option\" [label]=\"getOptionLabel(option)\" [disabled]=\"isOptionDisabled(option)\"\n                                                    (onClick)=\"onItemClick($event)\"\n                                                    [template]=\"itemTemplate\"></p-dropdownItem>\n                                </ng-template>\n                            </ng-container>\n                            <ng-template #virtualScrollList>\n                                <cdk-virtual-scroll-viewport (scrolledIndexChange)=\"scrollToSelectedVirtualScrollElement()\" #viewport [ngStyle]=\"{'height': scrollHeight}\" [itemSize]=\"itemSize\" *ngIf=\"virtualScroll && optionsToDisplay && optionsToDisplay.length\">\n                                    <ng-container *cdkVirtualFor=\"let option of options; let i = index; let c = count; let f = first; let l = last; let e = even; let o = odd\">\n                                        <p-dropdownItem [option]=\"option\" [selected]=\"selectedOption == option\" [label]=\"getOptionLabel(option)\" [disabled]=\"isOptionDisabled(option)\"\n                                                                   (onClick)=\"onItemClick($event)\"\n                                                                   [template]=\"itemTemplate\"></p-dropdownItem>\n                                    </ng-container>\n                                </cdk-virtual-scroll-viewport>\n                            </ng-template>\n                        </ng-template>\n                        <li *ngIf=\"filterValue && isEmpty()\" class=\"p-dropdown-empty-message\">\n                            <ng-container *ngIf=\"!emptyFilterTemplate && !emptyTemplate; else emptyFilter\">\n                                {{emptyFilterMessageLabel}}\n                            </ng-container>\n                            <ng-container #emptyFilter *ngTemplateOutlet=\"emptyFilterTemplate || emptyTemplate\"></ng-container>\n                        </li>\n                        <li *ngIf=\"!filterValue && isEmpty()\" class=\"p-dropdown-empty-message\">\n                            <ng-container *ngIf=\"!emptyTemplate; else empty\">\n                                {{emptyMessageLabel}}\n                            </ng-container>\n                            <ng-container #empty *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n                        </li>\n                    </ul>\n                </div>\n                <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n            </div>\n        </div>\n    ",
                     animations: [
                         animations.trigger('overlayAnimation', [
                             animations.transition(':enter', [
@@ -1145,7 +1174,7 @@
                         ])
                     ],
                     host: {
-                        '[class.p-inputwrapper-filled]': 'filled',
+                        '[class.p-inputwrapper-filled]': 'value',
                         '[class.p-inputwrapper-focus]': 'focused || overlayVisible'
                     },
                     providers: [DROPDOWN_VALUE_ACCESSOR],
@@ -1159,7 +1188,8 @@
         { type: core.Renderer2 },
         { type: core.ChangeDetectorRef },
         { type: core.NgZone },
-        { type: api.FilterService }
+        { type: api.FilterService },
+        { type: api.PrimeNGConfig }
     ]; };
     Dropdown.propDecorators = {
         scrollHeight: [{ type: core.Input }],
@@ -1193,6 +1223,7 @@
         group: [{ type: core.Input }],
         showClear: [{ type: core.Input }],
         emptyFilterMessage: [{ type: core.Input }],
+        emptyMessage: [{ type: core.Input }],
         virtualScroll: [{ type: core.Input }],
         itemSize: [{ type: core.Input }],
         autoZIndex: [{ type: core.Input }],
@@ -1209,6 +1240,7 @@
         tooltipStyleClass: [{ type: core.Input }],
         autofocusFilter: [{ type: core.Input }],
         onChange: [{ type: core.Output }],
+        onFilter: [{ type: core.Output }],
         onFocus: [{ type: core.Output }],
         onBlur: [{ type: core.Output }],
         onClick: [{ type: core.Output }],