@nanahoshi/mona-ui 0.18.6 → 0.20.0

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

@@ -1,6 +1,6 @@
 import { PreventableEvent } from '@nanahoshi/mona-ui/common';
 import * as i0 from '@angular/core';
-import { Directive, computed, input, inject, DestroyRef, signal, viewChild, viewChildren, ElementRef, model, output, afterRenderEffect, untracked, afterNextRender, Component, contentChild, TemplateRef, ChangeDetectionStrategy, contentChildren, linkedSignal } from '@angular/core';
+import { Directive, computed, input, inject, DestroyRef, signal, viewChild, viewChildren, ElementRef, model, output, afterRenderEffect, untracked, afterNextRender, Component, contentChild, TemplateRef, ChangeDetectionStrategy, linkedSignal, contentChildren } from '@angular/core';
 import { NgTemplateOutlet } from '@angular/common';
 import { firstOrDefault, select } from '@mirei/ts-collections';
 import { twMerge } from 'tailwind-merge';
@@ -8,6 +8,7 @@ import { cva } from 'class-variance-authority';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { LucideChevronDown, LucideChevronLeft, LucideChevronRight, LucideChevronUp, LucideX } from '@lucide/angular';
 import { ButtonDirective } from '@nanahoshi/mona-ui/button';
+import { injectComponentDirection, MonaI18nService } from '@nanahoshi/mona-ui/i18n';
 import { Subject, switchMap, EMPTY, timer, interval, tap, asapScheduler } from 'rxjs';
 import { createElementControlId } from '@nanahoshi/mona-ui/internal';
 
@@ -69,8 +70,8 @@ const tabListBaseThemeVariants = cva(`
         position: {
             top: "flex-row border-b border-border",
             bottom: "flex-row border-t border-border",
-            left: "flex-col max-h-full min-h-0 border-r border-border",
-            right: "flex-col max-h-full min-h-0 border-l border-border"
+            left: "flex-col max-h-full min-h-0 border-e border-border",
+            right: "flex-col max-h-full min-h-0 border-s border-border"
         }
     },
     defaultVariants: {
@@ -115,8 +116,8 @@ const tabListListItemThemeVariants = cva(`
         position: {
             top: "items-center justify-center whitespace-nowrap after:inset-x-0 after:bottom-0 after:h-[2px]",
             bottom: "items-center justify-center whitespace-nowrap after:inset-x-0 after:top-0 after:h-[2px]",
-            left: "w-full items-center justify-start text-start after:inset-y-0 after:right-0 after:w-[2px]",
-            right: "w-full items-center justify-start text-start after:inset-y-0 after:left-0 after:w-[2px]"
+            left: "w-full items-center justify-start text-start after:inset-y-0 after:end-0 after:w-[2px]",
+            right: "w-full items-center justify-start text-start after:inset-y-0 after:start-0 after:w-[2px]"
         },
         size: {
             small: "h-8 px-2 text-xs",
@@ -188,6 +189,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }], propDecorators: { active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: true }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: true }] }] } });
 
