@tilde-nlp/ngx-menu 6.1.43 → 6.1.44

package/fesm2022/tilde-nlp-ngx-menu.mjs

@@ -1,32 +1,32 @@
 import * as i0 from '@angular/core';
-import { Injectable, Optional, Inject, Component, Input, EventEmitter, Output, NgModule } from '@angular/core';
+import { Injectable, Optional, Inject, Component, Input, EventEmitter, Output, inject, NgModule } from '@angular/core';
 import * as i2 from '@tilde-nlp/ngx-common';
-import { ResolutionHelper, PlausibleModule, SelectLanguageDialogComponent } from '@tilde-nlp/ngx-common';
+import { ResolutionHelper, PlausibleModule, LanguageTranslateModule } from '@tilde-nlp/ngx-common';
 import * as i1$1 from '@angular/router';
 import { NavigationEnd, RouterModule } from '@angular/router';
 import { map, BehaviorSubject, filter } from 'rxjs';
 import * as i1 from '@tilde-nlp/ngx-strapi';
 import { STRAPI_API_CONFIG_TOKEN } from '@tilde-nlp/ngx-strapi';
 import { CollectionTypes } from '@tilde-nlp/strapi-models';
-import * as i1$2 from '@ngbracket/ngx-layout/flex';
-import * as i2$2 from '@ngbracket/ngx-layout/extended';
-import * as i4 from '@angular/common';
+import * as i3 from '@angular/common';
 import { CommonModule } from '@angular/common';
+import { FlexLayoutModule } from '@ngbracket/ngx-layout';
 import * as i5 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i2$1 from '@angular/material/icon';
-import { MatIconModule } from '@angular/material/icon';
+import { MatDialogModule } from '@angular/material/dialog';
 import * as i7 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
+import { MatListModule } from '@angular/material/list';
 import * as i6 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
-import * as i4$1 from '@angular/material/divider';
+import * as i2$1 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
 import * as i8 from '@ngx-translate/core';
-import { TranslateModule } from '@ngx-translate/core';
-import { FlexLayoutModule } from '@ngbracket/ngx-layout';
-import { MatDialogModule } from '@angular/material/dialog';
-import { MatListModule } from '@angular/material/list';
+import { TranslateService, TranslateModule } from '@ngx-translate/core';
 import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import * as i1$2 from '@ngbracket/ngx-layout/flex';
+import * as i2$2 from '@ngbracket/ngx-layout/extended';
+import * as i4 from '@angular/material/divider';
 
 /** Necessary for menu components to determine where loaded data from strapi should be placed - either in front of pre defined items or in end. */
 var StrapiDataLocation;
@@ -277,6 +277,208 @@ class NavBaseComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(NavBaseComponent, { className: "NavBaseComponent", filePath: "lib\\components\\nav-base\\nav-base.component.ts", lineNumber: 13 }); })();
 
