cax-design-system 1.0.0

package/fesm2022/cax-design-system-dialog.mjs

@@ -0,0 +1,1175 @@
+import { animation, style, animate, trigger, transition, useAnimation } from '@angular/animations';
+import * as i2 from '@angular/common';
+import { isPlatformBrowser, DOCUMENT, CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { EventEmitter, PLATFORM_ID, booleanAttribute, numberAttribute, Component, ChangeDetectionStrategy, ViewEncapsulation, Inject, Input, Output, ContentChild, ContentChildren, ViewChild, NgModule } from '@angular/core';
+import * as i1 from 'cax-design-system/api';
+import { TranslationKeys, Header, Footer, CaxTemplate, SharedModule } from 'cax-design-system/api';
+import { DomHandler } from 'cax-design-system/dom';
+import * as i3 from 'cax-design-system/focustrap';
+import { FocusTrapModule } from 'cax-design-system/focustrap';
+import { TimesIcon } from 'cax-design-system/icons/times';
+import { WindowMaximizeIcon } from 'cax-design-system/icons/windowmaximize';
+import { WindowMinimizeIcon } from 'cax-design-system/icons/windowminimize';
+import { RippleModule } from 'cax-design-system/ripple';
+import { UniqueComponentId, ZIndexUtils } from 'cax-design-system/utils';
+import { ButtonModule } from 'cax-design-system/button';
+
+const showAnimation = animation([style({ transform: '{{transform}}', opacity: 0 }), animate('{{transition}}')]);
+const hideAnimation = animation([animate('{{transition}}', style({ transform: '{{transform}}', opacity: 0 }))]);
+/**
+ * Dialog is a container to display content in an overlay window.
+ * @group Components
+ */
+class Dialog {
+    document;
+    platformId;
+    el;
+    renderer;
+    zone;
+    cd;
+    config;
+    /**
+     * Title text of the dialog.
+     * @group Props
+     */
+    header;
+    /**
+     * Enables dragging to change the position using header.
+     * @group Props
+     */
+    draggable = true;
+    /**
+     * Enables resizing of the content.
+     * @group Props
+     */
+    resizable = true;
+    /**
+     * Defines the left offset of dialog.
+     * @group Props
+     * @deprecated positionLeft property is deprecated.
+     */
+    get positionLeft() {
+        return 0;
+    }
+    set positionLeft(_positionLeft) {
+        console.log('positionLeft property is deprecated.');
+    }
+    /**
+     * Defines the top offset of dialog.
+     * @group Props
+     * @deprecated positionTop property is deprecated.
+     */
+    get positionTop() {
+        return 0;
+    }
+    set positionTop(_positionTop) {
+        console.log('positionTop property is deprecated.');
+    }
+    /**
+     * Style of the content section.
+     * @group Props
+     */
+    contentStyle;
+    /**
+     * Style class of the content.
+     * @group Props
+     */
+    contentStyleClass;
+    /**
+     * Defines if background should be blocked when dialog is displayed.
+     * @group Props
+     */
+    modal = false;
+    /**
+     * Specifies if pressing escape key should hide the dialog.
+     * @group Props
+     */
+    closeOnEscape = true;
+    /**
+     * Specifies if clicking the modal background should hide the dialog.
+     * @group Props
+     */
+    dismissableMask = false;
+    /**
+     * When enabled dialog is displayed in RTL direction.
+     * @group Props
+     */
+    rtl = false;
+    /**
+     * Adds a close icon to the header to hide the dialog.
+     * @group Props
+     */
+    closable = true;
+    /**
+     * Defines if the component is responsive.
+     * @group Props
+     * @deprecated Responsive property is deprecated.
+     */
+    get responsive() {
+        return false;
+    }
+    set responsive(_responsive) {
+        console.log('Responsive property is deprecated.');
+    }
+    /**
+     * Target element to attach the dialog, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name).
+     * @group Props
+     */
+    appendTo;
+    /**
+     * Object literal to define widths per screen size.
+     * @group Props
+     */
+    breakpoints;
+    /**
+     * Style class of the component.
+     * @group Props
+     */
+    styleClass;
+    /**
+     * Style class of the mask.
+     * @group Props
+     */
+    maskStyleClass;
+    /**
+     * Style of the mask.
+     * @group Props
+     */
+    maskStyle;
+    /**
+     * Whether to show the header or not.
+     * @group Props
+     */
+    showHeader = true;
+    /**
+     * Defines the breakpoint of the component responsive.
+     * @group Props
+     * @deprecated Breakpoint property is not utilized and deprecated. Use breakpoints or CSS media queries instead.
+     */
+    get breakpoint() {
+        return 649;
+    }
+    set breakpoint(_breakpoint) {
+        console.log('Breakpoint property is not utilized and deprecated, use breakpoints or CSS media queries instead.');
+    }
+    /**
+     * Whether background scroll should be blocked when dialog is visible.
+     * @group Props
+     */
+    blockScroll = false;
+    /**
+     * Whether to automatically manage layering.
+     * @group Props
+     */
+    autoZIndex = true;
+    /**
+     * Base zIndex value to use in layering.
+     * @group Props
+     */
+    baseZIndex = 0;
+    /**
+     * Minimum value for the left coordinate of dialog in dragging.
+     * @group Props
+     */
+    minX = 0;
+    /**
+     * Minimum value for the top coordinate of dialog in dragging.
+     * @group Props
+     */
+    minY = 0;
+    /**
+     * When enabled, first focusable element receives focus on show.
+     * @group Props
+     */
+    focusOnShow = true;
+    /**
+     * Whether the dialog can be displayed full screen.
+     * @group Props
+     */
+    maximizable = false;
+    /**
+     * Keeps dialog in the viewport.
+     * @group Props
+     */
+    keepInViewport = true;
+    /**
+     * When enabled, can only focus on elements inside the dialog.
+     * @group Props
+     */
+    focusTrap = true;
+    /**
+     * Transition options of the animation.
+     * @group Props
+     */
+    transitionOptions = '150ms cubic-bezier(0, 0, 0.2, 1)';
+    /**
+     * Name of the close icon.
+     * @group Props
+     */
+    closeIcon;
+    /**
+     * Defines a string that labels the close button for accessibility.
+     * @group Props
+     */
+    closeAriaLabel;
+    /**
+     * Index of the close button in tabbing order.
+     * @group Props
+     */
+    closeTabindex = '0';
+    /**
+     * Name of the minimize icon.
+     * @group Props
+     */
+    minimizeIcon;
+    /**
+     * Name of the maximize icon.
+     * @group Props
+     */
+    maximizeIcon;
+    /**
+     * 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;
+        }
+    }
+    /**
+     * Inline style of the component.
+     * @group Props
+     */
+    get style() {
+        return this._style;
+    }
+    set style(value) {
+        if (value) {
+            this._style = { ...value };
+            this.originalStyle = value;
+        }
+    }
+    /**
+     * Position of the dialog.
+     * @group Props
+     */
+    get position() {
+        return this._position;
+    }
+    set position(value) {
+        this._position = value;
+        switch (value) {
+            case 'topleft':
+            case 'bottomleft':
+            case 'left':
+                this.transformOptions = 'translate3d(-100%, 0px, 0px)';
+                break;
+            case 'topright':
+            case 'bottomright':
+            case 'right':
+                this.transformOptions = 'translate3d(100%, 0px, 0px)';
+                break;
+            case 'bottom':
+                this.transformOptions = 'translate3d(0px, 100%, 0px)';
+                break;
+            case 'top':
+                this.transformOptions = 'translate3d(0px, -100%, 0px)';
+                break;
+            default:
+                this.transformOptions = 'scale(0.7)';
+                break;
+        }
+    }
+    /**
+     * Callback to invoke when dialog is shown.
+     * @group Emits
+     */
+    onShow = new EventEmitter();
+    /**
+     * Callback to invoke when dialog is hidden.
+     * @group Emits
+     */
+    onHide = new EventEmitter();
+    /**
+     * This EventEmitter is used to notify changes in the visibility state of a component.
+     * @param {boolean} value - New value.
+     * @group Emits
+     */
+    visibleChange = new EventEmitter();
+    /**
+     * Callback to invoke when dialog resizing is initiated.
+     * @param {MouseEvent} event - Mouse event.
+     * @group Emits
+     */
+    onResizeInit = new EventEmitter();
+    /**
+     * Callback to invoke when dialog resizing is completed.
+     * @param {MouseEvent} event - Mouse event.
+     * @group Emits
+     */
+    onResizeEnd = new EventEmitter();
+    /**
+     * Callback to invoke when dialog dragging is completed.
+     * @param {DragEvent} event - Drag event.
+     * @group Emits
+     */
+    onDragEnd = new EventEmitter();
+    /**
+     * Callback to invoke when dialog maximized or unmaximized.
+     * @group Emits
+     */
+    onMaximize = new EventEmitter();
+    headerFacet;
+    footerFacet;
+    templates;
+    headerViewChild;
+    contentViewChild;
+    footerViewChild;
+    headerTemplate;
+    contentTemplate;
+    footerTemplate;
+    maximizeIconTemplate;
+    closeIconTemplate;
+    minimizeIconTemplate;
+    headlessTemplate;
+    _visible = false;
+    maskVisible;
+    container;
+    wrapper;
+    dragging;
+    ariaLabelledBy = this.getAriaLabelledBy();
+    documentDragListener;
+    documentDragEndListener;
+    resizing;
+    documentResizeListener;
+    documentResizeEndListener;
+    documentEscapeListener;
+    maskClickListener;
+    lastPageX;
+    lastPageY;
+    preventVisibleChangePropagation;
+    maximized;
+    preMaximizeContentHeight;
+    preMaximizeContainerWidth;
+    preMaximizeContainerHeight;
+    preMaximizePageX;
+    preMaximizePageY;
+    id = UniqueComponentId();
+    _style = {};
+    _position = 'center';
+    originalStyle;
+    transformOptions = 'scale(0.7)';
+    styleElement;
+    window;
+    get maximizeLabel() {
+        return this.config.getTranslation(TranslationKeys.ARIA)['maximizeLabel'];
+    }
+    constructor(document, platformId, el, renderer, zone, cd, config) {
+        this.document = document;
+        this.platformId = platformId;
+        this.el = el;
+        this.renderer = renderer;
+        this.zone = zone;
+        this.cd = cd;
+        this.config = config;
+        this.window = this.document.defaultView;
+    }
+    ngAfterContentInit() {
+        this.templates?.forEach((item) => {
+            switch (item.getType()) {
+                case 'header':
+                    this.headerTemplate = item.template;
+                    break;
+                case 'content':
+                    this.contentTemplate = item.template;
+                    break;
+                case 'footer':
+                    this.footerTemplate = item.template;
+                    break;
+                case 'closeicon':
+                    this.closeIconTemplate = item.template;
+                    break;
+                case 'maximizeicon':
+                    this.maximizeIconTemplate = item.template;
+                    break;
+                case 'minimizeicon':
+                    this.minimizeIconTemplate = item.template;
+                    break;
+                case 'headless':
+                    this.headlessTemplate = item.template;
+                    break;
+                default:
+                    this.contentTemplate = item.template;
+                    break;
+            }
+        });
+    }
+    ngOnInit() {
+        if (this.breakpoints) {
+            this.createStyle();
+        }
+    }
+    getAriaLabelledBy() {
+        return this.header !== null ? UniqueComponentId() + '_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 = this.contentViewChild?.nativeElement) {
+        const timeoutDuration = this.parseDurationToMilliseconds(this.transitionOptions);
+        let focusable = DomHandler.getFocusableElement(focusParentElement, '[autofocus]');
+        if (focusable) {
+            this.zone.runOutsideAngular(() => {
+                setTimeout(() => focusable.focus(), timeoutDuration || 5);
+            });
+            return;
+        }
+        const focusableElement = DomHandler.getFocusableElement(focusParentElement);
+        if (focusableElement) {
+            this.zone.runOutsideAngular(() => {
+                setTimeout(() => focusableElement.focus(), timeoutDuration || 5);
+            });
+        }
+        else if (this.footerViewChild && focusParentElement !== this.footerViewChild.nativeElement) {
+            // If the content section is empty try to focus on footer
+            this.focus(this.footerViewChild.nativeElement);
+        }
+    }
+    close(event) {
+        this.visibleChange.emit(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) {
+            DomHandler.blockBodyScroll();
+        }
+    }
+    disableModality() {
+        if (this.wrapper) {
+            if (this.dismissableMask) {
+                this.unbindMaskClickListener();
+            }
+            // for nested dialogs w/modal
+            const scrollBlockers = document.querySelectorAll('.cax-dialog-mask-scrollblocker');
+            if (this.modal && scrollBlockers && scrollBlockers.length == 1) {
+                DomHandler.unblockBodyScroll();
+            }
+            if (!this.cd.destroyed) {
+                this.cd.detectChanges();
+            }
+        }
+    }
+    maximize() {
+        this.maximized = !this.maximized;
+        if (!this.modal && !this.blockScroll) {
+            if (this.maximized) {
+                DomHandler.blockBodyScroll();
+            }
+            else {
+                DomHandler.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);
+        }
+    }
+    createStyle() {
+        if (isPlatformBrowser(this.platformId)) {
+            if (!this.styleElement) {
+                this.styleElement = this.renderer.createElement('style');
+                this.styleElement.type = 'text/css';
+                DomHandler.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}) {
+                            .cax-dialog[${this.id}]:not(.cax-dialog-maximized) {
+                                width: ${this.breakpoints[breakpoint]} !important;
+                            }
+                        }
+                    `;
+                }
+                this.renderer.setProperty(this.styleElement, 'innerHTML', innerHTML);
+            }
+        }
+    }
+    initDrag(event) {
+        if (DomHandler.hasClass(event.target, 'cax-dialog-header-icon') || DomHandler.hasClass(event.target, 'cax-dialog-header-close-icon') || DomHandler.hasClass(event.target.parentElement, 'cax-dialog-header-icon')) {
+            return;
+        }
+        if (this.draggable) {
+            this.dragging = true;
+            this.lastPageX = event.pageX;
+            this.lastPageY = event.pageY;
+            this.container.style.margin = '0';
+            DomHandler.addClass(this.document.body, 'cax-unselectable-text');
+        }
+    }
+    onDrag(event) {
+        if (this.dragging) {
+            const containerWidth = DomHandler.getOuterWidth(this.container);
+            const containerHeight = DomHandler.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 = DomHandler.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`;
+            }
+        }
+    }
+    endDrag(event) {
+        if (this.dragging) {
+            this.dragging = false;
+            DomHandler.removeClass(this.document.body, 'cax-unselectable-text');
+            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;
+            DomHandler.addClass(this.document.body, 'cax-unselectable-text');
+            this.onResizeInit.emit(event);
+        }
+    }
+    onResize(event) {
+        if (this.resizing) {
+            let deltaX = event.pageX - this.lastPageX;
+            let deltaY = event.pageY - this.lastPageY;
+            let containerWidth = DomHandler.getOuterWidth(this.container);
+            let containerHeight = DomHandler.getOuterHeight(this.container);
+            let contentHeight = DomHandler.getOuterHeight(this.contentViewChild?.nativeElement);
+            let newWidth = containerWidth + deltaX;
+            let newHeight = containerHeight + deltaY;
+            let minWidth = this.container.style.minWidth;
+            let minHeight = this.container.style.minHeight;
+            let offset = this.container.getBoundingClientRect();
+            let viewport = DomHandler.getViewport();
+            let hasBeenDragged = !parseInt(this.container.style.top) || !parseInt(this.container.style.left);
+            if (hasBeenDragged) {
+                newWidth += deltaX;
+                newHeight += deltaY;
+            }
+            if ((!minWidth || newWidth > parseInt(minWidth)) && offset.left + newWidth < viewport.width) {
+                this._style.width = newWidth + 'px';
+                this.container.style.width = this._style.width;
+            }
+            if ((!minHeight || newHeight > parseInt(minHeight)) && offset.top + newHeight < viewport.height) {
+                this.contentViewChild.nativeElement.style.height = contentHeight + newHeight - containerHeight + 'px';
+                if (this._style.height) {
+                    this._style.height = newHeight + 'px';
+                    this.container.style.height = this._style.height;
+                }
+            }
+            this.lastPageX = event.pageX;
+            this.lastPageY = event.pageY;
+        }
+    }
+    resizeEnd(event) {
+        if (this.resizing) {
+            this.resizing = false;
+            DomHandler.removeClass(this.document.body, 'cax-unselectable-text');
+            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.window, '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.window, '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.window, 'mousemove', this.onResize.bind(this));
+                this.documentResizeEndListener = this.renderer.listen(this.window, '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') {
+                this.close(event);
+            }
+        });
+    }
+    unbindDocumentEscapeListener() {
+        if (this.documentEscapeListener) {
+            this.documentEscapeListener();
+            this.documentEscapeListener = null;
+        }
+    }
+    appendContainer() {
+        if (this.appendTo) {
+            if (this.appendTo === 'body')
+                this.renderer.appendChild(this.document.body, this.wrapper);
+            else
+                DomHandler.appendChild(this.wrapper, this.appendTo);
+        }
+    }
+    restoreAppend() {
+        if (this.container && this.appendTo) {
+            this.renderer.appendChild(this.el.nativeElement, this.wrapper);
+        }
+    }
+    onAnimationStart(event) {
+        switch (event.toState) {
+            case 'visible':
+                this.container = event.element;
+                this.wrapper = this.container?.parentElement;
+                this.moveOnTop();
+                this.appendContainer();
+                this.bindGlobalListeners();
+                this.container?.setAttribute(this.id, '');
+                if (this.modal) {
+                    this.enableModality();
+                }
+                if (!this.modal && this.blockScroll) {
+                    DomHandler.addClass(this.document.body, 'cax-overflow-hidden');
+                }
+                if (this.focusOnShow) {
+                    this.focus();
+                }
+                break;
+            case 'void':
+                if (this.wrapper && this.modal) {
+                    DomHandler.addClass(this.wrapper, 'cax-component-overlay-leave');
+                }
+                break;
+        }
+    }
+    onAnimationEnd(event) {
+        switch (event.toState) {
+            case 'void':
+                this.onContainerDestroy();
+                this.onHide.emit({});
+                this.cd.markForCheck();
+                break;
+            case 'visible':
+                this.onShow.emit({});
+                break;
+        }
+    }
+    onContainerDestroy() {
+        this.unbindGlobalListeners();
+        this.dragging = false;
+        this.maskVisible = false;
+        if (this.maximized) {
+            DomHandler.removeClass(this.document.body, 'cax-overflow-hidden');
+            this.document.body.style.removeProperty('--scrollbar-width');
+            this.maximized = false;
+        }
+        if (this.modal) {
+            this.disableModality();
+        }
+        if (this.blockScroll) {
+            DomHandler.removeClass(this.document.body, 'cax-overflow-hidden');
+        }
+        if (this.container && this.autoZIndex) {
+            ZIndexUtils.clear(this.container);
+        }
+        this.container = 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;
+        }
+    }
+    ngOnDestroy() {
+        if (this.container) {
+            this.restoreAppend();
+            this.onContainerDestroy();
+        }
+        this.destroyStyle();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: Dialog, deps: [{ token: DOCUMENT }, { token: PLATFORM_ID }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i1.caxConfig }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.9", type: Dialog, selector: "cax-dialog", inputs: { header: "header", draggable: ["draggable", "draggable", booleanAttribute], resizable: ["resizable", "resizable", booleanAttribute], positionLeft: "positionLeft", positionTop: "positionTop", contentStyle: "contentStyle", contentStyleClass: "contentStyleClass", modal: ["modal", "modal", booleanAttribute], closeOnEscape: ["closeOnEscape", "closeOnEscape", booleanAttribute], dismissableMask: ["dismissableMask", "dismissableMask", booleanAttribute], rtl: ["rtl", "rtl", booleanAttribute], closable: ["closable", "closable", booleanAttribute], responsive: "responsive", appendTo: "appendTo", breakpoints: "breakpoints", styleClass: "styleClass", maskStyleClass: "maskStyleClass", maskStyle: "maskStyle", showHeader: ["showHeader", "showHeader", booleanAttribute], breakpoint: "breakpoint", blockScroll: ["blockScroll", "blockScroll", booleanAttribute], autoZIndex: ["autoZIndex", "autoZIndex", booleanAttribute], baseZIndex: ["baseZIndex", "baseZIndex", numberAttribute], minX: ["minX", "minX", numberAttribute], minY: ["minY", "minY", numberAttribute], focusOnShow: ["focusOnShow", "focusOnShow", booleanAttribute], maximizable: ["maximizable", "maximizable", booleanAttribute], keepInViewport: ["keepInViewport", "keepInViewport", booleanAttribute], focusTrap: ["focusTrap", "focusTrap", booleanAttribute], transitionOptions: "transitionOptions", closeIcon: "closeIcon", closeAriaLabel: "closeAriaLabel", closeTabindex: "closeTabindex", minimizeIcon: "minimizeIcon", maximizeIcon: "maximizeIcon", visible: "visible", style: "style", position: "position" }, outputs: { onShow: "onShow", onHide: "onHide", visibleChange: "visibleChange", onResizeInit: "onResizeInit", onResizeEnd: "onResizeEnd", onDragEnd: "onDragEnd", onMaximize: "onMaximize" }, host: { classAttribute: "cax-element" }, queries: [{ propertyName: "headerFacet", first: true, predicate: Header, descendants: true }, { propertyName: "footerFacet", first: true, predicate: Footer, descendants: true }, { propertyName: "templates", predicate: CaxTemplate }], 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 }], ngImport: i0, template: `
+        <div
+            *ngIf="maskVisible"
+            [class]="maskStyleClass"
+            [ngStyle]="maskStyle"
+            [ngClass]="{
+                'cax-dialog-mask': true,
+                'cax-component-overlay cax-component-overlay-enter': this.modal,
+                'cax-dialog-mask-scrollblocker': this.modal || this.blockScroll,
+                'cax-dialog-left': position === 'left',
+                'cax-dialog-right': position === 'right',
+                'cax-dialog-top': position === 'top',
+                'cax-dialog-top-left': position === 'topleft' || position === 'top-left',
+                'cax-dialog-top-right': position === 'topright' || position === 'top-right',
+                'cax-dialog-bottom': position === 'bottom',
+                'cax-dialog-bottom-left': position === 'bottomleft' || position === 'bottom-left',
+                'cax-dialog-bottom-right': position === 'bottomright' || position === 'bottom-right'
+            }"
+        >
+            <div
+                #container
+                [ngClass]="{ 'cax-dialog cax-component': true, 'cax-dialog-rtl': rtl, 'cax-dialog-draggable': draggable, 'cax-dialog-resizable': resizable, 'cax-dialog-maximized': maximized }"
+                [ngStyle]="style"
+                [class]="styleClass"
+                *ngIf="visible"
+                caxFocusTrap
+                [caxFocusTrapDisabled]="focusTrap === false"
+                [@animation]="{ value: 'visible', params: { transform: transformOptions, transition: transitionOptions } }"
+                (@animation.start)="onAnimationStart($event)"
+                (@animation.done)="onAnimationEnd($event)"
+                role="dialog"
+                [attr.aria-labelledby]="ariaLabelledBy"
+                [attr.aria-modal]="true"
+            >
+                <ng-container *ngIf="headlessTemplate; else notHeadless">
+                    <ng-container *ngTemplateOutlet="headlessTemplate"></ng-container>
+                </ng-container>
+
+                <ng-template #notHeadless>
+                    <div *ngIf="resizable" class="cax-resizable-handle" (mousedown)="initResize($event)"></div>
+                    <div #titlebar class="cax-dialog-header" (mousedown)="initDrag($event)" *ngIf="showHeader">
+                        <span [id]="ariaLabelledBy" class="cax-dialog-title" *ngIf="!headerFacet && !headerTemplate">{{ header }}</span>
+                        <span [id]="ariaLabelledBy" class="cax-dialog-title" *ngIf="headerFacet">
+                            <ng-content select="cax-header"></ng-content>
+                        </span>
+                        <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
+                        <div class="cax-dialog-header-icons">
+                            <button
+                                *ngIf="maximizable"
+                                role="button"
+                                type="button"
+                                [ngClass]="{ 'cax-dialog-header-icon cax-dialog-header-maximize cax-link': true }"
+                                (click)="maximize()"
+                                (keydown.enter)="maximize()"
+                                [attr.tabindex]="maximizable ? '0' : '-1'"
+                                [attr.aria-label]="maximizeLabel"
+                                pRipple
+                                pButton
+                            >
+                                <span *ngIf="maximizeIcon && !maximizeIconTemplate && !minimizeIconTemplate" class="cax-dialog-header-maximize-icon" [ngClass]="maximized ? minimizeIcon : maximizeIcon"></span>
+                                <ng-container *ngIf="!maximizeIcon">
+                                    <WindowMaximizeIcon *ngIf="!maximized && !maximizeIconTemplate" [styleClass]="'cax-dialog-header-maximize-icon'" />
+                                    <WindowMinimizeIcon *ngIf="maximized && !minimizeIconTemplate" [styleClass]="'cax-dialog-header-maximize-icon'" />
+                                </ng-container>
+                                <ng-container *ngIf="!maximized">
+                                    <ng-template *ngTemplateOutlet="maximizeIconTemplate"></ng-template>
+                                </ng-container>
+                                <ng-container *ngIf="maximized">
+                                    <ng-template *ngTemplateOutlet="minimizeIconTemplate"></ng-template>
+                                </ng-container>
+                            </button>
+                            <button
+                                *ngIf="closable"
+                                type="button"
+                                [ngClass]="{ 'cax-dialog-header-icon cax-dialog-header-close cax-link': true }"
+                                [attr.aria-label]="closeAriaLabel"
+                                (click)="close($event)"
+                                (keydown.enter)="close($event)"
+                                pRipple
+                                pButton
+                                [attr.tabindex]="closeTabindex"
+                                [ngStyle]="{ 'min-width': 0 }"
+                            >
+                                <ng-container *ngIf="!closeIconTemplate">
+                                    <span *ngIf="closeIcon" class="cax-dialog-header-close-icon" [ngClass]="closeIcon"></span>
+                                    <TimesIcon *ngIf="!closeIcon" [styleClass]="'cax-dialog-header-close-icon'" />
+                                </ng-container>
+                                <span *ngIf="closeIconTemplate">
+                                    <ng-template *ngTemplateOutlet="closeIconTemplate"></ng-template>
+                                </span>
+                            </button>
+                        </div>
+                    </div>
+                    <div #content [ngClass]="'cax-dialog-content'" [ngStyle]="contentStyle" [class]="contentStyleClass">
+                        <ng-content></ng-content>
+                        <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
+                    </div>
+                    <div #footer class="cax-dialog-footer" *ngIf="footerFacet || footerTemplate">
+                        <ng-content select="cax-footer"></ng-content>
+                        <ng-container *ngTemplateOutlet="footerTemplate"></ng-container>
+                    </div>
+                </ng-template>
+            </div>
+        </div>
+    `, isInline: true, styles: ["@layer cax{.cax-dialog-mask{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;pointer-events:none}.cax-dialog-mask.cax-component-overlay{pointer-events:auto}.cax-dialog{display:flex;flex-direction:column;pointer-events:auto;max-height:90%;transform:scale(1);position:relative}.cax-dialog-content{overflow-y:auto;flex-grow:1}.cax-dialog-header{display:flex;align-items:center;justify-content:space-between;flex-shrink:0}.cax-dialog-draggable .cax-dialog-header{cursor:move}.cax-dialog-footer{flex-shrink:0}.cax-dialog .cax-dialog-header-icons{display:flex;align-items:center}.cax-dialog .cax-dialog-header-icon{display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.cax-fluid .cax-dialog-footer .cax-button{width:auto}.cax-dialog-top .cax-dialog,.cax-dialog-bottom .cax-dialog,.cax-dialog-left .cax-dialog,.cax-dialog-right .cax-dialog,.cax-dialog-top-left .cax-dialog,.cax-dialog-top-right .cax-dialog,.cax-dialog-bottom-left .cax-dialog,.cax-dialog-bottom-right .cax-dialog{margin:.75rem;transform:translateZ(0)}.cax-dialog-maximized{-webkit-transition:none;transition:none;transform:none;width:100vw!important;height:100vh!important;top:0!important;left:0!important;max-height:100%;height:100%}.cax-dialog-maximized .cax-dialog-content{flex-grow:1}.cax-dialog-left{justify-content:flex-start}.cax-dialog-right{justify-content:flex-end}.cax-dialog-top{align-items:flex-start}.cax-dialog-top-left{justify-content:flex-start;align-items:flex-start}.cax-dialog-top-right{justify-content:flex-end;align-items:flex-start}.cax-dialog-bottom{align-items:flex-end}.cax-dialog-bottom-left{justify-content:flex-start;align-items:flex-end}.cax-dialog-bottom-right{justify-content:flex-end;align-items:flex-end}.cax-dialog .cax-resizable-handle{position:absolute;font-size:.1px;display:block;cursor:se-resize;width:12px;height:12px;right:1px;bottom:1px}.cax-header-allign{display:flex}.cax-dialog-icon{font-size:1.25rem;margin-top:11%}.cax-confirm-dialog .cax-dialog-content{display:flex;align-items:center}.cax-dialog-content .cax-dialog-checkbox{display:block;margin-top:1rem}.cax-dialog-checkbox input[type=checkbox]{margin-right:.5rem}.cax-header-align{display:flex;align-items:center}.cax-dialog-title{margin-left:10px}}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => i2.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i0.forwardRef(() => i3.FocusTrap), selector: "[caxFocusTrap]", inputs: ["caxFocusTrapDisabled"] }, { kind: "component", type: i0.forwardRef(() => TimesIcon), selector: "TimesIcon" }, { kind: "component", type: i0.forwardRef(() => WindowMaximizeIcon), selector: "WindowMaximizeIcon" }, { kind: "component", type: i0.forwardRef(() => WindowMinimizeIcon), selector: "WindowMinimizeIcon" }], animations: [trigger('animation', [transition('void => visible', [useAnimation(showAnimation)]), transition('visible => void', [useAnimation(hideAnimation)])])], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: Dialog, decorators: [{
+            type: Component,
+            args: [{ selector: 'cax-dialog', template: `
+        <div
+            *ngIf="maskVisible"
+            [class]="maskStyleClass"
+            [ngStyle]="maskStyle"
+            [ngClass]="{
+                'cax-dialog-mask': true,
+                'cax-component-overlay cax-component-overlay-enter': this.modal,
+                'cax-dialog-mask-scrollblocker': this.modal || this.blockScroll,
+                'cax-dialog-left': position === 'left',
+                'cax-dialog-right': position === 'right',
+                'cax-dialog-top': position === 'top',
+                'cax-dialog-top-left': position === 'topleft' || position === 'top-left',
+                'cax-dialog-top-right': position === 'topright' || position === 'top-right',
+                'cax-dialog-bottom': position === 'bottom',
+                'cax-dialog-bottom-left': position === 'bottomleft' || position === 'bottom-left',
+                'cax-dialog-bottom-right': position === 'bottomright' || position === 'bottom-right'
+            }"
+        >
+            <div
+                #container
+                [ngClass]="{ 'cax-dialog cax-component': true, 'cax-dialog-rtl': rtl, 'cax-dialog-draggable': draggable, 'cax-dialog-resizable': resizable, 'cax-dialog-maximized': maximized }"
+                [ngStyle]="style"
+                [class]="styleClass"
+                *ngIf="visible"
+                caxFocusTrap
+                [caxFocusTrapDisabled]="focusTrap === false"
+                [@animation]="{ value: 'visible', params: { transform: transformOptions, transition: transitionOptions } }"
+                (@animation.start)="onAnimationStart($event)"
+                (@animation.done)="onAnimationEnd($event)"
+                role="dialog"
+                [attr.aria-labelledby]="ariaLabelledBy"
+                [attr.aria-modal]="true"
+            >
+                <ng-container *ngIf="headlessTemplate; else notHeadless">
+                    <ng-container *ngTemplateOutlet="headlessTemplate"></ng-container>
+                </ng-container>
+
+                <ng-template #notHeadless>
+                    <div *ngIf="resizable" class="cax-resizable-handle" (mousedown)="initResize($event)"></div>
+                    <div #titlebar class="cax-dialog-header" (mousedown)="initDrag($event)" *ngIf="showHeader">
+                        <span [id]="ariaLabelledBy" class="cax-dialog-title" *ngIf="!headerFacet && !headerTemplate">{{ header }}</span>
+                        <span [id]="ariaLabelledBy" class="cax-dialog-title" *ngIf="headerFacet">
+                            <ng-content select="cax-header"></ng-content>
+                        </span>
+                        <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
+                        <div class="cax-dialog-header-icons">
+                            <button
+                                *ngIf="maximizable"
+                                role="button"
+                                type="button"
+                                [ngClass]="{ 'cax-dialog-header-icon cax-dialog-header-maximize cax-link': true }"
+                                (click)="maximize()"
+                                (keydown.enter)="maximize()"
+                                [attr.tabindex]="maximizable ? '0' : '-1'"
+                                [attr.aria-label]="maximizeLabel"
+                                pRipple
+                                pButton
+                            >
+                                <span *ngIf="maximizeIcon && !maximizeIconTemplate && !minimizeIconTemplate" class="cax-dialog-header-maximize-icon" [ngClass]="maximized ? minimizeIcon : maximizeIcon"></span>
+                                <ng-container *ngIf="!maximizeIcon">
+                                    <WindowMaximizeIcon *ngIf="!maximized && !maximizeIconTemplate" [styleClass]="'cax-dialog-header-maximize-icon'" />
+                                    <WindowMinimizeIcon *ngIf="maximized && !minimizeIconTemplate" [styleClass]="'cax-dialog-header-maximize-icon'" />
+                                </ng-container>
+                                <ng-container *ngIf="!maximized">
+                                    <ng-template *ngTemplateOutlet="maximizeIconTemplate"></ng-template>
+                                </ng-container>
+                                <ng-container *ngIf="maximized">
+                                    <ng-template *ngTemplateOutlet="minimizeIconTemplate"></ng-template>
+                                </ng-container>
+                            </button>
+                            <button
+                                *ngIf="closable"
+                                type="button"
+                                [ngClass]="{ 'cax-dialog-header-icon cax-dialog-header-close cax-link': true }"
+                                [attr.aria-label]="closeAriaLabel"
+                                (click)="close($event)"
+                                (keydown.enter)="close($event)"
+                                pRipple
+                                pButton
+                                [attr.tabindex]="closeTabindex"
+                                [ngStyle]="{ 'min-width': 0 }"
+                            >
+                                <ng-container *ngIf="!closeIconTemplate">
+                                    <span *ngIf="closeIcon" class="cax-dialog-header-close-icon" [ngClass]="closeIcon"></span>
+                                    <TimesIcon *ngIf="!closeIcon" [styleClass]="'cax-dialog-header-close-icon'" />
+                                </ng-container>
+                                <span *ngIf="closeIconTemplate">
+                                    <ng-template *ngTemplateOutlet="closeIconTemplate"></ng-template>
+                                </span>
+                            </button>
+                        </div>
+                    </div>
+                    <div #content [ngClass]="'cax-dialog-content'" [ngStyle]="contentStyle" [class]="contentStyleClass">
+                        <ng-content></ng-content>
+                        <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
+                    </div>
+                    <div #footer class="cax-dialog-footer" *ngIf="footerFacet || footerTemplate">
+                        <ng-content select="cax-footer"></ng-content>
+                        <ng-container *ngTemplateOutlet="footerTemplate"></ng-container>
+                    </div>
+                </ng-template>
+            </div>
+        </div>
+    `, animations: [trigger('animation', [transition('void => visible', [useAnimation(showAnimation)]), transition('visible => void', [useAnimation(hideAnimation)])])], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: 'cax-element'
+                    }, styles: ["@layer cax{.cax-dialog-mask{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;pointer-events:none}.cax-dialog-mask.cax-component-overlay{pointer-events:auto}.cax-dialog{display:flex;flex-direction:column;pointer-events:auto;max-height:90%;transform:scale(1);position:relative}.cax-dialog-content{overflow-y:auto;flex-grow:1}.cax-dialog-header{display:flex;align-items:center;justify-content:space-between;flex-shrink:0}.cax-dialog-draggable .cax-dialog-header{cursor:move}.cax-dialog-footer{flex-shrink:0}.cax-dialog .cax-dialog-header-icons{display:flex;align-items:center}.cax-dialog .cax-dialog-header-icon{display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.cax-fluid .cax-dialog-footer .cax-button{width:auto}.cax-dialog-top .cax-dialog,.cax-dialog-bottom .cax-dialog,.cax-dialog-left .cax-dialog,.cax-dialog-right .cax-dialog,.cax-dialog-top-left .cax-dialog,.cax-dialog-top-right .cax-dialog,.cax-dialog-bottom-left .cax-dialog,.cax-dialog-bottom-right .cax-dialog{margin:.75rem;transform:translateZ(0)}.cax-dialog-maximized{-webkit-transition:none;transition:none;transform:none;width:100vw!important;height:100vh!important;top:0!important;left:0!important;max-height:100%;height:100%}.cax-dialog-maximized .cax-dialog-content{flex-grow:1}.cax-dialog-left{justify-content:flex-start}.cax-dialog-right{justify-content:flex-end}.cax-dialog-top{align-items:flex-start}.cax-dialog-top-left{justify-content:flex-start;align-items:flex-start}.cax-dialog-top-right{justify-content:flex-end;align-items:flex-start}.cax-dialog-bottom{align-items:flex-end}.cax-dialog-bottom-left{justify-content:flex-start;align-items:flex-end}.cax-dialog-bottom-right{justify-content:flex-end;align-items:flex-end}.cax-dialog .cax-resizable-handle{position:absolute;font-size:.1px;display:block;cursor:se-resize;width:12px;height:12px;right:1px;bottom:1px}.cax-header-allign{display:flex}.cax-dialog-icon{font-size:1.25rem;margin-top:11%}.cax-confirm-dialog .cax-dialog-content{display:flex;align-items:center}.cax-dialog-content .cax-dialog-checkbox{display:block;margin-top:1rem}.cax-dialog-checkbox input[type=checkbox]{margin-right:.5rem}.cax-header-align{display:flex;align-items:center}.cax-dialog-title{margin-left:10px}}\n"] }]
+        }], ctorParameters: () => [{ type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i1.caxConfig }], propDecorators: { header: [{
+                type: Input
+            }], draggable: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], resizable: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], positionLeft: [{
+                type: Input
+            }], positionTop: [{
+                type: Input
+            }], 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 }]
+            }], responsive: [{
+                type: Input
+            }], appendTo: [{
+                type: Input
+            }], breakpoints: [{
+                type: Input
+            }], styleClass: [{
+                type: Input
+            }], maskStyleClass: [{
+                type: Input
+            }], maskStyle: [{
+                type: Input
+            }], showHeader: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], breakpoint: [{
+                type: Input
+            }], 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
+            }], closeIcon: [{
+                type: Input
+            }], closeAriaLabel: [{
+                type: Input
+            }], closeTabindex: [{
+                type: Input
+            }], minimizeIcon: [{
+                type: Input
+            }], maximizeIcon: [{
+                type: Input
+            }], visible: [{
+                type: Input
+            }], style: [{
+                type: Input
+            }], position: [{
+                type: Input
+            }], onShow: [{
+                type: Output
+            }], onHide: [{
+                type: Output
+            }], visibleChange: [{
+                type: Output
+            }], onResizeInit: [{
+                type: Output
+            }], onResizeEnd: [{
+                type: Output
+            }], onDragEnd: [{
+                type: Output
+            }], onMaximize: [{
+                type: Output
+            }], headerFacet: [{
+                type: ContentChild,
+                args: [Header]
+            }], footerFacet: [{
+                type: ContentChild,
+                args: [Footer]
+            }], templates: [{
+                type: ContentChildren,
+                args: [CaxTemplate]
+            }], headerViewChild: [{
+                type: ViewChild,
+                args: ['titlebar']
+            }], contentViewChild: [{
+                type: ViewChild,
+                args: ['content']
+            }], footerViewChild: [{
+                type: ViewChild,
+                args: ['footer']
+            }] } });
+class DialogModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: DialogModule, declarations: [Dialog], imports: [CommonModule, FocusTrapModule, ButtonModule, RippleModule, TimesIcon, WindowMaximizeIcon, WindowMinimizeIcon], exports: [Dialog, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DialogModule, imports: [CommonModule, FocusTrapModule, ButtonModule, RippleModule, TimesIcon, WindowMaximizeIcon, WindowMinimizeIcon, SharedModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DialogModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, FocusTrapModule, ButtonModule, RippleModule, TimesIcon, WindowMaximizeIcon, WindowMinimizeIcon],
+                    exports: [Dialog, SharedModule],
+                    declarations: [Dialog]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Dialog, DialogModule };
+//# sourceMappingURL=cax-design-system-dialog.mjs.map