@nanahoshi/mona-ui 0.18.5 → 0.19.0

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

@@ -1,7 +1,7 @@
 import { FocusMonitor } from '@angular/cdk/a11y';
 import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Directive, inject, DestroyRef, ElementRef, computed, signal, contentChildren, TemplateRef, viewChild, input, output, model, afterNextRender, Component } from '@angular/core';
+import { Directive, inject, DestroyRef, ElementRef, computed, signal, contentChildren, TemplateRef, viewChild, input, output, model, effect, untracked, afterNextRender, Component } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
@@ -10,6 +10,7 @@ import { ButtonDirective } from '@nanahoshi/mona-ui/button';
 import { themeControlSurfaceClasses, rxTimeout } from '@nanahoshi/mona-ui/internal';
 import { Subject, filter, switchMap, of, tap, delay, concatMap, timer, takeUntil, distinctUntilChanged, map } from 'rxjs';
 import { twMerge } from 'tailwind-merge';
+import { MonaI18nService, formatNumber, validateLocalizedNumber, validateLocalizedNumberEdit } from '@nanahoshi/mona-ui/i18n';
 import { TextBoxDirective } from '@nanahoshi/mona-ui/text-box';
 import { cva } from 'class-variance-authority';
 
@@ -25,6 +26,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }] });
 
