@tilde-nlp/ngx-menu 8.1.0 → 8.1.1

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

@@ -7,7 +7,7 @@ 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 { SingleTypes } from '@tilde-nlp/strapi-models';
 import * as i3 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { FlexLayoutModule } from '@ngbracket/ngx-layout';
@@ -18,7 +18,7 @@ import * as i7 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i4 from '@angular/material/list';
 import { MatListModule } from '@angular/material/list';
-import * as i6 from '@angular/material/menu';
+import * as i5$1 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
 import * as i2$1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
@@ -27,7 +27,7 @@ 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 i5$1 from '@angular/material/progress-spinner';
+import * as i5$2 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 
 /** Necessary for menu components to determine where loaded data from strapi should be placed - either in front of pre defined items or in end. */
@@ -48,17 +48,19 @@ class StarpiMenuService {
         this.iconService = iconService;
         this.svgIconNamePrefix = "strapi-menu-icon-";
         this.imgBaseUrl = '';
+        this.footerItems = [];
         this.imgBaseUrl = strapiConfig?.apiUrl;
     }
     getMenuItems() {
-        const responseObs = this.strapiSubscription.subscribeCollectionType(CollectionTypes.MENU_ITEMS)
-            .pipe(map((items) => {
-            // Remove disabled items so they are not processed later.
+        const responseObs = this.strapiSubscription.subscribeSingleType(SingleTypes.MENU)
+            .pipe(map((menu) => {
+            this.footerItems = menu?.footerItems ?? [];
+            let items = menu?.items;
             const convertedItems = [];
             if (!items || items.length === 0) {
                 return convertedItems;
             }
-            items = items.filter(item => !item?.disabled);
+            items = this.filterMenuItems(items);
             items.forEach((menu) => {
                 menu.link = this.addBaseUrlIfNecessary(menu.link);
                 const originalMenuIcon = menu.icon;
@@ -77,7 +79,22 @@ class StarpiMenuService {
         return responseObs;
     }
     unsubscribe() {
-        this.strapiSubscription.unsubscribe(CollectionTypes.MENU_ITEMS);
+        this.strapiSubscription.unsubscribe(SingleTypes.MENU);
+    }
+    filterMenuItems(items) {
+        return items.filter((item) => {
+            const isDisabled = item?.disabled;
+            if (isDisabled) {
+                return false;
+            }
+            const hasChildren = item.children?.length && item.children?.length > 0;
+            const isPermissionDefined = item.permission !== undefined && item.permission !== null;
+            if (hasChildren) {
+                item.children = this.filterMenuItems(item.children);
+            }
+            const hasPermission = isPermissionDefined && this.menuConfig.permissions?.includes(item.permission);
+            return !isPermissionDefined || hasPermission;
+        });
     }
     addBaseUrlIfNecessary(link) {
         if (!this.menuConfig?.baseUrl) {
@@ -101,10 +118,11 @@ class StarpiMenuService {
             link: item.link,
             title: item.title,
             externalLink: item.externalLink,
-            // Material icons should not come from strapi
             materialIcon: false,
             plausibleEvent: item.plausibleEvent,
-            customId: item.customId
+            customId: item.customId,
+            children: item.children?.map((child) => this.convertToCustomMenuItem(child)),
+            showChildren: item.showChildren
         };
     }
     static { this.ɵfac = function StarpiMenuService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || StarpiMenuService)(i0.ɵɵinject(i1.StrapiSubscriptionService), i0.ɵɵinject(MENU_SHARED_CONFIG, 8), i0.ɵɵinject(STRAPI_API_CONFIG_TOKEN, 8), i0.ɵɵinject(i2.IconService)); }; }
@@ -137,6 +155,9 @@ class MenuItemsService {
     get strapiDataLocation() { return this.menuSharedConfig?.strapiDataLocation ?? StrapiDataLocation.END; }
     get mergedGroups() { return this._mergedGroups; }
     get menuItemGroups() { return this.menuSharedConfig.itemGroups; }
+    get footerItems() {
+        return this.strapiService.footerItems;
+    }
     constructor(router, config, strapiService) {
         this.router = router;
         this.config = config;
@@ -279,7 +300,7 @@ class NavBaseComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(NavBaseComponent, { className: "NavBaseComponent", filePath: "lib/components/nav-base/nav-base.component.ts", lineNumber: 14 }); })();
 
-const _c0$2 = ["*"];
+const _c0$3 = ["*"];
 function SideNavMenuComponent_a_14_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "a", 2);
@@ -301,13 +322,46 @@ function SideNavMenuComponent_a_14_Template(rf, ctx) { if (rf & 1) {
 } }
 function SideNavMenuComponent_Conditional_24_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "lib-menu-lang-switcher", 18);
+    i0.ɵɵelementStart(0, "lib-menu-lang-switcher", 19);
     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);
 } }
+function SideNavMenuComponent_Conditional_28_Conditional_1_For_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0, " \u00A0\u00A0|\u00A0\u00A0 ");
+} }
+function SideNavMenuComponent_Conditional_28_Conditional_1_For_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "a", 20);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(2, SideNavMenuComponent_Conditional_28_Conditional_1_For_1_Conditional_2_Template, 1, 0);
+} if (rf & 2) {
+    const item_r4 = ctx.$implicit;
+    const ɵ$index_61_r5 = ctx.$index;
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("href", item_r4.link, i0.ɵɵsanitizeUrl);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(item_r4.title);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ɵ$index_61_r5 !== ctx_r1.footerItems.length - 1 ? 2 : -1);
+} }
+function SideNavMenuComponent_Conditional_28_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, SideNavMenuComponent_Conditional_28_Conditional_1_For_1_Template, 3, 3, null, null, i0.ɵɵrepeaterTrackByIndex);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵrepeater(ctx_r1.footerItems);
+} }
+function SideNavMenuComponent_Conditional_28_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 18);
+    i0.ɵɵconditionalCreate(1, SideNavMenuComponent_Conditional_28_Conditional_1_Template, 2, 0);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(!ctx_r1.collapsed ? 1 : -1);
+} }
 class SideNavMenuComponent extends NavBaseComponent {
     #username;
     get username() { return this.#username; }
@@ -323,6 +377,9 @@ class SideNavMenuComponent extends NavBaseComponent {
     get sideNavWidth() {
         return this.collapsed ? this.menuSettings.collapsedWidth : this.menuSettings.expandedWidth;
     }
+    get footerItems() {
+        return this.menuItemsService.footerItems;
+    }
     constructor(strapiLinkService, domService, menuItems) {
         super(menuItems);
         this.strapiLinkService = strapiLinkService;
@@ -335,10 +392,13 @@ class SideNavMenuComponent extends NavBaseComponent {
             menuLogoCollapsed: '',
             disableStrapi: false,
             disableLogoNavigation: false,
+            expandableMenuChildren: false,
+            useLargeLoginButton: false,
             userOptions: []
         };
         this.useDefaultLanguageSwitcher = true;
         this.changeLanguageEvent = new EventEmitter();
+        this.loginEvent = new EventEmitter();
         this.collapsed = false;
         this.COLLAPSED_LOCAL_STORAGE_KEY = "TLD_MENU_SIDE_NAV_COLLAPSED";
         //#region Plausible event variables for collapse button
@@ -363,6 +423,9 @@ class SideNavMenuComponent extends NavBaseComponent {
         super.ngOnInit();
         this.getColapsedFromLocalStorage();
     }
+    login() {
+        this.loginEvent.emit();
+    }
     logoClick(event) {
         this.strapiLinkService.strapiLinkClick(event);
     }
@@ -391,7 +454,7 @@ class SideNavMenuComponent extends NavBaseComponent {
         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", useDefaultLanguageSwitcher: "useDefaultLanguageSwitcher" }, outputs: { changeLanguageEvent: "changeLanguageEvent" }, standalone: false, 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) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SideNavMenuComponent, selectors: [["lib-side-nav-menu"]], inputs: { username: "username", menuSettings: "menuSettings", productName: "productName", supportedLanguages: "supportedLanguages", useDefaultLanguageSwitcher: "useDefaultLanguageSwitcher" }, outputs: { changeLanguageEvent: "changeLanguageEvent", loginEvent: "loginEvent" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c0$3, decls: 29, vars: 44, 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", "expandableMenuChildren"], [3, "isCollapsed", "languages"], ["fxFlex", "", "fxLayout", "column"], [3, "linkCallbackEvent", "loginEvent", "userOptions", "username", "collapsed", "useLargeLoginButton"], [1, "menu-footer"], [3, "changeLanguageEvent", "isCollapsed", "languages"], ["target", "_blank", 3, "href"]], 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");
@@ -427,48 +490,53 @@ class SideNavMenuComponent extends NavBaseComponent {
             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()()();
+            i0.ɵɵlistener("linkCallbackEvent", function SideNavMenuComponent_Template_lib_menu_profile_linkCallbackEvent_27_listener($event) { return ctx.linkCallback($event); })("loginEvent", function SideNavMenuComponent_Template_lib_menu_profile_loginEvent_27_listener() { return ctx.login(); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(28, SideNavMenuComponent_Conditional_28_Template, 2, 1, "div", 18);
+            i0.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵadvance();
+            i0.ɵɵclassProp("compact-menu", ctx.menuSettings == null ? null : ctx.menuSettings.useCompactMenuVersion);
             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.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(3, 36, "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.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(8, 38, "ARIA_LABELS.MENU_TOGGLER"));
             i0.ɵɵadvance(4);
             i0.ɵɵstyleProp("width", ctx.sideNavWidth);
-            i0.ɵɵclassProp("collapsed", ctx.collapsed);
+            i0.ɵɵclassProp("collapsed", ctx.collapsed)("compact-menu", ctx.menuSettings == null ? null : ctx.menuSettings.useCompactMenuVersion);
             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.ɵɵproperty("libPlausibleEvent", ctx.collapsed ? ctx.EXPAND_PLAUSIBLE_EVENT : ctx.COLLAPSE_PLAUSIBLE_EVENT)("matTooltip", i0.ɵɵpipeBind1(16, 40, ctx.collapsed ? "MENU.EXPAND" : "MENU.COLLAPSE"));
+            i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(17, 42, "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.ɵɵproperty("direction", ctx.direction)("isOpen", !ctx.collapsed)("active", ctx.active)("expandableMenuChildren", ctx.menuSettings == null ? null : ctx.menuSettings.expandableMenuChildren);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.useDefaultLanguageSwitcher && 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%]     .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}  .cdk-overlay-container .child-menu,   .cdk-overlay-container .profile-menu,   .cdk-overlay-container .lang-menu{min-width:250px;margin:10px 0}  .mat-mdc-menu-item .mat-icon{margin-right:5px!important}  .collapsed .profile-wrapper{justify-content:center!important}"] }); }
+            i0.ɵɵproperty("userOptions", ctx.menuSettings.userOptions)("username", ctx.username)("collapsed", ctx.collapsed)("useLargeLoginButton", ctx.menuSettings == null ? null : ctx.menuSettings.useLargeLoginButton);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.footerItems.length ? 28 : -1);
+        } }, 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%]     .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}  .cdk-overlay-container .child-menu,   .cdk-overlay-container .profile-menu,   .cdk-overlay-container .lang-menu{min-width:250px;margin:10px 0}  .mat-mdc-menu-item .mat-icon{margin-right:5px!important}  .collapsed .profile-wrapper{justify-content:center!important}.menu-footer[_ngcontent-%COMP%]{display:flex;justify-content:center;margin-bottom:20px;color:var(--base-40);font-size:13px}", ".compact-menu .profile{margin-top:80px!important}  .compact-menu .profile-icon{margin-left:10px!important;min-width:28px!important;height:28px!important;font-size:12px!important}  .compact-menu .profile-arrow{margin-right:5px!important}  .compact-menu .profile-name{margin-left:10px!important;font-size:14px!important;font-weight:600!important}  .compact-menu .profile-wrapper{padding:6px 0!important;border-radius:16px!important;border:2px solid var(--base-70)}  .compact-menu .menu-wrapper{position:relative;height:100%}  .compact-menu .lang-switcher{position:absolute;bottom:0}  .compact-menu .menu-item,   .compact-menu .lang-switcher{padding:8px 12px!important;border-radius:16px!important}  .compact-menu .lang-switcher .menu-arrow{margin-right:-8px}  .compact-menu .child-list{margin-left:32px}  .compact-menu.collapsed .child-list{margin-left:0}  .compact-menu.collapsed .lang-switcher{padding:0!important;border-radius:50%!important}"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SideNavMenuComponent, [{
         type: Component,
