@nanahoshi/mona-ui 0.24.5 → 0.24.6

package/types/nanahoshi-mona-ui-datetime-picker.d.ts

@@ -5,7 +5,7 @@ import { TemplateRef } from '@angular/core';
 import { FormValueControl } from '@angular/forms/signals';
 import { CalendarDecadeCellTemplateDirective, CalendarMonthCellTemplateDirective, CalendarYearCellTemplateDirective, FirstDayOfWeek } from '@nanahoshi/mona-ui/calendar';
 import { PreventableEvent } from '@nanahoshi/mona-ui/common';
-import { DateDisabledType, HourFormat } from '@nanahoshi/mona-ui/date-input';
+import { HourFormat, TypedDateInput, DateDisabledType } from '@nanahoshi/mona-ui/date-input';
 import * as i1 from '@nanahoshi/mona-ui/dropdowns';
 import { DropdownPopupInput } from '@nanahoshi/mona-ui/dropdowns';
 import { AttributeConfig, VariantInputs } from '@nanahoshi/mona-ui/internal';
@@ -20,10 +20,13 @@ declare class DateTimePickerComponent implements FormValueControl<Date | null>,
     #private;
     protected readonly activeView: _angular_core.WritableSignal<ActiveView>;
     protected readonly baseClass: _angular_core.Signal<string>;
-    protected readonly currentDateString: _angular_core.WritableSignal<string>;
+    protected readonly dateTabId: string;
     protected readonly decadeCellTemplate: _angular_core.Signal<CalendarDecadeCellTemplateDirective | undefined>;
     protected readonly effectiveFormat: _angular_core.Signal<string>;
+    protected readonly effectiveHourFormat: _angular_core.Signal<HourFormat>;
     protected readonly expanded: _angular_core.Signal<boolean>;
+    /** Whether the view shown next takes focus: yes after picking a day, no when a tab is chosen. */
+    protected readonly focusViewOnMount: _angular_core.WritableSignal<boolean>;
     protected readonly footerClass: _angular_core.Signal<string>;
     protected readonly headerClass: _angular_core.Signal<string>;
     protected readonly inputAttributes: _angular_core.Signal<AttributeConfig>;
@@ -32,13 +35,33 @@ declare class DateTimePickerComponent implements FormValueControl<Date | null>,
     protected readonly messages: _angular_core.Signal<_nanahoshi_mona_ui_i18n.MonaDateTimePickerMessages>;
     protected readonly monthCellTemplate: _angular_core.Signal<CalendarMonthCellTemplateDirective | undefined>;
     protected readonly navigatedDate: _angular_core.WritableSignal<Date>;
+    protected readonly panelId: string;
     protected readonly pickerPopupClass: _angular_core.Signal<string>;
     protected readonly popupId: string;
     protected readonly popupTemplate: _angular_core.Signal<TemplateRef<unknown>>;
     protected readonly prefixTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
     protected readonly timePickerMax: _angular_core.Signal<Date | null>;
     protected readonly timePickerMin: _angular_core.Signal<Date | null>;
+    protected readonly timeTabId: string;
+    /** Set in the constructor, which runs after the `value` model it writes to exists. */
+    protected readonly typedInput: TypedDateInput;
     protected readonly yearCellTemplate: _angular_core.Signal<CalendarYearCellTemplateDirective | undefined>;
+    /**
+     * @description Id of an element that describes the input, such as a hint or an error message.
+     * @default ""
+     */
+    readonly ariaDescribedBy: _angular_core.InputSignal<string>;
+    /**
+     * @description Accessible name of the input. Prefer a visible label, linked through {@link inputId} or
+     * {@link ariaLabelledBy}; the placeholder is not a label.
+     * @default ""
+     */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    /**
+     * @description Id of the element that labels the input.
+     * @default ""
+     */
+    readonly ariaLabelledBy: _angular_core.InputSignal<string>;
     /**
      * @description Emits when the popup is about to close. This event is preventable.
      */
@@ -49,11 +72,13 @@ declare class DateTimePickerComponent implements FormValueControl<Date | null>,
     readonly closed: _angular_core.OutputEmitterRef<void>;
     /**
      * @description Sets the disabled state of the date time picker.
+     * @default false
      */