+const TABS_DEFAULT_MESSAGES = {
+    closeTab: "Close tab",
+    scrollNext: "Scroll tabs next",
+    scrollPrevious: "Scroll tabs previous"
+};
+
 function getTabOrientation(position) {
     return position === "left" || position === "right"
         ? "vertical"
@@ -196,14 +203,20 @@ function getTabOrientation(position) {
 
 class TabListComponent {
     #destroyRef;
+    #direction;
+    #i18n;
     #keydown$;
     #scrollIntent$;
     #resizeObserver;
     constructor() {
         this.#destroyRef = inject(DestroyRef);
+        this.#direction = injectComponentDirection();
+        this.#i18n = inject(MonaI18nService);
         this.#keydown$ = new Subject();
         this.#scrollIntent$ = new Subject();
         this.#resizeObserver = null;
+        this.isRtl = computed(() => this.#direction() === "rtl", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isRtl" }] : /* istanbul ignore next */ []));
         this.baseClass = computed(() => {
             return tabListBaseThemeVariants({ position: this.position() });
         }, /* @ts-ignore */
@@ -216,6 +229,7 @@ class TabListComponent {
             return tabListListWrapperThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "listWrapperClass" }] : /* istanbul ignore next */ []));
+        this.messages = this.#i18n.componentMessages("tabs", TABS_DEFAULT_MESSAGES);
         this.orientation = computed(() => {
             return getTabOrientation(this.position() ?? "top");
         }, /* @ts-ignore */
@@ -316,6 +330,48 @@ class TabListComponent {
     stopScrolling() {
         this.#scrollIntent$.next(null);
     }
+    activateTab(tab, event) {
+        const prevented = this.emitTabSelect(tab, event);
+        if (!prevented) {
+            this.selectTab(tab);
+            this.focusSelectedTab();
+        }
+    }
+    emitTabClose(tabItem, event) {
+        const selected = tabItem.id === this.selectedTabId();
+        const tabCloseEvent = new TabCloseEvent(tabItem.index, selected, event);
+        this.tabClose.emit(tabCloseEvent);
+        return tabCloseEvent.isDefaultPrevented();
+    }
+    emitTabSelect(tab, event) {
+        const selectEvent = new TabSelectEvent(tab.index, event);
+        this.tabSelect.emit(selectEvent);
+        return selectEvent.isDefaultPrevented();
+    }
+    focusTab(tab) {
+        const tabListItems = this.tabListItems();
+        const tabListItem = tabListItems.find(t => t.nativeElement.getAttribute("data-tab-id") === tab.id);
+        tabListItem?.nativeElement.focus();
+    }
+    getNavigationDirection(event) {
+        if (this.orientation() === "vertical") {
+            if (event.key === "ArrowUp") {
+                return "previous";
+            }
+            if (event.key === "ArrowDown") {
+                return "next";
+            }
+            return null;
+        }
+        const isRtl = this.isRtl();
+        if (event.key === "ArrowLeft") {
+            return isRtl ? "next" : "previous";
+        }
+        if (event.key === "ArrowRight") {
+            return isRtl ? "previous" : "next";
+        }
+        return null;
+    }
     handleKeyboardEvents(event) {
         const tabList = this.tabList();
         const tabs = Array.from(tabList);
@@ -362,47 +418,6 @@ class TabListComponent {
                 break;
         }
     }
-    activateTab(tab, event) {
-        const prevented = this.emitTabSelect(tab, event);
-        if (!prevented) {
-            this.selectTab(tab);
-            this.focusSelectedTab();
-        }
-    }
-    emitTabClose(tabItem, event) {
-        const selected = tabItem.id === this.selectedTabId();
-        const tabCloseEvent = new TabCloseEvent(tabItem.index, selected, event);
-        this.tabClose.emit(tabCloseEvent);
-        return tabCloseEvent.isDefaultPrevented();
-    }
-    emitTabSelect(tab, event) {
-        const selectEvent = new TabSelectEvent(tab.index, event);
-        this.tabSelect.emit(selectEvent);
-        return selectEvent.isDefaultPrevented();
-    }
-    focusTab(tab) {
-        const tabListItems = this.tabListItems();
-        const tabListItem = tabListItems.find(t => t.nativeElement.getAttribute("data-tab-id") === tab.id);
-        tabListItem?.nativeElement.focus();
-    }
-    getNavigationDirection(event) {
-        if (this.orientation() === "vertical") {
-            if (event.key === "ArrowUp") {
-                return "previous";
-            }
-            if (event.key === "ArrowDown") {
-                return "next";
-            }
-            return null;
-        }
-        if (event.key === "ArrowLeft") {
-            return "previous";
-        }
-        if (event.key === "ArrowRight") {
-            return "next";
-        }
-        return null;
-    }
     handleTabKey(tab, event) {
         event.preventDefault();
         const panelId = tab.id + "-panel";
@@ -412,11 +427,14 @@ class TabListComponent {
         }
     }
     performScroll(element, direction) {
-        const offset = direction === "previous" ? -100 : 100;
+        let offset = direction === "previous" ? -100 : 100;
         if (this.orientation() === "vertical") {
             element.scrollBy({ top: offset, behavior: "smooth" });
             return;
         }
+        if (this.isRtl()) {
+            offset = -offset;
+        }
         element.scrollBy({ left: offset, behavior: "smooth" });
     }
     selectTab(tab) {
@@ -456,7 +474,7 @@ class TabListComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TabListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: TabListComponent, isStandalone: true, selector: "mona-tab-list", inputs: { closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: true, transformFunction: null }, selectedTabId: { classPropertyName: "selectedTabId", publicName: "selectedTabId", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: true, transformFunction: null }, tabList: { classPropertyName: "tabList", publicName: "tabList", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { selectedTabId: "selectedTabIdChange", tabClose: "tabClose", tabSelect: "tabSelect" }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "class": "baseClass()" } }, viewQueries: [{ propertyName: "tabListElement", first: true, predicate: ["tabListElement"], descendants: true, isSignal: true }, { propertyName: "tabListItems", predicate: TabListItemDirective, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (overflowControlsVisible()) {\n    <button\n        monaButton\n        look=\"link\"\n        size=\"small\"\n        [class]=\"scrollButtonClass()\"\n        (click)=\"startScrolling(tabListElement, 'previous', 'single')\"\n        (pointerdown)=\"startContinuousScroll($event, tabListElement, 'previous')\"\n        (pointerup)=\"stopScrolling()\"\n        (pointercancel)=\"stopScrolling()\"\n        [attr.aria-hidden]=\"true\"\n        tabindex=\"-1\">\n        @if (orientation() === 'vertical') {\n            <svg lucideChevronUp [size]=\"16\"></svg>\n        } @else {\n            <svg lucideChevronLeft [size]=\"16\"></svg>\n        }\n    </button>\n}\n<div [class]=\"listWrapperClass()\">\n    <ul [class]=\"listClass()\" #tabListElement role=\"tablist\" [attr.aria-orientation]=\"orientation()\">\n        @for (tab of tabList(); track tab) {\n            @let selected = tab.id === selectedTabId();\n            @let itemDisabled = tab.disabled || disabled();\n            <li\n                monaTabListItem\n                [id]=\"tab.id + '-tab'\"\n                [active]=\"selected\"\n                [disabled]=\"itemDisabled\"\n                [position]=\"position()\"\n                [size]=\"size()\"\n                role=\"tab\"\n                [tabindex]=\"selected ? 0 : -1\"\n                [attr.aria-selected]=\"selected\"\n                [attr.aria-disabled]=\"itemDisabled\"\n                [attr.aria-controls]=\"tab.id + '-panel'\"\n                [attr.data-selected]=\"selected\"\n                [attr.data-tab-id]=\"tab.id\"\n                (click)=\"onTabClick(tab, tabListElement, $event)\">\n                <div>\n                    @if (tab.titleTemplate) {\n                        <ng-container [ngTemplateOutlet]=\"tab.titleTemplate\"></ng-container>\n                    } @else {\n                        <span>{{ tab.title }}</span>\n                    }\n                </div>\n                @if (tab.closable || closable()) {\n                    <button\n                        monaButton\n                        look=\"link\"\n                        [disabled]=\"itemDisabled\"\n                        (click)=\"onTabClose(tab, $event)\"\n                        class=\"px-0 h-fit ml-1 w-min\"\n                        tabindex=\"-1\">\n                        <svg lucideX [size]=\"16\"></svg>\n                    </button>\n                }\n            </li>\n        }\n    </ul>\n</div>\n@if (overflowControlsVisible()) {\n    <button\n        monaButton\n        look=\"link\"\n        size=\"small\"\n        [class]=\"scrollButtonClass()\"\n        (click)=\"startScrolling(tabListElement, 'next', 'single')\"\n        (pointerdown)=\"startContinuousScroll($event, tabListElement, 'next')\"\n        (pointerup)=\"stopScrolling()\"\n        (pointercancel)=\"stopScrolling()\"\n        [attr.aria-hidden]=\"true\"\n        tabindex=\"-1\">\n        @if (orientation() === 'vertical') {\n            <svg lucideChevronDown [size]=\"16\"></svg>\n        } @else {\n            <svg lucideChevronRight [size]=\"16\"></svg>\n        }\n    </button>\n}\n", dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "type", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TabListItemDirective, selector: "li[monaTabListItem]", inputs: ["active", "disabled", "position", "size"] }, { kind: "component", type: LucideChevronDown, selector: "svg[lucideChevronDown]" }, { kind: "component", type: LucideChevronLeft, selector: "svg[lucideChevronLeft]" }, { kind: "component", type: LucideChevronRight, selector: "svg[lucideChevronRight]" }, { kind: "component", type: LucideChevronUp, selector: "svg[lucideChevronUp]" }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: TabListComponent, isStandalone: true, selector: "mona-tab-list", inputs: { closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: true, transformFunction: null }, selectedTabId: { classPropertyName: "selectedTabId", publicName: "selectedTabId", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: true, transformFunction: null }, tabList: { classPropertyName: "tabList", publicName: "tabList", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { selectedTabId: "selectedTabIdChange", tabClose: "tabClose", tabSelect: "tabSelect" }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "class": "baseClass()" } }, viewQueries: [{ propertyName: "tabListElement", first: true, predicate: ["tabListElement"], descendants: true, isSignal: true }, { propertyName: "tabListItems", predicate: TabListItemDirective, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (overflowControlsVisible()) {\n    <button\n        monaButton\n        look=\"link\"\n        size=\"small\"\n        [class]=\"scrollButtonClass()\"\n        [attr.aria-label]=\"messages().scrollPrevious\"\n        (click)=\"startScrolling(tabListElement, 'previous', 'single')\"\n        (pointerdown)=\"startContinuousScroll($event, tabListElement, 'previous')\"\n        (pointerup)=\"stopScrolling()\"\n        (pointercancel)=\"stopScrolling()\"\n        [attr.aria-hidden]=\"true\"\n        tabindex=\"-1\">\n        @if (orientation() === 'vertical') {\n            <svg lucideChevronUp [size]=\"16\"></svg>\n        } @else {\n            <svg lucideChevronLeft [size]=\"16\" class=\"rtl:rotate-180\"></svg>\n        }\n    </button>\n}\n<div [class]=\"listWrapperClass()\">\n    <ul [class]=\"listClass()\" #tabListElement role=\"tablist\" [attr.aria-orientation]=\"orientation()\">\n        @for (tab of tabList(); track tab) {\n            @let selected = tab.id === selectedTabId();\n            @let itemDisabled = tab.disabled || disabled();\n            <li\n                monaTabListItem\n                [id]=\"tab.id + '-tab'\"\n                [active]=\"selected\"\n                [disabled]=\"itemDisabled\"\n                [position]=\"position()\"\n                [size]=\"size()\"\n                role=\"tab\"\n                [tabindex]=\"selected ? 0 : -1\"\n                [attr.aria-selected]=\"selected\"\n                [attr.aria-disabled]=\"itemDisabled\"\n                [attr.aria-controls]=\"tab.id + '-panel'\"\n                [attr.data-selected]=\"selected\"\n                [attr.data-tab-id]=\"tab.id\"\n                (click)=\"onTabClick(tab, tabListElement, $event)\">\n                <div>\n                    @if (tab.titleTemplate) {\n                        <ng-container [ngTemplateOutlet]=\"tab.titleTemplate\"></ng-container>\n                    } @else {\n                        <span>{{ tab.title }}</span>\n                    }\n                </div>\n                @if (tab.closable || closable()) {\n                    <button\n                        monaButton\n                        look=\"link\"\n                        [disabled]=\"itemDisabled\"\n                        [attr.aria-label]=\"messages().closeTab\"\n                        (click)=\"onTabClose(tab, $event)\"\n                        class=\"px-0 h-fit ms-1 w-min\"\n                        tabindex=\"-1\">\n                        <svg lucideX [size]=\"16\"></svg>\n                    </button>\n                }\n            </li>\n        }\n    </ul>\n</div>\n@if (overflowControlsVisible()) {\n    <button\n        monaButton\n        look=\"link\"\n        size=\"small\"\n        [class]=\"scrollButtonClass()\"\n        [attr.aria-label]=\"messages().scrollNext\"\n        (click)=\"startScrolling(tabListElement, 'next', 'single')\"\n        (pointerdown)=\"startContinuousScroll($event, tabListElement, 'next')\"\n        (pointerup)=\"stopScrolling()\"\n        (pointercancel)=\"stopScrolling()\"\n        [attr.aria-hidden]=\"true\"\n        tabindex=\"-1\">\n        @if (orientation() === 'vertical') {\n            <svg lucideChevronDown [size]=\"16\"></svg>\n        } @else {\n            <svg lucideChevronRight [size]=\"16\" class=\"rtl:rotate-180\"></svg>\n        }\n    </button>\n}\n", dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "type", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TabListItemDirective, selector: "li[monaTabListItem]", inputs: ["active", "disabled", "position", "size"] }, { kind: "component", type: LucideChevronDown, selector: "svg[lucideChevronDown]" }, { kind: "component", type: LucideChevronLeft, selector: "svg[lucideChevronLeft]" }, { kind: "component", type: LucideChevronRight, selector: "svg[lucideChevronRight]" }, { kind: "component", type: LucideChevronUp, selector: "svg[lucideChevronUp]" }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TabListComponent, decorators: [{
             type: Component,
@@ -472,7 +490,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                     ], host: {
                         "[class]": "baseClass()",
                         "(keydown)": "onKeydown($event)"
-                    }, template: "@if (overflowControlsVisible()) {\n    <button\n        monaButton\n        look=\"link\"\n        size=\"small\"\n        [class]=\"scrollButtonClass()\"\n        (click)=\"startScrolling(tabListElement, 'previous', 'single')\"\n        (pointerdown)=\"startContinuousScroll($event, tabListElement, 'previous')\"\n        (pointerup)=\"stopScrolling()\"\n        (pointercancel)=\"stopScrolling()\"\n        [attr.aria-hidden]=\"true\"\n        tabindex=\"-1\">\n        @if (orientation() === 'vertical') {\n            <svg lucideChevronUp [size]=\"16\"></svg>\n        } @else {\n            <svg lucideChevronLeft [size]=\"16\"></svg>\n        }\n    </button>\n}\n<div [class]=\"listWrapperClass()\">\n    <ul [class]=\"listClass()\" #tabListElement role=\"tablist\" [attr.aria-orientation]=\"orientation()\">\n        @for (tab of tabList(); track tab) {\n            @let selected = tab.id === selectedTabId();\n            @let itemDisabled = tab.disabled || disabled();\n            <li\n                monaTabListItem\n                [id]=\"tab.id + '-tab'\"\n                [active]=\"selected\"\n                [disabled]=\"itemDisabled\"\n                [position]=\"position()\"\n                [size]=\"size()\"\n                role=\"tab\"\n                [tabindex]=\"selected ? 0 : -1\"\n                [attr.aria-selected]=\"selected\"\n                [attr.aria-disabled]=\"itemDisabled\"\n                [attr.aria-controls]=\"tab.id + '-panel'\"\n                [attr.data-selected]=\"selected\"\n                [attr.data-tab-id]=\"tab.id\"\n                (click)=\"onTabClick(tab, tabListElement, $event)\">\n                <div>\n                    @if (tab.titleTemplate) {\n                        <ng-container [ngTemplateOutlet]=\"tab.titleTemplate\"></ng-container>\n                    } @else {\n                        <span>{{ tab.title }}</span>\n                    }\n                </div>\n                @if (tab.closable || closable()) {\n                    <button\n                        monaButton\n                        look=\"link\"\n                        [disabled]=\"itemDisabled\"\n                        (click)=\"onTabClose(tab, $event)\"\n                        class=\"px-0 h-fit ml-1 w-min\"\n                        tabindex=\"-1\">\n                        <svg lucideX [size]=\"16\"></svg>\n                    </button>\n                }\n            </li>\n        }\n    </ul>\n</div>\n@if (overflowControlsVisible()) {\n    <button\n        monaButton\n        look=\"link\"\n        size=\"small\"\n        [class]=\"scrollButtonClass()\"\n        (click)=\"startScrolling(tabListElement, 'next', 'single')\"\n        (pointerdown)=\"startContinuousScroll($event, tabListElement, 'next')\"\n        (pointerup)=\"stopScrolling()\"\n        (pointercancel)=\"stopScrolling()\"\n        [attr.aria-hidden]=\"true\"\n        tabindex=\"-1\">\n        @if (orientation() === 'vertical') {\n            <svg lucideChevronDown [size]=\"16\"></svg>\n        } @else {\n            <svg lucideChevronRight [size]=\"16\"></svg>\n        }\n    </button>\n}\n" }]
+                    }, template: "@if (overflowControlsVisible()) {\n    <button\n        monaButton\n        look=\"link\"\n        size=\"small\"\n        [class]=\"scrollButtonClass()\"\n        [attr.aria-label]=\"messages().scrollPrevious\"\n        (click)=\"startScrolling(tabListElement, 'previous', 'single')\"\n        (pointerdown)=\"startContinuousScroll($event, tabListElement, 'previous')\"\n        (pointerup)=\"stopScrolling()\"\n        (pointercancel)=\"stopScrolling()\"\n        [attr.aria-hidden]=\"true\"\n        tabindex=\"-1\">\n        @if (orientation() === 'vertical') {\n            <svg lucideChevronUp [size]=\"16\"></svg>\n        } @else {\n            <svg lucideChevronLeft [size]=\"16\" class=\"rtl:rotate-180\"></svg>\n        }\n    </button>\n}\n<div [class]=\"listWrapperClass()\">\n    <ul [class]=\"listClass()\" #tabListElement role=\"tablist\" [attr.aria-orientation]=\"orientation()\">\n        @for (tab of tabList(); track tab) {\n            @let selected = tab.id === selectedTabId();\n            @let itemDisabled = tab.disabled || disabled();\n            <li\n                monaTabListItem\n                [id]=\"tab.id + '-tab'\"\n                [active]=\"selected\"\n                [disabled]=\"itemDisabled\"\n                [position]=\"position()\"\n                [size]=\"size()\"\n                role=\"tab\"\n                [tabindex]=\"selected ? 0 : -1\"\n                [attr.aria-selected]=\"selected\"\n                [attr.aria-disabled]=\"itemDisabled\"\n                [attr.aria-controls]=\"tab.id + '-panel'\"\n                [attr.data-selected]=\"selected\"\n                [attr.data-tab-id]=\"tab.id\"\n                (click)=\"onTabClick(tab, tabListElement, $event)\">\n                <div>\n                    @if (tab.titleTemplate) {\n                        <ng-container [ngTemplateOutlet]=\"tab.titleTemplate\"></ng-container>\n                    } @else {\n                        <span>{{ tab.title }}</span>\n                    }\n                </div>\n                @if (tab.closable || closable()) {\n                    <button\n                        monaButton\n                        look=\"link\"\n                        [disabled]=\"itemDisabled\"\n                        [attr.aria-label]=\"messages().closeTab\"\n                        (click)=\"onTabClose(tab, $event)\"\n                        class=\"px-0 h-fit ms-1 w-min\"\n                        tabindex=\"-1\">\n                        <svg lucideX [size]=\"16\"></svg>\n                    </button>\n                }\n            </li>\n        }\n    </ul>\n</div>\n@if (overflowControlsVisible()) {\n    <button\n        monaButton\n        look=\"link\"\n        size=\"small\"\n        [class]=\"scrollButtonClass()\"\n        [attr.aria-label]=\"messages().scrollNext\"\n        (click)=\"startScrolling(tabListElement, 'next', 'single')\"\n        (pointerdown)=\"startContinuousScroll($event, tabListElement, 'next')\"\n        (pointerup)=\"stopScrolling()\"\n        (pointercancel)=\"stopScrolling()\"\n        [attr.aria-hidden]=\"true\"\n        tabindex=\"-1\">\n        @if (orientation() === 'vertical') {\n            <svg lucideChevronDown [size]=\"16\"></svg>\n        } @else {\n            <svg lucideChevronRight [size]=\"16\" class=\"rtl:rotate-180\"></svg>\n        }\n    </button>\n}\n" }]
         }], ctorParameters: () => [], propDecorators: { tabListElement: [{ type: i0.ViewChild, args: ["tabListElement", { isSignal: true }] }], tabListItems: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => TabListItemDirective), { ...{ read: ElementRef }, isSignal: true }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: true }] }], selectedTabId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedTabId", required: false }] }, { type: i0.Output, args: ["selectedTabIdChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: true }] }], tabClose: [{ type: i0.Output, args: ["tabClose"] }], tabList: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabList", required: true }] }], tabSelect: [{ type: i0.Output, args: ["tabSelect"] }] } });
 
 class TabComponent {
@@ -546,10 +564,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
 
 class TabsComponent {
     constructor() {
-        this.tabListComponent = viewChild.required(TabListComponent, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "tabListComponent" }] : /* istanbul ignore next */ []));
-        this.tabs = contentChildren(TabComponent, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
         this.baseClass = computed(() => {
             const variantClass = tabsBaseThemeVariants({ position: this.position() });
             const userClass = this.userClass();
@@ -575,6 +589,10 @@ class TabsComponent {
                 .toImmutableSet();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "tabList" }] : /* istanbul ignore next */ []));