+const _c0$2 = ["*"];
+function SideNavMenuComponent_a_14_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "a", 2);
+    i0.ɵɵpipe(1, "translate");
+    i0.ɵɵlistener("click", function SideNavMenuComponent_a_14_Template_a_click_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.logoClick($event)); });
+    i0.ɵɵelement(2, "img", 3);
+    i0.ɵɵelementStart(3, "span", 4);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("no-click", ctx_r1.menuSettings == null ? null : ctx_r1.menuSettings.disableLogoNavigation);
+    i0.ɵɵproperty("libPlausibleEvent", ctx_r1.LOGOCLICK_PLAUSIBLE_EVENT)("href", ctx_r1.baseUrl, i0.ɵɵsanitizeUrl);
+    i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(1, 7, "MENU.ARIA_LABELS.LOGO"));
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("src", ctx_r1.menuLogoImage, i0.ɵɵsanitizeUrl);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.productName, " ");
+} }
+function SideNavMenuComponent_Conditional_24_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "lib-menu-lang-switcher", 18);
+    i0.ɵɵlistener("changeLanguageEvent", function SideNavMenuComponent_Conditional_24_Template_lib_menu_lang_switcher_changeLanguageEvent_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.changeLanguage($event)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("isCollapsed", ctx_r1.collapsed)("languages", ctx_r1.supportedLanguages);
+} }
+class SideNavMenuComponent extends NavBaseComponent {
+    #username;
+    get username() { return this.#username; }
+    set username(value) {
+        // if username is passed whith whitespace in begginining, it breaks UI, so trim it for safety.
+        this.#username = value?.trim();
+    }
+    get menuLogoImage() {
+        return this.collapsed
+            ? this.menuSettings.menuLogoCollapsed ?? this.menuSettings.menuLogo
+            : this.menuSettings.menuLogo;
+    }
+    get sideNavWidth() {
+        return this.collapsed ? this.menuSettings.collapsedWidth : this.menuSettings.expandedWidth;
+    }
+    constructor(strapiLinkService, domService, menuItems) {
+        super(menuItems);
+        this.strapiLinkService = strapiLinkService;
+        this.domService = domService;
+        this.menuItems = menuItems;
+        this.menuSettings = {
+            expandedWidth: '241px',
+            collapsedWidth: '56px',
+            menuLogo: '',
+            menuLogoCollapsed: '',
+            disableStrapi: false,
+            disableLogoNavigation: false,
+            userOptions: []
+        };
+        this.changeLanguageEvent = new EventEmitter();
+        this.collapsed = false;
+        this.COLLAPSED_LOCAL_STORAGE_KEY = "TLD_MENU_SIDE_NAV_COLLAPSED";
+        //#region Plausible event variables for collapse button
+        this.COLLAPSE_PLAUSIBLE_EVENT_ID = "collapseMenu";
+        this.COLLAPSE_PLAUSIBLE_ACTION_KEY = "action";
+        this.LOGOCLICK_PLAUSIBLE_ACTION_ID = "tilde_logo_click";
+        this.LOGOCLICK_PLAUSIBLE_EVENT = {
+            eventId: this.LOGOCLICK_PLAUSIBLE_ACTION_ID,
+            properties: []
+        };
+        this.EXPAND_PLAUSIBLE_EVENT = {
+            eventId: this.COLLAPSE_PLAUSIBLE_EVENT_ID,
+            properties: [{ key: this.COLLAPSE_PLAUSIBLE_ACTION_KEY, value: "expand" }]
+        };
+        this.COLLAPSE_PLAUSIBLE_EVENT = {
+            eventId: this.COLLAPSE_PLAUSIBLE_EVENT_ID,
+            properties: [{ key: this.COLLAPSE_PLAUSIBLE_ACTION_KEY, value: "collapse" }]
+        };
+        this.baseUrl = menuItems.menuSharedConfig.baseUrl || '';
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.getColapsedFromLocalStorage();
+    }
+    logoClick(event) {
+        this.strapiLinkService.strapiLinkClick(event);
+    }
+    toggleCollapse() {
+        this.collapsed = !this.collapsed;
+        this.setColapsedFromLocalStorage();
+    }
+    linkCallback(link) {
+        if (link.callback) {
+            link.callback();
+        }
+    }
+    changeLanguage(lang) {
+        this.changeLanguageEvent.emit(lang);
+    }
+    getColapsedFromLocalStorage() {
+        if (!this.domService.localStorage) {
+            return;
+        }
+        this.collapsed = (this.domService.localStorage.getItem(this.COLLAPSED_LOCAL_STORAGE_KEY) == 'true' || ResolutionHelper.isMobileRes()) ? true : false;
+    }
+    setColapsedFromLocalStorage() {
+        if (!this.domService.localStorage) {
+            return;
+        }
+        this.domService.localStorage.setItem(this.COLLAPSED_LOCAL_STORAGE_KEY, this.collapsed.toString());
+    }
+    static { this.ɵfac = function SideNavMenuComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SideNavMenuComponent)(i0.ɵɵdirectiveInject(i1.StrapiLinkService), i0.ɵɵdirectiveInject(i2.DOMService), i0.ɵɵdirectiveInject(MenuItemsService)); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SideNavMenuComponent, selectors: [["lib-side-nav-menu"]], inputs: { username: "username", menuSettings: "menuSettings", productName: "productName", supportedLanguages: "supportedLanguages" }, outputs: { changeLanguageEvent: "changeLanguageEvent" }, features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c0$2, decls: 28, vars: 37, consts: [["fxHide.gt-xs", ""], [1, "mobile-header", 3, "fxHide"], ["fxFlex", "3.125em", "fxLayoutAlign", "start center", 3, "click", "libPlausibleEvent", "href"], ["height", "40", "width", "40", "alt", "logo", 1, "menu-logo", 3, "src"], [1, "menu-product-name"], ["mat-icon-button", "", 1, "toggler", 3, "click", "libPlausibleEvent"], ["fxLayout", "column", 1, "menu-container", 3, "ngClass.lt-sm"], ["fxLayout", "column", "fxFlexFill", "", 1, "content"], ["fxLayout", "row", 1, "menu-container-header", 3, "fxLayoutAlign"], ["fxFlex", "3.125em", "fxLayoutAlign", "start center", 3, "libPlausibleEvent", "no-click", "href", "click", 4, "ngIf"], ["mat-icon-button", "", 1, "toggler", 3, "click", "libPlausibleEvent", "matTooltip"], ["fxHide.gt-xs", "", 3, "ngClass.lt-sm"], ["fxHide.lt-sm", ""], ["fxLayout", "column", 1, "menu-wrapper"], ["role", "navigation", 3, "toggleCollapseEvent", "direction", "isOpen", "active"], [3, "isCollapsed", "languages"], ["fxFlex", "", "fxLayout", "column"], [3, "linkCallbackEvent", "userOptions", "username", "collapsed"], [3, "changeLanguageEvent", "isCollapsed", "languages"]], template: function SideNavMenuComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "a", 2);
+            i0.ɵɵpipe(3, "translate");
+            i0.ɵɵlistener("click", function SideNavMenuComponent_Template_a_click_2_listener($event) { return ctx.logoClick($event); });
+            i0.ɵɵelement(4, "img", 3);
+            i0.ɵɵelementStart(5, "span", 4);
+            i0.ɵɵtext(6);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(7, "button", 5);
+            i0.ɵɵpipe(8, "translate");
+            i0.ɵɵlistener("click", function SideNavMenuComponent_Template_button_click_7_listener() { return ctx.toggleCollapse(); });
+            i0.ɵɵelementStart(9, "mat-icon");
+            i0.ɵɵtext(10, "menu");
+            i0.ɵɵelementEnd()()()();
+            i0.ɵɵelementStart(11, "div", 6)(12, "div", 7)(13, "div", 8);
+            i0.ɵɵtemplate(14, SideNavMenuComponent_a_14_Template, 5, 9, "a", 9);
+            i0.ɵɵelementStart(15, "button", 10);
+            i0.ɵɵpipe(16, "translate");
+            i0.ɵɵpipe(17, "translate");
+            i0.ɵɵlistener("click", function SideNavMenuComponent_Template_button_click_15_listener() { return ctx.toggleCollapse(); });
+            i0.ɵɵelementStart(18, "mat-icon", 11);
+            i0.ɵɵtext(19, "close");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(20, "mat-icon", 12);
+            i0.ɵɵtext(21);
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(22, "div", 13)(23, "menu-columns", 14);
+            i0.ɵɵlistener("toggleCollapseEvent", function SideNavMenuComponent_Template_menu_columns_toggleCollapseEvent_23_listener() { return ctx.toggleCollapse(); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(24, SideNavMenuComponent_Conditional_24_Template, 1, 2, "lib-menu-lang-switcher", 15);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(25, "div", 16);
+            i0.ɵɵprojection(26);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(27, "lib-menu-profile", 17);
+            i0.ɵɵlistener("linkCallbackEvent", function SideNavMenuComponent_Template_lib_menu_profile_linkCallbackEvent_27_listener($event) { return ctx.linkCallback($event); });
+            i0.ɵɵelementEnd()()();
+        } if (rf & 2) {
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("fxHide", !ctx.collapsed);
+            i0.ɵɵadvance();
+            i0.ɵɵclassProp("no-click", ctx.menuSettings == null ? null : ctx.menuSettings.disableLogoNavigation);
+            i0.ɵɵproperty("libPlausibleEvent", ctx.LOGOCLICK_PLAUSIBLE_EVENT)("href", ctx.baseUrl, i0.ɵɵsanitizeUrl);
+            i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(3, 29, "MENU.ARIA_LABELS.LOGO"));
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("src", ctx.menuLogoImage, i0.ɵɵsanitizeUrl);
+            i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate1(" ", ctx.productName, " ");
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("libPlausibleEvent", ctx.collapsed ? ctx.EXPAND_PLAUSIBLE_EVENT : ctx.COLLAPSE_PLAUSIBLE_EVENT);
+            i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(8, 31, "ARIA_LABELS.MENU_TOGGLER"));
+            i0.ɵɵadvance(4);
+            i0.ɵɵstyleProp("width", ctx.sideNavWidth);
+            i0.ɵɵclassProp("collapsed", ctx.collapsed);
+            i0.ɵɵproperty("ngClass.lt-sm", "mobile");
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("fxLayoutAlign", ctx.collapsed ? "center center" : "space-between center");
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", !ctx.collapsed);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("libPlausibleEvent", ctx.collapsed ? ctx.EXPAND_PLAUSIBLE_EVENT : ctx.COLLAPSE_PLAUSIBLE_EVENT)("matTooltip", i0.ɵɵpipeBind1(16, 33, ctx.collapsed ? "MENU.EXPAND" : "MENU.COLLAPSE"));
+            i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(17, 35, "ARIA_LABELS.MENU_TOGGLER"));
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("ngClass.lt-sm", "mob-close-icon");
+            i0.ɵɵadvance(3);
+            i0.ɵɵtextInterpolate(ctx.collapsed ? "keyboard_double_arrow_right" : "keyboard_double_arrow_left");
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("direction", ctx.direction)("isOpen", !ctx.collapsed)("active", ctx.active);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.supportedLanguages.length > 1 ? 24 : -1);
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("userOptions", ctx.menuSettings.userOptions)("username", ctx.username)("collapsed", ctx.collapsed);
+        } }, styles: ["a[_ngcontent-%COMP%]{text-decoration:none}.no-click[_ngcontent-%COMP%]{pointer-events:none!important}.mobile-header[_ngcontent-%COMP%]{display:flex;justify-content:space-between;padding:23px 27px;background-color:#fcfcfc;border:1px solid var(--base-70)}.mobile.menu-container.collapsed[_ngcontent-%COMP%]{display:none!important}.mobile.menu-container[_ngcontent-%COMP%]:not(.collapsed){display:block!important;position:fixed;min-width:100vw;min-height:100dvh;z-index:1000}button[_ngcontent-%COMP%]:has(.mob-close-icon){margin-right:14px}.menu-container[_ngcontent-%COMP%]   [_ngcontent-%COMP%]::-webkit-scrollbar{width:5px}.menu-container[_ngcontent-%COMP%]   [_ngcontent-%COMP%]::-webkit-scrollbar-thumb{background:var(--base-95);background-clip:padding-box}.menu-container[_ngcontent-%COMP%]   [_ngcontent-%COMP%]::-webkit-scrollbar-track{background:var(--base-100)}.menu-product-name[_ngcontent-%COMP%]{white-space:nowrap;margin-left:12px;font-weight:600;color:var(--base-10)}.menu-container[_ngcontent-%COMP%]{max-height:100dvh;white-space:nowrap;height:100%;transition:width .2s ease;min-height:100dvh;overflow:auto;background:var(--base-100);border-right:2px solid var(--base-95)}.menu-container[_ngcontent-%COMP%]   .menu-container-header[_ngcontent-%COMP%]{margin:24px 0;max-height:40px}.menu-container.collapsed[_ngcontent-%COMP%]   .menu-container-header[_ngcontent-%COMP%]{margin:24px 0 32px!important}.menu-container[_ngcontent-%COMP%]   .content[_ngcontent-%COMP%]:not(.collapsed){overflow-x:hidden;padding:0 12px}.menu-container[_ngcontent-%COMP%]   .content[_ngcontent-%COMP%]:not(.collapsed)   .menu-logo[_ngcontent-%COMP%]{margin-left:16px;max-width:100%}.menu-container[_ngcontent-%COMP%]   .divider[_ngcontent-%COMP%]{width:100%}[_nghost-%COMP%]     .collapsed .profile-wrapper{margin:36px 0!important}[_nghost-%COMP%]     .mobile .profile-name{max-width:60vw}[_nghost-%COMP%]     .menu-item{display:flex;padding:16px!important;border-radius:4px!important}[_nghost-%COMP%]     .child-list .menu-item{padding:8px 46px!important}[_nghost-%COMP%]     .collapsed .menu-item{padding:0!important;width:40px;height:40px;border-radius:50%!important}[_nghost-%COMP%]     .active-menu-item{background-color:var(--base-95)!important}[_nghost-%COMP%]     .menu-item-title{margin-left:12px}tld-menu-icon[_ngcontent-%COMP%]{margin-right:10px}[_nghost-%COMP%]  button.collapse-btn .mat-mdc-button-persistent-ripple, [_nghost-%COMP%]  button.toggler .mat-mdc-button-persistent-ripple{display:none}[_nghost-%COMP%]     .mobile .child-list .menu-item{padding:8px 54px!important}  .cdk-overlay-container .profile-menu,   .cdk-overlay-container .lang-menu{min-width:250px!important;margin:10px 0!important}  .mat-mdc-menu-item .mat-icon{margin-right:5px!important}  .collapsed .profile-wrapper{justify-content:center!important}"] }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SideNavMenuComponent, [{
+        type: Component,
+        args: [{ selector: 'lib-side-nav-menu', template: "<div fxHide.gt-xs>\r\n  <div [fxHide]=\"!collapsed\" class=\"mobile-header\">\r\n    <a [libPlausibleEvent]=\"LOGOCLICK_PLAUSIBLE_EVENT\" fxFlex=\"3.125em\" [href]=\"baseUrl\" [class.no-click]=\"menuSettings?.disableLogoNavigation\"\r\n      [attr.aria-label]=\"'MENU.ARIA_LABELS.LOGO' | translate\" (click)=\"logoClick($event)\" fxLayoutAlign=\"start center\"\r\n    >\r\n      <img height=\"40\" width=\"40\" class=\"menu-logo\" [src]=\"menuLogoImage\" alt=\"logo\" />\r\n      <span class=\"menu-product-name\">\r\n        {{ productName }}\r\n      </span>\r\n    </a>\r\n\r\n    <button\r\n      mat-icon-button\r\n      class=\"toggler\"\r\n      [attr.aria-label]=\"'ARIA_LABELS.MENU_TOGGLER' | translate\"\r\n      [libPlausibleEvent]=\"collapsed ? EXPAND_PLAUSIBLE_EVENT : COLLAPSE_PLAUSIBLE_EVENT\"\r\n      (click)=\"toggleCollapse()\"\r\n    >\r\n      <mat-icon>menu</mat-icon>\r\n    </button>\r\n  </div>\r\n</div>\r\n\r\n<div [ngClass.lt-sm]=\"'mobile'\" class=\"menu-container\" [style.width]=\"sideNavWidth\" fxLayout=\"column\" [class.collapsed]=\"collapsed\">\r\n  <div class=\"content\" fxLayout=\"column\" fxFlexFill>\r\n    <div class=\"menu-container-header\" fxLayout=\"row\" [fxLayoutAlign]=\"collapsed ? 'center center' : 'space-between center'\">\r\n      <a *ngIf=\"!collapsed\" [libPlausibleEvent]=\"LOGOCLICK_PLAUSIBLE_EVENT\" fxFlex=\"3.125em\" [class.no-click]=\"menuSettings?.disableLogoNavigation\" [href]=\"baseUrl\"\r\n        [attr.aria-label]=\"'MENU.ARIA_LABELS.LOGO' | translate\" (click)=\"logoClick($event)\" fxLayoutAlign=\"start center\"\r\n      >\r\n        <img height=\"40\" width=\"40\" class=\"menu-logo\" [src]=\"menuLogoImage\" alt=\"logo\" />\r\n        <span class=\"menu-product-name\">\r\n          {{ productName }}\r\n        </span>\r\n      </a>\r\n\r\n      <button\r\n        mat-icon-button\r\n        class=\"toggler\"\r\n        [attr.aria-label]=\"'ARIA_LABELS.MENU_TOGGLER' | translate\"\r\n        [libPlausibleEvent]=\"collapsed ? EXPAND_PLAUSIBLE_EVENT : COLLAPSE_PLAUSIBLE_EVENT\"\r\n        [matTooltip]=\"(collapsed ? 'MENU.EXPAND' : 'MENU.COLLAPSE') | translate\"\r\n        (click)=\"toggleCollapse()\"\r\n      >\r\n        <mat-icon fxHide.gt-xs [ngClass.lt-sm]=\"'mob-close-icon'\">close</mat-icon>\r\n        <mat-icon fxHide.lt-sm>{{ collapsed ? 'keyboard_double_arrow_right' : 'keyboard_double_arrow_left' }}</mat-icon>\r\n      </button>\r\n    </div>\r\n\r\n    <div class=\"menu-wrapper\" fxLayout=\"column\">\r\n      <menu-columns (toggleCollapseEvent)=\"toggleCollapse()\" [direction]=\"direction\" role=\"navigation\" [isOpen]=\"!collapsed\"\r\n        [active]=\"active\"></menu-columns>\r\n\r\n        @if (supportedLanguages.length > 1) {\r\n          <lib-menu-lang-switcher [isCollapsed]=\"collapsed\" [languages]=\"supportedLanguages\" (changeLanguageEvent)=\"changeLanguage($event)\"></lib-menu-lang-switcher>\r\n        }\r\n    </div>\r\n    <div fxFlex fxLayout=\"column\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n\r\n  <lib-menu-profile\r\n    [userOptions]=\"menuSettings.userOptions\"\r\n    [username]=\"username\"\r\n    [collapsed]=\"collapsed\"\r\n    (linkCallbackEvent)=\"linkCallback($event)\"\r\n  ></lib-menu-profile>\r\n</div>\r\n", styles: ["a{text-decoration:none}.no-click{pointer-events:none!important}.mobile-header{display:flex;justify-content:space-between;padding:23px 27px;background-color:#fcfcfc;border:1px solid var(--base-70)}.mobile.menu-container.collapsed{display:none!important}.mobile.menu-container:not(.collapsed){display:block!important;position:fixed;min-width:100vw;min-height:100dvh;z-index:1000}button:has(.mob-close-icon){margin-right:14px}.menu-container ::-webkit-scrollbar{width:5px}.menu-container ::-webkit-scrollbar-thumb{background:var(--base-95);background-clip:padding-box}.menu-container ::-webkit-scrollbar-track{background:var(--base-100)}.menu-product-name{white-space:nowrap;margin-left:12px;font-weight:600;color:var(--base-10)}.menu-container{max-height:100dvh;white-space:nowrap;height:100%;transition:width .2s ease;min-height:100dvh;overflow:auto;background:var(--base-100);border-right:2px solid var(--base-95)}.menu-container .menu-container-header{margin:24px 0;max-height:40px}.menu-container.collapsed .menu-container-header{margin:24px 0 32px!important}.menu-container .content:not(.collapsed){overflow-x:hidden;padding:0 12px}.menu-container .content:not(.collapsed) .menu-logo{margin-left:16px;max-width:100%}.menu-container .divider{width:100%}:host ::ng-deep .collapsed .profile-wrapper{margin:36px 0!important}:host ::ng-deep .mobile .profile-name{max-width:60vw}:host ::ng-deep .menu-item{display:flex;padding:16px!important;border-radius:4px!important}:host ::ng-deep .child-list .menu-item{padding:8px 46px!important}:host ::ng-deep .collapsed .menu-item{padding:0!important;width:40px;height:40px;border-radius:50%!important}:host ::ng-deep .active-menu-item{background-color:var(--base-95)!important}:host ::ng-deep .menu-item-title{margin-left:12px}tld-menu-icon{margin-right:10px}:host::ng-deep button.collapse-btn .mat-mdc-button-persistent-ripple,:host::ng-deep button.toggler .mat-mdc-button-persistent-ripple{display:none}:host ::ng-deep .mobile .child-list .menu-item{padding:8px 54px!important}::ng-deep .cdk-overlay-container .profile-menu,::ng-deep .cdk-overlay-container .lang-menu{min-width:250px!important;margin:10px 0!important}::ng-deep .mat-mdc-menu-item .mat-icon{margin-right:5px!important}::ng-deep .collapsed .profile-wrapper{justify-content:center!important}\n"] }]
+    }], () => [{ type: i1.StrapiLinkService }, { type: i2.DOMService }, { type: MenuItemsService }], { username: [{
+            type: Input
+        }], menuSettings: [{
+            type: Input
+        }], productName: [{
+            type: Input
+        }], supportedLanguages: [{
+            type: Input
+        }], changeLanguageEvent: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SideNavMenuComponent, { className: "SideNavMenuComponent", filePath: "lib\\components\\side-nav-menu\\side-nav-menu.component.ts", lineNumber: 15 }); })();
+
 var MenuLayoutDirection;
 (function (MenuLayoutDirection) {
     MenuLayoutDirection["column"] = "column";
@@ -322,7 +524,7 @@ class MenuIconComponent {
             i0.ɵɵtemplate(0, MenuIconComponent_ng_container_0_Template, 4, 2, "ng-container", 1);
         } if (rf & 2) {
             i0.ɵɵproperty("ngIf", ctx.menuItem.icon);
-        } }, dependencies: [i4.NgIf, i2$1.MatIcon], styles: [".menu-icon[_ngcontent-%COMP%]{color:var(--base-30);margin:auto;min-width:24px;min-height:24px;max-width:24px;max-height:24px;vertical-align:middle}"] }); }
+        } }, dependencies: [i3.NgIf, i2$1.MatIcon], styles: [".menu-icon[_ngcontent-%COMP%]{color:var(--base-30);margin:auto;min-width:24px;min-height:24px;max-width:24px;max-height:24px;vertical-align:middle}"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuIconComponent, [{
         type: Component,
@@ -394,7 +596,7 @@ class MenuItemLinkComponent {
             i0.ɵɵproperty("ngIf", ctx.showIcons && ctx.menuItem.icon);
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.labelsVisible);
-        } }, dependencies: [i1$2.DefaultLayoutDirective, i1$2.DefaultLayoutAlignDirective, i2$2.DefaultClassDirective, i4.NgIf, i5.MatTooltip, i2.PlausibleEventDirective, MenuIconComponent, i8.TranslatePipe], styles: ["[_nghost-%COMP%]{width:100%}.mobile[_ngcontent-%COMP%]   .menu-item-title[_ngcontent-%COMP%]{margin-left:5px}"] }); }
+        } }, dependencies: [i1$2.DefaultLayoutDirective, i1$2.DefaultLayoutAlignDirective, i2$2.DefaultClassDirective, i3.NgIf, i5.MatTooltip, i2.PlausibleEventDirective, MenuIconComponent, i8.TranslatePipe], styles: ["[_nghost-%COMP%]{width:100%}.mobile[_ngcontent-%COMP%]   .menu-item-title[_ngcontent-%COMP%]{margin-left:5px}"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuItemLinkComponent, [{
         type: Component,
@@ -466,7 +668,7 @@ class MenuItemBtnComponent {
             i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(3, 6, ctx.menuItem.title), " ");
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngIf", ctx.menuItem.subMenu == null ? null : ctx.menuItem.subMenu.length);
-        } }, dependencies: [i1$2.DefaultLayoutAlignDirective, i2$2.DefaultClassDirective, i4.NgForOf, i4.NgIf, i2$1.MatIcon, i7.MatIconButton, i6.MatMenu, i6.MatMenuItem, i6.MatMenuTrigger, i8.TranslatePipe], styles: ["[_nghost-%COMP%]{width:100%}.menu-item[_ngcontent-%COMP%]:not(:hover)   .sub-menu-btn[_ngcontent-%COMP%]{display:none}.menu-item[_ngcontent-%COMP%]:has(.open){background-color:var(--base-95)!important}.open[_ngcontent-%COMP%]   .sub-menu-btn[_ngcontent-%COMP%]{display:block!important}.mobile[_ngcontent-%COMP%]   .btn-label[_ngcontent-%COMP%]{margin-left:5px}.btn-label[_ngcontent-%COMP%]{font-size:14px;font-weight:500;line-height:20px;letter-spacing:.1px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}"] }); }
+        } }, dependencies: [i1$2.DefaultLayoutAlignDirective, i2$2.DefaultClassDirective, i3.NgForOf, i3.NgIf, i2$1.MatIcon, i7.MatIconButton, i6.MatMenu, i6.MatMenuItem, i6.MatMenuTrigger, i8.TranslatePipe], styles: ["[_nghost-%COMP%]{width:100%}.menu-item[_ngcontent-%COMP%]:not(:hover)   .sub-menu-btn[_ngcontent-%COMP%]{display:none}.menu-item[_ngcontent-%COMP%]:has(.open){background-color:var(--base-95)!important}.open[_ngcontent-%COMP%]   .sub-menu-btn[_ngcontent-%COMP%]{display:block!important}.mobile[_ngcontent-%COMP%]   .btn-label[_ngcontent-%COMP%]{margin-left:5px}.btn-label[_ngcontent-%COMP%]{font-size:14px;font-weight:500;line-height:20px;letter-spacing:.1px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuItemBtnComponent, [{
         type: Component,
@@ -726,11 +928,11 @@ class MenuItemListComponent {
             i0.ɵɵproperty("fxLayoutAlign", ctx.menuLayoutDirection);
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngForOf", ctx.items);
-        } }, dependencies: [i1$2.DefaultLayoutDirective, i1$2.DefaultLayoutGapDirective, i1$2.DefaultLayoutAlignDirective, i2$2.DefaultClassDirective, i1$1.RouterLink, i4.NgForOf, i4.NgIf, i4.NgTemplateOutlet, i5.MatTooltip, i2$1.MatIcon, i7.MatButton, i7.MatIconButton, MenuItemListComponent, MenuIconComponent, MenuItemLinkComponent, MenuItemBtnComponent, i8.TranslatePipe], styles: ["[_nghost-%COMP%]{display:inline-block}  .collapsed .menu-item-list{display:flex!important;justify-content:center!important;align-items:center!important}  .collapsed .menu-list-wrapper,   .collapsed tld-menu-item-link{display:flex!important;justify-content:center!important}  .collapsed .menu-item{display:flex!important;place-content:center center!important}  .collapsed tld-menu-item-link:not(:first-child){margin-top:16px!important}.menu-action-button[_ngcontent-%COMP%]{justify-content:flex-start;align-items:center;max-width:100%;width:-webkit-fill-available}[_nghost-%COMP%]     .menu-list-wrapper .menu-item{cursor:pointer;font-style:normal;color:var(--base-30);text-decoration:none;align-items:center!important;font-weight:400;background:none;border:none}[_nghost-%COMP%]     .menu-list-wrapper .menu-item:not(button):not(.active-menu-item):hover{background-color:var(--base-70)!important}[_nghost-%COMP%]     .menu-list-wrapper .menu-item.active-menu-item, [_nghost-%COMP%]     .menu-list-wrapper .menu-item.active-menu-item mat-icon, [_nghost-%COMP%]     .menu-list-wrapper .menu-item.active-menu-item:hover{font-weight:600}[_nghost-%COMP%]     .menu-list-wrapper .menu-item span{display:inline-block}[_nghost-%COMP%]     .menu-list-wrapper .menu-item .menu-item-title{display:flex;flex-direction:row;align-items:start;width:100%}[_nghost-%COMP%]     .menu-list-wrapper .menu-item .menu-item-title .title-content{display:block}[_nghost-%COMP%]     .menu-list-wrapper .menu-item .menu-item-title .title-content:before{display:block;content:attr(content);font-weight:600;height:0;overflow:hidden;visibility:hidden}.child-list[_nghost-%COMP%]{margin-bottom:1rem}.child-list[_nghost-%COMP%]   .menu-item[_ngcontent-%COMP%] + .menu-item[_ngcontent-%COMP%]{margin-top:.5rem}  .menu-tooltip{left:.625rem;font-family:Roboto;font-style:normal;font-weight:400;font-size:.75rem;line-height:1.25rem;color:var(--base-70);border-radius:.25rem;position:relative}  .menu-tooltip:after{width:0;height:0;content:\"\";position:absolute;border-left:.5rem solid transparent;border-right:.5rem solid transparent;border-bottom:.5rem solid var(--menu-border-dark-color);left:-.75rem;top:calc(50% - .25rem);transform:rotate(270deg);overflow:initial}.menu-item-list-title[_ngcontent-%COMP%]{padding:8px 0 24px;font-size:16px;font-weight:600;overflow:hidden;text-overflow:ellipsis;margin-left:20px;height:56px}.menu-item-list-title[_ngcontent-%COMP%]:has(.menu-title-btn){margin-left:0}.menu-item-list[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_slide-in .3s forwards}.menu-title-btn[_ngcontent-%COMP%]{margin-right:2px;transition:opacity .3s}@keyframes _ngcontent-%COMP%_slide-in{0%{opacity:0;margin-left:-100px}to{opacity:1;margin-left:0}}"] }); }
+        } }, dependencies: [i1$2.DefaultLayoutDirective, i1$2.DefaultLayoutGapDirective, i1$2.DefaultLayoutAlignDirective, i2$2.DefaultClassDirective, i1$1.RouterLink, i3.NgForOf, i3.NgIf, i3.NgTemplateOutlet, i5.MatTooltip, i2$1.MatIcon, i7.MatButton, i7.MatIconButton, MenuItemListComponent, MenuIconComponent, MenuItemLinkComponent, MenuItemBtnComponent, i8.TranslatePipe], styles: ["[_nghost-%COMP%]{display:inline-block}  .collapsed .menu-item-list{display:flex!important;justify-content:center!important;align-items:center!important}  .collapsed .menu-list-wrapper,   .collapsed tld-menu-item-link{display:flex!important;justify-content:center!important}  .collapsed .menu-item{display:flex!important;place-content:center center!important}  .collapsed tld-menu-item-link:not(:first-child){margin-top:16px!important}.menu-action-button[_ngcontent-%COMP%]{justify-content:flex-start;align-items:center;max-width:100%;width:-webkit-fill-available}[_nghost-%COMP%]     .menu-list-wrapper .menu-item{cursor:pointer;font-style:normal;color:var(--base-30);text-decoration:none;align-items:center!important;font-weight:400;background:none;border:none}[_nghost-%COMP%]     .menu-list-wrapper .menu-item:not(button):not(.active-menu-item):hover{background-color:var(--base-70)!important}[_nghost-%COMP%]     .menu-list-wrapper .menu-item.active-menu-item, [_nghost-%COMP%]     .menu-list-wrapper .menu-item.active-menu-item mat-icon, [_nghost-%COMP%]     .menu-list-wrapper .menu-item.active-menu-item:hover{font-weight:600}[_nghost-%COMP%]     .menu-list-wrapper .menu-item span{display:inline-block}[_nghost-%COMP%]     .menu-list-wrapper .menu-item .menu-item-title{display:flex;flex-direction:row;align-items:start;width:100%}[_nghost-%COMP%]     .menu-list-wrapper .menu-item .menu-item-title .title-content{display:block}[_nghost-%COMP%]     .menu-list-wrapper .menu-item .menu-item-title .title-content:before{display:block;content:attr(content);font-weight:600;height:0;overflow:hidden;visibility:hidden}.child-list[_nghost-%COMP%]{margin-bottom:1rem}.child-list[_nghost-%COMP%]   .menu-item[_ngcontent-%COMP%] + .menu-item[_ngcontent-%COMP%]{margin-top:.5rem}  .menu-tooltip{left:.625rem;font-family:Roboto;font-style:normal;font-weight:400;font-size:.75rem;line-height:1.25rem;color:var(--base-70);border-radius:.25rem;position:relative}  .menu-tooltip:after{width:0;height:0;content:\"\";position:absolute;border-left:.5rem solid transparent;border-right:.5rem solid transparent;border-bottom:.5rem solid var(--menu-border-dark-color);left:-.75rem;top:calc(50% - .25rem);transform:rotate(270deg);overflow:initial}.menu-item-list-title[_ngcontent-%COMP%]{padding:8px 0 24px;font-size:16px;font-weight:600;overflow:hidden;text-overflow:ellipsis;margin-left:20px;height:56px}.menu-item-list-title[_ngcontent-%COMP%]:has(.menu-title-btn){margin-left:0}  lib-menu-lang-switcher, .menu-item-list[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_slide-in .3s forwards}  lib-menu-lang-switcher, .menu-title-btn[_ngcontent-%COMP%]{margin-right:2px;transition:opacity .3s}@keyframes _ngcontent-%COMP%_slide-in{0%{opacity:0;margin-left:-100px}to{opacity:1;margin-left:0}}"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuItemListComponent, [{
         type: Component,
-        args: [{ selector: 'menu-item-list', template: "<div class=\"menu-list-wrapper\">\r\n  @if (titleKey && showTitle && labelsVisible && !menuItemGroup.itemGroupClick) {\r\n    <div  fxLayoutAlign=\"start center\" class=\"menu-item-list-title\">\r\n      <mat-icon class=\"menu-title-btn\" *ngIf=\"menuItemGroup.titleIcon\">{{menuItemGroup.titleIcon}}</mat-icon>\r\n      \r\n      <button class=\"menu-title-btn\" *ngIf=\"menuItemGroup.titleNavigation\" mat-icon-button [routerLink]=\"menuItemGroup.titleNavigation.path\" [matTooltip]=\"menuItemGroup.titleNavigation?.tooltip ?? '' | translate\">\r\n        <mat-icon>{{menuItemGroup.titleNavigation.icon}}</mat-icon>\r\n      </button>\r\n      \r\n      {{ titleKey | translate }}\r\n    </div>\r\n  } @else if (menuItemGroup?.itemGroupClick) {\r\n    <ng-container *ngTemplateOutlet=\"itemGroupButton\">\r\n    </ng-container>\r\n  }\r\n    <div fxLayout=\"column\" [fxLayoutAlign]=\"menuLayoutDirection\" class=\"menu-item-list\">\r\n      <ng-container *ngFor=\"let menuItem of items\">\r\n      <ng-container\r\n        *ngTemplateOutlet=\"!menuItem.showChildren || !menuItem.children || menuItem?.children?.length === 0 ? (menuItem.clickAction ? menuItemBtn : menuItemLink) : itemWithChildren; context: {menuItem: menuItem}\">\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #itemWithChildren let-menuItem=\"menuItem\">\r\n  <button [attr.id]=\"menuItem.customId\" [ngClass.lt-md]=\"'mob-menu-item'\" [fxLayout]=\"menuItemLayout\" class=\"text-m menu-item\"\r\n    [matTooltip]=\"!labelsVisible ? (menuItem.title | translate) : ''\" matTooltipPosition=\"after\" [class.menu-labels-visible]=\"labelsVisible\"\r\n    [fxLayoutAlign]=\"menuLayoutDirection\" matTooltipClass=\"menu-tooltip\" fxLayoutGap=\"0.375rem\"\r\n    [class.active-menu-item]=\"activeItem?.link && menuItem === activeItem\" (click)=\"toggleItemExpand($event,menuItem)\">\r\n    <ng-container *ngIf=\"showIcons && menuItem.icon\">\r\n      <tld-menu-icon  [menuItem]=\"menuItem\"></tld-menu-icon>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"labelsVisible\">\r\n      <span class=\"menu-item-title\">\r\n        <span class=\"title-content\">{{ menuItem.title | translate }}</span></span>\r\n      <span class=\"material-icons\" *ngIf=\"menuItem.showChildren && menuItem.children\">\r\n        {{ menuItem.expanded ? 'arrow_drop_up' : 'arrow_drop_down' }}\r\n      </span>\r\n    </ng-container>\r\n  </button>\r\n  <ng-container *ngIf=\"menuItem.showChildren && menuItem.expanded && labelsVisible\">\r\n    <menu-item-list class=\"child-list\" *ngIf=\"menuItem.children && menuItem.children.length\" [items]=\"menuItem.children\"\r\n      [direction]=\"direction\" [labelsVisible]=\"labelsVisible\" [activeItem]=\"activeItem\">\r\n    </menu-item-list>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #menuItemLink let-menuItem=\"menuItem\">\r\n  <tld-menu-item-link [ngClass.lt-md]=\"'mob-menu-item'\" [menuItem]=\"menuItem\" [direction]=\"direction\" [labelsVisible]=\"labelsVisible\"\r\n    [activeItem]=\"activeItem\" [showIcons]=\"showIcons\"></tld-menu-item-link>\r\n</ng-template>\r\n\r\n<ng-template #menuItemBtn let-menuItem=\"menuItem\">\r\n  <lib-menu-item-btn *ngIf=\"labelsVisible\" [ngClass.lt-md]=\"'mob-menu-item'\" [menuItem]=\"menuItem\" [direction]=\"direction\"\r\n    [activeItem]=\"activeItem\"></lib-menu-item-btn>\r\n</ng-template>\r\n\r\n<ng-template #itemGroupButton>\r\n  <button \r\n    class=\"menu-title-btn menu-action-button\"\r\n    mat-button\r\n    *ngIf=\"menuItemGroup && labelsVisible\"\r\n    (click)=\"menuItemGroup?.itemGroupClick()\"\r\n  >\r\n    <mat-icon>{{ menuItemGroup.itemGroupIcon }}</mat-icon>\r\n    <span class=\"btn-label\" *ngIf=\"titleKey\">\r\n      {{ titleKey | translate }}\r\n    </span>\r\n  </button>\r\n\r\n  <button \r\n    mat-icon-button\r\n    *ngIf=\"menuItemGroup && !labelsVisible && titleKey && menuItemGroup.itemGroupIcon\"\r\n    (click)=\"menuItemGroup?.itemGroupClick()\"\r\n    [matTooltip]=\"titleKey | translate\"\r\n    matTooltipPosition=\"after\"\r\n  >\r\n    <mat-icon>{{ menuItemGroup.itemGroupIcon }}</mat-icon>\r\n  </button>\r\n</ng-template>", styles: [":host{display:inline-block}::ng-deep .collapsed .menu-item-list{display:flex!important;justify-content:center!important;align-items:center!important}::ng-deep .collapsed .menu-list-wrapper,::ng-deep .collapsed tld-menu-item-link{display:flex!important;justify-content:center!important}::ng-deep .collapsed .menu-item{display:flex!important;place-content:center center!important}::ng-deep .collapsed tld-menu-item-link:not(:first-child){margin-top:16px!important}.menu-action-button{justify-content:flex-start;align-items:center;max-width:100%;width:-webkit-fill-available}:host ::ng-deep .menu-list-wrapper .menu-item{cursor:pointer;font-style:normal;color:var(--base-30);text-decoration:none;align-items:center!important;font-weight:400;background:none;border:none}:host ::ng-deep .menu-list-wrapper .menu-item:not(button):not(.active-menu-item):hover{background-color:var(--base-70)!important}:host ::ng-deep .menu-list-wrapper .menu-item.active-menu-item,:host ::ng-deep .menu-list-wrapper .menu-item.active-menu-item mat-icon,:host ::ng-deep .menu-list-wrapper .menu-item.active-menu-item:hover{font-weight:600}:host ::ng-deep .menu-list-wrapper .menu-item span{display:inline-block}:host ::ng-deep .menu-list-wrapper .menu-item .menu-item-title{display:flex;flex-direction:row;align-items:start;width:100%}:host ::ng-deep .menu-list-wrapper .menu-item .menu-item-title .title-content{display:block}:host ::ng-deep .menu-list-wrapper .menu-item .menu-item-title .title-content:before{display:block;content:attr(content);font-weight:600;height:0;overflow:hidden;visibility:hidden}:host.child-list{margin-bottom:1rem}:host.child-list .menu-item+.menu-item{margin-top:.5rem}::ng-deep .menu-tooltip{left:.625rem;font-family:Roboto;font-style:normal;font-weight:400;font-size:.75rem;line-height:1.25rem;color:var(--base-70);border-radius:.25rem;position:relative}::ng-deep .menu-tooltip:after{width:0;height:0;content:\"\";position:absolute;border-left:.5rem solid transparent;border-right:.5rem solid transparent;border-bottom:.5rem solid var(--menu-border-dark-color);left:-.75rem;top:calc(50% - .25rem);transform:rotate(270deg);overflow:initial}.menu-item-list-title{padding:8px 0 24px;font-size:16px;font-weight:600;overflow:hidden;text-overflow:ellipsis;margin-left:20px;height:56px}.menu-item-list-title:has(.menu-title-btn){margin-left:0}.menu-item-list{animation:slide-in .3s forwards}.menu-title-btn{margin-right:2px;transition:opacity .3s}@keyframes slide-in{0%{opacity:0;margin-left:-100px}to{opacity:1;margin-left:0}}\n"] }]
+        args: [{ selector: 'menu-item-list', template: "<div class=\"menu-list-wrapper\">\r\n  @if (titleKey && showTitle && labelsVisible && !menuItemGroup.itemGroupClick) {\r\n    <div  fxLayoutAlign=\"start center\" class=\"menu-item-list-title\">\r\n      <mat-icon class=\"menu-title-btn\" *ngIf=\"menuItemGroup.titleIcon\">{{menuItemGroup.titleIcon}}</mat-icon>\r\n      \r\n      <button class=\"menu-title-btn\" *ngIf=\"menuItemGroup.titleNavigation\" mat-icon-button [routerLink]=\"menuItemGroup.titleNavigation.path\" [matTooltip]=\"menuItemGroup.titleNavigation?.tooltip ?? '' | translate\">\r\n        <mat-icon>{{menuItemGroup.titleNavigation.icon}}</mat-icon>\r\n      </button>\r\n      \r\n      {{ titleKey | translate }}\r\n    </div>\r\n  } @else if (menuItemGroup?.itemGroupClick) {\r\n    <ng-container *ngTemplateOutlet=\"itemGroupButton\">\r\n    </ng-container>\r\n  }\r\n    <div fxLayout=\"column\" [fxLayoutAlign]=\"menuLayoutDirection\" class=\"menu-item-list\">\r\n      <ng-container *ngFor=\"let menuItem of items\">\r\n      <ng-container\r\n        *ngTemplateOutlet=\"!menuItem.showChildren || !menuItem.children || menuItem?.children?.length === 0 ? (menuItem.clickAction ? menuItemBtn : menuItemLink) : itemWithChildren; context: {menuItem: menuItem}\">\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #itemWithChildren let-menuItem=\"menuItem\">\r\n  <button [attr.id]=\"menuItem.customId\" [ngClass.lt-md]=\"'mob-menu-item'\" [fxLayout]=\"menuItemLayout\" class=\"text-m menu-item\"\r\n    [matTooltip]=\"!labelsVisible ? (menuItem.title | translate) : ''\" matTooltipPosition=\"after\" [class.menu-labels-visible]=\"labelsVisible\"\r\n    [fxLayoutAlign]=\"menuLayoutDirection\" matTooltipClass=\"menu-tooltip\" fxLayoutGap=\"0.375rem\"\r\n    [class.active-menu-item]=\"activeItem?.link && menuItem === activeItem\" (click)=\"toggleItemExpand($event,menuItem)\">\r\n    <ng-container *ngIf=\"showIcons && menuItem.icon\">\r\n      <tld-menu-icon  [menuItem]=\"menuItem\"></tld-menu-icon>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"labelsVisible\">\r\n      <span class=\"menu-item-title\">\r\n        <span class=\"title-content\">{{ menuItem.title | translate }}</span></span>\r\n      <span class=\"material-icons\" *ngIf=\"menuItem.showChildren && menuItem.children\">\r\n        {{ menuItem.expanded ? 'arrow_drop_up' : 'arrow_drop_down' }}\r\n      </span>\r\n    </ng-container>\r\n  </button>\r\n  <ng-container *ngIf=\"menuItem.showChildren && menuItem.expanded && labelsVisible\">\r\n    <menu-item-list class=\"child-list\" *ngIf=\"menuItem.children && menuItem.children.length\" [items]=\"menuItem.children\"\r\n      [direction]=\"direction\" [labelsVisible]=\"labelsVisible\" [activeItem]=\"activeItem\">\r\n    </menu-item-list>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #menuItemLink let-menuItem=\"menuItem\">\r\n  <tld-menu-item-link [ngClass.lt-md]=\"'mob-menu-item'\" [menuItem]=\"menuItem\" [direction]=\"direction\" [labelsVisible]=\"labelsVisible\"\r\n    [activeItem]=\"activeItem\" [showIcons]=\"showIcons\"></tld-menu-item-link>\r\n</ng-template>\r\n\r\n<ng-template #menuItemBtn let-menuItem=\"menuItem\">\r\n  <lib-menu-item-btn *ngIf=\"labelsVisible\" [ngClass.lt-md]=\"'mob-menu-item'\" [menuItem]=\"menuItem\" [direction]=\"direction\"\r\n    [activeItem]=\"activeItem\"></lib-menu-item-btn>\r\n</ng-template>\r\n\r\n<ng-template #itemGroupButton>\r\n  <button \r\n    class=\"menu-title-btn menu-action-button\"\r\n    mat-button\r\n    *ngIf=\"menuItemGroup && labelsVisible\"\r\n    (click)=\"menuItemGroup?.itemGroupClick()\"\r\n  >\r\n    <mat-icon>{{ menuItemGroup.itemGroupIcon }}</mat-icon>\r\n    <span class=\"btn-label\" *ngIf=\"titleKey\">\r\n      {{ titleKey | translate }}\r\n    </span>\r\n  </button>\r\n\r\n  <button \r\n    mat-icon-button\r\n    *ngIf=\"menuItemGroup && !labelsVisible && titleKey && menuItemGroup.itemGroupIcon\"\r\n    (click)=\"menuItemGroup?.itemGroupClick()\"\r\n    [matTooltip]=\"titleKey | translate\"\r\n    matTooltipPosition=\"after\"\r\n  >\r\n    <mat-icon>{{ menuItemGroup.itemGroupIcon }}</mat-icon>\r\n  </button>\r\n</ng-template>", styles: [":host{display:inline-block}::ng-deep .collapsed .menu-item-list{display:flex!important;justify-content:center!important;align-items:center!important}::ng-deep .collapsed .menu-list-wrapper,::ng-deep .collapsed tld-menu-item-link{display:flex!important;justify-content:center!important}::ng-deep .collapsed .menu-item{display:flex!important;place-content:center center!important}::ng-deep .collapsed tld-menu-item-link:not(:first-child){margin-top:16px!important}.menu-action-button{justify-content:flex-start;align-items:center;max-width:100%;width:-webkit-fill-available}:host ::ng-deep .menu-list-wrapper .menu-item{cursor:pointer;font-style:normal;color:var(--base-30);text-decoration:none;align-items:center!important;font-weight:400;background:none;border:none}:host ::ng-deep .menu-list-wrapper .menu-item:not(button):not(.active-menu-item):hover{background-color:var(--base-70)!important}:host ::ng-deep .menu-list-wrapper .menu-item.active-menu-item,:host ::ng-deep .menu-list-wrapper .menu-item.active-menu-item mat-icon,:host ::ng-deep .menu-list-wrapper .menu-item.active-menu-item:hover{font-weight:600}:host ::ng-deep .menu-list-wrapper .menu-item span{display:inline-block}:host ::ng-deep .menu-list-wrapper .menu-item .menu-item-title{display:flex;flex-direction:row;align-items:start;width:100%}:host ::ng-deep .menu-list-wrapper .menu-item .menu-item-title .title-content{display:block}:host ::ng-deep .menu-list-wrapper .menu-item .menu-item-title .title-content:before{display:block;content:attr(content);font-weight:600;height:0;overflow:hidden;visibility:hidden}:host.child-list{margin-bottom:1rem}:host.child-list .menu-item+.menu-item{margin-top:.5rem}::ng-deep .menu-tooltip{left:.625rem;font-family:Roboto;font-style:normal;font-weight:400;font-size:.75rem;line-height:1.25rem;color:var(--base-70);border-radius:.25rem;position:relative}::ng-deep .menu-tooltip:after{width:0;height:0;content:\"\";position:absolute;border-left:.5rem solid transparent;border-right:.5rem solid transparent;border-bottom:.5rem solid var(--menu-border-dark-color);left:-.75rem;top:calc(50% - .25rem);transform:rotate(270deg);overflow:initial}.menu-item-list-title{padding:8px 0 24px;font-size:16px;font-weight:600;overflow:hidden;text-overflow:ellipsis;margin-left:20px;height:56px}.menu-item-list-title:has(.menu-title-btn){margin-left:0}::ng-deep lib-menu-lang-switcher,.menu-item-list{animation:slide-in .3s forwards}::ng-deep lib-menu-lang-switcher,.menu-title-btn{margin-right:2px;transition:opacity .3s}@keyframes slide-in{0%{opacity:0;margin-left:-100px}to{opacity:1;margin-left:0}}\n"] }]
     }], null, { direction: [{
             type: Input
         }], labelsVisible: [{
@@ -823,7 +1025,7 @@ class MenuColumnsComponent {
             i0.ɵɵtemplate(0, MenuColumnsComponent_ng_container_0_Template, 3, 2, "ng-container", 0);
         } if (rf & 2) {
             i0.ɵɵproperty("ngForOf", ctx.mergedGroups);
-        } }, dependencies: [i4.NgForOf, i4.NgIf, i4$1.MatDivider, MenuItemListComponent], styles: ["[_nghost-%COMP%]{display:inline-block}[_nghost-%COMP%]   menu-item-list[_ngcontent-%COMP%]{display:block}.divider[_ngcontent-%COMP%]{margin:10px 0}"] }); }
+        } }, dependencies: [i3.NgForOf, i3.NgIf, i4.MatDivider, MenuItemListComponent], styles: ["[_nghost-%COMP%]{display:inline-block}[_nghost-%COMP%]   menu-item-list[_ngcontent-%COMP%]{display:block}.divider[_ngcontent-%COMP%]{margin:10px 0}"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuColumnsComponent, [{
         type: Component,
@@ -844,245 +1046,151 @@ class MenuColumnsComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MenuColumnsComponent, { className: "MenuColumnsComponent", filePath: "lib\\components\\menu-columns\\menu-columns.component.ts", lineNumber: 16 }); })();
 
