@nanahoshi/mona-ui 0.23.2 → 0.24.0

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

@@ -1,19 +1,79 @@
-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, effect, untracked, afterNextRender, Component } from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { Directive, inject, DestroyRef, ElementRef, computed, signal, contentChildren, TemplateRef, viewChild, input, output, effect, untracked, afterNextRender, model, Component } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { LucideChevronUp, LucideChevronDown } from '@lucide/angular';
 import { ButtonDirective } from '@nanahoshi/mona-ui/button';
+import { MonaI18nService, formatNumber, getNumberSymbols, validateLocalizedDecimalEdit, validateLocalizedDecimal, validateLocalizedNumberEdit, validateLocalizedNumber } from '@nanahoshi/mona-ui/i18n';
+import { TextBoxDirective } from '@nanahoshi/mona-ui/text-box';
+import { FocusMonitor } from '@angular/cdk/a11y';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 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, getNumberSymbols, validateLocalizedNumberEdit } from '@nanahoshi/mona-ui/i18n';
-import { TextBoxDirective } from '@nanahoshi/mona-ui/text-box';
 import { cva } from 'class-variance-authority';
 
+/**
+ * Exact arithmetic on canonical decimal strings (see `parseLocalizedDecimal`), using a `bigint` scaled by a power
+ * of ten. Only what the decimal text box needs: adding a step and comparing against bounds.
+ */
+const DECIMAL_REGEX = /^(-)?(\d+)(?:\.(\d+))?$/;
+/** Writes a number in plain decimal notation, never with an exponent. */
+const PLAIN_NUMBER_FORMAT = new Intl.NumberFormat("en-US", { maximumFractionDigits: 100, useGrouping: false });
+function toScaled(value) {
+    const match = DECIMAL_REGEX.exec(value);
+    if (!match) {
+        throw new Error(`"${value}" is not a decimal string.`);
+    }
+    const fraction = match[3] ?? "";
+    const units = BigInt(match[2] + fraction);
+    return { scale: fraction.length, units: match[1] ? -units : units };
+}
+function toCommonScale(a, b) {
+    const scale = Math.max(a.scale, b.scale);
+    return [a.units * 10n ** BigInt(scale - a.scale), b.units * 10n ** BigInt(scale - b.scale), scale];
+}
+function fromScaled(units, scale) {
+    const negative = units < 0n;
+    const digits = (negative ? -units : units).toString().padStart(scale + 1, "0");
+    const integer = digits.slice(0, digits.length - scale);
+    const fraction = digits.slice(digits.length - scale).replace(/0+$/, "");
+    const text = fraction ? `${integer}.${fraction}` : integer;
+    return negative ? `-${text}` : text;
+}
+/**
+ * Canonical decimal string for a decimal string or a finite number, or `null` for anything else. Leading zeros,
+ * trailing fraction zeros and the sign of zero are dropped, so equal values have equal strings.
+ */
+function toDecimalString(value) {
+    if (value == null) {
+        return null;
+    }
+    if (typeof value === "number") {
+        return Number.isFinite(value) ? toDecimalString(PLAIN_NUMBER_FORMAT.format(value)) : null;
+    }
+    const text = value.trim();
+    if (!DECIMAL_REGEX.test(text)) {
+        return null;
+    }
+    const { scale, units } = toScaled(text);
+    return fromScaled(units, scale);
+}
+function addDecimals(a, b) {
+    const [x, y, scale] = toCommonScale(toScaled(a), toScaled(b));
+    return fromScaled(x + y, scale);
+}
+function subtractDecimals(a, b) {
+    const [x, y, scale] = toCommonScale(toScaled(a), toScaled(b));
+    return fromScaled(x - y, scale);
+}
+/** Negative when `a < b`, zero when equal, positive when `a > b`. */
+function compareDecimals(a, b) {
+    const [x, y] = toCommonScale(toScaled(a), toScaled(b));
+    return x === y ? 0 : x < y ? -1 : 1;
+}
+
 class NumericTextBoxPrefixTemplateDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NumericTextBoxPrefixTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: NumericTextBoxPrefixTemplateDirective, isStandalone: true, selector: "ng-template[monaNumericTextBoxPrefixTemplate]", ngImport: i0 }); }
@@ -26,6 +86,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }] });
 
