@nexterajs/ui 0.0.1 → 0.0.2

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

@@ -0,0 +1,147 @@
+import * as _angular_core from '@angular/core';
+import { InjectionToken, EnvironmentProviders } from '@angular/core';
+import { SafeHtml } from '@angular/platform-browser';
+
+type NxeToastType = 'success' | 'error' | 'warning' | 'info';
+type NxeToastPosition = 'toast-top-center' | 'toast-bottom-center' | 'toast-top-right' | 'toast-bottom-right' | 'toast-top-left' | 'toast-bottom-left' | 'toast-top-full-width' | 'toast-bottom-full-width';
+/** Per-call options. Anything omitted falls back to the global {@link NxeToastConfig}. */
+interface NxeToastOverride {
+    /**
+     * Render the message as HTML rather than text.
+     *
+     * The message is still sanitised. Callers pass server-composed strings here — a list of
+     * validation failures joined with `<br>` — so the markup is not author-controlled and must not
+     * be trusted, but stripping it entirely would collapse those lists onto one line.
+     */
+    enableHtml?: boolean;
+    /** Dismiss when the body is clicked. The close button works regardless. */
+    tapToDismiss?: boolean;
+    /** Milliseconds before auto-dismiss. `0` keeps it up until dismissed. */
+    timeOut?: number;
+    closeButton?: boolean;
+    progressBar?: boolean;
+    /** Extra classes on the toast element. */
+    toastClass?: string;
+    titleClass?: string;
+    messageClass?: string;
+}
+interface NxeToastConfig extends NxeToastOverride {
+    /** Which corner or edge the stack is anchored to. */
+    positionClass?: NxeToastPosition;
+    /**
+     * Put the newest toast at the top of the stack.
+     *
+     * Defaults to true, matching the library this replaces. A naive appending list reverses it —
+     * visibly, and without any test failing.
+     */
+    newestOnTop?: boolean;
+    /** Drop a toast whose type, title and message match one already showing. */
+    preventDuplicates?: boolean;
+    /** Cap the stack; 0 means no cap. Older toasts are dismissed first. */
+    maxOpened?: number;
+}
+declare const NXE_TOAST_DEFAULTS: Required<Pick<NxeToastConfig, 'positionClass' | 'timeOut' | 'closeButton' | 'progressBar' | 'tapToDismiss' | 'enableHtml' | 'newestOnTop' | 'preventDuplicates' | 'maxOpened'>>;
+declare const NXE_TOAST_CONFIG: InjectionToken<NxeToastConfig>;
+
+/**
+ * One toast. Rendered by {@link NxeToastService} into its container; not used directly.
+ *
+ * **The element order is load-bearing.** The close button comes first and is floated right, which
+ * is how the library this replaces positioned it — move it after the title and it drops below the
+ * text instead of sitting in the corner. Likewise the host carries the classes rather than an
+ * inner wrapper, because the shipped stylesheet targets `.nxe-toast-container .nxe-toast`
+ * directly and an extra element between them changes what `width` and `margin` apply to.
+ *
+ * Styles are global (`@nexterajs/ui/styles/_toast.scss`), not encapsulated, so an application's
+ * existing overrides keep winning on specificity exactly as they did before.
+ *
+ * Accessibility, which the original had none of:
+ * - `error` and `warning` announce as `alert` (assertive — the user's own action caused it).
+ *   `success` and `info` announce as `status` (polite).
+ * - Focus is never taken. A validation toast typically appears mid-keystroke, and moving focus
+ *   would pull the caret out of the field being corrected.
+ * - The close button is a real `<button>` with a label, reachable by keyboard.
+ */
+declare class NxeToastComponent {
+    private readonly sanitizer;
+    readonly type: _angular_core.InputSignal<NxeToastType>;
+    readonly title: _angular_core.InputSignal<string>;
+    readonly message: _angular_core.InputSignal<string>;
+    readonly enableHtml: _angular_core.InputSignal<boolean>;
+    readonly tapToDismiss: _angular_core.InputSignal<boolean>;
+    readonly closeButton: _angular_core.InputSignal<boolean>;
+    readonly progressBar: _angular_core.InputSignal<boolean>;
+    readonly toastClass: _angular_core.InputSignal<string>;
+    readonly titleClass: _angular_core.InputSignal<string>;
+    readonly messageClass: _angular_core.InputSignal<string>;
+    readonly dismissed: _angular_core.OutputEmitterRef<void>;
+    /** Pre-enter state: the service clears it a frame later so the opacity transition runs. */
+    readonly entering: _angular_core.WritableSignal<boolean>;
+    /** Set while the leave transition plays; the service removes the view once it finishes. */
+    readonly dismissing: _angular_core.WritableSignal<boolean>;
+    readonly progressWidth: _angular_core.WritableSignal<number>;
+    protected readonly assertive: _angular_core.Signal<boolean>;
+    protected readonly hostClass: _angular_core.Signal<string>;
+    /**
+     * Sanitised HTML for the message.
+     *
+     * Callers pass server-composed strings here — validation failures joined with `<br>` — so this
+     * is data, not markup the application authored. `sanitize` drops anything executable and keeps
+     * the line breaks the lists depend on.
+     */
+    protected readonly safeMessage: _angular_core.Signal<SafeHtml>;
+    protected onBodyClick(): void;
+    protected onCloseClick(event: Event): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxeToastComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxeToastComponent, "nxe-toast", never, { "type": { "alias": "type"; "required": true; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "enableHtml": { "alias": "enableHtml"; "required": false; "isSignal": true; }; "tapToDismiss": { "alias": "tapToDismiss"; "required": false; "isSignal": true; }; "closeButton": { "alias": "closeButton"; "required": false; "isSignal": true; }; "progressBar": { "alias": "progressBar"; "required": false; "isSignal": true; }; "toastClass": { "alias": "toastClass"; "required": false; "isSignal": true; }; "titleClass": { "alias": "titleClass"; "required": false; "isSignal": true; }; "messageClass": { "alias": "messageClass"; "required": false; "isSignal": true; }; }, { "dismissed": "dismissed"; }, never, never, true, never>;
+}
+
+/** Handle on a shown toast. `dismiss()` is safe to call more than once. */
+interface NxeToastRef {
+    dismiss(): void;
+    readonly type: NxeToastType;
+    readonly title: string | null;
+    readonly message: string | null;
+}
+/**
+ * Configure the toast stack once, at bootstrap.
+ *
+ * ```ts
+ * providers: [provideNxeToast({ positionClass: 'toast-top-center' })]
+ * ```
+ */
+declare function provideNxeToast(config?: NxeToastConfig): EnvironmentProviders;
+/**
+ * Shows toasts.
+ *
+ * **The container is deliberately not a CDK overlay.** A CDK overlay pane lands in the same
+ * `.cdk-overlay-container` as the application's dialogs, which makes paint order creation order —
+ * so a toast raised right after a dialog closes can end up behind the next dialog that opens.
+ * Callers do exactly that. A dedicated container with its own stacking context keeps toasts above
+ * dialogs regardless of the order things were created in.
+ */
+declare class NxeToastService {
+    private readonly appRef;
+    private readonly injector;
+    private readonly document;
+    private readonly userConfig;
+    private readonly config;
+    private container;
+    private readonly active;
+    success(message?: string | null, title?: string | null, override?: NxeToastOverride): NxeToastRef;
+    error(message?: string | null, title?: string | null, override?: NxeToastOverride): NxeToastRef;
+    warning(message?: string | null, title?: string | null, override?: NxeToastOverride): NxeToastRef;
+    info(message?: string | null, title?: string | null, override?: NxeToastOverride): NxeToastRef;
+    /** Dismiss everything currently showing. */
+    clear(): void;
+    show(type: NxeToastType, message?: string | null, title?: string | null, override?: NxeToastOverride): NxeToastRef;
+    /** Shrink the progress bar across the toast's lifetime, the way the original drove it. */
+    private runProgress;
+    private remove;
+    private ensureContainer;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxeToastService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<NxeToastService>;
+}
+
+export { NXE_TOAST_CONFIG, NXE_TOAST_DEFAULTS, NxeToastComponent, NxeToastService, provideNxeToast };
+export type { NxeToastConfig, NxeToastOverride, NxeToastPosition, NxeToastRef, NxeToastType };

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

@@ -1,4 +1,5 @@
 import { NxeColumnFormat, NxeGridInstance, NxeExcelExportOptions, NxeScrollingComponent, NxeHeaderFilterModel } from '@nexterajs/ui/grid';
+import { NxeNumberSeparators } from '@nexterajs/ui/intl';
 import * as _angular_core from '@angular/core';
 import { OnDestroy, TemplateRef, Signal, EventEmitter } from '@angular/core';
 
@@ -142,6 +143,11 @@ interface NxePivotDataSourceOptions {
     store?: any[];
     retrieveFields?: boolean;
     dataFieldArea?: 'row' | 'column';
+    /**
+     * Locale separators for rendered cell text. Supplied by the pivot component from
+     * `NXE_NUMBER_SEPARATORS`; omitted means en-US, which is what the engine always did.
+     */
+    separators?: NxeNumberSeparators;
 }
 /**
  * A rendered column leaf = (column-path × data-field). Since P2-C2 the column axis is N-level:
@@ -177,7 +183,7 @@ interface NxePivotHeaderCell {
     /** Set when > 1: a 'T'/'GT'/collapsed-parent cell filling the remaining value rows (dx
      *  `depthSize`, m_data_controller). */
     rowspan?: number;
-    /** True on "{value} Total" cells (dx `dx-row-total dx-total`, on both axes). */
+    /** True on "{value} Total" cells (dx `dx-row-total nxe-total`, on both axes). */
     isTotal?: boolean;
     /** True when the cell carries an expand/collapse chevron (dx `dx-expand-icon-container`). */
     expandable?: boolean;
@@ -206,7 +212,7 @@ interface NxePivotRowHeaderCell {
     /** True when the cell carries an expand/collapse chevron (a parent node's label). */
     expandable: boolean;
     expanded: boolean;
-    /** True for a "{value} Total" label cell (dx `dx-row-total dx-total`). */
+    /** True for a "{value} Total" label cell (dx `dx-row-total nxe-total`). */
     isTotal: boolean;
     pathKey: string;
 }
@@ -771,7 +777,7 @@ interface NxePivotPanelChip {
     caption: string;
     sortOrder: 'asc' | 'desc';
     sortable: boolean;
-    /** P3-C4: the chip renders the `.dx-header-filter` funnel (never on data-area chips). */
+    /** P3-C4: the chip renders the `.nxe-header-filter` funnel (never on data-area chips). */
     filterable: boolean;
     /** A filter is applied (`filterValues` non-empty) — full-alpha funnel, no `-empty` class. */
     filterActive: boolean;
@@ -825,9 +831,9 @@ declare class NxePivotFieldPanelComponent implements OnDestroy {
      *  header-filter funnel. Same per-field precedence as `allowSorting`. */
     readonly allowFiltering: _angular_core.InputSignal<boolean>;
     /** Widget `showBorders`: the panel bands sit INSIDE the border box (dx draws the outer
-     *  border around the filter/chip bands — `.dx-pivotgrid-border .dx-filter-header` et al). */
+     *  border around the filter/chip bands — `.nxe-pivotgrid-border .nxe-filter-header` et al). */
     readonly showBorders: _angular_core.InputSignal<boolean>;
-    /** P3-C3: the pivot's `.dx-pivotgrid-toolbar` template (field-chooser button) — rendered
+    /** P3-C3: the pivot's `.nxe-pivotgrid-toolbar` template (field-chooser button) — rendered
      *  where dx prepends its toolbar container (m_widget.js `_renderDescriptionArea`). */
     readonly toolbarTemplate: _angular_core.InputSignal<TemplateRef<unknown>>;
     /** Which panel band hosts the toolbar (the pivot resolves dx's placement branches):
@@ -846,7 +852,7 @@ declare class NxePivotFieldPanelComponent implements OnDestroy {
     /** A chip's funnel was clicked — the pivot opens the header-filter panel (P3-C4). */
     readonly filterOpen: _angular_core.OutputEmitterRef<NxePivotFilterOpenEvent>;
     /** The ROW fields area — NxePivotGridComponent outlets this into its corner cell (dx hosts
-     *  the row chips inside `.dx-area-description-cell`, never in a band of their own). */
+     *  the row chips inside `.nxe-area-description-cell`, never in a band of their own). */
     readonly rowAreaTemplate: _angular_core.Signal<TemplateRef<unknown>>;
     private readonly elementRef;
     private readonly zone;
@@ -867,12 +873,12 @@ declare class NxePivotFieldPanelComponent implements OnDestroy {
     private dragRoot;
     /**
      * Drop zones. For filter/data/column the fields-area element is both hit rect and highlight
-     * target; for ROW the enclosing corner cell (`th.dx-area-description-cell`) is — dx's row
+     * target; for ROW the enclosing corner cell (`th.nxe-area-description-cell`) is — dx's row
      * area IS the corner, so a drop anywhere on it must land in rows, not read as "outside".
      */
     private dropZones;
     private trackPointer;
-    /** dx `.dx-position-indicator`: a 2px gray bar between chips, inside the (positioned) area. */
+    /** dx `.nxe-position-indicator`: a 2px gray bar between chips, inside the (positioned) area. */
     private placeIndicator;
     private completeDrop;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxePivotFieldPanelComponent, never>;
@@ -880,7 +886,7 @@ declare class NxePivotFieldPanelComponent implements OnDestroy {
 }
 
 /** `dxo-field-chooser` — LIVE since P3-C3: with `enabled` the pivot renders the
- *  `.dx-pivotgrid-field-chooser-button` toolbar button and opens the chooser popup
+ *  `.nxe-pivotgrid-field-chooser-button` toolbar button and opens the chooser popup
  *  (nxe-pivot-field-chooser) in a CDK overlay. Defaults are dxPivotGrid's `fieldChooser`
  *  defaults (m_widget.js): enabled true, width/height 600, allowSearch false,
  *  applyChangesMode 'instantly' (no OK/Cancel — changes hit the pivot live). */
@@ -895,7 +901,7 @@ declare class NxeFieldChooserComponent {
 declare class NxePivotGridComponent implements OnDestroy {
     readonly dataSource: _angular_core.InputSignal<NxePivotDataSourceOptions | NxePivotDataSource>;
     /** dx `allowFiltering` (default false) — LIVE since P3-C4: filterable dimension chips
-     *  (panel AND chooser) render the `.dx-header-filter` funnel and open the shared
+     *  (panel AND chooser) render the `.nxe-header-filter` funnel and open the shared
      *  header-filter panel; per-field `field.allowFiltering` overrides the widget flag
      *  (dx m_widget `_updateCalculatedOptions`). */
     readonly allowFiltering: _angular_core.InputSignal<boolean>;
@@ -908,7 +914,7 @@ declare class NxePivotGridComponent implements OnDestroy {
      *  `expandAll()`/`collapseAll()` work regardless, exactly as dx's data-source methods do. */
     readonly allowExpandAll: _angular_core.InputSignal<boolean>;
     readonly showBorders: _angular_core.InputSignal<boolean>;
-    /** dx default TRUE (m_widget.js defaultOptions): `dx-word-wrap` on the table lets header
+    /** dx default TRUE (m_widget.js defaultOptions): `nxe-word-wrap` on the table lets header
      *  cells wrap; data cells stay nowrap either way (dx.light's direct td rule). */
     readonly wordWrapEnabled: _angular_core.InputSignal<boolean>;
     readonly rowHeaderLayout: _angular_core.InputSignal<NxePivotRowHeaderLayout>;
@@ -927,7 +933,7 @@ declare class NxePivotGridComponent implements OnDestroy {
      *  Left undefined the engine falls back to the dataSource options' own `dataFieldArea`. */
     readonly dataFieldArea: _angular_core.InputSignal<"row" | "column">;
     /** dx `allowSorting` (default false, P3-C2): field-panel chips toggle their field's
-     *  sortOrder on click and carry the `.dx-sort` arrow in `.dx-column-indicators`. */
+     *  sortOrder on click and carry the `.nxe-sort` arrow in `.nxe-column-indicators`. */
     readonly allowSorting: _angular_core.InputSignal<boolean>;
     /**
      * Facade `option(name, value)` writes land here and WIN over the input bindings — the dx
@@ -983,17 +989,18 @@ declare class NxePivotGridComponent implements OnDestroy {
     /** The rendered panel component — source of the corner-hosted row-area template. */
     private readonly panelCmp;
     /** The ROW fields area, outletted into the corner cell (dx hosts the row chips inside
-     *  `.dx-area-description-cell` — oracle §c; the corner shows NO caption text then). */
+     *  `.nxe-area-description-cell` — oracle §c; the corner shows NO caption text then). */
     protected readonly panelRowAreaTpl: Signal<_angular_core.TemplateRef<unknown>>;
-    /** The `.dx-pivotgrid-field-chooser-button` renders only when an `nxe-field-chooser` is
+    /** The `.nxe-pivotgrid-field-chooser-button` renders only when an `nxe-field-chooser` is
      *  projected with `enabled` not false (the DA page passes [enabled]="true"). */
     protected readonly chooserEnabled: Signal<boolean>;
     /** dx toolbar placement (m_widget.js `_renderDescriptionArea`, verbatim branch order):
-     *  (a) panel visible && showFilterFields -> the `.dx-filter-header` band;
-     *  (b) panel visible && (showDataFields || showColumnFields) -> the `.dx-column-header`
+     *  (a) panel visible && showFilterFields -> the `.nxe-filter-header` band;
+     *  (b) panel visible && (showDataFields || showColumnFields) -> the `.nxe-column-header`
      *      band (dx-compat's dormant column-header button rules go live);
-     *  (c) else -> the cross-tab corner `.dx-area-description-cell`, where the
-     *      transparent-until-hover button rules (dx-compat ~1113-1118) apply. */
+     *  (c) else -> the cross-tab corner `.nxe-area-description-cell`, where the button is
+     *      transparent until hover and the corner drops its caption (the library's own rules,
+     *      nxe-pivot-grid.component.scss — dx.light's description-cell toolbar rules). */
     protected readonly chooserToolbarHost: Signal<"column" | "filter" | "corner">;
     /** The panel-hosted placements, bound into the panel's `toolbarArea` input. */
     protected readonly panelToolbarArea: Signal<"column" | "filter">;
@@ -1002,6 +1009,8 @@ declare class NxePivotGridComponent implements OnDestroy {
     private readonly overlay;
     private readonly viewContainerRef;
     private readonly elementRef;
+    /** Locale separators for every number the pivot renders; threaded into the data source. */
+    private readonly separators;
     /** Bumped by `getDataSource().reload()` to force a re-aggregate. */
     private readonly reloadTick;
     /**
@@ -1086,7 +1095,7 @@ declare class NxePivotGridComponent implements OnDestroy {
     protected readonly totalColCount: Signal<number>;
     protected onPivotScroll(event: Event): void;
     /**
-     * dx `.dx-pivotgrid-nodata` (gridCoreUtils.renderNoDataText): shown when the data source
+     * dx `.nxe-pivotgrid-nodata` (gridCoreUtils.renderNoDataText): shown when the data source
      * `isEmpty()` — no VISIBLE data field or nothing aggregated (empty/fully-filtered store);
      * text `texts.noData` (dx default "No data"). The reloadTick read re-checks after an
      * in-place instance reload.
@@ -1311,6 +1320,10 @@ declare class NxePivotGridComponent implements OnDestroy {
 
 declare class NxePivotFieldChipComponent {
     readonly chip: _angular_core.InputSignal<NxePivotPanelChip>;
+    /** dx showColumnLines for this chip's surface: true in the field chooser and the panel's
+     *  ROW area — the indicators come FIRST and float right; false (panel column / filter /
+     *  data areas) — they follow the caption inline. */
+    readonly floatIndicators: _angular_core.InputSignal<boolean>;
     /** Raw pointerdown — the host decides whether a drag gesture may begin. */
     readonly chipPointerDown: _angular_core.OutputEmitterRef<PointerEvent>;
     /** Chip click (the host consults its gesture's click suppression before sorting). */
@@ -1319,7 +1332,7 @@ declare class NxePivotFieldChipComponent {
     readonly chipFilterClick: _angular_core.OutputEmitterRef<MouseEvent>;
     protected onFunnelClick(event: MouseEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxePivotFieldChipComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxePivotFieldChipComponent, "div[nxePivotFieldChip]", never, { "chip": { "alias": "chip"; "required": true; "isSignal": true; }; }, { "chipPointerDown": "chipPointerDown"; "chipClick": "chipClick"; "chipFilterClick": "chipFilterClick"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxePivotFieldChipComponent, "div[nxePivotFieldChip]", never, { "chip": { "alias": "chip"; "required": true; "isSignal": true; }; "floatIndicators": { "alias": "floatIndicators"; "required": false; "isSignal": true; }; }, { "chipPointerDown": "chipPointerDown"; "chipClick": "chipClick"; "chipFilterClick": "chipFilterClick"; }, never, never, true, never>;
 }
 
 /** One All-Fields tree row (the fixture's flat leaf list — local fields have no groups). */
@@ -1374,7 +1387,7 @@ declare class NxePivotFieldChooserComponent implements OnDestroy {
     protected readonly searchText: _angular_core.WritableSignal<string>;
     private readonly elementRef;
     private readonly zone;
-    /** Popup box size — dx puts fieldChooser.width/height on `.dx-overlay-content` (600 dflt). */
+    /** Popup box size — dx puts fieldChooser.width/height on `.nxe-overlay-content` (600 dflt). */
     protected readonly boxWidth: Signal<string>;
     protected readonly boxHeight: Signal<string>;
     /**
@@ -1403,7 +1416,7 @@ declare class NxePivotFieldChooserComponent implements OnDestroy {
      */
     private allowedIn;
     private trackPointer;
-    /** dx `.dx-position-indicator-vertical`: a 2px bar between the stacked chips. */
+    /** dx `.nxe-position-indicator-vertical`: a 2px bar between the stacked chips. */
     private placeIndicator;
     private completeDrop;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxePivotFieldChooserComponent, never>;

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

@@ -1,10 +1,12 @@
 import { OverlayRef } from '@angular/cdk/overlay';
 import { Subscription } from 'rxjs';
+import * as i0 from '@angular/core';
+import { EnvironmentProviders, OnInit, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
 
 /**
  * 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
+ * It is the nxe counterpart of DevExtreme's `.nxe-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
@@ -30,11 +32,169 @@ declare function nxePane(...extra: (string | null | undefined)[]): string[];
  *
  * 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 }`).
+ * (`.nxe-overlay-content.nxe-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 };
+/**
+ * Migration aid: re-emit the old `dx-*` class names alongside the library's `nxe-*` ones.
+ *
+ * The library dropped the `dx-` prefix from its DOM. Applications that still style themselves
+ * with rules like `.dx-datagrid .dx-row > td { padding: 4px }` would silently lose that styling,
+ * and no stylesheet can fix it: CSS cannot alias a class, so a rule keyed on `.dx-datagrid` will
+ * never match an element that only says `nxe-datagrid`. The class has to be back on the element.
+ *
+ * So this mirrors them at runtime. Provide it once and unmigrated stylesheets keep working
+ * unchanged; provide nothing and the library costs nothing, which is the point of it being
+ * opt-in. `tools/dx-compat/rewrite-styles.mjs` rewrites an application's own stylesheets when it
+ * is ready to drop the flag — this is a bridge, not a destination.
+ *
+ * ```ts
+ * bootstrapApplication(AppComponent, { providers: [provideNxeDxCompat()] });
+ * ```
+ */
+declare class NxeDxCompatService {
+    private readonly document;
+    private readonly ngZone;
+    private observer?;
+    /** Our own writes retrigger the observer; this stops it chasing its own tail. */
+    private mirroring;
+    start(): void;
+    stop(): void;
+    private onMutations;
+    private mirrorSubtree;
+    /** Keep `dx-x` present exactly while `nxe-x` is, so a removed state class is removed here too. */
+    private mirrorElement;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NxeDxCompatService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<NxeDxCompatService>;
+}
+/**
+ * Opt into the `dx-*` compatibility classes. See {@link NxeDxCompatService} for why this is a
+ * runtime mirror rather than a stylesheet.
+ */
+declare function provideNxeDxCompat(): EnvironmentProviders;
+
+/** Where the scroll position sits on each axis: -1 at the start, 1 at the end, 0 in between. */
+interface NxeScrollbarPosition {
+    x: number;
+    y: number;
+}
+/** Scroll geometry of the host element. */
+interface NxeScrollbarGeometry {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}
+/**
+ * The options that map onto this implementation.
+ *
+ * `wheelPropagation` is accepted and ignored: it existed because the original took the wheel over
+ * from the browser and had to decide when to hand it back. Scrolling here is native, so the
+ * browser makes that decision itself — which is what the option was trying to restore.
+ */
+interface NxeScrollbarOptions {
+    suppressScrollX?: boolean;
+    suppressScrollY?: boolean;
+    wheelPropagation?: boolean;
+    /** Rail is hidden below this content overflow, in px. Matches the original's default. */
+    minScrollbarLength?: number;
+    maxScrollbarLength?: number;
+}
+/**
+ * `[nxeScrollbar]` — a container with custom overlay scrollbars.
+ *
+ * This replaces a Perfect Scrollbar wrapper, and reproduces its DOM and its rendering exactly:
+ * two absolutely-positioned rails, each holding a thumb, sized and offset from the host's own
+ * scroll geometry. The stylesheet (`@nexterajs/ui/styles/_scrollbar.scss`) is a value-for-value
+ * port, so applications that restyle the rails keep their appearance unchanged.
+ *
+ * **What is different, deliberately:** the original set `overflow: hidden` and reimplemented
+ * wheel, touch, keyboard and momentum scrolling in JavaScript. Here the element scrolls natively
+ * and only the native scrollbar is hidden — the rails are painted from the `scroll` event. That is
+ * less code and better behaviour on touch and trackpads, and it is invisible: a hidden native
+ * scrollbar takes no layout width, exactly like the overlay rails it replaces.
+ *
+ * The host carries `nxe-scrollbar` while enabled, which is the marker callers branch on.
+ */
+declare class NxeScrollbarDirective implements OnInit, OnChanges, OnDestroy {
+    private readonly elementRef;
+    private readonly zone;
+    private readonly destroyRef;
+    nxeScrollbar: boolean;
+    nxeScrollbarOptions: NxeScrollbarOptions | null;
+    private options;
+    private animation;
+    private railX?;
+    private railY?;
+    private thumbX?;
+    private thumbY?;
+    private resizeObserver?;
+    private mutationObserver?;
+    private scrollingXTimer;
+    private scrollingYTimer;
+    private teardown;
+    private initialised;
+    get element(): HTMLElement;
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnDestroy(): void;
+    isEnabled(): boolean;
+    /**
+     * Recompute rail and thumb geometry. Call after changing content the directive cannot observe.
+     *
+     * This reproduces the original's arithmetic exactly, down to how it rounds — the requirement was
+     * no visual difference, and each of these is worth a pixel:
+     * - the container is measured from `getBoundingClientRect()` rounded, not from `clientHeight`;
+     * - sizes and offsets are **truncated** (the original ran them through `parseInt`), not rounded;
+     * - `scrollTop` is floored before it is used;
+     * - the thumb offset is clamped so it cannot overhang the end of the rail.
+     */
+    update(): void;
+    /** Kept for parity with the wrapper this replaces; teardown also happens in ngOnDestroy. */
+    destroy(): void;
+    isScrollableX(): boolean;
+    isScrollableY(): boolean;
+    geometry(prefix?: 'scroll' | 'client' | 'offset'): NxeScrollbarGeometry;
+    /** -1 at the start of an axis, 1 at its end, 0 anywhere between. */
+    position(absolute?: boolean): NxeScrollbarPosition;
+    scrollTo(x: number, y?: number, speed?: number): void;
+    scrollToX(x: number, speed?: number): void;
+    scrollToY(y: number, speed?: number): void;
+    scrollToTop(offset?: number, speed?: number): void;
+    scrollToBottom(offset?: number, speed?: number): void;
+    scrollToLeft(offset?: number, speed?: number): void;
+    scrollToRight(offset?: number, speed?: number): void;
+    /**
+     * Bring the first descendant matching `selector` into view.
+     *
+     * `ignoreVisible` skips the scroll when the target already sits inside the viewport less the
+     * offset, so an item that is merely low on screen is not yanked to the top on every change.
+     */
+    scrollToElement(selector: string, offset?: number, ignoreVisible?: boolean, speed?: number): void;
+    /**
+     * Move one axis to `value`, easing over `speed` ms when one is given.
+     *
+     * The easing bails as soon as the position stops matching what it last wrote, so a user who
+     * grabs the wheel mid-flight takes over instead of fighting the animation.
+     */
+    animateScrolling(axis: 'scrollTop' | 'scrollLeft', value: number, speed?: number): void;
+    private init;
+    private buildRail;
+    private onScroll;
+    private bindThumbDrag;
+    /** Only the configured bounds, and only when set — the same shape the original's clamp had. */
+    private clampThumb;
+    private on;
+    private dispose;
+    private cancelAnimation;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NxeScrollbarDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NxeScrollbarDirective, "[nxeScrollbar]", ["nxeScrollbar"], { "nxeScrollbar": { "alias": "nxeScrollbar"; "required": false; }; "nxeScrollbarOptions": { "alias": "nxeScrollbarOptions"; "required": false; }; }, {}, never, never, true, never>;
+    static ngAcceptInputType_nxeScrollbar: boolean | string | null | undefined;
+}
+
+export { NXE_PANE_FLIPPED_CLASS, NXE_WIDGET_CLASS, NxeDxCompatService, NxeScrollbarDirective, nxePane, provideNxeDxCompat, trackPaneFlip };
+export type { NxeScrollbarGeometry, NxeScrollbarOptions, NxeScrollbarPosition };

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

@@ -10,6 +10,12 @@ interface NxeTreeNode {
     hasChildren: boolean;
     level: number;
 }
+/** A visible node with the sibling position a flattened tree has to state explicitly. */
+interface NxeTreeRow {
+    node: NxeTreeNode;
+    posInSet: number;
+    setSize: number;
+}
 /** DevExtreme-shaped `onItemClick` payload (consumers read `event.itemData.<field>`). */
 interface NxeTreeItemClickEvent {
     itemData: Record<string, unknown>;
@@ -29,6 +35,7 @@ interface NxeTreeItemClickEvent {
  * keeps reading `event.itemData.url/urlParams/objectName`.
  */
 declare class NxeTreeViewComponent {
+    private readonly elementRef;
     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">;
@@ -49,10 +56,22 @@ declare class NxeTreeViewComponent {
     readonly expanded: _angular_core.WritableSignal<ReadonlySet<unknown>>;
     readonly selectedKey: _angular_core.WritableSignal<unknown>;
     readonly searchText: _angular_core.WritableSignal<string>;
+    private readonly searchInput;
     /** DevExtreme `.instance` facade — `expandAll()` is the only method used. */
     get instance(): this;
     protected readonly widthStyle: _angular_core.Signal<string>;
     private readonly tree;
+    /**
+     * The visible nodes, each with its position among its siblings.
+     *
+     * The tree renders as one flat `<ul>` with indentation rather than nested lists, so a screen
+     * reader cannot infer depth or sibling counts from the DOM. `aria-level`, `aria-setsize` and
+     * `aria-posinset` are what carry that, which makes them required for a flattened tree rather
+     * than optional extras. They are computed during the walk, where the sibling array is already
+     * in hand — reconstructing them from the flat list afterwards is possible but much harder to
+     * read for no gain.
+     */
+    protected readonly visibleRows: _angular_core.Signal<NxeTreeRow[]>;
     /** Flattened list of currently-visible nodes (respects expand state + search). */
     protected readonly visibleNodes: _angular_core.Signal<NxeTreeNode[]>;
     expandAll(): void;
@@ -61,9 +80,39 @@ declare class NxeTreeViewComponent {
     protected toggle(node: NxeTreeNode, event: Event): void;
     protected onNodeClick(node: NxeTreeNode, event: Event): void;
     protected onSearch(event: Event): void;
+    /**
+     * The search box's clear button. dx empties the value and leaves the caret in the box (its
+     * clear button swallows the mouse-down so the input never loses focus); refocusing here covers
+     * the case where focus had already left the input.
+     */
+    protected clearSearch(): void;
+    /**
+     * The node holding the tree's single tab stop.
+     *
+     * A tree is one stop in the tab order, not one per node, so a roving tabindex is part of the
+     * role rather than an extra: `role="tree"` on a list nothing can focus would announce a
+     * structure a keyboard user cannot reach.
+     */
+    protected readonly focusedKey: _angular_core.WritableSignal<unknown>;
+    protected isTabStop(node: NxeTreeNode, index: number): boolean;
+    /**
+     * The node that holds DOM focus right now, or `null` while focus is anywhere else.
+     *
+     * Deliberately not `focusedKey`: that is the roving tab stop and has to outlive a blur, so Tab
+     * comes back to the same node. dx drops `dx-state-focused` the moment focus leaves the node,
+     * and the focused look goes with it — the row colour, and the toggle, which follows the row's
+     * colour only while focused (`color: unset`, dx.light.css). Keyed off focusin/focusout so the
+     * class means exactly what it says.
+     */
+    private readonly focusedNode;
+    protected isFocused(node: NxeTreeNode): boolean;
+    protected onNodeFocus(node: NxeTreeNode): void;
+    protected onNodeBlur(node: NxeTreeNode): void;
+    /** Arrow-key navigation, per the WAI-ARIA tree pattern. */
+    protected onKeydown(event: KeyboardEvent): 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 };
+export type { NxeTreeItemClickEvent, NxeTreeNode, NxeTreeRow };