@nanahoshi/mona-ui 0.18.5 → 0.19.0

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

@@ -1,5 +1,5 @@
 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 { Directive, inject, ElementRef, computed, afterNextRender, Component, signal, DOCUMENT, Injector, forwardRef, Injectable, DestroyRef, contentChild, TemplateRef, output, input, effect } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { PopupDataInjectionToken, PopupCloseEvent, PopupCloseSource, PopupService } from '@nanahoshi/mona-ui/popup';
 import { Subject, map, takeUntil, take } from 'rxjs';
@@ -10,6 +10,7 @@ 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 { MonaI18nService, mergeMessages } from '@nanahoshi/mona-ui/i18n';
 import { cva } from 'class-variance-authority';
 
 class DialogContentTemplateDirective {
@@ -84,6 +85,12 @@ class DialogActionEvent extends PreventableEvent {
     }
 }
 
+const DIALOG_DEFAULT_MESSAGES = {
+    cancel: "Cancel",
+    closeDialog: "Close dialog",
+    ok: "OK"
+};
+
 const dialogBaseThemeVariants = cva(`
         flex h-full w-full flex-col gap-0.5 overflow-hidden
         ${themeOverlaySurfaceClasses} text-foreground
@@ -105,12 +112,12 @@ const dialogContentContainerThemeVariants = cva(`
         flex flex-1 flex-row gap-1
     `);
 const dialogBodyThemeVariants = cva(`
-        flex h-full w-full flex-col gap-0 pr-2 pb-2
+        flex h-full w-full flex-col gap-0 pe-2 pb-2
     `, {
     variants: {
         hasIcon: {
             true: "",
-            false: "pl-5"
+            false: "ps-5"
         }
     }
 });
@@ -119,12 +126,12 @@ const dialogHeaderThemeVariants = cva(`
         select-none
     `);
 const dialogIconContainerThemeVariants = cva(`
-        flex items-start justify-center pt-8 pr-4 pl-6
+        flex items-start justify-center pt-8 pe-4 ps-6
     `);
 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]:-inset-3
         [&>span]:min-h-full [&>span]:min-w-full [&>span]:border
     `, {
     variants: {
@@ -185,11 +192,14 @@ const dialogFooterThemeVariants = cva(`
 
 class DialogContentComponent {
     #hostElementRef;
+    #i18n;
     #iconMap;
     #injectedData;
+    #localeMessages;
     #trapFocus;
     constructor() {
         this.#hostElementRef = inject(ElementRef);
+        this.#i18n = inject(MonaI18nService);
         this.#iconMap = {
             confirm: { color: "var(--color-success)", icon: LucideBadgeQuestionMark },
             error: { color: "var(--color-error)", icon: LucideOctagonX },
@@ -198,7 +208,16 @@ class DialogContentComponent {
             warning: { color: "var(--color-warning)", icon: LucideOctagonAlert }
         };
         this.#injectedData = inject(PopupDataInjectionToken);
+        this.#localeMessages = this.#i18n.componentMessages("dialog", DIALOG_DEFAULT_MESSAGES);
         this.#trapFocus = inject(CdkTrapFocus);
+        this.actions = computed(() => {
+            const data = this.dialogData();
+            if (data.actions != null) {
+                return data.actions;
+            }
+            return this.getDefaultActions(data.type);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "actions" }] : /* istanbul ignore next */ []));
         this.baseClass = computed(() => {
             const rounded = this.dialogData().rounded;
             return dialogBaseThemeVariants({ rounded });
@@ -259,6 +278,10 @@ class DialogContentComponent {
             return dialogIconContainerThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "iconContainerClass" }] : /* istanbul ignore next */ []));
+        this.messages = computed(() => {
+            return mergeMessages(this.#localeMessages(), this.dialogData().messages);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
         this.role = computed(() => {
             const type = this.dialogData().type;
             return type === "confirm" || type === "error" || type === "warning" ? "alertdialog" : "dialog";
@@ -298,17 +321,26 @@ class DialogContentComponent {
         const dialogElement = this.#hostElementRef.nativeElement;
         focusElement(dialogElement, element);
     }
+    getDefaultActions(type) {
+        if (type === "confirm") {
+            return [
+                { cssClass: "", iconOnly: false, look: "primary", rounded: "medium", text: this.messages().ok },
+                { cssClass: "", iconOnly: false, look: "default", rounded: "medium", text: this.messages().cancel }
+            ];
+        }
+        return [{ cssClass: "", iconOnly: false, look: "primary", rounded: "medium", text: this.messages().ok }];
+    }
     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();\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", "type", "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                        [attr.aria-label]=\"messages().closeDialog\"\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 || (actions() | monaAny)) {\n    @if (data.footerTemplate) {\n        <ng-container [ngTemplateOutlet]=\"data.footerTemplate\"></ng-container>\n    } @else {\n        <div [class]=\"footerClass()\">\n            @for (action of 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", "type", "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" }] }); }
 }
 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: {
+            args: [{ imports: [ButtonDirective, NgTemplateOutlet, AnyPipe, LucideX, LucideDynamicIcon], host: {
                         "[class]": "baseClass()",
                         "[attr.aria-describedby]": "describedById()",
                         "[attr.aria-labelledby]": "headerId",
                         "[attr.role]": "role()"
-                    }, 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" }]
+                    }, 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                        [attr.aria-label]=\"messages().closeDialog\"\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 || (actions() | monaAny)) {\n    @if (data.footerTemplate) {\n        <ng-container [ngTemplateOutlet]=\"data.footerTemplate\"></ng-container>\n    } @else {\n        <div [class]=\"footerClass()\">\n            @for (action of 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 {
@@ -414,7 +446,7 @@ class DialogReference {
 
 const createDialogInjectorData = (settings) => {
     return {
-        actions: settings.actions ?? getDefaultActions(settings.type),
+        actions: settings.actions,
         actionsLayout: settings.actionsLayout ?? "end",
         closable: settings.closable ?? true,
         closeOnEscape: settings.closeOnEscape ?? true,
@@ -427,6 +459,7 @@ const createDialogInjectorData = (settings) => {
         height: settings.height,
         iconTemplate: settings.iconTemplate,
         left: settings.left,
+        messages: settings.messages,
         modal: settings.modal ?? true,
         rounded: settings.rounded ?? "medium",
         text: settings.text ?? "",
@@ -437,15 +470,6 @@ const createDialogInjectorData = (settings) => {
         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);
@@ -533,17 +557,18 @@ class DialogComponent {
          * @description Emits when the user clicks on the close button or presses the escape key.
          * This event is preventable.
          */
+        // eslint-disable-next-line @angular-eslint/no-output-native
         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 Emits when the dialog is closed.
+         */
+        this.closed = output();
         /**
          * @description Sets the description of the dialog.
          */
@@ -575,6 +600,11 @@ class DialogComponent {
          */
         this.maxWidth = input(/* @ts-ignore */
         ...(ngDevMode ? [undefined, { debugName: "maxWidth" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the custom messages for the dialog.
+         */
+        this.messages = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "messages" }] : /* istanbul ignore next */ []));
         /**
          * @description Sets the minimum height of the dialog.
          */
@@ -634,6 +664,7 @@ class DialogComponent {
                 actionsLayout: this.actionsLayout(),
                 closable: this.closable(),
                 description: this.description(),
+                messages: this.messages(),
                 rounded: this.rounded(),
                 text: this.text(),
                 title: this.title(),
@@ -660,6 +691,7 @@ class DialogComponent {
             left: this.left(),
             maxHeight: this.maxHeight(),
             maxWidth: this.maxWidth(),
+            messages: this.messages(),
             minHeight: this.minHeight(),
             minWidth: this.minWidth(),
             modal: this.modal(),
@@ -690,7 +722,7 @@ class DialogComponent {
         });
     }
     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 }); }
+    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 }, messages: { classPropertyName: "messages", publicName: "messages", 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,
@@ -701,7 +733,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         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 }] }] } });
+        }], 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"] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], 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 }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", 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
@@ -711,5 +743,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { DialogActionEvent, DialogComponent, DialogContentTemplateDirective, DialogDescriptionTemplateDirective, DialogFooterTemplateDirective, DialogIconTemplateDirective, DialogRef, DialogService, DialogTitleTemplateDirective };
+export { DIALOG_DEFAULT_MESSAGES, DialogActionEvent, DialogComponent, DialogContentTemplateDirective, DialogDescriptionTemplateDirective, DialogFooterTemplateDirective, DialogIconTemplateDirective, DialogRef, DialogService, DialogTitleTemplateDirective };
 //# sourceMappingURL=nanahoshi-mona-ui-dialog.mjs.map

package/fesm2022/nanahoshi-mona-ui-dropdown-list.mjs

@@ -7,6 +7,7 @@ import { DropdownListService, DropdownService, DropdownFooterTemplateDirective,
 import { themeControlSurfaceClasses, createElementControlId, isTypeaheadKey, setupTypeahead } from '@nanahoshi/mona-ui/internal';
 import { IndicatorIconComponent } from '@nanahoshi/mona-ui/internal/indicator-icon';
 import { ListService, ListComponent, ListItemTemplateDirective, ListGroupHeaderTemplateDirective, ListFooterTemplateDirective, ListHeaderTemplateDirective, ListNoDataTemplateDirective } from '@nanahoshi/mona-ui/internal/list';
+import { MonaI18nService } from '@nanahoshi/mona-ui/i18n';
 import { Subject } from 'rxjs';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
@@ -22,6 +23,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }] });
 
+const DROPDOWN_LIST_DEFAULT_MESSAGES = {
+    clear: "Clear"
+};
+
 const dropdownListInputThemeVariants = cva(`
         inline-flex items-center
         cursor-pointer select-none
@@ -87,17 +92,19 @@ class DropdownListComponent {
     #dropdownListService;
     #dropdownService;
     #hostElementRef;
-    #navigatedItem;
+    #i18n;
     #listService;
+    #navigatedItem;
     #typeaheadKey;
     constructor() {
         this.#destroyRef = inject(DestroyRef);
         this.#dropdownListService = inject(DropdownListService);
         this.#dropdownService = inject(DropdownService);
         this.#hostElementRef = inject((ElementRef));
+        this.#i18n = inject(MonaI18nService);
+        this.#listService = inject(ListService);
         this.#navigatedItem = linkedSignal(() => this.selectedDataItem(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#navigatedItem" }] : /* istanbul ignore next */ []));
-        this.#listService = inject(ListService);
         this.#typeaheadKey = new Subject();
         this.activeDescendant = computed(() => {
             const highlightedItem = this.#listService.highlightedItem();
@@ -148,6 +155,7 @@ class DropdownListComponent {
             return twMerge(variantClass, userClass);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "listPopupClass" }] : /* istanbul ignore next */ []));
+        this.messages = this.#i18n.componentMessages("dropdownList", DROPDOWN_LIST_DEFAULT_MESSAGES);
         this.noDataTemplate = contentChild(DropdownNoDataTemplateDirective, { ...(ngDevMode ? { debugName: "noDataTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
         this.popupTemplate = viewChild.required("popupTemplate", /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "popupTemplate" }] : /* istanbul ignore next */ []));
@@ -557,7 +565,7 @@ class DropdownListComponent {
                 useExisting: forwardRef(() => DropdownListComponent),
                 multi: false
             }
-        ], queries: [{ propertyName: "footerTemplate", first: true, predicate: DropdownFooterTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "groupHeaderTemplate", first: true, predicate: DropdownGroupHeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "headerTemplate", first: true, predicate: DropdownHeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "itemTemplate", first: true, predicate: DropdownItemTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "noDataTemplate", first: true, predicate: DropdownNoDataTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "prefixTemplate", first: true, predicate: DropdownPrefixTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "valueTemplate", first: true, predicate: DropdownListValueTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.DropdownDataHandlerDirective }, { directive: i1.DropdownListPopupHandlerDirective }], ngImport: i0, template: "@if (prefixTemplate()) {\n    <span [class]=\"affixClass()\">\n        <ng-container [ngTemplateOutlet]=\"prefixTemplate()\"></ng-container>\n    </span>\n}\n\n<span [class]=\"valueContainerClass()\">\n    @if (!valueTemplate()) {\n        <span>\n            @if (selectedListItem()) {\n                <span>{{ valueText() }}</span>\n            } @else {\n                <span>{{ placeholder() }}</span>\n            }\n        </span>\n    } @else {\n        <ng-container\n            [ngTemplateOutlet]=\"valueTemplate()\"\n            [ngTemplateOutletContext]=\"{ $implicit: selectedDataItem() }\"></ng-container>\n    }\n</span>\n\n@if (selectedListItem() && showClearButton() && !loading()) {\n    <mona-indicator-icon\n        preset=\"clear\"\n        [interactive]=\"true\"\n        label=\"Clear\"\n        (activate)=\"onValueClear($event)\"></mona-indicator-icon>\n}\n\n@if (loading()) {\n    <mona-indicator-icon preset=\"loading\" [size]=\"12\"></mona-indicator-icon>\n}\n\n<mona-indicator-icon preset=\"dropdown\" [size]=\"18\"></mona-indicator-icon>\n\n<span monaDropdownLiveRegion></span>\n\n<ng-template #popupTemplate>\n    <div [class]=\"listPopupClass()\">\n        <mona-list [listId]=\"listId\" [focusOnMount]=\"false\" [size]=\"size()\" (itemSelect)=\"onItemSelect($event)\">\n            @if (footerTemplate()) {\n                <ng-template monaListFooterTemplate>\n                    <ng-container [ngTemplateOutlet]=\"footerTemplate()\"></ng-container>\n                </ng-template>\n            }\n            @if (groupHeaderTemplate()) {\n                <ng-template monaListGroupHeaderTemplate let-group>\n                    <ng-container\n                        [ngTemplateOutlet]=\"groupHeaderTemplate()\"\n                        [ngTemplateOutletContext]=\"{ $implicit: group }\"></ng-container>\n                </ng-template>\n            }\n            @if (headerTemplate()) {\n                <ng-template monaListHeaderTemplate>\n                    <ng-container [ngTemplateOutlet]=\"headerTemplate()\"></ng-container>\n                </ng-template>\n            }\n            @if (itemTemplate()) {\n                <ng-template monaListItemTemplate let-dataItem>\n                    <ng-container\n                        [ngTemplateOutlet]=\"itemTemplate()\"\n                        [ngTemplateOutletContext]=\"{ $implicit: dataItem }\"></ng-container>\n                </ng-template>\n            }\n            @if (noDataTemplate()) {\n                <ng-template monaListNoDataTemplate>\n                    <ng-container [ngTemplateOutlet]=\"noDataTemplate()\"></ng-container>\n                </ng-template>\n            }\n        </mona-list>\n    </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ListComponent, selector: "mona-list", inputs: ["ariaLabel", "data", "focusOnMount", "height", "listClass", "listId", "listItemClass", "listItemStyle", "listStyle", "maxHeight", "maxWidth", "size", "textField", "width"], outputs: ["itemSelect"] }, { kind: "directive", type: ListItemTemplateDirective, selector: "ng-template[monaListItemTemplate]" }, { kind: "directive", type: ListGroupHeaderTemplateDirective, selector: "ng-template[monaListGroupHeaderTemplate]" }, { kind: "directive", type: ListFooterTemplateDirective, selector: "ng-template[monaListFooterTemplate]" }, { kind: "directive", type: ListHeaderTemplateDirective, selector: "ng-template[monaListHeaderTemplate]" }, { kind: "directive", type: ListNoDataTemplateDirective, selector: "ng-template[monaListNoDataTemplate]" }, { kind: "directive", type: DropdownLiveRegionDirective, selector: "span[monaDropdownLiveRegion]" }, { kind: "component", type: IndicatorIconComponent, selector: "mona-indicator-icon", inputs: ["icon", "interactive", "label", "preset", "size", "class"], outputs: ["activate"] }] }); }
+        ], queries: [{ propertyName: "footerTemplate", first: true, predicate: DropdownFooterTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "groupHeaderTemplate", first: true, predicate: DropdownGroupHeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "headerTemplate", first: true, predicate: DropdownHeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "itemTemplate", first: true, predicate: DropdownItemTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "noDataTemplate", first: true, predicate: DropdownNoDataTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "prefixTemplate", first: true, predicate: DropdownPrefixTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "valueTemplate", first: true, predicate: DropdownListValueTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.DropdownDataHandlerDirective }, { directive: i1.DropdownListPopupHandlerDirective }], ngImport: i0, template: "@if (prefixTemplate()) {\n    <span [class]=\"affixClass()\">\n        <ng-container [ngTemplateOutlet]=\"prefixTemplate()\"></ng-container>\n    </span>\n}\n\n<span [class]=\"valueContainerClass()\">\n    @if (!valueTemplate()) {\n        <span>\n            @if (selectedListItem()) {\n                <span>{{ valueText() }}</span>\n            } @else {\n                <span>{{ placeholder() }}</span>\n            }\n        </span>\n    } @else {\n        <ng-container\n            [ngTemplateOutlet]=\"valueTemplate()\"\n            [ngTemplateOutletContext]=\"{ $implicit: selectedDataItem() }\"></ng-container>\n    }\n</span>\n\n@if (selectedListItem() && showClearButton() && !loading()) {\n    <mona-indicator-icon\n        preset=\"clear\"\n        [interactive]=\"true\"\n        [label]=\"messages().clear\"\n        (activate)=\"onValueClear($event)\"></mona-indicator-icon>\n}\n\n@if (loading()) {\n    <mona-indicator-icon preset=\"loading\" [size]=\"12\"></mona-indicator-icon>\n}\n\n<mona-indicator-icon preset=\"dropdown\" [size]=\"18\"></mona-indicator-icon>\n\n<span monaDropdownLiveRegion></span>\n\n<ng-template #popupTemplate>\n    <div [class]=\"listPopupClass()\">\n        <mona-list [listId]=\"listId\" [focusOnMount]=\"false\" [size]=\"size()\" (itemSelect)=\"onItemSelect($event)\">\n            @if (footerTemplate()) {\n                <ng-template monaListFooterTemplate>\n                    <ng-container [ngTemplateOutlet]=\"footerTemplate()\"></ng-container>\n                </ng-template>\n            }\n            @if (groupHeaderTemplate()) {\n                <ng-template monaListGroupHeaderTemplate let-group>\n                    <ng-container\n                        [ngTemplateOutlet]=\"groupHeaderTemplate()\"\n                        [ngTemplateOutletContext]=\"{ $implicit: group }\"></ng-container>\n                </ng-template>\n            }\n            @if (headerTemplate()) {\n                <ng-template monaListHeaderTemplate>\n                    <ng-container [ngTemplateOutlet]=\"headerTemplate()\"></ng-container>\n                </ng-template>\n            }\n            @if (itemTemplate()) {\n                <ng-template monaListItemTemplate let-dataItem>\n                    <ng-container\n                        [ngTemplateOutlet]=\"itemTemplate()\"\n                        [ngTemplateOutletContext]=\"{ $implicit: dataItem }\"></ng-container>\n                </ng-template>\n            }\n            @if (noDataTemplate()) {\n                <ng-template monaListNoDataTemplate>\n                    <ng-container [ngTemplateOutlet]=\"noDataTemplate()\"></ng-container>\n                </ng-template>\n            }\n        </mona-list>\n    </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ListComponent, selector: "mona-list", inputs: ["ariaLabel", "data", "focusOnMount", "height", "listClass", "listId", "listItemClass", "listItemStyle", "listStyle", "maxHeight", "maxWidth", "size", "textField", "width"], outputs: ["itemSelect"] }, { kind: "directive", type: ListItemTemplateDirective, selector: "ng-template[monaListItemTemplate]" }, { kind: "directive", type: ListGroupHeaderTemplateDirective, selector: "ng-template[monaListGroupHeaderTemplate]" }, { kind: "directive", type: ListFooterTemplateDirective, selector: "ng-template[monaListFooterTemplate]" }, { kind: "directive", type: ListHeaderTemplateDirective, selector: "ng-template[monaListHeaderTemplate]" }, { kind: "directive", type: ListNoDataTemplateDirective, selector: "ng-template[monaListNoDataTemplate]" }, { kind: "directive", type: DropdownLiveRegionDirective, selector: "span[monaDropdownLiveRegion]" }, { kind: "component", type: IndicatorIconComponent, selector: "mona-indicator-icon", inputs: ["icon", "interactive", "label", "preset", "size", "class"], outputs: ["activate"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DropdownListComponent, decorators: [{
             type: Component,
@@ -604,7 +612,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         "[attr.tabindex]": "disabled() ? null : 0",
                         "[class]": "baseClass()",
                         "(blur)": "onBlur()"
-                    }, template: "@if (prefixTemplate()) {\n    <span [class]=\"affixClass()\">\n        <ng-container [ngTemplateOutlet]=\"prefixTemplate()\"></ng-container>\n    </span>\n}\n\n<span [class]=\"valueContainerClass()\">\n    @if (!valueTemplate()) {\n        <span>\n            @if (selectedListItem()) {\n                <span>{{ valueText() }}</span>\n            } @else {\n                <span>{{ placeholder() }}</span>\n            }\n        </span>\n    } @else {\n        <ng-container\n            [ngTemplateOutlet]=\"valueTemplate()\"\n            [ngTemplateOutletContext]=\"{ $implicit: selectedDataItem() }\"></ng-container>\n    }\n</span>\n\n@if (selectedListItem() && showClearButton() && !loading()) {\n    <mona-indicator-icon\n        preset=\"clear\"\n        [interactive]=\"true\"\n        label=\"Clear\"\n        (activate)=\"onValueClear($event)\"></mona-indicator-icon>\n}\n\n@if (loading()) {\n    <mona-indicator-icon preset=\"loading\" [size]=\"12\"></mona-indicator-icon>\n}\n\n<mona-indicator-icon preset=\"dropdown\" [size]=\"18\"></mona-indicator-icon>\n\n<span monaDropdownLiveRegion></span>\n\n<ng-template #popupTemplate>\n    <div [class]=\"listPopupClass()\">\n        <mona-list [listId]=\"listId\" [focusOnMount]=\"false\" [size]=\"size()\" (itemSelect)=\"onItemSelect($event)\">\n            @if (footerTemplate()) {\n                <ng-template monaListFooterTemplate>\n                    <ng-container [ngTemplateOutlet]=\"footerTemplate()\"></ng-container>\n                </ng-template>\n            }\n            @if (groupHeaderTemplate()) {\n                <ng-template monaListGroupHeaderTemplate let-group>\n                    <ng-container\n                        [ngTemplateOutlet]=\"groupHeaderTemplate()\"\n                        [ngTemplateOutletContext]=\"{ $implicit: group }\"></ng-container>\n                </ng-template>\n            }\n            @if (headerTemplate()) {\n                <ng-template monaListHeaderTemplate>\n                    <ng-container [ngTemplateOutlet]=\"headerTemplate()\"></ng-container>\n                </ng-template>\n            }\n            @if (itemTemplate()) {\n                <ng-template monaListItemTemplate let-dataItem>\n                    <ng-container\n                        [ngTemplateOutlet]=\"itemTemplate()\"\n                        [ngTemplateOutletContext]=\"{ $implicit: dataItem }\"></ng-container>\n                </ng-template>\n            }\n            @if (noDataTemplate()) {\n                <ng-template monaListNoDataTemplate>\n                    <ng-container [ngTemplateOutlet]=\"noDataTemplate()\"></ng-container>\n                </ng-template>\n            }\n        </mona-list>\n    </div>\n</ng-template>\n" }]
+                    }, template: "@if (prefixTemplate()) {\n    <span [class]=\"affixClass()\">\n        <ng-container [ngTemplateOutlet]=\"prefixTemplate()\"></ng-container>\n    </span>\n}\n\n<span [class]=\"valueContainerClass()\">\n    @if (!valueTemplate()) {\n        <span>\n            @if (selectedListItem()) {\n                <span>{{ valueText() }}</span>\n            } @else {\n                <span>{{ placeholder() }}</span>\n            }\n        </span>\n    } @else {\n        <ng-container\n            [ngTemplateOutlet]=\"valueTemplate()\"\n            [ngTemplateOutletContext]=\"{ $implicit: selectedDataItem() }\"></ng-container>\n    }\n</span>\n\n@if (selectedListItem() && showClearButton() && !loading()) {\n    <mona-indicator-icon\n        preset=\"clear\"\n        [interactive]=\"true\"\n        [label]=\"messages().clear\"\n        (activate)=\"onValueClear($event)\"></mona-indicator-icon>\n}\n\n@if (loading()) {\n    <mona-indicator-icon preset=\"loading\" [size]=\"12\"></mona-indicator-icon>\n}\n\n<mona-indicator-icon preset=\"dropdown\" [size]=\"18\"></mona-indicator-icon>\n\n<span monaDropdownLiveRegion></span>\n\n<ng-template #popupTemplate>\n    <div [class]=\"listPopupClass()\">\n        <mona-list [listId]=\"listId\" [focusOnMount]=\"false\" [size]=\"size()\" (itemSelect)=\"onItemSelect($event)\">\n            @if (footerTemplate()) {\n                <ng-template monaListFooterTemplate>\n                    <ng-container [ngTemplateOutlet]=\"footerTemplate()\"></ng-container>\n                </ng-template>\n            }\n            @if (groupHeaderTemplate()) {\n                <ng-template monaListGroupHeaderTemplate let-group>\n                    <ng-container\n                        [ngTemplateOutlet]=\"groupHeaderTemplate()\"\n                        [ngTemplateOutletContext]=\"{ $implicit: group }\"></ng-container>\n                </ng-template>\n            }\n            @if (headerTemplate()) {\n                <ng-template monaListHeaderTemplate>\n                    <ng-container [ngTemplateOutlet]=\"headerTemplate()\"></ng-container>\n                </ng-template>\n            }\n            @if (itemTemplate()) {\n                <ng-template monaListItemTemplate let-dataItem>\n                    <ng-container\n                        [ngTemplateOutlet]=\"itemTemplate()\"\n                        [ngTemplateOutletContext]=\"{ $implicit: dataItem }\"></ng-container>\n                </ng-template>\n            }\n            @if (noDataTemplate()) {\n                <ng-template monaListNoDataTemplate>\n                    <ng-container [ngTemplateOutlet]=\"noDataTemplate()\"></ng-container>\n                </ng-template>\n            }\n        </mona-list>\n    </div>\n</ng-template>\n" }]
         }], ctorParameters: () => [], propDecorators: { footerTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DropdownFooterTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], groupHeaderTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DropdownGroupHeaderTemplateDirective), { ...{
                             read: TemplateRef
                         }, isSignal: true }] }], headerTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DropdownHeaderTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], itemTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DropdownItemTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], noDataTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DropdownNoDataTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], popupTemplate: [{ type: i0.ViewChild, args: ["popupTemplate", { isSignal: true }] }], prefixTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DropdownPrefixTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], valueTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DropdownListValueTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], close: [{ type: i0.Output, args: ["close"] }], closed: [{ type: i0.Output, args: ["closed"] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], itemDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemDisabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], open: [{ type: i0.Output, args: ["open"] }], opened: [{ type: i0.Output, args: ["opened"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], popupClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupClass", required: false }] }], popupHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupHeight", required: false }] }], popupWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupWidth", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], showClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], textField: [{ type: i0.Input, args: [{ isSignal: true, alias: "textField", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], valueField: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueField", required: false }] }], valuePrimitive: [{ type: i0.Input, args: [{ isSignal: true, alias: "valuePrimitive", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
@@ -617,5 +625,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { DropdownListComponent, DropdownListValueTemplateDirective };
+export { DROPDOWN_LIST_DEFAULT_MESSAGES, DropdownListComponent, DropdownListValueTemplateDirective };
 //# sourceMappingURL=nanahoshi-mona-ui-dropdown-list.mjs.map

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

@@ -6,6 +6,7 @@ import { PreventableEvent } from '@nanahoshi/mona-ui/common';
 import { Subject, takeUntil, take, filter, switchMap, fromEvent } from 'rxjs';
 import { ConnectionPositionPair } from '@angular/cdk/overlay';
 import { PopupService, dropdownPopupAnimation } from '@nanahoshi/mona-ui/popup';
+import { MonaI18nService } from '@nanahoshi/mona-ui/i18n';
 import { cva } from 'class-variance-authority';
 import { themeOverlaySurfaceClasses } from '@nanahoshi/mona-ui/internal';
 
@@ -591,17 +592,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
+const DROPDOWNS_DEFAULT_MESSAGES = {
+    itemPosition: (text, position, total) => `${text}, ${position} of ${total}`,
+    noResultsFound: "No results found",
+    resultsAvailable: (count) => `${count} result${count === 1 ? "" : "s"} available`
+};
+
 class DropdownLiveRegionDirective {
     #dropdownService;
+    #expanded;
     #host;
+    #i18n;
     #listService;
-    #expanded;
+    #messages;
     constructor() {
         this.#dropdownService = inject(DropdownService);
-        this.#host = inject(ElementRef);
-        this.#listService = inject(ListService);
         this.#expanded = computed(() => this.#dropdownService.popupRef() !== null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#expanded" }] : /* istanbul ignore next */ []));
+        this.#host = inject(ElementRef);
+        this.#i18n = inject(MonaI18nService);
+        this.#listService = inject(ListService);
+        this.#messages = this.#i18n.componentMessages("dropdowns", DROPDOWNS_DEFAULT_MESSAGES);
         this.liveRegionText = computed(() => {
             const highlightedItem = this.#listService.highlightedItem();
             const selectedItem = this.#listService.selectedListItems().lastOrDefault();
@@ -611,11 +622,11 @@ class DropdownLiveRegionDirective {
                 const text = this.#listService.getItemText(activeItem);
                 const positionInfo = this.#listService.getItemPosition(activeItem);
                 if (positionInfo) {
-                    return `${text}, ${positionInfo.position} of ${positionInfo.total}`;
+                    return this.#messages().itemPosition(text, positionInfo.position, positionInfo.total);
                 }
                 return text;
             }
-            return count === 0 ? "No results found" : `${count} result${count === 1 ? "" : "s"} available`;
+            return count === 0 ? this.#messages().noResultsFound : this.#messages().resultsAvailable(count);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "liveRegionText" }] : /* istanbul ignore next */ []));
         effect(() => {
@@ -692,5 +703,5 @@ const dropdownPopupThemeVariants = cva(`
  * Generated bundle index. Do not edit.
  */
 
-export { DropdownDataHandlerDirective, DropdownDataInputToken, DropdownFilterableDirective, DropdownFooterTemplateDirective, DropdownGroupHeaderTemplateDirective, DropdownGroupableDirective, DropdownHeaderTemplateDirective, DropdownItemTemplateDirective, DropdownListPopupHandlerDirective, DropdownListService, DropdownLiveRegionDirective, DropdownNoDataTemplateDirective, DropdownPopupHandlerDirective, DropdownPopupInputToken, DropdownPrefixTemplateDirective, DropdownService, DropdownSuffixTemplateDirective, DropdownVirtualScrollDirective, dropdownPopupThemeVariants };
+export { DROPDOWNS_DEFAULT_MESSAGES, DropdownDataHandlerDirective, DropdownDataInputToken, DropdownFilterableDirective, DropdownFooterTemplateDirective, DropdownGroupHeaderTemplateDirective, DropdownGroupableDirective, DropdownHeaderTemplateDirective, DropdownItemTemplateDirective, DropdownListPopupHandlerDirective, DropdownListService, DropdownLiveRegionDirective, DropdownNoDataTemplateDirective, DropdownPopupHandlerDirective, DropdownPopupInputToken, DropdownPrefixTemplateDirective, DropdownService, DropdownSuffixTemplateDirective, DropdownVirtualScrollDirective, dropdownPopupThemeVariants };
 //# sourceMappingURL=nanahoshi-mona-ui-dropdowns.mjs.map