@nanahoshi/mona-ui 0.1.0

package/fesm2022/nanahoshi-mona-ui-dialog.mjs

@@ -0,0 +1,828 @@
+import * as i0 from '@angular/core';
+import { Directive, inject, ElementRef, computed, afterNextRender, ChangeDetectionStrategy, Component, signal, DOCUMENT, Injector, forwardRef, Injectable, DestroyRef, contentChild, TemplateRef, output, input, effect } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { Subject, map, takeUntil, take } from 'rxjs';
+import { PopupDataInjectionToken, PopupCloseEvent, PopupCloseSource, PopupService } from '@nanahoshi/mona-ui/popup';
+import { PreventableEvent, AnyPipe } from '@nanahoshi/mona-ui/common';
+import { createElementControlId, focusElement, setWindowStyles } from '@nanahoshi/mona-ui/internal';
+import * as i1 from '@angular/cdk/a11y';
+import { CdkTrapFocus } from '@angular/cdk/a11y';
+import { NgTemplateOutlet } from '@angular/common';
+import { LucideOctagonAlert, LucideCircleCheckBig, LucideBadgeInfo, LucideOctagonX, LucideBadgeQuestionMark, LucideX, LucideDynamicIcon } from '@lucide/angular';
+import { ButtonDirective } from '@nanahoshi/mona-ui/button';
+import { ThemeService } from '@nanahoshi/mona-ui/theme';
+import { cva } from 'class-variance-authority';
+
+class DialogContentTemplateDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DialogContentTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: DialogContentTemplateDirective, isStandalone: true, selector: "ng-template[monaDialogContentTemplate]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DialogContentTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[monaDialogContentTemplate]"
+                }]
+        }] });
+
+class DialogDescriptionTemplateDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DialogDescriptionTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: DialogDescriptionTemplateDirective, isStandalone: true, selector: "ng-template[monaDialogDescriptionTemplate]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DialogDescriptionTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[monaDialogDescriptionTemplate]"
+                }]
+        }] });
+
+class DialogFooterTemplateDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DialogFooterTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: DialogFooterTemplateDirective, isStandalone: true, selector: "ng-template[monaDialogFooterTemplate]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DialogFooterTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[monaDialogFooterTemplate]"
+                }]
+        }] });
+
+class DialogIconTemplateDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DialogIconTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: DialogIconTemplateDirective, isStandalone: true, selector: "ng-template[monaDialogIconTemplate]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DialogIconTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[monaDialogIconTemplate]"
+                }]
+        }] });
+
+class DialogTitleTemplateDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DialogTitleTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: DialogTitleTemplateDirective, isStandalone: true, selector: "ng-template[monaDialogTitleTemplate]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DialogTitleTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[monaDialogTitleTemplate]"
+                }]
+        }] });
+
+/**
+ * @description Emitted when the user clicks a dialog action button. Call `preventDefault()` to keep the dialog open.
+ */
+class DialogActionEvent extends PreventableEvent {
+    #action;
+    constructor(action) {
+        super("dialogAction");
+        this.#action = action;
+    }
+    /**
+     * @description The action that was clicked.
+     */
+    get action() {
+        return this.#action;
+    }
+}
+
+const dialogBaseVariants = cva(`
+        flex flex-col gap-0.5
+        w-full h-full
+        bg-background
+        border border-border shadow-sm
+        outline-none overflow-hidden
+    `, {
+    variants: {
+        rounded: {
+            none: "rounded-none",
+            small: "rounded-sm",
+            medium: "rounded-md",
+            large: "rounded-lg"
+        }
+    },
+    defaultVariants: {
+        rounded: "medium"
+    }
+});
+const dialogContentContainerVariants = cva(`
+        flex flex-row gap-1 flex-1
+    `);
+const dialogBodyVariants = cva(`
+        flex flex-col gap-0 pb-2
+        w-full h-full pr-2
+    `, {
+    variants: {
+        hasIcon: {
+            true: "",
+            false: "pl-5"
+        }
+    }
+});
+const dialogHeaderVariants = cva(`
+        flex flex-row gap-2
+        pt-4 select-none
+    `);
+const dialogIconContainerVariants = cva(`
+        flex items-start justify-center pt-8 pr-4 pl-6
+    `);
+const dialogIconVariants = cva(`
+        rounded-full w-fit h-fit p-1.5 border relative
+        [&>span]:absolute [&>span]:flex [&>span]:rounded-full
+        [&>span]:-top-3 [&>span]:-right-3 [&>span]:-bottom-3 [&>span]:-left-3
+        [&>span]:border [&>span]:min-w-full [&>span]:min-h-full
+    `, {
+    variants: {
+        type: {
+            confirm: "border-success/10 bg-success/10 [&>span]:border-success/5 [&>span]:bg-success/5",
+            error: "border-error/10 bg-error/10 [&>span]:border-error/5 [&>span]:bg-error/5",
+            warning: "border-warning/10 bg-warning/10 [&>span]:border-warning/5 [&>span]:bg-warning/5",
+            info: "border-info/10 bg-info/10 [&>span]:border-info/5 [&>span]:bg-info/5",
+            success: "border-success/10 bg-success/10 [&>span]:border-success/5 [&>span]:bg-success/5"
+        }
+    },
+    defaultVariants: {
+        type: "info"
+    }
+});
+const dialogTitleContainerVariants = cva(`
+        flex flex-1 items-center justify-start select-none p-1
+    `);
+const dialogCloseButtonContainerVariants = cva(`
+        flex items-start justify-end
+    `);
+const dialogTitleVariants = cva(`
+        text-lg font-semibold leading-none tracking-tight
+    `);
+const dialogDescriptionVariants = cva(`
+        text-sm text-muted-foreground
+        select-none
+    `);
+const dialogContentVariants = cva(`
+        flex-1 overflow-auto p-1
+    `);
+const dialogFooterVariants = cva(`
+        flex flex-row
+        gap-2 px-4 py-2
+        border-t border-border
+        select-none
+    `, {
+    variants: {
+        layout: {
+            center: "justify-center",
+            end: "justify-end",
+            start: "justify-start",
+            stretched: "[&>*]:flex-1"
+        },
+        rounded: {
+            none: "rounded-none",
+            small: "rounded-es-sm rounded-ee-sm",
+            medium: "rounded-es-md rounded-ee-md",
+            large: "rounded-es-lg rounded-ee-lg"
+        }
+    },
+    defaultVariants: {
+        rounded: "medium"
+    }
+});
+
+const dialogBaseThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return dialogBaseVariants;
+        default:
+            return dialogBaseVariants;
+    }
+};
+const dialogIconThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return dialogIconVariants;
+        default:
+            return dialogIconVariants;
+    }
+};
+const dialogBodyThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return dialogBodyVariants;
+        default:
+            return dialogBodyVariants;
+    }
+};
+const dialogContentContainerThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return dialogContentContainerVariants;
+        default:
+            return dialogContentContainerVariants;
+    }
+};
+const dialogHeaderThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return dialogHeaderVariants;
+        default:
+            return dialogHeaderVariants;
+    }
+};
+const dialogIconContainerThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return dialogIconContainerVariants;
+        default:
+            return dialogIconContainerVariants;
+    }
+};
+const dialogTitleContainerThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return dialogTitleContainerVariants;
+        default:
+            return dialogTitleContainerVariants;
+    }
+};
+const dialogCloseButtonContainerThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return dialogCloseButtonContainerVariants;
+        default:
+            return dialogCloseButtonContainerVariants;
+    }
+};
+const dialogTitleThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return dialogTitleVariants;
+        default:
+            return dialogTitleVariants;
+    }
+};
+const dialogDescriptionThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return dialogDescriptionVariants;
+        default:
+            return dialogDescriptionVariants;
+    }
+};
+const dialogContentThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return dialogContentVariants;
+        default:
+            return dialogContentVariants;
+    }
+};
+const dialogFooterThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return dialogFooterVariants;
+        default:
+            return dialogFooterVariants;
+    }
+};
+
+class DialogContentComponent {
+    #hostElementRef;
+    #iconMap;
+    #injectedData;
+    #themeService;
+    #trapFocus;
+    constructor() {
+        this.#hostElementRef = inject(ElementRef);
+        this.#iconMap = {
+            confirm: { color: "var(--color-success)", icon: LucideBadgeQuestionMark },
+            error: { color: "var(--color-error)", icon: LucideOctagonX },
+            info: { color: "var(--color-info)", icon: LucideBadgeInfo },
+            success: { color: "var(--color-success)", icon: LucideCircleCheckBig },
+            warning: { color: "var(--color-warning)", icon: LucideOctagonAlert }
+        };
+        this.#injectedData = inject(PopupDataInjectionToken);
+        this.#themeService = inject(ThemeService);
+        this.#trapFocus = inject(CdkTrapFocus);
+        this.baseClass = computed(() => {
+            const theme = this.#themeService.theme();
+            const rounded = this.dialogData().rounded;
+            return dialogBaseThemeVariants(theme)({ rounded });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
+        this.bodyClass = computed(() => {
+            const theme = this.#themeService.theme();
+            const hasIcon = this.dialogData().type != null;
+            return dialogBodyThemeVariants(theme)({ hasIcon });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "bodyClass" }] : /* istanbul ignore next */ []));
+        this.closeButtonContainerClass = computed(() => {
+            const theme = this.#themeService.theme();
+            return dialogCloseButtonContainerThemeVariants(theme)();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "closeButtonContainerClass" }] : /* istanbul ignore next */ []));
+        this.contentClass = computed(() => {
+            const theme = this.#themeService.theme();
+            return dialogContentThemeVariants(theme)();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "contentClass" }] : /* istanbul ignore next */ []));
+        this.contentContainerClass = computed(() => {
+            const theme = this.#themeService.theme();
+            return dialogContentContainerThemeVariants(theme)();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "contentContainerClass" }] : /* istanbul ignore next */ []));
+        this.describedById = computed(() => {
+            const data = this.dialogData();
+            return data.descriptionTemplate || data.description ? this.descriptionId : null;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "describedById" }] : /* istanbul ignore next */ []));
+        this.descriptionClass = computed(() => {
+            const theme = this.#themeService.theme();
+            return dialogDescriptionThemeVariants(theme)();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "descriptionClass" }] : /* istanbul ignore next */ []));
+        this.descriptionId = createElementControlId();
+        this.dialogData = computed(() => this.dialogReference.data(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dialogData" }] : /* istanbul ignore next */ []));
+        this.dialogReference = this.#injectedData.dialogReference;
+        this.footerClass = computed(() => {
+            const theme = this.#themeService.theme();
+            const layout = this.dialogData().actionsLayout;
+            const rounded = this.dialogData().rounded;
+            return dialogFooterThemeVariants(theme)({ layout, rounded });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "footerClass" }] : /* istanbul ignore next */ []));
+        this.headerClass = computed(() => {
+            const theme = this.#themeService.theme();
+            return dialogHeaderThemeVariants(theme)();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "headerClass" }] : /* istanbul ignore next */ []));
+        this.headerId = createElementControlId();
+        this.icon = computed(() => {
+            const { type } = this.dialogData();
+            return type ? this.#iconMap[type] : undefined;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+        this.iconClass = computed(() => {
+            const theme = this.#themeService.theme();
+            const type = this.dialogData().type;
+            return dialogIconThemeVariants(theme)({ type });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "iconClass" }] : /* istanbul ignore next */ []));
+        this.iconContainerClass = computed(() => {
+            const theme = this.#themeService.theme();
+            return dialogIconContainerThemeVariants(theme)();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "iconContainerClass" }] : /* istanbul ignore next */ []));
+        this.role = computed(() => {
+            const type = this.dialogData().type;
+            return type === "confirm" || type === "error" || type === "warning" ? "alertdialog" : "dialog";
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
+        this.titleClass = computed(() => {
+            const theme = this.#themeService.theme();
+            return dialogTitleThemeVariants(theme)();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "titleClass" }] : /* istanbul ignore next */ []));
+        this.titleContainerClass = computed(() => {
+            const theme = this.#themeService.theme();
+            return dialogTitleContainerThemeVariants(theme)();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "titleContainerClass" }] : /* istanbul ignore next */ []));
+        this.#trapFocus.autoCapture = true;
+        afterNextRender({
+            read: () => {
+                this.focusElement();
+            }
+        });
+    }
+    onActionClick(action) {
+        this.dialogReference.dialogResult$.next({
+            action,
+            viaClose: false
+        });
+    }
+    onCloseClick() {
+        this.dialogReference.dialogResult$.next({
+            viaClose: true
+        });
+    }
+    focusElement() {
+        const element = this.dialogData().focusedElement;
+        if (!element) {
+            return;
+        }
+        const dialogElement = this.#hostElementRef.nativeElement;
+        focusElement(dialogElement, element);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DialogContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: DialogContentComponent, isStandalone: true, selector: "ng-component", host: { properties: { "class": "baseClass()", "attr.aria-describedby": "describedById()", "attr.aria-labelledby": "headerId", "attr.role": "role()" } }, hostDirectives: [{ directive: i1.CdkTrapFocus }], ngImport: i0, template: "@let dialogIcon = icon();\r\n@let data = dialogData();\r\n\r\n<div [class]=\"contentContainerClass()\">\r\n    @if (dialogIcon) {\r\n        <div [class]=\"iconContainerClass()\">\r\n            @if (data.iconTemplate) {\r\n                <ng-container [ngTemplateOutlet]=\"data.iconTemplate\"></ng-container>\r\n            } @else {\r\n                <div [class]=\"iconClass()\">\r\n                    <span aria-hidden=\"true\"></span>\r\n                    <svg [lucideIcon]=\"dialogIcon.icon\" [size]=\"24\" [style.color]=\"dialogIcon.color\"></svg>\r\n                </div>\r\n            }\r\n        </div>\r\n    }\r\n    <div [class]=\"bodyClass()\">\r\n        <div [class]=\"headerClass()\">\r\n            <div [id]=\"headerId\" [class]=\"titleContainerClass()\">\r\n                @if (data.titleTemplate) {\r\n                    <ng-container [ngTemplateOutlet]=\"data.titleTemplate\"></ng-container>\r\n                } @else {\r\n                    <h2 [class]=\"titleClass()\">{{ data.title }}</h2>\r\n                }\r\n            </div>\r\n            @if (data.closable) {\r\n                <div [class]=\"closeButtonContainerClass()\">\r\n                    <button\r\n                        monaButton\r\n                        look=\"ghost\"\r\n                        size=\"small\"\r\n                        [iconOnly]=\"true\"\r\n                        aria-label=\"Close dialog\"\r\n                        (click)=\"onCloseClick()\">\r\n                        <svg lucideX [size]=\"16\"></svg>\r\n                    </button>\r\n                </div>\r\n            }\r\n        </div>\r\n\r\n        @let descriptionTemplateId = data.descriptionTemplate ? descriptionId : undefined;\r\n        <div class=\"p-1\" [attr.id]=\"descriptionTemplateId\">\r\n            @if (data.descriptionTemplate) {\r\n                <ng-container [ngTemplateOutlet]=\"data.descriptionTemplate\"></ng-container>\r\n            } @else if (data.description) {\r\n                <p [id]=\"descriptionId\" [class]=\"descriptionClass()\">{{ data.description }}</p>\r\n            }\r\n        </div>\r\n\r\n        <div [class]=\"contentClass()\">\r\n            @if (data.content) {\r\n                <ng-container [ngTemplateOutlet]=\"data.content\"></ng-container>\r\n            } @else if (data.text) {\r\n                <p class=\"select-none\">{{ data.text }}</p>\r\n            }\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n@if (data.footerTemplate || (data.actions | monaAny)) {\r\n    @if (data.footerTemplate) {\r\n        <ng-container [ngTemplateOutlet]=\"data.footerTemplate\"></ng-container>\r\n    } @else {\r\n        <div [class]=\"footerClass()\">\r\n            @for (action of data.actions; track $index) {\r\n                <button\r\n                    monaButton\r\n                    type=\"button\"\r\n                    [class]=\"action.cssClass || ''\"\r\n                    [iconOnly]=\"action.iconOnly || false\"\r\n                    [look]=\"action.look\"\r\n                    [rounded]=\"action.rounded || data.rounded\"\r\n                    (click)=\"onActionClick(action)\">\r\n                    {{ action.text }}\r\n                </button>\r\n            }\r\n        </div>\r\n    }\r\n}\r\n", dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }, { kind: "pipe", type: AnyPipe, name: "monaAny" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DialogContentComponent, decorators: [{
+            type: Component,
+            args: [{ imports: [ButtonDirective, NgTemplateOutlet, AnyPipe, LucideX, LucideDynamicIcon], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        "[class]": "baseClass()",
+                        "[attr.aria-describedby]": "describedById()",
+                        "[attr.aria-labelledby]": "headerId",
+                        "[attr.role]": "role()"
+                    }, hostDirectives: [CdkTrapFocus], template: "@let dialogIcon = icon();\r\n@let data = dialogData();\r\n\r\n<div [class]=\"contentContainerClass()\">\r\n    @if (dialogIcon) {\r\n        <div [class]=\"iconContainerClass()\">\r\n            @if (data.iconTemplate) {\r\n                <ng-container [ngTemplateOutlet]=\"data.iconTemplate\"></ng-container>\r\n            } @else {\r\n                <div [class]=\"iconClass()\">\r\n                    <span aria-hidden=\"true\"></span>\r\n                    <svg [lucideIcon]=\"dialogIcon.icon\" [size]=\"24\" [style.color]=\"dialogIcon.color\"></svg>\r\n                </div>\r\n            }\r\n        </div>\r\n    }\r\n    <div [class]=\"bodyClass()\">\r\n        <div [class]=\"headerClass()\">\r\n            <div [id]=\"headerId\" [class]=\"titleContainerClass()\">\r\n                @if (data.titleTemplate) {\r\n                    <ng-container [ngTemplateOutlet]=\"data.titleTemplate\"></ng-container>\r\n                } @else {\r\n                    <h2 [class]=\"titleClass()\">{{ data.title }}</h2>\r\n                }\r\n            </div>\r\n            @if (data.closable) {\r\n                <div [class]=\"closeButtonContainerClass()\">\r\n                    <button\r\n                        monaButton\r\n                        look=\"ghost\"\r\n                        size=\"small\"\r\n                        [iconOnly]=\"true\"\r\n                        aria-label=\"Close dialog\"\r\n                        (click)=\"onCloseClick()\">\r\n                        <svg lucideX [size]=\"16\"></svg>\r\n                    </button>\r\n                </div>\r\n            }\r\n        </div>\r\n\r\n        @let descriptionTemplateId = data.descriptionTemplate ? descriptionId : undefined;\r\n        <div class=\"p-1\" [attr.id]=\"descriptionTemplateId\">\r\n            @if (data.descriptionTemplate) {\r\n                <ng-container [ngTemplateOutlet]=\"data.descriptionTemplate\"></ng-container>\r\n            } @else if (data.description) {\r\n                <p [id]=\"descriptionId\" [class]=\"descriptionClass()\">{{ data.description }}</p>\r\n            }\r\n        </div>\r\n\r\n        <div [class]=\"contentClass()\">\r\n            @if (data.content) {\r\n                <ng-container [ngTemplateOutlet]=\"data.content\"></ng-container>\r\n            } @else if (data.text) {\r\n                <p class=\"select-none\">{{ data.text }}</p>\r\n            }\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n@if (data.footerTemplate || (data.actions | monaAny)) {\r\n    @if (data.footerTemplate) {\r\n        <ng-container [ngTemplateOutlet]=\"data.footerTemplate\"></ng-container>\r\n    } @else {\r\n        <div [class]=\"footerClass()\">\r\n            @for (action of data.actions; track $index) {\r\n                <button\r\n                    monaButton\r\n                    type=\"button\"\r\n                    [class]=\"action.cssClass || ''\"\r\n                    [iconOnly]=\"action.iconOnly || false\"\r\n                    [look]=\"action.look\"\r\n                    [rounded]=\"action.rounded || data.rounded\"\r\n                    (click)=\"onActionClick(action)\">\r\n                    {{ action.text }}\r\n                </button>\r\n            }\r\n        </div>\r\n    }\r\n}\r\n" }]
+        }], ctorParameters: () => [] });
+
+class DialogRef {
+    #options;
+    constructor(options) {
+        this.#options = options;
+    }
+    close(result) {
+        this.#options.close(result);
+    }
+    /**
+     * @description Updates the dialog's content and appearance in place without closing and reopening it.
+     * Only the fields provided are changed; anything omitted keeps its current value.
+     */
+    update(data) {
+        this.#options.update(data);
+    }
+    get close$() {
+        return this.#options.close$;
+    }
+    get closed$() {
+        return this.#options.closed$;
+    }
+    get component() {
+        return this.#options.component;
+    }
+    get element() {
+        return this.#options.element;
+    }
+    get height() {
+        return this.#options.height;
+    }
+    get popupRef() {
+        return this.#options.popupRef;
+    }
+    get result() {
+        return this.#options.result;
+    }
+    get width() {
+        return this.#options.width;
+    }
+}
+
+class DialogReference {
+    #dialogRef;
+    constructor(options, initialData) {
+        this.options = options;
+        this.dialogResult$ = new Subject();
+        this.#dialogRef = new DialogRef(this);
+        this.data = signal(initialData, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    }
+    close(result) {
+        const event = result instanceof PopupCloseEvent
+            ? result
+            : new PopupCloseEvent({ result, via: PopupCloseSource.Programmatic });
+        this.#popupRefOrThrow.close(event);
+    }
+    initializePopupRef(popupRef) {
+        this.options.popupRef = popupRef;
+    }
+    update(data) {
+        this.data.update(current => ({ ...current, ...data }));
+    }
+    get close$() {
+        return this.#popupRefOrThrow.beforeClose.pipe(map(event => event));
+    }
+    get closed$() {
+        return this.#popupRefOrThrow.closed.pipe(map(() => undefined));
+    }
+    get component() {
+        const popupComponent = this.#popupRefOrThrow.component;
+        if (!popupComponent) {
+            return null;
+        }
+        return popupComponent.instance.componentRef ?? null;
+    }
+    get dialogRef() {
+        return this.#dialogRef;
+    }
+    get element() {
+        return this.#popupRefOrThrow.overlayRef.overlayElement;
+    }
+    get height() {
+        return this.element.offsetHeight;
+    }
+    get popupRef() {
+        return this.#popupRefOrThrow;
+    }
+    get #popupRefOrThrow() {
+        if (!this.options.popupRef) {
+            throw new Error("DialogReference: popupRef has not been initialized.");
+        }
+        return this.options.popupRef;
+    }
+    get result() {
+        return this.dialogResult$;
+    }
+    get width() {
+        return this.element.offsetWidth;
+    }
+}
+
+const createDialogInjectorData = (settings) => {
+    return {
+        actions: settings.actions ?? getDefaultActions(settings.type),
+        actionsLayout: settings.actionsLayout ?? "end",
+        closable: settings.closable ?? true,
+        closeOnEscape: settings.closeOnEscape ?? true,
+        content: settings.content,
+        description: settings.description,
+        descriptionTemplate: settings.descriptionTemplate,
+        dialogReference: null,
+        focusedElement: settings.focusedElement ?? null,
+        footerTemplate: settings.footerTemplate,
+        height: settings.height,
+        iconTemplate: settings.iconTemplate,
+        left: settings.left,
+        modal: settings.modal ?? true,
+        rounded: settings.rounded ?? "medium",
+        text: settings.text ?? "",
+        title: settings.title,
+        titleTemplate: settings.titleTemplate,
+        top: settings.top,
+        type: settings.type,
+        width: settings.width ?? 450
+    };
+};
+function getDefaultActions(type) {
+    if (type === "confirm") {
+        return [
+            { cssClass: "", iconOnly: false, look: "primary", rounded: "medium", text: "OK" },
+            { cssClass: "", iconOnly: false, look: "default", rounded: "medium", text: "Cancel" }
+        ];
+    }
+    return [{ cssClass: "", iconOnly: false, look: "primary", rounded: "medium", text: "OK" }];
+}
+
+class DialogService {
+    #document = inject(DOCUMENT);
+    #injector = inject(Injector);
+    #popupService = inject(PopupService);
+    show(settings) {
+        const injectorData = createDialogInjectorData(settings);
+        const dialogReference = new DialogReference({}, injectorData);
+        injectorData.dialogReference = dialogReference;
+        const popupRef = this.#popupService.create({
+            anchor: this.#document.body,
+            backdropClass: settings.modal
+                ? ["fixed", "inset-0", "bg-background/50", "transition-opacity", "z-40", "backdrop-blur-xs"]
+                : "transparent",
+            closeOnBackdropClick: false,
+            closeOnEscape: injectorData.closeOnEscape,
+            closeOnOutsideClick: false,
+            content: DialogContentComponent,
+            data: injectorData,
+            hasBackdrop: settings.modal ?? true,
+            height: settings.height ?? "fit-content",
+            maxHeight: settings.maxHeight,
+            maxWidth: settings.maxWidth,
+            minHeight: settings.minHeight,
+            minWidth: settings.minWidth,
+            positionStrategy: "global",
+            providers: [{ provide: DialogRef, useFactory: forwardRef(() => dialogReference.dialogRef) }],
+            width: settings.width
+        });
+        dialogReference.initializePopupRef(popupRef);
+        afterNextRender({
+            read: () => {
+                const element = popupRef.overlayRef.overlayElement;
+                setWindowStyles(element, settings);
+            }
+        }, { injector: this.#injector });
+        return dialogReference.dialogRef;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DialogService, providedIn: "root" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DialogService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: "root"
+                }]
+        }] });
+
+class DialogComponent {
+    #destroyRef;
+    #dialogService;
+    #dialogRef;
+    constructor() {
+        this.#destroyRef = inject(DestroyRef);
+        this.#dialogService = inject(DialogService);
+        this.contentTemplate = contentChild(DialogContentTemplateDirective, { ...(ngDevMode ? { debugName: "contentTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        this.descriptionTemplate = contentChild(DialogDescriptionTemplateDirective, { ...(ngDevMode ? { debugName: "descriptionTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        this.footerTemplate = contentChild(DialogFooterTemplateDirective, { ...(ngDevMode ? { debugName: "footerTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        this.iconTemplate = contentChild(DialogIconTemplateDirective, { ...(ngDevMode ? { debugName: "iconTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        this.titleTemplate = contentChild(DialogTitleTemplateDirective, { ...(ngDevMode ? { debugName: "titleTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        /**
+         * @description Emitted when the user clicks an action button. Call `event.preventDefault()` on the emitted
+         * `DialogActionEvent` to keep the dialog open.
+         */
+        this.action = output();
+        /**
+         * @description Sets the actions of the dialog.
+         * @default []
+         */
+        this.actions = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "actions" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the layout of the actions in the dialog footer.
+         * @default "end"
+         */
+        this.actionsLayout = input("end", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "actionsLayout" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the visibility of the close button in the dialog header.
+         * @default true
+         */
+        this.closable = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "closable" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Emits when the user clicks on the close button or presses the escape key.
+         * This event is preventable.
+         */
+        this.close = output();
+        /**
+         * @description Emits when the dialog is closed.
+         */
+        this.closed = output();
+        /**
+         * @description Sets whether the dialog should close when the escape key is pressed.
+         * @default true
+         */
+        this.closeOnEscape = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "closeOnEscape" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the description of the dialog.
+         */
+        this.description = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "description" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the element that should receive focus when the dialog is opened. When omitted, focus
+         * moves to the first focusable element automatically.
+         */
+        this.focusedElement = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "focusedElement" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the height of the dialog.
+         */
+        this.height = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "height" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the left position of the dialog.
+         */
+        this.left = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "left" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the maximum height of the dialog.
+         */
+        this.maxHeight = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "maxHeight" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the maximum width of the dialog.
+         */
+        this.maxWidth = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "maxWidth" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the minimum height of the dialog.
+         */
+        this.minHeight = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "minHeight" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the minimum width of the dialog.
+         */
+        this.minWidth = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "minWidth" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets whether the dialog should have an overlay behind it.
+         * @default true
+         */
+        this.modal = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "modal" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Border-radius preset applied to the component.
+         * @default "medium"
+         */
+        this.rounded = input("medium", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Primary text content displayed by the component.
+         */
+        this.text = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "text" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Title text displayed in the component header or trigger.
+         */
+        this.title = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "title" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the top position of the dialog.
+         */
+        this.top = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "top" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Visual severity type of the dialog, controlling its icon and semantic role. Set to `null` to
+         * render the dialog without an icon.
+         * @default "info"
+         */
+        this.type = input("info", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the width of the dialog.
+         */
+        this.width = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "width" }] : /* istanbul ignore next */ []));
+        afterNextRender({
+            read: () => this.#openDialog()
+        });
+        effect(() => {
+            const actions = this.actions() ? [...this.actions()] : undefined;
+            const update = {
+                actions,
+                actionsLayout: this.actionsLayout(),
+                closable: this.closable(),
+                description: this.description(),
+                rounded: this.rounded(),
+                text: this.text(),
+                title: this.title(),
+                type: this.type()
+            };
+            this.#dialogRef?.update(update);
+        });
+        this.#destroyRef.onDestroy(() => this.#dialogRef?.close());
+    }
+    #openDialog() {
+        const actions = this.actions() ? [...this.actions()] : undefined;
+        this.#dialogRef = this.#dialogService.show({
+            actions,
+            actionsLayout: this.actionsLayout(),
+            closable: this.closable(),
+            closeOnEscape: this.closeOnEscape(),
+            content: this.contentTemplate(),
+            description: this.description(),
+            descriptionTemplate: this.descriptionTemplate(),
+            focusedElement: this.focusedElement(),
+            footerTemplate: this.footerTemplate(),
+            height: this.height(),
+            iconTemplate: this.iconTemplate(),
+            left: this.left(),
+            maxHeight: this.maxHeight(),
+            maxWidth: this.maxWidth(),
+            minHeight: this.minHeight(),
+            minWidth: this.minWidth(),
+            modal: this.modal(),
+            rounded: this.rounded(),
+            text: this.text(),
+            title: this.title(),
+            titleTemplate: this.titleTemplate(),
+            top: this.top(),
+            type: this.type(),
+            width: this.width()
+        });
+        this.#dialogRef.result.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe(result => {
+            if (result.viaClose) {
+                this.#dialogRef?.close(new PopupCloseEvent({ via: PopupCloseSource.CloseButton }));
+                return;
+            }
+            const event = new DialogActionEvent(result.action);
+            this.action.emit(event);
+            if (!event.isDefaultPrevented()) {
+                this.#dialogRef?.close();
+            }
+        });
+        this.#dialogRef.close$.pipe(takeUntil(this.#dialogRef.popupRef.closed)).subscribe(event => {
+            this.close.emit(event);
+        });
+        this.#dialogRef.closed$.pipe(take(1)).subscribe(() => {
+            this.closed.emit();
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: DialogComponent, isStandalone: true, selector: "mona-dialog", inputs: { actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, actionsLayout: { classPropertyName: "actionsLayout", publicName: "actionsLayout", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, focusedElement: { classPropertyName: "focusedElement", publicName: "focusedElement", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, left: { classPropertyName: "left", publicName: "left", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, modal: { classPropertyName: "modal", publicName: "modal", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, top: { classPropertyName: "top", publicName: "top", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { action: "action", close: "close", closed: "closed" }, host: { classAttribute: "hidden" }, queries: [{ propertyName: "contentTemplate", first: true, predicate: DialogContentTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "descriptionTemplate", first: true, predicate: DialogDescriptionTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "footerTemplate", first: true, predicate: DialogFooterTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "iconTemplate", first: true, predicate: DialogIconTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "titleTemplate", first: true, predicate: DialogTitleTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: ``, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DialogComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "mona-dialog",
+                    template: ``,
+                    host: {
+                        class: "hidden"
+                    }
+                }]
+        }], ctorParameters: () => [], propDecorators: { contentTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DialogContentTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], descriptionTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DialogDescriptionTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], footerTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DialogFooterTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], iconTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DialogIconTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], titleTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DialogTitleTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], action: [{ type: i0.Output, args: ["action"] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], actionsLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionsLayout", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], close: [{ type: i0.Output, args: ["close"] }], closed: [{ type: i0.Output, args: ["closed"] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], focusedElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusedElement", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], left: [{ type: i0.Input, args: [{ isSignal: true, alias: "left", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], modal: [{ type: i0.Input, args: [{ isSignal: true, alias: "modal", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], top: [{ type: i0.Input, args: [{ isSignal: true, alias: "top", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }] } });
+
+/*
+ * Public API Surface of @nanahoshi/mona-ui/dialog
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DialogActionEvent, DialogComponent, DialogContentTemplateDirective, DialogDescriptionTemplateDirective, DialogFooterTemplateDirective, DialogIconTemplateDirective, DialogRef, DialogService, DialogTitleTemplateDirective };
+//# sourceMappingURL=nanahoshi-mona-ui-dialog.mjs.map