@nanahoshi/mona-ui 0.1.0 → 0.2.0

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

@@ -1,16 +1,15 @@
 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 { Subject, map, takeUntil, take } from 'rxjs';
 import { PreventableEvent, AnyPipe } from '@nanahoshi/mona-ui/common';
-import { createElementControlId, focusElement, setWindowStyles } from '@nanahoshi/mona-ui/internal';
+import { themeOverlaySurfaceClasses, 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 {
@@ -85,12 +84,10 @@ class DialogActionEvent extends PreventableEvent {
     }
 }
 
-const dialogBaseVariants = cva(`
-        flex flex-col gap-0.5
-        w-full h-full
-        bg-background
-        border border-border shadow-sm
-        outline-none overflow-hidden
+const dialogBaseThemeVariants = cva(`
+        flex h-full w-full flex-col gap-0.5 overflow-hidden
+        ${themeOverlaySurfaceClasses} text-foreground
+        border border-border shadow-(--shadow-overlay) outline-none
     `, {
     variants: {
         rounded: {
@@ -104,12 +101,11 @@ const dialogBaseVariants = cva(`
         rounded: "medium"
     }
 });
-const dialogContentContainerVariants = cva(`
-        flex flex-row gap-1 flex-1
+const dialogContentContainerThemeVariants = cva(`
+        flex flex-1 flex-row gap-1
     `);
-const dialogBodyVariants = cva(`
-        flex flex-col gap-0 pb-2
-        w-full h-full pr-2
+const dialogBodyThemeVariants = cva(`
+        flex h-full w-full flex-col gap-0 pr-2 pb-2
     `, {
     variants: {
         hasIcon: {
@@ -118,18 +114,18 @@ const dialogBodyVariants = cva(`
         }
     }
 });
-const dialogHeaderVariants = cva(`
-        flex flex-row gap-2
-        pt-4 select-none
+const dialogHeaderThemeVariants = 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 dialogIconContainerThemeVariants = 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
+const dialogIconThemeVariants = cva(`
+        relative h-fit w-fit rounded-full border p-1.5
+        [&>span]:absolute [&>span]:flex [&>span]:rounded-full
+        [&>span]:-top-3 [&>span]:-right-3 [&>span]:-bottom-3 [&>span]:-left-3
+        [&>span]:min-h-full [&>span]:min-w-full [&>span]:border
     `, {
     variants: {
         type: {
@@ -144,27 +140,29 @@ const dialogIconVariants = cva(`
         type: "info"
     }
 });
-const dialogTitleContainerVariants = cva(`
-        flex flex-1 items-center justify-start select-none p-1
+const dialogTitleContainerThemeVariants = cva(`
+        flex flex-1 items-center justify-start p-1
+        select-none
     `);
-const dialogCloseButtonContainerVariants = cva(`
-        flex items-start justify-end
+const dialogCloseButtonContainerThemeVariants = cva(`
+        flex items-start justify-end
     `);
-const dialogTitleVariants = cva(`
-        text-lg font-semibold leading-none tracking-tight
+const dialogTitleThemeVariants = cva(`
+        text-lg font-semibold leading-none tracking-tight
     `);
-const dialogDescriptionVariants = cva(`
-        text-sm text-muted-foreground
-        select-none
+const dialogDescriptionThemeVariants = cva(`
+        text-sm text-muted-foreground
+        select-none
     `);
-const dialogContentVariants = cva(`
-        flex-1 overflow-auto p-1
+const dialogContentThemeVariants = cva(`
+        flex-1 overflow-auto p-1
+        [scrollbar-color:var(--color-scrollbar-thumb)_var(--color-scrollbar-track)] [scrollbar-width:thin]
     `);
-const dialogFooterVariants = cva(`
-        flex flex-row
-        gap-2 px-4 py-2
-        border-t border-border
-        select-none
+const dialogFooterThemeVariants = cva(`
+        flex flex-row gap-2 px-4 py-2
+        select-none
+        bg-surface-muted
+        border-t border-border-subtle
     `, {
     variants: {
         layout: {
@@ -185,108 +183,10 @@ const dialogFooterVariants = cva(`
     }
 });
 
-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);
@@ -298,33 +198,27 @@ class DialogContentComponent {
             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 });
+            return dialogBaseThemeVariants({ 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 });
+            return dialogBodyThemeVariants({ hasIcon });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "bodyClass" }] : /* istanbul ignore next */ []));
         this.closeButtonContainerClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return dialogCloseButtonContainerThemeVariants(theme)();
+            return dialogCloseButtonContainerThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "closeButtonContainerClass" }] : /* istanbul ignore next */ []));
         this.contentClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return dialogContentThemeVariants(theme)();
+            return dialogContentThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "contentClass" }] : /* istanbul ignore next */ []));
         this.contentContainerClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return dialogContentContainerThemeVariants(theme)();
