@nanahoshi/mona-ui 0.18.6 → 0.20.0

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

@@ -5,6 +5,7 @@ import { PopupMenuToken, preparePopupMenuItems, PopupMenuItemType, PopupMenuTemp
 import { v4 } from 'uuid';
 import { NgTemplateOutlet } from '@angular/common';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { injectComponentDirection, MonaI18nService } from '@nanahoshi/mona-ui/i18n';
 import { Subject, startWith, pairwise, tap } from 'rxjs';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
@@ -56,12 +57,12 @@ class MenuComponent {
                 .flatMap(i => i);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "menuItems" }] : /* istanbul ignore next */ []));
-        this.textTemplate = contentChild(MenuTextTemplateDirective, { ...(ngDevMode ? { debugName: "textTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
         /**
          * @description The text of the menu.
          */
         this.text = input("", /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+        this.textTemplate = contentChild(MenuTextTemplateDirective, { ...(ngDevMode ? { debugName: "textTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
         this.uid = v4();
         this.popupMenu = null;
     }
@@ -77,7 +78,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }], propDecorators: { menuItemComponents: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => PopupMenuToken), { ...{ descendants: false }, isSignal: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], iconTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MenuIconTemplateDirective), { ...{
                             read: TemplateRef
-                        }, isSignal: true }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], textTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MenuTextTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }] } });
+                        }, isSignal: true }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], textTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MenuTextTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }] } });
 
 const componentTypeMap = {
     [PopupMenuItemType.CheckboxMenuItem]: "mona-menu-checkbox-item",
@@ -421,7 +422,7 @@ const menuItemGroupHeaderThemeVariants = cva(`inline-flex w-full select-none px-
         }
     }
 });
-const menuItemIconThemeVariants = cva(`absolute left-2 flex h-3.5 w-3.5 items-center justify-center`);
+const menuItemIconThemeVariants = cva(`absolute start-2 flex h-3.5 w-3.5 items-center justify-center`);
 const menuItemLinkThemeVariants = cva(`flex h-3.5 w-3.5 items-center justify-center`);
 const menuItemShortcutThemeVariants = cva(`flex flex-1 items-center justify-end text-xs text-muted-foreground`);
 const menuItemTextThemeVariants = cva(`flex flex-1 items-center justify-start gap-2`);
@@ -496,12 +497,18 @@ const menubarListThemeVariants = cva(`
 
 class MenubarComponent {
     #destroyRef;
+    #direction;
     #document;
     #hostElementRef;
+    #i18n;
     constructor() {
         this.#destroyRef = inject(DestroyRef);
+        this.#direction = injectComponentDirection();
         this.#document = inject(DOCUMENT);
         this.#hostElementRef = inject((ElementRef));
+        this.#i18n = inject(MonaI18nService);
+        this.isRtl = computed(() => this.#direction() === "rtl", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isRtl" }] : /* istanbul ignore next */ []));
         this.activeIndex = signal(0, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
         this.baseClasses = computed(() => {
@@ -561,16 +568,16 @@ class MenubarComponent {
          * @description Emits when a menu item is clicked.
          */
         this.menuItemClick = output();
-        /**
-         * @description Sets the size of the menubar.
-         */
-        this.size = input("medium", /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
         /**
          * @description Sets the rounded style of the menubar.
          */
         this.rounded = input("medium", /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the size of the menubar.
+         */
+        this.size = input("medium", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
         /**
          * @description Additional CSS classes to apply to the menubar, merged with the computed theme classes.
          */
@@ -630,6 +637,9 @@ class MenubarComponent {
         if (this.disabled()) {
             return;
         }
+        const isRtl = this.isRtl();
+        const nextMenuKey = isRtl ? "ArrowLeft" : "ArrowRight";
+        const prevMenuKey = isRtl ? "ArrowRight" : "ArrowLeft";
         switch (event.key) {
             case "Enter":
             case " ":
@@ -638,11 +648,11 @@ class MenubarComponent {
                     popupMenu.openMenuViaKeyboard();
                 }
                 break;
-            case "ArrowRight":
+            case nextMenuKey:
                 event.preventDefault();
                 this.moveToNextMenu();
                 break;
-            case "ArrowLeft":
+            case prevMenuKey:
                 event.preventDefault();
                 this.moveToPreviousMenu();
                 break;
@@ -725,7 +735,7 @@ class MenubarComponent {
         return -1;
     }
     findPreviousNonDisabledMenuIndex() {
-        let currentIndex = this.findCurrentMenuIndex();
+        const currentIndex = this.findCurrentMenuIndex();
         if (currentIndex == null || currentIndex < 0) {
             const menuList = this.menuList();
             const lastEnabledIndex = menuList
@@ -783,13 +793,16 @@ class MenubarComponent {
     setNavigationSubscription() {
         this.navigate$
             .pipe(takeUntilDestroyed(this.#destroyRef), startWith(null), pairwise(), tap(([prev, next]) => {
-            if (next && next.direction === "right" && (next.level === 0 || (next.level > 0 && !next.item))) {
+            const isRtl = this.isRtl();
+            const nextDir = isRtl ? "left" : "right";
+            const prevDir = isRtl ? "right" : "left";
+            if (next && next.direction === nextDir && (next.level === 0 || (next.level > 0 && !next.item))) {
                 const index = this.findNextNonDisabledMenuIndex();
                 if (index >= 0) {
                     this.updateCurrentMenuData(index);
                 }
             }
-            else if (next && prev && next.direction === "left" && prev.level === 0 && next.level === 0) {
+            else if (next && prev && next.direction === prevDir && prev.level === 0 && next.level === 0) {
                 const index = this.findPreviousNonDisabledMenuIndex();
                 if (index >= 0) {
                     this.updateCurrentMenuData(index);
@@ -813,7 +826,7 @@ class MenubarComponent {
         this.currentPopupMenu()?.openMenuViaKeyboard();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MenubarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: MenubarComponent, isStandalone: true, selector: "mona-menubar", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, userClasses: { classPropertyName: "userClasses", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { menuItemClick: "menuItemClick" }, host: { properties: { "class": "baseClasses()", "attr.data-disabled": "disabled()" } }, queries: [{ propertyName: "groupTemplate", first: true, predicate: MenuGroupTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "iconTemplate", first: true, predicate: MenuIconTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "menuItemIconTemplate", first: true, predicate: MenuItemIconTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "menuItemShortcutTemplate", first: true, predicate: MenuItemShortcutTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "menuItemTextTemplate", first: true, predicate: MenuItemTextTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "menuList", predicate: MenuComponent, isSignal: true }, { propertyName: "textTemplate", first: true, predicate: MenuTextTemplateDirective, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "popupMenuComponents", predicate: PopupMenuComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ul\n    [class]=\"listClasses()\"\n    role=\"menubar\"\n    [attr.aria-disabled]=\"disabled()\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    [attr.aria-labelledby]=\"ariaLabelledby() || null\">\n    @for (item of menuList(); track item; let i = $index) {\n        @let menuIconTemplate = item.iconTemplate() ?? iconTemplate() ?? null;\n        @let menuTextTemplate = item.textTemplate() ?? textTemplate() ?? null;\n        @let menuId = item.uid + \"-menu\";\n        <li\n            [class]=\"listItemClasses()\"\n            [attr.data-disabled]=\"disabled() || item.disabled()\"\n            [attr.data-active]=\"currentPopupMenu() != null && currentPopupMenu() === item.popupMenu\"\n            [attr.data-mid]=\"item.uid\"\n            [attr.tabindex]=\"disabled() || item.disabled() ? -1 : i === activeIndex() ? 0 : -1\"\n            [attr.role]=\"'menuitem'\"\n            [attr.aria-haspopup]=\"'menu'\"\n            [attr.aria-expanded]=\"\n                currentPopupMenu() != null && currentPopupMenu() === item.popupMenu ? 'true' : 'false'\n            \"\n            [attr.aria-controls]=\"currentPopupMenu() != null && currentPopupMenu() === item.popupMenu ? menuId : null\"\n            [attr.aria-disabled]=\"disabled() || item.disabled()\"\n            (pointerenter)=\"onMenuPointerEnter(item, listItemElement, popupMenu)\"\n            (keydown)=\"onMenuKeyDown($event, item, popupMenu)\"\n            (click)=\"onMenuClick($event, item)\"\n            (focus)=\"onMenuFocus(i)\"\n            (blur)=\"onMenuBlur($event)\"\n            #listItemElement>\n            @if (menuIconTemplate) {\n                <ng-container\n                    [ngTemplateOutlet]=\"menuIconTemplate\"\n                    [ngTemplateOutletContext]=\"{ $implicit: item.text(), items: item.menuItems() }\"></ng-container>\n            }\n            @if (!menuTextTemplate) {\n                <span>{{ item.text() }}</span>\n            } @else {\n                <ng-container\n                    [ngTemplateOutlet]=\"menuTextTemplate\"\n                    [ngTemplateOutletContext]=\"{ $implicit: item.text(), items: item.menuItems() }\">\n                </ng-container>\n            }\n        </li>\n        <mona-popup-menu\n            [rounded]=\"rounded()\"\n            [size]=\"size()\"\n            [target]=\"listItemElement\"\n            [anchorConnectionPoint]=\"'bottomleft'\"\n            [popupConnectionPoint]=\"'topleft'\"\n            (menuClick)=\"onMenuItemClick($event)\"\n            (navigate)=\"navigate$.next($event)\"\n            [trigger]=\"'click'\"\n            [offset]=\"{ horizontal: 0, vertical: 2 }\"\n            (close)=\"onPopupMenuClose()\"\n            (open)=\"onPopupMenuOpen(popupMenu, listItemElement)\"\n            [items]=\"item.menuItems()\"\n            [id]=\"menuId\"\n            #popupMenu>\n            @if (groupTemplate()) {\n                <ng-template monaPopupMenuGroupTemplate let-group>\n                    <ng-container\n                        [ngTemplateOutlet]=\"groupTemplate()\"\n                        [ngTemplateOutletContext]=\"{ $implicit: group }\"></ng-container>\n                </ng-template>\n            }\n            @if (menuItemIconTemplate()) {\n                <ng-template monaPopupMenuIconTemplate let-item>\n                    <ng-container\n                        [ngTemplateOutlet]=\"menuItemIconTemplate()\"\n                        [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n                </ng-template>\n            }\n            @if (menuItemShortcutTemplate()) {\n                <ng-template monaPopupMenuShortcutTemplate let-item>\n                    <ng-container\n                        [ngTemplateOutlet]=\"menuItemShortcutTemplate()\"\n                        [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n                </ng-template>\n            }\n            @if (menuItemTextTemplate()) {\n                <ng-template monaPopupMenuTextTemplate let-item>\n                    <ng-container\n                        [ngTemplateOutlet]=\"menuItemTextTemplate()\"\n                        [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n                </ng-template>\n            }\n        </mona-popup-menu>\n    }\n</ul>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PopupMenuComponent, selector: "mona-popup-menu", inputs: ["anchor", "anchorConnectionPoint", "items", "id", "minWidth", "offset", "popupConnectionPoint", "precise", "rounded", "size", "target", "trigger", "width", "class"], outputs: ["close", "menuClick", "navigate", "open"] }, { kind: "directive", type: PopupMenuTextTemplateDirective, selector: "ng-template[monaPopupMenuTextTemplate]" }, { kind: "directive", type: PopupMenuIconTemplateDirective, selector: "ng-template[monaPopupMenuIconTemplate]" }, { kind: "directive", type: PopupMenuShortcutTemplateDirective, selector: "ng-template[monaPopupMenuShortcutTemplate]" }, { kind: "directive", type: PopupMenuGroupTemplateDirective, selector: "ng-template[monaPopupMenuGroupTemplate]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: MenubarComponent, isStandalone: true, selector: "mona-menubar", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, userClasses: { classPropertyName: "userClasses", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { menuItemClick: "menuItemClick" }, host: { properties: { "class": "baseClasses()", "attr.data-disabled": "disabled()" } }, queries: [{ propertyName: "groupTemplate", first: true, predicate: MenuGroupTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "iconTemplate", first: true, predicate: MenuIconTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "menuItemIconTemplate", first: true, predicate: MenuItemIconTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "menuItemShortcutTemplate", first: true, predicate: MenuItemShortcutTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "menuItemTextTemplate", first: true, predicate: MenuItemTextTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "menuList", predicate: MenuComponent, isSignal: true }, { propertyName: "textTemplate", first: true, predicate: MenuTextTemplateDirective, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "popupMenuComponents", predicate: PopupMenuComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ul\n    [class]=\"listClasses()\"\n    role=\"menubar\"\n    [attr.aria-disabled]=\"disabled()\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    [attr.aria-labelledby]=\"ariaLabelledby() || null\">\n    @for (item of menuList(); track item; let i = $index) {\n        @let menuIconTemplate = item.iconTemplate() ?? iconTemplate() ?? null;\n        @let menuTextTemplate = item.textTemplate() ?? textTemplate() ?? null;\n        @let menuId = item.uid + \"-menu\";\n        <li\n            [class]=\"listItemClasses()\"\n            [attr.data-disabled]=\"disabled() || item.disabled()\"\n            [attr.data-active]=\"currentPopupMenu() !== null && currentPopupMenu() === item.popupMenu\"\n            [attr.data-mid]=\"item.uid\"\n            [attr.tabindex]=\"disabled() || item.disabled() ? -1 : i === activeIndex() ? 0 : -1\"\n            [attr.role]=\"'menuitem'\"\n            [attr.aria-haspopup]=\"'menu'\"\n            [attr.aria-expanded]=\"\n                currentPopupMenu() !== null && currentPopupMenu() === item.popupMenu ? 'true' : 'false'\n            \"\n            [attr.aria-controls]=\"currentPopupMenu() !== null && currentPopupMenu() === item.popupMenu ? menuId : null\"\n            [attr.aria-disabled]=\"disabled() || item.disabled()\"\n            (pointerenter)=\"onMenuPointerEnter(item, listItemElement, popupMenu)\"\n            (keydown)=\"onMenuKeyDown($event, item, popupMenu)\"\n            (click)=\"onMenuClick($event, item)\"\n            (focus)=\"onMenuFocus(i)\"\n            (blur)=\"onMenuBlur($event)\"\n            #listItemElement>\n            @if (menuIconTemplate) {\n                <ng-container\n                    [ngTemplateOutlet]=\"menuIconTemplate\"\n                    [ngTemplateOutletContext]=\"{ $implicit: item.text(), items: item.menuItems() }\"></ng-container>\n            }\n            @if (!menuTextTemplate) {\n                <span>{{ item.text() }}</span>\n            } @else {\n                <ng-container\n                    [ngTemplateOutlet]=\"menuTextTemplate\"\n                    [ngTemplateOutletContext]=\"{ $implicit: item.text(), items: item.menuItems() }\">\n                </ng-container>\n            }\n        </li>\n        <mona-popup-menu\n            [rounded]=\"rounded()\"\n            [size]=\"size()\"\n            [target]=\"listItemElement\"\n            [anchorConnectionPoint]=\"'bottomleft'\"\n            [popupConnectionPoint]=\"'topleft'\"\n            (menuClick)=\"onMenuItemClick($event)\"\n            (navigate)=\"navigate$.next($event)\"\n            [trigger]=\"'click'\"\n            [offset]=\"{ horizontal: 0, vertical: 2 }\"\n            (close)=\"onPopupMenuClose()\"\n            (open)=\"onPopupMenuOpen(popupMenu, listItemElement)\"\n            [items]=\"item.menuItems()\"\n            [id]=\"menuId\"\n            #popupMenu>\n            @if (groupTemplate()) {\n                <ng-template monaPopupMenuGroupTemplate let-group>\n                    <ng-container\n                        [ngTemplateOutlet]=\"groupTemplate()\"\n                        [ngTemplateOutletContext]=\"{ $implicit: group }\"></ng-container>\n                </ng-template>\n            }\n            @if (menuItemIconTemplate()) {\n                <ng-template monaPopupMenuIconTemplate let-item>\n                    <ng-container\n                        [ngTemplateOutlet]=\"menuItemIconTemplate()\"\n                        [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n                </ng-template>\n            }\n            @if (menuItemShortcutTemplate()) {\n                <ng-template monaPopupMenuShortcutTemplate let-item>\n                    <ng-container\n                        [ngTemplateOutlet]=\"menuItemShortcutTemplate()\"\n                        [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n                </ng-template>\n            }\n            @if (menuItemTextTemplate()) {\n                <ng-template monaPopupMenuTextTemplate let-item>\n                    <ng-container\n                        [ngTemplateOutlet]=\"menuItemTextTemplate()\"\n                        [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n                </ng-template>\n            }\n        </mona-popup-menu>\n    }\n</ul>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PopupMenuComponent, selector: "mona-popup-menu", inputs: ["anchor", "anchorConnectionPoint", "items", "id", "minWidth", "offset", "popupConnectionPoint", "precise", "rounded", "size", "target", "trigger", "width", "class"], outputs: ["close", "menuClick", "navigate", "open"] }, { kind: "directive", type: PopupMenuTextTemplateDirective, selector: "ng-template[monaPopupMenuTextTemplate]" }, { kind: "directive", type: PopupMenuIconTemplateDirective, selector: "ng-template[monaPopupMenuIconTemplate]" }, { kind: "directive", type: PopupMenuShortcutTemplateDirective, selector: "ng-template[monaPopupMenuShortcutTemplate]" }, { kind: "directive", type: PopupMenuGroupTemplateDirective, selector: "ng-template[monaPopupMenuGroupTemplate]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MenubarComponent, decorators: [{
             type: Component,
@@ -827,7 +840,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                     ], host: {
                         "[class]": "baseClasses()",
                         "[attr.data-disabled]": "disabled()"
-                    }, template: "<ul\n    [class]=\"listClasses()\"\n    role=\"menubar\"\n    [attr.aria-disabled]=\"disabled()\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    [attr.aria-labelledby]=\"ariaLabelledby() || null\">\n    @for (item of menuList(); track item; let i = $index) {\n        @let menuIconTemplate = item.iconTemplate() ?? iconTemplate() ?? null;\n        @let menuTextTemplate = item.textTemplate() ?? textTemplate() ?? null;\n        @let menuId = item.uid + \"-menu\";\n        <li\n            [class]=\"listItemClasses()\"\n            [attr.data-disabled]=\"disabled() || item.disabled()\"\n            [attr.data-active]=\"currentPopupMenu() != null && currentPopupMenu() === item.popupMenu\"\n            [attr.data-mid]=\"item.uid\"\n            [attr.tabindex]=\"disabled() || item.disabled() ? -1 : i === activeIndex() ? 0 : -1\"\n            [attr.role]=\"'menuitem'\"\n            [attr.aria-haspopup]=\"'menu'\"\n            [attr.aria-expanded]=\"\n                currentPopupMenu() != null && currentPopupMenu() === item.popupMenu ? 'true' : 'false'\n            \"\n            [attr.aria-controls]=\"currentPopupMenu() != null && currentPopupMenu() === item.popupMenu ? menuId : null\"\n            [attr.aria-disabled]=\"disabled() || item.disabled()\"\n            (pointerenter)=\"onMenuPointerEnter(item, listItemElement, popupMenu)\"\n            (keydown)=\"onMenuKeyDown($event, item, popupMenu)\"\n            (click)=\"onMenuClick($event, item)\"\n            (focus)=\"onMenuFocus(i)\"\n            (blur)=\"onMenuBlur($event)\"\n            #listItemElement>\n            @if (menuIconTemplate) {\n                <ng-container\n                    [ngTemplateOutlet]=\"menuIconTemplate\"\n                    [ngTemplateOutletContext]=\"{ $implicit: item.text(), items: item.menuItems() }\"></ng-container>\n            }\n            @if (!menuTextTemplate) {\n                <span>{{ item.text() }}</span>\n            } @else {\n                <ng-container\n                    [ngTemplateOutlet]=\"menuTextTemplate\"\n                    [ngTemplateOutletContext]=\"{ $implicit: item.text(), items: item.menuItems() }\">\n                </ng-container>\n            }\n        </li>\n        <mona-popup-menu\n            [rounded]=\"rounded()\"\n            [size]=\"size()\"\n            [target]=\"listItemElement\"\n            [anchorConnectionPoint]=\"'bottomleft'\"\n            [popupConnectionPoint]=\"'topleft'\"\n            (menuClick)=\"onMenuItemClick($event)\"\n            (navigate)=\"navigate$.next($event)\"\n            [trigger]=\"'click'\"\n            [offset]=\"{ horizontal: 0, vertical: 2 }\"\n            (close)=\"onPopupMenuClose()\"\n            (open)=\"onPopupMenuOpen(popupMenu, listItemElement)\"\n            [items]=\"item.menuItems()\"\n            [id]=\"menuId\"\n            #popupMenu>\n            @if (groupTemplate()) {\n                <ng-template monaPopupMenuGroupTemplate let-group>\n                    <ng-container\n                        [ngTemplateOutlet]=\"groupTemplate()\"\n                        [ngTemplateOutletContext]=\"{ $implicit: group }\"></ng-container>\n                </ng-template>\n            }\n            @if (menuItemIconTemplate()) {\n                <ng-template monaPopupMenuIconTemplate let-item>\n                    <ng-container\n                        [ngTemplateOutlet]=\"menuItemIconTemplate()\"\n                        [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n                </ng-template>\n            }\n            @if (menuItemShortcutTemplate()) {\n                <ng-template monaPopupMenuShortcutTemplate let-item>\n                    <ng-container\n                        [ngTemplateOutlet]=\"menuItemShortcutTemplate()\"\n                        [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n                </ng-template>\n            }\n            @if (menuItemTextTemplate()) {\n                <ng-template monaPopupMenuTextTemplate let-item>\n                    <ng-container\n                        [ngTemplateOutlet]=\"menuItemTextTemplate()\"\n                        [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n                </ng-template>\n            }\n        </mona-popup-menu>\n    }\n</ul>\n" }]
+                    }, template: "<ul\n    [class]=\"listClasses()\"\n    role=\"menubar\"\n    [attr.aria-disabled]=\"disabled()\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    [attr.aria-labelledby]=\"ariaLabelledby() || null\">\n    @for (item of menuList(); track item; let i = $index) {\n        @let menuIconTemplate = item.iconTemplate() ?? iconTemplate() ?? null;\n        @let menuTextTemplate = item.textTemplate() ?? textTemplate() ?? null;\n        @let menuId = item.uid + \"-menu\";\n        <li\n            [class]=\"listItemClasses()\"\n            [attr.data-disabled]=\"disabled() || item.disabled()\"\n            [attr.data-active]=\"currentPopupMenu() !== null && currentPopupMenu() === item.popupMenu\"\n            [attr.data-mid]=\"item.uid\"\n            [attr.tabindex]=\"disabled() || item.disabled() ? -1 : i === activeIndex() ? 0 : -1\"\n            [attr.role]=\"'menuitem'\"\n            [attr.aria-haspopup]=\"'menu'\"\n            [attr.aria-expanded]=\"\n                currentPopupMenu() !== null && currentPopupMenu() === item.popupMenu ? 'true' : 'false'\n            \"\n            [attr.aria-controls]=\"currentPopupMenu() !== null && currentPopupMenu() === item.popupMenu ? menuId : null\"\n            [attr.aria-disabled]=\"disabled() || item.disabled()\"\n            (pointerenter)=\"onMenuPointerEnter(item, listItemElement, popupMenu)\"\n            (keydown)=\"onMenuKeyDown($event, item, popupMenu)\"\n            (click)=\"onMenuClick($event, item)\"\n            (focus)=\"onMenuFocus(i)\"\n            (blur)=\"onMenuBlur($event)\"\n            #listItemElement>\n            @if (menuIconTemplate) {\n                <ng-container\n                    [ngTemplateOutlet]=\"menuIconTemplate\"\n                    [ngTemplateOutletContext]=\"{ $implicit: item.text(), items: item.menuItems() }\"></ng-container>\n            }\n            @if (!menuTextTemplate) {\n                <span>{{ item.text() }}</span>\n            } @else {\n                <ng-container\n                    [ngTemplateOutlet]=\"menuTextTemplate\"\n                    [ngTemplateOutletContext]=\"{ $implicit: item.text(), items: item.menuItems() }\">\n                </ng-container>\n            }\n        </li>\n        <mona-popup-menu\n            [rounded]=\"rounded()\"\n            [size]=\"size()\"\n            [target]=\"listItemElement\"\n            [anchorConnectionPoint]=\"'bottomleft'\"\n            [popupConnectionPoint]=\"'topleft'\"\n            (menuClick)=\"onMenuItemClick($event)\"\n            (navigate)=\"navigate$.next($event)\"\n            [trigger]=\"'click'\"\n            [offset]=\"{ horizontal: 0, vertical: 2 }\"\n            (close)=\"onPopupMenuClose()\"\n            (open)=\"onPopupMenuOpen(popupMenu, listItemElement)\"\n            [items]=\"item.menuItems()\"\n            [id]=\"menuId\"\n            #popupMenu>\n            @if (groupTemplate()) {\n                <ng-template monaPopupMenuGroupTemplate let-group>\n                    <ng-container\n                        [ngTemplateOutlet]=\"groupTemplate()\"\n                        [ngTemplateOutletContext]=\"{ $implicit: group }\"></ng-container>\n                </ng-template>\n            }\n            @if (menuItemIconTemplate()) {\n                <ng-template monaPopupMenuIconTemplate let-item>\n                    <ng-container\n                        [ngTemplateOutlet]=\"menuItemIconTemplate()\"\n                        [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n                </ng-template>\n            }\n            @if (menuItemShortcutTemplate()) {\n                <ng-template monaPopupMenuShortcutTemplate let-item>\n                    <ng-container\n                        [ngTemplateOutlet]=\"menuItemShortcutTemplate()\"\n                        [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n                </ng-template>\n            }\n            @if (menuItemTextTemplate()) {\n                <ng-template monaPopupMenuTextTemplate let-item>\n                    <ng-container\n                        [ngTemplateOutlet]=\"menuItemTextTemplate()\"\n                        [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n                </ng-template>\n            }\n        </mona-popup-menu>\n    }\n</ul>\n" }]
         }], ctorParameters: () => [], propDecorators: { groupTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MenuGroupTemplateDirective), { ...{
                             read: TemplateRef,
                             descendants: false
@@ -846,7 +859,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         }, isSignal: true }] }], menuList: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MenuComponent), { isSignal: true }] }], popupMenuComponents: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => PopupMenuComponent), { isSignal: true }] }], textTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MenuTextTemplateDirective), { ...{
                             read: TemplateRef,
                             descendants: false
-                        }, isSignal: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledby", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], menuItemClick: [{ type: i0.Output, args: ["menuItemClick"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], userClasses: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+                        }, isSignal: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledby", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], menuItemClick: [{ type: i0.Output, args: ["menuItemClick"] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], userClasses: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 /*
  * Public API Surface of @nanahoshi/mona-ui/menubar

package/fesm2022/nanahoshi-mona-ui-multi-select.mjs

@@ -6,6 +6,7 @@ import { none } from '@mirei/ts-collections';
 import { ChipComponent } from '@nanahoshi/mona-ui/chip';
 import * as i1 from '@nanahoshi/mona-ui/dropdowns';
 import { DropdownService, DropdownFooterTemplateDirective, DropdownGroupHeaderTemplateDirective, DropdownHeaderTemplateDirective, DropdownItemTemplateDirective, dropdownPopupThemeVariants, DropdownNoDataTemplateDirective, DropdownPrefixTemplateDirective, DropdownLiveRegionDirective, DropdownDataInputToken, DropdownPopupInputToken, DropdownDataHandlerDirective, DropdownListPopupHandlerDirective } from '@nanahoshi/mona-ui/dropdowns';
+import { MonaI18nService } from '@nanahoshi/mona-ui/i18n';
 import { themeControlSurfaceClasses, createElementControlId, restoreOverlayScroll, rxFromResize } from '@nanahoshi/mona-ui/internal';
 import { IndicatorIconComponent } from '@nanahoshi/mona-ui/internal/indicator-icon';
 import { ListService, ListComponent, ListGroupHeaderTemplateDirective, ListItemTemplateDirective, ListFooterTemplateDirective, ListHeaderTemplateDirective, ListNoDataTemplateDirective } from '@nanahoshi/mona-ui/internal/list';
@@ -24,6 +25,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }] });
 
+const MULTI_SELECT_DEFAULT_MESSAGES = {
+    clear: "Clear",
+    itemsCount: (count) => `+ ${count} ${count === 1 ? "item" : "items"}`
+};
+
 class MultiSelectService {
     constructor() {
         this.summaryTagTemplate = signal(null, /* @ts-ignore */
@@ -111,6 +117,7 @@ class MultiSelectComponent {
     #destroyRef;
     #dropdownService;
     #hostElementRef;
+    #i18n;
     #listService;
     #multiSelectService;
     #popupRef;
@@ -118,6 +125,7 @@ class MultiSelectComponent {
         this.#destroyRef = inject(DestroyRef);
         this.#dropdownService = inject(DropdownService);
         this.#hostElementRef = inject(ElementRef);
+        this.#i18n = inject(MonaI18nService);
         this.#listService = inject((ListService));
         this.#multiSelectService = inject(MultiSelectService);
         this.#popupRef = this.#dropdownService.popupRef;
@@ -168,6 +176,7 @@ class MultiSelectComponent {
             return twMerge(variantClass, userClass);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "listPopupClass" }] : /* istanbul ignore next */ []));
+        this.messages = this.#i18n.componentMessages("multiSelect", MULTI_SELECT_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 */ []));
@@ -540,7 +549,7 @@ class MultiSelectComponent {
                 useExisting: forwardRef(() => MultiSelectComponent),
                 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: "tagTemplate", first: true, predicate: MultiSelectTagTemplateDirective, 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<div [class]=\"itemContainerClass()\">\n    @for (pair of valueTextMap(); track pair.key) {\n        <mona-chip\n            look=\"default\"\n            [tabindex]=\"-1\"\n            [removable]=\"true\"\n            [removeTabIndex]=\"-1\"\n            [disabled]=\"disabled()\"\n            [rounded]=\"rounded()\"\n            [size]=\"size()\"\n            (remove)=\"onSelectedItemRemove($event, pair.key!)\">\n            @if (tagTemplate()) {\n                <ng-container\n                    [ngTemplateOutlet]=\"tagTemplate()\"\n                    [ngTemplateOutletContext]=\"{ $implicit: pair.key!.data }\"></ng-container>\n            } @else {\n                {{ pair.value }}\n            }\n        </mona-chip>\n    }\n\n    @if (tagCount() >= 0 && selectedListItems().length > tagCount()) {\n        <mona-chip\n            look=\"outline\"\n            [tabindex]=\"-1\"\n            [removable]=\"true\"\n            [removeTabIndex]=\"-1\"\n            [disabled]=\"disabled()\"\n            [rounded]=\"rounded()\"\n            [size]=\"size()\"\n            (remove)=\"onSelectedItemGroupRemove($event)\">\n            @let remainingCount = selectedDataItems().length - tagCount();\n            @if (summaryTagTemplate()) {\n                <ng-container\n                    [ngTemplateOutlet]=\"summaryTagTemplate()\"\n                    [ngTemplateOutletContext]=\"{ $implicit: selectedDataItems(), tagCount: tagCount() }\"></ng-container>\n            } @else {\n                @let itemLabel = remainingCount === 1 ? \"item\" : \"items\";\n                + {{ remainingCount }} {{ itemLabel }}\n            }\n        </mona-chip>\n    }\n</div>\n\n@if (showClearButton() && selectedListItems().length !== 0 && !loading()) {\n    <mona-indicator-icon\n        preset=\"clear\"\n        [class]=\"indicatorClass()\"\n        [interactive]=\"true\"\n        label=\"Clear\"\n        (activate)=\"onValueClear($event)\"></mona-indicator-icon>\n}\n\n@if (loading()) {\n    <mona-indicator-icon preset=\"loading\" [class]=\"indicatorClass()\" [size]=\"12\"></mona-indicator-icon>\n}\n\n<mona-indicator-icon preset=\"dropdown\" [class]=\"indicatorClass()\" [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()\">\n            @if (footerTemplate()) {\n                <ng-template monaListFooterTemplate>\n                    <ng-container [ngTemplateOutlet]=\"footerTemplate() ?? null\"></ng-container>\n                </ng-template>\n            }\n            @if (groupHeaderTemplate()) {\n                <ng-template monaListGroupHeaderTemplate let-group>\n                    <ng-container\n                        [ngTemplateOutlet]=\"groupHeaderTemplate() ?? null\"\n                        [ngTemplateOutletContext]=\"{ $implicit: group }\"></ng-container>\n                </ng-template>\n            }\n            @if (headerTemplate()) {\n                <ng-template monaListHeaderTemplate>\n                    <ng-container [ngTemplateOutlet]=\"headerTemplate() ?? null\"></ng-container>\n                </ng-template>\n            }\n            @if (itemTemplate()) {\n                <ng-template monaListItemTemplate let-dataItem>\n                    <ng-container\n                        [ngTemplateOutlet]=\"itemTemplate() ?? null\"\n                        [ngTemplateOutletContext]=\"{ $implicit: dataItem }\"></ng-container>\n                </ng-template>\n            }\n            @if (noDataTemplate()) {\n                <ng-template monaListNoDataTemplate>\n                    <ng-container [ngTemplateOutlet]=\"noDataTemplate() ?? null\"></ng-container>\n                </ng-template>\n            }\n        </mona-list>\n    </div>\n</ng-template>\n", dependencies: [{ kind: "component", type: ChipComponent, selector: "mona-chip", inputs: ["aria-label", "disabled", "label", "look", "removable", "removeLabel", "removeTabIndex", "rounded", "selected", "size", "tabindex", "toggleable", "class", "value"], outputs: ["contentClick", "remove", "selectedChange"] }, { 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: ListGroupHeaderTemplateDirective, selector: "ng-template[monaListGroupHeaderTemplate]" }, { kind: "directive", type: ListItemTemplateDirective, selector: "ng-template[monaListItemTemplate]" }, { 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: "tagTemplate", first: true, predicate: MultiSelectTagTemplateDirective, 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<div [class]=\"itemContainerClass()\">\n    @for (pair of valueTextMap(); track pair.key) {\n        <mona-chip\n            look=\"default\"\n            [tabindex]=\"-1\"\n            [removable]=\"true\"\n            [removeTabIndex]=\"-1\"\n            [disabled]=\"disabled()\"\n            [rounded]=\"rounded()\"\n            [size]=\"size()\"\n            (remove)=\"onSelectedItemRemove($event, pair.key!)\">\n            @if (tagTemplate()) {\n                <ng-container\n                    [ngTemplateOutlet]=\"tagTemplate()\"\n                    [ngTemplateOutletContext]=\"{ $implicit: pair.key!.data }\"></ng-container>\n            } @else {\n                {{ pair.value }}\n            }\n        </mona-chip>\n    }\n\n    @if (tagCount() >= 0 && selectedListItems().length > tagCount()) {\n        <mona-chip\n            look=\"outline\"\n            [tabindex]=\"-1\"\n            [removable]=\"true\"\n            [removeTabIndex]=\"-1\"\n            [disabled]=\"disabled()\"\n            [rounded]=\"rounded()\"\n            [size]=\"size()\"\n            (remove)=\"onSelectedItemGroupRemove($event)\">\n            @let remainingCount = selectedDataItems().length - tagCount();\n            @if (summaryTagTemplate()) {\n                <ng-container\n                    [ngTemplateOutlet]=\"summaryTagTemplate()\"\n                    [ngTemplateOutletContext]=\"{ $implicit: selectedDataItems(), tagCount: tagCount() }\"></ng-container>\n            } @else {\n                {{ messages().itemsCount(remainingCount) }}\n            }\n        </mona-chip>\n    }\n</div>\n\n@if (showClearButton() && selectedListItems().length !== 0 && !loading()) {\n    <mona-indicator-icon\n        preset=\"clear\"\n        [class]=\"indicatorClass()\"\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\" [class]=\"indicatorClass()\" [size]=\"12\"></mona-indicator-icon>\n}\n\n<mona-indicator-icon preset=\"dropdown\" [class]=\"indicatorClass()\" [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()\">\n            @if (footerTemplate()) {\n                <ng-template monaListFooterTemplate>\n                    <ng-container [ngTemplateOutlet]=\"footerTemplate() ?? null\"></ng-container>\n                </ng-template>\n            }\n            @if (groupHeaderTemplate()) {\n                <ng-template monaListGroupHeaderTemplate let-group>\n                    <ng-container\n                        [ngTemplateOutlet]=\"groupHeaderTemplate() ?? null\"\n                        [ngTemplateOutletContext]=\"{ $implicit: group }\"></ng-container>\n                </ng-template>\n            }\n            @if (headerTemplate()) {\n                <ng-template monaListHeaderTemplate>\n                    <ng-container [ngTemplateOutlet]=\"headerTemplate() ?? null\"></ng-container>\n                </ng-template>\n            }\n            @if (itemTemplate()) {\n                <ng-template monaListItemTemplate let-dataItem>\n                    <ng-container\n                        [ngTemplateOutlet]=\"itemTemplate() ?? null\"\n                        [ngTemplateOutletContext]=\"{ $implicit: dataItem }\"></ng-container>\n                </ng-template>\n            }\n            @if (noDataTemplate()) {\n                <ng-template monaListNoDataTemplate>\n                    <ng-container [ngTemplateOutlet]=\"noDataTemplate() ?? null\"></ng-container>\n                </ng-template>\n            }\n        </mona-list>\n    </div>\n</ng-template>\n", dependencies: [{ kind: "component", type: ChipComponent, selector: "mona-chip", inputs: ["aria-label", "disabled", "label", "look", "removable", "removeLabel", "removeTabIndex", "rounded", "selected", "size", "tabindex", "toggleable", "class", "value"], outputs: ["contentClick", "remove", "selectedChange"] }, { 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: ListGroupHeaderTemplateDirective, selector: "ng-template[monaListGroupHeaderTemplate]" }, { kind: "directive", type: ListItemTemplateDirective, selector: "ng-template[monaListItemTemplate]" }, { 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: MultiSelectComponent, decorators: [{
             type: Component,
@@ -588,7 +597,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<div [class]=\"itemContainerClass()\">\n    @for (pair of valueTextMap(); track pair.key) {\n        <mona-chip\n            look=\"default\"\n            [tabindex]=\"-1\"\n            [removable]=\"true\"\n            [removeTabIndex]=\"-1\"\n            [disabled]=\"disabled()\"\n            [rounded]=\"rounded()\"\n            [size]=\"size()\"\n            (remove)=\"onSelectedItemRemove($event, pair.key!)\">\n            @if (tagTemplate()) {\n                <ng-container\n                    [ngTemplateOutlet]=\"tagTemplate()\"\n                    [ngTemplateOutletContext]=\"{ $implicit: pair.key!.data }\"></ng-container>\n            } @else {\n                {{ pair.value }}\n            }\n        </mona-chip>\n    }\n\n    @if (tagCount() >= 0 && selectedListItems().length > tagCount()) {\n        <mona-chip\n            look=\"outline\"\n            [tabindex]=\"-1\"\n            [removable]=\"true\"\n            [removeTabIndex]=\"-1\"\n            [disabled]=\"disabled()\"\n            [rounded]=\"rounded()\"\n            [size]=\"size()\"\n            (remove)=\"onSelectedItemGroupRemove($event)\">\n            @let remainingCount = selectedDataItems().length - tagCount();\n            @if (summaryTagTemplate()) {\n                <ng-container\n                    [ngTemplateOutlet]=\"summaryTagTemplate()\"\n                    [ngTemplateOutletContext]=\"{ $implicit: selectedDataItems(), tagCount: tagCount() }\"></ng-container>\n            } @else {\n                @let itemLabel = remainingCount === 1 ? \"item\" : \"items\";\n                + {{ remainingCount }} {{ itemLabel }}\n            }\n        </mona-chip>\n    }\n</div>\n\n@if (showClearButton() && selectedListItems().length !== 0 && !loading()) {\n    <mona-indicator-icon\n        preset=\"clear\"\n        [class]=\"indicatorClass()\"\n        [interactive]=\"true\"\n        label=\"Clear\"\n        (activate)=\"onValueClear($event)\"></mona-indicator-icon>\n}\n\n@if (loading()) {\n    <mona-indicator-icon preset=\"loading\" [class]=\"indicatorClass()\" [size]=\"12\"></mona-indicator-icon>\n}\n\n<mona-indicator-icon preset=\"dropdown\" [class]=\"indicatorClass()\" [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()\">\n            @if (footerTemplate()) {\n                <ng-template monaListFooterTemplate>\n                    <ng-container [ngTemplateOutlet]=\"footerTemplate() ?? null\"></ng-container>\n                </ng-template>\n            }\n            @if (groupHeaderTemplate()) {\n                <ng-template monaListGroupHeaderTemplate let-group>\n                    <ng-container\n                        [ngTemplateOutlet]=\"groupHeaderTemplate() ?? null\"\n                        [ngTemplateOutletContext]=\"{ $implicit: group }\"></ng-container>\n                </ng-template>\n            }\n            @if (headerTemplate()) {\n                <ng-template monaListHeaderTemplate>\n                    <ng-container [ngTemplateOutlet]=\"headerTemplate() ?? null\"></ng-container>\n                </ng-template>\n            }\n            @if (itemTemplate()) {\n                <ng-template monaListItemTemplate let-dataItem>\n                    <ng-container\n                        [ngTemplateOutlet]=\"itemTemplate() ?? null\"\n                        [ngTemplateOutletContext]=\"{ $implicit: dataItem }\"></ng-container>\n                </ng-template>\n            }\n            @if (noDataTemplate()) {\n                <ng-template monaListNoDataTemplate>\n                    <ng-container [ngTemplateOutlet]=\"noDataTemplate() ?? null\"></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<div [class]=\"itemContainerClass()\">\n    @for (pair of valueTextMap(); track pair.key) {\n        <mona-chip\n            look=\"default\"\n            [tabindex]=\"-1\"\n            [removable]=\"true\"\n            [removeTabIndex]=\"-1\"\n            [disabled]=\"disabled()\"\n            [rounded]=\"rounded()\"\n            [size]=\"size()\"\n            (remove)=\"onSelectedItemRemove($event, pair.key!)\">\n            @if (tagTemplate()) {\n                <ng-container\n                    [ngTemplateOutlet]=\"tagTemplate()\"\n                    [ngTemplateOutletContext]=\"{ $implicit: pair.key!.data }\"></ng-container>\n            } @else {\n                {{ pair.value }}\n            }\n        </mona-chip>\n    }\n\n    @if (tagCount() >= 0 && selectedListItems().length > tagCount()) {\n        <mona-chip\n            look=\"outline\"\n            [tabindex]=\"-1\"\n            [removable]=\"true\"\n            [removeTabIndex]=\"-1\"\n            [disabled]=\"disabled()\"\n            [rounded]=\"rounded()\"\n            [size]=\"size()\"\n            (remove)=\"onSelectedItemGroupRemove($event)\">\n            @let remainingCount = selectedDataItems().length - tagCount();\n            @if (summaryTagTemplate()) {\n                <ng-container\n                    [ngTemplateOutlet]=\"summaryTagTemplate()\"\n                    [ngTemplateOutletContext]=\"{ $implicit: selectedDataItems(), tagCount: tagCount() }\"></ng-container>\n            } @else {\n                {{ messages().itemsCount(remainingCount) }}\n            }\n        </mona-chip>\n    }\n</div>\n\n@if (showClearButton() && selectedListItems().length !== 0 && !loading()) {\n    <mona-indicator-icon\n        preset=\"clear\"\n        [class]=\"indicatorClass()\"\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\" [class]=\"indicatorClass()\" [size]=\"12\"></mona-indicator-icon>\n}\n\n<mona-indicator-icon preset=\"dropdown\" [class]=\"indicatorClass()\" [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()\">\n            @if (footerTemplate()) {\n                <ng-template monaListFooterTemplate>\n                    <ng-container [ngTemplateOutlet]=\"footerTemplate() ?? null\"></ng-container>\n                </ng-template>\n            }\n            @if (groupHeaderTemplate()) {\n                <ng-template monaListGroupHeaderTemplate let-group>\n                    <ng-container\n                        [ngTemplateOutlet]=\"groupHeaderTemplate() ?? null\"\n                        [ngTemplateOutletContext]=\"{ $implicit: group }\"></ng-container>\n                </ng-template>\n            }\n            @if (headerTemplate()) {\n                <ng-template monaListHeaderTemplate>\n                    <ng-container [ngTemplateOutlet]=\"headerTemplate() ?? null\"></ng-container>\n                </ng-template>\n            }\n            @if (itemTemplate()) {\n                <ng-template monaListItemTemplate let-dataItem>\n                    <ng-container\n                        [ngTemplateOutlet]=\"itemTemplate() ?? null\"\n                        [ngTemplateOutletContext]=\"{ $implicit: dataItem }\"></ng-container>\n                </ng-template>\n            }\n            @if (noDataTemplate()) {\n                <ng-template monaListNoDataTemplate>\n                    <ng-container [ngTemplateOutlet]=\"noDataTemplate() ?? null\"></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 }] }], tagTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MultiSelectTagTemplateDirective), { ...{ 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 }] }], autoClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoClose", required: false }] }], checkboxes: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkboxes", 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"] }], 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"] }] } });
@@ -642,5 +651,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { MultiSelectComponent, MultiSelectSummaryTagDirective, MultiSelectSummaryTagTemplateDirective, MultiSelectTagTemplateDirective };
+export { MULTI_SELECT_DEFAULT_MESSAGES, MultiSelectComponent, MultiSelectSummaryTagDirective, MultiSelectSummaryTagTemplateDirective, MultiSelectTagTemplateDirective };
 //# sourceMappingURL=nanahoshi-mona-ui-multi-select.mjs.map

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

@@ -8,6 +8,7 @@ import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { LucideOctagonX, LucideBadgeInfo, LucideCircleCheckBig, LucideOctagonAlert, LucideX } from '@lucide/angular';
 import { ButtonDirective } from '@nanahoshi/mona-ui/button';
+import { MonaI18nService } from '@nanahoshi/mona-ui/i18n';
 import { ProgressBarComponent } from '@nanahoshi/mona-ui/progress-bar';
 
 //---------------------------------
@@ -36,7 +37,7 @@ const notificationContainerBaseThemeVariants = cva(`p-2 z-40000`, {
 // Notification Component
 //-----------------------
 const notificationActionThemeVariants = cva(`
-        absolute top-0 right-0 flex h-auto items-start
+        absolute top-0 end-0 flex h-auto items-start
         [&>svg.lucide]:cursor-pointer
         [&>svg.lucide]:-mt-1
     `);
@@ -72,18 +73,29 @@ const notificationTextThemeVariants = cva(`
         text-sm text-foreground
     `);
 
+const NOTIFICATION_DEFAULT_MESSAGES = {
+    close: "Close",
+    error: "Error",
+    info: "Info",
+    success: "Success",
+    warning: "Warning"
+};
+
 class NotificationComponent {
     #destroyRef;
     #document;
+    #i18n;
     #isUrgent;
     #paused;
     constructor() {
         this.#destroyRef = inject(DestroyRef);
         this.#document = inject(DOCUMENT);
+        this.#i18n = inject(MonaI18nService);
         this.#isUrgent = computed(() => this.type() === "error" || this.type() === "warning", /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#isUrgent" }] : /* istanbul ignore next */ []));
         this.#paused = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#paused" }] : /* istanbul ignore next */ []));
+        this.messages = this.#i18n.componentMessages("notification", NOTIFICATION_DEFAULT_MESSAGES);
         this.actionClass = computed(() => {
             return notificationActionThemeVariants();
         }, /* @ts-ignore */
@@ -98,6 +110,10 @@ class NotificationComponent {
             return notificationBodyThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "bodyClass" }] : /* istanbul ignore next */ []));
+        this.closeTitle = computed(() => {
+            return this.data().options.closeTitle ?? this.messages().close;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "closeTitle" }] : /* istanbul ignore next */ []));
         this.contentClass = computed(() => {
             return notificationContentThemeVariants();
         }, /* @ts-ignore */
@@ -140,6 +156,8 @@ class NotificationComponent {
         ...(ngDevMode ? [{ debugName: "textClass" }] : /* istanbul ignore next */ []));
         this.type = computed(() => this.data().options.type ?? "info", /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+        this.title = computed(() => this.data().options.title ?? this.messages()[this.type()], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
         /**
          * @description The notification's internal state, created and managed by `NotificationService`. Not intended to be provided directly by consumers.
          */
@@ -189,7 +207,7 @@ class NotificationComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: NotificationComponent, isStandalone: true, selector: "mona-notification", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "pointerenter": "onInteractionStart()", "pointerleave": "onInteractionEnd()", "focusin": "onInteractionStart()", "focusout": "onInteractionEnd()" } }, viewQueries: [{ propertyName: "contentHost", first: true, predicate: ["contentHost"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "@let width = typeof data().options.width === \"string\" ? data().options.width : `${data().options.width}px`;\n@let height = typeof data().options.height === \"string\" ? data().options.height : `${data().options.height}px`;\n\n<div\n    [class]=\"baseClass()\"\n    [style.width]=\"width\"\n    [style.height]=\"height\"\n    [attr.role]=\"role()\"\n    [attr.aria-live]=\"ariaLive()\">\n    @if (contentTemplate() || contentComponent()) {\n        @if (contentTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"contentTemplate()\"></ng-container>\n        } @else if (contentComponent()) {\n            <ng-container #contentHost></ng-container>\n        }\n    } @else {\n        <div [class]=\"bodyClass()\">\n            <div [class]=\"iconClass()\" aria-hidden=\"true\">\n                @switch (type()) {\n                    @case (\"error\") {\n                        <svg lucideOctagonX aria-hidden=\"true\"></svg>\n                    }\n                    @case (\"info\") {\n                        <svg lucideBadgeInfo aria-hidden=\"true\"></svg>\n                    }\n                    @case (\"success\") {\n                        <svg lucideCircleCheckBig aria-hidden=\"true\"></svg>\n                    }\n                    @case (\"warning\") {\n                        <svg lucideOctagonAlert aria-hidden=\"true\"></svg>\n                    }\n                }\n            </div>\n            <div class=\"flex flex-col flex-1\">\n                <div [class]=\"headerClass()\">{{ data().options.title }}</div>\n                <div [class]=\"contentClass()\">\n                    @if (isStringContent()) {\n                        <span [class]=\"textClass()\" title=\"{{ data().options.content }}\">{{\n                            data().options.content\n                        }}</span>\n                    }\n                </div>\n            </div>\n        </div>\n        @if (data().options.progressBar) {\n            <div class=\"w-full h-1\">\n                <mona-progress-bar\n                    [value]=\"progressValue()\"\n                    [color]=\"progressColor()\"\n                    [labelVisible]=\"false\"\n                    [animate]=\"false\"\n                    rounded=\"none\"\n                    class=\"h-full\"></mona-progress-bar>\n            </div>\n        }\n    }\n    @if (data().options.closable) {\n        <div [class]=\"actionClass()\">\n            <button\n                monaButton\n                size=\"small\"\n                look=\"link\"\n                rounded=\"none\"\n                [iconOnly]=\"true\"\n                [title]=\"data().options.closeTitle || 'Close'\"\n                [attr.aria-label]=\"data().options.closeTitle || 'Close'\"\n                (click)=\"close()\">\n                <svg lucideX [size]=\"14\" aria-hidden=\"true\"></svg>\n            </button>\n        </div>\n    }\n</div>\n", styles: [":host{display:block}@keyframes notification-slide-in-top{0%{clip-path:inset(0 -20px 100% -20px);transform:translateY(-12px);opacity:0}to{clip-path:inset(-20px);transform:translateY(0);opacity:1}}@keyframes notification-slide-out-top{0%{clip-path:inset(-20px);transform:translateY(0);opacity:1}to{clip-path:inset(0 -20px 100% -20px);transform:translateY(-12px);opacity:0}}@keyframes notification-slide-in-bottom{0%{clip-path:inset(100% -20px 0 -20px);transform:translateY(12px);opacity:0}to{clip-path:inset(-20px);transform:translateY(0);opacity:1}}@keyframes notification-slide-out-bottom{0%{clip-path:inset(-20px);transform:translateY(0);opacity:1}to{clip-path:inset(100% -20px 0 -20px);transform:translateY(12px);opacity:0}}:host.notification-enter-top{animation:notification-slide-in-top .3s cubic-bezier(.4,0,.2,1) forwards}:host.notification-enter-bottom{animation:notification-slide-in-bottom .3s cubic-bezier(.4,0,.2,1) forwards}:host.notification-leave-top{animation:notification-slide-out-top .3s cubic-bezier(.4,0,.2,1) forwards}:host.notification-leave-bottom{animation:notification-slide-out-bottom .3s cubic-bezier(.4,0,.2,1) forwards}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ProgressBarComponent, selector: "mona-progress-bar", inputs: ["aria-label", "aria-valuetext", "animate", "color", "disabled", "indeterminate", "labelPosition", "labelStyles", "labelVisible", "max", "min", "rounded", "class", "value"] }, { 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: "component", type: LucideOctagonX, selector: "svg[lucideOctagonX], svg[lucideXOctagon]" }, { kind: "component", type: LucideBadgeInfo, selector: "svg[lucideBadgeInfo]" }, { kind: "component", type: LucideCircleCheckBig, selector: "svg[lucideCircleCheckBig], svg[lucideCheckCircle]" }, { kind: "component", type: LucideOctagonAlert, selector: "svg[lucideOctagonAlert], svg[lucideAlertOctagon]" }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: NotificationComponent, isStandalone: true, selector: "mona-notification", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "pointerenter": "onInteractionStart()", "pointerleave": "onInteractionEnd()", "focusin": "onInteractionStart()", "focusout": "onInteractionEnd()" } }, viewQueries: [{ propertyName: "contentHost", first: true, predicate: ["contentHost"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "@let width = typeof data().options.width === \"string\" ? data().options.width : `${data().options.width}px`;\n@let height = typeof data().options.height === \"string\" ? data().options.height : `${data().options.height}px`;\n\n<div\n    [class]=\"baseClass()\"\n    [style.width]=\"width\"\n    [style.height]=\"height\"\n    [attr.role]=\"role()\"\n    [attr.aria-live]=\"ariaLive()\">\n    @if (contentTemplate() || contentComponent()) {\n        @if (contentTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"contentTemplate()\"></ng-container>\n        } @else if (contentComponent()) {\n            <ng-container #contentHost></ng-container>\n        }\n    } @else {\n        <div [class]=\"bodyClass()\">\n            <div [class]=\"iconClass()\" aria-hidden=\"true\">\n                @switch (type()) {\n                    @case (\"error\") {\n                        <svg lucideOctagonX aria-hidden=\"true\"></svg>\n                    }\n                    @case (\"info\") {\n                        <svg lucideBadgeInfo aria-hidden=\"true\"></svg>\n                    }\n                    @case (\"success\") {\n                        <svg lucideCircleCheckBig aria-hidden=\"true\"></svg>\n                    }\n                    @case (\"warning\") {\n                        <svg lucideOctagonAlert aria-hidden=\"true\"></svg>\n                    }\n                }\n            </div>\n            <div class=\"flex flex-col flex-1\">\n                <div [class]=\"headerClass()\">{{ title() }}</div>\n                <div [class]=\"contentClass()\">\n                    @if (isStringContent()) {\n                        <span [class]=\"textClass()\" title=\"{{ data().options.content }}\">{{\n                            data().options.content\n                        }}</span>\n                    }\n                </div>\n            </div>\n        </div>\n        @if (data().options.progressBar) {\n            <div class=\"w-full h-1\">\n                <mona-progress-bar\n                    [value]=\"progressValue()\"\n                    [color]=\"progressColor()\"\n                    [labelVisible]=\"false\"\n                    [animate]=\"false\"\n                    rounded=\"none\"\n                    class=\"h-full\"></mona-progress-bar>\n            </div>\n        }\n    }\n    @if (data().options.closable) {\n        <div [class]=\"actionClass()\">\n            <button\n                monaButton\n                size=\"small\"\n                look=\"link\"\n                rounded=\"none\"\n                [iconOnly]=\"true\"\n                [title]=\"closeTitle()\"\n                [attr.aria-label]=\"closeTitle()\"\n                (click)=\"close()\">\n                <svg lucideX [size]=\"14\" aria-hidden=\"true\"></svg>\n            </button>\n        </div>\n    }\n</div>\n", styles: [":host{display:block}@keyframes notification-slide-in-top{0%{clip-path:inset(0 -20px 100% -20px);transform:translateY(-12px);opacity:0}to{clip-path:inset(-20px);transform:translateY(0);opacity:1}}@keyframes notification-slide-out-top{0%{clip-path:inset(-20px);transform:translateY(0);opacity:1}to{clip-path:inset(0 -20px 100% -20px);transform:translateY(-12px);opacity:0}}@keyframes notification-slide-in-bottom{0%{clip-path:inset(100% -20px 0 -20px);transform:translateY(12px);opacity:0}to{clip-path:inset(-20px);transform:translateY(0);opacity:1}}@keyframes notification-slide-out-bottom{0%{clip-path:inset(-20px);transform:translateY(0);opacity:1}to{clip-path:inset(100% -20px 0 -20px);transform:translateY(12px);opacity:0}}:host.notification-enter-top{animation:notification-slide-in-top .3s cubic-bezier(.4,0,.2,1) forwards}:host.notification-enter-bottom{animation:notification-slide-in-bottom .3s cubic-bezier(.4,0,.2,1) forwards}:host.notification-leave-top{animation:notification-slide-out-top .3s cubic-bezier(.4,0,.2,1) forwards}:host.notification-leave-bottom{animation:notification-slide-out-bottom .3s cubic-bezier(.4,0,.2,1) forwards}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ProgressBarComponent, selector: "mona-progress-bar", inputs: ["animate", "aria-label", "aria-valuetext", "color", "disabled", "indeterminate", "labelPosition", "labelStyles", "labelVisible", "max", "min", "rounded", "class", "value"] }, { 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: "component", type: LucideOctagonX, selector: "svg[lucideOctagonX], svg[lucideXOctagon]" }, { kind: "component", type: LucideBadgeInfo, selector: "svg[lucideBadgeInfo]" }, { kind: "component", type: LucideCircleCheckBig, selector: "svg[lucideCircleCheckBig], svg[lucideCheckCircle]" }, { kind: "component", type: LucideOctagonAlert, selector: "svg[lucideOctagonAlert], svg[lucideAlertOctagon]" }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NotificationComponent, decorators: [{
             type: Component,
@@ -207,7 +225,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         "(pointerleave)": "onInteractionEnd()",
                         "(focusin)": "onInteractionStart()",
                         "(focusout)": "onInteractionEnd()"
-                    }, template: "@let width = typeof data().options.width === \"string\" ? data().options.width : `${data().options.width}px`;\n@let height = typeof data().options.height === \"string\" ? data().options.height : `${data().options.height}px`;\n\n<div\n    [class]=\"baseClass()\"\n    [style.width]=\"width\"\n    [style.height]=\"height\"\n    [attr.role]=\"role()\"\n    [attr.aria-live]=\"ariaLive()\">\n    @if (contentTemplate() || contentComponent()) {\n        @if (contentTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"contentTemplate()\"></ng-container>\n        } @else if (contentComponent()) {\n            <ng-container #contentHost></ng-container>\n        }\n    } @else {\n        <div [class]=\"bodyClass()\">\n            <div [class]=\"iconClass()\" aria-hidden=\"true\">\n                @switch (type()) {\n                    @case (\"error\") {\n                        <svg lucideOctagonX aria-hidden=\"true\"></svg>\n                    }\n                    @case (\"info\") {\n                        <svg lucideBadgeInfo aria-hidden=\"true\"></svg>\n                    }\n                    @case (\"success\") {\n                        <svg lucideCircleCheckBig aria-hidden=\"true\"></svg>\n                    }\n                    @case (\"warning\") {\n                        <svg lucideOctagonAlert aria-hidden=\"true\"></svg>\n                    }\n                }\n            </div>\n            <div class=\"flex flex-col flex-1\">\n                <div [class]=\"headerClass()\">{{ data().options.title }}</div>\n                <div [class]=\"contentClass()\">\n                    @if (isStringContent()) {\n                        <span [class]=\"textClass()\" title=\"{{ data().options.content }}\">{{\n                            data().options.content\n                        }}</span>\n                    }\n                </div>\n            </div>\n        </div>\n        @if (data().options.progressBar) {\n            <div class=\"w-full h-1\">\n                <mona-progress-bar\n                    [value]=\"progressValue()\"\n                    [color]=\"progressColor()\"\n                    [labelVisible]=\"false\"\n                    [animate]=\"false\"\n                    rounded=\"none\"\n                    class=\"h-full\"></mona-progress-bar>\n            </div>\n        }\n    }\n    @if (data().options.closable) {\n        <div [class]=\"actionClass()\">\n            <button\n                monaButton\n                size=\"small\"\n                look=\"link\"\n                rounded=\"none\"\n                [iconOnly]=\"true\"\n                [title]=\"data().options.closeTitle || 'Close'\"\n                [attr.aria-label]=\"data().options.closeTitle || 'Close'\"\n                (click)=\"close()\">\n                <svg lucideX [size]=\"14\" aria-hidden=\"true\"></svg>\n            </button>\n        </div>\n    }\n</div>\n", styles: [":host{display:block}@keyframes notification-slide-in-top{0%{clip-path:inset(0 -20px 100% -20px);transform:translateY(-12px);opacity:0}to{clip-path:inset(-20px);transform:translateY(0);opacity:1}}@keyframes notification-slide-out-top{0%{clip-path:inset(-20px);transform:translateY(0);opacity:1}to{clip-path:inset(0 -20px 100% -20px);transform:translateY(-12px);opacity:0}}@keyframes notification-slide-in-bottom{0%{clip-path:inset(100% -20px 0 -20px);transform:translateY(12px);opacity:0}to{clip-path:inset(-20px);transform:translateY(0);opacity:1}}@keyframes notification-slide-out-bottom{0%{clip-path:inset(-20px);transform:translateY(0);opacity:1}to{clip-path:inset(100% -20px 0 -20px);transform:translateY(12px);opacity:0}}:host.notification-enter-top{animation:notification-slide-in-top .3s cubic-bezier(.4,0,.2,1) forwards}:host.notification-enter-bottom{animation:notification-slide-in-bottom .3s cubic-bezier(.4,0,.2,1) forwards}:host.notification-leave-top{animation:notification-slide-out-top .3s cubic-bezier(.4,0,.2,1) forwards}:host.notification-leave-bottom{animation:notification-slide-out-bottom .3s cubic-bezier(.4,0,.2,1) forwards}\n"] }]
+                    }, template: "@let width = typeof data().options.width === \"string\" ? data().options.width : `${data().options.width}px`;\n@let height = typeof data().options.height === \"string\" ? data().options.height : `${data().options.height}px`;\n\n<div\n    [class]=\"baseClass()\"\n    [style.width]=\"width\"\n    [style.height]=\"height\"\n    [attr.role]=\"role()\"\n    [attr.aria-live]=\"ariaLive()\">\n    @if (contentTemplate() || contentComponent()) {\n        @if (contentTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"contentTemplate()\"></ng-container>\n        } @else if (contentComponent()) {\n            <ng-container #contentHost></ng-container>\n        }\n    } @else {\n        <div [class]=\"bodyClass()\">\n            <div [class]=\"iconClass()\" aria-hidden=\"true\">\n                @switch (type()) {\n                    @case (\"error\") {\n                        <svg lucideOctagonX aria-hidden=\"true\"></svg>\n                    }\n                    @case (\"info\") {\n                        <svg lucideBadgeInfo aria-hidden=\"true\"></svg>\n                    }\n                    @case (\"success\") {\n                        <svg lucideCircleCheckBig aria-hidden=\"true\"></svg>\n                    }\n                    @case (\"warning\") {\n                        <svg lucideOctagonAlert aria-hidden=\"true\"></svg>\n                    }\n                }\n            </div>\n            <div class=\"flex flex-col flex-1\">\n                <div [class]=\"headerClass()\">{{ title() }}</div>\n                <div [class]=\"contentClass()\">\n                    @if (isStringContent()) {\n                        <span [class]=\"textClass()\" title=\"{{ data().options.content }}\">{{\n                            data().options.content\n                        }}</span>\n                    }\n                </div>\n            </div>\n        </div>\n        @if (data().options.progressBar) {\n            <div class=\"w-full h-1\">\n                <mona-progress-bar\n                    [value]=\"progressValue()\"\n                    [color]=\"progressColor()\"\n                    [labelVisible]=\"false\"\n                    [animate]=\"false\"\n                    rounded=\"none\"\n                    class=\"h-full\"></mona-progress-bar>\n            </div>\n        }\n    }\n    @if (data().options.closable) {\n        <div [class]=\"actionClass()\">\n            <button\n                monaButton\n                size=\"small\"\n                look=\"link\"\n                rounded=\"none\"\n                [iconOnly]=\"true\"\n                [title]=\"closeTitle()\"\n                [attr.aria-label]=\"closeTitle()\"\n                (click)=\"close()\">\n                <svg lucideX [size]=\"14\" aria-hidden=\"true\"></svg>\n            </button>\n        </div>\n    }\n</div>\n", styles: [":host{display:block}@keyframes notification-slide-in-top{0%{clip-path:inset(0 -20px 100% -20px);transform:translateY(-12px);opacity:0}to{clip-path:inset(-20px);transform:translateY(0);opacity:1}}@keyframes notification-slide-out-top{0%{clip-path:inset(-20px);transform:translateY(0);opacity:1}to{clip-path:inset(0 -20px 100% -20px);transform:translateY(-12px);opacity:0}}@keyframes notification-slide-in-bottom{0%{clip-path:inset(100% -20px 0 -20px);transform:translateY(12px);opacity:0}to{clip-path:inset(-20px);transform:translateY(0);opacity:1}}@keyframes notification-slide-out-bottom{0%{clip-path:inset(-20px);transform:translateY(0);opacity:1}to{clip-path:inset(100% -20px 0 -20px);transform:translateY(12px);opacity:0}}:host.notification-enter-top{animation:notification-slide-in-top .3s cubic-bezier(.4,0,.2,1) forwards}:host.notification-enter-bottom{animation:notification-slide-in-bottom .3s cubic-bezier(.4,0,.2,1) forwards}:host.notification-leave-top{animation:notification-slide-out-top .3s cubic-bezier(.4,0,.2,1) forwards}:host.notification-leave-bottom{animation:notification-slide-out-bottom .3s cubic-bezier(.4,0,.2,1) forwards}\n"] }]
         }], ctorParameters: () => [], propDecorators: { contentHost: [{ type: i0.ViewChild, args: ["contentHost", { ...{ read: ViewContainerRef }, isSignal: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }] } });
 
 class NotificationContainerComponent {
@@ -239,19 +257,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                     }, template: "@for (notificationData of notificationDataList(); track notificationData.options.id) {\n    <mona-notification [data]=\"notificationData\" [animate.enter]=\"enterAnimClass()\" [animate.leave]=\"leaveAnimClass()\">\n    </mona-notification>\n}\n" }]
         }] });
 
-function getDefaultTitle(type) {
-    switch (type) {
-        case "info":
-            return "Info";
-        case "success":
-            return "Success";
-        case "warning":
-            return "Warning";
-        case "error":
-            return "Error";
-    }
-}
-
 class NotificationService {
     #appRef;
     #document;
@@ -290,7 +295,7 @@ class NotificationService {
             id: options.id ?? `Notification_${v4()}`,
             position,
             type,
-            title: options.title ?? getDefaultTitle(type),
+            title: options.title,
             closable: options.closable ?? (options.duration == null ? true : undefined)
         };
         const containerData = this.notificationContainerMap.get(position);
@@ -448,5 +453,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { NotificationService };
+export { NOTIFICATION_DEFAULT_MESSAGES, NotificationService };
 //# sourceMappingURL=nanahoshi-mona-ui-notification.mjs.map