@nanahoshi/mona-ui 0.23.2 → 0.24.0

package/types/nanahoshi-mona-ui-notification.d.ts

@@ -96,6 +96,7 @@ declare class NotificationService {
     private getNotificationDataById;
     private initialize;
     private removeNotificationData;
+    private scheduleTimeout;
     static ɵfac: i0.ɵɵFactoryDeclaration<NotificationService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<NotificationService>;
 }

package/types/nanahoshi-mona-ui-numeric-text-box.d.ts

@@ -1,9 +1,9 @@
-import * as _nanahoshi_mona_ui_i18n from '@nanahoshi/mona-ui/i18n';
-import { MonaNumericTextBoxMessages } from '@nanahoshi/mona-ui/i18n';
 import * as _angular_core from '@angular/core';
-import { Signal, TemplateRef, ElementRef } from '@angular/core';
+import { Signal, TemplateRef, ElementRef, ModelSignal } from '@angular/core';
 import { FormValueControl } from '@angular/forms/signals';
 import { VariantInputs, Action } from '@nanahoshi/mona-ui/internal';
+import * as _nanahoshi_mona_ui_i18n from '@nanahoshi/mona-ui/i18n';
+import { MonaNumericTextBoxMessages } from '@nanahoshi/mona-ui/i18n';
 import { Subject } from 'rxjs';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
