primeng 19.1.3 → 20.0.0-rc.1

package/fesm2022/primeng-dialog.mjs

@@ -1,192 +1,19 @@
-import { animation, style, animate, trigger, transition, useAnimation } from '@angular/animations';
+import { animation, style as style$1, animate, trigger, transition, useAnimation } from '@angular/animations';
 import * as i1 from '@angular/common';
 import { isPlatformBrowser, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, inject, NgZone, booleanAttribute, numberAttribute, ContentChildren, ContentChild, Input, ViewChild, Output, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
-import { uuid, blockBodyScroll, unblockBodyScroll, setAttribute, hasClass, addClass, getOuterWidth, getOuterHeight, getViewport, removeClass, appendChild } from '@primeuix/utils';
+import { Injectable, input, EventEmitter, computed, inject, 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 { TranslationKeys, SharedModule, PrimeTemplate } from 'primeng/api';
 import { BaseComponent } from 'primeng/basecomponent';
 import { Button } from 'primeng/button';
-import { DomHandler } from 'primeng/dom';
+import { DomHandler, blockBodyScroll, unblockBodyScroll } from 'primeng/dom';
 import { FocusTrap } from 'primeng/focustrap';
 import { TimesIcon, WindowMaximizeIcon, WindowMinimizeIcon } from 'primeng/icons';
 import { ZIndexUtils } from 'primeng/utils';
+import { style } from '@primeuix/styles/dialog';
 import { BaseStyle } from 'primeng/base';
 
-const theme = ({ dt }) => `
-.p-dialog {
-    max-height: 90%;
-    transform: scale(1);
-    border-radius: ${dt('dialog.border.radius')};
-    box-shadow: ${dt('dialog.shadow')};
-    background: ${dt('dialog.background')};
-    border: 1px solid ${dt('dialog.border.color')};
-    color: ${dt('dialog.color')};
-    display: flex;
-    flex-direction: column;
-    pointer-events: auto
-}
-
-.p-dialog-content {
-    overflow-y: auto;
-    padding: ${dt('dialog.content.padding')};
-    flex-grow: 1;
-}
-
-.p-dialog-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    flex-shrink: 0;
-    padding: ${dt('dialog.header.padding')};
-}
-
-.p-dialog-title {
-    font-weight: ${dt('dialog.title.font.weight')};
-    font-size: ${dt('dialog.title.font.size')};
-}
-
-.p-dialog-footer {
-    flex-shrink: 0;
-    padding: ${dt('dialog.footer.padding')};
-    display: flex;
-    justify-content: flex-end;
-    gap: ${dt('dialog.footer.gap')};
-}
-
-.p-dialog-header-actions {
-    display: flex;
-    align-items: center;
-    gap: ${dt('dialog.header.gap')};
-}
-
-.p-dialog-enter-active {
-    transition: all 150ms cubic-bezier(0, 0, 0.2, 1);
-}
-
-.p-dialog-leave-active {
-    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.p-dialog-enter-from,
-.p-dialog-leave-to {
-    opacity: 0;
-    transform: scale(0.7);
-}
-
-.p-dialog-top .p-dialog,
-.p-dialog-bottom .p-dialog,
-.p-dialog-left .p-dialog,
-.p-dialog-right .p-dialog,
-.p-dialog-topleft .p-dialog,
-.p-dialog-topright .p-dialog,
-.p-dialog-bottomleft .p-dialog,
-.p-dialog-bottomright .p-dialog {
-    margin: 0.75rem;
-    transform: translate3d(0px, 0px, 0px);
-}
-
-.p-dialog-top .p-dialog-enter-active,
-.p-dialog-top .p-dialog-leave-active,
-.p-dialog-bottom .p-dialog-enter-active,
-.p-dialog-bottom .p-dialog-leave-active,
-.p-dialog-left .p-dialog-enter-active,
-.p-dialog-left .p-dialog-leave-active,
-.p-dialog-right .p-dialog-enter-active,
-.p-dialog-right .p-dialog-leave-active,
-.p-dialog-topleft .p-dialog-enter-active,
-.p-dialog-topleft .p-dialog-leave-active,
-.p-dialog-topright .p-dialog-enter-active,
-.p-dialog-topright .p-dialog-leave-active,
-.p-dialog-bottomleft .p-dialog-enter-active,
-.p-dialog-bottomleft .p-dialog-leave-active,
-.p-dialog-bottomright .p-dialog-enter-active,
-.p-dialog-bottomright .p-dialog-leave-active {
-    transition: all 0.3s ease-out;
-}
-
-.p-dialog-top .p-dialog-enter-from,
-.p-dialog-top .p-dialog-leave-to {
-    transform: translate3d(0px, -100%, 0px);
-}
-
-.p-dialog-bottom .p-dialog-enter-from,
-.p-dialog-bottom .p-dialog-leave-to {
-    transform: translate3d(0px, 100%, 0px);
-}
-
-.p-dialog-left .p-dialog-enter-from,
-.p-dialog-left .p-dialog-leave-to,
-.p-dialog-topleft .p-dialog-enter-from,
-.p-dialog-topleft .p-dialog-leave-to,
-.p-dialog-bottomleft .p-dialog-enter-from,
-.p-dialog-bottomleft .p-dialog-leave-to {
-    transform: translate3d(-100%, 0px, 0px);
-}
-
-.p-dialog-right .p-dialog-enter-from,
-.p-dialog-right .p-dialog-leave-to,
-.p-dialog-topright .p-dialog-enter-from,
-.p-dialog-topright .p-dialog-leave-to,
-.p-dialog-bottomright .p-dialog-enter-from,
-.p-dialog-bottomright .p-dialog-leave-to {
-    transform: translate3d(100%, 0px, 0px);
-}
-
-.p-dialog-left:dir(rtl) .p-dialog-enter-from,
-.p-dialog-left:dir(rtl) .p-dialog-leave-to,
-.p-dialog-topleft:dir(rtl) .p-dialog-enter-from,
-.p-dialog-topleft:dir(rtl) .p-dialog-leave-to,
-.p-dialog-bottomleft:dir(rtl) .p-dialog-enter-from,
-.p-dialog-bottomleft:dir(rtl) .p-dialog-leave-to {
-    transform: translate3d(100%, 0px, 0px);
-}
-
-.p-dialog-right:dir(rtl) .p-dialog-enter-from,
-.p-dialog-right:dir(rtl) .p-dialog-leave-to,
-.p-dialog-topright:dir(rtl) .p-dialog-enter-from,
-.p-dialog-topright:dir(rtl) .p-dialog-leave-to,
-.p-dialog-bottomright:dir(rtl) .p-dialog-enter-from,
-.p-dialog-bottomright:dir(rtl) .p-dialog-leave-to {
-    transform: translate3d(-100%, 0px, 0px);
-}
-
-.p-dialog-maximized {
-    width: 100vw !important;
-    height: 100vh !important;
-    top: 0px !important;
-    left: 0px !important;
-    max-height: 100%;
-    height: 100%;
-    border-radius: 0;
-}
-
-.p-dialog-maximized .p-dialog-content {
-    flex-grow: 1;
-}
-
-.p-overlay-mask:dir(rtl) {
-    flex-direction: row-reverse;
-}
-
-/* For PrimeNG */
-
-.p-dialog .p-resizable-handle {
-    position: absolute;
-    font-size: 0.1px;
-    display: block;
-    cursor: se-resize;
-    width: 12px;
-    height: 12px;
-    right: 1px;
-    bottom: 1px;
-}
-
-.p-confirm-dialog .p-dialog-content {
-    display: flex;
-    align-items: center;
-}
-`;
 /* Position */
 const inlineStyles = {
     mask: ({ instance }) => ({
@@ -218,31 +45,32 @@ 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': true,
-            'p-overlay-mask p-overlay-mask-enter': instance.modal,
-            [`p-dialog-${pos}`]: pos
-        };
+        return ['p-dialog-mask', { 'p-overlay-mask p-overlay-mask-enter': instance.modal }, pos ? `p-dialog-${pos}` : ''];
     },
-    root: ({ instance }) => ({ 'p-dialog p-component': true, 'p-dialog-maximized': instance.maximizable && instance.maximized }),
+    root: ({ instance }) => [
+        'p-dialog p-component',
+        {
+            'p-dialog-maximized': instance.maximizable && instance.maximized
+        }
+    ],
     header: 'p-dialog-header',
     title: 'p-dialog-title',
     resizeHandle: 'p-resizable-handle',
     headerActions: 'p-dialog-header-actions',
     pcMaximizeButton: 'p-dialog-maximize-button',
     pcCloseButton: 'p-dialog-close-button',
-    content: 'p-dialog-content',
+    content: () => ['p-dialog-content'],
     footer: 'p-dialog-footer'
 };
 class DialogStyle extends BaseStyle {
     name = 'dialog';
-    theme = theme;
+    theme = style;
     classes = classes;
     inlineStyles = inlineStyles;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DialogStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DialogStyle });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DialogStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DialogStyle });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DialogStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DialogStyle, decorators: [{
             type: Injectable
         }] });
 /**
@@ -294,8 +122,8 @@ var DialogClasses;
     DialogClasses["footer"] = "p-dialog-footer";
 })(DialogClasses || (DialogClasses = {}));
 
-const showAnimation = animation([style({ transform: '{{transform}}', opacity: 0 }), animate('{{transition}}')]);
-const hideAnimation = animation([animate('{{transition}}', style({ transform: '{{transform}}', opacity: 0 }))]);
+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
@@ -316,28 +144,6 @@ class Dialog extends BaseComponent {
      * @group Props
      */
     resizable = true;
