@nexterajs/ui 0.0.1 → 0.1.0

package/types/nexterajs-ui-forms.d.ts

@@ -1,11 +1,15 @@
 import * as _angular_core from '@angular/core';
-import { OnDestroy } from '@angular/core';
-import { NxeValidationResult, NxeFormControlBase } from '@nexterajs/ui/core';
+import { OnChanges, SimpleChanges, OnDestroy, InjectionToken, EnvironmentProviders, AfterContentInit, TemplateRef } from '@angular/core';
+import { NxeValidationResult, NxeFormControlBase, NxeMessageKey, NxeExpr } from '@nexterajs/ui/core';
 import { DateTime } from 'luxon';
 import { NxeCalendarZoom, NxePeriodCell } from '@nexterajs/ui/intl';
 
 /** DevExtreme button `type` (style intent), as used in this codebase. */
 type NxeButtonType = 'normal' | 'default' | 'success' | 'danger';
+/** Fill treatment: dx `stylingMode`. `contained` (filled) is the default and the legacy look. */
+type NxeButtonStylingMode = 'contained' | 'outlined' | 'text';
+/** Button scale. `md` is the legacy size and adds no class. */
+type NxeButtonSize = 'sm' | 'md' | 'lg';
 /**
  * The `validationGroup` object carried on a {@link NxeButtonClickEvent}, mirroring the
  * DevExtreme button-click `event.validationGroup`. Its `validate()` runs every member of the
@@ -30,24 +34,40 @@ interface NxeButtonClickEvent {
 /**
  * `nxe-button` — drop-in replacement for DevExtreme `dx-button`.
  *
- * The host element IS the button (mirrors DevExtreme's `dx-button` DOM: the host carries the
- * styling classes and contains a single `.dx-button-content` child). This keeps every existing
- * `.nxe-btn*` / `.dx-button-content` global rule matching verbatim, and — critically — keeps the
- * shared `buttonLoading` directive working, which swaps `.dx-button-content` innerHTML for a
- * spinner (`getElementsByClassName('dx-button-content')[0]`).
+ * The host element IS the button (mirrors DevExtreme's `nxe-button` DOM: the host carries the
+ * styling classes and contains a single `.nxe-button-content` child). This keeps every existing
+ * `.nxe-btn*` / `.nxe-button-content` global rule matching verbatim, and — critically — keeps the
+ * shared `buttonLoading` directive working, which swaps `.nxe-button-content` innerHTML for a
+ * spinner (`getElementsByClassName('nxe-button-content')[0]`).
  *
  * Content is projected (`<nxe-icon> + <span>`, the dominant pattern). The legacy `text`/`type`
- * inputs render a `.dx-button-text` label for the ~25 attribute-styled buttons.
+ * inputs render a `.nxe-button-text` label for the ~25 attribute-styled buttons.
+ *
+ * `stylingMode`, `size`, `loading` and `block` are additive: with none of them set the host renders
+ * exactly as before. An icon can be projected into the leading slot as
+ * `<svg nxeButtonIcon ...>` (or `[nxeIcon]`), placed before the label.
  *
  * `onClick` emits {@link NxeButtonClickEvent}; native `(click)` also fires (27 sites bind it).
  */
 declare class NxeButtonComponent {
     private readonly registry;
+    private readonly groupScope;
     private readonly elementRef;
-    /** Legacy `text` label (rendered as `.dx-button-text` when set, no projected content). */
-    readonly text: _angular_core.InputSignal<string>;
+    /** Legacy `text` label (rendered as `.nxe-button-text` when set, no projected content). */
+    readonly text: _angular_core.InputSignal<string | undefined>;
     /** Style intent (`default`=blue, `success`=green, `danger`=red, `normal`=white). */
     readonly type: _angular_core.InputSignal<NxeButtonType>;
+    /** Fill treatment: `contained` (default), `outlined` (transparent with a coloured border) or `text` (no border). */
+    readonly stylingMode: _angular_core.InputSignal<NxeButtonStylingMode>;
+    /** Scale: `sm`, `md` (default, the legacy size) or `lg`. */
+    readonly size: _angular_core.InputSignal<NxeButtonSize>;
+    /**
+     * In-flight state: shows a spinner over the (hidden but still laid out, so the width holds)
+     * content, sets `aria-busy="true"` and swallows clicks and Enter/Space until it clears.
+     */
+    readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Full-width button (`display: flex; width: 100%`). An explicit `width` still wins. */
+    readonly block: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** Disabled state (`[disabled]`); blocks `onClick` and dims the button. */
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** Named validation group resolved via {@link NxeValidationGroupRegistry} on click. */
@@ -55,23 +75,23 @@ declare class NxeButtonComponent {
     /** DevExtreme parity input; only ever `false` in this codebase (suppresses tab focus). */
     readonly focusStateEnabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
-     * dx `icon` — renders `<i class="dx-icon dx-icon-NAME">` as the first child of
-     * `.dx-button-content`, before any projected content. Projection is the dominant pattern
+     * dx `icon` — renders `<i class="nxe-icon nxe-icon-NAME">` as the first child of
+     * `.nxe-button-content`, before any projected content. Projection is the dominant pattern
      * here (a `mat-icon` plus a `span`), so the two must coexist rather than compete.
      */
-    readonly icon: _angular_core.InputSignal<string>;
+    readonly icon: _angular_core.InputSignal<string | undefined>;
     /** dx `height` — a bare number (or numeric string) means px; anything else passes through. */
-    readonly height: _angular_core.InputSignal<string | number>;
+    readonly height: _angular_core.InputSignal<string | number | undefined>;
     /** dx `width` — same coercion as {@link height}. */
-    readonly width: _angular_core.InputSignal<string | number>;
-    protected readonly heightStyle: _angular_core.Signal<string>;
-    protected readonly widthStyle: _angular_core.Signal<string>;
+    readonly width: _angular_core.InputSignal<string | number | undefined>;
+    protected readonly heightStyle: _angular_core.Signal<string | null>;
+    protected readonly widthStyle: _angular_core.Signal<string | null>;
     /** DevExtreme-compatible click event. */
     readonly onClick: _angular_core.OutputEmitterRef<NxeButtonClickEvent>;
     protected handleKeydown(event: KeyboardEvent): void;
     protected handleClick(event: Event): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxeButtonComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxeButtonComponent, "nxe-button", never, { "text": { "alias": "text"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "validationGroup": { "alias": "validationGroup"; "required": false; "isSignal": true; }; "focusStateEnabled": { "alias": "focusStateEnabled"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; }, { "onClick": "onClick"; }, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxeButtonComponent, "nxe-button", never, { "text": { "alias": "text"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "stylingMode": { "alias": "stylingMode"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "block": { "alias": "block"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "validationGroup": { "alias": "validationGroup"; "required": false; "isSignal": true; }; "focusStateEnabled": { "alias": "focusStateEnabled"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; }, { "onClick": "onClick"; }, never, ["[nxeButtonIcon], [nxeIcon]", "*"], true, never>;
 }
 
 /** Text-box input mode (only `text`/`password` are used in this codebase). */
@@ -83,21 +103,54 @@ type NxeTextBoxMode = 'text' | 'password' | 'email' | 'tel' | 'search';
  * `[(ngModel)]`, one-way `[value]`, and `[readOnly]`. Like DevExtreme's default
  * (`valueChangeEvent='change'`), the value commits on **blur** — not on every keystroke.
  *
+ * `showClearButton` (dx default `false`) adds dx's clear area after the input while the field
+ * holds text and is neither read-only nor disabled; it sets the value to `''`, dx's own empty
+ * value for a text box, and focuses the input.
+ *
  * It provides {@link NXE_VALIDATION_TARGET} so a projected `nxe-validator` can read its value
  * and push back the invalid message, which renders as the red `.nxe-invalid-message` bubble.
  */
 declare class NxeTextBoxComponent extends NxeFormControlBase<string> {
     readonly mode: _angular_core.InputSignal<NxeTextBoxMode>;
-    readonly placeholderInput: _angular_core.InputSignal<string>;
+    readonly placeholderInput: _angular_core.InputSignal<string | undefined>;
     readonly placeholder: _angular_core.Signal<string>;
     /** DevExtreme parity input; cosmetic, unused in behaviour. */
-    readonly hoverStateEnabledInput: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly hoverStateEnabledInput: _angular_core.InputSignalWithTransform<boolean | undefined, unknown>;
     readonly hoverStateEnabled: _angular_core.Signal<boolean>;
+    /** dx `showClearButton` — off by default, as in dx; `NXE_DEFAULT_OPTIONS.textBox` can turn it on app-wide. */
+    readonly showClearButtonInput: _angular_core.InputSignalWithTransform<boolean | undefined, unknown>;
+    readonly showClearButton: _angular_core.Signal<boolean>;
+    /**
+     * With `mode="password"`, an icon button after the field that shows the password as text and
+     * hides it again. Off by default; it has no effect in any other mode.
+     */
+    readonly showPasswordToggle: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    protected readonly passwordToggleVisible: _angular_core.Signal<boolean>;
+    /** Whether the password is showing as text right now; hidden again whenever the toggle goes away. */
+    protected readonly passwordRevealed: _angular_core.WritableSignal<boolean>;
+    protected readonly passwordToggleLabel: _angular_core.Signal<string>;
     readonly focused: _angular_core.WritableSignal<boolean>;
     readonly displayValue: _angular_core.Signal<string>;
+    private readonly fieldRef;
+    /**
+     * The text in the field right now, typed or not. dx shows the clear button by the field's
+     * emptiness (`.dx-texteditor-empty`), which follows every keystroke, not the committed value.
+     */
+    private readonly fieldText;
+    protected readonly clearButtonVisible: _angular_core.Signal<boolean>;
+    /** dx `valueChangeEvent: 'input'` — the search-as-you-type case. */
+    protected onTypedInput(event: Event): void;
+    /**
+     * dx `_clearValueHandler`: value back to `''`, then focus on the input. The field is emptied by
+     * hand as well — typed-but-uncommitted text over an already-empty value would otherwise survive,
+     * because the `[value]` binding has not changed.
+     */
+    protected onClear(event: Event): void;
+    protected onTypedKeyup(event: Event): void;
+    protected commitPending(event: Event | null): void;
     protected onBlur(event: Event): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxeTextBoxComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxeTextBoxComponent, "nxe-text-box", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "placeholderInput": { "alias": "placeholder"; "required": false; "isSignal": true; }; "hoverStateEnabledInput": { "alias": "hoverStateEnabled"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxeTextBoxComponent, "nxe-text-box", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "placeholderInput": { "alias": "placeholder"; "required": false; "isSignal": true; }; "hoverStateEnabledInput": { "alias": "hoverStateEnabled"; "required": false; "isSignal": true; }; "showClearButtonInput": { "alias": "showClearButton"; "required": false; "isSignal": true; }; "showPasswordToggle": { "alias": "showPasswordToggle"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 /**
@@ -108,30 +161,80 @@ declare class NxeTextBoxComponent extends NxeFormControlBase<string> {
  * {@link NXE_VALIDATION_TARGET}.
  */
 declare class NxeTextAreaComponent extends NxeFormControlBase<string> {
-    readonly placeholderInput: _angular_core.InputSignal<string>;
+    readonly placeholderInput: _angular_core.InputSignal<string | undefined>;
     readonly placeholder: _angular_core.Signal<string>;
     /** Fixed height in px (DevExtreme `[height]`); unset = auto. */
-    readonly heightInput: _angular_core.InputSignal<number>;
+    readonly heightInput: _angular_core.InputSignal<number | undefined>;
     readonly height: _angular_core.Signal<string | number>;
+    /**
+     * dx `maxLength`: the most characters the field takes. Sets the native `maxlength`, so typing
+     * and pasting stop at the limit, and shows a live "12/200" count under the text. Unset (the
+     * default), there is no limit and no counter.
+     */
+    readonly maxLength: _angular_core.InputSignalWithTransform<number | undefined, unknown>;
+    /**
+     * Grow with the text between {@link minRows} and {@link maxRows}, scrolling past the maximum.
+     * The fixed `height` is ignored while this is on. Off by default.
+     */
+    readonly autoGrow: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Rows the field never shrinks below while `autoGrow` is on. */
+    readonly minRows: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Rows after which an auto-growing field scrolls instead of growing; `0` means never. */
+    readonly maxRows: _angular_core.InputSignalWithTransform<number, unknown>;
     readonly focused: _angular_core.WritableSignal<boolean>;
     readonly displayValue: _angular_core.Signal<string>;
+    /** The text in the field right now, typed or not: the counter and the height follow every keystroke. */
+    protected readonly fieldText: _angular_core.WritableSignal<string>;
+    protected readonly remaining: _angular_core.Signal<number>;
+    /** Close enough to the limit to say so: the last 10 characters, or 10% of a long limit. */
+    protected readonly nearLimit: _angular_core.Signal<boolean>;
+    /** Spoken by the polite status; empty (so silent) until {@link nearLimit}. */
+    protected readonly limitStatus: _angular_core.Signal<string>;
+    private readonly growState;
+    constructor();
+    /** dx `valueChangeEvent: 'input'` — the search-as-you-type case. */
+    protected onTypedInput(event: Event): void;
+    /** Size the textarea to its text: collapse it to measure, then clamp to the row limits. */
+    private resize;
+    protected onTypedKeyup(event: Event): void;
+    protected commitPending(event: Event | null): void;
+    /** Enter types a newline here and submits nothing; Ctrl/Cmd+Enter is the submit chord. */
+    protected commitsOnEnter(event: KeyboardEvent): boolean;
     protected onBlur(event: Event): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxeTextAreaComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxeTextAreaComponent, "nxe-text-area", never, { "placeholderInput": { "alias": "placeholder"; "required": false; "isSignal": true; }; "heightInput": { "alias": "height"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxeTextAreaComponent, "nxe-text-area", never, { "placeholderInput": { "alias": "placeholder"; "required": false; "isSignal": true; }; "heightInput": { "alias": "height"; "required": false; "isSignal": true; }; "maxLength": { "alias": "maxLength"; "required": false; "isSignal": true; }; "autoGrow": { "alias": "autoGrow"; "required": false; "isSignal": true; }; "minRows": { "alias": "minRows"; "required": false; "isSignal": true; }; "maxRows": { "alias": "maxRows"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 /**
  * `nxe-check-box` — drop-in replacement for DevExtreme `dx-check-box`.
  *
- * A boolean signal-CVA editor (extends {@link NxeFormControlBase}) — no tri-state, matching all
- * usage. Supports `formControlName`/`[(ngModel)]`/`[(value)]`/`[value]`, `[readOnly]`,
- * `[disabled]`, an inline `text` label, `(onValueChanged)` (`{value}`) and `(valueChange)` (raw
- * boolean). Provides {@link NXE_VALIDATION_TARGET} for a projected `nxe-validator` (a `required`
+ * A signal-CVA editor (extends {@link NxeFormControlBase}) over `true` / `false` / `null`. As in
+ * dx, a `null` value is the indeterminate state: the box shows a 12px square and reports
+ * `aria-checked="mixed"`. That is what a `new FormControl()` (or a `reset()`) looks like, and what
+ * `[value]="null"` looks like; an unbound box starts unchecked, like dx's default `false`. A click
+ * or Space always lands on `true` or `false` — there is no `enableThreeStateBehavior` cycling back
+ * to `null`.
+ *
+ * Supports `formControlName`/`[(ngModel)]`/`[(value)]`/`[value]`, `[readOnly]`, `[disabled]`, an
+ * inline `text` label, `(onValueChanged)` (`{value}`) and `(valueChange)` (raw value). A read-only
+ * box stays focusable (tabindex 0) and still shows hover and focus, as in dx; it just never
+ * toggles. Provides {@link NXE_VALIDATION_TARGET} for a projected `nxe-validator` (a `required`
  * rule is invalid while unchecked, matching DevExtreme's RequiredRule treating `false` as empty).
  */
-declare class NxeCheckBoxComponent extends NxeFormControlBase<boolean> {
+declare class NxeCheckBoxComponent extends NxeFormControlBase<boolean> implements OnChanges {
     /** Inline label rendered next to the box. */
-    readonly text: _angular_core.InputSignal<string>;
+    readonly text: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Whether a value has been handed in at all — by the forms API or a `[value]` binding.
+     *
+     * The base class starts `value` at `null`, which is also the indeterminate value, so `null`
+     * alone cannot tell "given null" from "given nothing". dx can: its unset value is `false`.
+     */
+    private readonly valueProvided;
+    /** dx `.dx-checkbox-indeterminate`: the value was given, and it is `null`. */
+    readonly indeterminate: _angular_core.Signal<boolean>;
+    writeValue(value: boolean | null): void;
+    ngOnChanges(changes: SimpleChanges): void;
     protected toggle(event: Event): void;
     protected onSpace(event: Event): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxeCheckBoxComponent, never>;
@@ -148,21 +251,84 @@ declare class NxeCheckBoxComponent extends NxeFormControlBase<boolean> {
  *
  * Supports `formControlName`/`[(ngModel)]`/`[(value)]`/`[value]`, `[readOnly]`, `[min]`/`[max]`,
  * `format` (string LDML pattern), `(valueChange)` (numeric), and a projected `nxe-validator`.
+ *
+ * Stepping: `step` (default 1) moves the value by exact decimal arithmetic (`0.1` steps never show
+ * `0.30000000000000004`) on ArrowUp/ArrowDown (`largeStep`, default 10 steps, on PageUp/PageDown),
+ * and on the optional spin buttons (`showSpinButtons`; held buttons repeat unless
+ * `[holdToRepeat]="false"`). Results are clamped to `[min, max]` and rounded to the format precision.
+ * The input carries `role="spinbutton"` with `aria-valuenow`/`aria-valuemin`/`aria-valuemax`.
+ *
+ * `currency` (an ISO 4217 code) shows `IDR 1.351.000` / `USD 1,234.50` (separators from
+ * `NXE_NUMBER_SEPARATORS`, so it follows the locale) and takes the currency's minor units as the
+ * precision. An explicit `format` still sets the number pattern; `currencyDecimals` overrides the
+ * minor units (reference data). Focused, the field holds the bare editable number.
+ *
+ * `showClearButton` (dx default `false`) adds dx's clear area after the input while the field
+ * holds text and is neither read-only nor disabled; it sets the value to `null`, as dx's
+ * `clear()` does for a number box, and focuses the input.
  */
 declare class NxeNumberBoxComponent extends NxeFormControlBase<number> {
     /** LDML format pattern (e.g. `#,##0.00`); empty = raw number. */
-    readonly formatInput: _angular_core.InputSignal<string>;
+    readonly formatInput: _angular_core.InputSignal<string | undefined>;
     readonly format: _angular_core.Signal<string>;
-    readonly min: _angular_core.InputSignalWithTransform<number, unknown>;
-    readonly max: _angular_core.InputSignalWithTransform<number, unknown>;
+    readonly min: _angular_core.InputSignalWithTransform<number | undefined, unknown>;
+    readonly max: _angular_core.InputSignalWithTransform<number | undefined, unknown>;
+    /** dx `showClearButton` — off by default, as in dx; `NXE_DEFAULT_OPTIONS.numberBox` can turn it on app-wide. */
+    readonly showClearButtonInput: _angular_core.InputSignalWithTransform<boolean | undefined, unknown>;
+    readonly showClearButton: _angular_core.Signal<boolean>;
+    /** Amount of one step (ArrowUp/ArrowDown, spin buttons). Default 1; zero, negative or invalid means 1. */
+    readonly step: _angular_core.InputSignalWithTransform<number | undefined, unknown>;
+    /** PageUp/PageDown amount. Default 10 steps. */
+    readonly largeStep: _angular_core.InputSignalWithTransform<number | undefined, unknown>;
+    /** Show the increase/decrease buttons after the input. Default off, as in dx. */
+    readonly showSpinButtons: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Keep stepping while a spin button is held down. Default on. */
+    readonly holdToRepeat: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** ISO 4217 code: shows `CODE amount` and takes the currency's minor units as precision. */
+    readonly currency: _angular_core.InputSignal<string | null | undefined>;
+    /** The currency's minor units from reference data; overrides the built-in table. */
+    readonly currencyDecimals: _angular_core.InputSignalWithTransform<number | undefined, unknown>;
     readonly focused: _angular_core.WritableSignal<boolean>;
+    private readonly currencyCode;
+    /** The explicit `format` input only, so a currency does not inherit the app-wide default pattern. */
+    private readonly explicitFormat;
     private readonly parsedFormat;
+    private readonly stepAmount;
+    private readonly largeStepAmount;
+    private readonly fieldRef;
     /** Locale characters, configured once by the application. Defaults to en-US. */
     private readonly separators;
+    /** The blurred, formatted text of the committed value. */
+    private readonly formattedValue;
+    /** `aria-valuetext`: the formatted amount, only when a format or currency makes it differ from the number. */
+    protected readonly valueText: _angular_core.Signal<string | null>;
     readonly displayValue: _angular_core.Signal<string>;
+    /** The text in the field right now; dx shows the clear button by the field's emptiness. */
+    private readonly fieldText;
+    protected readonly clearButtonVisible: _angular_core.Signal<boolean>;
+    protected readonly incrementDisabled: _angular_core.Signal<boolean>;
+    protected readonly decrementDisabled: _angular_core.Signal<boolean>;
+    private spinDelay;
+    private spinTimer;
+    constructor();
+    protected onKeyDownStep(event: KeyboardEvent): void;
+    protected onSpinPointerDown(event: PointerEvent, direction: 1 | -1): void;
+    /** Keyboard and assistive-technology activation (`detail` 0); pointer presses stepped on pointerdown. */
+    protected onSpinClick(event: MouseEvent, direction: 1 | -1): void;
+    protected stopSpin(): void;
+    /** Step the value; returns false when it did not move (a bound, or nothing to do). */
+    private stepBy;
+    protected onFieldInput(event: Event): void;
+    /**
+     * dx `_clearValueHandler`: value to `null`, then focus on the input. The field is emptied by hand
+     * too, for typed-but-uncommitted text over a value that was already `null`.
+     */
+    protected onClear(event: Event): void;
+    protected commitPending(event: Event | null): void;
     protected onBlur(event: Event): void;
+    private commitText;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxeNumberBoxComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxeNumberBoxComponent, "nxe-number-box", never, { "formatInput": { "alias": "format"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxeNumberBoxComponent, "nxe-number-box", never, { "formatInput": { "alias": "format"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "showClearButtonInput": { "alias": "showClearButton"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "largeStep": { "alias": "largeStep"; "required": false; "isSignal": true; }; "showSpinButtons": { "alias": "showSpinButtons"; "required": false; "isSignal": true; }; "holdToRepeat": { "alias": "holdToRepeat"; "required": false; "isSignal": true; }; "currency": { "alias": "currency"; "required": false; "isSignal": true; }; "currencyDecimals": { "alias": "currencyDecimals"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 /** DevExtreme date-box `type`. */
@@ -175,6 +341,15 @@ type NxeDateBoxType = 'date' | 'datetime' | 'time';
  * typeable (parsed on blur per `displayFormat`) and opens a CDK-overlay calendar from the icon
  * button. Built on Luxon. Default `displayFormat` is `dd-MMM-yyyy`. Hosts a projected
  * `nxe-validator` via {@link NXE_VALIDATION_TARGET}.
+ *
+ * `showClearButton` (dx default `false`) adds dx's clear area between the input and the calendar
+ * button while the field holds text and is neither read-only nor disabled; it sets the value to
+ * `null` and focuses the input.
+ *
+ * The button and calendar glyphs are drawn in an 18-unit viewBox (1 unit = 1px) to the ink measured
+ * off dx's `event` (`date`), `eventall` (`datetime`) and `clock` (`time`) glyphs and its chevrons,
+ * each laid out from those metrics in rects, stroked rects and circles, and straight-edged polygons;
+ * the templates state each construction.
  */
 declare class NxeDateBoxComponent extends NxeFormControlBase<string> implements OnDestroy {
     private readonly overlay;
@@ -182,23 +357,31 @@ declare class NxeDateBoxComponent extends NxeFormControlBase<string> implements
     private readonly calendarTemplate;
     private readonly fieldRef;
     readonly type: _angular_core.InputSignal<NxeDateBoxType>;
-    readonly displayFormat: _angular_core.InputSignal<string>;
-    readonly placeholder: _angular_core.InputSignal<string>;
+    readonly displayFormat: _angular_core.InputSignal<string | undefined>;
+    readonly placeholder: _angular_core.InputSignal<string | undefined>;
     /** DevExtreme `[min]`/`[max]` bounds: calendar days outside are disabled, typed values clamp. */
-    readonly min: _angular_core.InputSignal<string | Date>;
-    readonly max: _angular_core.InputSignal<string | Date>;
+    readonly min: _angular_core.InputSignal<string | Date | null>;
+    readonly max: _angular_core.InputSignal<string | Date | null>;
+    /** dx `showClearButton` — off by default, as in dx; `NXE_DEFAULT_OPTIONS.dateBox` can turn it on app-wide. */
+    readonly showClearButtonInput: _angular_core.InputSignalWithTransform<boolean | undefined, unknown>;
+    readonly showClearButton: _angular_core.Signal<boolean>;
     readonly focused: _angular_core.WritableSignal<boolean>;
     readonly opened: _angular_core.WritableSignal<boolean>;
     readonly viewMonth: _angular_core.WritableSignal<DateTime<boolean>>;
     /** Calendar zoom level; caption clicks zoom out, cell picks zoom back in (dx-calendar parity). */
     readonly zoomLevel: _angular_core.WritableSignal<NxeCalendarZoom>;
-    readonly weekdays: readonly ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+    /** Short weekday names for the active locale, Sunday first (the grid below starts on Sunday). */
+    readonly weekdays: _angular_core.Signal<string[]>;
     /** The format actually used, from `displayFormat` or the default for this `type`. */
     readonly effectiveDisplayFormat: _angular_core.Signal<string>;
     /** dx's default placeholder is '', but orbit's global default is the format itself. */
     readonly effectivePlaceholder: _angular_core.Signal<string>;
+    /** The value as a Luxon date in the active locale, so `MMM` and `MMMM` follow the language. */
     private readonly selected;
     readonly displayValue: _angular_core.Signal<string>;
+    /** The text in the field right now; dx shows the clear button by the field's emptiness. */
+    private readonly fieldText;
+    protected readonly clearButtonVisible: _angular_core.Signal<boolean>;
     readonly weeks: _angular_core.Signal<DateTime<boolean>[][]>;
     /** Two-digit hour/minute for the popup's time strip; blank when nothing is selected. */
     readonly hourText: _angular_core.Signal<string>;
@@ -231,6 +414,13 @@ declare class NxeDateBoxComponent extends NxeFormControlBase<string> implements
         disabled: boolean;
     }): void;
     protected onButtonMousedown(event: Event): void;
+    protected onFieldInput(event: Event): void;
+    /**
+     * dx `_clearValueHandler`: value to `null` (dx's `clear()` for a date box), then focus on the
+     * input. `syncField` repaints the field, so typed-but-uncommitted text over a value that was
+     * already `null` goes too.
+     */
+    protected onClear(event: Event): void;
     protected onFocus(event: Event): void;
     /**
      * Commit what the user TYPED — and nothing when they typed nothing.
@@ -247,6 +437,9 @@ declare class NxeDateBoxComponent extends NxeFormControlBase<string> implements
      * re-render on its own and the unparseable text would sit there looking accepted.
      */
     protected onBlur(event: Event): void;
+    /** Enter commits what was typed, before a surrounding form submits; nothing typed means nothing to do. */
+    protected commitPending(event: Event | null): void;
+    private commitTypedText;
     /**
      * Repaint the field from the committed value and re-baseline {@link textAtFocus}.
      *
@@ -269,13 +462,229 @@ declare class NxeDateBoxComponent extends NxeFormControlBase<string> implements
     protected close(): void;
     ngOnDestroy(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxeDateBoxComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxeDateBoxComponent, "nxe-date-box", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "displayFormat": { "alias": "displayFormat"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxeDateBoxComponent, "nxe-date-box", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "displayFormat": { "alias": "displayFormat"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "showClearButtonInput": { "alias": "showClearButton"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/**
+ * The value of `nxe-date-range-box`. Each end is a string in the box's `valueFormat`
+ * (`yyyy-MM-dd` unless stated), or `null` while that end is empty. A box with neither end set holds
+ * `null`, not an object of two nulls, so `Validators.required` means what it says.
+ */
+interface NxeDateRange {
+    start: string | null;
+    end: string | null;
+}
+/** A date a preset may return: a string in any format `nxe-date-box` accepts, a `Date` or a Luxon `DateTime`. */
+type NxeDateRangeBound = string | Date | DateTime;
+/** What a preset's `range` returns. The box serializes it in its own `valueFormat`. */
+interface NxeDateRangeBounds {
+    start: NxeDateRangeBound | null;
+    end: NxeDateRangeBound | null;
+}
+/** One entry of the box's quick-range list. */
+interface NxeDateRangePreset {
+    /** The text of the entry. Wins over `labelKey`. */
+    label?: string;
+    /** A message key for the entry, so the label follows the active language. */
+    labelKey?: NxeMessageKey;
+    /**
+     * The range, computed when the entry is chosen. `now` is the box's clock (see
+     * {@link NXE_DATE_RANGE_NOW}), so a preset needs no clock of its own and a test can fix it.
+     */
+    range(now: DateTime): NxeDateRangeBounds;
+}
+/**
+ * The clock the box reads for "today": the highlighted day, where the popup opens and what the
+ * built-in presets count back from. Provide a fixed one in a test:
+ *
+ * ```ts
+ * { provide: NXE_DATE_RANGE_NOW, useValue: () => DateTime.fromISO('2026-10-07T09:30:00') }
+ * ```
+ */
+declare const NXE_DATE_RANGE_NOW: InjectionToken<() => DateTime>;
+/** Default `displayFormat`: `1 Okt 2026` in Indonesian, `1 Oct 2026` in English. */
+declare const NXE_DATE_RANGE_DISPLAY_FORMAT = "d MMM yyyy";
+/** Default `valueFormat`: date-only. */
+declare const NXE_DATE_RANGE_VALUE_FORMAT = "yyyy-MM-dd";
+/**
+ * The built-in presets. Each call returns a fresh entry whose label comes from the message bundle
+ * and whose range counts from the box's clock. Weeks are not offered: the first day of the week is
+ * a locale question this library does not decide.
+ */
+declare const nxeDateRangePresets: {
+    today: () => NxeDateRangePreset;
+    yesterday: () => NxeDateRangePreset;
+    /** Today and the six days before it. */
+    last7Days: () => NxeDateRangePreset;
+    /** Today and the 29 days before it. */
+    last30Days: () => NxeDateRangePreset;
+    /** The first of the month to its last day (not to today). */
+    thisMonth: () => NxeDateRangePreset;
+    lastMonth: () => NxeDateRangePreset;
+    /** 1 January to 31 December. */
+    thisYear: () => NxeDateRangePreset;
+    /** All seven, in the order above. */
+    all: () => NxeDateRangePreset[];
+};
+
+/** One day in a month grid, with everything the template needs to draw and label it. */
+interface RangeDayCell {
+    readonly date: DateTime;
+    /** `yyyy-MM-dd`: the cell's `data-date`, and a string that sorts as a date does. */
+    readonly key: string;
+    readonly day: number;
+    readonly label: string;
+    readonly disabled: boolean;
+    readonly today: boolean;
+    readonly start: boolean;
+    readonly end: boolean;
+    readonly inRange: boolean;
+    /** Drawn from the hover or keyboard preview, not from the committed value. */
+    readonly preview: boolean;
+    readonly tabbable: boolean;
+}
+interface RangeMonthView {
+    readonly key: string;
+    readonly caption: string;
+    /** Weeks of the month; `null` is a day of a neighbouring month, drawn as a gap. */
+    readonly weeks: readonly (readonly (RangeDayCell | null)[])[];
+}
+interface RangePresetItem {
+    readonly index: number;
+    readonly label: string;
+    readonly active: boolean;
+}
+/**
+ * `nxe-date-range-box` picks a start and an end date in one field.
+ *
+ * ```html
+ * <nxe-form-field label="Tanggal PO">
+ *     <nxe-date-range-box formControlName="poDate" [presets]="presets" min="2020-01-01" />
+ * </nxe-form-field>
+ * ```
+ *
+ * The value is `{ start, end }`, each a string in `valueFormat` (`yyyy-MM-dd` by default; with a time
+ * format the start is the first second of its day and the end the last), `null` while that end is
+ * empty, and `null` as a whole when both are. The field shows `1 Okt 2026 - 31 Okt 2026` and opens
+ * a popup: two months side by side (one under 720px), a quick-range list, and a typed input for each
+ * end. The first click picks the start, the second the end; the days in between preview under the
+ * pointer, and a second click before the first swaps the two.
+ *
+ * Month and weekday names follow the active language of `NxeMessageService`. The field is a
+ * read-only combobox, so a label, `aria-invalid` and `aria-describedby` from `nxe-form-field` reach
+ * it; the popup is a dialog with the days in an ARIA grid (arrows, Home and End by week, PageUp and
+ * PageDown by month, Enter or Space to pick, Esc closes and returns focus to the field).
+ */
+declare class NxeDateRangeBoxComponent extends NxeFormControlBase<NxeDateRange> implements OnDestroy {
+    private readonly overlay;
+    private readonly viewContainerRef;
+    private readonly injector;
+    private readonly clock;
+    private readonly breakpoints;
+    private readonly popupTemplate;
+    private readonly fieldRef;
+    /** How the dates read in the field and in the typed inputs: a Luxon format. */
+    readonly displayFormat: _angular_core.InputSignal<string>;
+    /** How each end is written to the value. Date-only unless it carries time tokens. */
+    readonly valueFormat: _angular_core.InputSignal<string>;
+    /** Days before this are disabled, and a typed or preset date before it moves to it. */
+    readonly min: _angular_core.InputSignal<string | Date | null>;
+    /** Days after this are disabled, and a typed or preset date after it moves to it. */
+    readonly max: _angular_core.InputSignal<string | Date | null>;
+    /** The quick-range list. Empty draws none. See `nxeDateRangePresets` for the built-in ones. */
+    readonly presets: _angular_core.InputSignal<readonly NxeDateRangePreset[]>;
+    /** Shown in the field and the start input while the start is empty. Defaults to the message bundle's. */
+    readonly startPlaceholder: _angular_core.InputSignal<string | undefined>;
+    /** Shown in the field and the end input while the end is empty. Defaults to the message bundle's. */
+    readonly endPlaceholder: _angular_core.InputSignal<string | undefined>;
+    /** The clear area in the field. On by default: a filter is cleared more often than a form field. */
+    readonly showClearButton: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    protected readonly focused: _angular_core.WritableSignal<boolean>;
+    /** Whether the popup is showing. */
+    readonly opened: _angular_core.WritableSignal<boolean>;
+    private readonly uid;
+    protected readonly popupId: string;
+    protected readonly isNarrow: _angular_core.Signal<boolean>;
+    protected readonly monthsShown: _angular_core.Signal<1 | 2>;
+    private readonly locale;
+    private readonly minDate;
+    private readonly maxDate;
+    /** The committed value as days in the active locale. */
+    protected readonly range: _angular_core.Signal<{
+        start: DateTime<boolean> | null;
+        end: DateTime<boolean> | null;
+    }>;
+    protected readonly startText: _angular_core.Signal<string>;
+    protected readonly endText: _angular_core.Signal<string>;
+    protected readonly startHint: _angular_core.Signal<string>;
+    protected readonly endHint: _angular_core.Signal<string>;
+    /** `1 Okt 2026 - 31 Okt 2026`; an empty end leaves the dash hanging so a half-set range reads as one. */
+    protected readonly displayValue: _angular_core.Signal<string>;
+    protected readonly fieldPlaceholder: _angular_core.Signal<string>;
+    protected readonly clearButtonVisible: _angular_core.Signal<boolean>;
+    /** The first click of a range in progress; null when none is. */
+    protected readonly draftStart: _angular_core.WritableSignal<DateTime<boolean> | null>;
+    /** The day under the pointer or the keyboard while a range is in progress. */
+    protected readonly hovered: _angular_core.WritableSignal<DateTime<boolean> | null>;
+    /** The day the grid's single tab stop is on. */
+    private readonly activeDate;
+    /** The first month shown. */
+    protected readonly viewMonth: _angular_core.WritableSignal<DateTime<boolean>>;
+    protected readonly weekdays: _angular_core.Signal<{
+        short: string;
+        long: string;
+    }[]>;
+    private readonly presetResults;
+    protected readonly presetItems: _angular_core.Signal<RangePresetItem[]>;
+    /** The key of the grid's tab stop: the active day while it is on screen, else the first day shown. */
+    private readonly tabKey;
+    protected readonly months: _angular_core.Signal<RangeMonthView[]>;
+    protected readonly canGoBack: _angular_core.Signal<boolean>;
+    protected readonly canGoForward: _angular_core.Signal<boolean>;
+    /** The line under the grid, read out as it changes. */
+    protected readonly status: _angular_core.Signal<string>;
+    private overlayRef?;
+    private closeSub?;
+    private flipSub?;
+    protected onFieldClick(): void;
+    protected onFieldKeydown(event: KeyboardEvent): void;
+    protected onFocus(): void;
+    protected onBlur(): void;
+    protected onClearClick(event: Event): void;
+    /** Empties the range. The value becomes `null`. */
+    protected clear(event: Event | null): void;
+    protected pick(cell: RangeDayCell, event: Event): void;
+    protected onDayEnter(cell: RangeDayCell): void;
+    protected onDayFocus(cell: RangeDayCell): void;
+    /** The pointer left the grids: the preview falls back to the keyboard's day. */
+    protected onGridLeave(): void;
+    protected onDayKeydown(event: KeyboardEvent, cell: RangeDayCell): void;
+    private moveTo;
+    private ensureVisible;
+    private focusDay;
+    protected navigate(delta: number): void;
+    protected applyPreset(item: RangePresetItem, event: Event): void;
+    /** Commit the text typed into one end. Empty clears that end; unreadable text is put back. */
+    protected commitTyped(which: 'start' | 'end', event: Event): void;
+    protected onTypedKeydown(which: 'start' | 'end', event: KeyboardEvent): void;
+    protected onClearInPopup(event: Event): void;
+    private toDay;
+    private clampDay;
+    private serialize;
+    private commitRange;
+    /** Opens the popup on the start of the range (or today). No-op while open, disabled or read-only. */
+    open(): void;
+    /** Closes the popup, dropping a range that was only half picked. `restoreFocus` returns focus to the field. */
+    close(restoreFocus?: boolean): void;
+    ngOnDestroy(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxeDateRangeBoxComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxeDateRangeBoxComponent, "nxe-date-range-box", never, { "displayFormat": { "alias": "displayFormat"; "required": false; "isSignal": true; }; "valueFormat": { "alias": "valueFormat"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "presets": { "alias": "presets"; "required": false; "isSignal": true; }; "startPlaceholder": { "alias": "startPlaceholder"; "required": false; "isSignal": true; }; "endPlaceholder": { "alias": "endPlaceholder"; "required": false; "isSignal": true; }; "showClearButton": { "alias": "showClearButton"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 /**
  * `nxe-scroll-view` — drop-in replacement for DevExtreme `dx-scroll-view`.
  *
- * In this app `dx-scroll-view` is used purely as a dumb scroll container: no `@ViewChild`, no
+ * In this app `nxe-scroll-view` is used purely as a dumb scroll container: no `@ViewChild`, no
  * `.instance` methods, no events (see survey). Every live tag is the same literal triple
  * `[scrollByContent]="true" [scrollByThumb]="true" [showScrollbar]="'onScroll'"`. So this is a
  * styled `overflow:auto` wrapper that projects its content inside a `.nxe-scrollview-content`
@@ -292,5 +701,325 @@ declare class NxeScrollViewComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxeScrollViewComponent, "nxe-scroll-view", never, { "scrollByContent": { "alias": "scrollByContent"; "required": false; "isSignal": true; }; "scrollByThumb": { "alias": "scrollByThumb"; "required": false; "isSignal": true; }; "showScrollbar": { "alias": "showScrollbar"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
-export { NxeButtonComponent, NxeCheckBoxComponent, NxeDateBoxComponent, NxeNumberBoxComponent, NxeScrollViewComponent, NxeTextAreaComponent, NxeTextBoxComponent };
-export type { NxeButtonClickEvent, NxeButtonType, NxeButtonValidationGroup, NxeDateBoxType, NxeTextBoxMode };
+/**
+ * One validation message: a fixed string, or a function of the validator's error value (the
+ * object Angular puts under the validator key in `control.errors`, e.g. `{ requiredLength: 3,
+ * actualLength: 1 }` for `minlength`).
+ */
+type NxeErrorMessage = string | ((error: any) => string);
+/** Validator key (`required`, `minlength`, ...) to the message shown for it. */
+type NxeErrorMessages = Readonly<Record<string, NxeErrorMessage>>;
+/** Key used when a failing validator has no entry and carries no message of its own. */
+declare const NXE_FALLBACK_ERROR_KEY = "invalid";
+/** English defaults for Angular's built-in validators. */
+declare const NXE_DEFAULT_ERROR_MESSAGES: NxeErrorMessages;
+/**
+ * Validator-key to message map read by `nxe-form-field`.
+ *
+ * Provide a plain object to replace it; keys you leave out fall back to
+ * {@link NXE_DEFAULT_ERROR_MESSAGES}, so a partial map is fine. {@link provideNxeErrorMessages} is
+ * the short way to write the provider. A custom validator is covered by adding its key:
+ * `{ uen: 'Enter a valid UEN.' }`.
+ */
+declare const NXE_ERROR_MESSAGES: InjectionToken<Readonly<Record<string, NxeErrorMessage>>>;
+/**
+ * Registers messages for `nxe-form-field`, layered over the English defaults:
+ *
+ * ```ts
+ * provideNxeErrorMessages({
+ *     required: 'Wajib diisi.',
+ *     minlength: (e) => `Minimal ${e.requiredLength} karakter.`,
+ * })
+ * ```
+ */
+declare function provideNxeErrorMessages(messages: NxeErrorMessages): EnvironmentProviders;
+
+/**
+ * `nxe-form-field` wraps one `nxe-*` editor that is bound to a form control (`formControlName`,
+ * `[formControl]` or `ngModel`) and gives it the chrome a form needs:
+ *
+ *  - a `label`, associated with the editor's inner control (`for` = the editor's `inputId`);
+ *  - a required marker, from `Validators.required` on the control or the `required` input;
+ *  - a `hint`, replaced by the error while one shows;
+ *  - the message for the FIRST failing validator once the control is touched or its form submitted
+ *    (`submitted` forces it), looked up in {@link NXE_ERROR_MESSAGES};
+ *  - `serverErrors` / `serverError` from an API response, shown regardless of touched.
+ *
+ * It sets `aria-invalid`, `aria-required` and `aria-describedby` on the editor's focusable element
+ * and the editor host's `nxe-invalid` class, so the border, badge and colour come from the same
+ * `--nxe-ui-invalid*` tokens as an editor invalidated by `nxe-validator`.
+ *
+ * Reactivity is the control's own `events` stream (value, status, touched, submit, reset) feeding
+ * signals; the DOM sync runs through `afterRenderEffect`, which names the one computed it reads.
+ */
+declare class NxeFormFieldComponent implements AfterContentInit {
+    private readonly destroyRef;
+    private readonly tokenMessages;
+    private readonly messageService;
+    /** The enclosing form, when there is one: a template-driven control joins it a tick late. */
+    private readonly container;
+    /** Caption above the editor. */
+    readonly label: _angular_core.InputSignal<string | undefined>;
+    /** Help text under the editor; hidden while an error is showing. */
+    readonly hint: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Force the required marker on or off. Unset, it follows `Validators.required` (and
+     * `requiredTrue`) on the control. Needed for a rule the control does not declare as a validator.
+     */
+    readonly required: _angular_core.InputSignalWithTransform<boolean | undefined, unknown>;
+    /**
+     * API field errors, shown whether or not the control was touched. A string or a list of them;
+     * the app clears them (set `null`) when the user edits the field or resubmits.
+     */
+    readonly serverErrors: _angular_core.InputSignal<string | readonly string[] | null | undefined>;
+    /** Singular spelling of {@link serverErrors}; both may be set, their messages are joined. */
+    readonly serverError: _angular_core.InputSignal<string | readonly string[] | null | undefined>;
+    /**
+     * Show client-side errors now (`true`) or never (`false`). Unset, they show once the control is
+     * touched or the surrounding form was submitted.
+     */
+    readonly submitted: _angular_core.InputSignalWithTransform<boolean | undefined, unknown>;
+    /** Messages for this field only, by validator key; override {@link NXE_ERROR_MESSAGES}. */
+    readonly errorMessages: _angular_core.InputSignal<Readonly<Record<string, NxeErrorMessage>> | undefined>;
+    private readonly ngControl;
+    private readonly ngControlHost;
+    /**
+     * Set when the projected editor carries Angular's Signal Forms `[formField]`. That directive
+     * provides a stand-in `NgControl` with no `events` stream, so the field then reads the field
+     * state's signals instead of subscribing to a control.
+     */
+    private readonly formField;
+    private readonly formFieldHost;
+    private readonly editorHost;
+    private readonly fieldState;
+    /** Only read in dev mode, to catch a second editor the field would silently not bind. */
+    private readonly allControls;
+    private readonly touched;
+    private readonly controlErrors;
+    private readonly validatorRequired;
+    private readonly formSubmitted;
+    private readonly editor;
+    private readonly uid;
+    protected readonly labelId: string;
+    protected readonly hintId: string;
+    protected readonly errorId: string;
+    /** The id the label points at: the editor's inner control. Null for a non-nxe editor. */
+    protected readonly controlId: _angular_core.Signal<string | null>;
+    protected readonly isRequired: _angular_core.Signal<boolean>;
+    private readonly reveal;
+    private readonly clientMessage;
+    /** Everything shown under the editor as an error: the client message, then the server's. */
+    protected readonly messages: _angular_core.Signal<readonly string[]>;
+    readonly invalid: _angular_core.Signal<boolean>;
+    protected readonly showHint: _angular_core.Signal<boolean>;
+    private readonly domState;
+    /** Attributes this field put on the editor's element, so it only ever removes its own. */
+    private applied;
+    private invalidClassHost;
+    constructor();
+    ngAfterContentInit(): void;
+    private syncFromControl;
+    /**
+     * Message for one failing validator: this field's `errorMessages`, then an entry the app put in
+     * the {@link NXE_ERROR_MESSAGES} token, then the active `NxeMessageService` bundle (English
+     * unless the app switched language), then a string the validator itself returned
+     * (`{ uen: 'Not a valid UEN' }` or `{ uen: { message } }`), then the generic fallback.
+     *
+     * A token entry that IS the built-in default (the same reference, which is what
+     * `provideNxeErrorMessages` leaves for the keys it was not given) counts as unset, so it does
+     * not pin English over the bundle. Called from the `clientMessage` computed, so a language
+     * switch re-renders the error.
+     */
+    private resolve;
+    /**
+     * Message for a Signal Forms error `{ kind, message? }`. The kind is mapped to the validator keys
+     * above (`minLength` to `minlength`, `maxLength` to `maxlength`; `required`, `min`, `max`, `pattern`
+     * and `email` as they are). Lookup order: this field's `errorMessages`, an app token entry, the
+     * error's own `message`, the library bundle, then the fallback (`invalid`). So a rule written
+     * with a message (`required(p.name, { message: '...' })`) shows it, and a custom kind does too.
+     */
+    private resolveSignalError;
+    private explicitToken;
+    /** The library bundle's wording for Angular's built-in validators. */
+    private bundled;
+    /** The element a screen reader should treat as the field: the inner control, not the host. */
+    private focusable;
+    private setAttr;
+    private syncDom;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxeFormFieldComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxeFormFieldComponent, "nxe-form-field", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "serverErrors": { "alias": "serverErrors"; "required": false; "isSignal": true; }; "serverError": { "alias": "serverError"; "required": false; "isSignal": true; }; "submitted": { "alias": "submitted"; "required": false; "isSignal": true; }; "errorMessages": { "alias": "errorMessages"; "required": false; "isSignal": true; }; }, {}, ["ngControl", "ngControlHost", "formField", "formFieldHost", "allControls"], ["*"], true, never>;
+}
+
+/** What an `nxeRadioItem` template receives for each item. */
+interface NxeRadioItemContext<T = unknown> {
+    /** The item, also available as `let-item`. */
+    $implicit: T;
+    item: T;
+    index: number;
+    selected: boolean;
+    disabled: boolean;
+}
+/**
+ * Marks the `<ng-template>` that renders one radio's content in `nxe-radio-group`, in place of the
+ * `displayExpr` text:
+ *
+ * ```html
+ * <nxe-radio-group [items]="plans" valueExpr="id">
+ *     <ng-template nxeRadioItem let-plan let-selected="selected">
+ *         <strong>{{ plan.name }}</strong> <small>{{ plan.price }}</small>
+ *     </ng-template>
+ * </nxe-radio-group>
+ * ```
+ *
+ * The radio's accessible name is the template's text, so keep it to text and inline markup.
+ */
+declare class NxeRadioItemDirective {
+    /** The template to render for each item. */
+    readonly template: TemplateRef<NxeRadioItemContext<unknown>>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxeRadioItemDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NxeRadioItemDirective, "ng-template[nxeRadioItem]", never, {}, {}, never, never, true, never>;
+}
+
+/** How the radios are laid out. */
+type NxeRadioGroupLayout = 'horizontal' | 'vertical';
+/** One radio, resolved from an item. */
+interface RadioEntry {
+    readonly item: unknown;
+    readonly index: number;
+    readonly id: string;
+    readonly value: unknown;
+    readonly text: string;
+    readonly disabled: boolean;
+}
+/**
+ * `nxe-radio-group`: single choice among a few options, as the WAI-ARIA radio group pattern.
+ *
+ * A signal-CVA editor (extends {@link NxeFormControlBase}) working with `[(value)]`, `[(ngModel)]`
+ * and Reactive Forms. The options are `items`; `displayExpr` says what each shows (default: the
+ * item itself, for a list of strings), `valueExpr` what it puts in the control (default: the item
+ * itself) and `disabledExpr` (default `'disabled'`) which are not selectable. An
+ * `<ng-template nxeRadioItem>` replaces the text with your own content.
+ *
+ * Keyboard: the group is one tab stop, on the selected radio (or the first enabled one). Arrow keys
+ * move to the next or previous enabled radio, wrap around, and select it; Space selects the focused
+ * one. Left and Right are swapped in right-to-left text. A read-only group moves focus but never
+ * changes the value.
+ *
+ * The inner `role="radiogroup"` element carries the `inputId`, `aria-label` and `aria-labelledby`,
+ * so an `nxe-form-field` label names the group and its `aria-invalid` / `aria-describedby` land on
+ * it. Provides {@link NXE_VALIDATION_TARGET} for a projected `nxe-validator`.
+ */
+declare class NxeRadioGroupComponent extends NxeFormControlBase<unknown> {
+    /** The options. */
+    readonly items: _angular_core.InputSignal<readonly unknown[]>;
+    /** Text of an item; unset, the item itself. */
+    readonly displayExpr: _angular_core.InputSignal<NxeExpr>;
+    /** The value an item stands for; unset, the item itself. */
+    readonly valueExpr: _angular_core.InputSignal<NxeExpr>;
+    /** Truthy for an item that cannot be chosen. */
+    readonly disabledExpr: _angular_core.InputSignal<NxeExpr>;
+    /** `vertical` stacks the radios, `horizontal` puts them in a row that wraps. */
+    readonly layout: _angular_core.InputSignal<NxeRadioGroupLayout>;
+    /** Custom radio content. */
+    readonly itemTemplate: _angular_core.Signal<NxeRadioItemDirective | undefined>;
+    protected readonly entries: _angular_core.Signal<readonly RadioEntry[]>;
+    /** Index of the checked radio, or -1. */
+    protected readonly selectedIndex: _angular_core.Signal<number>;
+    /** The one radio in the tab order: the checked one when it can be reached, else the first enabled. */
+    protected readonly tabbableIndex: _angular_core.Signal<number>;
+    protected onItemClick(index: number, event: Event): void;
+    protected onItemKeydown(index: number, event: KeyboardEvent): void;
+    /** Leaving the group, not moving between its radios, is what touches the control. */
+    protected onGroupFocusOut(event: FocusEvent): void;
+    /** Focus (and, unless read-only, select) the next enabled radio in `step` direction, wrapping. */
+    private move;
+    private select;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxeRadioGroupComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxeRadioGroupComponent, "nxe-radio-group", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "displayExpr": { "alias": "displayExpr"; "required": false; "isSignal": true; }; "valueExpr": { "alias": "valueExpr"; "required": false; "isSignal": true; }; "disabledExpr": { "alias": "disabledExpr"; "required": false; "isSignal": true; }; "layout": { "alias": "layout"; "required": false; "isSignal": true; }; }, {}, ["itemTemplate"], ["*"], true, never>;
+}
+
+/** Switch size; `medium` is the default. */
+type NxeSwitchSize = 'small' | 'medium' | 'large';
+/**
+ * `nxe-switch`: an on/off setting that takes effect as soon as it is flipped.
+ *
+ * A signal-CVA editor (extends {@link NxeFormControlBase}) over `boolean`; `null` and unset read as
+ * off. Works with `[(value)]`, `[(ngModel)]` and Reactive Forms. The host is the control:
+ * `role="switch"`, `aria-checked`, one tab stop; click and Space toggle it. A read-only switch is
+ * focusable but never flips; a disabled one leaves the tab order and dims.
+ *
+ * `text` is the label beside the track and names the switch (inside an `nxe-form-field` the field's
+ * label does instead). `onText` and `offText` are optional words drawn inside the track; they are
+ * decoration, hidden from assistive tech, because `aria-checked` already says which state it is in.
+ */
+declare class NxeSwitchComponent extends NxeFormControlBase<boolean> {
+    /** Label beside the track. */
+    readonly text: _angular_core.InputSignal<string | undefined>;
+    /** Word shown inside the track while on. */
+    readonly onText: _angular_core.InputSignal<string | undefined>;
+    /** Word shown inside the track while off. */
+    readonly offText: _angular_core.InputSignal<string | undefined>;
+    /** Track size. */
+    readonly size: _angular_core.InputSignal<NxeSwitchSize>;
+    readonly checked: _angular_core.Signal<boolean>;
+    protected toggle(event: Event): void;
+    protected onSpace(event: Event): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxeSwitchComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxeSwitchComponent, "nxe-switch", never, { "text": { "alias": "text"; "required": false; "isSignal": true; }; "onText": { "alias": "onText"; "required": false; "isSignal": true; }; "offText": { "alias": "offText"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/** Which characters a code may hold. */
+type NxeOtpMode = 'numeric' | 'alphanumeric';
+/**
+ * `nxe-otp-box`: a one-time code (2FA sign-in, e-mail verification, recovery code) drawn as one
+ * cell per character.
+ *
+ * It is ONE control, not N: a single transparent `<input>` lies over the cells and they only draw
+ * its text. That is what keeps a screen reader on one named field with one value, gives native
+ * paste, and lets the browser fill the whole code at once from an SMS or password manager
+ * (`autocomplete="one-time-code"`). Typing fills the next cell, Backspace empties the last one, and
+ * the caret is kept at the end, so the arrow keys do nothing. Pasting a code of `length` characters
+ * (or more) replaces the value, with separators such as a dash or space dropped; a shorter paste is
+ * appended.
+ *
+ * A signal-CVA over `string` (extends {@link NxeFormControlBase}); the value follows every
+ * keystroke, so a `minLength` validator sees a partial code and `completed` fires once with the full
+ * code. Name it with `aria-label`, `aria-labelledby` or an `nxe-form-field` label.
+ */
+declare class NxeOtpBoxComponent extends NxeFormControlBase<string> {
+    /** Number of characters in the code. */
+    readonly length: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** `numeric` (default) takes digits and opens the numeric keypad; `alphanumeric` takes letters and digits. */
+    readonly mode: _angular_core.InputSignal<NxeOtpMode>;
+    /** Focus the field when it first renders. */
+    readonly autoFocus: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** The full code, once, when the last cell is filled (typed, pasted or auto-filled). */
+    readonly completed: _angular_core.OutputEmitterRef<string>;
+    readonly focused: _angular_core.WritableSignal<boolean>;
+    private readonly field;
+    protected readonly displayValue: _angular_core.Signal<string>;
+    protected readonly cells: _angular_core.Signal<{
+        index: number;
+        char: string;
+        active: boolean;
+    }[]>;
+    constructor();
+    /** Drop what the mode does not allow and cut to `length`. */
+    private clean;
+    /** Typing, deleting and autofill: the field's text is the new value. */
+    protected handleInput(event: Event): void;
+    /** A whole code replaces the value; a fragment is appended. */
+    protected onPaste(event: ClipboardEvent): void;
+    /** Keys that would move the caret off the end do nothing: the cells have no caret to move. */
+    protected onKeydown(event: KeyboardEvent): void;
+    protected onFocus(): void;
+    protected onBlur(): void;
+    /** A click or a drag could put the caret mid-code or select it; it always belongs at the end. */
+    protected keepCaretAtEnd(): void;
+    private apply;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxeOtpBoxComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxeOtpBoxComponent, "nxe-otp-box", never, { "length": { "alias": "length"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "autoFocus": { "alias": "autoFocus"; "required": false; "isSignal": true; }; }, { "completed": "completed"; }, never, ["*"], true, never>;
+}
+
+export { NXE_DATE_RANGE_DISPLAY_FORMAT, NXE_DATE_RANGE_NOW, NXE_DATE_RANGE_VALUE_FORMAT, NXE_DEFAULT_ERROR_MESSAGES, NXE_ERROR_MESSAGES, NXE_FALLBACK_ERROR_KEY, NxeButtonComponent, NxeCheckBoxComponent, NxeDateBoxComponent, NxeDateRangeBoxComponent, NxeFormFieldComponent, NxeNumberBoxComponent, NxeOtpBoxComponent, NxeRadioGroupComponent, NxeRadioItemDirective, NxeScrollViewComponent, NxeSwitchComponent, NxeTextAreaComponent, NxeTextBoxComponent, nxeDateRangePresets, provideNxeErrorMessages };
+export type { NxeButtonClickEvent, NxeButtonSize, NxeButtonStylingMode, NxeButtonType, NxeButtonValidationGroup, NxeDateBoxType, NxeDateRange, NxeDateRangeBound, NxeDateRangeBounds, NxeDateRangePreset, NxeErrorMessage, NxeErrorMessages, NxeOtpMode, NxeRadioGroupLayout, NxeRadioItemContext, NxeSwitchSize, NxeTextBoxMode };