@nexterajs/ui 0.0.1

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

@@ -0,0 +1,40 @@
+import { OverlayRef } from '@angular/cdk/overlay';
+import { Subscription } from 'rxjs';
+
+/**
+ * Marker class carried by every nxe surface — component hosts and CDK overlay panes alike.
+ *
+ * It is the nxe counterpart of DevExtreme's `.dx-widget` base and is what gives a surface its
+ * font family/size/weight/line-height (see styling/_widget.scss).
+ *
+ * It matters most on overlays: a CDK pane is appended to `<body>`, so a portaled dropdown
+ * inherits the page, not the editor that opened it. Without this class a panel silently falls
+ * back to the host app's body font — which is how the select-box list ended up rendering 14px in
+ * an app whose every other text surface is 12.24px.
+ */
+declare const NXE_WIDGET_CLASS = "nxe-widget";
+/** Set on the pane while the overlay is rendered ABOVE its origin instead of below. */
+declare const NXE_PANE_FLIPPED_CLASS = "nxe-pane-flipped";
+/**
+ * Build the `panelClass` for a library-created overlay, guaranteeing the widget contract.
+ *
+ *     panelClass: nxePane('nxe-select-pane')
+ *     panelClass: nxePane('nxe-dropdownbox-pane', ...wrapperClass.split(/\s+/))
+ *
+ * Blank/undefined entries are dropped so callers can splat user-supplied class strings directly.
+ */
+declare function nxePane(...extra: (string | null | undefined)[]): string[];
+/**
+ * Track whether a connected overlay has flipped above its origin, exposing it as
+ * {@link NXE_PANE_FLIPPED_CLASS} on the pane.
+ *
+ * DevExtreme drew dropdowns flush against the editor — no border on the shared edge — and moved
+ * that seam to the other side when the popup flipped up
+ * (`.dx-overlay-content.dx-dropdowneditor-overlay-flipped { border-top-width:1px; border-bottom-width:0 }`).
+ * CDK does not emit any equivalent hook, so panels need this to reproduce it.
+ *
+ * Returns the subscription; callers dispose it with the overlay.
+ */
+declare function trackPaneFlip(overlayRef: OverlayRef): Subscription | undefined;
+
+export { NXE_PANE_FLIPPED_CLASS, NXE_WIDGET_CLASS, nxePane, trackPaneFlip };

package/types/nexterajs-ui-tree-view.d.ts

