@testgorilla/tgo-ui 7.13.2 → 8.0.0

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

@@ -45,47 +45,47 @@ class SideNavigationComponent {
         this.liveAnnouncer = inject(LiveAnnouncer);
         this.destroyRef = inject(DestroyRef);
         this.uiTranslate = inject(UiTranslatePipe);
-        this.activeRoute = input('');
-        this.mainCta = input();
-        this.mainNavigation = input.required();
-        this.secondaryNavigation = input();
-        this.contentTemplateExtendedRef = input();
-        this.contentTemplateCollapsedRef = input();
-        this.account = input();
-        this.appContentTemplateRef = input();
-        this.applicationTheme = input('light');
+        this.activeRoute = input('', ...(ngDevMode ? [{ debugName: "activeRoute" }] : []));
+        this.mainCta = input(...(ngDevMode ? [undefined, { debugName: "mainCta" }] : []));
+        this.mainNavigation = input.required(...(ngDevMode ? [{ debugName: "mainNavigation" }] : []));
+        this.secondaryNavigation = input(...(ngDevMode ? [undefined, { debugName: "secondaryNavigation" }] : []));
+        this.contentTemplateExtendedRef = input(...(ngDevMode ? [undefined, { debugName: "contentTemplateExtendedRef" }] : []));
+        this.contentTemplateCollapsedRef = input(...(ngDevMode ? [undefined, { debugName: "contentTemplateCollapsedRef" }] : []));
+        this.account = input(...(ngDevMode ? [undefined, { debugName: "account" }] : []));
+        this.appContentTemplateRef = input(...(ngDevMode ? [undefined, { debugName: "appContentTemplateRef" }] : []));
+        this.applicationTheme = input('light', ...(ngDevMode ? [{ debugName: "applicationTheme" }] : []));
         /** Optional override; falls back to `SIDE_NAVIGATION.COLLAPSE_LABEL` translation. */
-        this.collapseToggleLabel = input();
+        this.collapseToggleLabel = input(...(ngDevMode ? [undefined, { debugName: "collapseToggleLabel" }] : []));
         /** Optional override; falls back to `SIDE_NAVIGATION.EXPAND_LABEL` translation. */
-        this.expandToggleLabel = input();
+        this.expandToggleLabel = input(...(ngDevMode ? [undefined, { debugName: "expandToggleLabel" }] : []));
         /** Optional override; falls back to `SIDE_NAVIGATION.MOBILE_OPEN_LABEL` translation. */
-        this.mobileMenuLabel = input();
+        this.mobileMenuLabel = input(...(ngDevMode ? [undefined, { debugName: "mobileMenuLabel" }] : []));
         /** Optional override; falls back to `SIDE_NAVIGATION.MOBILE_CLOSE_LABEL` translation. */
-        this.mobileCloseLabel = input();
+        this.mobileCloseLabel = input(...(ngDevMode ? [undefined, { debugName: "mobileCloseLabel" }] : []));
         /** Optional override; falls back to `SIDE_NAVIGATION.NAV_ARIA_LABEL` translation. */
-        this.navAriaLabel = input();
-        this.isCollapsed = model(false);
+        this.navAriaLabel = input(...(ngDevMode ? [undefined, { debugName: "navAriaLabel" }] : []));
+        this.isCollapsed = model(false, ...(ngDevMode ? [{ debugName: "isCollapsed" }] : []));
         this.mainCtaClicked = output();
         this.navigate = output();
         this.accountMenuSelected = output();
         this.logoClicked = output();
-        this.isExpandingOrCollapsing = signal(false);
-        this.isMobileOrTablet = signal(false);
-        this.trapFocus = computed(() => this.isMobileOrTablet() && !this.isCollapsed());
+        this.isExpandingOrCollapsing = signal(false, ...(ngDevMode ? [{ debugName: "isExpandingOrCollapsing" }] : []));
+        this.isMobileOrTablet = signal(false, ...(ngDevMode ? [{ debugName: "isMobileOrTablet" }] : []));
+        this.trapFocus = computed(() => this.isMobileOrTablet() && !this.isCollapsed(), ...(ngDevMode ? [{ debugName: "trapFocus" }] : []));
         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" }] : []));
         this.overflowMenuConfig = computed(() => ({
             ...OVERFLOW_MENU_CONFIG,
             panelClass: this.isCollapsed() ? 'collapsed-menu' : 'expanded-menu',
-        }));
-        this.toggleAriaLabelOverride = computed(() => this.isCollapsed() ? this.expandToggleLabel() : this.collapseToggleLabel());
-        this.toggleAriaKey = computed(() => this.isCollapsed() ? TRANSLATION_KEY.EXPAND : TRANSLATION_KEY.COLLAPSE);
-        this.mobileToggleAriaLabelOverride = computed(() => this.isCollapsed() ? this.mobileMenuLabel() : this.mobileCloseLabel());
-        this.mobileToggleAriaKey = computed(() => this.isCollapsed() ? TRANSLATION_KEY.MOBILE_OPEN : TRANSLATION_KEY.MOBILE_CLOSE);
+        }), ...(ngDevMode ? [{ debugName: "overflowMenuConfig" }] : []));
+        this.toggleAriaLabelOverride = computed(() => this.isCollapsed() ? this.expandToggleLabel() : this.collapseToggleLabel(), ...(ngDevMode ? [{ debugName: "toggleAriaLabelOverride" }] : []));
+        this.toggleAriaKey = computed(() => this.isCollapsed() ? TRANSLATION_KEY.EXPAND : TRANSLATION_KEY.COLLAPSE, ...(ngDevMode ? [{ debugName: "toggleAriaKey" }] : []));
+        this.mobileToggleAriaLabelOverride = computed(() => this.isCollapsed() ? this.mobileMenuLabel() : this.mobileCloseLabel(), ...(ngDevMode ? [{ debugName: "mobileToggleAriaLabelOverride" }] : []));
+        this.mobileToggleAriaKey = computed(() => this.isCollapsed() ? TRANSLATION_KEY.MOBILE_OPEN : TRANSLATION_KEY.MOBILE_CLOSE, ...(ngDevMode ? [{ debugName: "mobileToggleAriaKey" }] : []));
     }
     ngOnInit() {
         this.observeViewportBreakpoint();
@@ -154,19 +154,19 @@ class SideNavigationComponent {
     prefersReducedMotion() {
         return typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SideNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: SideNavigationComponent, isStandalone: false, 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          [hidden]=\"!isCollapsed() && !isExpandingOrCollapsing()\"\n          [allowResizing]=\"true\"\n          [width]=\"20\"\n          [type]=\"logoType.PRIMARY_BRANDMARK_PINK\"\n          (click)=\"logoClicked.emit()\"\n        ></ui-logo>\n        <ui-logo\n          [hidden]=\"isCollapsed() || isExpandingOrCollapsing()\"\n          [allowResizing]=\"true\"\n          [width]=\"150\"\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() && !isExpandingOrCollapsing()) {\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 .1s ease-in-out,padding .1s ease-in-out}.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:80px}.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:80px}.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 .1s ease-in-out,left .1s ease-in-out}@media (prefers-reduced-motion: reduce){.side-navigation-container{transition:none}}.side-navigation-container.collapsed{width:80px}@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 24px;display:flex;align-items:center;border-bottom:1px solid #e9e9e9}.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 .navigation-collapse-button{flex:0 0 auto}.side-navigation-container .zone-logo-row .header .navigation-collapse-button ::ng-deep .mat-mdc-button-persistent-ripple{background:#fff}.side-navigation-container.collapsed .zone-logo-row{padding:16px 8px}.side-navigation-container.collapsed .zone-logo-row .header{justify-content:center}.side-navigation-container.collapsed .zone-logo-row .navigation-collapse-button{position:absolute;top:8px;right:0;transform:translate(50%);z-index:2;background:#fff;border:1px solid #e9e9e9;border-radius:50%;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-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 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-overflow-menu.collapsed{display:flex;justify-content:center}.side-navigation-container .zone-account .user-info{display:flex;align-items:center;padding:8px 0;width:100%;gap:12px}.side-navigation-container .zone-account .user-info .user-name{flex:1 1 auto;font-weight:700;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}.side-navigation-container .menu-item ::ng-deep ui-button button span.icon{margin-right:12px!important}.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;justify-content:center;padding:8px!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{display:none}.side-navigation-container.collapsed .menu-item ::ng-deep ui-button button .icon-label-wrapper{justify-content:center}::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:86px!important}::ng-deep .cdk-overlay-connected-position-bounding-box:has(.cdk-overlay-pane .expanded-menu){left:134px!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: "directive", type: i1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "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"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: i4.AvatarComponent, selector: "ui-avatar", inputs: ["size", "imageUrl", "name", "tooltipText", "allowEdit", "applicationTheme", "backgroundColor"], outputs: ["editClick"] }, { kind: "component", type: i5.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "component", type: i6.LogoComponent, selector: "ui-logo", inputs: ["type", "applicationTheme", "label", "width", "allowResizing"] }, { kind: "component", type: i7.OverflowMenuComponent, selector: "ui-overflow-menu", inputs: ["buttons", "iconTrigger", "menuLabel", "applicationTheme", "ariaLabel", "ariaRequired", "describedby", "contentTemplateRef", "buttonVariant", "buttonSize", "menuConfig", "isDynamicMenu", "withRemovableOption"], outputs: ["selectItem", "menuOpened", "menuClosed"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.UiTranslatePipe, name: "uiTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.20", ngImport: i0, type: SideNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.20", type: SideNavigationComponent, isStandalone: false, 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          [hidden]=\"!isCollapsed() && !isExpandingOrCollapsing()\"\n          [allowResizing]=\"true\"\n          [width]=\"20\"\n          [type]=\"logoType.PRIMARY_BRANDMARK_PINK\"\n          (click)=\"logoClicked.emit()\"\n        ></ui-logo>\n        <ui-logo\n          [hidden]=\"isCollapsed() || isExpandingOrCollapsing()\"\n          [allowResizing]=\"true\"\n          [width]=\"150\"\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() && !isExpandingOrCollapsing()) {\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 .1s ease-in-out,padding .1s ease-in-out}.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:80px}.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:80px}.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 .1s ease-in-out,left .1s ease-in-out}@media(prefers-reduced-motion:reduce){.side-navigation-container{transition:none}}.side-navigation-container.collapsed{width:80px}@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 24px;display:flex;align-items:center;border-bottom:1px solid #e9e9e9}.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 .navigation-collapse-button{flex:0 0 auto}.side-navigation-container .zone-logo-row .header .navigation-collapse-button ::ng-deep .mat-mdc-button-persistent-ripple{background:#fff}.side-navigation-container.collapsed .zone-logo-row{padding:16px 8px}.side-navigation-container.collapsed .zone-logo-row .header{justify-content:center}.side-navigation-container.collapsed .zone-logo-row .navigation-collapse-button{position:absolute;top:8px;right:0;transform:translate(50%);z-index:2;background:#fff;border:1px solid #e9e9e9;border-radius:50%;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-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 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-overflow-menu.collapsed{display:flex;justify-content:center}.side-navigation-container .zone-account .user-info{display:flex;align-items:center;padding:8px 0;width:100%;gap:12px}.side-navigation-container .zone-account .user-info .user-name{flex:1 1 auto;font-weight:700;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}.side-navigation-container .menu-item ::ng-deep ui-button button span.icon{margin-right:12px!important}.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;justify-content:center;padding:8px!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{display:none}.side-navigation-container.collapsed .menu-item ::ng-deep ui-button button .icon-label-wrapper{justify-content:center}::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:86px!important}::ng-deep .cdk-overlay-connected-position-bounding-box:has(.cdk-overlay-pane .expanded-menu){left:134px!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: "directive", type: i1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "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"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: i4.AvatarComponent, selector: "ui-avatar", inputs: ["size", "imageUrl", "name", "tooltipText", "allowEdit", "applicationTheme", "backgroundColor"], outputs: ["editClick"] }, { kind: "component", type: i5.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "component", type: i6.LogoComponent, selector: "ui-logo", inputs: ["type", "applicationTheme", "label", "width", "allowResizing"] }, { kind: "component", type: i7.OverflowMenuComponent, selector: "ui-overflow-menu", inputs: ["buttons", "iconTrigger", "menuLabel", "applicationTheme", "ariaLabel", "ariaRequired", "describedby", "contentTemplateRef", "buttonVariant", "buttonSize", "menuConfig", "isDynamicMenu", "withRemovableOption"], outputs: ["selectItem", "menuOpened", "menuClosed"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.UiTranslatePipe, name: "uiTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SideNavigationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.20", ngImport: i0, type: SideNavigationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ui-side-navigation', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, providers: [UiTranslatePipe], host: {
                         '(keydown.escape)': 'onEscapeKey()',
-                    }, 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          [hidden]=\"!isCollapsed() && !isExpandingOrCollapsing()\"\n          [allowResizing]=\"true\"\n          [width]=\"20\"\n          [type]=\"logoType.PRIMARY_BRANDMARK_PINK\"\n          (click)=\"logoClicked.emit()\"\n        ></ui-logo>\n        <ui-logo\n          [hidden]=\"isCollapsed() || isExpandingOrCollapsing()\"\n          [allowResizing]=\"true\"\n          [width]=\"150\"\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() && !isExpandingOrCollapsing()) {\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 .1s ease-in-out,padding .1s ease-in-out}.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:80px}.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:80px}.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 .1s ease-in-out,left .1s ease-in-out}@media (prefers-reduced-motion: reduce){.side-navigation-container{transition:none}}.side-navigation-container.collapsed{width:80px}@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 24px;display:flex;align-items:center;border-bottom:1px solid #e9e9e9}.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 .navigation-collapse-button{flex:0 0 auto}.side-navigation-container .zone-logo-row .header .navigation-collapse-button ::ng-deep .mat-mdc-button-persistent-ripple{background:#fff}.side-navigation-container.collapsed .zone-logo-row{padding:16px 8px}.side-navigation-container.collapsed .zone-logo-row .header{justify-content:center}.side-navigation-container.collapsed .zone-logo-row .navigation-collapse-button{position:absolute;top:8px;right:0;transform:translate(50%);z-index:2;background:#fff;border:1px solid #e9e9e9;border-radius:50%;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-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 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-overflow-menu.collapsed{display:flex;justify-content:center}.side-navigation-container .zone-account .user-info{display:flex;align-items:center;padding:8px 0;width:100%;gap:12px}.side-navigation-container .zone-account .user-info .user-name{flex:1 1 auto;font-weight:700;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}.side-navigation-container .menu-item ::ng-deep ui-button button span.icon{margin-right:12px!important}.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;justify-content:center;padding:8px!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{display:none}.side-navigation-container.collapsed .menu-item ::ng-deep ui-button button .icon-label-wrapper{justify-content:center}::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:86px!important}::ng-deep .cdk-overlay-connected-position-bounding-box:has(.cdk-overlay-pane .expanded-menu){left:134px!important}}@media (max-width: 599px){::ng-deep .cdk-overlay-pane .mat-mdc-menu-panel.expanded-menu,::ng-deep .cdk-overlay-pane .mat-mdc-menu-panel.collapsed-menu{max-width:calc(100vw - 32px);min-width:0}}::ng-deep .cdk-overlay-pane .mat-mdc-menu-panel.expanded-menu,::ng-deep .cdk-overlay-pane .mat-mdc-menu-panel.collapsed-menu{min-width:280px}::ng-deep .cdk-overlay-pane .mat-mdc-menu-panel.expanded-menu button.mat-mdc-menu-item.cdk-keyboard-focused,::ng-deep .cdk-overlay-pane .mat-mdc-menu-panel.collapsed-menu button.mat-mdc-menu-item.cdk-keyboard-focused{background-color:#f4f4f4}::ng-deep .cdk-overlay-pane .mat-mdc-menu-panel.expanded-menu button.mat-mdc-menu-item.cdk-keyboard-focused.is-destructive,::ng-deep .cdk-overlay-pane .mat-mdc-menu-panel.collapsed-menu button.mat-mdc-menu-item.cdk-keyboard-focused.is-destructive{background-color:#ffeae6}\n"] }]
-        }] });
+                    }, template: "<div class=\"mobile-navbar\">\n  <ui-logo [allowResizing]=\"true\" [width]=\"150\" [type]=\"logoType.DEFAULT\" (click)=\"logoClicked.emit()\"></ui-logo>\n\n  <ui-button\n    data-testid=\"navigation-collapse-mobile\"\n    data-test-role=\"navigation-collapse\"\n    [applicationTheme]=\"applicationTheme()\"\n    [variant]=\"'menuTrigger'\"\n    [iconName]=\"isCollapsed() ? 'Menu-burger' : 'Close'\"\n    [ariaLabel]=\"mobileToggleAriaLabelOverride() ?? (mobileToggleAriaKey() | uiTranslate | async) ?? ''\"\n    [ariaExpanded]=\"!isCollapsed()\"\n    [ariaControls]=\"drawerControlsId\"\n    [tooltip]=\"mobileToggleAriaLabelOverride() ?? (mobileToggleAriaKey() | uiTranslate | async) ?? ''\"\n    tooltipPosition=\"left\"\n    (buttonClickEvent)=\"toggleCollapsed()\"\n    class=\"navigation-collapse-button\"\n  ></ui-button>\n</div>\n\n<div class=\"main-container\">\n  <nav\n    [id]=\"drawerControlsId\"\n    role=\"navigation\"\n    [attr.aria-label]=\"navAriaLabel() ?? (translationKey.NAV | uiTranslate | async)\"\n    class=\"side-navigation-container\"\n    [class.collapsed]=\"isCollapsed()\"\n    [class.expanded]=\"!isCollapsed()\"\n    [cdkTrapFocus]=\"trapFocus()\"\n    [cdkTrapFocusAutoCapture]=\"trapFocus()\"\n  >\n    <div class=\"zone-logo-row\">\n      <div class=\"header\" [class.collapsed]=\"isCollapsed()\">\n        <ui-logo\n          [hidden]=\"!isCollapsed() && !isExpandingOrCollapsing()\"\n          [allowResizing]=\"true\"\n          [width]=\"20\"\n          [type]=\"logoType.PRIMARY_BRANDMARK_PINK\"\n          (click)=\"logoClicked.emit()\"\n        ></ui-logo>\n        <ui-logo\n          [hidden]=\"isCollapsed() || isExpandingOrCollapsing()\"\n          [allowResizing]=\"true\"\n          [width]=\"150\"\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() && !isExpandingOrCollapsing()) {\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 .1s ease-in-out,padding .1s ease-in-out}.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:80px}.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:80px}.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 .1s ease-in-out,left .1s ease-in-out}@media(prefers-reduced-motion:reduce){.side-navigation-container{transition:none}}.side-navigation-container.collapsed{width:80px}@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 24px;display:flex;align-items:center;border-bottom:1px solid #e9e9e9}.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 .navigation-collapse-button{flex:0 0 auto}.side-navigation-container .zone-logo-row .header .navigation-collapse-button ::ng-deep .mat-mdc-button-persistent-ripple{background:#fff}.side-navigation-container.collapsed .zone-logo-row{padding:16px 8px}.side-navigation-container.collapsed .zone-logo-row .header{justify-content:center}.side-navigation-container.collapsed .zone-logo-row .navigation-collapse-button{position:absolute;top:8px;right:0;transform:translate(50%);z-index:2;background:#fff;border:1px solid #e9e9e9;border-radius:50%;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-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 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-overflow-menu.collapsed{display:flex;justify-content:center}.side-navigation-container .zone-account .user-info{display:flex;align-items:center;padding:8px 0;width:100%;gap:12px}.side-navigation-container .zone-account .user-info .user-name{flex:1 1 auto;font-weight:700;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}.side-navigation-container .menu-item ::ng-deep ui-button button span.icon{margin-right:12px!important}.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;justify-content:center;padding:8px!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{display:none}.side-navigation-container.collapsed .menu-item ::ng-deep ui-button button .icon-label-wrapper{justify-content:center}::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:86px!important}::ng-deep .cdk-overlay-connected-position-bounding-box:has(.cdk-overlay-pane .expanded-menu){left:134px!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: "19.2.20", ngImport: i0, type: SideNavigationComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.20", ngImport: i0, type: SideNavigationComponentModule, declarations: [SideNavigationComponent], imports: [A11yModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.20", ngImport: i0, type: SideNavigationComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.20", ngImport: i0, type: SideNavigationComponentModule, declarations: [SideNavigationComponent], imports: [A11yModule,
             CommonModule,
             UiTranslatePipe,
             ButtonComponentModule,
@@ -174,7 +174,7 @@ class SideNavigationComponentModule {
             IconComponentModule,
             LogoComponentModule,
             OverflowMenuComponentModule], exports: [SideNavigationComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SideNavigationComponentModule, imports: [A11yModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.20", ngImport: i0, type: SideNavigationComponentModule, imports: [A11yModule,
             CommonModule,
             ButtonComponentModule,
             AvatarComponentModule,
@@ -182,7 +182,7 @@ class SideNavigationComponentModule {
             LogoComponentModule,
             OverflowMenuComponentModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SideNavigationComponentModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.20", ngImport: i0, type: SideNavigationComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [SideNavigationComponent],

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

@@ -1 +1 @@
-{"version":3,"file":"testgorilla-tgo-ui-components-side-navigation.mjs","sources":["../../../components/side-navigation/side-navigation.component.ts","../../../components/side-navigation/side-navigation.component.html","../../../components/side-navigation/side-navigation.component.module.ts","../../../components/side-navigation/testgorilla-tgo-ui-components-side-navigation.ts"],"sourcesContent":["import { LiveAnnouncer } from '@angular/cdk/a11y';\nimport { BreakpointObserver } from '@angular/cdk/layout';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  DestroyRef,\n  OnDestroy,\n  OnInit,\n  TemplateRef,\n  computed,\n  inject,\n  input,\n  model,\n  output,\n  signal,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { AvatarSize } from '@testgorilla/tgo-ui/components/avatar';\nimport { ApplicationTheme, ScreenBreakpoints, UiTranslatePipe } from '@testgorilla/tgo-ui/components/core';\nimport { LogoTypeEnum } from '@testgorilla/tgo-ui/components/logo';\nimport { MenuConfig } from '@testgorilla/tgo-ui/components/overflow-menu';\nimport { take } from 'rxjs';\nimport { NavigationAccount, NavigationCta, NavigationItem } from './side-navigation.model';\n\nconst OVERFLOW_MENU_CONFIG: Omit<MenuConfig, 'panelClass'> = {\n  overlapTrigger: true,\n  xPosition: 'before',\n  yPosition: 'below',\n};\n\nexport const COLLAPSE_ANIMATION_MS = 100;\n\nconst TRANSLATION_KEY = {\n  COLLAPSE: 'SIDE_NAVIGATION.COLLAPSE_LABEL',\n  EXPAND: 'SIDE_NAVIGATION.EXPAND_LABEL',\n  MOBILE_OPEN: 'SIDE_NAVIGATION.MOBILE_OPEN_LABEL',\n  MOBILE_CLOSE: 'SIDE_NAVIGATION.MOBILE_CLOSE_LABEL',\n  NAV: 'SIDE_NAVIGATION.NAV_ARIA_LABEL',\n  ANNOUNCE_COLLAPSED: 'SIDE_NAVIGATION.ANNOUNCE_COLLAPSED',\n  ANNOUNCE_EXPANDED: 'SIDE_NAVIGATION.ANNOUNCE_EXPANDED',\n} as const;\n\n@Component({\n  selector: 'ui-side-navigation',\n  templateUrl: './side-navigation.component.html',\n  styleUrls: ['./side-navigation.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  standalone: false,\n  providers: [UiTranslatePipe],\n  host: {\n    '(keydown.escape)': 'onEscapeKey()',\n  },\n})\nexport class SideNavigationComponent implements OnInit, OnDestroy {\n  protected readonly avatarSize = AvatarSize;\n  protected readonly logoType = LogoTypeEnum;\n  protected readonly drawerControlsId = 'side-navigation-drawer';\n  protected readonly translationKey = TRANSLATION_KEY;\n\n  private breakpointObserver = inject(BreakpointObserver);\n  private liveAnnouncer = inject(LiveAnnouncer);\n  private destroyRef = inject(DestroyRef);\n  private uiTranslate = inject(UiTranslatePipe);\n\n  activeRoute = input<string>('');\n  mainCta = input<NavigationCta>();\n  mainNavigation = input.required<NavigationItem[]>();\n  secondaryNavigation = input<NavigationItem[]>();\n  contentTemplateExtendedRef = input<TemplateRef<unknown>>();\n  contentTemplateCollapsedRef = input<TemplateRef<unknown>>();\n  account = input<NavigationAccount>();\n  appContentTemplateRef = input<TemplateRef<unknown>>();\n  applicationTheme = input<ApplicationTheme>('light');\n  /** Optional override; falls back to `SIDE_NAVIGATION.COLLAPSE_LABEL` translation. */\n  collapseToggleLabel = input<string>();\n  /** Optional override; falls back to `SIDE_NAVIGATION.EXPAND_LABEL` translation. */\n  expandToggleLabel = input<string>();\n  /** Optional override; falls back to `SIDE_NAVIGATION.MOBILE_OPEN_LABEL` translation. */\n  mobileMenuLabel = input<string>();\n  /** Optional override; falls back to `SIDE_NAVIGATION.MOBILE_CLOSE_LABEL` translation. */\n  mobileCloseLabel = input<string>();\n  /** Optional override; falls back to `SIDE_NAVIGATION.NAV_ARIA_LABEL` translation. */\n  navAriaLabel = input<string>();\n\n  isCollapsed = model<boolean>(false);\n\n  mainCtaClicked = output<void>();\n  navigate = output<string>();\n  accountMenuSelected = output<string>();\n  logoClicked = output<void>();\n\n  isExpandingOrCollapsing = signal(false);\n  isMobileOrTablet = signal(false);\n\n  protected readonly trapFocus = computed(() => this.isMobileOrTablet() && !this.isCollapsed());\n\n  private collapseTimer: ReturnType<typeof setTimeout> | null = null;\n\n  activeRoutesMap = computed(() => {\n    const currentRoute = this.activeRoute();\n    const allItems = [...this.mainNavigation(), ...(this.secondaryNavigation() ?? [])];\n    return new Map(allItems.map(route => [route.url, currentRoute?.startsWith(route.url) ?? false]));\n  });\n\n  overflowMenuConfig = computed<MenuConfig>(() => ({\n    ...OVERFLOW_MENU_CONFIG,\n    panelClass: this.isCollapsed() ? 'collapsed-menu' : 'expanded-menu',\n  }));\n\n  protected readonly toggleAriaLabelOverride = computed(() =>\n    this.isCollapsed() ? this.expandToggleLabel() : this.collapseToggleLabel()\n  );\n\n  protected readonly toggleAriaKey = computed(() =>\n    this.isCollapsed() ? TRANSLATION_KEY.EXPAND : TRANSLATION_KEY.COLLAPSE\n  );\n\n  protected readonly mobileToggleAriaLabelOverride = computed(() =>\n    this.isCollapsed() ? this.mobileMenuLabel() : this.mobileCloseLabel()\n  );\n\n  protected readonly mobileToggleAriaKey = computed(() =>\n    this.isCollapsed() ? TRANSLATION_KEY.MOBILE_OPEN : TRANSLATION_KEY.MOBILE_CLOSE\n  );\n\n  ngOnInit(): void {\n    this.observeViewportBreakpoint();\n  }\n\n  ngOnDestroy(): void {\n    this.clearCollapseTimer();\n  }\n\n  toggleCollapsed({ announce = true }: { announce?: boolean } = {}): void {\n    this.isCollapsed.set(!this.isCollapsed());\n\n    if (announce) {\n      this.announceCollapseState();\n    }\n\n    if (this.prefersReducedMotion()) {\n      return;\n    }\n\n    this.isExpandingOrCollapsing.set(true);\n    this.clearCollapseTimer();\n    this.collapseTimer = setTimeout(() => {\n      this.isExpandingOrCollapsing.set(false);\n      this.collapseTimer = null;\n    }, COLLAPSE_ANIMATION_MS);\n  }\n\n  onNavigateClick(id: string): void {\n    this.navigate.emit(id);\n    this.autoCloseDrawer();\n  }\n\n  onSelectMenuItem($event: string): void {\n    this.accountMenuSelected.emit($event);\n    this.autoCloseDrawer();\n  }\n\n  onEscapeKey(): void {\n    this.autoCloseDrawer();\n  }\n\n  private autoCloseDrawer(): void {\n    if (this.isMobileOrTablet() && !this.isCollapsed()) {\n      this.toggleCollapsed({ announce: false });\n    }\n  }\n\n  private observeViewportBreakpoint(): void {\n    this.breakpointObserver\n      .observe([`(max-width: ${ScreenBreakpoints.TABLET}px)`])\n      .pipe(takeUntilDestroyed(this.destroyRef))\n      .subscribe(result => {\n        const wasMobileOrTablet = this.isMobileOrTablet();\n        this.isMobileOrTablet.set(result.matches);\n        if (result.matches && !wasMobileOrTablet) {\n          this.isCollapsed.set(true);\n        }\n      });\n  }\n\n  private announceCollapseState(): void {\n    const key = this.isCollapsed() ? TRANSLATION_KEY.ANNOUNCE_COLLAPSED : TRANSLATION_KEY.ANNOUNCE_EXPANDED;\n    this.uiTranslate\n      .transform(key)\n      .pipe(take(1))\n      .subscribe(message => {\n        void this.liveAnnouncer.announce(message, 'polite');\n      });\n  }\n\n  private clearCollapseTimer(): void {\n    if (this.collapseTimer !== null) {\n      clearTimeout(this.collapseTimer);\n      this.collapseTimer = null;\n    }\n  }\n\n  private prefersReducedMotion(): boolean {\n    return typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;\n  }\n}\n","<div class=\"mobile-navbar\">\n  <ui-logo [allowResizing]=\"true\" [width]=\"150\" [type]=\"logoType.DEFAULT\" (click)=\"logoClicked.emit()\"></ui-logo>\n\n  <ui-button\n    data-testid=\"navigation-collapse-mobile\"\n    data-test-role=\"navigation-collapse\"\n    [applicationTheme]=\"applicationTheme()\"\n    [variant]=\"'menuTrigger'\"\n    [iconName]=\"isCollapsed() ? 'Menu-burger' : 'Close'\"\n    [ariaLabel]=\"mobileToggleAriaLabelOverride() ?? (mobileToggleAriaKey() | uiTranslate | async) ?? ''\"\n    [ariaExpanded]=\"!isCollapsed()\"\n    [ariaControls]=\"drawerControlsId\"\n    [tooltip]=\"mobileToggleAriaLabelOverride() ?? (mobileToggleAriaKey() | uiTranslate | async) ?? ''\"\n    tooltipPosition=\"left\"\n    (buttonClickEvent)=\"toggleCollapsed()\"\n    class=\"navigation-collapse-button\"\n  ></ui-button>\n</div>\n\n<div class=\"main-container\">\n  <nav\n    [id]=\"drawerControlsId\"\n    role=\"navigation\"\n    [attr.aria-label]=\"navAriaLabel() ?? (translationKey.NAV | uiTranslate | async)\"\n    class=\"side-navigation-container\"\n    [class.collapsed]=\"isCollapsed()\"\n    [class.expanded]=\"!isCollapsed()\"\n    [cdkTrapFocus]=\"trapFocus()\"\n    [cdkTrapFocusAutoCapture]=\"trapFocus()\"\n  >\n    <div class=\"zone-logo-row\">\n      <div class=\"header\" [class.collapsed]=\"isCollapsed()\">\n        <ui-logo\n          [hidden]=\"!isCollapsed() && !isExpandingOrCollapsing()\"\n          [allowResizing]=\"true\"\n          [width]=\"20\"\n          [type]=\"logoType.PRIMARY_BRANDMARK_PINK\"\n          (click)=\"logoClicked.emit()\"\n        ></ui-logo>\n        <ui-logo\n          [hidden]=\"isCollapsed() || isExpandingOrCollapsing()\"\n          [allowResizing]=\"true\"\n          [width]=\"150\"\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() && !isExpandingOrCollapsing()) {\n        <span class=\"user-name\">{{ accountValue.name }}</span>\n        <ui-icon class=\"user-chevron\" name=\"Arrow-chevron-right-in-line\" size=\"24\" aria-hidden=\"true\"></ui-icon>\n      }\n    </div>\n  }\n</ng-template>\n","import { A11yModule } from '@angular/cdk/a11y';\nimport { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { AvatarComponentModule } from '@testgorilla/tgo-ui/components/avatar';\nimport { ButtonComponentModule } from '@testgorilla/tgo-ui/components/button';\nimport { UiTranslatePipe } from '@testgorilla/tgo-ui/components/core';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { LogoComponentModule } from '@testgorilla/tgo-ui/components/logo';\nimport { OverflowMenuComponentModule } from '@testgorilla/tgo-ui/components/overflow-menu';\nimport { SideNavigationComponent } from './side-navigation.component';\n\n@NgModule({\n  declarations: [SideNavigationComponent],\n  imports: [\n    A11yModule,\n    CommonModule,\n    UiTranslatePipe,\n    ButtonComponentModule,\n    AvatarComponentModule,\n    IconComponentModule,\n    LogoComponentModule,\n    OverflowMenuComponentModule,\n  ],\n  exports: [SideNavigationComponent],\n})\nexport class SideNavigationComponentModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"testgorilla-tgo-ui-components-side-navigation.mjs","sources":["../../../components/side-navigation/side-navigation.component.ts","../../../components/side-navigation/side-navigation.component.html","../../../components/side-navigation/side-navigation.component.module.ts","../../../components/side-navigation/testgorilla-tgo-ui-components-side-navigation.ts"],"sourcesContent":["import { LiveAnnouncer } from '@angular/cdk/a11y';\nimport { BreakpointObserver } from '@angular/cdk/layout';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  DestroyRef,\n  OnDestroy,\n  OnInit,\n  TemplateRef,\n  computed,\n  inject,\n  input,\n  model,\n  output,\n  signal,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { AvatarSize } from '@testgorilla/tgo-ui/components/avatar';\nimport { ApplicationTheme, ScreenBreakpoints, UiTranslatePipe } from '@testgorilla/tgo-ui/components/core';\nimport { LogoTypeEnum } from '@testgorilla/tgo-ui/components/logo';\nimport { MenuConfig } from '@testgorilla/tgo-ui/components/overflow-menu';\nimport { take } from 'rxjs';\nimport { NavigationAccount, NavigationCta, NavigationItem } from './side-navigation.model';\n\nconst OVERFLOW_MENU_CONFIG: Omit<MenuConfig, 'panelClass'> = {\n  overlapTrigger: true,\n  xPosition: 'before',\n  yPosition: 'below',\n};\n\nexport const COLLAPSE_ANIMATION_MS = 100;\n\nconst TRANSLATION_KEY = {\n  COLLAPSE: 'SIDE_NAVIGATION.COLLAPSE_LABEL',\n  EXPAND: 'SIDE_NAVIGATION.EXPAND_LABEL',\n  MOBILE_OPEN: 'SIDE_NAVIGATION.MOBILE_OPEN_LABEL',\n  MOBILE_CLOSE: 'SIDE_NAVIGATION.MOBILE_CLOSE_LABEL',\n  NAV: 'SIDE_NAVIGATION.NAV_ARIA_LABEL',\n  ANNOUNCE_COLLAPSED: 'SIDE_NAVIGATION.ANNOUNCE_COLLAPSED',\n  ANNOUNCE_EXPANDED: 'SIDE_NAVIGATION.ANNOUNCE_EXPANDED',\n} as const;\n\n@Component({\n  selector: 'ui-side-navigation',\n  templateUrl: './side-navigation.component.html',\n  styleUrls: ['./side-navigation.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  standalone: false,\n  providers: [UiTranslatePipe],\n  host: {\n    '(keydown.escape)': 'onEscapeKey()',\n  },\n})\nexport class SideNavigationComponent implements OnInit, OnDestroy {\n  protected readonly avatarSize = AvatarSize;\n  protected readonly logoType = LogoTypeEnum;\n  protected readonly drawerControlsId = 'side-navigation-drawer';\n  protected readonly translationKey = TRANSLATION_KEY;\n\n  private breakpointObserver = inject(BreakpointObserver);\n  private liveAnnouncer = inject(LiveAnnouncer);\n  private destroyRef = inject(DestroyRef);\n  private uiTranslate = inject(UiTranslatePipe);\n\n  activeRoute = input<string>('');\n  mainCta = input<NavigationCta>();\n  mainNavigation = input.required<NavigationItem[]>();\n  secondaryNavigation = input<NavigationItem[]>();\n  contentTemplateExtendedRef = input<TemplateRef<unknown>>();\n  contentTemplateCollapsedRef = input<TemplateRef<unknown>>();\n  account = input<NavigationAccount>();\n  appContentTemplateRef = input<TemplateRef<unknown>>();\n  applicationTheme = input<ApplicationTheme>('light');\n  /** Optional override; falls back to `SIDE_NAVIGATION.COLLAPSE_LABEL` translation. */\n  collapseToggleLabel = input<string>();\n  /** Optional override; falls back to `SIDE_NAVIGATION.EXPAND_LABEL` translation. */\n  expandToggleLabel = input<string>();\n  /** Optional override; falls back to `SIDE_NAVIGATION.MOBILE_OPEN_LABEL` translation. */\n  mobileMenuLabel = input<string>();\n  /** Optional override; falls back to `SIDE_NAVIGATION.MOBILE_CLOSE_LABEL` translation. */\n  mobileCloseLabel = input<string>();\n  /** Optional override; falls back to `SIDE_NAVIGATION.NAV_ARIA_LABEL` translation. */\n  navAriaLabel = input<string>();\n\n  isCollapsed = model<boolean>(false);\n\n  mainCtaClicked = output<void>();\n  navigate = output<string>();\n  accountMenuSelected = output<string>();\n  logoClicked = output<void>();\n\n  isExpandingOrCollapsing = signal(false);\n  isMobileOrTablet = signal(false);\n\n  protected readonly trapFocus = computed(() => this.isMobileOrTablet() && !this.isCollapsed());\n\n  private collapseTimer: ReturnType<typeof setTimeout> | null = null;\n\n  activeRoutesMap = computed(() => {\n    const currentRoute = this.activeRoute();\n    const allItems = [...this.mainNavigation(), ...(this.secondaryNavigation() ?? [])];\n    return new Map(allItems.map(route => [route.url, currentRoute?.startsWith(route.url) ?? false]));\n  });\n\n  overflowMenuConfig = computed<MenuConfig>(() => ({\n    ...OVERFLOW_MENU_CONFIG,\n    panelClass: this.isCollapsed() ? 'collapsed-menu' : 'expanded-menu',\n  }));\n\n  protected readonly toggleAriaLabelOverride = computed(() =>\n    this.isCollapsed() ? this.expandToggleLabel() : this.collapseToggleLabel()\n  );\n\n  protected readonly toggleAriaKey = computed(() =>\n    this.isCollapsed() ? TRANSLATION_KEY.EXPAND : TRANSLATION_KEY.COLLAPSE\n  );\n\n  protected readonly mobileToggleAriaLabelOverride = computed(() =>\n    this.isCollapsed() ? this.mobileMenuLabel() : this.mobileCloseLabel()\n  );\n\n  protected readonly mobileToggleAriaKey = computed(() =>\n    this.isCollapsed() ? TRANSLATION_KEY.MOBILE_OPEN : TRANSLATION_KEY.MOBILE_CLOSE\n  );\n\n  ngOnInit(): void {\n    this.observeViewportBreakpoint();\n  }\n\n  ngOnDestroy(): void {\n    this.clearCollapseTimer();\n  }\n\n  toggleCollapsed({ announce = true }: { announce?: boolean } = {}): void {\n    this.isCollapsed.set(!this.isCollapsed());\n\n    if (announce) {\n      this.announceCollapseState();\n    }\n\n    if (this.prefersReducedMotion()) {\n      return;\n    }\n\n    this.isExpandingOrCollapsing.set(true);\n    this.clearCollapseTimer();\n    this.collapseTimer = setTimeout(() => {\n      this.isExpandingOrCollapsing.set(false);\n      this.collapseTimer = null;\n    }, COLLAPSE_ANIMATION_MS);\n  }\n\n  onNavigateClick(id: string): void {\n    this.navigate.emit(id);\n    this.autoCloseDrawer();\n  }\n\n  onSelectMenuItem($event: string): void {\n    this.accountMenuSelected.emit($event);\n    this.autoCloseDrawer();\n  }\n\n  onEscapeKey(): void {\n    this.autoCloseDrawer();\n  }\n\n  private autoCloseDrawer(): void {\n    if (this.isMobileOrTablet() && !this.isCollapsed()) {\n      this.toggleCollapsed({ announce: false });\n    }\n  }\n\n  private observeViewportBreakpoint(): void {\n    this.breakpointObserver\n      .observe([`(max-width: ${ScreenBreakpoints.TABLET}px)`])\n      .pipe(takeUntilDestroyed(this.destroyRef))\n      .subscribe(result => {\n        const wasMobileOrTablet = this.isMobileOrTablet();\n        this.isMobileOrTablet.set(result.matches);\n        if (result.matches && !wasMobileOrTablet) {\n          this.isCollapsed.set(true);\n        }\n      });\n  }\n\n  private announceCollapseState(): void {\n    const key = this.isCollapsed() ? TRANSLATION_KEY.ANNOUNCE_COLLAPSED : TRANSLATION_KEY.ANNOUNCE_EXPANDED;\n    this.uiTranslate\n      .transform(key)\n      .pipe(take(1))\n      .subscribe(message => {\n        void this.liveAnnouncer.announce(message, 'polite');\n      });\n  }\n\n  private clearCollapseTimer(): void {\n    if (this.collapseTimer !== null) {\n      clearTimeout(this.collapseTimer);\n      this.collapseTimer = null;\n    }\n  }\n\n  private prefersReducedMotion(): boolean {\n    return typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;\n  }\n}\n","<div class=\"mobile-navbar\">\n  <ui-logo [allowResizing]=\"true\" [width]=\"150\" [type]=\"logoType.DEFAULT\" (click)=\"logoClicked.emit()\"></ui-logo>\n\n  <ui-button\n    data-testid=\"navigation-collapse-mobile\"\n    data-test-role=\"navigation-collapse\"\n    [applicationTheme]=\"applicationTheme()\"\n    [variant]=\"'menuTrigger'\"\n    [iconName]=\"isCollapsed() ? 'Menu-burger' : 'Close'\"\n    [ariaLabel]=\"mobileToggleAriaLabelOverride() ?? (mobileToggleAriaKey() | uiTranslate | async) ?? ''\"\n    [ariaExpanded]=\"!isCollapsed()\"\n    [ariaControls]=\"drawerControlsId\"\n    [tooltip]=\"mobileToggleAriaLabelOverride() ?? (mobileToggleAriaKey() | uiTranslate | async) ?? ''\"\n    tooltipPosition=\"left\"\n    (buttonClickEvent)=\"toggleCollapsed()\"\n    class=\"navigation-collapse-button\"\n  ></ui-button>\n</div>\n\n<div class=\"main-container\">\n  <nav\n    [id]=\"drawerControlsId\"\n    role=\"navigation\"\n    [attr.aria-label]=\"navAriaLabel() ?? (translationKey.NAV | uiTranslate | async)\"\n    class=\"side-navigation-container\"\n    [class.collapsed]=\"isCollapsed()\"\n    [class.expanded]=\"!isCollapsed()\"\n    [cdkTrapFocus]=\"trapFocus()\"\n    [cdkTrapFocusAutoCapture]=\"trapFocus()\"\n  >\n    <div class=\"zone-logo-row\">\n      <div class=\"header\" [class.collapsed]=\"isCollapsed()\">\n        <ui-logo\n          [hidden]=\"!isCollapsed() && !isExpandingOrCollapsing()\"\n          [allowResizing]=\"true\"\n          [width]=\"20\"\n          [type]=\"logoType.PRIMARY_BRANDMARK_PINK\"\n          (click)=\"logoClicked.emit()\"\n        ></ui-logo>\n        <ui-logo\n          [hidden]=\"isCollapsed() || isExpandingOrCollapsing()\"\n          [allowResizing]=\"true\"\n          [width]=\"150\"\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() && !isExpandingOrCollapsing()) {\n        <span class=\"user-name\">{{ accountValue.name }}</span>\n        <ui-icon class=\"user-chevron\" name=\"Arrow-chevron-right-in-line\" size=\"24\" aria-hidden=\"true\"></ui-icon>\n      }\n    </div>\n  }\n</ng-template>\n","import { A11yModule } from '@angular/cdk/a11y';\nimport { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { AvatarComponentModule } from '@testgorilla/tgo-ui/components/avatar';\nimport { ButtonComponentModule } from '@testgorilla/tgo-ui/components/button';\nimport { UiTranslatePipe } from '@testgorilla/tgo-ui/components/core';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { LogoComponentModule } from '@testgorilla/tgo-ui/components/logo';\nimport { OverflowMenuComponentModule } from '@testgorilla/tgo-ui/components/overflow-menu';\nimport { SideNavigationComponent } from './side-navigation.component';\n\n@NgModule({\n  declarations: [SideNavigationComponent],\n  imports: [\n    A11yModule,\n    CommonModule,\n    UiTranslatePipe,\n    ButtonComponentModule,\n    AvatarComponentModule,\n    IconComponentModule,\n    LogoComponentModule,\n    OverflowMenuComponentModule,\n  ],\n  exports: [SideNavigationComponent],\n})\nexport class SideNavigationComponentModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

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

@@ -169,10 +169,10 @@ class SidePanelService {
             this.embeddedViewRef = viewContainerRef().createEmbeddedView(template);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SidePanelService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SidePanelService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.20", ngImport: i0, type: SidePanelService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.20", ngImport: i0, type: SidePanelService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SidePanelService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.20", ngImport: i0, type: SidePanelService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -181,15 +181,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
 
 class SidePanelComponent {
     constructor() {
-        this.sidePanelPosition = signal('right');
+        this.sidePanelPosition = signal('right', ...(ngDevMode ? [{ debugName: "sidePanelPosition" }] : []));
         this.sidePanelContainer = viewChild.required('sidePanelContainer', { read: ViewContainerRef });
         this.sidePanel = viewChild.required('sidePanel');
         this.backdrop = viewChild.required('sidePanelBackdrop');
         this.language = LanguageService.defaultLanguage;
-        this.isOpen = signal(false);
-        this.size = signal(undefined);
-        this.isSmall = computed(() => this.size() === 'small');
-        this.isLarge = computed(() => this.size() === 'large');
+        this.isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+        this.size = signal(undefined, ...(ngDevMode ? [{ debugName: "size" }] : []));
+        this.isSmall = computed(() => this.size() === 'small', ...(ngDevMode ? [{ debugName: "isSmall" }] : []));
+        this.isLarge = computed(() => this.size() === 'large', ...(ngDevMode ? [{ debugName: "isLarge" }] : []));
         this.animation = computed(() => {
             if (this.isOpen()) {
                 return SidePanelAnimationState.Open;
@@ -197,7 +197,7 @@ class SidePanelComponent {
             return this.sidePanelPosition() === 'left'
                 ? SidePanelAnimationState.ClosedLeft
                 : SidePanelAnimationState.ClosedRight;
-        });
+        }, ...(ngDevMode ? [{ debugName: "animation" }] : []));
         this.sidePanelService = inject(SidePanelService);
         this.sidePanelConfig = inject(SidePanelConfig);
         const { position, size } = this.sidePanelConfig;
@@ -215,13 +215,13 @@ class SidePanelComponent {
             this.sidePanelService.destroyComponent(result);
         }, sidePanelAnimationDuration);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SidePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: SidePanelComponent, isStandalone: true, selector: "ui-side-panel", viewQueries: [{ propertyName: "sidePanelContainer", first: true, predicate: ["sidePanelContainer"], descendants: true, read: ViewContainerRef, isSignal: true }, { propertyName: "sidePanel", first: true, predicate: ["sidePanel"], descendants: true, isSignal: true }, { propertyName: "backdrop", first: true, predicate: ["sidePanelBackdrop"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"side-panel-backdrop\"\n  #sidePanelBackdrop\n  tabindex=\"0\"\n  (click)=\"close()\"\n  (keydown.enter)=\"close()\"\n  [@fadeInOut]=\"isOpen() ? 'open' : 'closed'\"\n></div>\n<div\n  class=\"side-panel\"\n  [class]=\"sidePanelConfig.panelClass\"\n  [class.side-panel-small]=\"isSmall()\"\n  [class.side-panel-large]=\"isLarge()\"\n  #sidePanel\n  [@slideInOut]=\"animation()\"\n>\n  @if (sidePanelConfig.showHeader) {\n    <div class=\"side-panel-header\">\n      <div class=\"side-panel-title-container\">\n        @if (sidePanelConfig.showBackButton) {\n          <ui-button\n            class=\"side-panel-action\"\n            [variant]=\"'icon-button'\"\n            [iconName]=\"'Arrow-chevron-left-filled'\"\n            (click)=\"close()\"\n            [tooltip]=\"('COMMON.BACK' | uiTranslate | async)!\"\n            size=\"medium\"\n          ></ui-button>\n        }\n        <span class=\"side-panel-title h3 bold\">{{ sidePanelConfig.title }}</span>\n      </div>\n      @if (sidePanelConfig.showCloseButton) {\n        <ui-button\n          class=\"side-panel-action side-panel-action-close\"\n          [variant]=\"'icon-button'\"\n          [iconName]=\"'Close'\"\n          [tooltip]=\"('COMMON.CLOSE' | uiTranslate | async)!\"\n          (click)=\"close()\"\n          size=\"medium\"\n        ></ui-button>\n      }\n    </div>\n  }\n\n  <div class=\"side-panel-content\">\n    <ng-container #sidePanelContainer></ng-container>\n  </div>\n</div>\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}.side-panel{position:fixed;top:0;bottom:0;background-color:#fff;padding:32px;box-shadow:2px 24px 48px 8px #00000014;z-index:999999;display:flex;flex-direction:column;will-change:transform;transform:translate(100%)}.side-panel.side-panel-small{width:600px}@media (max-width: 600px){.side-panel.side-panel-small{width:100%}}.side-panel.side-panel-large{width:956px}@media (max-width: 600px){.side-panel.side-panel-large{width:100%}}@media (max-width: 960px){.side-panel.side-panel-large{width:100%}}.side-panel-action-close{margin-left:8px}.side-panel-title-container{display:flex;gap:8px}.side-panel.left{left:0}.side-panel.right{right:0}.side-panel-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:#000;z-index:899;opacity:0}.side-panel-title{display:block;display:-webkit-box;max-height:3em;line-height:1.6em;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal}.side-panel-content{overflow:auto;flex:1}.side-panel-header{position:sticky;min-height:30px;display:flex;justify-content:space-between;margin-bottom:32px}\n"], dependencies: [{ kind: "ngmodule", type: TooltipComponentModule }, { kind: "ngmodule", type: ButtonComponentModule }, { kind: "component", type: i1.ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "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"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], animations: [sidePanelAnimation, backdropAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.20", ngImport: i0, type: SidePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.20", type: SidePanelComponent, isStandalone: true, selector: "ui-side-panel", viewQueries: [{ propertyName: "sidePanelContainer", first: true, predicate: ["sidePanelContainer"], descendants: true, read: ViewContainerRef, isSignal: true }, { propertyName: "sidePanel", first: true, predicate: ["sidePanel"], descendants: true, isSignal: true }, { propertyName: "backdrop", first: true, predicate: ["sidePanelBackdrop"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"side-panel-backdrop\"\n  #sidePanelBackdrop\n  tabindex=\"0\"\n  (click)=\"close()\"\n  (keydown.enter)=\"close()\"\n  [@fadeInOut]=\"isOpen() ? 'open' : 'closed'\"\n></div>\n<div\n  class=\"side-panel\"\n  [class]=\"sidePanelConfig.panelClass\"\n  [class.side-panel-small]=\"isSmall()\"\n  [class.side-panel-large]=\"isLarge()\"\n  #sidePanel\n  [@slideInOut]=\"animation()\"\n>\n  @if (sidePanelConfig.showHeader) {\n    <div class=\"side-panel-header\">\n      <div class=\"side-panel-title-container\">\n        @if (sidePanelConfig.showBackButton) {\n          <ui-button\n            class=\"side-panel-action\"\n            [variant]=\"'icon-button'\"\n            [iconName]=\"'Arrow-chevron-left-filled'\"\n            (click)=\"close()\"\n            [tooltip]=\"('COMMON.BACK' | uiTranslate | async)!\"\n            size=\"medium\"\n          ></ui-button>\n        }\n        <span class=\"side-panel-title h3 bold\">{{ sidePanelConfig.title }}</span>\n      </div>\n      @if (sidePanelConfig.showCloseButton) {\n        <ui-button\n          class=\"side-panel-action side-panel-action-close\"\n          [variant]=\"'icon-button'\"\n          [iconName]=\"'Close'\"\n          [tooltip]=\"('COMMON.CLOSE' | uiTranslate | async)!\"\n          (click)=\"close()\"\n          size=\"medium\"\n        ></ui-button>\n      }\n    </div>\n  }\n\n  <div class=\"side-panel-content\">\n    <ng-container #sidePanelContainer></ng-container>\n  </div>\n</div>\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}.side-panel{position:fixed;top:0;bottom:0;background-color:#fff;padding:32px;box-shadow:2px 24px 48px 8px #00000014;z-index:999999;display:flex;flex-direction:column;will-change:transform;transform:translate(100%)}.side-panel.side-panel-small{width:600px}@media(max-width:600px){.side-panel.side-panel-small{width:100%}}.side-panel.side-panel-large{width:956px}@media(max-width:600px){.side-panel.side-panel-large{width:100%}}@media(max-width:960px){.side-panel.side-panel-large{width:100%}}.side-panel-action-close{margin-left:8px}.side-panel-title-container{display:flex;gap:8px}.side-panel.left{left:0}.side-panel.right{right:0}.side-panel-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:#000;z-index:899;opacity:0}.side-panel-title{display:block;display:-webkit-box;max-height:3em;line-height:1.6em;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal}.side-panel-content{overflow:auto;flex:1}.side-panel-header{position:sticky;min-height:30px;display:flex;justify-content:space-between;margin-bottom:32px}\n"], dependencies: [{ kind: "ngmodule", type: TooltipComponentModule }, { kind: "ngmodule", type: ButtonComponentModule }, { kind: "component", type: i1.ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "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"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], animations: [sidePanelAnimation, backdropAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SidePanelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.20", ngImport: i0, type: SidePanelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-side-panel', animations: [sidePanelAnimation, backdropAnimation], changeDetection: ChangeDetectionStrategy.OnPush, imports: [TooltipComponentModule, ButtonComponentModule, UiTranslatePipe, AsyncPipe, NgClass], template: "<div\n  class=\"side-panel-backdrop\"\n  #sidePanelBackdrop\n  tabindex=\"0\"\n  (click)=\"close()\"\n  (keydown.enter)=\"close()\"\n  [@fadeInOut]=\"isOpen() ? 'open' : 'closed'\"\n></div>\n<div\n  class=\"side-panel\"\n  [class]=\"sidePanelConfig.panelClass\"\n  [class.side-panel-small]=\"isSmall()\"\n  [class.side-panel-large]=\"isLarge()\"\n  #sidePanel\n  [@slideInOut]=\"animation()\"\n>\n  @if (sidePanelConfig.showHeader) {\n    <div class=\"side-panel-header\">\n      <div class=\"side-panel-title-container\">\n        @if (sidePanelConfig.showBackButton) {\n          <ui-button\n            class=\"side-panel-action\"\n            [variant]=\"'icon-button'\"\n            [iconName]=\"'Arrow-chevron-left-filled'\"\n            (click)=\"close()\"\n            [tooltip]=\"('COMMON.BACK' | uiTranslate | async)!\"\n            size=\"medium\"\n          ></ui-button>\n        }\n        <span class=\"side-panel-title h3 bold\">{{ sidePanelConfig.title }}</span>\n      </div>\n      @if (sidePanelConfig.showCloseButton) {\n        <ui-button\n          class=\"side-panel-action side-panel-action-close\"\n          [variant]=\"'icon-button'\"\n          [iconName]=\"'Close'\"\n          [tooltip]=\"('COMMON.CLOSE' | uiTranslate | async)!\"\n          (click)=\"close()\"\n          size=\"medium\"\n        ></ui-button>\n      }\n    </div>\n  }\n\n  <div class=\"side-panel-content\">\n    <ng-container #sidePanelContainer></ng-container>\n  </div>\n</div>\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}.side-panel{position:fixed;top:0;bottom:0;background-color:#fff;padding:32px;box-shadow:2px 24px 48px 8px #00000014;z-index:999999;display:flex;flex-direction:column;will-change:transform;transform:translate(100%)}.side-panel.side-panel-small{width:600px}@media (max-width: 600px){.side-panel.side-panel-small{width:100%}}.side-panel.side-panel-large{width:956px}@media (max-width: 600px){.side-panel.side-panel-large{width:100%}}@media (max-width: 960px){.side-panel.side-panel-large{width:100%}}.side-panel-action-close{margin-left:8px}.side-panel-title-container{display:flex;gap:8px}.side-panel.left{left:0}.side-panel.right{right:0}.side-panel-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:#000;z-index:899;opacity:0}.side-panel-title{display:block;display:-webkit-box;max-height:3em;line-height:1.6em;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal}.side-panel-content{overflow:auto;flex:1}.side-panel-header{position:sticky;min-height:30px;display:flex;justify-content:space-between;margin-bottom:32px}\n"] }]
-        }], ctorParameters: () => [] });
+            args: [{ selector: 'ui-side-panel', animations: [sidePanelAnimation, backdropAnimation], changeDetection: ChangeDetectionStrategy.OnPush, imports: [TooltipComponentModule, ButtonComponentModule, UiTranslatePipe, AsyncPipe, NgClass], template: "<div\n  class=\"side-panel-backdrop\"\n  #sidePanelBackdrop\n  tabindex=\"0\"\n  (click)=\"close()\"\n  (keydown.enter)=\"close()\"\n  [@fadeInOut]=\"isOpen() ? 'open' : 'closed'\"\n></div>\n<div\n  class=\"side-panel\"\n  [class]=\"sidePanelConfig.panelClass\"\n  [class.side-panel-small]=\"isSmall()\"\n  [class.side-panel-large]=\"isLarge()\"\n  #sidePanel\n  [@slideInOut]=\"animation()\"\n>\n  @if (sidePanelConfig.showHeader) {\n    <div class=\"side-panel-header\">\n      <div class=\"side-panel-title-container\">\n        @if (sidePanelConfig.showBackButton) {\n          <ui-button\n            class=\"side-panel-action\"\n            [variant]=\"'icon-button'\"\n            [iconName]=\"'Arrow-chevron-left-filled'\"\n            (click)=\"close()\"\n            [tooltip]=\"('COMMON.BACK' | uiTranslate | async)!\"\n            size=\"medium\"\n          ></ui-button>\n        }\n        <span class=\"side-panel-title h3 bold\">{{ sidePanelConfig.title }}</span>\n      </div>\n      @if (sidePanelConfig.showCloseButton) {\n        <ui-button\n          class=\"side-panel-action side-panel-action-close\"\n          [variant]=\"'icon-button'\"\n          [iconName]=\"'Close'\"\n          [tooltip]=\"('COMMON.CLOSE' | uiTranslate | async)!\"\n          (click)=\"close()\"\n          size=\"medium\"\n        ></ui-button>\n      }\n    </div>\n  }\n\n  <div class=\"side-panel-content\">\n    <ng-container #sidePanelContainer></ng-container>\n  </div>\n</div>\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}.side-panel{position:fixed;top:0;bottom:0;background-color:#fff;padding:32px;box-shadow:2px 24px 48px 8px #00000014;z-index:999999;display:flex;flex-direction:column;will-change:transform;transform:translate(100%)}.side-panel.side-panel-small{width:600px}@media(max-width:600px){.side-panel.side-panel-small{width:100%}}.side-panel.side-panel-large{width:956px}@media(max-width:600px){.side-panel.side-panel-large{width:100%}}@media(max-width:960px){.side-panel.side-panel-large{width:100%}}.side-panel-action-close{margin-left:8px}.side-panel-title-container{display:flex;gap:8px}.side-panel.left{left:0}.side-panel.right{right:0}.side-panel-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:#000;z-index:899;opacity:0}.side-panel-title{display:block;display:-webkit-box;max-height:3em;line-height:1.6em;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal}.side-panel-content{overflow:auto;flex:1}.side-panel-header{position:sticky;min-height:30px;display:flex;justify-content:space-between;margin-bottom:32px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { sidePanelContainer: [{ type: i0.ViewChild, args: ['sidePanelContainer', { ...{ read: ViewContainerRef }, isSignal: true }] }], sidePanel: [{ type: i0.ViewChild, args: ['sidePanel', { isSignal: true }] }], backdrop: [{ type: i0.ViewChild, args: ['sidePanelBackdrop', { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.