-        args: [{ selector: 'lib-side-nav-menu', standalone: false, 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 (useDefaultLanguageSwitcher && 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 .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}::ng-deep .cdk-overlay-container .child-menu,::ng-deep .cdk-overlay-container .profile-menu,::ng-deep .cdk-overlay-container .lang-menu{min-width:250px;margin:10px 0}::ng-deep .mat-mdc-menu-item .mat-icon{margin-right:5px!important}::ng-deep .collapsed .profile-wrapper{justify-content:center!important}\n"] }]
+        args: [{ selector: 'lib-side-nav-menu', standalone: false, template: "<div fxHide.gt-xs>\r\n\t<div [fxHide]=\"!collapsed\" class=\"mobile-header\" [class.compact-menu]=\"menuSettings?.useCompactMenuVersion\">\r\n\t\t<a\r\n\t\t\t[libPlausibleEvent]=\"LOGOCLICK_PLAUSIBLE_EVENT\"\r\n\t\t\tfxFlex=\"3.125em\"\r\n\t\t\t[href]=\"baseUrl\"\r\n\t\t\t[class.no-click]=\"menuSettings?.disableLogoNavigation\"\r\n\t\t\t[attr.aria-label]=\"'MENU.ARIA_LABELS.LOGO' | translate\"\r\n\t\t\t(click)=\"logoClick($event)\"\r\n\t\t\tfxLayoutAlign=\"start center\"\r\n\t\t>\r\n\t\t\t<img height=\"40\" width=\"40\" class=\"menu-logo\" [src]=\"menuLogoImage\" alt=\"logo\" />\r\n\t\t\t<span class=\"menu-product-name\">\r\n\t\t\t\t{{ productName }}\r\n\t\t\t</span>\r\n\t\t</a>\r\n\r\n\t\t<button\r\n\t\t\tmat-icon-button\r\n\t\t\tclass=\"toggler\"\r\n\t\t\t[attr.aria-label]=\"'ARIA_LABELS.MENU_TOGGLER' | translate\"\r\n\t\t\t[libPlausibleEvent]=\"collapsed ? EXPAND_PLAUSIBLE_EVENT : COLLAPSE_PLAUSIBLE_EVENT\"\r\n\t\t\t(click)=\"toggleCollapse()\"\r\n\t\t>\r\n\t\t\t<mat-icon>menu</mat-icon>\r\n\t\t</button>\r\n\t</div>\r\n</div>\r\n\r\n<div \r\n\tclass=\"menu-container\"\r\n\tfxLayout=\"column\" \r\n\t[ngClass.lt-sm]=\"'mobile'\" \r\n\t[style.width]=\"sideNavWidth\" \r\n\t[class.collapsed]=\"collapsed\"  \r\n\t[class.compact-menu]=\"menuSettings?.useCompactMenuVersion\"\r\n>\r\n\t<div class=\"content\" fxLayout=\"column\" fxFlexFill>\r\n\t\t<div class=\"menu-container-header\" fxLayout=\"row\" [fxLayoutAlign]=\"collapsed ? 'center center' : 'space-between center'\">\r\n\t\t\t<a\r\n\t\t\t\t*ngIf=\"!collapsed\"\r\n\t\t\t\t[libPlausibleEvent]=\"LOGOCLICK_PLAUSIBLE_EVENT\"\r\n\t\t\t\tfxFlex=\"3.125em\"\r\n\t\t\t\t[class.no-click]=\"menuSettings?.disableLogoNavigation\"\r\n\t\t\t\t[href]=\"baseUrl\"\r\n\t\t\t\t[attr.aria-label]=\"'MENU.ARIA_LABELS.LOGO' | translate\"\r\n\t\t\t\t(click)=\"logoClick($event)\"\r\n\t\t\t\tfxLayoutAlign=\"start center\"\r\n\t\t\t>\r\n\t\t\t\t<img height=\"40\" width=\"40\" class=\"menu-logo\" [src]=\"menuLogoImage\" alt=\"logo\" />\r\n\t\t\t\t<span class=\"menu-product-name\">\r\n\t\t\t\t\t{{ productName }}\r\n\t\t\t\t</span>\r\n\t\t\t</a>\r\n\r\n\t\t\t<button\r\n\t\t\t\tmat-icon-button\r\n\t\t\t\tclass=\"toggler\"\r\n\t\t\t\t[attr.aria-label]=\"'ARIA_LABELS.MENU_TOGGLER' | translate\"\r\n\t\t\t\t[libPlausibleEvent]=\"collapsed ? EXPAND_PLAUSIBLE_EVENT : COLLAPSE_PLAUSIBLE_EVENT\"\r\n\t\t\t\t[matTooltip]=\"(collapsed ? 'MENU.EXPAND' : 'MENU.COLLAPSE') | translate\"\r\n\t\t\t\t(click)=\"toggleCollapse()\"\r\n\t\t\t>\r\n\t\t\t\t<mat-icon fxHide.gt-xs [ngClass.lt-sm]=\"'mob-close-icon'\">close</mat-icon>\r\n\t\t\t\t<mat-icon fxHide.lt-sm>{{ collapsed ? \"keyboard_double_arrow_right\" : \"keyboard_double_arrow_left\" }}</mat-icon>\r\n\t\t\t</button>\r\n\t\t</div>\r\n\r\n\t\t<div class=\"menu-wrapper\" fxLayout=\"column\">\r\n\t\t\t<menu-columns\r\n\t\t\t\t(toggleCollapseEvent)=\"toggleCollapse()\"\r\n\t\t\t\t[direction]=\"direction\"\r\n\t\t\t\trole=\"navigation\"\r\n\t\t\t\t[isOpen]=\"!collapsed\"\r\n\t\t\t\t[active]=\"active\"\r\n\t\t\t\t[expandableMenuChildren]=\"menuSettings?.expandableMenuChildren\"\r\n\t\t\t></menu-columns>\r\n\r\n\t\t\t@if (useDefaultLanguageSwitcher && supportedLanguages.length > 1) {\r\n\t\t\t<lib-menu-lang-switcher [isCollapsed]=\"collapsed\" [languages]=\"supportedLanguages\" (changeLanguageEvent)=\"changeLanguage($event)\"></lib-menu-lang-switcher>\r\n\t\t\t}\r\n\t\t</div>\r\n\t\t<div fxFlex fxLayout=\"column\">\r\n\t\t\t<ng-content></ng-content>\r\n\t\t</div>\r\n\r\n\t\t<lib-menu-profile \r\n\t\t\t[userOptions]=\"menuSettings.userOptions\" \r\n\t\t\t[username]=\"username\" \r\n\t\t\t[collapsed]=\"collapsed\" \r\n\t\t\t[useLargeLoginButton]=\"menuSettings?.useLargeLoginButton\"\r\n\t\t\t(linkCallbackEvent)=\"linkCallback($event)\"\r\n\t\t\t(loginEvent)=\"login()\"\t\r\n\t\t>\r\n\t\t</lib-menu-profile>\r\n\r\n    @if (footerItems.length) {\r\n      <div class=\"menu-footer\">\r\n        @if (!collapsed) {\r\n          @for (item of footerItems; let i = $index; track i) {\r\n            <a [href]=\"item.link\" target=\"_blank\">{{ item.title }}</a>\r\n            \r\n            @if (i !== footerItems.length - 1) { \r\n              &nbsp;&nbsp;|&nbsp;&nbsp; \r\n            } \r\n          }\r\n        }\r\n      </div>\r\n    }\r\n\t</div>\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 .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}::ng-deep .cdk-overlay-container .child-menu,::ng-deep .cdk-overlay-container .profile-menu,::ng-deep .cdk-overlay-container .lang-menu{min-width:250px;margin:10px 0}::ng-deep .mat-mdc-menu-item .mat-icon{margin-right:5px!important}::ng-deep .collapsed .profile-wrapper{justify-content:center!important}.menu-footer{display:flex;justify-content:center;margin-bottom:20px;color:var(--base-40);font-size:13px}\n", "::ng-deep .compact-menu .profile{margin-top:80px!important}::ng-deep .compact-menu .profile-icon{margin-left:10px!important;min-width:28px!important;height:28px!important;font-size:12px!important}::ng-deep .compact-menu .profile-arrow{margin-right:5px!important}::ng-deep .compact-menu .profile-name{margin-left:10px!important;font-size:14px!important;font-weight:600!important}::ng-deep .compact-menu .profile-wrapper{padding:6px 0!important;border-radius:16px!important;border:2px solid var(--base-70)}::ng-deep .compact-menu .menu-wrapper{position:relative;height:100%}::ng-deep .compact-menu .lang-switcher{position:absolute;bottom:0}::ng-deep .compact-menu .menu-item,::ng-deep .compact-menu .lang-switcher{padding:8px 12px!important;border-radius:16px!important}::ng-deep .compact-menu .lang-switcher .menu-arrow{margin-right:-8px}::ng-deep .compact-menu .child-list{margin-left:32px}::ng-deep .compact-menu.collapsed .child-list{margin-left:0}::ng-deep .compact-menu.collapsed .lang-switcher{padding:0!important;border-radius:50%!important}\n"] }]
     }], () => [{ type: i1.StrapiLinkService }, { type: i2.DOMService }, { type: MenuItemsService }], { username: [{
             type: Input
         }], menuSettings: [{
@@ -481,6 +549,8 @@ class SideNavMenuComponent extends NavBaseComponent {
             type: Input
         }], changeLanguageEvent: [{
             type: Output
+        }], loginEvent: [{
+            type: Output
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SideNavMenuComponent, { className: "SideNavMenuComponent", filePath: "lib/components/side-nav-menu/side-nav-menu.component.ts", lineNumber: 16 }); })();
 
@@ -673,7 +743,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, 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}"] }); }
+        } }, dependencies: [i1$2.DefaultLayoutAlignDirective, i2$2.DefaultClassDirective, i3.NgForOf, i3.NgIf, i2$1.MatIcon, i7.MatIconButton, i5$1.MatMenu, i5$1.MatMenuItem, i5$1.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,
@@ -687,10 +757,250 @@ class MenuItemBtnComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MenuItemBtnComponent, { className: "MenuItemBtnComponent", filePath: "lib/components/menu-item-btn/menu-item-btn.component.ts", lineNumber: 10 }); })();
 
