primeng 11.4.4 → 12.0.1

package/fesm2015/primeng-dropdown.js

@@ -1,12 +1,18 @@
+import * as i4 from '@angular/cdk/scrolling';
 import { CdkVirtualScrollViewport, ScrollingModule } from '@angular/cdk/scrolling';
-import { forwardRef, EventEmitter, Component, Input, Output, ChangeDetectionStrategy, ViewEncapsulation, ElementRef, Renderer2, ChangeDetectorRef, NgZone, ViewChild, ContentChildren, NgModule } from '@angular/core';
+import * as i0 from '@angular/core';
+import { forwardRef, EventEmitter, Component, Input, Output, ChangeDetectionStrategy, ViewEncapsulation, ViewChild, ContentChildren, NgModule } from '@angular/core';
 import { trigger, transition, style, animate } from '@angular/animations';
+import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import { TranslationKeys, FilterService, PrimeNGConfig, PrimeTemplate, SharedModule } from 'primeng/api';
+import * as i3 from 'primeng/api';
+import { TranslationKeys, PrimeTemplate, SharedModule } from 'primeng/api';
 import { DomHandler, ConnectedOverlayScrollHandler } from 'primeng/dom';
 import { ObjectUtils } from 'primeng/utils';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import * as i5 from 'primeng/tooltip';
 import { TooltipModule } from 'primeng/tooltip';
+import * as i1 from 'primeng/ripple';
 import { RippleModule } from 'primeng/ripple';
 
 const DROPDOWN_VALUE_ACCESSOR = {
@@ -25,10 +31,21 @@ class DropdownItem {
         });
     }
 }