+            return dialogContentContainerThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "contentContainerClass" }] : /* istanbul ignore next */ []));
         this.describedById = computed(() => {
@@ -333,8 +227,7 @@ class DialogContentComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "describedById" }] : /* istanbul ignore next */ []));
         this.descriptionClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return dialogDescriptionThemeVariants(theme)();
+            return dialogDescriptionThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "descriptionClass" }] : /* istanbul ignore next */ []));
         this.descriptionId = createElementControlId();
@@ -342,15 +235,13 @@ class DialogContentComponent {
         ...(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 });
+            return dialogFooterThemeVariants({ layout, rounded });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "footerClass" }] : /* istanbul ignore next */ []));
         this.headerClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return dialogHeaderThemeVariants(theme)();
+            return dialogHeaderThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "headerClass" }] : /* istanbul ignore next */ []));
         this.headerId = createElementControlId();
@@ -360,14 +251,12 @@ class DialogContentComponent {
         }, /* @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 });
+            return dialogIconThemeVariants({ type });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "iconClass" }] : /* istanbul ignore next */ []));
         this.iconContainerClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return dialogIconContainerThemeVariants(theme)();
+            return dialogIconContainerThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "iconContainerClass" }] : /* istanbul ignore next */ []));
         this.role = computed(() => {
@@ -376,13 +265,11 @@ class DialogContentComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
         this.titleClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return dialogTitleThemeVariants(theme)();
+            return dialogTitleThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "titleClass" }] : /* istanbul ignore next */ []));
         this.titleContainerClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return dialogTitleContainerThemeVariants(theme)();
+            return dialogTitleContainerThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "titleContainerClass" }] : /* istanbul ignore next */ []));
         this.#trapFocus.autoCapture = true;
@@ -412,7 +299,7 @@ class DialogContentComponent {
         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 }); }
