primeng 20.3.0 → 21.0.0-rc.1

package/fesm2022/primeng-popover.mjs

@@ -1,9 +1,8 @@
 export * from 'primeng/types/popover';
-import { trigger, state, transition, style as style$1, animate } from '@angular/animations';
 import * as i2 from '@angular/common';
 import { isPlatformBrowser, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, InjectionToken, inject, EventEmitter, NgZone, booleanAttribute, numberAttribute, HostListener, ContentChildren, ContentChild, Output, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { Injectable, InjectionToken, inject, input, computed, EventEmitter, NgZone, booleanAttribute, numberAttribute, HostListener, ContentChildren, ContentChild, Output, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import { $dt } from '@primeuix/styled';
 import { isIOS, appendChild, absolutePosition, getOffset, addClass, findSingle, isTouchDevice } from '@primeuix/utils';
 import { OverlayService, SharedModule, PrimeTemplate } from 'primeng/api';
@@ -11,90 +10,15 @@ import { BaseComponent, PARENT_INSTANCE } from 'primeng/basecomponent';
 import * as i1 from 'primeng/bind';
 import { Bind } from 'primeng/bind';
 import { ConnectedOverlayScrollHandler } from 'primeng/dom';
+import * as i3 from 'primeng/motion';
+import { MotionModule } from 'primeng/motion';
 import { ZIndexUtils } from 'primeng/utils';
+import { style } from '@primeuix/styles/popover';
 import { BaseStyle } from 'primeng/base';
 
-const style = /*css*/ `
-.p-popover {
-    margin-top: dt('popover.gutter');
-    background: dt('popover.background');
-    color: dt('popover.color');
-    border: 1px solid dt('popover.border.color');
-    border-radius: dt('popover.border.radius');
-    box-shadow: dt('popover.shadow');
-    position: absolute
-}
-
-.p-popover-content {
-    padding: dt('popover.content.padding');
-}
-
-.p-popover-flipped {
-    margin-top: calc(dt('popover.gutter') * -1);
-    margin-bottom: dt('popover.gutter');
-}
-
-.p-popover-enter-from {
-    opacity: 0;
-    transform: scaleY(0.8);
-}
-
-.p-popover-leave-to {
-    opacity: 0;
-}
-
-.p-popover-enter-active {
-    transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1);
-}
-
-.p-popover-leave-active {
-    transition: opacity 0.1s linear;
-}
-
-.p-popover:after,
-.p-popover:before {
-    bottom: 100%;
-    left: calc(dt('popover.arrow.offset') + dt('popover.arrow.left'));
-    content: " ";
-    height: 0;
-    width: 0;
-    position: absolute;
-    pointer-events: none;
-}
-
-.p-popover:after {
-    border-width: calc(dt('popover.gutter') - 2px);
-    margin-left: calc(-1 * (dt('popover.gutter') - 2px));
-    border-style: solid;
-    border-color: transparent;
-    border-bottom-color: dt('popover.background');
-}
-
-.p-popover:before {
-    border-width: dt('popover.gutter');
-    margin-left: calc(-1 * dt('popover.gutter'));
-    border-style: solid;
-    border-color: transparent;
-    border-bottom-color: dt('popover.border.color');
-}
-
-.p-popover-flipped:after,
-.p-popover-flipped:before {
-    bottom: auto;
-    top: 100%;
-}
-
-.p-popover.p-popover-flipped:after {
-    border-bottom-color: transparent;
-    border-top-color: dt('popover.background');
-}
-
-.p-popover.p-popover-flipped:before {
-    border-bottom-color: transparent;
-    border-top-color: dt('popover.border.color');
-}
-
-`;
+const inlineStyles = {
+    root: () => ({ position: 'absolute' })
+};
 const classes = {
     root: 'p-popover p-component',
     content: 'p-popover-content'
@@ -103,10 +27,11 @@ class PopoverStyle extends BaseStyle {
     name = 'popover';
     style = style;
     classes = classes;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PopoverStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PopoverStyle });
+    inlineStyles = inlineStyles;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: PopoverStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: PopoverStyle });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PopoverStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: PopoverStyle, decorators: [{
             type: Injectable
         }] });
 
