@nexterajs/ui 0.0.1

package/fesm2022/nexterajs-ui-forms.mjs

@@ -0,0 +1,1113 @@
+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 { 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';
+import { TemplatePortal } from '@angular/cdk/portal';
+import { DateTime } from 'luxon';
+import { merge, filter } from 'rxjs';
+import { nxePane, trackPaneFlip } from '@nexterajs/ui/styling';
+
+/**
+ * dx size coercion: `height="35"` and `[height]="35"` both mean 35px, while `'100%'` or `'3rem'`
+ * pass through untouched. Templates write the attribute form, so the string case is the common one.
+ */
+function cssSize(value) {
+    if (value === undefined || value === null || value === '') {
+        return null;
+    }
+    return /^-?\d+(\.\d+)?$/.test(String(value)) ? `${value}px` : String(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]`).
+ *
+ * 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.
+ *
+ * `onClick` emits {@link NxeButtonClickEvent}; native `(click)` also fires (27 sites bind it).
+ */
+class NxeButtonComponent {
+    registry = inject(NxeValidationGroupRegistry);
+    elementRef = inject(ElementRef);
+    /** Legacy `text` label (rendered as `.dx-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). */
+    type = input('normal', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    /** Disabled state (`[disabled]`); blocks `onClick` and dims the button. */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Named validation group resolved via {@link NxeValidationGroupRegistry} on click. */
+    validationGroup = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "validationGroup" }] : /* istanbul ignore next */ []));
+    /** 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
+     * here (a `mat-icon` plus a `span`), so the two must coexist rather than compete.
+     */
+    icon = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    /** dx `height` — a bare number (or numeric string) means px; anything else passes through. */
+    height = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+    /** dx `width` — same coercion as {@link height}. */
+    width = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    heightStyle = computed(() => cssSize(this.height()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "heightStyle" }] : /* istanbul ignore next */ []));
+    widthStyle = computed(() => cssSize(this.width()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "widthStyle" }] : /* istanbul ignore next */ []));
+    /** DevExtreme-compatible click event. */
+    onClick = output();
+    handleKeydown(event) {
+        // Non-button host: Enter/Space don't synthesize a click, so activate explicitly.
+        event.preventDefault();
+        this.handleClick(event);
+    }
+    handleClick(event) {
+        if (this.disabled()) {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+            return;
+        }
+        const group = this.validationGroup() ?? '';
+        this.onClick.emit({
+            event,
+            validationGroup: { validate: () => this.registry.validate(group) },
+            component: this,
+            element: this.elementRef.nativeElement,
+        });
+    }
+    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">
+            @if (icon()) {
+                <i class="dx-icon dx-icon-{{ icon() }}"></i>
+            }
+            <ng-content />
+            @if (text()) {
+                <span class="dx-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 });
+}
+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">
+            @if (icon()) {
+                <i class="dx-icon dx-icon-{{ icon() }}"></i>
+            }
+            <ng-content />
+            @if (text()) {
+                <span class="dx-button-text">{{ text() }}</span>
+            }
+        </span>
+    `, host: {
+                        class: 'nxe-widget',
+                        role: 'button',
+                        '[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()',
+                        '(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"] }]
+        }], 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"] }] } });
+
+/**
+ * `nxe-text-box` — drop-in replacement for DevExtreme `dx-text-box`.
+ *
+ * A signal-CVA editor (extends {@link NxeFormControlBase}) supporting `formControlName`,
+ * `[(ngModel)]`, one-way `[value]`, and `[readOnly]`. Like DevExtreme's default
+ * (`valueChangeEvent='change'`), the value commits on **blur** — not on every keystroke.
+ *
+ * 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.
+ */
+class NxeTextBoxComponent extends NxeFormControlBase {
+    mode = input('text', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    placeholderInput = input(undefined, { ...(ngDevMode ? { debugName: "placeholderInput" } : /* istanbul ignore next */ {}), alias: 'placeholder' });
+    placeholder = computed(() => this.placeholderInput() ?? this.nxeDefaults.textBox?.placeholder ?? '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** DevExtreme parity input; cosmetic, unused in behaviour. */
+    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 */ []));
+    focused = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
+    displayValue = computed(() => this.value() ?? '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
+    onBlur(event) {
+        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: [
+            { 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>
+            }
+        }
+    `, 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: [{
+            type: Component,
+            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>
+            }
+        }
+    `,
+                    host: {
+                        class: 'nxe-widget nxe-editor nxe-textbox',
+                        '[class.nxe-focused]': 'focused()',
+                        '[class.nxe-invalid]': '!!validationError()',
+                    },
+                    providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NxeTextBoxComponent), multi: true },
+                        { provide: NXE_VALIDATION_TARGET, useExisting: forwardRef(() => NxeTextBoxComponent) },
+                    ],
+                    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 }] }] } });
+
+/**
+ * `nxe-text-area` — drop-in replacement for DevExtreme `dx-text-area`.
+ *
+ * Identical to {@link NxeTextBoxComponent} but renders a `<textarea>`. Supports an optional fixed
+ * `[height]` (px) and `placeholder`; commits on blur. Hosts a projected `nxe-validator` via
+ * {@link NXE_VALIDATION_TARGET}.
+ */
+class NxeTextAreaComponent extends NxeFormControlBase {
+    placeholderInput = input(undefined, { ...(ngDevMode ? { debugName: "placeholderInput" } : /* istanbul ignore next */ {}), alias: 'placeholder' });
+    placeholder = computed(() => this.placeholderInput() ?? this.nxeDefaults.textArea?.placeholder ?? '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** Fixed height in px (DevExtreme `[height]`); unset = auto. */
+    heightInput = input(undefined, { ...(ngDevMode ? { debugName: "heightInput" } : /* istanbul ignore next */ {}), alias: 'height' });
+    height = computed(() => this.heightInput() ?? this.nxeDefaults.textArea?.height ?? 80, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "height" }] : /* 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 */ []));
+    onBlur(event) {
+        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: NxeTextAreaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxeTextAreaComponent, isStandalone: true, selector: "nxe-text-area", inputs: { placeholderInput: { classPropertyName: "placeholderInput", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, heightInput: { classPropertyName: "heightInput", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.nxe-focused": "focused()", "class.nxe-invalid": "!!validationError()" }, classAttribute: "nxe-widget nxe-editor nxe-textarea" }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NxeTextAreaComponent), multi: true },
+            { provide: NXE_VALIDATION_TARGET, useExisting: forwardRef(() => NxeTextAreaComponent) },
+        ], usesInheritance: true, ngImport: i0, template: `
+        <div class="nxe-editor-container">
+            <textarea
+                class="nxe-editor-input nxe-textarea-input"
+                [value]="displayValue()"
+                [readOnly]="readOnly()"
+                [disabled]="disabled()"
+                [attr.placeholder]="placeholder() || null"
+                [style.height.px]="height() || null"
+                (blur)="onBlur($event)"
+                (focus)="focused.set(true)"></textarea>
+        </div>
+        <ng-content />
+        @if (validationError(); as error) {
+            @if (focused()) {
+                <div class="nxe-invalid-message">{{ error }}</div>
+            }
+        }
+    `, isInline: true, styles: ["nxe-text-area .nxe-textarea-input{display:block;resize:none;overflow:auto;white-space:pre-wrap;line-height:1.35715}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeTextAreaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nxe-text-area', standalone: true, template: `
+        <div class="nxe-editor-container">
+            <textarea
+                class="nxe-editor-input nxe-textarea-input"
+                [value]="displayValue()"
+                [readOnly]="readOnly()"
+                [disabled]="disabled()"
+                [attr.placeholder]="placeholder() || null"
+                [style.height.px]="height() || null"
+                (blur)="onBlur($event)"
+                (focus)="focused.set(true)"></textarea>
+        </div>
+        <ng-content />
+        @if (validationError(); as error) {
+            @if (focused()) {
+                <div class="nxe-invalid-message">{{ error }}</div>
+            }
+        }
+    `, host: {
+                        class: 'nxe-widget nxe-editor nxe-textarea',
+                        '[class.nxe-focused]': 'focused()',
+                        '[class.nxe-invalid]': '!!validationError()',
+                    }, providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NxeTextAreaComponent), multi: true },
+                        { provide: NXE_VALIDATION_TARGET, useExisting: forwardRef(() => NxeTextAreaComponent) },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: ["nxe-text-area .nxe-textarea-input{display:block;resize:none;overflow:auto;white-space:pre-wrap;line-height:1.35715}\n"] }]
+        }], propDecorators: { placeholderInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], heightInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }] } });
+
+/**
+ * `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`
+ * 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 */ []));
+    toggle(event) {
+        if (this.disabled() || this.readOnly()) {
+            return;
+        }
+        this.commitValue(!this.value(), event);
+        this.markAsTouched();
+    }
+    onSpace(event) {
+        event.preventDefault();
+        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: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NxeCheckBoxComponent), multi: true },
+            { provide: NXE_VALIDATION_TARGET, useExisting: forwardRef(() => NxeCheckBoxComponent) },
+        ], usesInheritance: true, ngImport: i0, template: `
+        <span class="nxe-checkbox-container">
+            <span class="nxe-checkbox-icon" aria-hidden="true"></span>
+            @if (text()) {
+                <span class="nxe-checkbox-text">{{ text() }}</span>
+            }
+        </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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeCheckBoxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nxe-check-box', standalone: true, template: `
+        <span class="nxe-checkbox-container">
+            <span class="nxe-checkbox-icon" aria-hidden="true"></span>
+            @if (text()) {
+                <span class="nxe-checkbox-text">{{ text() }}</span>
+            }
+        </span>
+        <ng-content />
+    `, host: {
+                        class: 'nxe-widget nxe-checkbox',
+                        role: 'checkbox',
+                        '[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()',
+                        '(click)': 'toggle($event)',
+                        '(keydown.space)': 'onSpace($event)',
+                        '(blur)': 'markAsTouched()',
+                    }, 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"] }]
+        }], 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. */
+function toNumber(value) {
+    if (value == null || value === '') {
+        return undefined;
+    }
+    const num = Number(value);
+    return isNaN(num) ? undefined : num;
+}
+/**
+ * `nxe-number-box` — drop-in replacement for DevExtreme `dx-number-box`.
+ *
+ * A numeric signal-CVA editor (extends {@link NxeFormControlBase}) storing/emitting `number | null`.
+ * Implements the DevExtreme number-format engine ({@link parseNumberFormat}/{@link formatNumber}):
+ * displays the masked, grouped string when blurred and a raw editable number while focused;
+ * commits (clamped to `[min,max]`, rounded to the format precision) on blur — never per keystroke.
+ *
+ * Supports `formControlName`/`[(ngModel)]`/`[(value)]`/`[value]`, `[readOnly]`, `[min]`/`[max]`,
+ * `format` (string LDML pattern), `(valueChange)` (numeric), and a projected `nxe-validator`.
+ */
+class NxeNumberBoxComponent extends NxeFormControlBase {
+    /** LDML format pattern (e.g. `#,##0.00`); empty = raw number. */
+    formatInput = input(undefined, { ...(ngDevMode ? { debugName: "formatInput" } : /* istanbul ignore next */ {}), alias: 'format' });
+    format = computed(() => this.formatInput() ?? this.nxeDefaults.numberBox?.format ?? '', /* @ts-ignore */
+    ...(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 });
+    focused = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
+    parsedFormat = computed(() => parseNumberFormat(this.format()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "parsedFormat" }] : /* istanbul ignore next */ []));
+    /** Locale characters, configured once by the application. Defaults to en-US. */
+    separators = inject(NXE_NUMBER_SEPARATORS);
+    displayValue = computed(() => {
+        const value = this.value();
+        if (this.focused()) {
+            // Raw editable text, but with this locale's decimal character: `String(0.125)` gives
+            // a JS-style dot, and parseNumber would read that as a group separator and commit 125.
+            return value == null ? '' : String(value).replace('.', this.separators.decimal);
+        }
+        return formatNumber(value, this.parsedFormat(), this.separators);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
+    onBlur(event) {
+        let num = parseNumber(event.target.value, this.separators);
+        if (num != null) {
+            const min = this.min();
+            const max = this.max();
+            if (min != null && num < min) {
+                num = min;
+            }
+            if (max != null && num > max) {
+                num = max;
+            }
+            const fmt = this.parsedFormat();
+            if (fmt) {
+                num = roundHalfAwayFromZero(num, fmt.maxFrac);
+            }
+        }
+        this.commitValue(num, event);
+        this.focused.set(false);
+        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: [
+            { 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>
+            }
+        }
+    `, 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>
+            }
+        }
+    `, host: {
+                        class: 'nxe-widget nxe-editor nxe-numberbox',
+                        '[class.nxe-focused]': 'focused()',
+                        '[class.nxe-invalid]': '!!validationError()',
+                    }, providers: [
+                        { 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 }] }] } });
+
+/** Normalize a `[min]`/`[max]` binding (Date object or serialized string) to a DateTime. */
+function toBoundDate(bound) {
+    if (!bound) {
+        return null;
+    }
+    if (bound instanceof Date) {
+        const dt = DateTime.fromJSDate(bound);
+        return dt.isValid ? dt : null;
+    }
+    return parseDateValue(bound);
+}
+/**
+ * `nxe-date-box` — drop-in replacement for DevExtreme `dx-date-box`.
+ *
+ * A signal-CVA editor (extends {@link NxeFormControlBase}) whose value is the app-wide
+ * `"yyyy-MM-ddTHH:mm:ss"` string (preserving the global `dateSerializationFormat`). The field is
+ * 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}.
+ */
+class NxeDateBoxComponent extends NxeFormControlBase {
+    overlay = inject(Overlay);
+    viewContainerRef = inject(ViewContainerRef);
+    calendarTemplate = viewChild.required('calendarTemplate', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "calendarTemplate" }] : /* istanbul ignore next */ []));
+    fieldRef = viewChild.required('field', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fieldRef" }] : /* istanbul ignore next */ []));
+    type = input('date', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    /* Undefined rather than a literal default, so the default can follow `type`. Additive: no call
+       site passes either input, and one that does still wins. */
+    displayFormat = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayFormat" }] : /* istanbul ignore next */ []));
+    placeholder = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** DevExtreme `[min]`/`[max]` bounds: calendar days outside are disabled, typed values clamp. */
+    min = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    max = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    focused = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
+    opened = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "opened" }] : /* istanbul ignore next */ []));
+    viewMonth = signal(DateTime.now().startOf('month'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewMonth" }] : /* istanbul ignore next */ []));
+    /** Calendar zoom level; caption clicks zoom out, cell picks zoom back in (dx-calendar parity). */
+    zoomLevel = signal('month', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zoomLevel" }] : /* istanbul ignore next */ []));
+    weekdays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+    /** The format actually used, from `displayFormat` or the default for this `type`. */
+    effectiveDisplayFormat = computed(() => {
+        const stated = this.displayFormat() ?? this.nxeDefaults.dateBox?.displayFormat;
+        if (stated) {
+            return stated;
+        }
+        switch (this.type()) {
+            case 'time':
+                return NXE_DEFAULT_TIME_DISPLAY_FORMAT;
+            case 'datetime':
+                return NXE_DEFAULT_DATETIME_DISPLAY_FORMAT;
+            default:
+                return NXE_DEFAULT_DISPLAY_FORMAT;
+        }
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveDisplayFormat" }] : /* istanbul ignore next */ []));
+    /** dx's default placeholder is '', but orbit's global default is the format itself. */
+    effectivePlaceholder = computed(() => this.placeholder() ?? this.nxeDefaults.dateBox?.placeholder ?? this.effectiveDisplayFormat(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectivePlaceholder" }] : /* istanbul ignore next */ []));
+    selected = computed(() => parseDateValue(this.value()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+    displayValue = computed(() => formatDisplay(this.selected(), this.effectiveDisplayFormat()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayValue" }] : /* 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. */
+    hourText = computed(() => this.selected()?.toFormat('HH') ?? '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hourText" }] : /* istanbul ignore next */ []));
+    minuteText = computed(() => this.selected()?.toFormat('mm') ?? '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minuteText" }] : /* istanbul ignore next */ []));
+    /**
+     * The field's text as it stood when focus arrived. `onBlur` compares against it and commits
+     * nothing when the user only tabbed through — see the comment there.
+     */
+    textAtFocus = '';
+    caption = computed(() => {
+        const view = this.viewMonth();
+        switch (this.zoomLevel()) {
+            case 'month':
+                return view.toFormat('MMMM yyyy');
+            case 'year':
+                return view.toFormat('yyyy');
+            case 'decade': {
+                const start = view.year - (view.year % 10);
+                return `${start}-${start + 9}`;
+            }
+            case 'century': {
+                const start = view.year - (view.year % 100);
+                return `${start}-${start + 99}`;
+            }
+        }
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "caption" }] : /* istanbul ignore next */ []));
+    periodCells = computed(() => {
+        const zoom = this.zoomLevel();
+        if (zoom === 'month') {
+            return [];
+        }
+        const now = DateTime.now();
+        const min = this.minDate();
+        const max = this.maxDate();
+        const span = zoom === 'year' ? { months: 1 } : zoom === 'decade' ? { years: 1 } : { years: 10 };
+        return buildPeriodCells(zoom, this.viewMonth()).map((cell) => {
+            const end = cell.anchor.plus(span).minus({ days: 1 }).endOf('day');
+            return {
+                ...cell,
+                isNow: now >= cell.anchor && now <= end,
+                disabled: (!!min && end < min.startOf('day')) || (!!max && cell.anchor > max.endOf('day')),
+            };
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "periodCells" }] : /* istanbul ignore next */ []));
+    minDate = computed(() => toBoundDate(this.min()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []));
+    maxDate = computed(() => toBoundDate(this.max()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
+    isDisabledDay(day) {
+        const min = this.minDate();
+        const max = this.maxDate();
+        return (!!min && day.startOf('day') < min.startOf('day')) || (!!max && day.startOf('day') > max.startOf('day'));
+    }
+    clampToBounds(dt) {
+        const min = this.minDate();
+        const max = this.maxDate();
+        if (min && dt < min.startOf('day'))
+            return min.startOf('day');
+        /* Land on the bound's DAY but keep the value's own time. Returning max.startOf('day') would
+           silently zero an 18:00 whenever the entry ran past the bound — invisible for a date-only
+           field, and a wiped time for a datetime one. */
+        if (max && dt > max.endOf('day')) {
+            return max.startOf('day').set({ hour: dt.hour, minute: dt.minute, second: dt.second });
+        }
+        return dt;
+    }
+    overlayRef;
+    closeSub;
+    flipSub;
+    isSelected(day) {
+        const sel = this.selected();
+        return !!sel && day.hasSame(sel, 'day');
+    }
+    isToday(day) {
+        return day.hasSame(DateTime.now(), 'day');
+    }
+    navigate(delta) {
+        const months = { month: 1, year: 12, decade: 120, century: 1200 }[this.zoomLevel()];
+        this.viewMonth.update((m) => m.plus({ months: months * delta }));
+    }
+    zoomOut() {
+        const next = { month: 'year', year: 'decade', decade: 'century' };
+        const zoom = this.zoomLevel();
+        if (zoom !== 'century') {
+            this.zoomLevel.set(next[zoom]);
+        }
+    }
+    selectPeriod(cell) {
+        if (cell.disabled) {
+            return;
+        }
+        const previous = { year: 'month', decade: 'year', century: 'decade' };
+        this.viewMonth.set(cell.anchor.startOf('month'));
+        this.zoomLevel.set(previous[this.zoomLevel()]);
+    }
+    onButtonMousedown(event) {
+        // Keep field focus (avoid a blur-driven re-commit) and toggle the calendar.
+        event.preventDefault();
+        if (this.disabled() || this.readOnly()) {
+            return;
+        }
+        this.opened() ? this.close() : this.open();
+    }
+    onFocus(event) {
+        this.textAtFocus = event.target.value;
+        this.focused.set(true);
+    }
+    /**
+     * Commit what the user TYPED — and nothing when they typed nothing.
+     *
+     * The unchanged-text guard is load-bearing, not an optimization. `displayFormat` renders a
+     * strict subset of the stored value: `dd-MMM-yyyy` shows `2026-08-12T09:00:00` as `12-Aug-2026`,
+     * and re-parsing that yields midnight. This method used to commit unconditionally, so simply
+     * focusing and tabbing past a field rewrote 09:00 to 00:00 and 09:30:45 to 09:30:00 — silently,
+     * because `commitValue` only no-ops on an identical string and these differ. Latent while
+     * nothing rendered a time; straight data loss the moment `type="datetime"` exists.
+     *
+     * A rejected entry keeps the previous value and repaints the field. The repaint is required:
+     * `[value]` is still bound to the same `displayValue()` Angular last wrote, so it will not
+     * re-render on its own and the unparseable text would sit there looking accepted.
+     */
+    onBlur(event) {
+        const element = event.target;
+        /* Read before clearing: it doubles as "we captured a baseline this focus cycle". A blur with
+           no preceding focus cannot happen to a real user — browsers always fire focus first — so
+           the only sequence that reaches the fall-through is a synthetic one, where the old
+           parse-everything behaviour is both harmless and what the existing specs assert. */
+        const hadBaseline = this.focused();
+        this.focused.set(false);
+        this.markAsTouched();
+        if (hadBaseline && element.value === this.textAtFocus) {
+            return;
+        }
+        if (!element.value.trim()) {
+            this.commitValue(null, event);
+            this.syncField();
+            return;
+        }
+        const dt = parseDisplay(element.value, this.effectiveDisplayFormat(), this.selected());
+        if (dt) {
+            this.commitValue(serializeDate(this.clampToBounds(dt)), event);
+        }
+        this.syncField();
+    }
+    /**
+     * Repaint the field from the committed value and re-baseline {@link textAtFocus}.
+     *
+     * Called after every non-typed commit as well, so a later blur cannot replay stale typed text
+     * over a value the popup has since changed.
+     */
+    syncField() {
+        const element = this.fieldRef().nativeElement;
+        element.value = this.displayValue();
+        this.textAtFocus = element.value;
+    }
+    selectDay(day) {
+        if (this.isDisabledDay(day)) {
+            return;
+        }
+        let dt = day.startOf('day');
+        if (this.type() === 'datetime') {
+            const base = this.selected();
+            if (base) {
+                dt = dt.set({ hour: base.hour, minute: base.minute, second: base.second });
+            }
+        }
+        this.commitValue(serializeDate(dt), null);
+        this.syncField();
+        /* Only a plain date picker is finished at this point. In datetime mode the time strip is
+           the other half of the job, and closing here would put it out of reach. */
+        if (this.type() === 'date') {
+            this.close();
+        }
+    }
+    /**
+     * Commit one part of the time from the popup strip.
+     *
+     * Writes straight through to the value rather than holding a draft: `selectDay` already commits
+     * immediately, the component keeps no other pending state, and a stray backdrop click must not
+     * discard a time the user has just set. dx buffers behind OK/Cancel; this is the divergence.
+     */
+    setTimePart(part, event) {
+        const element = event.target;
+        const typed = Number.parseInt(element.value, 10);
+        const base = this.selected() ?? DateTime.now().startOf('day');
+        const ceiling = part === 'hour' ? 23 : 59;
+        const next = Number.isNaN(typed) ? base[part] : Math.min(Math.max(typed, 0), ceiling);
+        this.commitValue(serializeDate(base.set({ [part]: next })), event);
+        this.syncField();
+        /* Same non-repaint hazard as onBlur: when the clamp lands back on the value already held,
+           the [value] binding is unchanged and `7` would stay on screen instead of `07`. */
+        element.value = part === 'hour' ? this.hourText() : this.minuteText();
+    }
+    setNow() {
+        const now = DateTime.now();
+        const base = this.selected() ?? now;
+        this.commitValue(serializeDate(base.set({ hour: now.hour, minute: now.minute, second: 0 })), null);
+        this.syncField();
+    }
+    open() {
+        this.viewMonth.set((this.selected() ?? DateTime.now()).startOf('month'));
+        this.zoomLevel.set('month');
+        if (!this.overlayRef) {
+            this.overlayRef = this.overlay.create({
+                positionStrategy: this.overlay
+                    .position()
+                    .flexibleConnectedTo(this.elementRef)
+                    .withPositions([
+                    { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },
+                    { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' },
+                ]),
+                scrollStrategy: this.overlay.scrollStrategies.reposition(),
+                hasBackdrop: true,
+                backdropClass: 'cdk-overlay-transparent-backdrop',
+                panelClass: nxePane('nxe-datebox-pane'),
+            });
+            this.flipSub = trackPaneFlip(this.overlayRef);
+        }
+        if (this.overlayRef.hasAttached()) {
+            return;
+        }
+        this.overlayRef.attach(new TemplatePortal(this.calendarTemplate(), this.viewContainerRef));
+        this.closeSub = merge(this.overlayRef.backdropClick(), this.overlayRef.keydownEvents().pipe(filter((e) => e.key === 'Escape'))).subscribe(() => this.close());
+        this.opened.set(true);
+    }
+    /** Protected, not private: the time strip's Done button closes the popup from the template. */
+    close() {
+        if (!this.overlayRef?.hasAttached()) {
+            return;
+        }
+        this.overlayRef.detach();
+        this.closeSub?.unsubscribe();
+        this.flipSub?.unsubscribe();
+        this.opened.set(false);
+        this.markAsTouched();
+    }
+    ngOnDestroy() {
+        this.closeSub?.unsubscribe();
+        this.flipSub?.unsubscribe();
+        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: [
+            { 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 });
+}
+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>
+    `, host: {
+                        class: 'nxe-widget nxe-editor nxe-datebox',
+                        '[class.nxe-focused]': 'focused()',
+                        '[class.nxe-invalid]': '!!validationError()',
+                    }, 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 }] }] } });
+
+/**
+ * `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
+ * `.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`
+ * flex-column box (matching dx's content layout, which some consumers' inner grids rely on for
+ * height) and renders a thin grey dx-style scrollbar. The three inputs are accepted for binding
+ * parity only — behaviour is native scrolling.
+ */
+class NxeScrollViewComponent {
+    /** Accepted for parity with dx-scroll-view; behaviour is native overflow scrolling. */
+    scrollByContent = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scrollByContent" }] : /* istanbul ignore next */ []));
+    scrollByThumb = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scrollByThumb" }] : /* istanbul ignore next */ []));
+    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 });
+}
+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"] }]
+        }], 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.
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NxeButtonComponent, NxeCheckBoxComponent, NxeDateBoxComponent, NxeNumberBoxComponent, NxeScrollViewComponent, NxeTextAreaComponent, NxeTextBoxComponent };
+//# sourceMappingURL=nexterajs-ui-forms.mjs.map