@nexterajs/ui 0.0.2 → 0.1.0

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

@@ -2,6 +2,7 @@ import { NxeColumnFormat, NxeGridInstance, NxeExcelExportOptions, NxeScrollingCo
 import { NxeNumberSeparators } from '@nexterajs/ui/intl';
 import * as _angular_core from '@angular/core';
 import { OnDestroy, TemplateRef, Signal, EventEmitter } from '@angular/core';
+import { NxeMessageService } from '@nexterajs/ui/core';
 
 type NxePivotArea = 'row' | 'column' | 'data' | 'filter';
 type NxePivotSummaryType = 'sum' | 'count' | 'min' | 'max' | 'avg' | 'custom';
@@ -743,9 +744,9 @@ declare class NxePivotDataSource {
 declare class NxeStateStoringComponent {
     readonly enabled: _angular_core.InputSignal<boolean>;
     readonly type: _angular_core.InputSignal<"custom" | "localStorage" | "sessionStorage">;
-    readonly storageKey: _angular_core.InputSignal<string>;
-    readonly customSave: _angular_core.InputSignal<(state: any) => void>;
-    readonly customLoad: _angular_core.InputSignal<() => any>;
+    readonly storageKey: _angular_core.InputSignal<string | undefined>;
+    readonly customSave: _angular_core.InputSignal<((state: any) => void) | undefined>;
+    readonly customLoad: _angular_core.InputSignal<(() => any) | undefined>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxeStateStoringComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxeStateStoringComponent, "nxe-state-storing", never, { "enabled": { "alias": "enabled"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "storageKey": { "alias": "storageKey"; "required": false; "isSignal": true; }; "customSave": { "alias": "customSave"; "required": false; "isSignal": true; }; "customLoad": { "alias": "customLoad"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
@@ -817,7 +818,7 @@ interface NxePivotFieldMoveEvent {
 }
 declare class NxePivotFieldPanelComponent implements OnDestroy {
     /** The pivot's CURRENT engine — overrides already merged, so chips track every mutation. */
-    readonly engine: _angular_core.InputSignal<NxePivotDataSource>;
+    readonly engine: _angular_core.InputSignal<NxePivotDataSource | null>;
     readonly showFilterFields: _angular_core.InputSignal<boolean>;
     readonly showDataFields: _angular_core.InputSignal<boolean>;
     readonly showColumnFields: _angular_core.InputSignal<boolean>;
@@ -835,14 +836,14 @@ declare class NxePivotFieldPanelComponent implements OnDestroy {
     readonly showBorders: _angular_core.InputSignal<boolean>;
     /** 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>>;
+    readonly toolbarTemplate: _angular_core.InputSignal<TemplateRef<unknown> | null>;
     /** Which panel band hosts the toolbar (the pivot resolves dx's placement branches):
      *  'filter' = the filter-header cell; 'column' = the column-header cell (dx's middle
      *  branch — showFilterFields off but data/column bands shown; the cell renders for the
      *  toolbar even when showColumnFields is off, exactly as dx's always-present
      *  $columnHeader does); null = the toolbar lives in the cross-tab corner (or no
      *  chooser) — nothing renders here. */
-    readonly toolbarArea: _angular_core.InputSignal<"column" | "filter">;
+    readonly toolbarArea: _angular_core.InputSignal<"column" | "filter" | null>;
     /** A chip was dropped — the pivot recomputes areaIndexes and writes its override map. */
     readonly fieldMove: _angular_core.OutputEmitterRef<NxePivotFieldMoveEvent>;
     /** A sortable chip was clicked — the pivot flips the field's effective sortOrder. */
@@ -853,8 +854,9 @@ declare class NxePivotFieldPanelComponent implements OnDestroy {
     readonly filterOpen: _angular_core.OutputEmitterRef<NxePivotFilterOpenEvent>;
     /** The ROW fields area — NxePivotGridComponent outlets this into its corner cell (dx hosts
      *  the row chips inside `.nxe-area-description-cell`, never in a band of their own). */
-    readonly rowAreaTemplate: _angular_core.Signal<TemplateRef<unknown>>;
+    readonly rowAreaTemplate: _angular_core.Signal<TemplateRef<unknown> | undefined>;
     private readonly elementRef;
+    private readonly messages;
     private readonly zone;
     protected readonly filterArea: _angular_core.Signal<PanelArea>;
     protected readonly dataArea: _angular_core.Signal<PanelArea>;
@@ -892,14 +894,14 @@ declare class NxePivotFieldPanelComponent implements OnDestroy {
  *  applyChangesMode 'instantly' (no OK/Cancel — changes hit the pivot live). */
 declare class NxeFieldChooserComponent {
     readonly enabled: _angular_core.InputSignal<boolean>;
-    readonly height: _angular_core.InputSignal<number>;
-    readonly width: _angular_core.InputSignal<number>;
+    readonly height: _angular_core.InputSignal<number | undefined>;
+    readonly width: _angular_core.InputSignal<number | undefined>;
     readonly allowSearch: _angular_core.InputSignal<boolean>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxeFieldChooserComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxeFieldChooserComponent, "nxe-field-chooser", never, { "enabled": { "alias": "enabled"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "allowSearch": { "alias": "allowSearch"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 declare class NxePivotGridComponent implements OnDestroy {
-    readonly dataSource: _angular_core.InputSignal<NxePivotDataSourceOptions | NxePivotDataSource>;
+    readonly dataSource: _angular_core.InputSignal<NxePivotDataSourceOptions | NxePivotDataSource | null | undefined>;
     /** dx `allowFiltering` (default false) — LIVE since P3-C4: filterable dimension chips
      *  (panel AND chooser) render the `.nxe-header-filter` funnel and open the shared
      *  header-filter panel; per-field `field.allowFiltering` overrides the widget flag
@@ -920,8 +922,8 @@ declare class NxePivotGridComponent implements OnDestroy {
     readonly rowHeaderLayout: _angular_core.InputSignal<NxePivotRowHeaderLayout>;
     /** dx `height`: number (px) or CSS string, applied to the widget root — the internal
      *  scroll container tracks it at 100%. */
-    readonly height: _angular_core.InputSignal<string | number>;
-    readonly texts: _angular_core.InputSignal<NxePivotTexts>;
+    readonly height: _angular_core.InputSignal<string | number | undefined>;
+    readonly texts: _angular_core.InputSignal<NxePivotTexts | undefined>;
     readonly showColumnTotals: _angular_core.InputSignal<boolean>;
     readonly showRowTotals: _angular_core.InputSignal<boolean>;
     readonly showColumnGrandTotals: _angular_core.InputSignal<boolean>;
@@ -931,7 +933,7 @@ declare class NxePivotGridComponent implements OnDestroy {
     /** dx `dataFieldArea` (default 'column'): 'row' renders the measures as the innermost ROW
      *  level when two or more exist (with one, dx omits the metric level on either axis).
      *  Left undefined the engine falls back to the dataSource options' own `dataFieldArea`. */
-    readonly dataFieldArea: _angular_core.InputSignal<"row" | "column">;
+    readonly dataFieldArea: _angular_core.InputSignal<"row" | "column" | undefined>;
     /** dx `allowSorting` (default false, P3-C2): field-panel chips toggle their field's
      *  sortOrder on click and carry the `.nxe-sort` arrow in `.nxe-column-indicators`. */
     readonly allowSorting: _angular_core.InputSignal<boolean>;
@@ -950,14 +952,14 @@ declare class NxePivotGridComponent implements OnDestroy {
     protected readonly showBordersEff: Signal<boolean>;
     protected readonly wordWrapEnabledEff: Signal<boolean>;
     protected readonly rowHeaderLayoutEff: Signal<NxePivotRowHeaderLayout>;
-    protected readonly heightEff: Signal<string | number>;
-    protected readonly textsEff: Signal<NxePivotTexts>;
+    protected readonly heightEff: Signal<string | number | undefined>;
+    protected readonly textsEff: Signal<NxePivotTexts | undefined>;
     protected readonly showColumnTotalsEff: Signal<boolean>;
     protected readonly showRowTotalsEff: Signal<boolean>;
     protected readonly showColumnGrandTotalsEff: Signal<boolean>;
     protected readonly showRowGrandTotalsEff: Signal<boolean>;
     protected readonly showTotalsPriorEff: Signal<NxePivotTotalsPrior>;
-    protected readonly dataFieldAreaEff: Signal<"row" | "column">;
+    protected readonly dataFieldAreaEff: Signal<"row" | "column" | undefined>;
     /** The documented option names `option()` gets/sets (DEFAULTS.md lists the exclusions). */
     private readonly effOptions;
     /**
@@ -977,12 +979,12 @@ declare class NxePivotGridComponent implements OnDestroy {
      * the same diff — never twice). `dataSource` rides along, get-only.
      */
     private readonly optionSnapshot;
-    protected readonly fieldChooser: Signal<NxeFieldChooserComponent>;
+    protected readonly fieldChooser: Signal<NxeFieldChooserComponent | undefined>;
     /** The projected `nxe-field-panel` config (P3-C2) — the panel renders when it is visible. */
-    protected readonly fieldPanel: Signal<NxeFieldPanelComponent>;
+    protected readonly fieldPanel: Signal<NxeFieldPanelComponent | undefined>;
     /** The projected `nxe-state-storing` config — LIVE since P3-C4 for `type: 'custom'`:
      *  every layout mutation fires `customSave(state)` and `customLoad` is honored on init. */
-    protected readonly stateStoring: Signal<NxeStateStoringComponent>;
+    protected readonly stateStoring: Signal<NxeStateStoringComponent | undefined>;
     /** dx `fieldPanel.visible` (default false): gates the panel, the corner's chips-vs-caption
      *  switch, and the dx marker classes on the host. */
     protected readonly panelVisible: Signal<boolean>;
@@ -990,7 +992,7 @@ declare class NxePivotGridComponent implements OnDestroy {
     private readonly panelCmp;
     /** The ROW fields area, outletted into the corner cell (dx hosts the row chips inside
      *  `.nxe-area-description-cell` — oracle §c; the corner shows NO caption text then). */
-    protected readonly panelRowAreaTpl: Signal<_angular_core.TemplateRef<unknown>>;
+    protected readonly panelRowAreaTpl: Signal<_angular_core.TemplateRef<unknown> | null>;
     /** 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>;
@@ -1001,9 +1003,9 @@ declare class NxePivotGridComponent implements OnDestroy {
      *  (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">;
+    protected readonly chooserToolbarHost: Signal<"column" | "filter" | "corner" | null>;
     /** The panel-hosted placements, bound into the panel's `toolbarArea` input. */
-    protected readonly panelToolbarArea: Signal<"column" | "filter">;
+    protected readonly panelToolbarArea: Signal<"column" | "filter" | null>;
     protected readonly chooserInCorner: Signal<boolean>;
     private chooserOverlayRef;
     private readonly overlay;
@@ -1011,6 +1013,8 @@ declare class NxePivotGridComponent implements OnDestroy {
     private readonly elementRef;
     /** Locale separators for every number the pivot renders; threaded into the data source. */
     private readonly separators;
+    /** The library's runtime-switchable messages. */
+    protected readonly messages: NxeMessageService;
     /** Bumped by `getDataSource().reload()` to force a re-aggregate. */
     private readonly reloadTick;
     /**
@@ -1038,7 +1042,7 @@ declare class NxePivotGridComponent implements OnDestroy {
      * `expandAll()`/`collapseAll()`, so expand-all no longer wipes a dragged layout.)
      */
     private readonly fieldOverrides;
-    protected readonly engine: Signal<NxePivotDataSource>;
+    protected readonly engine: Signal<NxePivotDataSource | null>;
     /**
      * The "layout changed" hook (P3-C2, consumed since P3-C4): the caller's fields with the
      * panel's overrides merged — a NEW array identity after every mutation (drag move, sort
@@ -1059,11 +1063,11 @@ declare class NxePivotGridComponent implements OnDestroy {
      * simply stop matching any node — harmless, dx-alike.
      */
     private readonly manualExpanded;
-    protected readonly model: Signal<NxePivotModel>;
+    protected readonly model: Signal<NxePivotModel | null>;
     /** Host height style — dx `height`: numbers are px, strings pass through, unset removes it. */
-    protected readonly hostHeight: Signal<string>;
+    protected readonly hostHeight: Signal<string | null>;
     /** The projected `nxe-scrolling` config — `mode: 'virtual'` opts into row windowing. */
-    protected readonly scrolling: Signal<NxeScrollingComponent>;
+    protected readonly scrolling: Signal<NxeScrollingComponent | undefined>;
     /** Scroll offset of `.nxe-pivotgrid-scroll` (its own scroll handler feeds it). */
     private readonly scrollTop;
     /** The scroll container's clientHeight, measured in the render effect (0 = unmeasured). */
@@ -1335,6 +1339,15 @@ declare class NxePivotFieldChipComponent {
     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>;
 }
 
+/** dx fieldChooser texts (m_field_chooser.js `_getDefaultOptions` messages), as library message keys. */
+declare const CHOOSER_TEXT_KEYS: {
+    readonly allFields: "pivot.chooser.allFields";
+    readonly rowFields: "pivot.chooser.rowFields";
+    readonly columnFields: "pivot.chooser.columnFields";
+    readonly filterFields: "pivot.chooser.filterFields";
+    readonly dataFields: "pivot.chooser.dataFields";
+    readonly title: "pivot.chooser.title";
+};
 /** One All-Fields tree row (the fixture's flat leaf list — local fields have no groups). */
 interface ChooserTreeItem {
     fieldIndex: number;
@@ -1350,11 +1363,11 @@ interface ChooserArea {
 }
 declare class NxePivotFieldChooserComponent implements OnDestroy {
     /** The pivot's LIVE engine signal (overrides merged) — instant applies re-read it here. */
-    readonly engine: _angular_core.InputSignal<Signal<NxePivotDataSource>>;
+    readonly engine: _angular_core.InputSignal<Signal<NxePivotDataSource | null>>;
     /** dx `fieldChooser.width`/`height` — applied to the popup box; dxPivotGrid defaults 600
      *  (m_widget.js `fieldChooser` defaults; the DA page passes height 400). */
-    readonly width: _angular_core.InputSignal<number>;
-    readonly height: _angular_core.InputSignal<number>;
+    readonly width: _angular_core.InputSignal<number | undefined>;
+    readonly height: _angular_core.InputSignal<number | undefined>;
     /** dx `fieldChooser.allowSearch` (default false — the capture has NO search box). */
     readonly allowSearch: _angular_core.InputSignal<boolean>;
     /** Widget `allowSorting`: dimension chips inside the chooser sort on click, same as the
@@ -1375,14 +1388,9 @@ declare class NxePivotFieldChooserComponent implements OnDestroy {
     readonly filterOpen: _angular_core.OutputEmitterRef<NxePivotFilterOpenEvent>;
     /** The title-bar X — the pivot disposes the overlay (Escape/backdrop close there too). */
     readonly closed: _angular_core.OutputEmitterRef<void>;
-    protected readonly texts: {
-        allFields: string;
-        rowFields: string;
-        columnFields: string;
-        filterFields: string;
-        dataFields: string;
-        title: string;
-    };
+    protected readonly messages: NxeMessageService;
+    /** The chooser's captions in the active language; read in the template, so a switch re-renders. */
+    protected get texts(): Record<keyof typeof CHOOSER_TEXT_KEYS, string>;
     protected readonly allIcon: string;
     protected readonly searchText: _angular_core.WritableSignal<string>;
     private readonly elementRef;
@@ -1426,22 +1434,22 @@ declare class NxePivotFieldChooserComponent implements OnDestroy {
 /** `dxo-common-series-settings` — the series type (only `bar` is used). */
 declare class NxeCommonSeriesSettingsComponent {
     readonly type: _angular_core.InputSignal<"area" | "line" | "bar" | "spline">;
-    readonly argumentField: _angular_core.InputSignal<string>;
-    readonly valueField: _angular_core.InputSignal<string>;
+    readonly argumentField: _angular_core.InputSignal<string | undefined>;
+    readonly valueField: _angular_core.InputSignal<string | undefined>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxeCommonSeriesSettingsComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxeCommonSeriesSettingsComponent, "nxe-common-series-settings", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "argumentField": { "alias": "argumentField"; "required": false; "isSignal": true; }; "valueField": { "alias": "valueField"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 /** `dxo-size` — fixed chart height. */
 declare class NxeSizeComponent {
-    readonly width: _angular_core.InputSignal<number>;
-    readonly height: _angular_core.InputSignal<number>;
+    readonly width: _angular_core.InputSignal<number | undefined>;
+    readonly height: _angular_core.InputSignal<number | undefined>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxeSizeComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxeSizeComponent, "nxe-size", never, { "width": { "alias": "width"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 /** `dxo-adaptive-layout` — responsive breakpoint width (the chart fills its container above it). */
 declare class NxeAdaptiveLayoutComponent {
-    readonly width: _angular_core.InputSignal<number>;
-    readonly height: _angular_core.InputSignal<number>;
+    readonly width: _angular_core.InputSignal<number | undefined>;
+    readonly height: _angular_core.InputSignal<number | undefined>;
     readonly keepLabels: _angular_core.InputSignal<boolean>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxeAdaptiveLayoutComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxeAdaptiveLayoutComponent, "nxe-adaptive-layout", never, { "width": { "alias": "width"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "keepLabels": { "alias": "keepLabels"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
@@ -1454,13 +1462,13 @@ interface BarRect {
     fill: string;
 }
 declare class NxeChartComponent {
-    readonly dataSource: _angular_core.InputSignal<NxeChartSeries>;
-    protected readonly commonSeries: _angular_core.Signal<NxeCommonSeriesSettingsComponent>;
-    protected readonly size: _angular_core.Signal<NxeSizeComponent>;
-    protected readonly adaptiveLayout: _angular_core.Signal<NxeAdaptiveLayoutComponent>;
+    readonly dataSource: _angular_core.InputSignal<NxeChartSeries | null | undefined>;
+    protected readonly commonSeries: _angular_core.Signal<NxeCommonSeriesSettingsComponent | undefined>;
+    protected readonly size: _angular_core.Signal<NxeSizeComponent | undefined>;
+    protected readonly adaptiveLayout: _angular_core.Signal<NxeAdaptiveLayoutComponent | undefined>;
     /** Series pushed by `pivotGrid.bindChart(...)`; falls back to the `[dataSource]` input. */
     private readonly pushed;
-    protected readonly series: _angular_core.Signal<NxeChartSeries>;
+    protected readonly series: _angular_core.Signal<NxeChartSeries | null>;
     protected readonly chartHeight: _angular_core.Signal<number>;
     protected readonly chartWidth: _angular_core.Signal<number>;
     protected readonly hasData: _angular_core.Signal<boolean>;

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

@@ -0,0 +1,294 @@
+import * as _angular_core from '@angular/core';
+import { InjectionToken, Signal, TemplateRef } from '@angular/core';
+import { Params } from '@angular/router';
+import { NxeStatusFamily } from '@nexterajs/ui/display';
+import { NxeMessageKey } from '@nexterajs/ui/core';
+
+/**
+ * One entry of the side navigation.
+ *
+ * - A **link** has `route` (router) or `href` (plain anchor).
+ * - A **parent** has `children`: it is a disclosure button, not a link. Its children appear under it
+ *   when it is open, and it opens by itself when one of them is the current page.
+ * - A **group** has `heading: true` and `children`: a non-interactive heading, with its items in a
+ *   labelled list under it. Groups sit at the top level; items inside them nest as deep as needed.
+ * - An entry with none of those is a plain button; `itemClick` reports it.
+ */
+interface NxeNavItem {
+    /** Unique within the tree. Keys the open state and the DOM ids. */
+    readonly id: string;
+    /** What the entry says. Translate it. */
+    readonly label: string;
+    /**
+     * The icon, named for `<i class="nxe-icon nxe-icon-NAME">`, or, when the app supplies an
+     * `ng-template[nxeSidenavIcon]`, any key that template maps to an icon. An entry without one
+     * shows the first letter of its label so a collapsed rail is still usable.
+     */
+    readonly icon?: string;
+    /** Router link: a URL (`'/buyer/inbox'`) or commands (`['/buyer/price-lists', id]`). */
+    readonly route?: string | unknown[];
+    /** Query parameters for `route`. When set they take part in the active match. */
+    readonly queryParams?: Params;
+    /** A plain `href`, for a link that leaves the app. Never shown as the current page. */
+    readonly href?: string;
+    /** A count, or a signal of one (read in the template, so it updates without a new tree). */
+    readonly badge?: number | Signal<number | null | undefined>;
+    /** Colour of the badge; `danger` by default. */
+    readonly badgeFamily?: NxeStatusFamily;
+    /** Spoken name of the badge ("5 items need action"); defaults to the number. */
+    readonly badgeLabel?: string;
+    /** Children of a parent entry, or the items of a group. */
+    readonly children?: readonly NxeNavItem[];
+    /** Make this a group heading; its `children` are the group's items. */
+    readonly heading?: boolean;
+    /** Not interactive, not focusable, announced as disabled. */
+    readonly disabled?: boolean;
+    /**
+     * Match the URL exactly. Without it an entry is the current page for its URL and everything
+     * below it (`/buyer/purchase-orders` for `/buyer/purchase-orders/42`). Give the home entry
+     * (`/buyer`) `exact: true`, or it is current everywhere.
+     */
+    readonly exact?: boolean;
+}
+/** `docked`: beside the content, expanded or a rail. `drawer`: off-canvas, over the content. */
+type NxeShellMode = 'docked' | 'drawer';
+/**
+ * What `nxe-topbar` and `nxe-sidenav` need from the `nxe-shell` around them, through
+ * {@link NXE_SHELL}. Both also work without a shell; they then do not toggle anything.
+ */
+interface NxeShellState {
+    readonly mode: Signal<NxeShellMode>;
+    /** The sidenav is a narrow icon rail (docked and collapsed). */
+    readonly rail: Signal<boolean>;
+    /** Docked: the user's collapsed choice. */
+    readonly collapsed: Signal<boolean>;
+    /** The drawer is on screen (drawer mode and open). */
+    readonly drawerShown: Signal<boolean>;
+    /** DOM id of the projected `nxe-sidenav`, for `aria-controls`. */
+    readonly sidenavId: Signal<string | null>;
+    setCollapsed(collapsed: boolean): void;
+    /** Hamburger: open or close the drawer, or collapse or expand the dock. */
+    toggleNavigation(): void;
+    closeDrawer(): void;
+}
+/** Provided by `nxe-shell` to the topbar and sidenav projected into it. */
+declare const NXE_SHELL: InjectionToken<NxeShellState>;
+/**
+ * `<ng-template nxeSidenavIcon let-item>` inside `nxe-sidenav` draws the icon of every entry that
+ * has an `icon`, given the entry. Use it to map `icon` keys to your own SVGs:
+ *
+ * ```html
+ * <nxe-sidenav [items]="items">
+ *     <ng-template nxeSidenavIcon let-item>
+ *         <svg viewBox="0 0 24 24"><path [attr.d]="paths[item.icon]" /></svg>
+ *     </ng-template>
+ * </nxe-sidenav>
+ * ```
+ */
+declare class NxeSidenavIconDirective {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxeSidenavIconDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NxeSidenavIconDirective, "ng-template[nxeSidenavIcon]", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * `nxe-shell` is the page frame of an application: an optional banner, the topbar, the sidenav and
+ * the main content.
+ *
+ * ```html
+ * <nxe-shell [(collapsed)]="collapsed">
+ *     <sb-impersonation-banner nxeShellBanner />
+ *     <nxe-topbar>...</nxe-topbar>
+ *     <nxe-sidenav [items]="items" />
+ *     <router-outlet />
+ * </nxe-shell>
+ * ```
+ *
+ * **Slots.** `[nxeShellBanner]` (full width above the topbar, for a banner that must stay on screen),
+ * an `nxe-topbar`, an `nxe-sidenav`, and everything else, which goes in the `<main>` landmark. A
+ * "Skip to content" link, the first tab stop, jumps to that `<main>`.
+ *
+ * **Responsive.** The shell measures its own width. At or above `breakpoint` (960px by default, the
+ * design system's `md`) the sidenav is docked beside the content, expanded or, when `collapsed`, an
+ * icon rail. Below it the sidenav is an off-canvas drawer over the content with a scrim: the
+ * topbar's toggle button opens it, focus is trapped inside while it is open, Esc and a click on the
+ * scrim close it, a navigation closes it, and focus returns to the control that opened it.
+ * Widening the shell past the breakpoint closes the drawer.
+ *
+ * The shell is as tall as `--nxe-shell-height` (default `100dvh`): give it the height of the space
+ * it fills, and the content scrolls inside `<main>`.
+ */
+declare class NxeShellComponent implements NxeShellState {
+    private readonly host;
+    private readonly messages;
+    private readonly router;
+    private readonly injector;
+    private readonly focusTrapFactory;
+    /** Docked sidenav shows only icons. Two-way: `[(collapsed)]`. */
+    readonly collapsed: _angular_core.ModelSignal<boolean>;
+    /** The off-canvas drawer is open (only meaningful below the breakpoint). Two-way: `[(drawerOpen)]`. */
+    readonly drawerOpen: _angular_core.ModelSignal<boolean>;
+    /** Shell width, in CSS px, from which the sidenav is docked rather than a drawer. */
+    readonly breakpoint: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Skip-link target id; unique per shell. */
+    protected readonly mainId: string;
+    private readonly sidenav;
+    /** Own width, kept by a ResizeObserver; the window's until the first measurement. */
+    private readonly width;
+    readonly mode: _angular_core.Signal<NxeShellMode>;
+    readonly rail: _angular_core.Signal<boolean>;
+    readonly drawerShown: _angular_core.Signal<boolean>;
+    readonly sidenavId: _angular_core.Signal<string | null>;
+    private trap;
+    private returnFocusTo;
+    constructor();
+    setCollapsed(collapsed: boolean): void;
+    /** The hamburger: the drawer below the breakpoint, the dock's collapsed state above it. */
+    toggleNavigation(): void;
+    closeDrawer(): void;
+    protected t(key: 'shell.skipToContent'): string;
+    protected skipToContent(event: Event): void;
+    protected onEscape(event: Event): void;
+    private onDrawerShown;
+    private onDrawerHidden;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxeShellComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxeShellComponent, "nxe-shell", never, { "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "drawerOpen": { "alias": "drawerOpen"; "required": false; "isSignal": true; }; "breakpoint": { "alias": "breakpoint"; "required": false; "isSignal": true; }; }, { "collapsed": "collapsedChange"; "drawerOpen": "drawerOpenChange"; }, ["sidenav"], ["[nxeShellBanner]", "nxe-topbar", "nxe-sidenav", "*"], true, never>;
+}
+
+/**
+ * `nxe-sidenav` is the application's primary navigation, drawn from a tree of {@link NxeNavItem}.
+ *
+ * ```html
+ * <nxe-sidenav [items]="items" (itemClick)="track($event)">
+ *     <img nxeSidenavHeader src="logo.svg" alt="Nextera" />
+ * </nxe-sidenav>
+ * ```
+ *
+ * **Structure and ARIA.** A `<nav>` landmark holding nested lists, in the pattern the ARIA Authoring
+ * Practices call a *disclosure navigation menu*: a link is `<a aria-current="page">` when it is the
+ * current page; a parent is a `<button aria-expanded aria-controls>` that shows or hides the list
+ * under it; a group heading labels its list (`aria-labelledby`). It is deliberately not
+ * `role="tree"`: a tree makes one node focusable and needs the full tree keyboard contract, where
+ * every link here is an ordinary tab stop and the arrow keys are a shortcut on top of Tab.
+ *
+ * **Keyboard.** Tab and Shift+Tab visit every link and parent. On a link or parent, Arrow Down/Up
+ * move to the next/previous visible entry, Home/End to the first/last. Arrow Right opens a closed
+ * parent, or moves into an open one's first child; Arrow Left closes an open parent, or moves from
+ * a child to its parent (Right and Left swap in a right-to-left document). Enter and Space activate.
+ *
+ * **Current page.** From the router: an entry is current when its URL matches (a prefix, or the
+ * whole URL with `exact`), and when several do, the most specific one alone is `aria-current`
+ * (`/payments/aging` over `/payments`). The parents of the current page open themselves on
+ * navigation; what the user opened or closed by hand holds until the next navigation into it.
+ *
+ * **Collapsed rail.** With the sidenav collapsed (through `nxe-shell` or the `collapsed` model) only
+ * the icons show, each with its label as a native `title` and as visually-hidden text, and a badge
+ * pins to the icon. There is no flyout for children (that waits for the menu): activating a parent
+ * in the rail expands the rail with that parent open.
+ *
+ * Inside an `nxe-shell` the shell owns the collapsed state and the off-canvas drawer; on its own the
+ * sidenav is a plain docked column.
+ */
+declare class NxeSidenavComponent {
+    private readonly router;
+    private readonly messages;
+    private readonly shell;
+    /** The sidenav's own element; `nxe-shell` traps focus in it while the drawer is open. */
+    readonly element: HTMLElement;
+    private readonly navElement;
+    /** DOM id, which the topbar's toggle button names in `aria-controls`. */
+    readonly id: string;
+    /** The navigation tree. */
+    readonly items: _angular_core.InputSignal<readonly NxeNavItem[]>;
+    /** Accessible name of the `<nav>` landmark; "Main navigation" in the active language by default. */
+    readonly label: _angular_core.InputSignal<string>;
+    /**
+     * Collapsed to the icon rail. Inside an `nxe-shell` the shell's `collapsed` wins and this is
+     * left alone; the sidenav writes the user's choice through the shell instead.
+     */
+    readonly collapsed: _angular_core.ModelSignal<boolean>;
+    /** Show the collapse/expand button at the foot of a docked sidenav. Default true. */
+    readonly collapsible: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** An entry was activated: a link followed, a plain button pressed. Parents do not emit. */
+    readonly itemClick: _angular_core.OutputEmitterRef<NxeNavItem>;
+    /** Draws the icon of every entry that has an `icon`. */
+    protected readonly iconTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
+    protected readonly navLabel: _angular_core.Signal<string>;
+    protected readonly rail: _angular_core.Signal<boolean>;
+    protected readonly drawer: _angular_core.Signal<boolean>;
+    protected readonly drawerOpen: _angular_core.Signal<boolean>;
+    /** Every entry by id, with its place in the tree and the URL it points at. */
+    private readonly nodes;
+    /** The router's URL, re-read at every navigation so what is current is a signal. */
+    private readonly url;
+    /** Id of the one entry that is the current page. */
+    private readonly currentId;
+    /** Ids of the parents above the current page. They open by themselves. */
+    private readonly currentAncestors;
+    /**
+     * What the user opened or closed by hand. Navigating to a new page forgets the choices about
+     * its ancestors, so they open for it, and keeps the rest.
+     */
+    private readonly manual;
+    protected t(key: NxeMessageKey): string;
+    protected isCurrent(id: string): boolean;
+    /** The current page is somewhere under this parent. */
+    protected holdsCurrent(id: string): boolean;
+    protected isOpen(id: string): boolean;
+    protected hasChildren(item: NxeNavItem): boolean;
+    protected badgeValue(item: NxeNavItem): number | null | undefined;
+    protected badgeName(item: NxeNavItem): string;
+    protected initial(item: NxeNavItem): string;
+    /** Toggle a parent; in the rail, expand the rail with the parent open instead. */
+    protected onParent(item: NxeNavItem): void;
+    protected onActivate(item: NxeNavItem): void;
+    protected toggleCollapsed(): void;
+    protected closeDrawer(): void;
+    protected onKeydown(event: KeyboardEvent, item: NxeNavItem): void;
+    /** Links and parent buttons in document order; the ones inside a closed parent are not rendered. */
+    private focusables;
+    private setOpen;
+    private setCollapsed;
+    private treeOf;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxeSidenavComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxeSidenavComponent, "nxe-sidenav", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "collapsible": { "alias": "collapsible"; "required": false; "isSignal": true; }; }, { "collapsed": "collapsedChange"; "itemClick": "itemClick"; }, ["iconTemplate"], ["[nxeSidenavHeader]", "[nxeSidenavFooter]"], true, never>;
+}
+
+/**
+ * `nxe-topbar` is the bar across the top of an `nxe-shell`: a start, a centre and an end slot.
+ *
+ * ```html
+ * <nxe-topbar>
+ *     <img nxeTopbarStart src="logo.svg" alt="Nextera" />
+ *     <sb-search nxeTopbarCenter />
+ *     <ng-container nxeTopbarEnd>
+ *         <sb-company-switcher />
+ *         <sb-notifications />
+ *     </ng-container>
+ * </nxe-topbar>
+ * ```
+ *
+ * The start slot is preceded by a hamburger button: an icon-only `nxe-button` named "Toggle
+ * navigation" with `aria-controls` the sidenav and `aria-expanded` the sidenav's state. Inside an
+ * `nxe-shell` it opens and closes the drawer below the breakpoint and collapses and expands the dock
+ * above it. `menuToggle` also fires, so a topbar used without a shell can drive its own sidenav.
+ * `[nxeTopbarEnd]` elements sit at the inline end of the bar, where a company switcher, language
+ * toggle, notification bell and user menu go.
+ */
+declare class NxeTopbarComponent {
+    private readonly messages;
+    private readonly shell;
+    /** Show the hamburger button. Default true. */
+    readonly menuButton: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** The hamburger was pressed. */
+    readonly menuToggle: _angular_core.OutputEmitterRef<void>;
+    protected readonly label: _angular_core.Signal<string>;
+    protected readonly controls: _angular_core.Signal<string | null>;
+    /** Drawer: open. Dock: not collapsed. Without a shell the button says nothing about it. */
+    protected readonly expanded: _angular_core.Signal<boolean | null>;
+    protected toggle(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxeTopbarComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxeTopbarComponent, "nxe-topbar", never, { "menuButton": { "alias": "menuButton"; "required": false; "isSignal": true; }; }, { "menuToggle": "menuToggle"; }, never, ["[nxeTopbarStart]", "[nxeTopbarCenter]", "[nxeTopbarEnd]"], true, never>;
+}
+
+export { NXE_SHELL, NxeShellComponent, NxeSidenavComponent, NxeSidenavIconDirective, NxeTopbarComponent };
+export type { NxeNavItem, NxeShellMode, NxeShellState };

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

@@ -1,4 +1,5 @@
 import * as _angular_core from '@angular/core';
+import { NxeMessageService } from '@nexterajs/ui/core';
 
 /** A node in the assembled tree (children built from the flat `parentIdExpr` list). */
 interface NxeTreeNode {
@@ -36,7 +37,9 @@ interface NxeTreeItemClickEvent {
  */
 declare class NxeTreeViewComponent {
     private readonly elementRef;
-    readonly dataSource: _angular_core.InputSignal<readonly unknown[]>;
+    /** The library's runtime-switchable messages. */
+    protected readonly messages: NxeMessageService;
+    readonly dataSource: _angular_core.InputSignal<readonly unknown[] | null | undefined>;
     /** 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>;
@@ -51,7 +54,7 @@ declare class NxeTreeViewComponent {
     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 width: _angular_core.InputSignal<string | number | undefined>;
     readonly onItemClick: _angular_core.OutputEmitterRef<NxeTreeItemClickEvent>;
     readonly expanded: _angular_core.WritableSignal<ReadonlySet<unknown>>;
     readonly selectedKey: _angular_core.WritableSignal<unknown>;
@@ -59,7 +62,7 @@ declare class NxeTreeViewComponent {
     private readonly searchInput;
     /** DevExtreme `.instance` facade — `expandAll()` is the only method used. */
     get instance(): this;
-    protected readonly widthStyle: _angular_core.Signal<string>;
+    protected readonly widthStyle: _angular_core.Signal<string | undefined>;
     private readonly tree;
     /**
      * The visible nodes, each with its position among its siblings.