@tilde-nlp/ngx-menu 6.1.32 → 6.1.34
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/side-nav-menu/models/user-menu-option-link.model.mjs +1 -1
- package/esm2022/lib/components/side-nav-menu/side-nav-menu.component.mjs +42 -51
- package/esm2022/lib/constants/user-menu-options.const.mjs +15 -23
- package/fesm2022/tilde-nlp-ngx-menu.mjs +55 -72
- package/fesm2022/tilde-nlp-ngx-menu.mjs.map +1 -1
- package/lib/components/side-nav-menu/models/user-menu-option-link.model.d.ts +0 -2
- package/lib/components/side-nav-menu/side-nav-menu.component.d.ts +0 -2
- package/lib/constants/user-menu-options.const.d.ts +6 -7
- package/package.json +1 -1
|
@@ -912,96 +912,92 @@ function SideNavMenuComponent_For_29_Conditional_0_Conditional_0_ng_container_1_
|
|
|
912
912
|
i0.ɵɵelementContainer(0);
|
|
913
913
|
} }
|
|
914
914
|
function SideNavMenuComponent_For_29_Conditional_0_Conditional_0_Template(rf, ctx) { if (rf & 1) {
|
|
915
|
-
|
|
916
|
-
i0.ɵɵ
|
|
917
|
-
i0.ɵɵlistener("click", function SideNavMenuComponent_For_29_Conditional_0_Conditional_0_Template_a_click_0_listener() { i0.ɵɵrestoreView(_r7); const item_r8 = i0.ɵɵnextContext(2).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.linkCallback(item_r8.link)); });
|
|
918
|
-
i0.ɵɵtemplate(1, SideNavMenuComponent_For_29_Conditional_0_Conditional_0_ng_container_1_Template, 1, 0, "ng-container", 31);
|
|
915
|
+
i0.ɵɵelementStart(0, "a", 28);
|
|
916
|
+
i0.ɵɵtemplate(1, SideNavMenuComponent_For_29_Conditional_0_Conditional_0_ng_container_1_Template, 1, 0, "ng-container", 30);
|
|
919
917
|
i0.ɵɵelementEnd();
|
|
920
918
|
} if (rf & 2) {
|
|
921
|
-
const
|
|
919
|
+
const item_r7 = i0.ɵɵnextContext(2).$implicit;
|
|
922
920
|
i0.ɵɵnextContext();
|
|
923
|
-
const
|
|
924
|
-
i0.ɵɵproperty("href",
|
|
921
|
+
const profileMenuItem_r8 = i0.ɵɵreference(31);
|
|
922
|
+
i0.ɵɵproperty("href", item_r7.link.href, i0.ɵɵsanitizeUrl);
|
|
925
923
|
i0.ɵɵadvance();
|
|
926
|
-
i0.ɵɵproperty("ngTemplateOutlet",
|
|
924
|
+
i0.ɵɵproperty("ngTemplateOutlet", profileMenuItem_r8)("ngTemplateOutletContext", i0.ɵɵpureFunction2(3, _c0, item_r7.icon, item_r7.label));
|
|
927
925
|
} }
|
|
928
926
|
function SideNavMenuComponent_For_29_Conditional_0_Conditional_1_ng_container_1_Template(rf, ctx) { if (rf & 1) {
|
|
929
927
|
i0.ɵɵelementContainer(0);
|
|
930
928
|
} }
|
|
931
929
|
function SideNavMenuComponent_For_29_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
932
|
-
|
|
933
|
-
i0.ɵɵ
|
|
934
|
-
i0.ɵɵlistener("click", function SideNavMenuComponent_For_29_Conditional_0_Conditional_1_Template_a_click_0_listener() { i0.ɵɵrestoreView(_r10); const item_r8 = i0.ɵɵnextContext(2).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.linkCallback(item_r8.link)); });
|
|
935
|
-
i0.ɵɵtemplate(1, SideNavMenuComponent_For_29_Conditional_0_Conditional_1_ng_container_1_Template, 1, 0, "ng-container", 31);
|
|
930
|
+
i0.ɵɵelementStart(0, "a", 29);
|
|
931
|
+
i0.ɵɵtemplate(1, SideNavMenuComponent_For_29_Conditional_0_Conditional_1_ng_container_1_Template, 1, 0, "ng-container", 30);
|
|
936
932
|
i0.ɵɵelementEnd();
|
|
937
933
|
} if (rf & 2) {
|
|
938
|
-
const
|
|
934
|
+
const item_r7 = i0.ɵɵnextContext(2).$implicit;
|
|
939
935
|
i0.ɵɵnextContext();
|
|
940
|
-
const
|
|
941
|
-
i0.ɵɵproperty("routerLink",
|
|
936
|
+
const profileMenuItem_r8 = i0.ɵɵreference(31);
|
|
937
|
+
i0.ɵɵproperty("routerLink", item_r7.link.href);
|
|
942
938
|
i0.ɵɵadvance();
|
|
943
|
-
i0.ɵɵproperty("ngTemplateOutlet",
|
|
939
|
+
i0.ɵɵproperty("ngTemplateOutlet", profileMenuItem_r8)("ngTemplateOutletContext", i0.ɵɵpureFunction2(3, _c0, item_r7.icon, item_r7.label));
|
|
944
940
|
} }
|
|
945
941
|
function SideNavMenuComponent_For_29_Conditional_0_Template(rf, ctx) { if (rf & 1) {
|
|
946
942
|
i0.ɵɵtemplate(0, SideNavMenuComponent_For_29_Conditional_0_Conditional_0_Template, 2, 6, "a", 28)(1, SideNavMenuComponent_For_29_Conditional_0_Conditional_1_Template, 2, 6, "a", 29);
|
|
947
943
|
} if (rf & 2) {
|
|
948
|
-
const
|
|
949
|
-
i0.ɵɵconditional(
|
|
944
|
+
const item_r7 = i0.ɵɵnextContext().$implicit;
|
|
945
|
+
i0.ɵɵconditional(item_r7.link.isExternal ? 0 : 1);
|
|
950
946
|
} }
|
|
951
947
|
function SideNavMenuComponent_For_29_Conditional_1_ng_container_1_Template(rf, ctx) { if (rf & 1) {
|
|
952
948
|
i0.ɵɵelementContainer(0);
|
|
953
949
|
} }
|
|
954
950
|
function SideNavMenuComponent_For_29_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
955
|
-
const
|
|
956
|
-
i0.ɵɵelementStart(0, "button",
|
|
957
|
-
i0.ɵɵlistener("click", function SideNavMenuComponent_For_29_Conditional_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(
|
|
958
|
-
i0.ɵɵtemplate(1, SideNavMenuComponent_For_29_Conditional_1_ng_container_1_Template, 1, 0, "ng-container",
|
|
951
|
+
const _r9 = i0.ɵɵgetCurrentView();
|
|
952
|
+
i0.ɵɵelementStart(0, "button", 31);
|
|
953
|
+
i0.ɵɵlistener("click", function SideNavMenuComponent_For_29_Conditional_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r9); const item_r7 = i0.ɵɵnextContext().$implicit; return i0.ɵɵresetView(item_r7.button == null ? null : item_r7.button.callback()); });
|
|
954
|
+
i0.ɵɵtemplate(1, SideNavMenuComponent_For_29_Conditional_1_ng_container_1_Template, 1, 0, "ng-container", 30);
|
|
959
955
|
i0.ɵɵelementEnd();
|
|
960
956
|
} if (rf & 2) {
|
|
961
|
-
const
|
|
957
|
+
const item_r7 = i0.ɵɵnextContext().$implicit;
|
|
962
958
|
i0.ɵɵnextContext();
|
|
963
|
-
const
|
|
959
|
+
const profileMenuItem_r8 = i0.ɵɵreference(31);
|
|
964
960
|
i0.ɵɵadvance();
|
|
965
|
-
i0.ɵɵproperty("ngTemplateOutlet",
|
|
961
|
+
i0.ɵɵproperty("ngTemplateOutlet", profileMenuItem_r8)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c0, item_r7.icon, item_r7.label));
|
|
966
962
|
} }
|
|
967
963
|
function SideNavMenuComponent_For_29_Template(rf, ctx) { if (rf & 1) {
|
|
968
964
|
i0.ɵɵtemplate(0, SideNavMenuComponent_For_29_Conditional_0_Template, 2, 1)(1, SideNavMenuComponent_For_29_Conditional_1_Template, 2, 5, "button", 27);
|
|
969
965
|
} if (rf & 2) {
|
|
970
|
-
const
|
|
971
|
-
i0.ɵɵconditional(
|
|
966
|
+
const item_r7 = ctx.$implicit;
|
|
967
|
+
i0.ɵɵconditional(item_r7.link ? 0 : 1);
|
|
972
968
|
} }
|
|
973
969
|
function SideNavMenuComponent_ng_template_30_Conditional_0_Conditional_0_Template(rf, ctx) { if (rf & 1) {
|
|
974
|
-
i0.ɵɵelementStart(0, "span",
|
|
970
|
+
i0.ɵɵelementStart(0, "span", 34);
|
|
975
971
|
i0.ɵɵtext(1);
|
|
976
972
|
i0.ɵɵelementEnd();
|
|
977
973
|
} if (rf & 2) {
|
|
978
|
-
const
|
|
979
|
-
i0.ɵɵclassProp("material-icons-outlined",
|
|
974
|
+
const icon_r10 = i0.ɵɵnextContext(2).icon;
|
|
975
|
+
i0.ɵɵclassProp("material-icons-outlined", icon_r10 == null ? null : icon_r10.isOutlined);
|
|
980
976
|
i0.ɵɵadvance();
|
|
981
|
-
i0.ɵɵtextInterpolate1(" ",
|
|
977
|
+
i0.ɵɵtextInterpolate1(" ", icon_r10 == null ? null : icon_r10.name, " ");
|
|
982
978
|
} }
|
|
983
979
|
function SideNavMenuComponent_ng_template_30_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
984
|
-
i0.ɵɵelement(0, "mat-icon",
|
|
980
|
+
i0.ɵɵelement(0, "mat-icon", 33);
|
|
985
981
|
} if (rf & 2) {
|
|
986
|
-
const
|
|
987
|
-
i0.ɵɵproperty("svgIcon",
|
|
982
|
+
const icon_r10 = i0.ɵɵnextContext(2).icon;
|
|
983
|
+
i0.ɵɵproperty("svgIcon", icon_r10 == null ? null : icon_r10.name);
|
|
988
984
|
} }
|
|
989
985
|
function SideNavMenuComponent_ng_template_30_Conditional_0_Template(rf, ctx) { if (rf & 1) {
|
|
990
|
-
i0.ɵɵtemplate(0, SideNavMenuComponent_ng_template_30_Conditional_0_Conditional_0_Template, 2, 3, "span",
|
|
986
|
+
i0.ɵɵtemplate(0, SideNavMenuComponent_ng_template_30_Conditional_0_Conditional_0_Template, 2, 3, "span", 32)(1, SideNavMenuComponent_ng_template_30_Conditional_0_Conditional_1_Template, 1, 1, "mat-icon", 33);
|
|
991
987
|
} if (rf & 2) {
|
|
992
|
-
const
|
|
993
|
-
i0.ɵɵconditional(!(
|
|
988
|
+
const icon_r10 = i0.ɵɵnextContext().icon;
|
|
989
|
+
i0.ɵɵconditional(!(icon_r10 == null ? null : icon_r10.isCustom) ? 0 : 1);
|
|
994
990
|
} }
|
|
995
991
|
function SideNavMenuComponent_ng_template_30_Template(rf, ctx) { if (rf & 1) {
|
|
996
992
|
i0.ɵɵtemplate(0, SideNavMenuComponent_ng_template_30_Conditional_0_Template, 2, 1);
|
|
997
993
|
i0.ɵɵtext(1);
|
|
998
994
|
i0.ɵɵpipe(2, "translate");
|
|
999
995
|
} if (rf & 2) {
|
|
1000
|
-
const
|
|
1001
|
-
const
|
|
1002
|
-
i0.ɵɵconditional(
|
|
996
|
+
const icon_r10 = ctx.icon;
|
|
997
|
+
const label_r11 = ctx.label;
|
|
998
|
+
i0.ɵɵconditional(icon_r10 ? 0 : -1);
|
|
1003
999
|
i0.ɵɵadvance();
|
|
1004
|
-
i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(2, 2,
|
|
1000
|
+
i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(2, 2, label_r11), " ");
|
|
1005
1001
|
} }
|
|
1006
1002
|
class SideNavMenuComponent extends NavBaseComponent {
|
|
1007
1003
|
#username;
|
|
@@ -1062,11 +1058,6 @@ class SideNavMenuComponent extends NavBaseComponent {
|
|
|
1062
1058
|
this.collapsed = !this.collapsed;
|
|
1063
1059
|
this.setColapsedFromLocalStorage();
|
|
1064
1060
|
}
|
|
1065
|
-
linkCallback(link) {
|
|
1066
|
-
if (link.callback) {
|
|
1067
|
-
link.callback();
|
|
1068
|
-
}
|
|
1069
|
-
}
|
|
1070
1061
|
getColapsedFromLocalStorage() {
|
|
1071
1062
|
if (!this.domService.localStorage) {
|
|
1072
1063
|
return;
|
|
@@ -1094,7 +1085,7 @@ class SideNavMenuComponent extends NavBaseComponent {
|
|
|
1094
1085
|
this.userInitials = splittedUsername[0][0] + splittedUsername[1][0];
|
|
1095
1086
|
}
|
|
1096
1087
|
static { this.ɵfac = function SideNavMenuComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SideNavMenuComponent)(i0.ɵɵdirectiveInject(i1.StrapiLinkService), i0.ɵɵdirectiveInject(i2.DOMService), i0.ɵɵdirectiveInject(MenuItemsService)); }; }
|
|
1097
|
-
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SideNavMenuComponent, selectors: [["lib-side-nav-menu"]], inputs: { username: "username", menuSettings: "menuSettings", productName: "productName" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 32, vars: 31, consts: [["menu", "matMenu"], ["profileMenuItem", ""], ["state", "matMenuTrigger"], ["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", "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"], ["class", "profile-wrapper", 3, "matMenuTriggerFor", 4, "ngIf"], [1, "profile-menu"], [1, "profile-wrapper", 3, "matMenuTriggerFor"], [1, "profile-icon"], [4, "ngIf"], [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"], [
|
|
1088
|
+
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SideNavMenuComponent, selectors: [["lib-side-nav-menu"]], inputs: { username: "username", menuSettings: "menuSettings", productName: "productName" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 32, vars: 31, consts: [["menu", "matMenu"], ["profileMenuItem", ""], ["state", "matMenuTrigger"], ["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", "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"], ["class", "profile-wrapper", 3, "matMenuTriggerFor", 4, "ngIf"], [1, "profile-menu"], [1, "profile-wrapper", 3, "matMenuTriggerFor"], [1, "profile-icon"], [4, "ngIf"], [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"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], ["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) {
|
|
1098
1089
|
const _r1 = i0.ɵɵgetCurrentView();
|
|
1099
1090
|
i0.ɵɵelementStart(0, "div", 4)(1, "div", 5)(2, "a", 6);
|
|
1100
1091
|
i0.ɵɵpipe(3, "translate");
|
|
@@ -1163,11 +1154,11 @@ class SideNavMenuComponent extends NavBaseComponent {
|
|
|
1163
1154
|
i0.ɵɵproperty("ngIf", ctx.userInitials);
|
|
1164
1155
|
i0.ɵɵadvance(3);
|
|
1165
1156
|
i0.ɵɵrepeater(ctx.menuSettings.userOptions);
|
|
1166
|
-
} }, 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(--
|
|
1157
|
+
} }, 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(--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)}}"] }); }
|
|
1167
1158
|
}
|
|
1168
1159
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SideNavMenuComponent, [{
|
|
1169
1160
|
type: Component,
|
|
1170
|
-
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 *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=\"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\"
|
|
1161
|
+
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 *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=\"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\">\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>\r\n</div>\r\n", 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: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"] }]
|
|
1171
1162
|
}], () => [{ type: i1.StrapiLinkService }, { type: i2.DOMService }, { type: MenuItemsService }], { username: [{
|
|
1172
1163
|
type: Input
|
|
1173
1164
|
}], menuSettings: [{
|
|
@@ -1175,7 +1166,7 @@ class SideNavMenuComponent extends NavBaseComponent {
|
|
|
1175
1166
|
}], productName: [{
|
|
1176
1167
|
type: Input
|
|
1177
1168
|
}] }); })();
|
|
1178
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SideNavMenuComponent, { className: "SideNavMenuComponent", filePath: "lib\\components\\side-nav-menu\\side-nav-menu.component.ts", lineNumber:
|
|
1169
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SideNavMenuComponent, { className: "SideNavMenuComponent", filePath: "lib\\components\\side-nav-menu\\side-nav-menu.component.ts", lineNumber: 14 }); })();
|
|
1179
1170
|
|
|
1180
1171
|
class MenuModule {
|
|
1181
1172
|
static forRoot(config) {
|
|
@@ -1256,45 +1247,37 @@ class MenuModule {
|
|
|
1256
1247
|
* Prefefined user menu options, so that same style of items are used across all products. Use this by passing necessary configuration.
|
|
1257
1248
|
*/
|
|
1258
1249
|
const USER_MENU_OPTIONS = {
|
|
1259
|
-
subscription: (href
|
|
1250
|
+
subscription: (href) => ({
|
|
1260
1251
|
icon: { name: "credit_card" },
|
|
1261
1252
|
label: 'MENU.SUBSCRIPTION',
|
|
1262
|
-
link: { href: href
|
|
1253
|
+
link: { href: href }
|
|
1263
1254
|
}),
|
|
1264
|
-
termsOfUse: (href
|
|
1255
|
+
termsOfUse: (href) => ({
|
|
1265
1256
|
icon: { name: "text_snippet" },
|
|
1266
1257
|
label: 'MENU.TERMS_OF_USE',
|
|
1267
|
-
link: { href, isExternal: true
|
|
1258
|
+
link: { href, isExternal: true }
|
|
1268
1259
|
}),
|
|
1269
|
-
privacy: (href
|
|
1260
|
+
privacy: (href) => ({
|
|
1270
1261
|
icon: { name: "gpp_maybe" },
|
|
1271
1262
|
label: 'MENU.PRIVACY',
|
|
1272
|
-
link: { href, isExternal: true
|
|
1263
|
+
link: { href, isExternal: true },
|
|
1273
1264
|
}),
|
|
1274
|
-
help: (href
|
|
1265
|
+
help: (href) => ({
|
|
1275
1266
|
label: 'MENU.HELP_CENTER',
|
|
1276
1267
|
icon: { name: `help` },
|
|
1277
|
-
link: { href, isExternal: true
|
|
1268
|
+
link: { href, isExternal: true }
|
|
1278
1269
|
}),
|
|
1279
|
-
contactUs: (href
|
|
1270
|
+
contactUs: (href) => ({
|
|
1280
1271
|
label: 'MENU.CONTACT_US',
|
|
1281
1272
|
icon: { name: `mail` },
|
|
1282
|
-
link: { href, isExternal: true
|
|
1273
|
+
link: { href, isExternal: true }
|
|
1283
1274
|
}),
|
|
1284
|
-
|
|
1285
|
-
changeLanguage: (dialog, languages, languageChangeCallback) => ({
|
|
1275
|
+
changeLanguage: (dialog, languages) => ({
|
|
1286
1276
|
label: 'MENU.CHANGE_LANGUAGE',
|
|
1287
1277
|
icon: { name: "language" },
|
|
1288
|
-
button: {
|
|
1289
|
-
|
|
1290
|
-
|
|
1291
|
-
.afterClosed().subscribe((language) => {
|
|
1292
|
-
if (language && languageChangeCallback) {
|
|
1293
|
-
languageChangeCallback(language);
|
|
1294
|
-
}
|
|
1295
|
-
});
|
|
1296
|
-
}
|
|
1297
|
-
}
|
|
1278
|
+
button: { callback: () => {
|
|
1279
|
+
dialog.open(SelectLanguageDialogComponent, { data: { languages: languages } });
|
|
1280
|
+
} }
|
|
1298
1281
|
}),
|
|
1299
1282
|
logout: (callback) => ({
|
|
1300
1283
|
icon: { name: "logout" },
|