@arsedizioni/ars-utils 22.6.75 → 22.6.77

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, DestroyRef, input, model, booleanAttribute, numberAttribute, output, viewChildren, signal, computed, ChangeDetectionStrategy, Component } 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';
@@ -69,6 +69,15 @@ const EXPANDED_NAVIGATION_VARIANTS = [
  */
 /** 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;
+}
 class NavigationBarComponent {
     constructor() {
         // ── Injected dependencies ──────────────────────────────────────────────────
@@ -79,6 +88,8 @@ class NavigationBarComponent {
         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. */
@@ -825,10 +836,15 @@ class NavigationBarComponent {
      */
     toggleExpanded(id) {
         const next = new Set(this.expandedSet());
-        if (next.has(id))
+        if (next.has(id)) {
             next.delete(id);
-        else
+        }
+        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]);
     }
     /**
@@ -881,6 +897,64 @@ class NavigationBarComponent {
         }
         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;
+        const origin = list.getBoundingClientRect().top - 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
@@ -1103,10 +1177,10 @@ class NavigationBarComponent {
         const withoutFragment = url.split('#')[0] ?? '';
         return withoutFragment.split('?')[0] ?? '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: NavigationBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", 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, 48px);--_child-height: var(--ars-navigation-dense-child-height, 40px);--_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__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 }); }
+    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, 48px);--_child-height: var(--ars-navigation-dense-child-height, 40px);--_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__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.6", ngImport: i0, type: NavigationBarComponent, decorators: [{
+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',