-    /**
-     * Defines the left offset of dialog.
-     * @group Props
-     * @deprecated positionLeft property is deprecated.
-     */
-    get positionLeft() {
-        return 0;
-    }
-    set positionLeft(_positionLeft) {
-        console.log('positionLeft property is deprecated.');
-    }
-    /**
-     * Defines the top offset of dialog.
-     * @group Props
-     * @deprecated positionTop property is deprecated.
-     */
-    get positionTop() {
-        return 0;
-    }
-    set positionTop(_positionTop) {
-        console.log('positionTop property is deprecated.');
-    }
     /**
      * Style of the content section.
      * @group Props
@@ -373,22 +179,6 @@ class Dialog extends BaseComponent {
      * @group Props
      */
     closable = true;
-    /**
-     * Defines if the component is responsive.
-     * @group Props
-     * @deprecated Responsive property is deprecated.
-     */
-    get responsive() {
-        return false;
-    }
-    set responsive(_responsive) {
-        console.log('Responsive property is deprecated.');
-    }
-    /**
-     * Target element to attach the dialog, 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).
-     * @group Props
-     */
-    appendTo;
     /**
      * Object literal to define widths per screen size.
      * @group Props
@@ -414,17 +204,6 @@ class Dialog extends BaseComponent {
      * @group Props
      */
     showHeader = true;
