primeng 20.1.2 → 20.3.0-rc.1

package/fesm2022/primeng-dynamicdialog.mjs

@@ -1,17 +1,13 @@
-import * as i3 from '@angular/common';
-import { isPlatformBrowser, CommonModule, DOCUMENT } from '@angular/common';
+import * as i4 from '@angular/common';
+import { CommonModule, DOCUMENT } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Directive, Injectable, inject, ViewChild, SkipSelf, Optional, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule, createComponent, Inject } from '@angular/core';
-import { uuid, setAttribute, addClass, removeClass, getOuterWidth, getOuterHeight, getViewport, hasClass, appendChild } from '@primeuix/utils';
-import { animation, style, animate, trigger, transition, useAnimation } from '@angular/animations';
+import { Directive, Injectable, InjectionToken, inject, ViewChild, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule, createComponent, Inject } from '@angular/core';
+import { uuid, appendChild } from '@primeuix/utils';
 import { TranslationKeys, SharedModule } from 'primeng/api';
-import { BaseComponent } from 'primeng/basecomponent';
-import { Button } from 'primeng/button';
-import { DomHandler } from 'primeng/dom';
-import { FocusTrap } from 'primeng/focustrap';
-import { WindowMaximizeIcon, WindowMinimizeIcon, TimesIcon } from 'primeng/icons';
-import { ZIndexUtils } from 'primeng/utils';
-import { DialogStyle } from 'primeng/dialog';
+import { BaseComponent, PARENT_INSTANCE } from 'primeng/basecomponent';
+import * as i3 from 'primeng/bind';
+import { Bind, BindModule } from 'primeng/bind';
+import { DialogStyle, Dialog } from 'primeng/dialog';
 import { Subject } from 'rxjs';
 
 class DynamicDialogContent {
@@ -19,10 +15,10 @@ class DynamicDialogContent {
     constructor(viewContainerRef) {
         this.viewContainerRef = viewContainerRef;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DynamicDialogContent, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: DynamicDialogContent, isStandalone: true, selector: "[pDynamicDialogContent]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: DynamicDialogContent, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.4", type: DynamicDialogContent, isStandalone: true, selector: "[pDynamicDialogContent]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DynamicDialogContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: DynamicDialogContent, decorators: [{
             type: Directive,
             args: [{
                     selector: '[pDynamicDialogContent]',
@@ -32,10 +28,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
 
 class DynamicDialogStyle extends DialogStyle {
     name = 'dialog';
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DynamicDialogStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DynamicDialogStyle });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: DynamicDialogStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: DynamicDialogStyle });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DynamicDialogStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: DynamicDialogStyle, decorators: [{
             type: Injectable
         }] });
 /**
@@ -243,7 +239,7 @@ class DynamicDialogConfig {
      */
     minimizeIcon;
     /**
-     * Position of the dialog, options are "center", "top", "bottom", "left", "right", "top-left", "top-right", "bottom-left" or "bottom-right".
+     * Position of the dialog, options are "center", "top", "bottom", "left", "right", "topleft", "topright", "bottomleft" or "bottomright".
      * @group Props
      */
     position;
@@ -392,45 +388,23 @@ class DynamicDialogRef {
     onChildComponentLoaded = new Subject();
 }
 