-const _c0 = ["*"];
 const _forTrack0 = ($index, $item) => $item.label;
-const _c1 = (a0, a1) => ({ icon: a0, label: a1 });
-function SideNavMenuComponent_a_14_Template(rf, ctx) { if (rf & 1) {
-    const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "a", 6);
-    i0.ɵɵpipe(1, "translate");
-    i0.ɵɵlistener("click", function SideNavMenuComponent_a_14_Template_a_click_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.logoClick($event)); });
-    i0.ɵɵelement(2, "img", 7);
-    i0.ɵɵelementStart(3, "span", 8);
-    i0.ɵɵtext(4);
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵclassProp("no-click", ctx_r2.menuSettings == null ? null : ctx_r2.menuSettings.disableLogoNavigation);
-    i0.ɵɵproperty("libPlausibleEvent", ctx_r2.LOGOCLICK_PLAUSIBLE_EVENT)("href", ctx_r2.baseUrl, i0.ɵɵsanitizeUrl);
-    i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(1, 7, "MENU.ARIA_LABELS.LOGO"));
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("src", ctx_r2.menuLogoImage, i0.ɵɵsanitizeUrl);
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", ctx_r2.productName, " ");
-} }
-function SideNavMenuComponent_Conditional_30_Template(rf, ctx) { if (rf & 1) {
+const _c0 = (a0, a1) => ({ icon: a0, label: a1 });
+function MenuProfileComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0);
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵtextInterpolate1(" ", ctx_r2.userInitials, " ");
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.userInitials, " ");
 } }
