@nexterajs/ui 0.0.1

package/styles/index.scss

@@ -0,0 +1,83 @@
+// @nexterajs/ui — global stylesheet.
+// Registered as the LAST entry in angular.json `styles` so library tokens/coexistence rules
+// resolve after the legacy DevExtreme/Material CSS during the incremental migration.
+//
+// Component look-and-feel lives in each component's colocated .scss (encapsulated). This file
+// holds only design tokens and cross-cutting rules that must be global.
+
+@use 'tokens';
+@use 'widget';
+@use 'editor';
+@use 'dropdown';
+@use 'button-directives';
+
+// The widget base (font family/size/weight/line-height). Must come before the component chrome
+// below so those can override it, and it is what carries the contract across a CDK portal.
+@include widget.nxe-widget;
+
+@include button-directives.nxe-button-directives;
+
+// Shared text-editor chrome (text-box, text-area, number-box, date-box).
+@include editor.nxe-editor-chrome;
+
+// Shared select-family dropdown panel (select-box, tag-box).
+@include dropdown.nxe-dropdown;
+
+// Pointer-drag chrome for NxeDragGesture, shared by the data grid's column/group drags and the
+// pivot's field-panel/chooser chip drags. Global because a page can render a pivot and NO data
+// grid (an ANALYTIC report is exactly that), and component styles only ship while an instance of
+// their component exists — the suppression below is what stops a chip drag selecting page text.
+.nxe-grid-drag-ghost {
+    position: fixed;
+    z-index: 10000;
+    pointer-events: none;
+    white-space: nowrap;
+    box-sizing: content-box;
+}
+
+body.nxe-grid-dragging {
+    user-select: none;
+    -webkit-user-select: none;
+}
+
+// nxe-badge (directive — needs global, non-encapsulated styles).
+.nxe-badge-host {
+    position: relative;
+}
+
+.nxe-badge-content {
+    position: absolute;
+    top: -6px;
+    right: -6px;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 18px;
+    height: 18px;
+    padding: 0 4px;
+    border-radius: 9px;
+    background: #30374c;
+    color: #fff;
+    font-size: 10px;
+    font-weight: 600;
+    line-height: 1;
+    pointer-events: none;
+    z-index: 1;
+}
+
+.nxe-badge-content.nxe-badge-small {
+    top: -4px;
+    right: -4px;
+    min-width: 14px;
+    height: 14px;
+    border-radius: 7px;
+    font-size: 9px;
+}
+
+.nxe-badge-content.nxe-badge-large {
+    min-width: 22px;
+    height: 22px;
+    border-radius: 11px;
+    font-size: 12px;
+}

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

@@ -0,0 +1,22 @@
+import * as _angular_animations from '@angular/animations';
+
+declare class NxeAnimationCurves {
+    static standard: string;
+    static deceleration: string;
+    static acceleration: string;
+    static sharp: string;
+}
+declare class NxeAnimationDurations {
+    static complex: string;
+    static entering: string;
+    static exiting: string;
+}
+declare const expandCollapse: _angular_animations.AnimationTriggerMetadata;
+declare const fadeIn: _angular_animations.AnimationTriggerMetadata;
+declare const fadeOut: _angular_animations.AnimationTriggerMetadata;
+declare const shake: _angular_animations.AnimationTriggerMetadata;
+declare const slideInTop: _angular_animations.AnimationTriggerMetadata;
+declare const slideOutTop: _angular_animations.AnimationTriggerMetadata;
+declare const nxeAnimations: _angular_animations.AnimationTriggerMetadata[];
+
+export { NxeAnimationCurves, NxeAnimationDurations, expandCollapse, fadeIn, fadeOut, nxeAnimations, shake, slideInTop, slideOutTop };

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