+const _c0$2 = a0 => ({ menuItem: a0 });
+function MenuItemWithChildrenComponent_Conditional_0_ng_container_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵelement(1, "tld-menu-icon", 8);
+    i0.ɵɵelementContainerEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("menuItem", ctx_r1.menuItem);
+} }
+function MenuItemWithChildrenComponent_Conditional_0_ng_container_3_ng_container_5_span_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 12);
+    i0.ɵɵtext(1, "keyboard_arrow_down");
+    i0.ɵɵelementEnd();
+} }
+function MenuItemWithChildrenComponent_Conditional_0_ng_container_3_ng_container_5_ng_template_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 12);
+    i0.ɵɵtext(1, " keyboard_arrow_up ");
+    i0.ɵɵelementEnd();
+} }
+function MenuItemWithChildrenComponent_Conditional_0_ng_container_3_ng_container_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵtemplate(1, MenuItemWithChildrenComponent_Conditional_0_ng_container_3_ng_container_5_span_1_Template, 2, 0, "span", 11)(2, MenuItemWithChildrenComponent_Conditional_0_ng_container_3_ng_container_5_ng_template_2_Template, 2, 0, "ng-template", null, 2, i0.ɵɵtemplateRefExtractor);
+    i0.ɵɵelementContainerEnd();
+} if (rf & 2) {
+    const iconDown_r3 = i0.ɵɵreference(3);
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.menuItem.expanded)("ngIfElse", iconDown_r3);
+} }
+function MenuItemWithChildrenComponent_Conditional_0_ng_container_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵelementStart(1, "span", 9)(2, "span", 10);
+    i0.ɵɵtext(3);
+    i0.ɵɵpipe(4, "translate");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵtemplate(5, MenuItemWithChildrenComponent_Conditional_0_ng_container_3_ng_container_5_Template, 4, 2, "ng-container", 6);
+    i0.ɵɵelementContainerEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(4, 2, ctx_r1.menuItem.title));
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngIf", ctx_r1.menuItem.children);
+} }
+function MenuItemWithChildrenComponent_Conditional_0_For_6_ng_container_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0);
+} }
+function MenuItemWithChildrenComponent_Conditional_0_For_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, MenuItemWithChildrenComponent_Conditional_0_For_6_ng_container_0_Template, 1, 0, "ng-container", 13);
+} if (rf & 2) {
+    const child_r4 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    const menuItemBtn_r5 = i0.ɵɵreference(3);
+    const menuItemLink_r6 = i0.ɵɵreference(5);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.menuItem.clickAction ? menuItemBtn_r5 : menuItemLink_r6)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c0$2, child_r4));
+} }
+function MenuItemWithChildrenComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 5);
+    i0.ɵɵpipe(1, "translate");
+    i0.ɵɵlistener("click", function MenuItemWithChildrenComponent_Conditional_0_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleItemExpand(ctx_r1.menuItem)); });
+    i0.ɵɵtemplate(2, MenuItemWithChildrenComponent_Conditional_0_ng_container_2_Template, 2, 1, "ng-container", 6)(3, MenuItemWithChildrenComponent_Conditional_0_ng_container_3_Template, 6, 4, "ng-container", 6);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 7);
+    i0.ɵɵrepeaterCreate(5, MenuItemWithChildrenComponent_Conditional_0_For_6_Template, 1, 4, "ng-container", null, i0.ɵɵrepeaterTrackByIndex);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("menu-labels-visible", ctx_r1.labelsVisible)("active-menu-item", (ctx_r1.activeItem == null ? null : ctx_r1.activeItem.link) && ctx_r1.menuItem === ctx_r1.activeItem);
+    i0.ɵɵproperty("matTooltip", !ctx_r1.labelsVisible ? i0.ɵɵpipeBind1(1, 13, ctx_r1.menuItem.title) : "")("fxLayout", ctx_r1.menuItemLayout)("fxLayoutAlign", ctx_r1.menuLayoutDirection)("ngClass.lt-md", "mob-menu-item");
+    i0.ɵɵattribute("id", ctx_r1.menuItem.customId);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngIf", ctx_r1.showIcons && ctx_r1.menuItem.icon);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.labelsVisible);
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("open", ctx_r1.menuItem.expanded && ctx_r1.labelsVisible);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r1.menuItem.children);
+} }
+function MenuItemWithChildrenComponent_Conditional_1_ng_container_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵelement(1, "tld-menu-icon", 8);
+    i0.ɵɵelementContainerEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("menuItem", ctx_r1.menuItem);
+} }
+function MenuItemWithChildrenComponent_Conditional_1_ng_container_4_ng_container_5_span_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 12);
+    i0.ɵɵtext(1, "keyboard_arrow_down");
+    i0.ɵɵelementEnd();
+} }
+function MenuItemWithChildrenComponent_Conditional_1_ng_container_4_ng_container_5_ng_template_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 12);
+    i0.ɵɵtext(1, " keyboard_arrow_up ");
+    i0.ɵɵelementEnd();
+} }
+function MenuItemWithChildrenComponent_Conditional_1_ng_container_4_ng_container_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵtemplate(1, MenuItemWithChildrenComponent_Conditional_1_ng_container_4_ng_container_5_span_1_Template, 2, 0, "span", 11)(2, MenuItemWithChildrenComponent_Conditional_1_ng_container_4_ng_container_5_ng_template_2_Template, 2, 0, "ng-template", null, 2, i0.ɵɵtemplateRefExtractor);
+    i0.ɵɵelementContainerEnd();
+} if (rf & 2) {
+    const iconDown_r8 = i0.ɵɵreference(3);
+    i0.ɵɵnextContext(2);
+    const state_r9 = i0.ɵɵreference(1);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", state_r9.menuOpen)("ngIfElse", iconDown_r8);
+} }
+function MenuItemWithChildrenComponent_Conditional_1_ng_container_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵelementStart(1, "span", 9)(2, "span", 10);
+    i0.ɵɵtext(3);
+    i0.ɵɵpipe(4, "translate");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵtemplate(5, MenuItemWithChildrenComponent_Conditional_1_ng_container_4_ng_container_5_Template, 4, 2, "ng-container", 6);
+    i0.ɵɵelementContainerEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(4, 2, ctx_r1.menuItem.title));
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngIf", ctx_r1.menuItem.showChildren && ctx_r1.menuItem.children);
+} }
+function MenuItemWithChildrenComponent_Conditional_1_For_8_ng_container_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0);
+} }
+function MenuItemWithChildrenComponent_Conditional_1_For_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 16);
+    i0.ɵɵtemplate(1, MenuItemWithChildrenComponent_Conditional_1_For_8_ng_container_1_Template, 1, 0, "ng-container", 13);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const child_r10 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    const menuItemBtn_r5 = i0.ɵɵreference(3);
+    const menuItemLink_r6 = i0.ɵɵreference(5);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.menuItem.clickAction ? menuItemBtn_r5 : menuItemLink_r6)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c0$2, child_r10));
+} }
+function MenuItemWithChildrenComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 14, 3);
+    i0.ɵɵpipe(2, "translate");
+    i0.ɵɵlistener("click", function MenuItemWithChildrenComponent_Conditional_1_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleMenuExpand($event, ctx_r1.menuItem)); });
+    i0.ɵɵtemplate(3, MenuItemWithChildrenComponent_Conditional_1_ng_container_3_Template, 2, 1, "ng-container", 6)(4, MenuItemWithChildrenComponent_Conditional_1_ng_container_4_Template, 6, 4, "ng-container", 6);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "mat-menu", 15, 4);
+    i0.ɵɵrepeaterCreate(7, MenuItemWithChildrenComponent_Conditional_1_For_8_Template, 2, 4, "div", 16, i0.ɵɵrepeaterTrackByIndex);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const state_r9 = i0.ɵɵreference(1);
+    const menu_r11 = i0.ɵɵreference(6);
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("menu-labels-visible", ctx_r1.labelsVisible)("active-menu-item", (ctx_r1.activeItem == null ? null : ctx_r1.activeItem.link) && ctx_r1.menuItem === ctx_r1.activeItem || state_r9.menuOpen);
+    i0.ɵɵproperty("matTooltip", !ctx_r1.labelsVisible ? i0.ɵɵpipeBind1(2, 12, ctx_r1.menuItem.title) : "")("fxLayout", ctx_r1.menuItemLayout)("fxLayoutAlign", ctx_r1.menuLayoutDirection)("matMenuTriggerFor", menu_r11)("ngClass.lt-md", "mob-menu-item");
+    i0.ɵɵattribute("id", ctx_r1.menuItem.customId);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("ngIf", ctx_r1.showIcons && ctx_r1.menuItem.icon);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.labelsVisible);
+    i0.ɵɵadvance(3);
+    i0.ɵɵrepeater(ctx_r1.menuItem.children);
+} }
+function MenuItemWithChildrenComponent_ng_template_2_lib_menu_item_btn_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "lib-menu-item-btn", 18);
+} if (rf & 2) {
+    const menuItem_r12 = i0.ɵɵnextContext().menuItem;
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngClass.lt-md", "mob-menu-item")("menuItem", menuItem_r12)("direction", ctx_r1.direction)("activeItem", ctx_r1.activeItem);
+} }
+function MenuItemWithChildrenComponent_ng_template_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, MenuItemWithChildrenComponent_ng_template_2_lib_menu_item_btn_0_Template, 1, 4, "lib-menu-item-btn", 17);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngIf", ctx_r1.labelsVisible);
+} }
+function MenuItemWithChildrenComponent_ng_template_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "tld-menu-item-link", 19);
+} if (rf & 2) {
+    const menuItem_r13 = ctx.menuItem;
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngClass.lt-md", "mob-menu-item")("menuItem", menuItem_r13)("direction", ctx_r1.direction)("labelsVisible", true)("activeItem", ctx_r1.activeItem)("showIcons", ctx_r1.showIcons);
+} }
+class MenuItemWithChildrenComponent {
+    constructor() {
+        this.openMenu = new EventEmitter();
+        this.toggleExpand = new EventEmitter();
+    }
+    toggleMenuExpand(event, menuItem) {
+        // so menu doesnt get closed.
+        event.stopPropagation();
+        if (this.labelsVisible || !menuItem.expanded) {
+            menuItem.expanded = !menuItem.expanded;
+        }
+        this.toggleExpand.next(menuItem);
+    }
+    toggleItemExpand(menuItem) {
+        if (this.labelsVisible || !menuItem.expanded) {
+            menuItem.expanded = !menuItem.expanded;
+        }
+        if (!this.labelsVisible) {
+            this.openMenu.emit();
+        }
+        this.toggleExpand.next(menuItem);
+    }
+    static { this.ɵfac = function MenuItemWithChildrenComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MenuItemWithChildrenComponent)(); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MenuItemWithChildrenComponent, selectors: [["lib-menu-item-with-children"]], inputs: { menuItem: "menuItem", labelsVisible: "labelsVisible", showIcons: "showIcons", menuLayoutDirection: "menuLayoutDirection", menuItemLayout: "menuItemLayout", activeItem: "activeItem", direction: "direction", expandableMenuChildren: "expandableMenuChildren" }, outputs: { openMenu: "openMenu", toggleExpand: "toggleExpand" }, standalone: false, decls: 6, vars: 1, consts: [["menuItemBtn", ""], ["menuItemLink", ""], ["iconDown", ""], ["state", "matMenuTrigger"], ["menu", "matMenu"], ["matTooltipClass", "menu-tooltip", "matTooltipPosition", "after", 1, "text-m", "menu-item", "menu-parent-item", 3, "click", "matTooltip", "fxLayout", "fxLayoutAlign", "ngClass.lt-md"], [4, "ngIf"], [1, "child-list"], [3, "menuItem"], [1, "menu-item-title"], [1, "title-content"], ["class", "material-icons spin arrow-icon", 4, "ngIf", "ngIfElse"], [1, "material-icons", "spin", "arrow-icon"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], ["matTooltipClass", "menu-tooltip", "matTooltipPosition", "after", 1, "text-m", "menu-item", "menu-parent-item", 3, "click", "matTooltip", "fxLayout", "fxLayoutAlign", "matMenuTriggerFor", "ngClass.lt-md"], [1, "child-menu"], ["mat-menu-item", ""], [3, "ngClass.lt-md", "menuItem", "direction", "activeItem", 4, "ngIf"], [3, "ngClass.lt-md", "menuItem", "direction", "activeItem"], [3, "ngClass.lt-md", "menuItem", "direction", "labelsVisible", "activeItem", "showIcons"]], template: function MenuItemWithChildrenComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, MenuItemWithChildrenComponent_Conditional_0_Template, 7, 15)(1, MenuItemWithChildrenComponent_Conditional_1_Template, 9, 14);
+            i0.ɵɵtemplate(2, MenuItemWithChildrenComponent_ng_template_2_Template, 1, 1, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor)(4, MenuItemWithChildrenComponent_ng_template_4_Template, 1, 6, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor);
+        } if (rf & 2) {
+            i0.ɵɵconditional(ctx.expandableMenuChildren ? 0 : 1);
+        } }, dependencies: [i1$2.DefaultLayoutDirective, i1$2.DefaultLayoutAlignDirective, i2$2.DefaultClassDirective, i3.NgIf, i3.NgTemplateOutlet, i5.MatTooltip, i5$1.MatMenu, i5$1.MatMenuItem, i5$1.MatMenuTrigger, MenuIconComponent, MenuItemLinkComponent, MenuItemBtnComponent, i8.TranslatePipe], styles: [".spin[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_spinArrow .3s forwards}@keyframes _ngcontent-%COMP%_spinArrow{to{transform:rotate(180deg)}}[_nghost-%COMP%]{width:100%}.child-list[_ngcontent-%COMP%]{max-height:0;opacity:0;overflow:hidden;transition:max-height .3s,opacity .3s}.child-list.open[_ngcontent-%COMP%]{max-height:500px;opacity:1;overflow:hidden;transition:max-height .3s,opacity .3s}"] }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuItemWithChildrenComponent, [{
+        type: Component,
+        args: [{ selector: 'lib-menu-item-with-children', standalone: false, template: "@if (expandableMenuChildren) {\r\n<button\r\n\tmatTooltipClass=\"menu-tooltip\"\r\n\tmatTooltipPosition=\"after\"\r\n\t[matTooltip]=\"!labelsVisible ? (menuItem.title | translate) : ''\"\r\n\t[fxLayout]=\"menuItemLayout\"\r\n\t[fxLayoutAlign]=\"menuLayoutDirection\"\r\n\t[attr.id]=\"menuItem.customId\"\r\n\tclass=\"text-m menu-item menu-parent-item\"\r\n\t[class.menu-labels-visible]=\"labelsVisible\"\r\n\t[class.active-menu-item]=\"activeItem?.link && menuItem === activeItem\"\r\n\t[ngClass.lt-md]=\"'mob-menu-item'\"\r\n\t(click)=\"toggleItemExpand(menuItem)\"\r\n>\r\n\t<ng-container *ngIf=\"showIcons && menuItem.icon\">\r\n\t\t<tld-menu-icon [menuItem]=\"menuItem\"></tld-menu-icon>\r\n\t</ng-container>\r\n\t<ng-container *ngIf=\"labelsVisible\">\r\n\t\t<span class=\"menu-item-title\">\r\n\t\t\t<span class=\"title-content\">{{ menuItem.title | translate }}</span></span\r\n\t\t>\r\n\t\t<ng-container *ngIf=\"menuItem.children\">\r\n\t\t\t<span *ngIf=\"menuItem.expanded; else iconDown\" class=\"material-icons spin arrow-icon\">keyboard_arrow_down</span>\r\n\r\n\t\t\t<ng-template #iconDown>\r\n\t\t\t\t<span class=\"material-icons spin arrow-icon\"> keyboard_arrow_up </span>\r\n\t\t\t</ng-template>\r\n\t\t</ng-container>\r\n\t</ng-container>\r\n</button>\r\n\r\n\t\t<div class=\"child-list\" [class.open]=\"menuItem.expanded && labelsVisible\">\r\n\t\t\t@for (child of menuItem.children; track $index) {\r\n\t\t\t\t<ng-container *ngTemplateOutlet=\"menuItem.clickAction ? menuItemBtn : menuItemLink; context: { menuItem: child }\"> </ng-container>\r\n\t\t\t}\r\n\t\t</div>\r\n} @else {\r\n<button\r\n\tmatTooltipClass=\"menu-tooltip\"\r\n\tmatTooltipPosition=\"after\"\r\n\t[matTooltip]=\"!labelsVisible ? (menuItem.title | translate) : ''\"\r\n\t[fxLayout]=\"menuItemLayout\"\r\n\t[fxLayoutAlign]=\"menuLayoutDirection\"\r\n\t#state=\"matMenuTrigger\"\r\n\t[matMenuTriggerFor]=\"menu\"\r\n\t[attr.id]=\"menuItem.customId\"\r\n\tclass=\"text-m menu-item menu-parent-item\"\r\n\t[class.menu-labels-visible]=\"labelsVisible\"\r\n\t[class.active-menu-item]=\"(activeItem?.link && menuItem === activeItem) || state.menuOpen\"\r\n\t[ngClass.lt-md]=\"'mob-menu-item'\"\r\n\t(click)=\"toggleMenuExpand($event, menuItem)\"\r\n>\r\n\t<ng-container *ngIf=\"showIcons && menuItem.icon\">\r\n\t\t<tld-menu-icon [menuItem]=\"menuItem\"></tld-menu-icon>\r\n\t</ng-container>\r\n\t<ng-container *ngIf=\"labelsVisible\">\r\n\t\t<span class=\"menu-item-title\">\r\n\t\t\t<span class=\"title-content\">{{ menuItem.title | translate }}</span></span\r\n\t\t>\r\n\t\t<ng-container *ngIf=\"menuItem.showChildren && menuItem.children\">\r\n\t\t\t<span *ngIf=\"state.menuOpen; else iconDown\" class=\"material-icons spin arrow-icon\">keyboard_arrow_down</span>\r\n\r\n\t\t\t<ng-template #iconDown>\r\n\t\t\t\t<span class=\"material-icons spin arrow-icon\"> keyboard_arrow_up </span>\r\n\t\t\t</ng-template>\r\n\t\t</ng-container>\r\n\t</ng-container>\r\n</button>\r\n<mat-menu #menu=\"matMenu\" class=\"child-menu\">\r\n\t@for (child of menuItem.children; track $index) {\r\n\t<div mat-menu-item>\r\n\t\t<ng-container *ngTemplateOutlet=\"menuItem.clickAction ? menuItemBtn : menuItemLink; context: { menuItem: child }\"> </ng-container>\r\n\t</div>\r\n\t}\r\n</mat-menu>\r\n}\r\n\r\n<ng-template #menuItemBtn let-menuItem=\"menuItem\">\r\n\t<lib-menu-item-btn *ngIf=\"labelsVisible\" [ngClass.lt-md]=\"'mob-menu-item'\" [menuItem]=\"menuItem\" [direction]=\"direction\" [activeItem]=\"activeItem\"></lib-menu-item-btn>\r\n</ng-template>\r\n\r\n<ng-template #menuItemLink let-menuItem=\"menuItem\">\r\n\t<tld-menu-item-link\r\n\t\t[ngClass.lt-md]=\"'mob-menu-item'\"\r\n\t\t[menuItem]=\"menuItem\"\r\n\t\t[direction]=\"direction\"\r\n\t\t[labelsVisible]=\"true\"\r\n\t\t[activeItem]=\"activeItem\"\r\n\t\t[showIcons]=\"showIcons\"\r\n\t></tld-menu-item-link>\r\n</ng-template>\r\n", styles: [".spin{animation:spinArrow .3s forwards}@keyframes spinArrow{to{transform:rotate(180deg)}}:host{width:100%}.child-list{max-height:0;opacity:0;overflow:hidden;transition:max-height .3s,opacity .3s}.child-list.open{max-height:500px;opacity:1;overflow:hidden;transition:max-height .3s,opacity .3s}\n"] }]
+    }], null, { menuItem: [{
+            type: Input
+        }], labelsVisible: [{
+            type: Input
+        }], showIcons: [{
+            type: Input
+        }], menuLayoutDirection: [{
+            type: Input
+        }], menuItemLayout: [{
+            type: Input
+        }], activeItem: [{
+            type: Input
+        }], direction: [{
+            type: Input
+        }], expandableMenuChildren: [{
+            type: Input
+        }], openMenu: [{
+            type: Output
+        }], toggleExpand: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MenuItemWithChildrenComponent, { className: "MenuItemWithChildrenComponent", filePath: "lib/components/menu-item-list/menu-item-with-children/menu-item-with-children.component.ts", lineNumber: 10 }); })();
+
 const _c0$1 = a0 => ({ menuItem: a0 });
-const _c1 = a0 => ({ menuItem: a0, isChild: true });
 function MenuItemListComponent_Conditional_1_mat_icon_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "mat-icon", 13);
+    i0.ɵɵelementStart(0, "mat-icon", 10);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -699,7 +1009,7 @@ function MenuItemListComponent_Conditional_1_mat_icon_1_Template(rf, ctx) { if (
     i0.ɵɵtextInterpolate1(" ", ctx_r0.menuItemGroup.titleIcon, " ");
 } }
 function MenuItemListComponent_Conditional_1_button_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "button", 14);
+    i0.ɵɵelementStart(0, "button", 11);
     i0.ɵɵpipe(1, "translate");
     i0.ɵɵelementStart(2, "mat-icon");
     i0.ɵɵtext(3);
@@ -711,8 +1021,8 @@ function MenuItemListComponent_Conditional_1_button_2_Template(rf, ctx) { if (rf
     i0.ɵɵtextInterpolate(ctx_r0.menuItemGroup.titleNavigation.icon);
 } }
 function MenuItemListComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 8);
-    i0.ɵɵtemplate(1, MenuItemListComponent_Conditional_1_mat_icon_1_Template, 2, 1, "mat-icon", 11)(2, MenuItemListComponent_Conditional_1_button_2_Template, 4, 5, "button", 12);
+    i0.ɵɵelementStart(0, "div", 5);
+    i0.ɵɵtemplate(1, MenuItemListComponent_Conditional_1_mat_icon_1_Template, 2, 1, "mat-icon", 8)(2, MenuItemListComponent_Conditional_1_button_2_Template, 4, 5, "button", 9);
     i0.ɵɵtext(3);
     i0.ɵɵpipe(4, "translate");
     i0.ɵɵelementEnd();
@@ -729,7 +1039,7 @@ function MenuItemListComponent_Conditional_2_ng_container_0_Template(rf, ctx) {
     i0.ɵɵelementContainer(0);
 } }
 function MenuItemListComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, MenuItemListComponent_Conditional_2_ng_container_0_Template, 1, 0, "ng-container", 15);
+    i0.ɵɵtemplate(0, MenuItemListComponent_Conditional_2_ng_container_0_Template, 1, 0, "ng-container", 12);
 } if (rf & 2) {
     i0.ɵɵnextContext();
     const itemGroupButton_r2 = i0.ɵɵreference(12);
@@ -740,7 +1050,7 @@ function MenuItemListComponent_ng_container_4_ng_container_1_Template(rf, ctx) {
 } }
 function MenuItemListComponent_ng_container_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵtemplate(1, MenuItemListComponent_ng_container_4_ng_container_1_Template, 1, 0, "ng-container", 16);
+    i0.ɵɵtemplate(1, MenuItemListComponent_ng_container_4_ng_container_1_Template, 1, 0, "ng-container", 13);
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
     const menuItem_r3 = ctx.$implicit;
@@ -751,115 +1061,38 @@ function MenuItemListComponent_ng_container_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngTemplateOutlet", !menuItem_r3.showChildren || !menuItem_r3.children || (menuItem_r3 == null ? null : menuItem_r3.children == null ? null : menuItem_r3.children.length) === 0 ? menuItem_r3.clickAction ? menuItemBtn_r6 : menuItemLink_r5 : itemWithChildren_r4)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c0$1, menuItem_r3));
 } }