-function SideNavMenuComponent_Conditional_31_Template(rf, ctx) { if (rf & 1) {
+function MenuProfileComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "mat-icon");
     i0.ɵɵtext(1, "person");
     i0.ɵɵelementEnd();
 } }
-function SideNavMenuComponent_ng_container_32_mat_icon_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "mat-icon", 27);
-    i0.ɵɵtext(1);
+function MenuProfileComponent_ng_container_6_mat_icon_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "mat-icon", 11);
+    i0.ɵɵtext(1, "keyboard_arrow_down");
     i0.ɵɵelementEnd();
-} if (rf & 2) {
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate("keyboard_arrow_down");
 } }
-function SideNavMenuComponent_ng_container_32_ng_template_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "mat-icon", 27);
-    i0.ɵɵtext(1);
+function MenuProfileComponent_ng_container_6_ng_template_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "mat-icon", 11);
+    i0.ɵɵtext(1, "keyboard_arrow_up");
     i0.ɵɵelementEnd();
-} if (rf & 2) {
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate("keyboard_arrow_up");
 } }
-function SideNavMenuComponent_ng_container_32_Template(rf, ctx) { if (rf & 1) {
+function MenuProfileComponent_ng_container_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵelementStart(1, "span", 25);
+    i0.ɵɵelementStart(1, "span", 9);
     i0.ɵɵtext(2);
     i0.ɵɵpipe(3, "translate");
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(4, SideNavMenuComponent_ng_container_32_mat_icon_4_Template, 2, 1, "mat-icon", 26)(5, SideNavMenuComponent_ng_container_32_ng_template_5_Template, 2, 1, "ng-template", null, 3, i0.ɵɵtemplateRefExtractor);
+    i0.ɵɵtemplate(4, MenuProfileComponent_ng_container_6_mat_icon_4_Template, 2, 0, "mat-icon", 10)(5, MenuProfileComponent_ng_container_6_ng_template_5_Template, 2, 0, "ng-template", null, 3, i0.ɵɵtemplateRefExtractor);
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
     let tmp_5_0;
-    const iconDown_r4 = i0.ɵɵreference(6);
-    const ctx_r2 = i0.ɵɵnextContext();
-    const state_r5 = i0.ɵɵreference(28);
+    const iconDown_r2 = i0.ɵɵreference(6);
+    const ctx_r0 = i0.ɵɵnextContext();
+    const state_r3 = i0.ɵɵreference(2);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(3, 3, (tmp_5_0 = ctx_r2.username) !== null && tmp_5_0 !== undefined ? tmp_5_0 : "MENU.ANONYMOUS"), " ");
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(3, 3, (tmp_5_0 = ctx_r0.username) !== null && tmp_5_0 !== undefined ? tmp_5_0 : "MENU.ANONYMOUS"), " ");
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngIf", state_r5.menuOpen)("ngIfElse", iconDown_r4);
+    i0.ɵɵproperty("ngIf", state_r3.menuOpen)("ngIfElse", iconDown_r2);
 } }