-const showAnimation = animation([style({ transform: '{{transform}}', opacity: 0 }), animate('{{transition}}', style({ transform: 'none', opacity: 1 }))]);
-const hideAnimation = animation([animate('{{transition}}', style({ transform: '{{transform}}', opacity: 0 }))]);
-class DynamicDialogComponent extends BaseComponent {
-    renderer;
+const DYNAMIC_DIALOG_INSTANCE = new InjectionToken('DYNAMIC_DIALOG_INSTANCE');
+class DynamicDialog extends BaseComponent {
     ddconfig;
     dialogRef;
-    zone;
-    parentDialog;
+    _componentStyle = inject(DynamicDialogStyle);
+    $pcDynamicDialog = inject(DYNAMIC_DIALOG_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
+    bindDirectiveInstance = inject(Bind, { self: true });
+    onAfterViewChecked() {
+        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
+    }
     visible = true;
     componentRef;
-    mask;
-    resizing;
-    dragging;
-    maximized;
-    _style = {};
-    originalStyle;
-    lastPageX;
-    lastPageY;
-    ariaLabelledBy;
     id = uuid('pn_id_');
-    styleElement;
     insertionPoint;
-    maskViewChild;
-    contentViewChild;
-    footerViewChild;
-    headerViewChild;
+    dialog;
     childComponentType;
     inputValues;
-    container;
-    wrapper;
-    documentKeydownListener;
-    documentEscapeListener;
-    maskClickListener;
-    transformOptions = 'scale(0.7)';
-    documentResizeListener;
-    documentResizeEndListener;
-    documentDragListener;
-    documentDragEndListener;
-    _componentStyle = inject(DynamicDialogStyle);
     get minX() {
         return this.ddconfig.minX ? this.ddconfig.minX : 0;
     }
@@ -452,41 +426,12 @@ class DynamicDialogComponent extends BaseComponent {
     get closable() {
         return this.ddconfig.closable;
     }
-    get style() {
-        return this._style;
-    }
     get position() {
         return this.ddconfig.position;
     }
     get defaultCloseAriaLabel() {
         return this.config.getTranslation(TranslationKeys.ARIA)['close'];
     }
-    set style(value) {
-        if (value) {
-            this._style = { ...value };
-            this.originalStyle = value;
-        }
-    }
-    get parent() {
-        const domElements = Array.from(this.document.getElementsByClassName('p-dialog'));
-        if (domElements.length > 1) {
-            return domElements.pop();
-        }
-    }
-    get parentContent() {
-        const domElements = Array.from(this.document.getElementsByClassName('p-dialog'));
-        if (domElements.length > 0) {
-            const contentElements = domElements[domElements.length - 1].querySelector('.p-dialog-content');
-            if (contentElements)
-                return Array.isArray(contentElements) ? contentElements[0] : contentElements;
-        }
-    }
-    get header() {
-        return this.ddconfig.header;
-    }
-    get data() {
-        return this.ddconfig.data;
-    }
     get breakpoints() {
         return this.ddconfig.breakpoints;
     }
@@ -508,63 +453,39 @@ class DynamicDialogComponent extends BaseComponent {
     get closeIconTemplate() {
         return this.ddconfig?.templates?.closeicon;
     }
-    get maskClass() {
-        const positions = ['left', 'right', 'top', 'topleft', 'topright', 'bottom', 'bottomleft', 'bottomright'];
-        const pos = positions.find((item) => item === this.position);
-        return {
-            'p-dialog-mask': true,
-            'p-overlay-mask p-overlay-mask-enter': this.ddconfig.modal || this.ddconfig.dismissableMask,
-            [`p-dialog-${pos}`]: pos
-        };
+    get header() {
+        return this.ddconfig.header;
+    }
+    get data() {
+        return this.ddconfig.data;
     }
     get dialogId() {
-        return this.attrSelector;
+        return this.$attrSelector;
     }
-    zIndexForLayering;
-    constructor(renderer, ddconfig, dialogRef, zone, parentDialog) {
+    maximized;
+    dragging;
+    resizing;
+    ariaLabelledBy;
+    _style = {};
+    styleElement;
+    lastPageX;
+    lastPageY;
+    contentViewChild;
+    footerViewChild;
+    headerViewChild;
+    maskViewChild;
+    maskClickListener;
+    documentDragListener;
+    documentDragEndListener;
+    documentResizeListener;
+    documentResizeEndListener;
+    documentEscapeListener;
+    constructor(ddconfig, dialogRef) {
         super();
-        this.renderer = renderer;
         this.ddconfig = ddconfig;
         this.dialogRef = dialogRef;
-        this.zone = zone;
-        this.parentDialog = parentDialog;
-    }
-    ngOnInit() {
-        super.ngOnInit();
-        if (this.breakpoints) {
-            this.createStyle();
-        }
     }
-    createStyle() {
-        if (isPlatformBrowser(this.platformId)) {
-            if (!this.styleElement) {
-                this.styleElement = this.renderer.createElement('style');
-                this.styleElement.type = 'text/css';
-                setAttribute(this.styleElement, 'nonce', this.config?.csp()?.nonce);
-                this.renderer.appendChild(this.document.head, this.styleElement);
-                let innerHTML = '';
-                for (let breakpoint in this.breakpoints) {
-                    innerHTML += `
-                        @media screen and (max-width: ${breakpoint}) {
-                            .p-dialog[id=${this.dialogId}]:not(.p-dialog-maximized) {
-                                width: ${this.breakpoints[breakpoint]} !important;
-                            }
-                        }
-                    `;
-                }
-                this.renderer.setProperty(this.styleElement, 'innerHTML', innerHTML);
-                setAttribute(this.styleElement, 'nonce', this.config?.csp()?.nonce);
-            }
-        }
-    }
-    destroyStyle() {
-        if (this.styleElement) {
-            this.renderer.removeChild(this.document.head, this.styleElement);
-            this.styleElement = null;
-        }
-    }
-    ngAfterViewInit() {
-        super.ngAfterViewInit();
+    onAfterViewInit() {
         this.loadChildComponent(this.childComponentType);
         this.ariaLabelledBy = this.getAriaLabelledBy();
         this.cd.detectChanges();
@@ -580,68 +501,31 @@ class DynamicDialogComponent extends BaseComponent {
         let viewContainerRef = this.insertionPoint?.viewContainerRef;
         viewContainerRef?.clear();
         this.componentRef = viewContainerRef?.createComponent(componentType);
-        if (this.inputValues) {
+        if (this.inputValues && this.componentRef) {
             Object.entries(this.inputValues).forEach(([key, value]) => {
                 this.componentRef.setInput(key, value);
             });
         }
         this.dialogRef.onChildComponentLoaded.next(this.componentRef.instance);
     }
-    moveOnTop() {
-        if (this.ddconfig.autoZIndex !== false) {
-            ZIndexUtils.set('modal', this.container, (this.ddconfig.baseZIndex || 0) + this.config.zIndex.modal);
-            this.wrapper.style.zIndex = String(parseInt(this.container.style.zIndex, 10) - 1);
-        }
-        else {
-            this.zIndexForLayering = ZIndexUtils.generateZIndex('modal', (this.ddconfig.baseZIndex || 0) + this.config.zIndex.modal);
-        }
+    onDialogHide(event) {
+        this.dialogRef.destroy();
     }
-    onAnimationStart(event) {
-        switch (event.toState) {
-            case 'visible':
-                this.container = event.element;
-                this.wrapper = this.container.parentElement;
-                this.moveOnTop();
-                if (this.parent) {
-                    this.unbindGlobalListeners();
-                }
-                this.bindGlobalListeners();
-                this.container?.setAttribute(this.id, '');
-                if (this.ddconfig.modal !== false) {
-                    this.enableModality();
-                }
-                if (this.ddconfig.focusOnShow !== false) {
-                    this.focus();
-                }
-                break;
-            case 'void':
-                if (this.wrapper && this.ddconfig.modal !== false) {
-                    addClass(this.wrapper, 'p-overlay-mask-leave');
-                }
-                break;
-        }
+    onDialogMaximize(event) {
+        this.maximized = event.maximized;
+        this.dialogRef.maximize(event);
     }
-    onAnimationEnd(event) {
-        if (event.toState === 'void') {
-            if (this.parentContent) {
-                this.focus(this.parentContent);
-            }
-            this.onContainerDestroy();
-            this.dialogRef.destroy();
-        }
+    onDialogResizeInit(event) {
+        this.resizing = true;
+        this.dialogRef.resizeInit(event);
     }
-    onContainerDestroy() {
-        this.unbindGlobalListeners();
-        if (this.container && this.ddconfig.autoZIndex !== false) {
-            ZIndexUtils.clear(this.container);
-        }
-        if (this.zIndexForLayering) {
-            ZIndexUtils.revertZIndex(this.zIndexForLayering);
-        }
-        if (this.ddconfig.modal !== false) {
-            this.disableModality();
-        }
-        this.container = null;
+    onDialogResizeEnd(event) {
+        this.resizing = false;
+        this.dialogRef.resizeEnd(event);
+    }
+    onDialogDragEnd(event) {
+        this.dragging = false;
+        this.dialogRef.dragEnd(event);
     }
     close() {
         this.visible = false;
@@ -652,243 +536,189 @@ class DynamicDialogComponent extends BaseComponent {
             this.dialogRef.close();
         }
     }
-    enableModality() {
-        if (this.ddconfig.dismissableMask) {
-            this.maskClickListener = this.renderer.listen(this.wrapper, 'mousedown', (event) => {
-                if (this.wrapper && this.wrapper.isSameNode(event.target)) {
-                    this.hide();
-                }
-            });
+    get _parent() {
+        const domElements = Array.from(this.document.getElementsByClassName('p-dialog'));
+        if (domElements.length > 1) {
+            return domElements.pop();
         }
-        if (this.ddconfig.modal !== false) {
-            addClass(this.document.body, 'p-overflow-hidden');
+    }
+    get parentContent() {
+        const domElements = Array.from(this.document.getElementsByClassName('p-dialog'));
+        if (domElements.length > 0) {
+            const contentElements = domElements[domElements.length - 1].querySelector('.p-dialog-content');
+            if (contentElements)
+                return Array.isArray(contentElements) ? contentElements[0] : contentElements;
         }
     }
-    disableModality() {
-        if (this.wrapper) {
-            if (this.ddconfig.dismissableMask) {
-                this.unbindMaskClickListener();
-            }
-            if (this.ddconfig.modal !== false) {
-                removeClass(this.document.body, 'p-overflow-hidden');
+    container;
+    wrapper;
+    unbindGlobalListeners() {
+        this.unbindDocumentEscapeListener();
+        this.unbindDocumentResizeListeners();
+        this.unbindDocumentDragListener();
+        this.unbindDocumentDragEndListener();
+    }
+    onAnimationStart(event) {
+        if (event.toState === 'visible') {
+            // If parent dialog exists, unbind its listeners first
+            if (this._parent) {
+                this.unbindGlobalListeners();
             }
-            if (!this.cd.destroyed) {
-                this.cd.detectChanges();
+            if (this.ddconfig.modal) {
+                this.enableModality();
             }
         }
     }
-    focus(focusParentElement = this.contentViewChild.nativeElement) {
-        let focusable = DomHandler.getFocusableElement(focusParentElement, '[autofocus]');
-        if (focusable) {
-            this.zone.runOutsideAngular(() => {
-                setTimeout(() => focusable.focus(), 5);
-            });
-            return;
-        }
-        const focusableElement = DomHandler.getFocusableElement(focusParentElement);
-        if (focusableElement) {
-            this.zone.runOutsideAngular(() => {
-                setTimeout(() => focusableElement.focus(), 5);
-            });
-        }
-        else if (this.footerViewChild) {
-            // If the content section is empty try to focus on footer
-            this.focus(this.footerViewChild.nativeElement);
-        }
-        else if (!focusableElement && this.headerViewChild) {
-            this.focus(this.headerViewChild.nativeElement);
+    onAnimationEnd(event) {
+        if (event.toState === 'void') {
+            this.onContainerDestroy();
+            this.dialogRef.destroy();
         }
     }
-    maximize() {
-        this.maximized = !this.maximized;
-        if (this.maximized) {
-            addClass(this.document.body, 'p-overflow-hidden');
+    onContainerDestroy() {
+        this.unbindGlobalListeners();
+        if (this.ddconfig.modal) {
+            this.disableModality();
         }
-        else {
-            removeClass(this.document.body, 'p-overflow-hidden');
+        this.container = null;
+    }
+    bindDocumentDragListener() {
+        if (!this.documentDragListener) {
+            this.documentDragListener = this.renderer.listen(this.document.defaultView, 'mousemove', (event) => {
+                this.onDrag(event);
+            });
         }
-        this.dialogRef.maximize({ maximized: this.maximized });
     }
-    initResize(event) {
-        if (this.ddconfig.resizable) {
-            if (!this.documentResizeListener) {
-                this.bindDocumentResizeListeners();
-            }
-            this.resizing = true;
-            this.lastPageX = event.pageX;
-            this.lastPageY = event.pageY;
-            addClass(this.document.body, 'p-unselectable-text');
-            this.dialogRef.resizeInit(event);
+    bindDocumentDragEndListener() {
+        if (!this.documentDragEndListener) {
+            this.documentDragEndListener = this.renderer.listen(this.document.defaultView, 'mouseup', (event) => {
+                this.endDrag(event);
+            });
         }
     }
-    onResize(event) {
-        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 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 viewport = getViewport();
-            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;
-            }
-            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.lastPageX = event.pageX;
-            this.lastPageY = event.pageY;
+    unbindDocumentDragEndListener() {
+        if (this.documentDragEndListener) {
+            this.documentDragEndListener();
+            this.documentDragEndListener = null;
         }
     }
-    resizeEnd(event) {
-        if (this.resizing) {
-            this.resizing = false;
-            removeClass(this.document.body, 'p-unselectable-text');
-            this.dialogRef.resizeEnd(event);
+    unbindDocumentDragListener() {
+        if (this.documentDragListener) {
+            this.documentDragListener();
+            this.documentDragListener = null;
         }
     }
     initDrag(event) {
-        if (hasClass(event.target, 'p-dialog-header-icon') || hasClass(event.target.parentElement, 'p-dialog-header-icon')) {
-            return;
-        }
-        if (this.ddconfig.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.dialogRef.dragStart(event);
+        // Don't initialize drag when clicking on header icons
+        if (event.target instanceof HTMLElement) {
+            const target = event.target;
+            if (target.closest('.p-dialog-header-icon') || target.closest('.p-dialog-header-icons')) {
+                return;
+            }
         }
+        this.dragging = true;
+        this.lastPageX = event.pageX;
+        this.lastPageY = event.pageY;
+        this.dialogRef.dragStart(event);
+        this.bindDocumentDragListener();
+        this.bindDocumentDragEndListener();
+        // Handled by Dialog component
     }
     onDrag(event) {
         if (this.dragging) {
-            let containerWidth = getOuterWidth(this.container);
-            let containerHeight = getOuterHeight(this.container);
-            let deltaX = event.pageX - this.lastPageX;
-            let deltaY = event.pageY - this.lastPageY;
-            let offset = this.container.getBoundingClientRect();
-            let leftPos = offset.left + deltaX;
-            let topPos = offset.top + deltaY;
-            let viewport = getViewport();
-            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';
-                }
-                if (topPos >= this.minY && topPos + containerHeight < viewport.height) {
-                    this._style.top = topPos + 'px';
-                    this.lastPageY = event.pageY;
-                    this.container.style.top = topPos + 'px';
-                }
-            }
-            else {
-                this.lastPageX = event.pageX;
-                this.container.style.left = leftPos + 'px';
-                this.lastPageY = event.pageY;
-                this.container.style.top = topPos + 'px';
+            this.lastPageX = event.pageX;
+            this.lastPageY = event.pageY;
+            if (this.ddconfig.keepInViewport && this.container) {
+                this.container.style.position = 'fixed';
             }
         }
     }
     endDrag(event) {
         if (this.dragging) {
             this.dragging = false;
-            removeClass(this.document.body, 'p-unselectable-text');
             this.dialogRef.dragEnd(event);
             this.cd.detectChanges();
         }
     }
     resetPosition() {
-        this.container.style.position = '';
-        this.container.style.left = '';
-        this.container.style.top = '';
-        this.container.style.margin = '';
-    }
-    bindDocumentDragListener() {
-        if (isPlatformBrowser(this.platformId)) {
-            this.zone.runOutsideAngular(() => {
-                this.documentDragListener = this.renderer.listen(this.document, 'mousemove', this.onDrag.bind(this));
-            });
+        if (this.container) {
+            this.container.style.position = '';
+            this.container.style.left = '';
+            this.container.style.top = '';
+            this.container.style.margin = '';
         }
     }
-    bindDocumentDragEndListener() {
-        if (isPlatformBrowser(this.platformId)) {
-            this.zone.runOutsideAngular(() => {
-                this.documentDragEndListener = this.renderer.listen(this.document, 'mouseup', this.endDrag.bind(this));
+    bindDocumentResizeListeners() {
+        if (!this.documentResizeListener) {
+            this.documentResizeListener = this.renderer.listen(this.document.defaultView, 'mousemove', (event) => {
+                this.onResize(event);
             });
         }
-    }
-    unbindDocumentDragEndListener() {
-        if (this.documentDragEndListener) {
-            this.documentDragEndListener();
-            this.documentDragListener = null;
-        }
-    }
-    unbindDocumentDragListener() {
-        if (this.documentDragListener) {
-            this.documentDragListener();
-            this.documentDragListener = null;
-        }
-    }
-    bindDocumentResizeListeners() {
-        if (isPlatformBrowser(this.platformId)) {
-            this.zone.runOutsideAngular(() => {
-                this.documentResizeListener = this.renderer.listen(this.document, 'mousemove', this.onResize.bind(this));
-                this.documentResizeEndListener = this.renderer.listen(this.document, 'mouseup', this.resizeEnd.bind(this));
+        if (!this.documentResizeEndListener) {
+            this.documentResizeEndListener = this.renderer.listen(this.document.defaultView, 'mouseup', (event) => {
+                this.resizeEnd(event);
             });
         }
     }
     unbindDocumentResizeListeners() {
-        if (this.documentResizeListener && this.documentResizeEndListener) {
+        if (this.documentResizeListener) {
             this.documentResizeListener();
-            this.documentResizeEndListener();
             this.documentResizeListener = null;
+        }
+        if (this.documentResizeEndListener) {
+            this.documentResizeEndListener();
             this.documentResizeEndListener = null;
         }
     }
-    bindGlobalListeners() {
-        if (this.ddconfig.closeOnEscape !== false) {
-            this.bindDocumentEscapeListener();
+    initResize(event) {
+        this.resizing = true;
+        this.lastPageX = event.pageX;
+        this.lastPageY = event.pageY;
+        this.dialogRef.resizeInit(event);
+    }
+    onResize(event) {
+        if (this.resizing) {
+            this.lastPageX = event.pageX;
+            this.lastPageY = event.pageY;
         }
-        if (this.ddconfig.resizable) {
-            this.bindDocumentResizeListeners();
+    }
+    resizeEnd(event) {
+        if (this.resizing) {
+            this.resizing = false;
+            this.dialogRef.resizeEnd(event);
         }
-        if (this.ddconfig.draggable) {
-            this.bindDocumentDragListener();
-            this.bindDocumentDragEndListener();
+    }
+    maximize() {
+        this.maximized = !this.maximized;
+        this.dialogRef.maximize({ maximized: this.maximized });
+    }
+    enableModality() {
+        if (this.ddconfig.dismissableMask && this.wrapper) {
+            this.maskClickListener = this.renderer.listen(this.wrapper, 'mousedown', (event) => {
+                if (this.wrapper && this.wrapper.isSameNode(event.target)) {
+                    this.hide();
+                }
+            });
         }
     }
-    unbindGlobalListeners() {
-        this.unbindDocumentEscapeListener();
-        this.unbindDocumentResizeListeners();
-        this.unbindDocumentDragListener();
-        this.unbindDocumentDragEndListener();
+    disableModality() {
+        this.unbindMaskClickListener();
+        this.cd.detectChanges();
+    }
+    unbindMaskClickListener() {
+        if (this.maskClickListener) {
+            this.maskClickListener();
+            this.maskClickListener = null;
+        }
     }
     bindDocumentEscapeListener() {
-        const documentTarget = this.maskViewChild ? this.maskViewChild.nativeElement.ownerDocument : 'document';
-        this.documentEscapeListener = this.renderer.listen(documentTarget, 'keydown', (event) => {
-            if (event.which == 27) {
-                const currentZIndex = ZIndexUtils.getCurrent();
-                if (parseInt(this.container.style.zIndex) == currentZIndex || this.zIndexForLayering == currentZIndex) {
+        if (this.ddconfig.closeOnEscape) {
+            this.documentEscapeListener = this.renderer.listen(this.document, 'keydown', (event) => {
+                if (event.key === 'Escape' && this.container) {
                     this.hide();
                 }
-            }
-        });
+            });
+        }
     }
     unbindDocumentEscapeListener() {
         if (this.documentEscapeListener) {
@@ -896,227 +726,198 @@ class DynamicDialogComponent extends BaseComponent {
             this.documentEscapeListener = null;
         }
     }
-    unbindMaskClickListener() {
-        if (this.maskClickListener) {
-            this.maskClickListener();
-            this.maskClickListener = null;
+    createStyle() {
+        if (!this.styleElement && this.breakpoints) {
+            this.styleElement = this.renderer.createElement('style');
+            this.styleElement.type = 'text/css';
+            this.renderer.appendChild(this.document.head, this.styleElement);
+            let innerHTML = '';
+            for (let breakpoint in this.breakpoints) {
+                innerHTML += `
+                    @media screen and (max-width: ${breakpoint}) {
+                        .p-dialog[${this.dialogId}] {
+                            width: ${this.breakpoints[breakpoint]} !important;
+                        }
+                    }
+                `;
+            }
+            this.renderer.setProperty(this.styleElement, 'innerHTML', innerHTML);
+        }
+    }
+    destroyStyle() {
+        if (this.styleElement) {
+            this.renderer.removeChild(this.document.head, this.styleElement);
+            this.styleElement = null;
+        }
+    }
+    onDestroy() {
+        if (this.componentRef && typeof this.componentRef.destroy === 'function') {
+            this.componentRef.destroy();
         }
     }
     ngOnDestroy() {
         this.onContainerDestroy();
-        if (this.componentRef) {
+        if (this.componentRef && typeof this.componentRef.destroy === 'function') {
             this.componentRef.destroy();
         }
         this.destroyStyle();
-        super.ngOnDestroy();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DynamicDialogComponent, deps: [{ token: i0.Renderer2 }, { token: DynamicDialogConfig }, { token: DynamicDialogRef }, { token: i0.NgZone }, { token: DynamicDialogComponent, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: DynamicDialogComponent, isStandalone: true, selector: "p-dynamicDialog, p-dynamicdialog, p-dynamic-dialog", providers: [DynamicDialogStyle], viewQueries: [{ propertyName: "insertionPoint", first: true, predicate: DynamicDialogContent, descendants: true }, { propertyName: "maskViewChild", first: true, predicate: ["mask"], descendants: true }, { propertyName: "contentViewChild", first: true, predicate: ["content"], descendants: true }, { propertyName: "footerViewChild", first: true, predicate: ["footer"], descendants: true }, { propertyName: "headerViewChild", first: true, predicate: ["titlebar"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
-        <div
-            #mask
-            [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': ddconfig.modal ? 'auto' : 'none'
-            }"
-            [class]="ddconfig.maskStyleClass"
-            [ngClass]="maskClass"
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: DynamicDialog, deps: [{ token: DynamicDialogConfig }, { token: DynamicDialogRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: DynamicDialog, isStandalone: true, selector: "p-dynamicDialog, p-dynamicdialog, p-dynamic-dialog", providers: [DynamicDialogStyle, { provide: DYNAMIC_DIALOG_INSTANCE, useExisting: DynamicDialog }, { provide: PARENT_INSTANCE, useExisting: DynamicDialog }], viewQueries: [{ propertyName: "insertionPoint", first: true, predicate: DynamicDialogContent, descendants: true }, { propertyName: "dialog", first: true, predicate: Dialog, descendants: true }], usesInheritance: true, hostDirectives: [{ directive: i3.Bind }], ngImport: i0, template: `
+        <p-dialog
+            [(visible)]="visible"
+            [header]="ddconfig?.header"
+            [draggable]="ddconfig?.draggable !== false"
+            [resizable]="ddconfig?.resizable !== false"
+            [contentStyle]="ddconfig?.contentStyle"
+            [modal]="ddconfig?.modal !== false"
+            [closeOnEscape]="ddconfig?.closeOnEscape !== false"
+            [dismissableMask]="ddconfig?.dismissableMask"
+            [rtl]="ddconfig?.rtl"
+            [closable]="closable"
+            [breakpoints]="breakpoints"
+            [styleClass]="ddconfig?.styleClass"
+            [maskStyleClass]="ddconfig?.maskStyleClass"
+            [showHeader]="ddconfig?.showHeader !== false"
+            [autoZIndex]="ddconfig?.autoZIndex !== false"
+            [baseZIndex]="ddconfig?.baseZIndex || 0"
+            [minX]="minX"
+            [minY]="minY"
+            [focusOnShow]="ddconfig?.focusOnShow !== false"
+            [maximizable]="maximizable"
+            [keepInViewport]="keepInViewport"
+            [focusTrap]="ddconfig?.focusTrap !== false"
+            [transitionOptions]="ddconfig?.transitionOptions || '150ms cubic-bezier(0, 0, 0.2, 1)'"
+            [closeAriaLabel]="ddconfig?.closeAriaLabel || defaultCloseAriaLabel"
+            [minimizeIcon]="minimizeIcon"
+            [maximizeIcon]="maximizeIcon"
+            [closeButtonProps]="{ severity: 'secondary', variant: 'text', rounded: true }"
+            [maximizeButtonProps]="{ severity: 'secondary', variant: 'text', rounded: true }"
+            [style]="ddconfig?.style"
+            [position]="position"
+            (onHide)="onDialogHide($event)"
+            (onMaximize)="onDialogMaximize($event)"
+            (onResizeInit)="onDialogResizeInit($event)"
+            (onResizeEnd)="onDialogResizeEnd($event)"
+            (onDragEnd)="onDialogDragEnd($event)"
+            [pt]="ptm('pcDialog')"
+            hostName="DynamicDialog"
         >
-            <div
-                *ngIf="visible"
-                #container
-                [ngClass]="{ 'p-dialog p-component': true, 'p-dialog-maximized': maximizable && maximized }"
-                [ngStyle]="{ display: 'flex', 'flex-direction': 'column', 'pointer-events': 'auto' }"
-                [style]="ddconfig.style"
-                [class]="ddconfig.styleClass"
-                [@animation]="{
-                    value: 'visible',
-                    params: {
-                        transform: transformOptions,
-                        transition: ddconfig.transitionOptions || '150ms cubic-bezier(0, 0, 0.2, 1)'
-                    }
-                }"
-                (@animation.start)="onAnimationStart($event)"
-                (@animation.done)="onAnimationEnd($event)"
-                role="dialog"
-                pFocusTrap
-                [pFocusTrapDisabled]="ddconfig.focusTrap === false"
-                [style.width]="ddconfig.width"
-                [style.height]="ddconfig.height"
-                [attr.aria-labelledby]="ariaLabelledBy"
-                [attr.aria-modal]="true"
-                [attr.id]="dialogId"
-            >
-                <div *ngIf="ddconfig.resizable" [ngClass]="'p-resizable-handle'" style="z-index: 90;" (mousedown)="initResize($event)"></div>
-                <div #titlebar [ngClass]="'p-dialog-header'" (mousedown)="initDrag($event)" *ngIf="ddconfig.showHeader !== false">
-                    <ng-container *ngComponentOutlet="headerTemplate"></ng-container>
-                    <ng-container *ngIf="!headerTemplate">
-                        <span [ngClass]="'p-dialog-title'" [id]="ariaLabelledBy">{{ ddconfig.header }}</span>
-                        <div [ngClass]="'p-dialog-header-actions'">
-                            <p-button *ngIf="ddconfig.maximizable" [styleClass]="'p-dialog-maximize-button'" (onClick)="maximize()" (keydown.enter)="maximize()" rounded text [tabindex]="maximizable ? '0' : '-1'">
-                                <ng-template #icon>
-                                    <ng-container *ngIf="!maximized">
-                                        <svg data-p-icon="window-maximize" *ngIf="!maximizeIconTemplate" />
-                                        <ng-template *ngTemplateOutlet="maximizeIconTemplate"></ng-template>
-                                    </ng-container>
-                                    <ng-container *ngIf="maximized">
-                                        <svg data-p-icon="window-minimize" *ngIf="!minimizeIconTemplate" />
-                                        <ng-template *ngTemplateOutlet="minimizeIconTemplate"></ng-template>
-                                    </ng-container>
-                                </ng-template>
-                            </p-button>
-                            <p-button *ngIf="closable" [styleClass]="'p-dialog-close-button'" [ariaLabel]="ddconfig.closeAriaLabel || defaultCloseAriaLabel" (onClick)="hide()" (keydown.enter)="hide()" rounded text severity="secondary">
-                                <ng-template #icon>
-                                    <svg *ngIf="!closeIconTemplate" data-p-icon="times" />
-                                    <ng-template *ngTemplateOutlet="closeIconTemplate"></ng-template>
-                                </ng-template>
-                            </p-button>
-                        </div>
-                    </ng-container>
-                </div>
-                <div #content [ngClass]="'p-dialog-content'" [ngStyle]="ddconfig.contentStyle">
-                    <ng-template pDynamicDialogContent *ngIf="!contentTemplate"></ng-template>
-                    <ng-container *ngComponentOutlet="contentTemplate"></ng-container>
-                </div>
-                <div #footer [ngClass]="'p-dialog-footer'" *ngIf="ddconfig.footer || footerTemplate">
-                    <ng-container *ngIf="!footerTemplate">
-                        {{ ddconfig.footer }}
-                    </ng-container>
-                    <ng-container *ngComponentOutlet="footerTemplate"></ng-container>
-                </div>
-            </div>
-        </div>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: SharedModule }, { kind: "directive", type: DynamicDialogContent, selector: "[pDynamicDialogContent]" }, { kind: "component", type: WindowMaximizeIcon, selector: "[data-p-icon=\"window-maximize\"]" }, { kind: "component", type: WindowMinimizeIcon, selector: "[data-p-icon=\"window-minimize\"]" }, { kind: "component", type: TimesIcon, selector: "[data-p-icon=\"times\"]" }, { 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", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: FocusTrap, selector: "[pFocusTrap]", inputs: ["pFocusTrapDisabled"] }], animations: [trigger('animation', [transition('void => visible', [useAnimation(showAnimation)]), transition('visible => void', [useAnimation(hideAnimation)])])], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None });
+            <ng-template #header *ngIf="headerTemplate">
+                <ng-container *ngComponentOutlet="headerTemplate"></ng-container>
+            </ng-template>
+            <ng-template #content *ngIf="contentTemplate">
+                <ng-container *ngComponentOutlet="contentTemplate"></ng-container>
+            </ng-template>
+            <ng-template #footer *ngIf="footerTemplate">
+                <ng-container *ngComponentOutlet="footerTemplate"></ng-container>
+            </ng-template>
+            <ng-template #closeicon *ngIf="closeIconTemplate">
+                <ng-container *ngComponentOutlet="closeIconTemplate"></ng-container>
+            </ng-template>
+            <ng-template #maximizeicon *ngIf="maximizeIconTemplate">
+                <ng-container *ngComponentOutlet="maximizeIconTemplate"></ng-container>
+            </ng-template>
+            <ng-template #minimizeicon *ngIf="minimizeIconTemplate">
+                <ng-container *ngComponentOutlet="minimizeIconTemplate"></ng-container>
+            </ng-template>
+
+            <ng-template pDynamicDialogContent *ngIf="!contentTemplate"></ng-template>
+            <div *ngIf="ddconfig.footer && !footerTemplate">{{ ddconfig.footer }}</div>
+        </p-dialog>
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SharedModule }, { kind: "directive", type: DynamicDialogContent, selector: "[pDynamicDialogContent]" }, { kind: "component", type: Dialog, selector: "p-dialog", inputs: ["hostName", "header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "ngmodule", type: BindModule }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DynamicDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: DynamicDialog, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-dynamicDialog, p-dynamicdialog, p-dynamic-dialog',
                     standalone: true,
-                    imports: [CommonModule, SharedModule, DynamicDialogContent, WindowMaximizeIcon, WindowMinimizeIcon, TimesIcon, Button, FocusTrap],
+                    imports: [CommonModule, SharedModule, DynamicDialogContent, Dialog, BindModule],
                     template: `
-        <div
-            #mask
-            [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': ddconfig.modal ? 'auto' : 'none'
-            }"
-            [class]="ddconfig.maskStyleClass"
-            [ngClass]="maskClass"
+        <p-dialog
+            [(visible)]="visible"
+            [header]="ddconfig?.header"
+            [draggable]="ddconfig?.draggable !== false"
+            [resizable]="ddconfig?.resizable !== false"
+            [contentStyle]="ddconfig?.contentStyle"
+            [modal]="ddconfig?.modal !== false"
+            [closeOnEscape]="ddconfig?.closeOnEscape !== false"
+            [dismissableMask]="ddconfig?.dismissableMask"
+            [rtl]="ddconfig?.rtl"
+            [closable]="closable"
+            [breakpoints]="breakpoints"
+            [styleClass]="ddconfig?.styleClass"
+            [maskStyleClass]="ddconfig?.maskStyleClass"
+            [showHeader]="ddconfig?.showHeader !== false"
+            [autoZIndex]="ddconfig?.autoZIndex !== false"
+            [baseZIndex]="ddconfig?.baseZIndex || 0"
+            [minX]="minX"
+            [minY]="minY"
+            [focusOnShow]="ddconfig?.focusOnShow !== false"
+            [maximizable]="maximizable"
+            [keepInViewport]="keepInViewport"
+            [focusTrap]="ddconfig?.focusTrap !== false"
+            [transitionOptions]="ddconfig?.transitionOptions || '150ms cubic-bezier(0, 0, 0.2, 1)'"
+            [closeAriaLabel]="ddconfig?.closeAriaLabel || defaultCloseAriaLabel"
+            [minimizeIcon]="minimizeIcon"
+            [maximizeIcon]="maximizeIcon"
+            [closeButtonProps]="{ severity: 'secondary', variant: 'text', rounded: true }"
+            [maximizeButtonProps]="{ severity: 'secondary', variant: 'text', rounded: true }"
+            [style]="ddconfig?.style"
+            [position]="position"
+            (onHide)="onDialogHide($event)"
+            (onMaximize)="onDialogMaximize($event)"
+            (onResizeInit)="onDialogResizeInit($event)"
+            (onResizeEnd)="onDialogResizeEnd($event)"
+            (onDragEnd)="onDialogDragEnd($event)"
+            [pt]="ptm('pcDialog')"
+            hostName="DynamicDialog"
         >
-            <div
-                *ngIf="visible"
-                #container
-                [ngClass]="{ 'p-dialog p-component': true, 'p-dialog-maximized': maximizable && maximized }"
-                [ngStyle]="{ display: 'flex', 'flex-direction': 'column', 'pointer-events': 'auto' }"
-                [style]="ddconfig.style"
-                [class]="ddconfig.styleClass"
-                [@animation]="{
-                    value: 'visible',
-                    params: {
-                        transform: transformOptions,
-                        transition: ddconfig.transitionOptions || '150ms cubic-bezier(0, 0, 0.2, 1)'
-                    }
-                }"
-                (@animation.start)="onAnimationStart($event)"
-                (@animation.done)="onAnimationEnd($event)"
-                role="dialog"
-                pFocusTrap
-                [pFocusTrapDisabled]="ddconfig.focusTrap === false"
-                [style.width]="ddconfig.width"
-                [style.height]="ddconfig.height"
-                [attr.aria-labelledby]="ariaLabelledBy"
-                [attr.aria-modal]="true"
-                [attr.id]="dialogId"
-            >
-                <div *ngIf="ddconfig.resizable" [ngClass]="'p-resizable-handle'" style="z-index: 90;" (mousedown)="initResize($event)"></div>
-                <div #titlebar [ngClass]="'p-dialog-header'" (mousedown)="initDrag($event)" *ngIf="ddconfig.showHeader !== false">
-                    <ng-container *ngComponentOutlet="headerTemplate"></ng-container>
-                    <ng-container *ngIf="!headerTemplate">
-                        <span [ngClass]="'p-dialog-title'" [id]="ariaLabelledBy">{{ ddconfig.header }}</span>
-                        <div [ngClass]="'p-dialog-header-actions'">
-                            <p-button *ngIf="ddconfig.maximizable" [styleClass]="'p-dialog-maximize-button'" (onClick)="maximize()" (keydown.enter)="maximize()" rounded text [tabindex]="maximizable ? '0' : '-1'">
-                                <ng-template #icon>
-                                    <ng-container *ngIf="!maximized">
-                                        <svg data-p-icon="window-maximize" *ngIf="!maximizeIconTemplate" />
-                                        <ng-template *ngTemplateOutlet="maximizeIconTemplate"></ng-template>
-                                    </ng-container>
-                                    <ng-container *ngIf="maximized">
-                                        <svg data-p-icon="window-minimize" *ngIf="!minimizeIconTemplate" />
-                                        <ng-template *ngTemplateOutlet="minimizeIconTemplate"></ng-template>
-                                    </ng-container>
-                                </ng-template>
-                            </p-button>
-                            <p-button *ngIf="closable" [styleClass]="'p-dialog-close-button'" [ariaLabel]="ddconfig.closeAriaLabel || defaultCloseAriaLabel" (onClick)="hide()" (keydown.enter)="hide()" rounded text severity="secondary">
-                                <ng-template #icon>
-                                    <svg *ngIf="!closeIconTemplate" data-p-icon="times" />
-                                    <ng-template *ngTemplateOutlet="closeIconTemplate"></ng-template>
-                                </ng-template>
-                            </p-button>
-                        </div>
-                    </ng-container>
-                </div>
-                <div #content [ngClass]="'p-dialog-content'" [ngStyle]="ddconfig.contentStyle">
-                    <ng-template pDynamicDialogContent *ngIf="!contentTemplate"></ng-template>
-                    <ng-container *ngComponentOutlet="contentTemplate"></ng-container>
-                </div>
-                <div #footer [ngClass]="'p-dialog-footer'" *ngIf="ddconfig.footer || footerTemplate">
-                    <ng-container *ngIf="!footerTemplate">
-                        {{ ddconfig.footer }}
-                    </ng-container>
-                    <ng-container *ngComponentOutlet="footerTemplate"></ng-container>
-                </div>
-            </div>
-        </div>
+            <ng-template #header *ngIf="headerTemplate">
+                <ng-container *ngComponentOutlet="headerTemplate"></ng-container>
+            </ng-template>
+            <ng-template #content *ngIf="contentTemplate">
+                <ng-container *ngComponentOutlet="contentTemplate"></ng-container>
+            </ng-template>
+            <ng-template #footer *ngIf="footerTemplate">
+                <ng-container *ngComponentOutlet="footerTemplate"></ng-container>
+            </ng-template>
+            <ng-template #closeicon *ngIf="closeIconTemplate">
+                <ng-container *ngComponentOutlet="closeIconTemplate"></ng-container>
+            </ng-template>
+            <ng-template #maximizeicon *ngIf="maximizeIconTemplate">
+                <ng-container *ngComponentOutlet="maximizeIconTemplate"></ng-container>
+            </ng-template>
+            <ng-template #minimizeicon *ngIf="minimizeIconTemplate">
+                <ng-container *ngComponentOutlet="minimizeIconTemplate"></ng-container>
+            </ng-template>
+
+            <ng-template pDynamicDialogContent *ngIf="!contentTemplate"></ng-template>
+            <div *ngIf="ddconfig.footer && !footerTemplate">{{ ddconfig.footer }}</div>
+        </p-dialog>
     `,
-                    animations: [trigger('animation', [transition('void => visible', [useAnimation(showAnimation)]), transition('visible => void', [useAnimation(hideAnimation)])])],
                     changeDetection: ChangeDetectionStrategy.Default,
                     encapsulation: ViewEncapsulation.None,
-                    providers: [DynamicDialogStyle]
+                    providers: [DynamicDialogStyle, { provide: DYNAMIC_DIALOG_INSTANCE, useExisting: DynamicDialog }, { provide: PARENT_INSTANCE, useExisting: DynamicDialog }],
+                    hostDirectives: [Bind]
                 }]
-        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: DynamicDialogConfig }, { type: DynamicDialogRef }, { type: i0.NgZone }, { type: DynamicDialogComponent, decorators: [{
-                    type: SkipSelf
-                }, {
-                    type: Optional
-                }] }], propDecorators: { insertionPoint: [{
+        }], ctorParameters: () => [{ type: DynamicDialogConfig }, { type: DynamicDialogRef }], propDecorators: { insertionPoint: [{
                 type: ViewChild,
                 args: [DynamicDialogContent]
-            }], maskViewChild: [{
-                type: ViewChild,
-                args: ['mask']
-            }], contentViewChild: [{
+            }], dialog: [{
                 type: ViewChild,
-                args: ['content']
-            }], footerViewChild: [{
-                type: ViewChild,
-                args: ['footer']
-            }], headerViewChild: [{
-                type: ViewChild,
-                args: ['titlebar']
+                args: [Dialog]
             }] } });
 class DynamicDialogModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DynamicDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: DynamicDialogModule, imports: [DynamicDialogComponent, SharedModule], exports: [DynamicDialogComponent, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DynamicDialogModule, imports: [DynamicDialogComponent, SharedModule, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: DynamicDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.4", ngImport: i0, type: DynamicDialogModule, imports: [DynamicDialog, SharedModule], exports: [DynamicDialog, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: DynamicDialogModule, imports: [DynamicDialog, SharedModule, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DynamicDialogModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: DynamicDialogModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [DynamicDialogComponent, SharedModule],
-                    exports: [DynamicDialogComponent, SharedModule]
+                    imports: [DynamicDialog, SharedModule],
+                    exports: [DynamicDialog, SharedModule]
                 }]
         }] });
 
@@ -1161,17 +962,20 @@ class DialogService {
             return null;
         }
         const dialogRef = this.appendDialogComponentToBody(config, componentType);
-        this.dialogComponentRefMap.get(dialogRef).instance.childComponentType = componentType;
-        this.dialogComponentRefMap.get(dialogRef).instance.inputValues = config.inputValues;
+        const componentRefInstance = this.dialogComponentRefMap.get(dialogRef);
+        if (componentRefInstance) {
+            componentRefInstance.instance.childComponentType = componentType;
+            componentRefInstance.instance.inputValues = config.inputValues || {};
+        }
         return dialogRef;
     }
     /**
      * Returns the dynamic dialog component instance.
-     * @param {ref} DynamicDialogRef - DynamicDialog instance.
+     * @param {DynamicDialogRef} ref - DynamicDialog instance.
      * @group Method
      */
     getInstance(ref) {
-        return this.dialogComponentRefMap.get(ref).instance;
+        return this.dialogComponentRefMap.get(ref)?.instance;
     }
     appendDialogComponentToBody(config, componentType) {
         const map = new WeakMap();
@@ -1179,14 +983,14 @@ class DialogService {
         const dialogRef = new DynamicDialogRef();
         map.set(DynamicDialogRef, dialogRef);
         const sub = dialogRef.onClose.subscribe(() => {
-            this.dialogComponentRefMap.get(dialogRef).instance.close();
+            this.dialogComponentRefMap.get(dialogRef)?.instance.close();
         });
         const destroySub = dialogRef.onDestroy.subscribe(() => {
             this.removeDialogComponentFromBody(dialogRef);
             destroySub.unsubscribe();
             sub.unsubscribe();
         });
-        const componentRef = createComponent(DynamicDialogComponent, {
+        const componentRef = createComponent(DynamicDialog, {
             environmentInjector: this.appRef.injector,
             elementInjector: new DynamicDialogInjector(this.injector, map)
         });
@@ -1206,9 +1010,11 @@ class DialogService {
             return;
         }
         const dialogComponentRef = this.dialogComponentRefMap.get(dialogRef);
-        this.appRef.detachView(dialogComponentRef.hostView);
-        dialogComponentRef.destroy();
-        dialogComponentRef.changeDetectorRef.detectChanges();
+        if (dialogComponentRef) {
+            this.appRef.detachView(dialogComponentRef.hostView);
+            dialogComponentRef.destroy();
+            dialogComponentRef.changeDetectorRef.detectChanges();
+        }
         this.dialogComponentRefMap.delete(dialogRef);
     }
     duplicationPermission(componentType, config) {
@@ -1224,10 +1030,10 @@ class DialogService {
         }
         return permission;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DialogService, deps: [{ token: i0.ApplicationRef }, { token: i0.Injector }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DialogService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: DialogService, deps: [{ token: i0.ApplicationRef }, { token: i0.Injector }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: DialogService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DialogService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: DialogService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i0.ApplicationRef }, { type: i0.Injector }, { type: Document, decorators: [{
                     type: Inject,
@@ -1238,5 +1044,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { DialogService, DynamicDialogClasses, DynamicDialogComponent, DynamicDialogConfig, DynamicDialogInjector, DynamicDialogModule, DynamicDialogRef, DynamicDialogStyle };
+export { DialogService, DynamicDialog, DynamicDialogClasses, DynamicDialogConfig, DynamicDialogInjector, DynamicDialogModule, DynamicDialogRef, DynamicDialogStyle };
 //# sourceMappingURL=primeng-dynamicdialog.mjs.map