primeng 14.1.1 → 14.2.0

package/fesm2015/primeng-cascadeselect.mjs

@@ -1,15 +1,16 @@
-import * as i0 from '@angular/core';
-import { forwardRef, EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, Inject, Input, Output, ViewChild, ContentChildren, NgModule } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { forwardRef, EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, Inject, Input, Output, ViewChild, ContentChildren, NgModule } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i3 from 'primeng/api';
 import { PrimeTemplate, SharedModule } from 'primeng/api';
-import { ObjectUtils, ZIndexUtils } from 'primeng/utils';
-import { DomHandler, ConnectedOverlayScrollHandler } from 'primeng/dom';
-import { trigger, transition, style, animate } from '@angular/animations';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
+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 { ObjectUtils } from 'primeng/utils';
 
 const CASCADESELECT_VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
@@ -28,7 +29,6 @@ class CascadeSelectSub {
     get parentActive() {
         return this._parentActive;
     }
-    ;
     set parentActive(val) {
         if (!val) {
             this.activeOption = null;
@@ -50,7 +50,7 @@ class CascadeSelectSub {
     }
     onOptionClick(event, option) {
         if (this.isOptionGroup(option)) {
-            this.activeOption = (this.activeOption === option) ? null : option;
+            this.activeOption = this.activeOption === option ? null : option;
             this.onGroupSelect.emit({
                 originalEvent: event,
                 value: option
@@ -154,28 +154,41 @@ class CascadeSelectSub {
         const viewport = DomHandler.getViewport();
         const sublistWidth = this.el.nativeElement.children[0].offsetParent ? this.el.nativeElement.children[0].offsetWidth : DomHandler.getHiddenElementOuterWidth(this.el.nativeElement.children[0]);
         const itemOuterWidth = DomHandler.getOuterWidth(parentItem.children[0]);
-        if ((parseInt(containerOffset.left, 10) + itemOuterWidth + sublistWidth) > (viewport.width - DomHandler.calculateScrollbarWidth())) {
+        if (parseInt(containerOffset.left, 10) + itemOuterWidth + sublistWidth > viewport.width - DomHandler.calculateScrollbarWidth()) {
             this.el.nativeElement.children[0].style.left = '-200%';
         }
     }
 }
 CascadeSelectSub.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: CascadeSelectSub, deps: [{ token: forwardRef(() => CascadeSelect) }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
 CascadeSelectSub.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: CascadeSelectSub, selector: "p-cascadeSelectSub", inputs: { selectionPath: "selectionPath", options: "options", optionGroupChildren: "optionGroupChildren", optionTemplate: "optionTemplate", level: "level", optionLabel: "optionLabel", optionValue: "optionValue", optionGroupLabel: "optionGroupLabel", dirty: "dirty", root: "root", parentActive: "parentActive" }, outputs: { onSelect: "onSelect", onGroupSelect: "onGroupSelect" }, ngImport: i0, template: `
-        <ul class="p-cascadeselect-panel p-cascadeselect-items" [ngClass]="{'p-cascadeselect-panel-root': root}" role="listbox" aria-orientation="horizontal">
+        <ul class="p-cascadeselect-panel p-cascadeselect-items" [ngClass]="{ 'p-cascadeselect-panel-root': root }" role="listbox" aria-orientation="horizontal">
             <ng-template ngFor let-option [ngForOf]="options" let-i="index">
                 <li [ngClass]="getItemClass(option)" role="none">
                     <div class="p-cascadeselect-item-content" (click)="onOptionClick($event, option)" tabindex="0" (keydown)="onKeyDown($event, option, i)" pRipple>
-                        <ng-container *ngIf="optionTemplate;else defaultOptionTemplate">
-                            <ng-container *ngTemplateOutlet="optionTemplate; context: {$implicit: option}"></ng-container>
+                        <ng-container *ngIf="optionTemplate; else defaultOptionTemplate">
+                            <ng-container *ngTemplateOutlet="optionTemplate; context: { $implicit: option }"></ng-container>
                         </ng-container>
                         <ng-template #defaultOptionTemplate>
-                            <span class="p-cascadeselect-item-text">{{getOptionLabelToRender(option)}}</span>
+                            <span class="p-cascadeselect-item-text">{{ getOptionLabelToRender(option) }}</span>
                         </ng-template>
                         <span class="p-cascadeselect-group-icon pi pi-angle-right" *ngIf="isOptionGroup(option)"></span>
                     </div>
-                    <p-cascadeSelectSub *ngIf="isOptionGroup(option) && isOptionActive(option)" class="p-cascadeselect-sublist" [selectionPath]="selectionPath" [options]="getOptionGroupChildren(option)"
-                        [optionLabel]="optionLabel" [optionValue]="optionValue" [level]="level + 1" (onSelect)="onOptionSelect($event)" (onOptionGroupSelect)="onOptionGroupSelect()"
-                        [optionGroupLabel]="optionGroupLabel" [optionGroupChildren]="optionGroupChildren" [parentActive]="isOptionActive(option)" [dirty]="dirty" [optionTemplate]="optionTemplate">
+                    <p-cascadeSelectSub
+                        *ngIf="isOptionGroup(option) && isOptionActive(option)"
+                        class="p-cascadeselect-sublist"
+                        [selectionPath]="selectionPath"
+                        [options]="getOptionGroupChildren(option)"
+                        [optionLabel]="optionLabel"
+                        [optionValue]="optionValue"
+                        [level]="level + 1"
+                        (onSelect)="onOptionSelect($event)"
+                        (onOptionGroupSelect)="onOptionGroupSelect()"
+                        [optionGroupLabel]="optionGroupLabel"
+                        [optionGroupChildren]="optionGroupChildren"
+                        [parentActive]="isOptionActive(option)"
+                        [dirty]="dirty"
+                        [optionTemplate]="optionTemplate"
+                    >
                     </p-cascadeSelectSub>
                 </li>
             </ng-template>
@@ -186,21 +199,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
             args: [{
                     selector: 'p-cascadeSelectSub',
                     template: `
-        <ul class="p-cascadeselect-panel p-cascadeselect-items" [ngClass]="{'p-cascadeselect-panel-root': root}" role="listbox" aria-orientation="horizontal">
+        <ul class="p-cascadeselect-panel p-cascadeselect-items" [ngClass]="{ 'p-cascadeselect-panel-root': root }" role="listbox" aria-orientation="horizontal">
             <ng-template ngFor let-option [ngForOf]="options" let-i="index">
                 <li [ngClass]="getItemClass(option)" role="none">
                     <div class="p-cascadeselect-item-content" (click)="onOptionClick($event, option)" tabindex="0" (keydown)="onKeyDown($event, option, i)" pRipple>
-                        <ng-container *ngIf="optionTemplate;else defaultOptionTemplate">
-                            <ng-container *ngTemplateOutlet="optionTemplate; context: {$implicit: option}"></ng-container>
+                        <ng-container *ngIf="optionTemplate; else defaultOptionTemplate">
+                            <ng-container *ngTemplateOutlet="optionTemplate; context: { $implicit: option }"></ng-container>
                         </ng-container>
                         <ng-template #defaultOptionTemplate>
-                            <span class="p-cascadeselect-item-text">{{getOptionLabelToRender(option)}}</span>
+                            <span class="p-cascadeselect-item-text">{{ getOptionLabelToRender(option) }}</span>
                         </ng-template>
                         <span class="p-cascadeselect-group-icon pi pi-angle-right" *ngIf="isOptionGroup(option)"></span>
                     </div>
-                    <p-cascadeSelectSub *ngIf="isOptionGroup(option) && isOptionActive(option)" class="p-cascadeselect-sublist" [selectionPath]="selectionPath" [options]="getOptionGroupChildren(option)"
-                        [optionLabel]="optionLabel" [optionValue]="optionValue" [level]="level + 1" (onSelect)="onOptionSelect($event)" (onOptionGroupSelect)="onOptionGroupSelect()"
-                        [optionGroupLabel]="optionGroupLabel" [optionGroupChildren]="optionGroupChildren" [parentActive]="isOptionActive(option)" [dirty]="dirty" [optionTemplate]="optionTemplate">
+                    <p-cascadeSelectSub
+                        *ngIf="isOptionGroup(option) && isOptionActive(option)"
+                        class="p-cascadeselect-sublist"
+                        [selectionPath]="selectionPath"
+                        [options]="getOptionGroupChildren(option)"
+                        [optionLabel]="optionLabel"
+                        [optionValue]="optionValue"
+                        [level]="level + 1"
+                        (onSelect)="onOptionSelect($event)"
+                        (onOptionGroupSelect)="onOptionGroupSelect()"
+                        [optionGroupLabel]="optionGroupLabel"
+                        [optionGroupChildren]="optionGroupChildren"
+                        [parentActive]="isOptionActive(option)"
+                        [dirty]="dirty"
+                        [optionTemplate]="optionTemplate"
+                    >
                     </p-cascadeSelectSub>
                 </li>
             </ng-template>
@@ -247,8 +273,6 @@ class CascadeSelect {
         this.cd = cd;
         this.config = config;
         this.overlayService = overlayService;
-        this.showTransitionOptions = '.12s cubic-bezier(0, 0, 0.2, 1)';
-        this.hideTransitionOptions = '.1s linear';
         this.showClear = false;
         this.onChange = new EventEmitter();
         this.onGroupChange = new EventEmitter();
@@ -265,6 +289,20 @@ class CascadeSelect {
         this.onModelChange = () => { };
         this.onModelTouched = () => { };
     }
+    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.');
+    }
     ngOnInit() {
         this.updateSelectionPath();
     }
@@ -331,17 +369,15 @@ class CascadeSelect {
                 }
             }
         }
-        else if ((ObjectUtils.equals(this.value, this.getOptionValue(option), this.dataKey))) {
+        else if (ObjectUtils.equals(this.value, this.getOptionValue(option), this.dataKey)) {
             return [option];
         }
         return null;
     }
     show() {
-        this.onBeforeShow.emit();
         this.overlayVisible = true;
     }
     hide() {
-        this.onBeforeHide.emit();
         this.overlayVisible = false;
         this.cd.markForCheck();
     }
@@ -355,10 +391,11 @@ class CascadeSelect {
         this.cd.markForCheck();
     }
     onClick(event) {
+        var _a, _b, _c;
         if (this.disabled) {
             return;
         }
-        if (!this.overlayEl || !this.overlayEl || !this.overlayEl.contains(event.target)) {
+        if (!((_c = (_b = (_a = this.overlayViewChild) === null || _a === void 0 ? void 0 : _a.el) === null || _b === void 0 ? void 0 : _b.nativeElement) === null || _c === void 0 ? void 0 : _c.contains(event.target))) {
             if (this.overlayVisible) {
                 this.hide();
             }
@@ -374,45 +411,13 @@ class CascadeSelect {
     onBlur() {
         this.focused = false;
     }
-    onOverlayClick(event) {
-        this.overlayService.add({
-            originalEvent: event,
-            target: this.el.nativeElement
-        });
-    }
-    onOverlayAnimationStart(event) {
-        switch (event.toState) {
-            case 'visible':
-                this.overlayEl = event.element;
-                this.onOverlayEnter();
-                break;
-        }
-    }
     onOverlayAnimationDone(event) {
         switch (event.toState) {
             case 'void':
-                this.onOverlayLeave();
+                this.dirty = false;
                 break;
         }
     }
-    onOverlayEnter() {
-        ZIndexUtils.set('overlay', this.overlayEl, this.config.zIndex.overlay);
-        this.appendContainer();
-        this.alignOverlay();
-        this.bindOutsideClickListener();
-        this.bindScrollListener();
-        this.bindResizeListener();
-        this.onShow.emit();
-    }
-    onOverlayLeave() {
-        this.unbindOutsideClickListener();
-        this.unbindScrollListener();
-        this.unbindResizeListener();
-        this.onHide.emit();
-        ZIndexUtils.clear(this.overlayEl);
-        this.overlayEl = null;
-        this.dirty = false;
-    }
     writeValue(value) {
         this.value = value;
         this.updateSelectionPath();
@@ -428,78 +433,6 @@ class CascadeSelect {
         this.disabled = val;
         this.cd.markForCheck();
     }
-    alignOverlay() {
-        if (this.appendTo) {
-            DomHandler.absolutePosition(this.overlayEl, this.containerEl.nativeElement);
-            this.overlayEl.style.minWidth = DomHandler.getOuterWidth(this.containerEl.nativeElement) + 'px';
-        }
-        else {
-            DomHandler.relativePosition(this.overlayEl, this.containerEl.nativeElement);
-        }
-    }
-    bindOutsideClickListener() {
-        if (!this.outsideClickListener) {
-            this.outsideClickListener = (event) => {
-                if (this.overlayVisible && this.overlayEl && !this.containerEl.nativeElement.contains(event.target) && !this.overlayEl.contains(event.target)) {
-                    this.hide();
-                }
-            };
-            document.addEventListener('click', this.outsideClickListener);
-        }
-    }
-    unbindOutsideClickListener() {
-        if (this.outsideClickListener) {
-            document.removeEventListener('click', this.outsideClickListener);
-            this.outsideClickListener = null;
-        }
-    }
-    bindScrollListener() {
-        if (!this.scrollHandler) {
-            this.scrollHandler = new ConnectedOverlayScrollHandler(this.containerEl.nativeElement, () => {
-                if (this.overlayVisible) {
-                    this.hide();
-                }
-            });
-        }
-        this.scrollHandler.bindScrollListener();
-    }
-    unbindScrollListener() {
-        if (this.scrollHandler) {
-            this.scrollHandler.unbindScrollListener();
-        }
-    }
-    bindResizeListener() {
-        if (!this.resizeListener) {
-            this.resizeListener = () => {
-                if (this.overlayVisible && !DomHandler.isTouchDevice()) {
-                    this.hide();
-                }
-            };
-            window.addEventListener('resize', this.resizeListener);
-        }
-    }
-    unbindResizeListener() {
-        if (this.resizeListener) {
-            window.removeEventListener('resize', this.resizeListener);
-            this.resizeListener = null;
-        }
-    }
-    appendContainer() {
-        if (this.appendTo) {
-            if (this.appendTo === 'body')
-                document.body.appendChild(this.overlayEl);
-            else
-                document.getElementById(this.appendTo).appendChild(this.overlayEl);
-        }
-    }
-    restoreAppend() {
-        if (this.overlayEl && this.appendTo) {
-            if (this.appendTo === 'body')
-                document.body.removeChild(this.overlayEl);
-            else
-                document.getElementById(this.appendTo).removeChild(this.overlayEl);
-        }
-    }
     label() {
         if (this.selectionPath) {
             return this.getOptionLabel(this.selectionPath[this.selectionPath.length - 1]);
@@ -511,7 +444,7 @@ class CascadeSelect {
             case 'Down':
             case 'ArrowDown':
                 if (this.overlayVisible) {
-                    DomHandler.findSingle(this.overlayEl, '.p-cascadeselect-item').children[0].focus();
+                    DomHandler.findSingle(this.panelEl.nativeElement, '.p-cascadeselect-item').children[0].focus();
                 }
                 else if (event.altKey && this.options && this.options.length) {
                     this.show();
@@ -550,105 +483,157 @@ class CascadeSelect {
             'p-cascadeselect-label-empty': !this.value && (this.label() === 'p-emptylabel' || this.label().length === 0)
         };
     }
-    ngOnDestroy() {
-        this.restoreAppend();
-        this.unbindOutsideClickListener();
-        this.unbindResizeListener();
-        if (this.scrollHandler) {
-            this.scrollHandler.destroy();
-            this.scrollHandler = null;
-        }
-        this.overlayEl = null;
-    }
 }
 CascadeSelect.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: CascadeSelect, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i3.PrimeNGConfig }, { token: i3.OverlayService }], target: i0.ɵɵFactoryTarget.Component });
-CascadeSelect.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: CascadeSelect, selector: "p-cascadeSelect", inputs: { styleClass: "styleClass", style: "style", options: "options", optionLabel: "optionLabel", optionValue: "optionValue", optionGroupLabel: "optionGroupLabel", optionGroupChildren: "optionGroupChildren", placeholder: "placeholder", value: "value", dataKey: "dataKey", inputId: "inputId", tabindex: "tabindex", ariaLabelledBy: "ariaLabelledBy", inputLabel: "inputLabel", ariaLabel: "ariaLabel", appendTo: "appendTo", disabled: "disabled", rounded: "rounded", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions", showClear: "showClear" }, outputs: { onChange: "onChange", onGroupChange: "onGroupChange", onShow: "onShow", onHide: "onHide", onClear: "onClear", onBeforeShow: "onBeforeShow", onBeforeHide: "onBeforeHide" }, host: { properties: { "class.p-inputwrapper-filled": "filled", "class.p-inputwrapper-focus": "focused || overlayVisible", "class.p-cascadeselect-clearable": "showClear && !disabled" }, classAttribute: "p-element p-inputwrapper" }, providers: [CASCADESELECT_VALUE_ACCESSOR], queries: [{ propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "focusInputEl", first: true, predicate: ["focusInput"], descendants: true }, { propertyName: "containerEl", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: `
+CascadeSelect.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: CascadeSelect, selector: "p-cascadeSelect", inputs: { styleClass: "styleClass", style: "style", options: "options", optionLabel: "optionLabel", optionValue: "optionValue", optionGroupLabel: "optionGroupLabel", optionGroupChildren: "optionGroupChildren", placeholder: "placeholder", value: "value", dataKey: "dataKey", inputId: "inputId", tabindex: "tabindex", ariaLabelledBy: "ariaLabelledBy", inputLabel: "inputLabel", ariaLabel: "ariaLabel", appendTo: "appendTo", disabled: "disabled", rounded: "rounded", showClear: "showClear", panelStyleClass: "panelStyleClass", panelStyle: "panelStyle", overlayOptions: "overlayOptions", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions" }, outputs: { onChange: "onChange", onGroupChange: "onGroupChange", onShow: "onShow", onHide: "onHide", onClear: "onClear", onBeforeShow: "onBeforeShow", onBeforeHide: "onBeforeHide" }, host: { properties: { "class.p-inputwrapper-filled": "filled", "class.p-inputwrapper-focus": "focused || overlayVisible", "class.p-cascadeselect-clearable": "showClear && !disabled" }, classAttribute: "p-element p-inputwrapper" }, providers: [CASCADESELECT_VALUE_ACCESSOR], queries: [{ propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "focusInputEl", first: true, predicate: ["focusInput"], descendants: true }, { propertyName: "containerEl", first: true, predicate: ["container"], descendants: true }, { propertyName: "panelEl", first: true, predicate: ["panel"], descendants: true }, { propertyName: "overlayViewChild", first: true, predicate: ["overlay"], descendants: true }], ngImport: i0, template: `
         <div #container [ngClass]="containerClass()" [class]="styleClass" [ngStyle]="style" (click)="onClick($event)">
             <div class="p-hidden-accessible">
-                <input #focusInput type="text" [attr.id]="inputId" readonly [disabled]="disabled" (focus)="onFocus()" (blur)="onBlur()"  (keydown)="onKeyDown($event)" [attr.tabindex]="tabindex"
-                    aria-haspopup="listbox" [attr.aria-expanded]="overlayVisible" [attr.aria-labelledby]="ariaLabelledBy" [attr.label]="inputLabel" [attr.aria-label]="ariaLabel">
+                <input
+                    #focusInput
+                    type="text"
+                    [attr.id]="inputId"
+                    readonly
+                    [disabled]="disabled"
+                    (focus)="onFocus()"
+                    (blur)="onBlur()"
+                    (keydown)="onKeyDown($event)"
+                    [attr.tabindex]="tabindex"
+                    aria-haspopup="listbox"
+                    [attr.aria-expanded]="overlayVisible"
+                    [attr.aria-labelledby]="ariaLabelledBy"
+                    [attr.label]="inputLabel"
+                    [attr.aria-label]="ariaLabel"
+                />
             </div>
             <span [ngClass]="labelClass()">
-                <ng-container *ngIf="valueTemplate;else defaultValueTemplate">
-                        <ng-container *ngTemplateOutlet="valueTemplate; context: {$implicit: value, placeholder: placeholder}"></ng-container>
+                <ng-container *ngIf="valueTemplate; else defaultValueTemplate">
+                    <ng-container *ngTemplateOutlet="valueTemplate; context: { $implicit: value, placeholder: placeholder }"></ng-container>
                 </ng-container>
                 <ng-template #defaultValueTemplate>
-                    {{label()}}
+                    {{ label() }}
                 </ng-template>
             </span>
             <i *ngIf="filled && !disabled && showClear" class="p-cascadeselect-clear-icon pi pi-times" (click)="clear($event)"></i>
             <div class="p-cascadeselect-trigger" role="button" aria-haspopup="listbox" [attr.aria-expanded]="overlayVisible">
                 <span class="p-cascadeselect-trigger-icon pi pi-chevron-down"></span>
             </div>
-            <div class="p-cascadeselect-panel p-component" *ngIf="overlayVisible" (click)="onOverlayClick($event)"
-                [@overlayAnimation]="{value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}" (@overlayAnimation.start)="onOverlayAnimationStart($event)" (@overlayAnimation.done)="onOverlayAnimationDone($event)">
-                <div class="p-cascadeselect-items-wrapper">
-                    <p-cascadeSelectSub [options]="options" [selectionPath]="selectionPath" class="p-cascadeselect-items"
-                        [optionLabel]="optionLabel" [optionValue]="optionValue" [level]="0" [optionTemplate]="optionTemplate"
-                        [optionGroupLabel]="optionGroupLabel" [optionGroupChildren]="optionGroupChildren"
-                        (onSelect)="onOptionSelect($event)" (onGroupSelect)="onOptionGroupSelect($event)" [dirty]="dirty" [root]="true">
-                    </p-cascadeSelectSub>
-                </div>
-            </div>
+            <p-overlay
+                #overlay
+                [(visible)]="overlayVisible"
+                [options]="overlayOptions"
+                [target]="'@parent'"
+                [appendTo]="appendTo"
+                [showTransitionOptions]="showTransitionOptions"
+                [hideTransitionOptions]="hideTransitionOptions"
+                (onAnimationDone)="onOverlayAnimationDone($event)"
+                (onBeforeShow)="onBeforeShow.emit($event)"
+                (onShow)="onShow.emit($event)"
+                (onBeforeHide)="onBeforeHide.emit($event)"
+                (onHide)="onHide.emit($event)"
+            >
+                <ng-template pTemplate="content">
+                    <div #panel class="p-cascadeselect-panel p-component" [class]="panelStyleClass" [ngStyle]="panelStyle">
+                        <div class="p-cascadeselect-items-wrapper">
+                            <p-cascadeSelectSub
+                                [options]="options"
+                                [selectionPath]="selectionPath"
+                                class="p-cascadeselect-items"
+                                [optionLabel]="optionLabel"
+                                [optionValue]="optionValue"
+                                [level]="0"
+                                [optionTemplate]="optionTemplate"
+                                [optionGroupLabel]="optionGroupLabel"
+                                [optionGroupChildren]="optionGroupChildren"
+                                (onSelect)="onOptionSelect($event)"
+                                (onGroupSelect)="onOptionGroupSelect($event)"
+                                [dirty]="dirty"
+                                [root]="true"
+                            >
+                            </p-cascadeSelectSub>
+                        </div>
+                    </div>
+                </ng-template>
+            </p-overlay>
         </div>
-    `, isInline: true, styles: [".p-cascadeselect{display:inline-flex;cursor:pointer;position:relative;-webkit-user-select:none;user-select:none}.p-cascadeselect-trigger{display:flex;align-items:center;justify-content:center;flex-shrink:0}.p-cascadeselect-label{display:block;white-space:nowrap;overflow:hidden;flex:1 1 auto;width:1%;text-overflow:ellipsis;cursor:pointer}.p-cascadeselect-label-empty{overflow:hidden;visibility:hidden}.p-cascadeselect .p-cascadeselect-panel{min-width:100%}.p-cascadeselect-panel{position:absolute;top:0;left:0}.p-cascadeselect-item{cursor:pointer;font-weight:400;white-space:nowrap}.p-cascadeselect-item-content{display:flex;align-items:center;overflow:hidden;position:relative}.p-cascadeselect-group-icon{margin-left:auto}.p-cascadeselect-items{margin:0;padding:0;list-style-type:none}.p-fluid .p-cascadeselect{display:flex}.p-fluid .p-cascadeselect .p-cascadeselect-label{width:1%}.p-cascadeselect-sublist{position:absolute;min-width:100%;z-index:1;display:none}.p-cascadeselect-item-active{overflow:visible!important}.p-cascadeselect-item-active>.p-cascadeselect-sublist{display:block;left:100%;top:0}.p-cascadeselect-clear-icon{position:absolute;top:50%;margin-top:-.5rem;cursor:pointer}.p-cascadeselect-clearable{position:relative}\n"], 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: "component", type: CascadeSelectSub, selector: "p-cascadeSelectSub", inputs: ["selectionPath", "options", "optionGroupChildren", "optionTemplate", "level", "optionLabel", "optionValue", "optionGroupLabel", "dirty", "root", "parentActive"], outputs: ["onSelect", "onGroupSelect"] }], 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-cascadeselect{display:inline-flex;cursor:pointer;position:relative;-webkit-user-select:none;user-select:none}.p-cascadeselect-trigger{display:flex;align-items:center;justify-content:center;flex-shrink:0}.p-cascadeselect-label{display:block;white-space:nowrap;overflow:hidden;flex:1 1 auto;width:1%;text-overflow:ellipsis;cursor:pointer}.p-cascadeselect-label-empty{overflow:hidden;visibility:hidden}.p-cascadeselect-item{cursor:pointer;font-weight:400;white-space:nowrap}.p-cascadeselect-item-content{display:flex;align-items:center;overflow:hidden;position:relative}.p-cascadeselect-group-icon{margin-left:auto}.p-cascadeselect-items{margin:0;padding:0;list-style-type:none}.p-fluid .p-cascadeselect{display:flex}.p-fluid .p-cascadeselect .p-cascadeselect-label{width:1%}.p-cascadeselect-sublist{position:absolute;min-width:100%;z-index:1;display:none}.p-cascadeselect-item-active{overflow:visible!important}.p-cascadeselect-item-active>.p-cascadeselect-sublist{display:block;left:100%;top:0}.p-cascadeselect-clear-icon{position:absolute;top:50%;margin-top:-.5rem;cursor:pointer}.p-cascadeselect-clearable,.p-overlay-modal .p-cascadeselect-sublist{position:relative}.p-overlay-modal .p-cascadeselect-item-active>.p-cascadeselect-sublist{left:0}\n"], 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: "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: "component", type: CascadeSelectSub, selector: "p-cascadeSelectSub", inputs: ["selectionPath", "options", "optionGroupChildren", "optionTemplate", "level", "optionLabel", "optionValue", "optionGroupLabel", "dirty", "root", "parentActive"], outputs: ["onSelect", "onGroupSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: CascadeSelect, decorators: [{
             type: Component,
             args: [{ selector: 'p-cascadeSelect', template: `
         <div #container [ngClass]="containerClass()" [class]="styleClass" [ngStyle]="style" (click)="onClick($event)">
             <div class="p-hidden-accessible">
-                <input #focusInput type="text" [attr.id]="inputId" readonly [disabled]="disabled" (focus)="onFocus()" (blur)="onBlur()"  (keydown)="onKeyDown($event)" [attr.tabindex]="tabindex"
-                    aria-haspopup="listbox" [attr.aria-expanded]="overlayVisible" [attr.aria-labelledby]="ariaLabelledBy" [attr.label]="inputLabel" [attr.aria-label]="ariaLabel">
+                <input
+                    #focusInput
+                    type="text"
+                    [attr.id]="inputId"
+                    readonly
+                    [disabled]="disabled"
+                    (focus)="onFocus()"
+                    (blur)="onBlur()"
+                    (keydown)="onKeyDown($event)"
+                    [attr.tabindex]="tabindex"
+                    aria-haspopup="listbox"
+                    [attr.aria-expanded]="overlayVisible"
+                    [attr.aria-labelledby]="ariaLabelledBy"
+                    [attr.label]="inputLabel"
+                    [attr.aria-label]="ariaLabel"
+                />
             </div>
             <span [ngClass]="labelClass()">
-                <ng-container *ngIf="valueTemplate;else defaultValueTemplate">
-                        <ng-container *ngTemplateOutlet="valueTemplate; context: {$implicit: value, placeholder: placeholder}"></ng-container>
+                <ng-container *ngIf="valueTemplate; else defaultValueTemplate">
+                    <ng-container *ngTemplateOutlet="valueTemplate; context: { $implicit: value, placeholder: placeholder }"></ng-container>
                 </ng-container>
                 <ng-template #defaultValueTemplate>
-                    {{label()}}
+                    {{ label() }}
                 </ng-template>
             </span>
             <i *ngIf="filled && !disabled && showClear" class="p-cascadeselect-clear-icon pi pi-times" (click)="clear($event)"></i>
             <div class="p-cascadeselect-trigger" role="button" aria-haspopup="listbox" [attr.aria-expanded]="overlayVisible">
                 <span class="p-cascadeselect-trigger-icon pi pi-chevron-down"></span>
             </div>
-            <div class="p-cascadeselect-panel p-component" *ngIf="overlayVisible" (click)="onOverlayClick($event)"
-                [@overlayAnimation]="{value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}" (@overlayAnimation.start)="onOverlayAnimationStart($event)" (@overlayAnimation.done)="onOverlayAnimationDone($event)">
-                <div class="p-cascadeselect-items-wrapper">
-                    <p-cascadeSelectSub [options]="options" [selectionPath]="selectionPath" class="p-cascadeselect-items"
-                        [optionLabel]="optionLabel" [optionValue]="optionValue" [level]="0" [optionTemplate]="optionTemplate"
-                        [optionGroupLabel]="optionGroupLabel" [optionGroupChildren]="optionGroupChildren"
-                        (onSelect)="onOptionSelect($event)" (onGroupSelect)="onOptionGroupSelect($event)" [dirty]="dirty" [root]="true">
-                    </p-cascadeSelectSub>
-                </div>
-            </div>
+            <p-overlay
+                #overlay
+                [(visible)]="overlayVisible"
+                [options]="overlayOptions"
+                [target]="'@parent'"
+                [appendTo]="appendTo"
+                [showTransitionOptions]="showTransitionOptions"
+                [hideTransitionOptions]="hideTransitionOptions"
+                (onAnimationDone)="onOverlayAnimationDone($event)"
+                (onBeforeShow)="onBeforeShow.emit($event)"
+                (onShow)="onShow.emit($event)"
+                (onBeforeHide)="onBeforeHide.emit($event)"
+                (onHide)="onHide.emit($event)"
+            >
+                <ng-template pTemplate="content">
+                    <div #panel class="p-cascadeselect-panel p-component" [class]="panelStyleClass" [ngStyle]="panelStyle">
+                        <div class="p-cascadeselect-items-wrapper">
+                            <p-cascadeSelectSub
+                                [options]="options"
+                                [selectionPath]="selectionPath"
+                                class="p-cascadeselect-items"
+                                [optionLabel]="optionLabel"
+                                [optionValue]="optionValue"
+                                [level]="0"
+                                [optionTemplate]="optionTemplate"
+                                [optionGroupLabel]="optionGroupLabel"
+                                [optionGroupChildren]="optionGroupChildren"
+                                (onSelect)="onOptionSelect($event)"
+                                (onGroupSelect)="onOptionGroupSelect($event)"
+                                [dirty]="dirty"
+                                [root]="true"
+                            >
+                            </p-cascadeSelectSub>
+                        </div>
+                    </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',
                         '[class.p-cascadeselect-clearable]': 'showClear && !disabled'
-                    }, providers: [CASCADESELECT_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".p-cascadeselect{display:inline-flex;cursor:pointer;position:relative;-webkit-user-select:none;user-select:none}.p-cascadeselect-trigger{display:flex;align-items:center;justify-content:center;flex-shrink:0}.p-cascadeselect-label{display:block;white-space:nowrap;overflow:hidden;flex:1 1 auto;width:1%;text-overflow:ellipsis;cursor:pointer}.p-cascadeselect-label-empty{overflow:hidden;visibility:hidden}.p-cascadeselect .p-cascadeselect-panel{min-width:100%}.p-cascadeselect-panel{position:absolute;top:0;left:0}.p-cascadeselect-item{cursor:pointer;font-weight:400;white-space:nowrap}.p-cascadeselect-item-content{display:flex;align-items:center;overflow:hidden;position:relative}.p-cascadeselect-group-icon{margin-left:auto}.p-cascadeselect-items{margin:0;padding:0;list-style-type:none}.p-fluid .p-cascadeselect{display:flex}.p-fluid .p-cascadeselect .p-cascadeselect-label{width:1%}.p-cascadeselect-sublist{position:absolute;min-width:100%;z-index:1;display:none}.p-cascadeselect-item-active{overflow:visible!important}.p-cascadeselect-item-active>.p-cascadeselect-sublist{display:block;left:100%;top:0}.p-cascadeselect-clear-icon{position:absolute;top:50%;margin-top:-.5rem;cursor:pointer}.p-cascadeselect-clearable{position:relative}\n"] }]
+                    }, providers: [CASCADESELECT_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".p-cascadeselect{display:inline-flex;cursor:pointer;position:relative;-webkit-user-select:none;user-select:none}.p-cascadeselect-trigger{display:flex;align-items:center;justify-content:center;flex-shrink:0}.p-cascadeselect-label{display:block;white-space:nowrap;overflow:hidden;flex:1 1 auto;width:1%;text-overflow:ellipsis;cursor:pointer}.p-cascadeselect-label-empty{overflow:hidden;visibility:hidden}.p-cascadeselect-item{cursor:pointer;font-weight:400;white-space:nowrap}.p-cascadeselect-item-content{display:flex;align-items:center;overflow:hidden;position:relative}.p-cascadeselect-group-icon{margin-left:auto}.p-cascadeselect-items{margin:0;padding:0;list-style-type:none}.p-fluid .p-cascadeselect{display:flex}.p-fluid .p-cascadeselect .p-cascadeselect-label{width:1%}.p-cascadeselect-sublist{position:absolute;min-width:100%;z-index:1;display:none}.p-cascadeselect-item-active{overflow:visible!important}.p-cascadeselect-item-active>.p-cascadeselect-sublist{display:block;left:100%;top:0}.p-cascadeselect-clear-icon{position:absolute;top:50%;margin-top:-.5rem;cursor:pointer}.p-cascadeselect-clearable,.p-overlay-modal .p-cascadeselect-sublist{position:relative}.p-overlay-modal .p-cascadeselect-item-active>.p-cascadeselect-sublist{left:0}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i3.PrimeNGConfig }, { type: i3.OverlayService }]; }, propDecorators: { styleClass: [{
                 type: Input
             }], style: [{
@@ -685,11 +670,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
                 type: Input
             }], rounded: [{
                 type: Input
-            }], showTransitionOptions: [{
+            }], showClear: [{
                 type: Input
-            }], hideTransitionOptions: [{
+            }], panelStyleClass: [{
                 type: Input
-            }], showClear: [{
+            }], panelStyle: [{
+                type: Input
+            }], overlayOptions: [{
                 type: Input
             }], focusInputEl: [{
                 type: ViewChild,
@@ -697,6 +684,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
             }], containerEl: [{
                 type: ViewChild,
                 args: ['container']
+            }], panelEl: [{
+                type: ViewChild,
+                args: ['panel']
+            }], overlayViewChild: [{
+                type: ViewChild,
+                args: ['overlay']
             }], onChange: [{
                 type: Output
             }], onGroupChange: [{
@@ -714,17 +707,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
             }], templates: [{
                 type: ContentChildren,
                 args: [PrimeTemplate]
+            }], showTransitionOptions: [{
+                type: Input
+            }], hideTransitionOptions: [{
+                type: Input
             }] } });
 class CascadeSelectModule {
 }
 CascadeSelectModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: CascadeSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CascadeSelectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.7", ngImport: i0, type: CascadeSelectModule, declarations: [CascadeSelect, CascadeSelectSub], imports: [CommonModule, SharedModule, RippleModule], exports: [CascadeSelect, CascadeSelectSub, SharedModule] });
-CascadeSelectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: CascadeSelectModule, imports: [CommonModule, SharedModule, RippleModule, SharedModule] });
+CascadeSelectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.7", ngImport: i0, type: CascadeSelectModule, declarations: [CascadeSelect, CascadeSelectSub], imports: [CommonModule, OverlayModule, SharedModule, RippleModule], exports: [CascadeSelect, OverlayModule, CascadeSelectSub, SharedModule] });
+CascadeSelectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: CascadeSelectModule, imports: [CommonModule, OverlayModule, SharedModule, RippleModule, OverlayModule, SharedModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: CascadeSelectModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, SharedModule, RippleModule],
-                    exports: [CascadeSelect, CascadeSelectSub, SharedModule],
+                    imports: [CommonModule, OverlayModule, SharedModule, RippleModule],
+                    exports: [CascadeSelect, OverlayModule, CascadeSelectSub, SharedModule],
                     declarations: [CascadeSelect, CascadeSelectSub]
                 }]
         }] });