primeng 20.3.0 → 21.0.0-beta.1

package/fesm2022/primeng-overlay.mjs

@@ -1,24 +1,23 @@
-import { animation, style as style$1, animate, trigger, transition, useAnimation } from '@angular/animations';
 import * as i3 from '@angular/common';
 import { isPlatformBrowser, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, InjectionToken, inject, input, EventEmitter, computed, ContentChildren, ContentChild, ViewChild, Output, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
-import { getTargetElement, focus, addClass, removeClass, isTouchDevice } from '@primeuix/utils';
+import { Injectable, InjectionToken, inject, input, computed, EventEmitter, signal, ContentChildren, ContentChild, ViewChild, Output, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { getTargetElement, focus, addClass, removeClass, appendChild, getOuterWidth, relativePosition, absolutePosition, isTouchDevice } from '@primeuix/utils';
 import * as i1 from 'primeng/api';
 import { SharedModule, PrimeTemplate } from 'primeng/api';
 import { BaseComponent, PARENT_INSTANCE } from 'primeng/basecomponent';
 import * as i2 from 'primeng/bind';
 import { Bind } from 'primeng/bind';
-import { DomHandler, ConnectedOverlayScrollHandler } from 'primeng/dom';
+import { ConnectedOverlayScrollHandler } from 'primeng/dom';
+import * as i4 from 'primeng/motion';
+import { MotionModule } from 'primeng/motion';
 import { ObjectUtils, ZIndexUtils } from 'primeng/utils';
 import { BaseStyle } from 'primeng/base';
 
+const inlineStyles = {
+    root: () => ({ position: 'absolute', top: '0' })
+};
 const style = /*css*/ `
-.p-overlay {
-    position: absolute;
-    top: 0;
-}
-
 .p-overlay-modal {
     display: flex;
     align-items: center;
@@ -32,6 +31,7 @@ const style = /*css*/ `
 
 .p-overlay-content {
     transform-origin: inherit;
+    will-change: transform;
 }
 
 /* Github Issue #18560 */
@@ -128,16 +128,15 @@ class OverlayStyle extends BaseStyle {
     name = 'overlay';
     style = style;
     classes = classes;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: OverlayStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: OverlayStyle });
+    inlineStyles = inlineStyles;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: OverlayStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: OverlayStyle });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: OverlayStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: OverlayStyle, decorators: [{
             type: Injectable
         }] });
 
 const OVERLAY_INSTANCE = new InjectionToken('OVERLAY_INSTANCE');
