@testgorilla/tgo-ui 11.22.3 → 12.0.0

package/fesm2022/testgorilla-tgo-ui-components-navbar.mjs

@@ -1,386 +1,1123 @@
-import { BreakpointObserver } from '@angular/cdk/layout';
-import { NgClass, NgTemplateOutlet, AsyncPipe, CommonModule } from '@angular/common';
-import * as i0 from '@angular/core';
-import { input, output, computed, ChangeDetectionStrategy, Component, inject, signal, effect, NgModule } from '@angular/core';
-import { toObservable, toSignal } from '@angular/core/rxjs-interop';
-import { MatButtonModule, MatButton } from '@angular/material/button';
-import { MatIconModule, MatIcon } from '@angular/material/icon';
-import { MatMenuModule, MatMenuTrigger, MatMenu, MatMenuItem } from '@angular/material/menu';
-import { MatToolbar, MatToolbarModule } from '@angular/material/toolbar';
-import { Subject, take, switchMap, map } from 'rxjs';
-import * as i1 from '@testgorilla/tgo-ui/components/avatar';
-import { AvatarSize, AvatarComponentModule, AvatarComponent } from '@testgorilla/tgo-ui/components/avatar';
-import { BadgeComponent, BadgeComponentModule } from '@testgorilla/tgo-ui/components/badge';
-import * as i2 from '@testgorilla/tgo-ui/components/button';
-import { ButtonComponentModule, ButtonComponent } from '@testgorilla/tgo-ui/components/button';
-import { UiTranslatePipe, ScreenBreakpoints } from '@testgorilla/tgo-ui/components/core';
-import * as i2$1 from '@testgorilla/tgo-ui/components/icon';
-import { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';
-import { LogoTypeEnum, LogoComponent, LogoComponentModule } from '@testgorilla/tgo-ui/components/logo';
-import * as i1$1 from '@testgorilla/tgo-ui/components/side-sheet';
-import { SideSheetService, SideSheetComponentModule } from '@testgorilla/tgo-ui/components/side-sheet';
-import { AccordionComponentModule } from '@testgorilla/tgo-ui/components/accordion';
-import { MatRippleModule } from '@angular/material/core';
-
-class MobileNavbarSideSheetComponent {
-    constructor() {
-        this.routes = input([], ...(ngDevMode ? [{ debugName: "routes" }] : /* istanbul ignore next */ []));
-        this.activedRoute = input('', ...(ngDevMode ? [{ debugName: "activedRoute" }] : /* istanbul ignore next */ []));
-        this.email = input('', ...(ngDevMode ? [{ debugName: "email" }] : /* istanbul ignore next */ []));
-        this.userName = input('', ...(ngDevMode ? [{ debugName: "userName" }] : /* istanbul ignore next */ []));
-        this.menuItems = input([], ...(ngDevMode ? [{ debugName: "menuItems" }] : /* istanbul ignore next */ []));
-        this.contentTemplateRef = input(...(ngDevMode ? [undefined, { debugName: "contentTemplateRef" }] : /* istanbul ignore next */ []));
-        this.userInfoExtraTemplateRef = input(...(ngDevMode ? [undefined, { debugName: "userInfoExtraTemplateRef" }] : /* istanbul ignore next */ []));
-        this.menuContentTemplateRef = input(...(ngDevMode ? [undefined, { debugName: "menuContentTemplateRef" }] : /* istanbul ignore next */ []));
-        this.isDesktop = input(false, ...(ngDevMode ? [{ debugName: "isDesktop" }] : /* istanbul ignore next */ []));
-        this.applicationTheme = input('light', ...(ngDevMode ? [{ debugName: "applicationTheme" }] : /* istanbul ignore next */ []));
-        this.navigateEvent = output();
-        this.menuItemClicked = output();
-        this.logoutEvent = output();
-        this.translationContext = 'NAVBAR.';
-        this.avatarSize = AvatarSize;
-        this.activeRoutesMap = computed(() => {
-            const currentRoute = this.activedRoute();
-            return new Map(this.routes().map(route => [route.id, currentRoute?.startsWith(route.id)]));
-        }, ...(ngDevMode ? [{ debugName: "activeRoutesMap" }] : /* istanbul ignore next */ []));
-    }
-    navigate(routeId) {
-        this.navigateEvent.emit(`/${routeId}`);
-    }
-    logout() {
-        this.logoutEvent.emit();
-    }
-    clickMenuItem(id) {
-        this.menuItemClicked.emit(id);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: MobileNavbarSideSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: MobileNavbarSideSheetComponent, isStandalone: true, selector: "ui-mobile-navbar-side-sheet", inputs: { routes: { classPropertyName: "routes", publicName: "routes", isSignal: true, isRequired: false, transformFunction: null }, activedRoute: { classPropertyName: "activedRoute", publicName: "activedRoute", isSignal: true, isRequired: false, transformFunction: null }, email: { classPropertyName: "email", publicName: "email", isSignal: true, isRequired: false, transformFunction: null }, userName: { classPropertyName: "userName", publicName: "userName", isSignal: true, isRequired: false, transformFunction: null }, menuItems: { classPropertyName: "menuItems", publicName: "menuItems", isSignal: true, isRequired: false, transformFunction: null }, contentTemplateRef: { classPropertyName: "contentTemplateRef", publicName: "contentTemplateRef", isSignal: true, isRequired: false, transformFunction: null }, userInfoExtraTemplateRef: { classPropertyName: "userInfoExtraTemplateRef", publicName: "userInfoExtraTemplateRef", isSignal: true, isRequired: false, transformFunction: null }, menuContentTemplateRef: { classPropertyName: "menuContentTemplateRef", publicName: "menuContentTemplateRef", isSignal: true, isRequired: false, transformFunction: null }, isDesktop: { classPropertyName: "isDesktop", publicName: "isDesktop", isSignal: true, isRequired: false, transformFunction: null }, applicationTheme: { classPropertyName: "applicationTheme", publicName: "applicationTheme", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { navigateEvent: "navigateEvent", menuItemClicked: "menuItemClicked", logoutEvent: "logoutEvent" }, ngImport: i0, template: "<div class=\"mobile-navbar-container\" [ngClass]=\"{ desktop: isDesktop() }\">\n  @if (isDesktop()) {\n    <ng-container [ngTemplateOutlet]=\"userInfo\"></ng-container>\n  }\n\n  @if (menuContentTemplateRef()) {\n    <ng-container [ngTemplateOutlet]=\"menuContentTemplateRef()!\"></ng-container>\n  }\n\n  @if (!isDesktop()) {\n    <div class=\"routes\">\n      @for (route of routes(); track route) {\n        <div\n          [attr.data-testid]=\"route.id\"\n          data-test-role=\"nav-route\"\n          tabindex=\"0\"\n          (click)=\"navigate(route.id)\"\n          (keydown.enter)=\"navigate(route.id)\"\n          class=\"route\"\n          [ngClass]=\"{ active: activeRoutesMap().get(route.id) }\"\n        >\n          <span>{{ route.title }}</span>\n        </div>\n      }\n    </div>\n  }\n\n  <div class=\"settings\">\n    @for (e of menuItems(); track e) {\n      @if (e) {\n        <div class=\"menu-item\">\n          <ui-button\n            [attr.data-testid]=\"e.id\"\n            data-test-role=\"menu-item\"\n            [applicationTheme]=\"applicationTheme()\"\n            [fullWidth]=\"true\"\n            [disabledScaleOnClick]=\"true\"\n            [variant]=\"'menuCell'\"\n            iconPosition=\"left\"\n            [iconName]=\"e.icon\"\n            [label]=\"e.text\"\n            (buttonClickEvent)=\"clickMenuItem(e.id)\"\n            (keydown.Tab)=\"$event.stopPropagation()\"\n            (keydown.shift.tab)=\"$event.stopPropagation()\"\n            [ariaLabel]=\"e.text + '--' + e.text\"\n          ></ui-button>\n        </div>\n      }\n    }\n  </div>\n</div>\n\n<div class=\"bottom-content\" [ngClass]=\"{ desktop: isDesktop() }\">\n  @if (!isDesktop() && contentTemplateRef()) {\n    <ng-container [ngTemplateOutlet]=\"contentTemplateRef()!\"></ng-container>\n  }\n  @if (isDesktop()) {\n    <div class=\"menu-item\">\n      <ui-button\n        data-testid=\"logout-button\"\n        [applicationTheme]=\"applicationTheme()\"\n        [fullWidth]=\"true\"\n        [disabledScaleOnClick]=\"true\"\n        [variant]=\"'menuCell'\"\n        iconPosition=\"left\"\n        [iconName]=\"'Logout-in-line'\"\n        [label]=\"(translationContext + 'LOG_OUT' | uiTranslate | async)!\"\n        (buttonClickEvent)=\"logout()\"\n        (keydown.Tab)=\"$event.stopPropagation()\"\n        (keydown.shift.tab)=\"$event.stopPropagation()\"\n      ></ui-button>\n    </div>\n  } @else {\n    <ng-container [ngTemplateOutlet]=\"userInfo\"></ng-container>\n  }\n</div>\n\n<ng-template #userInfo>\n  <div class=\"user-info\" [ngClass]=\"{ desktop: isDesktop() }\">\n    <ui-avatar [size]=\"avatarSize.MEDIUM\" [name]=\"userName()\"></ui-avatar>\n    <div class=\"details-container\">\n      <div class=\"name-container\">\n        <span class=\"user-name dd-privacy-mask\">{{ userName() }}</span>\n        <span class=\"user-email dd-privacy-mask\">{{ email() }}</span>\n        @if (userInfoExtraTemplateRef()) {\n          <ng-container [ngTemplateOutlet]=\"userInfoExtraTemplateRef()!\"></ng-container>\n        }\n      </div>\n      @if (!isDesktop()) {\n        <ui-button\n          data-testid=\"logout-button\"\n          [tooltip]=\"(translationContext + 'LOG_OUT' | uiTranslate | async)!\"\n          [iconName]=\"'Logout-in-line'\"\n          [applicationTheme]=\"'light'\"\n          [variant]=\"'icon-button'\"\n          (click)=\"logout()\"\n        ></ui-button>\n      }\n    </div>\n  </div>\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;height:100%}.mobile-navbar-container{padding-top:16px;flex:1 1 auto;min-height:0;overflow-y:auto}.mobile-navbar-container.desktop{min-width:340px}.mobile-navbar-container .routes .route{display:flex;align-items:center;gap:8px;min-height:44px;padding:12px 24px;width:100%;box-sizing:border-box;font-size:16px;line-height:24px;cursor:pointer}.mobile-navbar-container .routes .route.active{background-color:#fff2fc;color:#a90686}.mobile-navbar-container .routes .route:hover{background-color:#fff2fc}.mobile-navbar-container .routes .route:active{background-color:#ffe6fa}.menu-item{width:100%;min-height:44px;display:flex;font-size:16px;line-height:24px;flex-direction:row;align-items:center;cursor:pointer}.menu-item ::ng-deep ui-button{width:100%}.menu-item ::ng-deep ui-button button{padding-left:24px!important}.menu-item ::ng-deep ui-button button span.icon{margin-right:16px!important}.menu-item ::ng-deep ui-button button span.icon-label-wrapper span.label{font-size:16px!important;line-height:24px!important;font-weight:400!important}.menu-item ::ng-deep ui-button button.mat-mdc-unelevated-button.menuCell:hover{background-color:#fff2fc}.menu-item ::ng-deep ui-button button.mat-mdc-unelevated-button.menuCell:active{background-color:#ffe6fa}.bottom-content{width:100%;flex:0 0 auto;display:flex;align-items:center;flex-direction:column;position:sticky;bottom:0;background:#fff;z-index:1}.bottom-content.desktop{position:relative;border-top:1px solid #d3d3d3;margin-top:16px;padding:16px 0 8px}.user-info{display:flex;align-items:center;gap:16px;padding:12px 24px;width:100%;box-sizing:border-box}.user-info.desktop{padding:0 16px;margin-bottom:16px}.user-info .details-container{display:flex;justify-content:space-between;align-items:center;width:100%;min-width:0;gap:8px}.user-info .name-container{display:flex;flex-direction:column;min-width:0}.user-info .name-container .user-name{font-size:16px;line-height:24px;font-weight:700;font-family:ModernGothic,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-info .name-container .user-email{font-size:16px;line-height:24px;color:#666;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: IconComponentModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatMenuModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: AccordionComponentModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AvatarComponentModule }, { kind: "component", type: i1.AvatarComponent, selector: "ui-avatar", inputs: ["size", "imageUrl", "name", "tooltipText", "allowEdit", "applicationTheme", "backgroundColor"], outputs: ["editClick"] }, { kind: "ngmodule", type: ButtonComponentModule }, { kind: "component", type: i2.ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "trailingIconName", "trailingIconFilled", "disabled", "loading", "loadingWithLabel", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaExpanded", "ariaControls", "ariaPressed", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "hasBackground", "tooltipPosition", "role", "iconFilled", "testId"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: MobileNavbarSideSheetComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ui-mobile-navbar-side-sheet', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        NgClass,
-                        IconComponentModule,
-                        MatIconModule,
-                        MatMenuModule,
-                        UiTranslatePipe,
-                        MatButtonModule,
-                        AccordionComponentModule,
-                        NgTemplateOutlet,
-                        AvatarComponentModule,
-                        ButtonComponentModule,
-                        AsyncPipe,
-                    ], template: "<div class=\"mobile-navbar-container\" [ngClass]=\"{ desktop: isDesktop() }\">\n  @if (isDesktop()) {\n    <ng-container [ngTemplateOutlet]=\"userInfo\"></ng-container>\n  }\n\n  @if (menuContentTemplateRef()) {\n    <ng-container [ngTemplateOutlet]=\"menuContentTemplateRef()!\"></ng-container>\n  }\n\n  @if (!isDesktop()) {\n    <div class=\"routes\">\n      @for (route of routes(); track route) {\n        <div\n          [attr.data-testid]=\"route.id\"\n          data-test-role=\"nav-route\"\n          tabindex=\"0\"\n          (click)=\"navigate(route.id)\"\n          (keydown.enter)=\"navigate(route.id)\"\n          class=\"route\"\n          [ngClass]=\"{ active: activeRoutesMap().get(route.id) }\"\n        >\n          <span>{{ route.title }}</span>\n        </div>\n      }\n    </div>\n  }\n\n  <div class=\"settings\">\n    @for (e of menuItems(); track e) {\n      @if (e) {\n        <div class=\"menu-item\">\n          <ui-button\n            [attr.data-testid]=\"e.id\"\n            data-test-role=\"menu-item\"\n            [applicationTheme]=\"applicationTheme()\"\n            [fullWidth]=\"true\"\n            [disabledScaleOnClick]=\"true\"\n            [variant]=\"'menuCell'\"\n            iconPosition=\"left\"\n            [iconName]=\"e.icon\"\n            [label]=\"e.text\"\n            (buttonClickEvent)=\"clickMenuItem(e.id)\"\n            (keydown.Tab)=\"$event.stopPropagation()\"\n            (keydown.shift.tab)=\"$event.stopPropagation()\"\n            [ariaLabel]=\"e.text + '--' + e.text\"\n          ></ui-button>\n        </div>\n      }\n    }\n  </div>\n</div>\n\n<div class=\"bottom-content\" [ngClass]=\"{ desktop: isDesktop() }\">\n  @if (!isDesktop() && contentTemplateRef()) {\n    <ng-container [ngTemplateOutlet]=\"contentTemplateRef()!\"></ng-container>\n  }\n  @if (isDesktop()) {\n    <div class=\"menu-item\">\n      <ui-button\n        data-testid=\"logout-button\"\n        [applicationTheme]=\"applicationTheme()\"\n        [fullWidth]=\"true\"\n        [disabledScaleOnClick]=\"true\"\n        [variant]=\"'menuCell'\"\n        iconPosition=\"left\"\n        [iconName]=\"'Logout-in-line'\"\n        [label]=\"(translationContext + 'LOG_OUT' | uiTranslate | async)!\"\n        (buttonClickEvent)=\"logout()\"\n        (keydown.Tab)=\"$event.stopPropagation()\"\n        (keydown.shift.tab)=\"$event.stopPropagation()\"\n      ></ui-button>\n    </div>\n  } @else {\n    <ng-container [ngTemplateOutlet]=\"userInfo\"></ng-container>\n  }\n</div>\n\n<ng-template #userInfo>\n  <div class=\"user-info\" [ngClass]=\"{ desktop: isDesktop() }\">\n    <ui-avatar [size]=\"avatarSize.MEDIUM\" [name]=\"userName()\"></ui-avatar>\n    <div class=\"details-container\">\n      <div class=\"name-container\">\n        <span class=\"user-name dd-privacy-mask\">{{ userName() }}</span>\n        <span class=\"user-email dd-privacy-mask\">{{ email() }}</span>\n        @if (userInfoExtraTemplateRef()) {\n          <ng-container [ngTemplateOutlet]=\"userInfoExtraTemplateRef()!\"></ng-container>\n        }\n      </div>\n      @if (!isDesktop()) {\n        <ui-button\n          data-testid=\"logout-button\"\n          [tooltip]=\"(translationContext + 'LOG_OUT' | uiTranslate | async)!\"\n          [iconName]=\"'Logout-in-line'\"\n          [applicationTheme]=\"'light'\"\n          [variant]=\"'icon-button'\"\n          (click)=\"logout()\"\n        ></ui-button>\n      }\n    </div>\n  </div>\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;height:100%}.mobile-navbar-container{padding-top:16px;flex:1 1 auto;min-height:0;overflow-y:auto}.mobile-navbar-container.desktop{min-width:340px}.mobile-navbar-container .routes .route{display:flex;align-items:center;gap:8px;min-height:44px;padding:12px 24px;width:100%;box-sizing:border-box;font-size:16px;line-height:24px;cursor:pointer}.mobile-navbar-container .routes .route.active{background-color:#fff2fc;color:#a90686}.mobile-navbar-container .routes .route:hover{background-color:#fff2fc}.mobile-navbar-container .routes .route:active{background-color:#ffe6fa}.menu-item{width:100%;min-height:44px;display:flex;font-size:16px;line-height:24px;flex-direction:row;align-items:center;cursor:pointer}.menu-item ::ng-deep ui-button{width:100%}.menu-item ::ng-deep ui-button button{padding-left:24px!important}.menu-item ::ng-deep ui-button button span.icon{margin-right:16px!important}.menu-item ::ng-deep ui-button button span.icon-label-wrapper span.label{font-size:16px!important;line-height:24px!important;font-weight:400!important}.menu-item ::ng-deep ui-button button.mat-mdc-unelevated-button.menuCell:hover{background-color:#fff2fc}.menu-item ::ng-deep ui-button button.mat-mdc-unelevated-button.menuCell:active{background-color:#ffe6fa}.bottom-content{width:100%;flex:0 0 auto;display:flex;align-items:center;flex-direction:column;position:sticky;bottom:0;background:#fff;z-index:1}.bottom-content.desktop{position:relative;border-top:1px solid #d3d3d3;margin-top:16px;padding:16px 0 8px}.user-info{display:flex;align-items:center;gap:16px;padding:12px 24px;width:100%;box-sizing:border-box}.user-info.desktop{padding:0 16px;margin-bottom:16px}.user-info .details-container{display:flex;justify-content:space-between;align-items:center;width:100%;min-width:0;gap:8px}.user-info .name-container{display:flex;flex-direction:column;min-width:0}.user-info .name-container .user-name{font-size:16px;line-height:24px;font-weight:700;font-family:ModernGothic,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-info .name-container .user-email{font-size:16px;line-height:24px;color:#666;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
-        }], propDecorators: { routes: [{ type: i0.Input, args: [{ isSignal: true, alias: "routes", required: false }] }], activedRoute: [{ type: i0.Input, args: [{ isSignal: true, alias: "activedRoute", required: false }] }], email: [{ type: i0.Input, args: [{ isSignal: true, alias: "email", required: false }] }], userName: [{ type: i0.Input, args: [{ isSignal: true, alias: "userName", required: false }] }], menuItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuItems", required: false }] }], contentTemplateRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentTemplateRef", required: false }] }], userInfoExtraTemplateRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "userInfoExtraTemplateRef", required: false }] }], menuContentTemplateRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuContentTemplateRef", required: false }] }], isDesktop: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDesktop", required: false }] }], applicationTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "applicationTheme", required: false }] }], navigateEvent: [{ type: i0.Output, args: ["navigateEvent"] }], menuItemClicked: [{ type: i0.Output, args: ["menuItemClicked"] }], logoutEvent: [{ type: i0.Output, args: ["logoutEvent"] }] } });
-
-/**
- * Injected by string for backwards compatibility — consumers provide this token by its string name.
- */
-const DEFAULT_APPLICATION_THEME_TOKEN = 'CANOPYUI_DEFAULT_APPLICATION_THEME';
-class NavbarComponent {
-    constructor() {
-        this.breakpointObserver = inject(BreakpointObserver);
-        this.sideSheetService = inject(SideSheetService);
-        this.translatePipe = inject(UiTranslatePipe);
-        this.defaultAppTheme = inject(DEFAULT_APPLICATION_THEME_TOKEN, { optional: true });
-        /**
-         * Routes object
-         *
-         * @memberof NavbarComponent
-         * @ignore
-         */
-        this.routes = input([], ...(ngDevMode ? [{ debugName: "routes" }] : /* istanbul ignore next */ []));
-        /**
-         * Actived route id
-         *
-         * @memberof NavbarComponent
-         */
-        this.activedRoute = input('', ...(ngDevMode ? [{ debugName: "activedRoute" }] : /* istanbul ignore next */ []));
-        /**
-         * User first name and last name
-         *
-         * @memberof NavbarComponent
-         */
-        this.userName = input('', ...(ngDevMode ? [{ debugName: "userName" }] : /* istanbul ignore next */ []));
-        /**
-         * User email
-         *
-         * @memberof NavbarComponent
-         */
-        this.email = input('', ...(ngDevMode ? [{ debugName: "email" }] : /* istanbul ignore next */ []));
-        /**
-         * Menu items to show in menu above the Log out button
-         *
-         * @memberof NavbarComponent
-         */
-        this.menuItems = input([], ...(ngDevMode ? [{ debugName: "menuItems" }] : /* istanbul ignore next */ []));
-        /**
-         * Defines the application theme
-         *
-         * @memberof NavbarComponent
-         */
-        this.applicationTheme = input(this.defaultAppTheme ?? 'light', ...(ngDevMode ? [{ debugName: "applicationTheme" }] : /* istanbul ignore next */ []));
-        /**
-         * It's ng-content for the collapsed (drawer) version
-         *
-         * @memberof NavbarComponent
-         */
-        this.contentTemplateRef = input(...(ngDevMode ? [undefined, { debugName: "contentTemplateRef" }] : /* istanbul ignore next */ []));
-        /**
-         * Additional info template reference for the extra user info in the dropdown/sidesheet
-         *
-         * @memberof NavbarComponent
-         */
-        this.userInfoExtraTemplateRef = input(...(ngDevMode ? [undefined, { debugName: "userInfoExtraTemplateRef" }] : /* istanbul ignore next */ []));
-        /**
-         * Custom content template reference for the menu section between user info and menu items.
-         * Use this to add custom components like credits display.
-         *
-         * @memberof NavbarComponent
-         */
-        this.menuContentTemplateRef = input(...(ngDevMode ? [undefined, { debugName: "menuContentTemplateRef" }] : /* istanbul ignore next */ []));
-        /**
-         * Width at or below which the navbar renders its compact (brandmark) logo
-         *
-         * @memberof NavbarComponent
-         */
-        this.mobileBreakpoint = input(ScreenBreakpoints.MOBILE, { ...(ngDevMode ? { debugName: "mobileBreakpoint" } : /* istanbul ignore next */ {}), 
-            // `[mobileBreakpoint]="maybeUndefined"` must not produce `(max-width: undefinedpx)`.
-            transform: (value) => value || ScreenBreakpoints.MOBILE });
-        /**
-         * Width at or below which the horizontal navigation and the profile menu collapse
-         * into the hamburger-triggered drawer
-         *
-         * @memberof NavbarComponent
-         */
-        this.collapseBreakpoint = input(ScreenBreakpoints.LARGE_TABLET, { ...(ngDevMode ? { debugName: "collapseBreakpoint" } : /* istanbul ignore next */ {}), 
-            // `[collapseBreakpoint]="maybeUndefined"` must not produce `(max-width: undefinedpx)`.
-            transform: (value) => value || ScreenBreakpoints.LARGE_TABLET });
-        /**
-         * Show avatar with user initials
-         *
-         * @memberof NavbarComponent
-         */
-        this.isAvatar = input(true, ...(ngDevMode ? [{ debugName: "isAvatar" }] : /* istanbul ignore next */ []));
-        /**
-         * Sets class for the menu
-         *
-         * @memberof NavbarComponent
-         */
-        this.menuClass = input('', ...(ngDevMode ? [{ debugName: "menuClass" }] : /* istanbul ignore next */ []));
-        /**
-         * @ignore
-         */
-        this.navigateEvent = output();
-        /**
-         * @ignore
-         */
-        this.menuItemClicked = output();
-        /**
-         * @ignore
-         */
-        this.logoutEvent = output();
-        this.menuState = output();
-        this.isMobile = this.observeMaxWidth(this.mobileBreakpoint);
-        this.isCollapsed = this.observeMaxWidth(this.collapseBreakpoint);
-        this.screenSize = computed(() => {
-            if (this.isMobile()) {
-                return 'mobile';
-            }
-            return this.isCollapsed() ? 'tablet' : 'desktop';
-        }, ...(ngDevMode ? [{ debugName: "screenSize" }] : /* istanbul ignore next */ []));
-        /**
-         * @deprecated Use the `screenSize` reported by `menuState` instead. Removed in the next major.
-         */
-        this.isMobile$ = toObservable(this.isMobile);
-        /**
-         * @deprecated Use the `screenSize` reported by `menuState` instead. Removed in the next major.
-         */
-        this.isTablet$ = toObservable(this.isCollapsed);
-        this.translationContext = 'NAVBAR.';
-        this.logoType = LogoTypeEnum;
-        this.AvatarSize = AvatarSize;
-        this.activeRoutesMap = computed(() => {
-            const currentRoute = this.activedRoute();
-            return new Map(this.routes().map(route => [route.id, currentRoute?.startsWith(route.id)]));
-        }, ...(ngDevMode ? [{ debugName: "activeRoutesMap" }] : /* istanbul ignore next */ []));
-        /**
-         * Output subscriptions of the currently open drawer. Torn down when it closes, so repeated
-         * opens don't accumulate one set per open.
-         */
-        this.drawerSubscriptions = [];
-        this.isDrawerOpened = signal(false, ...(ngDevMode ? [{ debugName: "isDrawerOpened" }] : /* istanbul ignore next */ []));
-        // The hamburger disappears once the viewport grows past `collapseBreakpoint`, so an open
-        // drawer would have no dismiss affordance left — close it as soon as the nav expands.
-        this.closeDrawerOnExpand = effect(() => {
-            if (!this.isCollapsed() && this.isDrawerOpened()) {
-                this.sideSheetService.close();
-            }
-        }, ...(ngDevMode ? [{ debugName: "closeDrawerOnExpand" }] : /* istanbul ignore next */ []));
-    }
-    openMobileMenu() {
-        // Defensive: never stack a second set of subscriptions if a close never reported back.
-        this.teardownDrawerSubscriptions();
-        const isSideSheetClosed$ = new Subject();
-        // `LanguageService` is backed by a BehaviorSubject, so this resolves synchronously.
-        let title = '';
-        this.translatePipe
-            .transform(`${this.translationContext}MENU`)
-            .pipe(take(1))
-            .subscribe(translated => (title = translated));
-        const navbarSideSheetComponent = this.sideSheetService.open({
-            componentRef: MobileNavbarSideSheetComponent,
-            title,
-            showLogo: false,
-            closed: isSideSheetClosed$,
-            inputs: {
-                userName: this.userName(),
-                menuItems: this.menuItems(),
-                activedRoute: this.activedRoute(),
-                routes: this.routes(),
-                email: this.email(),
-                contentTemplateRef: this.contentTemplateRef(),
-                userInfoExtraTemplateRef: this.userInfoExtraTemplateRef(),
-                menuContentTemplateRef: this.menuContentTemplateRef(),
-                applicationTheme: this.applicationTheme(),
-            },
-        });
-        this.drawerSubscriptions = [
-            navbarSideSheetComponent.logoutEvent.subscribe(() => {
-                this.logoutEvent.emit();
-                isSideSheetClosed$.next();
-            }),
-            navbarSideSheetComponent.menuItemClicked.subscribe(value => {
-                this.menuItemClicked.emit(value);
-                isSideSheetClosed$.next();
-            }),
-            navbarSideSheetComponent.navigateEvent.subscribe(value => {
-                this.navigateEvent.emit(value);
-                isSideSheetClosed$.next();
-            }),
-        ];
-    }
-    /**
-     * Closes the drawer if the navbar is currently collapsed. Consumers use this to dismiss the
-     * menu on navigation without reaching into the component's internals.
-     */
-    closeMenu() {
-        // The open check matters: `SideSheetService.close()` broadcasts to the sheet regardless of
-        // its state, so calling it with the drawer already closed must stay a no-op.
-        if (this.isCollapsed() && this.isDrawerOpened()) {
-            this.sideSheetService.close();
-        }
-    }
-    navigate(routeId) {
-        this.navigateEvent.emit(`/${routeId}`);
-    }
-    logout() {
-        this.logoutEvent.emit();
-    }
-    clickMenuItem(id) {
-        this.menuItemClicked.emit(id);
-    }
-    onChangeMenuState(isOpened, screenSize) {
-        this.menuState.emit({ isOpened, screenSize });
-    }
-    onSideSheetOpenChange(isOpened) {
-        this.isDrawerOpened.set(isOpened);
-        if (!isOpened) {
-            this.teardownDrawerSubscriptions();
-        }
-        this.onChangeMenuState(isOpened, this.screenSize());
-    }
-    teardownDrawerSubscriptions() {
-        this.drawerSubscriptions.forEach(subscription => subscription.unsubscribe());
-        this.drawerSubscriptions = [];
-    }
-    observeMaxWidth(breakpointPx) {
-        return toSignal(toObservable(breakpointPx).pipe(switchMap(breakpoint => this.breakpointObserver.observe(`(max-width: ${breakpoint}px)`)), map(state => state.matches)), { initialValue: false });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: NavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: NavbarComponent, isStandalone: true, selector: "ui-navbar", inputs: { routes: { classPropertyName: "routes", publicName: "routes", isSignal: true, isRequired: false, transformFunction: null }, activedRoute: { classPropertyName: "activedRoute", publicName: "activedRoute", isSignal: true, isRequired: false, transformFunction: null }, userName: { classPropertyName: "userName", publicName: "userName", isSignal: true, isRequired: false, transformFunction: null }, email: { classPropertyName: "email", publicName: "email", isSignal: true, isRequired: false, transformFunction: null }, menuItems: { classPropertyName: "menuItems", publicName: "menuItems", isSignal: true, isRequired: false, transformFunction: null }, applicationTheme: { classPropertyName: "applicationTheme", publicName: "applicationTheme", isSignal: true, isRequired: false, transformFunction: null }, contentTemplateRef: { classPropertyName: "contentTemplateRef", publicName: "contentTemplateRef", isSignal: true, isRequired: false, transformFunction: null }, userInfoExtraTemplateRef: { classPropertyName: "userInfoExtraTemplateRef", publicName: "userInfoExtraTemplateRef", isSignal: true, isRequired: false, transformFunction: null }, menuContentTemplateRef: { classPropertyName: "menuContentTemplateRef", publicName: "menuContentTemplateRef", isSignal: true, isRequired: false, transformFunction: null }, mobileBreakpoint: { classPropertyName: "mobileBreakpoint", publicName: "mobileBreakpoint", isSignal: true, isRequired: false, transformFunction: null }, collapseBreakpoint: { classPropertyName: "collapseBreakpoint", publicName: "collapseBreakpoint", isSignal: true, isRequired: false, transformFunction: null }, isAvatar: { classPropertyName: "isAvatar", publicName: "isAvatar", isSignal: true, isRequired: false, transformFunction: null }, menuClass: { classPropertyName: "menuClass", publicName: "menuClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { navigateEvent: "navigateEvent", menuItemClicked: "menuItemClicked", logoutEvent: "logoutEvent", menuState: "menuState" }, providers: [UiTranslatePipe], ngImport: i0, template: "<ui-side-sheet\n  class=\"navbar-sheet\"\n  [applicationTheme]=\"applicationTheme()\"\n  (openChange)=\"onSideSheetOpenChange($event)\"\n  position=\"end\"\n>\n  <mat-toolbar [attr.theme]=\"applicationTheme()\">\n    <div class=\"custom-toolbar row\">\n      <div class=\"brand\">\n        <ui-logo\n          [applicationTheme]=\"applicationTheme()\"\n          class=\"logo\"\n          (click)=\"navigate('')\"\n          [allowResizing]=\"true\"\n          [width]=\"isMobile() ? 27 : 160\"\n          [type]=\"isMobile() ? logoType.PRIMARY_BRANDMARK_PINK : logoType.DEFAULT\"\n        ></ui-logo>\n\n        @if (!isCollapsed()) {\n          <div class=\"navigation row\">\n            @for (route of routes(); track route) {\n              <a\n                (click)=\"navigate(route.id); $event.preventDefault()\"\n                [href]=\"route.id\"\n                [attr.data-testid]=\"route.id\"\n                data-test-role=\"nav-route\"\n                [ngClass]=\"{ active: activeRoutesMap().get(route.id) }\"\n              >\n                @if (route?.badgeOptions) {\n                  <ui-badge\n                    [label]=\"route.badgeOptions!.text ?? ''\"\n                    [rebrandColor]=\"route.badgeOptions!.color\"\n                    [variant]=\"route.badgeOptions!.variant ?? 'primary'\"\n                    [notificationsAmount]=\"route.badgeOptions!.notificationsAmount ?? 0\"\n                  ></ui-badge>\n                }\n                <span [attr.data-text]=\"route.title\">{{ route.title }}</span>\n              </a>\n            }\n          </div>\n        }\n      </div>\n\n      <div class=\"actions\">\n        <div class=\"custom-actions\">\n          <ng-content select=\"[actions]\"></ng-content>\n        </div>\n\n        @if (isCollapsed()) {\n          <ui-button\n            data-testid=\"navbar-menu-button\"\n            (click)=\"openMobileMenu()\"\n            [variant]=\"'text'\"\n            [companyColor]=\"'#242424'\"\n            [applicationTheme]=\"'light'\"\n            [iconName]=\"'Menu-burger-in-line'\"\n            [justIcon]=\"true\"\n          ></ui-button>\n        } @else {\n          <button\n            mat-button\n            class=\"profile-menu\"\n            [disableRipple]=\"applicationTheme() !== 'classic'\"\n            (menuOpened)=\"onChangeMenuState(true, 'desktop')\"\n            (menuClosed)=\"onChangeMenuState(false, 'desktop')\"\n            [matMenuTriggerFor]=\"menu\"\n          >\n            <div class=\"profile-button-content\">\n              @if (isAvatar()) {\n                <ui-avatar\n                  data-testid=\"profile-button\"\n                  [ngClass]=\"{ opened: menu._panelAnimationState !== 'void' }\"\n                  [applicationTheme]=\"applicationTheme()\"\n                  [name]=\"userName()\"\n                  [size]=\"AvatarSize.SMALL_MEDIUM\"\n                ></ui-avatar>\n              } @else {\n                {{ userName() }}\n              }\n\n              @if (applicationTheme() === 'classic') {\n                <mat-icon iconPositionEnd>expand_more</mat-icon>\n              } @else {\n                @if (!isAvatar()) {\n                  <ui-icon\n                    [size]=\"'24'\"\n                    [name]=\"\n                      menu._panelAnimationState === 'void' ? 'Arrow-chevron-down-filled' : 'Arrow-chevron-up-filled'\n                    \"\n                    [applicationTheme]=\"applicationTheme()\"\n                  ></ui-icon>\n                }\n              }\n            </div>\n          </button>\n        }\n      </div>\n    </div>\n  </mat-toolbar>\n\n  <ng-content></ng-content>\n\n  <mat-menu [class]=\"menuClass()\" #menu=\"matMenu\">\n    @if (applicationTheme() === 'classic') {\n      @for (e of menuItems(); track e) {\n        <button\n          mat-menu-item\n          (click)=\"clickMenuItem(e.id)\"\n          [attr.data-testid]=\"e.id\"\n          data-test-role=\"profile-menu-item\"\n        >\n          <div class=\"menu-item\">\n            @if (e?.icon) {\n              <ui-icon [name]=\"e.icon\" size=\"24\"></ui-icon>\n            }\n            {{ e.text }}\n          </div>\n        </button>\n      }\n      <button data-testid=\"logout-button\" mat-menu-item (click)=\"logout()\">\n        <mat-icon>power_settings_new</mat-icon>\n        {{ translationContext + 'LOG_OUT' | uiTranslate | async }}\n      </button>\n    } @else {\n      <ui-mobile-navbar-side-sheet\n        [isDesktop]=\"true\"\n        [menuItems]=\"menuItems()\"\n        [userName]=\"userName()\"\n        [routes]=\"routes()\"\n        [activedRoute]=\"activedRoute()\"\n        [email]=\"email()\"\n        [applicationTheme]=\"applicationTheme()\"\n        [contentTemplateRef]=\"contentTemplateRef()\"\n        [userInfoExtraTemplateRef]=\"userInfoExtraTemplateRef()\"\n        [menuContentTemplateRef]=\"menuContentTemplateRef()\"\n        (menuItemClicked)=\"clickMenuItem($event)\"\n        (logoutEvent)=\"logout()\"\n      >\n      </ui-mobile-navbar-side-sheet>\n    }\n  </mat-menu>\n</ui-side-sheet>\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{height:100%}:host ::ng-deep ui-side-sheet.navbar-sheet>.side-sheet-container{display:block;height:100%;position:relative!important;overflow:hidden}:host ::ng-deep ui-side-sheet.navbar-sheet>.side-sheet-container:has(>.side-sheet-content.mat-drawer-opened){min-height:100vh;min-height:100dvh}:host ::ng-deep ui-side-sheet.navbar-sheet>.side-sheet-container>.mat-drawer.side-sheet-content{width:360px!important;padding:0!important;background:#fff!important}@media(max-width:600px){:host ::ng-deep ui-side-sheet.navbar-sheet>.side-sheet-container>.mat-drawer.side-sheet-content{width:320px!important}}:host ::ng-deep ui-side-sheet.navbar-sheet>.side-sheet-container>.mat-drawer.side-sheet-content .mat-drawer-inner-container{display:flex;flex-direction:column;overflow:hidden}:host ::ng-deep ui-side-sheet.navbar-sheet>.side-sheet-container>.mat-drawer.side-sheet-content .mat-drawer-inner-container ui-mobile-navbar-side-sheet{flex:1 1 auto;min-height:0}:host ::ng-deep ui-side-sheet.navbar-sheet>.side-sheet-container>.mat-drawer.side-sheet-content .header{flex:0 0 auto;height:64px;padding:0 16px 0 24px!important;border-bottom:1px solid #d3d3d3;display:flex;align-items:center}:host ::ng-deep ui-side-sheet.navbar-sheet>.side-sheet-container>.mat-drawer.side-sheet-content .header .title{margin-right:0}:host ::ng-deep ui-side-sheet.navbar-sheet>.side-sheet-container>.mat-drawer.side-sheet-content .header .title span{font-size:20px;line-height:26px;font-weight:700}.mat-toolbar{height:80px;background-color:#fff!important}.mat-toolbar .custom-toolbar{height:100%;background-color:#fff;flex:1 1 auto;box-sizing:content-box;max-width:1312px;min-width:0;padding:0 20px;gap:16px;justify-content:space-between}@media(min-width:960px){.mat-toolbar .custom-toolbar{padding:0 40px}}@media(min-width:1280px){.mat-toolbar .custom-toolbar{padding:0 64px}}@media(max-width:600px){.mat-toolbar .custom-toolbar{padding:0 24px}}.mat-toolbar .custom-toolbar .brand{display:flex;align-items:center;gap:16px}.mat-toolbar .custom-toolbar ui-logo.logo{cursor:pointer;align-self:center;display:flex;flex-shrink:0}.mat-toolbar .custom-toolbar .navigation{height:100%}.mat-toolbar .custom-toolbar .navigation a{display:flex;align-items:center;height:100%;background:#fff;cursor:pointer;color:#000;text-decoration:none;white-space:nowrap}.mat-toolbar .custom-toolbar .navigation a:hover{text-decoration:none}.mat-toolbar .custom-toolbar .navigation a.active{border-top:2px solid #276678}.mat-toolbar .custom-toolbar .navigation a.active span{font-weight:700}.mat-toolbar .custom-toolbar .navigation a span{width:100%;text-align:center;font-weight:400;font-size:14px;line-height:16px}.mat-toolbar .custom-toolbar .navigation a span:after{content:attr(data-text);content:attr(data-text)/\"\";display:block;height:0;overflow:hidden;visibility:hidden;font-weight:700;pointer-events:none}.mat-toolbar .custom-toolbar .actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0}.mat-toolbar .custom-toolbar .actions .profile-menu{font-weight:600;font-size:14px;height:100%}.mat-toolbar .custom-toolbar .actions .profile-menu:has(ui-avatar){min-width:auto;padding-right:2px}.mat-toolbar .custom-toolbar .actions .profile-menu mat-icon{font-size:16px;position:relative;top:3px;left:3px}.mat-toolbar .custom-toolbar .actions .profile-button-content{display:flex;align-items:center;flex-wrap:nowrap}.mat-toolbar .custom-toolbar .actions .profile-button-content ui-avatar{position:relative}.mat-toolbar .custom-toolbar .actions .profile-button-content ui-avatar.opened:after{position:absolute;content:\"\";width:40px;height:40px;left:-2px;top:-2px;z-index:-1;border-radius:100%;background:#f4f4f4}.mat-toolbar[theme=dark],.mat-toolbar[theme=light]{display:flex;justify-content:center;width:100%;height:64px;padding:0;border-bottom:1px solid #d3d3d3}.mat-toolbar[theme=dark] .actions,.mat-toolbar[theme=light] .actions{color:#242424}.mat-toolbar[theme=dark] .actions ::ng-deep .mat-mdc-button .mdc-button__label,.mat-toolbar[theme=light] .actions ::ng-deep .mat-mdc-button .mdc-button__label{font-weight:400}.mat-toolbar[theme=dark] ui-icon,.mat-toolbar[theme=light] ui-icon{margin-left:8px}.mat-toolbar[theme=dark] ui-icon.open,.mat-toolbar[theme=light] ui-icon.open{transform:rotate(180deg)}.mat-toolbar[theme=dark] .navigation,.mat-toolbar[theme=light] .navigation{gap:2px}.mat-toolbar[theme=dark] .navigation a,.mat-toolbar[theme=light] .navigation a{padding:16px 24px;border-bottom:2px solid transparent;position:relative;transition:border-bottom-color .15s ease-in}.mat-toolbar[theme=dark] .navigation a ui-badge,.mat-toolbar[theme=light] .navigation a ui-badge{position:absolute;right:-12px;top:0;z-index:1}.mat-toolbar[theme=dark] .navigation a ui-badge ::ng-deep .badge-container-notification,.mat-toolbar[theme=light] .navigation a ui-badge ::ng-deep .badge-container-notification{position:absolute;right:16px;top:8px;font-size:14px}.mat-toolbar[theme=dark] .navigation a.active,.mat-toolbar[theme=light] .navigation a.active{border-top:unset!important;border-bottom:2px solid #d410aa}.mat-toolbar[theme=dark] .navigation a:hover,.mat-toolbar[theme=light] .navigation a:hover{border-top:unset!important;border-bottom:2px solid #242424}@media(max-width:600px){.mat-toolbar[theme=dark] ui-button,.mat-toolbar[theme=light] ui-button{height:48px}}.custom-actions{display:flex;align-items:center;height:64px;min-width:0;overflow:hidden}.row{display:flex;flex-direction:row}.menu-item{display:flex;align-items:center}.menu-item ui-icon{margin-right:16px}\n"], dependencies: [{ kind: "ngmodule", type: SideSheetComponentModule }, { kind: "component", type: i1$1.SideSheetComponent, selector: "ui-side-sheet", inputs: ["position", "applicationTheme", "testId"], outputs: ["openChange"] }, { kind: "component", type: MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: LogoComponent, selector: "ui-logo", inputs: ["type", "applicationTheme", "label", "width", "allowResizing"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "trailingIconName", "trailingIconFilled", "disabled", "loading", "loadingWithLabel", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaExpanded", "ariaControls", "ariaPressed", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "hasBackground", "tooltipPosition", "role", "iconFilled", "testId"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: BadgeComponent, selector: "ui-badge", inputs: ["label", "staticLabel", "icon", "iconColor", "trailingIcon", "trailingIconColor", "color", "variant", "notificationsAmount", "applicationTheme", "rebrandColor", "truncateLabel", "enableAnimation"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: AvatarComponent, selector: "ui-avatar", inputs: ["size", "imageUrl", "name", "tooltipText", "allowEdit", "applicationTheme", "backgroundColor"], outputs: ["editClick"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: IconComponentModule }, { kind: "component", type: i2$1.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "component", type: MobileNavbarSideSheetComponent, selector: "ui-mobile-navbar-side-sheet", inputs: ["routes", "activedRoute", "email", "userName", "menuItems", "contentTemplateRef", "userInfoExtraTemplateRef", "menuContentTemplateRef", "isDesktop", "applicationTheme"], outputs: ["navigateEvent", "menuItemClicked", "logoutEvent"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: NavbarComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ui-navbar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        SideSheetComponentModule,
-                        MatToolbar,
-                        LogoComponent,
-                        ButtonComponent,
-                        NgClass,
-                        BadgeComponent,
-                        MatButton,
-                        MatMenuTrigger,
-                        AvatarComponent,
-                        MatIcon,
-                        IconComponentModule,
-                        MatMenu,
-                        MatMenuItem,
-                        MobileNavbarSideSheetComponent,
-                        AsyncPipe,
-                        UiTranslatePipe,
-                    ], providers: [UiTranslatePipe], template: "<ui-side-sheet\n  class=\"navbar-sheet\"\n  [applicationTheme]=\"applicationTheme()\"\n  (openChange)=\"onSideSheetOpenChange($event)\"\n  position=\"end\"\n>\n  <mat-toolbar [attr.theme]=\"applicationTheme()\">\n    <div class=\"custom-toolbar row\">\n      <div class=\"brand\">\n        <ui-logo\n          [applicationTheme]=\"applicationTheme()\"\n          class=\"logo\"\n          (click)=\"navigate('')\"\n          [allowResizing]=\"true\"\n          [width]=\"isMobile() ? 27 : 160\"\n          [type]=\"isMobile() ? logoType.PRIMARY_BRANDMARK_PINK : logoType.DEFAULT\"\n        ></ui-logo>\n\n        @if (!isCollapsed()) {\n          <div class=\"navigation row\">\n            @for (route of routes(); track route) {\n              <a\n                (click)=\"navigate(route.id); $event.preventDefault()\"\n                [href]=\"route.id\"\n                [attr.data-testid]=\"route.id\"\n                data-test-role=\"nav-route\"\n                [ngClass]=\"{ active: activeRoutesMap().get(route.id) }\"\n              >\n                @if (route?.badgeOptions) {\n                  <ui-badge\n                    [label]=\"route.badgeOptions!.text ?? ''\"\n                    [rebrandColor]=\"route.badgeOptions!.color\"\n                    [variant]=\"route.badgeOptions!.variant ?? 'primary'\"\n                    [notificationsAmount]=\"route.badgeOptions!.notificationsAmount ?? 0\"\n                  ></ui-badge>\n                }\n                <span [attr.data-text]=\"route.title\">{{ route.title }}</span>\n              </a>\n            }\n          </div>\n        }\n      </div>\n\n      <div class=\"actions\">\n        <div class=\"custom-actions\">\n          <ng-content select=\"[actions]\"></ng-content>\n        </div>\n\n        @if (isCollapsed()) {\n          <ui-button\n            data-testid=\"navbar-menu-button\"\n            (click)=\"openMobileMenu()\"\n            [variant]=\"'text'\"\n            [companyColor]=\"'#242424'\"\n            [applicationTheme]=\"'light'\"\n            [iconName]=\"'Menu-burger-in-line'\"\n            [justIcon]=\"true\"\n          ></ui-button>\n        } @else {\n          <button\n            mat-button\n            class=\"profile-menu\"\n            [disableRipple]=\"applicationTheme() !== 'classic'\"\n            (menuOpened)=\"onChangeMenuState(true, 'desktop')\"\n            (menuClosed)=\"onChangeMenuState(false, 'desktop')\"\n            [matMenuTriggerFor]=\"menu\"\n          >\n            <div class=\"profile-button-content\">\n              @if (isAvatar()) {\n                <ui-avatar\n                  data-testid=\"profile-button\"\n                  [ngClass]=\"{ opened: menu._panelAnimationState !== 'void' }\"\n                  [applicationTheme]=\"applicationTheme()\"\n                  [name]=\"userName()\"\n                  [size]=\"AvatarSize.SMALL_MEDIUM\"\n                ></ui-avatar>\n              } @else {\n                {{ userName() }}\n              }\n\n              @if (applicationTheme() === 'classic') {\n                <mat-icon iconPositionEnd>expand_more</mat-icon>\n              } @else {\n                @if (!isAvatar()) {\n                  <ui-icon\n                    [size]=\"'24'\"\n                    [name]=\"\n                      menu._panelAnimationState === 'void' ? 'Arrow-chevron-down-filled' : 'Arrow-chevron-up-filled'\n                    \"\n                    [applicationTheme]=\"applicationTheme()\"\n                  ></ui-icon>\n                }\n              }\n            </div>\n          </button>\n        }\n      </div>\n    </div>\n  </mat-toolbar>\n\n  <ng-content></ng-content>\n\n  <mat-menu [class]=\"menuClass()\" #menu=\"matMenu\">\n    @if (applicationTheme() === 'classic') {\n      @for (e of menuItems(); track e) {\n        <button\n          mat-menu-item\n          (click)=\"clickMenuItem(e.id)\"\n          [attr.data-testid]=\"e.id\"\n          data-test-role=\"profile-menu-item\"\n        >\n          <div class=\"menu-item\">\n            @if (e?.icon) {\n              <ui-icon [name]=\"e.icon\" size=\"24\"></ui-icon>\n            }\n            {{ e.text }}\n          </div>\n        </button>\n      }\n      <button data-testid=\"logout-button\" mat-menu-item (click)=\"logout()\">\n        <mat-icon>power_settings_new</mat-icon>\n        {{ translationContext + 'LOG_OUT' | uiTranslate | async }}\n      </button>\n    } @else {\n      <ui-mobile-navbar-side-sheet\n        [isDesktop]=\"true\"\n        [menuItems]=\"menuItems()\"\n        [userName]=\"userName()\"\n        [routes]=\"routes()\"\n        [activedRoute]=\"activedRoute()\"\n        [email]=\"email()\"\n        [applicationTheme]=\"applicationTheme()\"\n        [contentTemplateRef]=\"contentTemplateRef()\"\n        [userInfoExtraTemplateRef]=\"userInfoExtraTemplateRef()\"\n        [menuContentTemplateRef]=\"menuContentTemplateRef()\"\n        (menuItemClicked)=\"clickMenuItem($event)\"\n        (logoutEvent)=\"logout()\"\n      >\n      </ui-mobile-navbar-side-sheet>\n    }\n  </mat-menu>\n</ui-side-sheet>\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{height:100%}:host ::ng-deep ui-side-sheet.navbar-sheet>.side-sheet-container{display:block;height:100%;position:relative!important;overflow:hidden}:host ::ng-deep ui-side-sheet.navbar-sheet>.side-sheet-container:has(>.side-sheet-content.mat-drawer-opened){min-height:100vh;min-height:100dvh}:host ::ng-deep ui-side-sheet.navbar-sheet>.side-sheet-container>.mat-drawer.side-sheet-content{width:360px!important;padding:0!important;background:#fff!important}@media(max-width:600px){:host ::ng-deep ui-side-sheet.navbar-sheet>.side-sheet-container>.mat-drawer.side-sheet-content{width:320px!important}}:host ::ng-deep ui-side-sheet.navbar-sheet>.side-sheet-container>.mat-drawer.side-sheet-content .mat-drawer-inner-container{display:flex;flex-direction:column;overflow:hidden}:host ::ng-deep ui-side-sheet.navbar-sheet>.side-sheet-container>.mat-drawer.side-sheet-content .mat-drawer-inner-container ui-mobile-navbar-side-sheet{flex:1 1 auto;min-height:0}:host ::ng-deep ui-side-sheet.navbar-sheet>.side-sheet-container>.mat-drawer.side-sheet-content .header{flex:0 0 auto;height:64px;padding:0 16px 0 24px!important;border-bottom:1px solid #d3d3d3;display:flex;align-items:center}:host ::ng-deep ui-side-sheet.navbar-sheet>.side-sheet-container>.mat-drawer.side-sheet-content .header .title{margin-right:0}:host ::ng-deep ui-side-sheet.navbar-sheet>.side-sheet-container>.mat-drawer.side-sheet-content .header .title span{font-size:20px;line-height:26px;font-weight:700}.mat-toolbar{height:80px;background-color:#fff!important}.mat-toolbar .custom-toolbar{height:100%;background-color:#fff;flex:1 1 auto;box-sizing:content-box;max-width:1312px;min-width:0;padding:0 20px;gap:16px;justify-content:space-between}@media(min-width:960px){.mat-toolbar .custom-toolbar{padding:0 40px}}@media(min-width:1280px){.mat-toolbar .custom-toolbar{padding:0 64px}}@media(max-width:600px){.mat-toolbar .custom-toolbar{padding:0 24px}}.mat-toolbar .custom-toolbar .brand{display:flex;align-items:center;gap:16px}.mat-toolbar .custom-toolbar ui-logo.logo{cursor:pointer;align-self:center;display:flex;flex-shrink:0}.mat-toolbar .custom-toolbar .navigation{height:100%}.mat-toolbar .custom-toolbar .navigation a{display:flex;align-items:center;height:100%;background:#fff;cursor:pointer;color:#000;text-decoration:none;white-space:nowrap}.mat-toolbar .custom-toolbar .navigation a:hover{text-decoration:none}.mat-toolbar .custom-toolbar .navigation a.active{border-top:2px solid #276678}.mat-toolbar .custom-toolbar .navigation a.active span{font-weight:700}.mat-toolbar .custom-toolbar .navigation a span{width:100%;text-align:center;font-weight:400;font-size:14px;line-height:16px}.mat-toolbar .custom-toolbar .navigation a span:after{content:attr(data-text);content:attr(data-text)/\"\";display:block;height:0;overflow:hidden;visibility:hidden;font-weight:700;pointer-events:none}.mat-toolbar .custom-toolbar .actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0}.mat-toolbar .custom-toolbar .actions .profile-menu{font-weight:600;font-size:14px;height:100%}.mat-toolbar .custom-toolbar .actions .profile-menu:has(ui-avatar){min-width:auto;padding-right:2px}.mat-toolbar .custom-toolbar .actions .profile-menu mat-icon{font-size:16px;position:relative;top:3px;left:3px}.mat-toolbar .custom-toolbar .actions .profile-button-content{display:flex;align-items:center;flex-wrap:nowrap}.mat-toolbar .custom-toolbar .actions .profile-button-content ui-avatar{position:relative}.mat-toolbar .custom-toolbar .actions .profile-button-content ui-avatar.opened:after{position:absolute;content:\"\";width:40px;height:40px;left:-2px;top:-2px;z-index:-1;border-radius:100%;background:#f4f4f4}.mat-toolbar[theme=dark],.mat-toolbar[theme=light]{display:flex;justify-content:center;width:100%;height:64px;padding:0;border-bottom:1px solid #d3d3d3}.mat-toolbar[theme=dark] .actions,.mat-toolbar[theme=light] .actions{color:#242424}.mat-toolbar[theme=dark] .actions ::ng-deep .mat-mdc-button .mdc-button__label,.mat-toolbar[theme=light] .actions ::ng-deep .mat-mdc-button .mdc-button__label{font-weight:400}.mat-toolbar[theme=dark] ui-icon,.mat-toolbar[theme=light] ui-icon{margin-left:8px}.mat-toolbar[theme=dark] ui-icon.open,.mat-toolbar[theme=light] ui-icon.open{transform:rotate(180deg)}.mat-toolbar[theme=dark] .navigation,.mat-toolbar[theme=light] .navigation{gap:2px}.mat-toolbar[theme=dark] .navigation a,.mat-toolbar[theme=light] .navigation a{padding:16px 24px;border-bottom:2px solid transparent;position:relative;transition:border-bottom-color .15s ease-in}.mat-toolbar[theme=dark] .navigation a ui-badge,.mat-toolbar[theme=light] .navigation a ui-badge{position:absolute;right:-12px;top:0;z-index:1}.mat-toolbar[theme=dark] .navigation a ui-badge ::ng-deep .badge-container-notification,.mat-toolbar[theme=light] .navigation a ui-badge ::ng-deep .badge-container-notification{position:absolute;right:16px;top:8px;font-size:14px}.mat-toolbar[theme=dark] .navigation a.active,.mat-toolbar[theme=light] .navigation a.active{border-top:unset!important;border-bottom:2px solid #d410aa}.mat-toolbar[theme=dark] .navigation a:hover,.mat-toolbar[theme=light] .navigation a:hover{border-top:unset!important;border-bottom:2px solid #242424}@media(max-width:600px){.mat-toolbar[theme=dark] ui-button,.mat-toolbar[theme=light] ui-button{height:48px}}.custom-actions{display:flex;align-items:center;height:64px;min-width:0;overflow:hidden}.row{display:flex;flex-direction:row}.menu-item{display:flex;align-items:center}.menu-item ui-icon{margin-right:16px}\n"] }]
-        }], propDecorators: { routes: [{ type: i0.Input, args: [{ isSignal: true, alias: "routes", required: false }] }], activedRoute: [{ type: i0.Input, args: [{ isSignal: true, alias: "activedRoute", required: false }] }], userName: [{ type: i0.Input, args: [{ isSignal: true, alias: "userName", required: false }] }], email: [{ type: i0.Input, args: [{ isSignal: true, alias: "email", required: false }] }], menuItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuItems", required: false }] }], applicationTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "applicationTheme", required: false }] }], contentTemplateRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentTemplateRef", required: false }] }], userInfoExtraTemplateRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "userInfoExtraTemplateRef", required: false }] }], menuContentTemplateRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuContentTemplateRef", required: false }] }], mobileBreakpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileBreakpoint", required: false }] }], collapseBreakpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseBreakpoint", required: false }] }], isAvatar: [{ type: i0.Input, args: [{ isSignal: true, alias: "isAvatar", required: false }] }], menuClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuClass", required: false }] }], navigateEvent: [{ type: i0.Output, args: ["navigateEvent"] }], menuItemClicked: [{ type: i0.Output, args: ["menuItemClicked"] }], logoutEvent: [{ type: i0.Output, args: ["logoutEvent"] }], menuState: [{ type: i0.Output, args: ["menuState"] }] } });
-
-class NavbarComponentModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: NavbarComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.25", ngImport: i0, type: NavbarComponentModule, imports: [CommonModule,
-            MatToolbarModule,
-            MatIconModule,
-            MatButtonModule,
-            MatRippleModule,
-            MatMenuModule,
-            LogoComponentModule,
-            IconComponentModule,
-            UiTranslatePipe,
-            AvatarComponentModule,
-            SideSheetComponentModule,
-            ButtonComponentModule,
-            MobileNavbarSideSheetComponent,
-            BadgeComponentModule,
-            NavbarComponent], exports: [NavbarComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: NavbarComponentModule, imports: [CommonModule,
-            MatToolbarModule,
-            MatIconModule,
-            MatButtonModule,
-            MatRippleModule,
-            MatMenuModule,
-            LogoComponentModule,
-            IconComponentModule,
-            AvatarComponentModule,
-            SideSheetComponentModule,
-            ButtonComponentModule,
-            MobileNavbarSideSheetComponent,
-            BadgeComponentModule,
-            NavbarComponent] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: NavbarComponentModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        MatToolbarModule,
-                        MatIconModule,
-                        MatButtonModule,
-                        MatRippleModule,
-                        MatMenuModule,
-                        LogoComponentModule,
-                        IconComponentModule,
-                        UiTranslatePipe,
-                        AvatarComponentModule,
-                        SideSheetComponentModule,
-                        ButtonComponentModule,
-                        MobileNavbarSideSheetComponent,
-                        BadgeComponentModule,
-                        NavbarComponent,
-                    ],
-                    exports: [NavbarComponent],
-                }]
-        }] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+import { BreakpointObserver } from "@angular/cdk/layout";
+import { AsyncPipe, CommonModule, NgClass, NgTemplateOutlet } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, NgModule, computed, effect, inject, input, output, signal } from "@angular/core";
+import { toObservable, toSignal } from "@angular/core/rxjs-interop";
+import { MatButton, MatButtonModule } from "@angular/material/button";
+import { MatIcon, MatIconModule } from "@angular/material/icon";
+import { MatMenu, MatMenuItem, MatMenuModule, MatMenuTrigger } from "@angular/material/menu";
+import { MatToolbar, MatToolbarModule } from "@angular/material/toolbar";
+import { Subject, map, switchMap, take } from "rxjs";
+import * as i1$1 from "@testgorilla/tgo-ui/components/avatar";
+import { AvatarComponent, AvatarComponentModule, AvatarSize } from "@testgorilla/tgo-ui/components/avatar";
+import { BadgeComponent, BadgeComponentModule } from "@testgorilla/tgo-ui/components/badge";
+import * as i2$1 from "@testgorilla/tgo-ui/components/button";
+import { ButtonComponent, ButtonComponentModule } from "@testgorilla/tgo-ui/components/button";
+import { ScreenBreakpoints, UiTranslatePipe } from "@testgorilla/tgo-ui/components/core";
+import * as i2 from "@testgorilla/tgo-ui/components/icon";
+import { IconComponentModule } from "@testgorilla/tgo-ui/components/icon";
+import { LogoComponent, LogoComponentModule, LogoTypeEnum } from "@testgorilla/tgo-ui/components/logo";
+import * as i1 from "@testgorilla/tgo-ui/components/side-sheet";
+import { SideSheetComponentModule, SideSheetService } from "@testgorilla/tgo-ui/components/side-sheet";
+import { AccordionComponentModule } from "@testgorilla/tgo-ui/components/accordion";
+import { MatRippleModule } from "@angular/material/core";
+var MobileNavbarSideSheetComponent = class MobileNavbarSideSheetComponent {
+	constructor() {
+		this.routes = input([], ...ngDevMode ? [{ debugName: "routes" }] : /* istanbul ignore next */ []);
+		this.activedRoute = input("", ...ngDevMode ? [{ debugName: "activedRoute" }] : /* istanbul ignore next */ []);
+		this.email = input("", ...ngDevMode ? [{ debugName: "email" }] : /* istanbul ignore next */ []);
+		this.userName = input("", ...ngDevMode ? [{ debugName: "userName" }] : /* istanbul ignore next */ []);
+		this.menuItems = input([], ...ngDevMode ? [{ debugName: "menuItems" }] : /* istanbul ignore next */ []);
+		this.contentTemplateRef = input(...ngDevMode ? [void 0, { debugName: "contentTemplateRef" }] : /* istanbul ignore next */ []);
+		this.userInfoExtraTemplateRef = input(...ngDevMode ? [void 0, { debugName: "userInfoExtraTemplateRef" }] : /* istanbul ignore next */ []);
+		this.menuContentTemplateRef = input(...ngDevMode ? [void 0, { debugName: "menuContentTemplateRef" }] : /* istanbul ignore next */ []);
+		this.isDesktop = input(false, ...ngDevMode ? [{ debugName: "isDesktop" }] : /* istanbul ignore next */ []);
+		this.applicationTheme = input("light", ...ngDevMode ? [{ debugName: "applicationTheme" }] : /* istanbul ignore next */ []);
+		this.navigateEvent = output();
+		this.menuItemClicked = output();
+		this.logoutEvent = output();
+		this.translationContext = "NAVBAR.";
+		this.avatarSize = AvatarSize;
+		this.activeRoutesMap = computed(() => {
+			const currentRoute = this.activedRoute();
+			return new Map(this.routes().map((route) => [route.id, currentRoute?.startsWith(route.id)]));
+		}, ...ngDevMode ? [{ debugName: "activeRoutesMap" }] : /* istanbul ignore next */ []);
+	}
+	navigate(routeId) {
+		this.navigateEvent.emit(`/${routeId}`);
+	}
+	logout() {
+		this.logoutEvent.emit();
+	}
+	clickMenuItem(id) {
+		this.menuItemClicked.emit(id);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: MobileNavbarSideSheetComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.4",
+			type: MobileNavbarSideSheetComponent,
+			isStandalone: true,
+			selector: "ui-mobile-navbar-side-sheet",
+			inputs: {
+				routes: {
+					classPropertyName: "routes",
+					publicName: "routes",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				activedRoute: {
+					classPropertyName: "activedRoute",
+					publicName: "activedRoute",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				email: {
+					classPropertyName: "email",
+					publicName: "email",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				userName: {
+					classPropertyName: "userName",
+					publicName: "userName",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				menuItems: {
+					classPropertyName: "menuItems",
+					publicName: "menuItems",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				contentTemplateRef: {
+					classPropertyName: "contentTemplateRef",
+					publicName: "contentTemplateRef",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				userInfoExtraTemplateRef: {
+					classPropertyName: "userInfoExtraTemplateRef",
+					publicName: "userInfoExtraTemplateRef",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				menuContentTemplateRef: {
+					classPropertyName: "menuContentTemplateRef",
+					publicName: "menuContentTemplateRef",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				isDesktop: {
+					classPropertyName: "isDesktop",
+					publicName: "isDesktop",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				applicationTheme: {
+					classPropertyName: "applicationTheme",
+					publicName: "applicationTheme",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			outputs: {
+				navigateEvent: "navigateEvent",
+				menuItemClicked: "menuItemClicked",
+				logoutEvent: "logoutEvent"
+			},
+			ngImport: i0,
+			template: "<div class=\"mobile-navbar-container\" [ngClass]=\"{ desktop: isDesktop() }\">\n  @if (isDesktop()) {\n    <ng-container [ngTemplateOutlet]=\"userInfo\"></ng-container>\n  }\n\n  @if (menuContentTemplateRef()) {\n    <ng-container [ngTemplateOutlet]=\"menuContentTemplateRef()!\"></ng-container>\n  }\n\n  @if (!isDesktop()) {\n    <div class=\"routes\">\n      @for (route of routes(); track route) {\n        <div\n          [attr.data-testid]=\"route.id\"\n          data-test-role=\"nav-route\"\n          tabindex=\"0\"\n          (click)=\"navigate(route.id)\"\n          (keydown.enter)=\"navigate(route.id)\"\n          class=\"route\"\n          [ngClass]=\"{ active: activeRoutesMap().get(route.id) }\"\n        >\n          <span>{{ route.title }}</span>\n        </div>\n      }\n    </div>\n  }\n\n  <div class=\"settings\">\n    @for (e of menuItems(); track e) {\n      @if (e) {\n        <div class=\"menu-item\">\n          <ui-button\n            [attr.data-testid]=\"e.id\"\n            data-test-role=\"menu-item\"\n            [applicationTheme]=\"applicationTheme()\"\n            [fullWidth]=\"true\"\n            [disabledScaleOnClick]=\"true\"\n            [variant]=\"'menuCell'\"\n            iconPosition=\"left\"\n            [iconName]=\"e.icon\"\n            [label]=\"e.text\"\n            (buttonClickEvent)=\"clickMenuItem(e.id)\"\n            (keydown.Tab)=\"$event.stopPropagation()\"\n            (keydown.shift.tab)=\"$event.stopPropagation()\"\n            [ariaLabel]=\"e.text + '--' + e.text\"\n          ></ui-button>\n        </div>\n      }\n    }\n  </div>\n</div>\n\n<div class=\"bottom-content\" [ngClass]=\"{ desktop: isDesktop() }\">\n  @if (!isDesktop() && contentTemplateRef()) {\n    <ng-container [ngTemplateOutlet]=\"contentTemplateRef()!\"></ng-container>\n  }\n  @if (isDesktop()) {\n    <div class=\"menu-item\">\n      <ui-button\n        data-testid=\"logout-button\"\n        [applicationTheme]=\"applicationTheme()\"\n        [fullWidth]=\"true\"\n        [disabledScaleOnClick]=\"true\"\n        [variant]=\"'menuCell'\"\n        iconPosition=\"left\"\n        [iconName]=\"'Logout-in-line'\"\n        [label]=\"(translationContext + 'LOG_OUT' | uiTranslate | async)!\"\n        (buttonClickEvent)=\"logout()\"\n        (keydown.Tab)=\"$event.stopPropagation()\"\n        (keydown.shift.tab)=\"$event.stopPropagation()\"\n      ></ui-button>\n    </div>\n  } @else {\n    <ng-container [ngTemplateOutlet]=\"userInfo\"></ng-container>\n  }\n</div>\n\n<ng-template #userInfo>\n  <div class=\"user-info\" [ngClass]=\"{ desktop: isDesktop() }\">\n    <ui-avatar [size]=\"avatarSize.MEDIUM\" [name]=\"userName()\"></ui-avatar>\n    <div class=\"details-container\">\n      <div class=\"name-container\">\n        <span class=\"user-name dd-privacy-mask\">{{ userName() }}</span>\n        <span class=\"user-email dd-privacy-mask\">{{ email() }}</span>\n        @if (userInfoExtraTemplateRef()) {\n          <ng-container [ngTemplateOutlet]=\"userInfoExtraTemplateRef()!\"></ng-container>\n        }\n      </div>\n      @if (!isDesktop()) {\n        <ui-button\n          data-testid=\"logout-button\"\n          [tooltip]=\"(translationContext + 'LOG_OUT' | uiTranslate | async)!\"\n          [iconName]=\"'Logout-in-line'\"\n          [applicationTheme]=\"'light'\"\n          [variant]=\"'icon-button'\"\n          (click)=\"logout()\"\n        ></ui-button>\n      }\n    </div>\n  </div>\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;height:100%}.mobile-navbar-container{padding-top:16px;flex:1 1 auto;min-height:0;overflow-y:auto}.mobile-navbar-container.desktop{min-width:340px}.mobile-navbar-container .routes .route{display:flex;align-items:center;gap:8px;min-height:44px;padding:12px 24px;width:100%;box-sizing:border-box;font-size:16px;line-height:24px;cursor:pointer}.mobile-navbar-container .routes .route.active{background-color:#fff2fc;color:#a90686}.mobile-navbar-container .routes .route:hover{background-color:#fff2fc}.mobile-navbar-container .routes .route:active{background-color:#ffe6fa}.menu-item{width:100%;min-height:44px;display:flex;font-size:16px;line-height:24px;flex-direction:row;align-items:center;cursor:pointer}.menu-item ::ng-deep ui-button{width:100%}.menu-item ::ng-deep ui-button button{padding-left:24px!important}.menu-item ::ng-deep ui-button button span.icon{margin-right:16px!important}.menu-item ::ng-deep ui-button button span.icon-label-wrapper span.label{font-size:16px!important;line-height:24px!important;font-weight:400!important}.menu-item ::ng-deep ui-button button.mat-mdc-unelevated-button.menuCell:hover{background-color:#fff2fc}.menu-item ::ng-deep ui-button button.mat-mdc-unelevated-button.menuCell:active{background-color:#ffe6fa}.bottom-content{width:100%;flex:0 0 auto;display:flex;align-items:center;flex-direction:column;position:sticky;bottom:0;background:#fff;z-index:1}.bottom-content.desktop{position:relative;border-top:1px solid #d3d3d3;margin-top:16px;padding:16px 0 8px}.user-info{display:flex;align-items:center;gap:16px;padding:12px 24px;width:100%;box-sizing:border-box}.user-info.desktop{padding:0 16px;margin-bottom:16px}.user-info .details-container{display:flex;justify-content:space-between;align-items:center;width:100%;min-width:0;gap:8px}.user-info .name-container{display:flex;flex-direction:column;min-width:0}.user-info .name-container .user-name{font-size:16px;line-height:24px;font-weight:700;font-family:ModernGothic,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-info .name-container .user-email{font-size:16px;line-height:24px;color:#666;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"],
+			dependencies: [
+				{
+					kind: "directive",
+					type: NgClass,
+					selector: "[ngClass]",
+					inputs: ["class", "ngClass"]
+				},
+				{
+					kind: "ngmodule",
+					type: IconComponentModule
+				},
+				{
+					kind: "ngmodule",
+					type: MatIconModule
+				},
+				{
+					kind: "ngmodule",
+					type: MatMenuModule
+				},
+				{
+					kind: "ngmodule",
+					type: MatButtonModule
+				},
+				{
+					kind: "ngmodule",
+					type: AccordionComponentModule
+				},
+				{
+					kind: "directive",
+					type: NgTemplateOutlet,
+					selector: "[ngTemplateOutlet]",
+					inputs: [
+						"ngTemplateOutletContext",
+						"ngTemplateOutlet",
+						"ngTemplateOutletInjector"
+					]
+				},
+				{
+					kind: "ngmodule",
+					type: AvatarComponentModule
+				},
+				{
+					kind: "component",
+					type: i1$1.AvatarComponent,
+					selector: "ui-avatar",
+					inputs: [
+						"size",
+						"imageUrl",
+						"name",
+						"tooltipText",
+						"allowEdit",
+						"applicationTheme",
+						"backgroundColor"
+					],
+					outputs: ["editClick"]
+				},
+				{
+					kind: "ngmodule",
+					type: ButtonComponentModule
+				},
+				{
+					kind: "component",
+					type: i2$1.ButtonComponent,
+					selector: "ui-button",
+					inputs: [
+						"size",
+						"variant",
+						"label",
+						"iconPosition",
+						"justIcon",
+						"iconName",
+						"trailingIconName",
+						"trailingIconFilled",
+						"disabled",
+						"loading",
+						"loadingWithLabel",
+						"fullWidth",
+						"url",
+						"urlTarget",
+						"value",
+						"tooltip",
+						"isPremium",
+						"type",
+						"companyColor",
+						"buttonBadgeConfig",
+						"applicationTheme",
+						"disabledScaleOnClick",
+						"ariaLabel",
+						"ariaExpanded",
+						"ariaControls",
+						"ariaPressed",
+						"ariaRequired",
+						"ariaLabelledby",
+						"ariaDescribedby",
+						"preventDefault",
+						"hasBackground",
+						"tooltipPosition",
+						"role",
+						"iconFilled",
+						"testId"
+					],
+					outputs: ["buttonClickEvent", "buttonHoverEvent"]
+				},
+				{
+					kind: "pipe",
+					type: UiTranslatePipe,
+					name: "uiTranslate"
+				},
+				{
+					kind: "pipe",
+					type: AsyncPipe,
+					name: "async"
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: MobileNavbarSideSheetComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-mobile-navbar-side-sheet",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			imports: [
+				NgClass,
+				IconComponentModule,
+				MatIconModule,
+				MatMenuModule,
+				UiTranslatePipe,
+				MatButtonModule,
+				AccordionComponentModule,
+				NgTemplateOutlet,
+				AvatarComponentModule,
+				ButtonComponentModule,
+				AsyncPipe
+			],
+			template: "<div class=\"mobile-navbar-container\" [ngClass]=\"{ desktop: isDesktop() }\">\n  @if (isDesktop()) {\n    <ng-container [ngTemplateOutlet]=\"userInfo\"></ng-container>\n  }\n\n  @if (menuContentTemplateRef()) {\n    <ng-container [ngTemplateOutlet]=\"menuContentTemplateRef()!\"></ng-container>\n  }\n\n  @if (!isDesktop()) {\n    <div class=\"routes\">\n      @for (route of routes(); track route) {\n        <div\n          [attr.data-testid]=\"route.id\"\n          data-test-role=\"nav-route\"\n          tabindex=\"0\"\n          (click)=\"navigate(route.id)\"\n          (keydown.enter)=\"navigate(route.id)\"\n          class=\"route\"\n          [ngClass]=\"{ active: activeRoutesMap().get(route.id) }\"\n        >\n          <span>{{ route.title }}</span>\n        </div>\n      }\n    </div>\n  }\n\n  <div class=\"settings\">\n    @for (e of menuItems(); track e) {\n      @if (e) {\n        <div class=\"menu-item\">\n          <ui-button\n            [attr.data-testid]=\"e.id\"\n            data-test-role=\"menu-item\"\n            [applicationTheme]=\"applicationTheme()\"\n            [fullWidth]=\"true\"\n            [disabledScaleOnClick]=\"true\"\n            [variant]=\"'menuCell'\"\n            iconPosition=\"left\"\n            [iconName]=\"e.icon\"\n            [label]=\"e.text\"\n            (buttonClickEvent)=\"clickMenuItem(e.id)\"\n            (keydown.Tab)=\"$event.stopPropagation()\"\n            (keydown.shift.tab)=\"$event.stopPropagation()\"\n            [ariaLabel]=\"e.text + '--' + e.text\"\n          ></ui-button>\n        </div>\n      }\n    }\n  </div>\n</div>\n\n<div class=\"bottom-content\" [ngClass]=\"{ desktop: isDesktop() }\">\n  @if (!isDesktop() && contentTemplateRef()) {\n    <ng-container [ngTemplateOutlet]=\"contentTemplateRef()!\"></ng-container>\n  }\n  @if (isDesktop()) {\n    <div class=\"menu-item\">\n      <ui-button\n        data-testid=\"logout-button\"\n        [applicationTheme]=\"applicationTheme()\"\n        [fullWidth]=\"true\"\n        [disabledScaleOnClick]=\"true\"\n        [variant]=\"'menuCell'\"\n        iconPosition=\"left\"\n        [iconName]=\"'Logout-in-line'\"\n        [label]=\"(translationContext + 'LOG_OUT' | uiTranslate | async)!\"\n        (buttonClickEvent)=\"logout()\"\n        (keydown.Tab)=\"$event.stopPropagation()\"\n        (keydown.shift.tab)=\"$event.stopPropagation()\"\n      ></ui-button>\n    </div>\n  } @else {\n    <ng-container [ngTemplateOutlet]=\"userInfo\"></ng-container>\n  }\n</div>\n\n<ng-template #userInfo>\n  <div class=\"user-info\" [ngClass]=\"{ desktop: isDesktop() }\">\n    <ui-avatar [size]=\"avatarSize.MEDIUM\" [name]=\"userName()\"></ui-avatar>\n    <div class=\"details-container\">\n      <div class=\"name-container\">\n        <span class=\"user-name dd-privacy-mask\">{{ userName() }}</span>\n        <span class=\"user-email dd-privacy-mask\">{{ email() }}</span>\n        @if (userInfoExtraTemplateRef()) {\n          <ng-container [ngTemplateOutlet]=\"userInfoExtraTemplateRef()!\"></ng-container>\n        }\n      </div>\n      @if (!isDesktop()) {\n        <ui-button\n          data-testid=\"logout-button\"\n          [tooltip]=\"(translationContext + 'LOG_OUT' | uiTranslate | async)!\"\n          [iconName]=\"'Logout-in-line'\"\n          [applicationTheme]=\"'light'\"\n          [variant]=\"'icon-button'\"\n          (click)=\"logout()\"\n        ></ui-button>\n      }\n    </div>\n  </div>\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;height:100%}.mobile-navbar-container{padding-top:16px;flex:1 1 auto;min-height:0;overflow-y:auto}.mobile-navbar-container.desktop{min-width:340px}.mobile-navbar-container .routes .route{display:flex;align-items:center;gap:8px;min-height:44px;padding:12px 24px;width:100%;box-sizing:border-box;font-size:16px;line-height:24px;cursor:pointer}.mobile-navbar-container .routes .route.active{background-color:#fff2fc;color:#a90686}.mobile-navbar-container .routes .route:hover{background-color:#fff2fc}.mobile-navbar-container .routes .route:active{background-color:#ffe6fa}.menu-item{width:100%;min-height:44px;display:flex;font-size:16px;line-height:24px;flex-direction:row;align-items:center;cursor:pointer}.menu-item ::ng-deep ui-button{width:100%}.menu-item ::ng-deep ui-button button{padding-left:24px!important}.menu-item ::ng-deep ui-button button span.icon{margin-right:16px!important}.menu-item ::ng-deep ui-button button span.icon-label-wrapper span.label{font-size:16px!important;line-height:24px!important;font-weight:400!important}.menu-item ::ng-deep ui-button button.mat-mdc-unelevated-button.menuCell:hover{background-color:#fff2fc}.menu-item ::ng-deep ui-button button.mat-mdc-unelevated-button.menuCell:active{background-color:#ffe6fa}.bottom-content{width:100%;flex:0 0 auto;display:flex;align-items:center;flex-direction:column;position:sticky;bottom:0;background:#fff;z-index:1}.bottom-content.desktop{position:relative;border-top:1px solid #d3d3d3;margin-top:16px;padding:16px 0 8px}.user-info{display:flex;align-items:center;gap:16px;padding:12px 24px;width:100%;box-sizing:border-box}.user-info.desktop{padding:0 16px;margin-bottom:16px}.user-info .details-container{display:flex;justify-content:space-between;align-items:center;width:100%;min-width:0;gap:8px}.user-info .name-container{display:flex;flex-direction:column;min-width:0}.user-info .name-container .user-name{font-size:16px;line-height:24px;font-weight:700;font-family:ModernGothic,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-info .name-container .user-email{font-size:16px;line-height:24px;color:#666;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"]
+		}]
+	}],
+	propDecorators: {
+		routes: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "routes",
+				required: false
+			}]
+		}],
+		activedRoute: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "activedRoute",
+				required: false
+			}]
+		}],
+		email: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "email",
+				required: false
+			}]
+		}],
+		userName: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "userName",
+				required: false
+			}]
+		}],
+		menuItems: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "menuItems",
+				required: false
+			}]
+		}],
+		contentTemplateRef: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "contentTemplateRef",
+				required: false
+			}]
+		}],
+		userInfoExtraTemplateRef: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "userInfoExtraTemplateRef",
+				required: false
+			}]
+		}],
+		menuContentTemplateRef: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "menuContentTemplateRef",
+				required: false
+			}]
+		}],
+		isDesktop: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "isDesktop",
+				required: false
+			}]
+		}],
+		applicationTheme: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "applicationTheme",
+				required: false
+			}]
+		}],
+		navigateEvent: [{
+			type: i0.Output,
+			args: ["navigateEvent"]
+		}],
+		menuItemClicked: [{
+			type: i0.Output,
+			args: ["menuItemClicked"]
+		}],
+		logoutEvent: [{
+			type: i0.Output,
+			args: ["logoutEvent"]
+		}]
+	}
+});
+const DEFAULT_APPLICATION_THEME_TOKEN = "CANOPYUI_DEFAULT_APPLICATION_THEME";
+var NavbarComponent = class NavbarComponent {
+	constructor() {
+		this.breakpointObserver = inject(BreakpointObserver);
+		this.sideSheetService = inject(SideSheetService);
+		this.translatePipe = inject(UiTranslatePipe);
+		this.defaultAppTheme = inject(DEFAULT_APPLICATION_THEME_TOKEN, { optional: true });
+		this.routes = input([], ...ngDevMode ? [{ debugName: "routes" }] : /* istanbul ignore next */ []);
+		this.activedRoute = input("", ...ngDevMode ? [{ debugName: "activedRoute" }] : /* istanbul ignore next */ []);
+		this.userName = input("", ...ngDevMode ? [{ debugName: "userName" }] : /* istanbul ignore next */ []);
+		this.email = input("", ...ngDevMode ? [{ debugName: "email" }] : /* istanbul ignore next */ []);
+		this.menuItems = input([], ...ngDevMode ? [{ debugName: "menuItems" }] : /* istanbul ignore next */ []);
+		this.applicationTheme = input(this.defaultAppTheme ?? "light", ...ngDevMode ? [{ debugName: "applicationTheme" }] : /* istanbul ignore next */ []);
+		this.contentTemplateRef = input(...ngDevMode ? [void 0, { debugName: "contentTemplateRef" }] : /* istanbul ignore next */ []);
+		this.userInfoExtraTemplateRef = input(...ngDevMode ? [void 0, { debugName: "userInfoExtraTemplateRef" }] : /* istanbul ignore next */ []);
+		this.menuContentTemplateRef = input(...ngDevMode ? [void 0, { debugName: "menuContentTemplateRef" }] : /* istanbul ignore next */ []);
+		this.mobileBreakpoint = input(ScreenBreakpoints.MOBILE, {
+			...ngDevMode ? { debugName: "mobileBreakpoint" } : /* istanbul ignore next */ {},
+			transform: (value) => value || ScreenBreakpoints.MOBILE
+		});
+		this.collapseBreakpoint = input(ScreenBreakpoints.LARGE_TABLET, {
+			...ngDevMode ? { debugName: "collapseBreakpoint" } : /* istanbul ignore next */ {},
+			transform: (value) => value || ScreenBreakpoints.LARGE_TABLET
+		});
+		this.isAvatar = input(true, ...ngDevMode ? [{ debugName: "isAvatar" }] : /* istanbul ignore next */ []);
+		this.menuClass = input("", ...ngDevMode ? [{ debugName: "menuClass" }] : /* istanbul ignore next */ []);
+		this.navigateEvent = output();
+		this.menuItemClicked = output();
+		this.logoutEvent = output();
+		this.menuState = output();
+		this.isMobile = this.observeMaxWidth(this.mobileBreakpoint);
+		this.isCollapsed = this.observeMaxWidth(this.collapseBreakpoint);
+		this.screenSize = computed(() => {
+			if (this.isMobile()) return "mobile";
+			return this.isCollapsed() ? "tablet" : "desktop";
+		}, ...ngDevMode ? [{ debugName: "screenSize" }] : /* istanbul ignore next */ []);
+		this.isMobile$ = toObservable(this.isMobile);
+		this.isTablet$ = toObservable(this.isCollapsed);
+		this.translationContext = "NAVBAR.";
+		this.logoType = LogoTypeEnum;
+		this.AvatarSize = AvatarSize;
+		this.activeRoutesMap = computed(() => {
+			const currentRoute = this.activedRoute();
+			return new Map(this.routes().map((route) => [route.id, currentRoute?.startsWith(route.id)]));
+		}, ...ngDevMode ? [{ debugName: "activeRoutesMap" }] : /* istanbul ignore next */ []);
+		this.drawerSubscriptions = [];
+		this.isDrawerOpened = signal(false, ...ngDevMode ? [{ debugName: "isDrawerOpened" }] : /* istanbul ignore next */ []);
+		this.closeDrawerOnExpand = effect(() => {
+			if (!this.isCollapsed() && this.isDrawerOpened()) this.sideSheetService.close();
+		}, ...ngDevMode ? [{ debugName: "closeDrawerOnExpand" }] : /* istanbul ignore next */ []);
+	}
+	openMobileMenu() {
+		this.teardownDrawerSubscriptions();
+		const isSideSheetClosed$ = new Subject();
+		let title = "";
+		this.translatePipe.transform(`${this.translationContext}MENU`).pipe(take(1)).subscribe((translated) => title = translated);
+		const navbarSideSheetComponent = this.sideSheetService.open({
+			componentRef: MobileNavbarSideSheetComponent,
+			title,
+			showLogo: false,
+			closed: isSideSheetClosed$,
+			inputs: {
+				userName: this.userName(),
+				menuItems: this.menuItems(),
+				activedRoute: this.activedRoute(),
+				routes: this.routes(),
+				email: this.email(),
+				contentTemplateRef: this.contentTemplateRef(),
+				userInfoExtraTemplateRef: this.userInfoExtraTemplateRef(),
+				menuContentTemplateRef: this.menuContentTemplateRef(),
+				applicationTheme: this.applicationTheme()
+			}
+		});
+		this.drawerSubscriptions = [
+			navbarSideSheetComponent.logoutEvent.subscribe(() => {
+				this.logoutEvent.emit();
+				isSideSheetClosed$.next();
+			}),
+			navbarSideSheetComponent.menuItemClicked.subscribe((value) => {
+				this.menuItemClicked.emit(value);
+				isSideSheetClosed$.next();
+			}),
+			navbarSideSheetComponent.navigateEvent.subscribe((value) => {
+				this.navigateEvent.emit(value);
+				isSideSheetClosed$.next();
+			})
+		];
+	}
+	closeMenu() {
+		if (this.isCollapsed() && this.isDrawerOpened()) this.sideSheetService.close();
+	}
+	navigate(routeId) {
+		this.navigateEvent.emit(`/${routeId}`);
+	}
+	logout() {
+		this.logoutEvent.emit();
+	}
+	clickMenuItem(id) {
+		this.menuItemClicked.emit(id);
+	}
+	onChangeMenuState(isOpened, screenSize) {
+		this.menuState.emit({
+			isOpened,
+			screenSize
+		});
+	}
+	onSideSheetOpenChange(isOpened) {
+		this.isDrawerOpened.set(isOpened);
+		if (!isOpened) this.teardownDrawerSubscriptions();
+		this.onChangeMenuState(isOpened, this.screenSize());
+	}
+	teardownDrawerSubscriptions() {
+		this.drawerSubscriptions.forEach((subscription) => subscription.unsubscribe());
+		this.drawerSubscriptions = [];
+	}
+	observeMaxWidth(breakpointPx) {
+		return toSignal(toObservable(breakpointPx).pipe(switchMap((breakpoint) => this.breakpointObserver.observe(`(max-width: ${breakpoint}px)`)), map((state) => state.matches)), { initialValue: false });
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: NavbarComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.4",
+			type: NavbarComponent,
+			isStandalone: true,
+			selector: "ui-navbar",
+			inputs: {
+				routes: {
+					classPropertyName: "routes",
+					publicName: "routes",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				activedRoute: {
+					classPropertyName: "activedRoute",
+					publicName: "activedRoute",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				userName: {
+					classPropertyName: "userName",
+					publicName: "userName",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				email: {
+					classPropertyName: "email",
+					publicName: "email",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				menuItems: {
+					classPropertyName: "menuItems",
+					publicName: "menuItems",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				applicationTheme: {
+					classPropertyName: "applicationTheme",
+					publicName: "applicationTheme",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				contentTemplateRef: {
+					classPropertyName: "contentTemplateRef",
+					publicName: "contentTemplateRef",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				userInfoExtraTemplateRef: {
+					classPropertyName: "userInfoExtraTemplateRef",
+					publicName: "userInfoExtraTemplateRef",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				menuContentTemplateRef: {
+					classPropertyName: "menuContentTemplateRef",
+					publicName: "menuContentTemplateRef",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				mobileBreakpoint: {
+					classPropertyName: "mobileBreakpoint",
+					publicName: "mobileBreakpoint",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				collapseBreakpoint: {
+					classPropertyName: "collapseBreakpoint",
+					publicName: "collapseBreakpoint",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				isAvatar: {
+					classPropertyName: "isAvatar",
+					publicName: "isAvatar",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				menuClass: {
+					classPropertyName: "menuClass",
+					publicName: "menuClass",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			outputs: {
+				navigateEvent: "navigateEvent",
+				menuItemClicked: "menuItemClicked",
+				logoutEvent: "logoutEvent",
+				menuState: "menuState"
+			},
+			providers: [UiTranslatePipe],
+			ngImport: i0,
+			template: "<ui-side-sheet\n  class=\"navbar-sheet\"\n  [applicationTheme]=\"applicationTheme()\"\n  (openChange)=\"onSideSheetOpenChange($event)\"\n  position=\"end\"\n>\n  <mat-toolbar [attr.theme]=\"applicationTheme()\">\n    <div class=\"custom-toolbar row\">\n      <div class=\"brand\">\n        <ui-logo\n          [applicationTheme]=\"applicationTheme()\"\n          class=\"logo\"\n          (click)=\"navigate('')\"\n          [allowResizing]=\"true\"\n          [width]=\"isMobile() ? 27 : 160\"\n          [type]=\"isMobile() ? logoType.PRIMARY_BRANDMARK_PINK : logoType.DEFAULT\"\n        ></ui-logo>\n\n        @if (!isCollapsed()) {\n          <div class=\"navigation row\">\n            @for (route of routes(); track route) {\n              <a\n                (click)=\"navigate(route.id); $event.preventDefault()\"\n                [href]=\"route.id\"\n                [attr.data-testid]=\"route.id\"\n                data-test-role=\"nav-route\"\n                [ngClass]=\"{ active: activeRoutesMap().get(route.id) }\"\n              >\n                @if (route?.badgeOptions) {\n                  <ui-badge\n                    [label]=\"route.badgeOptions!.text ?? ''\"\n                    [rebrandColor]=\"route.badgeOptions!.color\"\n                    [variant]=\"route.badgeOptions!.variant ?? 'primary'\"\n                    [notificationsAmount]=\"route.badgeOptions!.notificationsAmount ?? 0\"\n                  ></ui-badge>\n                }\n                <span [attr.data-text]=\"route.title\">{{ route.title }}</span>\n              </a>\n            }\n          </div>\n        }\n      </div>\n\n      <div class=\"actions\">\n        <div class=\"custom-actions\">\n          <ng-content select=\"[actions]\"></ng-content>\n        </div>\n\n        @if (isCollapsed()) {\n          <ui-button\n            data-testid=\"navbar-menu-button\"\n            (click)=\"openMobileMenu()\"\n            [variant]=\"'text'\"\n            [companyColor]=\"'#242424'\"\n            [applicationTheme]=\"'light'\"\n            [iconName]=\"'Menu-burger-in-line'\"\n            [justIcon]=\"true\"\n          ></ui-button>\n        } @else {\n          <button\n            mat-button\n            class=\"profile-menu\"\n            [disableRipple]=\"applicationTheme() !== 'classic'\"\n            (menuOpened)=\"onChangeMenuState(true, 'desktop')\"\n            (menuClosed)=\"onChangeMenuState(false, 'desktop')\"\n            [matMenuTriggerFor]=\"menu\"\n          >\n            <div class=\"profile-button-content\">\n              @if (isAvatar()) {\n                <ui-avatar\n                  data-testid=\"profile-button\"\n                  [ngClass]=\"{ opened: menu._panelAnimationState !== 'void' }\"\n                  [applicationTheme]=\"applicationTheme()\"\n                  [name]=\"userName()\"\n                  [size]=\"AvatarSize.SMALL_MEDIUM\"\n                ></ui-avatar>\n              } @else {\n                {{ userName() }}\n              }\n\n              @if (applicationTheme() === 'classic') {\n                <mat-icon iconPositionEnd>expand_more</mat-icon>\n              } @else {\n                @if (!isAvatar()) {\n                  <ui-icon\n                    [size]=\"'24'\"\n                    [name]=\"\n                      menu._panelAnimationState === 'void' ? 'Arrow-chevron-down-filled' : 'Arrow-chevron-up-filled'\n                    \"\n                    [applicationTheme]=\"applicationTheme()\"\n                  ></ui-icon>\n                }\n              }\n            </div>\n          </button>\n        }\n      </div>\n    </div>\n  </mat-toolbar>\n\n  <ng-content></ng-content>\n\n  <mat-menu [class]=\"menuClass()\" #menu=\"matMenu\">\n    @if (applicationTheme() === 'classic') {\n      @for (e of menuItems(); track e) {\n        <button\n          mat-menu-item\n          (click)=\"clickMenuItem(e.id)\"\n          [attr.data-testid]=\"e.id\"\n          data-test-role=\"profile-menu-item\"\n        >\n          <div class=\"menu-item\">\n            @if (e?.icon) {\n              <ui-icon [name]=\"e.icon\" size=\"24\"></ui-icon>\n            }\n            {{ e.text }}\n          </div>\n        </button>\n      }\n      <button data-testid=\"logout-button\" mat-menu-item (click)=\"logout()\">\n        <mat-icon>power_settings_new</mat-icon>\n        {{ translationContext + 'LOG_OUT' | uiTranslate | async }}\n      </button>\n    } @else {\n      <ui-mobile-navbar-side-sheet\n        [isDesktop]=\"true\"\n        [menuItems]=\"menuItems()\"\n        [userName]=\"userName()\"\n        [routes]=\"routes()\"\n        [activedRoute]=\"activedRoute()\"\n        [email]=\"email()\"\n        [applicationTheme]=\"applicationTheme()\"\n        [contentTemplateRef]=\"contentTemplateRef()\"\n        [userInfoExtraTemplateRef]=\"userInfoExtraTemplateRef()\"\n        [menuContentTemplateRef]=\"menuContentTemplateRef()\"\n        (menuItemClicked)=\"clickMenuItem($event)\"\n        (logoutEvent)=\"logout()\"\n      >\n      </ui-mobile-navbar-side-sheet>\n    }\n  </mat-menu>\n</ui-side-sheet>\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{height:100%}:host ::ng-deep ui-side-sheet.navbar-sheet>.side-sheet-container{display:block;height:100%;position:relative!important;overflow:hidden}:host ::ng-deep ui-side-sheet.navbar-sheet>.side-sheet-container:has(>.side-sheet-content.mat-drawer-opened){min-height:100vh;min-height:100dvh}:host ::ng-deep ui-side-sheet.navbar-sheet>.side-sheet-container>.mat-drawer.side-sheet-content{width:360px!important;padding:0!important;background:#fff!important}@media(max-width:600px){:host ::ng-deep ui-side-sheet.navbar-sheet>.side-sheet-container>.mat-drawer.side-sheet-content{width:320px!important}}:host ::ng-deep ui-side-sheet.navbar-sheet>.side-sheet-container>.mat-drawer.side-sheet-content .mat-drawer-inner-container{display:flex;flex-direction:column;overflow:hidden}:host ::ng-deep ui-side-sheet.navbar-sheet>.side-sheet-container>.mat-drawer.side-sheet-content .mat-drawer-inner-container ui-mobile-navbar-side-sheet{flex:1 1 auto;min-height:0}:host ::ng-deep ui-side-sheet.navbar-sheet>.side-sheet-container>.mat-drawer.side-sheet-content .header{flex:0 0 auto;height:64px;padding:0 16px 0 24px!important;border-bottom:1px solid #d3d3d3;display:flex;align-items:center}:host ::ng-deep ui-side-sheet.navbar-sheet>.side-sheet-container>.mat-drawer.side-sheet-content .header .title{margin-right:0}:host ::ng-deep ui-side-sheet.navbar-sheet>.side-sheet-container>.mat-drawer.side-sheet-content .header .title span{font-size:20px;line-height:26px;font-weight:700}.mat-toolbar{height:80px;background-color:#fff!important}.mat-toolbar .custom-toolbar{height:100%;background-color:#fff;flex:1 1 auto;box-sizing:content-box;max-width:1312px;min-width:0;padding:0 20px;gap:16px;justify-content:space-between}@media(min-width:960px){.mat-toolbar .custom-toolbar{padding:0 40px}}@media(min-width:1280px){.mat-toolbar .custom-toolbar{padding:0 64px}}@media(max-width:600px){.mat-toolbar .custom-toolbar{padding:0 24px}}.mat-toolbar .custom-toolbar .brand{display:flex;align-items:center;gap:16px}.mat-toolbar .custom-toolbar ui-logo.logo{cursor:pointer;align-self:center;display:flex;flex-shrink:0}.mat-toolbar .custom-toolbar .navigation{height:100%}.mat-toolbar .custom-toolbar .navigation a{display:flex;align-items:center;height:100%;background:#fff;cursor:pointer;color:#000;text-decoration:none;white-space:nowrap}.mat-toolbar .custom-toolbar .navigation a:hover{text-decoration:none}.mat-toolbar .custom-toolbar .navigation a.active{border-top:2px solid #276678}.mat-toolbar .custom-toolbar .navigation a.active span{font-weight:700}.mat-toolbar .custom-toolbar .navigation a span{width:100%;text-align:center;font-weight:400;font-size:14px;line-height:16px}.mat-toolbar .custom-toolbar .navigation a span:after{content:attr(data-text);content:attr(data-text)/\"\";display:block;height:0;overflow:hidden;visibility:hidden;font-weight:700;pointer-events:none}.mat-toolbar .custom-toolbar .actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0}.mat-toolbar .custom-toolbar .actions .profile-menu{font-weight:600;font-size:14px;height:100%}.mat-toolbar .custom-toolbar .actions .profile-menu:has(ui-avatar){min-width:auto;padding-right:2px}.mat-toolbar .custom-toolbar .actions .profile-menu mat-icon{font-size:16px;position:relative;top:3px;left:3px}.mat-toolbar .custom-toolbar .actions .profile-button-content{display:flex;align-items:center;flex-wrap:nowrap}.mat-toolbar .custom-toolbar .actions .profile-button-content ui-avatar{position:relative}.mat-toolbar .custom-toolbar .actions .profile-button-content ui-avatar.opened:after{position:absolute;content:\"\";width:40px;height:40px;left:-2px;top:-2px;z-index:-1;border-radius:100%;background:#f4f4f4}.mat-toolbar[theme=dark],.mat-toolbar[theme=light]{display:flex;justify-content:center;width:100%;height:64px;padding:0;border-bottom:1px solid #d3d3d3}.mat-toolbar[theme=dark] .actions,.mat-toolbar[theme=light] .actions{color:#242424}.mat-toolbar[theme=dark] .actions ::ng-deep .mat-mdc-button .mdc-button__label,.mat-toolbar[theme=light] .actions ::ng-deep .mat-mdc-button .mdc-button__label{font-weight:400}.mat-toolbar[theme=dark] ui-icon,.mat-toolbar[theme=light] ui-icon{margin-left:8px}.mat-toolbar[theme=dark] ui-icon.open,.mat-toolbar[theme=light] ui-icon.open{transform:rotate(180deg)}.mat-toolbar[theme=dark] .navigation,.mat-toolbar[theme=light] .navigation{gap:2px}.mat-toolbar[theme=dark] .navigation a,.mat-toolbar[theme=light] .navigation a{padding:16px 24px;border-bottom:2px solid transparent;position:relative;transition:border-bottom-color .15s ease-in}.mat-toolbar[theme=dark] .navigation a ui-badge,.mat-toolbar[theme=light] .navigation a ui-badge{position:absolute;right:-12px;top:0;z-index:1}.mat-toolbar[theme=dark] .navigation a ui-badge ::ng-deep .badge-container-notification,.mat-toolbar[theme=light] .navigation a ui-badge ::ng-deep .badge-container-notification{position:absolute;right:16px;top:8px;font-size:14px}.mat-toolbar[theme=dark] .navigation a.active,.mat-toolbar[theme=light] .navigation a.active{border-top:unset!important;border-bottom:2px solid #d410aa}.mat-toolbar[theme=dark] .navigation a:hover,.mat-toolbar[theme=light] .navigation a:hover{border-top:unset!important;border-bottom:2px solid #242424}@media(max-width:600px){.mat-toolbar[theme=dark] ui-button,.mat-toolbar[theme=light] ui-button{height:48px}}.custom-actions{display:flex;align-items:center;height:64px;min-width:0;overflow:hidden}.row{display:flex;flex-direction:row}.menu-item{display:flex;align-items:center}.menu-item ui-icon{margin-right:16px}\n"],
+			dependencies: [
+				{
+					kind: "ngmodule",
+					type: SideSheetComponentModule
+				},
+				{
+					kind: "component",
+					type: i1.SideSheetComponent,
+					selector: "ui-side-sheet",
+					inputs: [
+						"position",
+						"applicationTheme",
+						"testId"
+					],
+					outputs: ["openChange"]
+				},
+				{
+					kind: "component",
+					type: MatToolbar,
+					selector: "mat-toolbar",
+					inputs: ["color"],
+					exportAs: ["matToolbar"]
+				},
+				{
+					kind: "component",
+					type: LogoComponent,
+					selector: "ui-logo",
+					inputs: [
+						"type",
+						"applicationTheme",
+						"label",
+						"width",
+						"allowResizing"
+					]
+				},
+				{
+					kind: "component",
+					type: ButtonComponent,
+					selector: "ui-button",
+					inputs: [
+						"size",
+						"variant",
+						"label",
+						"iconPosition",
+						"justIcon",
+						"iconName",
+						"trailingIconName",
+						"trailingIconFilled",
+						"disabled",
+						"loading",
+						"loadingWithLabel",
+						"fullWidth",
+						"url",
+						"urlTarget",
+						"value",
+						"tooltip",
+						"isPremium",
+						"type",
+						"companyColor",
+						"buttonBadgeConfig",
+						"applicationTheme",
+						"disabledScaleOnClick",
+						"ariaLabel",
+						"ariaExpanded",
+						"ariaControls",
+						"ariaPressed",
+						"ariaRequired",
+						"ariaLabelledby",
+						"ariaDescribedby",
+						"preventDefault",
+						"hasBackground",
+						"tooltipPosition",
+						"role",
+						"iconFilled",
+						"testId"
+					],
+					outputs: ["buttonClickEvent", "buttonHoverEvent"]
+				},
+				{
+					kind: "directive",
+					type: NgClass,
+					selector: "[ngClass]",
+					inputs: ["class", "ngClass"]
+				},
+				{
+					kind: "component",
+					type: BadgeComponent,
+					selector: "ui-badge",
+					inputs: [
+						"label",
+						"staticLabel",
+						"icon",
+						"iconColor",
+						"trailingIcon",
+						"trailingIconColor",
+						"color",
+						"variant",
+						"notificationsAmount",
+						"applicationTheme",
+						"rebrandColor",
+						"truncateLabel",
+						"enableAnimation"
+					]
+				},
+				{
+					kind: "component",
+					type: MatButton,
+					selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ",
+					inputs: ["matButton"],
+					exportAs: ["matButton", "matAnchor"]
+				},
+				{
+					kind: "directive",
+					type: MatMenuTrigger,
+					selector: "[mat-menu-trigger-for], [matMenuTriggerFor]",
+					inputs: [
+						"mat-menu-trigger-for",
+						"matMenuTriggerFor",
+						"matMenuTriggerData",
+						"matMenuTriggerRestoreFocus"
+					],
+					outputs: [
+						"menuOpened",
+						"onMenuOpen",
+						"menuClosed",
+						"onMenuClose"
+					],
+					exportAs: ["matMenuTrigger"]
+				},
+				{
+					kind: "component",
+					type: AvatarComponent,
+					selector: "ui-avatar",
+					inputs: [
+						"size",
+						"imageUrl",
+						"name",
+						"tooltipText",
+						"allowEdit",
+						"applicationTheme",
+						"backgroundColor"
+					],
+					outputs: ["editClick"]
+				},
+				{
+					kind: "component",
+					type: MatIcon,
+					selector: "mat-icon",
+					inputs: [
+						"color",
+						"inline",
+						"svgIcon",
+						"fontSet",
+						"fontIcon"
+					],
+					exportAs: ["matIcon"]
+				},
+				{
+					kind: "ngmodule",
+					type: IconComponentModule
+				},
+				{
+					kind: "component",
+					type: i2.IconComponent,
+					selector: "ui-icon",
+					inputs: [
+						"size",
+						"cssClass",
+						"name",
+						"color",
+						"filled",
+						"toggleIconStyle",
+						"applicationTheme",
+						"useFullIconName"
+					]
+				},
+				{
+					kind: "component",
+					type: MatMenu,
+					selector: "mat-menu",
+					inputs: [
+						"backdropClass",
+						"aria-label",
+						"aria-labelledby",
+						"aria-describedby",
+						"xPosition",
+						"yPosition",
+						"overlapTrigger",
+						"hasBackdrop",
+						"class",
+						"classList"
+					],
+					outputs: ["closed", "close"],
+					exportAs: ["matMenu"]
+				},
+				{
+					kind: "component",
+					type: MatMenuItem,
+					selector: "[mat-menu-item]",
+					inputs: [
+						"role",
+						"disabled",
+						"disabledInteractive",
+						"disableRipple"
+					],
+					exportAs: ["matMenuItem"]
+				},
+				{
+					kind: "component",
+					type: MobileNavbarSideSheetComponent,
+					selector: "ui-mobile-navbar-side-sheet",
+					inputs: [
+						"routes",
+						"activedRoute",
+						"email",
+						"userName",
+						"menuItems",
+						"contentTemplateRef",
+						"userInfoExtraTemplateRef",
+						"menuContentTemplateRef",
+						"isDesktop",
+						"applicationTheme"
+					],
+					outputs: [
+						"navigateEvent",
+						"menuItemClicked",
+						"logoutEvent"
+					]
+				},
+				{
+					kind: "pipe",
+					type: AsyncPipe,
+					name: "async"
+				},
+				{
+					kind: "pipe",
+					type: UiTranslatePipe,
+					name: "uiTranslate"
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: NavbarComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-navbar",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			imports: [
+				SideSheetComponentModule,
+				MatToolbar,
+				LogoComponent,
+				ButtonComponent,
+				NgClass,
+				BadgeComponent,
+				MatButton,
+				MatMenuTrigger,
+				AvatarComponent,
+				MatIcon,
+				IconComponentModule,
+				MatMenu,
+				MatMenuItem,
+				MobileNavbarSideSheetComponent,
+				AsyncPipe,
+				UiTranslatePipe
+			],
+			providers: [UiTranslatePipe],
+			template: "<ui-side-sheet\n  class=\"navbar-sheet\"\n  [applicationTheme]=\"applicationTheme()\"\n  (openChange)=\"onSideSheetOpenChange($event)\"\n  position=\"end\"\n>\n  <mat-toolbar [attr.theme]=\"applicationTheme()\">\n    <div class=\"custom-toolbar row\">\n      <div class=\"brand\">\n        <ui-logo\n          [applicationTheme]=\"applicationTheme()\"\n          class=\"logo\"\n          (click)=\"navigate('')\"\n          [allowResizing]=\"true\"\n          [width]=\"isMobile() ? 27 : 160\"\n          [type]=\"isMobile() ? logoType.PRIMARY_BRANDMARK_PINK : logoType.DEFAULT\"\n        ></ui-logo>\n\n        @if (!isCollapsed()) {\n          <div class=\"navigation row\">\n            @for (route of routes(); track route) {\n              <a\n                (click)=\"navigate(route.id); $event.preventDefault()\"\n                [href]=\"route.id\"\n                [attr.data-testid]=\"route.id\"\n                data-test-role=\"nav-route\"\n                [ngClass]=\"{ active: activeRoutesMap().get(route.id) }\"\n              >\n                @if (route?.badgeOptions) {\n                  <ui-badge\n                    [label]=\"route.badgeOptions!.text ?? ''\"\n                    [rebrandColor]=\"route.badgeOptions!.color\"\n                    [variant]=\"route.badgeOptions!.variant ?? 'primary'\"\n                    [notificationsAmount]=\"route.badgeOptions!.notificationsAmount ?? 0\"\n                  ></ui-badge>\n                }\n                <span [attr.data-text]=\"route.title\">{{ route.title }}</span>\n              </a>\n            }\n          </div>\n        }\n      </div>\n\n      <div class=\"actions\">\n        <div class=\"custom-actions\">\n          <ng-content select=\"[actions]\"></ng-content>\n        </div>\n\n        @if (isCollapsed()) {\n          <ui-button\n            data-testid=\"navbar-menu-button\"\n            (click)=\"openMobileMenu()\"\n            [variant]=\"'text'\"\n            [companyColor]=\"'#242424'\"\n            [applicationTheme]=\"'light'\"\n            [iconName]=\"'Menu-burger-in-line'\"\n            [justIcon]=\"true\"\n          ></ui-button>\n        } @else {\n          <button\n            mat-button\n            class=\"profile-menu\"\n            [disableRipple]=\"applicationTheme() !== 'classic'\"\n            (menuOpened)=\"onChangeMenuState(true, 'desktop')\"\n            (menuClosed)=\"onChangeMenuState(false, 'desktop')\"\n            [matMenuTriggerFor]=\"menu\"\n          >\n            <div class=\"profile-button-content\">\n              @if (isAvatar()) {\n                <ui-avatar\n                  data-testid=\"profile-button\"\n                  [ngClass]=\"{ opened: menu._panelAnimationState !== 'void' }\"\n                  [applicationTheme]=\"applicationTheme()\"\n                  [name]=\"userName()\"\n                  [size]=\"AvatarSize.SMALL_MEDIUM\"\n                ></ui-avatar>\n              } @else {\n                {{ userName() }}\n              }\n\n              @if (applicationTheme() === 'classic') {\n                <mat-icon iconPositionEnd>expand_more</mat-icon>\n              } @else {\n                @if (!isAvatar()) {\n                  <ui-icon\n                    [size]=\"'24'\"\n                    [name]=\"\n                      menu._panelAnimationState === 'void' ? 'Arrow-chevron-down-filled' : 'Arrow-chevron-up-filled'\n                    \"\n                    [applicationTheme]=\"applicationTheme()\"\n                  ></ui-icon>\n                }\n              }\n            </div>\n          </button>\n        }\n      </div>\n    </div>\n  </mat-toolbar>\n\n  <ng-content></ng-content>\n\n  <mat-menu [class]=\"menuClass()\" #menu=\"matMenu\">\n    @if (applicationTheme() === 'classic') {\n      @for (e of menuItems(); track e) {\n        <button\n          mat-menu-item\n          (click)=\"clickMenuItem(e.id)\"\n          [attr.data-testid]=\"e.id\"\n          data-test-role=\"profile-menu-item\"\n        >\n          <div class=\"menu-item\">\n            @if (e?.icon) {\n              <ui-icon [name]=\"e.icon\" size=\"24\"></ui-icon>\n            }\n            {{ e.text }}\n          </div>\n        </button>\n      }\n      <button data-testid=\"logout-button\" mat-menu-item (click)=\"logout()\">\n        <mat-icon>power_settings_new</mat-icon>\n        {{ translationContext + 'LOG_OUT' | uiTranslate | async }}\n      </button>\n    } @else {\n      <ui-mobile-navbar-side-sheet\n        [isDesktop]=\"true\"\n        [menuItems]=\"menuItems()\"\n        [userName]=\"userName()\"\n        [routes]=\"routes()\"\n        [activedRoute]=\"activedRoute()\"\n        [email]=\"email()\"\n        [applicationTheme]=\"applicationTheme()\"\n        [contentTemplateRef]=\"contentTemplateRef()\"\n        [userInfoExtraTemplateRef]=\"userInfoExtraTemplateRef()\"\n        [menuContentTemplateRef]=\"menuContentTemplateRef()\"\n        (menuItemClicked)=\"clickMenuItem($event)\"\n        (logoutEvent)=\"logout()\"\n      >\n      </ui-mobile-navbar-side-sheet>\n    }\n  </mat-menu>\n</ui-side-sheet>\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{height:100%}:host ::ng-deep ui-side-sheet.navbar-sheet>.side-sheet-container{display:block;height:100%;position:relative!important;overflow:hidden}:host ::ng-deep ui-side-sheet.navbar-sheet>.side-sheet-container:has(>.side-sheet-content.mat-drawer-opened){min-height:100vh;min-height:100dvh}:host ::ng-deep ui-side-sheet.navbar-sheet>.side-sheet-container>.mat-drawer.side-sheet-content{width:360px!important;padding:0!important;background:#fff!important}@media(max-width:600px){:host ::ng-deep ui-side-sheet.navbar-sheet>.side-sheet-container>.mat-drawer.side-sheet-content{width:320px!important}}:host ::ng-deep ui-side-sheet.navbar-sheet>.side-sheet-container>.mat-drawer.side-sheet-content .mat-drawer-inner-container{display:flex;flex-direction:column;overflow:hidden}:host ::ng-deep ui-side-sheet.navbar-sheet>.side-sheet-container>.mat-drawer.side-sheet-content .mat-drawer-inner-container ui-mobile-navbar-side-sheet{flex:1 1 auto;min-height:0}:host ::ng-deep ui-side-sheet.navbar-sheet>.side-sheet-container>.mat-drawer.side-sheet-content .header{flex:0 0 auto;height:64px;padding:0 16px 0 24px!important;border-bottom:1px solid #d3d3d3;display:flex;align-items:center}:host ::ng-deep ui-side-sheet.navbar-sheet>.side-sheet-container>.mat-drawer.side-sheet-content .header .title{margin-right:0}:host ::ng-deep ui-side-sheet.navbar-sheet>.side-sheet-container>.mat-drawer.side-sheet-content .header .title span{font-size:20px;line-height:26px;font-weight:700}.mat-toolbar{height:80px;background-color:#fff!important}.mat-toolbar .custom-toolbar{height:100%;background-color:#fff;flex:1 1 auto;box-sizing:content-box;max-width:1312px;min-width:0;padding:0 20px;gap:16px;justify-content:space-between}@media(min-width:960px){.mat-toolbar .custom-toolbar{padding:0 40px}}@media(min-width:1280px){.mat-toolbar .custom-toolbar{padding:0 64px}}@media(max-width:600px){.mat-toolbar .custom-toolbar{padding:0 24px}}.mat-toolbar .custom-toolbar .brand{display:flex;align-items:center;gap:16px}.mat-toolbar .custom-toolbar ui-logo.logo{cursor:pointer;align-self:center;display:flex;flex-shrink:0}.mat-toolbar .custom-toolbar .navigation{height:100%}.mat-toolbar .custom-toolbar .navigation a{display:flex;align-items:center;height:100%;background:#fff;cursor:pointer;color:#000;text-decoration:none;white-space:nowrap}.mat-toolbar .custom-toolbar .navigation a:hover{text-decoration:none}.mat-toolbar .custom-toolbar .navigation a.active{border-top:2px solid #276678}.mat-toolbar .custom-toolbar .navigation a.active span{font-weight:700}.mat-toolbar .custom-toolbar .navigation a span{width:100%;text-align:center;font-weight:400;font-size:14px;line-height:16px}.mat-toolbar .custom-toolbar .navigation a span:after{content:attr(data-text);content:attr(data-text)/\"\";display:block;height:0;overflow:hidden;visibility:hidden;font-weight:700;pointer-events:none}.mat-toolbar .custom-toolbar .actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0}.mat-toolbar .custom-toolbar .actions .profile-menu{font-weight:600;font-size:14px;height:100%}.mat-toolbar .custom-toolbar .actions .profile-menu:has(ui-avatar){min-width:auto;padding-right:2px}.mat-toolbar .custom-toolbar .actions .profile-menu mat-icon{font-size:16px;position:relative;top:3px;left:3px}.mat-toolbar .custom-toolbar .actions .profile-button-content{display:flex;align-items:center;flex-wrap:nowrap}.mat-toolbar .custom-toolbar .actions .profile-button-content ui-avatar{position:relative}.mat-toolbar .custom-toolbar .actions .profile-button-content ui-avatar.opened:after{position:absolute;content:\"\";width:40px;height:40px;left:-2px;top:-2px;z-index:-1;border-radius:100%;background:#f4f4f4}.mat-toolbar[theme=dark],.mat-toolbar[theme=light]{display:flex;justify-content:center;width:100%;height:64px;padding:0;border-bottom:1px solid #d3d3d3}.mat-toolbar[theme=dark] .actions,.mat-toolbar[theme=light] .actions{color:#242424}.mat-toolbar[theme=dark] .actions ::ng-deep .mat-mdc-button .mdc-button__label,.mat-toolbar[theme=light] .actions ::ng-deep .mat-mdc-button .mdc-button__label{font-weight:400}.mat-toolbar[theme=dark] ui-icon,.mat-toolbar[theme=light] ui-icon{margin-left:8px}.mat-toolbar[theme=dark] ui-icon.open,.mat-toolbar[theme=light] ui-icon.open{transform:rotate(180deg)}.mat-toolbar[theme=dark] .navigation,.mat-toolbar[theme=light] .navigation{gap:2px}.mat-toolbar[theme=dark] .navigation a,.mat-toolbar[theme=light] .navigation a{padding:16px 24px;border-bottom:2px solid transparent;position:relative;transition:border-bottom-color .15s ease-in}.mat-toolbar[theme=dark] .navigation a ui-badge,.mat-toolbar[theme=light] .navigation a ui-badge{position:absolute;right:-12px;top:0;z-index:1}.mat-toolbar[theme=dark] .navigation a ui-badge ::ng-deep .badge-container-notification,.mat-toolbar[theme=light] .navigation a ui-badge ::ng-deep .badge-container-notification{position:absolute;right:16px;top:8px;font-size:14px}.mat-toolbar[theme=dark] .navigation a.active,.mat-toolbar[theme=light] .navigation a.active{border-top:unset!important;border-bottom:2px solid #d410aa}.mat-toolbar[theme=dark] .navigation a:hover,.mat-toolbar[theme=light] .navigation a:hover{border-top:unset!important;border-bottom:2px solid #242424}@media(max-width:600px){.mat-toolbar[theme=dark] ui-button,.mat-toolbar[theme=light] ui-button{height:48px}}.custom-actions{display:flex;align-items:center;height:64px;min-width:0;overflow:hidden}.row{display:flex;flex-direction:row}.menu-item{display:flex;align-items:center}.menu-item ui-icon{margin-right:16px}\n"]
+		}]
+	}],
+	propDecorators: {
+		routes: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "routes",
+				required: false
+			}]
+		}],
+		activedRoute: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "activedRoute",
+				required: false
+			}]
+		}],
+		userName: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "userName",
+				required: false
+			}]
+		}],
+		email: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "email",
+				required: false
+			}]
+		}],
+		menuItems: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "menuItems",
+				required: false
+			}]
+		}],
+		applicationTheme: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "applicationTheme",
+				required: false
+			}]
+		}],
+		contentTemplateRef: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "contentTemplateRef",
+				required: false
+			}]
+		}],
+		userInfoExtraTemplateRef: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "userInfoExtraTemplateRef",
+				required: false
+			}]
+		}],
+		menuContentTemplateRef: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "menuContentTemplateRef",
+				required: false
+			}]
+		}],
+		mobileBreakpoint: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "mobileBreakpoint",
+				required: false
+			}]
+		}],
+		collapseBreakpoint: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "collapseBreakpoint",
+				required: false
+			}]
+		}],
+		isAvatar: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "isAvatar",
+				required: false
+			}]
+		}],
+		menuClass: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "menuClass",
+				required: false
+			}]
+		}],
+		navigateEvent: [{
+			type: i0.Output,
+			args: ["navigateEvent"]
+		}],
+		menuItemClicked: [{
+			type: i0.Output,
+			args: ["menuItemClicked"]
+		}],
+		logoutEvent: [{
+			type: i0.Output,
+			args: ["logoutEvent"]
+		}],
+		menuState: [{
+			type: i0.Output,
+			args: ["menuState"]
+		}]
+	}
+});
+var NavbarComponentModule = class NavbarComponentModule {
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: NavbarComponentModule,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.NgModule
+		});
+	}
+	static {
+		this.ɵmod = i0.ɵɵngDeclareNgModule({
+			minVersion: "14.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: NavbarComponentModule,
+			imports: [
+				CommonModule,
+				MatToolbarModule,
+				MatIconModule,
+				MatButtonModule,
+				MatRippleModule,
+				MatMenuModule,
+				LogoComponentModule,
+				IconComponentModule,
+				UiTranslatePipe,
+				AvatarComponentModule,
+				SideSheetComponentModule,
+				ButtonComponentModule,
+				MobileNavbarSideSheetComponent,
+				BadgeComponentModule,
+				NavbarComponent
+			],
+			exports: [NavbarComponent]
+		});
+	}
+	static {
+		this.ɵinj = i0.ɵɵngDeclareInjector({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: NavbarComponentModule,
+			imports: [
+				CommonModule,
+				MatToolbarModule,
+				MatIconModule,
+				MatButtonModule,
+				MatRippleModule,
+				MatMenuModule,
+				LogoComponentModule,
+				IconComponentModule,
+				AvatarComponentModule,
+				SideSheetComponentModule,
+				ButtonComponentModule,
+				MobileNavbarSideSheetComponent,
+				BadgeComponentModule,
+				NavbarComponent
+			]
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: NavbarComponentModule,
+	decorators: [{
+		type: NgModule,
+		args: [{
+			imports: [
+				CommonModule,
+				MatToolbarModule,
+				MatIconModule,
+				MatButtonModule,
+				MatRippleModule,
+				MatMenuModule,
+				LogoComponentModule,
+				IconComponentModule,
+				UiTranslatePipe,
+				AvatarComponentModule,
+				SideSheetComponentModule,
+				ButtonComponentModule,
+				MobileNavbarSideSheetComponent,
+				BadgeComponentModule,
+				NavbarComponent
+			],
+			exports: [NavbarComponent]
+		}]
+	}]
+});
 export { MobileNavbarSideSheetComponent, NavbarComponent, NavbarComponentModule };
-//# sourceMappingURL=testgorilla-tgo-ui-components-navbar.mjs.map
+
+//# sourceMappingURL=testgorilla-tgo-ui-components-navbar.mjs.map