@@ -147,10 +72,11 @@ class Popover extends BaseComponent {
      */
     styleClass;
     /**
-     * Target element to attach the panel, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name).
+     * Target element to attach the overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name).
+     * @defaultValue 'self'
      * @group Props
      */
-    appendTo = 'body';
+    appendTo = input('body', { ...(ngDevMode ? { debugName: "appendTo" } : {}) });
     /**
      * Whether to automatically manage layering.
      * @group Props
@@ -174,13 +100,26 @@ class Popover extends BaseComponent {
     /**
      * Transition options of the show animation.
      * @group Props
+     * @deprecated since v21.0.0. Use `motionOptions` instead.
      */
     showTransitionOptions = '.12s cubic-bezier(0, 0, 0.2, 1)';
     /**
      * Transition options of the hide animation.
      * @group Props
+     * @deprecated since v21.0.0. Use `motionOptions` instead.
      */
     hideTransitionOptions = '.1s linear';
+    /**
+     * The motion options.
+     * @group Props
+     */
+    motionOptions = input(undefined, { ...(ngDevMode ? { debugName: "motionOptions" } : {}) });
+    computedMotionOptions = computed(() => {
+        return {
+            ...this.ptm('motion'),
+            ...this.motionOptions()
+        };
+    }, { ...(ngDevMode ? { debugName: "computedMotionOptions" } : {}) });
     /**
      * Callback to invoke when an overlay becomes visible.
      * @group Emits
@@ -191,10 +130,10 @@ class Popover extends BaseComponent {
      * @group Emits
      */
     onHide = new EventEmitter();
+    $appendTo = computed(() => this.appendTo() || this.config.overlayAppendTo(), { ...(ngDevMode ? { debugName: "$appendTo" } : {}) });
     container;
     overlayVisible = false;
     render = false;
-    isOverlayAnimationInProgress = false;
     selfClick = false;
     documentClickListener;
     target;
@@ -203,6 +142,8 @@ class Popover extends BaseComponent {
     documentResizeListener;
     /**
      * Custom content template.
+     * @param {PopoverContentTemplateContext} context - content context.
+     * @see {@link PopoverContentTemplateContext}
      * @group Templates
      */
     contentTemplate;
@@ -255,9 +196,6 @@ class Popover extends BaseComponent {
      * @group Method
      */
     toggle(event, target) {
-        if (this.isOverlayAnimationInProgress) {
-            return;
-        }
         if (this.overlayVisible) {
             if (this.hasTargetChanged(event, target)) {
                 this.destroyCallback = () => {
@@ -278,8 +216,9 @@ class Popover extends BaseComponent {
      */
     show(event, target) {
         target && event && event.stopPropagation();
-        if (this.isOverlayAnimationInProgress) {
-            return;
+        // Clear container if it exists from previous show
+        if (this.container && !this.overlayVisible) {
+            this.container = null;
         }
         this.target = target || event.currentTarget || event.target;
         this.overlayVisible = true;
@@ -300,83 +239,80 @@ class Popover extends BaseComponent {
     hasTargetChanged(event, target) {
         return this.target != null && this.target !== (target || event.currentTarget || event.target);
     }
-    appendContainer() {
-        if (this.appendTo) {
-            if (this.appendTo === 'body')
-                this.renderer.appendChild(this.document.body, this.container);
-            else
-                appendChild(this.appendTo, this.container);
+    appendOverlay() {
+        if (this.$appendTo() && this.$appendTo() !== 'self') {
+            if (this.$appendTo() === 'body') {
+                appendChild(this.document.body, this.container);
+            }
+            else {
+                appendChild(this.$appendTo(), this.container);
+            }
         }
     }
     restoreAppend() {
-        if (this.container && this.appendTo) {
-            this.renderer.appendChild(this.el.nativeElement, this.container);
+        if (this.container && this.$appendTo() && this.$appendTo() !== 'self') {
+            appendChild(this.el.nativeElement, this.container);
         }
     }
-    align() {
+    setZIndex() {
         if (this.autoZIndex) {
             ZIndexUtils.set('overlay', this.container, this.baseZIndex + this.config.zIndex.overlay);
         }
-        absolutePosition(this.container, this.target, false);
-        const containerOffset = getOffset(this.container);
-        const targetOffset = getOffset(this.target);
-        const borderRadius = this.document.defaultView?.getComputedStyle(this.container).getPropertyValue('border-radius');
-        let arrowLeft = 0;
-        if (containerOffset.left < targetOffset.left) {
-            arrowLeft = targetOffset.left - containerOffset.left - parseFloat(borderRadius) * 2;
-        }
-        this.container?.style.setProperty($dt('popover.arrow.left').name, `${arrowLeft}px`);
-        if (containerOffset.top < targetOffset.top) {
-            this.container?.setAttribute('data-p-popover-flipped', 'true');
-            addClass(this.container, 'p-popover-flipped');
+    }
+    align() {
+        if (this.target && this.container) {
+            absolutePosition(this.container, this.target, false);
+            const containerOffset = getOffset(this.container);
+            const targetOffset = getOffset(this.target);
+            const borderRadius = this.document.defaultView?.getComputedStyle(this.container).getPropertyValue('border-radius');
+            let arrowLeft = 0;
+            if (containerOffset.left < targetOffset.left) {
+                arrowLeft = targetOffset.left - containerOffset.left - parseFloat(borderRadius) * 2;
+            }
+            this.container.style.setProperty($dt('popover.arrow.left').name, `${arrowLeft}px`);
+            if (containerOffset.top < targetOffset.top) {
+                this.container.setAttribute('data-p-popover-flipped', 'true');
+                !this.$unstyled() && addClass(this.container, 'p-popover-flipped');
+            }
         }
     }
     onAnimationStart(event) {
-        if (event.toState === 'open') {
-            this.container = event.element;
-            this.container?.setAttribute(this.$attrSelector, '');
-            this.appendContainer();
-            this.align();
-            this.bindDocumentClickListener();
-            this.bindDocumentResizeListener();
-            this.bindScrollListener();
-            if (this.focusOnShow) {
-                this.focus();
-            }
-            this.overlayEventListener = (e) => {
-                if (this.container && this.container.contains(e.target)) {
-                    this.selfClick = true;
-                }
-            };
-            this.overlaySubscription = this.overlayService.clickObservable.subscribe(this.overlayEventListener);
-            this.onShow.emit(null);
+        this.container = event.element;
+        this.container?.setAttribute(this.$attrSelector, '');
+        this.appendOverlay();
+        this.align();
+        this.setZIndex();
+        this.bindDocumentClickListener();
+        this.bindDocumentResizeListener();
+        this.bindScrollListener();
+        if (this.focusOnShow) {
+            this.focus();
         }
-        this.isOverlayAnimationInProgress = true;
+        this.overlayEventListener = (e) => {
+            if (this.container && this.container.contains(e.target)) {
+                this.selfClick = true;
+            }
+        };
+        this.overlaySubscription = this.overlayService.clickObservable.subscribe(this.overlayEventListener);
+        this.onShow.emit(null);
     }
-    onAnimationEnd(event) {
-        switch (event.toState) {
-            case 'void':
-                if (this.destroyCallback) {
-                    this.destroyCallback();
-                    this.destroyCallback = null;
-                }
-                if (this.overlaySubscription) {
-                    this.overlaySubscription.unsubscribe();
-                }
-                break;
-            case 'close':
-                if (this.autoZIndex) {
-                    ZIndexUtils.clear(this.container);
-                }
-                if (this.overlaySubscription) {
-                    this.overlaySubscription.unsubscribe();
-                }
-                this.onContainerDestroy();
-                this.onHide.emit({});
-                this.render = false;
-                break;
+    onAnimationEnd() {
+        if (!this.overlayVisible) {
+            if (this.destroyCallback) {
+                this.destroyCallback();
+                this.destroyCallback = null;
+            }
+            if (this.overlaySubscription) {
+                this.overlaySubscription.unsubscribe();
+            }
+            if (this.autoZIndex) {
+                ZIndexUtils.clear(this.container);
+            }
+            this.onContainerDestroy();
+            this.onHide.emit({});
+            this.render = false;
+            this.container = null;
         }
-        this.isOverlayAnimationInProgress = false;
     }
     focus() {
         let focusable = findSingle(this.container, '[autofocus]');
@@ -398,7 +334,7 @@ class Popover extends BaseComponent {
         this.hide();
         event.preventDefault();
     }
-    onEscapeKeydown(event) {
+    onEscapeKeydown(_event) {
         this.hide();
     }
     onWindowResize() {
@@ -465,97 +401,68 @@ class Popover extends BaseComponent {
             this.overlaySubscription.unsubscribe();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: Popover, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.4", type: Popover, isStandalone: true, selector: "p-popover", inputs: { ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", dismissable: ["dismissable", "dismissable", booleanAttribute], style: "style", styleClass: "styleClass", appendTo: "appendTo", autoZIndex: ["autoZIndex", "autoZIndex", booleanAttribute], ariaCloseLabel: "ariaCloseLabel", baseZIndex: ["baseZIndex", "baseZIndex", numberAttribute], focusOnShow: ["focusOnShow", "focusOnShow", booleanAttribute], showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions" }, outputs: { onShow: "onShow", onHide: "onHide" }, host: { listeners: { "document:keydown.escape": "onEscapeKeydown($event)" } }, providers: [PopoverStyle, { provide: POPOVER_INSTANCE, useExisting: Popover }, { provide: PARENT_INSTANCE, useExisting: Popover }], queries: [{ propertyName: "contentTemplate", first: true, predicate: ["content"] }, { propertyName: "templates", predicate: PrimeTemplate }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
-        <div
-            *ngIf="render"
-            [pBind]="ptm('root')"
-            [class]="cn(cx('root'), styleClass)"
-            [ngStyle]="style"
-            (click)="onOverlayClick($event)"
-            [@animation]="{
-                value: overlayVisible ? 'open' : 'close',
-                params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions }
-            }"
-            (@animation.start)="onAnimationStart($event)"
-            (@animation.done)="onAnimationEnd($event)"
-            role="dialog"
-            [attr.aria-modal]="overlayVisible"
-            [attr.aria-label]="ariaLabel"
-            [attr.aria-labelledBy]="ariaLabelledBy"
-        >
-            <div [pBind]="ptm('content')" [class]="cx('content')" (click)="onContentClick($event)" (mousedown)="onContentClick($event)">
-                <ng-content></ng-content>
-                <ng-template *ngTemplateOutlet="contentTemplate || _contentTemplate; context: { closeCallback: onCloseClick.bind(this) }"></ng-template>
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: Popover, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: Popover, isStandalone: true, selector: "p-popover", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: false, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: false, isRequired: false, transformFunction: null }, dismissable: { classPropertyName: "dismissable", publicName: "dismissable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, style: { classPropertyName: "style", publicName: "style", isSignal: false, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: false, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, autoZIndex: { classPropertyName: "autoZIndex", publicName: "autoZIndex", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, ariaCloseLabel: { classPropertyName: "ariaCloseLabel", publicName: "ariaCloseLabel", isSignal: false, isRequired: false, transformFunction: null }, baseZIndex: { classPropertyName: "baseZIndex", publicName: "baseZIndex", isSignal: false, isRequired: false, transformFunction: numberAttribute }, focusOnShow: { classPropertyName: "focusOnShow", publicName: "focusOnShow", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, showTransitionOptions: { classPropertyName: "showTransitionOptions", publicName: "showTransitionOptions", isSignal: false, isRequired: false, transformFunction: null }, hideTransitionOptions: { classPropertyName: "hideTransitionOptions", publicName: "hideTransitionOptions", isSignal: false, isRequired: false, transformFunction: null }, motionOptions: { classPropertyName: "motionOptions", publicName: "motionOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onShow: "onShow", onHide: "onHide" }, host: { listeners: { "document:keydown.escape": "onEscapeKeydown($event)" } }, providers: [PopoverStyle, { provide: POPOVER_INSTANCE, useExisting: Popover }, { provide: PARENT_INSTANCE, useExisting: Popover }], queries: [{ propertyName: "contentTemplate", first: true, predicate: ["content"] }, { propertyName: "templates", predicate: PrimeTemplate }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
+        @if (render) {
+            <div
+                [pBind]="ptm('root')"
+                [class]="cn(cx('root'), styleClass)"
+                [style]="sx('root')"
+                [ngStyle]="style"
+                (click)="onOverlayClick($event)"
+                role="dialog"
+                [attr.aria-modal]="overlayVisible"
+                [attr.aria-label]="ariaLabel"
+                [attr.aria-labelledBy]="ariaLabelledBy"
+                [pMotion]="overlayVisible"
+                pMotionName="p-anchored-overlay"
+                [pMotionAppear]="true"
+                (pMotionOnEnter)="onAnimationStart($event)"
+                (pMotionOnAfterLeave)="onAnimationEnd()"
+                [pMotionOptions]="computedMotionOptions()"
+            >
+                <div [pBind]="ptm('content')" [class]="cx('content')" (click)="onContentClick($event)" (mousedown)="onContentClick($event)">
+                    <ng-content></ng-content>
+                    <ng-template *ngTemplateOutlet="contentTemplate || _contentTemplate; context: { closeCallback: onCloseClick.bind(this) }"></ng-template>
+                </div>
             </div>
-        </div>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: SharedModule }, { kind: "directive", type: Bind, selector: "[pBind]", inputs: ["pBind"] }], animations: [
-            trigger('animation', [
-                state('void', style$1({
-                    transform: 'scaleY(0.8)',
-                    opacity: 0
-                })),
-                state('close', style$1({
-                    opacity: 0
-                })),
-                state('open', style$1({
-                    transform: 'translateY(0)',
-                    opacity: 1
-                })),
-                transition('void => open', animate('{{showTransitionParams}}')),
-                transition('open => close', animate('{{hideTransitionParams}}'))
-            ])
-        ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        }
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: SharedModule }, { kind: "directive", type: Bind, selector: "[pBind]", inputs: ["pBind"] }, { kind: "ngmodule", type: MotionModule }, { kind: "directive", type: i3.MotionDirective, selector: "[pMotion]", inputs: ["pMotion", "pMotionName", "pMotionType", "pMotionSafe", "pMotionDisabled", "pMotionAppear", "pMotionEnter", "pMotionLeave", "pMotionDuration", "pMotionHideStrategy", "pMotionEnterFromClass", "pMotionEnterToClass", "pMotionEnterActiveClass", "pMotionLeaveFromClass", "pMotionLeaveToClass", "pMotionLeaveActiveClass", "pMotionOptions"], outputs: ["pMotionOnBeforeEnter", "pMotionOnEnter", "pMotionOnAfterEnter", "pMotionOnEnterCancelled", "pMotionOnBeforeLeave", "pMotionOnLeave", "pMotionOnAfterLeave", "pMotionOnLeaveCancelled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: Popover, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: Popover, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-popover',
                     standalone: true,
-                    imports: [CommonModule, SharedModule, Bind],
+                    imports: [CommonModule, SharedModule, Bind, MotionModule],
                     providers: [PopoverStyle, { provide: POPOVER_INSTANCE, useExisting: Popover }, { provide: PARENT_INSTANCE, useExisting: Popover }],
                     hostDirectives: [Bind],
                     template: `
-        <div
-            *ngIf="render"
-            [pBind]="ptm('root')"
-            [class]="cn(cx('root'), styleClass)"
-            [ngStyle]="style"
-            (click)="onOverlayClick($event)"
-            [@animation]="{
-                value: overlayVisible ? 'open' : 'close',
-                params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions }
-            }"
-            (@animation.start)="onAnimationStart($event)"
-            (@animation.done)="onAnimationEnd($event)"
-            role="dialog"
-            [attr.aria-modal]="overlayVisible"
-            [attr.aria-label]="ariaLabel"
-            [attr.aria-labelledBy]="ariaLabelledBy"
-        >
-            <div [pBind]="ptm('content')" [class]="cx('content')" (click)="onContentClick($event)" (mousedown)="onContentClick($event)">
-                <ng-content></ng-content>
-                <ng-template *ngTemplateOutlet="contentTemplate || _contentTemplate; context: { closeCallback: onCloseClick.bind(this) }"></ng-template>
+        @if (render) {
+            <div
+                [pBind]="ptm('root')"
+                [class]="cn(cx('root'), styleClass)"
+                [style]="sx('root')"
+                [ngStyle]="style"
+                (click)="onOverlayClick($event)"
+                role="dialog"
+                [attr.aria-modal]="overlayVisible"
+                [attr.aria-label]="ariaLabel"
+                [attr.aria-labelledBy]="ariaLabelledBy"
+                [pMotion]="overlayVisible"
+                pMotionName="p-anchored-overlay"
+                [pMotionAppear]="true"
+                (pMotionOnEnter)="onAnimationStart($event)"
+                (pMotionOnAfterLeave)="onAnimationEnd()"
+                [pMotionOptions]="computedMotionOptions()"
+            >
+                <div [pBind]="ptm('content')" [class]="cx('content')" (click)="onContentClick($event)" (mousedown)="onContentClick($event)">
+                    <ng-content></ng-content>
+                    <ng-template *ngTemplateOutlet="contentTemplate || _contentTemplate; context: { closeCallback: onCloseClick.bind(this) }"></ng-template>
+                </div>
             </div>
-        </div>
+        }
     `,
-                    animations: [
-                        trigger('animation', [
-                            state('void', style$1({
-                                transform: 'scaleY(0.8)',
-                                opacity: 0
-                            })),
-                            state('close', style$1({
-                                opacity: 0
-                            })),
-                            state('open', style$1({
-                                transform: 'translateY(0)',
-                                opacity: 1
-                            })),
-                            transition('void => open', animate('{{showTransitionParams}}')),
-                            transition('open => close', animate('{{hideTransitionParams}}'))
-                        ])
-                    ],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None
                 }]
@@ -570,9 +477,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 type: Input
             }], styleClass: [{
                 type: Input
-            }], appendTo: [{
-                type: Input
-            }], autoZIndex: [{
+            }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], autoZIndex: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
             }], ariaCloseLabel: [{
@@ -587,7 +492,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 type: Input
             }], hideTransitionOptions: [{
                 type: Input
-            }], onShow: [{
+            }], motionOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "motionOptions", required: false }] }], onShow: [{
                 type: Output
             }], onHide: [{
                 type: Output
@@ -602,11 +507,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 args: ['document:keydown.escape', ['$event']]
             }] } });
 class PopoverModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.4", ngImport: i0, type: PopoverModule, imports: [Popover, SharedModule], exports: [Popover, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PopoverModule, imports: [Popover, SharedModule, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: PopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.1", ngImport: i0, type: PopoverModule, imports: [Popover, SharedModule], exports: [Popover, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: PopoverModule, imports: [Popover, SharedModule, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PopoverModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: PopoverModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [Popover, SharedModule],