+// Generated from i18n/catalogs/en-US.messages.json by scripts/generate-locale-catalogs.ts. Do not edit.
+// Edit the JSON file and run `npm run generate:locale-catalogs`.
 const NUMERIC_TEXT_BOX_DEFAULT_MESSAGES = {
     decrease: "Decrease value",
     increase: "Increase value"
@@ -135,7 +197,11 @@ const numericTextboxButtonThemeVariants = cva(`
     }
 });
 
-class NumericTextBoxComponent {
+/**
+ * Typing, pasting, spinning, formatting and ARIA for a numeric input, shared by the number and decimal text boxes.
+ * Subclasses declare the value-typed inputs and say how to parse, compare and step their value type.
+ */
+class NumericTextBoxBaseComponent {
     #destroyRef;
     #focusMonitor;
     #hostElementRef;
@@ -217,11 +283,6 @@ class NumericTextBoxComponent {
          */
         this.disabled = input(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
-        /**
-         * @description Formats the value to be displayed in the input when the input is not focused.
-         */
-        this.formatter = input(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "formatter" }] : /* istanbul ignore next */ []));
         /**
          * @description Emits when the inner input element is blurred.
          */
@@ -235,22 +296,12 @@ class NumericTextBoxComponent {
          */
         this.inputFocusOut = output();
         /**
-         * @description Marks the numeric text box as invalid. When bound to a signal form field via `[formField]`,
+         * @description Marks the 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.
-         */
-        this.maxValue = input(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "maxValue" }] : /* istanbul ignore next */ []));
-        /**
-         * @description Minimum value that can be entered.
-         */
-        this.minValue = input(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "minValue" }] : /* istanbul ignore next */ []));
         /**
          * @description Sets whether the input can be empty.
          */
@@ -281,23 +332,18 @@ class NumericTextBoxComponent {
          */
         this.spinners = input(true, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "spinners" }] : /* istanbul ignore next */ []));
-        /**
-         * @description Step value to increment or decrement the value.
-         */
-        this.step = input(1, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
         /**
          * @description Tab index of the input.
          */
         this.tabindex = input(0, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "tabindex" }] : /* istanbul ignore next */ []));
         /**
-         * @description Emitted when the numeric text box is interacted with on blur, value change, or spinner update.
+         * @description Emitted when the text box is interacted with on blur, value change, or spinner update.
          * The `FormField` directive listens to this to mark the field as touched.
          */
         this.touch = output();
         /**
-         * @description Sets the touched state of the numeric text box. When bound to a signal form field via `[formField]`,
+         * @description Sets the touched state of the text box. When bound to a signal form field via `[formField]`,
          * this is written by the `FormField` directive.
          * @default false
          */
@@ -308,12 +354,6 @@ class NumericTextBoxComponent {
          * @default ""
          */
         this.userClass = input("", { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: "class" });
-        /**
-         * @description Two-way bindable current value of the numeric text box.
-         * @default null
-         */
-        this.value = model(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
         effect(() => {
             this.#i18n.localeId();
             untracked(() => {
@@ -342,50 +382,8 @@ class NumericTextBoxComponent {
         });
         this.#destroyRef.onDestroy(() => this.#focusMonitor.stopMonitoring(this.#hostElementRef.nativeElement));
     }
-    static calculate(value, step, type) {
-        const precision = Math.max(NumericTextBoxComponent.getPrecision(value), NumericTextBoxComponent.getPrecision(step));
-        const factor = Math.pow(10, precision);
-        const signFactor = type === "+" ? 1 : -1;
-        const newValue = (value * factor + signFactor * step * factor) / factor;
-        return precision > 0 ? parseFloat(newValue.toFixed(precision)) : newValue;
-    }
-    static getPrecision(value) {
-        const valueString = value.toString();
-        if (valueString.includes(".")) {
-            const parts = valueString.split(".");
-            return parts[1].length;
-        }
-        return 0;
-    }
-    static isNumeric(value) {
-        if (value === "" || value === "-") {
-            return true;
-        }
-        return ((typeof value === "number" || (typeof value === "string" && value.trim() !== "")) && !isNaN(value));
-    }
     decrease() {
-        const value = this.value();
-        if (value == null) {
-            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(), "-");
-            const min = this.minValue();
-            if (min != null && result < min) {
-                result = min;
-            }
-            this.commitNumericValue(result);
-        }
-        this.focus();
+        this.spinValue("-");
     }
     focus() {
         this.#focusMonitor.focusVia(this.valueTextBoxRef(), "keyboard");
@@ -394,28 +392,7 @@ class NumericTextBoxComponent {
         });
     }
     increase() {
-        const value = this.value();
-        if (value == null) {
-            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(), "+");
-            const max = this.maxValue();
-            if (max != null && result > max) {
-                result = max;
-            }
-            this.commitNumericValue(result);
-        }
-        this.focus();
+        this.spinValue("+");
     }
     onBlur(event) {
         this.#pendingPaste = false;
@@ -434,11 +411,32 @@ class NumericTextBoxComponent {
         this.rawInputValue.set(text);
         this.valueChange$.next(text);
     }
-    commitNumericValue(value) {
+    onPaste(event) {
+        const pastedText = event.clipboardData?.getData("text/plain");
+        if (pastedText == null) {
+            this.#pendingPaste = false;
+            return;
+        }
+        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 = this.readLocaleText(proposedValue, this.#i18n.localeId(), this.decimals());
+        if (!validation.valid || validation.value === null) {
+            event.preventDefault();
+            this.#pendingPaste = false;
+            return;
+        }
+        this.#pendingPaste = true;
+    }
+    commitValue(value) {
         this.value.set(value);
-        this.rawInputValue.set(this.focused() && !this.readonly()
-            ? this.formatEditValue(value)
-            : this.formatValueForDisplay(value));
+        this.rawInputValue.set(this.focused() && !this.readonly() ? this.formatEditValue(value) : this.formatValueForDisplay(value));
         this.touch.emit();
     }
     correctValue() {
@@ -453,20 +451,20 @@ class NumericTextBoxComponent {
                 return false;
             }
             else if (min != null) {
-                this.commitNumericValue(min);
+                this.commitValue(min);
                 return true;
             }
             else {
-                this.commitNumericValue(0);
+                this.commitValue(this.zeroValue);
                 return true;
             }
         }
-        if (min != null && value < min) {
-            this.commitNumericValue(min);
+        if (min != null && this.compareValues(value, min) < 0) {
+            this.commitValue(min);
             return true;
         }
-        if (max != null && value > max) {
-            this.commitNumericValue(max);
+        if (max != null && this.compareValues(value, max) > 0) {
+            this.commitValue(max);
             return true;
         }
         return false;
@@ -476,7 +474,7 @@ class NumericTextBoxComponent {
             return "";
         }
         return formatNumber(value, this.#i18n.localeId(), {
-            maximumFractionDigits: 20,
+            maximumFractionDigits: this.editFractionDigits,
             useGrouping: false
         });
     }
@@ -495,32 +493,6 @@ class NumericTextBoxComponent {
             useGrouping: false
         });
     }
-    onPaste(event) {
-        const pastedText = event.clipboardData?.getData("text/plain");
-        if (pastedText == null) {
-            this.#pendingPaste = false;
-            return;
-        }
-        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;
-    }
     /**
      * The numpad decimal key types "." or "," depending on the keyboard layout, not the locale. Insert the
      * locale's decimal separator instead, so a de-DE layout used with an en-US locale still types a decimal.
@@ -537,7 +509,7 @@ class NumericTextBoxComponent {
         const start = selectionStart ?? value.length;
         const end = selectionEnd ?? value.length;
         const proposedValue = value.slice(0, start) + decimal + value.slice(end);
-        if (!validateLocalizedNumberEdit(proposedValue, localeId, { decimals: this.decimals() }).valid) {
+        if (!this.readEditText(proposedValue, localeId, this.decimals()).valid) {
             return;
         }
         inputElement.setRangeText(decimal, start, end, "end");
@@ -549,10 +521,7 @@ class NumericTextBoxComponent {
         const isPaste = this.#pendingPaste;
         this.#pendingPaste = false;
         if (isPaste) {
-            const validation = validateLocalizedNumber(raw, this.#i18n.localeId(), {
-                mode: "locale",
-                decimals: this.decimals()
-            });
+            const validation = this.readLocaleText(raw, this.#i18n.localeId(), this.decimals());
             return validation.valid && validation.value !== null ? validation.value : this.value();
         }
         if (raw === "") {
@@ -561,16 +530,11 @@ class NumericTextBoxComponent {
         if (raw.trim() !== raw) {
             return this.value();
         }
-        const edit = validateLocalizedNumberEdit(raw, this.#i18n.localeId(), {
-            decimals: this.decimals()
-        });
+        const edit = this.readEditText(raw, this.#i18n.localeId(), 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()
-        });
+        const localeValidation = this.readLocaleText(raw, this.#i18n.localeId(), this.decimals());
         if (localeValidation.valid && localeValidation.value !== null) {
             return localeValidation.value;
         }
@@ -583,8 +547,7 @@ class NumericTextBoxComponent {
             if (!isPaste) {
                 this.#pendingPaste = false;
             }
-            const insertedText = event.data ??
-                event.dataTransfer?.getData("text/plain");
+            const insertedText = event.data ?? event.dataTransfer?.getData("text/plain");
             if (insertedText == null) {
                 return;
             }
@@ -596,10 +559,7 @@ class NumericTextBoxComponent {
             const localeId = this.#i18n.localeId();
             const decimals = this.decimals();
             if (isPaste) {
-                const validation = validateLocalizedNumber(proposedValue, localeId, {
-                    mode: "locale",
-                    decimals
-                });
+                const validation = this.readLocaleText(proposedValue, localeId, decimals);
                 if (!validation.valid || validation.value === null) {
                     event.preventDefault();
                     this.#pendingPaste = false;
@@ -610,10 +570,7 @@ class NumericTextBoxComponent {
                 return;
             }
             this.#pendingPaste = false;
-            const editValidation = validateLocalizedNumberEdit(proposedValue, localeId, {
-                decimals
-            });
-            if (!editValidation.valid) {
+            if (!this.readEditText(proposedValue, localeId, decimals).valid) {
                 event.preventDefault();
             }
         });
@@ -674,21 +631,196 @@ class NumericTextBoxComponent {
             }
         });
     }
-    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 }, 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]" }] }); }
+    spinValue(direction) {
+        const value = this.value();
+        const min = this.minValue();
+        const max = this.maxValue();
+        if (value == null) {
+            let initial = this.zeroValue;
+            if (min != null && this.compareValues(initial, min) < 0) {
+                initial = min;
+            }
+            if (max != null && this.compareValues(initial, max) > 0) {
+                initial = max;
+            }
+            this.commitValue(initial);
+        }
+        else {
+            let result = this.stepValue(value, direction);
+            if (direction === "-" && min != null && this.compareValues(result, min) < 0) {
+                result = min;
+            }
+            if (direction === "+" && max != null && this.compareValues(result, max) > 0) {
+                result = max;
+            }
+            this.commitValue(result);
+        }
+        this.focus();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NumericTextBoxBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.0.6", type: NumericTextBoxBaseComponent, isStandalone: true, 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 }, invalid: { classPropertyName: "invalid", publicName: "invalid", 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 }, 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 } }, outputs: { inputBlur: "inputBlur", inputFocus: "inputFocus", inputFocusOut: "inputFocusOut", touch: "touch" }, 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NumericTextBoxComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "mona-numeric-text-box", imports: [NgTemplateOutlet, TextBoxDirective, FormsModule, ButtonDirective, LucideChevronUp, LucideChevronDown], host: {
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NumericTextBoxBaseComponent, decorators: [{
+            type: Directive,
+            args: [{
+                    host: {
                         "[class]": "classes()",
                         "[attr.data-disabled]": "disabled() || null",
                         "[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    [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"] }], 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"] }] } });
+                        }, 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 }] }], 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 }] }], 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 }] }], 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 }] }] } });
+
+function warnInvalidDecimal(name, value) {
+    if (typeof ngDevMode !== "undefined" && ngDevMode) {
+        console.warn(`mona-decimal-text-box: ${name} ${JSON.stringify(value)} is not a decimal string; it is ignored.`);
+    }
+}
+function decimalInput(name) {
+    return value => {
+        const decimal = toDecimalString(value);
+        if (decimal === null && value != null) {
+            warnInvalidDecimal(name, value);
+        }
+        return decimal;
+    };
+}
+/**
+ * A numeric input whose value is a decimal string, for amounts a JavaScript `number` cannot hold exactly (money,
+ * quantities with many digits, identifiers). Typing, paste, spin buttons and bounds use exact decimal arithmetic,
+ * so there is no precision limit. The value is canonical: `"-1234.5"`, with `.` as the separator and no grouping,
+ * exponent, leading zeros or trailing fraction zeros.
+ */
+class DecimalTextBoxComponent extends NumericTextBoxBaseComponent {
+    constructor() {
+        super();
+        // Intl.NumberFormat's limit: a decimal string can carry more digits than a number.
+        this.editFractionDigits = 100;
+        this.zeroValue = "0";
+        /**
+         * @description Formats the value to be displayed in the input when the input is not focused.
+         */
+        this.formatter = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "formatter" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Maximum value that can be entered, as a decimal string or a number.
+         */
+        this.maxValue = input(null, { ...(ngDevMode ? { debugName: "maxValue" } : /* istanbul ignore next */ {}), transform: decimalInput("maxValue") });
+        /**
+         * @description Minimum value that can be entered, as a decimal string or a number.
+         */
+        this.minValue = input(null, { ...(ngDevMode ? { debugName: "minValue" } : /* istanbul ignore next */ {}), transform: decimalInput("minValue") });
+        /**
+         * @description Step value to increment or decrement the value, as a decimal string or a number.
+         * @default "1"
+         */
+        this.step = input("1", { ...(ngDevMode ? { debugName: "step" } : /* istanbul ignore next */ {}), transform: value => decimalInput("step")(value) ?? "1" });
+        /**
+         * @description Two-way bindable current value, as a canonical decimal string such as `"-1234.5"`.
+         * @default null
+         */
+        this.value = model(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            const value = this.value();
+            if (value != null && toDecimalString(value) === null) {
+                warnInvalidDecimal("value", value);
+            }
+        });
+    }
+    compareValues(a, b) {
+        return compareDecimals(toDecimalString(a) ?? "0", toDecimalString(b) ?? "0");
+    }
+    readEditText(text, localeId, decimals) {
+        return validateLocalizedDecimalEdit(text, localeId, { decimals });
+    }
+    readLocaleText(text, localeId, decimals) {
+        return validateLocalizedDecimal(text, localeId, { mode: "locale", decimals });
+    }
+    stepValue(value, direction) {
+        const current = toDecimalString(value) ?? "0";
+        return direction === "+" ? addDecimals(current, this.step()) : subtractDecimals(current, this.step());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DecimalTextBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: DecimalTextBoxComponent, isStandalone: true, selector: "mona-decimal-text-box", inputs: { 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 }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, usesInheritance: 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: DecimalTextBoxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-decimal-text-box", imports: [NgTemplateOutlet, TextBoxDirective, FormsModule, ButtonDirective, LucideChevronUp, LucideChevronDown], 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: { formatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatter", required: false }] }], maxValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxValue", required: false }] }], minValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "minValue", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
+
+class NumericTextBoxComponent extends NumericTextBoxBaseComponent {
+    constructor() {
+        super(...arguments);
+        this.editFractionDigits = 20;
+        this.zeroValue = 0;
+        /**
+         * @description Formats the value to be displayed in the input when the input is not focused.
+         */
+        this.formatter = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "formatter" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Maximum value that can be entered.
+         */
+        this.maxValue = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "maxValue" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Minimum value that can be entered.
+         */
+        this.minValue = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "minValue" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Step value to increment or decrement the value.
+         */
+        this.step = input(1, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Two-way bindable current value of the numeric text box.
+         * @default null
+         */
+        this.value = model(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    }
+    static calculate(value, step, type) {
+        const precision = Math.max(NumericTextBoxComponent.getPrecision(value), NumericTextBoxComponent.getPrecision(step));
+        const factor = Math.pow(10, precision);
+        const signFactor = type === "+" ? 1 : -1;
+        const newValue = (value * factor + signFactor * step * factor) / factor;
+        return precision > 0 ? parseFloat(newValue.toFixed(precision)) : newValue;
+    }
+    static getPrecision(value) {
+        const valueString = value.toString();
+        if (valueString.includes(".")) {
+            const parts = valueString.split(".");
+            return parts[1].length;
+        }
+        return 0;
+    }
+    compareValues(a, b) {
+        return a - b;
+    }
+    readEditText(text, localeId, decimals) {
+        return validateLocalizedNumberEdit(text, localeId, { decimals });
+    }
+    readLocaleText(text, localeId, decimals) {
+        return validateLocalizedNumber(text, localeId, { mode: "locale", decimals });
+    }
+    stepValue(value, direction) {
+        const result = NumericTextBoxComponent.calculate(value, this.step(), direction);
+        // Past the safe range a number can no longer hold every step exactly.
+        return Math.min(Math.max(result, Number.MIN_SAFE_INTEGER), Number.MAX_SAFE_INTEGER);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NumericTextBoxComponent, deps: null, 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: { 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 }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, usesInheritance: 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,
+            args: [{ selector: "mona-numeric-text-box", imports: [NgTemplateOutlet, TextBoxDirective, FormsModule, ButtonDirective, LucideChevronUp, LucideChevronDown], 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" }]
+        }], propDecorators: { formatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatter", required: false }] }], maxValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxValue", required: false }] }], minValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "minValue", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", 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
@@ -698,5 +830,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { NUMERIC_TEXT_BOX_DEFAULT_MESSAGES, NumericTextBoxComponent, NumericTextBoxPrefixTemplateDirective };
+export { DecimalTextBoxComponent, NUMERIC_TEXT_BOX_DEFAULT_MESSAGES, NumericTextBoxComponent, NumericTextBoxPrefixTemplateDirective };
 //# sourceMappingURL=nanahoshi-mona-ui-numeric-text-box.mjs.map