-function MenuItemListComponent_ng_template_5_ng_container_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementContainerStart(0);
-    i0.ɵɵelement(1, "tld-menu-icon", 21);
-    i0.ɵɵelementContainerEnd();
-} if (rf & 2) {
-    const menuItem_r8 = i0.ɵɵnextContext().menuItem;
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("menuItem", menuItem_r8);
-} }
-function MenuItemListComponent_ng_template_5_ng_container_4_ng_container_5_span_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 25);
-    i0.ɵɵtext(1, "keyboard_arrow_down");
-    i0.ɵɵelementEnd();
-} }
-function MenuItemListComponent_ng_template_5_ng_container_4_ng_container_5_ng_template_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 25);
-    i0.ɵɵtext(1, " keyboard_arrow_up ");
-    i0.ɵɵelementEnd();
-} }
-function MenuItemListComponent_ng_template_5_ng_container_4_ng_container_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementContainerStart(0);
-    i0.ɵɵtemplate(1, MenuItemListComponent_ng_template_5_ng_container_4_ng_container_5_span_1_Template, 2, 0, "span", 24)(2, MenuItemListComponent_ng_template_5_ng_container_4_ng_container_5_ng_template_2_Template, 2, 0, "ng-template", null, 6, i0.ɵɵtemplateRefExtractor);
-    i0.ɵɵelementContainerEnd();
-} if (rf & 2) {
-    const iconDown_r9 = i0.ɵɵreference(3);
-    i0.ɵɵnextContext(2);
-    const state_r10 = i0.ɵɵreference(1);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", state_r10.menuOpen)("ngIfElse", iconDown_r9);
-} }
-function MenuItemListComponent_ng_template_5_ng_container_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementContainerStart(0);
-    i0.ɵɵelementStart(1, "span", 22)(2, "span", 23);
-    i0.ɵɵtext(3);
-    i0.ɵɵpipe(4, "translate");
-    i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(5, MenuItemListComponent_ng_template_5_ng_container_4_ng_container_5_Template, 4, 2, "ng-container", 18);
-    i0.ɵɵelementContainerEnd();
-} if (rf & 2) {
-    const menuItem_r8 = i0.ɵɵnextContext().menuItem;
-    i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(4, 2, menuItem_r8.title));
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngIf", menuItem_r8.showChildren && menuItem_r8.children);
-} }
-function MenuItemListComponent_ng_template_5_For_8_ng_container_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementContainer(0);
-} }
-function MenuItemListComponent_ng_template_5_For_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 20);
-    i0.ɵɵtemplate(1, MenuItemListComponent_ng_template_5_For_8_ng_container_1_Template, 1, 0, "ng-container", 16);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const child_r11 = ctx.$implicit;
-    const menuItem_r8 = i0.ɵɵnextContext().menuItem;
-    i0.ɵɵnextContext();
-    const menuItemLink_r5 = i0.ɵɵreference(8);
-    const menuItemBtn_r6 = i0.ɵɵreference(10);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", menuItem_r8.clickAction ? menuItemBtn_r6 : menuItemLink_r5)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c1, child_r11));
-} }
 function MenuItemListComponent_ng_template_5_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 17, 4);
-    i0.ɵɵpipe(2, "translate");
-    i0.ɵɵlistener("click", function MenuItemListComponent_ng_template_5_Template_button_click_0_listener($event) { const menuItem_r8 = i0.ɵɵrestoreView(_r7).menuItem; const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.toggleItemExpand($event, menuItem_r8)); });
-    i0.ɵɵtemplate(3, MenuItemListComponent_ng_template_5_ng_container_3_Template, 2, 1, "ng-container", 18)(4, MenuItemListComponent_ng_template_5_ng_container_4_Template, 6, 4, "ng-container", 18);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "mat-menu", 19, 5);
-    i0.ɵɵrepeaterCreate(7, MenuItemListComponent_ng_template_5_For_8_Template, 2, 4, "div", 20, i0.ɵɵrepeaterTrackByIndex);
+    i0.ɵɵelementStart(0, "lib-menu-item-with-children", 14);
+    i0.ɵɵlistener("toggleExpand", function MenuItemListComponent_ng_template_5_Template_lib_menu_item_with_children_toggleExpand_0_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.toggleExpandEvent($event)); })("openMenu", function MenuItemListComponent_ng_template_5_Template_lib_menu_item_with_children_openMenu_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.openMenu()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const menuItem_r8 = ctx.menuItem;
-    const state_r10 = i0.ɵɵreference(1);
-    const menu_r12 = i0.ɵɵreference(6);
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵclassProp("menu-labels-visible", ctx_r0.labelsVisible)("active-menu-item", (ctx_r0.activeItem == null ? null : ctx_r0.activeItem.link) && menuItem_r8 === ctx_r0.activeItem || state_r10.menuOpen);
-    i0.ɵɵproperty("matTooltip", !ctx_r0.labelsVisible ? i0.ɵɵpipeBind1(2, 12, menuItem_r8.title) : "")("fxLayout", ctx_r0.menuItemLayout)("fxLayoutAlign", ctx_r0.menuLayoutDirection)("matMenuTriggerFor", menu_r12)("ngClass.lt-md", "mob-menu-item");
-    i0.ɵɵattribute("id", menuItem_r8.customId);
-    i0.ɵɵadvance(3);
-    i0.ɵɵproperty("ngIf", ctx_r0.showIcons && menuItem_r8.icon);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r0.labelsVisible);
-    i0.ɵɵadvance(3);
-    i0.ɵɵrepeater(menuItem_r8.children);
+    i0.ɵɵproperty("menuItem", menuItem_r8)("labelsVisible", ctx_r0.labelsVisible)("menuLayoutDirection", ctx_r0.menuLayoutDirection)("menuItemLayout", ctx_r0.menuItemLayout)("activeItem", ctx_r0.activeItem)("showIcons", ctx_r0.showIcons)("direction", ctx_r0.direction)("expandableMenuChildren", ctx_r0.expandableMenuChildren);
 } }
 function MenuItemListComponent_ng_template_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "tld-menu-item-link", 26);
+    i0.ɵɵelement(0, "tld-menu-item-link", 15);
 } if (rf & 2) {
-    const menuItem_r13 = ctx.menuItem;
-    const isChild_r14 = ctx.isChild;
+    const menuItem_r9 = ctx.menuItem;
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngClass.lt-md", "mob-menu-item")("menuItem", menuItem_r13)("direction", ctx_r0.direction)("labelsVisible", ctx_r0.labelsVisible || isChild_r14)("activeItem", ctx_r0.activeItem)("showIcons", ctx_r0.showIcons);
+    i0.ɵɵproperty("ngClass.lt-md", "mob-menu-item")("menuItem", menuItem_r9)("direction", ctx_r0.direction)("labelsVisible", ctx_r0.labelsVisible)("activeItem", ctx_r0.activeItem)("showIcons", ctx_r0.showIcons);
 } }
 function MenuItemListComponent_ng_template_9_lib_menu_item_btn_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "lib-menu-item-btn", 28);
+    i0.ɵɵelement(0, "lib-menu-item-btn", 17);
 } if (rf & 2) {
-    const menuItem_r15 = i0.ɵɵnextContext().menuItem;
+    const menuItem_r10 = i0.ɵɵnextContext().menuItem;
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngClass.lt-md", "mob-menu-item")("menuItem", menuItem_r15)("direction", ctx_r0.direction)("activeItem", ctx_r0.activeItem);
+    i0.ɵɵproperty("ngClass.lt-md", "mob-menu-item")("menuItem", menuItem_r10)("direction", ctx_r0.direction)("activeItem", ctx_r0.activeItem);
 } }
 function MenuItemListComponent_ng_template_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, MenuItemListComponent_ng_template_9_lib_menu_item_btn_0_Template, 1, 4, "lib-menu-item-btn", 27);
+    i0.ɵɵtemplate(0, MenuItemListComponent_ng_template_9_lib_menu_item_btn_0_Template, 1, 4, "lib-menu-item-btn", 16);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ngIf", ctx_r0.labelsVisible);
 } }
 function MenuItemListComponent_ng_template_11_button_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mat-icon", 32);
+    i0.ɵɵelement(0, "mat-icon", 21);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(3);
     i0.ɵɵproperty("svgIcon", ctx_r0.menuItemGroup.itemGroupIcon ?? "");
@@ -874,7 +1107,7 @@ function MenuItemListComponent_ng_template_11_button_0_Conditional_2_Template(rf
     i0.ɵɵtextInterpolate(ctx_r0.menuItemGroup.itemGroupIcon);
 } }
 function MenuItemListComponent_ng_template_11_button_0_span_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 34);
+    i0.ɵɵelementStart(0, "span", 23);
     i0.ɵɵtext(1);
     i0.ɵɵpipe(2, "translate");
     i0.ɵɵelementEnd();
@@ -884,11 +1117,11 @@ function MenuItemListComponent_ng_template_11_button_0_span_3_Template(rf, ctx)
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(2, 1, ctx_r0.titleKey), " ");
 } }
 function MenuItemListComponent_ng_template_11_button_0_Template(rf, ctx) { if (rf & 1) {
-    const _r16 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 31);
-    i0.ɵɵlistener("click", function MenuItemListComponent_ng_template_11_button_0_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r16); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.menuItemGroup == null ? null : ctx_r0.menuItemGroup.itemGroupClick()); });
-    i0.ɵɵconditionalCreate(1, MenuItemListComponent_ng_template_11_button_0_Conditional_1_Template, 1, 1, "mat-icon", 32)(2, MenuItemListComponent_ng_template_11_button_0_Conditional_2_Template, 2, 1, "mat-icon");
-    i0.ɵɵtemplate(3, MenuItemListComponent_ng_template_11_button_0_span_3_Template, 3, 3, "span", 33);
+    const _r11 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 20);
+    i0.ɵɵlistener("click", function MenuItemListComponent_ng_template_11_button_0_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r11); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.menuItemGroup == null ? null : ctx_r0.menuItemGroup.itemGroupClick()); });
+    i0.ɵɵconditionalCreate(1, MenuItemListComponent_ng_template_11_button_0_Conditional_1_Template, 1, 1, "mat-icon", 21)(2, MenuItemListComponent_ng_template_11_button_0_Conditional_2_Template, 2, 1, "mat-icon");
+    i0.ɵɵtemplate(3, MenuItemListComponent_ng_template_11_button_0_span_3_Template, 3, 3, "span", 22);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
@@ -899,7 +1132,7 @@ function MenuItemListComponent_ng_template_11_button_0_Template(rf, ctx) { if (r
     i0.ɵɵproperty("ngIf", ctx_r0.titleKey);
 } }
 function MenuItemListComponent_ng_template_11_button_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mat-icon", 32);
+    i0.ɵɵelement(0, "mat-icon", 21);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(3);
     i0.ɵɵproperty("svgIcon", ctx_r0.menuItemGroup.itemGroupIcon ?? "");
@@ -914,11 +1147,11 @@ function MenuItemListComponent_ng_template_11_button_1_Conditional_3_Template(rf
     i0.ɵɵtextInterpolate(ctx_r0.menuItemGroup.itemGroupIcon);
 } }
 function MenuItemListComponent_ng_template_11_button_1_Template(rf, ctx) { if (rf & 1) {
-    const _r17 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 35);
+    const _r12 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 24);
     i0.ɵɵpipe(1, "translate");
-    i0.ɵɵlistener("click", function MenuItemListComponent_ng_template_11_button_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r17); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.menuItemGroup == null ? null : ctx_r0.menuItemGroup.itemGroupClick()); });
-    i0.ɵɵconditionalCreate(2, MenuItemListComponent_ng_template_11_button_1_Conditional_2_Template, 1, 1, "mat-icon", 32)(3, MenuItemListComponent_ng_template_11_button_1_Conditional_3_Template, 2, 1, "mat-icon");
+    i0.ɵɵlistener("click", function MenuItemListComponent_ng_template_11_button_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r12); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.menuItemGroup == null ? null : ctx_r0.menuItemGroup.itemGroupClick()); });
+    i0.ɵɵconditionalCreate(2, MenuItemListComponent_ng_template_11_button_1_Conditional_2_Template, 1, 1, "mat-icon", 21)(3, MenuItemListComponent_ng_template_11_button_1_Conditional_3_Template, 2, 1, "mat-icon");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
@@ -927,7 +1160,7 @@ function MenuItemListComponent_ng_template_11_button_1_Template(rf, ctx) { if (r
     i0.ɵɵconditional(ctx_r0.menuItemGroup.isCustomItemGroupIcon ? 2 : 3);
 } }
 function MenuItemListComponent_ng_template_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, MenuItemListComponent_ng_template_11_button_0_Template, 4, 4, "button", 29)(1, MenuItemListComponent_ng_template_11_button_1_Template, 4, 4, "button", 30);