+const NUMERIC_TEXT_BOX_DEFAULT_MESSAGES = {
+    decrease: "Decrease value",
+    increase: "Increase value"
+};
+
 const numericTextboxThemeVariants = cva(`
         flex w-full min-w-0 items-center
         overflow-hidden p-0
@@ -75,43 +81,33 @@ const numericTextboxInputThemeVariants = cva(`
         focus-visible:border-transparent focus-visible:ring-0
     `, {
     variants: {
-        leftRounded: {
-            full: `
-                    rounded-tl-full rounded-bl-full
-                `,
-            large: `
-                    rounded-tl-lg rounded-bl-lg
-                `,
-            medium: `
-                    rounded-tl-md rounded-bl-md
-                `,
-            none: `
-                    rounded-tl-none rounded-bl-none
-                `,
-            small: `
-                    rounded-tl-sm rounded-bl-sm
-                `
+        startRounded: {
+            full: "rounded-s-full",
+            large: "rounded-s-lg",
+            medium: "rounded-s-md",
+            none: "rounded-s-none",
+            small: "rounded-s-sm"
         },
-        rightRounded: {
+        endRounded: {
             full: `
-                    rounded-tr-full rounded-br-full
-                    data-[spinners='true']:rounded-tr-none data-[spinners='true']:rounded-br-none
+                    rounded-e-full
+                    data-[spinners='true']:rounded-e-none
                 `,
             large: `
-                    rounded-tr-lg rounded-br-lg
-                    data-[spinners='true']:rounded-tr-none data-[spinners='true']:rounded-br-none
+                    rounded-e-lg
+                    data-[spinners='true']:rounded-e-none
                 `,
             medium: `
-                    rounded-tr-md rounded-br-md
-                    data-[spinners='true']:rounded-tr-none data-[spinners='true']:rounded-br-none
+                    rounded-e-md
+                    data-[spinners='true']:rounded-e-none
                 `,
             none: `
-                    rounded-tr-none rounded-br-none
-                    data-[spinners='true']:rounded-tr-none data-[spinners='true']:rounded-br-none
+                    rounded-e-none
+                    data-[spinners='true']:rounded-e-none
                 `,
             small: `
-                    rounded-tr-sm rounded-br-sm
-                    data-[spinners='true']:rounded-tr-none data-[spinners='true']:rounded-br-none
+                    rounded-e-sm
+                    data-[spinners='true']:rounded-e-none
                 `
         }
     }
@@ -123,13 +119,11 @@ const numericTextboxButtonThemeVariants = cva(`
 
         [&>button]:flex [&>button]:flex-1 [&>button]:items-center
         [&>button]:rounded-none [&>button]:p-0
-        [&>button]:first:rounded-tl-none
-        [&>button]:first:rounded-bl-none
-        [&>button]:first:rounded-br-none
+        [&>button]:first:rounded-s-none
+        [&>button]:first:rounded-b-none
         [&>button]:first:h-1/2
-        [&>button]:last:rounded-tl-none
-        [&>button]:last:rounded-bl-none
-        [&>button]:last:rounded-tr-none
+        [&>button]:last:rounded-s-none
+        [&>button]:last:rounded-t-none
         [&>button]:last:h-1/2
     `, {
     variants: {
@@ -145,10 +139,14 @@ class NumericTextBoxComponent {
     #destroyRef;
     #focusMonitor;
     #hostElementRef;
+    #i18n;
+    #pendingPaste;
     constructor() {
         this.#destroyRef = inject(DestroyRef);
         this.#focusMonitor = inject(FocusMonitor);
         this.#hostElementRef = inject((ElementRef));
+        this.#i18n = inject(MonaI18nService);
+        this.#pendingPaste = false;
         this.beforeInput$ = new Subject();
         this.classes = computed(() => {
             const rounded = this.rounded();
@@ -158,14 +156,6 @@ class NumericTextBoxComponent {
             return twMerge(classes, userClass);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-        this.inputClasses = computed(() => {
-            const hasPrefixTemplate = this.prefixTemplateList().length > 0;
-            const leftRounded = hasPrefixTemplate ? "none" : this.rounded();
-            const rightRounded = this.spinners() ? "none" : this.rounded();
-            const inputVariants = numericTextboxInputThemeVariants({ leftRounded, rightRounded });
-            return twMerge(inputVariants);
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "inputClasses" }] : /* istanbul ignore next */ []));
         this.focused = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
         this.formattedValue = computed(() => {
@@ -175,11 +165,22 @@ class NumericTextBoxComponent {
             return this.formatValueForDisplay(this.value());
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "formattedValue" }] : /* istanbul ignore next */ []));
+        this.inputClasses = computed(() => {
+            const hasPrefixTemplate = this.prefixTemplateList().length > 0;
+            const startRounded = hasPrefixTemplate ? "none" : this.rounded();
+            const endRounded = this.spinners() ? "none" : this.rounded();
+            const inputVariants = numericTextboxInputThemeVariants({ endRounded, startRounded });
+            return twMerge(inputVariants);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "inputClasses" }] : /* istanbul ignore next */ []));
         this.invalidInput = computed(() => this.touched() && (this.invalid() || (this.required() && this.value() == null)), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "invalidInput" }] : /* istanbul ignore next */ []));
         this.keydown$ = new Subject();
+        this.messages = this.#i18n.componentMessages("numericTextBox", NUMERIC_TEXT_BOX_DEFAULT_MESSAGES);
+        this.prefixTemplateList = contentChildren(NumericTextBoxPrefixTemplateDirective, { ...(ngDevMode ? { debugName: "prefixTemplateList" } : /* istanbul ignore next */ {}), read: TemplateRef });
         this.rawInputValue = signal("", /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "rawInputValue" }] : /* istanbul ignore next */ []));
+        this.spin$ = new Subject();
         this.spinButtonClasses = computed(() => {
             const size = this.size();
             return numericTextboxButtonThemeVariants({ size });
@@ -190,9 +191,7 @@ class NumericTextBoxComponent {
             return size === "large" ? 20 : size === "medium" ? 16 : 14;
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "spinButtonIconSize" }] : /* istanbul ignore next */ []));
-        this.spin$ = new Subject();
         this.spinStop$ = new Subject();
-        this.prefixTemplateList = contentChildren(NumericTextBoxPrefixTemplateDirective, { ...(ngDevMode ? { debugName: "prefixTemplateList" } : /* istanbul ignore next */ {}), read: TemplateRef });
         this.valueChange$ = new Subject();
         this.valueTextBoxRef = viewChild.required("valueTextBox", /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "valueTextBoxRef" }] : /* istanbul ignore next */ []));
@@ -202,11 +201,17 @@ class NumericTextBoxComponent {
          */
         this.ariaLabel = input(null, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: "aria-label" });
         /**
-         * @description Number of decimals to show.
+         * @description Number of fractional decimal places to display and accept. Values are truncated to an integer
+         * and clamped to the range 0–20. Non-finite and negative values normalize to 0.
          * @default 0
          */
-        this.decimals = input(0, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "decimals" }] : /* istanbul ignore next */ []));
+        this.decimals = input(0, { ...(ngDevMode ? { debugName: "decimals" } : /* istanbul ignore next */ {}), transform: (value) => {
+                const num = Math.trunc(value);
+                if (!Number.isFinite(num) || num < 0) {
+                    return 0;
+                }
+                return Math.min(20, num);
+            } });
         /**
          * @description Sets whether the input is disabled.
          */
@@ -229,6 +234,13 @@ class NumericTextBoxComponent {
          * @description Emits when the inner input element loses focus.
          */
         this.inputFocusOut = output();
+        /**
+         * @description Marks the numeric text box as invalid. When bound to a signal form field via `[formField]`,
+         * this is written by the `FormField` directive.
+         * @default false
+         */
+        this.invalid = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
         /**
          * @description Maximum value that can be entered.
          */
@@ -254,13 +266,6 @@ class NumericTextBoxComponent {
          */
         this.required = input(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
-        /**
-         * @description Marks the numeric text box as invalid. When bound to a signal form field via `[formField]`,
-         * this is written by the `FormField` directive.
-         * @default false
-         */
-        this.invalid = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
         /**
          * @description Sets the border radius of the input.
          */
@@ -309,6 +314,14 @@ class NumericTextBoxComponent {
          */
         this.value = model(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            this.#i18n.localeId();
+            untracked(() => {
+                if (this.focused() && !this.readonly()) {
+                    this.rawInputValue.set(this.formatEditValue(this.value()));
+                }
+            });
+        });
         afterNextRender({
             read: () => {
                 this.setSubscriptions();
@@ -321,7 +334,7 @@ class NumericTextBoxComponent {
                     this.focused.set(isFocused);
                     if (isFocused && !this.readonly()) {
                         const currentValue = this.value();
-                        const rawValue = currentValue?.toString() ?? "";
+                        const rawValue = this.formatEditValue(currentValue);
                         this.rawInputValue.set(rawValue);
                     }
                 });
@@ -353,7 +366,16 @@ class NumericTextBoxComponent {
     decrease() {
         const value = this.value();
         if (value == null) {
-            this.applyRawValue("0");
+            const min = this.minValue();
+            const max = this.maxValue();
+            let initial = 0;
+            if (min != null && initial < min) {
+                initial = min;
+            }
+            if (max != null && initial > max) {
+                initial = max;
+            }
+            this.commitNumericValue(initial);
         }
         else {
             let result = NumericTextBoxComponent.calculate(value, this.step(), "-");
@@ -361,7 +383,7 @@ class NumericTextBoxComponent {
             if (min != null && result < min) {
                 result = min;
             }
-            this.applyRawValue(result.toString());
+            this.commitNumericValue(result);
         }
         this.focus();
     }
@@ -374,7 +396,16 @@ class NumericTextBoxComponent {
     increase() {
         const value = this.value();
         if (value == null) {
-            this.applyRawValue("0");
+            const min = this.minValue();
+            const max = this.maxValue();
+            let initial = 0;
+            if (min != null && initial < min) {
+                initial = min;
+            }
+            if (max != null && initial > max) {
+                initial = max;
+            }
+            this.commitNumericValue(initial);
         }
         else {
             let result = NumericTextBoxComponent.calculate(value, this.step(), "+");
@@ -382,11 +413,12 @@ class NumericTextBoxComponent {
             if (max != null && result > max) {
                 result = max;
             }
-            this.applyRawValue(result.toString());
+            this.commitNumericValue(result);
         }
         this.focus();
     }
     onBlur(event) {
+        this.#pendingPaste = false;
         const relatedTarget = event.relatedTarget;
         if (relatedTarget && this.#hostElementRef.nativeElement.contains(relatedTarget)) {
             return;
@@ -398,32 +430,56 @@ class NumericTextBoxComponent {
         this.rawInputValue.set(this.formatValueForDisplay(this.value()));
         this.inputBlur.emit(event);
     }
+    applyRawValue(text) {
+        this.rawInputValue.set(text);
+        this.valueChange$.next(text);
+    }
+    commitNumericValue(value) {
+        this.value.set(value);
+        this.rawInputValue.set(this.focused() && !this.readonly()
+            ? this.formatEditValue(value)
+            : this.formatValueForDisplay(value));
+        this.touch.emit();
+    }
     correctValue() {
         const value = this.value();
         const min = this.minValue();
         const max = this.maxValue();
         if (value == null) {
             if (this.nullable()) {
-                this.applyRawValue("");
+                if (this.rawInputValue() !== "") {
+                    this.rawInputValue.set("");
+                }
+                return false;
             }
             else if (min != null) {
-                this.applyRawValue(min.toString());
+                this.commitNumericValue(min);
+                return true;
             }
             else {
-                this.applyRawValue("0");
+                this.commitNumericValue(0);
+                return true;
             }
-            return true;
         }
         if (min != null && value < min) {
-            this.applyRawValue(min.toString());
+            this.commitNumericValue(min);
             return true;
         }
         if (max != null && value > max) {
-            this.applyRawValue(max.toString());
+            this.commitNumericValue(max);
             return true;
         }
         return false;
     }
+    formatEditValue(value) {
+        if (value == null) {
+            return "";
+        }
+        return formatNumber(value, this.#i18n.localeId(), {
+            maximumFractionDigits: 20,
+            useGrouping: false
+        });
+    }
     formatValueForDisplay(value) {
         if (value == null) {
             return "";
@@ -433,19 +489,80 @@ class NumericTextBoxComponent {
             return formatter(value);
         }
         const decimals = this.decimals();
-        if (decimals > 0) {
-            return value.toFixed(decimals);
+        return formatNumber(value, this.#i18n.localeId(), {
+            minimumFractionDigits: decimals,
+            maximumFractionDigits: decimals,
+            useGrouping: false
+        });
+    }
+    onPaste(event) {
+        const pastedText = event.clipboardData?.getData("text/plain");
+        if (pastedText == null) {
+            this.#pendingPaste = false;
+            return;
         }
-        return value.toString();
+        const inputElement = this.valueTextBoxRef()?.nativeElement;
+        if (!inputElement) {
+            this.#pendingPaste = false;
+            return;
+        }
+        const { value, selectionStart, selectionEnd } = inputElement;
+        const start = selectionStart ?? value.length;
+        const end = selectionEnd ?? value.length;
+        const proposedValue = value.slice(0, start) + pastedText + value.slice(end);
+        const validation = validateLocalizedNumber(proposedValue, this.#i18n.localeId(), {
+            mode: "locale",
+            decimals: this.decimals()
+        });
+        if (!validation.valid || validation.value === null) {
+            event.preventDefault();
+            this.#pendingPaste = false;
+            return;
+        }
+        this.#pendingPaste = true;
     }
-    applyRawValue(text) {
-        this.rawInputValue.set(text);
-        this.valueChange$.next(text);
+    parseValue(value) {
+        const raw = value == null ? "" : value;
+        this.rawInputValue.set(raw);
+        const isPaste = this.#pendingPaste;
+        this.#pendingPaste = false;
+        if (isPaste) {
+            const validation = validateLocalizedNumber(raw, this.#i18n.localeId(), {
+                mode: "locale",
+                decimals: this.decimals()
+            });
+            return validation.valid && validation.value !== null ? validation.value : this.value();
+        }
+        if (raw === "") {
+            return null;
+        }
+        if (raw.trim() !== raw) {
+            return this.value();
+        }
+        const edit = validateLocalizedNumberEdit(raw, this.#i18n.localeId(), {
+            decimals: this.decimals()
+        });
+        if (edit.valid) {
+            return edit.value === null ? this.value() : edit.value;
+        }
+        const localeValidation = validateLocalizedNumber(raw, this.#i18n.localeId(), {
+            mode: "locale",
+            decimals: this.decimals()
+        });
+        if (localeValidation.valid && localeValidation.value !== null) {
+            return localeValidation.value;
+        }
+        return this.value();
     }
     setBeforeInputSubscription() {
         this.beforeInput$.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe((event) => {
             const inputElement = event.target;
-            const insertedText = event.data;
+            const isPaste = event.inputType === "insertFromPaste" || (this.#pendingPaste && event.inputType !== "insertText");
+            if (!isPaste) {
+                this.#pendingPaste = false;
+            }
+            const insertedText = event.data ??
+                event.dataTransfer?.getData("text/plain");
             if (insertedText == null) {
                 return;
             }
@@ -454,27 +571,27 @@ class NumericTextBoxComponent {
                 return;
             }
             const proposedValue = value.slice(0, selectionStart) + insertedText + value.slice(selectionEnd);
-            if (proposedValue.lastIndexOf("-") > 0) {
-                event.preventDefault();
-                return;
-            }
-            if ((proposedValue.match(/\./g) || []).length > 1) {
-                event.preventDefault();
-                return;
-            }
-            if (this.decimals() === 0 && proposedValue.includes(".")) {
-                event.preventDefault();
-                return;
-            }
-            if (proposedValue.includes(".")) {
-                const decimalPart = proposedValue.split(".")[1];
-                if (decimalPart && decimalPart.length > this.decimals()) {
+            const localeId = this.#i18n.localeId();
+            const decimals = this.decimals();
+            if (isPaste) {
+                const validation = validateLocalizedNumber(proposedValue, localeId, {
+                    mode: "locale",
+                    decimals
+                });
+                if (!validation.valid || validation.value === null) {
                     event.preventDefault();
-                    return;
+                    this.#pendingPaste = false;
+                }
+                else {
+                    this.#pendingPaste = true;
                 }
+                return;
             }
-            const numericRegex = new RegExp(`^-?\\d*\\.?\\d{0,${this.decimals()}}$`);
-            if (!numericRegex.test(proposedValue)) {
+            this.#pendingPaste = false;
+            const editValidation = validateLocalizedNumberEdit(proposedValue, localeId, {
+                decimals
+            });
+            if (!editValidation.valid) {
                 event.preventDefault();
             }
         });
@@ -531,20 +648,8 @@ class NumericTextBoxComponent {
             }
         });
     }
-    parseValue(value) {
-        const normalizedValue = value == null ? "" : value;
-        this.rawInputValue.set(normalizedValue);
-        if (normalizedValue === "" || normalizedValue === "-") {
-            return null;
-        }
-        const sanitizedValue = normalizedValue.replace(/,/g, "");
-        if (!NumericTextBoxComponent.isNumeric(sanitizedValue)) {
-            return this.value();
-        }
-        return parseFloat(sanitizedValue);
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NumericTextBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: NumericTextBoxComponent, isStandalone: true, selector: "mona-numeric-text-box", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, decimals: { classPropertyName: "decimals", publicName: "decimals", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, formatter: { classPropertyName: "formatter", publicName: "formatter", isSignal: true, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: true, isRequired: false, transformFunction: null }, minValue: { classPropertyName: "minValue", publicName: "minValue", isSignal: true, isRequired: false, transformFunction: null }, nullable: { classPropertyName: "nullable", publicName: "nullable", 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 }, invalid: { classPropertyName: "invalid", publicName: "invalid", 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 }, spinners: { classPropertyName: "spinners", publicName: "spinners", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", 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", inputFocusOut: "inputFocusOut", touch: "touch", value: "valueChange" }, host: { properties: { "class": "classes()", "attr.data-disabled": "disabled() || null", "attr.data-invalid": "invalidInput() || null", "attr.data-readonly": "readonly() || null", "attr.data-required": "required() || null" } }, queries: [{ propertyName: "prefixTemplateList", predicate: NumericTextBoxPrefixTemplateDirective, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "valueTextBoxRef", first: true, predicate: ["valueTextBox"], descendants: true, isSignal: true }], ngImport: i0, template: "@for (prefixTemplate of prefixTemplateList(); track $index) {\n    <span class=\"flex h-full flex-none flex-wrap items-center overflow-hidden border-none\">\n        <ng-container *ngTemplateOutlet=\"prefixTemplate\"></ng-container>\n    </span>\n}\n<input\n    monaTextBox\n    [disabled]=\"disabled()\"\n    [required]=\"required()\"\n    [type]=\"'text'\"\n    inputmode=\"numeric\"\n    [readonly]=\"readonly()\"\n    [tabIndex]=\"tabindex()\"\n    [ngModel]=\"formattedValue()\"\n    (ngModelChange)=\"applyRawValue($event)\"\n    (keydown)=\"keydown$.next($event)\"\n    (focus)=\"inputFocus.emit($event)\"\n    (focusout)=\"inputFocusOut.emit($event)\"\n    (blur)=\"onBlur($event)\"\n    (beforeinput)=\"beforeInput$.next($event)\"\n    (wheel)=\"wheel$.next($event)\"\n    [size]=\"size()\"\n    [class]=\"inputClasses()\"\n    autocomplete=\"off\"\n    role=\"spinbutton\"\n    [attr.aria-disabled]=\"disabled()\"\n    [attr.aria-invalid]=\"invalidInput() || null\"\n    [attr.aria-readonly]=\"readonly()\"\n    [attr.aria-required]=\"required()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-valuenow]=\"value()\"\n    [attr.aria-valuemin]=\"minValue()\"\n    [attr.aria-valuemax]=\"maxValue()\"\n    [attr.aria-valuetext]=\"formattedValue()\"\n    [attr.data-spinners]=\"spinners()\"\n    #valueTextBox />\n@if (spinners()) {\n    <div [class]=\"spinButtonClasses()\">\n        <button\n            monaButton\n            [disabled]=\"disabled()\"\n            [tabindex]=\"-1\"\n            look=\"ghost\"\n            [size]=\"size()\"\n            (mousedown)=\"$event.preventDefault()\"\n            (pointerdown)=\"spin$.next('+')\"\n            (pointerup)=\"spinStop$.next()\"\n            (pointerleave)=\"spinStop$.next()\"\n            aria-label=\"Increase value\">\n            <svg lucideChevronUp [size]=\"spinButtonIconSize()\"></svg>\n        </button>\n        <button\n            monaButton\n            [disabled]=\"disabled()\"\n            [tabindex]=\"-1\"\n            look=\"ghost\"\n            [size]=\"size()\"\n            (mousedown)=\"$event.preventDefault()\"\n            (pointerdown)=\"spin$.next('-')\"\n            (pointerup)=\"spinStop$.next()\"\n            (pointerleave)=\"spinStop$.next()\"\n            aria-label=\"Decrease value\">\n            <svg lucideChevronDown [size]=\"spinButtonIconSize()\"></svg>\n        </button>\n    </div>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TextBoxDirective, selector: "input[monaTextBox]", inputs: ["invalid", "rounded", "size", "touched", "class"] }, { 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: "component", type: LucideChevronUp, selector: "svg[lucideChevronUp]" }, { kind: "component", type: LucideChevronDown, selector: "svg[lucideChevronDown]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: NumericTextBoxComponent, isStandalone: true, selector: "mona-numeric-text-box", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, decimals: { classPropertyName: "decimals", publicName: "decimals", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, formatter: { classPropertyName: "formatter", publicName: "formatter", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: true, isRequired: false, transformFunction: null }, minValue: { classPropertyName: "minValue", publicName: "minValue", isSignal: true, isRequired: false, transformFunction: null }, nullable: { classPropertyName: "nullable", publicName: "nullable", 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 }, spinners: { classPropertyName: "spinners", publicName: "spinners", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", 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", inputFocusOut: "inputFocusOut", touch: "touch", value: "valueChange" }, host: { properties: { "class": "classes()", "attr.data-disabled": "disabled() || null", "attr.data-invalid": "invalidInput() || null", "attr.data-readonly": "readonly() || null", "attr.data-required": "required() || null" } }, queries: [{ propertyName: "prefixTemplateList", predicate: NumericTextBoxPrefixTemplateDirective, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "valueTextBoxRef", first: true, predicate: ["valueTextBox"], descendants: true, isSignal: true }], ngImport: i0, template: "@for (prefixTemplate of prefixTemplateList(); track $index) {\n    <span class=\"flex h-full flex-none flex-wrap items-center overflow-hidden border-none\">\n        <ng-container *ngTemplateOutlet=\"prefixTemplate\"></ng-container>\n    </span>\n}\n<input\n    monaTextBox\n    [disabled]=\"disabled()\"\n    [required]=\"required()\"\n    [type]=\"'text'\"\n    [attr.inputmode]=\"decimals() > 0 ? 'decimal' : 'numeric'\"\n    [readonly]=\"readonly()\"\n    [tabIndex]=\"tabindex()\"\n    [ngModel]=\"formattedValue()\"\n    (ngModelChange)=\"applyRawValue($event)\"\n    (keydown)=\"keydown$.next($event)\"\n    (focus)=\"inputFocus.emit($event)\"\n    (focusout)=\"inputFocusOut.emit($event)\"\n    (blur)=\"onBlur($event)\"\n    (beforeinput)=\"beforeInput$.next($event)\"\n    (paste)=\"onPaste($event)\"\n    (wheel)=\"wheel$.next($event)\"\n    [size]=\"size()\"\n    [class]=\"inputClasses()\"\n    autocomplete=\"off\"\n    role=\"spinbutton\"\n    [attr.aria-disabled]=\"disabled()\"\n    [attr.aria-invalid]=\"invalidInput() || null\"\n    [attr.aria-readonly]=\"readonly()\"\n    [attr.aria-required]=\"required()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-valuenow]=\"value()\"\n    [attr.aria-valuemin]=\"minValue()\"\n    [attr.aria-valuemax]=\"maxValue()\"\n    [attr.aria-valuetext]=\"formattedValue()\"\n    [attr.data-spinners]=\"spinners()\"\n    #valueTextBox />\n@if (spinners()) {\n    <div [class]=\"spinButtonClasses()\">\n        <button\n            monaButton\n            [disabled]=\"disabled()\"\n            [tabindex]=\"-1\"\n            look=\"ghost\"\n            [size]=\"size()\"\n            (mousedown)=\"$event.preventDefault()\"\n            (pointerdown)=\"spin$.next('+')\"\n            (pointerup)=\"spinStop$.next()\"\n            (pointerleave)=\"spinStop$.next()\"\n            [attr.aria-label]=\"messages().increase\">\n            <svg lucideChevronUp [size]=\"spinButtonIconSize()\"></svg>\n        </button>\n        <button\n            monaButton\n            [disabled]=\"disabled()\"\n            [tabindex]=\"-1\"\n            look=\"ghost\"\n            [size]=\"size()\"\n            (mousedown)=\"$event.preventDefault()\"\n            (pointerdown)=\"spin$.next('-')\"\n            (pointerup)=\"spinStop$.next()\"\n            (pointerleave)=\"spinStop$.next()\"\n            [attr.aria-label]=\"messages().decrease\">\n            <svg lucideChevronDown [size]=\"spinButtonIconSize()\"></svg>\n        </button>\n    </div>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TextBoxDirective, selector: "input[monaTextBox]", inputs: ["invalid", "rounded", "size", "touched", "class"] }, { 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: "component", type: LucideChevronUp, selector: "svg[lucideChevronUp]" }, { kind: "component", type: LucideChevronDown, selector: "svg[lucideChevronDown]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NumericTextBoxComponent, decorators: [{
             type: Component,
@@ -554,10 +659,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         "[attr.data-invalid]": "invalidInput() || null",
                         "[attr.data-readonly]": "readonly() || null",
                         "[attr.data-required]": "required() || null"
-                    }, template: "@for (prefixTemplate of prefixTemplateList(); track $index) {\n    <span class=\"flex h-full flex-none flex-wrap items-center overflow-hidden border-none\">\n        <ng-container *ngTemplateOutlet=\"prefixTemplate\"></ng-container>\n    </span>\n}\n<input\n    monaTextBox\n    [disabled]=\"disabled()\"\n    [required]=\"required()\"\n    [type]=\"'text'\"\n    inputmode=\"numeric\"\n    [readonly]=\"readonly()\"\n    [tabIndex]=\"tabindex()\"\n    [ngModel]=\"formattedValue()\"\n    (ngModelChange)=\"applyRawValue($event)\"\n    (keydown)=\"keydown$.next($event)\"\n    (focus)=\"inputFocus.emit($event)\"\n    (focusout)=\"inputFocusOut.emit($event)\"\n    (blur)=\"onBlur($event)\"\n    (beforeinput)=\"beforeInput$.next($event)\"\n    (wheel)=\"wheel$.next($event)\"\n    [size]=\"size()\"\n    [class]=\"inputClasses()\"\n    autocomplete=\"off\"\n    role=\"spinbutton\"\n    [attr.aria-disabled]=\"disabled()\"\n    [attr.aria-invalid]=\"invalidInput() || null\"\n    [attr.aria-readonly]=\"readonly()\"\n    [attr.aria-required]=\"required()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-valuenow]=\"value()\"\n    [attr.aria-valuemin]=\"minValue()\"\n    [attr.aria-valuemax]=\"maxValue()\"\n    [attr.aria-valuetext]=\"formattedValue()\"\n    [attr.data-spinners]=\"spinners()\"\n    #valueTextBox />\n@if (spinners()) {\n    <div [class]=\"spinButtonClasses()\">\n        <button\n            monaButton\n            [disabled]=\"disabled()\"\n            [tabindex]=\"-1\"\n            look=\"ghost\"\n            [size]=\"size()\"\n            (mousedown)=\"$event.preventDefault()\"\n            (pointerdown)=\"spin$.next('+')\"\n            (pointerup)=\"spinStop$.next()\"\n            (pointerleave)=\"spinStop$.next()\"\n            aria-label=\"Increase value\">\n            <svg lucideChevronUp [size]=\"spinButtonIconSize()\"></svg>\n        </button>\n        <button\n            monaButton\n            [disabled]=\"disabled()\"\n            [tabindex]=\"-1\"\n            look=\"ghost\"\n            [size]=\"size()\"\n            (mousedown)=\"$event.preventDefault()\"\n            (pointerdown)=\"spin$.next('-')\"\n            (pointerup)=\"spinStop$.next()\"\n            (pointerleave)=\"spinStop$.next()\"\n            aria-label=\"Decrease value\">\n            <svg lucideChevronDown [size]=\"spinButtonIconSize()\"></svg>\n        </button>\n    </div>\n}\n" }]
+                    }, template: "@for (prefixTemplate of prefixTemplateList(); track $index) {\n    <span class=\"flex h-full flex-none flex-wrap items-center overflow-hidden border-none\">\n        <ng-container *ngTemplateOutlet=\"prefixTemplate\"></ng-container>\n    </span>\n}\n<input\n    monaTextBox\n    [disabled]=\"disabled()\"\n    [required]=\"required()\"\n    [type]=\"'text'\"\n    [attr.inputmode]=\"decimals() > 0 ? 'decimal' : 'numeric'\"\n    [readonly]=\"readonly()\"\n    [tabIndex]=\"tabindex()\"\n    [ngModel]=\"formattedValue()\"\n    (ngModelChange)=\"applyRawValue($event)\"\n    (keydown)=\"keydown$.next($event)\"\n    (focus)=\"inputFocus.emit($event)\"\n    (focusout)=\"inputFocusOut.emit($event)\"\n    (blur)=\"onBlur($event)\"\n    (beforeinput)=\"beforeInput$.next($event)\"\n    (paste)=\"onPaste($event)\"\n    (wheel)=\"wheel$.next($event)\"\n    [size]=\"size()\"\n    [class]=\"inputClasses()\"\n    autocomplete=\"off\"\n    role=\"spinbutton\"\n    [attr.aria-disabled]=\"disabled()\"\n    [attr.aria-invalid]=\"invalidInput() || null\"\n    [attr.aria-readonly]=\"readonly()\"\n    [attr.aria-required]=\"required()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-valuenow]=\"value()\"\n    [attr.aria-valuemin]=\"minValue()\"\n    [attr.aria-valuemax]=\"maxValue()\"\n    [attr.aria-valuetext]=\"formattedValue()\"\n    [attr.data-spinners]=\"spinners()\"\n    #valueTextBox />\n@if (spinners()) {\n    <div [class]=\"spinButtonClasses()\">\n        <button\n            monaButton\n            [disabled]=\"disabled()\"\n            [tabindex]=\"-1\"\n            look=\"ghost\"\n            [size]=\"size()\"\n            (mousedown)=\"$event.preventDefault()\"\n            (pointerdown)=\"spin$.next('+')\"\n            (pointerup)=\"spinStop$.next()\"\n            (pointerleave)=\"spinStop$.next()\"\n            [attr.aria-label]=\"messages().increase\">\n            <svg lucideChevronUp [size]=\"spinButtonIconSize()\"></svg>\n        </button>\n        <button\n            monaButton\n            [disabled]=\"disabled()\"\n            [tabindex]=\"-1\"\n            look=\"ghost\"\n            [size]=\"size()\"\n            (mousedown)=\"$event.preventDefault()\"\n            (pointerdown)=\"spin$.next('-')\"\n            (pointerup)=\"spinStop$.next()\"\n            (pointerleave)=\"spinStop$.next()\"\n            [attr.aria-label]=\"messages().decrease\">\n            <svg lucideChevronDown [size]=\"spinButtonIconSize()\"></svg>\n        </button>\n    </div>\n}\n" }]
         }], ctorParameters: () => [], propDecorators: { prefixTemplateList: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => NumericTextBoxPrefixTemplateDirective), { ...{
                             read: TemplateRef
-                        }, isSignal: true }] }], valueTextBoxRef: [{ type: i0.ViewChild, args: ["valueTextBox", { isSignal: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], decimals: [{ type: i0.Input, args: [{ isSignal: true, alias: "decimals", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], formatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatter", required: false }] }], inputBlur: [{ type: i0.Output, args: ["inputBlur"] }], inputFocus: [{ type: i0.Output, args: ["inputFocus"] }], inputFocusOut: [{ type: i0.Output, args: ["inputFocusOut"] }], maxValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxValue", required: false }] }], minValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "minValue", required: false }] }], nullable: [{ type: i0.Input, args: [{ isSignal: true, alias: "nullable", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], spinners: [{ type: i0.Input, args: [{ isSignal: true, alias: "spinners", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], tabindex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabindex", 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 }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
+                        }, isSignal: true }] }], valueTextBoxRef: [{ type: i0.ViewChild, args: ["valueTextBox", { isSignal: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], decimals: [{ type: i0.Input, args: [{ isSignal: true, alias: "decimals", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], formatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatter", required: false }] }], inputBlur: [{ type: i0.Output, args: ["inputBlur"] }], inputFocus: [{ type: i0.Output, args: ["inputFocus"] }], inputFocusOut: [{ type: i0.Output, args: ["inputFocusOut"] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], maxValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxValue", required: false }] }], minValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "minValue", required: false }] }], nullable: [{ type: i0.Input, args: [{ isSignal: true, alias: "nullable", 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 }] }], spinners: [{ type: i0.Input, args: [{ isSignal: true, alias: "spinners", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], tabindex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabindex", 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 }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
 
 /*
  * Public API Surface of @nanahoshi/mona-ui/numeric-text-box
@@ -567,5 +672,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { NumericTextBoxComponent, NumericTextBoxPrefixTemplateDirective };
+export { NUMERIC_TEXT_BOX_DEFAULT_MESSAGES, NumericTextBoxComponent, NumericTextBoxPrefixTemplateDirective };
 //# sourceMappingURL=nanahoshi-mona-ui-numeric-text-box.mjs.map