@tilde-nlp/ngx-menu 8.1.57 → 8.1.59
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/fesm2022/tilde-nlp-ngx-menu.mjs +200 -149
- package/fesm2022/tilde-nlp-ngx-menu.mjs.map +1 -1
- package/index.d.ts +13 -5
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Injectable, Optional, Inject, Component, Input, EventEmitter, computed, Output, inject, input, output, NgModule } from '@angular/core';
|
|
2
|
+
import { signal, Injectable, Optional, Inject, Component, Input, EventEmitter, computed, Output, inject, input, output, NgModule } from '@angular/core';
|
|
3
3
|
import * as i2 from '@tilde-nlp/ngx-common';
|
|
4
4
|
import { AccessibilityContrasts, ResolutionHelper, UILanguageService, AccessibilityDialogComponent, PlausibleModule, SelectLanguageDialogComponent } from '@tilde-nlp/ngx-common';
|
|
5
5
|
import * as i1$1 from '@angular/router';
|
|
@@ -52,15 +52,16 @@ class StarpiMenuService {
|
|
|
52
52
|
this.menuConfig = menuConfig;
|
|
53
53
|
this.iconService = iconService;
|
|
54
54
|
this.svgIconNamePrefix = "strapi-menu-icon-";
|
|
55
|
-
this.
|
|
56
|
-
this.
|
|
57
|
-
this.
|
|
55
|
+
this.apiUrl = '';
|
|
56
|
+
this.strapiMenu = signal(null, ...(ngDevMode ? [{ debugName: "strapiMenu" }] : []));
|
|
57
|
+
this.apiUrl = strapiConfig?.apiUrl;
|
|
58
58
|
this.appId = menuConfig.appId;
|
|
59
59
|
}
|
|
60
60
|
getMenuItems() {
|
|
61
61
|
const responseObs = this.strapiSubscription.subscribeSingleType(SingleTypes.MENU)
|
|
62
62
|
.pipe(map((menu) => {
|
|
63
|
-
this.
|
|
63
|
+
this.strapiMenu.set(menu);
|
|
64
|
+
menu?.profileItems?.forEach((item) => this.registerSvgIcon(item.icon));
|
|
64
65
|
let items = menu?.items;
|
|
65
66
|
const convertedItems = [];
|
|
66
67
|
if (!items || items.length === 0) {
|
|
@@ -69,15 +70,7 @@ class StarpiMenuService {
|
|
|
69
70
|
items = this.filterMenuItems(items);
|
|
70
71
|
items.forEach((menu) => {
|
|
71
72
|
menu.link = this.addBaseUrlIfNecessary(menu.link);
|
|
72
|
-
|
|
73
|
-
if (originalMenuIcon?.url.startsWith('/')) {
|
|
74
|
-
originalMenuIcon.url = this.imgBaseUrl + originalMenuIcon.url;
|
|
75
|
-
}
|
|
76
|
-
if (originalMenuIcon?.ext === MENU_ICON_STRAPI_EXTENSION) {
|
|
77
|
-
// add custom prefix so that it is not easy to mix with other icons in registry
|
|
78
|
-
menu.icon.name = this.svgIconNamePrefix + originalMenuIcon.name;
|
|
79
|
-
this.iconService.registerIconFromUrl(originalMenuIcon.name, originalMenuIcon.url);
|
|
80
|
-
}
|
|
73
|
+
this.registerSvgIcon(menu.icon);
|
|
81
74
|
convertedItems.push(this.convertToCustomMenuItem(menu));
|
|
82
75
|
});
|
|
83
76
|
return convertedItems;
|
|
@@ -87,6 +80,19 @@ class StarpiMenuService {
|
|
|
87
80
|
unsubscribe() {
|
|
88
81
|
this.strapiSubscription.unsubscribe(SingleTypes.MENU);
|
|
89
82
|
}
|
|
83
|
+
registerSvgIcon(icon) {
|
|
84
|
+
if (!icon) {
|
|
85
|
+
return;
|
|
86
|
+
}
|
|
87
|
+
if (icon.url?.startsWith('/')) {
|
|
88
|
+
icon.url = this.apiUrl + icon.url;
|
|
89
|
+
}
|
|
90
|
+
if (icon.ext === MENU_ICON_STRAPI_EXTENSION) {
|
|
91
|
+
// add custom prefix so that it is not easy to mix with other icons in registry
|
|
92
|
+
icon.name = this.svgIconNamePrefix + icon.name;
|
|
93
|
+
this.iconService.registerIconFromUrl(icon.name, icon.url);
|
|
94
|
+
}
|
|
95
|
+
}
|
|
90
96
|
filterMenuItems(items) {
|
|
91
97
|
return items.filter((item) => {
|
|
92
98
|
const isDisabled = item?.disabled;
|
|
@@ -180,14 +186,18 @@ class MenuItemsService {
|
|
|
180
186
|
get strapiDataLocation() { return this.menuSharedConfig?.strapiDataLocation ?? StrapiDataLocation.END; }
|
|
181
187
|
get mergedGroups() { return this._mergedGroups; }
|
|
182
188
|
get menuItemGroups() { return this.menuSharedConfig.itemGroups; }
|
|
183
|
-
get
|
|
184
|
-
return this.strapiService.
|
|
189
|
+
get strapiMenu() {
|
|
190
|
+
return this.strapiService.strapiMenu;
|
|
191
|
+
}
|
|
192
|
+
get strapiApiUrl() {
|
|
193
|
+
return this.strapiService.apiUrl;
|
|
185
194
|
}
|
|
186
195
|
constructor(router, config, strapiService) {
|
|
187
196
|
this.router = router;
|
|
188
197
|
this.config = config;
|
|
189
198
|
this.strapiService = strapiService;
|
|
190
199
|
this._activeElements = new BehaviorSubject({});
|
|
200
|
+
this.isMenuLoaded = signal(false, ...(ngDevMode ? [{ debugName: "isMenuLoaded" }] : []));
|
|
191
201
|
this.strapiItems = [];
|
|
192
202
|
this.isActiveMatchOptions = {
|
|
193
203
|
matrixParams: 'exact',
|
|
@@ -273,6 +283,7 @@ class MenuItemsService {
|
|
|
273
283
|
allItems.forEach((array) => { newArray = newArray.concat(array); });
|
|
274
284
|
this._allRootItems = newArray;
|
|
275
285
|
this.updateActive();
|
|
286
|
+
this.isMenuLoaded.set(true);
|
|
276
287
|
}
|
|
277
288
|
isElementCustomIdActive(element) {
|
|
278
289
|
return this.customId && element.customId === this.customId;
|
|
@@ -331,76 +342,171 @@ class NavBaseComponent {
|
|
|
331
342
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(NavBaseComponent, { className: "NavBaseComponent", filePath: "lib/components/nav-base/nav-base.component.ts", lineNumber: 14 }); })();
|
|
332
343
|
|
|
333
344
|
const _c0$3 = ["*"];
|
|
334
|
-
function
|
|
335
|
-
const
|
|
345
|
+
function SideNavMenuComponent_Conditional_0_a_15_Template(rf, ctx) { if (rf & 1) {
|
|
346
|
+
const _r3 = i0.ɵɵgetCurrentView();
|
|
336
347
|
i0.ɵɵelementStart(0, "a", 1);
|
|
337
348
|
i0.ɵɵpipe(1, "translate");
|
|
338
|
-
i0.ɵɵlistener("click", function
|
|
349
|
+
i0.ɵɵlistener("click", function SideNavMenuComponent_Conditional_0_a_15_Template_a_click_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.logoClick($event)); });
|
|
339
350
|
i0.ɵɵelement(2, "img", 2);
|
|
340
351
|
i0.ɵɵelementStart(3, "span", 3);
|
|
341
352
|
i0.ɵɵtext(4);
|
|
342
353
|
i0.ɵɵelementEnd()();
|
|
343
354
|
} if (rf & 2) {
|
|
344
|
-
const ctx_r1 = i0.ɵɵnextContext();
|
|
355
|
+
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
345
356
|
i0.ɵɵclassProp("no-click", ctx_r1.menuSettings == null ? null : ctx_r1.menuSettings.disableLogoNavigation);
|
|
346
357
|
i0.ɵɵproperty("libPlausibleEvent", ctx_r1.LOGOCLICK_PLAUSIBLE_EVENT)("href", ctx_r1.baseUrl, i0.ɵɵsanitizeUrl);
|
|
347
358
|
i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(1, 7, "ARIA_LABELS.LOGO"));
|
|
348
359
|
i0.ɵɵadvance(2);
|
|
349
360
|
i0.ɵɵproperty("src", ctx_r1.logoImageSource(), i0.ɵɵsanitizeUrl);
|
|
350
361
|
i0.ɵɵadvance(2);
|
|
351
|
-
i0.ɵɵtextInterpolate1(" ", ctx_r1.productName, " ");
|
|
362
|
+
i0.ɵɵtextInterpolate1(" ", ctx_r1.strapiMenuTitle() ?? ctx_r1.productName, " ");
|
|
352
363
|
} }
|
|
353
|
-
function
|
|
364
|
+
function SideNavMenuComponent_Conditional_0_Conditional_26_Template(rf, ctx) { if (rf & 1) {
|
|
354
365
|
i0.ɵɵelement(0, "lib-menu-accessibility", 15);
|
|
355
366
|
} if (rf & 2) {
|
|
356
|
-
const ctx_r1 = i0.ɵɵnextContext();
|
|
367
|
+
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
357
368
|
i0.ɵɵproperty("isCollapsed", ctx_r1.collapsed)("baseUrl", ctx_r1.baseUrl);
|
|
358
369
|
} }
|
|
359
|
-
function
|
|
360
|
-
const
|
|
370
|
+
function SideNavMenuComponent_Conditional_0_Conditional_27_Template(rf, ctx) { if (rf & 1) {
|
|
371
|
+
const _r4 = i0.ɵɵgetCurrentView();
|
|
361
372
|
i0.ɵɵelementStart(0, "lib-menu-lang-switcher", 20);
|
|
362
|
-
i0.ɵɵlistener("changeLanguageEvent", function
|
|
373
|
+
i0.ɵɵlistener("changeLanguageEvent", function SideNavMenuComponent_Conditional_0_Conditional_27_Template_lib_menu_lang_switcher_changeLanguageEvent_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.changeLanguage($event)); });
|
|
363
374
|
i0.ɵɵelementEnd();
|
|
364
375
|
} if (rf & 2) {
|
|
365
|
-
const ctx_r1 = i0.ɵɵnextContext();
|
|
376
|
+
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
366
377
|
i0.ɵɵproperty("isCollapsed", ctx_r1.collapsed)("languages", ctx_r1.supportedLanguages);
|
|
367
378
|
} }
|
|
368
|
-
function
|
|
379
|
+
function SideNavMenuComponent_Conditional_0_Conditional_31_Conditional_1_For_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
|
|
369
380
|
i0.ɵɵtext(0, " \u00A0\u00A0|\u00A0\u00A0 ");
|
|
370
381
|
} }
|
|
371
|
-
function
|
|
382
|
+
function SideNavMenuComponent_Conditional_0_Conditional_31_Conditional_1_For_1_Template(rf, ctx) { if (rf & 1) {
|
|
372
383
|
i0.ɵɵelementStart(0, "a", 21);
|
|
373
384
|
i0.ɵɵtext(1);
|
|
374
385
|
i0.ɵɵelementEnd();
|
|
375
|
-
i0.ɵɵconditionalCreate(2,
|
|
386
|
+
i0.ɵɵconditionalCreate(2, SideNavMenuComponent_Conditional_0_Conditional_31_Conditional_1_For_1_Conditional_2_Template, 1, 0);
|
|
376
387
|
} if (rf & 2) {
|
|
377
|
-
const
|
|
378
|
-
const ɵ$
|
|
379
|
-
const ctx_r1 = i0.ɵɵnextContext(
|
|
380
|
-
i0.ɵɵproperty("href",
|
|
388
|
+
const item_r5 = ctx.$implicit;
|
|
389
|
+
const ɵ$index_68_r6 = ctx.$index;
|
|
390
|
+
const ctx_r1 = i0.ɵɵnextContext(4);
|
|
391
|
+
i0.ɵɵproperty("href", item_r5.link, i0.ɵɵsanitizeUrl);
|
|
381
392
|
i0.ɵɵadvance();
|
|
382
|
-
i0.ɵɵtextInterpolate(
|
|
393
|
+
i0.ɵɵtextInterpolate(item_r5.title);
|
|
383
394
|
i0.ɵɵadvance();
|
|
384
|
-
i0.ɵɵconditional(ɵ$
|
|
395
|
+
i0.ɵɵconditional(ɵ$index_68_r6 !== ctx_r1.footerItems.length - 1 ? 2 : -1);
|
|
385
396
|
} }
|
|
386
|
-
function
|
|
387
|
-
i0.ɵɵrepeaterCreate(0,
|
|
397
|
+
function SideNavMenuComponent_Conditional_0_Conditional_31_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
398
|
+
i0.ɵɵrepeaterCreate(0, SideNavMenuComponent_Conditional_0_Conditional_31_Conditional_1_For_1_Template, 3, 3, null, null, i0.ɵɵrepeaterTrackByIndex);
|
|
388
399
|
} if (rf & 2) {
|
|
389
|
-
const ctx_r1 = i0.ɵɵnextContext(
|
|
400
|
+
const ctx_r1 = i0.ɵɵnextContext(3);
|
|
390
401
|
i0.ɵɵrepeater(ctx_r1.footerItems);
|
|
391
402
|
} }
|
|
392
|
-
function
|
|
403
|
+
function SideNavMenuComponent_Conditional_0_Conditional_31_Template(rf, ctx) { if (rf & 1) {
|
|
393
404
|
i0.ɵɵelementStart(0, "div", 19);
|
|
394
|
-
i0.ɵɵconditionalCreate(1,
|
|
405
|
+
i0.ɵɵconditionalCreate(1, SideNavMenuComponent_Conditional_0_Conditional_31_Conditional_1_Template, 2, 0);
|
|
395
406
|
i0.ɵɵelementEnd();
|
|
396
407
|
} if (rf & 2) {
|
|
397
|
-
const ctx_r1 = i0.ɵɵnextContext();
|
|
408
|
+
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
398
409
|
i0.ɵɵadvance();
|
|
399
410
|
i0.ɵɵconditional(!ctx_r1.collapsed ? 1 : -1);
|
|
400
411
|
} }
|
|
412
|
+
function SideNavMenuComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
|
|
413
|
+
const _r1 = i0.ɵɵgetCurrentView();
|
|
414
|
+
i0.ɵɵelementStart(0, "div", 0)(1, "a", 1);
|
|
415
|
+
i0.ɵɵpipe(2, "translate");
|
|
416
|
+
i0.ɵɵlistener("click", function SideNavMenuComponent_Conditional_0_Template_a_click_1_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.logoClick($event)); });
|
|
417
|
+
i0.ɵɵelement(3, "img", 2);
|
|
418
|
+
i0.ɵɵelementStart(4, "span", 3);
|
|
419
|
+
i0.ɵɵtext(5);
|
|
420
|
+
i0.ɵɵelementEnd()();
|
|
421
|
+
i0.ɵɵelementStart(6, "button", 4);
|
|
422
|
+
i0.ɵɵpipe(7, "translate");
|
|
423
|
+
i0.ɵɵlistener("click", function SideNavMenuComponent_Conditional_0_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleCollapse()); });
|
|
424
|
+
i0.ɵɵelementStart(8, "mat-icon", 5);
|
|
425
|
+
i0.ɵɵtext(9);
|
|
426
|
+
i0.ɵɵelementEnd();
|
|
427
|
+
i0.ɵɵelementStart(10, "mat-icon", 6);
|
|
428
|
+
i0.ɵɵtext(11);
|
|
429
|
+
i0.ɵɵelementEnd()()();
|
|
430
|
+
i0.ɵɵelementStart(12, "div", 7)(13, "div", 8)(14, "div", 9);
|
|
431
|
+
i0.ɵɵtemplate(15, SideNavMenuComponent_Conditional_0_a_15_Template, 5, 9, "a", 10);
|
|
432
|
+
i0.ɵɵelementStart(16, "button", 11);
|
|
433
|
+
i0.ɵɵpipe(17, "translate");
|
|
434
|
+
i0.ɵɵpipe(18, "translate");
|
|
435
|
+
i0.ɵɵlistener("click", function SideNavMenuComponent_Conditional_0_Template_button_click_16_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleCollapse()); });
|
|
436
|
+
i0.ɵɵelementStart(19, "mat-icon", 5);
|
|
437
|
+
i0.ɵɵtext(20);
|
|
438
|
+
i0.ɵɵelementEnd();
|
|
439
|
+
i0.ɵɵelementStart(21, "mat-icon", 6);
|
|
440
|
+
i0.ɵɵtext(22);
|
|
441
|
+
i0.ɵɵelementEnd()()();
|
|
442
|
+
i0.ɵɵelementStart(23, "div", 12)(24, "menu-columns", 13);
|
|
443
|
+
i0.ɵɵlistener("toggleCollapseEvent", function SideNavMenuComponent_Conditional_0_Template_menu_columns_toggleCollapseEvent_24_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleCollapse()); });
|
|
444
|
+
i0.ɵɵelementEnd();
|
|
445
|
+
i0.ɵɵelement(25, "div", 14);
|
|
446
|
+
i0.ɵɵconditionalCreate(26, SideNavMenuComponent_Conditional_0_Conditional_26_Template, 1, 2, "lib-menu-accessibility", 15);
|
|
447
|
+
i0.ɵɵconditionalCreate(27, SideNavMenuComponent_Conditional_0_Conditional_27_Template, 1, 2, "lib-menu-lang-switcher", 16);
|
|
448
|
+
i0.ɵɵelementEnd();
|
|
449
|
+
i0.ɵɵelementStart(28, "div", 17);
|
|
450
|
+
i0.ɵɵprojection(29);
|
|
451
|
+
i0.ɵɵelementEnd();
|
|
452
|
+
i0.ɵɵelementStart(30, "lib-menu-profile", 18);
|
|
453
|
+
i0.ɵɵlistener("linkCallbackEvent", function SideNavMenuComponent_Conditional_0_Template_lib_menu_profile_linkCallbackEvent_30_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.linkCallback($event)); })("loginEvent", function SideNavMenuComponent_Conditional_0_Template_lib_menu_profile_loginEvent_30_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.login()); });
|
|
454
|
+
i0.ɵɵelementEnd();
|
|
455
|
+
i0.ɵɵconditionalCreate(31, SideNavMenuComponent_Conditional_0_Conditional_31_Template, 2, 1, "div", 19);
|
|
456
|
+
i0.ɵɵelementEnd()();
|
|
457
|
+
} if (rf & 2) {
|
|
458
|
+
const ctx_r1 = i0.ɵɵnextContext();
|
|
459
|
+
i0.ɵɵproperty("fxHide", !ctx_r1.collapsed || ctx_r1.collapsed && !ctx_r1.isMobileRes && !ctx_r1.isViewIncreased())("ngClass", ctx_r1.menuSettings.menuVersion);
|
|
460
|
+
i0.ɵɵadvance();
|
|
461
|
+
i0.ɵɵclassProp("no-click", ctx_r1.menuSettings == null ? null : ctx_r1.menuSettings.disableLogoNavigation);
|
|
462
|
+
i0.ɵɵproperty("libPlausibleEvent", ctx_r1.LOGOCLICK_PLAUSIBLE_EVENT)("href", ctx_r1.baseUrl, i0.ɵɵsanitizeUrl);
|
|
463
|
+
i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(2, 42, "ARIA_LABELS.LOGO"));
|
|
464
|
+
i0.ɵɵadvance(2);
|
|
465
|
+
i0.ɵɵproperty("src", ctx_r1.logoImageSource(), i0.ɵɵsanitizeUrl);
|
|
466
|
+
i0.ɵɵadvance(2);
|
|
467
|
+
i0.ɵɵtextInterpolate1(" ", ctx_r1.strapiMenuTitle() ?? ctx_r1.productName, " ");
|
|
468
|
+
i0.ɵɵadvance();
|
|
469
|
+
i0.ɵɵproperty("libPlausibleEvent", ctx_r1.collapsed ? ctx_r1.EXPAND_PLAUSIBLE_EVENT : ctx_r1.COLLAPSE_PLAUSIBLE_EVENT);
|
|
470
|
+
i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(7, 44, "ARIA_LABELS.MENU_TOGGLER"));
|
|
471
|
+
i0.ɵɵadvance(2);
|
|
472
|
+
i0.ɵɵproperty("ngClass.lt-sm", "mob-close-icon");
|
|
473
|
+
i0.ɵɵadvance();
|
|
474
|
+
i0.ɵɵtextInterpolate(ctx_r1.collapsed ? ctx_r1.customIcons.customMobileOpenIcon : ctx_r1.customIcons.customMobileCloseIcon);
|
|
475
|
+
i0.ɵɵadvance(2);
|
|
476
|
+
i0.ɵɵtextInterpolate(ctx_r1.collapsed ? ctx_r1.customIcons.customOpenIcon : ctx_r1.customIcons.customCloseIcon);
|
|
477
|
+
i0.ɵɵadvance();
|
|
478
|
+
i0.ɵɵstyleProp("width", ctx_r1.sideNavWidth);
|
|
479
|
+
i0.ɵɵclassProp("accessibility-view", ctx_r1.isViewIncreased())("collapsed", ctx_r1.collapsed);
|
|
480
|
+
i0.ɵɵproperty("ngClass.lt-sm", "mobile")("ngClass", ctx_r1.menuSettings.menuVersion);
|
|
481
|
+
i0.ɵɵadvance(2);
|
|
482
|
+
i0.ɵɵproperty("fxLayoutAlign", ctx_r1.collapsed ? "center center" : "space-between center");
|
|
483
|
+
i0.ɵɵadvance();
|
|
484
|
+
i0.ɵɵproperty("ngIf", !ctx_r1.collapsed);
|
|
485
|
+
i0.ɵɵadvance();
|
|
486
|
+
i0.ɵɵproperty("libPlausibleEvent", ctx_r1.collapsed ? ctx_r1.EXPAND_PLAUSIBLE_EVENT : ctx_r1.COLLAPSE_PLAUSIBLE_EVENT)("matTooltip", i0.ɵɵpipeBind1(17, 46, ctx_r1.collapsed ? "MENU.EXPAND" : "MENU.COLLAPSE"));
|
|
487
|
+
i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(18, 48, "ARIA_LABELS.MENU_TOGGLER"));
|
|
488
|
+
i0.ɵɵadvance(3);
|
|
489
|
+
i0.ɵɵproperty("ngClass.lt-sm", "mob-close-icon");
|
|
490
|
+
i0.ɵɵadvance();
|
|
491
|
+
i0.ɵɵtextInterpolate(ctx_r1.customIcons.customMobileCloseIcon);
|
|
492
|
+
i0.ɵɵadvance(2);
|
|
493
|
+
i0.ɵɵtextInterpolate(ctx_r1.collapsed ? ctx_r1.customIcons.customOpenIcon : ctx_r1.customIcons.customCloseIcon);
|
|
494
|
+
i0.ɵɵadvance(2);
|
|
495
|
+
i0.ɵɵproperty("direction", ctx_r1.direction)("isOpen", !ctx_r1.collapsed)("active", ctx_r1.active)("expandableMenuChildren", ctx_r1.menuSettings == null ? null : ctx_r1.menuSettings.expandableMenuChildren)("openExternalLinksInSameTab", ctx_r1.menuSettings == null ? null : ctx_r1.menuSettings.openExternalLinksInSameTab);
|
|
496
|
+
i0.ɵɵadvance(2);
|
|
497
|
+
i0.ɵɵconditional((ctx_r1.menuSettings == null ? null : ctx_r1.menuSettings.showAccessibility) ? 26 : -1);
|
|
498
|
+
i0.ɵɵadvance();
|
|
499
|
+
i0.ɵɵconditional(ctx_r1.useDefaultLanguageSwitcher && ctx_r1.supportedLanguages && ctx_r1.supportedLanguages.length > 1 ? 27 : -1);
|
|
500
|
+
i0.ɵɵadvance(3);
|
|
501
|
+
i0.ɵɵproperty("userOptions", ctx_r1.userOptions())("username", ctx_r1.username)("collapsed", ctx_r1.collapsed)("useLargeLoginButton", ctx_r1.menuSettings == null ? null : ctx_r1.menuSettings.useLargeLoginButton);
|
|
502
|
+
i0.ɵɵadvance();
|
|
503
|
+
i0.ɵɵconditional((ctx_r1.footerItems == null ? null : ctx_r1.footerItems.length) ? 31 : -1);
|
|
504
|
+
} }
|
|
401
505
|
class SideNavMenuComponent extends NavBaseComponent {
|
|
402
506
|
#username;
|
|
403
|
-
get username() {
|
|
507
|
+
get username() {
|
|
508
|
+
return this.#username;
|
|
509
|
+
}
|
|
404
510
|
set username(value) {
|
|
405
511
|
// if username is passed whith whitespace in begginining, it breaks UI, so trim it for safety.
|
|
406
512
|
this.#username = value?.trim();
|
|
@@ -409,7 +515,7 @@ class SideNavMenuComponent extends NavBaseComponent {
|
|
|
409
515
|
return this.collapsed ? this.menuSettings.collapsedWidth : this.menuSettings.expandedWidth;
|
|
410
516
|
}
|
|
411
517
|
get footerItems() {
|
|
412
|
-
return this.menuItemsService.footerItems;
|
|
518
|
+
return this.menuItemsService.strapiMenu()?.footerItems;
|
|
413
519
|
}
|
|
414
520
|
constructor(strapiLinkService, domService, menuItems, accessibility) {
|
|
415
521
|
super(menuItems);
|
|
@@ -434,30 +540,51 @@ class SideNavMenuComponent extends NavBaseComponent {
|
|
|
434
540
|
customCloseIcon: 'keyboard_double_arrow_left',
|
|
435
541
|
customMobileCloseIcon: 'close',
|
|
436
542
|
customMobileOpenIcon: 'menu',
|
|
437
|
-
}
|
|
543
|
+
},
|
|
438
544
|
};
|
|
439
545
|
this.useDefaultLanguageSwitcher = true;
|
|
440
546
|
this.changeLanguageEvent = new EventEmitter();
|
|
441
547
|
this.loginEvent = new EventEmitter();
|
|
442
548
|
this.collapsed = false;
|
|
443
|
-
this.COLLAPSED_LOCAL_STORAGE_KEY =
|
|
549
|
+
this.COLLAPSED_LOCAL_STORAGE_KEY = 'TLD_MENU_SIDE_NAV_COLLAPSED';
|
|
444
550
|
//#region Plausible event variables for collapse button
|
|
445
|
-
this.COLLAPSE_PLAUSIBLE_EVENT_ID =
|
|
446
|
-
this.COLLAPSE_PLAUSIBLE_ACTION_KEY =
|
|
447
|
-
this.LOGOCLICK_PLAUSIBLE_ACTION_ID =
|
|
551
|
+
this.COLLAPSE_PLAUSIBLE_EVENT_ID = 'collapseMenu';
|
|
552
|
+
this.COLLAPSE_PLAUSIBLE_ACTION_KEY = 'action';
|
|
553
|
+
this.LOGOCLICK_PLAUSIBLE_ACTION_ID = 'tilde_logo_click';
|
|
448
554
|
this.LOGOCLICK_PLAUSIBLE_EVENT = {
|
|
449
555
|
eventId: this.LOGOCLICK_PLAUSIBLE_ACTION_ID,
|
|
450
|
-
properties: []
|
|
556
|
+
properties: [],
|
|
451
557
|
};
|
|
452
558
|
this.EXPAND_PLAUSIBLE_EVENT = {
|
|
453
559
|
eventId: this.COLLAPSE_PLAUSIBLE_EVENT_ID,
|
|
454
|
-
properties: [{ key: this.COLLAPSE_PLAUSIBLE_ACTION_KEY, value:
|
|
560
|
+
properties: [{ key: this.COLLAPSE_PLAUSIBLE_ACTION_KEY, value: 'expand' }],
|
|
455
561
|
};
|
|
456
562
|
this.COLLAPSE_PLAUSIBLE_EVENT = {
|
|
457
563
|
eventId: this.COLLAPSE_PLAUSIBLE_EVENT_ID,
|
|
458
|
-
properties: [{ key: this.COLLAPSE_PLAUSIBLE_ACTION_KEY, value:
|
|
564
|
+
properties: [{ key: this.COLLAPSE_PLAUSIBLE_ACTION_KEY, value: 'collapse' }],
|
|
459
565
|
};
|
|
566
|
+
this.isMenuReady = computed(() => this.menuItems.isMenuLoaded(), ...(ngDevMode ? [{ debugName: "isMenuReady" }] : []));
|
|
567
|
+
this.userOptions = computed(() => {
|
|
568
|
+
const strapiItems = this.menuItemsService.strapiMenu()?.profileItems ?? [];
|
|
569
|
+
const mappedStrapiItems = strapiItems.map((item) => ({
|
|
570
|
+
label: item.title,
|
|
571
|
+
permission: item.permission,
|
|
572
|
+
icon: {
|
|
573
|
+
name: item.icon?.name,
|
|
574
|
+
isCustom: true,
|
|
575
|
+
},
|
|
576
|
+
link: {
|
|
577
|
+
href: item.link,
|
|
578
|
+
isExternal: item.externalLink,
|
|
579
|
+
},
|
|
580
|
+
}));
|
|
581
|
+
return [...mappedStrapiItems, ...this.menuSettings.userOptions].filter((option) => this.hasPermission(option.permission));
|
|
582
|
+
}, ...(ngDevMode ? [{ debugName: "userOptions" }] : []));
|
|
460
583
|
this.logoImageSource = computed(() => {
|
|
584
|
+
const strapiLogo = this.menuItemsService.strapiMenu()?.logo;
|
|
585
|
+
if (strapiLogo) {
|
|
586
|
+
return `${this.menuItems.strapiApiUrl}${strapiLogo.url}`;
|
|
587
|
+
}
|
|
461
588
|
const preferences = this.accessibility.preferences();
|
|
462
589
|
if (preferences.contrast !== AccessibilityContrasts.BASE) {
|
|
463
590
|
return this.menuSettings.menuLogo.replace('logo', `logo-${preferences.contrast}`);
|
|
@@ -466,6 +593,9 @@ class SideNavMenuComponent extends NavBaseComponent {
|
|
|
466
593
|
return this.collapsed ? (this.menuSettings.menuLogoCollapsed ?? this.menuSettings.menuLogo) : this.menuSettings.menuLogo;
|
|
467
594
|
}
|
|
468
595
|
}, ...(ngDevMode ? [{ debugName: "logoImageSource" }] : []));
|
|
596
|
+
this.strapiMenuTitle = computed(() => {
|
|
597
|
+
return this.menuItemsService.strapiMenu()?.title;
|
|
598
|
+
}, ...(ngDevMode ? [{ debugName: "strapiMenuTitle" }] : []));
|
|
469
599
|
this.isMobileRes = ResolutionHelper.isMobileRes();
|
|
470
600
|
this.isViewIncreased = computed(() => {
|
|
471
601
|
const isIncreased = this.accessibility.preferences().fontSizeIndex > 0;
|
|
@@ -503,7 +633,8 @@ class SideNavMenuComponent extends NavBaseComponent {
|
|
|
503
633
|
if (!this.domService.localStorage) {
|
|
504
634
|
return;
|
|
505
635
|
}
|
|
506
|
-
this.collapsed =
|
|
636
|
+
this.collapsed =
|
|
637
|
+
this.domService.localStorage.getItem(this.COLLAPSED_LOCAL_STORAGE_KEY) == 'true' || ResolutionHelper.isMobileRes() ? true : false;
|
|
507
638
|
}
|
|
508
639
|
setColapsedFromLocalStorage() {
|
|
509
640
|
if (!this.domService.localStorage) {
|
|
@@ -517,106 +648,26 @@ class SideNavMenuComponent extends NavBaseComponent {
|
|
|
517
648
|
customOpenIcon: customOpenIcon ?? 'keyboard_double_arrow_right',
|
|
518
649
|
customCloseIcon: customCloseIcon ?? 'keyboard_double_arrow_left',
|
|
519
650
|
customMobileCloseIcon: customMobileCloseIcon ?? 'close',
|
|
520
|
-
customMobileOpenIcon: customMobileOpenIcon ?? 'menu'
|
|
651
|
+
customMobileOpenIcon: customMobileOpenIcon ?? 'menu',
|
|
521
652
|
};
|
|
522
653
|
}
|
|
654
|
+
hasPermission(permission) {
|
|
655
|
+
if (permission === undefined || permission === null) {
|
|
656
|
+
return true;
|
|
657
|
+
}
|
|
658
|
+
return this.menuItems.menuSharedConfig.permissions?.includes(permission) ?? false;
|
|
659
|
+
}
|
|
523
660
|
static { this.ɵfac = function SideNavMenuComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SideNavMenuComponent)(i0.ɵɵdirectiveInject(i1.StrapiLinkService), i0.ɵɵdirectiveInject(i2.DOMService), i0.ɵɵdirectiveInject(MenuItemsService), i0.ɵɵdirectiveInject(i2.AccessibilityService)); }; }
|
|
524
|
-
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SideNavMenuComponent, selectors: [["lib-side-nav-menu"]], inputs: { username: "username", menuSettings: "menuSettings", productName: "productName", supportedLanguages: "supportedLanguages", useDefaultLanguageSwitcher: "useDefaultLanguageSwitcher" }, outputs: { changeLanguageEvent: "changeLanguageEvent", loginEvent: "loginEvent" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c0$3, decls:
|
|
661
|
+
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SideNavMenuComponent, selectors: [["lib-side-nav-menu"]], inputs: { username: "username", menuSettings: "menuSettings", productName: "productName", supportedLanguages: "supportedLanguages", useDefaultLanguageSwitcher: "useDefaultLanguageSwitcher" }, outputs: { changeLanguageEvent: "changeLanguageEvent", loginEvent: "loginEvent" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c0$3, decls: 1, vars: 1, consts: [[1, "mobile-header", 3, "fxHide", "ngClass"], ["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"], ["fxHide.gt-xs", "", 3, "ngClass.lt-sm"], ["fxHide.lt-sm", ""], ["fxLayout", "column", 1, "menu-container", 3, "ngClass.lt-sm", "ngClass"], ["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"], ["fxLayout", "column", 1, "menu-wrapper"], ["role", "navigation", 3, "toggleCollapseEvent", "direction", "isOpen", "active", "expandableMenuChildren", "openExternalLinksInSameTab"], ["fxHide.gt-xs", "", 1, "menu-divider"], [3, "isCollapsed", "baseUrl"], [3, "isCollapsed", "languages"], ["fxFlex", "", "fxLayout", "column"], [3, "linkCallbackEvent", "loginEvent", "userOptions", "username", "collapsed", "useLargeLoginButton"], [1, "menu-footer"], [3, "changeLanguageEvent", "isCollapsed", "languages"], ["target", "_blank", 3, "href"]], template: function SideNavMenuComponent_Template(rf, ctx) { if (rf & 1) {
|
|
525
662
|
i0.ɵɵprojectionDef();
|
|
526
|
-
i0.ɵɵ
|
|
527
|
-
i0.ɵɵpipe(2, "translate");
|
|
528
|
-
i0.ɵɵlistener("click", function SideNavMenuComponent_Template_a_click_1_listener($event) { return ctx.logoClick($event); });
|
|
529
|
-
i0.ɵɵelement(3, "img", 2);
|
|
530
|
-
i0.ɵɵelementStart(4, "span", 3);
|
|
531
|
-
i0.ɵɵtext(5);
|
|
532
|
-
i0.ɵɵelementEnd()();
|
|
533
|
-
i0.ɵɵelementStart(6, "button", 4);
|
|
534
|
-
i0.ɵɵpipe(7, "translate");
|
|
535
|
-
i0.ɵɵlistener("click", function SideNavMenuComponent_Template_button_click_6_listener() { return ctx.toggleCollapse(); });
|
|
536
|
-
i0.ɵɵelementStart(8, "mat-icon", 5);
|
|
537
|
-
i0.ɵɵtext(9);
|
|
538
|
-
i0.ɵɵelementEnd();
|
|
539
|
-
i0.ɵɵelementStart(10, "mat-icon", 6);
|
|
540
|
-
i0.ɵɵtext(11);
|
|
541
|
-
i0.ɵɵelementEnd()()();
|
|
542
|
-
i0.ɵɵelementStart(12, "div", 7)(13, "div", 8)(14, "div", 9);
|
|
543
|
-
i0.ɵɵtemplate(15, SideNavMenuComponent_a_15_Template, 5, 9, "a", 10);
|
|
544
|
-
i0.ɵɵelementStart(16, "button", 11);
|
|
545
|
-
i0.ɵɵpipe(17, "translate");
|
|
546
|
-
i0.ɵɵpipe(18, "translate");
|
|
547
|
-
i0.ɵɵlistener("click", function SideNavMenuComponent_Template_button_click_16_listener() { return ctx.toggleCollapse(); });
|
|
548
|
-
i0.ɵɵelementStart(19, "mat-icon", 5);
|
|
549
|
-
i0.ɵɵtext(20);
|
|
550
|
-
i0.ɵɵelementEnd();
|
|
551
|
-
i0.ɵɵelementStart(21, "mat-icon", 6);
|
|
552
|
-
i0.ɵɵtext(22);
|
|
553
|
-
i0.ɵɵelementEnd()()();
|
|
554
|
-
i0.ɵɵelementStart(23, "div", 12)(24, "menu-columns", 13);
|
|
555
|
-
i0.ɵɵlistener("toggleCollapseEvent", function SideNavMenuComponent_Template_menu_columns_toggleCollapseEvent_24_listener() { return ctx.toggleCollapse(); });
|
|
556
|
-
i0.ɵɵelementEnd();
|
|
557
|
-
i0.ɵɵelement(25, "div", 14);
|
|
558
|
-
i0.ɵɵconditionalCreate(26, SideNavMenuComponent_Conditional_26_Template, 1, 2, "lib-menu-accessibility", 15);
|
|
559
|
-
i0.ɵɵconditionalCreate(27, SideNavMenuComponent_Conditional_27_Template, 1, 2, "lib-menu-lang-switcher", 16);
|
|
560
|
-
i0.ɵɵelementEnd();
|
|
561
|
-
i0.ɵɵelementStart(28, "div", 17);
|
|
562
|
-
i0.ɵɵprojection(29);
|
|
563
|
-
i0.ɵɵelementEnd();
|
|
564
|
-
i0.ɵɵelementStart(30, "lib-menu-profile", 18);
|
|
565
|
-
i0.ɵɵlistener("linkCallbackEvent", function SideNavMenuComponent_Template_lib_menu_profile_linkCallbackEvent_30_listener($event) { return ctx.linkCallback($event); })("loginEvent", function SideNavMenuComponent_Template_lib_menu_profile_loginEvent_30_listener() { return ctx.login(); });
|
|
566
|
-
i0.ɵɵelementEnd();
|
|
567
|
-
i0.ɵɵconditionalCreate(31, SideNavMenuComponent_Conditional_31_Template, 2, 1, "div", 19);
|
|
568
|
-
i0.ɵɵelementEnd()();
|
|
663
|
+
i0.ɵɵconditionalCreate(0, SideNavMenuComponent_Conditional_0_Template, 32, 50);
|
|
569
664
|
} if (rf & 2) {
|
|
570
|
-
i0.ɵɵ
|
|
571
|
-
|
|
572
|
-
i0.ɵɵclassProp("no-click", ctx.menuSettings == null ? null : ctx.menuSettings.disableLogoNavigation);
|
|
573
|
-
i0.ɵɵproperty("libPlausibleEvent", ctx.LOGOCLICK_PLAUSIBLE_EVENT)("href", ctx.baseUrl, i0.ɵɵsanitizeUrl);
|
|
574
|
-
i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(2, 42, "ARIA_LABELS.LOGO"));
|
|
575
|
-
i0.ɵɵadvance(2);
|
|
576
|
-
i0.ɵɵproperty("src", ctx.logoImageSource(), i0.ɵɵsanitizeUrl);
|
|
577
|
-
i0.ɵɵadvance(2);
|
|
578
|
-
i0.ɵɵtextInterpolate1(" ", ctx.productName, " ");
|
|
579
|
-
i0.ɵɵadvance();
|
|
580
|
-
i0.ɵɵproperty("libPlausibleEvent", ctx.collapsed ? ctx.EXPAND_PLAUSIBLE_EVENT : ctx.COLLAPSE_PLAUSIBLE_EVENT);
|
|
581
|
-
i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(7, 44, "ARIA_LABELS.MENU_TOGGLER"));
|
|
582
|
-
i0.ɵɵadvance(2);
|
|
583
|
-
i0.ɵɵproperty("ngClass.lt-sm", "mob-close-icon");
|
|
584
|
-
i0.ɵɵadvance();
|
|
585
|
-
i0.ɵɵtextInterpolate(ctx.collapsed ? ctx.customIcons.customMobileOpenIcon : ctx.customIcons.customMobileCloseIcon);
|
|
586
|
-
i0.ɵɵadvance(2);
|
|
587
|
-
i0.ɵɵtextInterpolate(ctx.collapsed ? ctx.customIcons.customOpenIcon : ctx.customIcons.customCloseIcon);
|
|
588
|
-
i0.ɵɵadvance();
|
|
589
|
-
i0.ɵɵstyleProp("width", ctx.sideNavWidth);
|
|
590
|
-
i0.ɵɵclassProp("accessibility-view", ctx.isViewIncreased())("collapsed", ctx.collapsed);
|
|
591
|
-
i0.ɵɵproperty("ngClass.lt-sm", "mobile")("ngClass", ctx.menuSettings.menuVersion);
|
|
592
|
-
i0.ɵɵadvance(2);
|
|
593
|
-
i0.ɵɵproperty("fxLayoutAlign", ctx.collapsed ? "center center" : "space-between center");
|
|
594
|
-
i0.ɵɵadvance();
|
|
595
|
-
i0.ɵɵproperty("ngIf", !ctx.collapsed);
|
|
596
|
-
i0.ɵɵadvance();
|
|
597
|
-
i0.ɵɵproperty("libPlausibleEvent", ctx.collapsed ? ctx.EXPAND_PLAUSIBLE_EVENT : ctx.COLLAPSE_PLAUSIBLE_EVENT)("matTooltip", i0.ɵɵpipeBind1(17, 46, ctx.collapsed ? "MENU.EXPAND" : "MENU.COLLAPSE"));
|
|
598
|
-
i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(18, 48, "ARIA_LABELS.MENU_TOGGLER"));
|
|
599
|
-
i0.ɵɵadvance(3);
|
|
600
|
-
i0.ɵɵproperty("ngClass.lt-sm", "mob-close-icon");
|
|
601
|
-
i0.ɵɵadvance();
|
|
602
|
-
i0.ɵɵtextInterpolate(ctx.customIcons.customMobileCloseIcon);
|
|
603
|
-
i0.ɵɵadvance(2);
|
|
604
|
-
i0.ɵɵtextInterpolate(ctx.collapsed ? ctx.customIcons.customOpenIcon : ctx.customIcons.customCloseIcon);
|
|
605
|
-
i0.ɵɵadvance(2);
|
|
606
|
-
i0.ɵɵproperty("direction", ctx.direction)("isOpen", !ctx.collapsed)("active", ctx.active)("expandableMenuChildren", ctx.menuSettings == null ? null : ctx.menuSettings.expandableMenuChildren)("openExternalLinksInSameTab", ctx.menuSettings == null ? null : ctx.menuSettings.openExternalLinksInSameTab);
|
|
607
|
-
i0.ɵɵadvance(2);
|
|
608
|
-
i0.ɵɵconditional((ctx.menuSettings == null ? null : ctx.menuSettings.showAccessibility) ? 26 : -1);
|
|
609
|
-
i0.ɵɵadvance();
|
|
610
|
-
i0.ɵɵconditional(ctx.useDefaultLanguageSwitcher && ctx.supportedLanguages && ctx.supportedLanguages.length > 1 ? 27 : -1);
|
|
611
|
-
i0.ɵɵadvance(3);
|
|
612
|
-
i0.ɵɵproperty("userOptions", ctx.menuSettings.userOptions)("username", ctx.username)("collapsed", ctx.collapsed)("useLargeLoginButton", ctx.menuSettings == null ? null : ctx.menuSettings.useLargeLoginButton);
|
|
613
|
-
i0.ɵɵadvance();
|
|
614
|
-
i0.ɵɵconditional(ctx.footerItems.length ? 31 : -1);
|
|
615
|
-
} }, styles: ["a[_ngcontent-%COMP%]{text-decoration:none}.menu-container[_ngcontent-%COMP%]:not(.collapsed) menu-columns[_ngcontent-%COMP%]{margin-right:-12px;padding-right:8px;max-height:fit-content;overflow-y:scroll}.no-click[_ngcontent-%COMP%]{pointer-events:none!important}.mobile-header[_ngcontent-%COMP%]{display:flex;justify-content:space-between;padding:23px 27px;background-color:var(--base-100);border:1px solid var(--base-70)}.accessibility-view.menu-container[_ngcontent-%COMP%]:not(.collapsed), .mobile.menu-container[_ngcontent-%COMP%]:not(.collapsed){display:block!important;position:fixed;min-width:100vw;max-width:100vw;min-height:100dvh;z-index:1000} .mobile.menu-container.collapsed, .accessibility-view.menu-container.collapsed{display:none!important}button[_ngcontent-%COMP%]:has(.mob-close-icon){margin-right:10px}.menu-container[_ngcontent-%COMP%] [_ngcontent-%COMP%]::-webkit-scrollbar{width:5px}.menu-container[_ngcontent-%COMP%] [_ngcontent-%COMP%]::-webkit-scrollbar-thumb{background:var(--base-95);background-clip:padding-box}.menu-container[_ngcontent-%COMP%] [_ngcontent-%COMP%]::-webkit-scrollbar-track{background:var(--base-100)}.menu-product-name[_ngcontent-%COMP%]{white-space:nowrap;margin-left:12px;font-weight:600;color:var(--base-10)}.menu-container[_ngcontent-%COMP%]{max-height:100dvh;white-space:nowrap;height:100%;transition:width .2s ease;min-height:100dvh;overflow:auto;background:var(--base-100);border-right:2px solid var(--base-95)}.menu-container[_ngcontent-%COMP%] .menu-container-header[_ngcontent-%COMP%]{margin:24px 0;max-height:40px}.menu-container.collapsed[_ngcontent-%COMP%] .menu-container-header[_ngcontent-%COMP%]{margin:24px 0 32px!important}.menu-container[_ngcontent-%COMP%] .content[_ngcontent-%COMP%]:not(.collapsed){overflow-x:hidden;padding:0 12px}.menu-container[_ngcontent-%COMP%] .content[_ngcontent-%COMP%]:not(.collapsed) .menu-logo[_ngcontent-%COMP%]{margin-left:16px;max-width:100%}.menu-container[_ngcontent-%COMP%] .divider[_ngcontent-%COMP%]{width:100%}[_nghost-%COMP%] .collapsed .profile-wrapper{margin:36px 0!important}[_nghost-%COMP%] .mobile .profile-name{max-width:60vw}[_nghost-%COMP%] .menu-item, [_nghost-%COMP%] .accessibility-btn, [_nghost-%COMP%] .lang-switcher{touch-action:pan-y!important}[_nghost-%COMP%] .menu-item{display:flex;padding:16px!important;border-radius:4px!important}[_nghost-%COMP%] .collapsed .menu-item{padding:0!important;width:40px;height:40px;border-radius:50%!important}[_nghost-%COMP%] .active-menu-item{background-color:var(--base-95)!important}[_nghost-%COMP%] .menu-item-title{margin-left:12px}[_nghost-%COMP%] .child-list .mob-menu-item .menu-item-title{margin-left:36px!important}tld-menu-icon[_ngcontent-%COMP%]{margin-right:10px}[_nghost-%COMP%] button.collapse-btn .mat-mdc-button-persistent-ripple, [_nghost-%COMP%] button.toggler .mat-mdc-button-persistent-ripple{display:none} .cdk-overlay-container .child-menu, .cdk-overlay-container .profile-menu, .cdk-overlay-container .lang-menu{min-width:250px;margin:10px 0}@media (max-width: 600px){ .cdk-overlay-container .child-menu, .cdk-overlay-container .profile-menu, .cdk-overlay-container .lang-menu{min-width:calc(100vw - 32px)!important}} .mat-mdc-menu-item .mat-icon{margin-right:5px!important} .collapsed .profile-wrapper{justify-content:center!important}.menu-divider[_ngcontent-%COMP%]{border:1px solid var(--base-70)}.menu-footer[_ngcontent-%COMP%]{display:flex;justify-content:center;margin-bottom:20px;color:var(--base-40);font-size:.8125rem}.mobile[_ngcontent-%COMP%] .menu-footer[_ngcontent-%COMP%]{font-size:.875rem;justify-content:space-between;margin-right:16px;margin-left:16px}", ".compact-menu menu-columns{margin-bottom:86px} .compact-menu .profile{margin-top:80px!important} .compact-menu .profile-icon{margin-left:10px!important;min-width:28px!important;height:28px!important;font-size:12px!important} .compact-menu .profile-arrow{margin-right:5px!important} .compact-menu .profile-name{margin-left:10px!important;font-size:.875rem!important;font-weight:600!important} .compact-menu .profile-wrapper{padding:6px 0!important;border-radius:16px!important;border:2px solid var(--base-70)} .compact-menu .menu-wrapper{position:relative;height:100%} .compact-menu .lang-switcher{position:absolute;bottom:0} .compact-menu .accessibility-btn{position:absolute;bottom:46px} .compact-menu .menu-item, .compact-menu .lang-switcher, .compact-menu .accessibility-btn{margin:0 2px;padding:8px 12px!important;border-radius:16px!important} .compact-menu .lang-switcher .menu-arrow{margin-right:-8px} .compact-menu .child-list{margin-left:24px;padding:3px 6px 3px 0} .compact-menu.collapsed .child-list{margin-left:0} .compact-menu.collapsed .accessibility-btn, .compact-menu.collapsed .lang-switcher{padding:0!important;border-radius:50%!important} .compact-menu tld-menu-item-link:not(:first-child){margin-top:0!important;margin-bottom:5px} .compact-menu tld-menu-item-link .title-content{font-weight:400!important}"] }); }
|
|
665
|
+
i0.ɵɵconditional(ctx.isMenuReady() ? 0 : -1);
|
|
666
|
+
} }, styles: ["a[_ngcontent-%COMP%]{text-decoration:none}.menu-container[_ngcontent-%COMP%]:not(.collapsed) menu-columns[_ngcontent-%COMP%]{margin-right:-12px;padding-right:8px;max-height:fit-content;overflow-y:scroll}.no-click[_ngcontent-%COMP%]{pointer-events:none!important}.mobile-header[_ngcontent-%COMP%]{display:flex;justify-content:space-between;padding:23px 13px 23px 27px;background-color:var(--base-100);border:1px solid var(--base-70)}.accessibility-view.menu-container[_ngcontent-%COMP%]:not(.collapsed), .mobile.menu-container[_ngcontent-%COMP%]:not(.collapsed){display:block!important;position:fixed;min-width:100vw;max-width:100vw;min-height:100dvh;z-index:1000} .mobile.menu-container.collapsed, .accessibility-view.menu-container.collapsed{display:none!important}button[_ngcontent-%COMP%]:has(.mob-close-icon){margin-right:10px}.menu-container[_ngcontent-%COMP%] [_ngcontent-%COMP%]::-webkit-scrollbar{width:5px}.menu-container[_ngcontent-%COMP%] [_ngcontent-%COMP%]::-webkit-scrollbar-thumb{background:var(--base-95);background-clip:padding-box}.menu-container[_ngcontent-%COMP%] [_ngcontent-%COMP%]::-webkit-scrollbar-track{background:var(--base-100)}.menu-product-name[_ngcontent-%COMP%]{white-space:nowrap;margin-left:12px;font-weight:600;color:var(--base-10)}.menu-container[_ngcontent-%COMP%]{max-height:100dvh;white-space:nowrap;height:100%;transition:width .2s ease;min-height:100dvh;overflow:auto;background:var(--base-100);border-right:2px solid var(--base-95)}.menu-container[_ngcontent-%COMP%] .menu-container-header[_ngcontent-%COMP%]{margin:24px 0;max-height:40px}.menu-container.collapsed[_ngcontent-%COMP%] .menu-container-header[_ngcontent-%COMP%]{margin:24px 0 32px!important}.menu-container[_ngcontent-%COMP%] .content[_ngcontent-%COMP%]:not(.collapsed){overflow-x:hidden;padding:0 12px}.menu-container[_ngcontent-%COMP%] .content[_ngcontent-%COMP%]:not(.collapsed) .menu-logo[_ngcontent-%COMP%]{margin-left:16px;max-width:100%}.menu-container[_ngcontent-%COMP%] .divider[_ngcontent-%COMP%]{width:100%}[_nghost-%COMP%] .collapsed .profile-wrapper{margin:36px 0!important}[_nghost-%COMP%] .mobile .profile-name{max-width:60vw}[_nghost-%COMP%] .menu-item, [_nghost-%COMP%] .accessibility-btn, [_nghost-%COMP%] .lang-switcher{touch-action:pan-y!important}[_nghost-%COMP%] .menu-item{display:flex;padding:16px!important;border-radius:4px!important}[_nghost-%COMP%] .collapsed .menu-item{padding:0!important;width:40px;height:40px;border-radius:50%!important}[_nghost-%COMP%] .active-menu-item{background-color:var(--base-95)!important}[_nghost-%COMP%] .menu-item-title{margin-left:12px}[_nghost-%COMP%] .child-list .mob-menu-item .menu-item-title{margin-left:36px!important}tld-menu-icon[_ngcontent-%COMP%]{margin-right:10px}[_nghost-%COMP%] button.collapse-btn .mat-mdc-button-persistent-ripple, [_nghost-%COMP%] button.toggler .mat-mdc-button-persistent-ripple{display:none} .cdk-overlay-container .child-menu, .cdk-overlay-container .profile-menu, .cdk-overlay-container .lang-menu{min-width:250px;margin:10px 0}@media (max-width: 600px){ .cdk-overlay-container .child-menu, .cdk-overlay-container .profile-menu, .cdk-overlay-container .lang-menu{min-width:calc(100vw - 32px)!important}} .mat-mdc-menu-item .mat-icon{margin-right:5px!important} .collapsed .profile-wrapper{justify-content:center!important}.menu-divider[_ngcontent-%COMP%]{border:1px solid var(--base-70)}.menu-footer[_ngcontent-%COMP%]{display:flex;justify-content:center;margin-bottom:20px;color:var(--base-40);font-size:.8125rem}.mobile[_ngcontent-%COMP%] .menu-footer[_ngcontent-%COMP%]{font-size:.875rem;justify-content:space-between;margin-right:16px;margin-left:16px}", ".compact-menu menu-columns{margin-bottom:86px} .compact-menu .profile{margin-top:80px!important} .compact-menu .profile-icon{margin-left:10px!important;min-width:28px!important;height:28px!important;font-size:12px!important} .compact-menu .profile-arrow{margin-right:5px!important} .compact-menu .profile-name{margin-left:10px!important;font-size:.875rem!important;font-weight:600!important} .compact-menu .profile-wrapper{padding:6px 0!important;border-radius:16px!important;border:2px solid var(--base-70)} .compact-menu .menu-wrapper{position:relative;height:100%} .compact-menu .lang-switcher{position:absolute;bottom:0} .compact-menu .accessibility-btn{position:absolute;bottom:46px} .compact-menu .menu-item, .compact-menu .lang-switcher, .compact-menu .accessibility-btn{margin:0 2px;padding:8px 12px!important;border-radius:16px!important} .compact-menu .lang-switcher .menu-arrow{margin-right:-8px} .compact-menu .child-list{margin-left:24px;padding:3px 6px 3px 0} .compact-menu.collapsed .child-list{margin-left:0} .compact-menu.collapsed .accessibility-btn, .compact-menu.collapsed .lang-switcher{padding:0!important;border-radius:50%!important} .compact-menu tld-menu-item-link:not(:first-child){margin-top:0!important;margin-bottom:5px} .compact-menu tld-menu-item-link .title-content{font-weight:400!important}"] }); }
|
|
616
667
|
}
|
|
617
668
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SideNavMenuComponent, [{
|
|
618
669
|
type: Component,
|
|
619
|
-
args: [{ selector: 'lib-side-nav-menu', standalone: false, template: "\t<div [fxHide]=\"!collapsed || collapsed && !isMobileRes && !isViewIncreased()\" class=\"mobile-header\" [ngClass]=\"menuSettings.menuVersion\">\r\n\t\t<a\r\n\t\t\t[libPlausibleEvent]=\"LOGOCLICK_PLAUSIBLE_EVENT\"\r\n\t\t\tfxFlex=\"3.125em\"\r\n\t\t\t[href]=\"baseUrl\"\r\n\t\t\t[class.no-click]=\"menuSettings?.disableLogoNavigation\"\r\n\t\t\t[attr.aria-label]=\"'ARIA_LABELS.LOGO' | translate\"\r\n\t\t\t(click)=\"logoClick($event)\"\r\n\t\t\tfxLayoutAlign=\"start center\"\r\n\t\t>\r\n\t\t\t<img height=\"40\" width=\"40\" class=\"menu-logo\" [src]=\"logoImageSource()\" alt=\"logo\" />\r\n\t\t\t<span class=\"menu-product-name\">\r\n\t\t\t\t{{ productName }}\r\n\t\t\t</span>\r\n\t\t</a>\r\n\r\n\t\t<button\r\n\t\t\tmat-icon-button\r\n\t\t\tclass=\"toggler\"\r\n\t\t\t[attr.aria-label]=\"'ARIA_LABELS.MENU_TOGGLER' | translate\"\r\n\t\t\t[libPlausibleEvent]=\"collapsed ? EXPAND_PLAUSIBLE_EVENT : COLLAPSE_PLAUSIBLE_EVENT\"\r\n\t\t\t(click)=\"toggleCollapse()\"\r\n\t\t>\r\n\t\t\t<mat-icon fxHide.gt-xs [ngClass.lt-sm]=\"'mob-close-icon'\">{{collapsed ? customIcons.customMobileOpenIcon : customIcons.customMobileCloseIcon}}</mat-icon>\r\n <mat-icon fxHide.lt-sm>{{ collapsed ? customIcons.customOpenIcon : customIcons.customCloseIcon }}</mat-icon>\r\n\t\t</button>\r\n\t</div>\r\n\r\n<div \r\n\tclass=\"menu-container\"\r\n\tfxLayout=\"column\" \r\n\t[ngClass.lt-sm]=\"'mobile'\"\r\n\t[class.accessibility-view]=\"isViewIncreased()\"\r\n\t[style.width]=\"sideNavWidth\" \r\n\t[class.collapsed]=\"collapsed\" \r\n\t[ngClass]=\"menuSettings.menuVersion\"\r\n>\r\n\t<div class=\"content\" fxLayout=\"column\" fxFlexFill>\r\n\t\t<div class=\"menu-container-header\" fxLayout=\"row\" [fxLayoutAlign]=\"collapsed ? 'center center' : 'space-between center'\">\r\n\t\t\t<a\r\n\t\t\t\t*ngIf=\"!collapsed\"\r\n\t\t\t\t[libPlausibleEvent]=\"LOGOCLICK_PLAUSIBLE_EVENT\"\r\n\t\t\t\tfxFlex=\"3.125em\"\r\n\t\t\t\t[class.no-click]=\"menuSettings?.disableLogoNavigation\"\r\n\t\t\t\t[href]=\"baseUrl\"\r\n\t\t\t\t[attr.aria-label]=\"'ARIA_LABELS.LOGO' | translate\"\r\n\t\t\t\t(click)=\"logoClick($event)\"\r\n\t\t\t\tfxLayoutAlign=\"start center\"\r\n\t\t\t>\r\n\t\t\t\t<img height=\"40\" width=\"40\" class=\"menu-logo\" [src]=\"logoImageSource()\" alt=\"logo\" />\r\n\t\t\t\t<span class=\"menu-product-name\">\r\n\t\t\t\t\t{{ productName }}\r\n\t\t\t\t</span>\r\n\t\t\t</a>\r\n\r\n <button\r\n mat-icon-button\r\n class=\"toggler\"\r\n [attr.aria-label]=\"'ARIA_LABELS.MENU_TOGGLER' | translate\"\r\n [libPlausibleEvent]=\"collapsed ? EXPAND_PLAUSIBLE_EVENT : COLLAPSE_PLAUSIBLE_EVENT\"\r\n [matTooltip]=\"(collapsed ? 'MENU.EXPAND' : 'MENU.COLLAPSE') | translate\"\r\n (click)=\"toggleCollapse()\"\r\n >\r\n <mat-icon fxHide.gt-xs [ngClass.lt-sm]=\"'mob-close-icon'\">{{customIcons.customMobileCloseIcon}}</mat-icon>\r\n <mat-icon fxHide.lt-sm>{{ collapsed ? customIcons.customOpenIcon : customIcons.customCloseIcon }}</mat-icon>\r\n </button>\r\n </div>\r\n\r\n\t\t<div class=\"menu-wrapper\" fxLayout=\"column\">\r\n\t\t\t<menu-columns\r\n\t\t\t\t(toggleCollapseEvent)=\"toggleCollapse()\"\r\n\t\t\t\t[direction]=\"direction\"\r\n\t\t\t\trole=\"navigation\"\r\n\t\t\t\t[isOpen]=\"!collapsed\"\r\n\t\t\t\t[active]=\"active\"\r\n\t\t\t\t[expandableMenuChildren]=\"menuSettings?.expandableMenuChildren\"\r\n\t\t\t\t[openExternalLinksInSameTab]=\"menuSettings?.openExternalLinksInSameTab\"\r\n\t\t\t></menu-columns>\r\n\r\n\t\t\t<div fxHide.gt-xs class=\"menu-divider\"></div>\r\n\r\n\t\t\t@if (menuSettings?.showAccessibility) {\r\n\t\t\t\t<lib-menu-accessibility [isCollapsed]=\"collapsed\" [baseUrl]=\"baseUrl\"></lib-menu-accessibility>\r\n\t\t\t}\r\n\t\t\t@if (useDefaultLanguageSwitcher && supportedLanguages && supportedLanguages.length > 1) {\r\n\t\t\t<lib-menu-lang-switcher [isCollapsed]=\"collapsed\" [languages]=\"supportedLanguages\" (changeLanguageEvent)=\"changeLanguage($event)\"></lib-menu-lang-switcher>\r\n\t\t\t}\r\n\t\t</div>\r\n\t\t<div fxFlex fxLayout=\"column\">\r\n\t\t\t<ng-content></ng-content>\r\n\t\t</div>\r\n\r\n\t\t<lib-menu-profile \r\n\t\t\t[userOptions]=\"
|
|
670
|
+
args: [{ selector: 'lib-side-nav-menu', standalone: false, template: "@if (isMenuReady()) {\r\n\t<div [fxHide]=\"!collapsed || collapsed && !isMobileRes && !isViewIncreased()\" class=\"mobile-header\" [ngClass]=\"menuSettings.menuVersion\">\r\n\t\t<a\r\n\t\t\t[libPlausibleEvent]=\"LOGOCLICK_PLAUSIBLE_EVENT\"\r\n\t\t\tfxFlex=\"3.125em\"\r\n\t\t\t[href]=\"baseUrl\"\r\n\t\t\t[class.no-click]=\"menuSettings?.disableLogoNavigation\"\r\n\t\t\t[attr.aria-label]=\"'ARIA_LABELS.LOGO' | translate\"\r\n\t\t\t(click)=\"logoClick($event)\"\r\n\t\t\tfxLayoutAlign=\"start center\"\r\n\t\t>\r\n\t\t\t<img height=\"40\" width=\"40\" class=\"menu-logo\" [src]=\"logoImageSource()\" alt=\"logo\" />\r\n\t\t\t<span class=\"menu-product-name\">\r\n\t\t\t\t{{ strapiMenuTitle() ?? productName }}\r\n\t\t\t</span>\r\n\t\t</a>\r\n\r\n\t\t<button\r\n\t\t\tmat-icon-button\r\n\t\t\tclass=\"toggler\"\r\n\t\t\t[attr.aria-label]=\"'ARIA_LABELS.MENU_TOGGLER' | translate\"\r\n\t\t\t[libPlausibleEvent]=\"collapsed ? EXPAND_PLAUSIBLE_EVENT : COLLAPSE_PLAUSIBLE_EVENT\"\r\n\t\t\t(click)=\"toggleCollapse()\"\r\n\t\t>\r\n\t\t\t<mat-icon fxHide.gt-xs [ngClass.lt-sm]=\"'mob-close-icon'\">{{collapsed ? customIcons.customMobileOpenIcon : customIcons.customMobileCloseIcon}}</mat-icon>\r\n <mat-icon fxHide.lt-sm>{{ collapsed ? customIcons.customOpenIcon : customIcons.customCloseIcon }}</mat-icon>\r\n\t\t</button>\r\n\t</div>\r\n\r\n<div \r\n\tclass=\"menu-container\"\r\n\tfxLayout=\"column\" \r\n\t[ngClass.lt-sm]=\"'mobile'\"\r\n\t[class.accessibility-view]=\"isViewIncreased()\"\r\n\t[style.width]=\"sideNavWidth\" \r\n\t[class.collapsed]=\"collapsed\" \r\n\t[ngClass]=\"menuSettings.menuVersion\"\r\n>\r\n\t<div class=\"content\" fxLayout=\"column\" fxFlexFill>\r\n\t\t<div class=\"menu-container-header\" fxLayout=\"row\" [fxLayoutAlign]=\"collapsed ? 'center center' : 'space-between center'\">\r\n\t\t\t<a\r\n\t\t\t\t*ngIf=\"!collapsed\"\r\n\t\t\t\t[libPlausibleEvent]=\"LOGOCLICK_PLAUSIBLE_EVENT\"\r\n\t\t\t\tfxFlex=\"3.125em\"\r\n\t\t\t\t[class.no-click]=\"menuSettings?.disableLogoNavigation\"\r\n\t\t\t\t[href]=\"baseUrl\"\r\n\t\t\t\t[attr.aria-label]=\"'ARIA_LABELS.LOGO' | translate\"\r\n\t\t\t\t(click)=\"logoClick($event)\"\r\n\t\t\t\tfxLayoutAlign=\"start center\"\r\n\t\t\t>\r\n\t\t\t\t<img height=\"40\" width=\"40\" class=\"menu-logo\" [src]=\"logoImageSource()\" alt=\"logo\" />\r\n\t\t\t\t<span class=\"menu-product-name\">\r\n\t\t\t\t\t{{ strapiMenuTitle() ?? productName }}\r\n\t\t\t\t</span>\r\n\t\t\t</a>\r\n\r\n <button\r\n mat-icon-button\r\n class=\"toggler\"\r\n [attr.aria-label]=\"'ARIA_LABELS.MENU_TOGGLER' | translate\"\r\n [libPlausibleEvent]=\"collapsed ? EXPAND_PLAUSIBLE_EVENT : COLLAPSE_PLAUSIBLE_EVENT\"\r\n [matTooltip]=\"(collapsed ? 'MENU.EXPAND' : 'MENU.COLLAPSE') | translate\"\r\n (click)=\"toggleCollapse()\"\r\n >\r\n <mat-icon fxHide.gt-xs [ngClass.lt-sm]=\"'mob-close-icon'\">{{customIcons.customMobileCloseIcon}}</mat-icon>\r\n <mat-icon fxHide.lt-sm>{{ collapsed ? customIcons.customOpenIcon : customIcons.customCloseIcon }}</mat-icon>\r\n </button>\r\n </div>\r\n\r\n\t\t<div class=\"menu-wrapper\" fxLayout=\"column\">\r\n\t\t\t<menu-columns\r\n\t\t\t\t(toggleCollapseEvent)=\"toggleCollapse()\"\r\n\t\t\t\t[direction]=\"direction\"\r\n\t\t\t\trole=\"navigation\"\r\n\t\t\t\t[isOpen]=\"!collapsed\"\r\n\t\t\t\t[active]=\"active\"\r\n\t\t\t\t[expandableMenuChildren]=\"menuSettings?.expandableMenuChildren\"\r\n\t\t\t\t[openExternalLinksInSameTab]=\"menuSettings?.openExternalLinksInSameTab\"\r\n\t\t\t></menu-columns>\r\n\r\n\t\t\t<div fxHide.gt-xs class=\"menu-divider\"></div>\r\n\r\n\t\t\t@if (menuSettings?.showAccessibility) {\r\n\t\t\t\t<lib-menu-accessibility [isCollapsed]=\"collapsed\" [baseUrl]=\"baseUrl\"></lib-menu-accessibility>\r\n\t\t\t}\r\n\t\t\t@if (useDefaultLanguageSwitcher && supportedLanguages && supportedLanguages.length > 1) {\r\n\t\t\t<lib-menu-lang-switcher [isCollapsed]=\"collapsed\" [languages]=\"supportedLanguages\" (changeLanguageEvent)=\"changeLanguage($event)\"></lib-menu-lang-switcher>\r\n\t\t\t}\r\n\t\t</div>\r\n\t\t<div fxFlex fxLayout=\"column\">\r\n\t\t\t<ng-content></ng-content>\r\n\t\t</div>\r\n\r\n\t\t<lib-menu-profile \r\n\t\t\t[userOptions]=\"userOptions()\" \r\n\t\t\t[username]=\"username\" \r\n\t\t\t[collapsed]=\"collapsed\" \r\n\t\t\t[useLargeLoginButton]=\"menuSettings?.useLargeLoginButton\"\r\n\t\t\t(linkCallbackEvent)=\"linkCallback($event)\"\r\n\t\t\t(loginEvent)=\"login()\"\t\r\n\t\t>\r\n\t\t</lib-menu-profile>\r\n\r\n @if (footerItems?.length) {\r\n <div class=\"menu-footer\">\r\n @if (!collapsed) {\r\n @for (item of footerItems; let i = $index; track i) {\r\n <a [href]=\"item.link\" target=\"_blank\">{{ item.title }}</a>\r\n \r\n @if (i !== footerItems!.length - 1) { \r\n | \r\n } \r\n }\r\n }\r\n </div>\r\n }\r\n\t</div>\r\n</div>\r\n}\r\n", styles: ["a{text-decoration:none}.menu-container:not(.collapsed) menu-columns{margin-right:-12px;padding-right:8px;max-height:fit-content;overflow-y:scroll}.no-click{pointer-events:none!important}.mobile-header{display:flex;justify-content:space-between;padding:23px 13px 23px 27px;background-color:var(--base-100);border:1px solid var(--base-70)}.accessibility-view.menu-container:not(.collapsed),.mobile.menu-container:not(.collapsed){display:block!important;position:fixed;min-width:100vw;max-width:100vw;min-height:100dvh;z-index:1000}::ng-deep .mobile.menu-container.collapsed,::ng-deep .accessibility-view.menu-container.collapsed{display:none!important}button:has(.mob-close-icon){margin-right:10px}.menu-container ::-webkit-scrollbar{width:5px}.menu-container ::-webkit-scrollbar-thumb{background:var(--base-95);background-clip:padding-box}.menu-container ::-webkit-scrollbar-track{background:var(--base-100)}.menu-product-name{white-space:nowrap;margin-left:12px;font-weight:600;color:var(--base-10)}.menu-container{max-height:100dvh;white-space:nowrap;height:100%;transition:width .2s ease;min-height:100dvh;overflow:auto;background:var(--base-100);border-right:2px solid var(--base-95)}.menu-container .menu-container-header{margin:24px 0;max-height:40px}.menu-container.collapsed .menu-container-header{margin:24px 0 32px!important}.menu-container .content:not(.collapsed){overflow-x:hidden;padding:0 12px}.menu-container .content:not(.collapsed) .menu-logo{margin-left:16px;max-width:100%}.menu-container .divider{width:100%}:host ::ng-deep .collapsed .profile-wrapper{margin:36px 0!important}:host ::ng-deep .mobile .profile-name{max-width:60vw}:host ::ng-deep .menu-item,:host ::ng-deep .accessibility-btn,:host ::ng-deep .lang-switcher{touch-action:pan-y!important}:host ::ng-deep .menu-item{display:flex;padding:16px!important;border-radius:4px!important}:host ::ng-deep .collapsed .menu-item{padding:0!important;width:40px;height:40px;border-radius:50%!important}:host ::ng-deep .active-menu-item{background-color:var(--base-95)!important}:host ::ng-deep .menu-item-title{margin-left:12px}:host ::ng-deep .child-list .mob-menu-item .menu-item-title{margin-left:36px!important}tld-menu-icon{margin-right:10px}:host::ng-deep button.collapse-btn .mat-mdc-button-persistent-ripple,:host::ng-deep button.toggler .mat-mdc-button-persistent-ripple{display:none}::ng-deep .cdk-overlay-container .child-menu,::ng-deep .cdk-overlay-container .profile-menu,::ng-deep .cdk-overlay-container .lang-menu{min-width:250px;margin:10px 0}@media (max-width: 600px){::ng-deep .cdk-overlay-container .child-menu,::ng-deep .cdk-overlay-container .profile-menu,::ng-deep .cdk-overlay-container .lang-menu{min-width:calc(100vw - 32px)!important}}::ng-deep .mat-mdc-menu-item .mat-icon{margin-right:5px!important}::ng-deep .collapsed .profile-wrapper{justify-content:center!important}.menu-divider{border:1px solid var(--base-70)}.menu-footer{display:flex;justify-content:center;margin-bottom:20px;color:var(--base-40);font-size:.8125rem}.mobile .menu-footer{font-size:.875rem;justify-content:space-between;margin-right:16px;margin-left:16px}\n", "::ng-deep .compact-menu menu-columns{margin-bottom:86px}::ng-deep .compact-menu .profile{margin-top:80px!important}::ng-deep .compact-menu .profile-icon{margin-left:10px!important;min-width:28px!important;height:28px!important;font-size:12px!important}::ng-deep .compact-menu .profile-arrow{margin-right:5px!important}::ng-deep .compact-menu .profile-name{margin-left:10px!important;font-size:.875rem!important;font-weight:600!important}::ng-deep .compact-menu .profile-wrapper{padding:6px 0!important;border-radius:16px!important;border:2px solid var(--base-70)}::ng-deep .compact-menu .menu-wrapper{position:relative;height:100%}::ng-deep .compact-menu .lang-switcher{position:absolute;bottom:0}::ng-deep .compact-menu .accessibility-btn{position:absolute;bottom:46px}::ng-deep .compact-menu .menu-item,::ng-deep .compact-menu .lang-switcher,::ng-deep .compact-menu .accessibility-btn{margin:0 2px;padding:8px 12px!important;border-radius:16px!important}::ng-deep .compact-menu .lang-switcher .menu-arrow{margin-right:-8px}::ng-deep .compact-menu .child-list{margin-left:24px;padding:3px 6px 3px 0}::ng-deep .compact-menu.collapsed .child-list{margin-left:0}::ng-deep .compact-menu.collapsed .accessibility-btn,::ng-deep .compact-menu.collapsed .lang-switcher{padding:0!important;border-radius:50%!important}::ng-deep .compact-menu tld-menu-item-link:not(:first-child){margin-top:0!important;margin-bottom:5px}::ng-deep .compact-menu tld-menu-item-link .title-content{font-weight:400!important}\n"] }]
|
|
620
671
|
}], () => [{ type: i1.StrapiLinkService }, { type: i2.DOMService }, { type: MenuItemsService }, { type: i2.AccessibilityService }], { username: [{
|
|
621
672
|
type: Input
|
|
622
673
|
}], menuSettings: [{
|
|
@@ -1365,11 +1416,11 @@ class MenuItemListComponent {
|
|
|
1365
1416
|
i0.ɵɵproperty("fxLayoutAlign", ctx.menuLayoutDirection);
|
|
1366
1417
|
i0.ɵɵadvance();
|
|
1367
1418
|
i0.ɵɵproperty("ngForOf", ctx.items);
|
|
1368
|
-
} }, dependencies: [i1$2.DefaultLayoutDirective, i1$2.DefaultLayoutAlignDirective, i2$2.DefaultClassDirective, i1$1.RouterLink, i3.NgForOf, i3.NgIf, i3.NgTemplateOutlet, i4.MatTooltip, i2$1.MatIcon, i7.MatButton, i7.MatIconButton, MenuItemLinkComponent, MenuItemBtnComponent, MenuItemWithChildrenComponent, i9.TranslatePipe], styles: ["[_nghost-%COMP%]{display:inline-block} .menu-item{width:100%} a, a:hover{text-decoration:none} .collapsed .menu-item-list{display:flex!important;justify-content:center!important;align-items:center!important} .collapsed .menu-list-wrapper, .collapsed tld-menu-item-link{display:flex!important;justify-content:center!important} .collapsed .menu-item{display:flex!important;place-content:center center!important} .collapsed tld-menu-item-link:not(:first-child){margin-top:16px} .active-parent button, .active-menu-item-group{background-color:var(--base-95)!important} .description-block{margin-top:24px;display:flex;flex-direction:column;gap:4px;width:100%;padding:8px 14px;border-radius:8px;text-align:left;font-size:14px} .description-block .description-block-title{font-weight:500} .description-block .description-block-paragraph{font-weight:400;white-space:normal} .menu-action-button{justify-content:flex-start;align-items:center;max-width:100%;width:-webkit-fill-available} .menu-list-wrapper .menu-item{cursor:pointer;font-style:normal;color:var(--base-30);text-decoration:none;align-items:center!important;font-weight:400;background:none;border:none} .menu-list-wrapper .menu-item:not(button):not(.active-menu-item):hover{background-color:var(--base-70)!important} .menu-list-wrapper .menu-item.active-menu-item, .menu-list-wrapper .menu-item.active-menu-item mat-icon, .menu-list-wrapper .menu-item.active-menu-item:hover{font-weight:600} .menu-list-wrapper .menu-item span{display:inline-block} .menu-list-wrapper .menu-item .menu-item-title{display:flex;flex-direction:row;align-items:start;width:100%} .menu-list-wrapper .menu-item .menu-item-title .title-content{width:100%;text-align:start;display:block} .menu-list-wrapper .menu-item .menu-item-title .title-content:before{display:block;content:attr(content);font-weight:600;height:0;overflow:hidden;visibility:hidden} .menu-list-wrapper .menu-parent-item.active-menu-item, .menu-list-wrapper .menu-parent-item:hover{font-weight:400!important;background-color:var(--base-70)!important} .menu-tooltip{left:.625rem;font-family:Roboto;font-style:normal;font-weight:400;font-size:.75rem;line-height:1.25rem;color:var(--base-70);border-radius:.25rem;position:relative} .menu-tooltip:after{width:0;height:0;content:\"\";position:absolute;border-left:.5rem solid transparent;border-right:.5rem solid transparent;border-bottom:.5rem solid var(--menu-border-dark-color);left:-.75rem;top:calc(50% - .25rem);transform:rotate(270deg);overflow:initial} .menu-item-list-title{padding:8px 0 24px;font-size:1rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;margin-left:20px;height:56px} .menu-item-list-title:has(.menu-title-btn){margin-left:0} lib-menu-accessibility, lib-menu-lang-switcher, .menu-item-list{animation:_ngcontent-%COMP%_slide-in .3s forwards} lib-menu-accessibility, lib-menu-lang-switcher, .menu-title-btn{margin-right:2px;transition:opacity .3s} .arrow-icon{margin-right:-6px} .mob-menu-item .arrow-icon{margin-right:0}@keyframes _ngcontent-%COMP%_slide-in{0%{opacity:0;margin-left:-100px}to{opacity:1;margin-left:0}}"] }); }
|
|
1419
|
+
} }, dependencies: [i1$2.DefaultLayoutDirective, i1$2.DefaultLayoutAlignDirective, i2$2.DefaultClassDirective, i1$1.RouterLink, i3.NgForOf, i3.NgIf, i3.NgTemplateOutlet, i4.MatTooltip, i2$1.MatIcon, i7.MatButton, i7.MatIconButton, MenuItemLinkComponent, MenuItemBtnComponent, MenuItemWithChildrenComponent, i9.TranslatePipe], styles: ["[_nghost-%COMP%]{display:inline-block} .menu-item{width:100%} a, a:hover{text-decoration:none} .collapsed .menu-item-list{display:flex!important;justify-content:center!important;align-items:center!important} .collapsed .menu-list-wrapper, .collapsed tld-menu-item-link{display:flex!important;justify-content:center!important} .collapsed lib-menu-item-with-children{display:flex!important;flex-direction:column!important;align-items:center!important} .collapsed .menu-item{display:flex!important;place-content:center center!important} .collapsed tld-menu-item-link:not(:first-child){margin-top:16px} .active-parent button, .active-menu-item-group{background-color:var(--base-95)!important} .description-block{margin-top:24px;display:flex;flex-direction:column;gap:4px;width:100%;padding:8px 14px;border-radius:8px;text-align:left;font-size:14px} .description-block .description-block-title{font-weight:500} .description-block .description-block-paragraph{font-weight:400;white-space:normal} .menu-action-button{justify-content:flex-start;align-items:center;max-width:100%;width:-webkit-fill-available} .menu-list-wrapper .menu-item{cursor:pointer;font-style:normal;color:var(--base-30);text-decoration:none;align-items:center!important;font-weight:400;background:none;border:none} .menu-list-wrapper .menu-item:not(button):not(.active-menu-item):hover{background-color:var(--base-70)!important} .menu-list-wrapper .menu-item.active-menu-item, .menu-list-wrapper .menu-item.active-menu-item mat-icon, .menu-list-wrapper .menu-item.active-menu-item:hover{font-weight:600} .menu-list-wrapper .menu-item span{display:inline-block} .menu-list-wrapper .menu-item .menu-item-title{display:flex;flex-direction:row;align-items:start;width:100%} .menu-list-wrapper .menu-item .menu-item-title .title-content{width:100%;text-align:start;display:block} .menu-list-wrapper .menu-item .menu-item-title .title-content:before{display:block;content:attr(content);font-weight:600;height:0;overflow:hidden;visibility:hidden} .menu-list-wrapper .menu-parent-item.active-menu-item, .menu-list-wrapper .menu-parent-item:hover{font-weight:400!important;background-color:var(--base-70)!important} .menu-tooltip{left:.625rem;font-family:Roboto;font-style:normal;font-weight:400;font-size:.75rem;line-height:1.25rem;color:var(--base-70);border-radius:.25rem;position:relative} .menu-tooltip:after{width:0;height:0;content:\"\";position:absolute;border-left:.5rem solid transparent;border-right:.5rem solid transparent;border-bottom:.5rem solid var(--menu-border-dark-color);left:-.75rem;top:calc(50% - .25rem);transform:rotate(270deg);overflow:initial} .menu-item-list-title{padding:8px 0 24px;font-size:1rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;margin-left:20px;height:56px} .menu-item-list-title:has(.menu-title-btn){margin-left:0} lib-menu-accessibility, lib-menu-lang-switcher, .menu-item-list{animation:_ngcontent-%COMP%_slide-in .3s forwards} lib-menu-accessibility, lib-menu-lang-switcher, .menu-title-btn{margin-right:2px;transition:opacity .3s} .arrow-icon{margin-right:-6px} .mob-menu-item .arrow-icon{margin-right:0}@keyframes _ngcontent-%COMP%_slide-in{0%{opacity:0;margin-left:-100px}to{opacity:1;margin-left:0}}"] }); }
|
|
1369
1420
|
}
|
|
1370
1421
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuItemListComponent, [{
|
|
1371
1422
|
type: Component,
|
|
1372
|
-
args: [{ selector: 'menu-item-list', standalone: false, template: "<div class=\"menu-list-wrapper\">\r\n\t@if (titleKey && showTitle && labelsVisible && !menuItemGroup.itemGroupClick && !menuItemGroup.description) {\r\n\t<div fxLayoutAlign=\"start center\" class=\"menu-item-list-title\">\r\n\t\t<mat-icon *ngIf=\"menuItemGroup.titleIcon\" class=\"menu-title-btn\">\r\n\t\t\t{{ menuItemGroup.titleIcon }}\r\n\t\t</mat-icon>\r\n\r\n\t\t<button\r\n\t\t\t*ngIf=\"menuItemGroup.titleNavigation\"\r\n\t\t\tmat-icon-button\r\n\t\t\tclass=\"menu-title-btn\"\r\n\t\t\t[routerLink]=\"menuItemGroup.titleNavigation.path\"\r\n\t\t\t[matTooltip]=\"menuItemGroup.titleNavigation?.tooltip ?? '' | translate\"\r\n\t\t>\r\n\t\t\t<mat-icon>{{ menuItemGroup.titleNavigation.icon }}</mat-icon>\r\n\t\t</button>\r\n\r\n\t\t{{ titleKey | translate }}\r\n\t</div>\r\n\t} @else if (menuItemGroup?.itemGroupClick) {\r\n\t<ng-container *ngTemplateOutlet=\"itemGroupButton\"> </ng-container>\r\n\t} @else if (menuItemGroup?.description && labelsVisible) {\r\n\t<ng-container *ngTemplateOutlet=\"itemGroupDescriptionBlock\"></ng-container>\r\n\t}\r\n\t<div class=\"menu-item-list\" fxLayout=\"column\" [fxLayoutAlign]=\"menuLayoutDirection\">\r\n\t\t<ng-container *ngFor=\"let menuItem of items\">\r\n\t\t\t<ng-container\r\n\t\t\t\t*ngTemplateOutlet=\"\r\n\t\t\t\t\t!menuItem.showChildren || !menuItem.children || menuItem?.children?.length === 0 ? (menuItem.clickAction ? menuItemBtn : menuItemLink) : itemWithChildren;\r\n\t\t\t\t\tcontext: { menuItem: menuItem }\r\n\t\t\t\t\"\r\n\t\t\t>\r\n\t\t\t</ng-container>\r\n\t\t</ng-container>\r\n\t</div>\r\n</div>\r\n\r\n<ng-template #itemWithChildren let-menuItem=\"menuItem\">\r\n\t<lib-menu-item-with-children\r\n\t\t[menuItem]=\"menuItem\"\r\n\t\t[labelsVisible]=\"labelsVisible\"\r\n\t\t[menuLayoutDirection]=\"menuLayoutDirection\"\r\n\t\t[menuItemLayout]=\"menuItemLayout\"\r\n\t\t[activeItem]=\"activeItem\"\r\n\t\t[showIcons]=\"showIcons\"\r\n\t\t[direction]=\"direction\"\r\n\t\t[expandableMenuChildren]=\"expandableMenuChildren\"\r\n\t\t(toggleExpand)=\"toggleExpandEvent($event)\"\r\n\t\t(openMenu)=\"openMenu()\"\r\n\t\t[class.active-parent]=\"menuItem.appId === appId\"\r\n\t\t[openInSameTab]=\"openExternalLinksInSameTab\"\r\n\t></lib-menu-item-with-children>\r\n</ng-template>\r\n\r\n<ng-template #menuItemLink let-menuItem=\"menuItem\">\r\n\t<tld-menu-item-link\r\n\t\t[ngClass.lt-md]=\"'mob-menu-item'\"\r\n\t\t[menuItem]=\"menuItem\"\r\n\t\t[direction]=\"direction\"\r\n\t\t[labelsVisible]=\"labelsVisible\"\r\n\t\t[activeItem]=\"activeItem\"\r\n\t\t[showIcons]=\"showIcons\"\r\n\t\t[openInSameTab]=\"openExternalLinksInSameTab\"\r\n\t\t[allowTabSelection]=\"true\"\r\n\t></tld-menu-item-link>\r\n</ng-template>\r\n\r\n<ng-template #menuItemBtn let-menuItem=\"menuItem\">\r\n\t<lib-menu-item-btn *ngIf=\"labelsVisible\" [ngClass.lt-md]=\"'mob-menu-item'\" [menuItem]=\"menuItem\" [direction]=\"direction\" [activeItem]=\"activeItem\"></lib-menu-item-btn>\r\n</ng-template>\r\n\r\n<ng-template #itemGroupButton>\r\n\t<button\r\n\t\t*ngIf=\"menuItemGroup && labelsVisible\"\r\n\t\tmat-button\r\n\t\tclass=\"menu-title-btn menu-action-button\"\r\n\t\t(click)=\"menuItemGroup?.itemGroupClick()\"\r\n\t\t[class.active-menu-item-group]=\"menuItemGroup.isItemGroupActive && menuItemGroup.isItemGroupActive()\"\r\n\t>\r\n\t\t@if(menuItemGroup.isCustomItemGroupIcon){\r\n\t\t<mat-icon [svgIcon]=\"menuItemGroup.itemGroupIcon ?? ''\"></mat-icon>\r\n\t\t} @else {\r\n\t\t<mat-icon>{{ menuItemGroup.itemGroupIcon }}</mat-icon>\r\n\t\t}\r\n\t\t<span class=\"btn-label\" *ngIf=\"titleKey\">\r\n\t\t\t{{ titleKey | translate }}\r\n\t\t</span>\r\n\t</button>\r\n\r\n\t<button\r\n\t\t*ngIf=\"menuItemGroup && !labelsVisible && titleKey && menuItemGroup.itemGroupIcon\"\r\n\t\tmat-icon-button\r\n\t\tmatTooltipPosition=\"after\"\r\n\t\t[matTooltip]=\"titleKey | translate\"\r\n\t\t(click)=\"menuItemGroup?.itemGroupClick()\"\r\n\t>\r\n\t\t@if(menuItemGroup.isCustomItemGroupIcon){\r\n\t\t<mat-icon [svgIcon]=\"menuItemGroup.itemGroupIcon ?? ''\"></mat-icon>\r\n\t\t} @else {\r\n\t\t<mat-icon>{{ menuItemGroup.itemGroupIcon }}</mat-icon>\r\n\t\t}\r\n\t</button>\r\n</ng-template>\r\n\r\n<ng-template #itemGroupDescriptionBlock>\r\n\t<div class=\"description-block\">\r\n\t\t<span class=\"description-block-title\" [innerHTML]=\"(menuItemGroup.title || '') | translate\"></span>\r\n\t\t<p class=\"description-block-paragraph\" [innerHTML]=\"(menuItemGroup.description || '') | translate\"></p>\r\n\t</div>\r\n</ng-template>\r\n", styles: [":host{display:inline-block}::ng-deep .menu-item{width:100%}::ng-deep a,::ng-deep a:hover{text-decoration:none}::ng-deep .collapsed .menu-item-list{display:flex!important;justify-content:center!important;align-items:center!important}::ng-deep .collapsed .menu-list-wrapper,::ng-deep .collapsed tld-menu-item-link{display:flex!important;justify-content:center!important}::ng-deep .collapsed .menu-item{display:flex!important;place-content:center center!important}::ng-deep .collapsed tld-menu-item-link:not(:first-child){margin-top:16px}::ng-deep .active-parent button,::ng-deep .active-menu-item-group{background-color:var(--base-95)!important}::ng-deep .description-block{margin-top:24px;display:flex;flex-direction:column;gap:4px;width:100%;padding:8px 14px;border-radius:8px;text-align:left;font-size:14px}::ng-deep .description-block .description-block-title{font-weight:500}::ng-deep .description-block .description-block-paragraph{font-weight:400;white-space:normal}::ng-deep .menu-action-button{justify-content:flex-start;align-items:center;max-width:100%;width:-webkit-fill-available}::ng-deep .menu-list-wrapper .menu-item{cursor:pointer;font-style:normal;color:var(--base-30);text-decoration:none;align-items:center!important;font-weight:400;background:none;border:none}::ng-deep .menu-list-wrapper .menu-item:not(button):not(.active-menu-item):hover{background-color:var(--base-70)!important}::ng-deep .menu-list-wrapper .menu-item.active-menu-item,::ng-deep .menu-list-wrapper .menu-item.active-menu-item mat-icon,::ng-deep .menu-list-wrapper .menu-item.active-menu-item:hover{font-weight:600}::ng-deep .menu-list-wrapper .menu-item span{display:inline-block}::ng-deep .menu-list-wrapper .menu-item .menu-item-title{display:flex;flex-direction:row;align-items:start;width:100%}::ng-deep .menu-list-wrapper .menu-item .menu-item-title .title-content{width:100%;text-align:start;display:block}::ng-deep .menu-list-wrapper .menu-item .menu-item-title .title-content:before{display:block;content:attr(content);font-weight:600;height:0;overflow:hidden;visibility:hidden}::ng-deep .menu-list-wrapper .menu-parent-item.active-menu-item,::ng-deep .menu-list-wrapper .menu-parent-item:hover{font-weight:400!important;background-color:var(--base-70)!important}::ng-deep .menu-tooltip{left:.625rem;font-family:Roboto;font-style:normal;font-weight:400;font-size:.75rem;line-height:1.25rem;color:var(--base-70);border-radius:.25rem;position:relative}::ng-deep .menu-tooltip:after{width:0;height:0;content:\"\";position:absolute;border-left:.5rem solid transparent;border-right:.5rem solid transparent;border-bottom:.5rem solid var(--menu-border-dark-color);left:-.75rem;top:calc(50% - .25rem);transform:rotate(270deg);overflow:initial}::ng-deep .menu-item-list-title{padding:8px 0 24px;font-size:1rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;margin-left:20px;height:56px}::ng-deep .menu-item-list-title:has(.menu-title-btn){margin-left:0}::ng-deep lib-menu-accessibility,::ng-deep lib-menu-lang-switcher,::ng-deep .menu-item-list{animation:slide-in .3s forwards}::ng-deep lib-menu-accessibility,::ng-deep lib-menu-lang-switcher,::ng-deep .menu-title-btn{margin-right:2px;transition:opacity .3s}::ng-deep .arrow-icon{margin-right:-6px}::ng-deep .mob-menu-item .arrow-icon{margin-right:0}@keyframes slide-in{0%{opacity:0;margin-left:-100px}to{opacity:1;margin-left:0}}\n"] }]
|
|
1423
|
+
args: [{ selector: 'menu-item-list', standalone: false, template: "<div class=\"menu-list-wrapper\">\r\n\t@if (titleKey && showTitle && labelsVisible && !menuItemGroup.itemGroupClick && !menuItemGroup.description) {\r\n\t<div fxLayoutAlign=\"start center\" class=\"menu-item-list-title\">\r\n\t\t<mat-icon *ngIf=\"menuItemGroup.titleIcon\" class=\"menu-title-btn\">\r\n\t\t\t{{ menuItemGroup.titleIcon }}\r\n\t\t</mat-icon>\r\n\r\n\t\t<button\r\n\t\t\t*ngIf=\"menuItemGroup.titleNavigation\"\r\n\t\t\tmat-icon-button\r\n\t\t\tclass=\"menu-title-btn\"\r\n\t\t\t[routerLink]=\"menuItemGroup.titleNavigation.path\"\r\n\t\t\t[matTooltip]=\"menuItemGroup.titleNavigation?.tooltip ?? '' | translate\"\r\n\t\t>\r\n\t\t\t<mat-icon>{{ menuItemGroup.titleNavigation.icon }}</mat-icon>\r\n\t\t</button>\r\n\r\n\t\t{{ titleKey | translate }}\r\n\t</div>\r\n\t} @else if (menuItemGroup?.itemGroupClick) {\r\n\t<ng-container *ngTemplateOutlet=\"itemGroupButton\"> </ng-container>\r\n\t} @else if (menuItemGroup?.description && labelsVisible) {\r\n\t<ng-container *ngTemplateOutlet=\"itemGroupDescriptionBlock\"></ng-container>\r\n\t}\r\n\t<div class=\"menu-item-list\" fxLayout=\"column\" [fxLayoutAlign]=\"menuLayoutDirection\">\r\n\t\t<ng-container *ngFor=\"let menuItem of items\">\r\n\t\t\t<ng-container\r\n\t\t\t\t*ngTemplateOutlet=\"\r\n\t\t\t\t\t!menuItem.showChildren || !menuItem.children || menuItem?.children?.length === 0 ? (menuItem.clickAction ? menuItemBtn : menuItemLink) : itemWithChildren;\r\n\t\t\t\t\tcontext: { menuItem: menuItem }\r\n\t\t\t\t\"\r\n\t\t\t>\r\n\t\t\t</ng-container>\r\n\t\t</ng-container>\r\n\t</div>\r\n</div>\r\n\r\n<ng-template #itemWithChildren let-menuItem=\"menuItem\">\r\n\t<lib-menu-item-with-children\r\n\t\t[menuItem]=\"menuItem\"\r\n\t\t[labelsVisible]=\"labelsVisible\"\r\n\t\t[menuLayoutDirection]=\"menuLayoutDirection\"\r\n\t\t[menuItemLayout]=\"menuItemLayout\"\r\n\t\t[activeItem]=\"activeItem\"\r\n\t\t[showIcons]=\"showIcons\"\r\n\t\t[direction]=\"direction\"\r\n\t\t[expandableMenuChildren]=\"expandableMenuChildren\"\r\n\t\t(toggleExpand)=\"toggleExpandEvent($event)\"\r\n\t\t(openMenu)=\"openMenu()\"\r\n\t\t[class.active-parent]=\"menuItem.appId === appId\"\r\n\t\t[openInSameTab]=\"openExternalLinksInSameTab\"\r\n\t></lib-menu-item-with-children>\r\n</ng-template>\r\n\r\n<ng-template #menuItemLink let-menuItem=\"menuItem\">\r\n\t<tld-menu-item-link\r\n\t\t[ngClass.lt-md]=\"'mob-menu-item'\"\r\n\t\t[menuItem]=\"menuItem\"\r\n\t\t[direction]=\"direction\"\r\n\t\t[labelsVisible]=\"labelsVisible\"\r\n\t\t[activeItem]=\"activeItem\"\r\n\t\t[showIcons]=\"showIcons\"\r\n\t\t[openInSameTab]=\"openExternalLinksInSameTab\"\r\n\t\t[allowTabSelection]=\"true\"\r\n\t></tld-menu-item-link>\r\n</ng-template>\r\n\r\n<ng-template #menuItemBtn let-menuItem=\"menuItem\">\r\n\t<lib-menu-item-btn *ngIf=\"labelsVisible\" [ngClass.lt-md]=\"'mob-menu-item'\" [menuItem]=\"menuItem\" [direction]=\"direction\" [activeItem]=\"activeItem\"></lib-menu-item-btn>\r\n</ng-template>\r\n\r\n<ng-template #itemGroupButton>\r\n\t<button\r\n\t\t*ngIf=\"menuItemGroup && labelsVisible\"\r\n\t\tmat-button\r\n\t\tclass=\"menu-title-btn menu-action-button\"\r\n\t\t(click)=\"menuItemGroup?.itemGroupClick()\"\r\n\t\t[class.active-menu-item-group]=\"menuItemGroup.isItemGroupActive && menuItemGroup.isItemGroupActive()\"\r\n\t>\r\n\t\t@if(menuItemGroup.isCustomItemGroupIcon){\r\n\t\t<mat-icon [svgIcon]=\"menuItemGroup.itemGroupIcon ?? ''\"></mat-icon>\r\n\t\t} @else {\r\n\t\t<mat-icon>{{ menuItemGroup.itemGroupIcon }}</mat-icon>\r\n\t\t}\r\n\t\t<span class=\"btn-label\" *ngIf=\"titleKey\">\r\n\t\t\t{{ titleKey | translate }}\r\n\t\t</span>\r\n\t</button>\r\n\r\n\t<button\r\n\t\t*ngIf=\"menuItemGroup && !labelsVisible && titleKey && menuItemGroup.itemGroupIcon\"\r\n\t\tmat-icon-button\r\n\t\tmatTooltipPosition=\"after\"\r\n\t\t[matTooltip]=\"titleKey | translate\"\r\n\t\t(click)=\"menuItemGroup?.itemGroupClick()\"\r\n\t>\r\n\t\t@if(menuItemGroup.isCustomItemGroupIcon){\r\n\t\t<mat-icon [svgIcon]=\"menuItemGroup.itemGroupIcon ?? ''\"></mat-icon>\r\n\t\t} @else {\r\n\t\t<mat-icon>{{ menuItemGroup.itemGroupIcon }}</mat-icon>\r\n\t\t}\r\n\t</button>\r\n</ng-template>\r\n\r\n<ng-template #itemGroupDescriptionBlock>\r\n\t<div class=\"description-block\">\r\n\t\t<span class=\"description-block-title\" [innerHTML]=\"(menuItemGroup.title || '') | translate\"></span>\r\n\t\t<p class=\"description-block-paragraph\" [innerHTML]=\"(menuItemGroup.description || '') | translate\"></p>\r\n\t</div>\r\n</ng-template>\r\n", styles: [":host{display:inline-block}::ng-deep .menu-item{width:100%}::ng-deep a,::ng-deep a:hover{text-decoration:none}::ng-deep .collapsed .menu-item-list{display:flex!important;justify-content:center!important;align-items:center!important}::ng-deep .collapsed .menu-list-wrapper,::ng-deep .collapsed tld-menu-item-link{display:flex!important;justify-content:center!important}::ng-deep .collapsed lib-menu-item-with-children{display:flex!important;flex-direction:column!important;align-items:center!important}::ng-deep .collapsed .menu-item{display:flex!important;place-content:center center!important}::ng-deep .collapsed tld-menu-item-link:not(:first-child){margin-top:16px}::ng-deep .active-parent button,::ng-deep .active-menu-item-group{background-color:var(--base-95)!important}::ng-deep .description-block{margin-top:24px;display:flex;flex-direction:column;gap:4px;width:100%;padding:8px 14px;border-radius:8px;text-align:left;font-size:14px}::ng-deep .description-block .description-block-title{font-weight:500}::ng-deep .description-block .description-block-paragraph{font-weight:400;white-space:normal}::ng-deep .menu-action-button{justify-content:flex-start;align-items:center;max-width:100%;width:-webkit-fill-available}::ng-deep .menu-list-wrapper .menu-item{cursor:pointer;font-style:normal;color:var(--base-30);text-decoration:none;align-items:center!important;font-weight:400;background:none;border:none}::ng-deep .menu-list-wrapper .menu-item:not(button):not(.active-menu-item):hover{background-color:var(--base-70)!important}::ng-deep .menu-list-wrapper .menu-item.active-menu-item,::ng-deep .menu-list-wrapper .menu-item.active-menu-item mat-icon,::ng-deep .menu-list-wrapper .menu-item.active-menu-item:hover{font-weight:600}::ng-deep .menu-list-wrapper .menu-item span{display:inline-block}::ng-deep .menu-list-wrapper .menu-item .menu-item-title{display:flex;flex-direction:row;align-items:start;width:100%}::ng-deep .menu-list-wrapper .menu-item .menu-item-title .title-content{width:100%;text-align:start;display:block}::ng-deep .menu-list-wrapper .menu-item .menu-item-title .title-content:before{display:block;content:attr(content);font-weight:600;height:0;overflow:hidden;visibility:hidden}::ng-deep .menu-list-wrapper .menu-parent-item.active-menu-item,::ng-deep .menu-list-wrapper .menu-parent-item:hover{font-weight:400!important;background-color:var(--base-70)!important}::ng-deep .menu-tooltip{left:.625rem;font-family:Roboto;font-style:normal;font-weight:400;font-size:.75rem;line-height:1.25rem;color:var(--base-70);border-radius:.25rem;position:relative}::ng-deep .menu-tooltip:after{width:0;height:0;content:\"\";position:absolute;border-left:.5rem solid transparent;border-right:.5rem solid transparent;border-bottom:.5rem solid var(--menu-border-dark-color);left:-.75rem;top:calc(50% - .25rem);transform:rotate(270deg);overflow:initial}::ng-deep .menu-item-list-title{padding:8px 0 24px;font-size:1rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;margin-left:20px;height:56px}::ng-deep .menu-item-list-title:has(.menu-title-btn){margin-left:0}::ng-deep lib-menu-accessibility,::ng-deep lib-menu-lang-switcher,::ng-deep .menu-item-list{animation:slide-in .3s forwards}::ng-deep lib-menu-accessibility,::ng-deep lib-menu-lang-switcher,::ng-deep .menu-title-btn{margin-right:2px;transition:opacity .3s}::ng-deep .arrow-icon{margin-right:-6px}::ng-deep .mob-menu-item .arrow-icon{margin-right:0}@keyframes slide-in{0%{opacity:0;margin-left:-100px}to{opacity:1;margin-left:0}}\n"] }]
|
|
1373
1424
|
}], null, { direction: [{
|
|
1374
1425
|
type: Input
|
|
1375
1426
|
}], labelsVisible: [{
|
|
@@ -1837,11 +1888,11 @@ class MenuLangSwitcherComponent {
|
|
|
1837
1888
|
i0.ɵɵconditional(!ctx.isCollapsed() ? 7 : -1);
|
|
1838
1889
|
i0.ɵɵadvance(3);
|
|
1839
1890
|
i0.ɵɵrepeater(ctx.languages());
|
|
1840
|
-
} }, dependencies: [i4.MatTooltip, i2$1.MatIcon, i5.MatMenu, i5.MatMenuItem, i5.MatMenuTrigger, i9.TranslatePipe], styles: [".spin[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_spinArrow .3s forwards}@keyframes _ngcontent-%COMP%_spinArrow{to{transform:rotate(180deg)}}span[_ngcontent-%COMP%]{font-size:.875rem}.lang-switcher[_ngcontent-%COMP%]{white-space:nowrap;overflow:hidden;display:flex;align-items:center;color:var(--base-30);background:none;width:100%;padding:16px 8px 16px 18px;border-radius:5px}.lang-switcher.active[_ngcontent-%COMP%], .lang-switcher[_ngcontent-%COMP%]:hover{background-color:var(--base-70)}.collapsed[_ngcontent-%COMP%]{padding:0;min-width:40px;height:40px;border-radius:50%;margin-top:10px;justify-content:center;width:100%;margin-left:-
|
|
1891
|
+
} }, dependencies: [i4.MatTooltip, i2$1.MatIcon, i5.MatMenu, i5.MatMenuItem, i5.MatMenuTrigger, i9.TranslatePipe], styles: [".spin[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_spinArrow .3s forwards}@keyframes _ngcontent-%COMP%_spinArrow{to{transform:rotate(180deg)}}span[_ngcontent-%COMP%]{font-size:.875rem}.lang-switcher[_ngcontent-%COMP%]{white-space:nowrap;overflow:hidden;display:flex;align-items:center;color:var(--base-30);background:none;width:100%;padding:16px 8px 16px 18px;border-radius:5px}.lang-switcher.active[_ngcontent-%COMP%], .lang-switcher[_ngcontent-%COMP%]:hover{background-color:var(--base-70)}.collapsed[_ngcontent-%COMP%]{padding:0;min-width:40px;height:40px;border-radius:50%;margin-top:10px;justify-content:center;width:100%;margin-left:-5px}.current-lang[_ngcontent-%COMP%]{display:flex;align-items:center;width:100%;gap:12px}.collapsed[_ngcontent-%COMP%] .current-lang[_ngcontent-%COMP%]{justify-content:center;width:100%}"] }); }
|
|
1841
1892
|
}
|
|
1842
1893
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuLangSwitcherComponent, [{
|
|
1843
1894
|
type: Component,
|
|
1844
|
-
args: [{ selector: 'lib-menu-lang-switcher', standalone: false, template: "<button\r\n [class.collapsed]=\"isCollapsed()\"\r\n #state=\"matMenuTrigger\"\r\n [matMenuTriggerFor]=\"menu\"\r\n [matTooltip]=\"isCollapsed() ? ('MENU.CHANGE_LANGUAGE' | translate) : ''\"\r\n matTooltipPosition=\"after\"\r\n matTooltipClass=\"menu-tooltip\" \r\n class=\"lang-switcher\"\r\n [class.active]=\"state.menuOpen\"\r\n>\r\n<div class=\"current-lang\">\r\n <mat-icon>language</mat-icon>\r\n\r\n @if (!isCollapsed()) {\r\n <span>\r\n {{ languageCodeTranslations[currentLanguageCode[0]+currentLanguageCode[1]] }}\r\n </span>\r\n }\r\n</div>\r\n\r\n @if (!isCollapsed()) {\r\n @if (state.menuOpen) {\r\n <mat-icon class=\"menu-arrow spin\">keyboard_arrow_down</mat-icon>\r\n } @else {\r\n <mat-icon class=\"menu-arrow spin\">keyboard_arrow_up</mat-icon>\r\n }\r\n }\r\n</button>\r\n\r\n<mat-menu #menu=\"matMenu\" class=\"lang-menu\">\r\n @for (lang of languages(); track lang) {\r\n @if (lang !== currentLanguageCode) {\r\n <button mat-menu-item (click)=\"changeLanguage(lang)\">\r\n {{ languageCodeTranslations[lang[0]+lang[1]] }}\r\n </button>\r\n }\r\n }\r\n</mat-menu>\r\n", styles: [".spin{animation:spinArrow .3s forwards}@keyframes spinArrow{to{transform:rotate(180deg)}}span{font-size:.875rem}.lang-switcher{white-space:nowrap;overflow:hidden;display:flex;align-items:center;color:var(--base-30);background:none;width:100%;padding:16px 8px 16px 18px;border-radius:5px}.lang-switcher.active,.lang-switcher:hover{background-color:var(--base-70)}.collapsed{padding:0;min-width:40px;height:40px;border-radius:50%;margin-top:10px;justify-content:center;width:100%;margin-left:-
|
|
1895
|
+
args: [{ selector: 'lib-menu-lang-switcher', standalone: false, template: "<button\r\n [class.collapsed]=\"isCollapsed()\"\r\n #state=\"matMenuTrigger\"\r\n [matMenuTriggerFor]=\"menu\"\r\n [matTooltip]=\"isCollapsed() ? ('MENU.CHANGE_LANGUAGE' | translate) : ''\"\r\n matTooltipPosition=\"after\"\r\n matTooltipClass=\"menu-tooltip\" \r\n class=\"lang-switcher\"\r\n [class.active]=\"state.menuOpen\"\r\n>\r\n<div class=\"current-lang\">\r\n <mat-icon>language</mat-icon>\r\n\r\n @if (!isCollapsed()) {\r\n <span>\r\n {{ languageCodeTranslations[currentLanguageCode[0]+currentLanguageCode[1]] }}\r\n </span>\r\n }\r\n</div>\r\n\r\n @if (!isCollapsed()) {\r\n @if (state.menuOpen) {\r\n <mat-icon class=\"menu-arrow spin\">keyboard_arrow_down</mat-icon>\r\n } @else {\r\n <mat-icon class=\"menu-arrow spin\">keyboard_arrow_up</mat-icon>\r\n }\r\n }\r\n</button>\r\n\r\n<mat-menu #menu=\"matMenu\" class=\"lang-menu\">\r\n @for (lang of languages(); track lang) {\r\n @if (lang !== currentLanguageCode) {\r\n <button mat-menu-item (click)=\"changeLanguage(lang)\">\r\n {{ languageCodeTranslations[lang[0]+lang[1]] }}\r\n </button>\r\n }\r\n }\r\n</mat-menu>\r\n", styles: [".spin{animation:spinArrow .3s forwards}@keyframes spinArrow{to{transform:rotate(180deg)}}span{font-size:.875rem}.lang-switcher{white-space:nowrap;overflow:hidden;display:flex;align-items:center;color:var(--base-30);background:none;width:100%;padding:16px 8px 16px 18px;border-radius:5px}.lang-switcher.active,.lang-switcher:hover{background-color:var(--base-70)}.collapsed{padding:0;min-width:40px;height:40px;border-radius:50%;margin-top:10px;justify-content:center;width:100%;margin-left:-5px}.current-lang{display:flex;align-items:center;width:100%;gap:12px}.collapsed .current-lang{justify-content:center;width:100%}\n"] }]
|
|
1845
1896
|
}], null, { isCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCollapsed", required: false }] }], languages: [{ type: i0.Input, args: [{ isSignal: true, alias: "languages", required: false }] }], changeLanguageEvent: [{ type: i0.Output, args: ["changeLanguageEvent"] }], updateStorage: [{ type: i0.Input, args: [{ isSignal: true, alias: "updateStorage", required: false }] }] }); })();
|
|
1846
1897
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MenuLangSwitcherComponent, { className: "MenuLangSwitcherComponent", filePath: "lib/components/menu-lang-switcher/menu-lang-switcher.component.ts", lineNumber: 12 }); })();
|
|
1847
1898
|
|