+    i0.ɵɵtemplate(0, MenuItemListComponent_ng_template_11_button_0_Template, 4, 4, "button", 18)(1, MenuItemListComponent_ng_template_11_button_1_Template, 4, 4, "button", 19);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ngIf", ctx_r0.menuItemGroup && ctx_r0.labelsVisible);
@@ -940,6 +1173,7 @@ class MenuItemListComponent {
         this.labelsVisible = true;
         this.showIcons = true;
         this.items = [];
+        this.openMenuTrigger = new EventEmitter();
         this.toggleExpand = new EventEmitter();
     }
     get titleKey() {
@@ -955,22 +1189,20 @@ class MenuItemListComponent {
     get menuItemLayout() {
         return this.direction === MenuLayoutDirection.column ? 'column' : 'row';
     }
-    toggleItemExpand(event, menuItem) {
-        // so menu doesnt get closed.
-        event.stopPropagation();
-        if (this.labelsVisible || !menuItem.expanded) {
-            menuItem.expanded = !menuItem.expanded;
-        }
-        this.toggleExpand.next(menuItem);
+    toggleExpandEvent(item) {
+        this.toggleExpand.emit(item);
+    }
+    openMenu() {
+        this.openMenuTrigger.emit();
     }
     static { this.ɵfac = function MenuItemListComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MenuItemListComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MenuItemListComponent, selectors: [["menu-item-list"]], inputs: { direction: "direction", labelsVisible: "labelsVisible", activeItem: "activeItem", showIcons: "showIcons", items: "items", menuItemGroup: "menuItemGroup" }, outputs: { toggleExpand: "toggleExpand" }, standalone: false, decls: 13, vars: 3, consts: [["itemWithChildren", ""], ["menuItemLink", ""], ["menuItemBtn", ""], ["itemGroupButton", ""], ["state", "matMenuTrigger"], ["menu", "matMenu"], ["iconDown", ""], [1, "menu-list-wrapper"], ["fxLayoutAlign", "start center", 1, "menu-item-list-title"], ["fxLayout", "column", 1, "menu-item-list", 3, "fxLayoutAlign"], [4, "ngFor", "ngForOf"], ["class", "menu-title-btn", 4, "ngIf"], ["mat-icon-button", "", "class", "menu-title-btn", 3, "routerLink", "matTooltip", 4, "ngIf"], [1, "menu-title-btn"], ["mat-icon-button", "", 1, "menu-title-btn", 3, "routerLink", "matTooltip"], [4, "ngTemplateOutlet"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], ["matTooltipClass", "menu-tooltip", "matTooltipPosition", "after", 1, "text-m", "menu-item", "menu-parent-item", 3, "click", "matTooltip", "fxLayout", "fxLayoutAlign", "matMenuTriggerFor", "ngClass.lt-md"], [4, "ngIf"], [1, "child-menu"], ["mat-menu-item", ""], [3, "menuItem"], [1, "menu-item-title"], [1, "title-content"], ["class", "material-icons spin arrow-icon", 4, "ngIf", "ngIfElse"], [1, "material-icons", "spin", "arrow-icon"], [3, "ngClass.lt-md", "menuItem", "direction", "labelsVisible", "activeItem", "showIcons"], [3, "ngClass.lt-md", "menuItem", "direction", "activeItem", 4, "ngIf"], [3, "ngClass.lt-md", "menuItem", "direction", "activeItem"], ["mat-button", "", "class", "menu-title-btn menu-action-button", 3, "active-menu-item-group", "click", 4, "ngIf"], ["mat-icon-button", "", "matTooltipPosition", "after", 3, "matTooltip", "click", 4, "ngIf"], ["mat-button", "", 1, "menu-title-btn", "menu-action-button", 3, "click"], [3, "svgIcon"], ["class", "btn-label", 4, "ngIf"], [1, "btn-label"], ["mat-icon-button", "", "matTooltipPosition", "after", 3, "click", "matTooltip"]], template: function MenuItemListComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 7);
-            i0.ɵɵconditionalCreate(1, MenuItemListComponent_Conditional_1_Template, 5, 5, "div", 8)(2, MenuItemListComponent_Conditional_2_Template, 1, 1, "ng-container");
-            i0.ɵɵelementStart(3, "div", 9);
-            i0.ɵɵtemplate(4, MenuItemListComponent_ng_container_4_Template, 2, 4, "ng-container", 10);
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MenuItemListComponent, selectors: [["menu-item-list"]], inputs: { direction: "direction", labelsVisible: "labelsVisible", activeItem: "activeItem", showIcons: "showIcons", expandableMenuChildren: "expandableMenuChildren", items: "items", menuItemGroup: "menuItemGroup" }, outputs: { openMenuTrigger: "openMenuTrigger", toggleExpand: "toggleExpand" }, standalone: false, decls: 13, vars: 3, consts: [["itemWithChildren", ""], ["menuItemLink", ""], ["menuItemBtn", ""], ["itemGroupButton", ""], [1, "menu-list-wrapper"], ["fxLayoutAlign", "start center", 1, "menu-item-list-title"], ["fxLayout", "column", 1, "menu-item-list", 3, "fxLayoutAlign"], [4, "ngFor", "ngForOf"], ["class", "menu-title-btn", 4, "ngIf"], ["mat-icon-button", "", "class", "menu-title-btn", 3, "routerLink", "matTooltip", 4, "ngIf"], [1, "menu-title-btn"], ["mat-icon-button", "", 1, "menu-title-btn", 3, "routerLink", "matTooltip"], [4, "ngTemplateOutlet"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], [3, "toggleExpand", "openMenu", "menuItem", "labelsVisible", "menuLayoutDirection", "menuItemLayout", "activeItem", "showIcons", "direction", "expandableMenuChildren"], [3, "ngClass.lt-md", "menuItem", "direction", "labelsVisible", "activeItem", "showIcons"], [3, "ngClass.lt-md", "menuItem", "direction", "activeItem", 4, "ngIf"], [3, "ngClass.lt-md", "menuItem", "direction", "activeItem"], ["mat-button", "", "class", "menu-title-btn menu-action-button", 3, "active-menu-item-group", "click", 4, "ngIf"], ["mat-icon-button", "", "matTooltipPosition", "after", 3, "matTooltip", "click", 4, "ngIf"], ["mat-button", "", 1, "menu-title-btn", "menu-action-button", 3, "click"], [3, "svgIcon"], ["class", "btn-label", 4, "ngIf"], [1, "btn-label"], ["mat-icon-button", "", "matTooltipPosition", "after", 3, "click", "matTooltip"]], template: function MenuItemListComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 4);
+            i0.ɵɵconditionalCreate(1, MenuItemListComponent_Conditional_1_Template, 5, 5, "div", 5)(2, MenuItemListComponent_Conditional_2_Template, 1, 1, "ng-container");
+            i0.ɵɵelementStart(3, "div", 6);
+            i0.ɵɵtemplate(4, MenuItemListComponent_ng_container_4_Template, 2, 4, "ng-container", 7);
             i0.ɵɵelementEnd()();
-            i0.ɵɵtemplate(5, MenuItemListComponent_ng_template_5_Template, 9, 14, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor)(7, MenuItemListComponent_ng_template_7_Template, 1, 6, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor)(9, MenuItemListComponent_ng_template_9_Template, 1, 1, "ng-template", null, 2, i0.ɵɵtemplateRefExtractor)(11, MenuItemListComponent_ng_template_11_Template, 2, 2, "ng-template", null, 3, i0.ɵɵtemplateRefExtractor);
+            i0.ɵɵtemplate(5, MenuItemListComponent_ng_template_5_Template, 1, 8, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor)(7, MenuItemListComponent_ng_template_7_Template, 1, 6, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor)(9, MenuItemListComponent_ng_template_9_Template, 1, 1, "ng-template", null, 2, i0.ɵɵtemplateRefExtractor)(11, MenuItemListComponent_ng_template_11_Template, 2, 2, "ng-template", null, 3, i0.ɵɵtemplateRefExtractor);
         } if (rf & 2) {
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.titleKey && ctx.showTitle && ctx.labelsVisible && !ctx.menuItemGroup.itemGroupClick ? 1 : (ctx.menuItemGroup == null ? null : ctx.menuItemGroup.itemGroupClick) ? 2 : -1);
@@ -978,11 +1210,11 @@ class MenuItemListComponent {
             i0.ɵɵproperty("fxLayoutAlign", ctx.menuLayoutDirection);
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngForOf", ctx.items);
-        } }, dependencies: [i1$2.DefaultLayoutDirective, i1$2.DefaultLayoutAlignDirective, i2$2.DefaultClassDirective, i1$1.RouterLink, i3.NgForOf, i3.NgIf, i3.NgTemplateOutlet, i5.MatTooltip, i2$1.MatIcon, i7.MatButton, i7.MatIconButton, i6.MatMenu, i6.MatMenuItem, i6.MatMenuTrigger, MenuIconComponent, MenuItemLinkComponent, MenuItemBtnComponent, i8.TranslatePipe], styles: [".spin[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_spinArrow .3s forwards}@keyframes _ngcontent-%COMP%_spinArrow{to{transform:rotate(180deg)}}[_nghost-%COMP%]{display:inline-block}.menu-item[_ngcontent-%COMP%]{width:100%}  a,   a:hover{text-decoration:none}  .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}.menu-action-button.active-menu-item-group[_ngcontent-%COMP%]{background-color:var(--base-95)!important}[_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{width:100%;text-align:start;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}[_nghost-%COMP%]     .menu-list-wrapper .menu-parent-item.active-menu-item, [_nghost-%COMP%]     .menu-list-wrapper .menu-parent-item:hover{font-weight:400!important;background-color:var(--base-70)!important}  .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}.arrow-icon[_ngcontent-%COMP%]{margin-right:-6px}@keyframes _ngcontent-%COMP%_slide-in{0%{opacity:0;margin-left:-100px}to{opacity:1;margin-left:0}}"] }); }
+        } }, dependencies: [i1$2.DefaultLayoutDirective, i1$2.DefaultLayoutAlignDirective, i2$2.DefaultClassDirective, i1$1.RouterLink, i3.NgForOf, i3.NgIf, i3.NgTemplateOutlet, i5.MatTooltip, i2$1.MatIcon, i7.MatButton, i7.MatIconButton, MenuItemLinkComponent, MenuItemBtnComponent, MenuItemWithChildrenComponent, i8.TranslatePipe], styles: ["[_nghost-%COMP%]{display:inline-block}  .menu-item{width:100%}  a,   a:hover{text-decoration:none}  .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{justify-content:flex-start;align-items:center;max-width:100%;width:-webkit-fill-available}  .menu-action-button.active-menu-item-group{background-color:var(--base-95)!important}  .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}  .menu-list-wrapper .menu-item:not(button):not(.active-menu-item):hover{background-color:var(--base-70)!important}  .menu-list-wrapper .menu-item.active-menu-item,   .menu-list-wrapper .menu-item.active-menu-item mat-icon,   .menu-list-wrapper .menu-item.active-menu-item:hover{font-weight:600}  .menu-list-wrapper .menu-item span{display:inline-block}  .menu-list-wrapper .menu-item .menu-item-title{display:flex;flex-direction:row;align-items:start;width:100%}  .menu-list-wrapper .menu-item .menu-item-title .title-content{width:100%;text-align:start;display:block}  .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}  .menu-list-wrapper .menu-parent-item.active-menu-item,   .menu-list-wrapper .menu-parent-item:hover{font-weight:400!important;background-color:var(--base-70)!important}  .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{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}  lib-menu-lang-switcher,   .menu-item-list{animation:_ngcontent-%COMP%_slide-in .3s forwards}  lib-menu-lang-switcher,   .menu-title-btn{margin-right:2px;transition:opacity .3s}  .arrow-icon{margin-right:-6px}@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', standalone: false, template: "<div class=\"menu-list-wrapper\">\r\n\t@if (titleKey && showTitle && labelsVisible && !menuItemGroup.itemGroupClick) {\r\n\t<div fxLayoutAlign=\"start center\" class=\"menu-item-list-title\">\r\n\t\t<mat-icon *ngIf=\"menuItemGroup.titleIcon\" class=\"menu-title-btn\">\r\n\t\t\t{{ menuItemGroup.titleIcon }}\r\n\t\t</mat-icon>\r\n\r\n\t\t<button\r\n\t\t\t*ngIf=\"menuItemGroup.titleNavigation\"\r\n\t\t\tmat-icon-button\r\n\t\t\tclass=\"menu-title-btn\"\r\n\t\t\t[routerLink]=\"menuItemGroup.titleNavigation.path\"\r\n\t\t\t[matTooltip]=\"menuItemGroup.titleNavigation?.tooltip ?? '' | translate\"\r\n\t\t>\r\n\t\t\t<mat-icon>{{ menuItemGroup.titleNavigation.icon }}</mat-icon>\r\n\t\t</button>\r\n\r\n\t\t{{ titleKey | translate }}\r\n\t</div>\r\n\t} @else if (menuItemGroup?.itemGroupClick) {\r\n\t<ng-container *ngTemplateOutlet=\"itemGroupButton\"> </ng-container>\r\n\t}\r\n\t<div class=\"menu-item-list\" fxLayout=\"column\" [fxLayoutAlign]=\"menuLayoutDirection\">\r\n\t\t<ng-container *ngFor=\"let menuItem of items\">\r\n\t\t\t<ng-container\r\n\t\t\t\t*ngTemplateOutlet=\"\r\n\t\t\t\t\t!menuItem.showChildren || !menuItem.children || menuItem?.children?.length === 0 ? (menuItem.clickAction ? menuItemBtn : menuItemLink) : itemWithChildren;\r\n\t\t\t\t\tcontext: { menuItem: menuItem }\r\n\t\t\t\t\"\r\n\t\t\t>\r\n\t\t\t</ng-container>\r\n\t\t</ng-container>\r\n\t</div>\r\n</div>\r\n\r\n<ng-template #itemWithChildren let-menuItem=\"menuItem\">\r\n\t<button\r\n\t\tmatTooltipClass=\"menu-tooltip\"\r\n\t\tmatTooltipPosition=\"after\"\r\n\t\t[matTooltip]=\"!labelsVisible ? (menuItem.title | translate) : ''\"\r\n\t\t[fxLayout]=\"menuItemLayout\"\r\n\t\t[fxLayoutAlign]=\"menuLayoutDirection\"\r\n\t\t#state=\"matMenuTrigger\"\r\n\t\t[matMenuTriggerFor]=\"menu\"\r\n\t\t[attr.id]=\"menuItem.customId\"\r\n\t\tclass=\"text-m menu-item menu-parent-item\"\r\n\t\t[class.menu-labels-visible]=\"labelsVisible\"\r\n\t\t[class.active-menu-item]=\"(activeItem?.link && menuItem === activeItem) || state.menuOpen\"\r\n\t\t[ngClass.lt-md]=\"'mob-menu-item'\"\r\n\t\t(click)=\"toggleItemExpand($event, menuItem)\"\r\n\t>\r\n\t\t<ng-container *ngIf=\"showIcons && menuItem.icon\">\r\n\t\t\t<tld-menu-icon [menuItem]=\"menuItem\"></tld-menu-icon>\r\n\t\t</ng-container>\r\n\t\t<ng-container *ngIf=\"labelsVisible\">\r\n\t\t\t<span class=\"menu-item-title\">\r\n\t\t\t\t<span class=\"title-content\">{{ menuItem.title | translate }}</span></span\r\n\t\t\t>\r\n\t\t\t<ng-container *ngIf=\"menuItem.showChildren && menuItem.children\">\r\n\t\t\t\t<span *ngIf=\"state.menuOpen; else iconDown\" class=\"material-icons spin arrow-icon\">keyboard_arrow_down</span>\r\n\r\n\t\t\t\t<ng-template #iconDown>\r\n\t\t\t\t\t<span class=\"material-icons spin arrow-icon\"> keyboard_arrow_up </span>\r\n\t\t\t\t</ng-template>\r\n\t\t\t</ng-container>\r\n\t\t</ng-container>\r\n\t</button>\r\n\t<mat-menu #menu=\"matMenu\" class=\"child-menu\">\r\n\t\t@for (child of menuItem.children; track $index) {\r\n\t\t<div mat-menu-item>\r\n\t\t\t<ng-container *ngTemplateOutlet=\"menuItem.clickAction ? menuItemBtn : menuItemLink; context: { menuItem: child, isChild: true }\"> </ng-container>\r\n\t\t</div>\r\n\t\t}\r\n\t</mat-menu>\r\n</ng-template>\r\n\r\n<ng-template #menuItemLink let-menuItem=\"menuItem\" let-isChild=\"isChild\">\r\n\t<tld-menu-item-link\r\n\t\t[ngClass.lt-md]=\"'mob-menu-item'\"\r\n\t\t[menuItem]=\"menuItem\"\r\n\t\t[direction]=\"direction\"\r\n\t\t[labelsVisible]=\"labelsVisible || isChild\"\r\n\t\t[activeItem]=\"activeItem\"\r\n\t\t[showIcons]=\"showIcons\"\r\n\t></tld-menu-item-link>\r\n</ng-template>\r\n\r\n<ng-template #menuItemBtn let-menuItem=\"menuItem\">\r\n\t<lib-menu-item-btn *ngIf=\"labelsVisible\" [ngClass.lt-md]=\"'mob-menu-item'\" [menuItem]=\"menuItem\" [direction]=\"direction\" [activeItem]=\"activeItem\"></lib-menu-item-btn>\r\n</ng-template>\r\n\r\n<ng-template #itemGroupButton>\r\n\t<button\r\n\t\t*ngIf=\"menuItemGroup && labelsVisible\"\r\n\t\tmat-button\r\n\t\tclass=\"menu-title-btn menu-action-button\"\r\n\t\t(click)=\"menuItemGroup?.itemGroupClick()\"\r\n\t\t[class.active-menu-item-group]=\"menuItemGroup.isItemGroupActive && menuItemGroup.isItemGroupActive()\"\r\n\t>\r\n\t\t@if(menuItemGroup.isCustomItemGroupIcon){\r\n\t\t<mat-icon [svgIcon]=\"menuItemGroup.itemGroupIcon ?? ''\"></mat-icon>\r\n\t\t} @else {\r\n\t\t<mat-icon>{{ menuItemGroup.itemGroupIcon }}</mat-icon>\r\n\t\t}\r\n\t\t<span class=\"btn-label\" *ngIf=\"titleKey\">\r\n\t\t\t{{ titleKey | translate }}\r\n\t\t</span>\r\n\t</button>\r\n\r\n\t<button\r\n\t\t*ngIf=\"menuItemGroup && !labelsVisible && titleKey && menuItemGroup.itemGroupIcon\"\r\n\t\tmat-icon-button\r\n\t\tmatTooltipPosition=\"after\"\r\n\t\t[matTooltip]=\"titleKey | translate\"\r\n\t\t(click)=\"menuItemGroup?.itemGroupClick()\"\r\n\t>\r\n\t\t@if(menuItemGroup.isCustomItemGroupIcon){\r\n\t\t<mat-icon [svgIcon]=\"menuItemGroup.itemGroupIcon ?? ''\"></mat-icon>\r\n\t\t} @else {\r\n\t\t<mat-icon>{{ menuItemGroup.itemGroupIcon }}</mat-icon>\r\n\t\t}\r\n\t</button>\r\n</ng-template>\r\n", styles: [".spin{animation:spinArrow .3s forwards}@keyframes spinArrow{to{transform:rotate(180deg)}}:host{display:inline-block}.menu-item{width:100%}::ng-deep a,::ng-deep a:hover{text-decoration:none}::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}.menu-action-button.active-menu-item-group{background-color:var(--base-95)!important}: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{width:100%;text-align:start;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 ::ng-deep .menu-list-wrapper .menu-parent-item.active-menu-item,:host ::ng-deep .menu-list-wrapper .menu-parent-item:hover{font-weight:400!important;background-color:var(--base-70)!important}::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}.arrow-icon{margin-right:-6px}@keyframes slide-in{0%{opacity:0;margin-left:-100px}to{opacity:1;margin-left:0}}\n"] }]
+        args: [{ selector: 'menu-item-list', standalone: false, template: "<div class=\"menu-list-wrapper\">\r\n\t@if (titleKey && showTitle && labelsVisible && !menuItemGroup.itemGroupClick) {\r\n\t<div fxLayoutAlign=\"start center\" class=\"menu-item-list-title\">\r\n\t\t<mat-icon *ngIf=\"menuItemGroup.titleIcon\" class=\"menu-title-btn\">\r\n\t\t\t{{ menuItemGroup.titleIcon }}\r\n\t\t</mat-icon>\r\n\r\n\t\t<button\r\n\t\t\t*ngIf=\"menuItemGroup.titleNavigation\"\r\n\t\t\tmat-icon-button\r\n\t\t\tclass=\"menu-title-btn\"\r\n\t\t\t[routerLink]=\"menuItemGroup.titleNavigation.path\"\r\n\t\t\t[matTooltip]=\"menuItemGroup.titleNavigation?.tooltip ?? '' | translate\"\r\n\t\t>\r\n\t\t\t<mat-icon>{{ menuItemGroup.titleNavigation.icon }}</mat-icon>\r\n\t\t</button>\r\n\r\n\t\t{{ titleKey | translate }}\r\n\t</div>\r\n\t} @else if (menuItemGroup?.itemGroupClick) {\r\n\t<ng-container *ngTemplateOutlet=\"itemGroupButton\"> </ng-container>\r\n\t}\r\n\t<div class=\"menu-item-list\" fxLayout=\"column\" [fxLayoutAlign]=\"menuLayoutDirection\">\r\n\t\t<ng-container *ngFor=\"let menuItem of items\">\r\n\t\t\t<ng-container\r\n\t\t\t\t*ngTemplateOutlet=\"\r\n\t\t\t\t\t!menuItem.showChildren || !menuItem.children || menuItem?.children?.length === 0 ? (menuItem.clickAction ? menuItemBtn : menuItemLink) : itemWithChildren;\r\n\t\t\t\t\tcontext: { menuItem: menuItem }\r\n\t\t\t\t\"\r\n\t\t\t>\r\n\t\t\t</ng-container>\r\n\t\t</ng-container>\r\n\t</div>\r\n</div>\r\n\r\n<ng-template #itemWithChildren let-menuItem=\"menuItem\">\r\n\t<lib-menu-item-with-children\r\n\t\t[menuItem]=\"menuItem\"\r\n\t\t[labelsVisible]=\"labelsVisible\"\r\n\t\t[menuLayoutDirection]=\"menuLayoutDirection\"\r\n\t\t[menuItemLayout]=\"menuItemLayout\"\r\n\t\t[activeItem]=\"activeItem\"\r\n\t\t[showIcons]=\"showIcons\"\r\n\t\t[direction]=\"direction\"\r\n\t\t[expandableMenuChildren]=\"expandableMenuChildren\"\r\n\t\t(toggleExpand)=\"toggleExpandEvent($event)\"\r\n\t\t(openMenu)=\"openMenu()\"\r\n\t></lib-menu-item-with-children>\r\n</ng-template>\r\n\r\n<ng-template #menuItemLink let-menuItem=\"menuItem\">\r\n\t<tld-menu-item-link\r\n\t\t[ngClass.lt-md]=\"'mob-menu-item'\"\r\n\t\t[menuItem]=\"menuItem\"\r\n\t\t[direction]=\"direction\"\r\n\t\t[labelsVisible]=\"labelsVisible\"\r\n\t\t[activeItem]=\"activeItem\"\r\n\t\t[showIcons]=\"showIcons\"\r\n\t></tld-menu-item-link>\r\n</ng-template>\r\n\r\n<ng-template #menuItemBtn let-menuItem=\"menuItem\">\r\n\t<lib-menu-item-btn *ngIf=\"labelsVisible\" [ngClass.lt-md]=\"'mob-menu-item'\" [menuItem]=\"menuItem\" [direction]=\"direction\" [activeItem]=\"activeItem\"></lib-menu-item-btn>\r\n</ng-template>\r\n\r\n<ng-template #itemGroupButton>\r\n\t<button\r\n\t\t*ngIf=\"menuItemGroup && labelsVisible\"\r\n\t\tmat-button\r\n\t\tclass=\"menu-title-btn menu-action-button\"\r\n\t\t(click)=\"menuItemGroup?.itemGroupClick()\"\r\n\t\t[class.active-menu-item-group]=\"menuItemGroup.isItemGroupActive && menuItemGroup.isItemGroupActive()\"\r\n\t>\r\n\t\t@if(menuItemGroup.isCustomItemGroupIcon){\r\n\t\t<mat-icon [svgIcon]=\"menuItemGroup.itemGroupIcon ?? ''\"></mat-icon>\r\n\t\t} @else {\r\n\t\t<mat-icon>{{ menuItemGroup.itemGroupIcon }}</mat-icon>\r\n\t\t}\r\n\t\t<span class=\"btn-label\" *ngIf=\"titleKey\">\r\n\t\t\t{{ titleKey | translate }}\r\n\t\t</span>\r\n\t</button>\r\n\r\n\t<button\r\n\t\t*ngIf=\"menuItemGroup && !labelsVisible && titleKey && menuItemGroup.itemGroupIcon\"\r\n\t\tmat-icon-button\r\n\t\tmatTooltipPosition=\"after\"\r\n\t\t[matTooltip]=\"titleKey | translate\"\r\n\t\t(click)=\"menuItemGroup?.itemGroupClick()\"\r\n\t>\r\n\t\t@if(menuItemGroup.isCustomItemGroupIcon){\r\n\t\t<mat-icon [svgIcon]=\"menuItemGroup.itemGroupIcon ?? ''\"></mat-icon>\r\n\t\t} @else {\r\n\t\t<mat-icon>{{ menuItemGroup.itemGroupIcon }}</mat-icon>\r\n\t\t}\r\n\t</button>\r\n</ng-template>\r\n", styles: [":host{display:inline-block}::ng-deep .menu-item{width:100%}::ng-deep a,::ng-deep a:hover{text-decoration:none}::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}::ng-deep .menu-action-button{justify-content:flex-start;align-items:center;max-width:100%;width:-webkit-fill-available}::ng-deep .menu-action-button.active-menu-item-group{background-color:var(--base-95)!important}::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}::ng-deep .menu-list-wrapper .menu-item:not(button):not(.active-menu-item):hover{background-color:var(--base-70)!important}::ng-deep .menu-list-wrapper .menu-item.active-menu-item,::ng-deep .menu-list-wrapper .menu-item.active-menu-item mat-icon,::ng-deep .menu-list-wrapper .menu-item.active-menu-item:hover{font-weight:600}::ng-deep .menu-list-wrapper .menu-item span{display:inline-block}::ng-deep .menu-list-wrapper .menu-item .menu-item-title{display:flex;flex-direction:row;align-items:start;width:100%}::ng-deep .menu-list-wrapper .menu-item .menu-item-title .title-content{width:100%;text-align:start;display:block}::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}::ng-deep .menu-list-wrapper .menu-parent-item.active-menu-item,::ng-deep .menu-list-wrapper .menu-parent-item:hover{font-weight:400!important;background-color:var(--base-70)!important}::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}::ng-deep .menu-item-list-title{padding:8px 0 24px;font-size:16px;font-weight:600;overflow:hidden;text-overflow:ellipsis;margin-left:20px;height:56px}::ng-deep .menu-item-list-title:has(.menu-title-btn){margin-left:0}::ng-deep lib-menu-lang-switcher,::ng-deep .menu-item-list{animation:slide-in .3s forwards}::ng-deep lib-menu-lang-switcher,::ng-deep .menu-title-btn{margin-right:2px;transition:opacity .3s}::ng-deep .arrow-icon{margin-right:-6px}@keyframes slide-in{0%{opacity:0;margin-left:-100px}to{opacity:1;margin-left:0}}\n"] }]
     }], null, { direction: [{
             type: Input
         }], labelsVisible: [{
@@ -991,10 +1223,14 @@ class MenuItemListComponent {
             type: Input
         }], showIcons: [{
             type: Input
+        }], expandableMenuChildren: [{
+            type: Input
         }], items: [{
             type: Input
         }], menuItemGroup: [{
             type: Input
+        }], openMenuTrigger: [{
+            type: Output
         }], toggleExpand: [{
             type: Output
         }] }); })();