-    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * @description Sets the disabled dates of the date time picker.
-     * Accepts either an iterable of Date objects or a predicate function.
+     * Accepts either an iterable of Date objects or a predicate function. Typing a disabled date is reported as a
+     * `disabledDate` error instead of setting the value.
      */
     readonly disabledDates: _angular_core.InputSignal<DateDisabledType>;
     /**
@@ -62,32 +87,41 @@ declare class DateTimePickerComponent implements FormValueControl<Date | null>,
      */
     readonly firstDay: _angular_core.InputSignal<FirstDayOfWeek | null>;
     /**
-     * @description Sets the date format of the date time picker. If not specified, derives from the active locale, hourFormat, and showSeconds.
+     * @description Sets the date format of the date time picker. If not specified, derives from the active locale,
+     * hourFormat, and showSeconds. Typed text is also accepted with one-digit parts and a two-digit year.
      * @default null
      */
     readonly format: _angular_core.InputSignal<string | null>;
     /**
-     * @description Sets the hour format of the time picker.
-     * @default 24
+     * @description Sets the hour format of the date time picker. When null, the active locale's clock is used: 12-hour
+     * for en-US, 24-hour for de-DE.
+     * @default null
      */
-    readonly hourFormat: _angular_core.InputSignal<HourFormat>;
+    readonly hourFormat: _angular_core.InputSignal<HourFormat | null>;
     /**
      * @description Sets the hour step of the time picker.
      * @default 1
      */
     readonly hourStep: _angular_core.InputSignal<number>;
+    /**
+     * @description Id of the inner `<input>` element. Point a `<label for>` or `<mona-label for>` at it to label the
+     * date time picker. A unique id is generated when it isn't set.
+     * @default generated
+     */
+    readonly inputId: _angular_core.InputSignal<string>;
     /**
      * @description Marks the date time picker 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>;
+    readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
-     * @description Sets the maximum date of the date time picker.
+     * @description Sets the maximum date of the date time picker. A later typed date is reported as a `maxDate` error.
      */
     readonly max: _angular_core.InputSignalWithTransform<Date | undefined, unknown>;
     /**
-     * @description Sets the minimum date of the date time picker.
+     * @description Sets the minimum date of the date time picker. An earlier typed date is reported as a `minDate`
+     * error.
      */
     readonly min: _angular_core.InputSignalWithTransform<Date | undefined, unknown>;
     /**
@@ -113,30 +147,31 @@ declare class DateTimePickerComponent implements FormValueControl<Date | null>,
      */
     readonly popupClass: _angular_core.InputSignal<string>;
     /**
-     * @description Sets the height of the popup element.
-     * @default 200
+     * @description Sets the height of the popup element. When not set, the popup fits its content.
+     * @default undefined
      */
     readonly popupHeight: _angular_core.InputSignal<ListSizeInputType>;
     /**
-     * @description Sets the width of the popup element.
-     * @default null
+     * @description Sets the width of the popup element. When not set, the popup is at least as wide as the input.
+     * @default undefined
      */
     readonly popupWidth: _angular_core.InputSignal<ListSizeInputType>;
     /**
      * @description Sets the readonly state of the date time picker.
+     * @default false
      */
-    readonly readonly: _angular_core.InputSignal<boolean>;
+    readonly readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * @description When true, the input is readonly but the popup button remains enabled.
      * @default false
      */
-    readonly readonlyInput: _angular_core.InputSignal<boolean>;
+    readonly readonlyInput: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * @description Sets the required state of the date time picker.
      * When bound to a signal form field via `[formField]`, this is written by the `FormField` directive.
      * @default false
      */
-    readonly required: _angular_core.InputSignal<boolean>;
+    readonly required: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * @description Sets the border radius of the date time picker.
      */
@@ -147,19 +182,21 @@ declare class DateTimePickerComponent implements FormValueControl<Date | null>,
      */
     readonly secondStep: _angular_core.InputSignal<number>;
     /**
-     * @description Sets the visibility of the clear button.
+     * @description Sets the visibility of the clear button. Clearing empties the value at once.
+     * @default false
      */