-const showOverlayContentAnimation = animation([style$1({ transform: '{{transform}}', opacity: 0 }), animate('{{showTransitionParams}}')]);
-const hideOverlayContentAnimation = animation([animate('{{hideTransitionParams}}', style$1({ transform: '{{transform}}', opacity: 0 }))]);
 /**
  * This API allows overlay components to be controlled from the PrimeNG. In this way, all overlay components in the application can have the same behavior.
  * @group Components
@@ -256,6 +255,7 @@ class Overlay extends BaseComponent {
      * Transition options of the show or hide animation.
      * @defaultValue .12s cubic-bezier(0, 0, 0.2, 1)
      * @group Props
+     * @deprecated since v21.0.0. Use `motionOptions` instead.
      */
     get showTransitionOptions() {
         const value = this._showTransitionOptions || this.overlayOptions?.showTransitionOptions;
@@ -268,6 +268,7 @@ class Overlay extends BaseComponent {
      * The hideTransitionOptions property is an input that determines the CSS transition options for hiding the component.
      * @defaultValue .1s linear
      * @group Props
+     * @deprecated since v21.0.0. Use `motionOptions` instead.
      */
     get hideTransitionOptions() {
         const value = this._hideTransitionOptions || this.overlayOptions?.hideTransitionOptions;
@@ -315,6 +316,23 @@ class Overlay extends BaseComponent {
      * @group Props
      */
     appendTo = input(undefined, ...(ngDevMode ? [{ debugName: "appendTo" }] : []));
+    /**
+     * Specifies whether the overlay should be rendered inline within the current component's template.
+     * @defaultValue false
+     * @group Props
+     */
+    inline = input(false, ...(ngDevMode ? [{ debugName: "inline" }] : []));
+    /**
+     * The motion options.
+     * @group Props
+     */
+    motionOptions = input(undefined, ...(ngDevMode ? [{ debugName: "motionOptions" }] : []));
+    computedMotionOptions = computed(() => {
+        return {
+            ...this.ptm('motion'),
+            ...(this.motionOptions() || this.overlayOptions?.motionOptions)
+        };
+    }, ...(ngDevMode ? [{ debugName: "computedMotionOptions" }] : []));
     /**
      * This EventEmitter is used to notify changes in the visibility state of a component.
      * @param {Boolean} boolean - Value of visibility as boolean.
@@ -349,14 +367,52 @@ class Overlay extends BaseComponent {
      * Callback to invoke when the animation is started.
      * @param {AnimationEvent} event - Animation event.
      * @group Emits
+     * @deprecated since v21.0.0. Use onOverlayBeforeEnter and onOverlayBeforeLeave instead.
      */
     onAnimationStart = new EventEmitter();
     /**
      * Callback to invoke when the animation is done.
      * @param {AnimationEvent} event - Animation event.
      * @group Emits
+     * @deprecated since v21.0.0. Use onOverlayAfterEnter and onOverlayAfterLeave instead.
      */
     onAnimationDone = new EventEmitter();
+    /**
+     * Callback to invoke before the overlay enters.
+     * @param {MotionEvent} event - Event before enter.
+     * @group Emits
+     */
+    onBeforeEnter = new EventEmitter();
+    /**
+     * Callback to invoke when the overlay enters.
+     * @param {MotionEvent} event - Event on enter.
+     * @group Emits
+     */
+    onEnter = new EventEmitter();
+    /**
+     * Callback to invoke after the overlay has entered.
+     * @param {MotionEvent} event - Event after enter.
+     * @group Emits
+     */
+    onAfterEnter = new EventEmitter();
+    /**
+     * Callback to invoke before the overlay leaves.
+     * @param {MotionEvent} event - Event before leave.
+     * @group Emits
+     */
+    onBeforeLeave = new EventEmitter();
+    /**
+     * Callback to invoke when the overlay leaves.
+     * @param {MotionEvent} event - Event on leave.
+     * @group Emits
+     */
+    onLeave = new EventEmitter();
+    /**
+     * Callback to invoke after the overlay has left.
+     * @param {MotionEvent} event - Event after leave.
+     * @group Emits
+     */
+    onAfterLeave = new EventEmitter();
     overlayViewChild;
     contentViewChild;
     /**
@@ -472,9 +528,6 @@ class Overlay extends BaseComponent {
             this.modal && removeClass(this.document?.body, 'p-overflow-hidden');
         }
     }
-    alignOverlay() {
-        !this.modal && DomHandler.alignOverlay(this.overlayEl, this.targetEl, this.$appendTo());
-    }
     onVisibleChange(visible) {
         this._visible = visible;
         this.visibleChange.emit(visible);
@@ -489,51 +542,74 @@ class Overlay extends BaseComponent {
         });
         this.isOverlayContentClicked = true;
     }
-    onOverlayContentAnimationStart(event) {
-        switch (event.toState) {
-            case 'visible':
-                this.handleEvents('onBeforeShow', { overlay: this.overlayEl, target: this.targetEl, mode: this.overlayMode });
-                if (this.autoZIndex) {
-                    ZIndexUtils.set(this.overlayMode, this.overlayEl, this.baseZIndex + this.config?.zIndex[this.overlayMode]);
-                }
-                this.hostAttrSelector() && this.overlayEl && this.overlayEl.setAttribute(this.hostAttrSelector(), '');
-                DomHandler.appendOverlay(this.overlayEl, this.$appendTo() === 'body' ? this.document.body : this.$appendTo(), this.$appendTo());
-                this.alignOverlay();
-                break;
-            case 'void':
-                this.handleEvents('onBeforeHide', { overlay: this.overlayEl, target: this.targetEl, mode: this.overlayMode });
-                this.modal && addClass(this.overlayEl, 'p-overlay-mask-leave');
-                break;
-        }
-        this.handleEvents('onAnimationStart', event);
-    }
-    onOverlayContentAnimationDone(event) {
-        const container = this.overlayEl || event.element.parentElement;
-        switch (event.toState) {
-            case 'visible':
-                if (this.visible) {
-                    this.show(container, true);
-                    this.bindListeners();
-                }
-                break;
-            case 'void':
-                if (!this.visible) {
-                    this.hide(container, true);
-                    this.modalVisible = false;
-                    this.unbindListeners();
-                    DomHandler.appendOverlay(this.overlayEl, this.targetEl, this.$appendTo());
-                    ZIndexUtils.clear(container);
-                    this.cd.markForCheck();
-                    break;
-                }
-        }
-        this.handleEvents('onAnimationDone', event);
+    container = signal(undefined, ...(ngDevMode ? [{ debugName: "container" }] : []));
+    onOverlayBeforeEnter(event) {
+        this.handleEvents('onBeforeShow', { overlay: this.overlayEl, target: this.targetEl, mode: this.overlayMode });
+        this.container.set(this.overlayEl || event.element);
+        this.show(this.overlayEl, true);
+        this.hostAttrSelector() && this.overlayEl && this.overlayEl.setAttribute(this.hostAttrSelector(), '');
+        this.appendOverlay();
+        this.alignOverlay();
+        this.setZIndex();
+        this.handleEvents('onBeforeEnter', event);
+    }
+    onOverlayEnter(event) {
+        this.handleEvents('onEnter', event);
+    }
+    onOverlayAfterEnter(event) {
+        this.bindListeners();
+        this.handleEvents('onAfterEnter', event);
+    }
+    onOverlayBeforeLeave(event) {
+        this.handleEvents('onBeforeHide', { overlay: this.overlayEl, target: this.targetEl, mode: this.overlayMode });
+        this.handleEvents('onBeforeLeave', event);
+    }
+    onOverlayLeave(event) {
+        this.handleEvents('onLeave', event);
+    }
+    onOverlayAfterLeave(event) {
+        this.hide(this.overlayEl, true);
+        this.container.set(null);
+        this.unbindListeners();
+        this.appendOverlay();
+        ZIndexUtils.clear(this.overlayEl);
+        this.modalVisible = false;
+        this.cd.markForCheck();
+        this.handleEvents('onAfterLeave', event);
     }
     handleEvents(name, params) {
         this[name].emit(params);
         this.options && this.options[name] && this.options[name](params);
         this.config?.overlayOptions && (this.config?.overlayOptions)[name] && (this.config?.overlayOptions)[name](params);
     }
+    setZIndex() {
+        if (this.autoZIndex) {
+            ZIndexUtils.set(this.overlayMode, this.overlayEl, this.baseZIndex + this.config?.zIndex[this.overlayMode]);
+        }
+    }
+    appendOverlay() {
+        if (this.$appendTo() && this.$appendTo() !== 'self') {
+            if (this.$appendTo() === 'body') {
+                appendChild(this.document.body, this.overlayEl);
+            }
+            else {
+                appendChild(this.$appendTo(), this.overlayEl);
+            }
+        }
+    }
+    alignOverlay() {
+        if (!this.modal) {
+            if (this.overlayEl && this.targetEl) {
+                this.overlayEl.style.minWidth = getOuterWidth(this.targetEl) + 'px';
+                if (this.$appendTo() === 'self') {
+                    relativePosition(this.overlayEl, this.targetEl);
+                }
+                else {
+                    absolutePosition(this.overlayEl, this.targetEl);
+                }
+            }
+        }
+    }
     bindListeners() {
         this.bindScrollListener();
         this.bindDocumentClickListener();
@@ -627,64 +703,67 @@ class Overlay extends BaseComponent {
         }
         this.unbindListeners();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: Overlay, deps: [{ token: i1.OverlayService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.4", type: Overlay, isStandalone: true, selector: "p-overlay", inputs: { hostName: { classPropertyName: "hostName", publicName: "hostName", isSignal: false, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: false, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: false, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: false, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: false, isRequired: false, transformFunction: null }, contentStyle: { classPropertyName: "contentStyle", publicName: "contentStyle", isSignal: false, isRequired: false, transformFunction: null }, contentStyleClass: { classPropertyName: "contentStyleClass", publicName: "contentStyleClass", isSignal: false, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: false, isRequired: false, transformFunction: null }, autoZIndex: { classPropertyName: "autoZIndex", publicName: "autoZIndex", isSignal: false, isRequired: false, transformFunction: null }, baseZIndex: { classPropertyName: "baseZIndex", publicName: "baseZIndex", isSignal: false, isRequired: false, transformFunction: null }, showTransitionOptions: { classPropertyName: "showTransitionOptions", publicName: "showTransitionOptions", isSignal: false, isRequired: false, transformFunction: null }, hideTransitionOptions: { classPropertyName: "hideTransitionOptions", publicName: "hideTransitionOptions", isSignal: false, isRequired: false, transformFunction: null }, listener: { classPropertyName: "listener", publicName: "listener", isSignal: false, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: false, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, hostAttrSelector: { classPropertyName: "hostAttrSelector", publicName: "hostAttrSelector", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visibleChange: "visibleChange", onBeforeShow: "onBeforeShow", onShow: "onShow", onBeforeHide: "onBeforeHide", onHide: "onHide", onAnimationStart: "onAnimationStart", onAnimationDone: "onAnimationDone" }, providers: [OverlayStyle, { provide: OVERLAY_INSTANCE, useExisting: Overlay }, { provide: PARENT_INSTANCE, useExisting: Overlay }], queries: [{ propertyName: "contentTemplate", first: true, predicate: ["content"] }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "overlayViewChild", first: true, predicate: ["overlay"], descendants: true }, { propertyName: "contentViewChild", first: true, predicate: ["content"], descendants: true }], usesInheritance: true, hostDirectives: [{ directive: i2.Bind }], ngImport: i0, template: `
-        <div *ngIf="modalVisible" #overlay [class]="cn(cx('root'), styleClass)" [pBind]="ptm('root')" (click)="onOverlayClick()">
-            <div
-                *ngIf="visible"
-                #content
-                [class]="cn(cx('content'), contentStyleClass)"
-                [pBind]="ptm('content')"
-                (click)="onOverlayContentClick($event)"
-                [@overlayContentAnimation]="{
-                    value: 'visible',
-                    params: {
-                        showTransitionParams: showTransitionOptions,
-                        hideTransitionParams: hideTransitionOptions,
-                        transform: transformOptions[modal ? overlayResponsiveDirection : 'default']
-                    }
-                }"
-                (@overlayContentAnimation.start)="onOverlayContentAnimationStart($event)"
-                (@overlayContentAnimation.done)="onOverlayContentAnimationDone($event)"
-            >
-                <ng-content></ng-content>
-                <ng-container *ngTemplateOutlet="contentTemplate || _contentTemplate; context: { $implicit: { mode: overlayMode } }"></ng-container>
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: Overlay, deps: [{ token: i1.OverlayService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: Overlay, isStandalone: true, selector: "p-overlay", inputs: { hostName: { classPropertyName: "hostName", publicName: "hostName", isSignal: false, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: false, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: false, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: false, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: false, isRequired: false, transformFunction: null }, contentStyle: { classPropertyName: "contentStyle", publicName: "contentStyle", isSignal: false, isRequired: false, transformFunction: null }, contentStyleClass: { classPropertyName: "contentStyleClass", publicName: "contentStyleClass", isSignal: false, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: false, isRequired: false, transformFunction: null }, autoZIndex: { classPropertyName: "autoZIndex", publicName: "autoZIndex", isSignal: false, isRequired: false, transformFunction: null }, baseZIndex: { classPropertyName: "baseZIndex", publicName: "baseZIndex", isSignal: false, isRequired: false, transformFunction: null }, showTransitionOptions: { classPropertyName: "showTransitionOptions", publicName: "showTransitionOptions", isSignal: false, isRequired: false, transformFunction: null }, hideTransitionOptions: { classPropertyName: "hideTransitionOptions", publicName: "hideTransitionOptions", isSignal: false, isRequired: false, transformFunction: null }, listener: { classPropertyName: "listener", publicName: "listener", isSignal: false, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: false, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, inline: { classPropertyName: "inline", publicName: "inline", isSignal: true, isRequired: false, transformFunction: null }, motionOptions: { classPropertyName: "motionOptions", publicName: "motionOptions", isSignal: true, isRequired: false, transformFunction: null }, hostAttrSelector: { classPropertyName: "hostAttrSelector", publicName: "hostAttrSelector", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visibleChange: "visibleChange", onBeforeShow: "onBeforeShow", onShow: "onShow", onBeforeHide: "onBeforeHide", onHide: "onHide", onAnimationStart: "onAnimationStart", onAnimationDone: "onAnimationDone", onBeforeEnter: "onBeforeEnter", onEnter: "onEnter", onAfterEnter: "onAfterEnter", onBeforeLeave: "onBeforeLeave", onLeave: "onLeave", onAfterLeave: "onAfterLeave" }, providers: [OverlayStyle, { provide: OVERLAY_INSTANCE, useExisting: Overlay }, { provide: PARENT_INSTANCE, useExisting: Overlay }], queries: [{ propertyName: "contentTemplate", first: true, predicate: ["content"] }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "overlayViewChild", first: true, predicate: ["overlay"], descendants: true }, { propertyName: "contentViewChild", first: true, predicate: ["content"], descendants: true }], usesInheritance: true, hostDirectives: [{ directive: i2.Bind }], ngImport: i0, template: `
+        @if (inline()) {
+            <ng-content></ng-content>
+            <ng-container *ngTemplateOutlet="contentTemplate || _contentTemplate; context: { $implicit: { mode: null } }"></ng-container>
+        } @else {
+            <div *ngIf="modalVisible" #overlay [class]="cn(cx('root'), styleClass)" [style]="sx('root')" [pBind]="ptm('root')" (click)="onOverlayClick()">
+                <p-motion
+                    [visible]="visible"
+                    name="p-anchored-overlay"
+                    [appear]="true"
+                    [options]="computedMotionOptions()"
+                    (onBeforeEnter)="onOverlayBeforeEnter($event)"
+                    (onEnter)="onOverlayEnter($event)"
+                    (onAfterEnter)="onOverlayAfterEnter($event)"
+                    (onBeforeLeave)="onOverlayBeforeLeave($event)"
+                    (onLeave)="onOverlayLeave($event)"
+                    (onAfterLeave)="onOverlayAfterLeave($event)"
+                >
+                    <div #content [class]="cn(cx('content'), contentStyleClass)" [pBind]="ptm('content')" (click)="onOverlayContentClick($event)">
+                        <ng-content></ng-content>
+                        <ng-container *ngTemplateOutlet="contentTemplate || _contentTemplate; context: { $implicit: { mode: overlayMode } }"></ng-container>
+                    </div>
+                </p-motion>
             </div>
-        </div>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SharedModule }, { kind: "directive", type: Bind, selector: "[pBind]", inputs: ["pBind"] }], animations: [trigger('overlayContentAnimation', [transition(':enter', [useAnimation(showOverlayContentAnimation)]), transition(':leave', [useAnimation(hideOverlayContentAnimation)])])], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        }
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SharedModule }, { kind: "directive", type: Bind, selector: "[pBind]", inputs: ["pBind"] }, { kind: "ngmodule", type: MotionModule }, { kind: "component", type: i4.Motion, selector: "p-motion", inputs: ["visible", "mountOnEnter", "unmountOnLeave", "name", "type", "safe", "disabled", "appear", "enter", "leave", "duration", "hideStrategy", "enterFromClass", "enterToClass", "enterActiveClass", "leaveFromClass", "leaveToClass", "leaveActiveClass", "options"], outputs: ["onBeforeEnter", "onEnter", "onAfterEnter", "onEnterCancelled", "onBeforeLeave", "onLeave", "onAfterLeave", "onLeaveCancelled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: Overlay, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: Overlay, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-overlay',
                     standalone: true,
-                    imports: [CommonModule, SharedModule, Bind],
+                    imports: [CommonModule, SharedModule, Bind, MotionModule],
                     hostDirectives: [Bind],
                     template: `
-        <div *ngIf="modalVisible" #overlay [class]="cn(cx('root'), styleClass)" [pBind]="ptm('root')" (click)="onOverlayClick()">
-            <div
-                *ngIf="visible"
-                #content
-                [class]="cn(cx('content'), contentStyleClass)"
-                [pBind]="ptm('content')"
-                (click)="onOverlayContentClick($event)"
-                [@overlayContentAnimation]="{
-                    value: 'visible',
-                    params: {
-                        showTransitionParams: showTransitionOptions,
-                        hideTransitionParams: hideTransitionOptions,
-                        transform: transformOptions[modal ? overlayResponsiveDirection : 'default']
-                    }
-                }"
-                (@overlayContentAnimation.start)="onOverlayContentAnimationStart($event)"
-                (@overlayContentAnimation.done)="onOverlayContentAnimationDone($event)"
-            >
-                <ng-content></ng-content>
-                <ng-container *ngTemplateOutlet="contentTemplate || _contentTemplate; context: { $implicit: { mode: overlayMode } }"></ng-container>
+        @if (inline()) {
+            <ng-content></ng-content>
+            <ng-container *ngTemplateOutlet="contentTemplate || _contentTemplate; context: { $implicit: { mode: null } }"></ng-container>
+        } @else {
+            <div *ngIf="modalVisible" #overlay [class]="cn(cx('root'), styleClass)" [style]="sx('root')" [pBind]="ptm('root')" (click)="onOverlayClick()">
+                <p-motion
+                    [visible]="visible"
+                    name="p-anchored-overlay"
+                    [appear]="true"
+                    [options]="computedMotionOptions()"
+                    (onBeforeEnter)="onOverlayBeforeEnter($event)"
+                    (onEnter)="onOverlayEnter($event)"
+                    (onAfterEnter)="onOverlayAfterEnter($event)"
+                    (onBeforeLeave)="onOverlayBeforeLeave($event)"
+                    (onLeave)="onOverlayLeave($event)"
+                    (onAfterLeave)="onOverlayAfterLeave($event)"
+                >
+                    <div #content [class]="cn(cx('content'), contentStyleClass)" [pBind]="ptm('content')" (click)="onOverlayContentClick($event)">
+                        <ng-content></ng-content>
+                        <ng-container *ngTemplateOutlet="contentTemplate || _contentTemplate; context: { $implicit: { mode: overlayMode } }"></ng-container>
+                    </div>
+                </p-motion>
             </div>
-        </div>
+        }
     `,
-                    animations: [trigger('overlayContentAnimation', [transition(':enter', [useAnimation(showOverlayContentAnimation)]), transition(':leave', [useAnimation(hideOverlayContentAnimation)])])],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
                     providers: [OverlayStyle, { provide: OVERLAY_INSTANCE, useExisting: Overlay }, { provide: PARENT_INSTANCE, useExisting: Overlay }]
@@ -719,7 +798,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 type: Input
             }], options: [{
                 type: Input
-            }], visibleChange: [{
+            }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], inline: [{ type: i0.Input, args: [{ isSignal: true, alias: "inline", required: false }] }], motionOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "motionOptions", required: false }] }], visibleChange: [{
                 type: Output
             }], onBeforeShow: [{
                 type: Output
@@ -733,6 +812,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 type: Output
             }], onAnimationDone: [{
                 type: Output
+            }], onBeforeEnter: [{
+                type: Output
+            }], onEnter: [{
+                type: Output
+            }], onAfterEnter: [{
+                type: Output
+            }], onBeforeLeave: [{
+                type: Output
+            }], onLeave: [{
+                type: Output
+            }], onAfterLeave: [{
+                type: Output
             }], overlayViewChild: [{
                 type: ViewChild,
                 args: ['overlay']
@@ -745,13 +836,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
             }], templates: [{
                 type: ContentChildren,
                 args: [PrimeTemplate]
-            }] } });
+            }], hostAttrSelector: [{ type: i0.Input, args: [{ isSignal: true, alias: "hostAttrSelector", required: false }] }] } });
 class OverlayModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: OverlayModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.4", ngImport: i0, type: OverlayModule, imports: [Overlay, SharedModule], exports: [Overlay, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: OverlayModule, imports: [Overlay, SharedModule, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: OverlayModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.0", ngImport: i0, type: OverlayModule, imports: [Overlay, SharedModule], exports: [Overlay, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: OverlayModule, imports: [Overlay, SharedModule, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: OverlayModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: OverlayModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [Overlay, SharedModule],