@tilde-nlp/ngx-menu 6.1.43 → 6.1.45
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/components/menu-item-list/menu-item-list.component.mjs +53 -42
- package/esm2022/lib/components/menu-lang-switcher/menu-lang-switcher.component.mjs +107 -0
- package/esm2022/lib/components/menu-profile/menu-profile.component.mjs +204 -0
- package/esm2022/lib/components/side-nav-menu/models/side-nav-settings.model.mjs +1 -1
- package/esm2022/lib/components/side-nav-menu/side-nav-menu.component.mjs +58 -219
- package/esm2022/lib/constants/user-menu-options.const.mjs +1 -21
- package/esm2022/lib/menu.module.mjs +27 -7
- package/fesm2022/tilde-nlp-ngx-menu.mjs +484 -337
- package/fesm2022/tilde-nlp-ngx-menu.mjs.map +1 -1
- package/lib/components/menu-lang-switcher/menu-lang-switcher.component.d.ts +13 -0
- package/lib/components/menu-profile/menu-profile.component.d.ts +16 -0
- package/lib/components/side-nav-menu/models/side-nav-settings.model.d.ts +1 -1
- package/lib/components/side-nav-menu/side-nav-menu.component.d.ts +5 -3
- package/lib/constants/user-menu-options.const.d.ts +0 -3
- package/lib/menu.module.d.ts +14 -12
- package/package.json +1 -1
|
@@ -1,32 +1,32 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Injectable, Optional, Inject, Component, Input, EventEmitter, Output, NgModule } from '@angular/core';
|
|
2
|
+
import { Injectable, Optional, Inject, Component, Input, EventEmitter, Output, inject, NgModule } from '@angular/core';
|
|
3
3
|
import * as i2 from '@tilde-nlp/ngx-common';
|
|
4
|
-
import { ResolutionHelper, PlausibleModule,
|
|
4
|
+
import { ResolutionHelper, PlausibleModule, LanguageTranslateModule } from '@tilde-nlp/ngx-common';
|
|
5
5
|
import * as i1$1 from '@angular/router';
|
|
6
6
|
import { NavigationEnd, RouterModule } from '@angular/router';
|
|
7
7
|
import { map, BehaviorSubject, filter } from 'rxjs';
|
|
8
8
|
import * as i1 from '@tilde-nlp/ngx-strapi';
|
|
9
9
|
import { STRAPI_API_CONFIG_TOKEN } from '@tilde-nlp/ngx-strapi';
|
|
10
10
|
import { CollectionTypes } from '@tilde-nlp/strapi-models';
|
|
11
|
-
import * as
|
|
12
|
-
import * as i2$2 from '@ngbracket/ngx-layout/extended';
|
|
13
|
-
import * as i4 from '@angular/common';
|
|
11
|
+
import * as i3 from '@angular/common';
|
|
14
12
|
import { CommonModule } from '@angular/common';
|
|
13
|
+
import { FlexLayoutModule } from '@ngbracket/ngx-layout';
|
|
15
14
|
import * as i5 from '@angular/material/tooltip';
|
|
16
15
|
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
17
|
-
import
|
|
18
|
-
import { MatIconModule } from '@angular/material/icon';
|
|
16
|
+
import { MatDialogModule } from '@angular/material/dialog';
|
|
19
17
|
import * as i7 from '@angular/material/button';
|
|
20
18
|
import { MatButtonModule } from '@angular/material/button';
|
|
19
|
+
import { MatListModule } from '@angular/material/list';
|
|
21
20
|
import * as i6 from '@angular/material/menu';
|
|
22
21
|
import { MatMenuModule } from '@angular/material/menu';
|
|
23
|
-
import * as
|
|
22
|
+
import * as i2$1 from '@angular/material/icon';
|
|
23
|
+
import { MatIconModule } from '@angular/material/icon';
|
|
24
24
|
import * as i8 from '@ngx-translate/core';
|
|
25
|
-
import { TranslateModule } from '@ngx-translate/core';
|
|
26
|
-
import { FlexLayoutModule } from '@ngbracket/ngx-layout';
|
|
27
|
-
import { MatDialogModule } from '@angular/material/dialog';
|
|
28
|
-
import { MatListModule } from '@angular/material/list';
|
|
25
|
+
import { TranslateService, TranslateModule } from '@ngx-translate/core';
|
|
29
26
|
import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
|
|
27
|
+
import * as i1$2 from '@ngbracket/ngx-layout/flex';
|
|
28
|
+
import * as i2$2 from '@ngbracket/ngx-layout/extended';
|
|
29
|
+
import * as i4 from '@angular/material/divider';
|
|
30
30
|
|
|
31
31
|
/** Necessary for menu components to determine where loaded data from strapi should be placed - either in front of pre defined items or in end. */
|
|
32
32
|
var StrapiDataLocation;
|
|
@@ -277,6 +277,208 @@ class NavBaseComponent {
|
|
|
277
277
|
}] }); })();
|
|
278
278
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(NavBaseComponent, { className: "NavBaseComponent", filePath: "lib\\components\\nav-base\\nav-base.component.ts", lineNumber: 13 }); })();
|
|
279
279
|
|
|
280
|
+
const _c0$2 = ["*"];
|
|
281
|
+
function SideNavMenuComponent_a_14_Template(rf, ctx) { if (rf & 1) {
|
|
282
|
+
const _r1 = i0.ɵɵgetCurrentView();
|
|
283
|
+
i0.ɵɵelementStart(0, "a", 2);
|
|
284
|
+
i0.ɵɵpipe(1, "translate");
|
|
285
|
+
i0.ɵɵlistener("click", function SideNavMenuComponent_a_14_Template_a_click_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.logoClick($event)); });
|
|
286
|
+
i0.ɵɵelement(2, "img", 3);
|
|
287
|
+
i0.ɵɵelementStart(3, "span", 4);
|
|
288
|
+
i0.ɵɵtext(4);
|
|
289
|
+
i0.ɵɵelementEnd()();
|
|
290
|
+
} if (rf & 2) {
|
|
291
|
+
const ctx_r1 = i0.ɵɵnextContext();
|
|
292
|
+
i0.ɵɵclassProp("no-click", ctx_r1.menuSettings == null ? null : ctx_r1.menuSettings.disableLogoNavigation);
|
|
293
|
+
i0.ɵɵproperty("libPlausibleEvent", ctx_r1.LOGOCLICK_PLAUSIBLE_EVENT)("href", ctx_r1.baseUrl, i0.ɵɵsanitizeUrl);
|
|
294
|
+
i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(1, 7, "MENU.ARIA_LABELS.LOGO"));
|
|
295
|
+
i0.ɵɵadvance(2);
|
|
296
|
+
i0.ɵɵproperty("src", ctx_r1.menuLogoImage, i0.ɵɵsanitizeUrl);
|
|
297
|
+
i0.ɵɵadvance(2);
|
|
298
|
+
i0.ɵɵtextInterpolate1(" ", ctx_r1.productName, " ");
|
|
299
|
+
} }
|
|
300
|
+
function SideNavMenuComponent_Conditional_24_Template(rf, ctx) { if (rf & 1) {
|
|
301
|
+
const _r3 = i0.ɵɵgetCurrentView();
|
|
302
|
+
i0.ɵɵelementStart(0, "lib-menu-lang-switcher", 18);
|
|
303
|
+
i0.ɵɵlistener("changeLanguageEvent", function SideNavMenuComponent_Conditional_24_Template_lib_menu_lang_switcher_changeLanguageEvent_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.changeLanguage($event)); });
|
|
304
|
+
i0.ɵɵelementEnd();
|
|
305
|
+
} if (rf & 2) {
|
|
306
|
+
const ctx_r1 = i0.ɵɵnextContext();
|
|
307
|
+
i0.ɵɵproperty("isCollapsed", ctx_r1.collapsed)("languages", ctx_r1.supportedLanguages);
|
|
308
|
+
} }
|
|
309
|
+
class SideNavMenuComponent extends NavBaseComponent {
|
|
310
|
+
#username;
|
|
311
|
+
get username() { return this.#username; }
|
|
312
|
+
set username(value) {
|
|
313
|
+
// if username is passed whith whitespace in begginining, it breaks UI, so trim it for safety.
|
|
314
|
+
this.#username = value?.trim();
|
|
315
|
+
}
|
|
316
|
+
get menuLogoImage() {
|
|
317
|
+
return this.collapsed
|
|
318
|
+
? this.menuSettings.menuLogoCollapsed ?? this.menuSettings.menuLogo
|
|
319
|
+
: this.menuSettings.menuLogo;
|
|
320
|
+
}
|
|
321
|
+
get sideNavWidth() {
|
|
322
|
+
return this.collapsed ? this.menuSettings.collapsedWidth : this.menuSettings.expandedWidth;
|
|
323
|
+
}
|
|
324
|
+
constructor(strapiLinkService, domService, menuItems) {
|
|
325
|
+
super(menuItems);
|
|
326
|
+
this.strapiLinkService = strapiLinkService;
|
|
327
|
+
this.domService = domService;
|
|
328
|
+
this.menuItems = menuItems;
|
|
329
|
+
this.menuSettings = {
|
|
330
|
+
expandedWidth: '241px',
|
|
331
|
+
collapsedWidth: '56px',
|
|
332
|
+
menuLogo: '',
|
|
333
|
+
menuLogoCollapsed: '',
|
|
334
|
+
disableStrapi: false,
|
|
335
|
+
disableLogoNavigation: false,
|
|
336
|
+
userOptions: []
|
|
337
|
+
};
|
|
338
|
+
this.changeLanguageEvent = new EventEmitter();
|
|
339
|
+
this.collapsed = false;
|
|
340
|
+
this.COLLAPSED_LOCAL_STORAGE_KEY = "TLD_MENU_SIDE_NAV_COLLAPSED";
|
|
341
|
+
//#region Plausible event variables for collapse button
|
|
342
|
+
this.COLLAPSE_PLAUSIBLE_EVENT_ID = "collapseMenu";
|
|
343
|
+
this.COLLAPSE_PLAUSIBLE_ACTION_KEY = "action";
|
|
344
|
+
this.LOGOCLICK_PLAUSIBLE_ACTION_ID = "tilde_logo_click";
|
|
345
|
+
this.LOGOCLICK_PLAUSIBLE_EVENT = {
|
|
346
|
+
eventId: this.LOGOCLICK_PLAUSIBLE_ACTION_ID,
|
|
347
|
+
properties: []
|
|
348
|
+
};
|
|
349
|
+
this.EXPAND_PLAUSIBLE_EVENT = {
|
|
350
|
+
eventId: this.COLLAPSE_PLAUSIBLE_EVENT_ID,
|
|
351
|
+
properties: [{ key: this.COLLAPSE_PLAUSIBLE_ACTION_KEY, value: "expand" }]
|
|
352
|
+
};
|
|
353
|
+
this.COLLAPSE_PLAUSIBLE_EVENT = {
|
|
354
|
+
eventId: this.COLLAPSE_PLAUSIBLE_EVENT_ID,
|
|
355
|
+
properties: [{ key: this.COLLAPSE_PLAUSIBLE_ACTION_KEY, value: "collapse" }]
|
|
356
|
+
};
|
|
357
|
+
this.baseUrl = menuItems.menuSharedConfig.baseUrl || '';
|
|
358
|
+
}
|
|
359
|
+
ngOnInit() {
|
|
360
|
+
super.ngOnInit();
|
|
361
|
+
this.getColapsedFromLocalStorage();
|
|
362
|
+
}
|
|
363
|
+
logoClick(event) {
|
|
364
|
+
this.strapiLinkService.strapiLinkClick(event);
|
|
365
|
+
}
|
|
366
|
+
toggleCollapse() {
|
|
367
|
+
this.collapsed = !this.collapsed;
|
|
368
|
+
this.setColapsedFromLocalStorage();
|
|
369
|
+
}
|
|
370
|
+
linkCallback(link) {
|
|
371
|
+
if (link.callback) {
|
|
372
|
+
link.callback();
|
|
373
|
+
}
|
|
374
|
+
}
|
|
375
|
+
changeLanguage(lang) {
|
|
376
|
+
this.changeLanguageEvent.emit(lang);
|
|
377
|
+
}
|
|
378
|
+
getColapsedFromLocalStorage() {
|
|
379
|
+
if (!this.domService.localStorage) {
|
|
380
|
+
return;
|
|
381
|
+
}
|
|
382
|
+
this.collapsed = (this.domService.localStorage.getItem(this.COLLAPSED_LOCAL_STORAGE_KEY) == 'true' || ResolutionHelper.isMobileRes()) ? true : false;
|
|
383
|
+
}
|
|
384
|
+
setColapsedFromLocalStorage() {
|
|
385
|
+
if (!this.domService.localStorage) {
|
|
386
|
+
return;
|
|
387
|
+
}
|
|
388
|
+
this.domService.localStorage.setItem(this.COLLAPSED_LOCAL_STORAGE_KEY, this.collapsed.toString());
|
|
389
|
+
}
|
|
390
|
+
static { this.ɵfac = function SideNavMenuComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SideNavMenuComponent)(i0.ɵɵdirectiveInject(i1.StrapiLinkService), i0.ɵɵdirectiveInject(i2.DOMService), i0.ɵɵdirectiveInject(MenuItemsService)); }; }
|
|
391
|
+
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SideNavMenuComponent, selectors: [["lib-side-nav-menu"]], inputs: { username: "username", menuSettings: "menuSettings", productName: "productName", supportedLanguages: "supportedLanguages" }, outputs: { changeLanguageEvent: "changeLanguageEvent" }, features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c0$2, decls: 28, vars: 37, consts: [["fxHide.gt-xs", ""], [1, "mobile-header", 3, "fxHide"], ["fxFlex", "3.125em", "fxLayoutAlign", "start center", 3, "click", "libPlausibleEvent", "href"], ["height", "40", "width", "40", "alt", "logo", 1, "menu-logo", 3, "src"], [1, "menu-product-name"], ["mat-icon-button", "", 1, "toggler", 3, "click", "libPlausibleEvent"], ["fxLayout", "column", 1, "menu-container", 3, "ngClass.lt-sm"], ["fxLayout", "column", "fxFlexFill", "", 1, "content"], ["fxLayout", "row", 1, "menu-container-header", 3, "fxLayoutAlign"], ["fxFlex", "3.125em", "fxLayoutAlign", "start center", 3, "libPlausibleEvent", "no-click", "href", "click", 4, "ngIf"], ["mat-icon-button", "", 1, "toggler", 3, "click", "libPlausibleEvent", "matTooltip"], ["fxHide.gt-xs", "", 3, "ngClass.lt-sm"], ["fxHide.lt-sm", ""], ["fxLayout", "column", 1, "menu-wrapper"], ["role", "navigation", 3, "toggleCollapseEvent", "direction", "isOpen", "active"], [3, "isCollapsed", "languages"], ["fxFlex", "", "fxLayout", "column"], [3, "linkCallbackEvent", "userOptions", "username", "collapsed"], [3, "changeLanguageEvent", "isCollapsed", "languages"]], template: function SideNavMenuComponent_Template(rf, ctx) { if (rf & 1) {
|
|
392
|
+
i0.ɵɵprojectionDef();
|
|
393
|
+
i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "a", 2);
|
|
394
|
+
i0.ɵɵpipe(3, "translate");
|
|
395
|
+
i0.ɵɵlistener("click", function SideNavMenuComponent_Template_a_click_2_listener($event) { return ctx.logoClick($event); });
|
|
396
|
+
i0.ɵɵelement(4, "img", 3);
|
|
397
|
+
i0.ɵɵelementStart(5, "span", 4);
|
|
398
|
+
i0.ɵɵtext(6);
|
|
399
|
+
i0.ɵɵelementEnd()();
|
|
400
|
+
i0.ɵɵelementStart(7, "button", 5);
|
|
401
|
+
i0.ɵɵpipe(8, "translate");
|
|
402
|
+
i0.ɵɵlistener("click", function SideNavMenuComponent_Template_button_click_7_listener() { return ctx.toggleCollapse(); });
|
|
403
|
+
i0.ɵɵelementStart(9, "mat-icon");
|
|
404
|
+
i0.ɵɵtext(10, "menu");
|
|
405
|
+
i0.ɵɵelementEnd()()()();
|
|
406
|
+
i0.ɵɵelementStart(11, "div", 6)(12, "div", 7)(13, "div", 8);
|
|
407
|
+
i0.ɵɵtemplate(14, SideNavMenuComponent_a_14_Template, 5, 9, "a", 9);
|
|
408
|
+
i0.ɵɵelementStart(15, "button", 10);
|
|
409
|
+
i0.ɵɵpipe(16, "translate");
|
|
410
|
+
i0.ɵɵpipe(17, "translate");
|
|
411
|
+
i0.ɵɵlistener("click", function SideNavMenuComponent_Template_button_click_15_listener() { return ctx.toggleCollapse(); });
|
|
412
|
+
i0.ɵɵelementStart(18, "mat-icon", 11);
|
|
413
|
+
i0.ɵɵtext(19, "close");
|
|
414
|
+
i0.ɵɵelementEnd();
|
|
415
|
+
i0.ɵɵelementStart(20, "mat-icon", 12);
|
|
416
|
+
i0.ɵɵtext(21);
|
|
417
|
+
i0.ɵɵelementEnd()()();
|
|
418
|
+
i0.ɵɵelementStart(22, "div", 13)(23, "menu-columns", 14);
|
|
419
|
+
i0.ɵɵlistener("toggleCollapseEvent", function SideNavMenuComponent_Template_menu_columns_toggleCollapseEvent_23_listener() { return ctx.toggleCollapse(); });
|
|
420
|
+
i0.ɵɵelementEnd();
|
|
421
|
+
i0.ɵɵtemplate(24, SideNavMenuComponent_Conditional_24_Template, 1, 2, "lib-menu-lang-switcher", 15);
|
|
422
|
+
i0.ɵɵelementEnd();
|
|
423
|
+
i0.ɵɵelementStart(25, "div", 16);
|
|
424
|
+
i0.ɵɵprojection(26);
|
|
425
|
+
i0.ɵɵelementEnd();
|
|
426
|
+
i0.ɵɵelementStart(27, "lib-menu-profile", 17);
|
|
427
|
+
i0.ɵɵlistener("linkCallbackEvent", function SideNavMenuComponent_Template_lib_menu_profile_linkCallbackEvent_27_listener($event) { return ctx.linkCallback($event); });
|
|
428
|
+
i0.ɵɵelementEnd()()();
|
|
429
|
+
} if (rf & 2) {
|
|
430
|
+
i0.ɵɵadvance();
|
|
431
|
+
i0.ɵɵproperty("fxHide", !ctx.collapsed);
|
|
432
|
+
i0.ɵɵadvance();
|
|
433
|
+
i0.ɵɵclassProp("no-click", ctx.menuSettings == null ? null : ctx.menuSettings.disableLogoNavigation);
|
|
434
|
+
i0.ɵɵproperty("libPlausibleEvent", ctx.LOGOCLICK_PLAUSIBLE_EVENT)("href", ctx.baseUrl, i0.ɵɵsanitizeUrl);
|
|
435
|
+
i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(3, 29, "MENU.ARIA_LABELS.LOGO"));
|
|
436
|
+
i0.ɵɵadvance(2);
|
|
437
|
+
i0.ɵɵproperty("src", ctx.menuLogoImage, i0.ɵɵsanitizeUrl);
|
|
438
|
+
i0.ɵɵadvance(2);
|
|
439
|
+
i0.ɵɵtextInterpolate1(" ", ctx.productName, " ");
|
|
440
|
+
i0.ɵɵadvance();
|
|
441
|
+
i0.ɵɵproperty("libPlausibleEvent", ctx.collapsed ? ctx.EXPAND_PLAUSIBLE_EVENT : ctx.COLLAPSE_PLAUSIBLE_EVENT);
|
|
442
|
+
i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(8, 31, "ARIA_LABELS.MENU_TOGGLER"));
|
|
443
|
+
i0.ɵɵadvance(4);
|
|
444
|
+
i0.ɵɵstyleProp("width", ctx.sideNavWidth);
|
|
445
|
+
i0.ɵɵclassProp("collapsed", ctx.collapsed);
|
|
446
|
+
i0.ɵɵproperty("ngClass.lt-sm", "mobile");
|
|
447
|
+
i0.ɵɵadvance(2);
|
|
448
|
+
i0.ɵɵproperty("fxLayoutAlign", ctx.collapsed ? "center center" : "space-between center");
|
|
449
|
+
i0.ɵɵadvance();
|
|
450
|
+
i0.ɵɵproperty("ngIf", !ctx.collapsed);
|
|
451
|
+
i0.ɵɵadvance();
|
|
452
|
+
i0.ɵɵproperty("libPlausibleEvent", ctx.collapsed ? ctx.EXPAND_PLAUSIBLE_EVENT : ctx.COLLAPSE_PLAUSIBLE_EVENT)("matTooltip", i0.ɵɵpipeBind1(16, 33, ctx.collapsed ? "MENU.EXPAND" : "MENU.COLLAPSE"));
|
|
453
|
+
i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(17, 35, "ARIA_LABELS.MENU_TOGGLER"));
|
|
454
|
+
i0.ɵɵadvance(3);
|
|
455
|
+
i0.ɵɵproperty("ngClass.lt-sm", "mob-close-icon");
|
|
456
|
+
i0.ɵɵadvance(3);
|
|
457
|
+
i0.ɵɵtextInterpolate(ctx.collapsed ? "keyboard_double_arrow_right" : "keyboard_double_arrow_left");
|
|
458
|
+
i0.ɵɵadvance(2);
|
|
459
|
+
i0.ɵɵproperty("direction", ctx.direction)("isOpen", !ctx.collapsed)("active", ctx.active);
|
|
460
|
+
i0.ɵɵadvance();
|
|
461
|
+
i0.ɵɵconditional(ctx.supportedLanguages.length > 1 ? 24 : -1);
|
|
462
|
+
i0.ɵɵadvance(3);
|
|
463
|
+
i0.ɵɵproperty("userOptions", ctx.menuSettings.userOptions)("username", ctx.username)("collapsed", ctx.collapsed);
|
|
464
|
+
} }, styles: ["a[_ngcontent-%COMP%]{text-decoration:none}.no-click[_ngcontent-%COMP%]{pointer-events:none!important}.mobile-header[_ngcontent-%COMP%]{display:flex;justify-content:space-between;padding:23px 27px;background-color:#fcfcfc;border:1px solid var(--base-70)}.mobile.menu-container.collapsed[_ngcontent-%COMP%]{display:none!important}.mobile.menu-container[_ngcontent-%COMP%]:not(.collapsed){display:block!important;position:fixed;min-width:100vw;min-height:100dvh;z-index:1000}button[_ngcontent-%COMP%]:has(.mob-close-icon){margin-right:14px}.menu-container[_ngcontent-%COMP%] [_ngcontent-%COMP%]::-webkit-scrollbar{width:5px}.menu-container[_ngcontent-%COMP%] [_ngcontent-%COMP%]::-webkit-scrollbar-thumb{background:var(--base-95);background-clip:padding-box}.menu-container[_ngcontent-%COMP%] [_ngcontent-%COMP%]::-webkit-scrollbar-track{background:var(--base-100)}.menu-product-name[_ngcontent-%COMP%]{white-space:nowrap;margin-left:12px;font-weight:600;color:var(--base-10)}.menu-container[_ngcontent-%COMP%]{max-height:100dvh;white-space:nowrap;height:100%;transition:width .2s ease;min-height:100dvh;overflow:auto;background:var(--base-100);border-right:2px solid var(--base-95)}.menu-container[_ngcontent-%COMP%] .menu-container-header[_ngcontent-%COMP%]{margin:24px 0;max-height:40px}.menu-container.collapsed[_ngcontent-%COMP%] .menu-container-header[_ngcontent-%COMP%]{margin:24px 0 32px!important}.menu-container[_ngcontent-%COMP%] .content[_ngcontent-%COMP%]:not(.collapsed){overflow-x:hidden;padding:0 12px}.menu-container[_ngcontent-%COMP%] .content[_ngcontent-%COMP%]:not(.collapsed) .menu-logo[_ngcontent-%COMP%]{margin-left:16px;max-width:100%}.menu-container[_ngcontent-%COMP%] .divider[_ngcontent-%COMP%]{width:100%}[_nghost-%COMP%] .collapsed .profile-wrapper{margin:36px 0!important}[_nghost-%COMP%] .mobile .profile-name{max-width:60vw}[_nghost-%COMP%] .menu-item{display:flex;padding:16px!important;border-radius:4px!important}[_nghost-%COMP%] .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}[_nghost-%COMP%] .child-list .menu-item-title{margin-left:5px}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}[_nghost-%COMP%] .mobile .child-list .menu-item{padding:8px 54px!important} .cdk-overlay-container .profile-menu, .cdk-overlay-container .lang-menu{min-width:250px!important;margin:10px 0!important} .mat-mdc-menu-item .mat-icon{margin-right:5px!important} .collapsed .profile-wrapper{justify-content:center!important}"] }); }
|
|
465
|
+
}
|
|
466
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SideNavMenuComponent, [{
|
|
467
|
+
type: Component,
|
|
468
|
+
args: [{ selector: 'lib-side-nav-menu', template: "<div fxHide.gt-xs>\r\n <div [fxHide]=\"!collapsed\" class=\"mobile-header\">\r\n <a [libPlausibleEvent]=\"LOGOCLICK_PLAUSIBLE_EVENT\" fxFlex=\"3.125em\" [href]=\"baseUrl\" [class.no-click]=\"menuSettings?.disableLogoNavigation\"\r\n [attr.aria-label]=\"'MENU.ARIA_LABELS.LOGO' | translate\" (click)=\"logoClick($event)\" fxLayoutAlign=\"start center\"\r\n >\r\n <img height=\"40\" width=\"40\" class=\"menu-logo\" [src]=\"menuLogoImage\" alt=\"logo\" />\r\n <span class=\"menu-product-name\">\r\n {{ productName }}\r\n </span>\r\n </a>\r\n\r\n <button\r\n mat-icon-button\r\n class=\"toggler\"\r\n [attr.aria-label]=\"'ARIA_LABELS.MENU_TOGGLER' | translate\"\r\n [libPlausibleEvent]=\"collapsed ? EXPAND_PLAUSIBLE_EVENT : COLLAPSE_PLAUSIBLE_EVENT\"\r\n (click)=\"toggleCollapse()\"\r\n >\r\n <mat-icon>menu</mat-icon>\r\n </button>\r\n </div>\r\n</div>\r\n\r\n<div [ngClass.lt-sm]=\"'mobile'\" class=\"menu-container\" [style.width]=\"sideNavWidth\" fxLayout=\"column\" [class.collapsed]=\"collapsed\">\r\n <div class=\"content\" fxLayout=\"column\" fxFlexFill>\r\n <div class=\"menu-container-header\" fxLayout=\"row\" [fxLayoutAlign]=\"collapsed ? 'center center' : 'space-between center'\">\r\n <a *ngIf=\"!collapsed\" [libPlausibleEvent]=\"LOGOCLICK_PLAUSIBLE_EVENT\" fxFlex=\"3.125em\" [class.no-click]=\"menuSettings?.disableLogoNavigation\" [href]=\"baseUrl\"\r\n [attr.aria-label]=\"'MENU.ARIA_LABELS.LOGO' | translate\" (click)=\"logoClick($event)\" fxLayoutAlign=\"start center\"\r\n >\r\n <img height=\"40\" width=\"40\" class=\"menu-logo\" [src]=\"menuLogoImage\" alt=\"logo\" />\r\n <span class=\"menu-product-name\">\r\n {{ productName }}\r\n </span>\r\n </a>\r\n\r\n <button\r\n mat-icon-button\r\n class=\"toggler\"\r\n [attr.aria-label]=\"'ARIA_LABELS.MENU_TOGGLER' | translate\"\r\n [libPlausibleEvent]=\"collapsed ? EXPAND_PLAUSIBLE_EVENT : COLLAPSE_PLAUSIBLE_EVENT\"\r\n [matTooltip]=\"(collapsed ? 'MENU.EXPAND' : 'MENU.COLLAPSE') | translate\"\r\n (click)=\"toggleCollapse()\"\r\n >\r\n <mat-icon fxHide.gt-xs [ngClass.lt-sm]=\"'mob-close-icon'\">close</mat-icon>\r\n <mat-icon fxHide.lt-sm>{{ collapsed ? 'keyboard_double_arrow_right' : 'keyboard_double_arrow_left' }}</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <div class=\"menu-wrapper\" fxLayout=\"column\">\r\n <menu-columns (toggleCollapseEvent)=\"toggleCollapse()\" [direction]=\"direction\" role=\"navigation\" [isOpen]=\"!collapsed\"\r\n [active]=\"active\"></menu-columns>\r\n\r\n @if (supportedLanguages.length > 1) {\r\n <lib-menu-lang-switcher [isCollapsed]=\"collapsed\" [languages]=\"supportedLanguages\" (changeLanguageEvent)=\"changeLanguage($event)\"></lib-menu-lang-switcher>\r\n }\r\n </div>\r\n <div fxFlex fxLayout=\"column\">\r\n <ng-content></ng-content>\r\n </div>\r\n\r\n <lib-menu-profile\r\n [userOptions]=\"menuSettings.userOptions\"\r\n [username]=\"username\"\r\n [collapsed]=\"collapsed\"\r\n (linkCallbackEvent)=\"linkCallback($event)\"\r\n ></lib-menu-profile>\r\n</div>\r\n", styles: ["a{text-decoration:none}.no-click{pointer-events:none!important}.mobile-header{display:flex;justify-content:space-between;padding:23px 27px;background-color:#fcfcfc;border:1px solid var(--base-70)}.mobile.menu-container.collapsed{display:none!important}.mobile.menu-container:not(.collapsed){display:block!important;position:fixed;min-width:100vw;min-height:100dvh;z-index:1000}button:has(.mob-close-icon){margin-right:14px}.menu-container ::-webkit-scrollbar{width:5px}.menu-container ::-webkit-scrollbar-thumb{background:var(--base-95);background-clip:padding-box}.menu-container ::-webkit-scrollbar-track{background:var(--base-100)}.menu-product-name{white-space:nowrap;margin-left:12px;font-weight:600;color:var(--base-10)}.menu-container{max-height:100dvh;white-space:nowrap;height:100%;transition:width .2s ease;min-height:100dvh;overflow:auto;background:var(--base-100);border-right:2px solid var(--base-95)}.menu-container .menu-container-header{margin:24px 0;max-height:40px}.menu-container.collapsed .menu-container-header{margin:24px 0 32px!important}.menu-container .content:not(.collapsed){overflow-x:hidden;padding:0 12px}.menu-container .content:not(.collapsed) .menu-logo{margin-left:16px;max-width:100%}.menu-container .divider{width:100%}:host ::ng-deep .collapsed .profile-wrapper{margin:36px 0!important}:host ::ng-deep .mobile .profile-name{max-width:60vw}:host ::ng-deep .menu-item{display:flex;padding:16px!important;border-radius:4px!important}:host ::ng-deep .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}:host ::ng-deep .child-list .menu-item-title{margin-left:5px}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}:host ::ng-deep .mobile .child-list .menu-item{padding:8px 54px!important}::ng-deep .cdk-overlay-container .profile-menu,::ng-deep .cdk-overlay-container .lang-menu{min-width:250px!important;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}\n"] }]
|
|
469
|
+
}], () => [{ type: i1.StrapiLinkService }, { type: i2.DOMService }, { type: MenuItemsService }], { username: [{
|
|
470
|
+
type: Input
|
|
471
|
+
}], menuSettings: [{
|
|
472
|
+
type: Input
|
|
473
|
+
}], productName: [{
|
|
474
|
+
type: Input
|
|
475
|
+
}], supportedLanguages: [{
|
|
476
|
+
type: Input
|
|
477
|
+
}], changeLanguageEvent: [{
|
|
478
|
+
type: Output
|
|
479
|
+
}] }); })();
|
|
480
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SideNavMenuComponent, { className: "SideNavMenuComponent", filePath: "lib\\components\\side-nav-menu\\side-nav-menu.component.ts", lineNumber: 15 }); })();
|
|
481
|
+
|
|
280
482
|
var MenuLayoutDirection;
|
|
281
483
|
(function (MenuLayoutDirection) {
|
|
282
484
|
MenuLayoutDirection["column"] = "column";
|
|
@@ -322,7 +524,7 @@ class MenuIconComponent {
|
|
|
322
524
|
i0.ɵɵtemplate(0, MenuIconComponent_ng_container_0_Template, 4, 2, "ng-container", 1);
|
|
323
525
|
} if (rf & 2) {
|
|
324
526
|
i0.ɵɵproperty("ngIf", ctx.menuItem.icon);
|
|
325
|
-
} }, dependencies: [
|
|
527
|
+
} }, dependencies: [i3.NgIf, i2$1.MatIcon], styles: [".menu-icon[_ngcontent-%COMP%]{color:var(--base-30);margin:auto;min-width:24px;min-height:24px;max-width:24px;max-height:24px;vertical-align:middle}"] }); }
|
|
326
528
|
}
|
|
327
529
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuIconComponent, [{
|
|
328
530
|
type: Component,
|
|
@@ -394,7 +596,7 @@ class MenuItemLinkComponent {
|
|
|
394
596
|
i0.ɵɵproperty("ngIf", ctx.showIcons && ctx.menuItem.icon);
|
|
395
597
|
i0.ɵɵadvance();
|
|
396
598
|
i0.ɵɵproperty("ngIf", ctx.labelsVisible);
|
|
397
|
-
} }, dependencies: [i1$2.DefaultLayoutDirective, i1$2.DefaultLayoutAlignDirective, i2$2.DefaultClassDirective,
|
|
599
|
+
} }, dependencies: [i1$2.DefaultLayoutDirective, i1$2.DefaultLayoutAlignDirective, i2$2.DefaultClassDirective, i3.NgIf, i5.MatTooltip, i2.PlausibleEventDirective, MenuIconComponent, i8.TranslatePipe], styles: ["[_nghost-%COMP%]{width:100%}.mobile[_ngcontent-%COMP%] .menu-item-title[_ngcontent-%COMP%]{margin-left:5px}"] }); }
|
|
398
600
|
}
|
|
399
601
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuItemLinkComponent, [{
|
|
400
602
|
type: Component,
|
|
@@ -466,7 +668,7 @@ class MenuItemBtnComponent {
|
|
|
466
668
|
i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(3, 6, ctx.menuItem.title), " ");
|
|
467
669
|
i0.ɵɵadvance(2);
|
|
468
670
|
i0.ɵɵproperty("ngIf", ctx.menuItem.subMenu == null ? null : ctx.menuItem.subMenu.length);
|
|
469
|
-
} }, dependencies: [i1$2.DefaultLayoutAlignDirective, i2$2.DefaultClassDirective,
|
|
671
|
+
} }, dependencies: [i1$2.DefaultLayoutAlignDirective, i2$2.DefaultClassDirective, i3.NgForOf, i3.NgIf, i2$1.MatIcon, i7.MatIconButton, i6.MatMenu, i6.MatMenuItem, i6.MatMenuTrigger, i8.TranslatePipe], styles: ["[_nghost-%COMP%]{width:100%}.menu-item[_ngcontent-%COMP%]:not(:hover) .sub-menu-btn[_ngcontent-%COMP%]{display:none}.menu-item[_ngcontent-%COMP%]:has(.open){background-color:var(--base-95)!important}.open[_ngcontent-%COMP%] .sub-menu-btn[_ngcontent-%COMP%]{display:block!important}.mobile[_ngcontent-%COMP%] .btn-label[_ngcontent-%COMP%]{margin-left:5px}.btn-label[_ngcontent-%COMP%]{font-size:14px;font-weight:500;line-height:20px;letter-spacing:.1px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}"] }); }
|
|
470
672
|
}
|
|
471
673
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuItemBtnComponent, [{
|
|
472
674
|
type: Component,
|
|
@@ -482,7 +684,7 @@ class MenuItemBtnComponent {
|
|
|
482
684
|
|
|
483
685
|
const _c0$1 = a0 => ({ menuItem: a0 });
|
|
484
686
|
function MenuItemListComponent_Conditional_1_mat_icon_1_Template(rf, ctx) { if (rf & 1) {
|
|
485
|
-
i0.ɵɵelementStart(0, "mat-icon",
|
|
687
|
+
i0.ɵɵelementStart(0, "mat-icon", 11);
|
|
486
688
|
i0.ɵɵtext(1);
|
|
487
689
|
i0.ɵɵelementEnd();
|
|
488
690
|
} if (rf & 2) {
|
|
@@ -491,7 +693,7 @@ function MenuItemListComponent_Conditional_1_mat_icon_1_Template(rf, ctx) { if (
|
|
|
491
693
|
i0.ɵɵtextInterpolate(ctx_r0.menuItemGroup.titleIcon);
|
|
492
694
|
} }
|
|
493
695
|
function MenuItemListComponent_Conditional_1_button_2_Template(rf, ctx) { if (rf & 1) {
|
|
494
|
-
i0.ɵɵelementStart(0, "button",
|
|
696
|
+
i0.ɵɵelementStart(0, "button", 12);
|
|
495
697
|
i0.ɵɵpipe(1, "translate");
|
|
496
698
|
i0.ɵɵelementStart(2, "mat-icon");
|
|
497
699
|
i0.ɵɵtext(3);
|
|
@@ -504,8 +706,8 @@ function MenuItemListComponent_Conditional_1_button_2_Template(rf, ctx) { if (rf
|
|
|
504
706
|
i0.ɵɵtextInterpolate(ctx_r0.menuItemGroup.titleNavigation.icon);
|
|
505
707
|
} }
|
|
506
708
|
function MenuItemListComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
507
|
-
i0.ɵɵelementStart(0, "div",
|
|
508
|
-
i0.ɵɵtemplate(1, MenuItemListComponent_Conditional_1_mat_icon_1_Template, 2, 1, "mat-icon",
|
|
709
|
+
i0.ɵɵelementStart(0, "div", 6);
|
|
710
|
+
i0.ɵɵtemplate(1, MenuItemListComponent_Conditional_1_mat_icon_1_Template, 2, 1, "mat-icon", 9)(2, MenuItemListComponent_Conditional_1_button_2_Template, 4, 5, "button", 10);
|
|
509
711
|
i0.ɵɵtext(3);
|
|
510
712
|
i0.ɵɵpipe(4, "translate");
|
|
511
713
|
i0.ɵɵelementEnd();
|
|
@@ -522,7 +724,7 @@ function MenuItemListComponent_Conditional_2_ng_container_0_Template(rf, ctx) {
|
|
|
522
724
|
i0.ɵɵelementContainer(0);
|
|
523
725
|
} }
|
|
524
726
|
function MenuItemListComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
|
|
525
|
-
i0.ɵɵtemplate(0, MenuItemListComponent_Conditional_2_ng_container_0_Template, 1, 0, "ng-container",
|
|
727
|
+
i0.ɵɵtemplate(0, MenuItemListComponent_Conditional_2_ng_container_0_Template, 1, 0, "ng-container", 13);
|
|
526
728
|
} if (rf & 2) {
|
|
527
729
|
i0.ɵɵnextContext();
|
|
528
730
|
const itemGroupButton_r2 = i0.ɵɵreference(12);
|
|
@@ -533,7 +735,7 @@ function MenuItemListComponent_ng_container_4_ng_container_1_Template(rf, ctx) {
|
|
|
533
735
|
} }
|
|
534
736
|
function MenuItemListComponent_ng_container_4_Template(rf, ctx) { if (rf & 1) {
|
|
535
737
|
i0.ɵɵelementContainerStart(0);
|
|
536
|
-
i0.ɵɵtemplate(1, MenuItemListComponent_ng_container_4_ng_container_1_Template, 1, 0, "ng-container",
|
|
738
|
+
i0.ɵɵtemplate(1, MenuItemListComponent_ng_container_4_ng_container_1_Template, 1, 0, "ng-container", 14);
|
|
537
739
|
i0.ɵɵelementContainerEnd();
|
|
538
740
|
} if (rf & 2) {
|
|
539
741
|
const menuItem_r3 = ctx.$implicit;
|
|
@@ -546,29 +748,40 @@ function MenuItemListComponent_ng_container_4_Template(rf, ctx) { if (rf & 1) {
|
|
|
546
748
|
} }
|
|
547
749
|
function MenuItemListComponent_ng_template_5_ng_container_2_Template(rf, ctx) { if (rf & 1) {
|
|
548
750
|
i0.ɵɵelementContainerStart(0);
|
|
549
|
-
i0.ɵɵelement(1, "tld-menu-icon",
|
|
751
|
+
i0.ɵɵelement(1, "tld-menu-icon", 17);
|
|
550
752
|
i0.ɵɵelementContainerEnd();
|
|
551
753
|
} if (rf & 2) {
|
|
552
754
|
const menuItem_r8 = i0.ɵɵnextContext().menuItem;
|
|
553
755
|
i0.ɵɵadvance();
|
|
554
756
|
i0.ɵɵproperty("menuItem", menuItem_r8);
|
|
555
757
|
} }
|
|
556
|
-
function
|
|
557
|
-
i0.ɵɵelementStart(0, "span",
|
|
558
|
-
i0.ɵɵtext(1);
|
|
758
|
+
function MenuItemListComponent_ng_template_5_ng_container_3_ng_container_5_span_1_Template(rf, ctx) { if (rf & 1) {
|
|
759
|
+
i0.ɵɵelementStart(0, "span", 21);
|
|
760
|
+
i0.ɵɵtext(1, " keyboard_arrow_down ");
|
|
559
761
|
i0.ɵɵelementEnd();
|
|
762
|
+
} }
|
|
763
|
+
function MenuItemListComponent_ng_template_5_ng_container_3_ng_container_5_ng_template_2_Template(rf, ctx) { if (rf & 1) {
|
|
764
|
+
i0.ɵɵelementStart(0, "span", 21);
|
|
765
|
+
i0.ɵɵtext(1, " keyboard_arrow_up ");
|
|
766
|
+
i0.ɵɵelementEnd();
|
|
767
|
+
} }
|
|
768
|
+
function MenuItemListComponent_ng_template_5_ng_container_3_ng_container_5_Template(rf, ctx) { if (rf & 1) {
|
|
769
|
+
i0.ɵɵelementContainerStart(0);
|
|
770
|
+
i0.ɵɵtemplate(1, MenuItemListComponent_ng_template_5_ng_container_3_ng_container_5_span_1_Template, 2, 0, "span", 20)(2, MenuItemListComponent_ng_template_5_ng_container_3_ng_container_5_ng_template_2_Template, 2, 0, "ng-template", null, 4, i0.ɵɵtemplateRefExtractor);
|
|
771
|
+
i0.ɵɵelementContainerEnd();
|
|
560
772
|
} if (rf & 2) {
|
|
773
|
+
const iconDown_r9 = i0.ɵɵreference(3);
|
|
561
774
|
const menuItem_r8 = i0.ɵɵnextContext(2).menuItem;
|
|
562
775
|
i0.ɵɵadvance();
|
|
563
|
-
i0.ɵɵ
|
|
776
|
+
i0.ɵɵproperty("ngIf", menuItem_r8.expanded)("ngIfElse", iconDown_r9);
|
|
564
777
|
} }
|
|
565
778
|
function MenuItemListComponent_ng_template_5_ng_container_3_Template(rf, ctx) { if (rf & 1) {
|
|
566
779
|
i0.ɵɵelementContainerStart(0);
|
|
567
|
-
i0.ɵɵelementStart(1, "span",
|
|
780
|
+
i0.ɵɵelementStart(1, "span", 18)(2, "span", 19);
|
|
568
781
|
i0.ɵɵtext(3);
|
|
569
782
|
i0.ɵɵpipe(4, "translate");
|
|
570
783
|
i0.ɵɵelementEnd()();
|
|
571
|
-
i0.ɵɵtemplate(5,
|
|
784
|
+
i0.ɵɵtemplate(5, MenuItemListComponent_ng_template_5_ng_container_3_ng_container_5_Template, 4, 2, "ng-container", 16);
|
|
572
785
|
i0.ɵɵelementContainerEnd();
|
|
573
786
|
} if (rf & 2) {
|
|
574
787
|
const menuItem_r8 = i0.ɵɵnextContext().menuItem;
|
|
@@ -578,7 +791,7 @@ function MenuItemListComponent_ng_template_5_ng_container_3_Template(rf, ctx) {
|
|
|
578
791
|
i0.ɵɵproperty("ngIf", menuItem_r8.showChildren && menuItem_r8.children);
|
|
579
792
|
} }
|
|
580
793
|
function MenuItemListComponent_ng_template_5_ng_container_4_menu_item_list_1_Template(rf, ctx) { if (rf & 1) {
|
|
581
|
-
i0.ɵɵelement(0, "menu-item-list",
|
|
794
|
+
i0.ɵɵelement(0, "menu-item-list", 23);
|
|
582
795
|
} if (rf & 2) {
|
|
583
796
|
const menuItem_r8 = i0.ɵɵnextContext(2).menuItem;
|
|
584
797
|
const ctx_r0 = i0.ɵɵnextContext();
|
|
@@ -586,7 +799,7 @@ function MenuItemListComponent_ng_template_5_ng_container_4_menu_item_list_1_Tem
|
|
|
586
799
|
} }
|
|
587
800
|
function MenuItemListComponent_ng_template_5_ng_container_4_Template(rf, ctx) { if (rf & 1) {
|
|
588
801
|
i0.ɵɵelementContainerStart(0);
|
|
589
|
-
i0.ɵɵtemplate(1, MenuItemListComponent_ng_template_5_ng_container_4_menu_item_list_1_Template, 1, 4, "menu-item-list",
|
|
802
|
+
i0.ɵɵtemplate(1, MenuItemListComponent_ng_template_5_ng_container_4_menu_item_list_1_Template, 1, 4, "menu-item-list", 22);
|
|
590
803
|
i0.ɵɵelementContainerEnd();
|
|
591
804
|
} if (rf & 2) {
|
|
592
805
|
const menuItem_r8 = i0.ɵɵnextContext().menuItem;
|
|
@@ -595,12 +808,12 @@ function MenuItemListComponent_ng_template_5_ng_container_4_Template(rf, ctx) {
|
|
|
595
808
|
} }
|
|
596
809
|
function MenuItemListComponent_ng_template_5_Template(rf, ctx) { if (rf & 1) {
|
|
597
810
|
const _r7 = i0.ɵɵgetCurrentView();
|
|
598
|
-
i0.ɵɵelementStart(0, "button",
|
|
811
|
+
i0.ɵɵelementStart(0, "button", 15);
|
|
599
812
|
i0.ɵɵpipe(1, "translate");
|
|
600
813
|
i0.ɵɵlistener("click", function MenuItemListComponent_ng_template_5_Template_button_click_0_listener($event) { const menuItem_r8 = i0.ɵɵrestoreView(_r7).menuItem; const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.toggleItemExpand($event, menuItem_r8)); });
|
|
601
|
-
i0.ɵɵtemplate(2, MenuItemListComponent_ng_template_5_ng_container_2_Template, 2, 1, "ng-container",
|
|
814
|
+
i0.ɵɵtemplate(2, MenuItemListComponent_ng_template_5_ng_container_2_Template, 2, 1, "ng-container", 16)(3, MenuItemListComponent_ng_template_5_ng_container_3_Template, 6, 4, "ng-container", 16);
|
|
602
815
|
i0.ɵɵelementEnd();
|
|
603
|
-
i0.ɵɵtemplate(4, MenuItemListComponent_ng_template_5_ng_container_4_Template, 2, 1, "ng-container",
|
|
816
|
+
i0.ɵɵtemplate(4, MenuItemListComponent_ng_template_5_ng_container_4_Template, 2, 1, "ng-container", 16);
|
|
604
817
|
} if (rf & 2) {
|
|
605
818
|
const menuItem_r8 = ctx.menuItem;
|
|
606
819
|
const ctx_r0 = i0.ɵɵnextContext();
|
|
@@ -615,27 +828,27 @@ function MenuItemListComponent_ng_template_5_Template(rf, ctx) { if (rf & 1) {
|
|
|
615
828
|
i0.ɵɵproperty("ngIf", menuItem_r8.showChildren && menuItem_r8.expanded && ctx_r0.labelsVisible);
|
|
616
829
|
} }
|
|
617
830
|
function MenuItemListComponent_ng_template_7_Template(rf, ctx) { if (rf & 1) {
|
|
618
|
-
i0.ɵɵelement(0, "tld-menu-item-link",
|
|
831
|
+
i0.ɵɵelement(0, "tld-menu-item-link", 24);
|
|
619
832
|
} if (rf & 2) {
|
|
620
|
-
const
|
|
833
|
+
const menuItem_r10 = ctx.menuItem;
|
|
621
834
|
const ctx_r0 = i0.ɵɵnextContext();
|
|
622
|
-
i0.ɵɵproperty("ngClass.lt-md", "mob-menu-item")("menuItem",
|
|
835
|
+
i0.ɵɵproperty("ngClass.lt-md", "mob-menu-item")("menuItem", menuItem_r10)("direction", ctx_r0.direction)("labelsVisible", ctx_r0.labelsVisible)("activeItem", ctx_r0.activeItem)("showIcons", ctx_r0.showIcons);
|
|
623
836
|
} }
|
|
624
837
|
function MenuItemListComponent_ng_template_9_lib_menu_item_btn_0_Template(rf, ctx) { if (rf & 1) {
|
|
625
|
-
i0.ɵɵelement(0, "lib-menu-item-btn",
|
|
838
|
+
i0.ɵɵelement(0, "lib-menu-item-btn", 26);
|
|
626
839
|
} if (rf & 2) {
|
|
627
|
-
const
|
|
840
|
+
const menuItem_r11 = i0.ɵɵnextContext().menuItem;
|
|
628
841
|
const ctx_r0 = i0.ɵɵnextContext();
|
|
629
|
-
i0.ɵɵproperty("ngClass.lt-md", "mob-menu-item")("menuItem",
|
|
842
|
+
i0.ɵɵproperty("ngClass.lt-md", "mob-menu-item")("menuItem", menuItem_r11)("direction", ctx_r0.direction)("activeItem", ctx_r0.activeItem);
|
|
630
843
|
} }
|
|
631
844
|
function MenuItemListComponent_ng_template_9_Template(rf, ctx) { if (rf & 1) {
|
|
632
|
-
i0.ɵɵtemplate(0, MenuItemListComponent_ng_template_9_lib_menu_item_btn_0_Template, 1, 4, "lib-menu-item-btn",
|
|
845
|
+
i0.ɵɵtemplate(0, MenuItemListComponent_ng_template_9_lib_menu_item_btn_0_Template, 1, 4, "lib-menu-item-btn", 25);
|
|
633
846
|
} if (rf & 2) {
|
|
634
847
|
const ctx_r0 = i0.ɵɵnextContext();
|
|
635
848
|
i0.ɵɵproperty("ngIf", ctx_r0.labelsVisible);
|
|
636
849
|
} }
|
|
637
850
|
function MenuItemListComponent_ng_template_11_button_0_span_3_Template(rf, ctx) { if (rf & 1) {
|
|
638
|
-
i0.ɵɵelementStart(0, "span",
|
|
851
|
+
i0.ɵɵelementStart(0, "span", 31);
|
|
639
852
|
i0.ɵɵtext(1);
|
|
640
853
|
i0.ɵɵpipe(2, "translate");
|
|
641
854
|
i0.ɵɵelementEnd();
|
|
@@ -645,13 +858,13 @@ function MenuItemListComponent_ng_template_11_button_0_span_3_Template(rf, ctx)
|
|
|
645
858
|
i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(2, 1, ctx_r0.titleKey), " ");
|
|
646
859
|
} }
|
|
647
860
|
function MenuItemListComponent_ng_template_11_button_0_Template(rf, ctx) { if (rf & 1) {
|
|
648
|
-
const
|
|
649
|
-
i0.ɵɵelementStart(0, "button",
|
|
650
|
-
i0.ɵɵlistener("click", function MenuItemListComponent_ng_template_11_button_0_Template_button_click_0_listener() { i0.ɵɵrestoreView(
|
|
861
|
+
const _r12 = i0.ɵɵgetCurrentView();
|
|
862
|
+
i0.ɵɵelementStart(0, "button", 29);
|
|
863
|
+
i0.ɵɵlistener("click", function MenuItemListComponent_ng_template_11_button_0_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r12); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.menuItemGroup == null ? null : ctx_r0.menuItemGroup.itemGroupClick()); });
|
|
651
864
|
i0.ɵɵelementStart(1, "mat-icon");
|
|
652
865
|
i0.ɵɵtext(2);
|
|
653
866
|
i0.ɵɵelementEnd();
|
|
654
|
-
i0.ɵɵtemplate(3, MenuItemListComponent_ng_template_11_button_0_span_3_Template, 3, 3, "span",
|
|
867
|
+
i0.ɵɵtemplate(3, MenuItemListComponent_ng_template_11_button_0_span_3_Template, 3, 3, "span", 30);
|
|
655
868
|
i0.ɵɵelementEnd();
|
|
656
869
|
} if (rf & 2) {
|
|
657
870
|
const ctx_r0 = i0.ɵɵnextContext(2);
|
|
@@ -661,10 +874,10 @@ function MenuItemListComponent_ng_template_11_button_0_Template(rf, ctx) { if (r
|
|
|
661
874
|
i0.ɵɵproperty("ngIf", ctx_r0.titleKey);
|
|
662
875
|
} }
|
|
663
876
|
function MenuItemListComponent_ng_template_11_button_1_Template(rf, ctx) { if (rf & 1) {
|
|
664
|
-
const
|
|
665
|
-
i0.ɵɵelementStart(0, "button",
|
|
877
|
+
const _r13 = i0.ɵɵgetCurrentView();
|
|
878
|
+
i0.ɵɵelementStart(0, "button", 32);
|
|
666
879
|
i0.ɵɵpipe(1, "translate");
|
|
667
|
-
i0.ɵɵlistener("click", function MenuItemListComponent_ng_template_11_button_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(
|
|
880
|
+
i0.ɵɵlistener("click", function MenuItemListComponent_ng_template_11_button_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r13); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.menuItemGroup == null ? null : ctx_r0.menuItemGroup.itemGroupClick()); });
|
|
668
881
|
i0.ɵɵelementStart(2, "mat-icon");
|
|
669
882
|
i0.ɵɵtext(3);
|
|
670
883
|
i0.ɵɵelementEnd()();
|
|
@@ -675,7 +888,7 @@ function MenuItemListComponent_ng_template_11_button_1_Template(rf, ctx) { if (r
|
|
|
675
888
|
i0.ɵɵtextInterpolate(ctx_r0.menuItemGroup.itemGroupIcon);
|
|
676
889
|
} }
|
|
677
890
|
function MenuItemListComponent_ng_template_11_Template(rf, ctx) { if (rf & 1) {
|
|
678
|
-
i0.ɵɵtemplate(0, MenuItemListComponent_ng_template_11_button_0_Template, 4, 2, "button",
|
|
891
|
+
i0.ɵɵtemplate(0, MenuItemListComponent_ng_template_11_button_0_Template, 4, 2, "button", 27)(1, MenuItemListComponent_ng_template_11_button_1_Template, 4, 4, "button", 28);
|
|
679
892
|
} if (rf & 2) {
|
|
680
893
|
const ctx_r0 = i0.ɵɵnextContext();
|
|
681
894
|
i0.ɵɵproperty("ngIf", ctx_r0.menuItemGroup && ctx_r0.labelsVisible);
|
|
@@ -712,11 +925,11 @@ class MenuItemListComponent {
|
|
|
712
925
|
this.toggleExpand.next(menuItem);
|
|
713
926
|
}
|
|
714
927
|
static { this.ɵfac = function MenuItemListComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MenuItemListComponent)(); }; }
|
|
715
|
-
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MenuItemListComponent, selectors: [["menu-item-list"]], inputs: { direction: "direction", labelsVisible: "labelsVisible", activeItem: "activeItem", showIcons: "showIcons", items: "items", menuItemGroup: "menuItemGroup" }, outputs: { toggleExpand: "toggleExpand" }, decls: 13, vars: 3, consts: [["itemWithChildren", ""], ["menuItemLink", ""], ["menuItemBtn", ""], ["itemGroupButton", ""], [1, "menu-list-wrapper"], ["fxLayoutAlign", "start center", 1, "menu-item-list-title"], ["fxLayout", "column", 1, "menu-item-list", 3, "fxLayoutAlign"], [4, "ngFor", "ngForOf"], ["class", "menu-title-btn", 4, "ngIf"], ["class", "menu-title-btn", "mat-icon-button", "", 3, "routerLink", "matTooltip", 4, "ngIf"], [1, "menu-title-btn"], ["mat-icon-button", "", 1, "menu-title-btn", 3, "routerLink", "matTooltip"], [4, "ngTemplateOutlet"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], ["matTooltipPosition", "after", "matTooltipClass", "menu-tooltip",
|
|
716
|
-
i0.ɵɵelementStart(0, "div",
|
|
717
|
-
i0.ɵɵtemplate(1, MenuItemListComponent_Conditional_1_Template, 5, 5, "div",
|
|
718
|
-
i0.ɵɵelementStart(3, "div",
|
|
719
|
-
i0.ɵɵtemplate(4, MenuItemListComponent_ng_container_4_Template, 2, 4, "ng-container",
|
|
928
|
+
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MenuItemListComponent, selectors: [["menu-item-list"]], inputs: { direction: "direction", labelsVisible: "labelsVisible", activeItem: "activeItem", showIcons: "showIcons", items: "items", menuItemGroup: "menuItemGroup" }, outputs: { toggleExpand: "toggleExpand" }, decls: 13, vars: 3, consts: [["itemWithChildren", ""], ["menuItemLink", ""], ["menuItemBtn", ""], ["itemGroupButton", ""], ["iconDown", ""], [1, "menu-list-wrapper"], ["fxLayoutAlign", "start center", 1, "menu-item-list-title"], ["fxLayout", "column", 1, "menu-item-list", 3, "fxLayoutAlign"], [4, "ngFor", "ngForOf"], ["class", "menu-title-btn", 4, "ngIf"], ["class", "menu-title-btn", "mat-icon-button", "", 3, "routerLink", "matTooltip", 4, "ngIf"], [1, "menu-title-btn"], ["mat-icon-button", "", 1, "menu-title-btn", 3, "routerLink", "matTooltip"], [4, "ngTemplateOutlet"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], ["matTooltipPosition", "after", "matTooltipClass", "menu-tooltip", 1, "text-m", "menu-item", 3, "click", "ngClass.lt-md", "fxLayout", "matTooltip", "fxLayoutAlign"], [4, "ngIf"], [3, "menuItem"], [1, "menu-item-title"], [1, "title-content"], ["class", "material-icons spin arrow-icon", 4, "ngIf", "ngIfElse"], [1, "material-icons", "spin", "arrow-icon"], ["class", "child-list", 3, "items", "direction", "labelsVisible", "activeItem", 4, "ngIf"], [1, "child-list", 3, "items", "direction", "labelsVisible", "activeItem"], [3, "ngClass.lt-md", "menuItem", "direction", "labelsVisible", "activeItem", "showIcons"], [3, "ngClass.lt-md", "menuItem", "direction", "activeItem", 4, "ngIf"], [3, "ngClass.lt-md", "menuItem", "direction", "activeItem"], ["class", "menu-title-btn menu-action-button", "mat-button", "", 3, "click", 4, "ngIf"], ["mat-icon-button", "", "matTooltipPosition", "after", 3, "matTooltip", "click", 4, "ngIf"], ["mat-button", "", 1, "menu-title-btn", "menu-action-button", 3, "click"], ["class", "btn-label", 4, "ngIf"], [1, "btn-label"], ["mat-icon-button", "", "matTooltipPosition", "after", 3, "click", "matTooltip"]], template: function MenuItemListComponent_Template(rf, ctx) { if (rf & 1) {
|
|
929
|
+
i0.ɵɵelementStart(0, "div", 5);
|
|
930
|
+
i0.ɵɵtemplate(1, MenuItemListComponent_Conditional_1_Template, 5, 5, "div", 6)(2, MenuItemListComponent_Conditional_2_Template, 1, 1, "ng-container");
|
|
931
|
+
i0.ɵɵelementStart(3, "div", 7);
|
|
932
|
+
i0.ɵɵtemplate(4, MenuItemListComponent_ng_container_4_Template, 2, 4, "ng-container", 8);
|
|
720
933
|
i0.ɵɵelementEnd()();
|
|
721
934
|
i0.ɵɵtemplate(5, MenuItemListComponent_ng_template_5_Template, 5, 14, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor)(7, MenuItemListComponent_ng_template_7_Template, 1, 6, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor)(9, MenuItemListComponent_ng_template_9_Template, 1, 1, "ng-template", null, 2, i0.ɵɵtemplateRefExtractor)(11, MenuItemListComponent_ng_template_11_Template, 2, 2, "ng-template", null, 3, i0.ɵɵtemplateRefExtractor);
|
|
722
935
|
} if (rf & 2) {
|
|
@@ -726,11 +939,11 @@ class MenuItemListComponent {
|
|
|
726
939
|
i0.ɵɵproperty("fxLayoutAlign", ctx.menuLayoutDirection);
|
|
727
940
|
i0.ɵɵadvance();
|
|
728
941
|
i0.ɵɵproperty("ngForOf", ctx.items);
|
|
729
|
-
} }, dependencies: [i1$2.DefaultLayoutDirective, i1$2.
|
|
942
|
+
} }, dependencies: [i1$2.DefaultLayoutDirective, i1$2.DefaultLayoutAlignDirective, i2$2.DefaultClassDirective, i1$1.RouterLink, i3.NgForOf, i3.NgIf, i3.NgTemplateOutlet, i5.MatTooltip, i2$1.MatIcon, i7.MatButton, i7.MatIconButton, MenuItemListComponent, MenuIconComponent, MenuItemLinkComponent, MenuItemBtnComponent, i8.TranslatePipe], styles: ["[_nghost-%COMP%]{display:inline-block}.menu-item[_ngcontent-%COMP%]{width:100%} .collapsed .menu-item-list{display:flex!important;justify-content:center!important;align-items:center!important} .collapsed .menu-list-wrapper, .collapsed tld-menu-item-link{display:flex!important;justify-content:center!important} .collapsed .menu-item{display:flex!important;place-content:center center!important} .collapsed tld-menu-item-link:not(:first-child){margin-top:16px!important}.menu-action-button[_ngcontent-%COMP%]{justify-content:flex-start;align-items:center;max-width:100%;width:-webkit-fill-available}[_nghost-%COMP%] .menu-list-wrapper .menu-item{cursor:pointer;font-style:normal;color:var(--base-30);text-decoration:none;align-items:center!important;font-weight:400;background:none;border:none}[_nghost-%COMP%] .menu-list-wrapper .menu-item:not(button):not(.active-menu-item):hover{background-color:var(--base-70)!important}[_nghost-%COMP%] .menu-list-wrapper .menu-item.active-menu-item, [_nghost-%COMP%] .menu-list-wrapper .menu-item.active-menu-item mat-icon, [_nghost-%COMP%] .menu-list-wrapper .menu-item.active-menu-item:hover{font-weight:600}[_nghost-%COMP%] .menu-list-wrapper .menu-item span{display:inline-block}[_nghost-%COMP%] .menu-list-wrapper .menu-item .menu-item-title{display:flex;flex-direction:row;align-items:start;width:100%}[_nghost-%COMP%] .menu-list-wrapper .menu-item .menu-item-title .title-content{width:100%;text-align:start;display:block}[_nghost-%COMP%] .menu-list-wrapper .menu-item .menu-item-title .title-content:before{display:block;content:attr(content);font-weight:600;height:0;overflow:hidden;visibility:hidden}.child-list[_nghost-%COMP%]{margin-bottom:1rem}.child-list[_nghost-%COMP%] .menu-item[_ngcontent-%COMP%] + .menu-item[_ngcontent-%COMP%]{margin-top:.5rem} .menu-tooltip{left:.625rem;font-family:Roboto;font-style:normal;font-weight:400;font-size:.75rem;line-height:1.25rem;color:var(--base-70);border-radius:.25rem;position:relative} .menu-tooltip:after{width:0;height:0;content:\"\";position:absolute;border-left:.5rem solid transparent;border-right:.5rem solid transparent;border-bottom:.5rem solid var(--menu-border-dark-color);left:-.75rem;top:calc(50% - .25rem);transform:rotate(270deg);overflow:initial}.menu-item-list-title[_ngcontent-%COMP%]{padding:8px 0 24px;font-size:16px;font-weight:600;overflow:hidden;text-overflow:ellipsis;margin-left:20px;height:56px}.menu-item-list-title[_ngcontent-%COMP%]:has(.menu-title-btn){margin-left:0} lib-menu-lang-switcher, .menu-item-list[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_slide-in .3s forwards} lib-menu-lang-switcher, .menu-title-btn[_ngcontent-%COMP%]{margin-right:2px;transition:opacity .3s}.spin[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_spinArrow .3s forwards}.arrow-icon[_ngcontent-%COMP%]{margin-right:-6px}@keyframes _ngcontent-%COMP%_slide-in{0%{opacity:0;margin-left:-100px}to{opacity:1;margin-left:0}}@keyframes _ngcontent-%COMP%_spinArrow{to{transform:rotate(180deg)}}"] }); }
|
|
730
943
|
}
|
|
731
944
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuItemListComponent, [{
|
|
732
945
|
type: Component,
|
|
733
|
-
args: [{ selector: 'menu-item-list', template: "<div class=\"menu-list-wrapper\">\r\n @if (titleKey && showTitle && labelsVisible && !menuItemGroup.itemGroupClick) {\r\n <div fxLayoutAlign=\"start center\" class=\"menu-item-list-title\">\r\n <mat-icon class=\"menu-title-btn\" *ngIf=\"menuItemGroup.titleIcon\">{{menuItemGroup.titleIcon}}</mat-icon>\r\n \r\n <button class=\"menu-title-btn\" *ngIf=\"menuItemGroup.titleNavigation\" mat-icon-button [routerLink]=\"menuItemGroup.titleNavigation.path\" [matTooltip]=\"menuItemGroup.titleNavigation?.tooltip ?? '' | translate\">\r\n <mat-icon>{{menuItemGroup.titleNavigation.icon}}</mat-icon>\r\n </button>\r\n \r\n {{ titleKey | translate }}\r\n </div>\r\n } @else if (menuItemGroup?.itemGroupClick) {\r\n <ng-container *ngTemplateOutlet=\"itemGroupButton\">\r\n </ng-container>\r\n }\r\n <div fxLayout=\"column\" [fxLayoutAlign]=\"menuLayoutDirection\" class=\"menu-item-list\">\r\n <ng-container *ngFor=\"let menuItem of items\">\r\n <ng-container\r\n *ngTemplateOutlet=\"!menuItem.showChildren || !menuItem.children || menuItem?.children?.length === 0 ? (menuItem.clickAction ? menuItemBtn : menuItemLink) : itemWithChildren; context: {menuItem: menuItem}\">\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n</div>\r\n\r\n<ng-template #itemWithChildren let-menuItem=\"menuItem\">\r\n <button [attr.id]=\"menuItem.customId\" [ngClass.lt-md]=\"'mob-menu-item'\" [fxLayout]=\"menuItemLayout\" class=\"text-m menu-item\"\r\n [matTooltip]=\"!labelsVisible ? (menuItem.title | translate) : ''\" matTooltipPosition=\"after\" [class.menu-labels-visible]=\"labelsVisible\"\r\n [fxLayoutAlign]=\"menuLayoutDirection\" matTooltipClass=\"menu-tooltip\"
|
|
946
|
+
args: [{ selector: 'menu-item-list', template: "<div class=\"menu-list-wrapper\">\r\n @if (titleKey && showTitle && labelsVisible && !menuItemGroup.itemGroupClick) {\r\n <div fxLayoutAlign=\"start center\" class=\"menu-item-list-title\">\r\n <mat-icon class=\"menu-title-btn\" *ngIf=\"menuItemGroup.titleIcon\">{{menuItemGroup.titleIcon}}</mat-icon>\r\n \r\n <button class=\"menu-title-btn\" *ngIf=\"menuItemGroup.titleNavigation\" mat-icon-button [routerLink]=\"menuItemGroup.titleNavigation.path\" [matTooltip]=\"menuItemGroup.titleNavigation?.tooltip ?? '' | translate\">\r\n <mat-icon>{{menuItemGroup.titleNavigation.icon}}</mat-icon>\r\n </button>\r\n \r\n {{ titleKey | translate }}\r\n </div>\r\n } @else if (menuItemGroup?.itemGroupClick) {\r\n <ng-container *ngTemplateOutlet=\"itemGroupButton\">\r\n </ng-container>\r\n }\r\n <div fxLayout=\"column\" [fxLayoutAlign]=\"menuLayoutDirection\" class=\"menu-item-list\">\r\n <ng-container *ngFor=\"let menuItem of items\">\r\n <ng-container\r\n *ngTemplateOutlet=\"!menuItem.showChildren || !menuItem.children || menuItem?.children?.length === 0 ? (menuItem.clickAction ? menuItemBtn : menuItemLink) : itemWithChildren; context: {menuItem: menuItem}\">\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n</div>\r\n\r\n<ng-template #itemWithChildren let-menuItem=\"menuItem\">\r\n <button [attr.id]=\"menuItem.customId\" [ngClass.lt-md]=\"'mob-menu-item'\" [fxLayout]=\"menuItemLayout\" class=\"text-m menu-item\"\r\n [matTooltip]=\"!labelsVisible ? (menuItem.title | translate) : ''\" matTooltipPosition=\"after\" [class.menu-labels-visible]=\"labelsVisible\"\r\n [fxLayoutAlign]=\"menuLayoutDirection\" matTooltipClass=\"menu-tooltip\"\r\n [class.active-menu-item]=\"activeItem?.link && menuItem === activeItem\" (click)=\"toggleItemExpand($event,menuItem)\">\r\n <ng-container *ngIf=\"showIcons && menuItem.icon\">\r\n <tld-menu-icon [menuItem]=\"menuItem\"></tld-menu-icon>\r\n </ng-container>\r\n <ng-container *ngIf=\"labelsVisible\">\r\n <span class=\"menu-item-title\">\r\n <span class=\"title-content\">{{ menuItem.title | translate }}</span></span>\r\n <ng-container *ngIf=\"menuItem.showChildren && menuItem.children\">\r\n <span *ngIf=\"menuItem.expanded; else iconDown\" class=\"material-icons spin arrow-icon\">\r\n keyboard_arrow_down\r\n </span>\r\n\r\n <ng-template #iconDown>\r\n <span class=\"material-icons spin arrow-icon\">\r\n keyboard_arrow_up\r\n </span>\r\n </ng-template>\r\n </ng-container>\r\n \r\n </ng-container>\r\n </button>\r\n <ng-container *ngIf=\"menuItem.showChildren && menuItem.expanded && labelsVisible\">\r\n <menu-item-list class=\"child-list\" *ngIf=\"menuItem.children && menuItem.children.length\" [items]=\"menuItem.children\"\r\n [direction]=\"direction\" [labelsVisible]=\"labelsVisible\" [activeItem]=\"activeItem\">\r\n </menu-item-list>\r\n </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #menuItemLink let-menuItem=\"menuItem\">\r\n <tld-menu-item-link [ngClass.lt-md]=\"'mob-menu-item'\" [menuItem]=\"menuItem\" [direction]=\"direction\" [labelsVisible]=\"labelsVisible\"\r\n [activeItem]=\"activeItem\" [showIcons]=\"showIcons\"></tld-menu-item-link>\r\n</ng-template>\r\n\r\n<ng-template #menuItemBtn let-menuItem=\"menuItem\">\r\n <lib-menu-item-btn *ngIf=\"labelsVisible\" [ngClass.lt-md]=\"'mob-menu-item'\" [menuItem]=\"menuItem\" [direction]=\"direction\"\r\n [activeItem]=\"activeItem\"></lib-menu-item-btn>\r\n</ng-template>\r\n\r\n<ng-template #itemGroupButton>\r\n <button \r\n class=\"menu-title-btn menu-action-button\"\r\n mat-button\r\n *ngIf=\"menuItemGroup && labelsVisible\"\r\n (click)=\"menuItemGroup?.itemGroupClick()\"\r\n >\r\n <mat-icon>{{ menuItemGroup.itemGroupIcon }}</mat-icon>\r\n <span class=\"btn-label\" *ngIf=\"titleKey\">\r\n {{ titleKey | translate }}\r\n </span>\r\n </button>\r\n\r\n <button \r\n mat-icon-button\r\n *ngIf=\"menuItemGroup && !labelsVisible && titleKey && menuItemGroup.itemGroupIcon\"\r\n (click)=\"menuItemGroup?.itemGroupClick()\"\r\n [matTooltip]=\"titleKey | translate\"\r\n matTooltipPosition=\"after\"\r\n >\r\n <mat-icon>{{ menuItemGroup.itemGroupIcon }}</mat-icon>\r\n </button>\r\n</ng-template>", styles: [":host{display:inline-block}.menu-item{width:100%}::ng-deep .collapsed .menu-item-list{display:flex!important;justify-content:center!important;align-items:center!important}::ng-deep .collapsed .menu-list-wrapper,::ng-deep .collapsed tld-menu-item-link{display:flex!important;justify-content:center!important}::ng-deep .collapsed .menu-item{display:flex!important;place-content:center center!important}::ng-deep .collapsed tld-menu-item-link:not(:first-child){margin-top:16px!important}.menu-action-button{justify-content:flex-start;align-items:center;max-width:100%;width:-webkit-fill-available}:host ::ng-deep .menu-list-wrapper .menu-item{cursor:pointer;font-style:normal;color:var(--base-30);text-decoration:none;align-items:center!important;font-weight:400;background:none;border:none}:host ::ng-deep .menu-list-wrapper .menu-item:not(button):not(.active-menu-item):hover{background-color:var(--base-70)!important}:host ::ng-deep .menu-list-wrapper .menu-item.active-menu-item,:host ::ng-deep .menu-list-wrapper .menu-item.active-menu-item mat-icon,:host ::ng-deep .menu-list-wrapper .menu-item.active-menu-item:hover{font-weight:600}:host ::ng-deep .menu-list-wrapper .menu-item span{display:inline-block}:host ::ng-deep .menu-list-wrapper .menu-item .menu-item-title{display:flex;flex-direction:row;align-items:start;width:100%}:host ::ng-deep .menu-list-wrapper .menu-item .menu-item-title .title-content{width:100%;text-align:start;display:block}:host ::ng-deep .menu-list-wrapper .menu-item .menu-item-title .title-content:before{display:block;content:attr(content);font-weight:600;height:0;overflow:hidden;visibility:hidden}:host.child-list{margin-bottom:1rem}:host.child-list .menu-item+.menu-item{margin-top:.5rem}::ng-deep .menu-tooltip{left:.625rem;font-family:Roboto;font-style:normal;font-weight:400;font-size:.75rem;line-height:1.25rem;color:var(--base-70);border-radius:.25rem;position:relative}::ng-deep .menu-tooltip:after{width:0;height:0;content:\"\";position:absolute;border-left:.5rem solid transparent;border-right:.5rem solid transparent;border-bottom:.5rem solid var(--menu-border-dark-color);left:-.75rem;top:calc(50% - .25rem);transform:rotate(270deg);overflow:initial}.menu-item-list-title{padding:8px 0 24px;font-size:16px;font-weight:600;overflow:hidden;text-overflow:ellipsis;margin-left:20px;height:56px}.menu-item-list-title:has(.menu-title-btn){margin-left:0}::ng-deep lib-menu-lang-switcher,.menu-item-list{animation:slide-in .3s forwards}::ng-deep lib-menu-lang-switcher,.menu-title-btn{margin-right:2px;transition:opacity .3s}.spin{animation:spinArrow .3s forwards}.arrow-icon{margin-right:-6px}@keyframes slide-in{0%{opacity:0;margin-left:-100px}to{opacity:1;margin-left:0}}@keyframes spinArrow{to{transform:rotate(180deg)}}\n"] }]
|
|
734
947
|
}], null, { direction: [{
|
|
735
948
|
type: Input
|
|
736
949
|
}], labelsVisible: [{
|
|
@@ -823,7 +1036,7 @@ class MenuColumnsComponent {
|
|
|
823
1036
|
i0.ɵɵtemplate(0, MenuColumnsComponent_ng_container_0_Template, 3, 2, "ng-container", 0);
|
|
824
1037
|
} if (rf & 2) {
|
|
825
1038
|
i0.ɵɵproperty("ngForOf", ctx.mergedGroups);
|
|
826
|
-
} }, dependencies: [
|
|
1039
|
+
} }, dependencies: [i3.NgForOf, i3.NgIf, i4.MatDivider, MenuItemListComponent], styles: ["[_nghost-%COMP%]{display:inline-block}[_nghost-%COMP%] menu-item-list[_ngcontent-%COMP%]{display:block}.divider[_ngcontent-%COMP%]{margin:10px 0}"] }); }
|
|
827
1040
|
}
|
|
828
1041
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuColumnsComponent, [{
|
|
829
1042
|
type: Component,
|
|
@@ -844,245 +1057,151 @@ class MenuColumnsComponent {
|
|
|
844
1057
|
}] }); })();
|
|
845
1058
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MenuColumnsComponent, { className: "MenuColumnsComponent", filePath: "lib\\components\\menu-columns\\menu-columns.component.ts", lineNumber: 16 }); })();
|
|
846
1059
|
|
|
847
|
-
const _c0 = ["*"];
|
|
848
1060
|
const _forTrack0 = ($index, $item) => $item.label;
|
|
849
|
-
const
|
|
850
|
-
function
|
|
851
|
-
const _r2 = i0.ɵɵgetCurrentView();
|
|
852
|
-
i0.ɵɵelementStart(0, "a", 6);
|
|
853
|
-
i0.ɵɵpipe(1, "translate");
|
|
854
|
-
i0.ɵɵlistener("click", function SideNavMenuComponent_a_14_Template_a_click_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.logoClick($event)); });
|
|
855
|
-
i0.ɵɵelement(2, "img", 7);
|
|
856
|
-
i0.ɵɵelementStart(3, "span", 8);
|
|
857
|
-
i0.ɵɵtext(4);
|
|
858
|
-
i0.ɵɵelementEnd()();
|
|
859
|
-
} if (rf & 2) {
|
|
860
|
-
const ctx_r2 = i0.ɵɵnextContext();
|
|
861
|
-
i0.ɵɵclassProp("no-click", ctx_r2.menuSettings == null ? null : ctx_r2.menuSettings.disableLogoNavigation);
|
|
862
|
-
i0.ɵɵproperty("libPlausibleEvent", ctx_r2.LOGOCLICK_PLAUSIBLE_EVENT)("href", ctx_r2.baseUrl, i0.ɵɵsanitizeUrl);
|
|
863
|
-
i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(1, 7, "MENU.ARIA_LABELS.LOGO"));
|
|
864
|
-
i0.ɵɵadvance(2);
|
|
865
|
-
i0.ɵɵproperty("src", ctx_r2.menuLogoImage, i0.ɵɵsanitizeUrl);
|
|
866
|
-
i0.ɵɵadvance(2);
|
|
867
|
-
i0.ɵɵtextInterpolate1(" ", ctx_r2.productName, " ");
|
|
868
|
-
} }
|
|
869
|
-
function SideNavMenuComponent_Conditional_30_Template(rf, ctx) { if (rf & 1) {
|
|
1061
|
+
const _c0 = (a0, a1) => ({ icon: a0, label: a1 });
|
|
1062
|
+
function MenuProfileComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
|
|
870
1063
|
i0.ɵɵtext(0);
|
|
871
1064
|
} if (rf & 2) {
|
|
872
|
-
const
|
|
873
|
-
i0.ɵɵtextInterpolate1(" ",
|
|
1065
|
+
const ctx_r0 = i0.ɵɵnextContext();
|
|
1066
|
+
i0.ɵɵtextInterpolate1(" ", ctx_r0.userInitials, " ");
|
|
874
1067
|
} }
|
|
875
|
-
function
|
|
1068
|
+
function MenuProfileComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
|
|
876
1069
|
i0.ɵɵelementStart(0, "mat-icon");
|
|
877
1070
|
i0.ɵɵtext(1, "person");
|
|
878
1071
|
i0.ɵɵelementEnd();
|
|
879
1072
|
} }
|
|
880
|
-
function
|
|
881
|
-
i0.ɵɵelementStart(0, "mat-icon",
|
|
882
|
-
i0.ɵɵtext(1);
|
|
1073
|
+
function MenuProfileComponent_ng_container_6_mat_icon_4_Template(rf, ctx) { if (rf & 1) {
|
|
1074
|
+
i0.ɵɵelementStart(0, "mat-icon", 11);
|
|
1075
|
+
i0.ɵɵtext(1, "keyboard_arrow_down");
|
|
883
1076
|
i0.ɵɵelementEnd();
|
|
884
|
-
} if (rf & 2) {
|
|
885
|
-
i0.ɵɵadvance();
|
|
886
|
-
i0.ɵɵtextInterpolate("keyboard_arrow_down");
|
|
887
1077
|
} }
|
|
888
|
-
function
|
|
889
|
-
i0.ɵɵelementStart(0, "mat-icon",
|
|
890
|
-
i0.ɵɵtext(1);
|
|
1078
|
+
function MenuProfileComponent_ng_container_6_ng_template_5_Template(rf, ctx) { if (rf & 1) {
|
|
1079
|
+
i0.ɵɵelementStart(0, "mat-icon", 11);
|
|
1080
|
+
i0.ɵɵtext(1, "keyboard_arrow_up");
|
|
891
1081
|
i0.ɵɵelementEnd();
|
|
892
|
-
} if (rf & 2) {
|
|
893
|
-
i0.ɵɵadvance();
|
|
894
|
-
i0.ɵɵtextInterpolate("keyboard_arrow_up");
|
|
895
1082
|
} }
|
|
896
|
-
function
|
|
1083
|
+
function MenuProfileComponent_ng_container_6_Template(rf, ctx) { if (rf & 1) {
|
|
897
1084
|
i0.ɵɵelementContainerStart(0);
|
|
898
|
-
i0.ɵɵelementStart(1, "span",
|
|
1085
|
+
i0.ɵɵelementStart(1, "span", 9);
|
|
899
1086
|
i0.ɵɵtext(2);
|
|
900
1087
|
i0.ɵɵpipe(3, "translate");
|
|
901
1088
|
i0.ɵɵelementEnd();
|
|
902
|
-
i0.ɵɵtemplate(4,
|
|
1089
|
+
i0.ɵɵtemplate(4, MenuProfileComponent_ng_container_6_mat_icon_4_Template, 2, 0, "mat-icon", 10)(5, MenuProfileComponent_ng_container_6_ng_template_5_Template, 2, 0, "ng-template", null, 3, i0.ɵɵtemplateRefExtractor);
|
|
903
1090
|
i0.ɵɵelementContainerEnd();
|
|
904
1091
|
} if (rf & 2) {
|
|
905
1092
|
let tmp_5_0;
|
|
906
|
-
const
|
|
907
|
-
const
|
|
908
|
-
const
|
|
1093
|
+
const iconDown_r2 = i0.ɵɵreference(6);
|
|
1094
|
+
const ctx_r0 = i0.ɵɵnextContext();
|
|
1095
|
+
const state_r3 = i0.ɵɵreference(2);
|
|
909
1096
|
i0.ɵɵadvance(2);
|
|
910
|
-
i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(3, 3, (tmp_5_0 =
|
|
1097
|
+
i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(3, 3, (tmp_5_0 = ctx_r0.username) !== null && tmp_5_0 !== undefined ? tmp_5_0 : "MENU.ANONYMOUS"), " ");
|
|
911
1098
|
i0.ɵɵadvance(2);
|
|
912
|
-
i0.ɵɵproperty("ngIf",
|
|
1099
|
+
i0.ɵɵproperty("ngIf", state_r3.menuOpen)("ngIfElse", iconDown_r2);
|
|
913
1100
|
} }
|
|
914
|
-
function
|
|
1101
|
+
function MenuProfileComponent_For_10_Conditional_0_Conditional_0_ng_container_1_Template(rf, ctx) { if (rf & 1) {
|
|
915
1102
|
i0.ɵɵelementContainer(0);
|
|
916
1103
|
} }
|
|
917
|
-
function
|
|
918
|
-
const
|
|
919
|
-
i0.ɵɵelementStart(0, "a",
|
|
920
|
-
i0.ɵɵlistener("click", function
|
|
921
|
-
i0.ɵɵtemplate(1,
|
|
1104
|
+
function MenuProfileComponent_For_10_Conditional_0_Conditional_0_Template(rf, ctx) { if (rf & 1) {
|
|
1105
|
+
const _r4 = i0.ɵɵgetCurrentView();
|
|
1106
|
+
i0.ɵɵelementStart(0, "a", 15);
|
|
1107
|
+
i0.ɵɵlistener("click", function MenuProfileComponent_For_10_Conditional_0_Conditional_0_Template_a_click_0_listener() { i0.ɵɵrestoreView(_r4); const item_r5 = i0.ɵɵnextContext(2).$implicit; const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.linkCallback(item_r5.link)); });
|
|
1108
|
+
i0.ɵɵtemplate(1, MenuProfileComponent_For_10_Conditional_0_Conditional_0_ng_container_1_Template, 1, 0, "ng-container", 16);
|
|
922
1109
|
i0.ɵɵelementEnd();
|
|
923
1110
|
} if (rf & 2) {
|
|
924
|
-
const
|
|
1111
|
+
const item_r5 = i0.ɵɵnextContext(2).$implicit;
|
|
925
1112
|
i0.ɵɵnextContext();
|
|
926
|
-
const
|
|
927
|
-
i0.ɵɵproperty("href",
|
|
1113
|
+
const profileMenuItem_r6 = i0.ɵɵreference(12);
|
|
1114
|
+
i0.ɵɵproperty("href", item_r5.link.href, i0.ɵɵsanitizeUrl);
|
|
928
1115
|
i0.ɵɵadvance();
|
|
929
|
-
i0.ɵɵproperty("ngTemplateOutlet",
|
|
1116
|
+
i0.ɵɵproperty("ngTemplateOutlet", profileMenuItem_r6)("ngTemplateOutletContext", i0.ɵɵpureFunction2(3, _c0, item_r5.icon, item_r5.label));
|
|
930
1117
|
} }
|
|
931
|
-
function
|
|
1118
|
+
function MenuProfileComponent_For_10_Conditional_0_Conditional_1_ng_container_1_Template(rf, ctx) { if (rf & 1) {
|
|
932
1119
|
i0.ɵɵelementContainer(0);
|
|
933
1120
|
} }
|
|
934
|
-
function
|
|
935
|
-
const
|
|
936
|
-
i0.ɵɵelementStart(0, "a",
|
|
937
|
-
i0.ɵɵlistener("click", function
|
|
938
|
-
i0.ɵɵtemplate(1,
|
|
1121
|
+
function MenuProfileComponent_For_10_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
1122
|
+
const _r7 = i0.ɵɵgetCurrentView();
|
|
1123
|
+
i0.ɵɵelementStart(0, "a", 17);
|
|
1124
|
+
i0.ɵɵlistener("click", function MenuProfileComponent_For_10_Conditional_0_Conditional_1_Template_a_click_0_listener() { i0.ɵɵrestoreView(_r7); const item_r5 = i0.ɵɵnextContext(2).$implicit; const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.linkCallback(item_r5.link)); });
|
|
1125
|
+
i0.ɵɵtemplate(1, MenuProfileComponent_For_10_Conditional_0_Conditional_1_ng_container_1_Template, 1, 0, "ng-container", 16);
|
|
939
1126
|
i0.ɵɵelementEnd();
|
|
940
1127
|
} if (rf & 2) {
|
|
941
|
-
const
|
|
1128
|
+
const item_r5 = i0.ɵɵnextContext(2).$implicit;
|
|
942
1129
|
i0.ɵɵnextContext();
|
|
943
|
-
const
|
|
944
|
-
i0.ɵɵproperty("routerLink",
|
|
1130
|
+
const profileMenuItem_r6 = i0.ɵɵreference(12);
|
|
1131
|
+
i0.ɵɵproperty("routerLink", item_r5.link.href);
|
|
945
1132
|
i0.ɵɵadvance();
|
|
946
|
-
i0.ɵɵproperty("ngTemplateOutlet",
|
|
1133
|
+
i0.ɵɵproperty("ngTemplateOutlet", profileMenuItem_r6)("ngTemplateOutletContext", i0.ɵɵpureFunction2(3, _c0, item_r5.icon, item_r5.label));
|
|
947
1134
|
} }
|
|
948
|
-
function
|
|
949
|
-
i0.ɵɵtemplate(0,
|
|
1135
|
+
function MenuProfileComponent_For_10_Conditional_0_Template(rf, ctx) { if (rf & 1) {
|
|
1136
|
+
i0.ɵɵtemplate(0, MenuProfileComponent_For_10_Conditional_0_Conditional_0_Template, 2, 6, "a", 13)(1, MenuProfileComponent_For_10_Conditional_0_Conditional_1_Template, 2, 6, "a", 14);
|
|
950
1137
|
} if (rf & 2) {
|
|
951
|
-
const
|
|
952
|
-
i0.ɵɵconditional(
|
|
1138
|
+
const item_r5 = i0.ɵɵnextContext().$implicit;
|
|
1139
|
+
i0.ɵɵconditional(item_r5.link.isExternal ? 0 : 1);
|
|
953
1140
|
} }
|
|
954
|
-
function
|
|
1141
|
+
function MenuProfileComponent_For_10_Conditional_1_ng_container_1_Template(rf, ctx) { if (rf & 1) {
|
|
955
1142
|
i0.ɵɵelementContainer(0);
|
|
956
1143
|
} }
|
|
957
|
-
function
|
|
958
|
-
const
|
|
959
|
-
i0.ɵɵelementStart(0, "button",
|
|
960
|
-
i0.ɵɵlistener("click", function
|
|
961
|
-
i0.ɵɵtemplate(1,
|
|
1144
|
+
function MenuProfileComponent_For_10_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
1145
|
+
const _r8 = i0.ɵɵgetCurrentView();
|
|
1146
|
+
i0.ɵɵelementStart(0, "button", 18);
|
|
1147
|
+
i0.ɵɵlistener("click", function MenuProfileComponent_For_10_Conditional_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r8); const item_r5 = i0.ɵɵnextContext().$implicit; return i0.ɵɵresetView(item_r5.button == null ? null : item_r5.button.callback()); });
|
|
1148
|
+
i0.ɵɵtemplate(1, MenuProfileComponent_For_10_Conditional_1_ng_container_1_Template, 1, 0, "ng-container", 16);
|
|
962
1149
|
i0.ɵɵelementEnd();
|
|
963
1150
|
} if (rf & 2) {
|
|
964
|
-
const
|
|
1151
|
+
const item_r5 = i0.ɵɵnextContext().$implicit;
|
|
965
1152
|
i0.ɵɵnextContext();
|
|
966
|
-
const
|
|
1153
|
+
const profileMenuItem_r6 = i0.ɵɵreference(12);
|
|
967
1154
|
i0.ɵɵadvance();
|
|
968
|
-
i0.ɵɵproperty("ngTemplateOutlet",
|
|
1155
|
+
i0.ɵɵproperty("ngTemplateOutlet", profileMenuItem_r6)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c0, item_r5.icon, item_r5.label));
|
|
969
1156
|
} }
|
|
970
|
-
function
|
|
971
|
-
i0.ɵɵtemplate(0,
|
|
1157
|
+
function MenuProfileComponent_For_10_Template(rf, ctx) { if (rf & 1) {
|
|
1158
|
+
i0.ɵɵtemplate(0, MenuProfileComponent_For_10_Conditional_0_Template, 2, 1)(1, MenuProfileComponent_For_10_Conditional_1_Template, 2, 5, "button", 12);
|
|
972
1159
|
} if (rf & 2) {
|
|
973
|
-
const
|
|
974
|
-
i0.ɵɵconditional(
|
|
1160
|
+
const item_r5 = ctx.$implicit;
|
|
1161
|
+
i0.ɵɵconditional(item_r5.link ? 0 : 1);
|
|
975
1162
|
} }
|
|
976
|
-
function
|
|
977
|
-
i0.ɵɵelementStart(0, "span",
|
|
1163
|
+
function MenuProfileComponent_ng_template_11_Conditional_0_Conditional_0_Template(rf, ctx) { if (rf & 1) {
|
|
1164
|
+
i0.ɵɵelementStart(0, "span", 21);
|
|
978
1165
|
i0.ɵɵtext(1);
|
|
979
1166
|
i0.ɵɵelementEnd();
|
|
980
1167
|
} if (rf & 2) {
|
|
981
|
-
const
|
|
982
|
-
i0.ɵɵclassProp("material-icons-outlined",
|
|
1168
|
+
const icon_r9 = i0.ɵɵnextContext(2).icon;
|
|
1169
|
+
i0.ɵɵclassProp("material-icons-outlined", icon_r9 == null ? null : icon_r9.isOutlined);
|
|
983
1170
|
i0.ɵɵadvance();
|
|
984
|
-
i0.ɵɵtextInterpolate1(" ",
|
|
1171
|
+
i0.ɵɵtextInterpolate1(" ", icon_r9 == null ? null : icon_r9.name, " ");
|
|
985
1172
|
} }
|
|
986
|
-
function
|
|
987
|
-
i0.ɵɵelement(0, "mat-icon",
|
|
1173
|
+
function MenuProfileComponent_ng_template_11_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
1174
|
+
i0.ɵɵelement(0, "mat-icon", 20);
|
|
988
1175
|
} if (rf & 2) {
|
|
989
|
-
const
|
|
990
|
-
i0.ɵɵproperty("svgIcon",
|
|
1176
|
+
const icon_r9 = i0.ɵɵnextContext(2).icon;
|
|
1177
|
+
i0.ɵɵproperty("svgIcon", icon_r9 == null ? null : icon_r9.name);
|
|
991
1178
|
} }
|
|
992
|
-
function
|
|
993
|
-
i0.ɵɵtemplate(0,
|
|
1179
|
+
function MenuProfileComponent_ng_template_11_Conditional_0_Template(rf, ctx) { if (rf & 1) {
|
|
1180
|
+
i0.ɵɵtemplate(0, MenuProfileComponent_ng_template_11_Conditional_0_Conditional_0_Template, 2, 3, "span", 19)(1, MenuProfileComponent_ng_template_11_Conditional_0_Conditional_1_Template, 1, 1, "mat-icon", 20);
|
|
994
1181
|
} if (rf & 2) {
|
|
995
|
-
const
|
|
996
|
-
i0.ɵɵconditional(!(
|
|
1182
|
+
const icon_r9 = i0.ɵɵnextContext().icon;
|
|
1183
|
+
i0.ɵɵconditional(!(icon_r9 == null ? null : icon_r9.isCustom) ? 0 : 1);
|
|
997
1184
|
} }
|
|
998
|
-
function
|
|
999
|
-
i0.ɵɵtemplate(0,
|
|
1185
|
+
function MenuProfileComponent_ng_template_11_Template(rf, ctx) { if (rf & 1) {
|
|
1186
|
+
i0.ɵɵtemplate(0, MenuProfileComponent_ng_template_11_Conditional_0_Template, 2, 1);
|
|
1000
1187
|
i0.ɵɵtext(1);
|
|
1001
1188
|
i0.ɵɵpipe(2, "translate");
|
|
1002
1189
|
} if (rf & 2) {
|
|
1003
|
-
const
|
|
1004
|
-
const
|
|
1005
|
-
i0.ɵɵconditional(
|
|
1190
|
+
const icon_r9 = ctx.icon;
|
|
1191
|
+
const label_r10 = ctx.label;
|
|
1192
|
+
i0.ɵɵconditional(icon_r9 ? 0 : -1);
|
|
1006
1193
|
i0.ɵɵadvance();
|
|
1007
|
-
i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(2, 2,
|
|
1194
|
+
i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(2, 2, label_r10), "\n");
|
|
1008
1195
|
} }
|
|
1009
|
-
class
|
|
1010
|
-
|
|
1011
|
-
|
|
1012
|
-
set username(value) {
|
|
1013
|
-
// if username is passed whith whitespace in begginining, it breaks UI, so trim it for safety.
|
|
1014
|
-
this.#username = value?.trim();
|
|
1015
|
-
this.setUserInitials();
|
|
1016
|
-
}
|
|
1017
|
-
get menuLogoImage() {
|
|
1018
|
-
return this.collapsed
|
|
1019
|
-
? this.menuSettings.menuLogoCollapsed ?? this.menuSettings.menuLogo
|
|
1020
|
-
: this.menuSettings.menuLogo;
|
|
1021
|
-
}
|
|
1022
|
-
get sideNavWidth() {
|
|
1023
|
-
return this.collapsed ? this.menuSettings.collapsedWidth : this.menuSettings.expandedWidth;
|
|
1024
|
-
}
|
|
1025
|
-
constructor(strapiLinkService, domService, menuItems) {
|
|
1026
|
-
super(menuItems);
|
|
1027
|
-
this.strapiLinkService = strapiLinkService;
|
|
1028
|
-
this.domService = domService;
|
|
1029
|
-
this.menuItems = menuItems;
|
|
1030
|
-
this.menuSettings = {
|
|
1031
|
-
expandedWidth: '241px',
|
|
1032
|
-
collapsedWidth: '56px',
|
|
1033
|
-
menuLogo: '',
|
|
1034
|
-
menuLogoCollapsed: '',
|
|
1035
|
-
disableStrapi: false,
|
|
1036
|
-
disableLogoNavigation: false
|
|
1037
|
-
};
|
|
1038
|
-
this.collapsed = false;
|
|
1039
|
-
this.COLLAPSED_LOCAL_STORAGE_KEY = "TLD_MENU_SIDE_NAV_COLLAPSED";
|
|
1040
|
-
//#region Plausible event variables for collapse button
|
|
1041
|
-
this.COLLAPSE_PLAUSIBLE_EVENT_ID = "collapseMenu";
|
|
1042
|
-
this.COLLAPSE_PLAUSIBLE_ACTION_KEY = "action";
|
|
1043
|
-
this.LOGOCLICK_PLAUSIBLE_ACTION_ID = "tilde_logo_click";
|
|
1044
|
-
this.LOGOCLICK_PLAUSIBLE_EVENT = {
|
|
1045
|
-
eventId: this.LOGOCLICK_PLAUSIBLE_ACTION_ID,
|
|
1046
|
-
properties: []
|
|
1047
|
-
};
|
|
1048
|
-
this.EXPAND_PLAUSIBLE_EVENT = {
|
|
1049
|
-
eventId: this.COLLAPSE_PLAUSIBLE_EVENT_ID,
|
|
1050
|
-
properties: [{ key: this.COLLAPSE_PLAUSIBLE_ACTION_KEY, value: "expand" }]
|
|
1051
|
-
};
|
|
1052
|
-
this.COLLAPSE_PLAUSIBLE_EVENT = {
|
|
1053
|
-
eventId: this.COLLAPSE_PLAUSIBLE_EVENT_ID,
|
|
1054
|
-
properties: [{ key: this.COLLAPSE_PLAUSIBLE_ACTION_KEY, value: "collapse" }]
|
|
1055
|
-
};
|
|
1056
|
-
this.baseUrl = menuItems.menuSharedConfig.baseUrl || '';
|
|
1196
|
+
class MenuProfileComponent {
|
|
1197
|
+
constructor() {
|
|
1198
|
+
this.linkCallbackEvent = new EventEmitter();
|
|
1057
1199
|
}
|
|
1058
1200
|
ngOnInit() {
|
|
1059
|
-
super.ngOnInit();
|
|
1060
|
-
this.getColapsedFromLocalStorage();
|
|
1061
1201
|
this.setUserInitials();
|
|
1062
1202
|
}
|
|
1063
|
-
logoClick(event) {
|
|
1064
|
-
this.strapiLinkService.strapiLinkClick(event);
|
|
1065
|
-
}
|
|
1066
|
-
toggleCollapse() {
|
|
1067
|
-
this.collapsed = !this.collapsed;
|
|
1068
|
-
this.setColapsedFromLocalStorage();
|
|
1069
|
-
}
|
|
1070
1203
|
linkCallback(link) {
|
|
1071
|
-
|
|
1072
|
-
link.callback();
|
|
1073
|
-
}
|
|
1074
|
-
}
|
|
1075
|
-
getColapsedFromLocalStorage() {
|
|
1076
|
-
if (!this.domService.localStorage) {
|
|
1077
|
-
return;
|
|
1078
|
-
}
|
|
1079
|
-
this.collapsed = (this.domService.localStorage.getItem(this.COLLAPSED_LOCAL_STORAGE_KEY) == 'true' || ResolutionHelper.isMobileRes()) ? true : false;
|
|
1080
|
-
}
|
|
1081
|
-
setColapsedFromLocalStorage() {
|
|
1082
|
-
if (!this.domService.localStorage) {
|
|
1083
|
-
return;
|
|
1084
|
-
}
|
|
1085
|
-
this.domService.localStorage.setItem(this.COLLAPSED_LOCAL_STORAGE_KEY, this.collapsed.toString());
|
|
1204
|
+
this.linkCallbackEvent.emit(link);
|
|
1086
1205
|
}
|
|
1087
1206
|
setUserInitials() {
|
|
1088
1207
|
if (!this.username) {
|
|
@@ -1098,104 +1217,141 @@ class SideNavMenuComponent extends NavBaseComponent {
|
|
|
1098
1217
|
// If there are more than one word, use the first letter of the first two names
|
|
1099
1218
|
this.userInitials = splittedUsername[0][0] + splittedUsername[1][0];
|
|
1100
1219
|
}
|
|
1101
|
-
static { this.ɵfac = function
|
|
1102
|
-
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
|
|
1103
|
-
|
|
1104
|
-
i0.ɵɵ
|
|
1105
|
-
i0.ɵɵelementStart(0, "div", 4)(1, "div", 5)(2, "a", 6);
|
|
1106
|
-
i0.ɵɵpipe(3, "translate");
|
|
1107
|
-
i0.ɵɵlistener("click", function SideNavMenuComponent_Template_a_click_2_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.logoClick($event)); });
|
|
1108
|
-
i0.ɵɵelement(4, "img", 7);
|
|
1109
|
-
i0.ɵɵelementStart(5, "span", 8);
|
|
1110
|
-
i0.ɵɵtext(6);
|
|
1111
|
-
i0.ɵɵelementEnd()();
|
|
1112
|
-
i0.ɵɵelementStart(7, "button", 9);
|
|
1113
|
-
i0.ɵɵpipe(8, "translate");
|
|
1114
|
-
i0.ɵɵlistener("click", function SideNavMenuComponent_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.toggleCollapse()); });
|
|
1115
|
-
i0.ɵɵelementStart(9, "mat-icon");
|
|
1116
|
-
i0.ɵɵtext(10, "menu");
|
|
1117
|
-
i0.ɵɵelementEnd()()()();
|
|
1118
|
-
i0.ɵɵelementStart(11, "div", 10)(12, "div", 11)(13, "div", 12);
|
|
1119
|
-
i0.ɵɵtemplate(14, SideNavMenuComponent_a_14_Template, 5, 9, "a", 13);
|
|
1120
|
-
i0.ɵɵelementStart(15, "button", 14);
|
|
1121
|
-
i0.ɵɵpipe(16, "translate");
|
|
1122
|
-
i0.ɵɵpipe(17, "translate");
|
|
1123
|
-
i0.ɵɵlistener("click", function SideNavMenuComponent_Template_button_click_15_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.toggleCollapse()); });
|
|
1124
|
-
i0.ɵɵelementStart(18, "mat-icon", 15);
|
|
1125
|
-
i0.ɵɵtext(19, "close");
|
|
1220
|
+
static { this.ɵfac = function MenuProfileComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MenuProfileComponent)(); }; }
|
|
1221
|
+
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MenuProfileComponent, selectors: [["lib-menu-profile"]], inputs: { collapsed: "collapsed", username: "username", userOptions: "userOptions" }, outputs: { linkCallbackEvent: "linkCallbackEvent" }, decls: 13, vars: 3, consts: [["state", "matMenuTrigger"], ["menu", "matMenu"], ["profileMenuItem", ""], ["iconDown", ""], [1, "profile"], [1, "profile-wrapper", 3, "matMenuTriggerFor"], [1, "profile-icon"], [4, "ngIf"], [1, "profile-menu"], [1, "profile-name"], ["class", "profile-arrow spin", 4, "ngIf", "ngIfElse"], [1, "profile-arrow", "spin"], ["mat-menu-item", "", 1, "profile-option"], ["target", "_blank", 1, "mat-mdc-menu-item", 3, "href"], [1, "mat-mdc-menu-item", 3, "routerLink"], ["target", "_blank", 1, "mat-mdc-menu-item", 3, "click", "href"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "mat-mdc-menu-item", 3, "click", "routerLink"], ["mat-menu-item", "", 1, "profile-option", 3, "click"], [1, "material-icons", "profile-option-icon", 3, "material-icons-outlined"], [1, "profile-option-icon", 3, "svgIcon"], [1, "material-icons", "profile-option-icon"]], template: function MenuProfileComponent_Template(rf, ctx) { if (rf & 1) {
|
|
1222
|
+
i0.ɵɵelementStart(0, "div", 4)(1, "button", 5, 0)(3, "div", 6);
|
|
1223
|
+
i0.ɵɵtemplate(4, MenuProfileComponent_Conditional_4_Template, 1, 1)(5, MenuProfileComponent_Conditional_5_Template, 2, 0, "mat-icon");
|
|
1126
1224
|
i0.ɵɵelementEnd();
|
|
1127
|
-
i0.ɵɵ
|
|
1128
|
-
i0.ɵɵtext(21);
|
|
1129
|
-
i0.ɵɵelementEnd()()();
|
|
1130
|
-
i0.ɵɵelementStart(22, "div", 17)(23, "menu-columns", 18);
|
|
1131
|
-
i0.ɵɵlistener("toggleCollapseEvent", function SideNavMenuComponent_Template_menu_columns_toggleCollapseEvent_23_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.toggleCollapse()); });
|
|
1132
|
-
i0.ɵɵelementEnd()();
|
|
1133
|
-
i0.ɵɵelementStart(24, "div", 19);
|
|
1134
|
-
i0.ɵɵprojection(25);
|
|
1225
|
+
i0.ɵɵtemplate(6, MenuProfileComponent_ng_container_6_Template, 7, 5, "ng-container", 7);
|
|
1135
1226
|
i0.ɵɵelementEnd();
|
|
1136
|
-
i0.ɵɵelementStart(
|
|
1137
|
-
i0.ɵɵ
|
|
1138
|
-
i0.ɵɵelementEnd();
|
|
1139
|
-
i0.ɵɵtemplate(32, SideNavMenuComponent_ng_container_32_Template, 7, 5, "ng-container", 23);
|
|
1140
|
-
i0.ɵɵelementEnd();
|
|
1141
|
-
i0.ɵɵelementStart(33, "mat-menu", 24, 1);
|
|
1142
|
-
i0.ɵɵrepeaterCreate(35, SideNavMenuComponent_For_36_Template, 2, 1, null, null, _forTrack0);
|
|
1143
|
-
i0.ɵɵelementEnd()();
|
|
1144
|
-
i0.ɵɵtemplate(37, SideNavMenuComponent_ng_template_37_Template, 3, 4, "ng-template", null, 2, i0.ɵɵtemplateRefExtractor);
|
|
1227
|
+
i0.ɵɵelementStart(7, "mat-menu", 8, 1);
|
|
1228
|
+
i0.ɵɵrepeaterCreate(9, MenuProfileComponent_For_10_Template, 2, 1, null, null, _forTrack0);
|
|
1145
1229
|
i0.ɵɵelementEnd()();
|
|
1230
|
+
i0.ɵɵtemplate(11, MenuProfileComponent_ng_template_11_Template, 3, 4, "ng-template", null, 2, i0.ɵɵtemplateRefExtractor);
|
|
1146
1231
|
} if (rf & 2) {
|
|
1147
|
-
const
|
|
1232
|
+
const menu_r11 = i0.ɵɵreference(8);
|
|
1148
1233
|
i0.ɵɵadvance();
|
|
1149
|
-
i0.ɵɵproperty("
|
|
1150
|
-
i0.ɵɵadvance();
|
|
1151
|
-
i0.ɵɵclassProp("no-click", ctx.menuSettings == null ? null : ctx.menuSettings.disableLogoNavigation);
|
|
1152
|
-
i0.ɵɵproperty("libPlausibleEvent", ctx.LOGOCLICK_PLAUSIBLE_EVENT)("href", ctx.baseUrl, i0.ɵɵsanitizeUrl);
|
|
1153
|
-
i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(3, 28, "MENU.ARIA_LABELS.LOGO"));
|
|
1154
|
-
i0.ɵɵadvance(2);
|
|
1155
|
-
i0.ɵɵproperty("src", ctx.menuLogoImage, i0.ɵɵsanitizeUrl);
|
|
1156
|
-
i0.ɵɵadvance(2);
|
|
1157
|
-
i0.ɵɵtextInterpolate1(" ", ctx.productName, " ");
|
|
1158
|
-
i0.ɵɵadvance();
|
|
1159
|
-
i0.ɵɵproperty("libPlausibleEvent", ctx.collapsed ? ctx.EXPAND_PLAUSIBLE_EVENT : ctx.COLLAPSE_PLAUSIBLE_EVENT);
|
|
1160
|
-
i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(8, 30, "ARIA_LABELS.MENU_TOGGLER"));
|
|
1161
|
-
i0.ɵɵadvance(4);
|
|
1162
|
-
i0.ɵɵstyleProp("width", ctx.sideNavWidth);
|
|
1163
|
-
i0.ɵɵclassProp("collapsed", ctx.collapsed);
|
|
1164
|
-
i0.ɵɵproperty("ngClass.lt-sm", "mobile");
|
|
1165
|
-
i0.ɵɵadvance(2);
|
|
1166
|
-
i0.ɵɵproperty("fxLayoutAlign", ctx.collapsed ? "center center" : "space-between center");
|
|
1167
|
-
i0.ɵɵadvance();
|
|
1168
|
-
i0.ɵɵproperty("ngIf", !ctx.collapsed);
|
|
1169
|
-
i0.ɵɵadvance();
|
|
1170
|
-
i0.ɵɵproperty("libPlausibleEvent", ctx.collapsed ? ctx.EXPAND_PLAUSIBLE_EVENT : ctx.COLLAPSE_PLAUSIBLE_EVENT)("matTooltip", i0.ɵɵpipeBind1(16, 32, ctx.collapsed ? "MENU.EXPAND" : "MENU.COLLAPSE"));
|
|
1171
|
-
i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(17, 34, "ARIA_LABELS.MENU_TOGGLER"));
|
|
1234
|
+
i0.ɵɵproperty("matMenuTriggerFor", menu_r11);
|
|
1172
1235
|
i0.ɵɵadvance(3);
|
|
1173
|
-
i0.ɵɵ
|
|
1174
|
-
i0.ɵɵadvance(3);
|
|
1175
|
-
i0.ɵɵtextInterpolate(ctx.collapsed ? "keyboard_double_arrow_right" : "keyboard_double_arrow_left");
|
|
1176
|
-
i0.ɵɵadvance(2);
|
|
1177
|
-
i0.ɵɵproperty("direction", ctx.direction)("isOpen", !ctx.collapsed)("active", ctx.active);
|
|
1178
|
-
i0.ɵɵadvance(4);
|
|
1179
|
-
i0.ɵɵproperty("matMenuTriggerFor", menu_r13);
|
|
1180
|
-
i0.ɵɵadvance(3);
|
|
1181
|
-
i0.ɵɵconditional(ctx.userInitials ? 30 : 31);
|
|
1236
|
+
i0.ɵɵconditional(ctx.userInitials ? 4 : 5);
|
|
1182
1237
|
i0.ɵɵadvance(2);
|
|
1183
1238
|
i0.ɵɵproperty("ngIf", !ctx.collapsed);
|
|
1184
1239
|
i0.ɵɵadvance(3);
|
|
1185
|
-
i0.ɵɵrepeater(ctx.
|
|
1186
|
-
} }, dependencies: [i1$
|
|
1240
|
+
i0.ɵɵrepeater(ctx.userOptions);
|
|
1241
|
+
} }, dependencies: [i1$1.RouterLink, i3.NgIf, i3.NgTemplateOutlet, i2$1.MatIcon, i6.MatMenu, i6.MatMenuItem, i6.MatMenuTrigger, i8.TranslatePipe], styles: ["a[_ngcontent-%COMP%]{text-decoration:none}.profile[_ngcontent-%COMP%]{position:relative;margin-top:100px}.profile-wrapper[_ngcontent-%COMP%]{background:none;color:var(--base-30);display:flex;align-items:center;justify-content:start;width:100%;position:absolute;bottom:0;margin:32px 0}.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}.profile-name[_ngcontent-%COMP%]{max-width:145px;overflow:hidden;margin-left:12px;text-overflow:ellipsis}.profile-option-icon[_ngcontent-%COMP%]{vertical-align:middle;margin:0 5px 5px 0}.profile-arrow[_ngcontent-%COMP%]{position:absolute;right:0;margin-right:8px}.mobile[_ngcontent-%COMP%] .profile-arrow[_ngcontent-%COMP%]{margin-right:20px}.spin[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_spinArrow .3s forwards} .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)}}"] }); }
|
|
1187
1242
|
}
|
|
1188
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(
|
|
1243
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuProfileComponent, [{
|
|
1189
1244
|
type: Component,
|
|
1190
|
-
args: [{ selector: 'lib-
|
|
1191
|
-
}],
|
|
1245
|
+
args: [{ selector: 'lib-menu-profile', template: "<div class=\"profile\">\r\n <button #state=\"matMenuTrigger\" [matMenuTriggerFor]=\"menu\" class=\"profile-wrapper\">\r\n <div class=\"profile-icon\">\r\n @if (userInitials) {\r\n {{userInitials}}\r\n } @else {\r\n <mat-icon>person</mat-icon>\r\n }\r\n </div>\r\n\r\n <ng-container *ngIf=\"!collapsed\">\r\n <span class=\"profile-name\">\r\n {{ username ?? 'MENU.ANONYMOUS' | translate }}\r\n </span>\r\n\r\n <mat-icon *ngIf=\"state.menuOpen; else iconDown\" class=\"profile-arrow spin\">keyboard_arrow_down</mat-icon>\r\n\r\n <ng-template #iconDown>\r\n <mat-icon class=\"profile-arrow spin\">keyboard_arrow_up</mat-icon>\r\n </ng-template>\r\n </ng-container>\r\n </button>\r\n\r\n <mat-menu #menu=\"matMenu\" class=\"profile-menu\">\r\n @for (item of userOptions; track item.label) {\r\n @if (item.link) {\r\n @if (item.link.isExternal) {\r\n <a class=\"mat-mdc-menu-item\" [href]=\"item.link.href\" target=\"_blank\" (click)=\"linkCallback(item.link)\">\r\n <ng-container\r\n *ngTemplateOutlet=\"profileMenuItem; context: { icon: item.icon, label: item.label }\">\r\n </ng-container>\r\n </a>\r\n } @else {\r\n <a class=\"mat-mdc-menu-item\" [routerLink]=\"item.link.href\" (click)=\"linkCallback(item.link)\">\r\n <ng-container\r\n *ngTemplateOutlet=\"profileMenuItem; context: { icon: item.icon, label: item.label }\">\r\n </ng-container>\r\n </a>\r\n }\r\n } @else {\r\n <button\r\n mat-menu-item\r\n class=\"profile-option\"\r\n (click)=\"item.button?.callback()\"\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"profileMenuItem; context: { icon: item.icon, label: item.label }\">\r\n </ng-container>\r\n </button>\r\n }\r\n }\r\n </mat-menu>\r\n</div>\r\n\r\n<ng-template #profileMenuItem let-icon=\"icon\" let-label=\"label\">\r\n @if (icon) {\r\n @if (!icon?.isCustom) {\r\n <span class=\"material-icons profile-option-icon\" [class.material-icons-outlined]=\"icon?.isOutlined\">\r\n {{icon?.name}}\r\n </span>\r\n } @else {\r\n <mat-icon class=\"profile-option-icon\" [svgIcon]=\"icon?.name\"></mat-icon>\r\n }\r\n }\r\n {{ label | translate }}\r\n</ng-template>", styles: ["a{text-decoration:none}.profile{position:relative;margin-top:100px}.profile-wrapper{background:none;color:var(--base-30);display:flex;align-items:center;justify-content:start;width:100%;position:absolute;bottom:0;margin:32px 0}.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}.profile-name{max-width:145px;overflow:hidden;margin-left:12px;text-overflow:ellipsis}.profile-option-icon{vertical-align:middle;margin:0 5px 5px 0}.profile-arrow{position:absolute;right:0;margin-right:8px}.mobile .profile-arrow{margin-right:20px}.spin{animation:spinArrow .3s forwards}::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"] }]
|
|
1246
|
+
}], null, { collapsed: [{
|
|
1192
1247
|
type: Input
|
|
1193
|
-
}],
|
|
1248
|
+
}], username: [{
|
|
1194
1249
|
type: Input
|
|
1195
|
-
}],
|
|
1250
|
+
}], userOptions: [{
|
|
1196
1251
|
type: Input
|
|
1252
|
+
}], linkCallbackEvent: [{
|
|
1253
|
+
type: Output
|
|
1197
1254
|
}] }); })();
|
|
1198
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(
|
|
1255
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MenuProfileComponent, { className: "MenuProfileComponent", filePath: "lib\\components\\menu-profile\\menu-profile.component.ts", lineNumber: 10 }); })();
|
|
1256
|
+
|
|
1257
|
+
function MenuLangSwitcherComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
|
|
1258
|
+
i0.ɵɵelementStart(0, "span");
|
|
1259
|
+
i0.ɵɵtext(1);
|
|
1260
|
+
i0.ɵɵpipe(2, "languageTranslate");
|
|
1261
|
+
i0.ɵɵelementEnd();
|
|
1262
|
+
} if (rf & 2) {
|
|
1263
|
+
const ctx_r0 = i0.ɵɵnextContext();
|
|
1264
|
+
i0.ɵɵadvance();
|
|
1265
|
+
i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(2, 1, ctx_r0.currentLanguageCode), " ");
|
|
1266
|
+
} }
|
|
1267
|
+
function MenuLangSwitcherComponent_Conditional_7_Conditional_0_Template(rf, ctx) { if (rf & 1) {
|
|
1268
|
+
i0.ɵɵelementStart(0, "mat-icon", 6);
|
|
1269
|
+
i0.ɵɵtext(1, "keyboard_arrow_down");
|
|
1270
|
+
i0.ɵɵelementEnd();
|
|
1271
|
+
} }
|
|
1272
|
+
function MenuLangSwitcherComponent_Conditional_7_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
1273
|
+
i0.ɵɵelementStart(0, "mat-icon", 6);
|
|
1274
|
+
i0.ɵɵtext(1, "keyboard_arrow_up");
|
|
1275
|
+
i0.ɵɵelementEnd();
|
|
1276
|
+
} }
|
|
1277
|
+
function MenuLangSwitcherComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
|
|
1278
|
+
i0.ɵɵtemplate(0, MenuLangSwitcherComponent_Conditional_7_Conditional_0_Template, 2, 0, "mat-icon", 6)(1, MenuLangSwitcherComponent_Conditional_7_Conditional_1_Template, 2, 0, "mat-icon", 6);
|
|
1279
|
+
} if (rf & 2) {
|
|
1280
|
+
i0.ɵɵnextContext();
|
|
1281
|
+
const state_r2 = i0.ɵɵreference(1);
|
|
1282
|
+
i0.ɵɵconditional(state_r2.menuOpen ? 0 : 1);
|
|
1283
|
+
} }
|
|
1284
|
+
function MenuLangSwitcherComponent_For_11_Conditional_0_Template(rf, ctx) { if (rf & 1) {
|
|
1285
|
+
const _r3 = i0.ɵɵgetCurrentView();
|
|
1286
|
+
i0.ɵɵelementStart(0, "button", 8);
|
|
1287
|
+
i0.ɵɵlistener("click", function MenuLangSwitcherComponent_For_11_Conditional_0_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r3); const lang_r4 = i0.ɵɵnextContext().$implicit; const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.changeLanguage(lang_r4)); });
|
|
1288
|
+
i0.ɵɵtext(1);
|
|
1289
|
+
i0.ɵɵpipe(2, "languageTranslate");
|
|
1290
|
+
i0.ɵɵelementEnd();
|
|
1291
|
+
} if (rf & 2) {
|
|
1292
|
+
const lang_r4 = i0.ɵɵnextContext().$implicit;
|
|
1293
|
+
i0.ɵɵadvance();
|
|
1294
|
+
i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(2, 1, lang_r4), " ");
|
|
1295
|
+
} }
|
|
1296
|
+
function MenuLangSwitcherComponent_For_11_Template(rf, ctx) { if (rf & 1) {
|
|
1297
|
+
i0.ɵɵtemplate(0, MenuLangSwitcherComponent_For_11_Conditional_0_Template, 3, 3, "button", 7);
|
|
1298
|
+
} if (rf & 2) {
|
|
1299
|
+
const lang_r4 = ctx.$implicit;
|
|
1300
|
+
const ctx_r0 = i0.ɵɵnextContext();
|
|
1301
|
+
i0.ɵɵconditional(lang_r4 !== ctx_r0.currentLanguageCode ? 0 : -1);
|
|
1302
|
+
} }
|
|
1303
|
+
class MenuLangSwitcherComponent {
|
|
1304
|
+
constructor() {
|
|
1305
|
+
this.changeLanguageEvent = new EventEmitter();
|
|
1306
|
+
this.#translate = inject(TranslateService);
|
|
1307
|
+
}
|
|
1308
|
+
#translate;
|
|
1309
|
+
ngOnInit() {
|
|
1310
|
+
this.currentLanguageCode = this.#translate.currentLang;
|
|
1311
|
+
}
|
|
1312
|
+
changeLanguage(lang) {
|
|
1313
|
+
this.#translate.use(lang);
|
|
1314
|
+
this.currentLanguageCode = lang;
|
|
1315
|
+
this.changeLanguageEvent.emit(lang);
|
|
1316
|
+
}
|
|
1317
|
+
static { this.ɵfac = function MenuLangSwitcherComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MenuLangSwitcherComponent)(); }; }
|
|
1318
|
+
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MenuLangSwitcherComponent, selectors: [["lib-menu-lang-switcher"]], inputs: { isCollapsed: "isCollapsed", languages: "languages" }, outputs: { changeLanguageEvent: "changeLanguageEvent" }, decls: 12, vars: 10, consts: [["state", "matMenuTrigger"], ["menu", "matMenu"], ["matTooltipPosition", "after", "matTooltipClass", "menu-tooltip", 1, "lang-switcher", 3, "matMenuTriggerFor", "matTooltip"], [1, "current-lang"], [1, "lang-icon"], [1, "lang-menu"], [1, "menu-arrow", "spin"], ["mat-menu-item", "", 1, "profile-option"], ["mat-menu-item", "", 1, "profile-option", 3, "click"]], template: function MenuLangSwitcherComponent_Template(rf, ctx) { if (rf & 1) {
|
|
1319
|
+
i0.ɵɵelementStart(0, "button", 2, 0);
|
|
1320
|
+
i0.ɵɵpipe(2, "translate");
|
|
1321
|
+
i0.ɵɵelementStart(3, "div", 3)(4, "mat-icon", 4);
|
|
1322
|
+
i0.ɵɵtext(5, "language");
|
|
1323
|
+
i0.ɵɵelementEnd();
|
|
1324
|
+
i0.ɵɵtemplate(6, MenuLangSwitcherComponent_Conditional_6_Template, 3, 3, "span");
|
|
1325
|
+
i0.ɵɵelementEnd();
|
|
1326
|
+
i0.ɵɵtemplate(7, MenuLangSwitcherComponent_Conditional_7_Template, 2, 1);
|
|
1327
|
+
i0.ɵɵelementEnd();
|
|
1328
|
+
i0.ɵɵelementStart(8, "mat-menu", 5, 1);
|
|
1329
|
+
i0.ɵɵrepeaterCreate(10, MenuLangSwitcherComponent_For_11_Template, 1, 1, null, null, i0.ɵɵrepeaterTrackByIdentity);
|
|
1330
|
+
i0.ɵɵelementEnd();
|
|
1331
|
+
} if (rf & 2) {
|
|
1332
|
+
const state_r2 = i0.ɵɵreference(1);
|
|
1333
|
+
const menu_r5 = i0.ɵɵreference(9);
|
|
1334
|
+
i0.ɵɵclassProp("collapsed", ctx.isCollapsed)("active", state_r2.menuOpen);
|
|
1335
|
+
i0.ɵɵproperty("matMenuTriggerFor", menu_r5)("matTooltip", ctx.isCollapsed ? i0.ɵɵpipeBind1(2, 8, "MENU.CHANGE_LANGUAGE") : "");
|
|
1336
|
+
i0.ɵɵadvance(6);
|
|
1337
|
+
i0.ɵɵconditional(!ctx.isCollapsed ? 6 : -1);
|
|
1338
|
+
i0.ɵɵadvance();
|
|
1339
|
+
i0.ɵɵconditional(!ctx.isCollapsed ? 7 : -1);
|
|
1340
|
+
i0.ɵɵadvance(3);
|
|
1341
|
+
i0.ɵɵrepeater(ctx.languages);
|
|
1342
|
+
} }, dependencies: [i5.MatTooltip, i2$1.MatIcon, i6.MatMenu, i6.MatMenuItem, i6.MatMenuTrigger, i8.TranslatePipe, i2.LanguageTranslatePipe], styles: ["span[_ngcontent-%COMP%]{font-size:14px}.lang-switcher[_ngcontent-%COMP%]{white-space:nowrap;overflow:hidden;display:flex;align-items:center;color:var(--base-40);background:none;width:100%;padding:16px 8px 16px 18px;border-radius:5px}.lang-switcher.active[_ngcontent-%COMP%], .lang-switcher[_ngcontent-%COMP%]:hover{background-color:var(--base-70)}.collapsed[_ngcontent-%COMP%]{padding:0;min-width:40px;height:40px;border-radius:50%;margin-top:10px;justify-content:center;width:100%;margin-left:-6px}.current-lang[_ngcontent-%COMP%]{display:flex;align-items:center;width:100%;gap:12px}.collapsed[_ngcontent-%COMP%] .current-lang[_ngcontent-%COMP%]{justify-content:center;width:100%}.spin[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_spinArrow .3s forwards}@keyframes _ngcontent-%COMP%_spinArrow{to{transform:rotate(180deg)}}"] }); }
|
|
1343
|
+
}
|
|
1344
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuLangSwitcherComponent, [{
|
|
1345
|
+
type: Component,
|
|
1346
|
+
args: [{ selector: 'lib-menu-lang-switcher', 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 class=\"lang-icon\">language</mat-icon>\r\n\r\n @if (!isCollapsed) {\r\n <span>\r\n {{ currentLanguageCode | languageTranslate }}\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 class=\"profile-option\" (click)=\"changeLanguage(lang)\">\r\n {{ lang | languageTranslate }}\r\n </button>\r\n }\r\n }\r\n</mat-menu>\r\n", styles: ["span{font-size:14px}.lang-switcher{white-space:nowrap;overflow:hidden;display:flex;align-items:center;color:var(--base-40);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:-6px}.current-lang{display:flex;align-items:center;width:100%;gap:12px}.collapsed .current-lang{justify-content:center;width:100%}.spin{animation:spinArrow .3s forwards}@keyframes spinArrow{to{transform:rotate(180deg)}}\n"] }]
|
|
1347
|
+
}], null, { isCollapsed: [{
|
|
1348
|
+
type: Input
|
|
1349
|
+
}], languages: [{
|
|
1350
|
+
type: Input
|
|
1351
|
+
}], changeLanguageEvent: [{
|
|
1352
|
+
type: Output
|
|
1353
|
+
}] }); })();
|
|
1354
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MenuLangSwitcherComponent, { className: "MenuLangSwitcherComponent", filePath: "lib\\components\\menu-lang-switcher\\menu-lang-switcher.component.ts", lineNumber: 9 }); })();
|
|
1199
1355
|
|
|
1200
1356
|
class MenuModule {
|
|
1201
1357
|
static forRoot(config) {
|
|
@@ -1217,7 +1373,8 @@ class MenuModule {
|
|
|
1217
1373
|
MatMenuModule,
|
|
1218
1374
|
MatIconModule,
|
|
1219
1375
|
TranslateModule,
|
|
1220
|
-
PlausibleModule
|
|
1376
|
+
PlausibleModule,
|
|
1377
|
+
LanguageTranslateModule] }); }
|
|
1221
1378
|
}
|
|
1222
1379
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuModule, [{
|
|
1223
1380
|
type: NgModule,
|
|
@@ -1229,7 +1386,9 @@ class MenuModule {
|
|
|
1229
1386
|
MenuColumnsComponent,
|
|
1230
1387
|
MenuIconComponent,
|
|
1231
1388
|
MenuItemLinkComponent,
|
|
1232
|
-
MenuItemBtnComponent
|
|
1389
|
+
MenuItemBtnComponent,
|
|
1390
|
+
MenuProfileComponent,
|
|
1391
|
+
MenuLangSwitcherComponent
|
|
1233
1392
|
],
|
|
1234
1393
|
exports: [
|
|
1235
1394
|
SideNavMenuComponent,
|
|
@@ -1247,7 +1406,8 @@ class MenuModule {
|
|
|
1247
1406
|
MatMenuModule,
|
|
1248
1407
|
MatIconModule,
|
|
1249
1408
|
TranslateModule,
|
|
1250
|
-
PlausibleModule
|
|
1409
|
+
PlausibleModule,
|
|
1410
|
+
LanguageTranslateModule
|
|
1251
1411
|
],
|
|
1252
1412
|
providers: [StarpiMenuService, provideHttpClient(withInterceptorsFromDi())],
|
|
1253
1413
|
}]
|
|
@@ -1258,7 +1418,9 @@ class MenuModule {
|
|
|
1258
1418
|
MenuColumnsComponent,
|
|
1259
1419
|
MenuIconComponent,
|
|
1260
1420
|
MenuItemLinkComponent,
|
|
1261
|
-
MenuItemBtnComponent
|
|
1421
|
+
MenuItemBtnComponent,
|
|
1422
|
+
MenuProfileComponent,
|
|
1423
|
+
MenuLangSwitcherComponent], imports: [FlexLayoutModule,
|
|
1262
1424
|
RouterModule,
|
|
1263
1425
|
CommonModule,
|
|
1264
1426
|
MatTooltipModule,
|
|
@@ -1269,8 +1431,12 @@ class MenuModule {
|
|
|
1269
1431
|
MatMenuModule,
|
|
1270
1432
|
MatIconModule,
|
|
1271
1433
|
TranslateModule,
|
|
1272
|
-
PlausibleModule
|
|
1434
|
+
PlausibleModule,
|
|
1435
|
+
LanguageTranslateModule], exports: [SideNavMenuComponent,
|
|
1273
1436
|
MenuColumnsComponent] }); })();
|
|
1437
|
+
i0.ɵɵsetComponentScope(SideNavMenuComponent, [i1$2.DefaultLayoutDirective, i1$2.DefaultLayoutAlignDirective, i1$2.FlexFillDirective, i1$2.DefaultFlexDirective, i2$2.DefaultShowHideDirective, i2$2.DefaultClassDirective, i3.NgIf, i5.MatTooltip, i2$1.MatIcon, i7.MatIconButton, i2.PlausibleEventDirective, MenuColumnsComponent,
|
|
1438
|
+
MenuProfileComponent,
|
|
1439
|
+
MenuLangSwitcherComponent], [i8.TranslatePipe]);
|
|
1274
1440
|
|
|
1275
1441
|
/**
|
|
1276
1442
|
* Prefefined user menu options, so that same style of items are used across all products. Use this by passing necessary configuration.
|
|
@@ -1301,25 +1467,6 @@ const USER_MENU_OPTIONS = {
|
|
|
1301
1467
|
icon: { name: `mail` },
|
|
1302
1468
|
link: { href, isExternal: true, callback },
|
|
1303
1469
|
}),
|
|
1304
|
-
/** use language update callback to save in localstorage */
|
|
1305
|
-
changeLanguage: (dialog, languages, languageChangeCallback) => ({
|
|
1306
|
-
label: 'MENU.CHANGE_LANGUAGE',
|
|
1307
|
-
icon: { name: 'language' },
|
|
1308
|
-
button: {
|
|
1309
|
-
callback: () => {
|
|
1310
|
-
dialog
|
|
1311
|
-
.open(SelectLanguageDialogComponent, {
|
|
1312
|
-
data: { languages: languages },
|
|
1313
|
-
})
|
|
1314
|
-
.afterClosed()
|
|
1315
|
-
.subscribe((language) => {
|
|
1316
|
-
if (language && languageChangeCallback) {
|
|
1317
|
-
languageChangeCallback(language);
|
|
1318
|
-
}
|
|
1319
|
-
});
|
|
1320
|
-
},
|
|
1321
|
-
},
|
|
1322
|
-
}),
|
|
1323
1470
|
logout: (callback) => ({
|
|
1324
1471
|
icon: { name: 'logout' },
|
|
1325
1472
|
label: 'MENU.LOG_OUT',
|