@tilde-nlp/ngx-menu 6.1.8 → 6.1.10

package/esm2022/public-api.mjs

@@ -10,4 +10,5 @@ export * from './lib/components/menu-columns/menu-columns.component';
 export * from './lib/components/nav-base/nav-base.component';
 export * from './lib/components/nav-base/models';
 export * from "./lib/services";
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3Byb2plY3RzL25neC1tZW51L3NyYy9wdWJsaWMtYXBpLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztHQUVHO0FBR0gsY0FBYyxnQ0FBZ0MsQ0FBQztBQUMvQyxjQUFjLHdCQUF3QixDQUFDO0FBQ3ZDLGNBQWMsY0FBYyxDQUFDO0FBQzdCLGNBQWMsbUJBQW1CLENBQUM7QUFDbEMsY0FBYyx3REFBd0QsQ0FBQztBQUN2RSxjQUFjLHNEQUFzRCxDQUFDO0FBQ3JFLGNBQWMsOENBQThDLENBQUM7QUFDN0QsY0FBYyxrQ0FBa0MsQ0FBQztBQUNqRCxjQUFjLGdCQUFnQixDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLypcclxuICogUHVibGljIEFQSSBTdXJmYWNlIG9mIG5neC1tZW51XHJcbiAqL1xyXG5cclxuXHJcbmV4cG9ydCAqIGZyb20gJy4vbGliL2NvbXBvbmVudHMvc2lkZS1uYXYtbWVudSc7XHJcbmV4cG9ydCAqIGZyb20gJy4vbGliL2luamVjdGlvbi10b2tlbnMnO1xyXG5leHBvcnQgKiBmcm9tICcuL2xpYi9tb2RlbHMnO1xyXG5leHBvcnQgKiBmcm9tICcuL2xpYi9tZW51Lm1vZHVsZSc7XHJcbmV4cG9ydCAqIGZyb20gJy4vbGliL2NvbXBvbmVudHMvc2lkZS1uYXYtbWVudS9zaWRlLW5hdi1tZW51LmNvbXBvbmVudCc7XHJcbmV4cG9ydCAqIGZyb20gJy4vbGliL2NvbXBvbmVudHMvbWVudS1jb2x1bW5zL21lbnUtY29sdW1ucy5jb21wb25lbnQnO1xyXG5leHBvcnQgKiBmcm9tICcuL2xpYi9jb21wb25lbnRzL25hdi1iYXNlL25hdi1iYXNlLmNvbXBvbmVudCc7XHJcbmV4cG9ydCAqIGZyb20gJy4vbGliL2NvbXBvbmVudHMvbmF2LWJhc2UvbW9kZWxzJztcclxuZXhwb3J0ICogZnJvbSBcIi4vbGliL3NlcnZpY2VzXCI7XHJcbiJdfQ==
+export * from "./lib/constants";
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3Byb2plY3RzL25neC1tZW51L3NyYy9wdWJsaWMtYXBpLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztHQUVHO0FBR0gsY0FBYyxnQ0FBZ0MsQ0FBQztBQUMvQyxjQUFjLHdCQUF3QixDQUFDO0FBQ3ZDLGNBQWMsY0FBYyxDQUFDO0FBQzdCLGNBQWMsbUJBQW1CLENBQUM7QUFDbEMsY0FBYyx3REFBd0QsQ0FBQztBQUN2RSxjQUFjLHNEQUFzRCxDQUFDO0FBQ3JFLGNBQWMsOENBQThDLENBQUM7QUFDN0QsY0FBYyxrQ0FBa0MsQ0FBQztBQUNqRCxjQUFjLGdCQUFnQixDQUFDO0FBQy9CLGNBQWMsaUJBQWlCLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyIvKlxyXG4gKiBQdWJsaWMgQVBJIFN1cmZhY2Ugb2Ygbmd4LW1lbnVcclxuICovXHJcblxyXG5cclxuZXhwb3J0ICogZnJvbSAnLi9saWIvY29tcG9uZW50cy9zaWRlLW5hdi1tZW51JztcclxuZXhwb3J0ICogZnJvbSAnLi9saWIvaW5qZWN0aW9uLXRva2Vucyc7XHJcbmV4cG9ydCAqIGZyb20gJy4vbGliL21vZGVscyc7XHJcbmV4cG9ydCAqIGZyb20gJy4vbGliL21lbnUubW9kdWxlJztcclxuZXhwb3J0ICogZnJvbSAnLi9saWIvY29tcG9uZW50cy9zaWRlLW5hdi1tZW51L3NpZGUtbmF2LW1lbnUuY29tcG9uZW50JztcclxuZXhwb3J0ICogZnJvbSAnLi9saWIvY29tcG9uZW50cy9tZW51LWNvbHVtbnMvbWVudS1jb2x1bW5zLmNvbXBvbmVudCc7XHJcbmV4cG9ydCAqIGZyb20gJy4vbGliL2NvbXBvbmVudHMvbmF2LWJhc2UvbmF2LWJhc2UuY29tcG9uZW50JztcclxuZXhwb3J0ICogZnJvbSAnLi9saWIvY29tcG9uZW50cy9uYXYtYmFzZS9tb2RlbHMnO1xyXG5leHBvcnQgKiBmcm9tIFwiLi9saWIvc2VydmljZXNcIjtcclxuZXhwb3J0ICogZnJvbSBcIi4vbGliL2NvbnN0YW50c1wiO1xyXG4iXX0=

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

