@testgorilla/tgo-ui 12.1.0 → 12.3.0

package/fesm2022/testgorilla-tgo-ui-components-side-navigation.mjs

@@ -2,7 +2,7 @@ import { A11yModule, CdkTrapFocus, LiveAnnouncer } from "@angular/cdk/a11y";
 import { BreakpointObserver } from "@angular/cdk/layout";
 import { AsyncPipe, CommonModule, NgTemplateOutlet } from "@angular/common";
 import * as i0 from "@angular/core";
-import { ChangeDetectionStrategy, Component, DestroyRef, NgModule, computed, inject, input, model, output, signal } from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, NgModule, booleanAttribute, computed, inject, input, model, output, signal } from "@angular/core";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { take } from "rxjs";
 import { AvatarComponent, AvatarComponentModule, AvatarSize } from "@testgorilla/tgo-ui/components/avatar";
@@ -13,12 +13,14 @@ import { IconComponentModule } from "@testgorilla/tgo-ui/components/icon";
 import { LogoComponent, LogoComponentModule, LogoTypeEnum } from "@testgorilla/tgo-ui/components/logo";
 import * as i1 from "@testgorilla/tgo-ui/components/overflow-menu";
 import { OverflowMenuComponentModule } from "@testgorilla/tgo-ui/components/overflow-menu";
+const flattenNavigation = (items) => items.flatMap((item) => [item, ...flattenNavigation(item.children ?? [])]);
 const OVERFLOW_MENU_CONFIG = {
 	overlapTrigger: true,
 	xPosition: "before",
 	yPosition: "below"
 };
 const COLLAPSE_ANIMATION_MS = 180;
