@testgorilla/tgo-ui 6.4.2-beta.1 → 6.4.2-beta.3

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

@@ -4,7 +4,7 @@ import * as i14 from '@testgorilla/tgo-ui/components/core';
 import { UiTranslatePipe, ScreenBreakpoints } from '@testgorilla/tgo-ui/components/core';
 import { ReplaySubject, startWith, switchMap, map, tap, Subject } from 'rxjs';
 import * as i3 from '@angular/common';
-import { NgForOf, NgClass, NgIf, NgTemplateOutlet, AsyncPipe, CommonModule } from '@angular/common';
+import { NgClass, NgTemplateOutlet, AsyncPipe, CommonModule } from '@angular/common';
 import * as i9 from '@testgorilla/tgo-ui/components/icon';
 import { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';
 import * as i5 from '@angular/material/icon';
@@ -33,7 +33,7 @@ import { MatRippleModule } from '@angular/material/core';
 class MobileNavbarSideSheetComponent {
     constructor() {
         this.routes = [];
-        this.activedRoute = input('');
+        this.activedRoute = input('', ...(ngDevMode ? [{ debugName: "activedRoute" }] : []));
         this.email = '';
         this.userName = '';
         this.menuItems = [];
@@ -47,7 +47,7 @@ class MobileNavbarSideSheetComponent {
         this.activeRoutesMap = computed(() => {
             const currentRoute = this.activedRoute();
             return new Map(this.routes.map(route => [route.id, currentRoute?.startsWith(route.id)]));
-        });
+        }, ...(ngDevMode ? [{ debugName: "activeRoutesMap" }] : []));
     }
     navigate(routeId) {
         this.navigateEvent.emit(`/${routeId}`);
@@ -58,13 +58,12 @@ class MobileNavbarSideSheetComponent {
     clickMenuItem(id) {
         this.menuItemClicked.emit(id);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: MobileNavbarSideSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: MobileNavbarSideSheetComponent, isStandalone: true, selector: "ui-mobile-navbar-side-sheet", inputs: { routes: { classPropertyName: "routes", publicName: "routes", isSignal: false, isRequired: false, transformFunction: null }, activedRoute: { classPropertyName: "activedRoute", publicName: "activedRoute", isSignal: true, isRequired: false, transformFunction: null }, email: { classPropertyName: "email", publicName: "email", isSignal: false, isRequired: false, transformFunction: null }, userName: { classPropertyName: "userName", publicName: "userName", isSignal: false, isRequired: false, transformFunction: null }, menuItems: { classPropertyName: "menuItems", publicName: "menuItems", isSignal: false, isRequired: false, transformFunction: null }, contentTemplateRef: { classPropertyName: "contentTemplateRef", publicName: "contentTemplateRef", isSignal: false, isRequired: false, transformFunction: null }, userInfoExtraTemplateRef: { classPropertyName: "userInfoExtraTemplateRef", publicName: "userInfoExtraTemplateRef", isSignal: false, isRequired: false, transformFunction: null }, menuContentTemplateRef: { classPropertyName: "menuContentTemplateRef", publicName: "menuContentTemplateRef", isSignal: false, isRequired: false, transformFunction: null }, isDesktop: { classPropertyName: "isDesktop", publicName: "isDesktop", isSignal: false, isRequired: false, transformFunction: null }, applicationTheme: { classPropertyName: "applicationTheme", publicName: "applicationTheme", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { navigateEvent: "navigateEvent", menuItemClicked: "menuItemClicked", logoutEvent: "logoutEvent" }, ngImport: i0, template: "<div class=\"mobile-navbar-container\">\n  <ng-container *ngIf=\"isDesktop\" [ngTemplateOutlet]=\"userInfo\"></ng-container>\n\n  @if (menuContentTemplateRef) {\n    <ng-container [ngTemplateOutlet]=\"menuContentTemplateRef\"></ng-container>\n  }\n\n  <div class=\"routes\">\n    <div\n      *ngFor=\"let route of routes\"\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  </div>\n\n  <div class=\"settings\">\n    <ng-container *ngFor=\"let e of menuItems\">\n      <div *ngIf=\"e\" 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    </ng-container>\n  </div>\n</div>\n\n<div class=\"bottom-content\" [ngClass]=\"{ desktop: isDesktop }\">\n  <ng-container *ngIf=\"!isDesktop\" [ngTemplateOutlet]=\"contentTemplateRef\"></ng-container>\n  <ng-container *ngIf=\"isDesktop; else tablet\">\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  </ng-container>\n\n  <ng-template #tablet>\n    <ng-container [ngTemplateOutlet]=\"userInfo\"></ng-container>\n  </ng-template>\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      <ui-button\n        *ngIf=\"!isDesktop\"\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    </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{min-width:340px;padding-top:16px;height:100%}.mobile-navbar-container .routes{display:none}.mobile-navbar-container .routes .route{padding:0 16px;width:100%;height:48px;display:flex;justify-content:flex-start;align-items:center;font-size:14px;cursor:pointer}.mobile-navbar-container .routes .route.active{background-color:#f4f4f4;font-weight:700;font-family:ModernGothic,sans-serif}.mobile-navbar-container .routes .route:hover{background-color:#fff2fc;font-weight:700;font-family:ModernGothic,sans-serif}.mobile-navbar-container .routes .route:active{background-color:#ffe6fa}@media (max-width: 600px){.mobile-navbar-container .routes{display:block}}.menu-item{width:100%;height:48px;display:flex;font-size:14px;font-weight:700;font-family:ModernGothic,sans-serif;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:16px!important}.menu-item ::ng-deep ui-button button span.icon{margin-right:16px!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%;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 #d3d3d3 solid;margin-top:16px;padding:16px 0 8px}.user-info{display:flex;align-items:center;gap:16px;padding:0 16px;margin-top:32px;margin-bottom:16px;width:100%}.user-info.desktop{margin-top:0;margin-bottom:16px}.user-info .details-container{display:flex;justify-content:space-between;width:100%;gap:8px}.user-info .name-container{display:flex;flex-direction:column;width:224px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-info .name-container .user-name{font-weight:700;font-size:14px;line-height:22px;font-family:ModernGothic,sans-serif;white-space:wrap}.user-info .name-container .user-email{width:100%;font-size:14px;color:#666;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: IconComponentModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatMenuModule }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: AccordionComponentModule }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "hasBackground", "tooltipPosition", "role", "iconFilled"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MobileNavbarSideSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: MobileNavbarSideSheetComponent, isStandalone: true, selector: "ui-mobile-navbar-side-sheet", inputs: { routes: { classPropertyName: "routes", publicName: "routes", isSignal: false, isRequired: false, transformFunction: null }, activedRoute: { classPropertyName: "activedRoute", publicName: "activedRoute", isSignal: true, isRequired: false, transformFunction: null }, email: { classPropertyName: "email", publicName: "email", isSignal: false, isRequired: false, transformFunction: null }, userName: { classPropertyName: "userName", publicName: "userName", isSignal: false, isRequired: false, transformFunction: null }, menuItems: { classPropertyName: "menuItems", publicName: "menuItems", isSignal: false, isRequired: false, transformFunction: null }, contentTemplateRef: { classPropertyName: "contentTemplateRef", publicName: "contentTemplateRef", isSignal: false, isRequired: false, transformFunction: null }, userInfoExtraTemplateRef: { classPropertyName: "userInfoExtraTemplateRef", publicName: "userInfoExtraTemplateRef", isSignal: false, isRequired: false, transformFunction: null }, menuContentTemplateRef: { classPropertyName: "menuContentTemplateRef", publicName: "menuContentTemplateRef", isSignal: false, isRequired: false, transformFunction: null }, isDesktop: { classPropertyName: "isDesktop", publicName: "isDesktop", isSignal: false, isRequired: false, transformFunction: null }, applicationTheme: { classPropertyName: "applicationTheme", publicName: "applicationTheme", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { navigateEvent: "navigateEvent", menuItemClicked: "menuItemClicked", logoutEvent: "logoutEvent" }, ngImport: i0, template: "<div class=\"mobile-navbar-container\">\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  <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  <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) {\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{min-width:340px;padding-top:16px;height:100%}.mobile-navbar-container .routes{display:none}.mobile-navbar-container .routes .route{padding:0 16px;width:100%;height:48px;display:flex;justify-content:flex-start;align-items:center;font-size:14px;cursor:pointer}.mobile-navbar-container .routes .route.active{background-color:#f4f4f4;font-weight:700;font-family:ModernGothic,sans-serif}.mobile-navbar-container .routes .route:hover{background-color:#fff2fc;font-weight:700;font-family:ModernGothic,sans-serif}.mobile-navbar-container .routes .route:active{background-color:#ffe6fa}@media (max-width: 600px){.mobile-navbar-container .routes{display:block}}.menu-item{width:100%;height:48px;display:flex;font-size:14px;font-weight:700;font-family:ModernGothic,sans-serif;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:16px!important}.menu-item ::ng-deep ui-button button span.icon{margin-right:16px!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%;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 #d3d3d3 solid;margin-top:16px;padding:16px 0 8px}.user-info{display:flex;align-items:center;gap:16px;padding:0 16px;margin-top:32px;margin-bottom:16px;width:100%}.user-info.desktop{margin-top:0;margin-bottom:16px}.user-info .details-container{display:flex;justify-content:space-between;width:100%;gap:8px}.user-info .name-container{display:flex;flex-direction:column;width:224px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-info .name-container .user-name{font-weight:700;font-size:14px;line-height:22px;font-family:ModernGothic,sans-serif;white-space:wrap}.user-info .name-container .user-email{width:100%;font-size:14px;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", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "hasBackground", "tooltipPosition", "role", "iconFilled"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: MobileNavbarSideSheetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MobileNavbarSideSheetComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ui-mobile-navbar-side-sheet', imports: [
-                        NgForOf,
                         NgClass,
                         IconComponentModule,
                         MatIconModule,
@@ -72,15 +71,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                         UiTranslatePipe,
                         MatButtonModule,
                         AccordionComponentModule,
-                        NgIf,
                         NgTemplateOutlet,
                         AvatarComponentModule,
                         ButtonComponentModule,
                         AsyncPipe,
-                    ], template: "<div class=\"mobile-navbar-container\">\n  <ng-container *ngIf=\"isDesktop\" [ngTemplateOutlet]=\"userInfo\"></ng-container>\n\n  @if (menuContentTemplateRef) {\n    <ng-container [ngTemplateOutlet]=\"menuContentTemplateRef\"></ng-container>\n  }\n\n  <div class=\"routes\">\n    <div\n      *ngFor=\"let route of routes\"\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  </div>\n\n  <div class=\"settings\">\n    <ng-container *ngFor=\"let e of menuItems\">\n      <div *ngIf=\"e\" 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    </ng-container>\n  </div>\n</div>\n\n<div class=\"bottom-content\" [ngClass]=\"{ desktop: isDesktop }\">\n  <ng-container *ngIf=\"!isDesktop\" [ngTemplateOutlet]=\"contentTemplateRef\"></ng-container>\n  <ng-container *ngIf=\"isDesktop; else tablet\">\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  </ng-container>\n\n  <ng-template #tablet>\n    <ng-container [ngTemplateOutlet]=\"userInfo\"></ng-container>\n  </ng-template>\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      <ui-button\n        *ngIf=\"!isDesktop\"\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    </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{min-width:340px;padding-top:16px;height:100%}.mobile-navbar-container .routes{display:none}.mobile-navbar-container .routes .route{padding:0 16px;width:100%;height:48px;display:flex;justify-content:flex-start;align-items:center;font-size:14px;cursor:pointer}.mobile-navbar-container .routes .route.active{background-color:#f4f4f4;font-weight:700;font-family:ModernGothic,sans-serif}.mobile-navbar-container .routes .route:hover{background-color:#fff2fc;font-weight:700;font-family:ModernGothic,sans-serif}.mobile-navbar-container .routes .route:active{background-color:#ffe6fa}@media (max-width: 600px){.mobile-navbar-container .routes{display:block}}.menu-item{width:100%;height:48px;display:flex;font-size:14px;font-weight:700;font-family:ModernGothic,sans-serif;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:16px!important}.menu-item ::ng-deep ui-button button span.icon{margin-right:16px!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%;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 #d3d3d3 solid;margin-top:16px;padding:16px 0 8px}.user-info{display:flex;align-items:center;gap:16px;padding:0 16px;margin-top:32px;margin-bottom:16px;width:100%}.user-info.desktop{margin-top:0;margin-bottom:16px}.user-info .details-container{display:flex;justify-content:space-between;width:100%;gap:8px}.user-info .name-container{display:flex;flex-direction:column;width:224px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-info .name-container .user-name{font-weight:700;font-size:14px;line-height:22px;font-family:ModernGothic,sans-serif;white-space:wrap}.user-info .name-container .user-email{width:100%;font-size:14px;color:#666;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
+                    ], template: "<div class=\"mobile-navbar-container\">\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  <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  <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) {\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{min-width:340px;padding-top:16px;height:100%}.mobile-navbar-container .routes{display:none}.mobile-navbar-container .routes .route{padding:0 16px;width:100%;height:48px;display:flex;justify-content:flex-start;align-items:center;font-size:14px;cursor:pointer}.mobile-navbar-container .routes .route.active{background-color:#f4f4f4;font-weight:700;font-family:ModernGothic,sans-serif}.mobile-navbar-container .routes .route:hover{background-color:#fff2fc;font-weight:700;font-family:ModernGothic,sans-serif}.mobile-navbar-container .routes .route:active{background-color:#ffe6fa}@media (max-width: 600px){.mobile-navbar-container .routes{display:block}}.menu-item{width:100%;height:48px;display:flex;font-size:14px;font-weight:700;font-family:ModernGothic,sans-serif;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:16px!important}.menu-item ::ng-deep ui-button button span.icon{margin-right:16px!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%;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 #d3d3d3 solid;margin-top:16px;padding:16px 0 8px}.user-info{display:flex;align-items:center;gap:16px;padding:0 16px;margin-top:32px;margin-bottom:16px;width:100%}.user-info.desktop{margin-top:0;margin-bottom:16px}.user-info .details-container{display:flex;justify-content:space-between;width:100%;gap:8px}.user-info .name-container{display:flex;flex-direction:column;width:224px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-info .name-container .user-name{font-weight:700;font-size:14px;line-height:22px;font-family:ModernGothic,sans-serif;white-space:wrap}.user-info .name-container .user-email{width:100%;font-size:14px;color:#666;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
         }], propDecorators: { routes: [{
                 type: Input
-            }], email: [{
+            }], activedRoute: [{ type: i0.Input, args: [{ isSignal: true, alias: "activedRoute", required: false }] }], email: [{
                 type: Input
             }], userName: [{
                 type: Input
@@ -134,7 +132,7 @@ class NavbarComponent {
          * @type {InputSignal<string>}
          * @memberof NavbarComponent
          */
-        this.activedRoute = input('');
+        this.activedRoute = input('', ...(ngDevMode ? [{ debugName: "activedRoute" }] : []));
         /**
          * User first name and last name
          *
@@ -205,7 +203,7 @@ class NavbarComponent {
         this.activeRoutesMap = computed(() => {
             const currentRoute = this.activedRoute();
             return new Map(this.routes.map(route => [route.id, currentRoute?.startsWith(route.id)]));
-        });
+        }, ...(ngDevMode ? [{ debugName: "activeRoutesMap" }] : []));
         this.AvatarSize = AvatarSize;
         if (defaultAppTheme) {
             this.applicationTheme = defaultAppTheme;
@@ -253,12 +251,12 @@ class NavbarComponent {
         this.isOpened = isOpened;
         this.menuState.emit({ isOpened, screenSize });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: NavbarComponent, deps: [{ token: i1$1.BreakpointObserver }, { token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: i2$1.SideSheetService }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.20", type: NavbarComponent, isStandalone: false, selector: "ui-navbar", inputs: { routes: { classPropertyName: "routes", publicName: "routes", isSignal: false, isRequired: false, transformFunction: null }, activedRoute: { classPropertyName: "activedRoute", publicName: "activedRoute", isSignal: true, isRequired: false, transformFunction: null }, userName: { classPropertyName: "userName", publicName: "userName", isSignal: false, isRequired: false, transformFunction: null }, email: { classPropertyName: "email", publicName: "email", isSignal: false, isRequired: false, transformFunction: null }, menuItems: { classPropertyName: "menuItems", publicName: "menuItems", isSignal: false, isRequired: false, transformFunction: null }, applicationTheme: { classPropertyName: "applicationTheme", publicName: "applicationTheme", isSignal: false, isRequired: false, transformFunction: null }, contentTemplateRef: { classPropertyName: "contentTemplateRef", publicName: "contentTemplateRef", isSignal: false, isRequired: false, transformFunction: null }, userInfoExtraTemplateRef: { classPropertyName: "userInfoExtraTemplateRef", publicName: "userInfoExtraTemplateRef", isSignal: false, isRequired: false, transformFunction: null }, menuContentTemplateRef: { classPropertyName: "menuContentTemplateRef", publicName: "menuContentTemplateRef", isSignal: false, isRequired: false, transformFunction: null }, mobileBreakpoint: { classPropertyName: "mobileBreakpoint", publicName: "mobileBreakpoint", isSignal: false, isRequired: false, transformFunction: null }, isAvatar: { classPropertyName: "isAvatar", publicName: "isAvatar", isSignal: false, isRequired: false, transformFunction: null }, menuClass: { classPropertyName: "menuClass", publicName: "menuClass", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { navigateEvent: "navigateEvent", menuItemClicked: "menuItemClicked", logoutEvent: "logoutEvent", menuState: "menuState" }, ngImport: i0, template: "<ui-side-sheet\n  [applicationTheme]=\"applicationTheme\"\n  (openChange)=\"onChangeMenuState($event, screenSize)\"\n  [position]=\"(isMobile$ | async) ? 'start' : 'end'\"\n>\n  <mat-toolbar [attr.theme]=\"applicationTheme\">\n    <div class=\"custom-toolbar row\">\n      <ui-logo\n        [applicationTheme]=\"applicationTheme\"\n        class=\"logo\"\n        (click)=\"navigate('')\"\n        [allowResizing]=\"true\"\n        [width]=\"(isMobile$ | async) ? 160 : (isTablet$ | async) ? 30 : 160\"\n        [type]=\"\n          (isMobile$ | async)\n            ? logoType.DEFAULT\n            : (isTablet$ | async)\n              ? logoType.PRIMARY_BRANDMARK_PINK\n              : logoType.DEFAULT\n        \"\n      ></ui-logo>\n\n      <ui-button\n        (click)=\"openMobileMenu()\"\n        *ngIf=\"isMobile$ | async\"\n        [variant]=\"'text'\"\n        [companyColor]=\"'#242424'\"\n        [applicationTheme]=\"'light'\"\n        [iconName]=\"isOpened ? 'Close-in-line' : 'Menu-burger-in-line'\"\n        [justIcon]=\"true\"\n      ></ui-button>\n\n      <div class=\"navigation row\">\n        <a\n          *ngFor=\"let route of routes\"\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          <ui-badge\n            *ngIf=\"route?.badgeOptions\"\n            [label]=\"route.badgeOptions!.text\"\n            [rebrandColor]=\"route.badgeOptions!.color\"\n          ></ui-badge>\n          <span>{{ route.title }}</span>\n        </a>\n      </div>\n\n      <div class=\"actions\">\n        <div class=\"custom-actions\">\n          <ng-content select=\"[actions]\"></ng-content>\n        </div>\n\n        <button mat-button class=\"profile-menu\" *ngIf=\"isTablet$ | async; else pc\" (click)=\"openMobileMenu()\">\n          <ng-container [ngTemplateOutlet]=\"buttonContent\"></ng-container>\n        </button>\n\n        <ng-template #pc>\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            <ng-container [ngTemplateOutlet]=\"buttonContent\"></ng-container>\n          </button>\n        </ng-template>\n\n        <ng-template #buttonContent>\n          <div class=\"profile-button-content\">\n            <ng-container *ngIf=\"isAvatar; else onlyName\">\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            </ng-container>\n\n            <ng-template #onlyName>\n              {{ userName }}\n            </ng-template>\n\n            <mat-icon *ngIf=\"applicationTheme === 'classic'; else newThemeIcon\" iconPositionEnd>expand_more</mat-icon>\n            <ng-template #newThemeIcon>\n              <ui-icon\n                [size]=\"'24'\"\n                *ngIf=\"!isAvatar\"\n                [name]=\"menu._panelAnimationState === 'void' ? 'Arrow-chevron-down-filled' : 'Arrow-chevron-up-filled'\"\n                [applicationTheme]=\"applicationTheme\"\n              ></ui-icon>\n            </ng-template>\n          </div>\n        </ng-template>\n      </div>\n    </div>\n  </mat-toolbar>\n\n  <ng-content></ng-content>\n\n  <mat-menu [class]=\"menuClass\" #menu=\"matMenu\">\n    <ng-container *ngIf=\"applicationTheme === 'classic'; else newTheme\">\n      <button\n        *ngFor=\"let e of menuItems\"\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          <ui-icon *ngIf=\"e?.icon\" [name]=\"e.icon\" size=\"24\"></ui-icon>\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    </ng-container>\n\n    <ng-template #newTheme>\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    </ng-template>\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 .side-sheet-container{display:block;height:100%;position:unset!important}:host ::ng-deep .mat-drawer-container{height:100%}:host ::ng-deep .mat-drawer{padding:0!important;background:#fff!important}:host ::ng-deep .mat-drawer .mat-drawer-inner-container .header{padding:16px 16px 16px 24px!important;border-bottom:1px solid #d3d3d3;height:64px}:host ::ng-deep .mat-drawer .mat-drawer-inner-container .header ui-logo{width:100%;margin:0!important;display:flex;justify-content:flex-start}:host ::ng-deep .mat-drawer .mat-drawer-inner-container .header ui-logo img{width:fit-content;height:32px}@media (max-width: 1024px) and (min-width: 600px){:host ::ng-deep .mat-drawer{margin-top:64px;height:calc(100% - 64px);max-width:375px}:host ::ng-deep .mat-drawer .header{display:none!important}:host ::ng-deep .mat-drawer-backdrop{background:transparent!important;opacity:0!important}}@media (max-width: 600px){:host ::ng-deep .mat-drawer{margin-top:64px;height:calc(100% - 64px)}:host ::ng-deep .mat-drawer .header{display:none!important}:host ::ng-deep .mat-drawer-backdrop{background:transparent!important;opacity:0!important}}.mat-toolbar{height:80px;background-color:#fff!important}.mat-toolbar .custom-toolbar{width:100%;height:100%;background-color:#fff;max-width:1440px;padding:0}@media (max-width: 600px){.mat-toolbar .custom-toolbar{padding:0 16px}}@media (min-width: 1024px) and (max-width: 1280px){.mat-toolbar .custom-toolbar{padding:0 40px!important}}@media (min-width: 960px) and (max-width: 1024px){.mat-toolbar .custom-toolbar{padding:0 40px!important}}@media (max-width: 960px){.mat-toolbar .custom-toolbar{padding:0 20px!important}}@media (max-width: 1024px){.mat-toolbar .custom-toolbar{padding:0 64px}}.mat-toolbar .custom-toolbar ui-logo.logo{cursor:pointer;height:43px;align-self:center;display:flex;margin-left:0!important}@media (max-width: 1024px){.mat-toolbar .custom-toolbar ui-logo.logo{min-width:22px}}.mat-toolbar .custom-toolbar .navigation{height:100%;margin-left:40px}.mat-toolbar .custom-toolbar .navigation a{display:flex;align-items:center;height:100%;background:#fff;cursor:pointer;color:#000;text-decoration:none}.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 .actions{width:100%;display:flex;align-items:center;justify-content:flex-end;margin-right:7px}@media (max-width: 600px){.mat-toolbar .custom-toolbar .actions{margin-right:0}}.mat-toolbar .custom-toolbar .actions .profile-menu{font-weight:600;font-size:14px;height:100%;margin-right:-20px}.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] .custom-toolbar,.mat-toolbar[theme=light] .custom-toolbar{justify-content:space-between}@media (min-width: 1280px){.mat-toolbar[theme=dark] .custom-toolbar,.mat-toolbar[theme=light] .custom-toolbar{padding:0 64px!important}}.mat-toolbar[theme=dark] ui-logo.logo,.mat-toolbar[theme=light] ui-logo.logo{justify-content:flex-start;margin-left:40px}@media (min-width: 1024px){.mat-toolbar[theme=dark] ui-logo.logo,.mat-toolbar[theme=light] ui-logo.logo{min-width:160px}}@media (max-width: 1024px){.mat-toolbar[theme=dark] ui-logo.logo,.mat-toolbar[theme=light] ui-logo.logo{margin-left:20px!important}}.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] .actions .profile-menu,.mat-toolbar[theme=light] .actions .profile-menu{margin-right:0}.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:4px;z-index:1}.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}.mat-toolbar[theme=dark] ui-logo,.mat-toolbar[theme=light] ui-logo{width:100%;display:flex;justify-content:center;align-items:center;margin:0!important}.mat-toolbar[theme=dark] ui-logo ::ng-deep img,.mat-toolbar[theme=light] ui-logo ::ng-deep img{height:32px}.mat-toolbar[theme=dark] .custom-toolbar,.mat-toolbar[theme=light] .custom-toolbar{align-items:center}.mat-toolbar[theme=dark] .custom-toolbar .navigation,.mat-toolbar[theme=dark] .custom-toolbar .actions,.mat-toolbar[theme=light] .custom-toolbar .navigation,.mat-toolbar[theme=light] .custom-toolbar .actions{display:none}}.custom-actions{display:flex;align-items:center;height:64px}@media (max-width: 1024px){.custom-actions{display:none}}.row{display:flex;flex-direction:row}.menu-item{display:flex;align-items:center}.menu-item ui-icon{margin-right:16px}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i7.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: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7.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: i8.LogoComponent, selector: "ui-logo", inputs: ["type", "applicationTheme", "label", "width", "allowResizing"] }, { kind: "component", type: i9.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "component", type: i1.AvatarComponent, selector: "ui-avatar", inputs: ["size", "imageUrl", "name", "tooltipText", "allowEdit", "applicationTheme", "backgroundColor"], outputs: ["editClick"] }, { kind: "component", type: i2$1.SideSheetComponent, selector: "ui-side-sheet", inputs: ["position", "applicationTheme"], outputs: ["openChange"] }, { kind: "component", type: i2.ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "hasBackground", "tooltipPosition", "role", "iconFilled"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { 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: "component", type: i13.BadgeComponent, selector: "ui-badge", inputs: ["label", "staticLabel", "icon", "color", "variant", "notificationsAmount", "applicationTheme", "rebrandColor", "truncateLabel", "enableAnimation"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i14.UiTranslatePipe, name: "uiTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: NavbarComponent, deps: [{ token: i1$1.BreakpointObserver }, { token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: i2$1.SideSheetService }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: NavbarComponent, isStandalone: false, selector: "ui-navbar", inputs: { routes: { classPropertyName: "routes", publicName: "routes", isSignal: false, isRequired: false, transformFunction: null }, activedRoute: { classPropertyName: "activedRoute", publicName: "activedRoute", isSignal: true, isRequired: false, transformFunction: null }, userName: { classPropertyName: "userName", publicName: "userName", isSignal: false, isRequired: false, transformFunction: null }, email: { classPropertyName: "email", publicName: "email", isSignal: false, isRequired: false, transformFunction: null }, menuItems: { classPropertyName: "menuItems", publicName: "menuItems", isSignal: false, isRequired: false, transformFunction: null }, applicationTheme: { classPropertyName: "applicationTheme", publicName: "applicationTheme", isSignal: false, isRequired: false, transformFunction: null }, contentTemplateRef: { classPropertyName: "contentTemplateRef", publicName: "contentTemplateRef", isSignal: false, isRequired: false, transformFunction: null }, userInfoExtraTemplateRef: { classPropertyName: "userInfoExtraTemplateRef", publicName: "userInfoExtraTemplateRef", isSignal: false, isRequired: false, transformFunction: null }, menuContentTemplateRef: { classPropertyName: "menuContentTemplateRef", publicName: "menuContentTemplateRef", isSignal: false, isRequired: false, transformFunction: null }, mobileBreakpoint: { classPropertyName: "mobileBreakpoint", publicName: "mobileBreakpoint", isSignal: false, isRequired: false, transformFunction: null }, isAvatar: { classPropertyName: "isAvatar", publicName: "isAvatar", isSignal: false, isRequired: false, transformFunction: null }, menuClass: { classPropertyName: "menuClass", publicName: "menuClass", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { navigateEvent: "navigateEvent", menuItemClicked: "menuItemClicked", logoutEvent: "logoutEvent", menuState: "menuState" }, ngImport: i0, template: "<ui-side-sheet\n  [applicationTheme]=\"applicationTheme\"\n  (openChange)=\"onChangeMenuState($event, screenSize)\"\n  [position]=\"(isMobile$ | async) ? 'start' : 'end'\"\n>\n  <mat-toolbar [attr.theme]=\"applicationTheme\">\n    <div class=\"custom-toolbar row\">\n      <ui-logo\n        [applicationTheme]=\"applicationTheme\"\n        class=\"logo\"\n        (click)=\"navigate('')\"\n        [allowResizing]=\"true\"\n        [width]=\"(isMobile$ | async) ? 160 : (isTablet$ | async) ? 30 : 160\"\n        [type]=\"\n          (isMobile$ | async)\n            ? logoType.DEFAULT\n            : (isTablet$ | async)\n              ? logoType.PRIMARY_BRANDMARK_PINK\n              : logoType.DEFAULT\n        \"\n      ></ui-logo>\n\n      @if (isMobile$ | async) {\n        <ui-button\n          (click)=\"openMobileMenu()\"\n          [variant]=\"'text'\"\n          [companyColor]=\"'#242424'\"\n          [applicationTheme]=\"'light'\"\n          [iconName]=\"isOpened ? 'Close-in-line' : 'Menu-burger-in-line'\"\n          [justIcon]=\"true\"\n        ></ui-button>\n      }\n\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 [label]=\"route.badgeOptions!.text\" [rebrandColor]=\"route.badgeOptions!.color\"></ui-badge>\n            }\n            <span>{{ route.title }}</span>\n          </a>\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 (isTablet$ | async) {\n          <button mat-button class=\"profile-menu\" (click)=\"openMobileMenu()\">\n            <ng-container [ngTemplateOutlet]=\"buttonContent\"></ng-container>\n          </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            <ng-container [ngTemplateOutlet]=\"buttonContent\"></ng-container>\n          </button>\n        }\n\n        <ng-template #buttonContent>\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        </ng-template>\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 .side-sheet-container{display:block;height:100%;position:unset!important}:host ::ng-deep .mat-drawer-container{height:100%}:host ::ng-deep .mat-drawer{padding:0!important;background:#fff!important}:host ::ng-deep .mat-drawer .mat-drawer-inner-container .header{padding:16px 16px 16px 24px!important;border-bottom:1px solid #d3d3d3;height:64px}:host ::ng-deep .mat-drawer .mat-drawer-inner-container .header ui-logo{width:100%;margin:0!important;display:flex;justify-content:flex-start}:host ::ng-deep .mat-drawer .mat-drawer-inner-container .header ui-logo img{width:fit-content;height:32px}@media (max-width: 1024px) and (min-width: 600px){:host ::ng-deep .mat-drawer{margin-top:64px;height:calc(100% - 64px);max-width:375px}:host ::ng-deep .mat-drawer .header{display:none!important}:host ::ng-deep .mat-drawer-backdrop{background:transparent!important;opacity:0!important}}@media (max-width: 600px){:host ::ng-deep .mat-drawer{margin-top:64px;height:calc(100% - 64px)}:host ::ng-deep .mat-drawer .header{display:none!important}:host ::ng-deep .mat-drawer-backdrop{background:transparent!important;opacity:0!important}}.mat-toolbar{height:80px;background-color:#fff!important}.mat-toolbar .custom-toolbar{width:100%;height:100%;background-color:#fff;max-width:1440px;padding:0}@media (max-width: 600px){.mat-toolbar .custom-toolbar{padding:0 16px}}@media (min-width: 1024px) and (max-width: 1280px){.mat-toolbar .custom-toolbar{padding:0 40px!important}}@media (min-width: 960px) and (max-width: 1024px){.mat-toolbar .custom-toolbar{padding:0 40px!important}}@media (max-width: 960px){.mat-toolbar .custom-toolbar{padding:0 20px!important}}@media (max-width: 1024px){.mat-toolbar .custom-toolbar{padding:0 64px}}.mat-toolbar .custom-toolbar ui-logo.logo{cursor:pointer;height:43px;align-self:center;display:flex;margin-left:0!important}@media (max-width: 1024px){.mat-toolbar .custom-toolbar ui-logo.logo{min-width:22px}}.mat-toolbar .custom-toolbar .navigation{height:100%;margin-left:40px}.mat-toolbar .custom-toolbar .navigation a{display:flex;align-items:center;height:100%;background:#fff;cursor:pointer;color:#000;text-decoration:none}.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 .actions{width:100%;display:flex;align-items:center;justify-content:flex-end;margin-right:7px}@media (max-width: 600px){.mat-toolbar .custom-toolbar .actions{margin-right:0}}.mat-toolbar .custom-toolbar .actions .profile-menu{font-weight:600;font-size:14px;height:100%;margin-right:-20px}.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] .custom-toolbar,.mat-toolbar[theme=light] .custom-toolbar{justify-content:space-between}@media (min-width: 1280px){.mat-toolbar[theme=dark] .custom-toolbar,.mat-toolbar[theme=light] .custom-toolbar{padding:0 64px!important}}.mat-toolbar[theme=dark] ui-logo.logo,.mat-toolbar[theme=light] ui-logo.logo{justify-content:flex-start;margin-left:40px}@media (min-width: 1024px){.mat-toolbar[theme=dark] ui-logo.logo,.mat-toolbar[theme=light] ui-logo.logo{min-width:160px}}@media (max-width: 1024px){.mat-toolbar[theme=dark] ui-logo.logo,.mat-toolbar[theme=light] ui-logo.logo{margin-left:20px!important}}.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] .actions .profile-menu,.mat-toolbar[theme=light] .actions .profile-menu{margin-right:0}.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:4px;z-index:1}.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}.mat-toolbar[theme=dark] ui-logo,.mat-toolbar[theme=light] ui-logo{width:100%;display:flex;justify-content:center;align-items:center;margin:0!important}.mat-toolbar[theme=dark] ui-logo ::ng-deep img,.mat-toolbar[theme=light] ui-logo ::ng-deep img{height:32px}.mat-toolbar[theme=dark] .custom-toolbar,.mat-toolbar[theme=light] .custom-toolbar{align-items:center}.mat-toolbar[theme=dark] .custom-toolbar .navigation,.mat-toolbar[theme=dark] .custom-toolbar .actions,.mat-toolbar[theme=light] .custom-toolbar .navigation,.mat-toolbar[theme=light] .custom-toolbar .actions{display:none}}.custom-actions{display:flex;align-items:center;height:64px}@media (max-width: 1024px){.custom-actions{display:none}}.row{display:flex;flex-direction:row}.menu-item{display:flex;align-items:center}.menu-item ui-icon{margin-right:16px}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.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: "component", type: i7.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: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7.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: i8.LogoComponent, selector: "ui-logo", inputs: ["type", "applicationTheme", "label", "width", "allowResizing"] }, { kind: "component", type: i9.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "component", type: i1.AvatarComponent, selector: "ui-avatar", inputs: ["size", "imageUrl", "name", "tooltipText", "allowEdit", "applicationTheme", "backgroundColor"], outputs: ["editClick"] }, { kind: "component", type: i2$1.SideSheetComponent, selector: "ui-side-sheet", inputs: ["position", "applicationTheme"], outputs: ["openChange"] }, { kind: "component", type: i2.ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "hasBackground", "tooltipPosition", "role", "iconFilled"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { 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: "component", type: i13.BadgeComponent, selector: "ui-badge", inputs: ["label", "staticLabel", "icon", "color", "variant", "notificationsAmount", "applicationTheme", "rebrandColor", "truncateLabel", "enableAnimation"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i14.UiTranslatePipe, name: "uiTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: NavbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: NavbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-navbar', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ui-side-sheet\n  [applicationTheme]=\"applicationTheme\"\n  (openChange)=\"onChangeMenuState($event, screenSize)\"\n  [position]=\"(isMobile$ | async) ? 'start' : 'end'\"\n>\n  <mat-toolbar [attr.theme]=\"applicationTheme\">\n    <div class=\"custom-toolbar row\">\n      <ui-logo\n        [applicationTheme]=\"applicationTheme\"\n        class=\"logo\"\n        (click)=\"navigate('')\"\n        [allowResizing]=\"true\"\n        [width]=\"(isMobile$ | async) ? 160 : (isTablet$ | async) ? 30 : 160\"\n        [type]=\"\n          (isMobile$ | async)\n            ? logoType.DEFAULT\n            : (isTablet$ | async)\n              ? logoType.PRIMARY_BRANDMARK_PINK\n              : logoType.DEFAULT\n        \"\n      ></ui-logo>\n\n      <ui-button\n        (click)=\"openMobileMenu()\"\n        *ngIf=\"isMobile$ | async\"\n        [variant]=\"'text'\"\n        [companyColor]=\"'#242424'\"\n        [applicationTheme]=\"'light'\"\n        [iconName]=\"isOpened ? 'Close-in-line' : 'Menu-burger-in-line'\"\n        [justIcon]=\"true\"\n      ></ui-button>\n\n      <div class=\"navigation row\">\n        <a\n          *ngFor=\"let route of routes\"\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          <ui-badge\n            *ngIf=\"route?.badgeOptions\"\n            [label]=\"route.badgeOptions!.text\"\n            [rebrandColor]=\"route.badgeOptions!.color\"\n          ></ui-badge>\n          <span>{{ route.title }}</span>\n        </a>\n      </div>\n\n      <div class=\"actions\">\n        <div class=\"custom-actions\">\n          <ng-content select=\"[actions]\"></ng-content>\n        </div>\n\n        <button mat-button class=\"profile-menu\" *ngIf=\"isTablet$ | async; else pc\" (click)=\"openMobileMenu()\">\n          <ng-container [ngTemplateOutlet]=\"buttonContent\"></ng-container>\n        </button>\n\n        <ng-template #pc>\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            <ng-container [ngTemplateOutlet]=\"buttonContent\"></ng-container>\n          </button>\n        </ng-template>\n\n        <ng-template #buttonContent>\n          <div class=\"profile-button-content\">\n            <ng-container *ngIf=\"isAvatar; else onlyName\">\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            </ng-container>\n\n            <ng-template #onlyName>\n              {{ userName }}\n            </ng-template>\n\n            <mat-icon *ngIf=\"applicationTheme === 'classic'; else newThemeIcon\" iconPositionEnd>expand_more</mat-icon>\n            <ng-template #newThemeIcon>\n              <ui-icon\n                [size]=\"'24'\"\n                *ngIf=\"!isAvatar\"\n                [name]=\"menu._panelAnimationState === 'void' ? 'Arrow-chevron-down-filled' : 'Arrow-chevron-up-filled'\"\n                [applicationTheme]=\"applicationTheme\"\n              ></ui-icon>\n            </ng-template>\n          </div>\n        </ng-template>\n      </div>\n    </div>\n  </mat-toolbar>\n\n  <ng-content></ng-content>\n\n  <mat-menu [class]=\"menuClass\" #menu=\"matMenu\">\n    <ng-container *ngIf=\"applicationTheme === 'classic'; else newTheme\">\n      <button\n        *ngFor=\"let e of menuItems\"\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          <ui-icon *ngIf=\"e?.icon\" [name]=\"e.icon\" size=\"24\"></ui-icon>\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    </ng-container>\n\n    <ng-template #newTheme>\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    </ng-template>\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 .side-sheet-container{display:block;height:100%;position:unset!important}:host ::ng-deep .mat-drawer-container{height:100%}:host ::ng-deep .mat-drawer{padding:0!important;background:#fff!important}:host ::ng-deep .mat-drawer .mat-drawer-inner-container .header{padding:16px 16px 16px 24px!important;border-bottom:1px solid #d3d3d3;height:64px}:host ::ng-deep .mat-drawer .mat-drawer-inner-container .header ui-logo{width:100%;margin:0!important;display:flex;justify-content:flex-start}:host ::ng-deep .mat-drawer .mat-drawer-inner-container .header ui-logo img{width:fit-content;height:32px}@media (max-width: 1024px) and (min-width: 600px){:host ::ng-deep .mat-drawer{margin-top:64px;height:calc(100% - 64px);max-width:375px}:host ::ng-deep .mat-drawer .header{display:none!important}:host ::ng-deep .mat-drawer-backdrop{background:transparent!important;opacity:0!important}}@media (max-width: 600px){:host ::ng-deep .mat-drawer{margin-top:64px;height:calc(100% - 64px)}:host ::ng-deep .mat-drawer .header{display:none!important}:host ::ng-deep .mat-drawer-backdrop{background:transparent!important;opacity:0!important}}.mat-toolbar{height:80px;background-color:#fff!important}.mat-toolbar .custom-toolbar{width:100%;height:100%;background-color:#fff;max-width:1440px;padding:0}@media (max-width: 600px){.mat-toolbar .custom-toolbar{padding:0 16px}}@media (min-width: 1024px) and (max-width: 1280px){.mat-toolbar .custom-toolbar{padding:0 40px!important}}@media (min-width: 960px) and (max-width: 1024px){.mat-toolbar .custom-toolbar{padding:0 40px!important}}@media (max-width: 960px){.mat-toolbar .custom-toolbar{padding:0 20px!important}}@media (max-width: 1024px){.mat-toolbar .custom-toolbar{padding:0 64px}}.mat-toolbar .custom-toolbar ui-logo.logo{cursor:pointer;height:43px;align-self:center;display:flex;margin-left:0!important}@media (max-width: 1024px){.mat-toolbar .custom-toolbar ui-logo.logo{min-width:22px}}.mat-toolbar .custom-toolbar .navigation{height:100%;margin-left:40px}.mat-toolbar .custom-toolbar .navigation a{display:flex;align-items:center;height:100%;background:#fff;cursor:pointer;color:#000;text-decoration:none}.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 .actions{width:100%;display:flex;align-items:center;justify-content:flex-end;margin-right:7px}@media (max-width: 600px){.mat-toolbar .custom-toolbar .actions{margin-right:0}}.mat-toolbar .custom-toolbar .actions .profile-menu{font-weight:600;font-size:14px;height:100%;margin-right:-20px}.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] .custom-toolbar,.mat-toolbar[theme=light] .custom-toolbar{justify-content:space-between}@media (min-width: 1280px){.mat-toolbar[theme=dark] .custom-toolbar,.mat-toolbar[theme=light] .custom-toolbar{padding:0 64px!important}}.mat-toolbar[theme=dark] ui-logo.logo,.mat-toolbar[theme=light] ui-logo.logo{justify-content:flex-start;margin-left:40px}@media (min-width: 1024px){.mat-toolbar[theme=dark] ui-logo.logo,.mat-toolbar[theme=light] ui-logo.logo{min-width:160px}}@media (max-width: 1024px){.mat-toolbar[theme=dark] ui-logo.logo,.mat-toolbar[theme=light] ui-logo.logo{margin-left:20px!important}}.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] .actions .profile-menu,.mat-toolbar[theme=light] .actions .profile-menu{margin-right:0}.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:4px;z-index:1}.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}.mat-toolbar[theme=dark] ui-logo,.mat-toolbar[theme=light] ui-logo{width:100%;display:flex;justify-content:center;align-items:center;margin:0!important}.mat-toolbar[theme=dark] ui-logo ::ng-deep img,.mat-toolbar[theme=light] ui-logo ::ng-deep img{height:32px}.mat-toolbar[theme=dark] .custom-toolbar,.mat-toolbar[theme=light] .custom-toolbar{align-items:center}.mat-toolbar[theme=dark] .custom-toolbar .navigation,.mat-toolbar[theme=dark] .custom-toolbar .actions,.mat-toolbar[theme=light] .custom-toolbar .navigation,.mat-toolbar[theme=light] .custom-toolbar .actions{display:none}}.custom-actions{display:flex;align-items:center;height:64px}@media (max-width: 1024px){.custom-actions{display:none}}.row{display:flex;flex-direction:row}.menu-item{display:flex;align-items:center}.menu-item ui-icon{margin-right:16px}\n"] }]
+            args: [{ selector: 'ui-navbar', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ui-side-sheet\n  [applicationTheme]=\"applicationTheme\"\n  (openChange)=\"onChangeMenuState($event, screenSize)\"\n  [position]=\"(isMobile$ | async) ? 'start' : 'end'\"\n>\n  <mat-toolbar [attr.theme]=\"applicationTheme\">\n    <div class=\"custom-toolbar row\">\n      <ui-logo\n        [applicationTheme]=\"applicationTheme\"\n        class=\"logo\"\n        (click)=\"navigate('')\"\n        [allowResizing]=\"true\"\n        [width]=\"(isMobile$ | async) ? 160 : (isTablet$ | async) ? 30 : 160\"\n        [type]=\"\n          (isMobile$ | async)\n            ? logoType.DEFAULT\n            : (isTablet$ | async)\n              ? logoType.PRIMARY_BRANDMARK_PINK\n              : logoType.DEFAULT\n        \"\n      ></ui-logo>\n\n      @if (isMobile$ | async) {\n        <ui-button\n          (click)=\"openMobileMenu()\"\n          [variant]=\"'text'\"\n          [companyColor]=\"'#242424'\"\n          [applicationTheme]=\"'light'\"\n          [iconName]=\"isOpened ? 'Close-in-line' : 'Menu-burger-in-line'\"\n          [justIcon]=\"true\"\n        ></ui-button>\n      }\n\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 [label]=\"route.badgeOptions!.text\" [rebrandColor]=\"route.badgeOptions!.color\"></ui-badge>\n            }\n            <span>{{ route.title }}</span>\n          </a>\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 (isTablet$ | async) {\n          <button mat-button class=\"profile-menu\" (click)=\"openMobileMenu()\">\n            <ng-container [ngTemplateOutlet]=\"buttonContent\"></ng-container>\n          </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            <ng-container [ngTemplateOutlet]=\"buttonContent\"></ng-container>\n          </button>\n        }\n\n        <ng-template #buttonContent>\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        </ng-template>\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 .side-sheet-container{display:block;height:100%;position:unset!important}:host ::ng-deep .mat-drawer-container{height:100%}:host ::ng-deep .mat-drawer{padding:0!important;background:#fff!important}:host ::ng-deep .mat-drawer .mat-drawer-inner-container .header{padding:16px 16px 16px 24px!important;border-bottom:1px solid #d3d3d3;height:64px}:host ::ng-deep .mat-drawer .mat-drawer-inner-container .header ui-logo{width:100%;margin:0!important;display:flex;justify-content:flex-start}:host ::ng-deep .mat-drawer .mat-drawer-inner-container .header ui-logo img{width:fit-content;height:32px}@media (max-width: 1024px) and (min-width: 600px){:host ::ng-deep .mat-drawer{margin-top:64px;height:calc(100% - 64px);max-width:375px}:host ::ng-deep .mat-drawer .header{display:none!important}:host ::ng-deep .mat-drawer-backdrop{background:transparent!important;opacity:0!important}}@media (max-width: 600px){:host ::ng-deep .mat-drawer{margin-top:64px;height:calc(100% - 64px)}:host ::ng-deep .mat-drawer .header{display:none!important}:host ::ng-deep .mat-drawer-backdrop{background:transparent!important;opacity:0!important}}.mat-toolbar{height:80px;background-color:#fff!important}.mat-toolbar .custom-toolbar{width:100%;height:100%;background-color:#fff;max-width:1440px;padding:0}@media (max-width: 600px){.mat-toolbar .custom-toolbar{padding:0 16px}}@media (min-width: 1024px) and (max-width: 1280px){.mat-toolbar .custom-toolbar{padding:0 40px!important}}@media (min-width: 960px) and (max-width: 1024px){.mat-toolbar .custom-toolbar{padding:0 40px!important}}@media (max-width: 960px){.mat-toolbar .custom-toolbar{padding:0 20px!important}}@media (max-width: 1024px){.mat-toolbar .custom-toolbar{padding:0 64px}}.mat-toolbar .custom-toolbar ui-logo.logo{cursor:pointer;height:43px;align-self:center;display:flex;margin-left:0!important}@media (max-width: 1024px){.mat-toolbar .custom-toolbar ui-logo.logo{min-width:22px}}.mat-toolbar .custom-toolbar .navigation{height:100%;margin-left:40px}.mat-toolbar .custom-toolbar .navigation a{display:flex;align-items:center;height:100%;background:#fff;cursor:pointer;color:#000;text-decoration:none}.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 .actions{width:100%;display:flex;align-items:center;justify-content:flex-end;margin-right:7px}@media (max-width: 600px){.mat-toolbar .custom-toolbar .actions{margin-right:0}}.mat-toolbar .custom-toolbar .actions .profile-menu{font-weight:600;font-size:14px;height:100%;margin-right:-20px}.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] .custom-toolbar,.mat-toolbar[theme=light] .custom-toolbar{justify-content:space-between}@media (min-width: 1280px){.mat-toolbar[theme=dark] .custom-toolbar,.mat-toolbar[theme=light] .custom-toolbar{padding:0 64px!important}}.mat-toolbar[theme=dark] ui-logo.logo,.mat-toolbar[theme=light] ui-logo.logo{justify-content:flex-start;margin-left:40px}@media (min-width: 1024px){.mat-toolbar[theme=dark] ui-logo.logo,.mat-toolbar[theme=light] ui-logo.logo{min-width:160px}}@media (max-width: 1024px){.mat-toolbar[theme=dark] ui-logo.logo,.mat-toolbar[theme=light] ui-logo.logo{margin-left:20px!important}}.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] .actions .profile-menu,.mat-toolbar[theme=light] .actions .profile-menu{margin-right:0}.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:4px;z-index:1}.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}.mat-toolbar[theme=dark] ui-logo,.mat-toolbar[theme=light] ui-logo{width:100%;display:flex;justify-content:center;align-items:center;margin:0!important}.mat-toolbar[theme=dark] ui-logo ::ng-deep img,.mat-toolbar[theme=light] ui-logo ::ng-deep img{height:32px}.mat-toolbar[theme=dark] .custom-toolbar,.mat-toolbar[theme=light] .custom-toolbar{align-items:center}.mat-toolbar[theme=dark] .custom-toolbar .navigation,.mat-toolbar[theme=dark] .custom-toolbar .actions,.mat-toolbar[theme=light] .custom-toolbar .navigation,.mat-toolbar[theme=light] .custom-toolbar .actions{display:none}}.custom-actions{display:flex;align-items:center;height:64px}@media (max-width: 1024px){.custom-actions{display:none}}.row{display:flex;flex-direction:row}.menu-item{display:flex;align-items:center}.menu-item ui-icon{margin-right:16px}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.BreakpointObserver }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -266,7 +264,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                     args: ['CANOPYUI_DEFAULT_APPLICATION_THEME']
                 }] }, { type: i2$1.SideSheetService }, { type: i0.DestroyRef }], propDecorators: { routes: [{
                 type: Input
-            }], userName: [{
+            }], activedRoute: [{ type: i0.Input, args: [{ isSignal: true, alias: "activedRoute", required: false }] }], userName: [{
                 type: Input
             }], email: [{
                 type: Input
@@ -297,8 +295,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             }] } });
 
 class NavbarComponentModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: NavbarComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.20", ngImport: i0, type: NavbarComponentModule, declarations: [NavbarComponent], imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: NavbarComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.18", ngImport: i0, type: NavbarComponentModule, declarations: [NavbarComponent], imports: [CommonModule,
             MatToolbarModule,
             MatIconModule,
             MatButtonModule,
@@ -312,7 +310,7 @@ class NavbarComponentModule {
             ButtonComponentModule,
             MobileNavbarSideSheetComponent,
             BadgeComponentModule], exports: [NavbarComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: NavbarComponentModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: NavbarComponentModule, imports: [CommonModule,
             MatToolbarModule,
             MatIconModule,
             MatButtonModule,
@@ -326,7 +324,7 @@ class NavbarComponentModule {
             MobileNavbarSideSheetComponent,
             BadgeComponentModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: NavbarComponentModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: NavbarComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [NavbarComponent],

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

@@ -1 +1 @@
-{"version":3,"file":"testgorilla-tgo-ui-components-navbar.mjs","sources":["../../../components/navbar/mobile-navbar-side-sheet/mobile-navbar-side-sheet.component.ts","../../../components/navbar/mobile-navbar-side-sheet/mobile-navbar-side-sheet.component.html","../../../components/navbar/navbar.component.ts","../../../components/navbar/navbar.component.html","../../../components/navbar/navbar.component.module.ts","../../../components/navbar/testgorilla-tgo-ui-components-navbar.ts"],"sourcesContent":["import {\n  Component,\n  computed,\n  EventEmitter,\n  input,\n  Input,\n  InputSignal,\n  Output,\n  Signal,\n  TemplateRef,\n} from '@angular/core';\nimport { IRoute, MenuItem } from '../navbar.model';\nimport { AsyncPipe, NgClass, NgForOf, NgIf, NgTemplateOutlet } from '@angular/common';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatMenuModule } from '@angular/material/menu';\nimport { UiTranslatePipe } from '@testgorilla/tgo-ui/components/core';\nimport { MatButtonModule } from '@angular/material/button';\nimport { AccordionComponentModule } from '@testgorilla/tgo-ui/components/accordion';\nimport { AvatarComponentModule, AvatarSize } from '@testgorilla/tgo-ui/components/avatar';\nimport { ButtonComponentModule } from '@testgorilla/tgo-ui/components/button';\nimport { ApplicationTheme } from '@testgorilla/tgo-ui/components/core';\n\n@Component({\n  selector: 'ui-mobile-navbar-side-sheet',\n  templateUrl: './mobile-navbar-side-sheet.component.html',\n  styleUrls: ['./mobile-navbar-side-sheet.component.scss'],\n  imports: [\n    NgForOf,\n    NgClass,\n    IconComponentModule,\n    MatIconModule,\n    MatMenuModule,\n    UiTranslatePipe,\n    MatButtonModule,\n    AccordionComponentModule,\n    NgIf,\n    NgTemplateOutlet,\n    AvatarComponentModule,\n    ButtonComponentModule,\n    AsyncPipe,\n  ],\n})\nexport class MobileNavbarSideSheetComponent {\n  @Input() routes: IRoute[] = [];\n  activedRoute: InputSignal<string> = input('');\n  @Input() email = '';\n  @Input() userName = '';\n  @Input() menuItems: MenuItem[] = [];\n  @Input() contentTemplateRef: TemplateRef<any>;\n  @Input() userInfoExtraTemplateRef: TemplateRef<any>;\n  @Input() menuContentTemplateRef: TemplateRef<any>;\n  @Input() isDesktop = false;\n  @Input() applicationTheme: ApplicationTheme = 'light';\n\n  @Output() navigateEvent: EventEmitter<string> = new EventEmitter<string>();\n  @Output() menuItemClicked: EventEmitter<string> = new EventEmitter<string>();\n  @Output() logoutEvent: EventEmitter<void> = new EventEmitter<void>();\n\n  protected readonly translationContext = 'NAVBAR.';\n  protected avatarSize = AvatarSize;\n\n  activeRoutesMap: Signal<Map<string, boolean>> = computed(() => {\n    const currentRoute = this.activedRoute();\n    return new Map(this.routes.map(route => [route.id, currentRoute?.startsWith(route.id)]));\n  });\n\n  navigate(routeId: string) {\n    this.navigateEvent.emit(`/${routeId}`);\n  }\n\n  logout(): void {\n    this.logoutEvent.emit();\n  }\n\n  clickMenuItem(id: string) {\n    this.menuItemClicked.emit(id);\n  }\n}\n","<div class=\"mobile-navbar-container\">\n  <ng-container *ngIf=\"isDesktop\" [ngTemplateOutlet]=\"userInfo\"></ng-container>\n\n  @if (menuContentTemplateRef) {\n    <ng-container [ngTemplateOutlet]=\"menuContentTemplateRef\"></ng-container>\n  }\n\n  <div class=\"routes\">\n    <div\n      *ngFor=\"let route of routes\"\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  </div>\n\n  <div class=\"settings\">\n    <ng-container *ngFor=\"let e of menuItems\">\n      <div *ngIf=\"e\" 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    </ng-container>\n  </div>\n</div>\n\n<div class=\"bottom-content\" [ngClass]=\"{ desktop: isDesktop }\">\n  <ng-container *ngIf=\"!isDesktop\" [ngTemplateOutlet]=\"contentTemplateRef\"></ng-container>\n  <ng-container *ngIf=\"isDesktop; else tablet\">\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  </ng-container>\n\n  <ng-template #tablet>\n    <ng-container [ngTemplateOutlet]=\"userInfo\"></ng-container>\n  </ng-template>\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      <ui-button\n        *ngIf=\"!isDesktop\"\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    </div>\n  </div>\n</ng-template>\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  DestroyRef,\n  EventEmitter,\n  Inject,\n  input,\n  Input,\n  InputSignal,\n  Optional,\n  Output,\n  Signal,\n  TemplateRef,\n} from '@angular/core';\nimport { IRoute, MenuItem, MenuState, ScreenSize } from './navbar.model';\nimport { ApplicationTheme, ScreenBreakpoints } from '@testgorilla/tgo-ui/components/core';\nimport { map, ReplaySubject, startWith, Subject, switchMap, tap } from 'rxjs';\nimport { SideSheetService } from '@testgorilla/tgo-ui/components/side-sheet';\nimport { MobileNavbarSideSheetComponent } from './mobile-navbar-side-sheet/mobile-navbar-side-sheet.component';\nimport { BreakpointObserver } from '@angular/cdk/layout';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { LogoTypeEnum } from '@testgorilla/tgo-ui/components/logo';\nimport { AvatarSize } from '@testgorilla/tgo-ui/components/avatar';\n\n@Component({\n  selector: 'ui-navbar',\n  templateUrl: './navbar.component.html',\n  styleUrls: ['./navbar.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  standalone: false,\n})\nexport class NavbarComponent {\n  /**\n   * Routes object\n   *\n   * @type {IRoute}\n   * @memberof NavbarComponent\n   * @ignore\n   */\n  @Input() routes: IRoute[] = [];\n\n  /**\n   * Actived route id\n   *\n   * @type {InputSignal<string>}\n   * @memberof NavbarComponent\n   */\n  activedRoute: InputSignal<string> = input('');\n\n  /**\n   * User first name and last name\n   *\n   * @type {string}\n   * @memberof NavbarComponent\n   */\n  @Input() userName = '';\n\n  /**\n   * User email\n   *\n   * @type {string}\n   * @memberof NavbarComponent\n   */\n  @Input() email = '';\n\n  /**\n   * Menu items to show in menu above the Log out button\n   *\n   * @type {string}\n   * @memberof NavbarComponent\n   */\n  @Input() menuItems: MenuItem[] = [];\n\n  /**\n   *\n   * Defines the application theme\n   *\n   * @type {ApplicationTheme}\n   * @memberof NavbarComponent\n   */\n  @Input() applicationTheme: ApplicationTheme = 'light';\n\n  /**\n   *\n   * It's ng-content for mobile version\n   *\n   * @type {ApplicationTheme}\n   * @memberof NavbarComponent\n   */\n  @Input() contentTemplateRef: TemplateRef<any>;\n  /**\n   * Additional info template reference for the extra user info in the dropdown/sidesheet\n   * @type {TemplateRef<any>}\n   * @memberof NavbarComponent\n   */\n  @Input() userInfoExtraTemplateRef: TemplateRef<any>;\n\n  /**\n   * Custom content template reference for the menu section between user info and menu items.\n   * Use this to add custom components like credits display.\n   * @type {TemplateRef<any>}\n   * @memberof NavbarComponent\n   */\n  @Input() menuContentTemplateRef: TemplateRef<any>;\n\n  /**\n   * Mobile breakpoint\n   * @type {number}\n   * @memberof NavbarComponent\n   */\n  @Input() set mobileBreakpoint(value: number) {\n    if (value) {\n      this._mobileBreakpoint$.next(value);\n    }\n  }\n\n  /**\n   *\n   * Show avatar with user initials\n   *\n   * @type {boolean}\n   * @memberof NavbarComponent\n   */\n  @Input() isAvatar = true;\n\n  /**\n   * Sets class for the menu\n   *\n   * @type {string}\n   * @memberof NavbarComponent\n   */\n  @Input() menuClass = '';\n\n  /**\n   * @ignore\n   */\n  @Output() navigateEvent: EventEmitter<string> = new EventEmitter<string>();\n\n  /**\n   * @ignore\n   */\n  @Output() menuItemClicked: EventEmitter<string> = new EventEmitter<string>();\n\n  /**\n   * @ignore\n   */\n  @Output() logoutEvent: EventEmitter<void> = new EventEmitter<void>();\n  @Output() menuState: EventEmitter<MenuState> = new EventEmitter<MenuState>();\n\n  protected screenSize: ScreenSize = 'desktop';\n  protected readonly translationContext = 'NAVBAR.';\n  private readonly _mobileBreakpoint$ = new ReplaySubject<number>(1);\n  private readonly _tabletBreakpoint$ = new ReplaySubject<number>(1);\n  private readonly mobileBreakpointObs$ = this._mobileBreakpoint$.pipe(startWith(ScreenBreakpoints.MOBILE));\n  private readonly tabletBreakpointObs$ = this._tabletBreakpoint$.pipe(startWith(ScreenBreakpoints.TABLET));\n  protected readonly isMobile$ = this.mobileBreakpointObs$.pipe(\n    switchMap(breakpoint =>\n      this.breakpointObserver.observe(`(max-width: ${breakpoint}px)`).pipe(\n        map(v => v.matches),\n        tap(isMobile => (isMobile ? (this.screenSize = 'mobile') : 'desktop'))\n      )\n    )\n  );\n  protected readonly isTablet$ = this.tabletBreakpointObs$.pipe(\n    switchMap(breakpoint =>\n      this.breakpointObserver.observe(`(max-width: ${breakpoint}px)`).pipe(\n        map(v => v.matches),\n        tap(isTablet => (isTablet ? (this.screenSize = 'tablet') : 'desktop'))\n      )\n    )\n  );\n  protected isOpened = false;\n  protected logoType = LogoTypeEnum;\n\n  activeRoutesMap: Signal<Map<string, boolean>> = computed(() => {\n    const currentRoute = this.activedRoute();\n    return new Map(this.routes.map(route => [route.id, currentRoute?.startsWith(route.id)]));\n  });\n\n  constructor(\n    private readonly breakpointObserver: BreakpointObserver,\n    @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme,\n    private sideSheetService: SideSheetService,\n    private destroyRef: DestroyRef\n  ) {\n    if (defaultAppTheme) {\n      this.applicationTheme = defaultAppTheme;\n    }\n  }\n\n  openMobileMenu(): void {\n    const isSideSheetClosed$ = new Subject<void>();\n    const navbarSideSheetComponent = this.sideSheetService.open<MobileNavbarSideSheetComponent>({\n      componentRef: MobileNavbarSideSheetComponent,\n      showLogo: true,\n      closed: isSideSheetClosed$,\n    });\n\n    navbarSideSheetComponent.userName = this.userName;\n    navbarSideSheetComponent.menuItems = this.menuItems;\n    navbarSideSheetComponent.activedRoute = this.activedRoute;\n    navbarSideSheetComponent.routes = this.routes;\n    navbarSideSheetComponent.email = this.email;\n    navbarSideSheetComponent.contentTemplateRef = this.contentTemplateRef;\n    navbarSideSheetComponent.userInfoExtraTemplateRef = this.userInfoExtraTemplateRef;\n    navbarSideSheetComponent.menuContentTemplateRef = this.menuContentTemplateRef;\n    navbarSideSheetComponent.applicationTheme = this.applicationTheme;\n\n    navbarSideSheetComponent.logoutEvent.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {\n      this.logoutEvent.emit();\n      isSideSheetClosed$.next();\n    });\n\n    navbarSideSheetComponent.menuItemClicked.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(value => {\n      this.menuItemClicked.emit(value);\n      isSideSheetClosed$.next();\n    });\n\n    navbarSideSheetComponent.navigateEvent.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(value => {\n      this.navigateEvent.emit(value);\n      isSideSheetClosed$.next();\n    });\n  }\n\n  navigate(routeId: string) {\n    this.navigateEvent.emit(`/${routeId}`);\n  }\n\n  logout(): void {\n    this.logoutEvent.emit();\n  }\n\n  clickMenuItem(id: string) {\n    this.menuItemClicked.emit(id);\n  }\n\n  onChangeMenuState(isOpened: boolean, screenSize: ScreenSize) {\n    this.isOpened = isOpened;\n    this.menuState.emit({ isOpened, screenSize });\n  }\n\n  protected readonly AvatarSize = AvatarSize;\n}\n","<ui-side-sheet\n  [applicationTheme]=\"applicationTheme\"\n  (openChange)=\"onChangeMenuState($event, screenSize)\"\n  [position]=\"(isMobile$ | async) ? 'start' : 'end'\"\n>\n  <mat-toolbar [attr.theme]=\"applicationTheme\">\n    <div class=\"custom-toolbar row\">\n      <ui-logo\n        [applicationTheme]=\"applicationTheme\"\n        class=\"logo\"\n        (click)=\"navigate('')\"\n        [allowResizing]=\"true\"\n        [width]=\"(isMobile$ | async) ? 160 : (isTablet$ | async) ? 30 : 160\"\n        [type]=\"\n          (isMobile$ | async)\n            ? logoType.DEFAULT\n            : (isTablet$ | async)\n              ? logoType.PRIMARY_BRANDMARK_PINK\n              : logoType.DEFAULT\n        \"\n      ></ui-logo>\n\n      <ui-button\n        (click)=\"openMobileMenu()\"\n        *ngIf=\"isMobile$ | async\"\n        [variant]=\"'text'\"\n        [companyColor]=\"'#242424'\"\n        [applicationTheme]=\"'light'\"\n        [iconName]=\"isOpened ? 'Close-in-line' : 'Menu-burger-in-line'\"\n        [justIcon]=\"true\"\n      ></ui-button>\n\n      <div class=\"navigation row\">\n        <a\n          *ngFor=\"let route of routes\"\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          <ui-badge\n            *ngIf=\"route?.badgeOptions\"\n            [label]=\"route.badgeOptions!.text\"\n            [rebrandColor]=\"route.badgeOptions!.color\"\n          ></ui-badge>\n          <span>{{ route.title }}</span>\n        </a>\n      </div>\n\n      <div class=\"actions\">\n        <div class=\"custom-actions\">\n          <ng-content select=\"[actions]\"></ng-content>\n        </div>\n\n        <button mat-button class=\"profile-menu\" *ngIf=\"isTablet$ | async; else pc\" (click)=\"openMobileMenu()\">\n          <ng-container [ngTemplateOutlet]=\"buttonContent\"></ng-container>\n        </button>\n\n        <ng-template #pc>\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            <ng-container [ngTemplateOutlet]=\"buttonContent\"></ng-container>\n          </button>\n        </ng-template>\n\n        <ng-template #buttonContent>\n          <div class=\"profile-button-content\">\n            <ng-container *ngIf=\"isAvatar; else onlyName\">\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            </ng-container>\n\n            <ng-template #onlyName>\n              {{ userName }}\n            </ng-template>\n\n            <mat-icon *ngIf=\"applicationTheme === 'classic'; else newThemeIcon\" iconPositionEnd>expand_more</mat-icon>\n            <ng-template #newThemeIcon>\n              <ui-icon\n                [size]=\"'24'\"\n                *ngIf=\"!isAvatar\"\n                [name]=\"menu._panelAnimationState === 'void' ? 'Arrow-chevron-down-filled' : 'Arrow-chevron-up-filled'\"\n                [applicationTheme]=\"applicationTheme\"\n              ></ui-icon>\n            </ng-template>\n          </div>\n        </ng-template>\n      </div>\n    </div>\n  </mat-toolbar>\n\n  <ng-content></ng-content>\n\n  <mat-menu [class]=\"menuClass\" #menu=\"matMenu\">\n    <ng-container *ngIf=\"applicationTheme === 'classic'; else newTheme\">\n      <button\n        *ngFor=\"let e of menuItems\"\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          <ui-icon *ngIf=\"e?.icon\" [name]=\"e.icon\" size=\"24\"></ui-icon>\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    </ng-container>\n\n    <ng-template #newTheme>\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    </ng-template>\n  </mat-menu>\n</ui-side-sheet>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatRippleModule } from '@angular/material/core';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatMenuModule } from '@angular/material/menu';\nimport { MatToolbarModule } from '@angular/material/toolbar';\nimport { LogoComponentModule } from '@testgorilla/tgo-ui/components/logo';\nimport { NavbarComponent } from './navbar.component';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { UiTranslatePipe } from '@testgorilla/tgo-ui/components/core';\nimport { AvatarComponentModule } from '@testgorilla/tgo-ui/components/avatar';\nimport { SideSheetComponentModule } from '@testgorilla/tgo-ui/components/side-sheet';\nimport { ButtonComponentModule } from '@testgorilla/tgo-ui/components/button';\nimport { MobileNavbarSideSheetComponent } from './mobile-navbar-side-sheet/mobile-navbar-side-sheet.component';\nimport { BadgeComponentModule } from '@testgorilla/tgo-ui/components/badge';\n\n@NgModule({\n  declarations: [NavbarComponent],\n  imports: [\n    CommonModule,\n    MatToolbarModule,\n    MatIconModule,\n    MatButtonModule,\n    MatRippleModule,\n    MatMenuModule,\n    LogoComponentModule,\n    IconComponentModule,\n    UiTranslatePipe,\n    AvatarComponentModule,\n    SideSheetComponentModule,\n    ButtonComponentModule,\n    MobileNavbarSideSheetComponent,\n    BadgeComponentModule,\n  ],\n  exports: [NavbarComponent],\n})\nexport class NavbarComponentModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i2","i10","i11","i12.MobileNavbarSideSheetComponent"],"mappings":"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"}
+{"version":3,"file":"testgorilla-tgo-ui-components-navbar.mjs","sources":["../../../components/navbar/mobile-navbar-side-sheet/mobile-navbar-side-sheet.component.ts","../../../components/navbar/mobile-navbar-side-sheet/mobile-navbar-side-sheet.component.html","../../../components/navbar/navbar.component.ts","../../../components/navbar/navbar.component.html","../../../components/navbar/navbar.component.module.ts","../../../components/navbar/testgorilla-tgo-ui-components-navbar.ts"],"sourcesContent":["import {\n  Component,\n  computed,\n  EventEmitter,\n  input,\n  Input,\n  InputSignal,\n  Output,\n  Signal,\n  TemplateRef,\n} from '@angular/core';\nimport { IRoute, MenuItem } from '../navbar.model';\nimport { AsyncPipe, NgClass, NgTemplateOutlet } from '@angular/common';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatMenuModule } from '@angular/material/menu';\nimport { UiTranslatePipe } from '@testgorilla/tgo-ui/components/core';\nimport { MatButtonModule } from '@angular/material/button';\nimport { AccordionComponentModule } from '@testgorilla/tgo-ui/components/accordion';\nimport { AvatarComponentModule, AvatarSize } from '@testgorilla/tgo-ui/components/avatar';\nimport { ButtonComponentModule } from '@testgorilla/tgo-ui/components/button';\nimport { ApplicationTheme } from '@testgorilla/tgo-ui/components/core';\n\n@Component({\n  selector: 'ui-mobile-navbar-side-sheet',\n  templateUrl: './mobile-navbar-side-sheet.component.html',\n  styleUrls: ['./mobile-navbar-side-sheet.component.scss'],\n  imports: [\n    NgClass,\n    IconComponentModule,\n    MatIconModule,\n    MatMenuModule,\n    UiTranslatePipe,\n    MatButtonModule,\n    AccordionComponentModule,\n    NgTemplateOutlet,\n    AvatarComponentModule,\n    ButtonComponentModule,\n    AsyncPipe,\n  ],\n})\nexport class MobileNavbarSideSheetComponent {\n  @Input() routes: IRoute[] = [];\n  activedRoute: InputSignal<string> = input('');\n  @Input() email = '';\n  @Input() userName = '';\n  @Input() menuItems: MenuItem[] = [];\n  @Input() contentTemplateRef: TemplateRef<any>;\n  @Input() userInfoExtraTemplateRef: TemplateRef<any>;\n  @Input() menuContentTemplateRef: TemplateRef<any>;\n  @Input() isDesktop = false;\n  @Input() applicationTheme: ApplicationTheme = 'light';\n\n  @Output() navigateEvent: EventEmitter<string> = new EventEmitter<string>();\n  @Output() menuItemClicked: EventEmitter<string> = new EventEmitter<string>();\n  @Output() logoutEvent: EventEmitter<void> = new EventEmitter<void>();\n\n  protected readonly translationContext = 'NAVBAR.';\n  protected avatarSize = AvatarSize;\n\n  activeRoutesMap: Signal<Map<string, boolean>> = computed(() => {\n    const currentRoute = this.activedRoute();\n    return new Map(this.routes.map(route => [route.id, currentRoute?.startsWith(route.id)]));\n  });\n\n  navigate(routeId: string) {\n    this.navigateEvent.emit(`/${routeId}`);\n  }\n\n  logout(): void {\n    this.logoutEvent.emit();\n  }\n\n  clickMenuItem(id: string) {\n    this.menuItemClicked.emit(id);\n  }\n}\n","<div class=\"mobile-navbar-container\">\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  <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  <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) {\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","import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  DestroyRef,\n  EventEmitter,\n  Inject,\n  input,\n  Input,\n  InputSignal,\n  Optional,\n  Output,\n  Signal,\n  TemplateRef,\n} from '@angular/core';\nimport { IRoute, MenuItem, MenuState, ScreenSize } from './navbar.model';\nimport { ApplicationTheme, ScreenBreakpoints } from '@testgorilla/tgo-ui/components/core';\nimport { map, ReplaySubject, startWith, Subject, switchMap, tap } from 'rxjs';\nimport { SideSheetService } from '@testgorilla/tgo-ui/components/side-sheet';\nimport { MobileNavbarSideSheetComponent } from './mobile-navbar-side-sheet/mobile-navbar-side-sheet.component';\nimport { BreakpointObserver } from '@angular/cdk/layout';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { LogoTypeEnum } from '@testgorilla/tgo-ui/components/logo';\nimport { AvatarSize } from '@testgorilla/tgo-ui/components/avatar';\n\n@Component({\n  selector: 'ui-navbar',\n  templateUrl: './navbar.component.html',\n  styleUrls: ['./navbar.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  standalone: false,\n})\nexport class NavbarComponent {\n  /**\n   * Routes object\n   *\n   * @type {IRoute}\n   * @memberof NavbarComponent\n   * @ignore\n   */\n  @Input() routes: IRoute[] = [];\n\n  /**\n   * Actived route id\n   *\n   * @type {InputSignal<string>}\n   * @memberof NavbarComponent\n   */\n  activedRoute: InputSignal<string> = input('');\n\n  /**\n   * User first name and last name\n   *\n   * @type {string}\n   * @memberof NavbarComponent\n   */\n  @Input() userName = '';\n\n  /**\n   * User email\n   *\n   * @type {string}\n   * @memberof NavbarComponent\n   */\n  @Input() email = '';\n\n  /**\n   * Menu items to show in menu above the Log out button\n   *\n   * @type {string}\n   * @memberof NavbarComponent\n   */\n  @Input() menuItems: MenuItem[] = [];\n\n  /**\n   *\n   * Defines the application theme\n   *\n   * @type {ApplicationTheme}\n   * @memberof NavbarComponent\n   */\n  @Input() applicationTheme: ApplicationTheme = 'light';\n\n  /**\n   *\n   * It's ng-content for mobile version\n   *\n   * @type {ApplicationTheme}\n   * @memberof NavbarComponent\n   */\n  @Input() contentTemplateRef: TemplateRef<any>;\n  /**\n   * Additional info template reference for the extra user info in the dropdown/sidesheet\n   * @type {TemplateRef<any>}\n   * @memberof NavbarComponent\n   */\n  @Input() userInfoExtraTemplateRef: TemplateRef<any>;\n\n  /**\n   * Custom content template reference for the menu section between user info and menu items.\n   * Use this to add custom components like credits display.\n   * @type {TemplateRef<any>}\n   * @memberof NavbarComponent\n   */\n  @Input() menuContentTemplateRef: TemplateRef<any>;\n\n  /**\n   * Mobile breakpoint\n   * @type {number}\n   * @memberof NavbarComponent\n   */\n  @Input() set mobileBreakpoint(value: number) {\n    if (value) {\n      this._mobileBreakpoint$.next(value);\n    }\n  }\n\n  /**\n   *\n   * Show avatar with user initials\n   *\n   * @type {boolean}\n   * @memberof NavbarComponent\n   */\n  @Input() isAvatar = true;\n\n  /**\n   * Sets class for the menu\n   *\n   * @type {string}\n   * @memberof NavbarComponent\n   */\n  @Input() menuClass = '';\n\n  /**\n   * @ignore\n   */\n  @Output() navigateEvent: EventEmitter<string> = new EventEmitter<string>();\n\n  /**\n   * @ignore\n   */\n  @Output() menuItemClicked: EventEmitter<string> = new EventEmitter<string>();\n\n  /**\n   * @ignore\n   */\n  @Output() logoutEvent: EventEmitter<void> = new EventEmitter<void>();\n  @Output() menuState: EventEmitter<MenuState> = new EventEmitter<MenuState>();\n\n  protected screenSize: ScreenSize = 'desktop';\n  protected readonly translationContext = 'NAVBAR.';\n  private readonly _mobileBreakpoint$ = new ReplaySubject<number>(1);\n  private readonly _tabletBreakpoint$ = new ReplaySubject<number>(1);\n  private readonly mobileBreakpointObs$ = this._mobileBreakpoint$.pipe(startWith(ScreenBreakpoints.MOBILE));\n  private readonly tabletBreakpointObs$ = this._tabletBreakpoint$.pipe(startWith(ScreenBreakpoints.TABLET));\n  protected readonly isMobile$ = this.mobileBreakpointObs$.pipe(\n    switchMap(breakpoint =>\n      this.breakpointObserver.observe(`(max-width: ${breakpoint}px)`).pipe(\n        map(v => v.matches),\n        tap(isMobile => (isMobile ? (this.screenSize = 'mobile') : 'desktop'))\n      )\n    )\n  );\n  protected readonly isTablet$ = this.tabletBreakpointObs$.pipe(\n    switchMap(breakpoint =>\n      this.breakpointObserver.observe(`(max-width: ${breakpoint}px)`).pipe(\n        map(v => v.matches),\n        tap(isTablet => (isTablet ? (this.screenSize = 'tablet') : 'desktop'))\n      )\n    )\n  );\n  protected isOpened = false;\n  protected logoType = LogoTypeEnum;\n\n  activeRoutesMap: Signal<Map<string, boolean>> = computed(() => {\n    const currentRoute = this.activedRoute();\n    return new Map(this.routes.map(route => [route.id, currentRoute?.startsWith(route.id)]));\n  });\n\n  constructor(\n    private readonly breakpointObserver: BreakpointObserver,\n    @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme,\n    private sideSheetService: SideSheetService,\n    private destroyRef: DestroyRef\n  ) {\n    if (defaultAppTheme) {\n      this.applicationTheme = defaultAppTheme;\n    }\n  }\n\n  openMobileMenu(): void {\n    const isSideSheetClosed$ = new Subject<void>();\n    const navbarSideSheetComponent = this.sideSheetService.open<MobileNavbarSideSheetComponent>({\n      componentRef: MobileNavbarSideSheetComponent,\n      showLogo: true,\n      closed: isSideSheetClosed$,\n    });\n\n    navbarSideSheetComponent.userName = this.userName;\n    navbarSideSheetComponent.menuItems = this.menuItems;\n    navbarSideSheetComponent.activedRoute = this.activedRoute;\n    navbarSideSheetComponent.routes = this.routes;\n    navbarSideSheetComponent.email = this.email;\n    navbarSideSheetComponent.contentTemplateRef = this.contentTemplateRef;\n    navbarSideSheetComponent.userInfoExtraTemplateRef = this.userInfoExtraTemplateRef;\n    navbarSideSheetComponent.menuContentTemplateRef = this.menuContentTemplateRef;\n    navbarSideSheetComponent.applicationTheme = this.applicationTheme;\n\n    navbarSideSheetComponent.logoutEvent.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {\n      this.logoutEvent.emit();\n      isSideSheetClosed$.next();\n    });\n\n    navbarSideSheetComponent.menuItemClicked.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(value => {\n      this.menuItemClicked.emit(value);\n      isSideSheetClosed$.next();\n    });\n\n    navbarSideSheetComponent.navigateEvent.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(value => {\n      this.navigateEvent.emit(value);\n      isSideSheetClosed$.next();\n    });\n  }\n\n  navigate(routeId: string) {\n    this.navigateEvent.emit(`/${routeId}`);\n  }\n\n  logout(): void {\n    this.logoutEvent.emit();\n  }\n\n  clickMenuItem(id: string) {\n    this.menuItemClicked.emit(id);\n  }\n\n  onChangeMenuState(isOpened: boolean, screenSize: ScreenSize) {\n    this.isOpened = isOpened;\n    this.menuState.emit({ isOpened, screenSize });\n  }\n\n  protected readonly AvatarSize = AvatarSize;\n}\n","<ui-side-sheet\n  [applicationTheme]=\"applicationTheme\"\n  (openChange)=\"onChangeMenuState($event, screenSize)\"\n  [position]=\"(isMobile$ | async) ? 'start' : 'end'\"\n>\n  <mat-toolbar [attr.theme]=\"applicationTheme\">\n    <div class=\"custom-toolbar row\">\n      <ui-logo\n        [applicationTheme]=\"applicationTheme\"\n        class=\"logo\"\n        (click)=\"navigate('')\"\n        [allowResizing]=\"true\"\n        [width]=\"(isMobile$ | async) ? 160 : (isTablet$ | async) ? 30 : 160\"\n        [type]=\"\n          (isMobile$ | async)\n            ? logoType.DEFAULT\n            : (isTablet$ | async)\n              ? logoType.PRIMARY_BRANDMARK_PINK\n              : logoType.DEFAULT\n        \"\n      ></ui-logo>\n\n      @if (isMobile$ | async) {\n        <ui-button\n          (click)=\"openMobileMenu()\"\n          [variant]=\"'text'\"\n          [companyColor]=\"'#242424'\"\n          [applicationTheme]=\"'light'\"\n          [iconName]=\"isOpened ? 'Close-in-line' : 'Menu-burger-in-line'\"\n          [justIcon]=\"true\"\n        ></ui-button>\n      }\n\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 [label]=\"route.badgeOptions!.text\" [rebrandColor]=\"route.badgeOptions!.color\"></ui-badge>\n            }\n            <span>{{ route.title }}</span>\n          </a>\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 (isTablet$ | async) {\n          <button mat-button class=\"profile-menu\" (click)=\"openMobileMenu()\">\n            <ng-container [ngTemplateOutlet]=\"buttonContent\"></ng-container>\n          </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            <ng-container [ngTemplateOutlet]=\"buttonContent\"></ng-container>\n          </button>\n        }\n\n        <ng-template #buttonContent>\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        </ng-template>\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","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatRippleModule } from '@angular/material/core';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatMenuModule } from '@angular/material/menu';\nimport { MatToolbarModule } from '@angular/material/toolbar';\nimport { LogoComponentModule } from '@testgorilla/tgo-ui/components/logo';\nimport { NavbarComponent } from './navbar.component';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { UiTranslatePipe } from '@testgorilla/tgo-ui/components/core';\nimport { AvatarComponentModule } from '@testgorilla/tgo-ui/components/avatar';\nimport { SideSheetComponentModule } from '@testgorilla/tgo-ui/components/side-sheet';\nimport { ButtonComponentModule } from '@testgorilla/tgo-ui/components/button';\nimport { MobileNavbarSideSheetComponent } from './mobile-navbar-side-sheet/mobile-navbar-side-sheet.component';\nimport { BadgeComponentModule } from '@testgorilla/tgo-ui/components/badge';\n\n@NgModule({\n  declarations: [NavbarComponent],\n  imports: [\n    CommonModule,\n    MatToolbarModule,\n    MatIconModule,\n    MatButtonModule,\n    MatRippleModule,\n    MatMenuModule,\n    LogoComponentModule,\n    IconComponentModule,\n    UiTranslatePipe,\n    AvatarComponentModule,\n    SideSheetComponentModule,\n    ButtonComponentModule,\n    MobileNavbarSideSheetComponent,\n    BadgeComponentModule,\n  ],\n  exports: [NavbarComponent],\n})\nexport class NavbarComponentModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i2","i10","i11","i12.MobileNavbarSideSheetComponent"],"mappings":"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"}