primeng 20.3.0 → 21.0.0-rc.1

package/fesm2022/primeng-confirmpopup.mjs

@@ -1,10 +1,9 @@
 export * from 'primeng/types/confirmpopup';
-import { trigger, state, transition, style as style$1, animate } from '@angular/animations';
 import * as i3 from '@angular/common';
 import { DOCUMENT, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, InjectionToken, inject, EventEmitter, numberAttribute, booleanAttribute, HostListener, ContentChildren, ContentChild, Input, Inject, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
-import { absolutePosition, getOffset, addClass, focus, isIOS, isTouchDevice } from '@primeuix/utils';
+import { Injectable, InjectionToken, inject, input, signal, computed, viewChild, ElementRef, EventEmitter, effect, untracked, numberAttribute, booleanAttribute, HostListener, ContentChildren, ContentChild, Input, Inject, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { findSingle, absolutePosition, getOffset, addClass, appendChild, focus, isIOS, isTouchDevice } from '@primeuix/utils';
 import * as i1 from 'primeng/api';
 import { TranslationKeys, SharedModule, PrimeTemplate } from 'primeng/api';
 import { BaseComponent, PARENT_INSTANCE } from 'primeng/basecomponent';
@@ -14,6 +13,8 @@ import * as i4 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
 import { ConnectedOverlayScrollHandler } from 'primeng/dom';
 import { FocusTrap } from 'primeng/focustrap';
+import * as i5 from 'primeng/motion';
+import { MotionModule } from 'primeng/motion';
 import { ZIndexUtils } from 'primeng/utils';
 import { style } from '@primeuix/styles/confirmpopup';
 import { BaseStyle } from 'primeng/base';
@@ -31,10 +32,10 @@ class ConfirmPopupStyle extends BaseStyle {
     name = 'confirmpopup';
     style = style;
     classes = classes;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ConfirmPopupStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ConfirmPopupStyle });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ConfirmPopupStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ConfirmPopupStyle });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ConfirmPopupStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ConfirmPopupStyle, decorators: [{
             type: Injectable
         }] });
 /**
@@ -108,11 +109,13 @@ class ConfirmPopup 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';
     /**
@@ -139,27 +142,59 @@ class ConfirmPopup extends BaseComponent {
      * Defines if the component is visible.
      * @group Props
      */
-    get visible() {
-        return this._visible;
-    }
-    set visible(value) {
-        this._visible = value;
-        this.cd.markForCheck();
-    }
+    visible = input(undefined, { ...(ngDevMode ? { debugName: "visible" } : {}) });
+    _visible = signal(false, { ...(ngDevMode ? { debugName: "_visible" } : {}) });
+    computedVisible = computed(() => this.visible() ?? this._visible(), { ...(ngDevMode ? { debugName: "computedVisible" } : {}) });
+    render = signal(false, { ...(ngDevMode ? { debugName: "render" } : {}) });
+    /**
+     * The motion options.
+     * @group Props
+     */
+    motionOptions = input(undefined, { ...(ngDevMode ? { debugName: "motionOptions" } : {}) });
+    computedMotionOptions = computed(() => {
+        return {
+            ...this.ptm('motion'),
+            ...this.motionOptions()
+        };
+    }, { ...(ngDevMode ? { debugName: "computedMotionOptions" } : {}) });
+    /**
+     * 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 'body'
+     * @group Props
+     */
+    appendTo = input('body', { ...(ngDevMode ? { debugName: "appendTo" } : {}) });
+    $appendTo = computed(() => this.appendTo() || this.config.overlayAppendTo(), { ...(ngDevMode ? { debugName: "$appendTo" } : {}) });
     container;
     subscription;
     confirmation;
     autoFocusAccept = false;
     autoFocusReject = false;
+    /**
+     * Custom content template.
+     * @group Templates
+     */
     contentTemplate;
+    /**
+     * Custom accept icon template.
+     * @group Templates
+     */
     acceptIconTemplate;
