@nanahoshi/mona-ui 0.18.5 → 0.19.0

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