-function SideNavMenuComponent_For_36_Conditional_0_Conditional_0_ng_container_1_Template(rf, ctx) { if (rf & 1) {
+function MenuProfileComponent_For_10_Conditional_0_Conditional_0_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
-function SideNavMenuComponent_For_36_Conditional_0_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "a", 31);
-    i0.ɵɵlistener("click", function SideNavMenuComponent_For_36_Conditional_0_Conditional_0_Template_a_click_0_listener() { i0.ɵɵrestoreView(_r6); const item_r7 = i0.ɵɵnextContext(2).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.linkCallback(item_r7.link)); });
-    i0.ɵɵtemplate(1, SideNavMenuComponent_For_36_Conditional_0_Conditional_0_ng_container_1_Template, 1, 0, "ng-container", 32);
+function MenuProfileComponent_For_10_Conditional_0_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "a", 15);
+    i0.ɵɵlistener("click", function MenuProfileComponent_For_10_Conditional_0_Conditional_0_Template_a_click_0_listener() { i0.ɵɵrestoreView(_r4); const item_r5 = i0.ɵɵnextContext(2).$implicit; const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.linkCallback(item_r5.link)); });
+    i0.ɵɵtemplate(1, MenuProfileComponent_For_10_Conditional_0_Conditional_0_ng_container_1_Template, 1, 0, "ng-container", 16);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const item_r7 = i0.ɵɵnextContext(2).$implicit;
+    const item_r5 = i0.ɵɵnextContext(2).$implicit;
     i0.ɵɵnextContext();
-    const profileMenuItem_r8 = i0.ɵɵreference(38);
-    i0.ɵɵproperty("href", item_r7.link.href, i0.ɵɵsanitizeUrl);
+    const profileMenuItem_r6 = i0.ɵɵreference(12);
+    i0.ɵɵproperty("href", item_r5.link.href, i0.ɵɵsanitizeUrl);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", profileMenuItem_r8)("ngTemplateOutletContext", i0.ɵɵpureFunction2(3, _c1, item_r7.icon, item_r7.label));
+    i0.ɵɵproperty("ngTemplateOutlet", profileMenuItem_r6)("ngTemplateOutletContext", i0.ɵɵpureFunction2(3, _c0, item_r5.icon, item_r5.label));
 } }
-function SideNavMenuComponent_For_36_Conditional_0_Conditional_1_ng_container_1_Template(rf, ctx) { if (rf & 1) {
+function MenuProfileComponent_For_10_Conditional_0_Conditional_1_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
-function SideNavMenuComponent_For_36_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "a", 33);
-    i0.ɵɵlistener("click", function SideNavMenuComponent_For_36_Conditional_0_Conditional_1_Template_a_click_0_listener() { i0.ɵɵrestoreView(_r9); const item_r7 = i0.ɵɵnextContext(2).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.linkCallback(item_r7.link)); });
-    i0.ɵɵtemplate(1, SideNavMenuComponent_For_36_Conditional_0_Conditional_1_ng_container_1_Template, 1, 0, "ng-container", 32);
+function MenuProfileComponent_For_10_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "a", 17);
+    i0.ɵɵlistener("click", function MenuProfileComponent_For_10_Conditional_0_Conditional_1_Template_a_click_0_listener() { i0.ɵɵrestoreView(_r7); const item_r5 = i0.ɵɵnextContext(2).$implicit; const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.linkCallback(item_r5.link)); });
+    i0.ɵɵtemplate(1, MenuProfileComponent_For_10_Conditional_0_Conditional_1_ng_container_1_Template, 1, 0, "ng-container", 16);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const item_r7 = i0.ɵɵnextContext(2).$implicit;
+    const item_r5 = i0.ɵɵnextContext(2).$implicit;
     i0.ɵɵnextContext();
-    const profileMenuItem_r8 = i0.ɵɵreference(38);
-    i0.ɵɵproperty("routerLink", item_r7.link.href);
+    const profileMenuItem_r6 = i0.ɵɵreference(12);
+    i0.ɵɵproperty("routerLink", item_r5.link.href);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", profileMenuItem_r8)("ngTemplateOutletContext", i0.ɵɵpureFunction2(3, _c1, item_r7.icon, item_r7.label));
+    i0.ɵɵproperty("ngTemplateOutlet", profileMenuItem_r6)("ngTemplateOutletContext", i0.ɵɵpureFunction2(3, _c0, item_r5.icon, item_r5.label));
 } }
-function SideNavMenuComponent_For_36_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, SideNavMenuComponent_For_36_Conditional_0_Conditional_0_Template, 2, 6, "a", 29)(1, SideNavMenuComponent_For_36_Conditional_0_Conditional_1_Template, 2, 6, "a", 30);
+function MenuProfileComponent_For_10_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, MenuProfileComponent_For_10_Conditional_0_Conditional_0_Template, 2, 6, "a", 13)(1, MenuProfileComponent_For_10_Conditional_0_Conditional_1_Template, 2, 6, "a", 14);
 } if (rf & 2) {
-    const item_r7 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵconditional(item_r7.link.isExternal ? 0 : 1);
+    const item_r5 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵconditional(item_r5.link.isExternal ? 0 : 1);
 } }
-function SideNavMenuComponent_For_36_Conditional_1_ng_container_1_Template(rf, ctx) { if (rf & 1) {
+function MenuProfileComponent_For_10_Conditional_1_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
-function SideNavMenuComponent_For_36_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 34);
-    i0.ɵɵlistener("click", function SideNavMenuComponent_For_36_Conditional_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r10); const item_r7 = i0.ɵɵnextContext().$implicit; return i0.ɵɵresetView(item_r7.button == null ? null : item_r7.button.callback()); });
-    i0.ɵɵtemplate(1, SideNavMenuComponent_For_36_Conditional_1_ng_container_1_Template, 1, 0, "ng-container", 32);
+function MenuProfileComponent_For_10_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 18);
+    i0.ɵɵlistener("click", function MenuProfileComponent_For_10_Conditional_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r8); const item_r5 = i0.ɵɵnextContext().$implicit; return i0.ɵɵresetView(item_r5.button == null ? null : item_r5.button.callback()); });
+    i0.ɵɵtemplate(1, MenuProfileComponent_For_10_Conditional_1_ng_container_1_Template, 1, 0, "ng-container", 16);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const item_r7 = i0.ɵɵnextContext().$implicit;
+    const item_r5 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵnextContext();
-    const profileMenuItem_r8 = i0.ɵɵreference(38);
+    const profileMenuItem_r6 = i0.ɵɵreference(12);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", profileMenuItem_r8)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c1, item_r7.icon, item_r7.label));
+    i0.ɵɵproperty("ngTemplateOutlet", profileMenuItem_r6)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c0, item_r5.icon, item_r5.label));
 } }
-function SideNavMenuComponent_For_36_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, SideNavMenuComponent_For_36_Conditional_0_Template, 2, 1)(1, SideNavMenuComponent_For_36_Conditional_1_Template, 2, 5, "button", 28);
+function MenuProfileComponent_For_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, MenuProfileComponent_For_10_Conditional_0_Template, 2, 1)(1, MenuProfileComponent_For_10_Conditional_1_Template, 2, 5, "button", 12);
 } if (rf & 2) {
-    const item_r7 = ctx.$implicit;
-    i0.ɵɵconditional(item_r7.link ? 0 : 1);
+    const item_r5 = ctx.$implicit;
+    i0.ɵɵconditional(item_r5.link ? 0 : 1);
 } }
-function SideNavMenuComponent_ng_template_37_Conditional_0_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 37);
+function MenuProfileComponent_ng_template_11_Conditional_0_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 21);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const icon_r11 = i0.ɵɵnextContext(2).icon;
-    i0.ɵɵclassProp("material-icons-outlined", icon_r11 == null ? null : icon_r11.isOutlined);
+    const icon_r9 = i0.ɵɵnextContext(2).icon;
+    i0.ɵɵclassProp("material-icons-outlined", icon_r9 == null ? null : icon_r9.isOutlined);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", icon_r11 == null ? null : icon_r11.name, " ");
+    i0.ɵɵtextInterpolate1(" ", icon_r9 == null ? null : icon_r9.name, " ");
 } }
-function SideNavMenuComponent_ng_template_37_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mat-icon", 36);
+function MenuProfileComponent_ng_template_11_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mat-icon", 20);
 } if (rf & 2) {
-    const icon_r11 = i0.ɵɵnextContext(2).icon;
-    i0.ɵɵproperty("svgIcon", icon_r11 == null ? null : icon_r11.name);
+    const icon_r9 = i0.ɵɵnextContext(2).icon;
+    i0.ɵɵproperty("svgIcon", icon_r9 == null ? null : icon_r9.name);
 } }
-function SideNavMenuComponent_ng_template_37_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, SideNavMenuComponent_ng_template_37_Conditional_0_Conditional_0_Template, 2, 3, "span", 35)(1, SideNavMenuComponent_ng_template_37_Conditional_0_Conditional_1_Template, 1, 1, "mat-icon", 36);
+function MenuProfileComponent_ng_template_11_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, MenuProfileComponent_ng_template_11_Conditional_0_Conditional_0_Template, 2, 3, "span", 19)(1, MenuProfileComponent_ng_template_11_Conditional_0_Conditional_1_Template, 1, 1, "mat-icon", 20);
 } if (rf & 2) {
-    const icon_r11 = i0.ɵɵnextContext().icon;
-    i0.ɵɵconditional(!(icon_r11 == null ? null : icon_r11.isCustom) ? 0 : 1);
+    const icon_r9 = i0.ɵɵnextContext().icon;
+    i0.ɵɵconditional(!(icon_r9 == null ? null : icon_r9.isCustom) ? 0 : 1);
 } }
-function SideNavMenuComponent_ng_template_37_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, SideNavMenuComponent_ng_template_37_Conditional_0_Template, 2, 1);
+function MenuProfileComponent_ng_template_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, MenuProfileComponent_ng_template_11_Conditional_0_Template, 2, 1);
     i0.ɵɵtext(1);
     i0.ɵɵpipe(2, "translate");
 } if (rf & 2) {
-    const icon_r11 = ctx.icon;
-    const label_r12 = ctx.label;
-    i0.ɵɵconditional(icon_r11 ? 0 : -1);
+    const icon_r9 = ctx.icon;
+    const label_r10 = ctx.label;
+    i0.ɵɵconditional(icon_r9 ? 0 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(2, 2, label_r12), " ");
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(2, 2, label_r10), "\n");
 } }