+    /**
+     * Custom reject icon template.
+     * @group Templates
+     */
     rejectIconTemplate;
+    /**
+     * Custom headless template.
+     * @group Templates
+     */
     headlessTemplate;
+    acceptButtonViewChild = viewChild('acceptButton', { ...(ngDevMode ? { debugName: "acceptButtonViewChild" } : {}), read: ElementRef });
+    rejectButtonViewChild = viewChild('rejectButton', { ...(ngDevMode ? { debugName: "rejectButtonViewChild" } : {}), read: ElementRef });
     _contentTemplate;
     _acceptIconTemplate;
     _rejectIconTemplate;
     _headlessTemplate;
-    _visible;
     documentClickListener;
     documentResizeListener;
     scrollHandler;
@@ -179,6 +214,12 @@ class ConfirmPopup extends BaseComponent {
                 this.hide();
                 return;
             }
+            if (this.computedVisible()) {
+                requestAnimationFrame(() => {
+                    this.alignOverlay();
+                    this.cd.markForCheck();
+                });
+            }
             if (confirmation.key === this.key) {
                 this.confirmation = confirmation;
                 const keys = Object.keys(confirmation);
@@ -193,7 +234,16 @@ class ConfirmPopup extends BaseComponent {
                     this.confirmation.rejectEvent = new EventEmitter();
                     this.confirmation.rejectEvent.subscribe(this.confirmation.reject);
                 }
-                this.visible = true;
+                this._visible.set(true);
+            }
+        });
+        effect(() => {
+            if (this.computedVisible()) {
+                untracked(() => {
+                    if (!this.render()) {
+                        this.render.set(true);
+                    }
+                });
             }
         });
     }
@@ -231,37 +281,49 @@ class ConfirmPopup extends BaseComponent {
             this.onReject();
         }
     }
