@tilde-nlp/ngx-menu 6.1.47 → 6.1.49
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/components/menu-item-link/menu-item-link.component.mjs +4 -6
- package/esm2022/lib/components/menu-item-list/menu-item-list.component.mjs +6 -6
- package/esm2022/lib/components/menu-profile/menu-profile.component.mjs +17 -20
- package/esm2022/lib/components/side-nav-menu/side-nav-menu.component.mjs +8 -5
- package/esm2022/lib/constants/user-menu-options.const.mjs +21 -1
- package/fesm2022/tilde-nlp-ngx-menu.mjs +51 -34
- package/fesm2022/tilde-nlp-ngx-menu.mjs.map +1 -1
- package/lib/components/menu-item-link/menu-item-link.component.d.ts +1 -2
- package/lib/components/menu-profile/menu-profile.component.d.ts +6 -6
- package/lib/components/side-nav-menu/side-nav-menu.component.d.ts +2 -1
- package/lib/constants/user-menu-options.const.d.ts +3 -0
- package/package.json +1 -1
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { SelectLanguageDialogComponent } from '@tilde-nlp/ngx-common';
|
|
1
2
|
/**
|
|
2
3
|
* Prefefined user menu options, so that same style of items are used across all products. Use this by passing necessary configuration.
|
|
3
4
|
*/
|
|
@@ -27,10 +28,29 @@ export const USER_MENU_OPTIONS = {
|
|
|
27
28
|
icon: { name: `mail` },
|
|
28
29
|
link: { href, isExternal: true, callback },
|
|
29
30
|
}),
|
|
31
|
+
/** use language update callback to save in localstorage */
|
|
32
|
+
changeLanguage: (dialog, languages, languageChangeCallback) => ({
|
|
33
|
+
label: 'MENU.CHANGE_LANGUAGE',
|
|
34
|
+
icon: { name: 'language' },
|
|
35
|
+
button: {
|
|
36
|
+
callback: () => {
|
|
37
|
+
dialog
|
|
38
|
+
.open(SelectLanguageDialogComponent, {
|
|
39
|
+
data: { languages: languages },
|
|
40
|
+
})
|
|
41
|
+
.afterClosed()
|
|
42
|
+
.subscribe((language) => {
|
|
43
|
+
if (language && languageChangeCallback) {
|
|
44
|
+
languageChangeCallback(language);
|
|
45
|
+
}
|
|
46
|
+
});
|
|
47
|
+
},
|
|
48
|
+
},
|
|
49
|
+
}),
|
|
30
50
|
logout: (callback) => ({
|
|
31
51
|
icon: { name: 'logout' },
|
|
32
52
|
label: 'MENU.LOG_OUT',
|
|
33
53
|
button: { callback: () => callback() },
|
|
34
54
|
}),
|
|
35
55
|
};
|
|
36
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
56
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXNlci1tZW51LW9wdGlvbnMuY29uc3QuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtbWVudS9zcmMvbGliL2NvbnN0YW50cy91c2VyLW1lbnUtb3B0aW9ucy5jb25zdC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFQSxPQUFPLEVBQUUsNkJBQTZCLEVBQUUsTUFBTSx1QkFBdUIsQ0FBQztBQUV0RTs7R0FFRztBQUNILE1BQU0sQ0FBQyxNQUFNLGlCQUFpQixHQUFHO0lBQy9CLFlBQVksRUFBRSxDQUFDLElBQVksRUFBRSxRQUFxQixFQUFrQixFQUFFLENBQUMsQ0FBQztRQUN0RSxJQUFJLEVBQUUsRUFBRSxJQUFJLEVBQUUsYUFBYSxFQUFFO1FBQzdCLEtBQUssRUFBRSxtQkFBbUI7UUFDMUIsSUFBSSxFQUFFLEVBQUUsSUFBSSxFQUFFLElBQUksRUFBRSxRQUFRLEVBQUU7S0FDL0IsQ0FBQztJQUNGLFVBQVUsRUFBRSxDQUFDLElBQVksRUFBRSxRQUFxQixFQUFrQixFQUFFLENBQUMsQ0FBQztRQUNwRSxJQUFJLEVBQUUsRUFBRSxJQUFJLEVBQUUsY0FBYyxFQUFFO1FBQzlCLEtBQUssRUFBRSxtQkFBbUI7UUFDMUIsSUFBSSxFQUFFLEVBQUUsSUFBSSxFQUFFLFVBQVUsRUFBRSxJQUFJLEVBQUUsUUFBUSxFQUFFO0tBQzNDLENBQUM7SUFDRixPQUFPLEVBQUUsQ0FBQyxJQUFZLEVBQUUsUUFBcUIsRUFBa0IsRUFBRSxDQUFDLENBQUM7UUFDakUsSUFBSSxFQUFFLEVBQUUsSUFBSSxFQUFFLFdBQVcsRUFBRTtRQUMzQixLQUFLLEVBQUUsY0FBYztRQUNyQixJQUFJLEVBQUUsRUFBRSxJQUFJLEVBQUUsVUFBVSxFQUFFLElBQUksRUFBRSxRQUFRLEVBQUU7S0FDM0MsQ0FBQztJQUNGLElBQUksRUFBRSxDQUFDLElBQVksRUFBRSxJQUEwQyxFQUFFLFFBQXFCLEVBQWtCLEVBQUUsQ0FBQyxDQUFDO1FBQzFHLEtBQUssRUFBRSxrQkFBa0I7UUFDekIsSUFBSSxFQUFFLEVBQUUsSUFBSSxFQUFFLElBQUksQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsTUFBTSxFQUFFLFFBQVEsRUFBRSxJQUFJLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsQ0FBQyxDQUFDLEtBQUssRUFBRTtRQUNqRixJQUFJLEVBQUUsRUFBRSxJQUFJLEVBQUUsVUFBVSxFQUFFLElBQUksRUFBRSxRQUFRLEVBQUU7S0FDM0MsQ0FBQztJQUNGLFNBQVMsRUFBRSxDQUFDLElBQVksRUFBRSxRQUFxQixFQUFrQixFQUFFLENBQUMsQ0FBQztRQUNuRSxLQUFLLEVBQUUsaUJBQWlCO1FBQ3hCLElBQUksRUFBRSxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUU7UUFDdEIsSUFBSSxFQUFFLEVBQUUsSUFBSSxFQUFFLFVBQVUsRUFBRSxJQUFJLEVBQUUsUUFBUSxFQUFFO0tBQzNDLENBQUM7SUFDRiwyREFBMkQ7SUFDM0QsY0FBYyxFQUFFLENBQ2QsTUFBaUIsRUFDakIsU0FBbUIsRUFDbkIsc0JBQW1ELEVBQ25DLEVBQUUsQ0FBQyxDQUFDO1FBQ3BCLEtBQUssRUFBRSxzQkFBc0I7UUFDN0IsSUFBSSxFQUFFLEVBQUUsSUFBSSxFQUFFLFVBQVUsRUFBRTtRQUMxQixNQUFNLEVBQUU7WUFDTixRQUFRLEVBQUUsR0FBRyxFQUFFO2dCQUNiLE1BQU07cUJBQ0gsSUFBSSxDQUFDLDZCQUE2QixFQUFFO29CQUNuQyxJQUFJLEVBQUUsRUFBRSxTQUFTLEVBQUUsU0FBUyxFQUFFO2lCQUMvQixDQUFDO3FCQUNELFdBQVcsRUFBRTtxQkFDYixTQUFTLENBQUMsQ0FBQyxRQUFnQixFQUFFLEVBQUU7b0JBQzlCLElBQUksUUFBUSxJQUFJLHNCQUFzQixFQUFFLENBQUM7d0JBQ3ZDLHNCQUFzQixDQUFDLFFBQVEsQ0FBQyxDQUFDO29CQUNuQyxDQUFDO2dCQUNILENBQUMsQ0FBQyxDQUFDO1lBQ1AsQ0FBQztTQUNGO0tBQ0YsQ0FBQztJQUNGLE1BQU0sRUFBRSxDQUFDLFFBQW9CLEVBQWtCLEVBQUUsQ0FBQyxDQUFDO1FBQ2pELElBQUksRUFBRSxFQUFFLElBQUksRUFBRSxRQUFRLEVBQUU7UUFDeEIsS0FBSyxFQUFFLGNBQWM7UUFDckIsTUFBTSxFQUFFLEVBQUUsUUFBUSxFQUFFLEdBQUcsRUFBRSxDQUFDLFFBQVEsRUFBRSxFQUFFO0tBQ3ZDLENBQUM7Q0FDSCxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgVXNlck1lbnVPcHRpb24gfSBmcm9tICcuLi9jb21wb25lbnRzL3NpZGUtbmF2LW1lbnUvbW9kZWxzL3VzZXItbWVudS1vcHRpb24ubW9kZWwnO1xyXG5pbXBvcnQgeyBNYXREaWFsb2cgfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC9kaWFsb2cnO1xyXG5pbXBvcnQgeyBTZWxlY3RMYW5ndWFnZURpYWxvZ0NvbXBvbmVudCB9IGZyb20gJ0B0aWxkZS1ubHAvbmd4LWNvbW1vbic7XHJcblxyXG4vKipcclxuICogUHJlZmVmaW5lZCB1c2VyIG1lbnUgb3B0aW9ucywgc28gdGhhdCBzYW1lIHN0eWxlIG9mIGl0ZW1zIGFyZSB1c2VkIGFjcm9zcyBhbGwgcHJvZHVjdHMuIFVzZSB0aGlzIGJ5IHBhc3NpbmcgbmVjZXNzYXJ5IGNvbmZpZ3VyYXRpb24uXHJcbiAqL1xyXG5leHBvcnQgY29uc3QgVVNFUl9NRU5VX09QVElPTlMgPSB7XHJcbiAgc3Vic2NyaXB0aW9uOiAoaHJlZjogc3RyaW5nLCBjYWxsYmFjaz86ICgpID0+IHZvaWQpOiBVc2VyTWVudU9wdGlvbiA9PiAoe1xyXG4gICAgaWNvbjogeyBuYW1lOiAnY3JlZGl0X2NhcmQnIH0sXHJcbiAgICBsYWJlbDogJ01FTlUuU1VCU0NSSVBUSU9OJyxcclxuICAgIGxpbms6IHsgaHJlZjogaHJlZiwgY2FsbGJhY2sgfSxcclxuICB9KSxcclxuICB0ZXJtc09mVXNlOiAoaHJlZjogc3RyaW5nLCBjYWxsYmFjaz86ICgpID0+IHZvaWQpOiBVc2VyTWVudU9wdGlvbiA9PiAoe1xyXG4gICAgaWNvbjogeyBuYW1lOiAndGV4dF9zbmlwcGV0JyB9LFxyXG4gICAgbGFiZWw6ICdNRU5VLlRFUk1TX09GX1VTRScsXHJcbiAgICBsaW5rOiB7IGhyZWYsIGlzRXh0ZXJuYWw6IHRydWUsIGNhbGxiYWNrIH0sXHJcbiAgfSksXHJcbiAgcHJpdmFjeTogKGhyZWY6IHN0cmluZywgY2FsbGJhY2s/OiAoKSA9PiB2b2lkKTogVXNlck1lbnVPcHRpb24gPT4gKHtcclxuICAgIGljb246IHsgbmFtZTogJ2dwcF9tYXliZScgfSxcclxuICAgIGxhYmVsOiAnTUVOVS5QUklWQUNZJyxcclxuICAgIGxpbms6IHsgaHJlZiwgaXNFeHRlcm5hbDogdHJ1ZSwgY2FsbGJhY2sgfSxcclxuICB9KSxcclxuICBoZWxwOiAoaHJlZjogc3RyaW5nLCBpY29uPzogeyBuYW1lOiBzdHJpbmcsIGlzQ3VzdG9tOiBib29sZWFuIH0sIGNhbGxiYWNrPzogKCkgPT4gdm9pZCk6IFVzZXJNZW51T3B0aW9uID0+ICh7XHJcbiAgICBsYWJlbDogJ01FTlUuSEVMUF9DRU5URVInLFxyXG4gICAgaWNvbjogeyBuYW1lOiBpY29uID8gaWNvbi5uYW1lIDogYGhlbHBgLCBpc0N1c3RvbTogaWNvbiA/IGljb24uaXNDdXN0b20gOiBmYWxzZSB9LFxyXG4gICAgbGluazogeyBocmVmLCBpc0V4dGVybmFsOiB0cnVlLCBjYWxsYmFjayB9LFxyXG4gIH0pLFxyXG4gIGNvbnRhY3RVczogKGhyZWY6IHN0cmluZywgY2FsbGJhY2s/OiAoKSA9PiB2b2lkKTogVXNlck1lbnVPcHRpb24gPT4gKHtcclxuICAgIGxhYmVsOiAnTUVOVS5DT05UQUNUX1VTJyxcclxuICAgIGljb246IHsgbmFtZTogYG1haWxgIH0sXHJcbiAgICBsaW5rOiB7IGhyZWYsIGlzRXh0ZXJuYWw6IHRydWUsIGNhbGxiYWNrIH0sXHJcbiAgfSksXHJcbiAgLyoqIHVzZSBsYW5ndWFnZSB1cGRhdGUgY2FsbGJhY2sgdG8gc2F2ZSBpbiBsb2NhbHN0b3JhZ2UgKi9cclxuICBjaGFuZ2VMYW5ndWFnZTogKFxyXG4gICAgZGlhbG9nOiBNYXREaWFsb2csXHJcbiAgICBsYW5ndWFnZXM6IHN0cmluZ1tdLFxyXG4gICAgbGFuZ3VhZ2VDaGFuZ2VDYWxsYmFjaz86IChsYW5ndWFnZTogc3RyaW5nKSA9PiB2b2lkXHJcbiAgKTogVXNlck1lbnVPcHRpb24gPT4gKHtcclxuICAgIGxhYmVsOiAnTUVOVS5DSEFOR0VfTEFOR1VBR0UnLFxyXG4gICAgaWNvbjogeyBuYW1lOiAnbGFuZ3VhZ2UnIH0sXHJcbiAgICBidXR0b246IHtcclxuICAgICAgY2FsbGJhY2s6ICgpID0+IHtcclxuICAgICAgICBkaWFsb2dcclxuICAgICAgICAgIC5vcGVuKFNlbGVjdExhbmd1YWdlRGlhbG9nQ29tcG9uZW50LCB7XHJcbiAgICAgICAgICAgIGRhdGE6IHsgbGFuZ3VhZ2VzOiBsYW5ndWFnZXMgfSxcclxuICAgICAgICAgIH0pXHJcbiAgICAgICAgICAuYWZ0ZXJDbG9zZWQoKVxyXG4gICAgICAgICAgLnN1YnNjcmliZSgobGFuZ3VhZ2U6IHN0cmluZykgPT4ge1xyXG4gICAgICAgICAgICBpZiAobGFuZ3VhZ2UgJiYgbGFuZ3VhZ2VDaGFuZ2VDYWxsYmFjaykge1xyXG4gICAgICAgICAgICAgIGxhbmd1YWdlQ2hhbmdlQ2FsbGJhY2sobGFuZ3VhZ2UpO1xyXG4gICAgICAgICAgICB9XHJcbiAgICAgICAgICB9KTtcclxuICAgICAgfSxcclxuICAgIH0sXHJcbiAgfSksXHJcbiAgbG9nb3V0OiAoY2FsbGJhY2s6ICgpID0+IHZvaWQpOiBVc2VyTWVudU9wdGlvbiA9PiAoe1xyXG4gICAgaWNvbjogeyBuYW1lOiAnbG9nb3V0JyB9LFxyXG4gICAgbGFiZWw6ICdNRU5VLkxPR19PVVQnLFxyXG4gICAgYnV0dG9uOiB7IGNhbGxiYWNrOiAoKSA9PiBjYWxsYmFjaygpIH0sXHJcbiAgfSksXHJcbn07XHJcbiJdfQ==
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Injectable, Optional, Inject, Component, Input, EventEmitter, Output, inject, NgModule } from '@angular/core';
|
|
2
|
+
import { Injectable, Optional, Inject, Component, Input, EventEmitter, Output, input, output, inject, NgModule } from '@angular/core';
|
|
3
3
|
import * as i2 from '@tilde-nlp/ngx-common';
|
|
4
|
-
import { ResolutionHelper, PlausibleModule, LanguageTranslateModule } from '@tilde-nlp/ngx-common';
|
|
4
|
+
import { ResolutionHelper, PlausibleModule, LanguageTranslateModule, SelectLanguageDialogComponent } from '@tilde-nlp/ngx-common';
|
|
5
5
|
import * as i1$1 from '@angular/router';
|
|
6
6
|
import { NavigationEnd, RouterModule } from '@angular/router';
|
|
7
7
|
import { map, BehaviorSubject, filter } from 'rxjs';
|
|
@@ -335,6 +335,7 @@ class SideNavMenuComponent extends NavBaseComponent {
|
|
|
335
335
|
disableLogoNavigation: false,
|
|
336
336
|
userOptions: []
|
|
337
337
|
};
|
|
338
|
+
this.useDefaultLanguageSwitcher = true;
|
|
338
339
|
this.changeLanguageEvent = new EventEmitter();
|
|
339
340
|
this.collapsed = false;
|
|
340
341
|
this.COLLAPSED_LOCAL_STORAGE_KEY = "TLD_MENU_SIDE_NAV_COLLAPSED";
|
|
@@ -388,7 +389,7 @@ class SideNavMenuComponent extends NavBaseComponent {
|
|
|
388
389
|
this.domService.localStorage.setItem(this.COLLAPSED_LOCAL_STORAGE_KEY, this.collapsed.toString());
|
|
389
390
|
}
|
|
390
391
|
static { this.ɵfac = function SideNavMenuComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SideNavMenuComponent)(i0.ɵɵdirectiveInject(i1.StrapiLinkService), i0.ɵɵdirectiveInject(i2.DOMService), i0.ɵɵdirectiveInject(MenuItemsService)); }; }
|
|
391
|
-
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SideNavMenuComponent, selectors: [["lib-side-nav-menu"]], inputs: { username: "username", menuSettings: "menuSettings", productName: "productName", supportedLanguages: "supportedLanguages" }, outputs: { changeLanguageEvent: "changeLanguageEvent" }, features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c0$2, decls: 28, vars: 37, consts: [["fxHide.gt-xs", ""], [1, "mobile-header", 3, "fxHide"], ["fxFlex", "3.125em", "fxLayoutAlign", "start center", 3, "click", "libPlausibleEvent", "href"], ["height", "40", "width", "40", "alt", "logo", 1, "menu-logo", 3, "src"], [1, "menu-product-name"], ["mat-icon-button", "", 1, "toggler", 3, "click", "libPlausibleEvent"], ["fxLayout", "column", 1, "menu-container", 3, "ngClass.lt-sm"], ["fxLayout", "column", "fxFlexFill", "", 1, "content"], ["fxLayout", "row", 1, "menu-container-header", 3, "fxLayoutAlign"], ["fxFlex", "3.125em", "fxLayoutAlign", "start center", 3, "libPlausibleEvent", "no-click", "href", "click", 4, "ngIf"], ["mat-icon-button", "", 1, "toggler", 3, "click", "libPlausibleEvent", "matTooltip"], ["fxHide.gt-xs", "", 3, "ngClass.lt-sm"], ["fxHide.lt-sm", ""], ["fxLayout", "column", 1, "menu-wrapper"], ["role", "navigation", 3, "toggleCollapseEvent", "direction", "isOpen", "active"], [3, "isCollapsed", "languages"], ["fxFlex", "", "fxLayout", "column"], [3, "linkCallbackEvent", "userOptions", "username", "collapsed"], [3, "changeLanguageEvent", "isCollapsed", "languages"]], template: function SideNavMenuComponent_Template(rf, ctx) { if (rf & 1) {
|
|
392
|
+
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" }, features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c0$2, decls: 28, vars: 37, consts: [["fxHide.gt-xs", ""], [1, "mobile-header", 3, "fxHide"], ["fxFlex", "3.125em", "fxLayoutAlign", "start center", 3, "click", "libPlausibleEvent", "href"], ["height", "40", "width", "40", "alt", "logo", 1, "menu-logo", 3, "src"], [1, "menu-product-name"], ["mat-icon-button", "", 1, "toggler", 3, "click", "libPlausibleEvent"], ["fxLayout", "column", 1, "menu-container", 3, "ngClass.lt-sm"], ["fxLayout", "column", "fxFlexFill", "", 1, "content"], ["fxLayout", "row", 1, "menu-container-header", 3, "fxLayoutAlign"], ["fxFlex", "3.125em", "fxLayoutAlign", "start center", 3, "libPlausibleEvent", "no-click", "href", "click", 4, "ngIf"], ["mat-icon-button", "", 1, "toggler", 3, "click", "libPlausibleEvent", "matTooltip"], ["fxHide.gt-xs", "", 3, "ngClass.lt-sm"], ["fxHide.lt-sm", ""], ["fxLayout", "column", 1, "menu-wrapper"], ["role", "navigation", 3, "toggleCollapseEvent", "direction", "isOpen", "active"], [3, "isCollapsed", "languages"], ["fxFlex", "", "fxLayout", "column"], [3, "linkCallbackEvent", "userOptions", "username", "collapsed"], [3, "changeLanguageEvent", "isCollapsed", "languages"]], template: function SideNavMenuComponent_Template(rf, ctx) { if (rf & 1) {
|
|
392
393
|
i0.ɵɵprojectionDef();
|
|
393
394
|
i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "a", 2);
|
|
394
395
|
i0.ɵɵpipe(3, "translate");
|
|
@@ -458,14 +459,14 @@ class SideNavMenuComponent extends NavBaseComponent {
|
|
|
458
459
|
i0.ɵɵadvance(2);
|
|
459
460
|
i0.ɵɵproperty("direction", ctx.direction)("isOpen", !ctx.collapsed)("active", ctx.active);
|
|
460
461
|
i0.ɵɵadvance();
|
|
461
|
-
i0.ɵɵconditional(ctx.supportedLanguages.length > 1 ? 24 : -1);
|
|
462
|
+
i0.ɵɵconditional(ctx.useDefaultLanguageSwitcher && ctx.supportedLanguages.length > 1 ? 24 : -1);
|
|
462
463
|
i0.ɵɵadvance(3);
|
|
463
464
|
i0.ɵɵproperty("userOptions", ctx.menuSettings.userOptions)("username", ctx.username)("collapsed", ctx.collapsed);
|
|
464
|
-
} }, styles: ["a[_ngcontent-%COMP%]{text-decoration:none}.no-click[_ngcontent-%COMP%]{pointer-events:none!important}.mobile-header[_ngcontent-%COMP%]{display:flex;justify-content:space-between;padding:23px 27px;background-color:#fcfcfc;border:1px solid var(--base-70)}.mobile.menu-container.collapsed[_ngcontent-%COMP%]{display:none!important}.mobile.menu-container[_ngcontent-%COMP%]:not(.collapsed){display:block!important;position:fixed;min-width:100vw;min-height:100dvh;z-index:1000}button[_ngcontent-%COMP%]:has(.mob-close-icon){margin-right:14px}.menu-container[_ngcontent-%COMP%] [_ngcontent-%COMP%]::-webkit-scrollbar{width:5px}.menu-container[_ngcontent-%COMP%] [_ngcontent-%COMP%]::-webkit-scrollbar-thumb{background:var(--base-95);background-clip:padding-box}.menu-container[_ngcontent-%COMP%] [_ngcontent-%COMP%]::-webkit-scrollbar-track{background:var(--base-100)}.menu-product-name[_ngcontent-%COMP%]{white-space:nowrap;margin-left:12px;font-weight:600;color:var(--base-10)}.menu-container[_ngcontent-%COMP%]{max-height:100dvh;white-space:nowrap;height:100%;transition:width .2s ease;min-height:100dvh;overflow:auto;background:var(--base-100);border-right:2px solid var(--base-95)}.menu-container[_ngcontent-%COMP%] .menu-container-header[_ngcontent-%COMP%]{margin:24px 0;max-height:40px}.menu-container.collapsed[_ngcontent-%COMP%] .menu-container-header[_ngcontent-%COMP%]{margin:24px 0 32px!important}.menu-container[_ngcontent-%COMP%] .content[_ngcontent-%COMP%]:not(.collapsed){overflow-x:hidden;padding:0 12px}.menu-container[_ngcontent-%COMP%] .content[_ngcontent-%COMP%]:not(.collapsed) .menu-logo[_ngcontent-%COMP%]{margin-left:16px;max-width:100%}.menu-container[_ngcontent-%COMP%] .divider[_ngcontent-%COMP%]{width:100%}[_nghost-%COMP%] .collapsed .profile-wrapper{margin:36px 0!important}[_nghost-%COMP%] .mobile .profile-name{max-width:60vw}[_nghost-%COMP%] .menu-item{display:flex;padding:16px!important;border-radius:4px!important}[_nghost-%COMP%] .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
|
|
465
|
+
} }, styles: ["a[_ngcontent-%COMP%]{text-decoration:none}.no-click[_ngcontent-%COMP%]{pointer-events:none!important}.mobile-header[_ngcontent-%COMP%]{display:flex;justify-content:space-between;padding:23px 27px;background-color:#fcfcfc;border:1px solid var(--base-70)}.mobile.menu-container.collapsed[_ngcontent-%COMP%]{display:none!important}.mobile.menu-container[_ngcontent-%COMP%]:not(.collapsed){display:block!important;position:fixed;min-width:100vw;min-height:100dvh;z-index:1000}button[_ngcontent-%COMP%]:has(.mob-close-icon){margin-right:14px}.menu-container[_ngcontent-%COMP%] [_ngcontent-%COMP%]::-webkit-scrollbar{width:5px}.menu-container[_ngcontent-%COMP%] [_ngcontent-%COMP%]::-webkit-scrollbar-thumb{background:var(--base-95);background-clip:padding-box}.menu-container[_ngcontent-%COMP%] [_ngcontent-%COMP%]::-webkit-scrollbar-track{background:var(--base-100)}.menu-product-name[_ngcontent-%COMP%]{white-space:nowrap;margin-left:12px;font-weight:600;color:var(--base-10)}.menu-container[_ngcontent-%COMP%]{max-height:100dvh;white-space:nowrap;height:100%;transition:width .2s ease;min-height:100dvh;overflow:auto;background:var(--base-100);border-right:2px solid var(--base-95)}.menu-container[_ngcontent-%COMP%] .menu-container-header[_ngcontent-%COMP%]{margin:24px 0;max-height:40px}.menu-container.collapsed[_ngcontent-%COMP%] .menu-container-header[_ngcontent-%COMP%]{margin:24px 0 32px!important}.menu-container[_ngcontent-%COMP%] .content[_ngcontent-%COMP%]:not(.collapsed){overflow-x:hidden;padding:0 12px}.menu-container[_ngcontent-%COMP%] .content[_ngcontent-%COMP%]:not(.collapsed) .menu-logo[_ngcontent-%COMP%]{margin-left:16px;max-width:100%}.menu-container[_ngcontent-%COMP%] .divider[_ngcontent-%COMP%]{width:100%}[_nghost-%COMP%] .collapsed .profile-wrapper{margin:36px 0!important}[_nghost-%COMP%] .mobile .profile-name{max-width:60vw}[_nghost-%COMP%] .menu-item{display:flex;padding:16px!important;border-radius:4px!important}[_nghost-%COMP%] .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}"] }); }
|
|
465
466
|
}
|
|
466
467
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SideNavMenuComponent, [{
|
|
467
468
|
type: Component,
|
|
468
|
-
args: [{ selector: 'lib-side-nav-menu', template: "<div fxHide.gt-xs>\r\n <div [fxHide]=\"!collapsed\" class=\"mobile-header\">\r\n <a [libPlausibleEvent]=\"LOGOCLICK_PLAUSIBLE_EVENT\" fxFlex=\"3.125em\" [href]=\"baseUrl\" [class.no-click]=\"menuSettings?.disableLogoNavigation\"\r\n [attr.aria-label]=\"'MENU.ARIA_LABELS.LOGO' | translate\" (click)=\"logoClick($event)\" fxLayoutAlign=\"start center\"\r\n >\r\n <img height=\"40\" width=\"40\" class=\"menu-logo\" [src]=\"menuLogoImage\" alt=\"logo\" />\r\n <span class=\"menu-product-name\">\r\n {{ productName }}\r\n </span>\r\n </a>\r\n\r\n <button\r\n mat-icon-button\r\n class=\"toggler\"\r\n [attr.aria-label]=\"'ARIA_LABELS.MENU_TOGGLER' | translate\"\r\n [libPlausibleEvent]=\"collapsed ? EXPAND_PLAUSIBLE_EVENT : COLLAPSE_PLAUSIBLE_EVENT\"\r\n (click)=\"toggleCollapse()\"\r\n >\r\n <mat-icon>menu</mat-icon>\r\n </button>\r\n </div>\r\n</div>\r\n\r\n<div [ngClass.lt-sm]=\"'mobile'\" class=\"menu-container\" [style.width]=\"sideNavWidth\" fxLayout=\"column\" [class.collapsed]=\"collapsed\">\r\n <div class=\"content\" fxLayout=\"column\" fxFlexFill>\r\n <div class=\"menu-container-header\" fxLayout=\"row\" [fxLayoutAlign]=\"collapsed ? 'center center' : 'space-between center'\">\r\n <a *ngIf=\"!collapsed\" [libPlausibleEvent]=\"LOGOCLICK_PLAUSIBLE_EVENT\" fxFlex=\"3.125em\" [class.no-click]=\"menuSettings?.disableLogoNavigation\" [href]=\"baseUrl\"\r\n [attr.aria-label]=\"'MENU.ARIA_LABELS.LOGO' | translate\" (click)=\"logoClick($event)\" fxLayoutAlign=\"start center\"\r\n >\r\n <img height=\"40\" width=\"40\" class=\"menu-logo\" [src]=\"menuLogoImage\" alt=\"logo\" />\r\n <span class=\"menu-product-name\">\r\n {{ productName }}\r\n </span>\r\n </a>\r\n\r\n <button\r\n mat-icon-button\r\n class=\"toggler\"\r\n [attr.aria-label]=\"'ARIA_LABELS.MENU_TOGGLER' | translate\"\r\n [libPlausibleEvent]=\"collapsed ? EXPAND_PLAUSIBLE_EVENT : COLLAPSE_PLAUSIBLE_EVENT\"\r\n [matTooltip]=\"(collapsed ? 'MENU.EXPAND' : 'MENU.COLLAPSE') | translate\"\r\n (click)=\"toggleCollapse()\"\r\n >\r\n <mat-icon fxHide.gt-xs [ngClass.lt-sm]=\"'mob-close-icon'\">close</mat-icon>\r\n <mat-icon fxHide.lt-sm>{{ collapsed ? 'keyboard_double_arrow_right' : 'keyboard_double_arrow_left' }}</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <div class=\"menu-wrapper\" fxLayout=\"column\">\r\n <menu-columns (toggleCollapseEvent)=\"toggleCollapse()\" [direction]=\"direction\" role=\"navigation\" [isOpen]=\"!collapsed\"\r\n [active]=\"active\"></menu-columns>\r\n\r\n @if (supportedLanguages.length > 1) {\r\n <lib-menu-lang-switcher [isCollapsed]=\"collapsed\" [languages]=\"supportedLanguages\" (changeLanguageEvent)=\"changeLanguage($event)\"></lib-menu-lang-switcher>\r\n }\r\n </div>\r\n <div fxFlex fxLayout=\"column\">\r\n <ng-content></ng-content>\r\n </div>\r\n\r\n <lib-menu-profile\r\n [userOptions]=\"menuSettings.userOptions\"\r\n [username]=\"username\"\r\n [collapsed]=\"collapsed\"\r\n (linkCallbackEvent)=\"linkCallback($event)\"\r\n ></lib-menu-profile>\r\n</div>\r\n", styles: ["a{text-decoration:none}.no-click{pointer-events:none!important}.mobile-header{display:flex;justify-content:space-between;padding:23px 27px;background-color:#fcfcfc;border:1px solid var(--base-70)}.mobile.menu-container.collapsed{display:none!important}.mobile.menu-container:not(.collapsed){display:block!important;position:fixed;min-width:100vw;min-height:100dvh;z-index:1000}button:has(.mob-close-icon){margin-right:14px}.menu-container ::-webkit-scrollbar{width:5px}.menu-container ::-webkit-scrollbar-thumb{background:var(--base-95);background-clip:padding-box}.menu-container ::-webkit-scrollbar-track{background:var(--base-100)}.menu-product-name{white-space:nowrap;margin-left:12px;font-weight:600;color:var(--base-10)}.menu-container{max-height:100dvh;white-space:nowrap;height:100%;transition:width .2s ease;min-height:100dvh;overflow:auto;background:var(--base-100);border-right:2px solid var(--base-95)}.menu-container .menu-container-header{margin:24px 0;max-height:40px}.menu-container.collapsed .menu-container-header{margin:24px 0 32px!important}.menu-container .content:not(.collapsed){overflow-x:hidden;padding:0 12px}.menu-container .content:not(.collapsed) .menu-logo{margin-left:16px;max-width:100%}.menu-container .divider{width:100%}:host ::ng-deep .collapsed .profile-wrapper{margin:36px 0!important}:host ::ng-deep .mobile .profile-name{max-width:60vw}:host ::ng-deep .menu-item{display:flex;padding:16px!important;border-radius:4px!important}:host ::ng-deep .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
|
|
469
|
+
args: [{ selector: 'lib-side-nav-menu', template: "<div fxHide.gt-xs>\r\n <div [fxHide]=\"!collapsed\" class=\"mobile-header\">\r\n <a [libPlausibleEvent]=\"LOGOCLICK_PLAUSIBLE_EVENT\" fxFlex=\"3.125em\" [href]=\"baseUrl\" [class.no-click]=\"menuSettings?.disableLogoNavigation\"\r\n [attr.aria-label]=\"'MENU.ARIA_LABELS.LOGO' | translate\" (click)=\"logoClick($event)\" fxLayoutAlign=\"start center\"\r\n >\r\n <img height=\"40\" width=\"40\" class=\"menu-logo\" [src]=\"menuLogoImage\" alt=\"logo\" />\r\n <span class=\"menu-product-name\">\r\n {{ productName }}\r\n </span>\r\n </a>\r\n\r\n <button\r\n mat-icon-button\r\n class=\"toggler\"\r\n [attr.aria-label]=\"'ARIA_LABELS.MENU_TOGGLER' | translate\"\r\n [libPlausibleEvent]=\"collapsed ? EXPAND_PLAUSIBLE_EVENT : COLLAPSE_PLAUSIBLE_EVENT\"\r\n (click)=\"toggleCollapse()\"\r\n >\r\n <mat-icon>menu</mat-icon>\r\n </button>\r\n </div>\r\n</div>\r\n\r\n<div [ngClass.lt-sm]=\"'mobile'\" class=\"menu-container\" [style.width]=\"sideNavWidth\" fxLayout=\"column\" [class.collapsed]=\"collapsed\">\r\n <div class=\"content\" fxLayout=\"column\" fxFlexFill>\r\n <div class=\"menu-container-header\" fxLayout=\"row\" [fxLayoutAlign]=\"collapsed ? 'center center' : 'space-between center'\">\r\n <a *ngIf=\"!collapsed\" [libPlausibleEvent]=\"LOGOCLICK_PLAUSIBLE_EVENT\" fxFlex=\"3.125em\" [class.no-click]=\"menuSettings?.disableLogoNavigation\" [href]=\"baseUrl\"\r\n [attr.aria-label]=\"'MENU.ARIA_LABELS.LOGO' | translate\" (click)=\"logoClick($event)\" fxLayoutAlign=\"start center\"\r\n >\r\n <img height=\"40\" width=\"40\" class=\"menu-logo\" [src]=\"menuLogoImage\" alt=\"logo\" />\r\n <span class=\"menu-product-name\">\r\n {{ productName }}\r\n </span>\r\n </a>\r\n\r\n <button\r\n mat-icon-button\r\n class=\"toggler\"\r\n [attr.aria-label]=\"'ARIA_LABELS.MENU_TOGGLER' | translate\"\r\n [libPlausibleEvent]=\"collapsed ? EXPAND_PLAUSIBLE_EVENT : COLLAPSE_PLAUSIBLE_EVENT\"\r\n [matTooltip]=\"(collapsed ? 'MENU.EXPAND' : 'MENU.COLLAPSE') | translate\"\r\n (click)=\"toggleCollapse()\"\r\n >\r\n <mat-icon fxHide.gt-xs [ngClass.lt-sm]=\"'mob-close-icon'\">close</mat-icon>\r\n <mat-icon fxHide.lt-sm>{{ collapsed ? 'keyboard_double_arrow_right' : 'keyboard_double_arrow_left' }}</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <div class=\"menu-wrapper\" fxLayout=\"column\">\r\n <menu-columns (toggleCollapseEvent)=\"toggleCollapse()\" [direction]=\"direction\" role=\"navigation\" [isOpen]=\"!collapsed\"\r\n [active]=\"active\"></menu-columns>\r\n\r\n @if (useDefaultLanguageSwitcher && supportedLanguages.length > 1) {\r\n <lib-menu-lang-switcher [isCollapsed]=\"collapsed\" [languages]=\"supportedLanguages\" (changeLanguageEvent)=\"changeLanguage($event)\"></lib-menu-lang-switcher>\r\n }\r\n </div>\r\n <div fxFlex fxLayout=\"column\">\r\n <ng-content></ng-content>\r\n </div>\r\n\r\n <lib-menu-profile\r\n [userOptions]=\"menuSettings.userOptions\"\r\n [username]=\"username\"\r\n [collapsed]=\"collapsed\"\r\n (linkCallbackEvent)=\"linkCallback($event)\"\r\n ></lib-menu-profile>\r\n</div>\r\n", styles: ["a{text-decoration:none}.no-click{pointer-events:none!important}.mobile-header{display:flex;justify-content:space-between;padding:23px 27px;background-color:#fcfcfc;border:1px solid var(--base-70)}.mobile.menu-container.collapsed{display:none!important}.mobile.menu-container:not(.collapsed){display:block!important;position:fixed;min-width:100vw;min-height:100dvh;z-index:1000}button:has(.mob-close-icon){margin-right:14px}.menu-container ::-webkit-scrollbar{width:5px}.menu-container ::-webkit-scrollbar-thumb{background:var(--base-95);background-clip:padding-box}.menu-container ::-webkit-scrollbar-track{background:var(--base-100)}.menu-product-name{white-space:nowrap;margin-left:12px;font-weight:600;color:var(--base-10)}.menu-container{max-height:100dvh;white-space:nowrap;height:100%;transition:width .2s ease;min-height:100dvh;overflow:auto;background:var(--base-100);border-right:2px solid var(--base-95)}.menu-container .menu-container-header{margin:24px 0;max-height:40px}.menu-container.collapsed .menu-container-header{margin:24px 0 32px!important}.menu-container .content:not(.collapsed){overflow-x:hidden;padding:0 12px}.menu-container .content:not(.collapsed) .menu-logo{margin-left:16px;max-width:100%}.menu-container .divider{width:100%}:host ::ng-deep .collapsed .profile-wrapper{margin:36px 0!important}:host ::ng-deep .mobile .profile-name{max-width:60vw}:host ::ng-deep .menu-item{display:flex;padding:16px!important;border-radius:4px!important}:host ::ng-deep .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}\n"] }]
|
|
469
470
|
}], () => [{ type: i1.StrapiLinkService }, { type: i2.DOMService }, { type: MenuItemsService }], { username: [{
|
|
470
471
|
type: Input
|
|
471
472
|
}], menuSettings: [{
|
|
@@ -474,6 +475,8 @@ class SideNavMenuComponent extends NavBaseComponent {
|
|
|
474
475
|
type: Input
|
|
475
476
|
}], supportedLanguages: [{
|
|
476
477
|
type: Input
|
|
478
|
+
}], useDefaultLanguageSwitcher: [{
|
|
479
|
+
type: Input
|
|
477
480
|
}], changeLanguageEvent: [{
|
|
478
481
|
type: Output
|
|
479
482
|
}] }); })();
|
|
@@ -581,7 +584,7 @@ class MenuItemLinkComponent {
|
|
|
581
584
|
this.placeholderService.unregister(this.placeholderServiceId);
|
|
582
585
|
}
|
|
583
586
|
static { this.ɵfac = function MenuItemLinkComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MenuItemLinkComponent)(i0.ɵɵdirectiveInject(i1.StrapiLinkService), i0.ɵɵdirectiveInject(i1.StrapiVariablesService)); }; }
|
|
584
|
-
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MenuItemLinkComponent, selectors: [["tld-menu-item-link"]], inputs: { direction: "direction", labelsVisible: "labelsVisible",
|
|
587
|
+
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MenuItemLinkComponent, selectors: [["tld-menu-item-link"]], inputs: { direction: "direction", labelsVisible: "labelsVisible", activeItem: "activeItem", showIcons: "showIcons", menuItem: "menuItem" }, decls: 5, vars: 17, consts: [["matTooltipClass", "menu-tooltip", "matTooltipPosition", "after", 1, "text-m", "menu-item", 3, "click", "matTooltip", "fxLayout", "fxLayoutAlign", "libPlausibleEvent", "href", "ngClass.lt-md"], [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) {
|
|
585
588
|
i0.ɵɵelementStart(0, "a", 0);
|
|
586
589
|
i0.ɵɵpipe(1, "translate");
|
|
587
590
|
i0.ɵɵpipe(2, "translate");
|
|
@@ -595,18 +598,16 @@ class MenuItemLinkComponent {
|
|
|
595
598
|
i0.ɵɵadvance(3);
|
|
596
599
|
i0.ɵɵproperty("ngIf", ctx.showIcons && ctx.menuItem.icon);
|
|
597
600
|
i0.ɵɵadvance();
|
|
598
|
-
i0.ɵɵproperty("ngIf", ctx.labelsVisible
|
|
601
|
+
i0.ɵɵproperty("ngIf", ctx.labelsVisible);
|
|
599
602
|
} }, dependencies: [i1$2.DefaultLayoutDirective, i1$2.DefaultLayoutAlignDirective, i2$2.DefaultClassDirective, i3.NgIf, i5.MatTooltip, i2.PlausibleEventDirective, MenuIconComponent, i8.TranslatePipe], styles: ["[_nghost-%COMP%]{width:100%}.mobile[_ngcontent-%COMP%] .menu-item-title[_ngcontent-%COMP%]{margin-left:5px}"] }); }
|
|
600
603
|
}
|
|
601
604
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuItemLinkComponent, [{
|
|
602
605
|
type: Component,
|
|
603
|
-
args: [{ selector: 'tld-menu-item-link', template: "<a\r\n class=\"text-m menu-item\"\r\n matTooltipClass=\"menu-tooltip\"\r\n matTooltipPosition=\"after\"\r\n [matTooltip]=\"!labelsVisible ? (menuItem.title | translate) : ''\"\r\n [fxLayout]=\"menuItemLayout\"\r\n [fxLayoutAlign]=\"menuLayoutDirection\"\r\n [libPlausibleEvent]=\"menuItem.plausibleEvent\"\r\n [href]=\"href | translate\"\r\n [attr.target]=\"menuItem.externalLink ? '_blank' : '_self'\"\r\n [ngClass.lt-md]=\"'mobile'\"\r\n [class.text-center]=\"menuItemLayout === 'column'\"\r\n [class.active-menu-item]=\"menuItem === activeItem\"\r\n (click)=\"linkClick($event, menuItem)\"\r\n>\r\n <ng-container *ngIf=\"showIcons && menuItem.icon\">\r\n <tld-menu-icon [menuItem]=\"menuItem\"></tld-menu-icon>\r\n </ng-container>\r\n <span *ngIf=\"labelsVisible
|
|
606
|
+
args: [{ selector: 'tld-menu-item-link', template: "<a\r\n class=\"text-m menu-item\"\r\n matTooltipClass=\"menu-tooltip\"\r\n matTooltipPosition=\"after\"\r\n [matTooltip]=\"!labelsVisible ? (menuItem.title | translate) : ''\"\r\n [fxLayout]=\"menuItemLayout\"\r\n [fxLayoutAlign]=\"menuLayoutDirection\"\r\n [libPlausibleEvent]=\"menuItem.plausibleEvent\"\r\n [href]=\"href | translate\"\r\n [attr.target]=\"menuItem.externalLink ? '_blank' : '_self'\"\r\n [ngClass.lt-md]=\"'mobile'\"\r\n [class.text-center]=\"menuItemLayout === 'column'\"\r\n [class.active-menu-item]=\"menuItem === activeItem\"\r\n (click)=\"linkClick($event, menuItem)\"\r\n>\r\n <ng-container *ngIf=\"showIcons && menuItem.icon\">\r\n <tld-menu-icon [menuItem]=\"menuItem\"></tld-menu-icon>\r\n </ng-container>\r\n <span *ngIf=\"labelsVisible\" class=\"menu-item-title\">\r\n <span class=\"title-content\" [attr.content]=\"menuItem.title | translate\">\r\n {{ menuItem.title | translate }}\r\n </span>\r\n </span>\r\n</a>\r\n", styles: [":host{width:100%}.mobile .menu-item-title{margin-left:5px}\n"] }]
|
|
604
607
|
}], () => [{ type: i1.StrapiLinkService }, { type: i1.StrapiVariablesService }], { direction: [{
|
|
605
608
|
type: Input
|
|
606
609
|
}], labelsVisible: [{
|
|
607
610
|
type: Input
|
|
608
|
-
}], isChild: [{
|
|
609
|
-
type: Input
|
|
610
611
|
}], activeItem: [{
|
|
611
612
|
type: Input
|
|
612
613
|
}], showIcons: [{
|
|
@@ -760,7 +761,7 @@ function MenuItemListComponent_ng_template_5_ng_container_3_Template(rf, ctx) {
|
|
|
760
761
|
} }
|
|
761
762
|
function MenuItemListComponent_ng_template_5_ng_container_4_ng_container_5_span_1_Template(rf, ctx) { if (rf & 1) {
|
|
762
763
|
i0.ɵɵelementStart(0, "span", 25);
|
|
763
|
-
i0.ɵɵtext(1, "
|
|
764
|
+
i0.ɵɵtext(1, "keyboard_arrow_down");
|
|
764
765
|
i0.ɵɵelementEnd();
|
|
765
766
|
} }
|
|
766
767
|
function MenuItemListComponent_ng_template_5_ng_container_4_ng_container_5_ng_template_2_Template(rf, ctx) { if (rf & 1) {
|
|
@@ -841,7 +842,7 @@ function MenuItemListComponent_ng_template_7_Template(rf, ctx) { if (rf & 1) {
|
|
|
841
842
|
const menuItem_r13 = ctx.menuItem;
|
|
842
843
|
const isChild_r14 = ctx.isChild;
|
|
843
844
|
const ctx_r0 = i0.ɵɵnextContext();
|
|
844
|
-
i0.ɵɵproperty("ngClass.lt-md", "mob-menu-item")("menuItem", menuItem_r13)("direction", ctx_r0.direction)("labelsVisible", ctx_r0.labelsVisible)("activeItem", ctx_r0.activeItem)("showIcons", ctx_r0.showIcons)
|
|
845
|
+
i0.ɵɵproperty("ngClass.lt-md", "mob-menu-item")("menuItem", menuItem_r13)("direction", ctx_r0.direction)("labelsVisible", ctx_r0.labelsVisible || isChild_r14)("activeItem", ctx_r0.activeItem)("showIcons", ctx_r0.showIcons);
|
|
845
846
|
} }
|
|
846
847
|
function MenuItemListComponent_ng_template_9_lib_menu_item_btn_0_Template(rf, ctx) { if (rf & 1) {
|
|
847
848
|
i0.ɵɵelement(0, "lib-menu-item-btn", 28);
|
|
@@ -934,13 +935,13 @@ class MenuItemListComponent {
|
|
|
934
935
|
this.toggleExpand.next(menuItem);
|
|
935
936
|
}
|
|
936
937
|
static { this.ɵfac = function MenuItemListComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MenuItemListComponent)(); }; }
|
|
937
|
-
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MenuItemListComponent, selectors: [["menu-item-list"]], inputs: { direction: "direction", labelsVisible: "labelsVisible", activeItem: "activeItem", showIcons: "showIcons", items: "items", menuItemGroup: "menuItemGroup" }, outputs: { toggleExpand: "toggleExpand" }, decls: 13, vars: 3, consts: [["itemWithChildren", ""], ["menuItemLink", ""], ["menuItemBtn", ""], ["itemGroupButton", ""], ["state", "matMenuTrigger"], ["menu", "matMenu"], ["iconDown", ""], [1, "menu-list-wrapper"], ["fxLayoutAlign", "start center", 1, "menu-item-list-title"], ["fxLayout", "column", 1, "menu-item-list", 3, "fxLayoutAlign"], [4, "ngFor", "ngForOf"], ["class", "menu-title-btn", 4, "ngIf"], ["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"], ["matTooltipClass", "menu-tooltip", "matTooltipPosition", "after", 1, "text-m", "menu-item", "menu-parent-item", 3, "click", "matTooltip", "fxLayout", "fxLayoutAlign", "matMenuTriggerFor", "ngClass.lt-md"], [4, "ngIf"], [1, "child-menu"], ["mat-menu-item", ""], [3, "menuItem"], [1, "menu-item-title"], [1, "title-content"], ["class", "material-icons spin arrow-icon", 4, "ngIf", "ngIfElse"], [1, "material-icons", "spin", "arrow-icon"], [3, "ngClass.lt-md", "menuItem", "direction", "labelsVisible", "activeItem", "showIcons"
|
|
938
|
+
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MenuItemListComponent, selectors: [["menu-item-list"]], inputs: { direction: "direction", labelsVisible: "labelsVisible", activeItem: "activeItem", showIcons: "showIcons", items: "items", menuItemGroup: "menuItemGroup" }, outputs: { toggleExpand: "toggleExpand" }, decls: 13, vars: 3, consts: [["itemWithChildren", ""], ["menuItemLink", ""], ["menuItemBtn", ""], ["itemGroupButton", ""], ["state", "matMenuTrigger"], ["menu", "matMenu"], ["iconDown", ""], [1, "menu-list-wrapper"], ["fxLayoutAlign", "start center", 1, "menu-item-list-title"], ["fxLayout", "column", 1, "menu-item-list", 3, "fxLayoutAlign"], [4, "ngFor", "ngForOf"], ["class", "menu-title-btn", 4, "ngIf"], ["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"], ["matTooltipClass", "menu-tooltip", "matTooltipPosition", "after", 1, "text-m", "menu-item", "menu-parent-item", 3, "click", "matTooltip", "fxLayout", "fxLayoutAlign", "matMenuTriggerFor", "ngClass.lt-md"], [4, "ngIf"], [1, "child-menu"], ["mat-menu-item", ""], [3, "menuItem"], [1, "menu-item-title"], [1, "title-content"], ["class", "material-icons spin arrow-icon", 4, "ngIf", "ngIfElse"], [1, "material-icons", "spin", "arrow-icon"], [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, "click", 4, "ngIf"], ["mat-icon-button", "", "matTooltipPosition", "after", 3, "matTooltip", "click", 4, "ngIf"], ["mat-button", "", 1, "menu-title-btn", "menu-action-button", 3, "click"], ["class", "btn-label", 4, "ngIf"], [1, "btn-label"], ["mat-icon-button", "", "matTooltipPosition", "after", 3, "click", "matTooltip"]], template: function MenuItemListComponent_Template(rf, ctx) { if (rf & 1) {
|
|
938
939
|
i0.ɵɵelementStart(0, "div", 7);
|
|
939
940
|
i0.ɵɵtemplate(1, MenuItemListComponent_Conditional_1_Template, 5, 5, "div", 8)(2, MenuItemListComponent_Conditional_2_Template, 1, 1, "ng-container");
|
|
940
941
|
i0.ɵɵelementStart(3, "div", 9);
|
|
941
942
|
i0.ɵɵtemplate(4, MenuItemListComponent_ng_container_4_Template, 2, 4, "ng-container", 10);
|
|
942
943
|
i0.ɵɵelementEnd()();
|
|
943
|
-
i0.ɵɵtemplate(5, MenuItemListComponent_ng_template_5_Template, 9, 14, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor)(7, MenuItemListComponent_ng_template_7_Template, 1,
|
|
944
|
+
i0.ɵɵtemplate(5, MenuItemListComponent_ng_template_5_Template, 9, 14, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor)(7, MenuItemListComponent_ng_template_7_Template, 1, 6, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor)(9, MenuItemListComponent_ng_template_9_Template, 1, 1, "ng-template", null, 2, i0.ɵɵtemplateRefExtractor)(11, MenuItemListComponent_ng_template_11_Template, 2, 2, "ng-template", null, 3, i0.ɵɵtemplateRefExtractor);
|
|
944
945
|
} if (rf & 2) {
|
|
945
946
|
i0.ɵɵadvance();
|
|
946
947
|
i0.ɵɵconditional(ctx.titleKey && ctx.showTitle && ctx.labelsVisible && !ctx.menuItemGroup.itemGroupClick ? 1 : (ctx.menuItemGroup == null ? null : ctx.menuItemGroup.itemGroupClick) ? 2 : -1);
|
|
@@ -952,7 +953,7 @@ class MenuItemListComponent {
|
|
|
952
953
|
}
|
|
953
954
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuItemListComponent, [{
|
|
954
955
|
type: Component,
|
|
955
|
-
args: [{ selector: 'menu-item-list', template: "<div class=\"menu-list-wrapper\">\r\n
|
|
956
|
+
args: [{ selector: 'menu-item-list', 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<button\r\n\t\tmatTooltipClass=\"menu-tooltip\"\r\n\t\tmatTooltipPosition=\"after\"\r\n\t\t[matTooltip]=\"!labelsVisible ? (menuItem.title | translate) : ''\"\r\n\t\t[fxLayout]=\"menuItemLayout\"\r\n\t\t[fxLayoutAlign]=\"menuLayoutDirection\"\r\n\t\t#state=\"matMenuTrigger\"\r\n\t\t[matMenuTriggerFor]=\"menu\"\r\n\t\t[attr.id]=\"menuItem.customId\"\r\n\t\tclass=\"text-m menu-item menu-parent-item\"\r\n\t\t[class.menu-labels-visible]=\"labelsVisible\"\r\n\t\t[class.active-menu-item]=\"(activeItem?.link && menuItem === activeItem) || state.menuOpen\"\r\n\t\t[ngClass.lt-md]=\"'mob-menu-item'\"\r\n\t\t(click)=\"toggleItemExpand($event, menuItem)\"\r\n\t>\r\n\t\t<ng-container *ngIf=\"showIcons && menuItem.icon\">\r\n\t\t\t<tld-menu-icon [menuItem]=\"menuItem\"></tld-menu-icon>\r\n\t\t</ng-container>\r\n\t\t<ng-container *ngIf=\"labelsVisible\">\r\n\t\t\t<span class=\"menu-item-title\">\r\n\t\t\t\t<span class=\"title-content\">{{ menuItem.title | translate }}</span></span\r\n\t\t\t>\r\n\t\t\t<ng-container *ngIf=\"menuItem.showChildren && menuItem.children\">\r\n\t\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\t<ng-template #iconDown>\r\n\t\t\t\t\t<span class=\"material-icons spin arrow-icon\"> keyboard_arrow_up </span>\r\n\t\t\t\t</ng-template>\r\n\t\t\t</ng-container>\r\n\t\t</ng-container>\r\n\t</button>\r\n\t<mat-menu #menu=\"matMenu\" class=\"child-menu\">\r\n\t\t@for (child of menuItem.children; track $index) {\r\n\t\t<div mat-menu-item>\r\n\t\t\t<ng-container *ngTemplateOutlet=\"menuItem.clickAction ? menuItemBtn : menuItemLink; context: { menuItem: child, isChild: true }\"> </ng-container>\r\n\t\t</div>\r\n\t\t}\r\n\t</mat-menu>\r\n</ng-template>\r\n\r\n<ng-template #menuItemLink let-menuItem=\"menuItem\" let-isChild=\"isChild\">\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 || isChild\"\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 *ngIf=\"menuItemGroup && labelsVisible\" mat-button class=\"menu-title-btn menu-action-button\" (click)=\"menuItemGroup?.itemGroupClick()\">\r\n\t\t<mat-icon>{{ menuItemGroup.itemGroupIcon }}</mat-icon>\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<mat-icon>{{ menuItemGroup.itemGroupIcon }}</mat-icon>\r\n\t</button>\r\n</ng-template>\r\n", styles: [".spin{animation:spinArrow .3s forwards}@keyframes spinArrow{to{transform:rotate(180deg)}}:host{display:inline-block}.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!important}.menu-action-button{justify-content:flex-start;align-items:center;max-width:100%;width:-webkit-fill-available}:host ::ng-deep .menu-list-wrapper .menu-item{cursor:pointer;font-style:normal;color:var(--base-30);text-decoration:none;align-items:center!important;font-weight:400;background:none;border:none}:host ::ng-deep .menu-list-wrapper .menu-item:not(button):not(.active-menu-item):hover{background-color:var(--base-70)!important}:host ::ng-deep .menu-list-wrapper .menu-item.active-menu-item,:host ::ng-deep .menu-list-wrapper .menu-item.active-menu-item mat-icon,:host ::ng-deep .menu-list-wrapper .menu-item.active-menu-item:hover{font-weight:600}:host ::ng-deep .menu-list-wrapper .menu-item span{display:inline-block}:host ::ng-deep .menu-list-wrapper .menu-item .menu-item-title{display:flex;flex-direction:row;align-items:start;width:100%}:host ::ng-deep .menu-list-wrapper .menu-item .menu-item-title .title-content{width:100%;text-align:start;display:block}:host ::ng-deep .menu-list-wrapper .menu-item .menu-item-title .title-content:before{display:block;content:attr(content);font-weight:600;height:0;overflow:hidden;visibility:hidden}:host ::ng-deep .menu-list-wrapper .menu-parent-item.active-menu-item,:host ::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}.menu-item-list-title{padding:8px 0 24px;font-size:16px;font-weight:600;overflow:hidden;text-overflow:ellipsis;margin-left:20px;height:56px}.menu-item-list-title:has(.menu-title-btn){margin-left:0}::ng-deep lib-menu-lang-switcher,.menu-item-list{animation:slide-in .3s forwards}::ng-deep lib-menu-lang-switcher,.menu-title-btn{margin-right:2px;transition:opacity .3s}.arrow-icon{margin-right:-6px}@keyframes slide-in{0%{opacity:0;margin-left:-100px}to{opacity:1;margin-left:0}}\n"] }]
|
|
956
957
|
}], null, { direction: [{
|
|
957
958
|
type: Input
|
|
958
959
|
}], labelsVisible: [{
|
|
@@ -1094,7 +1095,7 @@ function MenuProfileComponent_ng_container_6_Template(rf, ctx) { if (rf & 1) {
|
|
|
1094
1095
|
const ctx_r0 = i0.ɵɵnextContext();
|
|
1095
1096
|
const state_r3 = i0.ɵɵreference(2);
|
|
1096
1097
|
i0.ɵɵadvance(2);
|
|
1097
|
-
i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(3, 3, (tmp_5_0 = ctx_r0.username) !== null && tmp_5_0 !== undefined ? tmp_5_0 : "MENU.ANONYMOUS"), " ");
|
|
1098
|
+
i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(3, 3, (tmp_5_0 = ctx_r0.username()) !== null && tmp_5_0 !== undefined ? tmp_5_0 : "MENU.ANONYMOUS"), " ");
|
|
1098
1099
|
i0.ɵɵadvance(2);
|
|
1099
1100
|
i0.ɵɵproperty("ngIf", state_r3.menuOpen)("ngIfElse", iconDown_r2);
|
|
1100
1101
|
} }
|
|
@@ -1195,7 +1196,10 @@ function MenuProfileComponent_ng_template_11_Template(rf, ctx) { if (rf & 1) {
|
|
|
1195
1196
|
} }
|
|
1196
1197
|
class MenuProfileComponent {
|
|
1197
1198
|
constructor() {
|
|
1198
|
-
this.
|
|
1199
|
+
this.collapsed = input();
|
|
1200
|
+
this.username = input();
|
|
1201
|
+
this.userOptions = input();
|
|
1202
|
+
this.linkCallbackEvent = output();
|
|
1199
1203
|
}
|
|
1200
1204
|
ngOnInit() {
|
|
1201
1205
|
this.setUserInitials();
|
|
@@ -1204,11 +1208,11 @@ class MenuProfileComponent {
|
|
|
1204
1208
|
this.linkCallbackEvent.emit(link);
|
|
1205
1209
|
}
|
|
1206
1210
|
setUserInitials() {
|
|
1207
|
-
if (!this.username) {
|
|
1211
|
+
if (!this.username()) {
|
|
1208
1212
|
return;
|
|
1209
1213
|
}
|
|
1210
1214
|
// displaying first letters of name and surname
|
|
1211
|
-
const splittedUsername = this.username.split(' ');
|
|
1215
|
+
const splittedUsername = this.username().split(' ');
|
|
1212
1216
|
if (splittedUsername.length === 1) {
|
|
1213
1217
|
// If there's only one word, use the first letter
|
|
1214
1218
|
this.userInitials = splittedUsername[0][0];
|
|
@@ -1218,7 +1222,7 @@ class MenuProfileComponent {
|
|
|
1218
1222
|
this.userInitials = splittedUsername[0][0] + splittedUsername[1][0];
|
|
1219
1223
|
}
|
|
1220
1224
|
static { this.ɵfac = function MenuProfileComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MenuProfileComponent)(); }; }
|
|
1221
|
-
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MenuProfileComponent, selectors: [["lib-menu-profile"]], inputs: { collapsed: "collapsed", username: "username", userOptions: "userOptions" }, outputs: { linkCallbackEvent: "linkCallbackEvent" }, decls: 13, vars:
|
|
1225
|
+
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MenuProfileComponent, selectors: [["lib-menu-profile"]], inputs: { collapsed: [1, "collapsed"], username: [1, "username"], userOptions: [1, "userOptions"] }, outputs: { linkCallbackEvent: "linkCallbackEvent" }, decls: 13, vars: 7, consts: [["state", "matMenuTrigger"], ["menu", "matMenu"], ["profileMenuItem", ""], ["iconDown", ""], [1, "profile"], [1, "profile-wrapper", 3, "matMenuTriggerFor"], [1, "profile-icon"], [4, "ngIf"], [1, "profile-menu"], [1, "profile-name"], ["class", "profile-arrow spin", 4, "ngIf", "ngIfElse"], [1, "profile-arrow", "spin"], ["mat-menu-item", "", 1, "profile-option"], ["target", "_blank", 1, "mat-mdc-menu-item", 3, "href"], [1, "mat-mdc-menu-item", 3, "routerLink"], ["target", "_blank", 1, "mat-mdc-menu-item", 3, "click", "href"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "mat-mdc-menu-item", 3, "click", "routerLink"], ["mat-menu-item", "", 1, "profile-option", 3, "click"], [1, "material-icons", "profile-option-icon", 3, "material-icons-outlined"], [1, "profile-option-icon", 3, "svgIcon"], [1, "material-icons", "profile-option-icon"]], template: function MenuProfileComponent_Template(rf, ctx) { if (rf & 1) {
|
|
1222
1226
|
i0.ɵɵelementStart(0, "div", 4)(1, "button", 5, 0)(3, "div", 6);
|
|
1223
1227
|
i0.ɵɵtemplate(4, MenuProfileComponent_Conditional_4_Template, 1, 1)(5, MenuProfileComponent_Conditional_5_Template, 2, 0, "mat-icon");
|
|
1224
1228
|
i0.ɵɵelementEnd();
|
|
@@ -1229,29 +1233,23 @@ class MenuProfileComponent {
|
|
|
1229
1233
|
i0.ɵɵelementEnd()();
|
|
1230
1234
|
i0.ɵɵtemplate(11, MenuProfileComponent_ng_template_11_Template, 3, 4, "ng-template", null, 2, i0.ɵɵtemplateRefExtractor);
|
|
1231
1235
|
} if (rf & 2) {
|
|
1236
|
+
const state_r3 = i0.ɵɵreference(2);
|
|
1232
1237
|
const menu_r11 = i0.ɵɵreference(8);
|
|
1233
1238
|
i0.ɵɵadvance();
|
|
1239
|
+
i0.ɵɵclassProp("collapsed", ctx.collapsed())("active", state_r3.menuOpen);
|
|
1234
1240
|
i0.ɵɵproperty("matMenuTriggerFor", menu_r11);
|
|
1235
1241
|
i0.ɵɵadvance(3);
|
|
1236
1242
|
i0.ɵɵconditional(ctx.userInitials ? 4 : 5);
|
|
1237
1243
|
i0.ɵɵadvance(2);
|
|
1238
|
-
i0.ɵɵproperty("ngIf", !ctx.collapsed);
|
|
1244
|
+
i0.ɵɵproperty("ngIf", !ctx.collapsed());
|
|
1239
1245
|
i0.ɵɵadvance(3);
|
|
1240
|
-
i0.ɵɵrepeater(ctx.userOptions);
|
|
1241
|
-
} }, dependencies: [i1$1.RouterLink, i3.NgIf, i3.NgTemplateOutlet, i2$1.MatIcon, i6.MatMenu, i6.MatMenuItem, i6.MatMenuTrigger, i8.TranslatePipe], styles: [".spin[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_spinArrow .3s forwards}@keyframes _ngcontent-%COMP%_spinArrow{to{transform:rotate(180deg)}}a[_ngcontent-%COMP%]{text-decoration:none}.profile[_ngcontent-%COMP%]{position:relative;margin-top:100px}.profile-wrapper[_ngcontent-%COMP%]{background:none;color:var(--base-30);display:flex;align-items:center;justify-content:start;width:100%;position:absolute;bottom:0;margin:32px 0}.profile-icon[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:center;min-width:40px;height:40px;border-radius:100%;color:var(--base-0);background-color:var(--base-70);font-size:16px;font-weight:600}.profile-name[_ngcontent-%COMP%]{max-width:145px;overflow:hidden;margin-left:12px;text-overflow:ellipsis}.profile-option-icon[_ngcontent-%COMP%]{vertical-align:middle;margin:0 5px 5px 0}.profile-arrow[_ngcontent-%COMP%]{position:absolute;right:0;margin-right:
|
|
1246
|
+
i0.ɵɵrepeater(ctx.userOptions());
|
|
1247
|
+
} }, dependencies: [i1$1.RouterLink, i3.NgIf, i3.NgTemplateOutlet, i2$1.MatIcon, i6.MatMenu, i6.MatMenuItem, i6.MatMenuTrigger, i8.TranslatePipe], styles: [".spin[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_spinArrow .3s forwards}@keyframes _ngcontent-%COMP%_spinArrow{to{transform:rotate(180deg)}}a[_ngcontent-%COMP%]{text-decoration:none}.profile[_ngcontent-%COMP%]{position:relative;margin-top:100px}.profile-wrapper[_ngcontent-%COMP%]{background:none;color:var(--base-30);display:flex;align-items:center;justify-content:start;width:100%;position:absolute;bottom:0;margin:24px 0;border-radius:5px;padding:8px 0}.profile-wrapper[_ngcontent-%COMP%]:hover .profile-icon[_ngcontent-%COMP%]{background-color:var(--base-70);filter:brightness(.97)}.profile-wrapper[_ngcontent-%COMP%]:hover:not(.collapsed), .profile-wrapper.active[_ngcontent-%COMP%]:not(.collapsed){background-color:var(--base-70)}.collapsed.profile-wrapper[_ngcontent-%COMP%]{padding:0!important;margin:32px 0!important}.profile-icon[_ngcontent-%COMP%]{margin-left:20px;display:flex;justify-content:center;align-items:center;min-width:40px;height:40px;border-radius:100%;color:var(--base-0);background-color:var(--base-70);font-size:16px;font-weight:600}.active[_ngcontent-%COMP%] .profile-icon[_ngcontent-%COMP%]{background-color:var(--base-70);filter:brightness(.97)}.collapsed[_ngcontent-%COMP%] .profile-icon[_ngcontent-%COMP%]{margin-left:0!important}.profile-name[_ngcontent-%COMP%]{max-width:145px;overflow:hidden;margin-left:12px;text-overflow:ellipsis}.profile-option-icon[_ngcontent-%COMP%]{vertical-align:middle;margin:0 5px 5px 0}.profile-arrow[_ngcontent-%COMP%]{position:absolute;right:0;margin-right:10px}.mobile[_ngcontent-%COMP%] .profile-arrow[_ngcontent-%COMP%]{margin-right:20px} .profile-menu a{font-weight:400!important;display:flex;align-items:center;gap:5px} .profile-menu a:hover{color:var(--mat-menu-item-label-text-color, var(--mat-app-on-surface))!important;text-decoration:inherit}"] }); }
|
|
1242
1248
|
}
|
|
1243
1249
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuProfileComponent, [{
|
|
1244
1250
|
type: Component,
|
|
1245
|
-
args: [{ selector: 'lib-menu-profile', template: "<div class=\"profile\">\r\n
|
|
1246
|
-
}], null,
|
|
1247
|
-
type: Input
|
|
1248
|
-
}], username: [{
|
|
1249
|
-
type: Input
|
|
1250
|
-
}], userOptions: [{
|
|
1251
|
-
type: Input
|
|
1252
|
-
}], linkCallbackEvent: [{
|
|
1253
|
-
type: Output
|
|
1254
|
-
}] }); })();
|
|
1251
|
+
args: [{ selector: 'lib-menu-profile', template: "<div class=\"profile\">\r\n\t<button #state=\"matMenuTrigger\" [class.collapsed]=\"collapsed()\" [matMenuTriggerFor]=\"menu\" class=\"profile-wrapper\" [class.active]=\"state.menuOpen\">\r\n\t\t<div class=\"profile-icon\">\r\n\t\t\t@if (userInitials) {\r\n\t\t\t{{ userInitials }}\r\n\t\t\t} @else {\r\n\t\t\t<mat-icon>person</mat-icon>\r\n\t\t\t}\r\n\t\t</div>\r\n\r\n\t\t<ng-container *ngIf=\"!collapsed()\">\r\n\t\t\t<span class=\"profile-name\">\r\n\t\t\t\t{{ username() ?? \"MENU.ANONYMOUS\" | translate }}\r\n\t\t\t</span>\r\n\r\n\t\t\t<mat-icon *ngIf=\"state.menuOpen; else iconDown\" class=\"profile-arrow spin\">keyboard_arrow_down</mat-icon>\r\n\r\n\t\t\t<ng-template #iconDown>\r\n\t\t\t\t<mat-icon class=\"profile-arrow spin\">keyboard_arrow_up</mat-icon>\r\n\t\t\t</ng-template>\r\n\t\t</ng-container>\r\n\t</button>\r\n\r\n\t<mat-menu #menu=\"matMenu\" class=\"profile-menu\">\r\n\t\t@for (item of userOptions(); track item.label) { @if (item.link) { @if (item.link.isExternal) {\r\n\t\t<a class=\"mat-mdc-menu-item\" [href]=\"item.link.href\" target=\"_blank\" (click)=\"linkCallback(item.link)\">\r\n\t\t\t<ng-container *ngTemplateOutlet=\"profileMenuItem; context: { icon: item.icon, label: item.label }\"> </ng-container>\r\n\t\t</a>\r\n\t\t} @else {\r\n\t\t<a class=\"mat-mdc-menu-item\" [routerLink]=\"item.link.href\" (click)=\"linkCallback(item.link)\">\r\n\t\t\t<ng-container *ngTemplateOutlet=\"profileMenuItem; context: { icon: item.icon, label: item.label }\"> </ng-container>\r\n\t\t</a>\r\n\t\t} } @else {\r\n\t\t<button mat-menu-item class=\"profile-option\" (click)=\"item.button?.callback()\">\r\n\t\t\t<ng-container *ngTemplateOutlet=\"profileMenuItem; context: { icon: item.icon, label: item.label }\"> </ng-container>\r\n\t\t</button>\r\n\t\t} }\r\n\t</mat-menu>\r\n</div>\r\n\r\n<ng-template #profileMenuItem let-icon=\"icon\" let-label=\"label\">\r\n\t@if (icon) { @if (!icon?.isCustom) {\r\n\t<span class=\"material-icons profile-option-icon\" [class.material-icons-outlined]=\"icon?.isOutlined\">\r\n\t\t{{ icon?.name }}\r\n\t</span>\r\n\t} @else {\r\n\t<mat-icon class=\"profile-option-icon\" [svgIcon]=\"icon?.name\"></mat-icon>\r\n\t} }\r\n\t{{ label | translate }}\r\n</ng-template>\r\n", styles: [".spin{animation:spinArrow .3s forwards}@keyframes spinArrow{to{transform:rotate(180deg)}}a{text-decoration:none}.profile{position:relative;margin-top:100px}.profile-wrapper{background:none;color:var(--base-30);display:flex;align-items:center;justify-content:start;width:100%;position:absolute;bottom:0;margin:24px 0;border-radius:5px;padding:8px 0}.profile-wrapper:hover .profile-icon{background-color:var(--base-70);filter:brightness(.97)}.profile-wrapper:hover:not(.collapsed),.profile-wrapper.active:not(.collapsed){background-color:var(--base-70)}.collapsed.profile-wrapper{padding:0!important;margin:32px 0!important}.profile-icon{margin-left:20px;display:flex;justify-content:center;align-items:center;min-width:40px;height:40px;border-radius:100%;color:var(--base-0);background-color:var(--base-70);font-size:16px;font-weight:600}.active .profile-icon{background-color:var(--base-70);filter:brightness(.97)}.collapsed .profile-icon{margin-left:0!important}.profile-name{max-width:145px;overflow:hidden;margin-left:12px;text-overflow:ellipsis}.profile-option-icon{vertical-align:middle;margin:0 5px 5px 0}.profile-arrow{position:absolute;right:0;margin-right:10px}.mobile .profile-arrow{margin-right:20px}::ng-deep .profile-menu a{font-weight:400!important;display:flex;align-items:center;gap:5px}::ng-deep .profile-menu a:hover{color:var(--mat-menu-item-label-text-color, var(--mat-app-on-surface))!important;text-decoration:inherit}\n"] }]
|
|
1252
|
+
}], null, null); })();
|
|
1255
1253
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MenuProfileComponent, { className: "MenuProfileComponent", filePath: "lib\\components\\menu-profile\\menu-profile.component.ts", lineNumber: 10 }); })();
|
|
1256
1254
|
|
|
1257
1255
|
function MenuLangSwitcherComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
|
|
@@ -1467,6 +1465,25 @@ const USER_MENU_OPTIONS = {
|
|
|
1467
1465
|
icon: { name: `mail` },
|
|
1468
1466
|
link: { href, isExternal: true, callback },
|
|
1469
1467
|
}),
|
|
1468
|
+
/** use language update callback to save in localstorage */
|
|
1469
|
+
changeLanguage: (dialog, languages, languageChangeCallback) => ({
|
|
1470
|
+
label: 'MENU.CHANGE_LANGUAGE',
|
|
1471
|
+
icon: { name: 'language' },
|
|
1472
|
+
button: {
|
|
1473
|
+
callback: () => {
|
|
1474
|
+
dialog
|
|
1475
|
+
.open(SelectLanguageDialogComponent, {
|
|
1476
|
+
data: { languages: languages },
|
|
1477
|
+
})
|
|
1478
|
+
.afterClosed()
|
|
1479
|
+
.subscribe((language) => {
|
|
1480
|
+
if (language && languageChangeCallback) {
|
|
1481
|
+
languageChangeCallback(language);
|
|
1482
|
+
}
|
|
1483
|
+
});
|
|
1484
|
+
},
|
|
1485
|
+
},
|
|
1486
|
+
}),
|
|
1470
1487
|
logout: (callback) => ({
|
|
1471
1488
|
icon: { name: 'logout' },
|
|
1472
1489
|
label: 'MENU.LOG_OUT',
|