@nexterajs/ui 0.0.2 → 0.1.0

package/fesm2022/nexterajs-ui-shell.mjs

@@ -0,0 +1,542 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, Directive, inject, ElementRef, viewChild, input, model, booleanAttribute, output, contentChild, TemplateRef, computed, linkedSignal, ViewEncapsulation, ChangeDetectionStrategy, Component, Injector, numberAttribute, signal, DestroyRef, afterNextRender, forwardRef } from '@angular/core';
+import { toSignal, toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { FocusTrapFactory } from '@angular/cdk/a11y';
+import { Router, NavigationEnd, PRIMARY_OUTLET, RouterLink } from '@angular/router';
+import { NxeMessageService } from '@nexterajs/ui/core';
+import { filter, map } from 'rxjs';
+import { NgTemplateOutlet } from '@angular/common';
+import { NxeBadgeComponent, NxeBadgeAnchorDirective } from '@nexterajs/ui/display';
+import { NxeButtonComponent } from '@nexterajs/ui/forms';
+
+/** Provided by `nxe-shell` to the topbar and sidenav projected into it. */
+const NXE_SHELL = new InjectionToken('NXE_SHELL');
+/**
+ * `<ng-template nxeSidenavIcon let-item>` inside `nxe-sidenav` draws the icon of every entry that
+ * has an `icon`, given the entry. Use it to map `icon` keys to your own SVGs:
+ *
+ * ```html
+ * <nxe-sidenav [items]="items">
+ *     <ng-template nxeSidenavIcon let-item>
+ *         <svg viewBox="0 0 24 24"><path [attr.d]="paths[item.icon]" /></svg>
+ *     </ng-template>
+ * </nxe-sidenav>
+ * ```
+ */
+class NxeSidenavIconDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeSidenavIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.5", type: NxeSidenavIconDirective, isStandalone: true, selector: "ng-template[nxeSidenavIcon]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeSidenavIconDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[nxeSidenavIcon]' }]
+        }] });
+
+let nextSidenavId = 0;
+/**
+ * `nxe-sidenav` is the application's primary navigation, drawn from a tree of {@link NxeNavItem}.
+ *
+ * ```html
+ * <nxe-sidenav [items]="items" (itemClick)="track($event)">
+ *     <img nxeSidenavHeader src="logo.svg" alt="Nextera" />
+ * </nxe-sidenav>
+ * ```
+ *
+ * **Structure and ARIA.** A `<nav>` landmark holding nested lists, in the pattern the ARIA Authoring
+ * Practices call a *disclosure navigation menu*: a link is `<a aria-current="page">` when it is the
+ * current page; a parent is a `<button aria-expanded aria-controls>` that shows or hides the list
+ * under it; a group heading labels its list (`aria-labelledby`). It is deliberately not
+ * `role="tree"`: a tree makes one node focusable and needs the full tree keyboard contract, where
+ * every link here is an ordinary tab stop and the arrow keys are a shortcut on top of Tab.
+ *
+ * **Keyboard.** Tab and Shift+Tab visit every link and parent. On a link or parent, Arrow Down/Up
+ * move to the next/previous visible entry, Home/End to the first/last. Arrow Right opens a closed
+ * parent, or moves into an open one's first child; Arrow Left closes an open parent, or moves from
+ * a child to its parent (Right and Left swap in a right-to-left document). Enter and Space activate.
+ *
+ * **Current page.** From the router: an entry is current when its URL matches (a prefix, or the
+ * whole URL with `exact`), and when several do, the most specific one alone is `aria-current`
+ * (`/payments/aging` over `/payments`). The parents of the current page open themselves on
+ * navigation; what the user opened or closed by hand holds until the next navigation into it.
+ *
+ * **Collapsed rail.** With the sidenav collapsed (through `nxe-shell` or the `collapsed` model) only
+ * the icons show, each with its label as a native `title` and as visually-hidden text, and a badge
+ * pins to the icon. There is no flyout for children (that waits for the menu): activating a parent
+ * in the rail expands the rail with that parent open.
+ *
+ * Inside an `nxe-shell` the shell owns the collapsed state and the off-canvas drawer; on its own the
+ * sidenav is a plain docked column.
+ */
+class NxeSidenavComponent {
+    router = inject(Router);
+    messages = inject(NxeMessageService);
+    shell = inject(NXE_SHELL, { optional: true });
+    /** The sidenav's own element; `nxe-shell` traps focus in it while the drawer is open. */
+    element = inject(ElementRef).nativeElement;
+    navElement = viewChild.required('nav', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "navElement" }] : /* istanbul ignore next */ []));
+    /** DOM id, which the topbar's toggle button names in `aria-controls`. */
+    id = `nxe-sidenav-${nextSidenavId++}`;
+    /** The navigation tree. */
+    items = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    /** Accessible name of the `<nav>` landmark; "Main navigation" in the active language by default. */
+    label = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /**
+     * Collapsed to the icon rail. Inside an `nxe-shell` the shell's `collapsed` wins and this is
+     * left alone; the sidenav writes the user's choice through the shell instead.
+     */
+    collapsed = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
+    /** Show the collapse/expand button at the foot of a docked sidenav. Default true. */
+    collapsible = input(true, { ...(ngDevMode ? { debugName: "collapsible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** An entry was activated: a link followed, a plain button pressed. Parents do not emit. */
+    itemClick = output();
+    /** Draws the icon of every entry that has an `icon`. */
+    iconTemplate = contentChild(NxeSidenavIconDirective, { ...(ngDevMode ? { debugName: "iconTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
+    navLabel = computed(() => this.label() || this.messages.t('shell.mainNavigation'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "navLabel" }] : /* istanbul ignore next */ []));
+    rail = computed(() => (this.shell ? this.shell.rail() : this.collapsed()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rail" }] : /* istanbul ignore next */ []));
+    drawer = computed(() => !!this.shell && this.shell.mode() === 'drawer', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "drawer" }] : /* istanbul ignore next */ []));
+    drawerOpen = computed(() => !!this.shell && this.shell.drawerShown(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "drawerOpen" }] : /* istanbul ignore next */ []));
+    /** Every entry by id, with its place in the tree and the URL it points at. */
+    nodes = computed(() => {
+        const nodes = new Map();
+        const walk = (items, parentId) => {
+            for (const item of items) {
+                const heading = !!item.heading;
+                nodes.set(item.id, {
+                    item,
+                    parentId,
+                    tree: !heading && !item.disabled && !item.children?.length ? this.treeOf(item) : null,
+                });
+                walk(item.children ?? [], heading ? parentId : item.id);
+            }
+        };
+        walk(this.items(), null);
+        return nodes;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "nodes" }] : /* istanbul ignore next */ []));
+    /** The router's URL, re-read at every navigation so what is current is a signal. */
+    url = toSignal(this.router.events.pipe(filter((event) => event instanceof NavigationEnd), map(() => this.router.url)), { initialValue: this.router.url });
+    /** Id of the one entry that is the current page. */
+    currentId = computed(() => {
+        this.url();
+        let best = null;
+        let bestScore = -1;
+        for (const [id, node] of this.nodes()) {
+            if (!node.tree) {
+                continue;
+            }
+            const exact = !!node.item.exact;
+            const active = this.router.isActive(node.tree, {
+                paths: exact ? 'exact' : 'subset',
+                queryParams: exact ? 'exact' : node.item.queryParams ? 'subset' : 'ignored',
+                fragment: 'ignored',
+                matrixParams: 'ignored',
+            });
+            if (!active) {
+                continue;
+            }
+            const score = (node.tree.root.children[PRIMARY_OUTLET]?.segments.length ?? 0) * 100 +
+                Object.keys(node.item.queryParams ?? {}).length;
+            if (score > bestScore) {
+                best = id;
+                bestScore = score;
+            }
+        }
+        return best;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentId" }] : /* istanbul ignore next */ []));
+    /** Ids of the parents above the current page. They open by themselves. */
+    currentAncestors = computed(() => {
+        const ancestors = new Set();
+        const nodes = this.nodes();
+        const current = this.currentId();
+        let id = current ? (nodes.get(current)?.parentId ?? null) : null;
+        while (id) {
+            ancestors.add(id);
+            id = nodes.get(id)?.parentId ?? null;
+        }
+        return ancestors;
+    }, { ...(ngDevMode ? { debugName: "currentAncestors" } : /* istanbul ignore next */ {}), equal: (a, b) => a.size === b.size && [...a].every((id) => b.has(id)) });
+    /**
+     * What the user opened or closed by hand. Navigating to a new page forgets the choices about
+     * its ancestors, so they open for it, and keeps the rest.
+     */
+    manual = linkedSignal({ ...(ngDevMode ? { debugName: "manual" } : /* istanbul ignore next */ {}), source: () => ({ url: this.url(), ancestors: this.currentAncestors() }),
+        computation: ({ ancestors }, previous) => {
+            const next = new Map(previous?.value);
+            ancestors.forEach((id) => next.delete(id));
+            return next;
+        } });
+    t(key) {
+        return this.messages.t(key);
+    }
+    isCurrent(id) {
+        return this.currentId() === id;
+    }
+    /** The current page is somewhere under this parent. */
+    holdsCurrent(id) {
+        return this.currentAncestors().has(id);
+    }
+    isOpen(id) {
+        return this.manual().get(id) ?? this.currentAncestors().has(id);
+    }
+    hasChildren(item) {
+        return !item.heading && !!item.children?.length;
+    }
+    badgeValue(item) {
+        const badge = item.badge;
+        return typeof badge === 'function' ? badge() : badge;
+    }
+    badgeName(item) {
+        const value = this.badgeValue(item);
+        return item.badgeLabel && value ? `${value} ${item.badgeLabel}` : '';
+    }
+    initial(item) {
+        return item.label.trim().charAt(0).toUpperCase();
+    }
+    /** Toggle a parent; in the rail, expand the rail with the parent open instead. */
+    onParent(item) {
+        if (this.rail()) {
+            this.setCollapsed(false);
+            this.setOpen(item.id, true);
+        }
+        else {
+            this.setOpen(item.id, !this.isOpen(item.id));
+        }
+    }
+    onActivate(item) {
+        this.itemClick.emit(item);
+    }
+    toggleCollapsed() {
+        this.setCollapsed(!this.rail());
+    }
+    closeDrawer() {
+        this.shell?.closeDrawer();
+    }
+    onKeydown(event, item) {
+        if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {
+            return;
+        }
+        const current = event.currentTarget;
+        const links = this.focusables();
+        const at = links.indexOf(current);
+        const rtl = getComputedStyle(current).direction === 'rtl';
+        const key = event.key === 'ArrowRight' ? (rtl ? 'ArrowLeft' : 'ArrowRight') : event.key === 'ArrowLeft' ? (rtl ? 'ArrowRight' : 'ArrowLeft') : event.key;
+        const parent = this.hasChildren(item) && !this.rail();
+        let target;
+        switch (key) {
+            case 'ArrowDown':
+                target = links[at + 1];
+                break;
+            case 'ArrowUp':
+                target = links[at - 1];
+                break;
+            case 'Home':
+                target = links[0];
+                break;
+            case 'End':
+                target = links[links.length - 1];
+                break;
+            case 'ArrowRight':
+                if (!parent) {
+                    return;
+                }
+                if (!this.isOpen(item.id)) {
+                    this.setOpen(item.id, true);
+                }
+                else {
+                    target = links[at + 1];
+                }
+                break;
+            case 'ArrowLeft': {
+                if (parent && this.isOpen(item.id)) {
+                    this.setOpen(item.id, false);
+                    break;
+                }
+                const parentId = this.nodes().get(item.id)?.parentId;
+                target = parentId ? links.find((link) => link.dataset['nxeNav'] === parentId) : undefined;
+                if (!target) {
+                    return;
+                }
+                break;
+            }
+            default:
+                return;
+        }
+        event.preventDefault();
+        target?.focus();
+    }
+    /** Links and parent buttons in document order; the ones inside a closed parent are not rendered. */
+    focusables() {
+        return Array.from(this.navElement().nativeElement.querySelectorAll('a.nxe-nav-link, button.nxe-nav-link'));
+    }
+    setOpen(id, open) {
+        this.manual.update((current) => new Map(current).set(id, open));
+    }
+    setCollapsed(collapsed) {
+        if (this.shell) {
+            this.shell.setCollapsed(collapsed);
+        }
+        else {
+            this.collapsed.set(collapsed);
+        }
+    }
+    treeOf(item) {
+        if (item.route === undefined) {
+            return null;
+        }
+        if (typeof item.route === 'string') {
+            const tree = this.router.parseUrl(item.route);
+            tree.queryParams = { ...tree.queryParams, ...item.queryParams };
+            return tree;
+        }
+        return this.router.createUrlTree(item.route, { queryParams: item.queryParams });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeSidenavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxeSidenavComponent, isStandalone: true, selector: "nxe-sidenav", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange", itemClick: "itemClick" }, host: { properties: { "id": "id", "class.nxe-sidenav-rail": "rail()", "class.nxe-sidenav-drawer": "drawer()", "class.nxe-sidenav-open": "drawerOpen()", "attr.inert": "drawer() && !drawerOpen() ? '' : null", "attr.role": "drawerOpen() ? 'dialog' : null", "attr.aria-modal": "drawerOpen() ? 'true' : null", "attr.aria-label": "drawerOpen() ? navLabel() : null" }, classAttribute: "nxe-sidenav" }, queries: [{ propertyName: "iconTemplate", first: true, predicate: NxeSidenavIconDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "navElement", first: true, predicate: ["nav"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"nxe-sidenav-header\">\n    <ng-content select=\"[nxeSidenavHeader]\" />\n    @if (drawer()) {\n        <nxe-button class=\"nxe-sidenav-close\" stylingMode=\"text\" size=\"sm\" [attr.aria-label]=\"t('shell.closeNavigation')\" (onClick)=\"closeDrawer()\">\n            <svg nxeButtonIcon viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\">\n                <path d=\"M3.7 2.3 8 6.6l4.3-4.3 1.4 1.4L9.4 8l4.3 4.3-1.4 1.4L8 9.4l-4.3 4.3-1.4-1.4L6.6 8 2.3 3.7z\" />\n            </svg>\n        </nxe-button>\n    }\n</div>\n\n<nav #nav class=\"nxe-sidenav-nav\" [attr.aria-label]=\"navLabel()\">\n    <ul class=\"nxe-nav-list nxe-nav-root\">\n        @for (item of items(); track item.id) {\n            <ng-container *ngTemplateOutlet=\"node; context: { $implicit: item, depth: 0 }\" />\n        }\n    </ul>\n</nav>\n\n<div class=\"nxe-sidenav-footer\">\n    <ng-content select=\"[nxeSidenavFooter]\" />\n    @if (!drawer() && collapsible()) {\n        <nxe-button\n            class=\"nxe-sidenav-collapse\"\n            stylingMode=\"text\"\n            size=\"sm\"\n            [attr.aria-label]=\"rail() ? t('shell.expandSidebar') : t('shell.collapseSidebar')\"\n            [attr.title]=\"rail() ? t('shell.expandSidebar') : t('shell.collapseSidebar')\"\n            (onClick)=\"toggleCollapsed()\">\n            <svg nxeButtonIcon class=\"nxe-sidenav-collapse-icon\" viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\">\n                <path d=\"M9.7 3.3 5 8l4.7 4.7 1.1-1.1L7.2 8l3.6-3.6zM3 3h1.5v10H3z\" />\n            </svg>\n        </nxe-button>\n    }\n</div>\n\n<!-- One entry's icon, label and badge; shared by every kind of entry. -->\n<ng-template #body let-item>\n    <span class=\"nxe-nav-lead\" nxeBadgeAnchor>\n        <span class=\"nxe-nav-icon\" aria-hidden=\"true\">\n            @if (item.icon && iconTemplate(); as icon) {\n                <ng-container *ngTemplateOutlet=\"icon; context: { $implicit: item }\" />\n            } @else if (item.icon) {\n                <i class=\"nxe-icon nxe-icon-{{ item.icon }}\"></i>\n            } @else {\n                <span class=\"nxe-nav-glyph\">{{ initial(item) }}</span>\n            }\n        </span>\n        @if (rail()) {\n            <nxe-badge overlay [value]=\"badgeValue(item)\" [family]=\"item.badgeFamily ?? 'danger'\" [label]=\"badgeName(item)\" />\n        }\n    </span>\n    <span class=\"nxe-nav-label\">{{ item.label }}</span>\n    @if (!rail()) {\n        <nxe-badge class=\"nxe-nav-badge\" [value]=\"badgeValue(item)\" [family]=\"item.badgeFamily ?? 'danger'\" [label]=\"badgeName(item)\" />\n    }\n</ng-template>\n\n<ng-template #node let-item let-depth=\"depth\">\n    @if (item.heading) {\n        <li class=\"nxe-nav-group\">\n            <div class=\"nxe-nav-heading\" [id]=\"id + '-' + item.id\" [class.nxe-nav-heading-rail]=\"rail()\">{{ item.label }}</div>\n            <ul class=\"nxe-nav-list\" [attr.aria-labelledby]=\"id + '-' + item.id\">\n                @for (child of item.children; track child.id) {\n                    <ng-container *ngTemplateOutlet=\"node; context: { $implicit: child, depth: depth }\" />\n                }\n            </ul>\n        </li>\n    } @else {\n        <li\n            class=\"nxe-nav-item\"\n            [class.nxe-nav-current]=\"isCurrent(item.id)\"\n            [class.nxe-nav-holds-current]=\"holdsCurrent(item.id)\"\n            [style.--nxe-nav-depth]=\"depth\">\n            @if (item.disabled) {\n                <span class=\"nxe-nav-link nxe-nav-link-disabled\" aria-disabled=\"true\" [attr.title]=\"rail() ? item.label : null\">\n                    <ng-container *ngTemplateOutlet=\"body; context: { $implicit: item }\" />\n                </span>\n            } @else if (hasChildren(item)) {\n                <button\n                    type=\"button\"\n                    class=\"nxe-nav-link nxe-nav-parent\"\n                    [attr.data-nxe-nav]=\"item.id\"\n                    [attr.aria-expanded]=\"!rail() && isOpen(item.id)\"\n                    [attr.aria-controls]=\"!rail() && isOpen(item.id) ? id + '-' + item.id + '-list' : null\"\n                    [attr.title]=\"rail() ? item.label : null\"\n                    (click)=\"onParent(item)\"\n                    (keydown)=\"onKeydown($event, item)\">\n                    <ng-container *ngTemplateOutlet=\"body; context: { $implicit: item }\" />\n                    @if (!rail()) {\n                        <svg class=\"nxe-nav-chevron\" viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\">\n                            <path d=\"m4.2 5.8 3.8 3.8 3.8-3.8 1 1L8 11.6 3.2 6.8z\" />\n                        </svg>\n                    }\n                </button>\n                @if (!rail() && isOpen(item.id)) {\n                    <ul class=\"nxe-nav-list nxe-nav-sub\" [id]=\"id + '-' + item.id + '-list'\">\n                        @for (child of item.children; track child.id) {\n                            <ng-container *ngTemplateOutlet=\"node; context: { $implicit: child, depth: depth + 1 }\" />\n                        }\n                    </ul>\n                }\n            } @else if (item.route !== undefined) {\n                <a\n                    class=\"nxe-nav-link\"\n                    [attr.data-nxe-nav]=\"item.id\"\n                    [routerLink]=\"item.route\"\n                    [queryParams]=\"item.queryParams\"\n                    [attr.aria-current]=\"isCurrent(item.id) ? 'page' : null\"\n                    [attr.title]=\"rail() ? item.label : null\"\n                    (click)=\"onActivate(item)\"\n                    (keydown)=\"onKeydown($event, item)\">\n                    <ng-container *ngTemplateOutlet=\"body; context: { $implicit: item }\" />\n                </a>\n            } @else if (item.href !== undefined) {\n                <a\n                    class=\"nxe-nav-link\"\n                    [attr.data-nxe-nav]=\"item.id\"\n                    [attr.href]=\"item.href\"\n                    [attr.title]=\"rail() ? item.label : null\"\n                    (click)=\"onActivate(item)\"\n                    (keydown)=\"onKeydown($event, item)\">\n                    <ng-container *ngTemplateOutlet=\"body; context: { $implicit: item }\" />\n                </a>\n            } @else {\n                <button\n                    type=\"button\"\n                    class=\"nxe-nav-link\"\n                    [attr.data-nxe-nav]=\"item.id\"\n                    [attr.title]=\"rail() ? item.label : null\"\n                    (click)=\"onActivate(item)\"\n                    (keydown)=\"onKeydown($event, item)\">\n                    <ng-container *ngTemplateOutlet=\"body; context: { $implicit: item }\" />\n                </button>\n            }\n        </li>\n    }\n</ng-template>\n", styles: ["nxe-sidenav.nxe-sidenav{display:flex;flex-direction:column;flex:0 0 auto;box-sizing:border-box;width:var(--nxe-ui-shell-sidenav-width);min-height:0;overflow:hidden;border-inline-end:1px solid var(--nxe-ui-shell-sidenav-border);background-color:var(--nxe-ui-shell-sidenav-bg);color:var(--nxe-ui-shell-sidenav-fg);font-family:var(--nxe-ui-font-family);font-size:var(--nxe-ui-font-size-md);line-height:var(--nxe-ui-line-height-md);transition:width .18s ease}nxe-sidenav.nxe-sidenav.nxe-sidenav-rail{width:var(--nxe-ui-shell-sidenav-collapsed-width)}nxe-sidenav.nxe-sidenav.nxe-sidenav-drawer{position:absolute;inset-block:0;inset-inline-start:0;z-index:30;width:min(var(--nxe-ui-shell-sidenav-width),86%);border-inline-end:0;box-shadow:var(--nxe-ui-shadow-lg);transform:translate(-100%);visibility:hidden;transition:transform .2s ease,visibility 0s linear .2s}nxe-sidenav.nxe-sidenav.nxe-sidenav-drawer:dir(rtl){transform:translate(100%)}nxe-sidenav.nxe-sidenav.nxe-sidenav-drawer.nxe-sidenav-open{transform:none;visibility:visible;transition:transform .2s ease}nxe-sidenav.nxe-sidenav .nxe-sidenav-header{display:flex;align-items:center;justify-content:space-between;flex:0 0 auto;gap:var(--nxe-ui-space-2);padding:var(--nxe-ui-space-3) var(--nxe-ui-space-3) var(--nxe-ui-space-1)}nxe-sidenav.nxe-sidenav .nxe-sidenav-header:empty{display:none}nxe-sidenav.nxe-sidenav .nxe-sidenav-nav{flex:1 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto;padding:var(--nxe-ui-space-2)}nxe-sidenav.nxe-sidenav .nxe-sidenav-footer{display:flex;align-items:center;justify-content:flex-end;flex:0 0 auto;gap:var(--nxe-ui-space-2);padding:var(--nxe-ui-space-2);border-block-start:1px solid var(--nxe-ui-shell-sidenav-border)}nxe-sidenav.nxe-sidenav.nxe-sidenav-rail .nxe-sidenav-footer{justify-content:center}nxe-sidenav.nxe-sidenav .nxe-sidenav-collapse-icon{transition:transform .18s ease}nxe-sidenav.nxe-sidenav .nxe-sidenav-collapse-icon:dir(rtl){transform:scaleX(-1)}nxe-sidenav.nxe-sidenav.nxe-sidenav-rail .nxe-sidenav-collapse-icon{transform:scaleX(-1)}nxe-sidenav.nxe-sidenav.nxe-sidenav-rail .nxe-sidenav-collapse-icon:dir(rtl){transform:none}nxe-sidenav.nxe-sidenav .nxe-nav-list{margin:0;padding:0;list-style:none}nxe-sidenav.nxe-sidenav .nxe-nav-group+.nxe-nav-group,nxe-sidenav.nxe-sidenav .nxe-nav-item+.nxe-nav-group{margin-block-start:var(--nxe-ui-space-3)}nxe-sidenav.nxe-sidenav.nxe-sidenav-rail .nxe-nav-group+.nxe-nav-group,nxe-sidenav.nxe-sidenav.nxe-sidenav-rail .nxe-nav-item+.nxe-nav-group{margin-block-start:var(--nxe-ui-space-2);padding-block-start:var(--nxe-ui-space-2);border-block-start:1px solid var(--nxe-ui-shell-sidenav-border)}nxe-sidenav.nxe-sidenav .nxe-nav-heading{padding:var(--nxe-ui-space-1) var(--nxe-ui-space-3);color:var(--nxe-ui-shell-sidenav-fg-muted);font-size:var(--nxe-ui-font-size-xs);font-weight:var(--nxe-ui-font-weight-semibold);line-height:var(--nxe-ui-line-height-xs);letter-spacing:.04em;text-transform:uppercase}nxe-sidenav.nxe-sidenav .nxe-nav-heading.nxe-nav-heading-rail{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}nxe-sidenav.nxe-sidenav .nxe-nav-link{display:flex;align-items:center;gap:var(--nxe-ui-space-3);box-sizing:border-box;width:100%;min-height:var(--nxe-ui-control-min-height);margin:0;padding-block:var(--nxe-ui-space-1);padding-inline:calc(var(--nxe-ui-space-3) + var(--nxe-nav-depth, 0) * var(--nxe-ui-space-4)) var(--nxe-ui-space-3);border:0;border-radius:var(--nxe-ui-radius-md);background:transparent;color:inherit;font:inherit;text-align:start;text-decoration:none;cursor:pointer}nxe-sidenav.nxe-sidenav .nxe-nav-link:hover{background-color:var(--nxe-ui-shell-sidenav-hover-bg)}nxe-sidenav.nxe-sidenav .nxe-nav-link:focus-visible{outline:2px solid var(--nxe-ui-focus-ring-color);outline-offset:-2px}nxe-sidenav.nxe-sidenav .nxe-nav-link-disabled{opacity:var(--nxe-ui-disabled-opacity);cursor:default}nxe-sidenav.nxe-sidenav .nxe-nav-link-disabled:hover{background:transparent}nxe-sidenav.nxe-sidenav .nxe-nav-current>.nxe-nav-link{background-color:var(--nxe-ui-shell-sidenav-active-bg);color:var(--nxe-ui-shell-sidenav-active-fg);font-weight:var(--nxe-ui-font-weight-semibold)}nxe-sidenav.nxe-sidenav .nxe-nav-holds-current>.nxe-nav-link{font-weight:var(--nxe-ui-font-weight-semibold)}nxe-sidenav.nxe-sidenav .nxe-nav-lead{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:20px;height:20px}nxe-sidenav.nxe-sidenav .nxe-nav-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px}nxe-sidenav.nxe-sidenav .nxe-nav-icon>svg{width:18px;height:18px;fill:currentColor}nxe-sidenav.nxe-sidenav .nxe-nav-glyph{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:var(--nxe-ui-radius-sm);font-size:var(--nxe-ui-font-size-xs);font-weight:var(--nxe-ui-font-weight-semibold);box-shadow:inset 0 0 0 1px currentColor}nxe-sidenav.nxe-sidenav:not(.nxe-sidenav-rail) .nxe-nav-lead:has(.nxe-nav-glyph){display:none}nxe-sidenav.nxe-sidenav .nxe-nav-label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}nxe-sidenav.nxe-sidenav .nxe-nav-badge{flex:0 0 auto}nxe-sidenav.nxe-sidenav .nxe-nav-chevron{flex:0 0 auto;width:16px;height:16px;transition:transform .15s ease}nxe-sidenav.nxe-sidenav .nxe-nav-parent[aria-expanded=true] .nxe-nav-chevron{transform:rotate(180deg)}nxe-sidenav.nxe-sidenav.nxe-sidenav-rail .nxe-nav-link{justify-content:center;padding-inline:0}nxe-sidenav.nxe-sidenav.nxe-sidenav-rail .nxe-nav-label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}nxe-sidenav.nxe-sidenav.nxe-sidenav-rail .nxe-nav-lead{position:relative}@media(prefers-reduced-motion:reduce){nxe-sidenav.nxe-sidenav,nxe-sidenav.nxe-sidenav.nxe-sidenav-drawer,nxe-sidenav.nxe-sidenav.nxe-sidenav-drawer.nxe-sidenav-open,nxe-sidenav.nxe-sidenav .nxe-nav-chevron,nxe-sidenav.nxe-sidenav .nxe-sidenav-collapse-icon{transition-duration:.01ms;transition-delay:0s}}@media(forced-colors:active){nxe-sidenav.nxe-sidenav .nxe-nav-current>.nxe-nav-link{outline:2px solid Highlight;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"] }, { kind: "directive", type: NxeBadgeAnchorDirective, selector: "[nxeBadgeAnchor]" }, { kind: "component", type: NxeButtonComponent, selector: "nxe-button", inputs: ["text", "type", "stylingMode", "size", "loading", "block", "disabled", "validationGroup", "focusStateEnabled", "icon", "height", "width"], outputs: ["onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeSidenavComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nxe-sidenav', imports: [NgTemplateOutlet, RouterLink, NxeBadgeComponent, NxeBadgeAnchorDirective, NxeButtonComponent], host: {
+                        class: 'nxe-sidenav',
+                        '[id]': 'id',
+                        '[class.nxe-sidenav-rail]': 'rail()',
+                        '[class.nxe-sidenav-drawer]': 'drawer()',
+                        '[class.nxe-sidenav-open]': 'drawerOpen()',
+                        '[attr.inert]': "drawer() && !drawerOpen() ? '' : null",
+                        '[attr.role]': "drawerOpen() ? 'dialog' : null",
+                        '[attr.aria-modal]': "drawerOpen() ? 'true' : null",
+                        '[attr.aria-label]': 'drawerOpen() ? navLabel() : null',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"nxe-sidenav-header\">\n    <ng-content select=\"[nxeSidenavHeader]\" />\n    @if (drawer()) {\n        <nxe-button class=\"nxe-sidenav-close\" stylingMode=\"text\" size=\"sm\" [attr.aria-label]=\"t('shell.closeNavigation')\" (onClick)=\"closeDrawer()\">\n            <svg nxeButtonIcon viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\">\n                <path d=\"M3.7 2.3 8 6.6l4.3-4.3 1.4 1.4L9.4 8l4.3 4.3-1.4 1.4L8 9.4l-4.3 4.3-1.4-1.4L6.6 8 2.3 3.7z\" />\n            </svg>\n        </nxe-button>\n    }\n</div>\n\n<nav #nav class=\"nxe-sidenav-nav\" [attr.aria-label]=\"navLabel()\">\n    <ul class=\"nxe-nav-list nxe-nav-root\">\n        @for (item of items(); track item.id) {\n            <ng-container *ngTemplateOutlet=\"node; context: { $implicit: item, depth: 0 }\" />\n        }\n    </ul>\n</nav>\n\n<div class=\"nxe-sidenav-footer\">\n    <ng-content select=\"[nxeSidenavFooter]\" />\n    @if (!drawer() && collapsible()) {\n        <nxe-button\n            class=\"nxe-sidenav-collapse\"\n            stylingMode=\"text\"\n            size=\"sm\"\n            [attr.aria-label]=\"rail() ? t('shell.expandSidebar') : t('shell.collapseSidebar')\"\n            [attr.title]=\"rail() ? t('shell.expandSidebar') : t('shell.collapseSidebar')\"\n            (onClick)=\"toggleCollapsed()\">\n            <svg nxeButtonIcon class=\"nxe-sidenav-collapse-icon\" viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\">\n                <path d=\"M9.7 3.3 5 8l4.7 4.7 1.1-1.1L7.2 8l3.6-3.6zM3 3h1.5v10H3z\" />\n            </svg>\n        </nxe-button>\n    }\n</div>\n\n<!-- One entry's icon, label and badge; shared by every kind of entry. -->\n<ng-template #body let-item>\n    <span class=\"nxe-nav-lead\" nxeBadgeAnchor>\n        <span class=\"nxe-nav-icon\" aria-hidden=\"true\">\n            @if (item.icon && iconTemplate(); as icon) {\n                <ng-container *ngTemplateOutlet=\"icon; context: { $implicit: item }\" />\n            } @else if (item.icon) {\n                <i class=\"nxe-icon nxe-icon-{{ item.icon }}\"></i>\n            } @else {\n                <span class=\"nxe-nav-glyph\">{{ initial(item) }}</span>\n            }\n        </span>\n        @if (rail()) {\n            <nxe-badge overlay [value]=\"badgeValue(item)\" [family]=\"item.badgeFamily ?? 'danger'\" [label]=\"badgeName(item)\" />\n        }\n    </span>\n    <span class=\"nxe-nav-label\">{{ item.label }}</span>\n    @if (!rail()) {\n        <nxe-badge class=\"nxe-nav-badge\" [value]=\"badgeValue(item)\" [family]=\"item.badgeFamily ?? 'danger'\" [label]=\"badgeName(item)\" />\n    }\n</ng-template>\n\n<ng-template #node let-item let-depth=\"depth\">\n    @if (item.heading) {\n        <li class=\"nxe-nav-group\">\n            <div class=\"nxe-nav-heading\" [id]=\"id + '-' + item.id\" [class.nxe-nav-heading-rail]=\"rail()\">{{ item.label }}</div>\n            <ul class=\"nxe-nav-list\" [attr.aria-labelledby]=\"id + '-' + item.id\">\n                @for (child of item.children; track child.id) {\n                    <ng-container *ngTemplateOutlet=\"node; context: { $implicit: child, depth: depth }\" />\n                }\n            </ul>\n        </li>\n    } @else {\n        <li\n            class=\"nxe-nav-item\"\n            [class.nxe-nav-current]=\"isCurrent(item.id)\"\n            [class.nxe-nav-holds-current]=\"holdsCurrent(item.id)\"\n            [style.--nxe-nav-depth]=\"depth\">\n            @if (item.disabled) {\n                <span class=\"nxe-nav-link nxe-nav-link-disabled\" aria-disabled=\"true\" [attr.title]=\"rail() ? item.label : null\">\n                    <ng-container *ngTemplateOutlet=\"body; context: { $implicit: item }\" />\n                </span>\n            } @else if (hasChildren(item)) {\n                <button\n                    type=\"button\"\n                    class=\"nxe-nav-link nxe-nav-parent\"\n                    [attr.data-nxe-nav]=\"item.id\"\n                    [attr.aria-expanded]=\"!rail() && isOpen(item.id)\"\n                    [attr.aria-controls]=\"!rail() && isOpen(item.id) ? id + '-' + item.id + '-list' : null\"\n                    [attr.title]=\"rail() ? item.label : null\"\n                    (click)=\"onParent(item)\"\n                    (keydown)=\"onKeydown($event, item)\">\n                    <ng-container *ngTemplateOutlet=\"body; context: { $implicit: item }\" />\n                    @if (!rail()) {\n                        <svg class=\"nxe-nav-chevron\" viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\">\n                            <path d=\"m4.2 5.8 3.8 3.8 3.8-3.8 1 1L8 11.6 3.2 6.8z\" />\n                        </svg>\n                    }\n                </button>\n                @if (!rail() && isOpen(item.id)) {\n                    <ul class=\"nxe-nav-list nxe-nav-sub\" [id]=\"id + '-' + item.id + '-list'\">\n                        @for (child of item.children; track child.id) {\n                            <ng-container *ngTemplateOutlet=\"node; context: { $implicit: child, depth: depth + 1 }\" />\n                        }\n                    </ul>\n                }\n            } @else if (item.route !== undefined) {\n                <a\n                    class=\"nxe-nav-link\"\n                    [attr.data-nxe-nav]=\"item.id\"\n                    [routerLink]=\"item.route\"\n                    [queryParams]=\"item.queryParams\"\n                    [attr.aria-current]=\"isCurrent(item.id) ? 'page' : null\"\n                    [attr.title]=\"rail() ? item.label : null\"\n                    (click)=\"onActivate(item)\"\n                    (keydown)=\"onKeydown($event, item)\">\n                    <ng-container *ngTemplateOutlet=\"body; context: { $implicit: item }\" />\n                </a>\n            } @else if (item.href !== undefined) {\n                <a\n                    class=\"nxe-nav-link\"\n                    [attr.data-nxe-nav]=\"item.id\"\n                    [attr.href]=\"item.href\"\n                    [attr.title]=\"rail() ? item.label : null\"\n                    (click)=\"onActivate(item)\"\n                    (keydown)=\"onKeydown($event, item)\">\n                    <ng-container *ngTemplateOutlet=\"body; context: { $implicit: item }\" />\n                </a>\n            } @else {\n                <button\n                    type=\"button\"\n                    class=\"nxe-nav-link\"\n                    [attr.data-nxe-nav]=\"item.id\"\n                    [attr.title]=\"rail() ? item.label : null\"\n                    (click)=\"onActivate(item)\"\n                    (keydown)=\"onKeydown($event, item)\">\n                    <ng-container *ngTemplateOutlet=\"body; context: { $implicit: item }\" />\n                </button>\n            }\n        </li>\n    }\n</ng-template>\n", styles: ["nxe-sidenav.nxe-sidenav{display:flex;flex-direction:column;flex:0 0 auto;box-sizing:border-box;width:var(--nxe-ui-shell-sidenav-width);min-height:0;overflow:hidden;border-inline-end:1px solid var(--nxe-ui-shell-sidenav-border);background-color:var(--nxe-ui-shell-sidenav-bg);color:var(--nxe-ui-shell-sidenav-fg);font-family:var(--nxe-ui-font-family);font-size:var(--nxe-ui-font-size-md);line-height:var(--nxe-ui-line-height-md);transition:width .18s ease}nxe-sidenav.nxe-sidenav.nxe-sidenav-rail{width:var(--nxe-ui-shell-sidenav-collapsed-width)}nxe-sidenav.nxe-sidenav.nxe-sidenav-drawer{position:absolute;inset-block:0;inset-inline-start:0;z-index:30;width:min(var(--nxe-ui-shell-sidenav-width),86%);border-inline-end:0;box-shadow:var(--nxe-ui-shadow-lg);transform:translate(-100%);visibility:hidden;transition:transform .2s ease,visibility 0s linear .2s}nxe-sidenav.nxe-sidenav.nxe-sidenav-drawer:dir(rtl){transform:translate(100%)}nxe-sidenav.nxe-sidenav.nxe-sidenav-drawer.nxe-sidenav-open{transform:none;visibility:visible;transition:transform .2s ease}nxe-sidenav.nxe-sidenav .nxe-sidenav-header{display:flex;align-items:center;justify-content:space-between;flex:0 0 auto;gap:var(--nxe-ui-space-2);padding:var(--nxe-ui-space-3) var(--nxe-ui-space-3) var(--nxe-ui-space-1)}nxe-sidenav.nxe-sidenav .nxe-sidenav-header:empty{display:none}nxe-sidenav.nxe-sidenav .nxe-sidenav-nav{flex:1 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto;padding:var(--nxe-ui-space-2)}nxe-sidenav.nxe-sidenav .nxe-sidenav-footer{display:flex;align-items:center;justify-content:flex-end;flex:0 0 auto;gap:var(--nxe-ui-space-2);padding:var(--nxe-ui-space-2);border-block-start:1px solid var(--nxe-ui-shell-sidenav-border)}nxe-sidenav.nxe-sidenav.nxe-sidenav-rail .nxe-sidenav-footer{justify-content:center}nxe-sidenav.nxe-sidenav .nxe-sidenav-collapse-icon{transition:transform .18s ease}nxe-sidenav.nxe-sidenav .nxe-sidenav-collapse-icon:dir(rtl){transform:scaleX(-1)}nxe-sidenav.nxe-sidenav.nxe-sidenav-rail .nxe-sidenav-collapse-icon{transform:scaleX(-1)}nxe-sidenav.nxe-sidenav.nxe-sidenav-rail .nxe-sidenav-collapse-icon:dir(rtl){transform:none}nxe-sidenav.nxe-sidenav .nxe-nav-list{margin:0;padding:0;list-style:none}nxe-sidenav.nxe-sidenav .nxe-nav-group+.nxe-nav-group,nxe-sidenav.nxe-sidenav .nxe-nav-item+.nxe-nav-group{margin-block-start:var(--nxe-ui-space-3)}nxe-sidenav.nxe-sidenav.nxe-sidenav-rail .nxe-nav-group+.nxe-nav-group,nxe-sidenav.nxe-sidenav.nxe-sidenav-rail .nxe-nav-item+.nxe-nav-group{margin-block-start:var(--nxe-ui-space-2);padding-block-start:var(--nxe-ui-space-2);border-block-start:1px solid var(--nxe-ui-shell-sidenav-border)}nxe-sidenav.nxe-sidenav .nxe-nav-heading{padding:var(--nxe-ui-space-1) var(--nxe-ui-space-3);color:var(--nxe-ui-shell-sidenav-fg-muted);font-size:var(--nxe-ui-font-size-xs);font-weight:var(--nxe-ui-font-weight-semibold);line-height:var(--nxe-ui-line-height-xs);letter-spacing:.04em;text-transform:uppercase}nxe-sidenav.nxe-sidenav .nxe-nav-heading.nxe-nav-heading-rail{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}nxe-sidenav.nxe-sidenav .nxe-nav-link{display:flex;align-items:center;gap:var(--nxe-ui-space-3);box-sizing:border-box;width:100%;min-height:var(--nxe-ui-control-min-height);margin:0;padding-block:var(--nxe-ui-space-1);padding-inline:calc(var(--nxe-ui-space-3) + var(--nxe-nav-depth, 0) * var(--nxe-ui-space-4)) var(--nxe-ui-space-3);border:0;border-radius:var(--nxe-ui-radius-md);background:transparent;color:inherit;font:inherit;text-align:start;text-decoration:none;cursor:pointer}nxe-sidenav.nxe-sidenav .nxe-nav-link:hover{background-color:var(--nxe-ui-shell-sidenav-hover-bg)}nxe-sidenav.nxe-sidenav .nxe-nav-link:focus-visible{outline:2px solid var(--nxe-ui-focus-ring-color);outline-offset:-2px}nxe-sidenav.nxe-sidenav .nxe-nav-link-disabled{opacity:var(--nxe-ui-disabled-opacity);cursor:default}nxe-sidenav.nxe-sidenav .nxe-nav-link-disabled:hover{background:transparent}nxe-sidenav.nxe-sidenav .nxe-nav-current>.nxe-nav-link{background-color:var(--nxe-ui-shell-sidenav-active-bg);color:var(--nxe-ui-shell-sidenav-active-fg);font-weight:var(--nxe-ui-font-weight-semibold)}nxe-sidenav.nxe-sidenav .nxe-nav-holds-current>.nxe-nav-link{font-weight:var(--nxe-ui-font-weight-semibold)}nxe-sidenav.nxe-sidenav .nxe-nav-lead{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:20px;height:20px}nxe-sidenav.nxe-sidenav .nxe-nav-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px}nxe-sidenav.nxe-sidenav .nxe-nav-icon>svg{width:18px;height:18px;fill:currentColor}nxe-sidenav.nxe-sidenav .nxe-nav-glyph{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:var(--nxe-ui-radius-sm);font-size:var(--nxe-ui-font-size-xs);font-weight:var(--nxe-ui-font-weight-semibold);box-shadow:inset 0 0 0 1px currentColor}nxe-sidenav.nxe-sidenav:not(.nxe-sidenav-rail) .nxe-nav-lead:has(.nxe-nav-glyph){display:none}nxe-sidenav.nxe-sidenav .nxe-nav-label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}nxe-sidenav.nxe-sidenav .nxe-nav-badge{flex:0 0 auto}nxe-sidenav.nxe-sidenav .nxe-nav-chevron{flex:0 0 auto;width:16px;height:16px;transition:transform .15s ease}nxe-sidenav.nxe-sidenav .nxe-nav-parent[aria-expanded=true] .nxe-nav-chevron{transform:rotate(180deg)}nxe-sidenav.nxe-sidenav.nxe-sidenav-rail .nxe-nav-link{justify-content:center;padding-inline:0}nxe-sidenav.nxe-sidenav.nxe-sidenav-rail .nxe-nav-label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}nxe-sidenav.nxe-sidenav.nxe-sidenav-rail .nxe-nav-lead{position:relative}@media(prefers-reduced-motion:reduce){nxe-sidenav.nxe-sidenav,nxe-sidenav.nxe-sidenav.nxe-sidenav-drawer,nxe-sidenav.nxe-sidenav.nxe-sidenav-drawer.nxe-sidenav-open,nxe-sidenav.nxe-sidenav .nxe-nav-chevron,nxe-sidenav.nxe-sidenav .nxe-sidenav-collapse-icon{transition-duration:.01ms;transition-delay:0s}}@media(forced-colors:active){nxe-sidenav.nxe-sidenav .nxe-nav-current>.nxe-nav-link{outline:2px solid Highlight;outline-offset:-2px}}\n"] }]
+        }], propDecorators: { navElement: [{ type: i0.ViewChild, args: ['nav', { isSignal: true }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], iconTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NxeSidenavIconDirective), { ...{ read: TemplateRef }, isSignal: true }] }] } });
+
+let nextShellId = 0;
+/**
+ * `nxe-shell` is the page frame of an application: an optional banner, the topbar, the sidenav and
+ * the main content.
+ *
+ * ```html
+ * <nxe-shell [(collapsed)]="collapsed">
+ *     <sb-impersonation-banner nxeShellBanner />
+ *     <nxe-topbar>...</nxe-topbar>
+ *     <nxe-sidenav [items]="items" />
+ *     <router-outlet />
+ * </nxe-shell>
+ * ```
+ *
+ * **Slots.** `[nxeShellBanner]` (full width above the topbar, for a banner that must stay on screen),
+ * an `nxe-topbar`, an `nxe-sidenav`, and everything else, which goes in the `<main>` landmark. A
+ * "Skip to content" link, the first tab stop, jumps to that `<main>`.
+ *
+ * **Responsive.** The shell measures its own width. At or above `breakpoint` (960px by default, the
+ * design system's `md`) the sidenav is docked beside the content, expanded or, when `collapsed`, an
+ * icon rail. Below it the sidenav is an off-canvas drawer over the content with a scrim: the
+ * topbar's toggle button opens it, focus is trapped inside while it is open, Esc and a click on the
+ * scrim close it, a navigation closes it, and focus returns to the control that opened it.
+ * Widening the shell past the breakpoint closes the drawer.
+ *
+ * The shell is as tall as `--nxe-shell-height` (default `100dvh`): give it the height of the space
+ * it fills, and the content scrolls inside `<main>`.
+ */
+class NxeShellComponent {
+    host = inject(ElementRef).nativeElement;
+    messages = inject(NxeMessageService);
+    router = inject(Router);
+    injector = inject(Injector);
+    focusTrapFactory = inject(FocusTrapFactory);
+    /** Docked sidenav shows only icons. Two-way: `[(collapsed)]`. */
+    collapsed = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
+    /** The off-canvas drawer is open (only meaningful below the breakpoint). Two-way: `[(drawerOpen)]`. */
+    drawerOpen = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "drawerOpen" }] : /* istanbul ignore next */ []));
+    /** Shell width, in CSS px, from which the sidenav is docked rather than a drawer. */
+    breakpoint = input(960, { ...(ngDevMode ? { debugName: "breakpoint" } : /* istanbul ignore next */ {}), transform: (v) => numberAttribute(v, 960) });
+    /** Skip-link target id; unique per shell. */
+    mainId = `nxe-shell-main-${nextShellId++}`;
+    sidenav = contentChild(NxeSidenavComponent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sidenav" }] : /* istanbul ignore next */ []));
+    /** Own width, kept by a ResizeObserver; the window's until the first measurement. */
+    width = signal(typeof window === 'undefined' ? Number.POSITIVE_INFINITY : window.innerWidth, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    mode = computed(() => (this.width() >= this.breakpoint() ? 'docked' : 'drawer'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    rail = computed(() => this.mode() === 'docked' && this.collapsed(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rail" }] : /* istanbul ignore next */ []));
+    drawerShown = computed(() => this.mode() === 'drawer' && this.drawerOpen(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "drawerShown" }] : /* istanbul ignore next */ []));
+    sidenavId = computed(() => this.sidenav()?.id ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sidenavId" }] : /* istanbul ignore next */ []));
+    trap = null;
+    returnFocusTo = null;
+    constructor() {
+        const destroyRef = inject(DestroyRef);
+        afterNextRender(() => {
+            if (typeof ResizeObserver === 'undefined') {
+                return;
+            }
+            const observer = new ResizeObserver(([entry]) => this.width.set(entry.contentRect.width));
+            observer.observe(this.host);
+            destroyRef.onDestroy(() => observer.disconnect());
+        });
+        // Widening the shell past the breakpoint is the end of the drawer; do not reopen on narrowing.
+        toObservable(this.mode)
+            .pipe(takeUntilDestroyed())
+            .subscribe((mode) => {
+            if (mode === 'docked') {
+                this.drawerOpen.set(false);
+            }
+        });
+        // Going to another page closes the drawer.
+        this.router.events
+            .pipe(filter((event) => event instanceof NavigationEnd), takeUntilDestroyed())
+            .subscribe(() => this.drawerOpen.set(false));
+        // The trap and the focus return follow the drawer however it was opened or closed.
+        toObservable(this.drawerShown)
+            .pipe(takeUntilDestroyed())
+            .subscribe((shown) => (shown ? this.onDrawerShown() : this.onDrawerHidden()));
+        destroyRef.onDestroy(() => this.trap?.destroy());
+    }
+    setCollapsed(collapsed) {
+        this.collapsed.set(collapsed);
+    }
+    /** The hamburger: the drawer below the breakpoint, the dock's collapsed state above it. */
+    toggleNavigation() {
+        if (this.mode() === 'drawer') {
+            if (!this.drawerOpen()) {
+                this.returnFocusTo = document.activeElement;
+            }
+            this.drawerOpen.update((open) => !open);
+        }
+        else {
+            this.collapsed.update((collapsed) => !collapsed);
+        }
+    }
+    closeDrawer() {
+        this.drawerOpen.set(false);
+    }
+    t(key) {
+        return this.messages.t(key);
+    }
+    skipToContent(event) {
+        event.preventDefault();
+        const main = this.host.querySelector(`#${this.mainId}`);
+        main?.focus();
+        main?.scrollIntoView?.({ block: 'start' });
+    }
+    onEscape(event) {
+        if (this.drawerShown() && !event.defaultPrevented) {
+            event.preventDefault();
+            this.closeDrawer();
+        }
+    }
+    onDrawerShown() {
+        this.returnFocusTo ??= document.activeElement;
+        const element = this.sidenav()?.element;
+        if (!element) {
+            return;
+        }
+        this.trap?.destroy();
+        this.trap = this.focusTrapFactory.create(element);
+        // The drawer is still `inert` until this change detection ends; focus after the render.
+        afterNextRender(() => {
+            const current = element.querySelector('[aria-current="page"]');
+            if (current) {
+                current.focus();
+            }
+            else {
+                this.trap?.focusInitialElement();
+            }
+        }, { injector: this.injector });
+    }
+    onDrawerHidden() {
+        this.trap?.destroy();
+        this.trap = null;
+        const target = this.returnFocusTo;
+        this.returnFocusTo = null;
+        if (target?.isConnected) {
+            target.focus();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeShellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxeShellComponent, isStandalone: true, selector: "nxe-shell", inputs: { collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, drawerOpen: { classPropertyName: "drawerOpen", publicName: "drawerOpen", isSignal: true, isRequired: false, transformFunction: null }, breakpoint: { classPropertyName: "breakpoint", publicName: "breakpoint", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange", drawerOpen: "drawerOpenChange" }, host: { listeners: { "keydown.escape": "onEscape($event)" }, properties: { "class.nxe-shell-docked": "mode() === 'docked'", "class.nxe-shell-drawer": "mode() === 'drawer'", "class.nxe-shell-rail": "rail()", "class.nxe-shell-drawer-open": "drawerShown()" }, classAttribute: "nxe-shell" }, providers: [{ provide: NXE_SHELL, useExisting: forwardRef(() => NxeShellComponent) }], queries: [{ propertyName: "sidenav", first: true, predicate: NxeSidenavComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<a class=\"nxe-shell-skip\" [attr.href]=\"'#' + mainId\" (click)=\"skipToContent($event)\">{{ t('shell.skipToContent') }}</a>\n<div class=\"nxe-shell-banner\"><ng-content select=\"[nxeShellBanner]\" /></div>\n<div class=\"nxe-shell-topbar\"><ng-content select=\"nxe-topbar\" /></div>\n<div class=\"nxe-shell-body\">\n    <ng-content select=\"nxe-sidenav\" />\n    <main class=\"nxe-shell-main\" [id]=\"mainId\" tabindex=\"-1\"><ng-content /></main>\n    @if (drawerShown()) {\n        <div class=\"nxe-shell-scrim\" aria-hidden=\"true\" (click)=\"closeDrawer()\"></div>\n    }\n</div>\n", styles: ["nxe-shell.nxe-shell{position:relative;display:flex;flex-direction:column;box-sizing:border-box;height:var(--nxe-shell-height, 100dvh);min-height:0;overflow:hidden;background-color:var(--nxe-ui-surface);color:var(--nxe-ui-text);font-family:var(--nxe-ui-font-family)}nxe-shell.nxe-shell .nxe-shell-banner{flex:0 0 auto}nxe-shell.nxe-shell .nxe-shell-banner:empty{display:none}nxe-shell.nxe-shell .nxe-shell-topbar{flex:0 0 auto}nxe-shell.nxe-shell .nxe-shell-body{display:flex;flex:1 1 auto;min-height:0}nxe-shell.nxe-shell .nxe-shell-main{flex:1 1 auto;min-width:0;overflow:auto}nxe-shell.nxe-shell .nxe-shell-main:focus{outline:none}nxe-shell.nxe-shell .nxe-shell-scrim{position:absolute;inset:0;z-index:20;background-color:var(--nxe-ui-shell-scrim);animation:nxe-shell-fade .2s ease}nxe-shell.nxe-shell .nxe-shell-skip{position:absolute;inset-block-start:var(--nxe-ui-space-2);inset-inline-start:var(--nxe-ui-space-2);z-index:40;padding:var(--nxe-ui-space-2) var(--nxe-ui-space-4);border-radius:var(--nxe-ui-radius-md);background-color:var(--nxe-ui-accent);color:var(--nxe-ui-accent-contrast);font-size:var(--nxe-ui-font-size-md);font-weight:var(--nxe-ui-font-weight-semibold);text-decoration:none;transform:translateY(-300%)}nxe-shell.nxe-shell .nxe-shell-skip:focus{transform:none;outline:2px solid var(--nxe-ui-focus-ring-color);outline-offset:2px}@media(prefers-reduced-motion:reduce){nxe-shell.nxe-shell .nxe-shell-scrim{animation:none}}@keyframes nxe-shell-fade{0%{opacity:0}to{opacity:1}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeShellComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nxe-shell', providers: [{ provide: NXE_SHELL, useExisting: forwardRef(() => NxeShellComponent) }], host: {
+                        class: 'nxe-shell',
+                        '[class.nxe-shell-docked]': "mode() === 'docked'",
+                        '[class.nxe-shell-drawer]': "mode() === 'drawer'",
+                        '[class.nxe-shell-rail]': 'rail()',
+                        '[class.nxe-shell-drawer-open]': 'drawerShown()',
+                        '(keydown.escape)': 'onEscape($event)',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<a class=\"nxe-shell-skip\" [attr.href]=\"'#' + mainId\" (click)=\"skipToContent($event)\">{{ t('shell.skipToContent') }}</a>\n<div class=\"nxe-shell-banner\"><ng-content select=\"[nxeShellBanner]\" /></div>\n<div class=\"nxe-shell-topbar\"><ng-content select=\"nxe-topbar\" /></div>\n<div class=\"nxe-shell-body\">\n    <ng-content select=\"nxe-sidenav\" />\n    <main class=\"nxe-shell-main\" [id]=\"mainId\" tabindex=\"-1\"><ng-content /></main>\n    @if (drawerShown()) {\n        <div class=\"nxe-shell-scrim\" aria-hidden=\"true\" (click)=\"closeDrawer()\"></div>\n    }\n</div>\n", styles: ["nxe-shell.nxe-shell{position:relative;display:flex;flex-direction:column;box-sizing:border-box;height:var(--nxe-shell-height, 100dvh);min-height:0;overflow:hidden;background-color:var(--nxe-ui-surface);color:var(--nxe-ui-text);font-family:var(--nxe-ui-font-family)}nxe-shell.nxe-shell .nxe-shell-banner{flex:0 0 auto}nxe-shell.nxe-shell .nxe-shell-banner:empty{display:none}nxe-shell.nxe-shell .nxe-shell-topbar{flex:0 0 auto}nxe-shell.nxe-shell .nxe-shell-body{display:flex;flex:1 1 auto;min-height:0}nxe-shell.nxe-shell .nxe-shell-main{flex:1 1 auto;min-width:0;overflow:auto}nxe-shell.nxe-shell .nxe-shell-main:focus{outline:none}nxe-shell.nxe-shell .nxe-shell-scrim{position:absolute;inset:0;z-index:20;background-color:var(--nxe-ui-shell-scrim);animation:nxe-shell-fade .2s ease}nxe-shell.nxe-shell .nxe-shell-skip{position:absolute;inset-block-start:var(--nxe-ui-space-2);inset-inline-start:var(--nxe-ui-space-2);z-index:40;padding:var(--nxe-ui-space-2) var(--nxe-ui-space-4);border-radius:var(--nxe-ui-radius-md);background-color:var(--nxe-ui-accent);color:var(--nxe-ui-accent-contrast);font-size:var(--nxe-ui-font-size-md);font-weight:var(--nxe-ui-font-weight-semibold);text-decoration:none;transform:translateY(-300%)}nxe-shell.nxe-shell .nxe-shell-skip:focus{transform:none;outline:2px solid var(--nxe-ui-focus-ring-color);outline-offset:2px}@media(prefers-reduced-motion:reduce){nxe-shell.nxe-shell .nxe-shell-scrim{animation:none}}@keyframes nxe-shell-fade{0%{opacity:0}to{opacity:1}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }], drawerOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawerOpen", required: false }] }, { type: i0.Output, args: ["drawerOpenChange"] }], breakpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "breakpoint", required: false }] }], sidenav: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NxeSidenavComponent), { isSignal: true }] }] } });
+
+/**
+ * `nxe-topbar` is the bar across the top of an `nxe-shell`: a start, a centre and an end slot.
+ *
+ * ```html
+ * <nxe-topbar>
+ *     <img nxeTopbarStart src="logo.svg" alt="Nextera" />
+ *     <sb-search nxeTopbarCenter />
+ *     <ng-container nxeTopbarEnd>
+ *         <sb-company-switcher />
+ *         <sb-notifications />
+ *     </ng-container>
+ * </nxe-topbar>
+ * ```
+ *
+ * The start slot is preceded by a hamburger button: an icon-only `nxe-button` named "Toggle
+ * navigation" with `aria-controls` the sidenav and `aria-expanded` the sidenav's state. Inside an
+ * `nxe-shell` it opens and closes the drawer below the breakpoint and collapses and expands the dock
+ * above it. `menuToggle` also fires, so a topbar used without a shell can drive its own sidenav.
+ * `[nxeTopbarEnd]` elements sit at the inline end of the bar, where a company switcher, language
+ * toggle, notification bell and user menu go.
+ */
+class NxeTopbarComponent {
+    messages = inject(NxeMessageService);
+    shell = inject(NXE_SHELL, { optional: true });
+    /** Show the hamburger button. Default true. */
+    menuButton = input(true, { ...(ngDevMode ? { debugName: "menuButton" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** The hamburger was pressed. */
+    menuToggle = output();
+    label = computed(() => this.messages.t('shell.toggleNavigation'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    controls = computed(() => this.shell?.sidenavId() ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "controls" }] : /* istanbul ignore next */ []));
+    /** Drawer: open. Dock: not collapsed. Without a shell the button says nothing about it. */
+    expanded = computed(() => {
+        if (!this.shell) {
+            return null;
+        }
+        return this.shell.mode() === 'drawer' ? this.shell.drawerShown() : !this.shell.rail();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+    toggle() {
+        this.shell?.toggleNavigation();
+        this.menuToggle.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeTopbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxeTopbarComponent, isStandalone: true, selector: "nxe-topbar", inputs: { menuButton: { classPropertyName: "menuButton", publicName: "menuButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { menuToggle: "menuToggle" }, host: { classAttribute: "nxe-topbar" }, ngImport: i0, template: "<div class=\"nxe-topbar-start\">\n    @if (menuButton()) {\n        <nxe-button\n            class=\"nxe-topbar-menu\"\n            stylingMode=\"text\"\n            [attr.aria-label]=\"label()\"\n            [attr.aria-controls]=\"controls()\"\n            [attr.aria-expanded]=\"expanded()\"\n            (onClick)=\"toggle()\">\n            <svg nxeButtonIcon viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\">\n                <path d=\"M2 3.5h12V5H2zm0 3.75h12v1.5H2zM2 11h12v1.5H2z\" />\n            </svg>\n        </nxe-button>\n    }\n    <ng-content select=\"[nxeTopbarStart]\" />\n</div>\n<div class=\"nxe-topbar-center\"><ng-content select=\"[nxeTopbarCenter]\" /></div>\n<div class=\"nxe-topbar-end\"><ng-content select=\"[nxeTopbarEnd]\" /></div>\n", styles: ["nxe-topbar.nxe-topbar{display:flex;align-items:center;gap:var(--nxe-ui-space-4);box-sizing:border-box;height:var(--nxe-ui-shell-topbar-height);padding-inline:var(--nxe-ui-space-3);border-block-end:1px solid var(--nxe-ui-border);background-color:var(--nxe-ui-shell-topbar-bg);color:var(--nxe-ui-shell-topbar-fg);font-family:var(--nxe-ui-font-family)}nxe-topbar.nxe-topbar .nxe-topbar-start,nxe-topbar.nxe-topbar .nxe-topbar-end{display:flex;align-items:center;flex:0 0 auto;gap:var(--nxe-ui-space-2)}nxe-topbar.nxe-topbar .nxe-topbar-center{display:flex;align-items:center;flex:1 1 auto;min-width:0;gap:var(--nxe-ui-space-2)}nxe-topbar.nxe-topbar .nxe-topbar-end{margin-inline-start:auto}nxe-topbar.nxe-topbar .nxe-topbar-menu{color:inherit}\n"], dependencies: [{ kind: "component", type: NxeButtonComponent, selector: "nxe-button", inputs: ["text", "type", "stylingMode", "size", "loading", "block", "disabled", "validationGroup", "focusStateEnabled", "icon", "height", "width"], outputs: ["onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeTopbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nxe-topbar', imports: [NxeButtonComponent], host: { class: 'nxe-topbar' }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"nxe-topbar-start\">\n    @if (menuButton()) {\n        <nxe-button\n            class=\"nxe-topbar-menu\"\n            stylingMode=\"text\"\n            [attr.aria-label]=\"label()\"\n            [attr.aria-controls]=\"controls()\"\n            [attr.aria-expanded]=\"expanded()\"\n            (onClick)=\"toggle()\">\n            <svg nxeButtonIcon viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\">\n                <path d=\"M2 3.5h12V5H2zm0 3.75h12v1.5H2zM2 11h12v1.5H2z\" />\n            </svg>\n        </nxe-button>\n    }\n    <ng-content select=\"[nxeTopbarStart]\" />\n</div>\n<div class=\"nxe-topbar-center\"><ng-content select=\"[nxeTopbarCenter]\" /></div>\n<div class=\"nxe-topbar-end\"><ng-content select=\"[nxeTopbarEnd]\" /></div>\n", styles: ["nxe-topbar.nxe-topbar{display:flex;align-items:center;gap:var(--nxe-ui-space-4);box-sizing:border-box;height:var(--nxe-ui-shell-topbar-height);padding-inline:var(--nxe-ui-space-3);border-block-end:1px solid var(--nxe-ui-border);background-color:var(--nxe-ui-shell-topbar-bg);color:var(--nxe-ui-shell-topbar-fg);font-family:var(--nxe-ui-font-family)}nxe-topbar.nxe-topbar .nxe-topbar-start,nxe-topbar.nxe-topbar .nxe-topbar-end{display:flex;align-items:center;flex:0 0 auto;gap:var(--nxe-ui-space-2)}nxe-topbar.nxe-topbar .nxe-topbar-center{display:flex;align-items:center;flex:1 1 auto;min-width:0;gap:var(--nxe-ui-space-2)}nxe-topbar.nxe-topbar .nxe-topbar-end{margin-inline-start:auto}nxe-topbar.nxe-topbar .nxe-topbar-menu{color:inherit}\n"] }]
+        }], propDecorators: { menuButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuButton", required: false }] }], menuToggle: [{ type: i0.Output, args: ["menuToggle"] }] } });
+
+// @nexterajs/ui/shell — public API.
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NXE_SHELL, NxeShellComponent, NxeSidenavComponent, NxeSidenavIconDirective, NxeTopbarComponent };
+//# sourceMappingURL=nexterajs-ui-shell.mjs.map