@nexterajs/ui 0.0.1 → 0.0.2

package/styles/_toast.scss

@@ -0,0 +1,243 @@
+// @nexterajs/ui — NxeToastService chrome.
+//
+// A value-for-value port of ngx-toastr's `toastr.css`, which this replaces. Every number, colour
+// and easing here is copied deliberately rather than chosen: applications were pinned to that
+// rendering, and "close enough" on a toast is a visible regression nothing tests.
+//
+// Load this where `ngx-toastr/toastr.css` used to sit in the cascade — BEFORE the application's
+// own overrides — or a rule like `width: 350px` on a position class stops winning.
+
+/* position */
+.nxe-toast-center-center {
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.toast-top-center {
+    top: 0;
+    right: 0;
+    width: 100%;
+}
+
+.toast-bottom-center {
+    bottom: 0;
+    right: 0;
+    width: 100%;
+}
+
+.toast-top-full-width {
+    top: 0;
+    right: 0;
+    width: 100%;
+}
+
+.toast-bottom-full-width {
+    bottom: 0;
+    right: 0;
+    width: 100%;
+}
+
+.toast-top-left {
+    top: 12px;
+    left: 12px;
+}
+
+.toast-top-right {
+    top: 12px;
+    right: 12px;
+}
+
+.toast-bottom-right {
+    right: 12px;
+    bottom: 12px;
+}
+
+.toast-bottom-left {
+    bottom: 12px;
+    left: 12px;
+}
+
+/* toast styles */
+.nxe-toast-title {
+    font-weight: bold;
+}
+
+.nxe-toast-message {
+    word-wrap: break-word;
+}
+
+.nxe-toast-message a,
+.nxe-toast-message label {
+    color: #ffffff;
+}
+
+.nxe-toast-message a:hover {
+    color: #cccccc;
+    text-decoration: none;
+}
+
+.nxe-toast-close {
+    position: relative;
+    right: -0.3em;
+    top: -0.3em;
+    float: right;
+    font-size: 20px;
+    font-weight: bold;
+    color: #ffffff;
+    text-shadow: 0 1px 0 #ffffff;
+}
+
+.nxe-toast-close:hover,
+.nxe-toast-close:focus {
+    color: #000000;
+    text-decoration: none;
+    cursor: pointer;
+    opacity: 0.4;
+}
+
+button.nxe-toast-close {
+    padding: 0;
+    cursor: pointer;
+    background: transparent;
+    border: 0;
+}
+
+.nxe-toast-container {
+    pointer-events: none;
+    position: fixed;
+    z-index: 999999;
+}
+
+.nxe-toast-container * {
+    box-sizing: border-box;
+}
+
+.nxe-toast-container .nxe-toast {
+    position: relative;
+    overflow: hidden;
+    margin: 0 0 6px;
+    padding: 15px 15px 15px 50px;
+    width: 300px;
+    border-radius: 3px 3px 3px 3px;
+    background-position: 15px center;
+    background-repeat: no-repeat;
+    background-size: 24px;
+    box-shadow: 0 0 12px #999999;
+    color: #ffffff;
+}
+
+.nxe-toast-container .nxe-toast:hover {
+    box-shadow: 0 0 12px #000000;
+    opacity: 1;
+    cursor: pointer;
+}
+
+/* The four icons, as shipped: Font Awesome info-circle, times-circle, check and
+   exclamation-triangle, inlined so the toast needs no icon font and no network request. */
+.nxe-toast-info {
+    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA1MTIgNTEyJyB3aWR0aD0nNTEyJyBoZWlnaHQ9JzUxMic+PHBhdGggZmlsbD0ncmdiKDI1NSwyNTUsMjU1KScgZD0nTTI1NiA4QzExOS4wNDMgOCA4IDExOS4wODMgOCAyNTZjMCAxMzYuOTk3IDExMS4wNDMgMjQ4IDI0OCAyNDhzMjQ4LTExMS4wMDMgMjQ4LTI0OEM1MDQgMTE5LjA4MyAzOTIuOTU3IDggMjU2IDh6bTAgMTEwYzIzLjE5NiAwIDQyIDE4LjgwNCA0MiA0MnMtMTguODA0IDQyLTQyIDQyLTQyLTE4LjgwNC00Mi00MiAxOC44MDQtNDIgNDItNDJ6bTU2IDI1NGMwIDYuNjI3LTUuMzczIDEyLTEyIDEyaC04OGMtNi42MjcgMC0xMi01LjM3My0xMi0xMnYtMjRjMC02LjYyNyA1LjM3My0xMiAxMi0xMmgxMnYtNjRoLTEyYy02LjYyNyAwLTEyLTUuMzczLTEyLTEydi0yNGMwLTYuNjI3IDUuMzczLTEyIDEyLTEyaDY0YzYuNjI3IDAgMTIgNS4zNzMgMTIgMTJ2MTAwaDEyYzYuNjI3IDAgMTIgNS4zNzMgMTIgMTJ2MjR6Jy8+PC9zdmc+");
+}
+
+.nxe-toast-error {
+    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA1MTIgNTEyJyB3aWR0aD0nNTEyJyBoZWlnaHQ9JzUxMic+PHBhdGggZmlsbD0ncmdiKDI1NSwyNTUsMjU1KScgZD0nTTI1NiA4QzExOSA4IDggMTE5IDggMjU2czExMSAyNDggMjQ4IDI0OCAyNDgtMTExIDI0OC0yNDhTMzkzIDggMjU2IDh6bTEyMS42IDMxMy4xYzQuNyA0LjcgNC43IDEyLjMgMCAxN0wzMzggMzc3LjZjLTQuNyA0LjctMTIuMyA0LjctMTcgMEwyNTYgMzEybC02NS4xIDY1LjZjLTQuNyA0LjctMTIuMyA0LjctMTcgMEwxMzQuNCAzMzhjLTQuNy00LjctNC43LTEyLjMgMC0xN2w2NS42LTY1LTY1LjYtNjUuMWMtNC43LTQuNy00LjctMTIuMyAwLTE3bDM5LjYtMzkuNmM0LjctNC43IDEyLjMtNC43IDE3IDBsNjUgNjUuNyA2NS4xLTY1LjZjNC43LTQuNyAxMi4zLTQuNyAxNyAwbDM5LjYgMzkuNmM0LjcgNC43IDQuNyAxMi4zIDAgMTdMMzEyIDI1Nmw2NS42IDY1LjF6Jy8+PC9zdmc+");
+}
+
+.nxe-toast-success {
+    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA1MTIgNTEyJyB3aWR0aD0nNTEyJyBoZWlnaHQ9JzUxMic+PHBhdGggZmlsbD0ncmdiKDI1NSwyNTUsMjU1KScgZD0nTTE3My44OTggNDM5LjQwNGwtMTY2LjQtMTY2LjRjLTkuOTk3LTkuOTk3LTkuOTk3LTI2LjIwNiAwLTM2LjIwNGwzNi4yMDMtMzYuMjA0YzkuOTk3LTkuOTk4IDI2LjIwNy05Ljk5OCAzNi4yMDQgMEwxOTIgMzEyLjY5IDQzMi4wOTUgNzIuNTk2YzkuOTk3LTkuOTk3IDI2LjIwNy05Ljk5NyAzNi4yMDQgMGwzNi4yMDMgMzYuMjA0YzkuOTk3IDkuOTk3IDkuOTk3IDI2LjIwNiAwIDM2LjIwNGwtMjk0LjQgMjk0LjQwMWMtOS45OTggOS45OTctMjYuMjA3IDkuOTk3LTM2LjIwNC0uMDAxeicvPjwvc3ZnPg==");
+}
+
+.nxe-toast-warning {
+    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA1NzYgNTEyJyB3aWR0aD0nNTc2JyBoZWlnaHQ9JzUxMic+PHBhdGggZmlsbD0ncmdiKDI1NSwyNTUsMjU1KScgZD0nTTU2OS41MTcgNDQwLjAxM0M1ODcuOTc1IDQ3Mi4wMDcgNTY0LjgwNiA1MTIgNTI3Ljk0IDUxMkg0OC4wNTRjLTM2LjkzNyAwLTU5Ljk5OS00MC4wNTUtNDEuNTc3LTcxLjk4N0wyNDYuNDIzIDIzLjk4NWMxOC40NjctMzIuMDA5IDY0LjcyLTMxLjk1MSA4My4xNTQgMGwyMzkuOTQgNDE2LjAyOHpNMjg4IDM1NGMtMjUuNDA1IDAtNDYgMjAuNTk1LTQ2IDQ2czIwLjU5NSA0NiA0NiA0NiA0Ni0yMC41OTUgNDYtNDYtMjAuNTk1LTQ2LTQ2LTQ2em0tNDMuNjczLTE2NS4zNDZsNy40MTggMTM2Yy4zNDcgNi4zNjQgNS42MDkgMTEuMzQ2IDExLjk4MiAxMS4zNDZoNDguNTQ2YzYuMzczIDAgMTEuNjM1LTQuOTgyIDExLjk4Mi0xMS4zNDZsNy40MTgtMTM2Yy4zNzUtNi44NzQtNS4wOTgtMTIuNjU0LTExLjk4Mi0xMi42NTRoLTYzLjM4M2MtNi44ODQgMC0xMi4zNTYgNS43OC0xMS45ODEgMTIuNjU0eicvPjwvc3ZnPg==");
+}
+
+.nxe-toast-container.toast-top-center .nxe-toast,
+.nxe-toast-container.toast-bottom-center .nxe-toast {
+    width: 300px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.nxe-toast-container.toast-top-full-width .nxe-toast,
+.nxe-toast-container.toast-bottom-full-width .nxe-toast {
+    width: 96%;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.nxe-toast {
+    // Required for parity, not a change to it. The original toast was a <div>; this one is a
+    // custom element, and an unknown element is `display: inline` by default — which would make
+    // the `width`, `padding` and `margin` above do nothing at all, silently.
+    display: block;
+
+    background-color: #030303;
+    pointer-events: auto;
+
+    // ngx-toastr animated between `inactive`/`active`/`removed` states that differ only in
+    // opacity, over 300ms ease-in. No movement — matching that exactly, not improving on it.
+    opacity: 1;
+    transition: opacity 300ms ease-in;
+}
+
+.nxe-toast-entering,
+.nxe-toast-leaving {
+    opacity: 0;
+}
+
+.nxe-toast-success {
+    background-color: #51a351;
+}
+
+.nxe-toast-error {
+    background-color: #bd362f;
+}
+
+.nxe-toast-info {
+    background-color: #2f96b4;
+}
+
+.nxe-toast-warning {
+    background-color: #f89406;
+}
+
+.nxe-toast-progress {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    height: 4px;
+    background-color: #000000;
+    opacity: 0.4;
+}
+
+/* Responsive Design */
+@media all and (max-width: 240px) {
+    .nxe-toast-container .nxe-toast.div {
+        padding: 8px 8px 8px 50px;
+        width: 11em;
+    }
+
+    .nxe-toast-container .nxe-toast-close {
+        right: -0.2em;
+        top: -0.2em;
+    }
+}
+
+@media all and (min-width: 241px) and (max-width: 480px) {
+    .nxe-toast-container .nxe-toast.div {
+        padding: 8px 8px 8px 50px;
+        width: 18em;
+    }
+
+    .nxe-toast-container .nxe-toast-close {
+        right: -0.2em;
+        top: -0.2em;
+    }
+}
+
+@media all and (min-width: 481px) and (max-width: 768px) {
+    .nxe-toast-container .nxe-toast.div {
+        padding: 15px 15px 15px 50px;
+        width: 25em;
+    }
+}

package/styles/_tokens.scss

@@ -66,6 +66,54 @@
     // carried the dx-era `.dx-overlay-content { min-width: 400px !important }` here until
     // 2026-07-29 and dropped it — see nxe-ui/DEFAULTS.md.
     --nxe-ui-overlay-min-width: 0px;
+    // Header-filter popup floor. The popup is dx's own 252x325; broker's global
+    // `.dx-overlay-content{min-width:400px}` made it 400px wide in the dx era, which an app can
+    // restore here without widening every dropdown panel.
+    --nxe-ui-header-filter-min-width: 0px;
+    // Field-chooser popup floor. dx's own field chooser popup has no 400px floor; broker's global
+    // `.dx-overlay-content{min-width:400px}` made it 400px wide in the dx era, which an app can
+    // restore here without widening every dropdown panel.
+    --nxe-ui-fieldchooser-min-width: 0px;
+
+    // Check box hover border - dx `.dx-checkbox.dx-state-hover .dx-checkbox-icon{border-color:#265a87}`.
+    --nxe-ui-checkbox-hover-border: #265a87;
+
+    // Gap between a button's projected children. dx `.dx-button-content` has none; an app whose
+    // icon + text buttons relied on the library's former 4px can set it back.
+    --nxe-ui-button-gap: 0px;
+
+    // Data grid empty state — dx `.dx-datagrid-rowsview.dx-empty{height:100px}` and
+    // `.dx-datagrid-nodata{font-size:17px}`.
+    --nxe-ui-grid-empty-height: 100px;
+    --nxe-ui-grid-nodata-font-size: 17px;
+
+    // Data grid and tree list lines - dx.light's values. Whether a grid draws them is per grid
+    // ([showRowLines], [showColumnLines], [showBorders], [rowAlternationEnabled]) or app-wide
+    // (NXE_DEFAULT_OPTIONS.dataGrid / .treeList); these set how they look. Override them at :root
+    // for the whole app, or on one grid, e.g.
+    //   nxe-data-grid.quotes { --nxe-ui-grid-column-line-color: #e2e8f0; }
+    // The grid's rules outweigh dx-compat's #ddd copies, so an override holds on selected, edited
+    // and group rows too. Literals, not var(--nxe-ui-border): a var() here resolves at :root, and a
+    // subtree override of --nxe-ui-border would never reach them.
+    --nxe-ui-grid-line-width: 1px; //          every grid line and the showBorders box
+    --nxe-ui-grid-row-line-color: #ddd; //     `.dx-row-lines>td{border-bottom}`, group rows and footers
+    --nxe-ui-grid-column-line-color: #ddd; //  `.dx-column-lines>td{border-left;border-right}`
+    --nxe-ui-grid-border-color: #ddd; //       showBorders: `.dx-datagrid-borders>.dx-datagrid-rowsview`,
+    //                                         and the pager's top line (`.dx-pager{border-top}`), which
+    //                                         lies on the box's bottom edge in a bordered grid
+    --nxe-ui-grid-header-line-color: #ddd; //  `.dx-datagrid-headers .dx-datagrid-table .dx-row>td`
+    --nxe-ui-grid-alt-row-bg: #f5f5f5; //      rowAlternationEnabled: `.dx-row-alt>td`
+
+    // Data grid group rows and expand cells - dx.light's values.
+    //   group-row-color: `.dx-datagrid-rowsview .dx-row.dx-group-row:not(.dx-row-focused){color:#222}`
+    //   summary-color:   `.dx-datagrid-summary-item{color:rgba(51,51,51,.7)}` (aligned group sums)
+    //   expand-offset:   `.dx-command-expand.dx-datagrid-group-space{padding-top:7px}` - how far down
+    //                    the cell the 18px group / master-detail toggle starts. dx leaves it about
+    //                    3.3px below the row's middle; an app that wants it centred sets
+    //                    (row height - 18px) / 2 here.
+    --nxe-ui-grid-group-row-color: #222;
+    --nxe-ui-grid-summary-color: rgba(51, 51, 51, 0.7);
+    --nxe-ui-grid-expand-offset: 7px;
 
     // foreground.divider — slate.200
     --nxe-divider-color: #e2e8f0;

package/styles/index.scss

@@ -10,6 +10,7 @@
 @use 'editor';
 @use 'dropdown';
 @use 'button-directives';
+@use 'icons';
 
 // The widget base (font family/size/weight/line-height). Must come before the component chrome
 // below so those can override it, and it is what carries the contract across a CDK portal.
@@ -23,6 +24,9 @@
 // Shared select-family dropdown panel (select-box, tag-box).
 @include dropdown.nxe-dropdown;
 
+// The `<i class="nxe-icon nxe-icon-NAME">` glyph layer (nxe-button's `icon`).
+@include icons.nxe-icons;
+
 // Pointer-drag chrome for NxeDragGesture, shared by the data grid's column/group drags and the
 // pivot's field-panel/chooser chip drags. Global because a page can render a pivot and NO data
 // grid (an ANALYTIC report is exactly that), and component styles only ship while an instance of

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

@@ -22,6 +22,17 @@ interface NxeValueChangedEvent<T> {
     /** The component host element (DevExtreme `element`). */
     element: HTMLElement;
 }
+/** Which native event an editor is re-emitting in dx's shape. */
+type NxeEditorEventKind = 'keydown' | 'keyup' | 'input' | 'change' | 'focusin' | 'focusout';
+/**
+ * dx's payload for the keyboard, focus and input events: the native event plus the widget and
+ * its host element, which is what handlers written against DevExtreme expect to receive.
+ */
+interface NxeEditorEvent {
+    event: Event;
+    component: unknown;
+    element: HTMLElement;
+}
 
 /** A single failed validation rule. */
 interface NxeBrokenRule {
@@ -47,35 +58,40 @@ interface NxeValidationTarget {
     getValue(): unknown;
     validationGroup(): string | undefined;
     setValidationError(message: string | null): void;
+    /**
+     * Tell the editor whether a `required` rule applies, so it can render `aria-required`.
+     * Optional: a target predating this simply does not advertise the requirement.
+     */
+    setRequired?(required: boolean): void;
 }
 /** DI token the editor provides so its nested `nxe-validator` can adapt it. */
 declare const NXE_VALIDATION_TARGET: InjectionToken<NxeValidationTarget>;
 /** A member registered in a validation group (an `nxe-validator`). */
 interface NxeValidationGroupMember {
     validate(): NxeValidationResult;
+    /** Clear the member's error state without validating. Optional for older members. */
+    reset?(): void;
 }
-
 /**
- * Signal-based `ControlValueAccessor` base for every nxe form editor
- * (`nxe-text-box`, `nxe-number-box`, `nxe-date-box`, `nxe-check-box`, `nxe-text-area`,
- * `nxe-select-box`, `nxe-tag-box`, `nxe-radio`, ...).
+ * An `nxe-validation-group` ancestor, exposed so a validator or a button inside it can join it
+ * without naming a group.
  *
- * It supports BOTH template-driven (`[(ngModel)]`) and reactive (`formControlName`) forms
- * transparently, as well as DevExtreme-style `[value]` / `[(value)]` two-way binding, and
- * emits the DevExtreme-shaped {@link NxeValueChangedEvent} from `onValueChanged`.
- *
- * Concrete components MUST register themselves as the value accessor, e.g.:
- * ```ts
- * @Component({
- *   selector: 'nxe-text-box',
- *   providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NxeTextBoxComponent), multi: true }],
- *   ...
- * })
- * export class NxeTextBoxComponent extends NxeFormControlBase<string> { ... }
- * ```
- *
- * Subclasses call {@link commitValue} on user interaction and {@link markAsTouched} on blur.
+ * DevExtreme lets a group be addressed two ways: by a string name shared between a validator and
+ * a button, or structurally by wrapping both in a `dxValidationGroup`. The string form is what
+ * the consuming applications use; this token is the structural one, and an explicit string
+ * always wins over it, as in dx.
  */
+interface NxeValidationGroupScope {
+    /** Opaque, unique per instance — never collides with an application's own group names. */
+    readonly groupKey: string;
+}
+declare const NXE_VALIDATION_GROUP: InjectionToken<NxeValidationGroupScope>;
+/** DevExtreme-shaped `onValidated` payload. */
+interface NxeValidatedEvent extends NxeValidationResult {
+    value: unknown;
+    validationGroup: string;
+}
+
 declare abstract class NxeFormControlBase<T> implements ControlValueAccessor, NxeValidationTarget {
     protected readonly elementRef: ElementRef<HTMLElement>;
     /**
@@ -99,6 +115,35 @@ declare abstract class NxeFormControlBase<T> implements ControlValueAccessor, Nx
     readonly readOnly: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** Validation group this editor belongs to (its nested `nxe-validator` registers here). */
     readonly validationGroupInput: _angular_core.InputSignal<string>;
+    /**
+     * `id` for the INNER control, not the host.
+     *
+     * A caption written as `<label for="x">` has to reach the focusable element, and the host of
+     * a custom element is not it. Without this an editor cannot be labelled at all, which is why
+     * `aria-label` sits beside it: one of the two has to be available.
+     */
+    readonly inputId: _angular_core.InputSignal<string>;
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    readonly ariaLabelledBy: _angular_core.InputSignal<string>;
+    /** Stable per instance, so the inner control always has an id something can point at. */
+    private readonly fallbackId;
+    readonly controlId: _angular_core.Signal<string>;
+    /**
+     * Ids for a popup listbox and its options.
+     *
+     * `aria-activedescendant` is how a combobox says which option is current while focus stays in
+     * the text field, and it can only point at an id — so the options need stable ones.
+     */
+    panelId(): string;
+    optionId(index: number): string;
+    /**
+     * Whether a nested validator carries a `required` rule.
+     *
+     * Set by the validator rather than declared on the editor: the rule is where the requirement
+     * is actually stated, and duplicating it as an input would let the two disagree.
+     */
+    readonly required: _angular_core.WritableSignal<boolean>;
+    setRequired(value: boolean): void;
     /** The current validation error message (set by a nested `nxe-validator`), or null. */
     readonly validationError: _angular_core.WritableSignal<string>;
     /** Whether the control has been blurred at least once. */
@@ -107,6 +152,39 @@ declare abstract class NxeFormControlBase<T> implements ControlValueAccessor, Nx
     readonly dirty: _angular_core.WritableSignal<boolean>;
     /** DevExtreme-compatible value-change event. */
     readonly onValueChanged: _angular_core.OutputEmitterRef<NxeValueChangedEvent<T>>;
+    /**
+     * dx's keyboard, focus and input events.
+     *
+     * Native events already reach the host, so these are not about capability — they are about
+     * the call site. A migrated `(onEnterKey)` handler should keep working without being
+     * rewritten as a `(keydown)` with a key check, and `onEnterKey` in particular has no native
+     * equivalent at all.
+     */
+    readonly onKeyDown: _angular_core.OutputEmitterRef<NxeEditorEvent>;
+    readonly onKeyUp: _angular_core.OutputEmitterRef<NxeEditorEvent>;
+    readonly onEnterKey: _angular_core.OutputEmitterRef<NxeEditorEvent>;
+    readonly onInput: _angular_core.OutputEmitterRef<NxeEditorEvent>;
+    readonly onChange: _angular_core.OutputEmitterRef<NxeEditorEvent>;
+    readonly onFocusIn: _angular_core.OutputEmitterRef<NxeEditorEvent>;
+    readonly onFocusOut: _angular_core.OutputEmitterRef<NxeEditorEvent>;
+    /**
+     * When a typed value is committed: dx's `'change'` (on blur), `'input'` (per keystroke) or
+     * `'keyup'`.
+     *
+     * Honoured by the text editors. The number and date boxes stay on `'change'` whatever this
+     * says, because their displayed text is derived from the parsed value: committing mid-entry
+     * would rewrite the field while the user is still typing into it.
+     */
+    readonly valueChangeEvent: _angular_core.InputSignal<"keyup" | "input" | "change">;
+    /** dx universal widget options. */
+    readonly hint: _angular_core.InputSignal<string>;
+    readonly width: _angular_core.InputSignal<string | number>;
+    readonly visible: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly tabIndex: _angular_core.InputSignal<number>;
+    readonly elementAttr: _angular_core.InputSignal<Record<string, string>>;
+    protected readonly widthStyle: _angular_core.Signal<string>;
+    protected readonly elementAttrClass: _angular_core.Signal<string>;
+    protected readonly elementAttrId: _angular_core.Signal<string>;
     private _onChange;
     private _onTouched;
     /** Host element (the DevExtreme event payload `element`). */
@@ -124,10 +202,24 @@ declare abstract class NxeFormControlBase<T> implements ControlValueAccessor, Nx
      * DevExtreme-shaped `onValueChanged`. No-op when the value is unchanged.
      */
     protected commitValue(next: T | null, event?: Event | null): void;
+    /**
+     * Re-emit a native event in dx's shape.
+     *
+     * `onEnterKey` is the one that earns its keep: it has no native equivalent, so every call
+     * site would otherwise carry its own key check.
+     */
+    protected emitEditorEvent(kind: NxeEditorEventKind, event: Event): void;
+    /**
+     * Commit `next` if `valueChangeEvent` says this is the moment.
+     *
+     * Blur always commits, whatever the mode: a value the user typed and then left must not be
+     * discarded because the configured event never fired.
+     */
+    protected commitOn(kind: 'input' | 'keyup' | 'change', next: T | null, event: Event): void;
     /** Mark the control as touched (e.g. on blur), notifying Angular forms exactly once. */
     protected markAsTouched(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxeFormControlBase<any>, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NxeFormControlBase<any>, never, never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabledInput": { "alias": "disabled"; "required": false; "isSignal": true; }; "readOnly": { "alias": "readOnly"; "required": false; "isSignal": true; }; "validationGroupInput": { "alias": "validationGroup"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "onValueChanged": "onValueChanged"; }, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NxeFormControlBase<any>, never, never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabledInput": { "alias": "disabled"; "required": false; "isSignal": true; }; "readOnly": { "alias": "readOnly"; "required": false; "isSignal": true; }; "validationGroupInput": { "alias": "validationGroup"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaLabelledBy": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "valueChangeEvent": { "alias": "valueChangeEvent"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "visible": { "alias": "visible"; "required": false; "isSignal": true; }; "tabIndex": { "alias": "tabIndex"; "required": false; "isSignal": true; }; "elementAttr": { "alias": "elementAttr"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "onValueChanged": "onValueChanged"; "onKeyDown": "onKeyDown"; "onKeyUp": "onKeyUp"; "onEnterKey": "onEnterKey"; "onInput": "onInput"; "onChange": "onChange"; "onFocusIn": "onFocusIn"; "onFocusOut": "onFocusOut"; }, never, never, true, never>;
 }
 
 /**
@@ -219,10 +311,12 @@ interface NxeDefaultOptions {
     readonly dateBox?: {
         displayFormat?: string;
         placeholder?: string;
+        showClearButton?: boolean;
     };
     readonly textBox?: {
         placeholder?: string;
         hoverStateEnabled?: boolean;
+        showClearButton?: boolean;
     };
     readonly textArea?: {
         placeholder?: string;
@@ -230,6 +324,7 @@ interface NxeDefaultOptions {
     };
     readonly numberBox?: {
         format?: string;
+        showClearButton?: boolean;
     };
     readonly button?: {
         focusStateEnabled?: boolean;
@@ -306,6 +401,24 @@ declare function coerceArray<T>(value: T | readonly T[] | null | undefined): T[]
  */
 declare function nxeOptionalBoolean(value: unknown): boolean | undefined;
 
+/**
+ * DevExtreme's `displayExpr` / `valueExpr` / `searchExpr` accessor.
+ *
+ * dx accepts four spellings and the library accepted one — a flat property name — so a dotted
+ * path silently read `item['user.name']` and returned undefined. Silent, because an accessor
+ * that misses looks exactly like a field that is empty.
+ *
+ *   undefined / ''   the item itself      (dx: no expression)
+ *   'this'           the item itself      (dx's documented sentinel)
+ *   'user.name'      a dotted path
+ *   (item) => ...    a function accessor
+ */
+type NxeExpr<T = unknown> = string | ((item: T) => unknown) | undefined | null;
+/** Resolve `expr` against `item`. */
+declare function nxeResolveExpr<T = unknown>(expr: NxeExpr<T>, item: T): unknown;
+/** Resolve `expr` and render it as display text: `null`/`undefined` become the empty string. */
+declare function nxeResolveText<T = unknown>(expr: NxeExpr<T>, item: T): string;
+
 /**
  * Root registry mapping a `validationGroup` string to the `nxe-validator`s in it, mirroring
  * DevExtreme's global ValidationEngine.
@@ -318,11 +431,18 @@ declare class NxeValidationGroupRegistry {
     private readonly groups;
     register(group: string, member: NxeValidationGroupMember): void;
     unregister(group: string, member: NxeValidationGroupMember): void;
+    /**
+     * Clear every member's error state without validating.
+     *
+     * dx's `ValidationGroup.reset()`. The distinction from `validate()` matters after a Cancel:
+     * the fields should stop showing errors, not be re-checked and light up again.
+     */
+    reset(group: string): void;
     /** Validate every member of the group; valid (and empty) groups return `isValid: true`. */
     validate(group: string): NxeValidationResult;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxeValidationGroupRegistry, never>;
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<NxeValidationGroupRegistry>;
 }
 
-export { NXE_DEFAULT_OPTIONS, NXE_OPTION, NXE_VALIDATION_TARGET, NxeConfigOptionBase, NxeFormControlBase, NxeTemplateDirective, NxeValidationGroupRegistry, coerceArray, nxeOptionalBoolean };
-export type { NxeBrokenRule, NxeConfigOption, NxeDefaultOptions, NxeGridDefaultOptions, NxePickerDefaultOptions, NxeValidationGroupMember, NxeValidationResult, NxeValidationTarget, NxeValueChangedEvent };
+export { NXE_DEFAULT_OPTIONS, NXE_OPTION, NXE_VALIDATION_GROUP, NXE_VALIDATION_TARGET, NxeConfigOptionBase, NxeFormControlBase, NxeTemplateDirective, NxeValidationGroupRegistry, coerceArray, nxeOptionalBoolean, nxeResolveExpr, nxeResolveText };
+export type { NxeBrokenRule, NxeConfigOption, NxeDefaultOptions, NxeEditorEvent, NxeEditorEventKind, NxeExpr, NxeGridDefaultOptions, NxePickerDefaultOptions, NxeValidatedEvent, NxeValidationGroupMember, NxeValidationGroupScope, NxeValidationResult, NxeValidationTarget, NxeValueChangedEvent };