@@ -1003,12 +1239,12 @@ class MenuItemListComponent {
 function MenuColumnsComponent_ng_container_0_menu_item_list_1_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "menu-item-list", 4);
-    i0.ɵɵlistener("toggleExpand", function MenuColumnsComponent_ng_container_0_menu_item_list_1_Template_menu_item_list_toggleExpand_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.elementExpanded($event)); });
+    i0.ɵɵlistener("toggleExpand", function MenuColumnsComponent_ng_container_0_menu_item_list_1_Template_menu_item_list_toggleExpand_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.elementExpanded($event)); })("openMenuTrigger", function MenuColumnsComponent_ng_container_0_menu_item_list_1_Template_menu_item_list_openMenuTrigger_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.openMenu()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const group_r3 = i0.ɵɵnextContext().$implicit;
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("activeItem", ctx_r1.activeItem)("direction", ctx_r1.direction)("labelsVisible", ctx_r1.isOpen)("menuItemGroup", group_r3)("items", group_r3.items);
+    i0.ɵɵproperty("activeItem", ctx_r1.activeItem)("direction", ctx_r1.direction)("labelsVisible", ctx_r1.isOpen)("menuItemGroup", group_r3)("items", group_r3.items)("expandableMenuChildren", ctx_r1.expandableMenuChildren);
 } }
 function MenuColumnsComponent_ng_container_0_div_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 5);
@@ -1025,7 +1261,7 @@ function MenuColumnsComponent_ng_container_0_div_3_Template(rf, ctx) { if (rf &
 } }
 function MenuColumnsComponent_ng_container_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵtemplate(1, MenuColumnsComponent_ng_container_0_menu_item_list_1_Template, 1, 5, "menu-item-list", 1)(2, MenuColumnsComponent_ng_container_0_div_2_Template, 2, 1, "div", 2)(3, MenuColumnsComponent_ng_container_0_div_3_Template, 2, 0, "div", 3);
+    i0.ɵɵtemplate(1, MenuColumnsComponent_ng_container_0_menu_item_list_1_Template, 1, 6, "menu-item-list", 1)(2, MenuColumnsComponent_ng_container_0_div_2_Template, 2, 1, "div", 2)(3, MenuColumnsComponent_ng_container_0_div_3_Template, 2, 0, "div", 3);
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
     const group_r3 = ctx.$implicit;
@@ -1057,6 +1293,7 @@ class MenuColumnsComponent {
         this.menuItemsService = menuItemsService;
         this.direction = MenuLayoutDirection.column;
         this.isOpen = true;
+        this.expandableMenuChildren = false;
         this.toggleCollapseEvent = new EventEmitter();
     }
     ngOnInit() {
@@ -1069,19 +1306,22 @@ class MenuColumnsComponent {
         }
         this.activeItem = this.active.root;
     }
+    openMenu() {
+        this.toggleCollapseEvent.emit();
+    }
     toggleOnMobileSelect() {
         return this.isOpen && ResolutionHelper.isMobileRes() && (this.active && Object.values(this.active)?.length > 0);
     }
     static { this.ɵfac = function MenuColumnsComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MenuColumnsComponent)(i0.ɵɵdirectiveInject(i1$1.Router), i0.ɵɵdirectiveInject(MENU_SHARED_CONFIG, 8), i0.ɵɵdirectiveInject(MenuItemsService)); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MenuColumnsComponent, selectors: [["menu-columns"]], inputs: { direction: "direction", isOpen: "isOpen", active: "active" }, outputs: { toggleCollapseEvent: "toggleCollapseEvent" }, standalone: false, decls: 1, vars: 1, consts: [[4, "ngFor", "ngForOf"], [3, "activeItem", "direction", "labelsVisible", "menuItemGroup", "items", "toggleExpand", 4, "ngIf"], ["class", "loader-container", 4, "ngIf"], ["class", "divider", 4, "ngIf"], [3, "toggleExpand", "activeItem", "direction", "labelsVisible", "menuItemGroup", "items"], [1, "loader-container"], [1, "loader", 3, "diameter"], [1, "divider"]], template: function MenuColumnsComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MenuColumnsComponent, selectors: [["menu-columns"]], inputs: { direction: "direction", isOpen: "isOpen", expandableMenuChildren: "expandableMenuChildren", active: "active" }, outputs: { toggleCollapseEvent: "toggleCollapseEvent" }, standalone: false, decls: 1, vars: 1, consts: [[4, "ngFor", "ngForOf"], [3, "activeItem", "direction", "labelsVisible", "menuItemGroup", "items", "expandableMenuChildren", "toggleExpand", "openMenuTrigger", 4, "ngIf"], ["class", "loader-container", 4, "ngIf"], ["class", "divider", 4, "ngIf"], [3, "toggleExpand", "openMenuTrigger", "activeItem", "direction", "labelsVisible", "menuItemGroup", "items", "expandableMenuChildren"], [1, "loader-container"], [1, "loader", 3, "diameter"], [1, "divider"]], template: function MenuColumnsComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵtemplate(0, MenuColumnsComponent_ng_container_0_Template, 4, 3, "ng-container", 0);
         } if (rf & 2) {
             i0.ɵɵproperty("ngForOf", ctx.mergedGroups);
-        } }, dependencies: [i3.NgForOf, i3.NgIf, i4.MatDivider, i5$1.MatProgressSpinner, MenuItemListComponent], styles: ["[_nghost-%COMP%]{display:inline-block}[_nghost-%COMP%]   menu-item-list[_ngcontent-%COMP%]{display:block}.divider[_ngcontent-%COMP%]{margin:10px 0}.loader-container[_ngcontent-%COMP%]{padding-left:20px}"] }); }
+        } }, dependencies: [i3.NgForOf, i3.NgIf, i4.MatDivider, i5$2.MatProgressSpinner, MenuItemListComponent], styles: ["[_nghost-%COMP%]{display:inline-block}[_nghost-%COMP%]   menu-item-list[_ngcontent-%COMP%]{display:block}.divider[_ngcontent-%COMP%]{margin:10px 0}.loader-container[_ngcontent-%COMP%]{padding-left:20px}"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuColumnsComponent, [{
         type: Component,
-        args: [{ selector: 'menu-columns', standalone: false, template: "<ng-container *ngFor=\"let group of mergedGroups\">\r\n    <menu-item-list *ngIf=\"group.items.length || group.showEmpty\" [activeItem]=\"activeItem\" [direction]=\"direction\"\r\n        (toggleExpand)=\"elementExpanded($event)\" [labelsVisible]=\"isOpen\" [menuItemGroup]=\"group\"\r\n        [items]=\"group.items\">\r\n    </menu-item-list>\r\n    <div class=\"loader-container\" *ngIf=\"group.isItemsLoading && isOpen\">\r\n        <mat-spinner [diameter]=\"24\" class=\"loader\"></mat-spinner>\r\n    </div>\r\n    <div class=\"divider\" *ngIf=\"group.bottomDivider && group.items.length\">\r\n        <mat-divider></mat-divider>\r\n    </div>\r\n</ng-container>", styles: [":host{display:inline-block}:host menu-item-list{display:block}.divider{margin:10px 0}.loader-container{padding-left:20px}\n"] }]
+        args: [{ selector: 'menu-columns', standalone: false, template: "<ng-container *ngFor=\"let group of mergedGroups\">\r\n    <menu-item-list *ngIf=\"group.items.length || group.showEmpty\" [activeItem]=\"activeItem\" [direction]=\"direction\"\r\n        (toggleExpand)=\"elementExpanded($event)\" (openMenuTrigger)=\"openMenu()\" [labelsVisible]=\"isOpen\" [menuItemGroup]=\"group\"\r\n        [items]=\"group.items\" [expandableMenuChildren]=\"expandableMenuChildren!\">\r\n    </menu-item-list>\r\n    <div class=\"loader-container\" *ngIf=\"group.isItemsLoading && isOpen\">\r\n        <mat-spinner [diameter]=\"24\" class=\"loader\"></mat-spinner>\r\n    </div>\r\n    <div class=\"divider\" *ngIf=\"group.bottomDivider && group.items.length\">\r\n        <mat-divider></mat-divider>\r\n    </div>\r\n</ng-container>", styles: [":host{display:inline-block}:host menu-item-list{display:block}.divider{margin:10px 0}.loader-container{padding-left:20px}\n"] }]
     }], () => [{ type: i1$1.Router }, { type: undefined, decorators: [{
                 type: Optional
             }, {
@@ -1091,6 +1331,8 @@ class MenuColumnsComponent {
             type: Input
         }], isOpen: [{
             type: Input
+        }], expandableMenuChildren: [{
+            type: Input
         }], toggleCollapseEvent: [{
             type: Output
         }], active: [{
@@ -1100,145 +1342,186 @@ class MenuColumnsComponent {
 
 const _c0 = (a0, a1) => ({ icon: a0, label: a1 });
 const _forTrack0 = ($index, $item) => $item.label;
-function MenuProfileComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+function MenuProfileComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 4)(1, "button", 5);
+    i0.ɵɵlistener("click", function MenuProfileComponent_Conditional_0_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.login()); });
+    i0.ɵɵelementStart(2, "mat-icon");
+    i0.ɵɵtext(3, "login");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(4);
+    i0.ɵɵpipe(5, "translate");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(5, 1, "MENU.LOGIN"), " ");
+} }
+function MenuProfileComponent_Conditional_1_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0);
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵtextInterpolate1(" ", ctx_r0.userInitials, " ");
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.userInitials, " ");
 } }