-class SideNavMenuComponent extends NavBaseComponent {
-    #username;
-    get username() { return this.#username; }
-    set username(value) {
-        // if username is passed whith whitespace in begginining, it breaks UI, so trim it for safety.
-        this.#username = value?.trim();
-        this.setUserInitials();
-    }
-    get menuLogoImage() {
-        return this.collapsed
-            ? this.menuSettings.menuLogoCollapsed ?? this.menuSettings.menuLogo
-            : this.menuSettings.menuLogo;
-    }
-    get sideNavWidth() {
-        return this.collapsed ? this.menuSettings.collapsedWidth : this.menuSettings.expandedWidth;
-    }
-    constructor(strapiLinkService, domService, menuItems) {
-        super(menuItems);
-        this.strapiLinkService = strapiLinkService;
-        this.domService = domService;
-        this.menuItems = menuItems;
-        this.menuSettings = {
-            expandedWidth: '241px',
-            collapsedWidth: '56px',
-            menuLogo: '',
-            menuLogoCollapsed: '',
-            disableStrapi: false,
-            disableLogoNavigation: false
-        };
-        this.collapsed = false;
-        this.COLLAPSED_LOCAL_STORAGE_KEY = "TLD_MENU_SIDE_NAV_COLLAPSED";
-        //#region Plausible event variables for collapse button
-        this.COLLAPSE_PLAUSIBLE_EVENT_ID = "collapseMenu";
-        this.COLLAPSE_PLAUSIBLE_ACTION_KEY = "action";
-        this.LOGOCLICK_PLAUSIBLE_ACTION_ID = "tilde_logo_click";
-        this.LOGOCLICK_PLAUSIBLE_EVENT = {
-            eventId: this.LOGOCLICK_PLAUSIBLE_ACTION_ID,
-            properties: []
-        };
-        this.EXPAND_PLAUSIBLE_EVENT = {
-            eventId: this.COLLAPSE_PLAUSIBLE_EVENT_ID,
-            properties: [{ key: this.COLLAPSE_PLAUSIBLE_ACTION_KEY, value: "expand" }]
-        };
-        this.COLLAPSE_PLAUSIBLE_EVENT = {
-            eventId: this.COLLAPSE_PLAUSIBLE_EVENT_ID,
-            properties: [{ key: this.COLLAPSE_PLAUSIBLE_ACTION_KEY, value: "collapse" }]
-        };
-        this.baseUrl = menuItems.menuSharedConfig.baseUrl || '';
+class MenuProfileComponent {
+    constructor() {
+        this.linkCallbackEvent = new EventEmitter();
     }
     ngOnInit() {
-        super.ngOnInit();
-        this.getColapsedFromLocalStorage();
         this.setUserInitials();
     }
-    logoClick(event) {
-        this.strapiLinkService.strapiLinkClick(event);
-    }
-    toggleCollapse() {
-        this.collapsed = !this.collapsed;
-        this.setColapsedFromLocalStorage();
-    }
     linkCallback(link) {
-        if (link.callback) {
-            link.callback();
-        }
-    }
-    getColapsedFromLocalStorage() {
-        if (!this.domService.localStorage) {
-            return;
-        }
-        this.collapsed = (this.domService.localStorage.getItem(this.COLLAPSED_LOCAL_STORAGE_KEY) == 'true' || ResolutionHelper.isMobileRes()) ? true : false;
-    }
-    setColapsedFromLocalStorage() {
-        if (!this.domService.localStorage) {
-            return;
-        }
-        this.domService.localStorage.setItem(this.COLLAPSED_LOCAL_STORAGE_KEY, this.collapsed.toString());
+        this.linkCallbackEvent.emit(link);
     }
     setUserInitials() {
         if (!this.username) {
@@ -1098,104 +1206,141 @@ class SideNavMenuComponent extends NavBaseComponent {
         // If there are more than one word, use the first letter of the first two names
         this.userInitials = splittedUsername[0][0] + splittedUsername[1][0];
     }
-    static { this.ɵfac = function SideNavMenuComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SideNavMenuComponent)(i0.ɵɵdirectiveInject(i1.StrapiLinkService), i0.ɵɵdirectiveInject(i2.DOMService), i0.ɵɵdirectiveInject(MenuItemsService)); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SideNavMenuComponent, selectors: [["lib-side-nav-menu"]], inputs: { username: "username", menuSettings: "menuSettings", productName: "productName" }, features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c0, decls: 39, vars: 36, consts: [["state", "matMenuTrigger"], ["menu", "matMenu"], ["profileMenuItem", ""], ["iconDown", ""], ["fxHide.gt-xs", ""], [1, "mobile-header", 3, "fxHide"], ["fxFlex", "3.125em", "fxLayoutAlign", "start center", 3, "click", "libPlausibleEvent", "href"], ["height", "40", "width", "40", "alt", "logo", 1, "menu-logo", 3, "src"], [1, "menu-product-name"], ["mat-icon-button", "", 1, "toggler", 3, "click", "libPlausibleEvent"], ["fxLayout", "column", 1, "menu-container", 3, "ngClass.lt-sm"], ["fxLayout", "column", "fxFlexFill", "", 1, "content"], ["fxLayout", "row", 1, "menu-container-header", 3, "fxLayoutAlign"], ["fxFlex", "3.125em", "fxLayoutAlign", "start center", 3, "libPlausibleEvent", "no-click", "href", "click", 4, "ngIf"], ["mat-icon-button", "", 1, "toggler", 3, "click", "libPlausibleEvent", "matTooltip"], ["fxHide.gt-xs", "", 3, "ngClass.lt-sm"], ["fxHide.lt-sm", ""], ["fxLayout", "column", 1, "menu-wrapper"], ["role", "navigation", 3, "toggleCollapseEvent", "direction", "isOpen", "active"], ["fxFlex", "", "fxLayout", "column"], [1, "profile"], [1, "profile-wrapper", 3, "matMenuTriggerFor"], [1, "profile-icon"], [4, "ngIf"], [1, "profile-menu"], [1, "profile-name"], ["class", "profile-arrow spin", 4, "ngIf", "ngIfElse"], [1, "profile-arrow", "spin"], ["mat-menu-item", "", 1, "profile-option"], ["target", "_blank", 1, "mat-mdc-menu-item", 3, "href"], [1, "mat-mdc-menu-item", 3, "routerLink"], ["target", "_blank", 1, "mat-mdc-menu-item", 3, "click", "href"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "mat-mdc-menu-item", 3, "click", "routerLink"], ["mat-menu-item", "", 1, "profile-option", 3, "click"], [1, "material-icons", "profile-option-icon", 3, "material-icons-outlined"], [1, "profile-option-icon", 3, "svgIcon"], [1, "material-icons", "profile-option-icon"]], template: function SideNavMenuComponent_Template(rf, ctx) { if (rf & 1) {
-            const _r1 = i0.ɵɵgetCurrentView();
-            i0.ɵɵprojectionDef();
-            i0.ɵɵelementStart(0, "div", 4)(1, "div", 5)(2, "a", 6);
-            i0.ɵɵpipe(3, "translate");
-            i0.ɵɵlistener("click", function SideNavMenuComponent_Template_a_click_2_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.logoClick($event)); });
-            i0.ɵɵelement(4, "img", 7);
-            i0.ɵɵelementStart(5, "span", 8);
-            i0.ɵɵtext(6);
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(7, "button", 9);
-            i0.ɵɵpipe(8, "translate");
-            i0.ɵɵlistener("click", function SideNavMenuComponent_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.toggleCollapse()); });
-            i0.ɵɵelementStart(9, "mat-icon");
-            i0.ɵɵtext(10, "menu");
-            i0.ɵɵelementEnd()()()();
-            i0.ɵɵelementStart(11, "div", 10)(12, "div", 11)(13, "div", 12);
-            i0.ɵɵtemplate(14, SideNavMenuComponent_a_14_Template, 5, 9, "a", 13);
-            i0.ɵɵelementStart(15, "button", 14);
-            i0.ɵɵpipe(16, "translate");
-            i0.ɵɵpipe(17, "translate");
-            i0.ɵɵlistener("click", function SideNavMenuComponent_Template_button_click_15_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.toggleCollapse()); });
-            i0.ɵɵelementStart(18, "mat-icon", 15);
-            i0.ɵɵtext(19, "close");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(20, "mat-icon", 16);
-            i0.ɵɵtext(21);
-            i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(22, "div", 17)(23, "menu-columns", 18);
-            i0.ɵɵlistener("toggleCollapseEvent", function SideNavMenuComponent_Template_menu_columns_toggleCollapseEvent_23_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.toggleCollapse()); });
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(24, "div", 19);
-            i0.ɵɵprojection(25);
+    static { this.ɵfac = function MenuProfileComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MenuProfileComponent)(); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MenuProfileComponent, selectors: [["lib-menu-profile"]], inputs: { collapsed: "collapsed", username: "username", userOptions: "userOptions" }, outputs: { linkCallbackEvent: "linkCallbackEvent" }, decls: 13, vars: 3, consts: [["state", "matMenuTrigger"], ["menu", "matMenu"], ["profileMenuItem", ""], ["iconDown", ""], [1, "profile"], [1, "profile-wrapper", 3, "matMenuTriggerFor"], [1, "profile-icon"], [4, "ngIf"], [1, "profile-menu"], [1, "profile-name"], ["class", "profile-arrow spin", 4, "ngIf", "ngIfElse"], [1, "profile-arrow", "spin"], ["mat-menu-item", "", 1, "profile-option"], ["target", "_blank", 1, "mat-mdc-menu-item", 3, "href"], [1, "mat-mdc-menu-item", 3, "routerLink"], ["target", "_blank", 1, "mat-mdc-menu-item", 3, "click", "href"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "mat-mdc-menu-item", 3, "click", "routerLink"], ["mat-menu-item", "", 1, "profile-option", 3, "click"], [1, "material-icons", "profile-option-icon", 3, "material-icons-outlined"], [1, "profile-option-icon", 3, "svgIcon"], [1, "material-icons", "profile-option-icon"]], template: function MenuProfileComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 4)(1, "button", 5, 0)(3, "div", 6);
+            i0.ɵɵtemplate(4, MenuProfileComponent_Conditional_4_Template, 1, 1)(5, MenuProfileComponent_Conditional_5_Template, 2, 0, "mat-icon");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(26, "div", 20)(27, "button", 21, 0)(29, "div", 22);
-            i0.ɵɵtemplate(30, SideNavMenuComponent_Conditional_30_Template, 1, 1)(31, SideNavMenuComponent_Conditional_31_Template, 2, 0, "mat-icon");
+            i0.ɵɵtemplate(6, MenuProfileComponent_ng_container_6_Template, 7, 5, "ng-container", 7);
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(32, SideNavMenuComponent_ng_container_32_Template, 7, 5, "ng-container", 23);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(33, "mat-menu", 24, 1);
-            i0.ɵɵrepeaterCreate(35, SideNavMenuComponent_For_36_Template, 2, 1, null, null, _forTrack0);
-            i0.ɵɵelementEnd()();
-            i0.ɵɵtemplate(37, SideNavMenuComponent_ng_template_37_Template, 3, 4, "ng-template", null, 2, i0.ɵɵtemplateRefExtractor);
+            i0.ɵɵelementStart(7, "mat-menu", 8, 1);
+            i0.ɵɵrepeaterCreate(9, MenuProfileComponent_For_10_Template, 2, 1, null, null, _forTrack0);
             i0.ɵɵelementEnd()();
+            i0.ɵɵtemplate(11, MenuProfileComponent_ng_template_11_Template, 3, 4, "ng-template", null, 2, i0.ɵɵtemplateRefExtractor);
         } if (rf & 2) {
-            const menu_r13 = i0.ɵɵreference(34);
-            i0.ɵɵadvance();
-            i0.ɵɵproperty("fxHide", !ctx.collapsed);
-            i0.ɵɵadvance();
-            i0.ɵɵclassProp("no-click", ctx.menuSettings == null ? null : ctx.menuSettings.disableLogoNavigation);
-            i0.ɵɵproperty("libPlausibleEvent", ctx.LOGOCLICK_PLAUSIBLE_EVENT)("href", ctx.baseUrl, i0.ɵɵsanitizeUrl);
-            i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(3, 28, "MENU.ARIA_LABELS.LOGO"));
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("src", ctx.menuLogoImage, i0.ɵɵsanitizeUrl);
-            i0.ɵɵadvance(2);
-            i0.ɵɵtextInterpolate1(" ", ctx.productName, " ");
+            const menu_r11 = i0.ɵɵreference(8);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("libPlausibleEvent", ctx.collapsed ? ctx.EXPAND_PLAUSIBLE_EVENT : ctx.COLLAPSE_PLAUSIBLE_EVENT);
-            i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(8, 30, "ARIA_LABELS.MENU_TOGGLER"));
-            i0.ɵɵadvance(4);
-            i0.ɵɵstyleProp("width", ctx.sideNavWidth);
-            i0.ɵɵclassProp("collapsed", ctx.collapsed);
-            i0.ɵɵproperty("ngClass.lt-sm", "mobile");
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("fxLayoutAlign", ctx.collapsed ? "center center" : "space-between center");
-            i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", !ctx.collapsed);
-            i0.ɵɵadvance();
-            i0.ɵɵproperty("libPlausibleEvent", ctx.collapsed ? ctx.EXPAND_PLAUSIBLE_EVENT : ctx.COLLAPSE_PLAUSIBLE_EVENT)("matTooltip", i0.ɵɵpipeBind1(16, 32, ctx.collapsed ? "MENU.EXPAND" : "MENU.COLLAPSE"));
-            i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(17, 34, "ARIA_LABELS.MENU_TOGGLER"));
-            i0.ɵɵadvance(3);
-            i0.ɵɵproperty("ngClass.lt-sm", "mob-close-icon");
-            i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate(ctx.collapsed ? "keyboard_double_arrow_right" : "keyboard_double_arrow_left");
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("direction", ctx.direction)("isOpen", !ctx.collapsed)("active", ctx.active);
-            i0.ɵɵadvance(4);
-            i0.ɵɵproperty("matMenuTriggerFor", menu_r13);
+            i0.ɵɵproperty("matMenuTriggerFor", menu_r11);
             i0.ɵɵadvance(3);
-            i0.ɵɵconditional(ctx.userInitials ? 30 : 31);
+            i0.ɵɵconditional(ctx.userInitials ? 4 : 5);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngIf", !ctx.collapsed);
             i0.ɵɵadvance(3);
