@nexterajs/ui 0.0.1 → 0.0.2

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

@@ -1,6 +1,6 @@
 import * as _angular_core from '@angular/core';
 import { OnDestroy, TemplateRef, InjectionToken, OnInit } from '@angular/core';
-import { NxeFormControlBase } from '@nexterajs/ui/core';
+import { NxeFormControlBase, NxeExpr } from '@nexterajs/ui/core';
 import { Subject } from 'rxjs';
 
 /** DevExtreme-shaped selection-changed payload (handlers read `selectedItem`). */
@@ -14,10 +14,11 @@ interface NxeSelectionChangedEvent {
  *
  * A signal-CVA single-select dropdown over a plain array (`[dataSource]`). It bakes in the app's
  * global `dxSelectBox.defaultOptions` (`displayExpr='lovName'`, `valueExpr='lovCode'`,
- * `searchEnabled`, `showClearButton`), so the bound control value is the `valueExpr` field
- * (a string code) and the field shows the `displayExpr` field. Dropdown is a CDK overlay with
- * an in-field search filter. Emits `(valueChange)` (the code) and `(onSelectionChanged)`
- * (`{selectedItem}`). Hosts a projected `nxe-validator` via {@link NXE_VALIDATION_TARGET}.
+ * `searchEnabled`), so the bound control value is the `valueExpr` field (a string code) and the
+ * field shows the `displayExpr` field. The clear button follows dx and is off unless asked for.
+ * Dropdown is a CDK overlay with an in-field search filter. Emits `(valueChange)` (the code) and
+ * `(onSelectionChanged)` (`{selectedItem}`). Hosts a projected `nxe-validator` via
+ * {@link NXE_VALIDATION_TARGET}.
  */
 declare class NxeSelectBoxComponent extends NxeFormControlBase<unknown> implements OnDestroy {
     private readonly overlay;
@@ -28,17 +29,28 @@ declare class NxeSelectBoxComponent extends NxeFormControlBase<unknown> implemen
     /** The source array (plain JS array of `Lov`-shaped objects, or primitives). */
     readonly dataSource: _angular_core.InputSignal<readonly unknown[]>;
     /** Field shown in the box/list (DevExtreme default `lovName`). Empty => the item itself. */
-    readonly displayExprInput: _angular_core.InputSignal<string>;
-    readonly displayExpr: _angular_core.Signal<string>;
+    readonly displayExprInput: _angular_core.InputSignal<NxeExpr>;
+    readonly displayExpr: _angular_core.Signal<NxeExpr>;
     /** Field bound as the control value (DevExtreme default `lovCode`). Empty => the whole item. */
-    readonly valueExprInput: _angular_core.InputSignal<string>;
-    readonly valueExpr: _angular_core.Signal<string>;
+    readonly valueExprInput: _angular_core.InputSignal<NxeExpr>;
+    readonly valueExpr: _angular_core.Signal<NxeExpr>;
     /** Field matched while searching (DevExtreme default `lovName`). */
-    readonly searchExprInput: _angular_core.InputSignal<string>;
-    readonly searchExpr: _angular_core.Signal<string>;
+    readonly searchExprInput: _angular_core.InputSignal<NxeExpr>;
+    /**
+     * dx searches by `displayExpr` when `searchExpr` is not given. Defaulting to the literal
+     * 'lovName' instead meant that any picker with a custom displayExpr searched a field its
+     * items do not have, and found nothing - silently, because an empty result looks like no
+     * match. Where displayExpr is the default this resolves to 'lovName' exactly as before.
+     */
+    readonly searchExpr: _angular_core.Signal<NxeExpr>;
     readonly searchEnabledInput: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly searchEnabled: _angular_core.Signal<boolean>;
     readonly showClearButtonInput: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * dx defaults `showClearButton` to false (m_text_editor.base.js). The library used to default it
+     * on, which gave every host that never asked for one a clear button dx would not show. An app
+     * that wants it everywhere says so once through `NXE_DEFAULT_OPTIONS.selectBox.showClearButton`.
+     */
     readonly showClearButton: _angular_core.Signal<boolean>;
     /** dx parity: dx-select-box shows its drop-down arrow unless showDropDownButton=false. */
     readonly showDropDownButtonInput: _angular_core.InputSignalWithTransform<boolean, unknown>;
@@ -95,8 +107,10 @@ declare class NxeSelectBoxComponent extends NxeFormControlBase<unknown> implemen
  * `nxe-tag-box` — drop-in replacement for DevExtreme `dx-tag-box` (multi-select sibling of
  * `nxe-select-box`). The bound value is an **array of `valueExpr` keys** (`lovCode` strings).
  * Bakes in the app's global `dxTagBox.defaultOptions` (display/search `lovName`, value `lovCode`,
- * search + clear + selection-controls on). Selected items render as removable chips; the dropdown
- * shows a checkbox per row. Provides {@link NXE_VALIDATION_TARGET} for a projected `nxe-validator`.
+ * search + selection-controls on); the clear button follows dx and is off unless asked for.
+ * Selected items render as removable chips; with selection controls the dropdown shows a checkbox
+ * per row under a tri-state "Select All". Provides {@link NXE_VALIDATION_TARGET} for a projected
+ * `nxe-validator`.
  */
 declare class NxeTagBoxComponent extends NxeFormControlBase<unknown[]> implements OnDestroy {
     private readonly overlay;
@@ -104,16 +118,37 @@ declare class NxeTagBoxComponent extends NxeFormControlBase<unknown[]> implement
     private readonly dropdownTemplate;
     private readonly inputEl;
     readonly dataSource: _angular_core.InputSignal<readonly unknown[]>;
-    readonly displayExprInput: _angular_core.InputSignal<string>;
-    readonly displayExpr: _angular_core.Signal<string>;
-    readonly valueExprInput: _angular_core.InputSignal<string>;
-    readonly valueExpr: _angular_core.Signal<string>;
-    readonly searchExprInput: _angular_core.InputSignal<string>;
-    readonly searchExpr: _angular_core.Signal<string>;
+    readonly displayExprInput: _angular_core.InputSignal<NxeExpr>;
+    readonly displayExpr: _angular_core.Signal<NxeExpr>;
+    readonly valueExprInput: _angular_core.InputSignal<NxeExpr>;
+    readonly valueExpr: _angular_core.Signal<NxeExpr>;
+    readonly searchExprInput: _angular_core.InputSignal<NxeExpr>;
+    /**
+     * dx searches by `displayExpr` when `searchExpr` is not given. Defaulting to the literal
+     * 'lovName' instead meant that any picker with a custom displayExpr searched a field its
+     * items do not have, and found nothing - silently, because an empty result looks like no
+     * match. Where displayExpr is the default this resolves to 'lovName' exactly as before.
+     */
+    readonly searchExpr: _angular_core.Signal<NxeExpr>;
     readonly searchEnabledInput: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly searchEnabled: _angular_core.Signal<boolean>;
     readonly showClearButtonInput: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * dx defaults `showClearButton` to false (m_text_editor.base.js). The library used to default it
+     * on, which gave every host that never asked for one a clear button dx would not show. An app
+     * that wants it everywhere says so once through `NXE_DEFAULT_OPTIONS.tagBox.showClearButton`.
+     */
     readonly showClearButton: _angular_core.Signal<boolean>;
+    readonly showSelectionControlsInput: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * dx `showSelectionControls`. On (the literal, and what every consumer site passes): a checkbox
+     * per row and a tri-state "Select All" row — dx switches its list to `selectionMode: 'all'`
+     * (m_tag_box.js `_listConfig`). Off: plain rows whose fill marks the selection
+     * (`selectionMode: 'multiple'`).
+     */
+    readonly showSelectionControls: _angular_core.Signal<boolean>;
+    /** dx `selectAllText` — the label of the "Select All" row (dx: `dxList-selectAll`). */
+    readonly selectAllText: _angular_core.InputSignal<string>;
     /** dx parity: dx-tag-box does NOT show a drop-down arrow unless showDropDownButton is set. */
     readonly showDropDownButtonInput: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly showDropDownButton: _angular_core.Signal<boolean>;
@@ -136,10 +171,21 @@ declare class NxeTagBoxComponent extends NxeFormControlBase<unknown[]> implement
     protected readonly hasValue: _angular_core.Signal<boolean>;
     protected readonly filteredItems: _angular_core.Signal<readonly unknown[]>;
     protected isSelected(item: unknown): boolean;
+    /**
+     * The "Select All" checkbox value over the rows currently listed — dx `selectAllMode: 'page'`,
+     * so a search narrows what it counts: `true` when every listed row is selected, `false` when
+     * none is, and `undefined` (indeterminate) in between.
+     */
+    protected readonly selectAllState: _angular_core.Signal<boolean>;
     protected onFieldMousedown(event: MouseEvent): void;
     protected onSearchInput(event: Event): void;
     protected onBlur(): void;
     protected toggle(item: unknown, event: Event): void;
+    /**
+     * dx `_selectAllHandler`: anything short of all-selected selects every listed row (keeping
+     * selections the search hides); all-selected deselects the listed rows only.
+     */
+    protected toggleAll(event: Event): void;
     protected removeTag(item: unknown, event: Event): void;
     protected onClear(event: Event): void;
     protected onKeydown(event: KeyboardEvent): void;
@@ -147,7 +193,7 @@ declare class NxeTagBoxComponent extends NxeFormControlBase<unknown[]> implement
     private close;
     ngOnDestroy(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxeTagBoxComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxeTagBoxComponent, "nxe-tag-box", never, { "dataSource": { "alias": "dataSource"; "required": false; "isSignal": true; }; "displayExprInput": { "alias": "displayExpr"; "required": false; "isSignal": true; }; "valueExprInput": { "alias": "valueExpr"; "required": false; "isSignal": true; }; "searchExprInput": { "alias": "searchExpr"; "required": false; "isSignal": true; }; "searchEnabledInput": { "alias": "searchEnabled"; "required": false; "isSignal": true; }; "showClearButtonInput": { "alias": "showClearButton"; "required": false; "isSignal": true; }; "showDropDownButtonInput": { "alias": "showDropDownButton"; "required": false; "isSignal": true; }; "placeholderInput": { "alias": "placeholder"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxeTagBoxComponent, "nxe-tag-box", never, { "dataSource": { "alias": "dataSource"; "required": false; "isSignal": true; }; "displayExprInput": { "alias": "displayExpr"; "required": false; "isSignal": true; }; "valueExprInput": { "alias": "valueExpr"; "required": false; "isSignal": true; }; "searchExprInput": { "alias": "searchExpr"; "required": false; "isSignal": true; }; "searchEnabledInput": { "alias": "searchEnabled"; "required": false; "isSignal": true; }; "showClearButtonInput": { "alias": "showClearButton"; "required": false; "isSignal": true; }; "showSelectionControlsInput": { "alias": "showSelectionControls"; "required": false; "isSignal": true; }; "selectAllText": { "alias": "selectAllText"; "required": false; "isSignal": true; }; "showDropDownButtonInput": { "alias": "showDropDownButton"; "required": false; "isSignal": true; }; "placeholderInput": { "alias": "placeholder"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 /**
@@ -183,10 +229,10 @@ declare class NxeDropDownBoxComponent extends NxeFormControlBase<unknown> implem
     private readonly options;
     readonly dataSource: _angular_core.InputSignal<readonly unknown[]>;
     /** Field name shown in the closed box; empty => the raw value string. */
-    readonly displayExprInput: _angular_core.InputSignal<string>;
-    readonly displayExpr: _angular_core.Signal<string>;
-    readonly valueExprInput: _angular_core.InputSignal<string>;
-    readonly valueExpr: _angular_core.Signal<string>;
+    readonly displayExprInput: _angular_core.InputSignal<NxeExpr>;
+    readonly displayExpr: _angular_core.Signal<NxeExpr>;
+    readonly valueExprInput: _angular_core.InputSignal<NxeExpr>;
+    readonly valueExpr: _angular_core.Signal<NxeExpr>;
     readonly placeholderInput: _angular_core.InputSignal<string>;
     readonly placeholder: _angular_core.Signal<string>;
     /** DevExtreme `[dropDownOptions]` — accepted for parity (popup-class hook). */
@@ -260,6 +306,13 @@ declare class NxeListComponent {
         id?: string;
         class?: string;
     }>;
+    /**
+     * dx `keyExpr` — the field identifying an item. Used for `@for` tracking, so a list whose
+     * items are replaced by equal-but-not-identical objects keeps its DOM instead of rebuilding
+     * every row. Falls back to the index when unset, which is the previous behaviour.
+     */
+    readonly keyExpr: _angular_core.InputSignal<string>;
+    protected trackItem(item: unknown, index: number): unknown;
     readonly onItemClick: _angular_core.OutputEmitterRef<NxeListItemClickEvent>;
     protected readonly items: _angular_core.Signal<readonly unknown[]>;
     protected readonly itemTemplateRef: _angular_core.Signal<_angular_core.TemplateRef<unknown>>;
@@ -268,7 +321,72 @@ declare class NxeListComponent {
     protected isDisabled(item: unknown): boolean;
     protected select(item: unknown): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxeListComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxeListComponent, "nxe-list", never, { "dataSource": { "alias": "dataSource"; "required": false; "isSignal": true; }; "itemTemplate": { "alias": "itemTemplate"; "required": false; "isSignal": true; }; "elementAttr": { "alias": "elementAttr"; "required": false; "isSignal": true; }; }, { "onItemClick": "onItemClick"; }, ["templates"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxeListComponent, "nxe-list", never, { "dataSource": { "alias": "dataSource"; "required": false; "isSignal": true; }; "itemTemplate": { "alias": "itemTemplate"; "required": false; "isSignal": true; }; "elementAttr": { "alias": "elementAttr"; "required": false; "isSignal": true; }; "keyExpr": { "alias": "keyExpr"; "required": false; "isSignal": true; }; }, { "onItemClick": "onItemClick"; }, ["templates"], never, true, never>;
+}
+
+/** How a typed query is matched against `searchExpr` (dx `searchMode`). */
+type NxeAutoCompleteSearchMode = 'contains' | 'startswith' | 'equals';
+/** DevExtreme-shaped selection payload, emitted when a suggestion is picked. */
+interface NxeAutoCompleteSelectionChangedEvent {
+    selectedItem: unknown;
+    value: string | null;
+}
+/**
+ * `nxe-auto-complete` — drop-in replacement for DevExtreme `dx-autocomplete`.
+ *
+ * The distinction from `nxe-select-box` is the value contract, and it is the whole reason this
+ * is a separate component: here the control value is the TEXT the user typed. A suggestion is a
+ * shortcut for typing, not a constraint on what may be entered, so free text survives and
+ * `valueExpr` only says which field of a picked item becomes that text.
+ *
+ * Deliberately not merged into the existing Material-shaped `nxe-autocomplete`: that one takes
+ * projected `nxe-option` children rather than a `[dataSource]`, so the two have incompatible
+ * content models and merging them would make every future change to one a risk to the other.
+ */
+declare class NxeAutoCompleteComponent extends NxeFormControlBase<string> implements OnDestroy {
+    private readonly overlay;
+    private readonly viewContainerRef;
+    private readonly dropdownTemplate;
+    private readonly inputEl;
+    readonly dataSource: _angular_core.InputSignal<readonly unknown[]>;
+    /** Field of a picked item that becomes the value (dx default `lovName`). */
+    readonly valueExpr: _angular_core.InputSignal<NxeExpr>;
+    /** Field matched against the query; defaults to {@link valueExpr}, as dx does. */
+    readonly searchExprInput: _angular_core.InputSignal<NxeExpr>;
+    readonly searchExpr: _angular_core.Signal<NxeExpr>;
+    readonly searchMode: _angular_core.InputSignal<NxeAutoCompleteSearchMode>;
+    /** Characters required before suggestions appear. dx defaults to 1; 0 shows all on focus. */
+    readonly minSearchLength: _angular_core.InputSignal<number>;
+    /** dx caps the suggestion list; beyond this the user is expected to keep typing. */
+    readonly maxItemCount: _angular_core.InputSignal<number>;
+    readonly placeholder: _angular_core.InputSignal<string>;
+    readonly showClearButton: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly onSelectionChanged: _angular_core.OutputEmitterRef<NxeAutoCompleteSelectionChangedEvent>;
+    readonly focused: _angular_core.WritableSignal<boolean>;
+    readonly open: _angular_core.WritableSignal<boolean>;
+    readonly activeIndex: _angular_core.WritableSignal<number>;
+    readonly panelWidth: _angular_core.WritableSignal<number>;
+    /** dx `.instance` facade — `focus()` is what the autofocus directive calls. */
+    get instance(): this;
+    private overlayRef?;
+    private closeSub?;
+    private flipSub?;
+    protected readonly text: _angular_core.Signal<string>;
+    protected itemText(item: unknown): string;
+    private searchText;
+    protected readonly suggestions: _angular_core.Signal<unknown[]>;
+    protected onFieldInput(event: Event): void;
+    protected onFocus(): void;
+    protected onBlur(): void;
+    protected pick(item: unknown, event: Event): void;
+    protected onKeydown(event: KeyboardEvent): void;
+    protected onClear(event: Event): void;
+    focus(): void;
+    private openPanel;
+    private closePanel;
+    ngOnDestroy(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxeAutoCompleteComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxeAutoCompleteComponent, "nxe-auto-complete", never, { "dataSource": { "alias": "dataSource"; "required": false; "isSignal": true; }; "valueExpr": { "alias": "valueExpr"; "required": false; "isSignal": true; }; "searchExprInput": { "alias": "searchExpr"; "required": false; "isSignal": true; }; "searchMode": { "alias": "searchMode"; "required": false; "isSignal": true; }; "minSearchLength": { "alias": "minSearchLength"; "required": false; "isSignal": true; }; "maxItemCount": { "alias": "maxItemCount"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "showClearButton": { "alias": "showClearButton"; "required": false; "isSignal": true; }; }, { "onSelectionChanged": "onSelectionChanged"; }, never, ["*"], true, never>;
 }
 
 /** What an `nxe-option` needs from its parent autocomplete: a way to request close on select. */
@@ -330,5 +448,5 @@ declare class NxeOptionComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxeOptionComponent, "nxe-option", ["nxeOption"], {}, {}, never, ["*"], true, never>;
 }
 
-export { NXE_AUTOCOMPLETE, NxeAutocompleteComponent, NxeAutocompleteTriggerDirective, NxeDropDownBoxComponent, NxeDropDownOptionsComponent, NxeListComponent, NxeOptionComponent, NxeSelectBoxComponent, NxeTagBoxComponent };
-export type { NxeAutocompletePanel, NxeListItemClickEvent, NxeSelectionChangedEvent };
+export { NXE_AUTOCOMPLETE, NxeAutoCompleteComponent, NxeAutocompleteComponent, NxeAutocompleteTriggerDirective, NxeDropDownBoxComponent, NxeDropDownOptionsComponent, NxeListComponent, NxeOptionComponent, NxeSelectBoxComponent, NxeTagBoxComponent };
+export type { NxeAutoCompleteSearchMode, NxeAutoCompleteSelectionChangedEvent, NxeAutocompletePanel, NxeListItemClickEvent, NxeSelectionChangedEvent };

package/types/nexterajs-ui-file-uploader.d.ts

@@ -13,11 +13,14 @@ import { NxeValidationTarget } from '@nexterajs/ui/core';
  * `required` rule works — invalid while no file is chosen.
  */
 declare class NxeFileUploaderComponent implements NxeValidationTarget {
+    /** Shows the per-file cancel button — except in `useForm` mode, where dx never renders one
+     *  (m_file_uploader.js `_getCancelButton` returns null for useForm before it reads this). */
     readonly allowCanceling: _angular_core.InputSignal<boolean>;
     readonly accept: _angular_core.InputSignal<string>;
     readonly labelText: _angular_core.InputSignal<string>;
     readonly selectButtonText: _angular_core.InputSignal<string>;
-    /** Accepted for parity; only `useForm` is used (no server upload by the widget). */
+    /** Accepted for parity; only `useForm` is used (no server upload by the widget). It also
+     *  gates the cancel button, which dx omits in `useForm` mode. */
     readonly uploadMode: _angular_core.InputSignal<"instantly" | "useButtons" | "useForm">;
     readonly multiple: _angular_core.InputSignal<boolean>;
     readonly name: _angular_core.InputSignal<string>;

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

@@ -1,5 +1,5 @@
 import * as _angular_core from '@angular/core';
-import { OnDestroy } from '@angular/core';
+import { OnChanges, SimpleChanges, OnDestroy } from '@angular/core';
 import { NxeValidationResult, NxeFormControlBase } from '@nexterajs/ui/core';
 import { DateTime } from 'luxon';
 import { NxeCalendarZoom, NxePeriodCell } from '@nexterajs/ui/intl';
@@ -30,21 +30,22 @@ 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.
  *
  * `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). */
+    /** Legacy `text` label (rendered as `.nxe-button-text` when set, no projected content). */
     readonly text: _angular_core.InputSignal<string>;
     /** Style intent (`default`=blue, `success`=green, `danger`=red, `normal`=white). */
     readonly type: _angular_core.InputSignal<NxeButtonType>;
@@ -55,8 +56,8 @@ 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>;
@@ -83,6 +84,10 @@ 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.
  */
@@ -93,11 +98,30 @@ declare class NxeTextBoxComponent extends NxeFormControlBase<string> {
     /** DevExtreme parity input; cosmetic, unused in behaviour. */
     readonly hoverStateEnabledInput: _angular_core.InputSignalWithTransform<boolean, 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, unknown>;
+    readonly showClearButton: _angular_core.Signal<boolean>;
     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 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; }; }, {}, never, ["*"], true, never>;
 }
 
 /**
@@ -115,6 +139,9 @@ declare class NxeTextAreaComponent extends NxeFormControlBase<string> {
     readonly height: _angular_core.Signal<string | number>;
     readonly focused: _angular_core.WritableSignal<boolean>;
     readonly displayValue: _angular_core.Signal<string>;
+    /** dx `valueChangeEvent: 'input'` — the search-as-you-type case. */
+    protected onTypedInput(event: Event): void;
+    protected onTypedKeyup(event: Event): void;
     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>;
@@ -123,15 +150,33 @@ declare class NxeTextAreaComponent extends NxeFormControlBase<string> {
 /**
  * `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>;
+    /**
+     * 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,6 +193,10 @@ 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`.
+ *
+ * `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. */
@@ -155,14 +204,27 @@ declare class NxeNumberBoxComponent extends NxeFormControlBase<number> {
     readonly format: _angular_core.Signal<string>;
     readonly min: _angular_core.InputSignalWithTransform<number, unknown>;
     readonly max: _angular_core.InputSignalWithTransform<number, 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, unknown>;
+    readonly showClearButton: _angular_core.Signal<boolean>;
     readonly focused: _angular_core.WritableSignal<boolean>;
     private readonly parsedFormat;
+    private readonly fieldRef;
     /** Locale characters, configured once by the application. Defaults to en-US. */
     private readonly separators;
     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 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 onBlur(event: Event): void;
     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; }; }, {}, never, ["*"], true, never>;
 }
 
 /** DevExtreme date-box `type`. */
@@ -175,6 +237,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;
@@ -187,6 +258,9 @@ declare class NxeDateBoxComponent extends NxeFormControlBase<string> implements
     /** 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>;
+    /** dx `showClearButton` — off by default, as in dx; `NXE_DEFAULT_OPTIONS.dateBox` can turn it on app-wide. */
+    readonly showClearButtonInput: _angular_core.InputSignalWithTransform<boolean, 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>>;
@@ -199,6 +273,9 @@ declare class NxeDateBoxComponent extends NxeFormControlBase<string> implements
     readonly effectivePlaceholder: _angular_core.Signal<string>;
     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 +308,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.
@@ -269,13 +353,13 @@ 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>;
 }
 
 /**
  * `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`