@nexterajs/ui 0.0.1 → 0.0.2

package/fesm2022/nexterajs-ui-forms.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, input, booleanAttribute, computed, output, ViewEncapsulation, ChangeDetectionStrategy, Component, signal, forwardRef, ViewContainerRef, viewChild } from '@angular/core';
-import { NxeValidationGroupRegistry, NxeFormControlBase, nxeOptionalBoolean, NXE_VALIDATION_TARGET } from '@nexterajs/ui/core';
+import { inject, ElementRef, input, booleanAttribute, computed, output, ViewEncapsulation, ChangeDetectionStrategy, Component, signal, viewChild, linkedSignal, forwardRef, ViewContainerRef } from '@angular/core';
+import { NxeValidationGroupRegistry, NXE_VALIDATION_GROUP, NxeFormControlBase, nxeOptionalBoolean, NXE_VALIDATION_TARGET } from '@nexterajs/ui/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { parseNumberFormat, NXE_NUMBER_SEPARATORS, formatNumber, parseNumber, roundHalfAwayFromZero, parseDateValue, NXE_DEFAULT_DISPLAY_FORMAT, NXE_DEFAULT_DATETIME_DISPLAY_FORMAT, NXE_DEFAULT_TIME_DISPLAY_FORMAT, formatDisplay, buildCalendarWeeks, buildPeriodCells, parseDisplay, serializeDate } from '@nexterajs/ui/intl';
 import { Overlay } from '@angular/cdk/overlay';
@@ -22,21 +22,22 @@ function cssSize(value) {
 /**
  * `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).
  */
 class NxeButtonComponent {
     registry = inject(NxeValidationGroupRegistry);
+    groupScope = inject(NXE_VALIDATION_GROUP, { optional: true });
     elementRef = inject(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). */
     text = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "text" }] : /* istanbul ignore next */ []));
     /** Style intent (`default`=blue, `success`=green, `danger`=red, `normal`=white). */
