@arsedizioni/ars-utils 22.6.86 → 22.6.88

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

@@ -1,1216 +1,1488 @@
-import * as i0 from '@angular/core';
-import { inject, ElementRef, Injector, DestroyRef, input, model, booleanAttribute, numberAttribute, output, viewChildren, signal, computed, afterNextRender, 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.
- */
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, Injector, afterNextRender, booleanAttribute, computed, inject, input, model, numberAttribute, output, signal, viewChildren } from "@angular/core";
+import { takeUntilDestroyed, toSignal } 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 { NavigationEnd, Router } from "@angular/router";
+import { EMPTY, distinctUntilChanged, filter, map } from "rxjs";
+import { ThemeService } from "@arsedizioni/ars-utils/core";
+import { MediaObserver } from "@arsedizioni/ars-utils/ui";
+const NAVIGATION_OVERFLOW_ID = "__overflow";
 const DEFAULT_NAVIGATION_AUTO_VARIANTS = {
-    xs: 'bar',
-    sm: 'rail',
-    md: 'rail',
-    lg: 'rail-expanded',
-    xl: 'rail-expanded',
+	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',
+	"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;
-/** Breathing space left above the parent row, and below the end of a branch, when scrolling. */
 const BRANCH_SCROLL_PADDING = 8;
-/**
- * Tells whether the user asked the system for less animation.
- * @returns `true` when `prefers-reduced-motion` is set, `false` when it is not or cannot be read.
- */
 function prefersReducedMotion() {
-    return typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;
+	return typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
 }
-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);
-        /** Used to schedule the post-render read that reveals a branch just expanded. */
-        this.injector = inject(Injector);
-        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 */ []));
-        /**
-         * Icons of the nested destinations in the expanded variants (rail-expanded,
-         * drawer, modal), where children are listed inline under their parent.
-         * `false` — the default — renders those rows as label only, which keeps the
-         * branch readable; the label stays aligned with the labels around it and a
-         * badge moves to the trailing edge. Top level destinations always keep their
-         * icon, and so do the children shown in the floating panel of the compact
-         * variants.
-         */
-        this.childIcons = input(false, { ...(ngDevMode ? { debugName: "childIcons" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        /**
-         * Compact rows in the expanded variants (rail-expanded, drawer, modal):
-         * 48px instead of the 56px of the M3 spec, with the dependent measures
-         * scaled along — nested rows 40px, labels one step smaller, tighter gaps.
-         * The bar and the collapsed rail keep their own spec metrics.
-         */
-        this.dense = input(false, { ...(ngDevMode ? { debugName: "dense" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        /** 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 });
-        /**
-         * Explicit width in pixels of the COLLAPSED rail. `0` keeps the 96px of the
-         * spec. It is separate from `width` because a surface set to `auto` is a
-         * collapsed rail at one breakpoint and an expanded one at the next, and the
-         * two want different widths; when both are given, this one wins on the
-         * collapsed rail and `width` covers the rest.
-         */
-        this.railWidth = input(0, { ...(ngDevMode ? { debugName: "railWidth" } : /* istanbul ignore next */ {}), transform: numberAttribute });
-        /**
-         * Lower bound in pixels for the width of the expanded variants (rail-expanded,
-         * drawer, modal). `0` keeps the default, which sets no floor. It is what keeps
-         * the surface readable when its width comes from a percentage or from a
-         * container that can shrink, instead of from `width`.
-         */
-        this.minWidth = input(0, { ...(ngDevMode ? { debugName: "minWidth" } : /* istanbul ignore next */ {}), transform: numberAttribute });
-        /**
-         * Upper bound in pixels for the width of the expanded variants (rail-expanded,
-         * drawer, modal). `0` keeps the default, which is the width of the parent: the
-         * surface never spills out of it, whatever `width` says.
-         */
-        this.maxWidth = input(0, { ...(ngDevMode ? { debugName: "maxWidth" } : /* 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 */ []));
-        /** Inline width override for the collapsed rail, or `undefined` to keep the spec default. */
-        this.railWidthStyle = computed(() => {
-            const width = this.railWidth();
-            return width > 0 ? `${width}px` : undefined;
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "railWidthStyle" }] : /* istanbul ignore next */ []));
-        /** Inline lower bound for the expanded variants, or `undefined` to keep the default. */
-        this.minWidthStyle = computed(() => {
-            const width = this.minWidth();
-            return width > 0 ? `${width}px` : undefined;
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "minWidthStyle" }] : /* istanbul ignore next */ []));
-        /** Inline upper bound for the expanded variants, or `undefined` to keep the default. */
-        this.maxWidthStyle = computed(() => {
-            const width = this.maxWidth();
-            return width > 0 ? `${width}px` : undefined;
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "maxWidthStyle" }] : /* 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: the active destination alone, and only
-         * while it is on screen. A parent stands in for nothing here — the template drops
-         * it unless it owns a route of its own — so a destination hidden inside a closed
-         * branch leaves this set empty and `ancestorIds` marks the trail instead.
-         */
-        this.highlightedIds = computed(() => {
-            const active = this.activeId();
-            const result = new Set();
-            if (active === undefined)
-                return result;
-            for (const group of this.visibleGroups()) {
-                for (const section of group.sections) {
-                    for (const item of section.items) {
-                        if (item.item.id === active) {
-                            result.add(active);
-                            return result;
-                        }
-                    }
-                }
-            }
-            return result;
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "highlightedIds" }] : /* istanbul ignore next */ []));
-        /**
-         * Ids of the ancestors of the active destination. No variant ever shows a parent
-         * as selected, so this trail is what tells the user where they are: it marks the
-         * whole chain down to the active destination, whether its branch is open, closed
-         * or inside a floating panel. Ancestors that are not rendered simply never reach
-         * the template.
-         */
-        this.ancestorIds = computed(() => {
-            const active = this.activeId();
-            const result = new Set();
-            if (active === undefined)
-                return result;
-            // Depth-first walk that records the ancestors of `active` on the way back up:
-            // a branch that does not hold it contributes nothing.
-            const walk = (items, trail) => {
-                for (const item of items) {
-                    if (item.item.id === active) {
-                        for (const id of trail)
-                            result.add(id);
-                        return true;
-                    }
-                    trail.push(item.item.id);
-                    const found = walk(item.children, trail);
-                    trail.pop();
-                    if (found)
-                        return true;
-                }
-                return false;
-            };
-            for (const group of this.visibleGroups()) {
-                for (const section of group.sections) {
-                    if (walk(section.items.filter(item => item.depth === 0), []))
-                        return result;
-                }
-            }
-            return result;
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "ancestorIds" }] : /* 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) {
-                        // Flagged, not just listed: a heading followed by rows aligned with it
-                        // reads as one flat list, and which rows belong to which group is lost.
-                        result.push({ key: grandChild.item.id, render: grandChild, grouped: true });
-                    }
-                }
-                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);
-            // The rows that are about to appear do not exist yet: the scroll is read and applied
-            // after the next render, when they do.
-            afterNextRender(() => this.revealBranch(id), { injector: this.injector });
-        }
-        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;
-    }
-    /**
-     * Scrolls the list so that the destinations a branch has just revealed are visible.
-     *
-     * Opening a parent sitting near the bottom of the list adds its children BELOW the fold: the
-     * row answers the click, and nothing seems to happen. This scrolls to the end of the branch so
-     * the options show up where the user is already looking.
-     *
-     * The parent row is never pushed out of the top: when a branch is taller than the list, showing
-     * its end would cost the row that was clicked, so the scroll stops with the parent at the top
-     * edge and the branch runs off the bottom — the user reads it downwards from there.
-     *
-     * Only the wide variants expand inline; in the compact ones the children live in the floating
-     * panel and there is nothing to scroll.
-     *
-     * @param id - Identifier of the parent destination that has just been expanded.
-     * @returns void
-     */
-    revealBranch(id) {
-        if (!this.isExpanded())
-            return;
-        const items = this.itemElements();
-        const index = items.findIndex(ref => ref.nativeElement.dataset['navId'] === id);
-        if (index < 0)
-            return;
-        const parent = items[index].nativeElement;
-        const list = parent.closest('.ars-nav__items');
-        if (!list)
-            return;
-        // The children are spliced in right after their parent and carry a deeper `data-depth`, so the
-        // branch is the run of rows that follows until the depth drops back.
-        const depth = Number(parent.dataset['depth'] ?? 0);
-        let last = parent;
-        for (let i = index + 1; i < items.length; i++) {
-            const row = items[i].nativeElement;
-            if (row.closest('.ars-nav__items') !== list)
-                break;
-            if (Number(row.dataset['depth'] ?? 0) <= depth)
-                break;
-            last = row;
-        }
-        // Nothing was revealed (an empty branch, or the rows are not rendered): nothing to scroll to.
-        if (last === parent)
-            return;
-        const view = list.clientHeight;
-        if (view === 0 || list.scrollHeight <= view)
-            return;
-        // `clientTop` is the top border: rects are measured from the border box, scrolling from the
-        // padding box, and without it a themed list with a border would scroll a hair short.
-        const origin = list.getBoundingClientRect().top + list.clientTop - list.scrollTop;
-        const top = parent.getBoundingClientRect().top - origin;
-        const end = last.getBoundingClientRect().bottom - origin;
-        // Scroll only far enough to clear the end of the branch, and never past the parent row.
-        const needed = end + BRANCH_SCROLL_PADDING - view;
-        if (needed <= list.scrollTop)
-            return;
-        const target = Math.max(0, Math.min(needed, top - BRANCH_SCROLL_PADDING));
-        if (target <= list.scrollTop)
-            return;
-        list.scrollTo({ top: target, behavior: prefersReducedMotion() ? 'auto' : 'smooth' });
-    }
-    // ── 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.7", ngImport: i0, type: NavigationBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", 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 }, childIcons: { classPropertyName: "childIcons", publicName: "childIcons", isSignal: true, isRequired: false, transformFunction: null }, dense: { classPropertyName: "dense", publicName: "dense", 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 }, railWidth: { classPropertyName: "railWidth", publicName: "railWidth", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", 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--dense": "dense()", "class.ars-navigation--hidden": "isHidden()", "style.--ars-navigation-width": "widthStyle()", "style.--ars-navigation-rail-width": "railWidthStyle()", "style.--ars-navigation-min-width": "minWidthStyle()", "style.--ars-navigation-max-width": "maxWidthStyle()" }, 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 stacked = resolvedLayout() === 'vertical';\n  @let wide = isExpanded();\n  @let active = activeId();\n  @let highlighted = highlightedIds();\n  @let ancestors = ancestorIds();\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          <!-- Clicking a parent opens and closes its branch, or its floating panel, and\n               never navigates. It can still BE the active destination, but only when it\n               owns a route of its own (`r.href`): that is a page the user can reach, so\n               the row is allowed to look selected. A parent without a route is never\n               selected \u2014 where it used to stand in for a destination it hides it now\n               carries `ancestor` instead: the trail, not the selection. -->\n          @let ancestor = ancestors.has(r.item.id);\n          <!-- Stacked layouts get the short form when the destination declares one, or\n               no label at all on `'none'`; `tooltip` and `ariaLabel` stay on the full\n               label either way, so the name is still one hover \u2014 or one screen reader \u2014\n               away. -->\n          @let stackedLabelHidden = stacked && r.item.labelVertical === 'none';\n          @let displayLabel = stacked ? (r.item.labelVertical ?? r.item.label) : r.item.label;\n          @let selected = highlighted.has(r.item.id) && (!r.hasChildren || !!r.href);\n          <!-- `stackedLabelHidden` counts as \"no label on screen\": that is what turns the\n               tooltip back on, which is the only place the name is left to be read. -->\n          @let labelVisible = !r.iconOnly && !stackedLabelHidden\n            && (labels === 'labeled' || (labels === 'selected' && (selected || ancestor)));\n          @let branchOpen = r.hasChildren && openIds.has(r.item.id);\n          @let hideIcon = wide && r.depth > 0 && !childIcons();\n          <!-- In the compact variants the children live in a floating panel, so an\n               ancestor row IS how the active destination shows on screen: it takes the\n               selected look whole, icon variant included, exactly like a destination\n               without children. In the expanded ones the active row is visible on its\n               own and the ancestor stays the quieter trail. -->\n          @let activeLook = selected || (!wide && ancestor);\n          @let svg = activeLook ? r.svgOn : r.svgOff;\n          @let image = activeLook ? r.imageOn : r.imageOff;\n          @let ligature = activeLook ? 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--icon-stacked]=\"stackedLabelHidden\"\n               [class.ars-nav__item--greyed]=\"r.item.greyed\"\n               [class.ars-nav__item--disabled]=\"r.item.disabled\"\n               [class.ars-nav__item--no-icon]=\"hideIcon\"\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              @if (!hideIcon) {\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              }\n              @if (labels !== 'unlabeled' && !r.iconOnly && !stackedLabelHidden) {\n                <span class=\"ars-nav__label\" [class.ars-nav__label--hidden]=\"!labelVisible\">{{ displayLabel }}</span>\n              }\n              @if (wide && r.item.trailing) {\n                <span class=\"ars-nav__trailing\">{{ r.item.trailing }}</span>\n              }\n              <!-- The badge of an icon-less child has no icon box to sit on: it moves\n                   to the trailing edge, exactly as the submenu panel renders it. -->\n              @if (hideIcon && r.hasBadge) {\n                <span class=\"ars-nav__badge ars-nav__badge--inline\"\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            </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--ancestor]=\"ancestor\"\n                    [class.ars-nav__item--icon-stacked]=\"stackedLabelHidden\"\n                    [class.ars-nav__item--greyed]=\"r.item.greyed\"\n                    [class.ars-nav__item--disabled]=\"r.item.disabled\"\n                    [class.ars-nav__item--no-icon]=\"hideIcon\"\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              @if (!hideIcon) {\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              }\n              @if (labels !== 'unlabeled' && !r.iconOnly && !stackedLabelHidden) {\n                <span class=\"ars-nav__label\" [class.ars-nav__label--hidden]=\"!labelVisible\">{{ displayLabel }}</span>\n              }\n              @if (wide && r.item.trailing) {\n                <span class=\"ars-nav__trailing\">{{ r.item.trailing }}</span>\n              }\n              <!-- The badge of an icon-less child has no icon box to sit on: it moves\n                   to the trailing edge, exactly as the submenu panel renders it. -->\n              @if (hideIcon && r.hasBadge) {\n                <span class=\"ars-nav__badge ars-nav__badge--inline\"\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              @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--grouped]=\"entry.grouped\"\n             [class.ars-nav-submenu__item--selected]=\"childSelected\"\n             [class.ars-nav-submenu__item--greyed]=\"c.item.greyed\"\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--grouped]=\"entry.grouped\"\n                  [class.ars-nav-submenu__item--selected]=\"childSelected\"\n                  [class.ars-nav-submenu__item--greyed]=\"c.item.greyed\"\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;--_row-height: var(--ars-navigation-item-height, 56px);--_row-gap: var(--ars-navigation-item-gap, 4px);--_row-font-size: var(--ars-navigation-label-font-size, 14px);--_child-height: var(--ars-navigation-child-height, 48px);--_child-font-size: var(--ars-navigation-child-font-size, 13px);--_section-padding: 18px 16px 8px;--_row-pad-start: var(--ars-navigation-item-padding-start, 24px);--_row-pad-end: var(--ars-navigation-item-padding-end, 24px);--_label-lines: var(--ars-navigation-label-lines, 2);--_rtl: 1;display:block;box-sizing:border-box;color:var(--_label);-webkit-tap-highlight-color:transparent}:host-context([dir=rtl]){--_rtl: -1}:host(.ars-navigation--dense){--_row-height: var(--ars-navigation-dense-item-height, 44px);--_child-height: var(--ars-navigation-dense-child-height, 36px);--_section-padding: 12px 16px 4px}:host(.ars-navigation--dense){--_row-pad-start: var(--ars-navigation-dense-item-padding-start, 12px);--_row-pad-end: var(--ars-navigation-dense-item-padding-end, 12px)}.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:var(--_section-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}.ars-nav__badge--inline{position:static;z-index:1;flex:none;margin-inline-start:8px}.ars-nav__badge--inline.ars-nav__badge--dot{margin-inline-start:12px}: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--icon-stacked .ars-nav__icon-box:before,:host([data-indicator=compact]) .ars-nav__item--icon-stacked .ars-nav__icon-box:after{width:var(--ars-navigation-icon-button-size, 48px);height:var(--ars-navigation-icon-button-size, 48px);margin:calc(var(--ars-navigation-icon-button-size, 48px) / -2) 0 0 calc(var(--ars-navigation-icon-button-size, 48px) / -2);border-radius:50%}: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--ancestor:not(.ars-nav__item--selected) .ars-nav__label{color:var(--_label-active)}.ars-nav__item--ancestor:not(.ars-nav__item--selected) .ars-nav__icon-box,.ars-nav__item--ancestor:not(.ars-nav__item--selected) .ars-nav__chevron{color:var(--_label-active)}:host([data-variant=bar][data-indicator=compact]) .ars-nav__item--ancestor .ars-nav__icon-box:before,:host([data-variant=rail][data-indicator=compact]) .ars-nav__item--ancestor .ars-nav__icon-box:before{opacity:1;transform:scaleX(1)}:host([data-variant=bar]) .ars-nav__item--ancestor .ars-nav__icon-box,:host([data-variant=rail]) .ars-nav__item--ancestor .ars-nav__icon-box{color:var(--_icon-active)}:host([data-variant=bar]) .ars-nav__item--ancestor .ars-nav__icon,:host([data-variant=rail]) .ars-nav__item--ancestor .ars-nav__icon{font-variation-settings:\"FILL\" 1}.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)}.ars-nav__item--greyed:not(.ars-nav__item--selected) .ars-nav__label,.ars-nav__item--greyed:not(.ars-nav__item--selected) .ars-nav__icon-box,.ars-nav__item--greyed:not(.ars-nav__item--selected) .ars-nav__trailing,.ars-nav-submenu__item--greyed:not(.ars-nav-submenu__item--selected){opacity:var(--ars-navigation-greyed-opacity, .5);transition:opacity var(--_dur-short, .15s) var(--_easing, cubic-bezier(.2, 0, 0, 1))}.ars-nav__item--greyed:where(:hover,:focus-visible) .ars-nav__label,.ars-nav__item--greyed:where(:hover,:focus-visible) .ars-nav__icon-box,.ars-nav__item--greyed:where(:hover,:focus-visible) .ars-nav__trailing,.ars-nav-submenu__item--greyed:where(:hover,:focus-visible){opacity:1}: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:var(--ars-navigation-vertical-gap, 0);padding-block:var(--ars-navigation-vertical-label-padding, 8px);max-width:100%;text-align:center;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--_label-lines, 2);line-clamp:var(--_label-lines, 2);white-space:normal;overflow-wrap:anywhere;line-height:var(--ars-navigation-vertical-label-line-height, 14px)}: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 .ars-nav__item--selected .ars-nav__label,:host .ars-nav__item--ancestor .ars-nav__label{font-weight:var(--ars-navigation-selected-font-weight, 700)}:host([data-variant=bar]) .ars-nav__item--selected .ars-nav__label,:host([data-variant=bar]) .ars-nav__item--ancestor .ars-nav__label,:host([data-variant=rail]) .ars-nav__item--selected .ars-nav__label,:host([data-variant=rail]) .ars-nav__item--ancestor .ars-nav__label{font-weight:var(--ars-navigation-compact-selected-font-weight, 500)}: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, 80px);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-layout=vertical]) .ars-nav__item{justify-content:flex-start;padding-block-start:var(--ars-navigation-bar-item-padding-top, 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-rail-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:var(--ars-navigation-rail-item-gap, 8px);width:100%;overflow-y:auto;overscroll-behavior:contain}:host([data-variant=rail]) .ars-nav__item{justify-content:center;width:100%;min-height:var(--ars-navigation-rail-item-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:var(--_row-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{min-height:var(--_row-height, 56px);padding-block:0;padding-inline:calc(var(--_row-pad-start, 24px) + var(--_depth-indent, 0px)) var(--_row-pad-end, 24px);margin-block:0;margin-inline:var(--ars-navigation-item-inset, 20px)}:host(.ars-navigation--dense) .ars-nav__item{padding-inline:calc(var(--_row-pad-start, 12px) + var(--_depth-indent, 0px)) var(--_row-pad-end, 12px)}:host([data-variant=rail-expanded]) .ars-nav__item[data-depth]:not([data-depth=\"0\"])+.ars-nav__item[data-depth=\"0\"],:host([data-variant=drawer]) .ars-nav__item[data-depth]:not([data-depth=\"0\"])+.ars-nav__item[data-depth=\"0\"],:host([data-variant=modal]) .ars-nav__item[data-depth]:not([data-depth=\"0\"])+.ars-nav__item[data-depth=\"0\"]{margin-block-start:var(--ars-navigation-branch-end-gap, 12px)}:host([data-variant=rail-expanded]) .ars-nav__item[data-depth]:not([data-depth=\"0\"]):last-child,:host([data-variant=drawer]) .ars-nav__item[data-depth]:not([data-depth=\"0\"]):last-child,:host([data-variant=modal]) .ars-nav__item[data-depth]:not([data-depth=\"0\"]):last-child{margin-block-end:var(--ars-navigation-branch-end-gap, 12px)}: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__item[data-depth]:not([data-depth=\"0\"]),:host([data-variant=drawer]) .ars-nav__item[data-depth]:not([data-depth=\"0\"]),:host([data-variant=modal]) .ars-nav__item[data-depth]:not([data-depth=\"0\"]){min-height:var(--_child-height, 48px)}:host([data-variant=rail-expanded]) .ars-nav__item[data-depth]:not([data-depth=\"0\"]) .ars-nav__label,:host([data-variant=drawer]) .ars-nav__item[data-depth]:not([data-depth=\"0\"]) .ars-nav__label,:host([data-variant=modal]) .ars-nav__item[data-depth]:not([data-depth=\"0\"]) .ars-nav__label{font-size:var(--_child-font-size, 13px)}:host([data-variant=rail-expanded]) .ars-nav__label,:host([data-variant=drawer]) .ars-nav__label,:host([data-variant=modal]) .ars-nav__label{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--_label-lines, 2);line-clamp:var(--_label-lines, 2);white-space:normal;overflow-wrap:anywhere;line-height:var(--ars-navigation-label-line-height, 18px);flex:1 1 auto;margin-inline-start:0;font-size:var(--_row-font-size, 14px)}:host([data-variant=rail-expanded]) .ars-nav{width:var(--ars-navigation-width, 220px);min-width:var(--ars-navigation-min-width, 0);max-width:var(--ars-navigation-max-width, 100%)}:host([data-variant=drawer]) .ars-nav,:host([data-variant=modal]) .ars-nav{width:var(--ars-navigation-width, 360px);min-width:var(--ars-navigation-min-width, 0);max-width:var(--ars-navigation-max-width, 100%)}: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,:host([data-variant=bar]) .ars-nav__item--ancestor .ars-nav__icon--sprite,:host([data-variant=rail]) .ars-nav__item--ancestor .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;opacity:0;transition:rotate var(--_dur) var(--_easing),opacity var(--_dur-short) var(--_easing)}.ars-nav__item:where(:hover,:focus-visible) .ars-nav__chevron{opacity:1}@media(hover:none){.ars-nav__chevron{opacity:1}}.ars-nav__chevron--open{rotate:180deg}.ars-nav__item[data-depth=\"1\"]{--_depth-indent: 24px}.ars-nav__item[data-depth=\"2\"]{--_depth-indent: 48px}.ars-nav__item[data-depth=\"3\"]{--_depth-indent: 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(--ars-navigation-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--grouped{padding-inline-start:var(--ars-navigation-menu-group-indent, 24px)}.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 .ars-nav-submenu__label{font-weight:var(--ars-navigation-selected-font-weight, 700)}.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{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--ars-navigation-label-lines, 2);line-clamp:var(--ars-navigation-label-lines, 2);flex:1 1 auto;min-width:0;padding-block:8px;font-size:14px;line-height:var(--ars-navigation-label-line-height, 18px);font-weight:500;letter-spacing:.1px;white-space:normal;overflow-wrap:anywhere;overflow:hidden}.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.7", 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--dense]': 'dense()',
-                        '[class.ars-navigation--hidden]': 'isHidden()',
-                        '[style.--ars-navigation-width]': 'widthStyle()',
-                        '[style.--ars-navigation-rail-width]': 'railWidthStyle()',
-                        '[style.--ars-navigation-min-width]': 'minWidthStyle()',
-                        '[style.--ars-navigation-max-width]': 'maxWidthStyle()',
-                    }, 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 stacked = resolvedLayout() === 'vertical';\n  @let wide = isExpanded();\n  @let active = activeId();\n  @let highlighted = highlightedIds();\n  @let ancestors = ancestorIds();\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          <!-- Clicking a parent opens and closes its branch, or its floating panel, and\n               never navigates. It can still BE the active destination, but only when it\n               owns a route of its own (`r.href`): that is a page the user can reach, so\n               the row is allowed to look selected. A parent without a route is never\n               selected \u2014 where it used to stand in for a destination it hides it now\n               carries `ancestor` instead: the trail, not the selection. -->\n          @let ancestor = ancestors.has(r.item.id);\n          <!-- Stacked layouts get the short form when the destination declares one, or\n               no label at all on `'none'`; `tooltip` and `ariaLabel` stay on the full\n               label either way, so the name is still one hover \u2014 or one screen reader \u2014\n               away. -->\n          @let stackedLabelHidden = stacked && r.item.labelVertical === 'none';\n          @let displayLabel = stacked ? (r.item.labelVertical ?? r.item.label) : r.item.label;\n          @let selected = highlighted.has(r.item.id) && (!r.hasChildren || !!r.href);\n          <!-- `stackedLabelHidden` counts as \"no label on screen\": that is what turns the\n               tooltip back on, which is the only place the name is left to be read. -->\n          @let labelVisible = !r.iconOnly && !stackedLabelHidden\n            && (labels === 'labeled' || (labels === 'selected' && (selected || ancestor)));\n          @let branchOpen = r.hasChildren && openIds.has(r.item.id);\n          @let hideIcon = wide && r.depth > 0 && !childIcons();\n          <!-- In the compact variants the children live in a floating panel, so an\n               ancestor row IS how the active destination shows on screen: it takes the\n               selected look whole, icon variant included, exactly like a destination\n               without children. In the expanded ones the active row is visible on its\n               own and the ancestor stays the quieter trail. -->\n          @let activeLook = selected || (!wide && ancestor);\n          @let svg = activeLook ? r.svgOn : r.svgOff;\n          @let image = activeLook ? r.imageOn : r.imageOff;\n          @let ligature = activeLook ? 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--icon-stacked]=\"stackedLabelHidden\"\n               [class.ars-nav__item--greyed]=\"r.item.greyed\"\n               [class.ars-nav__item--disabled]=\"r.item.disabled\"\n               [class.ars-nav__item--no-icon]=\"hideIcon\"\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              @if (!hideIcon) {\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              }\n              @if (labels !== 'unlabeled' && !r.iconOnly && !stackedLabelHidden) {\n                <span class=\"ars-nav__label\" [class.ars-nav__label--hidden]=\"!labelVisible\">{{ displayLabel }}</span>\n              }\n              @if (wide && r.item.trailing) {\n                <span class=\"ars-nav__trailing\">{{ r.item.trailing }}</span>\n              }\n              <!-- The badge of an icon-less child has no icon box to sit on: it moves\n                   to the trailing edge, exactly as the submenu panel renders it. -->\n              @if (hideIcon && r.hasBadge) {\n                <span class=\"ars-nav__badge ars-nav__badge--inline\"\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            </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--ancestor]=\"ancestor\"\n                    [class.ars-nav__item--icon-stacked]=\"stackedLabelHidden\"\n                    [class.ars-nav__item--greyed]=\"r.item.greyed\"\n                    [class.ars-nav__item--disabled]=\"r.item.disabled\"\n                    [class.ars-nav__item--no-icon]=\"hideIcon\"\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              @if (!hideIcon) {\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              }\n              @if (labels !== 'unlabeled' && !r.iconOnly && !stackedLabelHidden) {\n                <span class=\"ars-nav__label\" [class.ars-nav__label--hidden]=\"!labelVisible\">{{ displayLabel }}</span>\n              }\n              @if (wide && r.item.trailing) {\n                <span class=\"ars-nav__trailing\">{{ r.item.trailing }}</span>\n              }\n              <!-- The badge of an icon-less child has no icon box to sit on: it moves\n                   to the trailing edge, exactly as the submenu panel renders it. -->\n              @if (hideIcon && r.hasBadge) {\n                <span class=\"ars-nav__badge ars-nav__badge--inline\"\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              @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--grouped]=\"entry.grouped\"\n             [class.ars-nav-submenu__item--selected]=\"childSelected\"\n             [class.ars-nav-submenu__item--greyed]=\"c.item.greyed\"\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--grouped]=\"entry.grouped\"\n                  [class.ars-nav-submenu__item--selected]=\"childSelected\"\n                  [class.ars-nav-submenu__item--greyed]=\"c.item.greyed\"\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;--_row-height: var(--ars-navigation-item-height, 56px);--_row-gap: var(--ars-navigation-item-gap, 4px);--_row-font-size: var(--ars-navigation-label-font-size, 14px);--_child-height: var(--ars-navigation-child-height, 48px);--_child-font-size: var(--ars-navigation-child-font-size, 13px);--_section-padding: 18px 16px 8px;--_row-pad-start: var(--ars-navigation-item-padding-start, 24px);--_row-pad-end: var(--ars-navigation-item-padding-end, 24px);--_label-lines: var(--ars-navigation-label-lines, 2);--_rtl: 1;display:block;box-sizing:border-box;color:var(--_label);-webkit-tap-highlight-color:transparent}:host-context([dir=rtl]){--_rtl: -1}:host(.ars-navigation--dense){--_row-height: var(--ars-navigation-dense-item-height, 44px);--_child-height: var(--ars-navigation-dense-child-height, 36px);--_section-padding: 12px 16px 4px}:host(.ars-navigation--dense){--_row-pad-start: var(--ars-navigation-dense-item-padding-start, 12px);--_row-pad-end: var(--ars-navigation-dense-item-padding-end, 12px)}.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:var(--_section-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}.ars-nav__badge--inline{position:static;z-index:1;flex:none;margin-inline-start:8px}.ars-nav__badge--inline.ars-nav__badge--dot{margin-inline-start:12px}: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--icon-stacked .ars-nav__icon-box:before,:host([data-indicator=compact]) .ars-nav__item--icon-stacked .ars-nav__icon-box:after{width:var(--ars-navigation-icon-button-size, 48px);height:var(--ars-navigation-icon-button-size, 48px);margin:calc(var(--ars-navigation-icon-button-size, 48px) / -2) 0 0 calc(var(--ars-navigation-icon-button-size, 48px) / -2);border-radius:50%}: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--ancestor:not(.ars-nav__item--selected) .ars-nav__label{color:var(--_label-active)}.ars-nav__item--ancestor:not(.ars-nav__item--selected) .ars-nav__icon-box,.ars-nav__item--ancestor:not(.ars-nav__item--selected) .ars-nav__chevron{color:var(--_label-active)}:host([data-variant=bar][data-indicator=compact]) .ars-nav__item--ancestor .ars-nav__icon-box:before,:host([data-variant=rail][data-indicator=compact]) .ars-nav__item--ancestor .ars-nav__icon-box:before{opacity:1;transform:scaleX(1)}:host([data-variant=bar]) .ars-nav__item--ancestor .ars-nav__icon-box,:host([data-variant=rail]) .ars-nav__item--ancestor .ars-nav__icon-box{color:var(--_icon-active)}:host([data-variant=bar]) .ars-nav__item--ancestor .ars-nav__icon,:host([data-variant=rail]) .ars-nav__item--ancestor .ars-nav__icon{font-variation-settings:\"FILL\" 1}.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)}.ars-nav__item--greyed:not(.ars-nav__item--selected) .ars-nav__label,.ars-nav__item--greyed:not(.ars-nav__item--selected) .ars-nav__icon-box,.ars-nav__item--greyed:not(.ars-nav__item--selected) .ars-nav__trailing,.ars-nav-submenu__item--greyed:not(.ars-nav-submenu__item--selected){opacity:var(--ars-navigation-greyed-opacity, .5);transition:opacity var(--_dur-short, .15s) var(--_easing, cubic-bezier(.2, 0, 0, 1))}.ars-nav__item--greyed:where(:hover,:focus-visible) .ars-nav__label,.ars-nav__item--greyed:where(:hover,:focus-visible) .ars-nav__icon-box,.ars-nav__item--greyed:where(:hover,:focus-visible) .ars-nav__trailing,.ars-nav-submenu__item--greyed:where(:hover,:focus-visible){opacity:1}: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:var(--ars-navigation-vertical-gap, 0);padding-block:var(--ars-navigation-vertical-label-padding, 8px);max-width:100%;text-align:center;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--_label-lines, 2);line-clamp:var(--_label-lines, 2);white-space:normal;overflow-wrap:anywhere;line-height:var(--ars-navigation-vertical-label-line-height, 14px)}: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 .ars-nav__item--selected .ars-nav__label,:host .ars-nav__item--ancestor .ars-nav__label{font-weight:var(--ars-navigation-selected-font-weight, 700)}:host([data-variant=bar]) .ars-nav__item--selected .ars-nav__label,:host([data-variant=bar]) .ars-nav__item--ancestor .ars-nav__label,:host([data-variant=rail]) .ars-nav__item--selected .ars-nav__label,:host([data-variant=rail]) .ars-nav__item--ancestor .ars-nav__label{font-weight:var(--ars-navigation-compact-selected-font-weight, 500)}: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, 80px);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-layout=vertical]) .ars-nav__item{justify-content:flex-start;padding-block-start:var(--ars-navigation-bar-item-padding-top, 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-rail-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:var(--ars-navigation-rail-item-gap, 8px);width:100%;overflow-y:auto;overscroll-behavior:contain}:host([data-variant=rail]) .ars-nav__item{justify-content:center;width:100%;min-height:var(--ars-navigation-rail-item-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:var(--_row-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{min-height:var(--_row-height, 56px);padding-block:0;padding-inline:calc(var(--_row-pad-start, 24px) + var(--_depth-indent, 0px)) var(--_row-pad-end, 24px);margin-block:0;margin-inline:var(--ars-navigation-item-inset, 20px)}:host(.ars-navigation--dense) .ars-nav__item{padding-inline:calc(var(--_row-pad-start, 12px) + var(--_depth-indent, 0px)) var(--_row-pad-end, 12px)}:host([data-variant=rail-expanded]) .ars-nav__item[data-depth]:not([data-depth=\"0\"])+.ars-nav__item[data-depth=\"0\"],:host([data-variant=drawer]) .ars-nav__item[data-depth]:not([data-depth=\"0\"])+.ars-nav__item[data-depth=\"0\"],:host([data-variant=modal]) .ars-nav__item[data-depth]:not([data-depth=\"0\"])+.ars-nav__item[data-depth=\"0\"]{margin-block-start:var(--ars-navigation-branch-end-gap, 12px)}:host([data-variant=rail-expanded]) .ars-nav__item[data-depth]:not([data-depth=\"0\"]):last-child,:host([data-variant=drawer]) .ars-nav__item[data-depth]:not([data-depth=\"0\"]):last-child,:host([data-variant=modal]) .ars-nav__item[data-depth]:not([data-depth=\"0\"]):last-child{margin-block-end:var(--ars-navigation-branch-end-gap, 12px)}: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__item[data-depth]:not([data-depth=\"0\"]),:host([data-variant=drawer]) .ars-nav__item[data-depth]:not([data-depth=\"0\"]),:host([data-variant=modal]) .ars-nav__item[data-depth]:not([data-depth=\"0\"]){min-height:var(--_child-height, 48px)}:host([data-variant=rail-expanded]) .ars-nav__item[data-depth]:not([data-depth=\"0\"]) .ars-nav__label,:host([data-variant=drawer]) .ars-nav__item[data-depth]:not([data-depth=\"0\"]) .ars-nav__label,:host([data-variant=modal]) .ars-nav__item[data-depth]:not([data-depth=\"0\"]) .ars-nav__label{font-size:var(--_child-font-size, 13px)}:host([data-variant=rail-expanded]) .ars-nav__label,:host([data-variant=drawer]) .ars-nav__label,:host([data-variant=modal]) .ars-nav__label{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--_label-lines, 2);line-clamp:var(--_label-lines, 2);white-space:normal;overflow-wrap:anywhere;line-height:var(--ars-navigation-label-line-height, 18px);flex:1 1 auto;margin-inline-start:0;font-size:var(--_row-font-size, 14px)}:host([data-variant=rail-expanded]) .ars-nav{width:var(--ars-navigation-width, 220px);min-width:var(--ars-navigation-min-width, 0);max-width:var(--ars-navigation-max-width, 100%)}:host([data-variant=drawer]) .ars-nav,:host([data-variant=modal]) .ars-nav{width:var(--ars-navigation-width, 360px);min-width:var(--ars-navigation-min-width, 0);max-width:var(--ars-navigation-max-width, 100%)}: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,:host([data-variant=bar]) .ars-nav__item--ancestor .ars-nav__icon--sprite,:host([data-variant=rail]) .ars-nav__item--ancestor .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;opacity:0;transition:rotate var(--_dur) var(--_easing),opacity var(--_dur-short) var(--_easing)}.ars-nav__item:where(:hover,:focus-visible) .ars-nav__chevron{opacity:1}@media(hover:none){.ars-nav__chevron{opacity:1}}.ars-nav__chevron--open{rotate:180deg}.ars-nav__item[data-depth=\"1\"]{--_depth-indent: 24px}.ars-nav__item[data-depth=\"2\"]{--_depth-indent: 48px}.ars-nav__item[data-depth=\"3\"]{--_depth-indent: 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(--ars-navigation-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--grouped{padding-inline-start:var(--ars-navigation-menu-group-indent, 24px)}.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 .ars-nav-submenu__label{font-weight:var(--ars-navigation-selected-font-weight, 700)}.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{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--ars-navigation-label-lines, 2);line-clamp:var(--ars-navigation-label-lines, 2);flex:1 1 auto;min-width:0;padding-block:8px;font-size:14px;line-height:var(--ars-navigation-label-line-height, 18px);font-weight:500;letter-spacing:.1px;white-space:normal;overflow-wrap:anywhere;overflow:hidden}.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 }] }], childIcons: [{ type: i0.Input, args: [{ isSignal: true, alias: "childIcons", required: false }] }], dense: [{ type: i0.Input, args: [{ isSignal: true, alias: "dense", 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 }] }], railWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "railWidth", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", 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.
- */
-
+var NavigationBarComponent = class NavigationBarComponent {
+	constructor() {
+		this.media = inject(MediaObserver);
+		this.themeService = inject(ThemeService, { optional: true });
+		this.router = inject(Router, { optional: true });
+		this.directionality = inject(Directionality, { optional: true });
+		this.hostRef = inject(ElementRef);
+		this.injector = inject(Injector);
+		this.destroyRef = inject(DestroyRef);
+		this.items = input([], ...ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []);
+		this.sections = input([], ...ngDevMode ? [{ debugName: "sections" }] : /* istanbul ignore next */ []);
+		this.variant = input("auto", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
+		this.autoVariants = input({}, ...ngDevMode ? [{ debugName: "autoVariants" }] : /* istanbul ignore next */ []);
+		this.selectedId = model(void 0, ...ngDevMode ? [{ debugName: "selectedId" }] : /* istanbul ignore next */ []);
+		this.expandedIds = model(void 0, ...ngDevMode ? [{ debugName: "expandedIds" }] : /* istanbul ignore next */ []);
+		this.open = model(false, ...ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []);
+		this.labelVisibility = input("auto", ...ngDevMode ? [{ debugName: "labelVisibility" }] : /* istanbul ignore next */ []);
+		this.itemLayout = input("auto", ...ngDevMode ? [{ debugName: "itemLayout" }] : /* istanbul ignore next */ []);
+		this.childIcons = input(false, {
+			...ngDevMode ? { debugName: "childIcons" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.dense = input(false, {
+			...ngDevMode ? { debugName: "dense" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.alignment = input("top", ...ngDevMode ? [{ debugName: "alignment" }] : /* istanbul ignore next */ []);
+		this.position = input("start", ...ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []);
+		this.headline = input(void 0, ...ngDevMode ? [{ debugName: "headline" }] : /* istanbul ignore next */ []);
+		this.showMenuButton = input(false, {
+			...ngDevMode ? { debugName: "showMenuButton" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.menuIcon = input("menu", ...ngDevMode ? [{ debugName: "menuIcon" }] : /* istanbul ignore next */ []);
+		this.expandIcon = input("expand_more", ...ngDevMode ? [{ debugName: "expandIcon" }] : /* istanbul ignore next */ []);
+		this.overflowMode = input("bar", ...ngDevMode ? [{ debugName: "overflowMode" }] : /* istanbul ignore next */ []);
+		this.overflowIcon = input("more_vert", ...ngDevMode ? [{ debugName: "overflowIcon" }] : /* istanbul ignore next */ []);
+		this.overflowLabel = input("More", ...ngDevMode ? [{ debugName: "overflowLabel" }] : /* istanbul ignore next */ []);
+		this.maxVisibleItems = input(0, {
+			...ngDevMode ? { debugName: "maxVisibleItems" } : /* istanbul ignore next */ {},
+			transform: numberAttribute
+		});
+		this.menuAriaLabel = input("Menu", ...ngDevMode ? [{ debugName: "menuAriaLabel" }] : /* istanbul ignore next */ []);
+		this.ariaLabel = input("Navigation", ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+		this.scrim = input(true, {
+			...ngDevMode ? { debugName: "scrim" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.closeOnSelect = input(true, {
+			...ngDevMode ? { debugName: "closeOnSelect" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.elevated = input(true, {
+			...ngDevMode ? { debugName: "elevated" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.bordered = input(false, {
+			...ngDevMode ? { debugName: "bordered" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.tooltips = input(true, {
+			...ngDevMode ? { debugName: "tooltips" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.routerSync = input(true, {
+			...ngDevMode ? { debugName: "routerSync" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.relativeTo = input(void 0, ...ngDevMode ? [{ debugName: "relativeTo" }] : /* istanbul ignore next */ []);
+		this.width = input(0, {
+			...ngDevMode ? { debugName: "width" } : /* istanbul ignore next */ {},
+			transform: numberAttribute
+		});
+		this.railWidth = input(0, {
+			...ngDevMode ? { debugName: "railWidth" } : /* istanbul ignore next */ {},
+			transform: numberAttribute
+		});
+		this.minWidth = input(0, {
+			...ngDevMode ? { debugName: "minWidth" } : /* istanbul ignore next */ {},
+			transform: numberAttribute
+		});
+		this.maxWidth = input(0, {
+			...ngDevMode ? { debugName: "maxWidth" } : /* istanbul ignore next */ {},
+			transform: numberAttribute
+		});
+		this.hidden = input(false, {
+			...ngDevMode ? { debugName: "hidden" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.itemSelected = output();
+		this.menuClick = output();
+		this.itemElements = viewChildren("navItem", ...ngDevMode ? [{ debugName: "itemElements" }] : /* istanbul ignore next */ []);
+		this.panelElements = viewChildren("panelItem", ...ngDevMode ? [{ debugName: "panelElements" }] : /* istanbul ignore next */ []);
+		this.routerUrl = signal(void 0, ...ngDevMode ? [{ debugName: "routerUrl" }] : /* istanbul ignore next */ []);
+		this.themeChanged = toSignal(this.themeService?.changed ?? EMPTY, { initialValue: void 0 });
+		this.isDark = computed(() => {
+			this.themeChanged();
+			return this.themeService?.getTheme() === "dark";
+		}, ...ngDevMode ? [{ debugName: "isDark" }] : /* istanbul ignore next */ []);
+		this.popupId = signal(void 0, ...ngDevMode ? [{ debugName: "popupId" }] : /* istanbul ignore next */ []);
+		this.popupItem = computed(() => {
+			const id = this.popupId();
+			if (id === void 0) return void 0;
+			const find = (list) => {
+				for (const rendered of list) {
+					if (rendered.item.id === id) return rendered;
+					const nested = find(rendered.children);
+					if (nested) return nested;
+				}
+			};
+			for (const group of this.visibleGroups()) for (const section of group.sections) {
+				const hit = find(section.items);
+				if (hit) return hit;
+			}
+		}, ...ngDevMode ? [{ debugName: "popupItem" }] : /* istanbul ignore next */ []);
+		this.popupAnchor = signal(void 0, ...ngDevMode ? [{ debugName: "popupAnchor" }] : /* istanbul ignore next */ []);
+		this.resolvedSections = computed(() => {
+			const sections = this.sections();
+			if (sections.length > 0) return sections;
+			return [{
+				id: "__default",
+				items: this.items()
+			}];
+		}, ...ngDevMode ? [{ debugName: "resolvedSections" }] : /* istanbul ignore next */ []);
+		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;
+		}, ...ngDevMode ? [{ debugName: "allItems" }] : /* istanbul ignore next */ []);
+		this.parentOf = computed(() => {
+			const result = /* @__PURE__ */ new Map();
+			const walk = (list, parentId) => {
+				for (const item of list) {
+					if (parentId !== void 0) 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;
+		}, ...ngDevMode ? [{ debugName: "parentOf" }] : /* istanbul ignore next */ []);
+		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];
+		}, ...ngDevMode ? [{ debugName: "resolvedVariant" }] : /* istanbul ignore next */ []);
+		this.isExpanded = computed(() => EXPANDED_NAVIGATION_VARIANTS.includes(this.resolvedVariant()), ...ngDevMode ? [{ debugName: "isExpanded" }] : /* istanbul ignore next */ []);
+		this.isModal = computed(() => this.resolvedVariant() === "modal", ...ngDevMode ? [{ debugName: "isModal" }] : /* istanbul ignore next */ []);
+		this.isOverlayOpen = computed(() => this.isModal() && this.open(), ...ngDevMode ? [{ debugName: "isOverlayOpen" }] : /* istanbul ignore next */ []);
+		this.isHidden = computed(() => this.hidden() || this.isModal() && !this.open(), ...ngDevMode ? [{ debugName: "isHidden" }] : /* istanbul ignore next */ []);
+		this.resolvedLayout = computed(() => {
+			if (this.isExpanded()) return "horizontal";
+			const layout = this.itemLayout();
+			if (layout !== "auto") return layout;
+			return this.resolvedVariant() === "bar" && this.media.currentBp() !== "xs" ? "horizontal" : "vertical";
+		}, ...ngDevMode ? [{ debugName: "resolvedLayout" }] : /* istanbul ignore next */ []);
+		this.resolvedLabelVisibility = computed(() => {
+			if (this.isExpanded()) return "labeled";
+			const visibility = this.labelVisibility();
+			return visibility === "auto" ? "labeled" : visibility;
+		}, ...ngDevMode ? [{ debugName: "resolvedLabelVisibility" }] : /* istanbul ignore next */ []);
+		this.showsHeader = computed(() => this.resolvedVariant() !== "bar" && (this.showMenuButton() || this.isExpanded() && !!this.headline()), ...ngDevMode ? [{ debugName: "showsHeader" }] : /* istanbul ignore next */ []);
+		this.indicatorMode = computed(() => this.isExpanded() || this.resolvedLayout() === "horizontal" ? "wide" : "compact", ...ngDevMode ? [{ debugName: "indicatorMode" }] : /* istanbul ignore next */ []);
+		this.tooltipPosition = computed(() => {
+			if (this.resolvedVariant() === "bar") return "above";
+			return this.position() === "end" ? "before" : "after";
+		}, ...ngDevMode ? [{ debugName: "tooltipPosition" }] : /* istanbul ignore next */ []);
+		this.widthStyle = computed(() => {
+			const width = this.width();
+			return width > 0 ? `${width}px` : void 0;
+		}, ...ngDevMode ? [{ debugName: "widthStyle" }] : /* istanbul ignore next */ []);
+		this.railWidthStyle = computed(() => {
+			const width = this.railWidth();
+			return width > 0 ? `${width}px` : void 0;
+		}, ...ngDevMode ? [{ debugName: "railWidthStyle" }] : /* istanbul ignore next */ []);
+		this.minWidthStyle = computed(() => {
+			const width = this.minWidth();
+			return width > 0 ? `${width}px` : void 0;
+		}, ...ngDevMode ? [{ debugName: "minWidthStyle" }] : /* istanbul ignore next */ []);
+		this.maxWidthStyle = computed(() => {
+			const width = this.maxWidth();
+			return width > 0 ? `${width}px` : void 0;
+		}, ...ngDevMode ? [{ debugName: "maxWidthStyle" }] : /* istanbul ignore next */ []);
+		this.hrefs = computed(() => {
+			const result = /* @__PURE__ */ 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 !== void 0 && 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 {}
+				}
+			}
+			return result;
+		}, ...ngDevMode ? [{ debugName: "hrefs" }] : /* istanbul ignore next */ []);
+		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, void 0, 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;
+		}, ...ngDevMode ? [{ debugName: "renderGroups" }] : /* istanbul ignore next */ []);
+		this.routerActiveId = computed(() => {
+			if (!this.routerSync()) return void 0;
+			const url = this.routerUrl();
+			if (!url) return void 0;
+			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 === void 0) continue;
+				const href = hrefs.get(item.id);
+				if (!href) continue;
+				const target = NavigationBarComponent.pathOf(href);
+				if ((item.exact ? path === target : path === target || path.startsWith(target.endsWith("/") ? target : `${target}/`)) && target.length > bestLength) {
+					best = item.id;
+					bestLength = target.length;
+				}
+			}
+			return best;
+		}, ...ngDevMode ? [{ debugName: "routerActiveId" }] : /* istanbul ignore next */ []);
+		this.activeId = computed(() => this.routerActiveId() ?? this.selectedId(), ...ngDevMode ? [{ debugName: "activeId" }] : /* istanbul ignore next */ []);
+		this.defaultExpandedIds = computed(() => {
+			const result = /* @__PURE__ */ new Set();
+			for (const item of this.allItems()) if (item.expanded) result.add(item.id);
+			const parents = this.parentOf();
+			const visited = /* @__PURE__ */ new Set();
+			let current = this.activeId();
+			while (current !== void 0 && !visited.has(current)) {
+				visited.add(current);
+				const parent = parents.get(current);
+				if (parent === void 0) break;
+				result.add(parent);
+				current = parent;
+			}
+			return [...result];
+		}, ...ngDevMode ? [{ debugName: "defaultExpandedIds" }] : /* istanbul ignore next */ []);
+		this.expandedSet = computed(() => new Set(this.expandedIds() ?? this.defaultExpandedIds()), ...ngDevMode ? [{ debugName: "expandedSet" }] : /* istanbul ignore next */ []);
+		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";
+		}, ...ngDevMode ? [{ debugName: "overflowApplies" }] : /* istanbul ignore next */ []);
+		this.visibleGroups = computed(() => {
+			const inline = this.isExpanded();
+			const open = this.expandedSet();
+			const overflow = this.overflowApplies();
+			const max = this.maxVisibleItems();
+			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)
+				}))
+			}));
+		}, ...ngDevMode ? [{ debugName: "visibleGroups" }] : /* istanbul ignore next */ []);
+		this.highlightedIds = computed(() => {
+			const active = this.activeId();
+			const result = /* @__PURE__ */ new Set();
+			if (active === void 0) return result;
+			for (const group of this.visibleGroups()) for (const section of group.sections) for (const item of section.items) if (item.item.id === active) {
+				result.add(active);
+				return result;
+			}
+			return result;
+		}, ...ngDevMode ? [{ debugName: "highlightedIds" }] : /* istanbul ignore next */ []);
+		this.ancestorIds = computed(() => {
+			const active = this.activeId();
+			const result = /* @__PURE__ */ new Set();
+			if (active === void 0) return result;
+			const walk = (items, trail) => {
+				for (const item of items) {
+					if (item.item.id === active) {
+						for (const id of trail) result.add(id);
+						return true;
+					}
+					trail.push(item.item.id);
+					const found = walk(item.children, trail);
+					trail.pop();
+					if (found) return true;
+				}
+				return false;
+			};
+			for (const group of this.visibleGroups()) for (const section of group.sections) if (walk(section.items.filter((item) => item.depth === 0), [])) return result;
+			return result;
+		}, ...ngDevMode ? [{ debugName: "ancestorIds" }] : /* istanbul ignore next */ []);
+		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,
+					grouped: true
+				});
+			} else result.push({
+				key: child.item.id,
+				render: child
+			});
+			return result;
+		}, ...ngDevMode ? [{ debugName: "popupEntries" }] : /* istanbul ignore next */ []);
+		this.isPopupOpen = computed(() => !this.isExpanded() && !!this.popupItem(), ...ngDevMode ? [{ debugName: "isPopupOpen" }] : /* istanbul ignore next */ []);
+		this.popupOrigin = computed(() => this.popupAnchor() ?? this.hostRef.nativeElement, ...ngDevMode ? [{ debugName: "popupOrigin" }] : /* istanbul ignore next */ []);
+		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
+			}];
+		}, ...ngDevMode ? [{ debugName: "popupPositions" }] : /* istanbul ignore next */ []);
+		this.isRtl = computed(() => this.directionality?.value === "rtl", ...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));
+		}
+	}
+	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;
+		}
+		const mouse = event;
+		if (render.href && (mouse.ctrlKey || mouse.metaKey || mouse.shiftKey || mouse.button === 1)) return;
+		if (render.routed && render.href) {
+			event.preventDefault();
+			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);
+	}
+	onMenuClick() {
+		this.menuClick.emit();
+	}
+	onScrimClick() {
+		this.open.set(false);
+	}
+	onKeydown(event) {
+		if (event.key === "Escape") {
+			if (this.popupItem()) {
+				event.preventDefault();
+				this.closePopup();
+				return;
+			}
+			if (this.isOverlayOpen()) {
+				event.preventDefault();
+				this.open.set(false);
+				return;
+			}
+		}
+		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();
+	}
+	toggleExpanded(id) {
+		const next = new Set(this.expandedSet());
+		if (next.has(id)) next.delete(id);
+		else {
+			next.add(id);
+			afterNextRender(() => this.revealBranch(id), { injector: this.injector });
+		}
+		this.expandedIds.set([...next]);
+	}
+	openPopup(render, event) {
+		const anchor = event.currentTarget;
+		this.popupAnchor.set(anchor ?? void 0);
+		this.popupId.set(this.popupItem()?.item.id === render.item.id ? void 0 : render.item.id);
+	}
+	closePopup() {
+		this.popupId.set(void 0);
+		this.popupAnchor.set(void 0);
+	}
+	openDrawer() {
+		this.open.set(true);
+	}
+	closeDrawer() {
+		this.open.set(false);
+	}
+	toggleDrawer() {
+		this.open.update((open) => !open);
+	}
+	focusItem(id) {
+		for (const ref of this.itemElements()) if (ref.nativeElement.dataset["navId"] === id) {
+			ref.nativeElement.focus();
+			return true;
+		}
+		return false;
+	}
+	revealBranch(id) {
+		if (!this.isExpanded()) return;
+		const items = this.itemElements();
+		const index = items.findIndex((ref) => ref.nativeElement.dataset["navId"] === id);
+		if (index < 0) return;
+		const parent = items[index].nativeElement;
+		const list = parent.closest(".ars-nav__items");
+		if (!list) return;
+		const depth = Number(parent.dataset["depth"] ?? 0);
+		let last = parent;
+		for (let i = index + 1; i < items.length; i++) {
+			const row = items[i].nativeElement;
+			if (row.closest(".ars-nav__items") !== list) break;
+			if (Number(row.dataset["depth"] ?? 0) <= depth) break;
+			last = row;
+		}
+		if (last === parent) return;
+		const view = list.clientHeight;
+		if (view === 0 || list.scrollHeight <= view) return;
+		const origin = list.getBoundingClientRect().top + list.clientTop - list.scrollTop;
+		const top = parent.getBoundingClientRect().top - origin;
+		const needed = last.getBoundingClientRect().bottom - origin + BRANCH_SCROLL_PADDING - view;
+		if (needed <= list.scrollTop) return;
+		const target = Math.max(0, Math.min(needed, top - BRANCH_SCROLL_PADDING));
+		if (target <= list.scrollTop) return;
+		list.scrollTo({
+			top: target,
+			behavior: prefersReducedMotion() ? "auto" : "smooth"
+		});
+	}
+	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)
+		};
+	}
+	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
+		};
+	}
+	static mergeGroups(groups) {
+		if (groups.length < 2) return groups;
+		const order = [];
+		const byId = /* @__PURE__ */ 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))
+		}];
+	}
+	static buildRenderItem(item, section, parent, depth, counter, hrefs, dark) {
+		const href = hrefs.get(item.id);
+		const svgOff = item.svgIcon;
+		const svgOn = item.activeSvgIcon ?? item.svgIcon;
+		const spriteStyle = NavigationBarComponent.buildSpriteStyle(item, dark);
+		const imageOff = spriteStyle || svgOff ? void 0 : item.imageIcon;
+		const imageOn = spriteStyle || svgOn ? void 0 : 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" ? void 0 : section,
+			parent,
+			index,
+			depth,
+			href,
+			routed: !!href && !item.href,
+			iconOff: svgOff || spriteStyle || imageOff ? void 0 : item.icon,
+			iconOn: svgOn || spriteStyle || imageOn ? void 0 : 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
+		};
+	}
+	static buildSpriteStyle(item, dark) {
+		const sprite = item.sprite;
+		if (!sprite) return void 0;
+		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}`
+		};
+	}
+	static spriteFrameCount(sprite) {
+		if (sprite.frames !== void 0 && 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 !== void 0 && index > highest) highest = index;
+		return highest + 1;
+	}
+	static formatBadge(item) {
+		const badge = item.badge;
+		if (!badge || badge.value === void 0) return "";
+		if (typeof badge.value === "number") {
+			const max = badge.max ?? 999;
+			return badge.value > max ? `${max}+` : `${badge.value}`;
+		}
+		return badge.value;
+	}
+	static pathOf(url) {
+		return (url.split("#")[0] ?? "").split("?")[0] ?? "";
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.1",
+			ngImport: i0,
+			type: NavigationBarComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.1",
+			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
+				},
+				childIcons: {
+					classPropertyName: "childIcons",
+					publicName: "childIcons",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				dense: {
+					classPropertyName: "dense",
+					publicName: "dense",
+					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
+				},
+				railWidth: {
+					classPropertyName: "railWidth",
+					publicName: "railWidth",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				minWidth: {
+					classPropertyName: "minWidth",
+					publicName: "minWidth",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				maxWidth: {
+					classPropertyName: "maxWidth",
+					publicName: "maxWidth",
+					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--dense": "dense()",
+					"class.ars-navigation--hidden": "isHidden()",
+					"style.--ars-navigation-width": "widthStyle()",
+					"style.--ars-navigation-rail-width": "railWidthStyle()",
+					"style.--ars-navigation-min-width": "minWidthStyle()",
+					"style.--ars-navigation-max-width": "maxWidthStyle()"
+				},
+				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 stacked = resolvedLayout() === 'vertical';\n  @let wide = isExpanded();\n  @let active = activeId();\n  @let highlighted = highlightedIds();\n  @let ancestors = ancestorIds();\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          <!-- Clicking a parent opens and closes its branch, or its floating panel, and\n               never navigates. It can still BE the active destination, but only when it\n               owns a route of its own (`r.href`): that is a page the user can reach, so\n               the row is allowed to look selected. A parent without a route is never\n               selected — where it used to stand in for a destination it hides it now\n               carries `ancestor` instead: the trail, not the selection. -->\n          @let ancestor = ancestors.has(r.item.id);\n          <!-- Stacked layouts get the short form when the destination declares one, or\n               no label at all on `'none'`; `tooltip` and `ariaLabel` stay on the full\n               label either way, so the name is still one hover — or one screen reader —\n               away. -->\n          @let stackedLabelHidden = stacked && r.item.labelVertical === 'none';\n          @let displayLabel = stacked ? (r.item.labelVertical ?? r.item.label) : r.item.label;\n          @let selected = highlighted.has(r.item.id) && (!r.hasChildren || !!r.href);\n          <!-- `stackedLabelHidden` counts as \"no label on screen\": that is what turns the\n               tooltip back on, which is the only place the name is left to be read. -->\n          @let labelVisible = !r.iconOnly && !stackedLabelHidden\n            && (labels === 'labeled' || (labels === 'selected' && (selected || ancestor)));\n          @let branchOpen = r.hasChildren && openIds.has(r.item.id);\n          @let hideIcon = wide && r.depth > 0 && !childIcons();\n          <!-- In the compact variants the children live in a floating panel, so an\n               ancestor row IS how the active destination shows on screen: it takes the\n               selected look whole, icon variant included, exactly like a destination\n               without children. In the expanded ones the active row is visible on its\n               own and the ancestor stays the quieter trail. -->\n          @let activeLook = selected || (!wide && ancestor);\n          @let svg = activeLook ? r.svgOn : r.svgOff;\n          @let image = activeLook ? r.imageOn : r.imageOff;\n          @let ligature = activeLook ? 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--icon-stacked]=\"stackedLabelHidden\"\n               [class.ars-nav__item--greyed]=\"r.item.greyed\"\n               [class.ars-nav__item--disabled]=\"r.item.disabled\"\n               [class.ars-nav__item--no-icon]=\"hideIcon\"\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              @if (!hideIcon) {\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              }\n              @if (labels !== 'unlabeled' && !r.iconOnly && !stackedLabelHidden) {\n                <span class=\"ars-nav__label\" [class.ars-nav__label--hidden]=\"!labelVisible\">{{ displayLabel }}</span>\n              }\n              @if (wide && r.item.trailing) {\n                <span class=\"ars-nav__trailing\">{{ r.item.trailing }}</span>\n              }\n              <!-- The badge of an icon-less child has no icon box to sit on: it moves\n                   to the trailing edge, exactly as the submenu panel renders it. -->\n              @if (hideIcon && r.hasBadge) {\n                <span class=\"ars-nav__badge ars-nav__badge--inline\"\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            </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--ancestor]=\"ancestor\"\n                    [class.ars-nav__item--icon-stacked]=\"stackedLabelHidden\"\n                    [class.ars-nav__item--greyed]=\"r.item.greyed\"\n                    [class.ars-nav__item--disabled]=\"r.item.disabled\"\n                    [class.ars-nav__item--no-icon]=\"hideIcon\"\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              @if (!hideIcon) {\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              }\n              @if (labels !== 'unlabeled' && !r.iconOnly && !stackedLabelHidden) {\n                <span class=\"ars-nav__label\" [class.ars-nav__label--hidden]=\"!labelVisible\">{{ displayLabel }}</span>\n              }\n              @if (wide && r.item.trailing) {\n                <span class=\"ars-nav__trailing\">{{ r.item.trailing }}</span>\n              }\n              <!-- The badge of an icon-less child has no icon box to sit on: it moves\n                   to the trailing edge, exactly as the submenu panel renders it. -->\n              @if (hideIcon && r.hasBadge) {\n                <span class=\"ars-nav__badge ars-nav__badge--inline\"\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              @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--grouped]=\"entry.grouped\"\n             [class.ars-nav-submenu__item--selected]=\"childSelected\"\n             [class.ars-nav-submenu__item--greyed]=\"c.item.greyed\"\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--grouped]=\"entry.grouped\"\n                  [class.ars-nav-submenu__item--selected]=\"childSelected\"\n                  [class.ars-nav-submenu__item--greyed]=\"c.item.greyed\"\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;--_row-height: var(--ars-navigation-item-height, 56px);--_row-gap: var(--ars-navigation-item-gap, 4px);--_row-font-size: var(--ars-navigation-label-font-size, 14px);--_child-height: var(--ars-navigation-child-height, 48px);--_child-font-size: var(--ars-navigation-child-font-size, 13px);--_section-padding: 18px 16px 8px;--_row-pad-start: var(--ars-navigation-item-padding-start, 24px);--_row-pad-end: var(--ars-navigation-item-padding-end, 24px);--_label-lines: var(--ars-navigation-label-lines, 2);--_rtl: 1;display:block;box-sizing:border-box;color:var(--_label);-webkit-tap-highlight-color:transparent}:host-context([dir=rtl]){--_rtl: -1}:host(.ars-navigation--dense){--_row-height: var(--ars-navigation-dense-item-height, 44px);--_child-height: var(--ars-navigation-dense-child-height, 36px);--_section-padding: 12px 16px 4px}:host(.ars-navigation--dense){--_row-pad-start: var(--ars-navigation-dense-item-padding-start, 12px);--_row-pad-end: var(--ars-navigation-dense-item-padding-end, 12px)}.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:var(--_section-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}.ars-nav__badge--inline{position:static;z-index:1;flex:none;margin-inline-start:8px}.ars-nav__badge--inline.ars-nav__badge--dot{margin-inline-start:12px}: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--icon-stacked .ars-nav__icon-box:before,:host([data-indicator=compact]) .ars-nav__item--icon-stacked .ars-nav__icon-box:after{width:var(--ars-navigation-icon-button-size, 48px);height:var(--ars-navigation-icon-button-size, 48px);margin:calc(var(--ars-navigation-icon-button-size, 48px) / -2) 0 0 calc(var(--ars-navigation-icon-button-size, 48px) / -2);border-radius:50%}: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--ancestor:not(.ars-nav__item--selected) .ars-nav__label{color:var(--_label-active)}.ars-nav__item--ancestor:not(.ars-nav__item--selected) .ars-nav__icon-box,.ars-nav__item--ancestor:not(.ars-nav__item--selected) .ars-nav__chevron{color:var(--_label-active)}:host([data-variant=bar][data-indicator=compact]) .ars-nav__item--ancestor .ars-nav__icon-box:before,:host([data-variant=rail][data-indicator=compact]) .ars-nav__item--ancestor .ars-nav__icon-box:before{opacity:1;transform:scaleX(1)}:host([data-variant=bar]) .ars-nav__item--ancestor .ars-nav__icon-box,:host([data-variant=rail]) .ars-nav__item--ancestor .ars-nav__icon-box{color:var(--_icon-active)}:host([data-variant=bar]) .ars-nav__item--ancestor .ars-nav__icon,:host([data-variant=rail]) .ars-nav__item--ancestor .ars-nav__icon{font-variation-settings:\"FILL\" 1}.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)}.ars-nav__item--greyed:not(.ars-nav__item--selected) .ars-nav__label,.ars-nav__item--greyed:not(.ars-nav__item--selected) .ars-nav__icon-box,.ars-nav__item--greyed:not(.ars-nav__item--selected) .ars-nav__trailing,.ars-nav-submenu__item--greyed:not(.ars-nav-submenu__item--selected){opacity:var(--ars-navigation-greyed-opacity, .5);transition:opacity var(--_dur-short, .15s) var(--_easing, cubic-bezier(.2, 0, 0, 1))}.ars-nav__item--greyed:where(:hover,:focus-visible) .ars-nav__label,.ars-nav__item--greyed:where(:hover,:focus-visible) .ars-nav__icon-box,.ars-nav__item--greyed:where(:hover,:focus-visible) .ars-nav__trailing,.ars-nav-submenu__item--greyed:where(:hover,:focus-visible){opacity:1}: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:var(--ars-navigation-vertical-gap, 0);padding-block:var(--ars-navigation-vertical-label-padding, 8px);max-width:100%;text-align:center;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--_label-lines, 2);line-clamp:var(--_label-lines, 2);white-space:normal;overflow-wrap:anywhere;line-height:var(--ars-navigation-vertical-label-line-height, 14px)}: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 .ars-nav__item--selected .ars-nav__label,:host .ars-nav__item--ancestor .ars-nav__label{font-weight:var(--ars-navigation-selected-font-weight, 700)}:host([data-variant=bar]) .ars-nav__item--selected .ars-nav__label,:host([data-variant=bar]) .ars-nav__item--ancestor .ars-nav__label,:host([data-variant=rail]) .ars-nav__item--selected .ars-nav__label,:host([data-variant=rail]) .ars-nav__item--ancestor .ars-nav__label{font-weight:var(--ars-navigation-compact-selected-font-weight, 500)}: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, 80px);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-layout=vertical]) .ars-nav__item{justify-content:flex-start;padding-block-start:var(--ars-navigation-bar-item-padding-top, 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-rail-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:var(--ars-navigation-rail-item-gap, 8px);width:100%;overflow-y:auto;overscroll-behavior:contain}:host([data-variant=rail]) .ars-nav__item{justify-content:center;width:100%;min-height:var(--ars-navigation-rail-item-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:var(--_row-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{min-height:var(--_row-height, 56px);padding-block:0;padding-inline:calc(var(--_row-pad-start, 24px) + var(--_depth-indent, 0px)) var(--_row-pad-end, 24px);margin-block:0;margin-inline:var(--ars-navigation-item-inset, 20px)}:host(.ars-navigation--dense) .ars-nav__item{padding-inline:calc(var(--_row-pad-start, 12px) + var(--_depth-indent, 0px)) var(--_row-pad-end, 12px)}:host([data-variant=rail-expanded]) .ars-nav__item[data-depth]:not([data-depth=\"0\"])+.ars-nav__item[data-depth=\"0\"],:host([data-variant=drawer]) .ars-nav__item[data-depth]:not([data-depth=\"0\"])+.ars-nav__item[data-depth=\"0\"],:host([data-variant=modal]) .ars-nav__item[data-depth]:not([data-depth=\"0\"])+.ars-nav__item[data-depth=\"0\"]{margin-block-start:var(--ars-navigation-branch-end-gap, 12px)}:host([data-variant=rail-expanded]) .ars-nav__item[data-depth]:not([data-depth=\"0\"]):last-child,:host([data-variant=drawer]) .ars-nav__item[data-depth]:not([data-depth=\"0\"]):last-child,:host([data-variant=modal]) .ars-nav__item[data-depth]:not([data-depth=\"0\"]):last-child{margin-block-end:var(--ars-navigation-branch-end-gap, 12px)}: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__item[data-depth]:not([data-depth=\"0\"]),:host([data-variant=drawer]) .ars-nav__item[data-depth]:not([data-depth=\"0\"]),:host([data-variant=modal]) .ars-nav__item[data-depth]:not([data-depth=\"0\"]){min-height:var(--_child-height, 48px)}:host([data-variant=rail-expanded]) .ars-nav__item[data-depth]:not([data-depth=\"0\"]) .ars-nav__label,:host([data-variant=drawer]) .ars-nav__item[data-depth]:not([data-depth=\"0\"]) .ars-nav__label,:host([data-variant=modal]) .ars-nav__item[data-depth]:not([data-depth=\"0\"]) .ars-nav__label{font-size:var(--_child-font-size, 13px)}:host([data-variant=rail-expanded]) .ars-nav__label,:host([data-variant=drawer]) .ars-nav__label,:host([data-variant=modal]) .ars-nav__label{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--_label-lines, 2);line-clamp:var(--_label-lines, 2);white-space:normal;overflow-wrap:anywhere;line-height:var(--ars-navigation-label-line-height, 18px);flex:1 1 auto;margin-inline-start:0;font-size:var(--_row-font-size, 14px)}:host([data-variant=rail-expanded]) .ars-nav{width:var(--ars-navigation-width, 220px);min-width:var(--ars-navigation-min-width, 0);max-width:var(--ars-navigation-max-width, 100%)}:host([data-variant=drawer]) .ars-nav,:host([data-variant=modal]) .ars-nav{width:var(--ars-navigation-width, 360px);min-width:var(--ars-navigation-min-width, 0);max-width:var(--ars-navigation-max-width, 100%)}: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,:host([data-variant=bar]) .ars-nav__item--ancestor .ars-nav__icon--sprite,:host([data-variant=rail]) .ars-nav__item--ancestor .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;opacity:0;transition:rotate var(--_dur) var(--_easing),opacity var(--_dur-short) var(--_easing)}.ars-nav__item:where(:hover,:focus-visible) .ars-nav__chevron{opacity:1}@media(hover:none){.ars-nav__chevron{opacity:1}}.ars-nav__chevron--open{rotate:180deg}.ars-nav__item[data-depth=\"1\"]{--_depth-indent: 24px}.ars-nav__item[data-depth=\"2\"]{--_depth-indent: 48px}.ars-nav__item[data-depth=\"3\"]{--_depth-indent: 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(--ars-navigation-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--grouped{padding-inline-start:var(--ars-navigation-menu-group-indent, 24px)}.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 .ars-nav-submenu__label{font-weight:var(--ars-navigation-selected-font-weight, 700)}.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{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--ars-navigation-label-lines, 2);line-clamp:var(--ars-navigation-label-lines, 2);flex:1 1 auto;min-width:0;padding-block:8px;font-size:14px;line-height:var(--ars-navigation-label-line-height, 18px);font-weight:500;letter-spacing:.1px;white-space:normal;overflow-wrap:anywhere;overflow:hidden}.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.2.1",
+	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--dense]": "dense()",
+				"[class.ars-navigation--hidden]": "isHidden()",
+				"[style.--ars-navigation-width]": "widthStyle()",
+				"[style.--ars-navigation-rail-width]": "railWidthStyle()",
+				"[style.--ars-navigation-min-width]": "minWidthStyle()",
+				"[style.--ars-navigation-max-width]": "maxWidthStyle()"
+			},
+			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 stacked = resolvedLayout() === 'vertical';\n  @let wide = isExpanded();\n  @let active = activeId();\n  @let highlighted = highlightedIds();\n  @let ancestors = ancestorIds();\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          <!-- Clicking a parent opens and closes its branch, or its floating panel, and\n               never navigates. It can still BE the active destination, but only when it\n               owns a route of its own (`r.href`): that is a page the user can reach, so\n               the row is allowed to look selected. A parent without a route is never\n               selected — where it used to stand in for a destination it hides it now\n               carries `ancestor` instead: the trail, not the selection. -->\n          @let ancestor = ancestors.has(r.item.id);\n          <!-- Stacked layouts get the short form when the destination declares one, or\n               no label at all on `'none'`; `tooltip` and `ariaLabel` stay on the full\n               label either way, so the name is still one hover — or one screen reader —\n               away. -->\n          @let stackedLabelHidden = stacked && r.item.labelVertical === 'none';\n          @let displayLabel = stacked ? (r.item.labelVertical ?? r.item.label) : r.item.label;\n          @let selected = highlighted.has(r.item.id) && (!r.hasChildren || !!r.href);\n          <!-- `stackedLabelHidden` counts as \"no label on screen\": that is what turns the\n               tooltip back on, which is the only place the name is left to be read. -->\n          @let labelVisible = !r.iconOnly && !stackedLabelHidden\n            && (labels === 'labeled' || (labels === 'selected' && (selected || ancestor)));\n          @let branchOpen = r.hasChildren && openIds.has(r.item.id);\n          @let hideIcon = wide && r.depth > 0 && !childIcons();\n          <!-- In the compact variants the children live in a floating panel, so an\n               ancestor row IS how the active destination shows on screen: it takes the\n               selected look whole, icon variant included, exactly like a destination\n               without children. In the expanded ones the active row is visible on its\n               own and the ancestor stays the quieter trail. -->\n          @let activeLook = selected || (!wide && ancestor);\n          @let svg = activeLook ? r.svgOn : r.svgOff;\n          @let image = activeLook ? r.imageOn : r.imageOff;\n          @let ligature = activeLook ? 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--icon-stacked]=\"stackedLabelHidden\"\n               [class.ars-nav__item--greyed]=\"r.item.greyed\"\n               [class.ars-nav__item--disabled]=\"r.item.disabled\"\n               [class.ars-nav__item--no-icon]=\"hideIcon\"\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              @if (!hideIcon) {\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              }\n              @if (labels !== 'unlabeled' && !r.iconOnly && !stackedLabelHidden) {\n                <span class=\"ars-nav__label\" [class.ars-nav__label--hidden]=\"!labelVisible\">{{ displayLabel }}</span>\n              }\n              @if (wide && r.item.trailing) {\n                <span class=\"ars-nav__trailing\">{{ r.item.trailing }}</span>\n              }\n              <!-- The badge of an icon-less child has no icon box to sit on: it moves\n                   to the trailing edge, exactly as the submenu panel renders it. -->\n              @if (hideIcon && r.hasBadge) {\n                <span class=\"ars-nav__badge ars-nav__badge--inline\"\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            </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--ancestor]=\"ancestor\"\n                    [class.ars-nav__item--icon-stacked]=\"stackedLabelHidden\"\n                    [class.ars-nav__item--greyed]=\"r.item.greyed\"\n                    [class.ars-nav__item--disabled]=\"r.item.disabled\"\n                    [class.ars-nav__item--no-icon]=\"hideIcon\"\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              @if (!hideIcon) {\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              }\n              @if (labels !== 'unlabeled' && !r.iconOnly && !stackedLabelHidden) {\n                <span class=\"ars-nav__label\" [class.ars-nav__label--hidden]=\"!labelVisible\">{{ displayLabel }}</span>\n              }\n              @if (wide && r.item.trailing) {\n                <span class=\"ars-nav__trailing\">{{ r.item.trailing }}</span>\n              }\n              <!-- The badge of an icon-less child has no icon box to sit on: it moves\n                   to the trailing edge, exactly as the submenu panel renders it. -->\n              @if (hideIcon && r.hasBadge) {\n                <span class=\"ars-nav__badge ars-nav__badge--inline\"\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              @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--grouped]=\"entry.grouped\"\n             [class.ars-nav-submenu__item--selected]=\"childSelected\"\n             [class.ars-nav-submenu__item--greyed]=\"c.item.greyed\"\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--grouped]=\"entry.grouped\"\n                  [class.ars-nav-submenu__item--selected]=\"childSelected\"\n                  [class.ars-nav-submenu__item--greyed]=\"c.item.greyed\"\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;--_row-height: var(--ars-navigation-item-height, 56px);--_row-gap: var(--ars-navigation-item-gap, 4px);--_row-font-size: var(--ars-navigation-label-font-size, 14px);--_child-height: var(--ars-navigation-child-height, 48px);--_child-font-size: var(--ars-navigation-child-font-size, 13px);--_section-padding: 18px 16px 8px;--_row-pad-start: var(--ars-navigation-item-padding-start, 24px);--_row-pad-end: var(--ars-navigation-item-padding-end, 24px);--_label-lines: var(--ars-navigation-label-lines, 2);--_rtl: 1;display:block;box-sizing:border-box;color:var(--_label);-webkit-tap-highlight-color:transparent}:host-context([dir=rtl]){--_rtl: -1}:host(.ars-navigation--dense){--_row-height: var(--ars-navigation-dense-item-height, 44px);--_child-height: var(--ars-navigation-dense-child-height, 36px);--_section-padding: 12px 16px 4px}:host(.ars-navigation--dense){--_row-pad-start: var(--ars-navigation-dense-item-padding-start, 12px);--_row-pad-end: var(--ars-navigation-dense-item-padding-end, 12px)}.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:var(--_section-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}.ars-nav__badge--inline{position:static;z-index:1;flex:none;margin-inline-start:8px}.ars-nav__badge--inline.ars-nav__badge--dot{margin-inline-start:12px}: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--icon-stacked .ars-nav__icon-box:before,:host([data-indicator=compact]) .ars-nav__item--icon-stacked .ars-nav__icon-box:after{width:var(--ars-navigation-icon-button-size, 48px);height:var(--ars-navigation-icon-button-size, 48px);margin:calc(var(--ars-navigation-icon-button-size, 48px) / -2) 0 0 calc(var(--ars-navigation-icon-button-size, 48px) / -2);border-radius:50%}: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--ancestor:not(.ars-nav__item--selected) .ars-nav__label{color:var(--_label-active)}.ars-nav__item--ancestor:not(.ars-nav__item--selected) .ars-nav__icon-box,.ars-nav__item--ancestor:not(.ars-nav__item--selected) .ars-nav__chevron{color:var(--_label-active)}:host([data-variant=bar][data-indicator=compact]) .ars-nav__item--ancestor .ars-nav__icon-box:before,:host([data-variant=rail][data-indicator=compact]) .ars-nav__item--ancestor .ars-nav__icon-box:before{opacity:1;transform:scaleX(1)}:host([data-variant=bar]) .ars-nav__item--ancestor .ars-nav__icon-box,:host([data-variant=rail]) .ars-nav__item--ancestor .ars-nav__icon-box{color:var(--_icon-active)}:host([data-variant=bar]) .ars-nav__item--ancestor .ars-nav__icon,:host([data-variant=rail]) .ars-nav__item--ancestor .ars-nav__icon{font-variation-settings:\"FILL\" 1}.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)}.ars-nav__item--greyed:not(.ars-nav__item--selected) .ars-nav__label,.ars-nav__item--greyed:not(.ars-nav__item--selected) .ars-nav__icon-box,.ars-nav__item--greyed:not(.ars-nav__item--selected) .ars-nav__trailing,.ars-nav-submenu__item--greyed:not(.ars-nav-submenu__item--selected){opacity:var(--ars-navigation-greyed-opacity, .5);transition:opacity var(--_dur-short, .15s) var(--_easing, cubic-bezier(.2, 0, 0, 1))}.ars-nav__item--greyed:where(:hover,:focus-visible) .ars-nav__label,.ars-nav__item--greyed:where(:hover,:focus-visible) .ars-nav__icon-box,.ars-nav__item--greyed:where(:hover,:focus-visible) .ars-nav__trailing,.ars-nav-submenu__item--greyed:where(:hover,:focus-visible){opacity:1}: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:var(--ars-navigation-vertical-gap, 0);padding-block:var(--ars-navigation-vertical-label-padding, 8px);max-width:100%;text-align:center;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--_label-lines, 2);line-clamp:var(--_label-lines, 2);white-space:normal;overflow-wrap:anywhere;line-height:var(--ars-navigation-vertical-label-line-height, 14px)}: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 .ars-nav__item--selected .ars-nav__label,:host .ars-nav__item--ancestor .ars-nav__label{font-weight:var(--ars-navigation-selected-font-weight, 700)}:host([data-variant=bar]) .ars-nav__item--selected .ars-nav__label,:host([data-variant=bar]) .ars-nav__item--ancestor .ars-nav__label,:host([data-variant=rail]) .ars-nav__item--selected .ars-nav__label,:host([data-variant=rail]) .ars-nav__item--ancestor .ars-nav__label{font-weight:var(--ars-navigation-compact-selected-font-weight, 500)}: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, 80px);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-layout=vertical]) .ars-nav__item{justify-content:flex-start;padding-block-start:var(--ars-navigation-bar-item-padding-top, 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-rail-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:var(--ars-navigation-rail-item-gap, 8px);width:100%;overflow-y:auto;overscroll-behavior:contain}:host([data-variant=rail]) .ars-nav__item{justify-content:center;width:100%;min-height:var(--ars-navigation-rail-item-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:var(--_row-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{min-height:var(--_row-height, 56px);padding-block:0;padding-inline:calc(var(--_row-pad-start, 24px) + var(--_depth-indent, 0px)) var(--_row-pad-end, 24px);margin-block:0;margin-inline:var(--ars-navigation-item-inset, 20px)}:host(.ars-navigation--dense) .ars-nav__item{padding-inline:calc(var(--_row-pad-start, 12px) + var(--_depth-indent, 0px)) var(--_row-pad-end, 12px)}:host([data-variant=rail-expanded]) .ars-nav__item[data-depth]:not([data-depth=\"0\"])+.ars-nav__item[data-depth=\"0\"],:host([data-variant=drawer]) .ars-nav__item[data-depth]:not([data-depth=\"0\"])+.ars-nav__item[data-depth=\"0\"],:host([data-variant=modal]) .ars-nav__item[data-depth]:not([data-depth=\"0\"])+.ars-nav__item[data-depth=\"0\"]{margin-block-start:var(--ars-navigation-branch-end-gap, 12px)}:host([data-variant=rail-expanded]) .ars-nav__item[data-depth]:not([data-depth=\"0\"]):last-child,:host([data-variant=drawer]) .ars-nav__item[data-depth]:not([data-depth=\"0\"]):last-child,:host([data-variant=modal]) .ars-nav__item[data-depth]:not([data-depth=\"0\"]):last-child{margin-block-end:var(--ars-navigation-branch-end-gap, 12px)}: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__item[data-depth]:not([data-depth=\"0\"]),:host([data-variant=drawer]) .ars-nav__item[data-depth]:not([data-depth=\"0\"]),:host([data-variant=modal]) .ars-nav__item[data-depth]:not([data-depth=\"0\"]){min-height:var(--_child-height, 48px)}:host([data-variant=rail-expanded]) .ars-nav__item[data-depth]:not([data-depth=\"0\"]) .ars-nav__label,:host([data-variant=drawer]) .ars-nav__item[data-depth]:not([data-depth=\"0\"]) .ars-nav__label,:host([data-variant=modal]) .ars-nav__item[data-depth]:not([data-depth=\"0\"]) .ars-nav__label{font-size:var(--_child-font-size, 13px)}:host([data-variant=rail-expanded]) .ars-nav__label,:host([data-variant=drawer]) .ars-nav__label,:host([data-variant=modal]) .ars-nav__label{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--_label-lines, 2);line-clamp:var(--_label-lines, 2);white-space:normal;overflow-wrap:anywhere;line-height:var(--ars-navigation-label-line-height, 18px);flex:1 1 auto;margin-inline-start:0;font-size:var(--_row-font-size, 14px)}:host([data-variant=rail-expanded]) .ars-nav{width:var(--ars-navigation-width, 220px);min-width:var(--ars-navigation-min-width, 0);max-width:var(--ars-navigation-max-width, 100%)}:host([data-variant=drawer]) .ars-nav,:host([data-variant=modal]) .ars-nav{width:var(--ars-navigation-width, 360px);min-width:var(--ars-navigation-min-width, 0);max-width:var(--ars-navigation-max-width, 100%)}: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,:host([data-variant=bar]) .ars-nav__item--ancestor .ars-nav__icon--sprite,:host([data-variant=rail]) .ars-nav__item--ancestor .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;opacity:0;transition:rotate var(--_dur) var(--_easing),opacity var(--_dur-short) var(--_easing)}.ars-nav__item:where(:hover,:focus-visible) .ars-nav__chevron{opacity:1}@media(hover:none){.ars-nav__chevron{opacity:1}}.ars-nav__chevron--open{rotate:180deg}.ars-nav__item[data-depth=\"1\"]{--_depth-indent: 24px}.ars-nav__item[data-depth=\"2\"]{--_depth-indent: 48px}.ars-nav__item[data-depth=\"3\"]{--_depth-indent: 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(--ars-navigation-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--grouped{padding-inline-start:var(--ars-navigation-menu-group-indent, 24px)}.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 .ars-nav-submenu__label{font-weight:var(--ars-navigation-selected-font-weight, 700)}.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{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--ars-navigation-label-lines, 2);line-clamp:var(--ars-navigation-label-lines, 2);flex:1 1 auto;min-width:0;padding-block:8px;font-size:14px;line-height:var(--ars-navigation-label-line-height, 18px);font-weight:500;letter-spacing:.1px;white-space:normal;overflow-wrap:anywhere;overflow:hidden}.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
+			}]
+		}],
+		childIcons: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "childIcons",
+				required: false
+			}]
+		}],
+		dense: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dense",
+				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
+			}]
+		}],
+		railWidth: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "railWidth",
+				required: false
+			}]
+		}],
+		minWidth: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "minWidth",
+				required: false
+			}]
+		}],
+		maxWidth: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "maxWidth",
+				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 }]
+		}]
+	}
+});
 export { DEFAULT_NAVIGATION_AUTO_VARIANTS, EXPANDED_NAVIGATION_VARIANTS, NAVIGATION_OVERFLOW_ID, NavigationBarComponent };
-//# sourceMappingURL=arsedizioni-ars-utils-ui.navigation.mjs.map
+
+//# sourceMappingURL=arsedizioni-ars-utils-ui.navigation.mjs.map