+const POPOVER_GAP_FROM_RAIL = 8;
 const TRANSLATION_KEY = {
 	COLLAPSE: "SIDE_NAVIGATION.COLLAPSE_LABEL",
 	EXPAND: "SIDE_NAVIGATION.EXPAND_LABEL",
@@ -26,7 +28,9 @@ const TRANSLATION_KEY = {
 	MOBILE_CLOSE: "SIDE_NAVIGATION.MOBILE_CLOSE_LABEL",
 	NAV: "SIDE_NAVIGATION.NAV_ARIA_LABEL",
 	ANNOUNCE_COLLAPSED: "SIDE_NAVIGATION.ANNOUNCE_COLLAPSED",
-	ANNOUNCE_EXPANDED: "SIDE_NAVIGATION.ANNOUNCE_EXPANDED"
+	ANNOUNCE_EXPANDED: "SIDE_NAVIGATION.ANNOUNCE_EXPANDED",
+	SUBMENU: "SIDE_NAVIGATION.SUBMENU_LABEL",
+	NEW: "SIDE_NAVIGATION.NEW_LABEL"
 };
 var SideNavigationComponent = class SideNavigationComponent {
 	constructor() {
@@ -52,9 +56,15 @@ var SideNavigationComponent = class SideNavigationComponent {
 		this.mobileMenuLabel = input(...ngDevMode ? [void 0, { debugName: "mobileMenuLabel" }] : /* istanbul ignore next */ []);
 		this.mobileCloseLabel = input(...ngDevMode ? [void 0, { debugName: "mobileCloseLabel" }] : /* istanbul ignore next */ []);
 		this.navAriaLabel = input(...ngDevMode ? [void 0, { debugName: "navAriaLabel" }] : /* istanbul ignore next */ []);
+		this.hasChevronTooltips = input(false, {
+			...ngDevMode ? { debugName: "hasChevronTooltips" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
 		this.isCollapsed = model(false, ...ngDevMode ? [{ debugName: "isCollapsed" }] : /* istanbul ignore next */ []);
 		this.mainCtaClicked = output();
 		this.navigate = output();
+		this.expandedChange = output();
+		this.trailingActionClicked = output();
 		this.accountMenuSelected = output();
 		this.logoClicked = output();
 		this.isExpandingOrCollapsing = signal(false, ...ngDevMode ? [{ debugName: "isExpandingOrCollapsing" }] : /* istanbul ignore next */ []);
@@ -63,9 +73,32 @@ var SideNavigationComponent = class SideNavigationComponent {
 		this.collapseTimer = null;
 		this.activeRoutesMap = computed(() => {
 			const currentRoute = this.activeRoute();
-			const allItems = [...this.mainNavigation(), ...this.secondaryNavigation() ?? []];
+			const allItems = flattenNavigation(this.allNavigation());
 			return new Map(allItems.map((route) => [route.url, currentRoute?.startsWith(route.url) ?? false]));
 		}, ...ngDevMode ? [{ debugName: "activeRoutesMap" }] : /* istanbul ignore next */ []);
+		this.highlightStates = computed(() => {
+			const matches = this.activeRoutesMap();
+			const states = /* @__PURE__ */ new Map();
+			const longestMatch = (item) => Math.max(matches.get(item.url) ? item.url.length : -1, ...(item.children ?? []).map(longestMatch));
+			const mark = (item) => {
+				let best = null;
+				let bestLength = -1;
+				for (const child of item.children ?? []) {
+					const length = longestMatch(child);
+					if (length > bestLength) {
+						best = child;
+						bestLength = length;
+					}
+				}
+				if (best) {
+					states.set(item.id, "ancestor");
+					mark(best);
+				} else states.set(item.id, "active");
+			};
+			this.allNavigation().filter((item) => longestMatch(item) >= 0).forEach(mark);
+			return states;
+		}, ...ngDevMode ? [{ debugName: "highlightStates" }] : /* istanbul ignore next */ []);
+		this.shouldShowLabels = computed(() => !this.isCollapsed() || this.isExpandingOrCollapsing(), ...ngDevMode ? [{ debugName: "shouldShowLabels" }] : /* istanbul ignore next */ []);
 		this.overflowMenuConfig = computed(() => ({
 			...OVERFLOW_MENU_CONFIG,
 			panelClass: this.isCollapsed() ? "collapsed-menu" : "expanded-menu"
@@ -96,6 +129,24 @@ var SideNavigationComponent = class SideNavigationComponent {
 		this.navigate.emit(id);
 		this.autoCloseDrawer();
 	}
+	emitExpandedChange(item) {
+		this.expandedChange.emit({
+			id: item.id,
+			isExpanded: !item.isExpanded
+		});
+	}
+	emitTrailingAction(item, event) {
+		const trigger = event.target instanceof Element ? event.target.closest("button") : null;
+		if (!trigger) return;
+		const anchor = trigger.closest(".menu-item") ?? trigger;
+		trigger.focus({ preventScroll: true });
+		const popoverOffset = (anchor.closest("nav")?.getBoundingClientRect().right ?? 0) - anchor.getBoundingClientRect().right + POPOVER_GAP_FROM_RAIL;
+		this.trailingActionClicked.emit({
+			id: item.id,
+			anchor,
+			popoverOffset
+		});
+	}
 	onSelectMenuItem($event) {
 		this.accountMenuSelected.emit($event);
 		this.autoCloseDrawer();
@@ -103,6 +154,9 @@ var SideNavigationComponent = class SideNavigationComponent {
 	onEscapeKey() {
 		this.autoCloseDrawer();
 	}
+	allNavigation() {
+		return [...this.mainNavigation(), ...this.secondaryNavigation() ?? []];
+	}
 	autoCloseDrawer() {
 		if (this.isMobileOrTablet() && !this.isCollapsed()) this.toggleCollapsed({ announce: false });
 	}
@@ -244,6 +298,13 @@ var SideNavigationComponent = class SideNavigationComponent {
 					isRequired: false,
 					transformFunction: null
 				},
+				hasChevronTooltips: {
+					classPropertyName: "hasChevronTooltips",
+					publicName: "hasChevronTooltips",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
 				isCollapsed: {
 					classPropertyName: "isCollapsed",
 					publicName: "isCollapsed",
@@ -256,14 +317,16 @@ var SideNavigationComponent = class SideNavigationComponent {
 				isCollapsed: "isCollapsedChange",
 				mainCtaClicked: "mainCtaClicked",
 				navigate: "navigate",
+				expandedChange: "expandedChange",
+				trailingActionClicked: "trailingActionClicked",
 				accountMenuSelected: "accountMenuSelected",
 				logoClicked: "logoClicked"
 			},
 			host: { listeners: { "keydown.escape": "onEscapeKey()" } },
 			providers: [UiTranslatePipe],
 			ngImport: i0,
-			template: "<div class=\"mobile-navbar\">\n  <ui-logo [allowResizing]=\"true\" [width]=\"150\" [type]=\"logoType.DEFAULT\" (click)=\"logoClicked.emit()\"></ui-logo>\n\n  <ui-button\n    data-testid=\"navigation-collapse-mobile\"\n    data-test-role=\"navigation-collapse\"\n    [applicationTheme]=\"applicationTheme()\"\n    [variant]=\"'menuTrigger'\"\n    [iconName]=\"isCollapsed() ? 'Menu-burger' : 'Close'\"\n    [ariaLabel]=\"mobileToggleAriaLabelOverride() ?? (mobileToggleAriaKey() | uiTranslate | async) ?? ''\"\n    [ariaExpanded]=\"!isCollapsed()\"\n    [ariaControls]=\"drawerControlsId\"\n    [tooltip]=\"mobileToggleAriaLabelOverride() ?? (mobileToggleAriaKey() | uiTranslate | async) ?? ''\"\n    tooltipPosition=\"left\"\n    (buttonClickEvent)=\"toggleCollapsed()\"\n    class=\"navigation-collapse-button\"\n  ></ui-button>\n</div>\n\n<div class=\"main-container\">\n  <nav\n    [id]=\"drawerControlsId\"\n    role=\"navigation\"\n    [attr.aria-label]=\"navAriaLabel() ?? (translationKey.NAV | uiTranslate | async)\"\n    class=\"side-navigation-container\"\n    [class.collapsed]=\"isCollapsed()\"\n    [class.expanded]=\"!isCollapsed()\"\n    [cdkTrapFocus]=\"trapFocus()\"\n    [cdkTrapFocusAutoCapture]=\"trapFocus()\"\n  >\n    <div class=\"zone-logo-row\">\n      <div class=\"header\" [class.collapsed]=\"isCollapsed()\">\n        <ui-logo\n          class=\"logo-brandmark\"\n          [allowResizing]=\"true\"\n          [width]=\"19\"\n          [type]=\"logoType.PRIMARY_BRANDMARK_PINK\"\n          (click)=\"logoClicked.emit()\"\n        ></ui-logo>\n        <ui-logo\n          class=\"logo-lockup\"\n          [allowResizing]=\"true\"\n          [width]=\"136\"\n          [type]=\"logoType.DEFAULT\"\n          (click)=\"logoClicked.emit()\"\n        ></ui-logo>\n\n        <ui-button\n          data-testid=\"navigation-collapse\"\n          data-test-role=\"navigation-collapse\"\n          [applicationTheme]=\"applicationTheme()\"\n          [variant]=\"'menuTrigger'\"\n          [iconName]=\"isCollapsed() ? 'Sidebar-open-in-line' : 'Sidebar-close-in-line'\"\n          [ariaLabel]=\"toggleAriaLabelOverride() ?? (toggleAriaKey() | uiTranslate | async) ?? ''\"\n          [ariaPressed]=\"isCollapsed()\"\n          [tooltip]=\"toggleAriaLabelOverride() ?? (toggleAriaKey() | uiTranslate | async) ?? ''\"\n          tooltipPosition=\"below\"\n          (buttonClickEvent)=\"toggleCollapsed()\"\n          [class.collapsed]=\"isCollapsed()\"\n          class=\"navigation-collapse-button\"\n        ></ui-button>\n      </div>\n    </div>\n\n    <div class=\"zone-primary-nav\">\n      @if (mainCta(); as cta) {\n        <div class=\"main-cta\">\n          <ui-button\n            data-testid=\"main-cta\"\n            data-test-role=\"main-cta\"\n            [applicationTheme]=\"applicationTheme()\"\n            [fullWidth]=\"true\"\n            [variant]=\"cta.variant\"\n            iconPosition=\"left\"\n            [iconName]=\"cta.icon\"\n            [label]=\"isCollapsed() && !isExpandingOrCollapsing() ? '' : cta.label\"\n            [ariaLabel]=\"cta.label\"\n            [tooltip]=\"isCollapsed() ? cta.label : ''\"\n            tooltipPosition=\"right\"\n            (buttonClickEvent)=\"mainCtaClicked.emit()\"\n          ></ui-button>\n        </div>\n      }\n\n      <ul class=\"navigation-list\">\n        @for (item of mainNavigation(); track item.id) {\n          <li>\n            <ng-container [ngTemplateOutlet]=\"navigationItem\" [ngTemplateOutletContext]=\"{ item }\"></ng-container>\n          </li>\n        }\n      </ul>\n    </div>\n\n    <div class=\"zone-utility-nav\">\n      @if (secondaryNavigation(); as secondary) {\n        <ul class=\"navigation-list\">\n          @for (item of secondary; track item.id) {\n            <li>\n              <ng-container [ngTemplateOutlet]=\"navigationItem\" [ngTemplateOutletContext]=\"{ item }\"></ng-container>\n            </li>\n          }\n        </ul>\n      }\n    </div>\n\n    @if (account() || contentTemplateExtendedRef() || contentTemplateCollapsedRef()) {\n      <div class=\"zone-account\">\n        @if (contentTemplateExtendedRef(); as extendedRef) {\n          @if (!isCollapsed() && !isExpandingOrCollapsing()) {\n            <ng-container [ngTemplateOutlet]=\"extendedRef\"></ng-container>\n          }\n        }\n\n        @if (contentTemplateCollapsedRef(); as collapsedRef) {\n          @if (isCollapsed() || isExpandingOrCollapsing()) {\n            <ng-container [ngTemplateOutlet]=\"collapsedRef\"></ng-container>\n          }\n        }\n\n        @if (account(); as accountValue) {\n          <ui-overflow-menu\n            [applicationTheme]=\"applicationTheme()\"\n            [contentTemplateRef]=\"userInfo\"\n            [buttons]=\"accountValue.menu\"\n            [isDynamicMenu]=\"true\"\n            [class.collapsed]=\"isCollapsed() && !isExpandingOrCollapsing()\"\n            (selectItem)=\"onSelectMenuItem($event)\"\n            [menuConfig]=\"overflowMenuConfig()\"\n          ></ui-overflow-menu>\n        }\n      </div>\n    }\n  </nav>\n  <div class=\"app-container\" [class.collapsed]=\"isCollapsed()\" [class.expanded]=\"!isCollapsed()\">\n    @if (appContentTemplateRef(); as appRef) {\n      <ng-container [ngTemplateOutlet]=\"appRef\"></ng-container>\n    }\n    @if (isMobileOrTablet() && !isCollapsed()) {\n      <button\n        type=\"button\"\n        class=\"backdrop\"\n        [attr.aria-label]=\"mobileCloseLabel() ?? (translationKey.MOBILE_CLOSE | uiTranslate | async) ?? ''\"\n        (click)=\"toggleCollapsed()\"\n      ></button>\n    }\n  </div>\n</div>\n\n<ng-template #navigationItem let-item=\"item\">\n  @if (item) {\n    <div class=\"menu-item\" [attr.aria-current]=\"activeRoutesMap().get(item.url) ? 'page' : null\">\n      <ui-button\n        [attr.data-testid]=\"item.id\"\n        data-test-role=\"menu-item\"\n        [applicationTheme]=\"applicationTheme()\"\n        [fullWidth]=\"true\"\n        [disabledScaleOnClick]=\"true\"\n        [variant]=\"'menuCell'\"\n        iconPosition=\"left\"\n        [iconName]=\"item.icon\"\n        [label]=\"isCollapsed() && !isExpandingOrCollapsing() ? '' : item.text\"\n        (buttonClickEvent)=\"onNavigateClick(item.id)\"\n        (keydown.Tab)=\"$event.stopPropagation()\"\n        (keydown.shift.tab)=\"$event.stopPropagation()\"\n        [ariaLabel]=\"item.text\"\n        [class.active]=\"activeRoutesMap().get(item.url)\"\n        [buttonBadgeConfig]=\"\n          isCollapsed() && !isExpandingOrCollapsing() ? undefined : $safeNavigationMigration(item?.badgeOptions)\n        \"\n        [tooltip]=\"isCollapsed() ? item.text : undefined\"\n        tooltipPosition=\"right\"\n        [iconFilled]=\"!!activeRoutesMap().get(item.url)\"\n      ></ui-button>\n    </div>\n  }\n</ng-template>\n\n<ng-template #userInfo>\n  @if (account(); as accountValue) {\n    <div class=\"user-info\">\n      <ui-avatar [size]=\"isCollapsed() ? avatarSize.MEDIUM : avatarSize.SMALL\" [name]=\"accountValue.name\"></ui-avatar>\n      @if (!isCollapsed()) {\n        <span class=\"user-name\">{{ accountValue.name }}</span>\n        <ui-icon class=\"user-chevron\" name=\"Arrow-chevron-right-in-line\" size=\"24\" aria-hidden=\"true\"></ui-icon>\n      }\n    </div>\n  }\n</ng-template>\n",
-			styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{display:flex;flex-direction:column}.mobile-navbar{background:#fff;display:flex;flex-direction:row;justify-content:space-between;align-items:center;width:100vw;position:fixed;top:0;left:0;padding:16px 24px;height:64px;z-index:11}.mobile-navbar ui-logo{top:2px}@media(min-width:600px){.mobile-navbar{display:none}}.main-container{display:flex;flex-direction:row;width:100vw;height:100vh}.main-container .app-container{flex:1;min-width:0;overflow:hidden auto;transition:margin-left .18s cubic-bezier(.4,0,.2,1),padding .18s cubic-bezier(.4,0,.2,1)}.main-container .app-container .backdrop{display:none;padding:0;border:0;background:transparent;cursor:pointer}.main-container .app-container.expanded .backdrop{display:block}@media(prefers-reduced-motion:reduce){.main-container .app-container{transition:none}}@media(max-width:600px){.main-container .app-container{margin-top:64px}.main-container .app-container.expanded .backdrop{position:fixed;top:64px;left:240px;background:#00000040;width:calc(100vw - 240px);height:calc(100vh - 64px);z-index:8}}@media(min-width:600px)and (max-width:1024px){.main-container .app-container{margin-left:72px}.main-container .app-container.expanded .backdrop{position:absolute;top:0;left:0;background:#00000040;width:100%;height:100%;z-index:2}}@media(min-width:1024px){.main-container .app-container.collapsed{margin-left:72px}.main-container .app-container.expanded{margin-left:240px}}.side-navigation-container{position:fixed;z-index:10;display:flex;flex-direction:column;background:#fff;height:100vh;width:240px;border-right:1px solid #e9e9e9;transition:width .18s cubic-bezier(.4,0,.2,1),left .18s cubic-bezier(.4,0,.2,1)}@media(prefers-reduced-motion:reduce){.side-navigation-container{transition:none}}.side-navigation-container.collapsed{width:72px}@media(max-width:600px){.side-navigation-container{width:240px;top:64px;height:calc(100vh - 64px)}.side-navigation-container .zone-logo-row{display:none!important}.side-navigation-container.expanded{left:0}.side-navigation-container.collapsed{width:240px;left:-240px}}.side-navigation-container .zone-logo-row{flex:0 0 auto;height:56px;padding:16px 12px 16px 26px;display:flex;align-items:center;border-bottom:1px solid #e9e9e9;position:relative}.side-navigation-container .zone-logo-row .header{display:flex;align-items:center;justify-content:space-between;width:100%;gap:8px}.side-navigation-container .zone-logo-row .header ui-logo{cursor:pointer;flex:0 0 auto}.side-navigation-container .zone-logo-row .header .logo-brandmark{position:absolute;left:26px;top:50%;transform:translateY(-50%);opacity:0;pointer-events:none;transition:opacity 90ms cubic-bezier(.4,0,.2,1) 90ms}.side-navigation-container .zone-logo-row .header .logo-lockup{opacity:1;max-width:136px;overflow:hidden;transition:opacity .18s cubic-bezier(.4,0,.2,1),max-width .18s cubic-bezier(.4,0,.2,1)}.side-navigation-container .zone-logo-row .header .navigation-collapse-button ::ng-deep .mat-mdc-button-persistent-ripple{background:#fff}.side-navigation-container .zone-logo-row .navigation-collapse-button{position:absolute;top:8px;right:12px;z-index:2;background:transparent;border:1px solid transparent;border-radius:50%;box-shadow:0 2px 8px #0000;transform:translate(0);transition:right .18s cubic-bezier(.4,0,.2,1),transform .18s cubic-bezier(.4,0,.2,1),background .18s cubic-bezier(.4,0,.2,1),border-color .18s cubic-bezier(.4,0,.2,1),box-shadow .18s cubic-bezier(.4,0,.2,1)}.side-navigation-container.collapsed .zone-logo-row .header .logo-brandmark{opacity:1;pointer-events:auto;transition:opacity 90ms cubic-bezier(.4,0,.2,1)}.side-navigation-container.collapsed .zone-logo-row .header .logo-lockup{opacity:0;max-width:0;pointer-events:none}.side-navigation-container.collapsed .zone-logo-row .navigation-collapse-button{top:8px;right:0;transform:translate(50%);background:#fff;border-color:#e9e9e9;box-shadow:0 2px 8px #00000014}.side-navigation-container .zone-primary-nav{flex:1 1 auto;min-height:0;overflow:hidden auto;display:flex;flex-direction:column;gap:8px;padding:12px}.side-navigation-container .zone-primary-nav .main-cta{width:100%}.side-navigation-container .zone-primary-nav .main-cta ::ng-deep ui-button button{overflow:hidden;padding-left:12px!important;padding-right:12px!important}.side-navigation-container .zone-primary-nav .main-cta ::ng-deep ui-button button .icon-label-wrapper{justify-content:flex-start;width:100%}.side-navigation-container .zone-primary-nav .main-cta ::ng-deep ui-button button span.icon{transition:margin-right .18s cubic-bezier(.4,0,.2,1)}.side-navigation-container .zone-primary-nav .main-cta ::ng-deep ui-button button span.label{opacity:1;transition:opacity .18s cubic-bezier(.4,0,.2,1)}.side-navigation-container.collapsed .zone-primary-nav .main-cta ::ng-deep ui-button button span.icon{margin-right:0!important}.side-navigation-container.collapsed .zone-primary-nav .main-cta ::ng-deep ui-button button span.label{opacity:0;pointer-events:none}.side-navigation-container .zone-utility-nav{flex:0 0 auto;display:flex;flex-direction:column;gap:8px;padding:12px;border-top:1px solid #e9e9e9;align-items:stretch}.side-navigation-container .zone-utility-nav:empty{display:none}.side-navigation-container.collapsed .zone-account{align-items:center;padding:12px}.side-navigation-container.collapsed .zone-account .user-info{transform:translate(-8px)}.side-navigation-container .zone-account{flex:0 0 auto;width:100%;padding:12px;border-top:1px solid #e9e9e9;background:#fff;display:flex;flex-direction:column;gap:8px;align-items:stretch}.side-navigation-container .zone-account>ui-button,.side-navigation-container .zone-account>a,.side-navigation-container .zone-account>button{width:100%}.side-navigation-container .zone-account ui-overflow-menu{width:100%}.side-navigation-container .zone-account ui-avatar ::ng-deep .avatar-container{transition:width .18s cubic-bezier(.4,0,.2,1),height .18s cubic-bezier(.4,0,.2,1),font-size .18s cubic-bezier(.4,0,.2,1)}.side-navigation-container .zone-account .user-info{display:flex;align-items:center;padding:8px 0;width:100%;gap:12px;transition:transform .18s cubic-bezier(.4,0,.2,1);transform:translate(0)}.side-navigation-container .zone-account .user-info .user-name,.side-navigation-container .zone-account .user-info .user-chevron{opacity:1;transition:opacity .18s cubic-bezier(.4,0,.2,1)}@starting-style{.side-navigation-container .zone-account .user-info .user-name,.side-navigation-container .zone-account .user-info .user-chevron{opacity:0}}.side-navigation-container .zone-account .user-info .user-name{flex:1 1 auto;font-weight:500;font-size:14px;line-height:22px;font-family:ModernGothic,sans-serif;color:#242424;text-align:start;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.side-navigation-container .zone-account .user-info .user-chevron{flex:0 0 auto;color:#666}.side-navigation-container .navigation-list{list-style:none;margin:0;padding:0;width:100%;display:flex;flex-direction:column;gap:8px}.side-navigation-container .navigation-list li{width:100%}.side-navigation-container .menu-item{width:100%;height:40px;display:flex;font-size:14px;font-weight:700;font-family:ModernGothic,sans-serif;flex-direction:row;align-items:center;cursor:pointer}.side-navigation-container .menu-item ui-button{width:100%}.side-navigation-container .menu-item ::ng-deep ui-button button{padding:8px 12px!important;border-radius:10px!important;min-height:40px;overflow:hidden}.side-navigation-container .menu-item ::ng-deep ui-button button span.icon{margin-right:12px!important;transition:margin-right .18s cubic-bezier(.4,0,.2,1)}.side-navigation-container .menu-item ::ng-deep ui-button button span.label{transition:opacity .18s cubic-bezier(.4,0,.2,1),max-width .18s cubic-bezier(.4,0,.2,1);opacity:1;max-width:240px}.side-navigation-container .menu-item ::ng-deep ui-button.active button{background-color:#fff2fc!important;color:#a90686!important}.side-navigation-container .menu-item ::ng-deep ui-button.active button .icon,.side-navigation-container .menu-item ::ng-deep ui-button.active button .label{color:#a90686!important}.side-navigation-container .menu-item ::ng-deep ui-button.active button .mat-mdc-button-touch-target{background-color:transparent}.side-navigation-container.collapsed .menu-item ::ng-deep ui-button button{width:100%!important}.side-navigation-container.collapsed .menu-item ::ng-deep ui-button button span.icon{margin-right:0!important}.side-navigation-container.collapsed .menu-item ::ng-deep ui-button button span.label{opacity:0;max-width:0;pointer-events:none}@media(prefers-reduced-motion:reduce){.side-navigation-container .menu-item ::ng-deep ui-button button,.side-navigation-container .menu-item ::ng-deep ui-button button span.icon,.side-navigation-container .menu-item ::ng-deep ui-button button span.label,.side-navigation-container .zone-logo-row .header .logo-brandmark,.side-navigation-container .zone-logo-row .header .logo-lockup,.side-navigation-container .zone-logo-row .navigation-collapse-button{transition:none}}::ng-deep ui-button button.mat-mdc-unelevated-button.menuCell,::ng-deep ui-overflow-menu button.mat-mdc-menu-trigger.content-template{outline-offset:-2px!important}::ng-deep ui-button button.mat-mdc-unelevated-button.menuCell:hover,::ng-deep ui-overflow-menu button.mat-mdc-menu-trigger.content-template:hover{background-color:#f4f4f4!important}::ng-deep ui-button button.mat-mdc-unelevated-button.menuCell:active,::ng-deep ui-overflow-menu button.mat-mdc-menu-trigger.content-template:active{background-color:#e9e9e9!important}::ng-deep ui-button.active button.mat-mdc-unelevated-button.menuCell:hover{background-color:#ffe6fa!important}::ng-deep ui-overflow-menu button.overflow-menu-opener.content-template{padding:0 8px}@media(min-width:600px){::ng-deep .cdk-overlay-connected-position-bounding-box:has(.cdk-overlay-pane .collapsed-menu){left:78px!important}::ng-deep .cdk-overlay-connected-position-bounding-box:has(.cdk-overlay-pane .expanded-menu){left:246px!important}}@media(max-width:599px){::ng-deep .cdk-overlay-pane .mat-mdc-menu-panel.expanded-menu,::ng-deep .cdk-overlay-pane .mat-mdc-menu-panel.collapsed-menu{max-width:calc(100vw - 32px);min-width:0}}::ng-deep .cdk-overlay-pane .mat-mdc-menu-panel.expanded-menu,::ng-deep .cdk-overlay-pane .mat-mdc-menu-panel.collapsed-menu{min-width:280px}::ng-deep .cdk-overlay-pane .mat-mdc-menu-panel.expanded-menu button.mat-mdc-menu-item.cdk-keyboard-focused,::ng-deep .cdk-overlay-pane .mat-mdc-menu-panel.collapsed-menu button.mat-mdc-menu-item.cdk-keyboard-focused{background-color:#f4f4f4}::ng-deep .cdk-overlay-pane .mat-mdc-menu-panel.expanded-menu button.mat-mdc-menu-item.cdk-keyboard-focused.is-destructive,::ng-deep .cdk-overlay-pane .mat-mdc-menu-panel.collapsed-menu button.mat-mdc-menu-item.cdk-keyboard-focused.is-destructive{background-color:#ffeae6}\n"],
+			template: "<div class=\"mobile-navbar\">\n  <ui-logo [allowResizing]=\"true\" [width]=\"150\" [type]=\"logoType.DEFAULT\" (click)=\"logoClicked.emit()\"></ui-logo>\n\n  <ui-button\n    data-testid=\"navigation-collapse-mobile\"\n    data-test-role=\"navigation-collapse\"\n    [applicationTheme]=\"applicationTheme()\"\n    [variant]=\"'menuTrigger'\"\n    [iconName]=\"isCollapsed() ? 'Menu-burger' : 'Close'\"\n    [ariaLabel]=\"mobileToggleAriaLabelOverride() ?? (mobileToggleAriaKey() | uiTranslate | async) ?? ''\"\n    [ariaExpanded]=\"!isCollapsed()\"\n    [ariaControls]=\"drawerControlsId\"\n    [tooltip]=\"mobileToggleAriaLabelOverride() ?? (mobileToggleAriaKey() | uiTranslate | async) ?? ''\"\n    tooltipPosition=\"left\"\n    (buttonClickEvent)=\"toggleCollapsed()\"\n    class=\"navigation-collapse-button\"\n  ></ui-button>\n</div>\n\n<div class=\"main-container\">\n  <nav\n    [id]=\"drawerControlsId\"\n    role=\"navigation\"\n    [attr.aria-label]=\"navAriaLabel() ?? (translationKey.NAV | uiTranslate | async)\"\n    class=\"side-navigation-container\"\n    [class.collapsed]=\"isCollapsed()\"\n    [class.expanded]=\"!isCollapsed()\"\n    [cdkTrapFocus]=\"trapFocus()\"\n    [cdkTrapFocusAutoCapture]=\"trapFocus()\"\n  >\n    <div class=\"zone-logo-row\">\n      <div class=\"header\" [class.collapsed]=\"isCollapsed()\">\n        <ui-logo\n          class=\"logo-brandmark\"\n          [allowResizing]=\"true\"\n          [width]=\"19\"\n          [type]=\"logoType.PRIMARY_BRANDMARK_PINK\"\n          (click)=\"logoClicked.emit()\"\n        ></ui-logo>\n        <ui-logo\n          class=\"logo-lockup\"\n          [allowResizing]=\"true\"\n          [width]=\"136\"\n          [type]=\"logoType.DEFAULT\"\n          (click)=\"logoClicked.emit()\"\n        ></ui-logo>\n\n        <ui-button\n          data-testid=\"navigation-collapse\"\n          data-test-role=\"navigation-collapse\"\n          [applicationTheme]=\"applicationTheme()\"\n          [variant]=\"'menuTrigger'\"\n          [iconName]=\"isCollapsed() ? 'Sidebar-open-in-line' : 'Sidebar-close-in-line'\"\n          [ariaLabel]=\"toggleAriaLabelOverride() ?? (toggleAriaKey() | uiTranslate | async) ?? ''\"\n          [ariaPressed]=\"isCollapsed()\"\n          [tooltip]=\"toggleAriaLabelOverride() ?? (toggleAriaKey() | uiTranslate | async) ?? ''\"\n          tooltipPosition=\"below\"\n          (buttonClickEvent)=\"toggleCollapsed()\"\n          [class.collapsed]=\"isCollapsed()\"\n          class=\"navigation-collapse-button\"\n        ></ui-button>\n      </div>\n    </div>\n\n    <div class=\"zone-primary-nav\">\n      @if (mainCta(); as cta) {\n        <div class=\"main-cta\">\n          <ui-button\n            data-testid=\"main-cta\"\n            data-test-role=\"main-cta\"\n            [applicationTheme]=\"applicationTheme()\"\n            [fullWidth]=\"true\"\n            [variant]=\"cta.variant\"\n            iconPosition=\"left\"\n            [iconName]=\"cta.icon\"\n            [label]=\"isCollapsed() && !isExpandingOrCollapsing() ? '' : cta.label\"\n            [ariaLabel]=\"cta.label\"\n            [tooltip]=\"isCollapsed() ? cta.label : ''\"\n            tooltipPosition=\"right\"\n            (buttonClickEvent)=\"mainCtaClicked.emit()\"\n          ></ui-button>\n        </div>\n      }\n\n      <ul class=\"navigation-list\">\n        @for (item of mainNavigation(); track item.id) {\n          <li>\n            <ng-container\n              [ngTemplateOutlet]=\"navigationItem\"\n              [ngTemplateOutletContext]=\"{ item, level: 0 }\"\n            ></ng-container>\n          </li>\n        }\n      </ul>\n    </div>\n\n    <div class=\"zone-utility-nav\">\n      @if (secondaryNavigation(); as secondary) {\n        <ul class=\"navigation-list\">\n          @for (item of secondary; track item.id) {\n            <li>\n              <ng-container\n                [ngTemplateOutlet]=\"navigationItem\"\n                [ngTemplateOutletContext]=\"{ item, level: 0 }\"\n              ></ng-container>\n            </li>\n          }\n        </ul>\n      }\n    </div>\n\n    @if (account() || contentTemplateExtendedRef() || contentTemplateCollapsedRef()) {\n      <div class=\"zone-account\">\n        @if (contentTemplateExtendedRef(); as extendedRef) {\n          @if (!isCollapsed() && !isExpandingOrCollapsing()) {\n            <ng-container [ngTemplateOutlet]=\"extendedRef\"></ng-container>\n          }\n        }\n\n        @if (contentTemplateCollapsedRef(); as collapsedRef) {\n          @if (isCollapsed() || isExpandingOrCollapsing()) {\n            <ng-container [ngTemplateOutlet]=\"collapsedRef\"></ng-container>\n          }\n        }\n\n        @if (account(); as accountValue) {\n          <ui-overflow-menu\n            [applicationTheme]=\"applicationTheme()\"\n            [contentTemplateRef]=\"userInfo\"\n            [buttons]=\"accountValue.menu\"\n            [isDynamicMenu]=\"true\"\n            [class.collapsed]=\"isCollapsed() && !isExpandingOrCollapsing()\"\n            (selectItem)=\"onSelectMenuItem($event)\"\n            [menuConfig]=\"overflowMenuConfig()\"\n          ></ui-overflow-menu>\n        }\n      </div>\n    }\n  </nav>\n  <div class=\"app-container\" [class.collapsed]=\"isCollapsed()\" [class.expanded]=\"!isCollapsed()\">\n    @if (appContentTemplateRef(); as appRef) {\n      <ng-container [ngTemplateOutlet]=\"appRef\"></ng-container>\n    }\n    @if (isMobileOrTablet() && !isCollapsed()) {\n      <button\n        type=\"button\"\n        class=\"backdrop\"\n        [attr.aria-label]=\"mobileCloseLabel() ?? (translationKey.MOBILE_CLOSE | uiTranslate | async) ?? ''\"\n        (click)=\"toggleCollapsed()\"\n      ></button>\n    }\n  </div>\n</div>\n\n<ng-template #navigationItem let-item=\"item\" let-level=\"level\">\n  @if (item) {\n    @let highlight = highlightStates().get(item.id);\n    @let hasChildren = !!item.children?.length;\n    @let action = item.trailingAction;\n    @let highlighted =\n      highlight === 'active' || !!action?.isExpanded || (highlight === 'ancestor' && !shouldShowLabels());\n    @let activeSection = !highlighted && highlight === 'ancestor' && level === 0;\n    @let childListId = 'side-navigation-children-' + item.id;\n    @let newLabel = item.isNew ? (translationKey.NEW | uiTranslate | async) : null;\n    @let accessibleName = item.text + (item.status ? ', ' + item.status.label : '') + (newLabel ? ', ' + newLabel : '');\n    <div\n      class=\"menu-item\"\n      [class.nested]=\"level > 0\"\n      [class.with-status]=\"!!item.status\"\n      [class.with-action]=\"shouldShowLabels() && (hasChildren || !!action)\"\n      [class.with-new]=\"shouldShowLabels() && !!item.isNew\"\n      [attr.aria-current]=\"\n        highlight === 'active' ? 'page' : highlight === 'ancestor' && !shouldShowLabels() ? 'true' : null\n      \"\n    >\n      @if (item.status && shouldShowLabels()) {\n        <span [class]=\"'status-dot status-' + item.status.color\" aria-hidden=\"true\"></span>\n      }\n      <ui-button\n        class=\"menu-item-button\"\n        [attr.data-testid]=\"item.id\"\n        data-test-role=\"menu-item\"\n        [applicationTheme]=\"applicationTheme()\"\n        [fullWidth]=\"true\"\n        [disabledScaleOnClick]=\"true\"\n        [variant]=\"'menuCell'\"\n        [size]=\"level > 0 ? 'medium' : 'big'\"\n        iconPosition=\"left\"\n        [iconName]=\"item.status ? undefined : item.icon\"\n        [label]=\"shouldShowLabels() ? item.text : ''\"\n        [isSingleLineLabel]=\"level > 0 || hasChildren || !!action || !!item.isNew\"\n        (buttonClickEvent)=\"action ? emitTrailingAction(item, $event) : onNavigateClick(item.id)\"\n        [ariaExpanded]=\"action?.isExpanded\"\n        (keydown.Tab)=\"$event.stopPropagation()\"\n        (keydown.shift.tab)=\"$event.stopPropagation()\"\n        [ariaLabel]=\"accessibleName\"\n        [class.active]=\"highlighted\"\n        [class.ancestor]=\"activeSection\"\n        [buttonBadgeConfig]=\"shouldShowLabels() ? $safeNavigationMigration(item?.badgeOptions) : undefined\"\n        [tooltip]=\"isCollapsed() ? item.text : undefined\"\n        tooltipPosition=\"right\"\n        [iconFilled]=\"highlighted\"\n      ></ui-button>\n      @if (shouldShowLabels()) {\n        @if (item.isNew) {\n          <span class=\"new-dot\" aria-hidden=\"true\"></span>\n        }\n        @if (action) {\n          <ui-button\n            class=\"menu-item-action\"\n            variant=\"icon-button\"\n            size=\"small\"\n            iconButtonShape=\"square\"\n            [justIcon]=\"true\"\n            [disabledScaleOnClick]=\"true\"\n            [applicationTheme]=\"applicationTheme()\"\n            [iconName]=\"action.icon\"\n            [testId]=\"item.id + '-action'\"\n            [ariaLabel]=\"action.ariaLabel\"\n            [ariaExpanded]=\"action.isExpanded\"\n            [ariaHasPopup]=\"action.isExpanded === undefined ? undefined : 'dialog'\"\n            [tooltip]=\"hasChevronTooltips() ? action.ariaLabel : ''\"\n            (buttonClickEvent)=\"emitTrailingAction(item, $event)\"\n            (keydown.Tab)=\"$event.stopPropagation()\"\n            (keydown.shift.tab)=\"$event.stopPropagation()\"\n          ></ui-button>\n        } @else if (hasChildren) {\n          @let submenuLabel = (translationKey.SUBMENU | uiTranslate: { label: item.text } | async) ?? '';\n          <ui-button\n            class=\"menu-item-action\"\n            variant=\"icon-button\"\n            size=\"small\"\n            iconButtonShape=\"square\"\n            [justIcon]=\"true\"\n            [disabledScaleOnClick]=\"true\"\n            [applicationTheme]=\"applicationTheme()\"\n            [iconName]=\"item.isExpanded ? 'Arrow-chevron-up-in-line' : 'Arrow-chevron-down-in-line'\"\n            [testId]=\"item.id + '-toggle'\"\n            [ariaLabel]=\"submenuLabel\"\n            [ariaExpanded]=\"!!item.isExpanded\"\n            [ariaControls]=\"item.isExpanded ? childListId : undefined\"\n            [tooltip]=\"hasChevronTooltips() ? submenuLabel : ''\"\n            (buttonClickEvent)=\"emitExpandedChange(item)\"\n            (keydown.Tab)=\"$event.stopPropagation()\"\n            (keydown.shift.tab)=\"$event.stopPropagation()\"\n          ></ui-button>\n        }\n      }\n    </div>\n    @if (hasChildren && item.isExpanded && shouldShowLabels()) {\n      <ul class=\"navigation-list navigation-sublist\" [class.tree]=\"level > 0\" [id]=\"childListId\">\n        @for (child of item.children; track child.id) {\n          <li>\n            <ng-container\n              [ngTemplateOutlet]=\"navigationItem\"\n              [ngTemplateOutletContext]=\"{ item: child, level: level + 1 }\"\n            ></ng-container>\n          </li>\n        }\n      </ul>\n    }\n  }\n</ng-template>\n\n<ng-template #userInfo>\n  @if (account(); as accountValue) {\n    <div class=\"user-info\">\n      <ui-avatar [size]=\"isCollapsed() ? avatarSize.MEDIUM : avatarSize.SMALL\" [name]=\"accountValue.name\"></ui-avatar>\n      @if (!isCollapsed()) {\n        <span class=\"user-name\">{{ accountValue.name }}</span>\n        <ui-icon class=\"user-chevron\" name=\"Arrow-chevron-right-in-line\" size=\"24\" aria-hidden=\"true\"></ui-icon>\n      }\n    </div>\n  }\n</ng-template>\n",
+			styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{display:flex;flex-direction:column}.mobile-navbar{background:#fff;display:flex;flex-direction:row;justify-content:space-between;align-items:center;width:100vw;position:fixed;top:0;left:0;padding:16px 24px;height:64px;z-index:11}.mobile-navbar ui-logo{top:2px}@media(min-width:600px){.mobile-navbar{display:none}}.main-container{display:flex;flex-direction:row;width:100vw;height:100vh}.main-container .app-container{flex:1;min-width:0;overflow:hidden auto;transition:margin-left .18s cubic-bezier(.4,0,.2,1),padding .18s cubic-bezier(.4,0,.2,1)}.main-container .app-container .backdrop{display:none;padding:0;border:0;background:transparent;cursor:pointer}.main-container .app-container.expanded .backdrop{display:block}@media(prefers-reduced-motion:reduce){.main-container .app-container{transition:none}}@media(max-width:600px){.main-container .app-container{margin-top:64px}.main-container .app-container.expanded .backdrop{position:fixed;top:64px;left:240px;background:#00000040;width:calc(100vw - 240px);height:calc(100vh - 64px);z-index:8}}@media(min-width:600px)and (max-width:1024px){.main-container .app-container{margin-left:72px}.main-container .app-container.expanded .backdrop{position:absolute;top:0;left:0;background:#00000040;width:100%;height:100%;z-index:2}}@media(min-width:1024px){.main-container .app-container.collapsed{margin-left:72px}.main-container .app-container.expanded{margin-left:240px}}.side-navigation-container{position:fixed;z-index:10;display:flex;flex-direction:column;background:#fff;height:100vh;width:240px;border-right:1px solid #e9e9e9;transition:width .18s cubic-bezier(.4,0,.2,1),left .18s cubic-bezier(.4,0,.2,1)}@media(prefers-reduced-motion:reduce){.side-navigation-container{transition:none}}.side-navigation-container.collapsed{width:72px}@media(max-width:600px){.side-navigation-container{width:240px;top:64px;height:calc(100vh - 64px)}.side-navigation-container .zone-logo-row{display:none!important}.side-navigation-container.expanded{left:0}.side-navigation-container.collapsed{width:240px;left:-240px}}.side-navigation-container .zone-logo-row{flex:0 0 auto;height:56px;padding:16px 12px 16px 26px;display:flex;align-items:center;border-bottom:1px solid #e9e9e9;position:relative}.side-navigation-container .zone-logo-row .header{display:flex;align-items:center;justify-content:space-between;width:100%;gap:8px}.side-navigation-container .zone-logo-row .header ui-logo{cursor:pointer;flex:0 0 auto}.side-navigation-container .zone-logo-row .header .logo-brandmark{position:absolute;left:26px;top:50%;transform:translateY(-50%);opacity:0;pointer-events:none;transition:opacity 90ms cubic-bezier(.4,0,.2,1) 90ms}.side-navigation-container .zone-logo-row .header .logo-lockup{opacity:1;max-width:136px;overflow:hidden;transition:opacity .18s cubic-bezier(.4,0,.2,1),max-width .18s cubic-bezier(.4,0,.2,1)}.side-navigation-container .zone-logo-row .header .navigation-collapse-button ::ng-deep .mat-mdc-button-persistent-ripple{background:#fff}.side-navigation-container .zone-logo-row .navigation-collapse-button{position:absolute;top:8px;right:12px;z-index:2;background:transparent;border:1px solid transparent;border-radius:50%;box-shadow:0 2px 8px #0000;transform:translate(0);transition:right .18s cubic-bezier(.4,0,.2,1),transform .18s cubic-bezier(.4,0,.2,1),background .18s cubic-bezier(.4,0,.2,1),border-color .18s cubic-bezier(.4,0,.2,1),box-shadow .18s cubic-bezier(.4,0,.2,1)}.side-navigation-container.collapsed .zone-logo-row .header .logo-brandmark{opacity:1;pointer-events:auto;transition:opacity 90ms cubic-bezier(.4,0,.2,1)}.side-navigation-container.collapsed .zone-logo-row .header .logo-lockup{opacity:0;max-width:0;pointer-events:none}.side-navigation-container.collapsed .zone-logo-row .navigation-collapse-button{top:8px;right:0;transform:translate(50%);background:#fff;border-color:#e9e9e9;box-shadow:0 2px 8px #00000014}.side-navigation-container .zone-primary-nav{flex:1 1 auto;min-height:0;overflow:hidden auto;display:flex;flex-direction:column;gap:8px;padding:12px}.side-navigation-container .zone-primary-nav .main-cta{width:100%}.side-navigation-container .zone-primary-nav .main-cta ::ng-deep ui-button button{overflow:hidden;padding-left:12px!important;padding-right:12px!important}.side-navigation-container .zone-primary-nav .main-cta ::ng-deep ui-button button .icon-label-wrapper{justify-content:flex-start;width:100%}.side-navigation-container .zone-primary-nav .main-cta ::ng-deep ui-button button span.icon{transition:margin-right .18s cubic-bezier(.4,0,.2,1)}.side-navigation-container .zone-primary-nav .main-cta ::ng-deep ui-button button span.label{opacity:1;transition:opacity .18s cubic-bezier(.4,0,.2,1)}.side-navigation-container.collapsed .zone-primary-nav .main-cta ::ng-deep ui-button button span.icon{margin-right:0!important}.side-navigation-container.collapsed .zone-primary-nav .main-cta ::ng-deep ui-button button span.label{opacity:0;pointer-events:none}.side-navigation-container .zone-utility-nav{flex:0 0 auto;display:flex;flex-direction:column;gap:8px;padding:12px;border-top:1px solid #e9e9e9;align-items:stretch}.side-navigation-container .zone-utility-nav:empty{display:none}.side-navigation-container.collapsed .zone-account{align-items:center;padding:12px}.side-navigation-container.collapsed .zone-account .user-info{transform:translate(-8px)}.side-navigation-container .zone-account{flex:0 0 auto;width:100%;padding:12px;border-top:1px solid #e9e9e9;background:#fff;display:flex;flex-direction:column;gap:8px;align-items:stretch}.side-navigation-container .zone-account>ui-button,.side-navigation-container .zone-account>a,.side-navigation-container .zone-account>button{width:100%}.side-navigation-container .zone-account ui-overflow-menu{width:100%}.side-navigation-container .zone-account ui-avatar ::ng-deep .avatar-container{transition:width .18s cubic-bezier(.4,0,.2,1),height .18s cubic-bezier(.4,0,.2,1),font-size .18s cubic-bezier(.4,0,.2,1)}.side-navigation-container .zone-account .user-info{display:flex;align-items:center;padding:8px 0;width:100%;gap:12px;transition:transform .18s cubic-bezier(.4,0,.2,1);transform:translate(0)}.side-navigation-container .zone-account .user-info .user-name,.side-navigation-container .zone-account .user-info .user-chevron{opacity:1;transition:opacity .18s cubic-bezier(.4,0,.2,1)}@starting-style{.side-navigation-container .zone-account .user-info .user-name,.side-navigation-container .zone-account .user-info .user-chevron{opacity:0}}.side-navigation-container .zone-account .user-info .user-name{flex:1 1 auto;font-weight:500;font-size:14px;line-height:22px;font-family:ModernGothic,sans-serif;color:#242424;text-align:start;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.side-navigation-container .zone-account .user-info .user-chevron{flex:0 0 auto;color:#666}.side-navigation-container .navigation-list{list-style:none;margin:0;padding:0;width:100%;display:flex;flex-direction:column;gap:8px}.side-navigation-container .navigation-list li{width:100%}.side-navigation-container .navigation-sublist{margin-top:8px}.side-navigation-container .navigation-sublist.tree{width:auto;margin:0 0 0 20px;padding:8px 0 0 15px;border-left:1px solid #d3d3d3}.side-navigation-container .menu-item{position:relative;width:100%;height:40px;display:flex;font-size:14px;font-weight:700;font-family:ModernGothic,sans-serif;flex-direction:row;align-items:center;cursor:pointer}.side-navigation-container .menu-item ui-button.menu-item-button{width:100%}.side-navigation-container .menu-item ::ng-deep ui-button.menu-item-button button{padding:8px 12px!important;border-radius:10px!important;min-height:40px;overflow:hidden}.side-navigation-container .menu-item ::ng-deep ui-button.menu-item-button button span.icon{margin-right:12px!important;transition:margin-right .18s cubic-bezier(.4,0,.2,1)}.side-navigation-container .menu-item ::ng-deep ui-button.menu-item-button button span.label{transition:opacity .18s cubic-bezier(.4,0,.2,1),max-width .18s cubic-bezier(.4,0,.2,1);opacity:1;max-width:240px}.side-navigation-container .menu-item ::ng-deep ui-button.menu-item-button.ancestor button{background-color:#f4f4f4!important}.side-navigation-container .menu-item ::ng-deep ui-button.menu-item-button.ancestor button:hover{background-color:#e9e9e9!important}.side-navigation-container .menu-item ::ng-deep ui-button.menu-item-button.active button{background-color:#fff2fc!important;color:#a90686!important}.side-navigation-container .menu-item ::ng-deep ui-button.menu-item-button.active button .icon,.side-navigation-container .menu-item ::ng-deep ui-button.menu-item-button.active button .label{color:#a90686!important}.side-navigation-container .menu-item ::ng-deep ui-button.menu-item-button.active button .mat-mdc-button-touch-target{background-color:transparent}.side-navigation-container .menu-item ::ng-deep ui-button.menu-item-button button.menuCell span.label{font-weight:400}.side-navigation-container .menu-item.nested ::ng-deep ui-button.menu-item-button:not(.active) button.menuCell span.label{font-weight:300}.side-navigation-container .menu-item ::ng-deep ui-button.menu-item-button.active button.menuCell span.label{font-weight:500}.side-navigation-container .menu-item:is(.with-action,.with-new) ::ng-deep ui-button.menu-item-button button{padding-right:40px!important}.side-navigation-container .menu-item.with-action.with-new ::ng-deep ui-button.menu-item-button button{padding-right:58px!important}.side-navigation-container .new-dot{position:absolute;top:50%;right:15px;width:10px;height:10px;border-radius:50%;background:#0165fc;transform:translateY(-50%);pointer-events:none}.side-navigation-container .menu-item.with-action .new-dot{right:40px}.side-navigation-container .menu-item.with-status ::ng-deep ui-button.menu-item-button button{padding-left:38px!important}.side-navigation-container .status-dot{position:absolute;left:16px;top:50%;z-index:1;width:10px;height:10px;border-radius:50%;transform:translateY(-50%);pointer-events:none}.side-navigation-container .status-dot.status-success{background:#56c71a}.side-navigation-container .status-dot.status-warning{background:#ffc268}.side-navigation-container .status-dot.status-error{background:#ff3003}.side-navigation-container .status-dot.status-neutral{background:#919191}.side-navigation-container .menu-item-action{position:absolute;top:50%;right:4px;z-index:1;display:flex;align-items:center;justify-content:center;width:32px;height:32px;transform:translateY(-50%)}.side-navigation-container .menu-item:has(ui-button.menu-item-button.active) .menu-item-action ::ng-deep button.icon-button{color:#a90686!important}.side-navigation-container .menu-item:has(ui-button.menu-item-button.active) .menu-item-action ::ng-deep button.icon-button:hover{background-color:#ffe6fa!important}.side-navigation-container.collapsed .menu-item ::ng-deep ui-button.menu-item-button button{width:100%!important}.side-navigation-container.collapsed .menu-item ::ng-deep ui-button.menu-item-button button span.icon{margin-right:0!important}.side-navigation-container.collapsed .menu-item ::ng-deep ui-button.menu-item-button button span.label{opacity:0;max-width:0;pointer-events:none}@media(prefers-reduced-motion:reduce){.side-navigation-container .menu-item ::ng-deep ui-button.menu-item-button button,.side-navigation-container .menu-item ::ng-deep ui-button.menu-item-button button span.icon,.side-navigation-container .menu-item ::ng-deep ui-button.menu-item-button button span.label,.side-navigation-container .zone-logo-row .header .logo-brandmark,.side-navigation-container .zone-logo-row .header .logo-lockup,.side-navigation-container .zone-logo-row .navigation-collapse-button{transition:none}}::ng-deep ui-button button.mat-mdc-unelevated-button.menuCell,::ng-deep ui-overflow-menu button.mat-mdc-menu-trigger.content-template{outline-offset:-2px!important}::ng-deep ui-button button.mat-mdc-unelevated-button.menuCell:hover,::ng-deep ui-overflow-menu button.mat-mdc-menu-trigger.content-template:hover{background-color:#f4f4f4!important}::ng-deep ui-button button.mat-mdc-unelevated-button.menuCell:active,::ng-deep ui-overflow-menu button.mat-mdc-menu-trigger.content-template:active{background-color:#e9e9e9!important}::ng-deep ui-button.active button.mat-mdc-unelevated-button.menuCell:hover{background-color:#ffe6fa!important}::ng-deep ui-overflow-menu button.overflow-menu-opener.content-template{padding:0 8px}@media(min-width:600px){::ng-deep .cdk-overlay-connected-position-bounding-box:has(.cdk-overlay-pane .collapsed-menu){left:78px!important}::ng-deep .cdk-overlay-connected-position-bounding-box:has(.cdk-overlay-pane .expanded-menu){left:246px!important}}@media(max-width:599px){::ng-deep .cdk-overlay-pane .mat-mdc-menu-panel.expanded-menu,::ng-deep .cdk-overlay-pane .mat-mdc-menu-panel.collapsed-menu{max-width:calc(100vw - 32px);min-width:0}}::ng-deep .cdk-overlay-pane .mat-mdc-menu-panel.expanded-menu,::ng-deep .cdk-overlay-pane .mat-mdc-menu-panel.collapsed-menu{min-width:280px}::ng-deep .cdk-overlay-pane .mat-mdc-menu-panel.expanded-menu button.mat-mdc-menu-item.cdk-keyboard-focused,::ng-deep .cdk-overlay-pane .mat-mdc-menu-panel.collapsed-menu button.mat-mdc-menu-item.cdk-keyboard-focused{background-color:#f4f4f4}::ng-deep .cdk-overlay-pane .mat-mdc-menu-panel.expanded-menu button.mat-mdc-menu-item.cdk-keyboard-focused.is-destructive,::ng-deep .cdk-overlay-pane .mat-mdc-menu-panel.collapsed-menu button.mat-mdc-menu-item.cdk-keyboard-focused.is-destructive{background-color:#ffeae6}\n"],
 			dependencies: [
 				{
 					kind: "component",
@@ -308,12 +371,15 @@ var SideNavigationComponent = class SideNavigationComponent {
 						"ariaExpanded",
 						"ariaControls",
 						"ariaPressed",
+						"ariaHasPopup",
 						"ariaRequired",
 						"ariaLabelledby",
 						"ariaDescribedby",
 						"preventDefault",
 						"hasBackground",
 						"circular",
+						"isSingleLineLabel",
+						"iconButtonShape",
 						"tooltipPosition",
 						"role",
 						"iconFilled",
@@ -443,8 +509,8 @@ i0.ɵɵngDeclareClassMetadata({
 				AsyncPipe,
 				UiTranslatePipe
 			],
-			template: "<div class=\"mobile-navbar\">\n  <ui-logo [allowResizing]=\"true\" [width]=\"150\" [type]=\"logoType.DEFAULT\" (click)=\"logoClicked.emit()\"></ui-logo>\n\n  <ui-button\n    data-testid=\"navigation-collapse-mobile\"\n    data-test-role=\"navigation-collapse\"\n    [applicationTheme]=\"applicationTheme()\"\n    [variant]=\"'menuTrigger'\"\n    [iconName]=\"isCollapsed() ? 'Menu-burger' : 'Close'\"\n    [ariaLabel]=\"mobileToggleAriaLabelOverride() ?? (mobileToggleAriaKey() | uiTranslate | async) ?? ''\"\n    [ariaExpanded]=\"!isCollapsed()\"\n    [ariaControls]=\"drawerControlsId\"\n    [tooltip]=\"mobileToggleAriaLabelOverride() ?? (mobileToggleAriaKey() | uiTranslate | async) ?? ''\"\n    tooltipPosition=\"left\"\n    (buttonClickEvent)=\"toggleCollapsed()\"\n    class=\"navigation-collapse-button\"\n  ></ui-button>\n</div>\n\n<div class=\"main-container\">\n  <nav\n    [id]=\"drawerControlsId\"\n    role=\"navigation\"\n    [attr.aria-label]=\"navAriaLabel() ?? (translationKey.NAV | uiTranslate | async)\"\n    class=\"side-navigation-container\"\n    [class.collapsed]=\"isCollapsed()\"\n    [class.expanded]=\"!isCollapsed()\"\n    [cdkTrapFocus]=\"trapFocus()\"\n    [cdkTrapFocusAutoCapture]=\"trapFocus()\"\n  >\n    <div class=\"zone-logo-row\">\n      <div class=\"header\" [class.collapsed]=\"isCollapsed()\">\n        <ui-logo\n          class=\"logo-brandmark\"\n          [allowResizing]=\"true\"\n          [width]=\"19\"\n          [type]=\"logoType.PRIMARY_BRANDMARK_PINK\"\n          (click)=\"logoClicked.emit()\"\n        ></ui-logo>\n        <ui-logo\n          class=\"logo-lockup\"\n          [allowResizing]=\"true\"\n          [width]=\"136\"\n          [type]=\"logoType.DEFAULT\"\n          (click)=\"logoClicked.emit()\"\n        ></ui-logo>\n\n        <ui-button\n          data-testid=\"navigation-collapse\"\n          data-test-role=\"navigation-collapse\"\n          [applicationTheme]=\"applicationTheme()\"\n          [variant]=\"'menuTrigger'\"\n          [iconName]=\"isCollapsed() ? 'Sidebar-open-in-line' : 'Sidebar-close-in-line'\"\n          [ariaLabel]=\"toggleAriaLabelOverride() ?? (toggleAriaKey() | uiTranslate | async) ?? ''\"\n          [ariaPressed]=\"isCollapsed()\"\n          [tooltip]=\"toggleAriaLabelOverride() ?? (toggleAriaKey() | uiTranslate | async) ?? ''\"\n          tooltipPosition=\"below\"\n          (buttonClickEvent)=\"toggleCollapsed()\"\n          [class.collapsed]=\"isCollapsed()\"\n          class=\"navigation-collapse-button\"\n        ></ui-button>\n      </div>\n    </div>\n\n    <div class=\"zone-primary-nav\">\n      @if (mainCta(); as cta) {\n        <div class=\"main-cta\">\n          <ui-button\n            data-testid=\"main-cta\"\n            data-test-role=\"main-cta\"\n            [applicationTheme]=\"applicationTheme()\"\n            [fullWidth]=\"true\"\n            [variant]=\"cta.variant\"\n            iconPosition=\"left\"\n            [iconName]=\"cta.icon\"\n            [label]=\"isCollapsed() && !isExpandingOrCollapsing() ? '' : cta.label\"\n            [ariaLabel]=\"cta.label\"\n            [tooltip]=\"isCollapsed() ? cta.label : ''\"\n            tooltipPosition=\"right\"\n            (buttonClickEvent)=\"mainCtaClicked.emit()\"\n          ></ui-button>\n        </div>\n      }\n\n      <ul class=\"navigation-list\">\n        @for (item of mainNavigation(); track item.id) {\n          <li>\n            <ng-container [ngTemplateOutlet]=\"navigationItem\" [ngTemplateOutletContext]=\"{ item }\"></ng-container>\n          </li>\n        }\n      </ul>\n    </div>\n\n    <div class=\"zone-utility-nav\">\n      @if (secondaryNavigation(); as secondary) {\n        <ul class=\"navigation-list\">\n          @for (item of secondary; track item.id) {\n            <li>\n              <ng-container [ngTemplateOutlet]=\"navigationItem\" [ngTemplateOutletContext]=\"{ item }\"></ng-container>\n            </li>\n          }\n        </ul>\n      }\n    </div>\n\n    @if (account() || contentTemplateExtendedRef() || contentTemplateCollapsedRef()) {\n      <div class=\"zone-account\">\n        @if (contentTemplateExtendedRef(); as extendedRef) {\n          @if (!isCollapsed() && !isExpandingOrCollapsing()) {\n            <ng-container [ngTemplateOutlet]=\"extendedRef\"></ng-container>\n          }\n        }\n\n        @if (contentTemplateCollapsedRef(); as collapsedRef) {\n          @if (isCollapsed() || isExpandingOrCollapsing()) {\n            <ng-container [ngTemplateOutlet]=\"collapsedRef\"></ng-container>\n          }\n        }\n\n        @if (account(); as accountValue) {\n          <ui-overflow-menu\n            [applicationTheme]=\"applicationTheme()\"\n            [contentTemplateRef]=\"userInfo\"\n            [buttons]=\"accountValue.menu\"\n            [isDynamicMenu]=\"true\"\n            [class.collapsed]=\"isCollapsed() && !isExpandingOrCollapsing()\"\n            (selectItem)=\"onSelectMenuItem($event)\"\n            [menuConfig]=\"overflowMenuConfig()\"\n          ></ui-overflow-menu>\n        }\n      </div>\n    }\n  </nav>\n  <div class=\"app-container\" [class.collapsed]=\"isCollapsed()\" [class.expanded]=\"!isCollapsed()\">\n    @if (appContentTemplateRef(); as appRef) {\n      <ng-container [ngTemplateOutlet]=\"appRef\"></ng-container>\n    }\n    @if (isMobileOrTablet() && !isCollapsed()) {\n      <button\n        type=\"button\"\n        class=\"backdrop\"\n        [attr.aria-label]=\"mobileCloseLabel() ?? (translationKey.MOBILE_CLOSE | uiTranslate | async) ?? ''\"\n        (click)=\"toggleCollapsed()\"\n      ></button>\n    }\n  </div>\n</div>\n\n<ng-template #navigationItem let-item=\"item\">\n  @if (item) {\n    <div class=\"menu-item\" [attr.aria-current]=\"activeRoutesMap().get(item.url) ? 'page' : null\">\n      <ui-button\n        [attr.data-testid]=\"item.id\"\n        data-test-role=\"menu-item\"\n        [applicationTheme]=\"applicationTheme()\"\n        [fullWidth]=\"true\"\n        [disabledScaleOnClick]=\"true\"\n        [variant]=\"'menuCell'\"\n        iconPosition=\"left\"\n        [iconName]=\"item.icon\"\n        [label]=\"isCollapsed() && !isExpandingOrCollapsing() ? '' : item.text\"\n        (buttonClickEvent)=\"onNavigateClick(item.id)\"\n        (keydown.Tab)=\"$event.stopPropagation()\"\n        (keydown.shift.tab)=\"$event.stopPropagation()\"\n        [ariaLabel]=\"item.text\"\n        [class.active]=\"activeRoutesMap().get(item.url)\"\n        [buttonBadgeConfig]=\"\n          isCollapsed() && !isExpandingOrCollapsing() ? undefined : $safeNavigationMigration(item?.badgeOptions)\n        \"\n        [tooltip]=\"isCollapsed() ? item.text : undefined\"\n        tooltipPosition=\"right\"\n        [iconFilled]=\"!!activeRoutesMap().get(item.url)\"\n      ></ui-button>\n    </div>\n  }\n</ng-template>\n\n<ng-template #userInfo>\n  @if (account(); as accountValue) {\n    <div class=\"user-info\">\n      <ui-avatar [size]=\"isCollapsed() ? avatarSize.MEDIUM : avatarSize.SMALL\" [name]=\"accountValue.name\"></ui-avatar>\n      @if (!isCollapsed()) {\n        <span class=\"user-name\">{{ accountValue.name }}</span>\n        <ui-icon class=\"user-chevron\" name=\"Arrow-chevron-right-in-line\" size=\"24\" aria-hidden=\"true\"></ui-icon>\n      }\n    </div>\n  }\n</ng-template>\n",
-			styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{display:flex;flex-direction:column}.mobile-navbar{background:#fff;display:flex;flex-direction:row;justify-content:space-between;align-items:center;width:100vw;position:fixed;top:0;left:0;padding:16px 24px;height:64px;z-index:11}.mobile-navbar ui-logo{top:2px}@media(min-width:600px){.mobile-navbar{display:none}}.main-container{display:flex;flex-direction:row;width:100vw;height:100vh}.main-container .app-container{flex:1;min-width:0;overflow:hidden auto;transition:margin-left .18s cubic-bezier(.4,0,.2,1),padding .18s cubic-bezier(.4,0,.2,1)}.main-container .app-container .backdrop{display:none;padding:0;border:0;background:transparent;cursor:pointer}.main-container .app-container.expanded .backdrop{display:block}@media(prefers-reduced-motion:reduce){.main-container .app-container{transition:none}}@media(max-width:600px){.main-container .app-container{margin-top:64px}.main-container .app-container.expanded .backdrop{position:fixed;top:64px;left:240px;background:#00000040;width:calc(100vw - 240px);height:calc(100vh - 64px);z-index:8}}@media(min-width:600px)and (max-width:1024px){.main-container .app-container{margin-left:72px}.main-container .app-container.expanded .backdrop{position:absolute;top:0;left:0;background:#00000040;width:100%;height:100%;z-index:2}}@media(min-width:1024px){.main-container .app-container.collapsed{margin-left:72px}.main-container .app-container.expanded{margin-left:240px}}.side-navigation-container{position:fixed;z-index:10;display:flex;flex-direction:column;background:#fff;height:100vh;width:240px;border-right:1px solid #e9e9e9;transition:width .18s cubic-bezier(.4,0,.2,1),left .18s cubic-bezier(.4,0,.2,1)}@media(prefers-reduced-motion:reduce){.side-navigation-container{transition:none}}.side-navigation-container.collapsed{width:72px}@media(max-width:600px){.side-navigation-container{width:240px;top:64px;height:calc(100vh - 64px)}.side-navigation-container .zone-logo-row{display:none!important}.side-navigation-container.expanded{left:0}.side-navigation-container.collapsed{width:240px;left:-240px}}.side-navigation-container .zone-logo-row{flex:0 0 auto;height:56px;padding:16px 12px 16px 26px;display:flex;align-items:center;border-bottom:1px solid #e9e9e9;position:relative}.side-navigation-container .zone-logo-row .header{display:flex;align-items:center;justify-content:space-between;width:100%;gap:8px}.side-navigation-container .zone-logo-row .header ui-logo{cursor:pointer;flex:0 0 auto}.side-navigation-container .zone-logo-row .header .logo-brandmark{position:absolute;left:26px;top:50%;transform:translateY(-50%);opacity:0;pointer-events:none;transition:opacity 90ms cubic-bezier(.4,0,.2,1) 90ms}.side-navigation-container .zone-logo-row .header .logo-lockup{opacity:1;max-width:136px;overflow:hidden;transition:opacity .18s cubic-bezier(.4,0,.2,1),max-width .18s cubic-bezier(.4,0,.2,1)}.side-navigation-container .zone-logo-row .header .navigation-collapse-button ::ng-deep .mat-mdc-button-persistent-ripple{background:#fff}.side-navigation-container .zone-logo-row .navigation-collapse-button{position:absolute;top:8px;right:12px;z-index:2;background:transparent;border:1px solid transparent;border-radius:50%;box-shadow:0 2px 8px #0000;transform:translate(0);transition:right .18s cubic-bezier(.4,0,.2,1),transform .18s cubic-bezier(.4,0,.2,1),background .18s cubic-bezier(.4,0,.2,1),border-color .18s cubic-bezier(.4,0,.2,1),box-shadow .18s cubic-bezier(.4,0,.2,1)}.side-navigation-container.collapsed .zone-logo-row .header .logo-brandmark{opacity:1;pointer-events:auto;transition:opacity 90ms cubic-bezier(.4,0,.2,1)}.side-navigation-container.collapsed .zone-logo-row .header .logo-lockup{opacity:0;max-width:0;pointer-events:none}.side-navigation-container.collapsed .zone-logo-row .navigation-collapse-button{top:8px;right:0;transform:translate(50%);background:#fff;border-color:#e9e9e9;box-shadow:0 2px 8px #00000014}.side-navigation-container .zone-primary-nav{flex:1 1 auto;min-height:0;overflow:hidden auto;display:flex;flex-direction:column;gap:8px;padding:12px}.side-navigation-container .zone-primary-nav .main-cta{width:100%}.side-navigation-container .zone-primary-nav .main-cta ::ng-deep ui-button button{overflow:hidden;padding-left:12px!important;padding-right:12px!important}.side-navigation-container .zone-primary-nav .main-cta ::ng-deep ui-button button .icon-label-wrapper{justify-content:flex-start;width:100%}.side-navigation-container .zone-primary-nav .main-cta ::ng-deep ui-button button span.icon{transition:margin-right .18s cubic-bezier(.4,0,.2,1)}.side-navigation-container .zone-primary-nav .main-cta ::ng-deep ui-button button span.label{opacity:1;transition:opacity .18s cubic-bezier(.4,0,.2,1)}.side-navigation-container.collapsed .zone-primary-nav .main-cta ::ng-deep ui-button button span.icon{margin-right:0!important}.side-navigation-container.collapsed .zone-primary-nav .main-cta ::ng-deep ui-button button span.label{opacity:0;pointer-events:none}.side-navigation-container .zone-utility-nav{flex:0 0 auto;display:flex;flex-direction:column;gap:8px;padding:12px;border-top:1px solid #e9e9e9;align-items:stretch}.side-navigation-container .zone-utility-nav:empty{display:none}.side-navigation-container.collapsed .zone-account{align-items:center;padding:12px}.side-navigation-container.collapsed .zone-account .user-info{transform:translate(-8px)}.side-navigation-container .zone-account{flex:0 0 auto;width:100%;padding:12px;border-top:1px solid #e9e9e9;background:#fff;display:flex;flex-direction:column;gap:8px;align-items:stretch}.side-navigation-container .zone-account>ui-button,.side-navigation-container .zone-account>a,.side-navigation-container .zone-account>button{width:100%}.side-navigation-container .zone-account ui-overflow-menu{width:100%}.side-navigation-container .zone-account ui-avatar ::ng-deep .avatar-container{transition:width .18s cubic-bezier(.4,0,.2,1),height .18s cubic-bezier(.4,0,.2,1),font-size .18s cubic-bezier(.4,0,.2,1)}.side-navigation-container .zone-account .user-info{display:flex;align-items:center;padding:8px 0;width:100%;gap:12px;transition:transform .18s cubic-bezier(.4,0,.2,1);transform:translate(0)}.side-navigation-container .zone-account .user-info .user-name,.side-navigation-container .zone-account .user-info .user-chevron{opacity:1;transition:opacity .18s cubic-bezier(.4,0,.2,1)}@starting-style{.side-navigation-container .zone-account .user-info .user-name,.side-navigation-container .zone-account .user-info .user-chevron{opacity:0}}.side-navigation-container .zone-account .user-info .user-name{flex:1 1 auto;font-weight:500;font-size:14px;line-height:22px;font-family:ModernGothic,sans-serif;color:#242424;text-align:start;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.side-navigation-container .zone-account .user-info .user-chevron{flex:0 0 auto;color:#666}.side-navigation-container .navigation-list{list-style:none;margin:0;padding:0;width:100%;display:flex;flex-direction:column;gap:8px}.side-navigation-container .navigation-list li{width:100%}.side-navigation-container .menu-item{width:100%;height:40px;display:flex;font-size:14px;font-weight:700;font-family:ModernGothic,sans-serif;flex-direction:row;align-items:center;cursor:pointer}.side-navigation-container .menu-item ui-button{width:100%}.side-navigation-container .menu-item ::ng-deep ui-button button{padding:8px 12px!important;border-radius:10px!important;min-height:40px;overflow:hidden}.side-navigation-container .menu-item ::ng-deep ui-button button span.icon{margin-right:12px!important;transition:margin-right .18s cubic-bezier(.4,0,.2,1)}.side-navigation-container .menu-item ::ng-deep ui-button button span.label{transition:opacity .18s cubic-bezier(.4,0,.2,1),max-width .18s cubic-bezier(.4,0,.2,1);opacity:1;max-width:240px}.side-navigation-container .menu-item ::ng-deep ui-button.active button{background-color:#fff2fc!important;color:#a90686!important}.side-navigation-container .menu-item ::ng-deep ui-button.active button .icon,.side-navigation-container .menu-item ::ng-deep ui-button.active button .label{color:#a90686!important}.side-navigation-container .menu-item ::ng-deep ui-button.active button .mat-mdc-button-touch-target{background-color:transparent}.side-navigation-container.collapsed .menu-item ::ng-deep ui-button button{width:100%!important}.side-navigation-container.collapsed .menu-item ::ng-deep ui-button button span.icon{margin-right:0!important}.side-navigation-container.collapsed .menu-item ::ng-deep ui-button button span.label{opacity:0;max-width:0;pointer-events:none}@media(prefers-reduced-motion:reduce){.side-navigation-container .menu-item ::ng-deep ui-button button,.side-navigation-container .menu-item ::ng-deep ui-button button span.icon,.side-navigation-container .menu-item ::ng-deep ui-button button span.label,.side-navigation-container .zone-logo-row .header .logo-brandmark,.side-navigation-container .zone-logo-row .header .logo-lockup,.side-navigation-container .zone-logo-row .navigation-collapse-button{transition:none}}::ng-deep ui-button button.mat-mdc-unelevated-button.menuCell,::ng-deep ui-overflow-menu button.mat-mdc-menu-trigger.content-template{outline-offset:-2px!important}::ng-deep ui-button button.mat-mdc-unelevated-button.menuCell:hover,::ng-deep ui-overflow-menu button.mat-mdc-menu-trigger.content-template:hover{background-color:#f4f4f4!important}::ng-deep ui-button button.mat-mdc-unelevated-button.menuCell:active,::ng-deep ui-overflow-menu button.mat-mdc-menu-trigger.content-template:active{background-color:#e9e9e9!important}::ng-deep ui-button.active button.mat-mdc-unelevated-button.menuCell:hover{background-color:#ffe6fa!important}::ng-deep ui-overflow-menu button.overflow-menu-opener.content-template{padding:0 8px}@media(min-width:600px){::ng-deep .cdk-overlay-connected-position-bounding-box:has(.cdk-overlay-pane .collapsed-menu){left:78px!important}::ng-deep .cdk-overlay-connected-position-bounding-box:has(.cdk-overlay-pane .expanded-menu){left:246px!important}}@media(max-width:599px){::ng-deep .cdk-overlay-pane .mat-mdc-menu-panel.expanded-menu,::ng-deep .cdk-overlay-pane .mat-mdc-menu-panel.collapsed-menu{max-width:calc(100vw - 32px);min-width:0}}::ng-deep .cdk-overlay-pane .mat-mdc-menu-panel.expanded-menu,::ng-deep .cdk-overlay-pane .mat-mdc-menu-panel.collapsed-menu{min-width:280px}::ng-deep .cdk-overlay-pane .mat-mdc-menu-panel.expanded-menu button.mat-mdc-menu-item.cdk-keyboard-focused,::ng-deep .cdk-overlay-pane .mat-mdc-menu-panel.collapsed-menu button.mat-mdc-menu-item.cdk-keyboard-focused{background-color:#f4f4f4}::ng-deep .cdk-overlay-pane .mat-mdc-menu-panel.expanded-menu button.mat-mdc-menu-item.cdk-keyboard-focused.is-destructive,::ng-deep .cdk-overlay-pane .mat-mdc-menu-panel.collapsed-menu button.mat-mdc-menu-item.cdk-keyboard-focused.is-destructive{background-color:#ffeae6}\n"]
+			template: "<div class=\"mobile-navbar\">\n  <ui-logo [allowResizing]=\"true\" [width]=\"150\" [type]=\"logoType.DEFAULT\" (click)=\"logoClicked.emit()\"></ui-logo>\n\n  <ui-button\n    data-testid=\"navigation-collapse-mobile\"\n    data-test-role=\"navigation-collapse\"\n    [applicationTheme]=\"applicationTheme()\"\n    [variant]=\"'menuTrigger'\"\n    [iconName]=\"isCollapsed() ? 'Menu-burger' : 'Close'\"\n    [ariaLabel]=\"mobileToggleAriaLabelOverride() ?? (mobileToggleAriaKey() | uiTranslate | async) ?? ''\"\n    [ariaExpanded]=\"!isCollapsed()\"\n    [ariaControls]=\"drawerControlsId\"\n    [tooltip]=\"mobileToggleAriaLabelOverride() ?? (mobileToggleAriaKey() | uiTranslate | async) ?? ''\"\n    tooltipPosition=\"left\"\n    (buttonClickEvent)=\"toggleCollapsed()\"\n    class=\"navigation-collapse-button\"\n  ></ui-button>\n</div>\n\n<div class=\"main-container\">\n  <nav\n    [id]=\"drawerControlsId\"\n    role=\"navigation\"\n    [attr.aria-label]=\"navAriaLabel() ?? (translationKey.NAV | uiTranslate | async)\"\n    class=\"side-navigation-container\"\n    [class.collapsed]=\"isCollapsed()\"\n    [class.expanded]=\"!isCollapsed()\"\n    [cdkTrapFocus]=\"trapFocus()\"\n    [cdkTrapFocusAutoCapture]=\"trapFocus()\"\n  >\n    <div class=\"zone-logo-row\">\n      <div class=\"header\" [class.collapsed]=\"isCollapsed()\">\n        <ui-logo\n          class=\"logo-brandmark\"\n          [allowResizing]=\"true\"\n          [width]=\"19\"\n          [type]=\"logoType.PRIMARY_BRANDMARK_PINK\"\n          (click)=\"logoClicked.emit()\"\n        ></ui-logo>\n        <ui-logo\n          class=\"logo-lockup\"\n          [allowResizing]=\"true\"\n          [width]=\"136\"\n          [type]=\"logoType.DEFAULT\"\n          (click)=\"logoClicked.emit()\"\n        ></ui-logo>\n\n        <ui-button\n          data-testid=\"navigation-collapse\"\n          data-test-role=\"navigation-collapse\"\n          [applicationTheme]=\"applicationTheme()\"\n          [variant]=\"'menuTrigger'\"\n          [iconName]=\"isCollapsed() ? 'Sidebar-open-in-line' : 'Sidebar-close-in-line'\"\n          [ariaLabel]=\"toggleAriaLabelOverride() ?? (toggleAriaKey() | uiTranslate | async) ?? ''\"\n          [ariaPressed]=\"isCollapsed()\"\n          [tooltip]=\"toggleAriaLabelOverride() ?? (toggleAriaKey() | uiTranslate | async) ?? ''\"\n          tooltipPosition=\"below\"\n          (buttonClickEvent)=\"toggleCollapsed()\"\n          [class.collapsed]=\"isCollapsed()\"\n          class=\"navigation-collapse-button\"\n        ></ui-button>\n      </div>\n    </div>\n\n    <div class=\"zone-primary-nav\">\n      @if (mainCta(); as cta) {\n        <div class=\"main-cta\">\n          <ui-button\n            data-testid=\"main-cta\"\n            data-test-role=\"main-cta\"\n            [applicationTheme]=\"applicationTheme()\"\n            [fullWidth]=\"true\"\n            [variant]=\"cta.variant\"\n            iconPosition=\"left\"\n            [iconName]=\"cta.icon\"\n            [label]=\"isCollapsed() && !isExpandingOrCollapsing() ? '' : cta.label\"\n            [ariaLabel]=\"cta.label\"\n            [tooltip]=\"isCollapsed() ? cta.label : ''\"\n            tooltipPosition=\"right\"\n            (buttonClickEvent)=\"mainCtaClicked.emit()\"\n          ></ui-button>\n        </div>\n      }\n\n      <ul class=\"navigation-list\">\n        @for (item of mainNavigation(); track item.id) {\n          <li>\n            <ng-container\n              [ngTemplateOutlet]=\"navigationItem\"\n              [ngTemplateOutletContext]=\"{ item, level: 0 }\"\n            ></ng-container>\n          </li>\n        }\n      </ul>\n    </div>\n\n    <div class=\"zone-utility-nav\">\n      @if (secondaryNavigation(); as secondary) {\n        <ul class=\"navigation-list\">\n          @for (item of secondary; track item.id) {\n            <li>\n              <ng-container\n                [ngTemplateOutlet]=\"navigationItem\"\n                [ngTemplateOutletContext]=\"{ item, level: 0 }\"\n              ></ng-container>\n            </li>\n          }\n        </ul>\n      }\n    </div>\n\n    @if (account() || contentTemplateExtendedRef() || contentTemplateCollapsedRef()) {\n      <div class=\"zone-account\">\n        @if (contentTemplateExtendedRef(); as extendedRef) {\n          @if (!isCollapsed() && !isExpandingOrCollapsing()) {\n            <ng-container [ngTemplateOutlet]=\"extendedRef\"></ng-container>\n          }\n        }\n\n        @if (contentTemplateCollapsedRef(); as collapsedRef) {\n          @if (isCollapsed() || isExpandingOrCollapsing()) {\n            <ng-container [ngTemplateOutlet]=\"collapsedRef\"></ng-container>\n          }\n        }\n\n        @if (account(); as accountValue) {\n          <ui-overflow-menu\n            [applicationTheme]=\"applicationTheme()\"\n            [contentTemplateRef]=\"userInfo\"\n            [buttons]=\"accountValue.menu\"\n            [isDynamicMenu]=\"true\"\n            [class.collapsed]=\"isCollapsed() && !isExpandingOrCollapsing()\"\n            (selectItem)=\"onSelectMenuItem($event)\"\n            [menuConfig]=\"overflowMenuConfig()\"\n          ></ui-overflow-menu>\n        }\n      </div>\n    }\n  </nav>\n  <div class=\"app-container\" [class.collapsed]=\"isCollapsed()\" [class.expanded]=\"!isCollapsed()\">\n    @if (appContentTemplateRef(); as appRef) {\n      <ng-container [ngTemplateOutlet]=\"appRef\"></ng-container>\n    }\n    @if (isMobileOrTablet() && !isCollapsed()) {\n      <button\n        type=\"button\"\n        class=\"backdrop\"\n        [attr.aria-label]=\"mobileCloseLabel() ?? (translationKey.MOBILE_CLOSE | uiTranslate | async) ?? ''\"\n        (click)=\"toggleCollapsed()\"\n      ></button>\n    }\n  </div>\n</div>\n\n<ng-template #navigationItem let-item=\"item\" let-level=\"level\">\n  @if (item) {\n    @let highlight = highlightStates().get(item.id);\n    @let hasChildren = !!item.children?.length;\n    @let action = item.trailingAction;\n    @let highlighted =\n      highlight === 'active' || !!action?.isExpanded || (highlight === 'ancestor' && !shouldShowLabels());\n    @let activeSection = !highlighted && highlight === 'ancestor' && level === 0;\n    @let childListId = 'side-navigation-children-' + item.id;\n    @let newLabel = item.isNew ? (translationKey.NEW | uiTranslate | async) : null;\n    @let accessibleName = item.text + (item.status ? ', ' + item.status.label : '') + (newLabel ? ', ' + newLabel : '');\n    <div\n      class=\"menu-item\"\n      [class.nested]=\"level > 0\"\n      [class.with-status]=\"!!item.status\"\n      [class.with-action]=\"shouldShowLabels() && (hasChildren || !!action)\"\n      [class.with-new]=\"shouldShowLabels() && !!item.isNew\"\n      [attr.aria-current]=\"\n        highlight === 'active' ? 'page' : highlight === 'ancestor' && !shouldShowLabels() ? 'true' : null\n      \"\n    >\n      @if (item.status && shouldShowLabels()) {\n        <span [class]=\"'status-dot status-' + item.status.color\" aria-hidden=\"true\"></span>\n      }\n      <ui-button\n        class=\"menu-item-button\"\n        [attr.data-testid]=\"item.id\"\n        data-test-role=\"menu-item\"\n        [applicationTheme]=\"applicationTheme()\"\n        [fullWidth]=\"true\"\n        [disabledScaleOnClick]=\"true\"\n        [variant]=\"'menuCell'\"\n        [size]=\"level > 0 ? 'medium' : 'big'\"\n        iconPosition=\"left\"\n        [iconName]=\"item.status ? undefined : item.icon\"\n        [label]=\"shouldShowLabels() ? item.text : ''\"\n        [isSingleLineLabel]=\"level > 0 || hasChildren || !!action || !!item.isNew\"\n        (buttonClickEvent)=\"action ? emitTrailingAction(item, $event) : onNavigateClick(item.id)\"\n        [ariaExpanded]=\"action?.isExpanded\"\n        (keydown.Tab)=\"$event.stopPropagation()\"\n        (keydown.shift.tab)=\"$event.stopPropagation()\"\n        [ariaLabel]=\"accessibleName\"\n        [class.active]=\"highlighted\"\n        [class.ancestor]=\"activeSection\"\n        [buttonBadgeConfig]=\"shouldShowLabels() ? $safeNavigationMigration(item?.badgeOptions) : undefined\"\n        [tooltip]=\"isCollapsed() ? item.text : undefined\"\n        tooltipPosition=\"right\"\n        [iconFilled]=\"highlighted\"\n      ></ui-button>\n      @if (shouldShowLabels()) {\n        @if (item.isNew) {\n          <span class=\"new-dot\" aria-hidden=\"true\"></span>\n        }\n        @if (action) {\n          <ui-button\n            class=\"menu-item-action\"\n            variant=\"icon-button\"\n            size=\"small\"\n            iconButtonShape=\"square\"\n            [justIcon]=\"true\"\n            [disabledScaleOnClick]=\"true\"\n            [applicationTheme]=\"applicationTheme()\"\n            [iconName]=\"action.icon\"\n            [testId]=\"item.id + '-action'\"\n            [ariaLabel]=\"action.ariaLabel\"\n            [ariaExpanded]=\"action.isExpanded\"\n            [ariaHasPopup]=\"action.isExpanded === undefined ? undefined : 'dialog'\"\n            [tooltip]=\"hasChevronTooltips() ? action.ariaLabel : ''\"\n            (buttonClickEvent)=\"emitTrailingAction(item, $event)\"\n            (keydown.Tab)=\"$event.stopPropagation()\"\n            (keydown.shift.tab)=\"$event.stopPropagation()\"\n          ></ui-button>\n        } @else if (hasChildren) {\n          @let submenuLabel = (translationKey.SUBMENU | uiTranslate: { label: item.text } | async) ?? '';\n          <ui-button\n            class=\"menu-item-action\"\n            variant=\"icon-button\"\n            size=\"small\"\n            iconButtonShape=\"square\"\n            [justIcon]=\"true\"\n            [disabledScaleOnClick]=\"true\"\n            [applicationTheme]=\"applicationTheme()\"\n            [iconName]=\"item.isExpanded ? 'Arrow-chevron-up-in-line' : 'Arrow-chevron-down-in-line'\"\n            [testId]=\"item.id + '-toggle'\"\n            [ariaLabel]=\"submenuLabel\"\n            [ariaExpanded]=\"!!item.isExpanded\"\n            [ariaControls]=\"item.isExpanded ? childListId : undefined\"\n            [tooltip]=\"hasChevronTooltips() ? submenuLabel : ''\"\n            (buttonClickEvent)=\"emitExpandedChange(item)\"\n            (keydown.Tab)=\"$event.stopPropagation()\"\n            (keydown.shift.tab)=\"$event.stopPropagation()\"\n          ></ui-button>\n        }\n      }\n    </div>\n    @if (hasChildren && item.isExpanded && shouldShowLabels()) {\n      <ul class=\"navigation-list navigation-sublist\" [class.tree]=\"level > 0\" [id]=\"childListId\">\n        @for (child of item.children; track child.id) {\n          <li>\n            <ng-container\n              [ngTemplateOutlet]=\"navigationItem\"\n              [ngTemplateOutletContext]=\"{ item: child, level: level + 1 }\"\n            ></ng-container>\n          </li>\n        }\n      </ul>\n    }\n  }\n</ng-template>\n\n<ng-template #userInfo>\n  @if (account(); as accountValue) {\n    <div class=\"user-info\">\n      <ui-avatar [size]=\"isCollapsed() ? avatarSize.MEDIUM : avatarSize.SMALL\" [name]=\"accountValue.name\"></ui-avatar>\n      @if (!isCollapsed()) {\n        <span class=\"user-name\">{{ accountValue.name }}</span>\n        <ui-icon class=\"user-chevron\" name=\"Arrow-chevron-right-in-line\" size=\"24\" aria-hidden=\"true\"></ui-icon>\n      }\n    </div>\n  }\n</ng-template>\n",
+			styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{display:flex;flex-direction:column}.mobile-navbar{background:#fff;display:flex;flex-direction:row;justify-content:space-between;align-items:center;width:100vw;position:fixed;top:0;left:0;padding:16px 24px;height:64px;z-index:11}.mobile-navbar ui-logo{top:2px}@media(min-width:600px){.mobile-navbar{display:none}}.main-container{display:flex;flex-direction:row;width:100vw;height:100vh}.main-container .app-container{flex:1;min-width:0;overflow:hidden auto;transition:margin-left .18s cubic-bezier(.4,0,.2,1),padding .18s cubic-bezier(.4,0,.2,1)}.main-container .app-container .backdrop{display:none;padding:0;border:0;background:transparent;cursor:pointer}.main-container .app-container.expanded .backdrop{display:block}@media(prefers-reduced-motion:reduce){.main-container .app-container{transition:none}}@media(max-width:600px){.main-container .app-container{margin-top:64px}.main-container .app-container.expanded .backdrop{position:fixed;top:64px;left:240px;background:#00000040;width:calc(100vw - 240px);height:calc(100vh - 64px);z-index:8}}@media(min-width:600px)and (max-width:1024px){.main-container .app-container{margin-left:72px}.main-container .app-container.expanded .backdrop{position:absolute;top:0;left:0;background:#00000040;width:100%;height:100%;z-index:2}}@media(min-width:1024px){.main-container .app-container.collapsed{margin-left:72px}.main-container .app-container.expanded{margin-left:240px}}.side-navigation-container{position:fixed;z-index:10;display:flex;flex-direction:column;background:#fff;height:100vh;width:240px;border-right:1px solid #e9e9e9;transition:width .18s cubic-bezier(.4,0,.2,1),left .18s cubic-bezier(.4,0,.2,1)}@media(prefers-reduced-motion:reduce){.side-navigation-container{transition:none}}.side-navigation-container.collapsed{width:72px}@media(max-width:600px){.side-navigation-container{width:240px;top:64px;height:calc(100vh - 64px)}.side-navigation-container .zone-logo-row{display:none!important}.side-navigation-container.expanded{left:0}.side-navigation-container.collapsed{width:240px;left:-240px}}.side-navigation-container .zone-logo-row{flex:0 0 auto;height:56px;padding:16px 12px 16px 26px;display:flex;align-items:center;border-bottom:1px solid #e9e9e9;position:relative}.side-navigation-container .zone-logo-row .header{display:flex;align-items:center;justify-content:space-between;width:100%;gap:8px}.side-navigation-container .zone-logo-row .header ui-logo{cursor:pointer;flex:0 0 auto}.side-navigation-container .zone-logo-row .header .logo-brandmark{position:absolute;left:26px;top:50%;transform:translateY(-50%);opacity:0;pointer-events:none;transition:opacity 90ms cubic-bezier(.4,0,.2,1) 90ms}.side-navigation-container .zone-logo-row .header .logo-lockup{opacity:1;max-width:136px;overflow:hidden;transition:opacity .18s cubic-bezier(.4,0,.2,1),max-width .18s cubic-bezier(.4,0,.2,1)}.side-navigation-container .zone-logo-row .header .navigation-collapse-button ::ng-deep .mat-mdc-button-persistent-ripple{background:#fff}.side-navigation-container .zone-logo-row .navigation-collapse-button{position:absolute;top:8px;right:12px;z-index:2;background:transparent;border:1px solid transparent;border-radius:50%;box-shadow:0 2px 8px #0000;transform:translate(0);transition:right .18s cubic-bezier(.4,0,.2,1),transform .18s cubic-bezier(.4,0,.2,1),background .18s cubic-bezier(.4,0,.2,1),border-color .18s cubic-bezier(.4,0,.2,1),box-shadow .18s cubic-bezier(.4,0,.2,1)}.side-navigation-container.collapsed .zone-logo-row .header .logo-brandmark{opacity:1;pointer-events:auto;transition:opacity 90ms cubic-bezier(.4,0,.2,1)}.side-navigation-container.collapsed .zone-logo-row .header .logo-lockup{opacity:0;max-width:0;pointer-events:none}.side-navigation-container.collapsed .zone-logo-row .navigation-collapse-button{top:8px;right:0;transform:translate(50%);background:#fff;border-color:#e9e9e9;box-shadow:0 2px 8px #00000014}.side-navigation-container .zone-primary-nav{flex:1 1 auto;min-height:0;overflow:hidden auto;display:flex;flex-direction:column;gap:8px;padding:12px}.side-navigation-container .zone-primary-nav .main-cta{width:100%}.side-navigation-container .zone-primary-nav .main-cta ::ng-deep ui-button button{overflow:hidden;padding-left:12px!important;padding-right:12px!important}.side-navigation-container .zone-primary-nav .main-cta ::ng-deep ui-button button .icon-label-wrapper{justify-content:flex-start;width:100%}.side-navigation-container .zone-primary-nav .main-cta ::ng-deep ui-button button span.icon{transition:margin-right .18s cubic-bezier(.4,0,.2,1)}.side-navigation-container .zone-primary-nav .main-cta ::ng-deep ui-button button span.label{opacity:1;transition:opacity .18s cubic-bezier(.4,0,.2,1)}.side-navigation-container.collapsed .zone-primary-nav .main-cta ::ng-deep ui-button button span.icon{margin-right:0!important}.side-navigation-container.collapsed .zone-primary-nav .main-cta ::ng-deep ui-button button span.label{opacity:0;pointer-events:none}.side-navigation-container .zone-utility-nav{flex:0 0 auto;display:flex;flex-direction:column;gap:8px;padding:12px;border-top:1px solid #e9e9e9;align-items:stretch}.side-navigation-container .zone-utility-nav:empty{display:none}.side-navigation-container.collapsed .zone-account{align-items:center;padding:12px}.side-navigation-container.collapsed .zone-account .user-info{transform:translate(-8px)}.side-navigation-container .zone-account{flex:0 0 auto;width:100%;padding:12px;border-top:1px solid #e9e9e9;background:#fff;display:flex;flex-direction:column;gap:8px;align-items:stretch}.side-navigation-container .zone-account>ui-button,.side-navigation-container .zone-account>a,.side-navigation-container .zone-account>button{width:100%}.side-navigation-container .zone-account ui-overflow-menu{width:100%}.side-navigation-container .zone-account ui-avatar ::ng-deep .avatar-container{transition:width .18s cubic-bezier(.4,0,.2,1),height .18s cubic-bezier(.4,0,.2,1),font-size .18s cubic-bezier(.4,0,.2,1)}.side-navigation-container .zone-account .user-info{display:flex;align-items:center;padding:8px 0;width:100%;gap:12px;transition:transform .18s cubic-bezier(.4,0,.2,1);transform:translate(0)}.side-navigation-container .zone-account .user-info .user-name,.side-navigation-container .zone-account .user-info .user-chevron{opacity:1;transition:opacity .18s cubic-bezier(.4,0,.2,1)}@starting-style{.side-navigation-container .zone-account .user-info .user-name,.side-navigation-container .zone-account .user-info .user-chevron{opacity:0}}.side-navigation-container .zone-account .user-info .user-name{flex:1 1 auto;font-weight:500;font-size:14px;line-height:22px;font-family:ModernGothic,sans-serif;color:#242424;text-align:start;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.side-navigation-container .zone-account .user-info .user-chevron{flex:0 0 auto;color:#666}.side-navigation-container .navigation-list{list-style:none;margin:0;padding:0;width:100%;display:flex;flex-direction:column;gap:8px}.side-navigation-container .navigation-list li{width:100%}.side-navigation-container .navigation-sublist{margin-top:8px}.side-navigation-container .navigation-sublist.tree{width:auto;margin:0 0 0 20px;padding:8px 0 0 15px;border-left:1px solid #d3d3d3}.side-navigation-container .menu-item{position:relative;width:100%;height:40px;display:flex;font-size:14px;font-weight:700;font-family:ModernGothic,sans-serif;flex-direction:row;align-items:center;cursor:pointer}.side-navigation-container .menu-item ui-button.menu-item-button{width:100%}.side-navigation-container .menu-item ::ng-deep ui-button.menu-item-button button{padding:8px 12px!important;border-radius:10px!important;min-height:40px;overflow:hidden}.side-navigation-container .menu-item ::ng-deep ui-button.menu-item-button button span.icon{margin-right:12px!important;transition:margin-right .18s cubic-bezier(.4,0,.2,1)}.side-navigation-container .menu-item ::ng-deep ui-button.menu-item-button button span.label{transition:opacity .18s cubic-bezier(.4,0,.2,1),max-width .18s cubic-bezier(.4,0,.2,1);opacity:1;max-width:240px}.side-navigation-container .menu-item ::ng-deep ui-button.menu-item-button.ancestor button{background-color:#f4f4f4!important}.side-navigation-container .menu-item ::ng-deep ui-button.menu-item-button.ancestor button:hover{background-color:#e9e9e9!important}.side-navigation-container .menu-item ::ng-deep ui-button.menu-item-button.active button{background-color:#fff2fc!important;color:#a90686!important}.side-navigation-container .menu-item ::ng-deep ui-button.menu-item-button.active button .icon,.side-navigation-container .menu-item ::ng-deep ui-button.menu-item-button.active button .label{color:#a90686!important}.side-navigation-container .menu-item ::ng-deep ui-button.menu-item-button.active button .mat-mdc-button-touch-target{background-color:transparent}.side-navigation-container .menu-item ::ng-deep ui-button.menu-item-button button.menuCell span.label{font-weight:400}.side-navigation-container .menu-item.nested ::ng-deep ui-button.menu-item-button:not(.active) button.menuCell span.label{font-weight:300}.side-navigation-container .menu-item ::ng-deep ui-button.menu-item-button.active button.menuCell span.label{font-weight:500}.side-navigation-container .menu-item:is(.with-action,.with-new) ::ng-deep ui-button.menu-item-button button{padding-right:40px!important}.side-navigation-container .menu-item.with-action.with-new ::ng-deep ui-button.menu-item-button button{padding-right:58px!important}.side-navigation-container .new-dot{position:absolute;top:50%;right:15px;width:10px;height:10px;border-radius:50%;background:#0165fc;transform:translateY(-50%);pointer-events:none}.side-navigation-container .menu-item.with-action .new-dot{right:40px}.side-navigation-container .menu-item.with-status ::ng-deep ui-button.menu-item-button button{padding-left:38px!important}.side-navigation-container .status-dot{position:absolute;left:16px;top:50%;z-index:1;width:10px;height:10px;border-radius:50%;transform:translateY(-50%);pointer-events:none}.side-navigation-container .status-dot.status-success{background:#56c71a}.side-navigation-container .status-dot.status-warning{background:#ffc268}.side-navigation-container .status-dot.status-error{background:#ff3003}.side-navigation-container .status-dot.status-neutral{background:#919191}.side-navigation-container .menu-item-action{position:absolute;top:50%;right:4px;z-index:1;display:flex;align-items:center;justify-content:center;width:32px;height:32px;transform:translateY(-50%)}.side-navigation-container .menu-item:has(ui-button.menu-item-button.active) .menu-item-action ::ng-deep button.icon-button{color:#a90686!important}.side-navigation-container .menu-item:has(ui-button.menu-item-button.active) .menu-item-action ::ng-deep button.icon-button:hover{background-color:#ffe6fa!important}.side-navigation-container.collapsed .menu-item ::ng-deep ui-button.menu-item-button button{width:100%!important}.side-navigation-container.collapsed .menu-item ::ng-deep ui-button.menu-item-button button span.icon{margin-right:0!important}.side-navigation-container.collapsed .menu-item ::ng-deep ui-button.menu-item-button button span.label{opacity:0;max-width:0;pointer-events:none}@media(prefers-reduced-motion:reduce){.side-navigation-container .menu-item ::ng-deep ui-button.menu-item-button button,.side-navigation-container .menu-item ::ng-deep ui-button.menu-item-button button span.icon,.side-navigation-container .menu-item ::ng-deep ui-button.menu-item-button button span.label,.side-navigation-container .zone-logo-row .header .logo-brandmark,.side-navigation-container .zone-logo-row .header .logo-lockup,.side-navigation-container .zone-logo-row .navigation-collapse-button{transition:none}}::ng-deep ui-button button.mat-mdc-unelevated-button.menuCell,::ng-deep ui-overflow-menu button.mat-mdc-menu-trigger.content-template{outline-offset:-2px!important}::ng-deep ui-button button.mat-mdc-unelevated-button.menuCell:hover,::ng-deep ui-overflow-menu button.mat-mdc-menu-trigger.content-template:hover{background-color:#f4f4f4!important}::ng-deep ui-button button.mat-mdc-unelevated-button.menuCell:active,::ng-deep ui-overflow-menu button.mat-mdc-menu-trigger.content-template:active{background-color:#e9e9e9!important}::ng-deep ui-button.active button.mat-mdc-unelevated-button.menuCell:hover{background-color:#ffe6fa!important}::ng-deep ui-overflow-menu button.overflow-menu-opener.content-template{padding:0 8px}@media(min-width:600px){::ng-deep .cdk-overlay-connected-position-bounding-box:has(.cdk-overlay-pane .collapsed-menu){left:78px!important}::ng-deep .cdk-overlay-connected-position-bounding-box:has(.cdk-overlay-pane .expanded-menu){left:246px!important}}@media(max-width:599px){::ng-deep .cdk-overlay-pane .mat-mdc-menu-panel.expanded-menu,::ng-deep .cdk-overlay-pane .mat-mdc-menu-panel.collapsed-menu{max-width:calc(100vw - 32px);min-width:0}}::ng-deep .cdk-overlay-pane .mat-mdc-menu-panel.expanded-menu,::ng-deep .cdk-overlay-pane .mat-mdc-menu-panel.collapsed-menu{min-width:280px}::ng-deep .cdk-overlay-pane .mat-mdc-menu-panel.expanded-menu button.mat-mdc-menu-item.cdk-keyboard-focused,::ng-deep .cdk-overlay-pane .mat-mdc-menu-panel.collapsed-menu button.mat-mdc-menu-item.cdk-keyboard-focused{background-color:#f4f4f4}::ng-deep .cdk-overlay-pane .mat-mdc-menu-panel.expanded-menu button.mat-mdc-menu-item.cdk-keyboard-focused.is-destructive,::ng-deep .cdk-overlay-pane .mat-mdc-menu-panel.collapsed-menu button.mat-mdc-menu-item.cdk-keyboard-focused.is-destructive{background-color:#ffeae6}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -560,6 +626,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		hasChevronTooltips: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "hasChevronTooltips",
+				required: false
+			}]
+		}],
 		isCollapsed: [{
 			type: i0.Input,
 			args: [{
@@ -579,6 +653,14 @@ i0.ɵɵngDeclareClassMetadata({
 			type: i0.Output,
 			args: ["navigate"]
 		}],
+		expandedChange: [{
+			type: i0.Output,
+			args: ["expandedChange"]
+		}],
+		trailingActionClicked: [{
+			type: i0.Output,
+			args: ["trailingActionClicked"]
+		}],
 		accountMenuSelected: [{
 			type: i0.Output,
 			args: ["accountMenuSelected"]

package/fesm2022/testgorilla-tgo-ui-components-side-navigation.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"testgorilla-tgo-ui-components-side-navigation.mjs","names":[],"sources":["../../../components/side-navigation/side-navigation.component.ts","../../../components/side-navigation/side-navigation.component.html","../../../components/side-navigation/side-navigation.component.module.ts"],"sourcesContent":["import { LiveAnnouncer, CdkTrapFocus } from '@angular/cdk/a11y';\nimport { BreakpointObserver } from '@angular/cdk/layout';\nimport { NgTemplateOutlet, AsyncPipe } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  DestroyRef,\n  OnDestroy,\n  OnInit,\n  TemplateRef,\n  computed,\n  inject,\n  input,\n  model,\n  output,\n  signal,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { take } from 'rxjs';\n\nimport { AvatarSize, AvatarComponent } from '@testgorilla/tgo-ui/components/avatar';\nimport { ButtonComponent } from '@testgorilla/tgo-ui/components/button';\nimport { ApplicationTheme, ScreenBreakpoints, UiTranslatePipe } from '@testgorilla/tgo-ui/components/core';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { LogoTypeEnum, LogoComponent } from '@testgorilla/tgo-ui/components/logo';\nimport { MenuConfig, OverflowMenuComponentModule } from '@testgorilla/tgo-ui/components/overflow-menu';\n\nimport { NavigationAccount, NavigationCta, NavigationItem } from './side-navigation.model';\n\nconst OVERFLOW_MENU_CONFIG: Omit<MenuConfig, 'panelClass'> = {\n  overlapTrigger: true,\n  xPosition: 'before',\n  yPosition: 'below',\n};\n\nexport const COLLAPSE_ANIMATION_MS = 180;\n\nconst TRANSLATION_KEY = {\n  COLLAPSE: 'SIDE_NAVIGATION.COLLAPSE_LABEL',\n  EXPAND: 'SIDE_NAVIGATION.EXPAND_LABEL',\n  MOBILE_OPEN: 'SIDE_NAVIGATION.MOBILE_OPEN_LABEL',\n  MOBILE_CLOSE: 'SIDE_NAVIGATION.MOBILE_CLOSE_LABEL',\n  NAV: 'SIDE_NAVIGATION.NAV_ARIA_LABEL',\n  ANNOUNCE_COLLAPSED: 'SIDE_NAVIGATION.ANNOUNCE_COLLAPSED',\n  ANNOUNCE_EXPANDED: 'SIDE_NAVIGATION.ANNOUNCE_EXPANDED',\n} as const;\n\n@Component({\n  selector: 'ui-side-navigation',\n  templateUrl: './side-navigation.component.html',\n  styleUrls: ['./side-navigation.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [UiTranslatePipe],\n  host: {\n    '(keydown.escape)': 'onEscapeKey()',\n  },\n  imports: [\n    LogoComponent,\n    ButtonComponent,\n    CdkTrapFocus,\n    NgTemplateOutlet,\n    OverflowMenuComponentModule,\n    AvatarComponent,\n    IconComponentModule,\n    AsyncPipe,\n    UiTranslatePipe,\n  ],\n})\nexport class SideNavigationComponent implements OnInit, OnDestroy {\n  protected readonly avatarSize = AvatarSize;\n  protected readonly logoType = LogoTypeEnum;\n  protected readonly drawerControlsId = 'side-navigation-drawer';\n  protected readonly translationKey = TRANSLATION_KEY;\n\n  private readonly breakpointObserver = inject(BreakpointObserver);\n  private readonly liveAnnouncer = inject(LiveAnnouncer);\n  private readonly destroyRef = inject(DestroyRef);\n  private readonly uiTranslate = inject(UiTranslatePipe);\n\n  activeRoute = input<string>('');\n  mainCta = input<NavigationCta>();\n  mainNavigation = input.required<NavigationItem[]>();\n  secondaryNavigation = input<NavigationItem[]>();\n  contentTemplateExtendedRef = input<TemplateRef<unknown>>();\n  contentTemplateCollapsedRef = input<TemplateRef<unknown>>();\n  account = input<NavigationAccount>();\n  appContentTemplateRef = input<TemplateRef<unknown>>();\n  applicationTheme = input<ApplicationTheme>('light');\n  /** Optional override; falls back to `SIDE_NAVIGATION.COLLAPSE_LABEL` translation. */\n  collapseToggleLabel = input<string>();\n  /** Optional override; falls back to `SIDE_NAVIGATION.EXPAND_LABEL` translation. */\n  expandToggleLabel = input<string>();\n  /** Optional override; falls back to `SIDE_NAVIGATION.MOBILE_OPEN_LABEL` translation. */\n  mobileMenuLabel = input<string>();\n  /** Optional override; falls back to `SIDE_NAVIGATION.MOBILE_CLOSE_LABEL` translation. */\n  mobileCloseLabel = input<string>();\n  /** Optional override; falls back to `SIDE_NAVIGATION.NAV_ARIA_LABEL` translation. */\n  navAriaLabel = input<string>();\n\n  isCollapsed = model<boolean>(false);\n\n  mainCtaClicked = output<void>();\n  navigate = output<string>();\n  accountMenuSelected = output<string>();\n  logoClicked = output<void>();\n\n  isExpandingOrCollapsing = signal(false);\n  isMobileOrTablet = signal(false);\n\n  protected readonly trapFocus = computed(() => this.isMobileOrTablet() && !this.isCollapsed());\n\n  private collapseTimer: ReturnType<typeof setTimeout> | null = null;\n\n  activeRoutesMap = computed(() => {\n    const currentRoute = this.activeRoute();\n    const allItems = [...this.mainNavigation(), ...(this.secondaryNavigation() ?? [])];\n    return new Map(allItems.map(route => [route.url, currentRoute?.startsWith(route.url) ?? false]));\n  });\n\n  overflowMenuConfig = computed<MenuConfig>(() => ({\n    ...OVERFLOW_MENU_CONFIG,\n    panelClass: this.isCollapsed() ? 'collapsed-menu' : 'expanded-menu',\n  }));\n\n  protected readonly toggleAriaLabelOverride = computed(() =>\n    this.isCollapsed() ? this.expandToggleLabel() : this.collapseToggleLabel()\n  );\n\n  protected readonly toggleAriaKey = computed(() =>\n    this.isCollapsed() ? TRANSLATION_KEY.EXPAND : TRANSLATION_KEY.COLLAPSE\n  );\n\n  protected readonly mobileToggleAriaLabelOverride = computed(() =>\n    this.isCollapsed() ? this.mobileMenuLabel() : this.mobileCloseLabel()\n  );\n\n  protected readonly mobileToggleAriaKey = computed(() =>\n    this.isCollapsed() ? TRANSLATION_KEY.MOBILE_OPEN : TRANSLATION_KEY.MOBILE_CLOSE\n  );\n\n  ngOnInit(): void {\n    this.observeViewportBreakpoint();\n  }\n\n  ngOnDestroy(): void {\n    this.clearCollapseTimer();\n  }\n\n  toggleCollapsed({ announce = true }: { announce?: boolean } = {}): void {\n    this.isCollapsed.set(!this.isCollapsed());\n\n    if (announce) {\n      this.announceCollapseState();\n    }\n\n    if (this.prefersReducedMotion()) {\n      return;\n    }\n\n    this.isExpandingOrCollapsing.set(true);\n    this.clearCollapseTimer();\n    this.collapseTimer = setTimeout(() => {\n      this.isExpandingOrCollapsing.set(false);\n      this.collapseTimer = null;\n    }, COLLAPSE_ANIMATION_MS);\n  }\n\n  onNavigateClick(id: string): void {\n    this.navigate.emit(id);\n    this.autoCloseDrawer();\n  }\n\n  onSelectMenuItem($event: string): void {\n    this.accountMenuSelected.emit($event);\n    this.autoCloseDrawer();\n  }\n\n  onEscapeKey(): void {\n    this.autoCloseDrawer();\n  }\n\n  private autoCloseDrawer(): void {\n    if (this.isMobileOrTablet() && !this.isCollapsed()) {\n      this.toggleCollapsed({ announce: false });\n    }\n  }\n\n  private observeViewportBreakpoint(): void {\n    this.breakpointObserver\n      .observe([`(max-width: ${ScreenBreakpoints.TABLET}px)`])\n      .pipe(takeUntilDestroyed(this.destroyRef))\n      .subscribe(result => {\n        const wasMobileOrTablet = this.isMobileOrTablet();\n        this.isMobileOrTablet.set(result.matches);\n        if (result.matches && !wasMobileOrTablet) {\n          this.isCollapsed.set(true);\n        }\n      });\n  }\n\n  private announceCollapseState(): void {\n    const key = this.isCollapsed() ? TRANSLATION_KEY.ANNOUNCE_COLLAPSED : TRANSLATION_KEY.ANNOUNCE_EXPANDED;\n    this.uiTranslate\n      .transform(key)\n      .pipe(take(1))\n      .subscribe(message => {\n        void this.liveAnnouncer.announce(message, 'polite');\n      });\n  }\n\n  private clearCollapseTimer(): void {\n    if (this.collapseTimer !== null) {\n      clearTimeout(this.collapseTimer);\n      this.collapseTimer = null;\n    }\n  }\n\n  private prefersReducedMotion(): boolean {\n    return typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;\n  }\n}\n","<div class=\"mobile-navbar\">\n  <ui-logo [allowResizing]=\"true\" [width]=\"150\" [type]=\"logoType.DEFAULT\" (click)=\"logoClicked.emit()\"></ui-logo>\n\n  <ui-button\n    data-testid=\"navigation-collapse-mobile\"\n    data-test-role=\"navigation-collapse\"\n    [applicationTheme]=\"applicationTheme()\"\n    [variant]=\"'menuTrigger'\"\n    [iconName]=\"isCollapsed() ? 'Menu-burger' : 'Close'\"\n    [ariaLabel]=\"mobileToggleAriaLabelOverride() ?? (mobileToggleAriaKey() | uiTranslate | async) ?? ''\"\n    [ariaExpanded]=\"!isCollapsed()\"\n    [ariaControls]=\"drawerControlsId\"\n    [tooltip]=\"mobileToggleAriaLabelOverride() ?? (mobileToggleAriaKey() | uiTranslate | async) ?? ''\"\n    tooltipPosition=\"left\"\n    (buttonClickEvent)=\"toggleCollapsed()\"\n    class=\"navigation-collapse-button\"\n  ></ui-button>\n</div>\n\n<div class=\"main-container\">\n  <nav\n    [id]=\"drawerControlsId\"\n    role=\"navigation\"\n    [attr.aria-label]=\"navAriaLabel() ?? (translationKey.NAV | uiTranslate | async)\"\n    class=\"side-navigation-container\"\n    [class.collapsed]=\"isCollapsed()\"\n    [class.expanded]=\"!isCollapsed()\"\n    [cdkTrapFocus]=\"trapFocus()\"\n    [cdkTrapFocusAutoCapture]=\"trapFocus()\"\n  >\n    <div class=\"zone-logo-row\">\n      <div class=\"header\" [class.collapsed]=\"isCollapsed()\">\n        <ui-logo\n          class=\"logo-brandmark\"\n          [allowResizing]=\"true\"\n          [width]=\"19\"\n          [type]=\"logoType.PRIMARY_BRANDMARK_PINK\"\n          (click)=\"logoClicked.emit()\"\n        ></ui-logo>\n        <ui-logo\n          class=\"logo-lockup\"\n          [allowResizing]=\"true\"\n          [width]=\"136\"\n          [type]=\"logoType.DEFAULT\"\n          (click)=\"logoClicked.emit()\"\n        ></ui-logo>\n\n        <ui-button\n          data-testid=\"navigation-collapse\"\n          data-test-role=\"navigation-collapse\"\n          [applicationTheme]=\"applicationTheme()\"\n          [variant]=\"'menuTrigger'\"\n          [iconName]=\"isCollapsed() ? 'Sidebar-open-in-line' : 'Sidebar-close-in-line'\"\n          [ariaLabel]=\"toggleAriaLabelOverride() ?? (toggleAriaKey() | uiTranslate | async) ?? ''\"\n          [ariaPressed]=\"isCollapsed()\"\n          [tooltip]=\"toggleAriaLabelOverride() ?? (toggleAriaKey() | uiTranslate | async) ?? ''\"\n          tooltipPosition=\"below\"\n          (buttonClickEvent)=\"toggleCollapsed()\"\n          [class.collapsed]=\"isCollapsed()\"\n          class=\"navigation-collapse-button\"\n        ></ui-button>\n      </div>\n    </div>\n\n    <div class=\"zone-primary-nav\">\n      @if (mainCta(); as cta) {\n        <div class=\"main-cta\">\n          <ui-button\n            data-testid=\"main-cta\"\n            data-test-role=\"main-cta\"\n            [applicationTheme]=\"applicationTheme()\"\n            [fullWidth]=\"true\"\n            [variant]=\"cta.variant\"\n            iconPosition=\"left\"\n            [iconName]=\"cta.icon\"\n            [label]=\"isCollapsed() && !isExpandingOrCollapsing() ? '' : cta.label\"\n            [ariaLabel]=\"cta.label\"\n            [tooltip]=\"isCollapsed() ? cta.label : ''\"\n            tooltipPosition=\"right\"\n            (buttonClickEvent)=\"mainCtaClicked.emit()\"\n          ></ui-button>\n        </div>\n      }\n\n      <ul class=\"navigation-list\">\n        @for (item of mainNavigation(); track item.id) {\n          <li>\n            <ng-container [ngTemplateOutlet]=\"navigationItem\" [ngTemplateOutletContext]=\"{ item }\"></ng-container>\n          </li>\n        }\n      </ul>\n    </div>\n\n    <div class=\"zone-utility-nav\">\n      @if (secondaryNavigation(); as secondary) {\n        <ul class=\"navigation-list\">\n          @for (item of secondary; track item.id) {\n            <li>\n              <ng-container [ngTemplateOutlet]=\"navigationItem\" [ngTemplateOutletContext]=\"{ item }\"></ng-container>\n            </li>\n          }\n        </ul>\n      }\n    </div>\n\n    @if (account() || contentTemplateExtendedRef() || contentTemplateCollapsedRef()) {\n      <div class=\"zone-account\">\n        @if (contentTemplateExtendedRef(); as extendedRef) {\n          @if (!isCollapsed() && !isExpandingOrCollapsing()) {\n            <ng-container [ngTemplateOutlet]=\"extendedRef\"></ng-container>\n          }\n        }\n\n        @if (contentTemplateCollapsedRef(); as collapsedRef) {\n          @if (isCollapsed() || isExpandingOrCollapsing()) {\n            <ng-container [ngTemplateOutlet]=\"collapsedRef\"></ng-container>\n          }\n        }\n\n        @if (account(); as accountValue) {\n          <ui-overflow-menu\n            [applicationTheme]=\"applicationTheme()\"\n            [contentTemplateRef]=\"userInfo\"\n            [buttons]=\"accountValue.menu\"\n            [isDynamicMenu]=\"true\"\n            [class.collapsed]=\"isCollapsed() && !isExpandingOrCollapsing()\"\n            (selectItem)=\"onSelectMenuItem($event)\"\n            [menuConfig]=\"overflowMenuConfig()\"\n          ></ui-overflow-menu>\n        }\n      </div>\n    }\n  </nav>\n  <div class=\"app-container\" [class.collapsed]=\"isCollapsed()\" [class.expanded]=\"!isCollapsed()\">\n    @if (appContentTemplateRef(); as appRef) {\n      <ng-container [ngTemplateOutlet]=\"appRef\"></ng-container>\n    }\n    @if (isMobileOrTablet() && !isCollapsed()) {\n      <button\n        type=\"button\"\n        class=\"backdrop\"\n        [attr.aria-label]=\"mobileCloseLabel() ?? (translationKey.MOBILE_CLOSE | uiTranslate | async) ?? ''\"\n        (click)=\"toggleCollapsed()\"\n      ></button>\n    }\n  </div>\n</div>\n\n<ng-template #navigationItem let-item=\"item\">\n  @if (item) {\n    <div class=\"menu-item\" [attr.aria-current]=\"activeRoutesMap().get(item.url) ? 'page' : null\">\n      <ui-button\n        [attr.data-testid]=\"item.id\"\n        data-test-role=\"menu-item\"\n        [applicationTheme]=\"applicationTheme()\"\n        [fullWidth]=\"true\"\n        [disabledScaleOnClick]=\"true\"\n        [variant]=\"'menuCell'\"\n        iconPosition=\"left\"\n        [iconName]=\"item.icon\"\n        [label]=\"isCollapsed() && !isExpandingOrCollapsing() ? '' : item.text\"\n        (buttonClickEvent)=\"onNavigateClick(item.id)\"\n        (keydown.Tab)=\"$event.stopPropagation()\"\n        (keydown.shift.tab)=\"$event.stopPropagation()\"\n        [ariaLabel]=\"item.text\"\n        [class.active]=\"activeRoutesMap().get(item.url)\"\n        [buttonBadgeConfig]=\"\n          isCollapsed() && !isExpandingOrCollapsing() ? undefined : $safeNavigationMigration(item?.badgeOptions)\n        \"\n        [tooltip]=\"isCollapsed() ? item.text : undefined\"\n        tooltipPosition=\"right\"\n        [iconFilled]=\"!!activeRoutesMap().get(item.url)\"\n      ></ui-button>\n    </div>\n  }\n</ng-template>\n\n<ng-template #userInfo>\n  @if (account(); as accountValue) {\n    <div class=\"user-info\">\n      <ui-avatar [size]=\"isCollapsed() ? avatarSize.MEDIUM : avatarSize.SMALL\" [name]=\"accountValue.name\"></ui-avatar>\n      @if (!isCollapsed()) {\n        <span class=\"user-name\">{{ accountValue.name }}</span>\n        <ui-icon class=\"user-chevron\" name=\"Arrow-chevron-right-in-line\" size=\"24\" aria-hidden=\"true\"></ui-icon>\n      }\n    </div>\n  }\n</ng-template>\n","import { A11yModule } from '@angular/cdk/a11y';\nimport { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\n\nimport { AvatarComponentModule } from '@testgorilla/tgo-ui/components/avatar';\nimport { ButtonComponentModule } from '@testgorilla/tgo-ui/components/button';\nimport { UiTranslatePipe } from '@testgorilla/tgo-ui/components/core';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { LogoComponentModule } from '@testgorilla/tgo-ui/components/logo';\nimport { OverflowMenuComponentModule } from '@testgorilla/tgo-ui/components/overflow-menu';\n\nimport { SideNavigationComponent } from './side-navigation.component';\n\n@NgModule({\n  imports: [\n    A11yModule,\n    CommonModule,\n    UiTranslatePipe,\n    ButtonComponentModule,\n    AvatarComponentModule,\n    IconComponentModule,\n    LogoComponentModule,\n    OverflowMenuComponentModule,\n    SideNavigationComponent,\n  ],\n  exports: [SideNavigationComponent],\n})\nexport class SideNavigationComponentModule {}\n"],"mappings":"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"}
+{"version":3,"file":"testgorilla-tgo-ui-components-side-navigation.mjs","names":[],"sources":["../../../components/side-navigation/side-navigation.component.ts","../../../components/side-navigation/side-navigation.component.html","../../../components/side-navigation/side-navigation.component.module.ts"],"sourcesContent":["import { LiveAnnouncer, CdkTrapFocus } from '@angular/cdk/a11y';\nimport { BreakpointObserver } from '@angular/cdk/layout';\nimport { NgTemplateOutlet, AsyncPipe } from '@angular/common';\nimport {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  DestroyRef,\n  OnDestroy,\n  OnInit,\n  TemplateRef,\n  computed,\n  inject,\n  input,\n  model,\n  output,\n  signal,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { take } from 'rxjs';\n\nimport { AvatarSize, AvatarComponent } from '@testgorilla/tgo-ui/components/avatar';\nimport { ButtonComponent } from '@testgorilla/tgo-ui/components/button';\nimport { ApplicationTheme, ScreenBreakpoints, UiTranslatePipe } from '@testgorilla/tgo-ui/components/core';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { LogoTypeEnum, LogoComponent } from '@testgorilla/tgo-ui/components/logo';\nimport { MenuConfig, OverflowMenuComponentModule } from '@testgorilla/tgo-ui/components/overflow-menu';\n\nimport {\n  NavigationAccount,\n  NavigationChildItem,\n  NavigationCta,\n  NavigationExpandedChange,\n  NavigationItem,\n  NavigationTrailingActionClick,\n} from './side-navigation.model';\n\ntype NavigationNode = NavigationItem | NavigationChildItem;\n\nconst flattenNavigation = (items: NavigationNode[]): NavigationNode[] =>\n  items.flatMap(item => [item, ...flattenNavigation(item.children ?? [])]);\n\nconst OVERFLOW_MENU_CONFIG: Omit<MenuConfig, 'panelClass'> = {\n  overlapTrigger: true,\n  xPosition: 'before',\n  yPosition: 'below',\n};\n\nexport const COLLAPSE_ANIMATION_MS = 180;\n\nconst POPOVER_GAP_FROM_RAIL = 8;\n\nconst TRANSLATION_KEY = {\n  COLLAPSE: 'SIDE_NAVIGATION.COLLAPSE_LABEL',\n  EXPAND: 'SIDE_NAVIGATION.EXPAND_LABEL',\n  MOBILE_OPEN: 'SIDE_NAVIGATION.MOBILE_OPEN_LABEL',\n  MOBILE_CLOSE: 'SIDE_NAVIGATION.MOBILE_CLOSE_LABEL',\n  NAV: 'SIDE_NAVIGATION.NAV_ARIA_LABEL',\n  ANNOUNCE_COLLAPSED: 'SIDE_NAVIGATION.ANNOUNCE_COLLAPSED',\n  ANNOUNCE_EXPANDED: 'SIDE_NAVIGATION.ANNOUNCE_EXPANDED',\n  SUBMENU: 'SIDE_NAVIGATION.SUBMENU_LABEL',\n  NEW: 'SIDE_NAVIGATION.NEW_LABEL',\n} as const;\n\n@Component({\n  selector: 'ui-side-navigation',\n  templateUrl: './side-navigation.component.html',\n  styleUrls: ['./side-navigation.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [UiTranslatePipe],\n  host: {\n    '(keydown.escape)': 'onEscapeKey()',\n  },\n  imports: [\n    LogoComponent,\n    ButtonComponent,\n    CdkTrapFocus,\n    NgTemplateOutlet,\n    OverflowMenuComponentModule,\n    AvatarComponent,\n    IconComponentModule,\n    AsyncPipe,\n    UiTranslatePipe,\n  ],\n})\nexport class SideNavigationComponent implements OnInit, OnDestroy {\n  protected readonly avatarSize = AvatarSize;\n  protected readonly logoType = LogoTypeEnum;\n  protected readonly drawerControlsId = 'side-navigation-drawer';\n  protected readonly translationKey = TRANSLATION_KEY;\n\n  private readonly breakpointObserver = inject(BreakpointObserver);\n  private readonly liveAnnouncer = inject(LiveAnnouncer);\n  private readonly destroyRef = inject(DestroyRef);\n  private readonly uiTranslate = inject(UiTranslatePipe);\n\n  activeRoute = input<string>('');\n  mainCta = input<NavigationCta>();\n  mainNavigation = input.required<NavigationItem[]>();\n  secondaryNavigation = input<NavigationItem[]>();\n  contentTemplateExtendedRef = input<TemplateRef<unknown>>();\n  contentTemplateCollapsedRef = input<TemplateRef<unknown>>();\n  account = input<NavigationAccount>();\n  appContentTemplateRef = input<TemplateRef<unknown>>();\n  applicationTheme = input<ApplicationTheme>('light');\n  /** Optional override; falls back to `SIDE_NAVIGATION.COLLAPSE_LABEL` translation. */\n  collapseToggleLabel = input<string>();\n  /** Optional override; falls back to `SIDE_NAVIGATION.EXPAND_LABEL` translation. */\n  expandToggleLabel = input<string>();\n  /** Optional override; falls back to `SIDE_NAVIGATION.MOBILE_OPEN_LABEL` translation. */\n  mobileMenuLabel = input<string>();\n  /** Optional override; falls back to `SIDE_NAVIGATION.MOBILE_CLOSE_LABEL` translation. */\n  mobileCloseLabel = input<string>();\n  /** Optional override; falls back to `SIDE_NAVIGATION.NAV_ARIA_LABEL` translation. */\n  navAriaLabel = input<string>();\n  /** Shows each chevron's label, such as \"Switch job\", as a tooltip on hover. */\n  hasChevronTooltips = input(false, { transform: booleanAttribute });\n\n  isCollapsed = model<boolean>(false);\n\n  mainCtaClicked = output<void>();\n  navigate = output<string>();\n  expandedChange = output<NavigationExpandedChange>();\n  trailingActionClicked = output<NavigationTrailingActionClick>();\n  accountMenuSelected = output<string>();\n  logoClicked = output<void>();\n\n  isExpandingOrCollapsing = signal(false);\n  isMobileOrTablet = signal(false);\n\n  protected readonly trapFocus = computed(() => this.isMobileOrTablet() && !this.isCollapsed());\n\n  private collapseTimer: ReturnType<typeof setTimeout> | null = null;\n\n  activeRoutesMap = computed(() => {\n    const currentRoute = this.activeRoute();\n    const allItems = flattenNavigation(this.allNavigation());\n    return new Map(allItems.map(route => [route.url, currentRoute?.startsWith(route.url) ?? false]));\n  });\n\n  /**\n   * Within a branch only the child holding the longest matching URL is followed, and the deepest match is the\n   * current page; top-level items stay independent so flat lists behave as before.\n   */\n  protected readonly highlightStates = computed(() => {\n    const matches = this.activeRoutesMap();\n    const states = new Map<string, 'active' | 'ancestor'>();\n    const longestMatch = (item: NavigationNode): number =>\n      Math.max(matches.get(item.url) ? item.url.length : -1, ...(item.children ?? []).map(longestMatch));\n    const mark = (item: NavigationNode): void => {\n      let best: NavigationNode | null = null;\n      let bestLength = -1;\n      for (const child of item.children ?? []) {\n        const length = longestMatch(child);\n        if (length > bestLength) {\n          best = child;\n          bestLength = length;\n        }\n      }\n      if (best) {\n        states.set(item.id, 'ancestor');\n        mark(best);\n      } else {\n        states.set(item.id, 'active');\n      }\n    };\n    this.allNavigation()\n      .filter(item => longestMatch(item) >= 0)\n      .forEach(mark);\n    return states;\n  });\n\n  protected readonly shouldShowLabels = computed(() => !this.isCollapsed() || this.isExpandingOrCollapsing());\n\n  overflowMenuConfig = computed<MenuConfig>(() => ({\n    ...OVERFLOW_MENU_CONFIG,\n    panelClass: this.isCollapsed() ? 'collapsed-menu' : 'expanded-menu',\n  }));\n\n  protected readonly toggleAriaLabelOverride = computed(() =>\n    this.isCollapsed() ? this.expandToggleLabel() : this.collapseToggleLabel()\n  );\n\n  protected readonly toggleAriaKey = computed(() =>\n    this.isCollapsed() ? TRANSLATION_KEY.EXPAND : TRANSLATION_KEY.COLLAPSE\n  );\n\n  protected readonly mobileToggleAriaLabelOverride = computed(() =>\n    this.isCollapsed() ? this.mobileMenuLabel() : this.mobileCloseLabel()\n  );\n\n  protected readonly mobileToggleAriaKey = computed(() =>\n    this.isCollapsed() ? TRANSLATION_KEY.MOBILE_OPEN : TRANSLATION_KEY.MOBILE_CLOSE\n  );\n\n  ngOnInit(): void {\n    this.observeViewportBreakpoint();\n  }\n\n  ngOnDestroy(): void {\n    this.clearCollapseTimer();\n  }\n\n  toggleCollapsed({ announce = true }: { announce?: boolean } = {}): void {\n    this.isCollapsed.set(!this.isCollapsed());\n\n    if (announce) {\n      this.announceCollapseState();\n    }\n\n    if (this.prefersReducedMotion()) {\n      return;\n    }\n\n    this.isExpandingOrCollapsing.set(true);\n    this.clearCollapseTimer();\n    this.collapseTimer = setTimeout(() => {\n      this.isExpandingOrCollapsing.set(false);\n      this.collapseTimer = null;\n    }, COLLAPSE_ANIMATION_MS);\n  }\n\n  onNavigateClick(id: string): void {\n    this.navigate.emit(id);\n    this.autoCloseDrawer();\n  }\n\n  emitExpandedChange(item: NavigationNode): void {\n    this.expandedChange.emit({ id: item.id, isExpanded: !item.isExpanded });\n  }\n\n  emitTrailingAction(item: NavigationNode, event: Event): void {\n    const trigger = event.target instanceof Element ? event.target.closest('button') : null;\n    if (!trigger) {\n      return;\n    }\n    // The whole row, so clicking its other half while the popover is open toggles instead of dismissing.\n    const anchor = trigger.closest<HTMLElement>('.menu-item') ?? trigger;\n    // The row cannot take focus, so focus the clicked control for the popover to return to.\n    trigger.focus({ preventScroll: true });\n    // Measured, not constant: a scrollbar in the primary zone moves the row away from the rail's edge.\n    const railEdge = anchor.closest('nav')?.getBoundingClientRect().right ?? 0;\n    const popoverOffset = railEdge - anchor.getBoundingClientRect().right + POPOVER_GAP_FROM_RAIL;\n    this.trailingActionClicked.emit({ id: item.id, anchor, popoverOffset });\n  }\n\n  onSelectMenuItem($event: string): void {\n    this.accountMenuSelected.emit($event);\n    this.autoCloseDrawer();\n  }\n\n  onEscapeKey(): void {\n    this.autoCloseDrawer();\n  }\n\n  private allNavigation(): NavigationNode[] {\n    return [...this.mainNavigation(), ...(this.secondaryNavigation() ?? [])];\n  }\n\n  private autoCloseDrawer(): void {\n    if (this.isMobileOrTablet() && !this.isCollapsed()) {\n      this.toggleCollapsed({ announce: false });\n    }\n  }\n\n  private observeViewportBreakpoint(): void {\n    this.breakpointObserver\n      .observe([`(max-width: ${ScreenBreakpoints.TABLET}px)`])\n      .pipe(takeUntilDestroyed(this.destroyRef))\n      .subscribe(result => {\n        const wasMobileOrTablet = this.isMobileOrTablet();\n        this.isMobileOrTablet.set(result.matches);\n        if (result.matches && !wasMobileOrTablet) {\n          this.isCollapsed.set(true);\n        }\n      });\n  }\n\n  private announceCollapseState(): void {\n    const key = this.isCollapsed() ? TRANSLATION_KEY.ANNOUNCE_COLLAPSED : TRANSLATION_KEY.ANNOUNCE_EXPANDED;\n    this.uiTranslate\n      .transform(key)\n      .pipe(take(1))\n      .subscribe(message => {\n        void this.liveAnnouncer.announce(message, 'polite');\n      });\n  }\n\n  private clearCollapseTimer(): void {\n    if (this.collapseTimer !== null) {\n      clearTimeout(this.collapseTimer);\n      this.collapseTimer = null;\n    }\n  }\n\n  private prefersReducedMotion(): boolean {\n    return typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;\n  }\n}\n","<div class=\"mobile-navbar\">\n  <ui-logo [allowResizing]=\"true\" [width]=\"150\" [type]=\"logoType.DEFAULT\" (click)=\"logoClicked.emit()\"></ui-logo>\n\n  <ui-button\n    data-testid=\"navigation-collapse-mobile\"\n    data-test-role=\"navigation-collapse\"\n    [applicationTheme]=\"applicationTheme()\"\n    [variant]=\"'menuTrigger'\"\n    [iconName]=\"isCollapsed() ? 'Menu-burger' : 'Close'\"\n    [ariaLabel]=\"mobileToggleAriaLabelOverride() ?? (mobileToggleAriaKey() | uiTranslate | async) ?? ''\"\n    [ariaExpanded]=\"!isCollapsed()\"\n    [ariaControls]=\"drawerControlsId\"\n    [tooltip]=\"mobileToggleAriaLabelOverride() ?? (mobileToggleAriaKey() | uiTranslate | async) ?? ''\"\n    tooltipPosition=\"left\"\n    (buttonClickEvent)=\"toggleCollapsed()\"\n    class=\"navigation-collapse-button\"\n  ></ui-button>\n</div>\n\n<div class=\"main-container\">\n  <nav\n    [id]=\"drawerControlsId\"\n    role=\"navigation\"\n    [attr.aria-label]=\"navAriaLabel() ?? (translationKey.NAV | uiTranslate | async)\"\n    class=\"side-navigation-container\"\n    [class.collapsed]=\"isCollapsed()\"\n    [class.expanded]=\"!isCollapsed()\"\n    [cdkTrapFocus]=\"trapFocus()\"\n    [cdkTrapFocusAutoCapture]=\"trapFocus()\"\n  >\n    <div class=\"zone-logo-row\">\n      <div class=\"header\" [class.collapsed]=\"isCollapsed()\">\n        <ui-logo\n          class=\"logo-brandmark\"\n          [allowResizing]=\"true\"\n          [width]=\"19\"\n          [type]=\"logoType.PRIMARY_BRANDMARK_PINK\"\n          (click)=\"logoClicked.emit()\"\n        ></ui-logo>\n        <ui-logo\n          class=\"logo-lockup\"\n          [allowResizing]=\"true\"\n          [width]=\"136\"\n          [type]=\"logoType.DEFAULT\"\n          (click)=\"logoClicked.emit()\"\n        ></ui-logo>\n\n        <ui-button\n          data-testid=\"navigation-collapse\"\n          data-test-role=\"navigation-collapse\"\n          [applicationTheme]=\"applicationTheme()\"\n          [variant]=\"'menuTrigger'\"\n          [iconName]=\"isCollapsed() ? 'Sidebar-open-in-line' : 'Sidebar-close-in-line'\"\n          [ariaLabel]=\"toggleAriaLabelOverride() ?? (toggleAriaKey() | uiTranslate | async) ?? ''\"\n          [ariaPressed]=\"isCollapsed()\"\n          [tooltip]=\"toggleAriaLabelOverride() ?? (toggleAriaKey() | uiTranslate | async) ?? ''\"\n          tooltipPosition=\"below\"\n          (buttonClickEvent)=\"toggleCollapsed()\"\n          [class.collapsed]=\"isCollapsed()\"\n          class=\"navigation-collapse-button\"\n        ></ui-button>\n      </div>\n    </div>\n\n    <div class=\"zone-primary-nav\">\n      @if (mainCta(); as cta) {\n        <div class=\"main-cta\">\n          <ui-button\n            data-testid=\"main-cta\"\n            data-test-role=\"main-cta\"\n            [applicationTheme]=\"applicationTheme()\"\n            [fullWidth]=\"true\"\n            [variant]=\"cta.variant\"\n            iconPosition=\"left\"\n            [iconName]=\"cta.icon\"\n            [label]=\"isCollapsed() && !isExpandingOrCollapsing() ? '' : cta.label\"\n            [ariaLabel]=\"cta.label\"\n            [tooltip]=\"isCollapsed() ? cta.label : ''\"\n            tooltipPosition=\"right\"\n            (buttonClickEvent)=\"mainCtaClicked.emit()\"\n          ></ui-button>\n        </div>\n      }\n\n      <ul class=\"navigation-list\">\n        @for (item of mainNavigation(); track item.id) {\n          <li>\n            <ng-container\n              [ngTemplateOutlet]=\"navigationItem\"\n              [ngTemplateOutletContext]=\"{ item, level: 0 }\"\n            ></ng-container>\n          </li>\n        }\n      </ul>\n    </div>\n\n    <div class=\"zone-utility-nav\">\n      @if (secondaryNavigation(); as secondary) {\n        <ul class=\"navigation-list\">\n          @for (item of secondary; track item.id) {\n            <li>\n              <ng-container\n                [ngTemplateOutlet]=\"navigationItem\"\n                [ngTemplateOutletContext]=\"{ item, level: 0 }\"\n              ></ng-container>\n            </li>\n          }\n        </ul>\n      }\n    </div>\n\n    @if (account() || contentTemplateExtendedRef() || contentTemplateCollapsedRef()) {\n      <div class=\"zone-account\">\n        @if (contentTemplateExtendedRef(); as extendedRef) {\n          @if (!isCollapsed() && !isExpandingOrCollapsing()) {\n            <ng-container [ngTemplateOutlet]=\"extendedRef\"></ng-container>\n          }\n        }\n\n        @if (contentTemplateCollapsedRef(); as collapsedRef) {\n          @if (isCollapsed() || isExpandingOrCollapsing()) {\n            <ng-container [ngTemplateOutlet]=\"collapsedRef\"></ng-container>\n          }\n        }\n\n        @if (account(); as accountValue) {\n          <ui-overflow-menu\n            [applicationTheme]=\"applicationTheme()\"\n            [contentTemplateRef]=\"userInfo\"\n            [buttons]=\"accountValue.menu\"\n            [isDynamicMenu]=\"true\"\n            [class.collapsed]=\"isCollapsed() && !isExpandingOrCollapsing()\"\n            (selectItem)=\"onSelectMenuItem($event)\"\n            [menuConfig]=\"overflowMenuConfig()\"\n          ></ui-overflow-menu>\n        }\n      </div>\n    }\n  </nav>\n  <div class=\"app-container\" [class.collapsed]=\"isCollapsed()\" [class.expanded]=\"!isCollapsed()\">\n    @if (appContentTemplateRef(); as appRef) {\n      <ng-container [ngTemplateOutlet]=\"appRef\"></ng-container>\n    }\n    @if (isMobileOrTablet() && !isCollapsed()) {\n      <button\n        type=\"button\"\n        class=\"backdrop\"\n        [attr.aria-label]=\"mobileCloseLabel() ?? (translationKey.MOBILE_CLOSE | uiTranslate | async) ?? ''\"\n        (click)=\"toggleCollapsed()\"\n      ></button>\n    }\n  </div>\n</div>\n\n<ng-template #navigationItem let-item=\"item\" let-level=\"level\">\n  @if (item) {\n    @let highlight = highlightStates().get(item.id);\n    @let hasChildren = !!item.children?.length;\n    @let action = item.trailingAction;\n    @let highlighted =\n      highlight === 'active' || !!action?.isExpanded || (highlight === 'ancestor' && !shouldShowLabels());\n    @let activeSection = !highlighted && highlight === 'ancestor' && level === 0;\n    @let childListId = 'side-navigation-children-' + item.id;\n    @let newLabel = item.isNew ? (translationKey.NEW | uiTranslate | async) : null;\n    @let accessibleName = item.text + (item.status ? ', ' + item.status.label : '') + (newLabel ? ', ' + newLabel : '');\n    <div\n      class=\"menu-item\"\n      [class.nested]=\"level > 0\"\n      [class.with-status]=\"!!item.status\"\n      [class.with-action]=\"shouldShowLabels() && (hasChildren || !!action)\"\n      [class.with-new]=\"shouldShowLabels() && !!item.isNew\"\n      [attr.aria-current]=\"\n        highlight === 'active' ? 'page' : highlight === 'ancestor' && !shouldShowLabels() ? 'true' : null\n      \"\n    >\n      @if (item.status && shouldShowLabels()) {\n        <span [class]=\"'status-dot status-' + item.status.color\" aria-hidden=\"true\"></span>\n      }\n      <ui-button\n        class=\"menu-item-button\"\n        [attr.data-testid]=\"item.id\"\n        data-test-role=\"menu-item\"\n        [applicationTheme]=\"applicationTheme()\"\n        [fullWidth]=\"true\"\n        [disabledScaleOnClick]=\"true\"\n        [variant]=\"'menuCell'\"\n        [size]=\"level > 0 ? 'medium' : 'big'\"\n        iconPosition=\"left\"\n        [iconName]=\"item.status ? undefined : item.icon\"\n        [label]=\"shouldShowLabels() ? item.text : ''\"\n        [isSingleLineLabel]=\"level > 0 || hasChildren || !!action || !!item.isNew\"\n        (buttonClickEvent)=\"action ? emitTrailingAction(item, $event) : onNavigateClick(item.id)\"\n        [ariaExpanded]=\"action?.isExpanded\"\n        (keydown.Tab)=\"$event.stopPropagation()\"\n        (keydown.shift.tab)=\"$event.stopPropagation()\"\n        [ariaLabel]=\"accessibleName\"\n        [class.active]=\"highlighted\"\n        [class.ancestor]=\"activeSection\"\n        [buttonBadgeConfig]=\"shouldShowLabels() ? $safeNavigationMigration(item?.badgeOptions) : undefined\"\n        [tooltip]=\"isCollapsed() ? item.text : undefined\"\n        tooltipPosition=\"right\"\n        [iconFilled]=\"highlighted\"\n      ></ui-button>\n      @if (shouldShowLabels()) {\n        @if (item.isNew) {\n          <span class=\"new-dot\" aria-hidden=\"true\"></span>\n        }\n        @if (action) {\n          <ui-button\n            class=\"menu-item-action\"\n            variant=\"icon-button\"\n            size=\"small\"\n            iconButtonShape=\"square\"\n            [justIcon]=\"true\"\n            [disabledScaleOnClick]=\"true\"\n            [applicationTheme]=\"applicationTheme()\"\n            [iconName]=\"action.icon\"\n            [testId]=\"item.id + '-action'\"\n            [ariaLabel]=\"action.ariaLabel\"\n            [ariaExpanded]=\"action.isExpanded\"\n            [ariaHasPopup]=\"action.isExpanded === undefined ? undefined : 'dialog'\"\n            [tooltip]=\"hasChevronTooltips() ? action.ariaLabel : ''\"\n            (buttonClickEvent)=\"emitTrailingAction(item, $event)\"\n            (keydown.Tab)=\"$event.stopPropagation()\"\n            (keydown.shift.tab)=\"$event.stopPropagation()\"\n          ></ui-button>\n        } @else if (hasChildren) {\n          @let submenuLabel = (translationKey.SUBMENU | uiTranslate: { label: item.text } | async) ?? '';\n          <ui-button\n            class=\"menu-item-action\"\n            variant=\"icon-button\"\n            size=\"small\"\n            iconButtonShape=\"square\"\n            [justIcon]=\"true\"\n            [disabledScaleOnClick]=\"true\"\n            [applicationTheme]=\"applicationTheme()\"\n            [iconName]=\"item.isExpanded ? 'Arrow-chevron-up-in-line' : 'Arrow-chevron-down-in-line'\"\n            [testId]=\"item.id + '-toggle'\"\n            [ariaLabel]=\"submenuLabel\"\n            [ariaExpanded]=\"!!item.isExpanded\"\n            [ariaControls]=\"item.isExpanded ? childListId : undefined\"\n            [tooltip]=\"hasChevronTooltips() ? submenuLabel : ''\"\n            (buttonClickEvent)=\"emitExpandedChange(item)\"\n            (keydown.Tab)=\"$event.stopPropagation()\"\n            (keydown.shift.tab)=\"$event.stopPropagation()\"\n          ></ui-button>\n        }\n      }\n    </div>\n    @if (hasChildren && item.isExpanded && shouldShowLabels()) {\n      <ul class=\"navigation-list navigation-sublist\" [class.tree]=\"level > 0\" [id]=\"childListId\">\n        @for (child of item.children; track child.id) {\n          <li>\n            <ng-container\n              [ngTemplateOutlet]=\"navigationItem\"\n              [ngTemplateOutletContext]=\"{ item: child, level: level + 1 }\"\n            ></ng-container>\n          </li>\n        }\n      </ul>\n    }\n  }\n</ng-template>\n\n<ng-template #userInfo>\n  @if (account(); as accountValue) {\n    <div class=\"user-info\">\n      <ui-avatar [size]=\"isCollapsed() ? avatarSize.MEDIUM : avatarSize.SMALL\" [name]=\"accountValue.name\"></ui-avatar>\n      @if (!isCollapsed()) {\n        <span class=\"user-name\">{{ accountValue.name }}</span>\n        <ui-icon class=\"user-chevron\" name=\"Arrow-chevron-right-in-line\" size=\"24\" aria-hidden=\"true\"></ui-icon>\n      }\n    </div>\n  }\n</ng-template>\n","import { A11yModule } from '@angular/cdk/a11y';\nimport { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\n\nimport { AvatarComponentModule } from '@testgorilla/tgo-ui/components/avatar';\nimport { ButtonComponentModule } from '@testgorilla/tgo-ui/components/button';\nimport { UiTranslatePipe } from '@testgorilla/tgo-ui/components/core';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { LogoComponentModule } from '@testgorilla/tgo-ui/components/logo';\nimport { OverflowMenuComponentModule } from '@testgorilla/tgo-ui/components/overflow-menu';\n\nimport { SideNavigationComponent } from './side-navigation.component';\n\n@NgModule({\n  imports: [\n    A11yModule,\n    CommonModule,\n    UiTranslatePipe,\n    ButtonComponentModule,\n    AvatarComponentModule,\n    IconComponentModule,\n    LogoComponentModule,\n    OverflowMenuComponentModule,\n    SideNavigationComponent,\n  ],\n  exports: [SideNavigationComponent],\n})\nexport class SideNavigationComponentModule {}\n"],"mappings":"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"}

package/fesm2022/testgorilla-tgo-ui-components-side-panel.mjs

@@ -311,12 +311,15 @@ var SidePanelComponent = class SidePanelComponent {
 						"ariaExpanded",
 						"ariaControls",
 						"ariaPressed",
+						"ariaHasPopup",
 						"ariaRequired",
 						"ariaLabelledby",
 						"ariaDescribedby",
 						"preventDefault",
 						"hasBackground",
 						"circular",
+						"isSingleLineLabel",
+						"iconButtonShape",
 						"tooltipPosition",
 						"role",
 						"iconFilled",