@@ -50,8 +51,8 @@ class NxeButtonComponent {
     /** DevExtreme parity input; only ever `false` in this codebase (suppresses tab focus). */
     focusStateEnabled = input(true, { ...(ngDevMode ? { debugName: "focusStateEnabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
-     * 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.
      */
     icon = input(undefined, /* @ts-ignore */
@@ -79,7 +80,10 @@ class NxeButtonComponent {
             event.stopImmediatePropagation();
             return;
         }
-        const group = this.validationGroup() ?? '';
+        // A named group wins; otherwise a surrounding nxe-validation-group; otherwise dx's
+        // implicit global group. Same precedence the validator applies, so a button and the
+        // fields beside it always resolve to the same group.
+        const group = this.validationGroup() || this.groupScope?.groupKey || '';
         this.onClick.emit({
             event,
             validationGroup: { validate: () => this.registry.validate(group) },
@@ -88,28 +92,28 @@ class NxeButtonComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxeButtonComponent, isStandalone: true, selector: "nxe-button", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, validationGroup: { classPropertyName: "validationGroup", publicName: "validationGroup", isSignal: true, isRequired: false, transformFunction: null }, focusStateEnabled: { classPropertyName: "focusStateEnabled", publicName: "focusStateEnabled", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, host: { attributes: { "role": "button" }, listeners: { "click": "handleClick($event)", "keydown.enter": "handleKeydown($event)", "keydown.space": "handleKeydown($event)" }, properties: { "attr.tabindex": "disabled() || !focusStateEnabled() ? null : 0", "attr.aria-disabled": "disabled() ? true : null", "class.nxe-button-default": "type() === 'default'", "class.nxe-button-success": "type() === 'success'", "class.nxe-button-danger": "type() === 'danger'", "class.nxe-button-has-text": "!!text()", "class.dx-button-has-text": "!!text()", "class.dx-button-has-icon": "!!icon()", "style.height": "heightStyle()", "style.width": "widthStyle()", "class.nxe-disabled": "disabled()" }, classAttribute: "nxe-widget" }, ngImport: i0, template: `
-        <span class="dx-button-content">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxeButtonComponent, isStandalone: true, selector: "nxe-button", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, validationGroup: { classPropertyName: "validationGroup", publicName: "validationGroup", isSignal: true, isRequired: false, transformFunction: null }, focusStateEnabled: { classPropertyName: "focusStateEnabled", publicName: "focusStateEnabled", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, host: { attributes: { "role": "button" }, listeners: { "click": "handleClick($event)", "keydown.enter": "handleKeydown($event)", "keydown.space": "handleKeydown($event)" }, properties: { "attr.tabindex": "disabled() || !focusStateEnabled() ? null : 0", "attr.aria-disabled": "disabled() ? true : null", "class.nxe-button-default": "type() === 'default'", "class.nxe-button-success": "type() === 'success'", "class.nxe-button-danger": "type() === 'danger'", "class.nxe-button-has-text": "!!text()", "class.nxe-button-has-icon": "!!icon()", "style.height": "heightStyle()", "style.width": "widthStyle()", "class.nxe-disabled": "disabled()" }, classAttribute: "nxe-widget" }, ngImport: i0, template: `
+        <span class="nxe-button-content">
             @if (icon()) {
-                <i class="dx-icon dx-icon-{{ icon() }}"></i>
+                <i class="nxe-icon nxe-icon-{{ icon() }}"></i>
             }
             <ng-content />
             @if (text()) {
-                <span class="dx-button-text">{{ text() }}</span>
+                <span class="nxe-button-text">{{ text() }}</span>
             }
         </span>
-    `, isInline: true, styles: ["nxe-button{display:inline-flex;box-sizing:border-box;cursor:pointer;max-width:100%;overflow:hidden;text-align:center;vertical-align:middle;-webkit-user-select:none;user-select:none;border:1px solid #ddd;border-radius:4px;background-color:#fff;color:#333;font-weight:400;line-height:1.35715}nxe-button:focus{outline:none}nxe-button .dx-button-content{flex:1 1 auto;display:flex;align-items:center;justify-content:center;gap:4px;line-height:1.35715;padding:8px}nxe-button.nxe-button-has-text .dx-button-content{padding-inline:12px}nxe-button .dx-button-text{line-height:1.2858;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}nxe-button:hover{background-color:#f4f4f4}nxe-button:active{background-color:#c2c2c2}nxe-button.nxe-button-default{background-color:#337ab7;border-color:transparent;color:#fff}nxe-button.nxe-button-default:hover{background-color:#2d6ca3}nxe-button.nxe-button-default:active{background-color:#19405b}nxe-button.nxe-button-success{background-color:#5cb85c;border-color:transparent;color:#fff}nxe-button.nxe-button-success:hover{background-color:#46a046}nxe-button.nxe-button-success:active{background-color:#306e30}nxe-button.nxe-button-danger{background-color:#d9534f;border-color:transparent;color:#fff}nxe-button.nxe-button-danger:hover{background-color:#cd312c}nxe-button.nxe-button-danger:active{background-color:#932320}nxe-button[disabled]{opacity:.5;cursor:default}nxe-button.nxe-disabled{opacity:.5;cursor:default;pointer-events:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, styles: ["nxe-button{display:inline-flex;box-sizing:border-box;cursor:pointer;max-width:100%;overflow:hidden;text-align:center;vertical-align:middle;-webkit-user-select:none;user-select:none;border:1px solid #ddd;border-radius:4px;background-color:#fff;color:#333;font-weight:400;line-height:1.35715}nxe-button:focus{outline:none}nxe-button .nxe-button-content{flex:1 1 auto;display:flex;align-items:center;justify-content:center;gap:var(--nxe-ui-button-gap, 0px);line-height:1.35715;padding:8px}nxe-button.nxe-button-has-text .nxe-button-content{padding-inline:12px}nxe-button.nxe-button-has-text .nxe-button-content>i.nxe-icon{margin-inline-start:0;margin-inline-end:calc(9px - var(--nxe-ui-button-gap, 0px))}nxe-button .nxe-button-text{line-height:1.2858;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}nxe-button:hover{background-color:#f4f4f4}nxe-button:active{background-color:#c2c2c2}nxe-button.nxe-button-default{background-color:#337ab7;border-color:transparent;color:#fff}nxe-button.nxe-button-default:hover{background-color:#2d6ca3}nxe-button.nxe-button-default:active{background-color:#19405b}nxe-button.nxe-button-success{background-color:#5cb85c;border-color:transparent;color:#fff}nxe-button.nxe-button-success:hover{background-color:#46a046}nxe-button.nxe-button-success:active{background-color:#306e30}nxe-button.nxe-button-danger{background-color:#d9534f;border-color:transparent;color:#fff}nxe-button.nxe-button-danger:hover{background-color:#cd312c}nxe-button.nxe-button-danger:active{background-color:#932320}nxe-button[disabled]{opacity:.5;cursor:default}nxe-button.nxe-disabled{opacity:.5;cursor:default;pointer-events:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nxe-button', standalone: true, template: `
-        <span class="dx-button-content">
+        <span class="nxe-button-content">
             @if (icon()) {
-                <i class="dx-icon dx-icon-{{ icon() }}"></i>
+                <i class="nxe-icon nxe-icon-{{ icon() }}"></i>
             }
             <ng-content />
             @if (text()) {
-                <span class="dx-button-text">{{ text() }}</span>
+                <span class="nxe-button-text">{{ text() }}</span>
             }
         </span>
     `, host: {
@@ -121,15 +125,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
                         '[class.nxe-button-success]': "type() === 'success'",
                         '[class.nxe-button-danger]': "type() === 'danger'",
                         '[class.nxe-button-has-text]': '!!text()',
-                        '[class.dx-button-has-text]': '!!text()',
-                        '[class.dx-button-has-icon]': '!!icon()',
+                        '[class.nxe-button-has-icon]': '!!icon()',
                         '[style.height]': 'heightStyle()',
                         '[style.width]': 'widthStyle()',
                         '[class.nxe-disabled]': 'disabled()',
                         '(click)': 'handleClick($event)',
                         '(keydown.enter)': 'handleKeydown($event)',
                         '(keydown.space)': 'handleKeydown($event)',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: ["nxe-button{display:inline-flex;box-sizing:border-box;cursor:pointer;max-width:100%;overflow:hidden;text-align:center;vertical-align:middle;-webkit-user-select:none;user-select:none;border:1px solid #ddd;border-radius:4px;background-color:#fff;color:#333;font-weight:400;line-height:1.35715}nxe-button:focus{outline:none}nxe-button .dx-button-content{flex:1 1 auto;display:flex;align-items:center;justify-content:center;gap:4px;line-height:1.35715;padding:8px}nxe-button.nxe-button-has-text .dx-button-content{padding-inline:12px}nxe-button .dx-button-text{line-height:1.2858;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}nxe-button:hover{background-color:#f4f4f4}nxe-button:active{background-color:#c2c2c2}nxe-button.nxe-button-default{background-color:#337ab7;border-color:transparent;color:#fff}nxe-button.nxe-button-default:hover{background-color:#2d6ca3}nxe-button.nxe-button-default:active{background-color:#19405b}nxe-button.nxe-button-success{background-color:#5cb85c;border-color:transparent;color:#fff}nxe-button.nxe-button-success:hover{background-color:#46a046}nxe-button.nxe-button-success:active{background-color:#306e30}nxe-button.nxe-button-danger{background-color:#d9534f;border-color:transparent;color:#fff}nxe-button.nxe-button-danger:hover{background-color:#cd312c}nxe-button.nxe-button-danger:active{background-color:#932320}nxe-button[disabled]{opacity:.5;cursor:default}nxe-button.nxe-disabled{opacity:.5;cursor:default;pointer-events:none}\n"] }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: ["nxe-button{display:inline-flex;box-sizing:border-box;cursor:pointer;max-width:100%;overflow:hidden;text-align:center;vertical-align:middle;-webkit-user-select:none;user-select:none;border:1px solid #ddd;border-radius:4px;background-color:#fff;color:#333;font-weight:400;line-height:1.35715}nxe-button:focus{outline:none}nxe-button .nxe-button-content{flex:1 1 auto;display:flex;align-items:center;justify-content:center;gap:var(--nxe-ui-button-gap, 0px);line-height:1.35715;padding:8px}nxe-button.nxe-button-has-text .nxe-button-content{padding-inline:12px}nxe-button.nxe-button-has-text .nxe-button-content>i.nxe-icon{margin-inline-start:0;margin-inline-end:calc(9px - var(--nxe-ui-button-gap, 0px))}nxe-button .nxe-button-text{line-height:1.2858;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}nxe-button:hover{background-color:#f4f4f4}nxe-button:active{background-color:#c2c2c2}nxe-button.nxe-button-default{background-color:#337ab7;border-color:transparent;color:#fff}nxe-button.nxe-button-default:hover{background-color:#2d6ca3}nxe-button.nxe-button-default:active{background-color:#19405b}nxe-button.nxe-button-success{background-color:#5cb85c;border-color:transparent;color:#fff}nxe-button.nxe-button-success:hover{background-color:#46a046}nxe-button.nxe-button-success:active{background-color:#306e30}nxe-button.nxe-button-danger{background-color:#d9534f;border-color:transparent;color:#fff}nxe-button.nxe-button-danger:hover{background-color:#cd312c}nxe-button.nxe-button-danger:active{background-color:#932320}nxe-button[disabled]{opacity:.5;cursor:default}nxe-button.nxe-disabled{opacity:.5;cursor:default;pointer-events:none}\n"] }]
         }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], validationGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "validationGroup", required: false }] }], focusStateEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusStateEnabled", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], onClick: [{ type: i0.Output, args: ["onClick"] }] } });
 
 /**
@@ -139,6 +142,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
  * `[(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.
  */
@@ -152,38 +159,99 @@ class NxeTextBoxComponent extends NxeFormControlBase {
     hoverStateEnabledInput = input(undefined, { ...(ngDevMode ? { debugName: "hoverStateEnabledInput" } : /* istanbul ignore next */ {}), alias: 'hoverStateEnabled', transform: nxeOptionalBoolean });
     hoverStateEnabled = computed(() => this.hoverStateEnabledInput() ?? this.nxeDefaults.textBox?.hoverStateEnabled ?? false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hoverStateEnabled" }] : /* istanbul ignore next */ []));
+    /** dx `showClearButton` — off by default, as in dx; `NXE_DEFAULT_OPTIONS.textBox` can turn it on app-wide. */
+    showClearButtonInput = input(undefined, { ...(ngDevMode ? { debugName: "showClearButtonInput" } : /* istanbul ignore next */ {}), alias: 'showClearButton', transform: nxeOptionalBoolean });
+    showClearButton = computed(() => this.showClearButtonInput() ?? this.nxeDefaults.textBox?.showClearButton ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showClearButton" }] : /* istanbul ignore next */ []));
     focused = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
     displayValue = computed(() => this.value() ?? '', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
+    fieldRef = viewChild.required('field', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fieldRef" }] : /* istanbul ignore next */ []));
+    /**
+     * 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.
+     */
+    fieldText = linkedSignal(() => this.displayValue(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fieldText" }] : /* istanbul ignore next */ []));
+    clearButtonVisible = computed(() => this.showClearButton() && !this.readOnly() && !this.disabled() && this.fieldText() !== '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clearButtonVisible" }] : /* istanbul ignore next */ []));
+    /** dx `valueChangeEvent: 'input'` — the search-as-you-type case. */
+    onTypedInput(event) {
+        const text = event.target.value;
+        this.fieldText.set(text);
+        this.commitOn('input', text, event);
+    }
+    /**
+     * 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.
+     */
+    onClear(event) {
+        const field = this.fieldRef().nativeElement;
+        this.commitValue('', event);
+        field.value = '';
+        this.fieldText.set('');
+        if (!this.focused()) {
+            field.focus();
+        }
+    }
+    onTypedKeyup(event) {
+        this.commitOn('keyup', event.target.value, event);
+    }
     onBlur(event) {
+        // Blur commits whatever the mode: a value typed and left must not be discarded because
+        // the configured event never fired.
         this.commitValue(event.target.value, event);
         this.focused.set(false);
         this.markAsTouched();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeTextBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxeTextBoxComponent, isStandalone: true, selector: "nxe-text-box", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, placeholderInput: { classPropertyName: "placeholderInput", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hoverStateEnabledInput: { classPropertyName: "hoverStateEnabledInput", publicName: "hoverStateEnabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.nxe-focused": "focused()", "class.nxe-invalid": "!!validationError()" }, classAttribute: "nxe-widget nxe-editor nxe-textbox" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxeTextBoxComponent, isStandalone: true, selector: "nxe-text-box", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, placeholderInput: { classPropertyName: "placeholderInput", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hoverStateEnabledInput: { classPropertyName: "hoverStateEnabledInput", publicName: "hoverStateEnabled", isSignal: true, isRequired: false, transformFunction: null }, showClearButtonInput: { classPropertyName: "showClearButtonInput", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.nxe-focused": "focused()", "class.nxe-invalid": "!!validationError()" }, classAttribute: "nxe-widget nxe-editor nxe-textbox" }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NxeTextBoxComponent), multi: true },
             { provide: NXE_VALIDATION_TARGET, useExisting: forwardRef(() => NxeTextBoxComponent) },
-        ], usesInheritance: true, ngImport: i0, template: `
-        <div class="nxe-editor-container">
-            <input
-                class="nxe-editor-input nxe-textbox-input"
-                [type]="mode()"
-                [value]="displayValue()"
-                [readOnly]="readOnly()"
-                [disabled]="disabled()"
-                [attr.placeholder]="placeholder() || null"
-                autocomplete="off"
-                (blur)="onBlur($event)"
-                (focus)="focused.set(true)" />
-        </div>
-        <ng-content />
-        @if (validationError(); as error) {
-            @if (focused()) {
-                <div class="nxe-invalid-message">{{ error }}</div>
-            }
-        }
+        ], viewQueries: [{ propertyName: "fieldRef", first: true, predicate: ["field"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+        <div class="nxe-editor-container">
+            <input
+                #field
+                class="nxe-editor-input nxe-textbox-input"
+                [attr.tabindex]="tabIndex()"
+                [id]="controlId()"
+                [attr.aria-label]="ariaLabel() || null"
+                [attr.aria-labelledby]="ariaLabelledBy() || null"
+                [attr.aria-invalid]="validationError() ? true : null"
+                [attr.aria-required]="required() ? true : null"
+                [type]="mode()"
+                [value]="displayValue()"
+                [readOnly]="readOnly()"
+                [disabled]="disabled()"
+                [attr.placeholder]="placeholder() || null"
+                autocomplete="off"
+                (input)="onTypedInput($event)"
+                (keyup)="onTypedKeyup($event)"
+                (blur)="onBlur($event)"
+                (focus)="focused.set(true)" />
+            @if (clearButtonVisible()) {
+                <span
+                    class="nxe-clear-button-area"
+                    (mousedown)="$event.preventDefault()"
+                    (click)="onClear($event)"
+                    aria-hidden="true">
+                    <!-- A Ø16 disc with a 2px × cut out (the dropdown editors' clear glyph). -->
+                    <svg viewBox="0 0 18 18" focusable="false">
+                        <path fill-rule="evenodd" transform="rotate(45 9 9)"
+                            d="M9 1a8 8 0 1 1 0 16A8 8 0 1 1 9 1ZM8 3.343h2V8h4.657v2H10v4.657H8V10H3.343V8H8Z" />
+                    </svg>
+                </span>
+            }
+        </div>
+        <ng-content />
+        @if (validationError(); as error) {
+            @if (focused()) {
+                <div class="nxe-invalid-message">{{ error }}</div>
+            }
+        }
     `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeTextBoxComponent, decorators: [{
@@ -191,25 +259,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
             args: [{
                     selector: 'nxe-text-box',
                     standalone: true,
-                    template: `
-        <div class="nxe-editor-container">
-            <input
-                class="nxe-editor-input nxe-textbox-input"
-                [type]="mode()"
-                [value]="displayValue()"
-                [readOnly]="readOnly()"
-                [disabled]="disabled()"
-                [attr.placeholder]="placeholder() || null"
-                autocomplete="off"
-                (blur)="onBlur($event)"
-                (focus)="focused.set(true)" />
-        </div>
-        <ng-content />
-        @if (validationError(); as error) {
-            @if (focused()) {
-                <div class="nxe-invalid-message">{{ error }}</div>
-            }
-        }
+                    template: `
+        <div class="nxe-editor-container">
+            <input
+                #field
+                class="nxe-editor-input nxe-textbox-input"
+                [attr.tabindex]="tabIndex()"
+                [id]="controlId()"
+                [attr.aria-label]="ariaLabel() || null"
+                [attr.aria-labelledby]="ariaLabelledBy() || null"
+                [attr.aria-invalid]="validationError() ? true : null"
+                [attr.aria-required]="required() ? true : null"
+                [type]="mode()"
+                [value]="displayValue()"
+                [readOnly]="readOnly()"
+                [disabled]="disabled()"
+                [attr.placeholder]="placeholder() || null"
+                autocomplete="off"
+                (input)="onTypedInput($event)"
+                (keyup)="onTypedKeyup($event)"
+                (blur)="onBlur($event)"
+                (focus)="focused.set(true)" />
+            @if (clearButtonVisible()) {
+                <span
+                    class="nxe-clear-button-area"
+                    (mousedown)="$event.preventDefault()"
+                    (click)="onClear($event)"
+                    aria-hidden="true">
+                    <!-- A Ø16 disc with a 2px × cut out (the dropdown editors' clear glyph). -->
+                    <svg viewBox="0 0 18 18" focusable="false">
+                        <path fill-rule="evenodd" transform="rotate(45 9 9)"
+                            d="M9 1a8 8 0 1 1 0 16A8 8 0 1 1 9 1ZM8 3.343h2V8h4.657v2H10v4.657H8V10H3.343V8H8Z" />
+                    </svg>
+                </span>
+            }
+        </div>
+        <ng-content />
+        @if (validationError(); as error) {
+            @if (focused()) {
+                <div class="nxe-invalid-message">{{ error }}</div>
+            }
+        }
     `,
                     host: {
                         class: 'nxe-widget nxe-editor nxe-textbox',
@@ -223,7 +313,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
                 }]
-        }], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], placeholderInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hoverStateEnabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverStateEnabled", required: false }] }] } });
+        }], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], placeholderInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hoverStateEnabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverStateEnabled", required: false }] }], showClearButtonInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], fieldRef: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }] } });
 
 /**
  * `nxe-text-area` — drop-in replacement for DevExtreme `dx-text-area`.
@@ -244,7 +334,16 @@ class NxeTextAreaComponent extends NxeFormControlBase {
     ...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
     displayValue = computed(() => this.value() ?? '', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
+    /** dx `valueChangeEvent: 'input'` — the search-as-you-type case. */
+    onTypedInput(event) {
+        this.commitOn('input', event.target.value, event);
+    }
+    onTypedKeyup(event) {
+        this.commitOn('keyup', event.target.value, event);
+    }
     onBlur(event) {
+        // Blur commits whatever the mode: a value typed and left must not be discarded because
+        // the configured event never fired.
         this.commitValue(event.target.value, event);
         this.focused.set(false);
         this.markAsTouched();
@@ -257,11 +356,19 @@ class NxeTextAreaComponent extends NxeFormControlBase {
         <div class="nxe-editor-container">
             <textarea
                 class="nxe-editor-input nxe-textarea-input"
+                [attr.tabindex]="tabIndex()"
+                [id]="controlId()"
+                [attr.aria-label]="ariaLabel() || null"
+                [attr.aria-labelledby]="ariaLabelledBy() || null"
+                [attr.aria-invalid]="validationError() ? true : null"
+                [attr.aria-required]="required() ? true : null"
                 [value]="displayValue()"
                 [readOnly]="readOnly()"
                 [disabled]="disabled()"
                 [attr.placeholder]="placeholder() || null"
                 [style.height.px]="height() || null"
+                (input)="onTypedInput($event)"
+                (keyup)="onTypedKeyup($event)"
                 (blur)="onBlur($event)"
                 (focus)="focused.set(true)"></textarea>
         </div>
@@ -279,11 +386,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
         <div class="nxe-editor-container">
             <textarea
                 class="nxe-editor-input nxe-textarea-input"
+                [attr.tabindex]="tabIndex()"
+                [id]="controlId()"
+                [attr.aria-label]="ariaLabel() || null"
+                [attr.aria-labelledby]="ariaLabelledBy() || null"
+                [attr.aria-invalid]="validationError() ? true : null"
+                [attr.aria-required]="required() ? true : null"
                 [value]="displayValue()"
                 [readOnly]="readOnly()"
                 [disabled]="disabled()"
                 [attr.placeholder]="placeholder() || null"
                 [style.height.px]="height() || null"
+                (input)="onTypedInput($event)"
+                (keyup)="onTypedKeyup($event)"
                 (blur)="onBlur($event)"
                 (focus)="focused.set(true)"></textarea>
         </div>
@@ -306,16 +421,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
 /**
  * `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).
  */
 class NxeCheckBoxComponent extends NxeFormControlBase {
     /** Inline label rendered next to the box. */
     text = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "text" }] : /* istanbul ignore next */ []));
+    /**
+     * 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`.
+     */
+    valueProvided = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueProvided" }] : /* istanbul ignore next */ []));
+    /** dx `.dx-checkbox-indeterminate`: the value was given, and it is `null`. */
+    indeterminate = computed(() => this.valueProvided() && this.value() === null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "indeterminate" }] : /* istanbul ignore next */ []));
+    writeValue(value) {
+        super.writeValue(value);
+        this.valueProvided.set(true);
+    }
+    ngOnChanges(changes) {
+        if (changes['value']) {
+            this.valueProvided.set(true);
+        }
+    }
     toggle(event) {
         if (this.disabled() || this.readOnly()) {
             return;
@@ -328,10 +470,10 @@ class NxeCheckBoxComponent extends NxeFormControlBase {
         this.toggle(event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeCheckBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxeCheckBoxComponent, isStandalone: true, selector: "nxe-check-box", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "checkbox" }, listeners: { "click": "toggle($event)", "keydown.space": "onSpace($event)", "blur": "markAsTouched()" }, properties: { "attr.aria-checked": "!!value()", "attr.aria-disabled": "disabled() ? true : null", "attr.aria-readonly": "readOnly() ? true : null", "attr.tabindex": "disabled() || readOnly() ? null : 0", "class.nxe-checkbox-checked": "!!value()", "class.nxe-disabled": "disabled()", "class.nxe-readonly": "readOnly()", "class.nxe-invalid": "!!validationError()" }, classAttribute: "nxe-widget nxe-checkbox" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxeCheckBoxComponent, isStandalone: true, selector: "nxe-check-box", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "checkbox" }, listeners: { "click": "toggle($event)", "keydown.space": "onSpace($event)", "blur": "markAsTouched()" }, properties: { "attr.aria-checked": "indeterminate() ? 'mixed' : !!value()", "attr.aria-disabled": "disabled() ? true : null", "attr.aria-readonly": "readOnly() ? true : null", "attr.aria-invalid": "validationError() ? true : null", "attr.aria-required": "required() ? true : null", "attr.id": "inputId() ? controlId() : null", "attr.aria-label": "ariaLabel() || null", "attr.aria-labelledby": "ariaLabelledBy() || null", "attr.tabindex": "disabled() ? null : 0", "class.nxe-checkbox-checked": "!!value()", "class.nxe-checkbox-indeterminate": "indeterminate()", "class.nxe-disabled": "disabled()", "class.nxe-readonly": "readOnly()", "class.nxe-invalid": "!!validationError()" }, classAttribute: "nxe-widget nxe-checkbox" }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NxeCheckBoxComponent), multi: true },
             { provide: NXE_VALIDATION_TARGET, useExisting: forwardRef(() => NxeCheckBoxComponent) },
-        ], usesInheritance: true, ngImport: i0, template: `
+        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
         <span class="nxe-checkbox-container">
             <span class="nxe-checkbox-icon" aria-hidden="true"></span>
             @if (text()) {
@@ -339,7 +481,7 @@ class NxeCheckBoxComponent extends NxeFormControlBase {
             }
         </span>
         <ng-content />
-    `, isInline: true, styles: ["nxe-check-box{display:inline-flex;align-items:center;box-sizing:border-box;cursor:pointer;vertical-align:middle;-webkit-user-select:none;user-select:none;line-height:normal}nxe-check-box:focus{outline:none}nxe-check-box .nxe-checkbox-container{display:inline-flex;align-items:center;max-width:100%;overflow:hidden}nxe-check-box .nxe-checkbox-icon{box-sizing:border-box;position:relative;flex-shrink:0;width:22px;height:22px;border:1px solid #ddd;border-radius:2px;background-color:#fff;transition:border-color .12s ease}nxe-check-box .nxe-checkbox-text{padding-inline-start:5px;white-space:pre-wrap;word-wrap:break-word;line-height:normal}nxe-check-box.nxe-checkbox-checked .nxe-checkbox-icon:after{content:\"\";position:absolute;top:3px;inset-inline-start:7px;width:6px;height:11px;border:solid #337ab7;border-width:0 2px 2px 0;transform:rotate(45deg)}nxe-check-box:hover .nxe-checkbox-icon{border-color:#265a87}nxe-check-box:focus .nxe-checkbox-icon{border-color:#337ab7}nxe-check-box.nxe-readonly{cursor:default}nxe-check-box.nxe-readonly .nxe-checkbox-icon{border-color:#f4f4f4;background-color:#fff}nxe-check-box.nxe-disabled{cursor:default}nxe-check-box.nxe-disabled .nxe-checkbox-icon,nxe-check-box.nxe-disabled .nxe-checkbox-text{opacity:.4}nxe-check-box.nxe-invalid .nxe-checkbox-icon{border-color:#d9534f66}nxe-check-box.nxe-invalid:focus .nxe-checkbox-icon{border-color:#d9534f}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, styles: ["nxe-check-box{display:inline-flex;align-items:center;box-sizing:border-box;cursor:pointer;vertical-align:middle;-webkit-user-select:none;user-select:none;line-height:normal}nxe-check-box:focus{outline:none}nxe-check-box .nxe-checkbox-container{display:inline-flex;align-items:center;max-width:100%;overflow:hidden}nxe-check-box .nxe-checkbox-icon{box-sizing:border-box;position:relative;flex-shrink:0;width:22px;height:22px;border:1px solid #ddd;border-radius:2px;background-color:#fff}nxe-check-box .nxe-checkbox-text{padding-inline-start:5px;white-space:pre-wrap;word-wrap:break-word;line-height:normal}nxe-check-box.nxe-checkbox-checked .nxe-checkbox-icon:after{content:\"\";position:absolute;box-sizing:border-box;top:5px;inset-inline-start:2.5px;width:15px;height:11px;background-color:var(--nxe-ui-accent, #337ab7);clip-path:polygon(0 5.586px,5.414px 11px,15px 1.414px,13.586px 0,5.414px 8.172px,1.414px 4.172px)}@media(forced-colors:active){nxe-check-box.nxe-checkbox-checked .nxe-checkbox-icon:after{forced-color-adjust:none;background-color:CanvasText}}nxe-check-box.nxe-checkbox-indeterminate .nxe-checkbox-icon:after{content:\"\";position:absolute;box-sizing:border-box;top:50%;inset-inline-start:50%;width:12px;height:12px;margin-top:-6px;margin-inline-start:-6px;border-radius:2px;background-color:var(--nxe-ui-accent, #337ab7)}@media(forced-colors:active){nxe-check-box.nxe-checkbox-indeterminate .nxe-checkbox-icon:after{forced-color-adjust:none;background-color:CanvasText}}nxe-check-box.nxe-readonly{cursor:default}nxe-check-box.nxe-readonly .nxe-checkbox-icon{border-color:#f4f4f4;background-color:#fff}nxe-check-box:not(.nxe-disabled):hover .nxe-checkbox-icon{border-color:var(--nxe-ui-checkbox-hover-border, #265a87)}nxe-check-box:not(.nxe-disabled):focus .nxe-checkbox-icon{border-color:var(--nxe-ui-accent, #337ab7)}nxe-check-box:not(.nxe-disabled):active .nxe-checkbox-icon{background-color:#60606033}nxe-check-box.nxe-disabled{cursor:default}nxe-check-box.nxe-disabled .nxe-checkbox-icon,nxe-check-box.nxe-disabled .nxe-checkbox-text{opacity:.4}nxe-check-box.nxe-invalid .nxe-checkbox-icon,nxe-check-box.nxe-invalid:hover .nxe-checkbox-icon{border-color:#d9534f66}nxe-check-box.nxe-invalid:focus .nxe-checkbox-icon{border-color:#d9534f}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeCheckBoxComponent, decorators: [{
             type: Component,
@@ -354,11 +496,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
     `, host: {
                         class: 'nxe-widget nxe-checkbox',
                         role: 'checkbox',
-                        '[attr.aria-checked]': '!!value()',
+                        '[attr.aria-checked]': "indeterminate() ? 'mixed' : !!value()",
                         '[attr.aria-disabled]': 'disabled() ? true : null',
                         '[attr.aria-readonly]': 'readOnly() ? true : null',
-                        '[attr.tabindex]': 'disabled() || readOnly() ? null : 0',
+                        '[attr.aria-invalid]': 'validationError() ? true : null',
+                        '[attr.aria-required]': 'required() ? true : null',
+                        // The host IS the control here, so the id and name belong on it rather than on a child.
+                        '[attr.id]': 'inputId() ? controlId() : null',
+                        '[attr.aria-label]': 'ariaLabel() || null',
+                        '[attr.aria-labelledby]': 'ariaLabelledBy() || null',
+                        // dx keeps a read-only box in the tab order (tabindex 0); only disabled takes it out.
+                        '[attr.tabindex]': 'disabled() ? null : 0',
                         '[class.nxe-checkbox-checked]': '!!value()',
+                        '[class.nxe-checkbox-indeterminate]': 'indeterminate()',
                         '[class.nxe-disabled]': 'disabled()',
                         '[class.nxe-readonly]': 'readOnly()',
                         '[class.nxe-invalid]': '!!validationError()',
@@ -368,7 +518,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
                     }, providers: [
                         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NxeCheckBoxComponent), multi: true },
                         { provide: NXE_VALIDATION_TARGET, useExisting: forwardRef(() => NxeCheckBoxComponent) },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: ["nxe-check-box{display:inline-flex;align-items:center;box-sizing:border-box;cursor:pointer;vertical-align:middle;-webkit-user-select:none;user-select:none;line-height:normal}nxe-check-box:focus{outline:none}nxe-check-box .nxe-checkbox-container{display:inline-flex;align-items:center;max-width:100%;overflow:hidden}nxe-check-box .nxe-checkbox-icon{box-sizing:border-box;position:relative;flex-shrink:0;width:22px;height:22px;border:1px solid #ddd;border-radius:2px;background-color:#fff;transition:border-color .12s ease}nxe-check-box .nxe-checkbox-text{padding-inline-start:5px;white-space:pre-wrap;word-wrap:break-word;line-height:normal}nxe-check-box.nxe-checkbox-checked .nxe-checkbox-icon:after{content:\"\";position:absolute;top:3px;inset-inline-start:7px;width:6px;height:11px;border:solid #337ab7;border-width:0 2px 2px 0;transform:rotate(45deg)}nxe-check-box:hover .nxe-checkbox-icon{border-color:#265a87}nxe-check-box:focus .nxe-checkbox-icon{border-color:#337ab7}nxe-check-box.nxe-readonly{cursor:default}nxe-check-box.nxe-readonly .nxe-checkbox-icon{border-color:#f4f4f4;background-color:#fff}nxe-check-box.nxe-disabled{cursor:default}nxe-check-box.nxe-disabled .nxe-checkbox-icon,nxe-check-box.nxe-disabled .nxe-checkbox-text{opacity:.4}nxe-check-box.nxe-invalid .nxe-checkbox-icon{border-color:#d9534f66}nxe-check-box.nxe-invalid:focus .nxe-checkbox-icon{border-color:#d9534f}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: ["nxe-check-box{display:inline-flex;align-items:center;box-sizing:border-box;cursor:pointer;vertical-align:middle;-webkit-user-select:none;user-select:none;line-height:normal}nxe-check-box:focus{outline:none}nxe-check-box .nxe-checkbox-container{display:inline-flex;align-items:center;max-width:100%;overflow:hidden}nxe-check-box .nxe-checkbox-icon{box-sizing:border-box;position:relative;flex-shrink:0;width:22px;height:22px;border:1px solid #ddd;border-radius:2px;background-color:#fff}nxe-check-box .nxe-checkbox-text{padding-inline-start:5px;white-space:pre-wrap;word-wrap:break-word;line-height:normal}nxe-check-box.nxe-checkbox-checked .nxe-checkbox-icon:after{content:\"\";position:absolute;box-sizing:border-box;top:5px;inset-inline-start:2.5px;width:15px;height:11px;background-color:var(--nxe-ui-accent, #337ab7);clip-path:polygon(0 5.586px,5.414px 11px,15px 1.414px,13.586px 0,5.414px 8.172px,1.414px 4.172px)}@media(forced-colors:active){nxe-check-box.nxe-checkbox-checked .nxe-checkbox-icon:after{forced-color-adjust:none;background-color:CanvasText}}nxe-check-box.nxe-checkbox-indeterminate .nxe-checkbox-icon:after{content:\"\";position:absolute;box-sizing:border-box;top:50%;inset-inline-start:50%;width:12px;height:12px;margin-top:-6px;margin-inline-start:-6px;border-radius:2px;background-color:var(--nxe-ui-accent, #337ab7)}@media(forced-colors:active){nxe-check-box.nxe-checkbox-indeterminate .nxe-checkbox-icon:after{forced-color-adjust:none;background-color:CanvasText}}nxe-check-box.nxe-readonly{cursor:default}nxe-check-box.nxe-readonly .nxe-checkbox-icon{border-color:#f4f4f4;background-color:#fff}nxe-check-box:not(.nxe-disabled):hover .nxe-checkbox-icon{border-color:var(--nxe-ui-checkbox-hover-border, #265a87)}nxe-check-box:not(.nxe-disabled):focus .nxe-checkbox-icon{border-color:var(--nxe-ui-accent, #337ab7)}nxe-check-box:not(.nxe-disabled):active .nxe-checkbox-icon{background-color:#60606033}nxe-check-box.nxe-disabled{cursor:default}nxe-check-box.nxe-disabled .nxe-checkbox-icon,nxe-check-box.nxe-disabled .nxe-checkbox-text{opacity:.4}nxe-check-box.nxe-invalid .nxe-checkbox-icon,nxe-check-box.nxe-invalid:hover .nxe-checkbox-icon{border-color:#d9534f66}nxe-check-box.nxe-invalid:focus .nxe-checkbox-icon{border-color:#d9534f}\n"] }]
         }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }] } });
 
 /** Coerce a static (`min="1"`) or bound (`[min]="0"`) attribute to a number, or undefined. */
@@ -389,6 +539,10 @@ function toNumber(value) {
  *
  * 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.
  */
 class NxeNumberBoxComponent extends NxeFormControlBase {
     /** LDML format pattern (e.g. `#,##0.00`); empty = raw number. */
@@ -397,10 +551,16 @@ class NxeNumberBoxComponent extends NxeFormControlBase {
     ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
     min = input(undefined, { ...(ngDevMode ? { debugName: "min" } : /* istanbul ignore next */ {}), transform: toNumber });
     max = input(undefined, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), transform: toNumber });
+    /** dx `showClearButton` — off by default, as in dx; `NXE_DEFAULT_OPTIONS.numberBox` can turn it on app-wide. */
+    showClearButtonInput = input(undefined, { ...(ngDevMode ? { debugName: "showClearButtonInput" } : /* istanbul ignore next */ {}), alias: 'showClearButton', transform: nxeOptionalBoolean });
+    showClearButton = computed(() => this.showClearButtonInput() ?? this.nxeDefaults.numberBox?.showClearButton ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showClearButton" }] : /* istanbul ignore next */ []));
     focused = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
     parsedFormat = computed(() => parseNumberFormat(this.format()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "parsedFormat" }] : /* istanbul ignore next */ []));
+    fieldRef = viewChild.required('field', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fieldRef" }] : /* istanbul ignore next */ []));
     /** Locale characters, configured once by the application. Defaults to en-US. */
     separators = inject(NXE_NUMBER_SEPARATORS);
     displayValue = computed(() => {
@@ -413,6 +573,27 @@ class NxeNumberBoxComponent extends NxeFormControlBase {
         return formatNumber(value, this.parsedFormat(), this.separators);
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
+    /** The text in the field right now; dx shows the clear button by the field's emptiness. */
+    fieldText = linkedSignal(() => this.displayValue(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fieldText" }] : /* istanbul ignore next */ []));
+    clearButtonVisible = computed(() => this.showClearButton() && !this.readOnly() && !this.disabled() && this.fieldText() !== '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clearButtonVisible" }] : /* istanbul ignore next */ []));
+    onFieldInput(event) {
+        this.fieldText.set(event.target.value);
+    }
+    /**
+     * 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`.
+     */
+    onClear(event) {
+        const field = this.fieldRef().nativeElement;
+        this.commitValue(null, event);
+        field.value = '';
+        this.fieldText.set('');
+        if (!this.focused()) {
+            field.focus();
+        }
+    }
     onBlur(event) {
         let num = parseNumber(event.target.value, this.separators);
         if (num != null) {
@@ -434,51 +615,93 @@ class NxeNumberBoxComponent extends NxeFormControlBase {
         this.markAsTouched();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeNumberBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxeNumberBoxComponent, isStandalone: true, selector: "nxe-number-box", inputs: { formatInput: { classPropertyName: "formatInput", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.nxe-focused": "focused()", "class.nxe-invalid": "!!validationError()" }, classAttribute: "nxe-widget nxe-editor nxe-numberbox" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxeNumberBoxComponent, isStandalone: true, selector: "nxe-number-box", inputs: { formatInput: { classPropertyName: "formatInput", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, showClearButtonInput: { classPropertyName: "showClearButtonInput", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.nxe-focused": "focused()", "class.nxe-invalid": "!!validationError()" }, classAttribute: "nxe-widget nxe-editor nxe-numberbox" }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NxeNumberBoxComponent), multi: true },
             { provide: NXE_VALIDATION_TARGET, useExisting: forwardRef(() => NxeNumberBoxComponent) },
-        ], usesInheritance: true, ngImport: i0, template: `
-        <div class="nxe-editor-container">
-            <input
-                class="nxe-editor-input nxe-numberbox-input"
-                type="text"
-                inputmode="decimal"
-                [value]="displayValue()"
-                [readOnly]="readOnly()"
-                [disabled]="disabled()"
-                autocomplete="off"
-                (focus)="focused.set(true)"
-                (blur)="onBlur($event)" />
-        </div>
-        <ng-content />
-        @if (validationError(); as error) {
-            @if (focused()) {
-                <div class="nxe-invalid-message">{{ error }}</div>
-            }
-        }
+        ], viewQueries: [{ propertyName: "fieldRef", first: true, predicate: ["field"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+        <div class="nxe-editor-container">
+            <input
+                #field
+                class="nxe-editor-input nxe-numberbox-input"
+                [attr.tabindex]="tabIndex()"
+                [id]="controlId()"
+                [attr.aria-label]="ariaLabel() || null"
+                [attr.aria-labelledby]="ariaLabelledBy() || null"
+                [attr.aria-invalid]="validationError() ? true : null"
+                [attr.aria-required]="required() ? true : null"
+                type="text"
+                inputmode="decimal"
+                [value]="displayValue()"
+                [readOnly]="readOnly()"
+                [disabled]="disabled()"
+                autocomplete="off"
+                (input)="onFieldInput($event)"
+                (focus)="focused.set(true)"
+                (blur)="onBlur($event)" />
+            @if (clearButtonVisible()) {
+                <span
+                    class="nxe-clear-button-area"
+                    (mousedown)="$event.preventDefault()"
+                    (click)="onClear($event)"
+                    aria-hidden="true">
+                    <!-- A Ø16 disc with a 2px × cut out (the dropdown editors' clear glyph). -->
+                    <svg viewBox="0 0 18 18" focusable="false">
+                        <path fill-rule="evenodd" transform="rotate(45 9 9)"
+                            d="M9 1a8 8 0 1 1 0 16A8 8 0 1 1 9 1ZM8 3.343h2V8h4.657v2H10v4.657H8V10H3.343V8H8Z" />
+                    </svg>
+                </span>
+            }
+        </div>
+        <ng-content />
+        @if (validationError(); as error) {
+            @if (focused()) {
+                <div class="nxe-invalid-message">{{ error }}</div>
+            }
+        }
     `, isInline: true, styles: ["nxe-number-box.text-right .nxe-numberbox-input{text-align:right}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeNumberBoxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'nxe-number-box', standalone: true, template: `
-        <div class="nxe-editor-container">
-            <input
-                class="nxe-editor-input nxe-numberbox-input"
-                type="text"
-                inputmode="decimal"
-                [value]="displayValue()"
-                [readOnly]="readOnly()"
-                [disabled]="disabled()"
-                autocomplete="off"
-                (focus)="focused.set(true)"
-                (blur)="onBlur($event)" />
-        </div>
-        <ng-content />
-        @if (validationError(); as error) {
-            @if (focused()) {
-                <div class="nxe-invalid-message">{{ error }}</div>
-            }
-        }
+            args: [{ selector: 'nxe-number-box', standalone: true, template: `
+        <div class="nxe-editor-container">
+            <input
+                #field
+                class="nxe-editor-input nxe-numberbox-input"
+                [attr.tabindex]="tabIndex()"
+                [id]="controlId()"
+                [attr.aria-label]="ariaLabel() || null"
+                [attr.aria-labelledby]="ariaLabelledBy() || null"
+                [attr.aria-invalid]="validationError() ? true : null"
+                [attr.aria-required]="required() ? true : null"
+                type="text"
+                inputmode="decimal"
+                [value]="displayValue()"
+                [readOnly]="readOnly()"
+                [disabled]="disabled()"
+                autocomplete="off"
+                (input)="onFieldInput($event)"
+                (focus)="focused.set(true)"
+                (blur)="onBlur($event)" />
+            @if (clearButtonVisible()) {
+                <span
+                    class="nxe-clear-button-area"
+                    (mousedown)="$event.preventDefault()"
+                    (click)="onClear($event)"
+                    aria-hidden="true">
+                    <!-- A Ø16 disc with a 2px × cut out (the dropdown editors' clear glyph). -->
+                    <svg viewBox="0 0 18 18" focusable="false">
+                        <path fill-rule="evenodd" transform="rotate(45 9 9)"
+                            d="M9 1a8 8 0 1 1 0 16A8 8 0 1 1 9 1ZM8 3.343h2V8h4.657v2H10v4.657H8V10H3.343V8H8Z" />
+                    </svg>
+                </span>
+            }
+        </div>
+        <ng-content />
+        @if (validationError(); as error) {
+            @if (focused()) {
+                <div class="nxe-invalid-message">{{ error }}</div>
+            }
+        }
     `, host: {
                         class: 'nxe-widget nxe-editor nxe-numberbox',
                         '[class.nxe-focused]': 'focused()',
@@ -487,7 +710,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
                         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NxeNumberBoxComponent), multi: true },
                         { provide: NXE_VALIDATION_TARGET, useExisting: forwardRef(() => NxeNumberBoxComponent) },
                     ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: ["nxe-number-box.text-right .nxe-numberbox-input{text-align:right}\n"] }]
-        }], propDecorators: { formatInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }] } });
+        }], propDecorators: { formatInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], showClearButtonInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], fieldRef: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }] } });
 
 /** Normalize a `[min]`/`[max]` binding (Date object or serialized string) to a DateTime. */
 function toBoundDate(bound) {
@@ -508,6 +731,15 @@ function toBoundDate(bound) {
  * 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.
  */
 class NxeDateBoxComponent extends NxeFormControlBase {
     overlay = inject(Overlay);
@@ -529,6 +761,10 @@ class NxeDateBoxComponent extends NxeFormControlBase {
     ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
     max = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    /** dx `showClearButton` — off by default, as in dx; `NXE_DEFAULT_OPTIONS.dateBox` can turn it on app-wide. */
+    showClearButtonInput = input(undefined, { ...(ngDevMode ? { debugName: "showClearButtonInput" } : /* istanbul ignore next */ {}), alias: 'showClearButton', transform: nxeOptionalBoolean });
+    showClearButton = computed(() => this.showClearButtonInput() ?? this.nxeDefaults.dateBox?.showClearButton ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showClearButton" }] : /* istanbul ignore next */ []));
     focused = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
     opened = signal(false, /* @ts-ignore */
@@ -562,6 +798,11 @@ class NxeDateBoxComponent extends NxeFormControlBase {
     ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
     displayValue = computed(() => formatDisplay(this.selected(), this.effectiveDisplayFormat()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
+    /** The text in the field right now; dx shows the clear button by the field's emptiness. */
+    fieldText = linkedSignal(() => this.displayValue(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fieldText" }] : /* istanbul ignore next */ []));
+    clearButtonVisible = computed(() => this.showClearButton() && !this.readOnly() && !this.disabled() && this.fieldText() !== '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clearButtonVisible" }] : /* istanbul ignore next */ []));
     weeks = computed(() => buildCalendarWeeks(this.viewMonth()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "weeks" }] : /* istanbul ignore next */ []));
     /** Two-digit hour/minute for the popup's time strip; blank when nothing is selected. */
@@ -670,6 +911,21 @@ class NxeDateBoxComponent extends NxeFormControlBase {
         }
         this.opened() ? this.close() : this.open();
     }
+    onFieldInput(event) {
+        this.fieldText.set(event.target.value);
+    }
+    /**
+     * 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.
+     */
+    onClear(event) {
+        this.commitValue(null, event);
+        this.syncField();
+        if (!this.focused()) {
+            this.fieldRef().nativeElement.focus();
+        }
+    }
     onFocus(event) {
         this.textAtFocus = event.target.value;
         this.focused.set(true);
@@ -721,6 +977,7 @@ class NxeDateBoxComponent extends NxeFormControlBase {
         const element = this.fieldRef().nativeElement;
         element.value = this.displayValue();
         this.textAtFocus = element.value;
+        this.fieldText.set(element.value);
     }
     selectDay(day) {
         if (this.isDisabledDay(day)) {
@@ -809,263 +1066,365 @@ class NxeDateBoxComponent extends NxeFormControlBase {
         this.overlayRef?.dispose();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeDateBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxeDateBoxComponent, isStandalone: true, selector: "nxe-date-box", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, displayFormat: { classPropertyName: "displayFormat", publicName: "displayFormat", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.nxe-focused": "focused()", "class.nxe-invalid": "!!validationError()" }, classAttribute: "nxe-widget nxe-editor nxe-datebox" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxeDateBoxComponent, isStandalone: true, selector: "nxe-date-box", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, displayFormat: { classPropertyName: "displayFormat", publicName: "displayFormat", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, showClearButtonInput: { classPropertyName: "showClearButtonInput", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.nxe-focused": "focused()", "class.nxe-invalid": "!!validationError()" }, classAttribute: "nxe-widget nxe-editor nxe-datebox" }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NxeDateBoxComponent), multi: true },
             { provide: NXE_VALIDATION_TARGET, useExisting: forwardRef(() => NxeDateBoxComponent) },
-        ], viewQueries: [{ propertyName: "calendarTemplate", first: true, predicate: ["calendarTemplate"], descendants: true, isSignal: true }, { propertyName: "fieldRef", first: true, predicate: ["field"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
-        <div class="nxe-editor-container">
-            <input
-                #field
-                class="nxe-editor-input nxe-datebox-input"
-                type="text"
-                [value]="displayValue()"
-                [readOnly]="readOnly()"
-                [disabled]="disabled()"
-                [attr.placeholder]="effectivePlaceholder() || null"
-                autocomplete="off"
-                (focus)="onFocus($event)"
-                (blur)="onBlur($event)" />
-            @if (!readOnly()) {
-                <span
-                    class="nxe-datebox-button"
-                    [class.nxe-datebox-open]="opened()"
-                    (mousedown)="onButtonMousedown($event)"
-                    aria-hidden="true">
-                    @if (type() === 'datetime' || type() === 'time') {
-                        <svg class="nxe-datebox-icon" viewBox="0 0 24 24">
-                            <path
-                                d="M12 2a10 10 0 100 20 10 10 0 000-20zm0 18a8 8 0 110-16 8 8 0 010 16zm.5-13H11v6l5.2 3.1.8-1.3-4.5-2.7V7z" />
-                        </svg>
-                    } @else {
-                        <svg class="nxe-datebox-icon" viewBox="0 0 24 24">
-                            <path
-                                d="M19 3h-1V1h-2v2H8V1H6v2H5a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2V5a2 2 0 00-2-2zm0 16H5V8h14v11z" />
-                        </svg>
-                    }
-                </span>
-            }
-        </div>
-        <ng-content />
-        @if (validationError(); as error) {
-            @if (focused()) {
-                <div class="nxe-invalid-message">{{ error }}</div>
-            }
-        }
-
-        <ng-template #calendarTemplate>
-            <div class="nxe-calendar" (mousedown)="$event.preventDefault()">
-                @if (type() !== 'time') {
-                    <div class="nxe-calendar-navigator">
-                        <button type="button" class="nxe-calendar-nav" (click)="navigate(-1)">
-                            <svg class="nxe-calendar-chevron" viewBox="0 0 24 24">
-                                <path d="M15.4 7.4 14 6l-6 6 6 6 1.4-1.4L10.8 12z" />
-                            </svg>
-                        </button>
-                        <button type="button" class="nxe-calendar-caption" (click)="zoomOut()">
-                            {{ caption() }}
-                        </button>
-                        <button type="button" class="nxe-calendar-nav" (click)="navigate(1)">
-                            <svg class="nxe-calendar-chevron" viewBox="0 0 24 24">
-                                <path d="M8.6 16.6 10 18l6-6-6-6-1.4 1.4 4.6 4.6z" />
-                            </svg>
-                        </button>
-                    </div>
-                    @if (zoomLevel() === 'month') {
-                        <div class="nxe-calendar-weekdays">
-                            @for (wd of weekdays; track wd) {
-                                <span>{{ wd }}</span>
-                            }
-                        </div>
-                        <div class="nxe-calendar-grid">
-                            @for (week of weeks(); track $index) {
-                                @for (day of week; track day.toMillis()) {
-                                    <button
-                                        type="button"
-                                        class="nxe-calendar-day"
-                                        [class.nxe-calendar-other]="day.month !== viewMonth().month"
-                                        [class.nxe-calendar-selected]="isSelected(day)"
-                                        [class.nxe-calendar-today]="isToday(day)"
-                                        [disabled]="isDisabledDay(day)"
-                                        (click)="selectDay(day)">
-                                        <span>{{ day.day }}</span>
-                                    </button>
-                                }
-                            }
-                        </div>
-                    } @else {
-                        <div
-                            class="nxe-calendar-periods"
-                            [class.nxe-calendar-periods-century]="zoomLevel() === 'century'">
-                            @for (cell of periodCells(); track cell.anchor.toMillis()) {
-                                <button
-                                    type="button"
-                                    class="nxe-calendar-period"
-                                    [class.nxe-calendar-other]="cell.other"
-                                    [class.nxe-calendar-today]="cell.isNow"
-                                    [disabled]="cell.disabled"
-                                    (click)="selectPeriod(cell)">
-                                    <span>{{ cell.label }}</span>
-                                </button>
-                            }
-                        </div>
-                    }
-                }
-                @if (type() !== 'date') {
-                    <div class="nxe-calendar-time">
-                        <input
-                            class="nxe-calendar-time-part"
-                            type="text"
-                            inputmode="numeric"
-                            maxlength="2"
-                            aria-label="Hour"
-                            [value]="hourText()"
-                            (change)="setTimePart('hour', $event)" />
-                        <span class="nxe-calendar-time-sep" aria-hidden="true">:</span>
-                        <input
-                            class="nxe-calendar-time-part"
-                            type="text"
-                            inputmode="numeric"
-                            maxlength="2"
-                            aria-label="Minute"
-                            [value]="minuteText()"
-                            (change)="setTimePart('minute', $event)" />
-                        <button type="button" class="nxe-calendar-time-btn" (click)="setNow()">Now</button>
-                        <button type="button" class="nxe-calendar-time-btn nxe-calendar-time-done" (click)="close()">
-                            Done
-                        </button>
-                    </div>
-                }
-            </div>
-        </ng-template>
-    `, isInline: true, styles: ["nxe-date-box .nxe-datebox-button{flex:0 0 34px;align-self:stretch;display:inline-flex;align-items:center;justify-content:center;width:34px;cursor:pointer;color:#333;border-radius:4px}nxe-date-box .nxe-datebox-icon{width:18px;height:18px;fill:currentColor}nxe-date-box .nxe-editor-container:has(>.nxe-datebox-button){--nxe-invalid-badge-inset: 38px}nxe-date-box.nxe-readonly .nxe-datebox-button,nxe-date-box.nxe-disabled .nxe-datebox-button{cursor:default}nxe-date-box.nxe-readonly .nxe-datebox-button:hover,nxe-date-box.nxe-disabled .nxe-datebox-button:hover{background-color:transparent}.nxe-calendar{width:298px;box-sizing:border-box;padding:8px;background:#fff;border:1px solid #ddd;border-radius:6px;box-shadow:0 6px 12px #0000002e;color:#333;font-size:12px;-webkit-user-select:none;user-select:none}.nxe-calendar-navigator{display:flex;height:36px;margin-bottom:8px}.nxe-calendar-nav,.nxe-calendar-caption{display:inline-flex;align-items:center;justify-content:center;border:1px solid #ddd;background:transparent;color:#333;cursor:pointer;padding:0}.nxe-calendar-nav:hover,.nxe-calendar-caption:hover{background:#0000000a}.nxe-calendar-nav{flex:0 0 36px}.nxe-calendar-nav:first-child{border-radius:4px 0 0 4px}.nxe-calendar-nav:last-child{border-radius:0 4px 4px 0}.nxe-calendar-caption{flex:1;margin:0 -1px;font-size:12px;font-weight:600}.nxe-calendar-chevron{width:18px;height:18px;fill:currentColor}.nxe-calendar-weekdays{display:grid;grid-template-columns:repeat(7,1fr);align-items:center;height:24px;text-align:center;color:#333;font-size:10px;font-weight:500}.nxe-calendar-grid{display:grid;grid-template-columns:repeat(7,1fr)}.nxe-calendar-day,.nxe-calendar-period{display:flex;align-items:center;justify-content:center;border:0;background:transparent;cursor:pointer;padding:0;font-size:14px;line-height:1;color:#333}.nxe-calendar-day span,.nxe-calendar-period span{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;border-radius:4px}.nxe-calendar-day:hover:not(:disabled) span,.nxe-calendar-period:hover:not(:disabled) span{background:#337ab73d}.nxe-calendar-day:disabled,.nxe-calendar-period:disabled{cursor:default;color:#33333361}.nxe-calendar-day{height:33px}.nxe-calendar-day span{width:28px;height:28px}.nxe-calendar-periods{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:74px}.nxe-calendar-period span{min-width:54px;height:54px;padding:0 4px}.nxe-calendar-periods-century .nxe-calendar-period span{width:40px;min-width:0;height:auto;min-height:56px;padding:4px 0;white-space:normal;text-align:center;line-height:1.4}.nxe-calendar-other{color:#33333361}.nxe-calendar-today span{border:2px solid #337ab7}.nxe-calendar-selected span,.nxe-calendar-selected:hover:not(:disabled) span{background:#337ab7;color:#fff;box-shadow:0 0 0 2px #337ab780;border:0}.nxe-calendar-time{display:flex;align-items:center;gap:4px;margin-top:8px;padding-top:8px;border-top:1px solid #ddd}.nxe-calendar-time-part{width:2.6em;height:2.2em;box-sizing:border-box;padding:0 .25em;border:1px solid #ddd;border-radius:4px;background:#fff;color:#333;font-size:inherit;font-variant-numeric:tabular-nums;text-align:center}.nxe-calendar-time-part:focus{outline:2px solid #337ab7;outline-offset:-2px}.nxe-calendar-time-sep{font-weight:600}.nxe-calendar-time-btn{height:2.2em;padding:0 .75em;border:1px solid #ddd;border-radius:4px;background:transparent;color:#333;font-size:inherit;cursor:pointer}.nxe-calendar-time-btn:hover{background:#0000000a}.nxe-calendar-time-btn:focus-visible{outline:2px solid #337ab7;outline-offset:-2px}.nxe-calendar-time-done{margin-left:auto}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], viewQueries: [{ propertyName: "calendarTemplate", first: true, predicate: ["calendarTemplate"], descendants: true, isSignal: true }, { propertyName: "fieldRef", first: true, predicate: ["field"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+        <div class="nxe-editor-container">
+            <input
+                #field
+                class="nxe-editor-input nxe-datebox-input"
+                [attr.tabindex]="tabIndex()"
+                [id]="controlId()"
+                [attr.aria-label]="ariaLabel() || null"
+                [attr.aria-labelledby]="ariaLabelledBy() || null"
+                [attr.aria-invalid]="validationError() ? true : null"
+                [attr.aria-required]="required() ? true : null"
+                type="text"
+                [value]="displayValue()"
+                [readOnly]="readOnly()"
+                [disabled]="disabled()"
+                [attr.placeholder]="effectivePlaceholder() || null"
+                autocomplete="off"
+                (input)="onFieldInput($event)"
+                (focus)="onFocus($event)"
+                (blur)="onBlur($event)" />
+            @if (clearButtonVisible()) {
+                <span
+                    class="nxe-clear-button-area"
+                    (mousedown)="$event.preventDefault()"
+                    (click)="onClear($event)"
+                    aria-hidden="true">
+                    <!-- A Ø16 disc with a 2px × cut out (the dropdown editors' clear glyph). -->
+                    <svg viewBox="0 0 18 18" focusable="false">
+                        <path fill-rule="evenodd" transform="rotate(45 9 9)"
+                            d="M9 1a8 8 0 1 1 0 16A8 8 0 1 1 9 1ZM8 3.343h2V8h4.657v2H10v4.657H8V10H3.343V8H8Z" />
+                    </svg>
+                </span>
+            }
+            @if (!readOnly()) {
+                <span
+                    class="nxe-datebox-button"
+                    [class.nxe-datebox-open]="opened()"
+                    (mousedown)="onButtonMousedown($event)"
+                    aria-hidden="true">
+                    @switch (type()) {
+                        @case ('time') {
+                            <!-- dx clock, a 16x16 ink box round the box centre: a 2px ring (an r 7
+                                 circle stroked 2px), a 2x4 hand straight up from the centre, a 1.5x4
+                                 hand turned 45° down-right, and a Ø2 hub where they meet. -->
+                            <svg class="nxe-datebox-icon nxe-datebox-icon-time" viewBox="0 0 18 18" focusable="false">
+                                <circle cx="9" cy="9" r="7" fill="none" stroke="currentColor" stroke-width="2" />
+                                <rect x="8" y="5" width="2" height="4" />
+                                <rect x="9" y="8.25" width="4" height="1.5" transform="rotate(45 9 9)" />
+                                <circle cx="9" cy="9" r="1" />
+                            </svg>
+                        }
+                        @case ('datetime') {
+                            <!-- dx eventall: the calendar page below, without its day marker. -->
+                            <svg class="nxe-datebox-icon nxe-datebox-icon-datetime" viewBox="0 0 18 18" focusable="false">
+                                <rect x="3" y="3" width="12" height="12" rx="1" fill="none" stroke="currentColor" stroke-width="2" />
+                                <rect x="3" y="3" width="12" height="3" />
+                                <rect x="4" y="1" width="2" height="1.5" />
+                                <rect x="12" y="1" width="2" height="1.5" />
+                            </svg>
+                        }
+                        @default {
+                            <!-- dx event, a 14x15 ink box from 1px below the top of the 18px box
+                                 (where dx's glyph renders): the page is a 12x12 rect with 1px corners
+                                 stroked 2px, so 14x14 with 2px corners outside and square inside; a
+                                 12x3 bar under its top wall makes the 4px header band; two 2x1.5
+                                 binder tabs stand 1px proud of it; a 4x4 day marker at (9, 9). -->
+                            <svg class="nxe-datebox-icon nxe-datebox-icon-date" viewBox="0 0 18 18" focusable="false">
+                                <rect x="3" y="3" width="12" height="12" rx="1" fill="none" stroke="currentColor" stroke-width="2" />
+                                <rect x="3" y="3" width="12" height="3" />
+                                <rect x="4" y="1" width="2" height="1.5" />
+                                <rect x="12" y="1" width="2" height="1.5" />
+                                <rect x="9" y="9" width="4" height="4" />
+                            </svg>
+                        }
+                    }
+                </span>
+            }
+        </div>
+        <ng-content />
+        @if (validationError(); as error) {
+            @if (focused()) {
+                <div class="nxe-invalid-message">{{ error }}</div>
+            }
+        }
+
+        <ng-template #calendarTemplate>
+            <div class="nxe-calendar" (mousedown)="$event.preventDefault()">
+                @if (type() !== 'time') {
+                    <div class="nxe-calendar-navigator">
+                        <button type="button" class="nxe-calendar-nav" (click)="navigate(-1)">
+                            <!-- dx chevronleft (8x14 ink, centred in its 18px box): two 45° arms
+                                 whose outer edges run 7px out and 7px up and down from the point,
+                                 their ends cut square 1.25px across and down (a 1.77px stroke),
+                                 meeting 2.5px behind it. That draws 8.25x14, centred by putting the
+                                 point at x 4.875, and rasterises to dx's 8x14. -->
+                            <svg class="nxe-calendar-chevron" viewBox="0 0 18 18" focusable="false">
+                                <polygon points="4.875 9 11.875 2 13.125 3.25 7.375 9 13.125 14.75 11.875 16" />
+                            </svg>
+                        </button>
+                        <button type="button" class="nxe-calendar-caption" (click)="zoomOut()">
+                            {{ caption() }}
+                        </button>
+                        <button type="button" class="nxe-calendar-nav" (click)="navigate(1)">
+                            <!-- dx chevronright: the same chevron mirrored about x 9. -->
+                            <svg class="nxe-calendar-chevron" viewBox="0 0 18 18" focusable="false">
+                                <polygon points="13.125 9 6.125 2 4.875 3.25 10.625 9 4.875 14.75 6.125 16" />
+                            </svg>
+                        </button>
+                    </div>
+                    @if (zoomLevel() === 'month') {
+                        <div class="nxe-calendar-weekdays">
+                            @for (wd of weekdays; track wd) {
+                                <span>{{ wd }}</span>
+                            }
+                        </div>
+                        <div class="nxe-calendar-grid">
+                            @for (week of weeks(); track $index) {
+                                @for (day of week; track day.toMillis()) {
+                                    <button
+                                        type="button"
+                                        class="nxe-calendar-day"
+                                        [class.nxe-calendar-other]="day.month !== viewMonth().month"
+                                        [class.nxe-calendar-selected]="isSelected(day)"
+                                        [class.nxe-calendar-today]="isToday(day)"
+                                        [disabled]="isDisabledDay(day)"
+                                        (click)="selectDay(day)">
+                                        <span>{{ day.day }}</span>
+                                    </button>
+                                }
+                            }
+                        </div>
+                    } @else {
+                        <div
+                            class="nxe-calendar-periods"
+                            [class.nxe-calendar-periods-century]="zoomLevel() === 'century'">
+                            @for (cell of periodCells(); track cell.anchor.toMillis()) {
+                                <button
+                                    type="button"
+                                    class="nxe-calendar-period"
+                                    [class.nxe-calendar-other]="cell.other"
+                                    [class.nxe-calendar-today]="cell.isNow"
+                                    [disabled]="cell.disabled"
+                                    (click)="selectPeriod(cell)">
+                                    <span>{{ cell.label }}</span>
+                                </button>
+                            }
+                        </div>
+                    }
+                }
+                @if (type() !== 'date') {
+                    <div class="nxe-calendar-time">
+                        <input
+                            class="nxe-calendar-time-part"
+                            type="text"
+                            inputmode="numeric"
+                            maxlength="2"
+                            aria-label="Hour"
+                            [value]="hourText()"
+                            (change)="setTimePart('hour', $event)" />
+                        <span class="nxe-calendar-time-sep" aria-hidden="true">:</span>
+                        <input
+                            class="nxe-calendar-time-part"
+                            type="text"
+                            inputmode="numeric"
+                            maxlength="2"
+                            aria-label="Minute"
+                            [value]="minuteText()"
+                            (change)="setTimePart('minute', $event)" />
+                        <button type="button" class="nxe-calendar-time-btn" (click)="setNow()">Now</button>
+                        <button type="button" class="nxe-calendar-time-btn nxe-calendar-time-done" (click)="close()">
+                            Done
+                        </button>
+                    </div>
+                }
+            </div>
+        </ng-template>
+    `, isInline: true, styles: ["nxe-date-box .nxe-datebox-button{box-sizing:border-box;position:relative;flex:0 0 34px;align-self:stretch;display:inline-flex;align-items:center;justify-content:center;width:34px;min-width:34px;padding:1px;border-radius:4px;background-clip:content-box;color:#333;cursor:pointer}nxe-date-box .nxe-datebox-button svg{display:block;width:18px;height:18px;fill:currentColor}nxe-date-box:hover:not(.nxe-disabled) .nxe-datebox-button,nxe-date-box:active:not(.nxe-disabled) .nxe-datebox-button{background-color:#e6e6e6}nxe-date-box .nxe-datebox-button.nxe-datebox-open{background-color:#b3b3b3}nxe-date-box .nxe-datebox-icon{width:18px;height:18px;fill:currentColor}nxe-date-box .nxe-editor-container:has(>.nxe-datebox-button){--nxe-invalid-badge-inset: 38px}nxe-date-box .nxe-editor-container:has(>.nxe-clear-button-area):has(>.nxe-datebox-button){--nxe-invalid-badge-inset: 72px}nxe-date-box.nxe-readonly .nxe-datebox-button,nxe-date-box.nxe-disabled .nxe-datebox-button{cursor:default}nxe-date-box.nxe-readonly .nxe-datebox-button:hover,nxe-date-box.nxe-disabled .nxe-datebox-button:hover{background-color:transparent}.nxe-calendar{width:298px;box-sizing:border-box;padding:8px;background:#fff;border:1px solid #ddd;border-radius:6px;box-shadow:0 6px 12px #0000002e;color:#333;font-size:var(--nxe-ui-font-size, 12px);-webkit-user-select:none;user-select:none}.nxe-calendar-navigator{display:flex;height:36px;margin-bottom:8px}.nxe-calendar-nav,.nxe-calendar-caption{display:inline-flex;align-items:center;justify-content:center;border:1px solid #ddd;background:transparent;color:#333;cursor:pointer;padding:0}.nxe-calendar-nav:hover,.nxe-calendar-caption:hover{background:#0000000a}.nxe-calendar-nav:active,.nxe-calendar-caption:active{background:#0000003d}.nxe-calendar-nav{flex:0 0 36px}.nxe-calendar-nav:first-child{border-radius:4px 0 0 4px}.nxe-calendar-nav:last-child{border-radius:0 4px 4px 0}.nxe-calendar-caption{flex:1;margin:0 -1px;font-size:inherit;font-weight:600}.nxe-calendar-chevron{width:18px;height:18px;fill:currentColor}.nxe-calendar-weekdays{display:grid;grid-template-columns:repeat(7,1fr);align-items:center;height:24px;text-align:center;color:#333;font-size:10px;font-weight:500}.nxe-calendar-grid{display:grid;grid-template-columns:repeat(7,1fr)}.nxe-calendar-day,.nxe-calendar-period{display:flex;align-items:center;justify-content:center;border:0;background:transparent;cursor:pointer;padding:0;font-size:14px;line-height:1;color:#333}.nxe-calendar-day span,.nxe-calendar-period span{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;border-radius:4px}.nxe-calendar-day:hover:not(:disabled) span,.nxe-calendar-period:hover:not(:disabled) span{background:#337ab73d}.nxe-calendar-day:disabled,.nxe-calendar-period:disabled{cursor:default;color:#33333361}.nxe-calendar-day{height:33px}.nxe-calendar-day span{width:28px;height:28px}.nxe-calendar-periods{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:74px}.nxe-calendar-period span{min-width:54px;height:54px;padding:0 4px}.nxe-calendar-periods-century .nxe-calendar-period span{width:40px;min-width:0;height:auto;min-height:56px;padding:4px 0;white-space:normal;text-align:center;line-height:1.4}.nxe-calendar-other{color:#33333361}.nxe-calendar-today span{border:2px solid #337ab7}.nxe-calendar-selected span,.nxe-calendar-selected:hover:not(:disabled) span{background:#337ab7;color:#fff;box-shadow:0 0 0 2px #337ab780;border:0}.nxe-calendar-time{display:flex;align-items:center;gap:4px;margin-top:8px;padding-top:8px;border-top:1px solid #ddd}.nxe-calendar-time-part{width:2.6em;height:2.2em;box-sizing:border-box;padding:0 .25em;border:1px solid #ddd;border-radius:4px;background:#fff;color:#333;font-size:inherit;font-variant-numeric:tabular-nums;text-align:center}.nxe-calendar-time-part:focus{outline:2px solid #337ab7;outline-offset:-2px}.nxe-calendar-time-sep{font-weight:600}.nxe-calendar-time-btn{height:2.2em;padding:0 .75em;border:1px solid #ddd;border-radius:4px;background:transparent;color:#333;font-size:inherit;cursor:pointer}.nxe-calendar-time-btn:hover{background:#0000000a}.nxe-calendar-time-btn:focus-visible{outline:2px solid #337ab7;outline-offset:-2px}.nxe-calendar-time-done{margin-left:auto}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeDateBoxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'nxe-date-box', standalone: true, template: `
-        <div class="nxe-editor-container">
-            <input
-                #field
-                class="nxe-editor-input nxe-datebox-input"
-                type="text"
-                [value]="displayValue()"
-                [readOnly]="readOnly()"
-                [disabled]="disabled()"
-                [attr.placeholder]="effectivePlaceholder() || null"
-                autocomplete="off"
-                (focus)="onFocus($event)"
-                (blur)="onBlur($event)" />
-            @if (!readOnly()) {
-                <span
-                    class="nxe-datebox-button"
-                    [class.nxe-datebox-open]="opened()"
-                    (mousedown)="onButtonMousedown($event)"
-                    aria-hidden="true">
-                    @if (type() === 'datetime' || type() === 'time') {
-                        <svg class="nxe-datebox-icon" viewBox="0 0 24 24">
-                            <path
-                                d="M12 2a10 10 0 100 20 10 10 0 000-20zm0 18a8 8 0 110-16 8 8 0 010 16zm.5-13H11v6l5.2 3.1.8-1.3-4.5-2.7V7z" />
-                        </svg>
-                    } @else {
-                        <svg class="nxe-datebox-icon" viewBox="0 0 24 24">
-                            <path
-                                d="M19 3h-1V1h-2v2H8V1H6v2H5a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2V5a2 2 0 00-2-2zm0 16H5V8h14v11z" />
-                        </svg>
-                    }
-                </span>
-            }
-        </div>
-        <ng-content />
-        @if (validationError(); as error) {
-            @if (focused()) {
-                <div class="nxe-invalid-message">{{ error }}</div>
-            }
-        }
-
-        <ng-template #calendarTemplate>
-            <div class="nxe-calendar" (mousedown)="$event.preventDefault()">
-                @if (type() !== 'time') {
-                    <div class="nxe-calendar-navigator">
-                        <button type="button" class="nxe-calendar-nav" (click)="navigate(-1)">
-                            <svg class="nxe-calendar-chevron" viewBox="0 0 24 24">
-                                <path d="M15.4 7.4 14 6l-6 6 6 6 1.4-1.4L10.8 12z" />
-                            </svg>
-                        </button>
-                        <button type="button" class="nxe-calendar-caption" (click)="zoomOut()">
-                            {{ caption() }}
-                        </button>
-                        <button type="button" class="nxe-calendar-nav" (click)="navigate(1)">
-                            <svg class="nxe-calendar-chevron" viewBox="0 0 24 24">
-                                <path d="M8.6 16.6 10 18l6-6-6-6-1.4 1.4 4.6 4.6z" />
-                            </svg>
-                        </button>
-                    </div>
-                    @if (zoomLevel() === 'month') {
-                        <div class="nxe-calendar-weekdays">
-                            @for (wd of weekdays; track wd) {
-                                <span>{{ wd }}</span>
-                            }
-                        </div>
-                        <div class="nxe-calendar-grid">
-                            @for (week of weeks(); track $index) {
-                                @for (day of week; track day.toMillis()) {
-                                    <button
-                                        type="button"
-                                        class="nxe-calendar-day"
-                                        [class.nxe-calendar-other]="day.month !== viewMonth().month"
-                                        [class.nxe-calendar-selected]="isSelected(day)"
-                                        [class.nxe-calendar-today]="isToday(day)"
-                                        [disabled]="isDisabledDay(day)"
-                                        (click)="selectDay(day)">
-                                        <span>{{ day.day }}</span>
-                                    </button>
-                                }
-                            }
-                        </div>
-                    } @else {
-                        <div
-                            class="nxe-calendar-periods"
-                            [class.nxe-calendar-periods-century]="zoomLevel() === 'century'">
-                            @for (cell of periodCells(); track cell.anchor.toMillis()) {
-                                <button
-                                    type="button"
-                                    class="nxe-calendar-period"
-                                    [class.nxe-calendar-other]="cell.other"
-                                    [class.nxe-calendar-today]="cell.isNow"
-                                    [disabled]="cell.disabled"
-                                    (click)="selectPeriod(cell)">
-                                    <span>{{ cell.label }}</span>
-                                </button>
-                            }
-                        </div>
-                    }
-                }
-                @if (type() !== 'date') {
-                    <div class="nxe-calendar-time">
-                        <input
-                            class="nxe-calendar-time-part"
-                            type="text"
-                            inputmode="numeric"
-                            maxlength="2"
-                            aria-label="Hour"
-                            [value]="hourText()"
-                            (change)="setTimePart('hour', $event)" />
-                        <span class="nxe-calendar-time-sep" aria-hidden="true">:</span>
-                        <input
-                            class="nxe-calendar-time-part"
-                            type="text"
-                            inputmode="numeric"
-                            maxlength="2"
-                            aria-label="Minute"
-                            [value]="minuteText()"
-                            (change)="setTimePart('minute', $event)" />
-                        <button type="button" class="nxe-calendar-time-btn" (click)="setNow()">Now</button>
-                        <button type="button" class="nxe-calendar-time-btn nxe-calendar-time-done" (click)="close()">
-                            Done
-                        </button>
-                    </div>
-                }
-            </div>
-        </ng-template>
+            args: [{ selector: 'nxe-date-box', standalone: true, template: `
+        <div class="nxe-editor-container">
+            <input
+                #field
+                class="nxe-editor-input nxe-datebox-input"
+                [attr.tabindex]="tabIndex()"
+                [id]="controlId()"
+                [attr.aria-label]="ariaLabel() || null"
+                [attr.aria-labelledby]="ariaLabelledBy() || null"
+                [attr.aria-invalid]="validationError() ? true : null"
+                [attr.aria-required]="required() ? true : null"
+                type="text"
+                [value]="displayValue()"
+                [readOnly]="readOnly()"
+                [disabled]="disabled()"
+                [attr.placeholder]="effectivePlaceholder() || null"
+                autocomplete="off"
+                (input)="onFieldInput($event)"
+                (focus)="onFocus($event)"
+                (blur)="onBlur($event)" />
+            @if (clearButtonVisible()) {
+                <span
+                    class="nxe-clear-button-area"
+                    (mousedown)="$event.preventDefault()"
+                    (click)="onClear($event)"
+                    aria-hidden="true">
+                    <!-- A Ø16 disc with a 2px × cut out (the dropdown editors' clear glyph). -->
+                    <svg viewBox="0 0 18 18" focusable="false">
+                        <path fill-rule="evenodd" transform="rotate(45 9 9)"
+                            d="M9 1a8 8 0 1 1 0 16A8 8 0 1 1 9 1ZM8 3.343h2V8h4.657v2H10v4.657H8V10H3.343V8H8Z" />
+                    </svg>
+                </span>
+            }
+            @if (!readOnly()) {
+                <span
+                    class="nxe-datebox-button"
+                    [class.nxe-datebox-open]="opened()"
+                    (mousedown)="onButtonMousedown($event)"
+                    aria-hidden="true">
+                    @switch (type()) {
+                        @case ('time') {
+                            <!-- dx clock, a 16x16 ink box round the box centre: a 2px ring (an r 7
+                                 circle stroked 2px), a 2x4 hand straight up from the centre, a 1.5x4
+                                 hand turned 45° down-right, and a Ø2 hub where they meet. -->
+                            <svg class="nxe-datebox-icon nxe-datebox-icon-time" viewBox="0 0 18 18" focusable="false">
+                                <circle cx="9" cy="9" r="7" fill="none" stroke="currentColor" stroke-width="2" />
+                                <rect x="8" y="5" width="2" height="4" />
+                                <rect x="9" y="8.25" width="4" height="1.5" transform="rotate(45 9 9)" />
+                                <circle cx="9" cy="9" r="1" />
+                            </svg>
+                        }
+                        @case ('datetime') {
+                            <!-- dx eventall: the calendar page below, without its day marker. -->
+                            <svg class="nxe-datebox-icon nxe-datebox-icon-datetime" viewBox="0 0 18 18" focusable="false">
+                                <rect x="3" y="3" width="12" height="12" rx="1" fill="none" stroke="currentColor" stroke-width="2" />
+                                <rect x="3" y="3" width="12" height="3" />
+                                <rect x="4" y="1" width="2" height="1.5" />
+                                <rect x="12" y="1" width="2" height="1.5" />
+                            </svg>
+                        }
+                        @default {
+                            <!-- dx event, a 14x15 ink box from 1px below the top of the 18px box
+                                 (where dx's glyph renders): the page is a 12x12 rect with 1px corners
+                                 stroked 2px, so 14x14 with 2px corners outside and square inside; a
+                                 12x3 bar under its top wall makes the 4px header band; two 2x1.5
+                                 binder tabs stand 1px proud of it; a 4x4 day marker at (9, 9). -->
+                            <svg class="nxe-datebox-icon nxe-datebox-icon-date" viewBox="0 0 18 18" focusable="false">
+                                <rect x="3" y="3" width="12" height="12" rx="1" fill="none" stroke="currentColor" stroke-width="2" />
+                                <rect x="3" y="3" width="12" height="3" />
+                                <rect x="4" y="1" width="2" height="1.5" />
+                                <rect x="12" y="1" width="2" height="1.5" />
+                                <rect x="9" y="9" width="4" height="4" />
+                            </svg>
+                        }
+                    }
+                </span>
+            }
+        </div>
+        <ng-content />
+        @if (validationError(); as error) {
+            @if (focused()) {
+                <div class="nxe-invalid-message">{{ error }}</div>
+            }
+        }
+
+        <ng-template #calendarTemplate>
+            <div class="nxe-calendar" (mousedown)="$event.preventDefault()">
+                @if (type() !== 'time') {
+                    <div class="nxe-calendar-navigator">
+                        <button type="button" class="nxe-calendar-nav" (click)="navigate(-1)">
+                            <!-- dx chevronleft (8x14 ink, centred in its 18px box): two 45° arms
+                                 whose outer edges run 7px out and 7px up and down from the point,
+                                 their ends cut square 1.25px across and down (a 1.77px stroke),
+                                 meeting 2.5px behind it. That draws 8.25x14, centred by putting the
+                                 point at x 4.875, and rasterises to dx's 8x14. -->
+                            <svg class="nxe-calendar-chevron" viewBox="0 0 18 18" focusable="false">
+                                <polygon points="4.875 9 11.875 2 13.125 3.25 7.375 9 13.125 14.75 11.875 16" />
+                            </svg>
+                        </button>
+                        <button type="button" class="nxe-calendar-caption" (click)="zoomOut()">
+                            {{ caption() }}
+                        </button>
+                        <button type="button" class="nxe-calendar-nav" (click)="navigate(1)">
+                            <!-- dx chevronright: the same chevron mirrored about x 9. -->
+                            <svg class="nxe-calendar-chevron" viewBox="0 0 18 18" focusable="false">
+                                <polygon points="13.125 9 6.125 2 4.875 3.25 10.625 9 4.875 14.75 6.125 16" />
+                            </svg>
+                        </button>
+                    </div>
+                    @if (zoomLevel() === 'month') {
+                        <div class="nxe-calendar-weekdays">
+                            @for (wd of weekdays; track wd) {
+                                <span>{{ wd }}</span>
+                            }
+                        </div>
+                        <div class="nxe-calendar-grid">
+                            @for (week of weeks(); track $index) {
+                                @for (day of week; track day.toMillis()) {
+                                    <button
+                                        type="button"
+                                        class="nxe-calendar-day"
+                                        [class.nxe-calendar-other]="day.month !== viewMonth().month"
+                                        [class.nxe-calendar-selected]="isSelected(day)"
+                                        [class.nxe-calendar-today]="isToday(day)"
+                                        [disabled]="isDisabledDay(day)"
+                                        (click)="selectDay(day)">
+                                        <span>{{ day.day }}</span>
+                                    </button>
+                                }
+                            }
+                        </div>
+                    } @else {
+                        <div
+                            class="nxe-calendar-periods"
+                            [class.nxe-calendar-periods-century]="zoomLevel() === 'century'">
+                            @for (cell of periodCells(); track cell.anchor.toMillis()) {
+                                <button
+                                    type="button"
+                                    class="nxe-calendar-period"
+                                    [class.nxe-calendar-other]="cell.other"
+                                    [class.nxe-calendar-today]="cell.isNow"
+                                    [disabled]="cell.disabled"
+                                    (click)="selectPeriod(cell)">
+                                    <span>{{ cell.label }}</span>
+                                </button>
+                            }
+                        </div>
+                    }
+                }
+                @if (type() !== 'date') {
+                    <div class="nxe-calendar-time">
+                        <input
+                            class="nxe-calendar-time-part"
+                            type="text"
+                            inputmode="numeric"
+                            maxlength="2"
+                            aria-label="Hour"
+                            [value]="hourText()"
+                            (change)="setTimePart('hour', $event)" />
+                        <span class="nxe-calendar-time-sep" aria-hidden="true">:</span>
+                        <input
+                            class="nxe-calendar-time-part"
+                            type="text"
+                            inputmode="numeric"
+                            maxlength="2"
+                            aria-label="Minute"
+                            [value]="minuteText()"
+                            (change)="setTimePart('minute', $event)" />
+                        <button type="button" class="nxe-calendar-time-btn" (click)="setNow()">Now</button>
+                        <button type="button" class="nxe-calendar-time-btn nxe-calendar-time-done" (click)="close()">
+                            Done
+                        </button>
+                    </div>
+                }
+            </div>
+        </ng-template>
     `, host: {
                         class: 'nxe-widget nxe-editor nxe-datebox',
                         '[class.nxe-focused]': 'focused()',
@@ -1073,13 +1432,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
                     }, providers: [
                         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NxeDateBoxComponent), multi: true },
                         { provide: NXE_VALIDATION_TARGET, useExisting: forwardRef(() => NxeDateBoxComponent) },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: ["nxe-date-box .nxe-datebox-button{flex:0 0 34px;align-self:stretch;display:inline-flex;align-items:center;justify-content:center;width:34px;cursor:pointer;color:#333;border-radius:4px}nxe-date-box .nxe-datebox-icon{width:18px;height:18px;fill:currentColor}nxe-date-box .nxe-editor-container:has(>.nxe-datebox-button){--nxe-invalid-badge-inset: 38px}nxe-date-box.nxe-readonly .nxe-datebox-button,nxe-date-box.nxe-disabled .nxe-datebox-button{cursor:default}nxe-date-box.nxe-readonly .nxe-datebox-button:hover,nxe-date-box.nxe-disabled .nxe-datebox-button:hover{background-color:transparent}.nxe-calendar{width:298px;box-sizing:border-box;padding:8px;background:#fff;border:1px solid #ddd;border-radius:6px;box-shadow:0 6px 12px #0000002e;color:#333;font-size:12px;-webkit-user-select:none;user-select:none}.nxe-calendar-navigator{display:flex;height:36px;margin-bottom:8px}.nxe-calendar-nav,.nxe-calendar-caption{display:inline-flex;align-items:center;justify-content:center;border:1px solid #ddd;background:transparent;color:#333;cursor:pointer;padding:0}.nxe-calendar-nav:hover,.nxe-calendar-caption:hover{background:#0000000a}.nxe-calendar-nav{flex:0 0 36px}.nxe-calendar-nav:first-child{border-radius:4px 0 0 4px}.nxe-calendar-nav:last-child{border-radius:0 4px 4px 0}.nxe-calendar-caption{flex:1;margin:0 -1px;font-size:12px;font-weight:600}.nxe-calendar-chevron{width:18px;height:18px;fill:currentColor}.nxe-calendar-weekdays{display:grid;grid-template-columns:repeat(7,1fr);align-items:center;height:24px;text-align:center;color:#333;font-size:10px;font-weight:500}.nxe-calendar-grid{display:grid;grid-template-columns:repeat(7,1fr)}.nxe-calendar-day,.nxe-calendar-period{display:flex;align-items:center;justify-content:center;border:0;background:transparent;cursor:pointer;padding:0;font-size:14px;line-height:1;color:#333}.nxe-calendar-day span,.nxe-calendar-period span{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;border-radius:4px}.nxe-calendar-day:hover:not(:disabled) span,.nxe-calendar-period:hover:not(:disabled) span{background:#337ab73d}.nxe-calendar-day:disabled,.nxe-calendar-period:disabled{cursor:default;color:#33333361}.nxe-calendar-day{height:33px}.nxe-calendar-day span{width:28px;height:28px}.nxe-calendar-periods{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:74px}.nxe-calendar-period span{min-width:54px;height:54px;padding:0 4px}.nxe-calendar-periods-century .nxe-calendar-period span{width:40px;min-width:0;height:auto;min-height:56px;padding:4px 0;white-space:normal;text-align:center;line-height:1.4}.nxe-calendar-other{color:#33333361}.nxe-calendar-today span{border:2px solid #337ab7}.nxe-calendar-selected span,.nxe-calendar-selected:hover:not(:disabled) span{background:#337ab7;color:#fff;box-shadow:0 0 0 2px #337ab780;border:0}.nxe-calendar-time{display:flex;align-items:center;gap:4px;margin-top:8px;padding-top:8px;border-top:1px solid #ddd}.nxe-calendar-time-part{width:2.6em;height:2.2em;box-sizing:border-box;padding:0 .25em;border:1px solid #ddd;border-radius:4px;background:#fff;color:#333;font-size:inherit;font-variant-numeric:tabular-nums;text-align:center}.nxe-calendar-time-part:focus{outline:2px solid #337ab7;outline-offset:-2px}.nxe-calendar-time-sep{font-weight:600}.nxe-calendar-time-btn{height:2.2em;padding:0 .75em;border:1px solid #ddd;border-radius:4px;background:transparent;color:#333;font-size:inherit;cursor:pointer}.nxe-calendar-time-btn:hover{background:#0000000a}.nxe-calendar-time-btn:focus-visible{outline:2px solid #337ab7;outline-offset:-2px}.nxe-calendar-time-done{margin-left:auto}\n"] }]
-        }], propDecorators: { calendarTemplate: [{ type: i0.ViewChild, args: ['calendarTemplate', { isSignal: true }] }], fieldRef: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], displayFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayFormat", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }] } });
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: ["nxe-date-box .nxe-datebox-button{box-sizing:border-box;position:relative;flex:0 0 34px;align-self:stretch;display:inline-flex;align-items:center;justify-content:center;width:34px;min-width:34px;padding:1px;border-radius:4px;background-clip:content-box;color:#333;cursor:pointer}nxe-date-box .nxe-datebox-button svg{display:block;width:18px;height:18px;fill:currentColor}nxe-date-box:hover:not(.nxe-disabled) .nxe-datebox-button,nxe-date-box:active:not(.nxe-disabled) .nxe-datebox-button{background-color:#e6e6e6}nxe-date-box .nxe-datebox-button.nxe-datebox-open{background-color:#b3b3b3}nxe-date-box .nxe-datebox-icon{width:18px;height:18px;fill:currentColor}nxe-date-box .nxe-editor-container:has(>.nxe-datebox-button){--nxe-invalid-badge-inset: 38px}nxe-date-box .nxe-editor-container:has(>.nxe-clear-button-area):has(>.nxe-datebox-button){--nxe-invalid-badge-inset: 72px}nxe-date-box.nxe-readonly .nxe-datebox-button,nxe-date-box.nxe-disabled .nxe-datebox-button{cursor:default}nxe-date-box.nxe-readonly .nxe-datebox-button:hover,nxe-date-box.nxe-disabled .nxe-datebox-button:hover{background-color:transparent}.nxe-calendar{width:298px;box-sizing:border-box;padding:8px;background:#fff;border:1px solid #ddd;border-radius:6px;box-shadow:0 6px 12px #0000002e;color:#333;font-size:var(--nxe-ui-font-size, 12px);-webkit-user-select:none;user-select:none}.nxe-calendar-navigator{display:flex;height:36px;margin-bottom:8px}.nxe-calendar-nav,.nxe-calendar-caption{display:inline-flex;align-items:center;justify-content:center;border:1px solid #ddd;background:transparent;color:#333;cursor:pointer;padding:0}.nxe-calendar-nav:hover,.nxe-calendar-caption:hover{background:#0000000a}.nxe-calendar-nav:active,.nxe-calendar-caption:active{background:#0000003d}.nxe-calendar-nav{flex:0 0 36px}.nxe-calendar-nav:first-child{border-radius:4px 0 0 4px}.nxe-calendar-nav:last-child{border-radius:0 4px 4px 0}.nxe-calendar-caption{flex:1;margin:0 -1px;font-size:inherit;font-weight:600}.nxe-calendar-chevron{width:18px;height:18px;fill:currentColor}.nxe-calendar-weekdays{display:grid;grid-template-columns:repeat(7,1fr);align-items:center;height:24px;text-align:center;color:#333;font-size:10px;font-weight:500}.nxe-calendar-grid{display:grid;grid-template-columns:repeat(7,1fr)}.nxe-calendar-day,.nxe-calendar-period{display:flex;align-items:center;justify-content:center;border:0;background:transparent;cursor:pointer;padding:0;font-size:14px;line-height:1;color:#333}.nxe-calendar-day span,.nxe-calendar-period span{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;border-radius:4px}.nxe-calendar-day:hover:not(:disabled) span,.nxe-calendar-period:hover:not(:disabled) span{background:#337ab73d}.nxe-calendar-day:disabled,.nxe-calendar-period:disabled{cursor:default;color:#33333361}.nxe-calendar-day{height:33px}.nxe-calendar-day span{width:28px;height:28px}.nxe-calendar-periods{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:74px}.nxe-calendar-period span{min-width:54px;height:54px;padding:0 4px}.nxe-calendar-periods-century .nxe-calendar-period span{width:40px;min-width:0;height:auto;min-height:56px;padding:4px 0;white-space:normal;text-align:center;line-height:1.4}.nxe-calendar-other{color:#33333361}.nxe-calendar-today span{border:2px solid #337ab7}.nxe-calendar-selected span,.nxe-calendar-selected:hover:not(:disabled) span{background:#337ab7;color:#fff;box-shadow:0 0 0 2px #337ab780;border:0}.nxe-calendar-time{display:flex;align-items:center;gap:4px;margin-top:8px;padding-top:8px;border-top:1px solid #ddd}.nxe-calendar-time-part{width:2.6em;height:2.2em;box-sizing:border-box;padding:0 .25em;border:1px solid #ddd;border-radius:4px;background:#fff;color:#333;font-size:inherit;font-variant-numeric:tabular-nums;text-align:center}.nxe-calendar-time-part:focus{outline:2px solid #337ab7;outline-offset:-2px}.nxe-calendar-time-sep{font-weight:600}.nxe-calendar-time-btn{height:2.2em;padding:0 .75em;border:1px solid #ddd;border-radius:4px;background:transparent;color:#333;font-size:inherit;cursor:pointer}.nxe-calendar-time-btn:hover{background:#0000000a}.nxe-calendar-time-btn:focus-visible{outline:2px solid #337ab7;outline-offset:-2px}.nxe-calendar-time-done{margin-left:auto}\n"] }]
+        }], propDecorators: { calendarTemplate: [{ type: i0.ViewChild, args: ['calendarTemplate', { isSignal: true }] }], fieldRef: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], displayFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayFormat", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], showClearButtonInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }] } });
 
 /**
  * `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`
@@ -1096,11 +1455,11 @@ class NxeScrollViewComponent {
     showScrollbar = input('onScroll', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "showScrollbar" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeScrollViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.5", type: NxeScrollViewComponent, isStandalone: true, selector: "nxe-scroll-view", inputs: { scrollByContent: { classPropertyName: "scrollByContent", publicName: "scrollByContent", isSignal: true, isRequired: false, transformFunction: null }, scrollByThumb: { classPropertyName: "scrollByThumb", publicName: "scrollByThumb", isSignal: true, isRequired: false, transformFunction: null }, showScrollbar: { classPropertyName: "showScrollbar", publicName: "showScrollbar", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "nxe-widget nxe-scroll-view" }, ngImport: i0, template: '<div class="nxe-scrollview-content"><ng-content /></div>', isInline: true, styles: ["nxe-scroll-view{display:block;height:100%;overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(191,191,191,.7) transparent}nxe-scroll-view::-webkit-scrollbar{width:8px;height:8px}nxe-scroll-view::-webkit-scrollbar-track{background:transparent}nxe-scroll-view::-webkit-scrollbar-thumb{background-color:#bfbfbfb3;border-radius:4px}nxe-scroll-view:hover::-webkit-scrollbar-thumb{background-color:#bfbfbf}nxe-scroll-view>.nxe-scrollview-content{display:flex;flex-direction:column;min-height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.5", type: NxeScrollViewComponent, isStandalone: true, selector: "nxe-scroll-view", inputs: { scrollByContent: { classPropertyName: "scrollByContent", publicName: "scrollByContent", isSignal: true, isRequired: false, transformFunction: null }, scrollByThumb: { classPropertyName: "scrollByThumb", publicName: "scrollByThumb", isSignal: true, isRequired: false, transformFunction: null }, showScrollbar: { classPropertyName: "showScrollbar", publicName: "showScrollbar", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "nxe-widget nxe-scroll-view" }, ngImport: i0, template: '<div class="nxe-scrollview-content"><ng-content /></div>', isInline: true, styles: ["nxe-scroll-view{display:block;height:100%;overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(191,191,191,.7) transparent}@supports not (scrollbar-width: thin){nxe-scroll-view::-webkit-scrollbar{width:8px;height:8px}nxe-scroll-view::-webkit-scrollbar-track{background:transparent}nxe-scroll-view::-webkit-scrollbar-thumb{background-color:#bfbfbfb3;border-radius:4px}nxe-scroll-view:hover::-webkit-scrollbar-thumb{background-color:#bfbfbf}}nxe-scroll-view>.nxe-scrollview-content{display:flex;flex-direction:column;min-height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeScrollViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'nxe-scroll-view', standalone: true, template: '<div class="nxe-scrollview-content"><ng-content /></div>', host: { class: 'nxe-widget nxe-scroll-view' }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: ["nxe-scroll-view{display:block;height:100%;overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(191,191,191,.7) transparent}nxe-scroll-view::-webkit-scrollbar{width:8px;height:8px}nxe-scroll-view::-webkit-scrollbar-track{background:transparent}nxe-scroll-view::-webkit-scrollbar-thumb{background-color:#bfbfbfb3;border-radius:4px}nxe-scroll-view:hover::-webkit-scrollbar-thumb{background-color:#bfbfbf}nxe-scroll-view>.nxe-scrollview-content{display:flex;flex-direction:column;min-height:100%}\n"] }]
+            args: [{ selector: 'nxe-scroll-view', standalone: true, template: '<div class="nxe-scrollview-content"><ng-content /></div>', host: { class: 'nxe-widget nxe-scroll-view' }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: ["nxe-scroll-view{display:block;height:100%;overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(191,191,191,.7) transparent}@supports not (scrollbar-width: thin){nxe-scroll-view::-webkit-scrollbar{width:8px;height:8px}nxe-scroll-view::-webkit-scrollbar-track{background:transparent}nxe-scroll-view::-webkit-scrollbar-thumb{background-color:#bfbfbfb3;border-radius:4px}nxe-scroll-view:hover::-webkit-scrollbar-thumb{background-color:#bfbfbf}}nxe-scroll-view>.nxe-scrollview-content{display:flex;flex-direction:column;min-height:100%}\n"] }]
         }], propDecorators: { scrollByContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollByContent", required: false }] }], scrollByThumb: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollByThumb", required: false }] }], showScrollbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "showScrollbar", required: false }] }] } });
 
 // @nexterajs/ui/forms — public API.