-DropdownItem.decorators = [
-    { type: Component, args: [{
-                selector: 'p-dropdownItem',
-                template: `
+DropdownItem.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: DropdownItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DropdownItem.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: DropdownItem, selector: "p-dropdownItem", inputs: { option: "option", selected: "selected", label: "label", disabled: "disabled", visible: "visible", itemSize: "itemSize", template: "template" }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
+        <li (click)="onOptionClick($event)" role="option" pRipple
+            [attr.aria-label]="label" [attr.aria-selected]="selected"
+            [ngStyle]="{'height': itemSize + 'px'}"
+            [ngClass]="{'p-dropdown-item':true, 'p-highlight': selected, 'p-disabled': disabled}">
+            <span *ngIf="!template">{{label||'empty'}}</span>
+            <ng-container *ngTemplateOutlet="template; context: {$implicit: option}"></ng-container>
+        </li>
+    `, isInline: true, directives: [{ type: i1.Ripple, selector: "[pRipple]" }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: DropdownItem, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'p-dropdownItem',
+                    template: `
         <li (click)="onOptionClick($event)" role="option" pRipple
             [attr.aria-label]="label" [attr.aria-selected]="selected"
             [ngStyle]="{'height': itemSize + 'px'}"
@@ -37,18 +54,24 @@ DropdownItem.decorators = [
             <ng-container *ngTemplateOutlet="template; context: {$implicit: option}"></ng-container>
         </li>
     `
-            },] }
-];
-DropdownItem.propDecorators = {
-    option: [{ type: Input }],
-    selected: [{ type: Input }],
-    label: [{ type: Input }],
-    disabled: [{ type: Input }],
-    visible: [{ type: Input }],
-    itemSize: [{ type: Input }],
-    template: [{ type: Input }],
-    onClick: [{ type: Output }]
-};
+                }]
+        }], propDecorators: { option: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], visible: [{
+                type: Input
+            }], itemSize: [{
+                type: Input
+            }], template: [{
+                type: Input
+            }], onClick: [{
+                type: Output
+            }] } });
 class Dropdown {
     constructor(el, renderer, cd, zone, filterService, config) {
         this.el = el;
@@ -166,6 +189,9 @@ class Dropdown {
     get emptyFilterMessageLabel() {
         return this.emptyFilterMessage || this.config.getTranslation(TranslationKeys.EMPTY_FILTER_MESSAGE);
     }
+    get filled() {
+        return this.value || this.value != null || this.value != undefined;
+    }
     updateEditableLabel() {
         if (this.editableInputViewChild && this.editableInputViewChild.nativeElement) {
             this.editableInputViewChild.nativeElement.value = (this.selectedOption ? this.getOptionLabel(this.selectedOption) : this.value || '');
@@ -448,7 +474,7 @@ class Dropdown {
     findNextEnabledOption(index) {
         let nextEnabledOption;
         if (this.optionsToDisplay && this.optionsToDisplay.length) {
-            for (let i = (index + 1); index < (this.optionsToDisplay.length - 1); i++) {
+            for (let i = (index + 1); i < this.optionsToDisplay.length; i++) {
                 let option = this.optionsToDisplay[i];
                 if (this.isOptionDisabled(option)) {
                     continue;
@@ -498,7 +524,9 @@ class Dropdown {
                             }
                         }
                         else {
-                            this.selectItem(event, this.getOptionGroupChildren(this.optionsToDisplay[0])[0]);
+                            if (this.optionsToDisplay && this.optionsToDisplay.length > 0) {
+                                this.selectItem(event, this.getOptionGroupChildren(this.optionsToDisplay[0])[0]);
+                            }
                         }
                     }
                     else {
@@ -804,10 +832,101 @@ class Dropdown {
         this.onOverlayHide();
     }
 }
-Dropdown.decorators = [
-    { type: Component, args: [{
-                selector: 'p-dropdown',
-                template: `
+Dropdown.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: Dropdown, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i3.FilterService }, { token: i3.PrimeNGConfig }], target: i0.ɵɵFactoryTarget.Component });
+Dropdown.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: Dropdown, selector: "p-dropdown", inputs: { scrollHeight: "scrollHeight", filter: "filter", name: "name", style: "style", panelStyle: "panelStyle", styleClass: "styleClass", panelStyleClass: "panelStyleClass", readonly: "readonly", required: "required", editable: "editable", appendTo: "appendTo", tabindex: "tabindex", placeholder: "placeholder", filterPlaceholder: "filterPlaceholder", filterLocale: "filterLocale", inputId: "inputId", selectId: "selectId", dataKey: "dataKey", filterBy: "filterBy", autofocus: "autofocus", resetFilterOnHide: "resetFilterOnHide", dropdownIcon: "dropdownIcon", optionLabel: "optionLabel", optionValue: "optionValue", optionDisabled: "optionDisabled", optionGroupLabel: "optionGroupLabel", optionGroupChildren: "optionGroupChildren", autoDisplayFirst: "autoDisplayFirst", group: "group", showClear: "showClear", emptyFilterMessage: "emptyFilterMessage", emptyMessage: "emptyMessage", virtualScroll: "virtualScroll", itemSize: "itemSize", autoZIndex: "autoZIndex", baseZIndex: "baseZIndex", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions", ariaFilterLabel: "ariaFilterLabel", ariaLabelledBy: "ariaLabelledBy", filterMatchMode: "filterMatchMode", maxlength: "maxlength", tooltip: "tooltip", tooltipPosition: "tooltipPosition", tooltipPositionStyle: "tooltipPositionStyle", tooltipStyleClass: "tooltipStyleClass", autofocusFilter: "autofocusFilter", disabled: "disabled", options: "options", filterValue: "filterValue" }, outputs: { onChange: "onChange", onFilter: "onFilter", onFocus: "onFocus", onBlur: "onBlur", onClick: "onClick", onShow: "onShow", onHide: "onHide" }, host: { properties: { "class.p-inputwrapper-filled": "filled", "class.p-inputwrapper-focus": "focused || overlayVisible" } }, providers: [DROPDOWN_VALUE_ACCESSOR], queries: [{ propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "containerViewChild", first: true, predicate: ["container"], descendants: true }, { propertyName: "filterViewChild", first: true, predicate: ["filter"], descendants: true }, { propertyName: "accessibleViewChild", first: true, predicate: ["in"], descendants: true }, { propertyName: "viewPort", first: true, predicate: CdkVirtualScrollViewport, descendants: true }, { propertyName: "editableInputViewChild", first: true, predicate: ["editableInput"], descendants: true }], ngImport: i0, template: `
+         <div #container [ngClass]="{'p-dropdown p-component':true,
+            'p-disabled':disabled, 'p-dropdown-open':overlayVisible, 'p-focus':focused, 'p-dropdown-clearable': showClear && !disabled}"
+            (click)="onMouseclick($event)" [ngStyle]="style" [class]="styleClass">
+            <div class="p-hidden-accessible">
+                <input #in [attr.id]="inputId" type="text" readonly (focus)="onInputFocus($event)" aria-haspopup="listbox"
+                    aria-haspopup="listbox" [attr.aria-expanded]="overlayVisible" [attr.aria-labelledby]="ariaLabelledBy" (blur)="onInputBlur($event)" (keydown)="onKeydown($event, true)"
+                    [disabled]="disabled" [attr.tabindex]="tabindex" [attr.autofocus]="autofocus">
+            </div>
+            <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">
+                <ng-container *ngIf="!selectedItemTemplate">{{label||'empty'}}</ng-container>
+                <ng-container *ngTemplateOutlet="selectedItemTemplate; context: {$implicit: selectedOption}"></ng-container>
+            </span>
+            <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>
+            <input #editableInput type="text" [attr.maxlength]="maxlength" class="p-dropdown-label p-inputtext" *ngIf="editable" [disabled]="disabled" [attr.placeholder]="placeholder"
+                aria-haspopup="listbox" [attr.aria-expanded]="overlayVisible" (click)="onEditableInputClick()" (input)="onEditableInputChange($event)" (focus)="onEditableInputFocus($event)" (blur)="onInputBlur($event)">
+            <i class="p-dropdown-clear-icon pi pi-times" (click)="clear($event)" *ngIf="value != null && showClear && !disabled"></i>
+            <div class="p-dropdown-trigger" role="button" aria-haspopup="listbox" [attr.aria-expanded]="overlayVisible">
+                <span class="p-dropdown-trigger-icon" [ngClass]="dropdownIcon"></span>
+            </div>
+            <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">
+                <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
+                <div class="p-dropdown-header" *ngIf="filter" >
+                    <div class="p-dropdown-filter-container" (click)="$event.stopPropagation()">
+                        <input #filter type="text" autocomplete="off" [value]="filterValue||''" class="p-dropdown-filter p-inputtext p-component" [attr.placeholder]="filterPlaceholder"
+                        (keydown.enter)="$event.preventDefault()" (keydown)="onKeydown($event, false)" (input)="onFilterInputChange($event)" [attr.aria-label]="ariaFilterLabel">
+                        <span class="p-dropdown-filter-icon pi pi-search"></span>
+                    </div>
+                </div>
+                <div class="p-dropdown-items-wrapper" [style.max-height]="virtualScroll ? 'auto' : (scrollHeight||'auto')">
+                    <ul class="p-dropdown-items" [ngClass]="{'p-dropdown-virtualscroll': virtualScroll}" role="listbox">
+                        <ng-container *ngIf="group">
+                            <ng-template ngFor let-optgroup [ngForOf]="optionsToDisplay">
+                                <li class="p-dropdown-item-group">
+                                    <span *ngIf="!groupTemplate">{{getOptionGroupLabel(optgroup)||'empty'}}</span>
+                                    <ng-container *ngTemplateOutlet="groupTemplate; context: {$implicit: optgroup}"></ng-container>
+                                </li>
+                                <ng-container *ngTemplateOutlet="itemslist; context: {$implicit: getOptionGroupChildren(optgroup), selectedOption: selectedOption}"></ng-container>
+                            </ng-template>
+                        </ng-container>
+                        <ng-container *ngIf="!group">
+                            <ng-container *ngTemplateOutlet="itemslist; context: {$implicit: optionsToDisplay, selectedOption: selectedOption}"></ng-container>
+                        </ng-container>
+                        <ng-template #itemslist let-options let-selectedOption="selectedOption">
+                            <ng-container *ngIf="!virtualScroll; else virtualScrollList">
+                                <ng-template ngFor let-option let-i="index" [ngForOf]="options">
+                                    <p-dropdownItem [option]="option" [selected]="selectedOption == option" [label]="getOptionLabel(option)" [disabled]="isOptionDisabled(option)"
+                                                    (onClick)="onItemClick($event)"
+                                                    [template]="itemTemplate"></p-dropdownItem>
+                                </ng-template>
+                            </ng-container>
+                            <ng-template #virtualScrollList>
+                                <cdk-virtual-scroll-viewport (scrolledIndexChange)="scrollToSelectedVirtualScrollElement()" #viewport [ngStyle]="{'height': scrollHeight}" [itemSize]="itemSize" *ngIf="virtualScroll && optionsToDisplay && optionsToDisplay.length">
+                                    <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">
+                                        <p-dropdownItem [option]="option" [selected]="selectedOption == option" [label]="getOptionLabel(option)" [disabled]="isOptionDisabled(option)"
+                                                                   (onClick)="onItemClick($event)"
+                                                                   [template]="itemTemplate"></p-dropdownItem>
+                                    </ng-container>
+                                </cdk-virtual-scroll-viewport>
+                            </ng-template>
+                        </ng-template>
+                        <li *ngIf="filterValue && isEmpty()" class="p-dropdown-empty-message">
+                            <ng-container *ngIf="!emptyFilterTemplate && !emptyTemplate; else emptyFilter">
+                                {{emptyFilterMessageLabel}}
+                            </ng-container>
+                            <ng-container #emptyFilter *ngTemplateOutlet="emptyFilterTemplate || emptyTemplate"></ng-container>
+                        </li>
+                        <li *ngIf="!filterValue && isEmpty()" class="p-dropdown-empty-message">
+                            <ng-container *ngIf="!emptyTemplate; else empty">
+                                {{emptyMessageLabel}}
+                            </ng-container>
+                            <ng-container #empty *ngTemplateOutlet="emptyTemplate"></ng-container>
+                        </li>
+                    </ul>
+                </div>
+                <ng-container *ngTemplateOutlet="footerTemplate"></ng-container>
+            </div>
+        </div>
+    `, isInline: true, styles: [".p-dropdown{display:inline-flex;cursor:pointer;position:relative;-webkit-user-select:none;-ms-user-select:none;user-select:none}.p-dropdown-clear-icon{position:absolute;top:50%;margin-top:-.5rem}.p-dropdown-trigger{display:flex;align-items:center;justify-content:center;flex-shrink:0}.p-dropdown-label{display:block;white-space:nowrap;overflow:hidden;flex:1 1 auto;width:1%;text-overflow:ellipsis;cursor:pointer}.p-dropdown-label-empty{overflow:hidden;visibility:hidden}input.p-dropdown-label{cursor:default}.p-dropdown .p-dropdown-panel{min-width:100%}.p-dropdown-panel{position:absolute}.p-dropdown-items-wrapper{overflow:auto}.p-dropdown-item{cursor:pointer;font-weight:400;white-space:nowrap;position:relative;overflow:hidden}.p-dropdown-items{margin:0;padding:0;list-style-type:none}.p-dropdown-filter{width:100%}.p-dropdown-filter-container{position:relative}.p-dropdown-filter-icon{position:absolute;top:50%;margin-top:-.5rem}.p-fluid .p-dropdown{display:flex}.p-fluid .p-dropdown .p-dropdown-label{width:1%}"], components: [{ type: DropdownItem, selector: "p-dropdownItem", inputs: ["option", "selected", "label", "disabled", "visible", "itemSize", "template"], outputs: ["onClick"] }, { type: i4.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation"], outputs: ["scrolledIndexChange"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "tooltipDisabled", "pTooltip"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { type: i4.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }], animations: [
+        trigger('overlayAnimation', [
+            transition(':enter', [
+                style({ opacity: 0, transform: 'scaleY(0.8)' }),
+                animate('{{showTransitionParams}}')
+            ]),
+            transition(':leave', [
+                animate('{{hideTransitionParams}}', style({ opacity: 0 }))
+            ])
+        ])
+    ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: Dropdown, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'p-dropdown',
+                    template: `
          <div #container [ngClass]="{'p-dropdown p-component':true,
             'p-disabled':disabled, 'p-dropdown-open':overlayVisible, 'p-focus':focused, 'p-dropdown-clearable': showClear && !disabled}"
             (click)="onMouseclick($event)" [ngStyle]="style" [class]="styleClass">
@@ -886,109 +1005,172 @@ Dropdown.decorators = [
             </div>
         </div>
     `,
-                animations: [
-                    trigger('overlayAnimation', [
-                        transition(':enter', [
-                            style({ opacity: 0, transform: 'scaleY(0.8)' }),
-                            animate('{{showTransitionParams}}')
-                        ]),
-                        transition(':leave', [
-                            animate('{{hideTransitionParams}}', style({ opacity: 0 }))
+                    animations: [
+                        trigger('overlayAnimation', [
+                            transition(':enter', [
+                                style({ opacity: 0, transform: 'scaleY(0.8)' }),
+                                animate('{{showTransitionParams}}')
+                            ]),
+                            transition(':leave', [
+                                animate('{{hideTransitionParams}}', style({ opacity: 0 }))
+                            ])
                         ])
-                    ])
-                ],
-                host: {
-                    '[class.p-inputwrapper-filled]': 'value',
-                    '[class.p-inputwrapper-focus]': 'focused || overlayVisible'
-                },
-                providers: [DROPDOWN_VALUE_ACCESSOR],
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                encapsulation: ViewEncapsulation.None,
-                styles: [".p-dropdown{-ms-user-select:none;-webkit-user-select:none;cursor:pointer;display:inline-flex;position:relative;user-select:none}.p-dropdown-clear-icon{margin-top:-.5rem;position:absolute;top:50%}.p-dropdown-trigger{align-items:center;display:flex;flex-shrink:0;justify-content:center}.p-dropdown-label{cursor:pointer;display:block;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:1%}.p-dropdown-label-empty{overflow:hidden;visibility:hidden}input.p-dropdown-label{cursor:default}.p-dropdown .p-dropdown-panel{min-width:100%}.p-dropdown-panel{position:absolute}.p-dropdown-items-wrapper{overflow:auto}.p-dropdown-item{cursor:pointer;font-weight:400;overflow:hidden;position:relative;white-space:nowrap}.p-dropdown-items{list-style-type:none;margin:0;padding:0}.p-dropdown-filter{width:100%}.p-dropdown-filter-container{position:relative}.p-dropdown-filter-icon{margin-top:-.5rem;position:absolute;top:50%}.p-fluid .p-dropdown{display:flex}.p-fluid .p-dropdown .p-dropdown-label{width:1%}"]
-            },] }
-];
-Dropdown.ctorParameters = () => [
-    { type: ElementRef },
-    { type: Renderer2 },
-    { type: ChangeDetectorRef },
-    { type: NgZone },
-    { type: FilterService },
-    { type: PrimeNGConfig }
-];
-Dropdown.propDecorators = {
-    scrollHeight: [{ type: Input }],
-    filter: [{ type: Input }],
-    name: [{ type: Input }],
-    style: [{ type: Input }],
-    panelStyle: [{ type: Input }],
-    styleClass: [{ type: Input }],
-    panelStyleClass: [{ type: Input }],
-    readonly: [{ type: Input }],
-    required: [{ type: Input }],
-    editable: [{ type: Input }],
-    appendTo: [{ type: Input }],
-    tabindex: [{ type: Input }],
-    placeholder: [{ type: Input }],
-    filterPlaceholder: [{ type: Input }],
-    filterLocale: [{ type: Input }],
-    inputId: [{ type: Input }],
-    selectId: [{ type: Input }],
-    dataKey: [{ type: Input }],
-    filterBy: [{ type: Input }],
-    autofocus: [{ type: Input }],
-    resetFilterOnHide: [{ type: Input }],
-    dropdownIcon: [{ type: Input }],
-    optionLabel: [{ type: Input }],
-    optionValue: [{ type: Input }],
-    optionDisabled: [{ type: Input }],
-    optionGroupLabel: [{ type: Input }],
-    optionGroupChildren: [{ type: Input }],
-    autoDisplayFirst: [{ type: Input }],
-    group: [{ type: Input }],
-    showClear: [{ type: Input }],
-    emptyFilterMessage: [{ type: Input }],
-    emptyMessage: [{ type: Input }],
-    virtualScroll: [{ type: Input }],
-    itemSize: [{ type: Input }],
-    autoZIndex: [{ type: Input }],
-    baseZIndex: [{ type: Input }],
-    showTransitionOptions: [{ type: Input }],
-    hideTransitionOptions: [{ type: Input }],
-    ariaFilterLabel: [{ type: Input }],
-    ariaLabelledBy: [{ type: Input }],
-    filterMatchMode: [{ type: Input }],
-    maxlength: [{ type: Input }],
-    tooltip: [{ type: Input }],
-    tooltipPosition: [{ type: Input }],
-    tooltipPositionStyle: [{ type: Input }],
-    tooltipStyleClass: [{ type: Input }],
-    autofocusFilter: [{ type: Input }],
-    onChange: [{ type: Output }],
-    onFilter: [{ type: Output }],
-    onFocus: [{ type: Output }],
-    onBlur: [{ type: Output }],
-    onClick: [{ type: Output }],
-    onShow: [{ type: Output }],
-    onHide: [{ type: Output }],
-    containerViewChild: [{ type: ViewChild, args: ['container',] }],
-    filterViewChild: [{ type: ViewChild, args: ['filter',] }],
-    accessibleViewChild: [{ type: ViewChild, args: ['in',] }],
-    viewPort: [{ type: ViewChild, args: [CdkVirtualScrollViewport,] }],
-    editableInputViewChild: [{ type: ViewChild, args: ['editableInput',] }],
-    templates: [{ type: ContentChildren, args: [PrimeTemplate,] }],
-    disabled: [{ type: Input }],
-    options: [{ type: Input }],
-    filterValue: [{ type: Input }]
-};
+                    ],
+                    host: {
+                        '[class.p-inputwrapper-filled]': 'filled',
+                        '[class.p-inputwrapper-focus]': 'focused || overlayVisible'
+                    },
+                    providers: [DROPDOWN_VALUE_ACCESSOR],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    styleUrls: ['./dropdown.css']
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i3.FilterService }, { type: i3.PrimeNGConfig }]; }, propDecorators: { scrollHeight: [{
+                type: Input
+            }], filter: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], style: [{
+                type: Input
+            }], panelStyle: [{
+                type: Input
+            }], styleClass: [{
+                type: Input
+            }], panelStyleClass: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], editable: [{
+                type: Input
+            }], appendTo: [{
+                type: Input
+            }], tabindex: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], filterPlaceholder: [{
+                type: Input
+            }], filterLocale: [{
+                type: Input
+            }], inputId: [{
+                type: Input
+            }], selectId: [{
+                type: Input
+            }], dataKey: [{
+                type: Input
+            }], filterBy: [{
+                type: Input
+            }], autofocus: [{
+                type: Input
+            }], resetFilterOnHide: [{
+                type: Input
+            }], dropdownIcon: [{
+                type: Input
+            }], optionLabel: [{
+                type: Input
+            }], optionValue: [{
+                type: Input
+            }], optionDisabled: [{
+                type: Input
+            }], optionGroupLabel: [{
+                type: Input
+            }], optionGroupChildren: [{
+                type: Input
+            }], autoDisplayFirst: [{
+                type: Input
+            }], group: [{
+                type: Input
+            }], showClear: [{
+                type: Input
+            }], emptyFilterMessage: [{
+                type: Input
+            }], emptyMessage: [{
+                type: Input
+            }], virtualScroll: [{
+                type: Input
+            }], itemSize: [{
+                type: Input
+            }], autoZIndex: [{
+                type: Input
+            }], baseZIndex: [{
+                type: Input
+            }], showTransitionOptions: [{
+                type: Input
+            }], hideTransitionOptions: [{
+                type: Input
+            }], ariaFilterLabel: [{
+                type: Input
+            }], ariaLabelledBy: [{
+                type: Input
+            }], filterMatchMode: [{
+                type: Input
+            }], maxlength: [{
+                type: Input
+            }], tooltip: [{
+                type: Input
+            }], tooltipPosition: [{
+                type: Input
+            }], tooltipPositionStyle: [{
+                type: Input
+            }], tooltipStyleClass: [{
+                type: Input
+            }], autofocusFilter: [{
+                type: Input
+            }], onChange: [{
+                type: Output
+            }], onFilter: [{
+                type: Output
+            }], onFocus: [{
+                type: Output
+            }], onBlur: [{
+                type: Output
+            }], onClick: [{
+                type: Output
+            }], onShow: [{
+                type: Output
+            }], onHide: [{
+                type: Output
+            }], containerViewChild: [{
+                type: ViewChild,
+                args: ['container']
+            }], filterViewChild: [{
+                type: ViewChild,
+                args: ['filter']
+            }], accessibleViewChild: [{
+                type: ViewChild,
+                args: ['in']
+            }], viewPort: [{
+                type: ViewChild,
+                args: [CdkVirtualScrollViewport]
+            }], editableInputViewChild: [{
+                type: ViewChild,
+                args: ['editableInput']
+            }], templates: [{
+                type: ContentChildren,
+                args: [PrimeTemplate]
+            }], disabled: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], filterValue: [{
+                type: Input
+            }] } });
 class DropdownModule {
 }
-DropdownModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [CommonModule, SharedModule, ScrollingModule, TooltipModule, RippleModule],
-                exports: [Dropdown, SharedModule, ScrollingModule],
-                declarations: [Dropdown, DropdownItem]
-            },] }
-];
+DropdownModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: DropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DropdownModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: DropdownModule, declarations: [Dropdown, DropdownItem], imports: [CommonModule, SharedModule, ScrollingModule, TooltipModule, RippleModule], exports: [Dropdown, SharedModule, ScrollingModule] });
+DropdownModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: DropdownModule, imports: [[CommonModule, SharedModule, ScrollingModule, TooltipModule, RippleModule], SharedModule, ScrollingModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: DropdownModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, SharedModule, ScrollingModule, TooltipModule, RippleModule],
+                    exports: [Dropdown, SharedModule, ScrollingModule],
+                    declarations: [Dropdown, DropdownItem]
+                }]
+        }] });
 
 /**
  * Generated bundle index. Do not edit.