primeng 21.1.9 → 22.0.0-rc.2

package/fesm2022/primeng-dialog.mjs

@@ -1,18 +1,19 @@
 export * from 'primeng/types/dialog';
-import * as i2 from '@angular/common';
-import { isPlatformBrowser, CommonModule } from '@angular/common';
+import { isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, InjectionToken, inject, input, computed, EventEmitter, signal, NgZone, booleanAttribute, numberAttribute, ContentChildren, ContentChild, Input, ViewChild, Output, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { Injectable, InjectionToken, input, inject, booleanAttribute, numberAttribute, computed, model, output, viewChild, contentChild, signal, effect, untracked, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import { uuid, setAttribute, addStyle, getOuterWidth, getOuterHeight, getViewport, appendChild, removeClass, hasClass } from '@primeuix/utils';
-import { TranslationKeys, OverlayService, SharedModule, PrimeTemplate } from 'primeng/api';
+import { OverlayService, TranslationKeys, SharedModule } from 'primeng/api';
 import { BaseComponent, PARENT_INSTANCE } from 'primeng/basecomponent';
 import * as i1 from 'primeng/bind';
 import { Bind } from 'primeng/bind';
-import { Button } from 'primeng/button';
+import { ButtonDirective } from 'primeng/button';
 import { DomHandler, blockBodyScroll, unblockBodyScroll } from 'primeng/dom';
 import { FocusTrap } from 'primeng/focustrap';
-import { TimesIcon, WindowMaximizeIcon, WindowMinimizeIcon } from 'primeng/icons';
-import * as i3 from 'primeng/motion';
+import { Times } from '@primeicons/angular/times';
+import { WindowMaximize } from '@primeicons/angular/window-maximize';
+import { WindowMinimize } from '@primeicons/angular/window-minimize';
+import * as i2 from 'primeng/motion';
 import { MotionModule } from 'primeng/motion';
 import { ZIndexUtils } from 'primeng/utils';
 import { style } from '@primeuix/styles/dialog';
@@ -20,41 +21,44 @@ import { BaseStyle } from 'primeng/base';
 
 /* Position */
 const inlineStyles = {
-    mask: ({ instance }) => ({
-        position: 'fixed',
-        height: '100%',
-        width: '100%',
-        left: 0,
-        top: 0,
-        display: 'flex',
-        justifyContent: instance.position === 'left' || instance.position === 'topleft' || instance.position === 'bottomleft'
-            ? 'flex-start'
-            : instance.position === 'right' || instance.position === 'topright' || instance.position === 'bottomright'
-                ? 'flex-end'
-                : 'center',
-        alignItems: instance.position === 'top' || instance.position === 'topleft' || instance.position === 'topright'
-            ? 'flex-start'
-            : instance.position === 'bottom' || instance.position === 'bottomleft' || instance.position === 'bottomright'
-                ? 'flex-end'
-                : 'center',
-        pointerEvents: instance.modal ? 'auto' : 'none'
-    }),
-    root: {
-        display: 'flex',
-        flexDirection: 'column',
-        pointerEvents: 'auto'
+    mask: ({ instance }) => {
+        const position = instance.position();
+        const modal = instance.modal();
+        const maskStyle = instance.maskStyle();
+        return {
+            position: 'fixed',
+            height: '100%',
+            width: '100%',
+            left: 0,
+            top: 0,
+            display: 'flex',
+            justifyContent: position === 'left' || position === 'topleft' || position === 'bottomleft' ? 'flex-start' : position === 'right' || position === 'topright' || position === 'bottomright' ? 'flex-end' : 'center',
+            alignItems: position === 'top' || position === 'topleft' || position === 'topright' ? 'flex-start' : position === 'bottom' || position === 'bottomleft' || position === 'bottomright' ? 'flex-end' : 'center',
+            pointerEvents: modal ? 'auto' : 'none',
+            ...maskStyle
+        };
+    },
+    root: ({ instance }) => {
+        const style = instance.style();
+        return {
+            display: 'flex',
+            flexDirection: 'column',
+            pointerEvents: 'auto',
+            ...style
+        };
     }
 };
 const classes = {
     mask: ({ instance }) => {
         const positions = ['left', 'right', 'top', 'topleft', 'topright', 'bottom', 'bottomleft', 'bottomright'];
-        const pos = positions.find((item) => item === instance.position);
-        return ['p-dialog-mask', { 'p-overlay-mask': instance.modal }, pos ? `p-dialog-${pos}` : ''];
+        const position = instance.position();
+        const pos = positions.find((item) => item === position);
+        return ['p-dialog-mask', { 'p-overlay-mask': instance.modal() }, pos ? `p-dialog-${pos}` : ''];
     },
     root: ({ instance }) => [
         'p-dialog p-component',
         {
-            'p-dialog-maximized': instance.maximizable && instance.maximized
+            'p-dialog-maximized': instance.maximizable() && instance.maximized()
         }
     ],
     header: 'p-dialog-header',
@@ -71,10 +75,10 @@ class DialogStyle extends BaseStyle {
     style = style;
     classes = classes;
     inlineStyles = inlineStyles;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: DialogStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: DialogStyle });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DialogStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DialogStyle });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: DialogStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DialogStyle, decorators: [{
             type: Injectable
         }] });
 /**
@@ -133,7 +137,8 @@ const DIALOG_INSTANCE = new InjectionToken('DIALOG_INSTANCE');
  */
 class Dialog extends BaseComponent {
     componentName = 'Dialog';
-    hostName = '';
+    hostName = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostName" }] : /* istanbul ignore next */ []));
     $pcDialog = inject(DIALOG_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
     bindDirectiveInstance = inject(Bind, { self: true });
     onAfterViewChecked() {
@@ -143,358 +148,336 @@ class Dialog extends BaseComponent {
      * Title text of the dialog.
      * @group Props
      */
-    header;
+    header = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "header" }] : /* istanbul ignore next */ []));
     /**
      * Enables dragging to change the position using header.
      * @group Props
      */
-    draggable = true;
+    draggable = input(true, { ...(ngDevMode ? { debugName: "draggable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Enables resizing of the content.
      * @group Props
      */
-    resizable = true;
+    resizable = input(true, { ...(ngDevMode ? { debugName: "resizable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Style of the content section.
      * @group Props
      */
-    contentStyle;
+    contentStyle = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "contentStyle" }] : /* istanbul ignore next */ []));
     /**
      * Style class of the content.
      * @group Props
      */
-    contentStyleClass;
+    contentStyleClass = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "contentStyleClass" }] : /* istanbul ignore next */ []));
     /**
      * Defines if background should be blocked when dialog is displayed.
      * @group Props
      */