-function MenuProfileComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+function MenuProfileComponent_Conditional_1_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "mat-icon");
     i0.ɵɵtext(1, "person");
     i0.ɵɵelementEnd();
 } }
-function MenuProfileComponent_ng_container_6_mat_icon_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "mat-icon", 11);
+function MenuProfileComponent_Conditional_1_ng_container_6_mat_icon_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "mat-icon", 13);
     i0.ɵɵtext(1, "keyboard_arrow_down");
     i0.ɵɵelementEnd();
 } }
-function MenuProfileComponent_ng_container_6_ng_template_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "mat-icon", 11);
+function MenuProfileComponent_Conditional_1_ng_container_6_ng_template_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "mat-icon", 13);
     i0.ɵɵtext(1, "keyboard_arrow_up");
     i0.ɵɵelementEnd();
 } }
-function MenuProfileComponent_ng_container_6_Template(rf, ctx) { if (rf & 1) {
+function MenuProfileComponent_Conditional_1_ng_container_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵelementStart(1, "span", 9);
+    i0.ɵɵelementStart(1, "span", 11);
     i0.ɵɵtext(2);
     i0.ɵɵpipe(3, "translate");
     i0.ɵɵelementEnd();
-    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.ɵɵtemplate(4, MenuProfileComponent_Conditional_1_ng_container_6_mat_icon_4_Template, 2, 0, "mat-icon", 12)(5, MenuProfileComponent_Conditional_1_ng_container_6_ng_template_5_Template, 2, 0, "ng-template", null, 3, i0.ɵɵtemplateRefExtractor);
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
-    const iconDown_r2 = i0.ɵɵreference(6);
-    const ctx_r0 = i0.ɵɵnextContext();
-    const state_r3 = i0.ɵɵreference(2);
+    const iconDown_r3 = i0.ɵɵreference(6);
+    i0.ɵɵnextContext();
+    const state_r4 = i0.ɵɵreference(2);
+    const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(3, 3, ctx_r0.username() ?? "MENU.ANONYMOUS"), " ");
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(3, 3, ctx_r1.username() ?? "MENU.ANONYMOUS"), " ");
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngIf", state_r3.menuOpen)("ngIfElse", iconDown_r2);
+    i0.ɵɵproperty("ngIf", state_r4.menuOpen)("ngIfElse", iconDown_r3);
 } }
-function MenuProfileComponent_For_10_Conditional_0_Conditional_0_ng_container_1_Template(rf, ctx) { if (rf & 1) {
+function MenuProfileComponent_Conditional_1_For_10_Conditional_0_Conditional_0_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
-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);
+function MenuProfileComponent_Conditional_1_For_10_Conditional_0_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "a", 17);
+    i0.ɵɵlistener("click", function MenuProfileComponent_Conditional_1_For_10_Conditional_0_Conditional_0_Template_a_click_0_listener() { i0.ɵɵrestoreView(_r5); const item_r6 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.linkCallback(item_r6.link)); });
+    i0.ɵɵtemplate(1, MenuProfileComponent_Conditional_1_For_10_Conditional_0_Conditional_0_ng_container_1_Template, 1, 0, "ng-container", 18);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const item_r5 = i0.ɵɵnextContext(2).$implicit;
+    const item_r6 = i0.ɵɵnextContext(2).$implicit;
     i0.ɵɵnextContext();
-    const profileMenuItem_r6 = i0.ɵɵreference(12);
-    i0.ɵɵproperty("href", item_r5.link.href, i0.ɵɵsanitizeUrl);
+    const profileMenuItem_r7 = i0.ɵɵreference(12);
+    i0.ɵɵproperty("href", item_r6.link.href, i0.ɵɵsanitizeUrl);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", profileMenuItem_r6)("ngTemplateOutletContext", i0.ɵɵpureFunction2(3, _c0, item_r5.icon, item_r5.label));
+    i0.ɵɵproperty("ngTemplateOutlet", profileMenuItem_r7)("ngTemplateOutletContext", i0.ɵɵpureFunction2(3, _c0, item_r6.icon, item_r6.label));
 } }
-function MenuProfileComponent_For_10_Conditional_0_Conditional_1_ng_container_1_Template(rf, ctx) { if (rf & 1) {
+function MenuProfileComponent_Conditional_1_For_10_Conditional_0_Conditional_1_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
-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);
+function MenuProfileComponent_Conditional_1_For_10_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "a", 19);
+    i0.ɵɵlistener("click", function MenuProfileComponent_Conditional_1_For_10_Conditional_0_Conditional_1_Template_a_click_0_listener() { i0.ɵɵrestoreView(_r8); const item_r6 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.linkCallback(item_r6.link)); });
+    i0.ɵɵtemplate(1, MenuProfileComponent_Conditional_1_For_10_Conditional_0_Conditional_1_ng_container_1_Template, 1, 0, "ng-container", 18);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const item_r5 = i0.ɵɵnextContext(2).$implicit;
+    const item_r6 = i0.ɵɵnextContext(2).$implicit;
     i0.ɵɵnextContext();
-    const profileMenuItem_r6 = i0.ɵɵreference(12);
-    i0.ɵɵproperty("routerLink", item_r5.link.href);
+    const profileMenuItem_r7 = i0.ɵɵreference(12);
+    i0.ɵɵproperty("routerLink", item_r6.link.href);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", profileMenuItem_r6)("ngTemplateOutletContext", i0.ɵɵpureFunction2(3, _c0, item_r5.icon, item_r5.label));
+    i0.ɵɵproperty("ngTemplateOutlet", profileMenuItem_r7)("ngTemplateOutletContext", i0.ɵɵpureFunction2(3, _c0, item_r6.icon, item_r6.label));
 } }
-function MenuProfileComponent_For_10_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(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);
+function MenuProfileComponent_Conditional_1_For_10_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, MenuProfileComponent_Conditional_1_For_10_Conditional_0_Conditional_0_Template, 2, 6, "a", 15)(1, MenuProfileComponent_Conditional_1_For_10_Conditional_0_Conditional_1_Template, 2, 6, "a", 16);
 } if (rf & 2) {
-    const item_r5 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵconditional(item_r5.link.isExternal ? 0 : 1);
+    const item_r6 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵconditional(item_r6.link.isExternal ? 0 : 1);
 } }
-function MenuProfileComponent_For_10_Conditional_1_ng_container_1_Template(rf, ctx) { if (rf & 1) {
+function MenuProfileComponent_Conditional_1_For_10_Conditional_1_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
-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);
+function MenuProfileComponent_Conditional_1_For_10_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 20);
+    i0.ɵɵlistener("click", function MenuProfileComponent_Conditional_1_For_10_Conditional_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r9); const item_r6 = i0.ɵɵnextContext().$implicit; return i0.ɵɵresetView(item_r6.button == null ? null : item_r6.button.callback()); });
+    i0.ɵɵtemplate(1, MenuProfileComponent_Conditional_1_For_10_Conditional_1_ng_container_1_Template, 1, 0, "ng-container", 18);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const item_r5 = i0.ɵɵnextContext().$implicit;
+    const item_r6 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵnextContext();
-    const profileMenuItem_r6 = i0.ɵɵreference(12);
+    const profileMenuItem_r7 = i0.ɵɵreference(12);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", profileMenuItem_r6)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c0, item_r5.icon, item_r5.label));
+    i0.ɵɵproperty("ngTemplateOutlet", profileMenuItem_r7)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c0, item_r6.icon, item_r6.label));
 } }
-function MenuProfileComponent_For_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, MenuProfileComponent_For_10_Conditional_0_Template, 2, 1)(1, MenuProfileComponent_For_10_Conditional_1_Template, 2, 5, "button", 12);
+function MenuProfileComponent_Conditional_1_For_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, MenuProfileComponent_Conditional_1_For_10_Conditional_0_Template, 2, 1)(1, MenuProfileComponent_Conditional_1_For_10_Conditional_1_Template, 2, 5, "button", 14);
 } if (rf & 2) {
-    const item_r5 = ctx.$implicit;
-    i0.ɵɵconditional(item_r5.link ? 0 : 1);
+    const item_r6 = ctx.$implicit;
+    i0.ɵɵconditional(item_r6.link ? 0 : 1);
 } }
-function MenuProfileComponent_ng_template_11_Conditional_0_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 21);
+function MenuProfileComponent_Conditional_1_ng_template_11_Conditional_0_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 23);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const icon_r9 = i0.ɵɵnextContext(2).icon;
-    i0.ɵɵclassProp("material-icons-outlined", icon_r9 == null ? null : icon_r9.isOutlined);
+    const icon_r10 = i0.ɵɵnextContext(2).icon;
+    i0.ɵɵclassProp("material-icons-outlined", icon_r10 == null ? null : icon_r10.isOutlined);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", icon_r9 == null ? null : icon_r9.name, " ");
+    i0.ɵɵtextInterpolate1(" ", icon_r10 == null ? null : icon_r10.name, " ");
 } }
-function MenuProfileComponent_ng_template_11_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mat-icon", 20);
+function MenuProfileComponent_Conditional_1_ng_template_11_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mat-icon", 22);
 } if (rf & 2) {
-    const icon_r9 = i0.ɵɵnextContext(2).icon;
-    i0.ɵɵproperty("svgIcon", icon_r9 == null ? null : icon_r9.name);
+    const icon_r10 = i0.ɵɵnextContext(2).icon;
+    i0.ɵɵproperty("svgIcon", icon_r10 == null ? null : icon_r10.name);
 } }
-function MenuProfileComponent_ng_template_11_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(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);
+function MenuProfileComponent_Conditional_1_ng_template_11_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, MenuProfileComponent_Conditional_1_ng_template_11_Conditional_0_Conditional_0_Template, 2, 3, "span", 21)(1, MenuProfileComponent_Conditional_1_ng_template_11_Conditional_0_Conditional_1_Template, 1, 1, "mat-icon", 22);
 } if (rf & 2) {
-    const icon_r9 = i0.ɵɵnextContext().icon;
-    i0.ɵɵconditional(!(icon_r9 == null ? null : icon_r9.isCustom) ? 0 : 1);
+    const icon_r10 = i0.ɵɵnextContext().icon;
+    i0.ɵɵconditional(!(icon_r10 == null ? null : icon_r10.isCustom) ? 0 : 1);
 } }
