@nexterajs/ui 0.0.1

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

@@ -0,0 +1,296 @@
+import * as _angular_core from '@angular/core';
+import { OnDestroy } from '@angular/core';
+import { NxeValidationResult, NxeFormControlBase } from '@nexterajs/ui/core';
+import { DateTime } from 'luxon';
+import { NxeCalendarZoom, NxePeriodCell } from '@nexterajs/ui/intl';
+
+/** DevExtreme button `type` (style intent), as used in this codebase. */
+type NxeButtonType = 'normal' | 'default' | 'success' | 'danger';
+/**
+ * The `validationGroup` object carried on a {@link NxeButtonClickEvent}, mirroring the
+ * DevExtreme button-click `event.validationGroup`. Its `validate()` runs every member of the
+ * button's named group through the {@link NxeValidationGroupRegistry} and returns the
+ * DevExtreme-shaped result — so `const r = event.validationGroup.validate(); if (r.isValid) {...}`
+ * keeps working after the tag rename.
+ */
+interface NxeButtonValidationGroup {
+    validate(): NxeValidationResult;
+}
+/**
+ * Payload emitted from `nxe-button`'s `onClick`, mirroring DevExtreme's button click event.
+ * Only `validationGroup` is read by existing handlers; `event`/`component`/`element` are
+ * provided for parity.
+ */
+interface NxeButtonClickEvent {
+    event: Event;
+    validationGroup: NxeButtonValidationGroup;
+    component: NxeButtonComponent;
+    element: HTMLElement;
+}
+/**
+ * `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).
+ */
+declare class NxeButtonComponent {
+    private readonly registry;
+    private readonly elementRef;
+    /** Legacy `text` label (rendered as `.dx-button-text` when set, no projected content). */
+    readonly text: _angular_core.InputSignal<string>;
+    /** Style intent (`default`=blue, `success`=green, `danger`=red, `normal`=white). */
+    readonly type: _angular_core.InputSignal<NxeButtonType>;
+    /** Disabled state (`[disabled]`); blocks `onClick` and dims the button. */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Named validation group resolved via {@link NxeValidationGroupRegistry} on click. */
+    readonly validationGroup: _angular_core.InputSignal<string>;
+    /** DevExtreme parity input; only ever `false` in this codebase (suppresses tab focus). */
+    readonly focusStateEnabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * dx `icon` — renders `<i class="dx-icon dx-icon-NAME">` as the first child of
+     * `.dx-button-content`, before any projected content. Projection is the dominant pattern
+     * here (a `mat-icon` plus a `span`), so the two must coexist rather than compete.
+     */
+    readonly icon: _angular_core.InputSignal<string>;
+    /** dx `height` — a bare number (or numeric string) means px; anything else passes through. */
+    readonly height: _angular_core.InputSignal<string | number>;
+    /** dx `width` — same coercion as {@link height}. */
+    readonly width: _angular_core.InputSignal<string | number>;
+    protected readonly heightStyle: _angular_core.Signal<string>;
+    protected readonly widthStyle: _angular_core.Signal<string>;
+    /** DevExtreme-compatible click event. */
+    readonly onClick: _angular_core.OutputEmitterRef<NxeButtonClickEvent>;
+    protected handleKeydown(event: KeyboardEvent): void;
+    protected handleClick(event: Event): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxeButtonComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxeButtonComponent, "nxe-button", never, { "text": { "alias": "text"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "validationGroup": { "alias": "validationGroup"; "required": false; "isSignal": true; }; "focusStateEnabled": { "alias": "focusStateEnabled"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; }, { "onClick": "onClick"; }, never, ["*"], true, never>;
+}
+
+/** Text-box input mode (only `text`/`password` are used in this codebase). */
+type NxeTextBoxMode = 'text' | 'password' | 'email' | 'tel' | 'search';
+/**
+ * `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.
+ */
+declare class NxeTextBoxComponent extends NxeFormControlBase<string> {
+    readonly mode: _angular_core.InputSignal<NxeTextBoxMode>;
+    readonly placeholderInput: _angular_core.InputSignal<string>;
+    readonly placeholder: _angular_core.Signal<string>;
+    /** DevExtreme parity input; cosmetic, unused in behaviour. */
+    readonly hoverStateEnabledInput: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly hoverStateEnabled: _angular_core.Signal<boolean>;
+    readonly focused: _angular_core.WritableSignal<boolean>;
+    readonly displayValue: _angular_core.Signal<string>;
+    protected onBlur(event: Event): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxeTextBoxComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxeTextBoxComponent, "nxe-text-box", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "placeholderInput": { "alias": "placeholder"; "required": false; "isSignal": true; }; "hoverStateEnabledInput": { "alias": "hoverStateEnabled"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/**
+ * `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}.
+ */
+declare class NxeTextAreaComponent extends NxeFormControlBase<string> {
+    readonly placeholderInput: _angular_core.InputSignal<string>;
+    readonly placeholder: _angular_core.Signal<string>;
+    /** Fixed height in px (DevExtreme `[height]`); unset = auto. */
+    readonly heightInput: _angular_core.InputSignal<number>;
+    readonly height: _angular_core.Signal<string | number>;
+    readonly focused: _angular_core.WritableSignal<boolean>;
+    readonly displayValue: _angular_core.Signal<string>;
+    protected onBlur(event: Event): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxeTextAreaComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxeTextAreaComponent, "nxe-text-area", never, { "placeholderInput": { "alias": "placeholder"; "required": false; "isSignal": true; }; "heightInput": { "alias": "height"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/**
+ * `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).
+ */
+declare class NxeCheckBoxComponent extends NxeFormControlBase<boolean> {
+    /** Inline label rendered next to the box. */
+    readonly text: _angular_core.InputSignal<string>;
+    protected toggle(event: Event): void;
+    protected onSpace(event: Event): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxeCheckBoxComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxeCheckBoxComponent, "nxe-check-box", never, { "text": { "alias": "text"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/**
+ * `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`.
+ */
+declare class NxeNumberBoxComponent extends NxeFormControlBase<number> {
+    /** LDML format pattern (e.g. `#,##0.00`); empty = raw number. */
+    readonly formatInput: _angular_core.InputSignal<string>;
+    readonly format: _angular_core.Signal<string>;
+    readonly min: _angular_core.InputSignalWithTransform<number, unknown>;
+    readonly max: _angular_core.InputSignalWithTransform<number, unknown>;
+    readonly focused: _angular_core.WritableSignal<boolean>;
+    private readonly parsedFormat;
+    /** Locale characters, configured once by the application. Defaults to en-US. */
+    private readonly separators;
+    readonly displayValue: _angular_core.Signal<string>;
+    protected onBlur(event: Event): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxeNumberBoxComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxeNumberBoxComponent, "nxe-number-box", never, { "formatInput": { "alias": "format"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/** DevExtreme date-box `type`. */
+type NxeDateBoxType = 'date' | 'datetime' | 'time';
+/**
+ * `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}.
+ */
+declare class NxeDateBoxComponent extends NxeFormControlBase<string> implements OnDestroy {
+    private readonly overlay;
+    private readonly viewContainerRef;
+    private readonly calendarTemplate;
+    private readonly fieldRef;
+    readonly type: _angular_core.InputSignal<NxeDateBoxType>;
+    readonly displayFormat: _angular_core.InputSignal<string>;
+    readonly placeholder: _angular_core.InputSignal<string>;
+    /** DevExtreme `[min]`/`[max]` bounds: calendar days outside are disabled, typed values clamp. */
+    readonly min: _angular_core.InputSignal<string | Date>;
+    readonly max: _angular_core.InputSignal<string | Date>;
+    readonly focused: _angular_core.WritableSignal<boolean>;
+    readonly opened: _angular_core.WritableSignal<boolean>;
+    readonly viewMonth: _angular_core.WritableSignal<DateTime<boolean>>;
+    /** Calendar zoom level; caption clicks zoom out, cell picks zoom back in (dx-calendar parity). */
+    readonly zoomLevel: _angular_core.WritableSignal<NxeCalendarZoom>;
+    readonly weekdays: readonly ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+    /** The format actually used, from `displayFormat` or the default for this `type`. */
+    readonly effectiveDisplayFormat: _angular_core.Signal<string>;
+    /** dx's default placeholder is '', but orbit's global default is the format itself. */
+    readonly effectivePlaceholder: _angular_core.Signal<string>;
+    private readonly selected;
+    readonly displayValue: _angular_core.Signal<string>;
+    readonly weeks: _angular_core.Signal<DateTime<boolean>[][]>;
+    /** Two-digit hour/minute for the popup's time strip; blank when nothing is selected. */
+    readonly hourText: _angular_core.Signal<string>;
+    readonly minuteText: _angular_core.Signal<string>;
+    /**
+     * 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.
+     */
+    private textAtFocus;
+    readonly caption: _angular_core.Signal<string>;
+    readonly periodCells: _angular_core.Signal<{
+        isNow: boolean;
+        disabled: boolean;
+        anchor: DateTime;
+        label: string;
+        other: boolean;
+    }[]>;
+    private readonly minDate;
+    private readonly maxDate;
+    protected isDisabledDay(day: DateTime): boolean;
+    private clampToBounds;
+    private overlayRef?;
+    private closeSub?;
+    private flipSub?;
+    protected isSelected(day: DateTime): boolean;
+    protected isToday(day: DateTime): boolean;
+    protected navigate(delta: number): void;
+    protected zoomOut(): void;
+    protected selectPeriod(cell: NxePeriodCell & {
+        disabled: boolean;
+    }): void;
+    protected onButtonMousedown(event: Event): void;
+    protected onFocus(event: Event): void;
+    /**
+     * 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.
+     */
+    protected onBlur(event: Event): void;
+    /**
+     * 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.
+     */
+    private syncField;
+    protected selectDay(day: DateTime): void;
+    /**
+     * 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.
+     */
+    protected setTimePart(part: 'hour' | 'minute', event: Event): void;
+    protected setNow(): void;
+    private open;
+    /** Protected, not private: the time strip's Done button closes the popup from the template. */
+    protected close(): void;
+    ngOnDestroy(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxeDateBoxComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxeDateBoxComponent, "nxe-date-box", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "displayFormat": { "alias": "displayFormat"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/**
+ * `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.
+ */
+declare class NxeScrollViewComponent {
+    /** Accepted for parity with dx-scroll-view; behaviour is native overflow scrolling. */
+    readonly scrollByContent: _angular_core.InputSignal<boolean>;
+    readonly scrollByThumb: _angular_core.InputSignal<boolean>;
+    readonly showScrollbar: _angular_core.InputSignal<"onScroll" | "onHover" | "always" | "never">;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxeScrollViewComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxeScrollViewComponent, "nxe-scroll-view", never, { "scrollByContent": { "alias": "scrollByContent"; "required": false; "isSignal": true; }; "scrollByThumb": { "alias": "scrollByThumb"; "required": false; "isSignal": true; }; "showScrollbar": { "alias": "showScrollbar"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+export { NxeButtonComponent, NxeCheckBoxComponent, NxeDateBoxComponent, NxeNumberBoxComponent, NxeScrollViewComponent, NxeTextAreaComponent, NxeTextBoxComponent };
+export type { NxeButtonClickEvent, NxeButtonType, NxeButtonValidationGroup, NxeDateBoxType, NxeTextBoxMode };