-    /**
-     * Defines the breakpoint of the component responsive.
-     * @group Props
-     * @deprecated Breakpoint property is not utilized and deprecated. Use breakpoints or CSS media queries instead.
-     */
-    get breakpoint() {
-        return 649;
-    }
-    set breakpoint(_breakpoint) {
-        console.log('Breakpoint property is not utilized and deprecated, use breakpoints or CSS media queries instead.');
-    }
     /**
      * Whether background scroll should be blocked when dialog is visible.
      * @group Props
@@ -580,6 +359,12 @@ class Dialog extends BaseComponent {
      * @group Emits
      */
     role = 'dialog';
+    /**
+     * Target element to attach the overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name).
+     * @defaultValue 'self'
+     * @group Props
+     */
+    appendTo = input(undefined);
     /**
      * Callback to invoke when dialog is shown.
      * @group Emits
@@ -664,6 +449,7 @@ class Dialog extends BaseComponent {
     _maximizeiconTemplate;
     _minimizeiconTemplate;
     _headlessTemplate;
+    $appendTo = computed(() => this.appendTo() || this.config.overlayAppendTo());
     _visible = false;
     maskVisible;
     container;
@@ -1062,15 +848,15 @@ class Dialog extends BaseComponent {
         }
     }
     appendContainer() {
-        if (this.appendTo) {
-            if (this.appendTo === 'body')
+        if (this.$appendTo() && this.$appendTo() !== 'self') {
+            if (this.$appendTo() === 'body')
                 this.renderer.appendChild(this.document.body, this.wrapper);
             else
-                appendChild(this.appendTo, this.wrapper);
+                appendChild(this.$appendTo(), this.wrapper);
         }
     }
     restoreAppend() {
-        if (this.container && this.appendTo) {
+        if (this.container && this.$appendTo() !== 'self') {
             this.renderer.appendChild(this.el.nativeElement, this.wrapper);
         }
     }
@@ -1079,6 +865,7 @@ class Dialog extends BaseComponent {
             case 'visible':
                 this.container = event.element;
                 this.wrapper = this.container?.parentElement;
+                this.attrSelector && this.container.setAttribute(this.attrSelector, '');
                 this.appendContainer();
                 this.moveOnTop();
                 this.bindGlobalListeners();
@@ -1154,32 +941,15 @@ class Dialog extends BaseComponent {
         this.destroyStyle();
         super.ngOnDestroy();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: Dialog, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.10", type: Dialog, isStandalone: true, selector: "p-dialog", inputs: { header: "header", draggable: ["draggable", "draggable", booleanAttribute], resizable: ["resizable", "resizable", booleanAttribute], positionLeft: "positionLeft", positionTop: "positionTop", contentStyle: "contentStyle", contentStyleClass: "contentStyleClass", modal: ["modal", "modal", booleanAttribute], closeOnEscape: ["closeOnEscape", "closeOnEscape", booleanAttribute], dismissableMask: ["dismissableMask", "dismissableMask", booleanAttribute], rtl: ["rtl", "rtl", booleanAttribute], closable: ["closable", "closable", booleanAttribute], responsive: "responsive", appendTo: "appendTo", breakpoints: "breakpoints", styleClass: "styleClass", maskStyleClass: "maskStyleClass", maskStyle: "maskStyle", showHeader: ["showHeader", "showHeader", booleanAttribute], breakpoint: "breakpoint", blockScroll: ["blockScroll", "blockScroll", booleanAttribute], autoZIndex: ["autoZIndex", "autoZIndex", booleanAttribute], baseZIndex: ["baseZIndex", "baseZIndex", numberAttribute], minX: ["minX", "minX", numberAttribute], minY: ["minY", "minY", numberAttribute], focusOnShow: ["focusOnShow", "focusOnShow", booleanAttribute], maximizable: ["maximizable", "maximizable", booleanAttribute], keepInViewport: ["keepInViewport", "keepInViewport", booleanAttribute], focusTrap: ["focusTrap", "focusTrap", booleanAttribute], transitionOptions: "transitionOptions", closeIcon: "closeIcon", closeAriaLabel: "closeAriaLabel", closeTabindex: "closeTabindex", minimizeIcon: "minimizeIcon", maximizeIcon: "maximizeIcon", closeButtonProps: "closeButtonProps", maximizeButtonProps: "maximizeButtonProps", visible: "visible", style: "style", position: "position", role: "role", headerTemplate: ["content", "headerTemplate"], contentTemplate: "contentTemplate", footerTemplate: "footerTemplate", closeIconTemplate: "closeIconTemplate", maximizeIconTemplate: "maximizeIconTemplate", minimizeIconTemplate: "minimizeIconTemplate", headlessTemplate: "headlessTemplate" }, outputs: { onShow: "onShow", onHide: "onHide", visibleChange: "visibleChange", onResizeInit: "onResizeInit", onResizeEnd: "onResizeEnd", onDragEnd: "onDragEnd", onMaximize: "onMaximize" }, providers: [DialogStyle], 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, ngImport: i0, template: `
-        <div
-            *ngIf="maskVisible"
-            [ngClass]="maskClass"
-            [class]="maskStyleClass"
-            [ngStyle]="{
-                position: 'fixed',
-                height: '100%',
-                width: '100%',
-                left: 0,
-                top: 0,
-                display: 'flex',
-                'justify-content': position === 'left' || position === 'topleft' || position === 'bottomleft' ? 'flex-start' : position === 'right' || position === 'topright' || position === 'bottomright' ? 'flex-end' : 'center',
-                'align-items': position === 'top' || position === 'topleft' || position === 'topright' ? 'flex-start' : position === 'bottom' || position === 'bottomleft' || position === 'bottomright' ? 'flex-end' : 'center',
-                'pointer-events': modal ? 'auto' : 'none'
-            }"
-            [style]="maskStyle"
-        >
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Dialog, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.6", type: Dialog, isStandalone: true, selector: "p-dialog", inputs: { 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], 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, ngImport: i0, template: `
+        <div *ngIf="maskVisible" [class]="cn(cx('mask'), maskStyleClass)" [style]="sx('mask')" [ngStyle]="maskStyle">
             <div
                 *ngIf="visible"
                 #container
-                [class]="styleClass"
-                [ngClass]="{ 'p-dialog p-component': true, 'p-dialog-maximized': maximizable && maximized }"
-                [ngStyle]="{ display: 'flex', 'flex-direction': 'column', 'pointer-events': 'auto' }"
-                [style]="style"
+                [class]="cn(cx('root'), styleClass)"
+                [style]="sx('root')"
+                [ngStyle]="style"
                 pFocusTrap
                 [pFocusTrapDisabled]="focusTrap === false"
                 [@animation]="{
@@ -1197,28 +967,30 @@ class Dialog extends BaseComponent {
                 </ng-container>
 
                 <ng-template #notHeadless>
-                    <div *ngIf="resizable" [ngClass]="cx('resizeHandle')" style="z-index: 90;" (mousedown)="initResize($event)"></div>
-                    <div #titlebar [ngClass]="cx('header')" (mousedown)="initDrag($event)" *ngIf="showHeader">
-                        <span [id]="ariaLabelledBy" [ngClass]="cx('title')" *ngIf="!_headerTemplate && !headerTemplate && !headerT">{{ header }}</span>
+                    <div *ngIf="resizable" [class]="cx('resizeHandle')" style="z-index: 90;" (mousedown)="initResize($event)"></div>
+                    <div #titlebar [class]="cx('header')" (mousedown)="initDrag($event)" *ngIf="showHeader">
+                        <span [id]="ariaLabelledBy" [class]="cx('title')" *ngIf="!_headerTemplate && !headerTemplate && !headerT">{{ header }}</span>
                         <ng-container *ngTemplateOutlet="_headerTemplate || headerTemplate || headerT"></ng-container>
-                        <div [ngClass]="cx('headerActions')">
+                        <div [class]="cx('headerActions')">
                             <p-button *ngIf="maximizable" [styleClass]="cx('pcMaximizeButton')" (onClick)="maximize()" (keydown.enter)="maximize()" [tabindex]="maximizable ? '0' : '-1'" [ariaLabel]="maximizeLabel" [buttonProps]="maximizeButtonProps">
                                 <span *ngIf="maximizeIcon && !_maximizeiconTemplate && !_minimizeiconTemplate" [ngClass]="maximized ? minimizeIcon : maximizeIcon"></span>
-                                <ng-container *ngIf="!maximizeIcon && !maximizeButtonProps?.icon">
-                                    <WindowMaximizeIcon *ngIf="!maximized && !_maximizeiconTemplate && !maximizeIconTemplate && !maximizeIconT" />
-                                    <WindowMinimizeIcon *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 #icon>
+                                    <ng-container *ngIf="!maximizeIcon && !maximizeButtonProps?.icon">
+                                        <WindowMaximizeIcon *ngIf="!maximized && !_maximizeiconTemplate && !maximizeIconTemplate && !maximizeIconT" />
+                                        <WindowMinimizeIcon *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 *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" [ngClass]="closeIcon"></span>
+                                        <span *ngIf="closeIcon" [class]="closeIcon"></span>
                                         <TimesIcon *ngIf="!closeIcon" />
                                     </ng-container>
                                     <span *ngIf="_closeiconTemplate || closeIconTemplate || closeIconT">
@@ -1228,11 +1000,11 @@ class Dialog extends BaseComponent {
                             </p-button>
                         </div>
                     </div>
-                    <div #content [ngClass]="cx('content')" [class]="contentStyleClass" [ngStyle]="contentStyle" [attr.data-pc-section]="'content'">
+                    <div #content [class]="cn(cx('content'), contentStyleClass)" [ngStyle]="contentStyle" [attr.data-pc-section]="'content'">
                         <ng-content></ng-content>
                         <ng-container *ngTemplateOutlet="_contentTemplate || contentTemplate || contentT"></ng-container>
                     </div>
-                    <div #footer [ngClass]="cx('footer')" *ngIf="_footerTemplate || footerTemplate || footerT">
+                    <div #footer [class]="cx('footer')" *ngIf="_footerTemplate || footerTemplate || footerT">
                         <ng-content select="p-footer"></ng-content>
                         <ng-container *ngTemplateOutlet="_footerTemplate || footerTemplate || footerT"></ng-container>
                     </div>
@@ -1241,37 +1013,20 @@ class Dialog extends BaseComponent {
         </div>
     `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: FocusTrap, selector: "[pFocusTrap]", inputs: ["pFocusTrapDisabled"] }, { kind: "component", type: TimesIcon, selector: "TimesIcon" }, { kind: "component", type: WindowMaximizeIcon, selector: "WindowMaximizeIcon" }, { kind: "component", type: WindowMinimizeIcon, selector: "WindowMinimizeIcon" }, { kind: "ngmodule", type: SharedModule }], animations: [trigger('animation', [transition('void => visible', [useAnimation(showAnimation)]), transition('visible => void', [useAnimation(hideAnimation)])])], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: Dialog, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Dialog, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-dialog',
                     standalone: true,
                     imports: [CommonModule, Button, FocusTrap, TimesIcon, WindowMaximizeIcon, WindowMinimizeIcon, SharedModule],
                     template: `
-        <div
-            *ngIf="maskVisible"
-            [ngClass]="maskClass"
-            [class]="maskStyleClass"
-            [ngStyle]="{
-                position: 'fixed',
-                height: '100%',
-                width: '100%',
-                left: 0,
-                top: 0,
-                display: 'flex',
-                'justify-content': position === 'left' || position === 'topleft' || position === 'bottomleft' ? 'flex-start' : position === 'right' || position === 'topright' || position === 'bottomright' ? 'flex-end' : 'center',
-                'align-items': position === 'top' || position === 'topleft' || position === 'topright' ? 'flex-start' : position === 'bottom' || position === 'bottomleft' || position === 'bottomright' ? 'flex-end' : 'center',
-                'pointer-events': modal ? 'auto' : 'none'
-            }"
-            [style]="maskStyle"
-        >
+        <div *ngIf="maskVisible" [class]="cn(cx('mask'), maskStyleClass)" [style]="sx('mask')" [ngStyle]="maskStyle">
             <div
                 *ngIf="visible"
                 #container
-                [class]="styleClass"
-                [ngClass]="{ 'p-dialog p-component': true, 'p-dialog-maximized': maximizable && maximized }"
-                [ngStyle]="{ display: 'flex', 'flex-direction': 'column', 'pointer-events': 'auto' }"
-                [style]="style"
+                [class]="cn(cx('root'), styleClass)"
+                [style]="sx('root')"
+                [ngStyle]="style"
                 pFocusTrap
                 [pFocusTrapDisabled]="focusTrap === false"
                 [@animation]="{
@@ -1289,28 +1044,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                 </ng-container>
 
                 <ng-template #notHeadless>
-                    <div *ngIf="resizable" [ngClass]="cx('resizeHandle')" style="z-index: 90;" (mousedown)="initResize($event)"></div>
-                    <div #titlebar [ngClass]="cx('header')" (mousedown)="initDrag($event)" *ngIf="showHeader">
-                        <span [id]="ariaLabelledBy" [ngClass]="cx('title')" *ngIf="!_headerTemplate && !headerTemplate && !headerT">{{ header }}</span>
+                    <div *ngIf="resizable" [class]="cx('resizeHandle')" style="z-index: 90;" (mousedown)="initResize($event)"></div>
+                    <div #titlebar [class]="cx('header')" (mousedown)="initDrag($event)" *ngIf="showHeader">
+                        <span [id]="ariaLabelledBy" [class]="cx('title')" *ngIf="!_headerTemplate && !headerTemplate && !headerT">{{ header }}</span>
                         <ng-container *ngTemplateOutlet="_headerTemplate || headerTemplate || headerT"></ng-container>
-                        <div [ngClass]="cx('headerActions')">
+                        <div [class]="cx('headerActions')">
                             <p-button *ngIf="maximizable" [styleClass]="cx('pcMaximizeButton')" (onClick)="maximize()" (keydown.enter)="maximize()" [tabindex]="maximizable ? '0' : '-1'" [ariaLabel]="maximizeLabel" [buttonProps]="maximizeButtonProps">
                                 <span *ngIf="maximizeIcon && !_maximizeiconTemplate && !_minimizeiconTemplate" [ngClass]="maximized ? minimizeIcon : maximizeIcon"></span>
-                                <ng-container *ngIf="!maximizeIcon && !maximizeButtonProps?.icon">
-                                    <WindowMaximizeIcon *ngIf="!maximized && !_maximizeiconTemplate && !maximizeIconTemplate && !maximizeIconT" />
-                                    <WindowMinimizeIcon *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 #icon>
+                                    <ng-container *ngIf="!maximizeIcon && !maximizeButtonProps?.icon">
+                                        <WindowMaximizeIcon *ngIf="!maximized && !_maximizeiconTemplate && !maximizeIconTemplate && !maximizeIconT" />
+                                        <WindowMinimizeIcon *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 *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" [ngClass]="closeIcon"></span>
+                                        <span *ngIf="closeIcon" [class]="closeIcon"></span>
                                         <TimesIcon *ngIf="!closeIcon" />
                                     </ng-container>
                                     <span *ngIf="_closeiconTemplate || closeIconTemplate || closeIconT">
@@ -1320,11 +1077,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                             </p-button>
                         </div>
                     </div>
-                    <div #content [ngClass]="cx('content')" [class]="contentStyleClass" [ngStyle]="contentStyle" [attr.data-pc-section]="'content'">
+                    <div #content [class]="cn(cx('content'), contentStyleClass)" [ngStyle]="contentStyle" [attr.data-pc-section]="'content'">
                         <ng-content></ng-content>
                         <ng-container *ngTemplateOutlet="_contentTemplate || contentTemplate || contentT"></ng-container>
                     </div>
-                    <div #footer [ngClass]="cx('footer')" *ngIf="_footerTemplate || footerTemplate || footerT">
+                    <div #footer [class]="cx('footer')" *ngIf="_footerTemplate || footerTemplate || footerT">
                         <ng-content select="p-footer"></ng-content>
                         <ng-container *ngTemplateOutlet="_footerTemplate || footerTemplate || footerT"></ng-container>
                     </div>
@@ -1345,10 +1102,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
             }], resizable: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
-            }], positionLeft: [{
-                type: Input
-            }], positionTop: [{
-                type: Input
             }], contentStyle: [{
                 type: Input
             }], contentStyleClass: [{
@@ -1368,10 +1121,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
             }], closable: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
-            }], responsive: [{
-                type: Input
-            }], appendTo: [{
-                type: Input
             }], breakpoints: [{
                 type: Input
             }], styleClass: [{
@@ -1383,8 +1132,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
             }], showHeader: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
-            }], breakpoint: [{
-                type: Input
             }], blockScroll: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
@@ -1500,11 +1247,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                 args: [PrimeTemplate]
             }] } });
 class DialogModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.10", ngImport: i0, type: DialogModule, imports: [Dialog, SharedModule], exports: [Dialog, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DialogModule, imports: [Dialog, SharedModule, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.6", ngImport: i0, type: DialogModule, imports: [Dialog, SharedModule], exports: [Dialog, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DialogModule, imports: [Dialog, SharedModule, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DialogModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DialogModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [Dialog, SharedModule],