-            i0.ɵɵrepeater(ctx.menuSettings.userOptions);
-        } }, dependencies: [i1$2.DefaultLayoutDirective, i1$2.DefaultLayoutAlignDirective, i1$2.FlexFillDirective, i1$2.DefaultFlexDirective, i2$2.DefaultShowHideDirective, i2$2.DefaultClassDirective, i1$1.RouterLink, i4.NgIf, i4.NgTemplateOutlet, i5.MatTooltip, i2$1.MatIcon, i7.MatIconButton, i6.MatMenu, i6.MatMenuItem, i6.MatMenuTrigger, i2.PlausibleEventDirective, MenuColumnsComponent, i8.TranslatePipe], styles: ["a[_ngcontent-%COMP%]{text-decoration:none}.no-click[_ngcontent-%COMP%]{pointer-events:none!important}.mobile-header[_ngcontent-%COMP%]{display:flex;justify-content:space-between;padding:23px 27px;background-color:#fcfcfc;border:1px solid var(--base-70)}.mobile.menu-container.collapsed[_ngcontent-%COMP%]{display:none!important}.mobile.menu-container[_ngcontent-%COMP%]:not(.collapsed){display:block!important;position:fixed;min-width:100vw;min-height:100dvh;z-index:1000}button[_ngcontent-%COMP%]:has(.mob-close-icon){margin-right:14px}.menu-container[_ngcontent-%COMP%]   [_ngcontent-%COMP%]::-webkit-scrollbar{width:5px}.menu-container[_ngcontent-%COMP%]   [_ngcontent-%COMP%]::-webkit-scrollbar-thumb{background:var(--base-95);background-clip:padding-box}.menu-container[_ngcontent-%COMP%]   [_ngcontent-%COMP%]::-webkit-scrollbar-track{background:var(--base-100)}.menu-product-name[_ngcontent-%COMP%]{white-space:nowrap;margin-left:12px;font-weight:600;color:var(--base-10)}.menu-container[_ngcontent-%COMP%]{max-height:100dvh;white-space:nowrap;height:100%;transition:width .2s ease;min-height:100dvh;overflow:auto;background:var(--base-100);border-right:2px solid var(--base-95)}.menu-container[_ngcontent-%COMP%]   .menu-container-header[_ngcontent-%COMP%]{margin:24px 0;max-height:40px}.menu-container.collapsed[_ngcontent-%COMP%]   .menu-container-header[_ngcontent-%COMP%]{margin:24px 0 32px!important}.menu-container[_ngcontent-%COMP%]   .content[_ngcontent-%COMP%]:not(.collapsed){overflow-x:hidden;padding:0 12px}.menu-container[_ngcontent-%COMP%]   .content[_ngcontent-%COMP%]:not(.collapsed)   .menu-logo[_ngcontent-%COMP%]{margin-left:16px;max-width:100%}.menu-container[_ngcontent-%COMP%]   .divider[_ngcontent-%COMP%]{width:100%}.menu-container[_ngcontent-%COMP%]   .profile[_ngcontent-%COMP%]{position:relative;margin-top:100px}.menu-container[_ngcontent-%COMP%]   .profile-wrapper[_ngcontent-%COMP%]{background:none;color:var(--base-30);display:flex;align-items:center;justify-content:start;width:100%;position:absolute;bottom:0;margin:32px 0}.menu-container[_ngcontent-%COMP%]   .profile-icon[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:center;min-width:40px;height:40px;border-radius:100%;color:var(--base-0);background-color:var(--base-70);font-size:16px;font-weight:600}.menu-container[_ngcontent-%COMP%]   .profile-name[_ngcontent-%COMP%]{max-width:145px;overflow:hidden;margin-left:12px;text-overflow:ellipsis}.collapsed[_ngcontent-%COMP%]   .profile-wrapper[_ngcontent-%COMP%]{margin:36px 0!important}.mobile[_ngcontent-%COMP%]   .profile-name[_ngcontent-%COMP%]{max-width:60vw}.profile-option-icon[_ngcontent-%COMP%]{vertical-align:middle;margin:0 5px 5px 0}[_nghost-%COMP%]     .menu-item{display:flex;padding:16px!important;border-radius:4px!important}[_nghost-%COMP%]     .child-list .menu-item{padding:8px 46px!important}[_nghost-%COMP%]     .collapsed .menu-item{padding:0!important;width:40px;height:40px;border-radius:50%!important}[_nghost-%COMP%]     .active-menu-item{background-color:var(--base-95)!important}[_nghost-%COMP%]     .menu-item-title{margin-left:12px}tld-menu-icon[_ngcontent-%COMP%]{margin-right:10px}.profile-arrow[_ngcontent-%COMP%]{position:absolute;right:0;margin-right:8px}.mobile[_ngcontent-%COMP%]   .profile-arrow[_ngcontent-%COMP%]{margin-right:20px}.spin[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_spinArrow .3s forwards}[_nghost-%COMP%]  button.collapse-btn .mat-mdc-button-persistent-ripple, [_nghost-%COMP%]  button.toggler .mat-mdc-button-persistent-ripple{display:none}[_nghost-%COMP%]     .mobile .child-list .menu-item{padding:8px 54px!important}  .cdk-overlay-container .profile-menu{margin:10px 0!important}  .mat-mdc-menu-item .mat-icon{margin-right:5px!important}  .collapsed .profile-wrapper{justify-content:center!important}  .profile-menu a{font-weight:400!important;display:flex;align-items:center;gap:5px}  .profile-menu a:hover{color:var(--mat-menu-item-label-text-color, var(--mat-app-on-surface))!important;text-decoration:inherit}@keyframes _ngcontent-%COMP%_spinArrow{to{transform:rotate(180deg)}}"] }); }
+            i0.ɵɵrepeater(ctx.userOptions);
+        } }, dependencies: [i1$1.RouterLink, i3.NgIf, i3.NgTemplateOutlet, i2$1.MatIcon, i6.MatMenu, i6.MatMenuItem, i6.MatMenuTrigger, i8.TranslatePipe], styles: ["a[_ngcontent-%COMP%]{text-decoration:none}.profile[_ngcontent-%COMP%]{position:relative;margin-top:100px}.profile-wrapper[_ngcontent-%COMP%]{background:none;color:var(--base-30);display:flex;align-items:center;justify-content:start;width:100%;position:absolute;bottom:0;margin:32px 0}.profile-icon[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:center;min-width:40px;height:40px;border-radius:100%;color:var(--base-0);background-color:var(--base-70);font-size:16px;font-weight:600}.profile-name[_ngcontent-%COMP%]{max-width:145px;overflow:hidden;margin-left:12px;text-overflow:ellipsis}.profile-option-icon[_ngcontent-%COMP%]{vertical-align:middle;margin:0 5px 5px 0}.profile-arrow[_ngcontent-%COMP%]{position:absolute;right:0;margin-right:8px}.mobile[_ngcontent-%COMP%]   .profile-arrow[_ngcontent-%COMP%]{margin-right:20px}.spin[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_spinArrow .3s forwards}  .profile-menu a{font-weight:400!important;display:flex;align-items:center;gap:5px}  .profile-menu a:hover{color:var(--mat-menu-item-label-text-color, var(--mat-app-on-surface))!important;text-decoration:inherit}@keyframes _ngcontent-%COMP%_spinArrow{to{transform:rotate(180deg)}}"] }); }
 }
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SideNavMenuComponent, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuProfileComponent, [{
         type: Component,
-        args: [{ selector: 'lib-side-nav-menu', template: "<div fxHide.gt-xs>\r\n  <div [fxHide]=\"!collapsed\" class=\"mobile-header\">\r\n    <a [libPlausibleEvent]=\"LOGOCLICK_PLAUSIBLE_EVENT\" fxFlex=\"3.125em\" [href]=\"baseUrl\" [class.no-click]=\"menuSettings?.disableLogoNavigation\"\r\n      [attr.aria-label]=\"'MENU.ARIA_LABELS.LOGO' | translate\" (click)=\"logoClick($event)\" fxLayoutAlign=\"start center\"\r\n    >\r\n      <img height=\"40\" width=\"40\" class=\"menu-logo\" [src]=\"menuLogoImage\" alt=\"logo\" />\r\n      <span class=\"menu-product-name\">\r\n        {{ productName }}\r\n      </span>\r\n    </a>\r\n\r\n    <button\r\n      mat-icon-button\r\n      class=\"toggler\"\r\n      [attr.aria-label]=\"'ARIA_LABELS.MENU_TOGGLER' | translate\"\r\n      [libPlausibleEvent]=\"collapsed ? EXPAND_PLAUSIBLE_EVENT : COLLAPSE_PLAUSIBLE_EVENT\"\r\n      (click)=\"toggleCollapse()\"\r\n    >\r\n      <mat-icon>menu</mat-icon>\r\n    </button>\r\n  </div>\r\n</div>\r\n\r\n<div [ngClass.lt-sm]=\"'mobile'\" class=\"menu-container\" [style.width]=\"sideNavWidth\" fxLayout=\"column\" [class.collapsed]=\"collapsed\">\r\n  <div class=\"content\" fxLayout=\"column\" fxFlexFill>\r\n    <div class=\"menu-container-header\" fxLayout=\"row\" [fxLayoutAlign]=\"collapsed ? 'center center' : 'space-between center'\">\r\n      <a *ngIf=\"!collapsed\" [libPlausibleEvent]=\"LOGOCLICK_PLAUSIBLE_EVENT\" fxFlex=\"3.125em\" [class.no-click]=\"menuSettings?.disableLogoNavigation\" [href]=\"baseUrl\"\r\n        [attr.aria-label]=\"'MENU.ARIA_LABELS.LOGO' | translate\" (click)=\"logoClick($event)\" fxLayoutAlign=\"start center\"\r\n      >\r\n        <img height=\"40\" width=\"40\" class=\"menu-logo\" [src]=\"menuLogoImage\" alt=\"logo\" />\r\n        <span class=\"menu-product-name\">\r\n          {{ productName }}\r\n        </span>\r\n      </a>\r\n\r\n      <button\r\n        mat-icon-button\r\n        class=\"toggler\"\r\n        [attr.aria-label]=\"'ARIA_LABELS.MENU_TOGGLER' | translate\"\r\n        [libPlausibleEvent]=\"collapsed ? EXPAND_PLAUSIBLE_EVENT : COLLAPSE_PLAUSIBLE_EVENT\"\r\n        [matTooltip]=\"(collapsed ? 'MENU.EXPAND' : 'MENU.COLLAPSE') | translate\"\r\n        (click)=\"toggleCollapse()\"\r\n      >\r\n        <mat-icon fxHide.gt-xs [ngClass.lt-sm]=\"'mob-close-icon'\">close</mat-icon>\r\n        <mat-icon fxHide.lt-sm>{{ collapsed ? 'keyboard_double_arrow_right' : 'keyboard_double_arrow_left' }}</mat-icon>\r\n      </button>\r\n    </div>\r\n\r\n    <div class=\"menu-wrapper\" fxLayout=\"column\">\r\n      <menu-columns (toggleCollapseEvent)=\"toggleCollapse()\" [direction]=\"direction\" role=\"navigation\" [isOpen]=\"!collapsed\"\r\n        [active]=\"active\"></menu-columns>\r\n    </div>\r\n    <div fxFlex fxLayout=\"column\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  <div class=\"profile\">\r\n    <button #state=\"matMenuTrigger\" [matMenuTriggerFor]=\"menu\" class=\"profile-wrapper\">\r\n      <div class=\"profile-icon\">\r\n        @if (userInitials) {\r\n          {{userInitials}}\r\n        } @else {\r\n          <mat-icon>person</mat-icon>\r\n        }\r\n    </div>\r\n\r\n      <ng-container *ngIf=\"!collapsed\">\r\n        <span class=\"profile-name\">\r\n          {{ username ?? 'MENU.ANONYMOUS' | translate }}\r\n        </span>\r\n\r\n        <mat-icon *ngIf=\"state.menuOpen; else iconDown\" class=\"profile-arrow spin\">{{\"keyboard_arrow_down\"}}</mat-icon>\r\n\r\n        <ng-template #iconDown>\r\n          <mat-icon class=\"profile-arrow spin\">{{\"keyboard_arrow_up\" }}</mat-icon>\r\n        </ng-template>\r\n      </ng-container>\r\n    </button>\r\n\r\n    <mat-menu #menu=\"matMenu\" class=\"profile-menu\">\r\n      @for (item of menuSettings.userOptions; track item.label) {\r\n        @if (item.link) {\r\n          @if (item.link.isExternal) {\r\n            <a class=\"mat-mdc-menu-item\" [href]=\"item.link.href\" target=\"_blank\" (click)=\"linkCallback(item.link)\">\r\n              <ng-container\r\n                *ngTemplateOutlet=\"profileMenuItem; context: { icon: item.icon, label: item.label }\">\r\n              </ng-container>\r\n            </a>\r\n          } @else {\r\n            <a class=\"mat-mdc-menu-item\" [routerLink]=\"item.link.href\" (click)=\"linkCallback(item.link)\">\r\n              <ng-container\r\n                *ngTemplateOutlet=\"profileMenuItem; context: { icon: item.icon, label: item.label }\">\r\n              </ng-container>\r\n            </a>\r\n          }\r\n        } @else {\r\n          <button\r\n            mat-menu-item\r\n            class=\"profile-option\"\r\n            (click)=\"item.button?.callback()\"\r\n        >\r\n          <ng-container\r\n            *ngTemplateOutlet=\"profileMenuItem; context: { icon: item.icon, label: item.label }\">\r\n          </ng-container>\r\n        </button>\r\n        }\r\n      }\r\n    </mat-menu>\r\n  </div>\r\n\r\n  <ng-template #profileMenuItem let-icon=\"icon\" let-label=\"label\">\r\n    @if (icon) {\r\n      @if (!icon?.isCustom) {\r\n        <span class=\"material-icons profile-option-icon\" [class.material-icons-outlined]=\"icon?.isOutlined\">\r\n          {{icon?.name}}\r\n        </span>\r\n      } @else {\r\n        <mat-icon class=\"profile-option-icon\" [svgIcon]=\"icon?.name\"></mat-icon>\r\n      }\r\n    }\r\n    {{ label | translate }}\r\n  </ng-template>\r\n</div>\r\n", styles: ["a{text-decoration:none}.no-click{pointer-events:none!important}.mobile-header{display:flex;justify-content:space-between;padding:23px 27px;background-color:#fcfcfc;border:1px solid var(--base-70)}.mobile.menu-container.collapsed{display:none!important}.mobile.menu-container:not(.collapsed){display:block!important;position:fixed;min-width:100vw;min-height:100dvh;z-index:1000}button:has(.mob-close-icon){margin-right:14px}.menu-container ::-webkit-scrollbar{width:5px}.menu-container ::-webkit-scrollbar-thumb{background:var(--base-95);background-clip:padding-box}.menu-container ::-webkit-scrollbar-track{background:var(--base-100)}.menu-product-name{white-space:nowrap;margin-left:12px;font-weight:600;color:var(--base-10)}.menu-container{max-height:100dvh;white-space:nowrap;height:100%;transition:width .2s ease;min-height:100dvh;overflow:auto;background:var(--base-100);border-right:2px solid var(--base-95)}.menu-container .menu-container-header{margin:24px 0;max-height:40px}.menu-container.collapsed .menu-container-header{margin:24px 0 32px!important}.menu-container .content:not(.collapsed){overflow-x:hidden;padding:0 12px}.menu-container .content:not(.collapsed) .menu-logo{margin-left:16px;max-width:100%}.menu-container .divider{width:100%}.menu-container .profile{position:relative;margin-top:100px}.menu-container .profile-wrapper{background:none;color:var(--base-30);display:flex;align-items:center;justify-content:start;width:100%;position:absolute;bottom:0;margin:32px 0}.menu-container .profile-icon{display:flex;justify-content:center;align-items:center;min-width:40px;height:40px;border-radius:100%;color:var(--base-0);background-color:var(--base-70);font-size:16px;font-weight:600}.menu-container .profile-name{max-width:145px;overflow:hidden;margin-left:12px;text-overflow:ellipsis}.collapsed .profile-wrapper{margin:36px 0!important}.mobile .profile-name{max-width:60vw}.profile-option-icon{vertical-align:middle;margin:0 5px 5px 0}:host ::ng-deep .menu-item{display:flex;padding:16px!important;border-radius:4px!important}:host ::ng-deep .child-list .menu-item{padding:8px 46px!important}:host ::ng-deep .collapsed .menu-item{padding:0!important;width:40px;height:40px;border-radius:50%!important}:host ::ng-deep .active-menu-item{background-color:var(--base-95)!important}:host ::ng-deep .menu-item-title{margin-left:12px}tld-menu-icon{margin-right:10px}.profile-arrow{position:absolute;right:0;margin-right:8px}.mobile .profile-arrow{margin-right:20px}.spin{animation:spinArrow .3s forwards}:host::ng-deep button.collapse-btn .mat-mdc-button-persistent-ripple,:host::ng-deep button.toggler .mat-mdc-button-persistent-ripple{display:none}:host ::ng-deep .mobile .child-list .menu-item{padding:8px 54px!important}::ng-deep .cdk-overlay-container .profile-menu{margin:10px 0!important}::ng-deep .mat-mdc-menu-item .mat-icon{margin-right:5px!important}::ng-deep .collapsed .profile-wrapper{justify-content:center!important}::ng-deep .profile-menu a{font-weight:400!important;display:flex;align-items:center;gap:5px}::ng-deep .profile-menu a:hover{color:var(--mat-menu-item-label-text-color, var(--mat-app-on-surface))!important;text-decoration:inherit}@keyframes spinArrow{to{transform:rotate(180deg)}}\n"] }]
-    }], () => [{ type: i1.StrapiLinkService }, { type: i2.DOMService }, { type: MenuItemsService }], { username: [{
+        args: [{ selector: 'lib-menu-profile', template: "<div class=\"profile\">\r\n  <button #state=\"matMenuTrigger\" [matMenuTriggerFor]=\"menu\" class=\"profile-wrapper\">\r\n    <div class=\"profile-icon\">\r\n      @if (userInitials) {\r\n        {{userInitials}}\r\n      } @else {\r\n        <mat-icon>person</mat-icon>\r\n      }\r\n    </div>\r\n\r\n    <ng-container *ngIf=\"!collapsed\">\r\n      <span class=\"profile-name\">\r\n        {{ username ?? 'MENU.ANONYMOUS' | translate }}\r\n      </span>\r\n\r\n      <mat-icon *ngIf=\"state.menuOpen; else iconDown\" class=\"profile-arrow spin\">keyboard_arrow_down</mat-icon>\r\n\r\n      <ng-template #iconDown>\r\n        <mat-icon class=\"profile-arrow spin\">keyboard_arrow_up</mat-icon>\r\n      </ng-template>\r\n    </ng-container>\r\n  </button>\r\n\r\n  <mat-menu #menu=\"matMenu\" class=\"profile-menu\">\r\n    @for (item of userOptions; track item.label) {\r\n      @if (item.link) {\r\n        @if (item.link.isExternal) {\r\n          <a class=\"mat-mdc-menu-item\" [href]=\"item.link.href\" target=\"_blank\" (click)=\"linkCallback(item.link)\">\r\n            <ng-container\r\n              *ngTemplateOutlet=\"profileMenuItem; context: { icon: item.icon, label: item.label }\">\r\n            </ng-container>\r\n          </a>\r\n        } @else {\r\n          <a class=\"mat-mdc-menu-item\" [routerLink]=\"item.link.href\" (click)=\"linkCallback(item.link)\">\r\n            <ng-container\r\n              *ngTemplateOutlet=\"profileMenuItem; context: { icon: item.icon, label: item.label }\">\r\n            </ng-container>\r\n          </a>\r\n        }\r\n      } @else {\r\n        <button\r\n          mat-menu-item\r\n          class=\"profile-option\"\r\n          (click)=\"item.button?.callback()\"\r\n      >\r\n        <ng-container\r\n          *ngTemplateOutlet=\"profileMenuItem; context: { icon: item.icon, label: item.label }\">\r\n        </ng-container>\r\n      </button>\r\n      }\r\n    }\r\n  </mat-menu>\r\n</div>\r\n\r\n<ng-template #profileMenuItem let-icon=\"icon\" let-label=\"label\">\r\n  @if (icon) {\r\n    @if (!icon?.isCustom) {\r\n      <span class=\"material-icons profile-option-icon\" [class.material-icons-outlined]=\"icon?.isOutlined\">\r\n        {{icon?.name}}\r\n      </span>\r\n    } @else {\r\n      <mat-icon class=\"profile-option-icon\" [svgIcon]=\"icon?.name\"></mat-icon>\r\n    }\r\n  }\r\n  {{ label | translate }}\r\n</ng-template>", styles: ["a{text-decoration:none}.profile{position:relative;margin-top:100px}.profile-wrapper{background:none;color:var(--base-30);display:flex;align-items:center;justify-content:start;width:100%;position:absolute;bottom:0;margin:32px 0}.profile-icon{display:flex;justify-content:center;align-items:center;min-width:40px;height:40px;border-radius:100%;color:var(--base-0);background-color:var(--base-70);font-size:16px;font-weight:600}.profile-name{max-width:145px;overflow:hidden;margin-left:12px;text-overflow:ellipsis}.profile-option-icon{vertical-align:middle;margin:0 5px 5px 0}.profile-arrow{position:absolute;right:0;margin-right:8px}.mobile .profile-arrow{margin-right:20px}.spin{animation:spinArrow .3s forwards}::ng-deep .profile-menu a{font-weight:400!important;display:flex;align-items:center;gap:5px}::ng-deep .profile-menu a:hover{color:var(--mat-menu-item-label-text-color, var(--mat-app-on-surface))!important;text-decoration:inherit}@keyframes spinArrow{to{transform:rotate(180deg)}}\n"] }]
+    }], null, { collapsed: [{
             type: Input
-        }], menuSettings: [{
+        }], username: [{
             type: Input
-        }], productName: [{
+        }], userOptions: [{
             type: Input
+        }], linkCallbackEvent: [{
+            type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SideNavMenuComponent, { className: "SideNavMenuComponent", filePath: "lib\\components\\side-nav-menu\\side-nav-menu.component.ts", lineNumber: 15 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MenuProfileComponent, { className: "MenuProfileComponent", filePath: "lib\\components\\menu-profile\\menu-profile.component.ts", lineNumber: 10 }); })();
+
+function MenuLangSwitcherComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span");
+    i0.ɵɵtext(1);
+    i0.ɵɵpipe(2, "languageTranslate");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(2, 1, ctx_r0.currentLanguageCode), " ");
+} }
+function MenuLangSwitcherComponent_Conditional_7_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "mat-icon", 6);
+    i0.ɵɵtext(1, "keyboard_arrow_down");
+    i0.ɵɵelementEnd();
+} }
+function MenuLangSwitcherComponent_Conditional_7_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "mat-icon", 6);
+    i0.ɵɵtext(1, "keyboard_arrow_up");
+    i0.ɵɵelementEnd();
+} }
+function MenuLangSwitcherComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, MenuLangSwitcherComponent_Conditional_7_Conditional_0_Template, 2, 0, "mat-icon", 6)(1, MenuLangSwitcherComponent_Conditional_7_Conditional_1_Template, 2, 0, "mat-icon", 6);
+} if (rf & 2) {
+    i0.ɵɵnextContext();
+    const state_r2 = i0.ɵɵreference(1);
+    i0.ɵɵconditional(state_r2.menuOpen ? 0 : 1);
+} }
+function MenuLangSwitcherComponent_For_11_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 8);
+    i0.ɵɵlistener("click", function MenuLangSwitcherComponent_For_11_Conditional_0_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r3); const lang_r4 = i0.ɵɵnextContext().$implicit; const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.changeLanguage(lang_r4)); });
+    i0.ɵɵtext(1);
+    i0.ɵɵpipe(2, "languageTranslate");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const lang_r4 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(2, 1, lang_r4), " ");
+} }
+function MenuLangSwitcherComponent_For_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, MenuLangSwitcherComponent_For_11_Conditional_0_Template, 3, 3, "button", 7);
+} if (rf & 2) {
+    const lang_r4 = ctx.$implicit;
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵconditional(lang_r4 !== ctx_r0.currentLanguageCode ? 0 : -1);
+} }
+class MenuLangSwitcherComponent {
+    constructor() {
+        this.changeLanguageEvent = new EventEmitter();
+        this.#translate = inject(TranslateService);
+    }
+    #translate;
+    ngOnInit() {
+        this.currentLanguageCode = this.#translate.currentLang;
+    }
+    changeLanguage(lang) {
+        this.#translate.use(lang);
+        this.currentLanguageCode = lang;
+        this.changeLanguageEvent.emit(lang);
+    }
+    static { this.ɵfac = function MenuLangSwitcherComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MenuLangSwitcherComponent)(); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MenuLangSwitcherComponent, selectors: [["lib-menu-lang-switcher"]], inputs: { isCollapsed: "isCollapsed", languages: "languages" }, outputs: { changeLanguageEvent: "changeLanguageEvent" }, decls: 12, vars: 10, consts: [["state", "matMenuTrigger"], ["menu", "matMenu"], ["matTooltipPosition", "after", "matTooltipClass", "menu-tooltip", 1, "lang-switcher", 3, "matMenuTriggerFor", "matTooltip"], [1, "current-lang"], [1, "lang-icon"], [1, "lang-menu"], [1, "menu-arrow", "spin"], ["mat-menu-item", "", 1, "profile-option"], ["mat-menu-item", "", 1, "profile-option", 3, "click"]], template: function MenuLangSwitcherComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "button", 2, 0);
+            i0.ɵɵpipe(2, "translate");
+            i0.ɵɵelementStart(3, "div", 3)(4, "mat-icon", 4);
+            i0.ɵɵtext(5, "language");
+            i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(6, MenuLangSwitcherComponent_Conditional_6_Template, 3, 3, "span");
+            i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(7, MenuLangSwitcherComponent_Conditional_7_Template, 2, 1);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(8, "mat-menu", 5, 1);
+            i0.ɵɵrepeaterCreate(10, MenuLangSwitcherComponent_For_11_Template, 1, 1, null, null, i0.ɵɵrepeaterTrackByIdentity);
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            const state_r2 = i0.ɵɵreference(1);
+            const menu_r5 = i0.ɵɵreference(9);
+            i0.ɵɵclassProp("collapsed", ctx.isCollapsed)("active", state_r2.menuOpen);
+            i0.ɵɵproperty("matMenuTriggerFor", menu_r5)("matTooltip", ctx.isCollapsed ? i0.ɵɵpipeBind1(2, 8, "MENU.CHANGE_LANGUAGE") : "");
+            i0.ɵɵadvance(6);
+            i0.ɵɵconditional(!ctx.isCollapsed ? 6 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(!ctx.isCollapsed ? 7 : -1);
+            i0.ɵɵadvance(3);
+            i0.ɵɵrepeater(ctx.languages);
+        } }, dependencies: [i5.MatTooltip, i2$1.MatIcon, i6.MatMenu, i6.MatMenuItem, i6.MatMenuTrigger, i8.TranslatePipe, i2.LanguageTranslatePipe], styles: [".lang-switcher[_ngcontent-%COMP%]{white-space:nowrap;overflow:hidden;display:flex;align-items:center;color:var(--base-40);background:none;width:100%;padding:16px 8px 16px 18px;border-radius:5px}.lang-switcher.active[_ngcontent-%COMP%], .lang-switcher[_ngcontent-%COMP%]:hover{background-color:var(--base-70)}.collapsed[_ngcontent-%COMP%]{padding:0;min-width:40px;height:40px;border-radius:50%;margin-top:10px;justify-content:center;width:100%;margin-left:-6px}.current-lang[_ngcontent-%COMP%]{display:flex;align-items:center;width:100%;gap:12px}.collapsed[_ngcontent-%COMP%]   .current-lang[_ngcontent-%COMP%]{justify-content:center;width:100%}.spin[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_spinArrow .3s forwards}@keyframes _ngcontent-%COMP%_spinArrow{to{transform:rotate(180deg)}}"] }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuLangSwitcherComponent, [{
+        type: Component,
+        args: [{ selector: 'lib-menu-lang-switcher', template: "<button\r\n  [class.collapsed]=\"isCollapsed\"\r\n  #state=\"matMenuTrigger\"\r\n  [matMenuTriggerFor]=\"menu\"\r\n  [matTooltip]=\"isCollapsed ? ('MENU.CHANGE_LANGUAGE' | translate) : ''\"\r\n  matTooltipPosition=\"after\"\r\n  matTooltipClass=\"menu-tooltip\" \r\n  class=\"lang-switcher\"\r\n  [class.active]=\"state.menuOpen\"\r\n>\r\n<div class=\"current-lang\">\r\n  <mat-icon class=\"lang-icon\">language</mat-icon>\r\n\r\n  @if (!isCollapsed) {\r\n    <span>\r\n      {{ currentLanguageCode | languageTranslate }}\r\n    </span>\r\n  }\r\n</div>\r\n\r\n  @if (!isCollapsed) {\r\n    @if (state.menuOpen) {\r\n      <mat-icon class=\"menu-arrow spin\">keyboard_arrow_down</mat-icon>\r\n      } @else {\r\n      <mat-icon class=\"menu-arrow spin\">keyboard_arrow_up</mat-icon>\r\n      }\r\n  }\r\n</button>\r\n\r\n<mat-menu #menu=\"matMenu\" class=\"lang-menu\">\r\n  @for (lang of languages; track lang) {\r\n    @if (lang !== currentLanguageCode) {\r\n      <button mat-menu-item class=\"profile-option\" (click)=\"changeLanguage(lang)\">\r\n        {{ lang | languageTranslate }}\r\n      </button>\r\n    }\r\n  }\r\n</mat-menu>\r\n", styles: [".lang-switcher{white-space:nowrap;overflow:hidden;display:flex;align-items:center;color:var(--base-40);background:none;width:100%;padding:16px 8px 16px 18px;border-radius:5px}.lang-switcher.active,.lang-switcher:hover{background-color:var(--base-70)}.collapsed{padding:0;min-width:40px;height:40px;border-radius:50%;margin-top:10px;justify-content:center;width:100%;margin-left:-6px}.current-lang{display:flex;align-items:center;width:100%;gap:12px}.collapsed .current-lang{justify-content:center;width:100%}.spin{animation:spinArrow .3s forwards}@keyframes spinArrow{to{transform:rotate(180deg)}}\n"] }]
+    }], null, { isCollapsed: [{
+            type: Input
+        }], languages: [{
+            type: Input
+        }], changeLanguageEvent: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MenuLangSwitcherComponent, { className: "MenuLangSwitcherComponent", filePath: "lib\\components\\menu-lang-switcher\\menu-lang-switcher.component.ts", lineNumber: 9 }); })();
 
 class MenuModule {
     static forRoot(config) {
@@ -1217,7 +1362,8 @@ class MenuModule {
             MatMenuModule,
             MatIconModule,
             TranslateModule,
-            PlausibleModule] }); }
+            PlausibleModule,
+            LanguageTranslateModule] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuModule, [{
         type: NgModule,
@@ -1229,7 +1375,9 @@ class MenuModule {
                     MenuColumnsComponent,
                     MenuIconComponent,
                     MenuItemLinkComponent,
-                    MenuItemBtnComponent
+                    MenuItemBtnComponent,
+                    MenuProfileComponent,
+                    MenuLangSwitcherComponent
                 ],
                 exports: [
                     SideNavMenuComponent,
@@ -1247,7 +1395,8 @@ class MenuModule {
                     MatMenuModule,
                     MatIconModule,
                     TranslateModule,
-                    PlausibleModule
+                    PlausibleModule,
+                    LanguageTranslateModule
                 ],
                 providers: [StarpiMenuService, provideHttpClient(withInterceptorsFromDi())],
             }]
@@ -1258,7 +1407,9 @@ class MenuModule {
         MenuColumnsComponent,
         MenuIconComponent,
         MenuItemLinkComponent,
-        MenuItemBtnComponent], imports: [FlexLayoutModule,
+        MenuItemBtnComponent,
+        MenuProfileComponent,
+        MenuLangSwitcherComponent], imports: [FlexLayoutModule,
         RouterModule,
         CommonModule,
         MatTooltipModule,
@@ -1269,8 +1420,12 @@ class MenuModule {
         MatMenuModule,
         MatIconModule,
         TranslateModule,
-        PlausibleModule], exports: [SideNavMenuComponent,
+        PlausibleModule,
+        LanguageTranslateModule], exports: [SideNavMenuComponent,
         MenuColumnsComponent] }); })();