@@ -0,0 +1,69 @@
+import * as _angular_core from '@angular/core';
+
+/** A node in the assembled tree (children built from the flat `parentIdExpr` list). */
+interface NxeTreeNode {
+    key: unknown;
+    text: string;
+    /** The original data row (consumers read `itemData` off the click event = this). */
+    data: Record<string, unknown>;
+    children: NxeTreeNode[];
+    hasChildren: boolean;
+    level: number;
+}
+/** DevExtreme-shaped `onItemClick` payload (consumers read `event.itemData.<field>`). */
+interface NxeTreeItemClickEvent {
+    itemData: Record<string, unknown>;
+    node: NxeTreeNode;
+    event: Event;
+    component: NxeTreeViewComponent;
+    element: HTMLElement;
+}
+/**
+ * `nxe-tree-view` — drop-in replacement for DevExtreme `dx-tree-view`.
+ *
+ * The single usage (settings sidebar) feeds a FLAT list (`dataStructure="plain"`) and lets the
+ * widget assemble the hierarchy via `keyExpr`/`parentIdExpr`/`rootValue`; so this builds the tree
+ * internally. Single selection, `selectByClick`, optional search box, and a programmatic
+ * `expandAll()` (called via `@ViewChild(NxeTreeViewComponent).instance.expandAll()` after async
+ * load). `(onItemClick)` emits `{ itemData: <full original row>, ... }` so the navigation handler
+ * keeps reading `event.itemData.url/urlParams/objectName`.
+ */
+declare class NxeTreeViewComponent {
+    readonly dataSource: _angular_core.InputSignal<readonly unknown[]>;
+    /** Accepted for parity; this component always assembles a tree from the flat list. */
+    readonly dataStructure: _angular_core.InputSignal<"plain" | "tree">;
+    readonly keyExpr: _angular_core.InputSignal<string>;
+    readonly displayExpr: _angular_core.InputSignal<string>;
+    readonly parentIdExpr: _angular_core.InputSignal<string>;
+    readonly rootValue: _angular_core.InputSignal<unknown>;
+    /** Accepted for parity (no-op: rows carry no `expanded` field; use `expandAll()`). */
+    readonly expandedExpr: _angular_core.InputSignal<string>;
+    readonly selectionMode: _angular_core.InputSignal<"single" | "multiple" | "none">;
+    readonly selectByClick: _angular_core.InputSignal<boolean>;
+    readonly searchEnabled: _angular_core.InputSignal<boolean>;
+    readonly searchMode: _angular_core.InputSignal<"contains" | "startswith" | "equals">;
+    /** Accepted for parity (native scrolling is the default here anyway). */
+    readonly useNativeScrolling: _angular_core.InputSignal<boolean>;
+    readonly width: _angular_core.InputSignal<string | number>;
+    readonly onItemClick: _angular_core.OutputEmitterRef<NxeTreeItemClickEvent>;
+    readonly expanded: _angular_core.WritableSignal<ReadonlySet<unknown>>;
+    readonly selectedKey: _angular_core.WritableSignal<unknown>;
+    readonly searchText: _angular_core.WritableSignal<string>;
+    /** DevExtreme `.instance` facade — `expandAll()` is the only method used. */
+    get instance(): this;
+    protected readonly widthStyle: _angular_core.Signal<string>;
+    private readonly tree;
+    /** Flattened list of currently-visible nodes (respects expand state + search). */
+    protected readonly visibleNodes: _angular_core.Signal<NxeTreeNode[]>;
+    expandAll(): void;
+    collapseAll(): void;
+    protected isExpanded(node: NxeTreeNode): boolean;
+    protected toggle(node: NxeTreeNode, event: Event): void;
+    protected onNodeClick(node: NxeTreeNode, event: Event): void;
+    protected onSearch(event: Event): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxeTreeViewComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxeTreeViewComponent, "nxe-tree-view", never, { "dataSource": { "alias": "dataSource"; "required": false; "isSignal": true; }; "dataStructure": { "alias": "dataStructure"; "required": false; "isSignal": true; }; "keyExpr": { "alias": "keyExpr"; "required": false; "isSignal": true; }; "displayExpr": { "alias": "displayExpr"; "required": false; "isSignal": true; }; "parentIdExpr": { "alias": "parentIdExpr"; "required": false; "isSignal": true; }; "rootValue": { "alias": "rootValue"; "required": false; "isSignal": true; }; "expandedExpr": { "alias": "expandedExpr"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "selectByClick": { "alias": "selectByClick"; "required": false; "isSignal": true; }; "searchEnabled": { "alias": "searchEnabled"; "required": false; "isSignal": true; }; "searchMode": { "alias": "searchMode"; "required": false; "isSignal": true; }; "useNativeScrolling": { "alias": "useNativeScrolling"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; }, { "onItemClick": "onItemClick"; }, never, never, true, never>;
+}
+
+export { NxeTreeViewComponent };
+export type { NxeTreeItemClickEvent, NxeTreeNode };

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

@@ -0,0 +1,102 @@
+import * as _angular_core from '@angular/core';
+import { NxeValidationResult } from '@nexterajs/ui/core';
+import { ValidatorFn } from '@angular/forms';
+
+/** DevExtreme validation rule type (the codebase uses `required`, `compare`, and `range`). */
+type NxeValidationRuleType = 'required' | 'compare' | 'custom' | 'pattern' | 'email' | 'range';
+/**
+ * The message shown when a rule fails and the caller gave none.
+ *
+ * These are DevExtreme's own defaults, verbatim from its `validation-*` message keys. Without
+ * them a rule with no `message` blocks its group and displays nothing at all, because every
+ * editor renders its error bubble under `@if (validationError())` — falsy for the empty string.
+ */
+declare const NXE_DEFAULT_VALIDATION_MESSAGES: Readonly<Record<NxeValidationRuleType, string>>;
+/** Payload passed to a `custom` rule's `validationCallback` (mirrors DevExtreme). */
+interface NxeCustomRuleData {
+    value: unknown;
+    rule: NxeValidationRuleComponent;
+}
+/**
+ * `nxe-validation-rule` — drop-in for DevExtreme `dxi-validation-rule`.
+ *
+ * A no-template configuration child of `nxe-validator`. The codebase uses the universal element
+ * with a `type` attribute (overwhelmingly `type="required"`), so a single component with a
+ * `type` input covers 100% of usage.
+ */
+declare class NxeValidationRuleComponent {
+    readonly type: _angular_core.InputSignal<NxeValidationRuleType>;
+    readonly message: _angular_core.InputSignal<string>;
+    /** `compare` rule: returns the value to compare against. Mirrors `comparisonTarget`. */
+    readonly comparisonTarget: _angular_core.InputSignal<() => unknown>;
+    /** `compare` rule comparison operator (default `==`). */
+    readonly comparisonType: _angular_core.InputSignal<"==" | "===" | "!=" | "!==" | ">" | "<" | ">=" | "<=">;
+    /** `custom` rule: returns true when valid. Mirrors `validationCallback`. */
+    readonly validationCallback: _angular_core.InputSignal<(data: NxeCustomRuleData) => boolean>;
+    /** `pattern` rule. */
+    readonly pattern: _angular_core.InputSignal<string | RegExp>;
+    /** `range` rule bounds (DevExtreme RangeRule: empty values pass, bounds are inclusive). */
+    readonly min: _angular_core.InputSignal<number>;
+    readonly max: _angular_core.InputSignal<number>;
+    /**
+     * The message to show when this rule fails: the caller's, or DevExtreme's default for the
+     * rule type. Whitespace counts as absent — a message of spaces is still an empty bubble.
+     */
+    readonly resolvedMessage: _angular_core.Signal<string>;
+    /** Whether `value` satisfies this rule. */
+    evaluate(value: unknown): boolean;
+    /** DevExtreme RequiredRule semantics: null/undefined/''/false are "not specified". */
+    private isEmpty;
+    private compare;
+    private inRange;
+    private matchesPattern;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxeValidationRuleComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxeValidationRuleComponent, "nxe-validation-rule", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "comparisonTarget": { "alias": "comparisonTarget"; "required": false; "isSignal": true; }; "comparisonType": { "alias": "comparisonType"; "required": false; "isSignal": true; }; "validationCallback": { "alias": "validationCallback"; "required": false; "isSignal": true; }; "pattern": { "alias": "pattern"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * `nxe-validator` — drop-in for DevExtreme `dx-validator`.
+ *
+ * Placed inside an editor (`<nxe-text-box><nxe-validator><nxe-validation-rule .../></nxe-validator></nxe-text-box>`),
+ * it adapts the editor via {@link NXE_VALIDATION_TARGET}, collects its `nxe-validation-rule`
+ * children, and registers into the {@link NxeValidationGroupRegistry} under the editor's
+ * `validationGroup`. Validation is on-demand (matching DevExtreme: not auto-run on change) —
+ * `validate()` is invoked by `nxe-button[validationGroup]` (group-level) or directly.
+ */
+declare class NxeValidatorComponent {
+    private readonly target;
+    private readonly registry;
+    readonly rules: _angular_core.Signal<readonly NxeValidationRuleComponent[]>;
+    /** Explicit group; otherwise inherited from the wrapped editor's `validationGroup`. */
+    readonly validationGroupInput: _angular_core.InputSignal<string>;
+    private readonly group;
+    /** Last validation outcome (false once a rule has failed, until re-validated). */
+    readonly isValid: _angular_core.WritableSignal<boolean>;
+    /** DevExtreme parity: existing code calls `validator.instance.validate()` via `@ViewChild`. */
+    get instance(): NxeValidatorComponent;
+    private readonly member;
+    constructor();
+    /** Run all rules against the editor's current value; pushes the first failing message. */
+    validate(): NxeValidationResult;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxeValidatorComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxeValidatorComponent, "nxe-validator", never, { "validationGroupInput": { "alias": "validationGroup"; "required": false; "isSignal": true; }; }, {}, ["rules"], ["*"], true, never>;
+}
+
+declare class NxeValidators {
+    /**
+     * Check for empty (optional fields) values
+     *
+     * @param value
+     */
+    static isEmptyInputValue(value: any): boolean;
+    /**
+     * Must match validator
+     *
+     * @param controlPath A dot-delimited string values that define the path to the control.
+     * @param matchingControlPath A dot-delimited string values that define the path to the matching control.
+     */
+    static mustMatch(controlPath: string, matchingControlPath: string): ValidatorFn;
+}
+
+export { NXE_DEFAULT_VALIDATION_MESSAGES, NxeValidationRuleComponent, NxeValidatorComponent, NxeValidators };
+export type { NxeCustomRuleData, NxeValidationRuleType };

package/types/nexterajs-ui.d.ts

@@ -0,0 +1,12 @@
+export * from '@nexterajs/ui/animations';
+export * from '@nexterajs/ui/core';
+export * from '@nexterajs/ui/dropdowns';
+export * from '@nexterajs/ui/excel';
+export * from '@nexterajs/ui/file-uploader';
+export * from '@nexterajs/ui/forms';
+export * from '@nexterajs/ui/grid';
+export * from '@nexterajs/ui/intl';
+export * from '@nexterajs/ui/pivot';
+export * from '@nexterajs/ui/styling';
+export * from '@nexterajs/ui/tree-view';
+export * from '@nexterajs/ui/validation';