@nanahoshi/mona-ui 0.24.4 → 0.24.6

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

@@ -1,16 +1,14 @@
 import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-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 { Directive, inject, DestroyRef, ElementRef, computed, signal, contentChildren, TemplateRef, viewChild, input, booleanAttribute, output, effect, untracked, afterNextRender, model, Component } from '@angular/core';
 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 { themeControlSurfaceClasses, createElementControlId, rxTimeout } from '@nanahoshi/mona-ui/internal';
+import { Subject, filter, switchMap, of, tap, delay, concatMap, timer, takeUntil, map } from 'rxjs';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 
@@ -81,8 +79,7 @@ class NumericTextBoxPrefixTemplateDirective {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NumericTextBoxPrefixTemplateDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: "ng-template[monaNumericTextBoxPrefixTemplate]",
-                    standalone: true
+                    selector: "ng-template[monaNumericTextBoxPrefixTemplate]"
                 }]
         }] });
 
@@ -98,10 +95,9 @@ const numericTextboxThemeVariants = cva(`
         overflow-hidden p-0
         ${themeControlSurfaceClasses} text-foreground
         border border-input-border shadow-(--shadow-control)
-        outline-none
+        outline-hidden
         selection:bg-primary selection:text-primary-foreground
         transition-[color,box-shadow,border] duration-300 ease-in-out
-        placeholder:text-muted-foreground
 
         data-[disabled='true']:pointer-events-none
         data-[disabled='true']:cursor-not-allowed
@@ -139,7 +135,7 @@ const numericTextboxInputThemeVariants = cva(`
         bg-transparent
         border-0 shadow-none
         rounded-none
-        outline-none ring-0
+        outline-hidden ring-0
         focus-visible:border-transparent focus-visible:ring-0
     `, {
     variants: {
@@ -197,6 +193,8 @@ const numericTextboxButtonThemeVariants = cva(`
     }
 });
 