-function MenuProfileComponent_ng_template_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, MenuProfileComponent_ng_template_11_Conditional_0_Template, 2, 1);
+function MenuProfileComponent_Conditional_1_ng_template_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, MenuProfileComponent_Conditional_1_ng_template_11_Conditional_0_Template, 2, 1);
     i0.ɵɵtext(1);
     i0.ɵɵpipe(2, "translate");
 } if (rf & 2) {
-    const icon_r9 = ctx.icon;
-    const label_r10 = ctx.label;
-    i0.ɵɵconditional(icon_r9 ? 0 : -1);
+    const icon_r10 = ctx.icon;
+    const label_r11 = ctx.label;
+    i0.ɵɵconditional(icon_r10 ? 0 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(2, 2, label_r11), "\n");
+} }
+function MenuProfileComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 6)(1, "button", 7, 0)(3, "div", 8);
+    i0.ɵɵconditionalCreate(4, MenuProfileComponent_Conditional_1_Conditional_4_Template, 1, 1)(5, MenuProfileComponent_Conditional_1_Conditional_5_Template, 2, 0, "mat-icon");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(6, MenuProfileComponent_Conditional_1_ng_container_6_Template, 7, 5, "ng-container", 9);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "mat-menu", 10, 1);
+    i0.ɵɵrepeaterCreate(9, MenuProfileComponent_Conditional_1_For_10_Template, 2, 1, null, null, _forTrack0);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵtemplate(11, MenuProfileComponent_Conditional_1_ng_template_11_Template, 3, 4, "ng-template", null, 2, i0.ɵɵtemplateRefExtractor);
+} if (rf & 2) {
+    const state_r4 = i0.ɵɵreference(2);
+    const menu_r12 = i0.ɵɵreference(8);
+    const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(2, 2, label_r10), "\n");
+    i0.ɵɵclassProp("collapsed", ctx_r1.collapsed())("active", state_r4.menuOpen);
+    i0.ɵɵproperty("matMenuTriggerFor", menu_r12);
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(ctx_r1.userInitials ? 4 : 5);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngIf", !ctx_r1.collapsed());
+    i0.ɵɵadvance(3);
+    i0.ɵɵrepeater(ctx_r1.userOptions());
 } }
 class MenuProfileComponent {
     constructor() {
         this.collapsed = input(...(ngDevMode ? [undefined, { debugName: "collapsed" }] : []));
         this.username = input(...(ngDevMode ? [undefined, { debugName: "username" }] : []));
+        this.useLargeLoginButton = input(false, ...(ngDevMode ? [{ debugName: "useLargeLoginButton" }] : []));
         this.userOptions = input(...(ngDevMode ? [undefined, { debugName: "userOptions" }] : []));
         this.linkCallbackEvent = output();
+        this.loginEvent = output();
     }
     ngOnInit() {
         this.setUserInitials();
@@ -1246,6 +1529,9 @@ class MenuProfileComponent {
     linkCallback(link) {
         this.linkCallbackEvent.emit(link);
     }
+    login() {
+        this.loginEvent.emit();
+    }
     setUserInitials() {
         if (!this.username()) {
             return;
@@ -1261,33 +1547,15 @@ class MenuProfileComponent {
         this.userInitials = splittedUsername[0][0] + splittedUsername[1][0];
     }
     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: [1, "collapsed"], username: [1, "username"], userOptions: [1, "userOptions"] }, outputs: { linkCallbackEvent: "linkCallbackEvent" }, standalone: false, decls: 13, vars: 7, 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.ɵɵconditionalCreate(4, MenuProfileComponent_Conditional_4_Template, 1, 1)(5, MenuProfileComponent_Conditional_5_Template, 2, 0, "mat-icon");
-            i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(6, MenuProfileComponent_ng_container_6_Template, 7, 5, "ng-container", 7);
-            i0.ɵɵelementEnd();
-            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);
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MenuProfileComponent, selectors: [["lib-menu-profile"]], inputs: { collapsed: [1, "collapsed"], username: [1, "username"], useLargeLoginButton: [1, "useLargeLoginButton"], userOptions: [1, "userOptions"] }, outputs: { linkCallbackEvent: "linkCallbackEvent", loginEvent: "loginEvent" }, standalone: false, decls: 2, vars: 1, consts: [["state", "matMenuTrigger"], ["menu", "matMenu"], ["profileMenuItem", ""], ["iconDown", ""], [1, "login-wrapper"], ["mat-stroked-button", "", "color", "accent", 1, "login-btn", 3, "click"], [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.ɵɵconditionalCreate(0, MenuProfileComponent_Conditional_0_Template, 6, 3, "div", 4)(1, MenuProfileComponent_Conditional_1_Template, 13, 7);
         } if (rf & 2) {
-            const state_r3 = i0.ɵɵreference(2);
-            const menu_r11 = i0.ɵɵreference(8);
-            i0.ɵɵadvance();
-            i0.ɵɵclassProp("collapsed", ctx.collapsed())("active", state_r3.menuOpen);
-            i0.ɵɵproperty("matMenuTriggerFor", menu_r11);
-            i0.ɵɵadvance(3);
-            i0.ɵɵconditional(ctx.userInitials ? 4 : 5);
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngIf", !ctx.collapsed());
-            i0.ɵɵadvance(3);
-            i0.ɵɵrepeater(ctx.userOptions());
-        } }, dependencies: [i1$1.RouterLink, i3.NgIf, i3.NgTemplateOutlet, i2$1.MatIcon, i6.MatMenu, i6.MatMenuItem, i6.MatMenuTrigger, i8.TranslatePipe], styles: [".spin[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_spinArrow .3s forwards}@keyframes _ngcontent-%COMP%_spinArrow{to{transform:rotate(180deg)}}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:24px 0;border-radius:5px;padding:8px 0}.profile-wrapper[_ngcontent-%COMP%]:hover   .profile-icon[_ngcontent-%COMP%]{background-color:var(--base-70);filter:brightness(.97)}.profile-wrapper[_ngcontent-%COMP%]:hover:not(.collapsed), .profile-wrapper.active[_ngcontent-%COMP%]:not(.collapsed){background-color:var(--base-70)}.collapsed.profile-wrapper[_ngcontent-%COMP%]{padding:0!important;margin:32px 0!important}.profile-icon[_ngcontent-%COMP%]{margin-left:20px;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}.active[_ngcontent-%COMP%]   .profile-icon[_ngcontent-%COMP%]{background-color:var(--base-70);filter:brightness(.97)}.collapsed[_ngcontent-%COMP%]   .profile-icon[_ngcontent-%COMP%]{margin-left:0!important}.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:10px}.mobile[_ngcontent-%COMP%]   .profile-arrow[_ngcontent-%COMP%]{margin-right:20px}  .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}"] }); }
+            i0.ɵɵconditional(ctx.useLargeLoginButton() && !ctx.username() && !ctx.collapsed() ? 0 : 1);
+        } }, dependencies: [i1$1.RouterLink, i3.NgIf, i3.NgTemplateOutlet, i2$1.MatIcon, i7.MatButton, i5$1.MatMenu, i5$1.MatMenuItem, i5$1.MatMenuTrigger, i8.TranslatePipe], styles: [".spin[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_spinArrow .3s forwards}@keyframes _ngcontent-%COMP%_spinArrow{to{transform:rotate(180deg)}}a[_ngcontent-%COMP%]{text-decoration:none}.login-wrapper[_ngcontent-%COMP%]{padding:10px;margin-bottom:20px}.login-btn[_ngcontent-%COMP%]{width:100%}.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:24px 0;border-radius:5px;padding:8px 0}.profile-wrapper[_ngcontent-%COMP%]:hover   .profile-icon[_ngcontent-%COMP%]{background-color:var(--base-70);filter:brightness(.97)}.profile-wrapper[_ngcontent-%COMP%]:hover:not(.collapsed), .profile-wrapper.active[_ngcontent-%COMP%]:not(.collapsed){background-color:var(--base-70)}.collapsed.profile-wrapper[_ngcontent-%COMP%]{padding:0!important;margin:32px 0!important}.profile-icon[_ngcontent-%COMP%]{margin-left:20px;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}.active[_ngcontent-%COMP%]   .profile-icon[_ngcontent-%COMP%]{background-color:var(--base-70);filter:brightness(.97)}.collapsed[_ngcontent-%COMP%]   .profile-icon[_ngcontent-%COMP%]{margin-left:0!important}.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:10px}.mobile[_ngcontent-%COMP%]   .profile-arrow[_ngcontent-%COMP%]{margin-right:20px}  .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}"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuProfileComponent, [{
         type: Component,
-        args: [{ selector: 'lib-menu-profile', standalone: false, template: "<div class=\"profile\">\r\n\t<button #state=\"matMenuTrigger\" [class.collapsed]=\"collapsed()\" [matMenuTriggerFor]=\"menu\" class=\"profile-wrapper\" [class.active]=\"state.menuOpen\">\r\n\t\t<div class=\"profile-icon\">\r\n\t\t\t@if (userInitials) {\r\n\t\t\t{{ userInitials }}\r\n\t\t\t} @else {\r\n\t\t\t<mat-icon>person</mat-icon>\r\n\t\t\t}\r\n\t\t</div>\r\n\r\n\t\t<ng-container *ngIf=\"!collapsed()\">\r\n\t\t\t<span class=\"profile-name\">\r\n\t\t\t\t{{ username() ?? \"MENU.ANONYMOUS\" | translate }}\r\n\t\t\t</span>\r\n\r\n\t\t\t<mat-icon *ngIf=\"state.menuOpen; else iconDown\" class=\"profile-arrow spin\">keyboard_arrow_down</mat-icon>\r\n\r\n\t\t\t<ng-template #iconDown>\r\n\t\t\t\t<mat-icon class=\"profile-arrow spin\">keyboard_arrow_up</mat-icon>\r\n\t\t\t</ng-template>\r\n\t\t</ng-container>\r\n\t</button>\r\n\r\n\t<mat-menu #menu=\"matMenu\" class=\"profile-menu\">\r\n\t\t@for (item of userOptions(); track item.label) { @if (item.link) { @if (item.link.isExternal) {\r\n\t\t<a class=\"mat-mdc-menu-item\" [href]=\"item.link.href\" target=\"_blank\" (click)=\"linkCallback(item.link)\">\r\n\t\t\t<ng-container *ngTemplateOutlet=\"profileMenuItem; context: { icon: item.icon, label: item.label }\"> </ng-container>\r\n\t\t</a>\r\n\t\t} @else {\r\n\t\t<a class=\"mat-mdc-menu-item\" [routerLink]=\"item.link.href\" (click)=\"linkCallback(item.link)\">\r\n\t\t\t<ng-container *ngTemplateOutlet=\"profileMenuItem; context: { icon: item.icon, label: item.label }\"> </ng-container>\r\n\t\t</a>\r\n\t\t} } @else {\r\n\t\t<button mat-menu-item class=\"profile-option\" (click)=\"item.button?.callback()\">\r\n\t\t\t<ng-container *ngTemplateOutlet=\"profileMenuItem; context: { icon: item.icon, label: item.label }\"> </ng-container>\r\n\t\t</button>\r\n\t\t} }\r\n\t</mat-menu>\r\n</div>\r\n\r\n<ng-template #profileMenuItem let-icon=\"icon\" let-label=\"label\">\r\n\t@if (icon) { @if (!icon?.isCustom) {\r\n\t<span class=\"material-icons profile-option-icon\" [class.material-icons-outlined]=\"icon?.isOutlined\">\r\n\t\t{{ icon?.name }}\r\n\t</span>\r\n\t} @else {\r\n\t<mat-icon class=\"profile-option-icon\" [svgIcon]=\"icon?.name\"></mat-icon>\r\n\t} }\r\n\t{{ label | translate }}\r\n</ng-template>\r\n", styles: [".spin{animation:spinArrow .3s forwards}@keyframes spinArrow{to{transform:rotate(180deg)}}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:24px 0;border-radius:5px;padding:8px 0}.profile-wrapper:hover .profile-icon{background-color:var(--base-70);filter:brightness(.97)}.profile-wrapper:hover:not(.collapsed),.profile-wrapper.active:not(.collapsed){background-color:var(--base-70)}.collapsed.profile-wrapper{padding:0!important;margin:32px 0!important}.profile-icon{margin-left:20px;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}.active .profile-icon{background-color:var(--base-70);filter:brightness(.97)}.collapsed .profile-icon{margin-left:0!important}.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:10px}.mobile .profile-arrow{margin-right:20px}::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}\n"] }]
+        args: [{ selector: 'lib-menu-profile', standalone: false, template: "@if (useLargeLoginButton() && !username() && !collapsed()) {\r\n\t<div class=\"login-wrapper\">\r\n\t\t<button mat-stroked-button color=\"accent\" class=\"login-btn\" (click)=\"login()\">\r\n\t\t\t<mat-icon>login</mat-icon>\r\n\t\t\t{{ \"MENU.LOGIN\" | translate }}\r\n\t\t</button>\r\n\t</div>\r\n} @else {\r\n<div class=\"profile\">\r\n\t<button #state=\"matMenuTrigger\" [class.collapsed]=\"collapsed()\" [matMenuTriggerFor]=\"menu\" class=\"profile-wrapper\" [class.active]=\"state.menuOpen\">\r\n\t\t<div class=\"profile-icon\">\r\n\t\t\t@if (userInitials) {\r\n\t\t\t{{ userInitials }}\r\n\t\t\t} @else {\r\n\t\t\t<mat-icon>person</mat-icon>\r\n\t\t\t}\r\n\t\t</div>\r\n\r\n\t\t<ng-container *ngIf=\"!collapsed()\">\r\n\t\t\t<span class=\"profile-name\">\r\n\t\t\t\t{{ username() ?? \"MENU.ANONYMOUS\" | translate }}\r\n\t\t\t</span>\r\n\r\n\t\t\t<mat-icon *ngIf=\"state.menuOpen; else iconDown\" class=\"profile-arrow spin\">keyboard_arrow_down</mat-icon>\r\n\r\n\t\t\t<ng-template #iconDown>\r\n\t\t\t\t<mat-icon class=\"profile-arrow spin\">keyboard_arrow_up</mat-icon>\r\n\t\t\t</ng-template>\r\n\t\t</ng-container>\r\n\t</button>\r\n\r\n\t<mat-menu #menu=\"matMenu\" class=\"profile-menu\">\r\n\t\t@for (item of userOptions(); track item.label) { @if (item.link) { @if (item.link.isExternal) {\r\n\t\t<a class=\"mat-mdc-menu-item\" [href]=\"item.link.href\" target=\"_blank\" (click)=\"linkCallback(item.link)\">\r\n\t\t\t<ng-container *ngTemplateOutlet=\"profileMenuItem; context: { icon: item.icon, label: item.label }\"> </ng-container>\r\n\t\t</a>\r\n\t\t} @else {\r\n\t\t<a class=\"mat-mdc-menu-item\" [routerLink]=\"item.link.href\" (click)=\"linkCallback(item.link)\">\r\n\t\t\t<ng-container *ngTemplateOutlet=\"profileMenuItem; context: { icon: item.icon, label: item.label }\"> </ng-container>\r\n\t\t</a>\r\n\t\t} } @else {\r\n\t\t<button mat-menu-item class=\"profile-option\" (click)=\"item.button?.callback()\">\r\n\t\t\t<ng-container *ngTemplateOutlet=\"profileMenuItem; context: { icon: item.icon, label: item.label }\"> </ng-container>\r\n\t\t</button>\r\n\t\t} }\r\n\t</mat-menu>\r\n</div>\r\n\r\n<ng-template #profileMenuItem let-icon=\"icon\" let-label=\"label\">\r\n\t@if (icon) { @if (!icon?.isCustom) {\r\n\t<span class=\"material-icons profile-option-icon\" [class.material-icons-outlined]=\"icon?.isOutlined\">\r\n\t\t{{ icon?.name }}\r\n\t</span>\r\n\t} @else {\r\n\t<mat-icon class=\"profile-option-icon\" [svgIcon]=\"icon?.name\"></mat-icon>\r\n\t} }\r\n\t{{ label | translate }}\r\n</ng-template>\r\n}\r\n", styles: [".spin{animation:spinArrow .3s forwards}@keyframes spinArrow{to{transform:rotate(180deg)}}a{text-decoration:none}.login-wrapper{padding:10px;margin-bottom:20px}.login-btn{width:100%}.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:24px 0;border-radius:5px;padding:8px 0}.profile-wrapper:hover .profile-icon{background-color:var(--base-70);filter:brightness(.97)}.profile-wrapper:hover:not(.collapsed),.profile-wrapper.active:not(.collapsed){background-color:var(--base-70)}.collapsed.profile-wrapper{padding:0!important;margin:32px 0!important}.profile-icon{margin-left:20px;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}.active .profile-icon{background-color:var(--base-70);filter:brightness(.97)}.collapsed .profile-icon{margin-left:0!important}.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:10px}.mobile .profile-arrow{margin-right:20px}::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}\n"] }]
     }], null, null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MenuProfileComponent, { className: "MenuProfileComponent", filePath: "lib/components/menu-profile/menu-profile.component.ts", lineNumber: 11 }); })();
 
@@ -1387,7 +1655,7 @@ class MenuLangSwitcherComponent {
             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], styles: [".spin[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_spinArrow .3s forwards}@keyframes _ngcontent-%COMP%_spinArrow{to{transform:rotate(180deg)}}span[_ngcontent-%COMP%]{font-size:14px}.lang-switcher[_ngcontent-%COMP%]{white-space:nowrap;overflow:hidden;display:flex;align-items:center;color:var(--base-30);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%}"] }); }
+        } }, dependencies: [i5.MatTooltip, i2$1.MatIcon, i5$1.MatMenu, i5$1.MatMenuItem, i5$1.MatMenuTrigger, i8.TranslatePipe], styles: [".spin[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_spinArrow .3s forwards}@keyframes _ngcontent-%COMP%_spinArrow{to{transform:rotate(180deg)}}span[_ngcontent-%COMP%]{font-size:14px}.lang-switcher[_ngcontent-%COMP%]{white-space:nowrap;overflow:hidden;display:flex;align-items:center;color:var(--base-30);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%}"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuLangSwitcherComponent, [{
         type: Component,
@@ -1436,7 +1704,8 @@ class MenuModule {
                     MenuItemLinkComponent,
                     MenuItemBtnComponent,
                     MenuProfileComponent,
-                    MenuLangSwitcherComponent
+                    MenuLangSwitcherComponent,
+                    MenuItemWithChildrenComponent
                 ],
                 exports: [
                     SideNavMenuComponent,
@@ -1468,7 +1737,8 @@ class MenuModule {
         MenuItemLinkComponent,
         MenuItemBtnComponent,
         MenuProfileComponent,
-        MenuLangSwitcherComponent], imports: [FlexLayoutModule,
+        MenuLangSwitcherComponent,
+        MenuItemWithChildrenComponent], imports: [FlexLayoutModule,
         RouterModule,
         CommonModule,
         MatTooltipModule,