-    modal = false;
+    modal = input(false, { ...(ngDevMode ? { debugName: "modal" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Specifies if pressing escape key should hide the dialog.
      * @group Props
      */
-    closeOnEscape = true;
+    closeOnEscape = input(true, { ...(ngDevMode ? { debugName: "closeOnEscape" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Specifies if clicking the modal background should hide the dialog.
      * @group Props
      */
-    dismissableMask = false;
+    dismissableMask = input(false, { ...(ngDevMode ? { debugName: "dismissableMask" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * When enabled dialog is displayed in RTL direction.
      * @group Props
      */
-    rtl = false;
+    rtl = input(false, { ...(ngDevMode ? { debugName: "rtl" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Adds a close icon to the header to hide the dialog.
      * @group Props
      */
-    closable = true;
+    closable = input(true, { ...(ngDevMode ? { debugName: "closable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Object literal to define widths per screen size.
      * @group Props
      */
-    breakpoints;
+    breakpoints = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "breakpoints" }] : /* istanbul ignore next */ []));
     /**
      * Style class of the component.
      * @group Props
      */
-    styleClass;
+    styleClass = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "styleClass" }] : /* istanbul ignore next */ []));
     /**
      * Style class of the mask.
      * @group Props
      */
-    maskStyleClass;
+    maskStyleClass = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "maskStyleClass" }] : /* istanbul ignore next */ []));
     /**
      * Style of the mask.
      * @group Props
      */
-    maskStyle;
+    maskStyle = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "maskStyle" }] : /* istanbul ignore next */ []));
     /**
      * Whether to show the header or not.
      * @group Props
      */
-    showHeader = true;
+    showHeader = input(true, { ...(ngDevMode ? { debugName: "showHeader" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Whether background scroll should be blocked when dialog is visible.
      * @group Props
      */
-    blockScroll = false;
+    blockScroll = input(false, { ...(ngDevMode ? { debugName: "blockScroll" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Whether to automatically manage layering.
      * @group Props
      */
-    autoZIndex = true;
+    autoZIndex = input(true, { ...(ngDevMode ? { debugName: "autoZIndex" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Base zIndex value to use in layering.
      * @group Props
      */
-    baseZIndex = 0;
+    baseZIndex = input(0, { ...(ngDevMode ? { debugName: "baseZIndex" } : /* istanbul ignore next */ {}), transform: numberAttribute });
     /**
      * Minimum value for the left coordinate of dialog in dragging.
      * @group Props
      */
-    minX = 0;
+    minX = input(0, { ...(ngDevMode ? { debugName: "minX" } : /* istanbul ignore next */ {}), transform: numberAttribute });
     /**
      * Minimum value for the top coordinate of dialog in dragging.
      * @group Props
      */
-    minY = 0;
+    minY = input(0, { ...(ngDevMode ? { debugName: "minY" } : /* istanbul ignore next */ {}), transform: numberAttribute });
     /**
      * When enabled, first focusable element receives focus on show.
      * @group Props
      */
-    focusOnShow = true;
+    focusOnShow = input(true, { ...(ngDevMode ? { debugName: "focusOnShow" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Whether the dialog can be displayed full screen.
      * @group Props
      */
-    maximizable = false;
+    maximizable = input(false, { ...(ngDevMode ? { debugName: "maximizable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Keeps dialog in the viewport.
      * @group Props
      */
-    keepInViewport = true;
+    keepInViewport = input(true, { ...(ngDevMode ? { debugName: "keepInViewport" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * When enabled, can only focus on elements inside the dialog.
      * @group Props
      */
-    focusTrap = true;
-    /**
-     * Transition options of the animation.
-     * @deprecated since v21.0.0. Use `motionOptions` instead.
-     * @group Props
-     */
-    transitionOptions = '150ms cubic-bezier(0, 0, 0.2, 1)';
+    focusTrap = input(true, { ...(ngDevMode ? { debugName: "focusTrap" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * The motion options for the mask.
      * @group Props
      */
-    maskMotionOptions = input(undefined, ...(ngDevMode ? [{ debugName: "maskMotionOptions" }] : /* istanbul ignore next */ []));
+    maskMotionOptions = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maskMotionOptions" }] : /* istanbul ignore next */ []));
     computedMaskMotionOptions = computed(() => {
         return {
             ...this.ptm('maskMotion'),
             ...this.maskMotionOptions()
         };
-    }, ...(ngDevMode ? [{ debugName: "computedMaskMotionOptions" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedMaskMotionOptions" }] : /* istanbul ignore next */ []));
+    maskEnterActiveClass = computed(() => (this.modal() ? 'p-overlay-mask-enter-active' : ''), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maskEnterActiveClass" }] : /* istanbul ignore next */ []));
+    maskLeaveActiveClass = computed(() => (this.modal() ? 'p-overlay-mask-leave-active' : ''), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maskLeaveActiveClass" }] : /* istanbul ignore next */ []));
     /**
      * The motion options.
      * @group Props
      */
-    motionOptions = input(undefined, ...(ngDevMode ? [{ debugName: "motionOptions" }] : /* istanbul ignore next */ []));
+    motionOptions = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "motionOptions" }] : /* istanbul ignore next */ []));
     computedMotionOptions = computed(() => {
         return {
             ...this.ptm('motion'),
             ...this.motionOptions()
         };
-    }, ...(ngDevMode ? [{ debugName: "computedMotionOptions" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedMotionOptions" }] : /* istanbul ignore next */ []));
     /**
      * Name of the close icon.
      * @group Props
      */
-    closeIcon;
+    closeIcon = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "closeIcon" }] : /* istanbul ignore next */ []));
     /**
      * Defines a string that labels the close button for accessibility.
      * @group Props
      */
-    closeAriaLabel;
+    closeAriaLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "closeAriaLabel" }] : /* istanbul ignore next */ []));
     /**
      * Index of the close button in tabbing order.
      * @group Props
      */
-    closeTabindex = '0';
+    closeTabindex = input('0', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "closeTabindex" }] : /* istanbul ignore next */ []));
     /**
      * Name of the minimize icon.
      * @group Props
      */
-    minimizeIcon;
+    minimizeIcon = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "minimizeIcon" }] : /* istanbul ignore next */ []));
     /**
      * Name of the maximize icon.
      * @group Props
      */
-    maximizeIcon;
+    maximizeIcon = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "maximizeIcon" }] : /* istanbul ignore next */ []));
     /**
-     * Used to pass all properties of the ButtonProps to the Button component.
+     * Configuration object forwarded to the underlying button.
      * @group Props
      */
-    closeButtonProps = {
+    closeButtonProps = input({
         severity: 'secondary',
         variant: 'text',
         rounded: true
-    };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "closeButtonProps" }] : /* istanbul ignore next */ []));
     /**
-     * Used to pass all properties of the ButtonProps to the Button component.
+     * Configuration object forwarded to the underlying button.
      * @group Props
      */
-    maximizeButtonProps = {
+    maximizeButtonProps = input({
         severity: 'secondary',
         variant: 'text',
         rounded: true
-    };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maximizeButtonProps" }] : /* istanbul ignore next */ []));
     /**
      * Specifies the visibility of the dialog.
      * @group Props
      */
-    get visible() {
-        return this._visible;
-    }
-    set visible(value) {
-        this._visible = value;
-        if (this._visible && !this.maskVisible) {
-            this.maskVisible = true;
-            this.renderMask.set(true);
-            this.renderDialog.set(true);
-        }
-    }
+    visible = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
     /**
      * Inline style of the component.
      * @group Props
      */
-    get style() {
-        return this._style;
-    }
-    set style(value) {
-        if (value) {
-            this._style = { ...value };
-            this.originalStyle = value;
-        }
-    }
+    style = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "style" }] : /* istanbul ignore next */ []));
     /**
-     * Position of the dialog.
+     * Position of the dialog, options are "center", "top", "bottom", "left", "right", "topleft", "topright", "bottomleft" or "bottomright".
      * @group Props
      */
-    position;
+    position = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "position" }] : /* istanbul ignore next */ []));
     /**
      * Role attribute of html element.
      * @group Emits
      */
-    role = 'dialog';
+    role = input('dialog', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
     /**
      * 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, ...(ngDevMode ? [{ debugName: "appendTo" }] : /* istanbul ignore next */ []));
+    appendTo = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appendTo" }] : /* istanbul ignore next */ []));
     /**
      * Callback to invoke when dialog is shown.
      * @group Emits
      */
-    onShow = new EventEmitter();
+    onShow = output();
     /**
      * Callback to invoke when dialog is hidden.
      * @group Emits
      */
-    onHide = new EventEmitter();
+    onHide = output();
     /**
-     * This EventEmitter is used to notify changes in the visibility state of a component.
-     * @param {boolean} value - New value.
+     * Callback to invoke when dialog resizing is initiated.
+     * @param {MouseEvent} event - Mouse event.
      * @group Emits
      */
-    visibleChange = new EventEmitter();
+    onResizeInit = output();
     /**
-     * Callback to invoke when dialog resizing is initiated.
+     * Callback to invoke when dialog resizing is completed.
      * @param {MouseEvent} event - Mouse event.
      * @group Emits
      */
-    onResizeInit = new EventEmitter();
+    onResizeEnd = output();
     /**
-     * Callback to invoke when dialog resizing is completed.
+     * Callback to invoke when dialog dragging is initiated.
      * @param {MouseEvent} event - Mouse event.
      * @group Emits
      */
-    onResizeEnd = new EventEmitter();
+    onDragStart = output();
     /**
      * Callback to invoke when dialog dragging is completed.
      * @param {DragEvent} event - Drag event.
      * @group Emits
      */
-    onDragEnd = new EventEmitter();
+    onDragEnd = output();
     /**
      * Callback to invoke when dialog maximized or unmaximized.
      * @group Emits
      */
-    onMaximize = new EventEmitter();
-    headerViewChild;
-    contentViewChild;
-    footerViewChild;
-    /**
-     * Header template.
-     * @group Templates
-     */
-    headerTemplate;
-    /**
-     * Content template.
-     * @group Templates
-     */
-    contentTemplate;
-    /**
-     * Footer template.
-     * @group Templates
-     */
-    footerTemplate;
-    /**
-     * Close icon template.
-     * @group Templates
-     */
-    closeIconTemplate;
-    /**
-     * Maximize icon template.
-     * @group Templates
-     */
-    maximizeIconTemplate;
-    /**
-     * Minimize icon template.
-     * @group Templates
-     */
-    minimizeIconTemplate;
-    /**
-     * Headless template.
-     * @group Templates
-     */
-    headlessTemplate;
+    onMaximize = output();
+    headerViewChild = viewChild('titlebar', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "headerViewChild" }] : /* istanbul ignore next */ []));
+    contentViewChild = viewChild('content', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "contentViewChild" }] : /* istanbul ignore next */ []));
+    footerViewChild = viewChild('footer', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "footerViewChild" }] : /* istanbul ignore next */ []));
     /**
      * Custom header template.
      * @group Templates
      */
-    _headerTemplate;
+    headerTemplate = contentChild('header', { ...(ngDevMode ? { debugName: "headerTemplate" } : /* istanbul ignore next */ {}), descendants: false });
     /**
      * Custom content template.
      * @group Templates
      */
-    _contentTemplate;
+    contentTemplate = contentChild('content', { ...(ngDevMode ? { debugName: "contentTemplate" } : /* istanbul ignore next */ {}), descendants: false });
     /**
      * Custom footer template.
      * @group Templates
      */
-    _footerTemplate;
+    footerTemplate = contentChild('footer', { ...(ngDevMode ? { debugName: "footerTemplate" } : /* istanbul ignore next */ {}), descendants: false });
     /**
      * Custom close icon template.
      * @group Templates
      */
-    _closeiconTemplate;
+    closeIconTemplate = contentChild('closeicon', { ...(ngDevMode ? { debugName: "closeIconTemplate" } : /* istanbul ignore next */ {}), descendants: false });
     /**
      * Custom maximize icon template.
      * @group Templates
      */
-    _maximizeiconTemplate;
+    maximizeIconTemplate = contentChild('maximizeicon', { ...(ngDevMode ? { debugName: "maximizeIconTemplate" } : /* istanbul ignore next */ {}), descendants: false });
     /**
      * Custom minimize icon template.
      * @group Templates
      */
-    _minimizeiconTemplate;
+    minimizeIconTemplate = contentChild('minimizeicon', { ...(ngDevMode ? { debugName: "minimizeIconTemplate" } : /* istanbul ignore next */ {}), descendants: false });
     /**
      * Custom headless template.
      * @group Templates
      */
-    _headlessTemplate;
-    $appendTo = computed(() => this.appendTo() || this.config.overlayAppendTo(), ...(ngDevMode ? [{ debugName: "$appendTo" }] : /* istanbul ignore next */ []));
-    renderMask = signal(false, ...(ngDevMode ? [{ debugName: "renderMask" }] : /* istanbul ignore next */ []));
-    renderDialog = signal(false, ...(ngDevMode ? [{ debugName: "renderDialog" }] : /* istanbul ignore next */ []));
-    _visible = false;
+    headlessTemplate = contentChild('headless', { ...(ngDevMode ? { debugName: "headlessTemplate" } : /* istanbul ignore next */ {}), descendants: false });
+    $appendTo = computed(() => this.appendTo() || this.config.overlayAppendTo(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "$appendTo" }] : /* istanbul ignore next */ []));
+    renderMask = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "renderMask" }] : /* istanbul ignore next */ []));
+    renderDialog = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "renderDialog" }] : /* istanbul ignore next */ []));
     maskVisible;
-    container = signal(null, ...(ngDevMode ? [{ debugName: "container" }] : /* istanbul ignore next */ []));
+    container = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "container" }] : /* istanbul ignore next */ []));
     wrapper;
     dragging;
-    ariaLabelledBy = this.getAriaLabelledBy();
+    ariaId = uuid('pn_id_') + '_header';
+    ariaLabelledBy = computed(() => (this.header() !== null ? this.ariaId : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabelledBy" }] : /* istanbul ignore next */ []));
+    headerTemplateContext = computed(() => ({ ariaLabelledBy: this.ariaLabelledBy() }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "headerTemplateContext" }] : /* istanbul ignore next */ []));
     documentDragListener;
     documentDragEndListener;
     resizing;
