@nexterajs/ui 0.0.1 → 0.1.0

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

@@ -14,6 +14,13 @@ interface NxeParsedNumberFormat {
     minInt: number;
     minFrac: number;
     maxFrac: number;
+    /**
+     * The pattern's negative section, from `positive;negative` (`#,##0.00;(#,##0.00)`). A value
+     * below zero renders through it from its absolute value, and gets no `-` of its own: the
+     * section's prefix and suffix are the sign. Absent means dx's default, a `-` before the
+     * positive pattern.
+     */
+    negative?: NxeParsedNumberFormat;
 }
 /** Parse an LDML pattern into a {@link NxeParsedNumberFormat}, or `null` for raw (no format). */
 declare function parseNumberFormat(pattern: string | undefined | null): NxeParsedNumberFormat | null;
@@ -74,7 +81,7 @@ declare function hasTimeOfDay(value: unknown): boolean;
  */
 declare function isAllDayRange(start: unknown, end: unknown): boolean;
 /** Format a DateTime for display per `displayFormat` (DevExtreme tokens map 1:1 to Luxon). */
-declare function formatDisplay(dt: DateTime | null, displayFormat: string): string;
+declare function formatDisplay(dt: DateTime | null, displayFormat: string, locale?: string): string;
 /**
  * Parse user-typed text, trying in order: the display format; a lenient variant of it; for a format
  * carrying time tokens, its date-only head (keeping `base`'s time); then ISO.
@@ -84,7 +91,7 @@ declare function formatDisplay(dt: DateTime | null, displayFormat: string): stri
  * rejects the text outright — nulls the whole field. Callers editing an existing value should pass
  * it; the parameter is optional so the date-only call sites need no change.
  */
