@arsedizioni/ars-utils 22.6.92 → 22.7.1
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-clipper.common.mjs +15 -15
- package/fesm2022/arsedizioni-ars-utils-clipper.ui-document.component-B9qqPb0A.mjs +1573 -0
- package/fesm2022/arsedizioni-ars-utils-clipper.ui-document.component-B9qqPb0A.mjs.map +1 -0
- package/fesm2022/{arsedizioni-ars-utils-clipper.ui-document.component-BjMnaZGf.mjs → arsedizioni-ars-utils-clipper.ui-document.component-BKjGXtXa.mjs} +5 -5
- package/fesm2022/{arsedizioni-ars-utils-clipper.ui-document.component-BjMnaZGf.mjs.map → arsedizioni-ars-utils-clipper.ui-document.component-BKjGXtXa.mjs.map} +1 -1
- package/fesm2022/arsedizioni-ars-utils-clipper.ui-references.component-CBuJnNIf.mjs +806 -0
- package/fesm2022/arsedizioni-ars-utils-clipper.ui-references.component-CBuJnNIf.mjs.map +1 -0
- package/fesm2022/{arsedizioni-ars-utils-clipper.ui-references.component-C21l0EtN.mjs → arsedizioni-ars-utils-clipper.ui-references.component-CEA_wJTS.mjs} +4 -4
- package/fesm2022/{arsedizioni-ars-utils-clipper.ui-references.component-C21l0EtN.mjs.map → arsedizioni-ars-utils-clipper.ui-references.component-CEA_wJTS.mjs.map} +1 -1
- package/fesm2022/arsedizioni-ars-utils-clipper.ui.mjs +38 -38
- package/fesm2022/arsedizioni-ars-utils-core.date.mjs +6 -6
- package/fesm2022/arsedizioni-ars-utils-core.markdown.mjs +3 -3
- package/fesm2022/arsedizioni-ars-utils-core.mjs +48 -48
- package/fesm2022/arsedizioni-ars-utils-core.validators.mjs +42 -42
- package/fesm2022/arsedizioni-ars-utils-evolution.common.mjs +15 -15
- package/fesm2022/arsedizioni-ars-utils-support.common.mjs +9 -9
- package/fesm2022/arsedizioni-ars-utils-ui.controls.date.mjs +6 -6
- package/fesm2022/arsedizioni-ars-utils-ui.controls.mjs +9 -9
- package/fesm2022/arsedizioni-ars-utils-ui.controls.tree.mjs +3 -3
- package/fesm2022/arsedizioni-ars-utils-ui.dialogs.auth.mjs +18 -18
- package/fesm2022/arsedizioni-ars-utils-ui.dialogs.mjs +12 -12
- package/fesm2022/arsedizioni-ars-utils-ui.dialogs.prompt.mjs +9 -9
- package/fesm2022/arsedizioni-ars-utils-ui.dialogs.select.mjs +15 -15
- package/fesm2022/arsedizioni-ars-utils-ui.files.mjs +12 -12
- package/fesm2022/arsedizioni-ars-utils-ui.filters.mjs +3 -3
- package/fesm2022/arsedizioni-ars-utils-ui.help.mjs +9 -9
- package/fesm2022/arsedizioni-ars-utils-ui.mjs +61 -61
- package/fesm2022/arsedizioni-ars-utils-ui.navigation.mjs +51 -7
- package/fesm2022/arsedizioni-ars-utils-ui.navigation.mjs.map +1 -1
- package/fesm2022/arsedizioni-ars-utils-ui.notifications.mjs +6 -6
- package/fesm2022/arsedizioni-ars-utils-ui.oauth.mjs +6 -6
- package/fesm2022/arsedizioni-ars-utils-ui.paginator.mjs +3 -3
- package/fesm2022/arsedizioni-ars-utils-ui.shell.mjs +9 -9
- package/fesm2022/arsedizioni-ars-utils-ui.tinymce.mjs +9 -9
- package/package.json +1 -1
- package/types/arsedizioni-ars-utils-clipper.common.d.ts.map +1 -0
- package/types/arsedizioni-ars-utils-clipper.ui.d.ts.map +1 -0
- package/types/arsedizioni-ars-utils-core.d.ts.map +1 -0
- package/types/arsedizioni-ars-utils-core.date.d.ts.map +1 -0
- package/types/arsedizioni-ars-utils-core.markdown.d.ts.map +1 -0
- package/types/arsedizioni-ars-utils-core.validators.d.ts.map +1 -0
- package/types/arsedizioni-ars-utils-evolution.common.d.ts.map +1 -0
- package/types/arsedizioni-ars-utils-support.common.d.ts.map +1 -0
- package/types/arsedizioni-ars-utils-ui.controls.d.ts.map +1 -0
- package/types/arsedizioni-ars-utils-ui.controls.date.d.ts.map +1 -0
- package/types/arsedizioni-ars-utils-ui.controls.tree.d.ts.map +1 -0
- package/types/arsedizioni-ars-utils-ui.d.ts.map +1 -0
- package/types/arsedizioni-ars-utils-ui.dialogs.auth.d.ts.map +1 -0
- package/types/arsedizioni-ars-utils-ui.dialogs.d.ts.map +1 -0
- package/types/arsedizioni-ars-utils-ui.dialogs.prompt.d.ts.map +1 -0
- package/types/arsedizioni-ars-utils-ui.dialogs.select.d.ts.map +1 -0
- package/types/arsedizioni-ars-utils-ui.files.d.ts.map +1 -0
- package/types/arsedizioni-ars-utils-ui.filters.d.ts.map +1 -0
- package/types/arsedizioni-ars-utils-ui.help.d.ts.map +1 -0
- package/types/arsedizioni-ars-utils-ui.navigation.d.ts +26 -1
- package/types/arsedizioni-ars-utils-ui.navigation.d.ts.map +1 -0
- package/types/arsedizioni-ars-utils-ui.notifications.d.ts.map +1 -0
- package/types/arsedizioni-ars-utils-ui.oauth.d.ts.map +1 -0
- package/types/arsedizioni-ars-utils-ui.paginator.d.ts.map +1 -0
- package/types/arsedizioni-ars-utils-ui.shell.d.ts.map +1 -0
- package/types/arsedizioni-ars-utils-ui.tinymce.d.ts.map +1 -0
- package/types/arsedizioni-ars-utils.d.ts.map +1 -0
|
@@ -90,6 +90,14 @@ var NavigationBarComponent = class NavigationBarComponent {
|
|
|
90
90
|
...ngDevMode ? { debugName: "bordered" } : /* istanbul ignore next */ {},
|
|
91
91
|
transform: booleanAttribute
|
|
92
92
|
});
|
|
93
|
+
this.bottomSeparator = input(false, {
|
|
94
|
+
...ngDevMode ? { debugName: "bottomSeparator" } : /* istanbul ignore next */ {},
|
|
95
|
+
transform: booleanAttribute
|
|
96
|
+
});
|
|
97
|
+
this.bottomTransparent = input(false, {
|
|
98
|
+
...ngDevMode ? { debugName: "bottomTransparent" } : /* istanbul ignore next */ {},
|
|
99
|
+
transform: booleanAttribute
|
|
100
|
+
});
|
|
93
101
|
this.tooltips = input(true, {
|
|
94
102
|
...ngDevMode ? { debugName: "tooltips" } : /* istanbul ignore next */ {},
|
|
95
103
|
transform: booleanAttribute
|
|
@@ -742,7 +750,7 @@ var NavigationBarComponent = class NavigationBarComponent {
|
|
|
742
750
|
static {
|
|
743
751
|
this.ɵfac = i0.ɵɵngDeclareFactory({
|
|
744
752
|
minVersion: "12.0.0",
|
|
745
|
-
version: "22.2.
|
|
753
|
+
version: "22.2.2",
|
|
746
754
|
ngImport: i0,
|
|
747
755
|
type: NavigationBarComponent,
|
|
748
756
|
deps: [],
|
|
@@ -752,7 +760,7 @@ var NavigationBarComponent = class NavigationBarComponent {
|
|
|
752
760
|
static {
|
|
753
761
|
this.ɵcmp = i0.ɵɵngDeclareComponent({
|
|
754
762
|
minVersion: "17.0.0",
|
|
755
|
-
version: "22.2.
|
|
763
|
+
version: "22.2.2",
|
|
756
764
|
type: NavigationBarComponent,
|
|
757
765
|
isStandalone: true,
|
|
758
766
|
selector: "navigation-bar",
|
|
@@ -946,6 +954,20 @@ var NavigationBarComponent = class NavigationBarComponent {
|
|
|
946
954
|
isRequired: false,
|
|
947
955
|
transformFunction: null
|
|
948
956
|
},
|
|
957
|
+
bottomSeparator: {
|
|
958
|
+
classPropertyName: "bottomSeparator",
|
|
959
|
+
publicName: "bottomSeparator",
|
|
960
|
+
isSignal: true,
|
|
961
|
+
isRequired: false,
|
|
962
|
+
transformFunction: null
|
|
963
|
+
},
|
|
964
|
+
bottomTransparent: {
|
|
965
|
+
classPropertyName: "bottomTransparent",
|
|
966
|
+
publicName: "bottomTransparent",
|
|
967
|
+
isSignal: true,
|
|
968
|
+
isRequired: false,
|
|
969
|
+
transformFunction: null
|
|
970
|
+
},
|
|
949
971
|
tooltips: {
|
|
950
972
|
classPropertyName: "tooltips",
|
|
951
973
|
publicName: "tooltips",
|
|
@@ -1018,9 +1040,12 @@ var NavigationBarComponent = class NavigationBarComponent {
|
|
|
1018
1040
|
"attr.data-position": "position()",
|
|
1019
1041
|
"attr.data-labels": "resolvedLabelVisibility()",
|
|
1020
1042
|
"attr.data-indicator": "indicatorMode()",
|
|
1043
|
+
"attr.data-theme": "isDark() ? \"dark\" : \"light\"",
|
|
1021
1044
|
"class.ars-navigation--open": "isOverlayOpen()",
|
|
1022
1045
|
"class.ars-navigation--elevated": "elevated()",
|
|
1023
1046
|
"class.ars-navigation--bordered": "bordered()",
|
|
1047
|
+
"class.ars-navigation--separator": "bottomSeparator()",
|
|
1048
|
+
"class.ars-navigation--transparent": "bottomTransparent()",
|
|
1024
1049
|
"class.ars-navigation--dense": "dense()",
|
|
1025
1050
|
"class.ars-navigation--hidden": "isHidden()",
|
|
1026
1051
|
"style.--ars-navigation-width": "widthStyle()",
|
|
@@ -1042,8 +1067,8 @@ var NavigationBarComponent = class NavigationBarComponent {
|
|
|
1042
1067
|
isSignal: true
|
|
1043
1068
|
}],
|
|
1044
1069
|
ngImport: i0,
|
|
1045
|
-
template: "@if (isModal() && scrim()) {\n <div class=\"ars-nav__scrim\" aria-hidden=\"true\" (click)=\"onScrimClick()\"></div>\n}\n\n<nav class=\"ars-nav\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.role]=\"isModal() ? 'dialog' : undefined\"\n [attr.aria-modal]=\"isModal() ? 'true' : undefined\"\n [attr.inert]=\"isHidden() ? '' : undefined\"\n [cdkTrapFocus]=\"isOverlayOpen()\"\n [cdkTrapFocusAutoCapture]=\"isOverlayOpen()\"\n (keydown)=\"onKeydown($event)\">\n\n @let labels = resolvedLabelVisibility();\n @let stacked = resolvedLayout() === 'vertical';\n @let wide = isExpanded();\n @let active = activeId();\n @let highlighted = highlightedIds();\n @let ancestors = ancestorIds();\n @let openIds = expandedSet();\n @let popupOpenId = popupItem()?.item.id;\n\n @if (showsHeader()) {\n <div class=\"ars-nav__header\">\n @if (showMenuButton()) {\n <button type=\"button\"\n class=\"ars-nav__menu\"\n [attr.aria-label]=\"menuAriaLabel()\"\n (click)=\"onMenuClick()\">\n <mat-icon aria-hidden=\"true\">{{ menuIcon() }}</mat-icon>\n </button>\n }\n @if (wide) {\n @if (headline(); as headlineText) {\n <h2 class=\"ars-nav__headline\">{{ headlineText }}</h2>\n }\n }\n </div>\n }\n\n <div class=\"ars-nav__leading\"><ng-content select=\"[navHeader]\" /></div>\n <div class=\"ars-nav__fab\"><ng-content select=\"[navFab]\" /></div>\n\n @for (group of visibleGroups(); track group.align) {\n <div class=\"ars-nav__items\" [class.ars-nav__items--bottom]=\"group.align === 'bottom'\">\n @for (block of group.sections; track block.section.id) {\n\n @if (wide && block.section.label) {\n <h3 class=\"ars-nav__section-headline\">{{ block.section.label }}</h3>\n }\n\n @for (r of block.items; track r.item.id) {\n @let current = r.item.id === active;\n <!-- Clicking a parent opens and closes its branch, or its floating panel, and\n never navigates. It can still BE the active destination, but only when it\n owns a route of its own (`r.href`): that is a page the user can reach, so\n the row is allowed to look selected. A parent without a route is never\n selected — where it used to stand in for a destination it hides it now\n carries `ancestor` instead: the trail, not the selection. -->\n @let ancestor = ancestors.has(r.item.id);\n <!-- Stacked layouts get the short form when the destination declares one, or\n no label at all on `'none'`; `tooltip` and `ariaLabel` stay on the full\n label either way, so the name is still one hover — or one screen reader —\n away. -->\n @let stackedLabelHidden = stacked && r.item.labelVertical === 'none';\n @let displayLabel = stacked ? (r.item.labelVertical ?? r.item.label) : r.item.label;\n @let selected = highlighted.has(r.item.id) && (!r.hasChildren || !!r.href);\n <!-- `stackedLabelHidden` counts as \"no label on screen\": that is what turns the\n tooltip back on, which is the only place the name is left to be read. -->\n @let labelVisible = !r.iconOnly && !stackedLabelHidden\n && (labels === 'labeled' || (labels === 'selected' && (selected || ancestor)));\n @let branchOpen = r.hasChildren && openIds.has(r.item.id);\n @let hideIcon = wide && r.depth > 0 && !childIcons();\n <!-- In the compact variants the children live in a floating panel, so an\n ancestor row IS how the active destination shows on screen: it takes the\n selected look whole, icon variant included, exactly like a destination\n without children. In the expanded ones the active row is visible on its\n own and the ancestor stays the quieter trail. -->\n @let activeLook = selected || (!wide && ancestor);\n @let svg = activeLook ? r.svgOn : r.svgOff;\n @let image = activeLook ? r.imageOn : r.imageOff;\n @let ligature = activeLook ? r.iconOn : r.iconOff;\n\n <!--\n The anchor and the button branches duplicate the inner markup on purpose:\n an `ng-template` + `ngTemplateOutlet` would allocate one extra embedded\n view per destination and lose the typed template context.\n -->\n @if (r.href && !r.hasChildren) {\n <a #navItem\n class=\"ars-nav__item\"\n [class.ars-nav__item--selected]=\"selected\"\n [class.ars-nav__item--icon-stacked]=\"stackedLabelHidden\"\n [class.ars-nav__item--greyed]=\"r.item.greyed\"\n [class.ars-nav__item--disabled]=\"r.item.disabled\"\n [class.ars-nav__item--no-icon]=\"hideIcon\"\n [attr.data-depth]=\"r.depth\"\n [attr.href]=\"r.item.disabled ? undefined : r.href\"\n [attr.target]=\"r.item.target\"\n [attr.rel]=\"r.item.target === '_blank' ? 'noopener noreferrer' : undefined\"\n [attr.aria-label]=\"r.ariaLabel\"\n [attr.aria-current]=\"current ? 'page' : undefined\"\n [attr.aria-disabled]=\"r.item.disabled ? 'true' : undefined\"\n [attr.tabindex]=\"r.item.disabled ? -1 : 0\"\n [attr.data-nav-id]=\"r.item.id\"\n [matTooltip]=\"r.tooltip\"\n [matTooltipDisabled]=\"!tooltips() || labelVisible\"\n [matTooltipPosition]=\"tooltipPosition()\"\n (click)=\"select(r, $event)\">\n @if (!hideIcon) {\n <span class=\"ars-nav__icon-box\">\n @if (svg; as svgName) {\n <mat-icon class=\"ars-nav__icon\" [svgIcon]=\"svgName\" aria-hidden=\"true\" />\n } @else if (r.spriteStyle; as spriteStyle) {\n <span class=\"ars-nav__icon ars-nav__icon--sprite\" [style]=\"spriteStyle\" aria-hidden=\"true\"></span>\n } @else if (image; as imageUrl) {\n <img class=\"ars-nav__icon ars-nav__icon--image\" [src]=\"imageUrl\" alt=\"\" loading=\"lazy\" decoding=\"async\" />\n } @else if (ligature; as ligatureName) {\n <mat-icon class=\"ars-nav__icon\" aria-hidden=\"true\">{{ ligatureName }}</mat-icon>\n }\n @if (r.hasBadge) {\n <span class=\"ars-nav__badge\"\n [class.ars-nav__badge--dot]=\"!r.badgeText\"\n [style.background-color]=\"r.item.badge?.color\"\n [attr.aria-label]=\"r.item.badge?.ariaLabel\">{{ r.badgeText }}</span>\n }\n </span>\n }\n @if (labels !== 'unlabeled' && !r.iconOnly && !stackedLabelHidden) {\n <span class=\"ars-nav__label\" [class.ars-nav__label--hidden]=\"!labelVisible\">{{ displayLabel }}</span>\n }\n @if (wide && r.item.trailing) {\n <span class=\"ars-nav__trailing\">{{ r.item.trailing }}</span>\n }\n <!-- The badge of an icon-less child has no icon box to sit on: it moves\n to the trailing edge, exactly as the submenu panel renders it. -->\n @if (hideIcon && r.hasBadge) {\n <span class=\"ars-nav__badge ars-nav__badge--inline\"\n [class.ars-nav__badge--dot]=\"!r.badgeText\"\n [style.background-color]=\"r.item.badge?.color\"\n [attr.aria-label]=\"r.item.badge?.ariaLabel\">{{ r.badgeText }}</span>\n }\n </a>\n } @else {\n <button #navItem\n type=\"button\"\n class=\"ars-nav__item\"\n [class.ars-nav__item--selected]=\"selected\"\n [class.ars-nav__item--ancestor]=\"ancestor\"\n [class.ars-nav__item--icon-stacked]=\"stackedLabelHidden\"\n [class.ars-nav__item--greyed]=\"r.item.greyed\"\n [class.ars-nav__item--disabled]=\"r.item.disabled\"\n [class.ars-nav__item--no-icon]=\"hideIcon\"\n [class.ars-nav__item--parent]=\"r.hasChildren\"\n [class.ars-nav__item--icon-only]=\"r.iconOnly\"\n [attr.data-depth]=\"r.depth\"\n [disabled]=\"!!r.item.disabled\"\n [attr.aria-label]=\"r.ariaLabel\"\n [attr.aria-current]=\"current ? 'page' : undefined\"\n [attr.aria-expanded]=\"r.hasChildren ? (wide ? branchOpen : popupOpenId === r.item.id) : undefined\"\n [attr.aria-haspopup]=\"r.hasChildren && !wide ? 'menu' : undefined\"\n [attr.data-nav-id]=\"r.item.id\"\n [matTooltip]=\"r.tooltip\"\n [matTooltipDisabled]=\"!tooltips() || labelVisible\"\n [matTooltipPosition]=\"tooltipPosition()\"\n (click)=\"select(r, $event)\">\n @if (!hideIcon) {\n <span class=\"ars-nav__icon-box\">\n @if (svg; as svgName) {\n <mat-icon class=\"ars-nav__icon\" [svgIcon]=\"svgName\" aria-hidden=\"true\" />\n } @else if (r.spriteStyle; as spriteStyle) {\n <span class=\"ars-nav__icon ars-nav__icon--sprite\" [style]=\"spriteStyle\" aria-hidden=\"true\"></span>\n } @else if (image; as imageUrl) {\n <img class=\"ars-nav__icon ars-nav__icon--image\" [src]=\"imageUrl\" alt=\"\" loading=\"lazy\" decoding=\"async\" />\n } @else if (ligature; as ligatureName) {\n <mat-icon class=\"ars-nav__icon\" aria-hidden=\"true\">{{ ligatureName }}</mat-icon>\n }\n @if (r.hasBadge) {\n <span class=\"ars-nav__badge\"\n [class.ars-nav__badge--dot]=\"!r.badgeText\"\n [style.background-color]=\"r.item.badge?.color\"\n [attr.aria-label]=\"r.item.badge?.ariaLabel\">{{ r.badgeText }}</span>\n }\n </span>\n }\n @if (labels !== 'unlabeled' && !r.iconOnly && !stackedLabelHidden) {\n <span class=\"ars-nav__label\" [class.ars-nav__label--hidden]=\"!labelVisible\">{{ displayLabel }}</span>\n }\n @if (wide && r.item.trailing) {\n <span class=\"ars-nav__trailing\">{{ r.item.trailing }}</span>\n }\n <!-- The badge of an icon-less child has no icon box to sit on: it moves\n to the trailing edge, exactly as the submenu panel renders it. -->\n @if (hideIcon && r.hasBadge) {\n <span class=\"ars-nav__badge ars-nav__badge--inline\"\n [class.ars-nav__badge--dot]=\"!r.badgeText\"\n [style.background-color]=\"r.item.badge?.color\"\n [attr.aria-label]=\"r.item.badge?.ariaLabel\">{{ r.badgeText }}</span>\n }\n @if (r.hasChildren && wide) {\n <mat-icon class=\"ars-nav__chevron\"\n [class.ars-nav__chevron--open]=\"branchOpen\"\n aria-hidden=\"true\">{{ expandIcon() }}</mat-icon>\n }\n </button>\n }\n }\n\n @if (wide && block.section.divider && !$last) {\n <hr class=\"ars-nav__divider\" aria-hidden=\"true\" />\n }\n }\n </div>\n }\n\n <div class=\"ars-nav__footer\"><ng-content select=\"[navFooter]\" /></div>\n</nav>\n\n<!--\n One overlay for the whole component: the overflow entry and every parent\n destination of the compact variants reuse it, instead of allocating a menu\n instance per destination.\n-->\n<ng-template cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"popupOrigin()\"\n [cdkConnectedOverlayOpen]=\"isPopupOpen()\"\n [cdkConnectedOverlayPositions]=\"popupPositions()\"\n [cdkConnectedOverlayPush]=\"true\"\n (overlayOutsideClick)=\"closePopup()\"\n (detach)=\"closePopup()\">\n <div class=\"ars-nav-submenu\"\n role=\"menu\"\n [attr.aria-label]=\"popupItem()?.ariaLabel\"\n [cdkTrapFocus]=\"true\"\n [cdkTrapFocusAutoCapture]=\"true\"\n (keydown)=\"onKeydown($event)\">\n @for (entry of popupEntries(); track entry.key) {\n @if (entry.render; as c) {\n @let childSelected = c.item.id === activeId();\n @let childSvg = childSelected ? c.svgOn : c.svgOff;\n @let childImage = childSelected ? c.imageOn : c.imageOff;\n @let childLigature = childSelected ? c.iconOn : c.iconOff;\n @if (c.href) {\n <a #panelItem\n class=\"ars-nav-submenu__item\"\n role=\"menuitem\"\n [class.ars-nav-submenu__item--grouped]=\"entry.grouped\"\n [class.ars-nav-submenu__item--selected]=\"childSelected\"\n [class.ars-nav-submenu__item--greyed]=\"c.item.greyed\"\n [attr.href]=\"c.item.disabled ? undefined : c.href\"\n [attr.target]=\"c.item.target\"\n [attr.rel]=\"c.item.target === '_blank' ? 'noopener noreferrer' : undefined\"\n [attr.aria-disabled]=\"c.item.disabled ? 'true' : undefined\"\n [attr.aria-current]=\"childSelected ? 'page' : undefined\"\n (click)=\"select(c, $event)\">\n @if (childSvg; as svgName) {\n <mat-icon class=\"ars-nav__icon\" [svgIcon]=\"svgName\" aria-hidden=\"true\" />\n } @else if (c.spriteStyle; as spriteStyle) {\n <span class=\"ars-nav__icon ars-nav__icon--sprite\" [style]=\"spriteStyle\" aria-hidden=\"true\"></span>\n } @else if (childImage; as imageUrl) {\n <img class=\"ars-nav__icon ars-nav__icon--image\" [src]=\"imageUrl\" alt=\"\" loading=\"lazy\" decoding=\"async\" />\n } @else if (childLigature; as ligatureName) {\n <mat-icon class=\"ars-nav__icon\" aria-hidden=\"true\">{{ ligatureName }}</mat-icon>\n }\n <span class=\"ars-nav-submenu__label\">{{ c.item.label }}</span>\n @if (c.badgeText) {\n <span class=\"ars-nav-submenu__trailing\">{{ c.badgeText }}</span>\n } @else if (c.item.trailing) {\n <span class=\"ars-nav-submenu__trailing\">{{ c.item.trailing }}</span>\n }\n </a>\n } @else {\n <button #panelItem\n type=\"button\"\n class=\"ars-nav-submenu__item\"\n role=\"menuitem\"\n [class.ars-nav-submenu__item--grouped]=\"entry.grouped\"\n [class.ars-nav-submenu__item--selected]=\"childSelected\"\n [class.ars-nav-submenu__item--greyed]=\"c.item.greyed\"\n [disabled]=\"!!c.item.disabled\"\n [attr.aria-current]=\"childSelected ? 'page' : undefined\"\n (click)=\"select(c, $event)\">\n @if (childSvg; as svgName) {\n <mat-icon class=\"ars-nav__icon\" [svgIcon]=\"svgName\" aria-hidden=\"true\" />\n } @else if (c.spriteStyle; as spriteStyle) {\n <span class=\"ars-nav__icon ars-nav__icon--sprite\" [style]=\"spriteStyle\" aria-hidden=\"true\"></span>\n } @else if (childImage; as imageUrl) {\n <img class=\"ars-nav__icon ars-nav__icon--image\" [src]=\"imageUrl\" alt=\"\" loading=\"lazy\" decoding=\"async\" />\n } @else if (childLigature; as ligatureName) {\n <mat-icon class=\"ars-nav__icon\" aria-hidden=\"true\">{{ ligatureName }}</mat-icon>\n }\n <span class=\"ars-nav-submenu__label\">{{ c.item.label }}</span>\n @if (c.badgeText) {\n <span class=\"ars-nav-submenu__trailing\">{{ c.badgeText }}</span>\n } @else if (c.item.trailing) {\n <span class=\"ars-nav-submenu__trailing\">{{ c.item.trailing }}</span>\n }\n </button>\n }\n } @else {\n <div class=\"ars-nav-submenu__heading\" role=\"presentation\">{{ entry.label }}</div>\n }\n }\n </div>\n</ng-template>\n",
|
|
1046
|
-
styles: [":host{--_container: var(--ars-navigation-container-color, var(--mat-sys-surface-container, #eff1ef));--_indicator: var(--ars-navigation-indicator-color, var(--mat-sys-secondary-container, #cce8e2));--_icon: var(--ars-navigation-icon-color, var(--mat-sys-on-surface-variant, #3f4947));--_icon-active: var(--ars-navigation-active-icon-color, var(--mat-sys-on-secondary-container, #0b1f1c));--_label: var(--ars-navigation-label-color, var(--mat-sys-on-surface-variant, #3f4947));--_label-active: var(--ars-navigation-active-label-color, var(--ars-color-secondary, #4a635f));--_headline: var(--ars-navigation-headline-color, var(--mat-sys-on-surface-variant, #3f4947));--_state: var(--ars-navigation-state-layer-color, var(--mat-sys-on-surface, #191c1b));--_badge: var(--ars-navigation-badge-color, var(--ars-color-error, #ff5449));--_badge-text: var(--ars-navigation-badge-text-color, #ffffff);--_divider: var(--ars-navigation-divider-color, var(--ars-color-divider, #757d87));--_scrim: var(--ars-navigation-scrim-color, rgba(0, 0, 0, .4));--_focus: var(--ars-navigation-focus-color, var(--ars-color-primary, #00a293));--_easing: var(--ars-navigation-easing, cubic-bezier(.2, 0, 0, 1));--_dur-short: var(--ars-navigation-duration-short, .15s);--_dur: var(--ars-navigation-duration, .25s);--_dur-long: var(--ars-navigation-duration-long, .4s);--_icon-hover-scale: var(--ars-navigation-icon-hover-scale, 1.12);--_icon-press-scale: var(--ars-navigation-icon-press-scale, .92);--_hover-opacity: .08;--_focus-opacity: .1;--_press-opacity: .1;--_row-height: var(--ars-navigation-item-height, 56px);--_row-gap: var(--ars-navigation-item-gap, 4px);--_row-font-size: var(--ars-navigation-label-font-size, 14px);--_child-height: var(--ars-navigation-child-height, 48px);--_child-font-size: var(--ars-navigation-child-font-size, 13px);--_section-padding: 18px 16px 8px;--_row-pad-start: var(--ars-navigation-item-padding-start, 24px);--_row-pad-end: var(--ars-navigation-item-padding-end, 24px);--_label-lines: var(--ars-navigation-label-lines, 2);--_rtl: 1;display:block;box-sizing:border-box;color:var(--_label);-webkit-tap-highlight-color:transparent}:host-context([dir=rtl]){--_rtl: -1}:host(.ars-navigation--dense){--_row-height: var(--ars-navigation-dense-item-height, 44px);--_child-height: var(--ars-navigation-dense-child-height, 36px);--_section-padding: 12px 16px 4px}:host(.ars-navigation--dense){--_row-pad-start: var(--ars-navigation-dense-item-padding-start, 12px);--_row-pad-end: var(--ars-navigation-dense-item-padding-end, 12px)}.ars-nav{box-sizing:border-box;display:flex;position:relative;background:var(--_container);color:var(--_label);overflow:hidden}.ars-nav__items{box-sizing:border-box;display:flex;min-height:0;min-width:0;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--_state) 25%,transparent) transparent}.ars-nav__header{box-sizing:border-box;display:flex;align-items:center;flex:none;gap:12px}.ars-nav__leading,.ars-nav__fab,.ars-nav__footer{box-sizing:border-box;flex:none}.ars-nav__leading:empty,.ars-nav__fab:empty,.ars-nav__footer:empty{display:none}.ars-nav__headline{margin:0;padding:0 16px;font-size:22px;line-height:28px;font-weight:400;color:var(--_headline);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ars-nav__section-headline{margin:0;padding:var(--_section-padding, 18px 16px 8px);font-size:14px;line-height:20px;font-weight:500;letter-spacing:.1px;color:var(--_headline);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ars-nav__divider{flex:none;margin:8px 16px;border:0;border-top:1px solid var(--_divider);opacity:.4}.ars-nav__menu{display:inline-flex;align-items:center;justify-content:center;flex:none;width:48px;height:48px;margin:0;padding:0;border:0;border-radius:50%;background:transparent;color:var(--_icon);cursor:pointer;transition:background-color var(--_dur-short) var(--_easing)}.ars-nav__menu:hover{background:color-mix(in srgb,var(--_state) 8%,transparent)}.ars-nav__menu:focus-visible{outline:3px solid var(--_focus);outline-offset:2px}.ars-nav__item{box-sizing:border-box;position:relative;isolation:isolate;display:flex;align-items:center;flex:none;margin:0;border:0;background:transparent;color:var(--_label);font:inherit;text-align:start;text-decoration:none;cursor:pointer;-webkit-user-select:none;user-select:none;appearance:none;-webkit-tap-highlight-color:transparent}.ars-nav__item:focus-visible{outline:3px solid var(--_focus);outline-offset:-3px;border-radius:16px}.ars-nav__item--disabled,.ars-nav__item:disabled{cursor:default;opacity:.38;pointer-events:none}.ars-nav__icon-box{box-sizing:border-box;position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;width:24px;height:24px;color:var(--_icon);transition:color var(--_dur) var(--_easing)}.ars-nav__icon{position:relative;z-index:1;width:24px;height:24px;font-size:24px;line-height:24px;font-variation-settings:\"FILL\" 0;transform:scale(1);transform-origin:center;transition:font-variation-settings var(--_dur, .25s) var(--_easing, cubic-bezier(.2, 0, 0, 1)),transform var(--_dur, .25s) var(--_easing, cubic-bezier(.2, 0, 0, 1))}.ars-nav__label{position:relative;z-index:1;min-width:0;font:var(--mat-sys-label-large, 500 14px/20px Roboto, sans-serif);letter-spacing:var(--mat-sys-label-large-tracking, .1px);color:var(--_label);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color var(--_dur) var(--_easing),opacity var(--_dur) var(--_easing),max-height var(--_dur) var(--_easing),margin var(--_dur) var(--_easing)}.ars-nav__label--hidden{opacity:0;max-height:0;margin:0!important;pointer-events:none}.ars-nav__trailing{position:relative;z-index:1;margin-inline-start:auto;padding-inline-start:12px;font-size:11px;line-height:16px;font-weight:500;letter-spacing:.5px;color:var(--_label);white-space:nowrap}.ars-nav__badge{position:absolute;z-index:2;top:-6px;inset-inline-start:12px;box-sizing:border-box;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--_badge);color:var(--_badge-text);font-size:11px;line-height:16px;font-weight:500;letter-spacing:.5px;text-align:center;white-space:nowrap}.ars-nav__badge--dot{top:-1px;inset-inline-start:16px;width:6px;min-width:6px;height:6px;padding:0;border-radius:3px}.ars-nav__badge--inline{position:static;z-index:1;flex:none;margin-inline-start:8px}.ars-nav__badge--inline.ars-nav__badge--dot{margin-inline-start:12px}:host([data-indicator=compact]) .ars-nav__icon-box:before{content:\"\";position:absolute;z-index:0;background:var(--_indicator);opacity:0;transform:scaleX(.55);transition:opacity var(--_dur) var(--_easing),transform var(--_dur-long) var(--_easing);pointer-events:none;inset:50% auto auto 50%;width:56px;height:32px;margin:-16px 0 0 -28px;border-radius:16px}:host([data-indicator=compact]) .ars-nav__icon-box:after{content:\"\";position:absolute;z-index:0;background:var(--_state);opacity:0;transition:opacity var(--_dur-short) var(--_easing);pointer-events:none;inset:50% auto auto 50%;width:56px;height:32px;margin:-16px 0 0 -28px;border-radius:16px}:host([data-indicator=compact]) .ars-nav__item--icon-stacked .ars-nav__icon-box:before,:host([data-indicator=compact]) .ars-nav__item--icon-stacked .ars-nav__icon-box:after{width:var(--ars-navigation-icon-button-size, 48px);height:var(--ars-navigation-icon-button-size, 48px);margin:calc(var(--ars-navigation-icon-button-size, 48px) / -2) 0 0 calc(var(--ars-navigation-icon-button-size, 48px) / -2);border-radius:50%}:host([data-indicator=compact]) .ars-nav__item--selected .ars-nav__icon-box:before{opacity:1;transform:scaleX(1)}:host([data-indicator=compact]) .ars-nav__item:hover .ars-nav__icon-box:after{opacity:var(--_hover-opacity)}:host([data-indicator=compact]) .ars-nav__item:focus-visible .ars-nav__icon-box:after{opacity:var(--_focus-opacity)}:host([data-indicator=compact]) .ars-nav__item:active .ars-nav__icon-box:after{opacity:var(--_press-opacity)}:host([data-indicator=wide]) .ars-nav__item:before{content:\"\";position:absolute;z-index:0;background:var(--_indicator);opacity:0;transform:scaleX(.55);transition:opacity var(--_dur) var(--_easing),transform var(--_dur-long) var(--_easing);pointer-events:none;inset:0;border-radius:28px}:host([data-indicator=wide]) .ars-nav__item:after{content:\"\";position:absolute;z-index:0;background:var(--_state);opacity:0;transition:opacity var(--_dur-short) var(--_easing);pointer-events:none;inset:0;border-radius:28px}:host([data-indicator=wide]) .ars-nav__item--selected:before{opacity:1;transform:scaleX(1)}:host([data-indicator=wide]) .ars-nav__item:hover:after{opacity:var(--_hover-opacity)}:host([data-indicator=wide]) .ars-nav__item:focus-visible:after{opacity:var(--_focus-opacity)}:host([data-indicator=wide]) .ars-nav__item:active:after{opacity:var(--_press-opacity)}.ars-nav__item--ancestor:not(.ars-nav__item--selected) .ars-nav__label{color:var(--_label-active)}.ars-nav__item--ancestor:not(.ars-nav__item--selected) .ars-nav__icon-box,.ars-nav__item--ancestor:not(.ars-nav__item--selected) .ars-nav__chevron{color:var(--_label-active)}:host([data-variant=bar][data-indicator=compact]) .ars-nav__item--ancestor .ars-nav__icon-box:before,:host([data-variant=rail][data-indicator=compact]) .ars-nav__item--ancestor .ars-nav__icon-box:before{opacity:1;transform:scaleX(1)}:host([data-variant=bar]) .ars-nav__item--ancestor .ars-nav__icon-box,:host([data-variant=rail]) .ars-nav__item--ancestor .ars-nav__icon-box{color:var(--_icon-active)}:host([data-variant=bar]) .ars-nav__item--ancestor .ars-nav__icon,:host([data-variant=rail]) .ars-nav__item--ancestor .ars-nav__icon{font-variation-settings:\"FILL\" 1}.ars-nav__item--selected .ars-nav__icon-box{color:var(--_icon-active)}.ars-nav__item--selected .ars-nav__icon{font-variation-settings:\"FILL\" 1}.ars-nav__item--selected .ars-nav__label{color:var(--_label-active)}.ars-nav__item--greyed:not(.ars-nav__item--selected) .ars-nav__label,.ars-nav__item--greyed:not(.ars-nav__item--selected) .ars-nav__icon-box,.ars-nav__item--greyed:not(.ars-nav__item--selected) .ars-nav__trailing,.ars-nav-submenu__item--greyed:not(.ars-nav-submenu__item--selected){opacity:var(--ars-navigation-greyed-opacity, .5);transition:opacity var(--_dur-short, .15s) var(--_easing, cubic-bezier(.2, 0, 0, 1))}.ars-nav__item--greyed:where(:hover,:focus-visible) .ars-nav__label,.ars-nav__item--greyed:where(:hover,:focus-visible) .ars-nav__icon-box,.ars-nav__item--greyed:where(:hover,:focus-visible) .ars-nav__trailing,.ars-nav-submenu__item--greyed:where(:hover,:focus-visible){opacity:1}:host([data-layout=vertical]) .ars-nav__item{flex-direction:column;justify-content:center}:host([data-layout=vertical]) .ars-nav__label{font:var(--mat-sys-label-medium, 500 12px/16px Roboto, sans-serif);letter-spacing:var(--mat-sys-label-medium-tracking, .5px);margin-top:var(--ars-navigation-vertical-gap, 0);padding-block:var(--ars-navigation-vertical-label-padding, 8px);max-width:100%;text-align:center;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--_label-lines, 2);line-clamp:var(--_label-lines, 2);white-space:normal;overflow-wrap:anywhere;line-height:var(--ars-navigation-vertical-label-line-height, 14px)}:host([data-layout=horizontal]) .ars-nav__item{flex-direction:row;justify-content:flex-start}:host([data-layout=horizontal]) .ars-nav__label{margin-inline-start:4px}:host .ars-nav__item--selected .ars-nav__label,:host .ars-nav__item--ancestor .ars-nav__label{font-weight:var(--ars-navigation-selected-font-weight, 700)}:host([data-variant=bar]) .ars-nav__item--selected .ars-nav__label,:host([data-variant=bar]) .ars-nav__item--ancestor .ars-nav__label,:host([data-variant=rail]) .ars-nav__item--selected .ars-nav__label,:host([data-variant=rail]) .ars-nav__item--ancestor .ars-nav__label{font-weight:var(--ars-navigation-compact-selected-font-weight, 500)}:host([data-variant=bar]){width:100%}:host([data-variant=bar]) .ars-nav{flex-direction:row;align-items:center;justify-content:space-around;width:100%;height:var(--ars-navigation-bar-height, 80px);padding:0 8px}:host([data-variant=bar]) .ars-nav__header,:host([data-variant=bar]) .ars-nav__leading,:host([data-variant=bar]) .ars-nav__fab,:host([data-variant=bar]) .ars-nav__footer,:host([data-variant=bar]) .ars-nav__section-headline,:host([data-variant=bar]) .ars-nav__divider,:host([data-variant=bar]) .ars-nav__trailing{display:none}:host([data-variant=bar]) .ars-nav__items{display:contents}:host([data-variant=bar]) .ars-nav__item{flex:1 1 0;min-width:0;height:100%}:host([data-variant=bar][data-layout=horizontal]) .ars-nav__item{justify-content:center;max-width:var(--ars-navigation-item-max-width, 168px);padding:0 12px}:host([data-variant=bar][data-layout=vertical]) .ars-nav__item{justify-content:flex-start;padding-block-start:var(--ars-navigation-bar-item-padding-top, 12px)}:host([data-variant=bar][data-indicator=wide]) .ars-nav__item:before,:host([data-variant=bar][data-indicator=wide]) .ars-nav__item:after{inset:12px 0}:host([data-variant=rail]){height:100%}:host([data-variant=rail]) .ars-nav{flex-direction:column;align-items:center;width:var(--ars-navigation-rail-width, var(--ars-navigation-width, 96px));height:100%;padding:var(--ars-navigation-rail-top-padding, 20px) 0 8px}:host([data-variant=rail]) .ars-nav__header{flex-direction:column;margin-bottom:40px}:host([data-variant=rail]) .ars-nav__headline,:host([data-variant=rail]) .ars-nav__section-headline,:host([data-variant=rail]) .ars-nav__divider,:host([data-variant=rail]) .ars-nav__trailing{display:none}:host([data-variant=rail]) .ars-nav__fab{margin-bottom:40px}:host([data-variant=rail]) .ars-nav__items{flex:1 1 auto;flex-direction:column;align-items:center;gap:var(--ars-navigation-rail-item-gap, 8px);width:100%;overflow-y:auto;overscroll-behavior:contain}:host([data-variant=rail]) .ars-nav__item{justify-content:center;width:100%;min-height:var(--ars-navigation-rail-item-height, 64px);padding:0 4px}:host([data-variant=rail-expanded]),:host([data-variant=drawer]),:host([data-variant=modal]){height:100%}:host([data-variant=rail-expanded]) .ars-nav,:host([data-variant=drawer]) .ars-nav,:host([data-variant=modal]) .ars-nav{flex-direction:column;align-items:stretch;height:100%;padding:12px 0}:host([data-variant=rail-expanded]) .ars-nav__header,:host([data-variant=drawer]) .ars-nav__header,:host([data-variant=modal]) .ars-nav__header{padding:4px 8px 8px}:host([data-variant=rail-expanded]) .ars-nav__items,:host([data-variant=drawer]) .ars-nav__items,:host([data-variant=modal]) .ars-nav__items{flex:1 1 auto;flex-direction:column;gap:var(--_row-gap, 4px);overflow-y:auto;overscroll-behavior:contain}:host([data-variant=rail-expanded]) .ars-nav__item,:host([data-variant=drawer]) .ars-nav__item,:host([data-variant=modal]) .ars-nav__item{min-height:var(--_row-height, 56px);padding-block:0;padding-inline:calc(var(--_row-pad-start, 24px) + var(--_depth-indent, 0px)) var(--_row-pad-end, 24px);margin-block:0;margin-inline:var(--ars-navigation-item-inset, 20px)}:host(.ars-navigation--dense) .ars-nav__item{padding-inline:calc(var(--_row-pad-start, 12px) + var(--_depth-indent, 0px)) var(--_row-pad-end, 12px)}:host([data-variant=rail-expanded]) .ars-nav__item[data-depth]:not([data-depth=\"0\"])+.ars-nav__item[data-depth=\"0\"],:host([data-variant=drawer]) .ars-nav__item[data-depth]:not([data-depth=\"0\"])+.ars-nav__item[data-depth=\"0\"],:host([data-variant=modal]) .ars-nav__item[data-depth]:not([data-depth=\"0\"])+.ars-nav__item[data-depth=\"0\"]{margin-block-start:var(--ars-navigation-branch-end-gap, 12px)}:host([data-variant=rail-expanded]) .ars-nav__item[data-depth]:not([data-depth=\"0\"]):last-child,:host([data-variant=drawer]) .ars-nav__item[data-depth]:not([data-depth=\"0\"]):last-child,:host([data-variant=modal]) .ars-nav__item[data-depth]:not([data-depth=\"0\"]):last-child{margin-block-end:var(--ars-navigation-branch-end-gap, 12px)}:host([data-variant=rail-expanded]) .ars-nav__icon-box,:host([data-variant=drawer]) .ars-nav__icon-box,:host([data-variant=modal]) .ars-nav__icon-box{margin-inline-end:12px}:host([data-variant=rail-expanded]) .ars-nav__item[data-depth]:not([data-depth=\"0\"]),:host([data-variant=drawer]) .ars-nav__item[data-depth]:not([data-depth=\"0\"]),:host([data-variant=modal]) .ars-nav__item[data-depth]:not([data-depth=\"0\"]){min-height:var(--_child-height, 48px)}:host([data-variant=rail-expanded]) .ars-nav__item[data-depth]:not([data-depth=\"0\"]) .ars-nav__label,:host([data-variant=drawer]) .ars-nav__item[data-depth]:not([data-depth=\"0\"]) .ars-nav__label,:host([data-variant=modal]) .ars-nav__item[data-depth]:not([data-depth=\"0\"]) .ars-nav__label{font-size:var(--_child-font-size, 13px)}:host([data-variant=rail-expanded]) .ars-nav__label,:host([data-variant=drawer]) .ars-nav__label,:host([data-variant=modal]) .ars-nav__label{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--_label-lines, 2);line-clamp:var(--_label-lines, 2);white-space:normal;overflow-wrap:anywhere;line-height:var(--ars-navigation-label-line-height, 18px);flex:1 1 auto;margin-inline-start:0;font-size:var(--_row-font-size, 14px)}:host([data-variant=rail-expanded]) .ars-nav{width:var(--ars-navigation-width, 220px);min-width:var(--ars-navigation-min-width, 0);max-width:var(--ars-navigation-max-width, 100%)}:host([data-variant=drawer]) .ars-nav,:host([data-variant=modal]) .ars-nav{width:var(--ars-navigation-width, 360px);min-width:var(--ars-navigation-min-width, 0);max-width:var(--ars-navigation-max-width, 100%)}:host([data-variant=modal]){position:fixed;inset:0;z-index:var(--ars-navigation-z-index, 1000);height:auto;pointer-events:none}:host([data-variant=modal]) .ars-nav{position:absolute;inset-block:0;inset-inline-start:0;pointer-events:auto;border-start-end-radius:16px;border-end-end-radius:16px;translate:calc(var(--_shift, 0%) * var(--_rtl)) 0;transition:translate var(--_dur-long) var(--_easing),visibility var(--_dur-long) var(--_easing)}:host([data-variant=modal][data-position=end]) .ars-nav{inset-inline-start:auto;inset-inline-end:0;border-radius:0;border-start-start-radius:16px;border-end-start-radius:16px}:host([data-variant=modal].ars-navigation--hidden) .ars-nav__scrim{opacity:0;pointer-events:none}:host([data-variant=modal].ars-navigation--hidden) .ars-nav{--_shift: -100%;visibility:hidden}:host([data-variant=modal][data-position=end].ars-navigation--hidden) .ars-nav{--_shift: 100%}.ars-nav__scrim{position:absolute;inset:0;background:var(--_scrim);opacity:1;pointer-events:auto;transition:opacity var(--_dur-long) var(--_easing)}:host(:not([data-variant=bar])) .ars-nav__items--bottom{flex:0 0 auto;margin-block-start:auto;overflow:visible}:host([data-align=center]) .ars-nav__items:not(.ars-nav__items--bottom){justify-content:safe center}:host([data-align=bottom]) .ars-nav__items:not(.ars-nav__items--bottom){justify-content:safe flex-end}:host(.ars-navigation--elevated) .ars-nav{box-shadow:0 1px 3px #0000004d,0 4px 8px 3px #00000026}:host(.ars-navigation--hidden):not([data-variant=modal]){display:none}.ars-nav__icon--image{object-fit:contain}.ars-nav__icon--sprite{display:inline-block;flex:none;width:var(--sp-size, 24px);height:var(--sp-size, 24px);background-image:var(--sp-url);background-repeat:no-repeat;background-size:var(--sp-sheet-x, auto) var(--sp-sheet-y, auto);background-position:calc(var(--sp-frame, var(--sp-normal, 0)) * var(--sp-step-x, 0px)) calc(var(--sp-frame, var(--sp-normal, 0)) * var(--sp-step-y, 0px))}.ars-nav__item:where(:hover,:focus-visible) .ars-nav__icon--sprite,.ars-nav-submenu__item:where(:hover,:focus-visible) .ars-nav__icon--sprite{--sp-frame: var(--sp-hover)}.ars-nav__item--selected .ars-nav__icon--sprite,.ars-nav-submenu__item--selected .ars-nav__icon--sprite,:host([data-variant=bar]) .ars-nav__item--ancestor .ars-nav__icon--sprite,:host([data-variant=rail]) .ars-nav__item--ancestor .ars-nav__icon--sprite{--sp-frame: var(--sp-active)}.ars-nav__item--disabled .ars-nav__icon--sprite,.ars-nav__item:where(:disabled) .ars-nav__icon--sprite,.ars-nav-submenu__item:where(:disabled,[aria-disabled=true]) .ars-nav__icon--sprite{--sp-frame: var(--sp-disabled)}.ars-nav__item:where(:hover,:focus-visible) .ars-nav__icon,.ars-nav-submenu__item:where(:hover,:focus-visible) .ars-nav__icon{transform:scale(var(--_icon-hover-scale, 1.12))}.ars-nav__item--selected .ars-nav__icon,.ars-nav-submenu__item--selected .ars-nav__icon{transform:scale(1)}.ars-nav__item:where(:active) .ars-nav__icon,.ars-nav-submenu__item:where(:active) .ars-nav__icon{transform:scale(var(--_icon-press-scale, .92));transition-duration:var(--_dur-short, .15s)}:host([data-variant=bar]) .ars-nav__item--icon-only{flex:0 0 auto;min-width:56px;max-width:72px}.ars-nav__chevron{position:relative;z-index:1;flex:none;margin-inline-start:8px;width:20px;height:20px;font-size:20px;line-height:20px;color:var(--_icon);rotate:0deg;opacity:0;transition:rotate var(--_dur) var(--_easing),opacity var(--_dur-short) var(--_easing)}.ars-nav__item:where(:hover,:focus-visible) .ars-nav__chevron{opacity:1}@media(hover:none){.ars-nav__chevron{opacity:1}}.ars-nav__chevron--open{rotate:180deg}.ars-nav__item[data-depth=\"1\"]{--_depth-indent: 24px}.ars-nav__item[data-depth=\"2\"]{--_depth-indent: 48px}.ars-nav__item[data-depth=\"3\"]{--_depth-indent: 72px}.ars-nav-submenu{--_easing: var(--ars-navigation-easing, cubic-bezier(.2, 0, 0, 1));--_dur-short: var(--ars-navigation-duration-short, .15s);--_dur: var(--ars-navigation-duration, .25s);--_dur-long: var(--ars-navigation-duration-long, .4s);--_icon-hover-scale: var(--ars-navigation-icon-hover-scale, 1.12);--_icon-press-scale: var(--ars-navigation-icon-press-scale, .92);--_state: var(--ars-navigation-state-layer-color, var(--mat-sys-on-surface, #191c1b));--_indicator: var(--ars-navigation-indicator-color, var(--mat-sys-secondary-container, #cce8e2));box-sizing:border-box;display:flex;flex-direction:column;gap:2px;min-width:200px;max-width:320px;max-height:60vh;padding:8px;border-radius:12px;background:var(--ars-navigation-menu-container-color, var(--ars-navigation-container-color, var(--mat-sys-surface-container-high, #e7e9e8)));color:var(--ars-navigation-label-color, var(--mat-sys-on-surface, #191c1b));box-shadow:0 1px 2px #0000004d,0 2px 6px 2px #00000026;overflow-y:auto;overscroll-behavior:contain}.ars-nav-submenu__item{box-sizing:border-box;display:flex;align-items:center;gap:12px;flex:none;min-height:48px;margin:0;padding:0 12px;border:0;border-radius:8px;background:transparent;color:inherit;font:inherit;text-align:start;text-decoration:none;cursor:pointer;appearance:none}.ars-nav-submenu__item--grouped{padding-inline-start:var(--ars-navigation-menu-group-indent, 24px)}.ars-nav-submenu__item:hover{background:color-mix(in srgb,currentColor 8%,transparent)}.ars-nav-submenu__item:focus-visible{outline:3px solid var(--ars-navigation-focus-color, var(--ars-color-primary, #00a293));outline-offset:-3px}.ars-nav-submenu__item--selected .ars-nav-submenu__label{font-weight:var(--ars-navigation-selected-font-weight, 700)}.ars-nav-submenu__item--selected{background:var(--_indicator);color:var(--ars-navigation-active-icon-color, var(--mat-sys-on-secondary-container, #0b1f1c))}.ars-nav-submenu__item--selected:where(:hover,:focus-visible){background:color-mix(in srgb,var(--_state) 8%,var(--_indicator))}.ars-nav-submenu__item:disabled,.ars-nav-submenu__item[aria-disabled=true]{opacity:.38;pointer-events:none}.ars-nav-submenu__heading{padding:12px 12px 4px;font-size:11px;line-height:16px;font-weight:500;letter-spacing:.5px;text-transform:uppercase;opacity:.7}.ars-nav-submenu__heading:first-child{padding-top:4px}.ars-nav-submenu__label{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--ars-navigation-label-lines, 2);line-clamp:var(--ars-navigation-label-lines, 2);flex:1 1 auto;min-width:0;padding-block:8px;font-size:14px;line-height:var(--ars-navigation-label-line-height, 18px);font-weight:500;letter-spacing:.1px;white-space:normal;overflow-wrap:anywhere;overflow:hidden}.ars-nav-submenu__trailing{flex:none;font-size:11px;line-height:16px;font-weight:500;letter-spacing:.5px;opacity:.8}@media(prefers-reduced-motion:reduce){:host{--_dur-short: 0ms;--_dur: 0ms;--_dur-long: 0ms;--_icon-hover-scale: 1;--_icon-press-scale: 1}:host([data-indicator=wide]) .ars-nav__item:before,:host([data-indicator=compact]) .ars-nav__icon-box:before{transform:none}.ars-nav-submenu{--_dur-short: 0ms;--_dur: 0ms;--_dur-long: 0ms;--_icon-hover-scale: 1;--_icon-press-scale: 1}}@media(forced-colors:active){:host([data-indicator=compact]) .ars-nav__item--selected .ars-nav__icon-box:before,:host([data-indicator=wide]) .ars-nav__item--selected:before{background:Highlight;forced-color-adjust:none}.ars-nav__item:focus-visible{outline:3px solid CanvasText}}\n"],
|
|
1070
|
+
template: "@if (isModal() && scrim()) {\n <div class=\"ars-nav__scrim\" aria-hidden=\"true\" (click)=\"onScrimClick()\"></div>\n}\n\n@if (bottomSeparator() && resolvedVariant() === 'bar') {\n <div class=\"ars-nav__separator\" aria-hidden=\"true\"></div>\n}\n\n<nav class=\"ars-nav\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.role]=\"isModal() ? 'dialog' : undefined\"\n [attr.aria-modal]=\"isModal() ? 'true' : undefined\"\n [attr.inert]=\"isHidden() ? '' : undefined\"\n [cdkTrapFocus]=\"isOverlayOpen()\"\n [cdkTrapFocusAutoCapture]=\"isOverlayOpen()\"\n (keydown)=\"onKeydown($event)\">\n\n @let labels = resolvedLabelVisibility();\n @let stacked = resolvedLayout() === 'vertical';\n @let wide = isExpanded();\n @let active = activeId();\n @let highlighted = highlightedIds();\n @let ancestors = ancestorIds();\n @let openIds = expandedSet();\n @let popupOpenId = popupItem()?.item.id;\n\n @if (showsHeader()) {\n <div class=\"ars-nav__header\">\n @if (showMenuButton()) {\n <button type=\"button\"\n class=\"ars-nav__menu\"\n [attr.aria-label]=\"menuAriaLabel()\"\n (click)=\"onMenuClick()\">\n <mat-icon aria-hidden=\"true\">{{ menuIcon() }}</mat-icon>\n </button>\n }\n @if (wide) {\n @if (headline(); as headlineText) {\n <h2 class=\"ars-nav__headline\">{{ headlineText }}</h2>\n }\n }\n </div>\n }\n\n <div class=\"ars-nav__leading\"><ng-content select=\"[navHeader]\" /></div>\n <div class=\"ars-nav__fab\"><ng-content select=\"[navFab]\" /></div>\n\n @for (group of visibleGroups(); track group.align) {\n <div class=\"ars-nav__items\" [class.ars-nav__items--bottom]=\"group.align === 'bottom'\">\n @for (block of group.sections; track block.section.id) {\n\n @if (wide && block.section.label) {\n <h3 class=\"ars-nav__section-headline\">{{ block.section.label }}</h3>\n }\n\n @for (r of block.items; track r.item.id) {\n @let current = r.item.id === active;\n <!-- Clicking a parent opens and closes its branch, or its floating panel, and\n never navigates. It can still BE the active destination, but only when it\n owns a route of its own (`r.href`): that is a page the user can reach, so\n the row is allowed to look selected. A parent without a route is never\n selected — where it used to stand in for a destination it hides it now\n carries `ancestor` instead: the trail, not the selection. -->\n @let ancestor = ancestors.has(r.item.id);\n <!-- Stacked layouts get the short form when the destination declares one, or\n no label at all on `'none'`; `tooltip` and `ariaLabel` stay on the full\n label either way, so the name is still one hover — or one screen reader —\n away. -->\n @let stackedLabelHidden = stacked && r.item.labelVertical === 'none';\n @let displayLabel = stacked ? (r.item.labelVertical ?? r.item.label) : r.item.label;\n @let selected = highlighted.has(r.item.id) && (!r.hasChildren || !!r.href);\n <!-- `stackedLabelHidden` counts as \"no label on screen\": that is what turns the\n tooltip back on, which is the only place the name is left to be read. -->\n @let labelVisible = !r.iconOnly && !stackedLabelHidden\n && (labels === 'labeled' || (labels === 'selected' && (selected || ancestor)));\n @let branchOpen = r.hasChildren && openIds.has(r.item.id);\n @let hideIcon = wide && r.depth > 0 && !childIcons();\n <!-- In the compact variants the children live in a floating panel, so an\n ancestor row IS how the active destination shows on screen: it takes the\n selected look whole, icon variant included, exactly like a destination\n without children. In the expanded ones the active row is visible on its\n own and the ancestor stays the quieter trail. -->\n @let activeLook = selected || (!wide && ancestor);\n @let svg = activeLook ? r.svgOn : r.svgOff;\n @let image = activeLook ? r.imageOn : r.imageOff;\n @let ligature = activeLook ? r.iconOn : r.iconOff;\n\n <!--\n The anchor and the button branches duplicate the inner markup on purpose:\n an `ng-template` + `ngTemplateOutlet` would allocate one extra embedded\n view per destination and lose the typed template context.\n -->\n @if (r.href && !r.hasChildren) {\n <a #navItem\n class=\"ars-nav__item\"\n [class.ars-nav__item--selected]=\"selected\"\n [class.ars-nav__item--icon-stacked]=\"stackedLabelHidden\"\n [class.ars-nav__item--greyed]=\"r.item.greyed\"\n [class.ars-nav__item--disabled]=\"r.item.disabled\"\n [class.ars-nav__item--no-icon]=\"hideIcon\"\n [attr.data-depth]=\"r.depth\"\n [attr.href]=\"r.item.disabled ? undefined : r.href\"\n [attr.target]=\"r.item.target\"\n [attr.rel]=\"r.item.target === '_blank' ? 'noopener noreferrer' : undefined\"\n [attr.aria-label]=\"r.ariaLabel\"\n [attr.aria-current]=\"current ? 'page' : undefined\"\n [attr.aria-disabled]=\"r.item.disabled ? 'true' : undefined\"\n [attr.tabindex]=\"r.item.disabled ? -1 : 0\"\n [attr.data-nav-id]=\"r.item.id\"\n [matTooltip]=\"r.tooltip\"\n [matTooltipDisabled]=\"!tooltips() || labelVisible\"\n [matTooltipPosition]=\"tooltipPosition()\"\n (click)=\"select(r, $event)\">\n @if (!hideIcon) {\n <span class=\"ars-nav__icon-box\">\n @if (svg; as svgName) {\n <mat-icon class=\"ars-nav__icon\" [svgIcon]=\"svgName\" aria-hidden=\"true\" />\n } @else if (r.spriteStyle; as spriteStyle) {\n <span class=\"ars-nav__icon ars-nav__icon--sprite\" [style]=\"spriteStyle\" aria-hidden=\"true\"></span>\n } @else if (image; as imageUrl) {\n <img class=\"ars-nav__icon ars-nav__icon--image\" [src]=\"imageUrl\" alt=\"\" loading=\"lazy\" decoding=\"async\" />\n } @else if (ligature; as ligatureName) {\n <mat-icon class=\"ars-nav__icon\" aria-hidden=\"true\">{{ ligatureName }}</mat-icon>\n }\n @if (r.hasBadge) {\n <span class=\"ars-nav__badge\"\n [class.ars-nav__badge--dot]=\"!r.badgeText\"\n [style.background-color]=\"r.item.badge?.color\"\n [attr.aria-label]=\"r.item.badge?.ariaLabel\">{{ r.badgeText }}</span>\n }\n </span>\n }\n @if (labels !== 'unlabeled' && !r.iconOnly && !stackedLabelHidden) {\n <span class=\"ars-nav__label\" [class.ars-nav__label--hidden]=\"!labelVisible\">{{ displayLabel }}</span>\n }\n @if (wide && r.item.trailing) {\n <span class=\"ars-nav__trailing\">{{ r.item.trailing }}</span>\n }\n <!-- The badge of an icon-less child has no icon box to sit on: it moves\n to the trailing edge, exactly as the submenu panel renders it. -->\n @if (hideIcon && r.hasBadge) {\n <span class=\"ars-nav__badge ars-nav__badge--inline\"\n [class.ars-nav__badge--dot]=\"!r.badgeText\"\n [style.background-color]=\"r.item.badge?.color\"\n [attr.aria-label]=\"r.item.badge?.ariaLabel\">{{ r.badgeText }}</span>\n }\n </a>\n } @else {\n <button #navItem\n type=\"button\"\n class=\"ars-nav__item\"\n [class.ars-nav__item--selected]=\"selected\"\n [class.ars-nav__item--ancestor]=\"ancestor\"\n [class.ars-nav__item--icon-stacked]=\"stackedLabelHidden\"\n [class.ars-nav__item--greyed]=\"r.item.greyed\"\n [class.ars-nav__item--disabled]=\"r.item.disabled\"\n [class.ars-nav__item--no-icon]=\"hideIcon\"\n [class.ars-nav__item--parent]=\"r.hasChildren\"\n [class.ars-nav__item--icon-only]=\"r.iconOnly\"\n [attr.data-depth]=\"r.depth\"\n [disabled]=\"!!r.item.disabled\"\n [attr.aria-label]=\"r.ariaLabel\"\n [attr.aria-current]=\"current ? 'page' : undefined\"\n [attr.aria-expanded]=\"r.hasChildren ? (wide ? branchOpen : popupOpenId === r.item.id) : undefined\"\n [attr.aria-haspopup]=\"r.hasChildren && !wide ? 'menu' : undefined\"\n [attr.data-nav-id]=\"r.item.id\"\n [matTooltip]=\"r.tooltip\"\n [matTooltipDisabled]=\"!tooltips() || labelVisible\"\n [matTooltipPosition]=\"tooltipPosition()\"\n (click)=\"select(r, $event)\">\n @if (!hideIcon) {\n <span class=\"ars-nav__icon-box\">\n @if (svg; as svgName) {\n <mat-icon class=\"ars-nav__icon\" [svgIcon]=\"svgName\" aria-hidden=\"true\" />\n } @else if (r.spriteStyle; as spriteStyle) {\n <span class=\"ars-nav__icon ars-nav__icon--sprite\" [style]=\"spriteStyle\" aria-hidden=\"true\"></span>\n } @else if (image; as imageUrl) {\n <img class=\"ars-nav__icon ars-nav__icon--image\" [src]=\"imageUrl\" alt=\"\" loading=\"lazy\" decoding=\"async\" />\n } @else if (ligature; as ligatureName) {\n <mat-icon class=\"ars-nav__icon\" aria-hidden=\"true\">{{ ligatureName }}</mat-icon>\n }\n @if (r.hasBadge) {\n <span class=\"ars-nav__badge\"\n [class.ars-nav__badge--dot]=\"!r.badgeText\"\n [style.background-color]=\"r.item.badge?.color\"\n [attr.aria-label]=\"r.item.badge?.ariaLabel\">{{ r.badgeText }}</span>\n }\n </span>\n }\n @if (labels !== 'unlabeled' && !r.iconOnly && !stackedLabelHidden) {\n <span class=\"ars-nav__label\" [class.ars-nav__label--hidden]=\"!labelVisible\">{{ displayLabel }}</span>\n }\n @if (wide && r.item.trailing) {\n <span class=\"ars-nav__trailing\">{{ r.item.trailing }}</span>\n }\n <!-- The badge of an icon-less child has no icon box to sit on: it moves\n to the trailing edge, exactly as the submenu panel renders it. -->\n @if (hideIcon && r.hasBadge) {\n <span class=\"ars-nav__badge ars-nav__badge--inline\"\n [class.ars-nav__badge--dot]=\"!r.badgeText\"\n [style.background-color]=\"r.item.badge?.color\"\n [attr.aria-label]=\"r.item.badge?.ariaLabel\">{{ r.badgeText }}</span>\n }\n @if (r.hasChildren && wide) {\n <mat-icon class=\"ars-nav__chevron\"\n [class.ars-nav__chevron--open]=\"branchOpen\"\n aria-hidden=\"true\">{{ expandIcon() }}</mat-icon>\n }\n </button>\n }\n }\n\n @if (wide && block.section.divider && !$last) {\n <hr class=\"ars-nav__divider\" aria-hidden=\"true\" />\n }\n }\n </div>\n }\n\n <div class=\"ars-nav__footer\"><ng-content select=\"[navFooter]\" /></div>\n</nav>\n\n<!--\n One overlay for the whole component: the overflow entry and every parent\n destination of the compact variants reuse it, instead of allocating a menu\n instance per destination.\n-->\n<ng-template cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"popupOrigin()\"\n [cdkConnectedOverlayOpen]=\"isPopupOpen()\"\n [cdkConnectedOverlayPositions]=\"popupPositions()\"\n [cdkConnectedOverlayPush]=\"true\"\n (overlayOutsideClick)=\"closePopup()\"\n (detach)=\"closePopup()\">\n <div class=\"ars-nav-submenu\"\n role=\"menu\"\n [attr.aria-label]=\"popupItem()?.ariaLabel\"\n [cdkTrapFocus]=\"true\"\n [cdkTrapFocusAutoCapture]=\"true\"\n (keydown)=\"onKeydown($event)\">\n @for (entry of popupEntries(); track entry.key) {\n @if (entry.render; as c) {\n @let childSelected = c.item.id === activeId();\n @let childSvg = childSelected ? c.svgOn : c.svgOff;\n @let childImage = childSelected ? c.imageOn : c.imageOff;\n @let childLigature = childSelected ? c.iconOn : c.iconOff;\n @if (c.href) {\n <a #panelItem\n class=\"ars-nav-submenu__item\"\n role=\"menuitem\"\n [class.ars-nav-submenu__item--grouped]=\"entry.grouped\"\n [class.ars-nav-submenu__item--selected]=\"childSelected\"\n [class.ars-nav-submenu__item--greyed]=\"c.item.greyed\"\n [attr.href]=\"c.item.disabled ? undefined : c.href\"\n [attr.target]=\"c.item.target\"\n [attr.rel]=\"c.item.target === '_blank' ? 'noopener noreferrer' : undefined\"\n [attr.aria-disabled]=\"c.item.disabled ? 'true' : undefined\"\n [attr.aria-current]=\"childSelected ? 'page' : undefined\"\n (click)=\"select(c, $event)\">\n @if (childSvg; as svgName) {\n <mat-icon class=\"ars-nav__icon\" [svgIcon]=\"svgName\" aria-hidden=\"true\" />\n } @else if (c.spriteStyle; as spriteStyle) {\n <span class=\"ars-nav__icon ars-nav__icon--sprite\" [style]=\"spriteStyle\" aria-hidden=\"true\"></span>\n } @else if (childImage; as imageUrl) {\n <img class=\"ars-nav__icon ars-nav__icon--image\" [src]=\"imageUrl\" alt=\"\" loading=\"lazy\" decoding=\"async\" />\n } @else if (childLigature; as ligatureName) {\n <mat-icon class=\"ars-nav__icon\" aria-hidden=\"true\">{{ ligatureName }}</mat-icon>\n }\n <span class=\"ars-nav-submenu__label\">{{ c.item.label }}</span>\n @if (c.badgeText) {\n <span class=\"ars-nav-submenu__trailing\">{{ c.badgeText }}</span>\n } @else if (c.item.trailing) {\n <span class=\"ars-nav-submenu__trailing\">{{ c.item.trailing }}</span>\n }\n </a>\n } @else {\n <button #panelItem\n type=\"button\"\n class=\"ars-nav-submenu__item\"\n role=\"menuitem\"\n [class.ars-nav-submenu__item--grouped]=\"entry.grouped\"\n [class.ars-nav-submenu__item--selected]=\"childSelected\"\n [class.ars-nav-submenu__item--greyed]=\"c.item.greyed\"\n [disabled]=\"!!c.item.disabled\"\n [attr.aria-current]=\"childSelected ? 'page' : undefined\"\n (click)=\"select(c, $event)\">\n @if (childSvg; as svgName) {\n <mat-icon class=\"ars-nav__icon\" [svgIcon]=\"svgName\" aria-hidden=\"true\" />\n } @else if (c.spriteStyle; as spriteStyle) {\n <span class=\"ars-nav__icon ars-nav__icon--sprite\" [style]=\"spriteStyle\" aria-hidden=\"true\"></span>\n } @else if (childImage; as imageUrl) {\n <img class=\"ars-nav__icon ars-nav__icon--image\" [src]=\"imageUrl\" alt=\"\" loading=\"lazy\" decoding=\"async\" />\n } @else if (childLigature; as ligatureName) {\n <mat-icon class=\"ars-nav__icon\" aria-hidden=\"true\">{{ ligatureName }}</mat-icon>\n }\n <span class=\"ars-nav-submenu__label\">{{ c.item.label }}</span>\n @if (c.badgeText) {\n <span class=\"ars-nav-submenu__trailing\">{{ c.badgeText }}</span>\n } @else if (c.item.trailing) {\n <span class=\"ars-nav-submenu__trailing\">{{ c.item.trailing }}</span>\n }\n </button>\n }\n } @else {\n <div class=\"ars-nav-submenu__heading\" role=\"presentation\">{{ entry.label }}</div>\n }\n }\n </div>\n</ng-template>\n",
|
|
1071
|
+
styles: [":host{--_container: var(--ars-navigation-container-color, var(--mat-sys-surface-container, #eff1ef));--_indicator: var(--ars-navigation-indicator-color, var(--mat-sys-secondary-container, #cce8e2));--_icon: var(--ars-navigation-icon-color, var(--mat-sys-on-surface-variant, #3f4947));--_icon-active: var(--ars-navigation-active-icon-color, var(--mat-sys-on-secondary-container, #0b1f1c));--_label: var(--ars-navigation-label-color, var(--mat-sys-on-surface-variant, #3f4947));--_label-active: var(--ars-navigation-active-label-color, var(--ars-color-secondary, #4a635f));--_headline: var(--ars-navigation-headline-color, var(--mat-sys-on-surface-variant, #3f4947));--_state: var(--ars-navigation-state-layer-color, var(--mat-sys-on-surface, #191c1b));--_badge: var(--ars-navigation-badge-color, var(--ars-color-error, #ff5449));--_badge-text: var(--ars-navigation-badge-text-color, #ffffff);--_divider: var(--ars-navigation-divider-color, var(--ars-color-divider, #757d87));--_scrim: var(--ars-navigation-scrim-color, rgba(0, 0, 0, .4));--_focus: var(--ars-navigation-focus-color, var(--ars-color-primary, #00a293));--_easing: var(--ars-navigation-easing, cubic-bezier(.2, 0, 0, 1));--_dur-short: var(--ars-navigation-duration-short, .15s);--_dur: var(--ars-navigation-duration, .25s);--_dur-long: var(--ars-navigation-duration-long, .4s);--_icon-hover-scale: var(--ars-navigation-icon-hover-scale, 1.12);--_icon-press-scale: var(--ars-navigation-icon-press-scale, .92);--_hover-opacity: .08;--_focus-opacity: .1;--_press-opacity: .1;--_row-height: var(--ars-navigation-item-height, 56px);--_row-gap: var(--ars-navigation-item-gap, 4px);--_row-font-size: var(--ars-navigation-label-font-size, 14px);--_child-height: var(--ars-navigation-child-height, 48px);--_child-font-size: var(--ars-navigation-child-font-size, 13px);--_section-padding: 18px 16px 8px;--_row-pad-start: var(--ars-navigation-item-padding-start, 24px);--_row-pad-end: var(--ars-navigation-item-padding-end, 24px);--_label-lines: var(--ars-navigation-label-lines, 2);--_rtl: 1;display:block;box-sizing:border-box;color:var(--_label);-webkit-tap-highlight-color:transparent}:host-context([dir=rtl]){--_rtl: -1}:host(.ars-navigation--dense){--_row-height: var(--ars-navigation-dense-item-height, 44px);--_child-height: var(--ars-navigation-dense-child-height, 36px);--_section-padding: 12px 16px 4px}:host(.ars-navigation--dense){--_row-pad-start: var(--ars-navigation-dense-item-padding-start, 12px);--_row-pad-end: var(--ars-navigation-dense-item-padding-end, 12px)}.ars-nav{box-sizing:border-box;display:flex;position:relative;background:var(--_container);color:var(--_label);overflow:hidden}.ars-nav__items{box-sizing:border-box;display:flex;min-height:0;min-width:0;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--_state) 25%,transparent) transparent}.ars-nav__header{box-sizing:border-box;display:flex;align-items:center;flex:none;gap:12px}.ars-nav__leading,.ars-nav__fab,.ars-nav__footer{box-sizing:border-box;flex:none}.ars-nav__leading:empty,.ars-nav__fab:empty,.ars-nav__footer:empty{display:none}.ars-nav__headline{margin:0;padding:0 16px;font-size:22px;line-height:28px;font-weight:400;color:var(--_headline);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ars-nav__section-headline{margin:0;padding:var(--_section-padding, 18px 16px 8px);font-size:14px;line-height:20px;font-weight:500;letter-spacing:.1px;color:var(--_headline);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ars-nav__divider{flex:none;margin:8px 16px;border:0;border-top:1px solid var(--_divider);opacity:.4}.ars-nav__menu{display:inline-flex;align-items:center;justify-content:center;flex:none;width:48px;height:48px;margin:0;padding:0;border:0;border-radius:50%;background:transparent;color:var(--_icon);cursor:pointer;transition:background-color var(--_dur-short) var(--_easing)}.ars-nav__menu:hover{background:color-mix(in srgb,var(--_state) 8%,transparent)}.ars-nav__menu:focus-visible{outline:3px solid var(--_focus);outline-offset:2px}.ars-nav__item{box-sizing:border-box;position:relative;isolation:isolate;display:flex;align-items:center;flex:none;margin:0;border:0;background:transparent;color:var(--_label);font:inherit;text-align:start;text-decoration:none;cursor:pointer;-webkit-user-select:none;user-select:none;appearance:none;-webkit-tap-highlight-color:transparent}.ars-nav__item:focus-visible{outline:3px solid var(--_focus);outline-offset:-3px;border-radius:16px}.ars-nav__item--disabled,.ars-nav__item:disabled{cursor:default;opacity:.38;pointer-events:none}.ars-nav__icon-box{box-sizing:border-box;position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;width:24px;height:24px;color:var(--_icon);transition:color var(--_dur) var(--_easing)}.ars-nav__icon{position:relative;z-index:1;width:24px;height:24px;font-size:24px;line-height:24px;font-variation-settings:\"FILL\" 0;transform:scale(1);transform-origin:center;transition:font-variation-settings var(--_dur, .25s) var(--_easing, cubic-bezier(.2, 0, 0, 1)),transform var(--_dur, .25s) var(--_easing, cubic-bezier(.2, 0, 0, 1))}.ars-nav__label{position:relative;z-index:1;min-width:0;font:var(--mat-sys-label-large, 500 14px/20px Roboto, sans-serif);letter-spacing:var(--mat-sys-label-large-tracking, .1px);color:var(--_label);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color var(--_dur) var(--_easing),opacity var(--_dur) var(--_easing),max-height var(--_dur) var(--_easing),margin var(--_dur) var(--_easing)}.ars-nav__label--hidden{opacity:0;max-height:0;margin:0!important;pointer-events:none}.ars-nav__trailing{position:relative;z-index:1;margin-inline-start:auto;padding-inline-start:12px;font-size:11px;line-height:16px;font-weight:500;letter-spacing:.5px;color:var(--_label);white-space:nowrap}.ars-nav__badge{position:absolute;z-index:2;top:-6px;inset-inline-start:12px;box-sizing:border-box;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--_badge);color:var(--_badge-text);font-size:11px;line-height:16px;font-weight:500;letter-spacing:.5px;text-align:center;white-space:nowrap}.ars-nav__badge--dot{top:-1px;inset-inline-start:16px;width:6px;min-width:6px;height:6px;padding:0;border-radius:3px}.ars-nav__badge--inline{position:static;z-index:1;flex:none;margin-inline-start:8px}.ars-nav__badge--inline.ars-nav__badge--dot{margin-inline-start:12px}:host([data-indicator=compact]) .ars-nav__icon-box:before{content:\"\";position:absolute;z-index:0;background:var(--_indicator);opacity:0;transform:scaleX(.55);transition:opacity var(--_dur) var(--_easing),transform var(--_dur-long) var(--_easing);pointer-events:none;inset:50% auto auto 50%;width:56px;height:32px;margin:-16px 0 0 -28px;border-radius:16px}:host([data-indicator=compact]) .ars-nav__icon-box:after{content:\"\";position:absolute;z-index:0;background:var(--_state);opacity:0;transition:opacity var(--_dur-short) var(--_easing);pointer-events:none;inset:50% auto auto 50%;width:56px;height:32px;margin:-16px 0 0 -28px;border-radius:16px}:host([data-indicator=compact]) .ars-nav__item--icon-stacked .ars-nav__icon-box:before,:host([data-indicator=compact]) .ars-nav__item--icon-stacked .ars-nav__icon-box:after{width:var(--ars-navigation-icon-button-size, 48px);height:var(--ars-navigation-icon-button-size, 48px);margin:calc(var(--ars-navigation-icon-button-size, 48px) / -2) 0 0 calc(var(--ars-navigation-icon-button-size, 48px) / -2);border-radius:50%}:host([data-indicator=compact]) .ars-nav__item--selected .ars-nav__icon-box:before{opacity:1;transform:scaleX(1)}:host([data-indicator=compact]) .ars-nav__item:hover .ars-nav__icon-box:after{opacity:var(--_hover-opacity)}:host([data-indicator=compact]) .ars-nav__item:focus-visible .ars-nav__icon-box:after{opacity:var(--_focus-opacity)}:host([data-indicator=compact]) .ars-nav__item:active .ars-nav__icon-box:after{opacity:var(--_press-opacity)}:host([data-indicator=wide]) .ars-nav__item:before{content:\"\";position:absolute;z-index:0;background:var(--_indicator);opacity:0;transform:scaleX(.55);transition:opacity var(--_dur) var(--_easing),transform var(--_dur-long) var(--_easing);pointer-events:none;inset:0;border-radius:28px}:host([data-indicator=wide]) .ars-nav__item:after{content:\"\";position:absolute;z-index:0;background:var(--_state);opacity:0;transition:opacity var(--_dur-short) var(--_easing);pointer-events:none;inset:0;border-radius:28px}:host([data-indicator=wide]) .ars-nav__item--selected:before{opacity:1;transform:scaleX(1)}:host([data-indicator=wide]) .ars-nav__item:hover:after{opacity:var(--_hover-opacity)}:host([data-indicator=wide]) .ars-nav__item:focus-visible:after{opacity:var(--_focus-opacity)}:host([data-indicator=wide]) .ars-nav__item:active:after{opacity:var(--_press-opacity)}.ars-nav__item--ancestor:not(.ars-nav__item--selected) .ars-nav__label{color:var(--_label-active)}.ars-nav__item--ancestor:not(.ars-nav__item--selected) .ars-nav__icon-box,.ars-nav__item--ancestor:not(.ars-nav__item--selected) .ars-nav__chevron{color:var(--_label-active)}:host([data-variant=bar][data-indicator=compact]) .ars-nav__item--ancestor .ars-nav__icon-box:before,:host([data-variant=rail][data-indicator=compact]) .ars-nav__item--ancestor .ars-nav__icon-box:before{opacity:1;transform:scaleX(1)}:host([data-variant=bar]) .ars-nav__item--ancestor .ars-nav__icon-box,:host([data-variant=rail]) .ars-nav__item--ancestor .ars-nav__icon-box{color:var(--_icon-active)}:host([data-variant=bar]) .ars-nav__item--ancestor .ars-nav__icon,:host([data-variant=rail]) .ars-nav__item--ancestor .ars-nav__icon{font-variation-settings:\"FILL\" 1}.ars-nav__item--selected .ars-nav__icon-box{color:var(--_icon-active)}.ars-nav__item--selected .ars-nav__icon{font-variation-settings:\"FILL\" 1}.ars-nav__item--selected .ars-nav__label{color:var(--_label-active)}.ars-nav__item--greyed:not(.ars-nav__item--selected) .ars-nav__label,.ars-nav__item--greyed:not(.ars-nav__item--selected) .ars-nav__icon-box,.ars-nav__item--greyed:not(.ars-nav__item--selected) .ars-nav__trailing,.ars-nav-submenu__item--greyed:not(.ars-nav-submenu__item--selected){opacity:var(--ars-navigation-greyed-opacity, .5);transition:opacity var(--_dur-short, .15s) var(--_easing, cubic-bezier(.2, 0, 0, 1))}.ars-nav__item--greyed:where(:hover,:focus-visible) .ars-nav__label,.ars-nav__item--greyed:where(:hover,:focus-visible) .ars-nav__icon-box,.ars-nav__item--greyed:where(:hover,:focus-visible) .ars-nav__trailing,.ars-nav-submenu__item--greyed:where(:hover,:focus-visible){opacity:1}:host([data-layout=vertical]) .ars-nav__item{flex-direction:column;justify-content:center}:host([data-layout=vertical]) .ars-nav__label{font:var(--mat-sys-label-medium, 500 12px/16px Roboto, sans-serif);letter-spacing:var(--mat-sys-label-medium-tracking, .5px);margin-top:var(--ars-navigation-vertical-gap, 0);padding-block:var(--ars-navigation-vertical-label-padding, 8px);max-width:100%;text-align:center;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--_label-lines, 2);line-clamp:var(--_label-lines, 2);white-space:normal;overflow-wrap:anywhere;line-height:var(--ars-navigation-vertical-label-line-height, 14px)}:host([data-layout=horizontal]) .ars-nav__item{flex-direction:row;justify-content:flex-start}:host([data-layout=horizontal]) .ars-nav__label{margin-inline-start:4px}:host .ars-nav__item--selected .ars-nav__label,:host .ars-nav__item--ancestor .ars-nav__label{font-weight:var(--ars-navigation-selected-font-weight, 700)}:host([data-variant=bar]) .ars-nav__item--selected .ars-nav__label,:host([data-variant=bar]) .ars-nav__item--ancestor .ars-nav__label,:host([data-variant=rail]) .ars-nav__item--selected .ars-nav__label,:host([data-variant=rail]) .ars-nav__item--ancestor .ars-nav__label{font-weight:var(--ars-navigation-compact-selected-font-weight, 500)}:host([data-variant=bar]){width:100%}:host([data-variant=bar]) .ars-nav{flex-direction:row;align-items:center;justify-content:space-around;width:100%;height:var(--ars-navigation-bar-height, 80px);padding:0 8px}:host([data-variant=bar]) .ars-nav__header,:host([data-variant=bar]) .ars-nav__leading,:host([data-variant=bar]) .ars-nav__fab,:host([data-variant=bar]) .ars-nav__footer,:host([data-variant=bar]) .ars-nav__section-headline,:host([data-variant=bar]) .ars-nav__divider,:host([data-variant=bar]) .ars-nav__trailing{display:none}:host([data-variant=bar]) .ars-nav__items{display:contents}:host([data-variant=bar]) .ars-nav__item{flex:1 1 0;min-width:0;height:100%}:host([data-variant=bar][data-layout=horizontal]) .ars-nav__item{justify-content:center;max-width:var(--ars-navigation-item-max-width, 168px);padding:0 12px}:host([data-variant=bar][data-layout=vertical]) .ars-nav__item{justify-content:flex-start;padding-block-start:var(--ars-navigation-bar-item-padding-top, 12px)}:host([data-variant=bar][data-indicator=wide]) .ars-nav__item:before,:host([data-variant=bar][data-indicator=wide]) .ars-nav__item:after{inset:12px 0}:host([data-variant=rail]){height:100%}:host([data-variant=rail]) .ars-nav{flex-direction:column;align-items:center;width:var(--ars-navigation-rail-width, var(--ars-navigation-width, 96px));height:100%;padding:var(--ars-navigation-rail-top-padding, 20px) 0 8px}:host([data-variant=rail]) .ars-nav__header{flex-direction:column;margin-bottom:40px}:host([data-variant=rail]) .ars-nav__headline,:host([data-variant=rail]) .ars-nav__section-headline,:host([data-variant=rail]) .ars-nav__divider,:host([data-variant=rail]) .ars-nav__trailing{display:none}:host([data-variant=rail]) .ars-nav__fab{margin-bottom:40px}:host([data-variant=rail]) .ars-nav__items{flex:1 1 auto;flex-direction:column;align-items:center;gap:var(--ars-navigation-rail-item-gap, 8px);width:100%;overflow-y:auto;overscroll-behavior:contain}:host([data-variant=rail]) .ars-nav__item{justify-content:center;width:100%;min-height:var(--ars-navigation-rail-item-height, 64px);padding:0 4px}:host([data-variant=rail-expanded]),:host([data-variant=drawer]),:host([data-variant=modal]){height:100%}:host([data-variant=rail-expanded]) .ars-nav,:host([data-variant=drawer]) .ars-nav,:host([data-variant=modal]) .ars-nav{flex-direction:column;align-items:stretch;height:100%;padding:12px 0}:host([data-variant=rail-expanded]) .ars-nav__header,:host([data-variant=drawer]) .ars-nav__header,:host([data-variant=modal]) .ars-nav__header{padding:4px 8px 8px}:host([data-variant=rail-expanded]) .ars-nav__items,:host([data-variant=drawer]) .ars-nav__items,:host([data-variant=modal]) .ars-nav__items{flex:1 1 auto;flex-direction:column;gap:var(--_row-gap, 4px);overflow-y:auto;overscroll-behavior:contain}:host([data-variant=rail-expanded]) .ars-nav__item,:host([data-variant=drawer]) .ars-nav__item,:host([data-variant=modal]) .ars-nav__item{min-height:var(--_row-height, 56px);padding-block:0;padding-inline:calc(var(--_row-pad-start, 24px) + var(--_depth-indent, 0px)) var(--_row-pad-end, 24px);margin-block:0;margin-inline:var(--ars-navigation-item-inset, 20px)}:host(.ars-navigation--dense) .ars-nav__item{padding-inline:calc(var(--_row-pad-start, 12px) + var(--_depth-indent, 0px)) var(--_row-pad-end, 12px)}:host([data-variant=rail-expanded]) .ars-nav__item[data-depth]:not([data-depth=\"0\"])+.ars-nav__item[data-depth=\"0\"],:host([data-variant=drawer]) .ars-nav__item[data-depth]:not([data-depth=\"0\"])+.ars-nav__item[data-depth=\"0\"],:host([data-variant=modal]) .ars-nav__item[data-depth]:not([data-depth=\"0\"])+.ars-nav__item[data-depth=\"0\"]{margin-block-start:var(--ars-navigation-branch-end-gap, 12px)}:host([data-variant=rail-expanded]) .ars-nav__item[data-depth]:not([data-depth=\"0\"]):last-child,:host([data-variant=drawer]) .ars-nav__item[data-depth]:not([data-depth=\"0\"]):last-child,:host([data-variant=modal]) .ars-nav__item[data-depth]:not([data-depth=\"0\"]):last-child{margin-block-end:var(--ars-navigation-branch-end-gap, 12px)}:host([data-variant=rail-expanded]) .ars-nav__icon-box,:host([data-variant=drawer]) .ars-nav__icon-box,:host([data-variant=modal]) .ars-nav__icon-box{margin-inline-end:12px}:host([data-variant=rail-expanded]) .ars-nav__item[data-depth]:not([data-depth=\"0\"]),:host([data-variant=drawer]) .ars-nav__item[data-depth]:not([data-depth=\"0\"]),:host([data-variant=modal]) .ars-nav__item[data-depth]:not([data-depth=\"0\"]){min-height:var(--_child-height, 48px)}:host([data-variant=rail-expanded]) .ars-nav__item[data-depth]:not([data-depth=\"0\"]) .ars-nav__label,:host([data-variant=drawer]) .ars-nav__item[data-depth]:not([data-depth=\"0\"]) .ars-nav__label,:host([data-variant=modal]) .ars-nav__item[data-depth]:not([data-depth=\"0\"]) .ars-nav__label{font-size:var(--_child-font-size, 13px)}:host([data-variant=rail-expanded]) .ars-nav__label,:host([data-variant=drawer]) .ars-nav__label,:host([data-variant=modal]) .ars-nav__label{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--_label-lines, 2);line-clamp:var(--_label-lines, 2);white-space:normal;overflow-wrap:anywhere;line-height:var(--ars-navigation-label-line-height, 18px);flex:1 1 auto;margin-inline-start:0;font-size:var(--_row-font-size, 14px)}:host([data-variant=rail-expanded]) .ars-nav{width:var(--ars-navigation-width, 220px);min-width:var(--ars-navigation-min-width, 0);max-width:var(--ars-navigation-max-width, 100%)}:host([data-variant=drawer]) .ars-nav,:host([data-variant=modal]) .ars-nav{width:var(--ars-navigation-width, 360px);min-width:var(--ars-navigation-min-width, 0);max-width:var(--ars-navigation-max-width, 100%)}:host([data-variant=modal]){position:fixed;inset:0;z-index:var(--ars-navigation-z-index, 1000);height:auto;pointer-events:none}:host([data-variant=modal]) .ars-nav{position:absolute;inset-block:0;inset-inline-start:0;pointer-events:auto;border-start-end-radius:16px;border-end-end-radius:16px;translate:calc(var(--_shift, 0%) * var(--_rtl)) 0;transition:translate var(--_dur-long) var(--_easing),visibility var(--_dur-long) var(--_easing)}:host([data-variant=modal][data-position=end]) .ars-nav{inset-inline-start:auto;inset-inline-end:0;border-radius:0;border-start-start-radius:16px;border-end-start-radius:16px}:host([data-variant=modal].ars-navigation--hidden) .ars-nav__scrim{opacity:0;pointer-events:none}:host([data-variant=modal].ars-navigation--hidden) .ars-nav{--_shift: -100%;visibility:hidden}:host([data-variant=modal][data-position=end].ars-navigation--hidden) .ars-nav{--_shift: 100%}.ars-nav__scrim{position:absolute;inset:0;background:var(--_scrim);opacity:1;pointer-events:auto;transition:opacity var(--_dur-long) var(--_easing)}:host(:not([data-variant=bar])) .ars-nav__items--bottom{flex:0 0 auto;margin-block-start:auto;overflow:visible}:host([data-align=center]) .ars-nav__items:not(.ars-nav__items--bottom){justify-content:safe center}:host([data-align=bottom]) .ars-nav__items:not(.ars-nav__items--bottom){justify-content:safe flex-end}:host(.ars-navigation--elevated) .ars-nav{box-shadow:0 1px 3px #0000004d,0 4px 8px 3px #00000026}:host([data-variant=bar].ars-navigation--separator){position:relative;--_separator: var( --ars-navigation-separator-color, color-mix(in srgb, var(--ars-color-divider, #757d87) 70%, #fff) )}:host([data-variant=bar][data-theme=dark].ars-navigation--separator){--_separator: var( --ars-navigation-separator-color, color-mix(in srgb, var(--ars-color-divider, #757d87) 70%, #000) )}.ars-nav__separator{position:absolute;inset-inline:0;bottom:100%;height:var(--ars-navigation-separator-height, 10px);background:var(--_separator);backdrop-filter:blur(var(--ars-navigation-separator-blur, 4px));-webkit-backdrop-filter:blur(var(--ars-navigation-separator-blur, 4px));-webkit-mask-image:linear-gradient(to bottom,transparent,#000);mask-image:linear-gradient(to bottom,transparent,#000);pointer-events:none}:host([data-variant=bar].ars-navigation--transparent) .ars-nav{background:transparent;box-shadow:none}:host(.ars-navigation--hidden):not([data-variant=modal]){display:none}.ars-nav__icon--image{object-fit:contain}.ars-nav__icon--sprite{display:inline-block;flex:none;width:var(--sp-size, 24px);height:var(--sp-size, 24px);background-image:var(--sp-url);background-repeat:no-repeat;background-size:var(--sp-sheet-x, auto) var(--sp-sheet-y, auto);background-position:calc(var(--sp-frame, var(--sp-normal, 0)) * var(--sp-step-x, 0px)) calc(var(--sp-frame, var(--sp-normal, 0)) * var(--sp-step-y, 0px))}.ars-nav__item:where(:hover,:focus-visible) .ars-nav__icon--sprite,.ars-nav-submenu__item:where(:hover,:focus-visible) .ars-nav__icon--sprite{--sp-frame: var(--sp-hover)}.ars-nav__item--selected .ars-nav__icon--sprite,.ars-nav-submenu__item--selected .ars-nav__icon--sprite,:host([data-variant=bar]) .ars-nav__item--ancestor .ars-nav__icon--sprite,:host([data-variant=rail]) .ars-nav__item--ancestor .ars-nav__icon--sprite{--sp-frame: var(--sp-active)}.ars-nav__item--disabled .ars-nav__icon--sprite,.ars-nav__item:where(:disabled) .ars-nav__icon--sprite,.ars-nav-submenu__item:where(:disabled,[aria-disabled=true]) .ars-nav__icon--sprite{--sp-frame: var(--sp-disabled)}.ars-nav__item:where(:hover,:focus-visible) .ars-nav__icon,.ars-nav-submenu__item:where(:hover,:focus-visible) .ars-nav__icon{transform:scale(var(--_icon-hover-scale, 1.12))}.ars-nav__item--selected .ars-nav__icon,.ars-nav-submenu__item--selected .ars-nav__icon{transform:scale(1)}.ars-nav__item:where(:active) .ars-nav__icon,.ars-nav-submenu__item:where(:active) .ars-nav__icon{transform:scale(var(--_icon-press-scale, .92));transition-duration:var(--_dur-short, .15s)}:host([data-variant=bar]) .ars-nav__item--icon-only{flex:0 0 auto;min-width:56px;max-width:72px}.ars-nav__chevron{position:relative;z-index:1;flex:none;margin-inline-start:8px;width:20px;height:20px;font-size:20px;line-height:20px;color:var(--_icon);rotate:0deg;opacity:0;transition:rotate var(--_dur) var(--_easing),opacity var(--_dur-short) var(--_easing)}.ars-nav__item:where(:hover,:focus-visible) .ars-nav__chevron{opacity:1}@media(hover:none){.ars-nav__chevron{opacity:1}}.ars-nav__chevron--open{rotate:180deg}.ars-nav__item[data-depth=\"1\"]{--_depth-indent: 24px}.ars-nav__item[data-depth=\"2\"]{--_depth-indent: 48px}.ars-nav__item[data-depth=\"3\"]{--_depth-indent: 72px}.ars-nav-submenu{--_easing: var(--ars-navigation-easing, cubic-bezier(.2, 0, 0, 1));--_dur-short: var(--ars-navigation-duration-short, .15s);--_dur: var(--ars-navigation-duration, .25s);--_dur-long: var(--ars-navigation-duration-long, .4s);--_icon-hover-scale: var(--ars-navigation-icon-hover-scale, 1.12);--_icon-press-scale: var(--ars-navigation-icon-press-scale, .92);--_state: var(--ars-navigation-state-layer-color, var(--mat-sys-on-surface, #191c1b));--_indicator: var(--ars-navigation-indicator-color, var(--mat-sys-secondary-container, #cce8e2));box-sizing:border-box;display:flex;flex-direction:column;gap:2px;min-width:200px;max-width:320px;max-height:60vh;padding:8px;border-radius:12px;background:var(--ars-navigation-menu-container-color, var(--ars-navigation-container-color, var(--mat-sys-surface-container-high, #e7e9e8)));color:var(--ars-navigation-label-color, var(--mat-sys-on-surface, #191c1b));box-shadow:0 1px 2px #0000004d,0 2px 6px 2px #00000026;overflow-y:auto;overscroll-behavior:contain}.ars-nav-submenu__item{box-sizing:border-box;display:flex;align-items:center;gap:12px;flex:none;min-height:48px;margin:0;padding:0 12px;border:0;border-radius:8px;background:transparent;color:inherit;font:inherit;text-align:start;text-decoration:none;cursor:pointer;appearance:none}.ars-nav-submenu__item--grouped{padding-inline-start:var(--ars-navigation-menu-group-indent, 24px)}.ars-nav-submenu__item:hover{background:color-mix(in srgb,currentColor 8%,transparent)}.ars-nav-submenu__item:focus-visible{outline:3px solid var(--ars-navigation-focus-color, var(--ars-color-primary, #00a293));outline-offset:-3px}.ars-nav-submenu__item--selected .ars-nav-submenu__label{font-weight:var(--ars-navigation-selected-font-weight, 700)}.ars-nav-submenu__item--selected{background:var(--_indicator);color:var(--ars-navigation-active-icon-color, var(--mat-sys-on-secondary-container, #0b1f1c))}.ars-nav-submenu__item--selected:where(:hover,:focus-visible){background:color-mix(in srgb,var(--_state) 8%,var(--_indicator))}.ars-nav-submenu__item:disabled,.ars-nav-submenu__item[aria-disabled=true]{opacity:.38;pointer-events:none}.ars-nav-submenu__heading{padding:12px 12px 4px;font-size:11px;line-height:16px;font-weight:500;letter-spacing:.5px;text-transform:uppercase;opacity:.7}.ars-nav-submenu__heading:first-child{padding-top:4px}.ars-nav-submenu__label{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--ars-navigation-label-lines, 2);line-clamp:var(--ars-navigation-label-lines, 2);flex:1 1 auto;min-width:0;padding-block:8px;font-size:14px;line-height:var(--ars-navigation-label-line-height, 18px);font-weight:500;letter-spacing:.1px;white-space:normal;overflow-wrap:anywhere;overflow:hidden}.ars-nav-submenu__trailing{flex:none;font-size:11px;line-height:16px;font-weight:500;letter-spacing:.5px;opacity:.8}@media(prefers-reduced-motion:reduce){:host{--_dur-short: 0ms;--_dur: 0ms;--_dur-long: 0ms;--_icon-hover-scale: 1;--_icon-press-scale: 1}:host([data-indicator=wide]) .ars-nav__item:before,:host([data-indicator=compact]) .ars-nav__icon-box:before{transform:none}.ars-nav-submenu{--_dur-short: 0ms;--_dur: 0ms;--_dur-long: 0ms;--_icon-hover-scale: 1;--_icon-press-scale: 1}}@media(forced-colors:active){:host([data-indicator=compact]) .ars-nav__item--selected .ars-nav__icon-box:before,:host([data-indicator=wide]) .ars-nav__item--selected:before{background:Highlight;forced-color-adjust:none}.ars-nav__item:focus-visible{outline:3px solid CanvasText}}\n"],
|
|
1047
1072
|
dependencies: [
|
|
1048
1073
|
{
|
|
1049
1074
|
kind: "ngmodule",
|
|
@@ -1137,7 +1162,7 @@ var NavigationBarComponent = class NavigationBarComponent {
|
|
|
1137
1162
|
};
|
|
1138
1163
|
i0.ɵɵngDeclareClassMetadata({
|
|
1139
1164
|
minVersion: "12.0.0",
|
|
1140
|
-
version: "22.2.
|
|
1165
|
+
version: "22.2.2",
|
|
1141
1166
|
ngImport: i0,
|
|
1142
1167
|
type: NavigationBarComponent,
|
|
1143
1168
|
decorators: [{
|
|
@@ -1160,9 +1185,12 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
1160
1185
|
"[attr.data-position]": "position()",
|
|
1161
1186
|
"[attr.data-labels]": "resolvedLabelVisibility()",
|
|
1162
1187
|
"[attr.data-indicator]": "indicatorMode()",
|
|
1188
|
+
"[attr.data-theme]": "isDark() ? \"dark\" : \"light\"",
|
|
1163
1189
|
"[class.ars-navigation--open]": "isOverlayOpen()",
|
|
1164
1190
|
"[class.ars-navigation--elevated]": "elevated()",
|
|
1165
1191
|
"[class.ars-navigation--bordered]": "bordered()",
|
|
1192
|
+
"[class.ars-navigation--separator]": "bottomSeparator()",
|
|
1193
|
+
"[class.ars-navigation--transparent]": "bottomTransparent()",
|
|
1166
1194
|
"[class.ars-navigation--dense]": "dense()",
|
|
1167
1195
|
"[class.ars-navigation--hidden]": "isHidden()",
|
|
1168
1196
|
"[style.--ars-navigation-width]": "widthStyle()",
|
|
@@ -1170,8 +1198,8 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
1170
1198
|
"[style.--ars-navigation-min-width]": "minWidthStyle()",
|
|
1171
1199
|
"[style.--ars-navigation-max-width]": "maxWidthStyle()"
|
|
1172
1200
|
},
|
|
1173
|
-
template: "@if (isModal() && scrim()) {\n <div class=\"ars-nav__scrim\" aria-hidden=\"true\" (click)=\"onScrimClick()\"></div>\n}\n\n<nav class=\"ars-nav\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.role]=\"isModal() ? 'dialog' : undefined\"\n [attr.aria-modal]=\"isModal() ? 'true' : undefined\"\n [attr.inert]=\"isHidden() ? '' : undefined\"\n [cdkTrapFocus]=\"isOverlayOpen()\"\n [cdkTrapFocusAutoCapture]=\"isOverlayOpen()\"\n (keydown)=\"onKeydown($event)\">\n\n @let labels = resolvedLabelVisibility();\n @let stacked = resolvedLayout() === 'vertical';\n @let wide = isExpanded();\n @let active = activeId();\n @let highlighted = highlightedIds();\n @let ancestors = ancestorIds();\n @let openIds = expandedSet();\n @let popupOpenId = popupItem()?.item.id;\n\n @if (showsHeader()) {\n <div class=\"ars-nav__header\">\n @if (showMenuButton()) {\n <button type=\"button\"\n class=\"ars-nav__menu\"\n [attr.aria-label]=\"menuAriaLabel()\"\n (click)=\"onMenuClick()\">\n <mat-icon aria-hidden=\"true\">{{ menuIcon() }}</mat-icon>\n </button>\n }\n @if (wide) {\n @if (headline(); as headlineText) {\n <h2 class=\"ars-nav__headline\">{{ headlineText }}</h2>\n }\n }\n </div>\n }\n\n <div class=\"ars-nav__leading\"><ng-content select=\"[navHeader]\" /></div>\n <div class=\"ars-nav__fab\"><ng-content select=\"[navFab]\" /></div>\n\n @for (group of visibleGroups(); track group.align) {\n <div class=\"ars-nav__items\" [class.ars-nav__items--bottom]=\"group.align === 'bottom'\">\n @for (block of group.sections; track block.section.id) {\n\n @if (wide && block.section.label) {\n <h3 class=\"ars-nav__section-headline\">{{ block.section.label }}</h3>\n }\n\n @for (r of block.items; track r.item.id) {\n @let current = r.item.id === active;\n <!-- Clicking a parent opens and closes its branch, or its floating panel, and\n never navigates. It can still BE the active destination, but only when it\n owns a route of its own (`r.href`): that is a page the user can reach, so\n the row is allowed to look selected. A parent without a route is never\n selected — where it used to stand in for a destination it hides it now\n carries `ancestor` instead: the trail, not the selection. -->\n @let ancestor = ancestors.has(r.item.id);\n <!-- Stacked layouts get the short form when the destination declares one, or\n no label at all on `'none'`; `tooltip` and `ariaLabel` stay on the full\n label either way, so the name is still one hover — or one screen reader —\n away. -->\n @let stackedLabelHidden = stacked && r.item.labelVertical === 'none';\n @let displayLabel = stacked ? (r.item.labelVertical ?? r.item.label) : r.item.label;\n @let selected = highlighted.has(r.item.id) && (!r.hasChildren || !!r.href);\n <!-- `stackedLabelHidden` counts as \"no label on screen\": that is what turns the\n tooltip back on, which is the only place the name is left to be read. -->\n @let labelVisible = !r.iconOnly && !stackedLabelHidden\n && (labels === 'labeled' || (labels === 'selected' && (selected || ancestor)));\n @let branchOpen = r.hasChildren && openIds.has(r.item.id);\n @let hideIcon = wide && r.depth > 0 && !childIcons();\n <!-- In the compact variants the children live in a floating panel, so an\n ancestor row IS how the active destination shows on screen: it takes the\n selected look whole, icon variant included, exactly like a destination\n without children. In the expanded ones the active row is visible on its\n own and the ancestor stays the quieter trail. -->\n @let activeLook = selected || (!wide && ancestor);\n @let svg = activeLook ? r.svgOn : r.svgOff;\n @let image = activeLook ? r.imageOn : r.imageOff;\n @let ligature = activeLook ? r.iconOn : r.iconOff;\n\n <!--\n The anchor and the button branches duplicate the inner markup on purpose:\n an `ng-template` + `ngTemplateOutlet` would allocate one extra embedded\n view per destination and lose the typed template context.\n -->\n @if (r.href && !r.hasChildren) {\n <a #navItem\n class=\"ars-nav__item\"\n [class.ars-nav__item--selected]=\"selected\"\n [class.ars-nav__item--icon-stacked]=\"stackedLabelHidden\"\n [class.ars-nav__item--greyed]=\"r.item.greyed\"\n [class.ars-nav__item--disabled]=\"r.item.disabled\"\n [class.ars-nav__item--no-icon]=\"hideIcon\"\n [attr.data-depth]=\"r.depth\"\n [attr.href]=\"r.item.disabled ? undefined : r.href\"\n [attr.target]=\"r.item.target\"\n [attr.rel]=\"r.item.target === '_blank' ? 'noopener noreferrer' : undefined\"\n [attr.aria-label]=\"r.ariaLabel\"\n [attr.aria-current]=\"current ? 'page' : undefined\"\n [attr.aria-disabled]=\"r.item.disabled ? 'true' : undefined\"\n [attr.tabindex]=\"r.item.disabled ? -1 : 0\"\n [attr.data-nav-id]=\"r.item.id\"\n [matTooltip]=\"r.tooltip\"\n [matTooltipDisabled]=\"!tooltips() || labelVisible\"\n [matTooltipPosition]=\"tooltipPosition()\"\n (click)=\"select(r, $event)\">\n @if (!hideIcon) {\n <span class=\"ars-nav__icon-box\">\n @if (svg; as svgName) {\n <mat-icon class=\"ars-nav__icon\" [svgIcon]=\"svgName\" aria-hidden=\"true\" />\n } @else if (r.spriteStyle; as spriteStyle) {\n <span class=\"ars-nav__icon ars-nav__icon--sprite\" [style]=\"spriteStyle\" aria-hidden=\"true\"></span>\n } @else if (image; as imageUrl) {\n <img class=\"ars-nav__icon ars-nav__icon--image\" [src]=\"imageUrl\" alt=\"\" loading=\"lazy\" decoding=\"async\" />\n } @else if (ligature; as ligatureName) {\n <mat-icon class=\"ars-nav__icon\" aria-hidden=\"true\">{{ ligatureName }}</mat-icon>\n }\n @if (r.hasBadge) {\n <span class=\"ars-nav__badge\"\n [class.ars-nav__badge--dot]=\"!r.badgeText\"\n [style.background-color]=\"r.item.badge?.color\"\n [attr.aria-label]=\"r.item.badge?.ariaLabel\">{{ r.badgeText }}</span>\n }\n </span>\n }\n @if (labels !== 'unlabeled' && !r.iconOnly && !stackedLabelHidden) {\n <span class=\"ars-nav__label\" [class.ars-nav__label--hidden]=\"!labelVisible\">{{ displayLabel }}</span>\n }\n @if (wide && r.item.trailing) {\n <span class=\"ars-nav__trailing\">{{ r.item.trailing }}</span>\n }\n <!-- The badge of an icon-less child has no icon box to sit on: it moves\n to the trailing edge, exactly as the submenu panel renders it. -->\n @if (hideIcon && r.hasBadge) {\n <span class=\"ars-nav__badge ars-nav__badge--inline\"\n [class.ars-nav__badge--dot]=\"!r.badgeText\"\n [style.background-color]=\"r.item.badge?.color\"\n [attr.aria-label]=\"r.item.badge?.ariaLabel\">{{ r.badgeText }}</span>\n }\n </a>\n } @else {\n <button #navItem\n type=\"button\"\n class=\"ars-nav__item\"\n [class.ars-nav__item--selected]=\"selected\"\n [class.ars-nav__item--ancestor]=\"ancestor\"\n [class.ars-nav__item--icon-stacked]=\"stackedLabelHidden\"\n [class.ars-nav__item--greyed]=\"r.item.greyed\"\n [class.ars-nav__item--disabled]=\"r.item.disabled\"\n [class.ars-nav__item--no-icon]=\"hideIcon\"\n [class.ars-nav__item--parent]=\"r.hasChildren\"\n [class.ars-nav__item--icon-only]=\"r.iconOnly\"\n [attr.data-depth]=\"r.depth\"\n [disabled]=\"!!r.item.disabled\"\n [attr.aria-label]=\"r.ariaLabel\"\n [attr.aria-current]=\"current ? 'page' : undefined\"\n [attr.aria-expanded]=\"r.hasChildren ? (wide ? branchOpen : popupOpenId === r.item.id) : undefined\"\n [attr.aria-haspopup]=\"r.hasChildren && !wide ? 'menu' : undefined\"\n [attr.data-nav-id]=\"r.item.id\"\n [matTooltip]=\"r.tooltip\"\n [matTooltipDisabled]=\"!tooltips() || labelVisible\"\n [matTooltipPosition]=\"tooltipPosition()\"\n (click)=\"select(r, $event)\">\n @if (!hideIcon) {\n <span class=\"ars-nav__icon-box\">\n @if (svg; as svgName) {\n <mat-icon class=\"ars-nav__icon\" [svgIcon]=\"svgName\" aria-hidden=\"true\" />\n } @else if (r.spriteStyle; as spriteStyle) {\n <span class=\"ars-nav__icon ars-nav__icon--sprite\" [style]=\"spriteStyle\" aria-hidden=\"true\"></span>\n } @else if (image; as imageUrl) {\n <img class=\"ars-nav__icon ars-nav__icon--image\" [src]=\"imageUrl\" alt=\"\" loading=\"lazy\" decoding=\"async\" />\n } @else if (ligature; as ligatureName) {\n <mat-icon class=\"ars-nav__icon\" aria-hidden=\"true\">{{ ligatureName }}</mat-icon>\n }\n @if (r.hasBadge) {\n <span class=\"ars-nav__badge\"\n [class.ars-nav__badge--dot]=\"!r.badgeText\"\n [style.background-color]=\"r.item.badge?.color\"\n [attr.aria-label]=\"r.item.badge?.ariaLabel\">{{ r.badgeText }}</span>\n }\n </span>\n }\n @if (labels !== 'unlabeled' && !r.iconOnly && !stackedLabelHidden) {\n <span class=\"ars-nav__label\" [class.ars-nav__label--hidden]=\"!labelVisible\">{{ displayLabel }}</span>\n }\n @if (wide && r.item.trailing) {\n <span class=\"ars-nav__trailing\">{{ r.item.trailing }}</span>\n }\n <!-- The badge of an icon-less child has no icon box to sit on: it moves\n to the trailing edge, exactly as the submenu panel renders it. -->\n @if (hideIcon && r.hasBadge) {\n <span class=\"ars-nav__badge ars-nav__badge--inline\"\n [class.ars-nav__badge--dot]=\"!r.badgeText\"\n [style.background-color]=\"r.item.badge?.color\"\n [attr.aria-label]=\"r.item.badge?.ariaLabel\">{{ r.badgeText }}</span>\n }\n @if (r.hasChildren && wide) {\n <mat-icon class=\"ars-nav__chevron\"\n [class.ars-nav__chevron--open]=\"branchOpen\"\n aria-hidden=\"true\">{{ expandIcon() }}</mat-icon>\n }\n </button>\n }\n }\n\n @if (wide && block.section.divider && !$last) {\n <hr class=\"ars-nav__divider\" aria-hidden=\"true\" />\n }\n }\n </div>\n }\n\n <div class=\"ars-nav__footer\"><ng-content select=\"[navFooter]\" /></div>\n</nav>\n\n<!--\n One overlay for the whole component: the overflow entry and every parent\n destination of the compact variants reuse it, instead of allocating a menu\n instance per destination.\n-->\n<ng-template cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"popupOrigin()\"\n [cdkConnectedOverlayOpen]=\"isPopupOpen()\"\n [cdkConnectedOverlayPositions]=\"popupPositions()\"\n [cdkConnectedOverlayPush]=\"true\"\n (overlayOutsideClick)=\"closePopup()\"\n (detach)=\"closePopup()\">\n <div class=\"ars-nav-submenu\"\n role=\"menu\"\n [attr.aria-label]=\"popupItem()?.ariaLabel\"\n [cdkTrapFocus]=\"true\"\n [cdkTrapFocusAutoCapture]=\"true\"\n (keydown)=\"onKeydown($event)\">\n @for (entry of popupEntries(); track entry.key) {\n @if (entry.render; as c) {\n @let childSelected = c.item.id === activeId();\n @let childSvg = childSelected ? c.svgOn : c.svgOff;\n @let childImage = childSelected ? c.imageOn : c.imageOff;\n @let childLigature = childSelected ? c.iconOn : c.iconOff;\n @if (c.href) {\n <a #panelItem\n class=\"ars-nav-submenu__item\"\n role=\"menuitem\"\n [class.ars-nav-submenu__item--grouped]=\"entry.grouped\"\n [class.ars-nav-submenu__item--selected]=\"childSelected\"\n [class.ars-nav-submenu__item--greyed]=\"c.item.greyed\"\n [attr.href]=\"c.item.disabled ? undefined : c.href\"\n [attr.target]=\"c.item.target\"\n [attr.rel]=\"c.item.target === '_blank' ? 'noopener noreferrer' : undefined\"\n [attr.aria-disabled]=\"c.item.disabled ? 'true' : undefined\"\n [attr.aria-current]=\"childSelected ? 'page' : undefined\"\n (click)=\"select(c, $event)\">\n @if (childSvg; as svgName) {\n <mat-icon class=\"ars-nav__icon\" [svgIcon]=\"svgName\" aria-hidden=\"true\" />\n } @else if (c.spriteStyle; as spriteStyle) {\n <span class=\"ars-nav__icon ars-nav__icon--sprite\" [style]=\"spriteStyle\" aria-hidden=\"true\"></span>\n } @else if (childImage; as imageUrl) {\n <img class=\"ars-nav__icon ars-nav__icon--image\" [src]=\"imageUrl\" alt=\"\" loading=\"lazy\" decoding=\"async\" />\n } @else if (childLigature; as ligatureName) {\n <mat-icon class=\"ars-nav__icon\" aria-hidden=\"true\">{{ ligatureName }}</mat-icon>\n }\n <span class=\"ars-nav-submenu__label\">{{ c.item.label }}</span>\n @if (c.badgeText) {\n <span class=\"ars-nav-submenu__trailing\">{{ c.badgeText }}</span>\n } @else if (c.item.trailing) {\n <span class=\"ars-nav-submenu__trailing\">{{ c.item.trailing }}</span>\n }\n </a>\n } @else {\n <button #panelItem\n type=\"button\"\n class=\"ars-nav-submenu__item\"\n role=\"menuitem\"\n [class.ars-nav-submenu__item--grouped]=\"entry.grouped\"\n [class.ars-nav-submenu__item--selected]=\"childSelected\"\n [class.ars-nav-submenu__item--greyed]=\"c.item.greyed\"\n [disabled]=\"!!c.item.disabled\"\n [attr.aria-current]=\"childSelected ? 'page' : undefined\"\n (click)=\"select(c, $event)\">\n @if (childSvg; as svgName) {\n <mat-icon class=\"ars-nav__icon\" [svgIcon]=\"svgName\" aria-hidden=\"true\" />\n } @else if (c.spriteStyle; as spriteStyle) {\n <span class=\"ars-nav__icon ars-nav__icon--sprite\" [style]=\"spriteStyle\" aria-hidden=\"true\"></span>\n } @else if (childImage; as imageUrl) {\n <img class=\"ars-nav__icon ars-nav__icon--image\" [src]=\"imageUrl\" alt=\"\" loading=\"lazy\" decoding=\"async\" />\n } @else if (childLigature; as ligatureName) {\n <mat-icon class=\"ars-nav__icon\" aria-hidden=\"true\">{{ ligatureName }}</mat-icon>\n }\n <span class=\"ars-nav-submenu__label\">{{ c.item.label }}</span>\n @if (c.badgeText) {\n <span class=\"ars-nav-submenu__trailing\">{{ c.badgeText }}</span>\n } @else if (c.item.trailing) {\n <span class=\"ars-nav-submenu__trailing\">{{ c.item.trailing }}</span>\n }\n </button>\n }\n } @else {\n <div class=\"ars-nav-submenu__heading\" role=\"presentation\">{{ entry.label }}</div>\n }\n }\n </div>\n</ng-template>\n",
|
|
1174
|
-
styles: [":host{--_container: var(--ars-navigation-container-color, var(--mat-sys-surface-container, #eff1ef));--_indicator: var(--ars-navigation-indicator-color, var(--mat-sys-secondary-container, #cce8e2));--_icon: var(--ars-navigation-icon-color, var(--mat-sys-on-surface-variant, #3f4947));--_icon-active: var(--ars-navigation-active-icon-color, var(--mat-sys-on-secondary-container, #0b1f1c));--_label: var(--ars-navigation-label-color, var(--mat-sys-on-surface-variant, #3f4947));--_label-active: var(--ars-navigation-active-label-color, var(--ars-color-secondary, #4a635f));--_headline: var(--ars-navigation-headline-color, var(--mat-sys-on-surface-variant, #3f4947));--_state: var(--ars-navigation-state-layer-color, var(--mat-sys-on-surface, #191c1b));--_badge: var(--ars-navigation-badge-color, var(--ars-color-error, #ff5449));--_badge-text: var(--ars-navigation-badge-text-color, #ffffff);--_divider: var(--ars-navigation-divider-color, var(--ars-color-divider, #757d87));--_scrim: var(--ars-navigation-scrim-color, rgba(0, 0, 0, .4));--_focus: var(--ars-navigation-focus-color, var(--ars-color-primary, #00a293));--_easing: var(--ars-navigation-easing, cubic-bezier(.2, 0, 0, 1));--_dur-short: var(--ars-navigation-duration-short, .15s);--_dur: var(--ars-navigation-duration, .25s);--_dur-long: var(--ars-navigation-duration-long, .4s);--_icon-hover-scale: var(--ars-navigation-icon-hover-scale, 1.12);--_icon-press-scale: var(--ars-navigation-icon-press-scale, .92);--_hover-opacity: .08;--_focus-opacity: .1;--_press-opacity: .1;--_row-height: var(--ars-navigation-item-height, 56px);--_row-gap: var(--ars-navigation-item-gap, 4px);--_row-font-size: var(--ars-navigation-label-font-size, 14px);--_child-height: var(--ars-navigation-child-height, 48px);--_child-font-size: var(--ars-navigation-child-font-size, 13px);--_section-padding: 18px 16px 8px;--_row-pad-start: var(--ars-navigation-item-padding-start, 24px);--_row-pad-end: var(--ars-navigation-item-padding-end, 24px);--_label-lines: var(--ars-navigation-label-lines, 2);--_rtl: 1;display:block;box-sizing:border-box;color:var(--_label);-webkit-tap-highlight-color:transparent}:host-context([dir=rtl]){--_rtl: -1}:host(.ars-navigation--dense){--_row-height: var(--ars-navigation-dense-item-height, 44px);--_child-height: var(--ars-navigation-dense-child-height, 36px);--_section-padding: 12px 16px 4px}:host(.ars-navigation--dense){--_row-pad-start: var(--ars-navigation-dense-item-padding-start, 12px);--_row-pad-end: var(--ars-navigation-dense-item-padding-end, 12px)}.ars-nav{box-sizing:border-box;display:flex;position:relative;background:var(--_container);color:var(--_label);overflow:hidden}.ars-nav__items{box-sizing:border-box;display:flex;min-height:0;min-width:0;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--_state) 25%,transparent) transparent}.ars-nav__header{box-sizing:border-box;display:flex;align-items:center;flex:none;gap:12px}.ars-nav__leading,.ars-nav__fab,.ars-nav__footer{box-sizing:border-box;flex:none}.ars-nav__leading:empty,.ars-nav__fab:empty,.ars-nav__footer:empty{display:none}.ars-nav__headline{margin:0;padding:0 16px;font-size:22px;line-height:28px;font-weight:400;color:var(--_headline);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ars-nav__section-headline{margin:0;padding:var(--_section-padding, 18px 16px 8px);font-size:14px;line-height:20px;font-weight:500;letter-spacing:.1px;color:var(--_headline);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ars-nav__divider{flex:none;margin:8px 16px;border:0;border-top:1px solid var(--_divider);opacity:.4}.ars-nav__menu{display:inline-flex;align-items:center;justify-content:center;flex:none;width:48px;height:48px;margin:0;padding:0;border:0;border-radius:50%;background:transparent;color:var(--_icon);cursor:pointer;transition:background-color var(--_dur-short) var(--_easing)}.ars-nav__menu:hover{background:color-mix(in srgb,var(--_state) 8%,transparent)}.ars-nav__menu:focus-visible{outline:3px solid var(--_focus);outline-offset:2px}.ars-nav__item{box-sizing:border-box;position:relative;isolation:isolate;display:flex;align-items:center;flex:none;margin:0;border:0;background:transparent;color:var(--_label);font:inherit;text-align:start;text-decoration:none;cursor:pointer;-webkit-user-select:none;user-select:none;appearance:none;-webkit-tap-highlight-color:transparent}.ars-nav__item:focus-visible{outline:3px solid var(--_focus);outline-offset:-3px;border-radius:16px}.ars-nav__item--disabled,.ars-nav__item:disabled{cursor:default;opacity:.38;pointer-events:none}.ars-nav__icon-box{box-sizing:border-box;position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;width:24px;height:24px;color:var(--_icon);transition:color var(--_dur) var(--_easing)}.ars-nav__icon{position:relative;z-index:1;width:24px;height:24px;font-size:24px;line-height:24px;font-variation-settings:\"FILL\" 0;transform:scale(1);transform-origin:center;transition:font-variation-settings var(--_dur, .25s) var(--_easing, cubic-bezier(.2, 0, 0, 1)),transform var(--_dur, .25s) var(--_easing, cubic-bezier(.2, 0, 0, 1))}.ars-nav__label{position:relative;z-index:1;min-width:0;font:var(--mat-sys-label-large, 500 14px/20px Roboto, sans-serif);letter-spacing:var(--mat-sys-label-large-tracking, .1px);color:var(--_label);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color var(--_dur) var(--_easing),opacity var(--_dur) var(--_easing),max-height var(--_dur) var(--_easing),margin var(--_dur) var(--_easing)}.ars-nav__label--hidden{opacity:0;max-height:0;margin:0!important;pointer-events:none}.ars-nav__trailing{position:relative;z-index:1;margin-inline-start:auto;padding-inline-start:12px;font-size:11px;line-height:16px;font-weight:500;letter-spacing:.5px;color:var(--_label);white-space:nowrap}.ars-nav__badge{position:absolute;z-index:2;top:-6px;inset-inline-start:12px;box-sizing:border-box;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--_badge);color:var(--_badge-text);font-size:11px;line-height:16px;font-weight:500;letter-spacing:.5px;text-align:center;white-space:nowrap}.ars-nav__badge--dot{top:-1px;inset-inline-start:16px;width:6px;min-width:6px;height:6px;padding:0;border-radius:3px}.ars-nav__badge--inline{position:static;z-index:1;flex:none;margin-inline-start:8px}.ars-nav__badge--inline.ars-nav__badge--dot{margin-inline-start:12px}:host([data-indicator=compact]) .ars-nav__icon-box:before{content:\"\";position:absolute;z-index:0;background:var(--_indicator);opacity:0;transform:scaleX(.55);transition:opacity var(--_dur) var(--_easing),transform var(--_dur-long) var(--_easing);pointer-events:none;inset:50% auto auto 50%;width:56px;height:32px;margin:-16px 0 0 -28px;border-radius:16px}:host([data-indicator=compact]) .ars-nav__icon-box:after{content:\"\";position:absolute;z-index:0;background:var(--_state);opacity:0;transition:opacity var(--_dur-short) var(--_easing);pointer-events:none;inset:50% auto auto 50%;width:56px;height:32px;margin:-16px 0 0 -28px;border-radius:16px}:host([data-indicator=compact]) .ars-nav__item--icon-stacked .ars-nav__icon-box:before,:host([data-indicator=compact]) .ars-nav__item--icon-stacked .ars-nav__icon-box:after{width:var(--ars-navigation-icon-button-size, 48px);height:var(--ars-navigation-icon-button-size, 48px);margin:calc(var(--ars-navigation-icon-button-size, 48px) / -2) 0 0 calc(var(--ars-navigation-icon-button-size, 48px) / -2);border-radius:50%}:host([data-indicator=compact]) .ars-nav__item--selected .ars-nav__icon-box:before{opacity:1;transform:scaleX(1)}:host([data-indicator=compact]) .ars-nav__item:hover .ars-nav__icon-box:after{opacity:var(--_hover-opacity)}:host([data-indicator=compact]) .ars-nav__item:focus-visible .ars-nav__icon-box:after{opacity:var(--_focus-opacity)}:host([data-indicator=compact]) .ars-nav__item:active .ars-nav__icon-box:after{opacity:var(--_press-opacity)}:host([data-indicator=wide]) .ars-nav__item:before{content:\"\";position:absolute;z-index:0;background:var(--_indicator);opacity:0;transform:scaleX(.55);transition:opacity var(--_dur) var(--_easing),transform var(--_dur-long) var(--_easing);pointer-events:none;inset:0;border-radius:28px}:host([data-indicator=wide]) .ars-nav__item:after{content:\"\";position:absolute;z-index:0;background:var(--_state);opacity:0;transition:opacity var(--_dur-short) var(--_easing);pointer-events:none;inset:0;border-radius:28px}:host([data-indicator=wide]) .ars-nav__item--selected:before{opacity:1;transform:scaleX(1)}:host([data-indicator=wide]) .ars-nav__item:hover:after{opacity:var(--_hover-opacity)}:host([data-indicator=wide]) .ars-nav__item:focus-visible:after{opacity:var(--_focus-opacity)}:host([data-indicator=wide]) .ars-nav__item:active:after{opacity:var(--_press-opacity)}.ars-nav__item--ancestor:not(.ars-nav__item--selected) .ars-nav__label{color:var(--_label-active)}.ars-nav__item--ancestor:not(.ars-nav__item--selected) .ars-nav__icon-box,.ars-nav__item--ancestor:not(.ars-nav__item--selected) .ars-nav__chevron{color:var(--_label-active)}:host([data-variant=bar][data-indicator=compact]) .ars-nav__item--ancestor .ars-nav__icon-box:before,:host([data-variant=rail][data-indicator=compact]) .ars-nav__item--ancestor .ars-nav__icon-box:before{opacity:1;transform:scaleX(1)}:host([data-variant=bar]) .ars-nav__item--ancestor .ars-nav__icon-box,:host([data-variant=rail]) .ars-nav__item--ancestor .ars-nav__icon-box{color:var(--_icon-active)}:host([data-variant=bar]) .ars-nav__item--ancestor .ars-nav__icon,:host([data-variant=rail]) .ars-nav__item--ancestor .ars-nav__icon{font-variation-settings:\"FILL\" 1}.ars-nav__item--selected .ars-nav__icon-box{color:var(--_icon-active)}.ars-nav__item--selected .ars-nav__icon{font-variation-settings:\"FILL\" 1}.ars-nav__item--selected .ars-nav__label{color:var(--_label-active)}.ars-nav__item--greyed:not(.ars-nav__item--selected) .ars-nav__label,.ars-nav__item--greyed:not(.ars-nav__item--selected) .ars-nav__icon-box,.ars-nav__item--greyed:not(.ars-nav__item--selected) .ars-nav__trailing,.ars-nav-submenu__item--greyed:not(.ars-nav-submenu__item--selected){opacity:var(--ars-navigation-greyed-opacity, .5);transition:opacity var(--_dur-short, .15s) var(--_easing, cubic-bezier(.2, 0, 0, 1))}.ars-nav__item--greyed:where(:hover,:focus-visible) .ars-nav__label,.ars-nav__item--greyed:where(:hover,:focus-visible) .ars-nav__icon-box,.ars-nav__item--greyed:where(:hover,:focus-visible) .ars-nav__trailing,.ars-nav-submenu__item--greyed:where(:hover,:focus-visible){opacity:1}:host([data-layout=vertical]) .ars-nav__item{flex-direction:column;justify-content:center}:host([data-layout=vertical]) .ars-nav__label{font:var(--mat-sys-label-medium, 500 12px/16px Roboto, sans-serif);letter-spacing:var(--mat-sys-label-medium-tracking, .5px);margin-top:var(--ars-navigation-vertical-gap, 0);padding-block:var(--ars-navigation-vertical-label-padding, 8px);max-width:100%;text-align:center;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--_label-lines, 2);line-clamp:var(--_label-lines, 2);white-space:normal;overflow-wrap:anywhere;line-height:var(--ars-navigation-vertical-label-line-height, 14px)}:host([data-layout=horizontal]) .ars-nav__item{flex-direction:row;justify-content:flex-start}:host([data-layout=horizontal]) .ars-nav__label{margin-inline-start:4px}:host .ars-nav__item--selected .ars-nav__label,:host .ars-nav__item--ancestor .ars-nav__label{font-weight:var(--ars-navigation-selected-font-weight, 700)}:host([data-variant=bar]) .ars-nav__item--selected .ars-nav__label,:host([data-variant=bar]) .ars-nav__item--ancestor .ars-nav__label,:host([data-variant=rail]) .ars-nav__item--selected .ars-nav__label,:host([data-variant=rail]) .ars-nav__item--ancestor .ars-nav__label{font-weight:var(--ars-navigation-compact-selected-font-weight, 500)}:host([data-variant=bar]){width:100%}:host([data-variant=bar]) .ars-nav{flex-direction:row;align-items:center;justify-content:space-around;width:100%;height:var(--ars-navigation-bar-height, 80px);padding:0 8px}:host([data-variant=bar]) .ars-nav__header,:host([data-variant=bar]) .ars-nav__leading,:host([data-variant=bar]) .ars-nav__fab,:host([data-variant=bar]) .ars-nav__footer,:host([data-variant=bar]) .ars-nav__section-headline,:host([data-variant=bar]) .ars-nav__divider,:host([data-variant=bar]) .ars-nav__trailing{display:none}:host([data-variant=bar]) .ars-nav__items{display:contents}:host([data-variant=bar]) .ars-nav__item{flex:1 1 0;min-width:0;height:100%}:host([data-variant=bar][data-layout=horizontal]) .ars-nav__item{justify-content:center;max-width:var(--ars-navigation-item-max-width, 168px);padding:0 12px}:host([data-variant=bar][data-layout=vertical]) .ars-nav__item{justify-content:flex-start;padding-block-start:var(--ars-navigation-bar-item-padding-top, 12px)}:host([data-variant=bar][data-indicator=wide]) .ars-nav__item:before,:host([data-variant=bar][data-indicator=wide]) .ars-nav__item:after{inset:12px 0}:host([data-variant=rail]){height:100%}:host([data-variant=rail]) .ars-nav{flex-direction:column;align-items:center;width:var(--ars-navigation-rail-width, var(--ars-navigation-width, 96px));height:100%;padding:var(--ars-navigation-rail-top-padding, 20px) 0 8px}:host([data-variant=rail]) .ars-nav__header{flex-direction:column;margin-bottom:40px}:host([data-variant=rail]) .ars-nav__headline,:host([data-variant=rail]) .ars-nav__section-headline,:host([data-variant=rail]) .ars-nav__divider,:host([data-variant=rail]) .ars-nav__trailing{display:none}:host([data-variant=rail]) .ars-nav__fab{margin-bottom:40px}:host([data-variant=rail]) .ars-nav__items{flex:1 1 auto;flex-direction:column;align-items:center;gap:var(--ars-navigation-rail-item-gap, 8px);width:100%;overflow-y:auto;overscroll-behavior:contain}:host([data-variant=rail]) .ars-nav__item{justify-content:center;width:100%;min-height:var(--ars-navigation-rail-item-height, 64px);padding:0 4px}:host([data-variant=rail-expanded]),:host([data-variant=drawer]),:host([data-variant=modal]){height:100%}:host([data-variant=rail-expanded]) .ars-nav,:host([data-variant=drawer]) .ars-nav,:host([data-variant=modal]) .ars-nav{flex-direction:column;align-items:stretch;height:100%;padding:12px 0}:host([data-variant=rail-expanded]) .ars-nav__header,:host([data-variant=drawer]) .ars-nav__header,:host([data-variant=modal]) .ars-nav__header{padding:4px 8px 8px}:host([data-variant=rail-expanded]) .ars-nav__items,:host([data-variant=drawer]) .ars-nav__items,:host([data-variant=modal]) .ars-nav__items{flex:1 1 auto;flex-direction:column;gap:var(--_row-gap, 4px);overflow-y:auto;overscroll-behavior:contain}:host([data-variant=rail-expanded]) .ars-nav__item,:host([data-variant=drawer]) .ars-nav__item,:host([data-variant=modal]) .ars-nav__item{min-height:var(--_row-height, 56px);padding-block:0;padding-inline:calc(var(--_row-pad-start, 24px) + var(--_depth-indent, 0px)) var(--_row-pad-end, 24px);margin-block:0;margin-inline:var(--ars-navigation-item-inset, 20px)}:host(.ars-navigation--dense) .ars-nav__item{padding-inline:calc(var(--_row-pad-start, 12px) + var(--_depth-indent, 0px)) var(--_row-pad-end, 12px)}:host([data-variant=rail-expanded]) .ars-nav__item[data-depth]:not([data-depth=\"0\"])+.ars-nav__item[data-depth=\"0\"],:host([data-variant=drawer]) .ars-nav__item[data-depth]:not([data-depth=\"0\"])+.ars-nav__item[data-depth=\"0\"],:host([data-variant=modal]) .ars-nav__item[data-depth]:not([data-depth=\"0\"])+.ars-nav__item[data-depth=\"0\"]{margin-block-start:var(--ars-navigation-branch-end-gap, 12px)}:host([data-variant=rail-expanded]) .ars-nav__item[data-depth]:not([data-depth=\"0\"]):last-child,:host([data-variant=drawer]) .ars-nav__item[data-depth]:not([data-depth=\"0\"]):last-child,:host([data-variant=modal]) .ars-nav__item[data-depth]:not([data-depth=\"0\"]):last-child{margin-block-end:var(--ars-navigation-branch-end-gap, 12px)}:host([data-variant=rail-expanded]) .ars-nav__icon-box,:host([data-variant=drawer]) .ars-nav__icon-box,:host([data-variant=modal]) .ars-nav__icon-box{margin-inline-end:12px}:host([data-variant=rail-expanded]) .ars-nav__item[data-depth]:not([data-depth=\"0\"]),:host([data-variant=drawer]) .ars-nav__item[data-depth]:not([data-depth=\"0\"]),:host([data-variant=modal]) .ars-nav__item[data-depth]:not([data-depth=\"0\"]){min-height:var(--_child-height, 48px)}:host([data-variant=rail-expanded]) .ars-nav__item[data-depth]:not([data-depth=\"0\"]) .ars-nav__label,:host([data-variant=drawer]) .ars-nav__item[data-depth]:not([data-depth=\"0\"]) .ars-nav__label,:host([data-variant=modal]) .ars-nav__item[data-depth]:not([data-depth=\"0\"]) .ars-nav__label{font-size:var(--_child-font-size, 13px)}:host([data-variant=rail-expanded]) .ars-nav__label,:host([data-variant=drawer]) .ars-nav__label,:host([data-variant=modal]) .ars-nav__label{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--_label-lines, 2);line-clamp:var(--_label-lines, 2);white-space:normal;overflow-wrap:anywhere;line-height:var(--ars-navigation-label-line-height, 18px);flex:1 1 auto;margin-inline-start:0;font-size:var(--_row-font-size, 14px)}:host([data-variant=rail-expanded]) .ars-nav{width:var(--ars-navigation-width, 220px);min-width:var(--ars-navigation-min-width, 0);max-width:var(--ars-navigation-max-width, 100%)}:host([data-variant=drawer]) .ars-nav,:host([data-variant=modal]) .ars-nav{width:var(--ars-navigation-width, 360px);min-width:var(--ars-navigation-min-width, 0);max-width:var(--ars-navigation-max-width, 100%)}:host([data-variant=modal]){position:fixed;inset:0;z-index:var(--ars-navigation-z-index, 1000);height:auto;pointer-events:none}:host([data-variant=modal]) .ars-nav{position:absolute;inset-block:0;inset-inline-start:0;pointer-events:auto;border-start-end-radius:16px;border-end-end-radius:16px;translate:calc(var(--_shift, 0%) * var(--_rtl)) 0;transition:translate var(--_dur-long) var(--_easing),visibility var(--_dur-long) var(--_easing)}:host([data-variant=modal][data-position=end]) .ars-nav{inset-inline-start:auto;inset-inline-end:0;border-radius:0;border-start-start-radius:16px;border-end-start-radius:16px}:host([data-variant=modal].ars-navigation--hidden) .ars-nav__scrim{opacity:0;pointer-events:none}:host([data-variant=modal].ars-navigation--hidden) .ars-nav{--_shift: -100%;visibility:hidden}:host([data-variant=modal][data-position=end].ars-navigation--hidden) .ars-nav{--_shift: 100%}.ars-nav__scrim{position:absolute;inset:0;background:var(--_scrim);opacity:1;pointer-events:auto;transition:opacity var(--_dur-long) var(--_easing)}:host(:not([data-variant=bar])) .ars-nav__items--bottom{flex:0 0 auto;margin-block-start:auto;overflow:visible}:host([data-align=center]) .ars-nav__items:not(.ars-nav__items--bottom){justify-content:safe center}:host([data-align=bottom]) .ars-nav__items:not(.ars-nav__items--bottom){justify-content:safe flex-end}:host(.ars-navigation--elevated) .ars-nav{box-shadow:0 1px 3px #0000004d,0 4px 8px 3px #00000026}:host(.ars-navigation--hidden):not([data-variant=modal]){display:none}.ars-nav__icon--image{object-fit:contain}.ars-nav__icon--sprite{display:inline-block;flex:none;width:var(--sp-size, 24px);height:var(--sp-size, 24px);background-image:var(--sp-url);background-repeat:no-repeat;background-size:var(--sp-sheet-x, auto) var(--sp-sheet-y, auto);background-position:calc(var(--sp-frame, var(--sp-normal, 0)) * var(--sp-step-x, 0px)) calc(var(--sp-frame, var(--sp-normal, 0)) * var(--sp-step-y, 0px))}.ars-nav__item:where(:hover,:focus-visible) .ars-nav__icon--sprite,.ars-nav-submenu__item:where(:hover,:focus-visible) .ars-nav__icon--sprite{--sp-frame: var(--sp-hover)}.ars-nav__item--selected .ars-nav__icon--sprite,.ars-nav-submenu__item--selected .ars-nav__icon--sprite,:host([data-variant=bar]) .ars-nav__item--ancestor .ars-nav__icon--sprite,:host([data-variant=rail]) .ars-nav__item--ancestor .ars-nav__icon--sprite{--sp-frame: var(--sp-active)}.ars-nav__item--disabled .ars-nav__icon--sprite,.ars-nav__item:where(:disabled) .ars-nav__icon--sprite,.ars-nav-submenu__item:where(:disabled,[aria-disabled=true]) .ars-nav__icon--sprite{--sp-frame: var(--sp-disabled)}.ars-nav__item:where(:hover,:focus-visible) .ars-nav__icon,.ars-nav-submenu__item:where(:hover,:focus-visible) .ars-nav__icon{transform:scale(var(--_icon-hover-scale, 1.12))}.ars-nav__item--selected .ars-nav__icon,.ars-nav-submenu__item--selected .ars-nav__icon{transform:scale(1)}.ars-nav__item:where(:active) .ars-nav__icon,.ars-nav-submenu__item:where(:active) .ars-nav__icon{transform:scale(var(--_icon-press-scale, .92));transition-duration:var(--_dur-short, .15s)}:host([data-variant=bar]) .ars-nav__item--icon-only{flex:0 0 auto;min-width:56px;max-width:72px}.ars-nav__chevron{position:relative;z-index:1;flex:none;margin-inline-start:8px;width:20px;height:20px;font-size:20px;line-height:20px;color:var(--_icon);rotate:0deg;opacity:0;transition:rotate var(--_dur) var(--_easing),opacity var(--_dur-short) var(--_easing)}.ars-nav__item:where(:hover,:focus-visible) .ars-nav__chevron{opacity:1}@media(hover:none){.ars-nav__chevron{opacity:1}}.ars-nav__chevron--open{rotate:180deg}.ars-nav__item[data-depth=\"1\"]{--_depth-indent: 24px}.ars-nav__item[data-depth=\"2\"]{--_depth-indent: 48px}.ars-nav__item[data-depth=\"3\"]{--_depth-indent: 72px}.ars-nav-submenu{--_easing: var(--ars-navigation-easing, cubic-bezier(.2, 0, 0, 1));--_dur-short: var(--ars-navigation-duration-short, .15s);--_dur: var(--ars-navigation-duration, .25s);--_dur-long: var(--ars-navigation-duration-long, .4s);--_icon-hover-scale: var(--ars-navigation-icon-hover-scale, 1.12);--_icon-press-scale: var(--ars-navigation-icon-press-scale, .92);--_state: var(--ars-navigation-state-layer-color, var(--mat-sys-on-surface, #191c1b));--_indicator: var(--ars-navigation-indicator-color, var(--mat-sys-secondary-container, #cce8e2));box-sizing:border-box;display:flex;flex-direction:column;gap:2px;min-width:200px;max-width:320px;max-height:60vh;padding:8px;border-radius:12px;background:var(--ars-navigation-menu-container-color, var(--ars-navigation-container-color, var(--mat-sys-surface-container-high, #e7e9e8)));color:var(--ars-navigation-label-color, var(--mat-sys-on-surface, #191c1b));box-shadow:0 1px 2px #0000004d,0 2px 6px 2px #00000026;overflow-y:auto;overscroll-behavior:contain}.ars-nav-submenu__item{box-sizing:border-box;display:flex;align-items:center;gap:12px;flex:none;min-height:48px;margin:0;padding:0 12px;border:0;border-radius:8px;background:transparent;color:inherit;font:inherit;text-align:start;text-decoration:none;cursor:pointer;appearance:none}.ars-nav-submenu__item--grouped{padding-inline-start:var(--ars-navigation-menu-group-indent, 24px)}.ars-nav-submenu__item:hover{background:color-mix(in srgb,currentColor 8%,transparent)}.ars-nav-submenu__item:focus-visible{outline:3px solid var(--ars-navigation-focus-color, var(--ars-color-primary, #00a293));outline-offset:-3px}.ars-nav-submenu__item--selected .ars-nav-submenu__label{font-weight:var(--ars-navigation-selected-font-weight, 700)}.ars-nav-submenu__item--selected{background:var(--_indicator);color:var(--ars-navigation-active-icon-color, var(--mat-sys-on-secondary-container, #0b1f1c))}.ars-nav-submenu__item--selected:where(:hover,:focus-visible){background:color-mix(in srgb,var(--_state) 8%,var(--_indicator))}.ars-nav-submenu__item:disabled,.ars-nav-submenu__item[aria-disabled=true]{opacity:.38;pointer-events:none}.ars-nav-submenu__heading{padding:12px 12px 4px;font-size:11px;line-height:16px;font-weight:500;letter-spacing:.5px;text-transform:uppercase;opacity:.7}.ars-nav-submenu__heading:first-child{padding-top:4px}.ars-nav-submenu__label{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--ars-navigation-label-lines, 2);line-clamp:var(--ars-navigation-label-lines, 2);flex:1 1 auto;min-width:0;padding-block:8px;font-size:14px;line-height:var(--ars-navigation-label-line-height, 18px);font-weight:500;letter-spacing:.1px;white-space:normal;overflow-wrap:anywhere;overflow:hidden}.ars-nav-submenu__trailing{flex:none;font-size:11px;line-height:16px;font-weight:500;letter-spacing:.5px;opacity:.8}@media(prefers-reduced-motion:reduce){:host{--_dur-short: 0ms;--_dur: 0ms;--_dur-long: 0ms;--_icon-hover-scale: 1;--_icon-press-scale: 1}:host([data-indicator=wide]) .ars-nav__item:before,:host([data-indicator=compact]) .ars-nav__icon-box:before{transform:none}.ars-nav-submenu{--_dur-short: 0ms;--_dur: 0ms;--_dur-long: 0ms;--_icon-hover-scale: 1;--_icon-press-scale: 1}}@media(forced-colors:active){:host([data-indicator=compact]) .ars-nav__item--selected .ars-nav__icon-box:before,:host([data-indicator=wide]) .ars-nav__item--selected:before{background:Highlight;forced-color-adjust:none}.ars-nav__item:focus-visible{outline:3px solid CanvasText}}\n"]
|
|
1201
|
+
template: "@if (isModal() && scrim()) {\n <div class=\"ars-nav__scrim\" aria-hidden=\"true\" (click)=\"onScrimClick()\"></div>\n}\n\n@if (bottomSeparator() && resolvedVariant() === 'bar') {\n <div class=\"ars-nav__separator\" aria-hidden=\"true\"></div>\n}\n\n<nav class=\"ars-nav\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.role]=\"isModal() ? 'dialog' : undefined\"\n [attr.aria-modal]=\"isModal() ? 'true' : undefined\"\n [attr.inert]=\"isHidden() ? '' : undefined\"\n [cdkTrapFocus]=\"isOverlayOpen()\"\n [cdkTrapFocusAutoCapture]=\"isOverlayOpen()\"\n (keydown)=\"onKeydown($event)\">\n\n @let labels = resolvedLabelVisibility();\n @let stacked = resolvedLayout() === 'vertical';\n @let wide = isExpanded();\n @let active = activeId();\n @let highlighted = highlightedIds();\n @let ancestors = ancestorIds();\n @let openIds = expandedSet();\n @let popupOpenId = popupItem()?.item.id;\n\n @if (showsHeader()) {\n <div class=\"ars-nav__header\">\n @if (showMenuButton()) {\n <button type=\"button\"\n class=\"ars-nav__menu\"\n [attr.aria-label]=\"menuAriaLabel()\"\n (click)=\"onMenuClick()\">\n <mat-icon aria-hidden=\"true\">{{ menuIcon() }}</mat-icon>\n </button>\n }\n @if (wide) {\n @if (headline(); as headlineText) {\n <h2 class=\"ars-nav__headline\">{{ headlineText }}</h2>\n }\n }\n </div>\n }\n\n <div class=\"ars-nav__leading\"><ng-content select=\"[navHeader]\" /></div>\n <div class=\"ars-nav__fab\"><ng-content select=\"[navFab]\" /></div>\n\n @for (group of visibleGroups(); track group.align) {\n <div class=\"ars-nav__items\" [class.ars-nav__items--bottom]=\"group.align === 'bottom'\">\n @for (block of group.sections; track block.section.id) {\n\n @if (wide && block.section.label) {\n <h3 class=\"ars-nav__section-headline\">{{ block.section.label }}</h3>\n }\n\n @for (r of block.items; track r.item.id) {\n @let current = r.item.id === active;\n <!-- Clicking a parent opens and closes its branch, or its floating panel, and\n never navigates. It can still BE the active destination, but only when it\n owns a route of its own (`r.href`): that is a page the user can reach, so\n the row is allowed to look selected. A parent without a route is never\n selected — where it used to stand in for a destination it hides it now\n carries `ancestor` instead: the trail, not the selection. -->\n @let ancestor = ancestors.has(r.item.id);\n <!-- Stacked layouts get the short form when the destination declares one, or\n no label at all on `'none'`; `tooltip` and `ariaLabel` stay on the full\n label either way, so the name is still one hover — or one screen reader —\n away. -->\n @let stackedLabelHidden = stacked && r.item.labelVertical === 'none';\n @let displayLabel = stacked ? (r.item.labelVertical ?? r.item.label) : r.item.label;\n @let selected = highlighted.has(r.item.id) && (!r.hasChildren || !!r.href);\n <!-- `stackedLabelHidden` counts as \"no label on screen\": that is what turns the\n tooltip back on, which is the only place the name is left to be read. -->\n @let labelVisible = !r.iconOnly && !stackedLabelHidden\n && (labels === 'labeled' || (labels === 'selected' && (selected || ancestor)));\n @let branchOpen = r.hasChildren && openIds.has(r.item.id);\n @let hideIcon = wide && r.depth > 0 && !childIcons();\n <!-- In the compact variants the children live in a floating panel, so an\n ancestor row IS how the active destination shows on screen: it takes the\n selected look whole, icon variant included, exactly like a destination\n without children. In the expanded ones the active row is visible on its\n own and the ancestor stays the quieter trail. -->\n @let activeLook = selected || (!wide && ancestor);\n @let svg = activeLook ? r.svgOn : r.svgOff;\n @let image = activeLook ? r.imageOn : r.imageOff;\n @let ligature = activeLook ? r.iconOn : r.iconOff;\n\n <!--\n The anchor and the button branches duplicate the inner markup on purpose:\n an `ng-template` + `ngTemplateOutlet` would allocate one extra embedded\n view per destination and lose the typed template context.\n -->\n @if (r.href && !r.hasChildren) {\n <a #navItem\n class=\"ars-nav__item\"\n [class.ars-nav__item--selected]=\"selected\"\n [class.ars-nav__item--icon-stacked]=\"stackedLabelHidden\"\n [class.ars-nav__item--greyed]=\"r.item.greyed\"\n [class.ars-nav__item--disabled]=\"r.item.disabled\"\n [class.ars-nav__item--no-icon]=\"hideIcon\"\n [attr.data-depth]=\"r.depth\"\n [attr.href]=\"r.item.disabled ? undefined : r.href\"\n [attr.target]=\"r.item.target\"\n [attr.rel]=\"r.item.target === '_blank' ? 'noopener noreferrer' : undefined\"\n [attr.aria-label]=\"r.ariaLabel\"\n [attr.aria-current]=\"current ? 'page' : undefined\"\n [attr.aria-disabled]=\"r.item.disabled ? 'true' : undefined\"\n [attr.tabindex]=\"r.item.disabled ? -1 : 0\"\n [attr.data-nav-id]=\"r.item.id\"\n [matTooltip]=\"r.tooltip\"\n [matTooltipDisabled]=\"!tooltips() || labelVisible\"\n [matTooltipPosition]=\"tooltipPosition()\"\n (click)=\"select(r, $event)\">\n @if (!hideIcon) {\n <span class=\"ars-nav__icon-box\">\n @if (svg; as svgName) {\n <mat-icon class=\"ars-nav__icon\" [svgIcon]=\"svgName\" aria-hidden=\"true\" />\n } @else if (r.spriteStyle; as spriteStyle) {\n <span class=\"ars-nav__icon ars-nav__icon--sprite\" [style]=\"spriteStyle\" aria-hidden=\"true\"></span>\n } @else if (image; as imageUrl) {\n <img class=\"ars-nav__icon ars-nav__icon--image\" [src]=\"imageUrl\" alt=\"\" loading=\"lazy\" decoding=\"async\" />\n } @else if (ligature; as ligatureName) {\n <mat-icon class=\"ars-nav__icon\" aria-hidden=\"true\">{{ ligatureName }}</mat-icon>\n }\n @if (r.hasBadge) {\n <span class=\"ars-nav__badge\"\n [class.ars-nav__badge--dot]=\"!r.badgeText\"\n [style.background-color]=\"r.item.badge?.color\"\n [attr.aria-label]=\"r.item.badge?.ariaLabel\">{{ r.badgeText }}</span>\n }\n </span>\n }\n @if (labels !== 'unlabeled' && !r.iconOnly && !stackedLabelHidden) {\n <span class=\"ars-nav__label\" [class.ars-nav__label--hidden]=\"!labelVisible\">{{ displayLabel }}</span>\n }\n @if (wide && r.item.trailing) {\n <span class=\"ars-nav__trailing\">{{ r.item.trailing }}</span>\n }\n <!-- The badge of an icon-less child has no icon box to sit on: it moves\n to the trailing edge, exactly as the submenu panel renders it. -->\n @if (hideIcon && r.hasBadge) {\n <span class=\"ars-nav__badge ars-nav__badge--inline\"\n [class.ars-nav__badge--dot]=\"!r.badgeText\"\n [style.background-color]=\"r.item.badge?.color\"\n [attr.aria-label]=\"r.item.badge?.ariaLabel\">{{ r.badgeText }}</span>\n }\n </a>\n } @else {\n <button #navItem\n type=\"button\"\n class=\"ars-nav__item\"\n [class.ars-nav__item--selected]=\"selected\"\n [class.ars-nav__item--ancestor]=\"ancestor\"\n [class.ars-nav__item--icon-stacked]=\"stackedLabelHidden\"\n [class.ars-nav__item--greyed]=\"r.item.greyed\"\n [class.ars-nav__item--disabled]=\"r.item.disabled\"\n [class.ars-nav__item--no-icon]=\"hideIcon\"\n [class.ars-nav__item--parent]=\"r.hasChildren\"\n [class.ars-nav__item--icon-only]=\"r.iconOnly\"\n [attr.data-depth]=\"r.depth\"\n [disabled]=\"!!r.item.disabled\"\n [attr.aria-label]=\"r.ariaLabel\"\n [attr.aria-current]=\"current ? 'page' : undefined\"\n [attr.aria-expanded]=\"r.hasChildren ? (wide ? branchOpen : popupOpenId === r.item.id) : undefined\"\n [attr.aria-haspopup]=\"r.hasChildren && !wide ? 'menu' : undefined\"\n [attr.data-nav-id]=\"r.item.id\"\n [matTooltip]=\"r.tooltip\"\n [matTooltipDisabled]=\"!tooltips() || labelVisible\"\n [matTooltipPosition]=\"tooltipPosition()\"\n (click)=\"select(r, $event)\">\n @if (!hideIcon) {\n <span class=\"ars-nav__icon-box\">\n @if (svg; as svgName) {\n <mat-icon class=\"ars-nav__icon\" [svgIcon]=\"svgName\" aria-hidden=\"true\" />\n } @else if (r.spriteStyle; as spriteStyle) {\n <span class=\"ars-nav__icon ars-nav__icon--sprite\" [style]=\"spriteStyle\" aria-hidden=\"true\"></span>\n } @else if (image; as imageUrl) {\n <img class=\"ars-nav__icon ars-nav__icon--image\" [src]=\"imageUrl\" alt=\"\" loading=\"lazy\" decoding=\"async\" />\n } @else if (ligature; as ligatureName) {\n <mat-icon class=\"ars-nav__icon\" aria-hidden=\"true\">{{ ligatureName }}</mat-icon>\n }\n @if (r.hasBadge) {\n <span class=\"ars-nav__badge\"\n [class.ars-nav__badge--dot]=\"!r.badgeText\"\n [style.background-color]=\"r.item.badge?.color\"\n [attr.aria-label]=\"r.item.badge?.ariaLabel\">{{ r.badgeText }}</span>\n }\n </span>\n }\n @if (labels !== 'unlabeled' && !r.iconOnly && !stackedLabelHidden) {\n <span class=\"ars-nav__label\" [class.ars-nav__label--hidden]=\"!labelVisible\">{{ displayLabel }}</span>\n }\n @if (wide && r.item.trailing) {\n <span class=\"ars-nav__trailing\">{{ r.item.trailing }}</span>\n }\n <!-- The badge of an icon-less child has no icon box to sit on: it moves\n to the trailing edge, exactly as the submenu panel renders it. -->\n @if (hideIcon && r.hasBadge) {\n <span class=\"ars-nav__badge ars-nav__badge--inline\"\n [class.ars-nav__badge--dot]=\"!r.badgeText\"\n [style.background-color]=\"r.item.badge?.color\"\n [attr.aria-label]=\"r.item.badge?.ariaLabel\">{{ r.badgeText }}</span>\n }\n @if (r.hasChildren && wide) {\n <mat-icon class=\"ars-nav__chevron\"\n [class.ars-nav__chevron--open]=\"branchOpen\"\n aria-hidden=\"true\">{{ expandIcon() }}</mat-icon>\n }\n </button>\n }\n }\n\n @if (wide && block.section.divider && !$last) {\n <hr class=\"ars-nav__divider\" aria-hidden=\"true\" />\n }\n }\n </div>\n }\n\n <div class=\"ars-nav__footer\"><ng-content select=\"[navFooter]\" /></div>\n</nav>\n\n<!--\n One overlay for the whole component: the overflow entry and every parent\n destination of the compact variants reuse it, instead of allocating a menu\n instance per destination.\n-->\n<ng-template cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"popupOrigin()\"\n [cdkConnectedOverlayOpen]=\"isPopupOpen()\"\n [cdkConnectedOverlayPositions]=\"popupPositions()\"\n [cdkConnectedOverlayPush]=\"true\"\n (overlayOutsideClick)=\"closePopup()\"\n (detach)=\"closePopup()\">\n <div class=\"ars-nav-submenu\"\n role=\"menu\"\n [attr.aria-label]=\"popupItem()?.ariaLabel\"\n [cdkTrapFocus]=\"true\"\n [cdkTrapFocusAutoCapture]=\"true\"\n (keydown)=\"onKeydown($event)\">\n @for (entry of popupEntries(); track entry.key) {\n @if (entry.render; as c) {\n @let childSelected = c.item.id === activeId();\n @let childSvg = childSelected ? c.svgOn : c.svgOff;\n @let childImage = childSelected ? c.imageOn : c.imageOff;\n @let childLigature = childSelected ? c.iconOn : c.iconOff;\n @if (c.href) {\n <a #panelItem\n class=\"ars-nav-submenu__item\"\n role=\"menuitem\"\n [class.ars-nav-submenu__item--grouped]=\"entry.grouped\"\n [class.ars-nav-submenu__item--selected]=\"childSelected\"\n [class.ars-nav-submenu__item--greyed]=\"c.item.greyed\"\n [attr.href]=\"c.item.disabled ? undefined : c.href\"\n [attr.target]=\"c.item.target\"\n [attr.rel]=\"c.item.target === '_blank' ? 'noopener noreferrer' : undefined\"\n [attr.aria-disabled]=\"c.item.disabled ? 'true' : undefined\"\n [attr.aria-current]=\"childSelected ? 'page' : undefined\"\n (click)=\"select(c, $event)\">\n @if (childSvg; as svgName) {\n <mat-icon class=\"ars-nav__icon\" [svgIcon]=\"svgName\" aria-hidden=\"true\" />\n } @else if (c.spriteStyle; as spriteStyle) {\n <span class=\"ars-nav__icon ars-nav__icon--sprite\" [style]=\"spriteStyle\" aria-hidden=\"true\"></span>\n } @else if (childImage; as imageUrl) {\n <img class=\"ars-nav__icon ars-nav__icon--image\" [src]=\"imageUrl\" alt=\"\" loading=\"lazy\" decoding=\"async\" />\n } @else if (childLigature; as ligatureName) {\n <mat-icon class=\"ars-nav__icon\" aria-hidden=\"true\">{{ ligatureName }}</mat-icon>\n }\n <span class=\"ars-nav-submenu__label\">{{ c.item.label }}</span>\n @if (c.badgeText) {\n <span class=\"ars-nav-submenu__trailing\">{{ c.badgeText }}</span>\n } @else if (c.item.trailing) {\n <span class=\"ars-nav-submenu__trailing\">{{ c.item.trailing }}</span>\n }\n </a>\n } @else {\n <button #panelItem\n type=\"button\"\n class=\"ars-nav-submenu__item\"\n role=\"menuitem\"\n [class.ars-nav-submenu__item--grouped]=\"entry.grouped\"\n [class.ars-nav-submenu__item--selected]=\"childSelected\"\n [class.ars-nav-submenu__item--greyed]=\"c.item.greyed\"\n [disabled]=\"!!c.item.disabled\"\n [attr.aria-current]=\"childSelected ? 'page' : undefined\"\n (click)=\"select(c, $event)\">\n @if (childSvg; as svgName) {\n <mat-icon class=\"ars-nav__icon\" [svgIcon]=\"svgName\" aria-hidden=\"true\" />\n } @else if (c.spriteStyle; as spriteStyle) {\n <span class=\"ars-nav__icon ars-nav__icon--sprite\" [style]=\"spriteStyle\" aria-hidden=\"true\"></span>\n } @else if (childImage; as imageUrl) {\n <img class=\"ars-nav__icon ars-nav__icon--image\" [src]=\"imageUrl\" alt=\"\" loading=\"lazy\" decoding=\"async\" />\n } @else if (childLigature; as ligatureName) {\n <mat-icon class=\"ars-nav__icon\" aria-hidden=\"true\">{{ ligatureName }}</mat-icon>\n }\n <span class=\"ars-nav-submenu__label\">{{ c.item.label }}</span>\n @if (c.badgeText) {\n <span class=\"ars-nav-submenu__trailing\">{{ c.badgeText }}</span>\n } @else if (c.item.trailing) {\n <span class=\"ars-nav-submenu__trailing\">{{ c.item.trailing }}</span>\n }\n </button>\n }\n } @else {\n <div class=\"ars-nav-submenu__heading\" role=\"presentation\">{{ entry.label }}</div>\n }\n }\n </div>\n</ng-template>\n",
|
|
1202
|
+
styles: [":host{--_container: var(--ars-navigation-container-color, var(--mat-sys-surface-container, #eff1ef));--_indicator: var(--ars-navigation-indicator-color, var(--mat-sys-secondary-container, #cce8e2));--_icon: var(--ars-navigation-icon-color, var(--mat-sys-on-surface-variant, #3f4947));--_icon-active: var(--ars-navigation-active-icon-color, var(--mat-sys-on-secondary-container, #0b1f1c));--_label: var(--ars-navigation-label-color, var(--mat-sys-on-surface-variant, #3f4947));--_label-active: var(--ars-navigation-active-label-color, var(--ars-color-secondary, #4a635f));--_headline: var(--ars-navigation-headline-color, var(--mat-sys-on-surface-variant, #3f4947));--_state: var(--ars-navigation-state-layer-color, var(--mat-sys-on-surface, #191c1b));--_badge: var(--ars-navigation-badge-color, var(--ars-color-error, #ff5449));--_badge-text: var(--ars-navigation-badge-text-color, #ffffff);--_divider: var(--ars-navigation-divider-color, var(--ars-color-divider, #757d87));--_scrim: var(--ars-navigation-scrim-color, rgba(0, 0, 0, .4));--_focus: var(--ars-navigation-focus-color, var(--ars-color-primary, #00a293));--_easing: var(--ars-navigation-easing, cubic-bezier(.2, 0, 0, 1));--_dur-short: var(--ars-navigation-duration-short, .15s);--_dur: var(--ars-navigation-duration, .25s);--_dur-long: var(--ars-navigation-duration-long, .4s);--_icon-hover-scale: var(--ars-navigation-icon-hover-scale, 1.12);--_icon-press-scale: var(--ars-navigation-icon-press-scale, .92);--_hover-opacity: .08;--_focus-opacity: .1;--_press-opacity: .1;--_row-height: var(--ars-navigation-item-height, 56px);--_row-gap: var(--ars-navigation-item-gap, 4px);--_row-font-size: var(--ars-navigation-label-font-size, 14px);--_child-height: var(--ars-navigation-child-height, 48px);--_child-font-size: var(--ars-navigation-child-font-size, 13px);--_section-padding: 18px 16px 8px;--_row-pad-start: var(--ars-navigation-item-padding-start, 24px);--_row-pad-end: var(--ars-navigation-item-padding-end, 24px);--_label-lines: var(--ars-navigation-label-lines, 2);--_rtl: 1;display:block;box-sizing:border-box;color:var(--_label);-webkit-tap-highlight-color:transparent}:host-context([dir=rtl]){--_rtl: -1}:host(.ars-navigation--dense){--_row-height: var(--ars-navigation-dense-item-height, 44px);--_child-height: var(--ars-navigation-dense-child-height, 36px);--_section-padding: 12px 16px 4px}:host(.ars-navigation--dense){--_row-pad-start: var(--ars-navigation-dense-item-padding-start, 12px);--_row-pad-end: var(--ars-navigation-dense-item-padding-end, 12px)}.ars-nav{box-sizing:border-box;display:flex;position:relative;background:var(--_container);color:var(--_label);overflow:hidden}.ars-nav__items{box-sizing:border-box;display:flex;min-height:0;min-width:0;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--_state) 25%,transparent) transparent}.ars-nav__header{box-sizing:border-box;display:flex;align-items:center;flex:none;gap:12px}.ars-nav__leading,.ars-nav__fab,.ars-nav__footer{box-sizing:border-box;flex:none}.ars-nav__leading:empty,.ars-nav__fab:empty,.ars-nav__footer:empty{display:none}.ars-nav__headline{margin:0;padding:0 16px;font-size:22px;line-height:28px;font-weight:400;color:var(--_headline);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ars-nav__section-headline{margin:0;padding:var(--_section-padding, 18px 16px 8px);font-size:14px;line-height:20px;font-weight:500;letter-spacing:.1px;color:var(--_headline);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ars-nav__divider{flex:none;margin:8px 16px;border:0;border-top:1px solid var(--_divider);opacity:.4}.ars-nav__menu{display:inline-flex;align-items:center;justify-content:center;flex:none;width:48px;height:48px;margin:0;padding:0;border:0;border-radius:50%;background:transparent;color:var(--_icon);cursor:pointer;transition:background-color var(--_dur-short) var(--_easing)}.ars-nav__menu:hover{background:color-mix(in srgb,var(--_state) 8%,transparent)}.ars-nav__menu:focus-visible{outline:3px solid var(--_focus);outline-offset:2px}.ars-nav__item{box-sizing:border-box;position:relative;isolation:isolate;display:flex;align-items:center;flex:none;margin:0;border:0;background:transparent;color:var(--_label);font:inherit;text-align:start;text-decoration:none;cursor:pointer;-webkit-user-select:none;user-select:none;appearance:none;-webkit-tap-highlight-color:transparent}.ars-nav__item:focus-visible{outline:3px solid var(--_focus);outline-offset:-3px;border-radius:16px}.ars-nav__item--disabled,.ars-nav__item:disabled{cursor:default;opacity:.38;pointer-events:none}.ars-nav__icon-box{box-sizing:border-box;position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;width:24px;height:24px;color:var(--_icon);transition:color var(--_dur) var(--_easing)}.ars-nav__icon{position:relative;z-index:1;width:24px;height:24px;font-size:24px;line-height:24px;font-variation-settings:\"FILL\" 0;transform:scale(1);transform-origin:center;transition:font-variation-settings var(--_dur, .25s) var(--_easing, cubic-bezier(.2, 0, 0, 1)),transform var(--_dur, .25s) var(--_easing, cubic-bezier(.2, 0, 0, 1))}.ars-nav__label{position:relative;z-index:1;min-width:0;font:var(--mat-sys-label-large, 500 14px/20px Roboto, sans-serif);letter-spacing:var(--mat-sys-label-large-tracking, .1px);color:var(--_label);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color var(--_dur) var(--_easing),opacity var(--_dur) var(--_easing),max-height var(--_dur) var(--_easing),margin var(--_dur) var(--_easing)}.ars-nav__label--hidden{opacity:0;max-height:0;margin:0!important;pointer-events:none}.ars-nav__trailing{position:relative;z-index:1;margin-inline-start:auto;padding-inline-start:12px;font-size:11px;line-height:16px;font-weight:500;letter-spacing:.5px;color:var(--_label);white-space:nowrap}.ars-nav__badge{position:absolute;z-index:2;top:-6px;inset-inline-start:12px;box-sizing:border-box;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--_badge);color:var(--_badge-text);font-size:11px;line-height:16px;font-weight:500;letter-spacing:.5px;text-align:center;white-space:nowrap}.ars-nav__badge--dot{top:-1px;inset-inline-start:16px;width:6px;min-width:6px;height:6px;padding:0;border-radius:3px}.ars-nav__badge--inline{position:static;z-index:1;flex:none;margin-inline-start:8px}.ars-nav__badge--inline.ars-nav__badge--dot{margin-inline-start:12px}:host([data-indicator=compact]) .ars-nav__icon-box:before{content:\"\";position:absolute;z-index:0;background:var(--_indicator);opacity:0;transform:scaleX(.55);transition:opacity var(--_dur) var(--_easing),transform var(--_dur-long) var(--_easing);pointer-events:none;inset:50% auto auto 50%;width:56px;height:32px;margin:-16px 0 0 -28px;border-radius:16px}:host([data-indicator=compact]) .ars-nav__icon-box:after{content:\"\";position:absolute;z-index:0;background:var(--_state);opacity:0;transition:opacity var(--_dur-short) var(--_easing);pointer-events:none;inset:50% auto auto 50%;width:56px;height:32px;margin:-16px 0 0 -28px;border-radius:16px}:host([data-indicator=compact]) .ars-nav__item--icon-stacked .ars-nav__icon-box:before,:host([data-indicator=compact]) .ars-nav__item--icon-stacked .ars-nav__icon-box:after{width:var(--ars-navigation-icon-button-size, 48px);height:var(--ars-navigation-icon-button-size, 48px);margin:calc(var(--ars-navigation-icon-button-size, 48px) / -2) 0 0 calc(var(--ars-navigation-icon-button-size, 48px) / -2);border-radius:50%}:host([data-indicator=compact]) .ars-nav__item--selected .ars-nav__icon-box:before{opacity:1;transform:scaleX(1)}:host([data-indicator=compact]) .ars-nav__item:hover .ars-nav__icon-box:after{opacity:var(--_hover-opacity)}:host([data-indicator=compact]) .ars-nav__item:focus-visible .ars-nav__icon-box:after{opacity:var(--_focus-opacity)}:host([data-indicator=compact]) .ars-nav__item:active .ars-nav__icon-box:after{opacity:var(--_press-opacity)}:host([data-indicator=wide]) .ars-nav__item:before{content:\"\";position:absolute;z-index:0;background:var(--_indicator);opacity:0;transform:scaleX(.55);transition:opacity var(--_dur) var(--_easing),transform var(--_dur-long) var(--_easing);pointer-events:none;inset:0;border-radius:28px}:host([data-indicator=wide]) .ars-nav__item:after{content:\"\";position:absolute;z-index:0;background:var(--_state);opacity:0;transition:opacity var(--_dur-short) var(--_easing);pointer-events:none;inset:0;border-radius:28px}:host([data-indicator=wide]) .ars-nav__item--selected:before{opacity:1;transform:scaleX(1)}:host([data-indicator=wide]) .ars-nav__item:hover:after{opacity:var(--_hover-opacity)}:host([data-indicator=wide]) .ars-nav__item:focus-visible:after{opacity:var(--_focus-opacity)}:host([data-indicator=wide]) .ars-nav__item:active:after{opacity:var(--_press-opacity)}.ars-nav__item--ancestor:not(.ars-nav__item--selected) .ars-nav__label{color:var(--_label-active)}.ars-nav__item--ancestor:not(.ars-nav__item--selected) .ars-nav__icon-box,.ars-nav__item--ancestor:not(.ars-nav__item--selected) .ars-nav__chevron{color:var(--_label-active)}:host([data-variant=bar][data-indicator=compact]) .ars-nav__item--ancestor .ars-nav__icon-box:before,:host([data-variant=rail][data-indicator=compact]) .ars-nav__item--ancestor .ars-nav__icon-box:before{opacity:1;transform:scaleX(1)}:host([data-variant=bar]) .ars-nav__item--ancestor .ars-nav__icon-box,:host([data-variant=rail]) .ars-nav__item--ancestor .ars-nav__icon-box{color:var(--_icon-active)}:host([data-variant=bar]) .ars-nav__item--ancestor .ars-nav__icon,:host([data-variant=rail]) .ars-nav__item--ancestor .ars-nav__icon{font-variation-settings:\"FILL\" 1}.ars-nav__item--selected .ars-nav__icon-box{color:var(--_icon-active)}.ars-nav__item--selected .ars-nav__icon{font-variation-settings:\"FILL\" 1}.ars-nav__item--selected .ars-nav__label{color:var(--_label-active)}.ars-nav__item--greyed:not(.ars-nav__item--selected) .ars-nav__label,.ars-nav__item--greyed:not(.ars-nav__item--selected) .ars-nav__icon-box,.ars-nav__item--greyed:not(.ars-nav__item--selected) .ars-nav__trailing,.ars-nav-submenu__item--greyed:not(.ars-nav-submenu__item--selected){opacity:var(--ars-navigation-greyed-opacity, .5);transition:opacity var(--_dur-short, .15s) var(--_easing, cubic-bezier(.2, 0, 0, 1))}.ars-nav__item--greyed:where(:hover,:focus-visible) .ars-nav__label,.ars-nav__item--greyed:where(:hover,:focus-visible) .ars-nav__icon-box,.ars-nav__item--greyed:where(:hover,:focus-visible) .ars-nav__trailing,.ars-nav-submenu__item--greyed:where(:hover,:focus-visible){opacity:1}:host([data-layout=vertical]) .ars-nav__item{flex-direction:column;justify-content:center}:host([data-layout=vertical]) .ars-nav__label{font:var(--mat-sys-label-medium, 500 12px/16px Roboto, sans-serif);letter-spacing:var(--mat-sys-label-medium-tracking, .5px);margin-top:var(--ars-navigation-vertical-gap, 0);padding-block:var(--ars-navigation-vertical-label-padding, 8px);max-width:100%;text-align:center;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--_label-lines, 2);line-clamp:var(--_label-lines, 2);white-space:normal;overflow-wrap:anywhere;line-height:var(--ars-navigation-vertical-label-line-height, 14px)}:host([data-layout=horizontal]) .ars-nav__item{flex-direction:row;justify-content:flex-start}:host([data-layout=horizontal]) .ars-nav__label{margin-inline-start:4px}:host .ars-nav__item--selected .ars-nav__label,:host .ars-nav__item--ancestor .ars-nav__label{font-weight:var(--ars-navigation-selected-font-weight, 700)}:host([data-variant=bar]) .ars-nav__item--selected .ars-nav__label,:host([data-variant=bar]) .ars-nav__item--ancestor .ars-nav__label,:host([data-variant=rail]) .ars-nav__item--selected .ars-nav__label,:host([data-variant=rail]) .ars-nav__item--ancestor .ars-nav__label{font-weight:var(--ars-navigation-compact-selected-font-weight, 500)}:host([data-variant=bar]){width:100%}:host([data-variant=bar]) .ars-nav{flex-direction:row;align-items:center;justify-content:space-around;width:100%;height:var(--ars-navigation-bar-height, 80px);padding:0 8px}:host([data-variant=bar]) .ars-nav__header,:host([data-variant=bar]) .ars-nav__leading,:host([data-variant=bar]) .ars-nav__fab,:host([data-variant=bar]) .ars-nav__footer,:host([data-variant=bar]) .ars-nav__section-headline,:host([data-variant=bar]) .ars-nav__divider,:host([data-variant=bar]) .ars-nav__trailing{display:none}:host([data-variant=bar]) .ars-nav__items{display:contents}:host([data-variant=bar]) .ars-nav__item{flex:1 1 0;min-width:0;height:100%}:host([data-variant=bar][data-layout=horizontal]) .ars-nav__item{justify-content:center;max-width:var(--ars-navigation-item-max-width, 168px);padding:0 12px}:host([data-variant=bar][data-layout=vertical]) .ars-nav__item{justify-content:flex-start;padding-block-start:var(--ars-navigation-bar-item-padding-top, 12px)}:host([data-variant=bar][data-indicator=wide]) .ars-nav__item:before,:host([data-variant=bar][data-indicator=wide]) .ars-nav__item:after{inset:12px 0}:host([data-variant=rail]){height:100%}:host([data-variant=rail]) .ars-nav{flex-direction:column;align-items:center;width:var(--ars-navigation-rail-width, var(--ars-navigation-width, 96px));height:100%;padding:var(--ars-navigation-rail-top-padding, 20px) 0 8px}:host([data-variant=rail]) .ars-nav__header{flex-direction:column;margin-bottom:40px}:host([data-variant=rail]) .ars-nav__headline,:host([data-variant=rail]) .ars-nav__section-headline,:host([data-variant=rail]) .ars-nav__divider,:host([data-variant=rail]) .ars-nav__trailing{display:none}:host([data-variant=rail]) .ars-nav__fab{margin-bottom:40px}:host([data-variant=rail]) .ars-nav__items{flex:1 1 auto;flex-direction:column;align-items:center;gap:var(--ars-navigation-rail-item-gap, 8px);width:100%;overflow-y:auto;overscroll-behavior:contain}:host([data-variant=rail]) .ars-nav__item{justify-content:center;width:100%;min-height:var(--ars-navigation-rail-item-height, 64px);padding:0 4px}:host([data-variant=rail-expanded]),:host([data-variant=drawer]),:host([data-variant=modal]){height:100%}:host([data-variant=rail-expanded]) .ars-nav,:host([data-variant=drawer]) .ars-nav,:host([data-variant=modal]) .ars-nav{flex-direction:column;align-items:stretch;height:100%;padding:12px 0}:host([data-variant=rail-expanded]) .ars-nav__header,:host([data-variant=drawer]) .ars-nav__header,:host([data-variant=modal]) .ars-nav__header{padding:4px 8px 8px}:host([data-variant=rail-expanded]) .ars-nav__items,:host([data-variant=drawer]) .ars-nav__items,:host([data-variant=modal]) .ars-nav__items{flex:1 1 auto;flex-direction:column;gap:var(--_row-gap, 4px);overflow-y:auto;overscroll-behavior:contain}:host([data-variant=rail-expanded]) .ars-nav__item,:host([data-variant=drawer]) .ars-nav__item,:host([data-variant=modal]) .ars-nav__item{min-height:var(--_row-height, 56px);padding-block:0;padding-inline:calc(var(--_row-pad-start, 24px) + var(--_depth-indent, 0px)) var(--_row-pad-end, 24px);margin-block:0;margin-inline:var(--ars-navigation-item-inset, 20px)}:host(.ars-navigation--dense) .ars-nav__item{padding-inline:calc(var(--_row-pad-start, 12px) + var(--_depth-indent, 0px)) var(--_row-pad-end, 12px)}:host([data-variant=rail-expanded]) .ars-nav__item[data-depth]:not([data-depth=\"0\"])+.ars-nav__item[data-depth=\"0\"],:host([data-variant=drawer]) .ars-nav__item[data-depth]:not([data-depth=\"0\"])+.ars-nav__item[data-depth=\"0\"],:host([data-variant=modal]) .ars-nav__item[data-depth]:not([data-depth=\"0\"])+.ars-nav__item[data-depth=\"0\"]{margin-block-start:var(--ars-navigation-branch-end-gap, 12px)}:host([data-variant=rail-expanded]) .ars-nav__item[data-depth]:not([data-depth=\"0\"]):last-child,:host([data-variant=drawer]) .ars-nav__item[data-depth]:not([data-depth=\"0\"]):last-child,:host([data-variant=modal]) .ars-nav__item[data-depth]:not([data-depth=\"0\"]):last-child{margin-block-end:var(--ars-navigation-branch-end-gap, 12px)}:host([data-variant=rail-expanded]) .ars-nav__icon-box,:host([data-variant=drawer]) .ars-nav__icon-box,:host([data-variant=modal]) .ars-nav__icon-box{margin-inline-end:12px}:host([data-variant=rail-expanded]) .ars-nav__item[data-depth]:not([data-depth=\"0\"]),:host([data-variant=drawer]) .ars-nav__item[data-depth]:not([data-depth=\"0\"]),:host([data-variant=modal]) .ars-nav__item[data-depth]:not([data-depth=\"0\"]){min-height:var(--_child-height, 48px)}:host([data-variant=rail-expanded]) .ars-nav__item[data-depth]:not([data-depth=\"0\"]) .ars-nav__label,:host([data-variant=drawer]) .ars-nav__item[data-depth]:not([data-depth=\"0\"]) .ars-nav__label,:host([data-variant=modal]) .ars-nav__item[data-depth]:not([data-depth=\"0\"]) .ars-nav__label{font-size:var(--_child-font-size, 13px)}:host([data-variant=rail-expanded]) .ars-nav__label,:host([data-variant=drawer]) .ars-nav__label,:host([data-variant=modal]) .ars-nav__label{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--_label-lines, 2);line-clamp:var(--_label-lines, 2);white-space:normal;overflow-wrap:anywhere;line-height:var(--ars-navigation-label-line-height, 18px);flex:1 1 auto;margin-inline-start:0;font-size:var(--_row-font-size, 14px)}:host([data-variant=rail-expanded]) .ars-nav{width:var(--ars-navigation-width, 220px);min-width:var(--ars-navigation-min-width, 0);max-width:var(--ars-navigation-max-width, 100%)}:host([data-variant=drawer]) .ars-nav,:host([data-variant=modal]) .ars-nav{width:var(--ars-navigation-width, 360px);min-width:var(--ars-navigation-min-width, 0);max-width:var(--ars-navigation-max-width, 100%)}:host([data-variant=modal]){position:fixed;inset:0;z-index:var(--ars-navigation-z-index, 1000);height:auto;pointer-events:none}:host([data-variant=modal]) .ars-nav{position:absolute;inset-block:0;inset-inline-start:0;pointer-events:auto;border-start-end-radius:16px;border-end-end-radius:16px;translate:calc(var(--_shift, 0%) * var(--_rtl)) 0;transition:translate var(--_dur-long) var(--_easing),visibility var(--_dur-long) var(--_easing)}:host([data-variant=modal][data-position=end]) .ars-nav{inset-inline-start:auto;inset-inline-end:0;border-radius:0;border-start-start-radius:16px;border-end-start-radius:16px}:host([data-variant=modal].ars-navigation--hidden) .ars-nav__scrim{opacity:0;pointer-events:none}:host([data-variant=modal].ars-navigation--hidden) .ars-nav{--_shift: -100%;visibility:hidden}:host([data-variant=modal][data-position=end].ars-navigation--hidden) .ars-nav{--_shift: 100%}.ars-nav__scrim{position:absolute;inset:0;background:var(--_scrim);opacity:1;pointer-events:auto;transition:opacity var(--_dur-long) var(--_easing)}:host(:not([data-variant=bar])) .ars-nav__items--bottom{flex:0 0 auto;margin-block-start:auto;overflow:visible}:host([data-align=center]) .ars-nav__items:not(.ars-nav__items--bottom){justify-content:safe center}:host([data-align=bottom]) .ars-nav__items:not(.ars-nav__items--bottom){justify-content:safe flex-end}:host(.ars-navigation--elevated) .ars-nav{box-shadow:0 1px 3px #0000004d,0 4px 8px 3px #00000026}:host([data-variant=bar].ars-navigation--separator){position:relative;--_separator: var( --ars-navigation-separator-color, color-mix(in srgb, var(--ars-color-divider, #757d87) 70%, #fff) )}:host([data-variant=bar][data-theme=dark].ars-navigation--separator){--_separator: var( --ars-navigation-separator-color, color-mix(in srgb, var(--ars-color-divider, #757d87) 70%, #000) )}.ars-nav__separator{position:absolute;inset-inline:0;bottom:100%;height:var(--ars-navigation-separator-height, 10px);background:var(--_separator);backdrop-filter:blur(var(--ars-navigation-separator-blur, 4px));-webkit-backdrop-filter:blur(var(--ars-navigation-separator-blur, 4px));-webkit-mask-image:linear-gradient(to bottom,transparent,#000);mask-image:linear-gradient(to bottom,transparent,#000);pointer-events:none}:host([data-variant=bar].ars-navigation--transparent) .ars-nav{background:transparent;box-shadow:none}:host(.ars-navigation--hidden):not([data-variant=modal]){display:none}.ars-nav__icon--image{object-fit:contain}.ars-nav__icon--sprite{display:inline-block;flex:none;width:var(--sp-size, 24px);height:var(--sp-size, 24px);background-image:var(--sp-url);background-repeat:no-repeat;background-size:var(--sp-sheet-x, auto) var(--sp-sheet-y, auto);background-position:calc(var(--sp-frame, var(--sp-normal, 0)) * var(--sp-step-x, 0px)) calc(var(--sp-frame, var(--sp-normal, 0)) * var(--sp-step-y, 0px))}.ars-nav__item:where(:hover,:focus-visible) .ars-nav__icon--sprite,.ars-nav-submenu__item:where(:hover,:focus-visible) .ars-nav__icon--sprite{--sp-frame: var(--sp-hover)}.ars-nav__item--selected .ars-nav__icon--sprite,.ars-nav-submenu__item--selected .ars-nav__icon--sprite,:host([data-variant=bar]) .ars-nav__item--ancestor .ars-nav__icon--sprite,:host([data-variant=rail]) .ars-nav__item--ancestor .ars-nav__icon--sprite{--sp-frame: var(--sp-active)}.ars-nav__item--disabled .ars-nav__icon--sprite,.ars-nav__item:where(:disabled) .ars-nav__icon--sprite,.ars-nav-submenu__item:where(:disabled,[aria-disabled=true]) .ars-nav__icon--sprite{--sp-frame: var(--sp-disabled)}.ars-nav__item:where(:hover,:focus-visible) .ars-nav__icon,.ars-nav-submenu__item:where(:hover,:focus-visible) .ars-nav__icon{transform:scale(var(--_icon-hover-scale, 1.12))}.ars-nav__item--selected .ars-nav__icon,.ars-nav-submenu__item--selected .ars-nav__icon{transform:scale(1)}.ars-nav__item:where(:active) .ars-nav__icon,.ars-nav-submenu__item:where(:active) .ars-nav__icon{transform:scale(var(--_icon-press-scale, .92));transition-duration:var(--_dur-short, .15s)}:host([data-variant=bar]) .ars-nav__item--icon-only{flex:0 0 auto;min-width:56px;max-width:72px}.ars-nav__chevron{position:relative;z-index:1;flex:none;margin-inline-start:8px;width:20px;height:20px;font-size:20px;line-height:20px;color:var(--_icon);rotate:0deg;opacity:0;transition:rotate var(--_dur) var(--_easing),opacity var(--_dur-short) var(--_easing)}.ars-nav__item:where(:hover,:focus-visible) .ars-nav__chevron{opacity:1}@media(hover:none){.ars-nav__chevron{opacity:1}}.ars-nav__chevron--open{rotate:180deg}.ars-nav__item[data-depth=\"1\"]{--_depth-indent: 24px}.ars-nav__item[data-depth=\"2\"]{--_depth-indent: 48px}.ars-nav__item[data-depth=\"3\"]{--_depth-indent: 72px}.ars-nav-submenu{--_easing: var(--ars-navigation-easing, cubic-bezier(.2, 0, 0, 1));--_dur-short: var(--ars-navigation-duration-short, .15s);--_dur: var(--ars-navigation-duration, .25s);--_dur-long: var(--ars-navigation-duration-long, .4s);--_icon-hover-scale: var(--ars-navigation-icon-hover-scale, 1.12);--_icon-press-scale: var(--ars-navigation-icon-press-scale, .92);--_state: var(--ars-navigation-state-layer-color, var(--mat-sys-on-surface, #191c1b));--_indicator: var(--ars-navigation-indicator-color, var(--mat-sys-secondary-container, #cce8e2));box-sizing:border-box;display:flex;flex-direction:column;gap:2px;min-width:200px;max-width:320px;max-height:60vh;padding:8px;border-radius:12px;background:var(--ars-navigation-menu-container-color, var(--ars-navigation-container-color, var(--mat-sys-surface-container-high, #e7e9e8)));color:var(--ars-navigation-label-color, var(--mat-sys-on-surface, #191c1b));box-shadow:0 1px 2px #0000004d,0 2px 6px 2px #00000026;overflow-y:auto;overscroll-behavior:contain}.ars-nav-submenu__item{box-sizing:border-box;display:flex;align-items:center;gap:12px;flex:none;min-height:48px;margin:0;padding:0 12px;border:0;border-radius:8px;background:transparent;color:inherit;font:inherit;text-align:start;text-decoration:none;cursor:pointer;appearance:none}.ars-nav-submenu__item--grouped{padding-inline-start:var(--ars-navigation-menu-group-indent, 24px)}.ars-nav-submenu__item:hover{background:color-mix(in srgb,currentColor 8%,transparent)}.ars-nav-submenu__item:focus-visible{outline:3px solid var(--ars-navigation-focus-color, var(--ars-color-primary, #00a293));outline-offset:-3px}.ars-nav-submenu__item--selected .ars-nav-submenu__label{font-weight:var(--ars-navigation-selected-font-weight, 700)}.ars-nav-submenu__item--selected{background:var(--_indicator);color:var(--ars-navigation-active-icon-color, var(--mat-sys-on-secondary-container, #0b1f1c))}.ars-nav-submenu__item--selected:where(:hover,:focus-visible){background:color-mix(in srgb,var(--_state) 8%,var(--_indicator))}.ars-nav-submenu__item:disabled,.ars-nav-submenu__item[aria-disabled=true]{opacity:.38;pointer-events:none}.ars-nav-submenu__heading{padding:12px 12px 4px;font-size:11px;line-height:16px;font-weight:500;letter-spacing:.5px;text-transform:uppercase;opacity:.7}.ars-nav-submenu__heading:first-child{padding-top:4px}.ars-nav-submenu__label{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--ars-navigation-label-lines, 2);line-clamp:var(--ars-navigation-label-lines, 2);flex:1 1 auto;min-width:0;padding-block:8px;font-size:14px;line-height:var(--ars-navigation-label-line-height, 18px);font-weight:500;letter-spacing:.1px;white-space:normal;overflow-wrap:anywhere;overflow:hidden}.ars-nav-submenu__trailing{flex:none;font-size:11px;line-height:16px;font-weight:500;letter-spacing:.5px;opacity:.8}@media(prefers-reduced-motion:reduce){:host{--_dur-short: 0ms;--_dur: 0ms;--_dur-long: 0ms;--_icon-hover-scale: 1;--_icon-press-scale: 1}:host([data-indicator=wide]) .ars-nav__item:before,:host([data-indicator=compact]) .ars-nav__icon-box:before{transform:none}.ars-nav-submenu{--_dur-short: 0ms;--_dur: 0ms;--_dur-long: 0ms;--_icon-hover-scale: 1;--_icon-press-scale: 1}}@media(forced-colors:active){:host([data-indicator=compact]) .ars-nav__item--selected .ars-nav__icon-box:before,:host([data-indicator=wide]) .ars-nav__item--selected:before{background:Highlight;forced-color-adjust:none}.ars-nav__item:focus-visible{outline:3px solid CanvasText}}\n"]
|
|
1175
1203
|
}]
|
|
1176
1204
|
}],
|
|
1177
1205
|
ctorParameters: () => [],
|
|
@@ -1401,6 +1429,22 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
1401
1429
|
required: false
|
|
1402
1430
|
}]
|
|
1403
1431
|
}],
|
|
1432
|
+
bottomSeparator: [{
|
|
1433
|
+
type: i0.Input,
|
|
1434
|
+
args: [{
|
|
1435
|
+
isSignal: true,
|
|
1436
|
+
alias: "bottomSeparator",
|
|
1437
|
+
required: false
|
|
1438
|
+
}]
|
|
1439
|
+
}],
|
|
1440
|
+
bottomTransparent: [{
|
|
1441
|
+
type: i0.Input,
|
|
1442
|
+
args: [{
|
|
1443
|
+
isSignal: true,
|
|
1444
|
+
alias: "bottomTransparent",
|
|
1445
|
+
required: false
|
|
1446
|
+
}]
|
|
1447
|
+
}],
|
|
1404
1448
|
tooltips: [{
|
|
1405
1449
|
type: i0.Input,
|
|
1406
1450
|
args: [{
|