@@ -672,7 +672,7 @@ class MenuColumnsComponent {
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MenuColumnsComponent, { className: "MenuColumnsComponent", filePath: "lib\\components\\menu-columns\\menu-columns.component.ts", lineNumber: 16 }); })();
 
 const _forTrack0 = ($index, $item) => $item.label;
-const _c0 = (a0, a1, a2, a3) => ({ icon: a0, isIconCustom: a1, isIconOutlined: a2, label: a3 });
+const _c0 = (a0, a1) => ({ icon: a0, label: a1 });
 function SideNavMenuComponent_div_0_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 14)(1, "a", 15);
@@ -793,9 +793,9 @@ function SideNavMenuComponent_For_15_Conditional_0_Conditional_0_Template(rf, ct
     const item_r8 = i0.ɵɵnextContext(2).$implicit;
     i0.ɵɵnextContext();
     const profileMenuItem_r9 = i0.ɵɵreference(17);
-    i0.ɵɵproperty("href", item_r8.href, i0.ɵɵsanitizeUrl);
+    i0.ɵɵproperty("href", item_r8.link.href, i0.ɵɵsanitizeUrl);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", profileMenuItem_r9)("ngTemplateOutletContext", i0.ɵɵpureFunction4(3, _c0, item_r8.icon, item_r8.isIconCustom, item_r8.isIconOutlined, item_r8.label));
+    i0.ɵɵproperty("ngTemplateOutlet", profileMenuItem_r9)("ngTemplateOutletContext", i0.ɵɵpureFunction2(3, _c0, item_r8.icon, item_r8.label));
 } }
 function SideNavMenuComponent_For_15_Conditional_0_Conditional_1_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
@@ -808,15 +808,15 @@ function SideNavMenuComponent_For_15_Conditional_0_Conditional_1_Template(rf, ct
     const item_r8 = i0.ɵɵnextContext(2).$implicit;
     i0.ɵɵnextContext();
     const profileMenuItem_r9 = i0.ɵɵreference(17);
-    i0.ɵɵproperty("routerLink", item_r8.href);
+    i0.ɵɵproperty("routerLink", item_r8.link.href);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", profileMenuItem_r9)("ngTemplateOutletContext", i0.ɵɵpureFunction4(3, _c0, item_r8.icon, item_r8.isIconCustom, item_r8.isIconOutlined, item_r8.label));
+    i0.ɵɵproperty("ngTemplateOutlet", profileMenuItem_r9)("ngTemplateOutletContext", i0.ɵɵpureFunction2(3, _c0, item_r8.icon, item_r8.label));
 } }
 function SideNavMenuComponent_For_15_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, SideNavMenuComponent_For_15_Conditional_0_Conditional_0_Template, 2, 8, "a", 25)(1, SideNavMenuComponent_For_15_Conditional_0_Conditional_1_Template, 2, 8, "a", 26);
+    i0.ɵɵtemplate(0, SideNavMenuComponent_For_15_Conditional_0_Conditional_0_Template, 2, 6, "a", 25)(1, SideNavMenuComponent_For_15_Conditional_0_Conditional_1_Template, 2, 6, "a", 26);
 } if (rf & 2) {
     const item_r8 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵconditional(item_r8.openInNewTab ? 0 : 1);
+    i0.ɵɵconditional(item_r8.link.isExternal ? 0 : 1);
 } }
 function SideNavMenuComponent_For_15_Conditional_1_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