+        this.tabListComponent = viewChild.required(TabListComponent, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tabListComponent" }] : /* istanbul ignore next */ []));
+        this.tabs = contentChildren(TabComponent, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
         /**
          * @description Displays a close button on each tab, unless overridden per tab.
          * @default false
@@ -629,11 +647,11 @@ class TabsComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: TabsComponent, isStandalone: true, selector: "mona-tabs", inputs: { closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, keepTabContent: { classPropertyName: "keepTabContent", publicName: "keepTabContent", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tabClose: "tabClose", tabSelect: "tabSelect" }, host: { properties: { "class": "baseClass()" } }, queries: [{ propertyName: "tabs", predicate: TabComponent, isSignal: true }], viewQueries: [{ propertyName: "tabListComponent", first: true, predicate: TabListComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<mona-tab-list\n    [closable]=\"closable()\"\n    [disabled]=\"disabled()\"\n    [position]=\"position()\"\n    [size]=\"size()\"\n    [tabList]=\"tabList()\"\n    [selectedTabId]=\"selectedTabId()\"\n    (selectedTabIdChange)=\"selectedTabId.set($event)\"\n    (tabClose)=\"tabClose.emit($event)\"\n    (tabSelect)=\"tabSelect.emit($event)\"></mona-tab-list>\n<div [class]=\"contentClass()\">\n    @for (tab of tabList(); track tab) {\n        @let selected = tab.id === selectedTabId();\n        @let tabLoaded = keepTabContent() || selected;\n        @let tabHidden = keepTabContent() && !selected;\n        @if (tabLoaded) {\n            <div\n                class=\"w-full h-full outline-none rounded-sm focus-visible:outline-2 focus-visible:outline-focus-indicator focus-visible:outline-offset-2\"\n                [class.hidden]=\"tabHidden\"\n                role=\"tabpanel\"\n                [id]=\"tab.id + '-panel'\"\n                tabindex=\"0\"\n                (keydown)=\"handlePanelKeyDown($event)\"\n                [attr.aria-hidden]=\"tabHidden\"\n                [attr.aria-labelledby]=\"tab.id + '-tab'\">\n                <ng-container [ngTemplateOutlet]=\"tab.contentTemplate\"></ng-container>\n            </div>\n        }\n    }\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TabListComponent, selector: "mona-tab-list", inputs: ["closable", "disabled", "position", "selectedTabId", "size", "tabList"], outputs: ["selectedTabIdChange", "tabClose", "tabSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: TabsComponent, isStandalone: true, selector: "mona-tabs", inputs: { closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, keepTabContent: { classPropertyName: "keepTabContent", publicName: "keepTabContent", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tabClose: "tabClose", tabSelect: "tabSelect" }, host: { properties: { "class": "baseClass()" } }, queries: [{ propertyName: "tabs", predicate: TabComponent, isSignal: true }], viewQueries: [{ propertyName: "tabListComponent", first: true, predicate: TabListComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<mona-tab-list\n    [closable]=\"closable()\"\n    [disabled]=\"disabled()\"\n    [position]=\"position()\"\n    [size]=\"size()\"\n    [tabList]=\"tabList()\"\n    [selectedTabId]=\"selectedTabId()\"\n    (selectedTabIdChange)=\"selectedTabId.set($event)\"\n    (tabClose)=\"tabClose.emit($event)\"\n    (tabSelect)=\"tabSelect.emit($event)\"></mona-tab-list>\n<div [class]=\"contentClass()\">\n    @for (tab of tabList(); track tab) {\n        @let selected = tab.id === selectedTabId();\n        @let tabLoaded = keepTabContent() || selected;\n        @let tabHidden = keepTabContent() && !selected;\n        @if (tabLoaded) {\n            <div\n                class=\"w-full h-full outline-none rounded-sm focus-visible:outline-2 focus-visible:outline-focus-indicator focus-visible:outline-offset-2\"\n                [class.hidden]=\"tabHidden\"\n                role=\"tabpanel\"\n                [id]=\"tab.id + '-panel'\"\n                tabindex=\"0\"\n                (keydown)=\"handlePanelKeyDown($event)\"\n                [attr.aria-hidden]=\"tabHidden\"\n                [attr.aria-labelledby]=\"tab.id + '-tab'\">\n                <ng-container [ngTemplateOutlet]=\"tab.contentTemplate\"></ng-container>\n            </div>\n        }\n    }\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TabListComponent, selector: "mona-tab-list", inputs: ["closable", "disabled", "position", "selectedTabId", "size", "tabList"], outputs: ["selectedTabIdChange", "tabClose", "tabSelect"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TabsComponent, decorators: [{
             type: Component,
-            args: [{ selector: "mona-tabs", changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, TabListComponent], host: {
+            args: [{ selector: "mona-tabs", imports: [NgTemplateOutlet, TabListComponent], host: {
                         "[class]": "baseClass()"
                     }, template: "<mona-tab-list\n    [closable]=\"closable()\"\n    [disabled]=\"disabled()\"\n    [position]=\"position()\"\n    [size]=\"size()\"\n    [tabList]=\"tabList()\"\n    [selectedTabId]=\"selectedTabId()\"\n    (selectedTabIdChange)=\"selectedTabId.set($event)\"\n    (tabClose)=\"tabClose.emit($event)\"\n    (tabSelect)=\"tabSelect.emit($event)\"></mona-tab-list>\n<div [class]=\"contentClass()\">\n    @for (tab of tabList(); track tab) {\n        @let selected = tab.id === selectedTabId();\n        @let tabLoaded = keepTabContent() || selected;\n        @let tabHidden = keepTabContent() && !selected;\n        @if (tabLoaded) {\n            <div\n                class=\"w-full h-full outline-none rounded-sm focus-visible:outline-2 focus-visible:outline-focus-indicator focus-visible:outline-offset-2\"\n                [class.hidden]=\"tabHidden\"\n                role=\"tabpanel\"\n                [id]=\"tab.id + '-panel'\"\n                tabindex=\"0\"\n                (keydown)=\"handlePanelKeyDown($event)\"\n                [attr.aria-hidden]=\"tabHidden\"\n                [attr.aria-labelledby]=\"tab.id + '-tab'\">\n                <ng-container [ngTemplateOutlet]=\"tab.contentTemplate\"></ng-container>\n            </div>\n        }\n    }\n</div>\n" }]
         }], propDecorators: { tabListComponent: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TabListComponent), { isSignal: true }] }], tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TabComponent), { isSignal: true }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], keepTabContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepTabContent", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], tabClose: [{ type: i0.Output, args: ["tabClose"] }], tabSelect: [{ type: i0.Output, args: ["tabSelect"] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
@@ -646,5 +664,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { TabCloseEvent, TabComponent, TabContentTemplateDirective, TabSelectEvent, TabTitleTemplateDirective, TabsComponent };
+export { TABS_DEFAULT_MESSAGES, TabCloseEvent, TabComponent, TabContentTemplateDirective, TabSelectEvent, TabTitleTemplateDirective, TabsComponent };
 //# sourceMappingURL=nanahoshi-mona-ui-tabs.mjs.map

package/fesm2022/nanahoshi-mona-ui-text-box.mjs

@@ -5,6 +5,7 @@ import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { LucideX } from '@lucide/angular';
 import { ButtonDirective } from '@nanahoshi/mona-ui/button';
+import { MonaI18nService } from '@nanahoshi/mona-ui/i18n';
 import { themeControlSurfaceClasses, rxTimeout, AttributeBinderDirective } from '@nanahoshi/mona-ui/internal';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
@@ -31,6 +32,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }] });
 
+const TEXT_BOX_DEFAULT_MESSAGES = {
+    clear: "Clear"
+};
+
 const textBoxThemeVariants = cva(`
         flex w-full min-w-0 items-center
         overflow-hidden
@@ -139,6 +144,7 @@ const inputThemeVariants = cva(`
 class TextBoxComponent {
     constructor() {
         this.#destroyRef = inject(DestroyRef);
+        this.#i18n = inject(MonaI18nService);
         this.classes = computed(() => {
             const rounded = this.rounded();
             const size = this.size();
@@ -151,6 +157,7 @@ class TextBoxComponent {
         ...(ngDevMode ? [{ debugName: "inputRef" }] : /* istanbul ignore next */ []));
         this.invalidInput = computed(() => this.touched() && (this.invalid() || (this.required() && !this.value())), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "invalidInput" }] : /* istanbul ignore next */ []));