@@ -505,7 +488,8 @@ class Dialog extends BaseComponent {
     lastPageX;
     lastPageY;
     preventVisibleChangePropagation;
-    maximized;
+    maximized = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maximized" }] : /* istanbul ignore next */ []));
     preMaximizeContentHeight;
     preMaximizeContainerWidth;
     preMaximizeContainerHeight;
@@ -514,143 +498,107 @@ class Dialog extends BaseComponent {
     id = uuid('pn_id_');
     _style = {};
     originalStyle;
-    transformOptions = 'scale(0.7)';
-    styleElement;
-    window;
+    styleElement = null;
     _componentStyle = inject(DialogStyle);
-    headerT;
-    contentT;
-    footerT;
-    closeIconT;
-    maximizeIconT;
-    minimizeIconT;
-    headlessT;
+    overlayService = inject(OverlayService);
     zIndexForLayering;
     get maximizeLabel() {
-        return this.config.getTranslation(TranslationKeys.ARIA)['maximizeLabel'];
+        return this.translate(TranslationKeys.ARIA, 'maximizeLabel');
     }
     get minimizeLabel() {
-        return this.config.getTranslation(TranslationKeys.ARIA)['minimizeLabel'];
+        return this.translate(TranslationKeys.ARIA, 'minimizeLabel');
     }
-    zone = inject(NgZone);
-    overlayService = inject(OverlayService);
-    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': this.modal || this.dismissableMask,
-            [`p-dialog-${pos}`]: pos
-        };
+    maximizeButtonAriaLabel = computed(() => (this.maximized() ? this.minimizeLabel : this.maximizeLabel), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maximizeButtonAriaLabel" }] : /* istanbul ignore next */ []));
+    maximizeButtonTabindex = computed(() => (this.maximizable() ? '0' : '-1'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maximizeButtonTabindex" }] : /* istanbul ignore next */ []));
+    toggleIcon = computed(() => (this.maximized() ? this.minimizeIcon() : this.maximizeIcon()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "toggleIcon" }] : /* istanbul ignore next */ []));
+    showToggleIcon = computed(() => !!this.maximizeIcon() && !this.maximizeIconTemplate() && !this.minimizeIconTemplate(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showToggleIcon" }] : /* istanbul ignore next */ []));
+    showDefaultMaximizeIcon = computed(() => !this.maximizeIcon(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showDefaultMaximizeIcon" }] : /* istanbul ignore next */ []));
+    showMaximizeSvg = computed(() => !this.maximized() && !this.maximizeIconTemplate(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showMaximizeSvg" }] : /* istanbul ignore next */ []));
+    showMinimizeSvg = computed(() => this.maximized() && !this.minimizeIconTemplate(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showMinimizeSvg" }] : /* istanbul ignore next */ []));
+    showMaximizeIconTemplate = computed(() => !this.maximized() && !!this.maximizeIconTemplate(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showMaximizeIconTemplate" }] : /* istanbul ignore next */ []));
+    showMinimizeIconTemplate = computed(() => this.maximized() && !!this.minimizeIconTemplate(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showMinimizeIconTemplate" }] : /* istanbul ignore next */ []));
+    showDefaultCloseIcon = computed(() => !this.closeIconTemplate(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showDefaultCloseIcon" }] : /* istanbul ignore next */ []));
+    scrollBlockerActive = computed(() => this.modal() || this.blockScroll(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scrollBlockerActive" }] : /* istanbul ignore next */ []));
+    focusTrapDisabled = computed(() => this.focusTrap() === false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focusTrapDisabled" }] : /* istanbul ignore next */ []));
+    constructor() {
+        super();
+        effect(() => {
+            const isVisible = this.visible();
+            untracked(() => {
+                if (isVisible && !this.maskVisible) {
+                    this.maskVisible = true;
+                    this.renderMask.set(true);
+                    this.renderDialog.set(true);
+                }
+            });
+        });
     }
     onInit() {
-        if (this.breakpoints) {
+        if (this.breakpoints()) {
             this.createStyle();
         }
     }
-    templates;
-    onAfterContentInit() {
-        this.templates?.forEach((item) => {
-            switch (item.getType()) {
-                case 'header':
-                    this.headerT = item.template;
-                    break;
-                case 'content':
-                    this.contentT = item.template;
-                    break;
-                case 'footer':
-                    this.footerT = item.template;
-                    break;
-                case 'closeicon':
-                    this.closeIconT = item.template;
-                    break;
-                case 'maximizeicon':
-                    this.maximizeIconT = item.template;
-                    break;
-                case 'minimizeicon':
-                    this.minimizeIconT = item.template;
-                    break;
-                case 'headless':
-                    this.headlessT = item.template;
-                    break;
-                default:
-                    this.contentT = item.template;
-                    break;
-            }
-        });
-    }
-    getAriaLabelledBy() {
-        return this.header !== null ? uuid('pn_id_') + '_header' : null;
-    }
-    parseDurationToMilliseconds(durationString) {
-        const transitionTimeRegex = /([\d\.]+)(ms|s)\b/g;
-        let totalMilliseconds = 0;
-        let match;
-        while ((match = transitionTimeRegex.exec(durationString)) !== null) {
-            const value = parseFloat(match[1]);
-            const unit = match[2];
-            if (unit === 'ms') {
-                totalMilliseconds += value;
-            }
-            else if (unit === 's') {
-                totalMilliseconds += value * 1000;
-            }
-        }
-        if (totalMilliseconds === 0) {
-            return undefined;
-        }
-        return totalMilliseconds;
-    }
     _focus(focusParentElement) {
         if (focusParentElement) {
-            const timeoutDuration = this.parseDurationToMilliseconds(this.transitionOptions);
             let _focusableElements = DomHandler.getFocusableElements(focusParentElement);
             if (_focusableElements && _focusableElements.length > 0) {
-                this.zone.runOutsideAngular(() => {
-                    setTimeout(() => _focusableElements[0].focus(), timeoutDuration || 5);
-                });
+                _focusableElements[0].focus();
                 return true;
             }
         }
         return false;
     }
-    focus(focusParentElement = this.contentViewChild?.nativeElement) {
-        let focused = this._focus(focusParentElement);
+    focus(focusParentElement) {
+        const element = focusParentElement ?? this.contentViewChild()?.nativeElement;
+        let focused = this._focus(element);
         if (!focused) {
-            focused = this._focus(this.footerViewChild?.nativeElement);
+            focused = this._focus(this.footerViewChild()?.nativeElement);
             if (!focused) {
-                focused = this._focus(this.headerViewChild?.nativeElement);
+                focused = this._focus(this.headerViewChild()?.nativeElement);
                 if (!focused) {
-                    this._focus(this.contentViewChild?.nativeElement);
+                    this._focus(this.contentViewChild()?.nativeElement);
                 }
             }
         }
     }
     close(event) {
-        this.visible = false;
-        this.visibleChange.emit(this.visible);
+        this.visible.set(false);
         event.preventDefault();
     }
     enableModality() {
-        if (this.closable && this.dismissableMask) {
-            this.maskClickListener = this.renderer.listen(this.wrapper, 'mousedown', (event) => {
-                if (this.wrapper && this.wrapper.isSameNode(event.target)) {
+        this.maskClickListener = this.renderer.listen(this.wrapper, 'mousedown', (event) => {
+            if (this.wrapper && this.wrapper.isSameNode(event.target)) {
+                if (this.closable() && this.dismissableMask()) {
                     this.close(event);
                 }
-            });
-        }
-        if (this.modal) {
+                else if (this.focusTrap()) {
+                    // keep focus within the dialog so the trap is not defeated by a mask click
+                    event.preventDefault();
+                }
+            }
+        });
+        if (this.modal()) {
             blockBodyScroll();
         }
     }
     disableModality() {
         if (this.wrapper) {
-            if (this.dismissableMask) {
-                this.unbindMaskClickListener();
-            }
+            this.unbindMaskClickListener();
             // for nested dialogs w/modal
             const scrollBlockers = document.querySelectorAll('[data-p-scrollblocker-active="true"]');
-            if (this.modal && scrollBlockers && scrollBlockers.length == 1) {
+            if (this.modal() && scrollBlockers && scrollBlockers.length == 1) {
                 unblockBodyScroll();
             }
             if (!this.cd.destroyed) {
@@ -659,16 +607,16 @@ class Dialog extends BaseComponent {
         }
     }
     maximize() {
-        this.maximized = !this.maximized;
-        if (!this.modal && !this.blockScroll) {
-            if (this.maximized) {
+        this.maximized.update((v) => !v);
+        if (!this.modal() && !this.blockScroll()) {
+            if (this.maximized()) {
                 blockBodyScroll();
             }
             else {
                 unblockBodyScroll();
             }
         }
-        this.onMaximize.emit({ maximized: this.maximized });
+        this.onMaximize.emit({ maximized: this.maximized() });
     }
     unbindMaskClickListener() {
         if (this.maskClickListener) {
@@ -677,33 +625,33 @@ class Dialog extends BaseComponent {
         }
     }
     moveOnTop() {
-        if (this.autoZIndex) {
-            ZIndexUtils.set('modal', this.container(), this.baseZIndex + this.config.zIndex.modal);
+        if (this.autoZIndex()) {
+            ZIndexUtils.set('modal', this.container(), this.baseZIndex() + this.config.zIndex.modal);
             this.wrapper.style.zIndex = String(parseInt(this.container().style.zIndex, 10) - 1);
         }
         else {
-            this.zIndexForLayering = ZIndexUtils.generateZIndex('modal', (this.baseZIndex ?? 0) + this.config.zIndex.modal);
+            this.zIndexForLayering = ZIndexUtils.generateZIndex('modal', (this.baseZIndex() ?? 0) + this.config.zIndex.modal);
         }
     }
     createStyle() {
         if (isPlatformBrowser(this.platformId)) {
             if (!this.styleElement && !this.$unstyled()) {
-                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);
+                const styleElement = this.renderer.createElement('style');
+                setAttribute(styleElement, 'nonce', this.config?.csp()?.nonce);
+                this.renderer.appendChild(this.document.head, styleElement);
                 let innerHTML = '';
-                for (let breakpoint in this.breakpoints) {
+                for (let breakpoint in this.breakpoints()) {
                     innerHTML += `
                         @media screen and (max-width: ${breakpoint}) {
                             .p-dialog[${this.id}]:not(.p-dialog-maximized) {
-                                width: ${this.breakpoints[breakpoint]} !important;
+                                width: ${this.breakpoints()[breakpoint]} !important;
                             }
                         }
                     `;
                 }
-                this.renderer.setProperty(this.styleElement, 'innerHTML', innerHTML);
-                setAttribute(this.styleElement, 'nonce', this.config?.csp()?.nonce);
+                this.renderer.setProperty(styleElement, 'innerHTML', innerHTML);
+                setAttribute(styleElement, 'nonce', this.config?.csp()?.nonce);
+                this.styleElement = styleElement;
             }
         }
     }
@@ -713,13 +661,14 @@ class Dialog extends BaseComponent {
         if (closestDiv?.getAttribute('data-pc-section') === 'headeractions') {
             return;
         }
-        if (this.draggable) {
+        if (this.draggable()) {
             this.dragging = true;
             this.lastPageX = event.pageX;
             this.lastPageY = event.pageY;
             this.container().style.margin = '0';
             this.document.body.setAttribute('data-p-unselectable-text', 'true');
             !this.$unstyled() && addStyle(this.document.body, { 'user-select': 'none' });
+            this.onDragStart.emit(event);
         }
     }
     onDrag(event) {
@@ -736,13 +685,13 @@ class Dialog extends BaseComponent {
             const topPos = offset.top + deltaY - topMargin;
             const viewport = getViewport();
             this.container().style.position = 'fixed';
-            if (this.keepInViewport) {
-                if (leftPos >= this.minX && leftPos + containerWidth < viewport.width) {
+            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) {
+                if (topPos >= this.minY() && topPos + containerHeight < viewport.height) {
                     this._style.top = `${topPos}px`;
                     this.lastPageY = event.pageY;
                     this.container().style.top = `${topPos}px`;
@@ -777,7 +726,7 @@ class Dialog extends BaseComponent {
         this.resetPosition();
     }
     initResize(event) {
-        if (this.resizable) {
+        if (this.resizable()) {
             this.resizing = true;
             this.lastPageX = event.pageX;
             this.lastPageY = event.pageY;
@@ -792,7 +741,7 @@ class Dialog extends BaseComponent {
             let deltaY = event.pageY - this.lastPageY;
             let containerWidth = getOuterWidth(this.container());
             let containerHeight = getOuterHeight(this.container());
-            let contentHeight = getOuterHeight(this.contentViewChild?.nativeElement);
+            let contentHeight = getOuterHeight(this.contentViewChild()?.nativeElement);
             let newWidth = containerWidth + deltaX;
             let newHeight = containerHeight + deltaY;
             let minWidth = this.container().style.minWidth;
@@ -809,7 +758,7 @@ class Dialog extends BaseComponent {
                 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';
+                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;
@@ -828,14 +777,14 @@ class Dialog extends BaseComponent {
         }
     }
     bindGlobalListeners() {
-        if (this.draggable) {
+        if (this.draggable()) {
             this.bindDocumentDragListener();
             this.bindDocumentDragEndListener();
         }
-        if (this.resizable) {
+        if (this.resizable()) {
             this.bindDocumentResizeListeners();
         }
-        if (this.closeOnEscape && this.closable) {
+        if (this.closeOnEscape() && this.closable()) {
             this.bindDocumentEscapeListener();
         }
     }
@@ -847,9 +796,7 @@ class Dialog extends BaseComponent {
     }
     bindDocumentDragListener() {
         if (!this.documentDragListener) {
-            this.zone.runOutsideAngular(() => {
-                this.documentDragListener = this.renderer.listen(this.document.defaultView, 'mousemove', this.onDrag.bind(this));
-            });
+            this.documentDragListener = this.renderer.listen(this.document.defaultView, 'mousemove', this.onDrag.bind(this));
         }
     }
     unbindDocumentDragListener() {
@@ -860,9 +807,7 @@ class Dialog extends BaseComponent {
     }
     bindDocumentDragEndListener() {
         if (!this.documentDragEndListener) {
-            this.zone.runOutsideAngular(() => {
-                this.documentDragEndListener = this.renderer.listen(this.document.defaultView, 'mouseup', this.endDrag.bind(this));
-            });
+            this.documentDragEndListener = this.renderer.listen(this.document.defaultView, 'mouseup', this.endDrag.bind(this));
         }
     }
     unbindDocumentDragEndListener() {
@@ -873,10 +818,8 @@ class Dialog extends BaseComponent {
     }
     bindDocumentResizeListeners() {
         if (!this.documentResizeListener && !this.documentResizeEndListener) {
-            this.zone.runOutsideAngular(() => {
-                this.documentResizeListener = this.renderer.listen(this.document.defaultView, 'mousemove', this.onResize.bind(this));
-                this.documentResizeEndListener = this.renderer.listen(this.document.defaultView, 'mouseup', this.resizeEnd.bind(this));
-            });
+            this.documentResizeListener = this.renderer.listen(this.document.defaultView, 'mousemove', this.onResize.bind(this));
+            this.documentResizeEndListener = this.renderer.listen(this.document.defaultView, 'mouseup', this.resizeEnd.bind(this));
         }
     }
     unbindDocumentResizeListeners() {
@@ -888,7 +831,7 @@ class Dialog extends BaseComponent {
         }
     }
     bindDocumentEscapeListener() {
-        const documentTarget = this.el ? this.el.nativeElement.ownerDocument : 'document';
+        const documentTarget = this.el ? this.el.nativeElement.ownerDocument : this.document;
         this.documentEscapeListener = this.renderer.listen(documentTarget, 'keydown', (event) => {
             if (event.key == 'Escape') {
                 const container = this.container();
@@ -926,32 +869,31 @@ class Dialog extends BaseComponent {
         this.moveOnTop();
         this.bindGlobalListeners();
         this.container()?.setAttribute(this.id, '');
-        if (this.modal) {
+        if (this.modal()) {
             this.enableModality();
         }
     }
     onAfterEnter() {
-        if (this.focusOnShow) {
+        if (this.focusOnShow()) {
             this.focus();
         }
         this.onShow.emit({});
     }
     onBeforeLeave() {
-        if (this.modal) {
+        if (this.modal()) {
             this.maskVisible = false;
         }
     }
     onAfterLeave() {
         this.onContainerDestroy();
         this.renderDialog.set(false);
-        if (this.modal) {
+        if (this.modal()) {
             this.renderMask.set(false);
         }
         else {
             this.maskVisible = false;
         }
         this.onHide.emit({});
-        this.cd.markForCheck();
     }
     onMaskAfterLeave() {
         if (!this.renderDialog()) {
@@ -961,18 +903,19 @@ class Dialog extends BaseComponent {
     onContainerDestroy() {
         this.unbindGlobalListeners();
         this.dragging = false;
-        if (this.maximized) {
+        if (this.maximized()) {
             removeClass(this.document.body, 'p-overflow-hidden');
-            this.document.body.style.removeProperty('--scrollbar-width');
-            this.maximized = false;
+            this.document.body.style.removeProperty('--px-scrollbar-width');
+            this.maximized.set(false);
         }
-        if (this.modal) {
+        if (this.modal()) {
             this.disableModality();
         }
-        if (hasClass(this.document.body, 'p-overflow-hidden')) {
+        const remainingScrollBlockers = this.document.querySelectorAll('[data-p-scrollblocker-active="true"]');
+        if (remainingScrollBlockers.length <= 1 && hasClass(this.document.body, 'p-overflow-hidden')) {
             removeClass(this.document.body, 'p-overflow-hidden');
         }
-        if (this.container() && this.autoZIndex) {
+        if (this.container() && this.autoZIndex()) {
             ZIndexUtils.clear(this.container());
         }
         if (this.zIndexForLayering) {
@@ -995,39 +938,36 @@ class Dialog extends BaseComponent {
         }
         this.destroyStyle();
     }
-    get dataP() {
-        return this.cn({
-            maximized: this.maximized,
-            modal: this.modal
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: Dialog, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: Dialog, isStandalone: true, selector: "p-dialog", inputs: { hostName: { classPropertyName: "hostName", publicName: "hostName", isSignal: false, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: false, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, contentStyle: { classPropertyName: "contentStyle", publicName: "contentStyle", isSignal: false, isRequired: false, transformFunction: null }, contentStyleClass: { classPropertyName: "contentStyleClass", publicName: "contentStyleClass", isSignal: false, isRequired: false, transformFunction: null }, modal: { classPropertyName: "modal", publicName: "modal", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, dismissableMask: { classPropertyName: "dismissableMask", publicName: "dismissableMask", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, rtl: { classPropertyName: "rtl", publicName: "rtl", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, breakpoints: { classPropertyName: "breakpoints", publicName: "breakpoints", isSignal: false, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: false, isRequired: false, transformFunction: null }, maskStyleClass: { classPropertyName: "maskStyleClass", publicName: "maskStyleClass", isSignal: false, isRequired: false, transformFunction: null }, maskStyle: { classPropertyName: "maskStyle", publicName: "maskStyle", isSignal: false, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, blockScroll: { classPropertyName: "blockScroll", publicName: "blockScroll", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, autoZIndex: { classPropertyName: "autoZIndex", publicName: "autoZIndex", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, baseZIndex: { classPropertyName: "baseZIndex", publicName: "baseZIndex", isSignal: false, isRequired: false, transformFunction: numberAttribute }, minX: { classPropertyName: "minX", publicName: "minX", isSignal: false, isRequired: false, transformFunction: numberAttribute }, minY: { classPropertyName: "minY", publicName: "minY", isSignal: false, isRequired: false, transformFunction: numberAttribute }, focusOnShow: { classPropertyName: "focusOnShow", publicName: "focusOnShow", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, maximizable: { classPropertyName: "maximizable", publicName: "maximizable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, keepInViewport: { classPropertyName: "keepInViewport", publicName: "keepInViewport", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, focusTrap: { classPropertyName: "focusTrap", publicName: "focusTrap", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, transitionOptions: { classPropertyName: "transitionOptions", publicName: "transitionOptions", isSignal: false, isRequired: false, transformFunction: null }, maskMotionOptions: { classPropertyName: "maskMotionOptions", publicName: "maskMotionOptions", isSignal: true, isRequired: false, transformFunction: null }, motionOptions: { classPropertyName: "motionOptions", publicName: "motionOptions", isSignal: true, isRequired: false, transformFunction: null }, closeIcon: { classPropertyName: "closeIcon", publicName: "closeIcon", isSignal: false, isRequired: false, transformFunction: null }, closeAriaLabel: { classPropertyName: "closeAriaLabel", publicName: "closeAriaLabel", isSignal: false, isRequired: false, transformFunction: null }, closeTabindex: { classPropertyName: "closeTabindex", publicName: "closeTabindex", isSignal: false, isRequired: false, transformFunction: null }, minimizeIcon: { classPropertyName: "minimizeIcon", publicName: "minimizeIcon", isSignal: false, isRequired: false, transformFunction: null }, maximizeIcon: { classPropertyName: "maximizeIcon", publicName: "maximizeIcon", isSignal: false, isRequired: false, transformFunction: null }, closeButtonProps: { classPropertyName: "closeButtonProps", publicName: "closeButtonProps", isSignal: false, isRequired: false, transformFunction: null }, maximizeButtonProps: { classPropertyName: "maximizeButtonProps", publicName: "maximizeButtonProps", isSignal: false, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: false, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: false, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: false, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: false, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, headerTemplate: { classPropertyName: "headerTemplate", publicName: "content", isSignal: false, isRequired: false, transformFunction: null }, contentTemplate: { classPropertyName: "contentTemplate", publicName: "contentTemplate", isSignal: false, isRequired: false, transformFunction: null }, footerTemplate: { classPropertyName: "footerTemplate", publicName: "footerTemplate", isSignal: false, isRequired: false, transformFunction: null }, closeIconTemplate: { classPropertyName: "closeIconTemplate", publicName: "closeIconTemplate", isSignal: false, isRequired: false, transformFunction: null }, maximizeIconTemplate: { classPropertyName: "maximizeIconTemplate", publicName: "maximizeIconTemplate", isSignal: false, isRequired: false, transformFunction: null }, minimizeIconTemplate: { classPropertyName: "minimizeIconTemplate", publicName: "minimizeIconTemplate", isSignal: false, isRequired: false, transformFunction: null }, headlessTemplate: { classPropertyName: "headlessTemplate", publicName: "headlessTemplate", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onShow: "onShow", onHide: "onHide", visibleChange: "visibleChange", onResizeInit: "onResizeInit", onResizeEnd: "onResizeEnd", onDragEnd: "onDragEnd", onMaximize: "onMaximize" }, providers: [DialogStyle, { provide: DIALOG_INSTANCE, useExisting: Dialog }, { provide: PARENT_INSTANCE, useExisting: Dialog }], queries: [{ propertyName: "_headerTemplate", first: true, predicate: ["header"] }, { propertyName: "_contentTemplate", first: true, predicate: ["content"] }, { propertyName: "_footerTemplate", first: true, predicate: ["footer"] }, { propertyName: "_closeiconTemplate", first: true, predicate: ["closeicon"] }, { propertyName: "_maximizeiconTemplate", first: true, predicate: ["maximizeicon"] }, { propertyName: "_minimizeiconTemplate", first: true, predicate: ["minimizeicon"] }, { propertyName: "_headlessTemplate", first: true, predicate: ["headless"] }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "headerViewChild", first: true, predicate: ["titlebar"], descendants: true }, { propertyName: "contentViewChild", first: true, predicate: ["content"], descendants: true }, { propertyName: "footerViewChild", first: true, predicate: ["footer"], descendants: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
+    dataP = computed(() => this.cn({
+        maximized: this.maximized(),
+        modal: this.modal()
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dataP" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: Dialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: Dialog, isStandalone: true, selector: "p-dialog", inputs: { hostName: { classPropertyName: "hostName", publicName: "hostName", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, contentStyle: { classPropertyName: "contentStyle", publicName: "contentStyle", isSignal: true, isRequired: false, transformFunction: null }, contentStyleClass: { classPropertyName: "contentStyleClass", publicName: "contentStyleClass", isSignal: true, isRequired: false, transformFunction: null }, modal: { classPropertyName: "modal", publicName: "modal", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, dismissableMask: { classPropertyName: "dismissableMask", publicName: "dismissableMask", isSignal: true, isRequired: false, transformFunction: null }, rtl: { classPropertyName: "rtl", publicName: "rtl", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, breakpoints: { classPropertyName: "breakpoints", publicName: "breakpoints", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, maskStyleClass: { classPropertyName: "maskStyleClass", publicName: "maskStyleClass", isSignal: true, isRequired: false, transformFunction: null }, maskStyle: { classPropertyName: "maskStyle", publicName: "maskStyle", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, blockScroll: { classPropertyName: "blockScroll", publicName: "blockScroll", isSignal: true, isRequired: false, transformFunction: null }, autoZIndex: { classPropertyName: "autoZIndex", publicName: "autoZIndex", isSignal: true, isRequired: false, transformFunction: null }, baseZIndex: { classPropertyName: "baseZIndex", publicName: "baseZIndex", isSignal: true, isRequired: false, transformFunction: null }, minX: { classPropertyName: "minX", publicName: "minX", isSignal: true, isRequired: false, transformFunction: null }, minY: { classPropertyName: "minY", publicName: "minY", isSignal: true, isRequired: false, transformFunction: null }, focusOnShow: { classPropertyName: "focusOnShow", publicName: "focusOnShow", isSignal: true, isRequired: false, transformFunction: null }, maximizable: { classPropertyName: "maximizable", publicName: "maximizable", isSignal: true, isRequired: false, transformFunction: null }, keepInViewport: { classPropertyName: "keepInViewport", publicName: "keepInViewport", isSignal: true, isRequired: false, transformFunction: null }, focusTrap: { classPropertyName: "focusTrap", publicName: "focusTrap", isSignal: true, isRequired: false, transformFunction: null }, maskMotionOptions: { classPropertyName: "maskMotionOptions", publicName: "maskMotionOptions", isSignal: true, isRequired: false, transformFunction: null }, motionOptions: { classPropertyName: "motionOptions", publicName: "motionOptions", isSignal: true, isRequired: false, transformFunction: null }, closeIcon: { classPropertyName: "closeIcon", publicName: "closeIcon", isSignal: true, isRequired: false, transformFunction: null }, closeAriaLabel: { classPropertyName: "closeAriaLabel", publicName: "closeAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, closeTabindex: { classPropertyName: "closeTabindex", publicName: "closeTabindex", isSignal: true, isRequired: false, transformFunction: null }, minimizeIcon: { classPropertyName: "minimizeIcon", publicName: "minimizeIcon", isSignal: true, isRequired: false, transformFunction: null }, maximizeIcon: { classPropertyName: "maximizeIcon", publicName: "maximizeIcon", isSignal: true, isRequired: false, transformFunction: null }, closeButtonProps: { classPropertyName: "closeButtonProps", publicName: "closeButtonProps", isSignal: true, isRequired: false, transformFunction: null }, maximizeButtonProps: { classPropertyName: "maximizeButtonProps", publicName: "maximizeButtonProps", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange", onShow: "onShow", onHide: "onHide", onResizeInit: "onResizeInit", onResizeEnd: "onResizeEnd", onDragStart: "onDragStart", onDragEnd: "onDragEnd", onMaximize: "onMaximize" }, providers: [DialogStyle, { provide: DIALOG_INSTANCE, useExisting: Dialog }, { provide: PARENT_INSTANCE, useExisting: Dialog }], queries: [{ propertyName: "headerTemplate", first: true, predicate: ["header"], isSignal: true }, { propertyName: "contentTemplate", first: true, predicate: ["content"], isSignal: true }, { propertyName: "footerTemplate", first: true, predicate: ["footer"], isSignal: true }, { propertyName: "closeIconTemplate", first: true, predicate: ["closeicon"], isSignal: true }, { propertyName: "maximizeIconTemplate", first: true, predicate: ["maximizeicon"], isSignal: true }, { propertyName: "minimizeIconTemplate", first: true, predicate: ["minimizeicon"], isSignal: true }, { propertyName: "headlessTemplate", first: true, predicate: ["headless"], isSignal: true }], viewQueries: [{ propertyName: "headerViewChild", first: true, predicate: ["titlebar"], descendants: true, isSignal: true }, { propertyName: "contentViewChild", first: true, predicate: ["content"], descendants: true, isSignal: true }, { propertyName: "footerViewChild", first: true, predicate: ["footer"], descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
         @if (renderMask()) {
             <div
-                [class]="cn(cx('mask'), maskStyleClass)"
+                [class]="cn(cx('mask'), maskStyleClass())"
                 [style]="sx('mask')"
-                [ngStyle]="maskStyle"
                 [pBind]="ptm('mask')"
                 [pMotion]="maskVisible"
                 [pMotionAppear]="true"
-                [pMotionEnterActiveClass]="modal ? 'p-overlay-mask-enter-active' : ''"
-                [pMotionLeaveActiveClass]="modal ? 'p-overlay-mask-leave-active' : ''"
+                [pMotionEnterActiveClass]="maskEnterActiveClass()"
+                [pMotionLeaveActiveClass]="maskLeaveActiveClass()"
                 [pMotionOptions]="computedMaskMotionOptions()"
                 (pMotionOnAfterLeave)="onMaskAfterLeave()"
-                [attr.data-p-scrollblocker-active]="modal || blockScroll"
-                [attr.data-p]="dataP"
+                [attr.data-p-scrollblocker-active]="scrollBlockerActive()"
+                [attr.data-p]="dataP()"
             >
                 @if (renderDialog()) {
                     <div
                         #container
-                        [class]="cn(cx('root'), styleClass)"
+                        [class]="cn(cx('root'), styleClass())"
                         [style]="sx('root')"
-                        [ngStyle]="style"
                         [pBind]="ptm('root')"
                         pFocusTrap
-                        [pFocusTrapDisabled]="focusTrap === false"
-                        [pMotion]="visible"
+                        [pFocusTrapDisabled]="focusTrapDisabled()"
+                        [pMotion]="visible()"
                         [pMotionAppear]="true"
                         [pMotionName]="'p-dialog'"
                         [pMotionOptions]="computedMotionOptions()"
@@ -1035,118 +975,135 @@ class Dialog extends BaseComponent {
                         (pMotionOnAfterEnter)="onAfterEnter($event)"
                         (pMotionOnBeforeLeave)="onBeforeLeave($event)"
                         (pMotionOnAfterLeave)="onAfterLeave($event)"
-                        [attr.role]="role"
-                        [attr.aria-labelledby]="ariaLabelledBy"
+                        [attr.role]="role()"
+                        [attr.aria-labelledby]="ariaLabelledBy()"
                         [attr.aria-modal]="true"
-                        [attr.data-p]="dataP"
+                        [attr.data-p]="dataP()"
                     >
-                        <ng-container *ngIf="_headlessTemplate || headlessTemplate || headlessT; else notHeadless">
-                            <ng-container *ngTemplateOutlet="_headlessTemplate || headlessTemplate || headlessT"></ng-container>
-                        </ng-container>
-
-                        <ng-template #notHeadless>
-                            <div *ngIf="resizable" [class]="cx('resizeHandle')" [pBind]="ptm('resizeHandle')" [style.z-index]="90" (mousedown)="initResize($event)"></div>
-                            <div #titlebar [class]="cx('header')" [pBind]="ptm('header')" (mousedown)="initDrag($event)" *ngIf="showHeader">
-                                <span [id]="ariaLabelledBy" [class]="cx('title')" [pBind]="ptm('title')" *ngIf="!_headerTemplate && !headerTemplate && !headerT">{{ header }}</span>
-                                <ng-container *ngTemplateOutlet="_headerTemplate || headerTemplate || headerT; context: { ariaLabelledBy: ariaLabelledBy }"></ng-container>
-                                <div [class]="cx('headerActions')" [pBind]="ptm('headerActions')">
-                                    <p-button
-                                        [pt]="ptm('pcMaximizeButton')"
-                                        *ngIf="maximizable"
-                                        [styleClass]="cx('pcMaximizeButton')"
-                                        [ariaLabel]="maximized ? minimizeLabel : maximizeLabel"
-                                        (onClick)="maximize()"
-                                        (keydown.enter)="maximize()"
-                                        [tabindex]="maximizable ? '0' : '-1'"
-                                        [buttonProps]="maximizeButtonProps"
-                                        [unstyled]="unstyled()"
-                                        [attr.data-pc-group-section]="'headericon'"
-                                    >
-                                        <ng-template #icon>
-                                            <span *ngIf="maximizeIcon && !_maximizeiconTemplate && !_minimizeiconTemplate" [ngClass]="maximized ? minimizeIcon : maximizeIcon"></span>
-                                            <ng-container *ngIf="!maximizeIcon && !maximizeButtonProps?.icon">
-                                                <svg data-p-icon="window-maximize" *ngIf="!maximized && !_maximizeiconTemplate && !maximizeIconTemplate && !maximizeIconT" />
-                                                <svg data-p-icon="window-minimize" *ngIf="maximized && !_minimizeiconTemplate && !minimizeIconTemplate && !minimizeIconT" />
-                                            </ng-container>
-                                            <ng-container *ngIf="!maximized">
-                                                <ng-template *ngTemplateOutlet="_maximizeiconTemplate || maximizeIconTemplate || maximizeIconT"></ng-template>
-                                            </ng-container>
-                                            <ng-container *ngIf="maximized">
-                                                <ng-template *ngTemplateOutlet="_minimizeiconTemplate || minimizeIconTemplate || minimizeIconT"></ng-template>
-                                            </ng-container>
-                                        </ng-template>
-                                    </p-button>
-                                    <p-button
-                                        [pt]="ptm('pcCloseButton')"
-                                        *ngIf="closable"
-                                        [styleClass]="cx('pcCloseButton')"
-                                        [ariaLabel]="closeAriaLabel"
-                                        (onClick)="close($event)"
-                                        (keydown.enter)="close($event)"
-                                        [tabindex]="closeTabindex"
-                                        [buttonProps]="closeButtonProps"
-                                        [unstyled]="unstyled()"
-                                        [attr.data-pc-group-section]="'headericon'"
-                                    >
-                                        <ng-template #icon>
-                                            <ng-container *ngIf="!_closeiconTemplate && !closeIconTemplate && !closeIconT && !closeButtonProps?.icon">
-                                                <span *ngIf="closeIcon" [class]="closeIcon"></span>
-                                                <svg data-p-icon="times" *ngIf="!closeIcon" />
-                                            </ng-container>
-                                            <span *ngIf="_closeiconTemplate || closeIconTemplate || closeIconT">
-                                                <ng-template *ngTemplateOutlet="_closeiconTemplate || closeIconTemplate || closeIconT"></ng-template>
-                                            </span>
-                                        </ng-template>
-                                    </p-button>
+                        @if (headlessTemplate()) {
+                            <ng-container *ngTemplateOutlet="headlessTemplate()"></ng-container>
+                        } @else {
+                            @if (resizable()) {
+                                <div [class]="cx('resizeHandle')" [pBind]="ptm('resizeHandle')" [style.z-index]="90" (mousedown)="initResize($event)"></div>
+                            }
+                            @if (showHeader()) {
+                                <div #titlebar [class]="cx('header')" [pBind]="ptm('header')" (mousedown)="initDrag($event)">
+                                    @if (!headerTemplate()) {
+                                        <span [id]="ariaLabelledBy()" [class]="cx('title')" [pBind]="ptm('title')">{{ header() }}</span>
+                                    }
+                                    <ng-container *ngTemplateOutlet="headerTemplate(); context: headerTemplateContext()"></ng-container>
+                                    <div [class]="cx('headerActions')" [pBind]="ptm('headerActions')">
+                                        @if (maximizable()) {
+                                            <button
+                                                type="button"
+                                                iconOnly
+                                                [pButton]="maximizeButtonProps()"
+                                                [class]="cx('pcMaximizeButton')"
+                                                [tabindex]="maximizeButtonTabindex()"
+                                                [attr.aria-label]="maximizeButtonAriaLabel()"
+                                                [attr.data-pc-group-section]="'headericon'"
+                                                [pButtonPT]="ptm('pcMaximizeButton')"
+                                                [pButtonUnstyled]="unstyled()"
+                                                (click)="maximize()"
+                                                (keydown.enter)="maximize()"
+                                            >
+                                                @if (showToggleIcon()) {
+                                                    <span [class]="toggleIcon()"></span>
+                                                }
+                                                @if (showDefaultMaximizeIcon()) {
+                                                    @if (showMaximizeSvg()) {
+                                                        <svg data-p-icon="window-maximize" />
+                                                    }
+                                                    @if (showMinimizeSvg()) {
+                                                        <svg data-p-icon="window-minimize" />
+                                                    }
+                                                }
+                                                @if (showMaximizeIconTemplate()) {
+                                                    <ng-container *ngTemplateOutlet="maximizeIconTemplate()"></ng-container>
+                                                }
+                                                @if (showMinimizeIconTemplate()) {
+                                                    <ng-container *ngTemplateOutlet="minimizeIconTemplate()"></ng-container>
+                                                }
+                                            </button>
+                                        }
+                                        @if (closable()) {
+                                            <button
+                                                type="button"
+                                                iconOnly
+                                                [pButton]="closeButtonProps()"
+                                                [class]="cx('pcCloseButton')"
+                                                [tabindex]="closeTabindex()"
+                                                [attr.aria-label]="closeAriaLabel()"
+                                                [attr.data-pc-group-section]="'headericon'"
+                                                [pButtonPT]="ptm('pcCloseButton')"
+                                                [pButtonUnstyled]="unstyled()"
+                                                (click)="close($event)"
+                                                (keydown.enter)="close($event)"
+                                            >
+                                                @if (showDefaultCloseIcon) {
+                                                    @if (closeIcon()) {
+                                                        <span [class]="closeIcon()"></span>
+                                                    } @else {
+                                                        <svg data-p-icon="times" />
+                                                    }
+                                                }
+                                                @if (closeIconTemplate()) {
+                                                    <ng-container *ngTemplateOutlet="closeIconTemplate()"></ng-container>
+                                                }
+                                            </button>
+                                        }
+                                    </div>
                                 </div>
-                            </div>
-                            <div #content [class]="cn(cx('content'), contentStyleClass)" [ngStyle]="contentStyle" [pBind]="ptm('content')">
+                            }
+                            <div #content [class]="cn(cx('content'), contentStyleClass())" [style]="contentStyle()" [pBind]="ptm('content')">
                                 <ng-content></ng-content>
-                                <ng-container *ngTemplateOutlet="_contentTemplate || contentTemplate || contentT"></ng-container>
+                                @if (contentTemplate()) {
+                                    <ng-container *ngTemplateOutlet="contentTemplate()"></ng-container>
+                                }
                             </div>
-                            <div #footer [class]="cx('footer')" [pBind]="ptm('footer')" *ngIf="_footerTemplate || footerTemplate || footerT">
-                                <ng-content select="p-footer"></ng-content>
-                                <ng-container *ngTemplateOutlet="_footerTemplate || footerTemplate || footerT"></ng-container>
-                            </div>
-                        </ng-template>
+                            @if (footerTemplate()) {
+                                <div #footer [class]="cx('footer')" [pBind]="ptm('footer')">
+                                    <ng-content select="p-footer"></ng-content>
+                                    <ng-container *ngTemplateOutlet="footerTemplate()"></ng-container>
+                                </div>
+                            }
+                        }
                     </div>
                 }
             </div>
         }
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: FocusTrap, selector: "[pFocusTrap]", inputs: ["pFocusTrapDisabled"] }, { kind: "component", type: TimesIcon, selector: "[data-p-icon=\"times\"]" }, { kind: "component", type: WindowMaximizeIcon, selector: "[data-p-icon=\"window-maximize\"]" }, { kind: "component", type: WindowMinimizeIcon, selector: "[data-p-icon=\"window-minimize\"]" }, { kind: "ngmodule", type: SharedModule }, { kind: "directive", type: Bind, selector: "[pBind]", inputs: ["pBind"] }, { kind: "ngmodule", type: MotionModule }, { kind: "directive", type: i3.MotionDirective, selector: "[pMotion]", inputs: ["pMotion", "pMotionName", "pMotionType", "pMotionSafe", "pMotionDisabled", "pMotionAppear", "pMotionEnter", "pMotionLeave", "pMotionDuration", "pMotionHideStrategy", "pMotionEnterFromClass", "pMotionEnterToClass", "pMotionEnterActiveClass", "pMotionLeaveFromClass", "pMotionLeaveToClass", "pMotionLeaveActiveClass", "pMotionOptions"], outputs: ["pMotionOnBeforeEnter", "pMotionOnEnter", "pMotionOnAfterEnter", "pMotionOnEnterCancelled", "pMotionOnBeforeLeave", "pMotionOnLeave", "pMotionOnAfterLeave", "pMotionOnLeaveCancelled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ButtonDirective, selector: "[pButton]", inputs: ["pButton", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "link", "rounded", "fluid", "variant", "iconOnly", "loading", "severity"] }, { kind: "directive", type: FocusTrap, selector: "[pFocusTrap]", inputs: ["pFocusTrapDisabled"] }, { kind: "component", type: Times, selector: "svg[data-p-icon=\"times\"]" }, { kind: "component", type: WindowMaximize, selector: "svg[data-p-icon=\"window-maximize\"]" }, { kind: "component", type: WindowMinimize, selector: "svg[data-p-icon=\"window-minimize\"]" }, { kind: "ngmodule", type: SharedModule }, { kind: "directive", type: Bind, selector: "[pBind]", inputs: ["pBind"] }, { kind: "ngmodule", type: MotionModule }, { kind: "directive", type: i2.MotionDirective, selector: "[pMotion]", inputs: ["pMotion", "pMotionName", "pMotionType", "pMotionSafe", "pMotionDisabled", "pMotionAppear", "pMotionEnter", "pMotionLeave", "pMotionDuration", "pMotionHideStrategy", "pMotionEnterFromClass", "pMotionEnterToClass", "pMotionEnterActiveClass", "pMotionLeaveFromClass", "pMotionLeaveToClass", "pMotionLeaveActiveClass", "pMotionOptions"], outputs: ["pMotionOnBeforeEnter", "pMotionOnEnter", "pMotionOnAfterEnter", "pMotionOnEnterCancelled", "pMotionOnBeforeLeave", "pMotionOnLeave", "pMotionOnAfterLeave", "pMotionOnLeaveCancelled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: Dialog, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: Dialog, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-dialog',
                     standalone: true,
-                    imports: [CommonModule, Button, FocusTrap, TimesIcon, WindowMaximizeIcon, WindowMinimizeIcon, SharedModule, Bind, MotionModule],
+                    imports: [NgTemplateOutlet, ButtonDirective, FocusTrap, Times, WindowMaximize, WindowMinimize, SharedModule, Bind, MotionModule],
                     template: `
         @if (renderMask()) {
             <div
-                [class]="cn(cx('mask'), maskStyleClass)"
+                [class]="cn(cx('mask'), maskStyleClass())"
                 [style]="sx('mask')"
-                [ngStyle]="maskStyle"
                 [pBind]="ptm('mask')"
                 [pMotion]="maskVisible"
                 [pMotionAppear]="true"
-                [pMotionEnterActiveClass]="modal ? 'p-overlay-mask-enter-active' : ''"
-                [pMotionLeaveActiveClass]="modal ? 'p-overlay-mask-leave-active' : ''"
+                [pMotionEnterActiveClass]="maskEnterActiveClass()"
+                [pMotionLeaveActiveClass]="maskLeaveActiveClass()"
                 [pMotionOptions]="computedMaskMotionOptions()"
                 (pMotionOnAfterLeave)="onMaskAfterLeave()"
-                [attr.data-p-scrollblocker-active]="modal || blockScroll"
-                [attr.data-p]="dataP"
+                [attr.data-p-scrollblocker-active]="scrollBlockerActive()"
+                [attr.data-p]="dataP()"
             >
                 @if (renderDialog()) {
                     <div
                         #container
-                        [class]="cn(cx('root'), styleClass)"
+                        [class]="cn(cx('root'), styleClass())"
                         [style]="sx('root')"
-                        [ngStyle]="style"
                         [pBind]="ptm('root')"
                         pFocusTrap
-                        [pFocusTrapDisabled]="focusTrap === false"
-                        [pMotion]="visible"
+                        [pFocusTrapDisabled]="focusTrapDisabled()"
+                        [pMotion]="visible()"
                         [pMotionAppear]="true"
                         [pMotionName]="'p-dialog'"
                         [pMotionOptions]="computedMotionOptions()"
@@ -1154,80 +1111,99 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                         (pMotionOnAfterEnter)="onAfterEnter($event)"
                         (pMotionOnBeforeLeave)="onBeforeLeave($event)"
                         (pMotionOnAfterLeave)="onAfterLeave($event)"
-                        [attr.role]="role"
-                        [attr.aria-labelledby]="ariaLabelledBy"
+                        [attr.role]="role()"
+                        [attr.aria-labelledby]="ariaLabelledBy()"
                         [attr.aria-modal]="true"
-                        [attr.data-p]="dataP"
+                        [attr.data-p]="dataP()"
                     >
-                        <ng-container *ngIf="_headlessTemplate || headlessTemplate || headlessT; else notHeadless">
-                            <ng-container *ngTemplateOutlet="_headlessTemplate || headlessTemplate || headlessT"></ng-container>
-                        </ng-container>
-
-                        <ng-template #notHeadless>
-                            <div *ngIf="resizable" [class]="cx('resizeHandle')" [pBind]="ptm('resizeHandle')" [style.z-index]="90" (mousedown)="initResize($event)"></div>
-                            <div #titlebar [class]="cx('header')" [pBind]="ptm('header')" (mousedown)="initDrag($event)" *ngIf="showHeader">
-                                <span [id]="ariaLabelledBy" [class]="cx('title')" [pBind]="ptm('title')" *ngIf="!_headerTemplate && !headerTemplate && !headerT">{{ header }}</span>
-                                <ng-container *ngTemplateOutlet="_headerTemplate || headerTemplate || headerT; context: { ariaLabelledBy: ariaLabelledBy }"></ng-container>
-                                <div [class]="cx('headerActions')" [pBind]="ptm('headerActions')">
-                                    <p-button
-                                        [pt]="ptm('pcMaximizeButton')"
-                                        *ngIf="maximizable"
-                                        [styleClass]="cx('pcMaximizeButton')"
-                                        [ariaLabel]="maximized ? minimizeLabel : maximizeLabel"
-                                        (onClick)="maximize()"
-                                        (keydown.enter)="maximize()"
-                                        [tabindex]="maximizable ? '0' : '-1'"
-                                        [buttonProps]="maximizeButtonProps"
-                                        [unstyled]="unstyled()"
-                                        [attr.data-pc-group-section]="'headericon'"
-                                    >
-                                        <ng-template #icon>
-                                            <span *ngIf="maximizeIcon && !_maximizeiconTemplate && !_minimizeiconTemplate" [ngClass]="maximized ? minimizeIcon : maximizeIcon"></span>
-                                            <ng-container *ngIf="!maximizeIcon && !maximizeButtonProps?.icon">
-                                                <svg data-p-icon="window-maximize" *ngIf="!maximized && !_maximizeiconTemplate && !maximizeIconTemplate && !maximizeIconT" />
-                                                <svg data-p-icon="window-minimize" *ngIf="maximized && !_minimizeiconTemplate && !minimizeIconTemplate && !minimizeIconT" />
-                                            </ng-container>
-                                            <ng-container *ngIf="!maximized">
-                                                <ng-template *ngTemplateOutlet="_maximizeiconTemplate || maximizeIconTemplate || maximizeIconT"></ng-template>
-                                            </ng-container>
-                                            <ng-container *ngIf="maximized">
-                                                <ng-template *ngTemplateOutlet="_minimizeiconTemplate || minimizeIconTemplate || minimizeIconT"></ng-template>
-                                            </ng-container>
-                                        </ng-template>
-                                    </p-button>
-                                    <p-button
-                                        [pt]="ptm('pcCloseButton')"
-                                        *ngIf="closable"
-                                        [styleClass]="cx('pcCloseButton')"
-                                        [ariaLabel]="closeAriaLabel"
-                                        (onClick)="close($event)"
-                                        (keydown.enter)="close($event)"
-                                        [tabindex]="closeTabindex"
-                                        [buttonProps]="closeButtonProps"
-                                        [unstyled]="unstyled()"
-                                        [attr.data-pc-group-section]="'headericon'"
-                                    >
-                                        <ng-template #icon>
-                                            <ng-container *ngIf="!_closeiconTemplate && !closeIconTemplate && !closeIconT && !closeButtonProps?.icon">
-                                                <span *ngIf="closeIcon" [class]="closeIcon"></span>
-                                                <svg data-p-icon="times" *ngIf="!closeIcon" />
-                                            </ng-container>
-                                            <span *ngIf="_closeiconTemplate || closeIconTemplate || closeIconT">
-                                                <ng-template *ngTemplateOutlet="_closeiconTemplate || closeIconTemplate || closeIconT"></ng-template>
-                                            </span>
-                                        </ng-template>
-                                    </p-button>
+                        @if (headlessTemplate()) {
+                            <ng-container *ngTemplateOutlet="headlessTemplate()"></ng-container>
+                        } @else {
+                            @if (resizable()) {
+                                <div [class]="cx('resizeHandle')" [pBind]="ptm('resizeHandle')" [style.z-index]="90" (mousedown)="initResize($event)"></div>
+                            }
+                            @if (showHeader()) {
+                                <div #titlebar [class]="cx('header')" [pBind]="ptm('header')" (mousedown)="initDrag($event)">
+                                    @if (!headerTemplate()) {
+                                        <span [id]="ariaLabelledBy()" [class]="cx('title')" [pBind]="ptm('title')">{{ header() }}</span>
+                                    }
+                                    <ng-container *ngTemplateOutlet="headerTemplate(); context: headerTemplateContext()"></ng-container>
+                                    <div [class]="cx('headerActions')" [pBind]="ptm('headerActions')">
+                                        @if (maximizable()) {
+                                            <button
+                                                type="button"
+                                                iconOnly
+                                                [pButton]="maximizeButtonProps()"
+                                                [class]="cx('pcMaximizeButton')"
+                                                [tabindex]="maximizeButtonTabindex()"
+                                                [attr.aria-label]="maximizeButtonAriaLabel()"
+                                                [attr.data-pc-group-section]="'headericon'"
+                                                [pButtonPT]="ptm('pcMaximizeButton')"
+                                                [pButtonUnstyled]="unstyled()"
+                                                (click)="maximize()"
+                                                (keydown.enter)="maximize()"
+                                            >
+                                                @if (showToggleIcon()) {
+                                                    <span [class]="toggleIcon()"></span>
+                                                }
+                                                @if (showDefaultMaximizeIcon()) {
+                                                    @if (showMaximizeSvg()) {
+                                                        <svg data-p-icon="window-maximize" />
+                                                    }
+                                                    @if (showMinimizeSvg()) {
+                                                        <svg data-p-icon="window-minimize" />
+                                                    }
+                                                }
+                                                @if (showMaximizeIconTemplate()) {
+                                                    <ng-container *ngTemplateOutlet="maximizeIconTemplate()"></ng-container>
+                                                }
+                                                @if (showMinimizeIconTemplate()) {
+                                                    <ng-container *ngTemplateOutlet="minimizeIconTemplate()"></ng-container>
+                                                }
+                                            </button>
+                                        }
+                                        @if (closable()) {
+                                            <button
+                                                type="button"
+                                                iconOnly
+                                                [pButton]="closeButtonProps()"
+                                                [class]="cx('pcCloseButton')"
+                                                [tabindex]="closeTabindex()"
+                                                [attr.aria-label]="closeAriaLabel()"
+                                                [attr.data-pc-group-section]="'headericon'"
+                                                [pButtonPT]="ptm('pcCloseButton')"
+                                                [pButtonUnstyled]="unstyled()"
+                                                (click)="close($event)"
+                                                (keydown.enter)="close($event)"
+                                            >
+                                                @if (showDefaultCloseIcon) {
+                                                    @if (closeIcon()) {
+                                                        <span [class]="closeIcon()"></span>
+                                                    } @else {
+                                                        <svg data-p-icon="times" />
+                                                    }
+                                                }
+                                                @if (closeIconTemplate()) {
+                                                    <ng-container *ngTemplateOutlet="closeIconTemplate()"></ng-container>
+                                                }
+                                            </button>
+                                        }
+                                    </div>
                                 </div>
-                            </div>
-                            <div #content [class]="cn(cx('content'), contentStyleClass)" [ngStyle]="contentStyle" [pBind]="ptm('content')">
+                            }
+                            <div #content [class]="cn(cx('content'), contentStyleClass())" [style]="contentStyle()" [pBind]="ptm('content')">
                                 <ng-content></ng-content>
-                                <ng-container *ngTemplateOutlet="_contentTemplate || contentTemplate || contentT"></ng-container>
-                            </div>
-                            <div #footer [class]="cx('footer')" [pBind]="ptm('footer')" *ngIf="_footerTemplate || footerTemplate || footerT">
-                                <ng-content select="p-footer"></ng-content>
-                                <ng-container *ngTemplateOutlet="_footerTemplate || footerTemplate || footerT"></ng-container>
+                                @if (contentTemplate()) {
+                                    <ng-container *ngTemplateOutlet="contentTemplate()"></ng-container>
+                                }
                             </div>
-                        </ng-template>
+                            @if (footerTemplate()) {
+                                <div #footer [class]="cx('footer')" [pBind]="ptm('footer')">
+                                    <ng-content select="p-footer"></ng-content>
+                                    <ng-container *ngTemplateOutlet="footerTemplate()"></ng-container>
+                                </div>
+                            }
+                        }
                     </div>
                 }
             </div>
@@ -1238,166 +1214,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                     providers: [DialogStyle, { provide: DIALOG_INSTANCE, useExisting: Dialog }, { provide: PARENT_INSTANCE, useExisting: Dialog }],
                     hostDirectives: [Bind]
                 }]
-        }], propDecorators: { hostName: [{
-                type: Input
-            }], header: [{
-                type: Input
-            }], draggable: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], resizable: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], contentStyle: [{
-                type: Input
-            }], contentStyleClass: [{
-                type: Input
-            }], modal: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], closeOnEscape: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], dismissableMask: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], rtl: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], closable: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], breakpoints: [{
-                type: Input
-            }], styleClass: [{
-                type: Input
-            }], maskStyleClass: [{
-                type: Input
-            }], maskStyle: [{
-                type: Input
-            }], showHeader: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], blockScroll: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], autoZIndex: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], baseZIndex: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }], minX: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }], minY: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }], focusOnShow: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], maximizable: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], keepInViewport: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], focusTrap: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], transitionOptions: [{
-                type: Input
-            }], maskMotionOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "maskMotionOptions", required: false }] }], motionOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "motionOptions", required: false }] }], closeIcon: [{
-                type: Input
-            }], closeAriaLabel: [{
-                type: Input
-            }], closeTabindex: [{
-                type: Input
-            }], minimizeIcon: [{
-                type: Input
-            }], maximizeIcon: [{
-                type: Input
-            }], closeButtonProps: [{
-                type: Input
-            }], maximizeButtonProps: [{
-                type: Input
-            }], visible: [{
-                type: Input
-            }], style: [{
-                type: Input
-            }], position: [{
-                type: Input
-            }], role: [{
-                type: Input
-            }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], onShow: [{
-                type: Output
-            }], onHide: [{
-                type: Output
-            }], visibleChange: [{
-                type: Output
-            }], onResizeInit: [{
-                type: Output
-            }], onResizeEnd: [{
-                type: Output
-            }], onDragEnd: [{
-                type: Output
-            }], onMaximize: [{
-                type: Output
-            }], headerViewChild: [{
-                type: ViewChild,
-                args: ['titlebar']
-            }], contentViewChild: [{
-                type: ViewChild,
-                args: ['content']
-            }], footerViewChild: [{
-                type: ViewChild,
-                args: ['footer']
-            }], headerTemplate: [{
-                type: Input,
-                args: ['content']
-            }], contentTemplate: [{
-                type: Input
-            }], footerTemplate: [{
-                type: Input
-            }], closeIconTemplate: [{
-                type: Input
-            }], maximizeIconTemplate: [{
-                type: Input
-            }], minimizeIconTemplate: [{
-                type: Input
-            }], headlessTemplate: [{
-                type: Input
-            }], _headerTemplate: [{
-                type: ContentChild,
-                args: ['header', { descendants: false }]
-            }], _contentTemplate: [{
-                type: ContentChild,
-                args: ['content', { descendants: false }]
-            }], _footerTemplate: [{
-                type: ContentChild,
-                args: ['footer', { descendants: false }]
-            }], _closeiconTemplate: [{
-                type: ContentChild,
-                args: ['closeicon', { descendants: false }]
-            }], _maximizeiconTemplate: [{
-                type: ContentChild,
-                args: ['maximizeicon', { descendants: false }]
-            }], _minimizeiconTemplate: [{
-                type: ContentChild,
-                args: ['minimizeicon', { descendants: false }]
-            }], _headlessTemplate: [{
-                type: ContentChild,
-                args: ['headless', { descendants: false }]
-            }], templates: [{
-                type: ContentChildren,
-                args: [PrimeTemplate]
-            }] } });
+        }], ctorParameters: () => [], propDecorators: { hostName: [{ type: i0.Input, args: [{ isSignal: true, alias: "hostName", required: false }] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], draggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "draggable", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], contentStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentStyle", required: false }] }], contentStyleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentStyleClass", required: false }] }], modal: [{ type: i0.Input, args: [{ isSignal: true, alias: "modal", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], dismissableMask: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissableMask", required: false }] }], rtl: [{ type: i0.Input, args: [{ isSignal: true, alias: "rtl", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], breakpoints: [{ type: i0.Input, args: [{ isSignal: true, alias: "breakpoints", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], maskStyleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "maskStyleClass", required: false }] }], maskStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "maskStyle", required: false }] }], showHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHeader", required: false }] }], blockScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "blockScroll", required: false }] }], autoZIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoZIndex", required: false }] }], baseZIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "baseZIndex", required: false }] }], minX: [{ type: i0.Input, args: [{ isSignal: true, alias: "minX", required: false }] }], minY: [{ type: i0.Input, args: [{ isSignal: true, alias: "minY", required: false }] }], focusOnShow: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusOnShow", required: false }] }], maximizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "maximizable", required: false }] }], keepInViewport: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepInViewport", required: false }] }], focusTrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusTrap", required: false }] }], maskMotionOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "maskMotionOptions", required: false }] }], motionOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "motionOptions", required: false }] }], closeIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeIcon", required: false }] }], closeAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeAriaLabel", required: false }] }], closeTabindex: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeTabindex", required: false }] }], minimizeIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "minimizeIcon", required: false }] }], maximizeIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "maximizeIcon", required: false }] }], closeButtonProps: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonProps", required: false }] }], maximizeButtonProps: [{ type: i0.Input, args: [{ isSignal: true, alias: "maximizeButtonProps", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }, { type: i0.Output, args: ["visibleChange"] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], onShow: [{ type: i0.Output, args: ["onShow"] }], onHide: [{ type: i0.Output, args: ["onHide"] }], onResizeInit: [{ type: i0.Output, args: ["onResizeInit"] }], onResizeEnd: [{ type: i0.Output, args: ["onResizeEnd"] }], onDragStart: [{ type: i0.Output, args: ["onDragStart"] }], onDragEnd: [{ type: i0.Output, args: ["onDragEnd"] }], onMaximize: [{ type: i0.Output, args: ["onMaximize"] }], headerViewChild: [{ type: i0.ViewChild, args: ['titlebar', { isSignal: true }] }], contentViewChild: [{ type: i0.ViewChild, args: ['content', { isSignal: true }] }], footerViewChild: [{ type: i0.ViewChild, args: ['footer', { isSignal: true }] }], headerTemplate: [{ type: i0.ContentChild, args: ['header', { ...{ descendants: false }, isSignal: true }] }], contentTemplate: [{ type: i0.ContentChild, args: ['content', { ...{ descendants: false }, isSignal: true }] }], footerTemplate: [{ type: i0.ContentChild, args: ['footer', { ...{ descendants: false }, isSignal: true }] }], closeIconTemplate: [{ type: i0.ContentChild, args: ['closeicon', { ...{ descendants: false }, isSignal: true }] }], maximizeIconTemplate: [{ type: i0.ContentChild, args: ['maximizeicon', { ...{ descendants: false }, isSignal: true }] }], minimizeIconTemplate: [{ type: i0.ContentChild, args: ['minimizeicon', { ...{ descendants: false }, isSignal: true }] }], headlessTemplate: [{ type: i0.ContentChild, args: ['headless', { ...{ descendants: false }, isSignal: true }] }] } });
 class DialogModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: DialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.13", ngImport: i0, type: DialogModule, imports: [Dialog, SharedModule], exports: [Dialog, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: DialogModule, imports: [Dialog, SharedModule, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.5", ngImport: i0, type: DialogModule, imports: [Dialog, SharedModule], exports: [Dialog, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DialogModule, imports: [Dialog, SharedModule, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: DialogModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DialogModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [Dialog, SharedModule],