primeng 14.1.2 → 14.2.1

package/fesm2015/primeng-dropdown.mjs

@@ -1,21 +1,22 @@
-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 i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { forwardRef, EventEmitter, Component, Input, Output, ChangeDetectionStrategy, ViewEncapsulation, ViewChild, ContentChildren, NgModule } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i3 from 'primeng/api';
 import { TranslationKeys, PrimeTemplate, SharedModule } from 'primeng/api';
-import { DomHandler, ConnectedOverlayScrollHandler } from 'primeng/dom';
-import { UniqueComponentId, ObjectUtils, ZIndexUtils } from 'primeng/utils';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import * as i4 from 'primeng/tooltip';
-import { TooltipModule } from 'primeng/tooltip';
-import * as i5 from 'primeng/scroller';
-import { ScrollerModule } from 'primeng/scroller';
+import * as i7 from 'primeng/autofocus';
+import { AutoFocusModule } from 'primeng/autofocus';
+import { DomHandler } from 'primeng/dom';
+import * as i4 from 'primeng/overlay';
+import { OverlayModule } from 'primeng/overlay';
 import * as i2 from 'primeng/ripple';
 import { RippleModule } from 'primeng/ripple';
-import * as i6 from 'primeng/autofocus';
-import { AutoFocusModule } from 'primeng/autofocus';
+import * as i6 from 'primeng/scroller';
+import { ScrollerModule } from 'primeng/scroller';
+import * as i5 from 'primeng/tooltip';
+import { TooltipModule } from 'primeng/tooltip';
+import { UniqueComponentId, ObjectUtils } from 'primeng/utils';
 
 const DROPDOWN_VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
@@ -35,12 +36,18 @@ class DropdownItem {
 }
 DropdownItem.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: DropdownItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
 DropdownItem.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: DropdownItem, selector: "p-dropdownItem", inputs: { option: "option", selected: "selected", label: "label", disabled: "disabled", visible: "visible", itemSize: "itemSize", template: "template" }, outputs: { onClick: "onClick" }, host: { classAttribute: "p-element" }, ngImport: i0, template: `
-        <li (click)="onOptionClick($event)" role="option" pRipple
-            [attr.aria-label]="label" [attr.aria-selected]="selected"
-            [ngStyle]="{'height': itemSize + 'px'}" [id]="selected ? 'p-highlighted-option':''"
-            [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
+            (click)="onOptionClick($event)"
+            role="option"
+            pRipple
+            [attr.aria-label]="label"
+            [attr.aria-selected]="selected"
+            [ngStyle]="{ height: itemSize + 'px' }"
+            [id]="selected ? 'p-highlighted-option' : ''"
+            [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, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.Ripple, selector: "[pRipple]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: DropdownItem, decorators: [{
@@ -48,16 +55,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
             args: [{
                     selector: 'p-dropdownItem',
                     template: `