@@ -15,8 +15,17 @@ declare const numericTextboxThemeVariants: (props?: ({
 type NumericTextboxVariantProps = VariantProps<typeof numericTextboxThemeVariants>;
 type NumericTextboxVariantInputs = VariantInputs<NumericTextboxVariantProps>;
 
-type Sign = "-" | "+";
-declare class NumericTextBoxComponent implements NumericTextboxVariantInputs, FormValueControl<number | null> {
+type NumericTextBoxStepDirection = "-" | "+";
+/** Text read from the input: whether it is acceptable and, when complete, the value it holds. */
+interface NumericTextBoxTextResult<TValue> {
+    readonly valid: boolean;
+    readonly value: TValue | null;
+}
+/**
+ * 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.
+ */
+declare abstract class NumericTextBoxBaseComponent<TValue extends number | string> implements NumericTextboxVariantInputs {
     #private;
     protected readonly beforeInput$: Subject<InputEvent>;
     protected readonly classes: Signal<string>;
@@ -28,7 +37,7 @@ declare class NumericTextBoxComponent implements NumericTextboxVariantInputs, Fo
     protected readonly messages: Signal<_nanahoshi_mona_ui_i18n.MonaNumericTextBoxMessages>;
     protected readonly prefixTemplateList: Signal<readonly TemplateRef<any>[]>;
     protected readonly rawInputValue: _angular_core.WritableSignal<string>;
-    protected readonly spin$: Subject<Sign>;
+    protected readonly spin$: Subject<NumericTextBoxStepDirection>;
     protected readonly spinButtonClasses: Signal<string>;
     protected readonly spinButtonIconSize: Signal<20 | 16 | 14>;
     protected readonly spinStop$: Subject<void>;
@@ -49,10 +58,6 @@ declare class NumericTextBoxComponent implements NumericTextboxVariantInputs, Fo
      * @description Sets whether the input is disabled.
      */
     readonly disabled: _angular_core.InputSignal<boolean>;
-    /**
-     * @description Formats the value to be displayed in the input when the input is not focused.
-     */
-    readonly formatter: _angular_core.InputSignal<Action<number | null, string> | null>;
     /**
      * @description Emits when the inner input element is blurred.
      */
@@ -66,19 +71,11 @@ declare class NumericTextBoxComponent implements NumericTextboxVariantInputs, Fo
      */
     readonly inputFocusOut: _angular_core.OutputEmitterRef<FocusEvent>;
     /**
-     * @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
      */
     readonly invalid: _angular_core.InputSignal<boolean>;
-    /**
-     * @description Maximum value that can be entered.
-     */
-    readonly maxValue: _angular_core.InputSignal<number | null>;
-    /**
-     * @description Minimum value that can be entered.
-     */
-    readonly minValue: _angular_core.InputSignal<number | null>;
     /**
      * @description Sets whether the input can be empty.
      */
@@ -103,21 +100,17 @@ declare class NumericTextBoxComponent implements NumericTextboxVariantInputs, Fo
      * @description Sets whether the spin buttons are visible.
      */
     readonly spinners: _angular_core.InputSignal<boolean>;
-    /**
-     * @description Step value to increment or decrement the value.
-     */
-    readonly step: _angular_core.InputSignal<number>;
     /**
      * @description Tab index of the input.
      */
     readonly tabindex: _angular_core.InputSignal<number>;
     /**
-     * @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.
      */
     readonly touch: _angular_core.OutputEmitterRef<void>;
     /**
-     * @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
      */
@@ -127,25 +120,25 @@ declare class NumericTextBoxComponent implements NumericTextboxVariantInputs, Fo
      * @default ""
      */
     readonly userClass: _angular_core.InputSignal<string>;
-    /**
-     * @description Two-way bindable current value of the numeric text box.
-     * @default null
-     */
-    readonly value: _angular_core.ModelSignal<number | null>;
+    /** The most fraction digits shown while editing. */
+    protected abstract readonly editFractionDigits: number;
+    /** The value a spin starts from when the input is empty. */
+    protected abstract readonly zeroValue: TValue;
+    abstract readonly formatter: Signal<Action<TValue | null, string> | null>;
+    abstract readonly maxValue: Signal<TValue | null>;
+    abstract readonly minValue: Signal<TValue | null>;
+    abstract readonly value: ModelSignal<TValue | null>;
     constructor();
-    private static calculate;
-    private static getPrecision;
-    private static isNumeric;
     decrease(): void;
     focus(): void;
     increase(): void;
     onBlur(event: FocusEvent): void;
     protected applyRawValue(text: string): void;
-    private commitNumericValue;
+    protected onPaste(event: ClipboardEvent): void;
+    private commitValue;
     private correctValue;
     private formatEditValue;
     private formatValueForDisplay;
-    protected onPaste(event: ClipboardEvent): void;
     /**
      * 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.
@@ -159,8 +152,91 @@ declare class NumericTextBoxComponent implements NumericTextboxVariantInputs, Fo
     private setSubscriptions;
     private setValueChangeSubscription;
     private setWheelSubscription;
+    private spinValue;
+    /** Negative when `a < b`, zero when equal, positive when `a > b`. */
+    protected abstract compareValues(a: TValue, b: TValue): number;
+    /** Reads text as it is being typed (edit mode). */
+    protected abstract readEditText(text: string, localeId: string, decimals: number): NumericTextBoxTextResult<TValue>;
+    /** Reads pasted or complete text with the locale's canonical rules. */
+    protected abstract readLocaleText(text: string, localeId: string, decimals: number): NumericTextBoxTextResult<TValue>;
+    /** The value one step up or down from `value`. */
+    protected abstract stepValue(value: TValue, direction: NumericTextBoxStepDirection): TValue;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NumericTextBoxBaseComponent<any>, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NumericTextBoxBaseComponent<any>, never, never, { "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "decimals": { "alias": "decimals"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "nullable": { "alias": "nullable"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "spinners": { "alias": "spinners"; "required": false; "isSignal": true; }; "tabindex": { "alias": "tabindex"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, { "inputBlur": "inputBlur"; "inputFocus": "inputFocus"; "inputFocusOut": "inputFocusOut"; "touch": "touch"; }, ["prefixTemplateList"], never, true, never>;
+}
+
+/**
+ * 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.
+ */
+declare class DecimalTextBoxComponent extends NumericTextBoxBaseComponent<string> implements FormValueControl<string | null> {
+    protected readonly editFractionDigits = 100;
+    protected readonly zeroValue = "0";
+    /**
+     * @description Formats the value to be displayed in the input when the input is not focused.
+     */
+    readonly formatter: _angular_core.InputSignal<Action<string | null, string> | null>;
+    /**
+     * @description Maximum value that can be entered, as a decimal string or a number.
+     */
+    readonly maxValue: _angular_core.InputSignalWithTransform<string | null, string | number | null>;
+    /**
+     * @description Minimum value that can be entered, as a decimal string or a number.
+     */
+    readonly minValue: _angular_core.InputSignalWithTransform<string | null, string | number | null>;
+    /**
+     * @description Step value to increment or decrement the value, as a decimal string or a number.
+     * @default "1"
+     */
+    readonly step: _angular_core.InputSignalWithTransform<string, string | number>;
+    /**
+     * @description Two-way bindable current value, as a canonical decimal string such as `"-1234.5"`.
+     * @default null
+     */
+    readonly value: _angular_core.ModelSignal<string | null>;
+    constructor();
+    protected compareValues(a: string, b: string): number;
+    protected readEditText(text: string, localeId: string, decimals: number): NumericTextBoxTextResult<string>;
+    protected readLocaleText(text: string, localeId: string, decimals: number): NumericTextBoxTextResult<string>;
+    protected stepValue(value: string, direction: NumericTextBoxStepDirection): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DecimalTextBoxComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DecimalTextBoxComponent, "mona-decimal-text-box", never, { "formatter": { "alias": "formatter"; "required": false; "isSignal": true; }; "maxValue": { "alias": "maxValue"; "required": false; "isSignal": true; }; "minValue": { "alias": "minValue"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+}
+
+declare class NumericTextBoxComponent extends NumericTextBoxBaseComponent<number> implements FormValueControl<number | null> {
+    protected readonly editFractionDigits = 20;
+    protected readonly zeroValue = 0;
+    /**
+     * @description Formats the value to be displayed in the input when the input is not focused.
+     */
+    readonly formatter: _angular_core.InputSignal<Action<number | null, string> | null>;
+    /**
+     * @description Maximum value that can be entered.
+     */
+    readonly maxValue: _angular_core.InputSignal<number | null>;
+    /**
+     * @description Minimum value that can be entered.
+     */
+    readonly minValue: _angular_core.InputSignal<number | null>;
+    /**
+     * @description Step value to increment or decrement the value.
+     */
+    readonly step: _angular_core.InputSignal<number>;
+    /**
+     * @description Two-way bindable current value of the numeric text box.
+     * @default null
+     */
+    readonly value: _angular_core.ModelSignal<number | null>;
+    private static calculate;
+    private static getPrecision;
+    protected compareValues(a: number, b: number): number;
+    protected readEditText(text: string, localeId: string, decimals: number): NumericTextBoxTextResult<number>;
+    protected readLocaleText(text: string, localeId: string, decimals: number): NumericTextBoxTextResult<number>;
+    protected stepValue(value: number, direction: NumericTextBoxStepDirection): number;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NumericTextBoxComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NumericTextBoxComponent, "mona-numeric-text-box", never, { "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "decimals": { "alias": "decimals"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "formatter": { "alias": "formatter"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "maxValue": { "alias": "maxValue"; "required": false; "isSignal": true; }; "minValue": { "alias": "minValue"; "required": false; "isSignal": true; }; "nullable": { "alias": "nullable"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "spinners": { "alias": "spinners"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "tabindex": { "alias": "tabindex"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "inputBlur": "inputBlur"; "inputFocus": "inputFocus"; "inputFocusOut": "inputFocusOut"; "touch": "touch"; "value": "valueChange"; }, ["prefixTemplateList"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NumericTextBoxComponent, "mona-numeric-text-box", never, { "formatter": { "alias": "formatter"; "required": false; "isSignal": true; }; "maxValue": { "alias": "maxValue"; "required": false; "isSignal": true; }; "minValue": { "alias": "minValue"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
 }
 
 declare class NumericTextBoxPrefixTemplateDirective {
@@ -170,5 +246,5 @@ declare class NumericTextBoxPrefixTemplateDirective {
 
 declare const NUMERIC_TEXT_BOX_DEFAULT_MESSAGES: MonaNumericTextBoxMessages;
 
-export { NUMERIC_TEXT_BOX_DEFAULT_MESSAGES, NumericTextBoxComponent, NumericTextBoxPrefixTemplateDirective };
+export { DecimalTextBoxComponent, NUMERIC_TEXT_BOX_DEFAULT_MESSAGES, NumericTextBoxComponent, NumericTextBoxPrefixTemplateDirective };
 export type { NumericTextboxVariantProps };