@wawjs/ngx-prime 22.0.0

package/fesm2022/wawjs-ngx-prime-dialog.mjs

@@ -0,0 +1,1355 @@
+export * from '@wawjs/ngx-prime/types/dialog';
+import * as i2 from '@angular/common';
+import { isPlatformBrowser, CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Injectable, InjectionToken, input, inject, booleanAttribute, numberAttribute, computed, model, output, viewChild, contentChild, signal, NgZone, effect, contentChildren, ContentChild, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { uuid, setAttribute, addStyle, getOuterWidth, getOuterHeight, getViewport, appendChild, removeClass, hasClass } from '@wawjs/css-prime-utils';
+import { TranslationKeys, OverlayService, PrimeTemplate, SharedModule } from '@wawjs/ngx-prime/api';
+import { BaseComponent, PARENT_INSTANCE } from '@wawjs/ngx-prime/basecomponent';
+import * as i1 from '@wawjs/ngx-prime/bind';
+import { Bind } from '@wawjs/ngx-prime/bind';
+import { Button } from '@wawjs/ngx-prime/button';
+import { DomHandler, blockBodyScroll, unblockBodyScroll } from '@wawjs/ngx-prime/dom';
+import { FocusTrap } from '@wawjs/ngx-prime/focustrap';
+import { TimesIcon, WindowMaximizeIcon, WindowMinimizeIcon } from '@wawjs/ngx-prime/icons';
+import * as i3 from '@wawjs/ngx-prime/motion';
+import { MotionModule } from '@wawjs/ngx-prime/motion';
+import { ZIndexUtils } from '@wawjs/ngx-prime/utils';
+import { style } from '@wawjs/css-prime-styles/dialog';
+import { BaseStyle } from '@wawjs/ngx-prime/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'
+    }
+};
+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}` : ''];
+    },
+    root: ({ instance }) => [
+        'p-dialog p-component',
+        {
+            'p-dialog-maximized': instance.maximizable() && instance.maximized
+        }
+    ],
+    header: 'p-dialog-header',
+    title: 'p-dialog-title',
+    resizeHandle: 'p-resizable-handle',
+    headerActions: 'p-dialog-header-actions',
+    pcMaximizeButton: 'p-dialog-maximize-button',
+    pcCloseButton: 'p-dialog-close-button',
+    content: () => ['p-dialog-content'],
+    footer: 'p-dialog-footer'
+};
+class DialogStyle extends BaseStyle {
+    name = 'dialog';
+    style = style;
+    classes = classes;
+    inlineStyles = inlineStyles;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DialogStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DialogStyle });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DialogStyle, decorators: [{
+            type: Injectable
+        }] });
+/**
+ *
+ * Dialog is a container to display content in an overlay window.
+ *
+ * [Live Demo](https://www.ngx-prime.org/dialog)
+ *
+ * @module dialogstyle
+ *
+ */
+var DialogClasses;
+(function (DialogClasses) {
+    /**
+     * Class name of the mask element
+     */
+    DialogClasses["mask"] = "p-dialog-mask";
+    /**
+     * Class name of the root element
+     */
+    DialogClasses["root"] = "p-dialog";
+    /**
+     * Class name of the header element
+     */
+    DialogClasses["header"] = "p-dialog-header";
+    /**
+     * Class name of the title element
+     */
+    DialogClasses["title"] = "p-dialog-title";
+    /**
+     * Class name of the header actions element
+     */
+    DialogClasses["headerActions"] = "p-dialog-header-actions";
+    /**
+     * Class name of the maximize button element
+     */
+    DialogClasses["pcMaximizeButton"] = "p-dialog-maximize-button";
+    /**
+     * Class name of the close button element
+     */
+    DialogClasses["pcCloseButton"] = "p-dialog-close-button";
+    /**
+     * Class name of the content element
+     */
+    DialogClasses["content"] = "p-dialog-content";
+    /**
+     * Class name of the footer element
+     */
+    DialogClasses["footer"] = "p-dialog-footer";
+})(DialogClasses || (DialogClasses = {}));
+
+const DIALOG_INSTANCE = new InjectionToken('DIALOG_INSTANCE');
+/**
+ * Dialog is a container to display content in an overlay window.
+ * @group Components
+ */
+class Dialog extends BaseComponent {
+    componentName = 'Dialog';
+    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() {
+        this.bindDirectiveInstance.setAttrs(this.ptm('host'));
+    }
+    /**
+     * Title text of the dialog.
+     * @group Props
+     */
+    header = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "header" }] : /* istanbul ignore next */ []));
+    /**
+     * Enables dragging to change the position using header.
+     * @group Props
+     */
+    draggable = input(true, { ...(ngDevMode ? { debugName: "draggable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Enables resizing of the content.
+     * @group Props
+     */
+    resizable = input(true, { ...(ngDevMode ? { debugName: "resizable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Style of the content section.
+     * @group Props
+     */
+    contentStyle = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "contentStyle" }] : /* istanbul ignore next */ []));
+    /**
+     * Style class of the content.
+     * @group Props
+     */
+    contentStyleClass = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "contentStyleClass" }] : /* istanbul ignore next */ []));
+    /**
+     * Defines if background should be blocked when dialog is displayed.
+     * @group Props
+     */
+    modal = input(false, { ...(ngDevMode ? { debugName: "modal" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Specifies if pressing escape key should hide the dialog.
+     * @group Props
+     */
+    closeOnEscape = input(true, { ...(ngDevMode ? { debugName: "closeOnEscape" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Specifies if clicking the modal background should hide the dialog.
+     * @group Props
+     */
+    dismissableMask = input(false, { ...(ngDevMode ? { debugName: "dismissableMask" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * When enabled dialog is displayed in RTL direction.
+     * @group Props
+     */
+    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 = input(true, { ...(ngDevMode ? { debugName: "closable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Object literal to define widths per screen size.
+     * @group Props
+     */
+    breakpoints = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "breakpoints" }] : /* istanbul ignore next */ []));
+    /**
+     * Style class of the component.
+     * @group Props
+     */
+    styleClass = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "styleClass" }] : /* istanbul ignore next */ []));
+    /**
+     * Style class of the mask.
+     * @group Props
+     */
+    maskStyleClass = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "maskStyleClass" }] : /* istanbul ignore next */ []));
+    /**
+     * Style of the mask.
+     * @group Props
+     */
+    maskStyle = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "maskStyle" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether to show the header or not.
+     * @group Props
+     */
+    showHeader = input(true, { ...(ngDevMode ? { debugName: "showHeader" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Whether background scroll should be blocked when dialog is visible.
+     * @group Props
+     */
+    blockScroll = input(false, { ...(ngDevMode ? { debugName: "blockScroll" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Whether to automatically manage layering.
+     * @group Props
+     */
+    autoZIndex = input(true, { ...(ngDevMode ? { debugName: "autoZIndex" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Base zIndex value to use in layering.
+     * @group Props
+     */
+    baseZIndex = input(0, { ...(ngDevMode ? { debugName: "baseZIndex" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /**
+     * Minimum value for the left coordinate of dialog in dragging.
+     * @group Props
+     */
+    minX = input(0, { ...(ngDevMode ? { debugName: "minX" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /**
+     * Minimum value for the top coordinate of dialog in dragging.
+     * @group Props
+     */
+    minY = input(0, { ...(ngDevMode ? { debugName: "minY" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /**
+     * When enabled, first focusable element receives focus on show.
+     * @group Props
+     */
+    focusOnShow = input(true, { ...(ngDevMode ? { debugName: "focusOnShow" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Whether the dialog can be displayed full screen.
+     * @group Props
+     */
+    maximizable = input(false, { ...(ngDevMode ? { debugName: "maximizable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Keeps dialog in the viewport.
+     * @group Props
+     */
+    keepInViewport = input(true, { ...(ngDevMode ? { debugName: "keepInViewport" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * When enabled, can only focus on elements inside the dialog.
+     * @group Props
+     */
+    focusTrap = input(true, { ...(ngDevMode ? { debugName: "focusTrap" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Transition options of the animation.
+     * @deprecated since v21.0.0. Use `motionOptions` instead.
+     * @group Props
+     */
+    transitionOptions = input('150ms cubic-bezier(0, 0, 0.2, 1)', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "transitionOptions" }] : /* istanbul ignore next */ []));
+    /**
+     * The motion options for the mask.
+     * @group Props
+     */
+    maskMotionOptions = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maskMotionOptions" }] : /* istanbul ignore next */ []));
+    computedMaskMotionOptions = computed(() => ({
+        ...this.ptm('maskMotion'),
+        ...this.maskMotionOptions()
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedMaskMotionOptions" }] : /* istanbul ignore next */ []));
+    /**
+     * The motion options.
+     * @group Props
+     */
+    motionOptions = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "motionOptions" }] : /* istanbul ignore next */ []));
+    computedMotionOptions = computed(() => ({
+        ...this.ptm('motion'),
+        ...this.motionOptions()
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedMotionOptions" }] : /* istanbul ignore next */ []));
+    /**
+     * Name of the close icon.
+     * @group Props
+     */
+    closeIcon = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "closeIcon" }] : /* istanbul ignore next */ []));
+    /**
+     * Defines a string that labels the close button for accessibility.
+     * @group Props
+     */
+    closeAriaLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "closeAriaLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Index of the close button in tabbing order.
+     * @group Props
+     */
+    closeTabindex = input('0', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "closeTabindex" }] : /* istanbul ignore next */ []));
+    /**
+     * Name of the minimize icon.
+     * @group Props
+     */
+    minimizeIcon = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "minimizeIcon" }] : /* istanbul ignore next */ []));
+    /**
+     * Name of the maximize icon.
+     * @group Props
+     */
+    maximizeIcon = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "maximizeIcon" }] : /* istanbul ignore next */ []));
+    /**
+     * Used to pass all properties of the ButtonProps to the Button component.
+     * @group Props
+     */
+    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.
+     * @group Props
+     */
+    maximizeButtonProps = input({
+        severity: 'secondary',
+        variant: 'text',
+        rounded: true
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maximizeButtonProps" }] : /* istanbul ignore next */ []));
+    /**
+     * Specifies the visibility of the dialog.
+     * @group Props
+     */
+    visible = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+    /**
+     * Inline style of the component.
+     * @group Props
+     */
+    style = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "style" }] : /* istanbul ignore next */ []));
+    /**
+     * Position of the dialog.
+     * @group Props
+     */
+    position = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    /**
+     * Role attribute of html element.
+     * @group Emits
+     */
+    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, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appendTo" }] : /* istanbul ignore next */ []));
+    /**
+     * Callback to invoke when dialog is shown.
+     * @group Emits
+     */
+    onShow = output();
+    /**
+     * Callback to invoke when dialog is hidden.
+     * @group Emits
+     */
+    onHide = output();
+    /**
+     * Callback to invoke when dialog resizing is initiated.
+     * @param {MouseEvent} event - Mouse event.
+     * @group Emits
+     */
+    onResizeInit = output();
+    /**
+     * Callback to invoke when dialog resizing is completed.
+     * @param {MouseEvent} event - Mouse event.
+     * @group Emits
+     */
+    onResizeEnd = output();
+    /**
+     * Callback to invoke when dialog dragging is completed.
+     * @param {DragEvent} event - Drag event.
+     * @group Emits
+     */
+    onDragEnd = output();
+    /**
+     * Callback to invoke when dialog maximized or unmaximized.
+     * @group Emits
+     */
+    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 */ []));
+    /**
+     * Header template.
+     * @group Templates
+     */
+    headerTemplate = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "headerTemplate" }] : /* istanbul ignore next */ []));
+    /**
+     * Content template.
+     * @group Templates
+     */
+    contentTemplate = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "contentTemplate" }] : /* istanbul ignore next */ []));
+    /**
+     * Footer template.
+     * @group Templates
+     */
+    footerTemplate = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "footerTemplate" }] : /* istanbul ignore next */ []));
+    /**
+     * Close icon template.
+     * @group Templates
+     */
+    closeIconTemplate = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "closeIconTemplate" }] : /* istanbul ignore next */ []));
+    /**
+     * Maximize icon template.
+     * @group Templates
+     */
+    maximizeIconTemplate = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "maximizeIconTemplate" }] : /* istanbul ignore next */ []));
+    /**
+     * Minimize icon template.
+     * @group Templates
+     */
+    minimizeIconTemplate = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "minimizeIconTemplate" }] : /* istanbul ignore next */ []));
+    /**
+     * Headless template.
+     * @group Templates
+     */
+    headlessTemplate = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "headlessTemplate" }] : /* istanbul ignore next */ []));
+    /**
+     * Custom header template.
+     * @group Templates
+     */
+    _headerTemplate = contentChild('header', { ...(ngDevMode ? { debugName: "_headerTemplate" } : /* istanbul ignore next */ {}), descendants: false });
+    /**
+     * Custom content template.
+     * @group Templates
+     */
+    _contentTemplate = contentChild('content', { ...(ngDevMode ? { debugName: "_contentTemplate" } : /* istanbul ignore next */ {}), descendants: false });
+    /**
+     * Custom footer template.
+     * @group Templates
+     */
+    _footerTemplate;
+    /**
+     * Custom close icon template.
+     * @group Templates
+     */
+    _closeiconTemplate;
+    /**
+     * Custom maximize icon template.
+     * @group Templates
+     */
+    _maximizeiconTemplate = contentChild('maximizeicon', { ...(ngDevMode ? { debugName: "_maximizeiconTemplate" } : /* istanbul ignore next */ {}), descendants: false });
+    /**
+     * Custom minimize icon template.
+     * @group Templates
+     */
+    _minimizeiconTemplate = contentChild('minimizeicon', { ...(ngDevMode ? { debugName: "_minimizeiconTemplate" } : /* istanbul ignore next */ {}), descendants: false });
+    /**
+     * Custom headless template.
+     * @group Templates
+     */
+    _headlessTemplate;
+    $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 */ []));
+    _visible = false;
+    maskVisible;
+    container = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "container" }] : /* istanbul ignore next */ []));
+    wrapper;
+    dragging;
+    ariaLabelledBy = this.getAriaLabelledBy();
+    documentDragListener;
+    documentDragEndListener;
+    resizing;
+    documentResizeListener;
+    documentResizeEndListener;
+    documentEscapeListener;
+    maskClickListener;
+    lastPageX;
+    lastPageY;
+    preventVisibleChangePropagation;
+    maximized;
+    preMaximizeContentHeight;
+    preMaximizeContainerWidth;
+    preMaximizeContainerHeight;
+    preMaximizePageX;
+    preMaximizePageY;
+    id = uuid('pn_id_');
+    _style = {};
+    originalStyle;
+    transformOptions = 'scale(0.7)';
+    styleElement;
+    window;
+    _componentStyle = inject(DialogStyle);
+    headerT;
+    contentT;
+    footerT;
+    closeIconT;
+    maximizeIconT;
+    minimizeIconT;
+    headlessT;
+    zIndexForLayering;
+    get maximizeLabel() {
+        return this.config.getTranslation(TranslationKeys.ARIA)['maximizeLabel'];
+    }
+    get minimizeLabel() {
+        return this.config.getTranslation(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
+        };
+    }
+    constructor() {
+        super();
+        effect(() => {
+            this._visible = this.visible();
+            if (this._visible && !this.maskVisible) {
+                this.maskVisible = true;
+                this.renderMask.set(true);
+                this.renderDialog.set(true);
+            }
+        });
+        effect(() => {
+            const value = this.style();
+            if (value) {
+                this._style = { ...value };
+                this.originalStyle = value;
+            }
+        });
+    }
+    onInit() {
+        if (this.breakpoints()) {
+            this.createStyle();
+        }
+    }
+    templates = contentChildren(PrimeTemplate, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "templates" }] : /* istanbul ignore next */ []));
+    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);
+                });
+                return true;
+            }
+        }
+        return false;
+    }
+    focus(focusParentElement = this.contentViewChild()?.nativeElement) {
+        let focused = this._focus(focusParentElement);
+        if (!focused) {
+            focused = this._focus(this.footerViewChild()?.nativeElement);
+            if (!focused) {
+                focused = this._focus(this.headerViewChild()?.nativeElement);
+                if (!focused) {
+                    this._focus(this.contentViewChild()?.nativeElement);
+                }
+            }
+        }
+    }
+    close(event) {
+        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.close(event);
+                }
+            });
+        }
+        if (this.modal()) {
+            blockBodyScroll();
+        }
+    }
+    disableModality() {
+        if (this.wrapper) {
+            if (this.dismissableMask()) {
+                this.unbindMaskClickListener();
+            }
+            // for nested dialogs w/modal
+            const scrollBlockers = document.querySelectorAll('[data-p-scrollblocker-active="true"]');
+            if (this.modal() && scrollBlockers && scrollBlockers.length == 1) {
+                unblockBodyScroll();
+            }
+            if (!this.cd.destroyed) {
+                this.cd.detectChanges();
+            }
+        }
+    }
+    maximize() {
+        this.maximized = !this.maximized;
+        if (!this.modal() && !this.blockScroll()) {
+            if (this.maximized) {
+                blockBodyScroll();
+            }
+            else {
+                unblockBodyScroll();
+            }
+        }
+        this.onMaximize.emit({ maximized: this.maximized });
+    }
+    unbindMaskClickListener() {
+        if (this.maskClickListener) {
+            this.maskClickListener();
+            this.maskClickListener = null;
+        }
+    }
+    moveOnTop() {
+        if (this.autoZIndex()) {
+            ZIndexUtils.set('modal', this.container(), this.baseZIndex() + this.config.zIndex.modal);
+            this.wrapper.style.zIndex = String(parseInt(this.container().style.zIndex, 10) - 1);
+        }
+        else {
+            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);
+                let innerHTML = '';
+                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;
+                            }
+                        }
+                    `;
+                }
+                this.renderer.setProperty(this.styleElement, 'innerHTML', innerHTML);
+                setAttribute(this.styleElement, 'nonce', this.config?.csp()?.nonce);
+            }
+        }
+    }
+    initDrag(event) {
+        const target = event.target;
+        const closestDiv = target.closest('div');
+        if (closestDiv?.getAttribute('data-pc-section') === 'headeractions') {
+            return;
+        }
+        if (this.draggable()) {
+            this.dragging = true;
+            this.lastPageX = event.pageX;
+            this.lastPageY = event.pageY;
+            this.container().style.margin = '0';
+            this.document.body.setAttribute('data-p-unselectable-text', 'true');
+            !this.$unstyled() && addStyle(this.document.body, { 'user-select': 'none' });
+        }
+    }
+    onDrag(event) {
+        if (this.dragging && this.container()) {
+            const containerWidth = getOuterWidth(this.container());
+            const containerHeight = getOuterHeight(this.container());
+            const deltaX = event.pageX - this.lastPageX;
+            const deltaY = event.pageY - this.lastPageY;
+            const offset = this.container().getBoundingClientRect();
+            const containerComputedStyle = getComputedStyle(this.container());
+            const leftMargin = parseFloat(containerComputedStyle.marginLeft);
+            const topMargin = parseFloat(containerComputedStyle.marginTop);
+            const leftPos = offset.left + deltaX - leftMargin;
+            const topPos = offset.top + deltaY - topMargin;
+            const viewport = getViewport();
+            this.container().style.position = 'fixed';
+            if (this.keepInViewport()) {
+                if (leftPos >= this.minX() && leftPos + containerWidth < viewport.width) {
+                    this._style.left = `${leftPos}px`;
+                    this.lastPageX = event.pageX;
+                    this.container().style.left = `${leftPos}px`;
+                }
+                if (topPos >= this.minY() && topPos + containerHeight < viewport.height) {
+                    this._style.top = `${topPos}px`;
+                    this.lastPageY = event.pageY;
+                    this.container().style.top = `${topPos}px`;
+                }
+            }
+            else {
+                this.lastPageX = event.pageX;
+                this.container().style.left = `${leftPos}px`;
+                this.lastPageY = event.pageY;
+                this.container().style.top = `${topPos}px`;
+            }
+            this.overlayService.emitParentDrag(this.container());
+        }
+    }
+    endDrag(event) {
+        if (this.dragging) {
+            this.dragging = false;
+            this.document.body.removeAttribute('data-p-unselectable-text');
+            !this.$unstyled() && (this.document.body.style['user-select'] = '');
+            this.cd.detectChanges();
+            this.onDragEnd.emit(event);
+        }
+    }
+    resetPosition() {
+        this.container().style.position = '';
+        this.container().style.left = '';
+        this.container().style.top = '';
+        this.container().style.margin = '';
+    }
+    //backward compatibility
+    center() {
+        this.resetPosition();
+    }
+    initResize(event) {
+        if (this.resizable()) {
+            this.resizing = true;
+            this.lastPageX = event.pageX;
+            this.lastPageY = event.pageY;
+            this.document.body.setAttribute('data-p-unselectable-text', 'true');
+            !this.$unstyled() && addStyle(this.document.body, { 'user-select': 'none' });
+            this.onResizeInit.emit(event);
+        }
+    }
+    onResize(event) {
+        if (this.resizing) {
+            let deltaX = event.pageX - this.lastPageX;
+            let deltaY = event.pageY - this.lastPageY;
+            let containerWidth = getOuterWidth(this.container());
+            let containerHeight = getOuterHeight(this.container());
+            const contentViewChild = this.contentViewChild();
+            let contentHeight = getOuterHeight(contentViewChild?.nativeElement);
+            let newWidth = containerWidth + deltaX;
+            let newHeight = containerHeight + deltaY;
+            let minWidth = this.container().style.minWidth;
+            let minHeight = this.container().style.minHeight;
+            let offset = this.container().getBoundingClientRect();
+            let viewport = getViewport();
+            let hasBeenDragged = !parseInt(this.container().style.top) || !parseInt(this.container().style.left);
+            if (hasBeenDragged) {
+                newWidth += deltaX;
+                newHeight += deltaY;
+            }
+            if ((!minWidth || newWidth > parseInt(minWidth)) && offset.left + newWidth < viewport.width) {
+                this._style.width = newWidth + 'px';
+                this.container().style.width = this._style.width;
+            }
+            if ((!minHeight || newHeight > parseInt(minHeight)) && offset.top + newHeight < viewport.height) {
+                contentViewChild.nativeElement.style.height = contentHeight + newHeight - containerHeight + 'px';
+                if (this._style.height) {
+                    this._style.height = newHeight + 'px';
+                    this.container().style.height = this._style.height;
+                }
+            }
+            this.lastPageX = event.pageX;
+            this.lastPageY = event.pageY;
+        }
+    }
+    resizeEnd(event) {
+        if (this.resizing) {
+            this.resizing = false;
+            this.document.body.removeAttribute('data-p-unselectable-text');
+            !this.$unstyled() && (this.document.body.style['user-select'] = '');
+            this.onResizeEnd.emit(event);
+        }
+    }
+    bindGlobalListeners() {
+        if (this.draggable()) {
+            this.bindDocumentDragListener();
+            this.bindDocumentDragEndListener();
+        }
+        if (this.resizable()) {
+            this.bindDocumentResizeListeners();
+        }
+        if (this.closeOnEscape() && this.closable()) {
+            this.bindDocumentEscapeListener();
+        }
+    }
+    unbindGlobalListeners() {
+        this.unbindDocumentDragListener();
+        this.unbindDocumentDragEndListener();
+        this.unbindDocumentResizeListeners();
+        this.unbindDocumentEscapeListener();
+    }
+    bindDocumentDragListener() {
+        if (!this.documentDragListener) {
+            this.zone.runOutsideAngular(() => {
+                this.documentDragListener = this.renderer.listen(this.document.defaultView, 'mousemove', this.onDrag.bind(this));
+            });
+        }
+    }
+    unbindDocumentDragListener() {
+        if (this.documentDragListener) {
+            this.documentDragListener();
+            this.documentDragListener = null;
+        }
+    }
+    bindDocumentDragEndListener() {
+        if (!this.documentDragEndListener) {
+            this.zone.runOutsideAngular(() => {
+                this.documentDragEndListener = this.renderer.listen(this.document.defaultView, 'mouseup', this.endDrag.bind(this));
+            });
+        }
+    }
+    unbindDocumentDragEndListener() {
+        if (this.documentDragEndListener) {
+            this.documentDragEndListener();
+            this.documentDragEndListener = null;
+        }
+    }
+    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));
+            });
+        }
+    }
+    unbindDocumentResizeListeners() {
+        if (this.documentResizeListener && this.documentResizeEndListener) {
+            this.documentResizeListener();
+            this.documentResizeEndListener();
+            this.documentResizeListener = null;
+            this.documentResizeEndListener = null;
+        }
+    }
+    bindDocumentEscapeListener() {
+        const documentTarget = this.el ? this.el.nativeElement.ownerDocument : 'document';
+        this.documentEscapeListener = this.renderer.listen(documentTarget, 'keydown', (event) => {
+            if (event.key == 'Escape') {
+                const container = this.container();
+                if (!container) {
+                    return;
+                }
+                const currentZIndex = ZIndexUtils.getCurrent();
+                if (parseInt(container.style.zIndex) == currentZIndex || this.zIndexForLayering == currentZIndex) {
+                    this.close(event);
+                }
+            }
+        });
+    }
+    unbindDocumentEscapeListener() {
+        if (this.documentEscapeListener) {
+            this.documentEscapeListener();
+            this.documentEscapeListener = null;
+        }
+    }
+    appendContainer() {
+        if (this.$appendTo() !== 'self') {
+            appendChild(this.document.body, this.wrapper);
+        }
+    }
+    restoreAppend() {
+        if (this.container() && this.$appendTo() !== 'self') {
+            this.renderer.appendChild(this.el.nativeElement, this.wrapper);
+        }
+    }
+    onBeforeEnter(event) {
+        this.container.set(event.element);
+        this.wrapper = this.container()?.parentElement;
+        this.$attrSelector && this.container()?.setAttribute(this.$attrSelector, '');
+        this.appendContainer();
+        this.moveOnTop();
+        this.bindGlobalListeners();
+        this.container()?.setAttribute(this.id, '');
+        if (this.modal()) {
+            this.enableModality();
+        }
+    }
+    onAfterEnter() {
+        if (this.focusOnShow()) {
+            this.focus();
+        }
+        this.onShow.emit({});
+    }
+    onBeforeLeave() {
+        if (this.modal()) {
+            this.maskVisible = false;
+        }
+    }
+    onAfterLeave() {
+        this.onContainerDestroy();
+        this.renderDialog.set(false);
+        if (this.modal()) {
+            this.renderMask.set(false);
+        }
+        else {
+            this.maskVisible = false;
+        }
+        this.onHide.emit({});
+        this.cd.markForCheck();
+    }
+    onMaskAfterLeave() {
+        if (!this.renderDialog()) {
+            this.renderMask.set(false);
+        }
+    }
+    onContainerDestroy() {
+        this.unbindGlobalListeners();
+        this.dragging = false;
+        if (this.maximized) {
+            removeClass(this.document.body, 'p-overflow-hidden');
+            this.document.body.style.removeProperty('--scrollbar-width');
+            this.maximized = false;
+        }
+        if (this.modal()) {
+            this.disableModality();
+        }
+        if (hasClass(this.document.body, 'p-overflow-hidden')) {
+            removeClass(this.document.body, 'p-overflow-hidden');
+        }
+        if (this.container() && this.autoZIndex()) {
+            ZIndexUtils.clear(this.container());
+        }
+        if (this.zIndexForLayering) {
+            ZIndexUtils.revertZIndex(this.zIndexForLayering);
+        }
+        this.container.set(null);
+        this.wrapper = null;
+        this._style = this.originalStyle ? { ...this.originalStyle } : {};
+    }
+    destroyStyle() {
+        if (this.styleElement) {
+            this.renderer.removeChild(this.document.head, this.styleElement);
+            this.styleElement = null;
+        }
+    }
+    onDestroy() {
+        if (this.container()) {
+            this.restoreAppend();
+            this.onContainerDestroy();
+        }
+        this.destroyStyle();
+    }
+    get dataP() {
+        return this.cn({
+            maximized: this.maximized,
+            modal: this.modal()
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: Dialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", 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 }, transitionOptions: { classPropertyName: "transitionOptions", publicName: "transitionOptions", 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 }, headerTemplate: { classPropertyName: "headerTemplate", publicName: "headerTemplate", isSignal: true, isRequired: false, transformFunction: null }, contentTemplate: { classPropertyName: "contentTemplate", publicName: "contentTemplate", isSignal: true, isRequired: false, transformFunction: null }, footerTemplate: { classPropertyName: "footerTemplate", publicName: "footerTemplate", isSignal: true, isRequired: false, transformFunction: null }, closeIconTemplate: { classPropertyName: "closeIconTemplate", publicName: "closeIconTemplate", isSignal: true, isRequired: false, transformFunction: null }, maximizeIconTemplate: { classPropertyName: "maximizeIconTemplate", publicName: "maximizeIconTemplate", isSignal: true, isRequired: false, transformFunction: null }, minimizeIconTemplate: { classPropertyName: "minimizeIconTemplate", publicName: "minimizeIconTemplate", isSignal: true, isRequired: false, transformFunction: null }, headlessTemplate: { classPropertyName: "headlessTemplate", publicName: "headlessTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange", onShow: "onShow", onHide: "onHide", 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"], isSignal: true }, { propertyName: "_contentTemplate", first: true, predicate: ["content"], isSignal: true }, { propertyName: "_maximizeiconTemplate", first: true, predicate: ["maximizeicon"], isSignal: true }, { propertyName: "_minimizeiconTemplate", first: true, predicate: ["minimizeicon"], isSignal: true }, { propertyName: "templates", predicate: PrimeTemplate, isSignal: true }, { propertyName: "_footerTemplate", first: true, predicate: ["footer"] }, { propertyName: "_closeiconTemplate", first: true, predicate: ["closeicon"] }, { propertyName: "_headlessTemplate", first: true, predicate: ["headless"] }], 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())"
+                [style]="sx('mask')"
+                [ngStyle]="maskStyle()"
+                [pBind]="ptm('mask')"
+                [pMotion]="maskVisible"
+                [pMotionAppear]="true"
+                [pMotionEnterActiveClass]="modal() ? 'p-overlay-mask-enter-active' : ''"
+                [pMotionLeaveActiveClass]="modal() ? 'p-overlay-mask-leave-active' : ''"
+                [pMotionOptions]="computedMaskMotionOptions()"
+                (pMotionOnAfterLeave)="onMaskAfterLeave()"
+                [attr.data-p-scrollblocker-active]="modal() || blockScroll()"
+                [attr.data-p]="dataP"
+            >
+                @if (renderDialog()) {
+                    <div
+                        #container
+                        [class]="cn(cx('root'), styleClass())"
+                        [style]="sx('root')"
+                        [ngStyle]="_style"
+                        [pBind]="ptm('root')"
+                        pFocusTrap
+                        [pFocusTrapDisabled]="focusTrap() === false"
+                        [pMotion]="visible()"
+                        [pMotionAppear]="true"
+                        [pMotionName]="'p-dialog'"
+                        [pMotionOptions]="computedMotionOptions()"
+                        (pMotionOnBeforeEnter)="onBeforeEnter($event)"
+                        (pMotionOnAfterEnter)="onAfterEnter($event)"
+                        (pMotionOnBeforeLeave)="onBeforeLeave($event)"
+                        (pMotionOnAfterLeave)="onAfterLeave($event)"
+                        [attr.role]="role()"
+                        [attr.aria-labelledby]="ariaLabelledBy"
+                        [attr.aria-modal]="true"
+                        [attr.data-p]="dataP"
+                    >
+                        @if (_headlessTemplate || headlessTemplate() || headlessT) {
+                            <ng-container *ngTemplateOutlet="_headlessTemplate || headlessTemplate() || headlessT"></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() && !headerTemplate() && !headerT) {
+                                        <span [id]="ariaLabelledBy" [class]="cx('title')" [pBind]="ptm('title')">{{ header() }}</span>
+                                    }
+                                    <ng-container *ngTemplateOutlet="_headerTemplate() || headerTemplate() || headerT; context: { ariaLabelledBy: ariaLabelledBy }"></ng-container>
+                                    <div [class]="cx('headerActions')" [pBind]="ptm('headerActions')">
+                                        @if (maximizable()) {
+                                            <p-button
+                                                [pt]="ptm('pcMaximizeButton')"
+                                                [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>
+                                                    @if (maximizeIcon() && !_maximizeiconTemplate() && !_minimizeiconTemplate()) {
+                                                        <span [ngClass]="maximized ? minimizeIcon() : maximizeIcon()"></span>
+                                                    }
+                                                    @if (!maximizeIcon() && !maximizeButtonProps()?.icon) {
+                                                        <ng-container>
+                                                            @if (!maximized && !_maximizeiconTemplate() && !maximizeIconTemplate() && !maximizeIconT) {
+                                                                <svg data-p-icon="window-maximize" />
+                                                            }
+                                                            @if (maximized && !_minimizeiconTemplate() && !minimizeIconTemplate() && !minimizeIconT) {
+                                                                <svg data-p-icon="window-minimize" />
+                                                            }
+                                                        </ng-container>
+                                                    }
+                                                    @if (!maximized) {
+                                                        <ng-container>
+                                                            <ng-template *ngTemplateOutlet="_maximizeiconTemplate() || maximizeIconTemplate() || maximizeIconT"></ng-template>
+                                                        </ng-container>
+                                                    }
+                                                    @if (maximized) {
+                                                        <ng-container>
+                                                            <ng-template *ngTemplateOutlet="_minimizeiconTemplate() || minimizeIconTemplate() || minimizeIconT"></ng-template>
+                                                        </ng-container>
+                                                    }
+                                                </ng-template>
+                                            </p-button>
+                                        }
+                                        @if (closable()) {
+                                            <p-button
+                                                [pt]="ptm('pcCloseButton')"
+                                                [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>
+                                                    @if (!_closeiconTemplate && !closeIconTemplate() && !closeIconT && !closeButtonProps()?.icon) {
+                                                        <ng-container>
+                                                            @if (closeIcon()) {
+                                                                <span [class]="closeIcon()"></span>
+                                                            }
+                                                            @if (!closeIcon()) {
+                                                                <svg data-p-icon="times" />
+                                                            }
+                                                        </ng-container>
+                                                    }
+                                                    @if (_closeiconTemplate || closeIconTemplate() || closeIconT) {
+                                                        <span>
+                                                            <ng-template *ngTemplateOutlet="_closeiconTemplate || closeIconTemplate() || closeIconT"></ng-template>
+                                                        </span>
+                                                    }
+                                                </ng-template>
+                                            </p-button>
+                                        }
+                                    </div>
+                                </div>
+                            }
+                            <div #content [class]="cn(cx('content'), contentStyleClass())" [ngStyle]="contentStyle()" [pBind]="ptm('content')">
+                                <ng-content></ng-content>
+                                <ng-container *ngTemplateOutlet="_contentTemplate() || contentTemplate() || contentT"></ng-container>
+                            </div>
+                            @if (_footerTemplate || footerTemplate() || footerT) {
+                                <div #footer [class]="cx('footer')" [pBind]="ptm('footer')">
+                                    <ng-content select="p-footer"></ng-content>
+                                    <ng-container *ngTemplateOutlet="_footerTemplate || footerTemplate() || footerT"></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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: FocusTrap, selector: "[pFocusTrap]", inputs: ["pFocusTrapDisabled"] }, { kind: "component", type: TimesIcon, selector: "[data-p-icon=\"times\"]" }, { kind: "component", type: WindowMaximizeIcon, selector: "[data-p-icon=\"window-maximize\"]" }, { kind: "component", type: WindowMinimizeIcon, selector: "[data-p-icon=\"window-minimize\"]" }, { kind: "ngmodule", type: SharedModule }, { kind: "directive", type: Bind, selector: "[pBind]", inputs: ["pBind"] }, { kind: "ngmodule", type: MotionModule }, { kind: "directive", type: i3.MotionDirective, selector: "[pMotion]", inputs: ["pMotion", "pMotionName", "pMotionType", "pMotionSafe", "pMotionDisabled", "pMotionAppear", "pMotionEnter", "pMotionLeave", "pMotionDuration", "pMotionHideStrategy", "pMotionEnterFromClass", "pMotionEnterToClass", "pMotionEnterActiveClass", "pMotionLeaveFromClass", "pMotionLeaveToClass", "pMotionLeaveActiveClass", "pMotionOptions"], outputs: ["pMotionOnBeforeEnter", "pMotionOnEnter", "pMotionOnAfterEnter", "pMotionOnEnterCancelled", "pMotionOnBeforeLeave", "pMotionOnLeave", "pMotionOnAfterLeave", "pMotionOnLeaveCancelled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: Dialog, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'p-dialog',
+                    standalone: true,
+                    imports: [CommonModule, Button, FocusTrap, TimesIcon, WindowMaximizeIcon, WindowMinimizeIcon, SharedModule, Bind, MotionModule],
+                    template: `
+        @if (renderMask()) {
+            <div
+                [class]="cn(cx('mask'), maskStyleClass())"
+                [style]="sx('mask')"
+                [ngStyle]="maskStyle()"
+                [pBind]="ptm('mask')"
+                [pMotion]="maskVisible"
+                [pMotionAppear]="true"
+                [pMotionEnterActiveClass]="modal() ? 'p-overlay-mask-enter-active' : ''"
+                [pMotionLeaveActiveClass]="modal() ? 'p-overlay-mask-leave-active' : ''"
+                [pMotionOptions]="computedMaskMotionOptions()"
+                (pMotionOnAfterLeave)="onMaskAfterLeave()"
+                [attr.data-p-scrollblocker-active]="modal() || blockScroll()"
+                [attr.data-p]="dataP"
+            >
+                @if (renderDialog()) {
+                    <div
+                        #container
+                        [class]="cn(cx('root'), styleClass())"
+                        [style]="sx('root')"
+                        [ngStyle]="_style"
+                        [pBind]="ptm('root')"
+                        pFocusTrap
+                        [pFocusTrapDisabled]="focusTrap() === false"
+                        [pMotion]="visible()"
+                        [pMotionAppear]="true"
+                        [pMotionName]="'p-dialog'"
+                        [pMotionOptions]="computedMotionOptions()"
+                        (pMotionOnBeforeEnter)="onBeforeEnter($event)"
+                        (pMotionOnAfterEnter)="onAfterEnter($event)"
+                        (pMotionOnBeforeLeave)="onBeforeLeave($event)"
+                        (pMotionOnAfterLeave)="onAfterLeave($event)"
+                        [attr.role]="role()"
+                        [attr.aria-labelledby]="ariaLabelledBy"
+                        [attr.aria-modal]="true"
+                        [attr.data-p]="dataP"
+                    >
+                        @if (_headlessTemplate || headlessTemplate() || headlessT) {
+                            <ng-container *ngTemplateOutlet="_headlessTemplate || headlessTemplate() || headlessT"></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() && !headerTemplate() && !headerT) {
+                                        <span [id]="ariaLabelledBy" [class]="cx('title')" [pBind]="ptm('title')">{{ header() }}</span>
+                                    }
+                                    <ng-container *ngTemplateOutlet="_headerTemplate() || headerTemplate() || headerT; context: { ariaLabelledBy: ariaLabelledBy }"></ng-container>
+                                    <div [class]="cx('headerActions')" [pBind]="ptm('headerActions')">
+                                        @if (maximizable()) {
+                                            <p-button
+                                                [pt]="ptm('pcMaximizeButton')"
+                                                [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>
+                                                    @if (maximizeIcon() && !_maximizeiconTemplate() && !_minimizeiconTemplate()) {
+                                                        <span [ngClass]="maximized ? minimizeIcon() : maximizeIcon()"></span>
+                                                    }
+                                                    @if (!maximizeIcon() && !maximizeButtonProps()?.icon) {
+                                                        <ng-container>
+                                                            @if (!maximized && !_maximizeiconTemplate() && !maximizeIconTemplate() && !maximizeIconT) {
+                                                                <svg data-p-icon="window-maximize" />
+                                                            }
+                                                            @if (maximized && !_minimizeiconTemplate() && !minimizeIconTemplate() && !minimizeIconT) {
+                                                                <svg data-p-icon="window-minimize" />
+                                                            }
+                                                        </ng-container>
+                                                    }
+                                                    @if (!maximized) {
+                                                        <ng-container>
+                                                            <ng-template *ngTemplateOutlet="_maximizeiconTemplate() || maximizeIconTemplate() || maximizeIconT"></ng-template>
+                                                        </ng-container>
+                                                    }
+                                                    @if (maximized) {
+                                                        <ng-container>
+                                                            <ng-template *ngTemplateOutlet="_minimizeiconTemplate() || minimizeIconTemplate() || minimizeIconT"></ng-template>
+                                                        </ng-container>
+                                                    }
+                                                </ng-template>
+                                            </p-button>
+                                        }
+                                        @if (closable()) {
+                                            <p-button
+                                                [pt]="ptm('pcCloseButton')"
+                                                [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>
+                                                    @if (!_closeiconTemplate && !closeIconTemplate() && !closeIconT && !closeButtonProps()?.icon) {
+                                                        <ng-container>
+                                                            @if (closeIcon()) {
+                                                                <span [class]="closeIcon()"></span>
+                                                            }
+                                                            @if (!closeIcon()) {
+                                                                <svg data-p-icon="times" />
+                                                            }
+                                                        </ng-container>
+                                                    }
+                                                    @if (_closeiconTemplate || closeIconTemplate() || closeIconT) {
+                                                        <span>
+                                                            <ng-template *ngTemplateOutlet="_closeiconTemplate || closeIconTemplate() || closeIconT"></ng-template>
+                                                        </span>
+                                                    }
+                                                </ng-template>
+                                            </p-button>
+                                        }
+                                    </div>
+                                </div>
+                            }
+                            <div #content [class]="cn(cx('content'), contentStyleClass())" [ngStyle]="contentStyle()" [pBind]="ptm('content')">
+                                <ng-content></ng-content>
+                                <ng-container *ngTemplateOutlet="_contentTemplate() || contentTemplate() || contentT"></ng-container>
+                            </div>
+                            @if (_footerTemplate || footerTemplate() || footerT) {
+                                <div #footer [class]="cx('footer')" [pBind]="ptm('footer')">
+                                    <ng-content select="p-footer"></ng-content>
+                                    <ng-container *ngTemplateOutlet="_footerTemplate || footerTemplate() || footerT"></ng-container>
+                                </div>
+                            }
+                        }
+                    </div>
+                }
+            </div>
+        }
+    `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    providers: [DialogStyle, { provide: DIALOG_INSTANCE, useExisting: Dialog }, { provide: PARENT_INSTANCE, useExisting: Dialog }],
+                    hostDirectives: [Bind]
+                }]
+        }], 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 }] }], transitionOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "transitionOptions", 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"] }], 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.Input, args: [{ isSignal: true, alias: "headerTemplate", required: false }] }], contentTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentTemplate", required: false }] }], footerTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerTemplate", required: false }] }], closeIconTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeIconTemplate", required: false }] }], maximizeIconTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maximizeIconTemplate", required: false }] }], minimizeIconTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minimizeIconTemplate", required: false }] }], headlessTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "headlessTemplate", required: false }] }], _headerTemplate: [{ type: i0.ContentChild, args: ['header', { ...{ descendants: false }, isSignal: true }] }], _contentTemplate: [{ type: i0.ContentChild, args: ['content', { ...{ descendants: false }, isSignal: true }] }], _footerTemplate: [{
+                type: ContentChild,
+                args: ['footer', { descendants: false }]
+            }], _closeiconTemplate: [{
+                type: ContentChild,
+                args: ['closeicon', { descendants: false }]
+            }], _maximizeiconTemplate: [{ type: i0.ContentChild, args: ['maximizeicon', { ...{ descendants: false }, isSignal: true }] }], _minimizeiconTemplate: [{ type: i0.ContentChild, args: ['minimizeicon', { ...{ descendants: false }, isSignal: true }] }], _headlessTemplate: [{
+                type: ContentChild,
+                args: ['headless', { descendants: false }]
+            }], templates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => PrimeTemplate), { isSignal: true }] }] } });
+class DialogModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.2", ngImport: i0, type: DialogModule, imports: [Dialog, SharedModule], exports: [Dialog, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DialogModule, imports: [Dialog, SharedModule, SharedModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DialogModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [Dialog, SharedModule],
+                    exports: [Dialog, SharedModule]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Dialog, DialogClasses, DialogModule, DialogStyle };
+//# sourceMappingURL=wawjs-ngx-prime-dialog.mjs.map