@testgorilla/tgo-ui 11.22.2 → 12.0.0

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

@@ -1,214 +1,666 @@
-import { LiveAnnouncer, CdkTrapFocus, A11yModule } from '@angular/cdk/a11y';
-import { BreakpointObserver } from '@angular/cdk/layout';
-import { NgTemplateOutlet, AsyncPipe, CommonModule } from '@angular/common';
-import * as i0 from '@angular/core';
-import { inject, DestroyRef, input, model, output, signal, computed, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { take } from 'rxjs';
-import { AvatarSize, AvatarComponent, AvatarComponentModule } from '@testgorilla/tgo-ui/components/avatar';
-import { ButtonComponent, ButtonComponentModule } from '@testgorilla/tgo-ui/components/button';
-import { UiTranslatePipe, ScreenBreakpoints } from '@testgorilla/tgo-ui/components/core';
-import * as i2 from '@testgorilla/tgo-ui/components/icon';
-import { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';
-import { LogoTypeEnum, LogoComponent, LogoComponentModule } 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';
-
+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 { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+import { take } from "rxjs";
+import { AvatarComponent, AvatarComponentModule, AvatarSize } from "@testgorilla/tgo-ui/components/avatar";
+import { ButtonComponent, ButtonComponentModule } from "@testgorilla/tgo-ui/components/button";
+import { ScreenBreakpoints, UiTranslatePipe } from "@testgorilla/tgo-ui/components/core";
+import * as i2 from "@testgorilla/tgo-ui/components/icon";
+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 OVERFLOW_MENU_CONFIG = {
-    overlapTrigger: true,
-    xPosition: 'before',
-    yPosition: 'below',
+	overlapTrigger: true,
+	xPosition: "before",
+	yPosition: "below"
 };
 const COLLAPSE_ANIMATION_MS = 180;
 const TRANSLATION_KEY = {
-    COLLAPSE: 'SIDE_NAVIGATION.COLLAPSE_LABEL',
-    EXPAND: 'SIDE_NAVIGATION.EXPAND_LABEL',
-    MOBILE_OPEN: 'SIDE_NAVIGATION.MOBILE_OPEN_LABEL',
-    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',
+	COLLAPSE: "SIDE_NAVIGATION.COLLAPSE_LABEL",
+	EXPAND: "SIDE_NAVIGATION.EXPAND_LABEL",
+	MOBILE_OPEN: "SIDE_NAVIGATION.MOBILE_OPEN_LABEL",
+	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"
 };
-class SideNavigationComponent {
-    constructor() {
-        this.avatarSize = AvatarSize;
-        this.logoType = LogoTypeEnum;
-        this.drawerControlsId = 'side-navigation-drawer';
-        this.translationKey = TRANSLATION_KEY;
-        this.breakpointObserver = inject(BreakpointObserver);
-        this.liveAnnouncer = inject(LiveAnnouncer);
-        this.destroyRef = inject(DestroyRef);
-        this.uiTranslate = inject(UiTranslatePipe);
-        this.activeRoute = input('', ...(ngDevMode ? [{ debugName: "activeRoute" }] : /* istanbul ignore next */ []));
-        this.mainCta = input(...(ngDevMode ? [undefined, { debugName: "mainCta" }] : /* istanbul ignore next */ []));
-        this.mainNavigation = input.required(...(ngDevMode ? [{ debugName: "mainNavigation" }] : /* istanbul ignore next */ []));
-        this.secondaryNavigation = input(...(ngDevMode ? [undefined, { debugName: "secondaryNavigation" }] : /* istanbul ignore next */ []));
-        this.contentTemplateExtendedRef = input(...(ngDevMode ? [undefined, { debugName: "contentTemplateExtendedRef" }] : /* istanbul ignore next */ []));
-        this.contentTemplateCollapsedRef = input(...(ngDevMode ? [undefined, { debugName: "contentTemplateCollapsedRef" }] : /* istanbul ignore next */ []));
-        this.account = input(...(ngDevMode ? [undefined, { debugName: "account" }] : /* istanbul ignore next */ []));
-        this.appContentTemplateRef = input(...(ngDevMode ? [undefined, { debugName: "appContentTemplateRef" }] : /* istanbul ignore next */ []));
-        this.applicationTheme = input('light', ...(ngDevMode ? [{ debugName: "applicationTheme" }] : /* istanbul ignore next */ []));
-        /** Optional override; falls back to `SIDE_NAVIGATION.COLLAPSE_LABEL` translation. */
-        this.collapseToggleLabel = input(...(ngDevMode ? [undefined, { debugName: "collapseToggleLabel" }] : /* istanbul ignore next */ []));
-        /** Optional override; falls back to `SIDE_NAVIGATION.EXPAND_LABEL` translation. */
-        this.expandToggleLabel = input(...(ngDevMode ? [undefined, { debugName: "expandToggleLabel" }] : /* istanbul ignore next */ []));
-        /** Optional override; falls back to `SIDE_NAVIGATION.MOBILE_OPEN_LABEL` translation. */
-        this.mobileMenuLabel = input(...(ngDevMode ? [undefined, { debugName: "mobileMenuLabel" }] : /* istanbul ignore next */ []));
-        /** Optional override; falls back to `SIDE_NAVIGATION.MOBILE_CLOSE_LABEL` translation. */
-        this.mobileCloseLabel = input(...(ngDevMode ? [undefined, { debugName: "mobileCloseLabel" }] : /* istanbul ignore next */ []));
-        /** Optional override; falls back to `SIDE_NAVIGATION.NAV_ARIA_LABEL` translation. */
-        this.navAriaLabel = input(...(ngDevMode ? [undefined, { debugName: "navAriaLabel" }] : /* istanbul ignore next */ []));
-        this.isCollapsed = model(false, ...(ngDevMode ? [{ debugName: "isCollapsed" }] : /* istanbul ignore next */ []));
-        this.mainCtaClicked = output();
-        this.navigate = output();
-        this.accountMenuSelected = output();
-        this.logoClicked = output();
-        this.isExpandingOrCollapsing = signal(false, ...(ngDevMode ? [{ debugName: "isExpandingOrCollapsing" }] : /* istanbul ignore next */ []));
-        this.isMobileOrTablet = signal(false, ...(ngDevMode ? [{ debugName: "isMobileOrTablet" }] : /* istanbul ignore next */ []));
-        this.trapFocus = computed(() => this.isMobileOrTablet() && !this.isCollapsed(), ...(ngDevMode ? [{ debugName: "trapFocus" }] : /* istanbul ignore next */ []));
-        this.collapseTimer = null;
-        this.activeRoutesMap = computed(() => {
-            const currentRoute = this.activeRoute();
-            const allItems = [...this.mainNavigation(), ...(this.secondaryNavigation() ?? [])];
-            return new Map(allItems.map(route => [route.url, currentRoute?.startsWith(route.url) ?? false]));
-        }, ...(ngDevMode ? [{ debugName: "activeRoutesMap" }] : /* istanbul ignore next */ []));
-        this.overflowMenuConfig = computed(() => ({
-            ...OVERFLOW_MENU_CONFIG,
-            panelClass: this.isCollapsed() ? 'collapsed-menu' : 'expanded-menu',
-        }), ...(ngDevMode ? [{ debugName: "overflowMenuConfig" }] : /* istanbul ignore next */ []));
-        this.toggleAriaLabelOverride = computed(() => this.isCollapsed() ? this.expandToggleLabel() : this.collapseToggleLabel(), ...(ngDevMode ? [{ debugName: "toggleAriaLabelOverride" }] : /* istanbul ignore next */ []));
-        this.toggleAriaKey = computed(() => this.isCollapsed() ? TRANSLATION_KEY.EXPAND : TRANSLATION_KEY.COLLAPSE, ...(ngDevMode ? [{ debugName: "toggleAriaKey" }] : /* istanbul ignore next */ []));
-        this.mobileToggleAriaLabelOverride = computed(() => this.isCollapsed() ? this.mobileMenuLabel() : this.mobileCloseLabel(), ...(ngDevMode ? [{ debugName: "mobileToggleAriaLabelOverride" }] : /* istanbul ignore next */ []));
-        this.mobileToggleAriaKey = computed(() => this.isCollapsed() ? TRANSLATION_KEY.MOBILE_OPEN : TRANSLATION_KEY.MOBILE_CLOSE, ...(ngDevMode ? [{ debugName: "mobileToggleAriaKey" }] : /* istanbul ignore next */ []));
-    }
-    ngOnInit() {
-        this.observeViewportBreakpoint();
-    }
-    ngOnDestroy() {
-        this.clearCollapseTimer();
-    }
-    toggleCollapsed({ announce = true } = {}) {
-        this.isCollapsed.set(!this.isCollapsed());
-        if (announce) {
-            this.announceCollapseState();
-        }
-        if (this.prefersReducedMotion()) {
-            return;
-        }
-        this.isExpandingOrCollapsing.set(true);
-        this.clearCollapseTimer();
-        this.collapseTimer = setTimeout(() => {
-            this.isExpandingOrCollapsing.set(false);
-            this.collapseTimer = null;
-        }, COLLAPSE_ANIMATION_MS);
-    }
-    onNavigateClick(id) {
-        this.navigate.emit(id);
-        this.autoCloseDrawer();
-    }
-    onSelectMenuItem($event) {
-        this.accountMenuSelected.emit($event);
-        this.autoCloseDrawer();
-    }
-    onEscapeKey() {
-        this.autoCloseDrawer();
-    }
-    autoCloseDrawer() {
-        if (this.isMobileOrTablet() && !this.isCollapsed()) {
-            this.toggleCollapsed({ announce: false });
-        }
-    }
-    observeViewportBreakpoint() {
-        this.breakpointObserver
-            .observe([`(max-width: ${ScreenBreakpoints.TABLET}px)`])
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe(result => {
-            const wasMobileOrTablet = this.isMobileOrTablet();
-            this.isMobileOrTablet.set(result.matches);
-            if (result.matches && !wasMobileOrTablet) {
-                this.isCollapsed.set(true);
-            }
-        });
-    }
-    announceCollapseState() {
-        const key = this.isCollapsed() ? TRANSLATION_KEY.ANNOUNCE_COLLAPSED : TRANSLATION_KEY.ANNOUNCE_EXPANDED;
-        this.uiTranslate
-            .transform(key)
-            .pipe(take(1))
-            .subscribe(message => {
-            void this.liveAnnouncer.announce(message, 'polite');
-        });
-    }
-    clearCollapseTimer() {
-        if (this.collapseTimer !== null) {
-            clearTimeout(this.collapseTimer);
-            this.collapseTimer = null;
-        }
-    }
-    prefersReducedMotion() {
-        return typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: SideNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: SideNavigationComponent, isStandalone: true, selector: "ui-side-navigation", inputs: { activeRoute: { classPropertyName: "activeRoute", publicName: "activeRoute", isSignal: true, isRequired: false, transformFunction: null }, mainCta: { classPropertyName: "mainCta", publicName: "mainCta", isSignal: true, isRequired: false, transformFunction: null }, mainNavigation: { classPropertyName: "mainNavigation", publicName: "mainNavigation", isSignal: true, isRequired: true, transformFunction: null }, secondaryNavigation: { classPropertyName: "secondaryNavigation", publicName: "secondaryNavigation", isSignal: true, isRequired: false, transformFunction: null }, contentTemplateExtendedRef: { classPropertyName: "contentTemplateExtendedRef", publicName: "contentTemplateExtendedRef", isSignal: true, isRequired: false, transformFunction: null }, contentTemplateCollapsedRef: { classPropertyName: "contentTemplateCollapsedRef", publicName: "contentTemplateCollapsedRef", isSignal: true, isRequired: false, transformFunction: null }, account: { classPropertyName: "account", publicName: "account", isSignal: true, isRequired: false, transformFunction: null }, appContentTemplateRef: { classPropertyName: "appContentTemplateRef", publicName: "appContentTemplateRef", isSignal: true, isRequired: false, transformFunction: null }, applicationTheme: { classPropertyName: "applicationTheme", publicName: "applicationTheme", isSignal: true, isRequired: false, transformFunction: null }, collapseToggleLabel: { classPropertyName: "collapseToggleLabel", publicName: "collapseToggleLabel", isSignal: true, isRequired: false, transformFunction: null }, expandToggleLabel: { classPropertyName: "expandToggleLabel", publicName: "expandToggleLabel", isSignal: true, isRequired: false, transformFunction: null }, mobileMenuLabel: { classPropertyName: "mobileMenuLabel", publicName: "mobileMenuLabel", isSignal: true, isRequired: false, transformFunction: null }, mobileCloseLabel: { classPropertyName: "mobileCloseLabel", publicName: "mobileCloseLabel", isSignal: true, isRequired: false, transformFunction: null }, navAriaLabel: { classPropertyName: "navAriaLabel", publicName: "navAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isCollapsed: "isCollapsedChange", mainCtaClicked: "mainCtaClicked", navigate: "navigate", 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]=\"isCollapsed() && !isExpandingOrCollapsing() ? undefined : item?.badgeOptions\"\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"], dependencies: [{ kind: "component", type: LogoComponent, selector: "ui-logo", inputs: ["type", "applicationTheme", "label", "width", "allowResizing"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "trailingIconName", "trailingIconFilled", "disabled", "loading", "loadingWithLabel", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaExpanded", "ariaControls", "ariaPressed", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "hasBackground", "tooltipPosition", "role", "iconFilled", "testId"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: OverflowMenuComponentModule }, { kind: "component", type: i1.OverflowMenuComponent, selector: "ui-overflow-menu", inputs: ["buttons", "iconTrigger", "menuLabel", "applicationTheme", "ariaLabel", "testId", "ariaRequired", "describedby", "contentTemplateRef", "buttonVariant", "buttonSize", "menuConfig", "selectionMode", "menuAnchor", "shouldMatchAnchorWidth", "isDynamicMenu", "withRemovableOption"], outputs: ["selectItem", "menuOpened", "menuClosed"] }, { kind: "component", type: AvatarComponent, selector: "ui-avatar", inputs: ["size", "imageUrl", "name", "tooltipText", "allowEdit", "applicationTheme", "backgroundColor"], outputs: ["editClick"] }, { kind: "ngmodule", type: IconComponentModule }, { kind: "component", type: i2.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: SideNavigationComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ui-side-navigation', changeDetection: ChangeDetectionStrategy.OnPush, providers: [UiTranslatePipe], host: {
-                        '(keydown.escape)': 'onEscapeKey()',
-                    }, imports: [
-                        LogoComponent,
-                        ButtonComponent,
-                        CdkTrapFocus,
-                        NgTemplateOutlet,
-                        OverflowMenuComponentModule,
-                        AvatarComponent,
-                        IconComponentModule,
-                        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]=\"isCollapsed() && !isExpandingOrCollapsing() ? undefined : item?.badgeOptions\"\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"] }]
-        }], propDecorators: { activeRoute: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeRoute", required: false }] }], mainCta: [{ type: i0.Input, args: [{ isSignal: true, alias: "mainCta", required: false }] }], mainNavigation: [{ type: i0.Input, args: [{ isSignal: true, alias: "mainNavigation", required: true }] }], secondaryNavigation: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryNavigation", required: false }] }], contentTemplateExtendedRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentTemplateExtendedRef", required: false }] }], contentTemplateCollapsedRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentTemplateCollapsedRef", required: false }] }], account: [{ type: i0.Input, args: [{ isSignal: true, alias: "account", required: false }] }], appContentTemplateRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "appContentTemplateRef", required: false }] }], applicationTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "applicationTheme", required: false }] }], collapseToggleLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseToggleLabel", required: false }] }], expandToggleLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandToggleLabel", required: false }] }], mobileMenuLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileMenuLabel", required: false }] }], mobileCloseLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileCloseLabel", required: false }] }], navAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "navAriaLabel", required: false }] }], isCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCollapsed", required: false }] }, { type: i0.Output, args: ["isCollapsedChange"] }], mainCtaClicked: [{ type: i0.Output, args: ["mainCtaClicked"] }], navigate: [{ type: i0.Output, args: ["navigate"] }], accountMenuSelected: [{ type: i0.Output, args: ["accountMenuSelected"] }], logoClicked: [{ type: i0.Output, args: ["logoClicked"] }] } });
-
-class SideNavigationComponentModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: SideNavigationComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.25", ngImport: i0, type: SideNavigationComponentModule, imports: [A11yModule,
-            CommonModule,
-            UiTranslatePipe,
-            ButtonComponentModule,
-            AvatarComponentModule,
-            IconComponentModule,
-            LogoComponentModule,
-            OverflowMenuComponentModule,
-            SideNavigationComponent], exports: [SideNavigationComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: SideNavigationComponentModule, imports: [A11yModule,
-            CommonModule,
-            ButtonComponentModule,
-            AvatarComponentModule,
-            IconComponentModule,
-            LogoComponentModule,
-            OverflowMenuComponentModule,
-            SideNavigationComponent] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: SideNavigationComponentModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        A11yModule,
-                        CommonModule,
-                        UiTranslatePipe,
-                        ButtonComponentModule,
-                        AvatarComponentModule,
-                        IconComponentModule,
-                        LogoComponentModule,
-                        OverflowMenuComponentModule,
-                        SideNavigationComponent,
-                    ],
-                    exports: [SideNavigationComponent],
-                }]
-        }] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+var SideNavigationComponent = class SideNavigationComponent {
+	constructor() {
+		this.avatarSize = AvatarSize;
+		this.logoType = LogoTypeEnum;
+		this.drawerControlsId = "side-navigation-drawer";
+		this.translationKey = TRANSLATION_KEY;
+		this.breakpointObserver = inject(BreakpointObserver);
+		this.liveAnnouncer = inject(LiveAnnouncer);
+		this.destroyRef = inject(DestroyRef);
+		this.uiTranslate = inject(UiTranslatePipe);
+		this.activeRoute = input("", ...ngDevMode ? [{ debugName: "activeRoute" }] : /* istanbul ignore next */ []);
+		this.mainCta = input(...ngDevMode ? [void 0, { debugName: "mainCta" }] : /* istanbul ignore next */ []);
+		this.mainNavigation = input.required(...ngDevMode ? [{ debugName: "mainNavigation" }] : /* istanbul ignore next */ []);
+		this.secondaryNavigation = input(...ngDevMode ? [void 0, { debugName: "secondaryNavigation" }] : /* istanbul ignore next */ []);
+		this.contentTemplateExtendedRef = input(...ngDevMode ? [void 0, { debugName: "contentTemplateExtendedRef" }] : /* istanbul ignore next */ []);
+		this.contentTemplateCollapsedRef = input(...ngDevMode ? [void 0, { debugName: "contentTemplateCollapsedRef" }] : /* istanbul ignore next */ []);
+		this.account = input(...ngDevMode ? [void 0, { debugName: "account" }] : /* istanbul ignore next */ []);
+		this.appContentTemplateRef = input(...ngDevMode ? [void 0, { debugName: "appContentTemplateRef" }] : /* istanbul ignore next */ []);
+		this.applicationTheme = input("light", ...ngDevMode ? [{ debugName: "applicationTheme" }] : /* istanbul ignore next */ []);
+		this.collapseToggleLabel = input(...ngDevMode ? [void 0, { debugName: "collapseToggleLabel" }] : /* istanbul ignore next */ []);
+		this.expandToggleLabel = input(...ngDevMode ? [void 0, { debugName: "expandToggleLabel" }] : /* istanbul ignore next */ []);
+		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.isCollapsed = model(false, ...ngDevMode ? [{ debugName: "isCollapsed" }] : /* istanbul ignore next */ []);
+		this.mainCtaClicked = output();
+		this.navigate = output();
+		this.accountMenuSelected = output();
+		this.logoClicked = output();
+		this.isExpandingOrCollapsing = signal(false, ...ngDevMode ? [{ debugName: "isExpandingOrCollapsing" }] : /* istanbul ignore next */ []);
+		this.isMobileOrTablet = signal(false, ...ngDevMode ? [{ debugName: "isMobileOrTablet" }] : /* istanbul ignore next */ []);
+		this.trapFocus = computed(() => this.isMobileOrTablet() && !this.isCollapsed(), ...ngDevMode ? [{ debugName: "trapFocus" }] : /* istanbul ignore next */ []);
+		this.collapseTimer = null;
+		this.activeRoutesMap = computed(() => {
+			const currentRoute = this.activeRoute();
+			const allItems = [...this.mainNavigation(), ...this.secondaryNavigation() ?? []];
+			return new Map(allItems.map((route) => [route.url, currentRoute?.startsWith(route.url) ?? false]));
+		}, ...ngDevMode ? [{ debugName: "activeRoutesMap" }] : /* istanbul ignore next */ []);
+		this.overflowMenuConfig = computed(() => ({
+			...OVERFLOW_MENU_CONFIG,
+			panelClass: this.isCollapsed() ? "collapsed-menu" : "expanded-menu"
+		}), ...ngDevMode ? [{ debugName: "overflowMenuConfig" }] : /* istanbul ignore next */ []);
+		this.toggleAriaLabelOverride = computed(() => this.isCollapsed() ? this.expandToggleLabel() : this.collapseToggleLabel(), ...ngDevMode ? [{ debugName: "toggleAriaLabelOverride" }] : /* istanbul ignore next */ []);
+		this.toggleAriaKey = computed(() => this.isCollapsed() ? TRANSLATION_KEY.EXPAND : TRANSLATION_KEY.COLLAPSE, ...ngDevMode ? [{ debugName: "toggleAriaKey" }] : /* istanbul ignore next */ []);
+		this.mobileToggleAriaLabelOverride = computed(() => this.isCollapsed() ? this.mobileMenuLabel() : this.mobileCloseLabel(), ...ngDevMode ? [{ debugName: "mobileToggleAriaLabelOverride" }] : /* istanbul ignore next */ []);
+		this.mobileToggleAriaKey = computed(() => this.isCollapsed() ? TRANSLATION_KEY.MOBILE_OPEN : TRANSLATION_KEY.MOBILE_CLOSE, ...ngDevMode ? [{ debugName: "mobileToggleAriaKey" }] : /* istanbul ignore next */ []);
+	}
+	ngOnInit() {
+		this.observeViewportBreakpoint();
+	}
+	ngOnDestroy() {
+		this.clearCollapseTimer();
+	}
+	toggleCollapsed({ announce = true } = {}) {
+		this.isCollapsed.set(!this.isCollapsed());
+		if (announce) this.announceCollapseState();
+		if (this.prefersReducedMotion()) return;
+		this.isExpandingOrCollapsing.set(true);
+		this.clearCollapseTimer();
+		this.collapseTimer = setTimeout(() => {
+			this.isExpandingOrCollapsing.set(false);
+			this.collapseTimer = null;
+		}, 180);
+	}
+	onNavigateClick(id) {
+		this.navigate.emit(id);
+		this.autoCloseDrawer();
+	}
+	onSelectMenuItem($event) {
+		this.accountMenuSelected.emit($event);
+		this.autoCloseDrawer();
+	}
+	onEscapeKey() {
+		this.autoCloseDrawer();
+	}
+	autoCloseDrawer() {
+		if (this.isMobileOrTablet() && !this.isCollapsed()) this.toggleCollapsed({ announce: false });
+	}
+	observeViewportBreakpoint() {
+		this.breakpointObserver.observe([`(max-width: ${ScreenBreakpoints.TABLET}px)`]).pipe(takeUntilDestroyed(this.destroyRef)).subscribe((result) => {
+			const wasMobileOrTablet = this.isMobileOrTablet();
+			this.isMobileOrTablet.set(result.matches);
+			if (result.matches && !wasMobileOrTablet) this.isCollapsed.set(true);
+		});
+	}
+	announceCollapseState() {
+		const key = this.isCollapsed() ? TRANSLATION_KEY.ANNOUNCE_COLLAPSED : TRANSLATION_KEY.ANNOUNCE_EXPANDED;
+		this.uiTranslate.transform(key).pipe(take(1)).subscribe((message) => {
+			this.liveAnnouncer.announce(message, "polite");
+		});
+	}
+	clearCollapseTimer() {
+		if (this.collapseTimer !== null) {
+			clearTimeout(this.collapseTimer);
+			this.collapseTimer = null;
+		}
+	}
+	prefersReducedMotion() {
+		return typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: SideNavigationComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.4",
+			type: SideNavigationComponent,
+			isStandalone: true,
+			selector: "ui-side-navigation",
+			inputs: {
+				activeRoute: {
+					classPropertyName: "activeRoute",
+					publicName: "activeRoute",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				mainCta: {
+					classPropertyName: "mainCta",
+					publicName: "mainCta",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				mainNavigation: {
+					classPropertyName: "mainNavigation",
+					publicName: "mainNavigation",
+					isSignal: true,
+					isRequired: true,
+					transformFunction: null
+				},
+				secondaryNavigation: {
+					classPropertyName: "secondaryNavigation",
+					publicName: "secondaryNavigation",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				contentTemplateExtendedRef: {
+					classPropertyName: "contentTemplateExtendedRef",
+					publicName: "contentTemplateExtendedRef",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				contentTemplateCollapsedRef: {
+					classPropertyName: "contentTemplateCollapsedRef",
+					publicName: "contentTemplateCollapsedRef",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				account: {
+					classPropertyName: "account",
+					publicName: "account",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				appContentTemplateRef: {
+					classPropertyName: "appContentTemplateRef",
+					publicName: "appContentTemplateRef",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				applicationTheme: {
+					classPropertyName: "applicationTheme",
+					publicName: "applicationTheme",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				collapseToggleLabel: {
+					classPropertyName: "collapseToggleLabel",
+					publicName: "collapseToggleLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				expandToggleLabel: {
+					classPropertyName: "expandToggleLabel",
+					publicName: "expandToggleLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				mobileMenuLabel: {
+					classPropertyName: "mobileMenuLabel",
+					publicName: "mobileMenuLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				mobileCloseLabel: {
+					classPropertyName: "mobileCloseLabel",
+					publicName: "mobileCloseLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				navAriaLabel: {
+					classPropertyName: "navAriaLabel",
+					publicName: "navAriaLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				isCollapsed: {
+					classPropertyName: "isCollapsed",
+					publicName: "isCollapsed",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			outputs: {
+				isCollapsed: "isCollapsedChange",
+				mainCtaClicked: "mainCtaClicked",
+				navigate: "navigate",
+				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"],
+			dependencies: [
+				{
+					kind: "component",
+					type: LogoComponent,
+					selector: "ui-logo",
+					inputs: [
+						"type",
+						"applicationTheme",
+						"label",
+						"width",
+						"allowResizing"
+					]
+				},
+				{
+					kind: "component",
+					type: ButtonComponent,
+					selector: "ui-button",
+					inputs: [
+						"size",
+						"variant",
+						"label",
+						"iconPosition",
+						"justIcon",
+						"iconName",
+						"trailingIconName",
+						"trailingIconFilled",
+						"disabled",
+						"loading",
+						"loadingWithLabel",
+						"fullWidth",
+						"url",
+						"urlTarget",
+						"value",
+						"tooltip",
+						"isPremium",
+						"type",
+						"companyColor",
+						"buttonBadgeConfig",
+						"applicationTheme",
+						"disabledScaleOnClick",
+						"ariaLabel",
+						"ariaExpanded",
+						"ariaControls",
+						"ariaPressed",
+						"ariaRequired",
+						"ariaLabelledby",
+						"ariaDescribedby",
+						"preventDefault",
+						"hasBackground",
+						"tooltipPosition",
+						"role",
+						"iconFilled",
+						"testId"
+					],
+					outputs: ["buttonClickEvent", "buttonHoverEvent"]
+				},
+				{
+					kind: "directive",
+					type: CdkTrapFocus,
+					selector: "[cdkTrapFocus]",
+					inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"],
+					exportAs: ["cdkTrapFocus"]
+				},
+				{
+					kind: "directive",
+					type: NgTemplateOutlet,
+					selector: "[ngTemplateOutlet]",
+					inputs: [
+						"ngTemplateOutletContext",
+						"ngTemplateOutlet",
+						"ngTemplateOutletInjector"
+					]
+				},
+				{
+					kind: "ngmodule",
+					type: OverflowMenuComponentModule
+				},
+				{
+					kind: "component",
+					type: i1.OverflowMenuComponent,
+					selector: "ui-overflow-menu",
+					inputs: [
+						"buttons",
+						"iconTrigger",
+						"menuLabel",
+						"applicationTheme",
+						"ariaLabel",
+						"testId",
+						"ariaRequired",
+						"describedby",
+						"contentTemplateRef",
+						"buttonVariant",
+						"buttonSize",
+						"menuConfig",
+						"selectionMode",
+						"menuAnchor",
+						"shouldMatchAnchorWidth",
+						"isDynamicMenu",
+						"withRemovableOption"
+					],
+					outputs: [
+						"selectItem",
+						"menuOpened",
+						"menuClosed"
+					]
+				},
+				{
+					kind: "component",
+					type: AvatarComponent,
+					selector: "ui-avatar",
+					inputs: [
+						"size",
+						"imageUrl",
+						"name",
+						"tooltipText",
+						"allowEdit",
+						"applicationTheme",
+						"backgroundColor"
+					],
+					outputs: ["editClick"]
+				},
+				{
+					kind: "ngmodule",
+					type: IconComponentModule
+				},
+				{
+					kind: "component",
+					type: i2.IconComponent,
+					selector: "ui-icon",
+					inputs: [
+						"size",
+						"cssClass",
+						"name",
+						"color",
+						"filled",
+						"toggleIconStyle",
+						"applicationTheme",
+						"useFullIconName"
+					]
+				},
+				{
+					kind: "pipe",
+					type: AsyncPipe,
+					name: "async"
+				},
+				{
+					kind: "pipe",
+					type: UiTranslatePipe,
+					name: "uiTranslate"
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: SideNavigationComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-side-navigation",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			providers: [UiTranslatePipe],
+			host: { "(keydown.escape)": "onEscapeKey()" },
+			imports: [
+				LogoComponent,
+				ButtonComponent,
+				CdkTrapFocus,
+				NgTemplateOutlet,
+				OverflowMenuComponentModule,
+				AvatarComponent,
+				IconComponentModule,
+				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"]
+		}]
+	}],
+	propDecorators: {
+		activeRoute: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "activeRoute",
+				required: false
+			}]
+		}],
+		mainCta: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "mainCta",
+				required: false
+			}]
+		}],
+		mainNavigation: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "mainNavigation",
+				required: true
+			}]
+		}],
+		secondaryNavigation: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "secondaryNavigation",
+				required: false
+			}]
+		}],
+		contentTemplateExtendedRef: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "contentTemplateExtendedRef",
+				required: false
+			}]
+		}],
+		contentTemplateCollapsedRef: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "contentTemplateCollapsedRef",
+				required: false
+			}]
+		}],
+		account: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "account",
+				required: false
+			}]
+		}],
+		appContentTemplateRef: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "appContentTemplateRef",
+				required: false
+			}]
+		}],
+		applicationTheme: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "applicationTheme",
+				required: false
+			}]
+		}],
+		collapseToggleLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "collapseToggleLabel",
+				required: false
+			}]
+		}],
+		expandToggleLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "expandToggleLabel",
+				required: false
+			}]
+		}],
+		mobileMenuLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "mobileMenuLabel",
+				required: false
+			}]
+		}],
+		mobileCloseLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "mobileCloseLabel",
+				required: false
+			}]
+		}],
+		navAriaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "navAriaLabel",
+				required: false
+			}]
+		}],
+		isCollapsed: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "isCollapsed",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["isCollapsedChange"]
+		}],
+		mainCtaClicked: [{
+			type: i0.Output,
+			args: ["mainCtaClicked"]
+		}],
+		navigate: [{
+			type: i0.Output,
+			args: ["navigate"]
+		}],
+		accountMenuSelected: [{
+			type: i0.Output,
+			args: ["accountMenuSelected"]
+		}],
+		logoClicked: [{
+			type: i0.Output,
+			args: ["logoClicked"]
+		}]
+	}
+});
+var SideNavigationComponentModule = class SideNavigationComponentModule {
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: SideNavigationComponentModule,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.NgModule
+		});
+	}
+	static {
+		this.ɵmod = i0.ɵɵngDeclareNgModule({
+			minVersion: "14.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: SideNavigationComponentModule,
+			imports: [
+				A11yModule,
+				CommonModule,
+				UiTranslatePipe,
+				ButtonComponentModule,
+				AvatarComponentModule,
+				IconComponentModule,
+				LogoComponentModule,
+				OverflowMenuComponentModule,
+				SideNavigationComponent
+			],
+			exports: [SideNavigationComponent]
+		});
+	}
+	static {
+		this.ɵinj = i0.ɵɵngDeclareInjector({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: SideNavigationComponentModule,
+			imports: [
+				A11yModule,
+				CommonModule,
+				ButtonComponentModule,
+				AvatarComponentModule,
+				IconComponentModule,
+				LogoComponentModule,
+				OverflowMenuComponentModule,
+				SideNavigationComponent
+			]
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: SideNavigationComponentModule,
+	decorators: [{
+		type: NgModule,
+		args: [{
+			imports: [
+				A11yModule,
+				CommonModule,
+				UiTranslatePipe,
+				ButtonComponentModule,
+				AvatarComponentModule,
+				IconComponentModule,
+				LogoComponentModule,
+				OverflowMenuComponentModule,
+				SideNavigationComponent
+			],
+			exports: [SideNavigationComponent]
+		}]
+	}]
+});
 export { COLLAPSE_ANIMATION_MS, SideNavigationComponent, SideNavigationComponentModule };
-//# sourceMappingURL=testgorilla-tgo-ui-components-side-navigation.mjs.map
+
+//# sourceMappingURL=testgorilla-tgo-ui-components-side-navigation.mjs.map