+i0.ɵɵsetComponentScope(SideNavMenuComponent, [i1$2.DefaultLayoutDirective, i1$2.DefaultLayoutAlignDirective, i1$2.FlexFillDirective, i1$2.DefaultFlexDirective, i2$2.DefaultShowHideDirective, i2$2.DefaultClassDirective, i3.NgIf, i5.MatTooltip, i2$1.MatIcon, i7.MatIconButton, i2.PlausibleEventDirective, MenuColumnsComponent,
+    MenuProfileComponent,
+    MenuLangSwitcherComponent], [i8.TranslatePipe]);
 
 /**
  * Prefefined user menu options, so that same style of items are used across all products. Use this by passing necessary configuration.
@@ -1301,25 +1456,6 @@ const USER_MENU_OPTIONS = {
         icon: { name: `mail` },
         link: { href, isExternal: true, callback },
     }),
-    /** use language update callback to save in localstorage */
-    changeLanguage: (dialog, languages, languageChangeCallback) => ({
-        label: 'MENU.CHANGE_LANGUAGE',
-        icon: { name: 'language' },
-        button: {
-            callback: () => {
-                dialog
-                    .open(SelectLanguageDialogComponent, {
-                    data: { languages: languages },
-                })
-                    .afterClosed()
-                    .subscribe((language) => {
-                    if (language && languageChangeCallback) {
-                        languageChangeCallback(language);
-                    }
-                });
-            },
-        },
-    }),
     logout: (callback) => ({
         icon: { name: 'logout' },
         label: 'MENU.LOG_OUT',