@@ -824,7 +824,7 @@ function SideNavMenuComponent_For_15_Conditional_1_ng_container_1_Template(rf, c
 function SideNavMenuComponent_For_15_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     const _r10 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 28);
-    i0.ɵɵlistener("click", function SideNavMenuComponent_For_15_Conditional_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r10); const item_r8 = i0.ɵɵnextContext().$implicit; return i0.ɵɵresetView(item_r8 == null ? null : item_r8.callback()); });
+    i0.ɵɵlistener("click", function SideNavMenuComponent_For_15_Conditional_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r10); const item_r8 = i0.ɵɵnextContext().$implicit; return i0.ɵɵresetView(item_r8.button == null ? null : item_r8.button.callback()); });
     i0.ɵɵtemplate(1, SideNavMenuComponent_For_15_Conditional_1_ng_container_1_Template, 1, 0, "ng-container", 27);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -832,48 +832,46 @@ function SideNavMenuComponent_For_15_Conditional_1_Template(rf, ctx) { if (rf &
     i0.ɵɵnextContext();
     const profileMenuItem_r9 = i0.ɵɵreference(17);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", profileMenuItem_r9)("ngTemplateOutletContext", i0.ɵɵpureFunction4(2, _c0, item_r8.icon, item_r8.isIconCustom, item_r8.isIconOutlined, item_r8.label));
+    i0.ɵɵproperty("ngTemplateOutlet", profileMenuItem_r9)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c0, item_r8.icon, item_r8.label));
 } }
 function SideNavMenuComponent_For_15_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, SideNavMenuComponent_For_15_Conditional_0_Template, 2, 1)(1, SideNavMenuComponent_For_15_Conditional_1_Template, 2, 7, "button", 24);
+    i0.ɵɵtemplate(0, SideNavMenuComponent_For_15_Conditional_0_Template, 2, 1)(1, SideNavMenuComponent_For_15_Conditional_1_Template, 2, 5, "button", 24);
 } if (rf & 2) {
     const item_r8 = ctx.$implicit;
-    i0.ɵɵconditional(item_r8.isLink ? 0 : 1);
+    i0.ɵɵconditional(item_r8.link ? 0 : 1);
 } }
 function SideNavMenuComponent_ng_template_16_Conditional_0_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 31);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r10 = i0.ɵɵnextContext(2);
