@tilde-nlp/ngx-menu 8.1.15 → 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.
|
@@ -331,14 +331,20 @@ class NavBaseComponent {
|
|
|
331
331
|
class MenuAccessibilityService {
|
|
332
332
|
constructor() {
|
|
333
333
|
this.fontSizeLocalStorageKey = 'ACCESSIBILITY_FONT_SIZE_IX';
|
|
334
|
+
this.contrastLocalStorageKey = 'ACCESSIBILITY_CONTRAST';
|
|
334
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';
|
|
335
344
|
}
|
|
336
345
|
getSavedFontSize() {
|
|
337
346
|
const savedFontSizeIx = localStorage.getItem(this.fontSizeLocalStorageKey);
|
|
338
|
-
|
|
339
|
-
return JSON.parse(savedFontSizeIx);
|
|
340
|
-
}
|
|
341
|
-
return 0;
|
|
347
|
+
return JSON.parse(savedFontSizeIx ?? '0');
|
|
342
348
|
}
|
|
343
349
|
saveFontSize(ix) {
|
|
344
350
|
localStorage.setItem(this.fontSizeLocalStorageKey, ix.toString());
|
|
@@ -353,6 +359,9 @@ class MenuAccessibilityService {
|
|
|
353
359
|
}
|
|
354
360
|
document.querySelector('html').style.fontSize = sizes[fontSizeIx];
|
|
355
361
|
}
|
|
362
|
+
setContrast(contrast) {
|
|
363
|
+
document.querySelector('html').className = contrast;
|
|
364
|
+
}
|
|
356
365
|
static { this.ɵfac = function MenuAccessibilityService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MenuAccessibilityService)(); }; }
|
|
357
366
|
static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: MenuAccessibilityService, factory: MenuAccessibilityService.ɵfac, providedIn: 'root' }); }
|
|
358
367
|
}
|
|
@@ -457,6 +466,7 @@ class SideNavMenuComponent extends NavBaseComponent {
|
|
|
457
466
|
disableStrapi: false,
|
|
458
467
|
disableLogoNavigation: false,
|
|
459
468
|
expandableMenuChildren: false,
|
|
469
|
+
openExternalLinksInSameTab: false,
|
|
460
470
|
useLargeLoginButton: false,
|
|
461
471
|
userOptions: []
|
|
462
472
|
};
|
|
@@ -530,7 +540,7 @@ class SideNavMenuComponent extends NavBaseComponent {
|
|
|
530
540
|
this.domService.localStorage.setItem(this.COLLAPSED_LOCAL_STORAGE_KEY, this.collapsed.toString());
|
|
531
541
|
}
|
|
532
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)); }; }
|
|
533
|
-
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:
|
|
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) {
|
|
534
544
|
i0.ɵɵprojectionDef();
|
|
535
545
|
i0.ɵɵelementStart(0, "div", 0)(1, "a", 1);
|
|
536
546
|
i0.ɵɵpipe(2, "translate");
|
|
@@ -576,14 +586,14 @@ class SideNavMenuComponent extends NavBaseComponent {
|
|
|
576
586
|
i0.ɵɵadvance();
|
|
577
587
|
i0.ɵɵclassProp("no-click", ctx.menuSettings == null ? null : ctx.menuSettings.disableLogoNavigation);
|
|
578
588
|
i0.ɵɵproperty("libPlausibleEvent", ctx.LOGOCLICK_PLAUSIBLE_EVENT)("href", ctx.baseUrl, i0.ɵɵsanitizeUrl);
|
|
579
|
-
i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(2,
|
|
589
|
+
i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(2, 38, "MENU.ARIA_LABELS.LOGO"));
|
|
580
590
|
i0.ɵɵadvance(2);
|
|
581
591
|
i0.ɵɵproperty("src", ctx.menuLogoImage, i0.ɵɵsanitizeUrl);
|
|
582
592
|
i0.ɵɵadvance(2);
|
|
583
593
|
i0.ɵɵtextInterpolate1(" ", ctx.productName, " ");
|
|
584
594
|
i0.ɵɵadvance();
|
|
585
595
|
i0.ɵɵproperty("libPlausibleEvent", ctx.collapsed ? ctx.EXPAND_PLAUSIBLE_EVENT : ctx.COLLAPSE_PLAUSIBLE_EVENT);
|
|
586
|
-
i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(7,
|
|
596
|
+
i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(7, 40, "ARIA_LABELS.MENU_TOGGLER"));
|
|
587
597
|
i0.ɵɵadvance(4);
|
|
588
598
|
i0.ɵɵstyleProp("width", ctx.sideNavWidth);
|
|
589
599
|
i0.ɵɵclassProp("accessibility-view", ctx.isViewIncreased)("collapsed", ctx.collapsed);
|
|
@@ -593,14 +603,14 @@ class SideNavMenuComponent extends NavBaseComponent {
|
|
|
593
603
|
i0.ɵɵadvance();
|
|
594
604
|
i0.ɵɵproperty("ngIf", !ctx.collapsed);
|
|
595
605
|
i0.ɵɵadvance();
|
|
596
|
-
i0.ɵɵproperty("libPlausibleEvent", ctx.collapsed ? ctx.EXPAND_PLAUSIBLE_EVENT : ctx.COLLAPSE_PLAUSIBLE_EVENT)("matTooltip", i0.ɵɵpipeBind1(15,
|
|
597
|
-
i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(16,
|
|
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"));
|
|
598
608
|
i0.ɵɵadvance(3);
|
|
599
609
|
i0.ɵɵproperty("ngClass.lt-sm", "mob-close-icon");
|
|
600
610
|
i0.ɵɵadvance(3);
|
|
601
611
|
i0.ɵɵtextInterpolate(ctx.collapsed ? "keyboard_double_arrow_right" : "keyboard_double_arrow_left");
|
|
602
612
|
i0.ɵɵadvance(2);
|
|
603
|
-
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);
|
|
604
614
|
i0.ɵɵadvance();
|
|
605
615
|
i0.ɵɵproperty("isCollapsed", ctx.collapsed);
|
|
606
616
|
i0.ɵɵadvance();
|
|
@@ -609,11 +619,11 @@ class SideNavMenuComponent extends NavBaseComponent {
|
|
|
609
619
|
i0.ɵɵproperty("userOptions", ctx.menuSettings.userOptions)("username", ctx.username)("collapsed", ctx.collapsed)("useLargeLoginButton", ctx.menuSettings == null ? null : ctx.menuSettings.useLargeLoginButton);
|
|
610
620
|
i0.ɵɵadvance();
|
|
611
621
|
i0.ɵɵconditional(ctx.footerItems.length ? 28 : -1);
|
|
612
|
-
} }, 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
|
|
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}"] }); }
|
|
613
623
|
}
|
|
614
624
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SideNavMenuComponent, [{
|
|
615
625
|
type: Component,
|
|
616
|
-
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></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
|
|
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"] }]
|
|
617
627
|
}], () => [{ type: i1.StrapiLinkService }, { type: i2.DOMService }, { type: MenuItemsService }, { type: MenuAccessibilityService }], { username: [{
|
|
618
628
|
type: Input
|
|
619
629
|
}], menuSettings: [{
|
|
@@ -701,7 +711,7 @@ function MenuItemLinkComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
|
|
|
701
711
|
const ctx_r1 = i0.ɵɵnextContext();
|
|
702
712
|
const linkContent_r3 = i0.ɵɵreference(3);
|
|
703
713
|
i0.ɵɵclassProp("text-center", ctx_r1.menuItemLayout === "column")("active-menu-item", ctx_r1.menuItem === ctx_r1.activeItem);
|
|
704
|
-
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");
|
|
705
715
|
i0.ɵɵadvance(3);
|
|
706
716
|
i0.ɵɵproperty("ngTemplateOutlet", linkContent_r3);
|
|
707
717
|
} }
|
|
@@ -779,8 +789,8 @@ class MenuItemLinkComponent {
|
|
|
779
789
|
this.placeholderService.unregister(this.placeholderServiceId);
|
|
780
790
|
}
|
|
781
791
|
static { this.ɵfac = function MenuItemLinkComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MenuItemLinkComponent)(i0.ɵɵdirectiveInject(i1.StrapiLinkService), i0.ɵɵdirectiveInject(i1.StrapiVariablesService)); }; }
|
|
782
|
-
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",
|
|
783
|
-
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);
|
|
784
794
|
i0.ɵɵtemplate(2, MenuItemLinkComponent_ng_template_2_Template, 2, 2, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
|
|
785
795
|
} if (rf & 2) {
|
|
786
796
|
i0.ɵɵconditional(ctx.menuItem.externalLink ? 0 : 1);
|
|
@@ -788,7 +798,7 @@ class MenuItemLinkComponent {
|
|
|
788
798
|
}
|
|
789
799
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuItemLinkComponent, [{
|
|
790
800
|
type: Component,
|
|
791
|
-
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"] }]
|
|
792
802
|
}], () => [{ type: i1.StrapiLinkService }, { type: i1.StrapiVariablesService }], { direction: [{
|
|
793
803
|
type: Input
|
|
794
804
|
}], labelsVisible: [{
|
|
@@ -797,6 +807,8 @@ class MenuItemLinkComponent {
|
|
|
797
807
|
type: Input
|
|
798
808
|
}], showIcons: [{
|
|
799
809
|
type: Input
|
|
810
|
+
}], openInSameTab: [{
|
|
811
|
+
type: Input
|
|
800
812
|
}], menuItem: [{
|
|
801
813
|
type: Input
|
|
802
814
|
}] }); })();
|
|
@@ -1053,7 +1065,7 @@ function MenuItemWithChildrenComponent_ng_template_4_Template(rf, ctx) { if (rf
|
|
|
1053
1065
|
} if (rf & 2) {
|
|
1054
1066
|
const menuItem_r13 = ctx.menuItem;
|
|
1055
1067
|
const ctx_r1 = i0.ɵɵnextContext();
|
|
1056
|
-
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);
|
|
1057
1069
|
} }
|
|
1058
1070
|
class MenuItemWithChildrenComponent {
|
|
1059
1071
|
constructor() {
|
|
@@ -1078,16 +1090,16 @@ class MenuItemWithChildrenComponent {
|
|
|
1078
1090
|
this.toggleExpand.next(menuItem);
|
|
1079
1091
|
}
|
|
1080
1092
|
static { this.ɵfac = function MenuItemWithChildrenComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MenuItemWithChildrenComponent)(); }; }
|
|
1081
|
-
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) {
|
|
1082
1094
|
i0.ɵɵconditionalCreate(0, MenuItemWithChildrenComponent_Conditional_0_Template, 7, 15)(1, MenuItemWithChildrenComponent_Conditional_1_Template, 9, 14);
|
|
1083
|
-
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);
|
|
1084
1096
|
} if (rf & 2) {
|
|
1085
1097
|
i0.ɵɵconditional(ctx.expandableMenuChildren ? 0 : 1);
|
|
1086
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}"] }); }
|
|
1087
1099
|
}
|
|
1088
1100
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuItemWithChildrenComponent, [{
|
|
1089
1101
|
type: Component,
|
|
1090
|
-
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"] }]
|
|
1091
1103
|
}], null, { menuItem: [{
|
|
1092
1104
|
type: Input
|
|
1093
1105
|
}], labelsVisible: [{
|
|
@@ -1104,6 +1116,8 @@ class MenuItemWithChildrenComponent {
|
|
|
1104
1116
|
type: Input
|
|
1105
1117
|
}], expandableMenuChildren: [{
|
|
1106
1118
|
type: Input
|
|
1119
|
+
}], openInSameTab: [{
|
|
1120
|
+
type: Input
|
|
1107
1121
|
}], openMenu: [{
|
|
1108
1122
|
type: Output
|
|
1109
1123
|
}], toggleExpand: [{
|
|
@@ -1183,14 +1197,14 @@ function MenuItemListComponent_ng_template_5_Template(rf, ctx) { if (rf & 1) {
|
|
|
1183
1197
|
const menuItem_r8 = ctx.menuItem;
|
|
1184
1198
|
const ctx_r0 = i0.ɵɵnextContext();
|
|
1185
1199
|
i0.ɵɵclassProp("active-parent", menuItem_r8.appId === ctx_r0.appId);
|
|
1186
|
-
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);
|
|
1187
1201
|
} }
|
|
1188
1202
|
function MenuItemListComponent_ng_template_7_Template(rf, ctx) { if (rf & 1) {
|
|
1189
1203
|
i0.ɵɵelement(0, "tld-menu-item-link", 15);
|
|
1190
1204
|
} if (rf & 2) {
|
|
1191
1205
|
const menuItem_r9 = ctx.menuItem;
|
|
1192
1206
|
const ctx_r0 = i0.ɵɵnextContext();
|
|
1193
|
-
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);
|
|
1194
1208
|
} }
|
|
1195
1209
|
function MenuItemListComponent_ng_template_9_lib_menu_item_btn_0_Template(rf, ctx) { if (rf & 1) {
|
|
1196
1210
|
i0.ɵɵelement(0, "lib-menu-item-btn", 17);
|
|
@@ -1315,13 +1329,13 @@ class MenuItemListComponent {
|
|
|
1315
1329
|
this.openMenuTrigger.emit();
|
|
1316
1330
|
}
|
|
1317
1331
|
static { this.ɵfac = function MenuItemListComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MenuItemListComponent)(); }; }
|
|
1318
|
-
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) {
|
|
1319
1333
|
i0.ɵɵelementStart(0, "div", 4);
|
|
1320
1334
|
i0.ɵɵconditionalCreate(1, MenuItemListComponent_Conditional_1_Template, 5, 5, "div", 5)(2, MenuItemListComponent_Conditional_2_Template, 1, 1, "ng-container");
|
|
1321
1335
|
i0.ɵɵelementStart(3, "div", 6);
|
|
1322
1336
|
i0.ɵɵtemplate(4, MenuItemListComponent_ng_container_4_Template, 2, 4, "ng-container", 7);
|
|
1323
1337
|
i0.ɵɵelementEnd()();
|
|
1324
|
-
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);
|
|
1325
1339
|
} if (rf & 2) {
|
|
1326
1340
|
i0.ɵɵadvance();
|
|
1327
1341
|
i0.ɵɵconditional(ctx.titleKey && ctx.showTitle && ctx.labelsVisible && !ctx.menuItemGroup.itemGroupClick ? 1 : (ctx.menuItemGroup == null ? null : ctx.menuItemGroup.itemGroupClick) ? 2 : -1);
|
|
@@ -1333,7 +1347,7 @@ class MenuItemListComponent {
|
|
|
1333
1347
|
}
|
|
1334
1348
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuItemListComponent, [{
|
|
1335
1349
|
type: Component,
|
|
1336
|
-
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"] }]
|
|
1337
1351
|
}], null, { direction: [{
|
|
1338
1352
|
type: Input
|
|
1339
1353
|
}], labelsVisible: [{
|
|
@@ -1342,6 +1356,8 @@ class MenuItemListComponent {
|
|
|
1342
1356
|
type: Input
|
|
1343
1357
|
}], showIcons: [{
|
|
1344
1358
|
type: Input
|
|
1359
|
+
}], openExternalLinksInSameTab: [{
|
|
1360
|
+
type: Input
|
|
1345
1361
|
}], expandableMenuChildren: [{
|
|
1346
1362
|
type: Input
|
|
1347
1363
|
}], items: [{
|
|
@@ -1363,7 +1379,7 @@ function MenuColumnsComponent_ng_container_0_menu_item_list_1_Template(rf, ctx)
|
|
|
1363
1379
|
} if (rf & 2) {
|
|
1364
1380
|
const group_r3 = i0.ɵɵnextContext().$implicit;
|
|
1365
1381
|
const ctx_r1 = i0.ɵɵnextContext();
|
|
1366
|
-
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);
|
|
1367
1383
|
} }
|
|
1368
1384
|
function MenuColumnsComponent_ng_container_0_div_2_Template(rf, ctx) { if (rf & 1) {
|
|
1369
1385
|
i0.ɵɵelementStart(0, "div", 5);
|
|
@@ -1380,7 +1396,7 @@ function MenuColumnsComponent_ng_container_0_div_3_Template(rf, ctx) { if (rf &
|
|
|
1380
1396
|
} }
|
|
1381
1397
|
function MenuColumnsComponent_ng_container_0_Template(rf, ctx) { if (rf & 1) {
|
|
1382
1398
|
i0.ɵɵelementContainerStart(0);
|
|
1383
|
-
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);
|
|
1384
1400
|
i0.ɵɵelementContainerEnd();
|
|
1385
1401
|
} if (rf & 2) {
|
|
1386
1402
|
const group_r3 = ctx.$implicit;
|
|
@@ -1413,6 +1429,7 @@ class MenuColumnsComponent {
|
|
|
1413
1429
|
this.direction = MenuLayoutDirection.column;
|
|
1414
1430
|
this.isOpen = true;
|
|
1415
1431
|
this.expandableMenuChildren = false;
|
|
1432
|
+
this.openExternalLinksInSameTab = false;
|
|
1416
1433
|
this.toggleCollapseEvent = new EventEmitter();
|
|
1417
1434
|
}
|
|
1418
1435
|
ngOnInit() {
|
|
@@ -1432,7 +1449,7 @@ class MenuColumnsComponent {
|
|
|
1432
1449
|
return this.isOpen && ResolutionHelper.isMobileRes() && (this.active && Object.values(this.active)?.length > 0);
|
|
1433
1450
|
}
|
|
1434
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)); }; }
|
|
1435
|
-
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) {
|
|
1436
1453
|
i0.ɵɵtemplate(0, MenuColumnsComponent_ng_container_0_Template, 4, 3, "ng-container", 0);
|
|
1437
1454
|
} if (rf & 2) {
|
|
1438
1455
|
i0.ɵɵproperty("ngForOf", ctx.mergedGroups);
|
|
@@ -1440,7 +1457,7 @@ class MenuColumnsComponent {
|
|
|
1440
1457
|
}
|
|
1441
1458
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuColumnsComponent, [{
|
|
1442
1459
|
type: Component,
|
|
1443
|
-
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"] }]
|
|
1444
1461
|
}], () => [{ type: i1$1.Router }, { type: undefined, decorators: [{
|
|
1445
1462
|
type: Optional
|
|
1446
1463
|
}, {
|
|
@@ -1452,6 +1469,8 @@ class MenuColumnsComponent {
|
|
|
1452
1469
|
type: Input
|
|
1453
1470
|
}], expandableMenuChildren: [{
|
|
1454
1471
|
type: Input
|
|
1472
|
+
}], openExternalLinksInSameTab: [{
|
|
1473
|
+
type: Input
|
|
1455
1474
|
}], toggleCollapseEvent: [{
|
|
1456
1475
|
type: Output
|
|
1457
1476
|
}], active: [{
|
|
@@ -1789,10 +1808,34 @@ class MenuLangSwitcherComponent {
|
|
|
1789
1808
|
}] }); })();
|
|
1790
1809
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MenuLangSwitcherComponent, { className: "MenuLangSwitcherComponent", filePath: "lib/components/menu-lang-switcher/menu-lang-switcher.component.ts", lineNumber: 11 }); })();
|
|
1791
1810
|
|
|
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
|
+
} }
|
|
1792
1824
|
class MenuAccessibilitySettingsComponent {
|
|
1793
|
-
|
|
1825
|
+
constructor() {
|
|
1826
|
+
this.currentContrast = 'base';
|
|
1827
|
+
this.#accessibility = inject(MenuAccessibilityService);
|
|
1828
|
+
this.contrasts = ['base', 'black-white', 'yellow-black', 'black-yellow'];
|
|
1829
|
+
}
|
|
1830
|
+
#accessibility;
|
|
1794
1831
|
ngOnInit() {
|
|
1795
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);
|
|
1796
1839
|
}
|
|
1797
1840
|
selectedFontSizeChanged(e) {
|
|
1798
1841
|
this.selectedFontSizeIndex = e.index;
|
|
@@ -1800,7 +1843,7 @@ class MenuAccessibilitySettingsComponent {
|
|
|
1800
1843
|
this.#accessibility.setFontSize(this.selectedFontSizeIndex);
|
|
1801
1844
|
}
|
|
1802
1845
|
static { this.ɵfac = function MenuAccessibilitySettingsComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MenuAccessibilitySettingsComponent)(); }; }
|
|
1803
|
-
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) {
|
|
1804
1847
|
i0.ɵɵelementStart(0, "h1", 0);
|
|
1805
1848
|
i0.ɵɵtext(1);
|
|
1806
1849
|
i0.ɵɵpipe(2, "translate");
|
|
@@ -1812,20 +1855,27 @@ class MenuAccessibilitySettingsComponent {
|
|
|
1812
1855
|
i0.ɵɵelementStart(8, "mat-tab-group", 4);
|
|
1813
1856
|
i0.ɵɵlistener("selectedTabChange", function MenuAccessibilitySettingsComponent_Template_mat_tab_group_selectedTabChange_8_listener($event) { return ctx.selectedFontSizeChanged($event); });
|
|
1814
1857
|
i0.ɵɵelement(9, "mat-tab", 5)(10, "mat-tab", 5)(11, "mat-tab", 5);
|
|
1815
|
-
i0.ɵɵelementEnd()()
|
|
1816
|
-
i0.ɵɵelementStart(12, "div", 6)(13, "
|
|
1858
|
+
i0.ɵɵelementEnd()();
|
|
1859
|
+
i0.ɵɵelementStart(12, "div", 6)(13, "p", 3);
|
|
1817
1860
|
i0.ɵɵtext(14);
|
|
1818
1861
|
i0.ɵɵpipe(15, "translate");
|
|
1819
1862
|
i0.ɵɵelementEnd();
|
|
1820
|
-
i0.ɵɵelementStart(16, "
|
|
1821
|
-
i0.ɵɵ
|
|
1822
|
-
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");
|
|
1823
1873
|
i0.ɵɵelementEnd()();
|
|
1824
1874
|
} if (rf & 2) {
|
|
1825
1875
|
i0.ɵɵadvance();
|
|
1826
|
-
i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(2,
|
|
1876
|
+
i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(2, 9, "ACCESSIBILITY.TITLE"));
|
|
1827
1877
|
i0.ɵɵadvance(5);
|
|
1828
|
-
i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(7,
|
|
1878
|
+
i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(7, 11, "ACCESSIBILITY.FONT_SIZE_LABEL"), " ");
|
|
1829
1879
|
i0.ɵɵadvance(2);
|
|
1830
1880
|
i0.ɵɵproperty("selectedIndex", ctx.selectedFontSizeIndex);
|
|
1831
1881
|
i0.ɵɵadvance();
|
|
@@ -1835,16 +1885,20 @@ class MenuAccessibilitySettingsComponent {
|
|
|
1835
1885
|
i0.ɵɵadvance();
|
|
1836
1886
|
i0.ɵɵproperty("label", "200%");
|
|
1837
1887
|
i0.ɵɵadvance(3);
|
|
1838
|
-
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"));
|
|
1839
1893
|
i0.ɵɵadvance(3);
|
|
1840
|
-
i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(
|
|
1841
|
-
} }, 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}"] }); }
|
|
1842
1896
|
}
|
|
1843
1897
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuAccessibilitySettingsComponent, [{
|
|
1844
1898
|
type: Component,
|
|
1845
|
-
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"] }]
|
|
1846
1900
|
}], null, null); })();
|
|
1847
|
-
(() => { (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 }); })();
|
|
1848
1902
|
|
|
1849
1903
|
function MenuAccessibilityComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
|
|
1850
1904
|
i0.ɵɵelementStart(0, "span");
|
|
@@ -1860,6 +1914,7 @@ class MenuAccessibilityComponent {
|
|
|
1860
1914
|
#accessbility = inject(MenuAccessibilityService);
|
|
1861
1915
|
ngOnInit() {
|
|
1862
1916
|
this.#accessbility.setFontSize(this.#accessbility.getSavedFontSize());
|
|
1917
|
+
this.#accessbility.setContrast(this.#accessbility.getSavedContrast());
|
|
1863
1918
|
}
|
|
1864
1919
|
openAccessibilitySettings() {
|
|
1865
1920
|
this.#dialog.open(MenuAccessibilitySettingsComponent);
|