primeng 20.3.0 → 21.0.0-rc.1

package/fesm2022/primeng-dialog.mjs

@@ -1,10 +1,9 @@
 export * from 'primeng/types/dialog';
-import { animation, style as style$1, animate, trigger, transition, useAnimation } 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, input, EventEmitter, computed, NgZone, booleanAttribute, numberAttribute, ContentChildren, ContentChild, Input, ViewChild, Output, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
-import { uuid, setAttribute, hasClass, addClass, getOuterWidth, getOuterHeight, getViewport, removeClass, appendChild } from '@primeuix/utils';
+import { Injectable, InjectionToken, inject, input, computed, EventEmitter, signal, NgZone, booleanAttribute, numberAttribute, ContentChildren, ContentChild, Input, ViewChild, Output, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { uuid, setAttribute, addStyle, getOuterWidth, getOuterHeight, getViewport, appendChild, removeClass, hasClass } from '@primeuix/utils';
 import { TranslationKeys, SharedModule, PrimeTemplate } from 'primeng/api';
 import { BaseComponent, PARENT_INSTANCE } from 'primeng/basecomponent';
 import * as i1 from 'primeng/bind';
@@ -13,6 +12,8 @@ import { Button } from 'primeng/button';
 import { DomHandler, blockBodyScroll, unblockBodyScroll } from 'primeng/dom';
 import { FocusTrap } from 'primeng/focustrap';
 import { TimesIcon, WindowMaximizeIcon, WindowMinimizeIcon } from 'primeng/icons';
+import * as i3 from 'primeng/motion';
+import { MotionModule } from 'primeng/motion';
 import { ZIndexUtils } from 'primeng/utils';
 import { style } from '@primeuix/styles/dialog';
 import { BaseStyle } from 'primeng/base';
@@ -48,7 +49,7 @@ const classes = {
     mask: ({ instance }) => {
         const positions = ['left', 'right', 'top', 'topleft', 'topright', 'bottom', 'bottomleft', 'bottomright'];
         const pos = positions.find((item) => item === instance.position);
-        return ['p-dialog-mask', { 'p-overlay-mask p-overlay-mask-enter': instance.modal }, pos ? `p-dialog-${pos}` : ''];
+        return ['p-dialog-mask', { 'p-overlay-mask': instance.modal }, pos ? `p-dialog-${pos}` : ''];
     },
     root: ({ instance }) => [
         'p-dialog p-component',
@@ -70,10 +71,10 @@ class DialogStyle extends BaseStyle {
     style = style;
     classes = classes;
     inlineStyles = inlineStyles;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: DialogStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: DialogStyle });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DialogStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DialogStyle });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: DialogStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DialogStyle, decorators: [{
             type: Injectable
         }] });
 /**
@@ -126,8 +127,6 @@ var DialogClasses;
 })(DialogClasses || (DialogClasses = {}));
 
 const DIALOG_INSTANCE = new InjectionToken('DIALOG_INSTANCE');
-const showAnimation = animation([style$1({ transform: '{{transform}}', opacity: 0 }), animate('{{transition}}')]);
-const hideAnimation = animation([animate('{{transition}}', style$1({ transform: '{{transform}}', opacity: 0 }))]);
 /**
  * Dialog is a container to display content in an overlay window.
  * @group Components
@@ -261,9 +260,32 @@ class Dialog extends BaseComponent {
     focusTrap = true;
     /**
      * Transition options of the animation.
+     * @deprecated since v21.0.0. Use `motionOptions` instead.
      * @group Props
      */
     transitionOptions = '150ms cubic-bezier(0, 0, 0.2, 1)';
+    /**
+     * The motion options for the mask.
+     * @group Props
+     */
+    maskMotionOptions = input(undefined, { ...(ngDevMode ? { debugName: "maskMotionOptions" } : {}) });
+    computedMaskMotionOptions = computed(() => {
+        return {
+            ...this.ptm('maskMotion'),
+            ...this.maskMotionOptions()
+        };
+    }, { ...(ngDevMode ? { debugName: "computedMaskMotionOptions" } : {}) });
+    /**
+     * The motion options.
+     * @group Props
+     */
+    motionOptions = input(undefined, { ...(ngDevMode ? { debugName: "motionOptions" } : {}) });
+    computedMotionOptions = computed(() => {
+        return {
+            ...this.ptm('motion'),
+            ...this.motionOptions()
+        };
+    }, { ...(ngDevMode ? { debugName: "computedMotionOptions" } : {}) });
     /**
      * Name of the close icon.
      * @group Props
@@ -318,6 +340,8 @@ class Dialog extends BaseComponent {
         this._visible = value;
         if (this._visible && !this.maskVisible) {
             this.maskVisible = true;
+            this.renderMask.set(true);
+            this.renderDialog.set(true);
         }
     }
     /**
@@ -337,33 +361,7 @@ class Dialog extends BaseComponent {
      * Position of the dialog.
      * @group Props
      */
-    get position() {
-        return this._position;
-    }
-    set position(value) {
-        this._position = value;
-        switch (value) {
-            case 'topleft':
-            case 'bottomleft':
-            case 'left':
-                this.transformOptions = 'translate3d(-100%, 0px, 0px)';
-                break;
-            case 'topright':
-            case 'bottomright':
-            case 'right':
-                this.transformOptions = 'translate3d(100%, 0px, 0px)';
-                break;
-            case 'bottom':
-                this.transformOptions = 'translate3d(0px, 100%, 0px)';
-                break;
-            case 'top':
-                this.transformOptions = 'translate3d(0px, -100%, 0px)';
-                break;
-            default:
-                this.transformOptions = 'scale(0.7)';
-                break;
-        }
-    }
+    position;
     /**
      * Role attribute of html element.
      * @group Emits
@@ -374,7 +372,7 @@ class Dialog extends BaseComponent {
      * @defaultValue 'self'
      * @group Props
      */
-    appendTo = input(undefined, ...(ngDevMode ? [{ debugName: "appendTo" }] : []));
+    appendTo = input(undefined, { ...(ngDevMode ? { debugName: "appendTo" } : {}) });
     /**
      * Callback to invoke when dialog is shown.
      * @group Emits
@@ -419,50 +417,80 @@ class Dialog extends BaseComponent {
     footerViewChild;
     /**
      * Header template.
-     * @group Props
+     * @group Templates
      */
     headerTemplate;
     /**
      * Content template.
-     * @group Props
+     * @group Templates
      */
     contentTemplate;
     /**
      * Footer template.
-     * @group Props
+     * @group Templates
      */
     footerTemplate;
     /**
      * Close icon template.
-     * @group Props
+     * @group Templates
      */
     closeIconTemplate;
     /**
      * Maximize icon template.
-     * @group Props
+     * @group Templates
      */
     maximizeIconTemplate;
     /**
      * Minimize icon template.
-     * @group Props
+     * @group Templates
      */
     minimizeIconTemplate;
     /**
      * Headless template.
-     * @group Props
+     * @group Templates
      */
     headlessTemplate;
+    /**
+     * Custom header template.
+     * @group Templates
+     */
     _headerTemplate;
+    /**
+     * Custom content template.
+     * @group Templates
+     */
     _contentTemplate;
+    /**
+     * Custom footer template.
+     * @group Templates
+     */
     _footerTemplate;
+    /**
+     * Custom close icon template.
+     * @group Templates
+     */
     _closeiconTemplate;
+    /**
+     * Custom maximize icon template.
+     * @group Templates
+     */
     _maximizeiconTemplate;
+    /**
+     * Custom minimize icon template.
+     * @group Templates
+     */
     _minimizeiconTemplate;