-    const icon_r12 = ctx_r10.icon;
-    const isIconOutlined_r13 = ctx_r10.isIconOutlined;
-    i0.ɵɵclassProp("material-icons-outlined", isIconOutlined_r13);
+    const icon_r11 = i0.ɵɵnextContext(2).icon;
+    i0.ɵɵclassProp("material-icons-outlined", icon_r11 == null ? null : icon_r11.isOutlined);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", icon_r12, " ");
+    i0.ɵɵtextInterpolate1(" ", icon_r11 == null ? null : icon_r11.name, " ");
 } }
 function SideNavMenuComponent_ng_template_16_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "mat-icon", 30);
 } if (rf & 2) {
-    const icon_r12 = i0.ɵɵnextContext(2).icon;
-    i0.ɵɵproperty("svgIcon", icon_r12);
+    const icon_r11 = i0.ɵɵnextContext(2).icon;
+    i0.ɵɵproperty("svgIcon", icon_r11 == null ? null : icon_r11.name);
 } }
 function SideNavMenuComponent_ng_template_16_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtemplate(0, SideNavMenuComponent_ng_template_16_Conditional_0_Conditional_0_Template, 2, 3, "span", 29)(1, SideNavMenuComponent_ng_template_16_Conditional_0_Conditional_1_Template, 1, 1, "mat-icon", 30);
 } if (rf & 2) {
-    const isIconCustom_r14 = i0.ɵɵnextContext().isIconCustom;
-    i0.ɵɵconditional(!isIconCustom_r14 ? 0 : 1);
+    const icon_r11 = i0.ɵɵnextContext().icon;
+    i0.ɵɵconditional(!(icon_r11 == null ? null : icon_r11.isCustom) ? 0 : 1);
 } }
 function SideNavMenuComponent_ng_template_16_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtemplate(0, SideNavMenuComponent_ng_template_16_Conditional_0_Template, 2, 1);
     i0.ɵɵtext(1);
     i0.ɵɵpipe(2, "translate");
 } if (rf & 2) {
-    const icon_r12 = ctx.icon;
-    const label_r15 = ctx.label;
-    i0.ɵɵconditional(icon_r12 ? 0 : -1);
+    const icon_r11 = ctx.icon;
+    const label_r12 = ctx.label;
+    i0.ɵɵconditional(icon_r11 ? 0 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(2, 2, label_r15), "\n");
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(2, 2, label_r12), "\n");
 } }
 class SideNavMenuComponent extends NavBaseComponent {
     #username;
@@ -1006,7 +1004,7 @@ class SideNavMenuComponent extends NavBaseComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SideNavMenuComponent, [{
         type: Component,
-        args: [{ selector: 'lib-side-nav-menu', template: "<div *ngIf=\"isMobile\" [fxHide]=\"!collapsed\" class=\"mobile-header\">\r\n    <a [libPlausibleEvent]=\"LOGOCLICK_PLAUSIBLE_EVENT\" fxFlex=\"3.125em\" [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      (click)=\"toggleCollapse()\"\r\n    >\r\n      <mat-icon>menu</mat-icon>\r\n    </button>\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\" [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        (click)=\"toggleCollapse()\"\r\n      >\r\n        @if (isMobile) {\r\n          <mat-icon>close</mat-icon>\r\n        } @else {\r\n          <mat-icon>{{ collapsed ? 'keyboard_double_arrow_right' : 'keyboard_double_arrow_left' }}</mat-icon>\r\n        }\r\n      </button>\r\n    </div>\r\n   \r\n    <div class=\"menu-wrapper\" fxLayout=\"column\" fxFlex>\r\n      <menu-columns (toggleCollapseEvent)=\"toggleCollapse()\" [direction]=\"direction\" role=\"navigation\" fxFlex [isOpen]=\"!collapsed\"\r\n        [active]=\"active\"></menu-columns>\r\n    </div>\r\n\r\n\r\n    <button *ngIf=\"userInitials\" #state=\"matMenuTrigger\" [matMenuTriggerFor]=\"menu\" class=\"profile-wrapper\">\r\n      <div class=\"profile-icon\">\r\n        {{userInitials}}\r\n      </div>\r\n\r\n      <ng-container *ngIf=\"!collapsed\">\r\n        <span class=\"profile-name\">\r\n          {{ username }}\r\n        </span>\r\n  \r\n        <mat-icon *ngIf=\"state.menuOpen; else iconDown\" class=\"spin\">{{\"keyboard_arrow_down\"}}</mat-icon>\r\n\r\n        <ng-template #iconDown>\r\n          <mat-icon class=\"spin\">{{\"keyboard_arrow_up\" }}</mat-icon>\r\n        </ng-template>\r\n      </ng-container>\r\n    </button>\r\n\r\n    <mat-menu #menu=\"matMenu\" class=\"profile-menu\">\r\n      @for (item of menuSettings.userOptions; track item.label) {\r\n        @if (item.isLink) {\r\n          @if (item.openInNewTab) {\r\n            <a class=\"mat-mdc-menu-item\" [href]=\"item.href\" target=\"_blank\">\r\n              <ng-container\r\n                *ngTemplateOutlet=\"profileMenuItem; context: { icon: item.icon, isIconCustom: item.isIconCustom, isIconOutlined: item.isIconOutlined, label: item.label }\">\r\n              </ng-container>\r\n            </a>\r\n          } @else {\r\n            <a class=\"mat-mdc-menu-item\" [routerLink]=\"item.href\">\r\n              <ng-container\r\n                *ngTemplateOutlet=\"profileMenuItem; context: { icon: item.icon, isIconCustom: item.isIconCustom, isIconOutlined: item.isIconOutlined, label: item.label }\">\r\n              </ng-container>\r\n            </a>\r\n          }\r\n        } @else {\r\n          <button\r\n            mat-menu-item\r\n            class=\"profile-option\"\r\n            (click)=\"item?.callback()\"\r\n        >\r\n          <ng-container\r\n            *ngTemplateOutlet=\"profileMenuItem; context: { icon: item.icon, isIconCustom: item.isIconCustom, isIconOutlined: item.isIconOutlined, label: item.label }\">\r\n          </ng-container>\r\n        </button>\r\n        }\r\n      }\r\n    </mat-menu>\r\n  </div>\r\n\r\n<ng-template #profileMenuItem let-icon=\"icon\" let-isIconCustom=\"isIconCustom\" let-isIconOutlined=\"isIconOutlined\" let-label=\"label\">\r\n  @if (icon) {\r\n    @if (!isIconCustom) {\r\n      <span class=\"material-icons profile-option-icon\" [class.material-icons-outlined]=\"isIconOutlined\">\r\n        {{icon}}\r\n      </span>\r\n    } @else {\r\n      <mat-icon class=\"profile-option-icon\" [svgIcon]=\"icon\"></mat-icon>\r\n    }\r\n  }\r\n  {{ label | translate }}\r\n</ng-template>", styles: ["a{text-decoration:none}.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:absolute;min-width:100vw;min-height:100vh;z-index:1000}.mobile .profile-wrapper{position:relative}.mobile .profile-wrapper mat-icon{position:absolute!important;right:0}.menu-product-name{white-space:nowrap;margin-left:12px;font-weight:600;color:var(--primary-accent-darker)}.menu-container{max-height:100vh;white-space:nowrap;height:100%;transition:width .2s ease;min-height:100vh;overflow:auto;background:var(--base-100);border-right:2px solid var(--base-95)}.menu-container .menu-container-header{margin:24px 0;max-height:40px}.menu-container.collapsed .menu-container-header{margin:24px 0 32px!important}.menu-container .content:not(.collapsed){overflow-x:hidden;padding:0 12px}.menu-container .content:not(.collapsed) .menu-logo{margin-left:16px;max-width:100%}.menu-container .divider{width:100%}.menu-container .profile-wrapper{background:none;color:var(--base-30);display:flex;align-items:center;justify-content:start;margin:32px 16px}.menu-container .profile-icon{display:flex;justify-content:center;align-items:center;min-width:40px;height:40px;border-radius:100%;color:var(--base-0);background-color:var(--base-70);font-size:16px;font-weight:600}.menu-container .profile-name{max-width:145px;overflow:hidden;margin-left:12px}.profile-option-icon{vertical-align:middle;margin:0 5px 5px 0}:host ::ng-deep .collapsed .profile-wrapper{left:8px!important}:host ::ng-deep .menu-item{display:flex;padding:16px!important;border-radius:4px!important}:host ::ng-deep .child-list .menu-item{padding:8px 46px!important}:host ::ng-deep .collapsed .menu-item{padding:0!important;width:40px;height:40px;border-radius:50%!important}:host ::ng-deep .active-menu-item{background-color:var(--base-95)!important}:host ::ng-deep .menu-item-title{margin-left:12px}tld-menu-icon{margin-right:10px}.spin{animation:spinArrow .3s forwards}:host::ng-deep button.collapse-btn .mat-mdc-button-persistent-ripple,:host::ng-deep button.toggler .mat-mdc-button-persistent-ripple{display:none}:host ::ng-deep .mobile .child-list .menu-item{padding:8px 54px!important}::ng-deep .cdk-overlay-container .profile-menu{margin:10px 0!important}::ng-deep .mat-mdc-menu-item .mat-icon{margin-right:5px!important}::ng-deep .collapsed .profile-wrapper{justify-content:center!important}::ng-deep .profile-menu a{font-weight:400!important;display:flex;align-items:center;gap:5px}::ng-deep .profile-menu a:hover{color:var(--mat-menu-item-label-text-color, var(--mat-app-on-surface))!important;text-decoration:inherit}@keyframes spinArrow{to{transform:rotate(180deg)}}\n"] }]
+        args: [{ selector: 'lib-side-nav-menu', template: "<div *ngIf=\"isMobile\" [fxHide]=\"!collapsed\" class=\"mobile-header\">\r\n    <a [libPlausibleEvent]=\"LOGOCLICK_PLAUSIBLE_EVENT\" fxFlex=\"3.125em\" [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      (click)=\"toggleCollapse()\"\r\n    >\r\n      <mat-icon>menu</mat-icon>\r\n    </button>\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\" [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        (click)=\"toggleCollapse()\"\r\n      >\r\n        @if (isMobile) {\r\n          <mat-icon>close</mat-icon>\r\n        } @else {\r\n          <mat-icon>{{ collapsed ? 'keyboard_double_arrow_right' : 'keyboard_double_arrow_left' }}</mat-icon>\r\n        }\r\n      </button>\r\n    </div>\r\n   \r\n    <div class=\"menu-wrapper\" fxLayout=\"column\" fxFlex>\r\n      <menu-columns (toggleCollapseEvent)=\"toggleCollapse()\" [direction]=\"direction\" role=\"navigation\" fxFlex [isOpen]=\"!collapsed\"\r\n        [active]=\"active\"></menu-columns>\r\n    </div>\r\n\r\n\r\n    <button *ngIf=\"userInitials\" #state=\"matMenuTrigger\" [matMenuTriggerFor]=\"menu\" class=\"profile-wrapper\">\r\n      <div class=\"profile-icon\">\r\n        {{userInitials}}\r\n      </div>\r\n\r\n      <ng-container *ngIf=\"!collapsed\">\r\n        <span class=\"profile-name\">\r\n          {{ username }}\r\n        </span>\r\n  \r\n        <mat-icon *ngIf=\"state.menuOpen; else iconDown\" class=\"spin\">{{\"keyboard_arrow_down\"}}</mat-icon>\r\n\r\n        <ng-template #iconDown>\r\n          <mat-icon class=\"spin\">{{\"keyboard_arrow_up\" }}</mat-icon>\r\n        </ng-template>\r\n      </ng-container>\r\n    </button>\r\n\r\n    <mat-menu #menu=\"matMenu\" class=\"profile-menu\">\r\n      @for (item of menuSettings.userOptions; track item.label) {\r\n        @if (item.link) {\r\n          @if (item.link.isExternal) {\r\n            <a class=\"mat-mdc-menu-item\" [href]=\"item.link.href\" target=\"_blank\">\r\n              <ng-container\r\n                *ngTemplateOutlet=\"profileMenuItem; context: { icon: item.icon, label: item.label }\">\r\n              </ng-container>\r\n            </a>\r\n          } @else {\r\n            <a class=\"mat-mdc-menu-item\" [routerLink]=\"item.link.href\">\r\n              <ng-container\r\n                *ngTemplateOutlet=\"profileMenuItem; context: { icon: item.icon, label: item.label }\">\r\n              </ng-container>\r\n            </a>\r\n          }\r\n        } @else {\r\n          <button\r\n            mat-menu-item\r\n            class=\"profile-option\"\r\n            (click)=\"item.button?.callback()\"\r\n        >\r\n          <ng-container\r\n            *ngTemplateOutlet=\"profileMenuItem; context: { icon: item.icon, label: item.label }\">\r\n          </ng-container>\r\n        </button>\r\n        }\r\n      }\r\n    </mat-menu>\r\n  </div>\r\n\r\n<ng-template #profileMenuItem let-icon=\"icon\" let-label=\"label\">\r\n  @if (icon) {\r\n    @if (!icon?.isCustom) {\r\n      <span class=\"material-icons profile-option-icon\" [class.material-icons-outlined]=\"icon?.isOutlined\">\r\n        {{icon?.name}}\r\n      </span>\r\n    } @else {\r\n      <mat-icon class=\"profile-option-icon\" [svgIcon]=\"icon?.name\"></mat-icon>\r\n    }\r\n  }\r\n  {{ label | translate }}\r\n</ng-template>", styles: ["a{text-decoration:none}.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:absolute;min-width:100vw;min-height:100vh;z-index:1000}.mobile .profile-wrapper{position:relative}.mobile .profile-wrapper mat-icon{position:absolute!important;right:0}.menu-product-name{white-space:nowrap;margin-left:12px;font-weight:600;color:var(--primary-accent-darker)}.menu-container{max-height:100vh;white-space:nowrap;height:100%;transition:width .2s ease;min-height:100vh;overflow:auto;background:var(--base-100);border-right:2px solid var(--base-95)}.menu-container .menu-container-header{margin:24px 0;max-height:40px}.menu-container.collapsed .menu-container-header{margin:24px 0 32px!important}.menu-container .content:not(.collapsed){overflow-x:hidden;padding:0 12px}.menu-container .content:not(.collapsed) .menu-logo{margin-left:16px;max-width:100%}.menu-container .divider{width:100%}.menu-container .profile-wrapper{background:none;color:var(--base-30);display:flex;align-items:center;justify-content:start;margin:32px 16px}.menu-container .profile-icon{display:flex;justify-content:center;align-items:center;min-width:40px;height:40px;border-radius:100%;color:var(--base-0);background-color:var(--base-70);font-size:16px;font-weight:600}.menu-container .profile-name{max-width:145px;overflow:hidden;margin-left:12px}.profile-option-icon{vertical-align:middle;margin:0 5px 5px 0}:host ::ng-deep .collapsed .profile-wrapper{left:8px!important}:host ::ng-deep .menu-item{display:flex;padding:16px!important;border-radius:4px!important}:host ::ng-deep .child-list .menu-item{padding:8px 46px!important}:host ::ng-deep .collapsed .menu-item{padding:0!important;width:40px;height:40px;border-radius:50%!important}:host ::ng-deep .active-menu-item{background-color:var(--base-95)!important}:host ::ng-deep .menu-item-title{margin-left:12px}tld-menu-icon{margin-right:10px}.spin{animation:spinArrow .3s forwards}:host::ng-deep button.collapse-btn .mat-mdc-button-persistent-ripple,:host::ng-deep button.toggler .mat-mdc-button-persistent-ripple{display:none}:host ::ng-deep .mobile .child-list .menu-item{padding:8px 54px!important}::ng-deep .cdk-overlay-container .profile-menu{margin:10px 0!important}::ng-deep .mat-mdc-menu-item .mat-icon{margin-right:5px!important}::ng-deep .collapsed .profile-wrapper{justify-content:center!important}::ng-deep .profile-menu a{font-weight:400!important;display:flex;align-items:center;gap:5px}::ng-deep .profile-menu a:hover{color:var(--mat-menu-item-label-text-color, var(--mat-app-on-surface))!important;text-decoration:inherit}@keyframes spinArrow{to{transform:rotate(180deg)}}\n"] }]
     }], () => [{ type: i1.StrapiLinkService }, { type: i2.DOMService }, { type: MenuItemsService }, { type: undefined, decorators: [{
                 type: Optional
             }, {
@@ -1094,6 +1092,42 @@ class MenuModule {
         PlausibleModule], exports: [SideNavMenuComponent,
         MenuColumnsComponent] }); })();
 
+/**
+ * Prefefined user menu options, so that same style of items are used across all products. Use this by passing necessary configuration.
+ */
+const USER_MENU_OPTIONS = {
+    subscription: (href) => ({
+        icon: { name: "credit_card" },
+        label: 'menu.subscription',
+        link: { href: href }
+    }),
+    termsOfUse: (href) => ({
+        icon: { name: "text_snippet" },
+        label: 'menu.termsOfUse',
+        link: { href, isExternal: true }
+    }),
+    privacy: (href) => ({
+        icon: { name: "gpp_maybe" },
+        label: 'menu.privacy',
+        link: { href, isExternal: true },
+    }),
+    help: (href) => ({
+        label: 'menu.helpCenter',
+        icon: { name: `help` },
+        link: { href, isExternal: true }
+    }),
+    contactUs: (href) => ({
+        label: 'menu.contactUs',
+        icon: { name: `mail` },
+        link: { href, isExternal: true }
+    }),
+    logout: (callback) => ({
+        icon: { name: "logout" },
+        label: 'menu.logout',
+        button: { callback: () => callback() }
+    })
+};
+
 /*
  * Public API Surface of ngx-menu
  */
@@ -1102,5 +1136,5 @@ class MenuModule {
  * Generated bundle index. Do not edit.
  */
 
-export { MENU_ICON_STRAPI_EXTENSION, MENU_SHARED_CONFIG, MenuColumnsComponent, MenuItemsService, MenuLayoutDirection, MenuModule, NavBaseComponent, SideNavMenuComponent, StarpiMenuService, StrapiDataLocation };
+export { MENU_ICON_STRAPI_EXTENSION, MENU_SHARED_CONFIG, MenuColumnsComponent, MenuItemsService, MenuLayoutDirection, MenuModule, NavBaseComponent, SideNavMenuComponent, StarpiMenuService, StrapiDataLocation, USER_MENU_OPTIONS };
 //# sourceMappingURL=tilde-nlp-ngx-menu.mjs.map