-declare function parseDisplay(text: string, displayFormat: string, base?: DateTime | null): DateTime | null;
+declare function parseDisplay(text: string, displayFormat: string, base?: DateTime | null, locale?: string): DateTime | null;
 /** Calendar zoom level (DevExtreme `dxCalendar.zoomLevel`). */
 type NxeCalendarZoom = 'month' | 'year' | 'decade' | 'century';
 interface NxePeriodCell {
@@ -121,5 +128,33 @@ declare function buildCalendarWeeks(viewMonth: DateTime): DateTime[][];
  */
 declare const NXE_NUMBER_SEPARATORS: InjectionToken<NxeNumberSeparators>;
 
-export { NXE_DATE_SERIALIZATION_FORMAT, NXE_DEFAULT_DATETIME_DISPLAY_FORMAT, NXE_DEFAULT_DISPLAY_FORMAT, NXE_DEFAULT_TIME_DISPLAY_FORMAT, NXE_EN_US_SEPARATORS, NXE_ID_SEPARATORS, NXE_NUMBER_SEPARATORS, buildCalendarWeeks, buildPeriodCells, formatDisplay, formatNumber, hasTimeOfDay, isAllDayRange, parseDateValue, parseDisplay, parseNumber, parseNumberFormat, roundHalfAwayFromZero, serializeDate };
-export type { NxeCalendarZoom, NxeNumberSeparators, NxeParsedNumberFormat, NxePeriodCell };
+/** How one currency is displayed. */
+interface NxeCurrencyInfo {
+    /** Minor units: fraction digits the currency has (ISO 4217). */
+    readonly digits: number;
+    /**
+     * Drop an all-zero fraction (`IDR 1.351.000`), but keep the full one when it is not zero
+     * (`IDR 1.351.000,50`). Currencies with fixed minor units always show them (`USD 1,234.00`).
+     */
+    readonly trimZeroFraction: boolean;
+}
+/** Normalise a currency code: trimmed and upper-cased; `''` when absent. */
+declare function nxeCurrencyCode(code: string | null | undefined): string;
+/**
+ * Display rules for a currency code. Unknown codes have 2 minor units. `decimals` (the currency's
+ * decimals from reference data, when the app knows them) overrides the built-in table.
+ */
+declare function nxeCurrencyInfo(code: string | null | undefined, decimals?: number | null): NxeCurrencyInfo;
+/** The number pattern behind a currency: grouped, `digits` fraction digits at most. */
+declare function nxeCurrencyNumberFormat(code: string | null | undefined, decimals?: number | null): NxeParsedNumberFormat;
+/**
+ * Format an amount as `CODE 1.234,50`. `null`/`NaN` give `''`. With a `pattern` (an already parsed
+ * number format) that pattern shapes the number instead of the currency's own digits.
+ */
+declare function formatCurrency(value: number | null | undefined, code: string | null | undefined, separators?: NxeNumberSeparators, options?: {
+    decimals?: number | null;
+    pattern?: NxeParsedNumberFormat | null;
+}): string;
+
+export { NXE_DATE_SERIALIZATION_FORMAT, NXE_DEFAULT_DATETIME_DISPLAY_FORMAT, NXE_DEFAULT_DISPLAY_FORMAT, NXE_DEFAULT_TIME_DISPLAY_FORMAT, NXE_EN_US_SEPARATORS, NXE_ID_SEPARATORS, NXE_NUMBER_SEPARATORS, buildCalendarWeeks, buildPeriodCells, formatCurrency, formatDisplay, formatNumber, hasTimeOfDay, isAllDayRange, nxeCurrencyCode, nxeCurrencyInfo, nxeCurrencyNumberFormat, parseDateValue, parseDisplay, parseNumber, parseNumberFormat, roundHalfAwayFromZero, serializeDate };
+export type { NxeCalendarZoom, NxeCurrencyInfo, NxeNumberSeparators, NxeParsedNumberFormat, NxePeriodCell };

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

@@ -0,0 +1,531 @@
+import * as _angular_core from '@angular/core';
+import { TemplateRef } from '@angular/core';
+import { Params, Data } from '@angular/router';
+import { NxeStatusFamily } from '@nexterajs/ui/display';
+import { AbstractControl } from '@angular/forms';
+
+/** What a tab with a `link` does with the query string already in the URL. */
+type NxeTabQueryParamsHandling = 'merge' | 'preserve' | '';
+/**
+ * One tab of an {@link NxeTabsComponent}. It draws nothing itself: the parent renders the tab
+ * button and the panel from the inputs and content declared here.
+ *
+ * ```html
+ * <nxe-tab label="Details">Plain content: created with the page, shown when active.</nxe-tab>
+ * <nxe-tab label="Lines" [badge]="12" key="lines">
+ *     <ng-template nxeTabContent>Lazy: created the first time the tab opens.</ng-template>
+ * </nxe-tab>
+ * <nxe-tab label="Pending" [link]="[]" [queryParams]="{ status: 'pending' }" [badge]="4" />
+ * ```
+ *
+ * With `link` set the tab is an anchor and the URL decides whether it is active (router mode).
+ */
+declare class NxeTabComponent {
+    /** The tab's text. */
+    readonly label: _angular_core.InputSignal<string>;
+    /** A stable id for `selectedKey` and for telling tabs apart across reorders. */
+    readonly key: _angular_core.InputSignal<string | null>;
+    /** A count shown after the label in an `nxe-badge`; `null` or `undefined` shows none, 0 shows 0. */
+    readonly badge: _angular_core.InputSignalWithTransform<number | null | undefined, unknown>;
+    /** Status family of the badge. `neutral` by default: a count in a tab is information, not an alarm. */
+    readonly badgeFamily: _angular_core.InputSignal<NxeStatusFamily>;
+    /** Not selectable and skipped by the arrow keys. */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Overrides the tabs' `keepAlive` for this tab: keep the content after leaving it, or destroy it. */
+    readonly keepAlive: _angular_core.InputSignalWithTransform<boolean | undefined, unknown>;
+    /**
+     * Router mode. Router commands (`['/pos', id]`, `[]` for the current route) or a URL string; the tab
+     * becomes an anchor and is active while the URL matches this link plus its `queryParams`.
+     */
+    readonly link: _angular_core.InputSignal<string | readonly unknown[] | null | undefined>;
+    /** Query params of the link, e.g. `{ status: 'pending' }`. */
+    readonly queryParams: _angular_core.InputSignal<Params | null | undefined>;
+    /** `merge` keeps the other query params in the URL (a search term, a page) when switching tab. */
+    readonly queryParamsHandling: _angular_core.InputSignal<NxeTabQueryParamsHandling>;
+    private readonly lazy;
+    private readonly implicit;
+    /** True when the content was declared in an `nxeTabContent` template. */
+    readonly isLazy: _angular_core.Signal<boolean>;
+    /** The template the parent stamps into the panel. */
+    readonly contentTemplate: _angular_core.Signal<TemplateRef<unknown>>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxeTabComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxeTabComponent, "nxe-tab", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "key": { "alias": "key"; "required": false; "isSignal": true; }; "badge": { "alias": "badge"; "required": false; "isSignal": true; }; "badgeFamily": { "alias": "badgeFamily"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "keepAlive": { "alias": "keepAlive"; "required": false; "isSignal": true; }; "link": { "alias": "link"; "required": false; "isSignal": true; }; "queryParams": { "alias": "queryParams"; "required": false; "isSignal": true; }; "queryParamsHandling": { "alias": "queryParamsHandling"; "required": false; "isSignal": true; }; }, {}, ["lazy"], ["*"], true, never>;
+}
+
+/** `automatic`: arrowing to a tab selects it. `manual`: arrows only move focus; Enter or Space selects. */
+type NxeTabsActivation = 'automatic' | 'manual';
+/**
+ * `nxe-tabs` is a WAI-ARIA tabs widget: a `tablist` of `tab` buttons over `tabpanel`s, one tab in the
+ * tab order (roving `tabindex`), Left/Right (flipped in RTL), Home and End to move, and the active tab
+ * in `aria-selected`.
+ *
+ * ```html
+ * <nxe-tabs [(selectedKey)]="tab" tablistLabel="Purchase order">
+ *     <nxe-tab key="details" label="Details">...</nxe-tab>
+ *     <nxe-tab key="lines" label="Lines" [badge]="lines().length">
+ *         <ng-template nxeTabContent><app-po-lines /></ng-template>
+ *     </nxe-tab>
+ *     <nxe-tab key="history" label="History" disabled />
+ * </nxe-tabs>
+ * ```
+ *
+ * **Selection.** `selectedIndex` and `selectedKey` are two-way models. A tab with a `key` is better
+ * addressed by key (it survives a tab being added or hidden); if both are set the key wins, so bind one.
+ *
+ * **Lazy content.** Plain content is part of the page from the start. Content inside
+ * `<ng-template nxeTabContent>` is created the first time its tab is active. `keepAlive` (default
+ * `true`) then keeps it, with its state, when you leave; `false` destroys it. A tab's own `keepAlive`
+ * overrides.
+ *
+ * **Router mode.** A tab with `link` is an anchor and the URL decides which tab is active, for a route
+ * path or for a query param (`[link]="[]" [queryParams]="{ status: 'pending' }"`). Query params are
+ * compared as each tab declares them (`queryParamsHandling` plays no part in matching): a key any link
+ * tab declares is a key of the group, and a tab that leaves it out is active only while the URL does not
+ * carry it, so an "All" tab never shares the highlight with "PO" at `?status=po`. Of several matches the
+ * tab declaring the most params wins. The back button moves the tab. Link tabs follow the URL, so Left/Right only move focus
+ * and Enter follows the link. Put a `router-outlet` (or your list) beside the tabs, or give a link tab an
+ * `nxeTabContent` panel.
+ *
+ * **Overflow.** More tabs than fit scroll sideways; the focused or selected tab is kept in view.
+ */
+declare class NxeTabsComponent {
+    /** Zero-based index of the selected tab. Two-way. */
+    readonly selectedIndex: _angular_core.ModelSignal<number>;
+    /** `key` of the selected tab. Two-way; wins over `selectedIndex` when it matches a tab. */
+    readonly selectedKey: _angular_core.ModelSignal<string | null>;
+    /** `automatic` (default) selects on arrow; `manual` needs Enter or Space. */
+    readonly activation: _angular_core.InputSignal<NxeTabsActivation>;
+    /** Keep a tab's content alive after leaving it. A tab's own `keepAlive` overrides. */
+    readonly keepAlive: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Accessible name of the tab list. */
+    readonly tablistLabel: _angular_core.InputSignal<string>;
+    protected readonly tabs: _angular_core.Signal<readonly NxeTabComponent[]>;
+    private readonly router;
+    private readonly route;
+    private readonly list;
+    private readonly uid;
+    /** The URL after each navigation; what router-mode tabs are matched against. */
+    private readonly url;
+    /** Index of the link tab that matches the URL, or -1. */
+    private readonly linkIndex;
+    /** Index of the active tab, or -1 when every tab is disabled. */
+    protected readonly activeIndex: _angular_core.Signal<number>;
+    private readonly activeTab;
+    /** Every tab that has been active, for lazy content that stays alive. */
+    private readonly visited;
+    /** The tab with focus inside the list, while it has any. */
+    protected readonly focusedIndex: _angular_core.WritableSignal<number | undefined>;
+    /** The one tab in the tab order: the focused one, else the active one. */
+    protected readonly tabbableIndex: _angular_core.Signal<number>;
+    constructor();
+    protected tabId(index: number): string;
+    protected panelId(index: number): string;
+    protected isLink(tab: NxeTabComponent): boolean;
+    /** True when a tab has a panel to point `aria-controls` at. */
+    protected hasPanel(tab: NxeTabComponent): boolean;
+    /** Whether the panel's content exists right now. */
+    protected isRendered(tab: NxeTabComponent, index: number): boolean;
+    protected select(index: number): void;
+    private commit;
+    protected onFocusOut(event: FocusEvent): void;
+    protected onKeydown(event: KeyboardEvent): void;
+    private triggers;
+    private focusTab;
+    /** Moves focus to the tab that is in the tab order (the active one). */
+    focus(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxeTabsComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxeTabsComponent, "nxe-tabs", never, { "selectedIndex": { "alias": "selectedIndex"; "required": false; "isSignal": true; }; "selectedKey": { "alias": "selectedKey"; "required": false; "isSignal": true; }; "activation": { "alias": "activation"; "required": false; "isSignal": true; }; "keepAlive": { "alias": "keepAlive"; "required": false; "isSignal": true; }; "tablistLabel": { "alias": "tablistLabel"; "required": false; "isSignal": true; }; }, { "selectedIndex": "selectedIndexChange"; "selectedKey": "selectedKeyChange"; }, ["tabs"], never, true, never>;
+}
+
+/**
+ * Marks the `<ng-template>` that holds a tab's lazy content. The template is stamped out the first
+ * time the tab is activated, not before, so a heavy panel (a grid, a chart) costs nothing until it
+ * is opened:
+ *
+ * ```html
+ * <nxe-tab label="Lines">
+ *     <ng-template nxeTabContent><app-po-lines /></ng-template>
+ * </nxe-tab>
+ * ```
+ *
+ * Whether it is destroyed again when the tab is left is `keepAlive` on the tab or the tabs.
+ */
+declare class NxeTabContentDirective {
+    /** The template to render. */
+    readonly template: TemplateRef<unknown>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxeTabContentDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NxeTabContentDirective, "ng-template[nxeTabContent]", never, {}, {}, never, never, true, never>;
+}
+
+/** What a step reads from its `stepControl`. A control is not a signal, so each event copies this. */
+interface NxeStepControlState {
+    readonly hasControl: boolean;
+    readonly valid: boolean;
+    readonly pristine: boolean;
+}
+/**
+ * One step of an {@link NxeStepperComponent}. It draws nothing itself: the stepper renders the header
+ * and the panel from the inputs and content declared here.
+ *
+ * ```html
+ * <nxe-step label="Account" [stepControl]="account">
+ *     <nxe-form-field label="Email"><nxe-text-box formControlName="email" /></nxe-form-field>
+ * </nxe-step>
+ * <nxe-step label="Documents" optional>
+ *     <ng-template nxeStepContent><app-documents /></ng-template>
+ * </nxe-step>
+ * ```
+ *
+ * **Completed and error.** Left alone a step is completed once the user has been through it and its
+ * `stepControl` is valid, and shows the error state once they have been through it and the control is
+ * invalid. `completed` and `hasError` replace that with your own answer (a server check, say).
+ */
+declare class NxeStepComponent {
+    /** The step's title in the header. */
+    readonly label: _angular_core.InputSignal<string>;
+    /** A line under the title. */
+    readonly description: _angular_core.InputSignal<string>;
+    /**
+     * The form (a `FormGroup`, `FormArray` or `FormControl`) that has to be valid before a linear
+     * stepper lets the user past this step.
+     */
+    readonly stepControl: _angular_core.InputSignal<AbstractControl<any, any, any> | null | undefined>;
+    /** Overrides the computed completed state. Unset, it is "visited and `stepControl` valid". */
+    readonly completed: _angular_core.InputSignalWithTransform<boolean | undefined, unknown>;
+    /** Overrides the computed error state. Unset, it is "visited and `stepControl` invalid". */
+    readonly hasError: _angular_core.InputSignalWithTransform<boolean | undefined, unknown>;
+    /** The step may be skipped: it does not hold a linear stepper back while its form is untouched. */
+    readonly optional: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** A completed step can be reopened. `false` locks it once the user has moved on. */
+    readonly editable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Overrides the stepper's `keepAlive` for this step. */
+    readonly keepAlive: _angular_core.InputSignalWithTransform<boolean | undefined, unknown>;
+    private readonly lazy;
+    private readonly implicit;
+    /** True when the content was declared in an `nxeStepContent` template. */
+    readonly isLazy: _angular_core.Signal<boolean>;
+    /** The template the stepper stamps into the panel. */
+    readonly contentTemplate: _angular_core.Signal<TemplateRef<unknown>>;
+    /** The control's validity, kept in step with it through its `events` stream. */
+    readonly controlState: _angular_core.Signal<NxeStepControlState>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxeStepComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxeStepComponent, "nxe-step", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "stepControl": { "alias": "stepControl"; "required": false; "isSignal": true; }; "completed": { "alias": "completed"; "required": false; "isSignal": true; }; "hasError": { "alias": "hasError"; "required": false; "isSignal": true; }; "optional": { "alias": "optional"; "required": false; "isSignal": true; }; "editable": { "alias": "editable"; "required": false; "isSignal": true; }; "keepAlive": { "alias": "keepAlive"; "required": false; "isSignal": true; }; }, {}, ["lazy"], ["*"], true, never>;
+}
+
+/** Direction the steps run in. A horizontal stepper turns vertical on a narrow host unless `responsive` is off. */
+type NxeStepperOrientation = 'horizontal' | 'vertical';
+/** What a step's marker shows: its number, a check once done, or an alert once it has errors. */
+type NxeStepMarker = 'number' | 'completed' | 'error';
+/** Emitted by `selectionChange` whenever the stepper moves through its API or the user. */
+interface NxeStepperSelectionChange {
+    readonly previousIndex: number;
+    readonly selectedIndex: number;
+}
+/** What the template reads for one step; computed once per change instead of by method calls. */
+interface StepView {
+    readonly step: NxeStepComponent;
+    readonly index: number;
+    readonly headerId: string;
+    readonly panelId: string;
+    readonly active: boolean;
+    readonly navigable: boolean;
+    readonly marker: NxeStepMarker;
+    readonly completed: boolean;
+    readonly error: boolean;
+    readonly rendered: boolean;
+}
+/**
+ * `nxe-stepper` is a wizard: an ordered list of `nxe-step`s, one open at a time, with a header that
+ * shows where the user is and what is done.
+ *
+ * ```html
+ * <nxe-stepper linear [(selectedIndex)]="index" #wizard>
+ *     <nxe-step label="Account" [stepControl]="account">...</nxe-step>
+ *     <nxe-step label="Company" [stepControl]="company">...</nxe-step>
+ *     <nxe-step label="Documents" optional>
+ *         <ng-template nxeStepContent><app-documents /></ng-template>
+ *     </nxe-step>
+ *     <nxe-step label="Review">
+ *         <nxe-button nxeStepperPrevious text="Back" />
+ *         <nxe-button (onClick)="submit()" text="Submit" type="default" />
+ *     </nxe-step>
+ * </nxe-stepper>
+ * ```
+ *
+ * **Linear and non-linear.** Non-linear (default) lets the user open any step. `linear` makes each step
+ * hold the user back until it is passable: its `stepControl` is valid (or `completed` says so). Pressing
+ * Next on a step that is not passable stays put, marks the step's controls as touched so `nxe-form-field`
+ * shows their errors, announces why, and emits `stepBlocked`. Headers of steps further on are not
+ * navigable until every step before them is complete. A programmatic `selectedIndex` is not checked.
+ *
+ * **API.** `selectedIndex` is a two-way model. `next()`, `previous()`, `select(i)` and `reset()` move it
+ * and return whether they did; `nxeStepperNext` and `nxeStepperPrevious` are directives that call
+ * `next()` and `previous()` from a button inside (or, given the stepper, outside) the steps.
+ *
+ * **Layout.** Horizontal puts the headers in a row over the open step; vertical stacks each header over its
+ * own panel. With `responsive` (default) a stepper narrower than `collapseBelow` px is vertical.
+ *
+ * **Accessibility.** The steps are an ordered list; the open step's header carries `aria-current="step"`.
+ * A header is a button while its step can be opened and plain text when it cannot. Arrow keys, Home and
+ * End move focus between headers. A polite live region announces each change of step ("Step 2 of 4:
+ * Company") and a blocked Next.
+ */
+declare class NxeStepperComponent {
+    /** Zero-based index of the open step. Two-way. */
+    readonly selectedIndex: _angular_core.ModelSignal<number>;
+    /** Each step must be passable before the next opens. */
+    readonly linear: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** `horizontal` (default) or `vertical`. */
+    readonly orientation: _angular_core.InputSignal<NxeStepperOrientation>;
+    /** A horizontal stepper turns vertical when its host is narrower than {@link collapseBelow}. */
+    readonly responsive: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Host width, in px, under which a responsive horizontal stepper turns vertical. */
+    readonly collapseBelow: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Keep a step's lazy content after leaving it. A step's own `keepAlive` overrides. */
+    readonly keepAlive: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Accessible name of the list of steps; the active language's "Steps" when unset. */
+    readonly stepsLabel: _angular_core.InputSignal<string | undefined>;
+    /** The stepper moved to another step. */
+    readonly selectionChange: _angular_core.OutputEmitterRef<NxeStepperSelectionChange>;
+    /** A linear Next was refused; the value is the index of the step that is not complete. */
+    readonly stepBlocked: _angular_core.OutputEmitterRef<number>;
+    protected readonly steps: _angular_core.Signal<readonly NxeStepComponent[]>;
+    private readonly messages;
+    private readonly host;
+    private readonly destroyRef;
+    private readonly list;
+    private readonly uid;
+    /** Whether the host is under {@link collapseBelow}; set from a ResizeObserver. */
+    private readonly narrow;
+    /** The orientation actually drawn. */
+    protected readonly layout: _angular_core.Signal<NxeStepperOrientation>;
+    /** Index of the open step, kept inside the steps; -1 with no steps. */
+    readonly activeIndex: _angular_core.Signal<number>;
+    private readonly activeStep;
+    /** Steps that have been open at some point, the open one included. Resets with the stepper. */
+    private readonly visited;
+    /** Steps the user tried to leave while they were not passable. */
+    private readonly attempted;
+    /** The live region's text. Writable so a blocked Next can announce without moving. */
+    protected readonly announcement: _angular_core.WritableSignal<string>;
+    private blockedToggle;
+    /** True on the first step. */
+    readonly isFirst: _angular_core.Signal<boolean>;
+    /** True on the last step. */
+    readonly isLast: _angular_core.Signal<boolean>;
+    /** Whether Next would move: there is a step after this one and, when linear, this one is passable. */
+    readonly canNext: _angular_core.Signal<boolean>;
+    protected readonly views: _angular_core.Signal<readonly StepView[]>;
+    constructor();
+    /** Moves to the next step. Linear and not passable: stays, shows the step's errors, returns false. */
+    next(): boolean;
+    /** Moves to the previous step, which a linear stepper allows freely. False on the first step. */
+    previous(): boolean;
+    /** Opens step `index` if it can be opened from here; returns whether it did. */
+    select(index: number): boolean;
+    /**
+     * Back to the first step with every step unvisited. `controls` (default `true`) also resets each
+     * step's `stepControl`, so the wizard starts over empty.
+     */
+    reset(options?: {
+        controls?: boolean;
+    }): void;
+    private go;
+    /** Surfaces why a linear stepper stayed: errors on the fields, a message for assistive tech. */
+    private block;
+    private stepOf;
+    private interacted;
+    /** Whether a linear stepper lets the user leave `step` forward. */
+    private passable;
+    private isCompleted;
+    private hasError;
+    /** The first step between here and `target` that holds a linear stepper back. */
+    private firstBlocking;
+    /** Whether the user can open step `index` from the open one. */
+    private canOpen;
+    protected headerLabel(view: StepView): string;
+    protected stateText(view: StepView): string;
+    protected optionalText(): string;
+    protected listLabel(): string;
+    protected open(view: StepView): void;
+    protected onKeydown(event: KeyboardEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxeStepperComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxeStepperComponent, "nxe-stepper", never, { "selectedIndex": { "alias": "selectedIndex"; "required": false; "isSignal": true; }; "linear": { "alias": "linear"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "responsive": { "alias": "responsive"; "required": false; "isSignal": true; }; "collapseBelow": { "alias": "collapseBelow"; "required": false; "isSignal": true; }; "keepAlive": { "alias": "keepAlive"; "required": false; "isSignal": true; }; "stepsLabel": { "alias": "stepsLabel"; "required": false; "isSignal": true; }; }, { "selectedIndex": "selectedIndexChange"; "selectionChange": "selectionChange"; "stepBlocked": "stepBlocked"; }, ["steps"], never, true, never>;
+}
+
+/**
+ * Marks the `<ng-template>` that holds a step's lazy content. The template is stamped out the first
+ * time the step is activated, not before, so a heavy step (a document upload, a review table) costs
+ * nothing until the user gets there:
+ *
+ * ```html
+ * <nxe-step label="Documents">
+ *     <ng-template nxeStepContent><app-kyb-documents /></ng-template>
+ * </nxe-step>
+ * ```
+ *
+ * Whether it is destroyed again when the step is left is `keepAlive` on the step or the stepper.
+ */
+declare class NxeStepContentDirective {
+    /** The template to render. */
+    readonly template: TemplateRef<unknown>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxeStepContentDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NxeStepContentDirective, "ng-template[nxeStepContent]", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * Makes a button move its `nxe-stepper` to the next step. Put it on any element inside a step
+ * (`nxe-button`, a native `button`); from outside the stepper, give it the stepper:
+ *
+ * ```html
+ * <nxe-button nxeStepperNext text="Continue" type="default" />
+ * <button type="button" [nxeStepperNext]="wizard">Continue</button>
+ * ```
+ *
+ * It calls `next()`, so a linear stepper that is not ready to leave the step stays on it, marks the
+ * step's controls as touched and announces why. It does not disable the button: a blocked click is how
+ * the user finds out what is missing.
+ */
+declare class NxeStepperNextDirective {
+    private readonly parent;
+    /** The stepper to drive when the element is not inside one. */
+    readonly target: _angular_core.InputSignal<"" | NxeStepperComponent | null | undefined>;
+    protected stepper(): NxeStepperComponent | null;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxeStepperNextDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NxeStepperNextDirective, "[nxeStepperNext]", never, { "target": { "alias": "nxeStepperNext"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Makes a button move its `nxe-stepper` back one step; the counterpart of `nxeStepperNext`. Going
+ * back is never validated, and on the first step it does nothing.
+ *
+ * ```html
+ * <nxe-button nxeStepperPrevious text="Back" stylingMode="outlined" />
+ * ```
+ */
+declare class NxeStepperPreviousDirective {
+    private readonly parent;
+    /** The stepper to drive when the element is not inside one. */
+    readonly target: _angular_core.InputSignal<"" | NxeStepperComponent | null | undefined>;
+    protected stepper(): NxeStepperComponent | null;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxeStepperPreviousDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NxeStepperPreviousDirective, "[nxeStepperPrevious]", never, { "target": { "alias": "nxeStepperPrevious"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** One crumb of an `nxe-breadcrumb`. */
+interface NxeBreadcrumbItem {
+    /** The text. */
+    label: string;
+    /** Router commands (`['/pos', id]`) or a URL string. A crumb with neither this nor `href` is plain text. */
+    route?: string | readonly unknown[];
+    /** Query params of the `route` link. */
+    queryParams?: Params;
+    /** A plain link, for a page outside the router. `route` wins when both are set. */
+    href?: string;
+}
+/**
+ * What a route's `data.breadcrumb` may be: the crumb's text, or a function of the route's resolved
+ * `data` that returns it (so a crumb can read a resolved document: `(data) => data['po'].number`).
+ * An empty result leaves the route out of the trail.
+ */
+type NxeBreadcrumbData = string | ((data: Data) => string);
+
+/**
+ * Marks the `<ng-template>` an `nxe-breadcrumb` draws between crumbs, for a separator that is markup
+ * (an icon) rather than the text of the `separator` input:
+ *
+ * ```html
+ * <nxe-breadcrumb [items]="items">
+ *     <ng-template nxeBreadcrumbSeparator><svg viewBox="0 0 16 16">...</svg></ng-template>
+ * </nxe-breadcrumb>
+ * ```
+ *
+ * The separator is decoration (`aria-hidden`): the `<ol>` already says these are steps in a list.
+ */
+declare class NxeBreadcrumbSeparatorDirective {
+    /** The template to draw. */
+    readonly template: TemplateRef<unknown>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxeBreadcrumbSeparatorDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NxeBreadcrumbSeparatorDirective, "ng-template[nxeBreadcrumbSeparator]", never, {}, {}, never, never, true, never>;
+}
+
+/** What the template draws, in order: a crumb, or the overflow button standing for the folded ones. */
+interface Slot {
+    /** The crumb, or `null` for the overflow button. */
+    readonly crumb: NxeBreadcrumbItem | null;
+    readonly last: boolean;
+}
+/**
+ * `nxe-breadcrumb` shows where a page sits in the application, one link per level, for document pages
+ * that are a few levels deep.
+ *
+ * ```html
+ * <!-- from data -->
+ * <nxe-breadcrumb [items]="[
+ *     { label: 'Pesanan', route: '/pos' },
+ *     { label: 'PO-2026-0412', route: ['/pos', 412] },
+ *     { label: 'Baris' }
+ * ]" />
+ *
+ * <!-- from the router: each route's data.breadcrumb, root to leaf -->
+ * <nxe-breadcrumb fromRoute />
+ * ```
+ *
+ * ```ts
+ * { path: 'pos', data: { breadcrumb: 'Pesanan' }, children: [
+ *     { path: ':id', resolve: { po: poResolver }, data: { breadcrumb: (d: Data) => d['po'].number } },
+ * ] }
+ * ```
+ *
+ * **Sources.** `items` are the crumbs you list. With `fromRoute`, the crumbs of the active route follow
+ * them (so `items` can hold a fixed "Beranda"): the router state is walked from the root, every route that
+ * declares a `breadcrumb` (in `data` or `resolve`) adds one, linked to that route's own URL, and the trail
+ * is read again after every `NavigationEnd`. A `data.breadcrumb` is a string or `(data) => string`; an empty
+ * result drops the route.
+ *
+ * **Semantics.** A `<nav aria-label="Breadcrumb">` around an `<ol>`. The last crumb is the current page: plain
+ * text with `aria-current="page"`, never a link. A crumb with no `route` or `href` is text too. Separators
+ * are `aria-hidden`.
+ *
+ * **Long trails.** More crumbs than `maxItems` (default 5) keep the first and the last `maxItems - 1` and fold
+ * the middle into a "..." button that opens an `nxe-menu` of them. `maxItems` of 0 never folds.
+ *
+ * **Separator.** The `separator` input (a character, default `/`), or an `<ng-template nxeBreadcrumbSeparator>`
+ * for an icon.
+ */
+declare class NxeBreadcrumbComponent {
+    private readonly router;
+    private readonly messages;
+    /** The crumbs to show. */
+    readonly items: _angular_core.InputSignal<readonly NxeBreadcrumbItem[] | null | undefined>;
+    /** Add the crumbs of the active route's `data.breadcrumb`, after `items`. */
+    readonly fromRoute: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Crumbs shown before the middle ones fold into a menu; 0 never folds. At least 2 otherwise. Default 5. */
+    readonly maxItems: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Text between crumbs. Default `/`. */
+    readonly separator: _angular_core.InputSignal<string>;
+    /** Accessible name of the `nav`. Default "Breadcrumb" (`breadcrumb.label`). */
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    protected readonly separatorTemplate: _angular_core.Signal<NxeBreadcrumbSeparatorDirective | undefined>;
+    /** Bumped after each navigation so the route trail is read again. */
+    private readonly navigations;
+    protected readonly navLabel: _angular_core.Signal<string>;
+    protected readonly moreLabel: _angular_core.Signal<string>;
+    /** Every crumb, in order: `items`, then the route's. */
+    readonly crumbs: _angular_core.Signal<readonly NxeBreadcrumbItem[]>;
+    /** The crumbs folded into the menu: the middle ones past `maxItems`. */
+    protected readonly folded: _angular_core.Signal<readonly NxeBreadcrumbItem[]>;
+    protected readonly slots: _angular_core.Signal<readonly Slot[]>;
+    constructor();
+    /** `[from, to)` of the crumbs that fold; empty when everything fits. */
+    private foldRange;
+    /** One crumb per route, root to leaf, that declares a breadcrumb of its own. */
+    private routeCrumbs;
+    /** The commands of a crumb's `routerLink`. */
+    protected commands(crumb: NxeBreadcrumbItem): string | readonly unknown[];
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxeBreadcrumbComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxeBreadcrumbComponent, "nxe-breadcrumb", ["nxeBreadcrumb"], { "items": { "alias": "items"; "required": false; "isSignal": true; }; "fromRoute": { "alias": "fromRoute"; "required": false; "isSignal": true; }; "maxItems": { "alias": "maxItems"; "required": false; "isSignal": true; }; "separator": { "alias": "separator"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; }, {}, ["separatorTemplate"], never, true, never>;
+}
+
+export { NxeBreadcrumbComponent, NxeBreadcrumbSeparatorDirective, NxeStepComponent, NxeStepContentDirective, NxeStepperComponent, NxeStepperNextDirective, NxeStepperPreviousDirective, NxeTabComponent, NxeTabContentDirective, NxeTabsComponent };
+export type { NxeBreadcrumbData, NxeBreadcrumbItem, NxeStepControlState, NxeStepMarker, NxeStepperOrientation, NxeStepperSelectionChange, NxeTabQueryParamsHandling, NxeTabsActivation };