@tilde-nlp/ngx-menu 6.1.36 → 6.1.38
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/components/menu-item-btn/menu-item-btn.component.mjs +25 -22
- package/esm2022/lib/components/side-nav-menu/models/side-nav-settings.model.mjs +1 -1
- package/esm2022/lib/components/side-nav-menu/side-nav-menu.component.mjs +108 -100
- package/esm2022/lib/constants/user-menu-options.const.mjs +23 -19
- package/fesm2022/tilde-nlp-ngx-menu.mjs +152 -137
- package/fesm2022/tilde-nlp-ngx-menu.mjs.map +1 -1
- package/lib/components/side-nav-menu/models/side-nav-settings.model.d.ts +1 -0
- package/lib/constants/user-menu-options.const.d.ts +6 -3
- package/package.json +1 -1
|
@@ -412,10 +412,10 @@ class MenuItemLinkComponent {
|
|
|
412
412
|
}] }); })();
|
|
413
413
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MenuItemLinkComponent, { className: "MenuItemLinkComponent", filePath: "lib\\components\\menu-item-link\\menu-item-link.component.ts", lineNumber: 10 }); })();
|
|
414
414
|
|
|
415
|
-
function
|
|
415
|
+
function MenuItemBtnComponent_ng_container_4_button_8_Template(rf, ctx) { if (rf & 1) {
|
|
416
416
|
const _r2 = i0.ɵɵgetCurrentView();
|
|
417
|
-
i0.ɵɵelementStart(0, "button",
|
|
418
|
-
i0.ɵɵlistener("click", function
|
|
417
|
+
i0.ɵɵelementStart(0, "button", 7);
|
|
418
|
+
i0.ɵɵlistener("click", function MenuItemBtnComponent_ng_container_4_button_8_Template_button_click_0_listener() { const item_r3 = i0.ɵɵrestoreView(_r2).$implicit; return i0.ɵɵresetView(item_r3.onOptionClick()); });
|
|
419
419
|
i0.ɵɵtext(1);
|
|
420
420
|
i0.ɵɵpipe(2, "translate");
|
|
421
421
|
i0.ɵɵelementEnd();
|
|
@@ -427,33 +427,36 @@ function MenuItemBtnComponent_ng_container_4_button_6_Template(rf, ctx) { if (rf
|
|
|
427
427
|
function MenuItemBtnComponent_ng_container_4_Template(rf, ctx) { if (rf & 1) {
|
|
428
428
|
const _r1 = i0.ɵɵgetCurrentView();
|
|
429
429
|
i0.ɵɵelementContainerStart(0);
|
|
430
|
-
i0.ɵɵelementStart(1, "button",
|
|
431
|
-
i0.ɵɵlistener("click", function
|
|
432
|
-
i0.ɵɵelementStart(
|
|
433
|
-
i0.ɵɵtext(
|
|
430
|
+
i0.ɵɵelementStart(1, "div")(2, "button", 5, 0);
|
|
431
|
+
i0.ɵɵlistener("click", function MenuItemBtnComponent_ng_container_4_Template_button_click_2_listener($event) { i0.ɵɵrestoreView(_r1); $event.preventDefault(); return i0.ɵɵresetView($event.stopImmediatePropagation()); });
|
|
432
|
+
i0.ɵɵelementStart(4, "mat-icon");
|
|
433
|
+
i0.ɵɵtext(5, "more_vert");
|
|
434
|
+
i0.ɵɵelementEnd()();
|
|
435
|
+
i0.ɵɵelementStart(6, "mat-menu", null, 1);
|
|
436
|
+
i0.ɵɵtemplate(8, MenuItemBtnComponent_ng_container_4_button_8_Template, 3, 3, "button", 6);
|
|
434
437
|
i0.ɵɵelementEnd()();
|
|
435
|
-
i0.ɵɵelementStart(4, "mat-menu", null, 0);
|
|
436
|
-
i0.ɵɵtemplate(6, MenuItemBtnComponent_ng_container_4_button_6_Template, 3, 3, "button", 5);
|
|
437
|
-
i0.ɵɵelementEnd();
|
|
438
438
|
i0.ɵɵelementContainerEnd();
|
|
439
439
|
} if (rf & 2) {
|
|
440
|
-
const
|
|
441
|
-
const
|
|
440
|
+
const menuTrigger_r4 = i0.ɵɵreference(3);
|
|
441
|
+
const menu_r5 = i0.ɵɵreference(7);
|
|
442
|
+
const ctx_r5 = i0.ɵɵnextContext();
|
|
442
443
|
i0.ɵɵadvance();
|
|
443
|
-
i0.ɵɵ
|
|
444
|
-
i0.ɵɵadvance(
|
|
445
|
-
i0.ɵɵproperty("
|
|
444
|
+
i0.ɵɵclassProp("open", menuTrigger_r4 == null ? null : menuTrigger_r4.menuOpen);
|
|
445
|
+
i0.ɵɵadvance();
|
|
446
|
+
i0.ɵɵproperty("matMenuTriggerFor", menu_r5);
|
|
447
|
+
i0.ɵɵadvance(6);
|
|
448
|
+
i0.ɵɵproperty("ngForOf", ctx_r5.menuItem.subMenu);
|
|
446
449
|
} }
|
|
447
450
|
class MenuItemBtnComponent {
|
|
448
451
|
static { this.ɵfac = function MenuItemBtnComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MenuItemBtnComponent)(); }; }
|
|
449
|
-
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MenuItemBtnComponent, selectors: [["lib-menu-item-btn"]], inputs: { direction: "direction", activeItem: "activeItem", menuItem: "menuItem" }, decls: 5, vars: 8, consts: [["menu", "matMenu"], ["fxLayoutAlign", "space-between start", 1, "menu-item", "w-full", "flex", "justify-center", "items-center", 3, "click", "ngClass.lt-md"], [1, "btn-label"], [4, "ngIf"], ["mat-icon-button", "", 3, "click", "matMenuTriggerFor"], ["mat-menu-item", "", 3, "click", 4, "ngFor", "ngForOf"], ["mat-menu-item", "", 3, "click"]], template: function MenuItemBtnComponent_Template(rf, ctx) { if (rf & 1) {
|
|
450
|
-
i0.ɵɵelementStart(0, "button",
|
|
452
|
+
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MenuItemBtnComponent, selectors: [["lib-menu-item-btn"]], inputs: { direction: "direction", activeItem: "activeItem", menuItem: "menuItem" }, decls: 5, vars: 8, consts: [["menuTrigger", "matMenuTrigger"], ["menu", "matMenu"], ["fxLayoutAlign", "space-between start", 1, "menu-item", "w-full", "flex", "justify-center", "items-center", 3, "click", "ngClass.lt-md"], [1, "btn-label"], [4, "ngIf"], ["mat-icon-button", "", 1, "sub-menu-btn", 3, "click", "matMenuTriggerFor"], ["mat-menu-item", "", 3, "click", 4, "ngFor", "ngForOf"], ["mat-menu-item", "", 3, "click"]], template: function MenuItemBtnComponent_Template(rf, ctx) { if (rf & 1) {
|
|
453
|
+
i0.ɵɵelementStart(0, "button", 2);
|
|
451
454
|
i0.ɵɵlistener("click", function MenuItemBtnComponent_Template_button_click_0_listener() { return ctx.menuItem.clickAction && ctx.menuItem.clickAction(); });
|
|
452
|
-
i0.ɵɵelementStart(1, "span",
|
|
455
|
+
i0.ɵɵelementStart(1, "span", 3);
|
|
453
456
|
i0.ɵɵtext(2);
|
|
454
457
|
i0.ɵɵpipe(3, "translate");
|
|
455
458
|
i0.ɵɵelementEnd();
|
|
456
|
-
i0.ɵɵtemplate(4, MenuItemBtnComponent_ng_container_4_Template,
|
|
459
|
+
i0.ɵɵtemplate(4, MenuItemBtnComponent_ng_container_4_Template, 9, 4, "ng-container", 4);
|
|
457
460
|
i0.ɵɵelementEnd();
|
|
458
461
|
} if (rf & 2) {
|
|
459
462
|
i0.ɵɵclassProp("active-menu-item", ctx.menuItem.isItemActive ? ctx.menuItem.isItemActive(ctx.menuItem.customId) : ctx.menuItem === ctx.activeItem);
|
|
@@ -463,11 +466,11 @@ class MenuItemBtnComponent {
|
|
|
463
466
|
i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(3, 6, ctx.menuItem.title), " ");
|
|
464
467
|
i0.ɵɵadvance(2);
|
|
465
468
|
i0.ɵɵproperty("ngIf", ctx.menuItem.subMenu == null ? null : ctx.menuItem.subMenu.length);
|
|
466
|
-
} }, dependencies: [i1$2.DefaultLayoutAlignDirective, i2$2.DefaultClassDirective, i4.NgForOf, i4.NgIf, i2$1.MatIcon, i7.MatIconButton, i6.MatMenu, i6.MatMenuItem, i6.MatMenuTrigger, i8.TranslatePipe], styles: ["[_nghost-%COMP%]{width:100%}.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}"] }); }
|
|
469
|
+
} }, dependencies: [i1$2.DefaultLayoutAlignDirective, i2$2.DefaultClassDirective, i4.NgForOf, i4.NgIf, i2$1.MatIcon, i7.MatIconButton, i6.MatMenu, i6.MatMenuItem, i6.MatMenuTrigger, i8.TranslatePipe], styles: ["[_nghost-%COMP%]{width:100%}.menu-item[_ngcontent-%COMP%]:not(:hover) .sub-menu-btn[_ngcontent-%COMP%]{display:none}.menu-item[_ngcontent-%COMP%]:has(.open){background-color:var(--base-95)!important}.open[_ngcontent-%COMP%] .sub-menu-btn[_ngcontent-%COMP%]{display:block!important}.mobile[_ngcontent-%COMP%] .btn-label[_ngcontent-%COMP%]{margin-left:5px}.btn-label[_ngcontent-%COMP%]{font-size:14px;font-weight:500;line-height:20px;letter-spacing:.1px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}"] }); }
|
|
467
470
|
}
|
|
468
471
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuItemBtnComponent, [{
|
|
469
472
|
type: Component,
|
|
470
|
-
args: [{ selector: 'lib-menu-item-btn', standalone: false, template: "<button\r\n [ngClass.lt-md]=\"'mobile'\"\r\n [attr.id]=\"menuItem.customId\"\r\n class=\"menu-item w-full flex justify-center items-center\"\r\n fxLayoutAlign=\"space-between start\"\r\n [class.active-menu-item]=\"menuItem.isItemActive ? menuItem.isItemActive(menuItem.customId) : menuItem === activeItem\"\r\n (click)=\"menuItem.clickAction && menuItem.clickAction()\"\r\n>\r\n <span class=\"btn-label\">\r\n {{ menuItem.title | translate }}\r\n </span>\r\n <ng-container *ngIf=\"menuItem.subMenu?.length\">\r\n <button\r\n
|
|
473
|
+
args: [{ selector: 'lib-menu-item-btn', standalone: false, template: "<button\r\n [ngClass.lt-md]=\"'mobile'\"\r\n [attr.id]=\"menuItem.customId\"\r\n class=\"menu-item w-full flex justify-center items-center\"\r\n fxLayoutAlign=\"space-between start\"\r\n [class.active-menu-item]=\"menuItem.isItemActive ? menuItem.isItemActive(menuItem.customId) : menuItem === activeItem\"\r\n (click)=\"menuItem.clickAction && menuItem.clickAction()\"\r\n>\r\n <span class=\"btn-label\">\r\n {{ menuItem.title | translate }}\r\n </span>\r\n <ng-container *ngIf=\"menuItem.subMenu?.length\">\r\n <div [class.open]=\"menuTrigger?.menuOpen\">\r\n <button\r\n class=\"sub-menu-btn\"\r\n mat-icon-button\r\n [matMenuTriggerFor]=\"menu\"\r\n #menuTrigger=\"matMenuTrigger\"\r\n (click)=\"$event.preventDefault(); $event.stopImmediatePropagation()\"\r\n >\r\n <mat-icon>more_vert</mat-icon>\r\n </button>\r\n <mat-menu #menu=\"matMenu\">\r\n <button\r\n *ngFor=\"let item of menuItem.subMenu\"\r\n mat-menu-item\r\n (click)=\"item.onOptionClick()\"\r\n >\r\n {{ item.title | translate }}\r\n </button>\r\n </mat-menu>\r\n </div>\r\n </ng-container>\r\n</button>\r\n", styles: [":host{width:100%}.menu-item:not(:hover) .sub-menu-btn{display:none}.menu-item:has(.open){background-color:var(--base-95)!important}.open .sub-menu-btn{display:block!important}.mobile .btn-label{margin-left:5px}.btn-label{font-size:14px;font-weight:500;line-height:20px;letter-spacing:.1px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
|
|
471
474
|
}], null, { direction: [{
|
|
472
475
|
type: Input
|
|
473
476
|
}], activeItem: [{
|
|
@@ -854,155 +857,153 @@ function SideNavMenuComponent_a_14_Template(rf, ctx) { if (rf & 1) {
|
|
|
854
857
|
i0.ɵɵelementEnd()();
|
|
855
858
|
} if (rf & 2) {
|
|
856
859
|
const ctx_r2 = i0.ɵɵnextContext();
|
|
860
|
+
i0.ɵɵclassProp("no-click", ctx_r2.menuSettings == null ? null : ctx_r2.menuSettings.disableLogoNavigation);
|
|
857
861
|
i0.ɵɵproperty("libPlausibleEvent", ctx_r2.LOGOCLICK_PLAUSIBLE_EVENT)("href", ctx_r2.baseUrl, i0.ɵɵsanitizeUrl);
|
|
858
|
-
i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(1,
|
|
862
|
+
i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(1, 7, "MENU.ARIA_LABELS.LOGO"));
|
|
859
863
|
i0.ɵɵadvance(2);
|
|
860
864
|
i0.ɵɵproperty("src", ctx_r2.menuLogoImage, i0.ɵɵsanitizeUrl);
|
|
861
865
|
i0.ɵɵadvance(2);
|
|
862
866
|
i0.ɵɵtextInterpolate1(" ", ctx_r2.productName, " ");
|
|
863
867
|
} }
|
|
864
|
-
function
|
|
865
|
-
i0.ɵɵ
|
|
868
|
+
function SideNavMenuComponent_Conditional_28_Template(rf, ctx) { if (rf & 1) {
|
|
869
|
+
i0.ɵɵtext(0);
|
|
870
|
+
} if (rf & 2) {
|
|
871
|
+
const ctx_r2 = i0.ɵɵnextContext();
|
|
872
|
+
i0.ɵɵtextInterpolate1(" ", ctx_r2.userInitials, " ");
|
|
873
|
+
} }
|
|
874
|
+
function SideNavMenuComponent_Conditional_29_Template(rf, ctx) { if (rf & 1) {
|
|
875
|
+
i0.ɵɵelementStart(0, "mat-icon");
|
|
876
|
+
i0.ɵɵtext(1, "person");
|
|
877
|
+
i0.ɵɵelementEnd();
|
|
878
|
+
} }
|
|
879
|
+
function SideNavMenuComponent_ng_container_30_mat_icon_4_Template(rf, ctx) { if (rf & 1) {
|
|
880
|
+
i0.ɵɵelementStart(0, "mat-icon", 25);
|
|
866
881
|
i0.ɵɵtext(1);
|
|
867
882
|
i0.ɵɵelementEnd();
|
|
868
883
|
} if (rf & 2) {
|
|
869
884
|
i0.ɵɵadvance();
|
|
870
885
|
i0.ɵɵtextInterpolate("keyboard_arrow_down");
|
|
871
886
|
} }
|
|
872
|
-
function
|
|
873
|
-
i0.ɵɵelementStart(0, "mat-icon",
|
|
887
|
+
function SideNavMenuComponent_ng_container_30_ng_template_5_Template(rf, ctx) { if (rf & 1) {
|
|
888
|
+
i0.ɵɵelementStart(0, "mat-icon", 25);
|
|
874
889
|
i0.ɵɵtext(1);
|
|
875
890
|
i0.ɵɵelementEnd();
|
|
876
891
|
} if (rf & 2) {
|
|
877
892
|
i0.ɵɵadvance();
|
|
878
893
|
i0.ɵɵtextInterpolate("keyboard_arrow_up");
|
|
879
894
|
} }
|
|
880
|
-
function
|
|
895
|
+
function SideNavMenuComponent_ng_container_30_Template(rf, ctx) { if (rf & 1) {
|
|
881
896
|
i0.ɵɵelementContainerStart(0);
|
|
882
|
-
i0.ɵɵelementStart(1, "span",
|
|
897
|
+
i0.ɵɵelementStart(1, "span", 23);
|
|
883
898
|
i0.ɵɵtext(2);
|
|
899
|
+
i0.ɵɵpipe(3, "translate");
|
|
884
900
|
i0.ɵɵelementEnd();
|
|
885
|
-
i0.ɵɵtemplate(
|
|
901
|
+
i0.ɵɵtemplate(4, SideNavMenuComponent_ng_container_30_mat_icon_4_Template, 2, 1, "mat-icon", 24)(5, SideNavMenuComponent_ng_container_30_ng_template_5_Template, 2, 1, "ng-template", null, 3, i0.ɵɵtemplateRefExtractor);
|
|
886
902
|
i0.ɵɵelementContainerEnd();
|
|
887
903
|
} if (rf & 2) {
|
|
888
|
-
|
|
889
|
-
i0.ɵɵ
|
|
890
|
-
const state_r5 = i0.ɵɵreference(1);
|
|
904
|
+
let tmp_5_0;
|
|
905
|
+
const iconDown_r4 = i0.ɵɵreference(6);
|
|
891
906
|
const ctx_r2 = i0.ɵɵnextContext();
|
|
907
|
+
const state_r5 = i0.ɵɵreference(26);
|
|
908
|
+
i0.ɵɵadvance(2);
|
|
909
|
+
i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(3, 3, (tmp_5_0 = ctx_r2.username) !== null && tmp_5_0 !== undefined ? tmp_5_0 : "MENU.ANONYMOUS"), " ");
|
|
892
910
|
i0.ɵɵadvance(2);
|
|
893
|
-
i0.ɵɵtextInterpolate1(" ", ctx_r2.username, " ");
|
|
894
|
-
i0.ɵɵadvance();
|
|
895
911
|
i0.ɵɵproperty("ngIf", state_r5.menuOpen)("ngIfElse", iconDown_r4);
|
|
896
912
|
} }
|
|
897
|
-
function
|
|
898
|
-
i0.ɵɵelementStart(0, "button", 21, 2)(2, "div", 22);
|
|
899
|
-
i0.ɵɵtext(3);
|
|
900
|
-
i0.ɵɵelementEnd();
|
|
901
|
-
i0.ɵɵtemplate(4, SideNavMenuComponent_button_25_ng_container_4_Template, 6, 3, "ng-container", 23);
|
|
902
|
-
i0.ɵɵelementEnd();
|
|
903
|
-
} if (rf & 2) {
|
|
904
|
-
const ctx_r2 = i0.ɵɵnextContext();
|
|
905
|
-
const menu_r6 = i0.ɵɵreference(27);
|
|
906
|
-
i0.ɵɵproperty("matMenuTriggerFor", menu_r6);
|
|
907
|
-
i0.ɵɵadvance(3);
|
|
908
|
-
i0.ɵɵtextInterpolate1(" ", ctx_r2.userInitials, " ");
|
|
909
|
-
i0.ɵɵadvance();
|
|
910
|
-
i0.ɵɵproperty("ngIf", !ctx_r2.collapsed);
|
|
911
|
-
} }
|
|
912
|
-
function SideNavMenuComponent_For_29_Conditional_0_Conditional_0_ng_container_1_Template(rf, ctx) { if (rf & 1) {
|
|
913
|
+
function SideNavMenuComponent_For_34_Conditional_0_Conditional_0_ng_container_1_Template(rf, ctx) { if (rf & 1) {
|
|
913
914
|
i0.ɵɵelementContainer(0);
|
|
914
915
|
} }
|
|
915
|
-
function
|
|
916
|
-
const
|
|
917
|
-
i0.ɵɵelementStart(0, "a",
|
|
918
|
-
i0.ɵɵlistener("click", function
|
|
919
|
-
i0.ɵɵtemplate(1,
|
|
916
|
+
function SideNavMenuComponent_For_34_Conditional_0_Conditional_0_Template(rf, ctx) { if (rf & 1) {
|
|
917
|
+
const _r6 = i0.ɵɵgetCurrentView();
|
|
918
|
+
i0.ɵɵelementStart(0, "a", 29);
|
|
919
|
+
i0.ɵɵlistener("click", function SideNavMenuComponent_For_34_Conditional_0_Conditional_0_Template_a_click_0_listener() { i0.ɵɵrestoreView(_r6); const item_r7 = i0.ɵɵnextContext(2).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.linkCallback(item_r7.link)); });
|
|
920
|
+
i0.ɵɵtemplate(1, SideNavMenuComponent_For_34_Conditional_0_Conditional_0_ng_container_1_Template, 1, 0, "ng-container", 30);
|
|
920
921
|
i0.ɵɵelementEnd();
|
|
921
922
|
} if (rf & 2) {
|
|
922
|
-
const
|
|
923
|
+
const item_r7 = i0.ɵɵnextContext(2).$implicit;
|
|
923
924
|
i0.ɵɵnextContext();
|
|
924
|
-
const
|
|
925
|
-
i0.ɵɵproperty("href",
|
|
925
|
+
const profileMenuItem_r8 = i0.ɵɵreference(36);
|
|
926
|
+
i0.ɵɵproperty("href", item_r7.link.href, i0.ɵɵsanitizeUrl);
|
|
926
927
|
i0.ɵɵadvance();
|
|
927
|
-
i0.ɵɵproperty("ngTemplateOutlet",
|
|
928
|
+
i0.ɵɵproperty("ngTemplateOutlet", profileMenuItem_r8)("ngTemplateOutletContext", i0.ɵɵpureFunction2(3, _c0, item_r7.icon, item_r7.label));
|
|
928
929
|
} }
|
|
929
|
-
function
|
|
930
|
+
function SideNavMenuComponent_For_34_Conditional_0_Conditional_1_ng_container_1_Template(rf, ctx) { if (rf & 1) {
|
|
930
931
|
i0.ɵɵelementContainer(0);
|
|
931
932
|
} }
|
|
932
|
-
function
|
|
933
|
-
const
|
|
934
|
-
i0.ɵɵelementStart(0, "a",
|
|
935
|
-
i0.ɵɵlistener("click", function
|
|
936
|
-
i0.ɵɵtemplate(1,
|
|
933
|
+
function SideNavMenuComponent_For_34_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
934
|
+
const _r9 = i0.ɵɵgetCurrentView();
|
|
935
|
+
i0.ɵɵelementStart(0, "a", 31);
|
|
936
|
+
i0.ɵɵlistener("click", function SideNavMenuComponent_For_34_Conditional_0_Conditional_1_Template_a_click_0_listener() { i0.ɵɵrestoreView(_r9); const item_r7 = i0.ɵɵnextContext(2).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.linkCallback(item_r7.link)); });
|
|
937
|
+
i0.ɵɵtemplate(1, SideNavMenuComponent_For_34_Conditional_0_Conditional_1_ng_container_1_Template, 1, 0, "ng-container", 30);
|
|
937
938
|
i0.ɵɵelementEnd();
|
|
938
939
|
} if (rf & 2) {
|
|
939
|
-
const
|
|
940
|
+
const item_r7 = i0.ɵɵnextContext(2).$implicit;
|
|
940
941
|
i0.ɵɵnextContext();
|
|
941
|
-
const
|
|
942
|
-
i0.ɵɵproperty("routerLink",
|
|
942
|
+
const profileMenuItem_r8 = i0.ɵɵreference(36);
|
|
943
|
+
i0.ɵɵproperty("routerLink", item_r7.link.href);
|
|
943
944
|
i0.ɵɵadvance();
|
|
944
|
-
i0.ɵɵproperty("ngTemplateOutlet",
|
|
945
|
+
i0.ɵɵproperty("ngTemplateOutlet", profileMenuItem_r8)("ngTemplateOutletContext", i0.ɵɵpureFunction2(3, _c0, item_r7.icon, item_r7.label));
|
|
945
946
|
} }
|
|
946
|
-
function
|
|
947
|
-
i0.ɵɵtemplate(0,
|
|
947
|
+
function SideNavMenuComponent_For_34_Conditional_0_Template(rf, ctx) { if (rf & 1) {
|
|
948
|
+
i0.ɵɵtemplate(0, SideNavMenuComponent_For_34_Conditional_0_Conditional_0_Template, 2, 6, "a", 27)(1, SideNavMenuComponent_For_34_Conditional_0_Conditional_1_Template, 2, 6, "a", 28);
|
|
948
949
|
} if (rf & 2) {
|
|
949
|
-
const
|
|
950
|
-
i0.ɵɵconditional(
|
|
950
|
+
const item_r7 = i0.ɵɵnextContext().$implicit;
|
|
951
|
+
i0.ɵɵconditional(item_r7.link.isExternal ? 0 : 1);
|
|
951
952
|
} }
|
|
952
|
-
function
|
|
953
|
+
function SideNavMenuComponent_For_34_Conditional_1_ng_container_1_Template(rf, ctx) { if (rf & 1) {
|
|
953
954
|
i0.ɵɵelementContainer(0);
|
|
954
955
|
} }
|
|
955
|
-
function
|
|
956
|
-
const
|
|
957
|
-
i0.ɵɵelementStart(0, "button",
|
|
958
|
-
i0.ɵɵlistener("click", function
|
|
959
|
-
i0.ɵɵtemplate(1,
|
|
956
|
+
function SideNavMenuComponent_For_34_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
957
|
+
const _r10 = i0.ɵɵgetCurrentView();
|
|
958
|
+
i0.ɵɵelementStart(0, "button", 32);
|
|
959
|
+
i0.ɵɵlistener("click", function SideNavMenuComponent_For_34_Conditional_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r10); const item_r7 = i0.ɵɵnextContext().$implicit; return i0.ɵɵresetView(item_r7.button == null ? null : item_r7.button.callback()); });
|
|
960
|
+
i0.ɵɵtemplate(1, SideNavMenuComponent_For_34_Conditional_1_ng_container_1_Template, 1, 0, "ng-container", 30);
|
|
960
961
|
i0.ɵɵelementEnd();
|
|
961
962
|
} if (rf & 2) {
|
|
962
|
-
const
|
|
963
|
+
const item_r7 = i0.ɵɵnextContext().$implicit;
|
|
963
964
|
i0.ɵɵnextContext();
|
|
964
|
-
const
|
|
965
|
+
const profileMenuItem_r8 = i0.ɵɵreference(36);
|
|
965
966
|
i0.ɵɵadvance();
|
|
966
|
-
i0.ɵɵproperty("ngTemplateOutlet",
|
|
967
|
+
i0.ɵɵproperty("ngTemplateOutlet", profileMenuItem_r8)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c0, item_r7.icon, item_r7.label));
|
|
967
968
|
} }
|
|
968
|
-
function
|
|
969
|
-
i0.ɵɵtemplate(0,
|
|
969
|
+
function SideNavMenuComponent_For_34_Template(rf, ctx) { if (rf & 1) {
|
|
970
|
+
i0.ɵɵtemplate(0, SideNavMenuComponent_For_34_Conditional_0_Template, 2, 1)(1, SideNavMenuComponent_For_34_Conditional_1_Template, 2, 5, "button", 26);
|
|
970
971
|
} if (rf & 2) {
|
|
971
|
-
const
|
|
972
|
-
i0.ɵɵconditional(
|
|
972
|
+
const item_r7 = ctx.$implicit;
|
|
973
|
+
i0.ɵɵconditional(item_r7.link ? 0 : 1);
|
|
973
974
|
} }
|
|
974
|
-
function
|
|
975
|
-
i0.ɵɵelementStart(0, "span",
|
|
975
|
+
function SideNavMenuComponent_ng_template_35_Conditional_0_Conditional_0_Template(rf, ctx) { if (rf & 1) {
|
|
976
|
+
i0.ɵɵelementStart(0, "span", 35);
|
|
976
977
|
i0.ɵɵtext(1);
|
|
977
978
|
i0.ɵɵelementEnd();
|
|
978
979
|
} if (rf & 2) {
|
|
979
|
-
const
|
|
980
|
-
i0.ɵɵclassProp("material-icons-outlined",
|
|
980
|
+
const icon_r11 = i0.ɵɵnextContext(2).icon;
|
|
981
|
+
i0.ɵɵclassProp("material-icons-outlined", icon_r11 == null ? null : icon_r11.isOutlined);
|
|
981
982
|
i0.ɵɵadvance();
|
|
982
|
-
i0.ɵɵtextInterpolate1(" ",
|
|
983
|
+
i0.ɵɵtextInterpolate1(" ", icon_r11 == null ? null : icon_r11.name, " ");
|
|
983
984
|
} }
|
|
984
|
-
function
|
|
985
|
-
i0.ɵɵelement(0, "mat-icon",
|
|
985
|
+
function SideNavMenuComponent_ng_template_35_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
986
|
+
i0.ɵɵelement(0, "mat-icon", 34);
|
|
986
987
|
} if (rf & 2) {
|
|
987
|
-
const
|
|
988
|
-
i0.ɵɵproperty("svgIcon",
|
|
988
|
+
const icon_r11 = i0.ɵɵnextContext(2).icon;
|
|
989
|
+
i0.ɵɵproperty("svgIcon", icon_r11 == null ? null : icon_r11.name);
|
|
989
990
|
} }
|
|
990
|
-
function
|
|
991
|
-
i0.ɵɵtemplate(0,
|
|
991
|
+
function SideNavMenuComponent_ng_template_35_Conditional_0_Template(rf, ctx) { if (rf & 1) {
|
|
992
|
+
i0.ɵɵtemplate(0, SideNavMenuComponent_ng_template_35_Conditional_0_Conditional_0_Template, 2, 3, "span", 33)(1, SideNavMenuComponent_ng_template_35_Conditional_0_Conditional_1_Template, 1, 1, "mat-icon", 34);
|
|
992
993
|
} if (rf & 2) {
|
|
993
|
-
const
|
|
994
|
-
i0.ɵɵconditional(!(
|
|
994
|
+
const icon_r11 = i0.ɵɵnextContext().icon;
|
|
995
|
+
i0.ɵɵconditional(!(icon_r11 == null ? null : icon_r11.isCustom) ? 0 : 1);
|
|
995
996
|
} }
|
|
996
|
-
function
|
|
997
|
-
i0.ɵɵtemplate(0,
|
|
997
|
+
function SideNavMenuComponent_ng_template_35_Template(rf, ctx) { if (rf & 1) {
|
|
998
|
+
i0.ɵɵtemplate(0, SideNavMenuComponent_ng_template_35_Conditional_0_Template, 2, 1);
|
|
998
999
|
i0.ɵɵtext(1);
|
|
999
1000
|
i0.ɵɵpipe(2, "translate");
|
|
1000
1001
|
} if (rf & 2) {
|
|
1001
|
-
const
|
|
1002
|
-
const
|
|
1003
|
-
i0.ɵɵconditional(
|
|
1002
|
+
const icon_r11 = ctx.icon;
|
|
1003
|
+
const label_r12 = ctx.label;
|
|
1004
|
+
i0.ɵɵconditional(icon_r11 ? 0 : -1);
|
|
1004
1005
|
i0.ɵɵadvance();
|
|
1005
|
-
i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(2, 2,
|
|
1006
|
+
i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(2, 2, label_r12), " ");
|
|
1006
1007
|
} }
|
|
1007
1008
|
class SideNavMenuComponent extends NavBaseComponent {
|
|
1008
1009
|
#username;
|
|
@@ -1030,7 +1031,8 @@ class SideNavMenuComponent extends NavBaseComponent {
|
|
|
1030
1031
|
collapsedWidth: '56px',
|
|
1031
1032
|
menuLogo: '',
|
|
1032
1033
|
menuLogoCollapsed: '',
|
|
1033
|
-
disableStrapi: false
|
|
1034
|
+
disableStrapi: false,
|
|
1035
|
+
disableLogoNavigation: false
|
|
1034
1036
|
};
|
|
1035
1037
|
this.collapsed = false;
|
|
1036
1038
|
this.COLLAPSED_LOCAL_STORAGE_KEY = "TLD_MENU_SIDE_NAV_COLLAPSED";
|
|
@@ -1096,7 +1098,7 @@ class SideNavMenuComponent extends NavBaseComponent {
|
|
|
1096
1098
|
this.userInitials = splittedUsername[0][0] + splittedUsername[1][0];
|
|
1097
1099
|
}
|
|
1098
1100
|
static { this.ɵfac = function SideNavMenuComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SideNavMenuComponent)(i0.ɵɵdirectiveInject(i1.StrapiLinkService), i0.ɵɵdirectiveInject(i2.DOMService), i0.ɵɵdirectiveInject(MenuItemsService)); }; }
|
|
1099
|
-
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SideNavMenuComponent, selectors: [["lib-side-nav-menu"]], inputs: { username: "username", menuSettings: "menuSettings", productName: "productName" }, features: [i0.ɵɵInheritDefinitionFeature], decls:
|
|
1101
|
+
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SideNavMenuComponent, selectors: [["lib-side-nav-menu"]], inputs: { username: "username", menuSettings: "menuSettings", productName: "productName" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 37, vars: 35, consts: [["state", "matMenuTrigger"], ["menu", "matMenu"], ["profileMenuItem", ""], ["iconDown", ""], ["fxHide.gt-xs", ""], [1, "mobile-header", 3, "fxHide"], ["fxFlex", "3.125em", "fxLayoutAlign", "start center", 3, "click", "libPlausibleEvent", "href"], ["height", "40", "width", "40", "alt", "logo", 1, "menu-logo", 3, "src"], [1, "menu-product-name"], ["mat-icon-button", "", 1, "toggler", 3, "click", "libPlausibleEvent"], ["fxLayout", "column", 1, "menu-container", 3, "ngClass.lt-sm"], ["fxLayout", "column", "fxFlexFill", "", 1, "content"], ["fxLayout", "row", 1, "menu-container-header", 3, "fxLayoutAlign"], ["fxFlex", "3.125em", "fxLayoutAlign", "start center", 3, "libPlausibleEvent", "no-click", "href", "click", 4, "ngIf"], ["mat-icon-button", "", 1, "toggler", 3, "click", "libPlausibleEvent", "matTooltip"], ["fxHide.lt-sm", ""], ["fxLayout", "column", 1, "menu-wrapper"], ["role", "navigation", 3, "toggleCollapseEvent", "direction", "isOpen", "active"], [1, "profile"], [1, "profile-wrapper", 3, "matMenuTriggerFor"], [1, "profile-icon"], [4, "ngIf"], [1, "profile-menu"], [1, "profile-name"], ["class", "profile-arrow spin", 4, "ngIf", "ngIfElse"], [1, "profile-arrow", "spin"], ["mat-menu-item", "", 1, "profile-option"], ["target", "_blank", 1, "mat-mdc-menu-item", 3, "href"], [1, "mat-mdc-menu-item", 3, "routerLink"], ["target", "_blank", 1, "mat-mdc-menu-item", 3, "click", "href"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "mat-mdc-menu-item", 3, "click", "routerLink"], ["mat-menu-item", "", 1, "profile-option", 3, "click"], [1, "material-icons", "profile-option-icon", 3, "material-icons-outlined"], [1, "profile-option-icon", 3, "svgIcon"], [1, "material-icons", "profile-option-icon"]], template: function SideNavMenuComponent_Template(rf, ctx) { if (rf & 1) {
|
|
1100
1102
|
const _r1 = i0.ɵɵgetCurrentView();
|
|
1101
1103
|
i0.ɵɵelementStart(0, "div", 4)(1, "div", 5)(2, "a", 6);
|
|
1102
1104
|
i0.ɵɵpipe(3, "translate");
|
|
@@ -1112,7 +1114,7 @@ class SideNavMenuComponent extends NavBaseComponent {
|
|
|
1112
1114
|
i0.ɵɵtext(10, "menu");
|
|
1113
1115
|
i0.ɵɵelementEnd()()()();
|
|
1114
1116
|
i0.ɵɵelementStart(11, "div", 10)(12, "div", 11)(13, "div", 12);
|
|
1115
|
-
i0.ɵɵtemplate(14, SideNavMenuComponent_a_14_Template, 5,
|
|
1117
|
+
i0.ɵɵtemplate(14, SideNavMenuComponent_a_14_Template, 5, 9, "a", 13);
|
|
1116
1118
|
i0.ɵɵelementStart(15, "button", 14);
|
|
1117
1119
|
i0.ɵɵpipe(16, "translate");
|
|
1118
1120
|
i0.ɵɵpipe(17, "translate");
|
|
@@ -1126,26 +1128,31 @@ class SideNavMenuComponent extends NavBaseComponent {
|
|
|
1126
1128
|
i0.ɵɵelementStart(22, "div", 16)(23, "menu-columns", 17);
|
|
1127
1129
|
i0.ɵɵlistener("toggleCollapseEvent", function SideNavMenuComponent_Template_menu_columns_toggleCollapseEvent_23_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.toggleCollapse()); });
|
|
1128
1130
|
i0.ɵɵelementEnd()();
|
|
1129
|
-
i0.ɵɵelementStart(24, "div", 18);
|
|
1130
|
-
i0.ɵɵtemplate(
|
|
1131
|
-
i0.ɵɵ
|
|
1132
|
-
i0.ɵɵ
|
|
1131
|
+
i0.ɵɵelementStart(24, "div", 18)(25, "button", 19, 0)(27, "div", 20);
|
|
1132
|
+
i0.ɵɵtemplate(28, SideNavMenuComponent_Conditional_28_Template, 1, 1)(29, SideNavMenuComponent_Conditional_29_Template, 2, 0, "mat-icon");
|
|
1133
|
+
i0.ɵɵelementEnd();
|
|
1134
|
+
i0.ɵɵtemplate(30, SideNavMenuComponent_ng_container_30_Template, 7, 5, "ng-container", 21);
|
|
1135
|
+
i0.ɵɵelementEnd();
|
|
1136
|
+
i0.ɵɵelementStart(31, "mat-menu", 22, 1);
|
|
1137
|
+
i0.ɵɵrepeaterCreate(33, SideNavMenuComponent_For_34_Template, 2, 1, null, null, _forTrack0);
|
|
1133
1138
|
i0.ɵɵelementEnd()();
|
|
1134
|
-
i0.ɵɵtemplate(
|
|
1139
|
+
i0.ɵɵtemplate(35, SideNavMenuComponent_ng_template_35_Template, 3, 4, "ng-template", null, 2, i0.ɵɵtemplateRefExtractor);
|
|
1135
1140
|
i0.ɵɵelementEnd()();
|
|
1136
1141
|
} if (rf & 2) {
|
|
1142
|
+
const menu_r13 = i0.ɵɵreference(32);
|
|
1137
1143
|
i0.ɵɵadvance();
|
|
1138
1144
|
i0.ɵɵproperty("fxHide", !ctx.collapsed);
|
|
1139
1145
|
i0.ɵɵadvance();
|
|
1146
|
+
i0.ɵɵclassProp("no-click", ctx.menuSettings == null ? null : ctx.menuSettings.disableLogoNavigation);
|
|
1140
1147
|
i0.ɵɵproperty("libPlausibleEvent", ctx.LOGOCLICK_PLAUSIBLE_EVENT)("href", ctx.baseUrl, i0.ɵɵsanitizeUrl);
|
|
1141
|
-
i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(3,
|
|
1148
|
+
i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(3, 27, "MENU.ARIA_LABELS.LOGO"));
|
|
1142
1149
|
i0.ɵɵadvance(2);
|
|
1143
1150
|
i0.ɵɵproperty("src", ctx.menuLogoImage, i0.ɵɵsanitizeUrl);
|
|
1144
1151
|
i0.ɵɵadvance(2);
|
|
1145
1152
|
i0.ɵɵtextInterpolate1(" ", ctx.productName, " ");
|
|
1146
1153
|
i0.ɵɵadvance();
|
|
1147
1154
|
i0.ɵɵproperty("libPlausibleEvent", ctx.collapsed ? ctx.EXPAND_PLAUSIBLE_EVENT : ctx.COLLAPSE_PLAUSIBLE_EVENT);
|
|
1148
|
-
i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(8,
|
|
1155
|
+
i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(8, 29, "ARIA_LABELS.MENU_TOGGLER"));
|
|
1149
1156
|
i0.ɵɵadvance(4);
|
|
1150
1157
|
i0.ɵɵstyleProp("width", ctx.sideNavWidth);
|
|
1151
1158
|
i0.ɵɵclassProp("collapsed", ctx.collapsed);
|
|
@@ -1155,21 +1162,25 @@ class SideNavMenuComponent extends NavBaseComponent {
|
|
|
1155
1162
|
i0.ɵɵadvance();
|
|
1156
1163
|
i0.ɵɵproperty("ngIf", !ctx.collapsed);
|
|
1157
1164
|
i0.ɵɵadvance();
|
|
1158
|
-
i0.ɵɵproperty("libPlausibleEvent", ctx.collapsed ? ctx.EXPAND_PLAUSIBLE_EVENT : ctx.COLLAPSE_PLAUSIBLE_EVENT)("matTooltip", i0.ɵɵpipeBind1(16,
|
|
1159
|
-
i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(17,
|
|
1165
|
+
i0.ɵɵproperty("libPlausibleEvent", ctx.collapsed ? ctx.EXPAND_PLAUSIBLE_EVENT : ctx.COLLAPSE_PLAUSIBLE_EVENT)("matTooltip", i0.ɵɵpipeBind1(16, 31, ctx.collapsed ? "MENU.EXPAND" : "MENU.COLLAPSE"));
|
|
1166
|
+
i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(17, 33, "ARIA_LABELS.MENU_TOGGLER"));
|
|
1160
1167
|
i0.ɵɵadvance(6);
|
|
1161
1168
|
i0.ɵɵtextInterpolate(ctx.collapsed ? "keyboard_double_arrow_right" : "keyboard_double_arrow_left");
|
|
1162
1169
|
i0.ɵɵadvance(2);
|
|
1163
1170
|
i0.ɵɵproperty("direction", ctx.direction)("isOpen", !ctx.collapsed)("active", ctx.active);
|
|
1164
1171
|
i0.ɵɵadvance(2);
|
|
1165
|
-
i0.ɵɵproperty("
|
|
1172
|
+
i0.ɵɵproperty("matMenuTriggerFor", menu_r13);
|
|
1173
|
+
i0.ɵɵadvance(3);
|
|
1174
|
+
i0.ɵɵconditional(ctx.userInitials ? 28 : 29);
|
|
1175
|
+
i0.ɵɵadvance(2);
|
|
1176
|
+
i0.ɵɵproperty("ngIf", !ctx.collapsed);
|
|
1166
1177
|
i0.ɵɵadvance(3);
|
|
1167
1178
|
i0.ɵɵrepeater(ctx.menuSettings.userOptions);
|
|
1168
|
-
} }, dependencies: [i1$2.DefaultLayoutDirective, i1$2.DefaultLayoutAlignDirective, i1$2.FlexFillDirective, i1$2.DefaultFlexDirective, i2$2.DefaultShowHideDirective, i2$2.DefaultClassDirective, i1$1.RouterLink, i4.NgIf, i4.NgTemplateOutlet, i5.MatTooltip, i2$1.MatIcon, i7.MatIconButton, i6.MatMenu, i6.MatMenuItem, i6.MatMenuTrigger, i2.PlausibleEventDirective, MenuColumnsComponent, i8.TranslatePipe], styles: ["a[_ngcontent-%COMP%]{text-decoration:none}.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}.mobile[_ngcontent-%COMP%] .profile-wrapper[_ngcontent-%COMP%]{position:relative}.mobile[_ngcontent-%COMP%] .profile-wrapper[_ngcontent-%COMP%] mat-icon[_ngcontent-%COMP%]{position:absolute!important;right:0}.menu-product-name[_ngcontent-%COMP%]{white-space:nowrap;margin-left:12px;font-weight:600;color:var(--
|
|
1179
|
+
} }, dependencies: [i1$2.DefaultLayoutDirective, i1$2.DefaultLayoutAlignDirective, i1$2.FlexFillDirective, i1$2.DefaultFlexDirective, i2$2.DefaultShowHideDirective, i2$2.DefaultClassDirective, i1$1.RouterLink, i4.NgIf, i4.NgTemplateOutlet, i5.MatTooltip, i2$1.MatIcon, i7.MatIconButton, i6.MatMenu, i6.MatMenuItem, i6.MatMenuTrigger, i2.PlausibleEventDirective, MenuColumnsComponent, i8.TranslatePipe], styles: ["a[_ngcontent-%COMP%]{text-decoration:none}.no-click[_ngcontent-%COMP%]{pointer-events:none!important}.mobile-header[_ngcontent-%COMP%]{display:flex;justify-content:space-between;padding:23px 27px;background-color:#fcfcfc;border:1px solid var(--base-70)}.mobile.menu-container.collapsed[_ngcontent-%COMP%]{display:none!important}.mobile.menu-container[_ngcontent-%COMP%]:not(.collapsed){display:block!important;position:fixed;min-width:100vw;min-height:100dvh;z-index:1000}.mobile[_ngcontent-%COMP%] .profile-wrapper[_ngcontent-%COMP%]{position:relative}.mobile[_ngcontent-%COMP%] .profile-wrapper[_ngcontent-%COMP%] mat-icon[_ngcontent-%COMP%]{position:absolute!important;right:0}.menu-product-name[_ngcontent-%COMP%]{white-space:nowrap;margin-left:12px;font-weight:600;color:var(--base-10)}.menu-container[_ngcontent-%COMP%]{max-height:100dvh;white-space:nowrap;height:100%;transition:width .2s ease;min-height:100dvh;overflow:auto;background:var(--base-100);border-right:2px solid var(--base-95)}.menu-container[_ngcontent-%COMP%] .menu-container-header[_ngcontent-%COMP%]{margin:24px 0;max-height:40px}.menu-container.collapsed[_ngcontent-%COMP%] .menu-container-header[_ngcontent-%COMP%]{margin:24px 0 32px!important}.menu-container[_ngcontent-%COMP%] .content[_ngcontent-%COMP%]:not(.collapsed){overflow-x:hidden;padding:0 12px}.menu-container[_ngcontent-%COMP%] .content[_ngcontent-%COMP%]:not(.collapsed) .menu-logo[_ngcontent-%COMP%]{margin-left:16px;max-width:100%}.menu-container[_ngcontent-%COMP%] .divider[_ngcontent-%COMP%]{width:100%}.menu-container[_ngcontent-%COMP%] .profile[_ngcontent-%COMP%]{position:relative;height:100%;margin-top:100px}.menu-container[_ngcontent-%COMP%] .profile-wrapper[_ngcontent-%COMP%]{background:none;color:var(--base-30);display:flex;align-items:center;justify-content:start;width:100%;position:absolute;bottom:0;margin:32px 16px}.menu-container[_ngcontent-%COMP%] .profile-icon[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:center;min-width:40px;height:40px;border-radius:100%;color:var(--base-0);background-color:var(--base-70);font-size:16px;font-weight:600}.menu-container[_ngcontent-%COMP%] .profile-name[_ngcontent-%COMP%]{max-width:145px;overflow:hidden;margin-left:12px;text-overflow:ellipsis}.collapsed[_ngcontent-%COMP%] .profile-wrapper[_ngcontent-%COMP%]{margin:36px 0!important}.mobile[_ngcontent-%COMP%] .profile-name[_ngcontent-%COMP%]{max-width:60vw}.profile-option-icon[_ngcontent-%COMP%]{vertical-align:middle;margin:0 5px 5px 0}[_nghost-%COMP%] .menu-item{display:flex;padding:16px!important;border-radius:4px!important}[_nghost-%COMP%] .child-list .menu-item{padding:8px 46px!important}[_nghost-%COMP%] .collapsed .menu-item{padding:0!important;width:40px;height:40px;border-radius:50%!important}[_nghost-%COMP%] .active-menu-item{background-color:var(--base-95)!important}[_nghost-%COMP%] .menu-item-title{margin-left:12px}tld-menu-icon[_ngcontent-%COMP%]{margin-right:10px}.profile-arrow[_ngcontent-%COMP%]{position:absolute;right:3px;margin-right:20px}.spin[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_spinArrow .3s forwards}[_nghost-%COMP%] button.collapse-btn .mat-mdc-button-persistent-ripple, [_nghost-%COMP%] button.toggler .mat-mdc-button-persistent-ripple{display:none}[_nghost-%COMP%] .mobile .child-list .menu-item{padding:8px 54px!important} .cdk-overlay-container .profile-menu{margin:10px 0!important} .mat-mdc-menu-item .mat-icon{margin-right:5px!important} .collapsed .profile-wrapper{justify-content:center!important} .profile-menu a{font-weight:400!important;display:flex;align-items:center;gap:5px} .profile-menu a:hover{color:var(--mat-menu-item-label-text-color, var(--mat-app-on-surface))!important;text-decoration:inherit}@keyframes _ngcontent-%COMP%_spinArrow{to{transform:rotate(180deg)}}"] }); }
|
|
1169
1180
|
}
|
|
1170
1181
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SideNavMenuComponent, [{
|
|
1171
1182
|
type: Component,
|
|
1172
|
-
args: [{ selector: 'lib-side-nav-menu', template: "<div fxHide.gt-xs>\r\n <div [fxHide]=\"!collapsed\" class=\"mobile-header\">\r\n <a [libPlausibleEvent]=\"LOGOCLICK_PLAUSIBLE_EVENT\" fxFlex=\"3.125em\" [href]=\"baseUrl\"\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\" [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>close</mat-icon>\r\n <mat-icon fxHide.lt-sm>{{ collapsed ? 'keyboard_double_arrow_right' : 'keyboard_double_arrow_left' }}</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <div class=\"menu-wrapper\" fxLayout=\"column\">\r\n <menu-columns (toggleCollapseEvent)=\"toggleCollapse()\" [direction]=\"direction\" role=\"navigation\" [isOpen]=\"!collapsed\"\r\n [active]=\"active\"></menu-columns>\r\n </div>\r\n\r\n <div class=\"profile\">\r\n <button
|
|
1183
|
+
args: [{ selector: 'lib-side-nav-menu', template: "<div fxHide.gt-xs>\r\n <div [fxHide]=\"!collapsed\" class=\"mobile-header\">\r\n <a [libPlausibleEvent]=\"LOGOCLICK_PLAUSIBLE_EVENT\" fxFlex=\"3.125em\" [href]=\"baseUrl\" [class.no-click]=\"menuSettings?.disableLogoNavigation\"\r\n [attr.aria-label]=\"'MENU.ARIA_LABELS.LOGO' | translate\" (click)=\"logoClick($event)\" fxLayoutAlign=\"start center\"\r\n >\r\n <img height=\"40\" width=\"40\" class=\"menu-logo\" [src]=\"menuLogoImage\" alt=\"logo\" />\r\n <span class=\"menu-product-name\">\r\n {{ productName }}\r\n </span>\r\n </a>\r\n\r\n <button\r\n mat-icon-button\r\n class=\"toggler\"\r\n [attr.aria-label]=\"'ARIA_LABELS.MENU_TOGGLER' | translate\"\r\n [libPlausibleEvent]=\"collapsed ? EXPAND_PLAUSIBLE_EVENT : COLLAPSE_PLAUSIBLE_EVENT\"\r\n (click)=\"toggleCollapse()\"\r\n >\r\n <mat-icon>menu</mat-icon>\r\n </button>\r\n </div>\r\n</div>\r\n\r\n<div [ngClass.lt-sm]=\"'mobile'\" class=\"menu-container\" [style.width]=\"sideNavWidth\" fxLayout=\"column\" [class.collapsed]=\"collapsed\">\r\n <div class=\"content\" fxLayout=\"column\" fxFlexFill>\r\n <div class=\"menu-container-header\" fxLayout=\"row\" [fxLayoutAlign]=\"collapsed ? 'center center' : 'space-between center'\">\r\n <a *ngIf=\"!collapsed\" [libPlausibleEvent]=\"LOGOCLICK_PLAUSIBLE_EVENT\" fxFlex=\"3.125em\" [class.no-click]=\"menuSettings?.disableLogoNavigation\" [href]=\"baseUrl\"\r\n [attr.aria-label]=\"'MENU.ARIA_LABELS.LOGO' | translate\" (click)=\"logoClick($event)\" fxLayoutAlign=\"start center\"\r\n >\r\n <img height=\"40\" width=\"40\" class=\"menu-logo\" [src]=\"menuLogoImage\" alt=\"logo\" />\r\n <span class=\"menu-product-name\">\r\n {{ productName }}\r\n </span>\r\n </a>\r\n\r\n <button\r\n mat-icon-button\r\n class=\"toggler\"\r\n [attr.aria-label]=\"'ARIA_LABELS.MENU_TOGGLER' | translate\"\r\n [libPlausibleEvent]=\"collapsed ? EXPAND_PLAUSIBLE_EVENT : COLLAPSE_PLAUSIBLE_EVENT\"\r\n [matTooltip]=\"(collapsed ? 'MENU.EXPAND' : 'MENU.COLLAPSE') | translate\"\r\n (click)=\"toggleCollapse()\"\r\n >\r\n <mat-icon fxHide.gt-xs>close</mat-icon>\r\n <mat-icon fxHide.lt-sm>{{ collapsed ? 'keyboard_double_arrow_right' : 'keyboard_double_arrow_left' }}</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <div class=\"menu-wrapper\" fxLayout=\"column\">\r\n <menu-columns (toggleCollapseEvent)=\"toggleCollapse()\" [direction]=\"direction\" role=\"navigation\" [isOpen]=\"!collapsed\"\r\n [active]=\"active\"></menu-columns>\r\n </div>\r\n\r\n <div class=\"profile\">\r\n <button #state=\"matMenuTrigger\" [matMenuTriggerFor]=\"menu\" class=\"profile-wrapper\">\r\n <div class=\"profile-icon\">\r\n @if (userInitials) {\r\n {{userInitials}}\r\n } @else {\r\n <mat-icon>person</mat-icon>\r\n }\r\n </div>\r\n\r\n <ng-container *ngIf=\"!collapsed\">\r\n <span class=\"profile-name\">\r\n {{ username ?? 'MENU.ANONYMOUS' | translate }}\r\n </span>\r\n\r\n <mat-icon *ngIf=\"state.menuOpen; else iconDown\" class=\"profile-arrow spin\">{{\"keyboard_arrow_down\"}}</mat-icon>\r\n\r\n <ng-template #iconDown>\r\n <mat-icon class=\"profile-arrow spin\">{{\"keyboard_arrow_up\" }}</mat-icon>\r\n </ng-template>\r\n </ng-container>\r\n </button>\r\n\r\n <mat-menu #menu=\"matMenu\" class=\"profile-menu\">\r\n @for (item of menuSettings.userOptions; track item.label) {\r\n @if (item.link) {\r\n @if (item.link.isExternal) {\r\n <a class=\"mat-mdc-menu-item\" [href]=\"item.link.href\" target=\"_blank\" (click)=\"linkCallback(item.link)\">\r\n <ng-container\r\n *ngTemplateOutlet=\"profileMenuItem; context: { icon: item.icon, label: item.label }\">\r\n </ng-container>\r\n </a>\r\n } @else {\r\n <a class=\"mat-mdc-menu-item\" [routerLink]=\"item.link.href\" (click)=\"linkCallback(item.link)\">\r\n <ng-container\r\n *ngTemplateOutlet=\"profileMenuItem; context: { icon: item.icon, label: item.label }\">\r\n </ng-container>\r\n </a>\r\n }\r\n } @else {\r\n <button\r\n mat-menu-item\r\n class=\"profile-option\"\r\n (click)=\"item.button?.callback()\"\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"profileMenuItem; context: { icon: item.icon, label: item.label }\">\r\n </ng-container>\r\n </button>\r\n }\r\n }\r\n </mat-menu>\r\n </div>\r\n\r\n <ng-template #profileMenuItem let-icon=\"icon\" let-label=\"label\">\r\n @if (icon) {\r\n @if (!icon?.isCustom) {\r\n <span class=\"material-icons profile-option-icon\" [class.material-icons-outlined]=\"icon?.isOutlined\">\r\n {{icon?.name}}\r\n </span>\r\n } @else {\r\n <mat-icon class=\"profile-option-icon\" [svgIcon]=\"icon?.name\"></mat-icon>\r\n }\r\n }\r\n {{ label | translate }}\r\n </ng-template>\r\n</div>\r\n", styles: ["a{text-decoration:none}.no-click{pointer-events:none!important}.mobile-header{display:flex;justify-content:space-between;padding:23px 27px;background-color:#fcfcfc;border:1px solid var(--base-70)}.mobile.menu-container.collapsed{display:none!important}.mobile.menu-container:not(.collapsed){display:block!important;position:fixed;min-width:100vw;min-height:100dvh;z-index:1000}.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(--base-10)}.menu-container{max-height:100dvh;white-space:nowrap;height:100%;transition:width .2s ease;min-height:100dvh;overflow:auto;background:var(--base-100);border-right:2px solid var(--base-95)}.menu-container .menu-container-header{margin:24px 0;max-height:40px}.menu-container.collapsed .menu-container-header{margin:24px 0 32px!important}.menu-container .content:not(.collapsed){overflow-x:hidden;padding:0 12px}.menu-container .content:not(.collapsed) .menu-logo{margin-left:16px;max-width:100%}.menu-container .divider{width:100%}.menu-container .profile{position:relative;height:100%;margin-top:100px}.menu-container .profile-wrapper{background:none;color:var(--base-30);display:flex;align-items:center;justify-content:start;width:100%;position:absolute;bottom:0;margin:32px 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;text-overflow:ellipsis}.collapsed .profile-wrapper{margin:36px 0!important}.mobile .profile-name{max-width:60vw}.profile-option-icon{vertical-align:middle;margin:0 5px 5px 0}:host ::ng-deep .menu-item{display:flex;padding:16px!important;border-radius:4px!important}:host ::ng-deep .child-list .menu-item{padding:8px 46px!important}:host ::ng-deep .collapsed .menu-item{padding:0!important;width:40px;height:40px;border-radius:50%!important}:host ::ng-deep .active-menu-item{background-color:var(--base-95)!important}:host ::ng-deep .menu-item-title{margin-left:12px}tld-menu-icon{margin-right:10px}.profile-arrow{position:absolute;right:3px;margin-right:20px}.spin{animation:spinArrow .3s forwards}:host::ng-deep button.collapse-btn .mat-mdc-button-persistent-ripple,:host::ng-deep button.toggler .mat-mdc-button-persistent-ripple{display:none}:host ::ng-deep .mobile .child-list .menu-item{padding:8px 54px!important}::ng-deep .cdk-overlay-container .profile-menu{margin:10px 0!important}::ng-deep .mat-mdc-menu-item .mat-icon{margin-right:5px!important}::ng-deep .collapsed .profile-wrapper{justify-content:center!important}::ng-deep .profile-menu a{font-weight:400!important;display:flex;align-items:center;gap:5px}::ng-deep .profile-menu a:hover{color:var(--mat-menu-item-label-text-color, var(--mat-app-on-surface))!important;text-decoration:inherit}@keyframes spinArrow{to{transform:rotate(180deg)}}\n"] }]
|
|
1173
1184
|
}], () => [{ type: i1.StrapiLinkService }, { type: i2.DOMService }, { type: MenuItemsService }], { username: [{
|
|
1174
1185
|
type: Input
|
|
1175
1186
|
}], menuSettings: [{
|
|
@@ -1259,50 +1270,54 @@ class MenuModule {
|
|
|
1259
1270
|
*/
|
|
1260
1271
|
const USER_MENU_OPTIONS = {
|
|
1261
1272
|
subscription: (href, callback) => ({
|
|
1262
|
-
icon: { name:
|
|
1273
|
+
icon: { name: 'credit_card' },
|
|
1263
1274
|
label: 'MENU.SUBSCRIPTION',
|
|
1264
|
-
link: { href: href, callback }
|
|
1275
|
+
link: { href: href, callback },
|
|
1265
1276
|
}),
|
|
1266
1277
|
termsOfUse: (href, callback) => ({
|
|
1267
|
-
icon: { name:
|
|
1278
|
+
icon: { name: 'text_snippet' },
|
|
1268
1279
|
label: 'MENU.TERMS_OF_USE',
|
|
1269
|
-
link: { href, isExternal: true, callback }
|
|
1280
|
+
link: { href, isExternal: true, callback },
|
|
1270
1281
|
}),
|
|
1271
1282
|
privacy: (href, callback) => ({
|
|
1272
|
-
icon: { name:
|
|
1283
|
+
icon: { name: 'gpp_maybe' },
|
|
1273
1284
|
label: 'MENU.PRIVACY',
|
|
1274
1285
|
link: { href, isExternal: true, callback },
|
|
1275
1286
|
}),
|
|
1276
|
-
help: (href, callback) => ({
|
|
1287
|
+
help: (href, icon, callback) => ({
|
|
1277
1288
|
label: 'MENU.HELP_CENTER',
|
|
1278
|
-
icon: { name: `help
|
|
1279
|
-
link: { href, isExternal: true, callback }
|
|
1289
|
+
icon: { name: icon ? icon.name : `help`, isCustom: icon ? icon.isCustom : false },
|
|
1290
|
+
link: { href, isExternal: true, callback },
|
|
1280
1291
|
}),
|
|
1281
1292
|
contactUs: (href, callback) => ({
|
|
1282
1293
|
label: 'MENU.CONTACT_US',
|
|
1283
1294
|
icon: { name: `mail` },
|
|
1284
|
-
link: { href, isExternal: true, callback }
|
|
1295
|
+
link: { href, isExternal: true, callback },
|
|
1285
1296
|
}),
|
|
1286
1297
|
/** use language update callback to save in localstorage */
|
|
1287
1298
|
changeLanguage: (dialog, languages, languageChangeCallback) => ({
|
|
1288
1299
|
label: 'MENU.CHANGE_LANGUAGE',
|
|
1289
|
-
icon: { name:
|
|
1300
|
+
icon: { name: 'language' },
|
|
1290
1301
|
button: {
|
|
1291
1302
|
callback: () => {
|
|
1292
|
-
dialog
|
|
1293
|
-
.
|
|
1303
|
+
dialog
|
|
1304
|
+
.open(SelectLanguageDialogComponent, {
|
|
1305
|
+
data: { languages: languages },
|
|
1306
|
+
})
|
|
1307
|
+
.afterClosed()
|
|
1308
|
+
.subscribe((language) => {
|
|
1294
1309
|
if (language && languageChangeCallback) {
|
|
1295
1310
|
languageChangeCallback(language);
|
|
1296
1311
|
}
|
|
1297
1312
|
});
|
|
1298
|
-
}
|
|
1299
|
-
}
|
|
1313
|
+
},
|
|
1314
|
+
},
|
|
1300
1315
|
}),
|
|
1301
1316
|
logout: (callback) => ({
|
|
1302
|
-
icon: { name:
|
|
1317
|
+
icon: { name: 'logout' },
|
|
1303
1318
|
label: 'MENU.LOG_OUT',
|
|
1304
|
-
button: { callback: () => callback() }
|
|
1305
|
-
})
|
|
1319
|
+
button: { callback: () => callback() },
|
|
1320
|
+
}),
|
|
1306
1321
|
};
|
|
1307
1322
|
|
|
1308
1323
|
/*
|