+    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();\n@let data = dialogData();\n\n<div [class]=\"contentContainerClass()\">\n    @if (dialogIcon) {\n        <div [class]=\"iconContainerClass()\">\n            @if (data.iconTemplate) {\n                <ng-container [ngTemplateOutlet]=\"data.iconTemplate\"></ng-container>\n            } @else {\n                <div [class]=\"iconClass()\">\n                    <span aria-hidden=\"true\"></span>\n                    <svg [lucideIcon]=\"dialogIcon.icon\" [size]=\"24\" [style.color]=\"dialogIcon.color\"></svg>\n                </div>\n            }\n        </div>\n    }\n    <div [class]=\"bodyClass()\">\n        <div [class]=\"headerClass()\">\n            <div [id]=\"headerId\" [class]=\"titleContainerClass()\">\n                @if (data.titleTemplate) {\n                    <ng-container [ngTemplateOutlet]=\"data.titleTemplate\"></ng-container>\n                } @else {\n                    <h2 [class]=\"titleClass()\">{{ data.title }}</h2>\n                }\n            </div>\n            @if (data.closable) {\n                <div [class]=\"closeButtonContainerClass()\">\n                    <button\n                        monaButton\n                        look=\"ghost\"\n                        size=\"small\"\n                        [iconOnly]=\"true\"\n                        aria-label=\"Close dialog\"\n                        (click)=\"onCloseClick()\">\n                        <svg lucideX [size]=\"16\"></svg>\n                    </button>\n                </div>\n            }\n        </div>\n\n        @let descriptionTemplateId = data.descriptionTemplate ? descriptionId : undefined;\n        <div class=\"p-1\" [attr.id]=\"descriptionTemplateId\">\n            @if (data.descriptionTemplate) {\n                <ng-container [ngTemplateOutlet]=\"data.descriptionTemplate\"></ng-container>\n            } @else if (data.description) {\n                <p [id]=\"descriptionId\" [class]=\"descriptionClass()\">{{ data.description }}</p>\n            }\n        </div>\n\n        <div [class]=\"contentClass()\">\n            @if (data.content) {\n                <ng-container [ngTemplateOutlet]=\"data.content\"></ng-container>\n            } @else if (data.text) {\n                <p class=\"select-none\">{{ data.text }}</p>\n            }\n        </div>\n    </div>\n</div>\n\n@if (data.footerTemplate || (data.actions | monaAny)) {\n    @if (data.footerTemplate) {\n        <ng-container [ngTemplateOutlet]=\"data.footerTemplate\"></ng-container>\n    } @else {\n        <div [class]=\"footerClass()\">\n            @for (action of data.actions; track $index) {\n                <button\n                    monaButton\n                    type=\"button\"\n                    [class]=\"action.cssClass || ''\"\n                    [iconOnly]=\"action.iconOnly || false\"\n                    [look]=\"action.look\"\n                    [rounded]=\"action.rounded || data.rounded\"\n                    (click)=\"onActionClick(action)\">\n                    {{ action.text }}\n                </button>\n            }\n        </div>\n    }\n}\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,
@@ -421,7 +308,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         "[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" }]
+                    }, hostDirectives: [CdkTrapFocus], template: "@let dialogIcon = icon();\n@let data = dialogData();\n\n<div [class]=\"contentContainerClass()\">\n    @if (dialogIcon) {\n        <div [class]=\"iconContainerClass()\">\n            @if (data.iconTemplate) {\n                <ng-container [ngTemplateOutlet]=\"data.iconTemplate\"></ng-container>\n            } @else {\n                <div [class]=\"iconClass()\">\n                    <span aria-hidden=\"true\"></span>\n                    <svg [lucideIcon]=\"dialogIcon.icon\" [size]=\"24\" [style.color]=\"dialogIcon.color\"></svg>\n                </div>\n            }\n        </div>\n    }\n    <div [class]=\"bodyClass()\">\n        <div [class]=\"headerClass()\">\n            <div [id]=\"headerId\" [class]=\"titleContainerClass()\">\n                @if (data.titleTemplate) {\n                    <ng-container [ngTemplateOutlet]=\"data.titleTemplate\"></ng-container>\n                } @else {\n                    <h2 [class]=\"titleClass()\">{{ data.title }}</h2>\n                }\n            </div>\n            @if (data.closable) {\n                <div [class]=\"closeButtonContainerClass()\">\n                    <button\n                        monaButton\n                        look=\"ghost\"\n                        size=\"small\"\n                        [iconOnly]=\"true\"\n                        aria-label=\"Close dialog\"\n                        (click)=\"onCloseClick()\">\n                        <svg lucideX [size]=\"16\"></svg>\n                    </button>\n                </div>\n            }\n        </div>\n\n        @let descriptionTemplateId = data.descriptionTemplate ? descriptionId : undefined;\n        <div class=\"p-1\" [attr.id]=\"descriptionTemplateId\">\n            @if (data.descriptionTemplate) {\n                <ng-container [ngTemplateOutlet]=\"data.descriptionTemplate\"></ng-container>\n            } @else if (data.description) {\n                <p [id]=\"descriptionId\" [class]=\"descriptionClass()\">{{ data.description }}</p>\n            }\n        </div>\n\n        <div [class]=\"contentClass()\">\n            @if (data.content) {\n                <ng-container [ngTemplateOutlet]=\"data.content\"></ng-container>\n            } @else if (data.text) {\n                <p class=\"select-none\">{{ data.text }}</p>\n            }\n        </div>\n    </div>\n</div>\n\n@if (data.footerTemplate || (data.actions | monaAny)) {\n    @if (data.footerTemplate) {\n        <ng-container [ngTemplateOutlet]=\"data.footerTemplate\"></ng-container>\n    } @else {\n        <div [class]=\"footerClass()\">\n            @for (action of data.actions; track $index) {\n                <button\n                    monaButton\n                    type=\"button\"\n                    [class]=\"action.cssClass || ''\"\n                    [iconOnly]=\"action.iconOnly || false\"\n                    [look]=\"action.look\"\n                    [rounded]=\"action.rounded || data.rounded\"\n                    (click)=\"onActionClick(action)\">\n                    {{ action.text }}\n                </button>\n            }\n        </div>\n    }\n}\n" }]
         }], ctorParameters: () => [] });
 
 class DialogRef {