@@ -0,0 +1,328 @@
+import * as _angular_core from '@angular/core';
+import { InjectionToken, ElementRef, NgZone, TemplateRef } from '@angular/core';
+import * as _nexterajs_ui_core from '@nexterajs/ui/core';
+import { ControlValueAccessor } from '@angular/forms';
+
+/**
+ * DevExtreme-compatible value-change event payload.
+ *
+ * Mirrors the shape DevExtreme editors emit from `onValueChanged`
+ * (`{ value, previousValue, event, component, element }`) so existing handlers that read
+ * `e.value` / `e.previousValue` / `e.event` keep working after a tag rename.
+ */
+interface NxeValueChangedEvent<T> {
+    /** The new value. */
+    value: T | null;
+    /** The value before this change. */
+    previousValue: T | null;
+    /** The originating DOM event, when the change came from user interaction (else null). */
+    event: Event | null;
+    /** The emitting component instance (DevExtreme `component`). */
+    component: unknown;
+    /** The component host element (DevExtreme `element`). */
+    element: HTMLElement;
+}
+
+/** A single failed validation rule. */
+interface NxeBrokenRule {
+    type: string;
+    message: string;
+}
+/**
+ * Result of validating a control or a validation group — shaped to match
+ * DevExtreme's `ValidationGroup.validate()` / `dxValidator.validate()` return value so existing
+ * handlers (`const r = event.validationGroup.validate(); if (r.isValid) {...}`) work unchanged.
+ */
+interface NxeValidationResult {
+    isValid: boolean;
+    brokenRules: NxeBrokenRule[];
+    status: 'valid' | 'invalid' | 'pending';
+}
+/**
+ * Contract an editor exposes (via {@link NXE_VALIDATION_TARGET}) to the `nxe-validator` nested
+ * inside it: read the current value, the editor's validation group, and push the invalid
+ * message back so the editor can render it.
+ */
+interface NxeValidationTarget {
+    getValue(): unknown;
+    validationGroup(): string | undefined;
+    setValidationError(message: string | null): void;
+}
+/** DI token the editor provides so its nested `nxe-validator` can adapt it. */
+declare const NXE_VALIDATION_TARGET: InjectionToken<NxeValidationTarget>;
+/** A member registered in a validation group (an `nxe-validator`). */
+interface NxeValidationGroupMember {
+    validate(): NxeValidationResult;
+}
+
+/**
+ * Signal-based `ControlValueAccessor` base for every nxe form editor
+ * (`nxe-text-box`, `nxe-number-box`, `nxe-date-box`, `nxe-check-box`, `nxe-text-area`,
+ * `nxe-select-box`, `nxe-tag-box`, `nxe-radio`, ...).
+ *
+ * It supports BOTH template-driven (`[(ngModel)]`) and reactive (`formControlName`) forms
+ * transparently, as well as DevExtreme-style `[value]` / `[(value)]` two-way binding, and
+ * emits the DevExtreme-shaped {@link NxeValueChangedEvent} from `onValueChanged`.
+ *
+ * Concrete components MUST register themselves as the value accessor, e.g.:
+ * ```ts
+ * @Component({
+ *   selector: 'nxe-text-box',
+ *   providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NxeTextBoxComponent), multi: true }],
+ *   ...
+ * })
+ * export class NxeTextBoxComponent extends NxeFormControlBase<string> { ... }
+ * ```
+ *
+ * Subclasses call {@link commitValue} on user interaction and {@link markAsTouched} on blur.
+ */
+declare abstract class NxeFormControlBase<T> implements ControlValueAccessor, NxeValidationTarget {
+    protected readonly elementRef: ElementRef<HTMLElement>;
+    /**
+     * The app is zone-based (`provideZoneChangeDetection()`); writing back to Angular forms
+     * from a signal context must run inside the zone or reactive forms lag a tick.
+     */
+    protected readonly ngZone: NgZone;
+    /** Application-wide defaults; each editor resolves `binding ?? this ?? literal`. */
+    protected readonly nxeDefaults: _nexterajs_ui_core.NxeDefaultOptions;
+    /**
+     * The current value — single source of truth. Two-way bindable as `[(value)]` (DevExtreme
+     * parity) and also driven by `writeValue` for `ngModel`/`formControlName`.
+     */
+    readonly value: _angular_core.ModelSignal<T>;
+    /** Disabled via the `[disabled]` input (DevExtreme parity); OR-combined with forms disabled. */
+    readonly disabledInput: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    private readonly disabledByForm;
+    /** Effective disabled state (input OR reactive-forms `setDisabledState`). */
+    readonly disabled: _angular_core.Signal<boolean>;
+    /** Read-only state (DevExtreme `[readOnly]`). */
+    readonly readOnly: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Validation group this editor belongs to (its nested `nxe-validator` registers here). */
+    readonly validationGroupInput: _angular_core.InputSignal<string>;
+    /** The current validation error message (set by a nested `nxe-validator`), or null. */
+    readonly validationError: _angular_core.WritableSignal<string>;
+    /** Whether the control has been blurred at least once. */
+    readonly touched: _angular_core.WritableSignal<boolean>;
+    /** Whether the value has been changed by the user at least once. */
+    readonly dirty: _angular_core.WritableSignal<boolean>;
+    /** DevExtreme-compatible value-change event. */
+    readonly onValueChanged: _angular_core.OutputEmitterRef<NxeValueChangedEvent<T>>;
+    private _onChange;
+    private _onTouched;
+    /** Host element (the DevExtreme event payload `element`). */
+    get element(): HTMLElement;
+    getValue(): unknown;
+    validationGroup(): string | undefined;
+    setValidationError(message: string | null): void;
+    writeValue(value: T | null): void;
+    registerOnChange(fn: (value: T | null) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    /**
+     * Commit a user-initiated value change: update the value, notify Angular forms (inside
+     * `NgZone.run` so reactive forms detect it in this zone-based app), and emit the
+     * DevExtreme-shaped `onValueChanged`. No-op when the value is unchanged.
+     */
+    protected commitValue(next: T | null, event?: Event | null): void;
+    /** Mark the control as touched (e.g. on blur), notifying Angular forms exactly once. */
+    protected markAsTouched(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxeFormControlBase<any>, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NxeFormControlBase<any>, never, never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabledInput": { "alias": "disabled"; "required": false; "isSignal": true; }; "readOnly": { "alias": "readOnly"; "required": false; "isSignal": true; }; "validationGroupInput": { "alias": "validationGroup"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "onValueChanged": "onValueChanged"; }, never, never, true, never>;
+}
+
+/**
+ * Contract implemented by every flat `nxe-` nested-option component
+ * (`nxe-column`, `nxe-selection`, `nxe-paging`, `nxe-summary`, `nxe-validation-rule`, ...).
+ *
+ * Nested options carry no template; they exist purely to declare configuration. Each one
+ * exposes its current config as a signal-readable function and a `role` discriminator, so a
+ * parent (`nxe-data-grid`, `nxe-select-box`, ...) can collect them via `contentChildren` and
+ * derive a reactive config model — the mechanism that lets
+ * `<nxe-data-grid><nxe-column/></nxe-data-grid>` mirror `<dx-data-grid><dxi-column/>`.
+ */
+interface NxeConfigOption<TConfig = unknown> {
+    /** Discriminator identifying the option kind, e.g. `'column'`, `'selection'`, `'paging'`. */
+    readonly nxeRole: string;
+    /** Returns the option's current configuration (reads signals; recomputes reactively). */
+    nxeConfig(): TConfig;
+}
+/**
+ * DI token every nested-option component provides (`multi: true`) so parents can query all
+ * options with `contentChildren(NXE_OPTION)` without importing the concrete option classes.
+ */
+declare const NXE_OPTION: InjectionToken<NxeConfigOption<unknown>>;
+
+/**
+ * Base for no-template nested-option components (see {@link NxeConfigOption}).
+ *
+ * Concrete options extend this, declare their inputs as signals, implement {@link nxeConfig}
+ * (typically returning a `computed()` of those inputs), and register the {@link NXE_OPTION}
+ * token so the parent can collect them:
+ * ```ts
+ * @Component({
+ *   selector: 'nxe-selection',
+ *   template: '',
+ *   providers: [{ provide: NXE_OPTION, useExisting: forwardRef(() => NxeSelectionComponent), multi: true }],
+ * })
+ * export class NxeSelectionComponent extends NxeConfigOptionBase<SelectionConfig> {
+ *   readonly nxeRole = 'selection';
+ *   readonly mode = input<'single' | 'multiple'>('single');
+ *   nxeConfig() { return { mode: this.mode() }; }
+ * }
+ * ```
+ */
+declare abstract class NxeConfigOptionBase<TConfig> implements NxeConfigOption<TConfig> {
+    abstract readonly nxeRole: string;
+    abstract nxeConfig(): TConfig;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxeConfigOptionBase<any>, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NxeConfigOptionBase<any>, never, never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * Per-widget defaults, mirroring DevExtreme's `Widget.defaultOptions({ options: {...} })`.
+ *
+ * Every field is optional and every consumer resolves it as `binding ?? token ?? literal`, so
+ * an application that provides nothing keeps the behaviour it has today.
+ *
+ * Only options that an application genuinely sets once and globally belong here. This is not a
+ * second way to configure a component — a binding on the element always wins.
+ */
+interface NxeGridDefaultOptions {
+    hoverStateEnabled?: boolean;
+    columnAutoWidth?: boolean;
+    rowAlternationEnabled?: boolean;
+    showColumnLines?: boolean;
+    showRowLines?: boolean;
+    showBorders?: boolean;
+    wordWrapEnabled?: boolean;
+    noDataText?: string;
+}
+interface NxePickerDefaultOptions {
+    displayExpr?: string;
+    valueExpr?: string;
+    searchExpr?: string;
+    searchEnabled?: boolean;
+    showClearButton?: boolean;
+    showDropDownButton?: boolean;
+    placeholder?: string;
+}
+interface NxeDefaultOptions {
+    readonly dataGrid?: NxeGridDefaultOptions;
+    /** `nxe-tree-list` resolves against this slice instead of `dataGrid`, as dx does. */
+    readonly treeList?: NxeGridDefaultOptions;
+    readonly selectBox?: NxePickerDefaultOptions;
+    readonly tagBox?: NxePickerDefaultOptions & {
+        showSelectionControls?: boolean;
+    };
+    /** Narrower than the other pickers: this one has no built-in search or drop-down button. */
+    readonly dropDownBox?: Pick<NxePickerDefaultOptions, 'displayExpr' | 'valueExpr' | 'placeholder' | 'showClearButton'>;
+    readonly dateBox?: {
+        displayFormat?: string;
+        placeholder?: string;
+    };
+    readonly textBox?: {
+        placeholder?: string;
+        hoverStateEnabled?: boolean;
+    };
+    readonly textArea?: {
+        placeholder?: string;
+        height?: number | string;
+    };
+    readonly numberBox?: {
+        format?: string;
+    };
+    readonly button?: {
+        focusStateEnabled?: boolean;
+    };
+}
+/**
+ * Application-wide component defaults.
+ *
+ * DevExtreme applications configure a great deal through `defaultOptions` and then never write
+ * those attributes again — so the templates carry no evidence that the option was ever set.
+ * Without an equivalent here, a migrated application silently gets the library's literals: an
+ * app that set `columnAutoWidth: true` once at bootstrap would find every grid laying its
+ * columns out differently, with nothing in the markup to explain why.
+ *
+ * ```ts
+ * providers: [
+ *     {
+ *         provide: NXE_DEFAULT_OPTIONS,
+ *         useValue: {
+ *             dataGrid: { columnAutoWidth: true, hoverStateEnabled: true },
+ *             treeList: { columnAutoWidth: true, hoverStateEnabled: true },
+ *             textArea: { height: 80 },
+ *         } satisfies NxeDefaultOptions,
+ *     },
+ * ]
+ * ```
+ */
+declare const NXE_DEFAULT_OPTIONS: InjectionToken<NxeDefaultOptions>;
+
+/**
+ * `nxeTemplate` — drop-in replacement for DevExtreme's `*dxTemplate`.
+ *
+ * Captures a named `ng-template` so a parent container (select-box item template, grid
+ * cell/header/edit templates, list item template, ...) can look it up by name and render it
+ * with a context object. BOTH authoring forms resolve to the same {@link name}:
+ *
+ * - attribute form: `<ng-template nxeTemplate="cellContent" let-data>` (psak-web style)
+ * - dx microsyntax: `<div *nxeTemplate="let data of 'cellContent'">` — desugars the name into
+ *   an `nxeTemplateOf` binding (orbit's mechanically-migrated `*dxTemplate` templates)
+ *
+ * Parents collect these via `contentChildren(NxeTemplateDirective)` and match on {@link name},
+ * rendering with `ngTemplateOutlet` + an `ngTemplateOutletContext` of `{ $implicit: data, ... }`.
+ */
+declare class NxeTemplateDirective {
+    /** Attribute-form name (`nxeTemplate="name"`); empty in microsyntax usage. */
+    readonly attrName: _angular_core.InputSignal<string>;
+    /** Microsyntax-form name (`*nxeTemplate="let x of 'name'"` binds `nxeTemplateOf`). */
+    readonly ofName: _angular_core.InputSignal<string>;
+    /** The template's lookup name, whichever form supplied it. */
+    readonly name: _angular_core.Signal<string>;
+    readonly templateRef: TemplateRef<unknown>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxeTemplateDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NxeTemplateDirective, "[nxeTemplate]", never, { "attrName": { "alias": "nxeTemplate"; "required": false; "isSignal": true; }; "ofName": { "alias": "nxeTemplateOf"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Wrap a value in an array if it is not already one (null/undefined -> empty array).
+ *
+ * Mirrors `@angular/cdk/coercion`'s `coerceArray` so nxe components don't import CDK coercion
+ * directly. (For boolean/number coercion use `booleanAttribute` / `numberAttribute` from
+ * `@angular/core` directly on `input(...)`.)
+ */
+declare function coerceArray<T>(value: T | readonly T[] | null | undefined): T[];
+
+/**
+ * `booleanAttribute` that preserves "unset".
+ *
+ * An input resolved as `binding ?? token ?? literal` needs three states, but
+ * `booleanAttribute` has two: it maps `undefined` to `false`, which makes "nobody bound this"
+ * indistinguishable from "someone bound false" and silently removes the token rung.
+ *
+ * This keeps the attribute-form coercion (`showClearButton="false"` is `false`, not the truthy
+ * string) and passes `undefined` straight through.
+ */
+declare function nxeOptionalBoolean(value: unknown): boolean | undefined;
+
+/**
+ * Root registry mapping a `validationGroup` string to the `nxe-validator`s in it, mirroring
+ * DevExtreme's global ValidationEngine.
+ *
+ * `nxe-button[validationGroup]` (and any caller) triggers {@link validate} for a group, which
+ * runs every member validator and aggregates the result into the DevExtreme-shaped
+ * {@link NxeValidationResult}.
+ */
+declare class NxeValidationGroupRegistry {
+    private readonly groups;
+    register(group: string, member: NxeValidationGroupMember): void;
+    unregister(group: string, member: NxeValidationGroupMember): void;
+    /** Validate every member of the group; valid (and empty) groups return `isValid: true`. */
+    validate(group: string): NxeValidationResult;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxeValidationGroupRegistry, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<NxeValidationGroupRegistry>;
+}
+
+export { NXE_DEFAULT_OPTIONS, NXE_OPTION, NXE_VALIDATION_TARGET, NxeConfigOptionBase, NxeFormControlBase, NxeTemplateDirective, NxeValidationGroupRegistry, coerceArray, nxeOptionalBoolean };
+export type { NxeBrokenRule, NxeConfigOption, NxeDefaultOptions, NxeGridDefaultOptions, NxePickerDefaultOptions, NxeValidationGroupMember, NxeValidationResult, NxeValidationTarget, NxeValueChangedEvent };