@arsedizioni/ars-utils 22.5.41 → 22.5.43
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/arsedizioni-ars-utils-ui.navigation.mjs +2 -2
- package/fesm2022/arsedizioni-ars-utils-ui.navigation.mjs.map +1 -1
- package/fesm2022/arsedizioni-ars-utils-ui.tinymce.mjs +42 -5
- package/fesm2022/arsedizioni-ars-utils-ui.tinymce.mjs.map +1 -1
- package/package.json +1 -1
- package/types/arsedizioni-ars-utils-ui.tinymce.d.ts +16 -0
|
@@ -1027,7 +1027,7 @@ class NavigationBarComponent {
|
|
|
1027
1027
|
return withoutFragment.split('?')[0] ?? '';
|
|
1028
1028
|
}
|
|
1029
1029
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavigationBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1030
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", 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 }, alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, headline: { classPropertyName: "headline", publicName: "headline", isSignal: true, isRequired: false, transformFunction: null }, showMenuButton: { classPropertyName: "showMenuButton", publicName: "showMenuButton", isSignal: true, isRequired: false, transformFunction: null }, menuIcon: { classPropertyName: "menuIcon", publicName: "menuIcon", isSignal: true, isRequired: false, transformFunction: null }, expandIcon: { classPropertyName: "expandIcon", publicName: "expandIcon", isSignal: true, isRequired: false, transformFunction: null }, overflowMode: { classPropertyName: "overflowMode", publicName: "overflowMode", isSignal: true, isRequired: false, transformFunction: null }, overflowIcon: { classPropertyName: "overflowIcon", publicName: "overflowIcon", isSignal: true, isRequired: false, transformFunction: null }, overflowLabel: { classPropertyName: "overflowLabel", publicName: "overflowLabel", isSignal: true, isRequired: false, transformFunction: null }, maxVisibleItems: { classPropertyName: "maxVisibleItems", publicName: "maxVisibleItems", isSignal: true, isRequired: false, transformFunction: null }, menuAriaLabel: { classPropertyName: "menuAriaLabel", publicName: "menuAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, scrim: { classPropertyName: "scrim", publicName: "scrim", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, elevated: { classPropertyName: "elevated", publicName: "elevated", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, tooltips: { classPropertyName: "tooltips", publicName: "tooltips", isSignal: true, isRequired: false, transformFunction: null }, routerSync: { classPropertyName: "routerSync", publicName: "routerSync", isSignal: true, isRequired: false, transformFunction: null }, relativeTo: { classPropertyName: "relativeTo", publicName: "relativeTo", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedId: "selectedIdChange", expandedIds: "expandedIdsChange", open: "openChange", itemSelected: "itemSelected", menuClick: "menuClick" }, host: { properties: { "attr.data-variant": "resolvedVariant()", "attr.data-layout": "resolvedLayout()", "attr.data-align": "alignment()", "attr.data-position": "position()", "attr.data-labels": "resolvedLabelVisibility()", "attr.data-indicator": "indicatorMode()", "class.ars-navigation--open": "isOverlayOpen()", "class.ars-navigation--elevated": "elevated()", "class.ars-navigation--bordered": "bordered()", "class.ars-navigation--hidden": "isHidden()", "style.--ars-navigation-width": "widthStyle()" }, classAttribute: "ars-navigation" }, viewQueries: [{ propertyName: "itemElements", predicate: ["navItem"], descendants: true, isSignal: true }, { propertyName: "panelElements", predicate: ["panelItem"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (isModal() && scrim()) {\n <div class=\"ars-nav__scrim\" aria-hidden=\"true\" (click)=\"onScrimClick()\"></div>\n}\n\n<nav class=\"ars-nav\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.role]=\"isModal() ? 'dialog' : undefined\"\n [attr.aria-modal]=\"isModal() ? 'true' : undefined\"\n [attr.inert]=\"isHidden() ? '' : undefined\"\n [cdkTrapFocus]=\"isOverlayOpen()\"\n [cdkTrapFocusAutoCapture]=\"isOverlayOpen()\"\n (keydown)=\"onKeydown($event)\">\n\n @let labels = resolvedLabelVisibility();\n @let wide = isExpanded();\n @let active = activeId();\n @let highlighted = highlightedIds();\n @let openIds = expandedSet();\n @let popupOpenId = popupItem()?.item.id;\n\n @if (showsHeader()) {\n <div class=\"ars-nav__header\">\n @if (showMenuButton()) {\n <button type=\"button\"\n class=\"ars-nav__menu\"\n [attr.aria-label]=\"menuAriaLabel()\"\n (click)=\"onMenuClick()\">\n <mat-icon aria-hidden=\"true\">{{ menuIcon() }}</mat-icon>\n </button>\n }\n @if (wide) {\n @if (headline(); as headlineText) {\n <h2 class=\"ars-nav__headline\">{{ headlineText }}</h2>\n }\n }\n </div>\n }\n\n <div class=\"ars-nav__leading\"><ng-content select=\"[navHeader]\" /></div>\n <div class=\"ars-nav__fab\"><ng-content select=\"[navFab]\" /></div>\n\n @for (group of visibleGroups(); track group.align) {\n <div class=\"ars-nav__items\" [class.ars-nav__items--bottom]=\"group.align === 'bottom'\">\n @for (block of group.sections; track block.section.id) {\n\n @if (wide && block.section.label) {\n <h3 class=\"ars-nav__section-headline\">{{ block.section.label }}</h3>\n }\n\n @for (r of block.items; track r.item.id) {\n @let current = r.item.id === active;\n @let selected = highlighted.has(r.item.id);\n @let labelVisible = !r.iconOnly && (labels === 'labeled' || (labels === 'selected' && selected));\n @let branchOpen = r.hasChildren && openIds.has(r.item.id);\n @let hideIcon = wide && r.depth > 0 && !childIcons();\n @let svg = selected ? r.svgOn : r.svgOff;\n @let image = selected ? r.imageOn : r.imageOff;\n @let ligature = selected ? r.iconOn : r.iconOff;\n\n <!--\n The anchor and the button branches duplicate the inner markup on purpose:\n an `ng-template` + `ngTemplateOutlet` would allocate one extra embedded\n view per destination and lose the typed template context.\n -->\n @if (r.href && !r.hasChildren) {\n <a #navItem\n class=\"ars-nav__item\"\n [class.ars-nav__item--selected]=\"selected\"\n [class.ars-nav__item--disabled]=\"r.item.disabled\"\n [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) {\n <span class=\"ars-nav__label\" [class.ars-nav__label--hidden]=\"!labelVisible\">{{ r.item.label }}</span>\n }\n @if (wide && r.item.trailing) {\n <span class=\"ars-nav__trailing\">{{ r.item.trailing }}</span>\n }\n <!-- 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--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) {\n <span class=\"ars-nav__label\" [class.ars-nav__label--hidden]=\"!labelVisible\">{{ r.item.label }}</span>\n }\n @if (wide && r.item.trailing) {\n <span class=\"ars-nav__trailing\">{{ r.item.trailing }}</span>\n }\n <!-- 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--selected]=\"childSelected\"\n [attr.href]=\"c.item.disabled ? undefined : c.href\"\n [attr.target]=\"c.item.target\"\n [attr.rel]=\"c.item.target === '_blank' ? 'noopener noreferrer' : undefined\"\n [attr.aria-disabled]=\"c.item.disabled ? 'true' : undefined\"\n [attr.aria-current]=\"childSelected ? 'page' : undefined\"\n (click)=\"select(c, $event)\">\n @if (childSvg; as svgName) {\n <mat-icon class=\"ars-nav__icon\" [svgIcon]=\"svgName\" aria-hidden=\"true\" />\n } @else if (c.spriteStyle; as spriteStyle) {\n <span class=\"ars-nav__icon ars-nav__icon--sprite\" [style]=\"spriteStyle\" aria-hidden=\"true\"></span>\n } @else if (childImage; as imageUrl) {\n <img class=\"ars-nav__icon ars-nav__icon--image\" [src]=\"imageUrl\" alt=\"\" loading=\"lazy\" decoding=\"async\" />\n } @else if (childLigature; as ligatureName) {\n <mat-icon class=\"ars-nav__icon\" aria-hidden=\"true\">{{ ligatureName }}</mat-icon>\n }\n <span class=\"ars-nav-submenu__label\">{{ c.item.label }}</span>\n @if (c.badgeText) {\n <span class=\"ars-nav-submenu__trailing\">{{ c.badgeText }}</span>\n } @else if (c.item.trailing) {\n <span class=\"ars-nav-submenu__trailing\">{{ c.item.trailing }}</span>\n }\n </a>\n } @else {\n <button #panelItem\n type=\"button\"\n class=\"ars-nav-submenu__item\"\n role=\"menuitem\"\n [class.ars-nav-submenu__item--selected]=\"childSelected\"\n [disabled]=\"!!c.item.disabled\"\n [attr.aria-current]=\"childSelected ? 'page' : undefined\"\n (click)=\"select(c, $event)\">\n @if (childSvg; as svgName) {\n <mat-icon class=\"ars-nav__icon\" [svgIcon]=\"svgName\" aria-hidden=\"true\" />\n } @else if (c.spriteStyle; as spriteStyle) {\n <span class=\"ars-nav__icon ars-nav__icon--sprite\" [style]=\"spriteStyle\" aria-hidden=\"true\"></span>\n } @else if (childImage; as imageUrl) {\n <img class=\"ars-nav__icon ars-nav__icon--image\" [src]=\"imageUrl\" alt=\"\" loading=\"lazy\" decoding=\"async\" />\n } @else if (childLigature; as ligatureName) {\n <mat-icon class=\"ars-nav__icon\" aria-hidden=\"true\">{{ ligatureName }}</mat-icon>\n }\n <span class=\"ars-nav-submenu__label\">{{ c.item.label }}</span>\n @if (c.badgeText) {\n <span class=\"ars-nav-submenu__trailing\">{{ c.badgeText }}</span>\n } @else if (c.item.trailing) {\n <span class=\"ars-nav-submenu__trailing\">{{ c.item.trailing }}</span>\n }\n </button>\n }\n } @else {\n <div class=\"ars-nav-submenu__heading\" role=\"presentation\">{{ entry.label }}</div>\n }\n }\n </div>\n</ng-template>\n", styles: [":host{--_container: var(--ars-navigation-container-color, var(--mat-sys-surface-container, #eff1ef));--_indicator: var(--ars-navigation-indicator-color, var(--mat-sys-secondary-container, #cce8e2));--_icon: var(--ars-navigation-icon-color, var(--mat-sys-on-surface-variant, #3f4947));--_icon-active: var(--ars-navigation-active-icon-color, var(--mat-sys-on-secondary-container, #0b1f1c));--_label: var(--ars-navigation-label-color, var(--mat-sys-on-surface-variant, #3f4947));--_label-active: var(--ars-navigation-active-label-color, var(--ars-color-secondary, #4a635f));--_headline: var(--ars-navigation-headline-color, var(--mat-sys-on-surface-variant, #3f4947));--_state: var(--ars-navigation-state-layer-color, var(--mat-sys-on-surface, #191c1b));--_badge: var(--ars-navigation-badge-color, var(--ars-color-error, #ff5449));--_badge-text: var(--ars-navigation-badge-text-color, #ffffff);--_divider: var(--ars-navigation-divider-color, var(--ars-color-divider, #757d87));--_scrim: var(--ars-navigation-scrim-color, rgba(0, 0, 0, .4));--_focus: var(--ars-navigation-focus-color, var(--ars-color-primary, #00a293));--_easing: var(--ars-navigation-easing, cubic-bezier(.2, 0, 0, 1));--_dur-short: var(--ars-navigation-duration-short, .15s);--_dur: var(--ars-navigation-duration, .25s);--_dur-long: var(--ars-navigation-duration-long, .4s);--_icon-hover-scale: var(--ars-navigation-icon-hover-scale, 1.12);--_icon-press-scale: var(--ars-navigation-icon-press-scale, .92);--_hover-opacity: .08;--_focus-opacity: .1;--_press-opacity: .1;--_rtl: 1;display:block;box-sizing:border-box;color:var(--_label);-webkit-tap-highlight-color:transparent}:host-context([dir=rtl]){--_rtl: -1}.ars-nav{box-sizing:border-box;display:flex;position:relative;background:var(--_container);color:var(--_label);overflow:hidden}.ars-nav__items{box-sizing:border-box;display:flex;min-height:0;min-width:0;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--_state) 25%,transparent) transparent}.ars-nav__header{box-sizing:border-box;display:flex;align-items:center;flex:none;gap:12px}.ars-nav__leading,.ars-nav__fab,.ars-nav__footer{box-sizing:border-box;flex:none}.ars-nav__leading:empty,.ars-nav__fab:empty,.ars-nav__footer:empty{display:none}.ars-nav__headline{margin:0;padding:0 16px;font-size:22px;line-height:28px;font-weight:400;color:var(--_headline);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ars-nav__section-headline{margin:0;padding:18px 16px 8px;font-size:14px;line-height:20px;font-weight:500;letter-spacing:.1px;color:var(--_headline);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ars-nav__divider{flex:none;margin:8px 16px;border:0;border-top:1px solid var(--_divider);opacity:.4}.ars-nav__menu{display:inline-flex;align-items:center;justify-content:center;flex:none;width:48px;height:48px;margin:0;padding:0;border:0;border-radius:50%;background:transparent;color:var(--_icon);cursor:pointer;transition:background-color var(--_dur-short) var(--_easing)}.ars-nav__menu:hover{background:color-mix(in srgb,var(--_state) 8%,transparent)}.ars-nav__menu:focus-visible{outline:3px solid var(--_focus);outline-offset:2px}.ars-nav__item{box-sizing:border-box;position:relative;isolation:isolate;display:flex;align-items:center;flex:none;margin:0;border:0;background:transparent;color:var(--_label);font:inherit;text-align:start;text-decoration:none;cursor:pointer;-webkit-user-select:none;user-select:none;appearance:none;-webkit-tap-highlight-color:transparent}.ars-nav__item:focus-visible{outline:3px solid var(--_focus);outline-offset:-3px;border-radius:16px}.ars-nav__item--disabled,.ars-nav__item:disabled{cursor:default;opacity:.38;pointer-events:none}.ars-nav__icon-box{box-sizing:border-box;position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;width:24px;height:24px;color:var(--_icon);transition:color var(--_dur) var(--_easing)}.ars-nav__icon{position:relative;z-index:1;width:24px;height:24px;font-size:24px;line-height:24px;font-variation-settings:\"FILL\" 0;transform:scale(1);transform-origin:center;transition:font-variation-settings var(--_dur, .25s) var(--_easing, cubic-bezier(.2, 0, 0, 1)),transform var(--_dur, .25s) var(--_easing, cubic-bezier(.2, 0, 0, 1))}.ars-nav__label{position:relative;z-index:1;min-width:0;font:var(--mat-sys-label-large, 500 14px/20px Roboto, sans-serif);letter-spacing:var(--mat-sys-label-large-tracking, .1px);color:var(--_label);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color var(--_dur) var(--_easing),opacity var(--_dur) var(--_easing),max-height var(--_dur) var(--_easing),margin var(--_dur) var(--_easing)}.ars-nav__label--hidden{opacity:0;max-height:0;margin:0!important;pointer-events:none}.ars-nav__trailing{position:relative;z-index:1;margin-inline-start:auto;padding-inline-start:12px;font-size:11px;line-height:16px;font-weight:500;letter-spacing:.5px;color:var(--_label);white-space:nowrap}.ars-nav__badge{position:absolute;z-index:2;top:-6px;inset-inline-start:12px;box-sizing:border-box;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--_badge);color:var(--_badge-text);font-size:11px;line-height:16px;font-weight:500;letter-spacing:.5px;text-align:center;white-space:nowrap}.ars-nav__badge--dot{top:-1px;inset-inline-start:16px;width:6px;min-width:6px;height:6px;padding:0;border-radius:3px}.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--selected .ars-nav__icon-box:before{opacity:1;transform:scaleX(1)}:host([data-indicator=compact]) .ars-nav__item:hover .ars-nav__icon-box:after{opacity:var(--_hover-opacity)}:host([data-indicator=compact]) .ars-nav__item:focus-visible .ars-nav__icon-box:after{opacity:var(--_focus-opacity)}:host([data-indicator=compact]) .ars-nav__item:active .ars-nav__icon-box:after{opacity:var(--_press-opacity)}:host([data-indicator=wide]) .ars-nav__item:before{content:\"\";position:absolute;z-index:0;background:var(--_indicator);opacity:0;transform:scaleX(.55);transition:opacity var(--_dur) var(--_easing),transform var(--_dur-long) var(--_easing);pointer-events:none;inset:0;border-radius:28px}:host([data-indicator=wide]) .ars-nav__item:after{content:\"\";position:absolute;z-index:0;background:var(--_state);opacity:0;transition:opacity var(--_dur-short) var(--_easing);pointer-events:none;inset:0;border-radius:28px}:host([data-indicator=wide]) .ars-nav__item--selected:before{opacity:1;transform:scaleX(1)}:host([data-indicator=wide]) .ars-nav__item:hover:after{opacity:var(--_hover-opacity)}:host([data-indicator=wide]) .ars-nav__item:focus-visible:after{opacity:var(--_focus-opacity)}:host([data-indicator=wide]) .ars-nav__item:active:after{opacity:var(--_press-opacity)}.ars-nav__item--selected .ars-nav__icon-box{color:var(--_icon-active)}.ars-nav__item--selected .ars-nav__icon{font-variation-settings:\"FILL\" 1}.ars-nav__item--selected .ars-nav__label{color:var(--_label-active)}:host([data-layout=vertical]) .ars-nav__item{flex-direction:column;justify-content:center}:host([data-layout=vertical]) .ars-nav__label{font:var(--mat-sys-label-medium, 500 12px/16px Roboto, sans-serif);letter-spacing:var(--mat-sys-label-medium-tracking, .5px);margin-top:6px;max-width:100%;text-align:center}:host([data-layout=horizontal]) .ars-nav__item{flex-direction:row;justify-content:flex-start}:host([data-layout=horizontal]) .ars-nav__label{margin-inline-start:4px}:host([data-variant=bar]){width:100%}:host([data-variant=bar]) .ars-nav{flex-direction:row;align-items:center;justify-content:space-around;width:100%;height:var(--ars-navigation-bar-height, 64px);padding:0 8px}:host([data-variant=bar]) .ars-nav__header,:host([data-variant=bar]) .ars-nav__leading,:host([data-variant=bar]) .ars-nav__fab,:host([data-variant=bar]) .ars-nav__footer,:host([data-variant=bar]) .ars-nav__section-headline,:host([data-variant=bar]) .ars-nav__divider,:host([data-variant=bar]) .ars-nav__trailing{display:none}:host([data-variant=bar]) .ars-nav__items{display:contents}:host([data-variant=bar]) .ars-nav__item{flex:1 1 0;min-width:0;height:100%}:host([data-variant=bar][data-layout=horizontal]) .ars-nav__item{justify-content:center;max-width:var(--ars-navigation-item-max-width, 168px);padding:0 12px}:host([data-variant=bar][data-indicator=wide]) .ars-nav__item:before,:host([data-variant=bar][data-indicator=wide]) .ars-nav__item:after{inset:12px 0}:host([data-variant=rail]){height:100%}:host([data-variant=rail]) .ars-nav{flex-direction:column;align-items:center;width:var(--ars-navigation-width, 96px);height:100%;padding:var(--ars-navigation-rail-top-padding, 20px) 0 8px}:host([data-variant=rail]) .ars-nav__header{flex-direction:column;margin-bottom:40px}:host([data-variant=rail]) .ars-nav__headline,:host([data-variant=rail]) .ars-nav__section-headline,:host([data-variant=rail]) .ars-nav__divider,:host([data-variant=rail]) .ars-nav__trailing{display:none}:host([data-variant=rail]) .ars-nav__fab{margin-bottom:40px}:host([data-variant=rail]) .ars-nav__items{flex:1 1 auto;flex-direction:column;align-items:center;gap:4px;width:100%;overflow-y:auto;overscroll-behavior:contain}:host([data-variant=rail]) .ars-nav__item{justify-content:center;width:100%;height:64px;padding:0 4px}:host([data-variant=rail-expanded]),:host([data-variant=drawer]),:host([data-variant=modal]){height:100%}:host([data-variant=rail-expanded]) .ars-nav,:host([data-variant=drawer]) .ars-nav,:host([data-variant=modal]) .ars-nav{flex-direction:column;align-items:stretch;height:100%;padding:12px 0}:host([data-variant=rail-expanded]) .ars-nav__header,:host([data-variant=drawer]) .ars-nav__header,:host([data-variant=modal]) .ars-nav__header{padding:4px 8px 8px}:host([data-variant=rail-expanded]) .ars-nav__items,:host([data-variant=drawer]) .ars-nav__items,:host([data-variant=modal]) .ars-nav__items{flex:1 1 auto;flex-direction:column;gap:4px;overflow-y:auto;overscroll-behavior:contain}:host([data-variant=rail-expanded]) .ars-nav__item,:host([data-variant=drawer]) .ars-nav__item,:host([data-variant=modal]) .ars-nav__item{height:56px;padding-block:0;padding-inline:calc(24px + var(--_depth-pad, 0px)) 24px;margin:0 var(--ars-navigation-item-inset, 20px)}:host([data-variant=rail-expanded]) .ars-nav__icon-box,:host([data-variant=drawer]) .ars-nav__icon-box,:host([data-variant=modal]) .ars-nav__icon-box{margin-inline-end:12px}:host([data-variant=rail-expanded]) .ars-nav__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\"]){height:var(--ars-navigation-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(--ars-navigation-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{flex:1 1 auto;margin-inline-start:0}:host([data-variant=rail-expanded]) .ars-nav{width:var(--ars-navigation-width, 220px)}:host([data-variant=drawer]) .ars-nav,:host([data-variant=modal]) .ars-nav{width:var(--ars-navigation-width, 360px)}:host([data-variant=modal]){position:fixed;inset:0;z-index:var(--ars-navigation-z-index, 1000);height:auto;pointer-events:none}:host([data-variant=modal]) .ars-nav{position:absolute;inset-block:0;inset-inline-start:0;pointer-events:auto;border-start-end-radius:16px;border-end-end-radius:16px;translate:calc(var(--_shift, 0%) * var(--_rtl)) 0;transition:translate var(--_dur-long) var(--_easing),visibility var(--_dur-long) var(--_easing)}:host([data-variant=modal][data-position=end]) .ars-nav{inset-inline-start:auto;inset-inline-end:0;border-radius:0;border-start-start-radius:16px;border-end-start-radius:16px}:host([data-variant=modal].ars-navigation--hidden) .ars-nav__scrim{opacity:0;pointer-events:none}:host([data-variant=modal].ars-navigation--hidden) .ars-nav{--_shift: -100%;visibility:hidden}:host([data-variant=modal][data-position=end].ars-navigation--hidden) .ars-nav{--_shift: 100%}.ars-nav__scrim{position:absolute;inset:0;background:var(--_scrim);opacity:1;pointer-events:auto;transition:opacity var(--_dur-long) var(--_easing)}:host(:not([data-variant=bar])) .ars-nav__items--bottom{flex:0 0 auto;margin-block-start:auto;overflow:visible}:host([data-align=center]) .ars-nav__items:not(.ars-nav__items--bottom){justify-content:safe center}:host([data-align=bottom]) .ars-nav__items:not(.ars-nav__items--bottom){justify-content:safe flex-end}:host(.ars-navigation--elevated) .ars-nav{box-shadow:0 1px 3px #0000004d,0 4px 8px 3px #00000026}:host(.ars-navigation--hidden):not([data-variant=modal]){display:none}.ars-nav__icon--image{object-fit:contain}.ars-nav__icon--sprite{display:inline-block;flex:none;width:var(--sp-size, 24px);height:var(--sp-size, 24px);background-image:var(--sp-url);background-repeat:no-repeat;background-size:var(--sp-sheet-x, auto) var(--sp-sheet-y, auto);background-position:calc(var(--sp-frame, var(--sp-normal, 0)) * var(--sp-step-x, 0px)) calc(var(--sp-frame, var(--sp-normal, 0)) * var(--sp-step-y, 0px))}.ars-nav__item:where(:hover,:focus-visible) .ars-nav__icon--sprite,.ars-nav-submenu__item:where(:hover,:focus-visible) .ars-nav__icon--sprite{--sp-frame: var(--sp-hover)}.ars-nav__item--selected .ars-nav__icon--sprite,.ars-nav-submenu__item--selected .ars-nav__icon--sprite{--sp-frame: var(--sp-active)}.ars-nav__item--disabled .ars-nav__icon--sprite,.ars-nav__item:where(:disabled) .ars-nav__icon--sprite,.ars-nav-submenu__item:where(:disabled,[aria-disabled=true]) .ars-nav__icon--sprite{--sp-frame: var(--sp-disabled)}.ars-nav__item:where(:hover,:focus-visible) .ars-nav__icon,.ars-nav-submenu__item:where(:hover,:focus-visible) .ars-nav__icon{transform:scale(var(--_icon-hover-scale, 1.12))}.ars-nav__item--selected .ars-nav__icon,.ars-nav-submenu__item--selected .ars-nav__icon{transform:scale(1)}.ars-nav__item:where(:active) .ars-nav__icon,.ars-nav-submenu__item:where(:active) .ars-nav__icon{transform:scale(var(--_icon-press-scale, .92));transition-duration:var(--_dur-short, .15s)}:host([data-variant=bar]) .ars-nav__item--icon-only{flex:0 0 auto;min-width:56px;max-width:72px}.ars-nav__chevron{position:relative;z-index:1;flex:none;margin-inline-start:8px;width:20px;height:20px;font-size:20px;line-height:20px;color:var(--_icon);rotate:0deg;transition:rotate var(--_dur) var(--_easing)}.ars-nav__chevron--open{rotate:180deg}.ars-nav__item[data-depth=\"1\"]{--_depth-pad: 24px}.ars-nav__item[data-depth=\"2\"]{--_depth-pad: 48px}.ars-nav__item[data-depth=\"3\"]{--_depth-pad: 72px}.ars-nav-submenu{--_easing: var(--ars-navigation-easing, cubic-bezier(.2, 0, 0, 1));--_dur-short: var(--ars-navigation-duration-short, .15s);--_dur: var(--ars-navigation-duration, .25s);--_dur-long: var(--ars-navigation-duration-long, .4s);--_icon-hover-scale: var(--ars-navigation-icon-hover-scale, 1.12);--_icon-press-scale: var(--ars-navigation-icon-press-scale, .92);--_state: var(--ars-navigation-state-layer-color, var(--mat-sys-on-surface, #191c1b));--_indicator: var(--ars-navigation-indicator-color, var(--mat-sys-secondary-container, #cce8e2));box-sizing:border-box;display:flex;flex-direction:column;gap:2px;min-width:200px;max-width:320px;max-height:60vh;padding:8px;border-radius:12px;background:var(--ars-navigation-menu-container-color, var(--mat-sys-surface-container-high, #e7e9e8));color:var(--ars-navigation-label-color, var(--mat-sys-on-surface, #191c1b));box-shadow:0 1px 2px #0000004d,0 2px 6px 2px #00000026;overflow-y:auto;overscroll-behavior:contain}.ars-nav-submenu__item{box-sizing:border-box;display:flex;align-items:center;gap:12px;flex:none;min-height:48px;margin:0;padding:0 12px;border:0;border-radius:8px;background:transparent;color:inherit;font:inherit;text-align:start;text-decoration:none;cursor:pointer;appearance:none}.ars-nav-submenu__item:hover{background:color-mix(in srgb,currentColor 8%,transparent)}.ars-nav-submenu__item:focus-visible{outline:3px solid var(--ars-navigation-focus-color, var(--ars-color-primary, #00a293));outline-offset:-3px}.ars-nav-submenu__item--selected{background:var(--_indicator);color:var(--ars-navigation-active-icon-color, var(--mat-sys-on-secondary-container, #0b1f1c))}.ars-nav-submenu__item--selected:where(:hover,:focus-visible){background:color-mix(in srgb,var(--_state) 8%,var(--_indicator))}.ars-nav-submenu__item:disabled,.ars-nav-submenu__item[aria-disabled=true]{opacity:.38;pointer-events:none}.ars-nav-submenu__heading{padding:12px 12px 4px;font-size:11px;line-height:16px;font-weight:500;letter-spacing:.5px;text-transform:uppercase;opacity:.7}.ars-nav-submenu__heading:first-child{padding-top:4px}.ars-nav-submenu__label{flex:1 1 auto;min-width:0;font-size:14px;line-height:20px;font-weight:500;letter-spacing:.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ars-nav-submenu__trailing{flex:none;font-size:11px;line-height:16px;font-weight:500;letter-spacing:.5px;opacity:.8}@media(prefers-reduced-motion:reduce){:host{--_dur-short: 0ms;--_dur: 0ms;--_dur-long: 0ms;--_icon-hover-scale: 1;--_icon-press-scale: 1}:host([data-indicator=wide]) .ars-nav__item:before,:host([data-indicator=compact]) .ars-nav__icon-box:before{transform:none}.ars-nav-submenu{--_dur-short: 0ms;--_dur: 0ms;--_dur-long: 0ms;--_icon-hover-scale: 1;--_icon-press-scale: 1}}@media(forced-colors:active){:host([data-indicator=compact]) .ars-nav__item--selected .ars-nav__icon-box:before,:host([data-indicator=wide]) .ars-nav__item--selected:before{background:Highlight;forced-color-adjust:none}.ars-nav__item:focus-visible{outline:3px solid CanvasText}}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1030
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", 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 }, alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, headline: { classPropertyName: "headline", publicName: "headline", isSignal: true, isRequired: false, transformFunction: null }, showMenuButton: { classPropertyName: "showMenuButton", publicName: "showMenuButton", isSignal: true, isRequired: false, transformFunction: null }, menuIcon: { classPropertyName: "menuIcon", publicName: "menuIcon", isSignal: true, isRequired: false, transformFunction: null }, expandIcon: { classPropertyName: "expandIcon", publicName: "expandIcon", isSignal: true, isRequired: false, transformFunction: null }, overflowMode: { classPropertyName: "overflowMode", publicName: "overflowMode", isSignal: true, isRequired: false, transformFunction: null }, overflowIcon: { classPropertyName: "overflowIcon", publicName: "overflowIcon", isSignal: true, isRequired: false, transformFunction: null }, overflowLabel: { classPropertyName: "overflowLabel", publicName: "overflowLabel", isSignal: true, isRequired: false, transformFunction: null }, maxVisibleItems: { classPropertyName: "maxVisibleItems", publicName: "maxVisibleItems", isSignal: true, isRequired: false, transformFunction: null }, menuAriaLabel: { classPropertyName: "menuAriaLabel", publicName: "menuAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, scrim: { classPropertyName: "scrim", publicName: "scrim", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, elevated: { classPropertyName: "elevated", publicName: "elevated", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, tooltips: { classPropertyName: "tooltips", publicName: "tooltips", isSignal: true, isRequired: false, transformFunction: null }, routerSync: { classPropertyName: "routerSync", publicName: "routerSync", isSignal: true, isRequired: false, transformFunction: null }, relativeTo: { classPropertyName: "relativeTo", publicName: "relativeTo", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedId: "selectedIdChange", expandedIds: "expandedIdsChange", open: "openChange", itemSelected: "itemSelected", menuClick: "menuClick" }, host: { properties: { "attr.data-variant": "resolvedVariant()", "attr.data-layout": "resolvedLayout()", "attr.data-align": "alignment()", "attr.data-position": "position()", "attr.data-labels": "resolvedLabelVisibility()", "attr.data-indicator": "indicatorMode()", "class.ars-navigation--open": "isOverlayOpen()", "class.ars-navigation--elevated": "elevated()", "class.ars-navigation--bordered": "bordered()", "class.ars-navigation--hidden": "isHidden()", "style.--ars-navigation-width": "widthStyle()" }, classAttribute: "ars-navigation" }, viewQueries: [{ propertyName: "itemElements", predicate: ["navItem"], descendants: true, isSignal: true }, { propertyName: "panelElements", predicate: ["panelItem"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (isModal() && scrim()) {\n <div class=\"ars-nav__scrim\" aria-hidden=\"true\" (click)=\"onScrimClick()\"></div>\n}\n\n<nav class=\"ars-nav\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.role]=\"isModal() ? 'dialog' : undefined\"\n [attr.aria-modal]=\"isModal() ? 'true' : undefined\"\n [attr.inert]=\"isHidden() ? '' : undefined\"\n [cdkTrapFocus]=\"isOverlayOpen()\"\n [cdkTrapFocusAutoCapture]=\"isOverlayOpen()\"\n (keydown)=\"onKeydown($event)\">\n\n @let labels = resolvedLabelVisibility();\n @let wide = isExpanded();\n @let active = activeId();\n @let highlighted = highlightedIds();\n @let openIds = expandedSet();\n @let popupOpenId = popupItem()?.item.id;\n\n @if (showsHeader()) {\n <div class=\"ars-nav__header\">\n @if (showMenuButton()) {\n <button type=\"button\"\n class=\"ars-nav__menu\"\n [attr.aria-label]=\"menuAriaLabel()\"\n (click)=\"onMenuClick()\">\n <mat-icon aria-hidden=\"true\">{{ menuIcon() }}</mat-icon>\n </button>\n }\n @if (wide) {\n @if (headline(); as headlineText) {\n <h2 class=\"ars-nav__headline\">{{ headlineText }}</h2>\n }\n }\n </div>\n }\n\n <div class=\"ars-nav__leading\"><ng-content select=\"[navHeader]\" /></div>\n <div class=\"ars-nav__fab\"><ng-content select=\"[navFab]\" /></div>\n\n @for (group of visibleGroups(); track group.align) {\n <div class=\"ars-nav__items\" [class.ars-nav__items--bottom]=\"group.align === 'bottom'\">\n @for (block of group.sections; track block.section.id) {\n\n @if (wide && block.section.label) {\n <h3 class=\"ars-nav__section-headline\">{{ block.section.label }}</h3>\n }\n\n @for (r of block.items; track r.item.id) {\n @let current = r.item.id === active;\n @let selected = highlighted.has(r.item.id);\n @let labelVisible = !r.iconOnly && (labels === 'labeled' || (labels === 'selected' && selected));\n @let branchOpen = r.hasChildren && openIds.has(r.item.id);\n @let hideIcon = wide && r.depth > 0 && !childIcons();\n @let svg = selected ? r.svgOn : r.svgOff;\n @let image = selected ? r.imageOn : r.imageOff;\n @let ligature = selected ? r.iconOn : r.iconOff;\n\n <!--\n The anchor and the button branches duplicate the inner markup on purpose:\n an `ng-template` + `ngTemplateOutlet` would allocate one extra embedded\n view per destination and lose the typed template context.\n -->\n @if (r.href && !r.hasChildren) {\n <a #navItem\n class=\"ars-nav__item\"\n [class.ars-nav__item--selected]=\"selected\"\n [class.ars-nav__item--disabled]=\"r.item.disabled\"\n [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) {\n <span class=\"ars-nav__label\" [class.ars-nav__label--hidden]=\"!labelVisible\">{{ r.item.label }}</span>\n }\n @if (wide && r.item.trailing) {\n <span class=\"ars-nav__trailing\">{{ r.item.trailing }}</span>\n }\n <!-- 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--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) {\n <span class=\"ars-nav__label\" [class.ars-nav__label--hidden]=\"!labelVisible\">{{ r.item.label }}</span>\n }\n @if (wide && r.item.trailing) {\n <span class=\"ars-nav__trailing\">{{ r.item.trailing }}</span>\n }\n <!-- 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--selected]=\"childSelected\"\n [attr.href]=\"c.item.disabled ? undefined : c.href\"\n [attr.target]=\"c.item.target\"\n [attr.rel]=\"c.item.target === '_blank' ? 'noopener noreferrer' : undefined\"\n [attr.aria-disabled]=\"c.item.disabled ? 'true' : undefined\"\n [attr.aria-current]=\"childSelected ? 'page' : undefined\"\n (click)=\"select(c, $event)\">\n @if (childSvg; as svgName) {\n <mat-icon class=\"ars-nav__icon\" [svgIcon]=\"svgName\" aria-hidden=\"true\" />\n } @else if (c.spriteStyle; as spriteStyle) {\n <span class=\"ars-nav__icon ars-nav__icon--sprite\" [style]=\"spriteStyle\" aria-hidden=\"true\"></span>\n } @else if (childImage; as imageUrl) {\n <img class=\"ars-nav__icon ars-nav__icon--image\" [src]=\"imageUrl\" alt=\"\" loading=\"lazy\" decoding=\"async\" />\n } @else if (childLigature; as ligatureName) {\n <mat-icon class=\"ars-nav__icon\" aria-hidden=\"true\">{{ ligatureName }}</mat-icon>\n }\n <span class=\"ars-nav-submenu__label\">{{ c.item.label }}</span>\n @if (c.badgeText) {\n <span class=\"ars-nav-submenu__trailing\">{{ c.badgeText }}</span>\n } @else if (c.item.trailing) {\n <span class=\"ars-nav-submenu__trailing\">{{ c.item.trailing }}</span>\n }\n </a>\n } @else {\n <button #panelItem\n type=\"button\"\n class=\"ars-nav-submenu__item\"\n role=\"menuitem\"\n [class.ars-nav-submenu__item--selected]=\"childSelected\"\n [disabled]=\"!!c.item.disabled\"\n [attr.aria-current]=\"childSelected ? 'page' : undefined\"\n (click)=\"select(c, $event)\">\n @if (childSvg; as svgName) {\n <mat-icon class=\"ars-nav__icon\" [svgIcon]=\"svgName\" aria-hidden=\"true\" />\n } @else if (c.spriteStyle; as spriteStyle) {\n <span class=\"ars-nav__icon ars-nav__icon--sprite\" [style]=\"spriteStyle\" aria-hidden=\"true\"></span>\n } @else if (childImage; as imageUrl) {\n <img class=\"ars-nav__icon ars-nav__icon--image\" [src]=\"imageUrl\" alt=\"\" loading=\"lazy\" decoding=\"async\" />\n } @else if (childLigature; as ligatureName) {\n <mat-icon class=\"ars-nav__icon\" aria-hidden=\"true\">{{ ligatureName }}</mat-icon>\n }\n <span class=\"ars-nav-submenu__label\">{{ c.item.label }}</span>\n @if (c.badgeText) {\n <span class=\"ars-nav-submenu__trailing\">{{ c.badgeText }}</span>\n } @else if (c.item.trailing) {\n <span class=\"ars-nav-submenu__trailing\">{{ c.item.trailing }}</span>\n }\n </button>\n }\n } @else {\n <div class=\"ars-nav-submenu__heading\" role=\"presentation\">{{ entry.label }}</div>\n }\n }\n </div>\n</ng-template>\n", styles: [":host{--_container: var(--ars-navigation-container-color, var(--mat-sys-surface-container, #eff1ef));--_indicator: var(--ars-navigation-indicator-color, var(--mat-sys-secondary-container, #cce8e2));--_icon: var(--ars-navigation-icon-color, var(--mat-sys-on-surface-variant, #3f4947));--_icon-active: var(--ars-navigation-active-icon-color, var(--mat-sys-on-secondary-container, #0b1f1c));--_label: var(--ars-navigation-label-color, var(--mat-sys-on-surface-variant, #3f4947));--_label-active: var(--ars-navigation-active-label-color, var(--ars-color-secondary, #4a635f));--_headline: var(--ars-navigation-headline-color, var(--mat-sys-on-surface-variant, #3f4947));--_state: var(--ars-navigation-state-layer-color, var(--mat-sys-on-surface, #191c1b));--_badge: var(--ars-navigation-badge-color, var(--ars-color-error, #ff5449));--_badge-text: var(--ars-navigation-badge-text-color, #ffffff);--_divider: var(--ars-navigation-divider-color, var(--ars-color-divider, #757d87));--_scrim: var(--ars-navigation-scrim-color, rgba(0, 0, 0, .4));--_focus: var(--ars-navigation-focus-color, var(--ars-color-primary, #00a293));--_easing: var(--ars-navigation-easing, cubic-bezier(.2, 0, 0, 1));--_dur-short: var(--ars-navigation-duration-short, .15s);--_dur: var(--ars-navigation-duration, .25s);--_dur-long: var(--ars-navigation-duration-long, .4s);--_icon-hover-scale: var(--ars-navigation-icon-hover-scale, 1.12);--_icon-press-scale: var(--ars-navigation-icon-press-scale, .92);--_hover-opacity: .08;--_focus-opacity: .1;--_press-opacity: .1;--_rtl: 1;display:block;box-sizing:border-box;color:var(--_label);-webkit-tap-highlight-color:transparent}:host-context([dir=rtl]){--_rtl: -1}.ars-nav{box-sizing:border-box;display:flex;position:relative;background:var(--_container);color:var(--_label);overflow:hidden}.ars-nav__items{box-sizing:border-box;display:flex;min-height:0;min-width:0;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--_state) 25%,transparent) transparent}.ars-nav__header{box-sizing:border-box;display:flex;align-items:center;flex:none;gap:12px}.ars-nav__leading,.ars-nav__fab,.ars-nav__footer{box-sizing:border-box;flex:none}.ars-nav__leading:empty,.ars-nav__fab:empty,.ars-nav__footer:empty{display:none}.ars-nav__headline{margin:0;padding:0 16px;font-size:22px;line-height:28px;font-weight:400;color:var(--_headline);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ars-nav__section-headline{margin:0;padding:18px 16px 8px;font-size:14px;line-height:20px;font-weight:500;letter-spacing:.1px;color:var(--_headline);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ars-nav__divider{flex:none;margin:8px 16px;border:0;border-top:1px solid var(--_divider);opacity:.4}.ars-nav__menu{display:inline-flex;align-items:center;justify-content:center;flex:none;width:48px;height:48px;margin:0;padding:0;border:0;border-radius:50%;background:transparent;color:var(--_icon);cursor:pointer;transition:background-color var(--_dur-short) var(--_easing)}.ars-nav__menu:hover{background:color-mix(in srgb,var(--_state) 8%,transparent)}.ars-nav__menu:focus-visible{outline:3px solid var(--_focus);outline-offset:2px}.ars-nav__item{box-sizing:border-box;position:relative;isolation:isolate;display:flex;align-items:center;flex:none;margin:0;border:0;background:transparent;color:var(--_label);font:inherit;text-align:start;text-decoration:none;cursor:pointer;-webkit-user-select:none;user-select:none;appearance:none;-webkit-tap-highlight-color:transparent}.ars-nav__item:focus-visible{outline:3px solid var(--_focus);outline-offset:-3px;border-radius:16px}.ars-nav__item--disabled,.ars-nav__item:disabled{cursor:default;opacity:.38;pointer-events:none}.ars-nav__icon-box{box-sizing:border-box;position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;width:24px;height:24px;color:var(--_icon);transition:color var(--_dur) var(--_easing)}.ars-nav__icon{position:relative;z-index:1;width:24px;height:24px;font-size:24px;line-height:24px;font-variation-settings:\"FILL\" 0;transform:scale(1);transform-origin:center;transition:font-variation-settings var(--_dur, .25s) var(--_easing, cubic-bezier(.2, 0, 0, 1)),transform var(--_dur, .25s) var(--_easing, cubic-bezier(.2, 0, 0, 1))}.ars-nav__label{position:relative;z-index:1;min-width:0;font:var(--mat-sys-label-large, 500 14px/20px Roboto, sans-serif);letter-spacing:var(--mat-sys-label-large-tracking, .1px);color:var(--_label);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color var(--_dur) var(--_easing),opacity var(--_dur) var(--_easing),max-height var(--_dur) var(--_easing),margin var(--_dur) var(--_easing)}.ars-nav__label--hidden{opacity:0;max-height:0;margin:0!important;pointer-events:none}.ars-nav__trailing{position:relative;z-index:1;margin-inline-start:auto;padding-inline-start:12px;font-size:11px;line-height:16px;font-weight:500;letter-spacing:.5px;color:var(--_label);white-space:nowrap}.ars-nav__badge{position:absolute;z-index:2;top:-6px;inset-inline-start:12px;box-sizing:border-box;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--_badge);color:var(--_badge-text);font-size:11px;line-height:16px;font-weight:500;letter-spacing:.5px;text-align:center;white-space:nowrap}.ars-nav__badge--dot{top:-1px;inset-inline-start:16px;width:6px;min-width:6px;height:6px;padding:0;border-radius:3px}.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--selected .ars-nav__icon-box:before{opacity:1;transform:scaleX(1)}:host([data-indicator=compact]) .ars-nav__item:hover .ars-nav__icon-box:after{opacity:var(--_hover-opacity)}:host([data-indicator=compact]) .ars-nav__item:focus-visible .ars-nav__icon-box:after{opacity:var(--_focus-opacity)}:host([data-indicator=compact]) .ars-nav__item:active .ars-nav__icon-box:after{opacity:var(--_press-opacity)}:host([data-indicator=wide]) .ars-nav__item:before{content:\"\";position:absolute;z-index:0;background:var(--_indicator);opacity:0;transform:scaleX(.55);transition:opacity var(--_dur) var(--_easing),transform var(--_dur-long) var(--_easing);pointer-events:none;inset:0;border-radius:28px}:host([data-indicator=wide]) .ars-nav__item:after{content:\"\";position:absolute;z-index:0;background:var(--_state);opacity:0;transition:opacity var(--_dur-short) var(--_easing);pointer-events:none;inset:0;border-radius:28px}:host([data-indicator=wide]) .ars-nav__item--selected:before{opacity:1;transform:scaleX(1)}:host([data-indicator=wide]) .ars-nav__item:hover:after{opacity:var(--_hover-opacity)}:host([data-indicator=wide]) .ars-nav__item:focus-visible:after{opacity:var(--_focus-opacity)}:host([data-indicator=wide]) .ars-nav__item:active:after{opacity:var(--_press-opacity)}.ars-nav__item--selected .ars-nav__icon-box{color:var(--_icon-active)}.ars-nav__item--selected .ars-nav__icon{font-variation-settings:\"FILL\" 1}.ars-nav__item--selected .ars-nav__label{color:var(--_label-active)}:host([data-layout=vertical]) .ars-nav__item{flex-direction:column;justify-content:center}:host([data-layout=vertical]) .ars-nav__label{font:var(--mat-sys-label-medium, 500 12px/16px Roboto, sans-serif);letter-spacing:var(--mat-sys-label-medium-tracking, .5px);margin-top:6px;max-width:100%;text-align:center}:host([data-layout=horizontal]) .ars-nav__item{flex-direction:row;justify-content:flex-start}:host([data-layout=horizontal]) .ars-nav__label{margin-inline-start:4px}:host([data-variant=bar]){width:100%}:host([data-variant=bar]) .ars-nav{flex-direction:row;align-items:center;justify-content:space-around;width:100%;height:var(--ars-navigation-bar-height, 64px);padding:0 8px}:host([data-variant=bar]) .ars-nav__header,:host([data-variant=bar]) .ars-nav__leading,:host([data-variant=bar]) .ars-nav__fab,:host([data-variant=bar]) .ars-nav__footer,:host([data-variant=bar]) .ars-nav__section-headline,:host([data-variant=bar]) .ars-nav__divider,:host([data-variant=bar]) .ars-nav__trailing{display:none}:host([data-variant=bar]) .ars-nav__items{display:contents}:host([data-variant=bar]) .ars-nav__item{flex:1 1 0;min-width:0;height:100%}:host([data-variant=bar][data-layout=horizontal]) .ars-nav__item{justify-content:center;max-width:var(--ars-navigation-item-max-width, 168px);padding:0 12px}:host([data-variant=bar][data-indicator=wide]) .ars-nav__item:before,:host([data-variant=bar][data-indicator=wide]) .ars-nav__item:after{inset:12px 0}:host([data-variant=rail]){height:100%}:host([data-variant=rail]) .ars-nav{flex-direction:column;align-items:center;width:var(--ars-navigation-width, 96px);height:100%;padding:var(--ars-navigation-rail-top-padding, 20px) 0 8px}:host([data-variant=rail]) .ars-nav__header{flex-direction:column;margin-bottom:40px}:host([data-variant=rail]) .ars-nav__headline,:host([data-variant=rail]) .ars-nav__section-headline,:host([data-variant=rail]) .ars-nav__divider,:host([data-variant=rail]) .ars-nav__trailing{display:none}:host([data-variant=rail]) .ars-nav__fab{margin-bottom:40px}:host([data-variant=rail]) .ars-nav__items{flex:1 1 auto;flex-direction:column;align-items:center;gap:4px;width:100%;overflow-y:auto;overscroll-behavior:contain}:host([data-variant=rail]) .ars-nav__item{justify-content:center;width:100%;height:64px;padding:0 4px}:host([data-variant=rail-expanded]),:host([data-variant=drawer]),:host([data-variant=modal]){height:100%}:host([data-variant=rail-expanded]) .ars-nav,:host([data-variant=drawer]) .ars-nav,:host([data-variant=modal]) .ars-nav{flex-direction:column;align-items:stretch;height:100%;padding:12px 0}:host([data-variant=rail-expanded]) .ars-nav__header,:host([data-variant=drawer]) .ars-nav__header,:host([data-variant=modal]) .ars-nav__header{padding:4px 8px 8px}:host([data-variant=rail-expanded]) .ars-nav__items,:host([data-variant=drawer]) .ars-nav__items,:host([data-variant=modal]) .ars-nav__items{flex:1 1 auto;flex-direction:column;gap:4px;overflow-y:auto;overscroll-behavior:contain}:host([data-variant=rail-expanded]) .ars-nav__item,:host([data-variant=drawer]) .ars-nav__item,:host([data-variant=modal]) .ars-nav__item{height:56px;padding-block:0;padding-inline:24px;margin-block:0;margin-inline:calc(var(--ars-navigation-item-inset, 20px) + var(--_depth-indent, 0px)) var(--ars-navigation-item-inset, 20px)}:host([data-variant=rail-expanded]) .ars-nav__icon-box,:host([data-variant=drawer]) .ars-nav__icon-box,:host([data-variant=modal]) .ars-nav__icon-box{margin-inline-end:12px}:host([data-variant=rail-expanded]) .ars-nav__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\"]){height:var(--ars-navigation-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(--ars-navigation-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{flex:1 1 auto;margin-inline-start:0}:host([data-variant=rail-expanded]) .ars-nav{width:var(--ars-navigation-width, 220px)}:host([data-variant=drawer]) .ars-nav,:host([data-variant=modal]) .ars-nav{width:var(--ars-navigation-width, 360px)}:host([data-variant=modal]){position:fixed;inset:0;z-index:var(--ars-navigation-z-index, 1000);height:auto;pointer-events:none}:host([data-variant=modal]) .ars-nav{position:absolute;inset-block:0;inset-inline-start:0;pointer-events:auto;border-start-end-radius:16px;border-end-end-radius:16px;translate:calc(var(--_shift, 0%) * var(--_rtl)) 0;transition:translate var(--_dur-long) var(--_easing),visibility var(--_dur-long) var(--_easing)}:host([data-variant=modal][data-position=end]) .ars-nav{inset-inline-start:auto;inset-inline-end:0;border-radius:0;border-start-start-radius:16px;border-end-start-radius:16px}:host([data-variant=modal].ars-navigation--hidden) .ars-nav__scrim{opacity:0;pointer-events:none}:host([data-variant=modal].ars-navigation--hidden) .ars-nav{--_shift: -100%;visibility:hidden}:host([data-variant=modal][data-position=end].ars-navigation--hidden) .ars-nav{--_shift: 100%}.ars-nav__scrim{position:absolute;inset:0;background:var(--_scrim);opacity:1;pointer-events:auto;transition:opacity var(--_dur-long) var(--_easing)}:host(:not([data-variant=bar])) .ars-nav__items--bottom{flex:0 0 auto;margin-block-start:auto;overflow:visible}:host([data-align=center]) .ars-nav__items:not(.ars-nav__items--bottom){justify-content:safe center}:host([data-align=bottom]) .ars-nav__items:not(.ars-nav__items--bottom){justify-content:safe flex-end}:host(.ars-navigation--elevated) .ars-nav{box-shadow:0 1px 3px #0000004d,0 4px 8px 3px #00000026}:host(.ars-navigation--hidden):not([data-variant=modal]){display:none}.ars-nav__icon--image{object-fit:contain}.ars-nav__icon--sprite{display:inline-block;flex:none;width:var(--sp-size, 24px);height:var(--sp-size, 24px);background-image:var(--sp-url);background-repeat:no-repeat;background-size:var(--sp-sheet-x, auto) var(--sp-sheet-y, auto);background-position:calc(var(--sp-frame, var(--sp-normal, 0)) * var(--sp-step-x, 0px)) calc(var(--sp-frame, var(--sp-normal, 0)) * var(--sp-step-y, 0px))}.ars-nav__item:where(:hover,:focus-visible) .ars-nav__icon--sprite,.ars-nav-submenu__item:where(:hover,:focus-visible) .ars-nav__icon--sprite{--sp-frame: var(--sp-hover)}.ars-nav__item--selected .ars-nav__icon--sprite,.ars-nav-submenu__item--selected .ars-nav__icon--sprite{--sp-frame: var(--sp-active)}.ars-nav__item--disabled .ars-nav__icon--sprite,.ars-nav__item:where(:disabled) .ars-nav__icon--sprite,.ars-nav-submenu__item:where(:disabled,[aria-disabled=true]) .ars-nav__icon--sprite{--sp-frame: var(--sp-disabled)}.ars-nav__item:where(:hover,:focus-visible) .ars-nav__icon,.ars-nav-submenu__item:where(:hover,:focus-visible) .ars-nav__icon{transform:scale(var(--_icon-hover-scale, 1.12))}.ars-nav__item--selected .ars-nav__icon,.ars-nav-submenu__item--selected .ars-nav__icon{transform:scale(1)}.ars-nav__item:where(:active) .ars-nav__icon,.ars-nav-submenu__item:where(:active) .ars-nav__icon{transform:scale(var(--_icon-press-scale, .92));transition-duration:var(--_dur-short, .15s)}:host([data-variant=bar]) .ars-nav__item--icon-only{flex:0 0 auto;min-width:56px;max-width:72px}.ars-nav__chevron{position:relative;z-index:1;flex:none;margin-inline-start:8px;width:20px;height:20px;font-size:20px;line-height:20px;color:var(--_icon);rotate:0deg;transition:rotate var(--_dur) var(--_easing)}.ars-nav__chevron--open{rotate:180deg}.ars-nav__item[data-depth=\"1\"]{--_depth-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(--mat-sys-surface-container-high, #e7e9e8));color:var(--ars-navigation-label-color, var(--mat-sys-on-surface, #191c1b));box-shadow:0 1px 2px #0000004d,0 2px 6px 2px #00000026;overflow-y:auto;overscroll-behavior:contain}.ars-nav-submenu__item{box-sizing:border-box;display:flex;align-items:center;gap:12px;flex:none;min-height:48px;margin:0;padding:0 12px;border:0;border-radius:8px;background:transparent;color:inherit;font:inherit;text-align:start;text-decoration:none;cursor:pointer;appearance:none}.ars-nav-submenu__item:hover{background:color-mix(in srgb,currentColor 8%,transparent)}.ars-nav-submenu__item:focus-visible{outline:3px solid var(--ars-navigation-focus-color, var(--ars-color-primary, #00a293));outline-offset:-3px}.ars-nav-submenu__item--selected{background:var(--_indicator);color:var(--ars-navigation-active-icon-color, var(--mat-sys-on-secondary-container, #0b1f1c))}.ars-nav-submenu__item--selected:where(:hover,:focus-visible){background:color-mix(in srgb,var(--_state) 8%,var(--_indicator))}.ars-nav-submenu__item:disabled,.ars-nav-submenu__item[aria-disabled=true]{opacity:.38;pointer-events:none}.ars-nav-submenu__heading{padding:12px 12px 4px;font-size:11px;line-height:16px;font-weight:500;letter-spacing:.5px;text-transform:uppercase;opacity:.7}.ars-nav-submenu__heading:first-child{padding-top:4px}.ars-nav-submenu__label{flex:1 1 auto;min-width:0;font-size:14px;line-height:20px;font-weight:500;letter-spacing:.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ars-nav-submenu__trailing{flex:none;font-size:11px;line-height:16px;font-weight:500;letter-spacing:.5px;opacity:.8}@media(prefers-reduced-motion:reduce){:host{--_dur-short: 0ms;--_dur: 0ms;--_dur-long: 0ms;--_icon-hover-scale: 1;--_icon-press-scale: 1}:host([data-indicator=wide]) .ars-nav__item:before,:host([data-indicator=compact]) .ars-nav__icon-box:before{transform:none}.ars-nav-submenu{--_dur-short: 0ms;--_dur: 0ms;--_dur-long: 0ms;--_icon-hover-scale: 1;--_icon-press-scale: 1}}@media(forced-colors:active){:host([data-indicator=compact]) .ars-nav__item--selected .ars-nav__icon-box:before,:host([data-indicator=wide]) .ars-nav__item--selected:before{background:Highlight;forced-color-adjust:none}.ars-nav__item:focus-visible{outline:3px solid CanvasText}}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1031
1031
|
}
|
|
1032
1032
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavigationBarComponent, decorators: [{
|
|
1033
1033
|
type: Component,
|
|
@@ -1044,7 +1044,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
|
|
|
1044
1044
|
'[class.ars-navigation--bordered]': 'bordered()',
|
|
1045
1045
|
'[class.ars-navigation--hidden]': 'isHidden()',
|
|
1046
1046
|
'[style.--ars-navigation-width]': 'widthStyle()',
|
|
1047
|
-
}, template: "@if (isModal() && scrim()) {\n <div class=\"ars-nav__scrim\" aria-hidden=\"true\" (click)=\"onScrimClick()\"></div>\n}\n\n<nav class=\"ars-nav\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.role]=\"isModal() ? 'dialog' : undefined\"\n [attr.aria-modal]=\"isModal() ? 'true' : undefined\"\n [attr.inert]=\"isHidden() ? '' : undefined\"\n [cdkTrapFocus]=\"isOverlayOpen()\"\n [cdkTrapFocusAutoCapture]=\"isOverlayOpen()\"\n (keydown)=\"onKeydown($event)\">\n\n @let labels = resolvedLabelVisibility();\n @let wide = isExpanded();\n @let active = activeId();\n @let highlighted = highlightedIds();\n @let openIds = expandedSet();\n @let popupOpenId = popupItem()?.item.id;\n\n @if (showsHeader()) {\n <div class=\"ars-nav__header\">\n @if (showMenuButton()) {\n <button type=\"button\"\n class=\"ars-nav__menu\"\n [attr.aria-label]=\"menuAriaLabel()\"\n (click)=\"onMenuClick()\">\n <mat-icon aria-hidden=\"true\">{{ menuIcon() }}</mat-icon>\n </button>\n }\n @if (wide) {\n @if (headline(); as headlineText) {\n <h2 class=\"ars-nav__headline\">{{ headlineText }}</h2>\n }\n }\n </div>\n }\n\n <div class=\"ars-nav__leading\"><ng-content select=\"[navHeader]\" /></div>\n <div class=\"ars-nav__fab\"><ng-content select=\"[navFab]\" /></div>\n\n @for (group of visibleGroups(); track group.align) {\n <div class=\"ars-nav__items\" [class.ars-nav__items--bottom]=\"group.align === 'bottom'\">\n @for (block of group.sections; track block.section.id) {\n\n @if (wide && block.section.label) {\n <h3 class=\"ars-nav__section-headline\">{{ block.section.label }}</h3>\n }\n\n @for (r of block.items; track r.item.id) {\n @let current = r.item.id === active;\n @let selected = highlighted.has(r.item.id);\n @let labelVisible = !r.iconOnly && (labels === 'labeled' || (labels === 'selected' && selected));\n @let branchOpen = r.hasChildren && openIds.has(r.item.id);\n @let hideIcon = wide && r.depth > 0 && !childIcons();\n @let svg = selected ? r.svgOn : r.svgOff;\n @let image = selected ? r.imageOn : r.imageOff;\n @let ligature = selected ? r.iconOn : r.iconOff;\n\n <!--\n The anchor and the button branches duplicate the inner markup on purpose:\n an `ng-template` + `ngTemplateOutlet` would allocate one extra embedded\n view per destination and lose the typed template context.\n -->\n @if (r.href && !r.hasChildren) {\n <a #navItem\n class=\"ars-nav__item\"\n [class.ars-nav__item--selected]=\"selected\"\n [class.ars-nav__item--disabled]=\"r.item.disabled\"\n [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) {\n <span class=\"ars-nav__label\" [class.ars-nav__label--hidden]=\"!labelVisible\">{{ r.item.label }}</span>\n }\n @if (wide && r.item.trailing) {\n <span class=\"ars-nav__trailing\">{{ r.item.trailing }}</span>\n }\n <!-- 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--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) {\n <span class=\"ars-nav__label\" [class.ars-nav__label--hidden]=\"!labelVisible\">{{ r.item.label }}</span>\n }\n @if (wide && r.item.trailing) {\n <span class=\"ars-nav__trailing\">{{ r.item.trailing }}</span>\n }\n <!-- 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--selected]=\"childSelected\"\n [attr.href]=\"c.item.disabled ? undefined : c.href\"\n [attr.target]=\"c.item.target\"\n [attr.rel]=\"c.item.target === '_blank' ? 'noopener noreferrer' : undefined\"\n [attr.aria-disabled]=\"c.item.disabled ? 'true' : undefined\"\n [attr.aria-current]=\"childSelected ? 'page' : undefined\"\n (click)=\"select(c, $event)\">\n @if (childSvg; as svgName) {\n <mat-icon class=\"ars-nav__icon\" [svgIcon]=\"svgName\" aria-hidden=\"true\" />\n } @else if (c.spriteStyle; as spriteStyle) {\n <span class=\"ars-nav__icon ars-nav__icon--sprite\" [style]=\"spriteStyle\" aria-hidden=\"true\"></span>\n } @else if (childImage; as imageUrl) {\n <img class=\"ars-nav__icon ars-nav__icon--image\" [src]=\"imageUrl\" alt=\"\" loading=\"lazy\" decoding=\"async\" />\n } @else if (childLigature; as ligatureName) {\n <mat-icon class=\"ars-nav__icon\" aria-hidden=\"true\">{{ ligatureName }}</mat-icon>\n }\n <span class=\"ars-nav-submenu__label\">{{ c.item.label }}</span>\n @if (c.badgeText) {\n <span class=\"ars-nav-submenu__trailing\">{{ c.badgeText }}</span>\n } @else if (c.item.trailing) {\n <span class=\"ars-nav-submenu__trailing\">{{ c.item.trailing }}</span>\n }\n </a>\n } @else {\n <button #panelItem\n type=\"button\"\n class=\"ars-nav-submenu__item\"\n role=\"menuitem\"\n [class.ars-nav-submenu__item--selected]=\"childSelected\"\n [disabled]=\"!!c.item.disabled\"\n [attr.aria-current]=\"childSelected ? 'page' : undefined\"\n (click)=\"select(c, $event)\">\n @if (childSvg; as svgName) {\n <mat-icon class=\"ars-nav__icon\" [svgIcon]=\"svgName\" aria-hidden=\"true\" />\n } @else if (c.spriteStyle; as spriteStyle) {\n <span class=\"ars-nav__icon ars-nav__icon--sprite\" [style]=\"spriteStyle\" aria-hidden=\"true\"></span>\n } @else if (childImage; as imageUrl) {\n <img class=\"ars-nav__icon ars-nav__icon--image\" [src]=\"imageUrl\" alt=\"\" loading=\"lazy\" decoding=\"async\" />\n } @else if (childLigature; as ligatureName) {\n <mat-icon class=\"ars-nav__icon\" aria-hidden=\"true\">{{ ligatureName }}</mat-icon>\n }\n <span class=\"ars-nav-submenu__label\">{{ c.item.label }}</span>\n @if (c.badgeText) {\n <span class=\"ars-nav-submenu__trailing\">{{ c.badgeText }}</span>\n } @else if (c.item.trailing) {\n <span class=\"ars-nav-submenu__trailing\">{{ c.item.trailing }}</span>\n }\n </button>\n }\n } @else {\n <div class=\"ars-nav-submenu__heading\" role=\"presentation\">{{ entry.label }}</div>\n }\n }\n </div>\n</ng-template>\n", styles: [":host{--_container: var(--ars-navigation-container-color, var(--mat-sys-surface-container, #eff1ef));--_indicator: var(--ars-navigation-indicator-color, var(--mat-sys-secondary-container, #cce8e2));--_icon: var(--ars-navigation-icon-color, var(--mat-sys-on-surface-variant, #3f4947));--_icon-active: var(--ars-navigation-active-icon-color, var(--mat-sys-on-secondary-container, #0b1f1c));--_label: var(--ars-navigation-label-color, var(--mat-sys-on-surface-variant, #3f4947));--_label-active: var(--ars-navigation-active-label-color, var(--ars-color-secondary, #4a635f));--_headline: var(--ars-navigation-headline-color, var(--mat-sys-on-surface-variant, #3f4947));--_state: var(--ars-navigation-state-layer-color, var(--mat-sys-on-surface, #191c1b));--_badge: var(--ars-navigation-badge-color, var(--ars-color-error, #ff5449));--_badge-text: var(--ars-navigation-badge-text-color, #ffffff);--_divider: var(--ars-navigation-divider-color, var(--ars-color-divider, #757d87));--_scrim: var(--ars-navigation-scrim-color, rgba(0, 0, 0, .4));--_focus: var(--ars-navigation-focus-color, var(--ars-color-primary, #00a293));--_easing: var(--ars-navigation-easing, cubic-bezier(.2, 0, 0, 1));--_dur-short: var(--ars-navigation-duration-short, .15s);--_dur: var(--ars-navigation-duration, .25s);--_dur-long: var(--ars-navigation-duration-long, .4s);--_icon-hover-scale: var(--ars-navigation-icon-hover-scale, 1.12);--_icon-press-scale: var(--ars-navigation-icon-press-scale, .92);--_hover-opacity: .08;--_focus-opacity: .1;--_press-opacity: .1;--_rtl: 1;display:block;box-sizing:border-box;color:var(--_label);-webkit-tap-highlight-color:transparent}:host-context([dir=rtl]){--_rtl: -1}.ars-nav{box-sizing:border-box;display:flex;position:relative;background:var(--_container);color:var(--_label);overflow:hidden}.ars-nav__items{box-sizing:border-box;display:flex;min-height:0;min-width:0;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--_state) 25%,transparent) transparent}.ars-nav__header{box-sizing:border-box;display:flex;align-items:center;flex:none;gap:12px}.ars-nav__leading,.ars-nav__fab,.ars-nav__footer{box-sizing:border-box;flex:none}.ars-nav__leading:empty,.ars-nav__fab:empty,.ars-nav__footer:empty{display:none}.ars-nav__headline{margin:0;padding:0 16px;font-size:22px;line-height:28px;font-weight:400;color:var(--_headline);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ars-nav__section-headline{margin:0;padding:18px 16px 8px;font-size:14px;line-height:20px;font-weight:500;letter-spacing:.1px;color:var(--_headline);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ars-nav__divider{flex:none;margin:8px 16px;border:0;border-top:1px solid var(--_divider);opacity:.4}.ars-nav__menu{display:inline-flex;align-items:center;justify-content:center;flex:none;width:48px;height:48px;margin:0;padding:0;border:0;border-radius:50%;background:transparent;color:var(--_icon);cursor:pointer;transition:background-color var(--_dur-short) var(--_easing)}.ars-nav__menu:hover{background:color-mix(in srgb,var(--_state) 8%,transparent)}.ars-nav__menu:focus-visible{outline:3px solid var(--_focus);outline-offset:2px}.ars-nav__item{box-sizing:border-box;position:relative;isolation:isolate;display:flex;align-items:center;flex:none;margin:0;border:0;background:transparent;color:var(--_label);font:inherit;text-align:start;text-decoration:none;cursor:pointer;-webkit-user-select:none;user-select:none;appearance:none;-webkit-tap-highlight-color:transparent}.ars-nav__item:focus-visible{outline:3px solid var(--_focus);outline-offset:-3px;border-radius:16px}.ars-nav__item--disabled,.ars-nav__item:disabled{cursor:default;opacity:.38;pointer-events:none}.ars-nav__icon-box{box-sizing:border-box;position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;width:24px;height:24px;color:var(--_icon);transition:color var(--_dur) var(--_easing)}.ars-nav__icon{position:relative;z-index:1;width:24px;height:24px;font-size:24px;line-height:24px;font-variation-settings:\"FILL\" 0;transform:scale(1);transform-origin:center;transition:font-variation-settings var(--_dur, .25s) var(--_easing, cubic-bezier(.2, 0, 0, 1)),transform var(--_dur, .25s) var(--_easing, cubic-bezier(.2, 0, 0, 1))}.ars-nav__label{position:relative;z-index:1;min-width:0;font:var(--mat-sys-label-large, 500 14px/20px Roboto, sans-serif);letter-spacing:var(--mat-sys-label-large-tracking, .1px);color:var(--_label);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color var(--_dur) var(--_easing),opacity var(--_dur) var(--_easing),max-height var(--_dur) var(--_easing),margin var(--_dur) var(--_easing)}.ars-nav__label--hidden{opacity:0;max-height:0;margin:0!important;pointer-events:none}.ars-nav__trailing{position:relative;z-index:1;margin-inline-start:auto;padding-inline-start:12px;font-size:11px;line-height:16px;font-weight:500;letter-spacing:.5px;color:var(--_label);white-space:nowrap}.ars-nav__badge{position:absolute;z-index:2;top:-6px;inset-inline-start:12px;box-sizing:border-box;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--_badge);color:var(--_badge-text);font-size:11px;line-height:16px;font-weight:500;letter-spacing:.5px;text-align:center;white-space:nowrap}.ars-nav__badge--dot{top:-1px;inset-inline-start:16px;width:6px;min-width:6px;height:6px;padding:0;border-radius:3px}.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--selected .ars-nav__icon-box:before{opacity:1;transform:scaleX(1)}:host([data-indicator=compact]) .ars-nav__item:hover .ars-nav__icon-box:after{opacity:var(--_hover-opacity)}:host([data-indicator=compact]) .ars-nav__item:focus-visible .ars-nav__icon-box:after{opacity:var(--_focus-opacity)}:host([data-indicator=compact]) .ars-nav__item:active .ars-nav__icon-box:after{opacity:var(--_press-opacity)}:host([data-indicator=wide]) .ars-nav__item:before{content:\"\";position:absolute;z-index:0;background:var(--_indicator);opacity:0;transform:scaleX(.55);transition:opacity var(--_dur) var(--_easing),transform var(--_dur-long) var(--_easing);pointer-events:none;inset:0;border-radius:28px}:host([data-indicator=wide]) .ars-nav__item:after{content:\"\";position:absolute;z-index:0;background:var(--_state);opacity:0;transition:opacity var(--_dur-short) var(--_easing);pointer-events:none;inset:0;border-radius:28px}:host([data-indicator=wide]) .ars-nav__item--selected:before{opacity:1;transform:scaleX(1)}:host([data-indicator=wide]) .ars-nav__item:hover:after{opacity:var(--_hover-opacity)}:host([data-indicator=wide]) .ars-nav__item:focus-visible:after{opacity:var(--_focus-opacity)}:host([data-indicator=wide]) .ars-nav__item:active:after{opacity:var(--_press-opacity)}.ars-nav__item--selected .ars-nav__icon-box{color:var(--_icon-active)}.ars-nav__item--selected .ars-nav__icon{font-variation-settings:\"FILL\" 1}.ars-nav__item--selected .ars-nav__label{color:var(--_label-active)}:host([data-layout=vertical]) .ars-nav__item{flex-direction:column;justify-content:center}:host([data-layout=vertical]) .ars-nav__label{font:var(--mat-sys-label-medium, 500 12px/16px Roboto, sans-serif);letter-spacing:var(--mat-sys-label-medium-tracking, .5px);margin-top:6px;max-width:100%;text-align:center}:host([data-layout=horizontal]) .ars-nav__item{flex-direction:row;justify-content:flex-start}:host([data-layout=horizontal]) .ars-nav__label{margin-inline-start:4px}:host([data-variant=bar]){width:100%}:host([data-variant=bar]) .ars-nav{flex-direction:row;align-items:center;justify-content:space-around;width:100%;height:var(--ars-navigation-bar-height, 64px);padding:0 8px}:host([data-variant=bar]) .ars-nav__header,:host([data-variant=bar]) .ars-nav__leading,:host([data-variant=bar]) .ars-nav__fab,:host([data-variant=bar]) .ars-nav__footer,:host([data-variant=bar]) .ars-nav__section-headline,:host([data-variant=bar]) .ars-nav__divider,:host([data-variant=bar]) .ars-nav__trailing{display:none}:host([data-variant=bar]) .ars-nav__items{display:contents}:host([data-variant=bar]) .ars-nav__item{flex:1 1 0;min-width:0;height:100%}:host([data-variant=bar][data-layout=horizontal]) .ars-nav__item{justify-content:center;max-width:var(--ars-navigation-item-max-width, 168px);padding:0 12px}:host([data-variant=bar][data-indicator=wide]) .ars-nav__item:before,:host([data-variant=bar][data-indicator=wide]) .ars-nav__item:after{inset:12px 0}:host([data-variant=rail]){height:100%}:host([data-variant=rail]) .ars-nav{flex-direction:column;align-items:center;width:var(--ars-navigation-width, 96px);height:100%;padding:var(--ars-navigation-rail-top-padding, 20px) 0 8px}:host([data-variant=rail]) .ars-nav__header{flex-direction:column;margin-bottom:40px}:host([data-variant=rail]) .ars-nav__headline,:host([data-variant=rail]) .ars-nav__section-headline,:host([data-variant=rail]) .ars-nav__divider,:host([data-variant=rail]) .ars-nav__trailing{display:none}:host([data-variant=rail]) .ars-nav__fab{margin-bottom:40px}:host([data-variant=rail]) .ars-nav__items{flex:1 1 auto;flex-direction:column;align-items:center;gap:4px;width:100%;overflow-y:auto;overscroll-behavior:contain}:host([data-variant=rail]) .ars-nav__item{justify-content:center;width:100%;height:64px;padding:0 4px}:host([data-variant=rail-expanded]),:host([data-variant=drawer]),:host([data-variant=modal]){height:100%}:host([data-variant=rail-expanded]) .ars-nav,:host([data-variant=drawer]) .ars-nav,:host([data-variant=modal]) .ars-nav{flex-direction:column;align-items:stretch;height:100%;padding:12px 0}:host([data-variant=rail-expanded]) .ars-nav__header,:host([data-variant=drawer]) .ars-nav__header,:host([data-variant=modal]) .ars-nav__header{padding:4px 8px 8px}:host([data-variant=rail-expanded]) .ars-nav__items,:host([data-variant=drawer]) .ars-nav__items,:host([data-variant=modal]) .ars-nav__items{flex:1 1 auto;flex-direction:column;gap:4px;overflow-y:auto;overscroll-behavior:contain}:host([data-variant=rail-expanded]) .ars-nav__item,:host([data-variant=drawer]) .ars-nav__item,:host([data-variant=modal]) .ars-nav__item{height:56px;padding-block:0;padding-inline:calc(24px + var(--_depth-pad, 0px)) 24px;margin:0 var(--ars-navigation-item-inset, 20px)}:host([data-variant=rail-expanded]) .ars-nav__icon-box,:host([data-variant=drawer]) .ars-nav__icon-box,:host([data-variant=modal]) .ars-nav__icon-box{margin-inline-end:12px}:host([data-variant=rail-expanded]) .ars-nav__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\"]){height:var(--ars-navigation-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(--ars-navigation-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{flex:1 1 auto;margin-inline-start:0}:host([data-variant=rail-expanded]) .ars-nav{width:var(--ars-navigation-width, 220px)}:host([data-variant=drawer]) .ars-nav,:host([data-variant=modal]) .ars-nav{width:var(--ars-navigation-width, 360px)}:host([data-variant=modal]){position:fixed;inset:0;z-index:var(--ars-navigation-z-index, 1000);height:auto;pointer-events:none}:host([data-variant=modal]) .ars-nav{position:absolute;inset-block:0;inset-inline-start:0;pointer-events:auto;border-start-end-radius:16px;border-end-end-radius:16px;translate:calc(var(--_shift, 0%) * var(--_rtl)) 0;transition:translate var(--_dur-long) var(--_easing),visibility var(--_dur-long) var(--_easing)}:host([data-variant=modal][data-position=end]) .ars-nav{inset-inline-start:auto;inset-inline-end:0;border-radius:0;border-start-start-radius:16px;border-end-start-radius:16px}:host([data-variant=modal].ars-navigation--hidden) .ars-nav__scrim{opacity:0;pointer-events:none}:host([data-variant=modal].ars-navigation--hidden) .ars-nav{--_shift: -100%;visibility:hidden}:host([data-variant=modal][data-position=end].ars-navigation--hidden) .ars-nav{--_shift: 100%}.ars-nav__scrim{position:absolute;inset:0;background:var(--_scrim);opacity:1;pointer-events:auto;transition:opacity var(--_dur-long) var(--_easing)}:host(:not([data-variant=bar])) .ars-nav__items--bottom{flex:0 0 auto;margin-block-start:auto;overflow:visible}:host([data-align=center]) .ars-nav__items:not(.ars-nav__items--bottom){justify-content:safe center}:host([data-align=bottom]) .ars-nav__items:not(.ars-nav__items--bottom){justify-content:safe flex-end}:host(.ars-navigation--elevated) .ars-nav{box-shadow:0 1px 3px #0000004d,0 4px 8px 3px #00000026}:host(.ars-navigation--hidden):not([data-variant=modal]){display:none}.ars-nav__icon--image{object-fit:contain}.ars-nav__icon--sprite{display:inline-block;flex:none;width:var(--sp-size, 24px);height:var(--sp-size, 24px);background-image:var(--sp-url);background-repeat:no-repeat;background-size:var(--sp-sheet-x, auto) var(--sp-sheet-y, auto);background-position:calc(var(--sp-frame, var(--sp-normal, 0)) * var(--sp-step-x, 0px)) calc(var(--sp-frame, var(--sp-normal, 0)) * var(--sp-step-y, 0px))}.ars-nav__item:where(:hover,:focus-visible) .ars-nav__icon--sprite,.ars-nav-submenu__item:where(:hover,:focus-visible) .ars-nav__icon--sprite{--sp-frame: var(--sp-hover)}.ars-nav__item--selected .ars-nav__icon--sprite,.ars-nav-submenu__item--selected .ars-nav__icon--sprite{--sp-frame: var(--sp-active)}.ars-nav__item--disabled .ars-nav__icon--sprite,.ars-nav__item:where(:disabled) .ars-nav__icon--sprite,.ars-nav-submenu__item:where(:disabled,[aria-disabled=true]) .ars-nav__icon--sprite{--sp-frame: var(--sp-disabled)}.ars-nav__item:where(:hover,:focus-visible) .ars-nav__icon,.ars-nav-submenu__item:where(:hover,:focus-visible) .ars-nav__icon{transform:scale(var(--_icon-hover-scale, 1.12))}.ars-nav__item--selected .ars-nav__icon,.ars-nav-submenu__item--selected .ars-nav__icon{transform:scale(1)}.ars-nav__item:where(:active) .ars-nav__icon,.ars-nav-submenu__item:where(:active) .ars-nav__icon{transform:scale(var(--_icon-press-scale, .92));transition-duration:var(--_dur-short, .15s)}:host([data-variant=bar]) .ars-nav__item--icon-only{flex:0 0 auto;min-width:56px;max-width:72px}.ars-nav__chevron{position:relative;z-index:1;flex:none;margin-inline-start:8px;width:20px;height:20px;font-size:20px;line-height:20px;color:var(--_icon);rotate:0deg;transition:rotate var(--_dur) var(--_easing)}.ars-nav__chevron--open{rotate:180deg}.ars-nav__item[data-depth=\"1\"]{--_depth-pad: 24px}.ars-nav__item[data-depth=\"2\"]{--_depth-pad: 48px}.ars-nav__item[data-depth=\"3\"]{--_depth-pad: 72px}.ars-nav-submenu{--_easing: var(--ars-navigation-easing, cubic-bezier(.2, 0, 0, 1));--_dur-short: var(--ars-navigation-duration-short, .15s);--_dur: var(--ars-navigation-duration, .25s);--_dur-long: var(--ars-navigation-duration-long, .4s);--_icon-hover-scale: var(--ars-navigation-icon-hover-scale, 1.12);--_icon-press-scale: var(--ars-navigation-icon-press-scale, .92);--_state: var(--ars-navigation-state-layer-color, var(--mat-sys-on-surface, #191c1b));--_indicator: var(--ars-navigation-indicator-color, var(--mat-sys-secondary-container, #cce8e2));box-sizing:border-box;display:flex;flex-direction:column;gap:2px;min-width:200px;max-width:320px;max-height:60vh;padding:8px;border-radius:12px;background:var(--ars-navigation-menu-container-color, var(--mat-sys-surface-container-high, #e7e9e8));color:var(--ars-navigation-label-color, var(--mat-sys-on-surface, #191c1b));box-shadow:0 1px 2px #0000004d,0 2px 6px 2px #00000026;overflow-y:auto;overscroll-behavior:contain}.ars-nav-submenu__item{box-sizing:border-box;display:flex;align-items:center;gap:12px;flex:none;min-height:48px;margin:0;padding:0 12px;border:0;border-radius:8px;background:transparent;color:inherit;font:inherit;text-align:start;text-decoration:none;cursor:pointer;appearance:none}.ars-nav-submenu__item:hover{background:color-mix(in srgb,currentColor 8%,transparent)}.ars-nav-submenu__item:focus-visible{outline:3px solid var(--ars-navigation-focus-color, var(--ars-color-primary, #00a293));outline-offset:-3px}.ars-nav-submenu__item--selected{background:var(--_indicator);color:var(--ars-navigation-active-icon-color, var(--mat-sys-on-secondary-container, #0b1f1c))}.ars-nav-submenu__item--selected:where(:hover,:focus-visible){background:color-mix(in srgb,var(--_state) 8%,var(--_indicator))}.ars-nav-submenu__item:disabled,.ars-nav-submenu__item[aria-disabled=true]{opacity:.38;pointer-events:none}.ars-nav-submenu__heading{padding:12px 12px 4px;font-size:11px;line-height:16px;font-weight:500;letter-spacing:.5px;text-transform:uppercase;opacity:.7}.ars-nav-submenu__heading:first-child{padding-top:4px}.ars-nav-submenu__label{flex:1 1 auto;min-width:0;font-size:14px;line-height:20px;font-weight:500;letter-spacing:.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ars-nav-submenu__trailing{flex:none;font-size:11px;line-height:16px;font-weight:500;letter-spacing:.5px;opacity:.8}@media(prefers-reduced-motion:reduce){:host{--_dur-short: 0ms;--_dur: 0ms;--_dur-long: 0ms;--_icon-hover-scale: 1;--_icon-press-scale: 1}:host([data-indicator=wide]) .ars-nav__item:before,:host([data-indicator=compact]) .ars-nav__icon-box:before{transform:none}.ars-nav-submenu{--_dur-short: 0ms;--_dur: 0ms;--_dur-long: 0ms;--_icon-hover-scale: 1;--_icon-press-scale: 1}}@media(forced-colors:active){:host([data-indicator=compact]) .ars-nav__item--selected .ars-nav__icon-box:before,:host([data-indicator=wide]) .ars-nav__item--selected:before{background:Highlight;forced-color-adjust:none}.ars-nav__item:focus-visible{outline:3px solid CanvasText}}\n"] }]
|
|
1047
|
+
}, template: "@if (isModal() && scrim()) {\n <div class=\"ars-nav__scrim\" aria-hidden=\"true\" (click)=\"onScrimClick()\"></div>\n}\n\n<nav class=\"ars-nav\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.role]=\"isModal() ? 'dialog' : undefined\"\n [attr.aria-modal]=\"isModal() ? 'true' : undefined\"\n [attr.inert]=\"isHidden() ? '' : undefined\"\n [cdkTrapFocus]=\"isOverlayOpen()\"\n [cdkTrapFocusAutoCapture]=\"isOverlayOpen()\"\n (keydown)=\"onKeydown($event)\">\n\n @let labels = resolvedLabelVisibility();\n @let wide = isExpanded();\n @let active = activeId();\n @let highlighted = highlightedIds();\n @let openIds = expandedSet();\n @let popupOpenId = popupItem()?.item.id;\n\n @if (showsHeader()) {\n <div class=\"ars-nav__header\">\n @if (showMenuButton()) {\n <button type=\"button\"\n class=\"ars-nav__menu\"\n [attr.aria-label]=\"menuAriaLabel()\"\n (click)=\"onMenuClick()\">\n <mat-icon aria-hidden=\"true\">{{ menuIcon() }}</mat-icon>\n </button>\n }\n @if (wide) {\n @if (headline(); as headlineText) {\n <h2 class=\"ars-nav__headline\">{{ headlineText }}</h2>\n }\n }\n </div>\n }\n\n <div class=\"ars-nav__leading\"><ng-content select=\"[navHeader]\" /></div>\n <div class=\"ars-nav__fab\"><ng-content select=\"[navFab]\" /></div>\n\n @for (group of visibleGroups(); track group.align) {\n <div class=\"ars-nav__items\" [class.ars-nav__items--bottom]=\"group.align === 'bottom'\">\n @for (block of group.sections; track block.section.id) {\n\n @if (wide && block.section.label) {\n <h3 class=\"ars-nav__section-headline\">{{ block.section.label }}</h3>\n }\n\n @for (r of block.items; track r.item.id) {\n @let current = r.item.id === active;\n @let selected = highlighted.has(r.item.id);\n @let labelVisible = !r.iconOnly && (labels === 'labeled' || (labels === 'selected' && selected));\n @let branchOpen = r.hasChildren && openIds.has(r.item.id);\n @let hideIcon = wide && r.depth > 0 && !childIcons();\n @let svg = selected ? r.svgOn : r.svgOff;\n @let image = selected ? r.imageOn : r.imageOff;\n @let ligature = selected ? r.iconOn : r.iconOff;\n\n <!--\n The anchor and the button branches duplicate the inner markup on purpose:\n an `ng-template` + `ngTemplateOutlet` would allocate one extra embedded\n view per destination and lose the typed template context.\n -->\n @if (r.href && !r.hasChildren) {\n <a #navItem\n class=\"ars-nav__item\"\n [class.ars-nav__item--selected]=\"selected\"\n [class.ars-nav__item--disabled]=\"r.item.disabled\"\n [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) {\n <span class=\"ars-nav__label\" [class.ars-nav__label--hidden]=\"!labelVisible\">{{ r.item.label }}</span>\n }\n @if (wide && r.item.trailing) {\n <span class=\"ars-nav__trailing\">{{ r.item.trailing }}</span>\n }\n <!-- 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--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) {\n <span class=\"ars-nav__label\" [class.ars-nav__label--hidden]=\"!labelVisible\">{{ r.item.label }}</span>\n }\n @if (wide && r.item.trailing) {\n <span class=\"ars-nav__trailing\">{{ r.item.trailing }}</span>\n }\n <!-- 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--selected]=\"childSelected\"\n [attr.href]=\"c.item.disabled ? undefined : c.href\"\n [attr.target]=\"c.item.target\"\n [attr.rel]=\"c.item.target === '_blank' ? 'noopener noreferrer' : undefined\"\n [attr.aria-disabled]=\"c.item.disabled ? 'true' : undefined\"\n [attr.aria-current]=\"childSelected ? 'page' : undefined\"\n (click)=\"select(c, $event)\">\n @if (childSvg; as svgName) {\n <mat-icon class=\"ars-nav__icon\" [svgIcon]=\"svgName\" aria-hidden=\"true\" />\n } @else if (c.spriteStyle; as spriteStyle) {\n <span class=\"ars-nav__icon ars-nav__icon--sprite\" [style]=\"spriteStyle\" aria-hidden=\"true\"></span>\n } @else if (childImage; as imageUrl) {\n <img class=\"ars-nav__icon ars-nav__icon--image\" [src]=\"imageUrl\" alt=\"\" loading=\"lazy\" decoding=\"async\" />\n } @else if (childLigature; as ligatureName) {\n <mat-icon class=\"ars-nav__icon\" aria-hidden=\"true\">{{ ligatureName }}</mat-icon>\n }\n <span class=\"ars-nav-submenu__label\">{{ c.item.label }}</span>\n @if (c.badgeText) {\n <span class=\"ars-nav-submenu__trailing\">{{ c.badgeText }}</span>\n } @else if (c.item.trailing) {\n <span class=\"ars-nav-submenu__trailing\">{{ c.item.trailing }}</span>\n }\n </a>\n } @else {\n <button #panelItem\n type=\"button\"\n class=\"ars-nav-submenu__item\"\n role=\"menuitem\"\n [class.ars-nav-submenu__item--selected]=\"childSelected\"\n [disabled]=\"!!c.item.disabled\"\n [attr.aria-current]=\"childSelected ? 'page' : undefined\"\n (click)=\"select(c, $event)\">\n @if (childSvg; as svgName) {\n <mat-icon class=\"ars-nav__icon\" [svgIcon]=\"svgName\" aria-hidden=\"true\" />\n } @else if (c.spriteStyle; as spriteStyle) {\n <span class=\"ars-nav__icon ars-nav__icon--sprite\" [style]=\"spriteStyle\" aria-hidden=\"true\"></span>\n } @else if (childImage; as imageUrl) {\n <img class=\"ars-nav__icon ars-nav__icon--image\" [src]=\"imageUrl\" alt=\"\" loading=\"lazy\" decoding=\"async\" />\n } @else if (childLigature; as ligatureName) {\n <mat-icon class=\"ars-nav__icon\" aria-hidden=\"true\">{{ ligatureName }}</mat-icon>\n }\n <span class=\"ars-nav-submenu__label\">{{ c.item.label }}</span>\n @if (c.badgeText) {\n <span class=\"ars-nav-submenu__trailing\">{{ c.badgeText }}</span>\n } @else if (c.item.trailing) {\n <span class=\"ars-nav-submenu__trailing\">{{ c.item.trailing }}</span>\n }\n </button>\n }\n } @else {\n <div class=\"ars-nav-submenu__heading\" role=\"presentation\">{{ entry.label }}</div>\n }\n }\n </div>\n</ng-template>\n", styles: [":host{--_container: var(--ars-navigation-container-color, var(--mat-sys-surface-container, #eff1ef));--_indicator: var(--ars-navigation-indicator-color, var(--mat-sys-secondary-container, #cce8e2));--_icon: var(--ars-navigation-icon-color, var(--mat-sys-on-surface-variant, #3f4947));--_icon-active: var(--ars-navigation-active-icon-color, var(--mat-sys-on-secondary-container, #0b1f1c));--_label: var(--ars-navigation-label-color, var(--mat-sys-on-surface-variant, #3f4947));--_label-active: var(--ars-navigation-active-label-color, var(--ars-color-secondary, #4a635f));--_headline: var(--ars-navigation-headline-color, var(--mat-sys-on-surface-variant, #3f4947));--_state: var(--ars-navigation-state-layer-color, var(--mat-sys-on-surface, #191c1b));--_badge: var(--ars-navigation-badge-color, var(--ars-color-error, #ff5449));--_badge-text: var(--ars-navigation-badge-text-color, #ffffff);--_divider: var(--ars-navigation-divider-color, var(--ars-color-divider, #757d87));--_scrim: var(--ars-navigation-scrim-color, rgba(0, 0, 0, .4));--_focus: var(--ars-navigation-focus-color, var(--ars-color-primary, #00a293));--_easing: var(--ars-navigation-easing, cubic-bezier(.2, 0, 0, 1));--_dur-short: var(--ars-navigation-duration-short, .15s);--_dur: var(--ars-navigation-duration, .25s);--_dur-long: var(--ars-navigation-duration-long, .4s);--_icon-hover-scale: var(--ars-navigation-icon-hover-scale, 1.12);--_icon-press-scale: var(--ars-navigation-icon-press-scale, .92);--_hover-opacity: .08;--_focus-opacity: .1;--_press-opacity: .1;--_rtl: 1;display:block;box-sizing:border-box;color:var(--_label);-webkit-tap-highlight-color:transparent}:host-context([dir=rtl]){--_rtl: -1}.ars-nav{box-sizing:border-box;display:flex;position:relative;background:var(--_container);color:var(--_label);overflow:hidden}.ars-nav__items{box-sizing:border-box;display:flex;min-height:0;min-width:0;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--_state) 25%,transparent) transparent}.ars-nav__header{box-sizing:border-box;display:flex;align-items:center;flex:none;gap:12px}.ars-nav__leading,.ars-nav__fab,.ars-nav__footer{box-sizing:border-box;flex:none}.ars-nav__leading:empty,.ars-nav__fab:empty,.ars-nav__footer:empty{display:none}.ars-nav__headline{margin:0;padding:0 16px;font-size:22px;line-height:28px;font-weight:400;color:var(--_headline);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ars-nav__section-headline{margin:0;padding:18px 16px 8px;font-size:14px;line-height:20px;font-weight:500;letter-spacing:.1px;color:var(--_headline);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ars-nav__divider{flex:none;margin:8px 16px;border:0;border-top:1px solid var(--_divider);opacity:.4}.ars-nav__menu{display:inline-flex;align-items:center;justify-content:center;flex:none;width:48px;height:48px;margin:0;padding:0;border:0;border-radius:50%;background:transparent;color:var(--_icon);cursor:pointer;transition:background-color var(--_dur-short) var(--_easing)}.ars-nav__menu:hover{background:color-mix(in srgb,var(--_state) 8%,transparent)}.ars-nav__menu:focus-visible{outline:3px solid var(--_focus);outline-offset:2px}.ars-nav__item{box-sizing:border-box;position:relative;isolation:isolate;display:flex;align-items:center;flex:none;margin:0;border:0;background:transparent;color:var(--_label);font:inherit;text-align:start;text-decoration:none;cursor:pointer;-webkit-user-select:none;user-select:none;appearance:none;-webkit-tap-highlight-color:transparent}.ars-nav__item:focus-visible{outline:3px solid var(--_focus);outline-offset:-3px;border-radius:16px}.ars-nav__item--disabled,.ars-nav__item:disabled{cursor:default;opacity:.38;pointer-events:none}.ars-nav__icon-box{box-sizing:border-box;position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;width:24px;height:24px;color:var(--_icon);transition:color var(--_dur) var(--_easing)}.ars-nav__icon{position:relative;z-index:1;width:24px;height:24px;font-size:24px;line-height:24px;font-variation-settings:\"FILL\" 0;transform:scale(1);transform-origin:center;transition:font-variation-settings var(--_dur, .25s) var(--_easing, cubic-bezier(.2, 0, 0, 1)),transform var(--_dur, .25s) var(--_easing, cubic-bezier(.2, 0, 0, 1))}.ars-nav__label{position:relative;z-index:1;min-width:0;font:var(--mat-sys-label-large, 500 14px/20px Roboto, sans-serif);letter-spacing:var(--mat-sys-label-large-tracking, .1px);color:var(--_label);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color var(--_dur) var(--_easing),opacity var(--_dur) var(--_easing),max-height var(--_dur) var(--_easing),margin var(--_dur) var(--_easing)}.ars-nav__label--hidden{opacity:0;max-height:0;margin:0!important;pointer-events:none}.ars-nav__trailing{position:relative;z-index:1;margin-inline-start:auto;padding-inline-start:12px;font-size:11px;line-height:16px;font-weight:500;letter-spacing:.5px;color:var(--_label);white-space:nowrap}.ars-nav__badge{position:absolute;z-index:2;top:-6px;inset-inline-start:12px;box-sizing:border-box;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--_badge);color:var(--_badge-text);font-size:11px;line-height:16px;font-weight:500;letter-spacing:.5px;text-align:center;white-space:nowrap}.ars-nav__badge--dot{top:-1px;inset-inline-start:16px;width:6px;min-width:6px;height:6px;padding:0;border-radius:3px}.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--selected .ars-nav__icon-box:before{opacity:1;transform:scaleX(1)}:host([data-indicator=compact]) .ars-nav__item:hover .ars-nav__icon-box:after{opacity:var(--_hover-opacity)}:host([data-indicator=compact]) .ars-nav__item:focus-visible .ars-nav__icon-box:after{opacity:var(--_focus-opacity)}:host([data-indicator=compact]) .ars-nav__item:active .ars-nav__icon-box:after{opacity:var(--_press-opacity)}:host([data-indicator=wide]) .ars-nav__item:before{content:\"\";position:absolute;z-index:0;background:var(--_indicator);opacity:0;transform:scaleX(.55);transition:opacity var(--_dur) var(--_easing),transform var(--_dur-long) var(--_easing);pointer-events:none;inset:0;border-radius:28px}:host([data-indicator=wide]) .ars-nav__item:after{content:\"\";position:absolute;z-index:0;background:var(--_state);opacity:0;transition:opacity var(--_dur-short) var(--_easing);pointer-events:none;inset:0;border-radius:28px}:host([data-indicator=wide]) .ars-nav__item--selected:before{opacity:1;transform:scaleX(1)}:host([data-indicator=wide]) .ars-nav__item:hover:after{opacity:var(--_hover-opacity)}:host([data-indicator=wide]) .ars-nav__item:focus-visible:after{opacity:var(--_focus-opacity)}:host([data-indicator=wide]) .ars-nav__item:active:after{opacity:var(--_press-opacity)}.ars-nav__item--selected .ars-nav__icon-box{color:var(--_icon-active)}.ars-nav__item--selected .ars-nav__icon{font-variation-settings:\"FILL\" 1}.ars-nav__item--selected .ars-nav__label{color:var(--_label-active)}:host([data-layout=vertical]) .ars-nav__item{flex-direction:column;justify-content:center}:host([data-layout=vertical]) .ars-nav__label{font:var(--mat-sys-label-medium, 500 12px/16px Roboto, sans-serif);letter-spacing:var(--mat-sys-label-medium-tracking, .5px);margin-top:6px;max-width:100%;text-align:center}:host([data-layout=horizontal]) .ars-nav__item{flex-direction:row;justify-content:flex-start}:host([data-layout=horizontal]) .ars-nav__label{margin-inline-start:4px}:host([data-variant=bar]){width:100%}:host([data-variant=bar]) .ars-nav{flex-direction:row;align-items:center;justify-content:space-around;width:100%;height:var(--ars-navigation-bar-height, 64px);padding:0 8px}:host([data-variant=bar]) .ars-nav__header,:host([data-variant=bar]) .ars-nav__leading,:host([data-variant=bar]) .ars-nav__fab,:host([data-variant=bar]) .ars-nav__footer,:host([data-variant=bar]) .ars-nav__section-headline,:host([data-variant=bar]) .ars-nav__divider,:host([data-variant=bar]) .ars-nav__trailing{display:none}:host([data-variant=bar]) .ars-nav__items{display:contents}:host([data-variant=bar]) .ars-nav__item{flex:1 1 0;min-width:0;height:100%}:host([data-variant=bar][data-layout=horizontal]) .ars-nav__item{justify-content:center;max-width:var(--ars-navigation-item-max-width, 168px);padding:0 12px}:host([data-variant=bar][data-indicator=wide]) .ars-nav__item:before,:host([data-variant=bar][data-indicator=wide]) .ars-nav__item:after{inset:12px 0}:host([data-variant=rail]){height:100%}:host([data-variant=rail]) .ars-nav{flex-direction:column;align-items:center;width:var(--ars-navigation-width, 96px);height:100%;padding:var(--ars-navigation-rail-top-padding, 20px) 0 8px}:host([data-variant=rail]) .ars-nav__header{flex-direction:column;margin-bottom:40px}:host([data-variant=rail]) .ars-nav__headline,:host([data-variant=rail]) .ars-nav__section-headline,:host([data-variant=rail]) .ars-nav__divider,:host([data-variant=rail]) .ars-nav__trailing{display:none}:host([data-variant=rail]) .ars-nav__fab{margin-bottom:40px}:host([data-variant=rail]) .ars-nav__items{flex:1 1 auto;flex-direction:column;align-items:center;gap:4px;width:100%;overflow-y:auto;overscroll-behavior:contain}:host([data-variant=rail]) .ars-nav__item{justify-content:center;width:100%;height:64px;padding:0 4px}:host([data-variant=rail-expanded]),:host([data-variant=drawer]),:host([data-variant=modal]){height:100%}:host([data-variant=rail-expanded]) .ars-nav,:host([data-variant=drawer]) .ars-nav,:host([data-variant=modal]) .ars-nav{flex-direction:column;align-items:stretch;height:100%;padding:12px 0}:host([data-variant=rail-expanded]) .ars-nav__header,:host([data-variant=drawer]) .ars-nav__header,:host([data-variant=modal]) .ars-nav__header{padding:4px 8px 8px}:host([data-variant=rail-expanded]) .ars-nav__items,:host([data-variant=drawer]) .ars-nav__items,:host([data-variant=modal]) .ars-nav__items{flex:1 1 auto;flex-direction:column;gap:4px;overflow-y:auto;overscroll-behavior:contain}:host([data-variant=rail-expanded]) .ars-nav__item,:host([data-variant=drawer]) .ars-nav__item,:host([data-variant=modal]) .ars-nav__item{height:56px;padding-block:0;padding-inline:24px;margin-block:0;margin-inline:calc(var(--ars-navigation-item-inset, 20px) + var(--_depth-indent, 0px)) var(--ars-navigation-item-inset, 20px)}:host([data-variant=rail-expanded]) .ars-nav__icon-box,:host([data-variant=drawer]) .ars-nav__icon-box,:host([data-variant=modal]) .ars-nav__icon-box{margin-inline-end:12px}:host([data-variant=rail-expanded]) .ars-nav__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\"]){height:var(--ars-navigation-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(--ars-navigation-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{flex:1 1 auto;margin-inline-start:0}:host([data-variant=rail-expanded]) .ars-nav{width:var(--ars-navigation-width, 220px)}:host([data-variant=drawer]) .ars-nav,:host([data-variant=modal]) .ars-nav{width:var(--ars-navigation-width, 360px)}:host([data-variant=modal]){position:fixed;inset:0;z-index:var(--ars-navigation-z-index, 1000);height:auto;pointer-events:none}:host([data-variant=modal]) .ars-nav{position:absolute;inset-block:0;inset-inline-start:0;pointer-events:auto;border-start-end-radius:16px;border-end-end-radius:16px;translate:calc(var(--_shift, 0%) * var(--_rtl)) 0;transition:translate var(--_dur-long) var(--_easing),visibility var(--_dur-long) var(--_easing)}:host([data-variant=modal][data-position=end]) .ars-nav{inset-inline-start:auto;inset-inline-end:0;border-radius:0;border-start-start-radius:16px;border-end-start-radius:16px}:host([data-variant=modal].ars-navigation--hidden) .ars-nav__scrim{opacity:0;pointer-events:none}:host([data-variant=modal].ars-navigation--hidden) .ars-nav{--_shift: -100%;visibility:hidden}:host([data-variant=modal][data-position=end].ars-navigation--hidden) .ars-nav{--_shift: 100%}.ars-nav__scrim{position:absolute;inset:0;background:var(--_scrim);opacity:1;pointer-events:auto;transition:opacity var(--_dur-long) var(--_easing)}:host(:not([data-variant=bar])) .ars-nav__items--bottom{flex:0 0 auto;margin-block-start:auto;overflow:visible}:host([data-align=center]) .ars-nav__items:not(.ars-nav__items--bottom){justify-content:safe center}:host([data-align=bottom]) .ars-nav__items:not(.ars-nav__items--bottom){justify-content:safe flex-end}:host(.ars-navigation--elevated) .ars-nav{box-shadow:0 1px 3px #0000004d,0 4px 8px 3px #00000026}:host(.ars-navigation--hidden):not([data-variant=modal]){display:none}.ars-nav__icon--image{object-fit:contain}.ars-nav__icon--sprite{display:inline-block;flex:none;width:var(--sp-size, 24px);height:var(--sp-size, 24px);background-image:var(--sp-url);background-repeat:no-repeat;background-size:var(--sp-sheet-x, auto) var(--sp-sheet-y, auto);background-position:calc(var(--sp-frame, var(--sp-normal, 0)) * var(--sp-step-x, 0px)) calc(var(--sp-frame, var(--sp-normal, 0)) * var(--sp-step-y, 0px))}.ars-nav__item:where(:hover,:focus-visible) .ars-nav__icon--sprite,.ars-nav-submenu__item:where(:hover,:focus-visible) .ars-nav__icon--sprite{--sp-frame: var(--sp-hover)}.ars-nav__item--selected .ars-nav__icon--sprite,.ars-nav-submenu__item--selected .ars-nav__icon--sprite{--sp-frame: var(--sp-active)}.ars-nav__item--disabled .ars-nav__icon--sprite,.ars-nav__item:where(:disabled) .ars-nav__icon--sprite,.ars-nav-submenu__item:where(:disabled,[aria-disabled=true]) .ars-nav__icon--sprite{--sp-frame: var(--sp-disabled)}.ars-nav__item:where(:hover,:focus-visible) .ars-nav__icon,.ars-nav-submenu__item:where(:hover,:focus-visible) .ars-nav__icon{transform:scale(var(--_icon-hover-scale, 1.12))}.ars-nav__item--selected .ars-nav__icon,.ars-nav-submenu__item--selected .ars-nav__icon{transform:scale(1)}.ars-nav__item:where(:active) .ars-nav__icon,.ars-nav-submenu__item:where(:active) .ars-nav__icon{transform:scale(var(--_icon-press-scale, .92));transition-duration:var(--_dur-short, .15s)}:host([data-variant=bar]) .ars-nav__item--icon-only{flex:0 0 auto;min-width:56px;max-width:72px}.ars-nav__chevron{position:relative;z-index:1;flex:none;margin-inline-start:8px;width:20px;height:20px;font-size:20px;line-height:20px;color:var(--_icon);rotate:0deg;transition:rotate var(--_dur) var(--_easing)}.ars-nav__chevron--open{rotate:180deg}.ars-nav__item[data-depth=\"1\"]{--_depth-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(--mat-sys-surface-container-high, #e7e9e8));color:var(--ars-navigation-label-color, var(--mat-sys-on-surface, #191c1b));box-shadow:0 1px 2px #0000004d,0 2px 6px 2px #00000026;overflow-y:auto;overscroll-behavior:contain}.ars-nav-submenu__item{box-sizing:border-box;display:flex;align-items:center;gap:12px;flex:none;min-height:48px;margin:0;padding:0 12px;border:0;border-radius:8px;background:transparent;color:inherit;font:inherit;text-align:start;text-decoration:none;cursor:pointer;appearance:none}.ars-nav-submenu__item:hover{background:color-mix(in srgb,currentColor 8%,transparent)}.ars-nav-submenu__item:focus-visible{outline:3px solid var(--ars-navigation-focus-color, var(--ars-color-primary, #00a293));outline-offset:-3px}.ars-nav-submenu__item--selected{background:var(--_indicator);color:var(--ars-navigation-active-icon-color, var(--mat-sys-on-secondary-container, #0b1f1c))}.ars-nav-submenu__item--selected:where(:hover,:focus-visible){background:color-mix(in srgb,var(--_state) 8%,var(--_indicator))}.ars-nav-submenu__item:disabled,.ars-nav-submenu__item[aria-disabled=true]{opacity:.38;pointer-events:none}.ars-nav-submenu__heading{padding:12px 12px 4px;font-size:11px;line-height:16px;font-weight:500;letter-spacing:.5px;text-transform:uppercase;opacity:.7}.ars-nav-submenu__heading:first-child{padding-top:4px}.ars-nav-submenu__label{flex:1 1 auto;min-width:0;font-size:14px;line-height:20px;font-weight:500;letter-spacing:.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ars-nav-submenu__trailing{flex:none;font-size:11px;line-height:16px;font-weight:500;letter-spacing:.5px;opacity:.8}@media(prefers-reduced-motion:reduce){:host{--_dur-short: 0ms;--_dur: 0ms;--_dur-long: 0ms;--_icon-hover-scale: 1;--_icon-press-scale: 1}:host([data-indicator=wide]) .ars-nav__item:before,:host([data-indicator=compact]) .ars-nav__icon-box:before{transform:none}.ars-nav-submenu{--_dur-short: 0ms;--_dur: 0ms;--_dur-long: 0ms;--_icon-hover-scale: 1;--_icon-press-scale: 1}}@media(forced-colors:active){:host([data-indicator=compact]) .ars-nav__item--selected .ars-nav__icon-box:before,:host([data-indicator=wide]) .ars-nav__item--selected:before{background:Highlight;forced-color-adjust:none}.ars-nav__item:focus-visible{outline:3px solid CanvasText}}\n"] }]
|
|
1048
1048
|
}], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], sections: [{ type: i0.Input, args: [{ isSignal: true, alias: "sections", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], autoVariants: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoVariants", required: false }] }], selectedId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedId", required: false }] }, { type: i0.Output, args: ["selectedIdChange"] }], expandedIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedIds", required: false }] }, { type: i0.Output, args: ["expandedIdsChange"] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], labelVisibility: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelVisibility", required: false }] }], itemLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemLayout", required: false }] }], childIcons: [{ type: i0.Input, args: [{ isSignal: true, alias: "childIcons", required: false }] }], alignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignment", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], headline: [{ type: i0.Input, args: [{ isSignal: true, alias: "headline", required: false }] }], showMenuButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMenuButton", required: false }] }], menuIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuIcon", required: false }] }], expandIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandIcon", required: false }] }], overflowMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "overflowMode", required: false }] }], overflowIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "overflowIcon", required: false }] }], overflowLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "overflowLabel", required: false }] }], maxVisibleItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisibleItems", required: false }] }], menuAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuAriaLabel", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], scrim: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrim", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], elevated: [{ type: i0.Input, args: [{ isSignal: true, alias: "elevated", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], tooltips: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltips", required: false }] }], routerSync: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerSync", required: false }] }], relativeTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "relativeTo", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }], itemSelected: [{ type: i0.Output, args: ["itemSelected"] }], menuClick: [{ type: i0.Output, args: ["menuClick"] }], itemElements: [{ type: i0.ViewChildren, args: ['navItem', { isSignal: true }] }], panelElements: [{ type: i0.ViewChildren, args: ['panelItem', { isSignal: true }] }] } });
|
|
1049
1049
|
|
|
1050
1050
|
/*
|