@nexterajs/ui 0.0.2 → 0.1.0

package/fesm2022/nexterajs-ui-navigation.mjs

@@ -0,0 +1,1054 @@
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, TemplateRef, Directive, input, numberAttribute, booleanAttribute, contentChild, viewChild, computed, ChangeDetectionStrategy, Component, model, contentChildren, linkedSignal, signal, DestroyRef, output, ElementRef, afterNextRender, ViewEncapsulation } from '@angular/core';
+import { toSignal, takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
+import { Router, ActivatedRoute, NavigationEnd, RouterLink } from '@angular/router';
+import { NxeBadgeComponent } from '@nexterajs/ui/display';
+import { filter, map, switchMap, startWith, of } from 'rxjs';
+import { nxeOptionalBoolean, NxeMessageService } from '@nexterajs/ui/core';
+import { NxeMenuComponent, NxeMenuItemComponent, NxeMenuTriggerForDirective } from '@nexterajs/ui/overlay';
+
+/**
+ * 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.
+ */
+class NxeTabContentDirective {
+    /** The template to render. */
+    template = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeTabContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.5", type: NxeTabContentDirective, isStandalone: true, selector: "ng-template[nxeTabContent]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeTabContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[nxeTabContent]',
+                }]
+        }] });
+
+/**
+ * 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).
+ */
+class NxeTabComponent {
+    /** The tab's text. */
+    label = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** A stable id for `selectedKey` and for telling tabs apart across reorders. */
+    key = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
+    /** A count shown after the label in an `nxe-badge`; `null` or `undefined` shows none, 0 shows 0. */
+    badge = input(undefined, { ...(ngDevMode ? { debugName: "badge" } : /* istanbul ignore next */ {}), transform: (v) => (v === null || v === undefined || v === '' ? undefined : numberAttribute(v, NaN)) });
+    /** Status family of the badge. `neutral` by default: a count in a tab is information, not an alarm. */
+    badgeFamily = input('neutral', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "badgeFamily" }] : /* istanbul ignore next */ []));
+    /** Not selectable and skipped by the arrow keys. */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Overrides the tabs' `keepAlive` for this tab: keep the content after leaving it, or destroy it. */
+    keepAlive = input(undefined, { ...(ngDevMode ? { debugName: "keepAlive" } : /* istanbul ignore next */ {}), transform: (v) => (v === undefined || v === null || v === '' ? undefined : booleanAttribute(v)) });
+    /**
+     * 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`.
+     */
+    link = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "link" }] : /* istanbul ignore next */ []));
+    /** Query params of the link, e.g. `{ status: 'pending' }`. */
+    queryParams = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "queryParams" }] : /* istanbul ignore next */ []));
+    /** `merge` keeps the other query params in the URL (a search term, a page) when switching tab. */
+    queryParamsHandling = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "queryParamsHandling" }] : /* istanbul ignore next */ []));
+    lazy = contentChild(NxeTabContentDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "lazy" }] : /* istanbul ignore next */ []));
+    implicit = viewChild.required('implicit', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "implicit" }] : /* istanbul ignore next */ []));
+    /** True when the content was declared in an `nxeTabContent` template. */
+    isLazy = computed(() => this.lazy() !== undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isLazy" }] : /* istanbul ignore next */ []));
+    /** The template the parent stamps into the panel. */
+    contentTemplate = computed(() => this.lazy()?.template ?? this.implicit(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "contentTemplate" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.5", type: NxeTabComponent, isStandalone: true, selector: "nxe-tab", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, badgeFamily: { classPropertyName: "badgeFamily", publicName: "badgeFamily", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, keepAlive: { classPropertyName: "keepAlive", publicName: "keepAlive", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, queryParams: { classPropertyName: "queryParams", publicName: "queryParams", isSignal: true, isRequired: false, transformFunction: null }, queryParamsHandling: { classPropertyName: "queryParamsHandling", publicName: "queryParamsHandling", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "nxe-tab" }, queries: [{ propertyName: "lazy", first: true, predicate: NxeTabContentDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "implicit", first: true, predicate: ["implicit"], descendants: true, isSignal: true }], ngImport: i0, template: '<ng-template #implicit><ng-content /></ng-template>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeTabComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'nxe-tab',
+                    template: '<ng-template #implicit><ng-content /></ng-template>',
+                    host: { class: 'nxe-tab' },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], badgeFamily: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeFamily", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], keepAlive: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepAlive", required: false }] }], link: [{ type: i0.Input, args: [{ isSignal: true, alias: "link", required: false }] }], queryParams: [{ type: i0.Input, args: [{ isSignal: true, alias: "queryParams", required: false }] }], queryParamsHandling: [{ type: i0.Input, args: [{ isSignal: true, alias: "queryParamsHandling", required: false }] }], lazy: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NxeTabContentDirective), { isSignal: true }] }], implicit: [{ type: i0.ViewChild, args: ['implicit', { isSignal: true }] }] } });
+
+let nextTabsId = 0;
+/** Whether a declared query param equals what the URL carries (arrays compare element-wise). */
+function sameParam(want, have) {
+    if (have === undefined) {
+        return false;
+    }
+    const norm = (v) => (Array.isArray(v) ? v.map(String).join(',') : String(v));
+    return norm(want) === norm(have);
+}
+/**
+ * `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.
+ */
+class NxeTabsComponent {
+    /** Zero-based index of the selected tab. Two-way. */
+    selectedIndex = model(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedIndex" }] : /* istanbul ignore next */ []));
+    /** `key` of the selected tab. Two-way; wins over `selectedIndex` when it matches a tab. */
+    selectedKey = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedKey" }] : /* istanbul ignore next */ []));
+    /** `automatic` (default) selects on arrow; `manual` needs Enter or Space. */
+    activation = input('automatic', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activation" }] : /* istanbul ignore next */ []));
+    /** Keep a tab's content alive after leaving it. A tab's own `keepAlive` overrides. */
+    keepAlive = input(true, { ...(ngDevMode ? { debugName: "keepAlive" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Accessible name of the tab list. */
+    tablistLabel = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tablistLabel" }] : /* istanbul ignore next */ []));
+    tabs = contentChildren(NxeTabComponent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
+    router = inject(Router);
+    route = inject(ActivatedRoute);
+    list = viewChild.required('list', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "list" }] : /* istanbul ignore next */ []));
+    uid = `nxe-tabs-${nextTabsId++}`;
+    /** The URL after each navigation; what router-mode tabs are matched against. */
+    url = toSignal(this.router.events.pipe(filter((event) => event instanceof NavigationEnd), map(() => this.router.url)), { initialValue: this.router.url });
+    /** Index of the link tab that matches the URL, or -1. */
+    linkIndex = computed(() => {
+        const urlParams = this.router.parseUrl(this.url()).queryParams;
+        // The query keys the group discriminates on: any key a link tab declares.
+        const groupKeys = new Set();
+        for (const tab of this.tabs()) {
+            if (tab.link() !== null && tab.link() !== undefined) {
+                Object.keys(tab.queryParams() ?? {}).forEach((key) => groupKeys.add(key));
+            }
+        }
+        let best = -1;
+        let bestScore = -1;
+        this.tabs().forEach((tab, index) => {
+            const link = tab.link();
+            if (link === null || link === undefined || tab.disabled()) {
+                return;
+            }
+            const declared = tab.queryParams() ?? {};
+            // Path only: the tab's own declared params (not merged ones) are compared below.
+            const tree = this.router.createUrlTree(typeof link === 'string' ? [link] : [...link], {
+                relativeTo: this.route,
+            });
+            const pathActive = this.router.isActive(tree, {
+                paths: 'subset',
+                queryParams: 'ignored',
+                fragment: 'ignored',
+                matrixParams: 'ignored',
+            });
+            if (!pathActive) {
+                return;
+            }
+            // A group key the tab declares must equal the URL's; one it leaves out must be absent.
+            for (const key of groupKeys) {
+                const want = declared[key];
+                const have = urlParams[key];
+                if (want === null || want === undefined) {
+                    if (have !== undefined) {
+                        return;
+                    }
+                }
+                else if (!sameParam(want, have)) {
+                    return;
+                }
+            }
+            const score = Object.keys(declared).length;
+            if (score > bestScore) {
+                best = index;
+                bestScore = score;
+            }
+        });
+        return best;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "linkIndex" }] : /* istanbul ignore next */ []));
+    /** Index of the active tab, or -1 when every tab is disabled. */
+    activeIndex = computed(() => {
+        const tabs = this.tabs();
+        const fromUrl = this.linkIndex();
+        if (fromUrl >= 0) {
+            return fromUrl;
+        }
+        const key = this.selectedKey();
+        if (key !== null) {
+            const byKey = tabs.findIndex((tab) => tab.key() === key);
+            if (byKey >= 0 && !tabs[byKey].disabled()) {
+                return byKey;
+            }
+        }
+        const index = this.selectedIndex();
+        if (index >= 0 && index < tabs.length && !tabs[index].disabled()) {
+            return index;
+        }
+        return tabs.findIndex((tab) => !tab.disabled());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+    activeTab = computed(() => this.tabs()[this.activeIndex()], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeTab" }] : /* istanbul ignore next */ []));
+    /** Every tab that has been active, for lazy content that stays alive. */
+    visited = linkedSignal({ ...(ngDevMode ? { debugName: "visited" } : /* istanbul ignore next */ {}), source: this.activeTab,
+        computation: (tab, previous) => {
+            const set = new Set(previous?.value);
+            if (tab) {
+                set.add(tab);
+            }
+            return set;
+        } });
+    /** The tab with focus inside the list, while it has any. */
+    focusedIndex = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focusedIndex" }] : /* istanbul ignore next */ []));
+    /** The one tab in the tab order: the focused one, else the active one. */
+    tabbableIndex = computed(() => this.focusedIndex() ?? Math.max(this.activeIndex(), 0), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tabbableIndex" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Keep the models in step when the URL moves the tab (back button, a link elsewhere).
+        this.router.events
+            .pipe(filter((event) => event instanceof NavigationEnd), takeUntilDestroyed(inject(DestroyRef)))
+            .subscribe(() => {
+            const index = this.linkIndex();
+            if (index >= 0) {
+                this.commit(index);
+            }
+        });
+    }
+    tabId(index) {
+        return `${this.uid}-tab-${index}`;
+    }
+    panelId(index) {
+        return `${this.uid}-panel-${index}`;
+    }
+    isLink(tab) {
+        return tab.link() !== null && tab.link() !== undefined;
+    }
+    /** True when a tab has a panel to point `aria-controls` at. */
+    hasPanel(tab) {
+        return !this.isLink(tab) || tab.isLazy();
+    }
+    /** Whether the panel's content exists right now. */
+    isRendered(tab, index) {
+        if (index === this.activeIndex()) {
+            return true;
+        }
+        return (tab.keepAlive() ?? this.keepAlive()) && this.visited().has(tab);
+    }
+    select(index) {
+        const tab = this.tabs()[index];
+        if (!tab || tab.disabled() || this.isLink(tab)) {
+            // A link tab is selected by the navigation its anchor triggers, not by us.
+            return;
+        }
+        this.commit(index);
+    }
+    commit(index) {
+        const tab = this.tabs()[index];
+        if (!tab) {
+            return;
+        }
+        this.focusedIndex.set(undefined);
+        if (this.selectedIndex() !== index) {
+            this.selectedIndex.set(index);
+        }
+        const key = tab.key();
+        if (this.selectedKey() !== key) {
+            this.selectedKey.set(key);
+        }
+    }
+    onFocusOut(event) {
+        const next = event.relatedTarget;
+        if (!next || !this.list().nativeElement.contains(next)) {
+            this.focusedIndex.set(undefined);
+        }
+    }
+    onKeydown(event) {
+        const current = this.triggers().indexOf(event.target);
+        if (current < 0) {
+            // Keys typed in a panel are the panel's.
+            return;
+        }
+        const enabled = this.tabs()
+            .map((tab, index) => (tab.disabled() ? -1 : index))
+            .filter((index) => index >= 0);
+        if (enabled.length === 0) {
+            return;
+        }
+        const position = Math.max(enabled.indexOf(current), 0);
+        const rtl = getComputedStyle(this.list().nativeElement).direction === 'rtl';
+        const step = (by) => enabled[(position + by + enabled.length) % enabled.length];
+        let target;
+        switch (event.key) {
+            case 'ArrowRight':
+                target = step(rtl ? -1 : 1);
+                break;
+            case 'ArrowLeft':
+                target = step(rtl ? 1 : -1);
+                break;
+            case 'Home':
+                target = enabled[0];
+                break;
+            case 'End':
+                target = enabled[enabled.length - 1];
+                break;
+            default:
+                // Enter and Space select through the button's own click.
+                return;
+        }
+        event.preventDefault();
+        this.focusTab(target);
+        if (this.activation() === 'automatic') {
+            this.select(target);
+        }
+    }
+    triggers() {
+        return Array.from(this.list().nativeElement.querySelectorAll('[role="tab"]'));
+    }
+    focusTab(index) {
+        this.focusedIndex.set(index);
+        // Focusing scrolls an overflowed tab into view.
+        this.triggers()[index]?.focus();
+    }
+    /** Moves focus to the tab that is in the tab order (the active one). */
+    focus() {
+        this.triggers()[this.tabbableIndex()]?.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxeTabsComponent, isStandalone: true, selector: "nxe-tabs", inputs: { selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null }, selectedKey: { classPropertyName: "selectedKey", publicName: "selectedKey", isSignal: true, isRequired: false, transformFunction: null }, activation: { classPropertyName: "activation", publicName: "activation", isSignal: true, isRequired: false, transformFunction: null }, keepAlive: { classPropertyName: "keepAlive", publicName: "keepAlive", isSignal: true, isRequired: false, transformFunction: null }, tablistLabel: { classPropertyName: "tablistLabel", publicName: "tablistLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIndex: "selectedIndexChange", selectedKey: "selectedKeyChange" }, host: { listeners: { "keydown": "onKeydown($event)", "focusout": "onFocusOut($event)" }, classAttribute: "nxe-tabs" }, queries: [{ propertyName: "tabs", predicate: NxeTabComponent, isSignal: true }], viewQueries: [{ propertyName: "list", first: true, predicate: ["list"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"nxe-tabs-scroller\">\r\n    <div\r\n        #list\r\n        class=\"nxe-tabs-list\"\r\n        role=\"tablist\"\r\n        aria-orientation=\"horizontal\"\r\n        [attr.aria-label]=\"tablistLabel() || null\">\r\n        @for (tab of tabs(); track tab; let i = $index) {\r\n            <ng-template #content>\r\n                <span class=\"nxe-tab-label\">{{ tab.label() }}</span>\r\n                @if (tab.badge() !== undefined) {\r\n                    <nxe-badge [value]=\"tab.badge()\" [family]=\"tab.badgeFamily()\" showZero />\r\n                }\r\n            </ng-template>\r\n            @if (isLink(tab)) {\r\n                <a\r\n                    class=\"nxe-tab-trigger\"\r\n                    role=\"tab\"\r\n                    [id]=\"tabId(i)\"\r\n                    [routerLink]=\"tab.disabled() ? null : tab.link()\"\r\n                    [queryParams]=\"tab.queryParams()\"\r\n                    [queryParamsHandling]=\"tab.queryParamsHandling()\"\r\n                    [class.nxe-tab-active]=\"i === activeIndex()\"\r\n                    [attr.aria-selected]=\"i === activeIndex()\"\r\n                    [attr.aria-controls]=\"hasPanel(tab) ? panelId(i) : null\"\r\n                    [attr.aria-disabled]=\"tab.disabled() || null\"\r\n                    [attr.tabindex]=\"tab.disabled() ? null : i === tabbableIndex() ? 0 : -1\"\r\n                    (focus)=\"focusedIndex.set(i)\">\r\n                    <ng-container [ngTemplateOutlet]=\"content\" />\r\n                </a>\r\n            } @else {\r\n                <button\r\n                    type=\"button\"\r\n                    class=\"nxe-tab-trigger\"\r\n                    role=\"tab\"\r\n                    [id]=\"tabId(i)\"\r\n                    [disabled]=\"tab.disabled()\"\r\n                    [class.nxe-tab-active]=\"i === activeIndex()\"\r\n                    [attr.aria-selected]=\"i === activeIndex()\"\r\n                    [attr.aria-controls]=\"panelId(i)\"\r\n                    [attr.aria-disabled]=\"tab.disabled() || null\"\r\n                    [attr.tabindex]=\"i === tabbableIndex() ? 0 : -1\"\r\n                    (focus)=\"focusedIndex.set(i)\"\r\n                    (click)=\"select(i)\">\r\n                    <ng-container [ngTemplateOutlet]=\"content\" />\r\n                </button>\r\n            }\r\n        }\r\n    </div>\r\n</div>\r\n@for (tab of tabs(); track tab; let i = $index) {\r\n    @if (hasPanel(tab)) {\r\n        <div\r\n            class=\"nxe-tab-panel\"\r\n            role=\"tabpanel\"\r\n            tabindex=\"0\"\r\n            [id]=\"panelId(i)\"\r\n            [attr.aria-labelledby]=\"tabId(i)\"\r\n            [hidden]=\"i !== activeIndex()\">\r\n            @if (isRendered(tab, i)) {\r\n                <ng-container [ngTemplateOutlet]=\"tab.contentTemplate()\" />\r\n            }\r\n        </div>\r\n    }\r\n}\r\n", styles: [":host{display:block;color:var(--nxe-ui-text);font-family:var(--nxe-ui-font-family)}:host .nxe-tabs-scroller{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;border-bottom:1px solid var(--nxe-ui-border)}:host .nxe-tabs-list{display:flex;gap:var(--nxe-ui-space-1);min-width:max-content}:host .nxe-tab-trigger{display:inline-flex;align-items:center;gap:var(--nxe-ui-space-2);box-sizing:border-box;min-height:var(--nxe-ui-control-min-height);margin:0 0 -1px;padding:0 var(--nxe-ui-space-3);border:0;border-bottom:2px solid transparent;background:transparent;color:var(--nxe-ui-neutral-600);font:inherit;font-weight:var(--nxe-ui-font-weight-semibold);text-decoration:none;white-space:nowrap;cursor:pointer}:host .nxe-tab-trigger:hover:not([aria-disabled=true]){color:var(--nxe-ui-text);background-color:var(--nxe-ui-surface-alt)}:host .nxe-tab-trigger:focus-visible{outline:2px solid var(--nxe-ui-focus-ring-color);outline-offset:-2px}:host .nxe-tab-trigger.nxe-tab-active{color:var(--nxe-ui-accent);border-bottom-color:var(--nxe-ui-accent)}:host .nxe-tab-trigger[aria-disabled=true]{opacity:.5;cursor:not-allowed}:host .nxe-tab-panel{padding-top:var(--nxe-ui-space-4)}:host .nxe-tab-panel[hidden]{display:none}:host .nxe-tab-panel:focus-visible{outline:2px solid var(--nxe-ui-focus-ring-color);outline-offset:2px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "component", type: NxeBadgeComponent, selector: "nxe-badge", inputs: ["value", "max", "dot", "showZero", "family", "overlay", "label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeTabsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nxe-tabs', imports: [NgTemplateOutlet, RouterLink, NxeBadgeComponent], host: {
+                        class: 'nxe-tabs',
+                        '(keydown)': 'onKeydown($event)',
+                        '(focusout)': 'onFocusOut($event)',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"nxe-tabs-scroller\">\r\n    <div\r\n        #list\r\n        class=\"nxe-tabs-list\"\r\n        role=\"tablist\"\r\n        aria-orientation=\"horizontal\"\r\n        [attr.aria-label]=\"tablistLabel() || null\">\r\n        @for (tab of tabs(); track tab; let i = $index) {\r\n            <ng-template #content>\r\n                <span class=\"nxe-tab-label\">{{ tab.label() }}</span>\r\n                @if (tab.badge() !== undefined) {\r\n                    <nxe-badge [value]=\"tab.badge()\" [family]=\"tab.badgeFamily()\" showZero />\r\n                }\r\n            </ng-template>\r\n            @if (isLink(tab)) {\r\n                <a\r\n                    class=\"nxe-tab-trigger\"\r\n                    role=\"tab\"\r\n                    [id]=\"tabId(i)\"\r\n                    [routerLink]=\"tab.disabled() ? null : tab.link()\"\r\n                    [queryParams]=\"tab.queryParams()\"\r\n                    [queryParamsHandling]=\"tab.queryParamsHandling()\"\r\n                    [class.nxe-tab-active]=\"i === activeIndex()\"\r\n                    [attr.aria-selected]=\"i === activeIndex()\"\r\n                    [attr.aria-controls]=\"hasPanel(tab) ? panelId(i) : null\"\r\n                    [attr.aria-disabled]=\"tab.disabled() || null\"\r\n                    [attr.tabindex]=\"tab.disabled() ? null : i === tabbableIndex() ? 0 : -1\"\r\n                    (focus)=\"focusedIndex.set(i)\">\r\n                    <ng-container [ngTemplateOutlet]=\"content\" />\r\n                </a>\r\n            } @else {\r\n                <button\r\n                    type=\"button\"\r\n                    class=\"nxe-tab-trigger\"\r\n                    role=\"tab\"\r\n                    [id]=\"tabId(i)\"\r\n                    [disabled]=\"tab.disabled()\"\r\n                    [class.nxe-tab-active]=\"i === activeIndex()\"\r\n                    [attr.aria-selected]=\"i === activeIndex()\"\r\n                    [attr.aria-controls]=\"panelId(i)\"\r\n                    [attr.aria-disabled]=\"tab.disabled() || null\"\r\n                    [attr.tabindex]=\"i === tabbableIndex() ? 0 : -1\"\r\n                    (focus)=\"focusedIndex.set(i)\"\r\n                    (click)=\"select(i)\">\r\n                    <ng-container [ngTemplateOutlet]=\"content\" />\r\n                </button>\r\n            }\r\n        }\r\n    </div>\r\n</div>\r\n@for (tab of tabs(); track tab; let i = $index) {\r\n    @if (hasPanel(tab)) {\r\n        <div\r\n            class=\"nxe-tab-panel\"\r\n            role=\"tabpanel\"\r\n            tabindex=\"0\"\r\n            [id]=\"panelId(i)\"\r\n            [attr.aria-labelledby]=\"tabId(i)\"\r\n            [hidden]=\"i !== activeIndex()\">\r\n            @if (isRendered(tab, i)) {\r\n                <ng-container [ngTemplateOutlet]=\"tab.contentTemplate()\" />\r\n            }\r\n        </div>\r\n    }\r\n}\r\n", styles: [":host{display:block;color:var(--nxe-ui-text);font-family:var(--nxe-ui-font-family)}:host .nxe-tabs-scroller{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;border-bottom:1px solid var(--nxe-ui-border)}:host .nxe-tabs-list{display:flex;gap:var(--nxe-ui-space-1);min-width:max-content}:host .nxe-tab-trigger{display:inline-flex;align-items:center;gap:var(--nxe-ui-space-2);box-sizing:border-box;min-height:var(--nxe-ui-control-min-height);margin:0 0 -1px;padding:0 var(--nxe-ui-space-3);border:0;border-bottom:2px solid transparent;background:transparent;color:var(--nxe-ui-neutral-600);font:inherit;font-weight:var(--nxe-ui-font-weight-semibold);text-decoration:none;white-space:nowrap;cursor:pointer}:host .nxe-tab-trigger:hover:not([aria-disabled=true]){color:var(--nxe-ui-text);background-color:var(--nxe-ui-surface-alt)}:host .nxe-tab-trigger:focus-visible{outline:2px solid var(--nxe-ui-focus-ring-color);outline-offset:-2px}:host .nxe-tab-trigger.nxe-tab-active{color:var(--nxe-ui-accent);border-bottom-color:var(--nxe-ui-accent)}:host .nxe-tab-trigger[aria-disabled=true]{opacity:.5;cursor:not-allowed}:host .nxe-tab-panel{padding-top:var(--nxe-ui-space-4)}:host .nxe-tab-panel[hidden]{display:none}:host .nxe-tab-panel:focus-visible{outline:2px solid var(--nxe-ui-focus-ring-color);outline-offset:2px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { selectedIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIndex", required: false }] }, { type: i0.Output, args: ["selectedIndexChange"] }], selectedKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedKey", required: false }] }, { type: i0.Output, args: ["selectedKeyChange"] }], activation: [{ type: i0.Input, args: [{ isSignal: true, alias: "activation", required: false }] }], keepAlive: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepAlive", required: false }] }], tablistLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "tablistLabel", required: false }] }], tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => NxeTabComponent), { isSignal: true }] }], list: [{ type: i0.ViewChild, args: ['list', { isSignal: true }] }] } });
+
+/**
+ * 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.
+ */
+class NxeStepContentDirective {
+    /** The template to render. */
+    template = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeStepContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.5", type: NxeStepContentDirective, isStandalone: true, selector: "ng-template[nxeStepContent]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeStepContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[nxeStepContent]',
+                }]
+        }] });
+
+const NO_CONTROL = { hasControl: false, valid: true, pristine: true };
+function snapshot(control) {
+    return { hasControl: true, valid: control.valid, pristine: control.pristine };
+}
+/**
+ * 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).
+ */
+class NxeStepComponent {
+    /** The step's title in the header. */
+    label = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** A line under the title. */
+    description = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+    /**
+     * The form (a `FormGroup`, `FormArray` or `FormControl`) that has to be valid before a linear
+     * stepper lets the user past this step.
+     */
+    stepControl = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stepControl" }] : /* istanbul ignore next */ []));
+    /** Overrides the computed completed state. Unset, it is "visited and `stepControl` valid". */
+    completed = input(undefined, { ...(ngDevMode ? { debugName: "completed" } : /* istanbul ignore next */ {}), transform: nxeOptionalBoolean });
+    /** Overrides the computed error state. Unset, it is "visited and `stepControl` invalid". */
+    hasError = input(undefined, { ...(ngDevMode ? { debugName: "hasError" } : /* istanbul ignore next */ {}), transform: nxeOptionalBoolean });
+    /** The step may be skipped: it does not hold a linear stepper back while its form is untouched. */
+    optional = input(false, { ...(ngDevMode ? { debugName: "optional" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** A completed step can be reopened. `false` locks it once the user has moved on. */
+    editable = input(true, { ...(ngDevMode ? { debugName: "editable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Overrides the stepper's `keepAlive` for this step. */
+    keepAlive = input(undefined, { ...(ngDevMode ? { debugName: "keepAlive" } : /* istanbul ignore next */ {}), transform: nxeOptionalBoolean });
+    lazy = contentChild(NxeStepContentDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "lazy" }] : /* istanbul ignore next */ []));
+    implicit = viewChild.required('implicit', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "implicit" }] : /* istanbul ignore next */ []));
+    /** True when the content was declared in an `nxeStepContent` template. */
+    isLazy = computed(() => this.lazy() !== undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isLazy" }] : /* istanbul ignore next */ []));
+    /** The template the stepper stamps into the panel. */
+    contentTemplate = computed(() => this.lazy()?.template ?? this.implicit(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "contentTemplate" }] : /* istanbul ignore next */ []));
+    /** The control's validity, kept in step with it through its `events` stream. */
+    controlState = toSignal(toObservable(this.stepControl).pipe(switchMap((control) => control ? control.events.pipe(startWith(null), map(() => snapshot(control))) : of(NO_CONTROL))), { initialValue: NO_CONTROL });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.5", type: NxeStepComponent, isStandalone: true, selector: "nxe-step", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, stepControl: { classPropertyName: "stepControl", publicName: "stepControl", isSignal: true, isRequired: false, transformFunction: null }, completed: { classPropertyName: "completed", publicName: "completed", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, keepAlive: { classPropertyName: "keepAlive", publicName: "keepAlive", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "nxe-step" }, queries: [{ propertyName: "lazy", first: true, predicate: NxeStepContentDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "implicit", first: true, predicate: ["implicit"], descendants: true, isSignal: true }], ngImport: i0, template: '<ng-template #implicit><ng-content /></ng-template>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeStepComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'nxe-step',
+                    template: '<ng-template #implicit><ng-content /></ng-template>',
+                    host: { class: 'nxe-step' },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], stepControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepControl", required: false }] }], completed: [{ type: i0.Input, args: [{ isSignal: true, alias: "completed", required: false }] }], hasError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasError", required: false }] }], optional: [{ type: i0.Input, args: [{ isSignal: true, alias: "optional", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], keepAlive: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepAlive", required: false }] }], lazy: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NxeStepContentDirective), { isSignal: true }] }], implicit: [{ type: i0.ViewChild, args: ['implicit', { isSignal: true }] }] } });
+
+let nextStepperId = 0;
+/**
+ * `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.
+ */
+class NxeStepperComponent {
+    /** Zero-based index of the open step. Two-way. */
+    selectedIndex = model(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedIndex" }] : /* istanbul ignore next */ []));
+    /** Each step must be passable before the next opens. */
+    linear = input(false, { ...(ngDevMode ? { debugName: "linear" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** `horizontal` (default) or `vertical`. */
+    orientation = input('horizontal', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    /** A horizontal stepper turns vertical when its host is narrower than {@link collapseBelow}. */
+    responsive = input(true, { ...(ngDevMode ? { debugName: "responsive" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Host width, in px, under which a responsive horizontal stepper turns vertical. */
+    collapseBelow = input(560, { ...(ngDevMode ? { debugName: "collapseBelow" } : /* istanbul ignore next */ {}), transform: (value) => numberAttribute(value, 560) });
+    /** Keep a step's lazy content after leaving it. A step's own `keepAlive` overrides. */
+    keepAlive = input(true, { ...(ngDevMode ? { debugName: "keepAlive" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Accessible name of the list of steps; the active language's "Steps" when unset. */
+    stepsLabel = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stepsLabel" }] : /* istanbul ignore next */ []));
+    /** The stepper moved to another step. */
+    selectionChange = output();
+    /** A linear Next was refused; the value is the index of the step that is not complete. */
+    stepBlocked = output();
+    steps = contentChildren(NxeStepComponent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "steps" }] : /* istanbul ignore next */ []));
+    messages = inject(NxeMessageService);
+    host = inject(ElementRef);
+    destroyRef = inject(DestroyRef);
+    list = viewChild.required('list', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "list" }] : /* istanbul ignore next */ []));
+    uid = `nxe-stepper-${nextStepperId++}`;
+    /** Whether the host is under {@link collapseBelow}; set from a ResizeObserver. */
+    narrow = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "narrow" }] : /* istanbul ignore next */ []));
+    /** The orientation actually drawn. */
+    layout = computed(() => this.orientation() === 'vertical' || (this.responsive() && this.narrow()) ? 'vertical' : 'horizontal', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+    /** Index of the open step, kept inside the steps; -1 with no steps. */
+    activeIndex = computed(() => {
+        const count = this.steps().length;
+        return Math.min(Math.max(this.selectedIndex(), 0), count - 1);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+    activeStep = computed(() => this.steps()[this.activeIndex()], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeStep" }] : /* istanbul ignore next */ []));
+    /** Steps that have been open at some point, the open one included. Resets with the stepper. */
+    visited = linkedSignal({ ...(ngDevMode ? { debugName: "visited" } : /* istanbul ignore next */ {}), source: this.activeStep,
+        computation: (step, previous) => {
+            const set = new Set(previous?.value);
+            if (step) {
+                set.add(step);
+            }
+            return set;
+        } });
+    /** Steps the user tried to leave while they were not passable. */
+    attempted = signal(new Set(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "attempted" }] : /* istanbul ignore next */ []));
+    /** The live region's text. Writable so a blocked Next can announce without moving. */
+    announcement = linkedSignal({ ...(ngDevMode ? { debugName: "announcement" } : /* istanbul ignore next */ {}), source: this.activeIndex,
+        computation: (index, previous) => (previous === undefined ? '' : this.stepOf(index)) });
+    blockedToggle = false;
+    /** True on the first step. */
+    isFirst = computed(() => this.activeIndex() <= 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isFirst" }] : /* istanbul ignore next */ []));
+    /** True on the last step. */
+    isLast = computed(() => this.activeIndex() >= this.steps().length - 1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isLast" }] : /* istanbul ignore next */ []));
+    /** Whether Next would move: there is a step after this one and, when linear, this one is passable. */
+    canNext = computed(() => {
+        const step = this.activeStep();
+        return !!step && !this.isLast() && (!this.linear() || this.passable(step, true));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canNext" }] : /* istanbul ignore next */ []));
+    views = computed(() => {
+        const steps = this.steps();
+        const active = this.activeIndex();
+        return steps.map((step, index) => {
+            const isActive = index === active;
+            const error = this.hasError(step);
+            const completed = this.isCompleted(step);
+            return {
+                step,
+                index,
+                headerId: `${this.uid}-header-${index}`,
+                panelId: `${this.uid}-panel-${index}`,
+                active: isActive,
+                navigable: this.canOpen(index),
+                marker: error ? 'error' : completed && !isActive ? 'completed' : 'number',
+                completed,
+                error,
+                rendered: isActive || ((step.keepAlive() ?? this.keepAlive()) && this.visited().has(step)),
+            };
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "views" }] : /* istanbul ignore next */ []));
+    constructor() {
+        afterNextRender(() => {
+            const el = this.host.nativeElement;
+            this.narrow.set(el.clientWidth > 0 && el.clientWidth < this.collapseBelow());
+            if (typeof ResizeObserver === 'undefined') {
+                return;
+            }
+            const observer = new ResizeObserver(() => {
+                const width = el.clientWidth;
+                // A hidden host reports 0; that is not narrow, and it must not flip the layout.
+                if (width > 0) {
+                    this.narrow.set(width < this.collapseBelow());
+                }
+            });
+            observer.observe(el);
+            this.destroyRef.onDestroy(() => observer.disconnect());
+        });
+    }
+    /** Moves to the next step. Linear and not passable: stays, shows the step's errors, returns false. */
+    next() {
+        const step = this.activeStep();
+        if (!step || this.isLast()) {
+            return false;
+        }
+        if (this.linear() && !this.passable(step, true)) {
+            this.block(step);
+            return false;
+        }
+        return this.go(this.activeIndex() + 1);
+    }
+    /** Moves to the previous step, which a linear stepper allows freely. False on the first step. */
+    previous() {
+        return this.isFirst() ? false : this.go(this.activeIndex() - 1);
+    }
+    /** Opens step `index` if it can be opened from here; returns whether it did. */
+    select(index) {
+        if (index === this.activeIndex()) {
+            return false;
+        }
+        if (!this.canOpen(index)) {
+            const step = this.steps()[index];
+            if (step && this.linear() && index > this.activeIndex()) {
+                this.block(this.firstBlocking(index) ?? step);
+            }
+            return false;
+        }
+        return this.go(index);
+    }
+    /**
+     * 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 = {}) {
+        const first = this.steps()[0];
+        this.attempted.set(new Set());
+        this.visited.set(new Set(first ? [first] : []));
+        if (options.controls !== false) {
+            this.steps().forEach((step) => step.stepControl()?.reset());
+        }
+        const previousIndex = this.activeIndex();
+        this.selectedIndex.set(0);
+        if (previousIndex !== 0) {
+            this.selectionChange.emit({ previousIndex, selectedIndex: 0 });
+        }
+    }
+    go(index) {
+        const previousIndex = this.activeIndex();
+        this.selectedIndex.set(index);
+        this.selectionChange.emit({ previousIndex, selectedIndex: index });
+        return true;
+    }
+    /** Surfaces why a linear stepper stayed: errors on the fields, a message for assistive tech. */
+    block(step) {
+        step.stepControl()?.markAllAsTouched();
+        this.attempted.update((set) => new Set(set).add(step));
+        const index = this.steps().indexOf(step);
+        this.blockedToggle = !this.blockedToggle;
+        // The trailing no-break space makes a repeat of the same message a different string.
+        this.announcement.set(this.messages.t('stepper.blocked', index + 1) + (this.blockedToggle ? ' ' : ''));
+        this.stepBlocked.emit(index);
+    }
+    stepOf(index) {
+        const step = this.steps()[index];
+        return step ? this.messages.t('stepper.stepOf', index + 1, this.steps().length, step.label()) : '';
+    }
+    interacted(step) {
+        return (this.visited().has(step) && step !== this.activeStep()) || this.attempted().has(step);
+    }
+    /** Whether a linear stepper lets the user leave `step` forward. */
+    passable(step, isActive) {
+        const explicit = step.completed();
+        if (explicit !== undefined) {
+            return explicit;
+        }
+        const control = step.controlState();
+        if (control.hasControl) {
+            return control.valid ? isActive || this.interacted(step) : step.optional() && control.pristine;
+        }
+        return isActive || step.optional() || this.interacted(step);
+    }
+    isCompleted(step) {
+        const explicit = step.completed();
+        if (explicit !== undefined) {
+            return explicit;
+        }
+        return this.interacted(step) && step.controlState().valid;
+    }
+    hasError(step) {
+        const explicit = step.hasError();
+        if (explicit !== undefined) {
+            return explicit;
+        }
+        const control = step.controlState();
+        return this.interacted(step) && control.hasControl && !control.valid && !(step.optional() && control.pristine);
+    }
+    /** The first step between here and `target` that holds a linear stepper back. */
+    firstBlocking(target) {
+        const steps = this.steps();
+        const active = this.activeIndex();
+        for (let k = active; k < target; k++) {
+            if (!this.passable(steps[k], k === active)) {
+                return steps[k];
+            }
+        }
+        return undefined;
+    }
+    /** Whether the user can open step `index` from the open one. */
+    canOpen(index) {
+        const steps = this.steps();
+        const active = this.activeIndex();
+        const step = steps[index];
+        if (!step) {
+            return false;
+        }
+        if (index === active) {
+            return true;
+        }
+        if (index < active) {
+            // A locked step stays locked once it is done.
+            return step.editable() || !this.isCompleted(step);
+        }
+        return !this.linear() || this.firstBlocking(index) === undefined;
+    }
+    headerLabel(view) {
+        return view.step.label();
+    }
+    stateText(view) {
+        if (view.error) {
+            return this.messages.t('stepper.error');
+        }
+        return view.completed && !view.active ? this.messages.t('stepper.completed') : '';
+    }
+    optionalText() {
+        return this.messages.t('stepper.optional');
+    }
+    listLabel() {
+        return this.stepsLabel() ?? this.messages.t('stepper.listLabel');
+    }
+    open(view) {
+        this.select(view.index);
+    }
+    onKeydown(event) {
+        const headers = Array.from(this.list().nativeElement.querySelectorAll('button.nxe-step-header'));
+        const current = headers.indexOf(event.target);
+        if (current < 0) {
+            return;
+        }
+        const rtl = getComputedStyle(this.list().nativeElement).direction === 'rtl';
+        const horizontal = this.layout() === 'horizontal';
+        let target;
+        switch (event.key) {
+            case 'ArrowRight':
+                target = current + (horizontal ? (rtl ? -1 : 1) : 0);
+                break;
+            case 'ArrowLeft':
+                target = current + (horizontal ? (rtl ? 1 : -1) : 0);
+                break;
+            case 'ArrowDown':
+                target = current + 1;
+                break;
+            case 'ArrowUp':
+                target = current - 1;
+                break;
+            case 'Home':
+                target = 0;
+                break;
+            case 'End':
+                target = headers.length - 1;
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+        if (target !== current) {
+            headers[(target + headers.length) % headers.length]?.focus();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxeStepperComponent, isStandalone: true, selector: "nxe-stepper", inputs: { selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null }, collapseBelow: { classPropertyName: "collapseBelow", publicName: "collapseBelow", isSignal: true, isRequired: false, transformFunction: null }, keepAlive: { classPropertyName: "keepAlive", publicName: "keepAlive", isSignal: true, isRequired: false, transformFunction: null }, stepsLabel: { classPropertyName: "stepsLabel", publicName: "stepsLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIndex: "selectedIndexChange", selectionChange: "selectionChange", stepBlocked: "stepBlocked" }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "class.nxe-stepper-vertical": "layout() === 'vertical'", "class.nxe-stepper-horizontal": "layout() === 'horizontal'" }, classAttribute: "nxe-stepper" }, queries: [{ propertyName: "steps", predicate: NxeStepComponent, isSignal: true }], viewQueries: [{ propertyName: "list", first: true, predicate: ["list"], descendants: true, isSignal: true }], ngImport: i0, template: "<ol #list class=\"nxe-stepper-list\" [attr.aria-label]=\"listLabel()\">\r\n    @for (view of views(); track view.step; let last = $last) {\r\n        <li\r\n            class=\"nxe-step-item\"\r\n            [class.nxe-step-active]=\"view.active\"\r\n            [class.nxe-step-completed]=\"view.completed\"\r\n            [class.nxe-step-error]=\"view.error\"\r\n            [class.nxe-step-optional]=\"view.step.optional()\">\r\n            <ng-template #headerBody>\r\n                <span class=\"nxe-step-marker\" aria-hidden=\"true\">\r\n                    @switch (view.marker) {\r\n                        @case ('completed') {\r\n                            <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" focusable=\"false\">\r\n                                <path d=\"M3 8.5l3.2 3.2L13 4.8\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                            </svg>\r\n                        }\r\n                        @case ('error') {\r\n                            <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" focusable=\"false\">\r\n                                <path d=\"M8 3.5v5.2M8 11.6v.1\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\r\n                            </svg>\r\n                        }\r\n                        @default {\r\n                            {{ view.index + 1 }}\r\n                        }\r\n                    }\r\n                </span>\r\n                <span class=\"nxe-step-text\">\r\n                    <span class=\"nxe-step-label\">{{ headerLabel(view) }}</span>\r\n                    @if (view.error) {\r\n                        <span class=\"nxe-step-sub nxe-step-sub-error\">{{ stateText(view) }}</span>\r\n                    } @else if (view.step.description()) {\r\n                        <span class=\"nxe-step-sub\">{{ view.step.description() }}</span>\r\n                    }\r\n                    @if (view.step.optional()) {\r\n                        <span class=\"nxe-step-sub\">{{ optionalText() }}</span>\r\n                    }\r\n                    @if (!view.error && stateText(view)) {\r\n                        <span class=\"nxe-step-hidden\">{{ stateText(view) }}</span>\r\n                    }\r\n                </span>\r\n            </ng-template>\r\n            @if (view.navigable) {\r\n                <button\r\n                    type=\"button\"\r\n                    class=\"nxe-step-header\"\r\n                    [id]=\"view.headerId\"\r\n                    [attr.aria-current]=\"view.active ? 'step' : null\"\r\n                    [attr.aria-controls]=\"view.panelId\"\r\n                    (click)=\"open(view)\">\r\n                    <ng-container [ngTemplateOutlet]=\"headerBody\" />\r\n                </button>\r\n            } @else {\r\n                <div class=\"nxe-step-header nxe-step-header-static\" [id]=\"view.headerId\">\r\n                    <ng-container [ngTemplateOutlet]=\"headerBody\" />\r\n                </div>\r\n            }\r\n            @if (!last && layout() === 'horizontal') {\r\n                <span class=\"nxe-step-connector\" aria-hidden=\"true\"></span>\r\n            }\r\n            @if (layout() === 'vertical') {\r\n                <ng-container [ngTemplateOutlet]=\"panel\" [ngTemplateOutletContext]=\"{ $implicit: view }\" />\r\n            }\r\n        </li>\r\n    }\r\n</ol>\r\n@if (layout() === 'horizontal') {\r\n    @for (view of views(); track view.step) {\r\n        <ng-container [ngTemplateOutlet]=\"panel\" [ngTemplateOutletContext]=\"{ $implicit: view }\" />\r\n    }\r\n}\r\n<ng-template #panel let-view>\r\n    <div class=\"nxe-step-panel\" role=\"group\" [id]=\"view.panelId\" [attr.aria-labelledby]=\"view.headerId\" [hidden]=\"!view.active\">\r\n        @if (view.rendered) {\r\n            <ng-container [ngTemplateOutlet]=\"view.step.contentTemplate()\" />\r\n        }\r\n    </div>\r\n</ng-template>\r\n<div class=\"nxe-step-hidden\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">{{ announcement() }}</div>\r\n", styles: ["nxe-stepper.nxe-stepper{--nxe-step-marker-size: calc(var(--nxe-ui-space-5) + var(--nxe-ui-space-1));display:block;position:relative;color:var(--nxe-ui-text);font-family:var(--nxe-ui-font-family)}nxe-stepper.nxe-stepper .nxe-step-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}nxe-stepper.nxe-stepper .nxe-stepper-list{display:flex;margin:0;padding:0;list-style:none}nxe-stepper.nxe-stepper .nxe-step-item{display:flex;align-items:center;gap:var(--nxe-ui-space-2);min-width:0}nxe-stepper.nxe-stepper .nxe-step-header{display:inline-flex;align-items:center;gap:var(--nxe-ui-space-2);box-sizing:border-box;min-height:var(--nxe-ui-control-min-height);padding:var(--nxe-ui-space-1) var(--nxe-ui-space-2);border:0;border-radius:var(--nxe-ui-radius-sm);background:transparent;color:inherit;font:inherit;text-align:start}nxe-stepper.nxe-stepper button.nxe-step-header{cursor:pointer}nxe-stepper.nxe-stepper button.nxe-step-header:hover{background-color:var(--nxe-ui-surface-alt)}nxe-stepper.nxe-stepper button.nxe-step-header:focus-visible{outline:2px solid var(--nxe-ui-focus-ring-color);outline-offset:-2px}nxe-stepper.nxe-stepper .nxe-step-header-static{cursor:default}nxe-stepper.nxe-stepper .nxe-step-marker{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;box-sizing:border-box;width:var(--nxe-step-marker-size);height:var(--nxe-step-marker-size);border:1px solid var(--nxe-ui-status-neutral-border);border-radius:var(--nxe-ui-radius-pill);background:var(--nxe-ui-status-neutral-bg);color:var(--nxe-ui-status-neutral-fg);font-size:var(--nxe-ui-font-size-sm);font-weight:var(--nxe-ui-font-weight-semibold);line-height:1}nxe-stepper.nxe-stepper .nxe-step-text{display:inline-flex;flex-direction:column;min-width:0}nxe-stepper.nxe-stepper .nxe-step-label{color:var(--nxe-ui-neutral-600);font-weight:var(--nxe-ui-font-weight-semibold)}nxe-stepper.nxe-stepper .nxe-step-sub{color:var(--nxe-ui-text-muted);font-size:var(--nxe-ui-font-size-xs)}nxe-stepper.nxe-stepper .nxe-step-sub-error{color:var(--nxe-ui-status-danger-fg)}nxe-stepper.nxe-stepper .nxe-step-active .nxe-step-marker{border-color:var(--nxe-ui-accent);background:var(--nxe-ui-accent);color:var(--nxe-ui-accent-contrast)}nxe-stepper.nxe-stepper .nxe-step-active .nxe-step-label{color:var(--nxe-ui-text)}nxe-stepper.nxe-stepper .nxe-step-completed:not(.nxe-step-active) .nxe-step-marker{border-color:var(--nxe-ui-status-success-border);background:var(--nxe-ui-status-success-bg);color:var(--nxe-ui-status-success-fg)}nxe-stepper.nxe-stepper .nxe-step-error .nxe-step-marker{border-color:var(--nxe-ui-status-danger-border);background:var(--nxe-ui-status-danger-bg);color:var(--nxe-ui-status-danger-fg)}nxe-stepper.nxe-stepper .nxe-step-error .nxe-step-label{color:var(--nxe-ui-status-danger-fg)}nxe-stepper.nxe-stepper .nxe-step-panel{padding-top:var(--nxe-ui-space-4)}nxe-stepper.nxe-stepper .nxe-step-panel[hidden]{display:none}nxe-stepper.nxe-stepper.nxe-stepper-horizontal .nxe-step-item{flex:1 1 auto}nxe-stepper.nxe-stepper.nxe-stepper-horizontal .nxe-step-item:last-child{flex:0 0 auto}nxe-stepper.nxe-stepper.nxe-stepper-horizontal .nxe-step-connector{flex:1 1 var(--nxe-ui-space-5);min-width:var(--nxe-ui-space-4);height:1px;background:var(--nxe-ui-border)}nxe-stepper.nxe-stepper.nxe-stepper-horizontal .nxe-step-completed .nxe-step-connector{background:var(--nxe-ui-status-success-border)}nxe-stepper.nxe-stepper.nxe-stepper-vertical .nxe-stepper-list{flex-direction:column}nxe-stepper.nxe-stepper.nxe-stepper-vertical .nxe-step-item{display:grid;grid-template-columns:minmax(0,1fr);align-items:start;gap:0}nxe-stepper.nxe-stepper.nxe-stepper-vertical .nxe-step-panel{margin-inline-start:calc(var(--nxe-step-marker-size) / 2 + var(--nxe-ui-space-2));padding-inline-start:var(--nxe-ui-space-4);padding-bottom:var(--nxe-ui-space-3);border-inline-start:1px solid var(--nxe-ui-border)}nxe-stepper.nxe-stepper.nxe-stepper-vertical .nxe-step-item:last-child .nxe-step-panel{border-inline-start-color:transparent}nxe-stepper.nxe-stepper.nxe-stepper-vertical .nxe-step-item:not(.nxe-step-active) .nxe-step-panel[hidden]{display:block;min-height:var(--nxe-ui-space-3);padding-top:0;padding-bottom:0}nxe-stepper.nxe-stepper.nxe-stepper-vertical .nxe-step-item:not(.nxe-step-active) .nxe-step-panel[hidden]>*{display:none}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeStepperComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nxe-stepper', imports: [NgTemplateOutlet], host: {
+                        class: 'nxe-stepper',
+                        '(keydown)': 'onKeydown($event)',
+                        '[class.nxe-stepper-vertical]': "layout() === 'vertical'",
+                        '[class.nxe-stepper-horizontal]': "layout() === 'horizontal'",
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ol #list class=\"nxe-stepper-list\" [attr.aria-label]=\"listLabel()\">\r\n    @for (view of views(); track view.step; let last = $last) {\r\n        <li\r\n            class=\"nxe-step-item\"\r\n            [class.nxe-step-active]=\"view.active\"\r\n            [class.nxe-step-completed]=\"view.completed\"\r\n            [class.nxe-step-error]=\"view.error\"\r\n            [class.nxe-step-optional]=\"view.step.optional()\">\r\n            <ng-template #headerBody>\r\n                <span class=\"nxe-step-marker\" aria-hidden=\"true\">\r\n                    @switch (view.marker) {\r\n                        @case ('completed') {\r\n                            <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" focusable=\"false\">\r\n                                <path d=\"M3 8.5l3.2 3.2L13 4.8\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                            </svg>\r\n                        }\r\n                        @case ('error') {\r\n                            <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" focusable=\"false\">\r\n                                <path d=\"M8 3.5v5.2M8 11.6v.1\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\r\n                            </svg>\r\n                        }\r\n                        @default {\r\n                            {{ view.index + 1 }}\r\n                        }\r\n                    }\r\n                </span>\r\n                <span class=\"nxe-step-text\">\r\n                    <span class=\"nxe-step-label\">{{ headerLabel(view) }}</span>\r\n                    @if (view.error) {\r\n                        <span class=\"nxe-step-sub nxe-step-sub-error\">{{ stateText(view) }}</span>\r\n                    } @else if (view.step.description()) {\r\n                        <span class=\"nxe-step-sub\">{{ view.step.description() }}</span>\r\n                    }\r\n                    @if (view.step.optional()) {\r\n                        <span class=\"nxe-step-sub\">{{ optionalText() }}</span>\r\n                    }\r\n                    @if (!view.error && stateText(view)) {\r\n                        <span class=\"nxe-step-hidden\">{{ stateText(view) }}</span>\r\n                    }\r\n                </span>\r\n            </ng-template>\r\n            @if (view.navigable) {\r\n                <button\r\n                    type=\"button\"\r\n                    class=\"nxe-step-header\"\r\n                    [id]=\"view.headerId\"\r\n                    [attr.aria-current]=\"view.active ? 'step' : null\"\r\n                    [attr.aria-controls]=\"view.panelId\"\r\n                    (click)=\"open(view)\">\r\n                    <ng-container [ngTemplateOutlet]=\"headerBody\" />\r\n                </button>\r\n            } @else {\r\n                <div class=\"nxe-step-header nxe-step-header-static\" [id]=\"view.headerId\">\r\n                    <ng-container [ngTemplateOutlet]=\"headerBody\" />\r\n                </div>\r\n            }\r\n            @if (!last && layout() === 'horizontal') {\r\n                <span class=\"nxe-step-connector\" aria-hidden=\"true\"></span>\r\n            }\r\n            @if (layout() === 'vertical') {\r\n                <ng-container [ngTemplateOutlet]=\"panel\" [ngTemplateOutletContext]=\"{ $implicit: view }\" />\r\n            }\r\n        </li>\r\n    }\r\n</ol>\r\n@if (layout() === 'horizontal') {\r\n    @for (view of views(); track view.step) {\r\n        <ng-container [ngTemplateOutlet]=\"panel\" [ngTemplateOutletContext]=\"{ $implicit: view }\" />\r\n    }\r\n}\r\n<ng-template #panel let-view>\r\n    <div class=\"nxe-step-panel\" role=\"group\" [id]=\"view.panelId\" [attr.aria-labelledby]=\"view.headerId\" [hidden]=\"!view.active\">\r\n        @if (view.rendered) {\r\n            <ng-container [ngTemplateOutlet]=\"view.step.contentTemplate()\" />\r\n        }\r\n    </div>\r\n</ng-template>\r\n<div class=\"nxe-step-hidden\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">{{ announcement() }}</div>\r\n", styles: ["nxe-stepper.nxe-stepper{--nxe-step-marker-size: calc(var(--nxe-ui-space-5) + var(--nxe-ui-space-1));display:block;position:relative;color:var(--nxe-ui-text);font-family:var(--nxe-ui-font-family)}nxe-stepper.nxe-stepper .nxe-step-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}nxe-stepper.nxe-stepper .nxe-stepper-list{display:flex;margin:0;padding:0;list-style:none}nxe-stepper.nxe-stepper .nxe-step-item{display:flex;align-items:center;gap:var(--nxe-ui-space-2);min-width:0}nxe-stepper.nxe-stepper .nxe-step-header{display:inline-flex;align-items:center;gap:var(--nxe-ui-space-2);box-sizing:border-box;min-height:var(--nxe-ui-control-min-height);padding:var(--nxe-ui-space-1) var(--nxe-ui-space-2);border:0;border-radius:var(--nxe-ui-radius-sm);background:transparent;color:inherit;font:inherit;text-align:start}nxe-stepper.nxe-stepper button.nxe-step-header{cursor:pointer}nxe-stepper.nxe-stepper button.nxe-step-header:hover{background-color:var(--nxe-ui-surface-alt)}nxe-stepper.nxe-stepper button.nxe-step-header:focus-visible{outline:2px solid var(--nxe-ui-focus-ring-color);outline-offset:-2px}nxe-stepper.nxe-stepper .nxe-step-header-static{cursor:default}nxe-stepper.nxe-stepper .nxe-step-marker{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;box-sizing:border-box;width:var(--nxe-step-marker-size);height:var(--nxe-step-marker-size);border:1px solid var(--nxe-ui-status-neutral-border);border-radius:var(--nxe-ui-radius-pill);background:var(--nxe-ui-status-neutral-bg);color:var(--nxe-ui-status-neutral-fg);font-size:var(--nxe-ui-font-size-sm);font-weight:var(--nxe-ui-font-weight-semibold);line-height:1}nxe-stepper.nxe-stepper .nxe-step-text{display:inline-flex;flex-direction:column;min-width:0}nxe-stepper.nxe-stepper .nxe-step-label{color:var(--nxe-ui-neutral-600);font-weight:var(--nxe-ui-font-weight-semibold)}nxe-stepper.nxe-stepper .nxe-step-sub{color:var(--nxe-ui-text-muted);font-size:var(--nxe-ui-font-size-xs)}nxe-stepper.nxe-stepper .nxe-step-sub-error{color:var(--nxe-ui-status-danger-fg)}nxe-stepper.nxe-stepper .nxe-step-active .nxe-step-marker{border-color:var(--nxe-ui-accent);background:var(--nxe-ui-accent);color:var(--nxe-ui-accent-contrast)}nxe-stepper.nxe-stepper .nxe-step-active .nxe-step-label{color:var(--nxe-ui-text)}nxe-stepper.nxe-stepper .nxe-step-completed:not(.nxe-step-active) .nxe-step-marker{border-color:var(--nxe-ui-status-success-border);background:var(--nxe-ui-status-success-bg);color:var(--nxe-ui-status-success-fg)}nxe-stepper.nxe-stepper .nxe-step-error .nxe-step-marker{border-color:var(--nxe-ui-status-danger-border);background:var(--nxe-ui-status-danger-bg);color:var(--nxe-ui-status-danger-fg)}nxe-stepper.nxe-stepper .nxe-step-error .nxe-step-label{color:var(--nxe-ui-status-danger-fg)}nxe-stepper.nxe-stepper .nxe-step-panel{padding-top:var(--nxe-ui-space-4)}nxe-stepper.nxe-stepper .nxe-step-panel[hidden]{display:none}nxe-stepper.nxe-stepper.nxe-stepper-horizontal .nxe-step-item{flex:1 1 auto}nxe-stepper.nxe-stepper.nxe-stepper-horizontal .nxe-step-item:last-child{flex:0 0 auto}nxe-stepper.nxe-stepper.nxe-stepper-horizontal .nxe-step-connector{flex:1 1 var(--nxe-ui-space-5);min-width:var(--nxe-ui-space-4);height:1px;background:var(--nxe-ui-border)}nxe-stepper.nxe-stepper.nxe-stepper-horizontal .nxe-step-completed .nxe-step-connector{background:var(--nxe-ui-status-success-border)}nxe-stepper.nxe-stepper.nxe-stepper-vertical .nxe-stepper-list{flex-direction:column}nxe-stepper.nxe-stepper.nxe-stepper-vertical .nxe-step-item{display:grid;grid-template-columns:minmax(0,1fr);align-items:start;gap:0}nxe-stepper.nxe-stepper.nxe-stepper-vertical .nxe-step-panel{margin-inline-start:calc(var(--nxe-step-marker-size) / 2 + var(--nxe-ui-space-2));padding-inline-start:var(--nxe-ui-space-4);padding-bottom:var(--nxe-ui-space-3);border-inline-start:1px solid var(--nxe-ui-border)}nxe-stepper.nxe-stepper.nxe-stepper-vertical .nxe-step-item:last-child .nxe-step-panel{border-inline-start-color:transparent}nxe-stepper.nxe-stepper.nxe-stepper-vertical .nxe-step-item:not(.nxe-step-active) .nxe-step-panel[hidden]{display:block;min-height:var(--nxe-ui-space-3);padding-top:0;padding-bottom:0}nxe-stepper.nxe-stepper.nxe-stepper-vertical .nxe-step-item:not(.nxe-step-active) .nxe-step-panel[hidden]>*{display:none}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { selectedIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIndex", required: false }] }, { type: i0.Output, args: ["selectedIndexChange"] }], linear: [{ type: i0.Input, args: [{ isSignal: true, alias: "linear", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], responsive: [{ type: i0.Input, args: [{ isSignal: true, alias: "responsive", required: false }] }], collapseBelow: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseBelow", required: false }] }], keepAlive: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepAlive", required: false }] }], stepsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepsLabel", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], stepBlocked: [{ type: i0.Output, args: ["stepBlocked"] }], steps: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => NxeStepComponent), { isSignal: true }] }], list: [{ type: i0.ViewChild, args: ['list', { isSignal: true }] }] } });
+
+/**
+ * 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.
+ */
+class NxeStepperNextDirective {
+    parent = inject(NxeStepperComponent, { optional: true });
+    /** The stepper to drive when the element is not inside one. */
+    target = input(undefined, { ...(ngDevMode ? { debugName: "target" } : /* istanbul ignore next */ {}), alias: 'nxeStepperNext' });
+    stepper() {
+        return this.target() || this.parent;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeStepperNextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.5", type: NxeStepperNextDirective, isStandalone: true, selector: "[nxeStepperNext]", inputs: { target: { classPropertyName: "target", publicName: "nxeStepperNext", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "stepper()?.next()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeStepperNextDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[nxeStepperNext]',
+                    host: { '(click)': 'stepper()?.next()' },
+                }]
+        }], propDecorators: { target: [{ type: i0.Input, args: [{ isSignal: true, alias: "nxeStepperNext", required: false }] }] } });
+
+/**
+ * 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" />
+ * ```
+ */
+class NxeStepperPreviousDirective {
+    parent = inject(NxeStepperComponent, { optional: true });
+    /** The stepper to drive when the element is not inside one. */
+    target = input(undefined, { ...(ngDevMode ? { debugName: "target" } : /* istanbul ignore next */ {}), alias: 'nxeStepperPrevious' });
+    stepper() {
+        return this.target() || this.parent;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeStepperPreviousDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.5", type: NxeStepperPreviousDirective, isStandalone: true, selector: "[nxeStepperPrevious]", inputs: { target: { classPropertyName: "target", publicName: "nxeStepperPrevious", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "stepper()?.previous()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeStepperPreviousDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[nxeStepperPrevious]',
+                    host: { '(click)': 'stepper()?.previous()' },
+                }]
+        }], propDecorators: { target: [{ type: i0.Input, args: [{ isSignal: true, alias: "nxeStepperPrevious", required: false }] }] } });
+
+/**
+ * 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.
+ */
+class NxeBreadcrumbSeparatorDirective {
+    /** The template to draw. */
+    template = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeBreadcrumbSeparatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.5", type: NxeBreadcrumbSeparatorDirective, isStandalone: true, selector: "ng-template[nxeBreadcrumbSeparator]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeBreadcrumbSeparatorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[nxeBreadcrumbSeparator]',
+                }]
+        }] });
+
+/**
+ * `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.
+ */
+class NxeBreadcrumbComponent {
+    router = inject(Router);
+    messages = inject(NxeMessageService);
+    /** The crumbs to show. */
+    items = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    /** Add the crumbs of the active route's `data.breadcrumb`, after `items`. */
+    fromRoute = input(false, { ...(ngDevMode ? { debugName: "fromRoute" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Crumbs shown before the middle ones fold into a menu; 0 never folds. At least 2 otherwise. Default 5. */
+    maxItems = input(5, { ...(ngDevMode ? { debugName: "maxItems" } : /* istanbul ignore next */ {}), transform: (value) => Math.max(0, Math.floor(numberAttribute(value, 5))) });
+    /** Text between crumbs. Default `/`. */
+    separator = input('/', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "separator" }] : /* istanbul ignore next */ []));
+    /** Accessible name of the `nav`. Default "Breadcrumb" (`breadcrumb.label`). */
+    ariaLabel = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+    separatorTemplate = contentChild(NxeBreadcrumbSeparatorDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "separatorTemplate" }] : /* istanbul ignore next */ []));
+    /** Bumped after each navigation so the route trail is read again. */
+    navigations = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "navigations" }] : /* istanbul ignore next */ []));
+    navLabel = computed(() => this.ariaLabel() || this.messages.t('breadcrumb.label'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "navLabel" }] : /* istanbul ignore next */ []));
+    moreLabel = computed(() => this.messages.t('breadcrumb.more'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "moreLabel" }] : /* istanbul ignore next */ []));
+    /** Every crumb, in order: `items`, then the route's. */
+    crumbs = computed(() => {
+        const listed = this.items() ?? [];
+        if (!this.fromRoute()) {
+            return listed;
+        }
+        this.navigations();
+        return [...listed, ...this.routeCrumbs(this.router.routerState.snapshot.root)];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "crumbs" }] : /* istanbul ignore next */ []));
+    /** The crumbs folded into the menu: the middle ones past `maxItems`. */
+    folded = computed(() => {
+        const [from, to] = this.foldRange();
+        return this.crumbs().slice(from, to);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "folded" }] : /* istanbul ignore next */ []));
+    slots = computed(() => {
+        const crumbs = this.crumbs();
+        const [from, to] = this.foldRange();
+        const out = [];
+        crumbs.forEach((crumb, index) => {
+            if (index >= from && index < to) {
+                if (index === from) {
+                    out.push({ crumb: null, last: false });
+                }
+                return;
+            }
+            out.push({ crumb, last: index === crumbs.length - 1 });
+        });
+        return out;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "slots" }] : /* istanbul ignore next */ []));
+    constructor() {
+        this.router.events
+            .pipe(filter((event) => event instanceof NavigationEnd), takeUntilDestroyed(inject(DestroyRef)))
+            .subscribe(() => this.navigations.update((n) => n + 1));
+    }
+    /** `[from, to)` of the crumbs that fold; empty when everything fits. */
+    foldRange() {
+        const count = this.crumbs().length;
+        const max = this.maxItems();
+        if (max === 0) {
+            return [0, 0];
+        }
+        const keep = Math.max(2, max);
+        return count > keep ? [1, count - (keep - 1)] : [0, 0];
+    }
+    /** One crumb per route, root to leaf, that declares a breadcrumb of its own. */
+    routeCrumbs(root) {
+        const trail = [];
+        const path = [];
+        for (let snapshot = root; snapshot; snapshot = snapshot.firstChild) {
+            path.push(...snapshot.url.map((segment) => segment.path));
+            const config = snapshot.routeConfig;
+            // Inherited data is not this route's own: an empty-path child would repeat its parent's crumb.
+            const declared = config?.data?.['breadcrumb'] !== undefined || config?.resolve?.['breadcrumb'] !== undefined;
+            const source = snapshot.data['breadcrumb'];
+            if (!declared || source === undefined || source === null) {
+                continue;
+            }
+            const label = typeof source === 'function' ? source(snapshot.data) : source;
+            if (label) {
+                trail.push({ label, route: ['/', ...path] });
+            }
+        }
+        return trail;
+    }
+    /** The commands of a crumb's `routerLink`. */
+    commands(crumb) {
+        return crumb.route ?? [];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxeBreadcrumbComponent, isStandalone: true, selector: "nxe-breadcrumb", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, fromRoute: { classPropertyName: "fromRoute", publicName: "fromRoute", isSignal: true, isRequired: false, transformFunction: null }, maxItems: { classPropertyName: "maxItems", publicName: "maxItems", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "nxe-breadcrumb" }, queries: [{ propertyName: "separatorTemplate", first: true, predicate: NxeBreadcrumbSeparatorDirective, descendants: true, isSignal: true }], exportAs: ["nxeBreadcrumb"], ngImport: i0, template: "<nav class=\"nxe-breadcrumb-nav\" [attr.aria-label]=\"navLabel()\">\r\n    <ol class=\"nxe-breadcrumb-list\">\r\n        @for (slot of slots(); track $index) {\r\n            <li class=\"nxe-breadcrumb-item\">\r\n                @if (slot.crumb; as crumb) {\r\n                    @if (slot.last) {\r\n                        <span class=\"nxe-breadcrumb-current\" aria-current=\"page\">{{ crumb.label }}</span>\r\n                    } @else if (crumb.route !== undefined) {\r\n                        <a class=\"nxe-breadcrumb-link\" [routerLink]=\"commands(crumb)\" [queryParams]=\"crumb.queryParams\">{{ crumb.label }}</a>\r\n                    } @else if (crumb.href !== undefined) {\r\n                        <a class=\"nxe-breadcrumb-link\" [href]=\"crumb.href\">{{ crumb.label }}</a>\r\n                    } @else {\r\n                        <span class=\"nxe-breadcrumb-text\">{{ crumb.label }}</span>\r\n                    }\r\n                } @else {\r\n                    <button type=\"button\" class=\"nxe-breadcrumb-more\" [attr.aria-label]=\"moreLabel()\" [nxeMenuTriggerFor]=\"more\">\r\n                        <span aria-hidden=\"true\">&hellip;</span>\r\n                    </button>\r\n                }\r\n                @if (!slot.last) {\r\n                    <span class=\"nxe-breadcrumb-separator\" aria-hidden=\"true\">\r\n                        @if (separatorTemplate(); as template) {\r\n                            <ng-container *ngTemplateOutlet=\"template.template\" />\r\n                        } @else {\r\n                            {{ separator() }}\r\n                        }\r\n                    </span>\r\n                }\r\n            </li>\r\n        }\r\n    </ol>\r\n</nav>\r\n\r\n<nxe-menu #more panelClass=\"nxe-breadcrumb-menu\">\r\n    @for (crumb of folded(); track $index) {\r\n        @if (crumb.route !== undefined) {\r\n            <nxe-menu-item [routerLink]=\"commands(crumb)\" [queryParams]=\"crumb.queryParams\">{{ crumb.label }}</nxe-menu-item>\r\n        } @else if (crumb.href !== undefined) {\r\n            <a nxe-menu-item [href]=\"crumb.href\">{{ crumb.label }}</a>\r\n        } @else {\r\n            <nxe-menu-item [disabled]=\"true\">{{ crumb.label }}</nxe-menu-item>\r\n        }\r\n    }\r\n</nxe-menu>\r\n", styles: ["nxe-breadcrumb.nxe-breadcrumb{display:block;font-family:var(--nxe-ui-font-family);font-size:var(--nxe-ui-font-size-md);line-height:var(--nxe-ui-line-height-md);color:var(--nxe-ui-text)}nxe-breadcrumb.nxe-breadcrumb .nxe-breadcrumb-list{display:flex;flex-wrap:wrap;align-items:center;gap:var(--nxe-ui-space-1) 0;margin:0;padding:0;list-style:none}nxe-breadcrumb.nxe-breadcrumb .nxe-breadcrumb-item{display:inline-flex;align-items:center;min-width:0}nxe-breadcrumb.nxe-breadcrumb .nxe-breadcrumb-link,nxe-breadcrumb.nxe-breadcrumb .nxe-breadcrumb-more{border-radius:var(--nxe-ui-radius-sm);color:var(--nxe-ui-accent-strong);text-decoration:none}nxe-breadcrumb.nxe-breadcrumb .nxe-breadcrumb-link:hover,nxe-breadcrumb.nxe-breadcrumb .nxe-breadcrumb-more:hover{text-decoration:underline}nxe-breadcrumb.nxe-breadcrumb .nxe-breadcrumb-link:focus-visible,nxe-breadcrumb.nxe-breadcrumb .nxe-breadcrumb-more:focus-visible{outline:none;box-shadow:var(--nxe-ui-focus-ring)}nxe-breadcrumb.nxe-breadcrumb .nxe-breadcrumb-link{padding:0 var(--nxe-ui-space-1)}nxe-breadcrumb.nxe-breadcrumb .nxe-breadcrumb-more{display:inline-flex;align-items:center;justify-content:center;min-width:var(--nxe-ui-space-6);height:var(--nxe-ui-space-6);padding:0 var(--nxe-ui-space-1);border:0;background:transparent;font:inherit;cursor:pointer}nxe-breadcrumb.nxe-breadcrumb .nxe-breadcrumb-more:hover{background:var(--nxe-ui-surface-alt);text-decoration:none}nxe-breadcrumb.nxe-breadcrumb .nxe-breadcrumb-current{padding:0 var(--nxe-ui-space-1);font-weight:var(--nxe-ui-font-weight-semibold);overflow-wrap:anywhere}nxe-breadcrumb.nxe-breadcrumb .nxe-breadcrumb-text{padding:0 var(--nxe-ui-space-1)}nxe-breadcrumb.nxe-breadcrumb .nxe-breadcrumb-separator{display:inline-flex;align-items:center;padding:0 var(--nxe-ui-space-1);color:var(--nxe-ui-neutral-600);-webkit-user-select:none;user-select:none}nxe-breadcrumb.nxe-breadcrumb .nxe-breadcrumb-separator svg{width:1em;height:1em;fill:none;stroke:currentColor}[dir=rtl] nxe-breadcrumb.nxe-breadcrumb .nxe-breadcrumb-separator{transform:scaleX(-1)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "component", type: NxeMenuComponent, selector: "nxe-menu", inputs: ["aria-label", "panelClass"], exportAs: ["nxeMenu"] }, { kind: "component", type: NxeMenuItemComponent, selector: "nxe-menu-item, [nxe-menu-item]", inputs: ["disabled", "danger"], outputs: ["itemClick"] }, { kind: "directive", type: NxeMenuTriggerForDirective, selector: "[nxeMenuTriggerFor]", inputs: ["nxeMenuTriggerFor"], exportAs: ["nxeMenuTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeBreadcrumbComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nxe-breadcrumb', exportAs: 'nxeBreadcrumb', imports: [
+                        NgTemplateOutlet,
+                        RouterLink,
+                        NxeMenuComponent,
+                        NxeMenuItemComponent,
+                        NxeMenuTriggerForDirective,
+                    ], host: { class: 'nxe-breadcrumb' }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<nav class=\"nxe-breadcrumb-nav\" [attr.aria-label]=\"navLabel()\">\r\n    <ol class=\"nxe-breadcrumb-list\">\r\n        @for (slot of slots(); track $index) {\r\n            <li class=\"nxe-breadcrumb-item\">\r\n                @if (slot.crumb; as crumb) {\r\n                    @if (slot.last) {\r\n                        <span class=\"nxe-breadcrumb-current\" aria-current=\"page\">{{ crumb.label }}</span>\r\n                    } @else if (crumb.route !== undefined) {\r\n                        <a class=\"nxe-breadcrumb-link\" [routerLink]=\"commands(crumb)\" [queryParams]=\"crumb.queryParams\">{{ crumb.label }}</a>\r\n                    } @else if (crumb.href !== undefined) {\r\n                        <a class=\"nxe-breadcrumb-link\" [href]=\"crumb.href\">{{ crumb.label }}</a>\r\n                    } @else {\r\n                        <span class=\"nxe-breadcrumb-text\">{{ crumb.label }}</span>\r\n                    }\r\n                } @else {\r\n                    <button type=\"button\" class=\"nxe-breadcrumb-more\" [attr.aria-label]=\"moreLabel()\" [nxeMenuTriggerFor]=\"more\">\r\n                        <span aria-hidden=\"true\">&hellip;</span>\r\n                    </button>\r\n                }\r\n                @if (!slot.last) {\r\n                    <span class=\"nxe-breadcrumb-separator\" aria-hidden=\"true\">\r\n                        @if (separatorTemplate(); as template) {\r\n                            <ng-container *ngTemplateOutlet=\"template.template\" />\r\n                        } @else {\r\n                            {{ separator() }}\r\n                        }\r\n                    </span>\r\n                }\r\n            </li>\r\n        }\r\n    </ol>\r\n</nav>\r\n\r\n<nxe-menu #more panelClass=\"nxe-breadcrumb-menu\">\r\n    @for (crumb of folded(); track $index) {\r\n        @if (crumb.route !== undefined) {\r\n            <nxe-menu-item [routerLink]=\"commands(crumb)\" [queryParams]=\"crumb.queryParams\">{{ crumb.label }}</nxe-menu-item>\r\n        } @else if (crumb.href !== undefined) {\r\n            <a nxe-menu-item [href]=\"crumb.href\">{{ crumb.label }}</a>\r\n        } @else {\r\n            <nxe-menu-item [disabled]=\"true\">{{ crumb.label }}</nxe-menu-item>\r\n        }\r\n    }\r\n</nxe-menu>\r\n", styles: ["nxe-breadcrumb.nxe-breadcrumb{display:block;font-family:var(--nxe-ui-font-family);font-size:var(--nxe-ui-font-size-md);line-height:var(--nxe-ui-line-height-md);color:var(--nxe-ui-text)}nxe-breadcrumb.nxe-breadcrumb .nxe-breadcrumb-list{display:flex;flex-wrap:wrap;align-items:center;gap:var(--nxe-ui-space-1) 0;margin:0;padding:0;list-style:none}nxe-breadcrumb.nxe-breadcrumb .nxe-breadcrumb-item{display:inline-flex;align-items:center;min-width:0}nxe-breadcrumb.nxe-breadcrumb .nxe-breadcrumb-link,nxe-breadcrumb.nxe-breadcrumb .nxe-breadcrumb-more{border-radius:var(--nxe-ui-radius-sm);color:var(--nxe-ui-accent-strong);text-decoration:none}nxe-breadcrumb.nxe-breadcrumb .nxe-breadcrumb-link:hover,nxe-breadcrumb.nxe-breadcrumb .nxe-breadcrumb-more:hover{text-decoration:underline}nxe-breadcrumb.nxe-breadcrumb .nxe-breadcrumb-link:focus-visible,nxe-breadcrumb.nxe-breadcrumb .nxe-breadcrumb-more:focus-visible{outline:none;box-shadow:var(--nxe-ui-focus-ring)}nxe-breadcrumb.nxe-breadcrumb .nxe-breadcrumb-link{padding:0 var(--nxe-ui-space-1)}nxe-breadcrumb.nxe-breadcrumb .nxe-breadcrumb-more{display:inline-flex;align-items:center;justify-content:center;min-width:var(--nxe-ui-space-6);height:var(--nxe-ui-space-6);padding:0 var(--nxe-ui-space-1);border:0;background:transparent;font:inherit;cursor:pointer}nxe-breadcrumb.nxe-breadcrumb .nxe-breadcrumb-more:hover{background:var(--nxe-ui-surface-alt);text-decoration:none}nxe-breadcrumb.nxe-breadcrumb .nxe-breadcrumb-current{padding:0 var(--nxe-ui-space-1);font-weight:var(--nxe-ui-font-weight-semibold);overflow-wrap:anywhere}nxe-breadcrumb.nxe-breadcrumb .nxe-breadcrumb-text{padding:0 var(--nxe-ui-space-1)}nxe-breadcrumb.nxe-breadcrumb .nxe-breadcrumb-separator{display:inline-flex;align-items:center;padding:0 var(--nxe-ui-space-1);color:var(--nxe-ui-neutral-600);-webkit-user-select:none;user-select:none}nxe-breadcrumb.nxe-breadcrumb .nxe-breadcrumb-separator svg{width:1em;height:1em;fill:none;stroke:currentColor}[dir=rtl] nxe-breadcrumb.nxe-breadcrumb .nxe-breadcrumb-separator{transform:scaleX(-1)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], fromRoute: [{ type: i0.Input, args: [{ isSignal: true, alias: "fromRoute", required: false }] }], maxItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxItems", required: false }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], separatorTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NxeBreadcrumbSeparatorDirective), { isSignal: true }] }] } });
+
+// @nexterajs/ui/navigation — public API.
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NxeBreadcrumbComponent, NxeBreadcrumbSeparatorDirective, NxeStepComponent, NxeStepContentDirective, NxeStepperComponent, NxeStepperNextDirective, NxeStepperPreviousDirective, NxeTabComponent, NxeTabContentDirective, NxeTabsComponent };
+//# sourceMappingURL=nexterajs-ui-navigation.mjs.map