-        <li (click)="onOptionClick($event)" role="option" pRipple
-            [attr.aria-label]="label" [attr.aria-selected]="selected"
-            [ngStyle]="{'height': itemSize + 'px'}" [id]="selected ? 'p-highlighted-option':''"
-            [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
+            (click)="onOptionClick($event)"
+            role="option"
+            pRipple
+            [attr.aria-label]="label"
+            [attr.aria-selected]="selected"
+            [ngStyle]="{ height: itemSize + 'px' }"
+            [id]="selected ? 'p-highlighted-option' : ''"
+            [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>
     `,
                     host: {
-                        'class': 'p-element'
+                        class: 'p-element'
                     }
                 }]
         }], propDecorators: { option: [{
@@ -78,31 +91,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
                 type: Output
             }] } });
 class Dropdown {
-    constructor(el, renderer, cd, zone, filterService, config, overlayService) {
+    constructor(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.overlayService = overlayService;
         this.scrollHeight = '200px';
         this.resetFilterOnHide = false;
         this.dropdownIcon = 'pi pi-chevron-down';
-        this.optionGroupChildren = "items";
+        this.optionGroupChildren = 'items';
         this.autoDisplayFirst = true;
         this.emptyFilterMessage = '';
         this.emptyMessage = '';
         this.lazy = false;
-        this.autoZIndex = true;
-        this.baseZIndex = 0;
-        this.showTransitionOptions = '.12s cubic-bezier(0, 0, 0.2, 1)';
-        this.hideTransitionOptions = '.1s linear';
-        this.filterMatchMode = "contains";
+        this.filterMatchMode = 'contains';
         this.tooltip = '';
         this.tooltipPosition = 'right';
         this.tooltipPositionStyle = 'absolute';
         this.autofocusFilter = true;
+        this.overlayDirection = 'end';
         this.onChange = new EventEmitter();
         this.onFilter = new EventEmitter();
         this.onFocus = new EventEmitter();
@@ -135,7 +144,35 @@ class Dropdown {
     }
     set itemSize(val) {
         this._itemSize = val;
-        console.warn("The itemSize property is deprecated, use virtualScrollItemSize property instead.");
+        console.warn('The itemSize property is deprecated, use virtualScrollItemSize property instead.');
+    }
+    get autoZIndex() {
+        return this._autoZIndex;
+    }
+    set autoZIndex(val) {
+        this._autoZIndex = val;
+        console.warn('The autoZIndex property is deprecated since v14.2.0, use overlayOptions property instead.');
+    }
+    get baseZIndex() {
+        return this._baseZIndex;
+    }
+    set baseZIndex(val) {
+        this._baseZIndex = val;
+        console.warn('The baseZIndex property is deprecated since v14.2.0, use overlayOptions property instead.');
+    }
+    get showTransitionOptions() {
+        return this._showTransitionOptions;
+    }
+    set showTransitionOptions(val) {
+        this._showTransitionOptions = val;
+        console.warn('The showTransitionOptions property is deprecated since v14.2.0, use overlayOptions property instead.');
+    }
+    get hideTransitionOptions() {
+        return this._hideTransitionOptions;
+    }
+    set hideTransitionOptions(val) {
+        this._hideTransitionOptions = val;
+        console.warn('The hideTransitionOptions property is deprecated since v14.2.0, use overlayOptions property instead.');
     }
     ngAfterContentInit() {
         this.templates.forEach((item) => {
@@ -229,24 +266,24 @@ class Dropdown {
         return this.value || this.value != null || this.value != undefined;
     }
     get isVisibleClearIcon() {
-        return (this.value != null && this.value !== '') && this.showClear && !this.disabled;
+        return this.value != null && this.value !== '' && this.showClear && !this.disabled;
     }
     updateEditableLabel() {
         if (this.editableInputViewChild && this.editableInputViewChild.nativeElement) {
-            this.editableInputViewChild.nativeElement.value = (this.selectedOption ? this.getOptionLabel(this.selectedOption) : this.value || '');
+            this.editableInputViewChild.nativeElement.value = this.selectedOption ? this.getOptionLabel(this.selectedOption) : this.value || '';
         }
     }
     getOptionLabel(option) {
-        return this.optionLabel ? ObjectUtils.resolveFieldData(option, this.optionLabel) : (option && option.label !== undefined ? option.label : option);
+        return this.optionLabel ? ObjectUtils.resolveFieldData(option, this.optionLabel) : option && option.label !== undefined ? option.label : option;
     }
     getOptionValue(option) {
-        return this.optionValue ? ObjectUtils.resolveFieldData(option, this.optionValue) : (!this.optionLabel && (option && option.value !== undefined) ? option.value : option);
+        return this.optionValue ? ObjectUtils.resolveFieldData(option, this.optionValue) : !this.optionLabel && option && option.value !== undefined ? option.value : option;
     }
     isOptionDisabled(option) {
-        return this.optionDisabled ? ObjectUtils.resolveFieldData(option, this.optionDisabled) : (option && option.disabled !== undefined ? option.disabled : false);
+        return this.optionDisabled ? ObjectUtils.resolveFieldData(option, this.optionDisabled) : option && option.disabled !== undefined ? option.disabled : false;
     }
     getOptionGroupLabel(optionGroup) {
-        return this.optionGroupLabel ? ObjectUtils.resolveFieldData(optionGroup, this.optionGroupLabel) : (optionGroup && optionGroup.label !== undefined ? optionGroup.label : optionGroup);
+        return this.optionGroupLabel ? ObjectUtils.resolveFieldData(optionGroup, this.optionGroupLabel) : optionGroup && optionGroup.label !== undefined ? optionGroup.label : optionGroup;
     }
     getOptionGroupChildren(optionGroup) {
         return this.optionGroupChildren ? ObjectUtils.resolveFieldData(optionGroup, this.optionGroupChildren) : optionGroup.items;
@@ -259,7 +296,7 @@ class Dropdown {
         }
         setTimeout(() => {
             this.hide();
-        }, 150);
+        }, 1);
     }
     selectItem(event, option) {
         if (this.selectedOption != option) {
@@ -278,14 +315,16 @@ class Dropdown {
             this.optionsChanged = false;
             this.zone.runOutsideAngular(() => {
                 setTimeout(() => {
-                    this.alignOverlay();
+                    if (this.overlayViewChild) {
+                        this.overlayViewChild.alignOverlay();
+                    }
                 }, 1);
             });
         }
         if (this.selectedOptionUpdated && this.itemsWrapper) {
-            let selectedItem = DomHandler.findSingle(this.overlay, 'li.p-highlight');
+            let selectedItem = DomHandler.findSingle(this.overlayViewChild.el.nativeElement, 'li.p-highlight');
             if (selectedItem) {
-                DomHandler.scrollInView(this.itemsWrapper, DomHandler.findSingle(this.overlay, 'li.p-highlight'));
+                DomHandler.scrollInView(this.itemsWrapper, DomHandler.findSingle(this.overlayViewChild.el.nativeElement, 'li.p-highlight'));
             }
             this.selectedOptionUpdated = false;
         }
@@ -342,26 +381,12 @@ class Dropdown {
             this.show();
         this.cd.detectChanges();
     }
-    onOverlayClick(event) {
-        this.overlayService.add({
-            originalEvent: event,
-            target: this.el.nativeElement
-        });
-    }
     isInputClick(event) {
-        return DomHandler.hasClass(event.target, 'p-dropdown-clear-icon') ||
-            event.target.isSameNode(this.accessibleViewChild.nativeElement) ||
-            (this.editableInputViewChild && event.target.isSameNode(this.editableInputViewChild.nativeElement));
-    }
-    isOutsideClicked(event) {
-        return !(this.el.nativeElement.isSameNode(event.target) || this.el.nativeElement.contains(event.target) || (this.overlay && this.overlay.contains(event.target)));
+        return DomHandler.hasClass(event.target, 'p-dropdown-clear-icon') || event.target.isSameNode(this.accessibleViewChild.nativeElement) || (this.editableInputViewChild && event.target.isSameNode(this.editableInputViewChild.nativeElement));
     }
     isEmpty() {
         return !this.optionsToDisplay || (this.optionsToDisplay && this.optionsToDisplay.length === 0);
     }
-    onEditableInputClick() {
-        this.bindDocumentClickListener();
-    }
     onEditableInputFocus(event) {
         this.focused = true;
         this.hide();
@@ -378,72 +403,38 @@ class Dropdown {
     }
     show() {
         this.overlayVisible = true;
-        this.preventDocumentDefault = true;
         this.cd.markForCheck();
     }
     onOverlayAnimationStart(event) {
-        switch (event.toState) {
-            case 'visible':
-                this.overlay = event.element;
-                this.itemsWrapper = DomHandler.findSingle(this.overlay, this.virtualScroll ? '.p-scroller' : '.p-dropdown-items-wrapper');
-                this.virtualScroll && this.scroller.setContentEl(this.itemsViewChild.nativeElement);
-                this.appendOverlay();
-                if (this.autoZIndex) {
-                    ZIndexUtils.set('overlay', this.overlay, this.baseZIndex + this.config.zIndex.overlay);
-                }
-                this.alignOverlay();
-                this.bindDocumentClickListener();
-                this.bindDocumentResizeListener();
-                this.bindScrollListener();
-                if (this.options && this.options.length) {
-                    if (this.virtualScroll) {
-                        const selectedIndex = this.selectedOption ? this.findOptionIndex(this.getOptionValue(this.selectedOption), this.optionsToDisplay) : -1;
-                        if (selectedIndex !== -1) {
-                            this.scroller.scrollToIndex(selectedIndex);
-                        }
-                    }
-                    else {
-                        let selectedListItem = DomHandler.findSingle(this.itemsWrapper, '.p-dropdown-item.p-highlight');
-                        if (selectedListItem) {
-                            selectedListItem.scrollIntoView({ block: 'nearest', inline: 'center' });
-                        }
+        if (event.toState === 'visible') {
+            this.itemsWrapper = DomHandler.findSingle(this.overlayViewChild.el.nativeElement, this.virtualScroll ? '.p-scroller' : '.p-dropdown-items-wrapper');
+            this.virtualScroll && this.scroller.setContentEl(this.itemsViewChild.nativeElement);
+            if (this.options && this.options.length) {
+                if (this.virtualScroll) {
+                    const selectedIndex = this.selectedOption ? this.findOptionIndex(this.getOptionValue(this.selectedOption), this.optionsToDisplay) : -1;
+                    if (selectedIndex !== -1) {
+                        this.scroller.scrollToIndex(selectedIndex);
                     }
                 }
-                if (this.filterViewChild && this.filterViewChild.nativeElement) {
-                    this.preventModelTouched = true;
-                    if (this.autofocusFilter) {
-                        this.filterViewChild.nativeElement.focus();
+                else {
+                    let selectedListItem = DomHandler.findSingle(this.itemsWrapper, '.p-dropdown-item.p-highlight');
+                    if (selectedListItem) {
+                        selectedListItem.scrollIntoView({ block: 'nearest', inline: 'center' });
                     }
                 }
-                this.onShow.emit(event);
-                break;
-            case 'void':
-                this.onOverlayHide();
-                this.onHide.emit(event);
-                break;
-        }
-    }
-    onOverlayAnimationEnd(event) {
-        switch (event.toState) {
-            case 'void':
-                ZIndexUtils.clear(event.element);
-                break;
-        }
-    }
-    appendOverlay() {
-        if (this.appendTo) {
-            if (this.appendTo === 'body')
-                document.body.appendChild(this.overlay);
-            else
-                DomHandler.appendChild(this.overlay, this.appendTo);
-            if (!this.overlay.style.minWidth) {
-                this.overlay.style.minWidth = DomHandler.getWidth(this.containerViewChild.nativeElement) + 'px';
             }
+            if (this.filterViewChild && this.filterViewChild.nativeElement) {
+                this.preventModelTouched = true;
+                if (this.autofocusFilter) {
+                    this.filterViewChild.nativeElement.focus();
+                }
+            }
+            this.onShow.emit(event);
         }
-    }
-    restoreOverlayAppend() {
-        if (this.overlay && this.appendTo) {
-            this.el.nativeElement.appendChild(this.overlay);
+        if (event.toState === 'void') {
+            this.itemsWrapper = null;
+            this.onModelTouched();
+            this.onHide.emit(event);
         }
     }
     hide() {
@@ -453,14 +444,6 @@ class Dropdown {
         }
         this.cd.markForCheck();
     }
-    alignOverlay() {
-        if (this.overlay) {
-            if (this.appendTo)
-                DomHandler.absolutePosition(this.overlay, this.containerViewChild.nativeElement);
-            else
-                DomHandler.relativePosition(this.overlay, this.containerViewChild.nativeElement);
-        }
-    }
     onInputFocus(event) {
         this.focused = true;
         this.onFocus.emit(event);
@@ -476,7 +459,7 @@ class Dropdown {
     findPrevEnabledOption(index) {
         let prevEnabledOption;
         if (this.optionsToDisplay && this.optionsToDisplay.length) {
-            for (let i = (index - 1); 0 <= i; i--) {
+            for (let i = index - 1; 0 <= i; i--) {
                 let option = this.optionsToDisplay[i];
                 if (this.isOptionDisabled(option)) {
                     continue;
@@ -504,7 +487,7 @@ class Dropdown {
     findNextEnabledOption(index) {
         let nextEnabledOption;
         if (this.optionsToDisplay && this.optionsToDisplay.length) {
-            for (let i = (index + 1); i < this.optionsToDisplay.length; i++) {
+            for (let i = index + 1; i < this.optionsToDisplay.length; i++) {
                 let option = this.optionsToDisplay[i];
                 if (this.isOptionDisabled(option)) {
                     continue;
@@ -544,7 +527,7 @@ class Dropdown {
                         let selectedItemIndex = this.selectedOption ? this.findOptionGroupIndex(this.getOptionValue(this.selectedOption), this.optionsToDisplay) : -1;
                         if (selectedItemIndex !== -1) {
                             let nextItemIndex = selectedItemIndex.itemIndex + 1;
-                            if (nextItemIndex < (this.getOptionGroupChildren(this.optionsToDisplay[selectedItemIndex.groupIndex]).length)) {
+                            if (nextItemIndex < this.getOptionGroupChildren(this.optionsToDisplay[selectedItemIndex.groupIndex]).length) {
                                 this.selectItem(event, this.getOptionGroupChildren(this.optionsToDisplay[selectedItemIndex.groupIndex])[nextItemIndex]);
                                 this.selectedOptionUpdated = true;
                             }
@@ -628,7 +611,7 @@ class Dropdown {
                 break;
             //search item based on keyboard input
             default:
-                if (search && !event.metaKey) {
+                if (search && !event.metaKey && event.which !== 17) {
                     this.search(event);
                 }
                 break;
@@ -675,7 +658,10 @@ class Dropdown {
     searchOptionInRange(start, end) {
         for (let i = start; i < end; i++) {
             let opt = this.optionsToDisplay[i];
-            if (this.getOptionLabel(opt).toLocaleLowerCase(this.filterLocale).startsWith(this.searchValue.toLocaleLowerCase(this.filterLocale)) && !this.isOptionDisabled(opt)) {
+            if (this.getOptionLabel(opt)
+                .toLocaleLowerCase(this.filterLocale)
+                .startsWith(this.searchValue.toLocaleLowerCase(this.filterLocale)) &&
+                !this.isOptionDisabled(opt)) {
                 return opt;
             }
         }
@@ -685,18 +671,24 @@ class Dropdown {
         let option;
         if (this.searchValue) {
             for (let i = index.groupIndex; i < this.optionsToDisplay.length; i++) {
-                for (let j = (index.groupIndex === i) ? (index.itemIndex + 1) : 0; j < this.getOptionGroupChildren(this.optionsToDisplay[i]).length; j++) {
+                for (let j = index.groupIndex === i ? index.itemIndex + 1 : 0; j < this.getOptionGroupChildren(this.optionsToDisplay[i]).length; j++) {
                     let opt = this.getOptionGroupChildren(this.optionsToDisplay[i])[j];
-                    if (this.getOptionLabel(opt).toLocaleLowerCase(this.filterLocale).startsWith(this.searchValue.toLocaleLowerCase(this.filterLocale)) && !this.isOptionDisabled(opt)) {
+                    if (this.getOptionLabel(opt)
+                        .toLocaleLowerCase(this.filterLocale)
+                        .startsWith(this.searchValue.toLocaleLowerCase(this.filterLocale)) &&
+                        !this.isOptionDisabled(opt)) {
                         return opt;
                     }
                 }
             }
             if (!option) {
                 for (let i = 0; i <= index.groupIndex; i++) {
-                    for (let j = 0; j < ((index.groupIndex === i) ? index.itemIndex : this.getOptionGroupChildren(this.optionsToDisplay[i]).length); j++) {
+                    for (let j = 0; j < (index.groupIndex === i ? index.itemIndex : this.getOptionGroupChildren(this.optionsToDisplay[i]).length); j++) {
                         let opt = this.getOptionGroupChildren(this.optionsToDisplay[i])[j];
-                        if (this.getOptionLabel(opt).toLocaleLowerCase(this.filterLocale).startsWith(this.searchValue.toLocaleLowerCase(this.filterLocale)) && !this.isOptionDisabled(opt)) {
+                        if (this.getOptionLabel(opt)
+                            .toLocaleLowerCase(this.filterLocale)
+                            .startsWith(this.searchValue.toLocaleLowerCase(this.filterLocale)) &&
+                            !this.isOptionDisabled(opt)) {
                             return opt;
                         }
                     }
@@ -750,7 +742,7 @@ class Dropdown {
         }
         else {
             let index = this.findOptionIndex(val, opts);
-            return (index != -1) ? opts[index] : null;
+            return index != -1 ? opts[index] : null;
         }
     }
     onFilterInputChange(event) {
@@ -795,54 +787,6 @@ class Dropdown {
     focus() {
         this.applyFocus();
     }
-    bindDocumentClickListener() {
-        if (!this.documentClickListener) {
-            const documentTarget = this.el ? this.el.nativeElement.ownerDocument : 'document';
-            this.documentClickListener = this.renderer.listen(documentTarget, 'click', (event) => {
-                if (!this.preventDocumentDefault && this.isOutsideClicked(event)) {
-                    this.hide();
-                    this.unbindDocumentClickListener();
-                }
-                this.preventDocumentDefault = false;
-            });
-        }
-    }
-    unbindDocumentClickListener() {
-        if (this.documentClickListener) {
-            this.documentClickListener();
-            this.documentClickListener = null;
-        }
-    }
-    bindDocumentResizeListener() {
-        this.documentResizeListener = this.onWindowResize.bind(this);
-        window.addEventListener('resize', this.documentResizeListener);
-    }
-    unbindDocumentResizeListener() {
-        if (this.documentResizeListener) {
-            window.removeEventListener('resize', this.documentResizeListener);
-            this.documentResizeListener = null;
-        }
-    }
-    onWindowResize() {
-        if (this.overlayVisible && !DomHandler.isTouchDevice()) {
-            this.hide();
-        }
-    }
-    bindScrollListener() {
-        if (!this.scrollHandler) {
-            this.scrollHandler = new ConnectedOverlayScrollHandler(this.containerViewChild.nativeElement, (event) => {
-                if (this.overlayVisible) {
-                    this.hide();
-                }
-            });
-        }
-        this.scrollHandler.bindScrollListener();
-    }
-    unbindScrollListener() {
-        if (this.scrollHandler) {
-            this.scrollHandler.unbindScrollListener();
-        }
-    }
     clear(event) {
         this.value = null;
         this.onModelChange(this.value);
@@ -854,234 +798,361 @@ class Dropdown {
         this.updateEditableLabel();
         this.onClear.emit(event);
     }
-    onOverlayHide() {
-        this.unbindDocumentClickListener();
-        this.unbindDocumentResizeListener();
-        this.unbindScrollListener();
-        this.overlay = null;
-        this.itemsWrapper = null;
-        this.onModelTouched();
-    }
-    ngOnDestroy() {
-        if (this.scrollHandler) {
-            this.scrollHandler.destroy();
-            this.scrollHandler = null;
-        }
-        if (this.overlay) {
-            ZIndexUtils.clear(this.overlay);
-        }
-        this.restoreOverlayAppend();
-        this.onOverlayHide();
-    }
 }
-Dropdown.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: Dropdown, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i3.FilterService }, { token: i3.PrimeNGConfig }, { token: i3.OverlayService }], target: i0.ɵɵFactoryTarget.Component });
-Dropdown.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", 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", lazy: "lazy", virtualScroll: "virtualScroll", virtualScrollItemSize: "virtualScrollItemSize", virtualScrollOptions: "virtualScrollOptions", autoZIndex: "autoZIndex", baseZIndex: "baseZIndex", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions", ariaFilterLabel: "ariaFilterLabel", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", filterMatchMode: "filterMatchMode", maxlength: "maxlength", tooltip: "tooltip", tooltipPosition: "tooltipPosition", tooltipPositionStyle: "tooltipPositionStyle", tooltipStyleClass: "tooltipStyleClass", autofocusFilter: "autofocusFilter", disabled: "disabled", itemSize: "itemSize", options: "options", filterValue: "filterValue" }, outputs: { onChange: "onChange", onFilter: "onFilter", onFocus: "onFocus", onBlur: "onBlur", onClick: "onClick", onShow: "onShow", onHide: "onHide", onClear: "onClear", onLazyLoad: "onLazyLoad" }, host: { properties: { "class.p-inputwrapper-filled": "filled", "class.p-inputwrapper-focus": "focused || overlayVisible" }, classAttribute: "p-element p-inputwrapper" }, 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: "editableInputViewChild", first: true, predicate: ["editableInput"], descendants: true }, { propertyName: "itemsViewChild", first: true, predicate: ["items"], descendants: true }, { propertyName: "scroller", first: true, predicate: ["scroller"], 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">
+Dropdown.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", 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: "14.0.0", version: "14.0.7", 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", lazy: "lazy", virtualScroll: "virtualScroll", virtualScrollItemSize: "virtualScrollItemSize", virtualScrollOptions: "virtualScrollOptions", overlayOptions: "overlayOptions", ariaFilterLabel: "ariaFilterLabel", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", filterMatchMode: "filterMatchMode", maxlength: "maxlength", tooltip: "tooltip", tooltipPosition: "tooltipPosition", tooltipPositionStyle: "tooltipPositionStyle", tooltipStyleClass: "tooltipStyleClass", autofocusFilter: "autofocusFilter", overlayDirection: "overlayDirection", disabled: "disabled", itemSize: "itemSize", autoZIndex: "autoZIndex", baseZIndex: "baseZIndex", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions", options: "options", filterValue: "filterValue" }, outputs: { onChange: "onChange", onFilter: "onFilter", onFocus: "onFocus", onBlur: "onBlur", onClick: "onClick", onShow: "onShow", onHide: "onHide", onClear: "onClear", onLazyLoad: "onLazyLoad" }, host: { properties: { "class.p-inputwrapper-filled": "filled", "class.p-inputwrapper-focus": "focused || overlayVisible" }, classAttribute: "p-element p-inputwrapper" }, 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: "editableInputViewChild", first: true, predicate: ["editableInput"], descendants: true }, { propertyName: "itemsViewChild", first: true, predicate: ["items"], descendants: true }, { propertyName: "scroller", first: true, predicate: ["scroller"], descendants: true }, { propertyName: "overlayViewChild", first: true, predicate: ["overlay"], 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" [attr.placeholder]="placeholder"
-                    aria-haspopup="listbox" [attr.aria-label]="ariaLabel" [attr.aria-expanded]="false" [attr.aria-labelledby]="ariaLabelledBy" (blur)="onInputBlur($event)" (keydown)="onKeydown($event, true)"
-                    [disabled]="disabled" [attr.tabindex]="tabindex" [pAutoFocus]="autofocus" [attr.aria-activedescendant]="overlayVisible ? labelId : null" role="combobox">
+                <input
+                    #in
+                    [attr.id]="inputId"
+                    type="text"
+                    readonly
+                    (focus)="onInputFocus($event)"
+                    aria-haspopup="listbox"
+                    [attr.placeholder]="placeholder"
+                    aria-haspopup="listbox"
+                    [attr.aria-label]="ariaLabel"
+                    [attr.aria-expanded]="false"
+                    [attr.aria-labelledby]="ariaLabelledBy"
+                    (blur)="onInputBlur($event)"
+                    (keydown)="onKeydown($event, true)"
+                    [disabled]="disabled"
+                    [attr.tabindex]="tabindex"
+                    pAutoFocus
+                    [autofocus]="autofocus"
+                    [attr.aria-activedescendant]="overlayVisible ? labelId : null"
+                    role="combobox"
+                />
             </div>
-            <span [attr.id]="labelId" [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
+                [attr.id]="labelId"
+                [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)">
+            <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"
+                (input)="onEditableInputChange($event)"
+                (focus)="onEditableInputFocus($event)"
+                (blur)="onInputBlur($event)"
+            />
             <i class="p-dropdown-clear-icon pi pi-times" (click)="clear($event)" *ngIf="isVisibleClearIcon"></i>
             <div class="p-dropdown-trigger" role="button" aria-label="dropdown trigger" 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'" (click)="onOverlayClick($event)" [@overlayAnimation]="{value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}" (@overlayAnimation.start)="onOverlayAnimationStart($event)" (@overlayAnimation.done)="onOverlayAnimationEnd($event)" [ngStyle]="panelStyle" [class]="panelStyleClass">
-                <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
-                <div class="p-dropdown-header" *ngIf="filter" (click)="$event.stopPropagation()">
-                    <ng-container *ngIf="filterTemplate; else builtInFilterElement">
-                        <ng-container *ngTemplateOutlet="filterTemplate; context: {options: filterOptions}"></ng-container>
-                    </ng-container>
-                    <ng-template #builtInFilterElement>
-                        <div class="p-dropdown-filter-container">
-                            <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" [attr.aria-activedescendant]="overlayVisible ? 'p-highlighted-option' : labelId">
-                            <span class="p-dropdown-filter-icon pi pi-search"></span>
-                        </div>
-                    </ng-template>
-                </div>
-                <div class="p-dropdown-items-wrapper" [style.max-height]="virtualScroll ? 'auto' : (scrollHeight||'auto')">
-                    <p-scroller *ngIf="virtualScroll" #scroller [items]="optionsToDisplay" [style]="{'height': scrollHeight}" [itemSize]="virtualScrollItemSize||_itemSize" [autoSize]="true"
-                        [lazy]="lazy" (onLazyLoad)="onLazyLoad.emit($event)" [options]="virtualScrollOptions">
-                        <ng-template pTemplate="content" let-items let-scrollerOptions="options">
-                            <ng-container *ngTemplateOutlet="buildInItems; context: {$implicit: items, options: scrollerOptions}"></ng-container>
-                        </ng-template>
-                        <ng-container *ngIf="loaderTemplate">
-                            <ng-template pTemplate="loader" let-scrollerOptions="options">
-                                <ng-container *ngTemplateOutlet="loaderTemplate; context: {options: scrollerOptions}"></ng-container>
+            <p-overlay
+                #overlay
+                [(visible)]="overlayVisible"
+                [options]="overlayOptions"
+                [target]="'@parent'"
+                [appendTo]="appendTo"
+                [autoZIndex]="autoZIndex"
+                [baseZIndex]="baseZIndex"
+                [showTransitionOptions]="showTransitionOptions"
+                [hideTransitionOptions]="hideTransitionOptions"
+                (onAnimationStart)="onOverlayAnimationStart($event)"
+                (onHide)="hide()"
+            >
+                <ng-template pTemplate="content">
+                    <div [ngClass]="'p-dropdown-panel p-component'" [ngStyle]="panelStyle" [class]="panelStyleClass">
+                        <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
+                        <div class="p-dropdown-header" *ngIf="filter" (click)="$event.stopPropagation()">
+                            <ng-container *ngIf="filterTemplate; else builtInFilterElement">
+                                <ng-container *ngTemplateOutlet="filterTemplate; context: { options: filterOptions }"></ng-container>
+                            </ng-container>
+                            <ng-template #builtInFilterElement>
+                                <div class="p-dropdown-filter-container">
+                                    <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"
+                                        [attr.aria-activedescendant]="overlayVisible ? 'p-highlighted-option' : labelId"
+                                    />
+                                    <span class="p-dropdown-filter-icon pi pi-search"></span>
+                                </div>
                             </ng-template>
-                        </ng-container>
-                    </p-scroller>
-                    <ng-container *ngIf="!virtualScroll">
-                        <ng-container *ngTemplateOutlet="buildInItems; context: {$implicit: optionsToDisplay, options: {}}"></ng-container>
-                    </ng-container>
-
-                    <ng-template #buildInItems let-items let-scrollerOptions="options">
-                        <ul #items [attr.id]="listId" class="p-dropdown-items" [ngClass]="scrollerOptions.contentStyleClass" [style]="scrollerOptions.contentStyle" role="listbox">
-                            <ng-container *ngIf="group">
-                                <ng-template ngFor let-optgroup [ngForOf]="items">
-                                    <li class="p-dropdown-item-group" [ngStyle]="{'height': scrollerOptions.itemSize + 'px'}">
-                                        <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>
+                        </div>
+                        <div class="p-dropdown-items-wrapper" [style.max-height]="virtualScroll ? 'auto' : scrollHeight || 'auto'">
+                            <p-scroller
+                                *ngIf="virtualScroll"
+                                #scroller
+                                [items]="optionsToDisplay"
+                                [style]="{ height: scrollHeight }"
+                                [itemSize]="virtualScrollItemSize || _itemSize"
+                                [autoSize]="true"
+                                [lazy]="lazy"
+                                (onLazyLoad)="onLazyLoad.emit($event)"
+                                [options]="virtualScrollOptions"
+                            >
+                                <ng-template pTemplate="content" let-items let-scrollerOptions="options">
+                                    <ng-container *ngTemplateOutlet="buildInItems; context: { $implicit: items, options: scrollerOptions }"></ng-container>
                                 </ng-template>
+                                <ng-container *ngIf="loaderTemplate">
+                                    <ng-template pTemplate="loader" let-scrollerOptions="options">
+                                        <ng-container *ngTemplateOutlet="loaderTemplate; context: { options: scrollerOptions }"></ng-container>
+                                    </ng-template>
+                                </ng-container>
+                            </p-scroller>
+                            <ng-container *ngIf="!virtualScroll">
+                                <ng-container *ngTemplateOutlet="buildInItems; context: { $implicit: optionsToDisplay, options: {} }"></ng-container>
                             </ng-container>
-                            <ng-container *ngIf="!group">
-                                <ng-container *ngTemplateOutlet="itemslist; context: {$implicit: items, selectedOption: selectedOption}"></ng-container>
-                            </ng-container>
-                            <ng-template #itemslist let-options let-selectedOption="selectedOption">
-                                <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-template #buildInItems let-items let-scrollerOptions="options">
+                                <ul #items [attr.id]="listId" class="p-dropdown-items" [ngClass]="scrollerOptions.contentStyleClass" [style]="scrollerOptions.contentStyle" role="listbox">
+                                    <ng-container *ngIf="group">
+                                        <ng-template ngFor let-optgroup [ngForOf]="items">
+                                            <li class="p-dropdown-item-group" [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }">
+                                                <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: items, selectedOption: selectedOption }"></ng-container>
+                                    </ng-container>
+                                    <ng-template #itemslist let-options let-selectedOption="selectedOption">
+                                        <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-template>
+                                    <li *ngIf="filterValue && isEmpty()" class="p-dropdown-empty-message" [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }">
+                                        <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" [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }">
+                                        <ng-container *ngIf="!emptyTemplate; else empty">
+                                            {{ emptyMessageLabel }}
+                                        </ng-container>
+                                        <ng-container #empty *ngTemplateOutlet="emptyTemplate"></ng-container>
+                                    </li>
+                                </ul>
                             </ng-template>
-                            <li *ngIf="filterValue && isEmpty()" class="p-dropdown-empty-message" [ngStyle]="{'height': scrollerOptions.itemSize + 'px'}">
-                                <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" [ngStyle]="{'height': scrollerOptions.itemSize + 'px'}">
-                                <ng-container *ngIf="!emptyTemplate; else empty">
-                                    {{emptyMessageLabel}}
-                                </ng-container>
-                                <ng-container #empty *ngTemplateOutlet="emptyTemplate"></ng-container>
-                            </li>
-                        </ul>
-                    </ng-template>
-                </div>
-                <ng-container *ngTemplateOutlet="footerTemplate"></ng-container>
-            </div>
+                        </div>
+                        <ng-container *ngTemplateOutlet="footerTemplate"></ng-container>
+                    </div>
+                </ng-template>
+            </p-overlay>
         </div>
-    `, isInline: true, styles: [".p-dropdown{display:inline-flex;cursor:pointer;position:relative;-webkit-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;top:0;left:0}.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%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i4.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "fitContent", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i5.Scroller, selector: "p-scroller", inputs: ["id", "style", "styleClass", "tabindex", "items", "itemSize", "scrollHeight", "scrollWidth", "orientation", "delay", "resizeDelay", "lazy", "disabled", "loaderDisabled", "columns", "showSpacer", "showLoader", "numToleratedItems", "loading", "autoSize", "trackBy", "options"], outputs: ["onLazyLoad", "onScroll", "onScrollIndexChange"] }, { kind: "directive", type: i6.AutoFocus, selector: "[pAutoFocus]", inputs: ["pAutoFocus"] }, { kind: "component", type: DropdownItem, selector: "p-dropdownItem", inputs: ["option", "selected", "label", "disabled", "visible", "itemSize", "template"], outputs: ["onClick"] }], 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 });
+    `, isInline: true, styles: [".p-dropdown{display:inline-flex;cursor:pointer;position:relative;-webkit-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-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%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4.Overlay, selector: "p-overlay", inputs: ["visible", "mode", "style", "styleClass", "contentStyle", "contentStyleClass", "target", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "listener", "responsive", "options"], outputs: ["visibleChange", "onBeforeShow", "onShow", "onBeforeHide", "onHide", "onAnimationStart", "onAnimationDone"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "fitContent", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i6.Scroller, selector: "p-scroller", inputs: ["id", "style", "styleClass", "tabindex", "items", "itemSize", "scrollHeight", "scrollWidth", "orientation", "step", "delay", "resizeDelay", "appendOnly", "inline", "lazy", "disabled", "loaderDisabled", "columns", "showSpacer", "showLoader", "numToleratedItems", "loading", "autoSize", "trackBy", "options"], outputs: ["onLazyLoad", "onScroll", "onScrollIndexChange"] }, { kind: "directive", type: i7.AutoFocus, selector: "[pAutoFocus]", inputs: ["autofocus"] }, { kind: "component", type: DropdownItem, selector: "p-dropdownItem", inputs: ["option", "selected", "label", "disabled", "visible", "itemSize", "template"], outputs: ["onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", 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">
+        <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" [attr.placeholder]="placeholder"
-                    aria-haspopup="listbox" [attr.aria-label]="ariaLabel" [attr.aria-expanded]="false" [attr.aria-labelledby]="ariaLabelledBy" (blur)="onInputBlur($event)" (keydown)="onKeydown($event, true)"
-                    [disabled]="disabled" [attr.tabindex]="tabindex" [pAutoFocus]="autofocus" [attr.aria-activedescendant]="overlayVisible ? labelId : null" role="combobox">
+                <input
+                    #in
+                    [attr.id]="inputId"
+                    type="text"
+                    readonly
+                    (focus)="onInputFocus($event)"
+                    aria-haspopup="listbox"
+                    [attr.placeholder]="placeholder"
+                    aria-haspopup="listbox"
+                    [attr.aria-label]="ariaLabel"
+                    [attr.aria-expanded]="false"
+                    [attr.aria-labelledby]="ariaLabelledBy"
+                    (blur)="onInputBlur($event)"
+                    (keydown)="onKeydown($event, true)"
+                    [disabled]="disabled"
+                    [attr.tabindex]="tabindex"
+                    pAutoFocus
+                    [autofocus]="autofocus"
+                    [attr.aria-activedescendant]="overlayVisible ? labelId : null"
+                    role="combobox"
+                />
             </div>
-            <span [attr.id]="labelId" [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
+                [attr.id]="labelId"
+                [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)">
+            <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"
+                (input)="onEditableInputChange($event)"
+                (focus)="onEditableInputFocus($event)"
+                (blur)="onInputBlur($event)"
+            />
             <i class="p-dropdown-clear-icon pi pi-times" (click)="clear($event)" *ngIf="isVisibleClearIcon"></i>
             <div class="p-dropdown-trigger" role="button" aria-label="dropdown trigger" 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'" (click)="onOverlayClick($event)" [@overlayAnimation]="{value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}" (@overlayAnimation.start)="onOverlayAnimationStart($event)" (@overlayAnimation.done)="onOverlayAnimationEnd($event)" [ngStyle]="panelStyle" [class]="panelStyleClass">
-                <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
-                <div class="p-dropdown-header" *ngIf="filter" (click)="$event.stopPropagation()">
-                    <ng-container *ngIf="filterTemplate; else builtInFilterElement">
-                        <ng-container *ngTemplateOutlet="filterTemplate; context: {options: filterOptions}"></ng-container>
-                    </ng-container>
-                    <ng-template #builtInFilterElement>
-                        <div class="p-dropdown-filter-container">
-                            <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" [attr.aria-activedescendant]="overlayVisible ? 'p-highlighted-option' : labelId">
-                            <span class="p-dropdown-filter-icon pi pi-search"></span>
-                        </div>
-                    </ng-template>
-                </div>
-                <div class="p-dropdown-items-wrapper" [style.max-height]="virtualScroll ? 'auto' : (scrollHeight||'auto')">
-                    <p-scroller *ngIf="virtualScroll" #scroller [items]="optionsToDisplay" [style]="{'height': scrollHeight}" [itemSize]="virtualScrollItemSize||_itemSize" [autoSize]="true"
-                        [lazy]="lazy" (onLazyLoad)="onLazyLoad.emit($event)" [options]="virtualScrollOptions">
-                        <ng-template pTemplate="content" let-items let-scrollerOptions="options">
-                            <ng-container *ngTemplateOutlet="buildInItems; context: {$implicit: items, options: scrollerOptions}"></ng-container>
-                        </ng-template>
-                        <ng-container *ngIf="loaderTemplate">
-                            <ng-template pTemplate="loader" let-scrollerOptions="options">
-                                <ng-container *ngTemplateOutlet="loaderTemplate; context: {options: scrollerOptions}"></ng-container>
+            <p-overlay
+                #overlay
+                [(visible)]="overlayVisible"
+                [options]="overlayOptions"
+                [target]="'@parent'"
+                [appendTo]="appendTo"
+                [autoZIndex]="autoZIndex"
+                [baseZIndex]="baseZIndex"
+                [showTransitionOptions]="showTransitionOptions"
+                [hideTransitionOptions]="hideTransitionOptions"
+                (onAnimationStart)="onOverlayAnimationStart($event)"
+                (onHide)="hide()"
+            >
+                <ng-template pTemplate="content">
+                    <div [ngClass]="'p-dropdown-panel p-component'" [ngStyle]="panelStyle" [class]="panelStyleClass">
+                        <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
+                        <div class="p-dropdown-header" *ngIf="filter" (click)="$event.stopPropagation()">
+                            <ng-container *ngIf="filterTemplate; else builtInFilterElement">
+                                <ng-container *ngTemplateOutlet="filterTemplate; context: { options: filterOptions }"></ng-container>
+                            </ng-container>
+                            <ng-template #builtInFilterElement>
+                                <div class="p-dropdown-filter-container">
+                                    <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"
+                                        [attr.aria-activedescendant]="overlayVisible ? 'p-highlighted-option' : labelId"
+                                    />
+                                    <span class="p-dropdown-filter-icon pi pi-search"></span>
+                                </div>
                             </ng-template>
-                        </ng-container>
-                    </p-scroller>
-                    <ng-container *ngIf="!virtualScroll">
-                        <ng-container *ngTemplateOutlet="buildInItems; context: {$implicit: optionsToDisplay, options: {}}"></ng-container>
-                    </ng-container>
-
-                    <ng-template #buildInItems let-items let-scrollerOptions="options">
-                        <ul #items [attr.id]="listId" class="p-dropdown-items" [ngClass]="scrollerOptions.contentStyleClass" [style]="scrollerOptions.contentStyle" role="listbox">
-                            <ng-container *ngIf="group">
-                                <ng-template ngFor let-optgroup [ngForOf]="items">
-                                    <li class="p-dropdown-item-group" [ngStyle]="{'height': scrollerOptions.itemSize + 'px'}">
-                                        <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>
+                        </div>
+                        <div class="p-dropdown-items-wrapper" [style.max-height]="virtualScroll ? 'auto' : scrollHeight || 'auto'">
+                            <p-scroller
+                                *ngIf="virtualScroll"
+                                #scroller
+                                [items]="optionsToDisplay"
+                                [style]="{ height: scrollHeight }"
+                                [itemSize]="virtualScrollItemSize || _itemSize"
+                                [autoSize]="true"
+                                [lazy]="lazy"
+                                (onLazyLoad)="onLazyLoad.emit($event)"
+                                [options]="virtualScrollOptions"
+                            >
+                                <ng-template pTemplate="content" let-items let-scrollerOptions="options">
+                                    <ng-container *ngTemplateOutlet="buildInItems; context: { $implicit: items, options: scrollerOptions }"></ng-container>
                                 </ng-template>
+                                <ng-container *ngIf="loaderTemplate">
+                                    <ng-template pTemplate="loader" let-scrollerOptions="options">
+                                        <ng-container *ngTemplateOutlet="loaderTemplate; context: { options: scrollerOptions }"></ng-container>
+                                    </ng-template>
+                                </ng-container>
+                            </p-scroller>
+                            <ng-container *ngIf="!virtualScroll">
+                                <ng-container *ngTemplateOutlet="buildInItems; context: { $implicit: optionsToDisplay, options: {} }"></ng-container>
                             </ng-container>
-                            <ng-container *ngIf="!group">
-                                <ng-container *ngTemplateOutlet="itemslist; context: {$implicit: items, selectedOption: selectedOption}"></ng-container>
-                            </ng-container>
-                            <ng-template #itemslist let-options let-selectedOption="selectedOption">
-                                <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-template #buildInItems let-items let-scrollerOptions="options">
+                                <ul #items [attr.id]="listId" class="p-dropdown-items" [ngClass]="scrollerOptions.contentStyleClass" [style]="scrollerOptions.contentStyle" role="listbox">
+                                    <ng-container *ngIf="group">
+                                        <ng-template ngFor let-optgroup [ngForOf]="items">
+                                            <li class="p-dropdown-item-group" [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }">
+                                                <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: items, selectedOption: selectedOption }"></ng-container>
+                                    </ng-container>
+                                    <ng-template #itemslist let-options let-selectedOption="selectedOption">
+                                        <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-template>
+                                    <li *ngIf="filterValue && isEmpty()" class="p-dropdown-empty-message" [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }">
+                                        <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" [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }">
+                                        <ng-container *ngIf="!emptyTemplate; else empty">
+                                            {{ emptyMessageLabel }}
+                                        </ng-container>
+                                        <ng-container #empty *ngTemplateOutlet="emptyTemplate"></ng-container>
+                                    </li>
+                                </ul>
                             </ng-template>
-                            <li *ngIf="filterValue && isEmpty()" class="p-dropdown-empty-message" [ngStyle]="{'height': scrollerOptions.itemSize + 'px'}">
-                                <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" [ngStyle]="{'height': scrollerOptions.itemSize + 'px'}">
-                                <ng-container *ngIf="!emptyTemplate; else empty">
-                                    {{emptyMessageLabel}}
-                                </ng-container>
-                                <ng-container #empty *ngTemplateOutlet="emptyTemplate"></ng-container>
-                            </li>
-                        </ul>
-                    </ng-template>
-                </div>
-                <ng-container *ngTemplateOutlet="footerTemplate"></ng-container>
-            </div>
+                        </div>
+                        <ng-container *ngTemplateOutlet="footerTemplate"></ng-container>
+                    </div>
+                </ng-template>
+            </p-overlay>
         </div>
-    `, animations: [
-                        trigger('overlayAnimation', [
-                            transition(':enter', [
-                                style({ opacity: 0, transform: 'scaleY(0.8)' }),
-                                animate('{{showTransitionParams}}')
-                            ]),
-                            transition(':leave', [
-                                animate('{{hideTransitionParams}}', style({ opacity: 0 }))
-                            ])
-                        ])
-                    ], host: {
-                        'class': 'p-element p-inputwrapper',
+    `, host: {
+                        class: 'p-element p-inputwrapper',
                         '[class.p-inputwrapper-filled]': 'filled',
                         '[class.p-inputwrapper-focus]': 'focused || overlayVisible'
-                    }, providers: [DROPDOWN_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".p-dropdown{display:inline-flex;cursor:pointer;position:relative;-webkit-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;top:0;left:0}.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%}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i3.FilterService }, { type: i3.PrimeNGConfig }, { type: i3.OverlayService }]; }, propDecorators: { scrollHeight: [{
+                    }, providers: [DROPDOWN_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".p-dropdown{display:inline-flex;cursor:pointer;position:relative;-webkit-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-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%}\n"] }]
+        }], 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
@@ -1153,13 +1224,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
                 type: Input
             }], virtualScrollOptions: [{
                 type: Input
-            }], autoZIndex: [{
-                type: Input
-            }], baseZIndex: [{
-                type: Input
-            }], showTransitionOptions: [{
-                type: Input
-            }], hideTransitionOptions: [{
+            }], overlayOptions: [{
                 type: Input
             }], ariaFilterLabel: [{
                 type: Input
@@ -1181,6 +1246,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
                 type: Input
             }], autofocusFilter: [{
                 type: Input
+            }], overlayDirection: [{
+                type: Input
             }], onChange: [{
                 type: Output
             }], onFilter: [{
@@ -1217,6 +1284,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
             }], scroller: [{
                 type: ViewChild,
                 args: ['scroller']
+            }], overlayViewChild: [{
+                type: ViewChild,
+                args: ['overlay']
             }], templates: [{
                 type: ContentChildren,
                 args: [PrimeTemplate]
@@ -1224,6 +1294,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
                 type: Input
             }], itemSize: [{
                 type: Input
+            }], autoZIndex: [{
+                type: Input
+            }], baseZIndex: [{
+                type: Input
+            }], showTransitionOptions: [{
+                type: Input
+            }], hideTransitionOptions: [{
+                type: Input
             }], options: [{
                 type: Input
             }], filterValue: [{
@@ -1232,13 +1310,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
 class DropdownModule {
 }
 DropdownModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: DropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DropdownModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.7", ngImport: i0, type: DropdownModule, declarations: [Dropdown, DropdownItem], imports: [CommonModule, SharedModule, TooltipModule, RippleModule, ScrollerModule, AutoFocusModule], exports: [Dropdown, SharedModule, ScrollerModule] });
-DropdownModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: DropdownModule, imports: [CommonModule, SharedModule, TooltipModule, RippleModule, ScrollerModule, AutoFocusModule, SharedModule, ScrollerModule] });
+DropdownModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.7", ngImport: i0, type: DropdownModule, declarations: [Dropdown, DropdownItem], imports: [CommonModule, OverlayModule, SharedModule, TooltipModule, RippleModule, ScrollerModule, AutoFocusModule], exports: [Dropdown, OverlayModule, SharedModule, ScrollerModule] });
+DropdownModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: DropdownModule, imports: [CommonModule, OverlayModule, SharedModule, TooltipModule, RippleModule, ScrollerModule, AutoFocusModule, OverlayModule, SharedModule, ScrollerModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: DropdownModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, SharedModule, TooltipModule, RippleModule, ScrollerModule, AutoFocusModule],
-                    exports: [Dropdown, SharedModule, ScrollerModule],
+                    imports: [CommonModule, OverlayModule, SharedModule, TooltipModule, RippleModule, ScrollerModule, AutoFocusModule],
+                    exports: [Dropdown, OverlayModule, SharedModule, ScrollerModule],
                     declarations: [Dropdown, DropdownItem]
                 }]
         }] });