-    readonly showClearButton: _angular_core.InputSignal<boolean>;
+    readonly showClearButton: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * @description Sets the visibility of the second selector.
+     * @default false
      */
-    readonly showSeconds: _angular_core.InputSignal<boolean>;
+    readonly showSeconds: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * @description Sets the size of the date time picker.
      */
     readonly size: _angular_core.InputSignal<"large" | "medium" | "small" | null | undefined>;
     /**
-     * @description Emitted when the date time picker is interacted with via blur, selection, or clear.
+     * @description Emitted when focus leaves the date time picker and its popup.
      * The `FormField` directive listens to this to mark the field as touched.
      */
     readonly touch: _angular_core.OutputEmitterRef<void>;
@@ -168,10 +205,11 @@ declare class DateTimePickerComponent implements FormValueControl<Date | null>,
      * this is written by the `FormField` directive.
      * @default false
      */
-    readonly touched: _angular_core.InputSignal<boolean>;
+    readonly touched: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly userClass: _angular_core.InputSignal<string>;
     /**
-     * @description Two-way bindable current date time value.
+     * @description Two-way bindable current date time value. Typed text is written on Enter and when the input loses
+     * focus; text that isn't a valid date and time keeps the previous value and marks the field invalid.
      * @default null
      */
     readonly value: _angular_core.ModelSignal<Date | null>;
@@ -179,30 +217,33 @@ declare class DateTimePickerComponent implements FormValueControl<Date | null>,
      * @description Enables the display of week numbers in the calendar.
      * @default false
      */
-    readonly weekNumber: _angular_core.InputSignal<boolean>;
+    readonly weekNumber: _angular_core.InputSignalWithTransform<boolean, unknown>;
     constructor();
-    focus(): void;
+    /**
+     * Focuses the input and places the caret after the text. Read-only pickers take focus too.
+     * @param options Options passed to the native `focus()` call, such as `preventScroll`.
+     */
+    focus(options?: FocusOptions): void;
     protected onCalendarValueChange(date: Date | Date[] | null): void;
     protected onCancelClick(): void;
-    protected onDateInputBlur(): void;
     protected onDateInputButtonClick(): void;
-    protected onDateStringEdit(dateString: string): void;
+    protected onFocusIn(event: FocusEvent): void;
+    protected onFocusOut(event: FocusEvent): void;
+    protected onInputBlur(): void;
+    protected onKeydown(event: KeyboardEvent): void;
     protected onSetDateClick(): void;
+    /** Arrow keys, Home and End move between the Date and Time tabs, as in the APG tabs pattern. */
+    protected onTabKeydown(event: KeyboardEvent): void;
     protected onTimeSelectorValueChange(date: Date | null): void;
+    /** Shows a view from its tab; focus stays on the tab, as in the APG tabs pattern. */
+    protected selectTab(view: ActiveView): void;
     private closePopup;
-    private compareDatesEqual;
-    private dateStringEquals;
-    private handleKeydown;
-    private isDateDisabledByInput;
     private openPopup;
