@arsedizioni/ars-utils 22.1.5 → 22.5.2

package/fesm2022/arsedizioni-ars-utils-ui.navigation.mjs

@@ -0,0 +1,1049 @@
+import * as i0 from '@angular/core';
+import { inject, ElementRef, DestroyRef, input, model, booleanAttribute, numberAttribute, output, viewChildren, signal, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { CdkTrapFocus } from '@angular/cdk/a11y';
+import { Directionality } from '@angular/cdk/bidi';
+import { CdkConnectedOverlay } from '@angular/cdk/overlay';
+import * as i1 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i2 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { Router, NavigationEnd } from '@angular/router';
+import { EMPTY, filter, map, distinctUntilChanged } from 'rxjs';
+import { ThemeService } from '@arsedizioni/ars-utils/core';
+import { MediaObserver } from '@arsedizioni/ars-utils/ui';
+
+/**
+ * @file navigation.definitions.ts
+ *
+ * Data model shared by every variant of the Material Design 3 (Expressive)
+ * navigation component: Navigation bar, Navigation rail (collapsed and
+ * expanded) and Navigation drawer (standard and modal).
+ *
+ * Reference: https://m3.material.io/components/navigation-bar/specs
+ *            https://m3.material.io/components/navigation-rail/specs
+ *            https://m3.material.io/components/navigation-drawer/specs
+ */
+/**
+ * Identifier of the synthesized overflow destination. Use it to recognise the
+ * overflow entry inside `itemSelected`.
+ */
+const NAVIGATION_OVERFLOW_ID = '__overflow';
+/**
+ * Default `auto` mapping, aligned with the Material 3 window size classes:
+ * compact windows get the navigation bar, medium and expanded windows get the
+ * collapsed rail, large and extra-large windows get the expanded rail.
+ */
+const DEFAULT_NAVIGATION_AUTO_VARIANTS = {
+    xs: 'bar',
+    sm: 'rail',
+    md: 'rail',
+    lg: 'rail-expanded',
+    xl: 'rail-expanded',
+};
+/** Variants that render labels beside the icon and support sections and dividers. */
+const EXPANDED_NAVIGATION_VARIANTS = [
+    'rail-expanded',
+    'drawer',
+    'modal',
+];
+
+/**
+ * @file navigation-bar.component.ts
+ *
+ * Material Design 3 (Expressive) navigation component.
+ *
+ * A single adaptive component that renders every navigation surface described
+ * by the M3 specs — Navigation bar, collapsed Navigation rail, expanded
+ * Navigation rail, standard Navigation drawer and modal Navigation drawer —
+ * from one destination model.
+ *
+ * Design goals:
+ *  - Zoneless / signal based: no `NgZone`, no `setTimeout`, no manual change detection.
+ *  - `OnPush` + pre-computed render models: the template contains no method calls.
+ *  - Zero-DOM active indicator and state layer (rendered as pseudo-elements).
+ *  - Nested destinations expand inline in the wide variants and open in a single
+ *    shared overlay in the compact ones — one overlay for the whole component,
+ *    not one menu instance per destination.
+ *  - Router integration that degrades gracefully when no `Router` is provided.
+ */
+/** Default sprite geometry, applied when a `NavigationIconSprite` omits a field. */
+const SPRITE_DEFAULT_SIZE = 24;
+class NavigationBarComponent {
+    constructor() {
+        // ── Injected dependencies ──────────────────────────────────────────────────
+        this.media = inject(MediaObserver);
+        // Optional for the same reason `Router` is: the component must still render
+        // inside a bare test bed, where no application theme has been bootstrapped.
+        this.themeService = inject(ThemeService, { optional: true });
+        this.router = inject(Router, { optional: true });
+        this.directionality = inject(Directionality, { optional: true });
+        this.hostRef = inject(ElementRef);
+        this.destroyRef = inject(DestroyRef);
+        // ── Inputs ─────────────────────────────────────────────────────────────────
+        /** Flat list of destinations. Ignored when `sections` is provided. */
+        this.items = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+        /** Grouped destinations. Section headlines and dividers only render in the expanded variants. */
+        this.sections = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "sections" }] : /* istanbul ignore next */ []));
+        /** Rendering variant. `auto` resolves from the active breakpoint through `autoVariants`. */
+        this.variant = input('auto', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+        /** Breakpoint → variant map used when `variant` is `auto`. Missing entries fall back to the M3 defaults. */
+        this.autoVariants = input({}, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "autoVariants" }] : /* istanbul ignore next */ []));
+        /** Two-way bound id of the selected destination. The router, when active, takes precedence. */
+        this.selectedId = model(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedId" }] : /* istanbul ignore next */ []));
+        /**
+         * Two-way bound ids of the expanded parent destinations.
+         * Leave unbound (`undefined`) to let the component manage the expansion state
+         * on its own, seeding it from `NavigationItem.expanded` and auto-opening the
+         * ancestors of the active destination.
+         */
+        this.expandedIds = model(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "expandedIds" }] : /* istanbul ignore next */ []));
+        /** Two-way bound open state of the modal drawer. Ignored by the other variants. */
+        this.open = model(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+        /** Label visibility policy. */
+        this.labelVisibility = input('auto', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "labelVisibility" }] : /* istanbul ignore next */ []));
+        /** Icon / label arrangement inside a destination. */
+        this.itemLayout = input('auto', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "itemLayout" }] : /* istanbul ignore next */ []));
+        /** Vertical alignment of the `top` destination group inside a rail. */
+        this.alignment = input('top', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "alignment" }] : /* istanbul ignore next */ []));
+        /** Edge the rail / drawer is anchored to. Mirrored automatically in RTL. */
+        this.position = input('start', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+        /** Headline rendered above the destinations in the expanded rail and in the drawer. */
+        this.headline = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "headline" }] : /* istanbul ignore next */ []));
+        /** When `true` a leading menu button is rendered; it emits `menuClick`. */
+        this.showMenuButton = input(false, { ...(ngDevMode ? { debugName: "showMenuButton" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Material Symbols ligature used by the menu button. */
+        this.menuIcon = input('menu', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "menuIcon" }] : /* istanbul ignore next */ []));
+        /** Material Symbols ligature used by the expand / collapse chevron. */
+        this.expandIcon = input('expand_more', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "expandIcon" }] : /* istanbul ignore next */ []));
+        /** Where `hideWhenCompact` destinations are collapsed into the overflow menu. */
+        this.overflowMode = input('bar', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "overflowMode" }] : /* istanbul ignore next */ []));
+        /** Material Symbols ligature of the overflow destination. */
+        this.overflowIcon = input('more_vert', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "overflowIcon" }] : /* istanbul ignore next */ []));
+        /** Accessible name and tooltip of the overflow destination, which renders icon-only. */
+        this.overflowLabel = input('More', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "overflowLabel" }] : /* istanbul ignore next */ []));
+        /**
+         * Hard cap on the destinations rendered inline in the compact variants,
+         * applied per anchoring group. The overflow destination counts as one slot.
+         * `0` disables the cap; the M3 specs recommend 3 to 5 for the navigation bar.
+         */
+        this.maxVisibleItems = input(0, { ...(ngDevMode ? { debugName: "maxVisibleItems" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        /** Accessible name of the menu button. */
+        this.menuAriaLabel = input('Menu', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "menuAriaLabel" }] : /* istanbul ignore next */ []));
+        /** Accessible name of the navigation landmark. */
+        this.ariaLabel = input('Navigation', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+        /** When `true` a scrim is rendered behind the modal drawer. */
+        this.scrim = input(true, { ...(ngDevMode ? { debugName: "scrim" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** When `true` the modal drawer closes as soon as a destination is activated. */
+        this.closeOnSelect = input(true, { ...(ngDevMode ? { debugName: "closeOnSelect" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** When `true` the surface gets the M3 elevation-3 shadow. */
+        this.elevated = input(true, { ...(ngDevMode ? { debugName: "elevated" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** When `true` a 1px divider separates the surface from the page content. */
+        this.bordered = input(false, { ...(ngDevMode ? { debugName: "bordered" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** When `true` tooltips are shown for destinations whose label is not visible. */
+        this.tooltips = input(true, { ...(ngDevMode ? { debugName: "tooltips" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** When `true` the selection follows the current router URL. */
+        this.routerSync = input(true, { ...(ngDevMode ? { debugName: "routerSync" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Route used to resolve relative `route` commands. Absolute resolution when omitted. */
+        this.relativeTo = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "relativeTo" }] : /* istanbul ignore next */ []));
+        /** Explicit surface width in pixels for the rail / drawer variants. `0` keeps the spec default. */
+        this.width = input(0, { ...(ngDevMode ? { debugName: "width" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        /** When `true` the whole surface is hidden (animated off-screen) without being destroyed. */
+        this.hidden = input(false, { ...(ngDevMode ? { debugName: "hidden" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        // ── Outputs ────────────────────────────────────────────────────────────────
+        /** Emitted when a destination is activated by the user. */
+        this.itemSelected = output();
+        /** Emitted when the leading menu button is pressed. */
+        this.menuClick = output();
+        // ── View queries ───────────────────────────────────────────────────────────
+        /** Focusable destination elements, in DOM order; used for keyboard roving. */
+        this.itemElements = viewChildren('navItem', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "itemElements" }] : /* istanbul ignore next */ []));
+        /** Focusable entries of the floating submenu panel, in DOM order. */
+        this.panelElements = viewChildren('panelItem', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "panelElements" }] : /* istanbul ignore next */ []));
+        // ── Router state ───────────────────────────────────────────────────────────
+        /** Current router URL, kept in a signal so the template stays zoneless-friendly. */
+        this.routerUrl = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "routerUrl" }] : /* istanbul ignore next */ []));
+        // ── Theme state ────────────────────────────────────────────────────────────
+        /**
+         * Ticks whenever the application theme moves. The emitted value is ignored on
+         * purpose: it is a change notification, not the answer.
+         *
+         * Reads `themeService`, so it MUST stay below the injected dependencies: moved
+         * above them it would read `undefined`, `?? EMPTY` would swallow it and the
+         * theme would silently stop propagating, with nothing to show for it at
+         * compile time.
+         */
+        this.themeChanged = toSignal(this.themeService?.changed ?? EMPTY, { initialValue: undefined });
+        /**
+         * `true` when the dark theme is active; selects the dark frame set of a sprite.
+         *
+         * The answer comes from `getTheme()`, the only one that resolves `auto`
+         * against the OS preference. `getTheme()` already reads a signal for the
+         * explicit modes, so `themeChanged()` is read for the one case that is not
+         * reactive on its own: mode `auto` plus a change of the OS colour scheme,
+         * which leaves the stored mode on `auto` and only travels through `changed`.
+         * Falls back to the light set when no `ThemeService` is provided.
+         */
+        this.isDark = computed(() => {
+            this.themeChanged();
+            return this.themeService?.getTheme() === 'dark';
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isDark" }] : /* istanbul ignore next */ []));
+        // ── Submenu overlay state ──────────────────────────────────────────────────
+        /** Id of the destination whose children are currently shown in the floating panel. */
+        this.popupId = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "popupId" }] : /* istanbul ignore next */ []));
+        /**
+         * Destination whose children are currently shown in the floating panel.
+         *
+         * Derived from the id and NOT stored as an object: the render model is rebuilt
+         * whenever the destinations, the resolved URLs or the theme change, and a
+         * stored object would keep the panel painting the sprite frames of the
+         * previous theme until the panel is closed and reopened.
+         *
+         * The search is recursive because a panel entry can itself own children and
+         * open a panel of its own, and those nested render models are not part of the
+         * top level of `visibleGroups`.
+         *
+         * Reads `visibleGroups`, which is declared further down: safe because
+         * `computed` is lazy and nothing reads this before the first render — the
+         * opposite of `themeChanged` above, which reads its dependency immediately.
+         */
+        this.popupItem = computed(() => {
+            const id = this.popupId();
+            if (id === undefined)
+                return undefined;
+            const find = (list) => {
+                for (const rendered of list) {
+                    if (rendered.item.id === id)
+                        return rendered;
+                    const nested = find(rendered.children);
+                    if (nested)
+                        return nested;
+                }
+                return undefined;
+            };
+            for (const group of this.visibleGroups()) {
+                for (const section of group.sections) {
+                    const hit = find(section.items);
+                    if (hit)
+                        return hit;
+                }
+            }
+            // The destination went away while its panel was open.
+            return undefined;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "popupItem" }] : /* istanbul ignore next */ []));
+        /** Element the floating panel is anchored to. */
+        this.popupAnchor = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "popupAnchor" }] : /* istanbul ignore next */ []));
+        // ── Derived state ──────────────────────────────────────────────────────────
+        /** Sections actually rendered: the `sections` input, or a single implicit section wrapping `items`. */
+        this.resolvedSections = computed(() => {
+            const sections = this.sections();
+            if (sections.length > 0)
+                return sections;
+            return [{ id: '__default', items: this.items() }];
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "resolvedSections" }] : /* istanbul ignore next */ []));
+        /** Every destination, nested ones included, in depth-first order. */
+        this.allItems = computed(() => {
+            const result = [];
+            const walk = (list) => {
+                for (const item of list) {
+                    result.push(item);
+                    if (item.children?.length)
+                        walk(item.children);
+                }
+            };
+            for (const section of this.resolvedSections())
+                walk(section.items);
+            return result;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "allItems" }] : /* istanbul ignore next */ []));
+        /** Map of destination id to the id of its parent destination. */
+        this.parentOf = computed(() => {
+            const result = new Map();
+            const walk = (list, parentId) => {
+                for (const item of list) {
+                    if (parentId !== undefined)
+                        result.set(item.id, parentId);
+                    if (item.children?.length)
+                        walk(item.children, item.id);
+                }
+            };
+            for (const section of this.resolvedSections())
+                walk(section.items);
+            return result;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "parentOf" }] : /* istanbul ignore next */ []));
+        /** The variant to render, resolving `auto` against the active CDK breakpoint. */
+        this.resolvedVariant = computed(() => {
+            const variant = this.variant();
+            if (variant !== 'auto')
+                return variant;
+            const alias = this.media.currentBp();
+            return this.autoVariants()[alias] ?? DEFAULT_NAVIGATION_AUTO_VARIANTS[alias];
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "resolvedVariant" }] : /* istanbul ignore next */ []));
+        /** `true` for the variants that render labels beside icons and support sections. */
+        this.isExpanded = computed(() => EXPANDED_NAVIGATION_VARIANTS.includes(this.resolvedVariant()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isExpanded" }] : /* istanbul ignore next */ []));
+        /** `true` when the surface is the modal drawer. */
+        this.isModal = computed(() => this.resolvedVariant() === 'modal', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isModal" }] : /* istanbul ignore next */ []));
+        /** `true` when the modal drawer is currently open. */
+        this.isOverlayOpen = computed(() => this.isModal() && this.open(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isOverlayOpen" }] : /* istanbul ignore next */ []));
+        /** `true` when the surface must be visually hidden. */
+        this.isHidden = computed(() => this.hidden() || (this.isModal() && !this.open()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isHidden" }] : /* istanbul ignore next */ []));
+        /** Resolved icon / label arrangement. */
+        this.resolvedLayout = computed(() => {
+            if (this.isExpanded())
+                return 'horizontal';
+            const layout = this.itemLayout();
+            if (layout !== 'auto')
+                return layout;
+            // M3 Expressive: the navigation bar switches to a horizontal item layout from 600dp upwards.
+            return this.resolvedVariant() === 'bar' && this.media.currentBp() !== 'xs' ? 'horizontal' : 'vertical';
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "resolvedLayout" }] : /* istanbul ignore next */ []));
+        /** Resolved label visibility; the expanded variants always show labels. */
+        this.resolvedLabelVisibility = computed(() => {
+            if (this.isExpanded())
+                return 'labeled';
+            const visibility = this.labelVisibility();
+            return visibility === 'auto' ? 'labeled' : visibility;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "resolvedLabelVisibility" }] : /* istanbul ignore next */ []));
+        /** `true` when the headline row (menu button, headline text) is rendered. */
+        this.showsHeader = computed(() => this.resolvedVariant() !== 'bar' && (this.showMenuButton() || (this.isExpanded() && !!this.headline())), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showsHeader" }] : /* istanbul ignore next */ []));
+        /**
+         * Geometry of the active indicator:
+         * `compact` wraps the icon only (56x32 pill), `wide` wraps icon and label
+         * together, exactly as described by the M3 Expressive specs.
+         */
+        this.indicatorMode = computed(() => this.isExpanded() || this.resolvedLayout() === 'horizontal' ? 'wide' : 'compact', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "indicatorMode" }] : /* istanbul ignore next */ []));
+        /** Tooltip placement derived from the variant and from the anchoring edge. */
+        this.tooltipPosition = computed(() => {
+            if (this.resolvedVariant() === 'bar')
+                return 'above';
+            return this.position() === 'end' ? 'before' : 'after';
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tooltipPosition" }] : /* istanbul ignore next */ []));
+        /** Inline width override for the rail / drawer, or `undefined` to keep the spec default. */
+        this.widthStyle = computed(() => {
+            const width = this.width();
+            return width > 0 ? `${width}px` : undefined;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "widthStyle" }] : /* istanbul ignore next */ []));
+        /** Map of destination id to resolved URL. Recomputed only when the destinations change. */
+        this.hrefs = computed(() => {
+            const result = new Map();
+            const router = this.router;
+            const relativeTo = this.relativeTo();
+            for (const item of this.allItems()) {
+                if (item.href) {
+                    result.set(item.id, item.href);
+                    continue;
+                }
+                if (item.route !== undefined && router) {
+                    const commands = Array.isArray(item.route) ? [...item.route] : [item.route];
+                    try {
+                        const tree = router.createUrlTree(commands, {
+                            queryParams: item.queryParams,
+                            fragment: item.fragment,
+                            relativeTo,
+                        });
+                        result.set(item.id, router.serializeUrl(tree));
+                    }
+                    catch {
+                        // Invalid route commands: the destination degrades to a plain button.
+                    }
+                }
+            }
+            return result;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hrefs" }] : /* istanbul ignore next */ []));
+        /**
+         * Static render model, rebuilt only when the destinations, the resolved URLs
+         * or the theme change — never when the selection or the expansion state
+         * changes. The theme is a dependency because sprite icons carry one frame set
+         * per theme, and the frames are baked into the inline style of the icon.
+         */
+        this.renderGroups = computed(() => {
+            const hrefs = this.hrefs();
+            const dark = this.isDark();
+            const counter = { value: 0 };
+            const top = [];
+            const bottom = [];
+            for (const section of this.resolvedSections()) {
+                const topItems = [];
+                const bottomItems = [];
+                for (const item of section.items) {
+                    const rendered = NavigationBarComponent.buildRenderItem(item, section, undefined, 0, counter, hrefs, dark);
+                    (item.align === 'bottom' ? bottomItems : topItems).push(rendered);
+                }
+                if (topItems.length > 0)
+                    top.push({ section, items: topItems });
+                if (bottomItems.length > 0)
+                    bottom.push({ section, items: bottomItems });
+            }
+            const groups = [];
+            if (top.length > 0)
+                groups.push({ align: 'top', sections: top });
+            if (bottom.length > 0)
+                groups.push({ align: 'bottom', sections: bottom });
+            return groups;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "renderGroups" }] : /* istanbul ignore next */ []));
+        /** Id of the destination matching the current router URL, using longest-prefix matching. */
+        this.routerActiveId = computed(() => {
+            if (!this.routerSync())
+                return undefined;
+            const url = this.routerUrl();
+            if (!url)
+                return undefined;
+            const path = NavigationBarComponent.pathOf(url);
+            const hrefs = this.hrefs();
+            let best;
+            let bestLength = -1;
+            for (const item of this.allItems()) {
+                if (item.href || item.route === undefined)
+                    continue;
+                const href = hrefs.get(item.id);
+                if (!href)
+                    continue;
+                const target = NavigationBarComponent.pathOf(href);
+                const matches = item.exact
+                    ? path === target
+                    : path === target || path.startsWith(target.endsWith('/') ? target : `${target}/`);
+                if (matches && target.length > bestLength) {
+                    best = item.id;
+                    bestLength = target.length;
+                }
+            }
+            return best;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "routerActiveId" }] : /* istanbul ignore next */ []));
+        /** Id of the currently active destination: router URL first, explicit selection as fallback. */
+        this.activeId = computed(() => this.routerActiveId() ?? this.selectedId(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activeId" }] : /* istanbul ignore next */ []));
+        /**
+         * Expansion state used when `expandedIds` is left unbound: the destinations
+         * flagged `expanded`, plus every ancestor of the active destination.
+         */
+        this.defaultExpandedIds = computed(() => {
+            const result = new Set();
+            for (const item of this.allItems()) {
+                if (item.expanded)
+                    result.add(item.id);
+            }
+            const parents = this.parentOf();
+            const visited = new Set();
+            let current = this.activeId();
+            while (current !== undefined && !visited.has(current)) {
+                visited.add(current);
+                const parent = parents.get(current);
+                if (parent === undefined)
+                    break;
+                result.add(parent);
+                current = parent;
+            }
+            return [...result];
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "defaultExpandedIds" }] : /* istanbul ignore next */ []));
+        /** Ids of the parent destinations currently expanded. */
+        this.expandedSet = computed(() => new Set(this.expandedIds() ?? this.defaultExpandedIds()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "expandedSet" }] : /* istanbul ignore next */ []));
+        /** `true` when the current variant collapses `hideWhenCompact` destinations into the overflow menu. */
+        this.overflowApplies = computed(() => {
+            const mode = this.overflowMode();
+            if (mode === 'never')
+                return false;
+            const variant = this.resolvedVariant();
+            return mode === 'bar' ? variant === 'bar' : variant === 'bar' || variant === 'rail';
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "overflowApplies" }] : /* istanbul ignore next */ []));
+        /**
+         * Render model actually walked by the template: the static model with the
+         * compact-only destinations moved into the overflow menu and the children of
+         * the expanded parents spliced in.
+         */
+        this.visibleGroups = computed(() => {
+            const inline = this.isExpanded();
+            const open = this.expandedSet();
+            const overflow = this.overflowApplies();
+            const max = this.maxVisibleItems();
+            // The bar ignores per-item anchoring, so both groups share a single row and
+            // therefore a single overflow entry.
+            let groups = this.resolvedVariant() === 'bar'
+                ? NavigationBarComponent.mergeGroups(this.renderGroups())
+                : this.renderGroups();
+            if (overflow || max > 0) {
+                groups = groups.map(group => this.applyOverflow(group, overflow, max));
+            }
+            if (!inline)
+                return groups;
+            const flatten = (list) => {
+                let expandedAny = false;
+                const result = [];
+                for (const rendered of list) {
+                    result.push(rendered);
+                    if (rendered.hasChildren && open.has(rendered.item.id)) {
+                        expandedAny = true;
+                        result.push(...flatten(rendered.children));
+                    }
+                }
+                return expandedAny ? result : list;
+            };
+            return groups.map(group => ({
+                align: group.align,
+                sections: group.sections.map(section => ({
+                    section: section.section,
+                    items: flatten(section.items),
+                })),
+            }));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "visibleGroups" }] : /* istanbul ignore next */ []));
+        /**
+         * Ids rendered with the selected styling. It is the active destination when it
+         * is on screen, otherwise every rendered parent hiding it — a collapsed branch
+         * or the overflow entry — so the user still sees where they are.
+         */
+        this.highlightedIds = computed(() => {
+            const active = this.activeId();
+            const result = new Set();
+            if (active === undefined)
+                return result;
+            const rendered = new Set();
+            const parents = [];
+            for (const group of this.visibleGroups()) {
+                for (const section of group.sections) {
+                    for (const item of section.items) {
+                        rendered.add(item.item.id);
+                        if (item.hasChildren)
+                            parents.push(item);
+                    }
+                }
+            }
+            if (rendered.has(active)) {
+                result.add(active);
+                return result;
+            }
+            const contains = (list) => list.some(child => child.item.id === active || contains(child.children));
+            for (const parent of parents) {
+                if (contains(parent.children))
+                    result.add(parent.item.id);
+            }
+            return result;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "highlightedIds" }] : /* istanbul ignore next */ []));
+        /**
+         * Rows of the floating submenu panel. Nested destinations one level down are
+         * flattened under a heading, so the overflow menu can hold parents too.
+         */
+        this.popupEntries = computed(() => {
+            const parent = this.popupItem();
+            if (!parent)
+                return [];
+            const result = [];
+            for (const child of parent.children) {
+                if (child.hasChildren) {
+                    result.push({ key: `${child.item.id}__heading`, label: child.item.label });
+                    for (const grandChild of child.children) {
+                        result.push({ key: grandChild.item.id, render: grandChild });
+                    }
+                }
+                else {
+                    result.push({ key: child.item.id, render: child });
+                }
+            }
+            return result;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "popupEntries" }] : /* istanbul ignore next */ []));
+        /** `true` when the floating submenu panel must be shown. */
+        this.isPopupOpen = computed(() => !this.isExpanded() && !!this.popupItem(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isPopupOpen" }] : /* istanbul ignore next */ []));
+        /** Element the floating submenu panel is anchored to. */
+        this.popupOrigin = computed(() => this.popupAnchor() ?? this.hostRef.nativeElement, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "popupOrigin" }] : /* istanbul ignore next */ []));
+        /** Connected positions of the floating submenu panel, derived from the variant. */
+        this.popupPositions = computed(() => {
+            if (this.resolvedVariant() === 'bar') {
+                return [
+                    { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: -8 },
+                    { originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top', offsetY: 8 },
+                ];
+            }
+            if (this.position() === 'end') {
+                return [
+                    { originX: 'start', originY: 'top', overlayX: 'end', overlayY: 'top', offsetX: -8 },
+                    { originX: 'start', originY: 'bottom', overlayX: 'end', overlayY: 'bottom', offsetX: -8 },
+                ];
+            }
+            return [
+                { originX: 'end', originY: 'top', overlayX: 'start', overlayY: 'top', offsetX: 8 },
+                { originX: 'end', originY: 'bottom', overlayX: 'start', overlayY: 'bottom', offsetX: 8 },
+            ];
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "popupPositions" }] : /* istanbul ignore next */ []));
+        /** `true` when the layout runs right-to-left; used to mirror the arrow keys. */
+        this.isRtl = computed(() => this.directionality?.value === 'rtl', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isRtl" }] : /* istanbul ignore next */ []));
+        const router = this.router;
+        if (router) {
+            this.routerUrl.set(router.url);
+            router.events
+                .pipe(filter((e) => e instanceof NavigationEnd), map(e => e.urlAfterRedirects), distinctUntilChanged(), takeUntilDestroyed(this.destroyRef))
+                .subscribe(url => this.routerUrl.set(url));
+        }
+    }
+    // ── Event handlers ─────────────────────────────────────────────────────────
+    /**
+     * Activates a destination, or expands it when it owns nested destinations.
+     * A parent never navigates: it toggles its group inline in the wide variants
+     * and opens the floating panel in the compact ones.
+     * @param render - The render model of the activated destination.
+     * @param event - The originating mouse or keyboard event.
+     */
+    select(render, event) {
+        const item = render.item;
+        if (item.disabled) {
+            event.preventDefault();
+            return;
+        }
+        if (render.hasChildren) {
+            event.preventDefault();
+            if (this.isExpanded()) {
+                this.toggleExpanded(item.id);
+            }
+            else {
+                this.openPopup(render, event);
+            }
+            return;
+        }
+        // Let the browser handle modified clicks (new tab / new window) natively.
+        const mouse = event;
+        if (render.href && (mouse.ctrlKey || mouse.metaKey || mouse.shiftKey || mouse.button === 1)) {
+            return;
+        }
+        if (render.routed && render.href) {
+            event.preventDefault();
+            void this.router?.navigateByUrl(render.href);
+        }
+        this.selectedId.set(item.id);
+        this.itemSelected.emit({ item, section: render.section, parent: render.parent, index: render.index });
+        this.closePopup();
+        if (this.isModal() && this.closeOnSelect()) {
+            this.open.set(false);
+        }
+    }
+    /**
+     * Emits `menuClick` when the leading menu button is pressed.
+     */
+    onMenuClick() {
+        this.menuClick.emit();
+    }
+    /**
+     * Closes the modal drawer when the scrim is clicked.
+     */
+    onScrimClick() {
+        this.open.set(false);
+    }
+    /**
+     * Handles keyboard interaction: arrow keys move the focus between
+     * destinations, `Home` / `End` jump to the first / last one and `Escape`
+     * closes the floating submenu panel or the modal drawer.
+     *
+     * The same handler serves the surface and the floating panel, and it tells
+     * them apart by `currentTarget`: roving inside an open `role="menu"` must stay
+     * inside it, and a programmatic `focus()` is NOT stopped by the focus trap, so
+     * sharing one element list would send the focus onto the surface behind the
+     * overlay.
+     *
+     * @param event - The originating keyboard event.
+     */
+    onKeydown(event) {
+        if (event.key === 'Escape') {
+            if (this.popupItem()) {
+                event.preventDefault();
+                this.closePopup();
+                return;
+            }
+            if (this.isOverlayOpen()) {
+                event.preventDefault();
+                this.open.set(false);
+                return;
+            }
+        }
+        // The panel is always a vertical list, whatever the variant behind it.
+        const inPanel = event.currentTarget?.classList.contains('ars-nav-submenu') === true;
+        const horizontal = !inPanel && this.resolvedVariant() === 'bar';
+        const forward = horizontal ? (this.isRtl() ? 'ArrowLeft' : 'ArrowRight') : 'ArrowDown';
+        const backward = horizontal ? (this.isRtl() ? 'ArrowRight' : 'ArrowLeft') : 'ArrowUp';
+        let delta = 0;
+        if (event.key === forward)
+            delta = 1;
+        else if (event.key === backward)
+            delta = -1;
+        else if (event.key !== 'Home' && event.key !== 'End')
+            return;
+        const elements = inPanel ? this.panelElements() : this.itemElements();
+        if (elements.length === 0)
+            return;
+        const current = elements.findIndex(ref => ref.nativeElement === event.target);
+        let next;
+        if (event.key === 'Home')
+            next = 0;
+        else if (event.key === 'End')
+            next = elements.length - 1;
+        else if (current < 0)
+            next = 0;
+        else
+            next = (current + delta + elements.length) % elements.length;
+        event.preventDefault();
+        elements[next]?.nativeElement.focus();
+    }
+    // ── Public API ─────────────────────────────────────────────────────────────
+    /**
+     * Expands or collapses the parent destination with the given id.
+     * @param id - Identifier of the parent destination to toggle.
+     */
+    toggleExpanded(id) {
+        const next = new Set(this.expandedSet());
+        if (next.has(id))
+            next.delete(id);
+        else
+            next.add(id);
+        this.expandedIds.set([...next]);
+    }
+    /**
+     * Opens the floating submenu panel of a parent destination.
+     * @param render - The render model of the parent destination.
+     * @param event - The originating event, used to anchor the panel.
+     */
+    openPopup(render, event) {
+        const anchor = event.currentTarget;
+        this.popupAnchor.set(anchor ?? undefined);
+        this.popupId.set(this.popupItem()?.item.id === render.item.id ? undefined : render.item.id);
+    }
+    /**
+     * Closes the floating submenu panel.
+     */
+    closePopup() {
+        this.popupId.set(undefined);
+        // Otherwise the component keeps a reference to a detached element.
+        this.popupAnchor.set(undefined);
+    }
+    /**
+     * Opens the modal drawer. No-op for the other variants.
+     */
+    openDrawer() {
+        this.open.set(true);
+    }
+    /**
+     * Closes the modal drawer. No-op for the other variants.
+     */
+    closeDrawer() {
+        this.open.set(false);
+    }
+    /**
+     * Toggles the modal drawer. No-op for the other variants.
+     */
+    toggleDrawer() {
+        this.open.update(open => !open);
+    }
+    /**
+     * Moves the browser focus to the destination with the given id.
+     * @param id - Identifier of the destination to focus.
+     * @returns `true` when a matching destination was found and focused.
+     */
+    focusItem(id) {
+        for (const ref of this.itemElements()) {
+            if (ref.nativeElement.dataset['navId'] === id) {
+                ref.nativeElement.focus();
+                return true;
+            }
+        }
+        return false;
+    }
+    // ── Helpers ────────────────────────────────────────────────────────────────
+    /**
+     * Moves the compact-only destinations of a group into a synthesized overflow
+     * destination appended at the end of the group.
+     * @param group - The group to process.
+     * @param overflow - `true` when `hideWhenCompact` must be honoured.
+     * @param max - Hard cap on the inline destinations; `0` disables it.
+     * @returns The group with the overflow destination applied.
+     */
+    applyOverflow(group, overflow, max) {
+        const kept = [];
+        const overflowed = [];
+        group.sections.forEach((section, sectionIndex) => {
+            for (const render of section.items) {
+                if (overflow && render.item.hideWhenCompact)
+                    overflowed.push(render);
+                else
+                    kept.push({ sectionIndex, render });
+            }
+        });
+        const slots = kept.length + (overflowed.length > 0 ? 1 : 0);
+        if (max > 0 && slots > max) {
+            const moved = kept.splice(Math.max(1, max - 1));
+            for (const entry of moved)
+                overflowed.push(entry.render);
+        }
+        if (overflowed.length === 0)
+            return group;
+        const sections = group.sections.map((section, sectionIndex) => ({
+            section: section.section,
+            items: kept.filter(entry => entry.sectionIndex === sectionIndex).map(entry => entry.render),
+        }));
+        const last = sections[sections.length - 1];
+        sections[sections.length - 1] = {
+            section: last.section,
+            items: [...last.items, this.buildOverflowItem(overflowed)],
+        };
+        return { align: group.align, sections: sections.filter(section => section.items.length > 0) };
+    }
+    /**
+     * Builds the synthesized, icon-only overflow destination.
+     * @param children - The destinations moved into the overflow menu.
+     * @returns The render model of the overflow destination.
+     */
+    buildOverflowItem(children) {
+        const label = this.overflowLabel();
+        const icon = this.overflowIcon();
+        return {
+            item: { id: NAVIGATION_OVERFLOW_ID, label, icon },
+            index: -1,
+            depth: 0,
+            routed: false,
+            iconOff: icon,
+            iconOn: icon,
+            badgeText: '',
+            hasBadge: false,
+            iconOnly: true,
+            hasChildren: true,
+            children,
+            ariaLabel: label,
+            tooltip: label,
+        };
+    }
+    /**
+     * Merges the `top` and `bottom` groups into a single `top` group, combining
+     * the sections that share an id so `@for` track keys stay unique.
+     * @param groups - The groups to merge.
+     * @returns A single-group array, or the input when there is nothing to merge.
+     */
+    static mergeGroups(groups) {
+        if (groups.length < 2)
+            return groups;
+        const order = [];
+        const byId = new Map();
+        for (const group of groups) {
+            for (const section of group.sections) {
+                const existing = byId.get(section.section.id);
+                if (existing) {
+                    byId.set(section.section.id, {
+                        section: existing.section,
+                        items: [...existing.items, ...section.items],
+                    });
+                }
+                else {
+                    order.push(section.section.id);
+                    byId.set(section.section.id, section);
+                }
+            }
+        }
+        return [{ align: 'top', sections: order.map(id => byId.get(id)) }];
+    }
+    /**
+     * Builds the render model of a destination and, recursively, of its children.
+     * @param item - The source destination.
+     * @param section - The section the destination belongs to.
+     * @param parent - The parent destination, for nested destinations.
+     * @param depth - Nesting level of the destination.
+     * @param counter - Shared counter producing the flat destination index.
+     * @param hrefs - Map of destination id to resolved URL.
+     * @param dark - `true` when the dark theme is active, selecting the dark sprite frames.
+     * @returns The render model of the destination.
+     */
+    static buildRenderItem(item, section, parent, depth, counter, hrefs, dark) {
+        const href = hrefs.get(item.id);
+        // Icon precedence: registered SVG, then sprite sheet, then image, then ligature.
+        const svgOff = item.svgIcon;
+        const svgOn = item.activeSvgIcon ?? item.svgIcon;
+        const spriteStyle = NavigationBarComponent.buildSpriteStyle(item, dark);
+        const imageOff = spriteStyle || svgOff ? undefined : item.imageIcon;
+        const imageOn = spriteStyle || svgOn ? undefined : (item.activeImageIcon ?? item.imageIcon);
+        const index = counter.value++;
+        const children = (item.children ?? []).map(child => NavigationBarComponent.buildRenderItem(child, section, item, depth + 1, counter, hrefs, dark));
+        return {
+            item,
+            section: section.id === '__default' ? undefined : section,
+            parent,
+            index,
+            depth,
+            href,
+            routed: !!href && !item.href,
+            iconOff: svgOff || spriteStyle || imageOff ? undefined : item.icon,
+            iconOn: svgOn || spriteStyle || imageOn ? undefined : (item.activeIcon ?? item.icon),
+            svgOff,
+            svgOn,
+            imageOff,
+            imageOn,
+            spriteStyle,
+            badgeText: NavigationBarComponent.formatBadge(item),
+            hasBadge: !!item.badge,
+            iconOnly: false,
+            hasChildren: children.length > 0,
+            children,
+            ariaLabel: item.ariaLabel ?? item.label,
+            tooltip: item.tooltip ?? item.label,
+        };
+    }
+    /**
+     * Translates a sprite descriptor into the inline custom properties the
+     * stylesheet uses to size the icon and to shift `background-position` per
+     * interaction state.
+     *
+     * The sheet is rescaled through `background-size` instead of being drawn at
+     * its natural size: that is what lets a strip of 26px frames be painted at the
+     * 24px of the surrounding Material icons without the neighbouring frames
+     * bleeding into the box, and it makes the step between two frames exactly the
+     * rendered side.
+     *
+     * @param item - The destination whose sprite must be translated.
+     * @param dark - `true` when the dark theme is active, selecting the `dark` frame set.
+     * @returns The inline style map, or `undefined` when the destination uses no sprite.
+     */
+    static buildSpriteStyle(item, dark) {
+        const sprite = item.sprite;
+        if (!sprite)
+            return undefined;
+        // The inline indices are the light set; `dark` overrides only what differs.
+        const light = sprite;
+        const frames = dark && sprite.dark ? { ...light, ...sprite.dark } : light;
+        const normal = frames.normal ?? 0;
+        const hover = frames.hover ?? normal;
+        const active = frames.active ?? hover;
+        const disabled = frames.disabled ?? normal;
+        const source = sprite.size ?? SPRITE_DEFAULT_SIZE;
+        const size = sprite.renderSize ?? source;
+        const count = NavigationBarComponent.spriteFrameCount(sprite);
+        const vertical = (sprite.direction ?? 'vertical') === 'vertical';
+        return {
+            '--sp-url': `url("${sprite.url}")`,
+            '--sp-size': `${size}px`,
+            '--sp-sheet-x': vertical ? `${size}px` : `${size * count}px`,
+            '--sp-sheet-y': vertical ? `${size * count}px` : `${size}px`,
+            '--sp-step-x': vertical ? '0px' : `${-size}px`,
+            '--sp-step-y': vertical ? `${-size}px` : '0px',
+            '--sp-normal': `${normal}`,
+            '--sp-hover': `${hover}`,
+            '--sp-active': `${active}`,
+            '--sp-disabled': `${disabled}`,
+        };
+    }
+    /**
+     * Number of frames a sprite sheet holds, needed to rescale it.
+     * @param sprite - The sprite descriptor to measure.
+     * @returns The declared frame count, or the highest referenced index plus one.
+     */
+    static spriteFrameCount(sprite) {
+        if (sprite.frames !== undefined && sprite.frames > 0)
+            return sprite.frames;
+        const indices = [
+            sprite.normal, sprite.hover, sprite.active, sprite.disabled,
+            sprite.dark?.normal, sprite.dark?.hover, sprite.dark?.active, sprite.dark?.disabled,
+        ];
+        let highest = 0;
+        for (const index of indices) {
+            if (index !== undefined && index > highest)
+                highest = index;
+        }
+        return highest + 1;
+    }
+    /**
+     * Formats the badge content of a destination.
+     * @param item - The destination whose badge must be formatted.
+     * @returns The badge text, or an empty string for a dot badge / no badge.
+     */
+    static formatBadge(item) {
+        const badge = item.badge;
+        if (!badge || badge.value === undefined)
+            return '';
+        if (typeof badge.value === 'number') {
+            const max = badge.max ?? 999;
+            return badge.value > max ? `${max}+` : `${badge.value}`;
+        }
+        return badge.value;
+    }
+    /**
+     * Strips the query string and the fragment from a URL.
+     * @param url - The URL to normalise.
+     * @returns The path portion of the URL.
+     */
+    static pathOf(url) {
+        const withoutFragment = url.split('#')[0] ?? '';
+        return withoutFragment.split('?')[0] ?? '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: NavigationBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: NavigationBarComponent, isStandalone: true, selector: "navigation-bar", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, autoVariants: { classPropertyName: "autoVariants", publicName: "autoVariants", isSignal: true, isRequired: false, transformFunction: null }, selectedId: { classPropertyName: "selectedId", publicName: "selectedId", isSignal: true, isRequired: false, transformFunction: null }, expandedIds: { classPropertyName: "expandedIds", publicName: "expandedIds", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, labelVisibility: { classPropertyName: "labelVisibility", publicName: "labelVisibility", isSignal: true, isRequired: false, transformFunction: null }, itemLayout: { classPropertyName: "itemLayout", publicName: "itemLayout", isSignal: true, isRequired: false, transformFunction: null }, alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, headline: { classPropertyName: "headline", publicName: "headline", isSignal: true, isRequired: false, transformFunction: null }, showMenuButton: { classPropertyName: "showMenuButton", publicName: "showMenuButton", isSignal: true, isRequired: false, transformFunction: null }, menuIcon: { classPropertyName: "menuIcon", publicName: "menuIcon", isSignal: true, isRequired: false, transformFunction: null }, expandIcon: { classPropertyName: "expandIcon", publicName: "expandIcon", isSignal: true, isRequired: false, transformFunction: null }, overflowMode: { classPropertyName: "overflowMode", publicName: "overflowMode", isSignal: true, isRequired: false, transformFunction: null }, overflowIcon: { classPropertyName: "overflowIcon", publicName: "overflowIcon", isSignal: true, isRequired: false, transformFunction: null }, overflowLabel: { classPropertyName: "overflowLabel", publicName: "overflowLabel", isSignal: true, isRequired: false, transformFunction: null }, maxVisibleItems: { classPropertyName: "maxVisibleItems", publicName: "maxVisibleItems", isSignal: true, isRequired: false, transformFunction: null }, menuAriaLabel: { classPropertyName: "menuAriaLabel", publicName: "menuAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, scrim: { classPropertyName: "scrim", publicName: "scrim", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, elevated: { classPropertyName: "elevated", publicName: "elevated", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, tooltips: { classPropertyName: "tooltips", publicName: "tooltips", isSignal: true, isRequired: false, transformFunction: null }, routerSync: { classPropertyName: "routerSync", publicName: "routerSync", isSignal: true, isRequired: false, transformFunction: null }, relativeTo: { classPropertyName: "relativeTo", publicName: "relativeTo", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedId: "selectedIdChange", expandedIds: "expandedIdsChange", open: "openChange", itemSelected: "itemSelected", menuClick: "menuClick" }, host: { properties: { "attr.data-variant": "resolvedVariant()", "attr.data-layout": "resolvedLayout()", "attr.data-align": "alignment()", "attr.data-position": "position()", "attr.data-labels": "resolvedLabelVisibility()", "attr.data-indicator": "indicatorMode()", "class.ars-navigation--open": "isOverlayOpen()", "class.ars-navigation--elevated": "elevated()", "class.ars-navigation--bordered": "bordered()", "class.ars-navigation--hidden": "isHidden()", "style.--ars-navigation-width": "widthStyle()" }, classAttribute: "ars-navigation" }, viewQueries: [{ propertyName: "itemElements", predicate: ["navItem"], descendants: true, isSignal: true }, { propertyName: "panelElements", predicate: ["panelItem"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (isModal() && scrim()) {\n  <div class=\"ars-nav__scrim\" aria-hidden=\"true\" (click)=\"onScrimClick()\"></div>\n}\n\n<nav class=\"ars-nav\"\n     [attr.aria-label]=\"ariaLabel()\"\n     [attr.role]=\"isModal() ? 'dialog' : undefined\"\n     [attr.aria-modal]=\"isModal() ? 'true' : undefined\"\n     [attr.inert]=\"isHidden() ? '' : undefined\"\n     [cdkTrapFocus]=\"isOverlayOpen()\"\n     [cdkTrapFocusAutoCapture]=\"isOverlayOpen()\"\n     (keydown)=\"onKeydown($event)\">\n\n  @let labels = resolvedLabelVisibility();\n  @let wide = isExpanded();\n  @let active = activeId();\n  @let highlighted = highlightedIds();\n  @let openIds = expandedSet();\n  @let popupOpenId = popupItem()?.item.id;\n\n  @if (showsHeader()) {\n    <div class=\"ars-nav__header\">\n      @if (showMenuButton()) {\n        <button type=\"button\"\n                class=\"ars-nav__menu\"\n                [attr.aria-label]=\"menuAriaLabel()\"\n                (click)=\"onMenuClick()\">\n          <mat-icon aria-hidden=\"true\">{{ menuIcon() }}</mat-icon>\n        </button>\n      }\n      @if (wide) {\n        @if (headline(); as headlineText) {\n          <h2 class=\"ars-nav__headline\">{{ headlineText }}</h2>\n        }\n      }\n    </div>\n  }\n\n  <div class=\"ars-nav__leading\"><ng-content select=\"[navHeader]\" /></div>\n  <div class=\"ars-nav__fab\"><ng-content select=\"[navFab]\" /></div>\n\n  @for (group of visibleGroups(); track group.align) {\n    <div class=\"ars-nav__items\" [class.ars-nav__items--bottom]=\"group.align === 'bottom'\">\n      @for (block of group.sections; track block.section.id) {\n\n        @if (wide && block.section.label) {\n          <h3 class=\"ars-nav__section-headline\">{{ block.section.label }}</h3>\n        }\n\n        @for (r of block.items; track r.item.id) {\n          @let current = r.item.id === active;\n          @let selected = highlighted.has(r.item.id);\n          @let labelVisible = !r.iconOnly && (labels === 'labeled' || (labels === 'selected' && selected));\n          @let branchOpen = r.hasChildren && openIds.has(r.item.id);\n          @let svg = selected ? r.svgOn : r.svgOff;\n          @let image = selected ? r.imageOn : r.imageOff;\n          @let ligature = selected ? r.iconOn : r.iconOff;\n\n          <!--\n            The anchor and the button branches duplicate the inner markup on purpose:\n            an `ng-template` + `ngTemplateOutlet` would allocate one extra embedded\n            view per destination and lose the typed template context.\n          -->\n          @if (r.href && !r.hasChildren) {\n            <a #navItem\n               class=\"ars-nav__item\"\n               [class.ars-nav__item--selected]=\"selected\"\n               [class.ars-nav__item--disabled]=\"r.item.disabled\"\n               [attr.data-depth]=\"r.depth\"\n               [attr.href]=\"r.item.disabled ? undefined : r.href\"\n               [attr.target]=\"r.item.target\"\n               [attr.rel]=\"r.item.target === '_blank' ? 'noopener noreferrer' : undefined\"\n               [attr.aria-label]=\"r.ariaLabel\"\n               [attr.aria-current]=\"current ? 'page' : undefined\"\n               [attr.aria-disabled]=\"r.item.disabled ? 'true' : undefined\"\n               [attr.tabindex]=\"r.item.disabled ? -1 : 0\"\n               [attr.data-nav-id]=\"r.item.id\"\n               [matTooltip]=\"r.tooltip\"\n               [matTooltipDisabled]=\"!tooltips() || labelVisible\"\n               [matTooltipPosition]=\"tooltipPosition()\"\n               (click)=\"select(r, $event)\">\n              <span class=\"ars-nav__icon-box\">\n                @if (svg; as svgName) {\n                  <mat-icon class=\"ars-nav__icon\" [svgIcon]=\"svgName\" aria-hidden=\"true\" />\n                } @else if (r.spriteStyle; as spriteStyle) {\n                  <span class=\"ars-nav__icon ars-nav__icon--sprite\" [style]=\"spriteStyle\" aria-hidden=\"true\"></span>\n                } @else if (image; as imageUrl) {\n                  <img class=\"ars-nav__icon ars-nav__icon--image\" [src]=\"imageUrl\" alt=\"\" loading=\"lazy\" decoding=\"async\" />\n                } @else if (ligature; as ligatureName) {\n                  <mat-icon class=\"ars-nav__icon\" aria-hidden=\"true\">{{ ligatureName }}</mat-icon>\n                }\n                @if (r.hasBadge) {\n                  <span class=\"ars-nav__badge\"\n                        [class.ars-nav__badge--dot]=\"!r.badgeText\"\n                        [style.background-color]=\"r.item.badge?.color\"\n                        [attr.aria-label]=\"r.item.badge?.ariaLabel\">{{ r.badgeText }}</span>\n                }\n              </span>\n              @if (labels !== 'unlabeled' && !r.iconOnly) {\n                <span class=\"ars-nav__label\" [class.ars-nav__label--hidden]=\"!labelVisible\">{{ r.item.label }}</span>\n              }\n              @if (wide && r.item.trailing) {\n                <span class=\"ars-nav__trailing\">{{ r.item.trailing }}</span>\n              }\n            </a>\n          } @else {\n            <button #navItem\n                    type=\"button\"\n                    class=\"ars-nav__item\"\n                    [class.ars-nav__item--selected]=\"selected\"\n                    [class.ars-nav__item--disabled]=\"r.item.disabled\"\n                    [class.ars-nav__item--parent]=\"r.hasChildren\"\n                    [class.ars-nav__item--icon-only]=\"r.iconOnly\"\n                    [attr.data-depth]=\"r.depth\"\n                    [disabled]=\"!!r.item.disabled\"\n                    [attr.aria-label]=\"r.ariaLabel\"\n                    [attr.aria-current]=\"current ? 'page' : undefined\"\n                    [attr.aria-expanded]=\"r.hasChildren ? (wide ? branchOpen : popupOpenId === r.item.id) : undefined\"\n                    [attr.aria-haspopup]=\"r.hasChildren && !wide ? 'menu' : undefined\"\n                    [attr.data-nav-id]=\"r.item.id\"\n                    [matTooltip]=\"r.tooltip\"\n                    [matTooltipDisabled]=\"!tooltips() || labelVisible\"\n                    [matTooltipPosition]=\"tooltipPosition()\"\n                    (click)=\"select(r, $event)\">\n              <span class=\"ars-nav__icon-box\">\n                @if (svg; as svgName) {\n                  <mat-icon class=\"ars-nav__icon\" [svgIcon]=\"svgName\" aria-hidden=\"true\" />\n                } @else if (r.spriteStyle; as spriteStyle) {\n                  <span class=\"ars-nav__icon ars-nav__icon--sprite\" [style]=\"spriteStyle\" aria-hidden=\"true\"></span>\n                } @else if (image; as imageUrl) {\n                  <img class=\"ars-nav__icon ars-nav__icon--image\" [src]=\"imageUrl\" alt=\"\" loading=\"lazy\" decoding=\"async\" />\n                } @else if (ligature; as ligatureName) {\n                  <mat-icon class=\"ars-nav__icon\" aria-hidden=\"true\">{{ ligatureName }}</mat-icon>\n                }\n                @if (r.hasBadge) {\n                  <span class=\"ars-nav__badge\"\n                        [class.ars-nav__badge--dot]=\"!r.badgeText\"\n                        [style.background-color]=\"r.item.badge?.color\"\n                        [attr.aria-label]=\"r.item.badge?.ariaLabel\">{{ r.badgeText }}</span>\n                }\n              </span>\n              @if (labels !== 'unlabeled' && !r.iconOnly) {\n                <span class=\"ars-nav__label\" [class.ars-nav__label--hidden]=\"!labelVisible\">{{ r.item.label }}</span>\n              }\n              @if (wide && r.item.trailing) {\n                <span class=\"ars-nav__trailing\">{{ r.item.trailing }}</span>\n              }\n              @if (r.hasChildren && wide) {\n                <mat-icon class=\"ars-nav__chevron\"\n                          [class.ars-nav__chevron--open]=\"branchOpen\"\n                          aria-hidden=\"true\">{{ expandIcon() }}</mat-icon>\n              }\n            </button>\n          }\n        }\n\n        @if (wide && block.section.divider && !$last) {\n          <hr class=\"ars-nav__divider\" aria-hidden=\"true\" />\n        }\n      }\n    </div>\n  }\n\n  <div class=\"ars-nav__footer\"><ng-content select=\"[navFooter]\" /></div>\n</nav>\n\n<!--\n  One overlay for the whole component: the overflow entry and every parent\n  destination of the compact variants reuse it, instead of allocating a menu\n  instance per destination.\n-->\n<ng-template cdkConnectedOverlay\n             [cdkConnectedOverlayOrigin]=\"popupOrigin()\"\n             [cdkConnectedOverlayOpen]=\"isPopupOpen()\"\n             [cdkConnectedOverlayPositions]=\"popupPositions()\"\n             [cdkConnectedOverlayPush]=\"true\"\n             (overlayOutsideClick)=\"closePopup()\"\n             (detach)=\"closePopup()\">\n  <div class=\"ars-nav-submenu\"\n       role=\"menu\"\n       [attr.aria-label]=\"popupItem()?.ariaLabel\"\n       [cdkTrapFocus]=\"true\"\n       [cdkTrapFocusAutoCapture]=\"true\"\n       (keydown)=\"onKeydown($event)\">\n    @for (entry of popupEntries(); track entry.key) {\n      @if (entry.render; as c) {\n        @let childSelected = c.item.id === activeId();\n        @let childSvg = childSelected ? c.svgOn : c.svgOff;\n        @let childImage = childSelected ? c.imageOn : c.imageOff;\n        @let childLigature = childSelected ? c.iconOn : c.iconOff;\n        @if (c.href) {\n          <a #panelItem\n             class=\"ars-nav-submenu__item\"\n             role=\"menuitem\"\n             [class.ars-nav-submenu__item--selected]=\"childSelected\"\n             [attr.href]=\"c.item.disabled ? undefined : c.href\"\n             [attr.target]=\"c.item.target\"\n             [attr.rel]=\"c.item.target === '_blank' ? 'noopener noreferrer' : undefined\"\n             [attr.aria-disabled]=\"c.item.disabled ? 'true' : undefined\"\n             [attr.aria-current]=\"childSelected ? 'page' : undefined\"\n             (click)=\"select(c, $event)\">\n            @if (childSvg; as svgName) {\n              <mat-icon class=\"ars-nav__icon\" [svgIcon]=\"svgName\" aria-hidden=\"true\" />\n            } @else if (c.spriteStyle; as spriteStyle) {\n              <span class=\"ars-nav__icon ars-nav__icon--sprite\" [style]=\"spriteStyle\" aria-hidden=\"true\"></span>\n            } @else if (childImage; as imageUrl) {\n              <img class=\"ars-nav__icon ars-nav__icon--image\" [src]=\"imageUrl\" alt=\"\" loading=\"lazy\" decoding=\"async\" />\n            } @else if (childLigature; as ligatureName) {\n              <mat-icon class=\"ars-nav__icon\" aria-hidden=\"true\">{{ ligatureName }}</mat-icon>\n            }\n            <span class=\"ars-nav-submenu__label\">{{ c.item.label }}</span>\n            @if (c.badgeText) {\n              <span class=\"ars-nav-submenu__trailing\">{{ c.badgeText }}</span>\n            } @else if (c.item.trailing) {\n              <span class=\"ars-nav-submenu__trailing\">{{ c.item.trailing }}</span>\n            }\n          </a>\n        } @else {\n          <button #panelItem\n                  type=\"button\"\n                  class=\"ars-nav-submenu__item\"\n                  role=\"menuitem\"\n                  [class.ars-nav-submenu__item--selected]=\"childSelected\"\n                  [disabled]=\"!!c.item.disabled\"\n                  [attr.aria-current]=\"childSelected ? 'page' : undefined\"\n                  (click)=\"select(c, $event)\">\n            @if (childSvg; as svgName) {\n              <mat-icon class=\"ars-nav__icon\" [svgIcon]=\"svgName\" aria-hidden=\"true\" />\n            } @else if (c.spriteStyle; as spriteStyle) {\n              <span class=\"ars-nav__icon ars-nav__icon--sprite\" [style]=\"spriteStyle\" aria-hidden=\"true\"></span>\n            } @else if (childImage; as imageUrl) {\n              <img class=\"ars-nav__icon ars-nav__icon--image\" [src]=\"imageUrl\" alt=\"\" loading=\"lazy\" decoding=\"async\" />\n            } @else if (childLigature; as ligatureName) {\n              <mat-icon class=\"ars-nav__icon\" aria-hidden=\"true\">{{ ligatureName }}</mat-icon>\n            }\n            <span class=\"ars-nav-submenu__label\">{{ c.item.label }}</span>\n            @if (c.badgeText) {\n              <span class=\"ars-nav-submenu__trailing\">{{ c.badgeText }}</span>\n            } @else if (c.item.trailing) {\n              <span class=\"ars-nav-submenu__trailing\">{{ c.item.trailing }}</span>\n            }\n          </button>\n        }\n      } @else {\n        <div class=\"ars-nav-submenu__heading\" role=\"presentation\">{{ entry.label }}</div>\n      }\n    }\n  </div>\n</ng-template>\n", styles: [":host{--_container: var(--ars-navigation-container-color, var(--mat-sys-surface-container, #eff1ef));--_indicator: var(--ars-navigation-indicator-color, var(--mat-sys-secondary-container, #cce8e2));--_icon: var(--ars-navigation-icon-color, var(--mat-sys-on-surface-variant, #3f4947));--_icon-active: var(--ars-navigation-active-icon-color, var(--mat-sys-on-secondary-container, #0b1f1c));--_label: var(--ars-navigation-label-color, var(--mat-sys-on-surface-variant, #3f4947));--_label-active: var(--ars-navigation-active-label-color, var(--ars-color-secondary, #4a635f));--_headline: var(--ars-navigation-headline-color, var(--mat-sys-on-surface-variant, #3f4947));--_state: var(--ars-navigation-state-layer-color, var(--mat-sys-on-surface, #191c1b));--_badge: var(--ars-navigation-badge-color, var(--ars-color-error, #ff5449));--_badge-text: var(--ars-navigation-badge-text-color, #ffffff);--_divider: var(--ars-navigation-divider-color, var(--ars-color-divider, #757d87));--_scrim: var(--ars-navigation-scrim-color, rgba(0, 0, 0, .4));--_focus: var(--ars-navigation-focus-color, var(--ars-color-primary, #00a293));--_easing: var(--ars-navigation-easing, cubic-bezier(.2, 0, 0, 1));--_dur-short: var(--ars-navigation-duration-short, .15s);--_dur: var(--ars-navigation-duration, .25s);--_dur-long: var(--ars-navigation-duration-long, .4s);--_icon-hover-scale: var(--ars-navigation-icon-hover-scale, 1.12);--_icon-press-scale: var(--ars-navigation-icon-press-scale, .92);--_hover-opacity: .08;--_focus-opacity: .1;--_press-opacity: .1;--_rtl: 1;display:block;box-sizing:border-box;color:var(--_label);-webkit-tap-highlight-color:transparent}:host-context([dir=rtl]){--_rtl: -1}.ars-nav{box-sizing:border-box;display:flex;position:relative;background:var(--_container);color:var(--_label);overflow:hidden}.ars-nav__items{box-sizing:border-box;display:flex;min-height:0;min-width:0;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--_state) 25%,transparent) transparent}.ars-nav__header{box-sizing:border-box;display:flex;align-items:center;flex:none;gap:12px}.ars-nav__leading,.ars-nav__fab,.ars-nav__footer{box-sizing:border-box;flex:none}.ars-nav__leading:empty,.ars-nav__fab:empty,.ars-nav__footer:empty{display:none}.ars-nav__headline{margin:0;padding:0 16px;font-size:22px;line-height:28px;font-weight:400;color:var(--_headline);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ars-nav__section-headline{margin:0;padding:18px 16px 8px;font-size:14px;line-height:20px;font-weight:500;letter-spacing:.1px;color:var(--_headline);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ars-nav__divider{flex:none;margin:8px 16px;border:0;border-top:1px solid var(--_divider);opacity:.4}.ars-nav__menu{display:inline-flex;align-items:center;justify-content:center;flex:none;width:48px;height:48px;margin:0;padding:0;border:0;border-radius:50%;background:transparent;color:var(--_icon);cursor:pointer;transition:background-color var(--_dur-short) var(--_easing)}.ars-nav__menu:hover{background:color-mix(in srgb,var(--_state) 8%,transparent)}.ars-nav__menu:focus-visible{outline:3px solid var(--_focus);outline-offset:2px}.ars-nav__item{box-sizing:border-box;position:relative;isolation:isolate;display:flex;align-items:center;flex:none;margin:0;border:0;background:transparent;color:var(--_label);font:inherit;text-align:start;text-decoration:none;cursor:pointer;-webkit-user-select:none;user-select:none;appearance:none;-webkit-tap-highlight-color:transparent}.ars-nav__item:focus-visible{outline:3px solid var(--_focus);outline-offset:-3px;border-radius:16px}.ars-nav__item--disabled,.ars-nav__item:disabled{cursor:default;opacity:.38;pointer-events:none}.ars-nav__icon-box{box-sizing:border-box;position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;width:24px;height:24px;color:var(--_icon);transition:color var(--_dur) var(--_easing)}.ars-nav__icon{position:relative;z-index:1;width:24px;height:24px;font-size:24px;line-height:24px;font-variation-settings:\"FILL\" 0;transform:scale(1);transform-origin:center;transition:font-variation-settings var(--_dur, .25s) var(--_easing, cubic-bezier(.2, 0, 0, 1)),transform var(--_dur, .25s) var(--_easing, cubic-bezier(.2, 0, 0, 1))}.ars-nav__label{position:relative;z-index:1;min-width:0;font:var(--mat-sys-label-large, 500 14px/20px Roboto, sans-serif);letter-spacing:var(--mat-sys-label-large-tracking, .1px);color:var(--_label);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color var(--_dur) var(--_easing),opacity var(--_dur) var(--_easing),max-height var(--_dur) var(--_easing),margin var(--_dur) var(--_easing)}.ars-nav__label--hidden{opacity:0;max-height:0;margin:0!important;pointer-events:none}.ars-nav__trailing{position:relative;z-index:1;margin-inline-start:auto;padding-inline-start:12px;font-size:11px;line-height:16px;font-weight:500;letter-spacing:.5px;color:var(--_label);white-space:nowrap}.ars-nav__badge{position:absolute;z-index:2;top:-6px;inset-inline-start:12px;box-sizing:border-box;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--_badge);color:var(--_badge-text);font-size:11px;line-height:16px;font-weight:500;letter-spacing:.5px;text-align:center;white-space:nowrap}.ars-nav__badge--dot{top:-1px;inset-inline-start:16px;width:6px;min-width:6px;height:6px;padding:0;border-radius:3px}:host([data-indicator=compact]) .ars-nav__icon-box:before{content:\"\";position:absolute;z-index:0;background:var(--_indicator);opacity:0;transform:scaleX(.55);transition:opacity var(--_dur) var(--_easing),transform var(--_dur-long) var(--_easing);pointer-events:none;inset:50% auto auto 50%;width:56px;height:32px;margin:-16px 0 0 -28px;border-radius:16px}:host([data-indicator=compact]) .ars-nav__icon-box:after{content:\"\";position:absolute;z-index:0;background:var(--_state);opacity:0;transition:opacity var(--_dur-short) var(--_easing);pointer-events:none;inset:50% auto auto 50%;width:56px;height:32px;margin:-16px 0 0 -28px;border-radius:16px}:host([data-indicator=compact]) .ars-nav__item--selected .ars-nav__icon-box:before{opacity:1;transform:scaleX(1)}:host([data-indicator=compact]) .ars-nav__item:hover .ars-nav__icon-box:after{opacity:var(--_hover-opacity)}:host([data-indicator=compact]) .ars-nav__item:focus-visible .ars-nav__icon-box:after{opacity:var(--_focus-opacity)}:host([data-indicator=compact]) .ars-nav__item:active .ars-nav__icon-box:after{opacity:var(--_press-opacity)}:host([data-indicator=wide]) .ars-nav__item:before{content:\"\";position:absolute;z-index:0;background:var(--_indicator);opacity:0;transform:scaleX(.55);transition:opacity var(--_dur) var(--_easing),transform var(--_dur-long) var(--_easing);pointer-events:none;inset:0;border-radius:28px}:host([data-indicator=wide]) .ars-nav__item:after{content:\"\";position:absolute;z-index:0;background:var(--_state);opacity:0;transition:opacity var(--_dur-short) var(--_easing);pointer-events:none;inset:0;border-radius:28px}:host([data-indicator=wide]) .ars-nav__item--selected:before{opacity:1;transform:scaleX(1)}:host([data-indicator=wide]) .ars-nav__item:hover:after{opacity:var(--_hover-opacity)}:host([data-indicator=wide]) .ars-nav__item:focus-visible:after{opacity:var(--_focus-opacity)}:host([data-indicator=wide]) .ars-nav__item:active:after{opacity:var(--_press-opacity)}.ars-nav__item--selected .ars-nav__icon-box{color:var(--_icon-active)}.ars-nav__item--selected .ars-nav__icon{font-variation-settings:\"FILL\" 1}.ars-nav__item--selected .ars-nav__label{color:var(--_label-active)}:host([data-layout=vertical]) .ars-nav__item{flex-direction:column;justify-content:center}:host([data-layout=vertical]) .ars-nav__label{font:var(--mat-sys-label-medium, 500 12px/16px Roboto, sans-serif);letter-spacing:var(--mat-sys-label-medium-tracking, .5px);margin-top:6px;max-width:100%;text-align:center}:host([data-layout=horizontal]) .ars-nav__item{flex-direction:row;justify-content:flex-start}:host([data-layout=horizontal]) .ars-nav__label{margin-inline-start:4px}:host([data-variant=bar]){width:100%}:host([data-variant=bar]) .ars-nav{flex-direction:row;align-items:center;justify-content:space-around;width:100%;height:var(--ars-navigation-bar-height, 64px);padding:0 8px}:host([data-variant=bar]) .ars-nav__header,:host([data-variant=bar]) .ars-nav__leading,:host([data-variant=bar]) .ars-nav__fab,:host([data-variant=bar]) .ars-nav__footer,:host([data-variant=bar]) .ars-nav__section-headline,:host([data-variant=bar]) .ars-nav__divider,:host([data-variant=bar]) .ars-nav__trailing{display:none}:host([data-variant=bar]) .ars-nav__items{display:contents}:host([data-variant=bar]) .ars-nav__item{flex:1 1 0;min-width:0;height:100%}:host([data-variant=bar][data-layout=horizontal]) .ars-nav__item{justify-content:center;max-width:var(--ars-navigation-item-max-width, 168px);padding:0 12px}:host([data-variant=bar][data-indicator=wide]) .ars-nav__item:before,:host([data-variant=bar][data-indicator=wide]) .ars-nav__item:after{inset:12px 0}:host([data-variant=rail]){height:100%}:host([data-variant=rail]) .ars-nav{flex-direction:column;align-items:center;width:var(--ars-navigation-width, 96px);height:100%;padding:var(--ars-navigation-rail-top-padding, 20px) 0 8px}:host([data-variant=rail]) .ars-nav__header{flex-direction:column;margin-bottom:40px}:host([data-variant=rail]) .ars-nav__headline,:host([data-variant=rail]) .ars-nav__section-headline,:host([data-variant=rail]) .ars-nav__divider,:host([data-variant=rail]) .ars-nav__trailing{display:none}:host([data-variant=rail]) .ars-nav__fab{margin-bottom:40px}:host([data-variant=rail]) .ars-nav__items{flex:1 1 auto;flex-direction:column;align-items:center;gap:4px;width:100%;overflow-y:auto;overscroll-behavior:contain}:host([data-variant=rail]) .ars-nav__item{justify-content:center;width:100%;height:64px;padding:0 4px}:host([data-variant=rail-expanded]),:host([data-variant=drawer]),:host([data-variant=modal]){height:100%}:host([data-variant=rail-expanded]) .ars-nav,:host([data-variant=drawer]) .ars-nav,:host([data-variant=modal]) .ars-nav{flex-direction:column;align-items:stretch;height:100%;padding:12px 0}:host([data-variant=rail-expanded]) .ars-nav__header,:host([data-variant=drawer]) .ars-nav__header,:host([data-variant=modal]) .ars-nav__header{padding:4px 8px 8px}:host([data-variant=rail-expanded]) .ars-nav__items,:host([data-variant=drawer]) .ars-nav__items,:host([data-variant=modal]) .ars-nav__items{flex:1 1 auto;flex-direction:column;gap:4px;overflow-y:auto;overscroll-behavior:contain}:host([data-variant=rail-expanded]) .ars-nav__item,:host([data-variant=drawer]) .ars-nav__item,:host([data-variant=modal]) .ars-nav__item{height:56px;padding-block:0;padding-inline:calc(24px + var(--_depth-pad, 0px)) 24px;margin:0 var(--ars-navigation-item-inset, 20px)}:host([data-variant=rail-expanded]) .ars-nav__icon-box,:host([data-variant=drawer]) .ars-nav__icon-box,:host([data-variant=modal]) .ars-nav__icon-box{margin-inline-end:12px}:host([data-variant=rail-expanded]) .ars-nav__label,:host([data-variant=drawer]) .ars-nav__label,:host([data-variant=modal]) .ars-nav__label{flex:1 1 auto;margin-inline-start:0}:host([data-variant=rail-expanded]) .ars-nav{width:var(--ars-navigation-width, 220px)}:host([data-variant=drawer]) .ars-nav,:host([data-variant=modal]) .ars-nav{width:var(--ars-navigation-width, 360px)}:host([data-variant=modal]){position:fixed;inset:0;z-index:var(--ars-navigation-z-index, 1000);height:auto;pointer-events:none}:host([data-variant=modal]) .ars-nav{position:absolute;inset-block:0;inset-inline-start:0;pointer-events:auto;border-start-end-radius:16px;border-end-end-radius:16px;translate:calc(var(--_shift, 0%) * var(--_rtl)) 0;transition:translate var(--_dur-long) var(--_easing),visibility var(--_dur-long) var(--_easing)}:host([data-variant=modal][data-position=end]) .ars-nav{inset-inline-start:auto;inset-inline-end:0;border-radius:0;border-start-start-radius:16px;border-end-start-radius:16px}:host([data-variant=modal].ars-navigation--hidden) .ars-nav__scrim{opacity:0;pointer-events:none}:host([data-variant=modal].ars-navigation--hidden) .ars-nav{--_shift: -100%;visibility:hidden}:host([data-variant=modal][data-position=end].ars-navigation--hidden) .ars-nav{--_shift: 100%}.ars-nav__scrim{position:absolute;inset:0;background:var(--_scrim);opacity:1;pointer-events:auto;transition:opacity var(--_dur-long) var(--_easing)}:host(:not([data-variant=bar])) .ars-nav__items--bottom{flex:0 0 auto;margin-block-start:auto;overflow:visible}:host([data-align=center]) .ars-nav__items:not(.ars-nav__items--bottom){justify-content:safe center}:host([data-align=bottom]) .ars-nav__items:not(.ars-nav__items--bottom){justify-content:safe flex-end}:host(.ars-navigation--elevated) .ars-nav{box-shadow:0 1px 3px #0000004d,0 4px 8px 3px #00000026}:host(.ars-navigation--hidden):not([data-variant=modal]){display:none}.ars-nav__icon--image{object-fit:contain}.ars-nav__icon--sprite{display:inline-block;flex:none;width:var(--sp-size, 24px);height:var(--sp-size, 24px);background-image:var(--sp-url);background-repeat:no-repeat;background-size:var(--sp-sheet-x, auto) var(--sp-sheet-y, auto);background-position:calc(var(--sp-frame, var(--sp-normal, 0)) * var(--sp-step-x, 0px)) calc(var(--sp-frame, var(--sp-normal, 0)) * var(--sp-step-y, 0px))}.ars-nav__item:where(:hover,:focus-visible) .ars-nav__icon--sprite,.ars-nav-submenu__item:where(:hover,:focus-visible) .ars-nav__icon--sprite{--sp-frame: var(--sp-hover)}.ars-nav__item--selected .ars-nav__icon--sprite,.ars-nav-submenu__item--selected .ars-nav__icon--sprite{--sp-frame: var(--sp-active)}.ars-nav__item--disabled .ars-nav__icon--sprite,.ars-nav__item:where(:disabled) .ars-nav__icon--sprite,.ars-nav-submenu__item:where(:disabled,[aria-disabled=true]) .ars-nav__icon--sprite{--sp-frame: var(--sp-disabled)}.ars-nav__item:where(:hover,:focus-visible) .ars-nav__icon,.ars-nav-submenu__item:where(:hover,:focus-visible) .ars-nav__icon{transform:scale(var(--_icon-hover-scale, 1.12))}.ars-nav__item--selected .ars-nav__icon,.ars-nav-submenu__item--selected .ars-nav__icon{transform:scale(1)}.ars-nav__item:where(:active) .ars-nav__icon,.ars-nav-submenu__item:where(:active) .ars-nav__icon{transform:scale(var(--_icon-press-scale, .92));transition-duration:var(--_dur-short, .15s)}:host([data-variant=bar]) .ars-nav__item--icon-only{flex:0 0 auto;min-width:56px;max-width:72px}.ars-nav__chevron{position:relative;z-index:1;flex:none;margin-inline-start:8px;width:20px;height:20px;font-size:20px;line-height:20px;color:var(--_icon);rotate:0deg;transition:rotate var(--_dur) var(--_easing)}.ars-nav__chevron--open{rotate:180deg}.ars-nav__item[data-depth=\"1\"]{--_depth-pad: 24px}.ars-nav__item[data-depth=\"2\"]{--_depth-pad: 48px}.ars-nav__item[data-depth=\"3\"]{--_depth-pad: 72px}.ars-nav-submenu{--_easing: var(--ars-navigation-easing, cubic-bezier(.2, 0, 0, 1));--_dur-short: var(--ars-navigation-duration-short, .15s);--_dur: var(--ars-navigation-duration, .25s);--_dur-long: var(--ars-navigation-duration-long, .4s);--_icon-hover-scale: var(--ars-navigation-icon-hover-scale, 1.12);--_icon-press-scale: var(--ars-navigation-icon-press-scale, .92);--_state: var(--ars-navigation-state-layer-color, var(--mat-sys-on-surface, #191c1b));--_indicator: var(--ars-navigation-indicator-color, var(--mat-sys-secondary-container, #cce8e2));box-sizing:border-box;display:flex;flex-direction:column;gap:2px;min-width:200px;max-width:320px;max-height:60vh;padding:8px;border-radius:12px;background:var(--ars-navigation-menu-container-color, var(--mat-sys-surface-container-high, #e7e9e8));color:var(--ars-navigation-label-color, var(--mat-sys-on-surface, #191c1b));box-shadow:0 1px 2px #0000004d,0 2px 6px 2px #00000026;overflow-y:auto;overscroll-behavior:contain}.ars-nav-submenu__item{box-sizing:border-box;display:flex;align-items:center;gap:12px;flex:none;min-height:48px;margin:0;padding:0 12px;border:0;border-radius:8px;background:transparent;color:inherit;font:inherit;text-align:start;text-decoration:none;cursor:pointer;appearance:none}.ars-nav-submenu__item:hover{background:color-mix(in srgb,currentColor 8%,transparent)}.ars-nav-submenu__item:focus-visible{outline:3px solid var(--ars-navigation-focus-color, var(--ars-color-primary, #00a293));outline-offset:-3px}.ars-nav-submenu__item--selected{background:var(--_indicator);color:var(--ars-navigation-active-icon-color, var(--mat-sys-on-secondary-container, #0b1f1c))}.ars-nav-submenu__item--selected:where(:hover,:focus-visible){background:color-mix(in srgb,var(--_state) 8%,var(--_indicator))}.ars-nav-submenu__item:disabled,.ars-nav-submenu__item[aria-disabled=true]{opacity:.38;pointer-events:none}.ars-nav-submenu__heading{padding:12px 12px 4px;font-size:11px;line-height:16px;font-weight:500;letter-spacing:.5px;text-transform:uppercase;opacity:.7}.ars-nav-submenu__heading:first-child{padding-top:4px}.ars-nav-submenu__label{flex:1 1 auto;min-width:0;font-size:14px;line-height:20px;font-weight:500;letter-spacing:.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ars-nav-submenu__trailing{flex:none;font-size:11px;line-height:16px;font-weight:500;letter-spacing:.5px;opacity:.8}@media(prefers-reduced-motion:reduce){:host{--_dur-short: 0ms;--_dur: 0ms;--_dur-long: 0ms;--_icon-hover-scale: 1;--_icon-press-scale: 1}:host([data-indicator=wide]) .ars-nav__item:before,:host([data-indicator=compact]) .ars-nav__icon-box:before{transform:none}.ars-nav-submenu{--_dur-short: 0ms;--_dur: 0ms;--_dur-long: 0ms;--_icon-hover-scale: 1;--_icon-press-scale: 1}}@media(forced-colors:active){:host([data-indicator=compact]) .ars-nav__item--selected .ars-nav__icon-box:before,:host([data-indicator=wide]) .ars-nav__item--selected:before{background:Highlight;forced-color-adjust:none}.ars-nav__item:focus-visible{outline:3px solid CanvasText}}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: NavigationBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'navigation-bar', standalone: true, imports: [MatIconModule, MatTooltipModule, CdkTrapFocus, CdkConnectedOverlay], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        'class': 'ars-navigation',
+                        '[attr.data-variant]': 'resolvedVariant()',
+                        '[attr.data-layout]': 'resolvedLayout()',
+                        '[attr.data-align]': 'alignment()',
+                        '[attr.data-position]': 'position()',
+                        '[attr.data-labels]': 'resolvedLabelVisibility()',
+                        '[attr.data-indicator]': 'indicatorMode()',
+                        '[class.ars-navigation--open]': 'isOverlayOpen()',
+                        '[class.ars-navigation--elevated]': 'elevated()',
+                        '[class.ars-navigation--bordered]': 'bordered()',
+                        '[class.ars-navigation--hidden]': 'isHidden()',
+                        '[style.--ars-navigation-width]': 'widthStyle()',
+                    }, template: "@if (isModal() && scrim()) {\n  <div class=\"ars-nav__scrim\" aria-hidden=\"true\" (click)=\"onScrimClick()\"></div>\n}\n\n<nav class=\"ars-nav\"\n     [attr.aria-label]=\"ariaLabel()\"\n     [attr.role]=\"isModal() ? 'dialog' : undefined\"\n     [attr.aria-modal]=\"isModal() ? 'true' : undefined\"\n     [attr.inert]=\"isHidden() ? '' : undefined\"\n     [cdkTrapFocus]=\"isOverlayOpen()\"\n     [cdkTrapFocusAutoCapture]=\"isOverlayOpen()\"\n     (keydown)=\"onKeydown($event)\">\n\n  @let labels = resolvedLabelVisibility();\n  @let wide = isExpanded();\n  @let active = activeId();\n  @let highlighted = highlightedIds();\n  @let openIds = expandedSet();\n  @let popupOpenId = popupItem()?.item.id;\n\n  @if (showsHeader()) {\n    <div class=\"ars-nav__header\">\n      @if (showMenuButton()) {\n        <button type=\"button\"\n                class=\"ars-nav__menu\"\n                [attr.aria-label]=\"menuAriaLabel()\"\n                (click)=\"onMenuClick()\">\n          <mat-icon aria-hidden=\"true\">{{ menuIcon() }}</mat-icon>\n        </button>\n      }\n      @if (wide) {\n        @if (headline(); as headlineText) {\n          <h2 class=\"ars-nav__headline\">{{ headlineText }}</h2>\n        }\n      }\n    </div>\n  }\n\n  <div class=\"ars-nav__leading\"><ng-content select=\"[navHeader]\" /></div>\n  <div class=\"ars-nav__fab\"><ng-content select=\"[navFab]\" /></div>\n\n  @for (group of visibleGroups(); track group.align) {\n    <div class=\"ars-nav__items\" [class.ars-nav__items--bottom]=\"group.align === 'bottom'\">\n      @for (block of group.sections; track block.section.id) {\n\n        @if (wide && block.section.label) {\n          <h3 class=\"ars-nav__section-headline\">{{ block.section.label }}</h3>\n        }\n\n        @for (r of block.items; track r.item.id) {\n          @let current = r.item.id === active;\n          @let selected = highlighted.has(r.item.id);\n          @let labelVisible = !r.iconOnly && (labels === 'labeled' || (labels === 'selected' && selected));\n          @let branchOpen = r.hasChildren && openIds.has(r.item.id);\n          @let svg = selected ? r.svgOn : r.svgOff;\n          @let image = selected ? r.imageOn : r.imageOff;\n          @let ligature = selected ? r.iconOn : r.iconOff;\n\n          <!--\n            The anchor and the button branches duplicate the inner markup on purpose:\n            an `ng-template` + `ngTemplateOutlet` would allocate one extra embedded\n            view per destination and lose the typed template context.\n          -->\n          @if (r.href && !r.hasChildren) {\n            <a #navItem\n               class=\"ars-nav__item\"\n               [class.ars-nav__item--selected]=\"selected\"\n               [class.ars-nav__item--disabled]=\"r.item.disabled\"\n               [attr.data-depth]=\"r.depth\"\n               [attr.href]=\"r.item.disabled ? undefined : r.href\"\n               [attr.target]=\"r.item.target\"\n               [attr.rel]=\"r.item.target === '_blank' ? 'noopener noreferrer' : undefined\"\n               [attr.aria-label]=\"r.ariaLabel\"\n               [attr.aria-current]=\"current ? 'page' : undefined\"\n               [attr.aria-disabled]=\"r.item.disabled ? 'true' : undefined\"\n               [attr.tabindex]=\"r.item.disabled ? -1 : 0\"\n               [attr.data-nav-id]=\"r.item.id\"\n               [matTooltip]=\"r.tooltip\"\n               [matTooltipDisabled]=\"!tooltips() || labelVisible\"\n               [matTooltipPosition]=\"tooltipPosition()\"\n               (click)=\"select(r, $event)\">\n              <span class=\"ars-nav__icon-box\">\n                @if (svg; as svgName) {\n                  <mat-icon class=\"ars-nav__icon\" [svgIcon]=\"svgName\" aria-hidden=\"true\" />\n                } @else if (r.spriteStyle; as spriteStyle) {\n                  <span class=\"ars-nav__icon ars-nav__icon--sprite\" [style]=\"spriteStyle\" aria-hidden=\"true\"></span>\n                } @else if (image; as imageUrl) {\n                  <img class=\"ars-nav__icon ars-nav__icon--image\" [src]=\"imageUrl\" alt=\"\" loading=\"lazy\" decoding=\"async\" />\n                } @else if (ligature; as ligatureName) {\n                  <mat-icon class=\"ars-nav__icon\" aria-hidden=\"true\">{{ ligatureName }}</mat-icon>\n                }\n                @if (r.hasBadge) {\n                  <span class=\"ars-nav__badge\"\n                        [class.ars-nav__badge--dot]=\"!r.badgeText\"\n                        [style.background-color]=\"r.item.badge?.color\"\n                        [attr.aria-label]=\"r.item.badge?.ariaLabel\">{{ r.badgeText }}</span>\n                }\n              </span>\n              @if (labels !== 'unlabeled' && !r.iconOnly) {\n                <span class=\"ars-nav__label\" [class.ars-nav__label--hidden]=\"!labelVisible\">{{ r.item.label }}</span>\n              }\n              @if (wide && r.item.trailing) {\n                <span class=\"ars-nav__trailing\">{{ r.item.trailing }}</span>\n              }\n            </a>\n          } @else {\n            <button #navItem\n                    type=\"button\"\n                    class=\"ars-nav__item\"\n                    [class.ars-nav__item--selected]=\"selected\"\n                    [class.ars-nav__item--disabled]=\"r.item.disabled\"\n                    [class.ars-nav__item--parent]=\"r.hasChildren\"\n                    [class.ars-nav__item--icon-only]=\"r.iconOnly\"\n                    [attr.data-depth]=\"r.depth\"\n                    [disabled]=\"!!r.item.disabled\"\n                    [attr.aria-label]=\"r.ariaLabel\"\n                    [attr.aria-current]=\"current ? 'page' : undefined\"\n                    [attr.aria-expanded]=\"r.hasChildren ? (wide ? branchOpen : popupOpenId === r.item.id) : undefined\"\n                    [attr.aria-haspopup]=\"r.hasChildren && !wide ? 'menu' : undefined\"\n                    [attr.data-nav-id]=\"r.item.id\"\n                    [matTooltip]=\"r.tooltip\"\n                    [matTooltipDisabled]=\"!tooltips() || labelVisible\"\n                    [matTooltipPosition]=\"tooltipPosition()\"\n                    (click)=\"select(r, $event)\">\n              <span class=\"ars-nav__icon-box\">\n                @if (svg; as svgName) {\n                  <mat-icon class=\"ars-nav__icon\" [svgIcon]=\"svgName\" aria-hidden=\"true\" />\n                } @else if (r.spriteStyle; as spriteStyle) {\n                  <span class=\"ars-nav__icon ars-nav__icon--sprite\" [style]=\"spriteStyle\" aria-hidden=\"true\"></span>\n                } @else if (image; as imageUrl) {\n                  <img class=\"ars-nav__icon ars-nav__icon--image\" [src]=\"imageUrl\" alt=\"\" loading=\"lazy\" decoding=\"async\" />\n                } @else if (ligature; as ligatureName) {\n                  <mat-icon class=\"ars-nav__icon\" aria-hidden=\"true\">{{ ligatureName }}</mat-icon>\n                }\n                @if (r.hasBadge) {\n                  <span class=\"ars-nav__badge\"\n                        [class.ars-nav__badge--dot]=\"!r.badgeText\"\n                        [style.background-color]=\"r.item.badge?.color\"\n                        [attr.aria-label]=\"r.item.badge?.ariaLabel\">{{ r.badgeText }}</span>\n                }\n              </span>\n              @if (labels !== 'unlabeled' && !r.iconOnly) {\n                <span class=\"ars-nav__label\" [class.ars-nav__label--hidden]=\"!labelVisible\">{{ r.item.label }}</span>\n              }\n              @if (wide && r.item.trailing) {\n                <span class=\"ars-nav__trailing\">{{ r.item.trailing }}</span>\n              }\n              @if (r.hasChildren && wide) {\n                <mat-icon class=\"ars-nav__chevron\"\n                          [class.ars-nav__chevron--open]=\"branchOpen\"\n                          aria-hidden=\"true\">{{ expandIcon() }}</mat-icon>\n              }\n            </button>\n          }\n        }\n\n        @if (wide && block.section.divider && !$last) {\n          <hr class=\"ars-nav__divider\" aria-hidden=\"true\" />\n        }\n      }\n    </div>\n  }\n\n  <div class=\"ars-nav__footer\"><ng-content select=\"[navFooter]\" /></div>\n</nav>\n\n<!--\n  One overlay for the whole component: the overflow entry and every parent\n  destination of the compact variants reuse it, instead of allocating a menu\n  instance per destination.\n-->\n<ng-template cdkConnectedOverlay\n             [cdkConnectedOverlayOrigin]=\"popupOrigin()\"\n             [cdkConnectedOverlayOpen]=\"isPopupOpen()\"\n             [cdkConnectedOverlayPositions]=\"popupPositions()\"\n             [cdkConnectedOverlayPush]=\"true\"\n             (overlayOutsideClick)=\"closePopup()\"\n             (detach)=\"closePopup()\">\n  <div class=\"ars-nav-submenu\"\n       role=\"menu\"\n       [attr.aria-label]=\"popupItem()?.ariaLabel\"\n       [cdkTrapFocus]=\"true\"\n       [cdkTrapFocusAutoCapture]=\"true\"\n       (keydown)=\"onKeydown($event)\">\n    @for (entry of popupEntries(); track entry.key) {\n      @if (entry.render; as c) {\n        @let childSelected = c.item.id === activeId();\n        @let childSvg = childSelected ? c.svgOn : c.svgOff;\n        @let childImage = childSelected ? c.imageOn : c.imageOff;\n        @let childLigature = childSelected ? c.iconOn : c.iconOff;\n        @if (c.href) {\n          <a #panelItem\n             class=\"ars-nav-submenu__item\"\n             role=\"menuitem\"\n             [class.ars-nav-submenu__item--selected]=\"childSelected\"\n             [attr.href]=\"c.item.disabled ? undefined : c.href\"\n             [attr.target]=\"c.item.target\"\n             [attr.rel]=\"c.item.target === '_blank' ? 'noopener noreferrer' : undefined\"\n             [attr.aria-disabled]=\"c.item.disabled ? 'true' : undefined\"\n             [attr.aria-current]=\"childSelected ? 'page' : undefined\"\n             (click)=\"select(c, $event)\">\n            @if (childSvg; as svgName) {\n              <mat-icon class=\"ars-nav__icon\" [svgIcon]=\"svgName\" aria-hidden=\"true\" />\n            } @else if (c.spriteStyle; as spriteStyle) {\n              <span class=\"ars-nav__icon ars-nav__icon--sprite\" [style]=\"spriteStyle\" aria-hidden=\"true\"></span>\n            } @else if (childImage; as imageUrl) {\n              <img class=\"ars-nav__icon ars-nav__icon--image\" [src]=\"imageUrl\" alt=\"\" loading=\"lazy\" decoding=\"async\" />\n            } @else if (childLigature; as ligatureName) {\n              <mat-icon class=\"ars-nav__icon\" aria-hidden=\"true\">{{ ligatureName }}</mat-icon>\n            }\n            <span class=\"ars-nav-submenu__label\">{{ c.item.label }}</span>\n            @if (c.badgeText) {\n              <span class=\"ars-nav-submenu__trailing\">{{ c.badgeText }}</span>\n            } @else if (c.item.trailing) {\n              <span class=\"ars-nav-submenu__trailing\">{{ c.item.trailing }}</span>\n            }\n          </a>\n        } @else {\n          <button #panelItem\n                  type=\"button\"\n                  class=\"ars-nav-submenu__item\"\n                  role=\"menuitem\"\n                  [class.ars-nav-submenu__item--selected]=\"childSelected\"\n                  [disabled]=\"!!c.item.disabled\"\n                  [attr.aria-current]=\"childSelected ? 'page' : undefined\"\n                  (click)=\"select(c, $event)\">\n            @if (childSvg; as svgName) {\n              <mat-icon class=\"ars-nav__icon\" [svgIcon]=\"svgName\" aria-hidden=\"true\" />\n            } @else if (c.spriteStyle; as spriteStyle) {\n              <span class=\"ars-nav__icon ars-nav__icon--sprite\" [style]=\"spriteStyle\" aria-hidden=\"true\"></span>\n            } @else if (childImage; as imageUrl) {\n              <img class=\"ars-nav__icon ars-nav__icon--image\" [src]=\"imageUrl\" alt=\"\" loading=\"lazy\" decoding=\"async\" />\n            } @else if (childLigature; as ligatureName) {\n              <mat-icon class=\"ars-nav__icon\" aria-hidden=\"true\">{{ ligatureName }}</mat-icon>\n            }\n            <span class=\"ars-nav-submenu__label\">{{ c.item.label }}</span>\n            @if (c.badgeText) {\n              <span class=\"ars-nav-submenu__trailing\">{{ c.badgeText }}</span>\n            } @else if (c.item.trailing) {\n              <span class=\"ars-nav-submenu__trailing\">{{ c.item.trailing }}</span>\n            }\n          </button>\n        }\n      } @else {\n        <div class=\"ars-nav-submenu__heading\" role=\"presentation\">{{ entry.label }}</div>\n      }\n    }\n  </div>\n</ng-template>\n", styles: [":host{--_container: var(--ars-navigation-container-color, var(--mat-sys-surface-container, #eff1ef));--_indicator: var(--ars-navigation-indicator-color, var(--mat-sys-secondary-container, #cce8e2));--_icon: var(--ars-navigation-icon-color, var(--mat-sys-on-surface-variant, #3f4947));--_icon-active: var(--ars-navigation-active-icon-color, var(--mat-sys-on-secondary-container, #0b1f1c));--_label: var(--ars-navigation-label-color, var(--mat-sys-on-surface-variant, #3f4947));--_label-active: var(--ars-navigation-active-label-color, var(--ars-color-secondary, #4a635f));--_headline: var(--ars-navigation-headline-color, var(--mat-sys-on-surface-variant, #3f4947));--_state: var(--ars-navigation-state-layer-color, var(--mat-sys-on-surface, #191c1b));--_badge: var(--ars-navigation-badge-color, var(--ars-color-error, #ff5449));--_badge-text: var(--ars-navigation-badge-text-color, #ffffff);--_divider: var(--ars-navigation-divider-color, var(--ars-color-divider, #757d87));--_scrim: var(--ars-navigation-scrim-color, rgba(0, 0, 0, .4));--_focus: var(--ars-navigation-focus-color, var(--ars-color-primary, #00a293));--_easing: var(--ars-navigation-easing, cubic-bezier(.2, 0, 0, 1));--_dur-short: var(--ars-navigation-duration-short, .15s);--_dur: var(--ars-navigation-duration, .25s);--_dur-long: var(--ars-navigation-duration-long, .4s);--_icon-hover-scale: var(--ars-navigation-icon-hover-scale, 1.12);--_icon-press-scale: var(--ars-navigation-icon-press-scale, .92);--_hover-opacity: .08;--_focus-opacity: .1;--_press-opacity: .1;--_rtl: 1;display:block;box-sizing:border-box;color:var(--_label);-webkit-tap-highlight-color:transparent}:host-context([dir=rtl]){--_rtl: -1}.ars-nav{box-sizing:border-box;display:flex;position:relative;background:var(--_container);color:var(--_label);overflow:hidden}.ars-nav__items{box-sizing:border-box;display:flex;min-height:0;min-width:0;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--_state) 25%,transparent) transparent}.ars-nav__header{box-sizing:border-box;display:flex;align-items:center;flex:none;gap:12px}.ars-nav__leading,.ars-nav__fab,.ars-nav__footer{box-sizing:border-box;flex:none}.ars-nav__leading:empty,.ars-nav__fab:empty,.ars-nav__footer:empty{display:none}.ars-nav__headline{margin:0;padding:0 16px;font-size:22px;line-height:28px;font-weight:400;color:var(--_headline);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ars-nav__section-headline{margin:0;padding:18px 16px 8px;font-size:14px;line-height:20px;font-weight:500;letter-spacing:.1px;color:var(--_headline);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ars-nav__divider{flex:none;margin:8px 16px;border:0;border-top:1px solid var(--_divider);opacity:.4}.ars-nav__menu{display:inline-flex;align-items:center;justify-content:center;flex:none;width:48px;height:48px;margin:0;padding:0;border:0;border-radius:50%;background:transparent;color:var(--_icon);cursor:pointer;transition:background-color var(--_dur-short) var(--_easing)}.ars-nav__menu:hover{background:color-mix(in srgb,var(--_state) 8%,transparent)}.ars-nav__menu:focus-visible{outline:3px solid var(--_focus);outline-offset:2px}.ars-nav__item{box-sizing:border-box;position:relative;isolation:isolate;display:flex;align-items:center;flex:none;margin:0;border:0;background:transparent;color:var(--_label);font:inherit;text-align:start;text-decoration:none;cursor:pointer;-webkit-user-select:none;user-select:none;appearance:none;-webkit-tap-highlight-color:transparent}.ars-nav__item:focus-visible{outline:3px solid var(--_focus);outline-offset:-3px;border-radius:16px}.ars-nav__item--disabled,.ars-nav__item:disabled{cursor:default;opacity:.38;pointer-events:none}.ars-nav__icon-box{box-sizing:border-box;position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;width:24px;height:24px;color:var(--_icon);transition:color var(--_dur) var(--_easing)}.ars-nav__icon{position:relative;z-index:1;width:24px;height:24px;font-size:24px;line-height:24px;font-variation-settings:\"FILL\" 0;transform:scale(1);transform-origin:center;transition:font-variation-settings var(--_dur, .25s) var(--_easing, cubic-bezier(.2, 0, 0, 1)),transform var(--_dur, .25s) var(--_easing, cubic-bezier(.2, 0, 0, 1))}.ars-nav__label{position:relative;z-index:1;min-width:0;font:var(--mat-sys-label-large, 500 14px/20px Roboto, sans-serif);letter-spacing:var(--mat-sys-label-large-tracking, .1px);color:var(--_label);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color var(--_dur) var(--_easing),opacity var(--_dur) var(--_easing),max-height var(--_dur) var(--_easing),margin var(--_dur) var(--_easing)}.ars-nav__label--hidden{opacity:0;max-height:0;margin:0!important;pointer-events:none}.ars-nav__trailing{position:relative;z-index:1;margin-inline-start:auto;padding-inline-start:12px;font-size:11px;line-height:16px;font-weight:500;letter-spacing:.5px;color:var(--_label);white-space:nowrap}.ars-nav__badge{position:absolute;z-index:2;top:-6px;inset-inline-start:12px;box-sizing:border-box;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--_badge);color:var(--_badge-text);font-size:11px;line-height:16px;font-weight:500;letter-spacing:.5px;text-align:center;white-space:nowrap}.ars-nav__badge--dot{top:-1px;inset-inline-start:16px;width:6px;min-width:6px;height:6px;padding:0;border-radius:3px}:host([data-indicator=compact]) .ars-nav__icon-box:before{content:\"\";position:absolute;z-index:0;background:var(--_indicator);opacity:0;transform:scaleX(.55);transition:opacity var(--_dur) var(--_easing),transform var(--_dur-long) var(--_easing);pointer-events:none;inset:50% auto auto 50%;width:56px;height:32px;margin:-16px 0 0 -28px;border-radius:16px}:host([data-indicator=compact]) .ars-nav__icon-box:after{content:\"\";position:absolute;z-index:0;background:var(--_state);opacity:0;transition:opacity var(--_dur-short) var(--_easing);pointer-events:none;inset:50% auto auto 50%;width:56px;height:32px;margin:-16px 0 0 -28px;border-radius:16px}:host([data-indicator=compact]) .ars-nav__item--selected .ars-nav__icon-box:before{opacity:1;transform:scaleX(1)}:host([data-indicator=compact]) .ars-nav__item:hover .ars-nav__icon-box:after{opacity:var(--_hover-opacity)}:host([data-indicator=compact]) .ars-nav__item:focus-visible .ars-nav__icon-box:after{opacity:var(--_focus-opacity)}:host([data-indicator=compact]) .ars-nav__item:active .ars-nav__icon-box:after{opacity:var(--_press-opacity)}:host([data-indicator=wide]) .ars-nav__item:before{content:\"\";position:absolute;z-index:0;background:var(--_indicator);opacity:0;transform:scaleX(.55);transition:opacity var(--_dur) var(--_easing),transform var(--_dur-long) var(--_easing);pointer-events:none;inset:0;border-radius:28px}:host([data-indicator=wide]) .ars-nav__item:after{content:\"\";position:absolute;z-index:0;background:var(--_state);opacity:0;transition:opacity var(--_dur-short) var(--_easing);pointer-events:none;inset:0;border-radius:28px}:host([data-indicator=wide]) .ars-nav__item--selected:before{opacity:1;transform:scaleX(1)}:host([data-indicator=wide]) .ars-nav__item:hover:after{opacity:var(--_hover-opacity)}:host([data-indicator=wide]) .ars-nav__item:focus-visible:after{opacity:var(--_focus-opacity)}:host([data-indicator=wide]) .ars-nav__item:active:after{opacity:var(--_press-opacity)}.ars-nav__item--selected .ars-nav__icon-box{color:var(--_icon-active)}.ars-nav__item--selected .ars-nav__icon{font-variation-settings:\"FILL\" 1}.ars-nav__item--selected .ars-nav__label{color:var(--_label-active)}:host([data-layout=vertical]) .ars-nav__item{flex-direction:column;justify-content:center}:host([data-layout=vertical]) .ars-nav__label{font:var(--mat-sys-label-medium, 500 12px/16px Roboto, sans-serif);letter-spacing:var(--mat-sys-label-medium-tracking, .5px);margin-top:6px;max-width:100%;text-align:center}:host([data-layout=horizontal]) .ars-nav__item{flex-direction:row;justify-content:flex-start}:host([data-layout=horizontal]) .ars-nav__label{margin-inline-start:4px}:host([data-variant=bar]){width:100%}:host([data-variant=bar]) .ars-nav{flex-direction:row;align-items:center;justify-content:space-around;width:100%;height:var(--ars-navigation-bar-height, 64px);padding:0 8px}:host([data-variant=bar]) .ars-nav__header,:host([data-variant=bar]) .ars-nav__leading,:host([data-variant=bar]) .ars-nav__fab,:host([data-variant=bar]) .ars-nav__footer,:host([data-variant=bar]) .ars-nav__section-headline,:host([data-variant=bar]) .ars-nav__divider,:host([data-variant=bar]) .ars-nav__trailing{display:none}:host([data-variant=bar]) .ars-nav__items{display:contents}:host([data-variant=bar]) .ars-nav__item{flex:1 1 0;min-width:0;height:100%}:host([data-variant=bar][data-layout=horizontal]) .ars-nav__item{justify-content:center;max-width:var(--ars-navigation-item-max-width, 168px);padding:0 12px}:host([data-variant=bar][data-indicator=wide]) .ars-nav__item:before,:host([data-variant=bar][data-indicator=wide]) .ars-nav__item:after{inset:12px 0}:host([data-variant=rail]){height:100%}:host([data-variant=rail]) .ars-nav{flex-direction:column;align-items:center;width:var(--ars-navigation-width, 96px);height:100%;padding:var(--ars-navigation-rail-top-padding, 20px) 0 8px}:host([data-variant=rail]) .ars-nav__header{flex-direction:column;margin-bottom:40px}:host([data-variant=rail]) .ars-nav__headline,:host([data-variant=rail]) .ars-nav__section-headline,:host([data-variant=rail]) .ars-nav__divider,:host([data-variant=rail]) .ars-nav__trailing{display:none}:host([data-variant=rail]) .ars-nav__fab{margin-bottom:40px}:host([data-variant=rail]) .ars-nav__items{flex:1 1 auto;flex-direction:column;align-items:center;gap:4px;width:100%;overflow-y:auto;overscroll-behavior:contain}:host([data-variant=rail]) .ars-nav__item{justify-content:center;width:100%;height:64px;padding:0 4px}:host([data-variant=rail-expanded]),:host([data-variant=drawer]),:host([data-variant=modal]){height:100%}:host([data-variant=rail-expanded]) .ars-nav,:host([data-variant=drawer]) .ars-nav,:host([data-variant=modal]) .ars-nav{flex-direction:column;align-items:stretch;height:100%;padding:12px 0}:host([data-variant=rail-expanded]) .ars-nav__header,:host([data-variant=drawer]) .ars-nav__header,:host([data-variant=modal]) .ars-nav__header{padding:4px 8px 8px}:host([data-variant=rail-expanded]) .ars-nav__items,:host([data-variant=drawer]) .ars-nav__items,:host([data-variant=modal]) .ars-nav__items{flex:1 1 auto;flex-direction:column;gap:4px;overflow-y:auto;overscroll-behavior:contain}:host([data-variant=rail-expanded]) .ars-nav__item,:host([data-variant=drawer]) .ars-nav__item,:host([data-variant=modal]) .ars-nav__item{height:56px;padding-block:0;padding-inline:calc(24px + var(--_depth-pad, 0px)) 24px;margin:0 var(--ars-navigation-item-inset, 20px)}:host([data-variant=rail-expanded]) .ars-nav__icon-box,:host([data-variant=drawer]) .ars-nav__icon-box,:host([data-variant=modal]) .ars-nav__icon-box{margin-inline-end:12px}:host([data-variant=rail-expanded]) .ars-nav__label,:host([data-variant=drawer]) .ars-nav__label,:host([data-variant=modal]) .ars-nav__label{flex:1 1 auto;margin-inline-start:0}:host([data-variant=rail-expanded]) .ars-nav{width:var(--ars-navigation-width, 220px)}:host([data-variant=drawer]) .ars-nav,:host([data-variant=modal]) .ars-nav{width:var(--ars-navigation-width, 360px)}:host([data-variant=modal]){position:fixed;inset:0;z-index:var(--ars-navigation-z-index, 1000);height:auto;pointer-events:none}:host([data-variant=modal]) .ars-nav{position:absolute;inset-block:0;inset-inline-start:0;pointer-events:auto;border-start-end-radius:16px;border-end-end-radius:16px;translate:calc(var(--_shift, 0%) * var(--_rtl)) 0;transition:translate var(--_dur-long) var(--_easing),visibility var(--_dur-long) var(--_easing)}:host([data-variant=modal][data-position=end]) .ars-nav{inset-inline-start:auto;inset-inline-end:0;border-radius:0;border-start-start-radius:16px;border-end-start-radius:16px}:host([data-variant=modal].ars-navigation--hidden) .ars-nav__scrim{opacity:0;pointer-events:none}:host([data-variant=modal].ars-navigation--hidden) .ars-nav{--_shift: -100%;visibility:hidden}:host([data-variant=modal][data-position=end].ars-navigation--hidden) .ars-nav{--_shift: 100%}.ars-nav__scrim{position:absolute;inset:0;background:var(--_scrim);opacity:1;pointer-events:auto;transition:opacity var(--_dur-long) var(--_easing)}:host(:not([data-variant=bar])) .ars-nav__items--bottom{flex:0 0 auto;margin-block-start:auto;overflow:visible}:host([data-align=center]) .ars-nav__items:not(.ars-nav__items--bottom){justify-content:safe center}:host([data-align=bottom]) .ars-nav__items:not(.ars-nav__items--bottom){justify-content:safe flex-end}:host(.ars-navigation--elevated) .ars-nav{box-shadow:0 1px 3px #0000004d,0 4px 8px 3px #00000026}:host(.ars-navigation--hidden):not([data-variant=modal]){display:none}.ars-nav__icon--image{object-fit:contain}.ars-nav__icon--sprite{display:inline-block;flex:none;width:var(--sp-size, 24px);height:var(--sp-size, 24px);background-image:var(--sp-url);background-repeat:no-repeat;background-size:var(--sp-sheet-x, auto) var(--sp-sheet-y, auto);background-position:calc(var(--sp-frame, var(--sp-normal, 0)) * var(--sp-step-x, 0px)) calc(var(--sp-frame, var(--sp-normal, 0)) * var(--sp-step-y, 0px))}.ars-nav__item:where(:hover,:focus-visible) .ars-nav__icon--sprite,.ars-nav-submenu__item:where(:hover,:focus-visible) .ars-nav__icon--sprite{--sp-frame: var(--sp-hover)}.ars-nav__item--selected .ars-nav__icon--sprite,.ars-nav-submenu__item--selected .ars-nav__icon--sprite{--sp-frame: var(--sp-active)}.ars-nav__item--disabled .ars-nav__icon--sprite,.ars-nav__item:where(:disabled) .ars-nav__icon--sprite,.ars-nav-submenu__item:where(:disabled,[aria-disabled=true]) .ars-nav__icon--sprite{--sp-frame: var(--sp-disabled)}.ars-nav__item:where(:hover,:focus-visible) .ars-nav__icon,.ars-nav-submenu__item:where(:hover,:focus-visible) .ars-nav__icon{transform:scale(var(--_icon-hover-scale, 1.12))}.ars-nav__item--selected .ars-nav__icon,.ars-nav-submenu__item--selected .ars-nav__icon{transform:scale(1)}.ars-nav__item:where(:active) .ars-nav__icon,.ars-nav-submenu__item:where(:active) .ars-nav__icon{transform:scale(var(--_icon-press-scale, .92));transition-duration:var(--_dur-short, .15s)}:host([data-variant=bar]) .ars-nav__item--icon-only{flex:0 0 auto;min-width:56px;max-width:72px}.ars-nav__chevron{position:relative;z-index:1;flex:none;margin-inline-start:8px;width:20px;height:20px;font-size:20px;line-height:20px;color:var(--_icon);rotate:0deg;transition:rotate var(--_dur) var(--_easing)}.ars-nav__chevron--open{rotate:180deg}.ars-nav__item[data-depth=\"1\"]{--_depth-pad: 24px}.ars-nav__item[data-depth=\"2\"]{--_depth-pad: 48px}.ars-nav__item[data-depth=\"3\"]{--_depth-pad: 72px}.ars-nav-submenu{--_easing: var(--ars-navigation-easing, cubic-bezier(.2, 0, 0, 1));--_dur-short: var(--ars-navigation-duration-short, .15s);--_dur: var(--ars-navigation-duration, .25s);--_dur-long: var(--ars-navigation-duration-long, .4s);--_icon-hover-scale: var(--ars-navigation-icon-hover-scale, 1.12);--_icon-press-scale: var(--ars-navigation-icon-press-scale, .92);--_state: var(--ars-navigation-state-layer-color, var(--mat-sys-on-surface, #191c1b));--_indicator: var(--ars-navigation-indicator-color, var(--mat-sys-secondary-container, #cce8e2));box-sizing:border-box;display:flex;flex-direction:column;gap:2px;min-width:200px;max-width:320px;max-height:60vh;padding:8px;border-radius:12px;background:var(--ars-navigation-menu-container-color, var(--mat-sys-surface-container-high, #e7e9e8));color:var(--ars-navigation-label-color, var(--mat-sys-on-surface, #191c1b));box-shadow:0 1px 2px #0000004d,0 2px 6px 2px #00000026;overflow-y:auto;overscroll-behavior:contain}.ars-nav-submenu__item{box-sizing:border-box;display:flex;align-items:center;gap:12px;flex:none;min-height:48px;margin:0;padding:0 12px;border:0;border-radius:8px;background:transparent;color:inherit;font:inherit;text-align:start;text-decoration:none;cursor:pointer;appearance:none}.ars-nav-submenu__item:hover{background:color-mix(in srgb,currentColor 8%,transparent)}.ars-nav-submenu__item:focus-visible{outline:3px solid var(--ars-navigation-focus-color, var(--ars-color-primary, #00a293));outline-offset:-3px}.ars-nav-submenu__item--selected{background:var(--_indicator);color:var(--ars-navigation-active-icon-color, var(--mat-sys-on-secondary-container, #0b1f1c))}.ars-nav-submenu__item--selected:where(:hover,:focus-visible){background:color-mix(in srgb,var(--_state) 8%,var(--_indicator))}.ars-nav-submenu__item:disabled,.ars-nav-submenu__item[aria-disabled=true]{opacity:.38;pointer-events:none}.ars-nav-submenu__heading{padding:12px 12px 4px;font-size:11px;line-height:16px;font-weight:500;letter-spacing:.5px;text-transform:uppercase;opacity:.7}.ars-nav-submenu__heading:first-child{padding-top:4px}.ars-nav-submenu__label{flex:1 1 auto;min-width:0;font-size:14px;line-height:20px;font-weight:500;letter-spacing:.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ars-nav-submenu__trailing{flex:none;font-size:11px;line-height:16px;font-weight:500;letter-spacing:.5px;opacity:.8}@media(prefers-reduced-motion:reduce){:host{--_dur-short: 0ms;--_dur: 0ms;--_dur-long: 0ms;--_icon-hover-scale: 1;--_icon-press-scale: 1}:host([data-indicator=wide]) .ars-nav__item:before,:host([data-indicator=compact]) .ars-nav__icon-box:before{transform:none}.ars-nav-submenu{--_dur-short: 0ms;--_dur: 0ms;--_dur-long: 0ms;--_icon-hover-scale: 1;--_icon-press-scale: 1}}@media(forced-colors:active){:host([data-indicator=compact]) .ars-nav__item--selected .ars-nav__icon-box:before,:host([data-indicator=wide]) .ars-nav__item--selected:before{background:Highlight;forced-color-adjust:none}.ars-nav__item:focus-visible{outline:3px solid CanvasText}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], sections: [{ type: i0.Input, args: [{ isSignal: true, alias: "sections", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], autoVariants: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoVariants", required: false }] }], selectedId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedId", required: false }] }, { type: i0.Output, args: ["selectedIdChange"] }], expandedIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedIds", required: false }] }, { type: i0.Output, args: ["expandedIdsChange"] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], labelVisibility: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelVisibility", required: false }] }], itemLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemLayout", required: false }] }], alignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignment", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], headline: [{ type: i0.Input, args: [{ isSignal: true, alias: "headline", required: false }] }], showMenuButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMenuButton", required: false }] }], menuIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuIcon", required: false }] }], expandIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandIcon", required: false }] }], overflowMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "overflowMode", required: false }] }], overflowIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "overflowIcon", required: false }] }], overflowLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "overflowLabel", required: false }] }], maxVisibleItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisibleItems", required: false }] }], menuAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuAriaLabel", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], scrim: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrim", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], elevated: [{ type: i0.Input, args: [{ isSignal: true, alias: "elevated", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], tooltips: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltips", required: false }] }], routerSync: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerSync", required: false }] }], relativeTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "relativeTo", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }], itemSelected: [{ type: i0.Output, args: ["itemSelected"] }], menuClick: [{ type: i0.Output, args: ["menuClick"] }], itemElements: [{ type: i0.ViewChildren, args: ['navItem', { isSignal: true }] }], panelElements: [{ type: i0.ViewChildren, args: ['panelItem', { isSignal: true }] }] } });
+
+/*
+ * Public API Surface of @arsedizioni/ars-utils/ui.navigation
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DEFAULT_NAVIGATION_AUTO_VARIANTS, EXPANDED_NAVIGATION_VARIANTS, NAVIGATION_OVERFLOW_ID, NavigationBarComponent };
+//# sourceMappingURL=arsedizioni-ars-utils-ui.navigation.mjs.map