@tilde-nlp/ngx-menu 8.1.14 → 8.1.16
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.
|
@@ -4,7 +4,7 @@ import * as i2 from '@tilde-nlp/ngx-common';
|
|
|
4
4
|
import { ResolutionHelper, PlausibleModule, SelectLanguageDialogComponent } from '@tilde-nlp/ngx-common';
|
|
5
5
|
import * as i1$1 from '@angular/router';
|
|
6
6
|
import { NavigationEnd, RouterModule } from '@angular/router';
|
|
7
|
-
import { map, BehaviorSubject, filter } from 'rxjs';
|
|
7
|
+
import { map, BehaviorSubject, filter, Subject } 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 { SingleTypes } from '@tilde-nlp/strapi-models';
|
|
@@ -328,14 +328,58 @@ class NavBaseComponent {
|
|
|
328
328
|
}] }); })();
|
|
329
329
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(NavBaseComponent, { className: "NavBaseComponent", filePath: "lib/components/nav-base/nav-base.component.ts", lineNumber: 14 }); })();
|
|
330
330
|
|
|
331
|
+
class MenuAccessibilityService {
|
|
332
|
+
constructor() {
|
|
333
|
+
this.fontSizeLocalStorageKey = 'ACCESSIBILITY_FONT_SIZE_IX';
|
|
334
|
+
this.contrastLocalStorageKey = 'ACCESSIBILITY_CONTRAST';
|
|
335
|
+
this.sizeIncreaseSubject = new Subject();
|
|
336
|
+
this.contrastSubject = new Subject();
|
|
337
|
+
}
|
|
338
|
+
saveContrast(contrast) {
|
|
339
|
+
localStorage.setItem(this.contrastLocalStorageKey, contrast);
|
|
340
|
+
}
|
|
341
|
+
getSavedContrast() {
|
|
342
|
+
const savedContrast = localStorage.getItem(this.contrastLocalStorageKey);
|
|
343
|
+
return savedContrast ?? 'base';
|
|
344
|
+
}
|
|
345
|
+
getSavedFontSize() {
|
|
346
|
+
const savedFontSizeIx = localStorage.getItem(this.fontSizeLocalStorageKey);
|
|
347
|
+
return JSON.parse(savedFontSizeIx ?? '0');
|
|
348
|
+
}
|
|
349
|
+
saveFontSize(ix) {
|
|
350
|
+
localStorage.setItem(this.fontSizeLocalStorageKey, ix.toString());
|
|
351
|
+
}
|
|
352
|
+
setFontSize(fontSizeIx) {
|
|
353
|
+
const sizes = ['1rem', '1.25rem', '1.5rem'];
|
|
354
|
+
if (fontSizeIx > 0) {
|
|
355
|
+
this.sizeIncreaseSubject.next(true);
|
|
356
|
+
}
|
|
357
|
+
else {
|
|
358
|
+
this.sizeIncreaseSubject.next(false);
|
|
359
|
+
}
|
|
360
|
+
document.querySelector('html').style.fontSize = sizes[fontSizeIx];
|
|
361
|
+
}
|
|
362
|
+
setContrast(contrast) {
|
|
363
|
+
document.querySelector('html').className = contrast;
|
|
364
|
+
}
|
|
365
|
+
static { this.ɵfac = function MenuAccessibilityService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MenuAccessibilityService)(); }; }
|
|
366
|
+
static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: MenuAccessibilityService, factory: MenuAccessibilityService.ɵfac, providedIn: 'root' }); }
|
|
367
|
+
}
|
|
368
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuAccessibilityService, [{
|
|
369
|
+
type: Injectable,
|
|
370
|
+
args: [{
|
|
371
|
+
providedIn: 'root',
|
|
372
|
+
}]
|
|
373
|
+
}], null, null); })();
|
|
374
|
+
|
|
331
375
|
const _c0$3 = ["*"];
|
|
332
|
-
function
|
|
376
|
+
function SideNavMenuComponent_a_13_Template(rf, ctx) { if (rf & 1) {
|
|
333
377
|
const _r1 = i0.ɵɵgetCurrentView();
|
|
334
|
-
i0.ɵɵelementStart(0, "a",
|
|
378
|
+
i0.ɵɵelementStart(0, "a", 1);
|
|
335
379
|
i0.ɵɵpipe(1, "translate");
|
|
336
|
-
i0.ɵɵlistener("click", function
|
|
337
|
-
i0.ɵɵelement(2, "img",
|
|
338
|
-
i0.ɵɵelementStart(3, "span",
|
|
380
|
+
i0.ɵɵlistener("click", function SideNavMenuComponent_a_13_Template_a_click_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.logoClick($event)); });
|
|
381
|
+
i0.ɵɵelement(2, "img", 2);
|
|
382
|
+
i0.ɵɵelementStart(3, "span", 3);
|
|
339
383
|
i0.ɵɵtext(4);
|
|
340
384
|
i0.ɵɵelementEnd()();
|
|
341
385
|
} if (rf & 2) {
|
|
@@ -348,42 +392,42 @@ function SideNavMenuComponent_a_14_Template(rf, ctx) { if (rf & 1) {
|
|
|
348
392
|
i0.ɵɵadvance(2);
|
|
349
393
|
i0.ɵɵtextInterpolate1(" ", ctx_r1.productName, " ");
|
|
350
394
|
} }
|
|
351
|
-
function
|
|
395
|
+
function SideNavMenuComponent_Conditional_24_Template(rf, ctx) { if (rf & 1) {
|
|
352
396
|
const _r3 = i0.ɵɵgetCurrentView();
|
|
353
|
-
i0.ɵɵelementStart(0, "lib-menu-lang-switcher",
|
|
354
|
-
i0.ɵɵlistener("changeLanguageEvent", function
|
|
397
|
+
i0.ɵɵelementStart(0, "lib-menu-lang-switcher", 19);
|
|
398
|
+
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)); });
|
|
355
399
|
i0.ɵɵelementEnd();
|
|
356
400
|
} if (rf & 2) {
|
|
357
401
|
const ctx_r1 = i0.ɵɵnextContext();
|
|
358
402
|
i0.ɵɵproperty("isCollapsed", ctx_r1.collapsed)("languages", ctx_r1.supportedLanguages);
|
|
359
403
|
} }
|
|
360
|
-
function
|
|
404
|
+
function SideNavMenuComponent_Conditional_28_Conditional_1_For_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
|
|
361
405
|
i0.ɵɵtext(0, " \u00A0\u00A0|\u00A0\u00A0 ");
|
|
362
406
|
} }
|
|
363
|
-
function
|
|
364
|
-
i0.ɵɵelementStart(0, "a",
|
|
407
|
+
function SideNavMenuComponent_Conditional_28_Conditional_1_For_1_Template(rf, ctx) { if (rf & 1) {
|
|
408
|
+
i0.ɵɵelementStart(0, "a", 20);
|
|
365
409
|
i0.ɵɵtext(1);
|
|
366
410
|
i0.ɵɵelementEnd();
|
|
367
|
-
i0.ɵɵconditionalCreate(2,
|
|
411
|
+
i0.ɵɵconditionalCreate(2, SideNavMenuComponent_Conditional_28_Conditional_1_For_1_Conditional_2_Template, 1, 0);
|
|
368
412
|
} if (rf & 2) {
|
|
369
413
|
const item_r4 = ctx.$implicit;
|
|
370
|
-
const ɵ$
|
|
414
|
+
const ɵ$index_61_r5 = ctx.$index;
|
|
371
415
|
const ctx_r1 = i0.ɵɵnextContext(3);
|
|
372
416
|
i0.ɵɵproperty("href", item_r4.link, i0.ɵɵsanitizeUrl);
|
|
373
417
|
i0.ɵɵadvance();
|
|
374
418
|
i0.ɵɵtextInterpolate(item_r4.title);
|
|
375
419
|
i0.ɵɵadvance();
|
|
376
|
-
i0.ɵɵconditional(ɵ$
|
|
420
|
+
i0.ɵɵconditional(ɵ$index_61_r5 !== ctx_r1.footerItems.length - 1 ? 2 : -1);
|
|
377
421
|
} }
|
|
378
|
-
function
|
|
379
|
-
i0.ɵɵrepeaterCreate(0,
|
|
422
|
+
function SideNavMenuComponent_Conditional_28_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
423
|
+
i0.ɵɵrepeaterCreate(0, SideNavMenuComponent_Conditional_28_Conditional_1_For_1_Template, 3, 3, null, null, i0.ɵɵrepeaterTrackByIndex);
|
|
380
424
|
} if (rf & 2) {
|
|
381
425
|
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
382
426
|
i0.ɵɵrepeater(ctx_r1.footerItems);
|
|
383
427
|
} }
|
|
384
|
-
function
|
|
385
|
-
i0.ɵɵelementStart(0, "div",
|
|
386
|
-
i0.ɵɵconditionalCreate(1,
|
|
428
|
+
function SideNavMenuComponent_Conditional_28_Template(rf, ctx) { if (rf & 1) {
|
|
429
|
+
i0.ɵɵelementStart(0, "div", 18);
|
|
430
|
+
i0.ɵɵconditionalCreate(1, SideNavMenuComponent_Conditional_28_Conditional_1_Template, 2, 0);
|
|
387
431
|
i0.ɵɵelementEnd();
|
|
388
432
|
} if (rf & 2) {
|
|
389
433
|
const ctx_r1 = i0.ɵɵnextContext();
|
|
@@ -408,11 +452,12 @@ class SideNavMenuComponent extends NavBaseComponent {
|
|
|
408
452
|
get footerItems() {
|
|
409
453
|
return this.menuItemsService.footerItems;
|
|
410
454
|
}
|
|
411
|
-
constructor(strapiLinkService, domService, menuItems) {
|
|
455
|
+
constructor(strapiLinkService, domService, menuItems, accessibility) {
|
|
412
456
|
super(menuItems);
|
|
413
457
|
this.strapiLinkService = strapiLinkService;
|
|
414
458
|
this.domService = domService;
|
|
415
459
|
this.menuItems = menuItems;
|
|
460
|
+
this.accessibility = accessibility;
|
|
416
461
|
this.menuSettings = {
|
|
417
462
|
expandedWidth: '241px',
|
|
418
463
|
collapsedWidth: '56px',
|
|
@@ -421,6 +466,7 @@ class SideNavMenuComponent extends NavBaseComponent {
|
|
|
421
466
|
disableStrapi: false,
|
|
422
467
|
disableLogoNavigation: false,
|
|
423
468
|
expandableMenuChildren: false,
|
|
469
|
+
openExternalLinksInSameTab: false,
|
|
424
470
|
useLargeLoginButton: false,
|
|
425
471
|
userOptions: []
|
|
426
472
|
};
|
|
@@ -445,11 +491,13 @@ class SideNavMenuComponent extends NavBaseComponent {
|
|
|
445
491
|
eventId: this.COLLAPSE_PLAUSIBLE_EVENT_ID,
|
|
446
492
|
properties: [{ key: this.COLLAPSE_PLAUSIBLE_ACTION_KEY, value: "collapse" }]
|
|
447
493
|
};
|
|
494
|
+
this.isMobileRes = ResolutionHelper.isMobileRes();
|
|
448
495
|
this.baseUrl = menuItems.menuSharedConfig.baseUrl || '';
|
|
449
496
|
}
|
|
450
497
|
ngOnInit() {
|
|
451
498
|
super.ngOnInit();
|
|
452
499
|
this.getColapsedFromLocalStorage();
|
|
500
|
+
this.watchAccessibilityChanges();
|
|
453
501
|
}
|
|
454
502
|
login() {
|
|
455
503
|
this.loginEvent.emit();
|
|
@@ -469,6 +517,16 @@ class SideNavMenuComponent extends NavBaseComponent {
|
|
|
469
517
|
changeLanguage(lang) {
|
|
470
518
|
this.changeLanguageEvent.emit(lang);
|
|
471
519
|
}
|
|
520
|
+
watchAccessibilityChanges() {
|
|
521
|
+
this.accessibility.sizeIncreaseSubject.subscribe({
|
|
522
|
+
next: (isIncreased) => {
|
|
523
|
+
this.isViewIncreased = isIncreased;
|
|
524
|
+
if (isIncreased) {
|
|
525
|
+
this.collapsed = true;
|
|
526
|
+
}
|
|
527
|
+
}
|
|
528
|
+
});
|
|
529
|
+
}
|
|
472
530
|
getColapsedFromLocalStorage() {
|
|
473
531
|
if (!this.domService.localStorage) {
|
|
474
532
|
return;
|
|
@@ -481,93 +539,92 @@ class SideNavMenuComponent extends NavBaseComponent {
|
|
|
481
539
|
}
|
|
482
540
|
this.domService.localStorage.setItem(this.COLLAPSED_LOCAL_STORAGE_KEY, this.collapsed.toString());
|
|
483
541
|
}
|
|
484
|
-
static { this.ɵfac = function SideNavMenuComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SideNavMenuComponent)(i0.ɵɵdirectiveInject(i1.StrapiLinkService), i0.ɵɵdirectiveInject(i2.DOMService), i0.ɵɵdirectiveInject(MenuItemsService)); }; }
|
|
485
|
-
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SideNavMenuComponent, selectors: [["lib-side-nav-menu"]], inputs: { username: "username", menuSettings: "menuSettings", productName: "productName", supportedLanguages: "supportedLanguages", useDefaultLanguageSwitcher: "useDefaultLanguageSwitcher" }, outputs: { changeLanguageEvent: "changeLanguageEvent", loginEvent: "loginEvent" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c0$3, decls:
|
|
542
|
+
static { this.ɵfac = function SideNavMenuComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SideNavMenuComponent)(i0.ɵɵdirectiveInject(i1.StrapiLinkService), i0.ɵɵdirectiveInject(i2.DOMService), i0.ɵɵdirectiveInject(MenuItemsService), i0.ɵɵdirectiveInject(MenuAccessibilityService)); }; }
|
|
543
|
+
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SideNavMenuComponent, selectors: [["lib-side-nav-menu"]], inputs: { username: "username", menuSettings: "menuSettings", productName: "productName", supportedLanguages: "supportedLanguages", useDefaultLanguageSwitcher: "useDefaultLanguageSwitcher" }, outputs: { changeLanguageEvent: "changeLanguageEvent", loginEvent: "loginEvent" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c0$3, decls: 29, vars: 46, consts: [[1, "mobile-header", 3, "fxHide", "ngClass"], ["fxFlex", "3.125em", "fxLayoutAlign", "start center", 3, "click", "libPlausibleEvent", "href"], ["height", "40", "width", "40", "alt", "logo", 1, "menu-logo", 3, "src"], [1, "menu-product-name"], ["mat-icon-button", "", 1, "toggler", 3, "click", "libPlausibleEvent"], ["fxLayout", "column", 1, "menu-container", 3, "ngClass.lt-sm", "ngClass"], ["fxLayout", "column", "fxFlexFill", "", 1, "content"], ["fxLayout", "row", 1, "menu-container-header", 3, "fxLayoutAlign"], ["fxFlex", "3.125em", "fxLayoutAlign", "start center", 3, "libPlausibleEvent", "no-click", "href", "click", 4, "ngIf"], ["mat-icon-button", "", 1, "toggler", 3, "click", "libPlausibleEvent", "matTooltip"], ["fxHide.gt-xs", "", 3, "ngClass.lt-sm"], ["fxHide.lt-sm", ""], ["fxLayout", "column", 1, "menu-wrapper"], ["role", "navigation", 3, "toggleCollapseEvent", "direction", "isOpen", "active", "expandableMenuChildren", "openExternalLinksInSameTab"], [3, "isCollapsed"], [3, "isCollapsed", "languages"], ["fxFlex", "", "fxLayout", "column"], [3, "linkCallbackEvent", "loginEvent", "userOptions", "username", "collapsed", "useLargeLoginButton"], [1, "menu-footer"], [3, "changeLanguageEvent", "isCollapsed", "languages"], ["target", "_blank", 3, "href"]], template: function SideNavMenuComponent_Template(rf, ctx) { if (rf & 1) {
|
|
486
544
|
i0.ɵɵprojectionDef();
|
|
487
|
-
i0.ɵɵelementStart(0, "div", 0)(1, "
|
|
488
|
-
i0.ɵɵpipe(
|
|
489
|
-
i0.ɵɵlistener("click", function
|
|
490
|
-
i0.ɵɵelement(
|
|
491
|
-
i0.ɵɵelementStart(
|
|
492
|
-
i0.ɵɵtext(
|
|
545
|
+
i0.ɵɵelementStart(0, "div", 0)(1, "a", 1);
|
|
546
|
+
i0.ɵɵpipe(2, "translate");
|
|
547
|
+
i0.ɵɵlistener("click", function SideNavMenuComponent_Template_a_click_1_listener($event) { return ctx.logoClick($event); });
|
|
548
|
+
i0.ɵɵelement(3, "img", 2);
|
|
549
|
+
i0.ɵɵelementStart(4, "span", 3);
|
|
550
|
+
i0.ɵɵtext(5);
|
|
493
551
|
i0.ɵɵelementEnd()();
|
|
494
|
-
i0.ɵɵelementStart(
|
|
495
|
-
i0.ɵɵpipe(
|
|
496
|
-
i0.ɵɵlistener("click", function
|
|
497
|
-
i0.ɵɵelementStart(
|
|
498
|
-
i0.ɵɵtext(
|
|
499
|
-
i0.ɵɵelementEnd()()()
|
|
500
|
-
i0.ɵɵelementStart(
|
|
501
|
-
i0.ɵɵtemplate(
|
|
502
|
-
i0.ɵɵelementStart(
|
|
552
|
+
i0.ɵɵelementStart(6, "button", 4);
|
|
553
|
+
i0.ɵɵpipe(7, "translate");
|
|
554
|
+
i0.ɵɵlistener("click", function SideNavMenuComponent_Template_button_click_6_listener() { return ctx.toggleCollapse(); });
|
|
555
|
+
i0.ɵɵelementStart(8, "mat-icon");
|
|
556
|
+
i0.ɵɵtext(9, "menu");
|
|
557
|
+
i0.ɵɵelementEnd()()();
|
|
558
|
+
i0.ɵɵelementStart(10, "div", 5)(11, "div", 6)(12, "div", 7);
|
|
559
|
+
i0.ɵɵtemplate(13, SideNavMenuComponent_a_13_Template, 5, 9, "a", 8);
|
|
560
|
+
i0.ɵɵelementStart(14, "button", 9);
|
|
561
|
+
i0.ɵɵpipe(15, "translate");
|
|
503
562
|
i0.ɵɵpipe(16, "translate");
|
|
504
|
-
i0.ɵɵ
|
|
505
|
-
i0.ɵɵ
|
|
506
|
-
i0.ɵɵ
|
|
507
|
-
i0.ɵɵtext(19, "close");
|
|
563
|
+
i0.ɵɵlistener("click", function SideNavMenuComponent_Template_button_click_14_listener() { return ctx.toggleCollapse(); });
|
|
564
|
+
i0.ɵɵelementStart(17, "mat-icon", 10);
|
|
565
|
+
i0.ɵɵtext(18, "close");
|
|
508
566
|
i0.ɵɵelementEnd();
|
|
509
|
-
i0.ɵɵelementStart(
|
|
510
|
-
i0.ɵɵtext(
|
|
567
|
+
i0.ɵɵelementStart(19, "mat-icon", 11);
|
|
568
|
+
i0.ɵɵtext(20);
|
|
511
569
|
i0.ɵɵelementEnd()()();
|
|
512
|
-
i0.ɵɵelementStart(
|
|
513
|
-
i0.ɵɵlistener("toggleCollapseEvent", function
|
|
570
|
+
i0.ɵɵelementStart(21, "div", 12)(22, "menu-columns", 13);
|
|
571
|
+
i0.ɵɵlistener("toggleCollapseEvent", function SideNavMenuComponent_Template_menu_columns_toggleCollapseEvent_22_listener() { return ctx.toggleCollapse(); });
|
|
514
572
|
i0.ɵɵelementEnd();
|
|
515
|
-
i0.ɵɵelement(
|
|
516
|
-
i0.ɵɵconditionalCreate(
|
|
573
|
+
i0.ɵɵelement(23, "lib-menu-accessibility", 14);
|
|
574
|
+
i0.ɵɵconditionalCreate(24, SideNavMenuComponent_Conditional_24_Template, 1, 2, "lib-menu-lang-switcher", 15);
|
|
517
575
|
i0.ɵɵelementEnd();
|
|
518
|
-
i0.ɵɵelementStart(
|
|
519
|
-
i0.ɵɵprojection(
|
|
576
|
+
i0.ɵɵelementStart(25, "div", 16);
|
|
577
|
+
i0.ɵɵprojection(26);
|
|
520
578
|
i0.ɵɵelementEnd();
|
|
521
|
-
i0.ɵɵelementStart(
|
|
522
|
-
i0.ɵɵlistener("linkCallbackEvent", function
|
|
579
|
+
i0.ɵɵelementStart(27, "lib-menu-profile", 17);
|
|
580
|
+
i0.ɵɵlistener("linkCallbackEvent", function SideNavMenuComponent_Template_lib_menu_profile_linkCallbackEvent_27_listener($event) { return ctx.linkCallback($event); })("loginEvent", function SideNavMenuComponent_Template_lib_menu_profile_loginEvent_27_listener() { return ctx.login(); });
|
|
523
581
|
i0.ɵɵelementEnd();
|
|
524
|
-
i0.ɵɵconditionalCreate(
|
|
582
|
+
i0.ɵɵconditionalCreate(28, SideNavMenuComponent_Conditional_28_Template, 2, 1, "div", 18);
|
|
525
583
|
i0.ɵɵelementEnd()();
|
|
526
584
|
} if (rf & 2) {
|
|
527
|
-
i0.ɵɵ
|
|
528
|
-
i0.ɵɵproperty("fxHide", !ctx.collapsed)("ngClass", ctx.menuSettings.menuVersion);
|
|
585
|
+
i0.ɵɵproperty("fxHide", !ctx.collapsed || ctx.collapsed && !ctx.isMobileRes && !ctx.isViewIncreased)("ngClass", ctx.menuSettings.menuVersion);
|
|
529
586
|
i0.ɵɵadvance();
|
|
530
587
|
i0.ɵɵclassProp("no-click", ctx.menuSettings == null ? null : ctx.menuSettings.disableLogoNavigation);
|
|
531
588
|
i0.ɵɵproperty("libPlausibleEvent", ctx.LOGOCLICK_PLAUSIBLE_EVENT)("href", ctx.baseUrl, i0.ɵɵsanitizeUrl);
|
|
532
|
-
i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(
|
|
589
|
+
i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(2, 38, "MENU.ARIA_LABELS.LOGO"));
|
|
533
590
|
i0.ɵɵadvance(2);
|
|
534
591
|
i0.ɵɵproperty("src", ctx.menuLogoImage, i0.ɵɵsanitizeUrl);
|
|
535
592
|
i0.ɵɵadvance(2);
|
|
536
593
|
i0.ɵɵtextInterpolate1(" ", ctx.productName, " ");
|
|
537
594
|
i0.ɵɵadvance();
|
|
538
595
|
i0.ɵɵproperty("libPlausibleEvent", ctx.collapsed ? ctx.EXPAND_PLAUSIBLE_EVENT : ctx.COLLAPSE_PLAUSIBLE_EVENT);
|
|
539
|
-
i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(
|
|
596
|
+
i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(7, 40, "ARIA_LABELS.MENU_TOGGLER"));
|
|
540
597
|
i0.ɵɵadvance(4);
|
|
541
598
|
i0.ɵɵstyleProp("width", ctx.sideNavWidth);
|
|
542
|
-
i0.ɵɵclassProp("collapsed", ctx.collapsed);
|
|
599
|
+
i0.ɵɵclassProp("accessibility-view", ctx.isViewIncreased)("collapsed", ctx.collapsed);
|
|
543
600
|
i0.ɵɵproperty("ngClass.lt-sm", "mobile")("ngClass", ctx.menuSettings.menuVersion);
|
|
544
601
|
i0.ɵɵadvance(2);
|
|
545
602
|
i0.ɵɵproperty("fxLayoutAlign", ctx.collapsed ? "center center" : "space-between center");
|
|
546
603
|
i0.ɵɵadvance();
|
|
547
604
|
i0.ɵɵproperty("ngIf", !ctx.collapsed);
|
|
548
605
|
i0.ɵɵadvance();
|
|
549
|
-
i0.ɵɵproperty("libPlausibleEvent", ctx.collapsed ? ctx.EXPAND_PLAUSIBLE_EVENT : ctx.COLLAPSE_PLAUSIBLE_EVENT)("matTooltip", i0.ɵɵpipeBind1(
|
|
550
|
-
i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(
|
|
606
|
+
i0.ɵɵproperty("libPlausibleEvent", ctx.collapsed ? ctx.EXPAND_PLAUSIBLE_EVENT : ctx.COLLAPSE_PLAUSIBLE_EVENT)("matTooltip", i0.ɵɵpipeBind1(15, 42, ctx.collapsed ? "MENU.EXPAND" : "MENU.COLLAPSE"));
|
|
607
|
+
i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(16, 44, "ARIA_LABELS.MENU_TOGGLER"));
|
|
551
608
|
i0.ɵɵadvance(3);
|
|
552
609
|
i0.ɵɵproperty("ngClass.lt-sm", "mob-close-icon");
|
|
553
610
|
i0.ɵɵadvance(3);
|
|
554
611
|
i0.ɵɵtextInterpolate(ctx.collapsed ? "keyboard_double_arrow_right" : "keyboard_double_arrow_left");
|
|
555
612
|
i0.ɵɵadvance(2);
|
|
556
|
-
i0.ɵɵproperty("direction", ctx.direction)("isOpen", !ctx.collapsed)("active", ctx.active)("expandableMenuChildren", ctx.menuSettings == null ? null : ctx.menuSettings.expandableMenuChildren);
|
|
613
|
+
i0.ɵɵproperty("direction", ctx.direction)("isOpen", !ctx.collapsed)("active", ctx.active)("expandableMenuChildren", ctx.menuSettings == null ? null : ctx.menuSettings.expandableMenuChildren)("openExternalLinksInSameTab", ctx.menuSettings == null ? null : ctx.menuSettings.openExternalLinksInSameTab);
|
|
557
614
|
i0.ɵɵadvance();
|
|
558
615
|
i0.ɵɵproperty("isCollapsed", ctx.collapsed);
|
|
559
616
|
i0.ɵɵadvance();
|
|
560
|
-
i0.ɵɵconditional(ctx.useDefaultLanguageSwitcher && ctx.supportedLanguages.length > 1 ?
|
|
617
|
+
i0.ɵɵconditional(ctx.useDefaultLanguageSwitcher && ctx.supportedLanguages.length > 1 ? 24 : -1);
|
|
561
618
|
i0.ɵɵadvance(3);
|
|
562
619
|
i0.ɵɵproperty("userOptions", ctx.menuSettings.userOptions)("username", ctx.username)("collapsed", ctx.collapsed)("useLargeLoginButton", ctx.menuSettings == null ? null : ctx.menuSettings.useLargeLoginButton);
|
|
563
620
|
i0.ɵɵadvance();
|
|
564
|
-
i0.ɵɵconditional(ctx.footerItems.length ?
|
|
565
|
-
} }, 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
|
|
621
|
+
i0.ɵɵconditional(ctx.footerItems.length ? 28 : -1);
|
|
622
|
+
} }, 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:var(--base-100);border:1px solid var(--base-70)}.accessibility-view.menu-container[_ngcontent-%COMP%]:not(.collapsed), .mobile.menu-container[_ngcontent-%COMP%]:not(.collapsed){display:block!important;position:fixed;min-width:100vw;min-height:100dvh;z-index:1000} .mobile.menu-container.collapsed, .accessibility-view.menu-container.collapsed{display:none!important}button[_ngcontent-%COMP%]:has(.mob-close-icon){margin-right: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%] .collapsed .menu-item{padding:0!important;width:40px;height:40px;border-radius:50%!important}[_nghost-%COMP%] .active-menu-item{background-color:var(--base-95)!important}[_nghost-%COMP%] .menu-item-title{margin-left:12px}tld-menu-icon[_ngcontent-%COMP%]{margin-right:10px}[_nghost-%COMP%] button.collapse-btn .mat-mdc-button-persistent-ripple, [_nghost-%COMP%] button.toggler .mat-mdc-button-persistent-ripple{display:none} .cdk-overlay-container .child-menu, .cdk-overlay-container .profile-menu, .cdk-overlay-container .lang-menu{min-width:250px;margin:10px 0} .mat-mdc-menu-item .mat-icon{margin-right:5px!important} .collapsed .profile-wrapper{justify-content:center!important}.menu-footer[_ngcontent-%COMP%]{display:flex;justify-content:center;margin-bottom:20px;color:var(--base-40);font-size:.8125rem}", ".compact-menu menu-columns{margin-bottom:86px} .compact-menu .profile{margin-top:80px!important} .compact-menu .profile-icon{margin-left:10px!important;min-width:28px!important;height:28px!important;font-size:12px!important} .compact-menu .profile-arrow{margin-right:5px!important} .compact-menu .profile-name{margin-left:10px!important;font-size:.875rem!important;font-weight:600!important} .compact-menu .profile-wrapper{padding:6px 0!important;border-radius:16px!important;border:2px solid var(--base-70)} .compact-menu .menu-wrapper{position:relative;height:100%} .compact-menu .lang-switcher{position:absolute;bottom:0} .compact-menu .accessibility-btn{position:absolute;bottom:46px} .compact-menu .menu-item, .compact-menu .lang-switcher, .compact-menu .accessibility-btn{padding:8px 12px!important;border-radius:16px!important} .compact-menu .lang-switcher .menu-arrow{margin-right:-8px} .compact-menu .child-list{margin-left:24px;padding:3px 0} .compact-menu.collapsed .child-list{margin-left:0} .compact-menu.collapsed .accessibility-btn, .compact-menu.collapsed .lang-switcher{padding:0!important;border-radius:50%!important} .compact-menu tld-menu-item-link:not(:first-child){margin-top:0!important;margin-bottom:5px} .compact-menu tld-menu-item-link .title-content{font-weight:400!important}"] }); }
|
|
566
623
|
}
|
|
567
624
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SideNavMenuComponent, [{
|
|
568
625
|
type: Component,
|
|
569
|
-
args: [{ selector: 'lib-side-nav-menu', standalone: false, template: "
|
|
570
|
-
}], () => [{ type: i1.StrapiLinkService }, { type: i2.DOMService }, { type: MenuItemsService }], { username: [{
|
|
626
|
+
args: [{ selector: 'lib-side-nav-menu', standalone: false, template: "\t<div [fxHide]=\"!collapsed || collapsed && !isMobileRes && !isViewIncreased\" class=\"mobile-header\" [ngClass]=\"menuSettings.menuVersion\">\r\n\t\t<a\r\n\t\t\t[libPlausibleEvent]=\"LOGOCLICK_PLAUSIBLE_EVENT\"\r\n\t\t\tfxFlex=\"3.125em\"\r\n\t\t\t[href]=\"baseUrl\"\r\n\t\t\t[class.no-click]=\"menuSettings?.disableLogoNavigation\"\r\n\t\t\t[attr.aria-label]=\"'MENU.ARIA_LABELS.LOGO' | translate\"\r\n\t\t\t(click)=\"logoClick($event)\"\r\n\t\t\tfxLayoutAlign=\"start center\"\r\n\t\t>\r\n\t\t\t<img height=\"40\" width=\"40\" class=\"menu-logo\" [src]=\"menuLogoImage\" alt=\"logo\" />\r\n\t\t\t<span class=\"menu-product-name\">\r\n\t\t\t\t{{ productName }}\r\n\t\t\t</span>\r\n\t\t</a>\r\n\r\n\t\t<button\r\n\t\t\tmat-icon-button\r\n\t\t\tclass=\"toggler\"\r\n\t\t\t[attr.aria-label]=\"'ARIA_LABELS.MENU_TOGGLER' | translate\"\r\n\t\t\t[libPlausibleEvent]=\"collapsed ? EXPAND_PLAUSIBLE_EVENT : COLLAPSE_PLAUSIBLE_EVENT\"\r\n\t\t\t(click)=\"toggleCollapse()\"\r\n\t\t>\r\n\t\t\t<mat-icon>menu</mat-icon>\r\n\t\t</button>\r\n\t</div>\r\n\r\n<div \r\n\tclass=\"menu-container\"\r\n\tfxLayout=\"column\" \r\n\t[ngClass.lt-sm]=\"'mobile'\"\r\n\t[class.accessibility-view]=\"isViewIncreased\"\r\n\t[style.width]=\"sideNavWidth\" \r\n\t[class.collapsed]=\"collapsed\" \r\n\t[ngClass]=\"menuSettings.menuVersion\"\r\n>\r\n\t<div class=\"content\" fxLayout=\"column\" fxFlexFill>\r\n\t\t<div class=\"menu-container-header\" fxLayout=\"row\" [fxLayoutAlign]=\"collapsed ? 'center center' : 'space-between center'\">\r\n\t\t\t<a\r\n\t\t\t\t*ngIf=\"!collapsed\"\r\n\t\t\t\t[libPlausibleEvent]=\"LOGOCLICK_PLAUSIBLE_EVENT\"\r\n\t\t\t\tfxFlex=\"3.125em\"\r\n\t\t\t\t[class.no-click]=\"menuSettings?.disableLogoNavigation\"\r\n\t\t\t\t[href]=\"baseUrl\"\r\n\t\t\t\t[attr.aria-label]=\"'MENU.ARIA_LABELS.LOGO' | translate\"\r\n\t\t\t\t(click)=\"logoClick($event)\"\r\n\t\t\t\tfxLayoutAlign=\"start center\"\r\n\t\t\t>\r\n\t\t\t\t<img height=\"40\" width=\"40\" class=\"menu-logo\" [src]=\"menuLogoImage\" alt=\"logo\" />\r\n\t\t\t\t<span class=\"menu-product-name\">\r\n\t\t\t\t\t{{ productName }}\r\n\t\t\t\t</span>\r\n\t\t\t</a>\r\n\r\n\t\t\t<button\r\n\t\t\t\tmat-icon-button\r\n\t\t\t\tclass=\"toggler\"\r\n\t\t\t\t[attr.aria-label]=\"'ARIA_LABELS.MENU_TOGGLER' | translate\"\r\n\t\t\t\t[libPlausibleEvent]=\"collapsed ? EXPAND_PLAUSIBLE_EVENT : COLLAPSE_PLAUSIBLE_EVENT\"\r\n\t\t\t\t[matTooltip]=\"(collapsed ? 'MENU.EXPAND' : 'MENU.COLLAPSE') | translate\"\r\n\t\t\t\t(click)=\"toggleCollapse()\"\r\n\t\t\t>\r\n\t\t\t\t<mat-icon fxHide.gt-xs [ngClass.lt-sm]=\"'mob-close-icon'\">close</mat-icon>\r\n\t\t\t\t<mat-icon fxHide.lt-sm>{{ collapsed ? \"keyboard_double_arrow_right\" : \"keyboard_double_arrow_left\" }}</mat-icon>\r\n\t\t\t</button>\r\n\t\t</div>\r\n\r\n\t\t<div class=\"menu-wrapper\" fxLayout=\"column\">\r\n\t\t\t<menu-columns\r\n\t\t\t\t(toggleCollapseEvent)=\"toggleCollapse()\"\r\n\t\t\t\t[direction]=\"direction\"\r\n\t\t\t\trole=\"navigation\"\r\n\t\t\t\t[isOpen]=\"!collapsed\"\r\n\t\t\t\t[active]=\"active\"\r\n\t\t\t\t[expandableMenuChildren]=\"menuSettings?.expandableMenuChildren\"\r\n\t\t\t\t[openExternalLinksInSameTab]=\"menuSettings?.openExternalLinksInSameTab\"\r\n\t\t\t></menu-columns>\r\n\r\n\t\t\t<lib-menu-accessibility [isCollapsed]=\"collapsed\"></lib-menu-accessibility>\r\n\r\n\t\t\t@if (useDefaultLanguageSwitcher && supportedLanguages.length > 1) {\r\n\t\t\t<lib-menu-lang-switcher [isCollapsed]=\"collapsed\" [languages]=\"supportedLanguages\" (changeLanguageEvent)=\"changeLanguage($event)\"></lib-menu-lang-switcher>\r\n\t\t\t}\r\n\t\t</div>\r\n\t\t<div fxFlex fxLayout=\"column\">\r\n\t\t\t<ng-content></ng-content>\r\n\t\t</div>\r\n\r\n\t\t<lib-menu-profile \r\n\t\t\t[userOptions]=\"menuSettings.userOptions\" \r\n\t\t\t[username]=\"username\" \r\n\t\t\t[collapsed]=\"collapsed\" \r\n\t\t\t[useLargeLoginButton]=\"menuSettings?.useLargeLoginButton\"\r\n\t\t\t(linkCallbackEvent)=\"linkCallback($event)\"\r\n\t\t\t(loginEvent)=\"login()\"\t\r\n\t\t>\r\n\t\t</lib-menu-profile>\r\n\r\n @if (footerItems.length) {\r\n <div class=\"menu-footer\">\r\n @if (!collapsed) {\r\n @for (item of footerItems; let i = $index; track i) {\r\n <a [href]=\"item.link\" target=\"_blank\">{{ item.title }}</a>\r\n \r\n @if (i !== footerItems.length - 1) { \r\n | \r\n } \r\n }\r\n }\r\n </div>\r\n }\r\n\t</div>\r\n</div>\r\n", styles: ["a{text-decoration:none}.no-click{pointer-events:none!important}.mobile-header{display:flex;justify-content:space-between;padding:23px 27px;background-color:var(--base-100);border:1px solid var(--base-70)}.accessibility-view.menu-container:not(.collapsed),.mobile.menu-container:not(.collapsed){display:block!important;position:fixed;min-width:100vw;min-height:100dvh;z-index:1000}::ng-deep .mobile.menu-container.collapsed,::ng-deep .accessibility-view.menu-container.collapsed{display:none!important}button:has(.mob-close-icon){margin-right: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 .collapsed .menu-item{padding:0!important;width:40px;height:40px;border-radius:50%!important}:host ::ng-deep .active-menu-item{background-color:var(--base-95)!important}:host ::ng-deep .menu-item-title{margin-left:12px}tld-menu-icon{margin-right:10px}:host::ng-deep button.collapse-btn .mat-mdc-button-persistent-ripple,:host::ng-deep button.toggler .mat-mdc-button-persistent-ripple{display:none}::ng-deep .cdk-overlay-container .child-menu,::ng-deep .cdk-overlay-container .profile-menu,::ng-deep .cdk-overlay-container .lang-menu{min-width:250px;margin:10px 0}::ng-deep .mat-mdc-menu-item .mat-icon{margin-right:5px!important}::ng-deep .collapsed .profile-wrapper{justify-content:center!important}.menu-footer{display:flex;justify-content:center;margin-bottom:20px;color:var(--base-40);font-size:.8125rem}\n", "::ng-deep .compact-menu menu-columns{margin-bottom:86px}::ng-deep .compact-menu .profile{margin-top:80px!important}::ng-deep .compact-menu .profile-icon{margin-left:10px!important;min-width:28px!important;height:28px!important;font-size:12px!important}::ng-deep .compact-menu .profile-arrow{margin-right:5px!important}::ng-deep .compact-menu .profile-name{margin-left:10px!important;font-size:.875rem!important;font-weight:600!important}::ng-deep .compact-menu .profile-wrapper{padding:6px 0!important;border-radius:16px!important;border:2px solid var(--base-70)}::ng-deep .compact-menu .menu-wrapper{position:relative;height:100%}::ng-deep .compact-menu .lang-switcher{position:absolute;bottom:0}::ng-deep .compact-menu .accessibility-btn{position:absolute;bottom:46px}::ng-deep .compact-menu .menu-item,::ng-deep .compact-menu .lang-switcher,::ng-deep .compact-menu .accessibility-btn{padding:8px 12px!important;border-radius:16px!important}::ng-deep .compact-menu .lang-switcher .menu-arrow{margin-right:-8px}::ng-deep .compact-menu .child-list{margin-left:24px;padding:3px 0}::ng-deep .compact-menu.collapsed .child-list{margin-left:0}::ng-deep .compact-menu.collapsed .accessibility-btn,::ng-deep .compact-menu.collapsed .lang-switcher{padding:0!important;border-radius:50%!important}::ng-deep .compact-menu tld-menu-item-link:not(:first-child){margin-top:0!important;margin-bottom:5px}::ng-deep .compact-menu tld-menu-item-link .title-content{font-weight:400!important}\n"] }]
|
|
627
|
+
}], () => [{ type: i1.StrapiLinkService }, { type: i2.DOMService }, { type: MenuItemsService }, { type: MenuAccessibilityService }], { username: [{
|
|
571
628
|
type: Input
|
|
572
629
|
}], menuSettings: [{
|
|
573
630
|
type: Input
|
|
@@ -582,7 +639,7 @@ class SideNavMenuComponent extends NavBaseComponent {
|
|
|
582
639
|
}], loginEvent: [{
|
|
583
640
|
type: Output
|
|
584
641
|
}] }); })();
|
|
585
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SideNavMenuComponent, { className: "SideNavMenuComponent", filePath: "lib/components/side-nav-menu/side-nav-menu.component.ts", lineNumber:
|
|
642
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SideNavMenuComponent, { className: "SideNavMenuComponent", filePath: "lib/components/side-nav-menu/side-nav-menu.component.ts", lineNumber: 17 }); })();
|
|
586
643
|
|
|
587
644
|
var MenuLayoutDirection;
|
|
588
645
|
(function (MenuLayoutDirection) {
|
|
@@ -654,7 +711,7 @@ function MenuItemLinkComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
|
|
|
654
711
|
const ctx_r1 = i0.ɵɵnextContext();
|
|
655
712
|
const linkContent_r3 = i0.ɵɵreference(3);
|
|
656
713
|
i0.ɵɵclassProp("text-center", ctx_r1.menuItemLayout === "column")("active-menu-item", ctx_r1.menuItem === ctx_r1.activeItem);
|
|
657
|
-
i0.ɵɵproperty("matTooltip", !ctx_r1.labelsVisible ? i0.ɵɵpipeBind1(1,
|
|
714
|
+
i0.ɵɵproperty("matTooltip", !ctx_r1.labelsVisible ? i0.ɵɵpipeBind1(1, 12, ctx_r1.menuItem.title) : "")("fxLayout", ctx_r1.menuItemLayout)("fxLayoutAlign", ctx_r1.menuLayoutDirection)("libPlausibleEvent", ctx_r1.menuItem.plausibleEvent)("href", i0.ɵɵpipeBind1(2, 14, ctx_r1.href), i0.ɵɵsanitizeUrl)("target", ctx_r1.openInSameTab ? "_self" : "_blank")("ngClass.lt-md", "mobile");
|
|
658
715
|
i0.ɵɵadvance(3);
|
|
659
716
|
i0.ɵɵproperty("ngTemplateOutlet", linkContent_r3);
|
|
660
717
|
} }
|
|
@@ -732,8 +789,8 @@ class MenuItemLinkComponent {
|
|
|
732
789
|
this.placeholderService.unregister(this.placeholderServiceId);
|
|
733
790
|
}
|
|
734
791
|
static { this.ɵfac = function MenuItemLinkComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MenuItemLinkComponent)(i0.ɵɵdirectiveInject(i1.StrapiLinkService), i0.ɵɵdirectiveInject(i1.StrapiVariablesService)); }; }
|
|
735
|
-
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MenuItemLinkComponent, selectors: [["tld-menu-item-link"]], inputs: { direction: "direction", labelsVisible: "labelsVisible", activeItem: "activeItem", showIcons: "showIcons", menuItem: "menuItem" }, standalone: false, decls: 4, vars: 1, consts: [["linkContent", ""], ["matTooltipClass", "menu-tooltip", "matTooltipPosition", "after",
|
|
736
|
-
i0.ɵɵconditionalCreate(0, MenuItemLinkComponent_Conditional_0_Template, 4,
|
|
792
|
+
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MenuItemLinkComponent, selectors: [["tld-menu-item-link"]], inputs: { direction: "direction", labelsVisible: "labelsVisible", activeItem: "activeItem", showIcons: "showIcons", openInSameTab: "openInSameTab", menuItem: "menuItem" }, standalone: false, decls: 4, vars: 1, consts: [["linkContent", ""], ["matTooltipClass", "menu-tooltip", "matTooltipPosition", "after", 1, "text-m", "menu-item", 3, "matTooltip", "fxLayout", "fxLayoutAlign", "libPlausibleEvent", "href", "target", "ngClass.lt-md", "text-center", "active-menu-item"], ["matTooltipClass", "menu-tooltip", "matTooltipPosition", "after", "target", "_self", "routerLinkActive", "active-menu-item", 1, "text-m", "menu-item", 3, "matTooltip", "fxLayout", "fxLayoutAlign", "libPlausibleEvent", "href", "ngClass.lt-md", "text-center", "routerLink", "routerLinkActiveOptions"], ["matTooltipClass", "menu-tooltip", "matTooltipPosition", "after", 1, "text-m", "menu-item", 3, "click", "matTooltip", "fxLayout", "fxLayoutAlign", "libPlausibleEvent", "href", "target", "ngClass.lt-md"], [4, "ngTemplateOutlet"], ["matTooltipClass", "menu-tooltip", "matTooltipPosition", "after", "target", "_self", "routerLinkActive", "active-menu-item", 1, "text-m", "menu-item", 3, "matTooltip", "fxLayout", "fxLayoutAlign", "libPlausibleEvent", "href", "ngClass.lt-md", "routerLink", "routerLinkActiveOptions"], [4, "ngIf"], ["class", "menu-item-title", 4, "ngIf"], [3, "menuItem"], [1, "menu-item-title"], [1, "title-content"]], template: function MenuItemLinkComponent_Template(rf, ctx) { if (rf & 1) {
|
|
793
|
+
i0.ɵɵconditionalCreate(0, MenuItemLinkComponent_Conditional_0_Template, 4, 16, "a", 1)(1, MenuItemLinkComponent_Conditional_1_Template, 4, 15, "a", 2);
|
|
737
794
|
i0.ɵɵtemplate(2, MenuItemLinkComponent_ng_template_2_Template, 2, 2, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
|
|
738
795
|
} if (rf & 2) {
|
|
739
796
|
i0.ɵɵconditional(ctx.menuItem.externalLink ? 0 : 1);
|
|
@@ -741,7 +798,7 @@ class MenuItemLinkComponent {
|
|
|
741
798
|
}
|
|
742
799
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuItemLinkComponent, [{
|
|
743
800
|
type: Component,
|
|
744
|
-
args: [{ selector: 'tld-menu-item-link', standalone: false, template: "@if (menuItem.externalLink) {\r\n<a\r\n\tclass=\"text-m menu-item\"\r\n\tmatTooltipClass=\"menu-tooltip\"\r\n\tmatTooltipPosition=\"after\"\r\n\t[matTooltip]=\"!labelsVisible ? (menuItem.title | translate) : ''\"\r\n\t[fxLayout]=\"menuItemLayout\"\r\n\t[fxLayoutAlign]=\"menuLayoutDirection\"\r\n\t[libPlausibleEvent]=\"menuItem.plausibleEvent\"\r\n\t[href]=\"href | translate\"\r\n\
|
|
801
|
+
args: [{ selector: 'tld-menu-item-link', standalone: false, template: "@if (menuItem.externalLink) {\r\n<a\r\n\tclass=\"text-m menu-item\"\r\n\tmatTooltipClass=\"menu-tooltip\"\r\n\tmatTooltipPosition=\"after\"\r\n\t[matTooltip]=\"!labelsVisible ? (menuItem.title | translate) : ''\"\r\n\t[fxLayout]=\"menuItemLayout\"\r\n\t[fxLayoutAlign]=\"menuLayoutDirection\"\r\n\t[libPlausibleEvent]=\"menuItem.plausibleEvent\"\r\n\t[href]=\"href | translate\"\r\n\t[target]=\"openInSameTab ? '_self' : '_blank'\"\r\n\t[ngClass.lt-md]=\"'mobile'\"\r\n\t[class.text-center]=\"menuItemLayout === 'column'\"\r\n\t[class.active-menu-item]=\"menuItem === activeItem\"\r\n\t(click)=\"linkClick($event, menuItem)\"\r\n>\r\n\t<ng-container *ngTemplateOutlet=\"linkContent\"> </ng-container>\r\n</a>\r\n} @else {\r\n<a\r\n\tclass=\"text-m menu-item\"\r\n\tmatTooltipClass=\"menu-tooltip\"\r\n\tmatTooltipPosition=\"after\"\r\n\t[matTooltip]=\"!labelsVisible ? (menuItem.title | translate) : ''\"\r\n\t[fxLayout]=\"menuItemLayout\"\r\n\t[fxLayoutAlign]=\"menuLayoutDirection\"\r\n\t[libPlausibleEvent]=\"menuItem.plausibleEvent\"\r\n\t[href]=\"href | translate\"\r\n\ttarget=\"_self\"\r\n\t[ngClass.lt-md]=\"'mobile'\"\r\n\t[class.text-center]=\"menuItemLayout === 'column'\"\r\n [routerLink]=\"menuItem.link\"\r\n [routerLinkActiveOptions]=\"routerLinkActiveOptions\"\r\n routerLinkActive=\"active-menu-item\"\r\n>\r\n\t<ng-container *ngTemplateOutlet=\"linkContent\"> </ng-container>\r\n</a>\r\n\r\n}\r\n\r\n<ng-template #linkContent>\r\n\t<ng-container *ngIf=\"showIcons && menuItem.icon\">\r\n\t\t<tld-menu-icon [menuItem]=\"menuItem\"></tld-menu-icon>\r\n\t</ng-container>\r\n\t<span *ngIf=\"labelsVisible\" class=\"menu-item-title\">\r\n\t\t<span class=\"title-content\" [attr.content]=\"menuItem.title | translate\">\r\n\t\t\t{{ menuItem.title | translate }}\r\n\t\t</span>\r\n\t</span>\r\n</ng-template>\r\n", styles: [":host{width:100%}.mobile .menu-item-title{margin-left:5px}\n"] }]
|
|
745
802
|
}], () => [{ type: i1.StrapiLinkService }, { type: i1.StrapiVariablesService }], { direction: [{
|
|
746
803
|
type: Input
|
|
747
804
|
}], labelsVisible: [{
|
|
@@ -750,6 +807,8 @@ class MenuItemLinkComponent {
|
|
|
750
807
|
type: Input
|
|
751
808
|
}], showIcons: [{
|
|
752
809
|
type: Input
|
|
810
|
+
}], openInSameTab: [{
|
|
811
|
+
type: Input
|
|
753
812
|
}], menuItem: [{
|
|
754
813
|
type: Input
|
|
755
814
|
}] }); })();
|
|
@@ -1006,7 +1065,7 @@ function MenuItemWithChildrenComponent_ng_template_4_Template(rf, ctx) { if (rf
|
|
|
1006
1065
|
} if (rf & 2) {
|
|
1007
1066
|
const menuItem_r13 = ctx.menuItem;
|
|
1008
1067
|
const ctx_r1 = i0.ɵɵnextContext();
|
|
1009
|
-
i0.ɵɵproperty("ngClass.lt-md", "mob-menu-item")("menuItem", menuItem_r13)("direction", ctx_r1.direction)("labelsVisible", true)("activeItem", ctx_r1.activeItem)("showIcons", ctx_r1.showIcons);
|
|
1068
|
+
i0.ɵɵproperty("ngClass.lt-md", "mob-menu-item")("menuItem", menuItem_r13)("direction", ctx_r1.direction)("labelsVisible", true)("activeItem", ctx_r1.activeItem)("showIcons", ctx_r1.showIcons)("openInSameTab", ctx_r1.openInSameTab);
|
|
1010
1069
|
} }
|
|
1011
1070
|
class MenuItemWithChildrenComponent {
|
|
1012
1071
|
constructor() {
|
|
@@ -1031,16 +1090,16 @@ class MenuItemWithChildrenComponent {
|
|
|
1031
1090
|
this.toggleExpand.next(menuItem);
|
|
1032
1091
|
}
|
|
1033
1092
|
static { this.ɵfac = function MenuItemWithChildrenComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MenuItemWithChildrenComponent)(); }; }
|
|
1034
|
-
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MenuItemWithChildrenComponent, selectors: [["lib-menu-item-with-children"]], inputs: { menuItem: "menuItem", labelsVisible: "labelsVisible", showIcons: "showIcons", menuLayoutDirection: "menuLayoutDirection", menuItemLayout: "menuItemLayout", activeItem: "activeItem", direction: "direction", expandableMenuChildren: "expandableMenuChildren" }, outputs: { openMenu: "openMenu", toggleExpand: "toggleExpand" }, standalone: false, decls: 6, vars: 1, consts: [["menuItemBtn", ""], ["menuItemLink", ""], ["iconDown", ""], ["state", "matMenuTrigger"], ["menu", "matMenu"], ["matTooltipClass", "menu-tooltip", "matTooltipPosition", "after", 1, "text-m", "menu-item", "menu-parent-item", 3, "click", "matTooltip", "fxLayout", "fxLayoutAlign", "ngClass.lt-md"], [4, "ngIf"], [1, "child-list"], [3, "menuItem"], [1, "menu-item-title"], [1, "title-content"], ["class", "material-icons spin arrow-icon", 4, "ngIf", "ngIfElse"], [1, "material-icons", "spin", "arrow-icon"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], ["matTooltipClass", "menu-tooltip", "matTooltipPosition", "after", 1, "text-m", "menu-item", "menu-parent-item", 3, "click", "matTooltip", "fxLayout", "fxLayoutAlign", "matMenuTriggerFor", "ngClass.lt-md"], [1, "child-menu"], ["mat-menu-item", ""], [3, "ngClass.lt-md", "menuItem", "direction", "activeItem", 4, "ngIf"], [3, "ngClass.lt-md", "menuItem", "direction", "activeItem"], [3, "ngClass.lt-md", "menuItem", "direction", "labelsVisible", "activeItem", "showIcons"]], template: function MenuItemWithChildrenComponent_Template(rf, ctx) { if (rf & 1) {
|
|
1093
|
+
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MenuItemWithChildrenComponent, selectors: [["lib-menu-item-with-children"]], inputs: { menuItem: "menuItem", labelsVisible: "labelsVisible", showIcons: "showIcons", menuLayoutDirection: "menuLayoutDirection", menuItemLayout: "menuItemLayout", activeItem: "activeItem", direction: "direction", expandableMenuChildren: "expandableMenuChildren", openInSameTab: "openInSameTab" }, outputs: { openMenu: "openMenu", toggleExpand: "toggleExpand" }, standalone: false, decls: 6, vars: 1, consts: [["menuItemBtn", ""], ["menuItemLink", ""], ["iconDown", ""], ["state", "matMenuTrigger"], ["menu", "matMenu"], ["matTooltipClass", "menu-tooltip", "matTooltipPosition", "after", 1, "text-m", "menu-item", "menu-parent-item", 3, "click", "matTooltip", "fxLayout", "fxLayoutAlign", "ngClass.lt-md"], [4, "ngIf"], [1, "child-list"], [3, "menuItem"], [1, "menu-item-title"], [1, "title-content"], ["class", "material-icons spin arrow-icon", 4, "ngIf", "ngIfElse"], [1, "material-icons", "spin", "arrow-icon"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], ["matTooltipClass", "menu-tooltip", "matTooltipPosition", "after", 1, "text-m", "menu-item", "menu-parent-item", 3, "click", "matTooltip", "fxLayout", "fxLayoutAlign", "matMenuTriggerFor", "ngClass.lt-md"], [1, "child-menu"], ["mat-menu-item", ""], [3, "ngClass.lt-md", "menuItem", "direction", "activeItem", 4, "ngIf"], [3, "ngClass.lt-md", "menuItem", "direction", "activeItem"], [3, "ngClass.lt-md", "menuItem", "direction", "labelsVisible", "activeItem", "showIcons", "openInSameTab"]], template: function MenuItemWithChildrenComponent_Template(rf, ctx) { if (rf & 1) {
|
|
1035
1094
|
i0.ɵɵconditionalCreate(0, MenuItemWithChildrenComponent_Conditional_0_Template, 7, 15)(1, MenuItemWithChildrenComponent_Conditional_1_Template, 9, 14);
|
|
1036
|
-
i0.ɵɵtemplate(2, MenuItemWithChildrenComponent_ng_template_2_Template, 1, 1, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor)(4, MenuItemWithChildrenComponent_ng_template_4_Template, 1,
|
|
1095
|
+
i0.ɵɵtemplate(2, MenuItemWithChildrenComponent_ng_template_2_Template, 1, 1, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor)(4, MenuItemWithChildrenComponent_ng_template_4_Template, 1, 7, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor);
|
|
1037
1096
|
} if (rf & 2) {
|
|
1038
1097
|
i0.ɵɵconditional(ctx.expandableMenuChildren ? 0 : 1);
|
|
1039
1098
|
} }, dependencies: [i1$2.DefaultLayoutDirective, i1$2.DefaultLayoutAlignDirective, i2$2.DefaultClassDirective, i3.NgIf, i3.NgTemplateOutlet, i4.MatTooltip, i5.MatMenu, i5.MatMenuItem, i5.MatMenuTrigger, MenuIconComponent, MenuItemLinkComponent, MenuItemBtnComponent, i9.TranslatePipe], styles: [".spin[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_spinArrow .3s forwards}@keyframes _ngcontent-%COMP%_spinArrow{to{transform:rotate(180deg)}}[_nghost-%COMP%]{width:100%}.child-list[_ngcontent-%COMP%]{max-height:0;opacity:0;overflow:hidden;transition:max-height .3s,opacity .3s}.child-list.open[_ngcontent-%COMP%]{max-height:500px;opacity:1;overflow:hidden;transition:max-height .3s,opacity .3s}"] }); }
|
|
1040
1099
|
}
|
|
1041
1100
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuItemWithChildrenComponent, [{
|
|
1042
1101
|
type: Component,
|
|
1043
|
-
args: [{ selector: 'lib-menu-item-with-children', standalone: false, template: "@if (expandableMenuChildren) {\r\n<button\r\n\tmatTooltipClass=\"menu-tooltip\"\r\n\tmatTooltipPosition=\"after\"\r\n\t[matTooltip]=\"!labelsVisible ? (menuItem.title | translate) : ''\"\r\n\t[fxLayout]=\"menuItemLayout\"\r\n\t[fxLayoutAlign]=\"menuLayoutDirection\"\r\n\t[attr.id]=\"menuItem.customId\"\r\n\tclass=\"text-m menu-item menu-parent-item\"\r\n\t[class.menu-labels-visible]=\"labelsVisible\"\r\n\t[class.active-menu-item]=\"activeItem?.link && menuItem === activeItem\"\r\n\t[ngClass.lt-md]=\"'mob-menu-item'\"\r\n\t(click)=\"toggleItemExpand(menuItem)\"\r\n>\r\n\t<ng-container *ngIf=\"showIcons && menuItem.icon\">\r\n\t\t<tld-menu-icon [menuItem]=\"menuItem\"></tld-menu-icon>\r\n\t</ng-container>\r\n\t<ng-container *ngIf=\"labelsVisible\">\r\n\t\t<span class=\"menu-item-title\">\r\n\t\t\t<span class=\"title-content\">{{ menuItem.title | translate }}</span></span\r\n\t\t>\r\n\t\t<ng-container *ngIf=\"menuItem.children\">\r\n\t\t\t<span *ngIf=\"menuItem.expanded; else iconDown\" class=\"material-icons spin arrow-icon\">keyboard_arrow_down</span>\r\n\r\n\t\t\t<ng-template #iconDown>\r\n\t\t\t\t<span class=\"material-icons spin arrow-icon\"> keyboard_arrow_up </span>\r\n\t\t\t</ng-template>\r\n\t\t</ng-container>\r\n\t</ng-container>\r\n</button>\r\n\r\n\t\t<div class=\"child-list\" [class.open]=\"menuItem.expanded && labelsVisible\">\r\n\t\t\t@for (child of menuItem.children; track $index) {\r\n\t\t\t\t<ng-container *ngTemplateOutlet=\"menuItem.clickAction ? menuItemBtn : menuItemLink; context: { menuItem: child }\"> </ng-container>\r\n\t\t\t}\r\n\t\t</div>\r\n} @else {\r\n<button\r\n\tmatTooltipClass=\"menu-tooltip\"\r\n\tmatTooltipPosition=\"after\"\r\n\t[matTooltip]=\"!labelsVisible ? (menuItem.title | translate) : ''\"\r\n\t[fxLayout]=\"menuItemLayout\"\r\n\t[fxLayoutAlign]=\"menuLayoutDirection\"\r\n\t#state=\"matMenuTrigger\"\r\n\t[matMenuTriggerFor]=\"menu\"\r\n\t[attr.id]=\"menuItem.customId\"\r\n\tclass=\"text-m menu-item menu-parent-item\"\r\n\t[class.menu-labels-visible]=\"labelsVisible\"\r\n\t[class.active-menu-item]=\"(activeItem?.link && menuItem === activeItem) || state.menuOpen\"\r\n\t[ngClass.lt-md]=\"'mob-menu-item'\"\r\n\t(click)=\"toggleMenuExpand($event, menuItem)\"\r\n>\r\n\t<ng-container *ngIf=\"showIcons && menuItem.icon\">\r\n\t\t<tld-menu-icon [menuItem]=\"menuItem\"></tld-menu-icon>\r\n\t</ng-container>\r\n\t<ng-container *ngIf=\"labelsVisible\">\r\n\t\t<span class=\"menu-item-title\">\r\n\t\t\t<span class=\"title-content\">{{ menuItem.title | translate }}</span></span\r\n\t\t>\r\n\t\t<ng-container *ngIf=\"menuItem.showChildren && menuItem.children\">\r\n\t\t\t<span *ngIf=\"state.menuOpen; else iconDown\" class=\"material-icons spin arrow-icon\">keyboard_arrow_down</span>\r\n\r\n\t\t\t<ng-template #iconDown>\r\n\t\t\t\t<span class=\"material-icons spin arrow-icon\"> keyboard_arrow_up </span>\r\n\t\t\t</ng-template>\r\n\t\t</ng-container>\r\n\t</ng-container>\r\n</button>\r\n<mat-menu #menu=\"matMenu\" class=\"child-menu\">\r\n\t@for (child of menuItem.children; track $index) {\r\n\t<div mat-menu-item>\r\n\t\t<ng-container *ngTemplateOutlet=\"menuItem.clickAction ? menuItemBtn : menuItemLink; context: { menuItem: child }\"> </ng-container>\r\n\t</div>\r\n\t}\r\n</mat-menu>\r\n}\r\n\r\n<ng-template #menuItemBtn let-menuItem=\"menuItem\">\r\n\t<lib-menu-item-btn *ngIf=\"labelsVisible\" [ngClass.lt-md]=\"'mob-menu-item'\" [menuItem]=\"menuItem\" [direction]=\"direction\" [activeItem]=\"activeItem\"></lib-menu-item-btn>\r\n</ng-template>\r\n\r\n<ng-template #menuItemLink let-menuItem=\"menuItem\">\r\n\t<tld-menu-item-link\r\n\t\t[ngClass.lt-md]=\"'mob-menu-item'\"\r\n\t\t[menuItem]=\"menuItem\"\r\n\t\t[direction]=\"direction\"\r\n\t\t[labelsVisible]=\"true\"\r\n\t\t[activeItem]=\"activeItem\"\r\n\t\t[showIcons]=\"showIcons\"\r\n\t></tld-menu-item-link>\r\n</ng-template>\r\n", styles: [".spin{animation:spinArrow .3s forwards}@keyframes spinArrow{to{transform:rotate(180deg)}}:host{width:100%}.child-list{max-height:0;opacity:0;overflow:hidden;transition:max-height .3s,opacity .3s}.child-list.open{max-height:500px;opacity:1;overflow:hidden;transition:max-height .3s,opacity .3s}\n"] }]
|
|
1102
|
+
args: [{ selector: 'lib-menu-item-with-children', standalone: false, template: "@if (expandableMenuChildren) {\r\n<button\r\n\tmatTooltipClass=\"menu-tooltip\"\r\n\tmatTooltipPosition=\"after\"\r\n\t[matTooltip]=\"!labelsVisible ? (menuItem.title | translate) : ''\"\r\n\t[fxLayout]=\"menuItemLayout\"\r\n\t[fxLayoutAlign]=\"menuLayoutDirection\"\r\n\t[attr.id]=\"menuItem.customId\"\r\n\tclass=\"text-m menu-item menu-parent-item\"\r\n\t[class.menu-labels-visible]=\"labelsVisible\"\r\n\t[class.active-menu-item]=\"activeItem?.link && menuItem === activeItem\"\r\n\t[ngClass.lt-md]=\"'mob-menu-item'\"\r\n\t(click)=\"toggleItemExpand(menuItem)\"\r\n>\r\n\t<ng-container *ngIf=\"showIcons && menuItem.icon\">\r\n\t\t<tld-menu-icon [menuItem]=\"menuItem\"></tld-menu-icon>\r\n\t</ng-container>\r\n\t<ng-container *ngIf=\"labelsVisible\">\r\n\t\t<span class=\"menu-item-title\">\r\n\t\t\t<span class=\"title-content\">{{ menuItem.title | translate }}</span></span\r\n\t\t>\r\n\t\t<ng-container *ngIf=\"menuItem.children\">\r\n\t\t\t<span *ngIf=\"menuItem.expanded; else iconDown\" class=\"material-icons spin arrow-icon\">keyboard_arrow_down</span>\r\n\r\n\t\t\t<ng-template #iconDown>\r\n\t\t\t\t<span class=\"material-icons spin arrow-icon\"> keyboard_arrow_up </span>\r\n\t\t\t</ng-template>\r\n\t\t</ng-container>\r\n\t</ng-container>\r\n</button>\r\n\r\n\t\t<div class=\"child-list\" [class.open]=\"menuItem.expanded && labelsVisible\">\r\n\t\t\t@for (child of menuItem.children; track $index) {\r\n\t\t\t\t<ng-container *ngTemplateOutlet=\"menuItem.clickAction ? menuItemBtn : menuItemLink; context: { menuItem: child }\"> </ng-container>\r\n\t\t\t}\r\n\t\t</div>\r\n} @else {\r\n<button\r\n\tmatTooltipClass=\"menu-tooltip\"\r\n\tmatTooltipPosition=\"after\"\r\n\t[matTooltip]=\"!labelsVisible ? (menuItem.title | translate) : ''\"\r\n\t[fxLayout]=\"menuItemLayout\"\r\n\t[fxLayoutAlign]=\"menuLayoutDirection\"\r\n\t#state=\"matMenuTrigger\"\r\n\t[matMenuTriggerFor]=\"menu\"\r\n\t[attr.id]=\"menuItem.customId\"\r\n\tclass=\"text-m menu-item menu-parent-item\"\r\n\t[class.menu-labels-visible]=\"labelsVisible\"\r\n\t[class.active-menu-item]=\"(activeItem?.link && menuItem === activeItem) || state.menuOpen\"\r\n\t[ngClass.lt-md]=\"'mob-menu-item'\"\r\n\t(click)=\"toggleMenuExpand($event, menuItem)\"\r\n>\r\n\t<ng-container *ngIf=\"showIcons && menuItem.icon\">\r\n\t\t<tld-menu-icon [menuItem]=\"menuItem\"></tld-menu-icon>\r\n\t</ng-container>\r\n\t<ng-container *ngIf=\"labelsVisible\">\r\n\t\t<span class=\"menu-item-title\">\r\n\t\t\t<span class=\"title-content\">{{ menuItem.title | translate }}</span></span\r\n\t\t>\r\n\t\t<ng-container *ngIf=\"menuItem.showChildren && menuItem.children\">\r\n\t\t\t<span *ngIf=\"state.menuOpen; else iconDown\" class=\"material-icons spin arrow-icon\">keyboard_arrow_down</span>\r\n\r\n\t\t\t<ng-template #iconDown>\r\n\t\t\t\t<span class=\"material-icons spin arrow-icon\"> keyboard_arrow_up </span>\r\n\t\t\t</ng-template>\r\n\t\t</ng-container>\r\n\t</ng-container>\r\n</button>\r\n<mat-menu #menu=\"matMenu\" class=\"child-menu\">\r\n\t@for (child of menuItem.children; track $index) {\r\n\t<div mat-menu-item>\r\n\t\t<ng-container *ngTemplateOutlet=\"menuItem.clickAction ? menuItemBtn : menuItemLink; context: { menuItem: child }\"> </ng-container>\r\n\t</div>\r\n\t}\r\n</mat-menu>\r\n}\r\n\r\n<ng-template #menuItemBtn let-menuItem=\"menuItem\">\r\n\t<lib-menu-item-btn *ngIf=\"labelsVisible\" [ngClass.lt-md]=\"'mob-menu-item'\" [menuItem]=\"menuItem\" [direction]=\"direction\" [activeItem]=\"activeItem\"></lib-menu-item-btn>\r\n</ng-template>\r\n\r\n<ng-template #menuItemLink let-menuItem=\"menuItem\">\r\n\t<tld-menu-item-link\r\n\t\t[ngClass.lt-md]=\"'mob-menu-item'\"\r\n\t\t[menuItem]=\"menuItem\"\r\n\t\t[direction]=\"direction\"\r\n\t\t[labelsVisible]=\"true\"\r\n\t\t[activeItem]=\"activeItem\"\r\n\t\t[showIcons]=\"showIcons\"\r\n\t\t[openInSameTab]=\"openInSameTab\"\r\n\t></tld-menu-item-link>\r\n</ng-template>\r\n", styles: [".spin{animation:spinArrow .3s forwards}@keyframes spinArrow{to{transform:rotate(180deg)}}:host{width:100%}.child-list{max-height:0;opacity:0;overflow:hidden;transition:max-height .3s,opacity .3s}.child-list.open{max-height:500px;opacity:1;overflow:hidden;transition:max-height .3s,opacity .3s}\n"] }]
|
|
1044
1103
|
}], null, { menuItem: [{
|
|
1045
1104
|
type: Input
|
|
1046
1105
|
}], labelsVisible: [{
|
|
@@ -1057,6 +1116,8 @@ class MenuItemWithChildrenComponent {
|
|
|
1057
1116
|
type: Input
|
|
1058
1117
|
}], expandableMenuChildren: [{
|
|
1059
1118
|
type: Input
|
|
1119
|
+
}], openInSameTab: [{
|
|
1120
|
+
type: Input
|
|
1060
1121
|
}], openMenu: [{
|
|
1061
1122
|
type: Output
|
|
1062
1123
|
}], toggleExpand: [{
|
|
@@ -1136,14 +1197,14 @@ function MenuItemListComponent_ng_template_5_Template(rf, ctx) { if (rf & 1) {
|
|
|
1136
1197
|
const menuItem_r8 = ctx.menuItem;
|
|
1137
1198
|
const ctx_r0 = i0.ɵɵnextContext();
|
|
1138
1199
|
i0.ɵɵclassProp("active-parent", menuItem_r8.appId === ctx_r0.appId);
|
|
1139
|
-
i0.ɵɵproperty("menuItem", menuItem_r8)("labelsVisible", ctx_r0.labelsVisible)("menuLayoutDirection", ctx_r0.menuLayoutDirection)("menuItemLayout", ctx_r0.menuItemLayout)("activeItem", ctx_r0.activeItem)("showIcons", ctx_r0.showIcons)("direction", ctx_r0.direction)("expandableMenuChildren", ctx_r0.expandableMenuChildren);
|
|
1200
|
+
i0.ɵɵproperty("menuItem", menuItem_r8)("labelsVisible", ctx_r0.labelsVisible)("menuLayoutDirection", ctx_r0.menuLayoutDirection)("menuItemLayout", ctx_r0.menuItemLayout)("activeItem", ctx_r0.activeItem)("showIcons", ctx_r0.showIcons)("direction", ctx_r0.direction)("expandableMenuChildren", ctx_r0.expandableMenuChildren)("openInSameTab", ctx_r0.openExternalLinksInSameTab);
|
|
1140
1201
|
} }
|
|
1141
1202
|
function MenuItemListComponent_ng_template_7_Template(rf, ctx) { if (rf & 1) {
|
|
1142
1203
|
i0.ɵɵelement(0, "tld-menu-item-link", 15);
|
|
1143
1204
|
} if (rf & 2) {
|
|
1144
1205
|
const menuItem_r9 = ctx.menuItem;
|
|
1145
1206
|
const ctx_r0 = i0.ɵɵnextContext();
|
|
1146
|
-
i0.ɵɵproperty("ngClass.lt-md", "mob-menu-item")("menuItem", menuItem_r9)("direction", ctx_r0.direction)("labelsVisible", ctx_r0.labelsVisible)("activeItem", ctx_r0.activeItem)("showIcons", ctx_r0.showIcons);
|
|
1207
|
+
i0.ɵɵproperty("ngClass.lt-md", "mob-menu-item")("menuItem", menuItem_r9)("direction", ctx_r0.direction)("labelsVisible", ctx_r0.labelsVisible)("activeItem", ctx_r0.activeItem)("showIcons", ctx_r0.showIcons)("openInSameTab", ctx_r0.openExternalLinksInSameTab);
|
|
1147
1208
|
} }
|
|
1148
1209
|
function MenuItemListComponent_ng_template_9_lib_menu_item_btn_0_Template(rf, ctx) { if (rf & 1) {
|
|
1149
1210
|
i0.ɵɵelement(0, "lib-menu-item-btn", 17);
|
|
@@ -1268,13 +1329,13 @@ class MenuItemListComponent {
|
|
|
1268
1329
|
this.openMenuTrigger.emit();
|
|
1269
1330
|
}
|
|
1270
1331
|
static { this.ɵfac = function MenuItemListComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MenuItemListComponent)(); }; }
|
|
1271
|
-
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MenuItemListComponent, selectors: [["menu-item-list"]], inputs: { direction: "direction", labelsVisible: "labelsVisible", activeItem: "activeItem", showIcons: "showIcons", expandableMenuChildren: "expandableMenuChildren", items: "items", menuItemGroup: "menuItemGroup" }, outputs: { openMenuTrigger: "openMenuTrigger", toggleExpand: "toggleExpand" }, standalone: false, 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"], ["mat-icon-button", "", "class", "menu-title-btn", 3, "routerLink", "matTooltip", 4, "ngIf"], [1, "menu-title-btn"], ["mat-icon-button", "", 1, "menu-title-btn", 3, "routerLink", "matTooltip"], [4, "ngTemplateOutlet"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], [3, "toggleExpand", "openMenu", "menuItem", "labelsVisible", "menuLayoutDirection", "menuItemLayout", "activeItem", "showIcons", "direction", "expandableMenuChildren"], [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"], ["mat-button", "", "class", "menu-title-btn menu-action-button", 3, "active-menu-item-group", "click", 4, "ngIf"], ["mat-icon-button", "", "matTooltipPosition", "after", 3, "matTooltip", "click", 4, "ngIf"], ["mat-button", "", 1, "menu-title-btn", "menu-action-button", 3, "click"], [3, "svgIcon"], ["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) {
|
|
1332
|
+
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MenuItemListComponent, selectors: [["menu-item-list"]], inputs: { direction: "direction", labelsVisible: "labelsVisible", activeItem: "activeItem", showIcons: "showIcons", openExternalLinksInSameTab: "openExternalLinksInSameTab", expandableMenuChildren: "expandableMenuChildren", items: "items", menuItemGroup: "menuItemGroup" }, outputs: { openMenuTrigger: "openMenuTrigger", toggleExpand: "toggleExpand" }, standalone: false, 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"], ["mat-icon-button", "", "class", "menu-title-btn", 3, "routerLink", "matTooltip", 4, "ngIf"], [1, "menu-title-btn"], ["mat-icon-button", "", 1, "menu-title-btn", 3, "routerLink", "matTooltip"], [4, "ngTemplateOutlet"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], [3, "toggleExpand", "openMenu", "menuItem", "labelsVisible", "menuLayoutDirection", "menuItemLayout", "activeItem", "showIcons", "direction", "expandableMenuChildren", "openInSameTab"], [3, "ngClass.lt-md", "menuItem", "direction", "labelsVisible", "activeItem", "showIcons", "openInSameTab"], [3, "ngClass.lt-md", "menuItem", "direction", "activeItem", 4, "ngIf"], [3, "ngClass.lt-md", "menuItem", "direction", "activeItem"], ["mat-button", "", "class", "menu-title-btn menu-action-button", 3, "active-menu-item-group", "click", 4, "ngIf"], ["mat-icon-button", "", "matTooltipPosition", "after", 3, "matTooltip", "click", 4, "ngIf"], ["mat-button", "", 1, "menu-title-btn", "menu-action-button", 3, "click"], [3, "svgIcon"], ["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) {
|
|
1272
1333
|
i0.ɵɵelementStart(0, "div", 4);
|
|
1273
1334
|
i0.ɵɵconditionalCreate(1, MenuItemListComponent_Conditional_1_Template, 5, 5, "div", 5)(2, MenuItemListComponent_Conditional_2_Template, 1, 1, "ng-container");
|
|
1274
1335
|
i0.ɵɵelementStart(3, "div", 6);
|
|
1275
1336
|
i0.ɵɵtemplate(4, MenuItemListComponent_ng_container_4_Template, 2, 4, "ng-container", 7);
|
|
1276
1337
|
i0.ɵɵelementEnd()();
|
|
1277
|
-
i0.ɵɵtemplate(5, MenuItemListComponent_ng_template_5_Template, 1,
|
|
1338
|
+
i0.ɵɵtemplate(5, MenuItemListComponent_ng_template_5_Template, 1, 11, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor)(7, MenuItemListComponent_ng_template_7_Template, 1, 7, "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);
|
|
1278
1339
|
} if (rf & 2) {
|
|
1279
1340
|
i0.ɵɵadvance();
|
|
1280
1341
|
i0.ɵɵconditional(ctx.titleKey && ctx.showTitle && ctx.labelsVisible && !ctx.menuItemGroup.itemGroupClick ? 1 : (ctx.menuItemGroup == null ? null : ctx.menuItemGroup.itemGroupClick) ? 2 : -1);
|
|
@@ -1286,7 +1347,7 @@ class MenuItemListComponent {
|
|
|
1286
1347
|
}
|
|
1287
1348
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuItemListComponent, [{
|
|
1288
1349
|
type: Component,
|
|
1289
|
-
args: [{ selector: 'menu-item-list', standalone: false, template: "<div class=\"menu-list-wrapper\">\r\n\t@if (titleKey && showTitle && labelsVisible && !menuItemGroup.itemGroupClick) {\r\n\t<div fxLayoutAlign=\"start center\" class=\"menu-item-list-title\">\r\n\t\t<mat-icon *ngIf=\"menuItemGroup.titleIcon\" class=\"menu-title-btn\">\r\n\t\t\t{{ menuItemGroup.titleIcon }}\r\n\t\t</mat-icon>\r\n\r\n\t\t<button\r\n\t\t\t*ngIf=\"menuItemGroup.titleNavigation\"\r\n\t\t\tmat-icon-button\r\n\t\t\tclass=\"menu-title-btn\"\r\n\t\t\t[routerLink]=\"menuItemGroup.titleNavigation.path\"\r\n\t\t\t[matTooltip]=\"menuItemGroup.titleNavigation?.tooltip ?? '' | translate\"\r\n\t\t>\r\n\t\t\t<mat-icon>{{ menuItemGroup.titleNavigation.icon }}</mat-icon>\r\n\t\t</button>\r\n\r\n\t\t{{ titleKey | translate }}\r\n\t</div>\r\n\t} @else if (menuItemGroup?.itemGroupClick) {\r\n\t<ng-container *ngTemplateOutlet=\"itemGroupButton\"> </ng-container>\r\n\t}\r\n\t<div class=\"menu-item-list\" fxLayout=\"column\" [fxLayoutAlign]=\"menuLayoutDirection\">\r\n\t\t<ng-container *ngFor=\"let menuItem of items\">\r\n\t\t\t<ng-container\r\n\t\t\t\t*ngTemplateOutlet=\"\r\n\t\t\t\t\t!menuItem.showChildren || !menuItem.children || menuItem?.children?.length === 0 ? (menuItem.clickAction ? menuItemBtn : menuItemLink) : itemWithChildren;\r\n\t\t\t\t\tcontext: { menuItem: menuItem }\r\n\t\t\t\t\"\r\n\t\t\t>\r\n\t\t\t</ng-container>\r\n\t\t</ng-container>\r\n\t</div>\r\n</div>\r\n\r\n<ng-template #itemWithChildren let-menuItem=\"menuItem\">\r\n\t<lib-menu-item-with-children\r\n\t\t[menuItem]=\"menuItem\"\r\n\t\t[labelsVisible]=\"labelsVisible\"\r\n\t\t[menuLayoutDirection]=\"menuLayoutDirection\"\r\n\t\t[menuItemLayout]=\"menuItemLayout\"\r\n\t\t[activeItem]=\"activeItem\"\r\n\t\t[showIcons]=\"showIcons\"\r\n\t\t[direction]=\"direction\"\r\n\t\t[expandableMenuChildren]=\"expandableMenuChildren\"\r\n\t\t(toggleExpand)=\"toggleExpandEvent($event)\"\r\n\t\t(openMenu)=\"openMenu()\"\r\n\t\t[class.active-parent]=\"menuItem.appId === appId\"\r\n\t></lib-menu-item-with-children>\r\n</ng-template>\r\n\r\n<ng-template #menuItemLink let-menuItem=\"menuItem\">\r\n\t<tld-menu-item-link\r\n\t\t[ngClass.lt-md]=\"'mob-menu-item'\"\r\n\t\t[menuItem]=\"menuItem\"\r\n\t\t[direction]=\"direction\"\r\n\t\t[labelsVisible]=\"labelsVisible\"\r\n\t\t[activeItem]=\"activeItem\"\r\n\t\t[showIcons]=\"showIcons\"\r\n\t></tld-menu-item-link>\r\n</ng-template>\r\n\r\n<ng-template #menuItemBtn let-menuItem=\"menuItem\">\r\n\t<lib-menu-item-btn *ngIf=\"labelsVisible\" [ngClass.lt-md]=\"'mob-menu-item'\" [menuItem]=\"menuItem\" [direction]=\"direction\" [activeItem]=\"activeItem\"></lib-menu-item-btn>\r\n</ng-template>\r\n\r\n<ng-template #itemGroupButton>\r\n\t<button\r\n\t\t*ngIf=\"menuItemGroup && labelsVisible\"\r\n\t\tmat-button\r\n\t\tclass=\"menu-title-btn menu-action-button\"\r\n\t\t(click)=\"menuItemGroup?.itemGroupClick()\"\r\n\t\t[class.active-menu-item-group]=\"menuItemGroup.isItemGroupActive && menuItemGroup.isItemGroupActive()\"\r\n\t>\r\n\t\t@if(menuItemGroup.isCustomItemGroupIcon){\r\n\t\t<mat-icon [svgIcon]=\"menuItemGroup.itemGroupIcon ?? ''\"></mat-icon>\r\n\t\t} @else {\r\n\t\t<mat-icon>{{ menuItemGroup.itemGroupIcon }}</mat-icon>\r\n\t\t}\r\n\t\t<span class=\"btn-label\" *ngIf=\"titleKey\">\r\n\t\t\t{{ titleKey | translate }}\r\n\t\t</span>\r\n\t</button>\r\n\r\n\t<button\r\n\t\t*ngIf=\"menuItemGroup && !labelsVisible && titleKey && menuItemGroup.itemGroupIcon\"\r\n\t\tmat-icon-button\r\n\t\tmatTooltipPosition=\"after\"\r\n\t\t[matTooltip]=\"titleKey | translate\"\r\n\t\t(click)=\"menuItemGroup?.itemGroupClick()\"\r\n\t>\r\n\t\t@if(menuItemGroup.isCustomItemGroupIcon){\r\n\t\t<mat-icon [svgIcon]=\"menuItemGroup.itemGroupIcon ?? ''\"></mat-icon>\r\n\t\t} @else {\r\n\t\t<mat-icon>{{ menuItemGroup.itemGroupIcon }}</mat-icon>\r\n\t\t}\r\n\t</button>\r\n</ng-template>\r\n", styles: [":host{display:inline-block}::ng-deep .menu-item{width:100%}::ng-deep a,::ng-deep a:hover{text-decoration:none}::ng-deep .collapsed .menu-item-list{display:flex!important;justify-content:center!important;align-items:center!important}::ng-deep .collapsed .menu-list-wrapper,::ng-deep .collapsed tld-menu-item-link{display:flex!important;justify-content:center!important}::ng-deep .collapsed .menu-item{display:flex!important;place-content:center center!important}::ng-deep .collapsed tld-menu-item-link:not(:first-child){margin-top:16px}::ng-deep .active-parent button,::ng-deep .active-menu-item-group{background-color:var(--base-95)!important}::ng-deep .menu-action-button{justify-content:flex-start;align-items:center;max-width:100%;width:-webkit-fill-available}::ng-deep .menu-list-wrapper .menu-item{cursor:pointer;font-style:normal;color:var(--base-30);text-decoration:none;align-items:center!important;font-weight:400;background:none;border:none}::ng-deep .menu-list-wrapper .menu-item:not(button):not(.active-menu-item):hover{background-color:var(--base-70)!important}::ng-deep .menu-list-wrapper .menu-item.active-menu-item,::ng-deep .menu-list-wrapper .menu-item.active-menu-item mat-icon,::ng-deep .menu-list-wrapper .menu-item.active-menu-item:hover{font-weight:600}::ng-deep .menu-list-wrapper .menu-item span{display:inline-block}::ng-deep .menu-list-wrapper .menu-item .menu-item-title{display:flex;flex-direction:row;align-items:start;width:100%}::ng-deep .menu-list-wrapper .menu-item .menu-item-title .title-content{width:100%;text-align:start;display:block}::ng-deep .menu-list-wrapper .menu-item .menu-item-title .title-content:before{display:block;content:attr(content);font-weight:600;height:0;overflow:hidden;visibility:hidden}::ng-deep .menu-list-wrapper .menu-parent-item.active-menu-item,::ng-deep .menu-list-wrapper .menu-parent-item:hover{font-weight:400!important;background-color:var(--base-70)!important}::ng-deep .menu-tooltip{left:.625rem;font-family:Roboto;font-style:normal;font-weight:400;font-size:.75rem;line-height:1.25rem;color:var(--base-70);border-radius:.25rem;position:relative}::ng-deep .menu-tooltip:after{width:0;height:0;content:\"\";position:absolute;border-left:.5rem solid transparent;border-right:.5rem solid transparent;border-bottom:.5rem solid var(--menu-border-dark-color);left:-.75rem;top:calc(50% - .25rem);transform:rotate(270deg);overflow:initial}::ng-deep .menu-item-list-title{padding:8px 0 24px;font-size:1rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;margin-left:20px;height:56px}::ng-deep .menu-item-list-title:has(.menu-title-btn){margin-left:0}::ng-deep lib-menu-accessibility,::ng-deep lib-menu-lang-switcher,::ng-deep .menu-item-list{animation:slide-in .3s forwards}::ng-deep lib-menu-accessibility,::ng-deep lib-menu-lang-switcher,::ng-deep .menu-title-btn{margin-right:2px;transition:opacity .3s}::ng-deep .arrow-icon{margin-right:-6px}@keyframes slide-in{0%{opacity:0;margin-left:-100px}to{opacity:1;margin-left:0}}\n"] }]
|
|
1350
|
+
args: [{ selector: 'menu-item-list', standalone: false, template: "<div class=\"menu-list-wrapper\">\r\n\t@if (titleKey && showTitle && labelsVisible && !menuItemGroup.itemGroupClick) {\r\n\t<div fxLayoutAlign=\"start center\" class=\"menu-item-list-title\">\r\n\t\t<mat-icon *ngIf=\"menuItemGroup.titleIcon\" class=\"menu-title-btn\">\r\n\t\t\t{{ menuItemGroup.titleIcon }}\r\n\t\t</mat-icon>\r\n\r\n\t\t<button\r\n\t\t\t*ngIf=\"menuItemGroup.titleNavigation\"\r\n\t\t\tmat-icon-button\r\n\t\t\tclass=\"menu-title-btn\"\r\n\t\t\t[routerLink]=\"menuItemGroup.titleNavigation.path\"\r\n\t\t\t[matTooltip]=\"menuItemGroup.titleNavigation?.tooltip ?? '' | translate\"\r\n\t\t>\r\n\t\t\t<mat-icon>{{ menuItemGroup.titleNavigation.icon }}</mat-icon>\r\n\t\t</button>\r\n\r\n\t\t{{ titleKey | translate }}\r\n\t</div>\r\n\t} @else if (menuItemGroup?.itemGroupClick) {\r\n\t<ng-container *ngTemplateOutlet=\"itemGroupButton\"> </ng-container>\r\n\t}\r\n\t<div class=\"menu-item-list\" fxLayout=\"column\" [fxLayoutAlign]=\"menuLayoutDirection\">\r\n\t\t<ng-container *ngFor=\"let menuItem of items\">\r\n\t\t\t<ng-container\r\n\t\t\t\t*ngTemplateOutlet=\"\r\n\t\t\t\t\t!menuItem.showChildren || !menuItem.children || menuItem?.children?.length === 0 ? (menuItem.clickAction ? menuItemBtn : menuItemLink) : itemWithChildren;\r\n\t\t\t\t\tcontext: { menuItem: menuItem }\r\n\t\t\t\t\"\r\n\t\t\t>\r\n\t\t\t</ng-container>\r\n\t\t</ng-container>\r\n\t</div>\r\n</div>\r\n\r\n<ng-template #itemWithChildren let-menuItem=\"menuItem\">\r\n\t<lib-menu-item-with-children\r\n\t\t[menuItem]=\"menuItem\"\r\n\t\t[labelsVisible]=\"labelsVisible\"\r\n\t\t[menuLayoutDirection]=\"menuLayoutDirection\"\r\n\t\t[menuItemLayout]=\"menuItemLayout\"\r\n\t\t[activeItem]=\"activeItem\"\r\n\t\t[showIcons]=\"showIcons\"\r\n\t\t[direction]=\"direction\"\r\n\t\t[expandableMenuChildren]=\"expandableMenuChildren\"\r\n\t\t(toggleExpand)=\"toggleExpandEvent($event)\"\r\n\t\t(openMenu)=\"openMenu()\"\r\n\t\t[class.active-parent]=\"menuItem.appId === appId\"\r\n\t\t[openInSameTab]=\"openExternalLinksInSameTab\"\r\n\t></lib-menu-item-with-children>\r\n</ng-template>\r\n\r\n<ng-template #menuItemLink let-menuItem=\"menuItem\">\r\n\t<tld-menu-item-link\r\n\t\t[ngClass.lt-md]=\"'mob-menu-item'\"\r\n\t\t[menuItem]=\"menuItem\"\r\n\t\t[direction]=\"direction\"\r\n\t\t[labelsVisible]=\"labelsVisible\"\r\n\t\t[activeItem]=\"activeItem\"\r\n\t\t[showIcons]=\"showIcons\"\r\n\t\t[openInSameTab]=\"openExternalLinksInSameTab\"\r\n\t></tld-menu-item-link>\r\n</ng-template>\r\n\r\n<ng-template #menuItemBtn let-menuItem=\"menuItem\">\r\n\t<lib-menu-item-btn *ngIf=\"labelsVisible\" [ngClass.lt-md]=\"'mob-menu-item'\" [menuItem]=\"menuItem\" [direction]=\"direction\" [activeItem]=\"activeItem\"></lib-menu-item-btn>\r\n</ng-template>\r\n\r\n<ng-template #itemGroupButton>\r\n\t<button\r\n\t\t*ngIf=\"menuItemGroup && labelsVisible\"\r\n\t\tmat-button\r\n\t\tclass=\"menu-title-btn menu-action-button\"\r\n\t\t(click)=\"menuItemGroup?.itemGroupClick()\"\r\n\t\t[class.active-menu-item-group]=\"menuItemGroup.isItemGroupActive && menuItemGroup.isItemGroupActive()\"\r\n\t>\r\n\t\t@if(menuItemGroup.isCustomItemGroupIcon){\r\n\t\t<mat-icon [svgIcon]=\"menuItemGroup.itemGroupIcon ?? ''\"></mat-icon>\r\n\t\t} @else {\r\n\t\t<mat-icon>{{ menuItemGroup.itemGroupIcon }}</mat-icon>\r\n\t\t}\r\n\t\t<span class=\"btn-label\" *ngIf=\"titleKey\">\r\n\t\t\t{{ titleKey | translate }}\r\n\t\t</span>\r\n\t</button>\r\n\r\n\t<button\r\n\t\t*ngIf=\"menuItemGroup && !labelsVisible && titleKey && menuItemGroup.itemGroupIcon\"\r\n\t\tmat-icon-button\r\n\t\tmatTooltipPosition=\"after\"\r\n\t\t[matTooltip]=\"titleKey | translate\"\r\n\t\t(click)=\"menuItemGroup?.itemGroupClick()\"\r\n\t>\r\n\t\t@if(menuItemGroup.isCustomItemGroupIcon){\r\n\t\t<mat-icon [svgIcon]=\"menuItemGroup.itemGroupIcon ?? ''\"></mat-icon>\r\n\t\t} @else {\r\n\t\t<mat-icon>{{ menuItemGroup.itemGroupIcon }}</mat-icon>\r\n\t\t}\r\n\t</button>\r\n</ng-template>\r\n", styles: [":host{display:inline-block}::ng-deep .menu-item{width:100%}::ng-deep a,::ng-deep a:hover{text-decoration:none}::ng-deep .collapsed .menu-item-list{display:flex!important;justify-content:center!important;align-items:center!important}::ng-deep .collapsed .menu-list-wrapper,::ng-deep .collapsed tld-menu-item-link{display:flex!important;justify-content:center!important}::ng-deep .collapsed .menu-item{display:flex!important;place-content:center center!important}::ng-deep .collapsed tld-menu-item-link:not(:first-child){margin-top:16px}::ng-deep .active-parent button,::ng-deep .active-menu-item-group{background-color:var(--base-95)!important}::ng-deep .menu-action-button{justify-content:flex-start;align-items:center;max-width:100%;width:-webkit-fill-available}::ng-deep .menu-list-wrapper .menu-item{cursor:pointer;font-style:normal;color:var(--base-30);text-decoration:none;align-items:center!important;font-weight:400;background:none;border:none}::ng-deep .menu-list-wrapper .menu-item:not(button):not(.active-menu-item):hover{background-color:var(--base-70)!important}::ng-deep .menu-list-wrapper .menu-item.active-menu-item,::ng-deep .menu-list-wrapper .menu-item.active-menu-item mat-icon,::ng-deep .menu-list-wrapper .menu-item.active-menu-item:hover{font-weight:600}::ng-deep .menu-list-wrapper .menu-item span{display:inline-block}::ng-deep .menu-list-wrapper .menu-item .menu-item-title{display:flex;flex-direction:row;align-items:start;width:100%}::ng-deep .menu-list-wrapper .menu-item .menu-item-title .title-content{width:100%;text-align:start;display:block}::ng-deep .menu-list-wrapper .menu-item .menu-item-title .title-content:before{display:block;content:attr(content);font-weight:600;height:0;overflow:hidden;visibility:hidden}::ng-deep .menu-list-wrapper .menu-parent-item.active-menu-item,::ng-deep .menu-list-wrapper .menu-parent-item:hover{font-weight:400!important;background-color:var(--base-70)!important}::ng-deep .menu-tooltip{left:.625rem;font-family:Roboto;font-style:normal;font-weight:400;font-size:.75rem;line-height:1.25rem;color:var(--base-70);border-radius:.25rem;position:relative}::ng-deep .menu-tooltip:after{width:0;height:0;content:\"\";position:absolute;border-left:.5rem solid transparent;border-right:.5rem solid transparent;border-bottom:.5rem solid var(--menu-border-dark-color);left:-.75rem;top:calc(50% - .25rem);transform:rotate(270deg);overflow:initial}::ng-deep .menu-item-list-title{padding:8px 0 24px;font-size:1rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;margin-left:20px;height:56px}::ng-deep .menu-item-list-title:has(.menu-title-btn){margin-left:0}::ng-deep lib-menu-accessibility,::ng-deep lib-menu-lang-switcher,::ng-deep .menu-item-list{animation:slide-in .3s forwards}::ng-deep lib-menu-accessibility,::ng-deep lib-menu-lang-switcher,::ng-deep .menu-title-btn{margin-right:2px;transition:opacity .3s}::ng-deep .arrow-icon{margin-right:-6px}@keyframes slide-in{0%{opacity:0;margin-left:-100px}to{opacity:1;margin-left:0}}\n"] }]
|
|
1290
1351
|
}], null, { direction: [{
|
|
1291
1352
|
type: Input
|
|
1292
1353
|
}], labelsVisible: [{
|
|
@@ -1295,6 +1356,8 @@ class MenuItemListComponent {
|
|
|
1295
1356
|
type: Input
|
|
1296
1357
|
}], showIcons: [{
|
|
1297
1358
|
type: Input
|
|
1359
|
+
}], openExternalLinksInSameTab: [{
|
|
1360
|
+
type: Input
|
|
1298
1361
|
}], expandableMenuChildren: [{
|
|
1299
1362
|
type: Input
|
|
1300
1363
|
}], items: [{
|
|
@@ -1316,7 +1379,7 @@ function MenuColumnsComponent_ng_container_0_menu_item_list_1_Template(rf, ctx)
|
|
|
1316
1379
|
} if (rf & 2) {
|
|
1317
1380
|
const group_r3 = i0.ɵɵnextContext().$implicit;
|
|
1318
1381
|
const ctx_r1 = i0.ɵɵnextContext();
|
|
1319
|
-
i0.ɵɵproperty("activeItem", ctx_r1.activeItem)("direction", ctx_r1.direction)("labelsVisible", ctx_r1.isOpen)("menuItemGroup", group_r3)("items", group_r3.items)("expandableMenuChildren", ctx_r1.expandableMenuChildren);
|
|
1382
|
+
i0.ɵɵproperty("activeItem", ctx_r1.activeItem)("direction", ctx_r1.direction)("labelsVisible", ctx_r1.isOpen)("menuItemGroup", group_r3)("items", group_r3.items)("expandableMenuChildren", ctx_r1.expandableMenuChildren)("openExternalLinksInSameTab", ctx_r1.openExternalLinksInSameTab);
|
|
1320
1383
|
} }
|
|
1321
1384
|
function MenuColumnsComponent_ng_container_0_div_2_Template(rf, ctx) { if (rf & 1) {
|
|
1322
1385
|
i0.ɵɵelementStart(0, "div", 5);
|
|
@@ -1333,7 +1396,7 @@ function MenuColumnsComponent_ng_container_0_div_3_Template(rf, ctx) { if (rf &
|
|
|
1333
1396
|
} }
|
|
1334
1397
|
function MenuColumnsComponent_ng_container_0_Template(rf, ctx) { if (rf & 1) {
|
|
1335
1398
|
i0.ɵɵelementContainerStart(0);
|
|
1336
|
-
i0.ɵɵtemplate(1, MenuColumnsComponent_ng_container_0_menu_item_list_1_Template, 1,
|
|
1399
|
+
i0.ɵɵtemplate(1, MenuColumnsComponent_ng_container_0_menu_item_list_1_Template, 1, 7, "menu-item-list", 1)(2, MenuColumnsComponent_ng_container_0_div_2_Template, 2, 1, "div", 2)(3, MenuColumnsComponent_ng_container_0_div_3_Template, 2, 0, "div", 3);
|
|
1337
1400
|
i0.ɵɵelementContainerEnd();
|
|
1338
1401
|
} if (rf & 2) {
|
|
1339
1402
|
const group_r3 = ctx.$implicit;
|
|
@@ -1366,6 +1429,7 @@ class MenuColumnsComponent {
|
|
|
1366
1429
|
this.direction = MenuLayoutDirection.column;
|
|
1367
1430
|
this.isOpen = true;
|
|
1368
1431
|
this.expandableMenuChildren = false;
|
|
1432
|
+
this.openExternalLinksInSameTab = false;
|
|
1369
1433
|
this.toggleCollapseEvent = new EventEmitter();
|
|
1370
1434
|
}
|
|
1371
1435
|
ngOnInit() {
|
|
@@ -1385,7 +1449,7 @@ class MenuColumnsComponent {
|
|
|
1385
1449
|
return this.isOpen && ResolutionHelper.isMobileRes() && (this.active && Object.values(this.active)?.length > 0);
|
|
1386
1450
|
}
|
|
1387
1451
|
static { this.ɵfac = function MenuColumnsComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MenuColumnsComponent)(i0.ɵɵdirectiveInject(i1$1.Router), i0.ɵɵdirectiveInject(MENU_SHARED_CONFIG, 8), i0.ɵɵdirectiveInject(MenuItemsService)); }; }
|
|
1388
|
-
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MenuColumnsComponent, selectors: [["menu-columns"]], inputs: { direction: "direction", isOpen: "isOpen", expandableMenuChildren: "expandableMenuChildren", active: "active" }, outputs: { toggleCollapseEvent: "toggleCollapseEvent" }, standalone: false, decls: 1, vars: 1, consts: [[4, "ngFor", "ngForOf"], [3, "activeItem", "direction", "labelsVisible", "menuItemGroup", "items", "expandableMenuChildren", "toggleExpand", "openMenuTrigger", 4, "ngIf"], ["class", "loader-container", 4, "ngIf"], ["class", "divider", 4, "ngIf"], [3, "toggleExpand", "openMenuTrigger", "activeItem", "direction", "labelsVisible", "menuItemGroup", "items", "expandableMenuChildren"], [1, "loader-container"], [1, "loader", 3, "diameter"], [1, "divider"]], template: function MenuColumnsComponent_Template(rf, ctx) { if (rf & 1) {
|
|
1452
|
+
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MenuColumnsComponent, selectors: [["menu-columns"]], inputs: { direction: "direction", isOpen: "isOpen", expandableMenuChildren: "expandableMenuChildren", openExternalLinksInSameTab: "openExternalLinksInSameTab", active: "active" }, outputs: { toggleCollapseEvent: "toggleCollapseEvent" }, standalone: false, decls: 1, vars: 1, consts: [[4, "ngFor", "ngForOf"], [3, "activeItem", "direction", "labelsVisible", "menuItemGroup", "items", "expandableMenuChildren", "openExternalLinksInSameTab", "toggleExpand", "openMenuTrigger", 4, "ngIf"], ["class", "loader-container", 4, "ngIf"], ["class", "divider", 4, "ngIf"], [3, "toggleExpand", "openMenuTrigger", "activeItem", "direction", "labelsVisible", "menuItemGroup", "items", "expandableMenuChildren", "openExternalLinksInSameTab"], [1, "loader-container"], [1, "loader", 3, "diameter"], [1, "divider"]], template: function MenuColumnsComponent_Template(rf, ctx) { if (rf & 1) {
|
|
1389
1453
|
i0.ɵɵtemplate(0, MenuColumnsComponent_ng_container_0_Template, 4, 3, "ng-container", 0);
|
|
1390
1454
|
} if (rf & 2) {
|
|
1391
1455
|
i0.ɵɵproperty("ngForOf", ctx.mergedGroups);
|
|
@@ -1393,7 +1457,7 @@ class MenuColumnsComponent {
|
|
|
1393
1457
|
}
|
|
1394
1458
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuColumnsComponent, [{
|
|
1395
1459
|
type: Component,
|
|
1396
|
-
args: [{ selector: 'menu-columns', standalone: false, template: "<ng-container *ngFor=\"let group of mergedGroups\">\r\n <menu-item-list *ngIf=\"group.items.length || group.showEmpty\" [activeItem]=\"activeItem\" [direction]=\"direction\"\r\n (toggleExpand)=\"elementExpanded($event)\" (openMenuTrigger)=\"openMenu()\" [labelsVisible]=\"isOpen\" [menuItemGroup]=\"group\"\r\n [items]=\"group.items\" [expandableMenuChildren]=\"expandableMenuChildren!\">\r\n </menu-item-list>\r\n <div class=\"loader-container\" *ngIf=\"group.isItemsLoading && isOpen\">\r\n <mat-spinner [diameter]=\"24\" class=\"loader\"></mat-spinner>\r\n </div>\r\n <div class=\"divider\" *ngIf=\"group.bottomDivider && group.items.length\">\r\n <mat-divider></mat-divider>\r\n </div>\r\n</ng-container>", styles: [":host{display:inline-block}:host menu-item-list{display:block}.divider{margin:10px 0}.loader-container{padding-left:20px}\n"] }]
|
|
1460
|
+
args: [{ selector: 'menu-columns', standalone: false, template: "<ng-container *ngFor=\"let group of mergedGroups\">\r\n <menu-item-list *ngIf=\"group.items.length || group.showEmpty\" [activeItem]=\"activeItem\" [direction]=\"direction\"\r\n (toggleExpand)=\"elementExpanded($event)\" (openMenuTrigger)=\"openMenu()\" [labelsVisible]=\"isOpen\" [menuItemGroup]=\"group\"\r\n [items]=\"group.items\" [expandableMenuChildren]=\"expandableMenuChildren!\" [openExternalLinksInSameTab]=\"openExternalLinksInSameTab!\">\r\n </menu-item-list>\r\n <div class=\"loader-container\" *ngIf=\"group.isItemsLoading && isOpen\">\r\n <mat-spinner [diameter]=\"24\" class=\"loader\"></mat-spinner>\r\n </div>\r\n <div class=\"divider\" *ngIf=\"group.bottomDivider && group.items.length\">\r\n <mat-divider></mat-divider>\r\n </div>\r\n</ng-container>", styles: [":host{display:inline-block}:host menu-item-list{display:block}.divider{margin:10px 0}.loader-container{padding-left:20px}\n"] }]
|
|
1397
1461
|
}], () => [{ type: i1$1.Router }, { type: undefined, decorators: [{
|
|
1398
1462
|
type: Optional
|
|
1399
1463
|
}, {
|
|
@@ -1405,6 +1469,8 @@ class MenuColumnsComponent {
|
|
|
1405
1469
|
type: Input
|
|
1406
1470
|
}], expandableMenuChildren: [{
|
|
1407
1471
|
type: Input
|
|
1472
|
+
}], openExternalLinksInSameTab: [{
|
|
1473
|
+
type: Input
|
|
1408
1474
|
}], toggleCollapseEvent: [{
|
|
1409
1475
|
type: Output
|
|
1410
1476
|
}], active: [{
|
|
@@ -1742,38 +1808,34 @@ class MenuLangSwitcherComponent {
|
|
|
1742
1808
|
}] }); })();
|
|
1743
1809
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MenuLangSwitcherComponent, { className: "MenuLangSwitcherComponent", filePath: "lib/components/menu-lang-switcher/menu-lang-switcher.component.ts", lineNumber: 11 }); })();
|
|
1744
1810
|
|
|
1745
|
-
|
|
1811
|
+
function MenuAccessibilitySettingsComponent_For_18_Template(rf, ctx) { if (rf & 1) {
|
|
1812
|
+
const _r1 = i0.ɵɵgetCurrentView();
|
|
1813
|
+
i0.ɵɵelementStart(0, "button", 12);
|
|
1814
|
+
i0.ɵɵlistener("click", function MenuAccessibilitySettingsComponent_For_18_Template_button_click_0_listener() { const contrast_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.changeContrast(contrast_r2)); });
|
|
1815
|
+
i0.ɵɵelementStart(1, "mat-icon", 13);
|
|
1816
|
+
i0.ɵɵtext(2, "visibility");
|
|
1817
|
+
i0.ɵɵelementEnd()();
|
|
1818
|
+
} if (rf & 2) {
|
|
1819
|
+
const contrast_r2 = ctx.$implicit;
|
|
1820
|
+
const ctx_r2 = i0.ɵɵnextContext();
|
|
1821
|
+
i0.ɵɵclassMap(contrast_r2);
|
|
1822
|
+
i0.ɵɵclassProp("active", contrast_r2 === ctx_r2.currentContrast);
|
|
1823
|
+
} }
|
|
1824
|
+
class MenuAccessibilitySettingsComponent {
|
|
1746
1825
|
constructor() {
|
|
1747
|
-
this.
|
|
1826
|
+
this.currentContrast = 'base';
|
|
1827
|
+
this.#accessibility = inject(MenuAccessibilityService);
|
|
1828
|
+
this.contrasts = ['base', 'black-white', 'yellow-black', 'black-yellow'];
|
|
1748
1829
|
}
|
|
1749
|
-
|
|
1750
|
-
const savedFontSizeIx = localStorage.getItem(this.fontSizeLocalStorageKey);
|
|
1751
|
-
if (savedFontSizeIx) {
|
|
1752
|
-
return JSON.parse(savedFontSizeIx);
|
|
1753
|
-
}
|
|
1754
|
-
return 0;
|
|
1755
|
-
}
|
|
1756
|
-
saveFontSize(ix) {
|
|
1757
|
-
localStorage.setItem(this.fontSizeLocalStorageKey, ix.toString());
|
|
1758
|
-
}
|
|
1759
|
-
setFontSize(fontSizeIx) {
|
|
1760
|
-
const sizes = ['1rem', '1.25rem', '1.5rem'];
|
|
1761
|
-
document.querySelector('html').style.fontSize = sizes[fontSizeIx];
|
|
1762
|
-
}
|
|
1763
|
-
static { this.ɵfac = function MenuAccessibilityService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MenuAccessibilityService)(); }; }
|
|
1764
|
-
static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: MenuAccessibilityService, factory: MenuAccessibilityService.ɵfac, providedIn: 'root' }); }
|
|
1765
|
-
}
|
|
1766
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuAccessibilityService, [{
|
|
1767
|
-
type: Injectable,
|
|
1768
|
-
args: [{
|
|
1769
|
-
providedIn: 'root',
|
|
1770
|
-
}]
|
|
1771
|
-
}], null, null); })();
|
|
1772
|
-
|
|
1773
|
-
class MenuAccessibilitySettingsComponent {
|
|
1774
|
-
#accessibility = inject(MenuAccessibilityService);
|
|
1830
|
+
#accessibility;
|
|
1775
1831
|
ngOnInit() {
|
|
1776
1832
|
this.selectedFontSizeIndex = this.#accessibility.getSavedFontSize();
|
|
1833
|
+
this.currentContrast = this.#accessibility.getSavedContrast();
|
|
1834
|
+
}
|
|
1835
|
+
changeContrast(contrast) {
|
|
1836
|
+
this.currentContrast = contrast;
|
|
1837
|
+
this.#accessibility.saveContrast(contrast);
|
|
1838
|
+
this.#accessibility.setContrast(contrast);
|
|
1777
1839
|
}
|
|
1778
1840
|
selectedFontSizeChanged(e) {
|
|
1779
1841
|
this.selectedFontSizeIndex = e.index;
|
|
@@ -1781,7 +1843,7 @@ class MenuAccessibilitySettingsComponent {
|
|
|
1781
1843
|
this.#accessibility.setFontSize(this.selectedFontSizeIndex);
|
|
1782
1844
|
}
|
|
1783
1845
|
static { this.ɵfac = function MenuAccessibilitySettingsComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MenuAccessibilitySettingsComponent)(); }; }
|
|
1784
|
-
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MenuAccessibilitySettingsComponent, selectors: [["lib-menu-accessibility-settings"]], decls:
|
|
1846
|
+
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MenuAccessibilitySettingsComponent, selectors: [["lib-menu-accessibility-settings"]], decls: 26, vars: 19, consts: [["mat-dialog-title", "", 1, "text-2-xl"], ["mat-dialog-content", ""], [1, "font-size-wrapper"], [1, "settings-title"], ["animationDuration", "0ms", 3, "selectedTabChange", "selectedIndex"], [3, "label"], [1, "contrast-wrapper"], [1, "contrast-option-wrapper"], [1, "contrast-option", 3, "class", "active"], ["mat-dialog-actions", ""], ["mat-stroked-button", ""], ["mat-flat-button", "", "mat-dialog-close", ""], [1, "contrast-option", 3, "click"], [1, "material-icons-outlined"]], template: function MenuAccessibilitySettingsComponent_Template(rf, ctx) { if (rf & 1) {
|
|
1785
1847
|
i0.ɵɵelementStart(0, "h1", 0);
|
|
1786
1848
|
i0.ɵɵtext(1);
|
|
1787
1849
|
i0.ɵɵpipe(2, "translate");
|
|
@@ -1793,20 +1855,27 @@ class MenuAccessibilitySettingsComponent {
|
|
|
1793
1855
|
i0.ɵɵelementStart(8, "mat-tab-group", 4);
|
|
1794
1856
|
i0.ɵɵlistener("selectedTabChange", function MenuAccessibilitySettingsComponent_Template_mat_tab_group_selectedTabChange_8_listener($event) { return ctx.selectedFontSizeChanged($event); });
|
|
1795
1857
|
i0.ɵɵelement(9, "mat-tab", 5)(10, "mat-tab", 5)(11, "mat-tab", 5);
|
|
1796
|
-
i0.ɵɵelementEnd()()
|
|
1797
|
-
i0.ɵɵelementStart(12, "div", 6)(13, "
|
|
1858
|
+
i0.ɵɵelementEnd()();
|
|
1859
|
+
i0.ɵɵelementStart(12, "div", 6)(13, "p", 3);
|
|
1798
1860
|
i0.ɵɵtext(14);
|
|
1799
1861
|
i0.ɵɵpipe(15, "translate");
|
|
1800
1862
|
i0.ɵɵelementEnd();
|
|
1801
|
-
i0.ɵɵelementStart(16, "
|
|
1802
|
-
i0.ɵɵ
|
|
1803
|
-
i0.ɵɵ
|
|
1863
|
+
i0.ɵɵelementStart(16, "div", 7);
|
|
1864
|
+
i0.ɵɵrepeaterCreate(17, MenuAccessibilitySettingsComponent_For_18_Template, 3, 4, "button", 8, i0.ɵɵrepeaterTrackByIdentity);
|
|
1865
|
+
i0.ɵɵelementEnd()()();
|
|
1866
|
+
i0.ɵɵelementStart(19, "div", 9)(20, "button", 10);
|
|
1867
|
+
i0.ɵɵtext(21);
|
|
1868
|
+
i0.ɵɵpipe(22, "translate");
|
|
1869
|
+
i0.ɵɵelementEnd();
|
|
1870
|
+
i0.ɵɵelementStart(23, "button", 11);
|
|
1871
|
+
i0.ɵɵtext(24);
|
|
1872
|
+
i0.ɵɵpipe(25, "translate");
|
|
1804
1873
|
i0.ɵɵelementEnd()();
|
|
1805
1874
|
} if (rf & 2) {
|
|
1806
1875
|
i0.ɵɵadvance();
|
|
1807
|
-
i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(2,
|
|
1876
|
+
i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(2, 9, "ACCESSIBILITY.TITLE"));
|
|
1808
1877
|
i0.ɵɵadvance(5);
|
|
1809
|
-
i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(7,
|
|
1878
|
+
i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(7, 11, "ACCESSIBILITY.FONT_SIZE_LABEL"), " ");
|
|
1810
1879
|
i0.ɵɵadvance(2);
|
|
1811
1880
|
i0.ɵɵproperty("selectedIndex", ctx.selectedFontSizeIndex);
|
|
1812
1881
|
i0.ɵɵadvance();
|
|
@@ -1816,16 +1885,20 @@ class MenuAccessibilitySettingsComponent {
|
|
|
1816
1885
|
i0.ɵɵadvance();
|
|
1817
1886
|
i0.ɵɵproperty("label", "200%");
|
|
1818
1887
|
i0.ɵɵadvance(3);
|
|
1819
|
-
i0.ɵɵ
|
|
1888
|
+
i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(15, 13, "ACCESSIBILITY.CONTRAST_LABEL"), " ");
|
|
1889
|
+
i0.ɵɵadvance(3);
|
|
1890
|
+
i0.ɵɵrepeater(ctx.contrasts);
|
|
1891
|
+
i0.ɵɵadvance(4);
|
|
1892
|
+
i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(22, 15, "ACCESSIBILITY.RESET"));
|
|
1820
1893
|
i0.ɵɵadvance(3);
|
|
1821
|
-
i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(
|
|
1822
|
-
} }, dependencies: [MatDialogModule, i1$3.MatDialogClose, i1$3.MatDialogTitle, i1$3.MatDialogActions, i1$3.MatDialogContent, TranslateModule, MatButtonModule, i7.MatButton, MatTabsModule, i3$1.MatTab, i3$1.MatTabGroup, i9.TranslatePipe], styles: [".settings-title[_ngcontent-%COMP%]{color:var(--base-30);font-weight:600;font-size:.8125rem;margin-bottom:12px}[_nghost-%COMP%] .mdc-tab--active{background-color:var(--mat-sys-primary-container)!important}[_nghost-%COMP%] .mdc-tab--active .mdc-tab__text-label{color:var(--primary-accent)!important}[_nghost-%COMP%] .mat-mdc-tab{width:50px;border:1px solid var(--base-70)}[_nghost-%COMP%] .mat-mdc-tab:first-child{border-bottom-left-radius:16px;border-top-left-radius:16px}[_nghost-%COMP%] .mat-mdc-tab:last-child{border-bottom-right-radius:16px;border-top-right-radius:16px}[_nghost-%COMP%] .mdc-tab-indicator__content--underline{display:none}[_nghost-%COMP%] .mat-mdc-tab-label-container{border-bottom-width:0!important}"] }); }
|
|
1894
|
+
i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(25, 17, "ACCESSIBILITY.CLOSE"));
|
|
1895
|
+
} }, dependencies: [MatDialogModule, i1$3.MatDialogClose, i1$3.MatDialogTitle, i1$3.MatDialogActions, i1$3.MatDialogContent, TranslateModule, MatButtonModule, i7.MatButton, MatTabsModule, i3$1.MatTab, i3$1.MatTabGroup, MatIconModule, i2$1.MatIcon, i9.TranslatePipe], styles: [".settings-title[_ngcontent-%COMP%]{color:var(--base-30);font-weight:600;font-size:.8125rem;margin-bottom:12px}.contrast-wrapper[_ngcontent-%COMP%]{margin-top:24px}.contrast-wrapper[_ngcontent-%COMP%] .contrast-option-wrapper[_ngcontent-%COMP%]{display:flex;gap:12px}.contrast-wrapper[_ngcontent-%COMP%] .contrast-option-wrapper[_ngcontent-%COMP%] .contrast-option[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:center;padding:8px 24px;color:#000!important;background-color:#fff!important;border-radius:8px;width:100%;border:2px solid transparent}.contrast-wrapper[_ngcontent-%COMP%] .contrast-option-wrapper[_ngcontent-%COMP%] .contrast-option.black-white[_ngcontent-%COMP%]{background-color:#000!important;color:#fff!important}.contrast-wrapper[_ngcontent-%COMP%] .contrast-option-wrapper[_ngcontent-%COMP%] .contrast-option.yellow-black[_ngcontent-%COMP%]{background-color:gold!important;color:#000!important}.contrast-wrapper[_ngcontent-%COMP%] .contrast-option-wrapper[_ngcontent-%COMP%] .contrast-option.black-yellow[_ngcontent-%COMP%]{background-color:#000!important;color:gold!important}.contrast-wrapper[_ngcontent-%COMP%] .contrast-option-wrapper[_ngcontent-%COMP%] .contrast-option.active[_ngcontent-%COMP%]{border:2px solid;border-color:var(--base-0)}[_nghost-%COMP%] .mdc-tab--active{background-color:var(--mat-sys-primary-container)!important}[_nghost-%COMP%] .mdc-tab--active .mdc-tab__text-label{color:var(--primary-accent)!important}[_nghost-%COMP%] .mat-mdc-tab{width:50px;border:1px solid var(--base-70)}[_nghost-%COMP%] .mat-mdc-tab:first-child{border-bottom-left-radius:16px;border-top-left-radius:16px}[_nghost-%COMP%] .mat-mdc-tab:last-child{border-bottom-right-radius:16px;border-top-right-radius:16px}[_nghost-%COMP%] .mdc-tab-indicator__content--underline{display:none}[_nghost-%COMP%] .mat-mdc-tab-label-container{border-bottom-width:0!important}"] }); }
|
|
1823
1896
|
}
|
|
1824
1897
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuAccessibilitySettingsComponent, [{
|
|
1825
1898
|
type: Component,
|
|
1826
|
-
args: [{ selector: 'lib-menu-accessibility-settings', imports: [MatDialogModule, TranslateModule, MatButtonModule, MatTabsModule], template: "<h1 mat-dialog-title class=\"text-2-xl\">{{ \"ACCESSIBILITY.TITLE\" | translate }}</h1>\r\n\r\n<div mat-dialog-content>\r\n\t<div class=\"font-size-wrapper\">\r\n\t\t<p class=\"settings-title\">\r\n\t\t\t{{ \"ACCESSIBILITY.FONT_SIZE_LABEL\" | translate }}\r\n\t\t</p>\r\n\r\n\t\t<mat-tab-group [selectedIndex]=\"selectedFontSizeIndex\" (selectedTabChange)=\"selectedFontSizeChanged($event)\" animationDuration=\"0ms\">\r\n\t\t\t<mat-tab [label]=\"'100%'\"></mat-tab>\r\n\t\t\t<mat-tab [label]=\"'150%'\"></mat-tab>\r\n\t\t\t<mat-tab [label]=\"'200%'\"></mat-tab>\r\n\t\t</mat-tab-group>\r\n\t</div>\r\n</div>\r\n\r\n<div mat-dialog-actions>\r\n\t<button mat-stroked-button>{{ \"ACCESSIBILITY.RESET\" | translate }}</button>\r\n\t<button mat-flat-button mat-dialog-close>{{ \"ACCESSIBILITY.CLOSE\" | translate }}</button>\r\n</div>\r\n", styles: [".settings-title{color:var(--base-30);font-weight:600;font-size:.8125rem;margin-bottom:12px}:host ::ng-deep .mdc-tab--active{background-color:var(--mat-sys-primary-container)!important}:host ::ng-deep .mdc-tab--active .mdc-tab__text-label{color:var(--primary-accent)!important}:host ::ng-deep .mat-mdc-tab{width:50px;border:1px solid var(--base-70)}:host ::ng-deep .mat-mdc-tab:first-child{border-bottom-left-radius:16px;border-top-left-radius:16px}:host ::ng-deep .mat-mdc-tab:last-child{border-bottom-right-radius:16px;border-top-right-radius:16px}:host ::ng-deep .mdc-tab-indicator__content--underline{display:none}:host ::ng-deep .mat-mdc-tab-label-container{border-bottom-width:0!important}\n"] }]
|
|
1899
|
+
args: [{ selector: 'lib-menu-accessibility-settings', imports: [MatDialogModule, TranslateModule, MatButtonModule, MatTabsModule, MatIconModule], template: "<h1 mat-dialog-title class=\"text-2-xl\">{{ \"ACCESSIBILITY.TITLE\" | translate }}</h1>\r\n\r\n<div mat-dialog-content>\r\n\t<div class=\"font-size-wrapper\">\r\n\t\t<p class=\"settings-title\">\r\n\t\t\t{{ \"ACCESSIBILITY.FONT_SIZE_LABEL\" | translate }}\r\n\t\t</p>\r\n\r\n\t\t<mat-tab-group [selectedIndex]=\"selectedFontSizeIndex\" (selectedTabChange)=\"selectedFontSizeChanged($event)\" animationDuration=\"0ms\">\r\n\t\t\t<mat-tab [label]=\"'100%'\"></mat-tab>\r\n\t\t\t<mat-tab [label]=\"'150%'\"></mat-tab>\r\n\t\t\t<mat-tab [label]=\"'200%'\"></mat-tab>\r\n\t\t</mat-tab-group>\r\n\t</div>\r\n\r\n\t<div class=\"contrast-wrapper\">\r\n\t\t<p class=\"settings-title\">\r\n\t\t\t{{ \"ACCESSIBILITY.CONTRAST_LABEL\" | translate }}\r\n\t\t</p>\r\n\r\n\t\t<div class=\"contrast-option-wrapper\">\r\n\t\t\t@for (contrast of contrasts; track contrast) {\r\n\t\t\t\t<button (click)=\"changeContrast(contrast)\" [class]=\"contrast\" [class.active]=\"contrast === currentContrast\" class=\"contrast-option\">\r\n\t\t\t\t\t<mat-icon class=\"material-icons-outlined\">visibility</mat-icon>\r\n\t\t\t\t</button>\r\n\t\t\t}\r\n\t\t</div>\r\n\t</div>\r\n</div>\r\n\r\n<div mat-dialog-actions>\r\n\t<button mat-stroked-button>{{ \"ACCESSIBILITY.RESET\" | translate }}</button>\r\n\t<button mat-flat-button mat-dialog-close>{{ \"ACCESSIBILITY.CLOSE\" | translate }}</button>\r\n</div>\r\n", styles: [".settings-title{color:var(--base-30);font-weight:600;font-size:.8125rem;margin-bottom:12px}.contrast-wrapper{margin-top:24px}.contrast-wrapper .contrast-option-wrapper{display:flex;gap:12px}.contrast-wrapper .contrast-option-wrapper .contrast-option{display:flex;justify-content:center;align-items:center;padding:8px 24px;color:#000!important;background-color:#fff!important;border-radius:8px;width:100%;border:2px solid transparent}.contrast-wrapper .contrast-option-wrapper .contrast-option.black-white{background-color:#000!important;color:#fff!important}.contrast-wrapper .contrast-option-wrapper .contrast-option.yellow-black{background-color:gold!important;color:#000!important}.contrast-wrapper .contrast-option-wrapper .contrast-option.black-yellow{background-color:#000!important;color:gold!important}.contrast-wrapper .contrast-option-wrapper .contrast-option.active{border:2px solid;border-color:var(--base-0)}:host ::ng-deep .mdc-tab--active{background-color:var(--mat-sys-primary-container)!important}:host ::ng-deep .mdc-tab--active .mdc-tab__text-label{color:var(--primary-accent)!important}:host ::ng-deep .mat-mdc-tab{width:50px;border:1px solid var(--base-70)}:host ::ng-deep .mat-mdc-tab:first-child{border-bottom-left-radius:16px;border-top-left-radius:16px}:host ::ng-deep .mat-mdc-tab:last-child{border-bottom-right-radius:16px;border-top-right-radius:16px}:host ::ng-deep .mdc-tab-indicator__content--underline{display:none}:host ::ng-deep .mat-mdc-tab-label-container{border-bottom-width:0!important}\n"] }]
|
|
1827
1900
|
}], null, null); })();
|
|
1828
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MenuAccessibilitySettingsComponent, { className: "MenuAccessibilitySettingsComponent", filePath: "lib/components/menu-accessibility/menu-accessibility-settings/menu-accessibility-settings.component.ts", lineNumber:
|
|
1901
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MenuAccessibilitySettingsComponent, { className: "MenuAccessibilitySettingsComponent", filePath: "lib/components/menu-accessibility/menu-accessibility-settings/menu-accessibility-settings.component.ts", lineNumber: 15 }); })();
|
|
1829
1902
|
|
|
1830
1903
|
function MenuAccessibilityComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
|
|
1831
1904
|
i0.ɵɵelementStart(0, "span");
|
|
@@ -1841,6 +1914,7 @@ class MenuAccessibilityComponent {
|
|
|
1841
1914
|
#accessbility = inject(MenuAccessibilityService);
|
|
1842
1915
|
ngOnInit() {
|
|
1843
1916
|
this.#accessbility.setFontSize(this.#accessbility.getSavedFontSize());
|
|
1917
|
+
this.#accessbility.setContrast(this.#accessbility.getSavedContrast());
|
|
1844
1918
|
}
|
|
1845
1919
|
openAccessibilitySettings() {
|
|
1846
1920
|
this.#dialog.open(MenuAccessibilitySettingsComponent);
|
|
@@ -2028,5 +2102,5 @@ const USER_MENU_OPTIONS = {
|
|
|
2028
2102
|
* Generated bundle index. Do not edit.
|
|
2029
2103
|
*/
|
|
2030
2104
|
|
|
2031
|
-
export { MENU_ICON_STRAPI_EXTENSION, MENU_SHARED_CONFIG, MENU_VERSION, MenuColumnsComponent, MenuItemsService, MenuLayoutDirection, MenuModule, NavBaseComponent, SideNavMenuComponent, StarpiMenuService, StrapiDataLocation, USER_MENU_OPTIONS };
|
|
2105
|
+
export { MENU_ICON_STRAPI_EXTENSION, MENU_SHARED_CONFIG, MENU_VERSION, MenuAccessibilityService, MenuColumnsComponent, MenuItemsService, MenuLayoutDirection, MenuModule, NavBaseComponent, SideNavMenuComponent, StarpiMenuService, StrapiDataLocation, USER_MENU_OPTIONS };
|
|
2032
2106
|
//# sourceMappingURL=tilde-nlp-ngx-menu.mjs.map
|