+/** PageUp and PageDown move by this many steps. */
+const PAGE_STEP_COUNT = 10;
 /**
  * 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.
@@ -206,12 +204,16 @@ class NumericTextBoxBaseComponent {
     #focusMonitor;
     #hostElementRef;
     #i18n;
+    /** The value this component last wrote, so a value set from outside can be told apart. */
+    #ownValue;
     #pendingPaste;
     constructor() {
         this.#destroyRef = inject(DestroyRef);
         this.#focusMonitor = inject(FocusMonitor);
         this.#hostElementRef = inject((ElementRef));
         this.#i18n = inject(MonaI18nService);
+        /** The value this component last wrote, so a value set from outside can be told apart. */
+        this.#ownValue = undefined;
         this.#pendingPaste = false;
         this.beforeInput$ = new Subject();
         this.classes = computed(() => {
@@ -234,7 +236,7 @@ class NumericTextBoxBaseComponent {
         this.inputClasses = computed(() => {
             const hasPrefixTemplate = this.prefixTemplateList().length > 0;
             const startRounded = hasPrefixTemplate ? "none" : this.rounded();
-            const endRounded = this.spinners() ? "none" : this.rounded();
+            const endRounded = this.showSpinners() ? "none" : this.rounded();
             const inputVariants = numericTextboxInputThemeVariants({ endRounded, startRounded });
             return twMerge(inputVariants);
         }, /* @ts-ignore */
@@ -246,6 +248,9 @@ class NumericTextBoxBaseComponent {
         this.prefixTemplateList = contentChildren(NumericTextBoxPrefixTemplateDirective, { ...(ngDevMode ? { debugName: "prefixTemplateList" } : /* istanbul ignore next */ {}), read: TemplateRef });
         this.rawInputValue = signal("", /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "rawInputValue" }] : /* istanbul ignore next */ []));
+        /** Spin buttons on a read-only field would look usable but do nothing, so they are hidden there. */
+        this.showSpinners = computed(() => this.spinners() && !this.readonly(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showSpinners" }] : /* istanbul ignore next */ []));
         this.spin$ = new Subject();
         this.spinButtonClasses = computed(() => {
             const size = this.size();
@@ -263,9 +268,21 @@ class NumericTextBoxBaseComponent {
         ...(ngDevMode ? [{ debugName: "valueTextBoxRef" }] : /* istanbul ignore next */ []));
         this.wheel$ = new Subject();
         /**
-         * @description ARIA label for the input.
+         * @description ID of an element that provides an extended description for the input, such as a hint or an
+         * error message.
+         * @default ""
+         */
+        this.ariaDescribedBy = input("", { ...(ngDevMode ? { debugName: "ariaDescribedBy" } : /* istanbul ignore next */ {}), alias: "aria-describedby" });
+        /**
+         * @description Accessible name for the input. Prefer a visible label, linked through {@link inputId} or
+         * {@link ariaLabelledBy}.
          */
         this.ariaLabel = input(null, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: "aria-label" });
+        /**
+         * @description ID of an external element that provides the accessible name for the input.
+         * @default ""
+         */
+        this.ariaLabelledBy = input("", { ...(ngDevMode ? { debugName: "ariaLabelledBy" } : /* istanbul ignore next */ {}), alias: "aria-labelledby" });
         /**
          * @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.
@@ -281,10 +298,10 @@ class NumericTextBoxBaseComponent {
         /**
          * @description Sets whether the input is disabled.
          */
-        this.disabled = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
-         * @description Emits when the inner input element is blurred.
+         * @description Emits when focus leaves the component, after the value has been clamped to the bounds. Moving
+         * focus between the input and elements inside the component (such as a prefix template) doesn't count.
          */
         this.inputBlur = output();
         /**
@@ -295,28 +312,38 @@ class NumericTextBoxBaseComponent {
          * @description Emits when the inner input element loses focus.
          */
         this.inputFocusOut = output();
+        /**
+         * @description ID of the inner input, so a `<label for>` or `<mona-label for>` can point at it.
+         * @default a generated ID
+         */
+        this.inputId = input(createElementControlId(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
         /**
          * @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 */ []));
+        this.invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * @description Sets whether the input can be empty. When `false`, leaving an empty field sets it to the
+         * minimum, or to zero when there is no minimum (clamped to the maximum).
+         */
+        this.nullable = input(true, { ...(ngDevMode ? { debugName: "nullable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
-         * @description Sets whether the input can be empty.
+         * @description Text shown in the input while it is empty. It isn't a label: it disappears once there is a
+         * value.
+         * @default ""
          */
-        this.nullable = input(true, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "nullable" }] : /* istanbul ignore next */ []));
+        this.placeholder = input("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
         /**
-         * @description Sets whether the input is readonly.
+         * @description Sets whether the input is readonly. The spin buttons are hidden while it is.
          */
-        this.readonly = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+        this.readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * @description Sets whether the input is required.
          */
-        this.required = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+        this.required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * @description Sets the border radius of the input.
          */
@@ -330,16 +357,15 @@ class NumericTextBoxBaseComponent {
         /**
          * @description Sets whether the spin buttons are visible.
          */
-        this.spinners = input(true, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "spinners" }] : /* istanbul ignore next */ []));
+        this.spinners = input(true, { ...(ngDevMode ? { debugName: "spinners" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * @description Tab index of the input.
          */
         this.tabindex = input(0, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "tabindex" }] : /* istanbul ignore next */ []));
         /**
-         * @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.
+         * @description Emitted when focus leaves the component, as a native input is touched on blur. Typing and
+         * spinning don't count. The `FormField` directive listens to this to mark the field as touched.
          */
         this.touch = output();
         /**
@@ -347,13 +373,25 @@ class NumericTextBoxBaseComponent {
          * this is written by the `FormField` directive.
          * @default false
          */
-        this.touched = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+        this.touched = input(false, { ...(ngDevMode ? { debugName: "touched" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * @description Additional CSS classes merged onto the host element via `tailwind-merge`.
          * @default ""
          */
         this.userClass = input("", { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: "class" });
+        effect(() => {
+            const value = this.value();
+            untracked(() => {
+                if (value === this.#ownValue) {
+                    return;
+                }
+                // Set from outside (a form patch, a binding): show it, even while the user is in the field.
+                this.#ownValue = value;
+                if (this.focused() && !this.readonly()) {
+                    this.rawInputValue.set(this.formatEditValue(value));
+                }
+            });
+        });
         effect(() => {
             this.#i18n.localeId();
             untracked(() => {
@@ -382,29 +420,40 @@ class NumericTextBoxBaseComponent {
         });
         this.#destroyRef.onDestroy(() => this.#focusMonitor.stopMonitoring(this.#hostElementRef.nativeElement));
     }
+    /** Steps the value down by `step` and moves focus to the input. */
     decrease() {
         this.spinValue("-");
+        this.focus();
     }
-    focus() {
-        this.#focusMonitor.focusVia(this.valueTextBoxRef(), "keyboard");
+    /**
+     * Moves focus to the input, with the caret at the end.
+     * @param options passed to the native `focus()` call, for example `{ preventScroll: true }`.
+     */
+    focus(options) {
+        this.#focusMonitor.focusVia(this.valueTextBoxRef(), "keyboard", options);
         rxTimeout(this.#destroyRef, () => {
             this.valueTextBoxRef().nativeElement.scrollLeft = this.valueTextBoxRef().nativeElement.scrollWidth;
         });
     }
+    /** Steps the value up by `step` and moves focus to the input. */
     increase() {
         this.spinValue("+");
+        this.focus();
     }
+    /** Runs when focus leaves an element inside the component: clamps the value and marks the field touched. */
     onBlur(event) {
+        // Removing a focused text box from the page fires focusout after it is destroyed.
+        if (this.#destroyRef.destroyed) {
+            return;
+        }
         this.#pendingPaste = false;
         const relatedTarget = event.relatedTarget;
-        if (relatedTarget && this.#hostElementRef.nativeElement.contains(relatedTarget)) {
+        if (relatedTarget instanceof Node && this.#hostElementRef.nativeElement.contains(relatedTarget)) {
             return;
         }
-        const corrected = this.correctValue();
-        if (!corrected) {
-            this.touch.emit();
-        }
+        this.correctValue();
         this.rawInputValue.set(this.formatValueForDisplay(this.value()));
+        this.touch.emit();
         this.inputBlur.emit(event);
     }
     applyRawValue(text) {
@@ -434,40 +483,45 @@ class NumericTextBoxBaseComponent {
         }
         this.#pendingPaste = true;
     }
+    onSpinPointerDown(event, direction) {
+        // Only the primary button spins: a right-click opens the context menu and would never see a pointerup.
+        if (event.button !== 0) {
+            return;
+        }
+        this.spin$.next(direction);
+    }
+    /** Limits a value to the min and max bounds. */
+    clampValue(value) {
+        const min = this.minValue();
+        const max = this.maxValue();
+        if (min != null && this.compareValues(value, min) < 0) {
+            return min;
+        }
+        if (max != null && this.compareValues(value, max) > 0) {
+            return max;
+        }
+        return value;
+    }
     commitValue(value) {
-        this.value.set(value);
+        this.setOwnValue(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()) {
                 if (this.rawInputValue() !== "") {
                     this.rawInputValue.set("");
                 }
-                return false;
-            }
-            else if (min != null) {
-                this.commitValue(min);
-                return true;
-            }
-            else {
-                this.commitValue(this.zeroValue);
-                return true;
+                return;
             }
+            this.commitValue(this.clampValue(this.minValue() ?? this.zeroValue));
+            return;
         }
-        if (min != null && this.compareValues(value, min) < 0) {
-            this.commitValue(min);
-            return true;
+        const clamped = this.clampValue(value);
+        if (this.compareValues(clamped, value) !== 0) {
+            this.commitValue(clamped);
         }
-        if (max != null && this.compareValues(value, max) > 0) {
-            this.commitValue(max);
-            return true;
-        }
-        return false;
     }
     formatEditValue(value) {
         if (value == null) {
@@ -575,28 +629,46 @@ class NumericTextBoxBaseComponent {
             }
         });
     }
-    setInputFocusSubscription() {
-        this.inputFocus.subscribe(() => this.#hostElementRef.nativeElement.focus());
-    }
     setKeydownSubscription() {
         this.keydown$
-            .pipe(takeUntilDestroyed(this.#destroyRef), filter(() => !this.readonly() && !this.disabled()))
+            .pipe(takeUntilDestroyed(this.#destroyRef), 
+        // Keys pressed while an IME is composing belong to the IME (Safari reports them as keyCode 229).
+        filter(event => !event.isComposing && event.keyCode !== 229), filter(() => !this.readonly() && !this.disabled()))
             .subscribe((event) => {
-            if (event.key === "ArrowUp") {
-                event.preventDefault();
-                this.increase();
-                return;
-            }
-            if (event.key === "ArrowDown") {
-                event.preventDefault();
-                this.decrease();
-                return;
+            switch (event.key) {
+                case "ArrowUp":
+                    event.preventDefault();
+                    this.increase();
+                    return;
+                case "ArrowDown":
+                    event.preventDefault();
+                    this.decrease();
+                    return;
+                case "PageUp":
+                    event.preventDefault();
+                    this.spinValue("+", PAGE_STEP_COUNT);
+                    return;
+                case "PageDown":
+                    event.preventDefault();
+                    this.spinValue("-", PAGE_STEP_COUNT);
+                    return;
+                case "Home":
+                    // Without a minimum, Home keeps moving the caret.
+                    this.spinToBound(event, this.minValue());
+                    return;
+                case "End":
+                    this.spinToBound(event, this.maxValue());
+                    return;
             }
             if (event.code === "NumpadDecimal") {
                 this.insertLocaleDecimal(event);
             }
         });
     }
+    setOwnValue(value) {
+        this.#ownValue = value;
+        this.value.set(value);
+    }
     setSpinSubscription() {
         this.spin$
             .pipe(filter(() => !this.readonly() && !this.disabled()), switchMap(sign => of(sign).pipe(tap(sign => (sign === "-" ? this.decrease() : this.increase())), delay(300), concatMap(() => timer(0, 30).pipe(tap(() => (sign === "-" ? this.decrease() : this.increase())), takeUntil(this.spinStop$))), takeUntil(this.spinStop$))), takeUntilDestroyed(this.#destroyRef))
@@ -607,73 +679,67 @@ class NumericTextBoxBaseComponent {
         this.setKeydownSubscription();
         this.setSpinSubscription();
         this.setWheelSubscription();
-        this.setInputFocusSubscription();
         this.setBeforeInputSubscription();
     }
     setValueChangeSubscription() {
         this.valueChange$
-            .pipe(takeUntilDestroyed(this.#destroyRef), distinctUntilChanged(), map(v => this.parseValue(v)))
-            .subscribe(value => {
-            this.value.set(value);
-            this.touch.emit();
-        });
+            .pipe(takeUntilDestroyed(this.#destroyRef), map(v => this.parseValue(v)))
+            .subscribe(value => this.setOwnValue(value));
     }
     setWheelSubscription() {
         this.wheel$
-            .pipe(takeUntilDestroyed(this.#destroyRef), filter(() => !this.readonly() && !this.disabled()))
+            .pipe(takeUntilDestroyed(this.#destroyRef), 
+        // The wheel spins only the field being edited: scrolling the page over an unfocused field, a
+        // horizontal scroll and Ctrl+wheel (zoom) are left to the browser.
+        filter(event => this.focused() && event.deltaY !== 0 && !event.ctrlKey), filter(() => !this.readonly() && !this.disabled()))
             .subscribe((event) => {
             event.preventDefault();
-            if (event.deltaY < 0) {
-                this.increase();
-            }
-            else {
-                this.decrease();
-            }
+            this.spinValue(event.deltaY < 0 ? "+" : "-");
         });
     }
-    spinValue(direction) {
+    spinToBound(event, bound) {
+        if (bound == null) {
+            return;
+        }
+        event.preventDefault();
+        this.commitValue(bound);
+    }
+    spinValue(direction, steps = 1) {
         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);
+            this.commitValue(this.clampValue(this.zeroValue));
+            return;
         }
-        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);
+        let result = value;
+        for (let index = 0; index < steps; index++) {
+            result = this.stepValue(result, direction);
         }
-        this.focus();
+        // A value outside the bounds (set from outside) comes back inside them in the direction of the step.
+        this.commitValue(this.clampValue(result));
     }
     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 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.0.6", type: NumericTextBoxBaseComponent, isStandalone: true, inputs: { ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "aria-labelledby", 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 }, inputId: { classPropertyName: "inputId", publicName: "inputId", 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 }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, 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: { listeners: { "focusout": "onBlur($event)" }, properties: { "attr.aria-describedby": "null", "attr.aria-label": "null", "attr.aria-labelledby": "null", "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: NumericTextBoxBaseComponent, decorators: [{
             type: Directive,
             args: [{
                     host: {
+                        // The host has no role: the inner input is the spinbutton and carries the name, description and state. A
+                        // static aria-* attribute written on the host element would otherwise stay on the host as well.
+                        "[attr.aria-describedby]": "null",
+                        "[attr.aria-label]": "null",
+                        "[attr.aria-labelledby]": "null",
                         "[class]": "classes()",
                         "[attr.data-disabled]": "disabled() || null",
                         "[attr.data-invalid]": "invalidInput() || null",
                         "[attr.data-readonly]": "readonly() || null",
-                        "[attr.data-required]": "required() || null"
+                        "[attr.data-required]": "required() || null",
+                        "(focusout)": "onBlur($event)"
                     }
                 }]
         }], 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 }] }], 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 }] }] } });
+                        }, isSignal: true }] }], valueTextBoxRef: [{ type: i0.ViewChild, args: ["valueTextBox", { isSignal: true }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", 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"] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], nullable: [{ type: i0.Input, args: [{ isSignal: true, alias: "nullable", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], 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) {
@@ -746,11 +812,11 @@ class DecimalTextBoxComponent extends NumericTextBoxBaseComponent {
         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", "toggleable", "type", "class"], outputs: ["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: 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    [id]=\"inputId()\"\n    [disabled]=\"disabled()\"\n    [required]=\"required()\"\n    [type]=\"'text'\"\n    [attr.inputmode]=\"decimals() > 0 ? 'decimal' : 'numeric'\"\n    [readonly]=\"readonly()\"\n    [tabIndex]=\"tabindex()\"\n    [placeholder]=\"placeholder()\"\n    [value]=\"formattedValue()\"\n    (input)=\"applyRawValue(valueTextBox.value)\"\n    (keydown)=\"keydown$.next($event)\"\n    (focus)=\"inputFocus.emit($event)\"\n    (focusout)=\"inputFocusOut.emit($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-describedby]=\"ariaDescribedBy() || null\"\n    [attr.aria-invalid]=\"invalidInput() || null\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\n    [attr.aria-valuenow]=\"value()\"\n    [attr.aria-valuemin]=\"minValue()\"\n    [attr.aria-valuemax]=\"maxValue()\"\n    [attr.aria-valuetext]=\"formattedValue() || null\"\n    [attr.data-spinners]=\"showSpinners()\"\n    #valueTextBox />\n@if (showSpinners()) {\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)=\"onSpinPointerDown($event, '+')\"\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)=\"onSpinPointerDown($event, '-')\"\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: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "type", "class"], outputs: ["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" }]
+            args: [{ selector: "mona-decimal-text-box", imports: [NgTemplateOutlet, TextBoxDirective, 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    [id]=\"inputId()\"\n    [disabled]=\"disabled()\"\n    [required]=\"required()\"\n    [type]=\"'text'\"\n    [attr.inputmode]=\"decimals() > 0 ? 'decimal' : 'numeric'\"\n    [readonly]=\"readonly()\"\n    [tabIndex]=\"tabindex()\"\n    [placeholder]=\"placeholder()\"\n    [value]=\"formattedValue()\"\n    (input)=\"applyRawValue(valueTextBox.value)\"\n    (keydown)=\"keydown$.next($event)\"\n    (focus)=\"inputFocus.emit($event)\"\n    (focusout)=\"inputFocusOut.emit($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-describedby]=\"ariaDescribedBy() || null\"\n    [attr.aria-invalid]=\"invalidInput() || null\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\n    [attr.aria-valuenow]=\"value()\"\n    [attr.aria-valuemin]=\"minValue()\"\n    [attr.aria-valuemax]=\"maxValue()\"\n    [attr.aria-valuetext]=\"formattedValue() || null\"\n    [attr.data-spinners]=\"showSpinners()\"\n    #valueTextBox />\n@if (showSpinners()) {\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)=\"onSpinPointerDown($event, '+')\"\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)=\"onSpinPointerDown($event, '-')\"\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 {
@@ -792,34 +858,41 @@ class NumericTextBoxComponent extends NumericTextBoxBaseComponent {
         const newValue = (value * factor + signFactor * step * factor) / factor;
         return precision > 0 ? parseFloat(newValue.toFixed(precision)) : newValue;
     }
+    /** The number of fraction digits, including those of exponent forms such as `1e-7`. */
     static getPrecision(value) {
-        const valueString = value.toString();
-        if (valueString.includes(".")) {
-            const parts = valueString.split(".");
-            return parts[1].length;
-        }
-        return 0;
+        const [mantissa, exponent] = value.toString().split("e");
+        const fractionDigits = mantissa.split(".")[1]?.length ?? 0;
+        return Math.max(0, fractionDigits - Number(exponent ?? 0));
+    }
+    /** -0 reads and shows as "-0"; the field treats it as zero. */
+    static withoutNegativeZero(result) {
+        return Object.is(result.value, -0) ? { ...result, value: 0 } : result;
     }
     compareValues(a, b) {
         return a - b;
     }
     readEditText(text, localeId, decimals) {
-        return validateLocalizedNumberEdit(text, localeId, { decimals });
+        return NumericTextBoxComponent.withoutNegativeZero(validateLocalizedNumberEdit(text, localeId, { decimals }));
     }
     readLocaleText(text, localeId, decimals) {
-        return validateLocalizedNumber(text, localeId, { mode: "locale", decimals });
+        return NumericTextBoxComponent.withoutNegativeZero(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);
+        const limited = Math.min(Math.max(result, Number.MIN_SAFE_INTEGER), Number.MAX_SAFE_INTEGER);
+        // A value already past that range (set from outside) stays put rather than jumping the wrong way.
+        if ((direction === "+" && limited < value) || (direction === "-" && limited > value)) {
+            return value;
+        }
+        return limited;
     }
     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", "toggleable", "type", "class"], outputs: ["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: { 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    [id]=\"inputId()\"\n    [disabled]=\"disabled()\"\n    [required]=\"required()\"\n    [type]=\"'text'\"\n    [attr.inputmode]=\"decimals() > 0 ? 'decimal' : 'numeric'\"\n    [readonly]=\"readonly()\"\n    [tabIndex]=\"tabindex()\"\n    [placeholder]=\"placeholder()\"\n    [value]=\"formattedValue()\"\n    (input)=\"applyRawValue(valueTextBox.value)\"\n    (keydown)=\"keydown$.next($event)\"\n    (focus)=\"inputFocus.emit($event)\"\n    (focusout)=\"inputFocusOut.emit($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-describedby]=\"ariaDescribedBy() || null\"\n    [attr.aria-invalid]=\"invalidInput() || null\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\n    [attr.aria-valuenow]=\"value()\"\n    [attr.aria-valuemin]=\"minValue()\"\n    [attr.aria-valuemax]=\"maxValue()\"\n    [attr.aria-valuetext]=\"formattedValue() || null\"\n    [attr.data-spinners]=\"showSpinners()\"\n    #valueTextBox />\n@if (showSpinners()) {\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)=\"onSpinPointerDown($event, '+')\"\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)=\"onSpinPointerDown($event, '-')\"\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: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "type", "class"], outputs: ["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" }]
+            args: [{ selector: "mona-numeric-text-box", imports: [NgTemplateOutlet, TextBoxDirective, 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    [id]=\"inputId()\"\n    [disabled]=\"disabled()\"\n    [required]=\"required()\"\n    [type]=\"'text'\"\n    [attr.inputmode]=\"decimals() > 0 ? 'decimal' : 'numeric'\"\n    [readonly]=\"readonly()\"\n    [tabIndex]=\"tabindex()\"\n    [placeholder]=\"placeholder()\"\n    [value]=\"formattedValue()\"\n    (input)=\"applyRawValue(valueTextBox.value)\"\n    (keydown)=\"keydown$.next($event)\"\n    (focus)=\"inputFocus.emit($event)\"\n    (focusout)=\"inputFocusOut.emit($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-describedby]=\"ariaDescribedBy() || null\"\n    [attr.aria-invalid]=\"invalidInput() || null\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\n    [attr.aria-valuenow]=\"value()\"\n    [attr.aria-valuemin]=\"minValue()\"\n    [attr.aria-valuemax]=\"maxValue()\"\n    [attr.aria-valuetext]=\"formattedValue() || null\"\n    [attr.data-spinners]=\"showSpinners()\"\n    #valueTextBox />\n@if (showSpinners()) {\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)=\"onSpinPointerDown($event, '+')\"\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)=\"onSpinPointerDown($event, '-')\"\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"] }] } });
 
 /*