-    onAnimationStart(event) {
-        if (event.toState === 'open') {
-            this.container = event.element;
-            this.renderer.appendChild(this.document.body, this.container);
-            this.align();
-            this.bindListeners();
-            this.autoFocusAccept = this.defaultFocus === undefined || this.defaultFocus === 'accept' ? true : false;
-            this.autoFocusReject = this.defaultFocus === 'reject' ? true : false;
+    onBeforeEnter(event) {
+        if (this.confirmation) {
+            this.autoFocusAccept = this.confirmation.defaultFocus === undefined || this.confirmation.defaultFocus === 'accept' ? true : false;
+            this.autoFocusReject = this.confirmation.defaultFocus === 'reject' ? true : false;
         }
+        this.container = event.element;
+        this.appendOverlay();
+        this.alignOverlay();
+        this.alignArrow();
+        this.setZIndex();
+        this.handleFocus();
+        this.bindListeners();
     }
-    onAnimationEnd(event) {
-        switch (event.toState) {
-            case 'void':
-                this.onContainerDestroy();
-                break;
+    handleFocus() {
+        if (this.defaultFocus && (this.acceptButtonViewChild() || this.rejectButtonViewChild())) {
+            const focusEl = ((this.defaultFocus === 'accept' ? findSingle(this.acceptButtonViewChild()?.nativeElement, '[data-pc-section="root"]') : findSingle(this.rejectButtonViewChild()?.nativeElement, '[data-pc-section="root"]')));
+            focusEl.focus();
         }
     }
+    onAfterLeave() {
+        this.autoFocusAccept = false;
+        this.autoFocusReject = false;
+        this.restoreAppend();
+        this.onContainerDestroy();
+    }
     getAcceptButtonProps() {
         return this.option('acceptButtonProps');
     }
     getRejectButtonProps() {
         return this.option('rejectButtonProps');
     }
-    align() {
-        if (this.autoZIndex) {
-            ZIndexUtils.set('overlay', this.container, this.config.zIndex.overlay);
-        }
+    alignOverlay() {
         if (!this.confirmation || !this.confirmation.target) {
             return;
         }
         absolutePosition(this.container, this.confirmation?.target, false);
+    }
+    setZIndex() {
+        if (this.autoZIndex) {
+            ZIndexUtils.set('overlay', this.container, this.config.zIndex.overlay);
+        }
+    }
+    alignArrow() {
         const containerOffset = getOffset(this.container);
         const targetOffset = getOffset(this.confirmation?.target);
         let arrowLeft = 0;
@@ -272,11 +334,28 @@ class ConfirmPopup extends BaseComponent {
             this.container.style.setProperty('--p-confirmpopup-arrow-left', `${arrowLeft}px`);
         }
         if (containerOffset && targetOffset && containerOffset.top < targetOffset.top) {
-            addClass(this.container, 'p-confirm-popup-flipped');
+            this.container.setAttribute('data-p-confirmpopup-flipped', 'true');
+            !this.$unstyled() && addClass(this.container, 'p-confirm-popup-flipped');
+        }
+    }
+    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() !== 'self') {
+            appendChild(this.el.nativeElement, this.container);
         }
+        this.onContainerDestroy();
     }
     hide() {
-        this.visible = false;
+        this._visible.set(false);
     }
     onAccept() {
         if (this.confirmation?.acceptEvent) {
@@ -336,7 +415,7 @@ class ConfirmPopup extends BaseComponent {
         }
     }
     onWindowResize() {
-        if (this.visible && !isTouchDevice()) {
+        if (this.computedVisible() && !isTouchDevice()) {
             this.hide();
         }
     }
@@ -354,7 +433,7 @@ class ConfirmPopup extends BaseComponent {
     bindScrollListener() {
         if (!this.scrollHandler) {
             this.scrollHandler = new ConnectedOverlayScrollHandler(this.confirmation?.target, () => {
-                if (this.visible) {
+                if (this.computedVisible()) {
                     this.hide();
                 }
             });
@@ -383,14 +462,9 @@ class ConfirmPopup extends BaseComponent {
             ZIndexUtils.clear(this.container);
         }
         this.confirmation = null;
+        this.render.set(false);
         this.container = null;
     }
-    restoreAppend() {
-        if (this.container) {
-            this.renderer.removeChild(this.document.body, this.container);
-        }
-        this.onContainerDestroy();
-    }
     get acceptButtonLabel() {
         return this.confirmation?.acceptLabel || this.config.getTranslation(TranslationKeys.ACCEPT);
     }
@@ -403,185 +477,164 @@ class ConfirmPopup extends BaseComponent {
             this.subscription.unsubscribe();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ConfirmPopup, deps: [{ token: i0.ElementRef }, { token: i1.ConfirmationService }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.OverlayService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.4", type: ConfirmPopup, isStandalone: true, selector: "p-confirmpopup", inputs: { key: "key", defaultFocus: "defaultFocus", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions", autoZIndex: ["autoZIndex", "autoZIndex", booleanAttribute], baseZIndex: ["baseZIndex", "baseZIndex", numberAttribute], style: "style", styleClass: "styleClass", visible: "visible" }, host: { listeners: { "document:keydown.Escape": "onEscapeKeydown($event)" } }, providers: [ConfirmPopupStyle, { provide: CONFIRMPOPUP_INSTANCE, useExisting: ConfirmPopup }, { provide: PARENT_INSTANCE, useExisting: ConfirmPopup }], queries: [{ propertyName: "contentTemplate", first: true, predicate: ["content"] }, { propertyName: "acceptIconTemplate", first: true, predicate: ["accepticon"] }, { propertyName: "rejectIconTemplate", first: true, predicate: ["rejecticon"] }, { propertyName: "headlessTemplate", first: true, predicate: ["headless"] }, { propertyName: "templates", predicate: PrimeTemplate }], usesInheritance: true, hostDirectives: [{ directive: i2.Bind }], ngImport: i0, template: `
-        <div
-            *ngIf="visible"
-            pFocusTrap
-            [pBind]="ptm('root')"
-            [class]="cn(cx('root'), styleClass)"
-            [ngStyle]="style"
-            role="alertdialog"
-            (click)="onOverlayClick($event)"
-            [@animation]="{
-                value: 'open',
-                params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions }
-            }"
-            (@animation.start)="onAnimationStart($event)"
-            (@animation.done)="onAnimationEnd($event)"
-        >
-            <ng-container *ngIf="headlessTemplate || _headlessTemplate; else notHeadless">
-                <ng-container *ngTemplateOutlet="headlessTemplate || _headlessTemplate; context: { $implicit: confirmation }"></ng-container>
-            </ng-container>
-            <ng-template #notHeadless>
-                <div #content [pBind]="ptm('content')" [class]="cx('content')">
-                    <ng-container *ngIf="contentTemplate || _contentTemplate; else withoutContentTemplate">
-                        <ng-container *ngTemplateOutlet="contentTemplate || _contentTemplate; context: { $implicit: confirmation }"></ng-container>
-                    </ng-container>
-                    <ng-template #withoutContentTemplate>
-                        <i [pBind]="ptm('icon')" [class]="cx('icon')" *ngIf="confirmation?.icon"></i>
-                        <span [pBind]="ptm('message')" [class]="cx('message')">{{ confirmation?.message }}</span>
-                    </ng-template>
-                </div>
-                <div [pBind]="ptm('footer')" [class]="cx('footer')">
-                    <p-button
-                        type="button"
-                        [label]="rejectButtonLabel"
-                        (onClick)="onReject()"
-                        [pt]="ptm('pcRejectButton')"
-                        [class]="cx('pcRejectButton')"
-                        [styleClass]="confirmation?.rejectButtonStyleClass"
-                        [size]="confirmation?.rejectButtonProps?.size || 'small'"
-                        [text]="confirmation?.rejectButtonProps?.text || false"
-                        *ngIf="confirmation?.rejectVisible !== false"
-                        [attr.aria-label]="rejectButtonLabel"
-                        [buttonProps]="getRejectButtonProps()"
-                        [autofocus]="autoFocusReject"
-                    >
-                        <ng-template #icon>
-                            <i [class]="confirmation?.rejectIcon" *ngIf="confirmation?.rejectIcon; else rejecticon"></i>
-                            <ng-template #rejecticon *ngTemplateOutlet="rejectIconTemplate || _rejectIconTemplate"></ng-template>
-                        </ng-template>
-                    </p-button>
-                    <p-button
-                        type="button"
-                        [label]="acceptButtonLabel"
-                        (onClick)="onAccept()"
-                        [pt]="ptm('pcAcceptButton')"
-                        [class]="cx('pcAcceptButton')"
-                        [styleClass]="confirmation?.acceptButtonStyleClass"
-                        [size]="confirmation?.acceptButtonProps?.size || 'small'"
-                        *ngIf="confirmation?.acceptVisible !== false"
-                        [attr.aria-label]="acceptButtonLabel"
-                        [buttonProps]="getAcceptButtonProps()"
-                        [autofocus]="autoFocusAccept"
-                    >
-                        <ng-template #icon>
-                            <i [class]="confirmation?.acceptIcon" *ngIf="confirmation?.acceptIcon; else accepticontemplate"></i>
-                            <ng-template #accepticontemplate *ngTemplateOutlet="acceptIconTemplate || _acceptIconTemplate"></ng-template>
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ConfirmPopup, deps: [{ token: i0.ElementRef }, { token: i1.ConfirmationService }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.OverlayService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: ConfirmPopup, isStandalone: true, selector: "p-confirmpopup", inputs: { key: { classPropertyName: "key", publicName: "key", isSignal: false, isRequired: false, transformFunction: null }, defaultFocus: { classPropertyName: "defaultFocus", publicName: "defaultFocus", 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 }, autoZIndex: { classPropertyName: "autoZIndex", publicName: "autoZIndex", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, baseZIndex: { classPropertyName: "baseZIndex", publicName: "baseZIndex", isSignal: false, isRequired: false, transformFunction: numberAttribute }, style: { classPropertyName: "style", publicName: "style", isSignal: false, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: false, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, motionOptions: { classPropertyName: "motionOptions", publicName: "motionOptions", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:keydown.Escape": "onEscapeKeydown($event)" } }, providers: [ConfirmPopupStyle, { provide: CONFIRMPOPUP_INSTANCE, useExisting: ConfirmPopup }, { provide: PARENT_INSTANCE, useExisting: ConfirmPopup }], queries: [{ propertyName: "contentTemplate", first: true, predicate: ["content"] }, { propertyName: "acceptIconTemplate", first: true, predicate: ["accepticon"] }, { propertyName: "rejectIconTemplate", first: true, predicate: ["rejecticon"] }, { propertyName: "headlessTemplate", first: true, predicate: ["headless"] }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "acceptButtonViewChild", first: true, predicate: ["acceptButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "rejectButtonViewChild", first: true, predicate: ["rejectButton"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i2.Bind }], ngImport: i0, template: `
+        @if (render()) {
+            <div
+                [pMotion]="computedVisible()"
+                [pMotionAppear]="true"
+                [pMotionName]="'p-anchored-overlay'"
+                [pMotionOptions]="computedMotionOptions()"
+                (pMotionOnBeforeEnter)="onBeforeEnter($event)"
+                (pMotionOnAfterLeave)="onAfterLeave()"
+                pFocusTrap
+                [pBind]="ptm('root')"
+                [class]="cn(cx('root'), styleClass)"
+                [ngStyle]="style"
+                role="alertdialog"
+                (click)="onOverlayClick($event)"
+            >
+                <ng-container *ngIf="headlessTemplate || _headlessTemplate; else notHeadless">
+                    <ng-container *ngTemplateOutlet="headlessTemplate || _headlessTemplate; context: { $implicit: confirmation }"></ng-container>
+                </ng-container>
+                <ng-template #notHeadless>
+                    <div #content [pBind]="ptm('content')" [class]="cx('content')">
+                        <ng-container *ngIf="contentTemplate || _contentTemplate; else withoutContentTemplate">
+                            <ng-container *ngTemplateOutlet="contentTemplate || _contentTemplate; context: { $implicit: confirmation }"></ng-container>
+                        </ng-container>
+                        <ng-template #withoutContentTemplate>
+                            <i [pBind]="ptm('icon')" [class]="cx('icon')" *ngIf="confirmation?.icon"></i>
+                            <span [pBind]="ptm('message')" [class]="cx('message')">{{ confirmation?.message }}</span>
                         </ng-template>
-                    </p-button>
-                </div>
-            </ng-template>
-        </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: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i4.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: FocusTrap, selector: "[pFocusTrap]", inputs: ["pFocusTrapDisabled"] }, { kind: "directive", type: Bind, selector: "[pBind]", inputs: ["pBind"] }], animations: [
-            trigger('animation', [
-                state('void', style$1({
-                    transform: 'scaleY(0.8)',
-                    opacity: 0
-                })),
-                state('open', style$1({
-                    transform: 'translateY(0)',
-                    opacity: 1
-                })),
-                transition('void => open', animate('{{showTransitionParams}}')),
-                transition('open => void', animate('{{hideTransitionParams}}'))
-            ])
-        ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+                    </div>
+                    <div [pBind]="ptm('footer')" [class]="cx('footer')">
+                        <p-button
+                            type="button"
+                            [label]="rejectButtonLabel"
+                            (onClick)="onReject()"
+                            [pt]="ptm('pcRejectButton')"
+                            [class]="cx('pcRejectButton')"
+                            [styleClass]="confirmation?.rejectButtonStyleClass"
+                            [size]="confirmation?.rejectButtonProps?.size || 'small'"
+                            [text]="confirmation?.rejectButtonProps?.text || false"
+                            *ngIf="confirmation?.rejectVisible !== false"
+                            [attr.aria-label]="rejectButtonLabel"
+                            [buttonProps]="getRejectButtonProps()"
+                            [autofocus]="autoFocusReject"
+                            [unstyled]="unstyled()"
+                        >
+                            <ng-template #icon>
+                                <i [class]="confirmation?.rejectIcon" *ngIf="confirmation?.rejectIcon; else rejecticon"></i>
+                                <ng-template #rejecticon *ngTemplateOutlet="rejectIconTemplate || _rejectIconTemplate"></ng-template>
+                            </ng-template>
+                        </p-button>
+                        <p-button
+                            type="button"
+                            [label]="acceptButtonLabel"
+                            (onClick)="onAccept()"
+                            [pt]="ptm('pcAcceptButton')"
+                            [class]="cx('pcAcceptButton')"
+                            [styleClass]="confirmation?.acceptButtonStyleClass"
+                            [size]="confirmation?.acceptButtonProps?.size || 'small'"
+                            *ngIf="confirmation?.acceptVisible !== false"
+                            [attr.aria-label]="acceptButtonLabel"
+                            [buttonProps]="getAcceptButtonProps()"
+                            [autofocus]="autoFocusAccept"
+                            [unstyled]="unstyled()"
+                        >
+                            <ng-template #icon>
+                                <i [class]="confirmation?.acceptIcon" *ngIf="confirmation?.acceptIcon; else accepticontemplate"></i>
+                                <ng-template #accepticontemplate *ngTemplateOutlet="acceptIconTemplate || _acceptIconTemplate"></ng-template>
+                            </ng-template>
+                        </p-button>
+                    </div>
+                </ng-template>
+            </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: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i4.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: FocusTrap, selector: "[pFocusTrap]", inputs: ["pFocusTrapDisabled"] }, { kind: "directive", type: Bind, selector: "[pBind]", inputs: ["pBind"] }, { kind: "ngmodule", type: MotionModule }, { kind: "directive", type: i5.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: ConfirmPopup, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ConfirmPopup, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-confirmpopup',
                     standalone: true,
-                    imports: [CommonModule, SharedModule, ButtonModule, FocusTrap, Bind],
+                    imports: [CommonModule, SharedModule, ButtonModule, FocusTrap, Bind, MotionModule],
                     providers: [ConfirmPopupStyle, { provide: CONFIRMPOPUP_INSTANCE, useExisting: ConfirmPopup }, { provide: PARENT_INSTANCE, useExisting: ConfirmPopup }],
                     hostDirectives: [Bind],
                     template: `
-        <div
-            *ngIf="visible"
-            pFocusTrap
-            [pBind]="ptm('root')"
-            [class]="cn(cx('root'), styleClass)"
-            [ngStyle]="style"
-            role="alertdialog"
-            (click)="onOverlayClick($event)"
-            [@animation]="{
-                value: 'open',
-                params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions }
-            }"
-            (@animation.start)="onAnimationStart($event)"
-            (@animation.done)="onAnimationEnd($event)"
-        >
-            <ng-container *ngIf="headlessTemplate || _headlessTemplate; else notHeadless">
-                <ng-container *ngTemplateOutlet="headlessTemplate || _headlessTemplate; context: { $implicit: confirmation }"></ng-container>
-            </ng-container>
-            <ng-template #notHeadless>
-                <div #content [pBind]="ptm('content')" [class]="cx('content')">
-                    <ng-container *ngIf="contentTemplate || _contentTemplate; else withoutContentTemplate">
-                        <ng-container *ngTemplateOutlet="contentTemplate || _contentTemplate; context: { $implicit: confirmation }"></ng-container>
-                    </ng-container>
-                    <ng-template #withoutContentTemplate>
-                        <i [pBind]="ptm('icon')" [class]="cx('icon')" *ngIf="confirmation?.icon"></i>
-                        <span [pBind]="ptm('message')" [class]="cx('message')">{{ confirmation?.message }}</span>
-                    </ng-template>
-                </div>
-                <div [pBind]="ptm('footer')" [class]="cx('footer')">
-                    <p-button
-                        type="button"
-                        [label]="rejectButtonLabel"
-                        (onClick)="onReject()"
-                        [pt]="ptm('pcRejectButton')"
-                        [class]="cx('pcRejectButton')"
-                        [styleClass]="confirmation?.rejectButtonStyleClass"
-                        [size]="confirmation?.rejectButtonProps?.size || 'small'"
-                        [text]="confirmation?.rejectButtonProps?.text || false"
-                        *ngIf="confirmation?.rejectVisible !== false"
-                        [attr.aria-label]="rejectButtonLabel"
-                        [buttonProps]="getRejectButtonProps()"
-                        [autofocus]="autoFocusReject"
-                    >
-                        <ng-template #icon>
-                            <i [class]="confirmation?.rejectIcon" *ngIf="confirmation?.rejectIcon; else rejecticon"></i>
-                            <ng-template #rejecticon *ngTemplateOutlet="rejectIconTemplate || _rejectIconTemplate"></ng-template>
+        @if (render()) {
+            <div
+                [pMotion]="computedVisible()"
+                [pMotionAppear]="true"
+                [pMotionName]="'p-anchored-overlay'"
+                [pMotionOptions]="computedMotionOptions()"
+                (pMotionOnBeforeEnter)="onBeforeEnter($event)"
+                (pMotionOnAfterLeave)="onAfterLeave()"
+                pFocusTrap
+                [pBind]="ptm('root')"
+                [class]="cn(cx('root'), styleClass)"
+                [ngStyle]="style"
+                role="alertdialog"
+                (click)="onOverlayClick($event)"
+            >
+                <ng-container *ngIf="headlessTemplate || _headlessTemplate; else notHeadless">
+                    <ng-container *ngTemplateOutlet="headlessTemplate || _headlessTemplate; context: { $implicit: confirmation }"></ng-container>
+                </ng-container>
+                <ng-template #notHeadless>
+                    <div #content [pBind]="ptm('content')" [class]="cx('content')">
+                        <ng-container *ngIf="contentTemplate || _contentTemplate; else withoutContentTemplate">
+                            <ng-container *ngTemplateOutlet="contentTemplate || _contentTemplate; context: { $implicit: confirmation }"></ng-container>
+                        </ng-container>
+                        <ng-template #withoutContentTemplate>
+                            <i [pBind]="ptm('icon')" [class]="cx('icon')" *ngIf="confirmation?.icon"></i>
+                            <span [pBind]="ptm('message')" [class]="cx('message')">{{ confirmation?.message }}</span>
                         </ng-template>
-                    </p-button>
-                    <p-button
-                        type="button"
-                        [label]="acceptButtonLabel"
-                        (onClick)="onAccept()"
-                        [pt]="ptm('pcAcceptButton')"
-                        [class]="cx('pcAcceptButton')"
-                        [styleClass]="confirmation?.acceptButtonStyleClass"
-                        [size]="confirmation?.acceptButtonProps?.size || 'small'"
-                        *ngIf="confirmation?.acceptVisible !== false"
-                        [attr.aria-label]="acceptButtonLabel"
-                        [buttonProps]="getAcceptButtonProps()"
-                        [autofocus]="autoFocusAccept"
-                    >
-                        <ng-template #icon>
-                            <i [class]="confirmation?.acceptIcon" *ngIf="confirmation?.acceptIcon; else accepticontemplate"></i>
-                            <ng-template #accepticontemplate *ngTemplateOutlet="acceptIconTemplate || _acceptIconTemplate"></ng-template>
-                        </ng-template>
-                    </p-button>
-                </div>
-            </ng-template>
-        </div>
+                    </div>
+                    <div [pBind]="ptm('footer')" [class]="cx('footer')">
+                        <p-button
+                            type="button"
+                            [label]="rejectButtonLabel"
+                            (onClick)="onReject()"
+                            [pt]="ptm('pcRejectButton')"
+                            [class]="cx('pcRejectButton')"
+                            [styleClass]="confirmation?.rejectButtonStyleClass"
+                            [size]="confirmation?.rejectButtonProps?.size || 'small'"
+                            [text]="confirmation?.rejectButtonProps?.text || false"
+                            *ngIf="confirmation?.rejectVisible !== false"
+                            [attr.aria-label]="rejectButtonLabel"
+                            [buttonProps]="getRejectButtonProps()"
+                            [autofocus]="autoFocusReject"
+                            [unstyled]="unstyled()"
+                        >
+                            <ng-template #icon>
+                                <i [class]="confirmation?.rejectIcon" *ngIf="confirmation?.rejectIcon; else rejecticon"></i>
+                                <ng-template #rejecticon *ngTemplateOutlet="rejectIconTemplate || _rejectIconTemplate"></ng-template>
+                            </ng-template>
+                        </p-button>
+                        <p-button
+                            type="button"
+                            [label]="acceptButtonLabel"
+                            (onClick)="onAccept()"
+                            [pt]="ptm('pcAcceptButton')"
+                            [class]="cx('pcAcceptButton')"
+                            [styleClass]="confirmation?.acceptButtonStyleClass"
+                            [size]="confirmation?.acceptButtonProps?.size || 'small'"
+                            *ngIf="confirmation?.acceptVisible !== false"
+                            [attr.aria-label]="acceptButtonLabel"
+                            [buttonProps]="getAcceptButtonProps()"
+                            [autofocus]="autoFocusAccept"
+                            [unstyled]="unstyled()"
+                        >
+                            <ng-template #icon>
+                                <i [class]="confirmation?.acceptIcon" *ngIf="confirmation?.acceptIcon; else accepticontemplate"></i>
+                                <ng-template #accepticontemplate *ngTemplateOutlet="acceptIconTemplate || _acceptIconTemplate"></ng-template>
+                            </ng-template>
+                        </p-button>
+                    </div>
+                </ng-template>
+            </div>
+        }
     `,
-                    animations: [
-                        trigger('animation', [
-                            state('void', style$1({
-                                transform: 'scaleY(0.8)',
-                                opacity: 0
-                            })),
-                            state('open', style$1({
-                                transform: 'translateY(0)',
-                                opacity: 1
-                            })),
-                            transition('void => open', animate('{{showTransitionParams}}')),
-                            transition('open => void', animate('{{hideTransitionParams}}'))
-                        ])
-                    ],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None
                 }]
@@ -606,9 +659,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 type: Input
             }], styleClass: [{
                 type: Input
-            }], visible: [{
-                type: Input
-            }], contentTemplate: [{
+            }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }], motionOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "motionOptions", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], contentTemplate: [{
                 type: ContentChild,
                 args: ['content', { descendants: false }]
             }], acceptIconTemplate: [{
@@ -620,7 +671,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
             }], headlessTemplate: [{
                 type: ContentChild,
                 args: ['headless', { descendants: false }]
-            }], templates: [{
+            }], acceptButtonViewChild: [{ type: i0.ViewChild, args: ['acceptButton', { ...{ read: ElementRef }, isSignal: true }] }], rejectButtonViewChild: [{ type: i0.ViewChild, args: ['rejectButton', { ...{ read: ElementRef }, isSignal: true }] }], templates: [{
                 type: ContentChildren,
                 args: [PrimeTemplate]
             }], onEscapeKeydown: [{
@@ -628,11 +679,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 args: ['document:keydown.Escape', ['$event']]
             }] } });
 class ConfirmPopupModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ConfirmPopupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.4", ngImport: i0, type: ConfirmPopupModule, imports: [ConfirmPopup, SharedModule], exports: [ConfirmPopup, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ConfirmPopupModule, imports: [ConfirmPopup, SharedModule, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ConfirmPopupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.1", ngImport: i0, type: ConfirmPopupModule, imports: [ConfirmPopup, SharedModule], exports: [ConfirmPopup, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ConfirmPopupModule, imports: [ConfirmPopup, SharedModule, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ConfirmPopupModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ConfirmPopupModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [ConfirmPopup, SharedModule],