+        this.messages = this.#i18n.componentMessages("textBox", TEXT_BOX_DEFAULT_MESSAGES);
         this.prefixTemplateList = contentChildren(TextBoxPrefixTemplateDirective, { ...(ngDevMode ? { debugName: "prefixTemplateList" } : /* istanbul ignore next */ {}), read: TemplateRef });
         this.suffixTemplateList = contentChildren(TextBoxSuffixTemplateDirective, { ...(ngDevMode ? { debugName: "suffixTemplateList" } : /* istanbul ignore next */ {}), read: TemplateRef });
         /**
@@ -175,16 +182,16 @@ class TextBoxComponent {
          * @description Emitted when the inner input loses focus.
          */
         this.inputBlur = output();
-        /**
-         * @description Emitted when the inner input gains focus.
-         */
-        this.inputFocus = output();
         /**
          * @description Additional CSS classes applied to the inner `<input>` element.
          * @default ""
          */
         this.inputClass = input("", /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "inputClass" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Emitted when the inner input gains focus.
+         */
+        this.inputFocus = output();
         /**
          * @description Inline styles applied to the inner `<input>` element.
          * Accepts a style string or a `CSSStyleDeclaration` partial.
@@ -261,6 +268,7 @@ class TextBoxComponent {
         ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     }
     #destroyRef;
+    #i18n;
     focus() {
         const el = this.inputRef().nativeElement;
         el.focus();
@@ -282,7 +290,7 @@ class TextBoxComponent {
         this.touch.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TextBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: TextBoxComponent, isStandalone: true, selector: "mona-text-box", inputs: { clearButton: { classPropertyName: "clearButton", publicName: "clearButton", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, inputAttributes: { classPropertyName: "inputAttributes", publicName: "inputAttributes", isSignal: true, isRequired: false, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null }, inputStyle: { classPropertyName: "inputStyle", publicName: "inputStyle", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", 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 }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { inputBlur: "inputBlur", inputFocus: "inputFocus", touch: "touch", value: "valueChange" }, host: { properties: { "attr.data-disabled": "disabled() || null", "attr.data-readonly": "readonly() || null", "attr.data-required": "required() || null", "attr.data-invalid": "invalidInput() || null", "class": "classes()" } }, queries: [{ propertyName: "prefixTemplateList", predicate: TextBoxPrefixTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "suffixTemplateList", predicate: TextBoxSuffixTemplateDirective, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "@for (prefixTemplate of prefixTemplateList(); track $index) {\n    <span class=\"flex h-full flex-wrap items-center\">\n        <ng-container *ngTemplateOutlet=\"prefixTemplate\"></ng-container>\n    </span>\n}\n<input\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    [required]=\"required()\"\n    [placeholder]=\"placeholder()\"\n    [type]=\"type()\"\n    [class]=\"inputClass()\"\n    [style]=\"inputStyle()\"\n    [attr.aria-invalid]=\"invalidInput() ? 'true' : null\"\n    [monaAttributeBinder]=\"inputAttributes()\"\n    [ngModel]=\"value()\"\n    (ngModelChange)=\"onValueChange($event)\"\n    (blur)=\"onInputBlur($event)\"\n    (focus)=\"inputFocus.emit($event)\"\n    #input />\n\n@let textBoxValue = value();\n@if (clearButton() && textBoxValue && textBoxValue.length !== 0) {\n    <button monaButton look=\"link\" size=\"small\" class=\"me-2 p-0\" aria-label=\"Clear\" (click)=\"onClearClick()\">\n        <svg lucideX class=\"size-4 opacity-50 hover:opacity-90\"></svg>\n    </button>\n}\n\n@for (suffixTemplate of suffixTemplateList(); track $index) {\n    <span class=\"flex h-full flex-wrap items-center\">\n        <ng-container *ngTemplateOutlet=\"suffixTemplate\"></ng-container>\n    </span>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "type", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "directive", type: AttributeBinderDirective, selector: "[monaAttributeBinder]", inputs: ["monaAttributeBinder"] }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: TextBoxComponent, isStandalone: true, selector: "mona-text-box", inputs: { clearButton: { classPropertyName: "clearButton", publicName: "clearButton", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, inputAttributes: { classPropertyName: "inputAttributes", publicName: "inputAttributes", isSignal: true, isRequired: false, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null }, inputStyle: { classPropertyName: "inputStyle", publicName: "inputStyle", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", 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 }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { inputBlur: "inputBlur", inputFocus: "inputFocus", touch: "touch", value: "valueChange" }, host: { properties: { "attr.data-disabled": "disabled() || null", "attr.data-readonly": "readonly() || null", "attr.data-required": "required() || null", "attr.data-invalid": "invalidInput() || null", "class": "classes()" } }, queries: [{ propertyName: "prefixTemplateList", predicate: TextBoxPrefixTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "suffixTemplateList", predicate: TextBoxSuffixTemplateDirective, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "@for (prefixTemplate of prefixTemplateList(); track $index) {\n    <span class=\"flex h-full flex-wrap items-center\">\n        <ng-container *ngTemplateOutlet=\"prefixTemplate\"></ng-container>\n    </span>\n}\n<input\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    [required]=\"required()\"\n    [placeholder]=\"placeholder()\"\n    [type]=\"type()\"\n    [class]=\"inputClass()\"\n    [style]=\"inputStyle()\"\n    [attr.aria-invalid]=\"invalidInput() ? 'true' : null\"\n    [monaAttributeBinder]=\"inputAttributes()\"\n    [ngModel]=\"value()\"\n    (ngModelChange)=\"onValueChange($event)\"\n    (blur)=\"onInputBlur($event)\"\n    (focus)=\"inputFocus.emit($event)\"\n    #input />\n\n@let textBoxValue = value();\n@if (clearButton() && textBoxValue && textBoxValue.length !== 0) {\n    <button monaButton look=\"link\" size=\"small\" class=\"me-2 p-0\" [attr.aria-label]=\"messages().clear\" (click)=\"onClearClick()\">\n        <svg lucideX class=\"size-4 opacity-50 hover:opacity-90\"></svg>\n    </button>\n}\n\n@for (suffixTemplate of suffixTemplateList(); track $index) {\n    <span class=\"flex h-full flex-wrap items-center\">\n        <ng-container *ngTemplateOutlet=\"suffixTemplate\"></ng-container>\n    </span>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "type", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "directive", type: AttributeBinderDirective, selector: "[monaAttributeBinder]", inputs: ["monaAttributeBinder"] }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TextBoxComponent, decorators: [{
             type: Component,
@@ -292,8 +300,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         "[attr.data-required]": "required() || null",
                         "[attr.data-invalid]": "invalidInput() || null",
                         "[class]": "classes()"
-                    }, template: "@for (prefixTemplate of prefixTemplateList(); track $index) {\n    <span class=\"flex h-full flex-wrap items-center\">\n        <ng-container *ngTemplateOutlet=\"prefixTemplate\"></ng-container>\n    </span>\n}\n<input\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    [required]=\"required()\"\n    [placeholder]=\"placeholder()\"\n    [type]=\"type()\"\n    [class]=\"inputClass()\"\n    [style]=\"inputStyle()\"\n    [attr.aria-invalid]=\"invalidInput() ? 'true' : null\"\n    [monaAttributeBinder]=\"inputAttributes()\"\n    [ngModel]=\"value()\"\n    (ngModelChange)=\"onValueChange($event)\"\n    (blur)=\"onInputBlur($event)\"\n    (focus)=\"inputFocus.emit($event)\"\n    #input />\n\n@let textBoxValue = value();\n@if (clearButton() && textBoxValue && textBoxValue.length !== 0) {\n    <button monaButton look=\"link\" size=\"small\" class=\"me-2 p-0\" aria-label=\"Clear\" (click)=\"onClearClick()\">\n        <svg lucideX class=\"size-4 opacity-50 hover:opacity-90\"></svg>\n    </button>\n}\n\n@for (suffixTemplate of suffixTemplateList(); track $index) {\n    <span class=\"flex h-full flex-wrap items-center\">\n        <ng-container *ngTemplateOutlet=\"suffixTemplate\"></ng-container>\n    </span>\n}\n" }]
-        }], propDecorators: { inputRef: [{ type: i0.ViewChild, args: ["input", { isSignal: true }] }], prefixTemplateList: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TextBoxPrefixTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], suffixTemplateList: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TextBoxSuffixTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], clearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearButton", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], inputAttributes: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputAttributes", required: false }] }], inputBlur: [{ type: i0.Output, args: ["inputBlur"] }], inputFocus: [{ type: i0.Output, args: ["inputFocus"] }], inputClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputClass", required: false }] }], inputStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputStyle", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", 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 }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
+                    }, template: "@for (prefixTemplate of prefixTemplateList(); track $index) {\n    <span class=\"flex h-full flex-wrap items-center\">\n        <ng-container *ngTemplateOutlet=\"prefixTemplate\"></ng-container>\n    </span>\n}\n<input\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    [required]=\"required()\"\n    [placeholder]=\"placeholder()\"\n    [type]=\"type()\"\n    [class]=\"inputClass()\"\n    [style]=\"inputStyle()\"\n    [attr.aria-invalid]=\"invalidInput() ? 'true' : null\"\n    [monaAttributeBinder]=\"inputAttributes()\"\n    [ngModel]=\"value()\"\n    (ngModelChange)=\"onValueChange($event)\"\n    (blur)=\"onInputBlur($event)\"\n    (focus)=\"inputFocus.emit($event)\"\n    #input />\n\n@let textBoxValue = value();\n@if (clearButton() && textBoxValue && textBoxValue.length !== 0) {\n    <button monaButton look=\"link\" size=\"small\" class=\"me-2 p-0\" [attr.aria-label]=\"messages().clear\" (click)=\"onClearClick()\">\n        <svg lucideX class=\"size-4 opacity-50 hover:opacity-90\"></svg>\n    </button>\n}\n\n@for (suffixTemplate of suffixTemplateList(); track $index) {\n    <span class=\"flex h-full flex-wrap items-center\">\n        <ng-container *ngTemplateOutlet=\"suffixTemplate\"></ng-container>\n    </span>\n}\n" }]
+        }], propDecorators: { inputRef: [{ type: i0.ViewChild, args: ["input", { isSignal: true }] }], prefixTemplateList: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TextBoxPrefixTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], suffixTemplateList: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TextBoxSuffixTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], clearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearButton", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], inputAttributes: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputAttributes", required: false }] }], inputBlur: [{ type: i0.Output, args: ["inputBlur"] }], inputClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputClass", required: false }] }], inputFocus: [{ type: i0.Output, args: ["inputFocus"] }], inputStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputStyle", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", 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 }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
 
 class TextBoxDirective {
     constructor() {
@@ -360,5 +368,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { TextBoxComponent, TextBoxDirective, TextBoxPrefixTemplateDirective, TextBoxSuffixTemplateDirective };
+export { TEXT_BOX_DEFAULT_MESSAGES, TextBoxComponent, TextBoxDirective, TextBoxPrefixTemplateDirective, TextBoxSuffixTemplateDirective };
 //# sourceMappingURL=nanahoshi-mona-ui-text-box.mjs.map