-    private setCurrentDate;
-    private setKeyboardSubscriptions;
-    private setPopupCloseSubscriptions;
-    private setSubscriptions;
-    private updateCurrentDateString;
+    private setPopupCloseSubscription;
+    private setPopupKeyboardSubscription;
     private updateDateIfNotInRange;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DateTimePickerComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DateTimePickerComponent, "mona-datetime-picker", never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "disabledDates": { "alias": "disabledDates"; "required": false; "isSignal": true; }; "firstDay": { "alias": "firstDay"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "hourFormat": { "alias": "hourFormat"; "required": false; "isSignal": true; }; "hourStep": { "alias": "hourStep"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "minuteStep": { "alias": "minuteStep"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "popupClass": { "alias": "popupClass"; "required": false; "isSignal": true; }; "popupHeight": { "alias": "popupHeight"; "required": false; "isSignal": true; }; "popupWidth": { "alias": "popupWidth"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "readonlyInput": { "alias": "readonlyInput"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "secondStep": { "alias": "secondStep"; "required": false; "isSignal": true; }; "showClearButton": { "alias": "showClearButton"; "required": false; "isSignal": true; }; "showSeconds": { "alias": "showSeconds"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "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; }; "weekNumber": { "alias": "weekNumber"; "required": false; "isSignal": true; }; }, { "close": "close"; "closed": "closed"; "open": "open"; "opened": "opened"; "touch": "touch"; "value": "valueChange"; }, ["decadeCellTemplate", "monthCellTemplate", "prefixTemplate", "yearCellTemplate"], never, true, [{ directive: typeof i1.DropdownPopupHandlerDirective; inputs: {}; outputs: {}; }]>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DateTimePickerComponent, "mona-datetime-picker", never, { "ariaDescribedBy": { "alias": "aria-describedby"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaLabelledBy": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "disabledDates": { "alias": "disabledDates"; "required": false; "isSignal": true; }; "firstDay": { "alias": "firstDay"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "hourFormat": { "alias": "hourFormat"; "required": false; "isSignal": true; }; "hourStep": { "alias": "hourStep"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "minuteStep": { "alias": "minuteStep"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "popupClass": { "alias": "popupClass"; "required": false; "isSignal": true; }; "popupHeight": { "alias": "popupHeight"; "required": false; "isSignal": true; }; "popupWidth": { "alias": "popupWidth"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "readonlyInput": { "alias": "readonlyInput"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "secondStep": { "alias": "secondStep"; "required": false; "isSignal": true; }; "showClearButton": { "alias": "showClearButton"; "required": false; "isSignal": true; }; "showSeconds": { "alias": "showSeconds"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "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; }; "weekNumber": { "alias": "weekNumber"; "required": false; "isSignal": true; }; }, { "close": "close"; "closed": "closed"; "open": "open"; "opened": "opened"; "touch": "touch"; "value": "valueChange"; }, ["decadeCellTemplate", "monthCellTemplate", "prefixTemplate", "yearCellTemplate"], never, true, [{ directive: typeof i1.DropdownPopupHandlerDirective; inputs: {}; outputs: {}; }]>;
 }
 
 declare const DATETIME_PICKER_DEFAULT_MESSAGES: MonaDateTimePickerMessages;

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

@@ -37,6 +37,8 @@ declare abstract class NumericTextBoxBaseComponent<TValue extends number | strin
     protected readonly messages: Signal<_nanahoshi_mona_ui_i18n.MonaNumericTextBoxMessages>;
     protected readonly prefixTemplateList: Signal<readonly TemplateRef<any>[]>;
     protected readonly rawInputValue: _angular_core.WritableSignal<string>;
+    /** Spin buttons on a read-only field would look usable but do nothing, so they are hidden there. */
+    protected readonly showSpinners: Signal<boolean>;
     protected readonly spin$: Subject<NumericTextBoxStepDirection>;
     protected readonly spinButtonClasses: Signal<string>;
     protected readonly spinButtonIconSize: Signal<20 | 16 | 14>;
@@ -45,9 +47,21 @@ declare abstract class NumericTextBoxBaseComponent<TValue extends number | strin
     protected readonly valueTextBoxRef: Signal<ElementRef<HTMLInputElement>>;
     protected readonly wheel$: Subject<WheelEvent>;
     /**
-     * @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 ""
+     */
+    readonly ariaDescribedBy: _angular_core.InputSignal<string>;
+    /**
+     * @description Accessible name for the input. Prefer a visible label, linked through {@link inputId} or
+     * {@link ariaLabelledBy}.
      */
     readonly ariaLabel: _angular_core.InputSignal<string | null>;
+    /**
+     * @description ID of an external element that provides the accessible name for the input.
+     * @default ""
+     */
+    readonly ariaLabelledBy: _angular_core.InputSignal<string>;
     /**
      * @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.
@@ -57,9 +71,10 @@ declare abstract class NumericTextBoxBaseComponent<TValue extends number | strin
     /**
      * @description Sets whether the input is disabled.
      */
-    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
-     * @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.
      */
     readonly inputBlur: _angular_core.OutputEmitterRef<FocusEvent>;
     /**
@@ -70,24 +85,36 @@ declare abstract class NumericTextBoxBaseComponent<TValue extends number | strin
      * @description Emits when the inner input element loses focus.
      */
     readonly inputFocusOut: _angular_core.OutputEmitterRef<FocusEvent>;
+    /**
+     * @description ID of the inner input, so a `<label for>` or `<mona-label for>` can point at it.
+     * @default a generated ID
+     */
+    readonly inputId: _angular_core.InputSignal<string>;
     /**
      * @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>;
+    readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * @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).
+     */
+    readonly nullable: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
-     * @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 ""
      */
-    readonly nullable: _angular_core.InputSignal<boolean>;
+    readonly placeholder: _angular_core.InputSignal<string>;
     /**
-     * @description Sets whether the input is readonly.
+     * @description Sets whether the input is readonly. The spin buttons are hidden while it is.
      */
-    readonly readonly: _angular_core.InputSignal<boolean>;
+    readonly readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * @description Sets whether the input is required.
      */
-    readonly required: _angular_core.InputSignal<boolean>;
+    readonly required: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * @description Sets the border radius of the input.
      */
@@ -99,14 +126,14 @@ declare abstract class NumericTextBoxBaseComponent<TValue extends number | strin
     /**
      * @description Sets whether the spin buttons are visible.
      */
-    readonly spinners: _angular_core.InputSignal<boolean>;
+    readonly spinners: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * @description Tab index of the input.
      */
     readonly tabindex: _angular_core.InputSignal<number>;
     /**
-     * @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.
      */
     readonly touch: _angular_core.OutputEmitterRef<void>;
     /**
@@ -114,7 +141,7 @@ declare abstract class NumericTextBoxBaseComponent<TValue extends number | strin
      * this is written by the `FormField` directive.
      * @default false
      */
-    readonly touched: _angular_core.InputSignal<boolean>;
+    readonly touched: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * @description Additional CSS classes merged onto the host element via `tailwind-merge`.
      * @default ""
@@ -129,12 +156,22 @@ declare abstract class NumericTextBoxBaseComponent<TValue extends number | strin
     abstract readonly minValue: Signal<TValue | null>;
     abstract readonly value: ModelSignal<TValue | null>;
     constructor();
+    /** Steps the value down by `step` and moves focus to the input. */
     decrease(): void;
-    focus(): void;
+    /**
+     * 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?: FocusOptions): void;
+    /** Steps the value up by `step` and moves focus to the input. */
     increase(): void;
+    /** Runs when focus leaves an element inside the component: clamps the value and marks the field touched. */
     onBlur(event: FocusEvent): void;
     protected applyRawValue(text: string): void;
     protected onPaste(event: ClipboardEvent): void;
+    protected onSpinPointerDown(event: PointerEvent, direction: NumericTextBoxStepDirection): void;
+    /** Limits a value to the min and max bounds. */
+    private clampValue;
     private commitValue;
     private correctValue;
     private formatEditValue;
@@ -146,12 +183,13 @@ declare abstract class NumericTextBoxBaseComponent<TValue extends number | strin
     private insertLocaleDecimal;
     private parseValue;
     private setBeforeInputSubscription;
-    private setInputFocusSubscription;
     private setKeydownSubscription;
+    private setOwnValue;
     private setSpinSubscription;
     private setSubscriptions;
     private setValueChangeSubscription;
     private setWheelSubscription;
+    private spinToBound;
     private spinValue;
     /** Negative when `a < b`, zero when equal, positive when `a > b`. */
     protected abstract compareValues(a: TValue, b: TValue): number;
@@ -162,7 +200,7 @@ declare abstract class NumericTextBoxBaseComponent<TValue extends number | strin
     /** 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>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NumericTextBoxBaseComponent<any>, never, never, { "ariaDescribedBy": { "alias": "aria-describedby"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaLabelledBy": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "decimals": { "alias": "decimals"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "nullable": { "alias": "nullable"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "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>;
 }
 
 /**
@@ -230,7 +268,10 @@ declare class NumericTextBoxComponent extends NumericTextBoxBaseComponent<number
      */
     readonly value: _angular_core.ModelSignal<number | null>;
     private static calculate;
+    /** The number of fraction digits, including those of exponent forms such as `1e-7`. */
     private static getPrecision;
+    /** -0 reads and shows as "-0"; the field treats it as zero. */
+    private static withoutNegativeZero;
     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>;