+    /**
+     * Custom headless template.
+     * @group Templates
+     */
     _headlessTemplate;
-    $appendTo = computed(() => this.appendTo() || this.config.overlayAppendTo(), ...(ngDevMode ? [{ debugName: "$appendTo" }] : []));
+    $appendTo = computed(() => this.appendTo() || this.config.overlayAppendTo(), { ...(ngDevMode ? { debugName: "$appendTo" } : {}) });
+    renderMask = signal(false, { ...(ngDevMode ? { debugName: "renderMask" } : {}) });
+    renderDialog = signal(false, { ...(ngDevMode ? { debugName: "renderDialog" } : {}) });
     _visible = false;
     maskVisible;
-    container;
+    container = signal(null, { ...(ngDevMode ? { debugName: "container" } : {}) });
     wrapper;
     dragging;
     ariaLabelledBy = this.getAriaLabelledBy();
@@ -484,7 +512,6 @@ class Dialog extends BaseComponent {
     preMaximizePageY;
     id = uuid('pn_id_');
     _style = {};
-    _position = 'center';
     originalStyle;
     transformOptions = 'scale(0.7)';
     styleElement;
@@ -510,7 +537,7 @@ class Dialog extends BaseComponent {
         const pos = positions.find((item) => item === this.position);
         return {
             'p-dialog-mask': true,
-            'p-overlay-mask p-overlay-mask-enter': this.modal || this.dismissableMask,
+            'p-overlay-mask': this.modal || this.dismissableMask,
             [`p-dialog-${pos}`]: pos
         };
     }
@@ -598,7 +625,8 @@ class Dialog extends BaseComponent {
         }
     }
     close(event) {
-        this.visibleChange.emit(false);
+        this.visible = false;
+        this.visibleChange.emit(this.visible);
         event.preventDefault();
     }
     enableModality() {
@@ -619,7 +647,7 @@ class Dialog extends BaseComponent {
                 this.unbindMaskClickListener();
             }
             // for nested dialogs w/modal
-            const scrollBlockers = document.querySelectorAll('.p-dialog-mask-scrollblocker');
+            const scrollBlockers = document.querySelectorAll('[data-p-scrollblocker-active="true"]');
             if (this.modal && scrollBlockers && scrollBlockers.length == 1) {
                 unblockBodyScroll();
             }
@@ -648,8 +676,8 @@ class Dialog extends BaseComponent {
     }
     moveOnTop() {
         if (this.autoZIndex) {
-            ZIndexUtils.set('modal', this.container, this.baseZIndex + this.config.zIndex.modal);
-            this.wrapper.style.zIndex = String(parseInt(this.container.style.zIndex, 10) - 1);
+            ZIndexUtils.set('modal', this.container(), this.baseZIndex + this.config.zIndex.modal);
+            this.wrapper.style.zIndex = String(parseInt(this.container().style.zIndex, 10) - 1);
         }
         else {
             this.zIndexForLayering = ZIndexUtils.generateZIndex('modal', (this.baseZIndex ?? 0) + this.config.zIndex.modal);
@@ -657,7 +685,7 @@ class Dialog extends BaseComponent {
     }
     createStyle() {
         if (isPlatformBrowser(this.platformId)) {
-            if (!this.styleElement) {
+            if (!this.styleElement && !this.$unstyled()) {
                 this.styleElement = this.renderer.createElement('style');
                 this.styleElement.type = 'text/css';
                 setAttribute(this.styleElement, 'nonce', this.config?.csp()?.nonce);
@@ -678,64 +706,68 @@ class Dialog extends BaseComponent {
         }
     }
     initDrag(event) {
-        if (hasClass(event.target, 'p-dialog-maximize-icon') || hasClass(event.target, 'p-dialog-header-close-icon') || hasClass(event.target?.parentElement, 'p-dialog-header-icon')) {
+        const target = event.target;
+        const closestDiv = target.closest('div');
+        if (closestDiv?.getAttribute('data-pc-section') === 'headeractions') {
             return;
         }
         if (this.draggable) {
             this.dragging = true;
             this.lastPageX = event.pageX;
             this.lastPageY = event.pageY;
-            this.container.style.margin = '0';
-            addClass(this.document.body, 'p-unselectable-text');
+            this.container().style.margin = '0';
+            this.document.body.setAttribute('data-p-unselectable-text', 'true');
+            !this.$unstyled() && addStyle(this.document.body, { 'user-select': 'none' });
         }
     }
     onDrag(event) {
-        if (this.dragging && this.container) {
-            const containerWidth = getOuterWidth(this.container);
-            const containerHeight = getOuterHeight(this.container);
+        if (this.dragging && this.container()) {
+            const containerWidth = getOuterWidth(this.container());
+            const containerHeight = getOuterHeight(this.container());
             const deltaX = event.pageX - this.lastPageX;
             const deltaY = event.pageY - this.lastPageY;
-            const offset = this.container.getBoundingClientRect();
-            const containerComputedStyle = getComputedStyle(this.container);
+            const offset = this.container().getBoundingClientRect();
+            const containerComputedStyle = getComputedStyle(this.container());
             const leftMargin = parseFloat(containerComputedStyle.marginLeft);
             const topMargin = parseFloat(containerComputedStyle.marginTop);
             const leftPos = offset.left + deltaX - leftMargin;
             const topPos = offset.top + deltaY - topMargin;
             const viewport = getViewport();
-            this.container.style.position = 'fixed';
+            this.container().style.position = 'fixed';
             if (this.keepInViewport) {
                 if (leftPos >= this.minX && leftPos + containerWidth < viewport.width) {
                     this._style.left = `${leftPos}px`;
                     this.lastPageX = event.pageX;
-                    this.container.style.left = `${leftPos}px`;
+                    this.container().style.left = `${leftPos}px`;
                 }
                 if (topPos >= this.minY && topPos + containerHeight < viewport.height) {
                     this._style.top = `${topPos}px`;
                     this.lastPageY = event.pageY;
-                    this.container.style.top = `${topPos}px`;
+                    this.container().style.top = `${topPos}px`;
                 }
             }
             else {
                 this.lastPageX = event.pageX;
-                this.container.style.left = `${leftPos}px`;
+                this.container().style.left = `${leftPos}px`;
                 this.lastPageY = event.pageY;
-                this.container.style.top = `${topPos}px`;
+                this.container().style.top = `${topPos}px`;
             }
         }
     }
     endDrag(event) {
         if (this.dragging) {
             this.dragging = false;
-            removeClass(this.document.body, 'p-unselectable-text');
+            this.document.body.removeAttribute('data-p-unselectable-text');
+            !this.$unstyled() && (this.document.body.style['user-select'] = '');
             this.cd.detectChanges();
             this.onDragEnd.emit(event);
         }
     }
     resetPosition() {
-        this.container.style.position = '';
-        this.container.style.left = '';
-        this.container.style.top = '';
-        this.container.style.margin = '';
+        this.container().style.position = '';
+        this.container().style.left = '';
+        this.container().style.top = '';
+        this.container().style.margin = '';
     }
     //backward compatibility
     center() {
@@ -746,7 +778,8 @@ class Dialog extends BaseComponent {
             this.resizing = true;
             this.lastPageX = event.pageX;
             this.lastPageY = event.pageY;
-            addClass(this.document.body, 'p-unselectable-text');
+            this.document.body.setAttribute('data-p-unselectable-text', 'true');
+            !this.$unstyled() && addStyle(this.document.body, { 'user-select': 'none' });
             this.onResizeInit.emit(event);
         }
     }
@@ -754,29 +787,29 @@ class Dialog extends BaseComponent {
         if (this.resizing) {
             let deltaX = event.pageX - this.lastPageX;
             let deltaY = event.pageY - this.lastPageY;
-            let containerWidth = getOuterWidth(this.container);
-            let containerHeight = getOuterHeight(this.container);
+            let containerWidth = getOuterWidth(this.container());
+            let containerHeight = getOuterHeight(this.container());
             let contentHeight = getOuterHeight(this.contentViewChild?.nativeElement);
             let newWidth = containerWidth + deltaX;
             let newHeight = containerHeight + deltaY;
-            let minWidth = this.container.style.minWidth;
-            let minHeight = this.container.style.minHeight;
-            let offset = this.container.getBoundingClientRect();
+            let minWidth = this.container().style.minWidth;
+            let minHeight = this.container().style.minHeight;
+            let offset = this.container().getBoundingClientRect();
             let viewport = getViewport();
-            let hasBeenDragged = !parseInt(this.container.style.top) || !parseInt(this.container.style.left);
+            let hasBeenDragged = !parseInt(this.container().style.top) || !parseInt(this.container().style.left);
             if (hasBeenDragged) {
                 newWidth += deltaX;
                 newHeight += deltaY;
             }
             if ((!minWidth || newWidth > parseInt(minWidth)) && offset.left + newWidth < viewport.width) {
                 this._style.width = newWidth + 'px';
-                this.container.style.width = this._style.width;
+                this.container().style.width = this._style.width;
             }
             if ((!minHeight || newHeight > parseInt(minHeight)) && offset.top + newHeight < viewport.height) {
                 this.contentViewChild.nativeElement.style.height = contentHeight + newHeight - containerHeight + 'px';
                 if (this._style.height) {
                     this._style.height = newHeight + 'px';
-                    this.container.style.height = this._style.height;
+                    this.container().style.height = this._style.height;
                 }
             }
             this.lastPageX = event.pageX;
@@ -786,7 +819,8 @@ class Dialog extends BaseComponent {
     resizeEnd(event) {
         if (this.resizing) {
             this.resizing = false;
-            removeClass(this.document.body, 'p-unselectable-text');
+            this.document.body.removeAttribute('data-p-unselectable-text');
+            !this.$unstyled() && (this.document.body.style['user-select'] = '');
             this.onResizeEnd.emit(event);
         }
     }
@@ -854,8 +888,12 @@ class Dialog extends BaseComponent {
         const documentTarget = this.el ? this.el.nativeElement.ownerDocument : 'document';
         this.documentEscapeListener = this.renderer.listen(documentTarget, 'keydown', (event) => {
             if (event.key == 'Escape') {
+                const container = this.container();
+                if (!container) {
+                    return;
+                }
                 const currentZIndex = ZIndexUtils.getCurrent();
-                if (parseInt(this.container.style.zIndex) == currentZIndex || this.zIndexForLayering == currentZIndex) {
+                if (parseInt(container.style.zIndex) == currentZIndex || this.zIndexForLayering == currentZIndex) {
                     this.close(event);
                 }
             }
@@ -868,85 +906,76 @@ class Dialog extends BaseComponent {
         }
     }
     appendContainer() {
-        if (this.$appendTo() && this.$appendTo() !== 'self') {
-            if (this.$appendTo() === 'body')
-                this.renderer.appendChild(this.document.body, this.wrapper);
-            else
-                appendChild(this.$appendTo(), this.wrapper);
+        if (this.$appendTo() !== 'self') {
+            appendChild(this.document.body, this.wrapper);
         }
     }
     restoreAppend() {
-        if (this.container && this.$appendTo() !== 'self') {
+        if (this.container() && this.$appendTo() !== 'self') {
             this.renderer.appendChild(this.el.nativeElement, this.wrapper);
         }
     }
-    onAnimationStart(event) {
-        switch (event.toState) {
-            case 'visible':
-                this.container = event.element;
-                this.wrapper = this.container?.parentElement;
-                this.$attrSelector && this.container?.setAttribute(this.$attrSelector, '');
-                this.appendContainer();
-                this.moveOnTop();
-                this.bindGlobalListeners();
-                this.container?.setAttribute(this.id, '');
-                if (this.modal) {
-                    this.enableModality();
-                }
-                // if (!this.modal && this.blockScroll) {
-                //     addClass(this.document.body, 'p-overflow-hidden');
-                // }
-                if (this.focusOnShow) {
-                    this.focus();
-                }
-                break;
-            case 'void':
-                if (this.wrapper && this.modal) {
-                    addClass(this.wrapper, 'p-overlay-mask-leave');
-                }
-                break;
+    onBeforeEnter(event) {
+        this.container.set(event.element);
+        this.wrapper = this.container()?.parentElement;
+        this.$attrSelector && this.container()?.setAttribute(this.$attrSelector, '');
+        this.appendContainer();
+        this.moveOnTop();
+        this.bindGlobalListeners();
+        this.container()?.setAttribute(this.id, '');
+        if (this.modal) {
+            this.enableModality();
         }
     }
-    onAnimationEnd(event) {
-        switch (event.toState) {
-            case 'void':
-                this.onContainerDestroy();
-                this.onHide.emit({});
-                this.cd.markForCheck();
-                if (this.maskVisible !== this.visible) {
-                    this.maskVisible = this.visible;
-                }
-                break;
-            case 'visible':
-                this.onShow.emit({});
-                break;
+    onAfterEnter() {
+        if (this.focusOnShow) {
+            this.focus();
+        }
+        this.onShow.emit({});
+    }
+    onBeforeLeave() {
+        if (this.modal) {
+            this.maskVisible = false;
+        }
+    }
+    onAfterLeave() {
+        this.onContainerDestroy();
+        this.renderDialog.set(false);
+        if (this.modal) {
+            this.renderMask.set(false);
+        }
+        else {
+            this.maskVisible = false;
+        }
+        this.onHide.emit({});
+        this.cd.markForCheck();
+    }
+    onMaskAfterLeave() {
+        if (!this.renderDialog()) {
+            this.renderMask.set(false);
         }
     }
     onContainerDestroy() {
         this.unbindGlobalListeners();
         this.dragging = false;
-        this.maskVisible = false;
         if (this.maximized) {
-            // removeClass(this.document.body, 'p-overflow-hidden')
-            this.document.body.style.removeProperty('--scrollbar;-width');
+            removeClass(this.document.body, 'p-overflow-hidden');
+            this.document.body.style.removeProperty('--scrollbar-width');
             this.maximized = false;
         }
         if (this.modal) {
             this.disableModality();
         }
-        // if (this.blockScroll) {
-        //      removeClass(this.document.body, 'p-overflow-hidden');
-        // }
-        if (hasClass(this.document.body, 'p-overflow-hidden')) {
+        if (this.blockScroll && hasClass(this.document.body, 'p-overflow-hidden')) {
             removeClass(this.document.body, 'p-overflow-hidden');
         }
-        if (this.container && this.autoZIndex) {
-            ZIndexUtils.clear(this.container);
+        if (this.container() && this.autoZIndex) {
+            ZIndexUtils.clear(this.container());
         }
         if (this.zIndexForLayering) {
             ZIndexUtils.revertZIndex(this.zIndexForLayering);
         }
-        this.container = null;
+        this.container.set(null);
         this.wrapper = null;
         this._style = this.originalStyle ? { ...this.originalStyle } : {};
     }
@@ -957,199 +986,250 @@ class Dialog extends BaseComponent {
         }
     }
     onDestroy() {
-        if (this.container) {
+        if (this.container()) {
             this.restoreAppend();
             this.onContainerDestroy();
         }
         this.destroyStyle();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: Dialog, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.4", type: Dialog, isStandalone: true, selector: "p-dialog", inputs: { hostName: { classPropertyName: "hostName", publicName: "hostName", isSignal: false, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: false, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, contentStyle: { classPropertyName: "contentStyle", publicName: "contentStyle", isSignal: false, isRequired: false, transformFunction: null }, contentStyleClass: { classPropertyName: "contentStyleClass", publicName: "contentStyleClass", isSignal: false, isRequired: false, transformFunction: null }, modal: { classPropertyName: "modal", publicName: "modal", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, dismissableMask: { classPropertyName: "dismissableMask", publicName: "dismissableMask", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, rtl: { classPropertyName: "rtl", publicName: "rtl", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, breakpoints: { classPropertyName: "breakpoints", publicName: "breakpoints", isSignal: false, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: false, isRequired: false, transformFunction: null }, maskStyleClass: { classPropertyName: "maskStyleClass", publicName: "maskStyleClass", isSignal: false, isRequired: false, transformFunction: null }, maskStyle: { classPropertyName: "maskStyle", publicName: "maskStyle", isSignal: false, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, blockScroll: { classPropertyName: "blockScroll", publicName: "blockScroll", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, autoZIndex: { classPropertyName: "autoZIndex", publicName: "autoZIndex", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, baseZIndex: { classPropertyName: "baseZIndex", publicName: "baseZIndex", isSignal: false, isRequired: false, transformFunction: numberAttribute }, minX: { classPropertyName: "minX", publicName: "minX", isSignal: false, isRequired: false, transformFunction: numberAttribute }, minY: { classPropertyName: "minY", publicName: "minY", isSignal: false, isRequired: false, transformFunction: numberAttribute }, focusOnShow: { classPropertyName: "focusOnShow", publicName: "focusOnShow", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, maximizable: { classPropertyName: "maximizable", publicName: "maximizable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, keepInViewport: { classPropertyName: "keepInViewport", publicName: "keepInViewport", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, focusTrap: { classPropertyName: "focusTrap", publicName: "focusTrap", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, transitionOptions: { classPropertyName: "transitionOptions", publicName: "transitionOptions", isSignal: false, isRequired: false, transformFunction: null }, closeIcon: { classPropertyName: "closeIcon", publicName: "closeIcon", isSignal: false, isRequired: false, transformFunction: null }, closeAriaLabel: { classPropertyName: "closeAriaLabel", publicName: "closeAriaLabel", isSignal: false, isRequired: false, transformFunction: null }, closeTabindex: { classPropertyName: "closeTabindex", publicName: "closeTabindex", isSignal: false, isRequired: false, transformFunction: null }, minimizeIcon: { classPropertyName: "minimizeIcon", publicName: "minimizeIcon", isSignal: false, isRequired: false, transformFunction: null }, maximizeIcon: { classPropertyName: "maximizeIcon", publicName: "maximizeIcon", isSignal: false, isRequired: false, transformFunction: null }, closeButtonProps: { classPropertyName: "closeButtonProps", publicName: "closeButtonProps", isSignal: false, isRequired: false, transformFunction: null }, maximizeButtonProps: { classPropertyName: "maximizeButtonProps", publicName: "maximizeButtonProps", isSignal: false, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: false, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: false, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: false, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: false, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, headerTemplate: { classPropertyName: "headerTemplate", publicName: "content", isSignal: false, isRequired: false, transformFunction: null }, contentTemplate: { classPropertyName: "contentTemplate", publicName: "contentTemplate", isSignal: false, isRequired: false, transformFunction: null }, footerTemplate: { classPropertyName: "footerTemplate", publicName: "footerTemplate", isSignal: false, isRequired: false, transformFunction: null }, closeIconTemplate: { classPropertyName: "closeIconTemplate", publicName: "closeIconTemplate", isSignal: false, isRequired: false, transformFunction: null }, maximizeIconTemplate: { classPropertyName: "maximizeIconTemplate", publicName: "maximizeIconTemplate", isSignal: false, isRequired: false, transformFunction: null }, minimizeIconTemplate: { classPropertyName: "minimizeIconTemplate", publicName: "minimizeIconTemplate", isSignal: false, isRequired: false, transformFunction: null }, headlessTemplate: { classPropertyName: "headlessTemplate", publicName: "headlessTemplate", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onShow: "onShow", onHide: "onHide", visibleChange: "visibleChange", onResizeInit: "onResizeInit", onResizeEnd: "onResizeEnd", onDragEnd: "onDragEnd", onMaximize: "onMaximize" }, providers: [DialogStyle, { provide: DIALOG_INSTANCE, useExisting: Dialog }, { provide: PARENT_INSTANCE, useExisting: Dialog }], queries: [{ propertyName: "_headerTemplate", first: true, predicate: ["header"] }, { propertyName: "_contentTemplate", first: true, predicate: ["content"] }, { propertyName: "_footerTemplate", first: true, predicate: ["footer"] }, { propertyName: "_closeiconTemplate", first: true, predicate: ["closeicon"] }, { propertyName: "_maximizeiconTemplate", first: true, predicate: ["maximizeicon"] }, { propertyName: "_minimizeiconTemplate", first: true, predicate: ["minimizeicon"] }, { propertyName: "_headlessTemplate", first: true, predicate: ["headless"] }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "headerViewChild", first: true, predicate: ["titlebar"], descendants: true }, { propertyName: "contentViewChild", first: true, predicate: ["content"], descendants: true }, { propertyName: "footerViewChild", first: true, predicate: ["footer"], descendants: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
-        <div *ngIf="maskVisible" [class]="cn(cx('mask'), maskStyleClass)" [style]="sx('mask')" [ngStyle]="maskStyle" [pBind]="ptm('mask')">
+    get dataP() {
+        return this.cn({
+            maximized: this.maximized,
+            modal: this.modal
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: Dialog, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: Dialog, isStandalone: true, selector: "p-dialog", inputs: { hostName: { classPropertyName: "hostName", publicName: "hostName", isSignal: false, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: false, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, contentStyle: { classPropertyName: "contentStyle", publicName: "contentStyle", isSignal: false, isRequired: false, transformFunction: null }, contentStyleClass: { classPropertyName: "contentStyleClass", publicName: "contentStyleClass", isSignal: false, isRequired: false, transformFunction: null }, modal: { classPropertyName: "modal", publicName: "modal", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, dismissableMask: { classPropertyName: "dismissableMask", publicName: "dismissableMask", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, rtl: { classPropertyName: "rtl", publicName: "rtl", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, breakpoints: { classPropertyName: "breakpoints", publicName: "breakpoints", isSignal: false, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: false, isRequired: false, transformFunction: null }, maskStyleClass: { classPropertyName: "maskStyleClass", publicName: "maskStyleClass", isSignal: false, isRequired: false, transformFunction: null }, maskStyle: { classPropertyName: "maskStyle", publicName: "maskStyle", isSignal: false, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, blockScroll: { classPropertyName: "blockScroll", publicName: "blockScroll", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, autoZIndex: { classPropertyName: "autoZIndex", publicName: "autoZIndex", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, baseZIndex: { classPropertyName: "baseZIndex", publicName: "baseZIndex", isSignal: false, isRequired: false, transformFunction: numberAttribute }, minX: { classPropertyName: "minX", publicName: "minX", isSignal: false, isRequired: false, transformFunction: numberAttribute }, minY: { classPropertyName: "minY", publicName: "minY", isSignal: false, isRequired: false, transformFunction: numberAttribute }, focusOnShow: { classPropertyName: "focusOnShow", publicName: "focusOnShow", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, maximizable: { classPropertyName: "maximizable", publicName: "maximizable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, keepInViewport: { classPropertyName: "keepInViewport", publicName: "keepInViewport", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, focusTrap: { classPropertyName: "focusTrap", publicName: "focusTrap", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, transitionOptions: { classPropertyName: "transitionOptions", publicName: "transitionOptions", isSignal: false, isRequired: false, transformFunction: null }, maskMotionOptions: { classPropertyName: "maskMotionOptions", publicName: "maskMotionOptions", isSignal: true, isRequired: false, transformFunction: null }, motionOptions: { classPropertyName: "motionOptions", publicName: "motionOptions", isSignal: true, isRequired: false, transformFunction: null }, closeIcon: { classPropertyName: "closeIcon", publicName: "closeIcon", isSignal: false, isRequired: false, transformFunction: null }, closeAriaLabel: { classPropertyName: "closeAriaLabel", publicName: "closeAriaLabel", isSignal: false, isRequired: false, transformFunction: null }, closeTabindex: { classPropertyName: "closeTabindex", publicName: "closeTabindex", isSignal: false, isRequired: false, transformFunction: null }, minimizeIcon: { classPropertyName: "minimizeIcon", publicName: "minimizeIcon", isSignal: false, isRequired: false, transformFunction: null }, maximizeIcon: { classPropertyName: "maximizeIcon", publicName: "maximizeIcon", isSignal: false, isRequired: false, transformFunction: null }, closeButtonProps: { classPropertyName: "closeButtonProps", publicName: "closeButtonProps", isSignal: false, isRequired: false, transformFunction: null }, maximizeButtonProps: { classPropertyName: "maximizeButtonProps", publicName: "maximizeButtonProps", isSignal: false, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: false, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: false, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: false, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: false, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, headerTemplate: { classPropertyName: "headerTemplate", publicName: "content", isSignal: false, isRequired: false, transformFunction: null }, contentTemplate: { classPropertyName: "contentTemplate", publicName: "contentTemplate", isSignal: false, isRequired: false, transformFunction: null }, footerTemplate: { classPropertyName: "footerTemplate", publicName: "footerTemplate", isSignal: false, isRequired: false, transformFunction: null }, closeIconTemplate: { classPropertyName: "closeIconTemplate", publicName: "closeIconTemplate", isSignal: false, isRequired: false, transformFunction: null }, maximizeIconTemplate: { classPropertyName: "maximizeIconTemplate", publicName: "maximizeIconTemplate", isSignal: false, isRequired: false, transformFunction: null }, minimizeIconTemplate: { classPropertyName: "minimizeIconTemplate", publicName: "minimizeIconTemplate", isSignal: false, isRequired: false, transformFunction: null }, headlessTemplate: { classPropertyName: "headlessTemplate", publicName: "headlessTemplate", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onShow: "onShow", onHide: "onHide", visibleChange: "visibleChange", onResizeInit: "onResizeInit", onResizeEnd: "onResizeEnd", onDragEnd: "onDragEnd", onMaximize: "onMaximize" }, providers: [DialogStyle, { provide: DIALOG_INSTANCE, useExisting: Dialog }, { provide: PARENT_INSTANCE, useExisting: Dialog }], queries: [{ propertyName: "_headerTemplate", first: true, predicate: ["header"] }, { propertyName: "_contentTemplate", first: true, predicate: ["content"] }, { propertyName: "_footerTemplate", first: true, predicate: ["footer"] }, { propertyName: "_closeiconTemplate", first: true, predicate: ["closeicon"] }, { propertyName: "_maximizeiconTemplate", first: true, predicate: ["maximizeicon"] }, { propertyName: "_minimizeiconTemplate", first: true, predicate: ["minimizeicon"] }, { propertyName: "_headlessTemplate", first: true, predicate: ["headless"] }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "headerViewChild", first: true, predicate: ["titlebar"], descendants: true }, { propertyName: "contentViewChild", first: true, predicate: ["content"], descendants: true }, { propertyName: "footerViewChild", first: true, predicate: ["footer"], descendants: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
+        @if (renderMask()) {
             <div
-                *ngIf="visible"
-                #container
-                [class]="cn(cx('root'), styleClass)"
-                [style]="sx('root')"
-                [ngStyle]="style"
-                [pBind]="ptm('root')"
-                pFocusTrap
-                [pFocusTrapDisabled]="focusTrap === false"
-                [@animation]="{
-                    value: 'visible',
-                    params: { transform: transformOptions, transition: transitionOptions }
-                }"
-                (@animation.start)="onAnimationStart($event)"
-                (@animation.done)="onAnimationEnd($event)"
-                [attr.role]="role"
-                [attr.aria-labelledby]="ariaLabelledBy"
-                [attr.aria-modal]="true"
+                [class]="cn(cx('mask'), maskStyleClass)"
+                [style]="sx('mask')"
+                [ngStyle]="maskStyle"
+                [pBind]="ptm('mask')"
+                [pMotion]="maskVisible"
+                [pMotionAppear]="true"
+                [pMotionEnterActiveClass]="modal ? 'p-overlay-mask-enter-active' : ''"
+                [pMotionLeaveActiveClass]="modal ? 'p-overlay-mask-leave-active' : ''"
+                [pMotionOptions]="computedMaskMotionOptions()"
+                (pMotionOnAfterLeave)="onMaskAfterLeave()"
+                [attr.data-p-scrollblocker-active]="modal || blockScroll"
+                [attr.data-p]="dataP"
             >
-                <ng-container *ngIf="_headlessTemplate || headlessTemplate || headlessT; else notHeadless">
-                    <ng-container *ngTemplateOutlet="_headlessTemplate || headlessTemplate || headlessT"></ng-container>
-                </ng-container>
+                @if (renderDialog()) {
+                    <div
+                        #container
+                        [class]="cn(cx('root'), styleClass)"
+                        [style]="sx('root')"
+                        [ngStyle]="style"
+                        [pBind]="ptm('root')"
+                        pFocusTrap
+                        [pFocusTrapDisabled]="focusTrap === false"
+                        [pMotion]="visible"
+                        [pMotionAppear]="true"
+                        [pMotionName]="'p-dialog'"
+                        [pMotionOptions]="computedMotionOptions()"
+                        (pMotionOnBeforeEnter)="onBeforeEnter($event)"
+                        (pMotionOnAfterEnter)="onAfterEnter($event)"
+                        (pMotionOnBeforeLeave)="onBeforeLeave($event)"
+                        (pMotionOnAfterLeave)="onAfterLeave($event)"
+                        [attr.role]="role"
+                        [attr.aria-labelledby]="ariaLabelledBy"
+                        [attr.aria-modal]="true"
+                        [attr.data-p]="dataP"
+                    >
+                        <ng-container *ngIf="_headlessTemplate || headlessTemplate || headlessT; else notHeadless">
+                            <ng-container *ngTemplateOutlet="_headlessTemplate || headlessTemplate || headlessT"></ng-container>
+                        </ng-container>
 
-                <ng-template #notHeadless>
-                    <div *ngIf="resizable" [class]="cx('resizeHandle')" [pBind]="ptm('resizeHandle')" [style.z-index]="90" (mousedown)="initResize($event)"></div>
-                    <div #titlebar [class]="cx('header')" [pBind]="ptm('header')" (mousedown)="initDrag($event)" *ngIf="showHeader">
-                        <span [id]="ariaLabelledBy" [class]="cx('title')" [pBind]="ptm('title')" *ngIf="!_headerTemplate && !headerTemplate && !headerT">{{ header }}</span>
-                        <ng-container *ngTemplateOutlet="_headerTemplate || headerTemplate || headerT"></ng-container>
-                        <div [class]="cx('headerActions')" [pBind]="ptm('headerActions')">
-                            <p-button
-                                [pt]="ptm('pcMaximizeButton')"
-                                *ngIf="maximizable"
-                                [styleClass]="cx('pcMaximizeButton')"
-                                [ariaLabel]="maximized ? minimizeLabel : maximizeLabel"
-                                (onClick)="maximize()"
-                                (keydown.enter)="maximize()"
-                                [tabindex]="maximizable ? '0' : '-1'"
-                                [buttonProps]="maximizeButtonProps"
-                            >
-                                <ng-template #icon>
-                                    <span *ngIf="maximizeIcon && !_maximizeiconTemplate && !_minimizeiconTemplate" [ngClass]="maximized ? minimizeIcon : maximizeIcon"></span>
-                                    <ng-container *ngIf="!maximizeIcon && !maximizeButtonProps?.icon">
-                                        <svg data-p-icon="window-maximize" *ngIf="!maximized && !_maximizeiconTemplate && !maximizeIconTemplate && !maximizeIconT" />
-                                        <svg data-p-icon="window-minimize" *ngIf="maximized && !_minimizeiconTemplate && !minimizeIconTemplate && !minimizeIconT" />
-                                    </ng-container>
-                                    <ng-container *ngIf="!maximized">
-                                        <ng-template *ngTemplateOutlet="_maximizeiconTemplate || maximizeIconTemplate || maximizeIconT"></ng-template>
-                                    </ng-container>
-                                    <ng-container *ngIf="maximized">
-                                        <ng-template *ngTemplateOutlet="_minimizeiconTemplate || minimizeIconTemplate || minimizeIconT"></ng-template>
-                                    </ng-container>
-                                </ng-template>
-                            </p-button>
-                            <p-button
-                                [pt]="ptm('pcCloseButton')"
-                                *ngIf="closable"
-                                [styleClass]="cx('pcCloseButton')"
-                                [ariaLabel]="closeAriaLabel"
-                                (onClick)="close($event)"
-                                (keydown.enter)="close($event)"
-                                [tabindex]="closeTabindex"
-                                [buttonProps]="closeButtonProps"
-                            >
-                                <ng-template #icon>
-                                    <ng-container *ngIf="!_closeiconTemplate && !closeIconTemplate && !closeIconT && !closeButtonProps?.icon">
-                                        <span *ngIf="closeIcon" [class]="closeIcon"></span>
-                                        <svg data-p-icon="times" *ngIf="!closeIcon" />
-                                    </ng-container>
-                                    <span *ngIf="_closeiconTemplate || closeIconTemplate || closeIconT">
-                                        <ng-template *ngTemplateOutlet="_closeiconTemplate || closeIconTemplate || closeIconT"></ng-template>
-                                    </span>
-                                </ng-template>
-                            </p-button>
-                        </div>
-                    </div>
-                    <div #content [class]="cn(cx('content'), contentStyleClass)" [ngStyle]="contentStyle" [pBind]="ptm('content')">
-                        <ng-content></ng-content>
-                        <ng-container *ngTemplateOutlet="_contentTemplate || contentTemplate || contentT"></ng-container>
+                        <ng-template #notHeadless>
+                            <div *ngIf="resizable" [class]="cx('resizeHandle')" [pBind]="ptm('resizeHandle')" [style.z-index]="90" (mousedown)="initResize($event)"></div>
+                            <div #titlebar [class]="cx('header')" [pBind]="ptm('header')" (mousedown)="initDrag($event)" *ngIf="showHeader">
+                                <span [id]="ariaLabelledBy" [class]="cx('title')" [pBind]="ptm('title')" *ngIf="!_headerTemplate && !headerTemplate && !headerT">{{ header }}</span>
+                                <ng-container *ngTemplateOutlet="_headerTemplate || headerTemplate || headerT"></ng-container>
+                                <div [class]="cx('headerActions')" [pBind]="ptm('headerActions')">
+                                    <p-button
+                                        [pt]="ptm('pcMaximizeButton')"
+                                        *ngIf="maximizable"
+                                        [styleClass]="cx('pcMaximizeButton')"
+                                        [ariaLabel]="maximized ? minimizeLabel : maximizeLabel"
+                                        (onClick)="maximize()"
+                                        (keydown.enter)="maximize()"
+                                        [tabindex]="maximizable ? '0' : '-1'"
+                                        [buttonProps]="maximizeButtonProps"
+                                        [unstyled]="unstyled()"
+                                        [attr.data-pc-group-section]="'headericon'"
+                                    >
+                                        <ng-template #icon>
+                                            <span *ngIf="maximizeIcon && !_maximizeiconTemplate && !_minimizeiconTemplate" [ngClass]="maximized ? minimizeIcon : maximizeIcon"></span>
+                                            <ng-container *ngIf="!maximizeIcon && !maximizeButtonProps?.icon">
+                                                <svg data-p-icon="window-maximize" *ngIf="!maximized && !_maximizeiconTemplate && !maximizeIconTemplate && !maximizeIconT" />
+                                                <svg data-p-icon="window-minimize" *ngIf="maximized && !_minimizeiconTemplate && !minimizeIconTemplate && !minimizeIconT" />
+                                            </ng-container>
+                                            <ng-container *ngIf="!maximized">
+                                                <ng-template *ngTemplateOutlet="_maximizeiconTemplate || maximizeIconTemplate || maximizeIconT"></ng-template>
+                                            </ng-container>
+                                            <ng-container *ngIf="maximized">
+                                                <ng-template *ngTemplateOutlet="_minimizeiconTemplate || minimizeIconTemplate || minimizeIconT"></ng-template>
+                                            </ng-container>
+                                        </ng-template>
+                                    </p-button>
+                                    <p-button
+                                        [pt]="ptm('pcCloseButton')"
+                                        *ngIf="closable"
+                                        [styleClass]="cx('pcCloseButton')"
+                                        [ariaLabel]="closeAriaLabel"
+                                        (onClick)="close($event)"
+                                        (keydown.enter)="close($event)"
+                                        [tabindex]="closeTabindex"
+                                        [buttonProps]="closeButtonProps"
+                                        [unstyled]="unstyled()"
+                                        [attr.data-pc-group-section]="'headericon'"
+                                    >
+                                        <ng-template #icon>
+                                            <ng-container *ngIf="!_closeiconTemplate && !closeIconTemplate && !closeIconT && !closeButtonProps?.icon">
+                                                <span *ngIf="closeIcon" [class]="closeIcon"></span>
+                                                <svg data-p-icon="times" *ngIf="!closeIcon" />
+                                            </ng-container>
+                                            <span *ngIf="_closeiconTemplate || closeIconTemplate || closeIconT">
+                                                <ng-template *ngTemplateOutlet="_closeiconTemplate || closeIconTemplate || closeIconT"></ng-template>
+                                            </span>
+                                        </ng-template>
+                                    </p-button>
+                                </div>
+                            </div>
+                            <div #content [class]="cn(cx('content'), contentStyleClass)" [ngStyle]="contentStyle" [pBind]="ptm('content')">
+                                <ng-content></ng-content>
+                                <ng-container *ngTemplateOutlet="_contentTemplate || contentTemplate || contentT"></ng-container>
+                            </div>
+                            <div #footer [class]="cx('footer')" [pBind]="ptm('footer')" *ngIf="_footerTemplate || footerTemplate || footerT">
+                                <ng-content select="p-footer"></ng-content>
+                                <ng-container *ngTemplateOutlet="_footerTemplate || footerTemplate || footerT"></ng-container>
+                            </div>
+                        </ng-template>
                     </div>
-                    <div #footer [class]="cx('footer')" [pBind]="ptm('footer')" *ngIf="_footerTemplate || footerTemplate || footerT">
-                        <ng-content select="p-footer"></ng-content>
-                        <ng-container *ngTemplateOutlet="_footerTemplate || footerTemplate || footerT"></ng-container>
-                    </div>
-                </ng-template>
+                }
             </div>
-        </div>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "component", type: 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: "component", type: TimesIcon, selector: "[data-p-icon=\"times\"]" }, { kind: "component", type: WindowMaximizeIcon, selector: "[data-p-icon=\"window-maximize\"]" }, { kind: "component", type: WindowMinimizeIcon, selector: "[data-p-icon=\"window-minimize\"]" }, { kind: "ngmodule", type: SharedModule }, { kind: "directive", type: Bind, selector: "[pBind]", inputs: ["pBind"] }], animations: [trigger('animation', [transition('void => visible', [useAnimation(showAnimation)]), transition('visible => void', [useAnimation(hideAnimation)])])], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        }
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "component", type: 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: "component", type: TimesIcon, selector: "[data-p-icon=\"times\"]" }, { kind: "component", type: WindowMaximizeIcon, selector: "[data-p-icon=\"window-maximize\"]" }, { kind: "component", type: WindowMinimizeIcon, selector: "[data-p-icon=\"window-minimize\"]" }, { 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: Dialog, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: Dialog, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-dialog',
                     standalone: true,
-                    imports: [CommonModule, Button, FocusTrap, TimesIcon, WindowMaximizeIcon, WindowMinimizeIcon, SharedModule, Bind],
+                    imports: [CommonModule, Button, FocusTrap, TimesIcon, WindowMaximizeIcon, WindowMinimizeIcon, SharedModule, Bind, MotionModule],
                     template: `
-        <div *ngIf="maskVisible" [class]="cn(cx('mask'), maskStyleClass)" [style]="sx('mask')" [ngStyle]="maskStyle" [pBind]="ptm('mask')">
+        @if (renderMask()) {
             <div
-                *ngIf="visible"
-                #container
-                [class]="cn(cx('root'), styleClass)"
-                [style]="sx('root')"
-                [ngStyle]="style"
-                [pBind]="ptm('root')"
-                pFocusTrap
-                [pFocusTrapDisabled]="focusTrap === false"
-                [@animation]="{
-                    value: 'visible',
-                    params: { transform: transformOptions, transition: transitionOptions }
-                }"
-                (@animation.start)="onAnimationStart($event)"
-                (@animation.done)="onAnimationEnd($event)"
-                [attr.role]="role"
-                [attr.aria-labelledby]="ariaLabelledBy"
-                [attr.aria-modal]="true"
+                [class]="cn(cx('mask'), maskStyleClass)"
+                [style]="sx('mask')"
+                [ngStyle]="maskStyle"
+                [pBind]="ptm('mask')"
+                [pMotion]="maskVisible"
+                [pMotionAppear]="true"
+                [pMotionEnterActiveClass]="modal ? 'p-overlay-mask-enter-active' : ''"
+                [pMotionLeaveActiveClass]="modal ? 'p-overlay-mask-leave-active' : ''"
+                [pMotionOptions]="computedMaskMotionOptions()"
+                (pMotionOnAfterLeave)="onMaskAfterLeave()"
+                [attr.data-p-scrollblocker-active]="modal || blockScroll"
+                [attr.data-p]="dataP"
             >
-                <ng-container *ngIf="_headlessTemplate || headlessTemplate || headlessT; else notHeadless">
-                    <ng-container *ngTemplateOutlet="_headlessTemplate || headlessTemplate || headlessT"></ng-container>
-                </ng-container>
+                @if (renderDialog()) {
+                    <div
+                        #container
+                        [class]="cn(cx('root'), styleClass)"
+                        [style]="sx('root')"
+                        [ngStyle]="style"
+                        [pBind]="ptm('root')"
+                        pFocusTrap
+                        [pFocusTrapDisabled]="focusTrap === false"
+                        [pMotion]="visible"
+                        [pMotionAppear]="true"
+                        [pMotionName]="'p-dialog'"
+                        [pMotionOptions]="computedMotionOptions()"
+                        (pMotionOnBeforeEnter)="onBeforeEnter($event)"
+                        (pMotionOnAfterEnter)="onAfterEnter($event)"
+                        (pMotionOnBeforeLeave)="onBeforeLeave($event)"
+                        (pMotionOnAfterLeave)="onAfterLeave($event)"
+                        [attr.role]="role"
+                        [attr.aria-labelledby]="ariaLabelledBy"
+                        [attr.aria-modal]="true"
+                        [attr.data-p]="dataP"
+                    >
+                        <ng-container *ngIf="_headlessTemplate || headlessTemplate || headlessT; else notHeadless">
+                            <ng-container *ngTemplateOutlet="_headlessTemplate || headlessTemplate || headlessT"></ng-container>
+                        </ng-container>
 
-                <ng-template #notHeadless>
-                    <div *ngIf="resizable" [class]="cx('resizeHandle')" [pBind]="ptm('resizeHandle')" [style.z-index]="90" (mousedown)="initResize($event)"></div>
-                    <div #titlebar [class]="cx('header')" [pBind]="ptm('header')" (mousedown)="initDrag($event)" *ngIf="showHeader">
-                        <span [id]="ariaLabelledBy" [class]="cx('title')" [pBind]="ptm('title')" *ngIf="!_headerTemplate && !headerTemplate && !headerT">{{ header }}</span>
-                        <ng-container *ngTemplateOutlet="_headerTemplate || headerTemplate || headerT"></ng-container>
-                        <div [class]="cx('headerActions')" [pBind]="ptm('headerActions')">
-                            <p-button
-                                [pt]="ptm('pcMaximizeButton')"
-                                *ngIf="maximizable"
-                                [styleClass]="cx('pcMaximizeButton')"
-                                [ariaLabel]="maximized ? minimizeLabel : maximizeLabel"
-                                (onClick)="maximize()"
-                                (keydown.enter)="maximize()"
-                                [tabindex]="maximizable ? '0' : '-1'"
-                                [buttonProps]="maximizeButtonProps"
-                            >
-                                <ng-template #icon>
-                                    <span *ngIf="maximizeIcon && !_maximizeiconTemplate && !_minimizeiconTemplate" [ngClass]="maximized ? minimizeIcon : maximizeIcon"></span>
-                                    <ng-container *ngIf="!maximizeIcon && !maximizeButtonProps?.icon">
-                                        <svg data-p-icon="window-maximize" *ngIf="!maximized && !_maximizeiconTemplate && !maximizeIconTemplate && !maximizeIconT" />
-                                        <svg data-p-icon="window-minimize" *ngIf="maximized && !_minimizeiconTemplate && !minimizeIconTemplate && !minimizeIconT" />
-                                    </ng-container>
-                                    <ng-container *ngIf="!maximized">
-                                        <ng-template *ngTemplateOutlet="_maximizeiconTemplate || maximizeIconTemplate || maximizeIconT"></ng-template>
-                                    </ng-container>
-                                    <ng-container *ngIf="maximized">
-                                        <ng-template *ngTemplateOutlet="_minimizeiconTemplate || minimizeIconTemplate || minimizeIconT"></ng-template>
-                                    </ng-container>
-                                </ng-template>
-                            </p-button>
-                            <p-button
-                                [pt]="ptm('pcCloseButton')"
-                                *ngIf="closable"
-                                [styleClass]="cx('pcCloseButton')"
-                                [ariaLabel]="closeAriaLabel"
-                                (onClick)="close($event)"
-                                (keydown.enter)="close($event)"
-                                [tabindex]="closeTabindex"
-                                [buttonProps]="closeButtonProps"
-                            >
-                                <ng-template #icon>
-                                    <ng-container *ngIf="!_closeiconTemplate && !closeIconTemplate && !closeIconT && !closeButtonProps?.icon">
-                                        <span *ngIf="closeIcon" [class]="closeIcon"></span>
-                                        <svg data-p-icon="times" *ngIf="!closeIcon" />
-                                    </ng-container>
-                                    <span *ngIf="_closeiconTemplate || closeIconTemplate || closeIconT">
-                                        <ng-template *ngTemplateOutlet="_closeiconTemplate || closeIconTemplate || closeIconT"></ng-template>
-                                    </span>
-                                </ng-template>
-                            </p-button>
-                        </div>
-                    </div>
-                    <div #content [class]="cn(cx('content'), contentStyleClass)" [ngStyle]="contentStyle" [pBind]="ptm('content')">
-                        <ng-content></ng-content>
-                        <ng-container *ngTemplateOutlet="_contentTemplate || contentTemplate || contentT"></ng-container>
+                        <ng-template #notHeadless>
+                            <div *ngIf="resizable" [class]="cx('resizeHandle')" [pBind]="ptm('resizeHandle')" [style.z-index]="90" (mousedown)="initResize($event)"></div>
+                            <div #titlebar [class]="cx('header')" [pBind]="ptm('header')" (mousedown)="initDrag($event)" *ngIf="showHeader">
+                                <span [id]="ariaLabelledBy" [class]="cx('title')" [pBind]="ptm('title')" *ngIf="!_headerTemplate && !headerTemplate && !headerT">{{ header }}</span>
+                                <ng-container *ngTemplateOutlet="_headerTemplate || headerTemplate || headerT"></ng-container>
+                                <div [class]="cx('headerActions')" [pBind]="ptm('headerActions')">
+                                    <p-button
+                                        [pt]="ptm('pcMaximizeButton')"
+                                        *ngIf="maximizable"
+                                        [styleClass]="cx('pcMaximizeButton')"
+                                        [ariaLabel]="maximized ? minimizeLabel : maximizeLabel"
+                                        (onClick)="maximize()"
+                                        (keydown.enter)="maximize()"
+                                        [tabindex]="maximizable ? '0' : '-1'"
+                                        [buttonProps]="maximizeButtonProps"
+                                        [unstyled]="unstyled()"
+                                        [attr.data-pc-group-section]="'headericon'"
+                                    >
+                                        <ng-template #icon>
+                                            <span *ngIf="maximizeIcon && !_maximizeiconTemplate && !_minimizeiconTemplate" [ngClass]="maximized ? minimizeIcon : maximizeIcon"></span>
+                                            <ng-container *ngIf="!maximizeIcon && !maximizeButtonProps?.icon">
+                                                <svg data-p-icon="window-maximize" *ngIf="!maximized && !_maximizeiconTemplate && !maximizeIconTemplate && !maximizeIconT" />
+                                                <svg data-p-icon="window-minimize" *ngIf="maximized && !_minimizeiconTemplate && !minimizeIconTemplate && !minimizeIconT" />
+                                            </ng-container>
+                                            <ng-container *ngIf="!maximized">
+                                                <ng-template *ngTemplateOutlet="_maximizeiconTemplate || maximizeIconTemplate || maximizeIconT"></ng-template>
+                                            </ng-container>
+                                            <ng-container *ngIf="maximized">
+                                                <ng-template *ngTemplateOutlet="_minimizeiconTemplate || minimizeIconTemplate || minimizeIconT"></ng-template>
+                                            </ng-container>
+                                        </ng-template>
+                                    </p-button>
+                                    <p-button
+                                        [pt]="ptm('pcCloseButton')"
+                                        *ngIf="closable"
+                                        [styleClass]="cx('pcCloseButton')"
+                                        [ariaLabel]="closeAriaLabel"
+                                        (onClick)="close($event)"
+                                        (keydown.enter)="close($event)"
+                                        [tabindex]="closeTabindex"
+                                        [buttonProps]="closeButtonProps"
+                                        [unstyled]="unstyled()"
+                                        [attr.data-pc-group-section]="'headericon'"
+                                    >
+                                        <ng-template #icon>
+                                            <ng-container *ngIf="!_closeiconTemplate && !closeIconTemplate && !closeIconT && !closeButtonProps?.icon">
+                                                <span *ngIf="closeIcon" [class]="closeIcon"></span>
+                                                <svg data-p-icon="times" *ngIf="!closeIcon" />
+                                            </ng-container>
+                                            <span *ngIf="_closeiconTemplate || closeIconTemplate || closeIconT">
+                                                <ng-template *ngTemplateOutlet="_closeiconTemplate || closeIconTemplate || closeIconT"></ng-template>
+                                            </span>
+                                        </ng-template>
+                                    </p-button>
+                                </div>
+                            </div>
+                            <div #content [class]="cn(cx('content'), contentStyleClass)" [ngStyle]="contentStyle" [pBind]="ptm('content')">
+                                <ng-content></ng-content>
+                                <ng-container *ngTemplateOutlet="_contentTemplate || contentTemplate || contentT"></ng-container>
+                            </div>
+                            <div #footer [class]="cx('footer')" [pBind]="ptm('footer')" *ngIf="_footerTemplate || footerTemplate || footerT">
+                                <ng-content select="p-footer"></ng-content>
+                                <ng-container *ngTemplateOutlet="_footerTemplate || footerTemplate || footerT"></ng-container>
+                            </div>
+                        </ng-template>
                     </div>
-                    <div #footer [class]="cx('footer')" [pBind]="ptm('footer')" *ngIf="_footerTemplate || footerTemplate || footerT">
-                        <ng-content select="p-footer"></ng-content>
-                        <ng-container *ngTemplateOutlet="_footerTemplate || footerTemplate || footerT"></ng-container>
-                    </div>
-                </ng-template>
+                }
             </div>
-        </div>
+        }
     `,
-                    animations: [trigger('animation', [transition('void => visible', [useAnimation(showAnimation)]), transition('visible => void', [useAnimation(hideAnimation)])])],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
                     providers: [DialogStyle, { provide: DIALOG_INSTANCE, useExisting: Dialog }, { provide: PARENT_INSTANCE, useExisting: Dialog }],
@@ -1224,7 +1304,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 args: [{ transform: booleanAttribute }]
             }], transitionOptions: [{
                 type: Input
-            }], closeIcon: [{
+            }], maskMotionOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "maskMotionOptions", required: false }] }], motionOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "motionOptions", required: false }] }], closeIcon: [{
                 type: Input
             }], closeAriaLabel: [{
                 type: Input
@@ -1246,7 +1326,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 type: Input
             }], role: [{
                 type: Input
-            }], onShow: [{
+            }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], onShow: [{
                 type: Output
             }], onHide: [{
                 type: Output
@@ -1310,11 +1390,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 args: [PrimeTemplate]
             }] } });
 class DialogModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: DialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.4", ngImport: i0, type: DialogModule, imports: [Dialog, SharedModule], exports: [Dialog, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: DialogModule, imports: [Dialog, SharedModule, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.1", ngImport: i0, type: DialogModule, imports: [Dialog, SharedModule], exports: [Dialog, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DialogModule, imports: [Dialog, SharedModule, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: DialogModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DialogModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [Dialog, SharedModule],