@tilde-nlp/ngx-menu 6.1.53 → 6.1.54
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/components/menu-item-list/menu-item-list.component.mjs +129 -105
- package/esm2022/lib/components/side-nav-menu/models/custom-icons.model.mjs +2 -0
- package/esm2022/lib/components/side-nav-menu/models/side-nav-settings.model.mjs +1 -1
- package/esm2022/lib/components/side-nav-menu/side-nav-menu.component.mjs +29 -13
- package/esm2022/lib/models/menu-item-group.model.mjs +1 -1
- package/fesm2022/tilde-nlp-ngx-menu.mjs +156 -116
- package/fesm2022/tilde-nlp-ngx-menu.mjs.map +1 -1
- package/lib/components/side-nav-menu/models/custom-icons.model.d.ts +9 -0
- package/lib/components/side-nav-menu/models/side-nav-settings.model.d.ts +2 -0
- package/lib/components/side-nav-menu/side-nav-menu.component.d.ts +3 -0
- package/lib/models/menu-item-group.model.d.ts +2 -0
- package/package.json +1 -1
|
@@ -335,7 +335,12 @@ class SideNavMenuComponent extends NavBaseComponent {
|
|
|
335
335
|
menuLogoCollapsed: '',
|
|
336
336
|
disableStrapi: false,
|
|
337
337
|
disableLogoNavigation: false,
|
|
338
|
-
userOptions: []
|
|
338
|
+
userOptions: [],
|
|
339
|
+
customIcons: {
|
|
340
|
+
customOpenIcon: 'keyboard_double_arrow_right',
|
|
341
|
+
customCloseIcon: 'keyboard_double_arrow_left',
|
|
342
|
+
customMobileCloseIcon: 'close'
|
|
343
|
+
}
|
|
339
344
|
};
|
|
340
345
|
this.useDefaultLanguageSwitcher = true;
|
|
341
346
|
this.changeLanguageEvent = new EventEmitter();
|
|
@@ -362,6 +367,7 @@ class SideNavMenuComponent extends NavBaseComponent {
|
|
|
362
367
|
ngOnInit() {
|
|
363
368
|
super.ngOnInit();
|
|
364
369
|
this.getColapsedFromLocalStorage();
|
|
370
|
+
this.setIcons();
|
|
365
371
|
}
|
|
366
372
|
logoClick(event) {
|
|
367
373
|
this.strapiLinkService.strapiLinkClick(event);
|
|
@@ -390,8 +396,16 @@ class SideNavMenuComponent extends NavBaseComponent {
|
|
|
390
396
|
}
|
|
391
397
|
this.domService.localStorage.setItem(this.COLLAPSED_LOCAL_STORAGE_KEY, this.collapsed.toString());
|
|
392
398
|
}
|
|
399
|
+
setIcons() {
|
|
400
|
+
const { customOpenIcon, customCloseIcon, customMobileCloseIcon } = this.menuSettings.customIcons || {};
|
|
401
|
+
this.customIcons = {
|
|
402
|
+
customOpenIcon: customOpenIcon ?? 'keyboard_double_arrow_right',
|
|
403
|
+
customCloseIcon: customCloseIcon ?? 'keyboard_double_arrow_left',
|
|
404
|
+
customMobileCloseIcon: customMobileCloseIcon ?? 'close'
|
|
405
|
+
};
|
|
406
|
+
}
|
|
393
407
|
static { this.ɵfac = function SideNavMenuComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SideNavMenuComponent)(i0.ɵɵdirectiveInject(i1.StrapiLinkService), i0.ɵɵdirectiveInject(i2.DOMService), i0.ɵɵdirectiveInject(MenuItemsService)); }; }
|
|
394
|
-
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:
|
|
408
|
+
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: 38, 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) {
|
|
395
409
|
i0.ɵɵprojectionDef();
|
|
396
410
|
i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "a", 2);
|
|
397
411
|
i0.ɵɵpipe(3, "translate");
|
|
@@ -413,7 +427,7 @@ class SideNavMenuComponent extends NavBaseComponent {
|
|
|
413
427
|
i0.ɵɵpipe(17, "translate");
|
|
414
428
|
i0.ɵɵlistener("click", function SideNavMenuComponent_Template_button_click_15_listener() { return ctx.toggleCollapse(); });
|
|
415
429
|
i0.ɵɵelementStart(18, "mat-icon", 11);
|
|
416
|
-
i0.ɵɵtext(19
|
|
430
|
+
i0.ɵɵtext(19);
|
|
417
431
|
i0.ɵɵelementEnd();
|
|
418
432
|
i0.ɵɵelementStart(20, "mat-icon", 12);
|
|
419
433
|
i0.ɵɵtext(21);
|
|
@@ -435,14 +449,14 @@ class SideNavMenuComponent extends NavBaseComponent {
|
|
|
435
449
|
i0.ɵɵadvance();
|
|
436
450
|
i0.ɵɵclassProp("no-click", ctx.menuSettings == null ? null : ctx.menuSettings.disableLogoNavigation);
|
|
437
451
|
i0.ɵɵproperty("libPlausibleEvent", ctx.LOGOCLICK_PLAUSIBLE_EVENT)("href", ctx.baseUrl, i0.ɵɵsanitizeUrl);
|
|
438
|
-
i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(3,
|
|
452
|
+
i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(3, 30, "MENU.ARIA_LABELS.LOGO"));
|
|
439
453
|
i0.ɵɵadvance(2);
|
|
440
454
|
i0.ɵɵproperty("src", ctx.menuLogoImage, i0.ɵɵsanitizeUrl);
|
|
441
455
|
i0.ɵɵadvance(2);
|
|
442
456
|
i0.ɵɵtextInterpolate1(" ", ctx.productName, " ");
|
|
443
457
|
i0.ɵɵadvance();
|
|
444
458
|
i0.ɵɵproperty("libPlausibleEvent", ctx.collapsed ? ctx.EXPAND_PLAUSIBLE_EVENT : ctx.COLLAPSE_PLAUSIBLE_EVENT);
|
|
445
|
-
i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(8,
|
|
459
|
+
i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(8, 32, "ARIA_LABELS.MENU_TOGGLER"));
|
|
446
460
|
i0.ɵɵadvance(4);
|
|
447
461
|
i0.ɵɵstyleProp("width", ctx.sideNavWidth);
|
|
448
462
|
i0.ɵɵclassProp("collapsed", ctx.collapsed);
|
|
@@ -452,23 +466,25 @@ class SideNavMenuComponent extends NavBaseComponent {
|
|
|
452
466
|
i0.ɵɵadvance();
|
|
453
467
|
i0.ɵɵproperty("ngIf", !ctx.collapsed);
|
|
454
468
|
i0.ɵɵadvance();
|
|
455
|
-
i0.ɵɵproperty("libPlausibleEvent", ctx.collapsed ? ctx.EXPAND_PLAUSIBLE_EVENT : ctx.COLLAPSE_PLAUSIBLE_EVENT)("matTooltip", i0.ɵɵpipeBind1(16,
|
|
456
|
-
i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(17,
|
|
469
|
+
i0.ɵɵproperty("libPlausibleEvent", ctx.collapsed ? ctx.EXPAND_PLAUSIBLE_EVENT : ctx.COLLAPSE_PLAUSIBLE_EVENT)("matTooltip", i0.ɵɵpipeBind1(16, 34, ctx.collapsed ? "MENU.EXPAND" : "MENU.COLLAPSE"));
|
|
470
|
+
i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(17, 36, "ARIA_LABELS.MENU_TOGGLER"));
|
|
457
471
|
i0.ɵɵadvance(3);
|
|
458
472
|
i0.ɵɵproperty("ngClass.lt-sm", "mob-close-icon");
|
|
459
|
-
i0.ɵɵadvance(
|
|
460
|
-
i0.ɵɵtextInterpolate(ctx.
|
|
473
|
+
i0.ɵɵadvance();
|
|
474
|
+
i0.ɵɵtextInterpolate(ctx.customIcons.customMobileCloseIcon);
|
|
475
|
+
i0.ɵɵadvance(2);
|
|
476
|
+
i0.ɵɵtextInterpolate(ctx.collapsed ? ctx.customIcons.customOpenIcon : ctx.customIcons.customCloseIcon);
|
|
461
477
|
i0.ɵɵadvance(2);
|
|
462
478
|
i0.ɵɵproperty("direction", ctx.direction)("isOpen", !ctx.collapsed)("active", ctx.active);
|
|
463
479
|
i0.ɵɵadvance();
|
|
464
|
-
i0.ɵɵconditional(ctx.useDefaultLanguageSwitcher && ctx.supportedLanguages.length > 1 ? 24 : -1);
|
|
480
|
+
i0.ɵɵconditional(ctx.useDefaultLanguageSwitcher && ctx.supportedLanguages && ctx.supportedLanguages.length > 1 ? 24 : -1);
|
|
465
481
|
i0.ɵɵadvance(3);
|
|
466
482
|
i0.ɵɵproperty("userOptions", ctx.menuSettings.userOptions)("username", ctx.username)("collapsed", ctx.collapsed);
|
|
467
483
|
} }, 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}"] }); }
|
|
468
484
|
}
|
|
469
485
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SideNavMenuComponent, [{
|
|
470
486
|
type: Component,
|
|
471
|
-
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'\">
|
|
487
|
+
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'\">{{customIcons.customMobileCloseIcon}}</mat-icon>\r\n <mat-icon fxHide.lt-sm>{{ collapsed ? customIcons.customOpenIcon : customIcons.customCloseIcon }}</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <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 @if (useDefaultLanguageSwitcher && supportedLanguages && 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"] }]
|
|
472
488
|
}], () => [{ type: i1.StrapiLinkService }, { type: i2.DOMService }, { type: MenuItemsService }], { username: [{
|
|
473
489
|
type: Input
|
|
474
490
|
}], menuSettings: [{
|
|
@@ -482,7 +498,7 @@ class SideNavMenuComponent extends NavBaseComponent {
|
|
|
482
498
|
}], changeLanguageEvent: [{
|
|
483
499
|
type: Output
|
|
484
500
|
}] }); })();
|
|
485
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SideNavMenuComponent, { className: "SideNavMenuComponent", filePath: "lib\\components\\side-nav-menu\\side-nav-menu.component.ts", lineNumber:
|
|
501
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SideNavMenuComponent, { className: "SideNavMenuComponent", filePath: "lib\\components\\side-nav-menu\\side-nav-menu.component.ts", lineNumber: 16 }); })();
|
|
486
502
|
|
|
487
503
|
var MenuLayoutDirection;
|
|
488
504
|
(function (MenuLayoutDirection) {
|
|
@@ -690,7 +706,7 @@ class MenuItemBtnComponent {
|
|
|
690
706
|
const _c0$1 = a0 => ({ menuItem: a0 });
|
|
691
707
|
const _c1 = a0 => ({ menuItem: a0, isChild: true });
|
|
692
708
|
function MenuItemListComponent_Conditional_1_mat_icon_1_Template(rf, ctx) { if (rf & 1) {
|
|
693
|
-
i0.ɵɵelementStart(0, "mat-icon",
|
|
709
|
+
i0.ɵɵelementStart(0, "mat-icon", 14);
|
|
694
710
|
i0.ɵɵtext(1);
|
|
695
711
|
i0.ɵɵelementEnd();
|
|
696
712
|
} if (rf & 2) {
|
|
@@ -699,21 +715,21 @@ function MenuItemListComponent_Conditional_1_mat_icon_1_Template(rf, ctx) { if (
|
|
|
699
715
|
i0.ɵɵtextInterpolate1(" ", ctx_r0.menuItemGroup.titleIcon, " ");
|
|
700
716
|
} }
|
|
701
717
|
function MenuItemListComponent_Conditional_1_button_2_Template(rf, ctx) { if (rf & 1) {
|
|
702
|
-
i0.ɵɵelementStart(0, "button",
|
|
718
|
+
i0.ɵɵelementStart(0, "button", 15);
|
|
703
719
|
i0.ɵɵpipe(1, "translate");
|
|
704
720
|
i0.ɵɵelementStart(2, "mat-icon");
|
|
705
721
|
i0.ɵɵtext(3);
|
|
706
722
|
i0.ɵɵelementEnd()();
|
|
707
723
|
} if (rf & 2) {
|
|
708
|
-
let
|
|
724
|
+
let tmp_8_0;
|
|
709
725
|
const ctx_r0 = i0.ɵɵnextContext(2);
|
|
710
|
-
i0.ɵɵproperty("routerLink", ctx_r0.menuItemGroup.titleNavigation.path)("matTooltip", i0.ɵɵpipeBind1(1, 3, (
|
|
726
|
+
i0.ɵɵproperty("routerLink", ctx_r0.menuItemGroup.titleNavigation.path)("matTooltip", i0.ɵɵpipeBind1(1, 3, (tmp_8_0 = ctx_r0.menuItemGroup.titleNavigation == null ? null : ctx_r0.menuItemGroup.titleNavigation.tooltip) !== null && tmp_8_0 !== undefined ? tmp_8_0 : ""));
|
|
711
727
|
i0.ɵɵadvance(3);
|
|
712
728
|
i0.ɵɵtextInterpolate(ctx_r0.menuItemGroup.titleNavigation.icon);
|
|
713
729
|
} }
|
|
714
730
|
function MenuItemListComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
715
|
-
i0.ɵɵelementStart(0, "div",
|
|
716
|
-
i0.ɵɵtemplate(1, MenuItemListComponent_Conditional_1_mat_icon_1_Template, 2, 1, "mat-icon",
|
|
731
|
+
i0.ɵɵelementStart(0, "div", 9);
|
|
732
|
+
i0.ɵɵtemplate(1, MenuItemListComponent_Conditional_1_mat_icon_1_Template, 2, 1, "mat-icon", 12)(2, MenuItemListComponent_Conditional_1_button_2_Template, 4, 5, "button", 13);
|
|
717
733
|
i0.ɵɵtext(3);
|
|
718
734
|
i0.ɵɵpipe(4, "translate");
|
|
719
735
|
i0.ɵɵelementEnd();
|
|
@@ -730,143 +746,153 @@ function MenuItemListComponent_Conditional_2_ng_container_0_Template(rf, ctx) {
|
|
|
730
746
|
i0.ɵɵelementContainer(0);
|
|
731
747
|
} }
|
|
732
748
|
function MenuItemListComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
|
|
733
|
-
i0.ɵɵtemplate(0, MenuItemListComponent_Conditional_2_ng_container_0_Template, 1, 0, "ng-container",
|
|
749
|
+
i0.ɵɵtemplate(0, MenuItemListComponent_Conditional_2_ng_container_0_Template, 1, 0, "ng-container", 16);
|
|
734
750
|
} if (rf & 2) {
|
|
735
751
|
i0.ɵɵnextContext();
|
|
736
|
-
const itemGroupButton_r2 = i0.ɵɵreference(
|
|
752
|
+
const itemGroupButton_r2 = i0.ɵɵreference(13);
|
|
737
753
|
i0.ɵɵproperty("ngTemplateOutlet", itemGroupButton_r2);
|
|
738
754
|
} }
|
|
739
|
-
function
|
|
755
|
+
function MenuItemListComponent_Conditional_3_ng_container_0_Template(rf, ctx) { if (rf & 1) {
|
|
740
756
|
i0.ɵɵelementContainer(0);
|
|
741
757
|
} }
|
|
742
|
-
function
|
|
758
|
+
function MenuItemListComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
|
|
759
|
+
i0.ɵɵtemplate(0, MenuItemListComponent_Conditional_3_ng_container_0_Template, 1, 0, "ng-container", 16);
|
|
760
|
+
} if (rf & 2) {
|
|
761
|
+
i0.ɵɵnextContext();
|
|
762
|
+
const itemGroupDescriptionBlock_r3 = i0.ɵɵreference(15);
|
|
763
|
+
i0.ɵɵproperty("ngTemplateOutlet", itemGroupDescriptionBlock_r3);
|
|
764
|
+
} }
|
|
765
|
+
function MenuItemListComponent_ng_container_5_ng_container_1_Template(rf, ctx) { if (rf & 1) {
|
|
766
|
+
i0.ɵɵelementContainer(0);
|
|
767
|
+
} }
|
|
768
|
+
function MenuItemListComponent_ng_container_5_Template(rf, ctx) { if (rf & 1) {
|
|
743
769
|
i0.ɵɵelementContainerStart(0);
|
|
744
|
-
i0.ɵɵtemplate(1,
|
|
770
|
+
i0.ɵɵtemplate(1, MenuItemListComponent_ng_container_5_ng_container_1_Template, 1, 0, "ng-container", 17);
|
|
745
771
|
i0.ɵɵelementContainerEnd();
|
|
746
772
|
} if (rf & 2) {
|
|
747
|
-
const
|
|
773
|
+
const menuItem_r4 = ctx.$implicit;
|
|
748
774
|
i0.ɵɵnextContext();
|
|
749
|
-
const
|
|
750
|
-
const
|
|
751
|
-
const
|
|
775
|
+
const itemWithChildren_r5 = i0.ɵɵreference(7);
|
|
776
|
+
const menuItemLink_r6 = i0.ɵɵreference(9);
|
|
777
|
+
const menuItemBtn_r7 = i0.ɵɵreference(11);
|
|
752
778
|
i0.ɵɵadvance();
|
|
753
|
-
i0.ɵɵproperty("ngTemplateOutlet", !
|
|
779
|
+
i0.ɵɵproperty("ngTemplateOutlet", !menuItem_r4.showChildren || !menuItem_r4.children || (menuItem_r4 == null ? null : menuItem_r4.children == null ? null : menuItem_r4.children.length) === 0 ? menuItem_r4.clickAction ? menuItemBtn_r7 : menuItemLink_r6 : itemWithChildren_r5)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c0$1, menuItem_r4));
|
|
754
780
|
} }
|
|
755
|
-
function
|
|
781
|
+
function MenuItemListComponent_ng_template_6_ng_container_3_Template(rf, ctx) { if (rf & 1) {
|
|
756
782
|
i0.ɵɵelementContainerStart(0);
|
|
757
|
-
i0.ɵɵelement(1, "tld-menu-icon",
|
|
783
|
+
i0.ɵɵelement(1, "tld-menu-icon", 22);
|
|
758
784
|
i0.ɵɵelementContainerEnd();
|
|
759
785
|
} if (rf & 2) {
|
|
760
|
-
const
|
|
786
|
+
const menuItem_r9 = i0.ɵɵnextContext().menuItem;
|
|
761
787
|
i0.ɵɵadvance();
|
|
762
|
-
i0.ɵɵproperty("menuItem",
|
|
788
|
+
i0.ɵɵproperty("menuItem", menuItem_r9);
|
|
763
789
|
} }
|
|
764
|
-
function
|
|
765
|
-
i0.ɵɵelementStart(0, "span",
|
|
790
|
+
function MenuItemListComponent_ng_template_6_ng_container_4_ng_container_5_span_1_Template(rf, ctx) { if (rf & 1) {
|
|
791
|
+
i0.ɵɵelementStart(0, "span", 26);
|
|
766
792
|
i0.ɵɵtext(1, "keyboard_arrow_down");
|
|
767
793
|
i0.ɵɵelementEnd();
|
|
768
794
|
} }
|
|
769
|
-
function
|
|
770
|
-
i0.ɵɵelementStart(0, "span",
|
|
795
|
+
function MenuItemListComponent_ng_template_6_ng_container_4_ng_container_5_ng_template_2_Template(rf, ctx) { if (rf & 1) {
|
|
796
|
+
i0.ɵɵelementStart(0, "span", 26);
|
|
771
797
|
i0.ɵɵtext(1, " keyboard_arrow_up ");
|
|
772
798
|
i0.ɵɵelementEnd();
|
|
773
799
|
} }
|
|
774
|
-
function
|
|
800
|
+
function MenuItemListComponent_ng_template_6_ng_container_4_ng_container_5_Template(rf, ctx) { if (rf & 1) {
|
|
775
801
|
i0.ɵɵelementContainerStart(0);
|
|
776
|
-
i0.ɵɵtemplate(1,
|
|
802
|
+
i0.ɵɵtemplate(1, MenuItemListComponent_ng_template_6_ng_container_4_ng_container_5_span_1_Template, 2, 0, "span", 25)(2, MenuItemListComponent_ng_template_6_ng_container_4_ng_container_5_ng_template_2_Template, 2, 0, "ng-template", null, 7, i0.ɵɵtemplateRefExtractor);
|
|
777
803
|
i0.ɵɵelementContainerEnd();
|
|
778
804
|
} if (rf & 2) {
|
|
779
|
-
const
|
|
805
|
+
const iconDown_r10 = i0.ɵɵreference(3);
|
|
780
806
|
i0.ɵɵnextContext(2);
|
|
781
|
-
const
|
|
807
|
+
const state_r11 = i0.ɵɵreference(1);
|
|
782
808
|
i0.ɵɵadvance();
|
|
783
|
-
i0.ɵɵproperty("ngIf",
|
|
809
|
+
i0.ɵɵproperty("ngIf", state_r11.menuOpen)("ngIfElse", iconDown_r10);
|
|
784
810
|
} }
|
|
785
|
-
function
|
|
811
|
+
function MenuItemListComponent_ng_template_6_ng_container_4_Template(rf, ctx) { if (rf & 1) {
|
|
786
812
|
i0.ɵɵelementContainerStart(0);
|
|
787
|
-
i0.ɵɵelementStart(1, "span",
|
|
813
|
+
i0.ɵɵelementStart(1, "span", 23)(2, "span", 24);
|
|
788
814
|
i0.ɵɵtext(3);
|
|
789
815
|
i0.ɵɵpipe(4, "translate");
|
|
790
816
|
i0.ɵɵelementEnd()();
|
|
791
|
-
i0.ɵɵtemplate(5,
|
|
817
|
+
i0.ɵɵtemplate(5, MenuItemListComponent_ng_template_6_ng_container_4_ng_container_5_Template, 4, 2, "ng-container", 19);
|
|
792
818
|
i0.ɵɵelementContainerEnd();
|
|
793
819
|
} if (rf & 2) {
|
|
794
|
-
const
|
|
820
|
+
const menuItem_r9 = i0.ɵɵnextContext().menuItem;
|
|
795
821
|
i0.ɵɵadvance(3);
|
|
796
|
-
i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(4, 2,
|
|
822
|
+
i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(4, 2, menuItem_r9.title));
|
|
797
823
|
i0.ɵɵadvance(2);
|
|
798
|
-
i0.ɵɵproperty("ngIf",
|
|
824
|
+
i0.ɵɵproperty("ngIf", menuItem_r9.showChildren && menuItem_r9.children);
|
|
799
825
|
} }
|
|
800
|
-
function
|
|
826
|
+
function MenuItemListComponent_ng_template_6_For_8_ng_container_1_Template(rf, ctx) { if (rf & 1) {
|
|
801
827
|
i0.ɵɵelementContainer(0);
|
|
802
828
|
} }
|
|
803
|
-
function
|
|
804
|
-
i0.ɵɵelementStart(0, "div",
|
|
805
|
-
i0.ɵɵtemplate(1,
|
|
829
|
+
function MenuItemListComponent_ng_template_6_For_8_Template(rf, ctx) { if (rf & 1) {
|
|
830
|
+
i0.ɵɵelementStart(0, "div", 21);
|
|
831
|
+
i0.ɵɵtemplate(1, MenuItemListComponent_ng_template_6_For_8_ng_container_1_Template, 1, 0, "ng-container", 17);
|
|
806
832
|
i0.ɵɵelementEnd();
|
|
807
833
|
} if (rf & 2) {
|
|
808
|
-
const
|
|
809
|
-
const
|
|
834
|
+
const child_r12 = ctx.$implicit;
|
|
835
|
+
const menuItem_r9 = i0.ɵɵnextContext().menuItem;
|
|
810
836
|
i0.ɵɵnextContext();
|
|
811
|
-
const
|
|
812
|
-
const
|
|
837
|
+
const menuItemLink_r6 = i0.ɵɵreference(9);
|
|
838
|
+
const menuItemBtn_r7 = i0.ɵɵreference(11);
|
|
813
839
|
i0.ɵɵadvance();
|
|
814
|
-
i0.ɵɵproperty("ngTemplateOutlet",
|
|
840
|
+
i0.ɵɵproperty("ngTemplateOutlet", menuItem_r9.clickAction ? menuItemBtn_r7 : menuItemLink_r6)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c1, child_r12));
|
|
815
841
|
} }
|
|
816
|
-
function
|
|
817
|
-
const
|
|
818
|
-
i0.ɵɵelementStart(0, "button",
|
|
842
|
+
function MenuItemListComponent_ng_template_6_Template(rf, ctx) { if (rf & 1) {
|
|
843
|
+
const _r8 = i0.ɵɵgetCurrentView();
|
|
844
|
+
i0.ɵɵelementStart(0, "button", 18, 5);
|
|
819
845
|
i0.ɵɵpipe(2, "translate");
|
|
820
|
-
i0.ɵɵlistener("click", function
|
|
821
|
-
i0.ɵɵtemplate(3,
|
|
846
|
+
i0.ɵɵlistener("click", function MenuItemListComponent_ng_template_6_Template_button_click_0_listener($event) { const menuItem_r9 = i0.ɵɵrestoreView(_r8).menuItem; const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.toggleItemExpand($event, menuItem_r9)); });
|
|
847
|
+
i0.ɵɵtemplate(3, MenuItemListComponent_ng_template_6_ng_container_3_Template, 2, 1, "ng-container", 19)(4, MenuItemListComponent_ng_template_6_ng_container_4_Template, 6, 4, "ng-container", 19);
|
|
822
848
|
i0.ɵɵelementEnd();
|
|
823
|
-
i0.ɵɵelementStart(5, "mat-menu",
|
|
824
|
-
i0.ɵɵrepeaterCreate(7,
|
|
849
|
+
i0.ɵɵelementStart(5, "mat-menu", 20, 6);
|
|
850
|
+
i0.ɵɵrepeaterCreate(7, MenuItemListComponent_ng_template_6_For_8_Template, 2, 4, "div", 21, i0.ɵɵrepeaterTrackByIndex);
|
|
825
851
|
i0.ɵɵelementEnd();
|
|
826
852
|
} if (rf & 2) {
|
|
827
|
-
const
|
|
828
|
-
const
|
|
829
|
-
const
|
|
853
|
+
const menuItem_r9 = ctx.menuItem;
|
|
854
|
+
const state_r11 = i0.ɵɵreference(1);
|
|
855
|
+
const menu_r13 = i0.ɵɵreference(6);
|
|
830
856
|
const ctx_r0 = i0.ɵɵnextContext();
|
|
831
|
-
i0.ɵɵclassProp("menu-labels-visible", ctx_r0.labelsVisible)("active-menu-item", (ctx_r0.activeItem == null ? null : ctx_r0.activeItem.link) &&
|
|
832
|
-
i0.ɵɵproperty("matTooltip", !ctx_r0.labelsVisible ? i0.ɵɵpipeBind1(2, 12,
|
|
833
|
-
i0.ɵɵattribute("id",
|
|
857
|
+
i0.ɵɵclassProp("menu-labels-visible", ctx_r0.labelsVisible)("active-menu-item", (ctx_r0.activeItem == null ? null : ctx_r0.activeItem.link) && menuItem_r9 === ctx_r0.activeItem || state_r11.menuOpen);
|
|
858
|
+
i0.ɵɵproperty("matTooltip", !ctx_r0.labelsVisible ? i0.ɵɵpipeBind1(2, 12, menuItem_r9.title) : "")("fxLayout", ctx_r0.menuItemLayout)("fxLayoutAlign", ctx_r0.menuLayoutDirection)("matMenuTriggerFor", menu_r13)("ngClass.lt-md", "mob-menu-item");
|
|
859
|
+
i0.ɵɵattribute("id", menuItem_r9.customId);
|
|
834
860
|
i0.ɵɵadvance(3);
|
|
835
|
-
i0.ɵɵproperty("ngIf", ctx_r0.showIcons &&
|
|
861
|
+
i0.ɵɵproperty("ngIf", ctx_r0.showIcons && menuItem_r9.icon);
|
|
836
862
|
i0.ɵɵadvance();
|
|
837
863
|
i0.ɵɵproperty("ngIf", ctx_r0.labelsVisible);
|
|
838
864
|
i0.ɵɵadvance(3);
|
|
839
|
-
i0.ɵɵrepeater(
|
|
865
|
+
i0.ɵɵrepeater(menuItem_r9.children);
|
|
840
866
|
} }
|
|
841
|
-
function
|
|
842
|
-
i0.ɵɵelement(0, "tld-menu-item-link",
|
|
867
|
+
function MenuItemListComponent_ng_template_8_Template(rf, ctx) { if (rf & 1) {
|
|
868
|
+
i0.ɵɵelement(0, "tld-menu-item-link", 27);
|
|
843
869
|
} if (rf & 2) {
|
|
844
|
-
const
|
|
845
|
-
const
|
|
870
|
+
const menuItem_r14 = ctx.menuItem;
|
|
871
|
+
const isChild_r15 = ctx.isChild;
|
|
846
872
|
const ctx_r0 = i0.ɵɵnextContext();
|
|
847
|
-
i0.ɵɵproperty("ngClass.lt-md", "mob-menu-item")("menuItem",
|
|
873
|
+
i0.ɵɵproperty("ngClass.lt-md", "mob-menu-item")("menuItem", menuItem_r14)("direction", ctx_r0.direction)("labelsVisible", ctx_r0.labelsVisible || isChild_r15)("activeItem", ctx_r0.activeItem)("showIcons", ctx_r0.showIcons);
|
|
848
874
|
} }
|
|
849
|
-
function
|
|
850
|
-
i0.ɵɵelement(0, "lib-menu-item-btn",
|
|
875
|
+
function MenuItemListComponent_ng_template_10_lib_menu_item_btn_0_Template(rf, ctx) { if (rf & 1) {
|
|
876
|
+
i0.ɵɵelement(0, "lib-menu-item-btn", 29);
|
|
851
877
|
} if (rf & 2) {
|
|
852
|
-
const
|
|
878
|
+
const menuItem_r16 = i0.ɵɵnextContext().menuItem;
|
|
853
879
|
const ctx_r0 = i0.ɵɵnextContext();
|
|
854
|
-
i0.ɵɵproperty("ngClass.lt-md", "mob-menu-item")("menuItem",
|
|
880
|
+
i0.ɵɵproperty("ngClass.lt-md", "mob-menu-item")("menuItem", menuItem_r16)("direction", ctx_r0.direction)("activeItem", ctx_r0.activeItem);
|
|
855
881
|
} }
|
|
856
|
-
function
|
|
857
|
-
i0.ɵɵtemplate(0,
|
|
882
|
+
function MenuItemListComponent_ng_template_10_Template(rf, ctx) { if (rf & 1) {
|
|
883
|
+
i0.ɵɵtemplate(0, MenuItemListComponent_ng_template_10_lib_menu_item_btn_0_Template, 1, 4, "lib-menu-item-btn", 28);
|
|
858
884
|
} if (rf & 2) {
|
|
859
885
|
const ctx_r0 = i0.ɵɵnextContext();
|
|
860
886
|
i0.ɵɵproperty("ngIf", ctx_r0.labelsVisible);
|
|
861
887
|
} }
|
|
862
|
-
function
|
|
863
|
-
i0.ɵɵelement(0, "mat-icon",
|
|
888
|
+
function MenuItemListComponent_ng_template_12_button_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
889
|
+
i0.ɵɵelement(0, "mat-icon", 33);
|
|
864
890
|
} if (rf & 2) {
|
|
865
|
-
let
|
|
891
|
+
let tmp_8_0;
|
|
866
892
|
const ctx_r0 = i0.ɵɵnextContext(3);
|
|
867
|
-
i0.ɵɵproperty("svgIcon", (
|
|
893
|
+
i0.ɵɵproperty("svgIcon", (tmp_8_0 = ctx_r0.menuItemGroup.itemGroupIcon) !== null && tmp_8_0 !== undefined ? tmp_8_0 : "");
|
|
868
894
|
} }
|
|
869
|
-
function
|
|
895
|
+
function MenuItemListComponent_ng_template_12_button_0_Conditional_2_Template(rf, ctx) { if (rf & 1) {
|
|
870
896
|
i0.ɵɵelementStart(0, "mat-icon");
|
|
871
897
|
i0.ɵɵtext(1);
|
|
872
898
|
i0.ɵɵelementEnd();
|
|
@@ -875,8 +901,8 @@ function MenuItemListComponent_ng_template_11_button_0_Conditional_2_Template(rf
|
|
|
875
901
|
i0.ɵɵadvance();
|
|
876
902
|
i0.ɵɵtextInterpolate(ctx_r0.menuItemGroup.itemGroupIcon);
|
|
877
903
|
} }
|
|
878
|
-
function
|
|
879
|
-
i0.ɵɵelementStart(0, "span",
|
|
904
|
+
function MenuItemListComponent_ng_template_12_button_0_span_3_Template(rf, ctx) { if (rf & 1) {
|
|
905
|
+
i0.ɵɵelementStart(0, "span", 35);
|
|
880
906
|
i0.ɵɵtext(1);
|
|
881
907
|
i0.ɵɵpipe(2, "translate");
|
|
882
908
|
i0.ɵɵelementEnd();
|
|
@@ -885,11 +911,11 @@ function MenuItemListComponent_ng_template_11_button_0_span_3_Template(rf, ctx)
|
|
|
885
911
|
i0.ɵɵadvance();
|
|
886
912
|
i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(2, 1, ctx_r0.titleKey), " ");
|
|
887
913
|
} }
|
|
888
|
-
function
|
|
889
|
-
const
|
|
890
|
-
i0.ɵɵelementStart(0, "button",
|
|
891
|
-
i0.ɵɵlistener("click", function
|
|
892
|
-
i0.ɵɵtemplate(1,
|
|
914
|
+
function MenuItemListComponent_ng_template_12_button_0_Template(rf, ctx) { if (rf & 1) {
|
|
915
|
+
const _r17 = i0.ɵɵgetCurrentView();
|
|
916
|
+
i0.ɵɵelementStart(0, "button", 32);
|
|
917
|
+
i0.ɵɵlistener("click", function MenuItemListComponent_ng_template_12_button_0_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r17); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.menuItemGroup == null ? null : ctx_r0.menuItemGroup.itemGroupClick()); });
|
|
918
|
+
i0.ɵɵtemplate(1, MenuItemListComponent_ng_template_12_button_0_Conditional_1_Template, 1, 1, "mat-icon", 33)(2, MenuItemListComponent_ng_template_12_button_0_Conditional_2_Template, 2, 1, "mat-icon")(3, MenuItemListComponent_ng_template_12_button_0_span_3_Template, 3, 3, "span", 34);
|
|
893
919
|
i0.ɵɵelementEnd();
|
|
894
920
|
} if (rf & 2) {
|
|
895
921
|
const ctx_r0 = i0.ɵɵnextContext(2);
|
|
@@ -899,14 +925,14 @@ function MenuItemListComponent_ng_template_11_button_0_Template(rf, ctx) { if (r
|
|
|
899
925
|
i0.ɵɵadvance(2);
|
|
900
926
|
i0.ɵɵproperty("ngIf", ctx_r0.titleKey);
|
|
901
927
|
} }
|
|
902
|
-
function
|
|
903
|
-
i0.ɵɵelement(0, "mat-icon",
|
|
928
|
+
function MenuItemListComponent_ng_template_12_button_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
|
|
929
|
+
i0.ɵɵelement(0, "mat-icon", 33);
|
|
904
930
|
} if (rf & 2) {
|
|
905
|
-
let
|
|
931
|
+
let tmp_8_0;
|
|
906
932
|
const ctx_r0 = i0.ɵɵnextContext(3);
|
|
907
|
-
i0.ɵɵproperty("svgIcon", (
|
|
933
|
+
i0.ɵɵproperty("svgIcon", (tmp_8_0 = ctx_r0.menuItemGroup.itemGroupIcon) !== null && tmp_8_0 !== undefined ? tmp_8_0 : "");
|
|
908
934
|
} }
|
|
909
|
-
function
|
|
935
|
+
function MenuItemListComponent_ng_template_12_button_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
|
|
910
936
|
i0.ɵɵelementStart(0, "mat-icon");
|
|
911
937
|
i0.ɵɵtext(1);
|
|
912
938
|
i0.ɵɵelementEnd();
|
|
@@ -915,12 +941,12 @@ function MenuItemListComponent_ng_template_11_button_1_Conditional_3_Template(rf
|
|
|
915
941
|
i0.ɵɵadvance();
|
|
916
942
|
i0.ɵɵtextInterpolate(ctx_r0.menuItemGroup.itemGroupIcon);
|
|
917
943
|
} }
|
|
918
|
-
function
|
|
919
|
-
const
|
|
920
|
-
i0.ɵɵelementStart(0, "button",
|
|
944
|
+
function MenuItemListComponent_ng_template_12_button_1_Template(rf, ctx) { if (rf & 1) {
|
|
945
|
+
const _r18 = i0.ɵɵgetCurrentView();
|
|
946
|
+
i0.ɵɵelementStart(0, "button", 36);
|
|
921
947
|
i0.ɵɵpipe(1, "translate");
|
|
922
|
-
i0.ɵɵlistener("click", function
|
|
923
|
-
i0.ɵɵtemplate(2,
|
|
948
|
+
i0.ɵɵlistener("click", function MenuItemListComponent_ng_template_12_button_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r18); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.menuItemGroup == null ? null : ctx_r0.menuItemGroup.itemGroupClick()); });
|
|
949
|
+
i0.ɵɵtemplate(2, MenuItemListComponent_ng_template_12_button_1_Conditional_2_Template, 1, 1, "mat-icon", 33)(3, MenuItemListComponent_ng_template_12_button_1_Conditional_3_Template, 2, 1, "mat-icon");
|
|
924
950
|
i0.ɵɵelementEnd();
|
|
925
951
|
} if (rf & 2) {
|
|
926
952
|
const ctx_r0 = i0.ɵɵnextContext(2);
|
|
@@ -928,14 +954,28 @@ function MenuItemListComponent_ng_template_11_button_1_Template(rf, ctx) { if (r
|
|
|
928
954
|
i0.ɵɵadvance(2);
|
|
929
955
|
i0.ɵɵconditional(ctx_r0.menuItemGroup.isCustomItemGroupIcon ? 2 : 3);
|
|
930
956
|
} }
|
|
931
|
-
function
|
|
932
|
-
i0.ɵɵtemplate(0,
|
|
957
|
+
function MenuItemListComponent_ng_template_12_Template(rf, ctx) { if (rf & 1) {
|
|
958
|
+
i0.ɵɵtemplate(0, MenuItemListComponent_ng_template_12_button_0_Template, 4, 4, "button", 30)(1, MenuItemListComponent_ng_template_12_button_1_Template, 4, 4, "button", 31);
|
|
933
959
|
} if (rf & 2) {
|
|
934
960
|
const ctx_r0 = i0.ɵɵnextContext();
|
|
935
961
|
i0.ɵɵproperty("ngIf", ctx_r0.menuItemGroup && ctx_r0.labelsVisible);
|
|
936
962
|
i0.ɵɵadvance();
|
|
937
963
|
i0.ɵɵproperty("ngIf", ctx_r0.menuItemGroup && !ctx_r0.labelsVisible && ctx_r0.titleKey && ctx_r0.menuItemGroup.itemGroupIcon);
|
|
938
964
|
} }
|
|
965
|
+
function MenuItemListComponent_ng_template_14_Template(rf, ctx) { if (rf & 1) {
|
|
966
|
+
i0.ɵɵelementStart(0, "div", 37);
|
|
967
|
+
i0.ɵɵelement(1, "span", 38);
|
|
968
|
+
i0.ɵɵpipe(2, "translate");
|
|
969
|
+
i0.ɵɵelement(3, "p", 39);
|
|
970
|
+
i0.ɵɵpipe(4, "translate");
|
|
971
|
+
i0.ɵɵelementEnd();
|
|
972
|
+
} if (rf & 2) {
|
|
973
|
+
const ctx_r0 = i0.ɵɵnextContext();
|
|
974
|
+
i0.ɵɵadvance();
|
|
975
|
+
i0.ɵɵproperty("innerHTML", i0.ɵɵpipeBind1(2, 2, ctx_r0.menuItemGroup.title || ""), i0.ɵɵsanitizeHtml);
|
|
976
|
+
i0.ɵɵadvance(2);
|
|
977
|
+
i0.ɵɵproperty("innerHTML", i0.ɵɵpipeBind1(4, 4, ctx_r0.menuItemGroup.description || ""), i0.ɵɵsanitizeHtml);
|
|
978
|
+
} }
|
|
939
979
|
class MenuItemListComponent {
|
|
940
980
|
constructor() {
|
|
941
981
|
this.direction = MenuLayoutDirection.column;
|
|
@@ -966,25 +1006,25 @@ class MenuItemListComponent {
|
|
|
966
1006
|
this.toggleExpand.next(menuItem);
|
|
967
1007
|
}
|
|
968
1008
|
static { this.ɵfac = function MenuItemListComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MenuItemListComponent)(); }; }
|
|
969
|
-
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:
|
|
970
|
-
i0.ɵɵelementStart(0, "div",
|
|
971
|
-
i0.ɵɵtemplate(1, MenuItemListComponent_Conditional_1_Template, 5, 5, "div",
|
|
972
|
-
i0.ɵɵelementStart(
|
|
973
|
-
i0.ɵɵtemplate(
|
|
1009
|
+
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: 16, vars: 3, consts: [["itemWithChildren", ""], ["menuItemLink", ""], ["menuItemBtn", ""], ["itemGroupButton", ""], ["itemGroupDescriptionBlock", ""], ["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, "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"], [1, "description-block"], [1, "description-block-title", 3, "innerHTML"], [1, "description-block-paragraph", 3, "innerHTML"]], template: function MenuItemListComponent_Template(rf, ctx) { if (rf & 1) {
|
|
1010
|
+
i0.ɵɵelementStart(0, "div", 8);
|
|
1011
|
+
i0.ɵɵtemplate(1, MenuItemListComponent_Conditional_1_Template, 5, 5, "div", 9)(2, MenuItemListComponent_Conditional_2_Template, 1, 1, "ng-container")(3, MenuItemListComponent_Conditional_3_Template, 1, 1, "ng-container");
|
|
1012
|
+
i0.ɵɵelementStart(4, "div", 10);
|
|
1013
|
+
i0.ɵɵtemplate(5, MenuItemListComponent_ng_container_5_Template, 2, 4, "ng-container", 11);
|
|
974
1014
|
i0.ɵɵelementEnd()();
|
|
975
|
-
i0.ɵɵtemplate(
|
|
1015
|
+
i0.ɵɵtemplate(6, MenuItemListComponent_ng_template_6_Template, 9, 14, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor)(8, MenuItemListComponent_ng_template_8_Template, 1, 6, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor)(10, MenuItemListComponent_ng_template_10_Template, 1, 1, "ng-template", null, 2, i0.ɵɵtemplateRefExtractor)(12, MenuItemListComponent_ng_template_12_Template, 2, 2, "ng-template", null, 3, i0.ɵɵtemplateRefExtractor)(14, MenuItemListComponent_ng_template_14_Template, 5, 6, "ng-template", null, 4, i0.ɵɵtemplateRefExtractor);
|
|
976
1016
|
} if (rf & 2) {
|
|
977
1017
|
i0.ɵɵadvance();
|
|
978
|
-
i0.ɵɵconditional(ctx.titleKey && ctx.showTitle && ctx.labelsVisible && !ctx.menuItemGroup.itemGroupClick ? 1 : (ctx.menuItemGroup == null ? null : ctx.menuItemGroup.itemGroupClick) ? 2 : -1);
|
|
979
|
-
i0.ɵɵadvance(
|
|
1018
|
+
i0.ɵɵconditional(ctx.titleKey && ctx.showTitle && ctx.labelsVisible && !ctx.menuItemGroup.itemGroupClick && !ctx.menuItemGroup.description ? 1 : (ctx.menuItemGroup == null ? null : ctx.menuItemGroup.itemGroupClick) ? 2 : (ctx.menuItemGroup == null ? null : ctx.menuItemGroup.description) && ctx.labelsVisible ? 3 : -1);
|
|
1019
|
+
i0.ɵɵadvance(3);
|
|
980
1020
|
i0.ɵɵproperty("fxLayoutAlign", ctx.menuLayoutDirection);
|
|
981
1021
|
i0.ɵɵadvance();
|
|
982
1022
|
i0.ɵɵproperty("ngForOf", ctx.items);
|
|
983
|
-
} }, dependencies: [i1$2.DefaultLayoutDirective, i1$2.DefaultLayoutAlignDirective, i2$2.DefaultClassDirective, i1$1.RouterLink, i3.NgForOf, i3.NgIf, i3.NgTemplateOutlet, i5.MatTooltip, i2$1.MatIcon, i7.MatButton, i7.MatIconButton, i6.MatMenu, i6.MatMenuItem, i6.MatMenuTrigger, MenuIconComponent, MenuItemLinkComponent, MenuItemBtnComponent, i8.TranslatePipe], styles: [".spin[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_spinArrow .3s forwards}@keyframes _ngcontent-%COMP%_spinArrow{to{transform:rotate(180deg)}}[_nghost-%COMP%]{display:inline-block}.menu-item[_ngcontent-%COMP%]{width:100%} a, a:hover{text-decoration:none} .collapsed .menu-item-list{display:flex!important;justify-content:center!important;align-items:center!important} .collapsed .menu-list-wrapper, .collapsed tld-menu-item-link{display:flex!important;justify-content:center!important} .collapsed .menu-item{display:flex!important;place-content:center center!important} .collapsed tld-menu-item-link:not(:first-child){margin-top:16px!important}.menu-action-button[_ngcontent-%COMP%]{justify-content:flex-start;align-items:center;max-width:100%;width:-webkit-fill-available}.menu-action-button.active-menu-item-group[_ngcontent-%COMP%]{background-color:var(--base-95)!important}[_nghost-%COMP%] .menu-list-wrapper .menu-item{cursor:pointer;font-style:normal;color:var(--base-30);text-decoration:none;align-items:center!important;font-weight:400;background:none;border:none}[_nghost-%COMP%] .menu-list-wrapper .menu-item:not(button):not(.active-menu-item):hover{background-color:var(--base-70)!important}[_nghost-%COMP%] .menu-list-wrapper .menu-item.active-menu-item, [_nghost-%COMP%] .menu-list-wrapper .menu-item.active-menu-item mat-icon, [_nghost-%COMP%] .menu-list-wrapper .menu-item.active-menu-item:hover{font-weight:600}[_nghost-%COMP%] .menu-list-wrapper .menu-item span{display:inline-block}[_nghost-%COMP%] .menu-list-wrapper .menu-item .menu-item-title{display:flex;flex-direction:row;align-items:start;width:100%}[_nghost-%COMP%] .menu-list-wrapper .menu-item .menu-item-title .title-content{width:100%;text-align:start;display:block}[_nghost-%COMP%] .menu-list-wrapper .menu-item .menu-item-title .title-content:before{display:block;content:attr(content);font-weight:600;height:0;overflow:hidden;visibility:hidden}[_nghost-%COMP%] .menu-list-wrapper .menu-parent-item.active-menu-item, [_nghost-%COMP%] .menu-list-wrapper .menu-parent-item:hover{font-weight:400!important;background-color:var(--base-70)!important} .menu-tooltip{left:.625rem;font-family:Roboto;font-style:normal;font-weight:400;font-size:.75rem;line-height:1.25rem;color:var(--base-70);border-radius:.25rem;position:relative} .menu-tooltip:after{width:0;height:0;content:\"\";position:absolute;border-left:.5rem solid transparent;border-right:.5rem solid transparent;border-bottom:.5rem solid var(--menu-border-dark-color);left:-.75rem;top:calc(50% - .25rem);transform:rotate(270deg);overflow:initial}.menu-item-list-title[_ngcontent-%COMP%]{padding:8px 0 24px;font-size:16px;font-weight:600;overflow:hidden;text-overflow:ellipsis;margin-left:20px;height:56px}.menu-item-list-title[_ngcontent-%COMP%]:has(.menu-title-btn){margin-left:0} lib-menu-lang-switcher, .menu-item-list[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_slide-in .3s forwards} lib-menu-lang-switcher, .menu-title-btn[_ngcontent-%COMP%]{margin-right:2px;transition:opacity .3s}.arrow-icon[_ngcontent-%COMP%]{margin-right:-6px}@keyframes _ngcontent-%COMP%_slide-in{0%{opacity:0;margin-left:-100px}to{opacity:1;margin-left:0}}"] }); }
|
|
1023
|
+
} }, dependencies: [i1$2.DefaultLayoutDirective, i1$2.DefaultLayoutAlignDirective, i2$2.DefaultClassDirective, i1$1.RouterLink, i3.NgForOf, i3.NgIf, i3.NgTemplateOutlet, i5.MatTooltip, i2$1.MatIcon, i7.MatButton, i7.MatIconButton, i6.MatMenu, i6.MatMenuItem, i6.MatMenuTrigger, MenuIconComponent, MenuItemLinkComponent, MenuItemBtnComponent, i8.TranslatePipe], styles: [".spin[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_spinArrow .3s forwards}@keyframes _ngcontent-%COMP%_spinArrow{to{transform:rotate(180deg)}}[_nghost-%COMP%]{display:inline-block}.menu-item[_ngcontent-%COMP%]{width:100%} a, a:hover{text-decoration:none} .collapsed .menu-item-list{display:flex!important;justify-content:center!important;align-items:center!important} .collapsed .menu-list-wrapper, .collapsed tld-menu-item-link{display:flex!important;justify-content:center!important} .collapsed .menu-item{display:flex!important;place-content:center center!important} .collapsed tld-menu-item-link:not(:first-child){margin-top:16px!important}.description-block[_ngcontent-%COMP%]{margin-top:24px;display:flex;flex-direction:column;gap:4px;width:100%;padding:8px 14px;border-radius:8px;text-align:left;font-size:14px}.description-block[_ngcontent-%COMP%] .description-block-title[_ngcontent-%COMP%]{font-weight:500}.description-block[_ngcontent-%COMP%] .description-block-paragraph[_ngcontent-%COMP%]{font-weight:400;white-space:normal}.menu-action-button[_ngcontent-%COMP%]{justify-content:flex-start;align-items:center;max-width:100%;width:-webkit-fill-available}.menu-action-button.active-menu-item-group[_ngcontent-%COMP%]{background-color:var(--base-95)!important}[_nghost-%COMP%] .menu-list-wrapper .menu-item{cursor:pointer;font-style:normal;color:var(--base-30);text-decoration:none;align-items:center!important;font-weight:400;background:none;border:none}[_nghost-%COMP%] .menu-list-wrapper .menu-item:not(button):not(.active-menu-item):hover{background-color:var(--base-70)!important}[_nghost-%COMP%] .menu-list-wrapper .menu-item.active-menu-item, [_nghost-%COMP%] .menu-list-wrapper .menu-item.active-menu-item mat-icon, [_nghost-%COMP%] .menu-list-wrapper .menu-item.active-menu-item:hover{font-weight:600}[_nghost-%COMP%] .menu-list-wrapper .menu-item span{display:inline-block}[_nghost-%COMP%] .menu-list-wrapper .menu-item .menu-item-title{display:flex;flex-direction:row;align-items:start;width:100%}[_nghost-%COMP%] .menu-list-wrapper .menu-item .menu-item-title .title-content{width:100%;text-align:start;display:block}[_nghost-%COMP%] .menu-list-wrapper .menu-item .menu-item-title .title-content:before{display:block;content:attr(content);font-weight:600;height:0;overflow:hidden;visibility:hidden}[_nghost-%COMP%] .menu-list-wrapper .menu-parent-item.active-menu-item, [_nghost-%COMP%] .menu-list-wrapper .menu-parent-item:hover{font-weight:400!important;background-color:var(--base-70)!important} .menu-tooltip{left:.625rem;font-family:Roboto;font-style:normal;font-weight:400;font-size:.75rem;line-height:1.25rem;color:var(--base-70);border-radius:.25rem;position:relative} .menu-tooltip:after{width:0;height:0;content:\"\";position:absolute;border-left:.5rem solid transparent;border-right:.5rem solid transparent;border-bottom:.5rem solid var(--menu-border-dark-color);left:-.75rem;top:calc(50% - .25rem);transform:rotate(270deg);overflow:initial}.menu-item-list-title[_ngcontent-%COMP%]{padding:8px 0 24px;font-size:16px;font-weight:600;overflow:hidden;text-overflow:ellipsis;margin-left:20px;height:56px}.menu-item-list-title[_ngcontent-%COMP%]:has(.menu-title-btn){margin-left:0} lib-menu-lang-switcher, .menu-item-list[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_slide-in .3s forwards} lib-menu-lang-switcher, .menu-title-btn[_ngcontent-%COMP%]{margin-right:2px;transition:opacity .3s}.arrow-icon[_ngcontent-%COMP%]{margin-right:-6px}@keyframes _ngcontent-%COMP%_slide-in{0%{opacity:0;margin-left:-100px}to{opacity:1;margin-left:0}}"] }); }
|
|
984
1024
|
}
|
|
985
1025
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuItemListComponent, [{
|
|
986
1026
|
type: Component,
|
|
987
|
-
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\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: [".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}.menu-action-button.active-menu-item-group{background-color:var(--base-95)!important}: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"] }]
|
|
1027
|
+
args: [{ selector: 'menu-item-list', template: "<div class=\"menu-list-wrapper\">\r\n\t@if (titleKey && showTitle && labelsVisible && !menuItemGroup.itemGroupClick && !menuItemGroup.description) {\r\n\t<div fxLayoutAlign=\"start center\" class=\"menu-item-list-title\">\r\n\t\t<mat-icon *ngIf=\"menuItemGroup.titleIcon\" class=\"menu-title-btn\">\r\n\t\t\t{{ menuItemGroup.titleIcon }}\r\n\t\t</mat-icon>\r\n\r\n\t\t<button\r\n\t\t\t*ngIf=\"menuItemGroup.titleNavigation\"\r\n\t\t\tmat-icon-button\r\n\t\t\tclass=\"menu-title-btn\"\r\n\t\t\t[routerLink]=\"menuItemGroup.titleNavigation.path\"\r\n\t\t\t[matTooltip]=\"menuItemGroup.titleNavigation?.tooltip ?? '' | translate\"\r\n\t\t>\r\n\t\t\t<mat-icon>{{ menuItemGroup.titleNavigation.icon }}</mat-icon>\r\n\t\t</button>\r\n\r\n\t\t{{ titleKey | translate }}\r\n\t</div>\r\n\t} @else if (menuItemGroup?.itemGroupClick) {\r\n\t<ng-container *ngTemplateOutlet=\"itemGroupButton\"> </ng-container>\r\n\t} @else if (menuItemGroup?.description && labelsVisible) {\r\n\t<ng-container *ngTemplateOutlet=\"itemGroupDescriptionBlock\"></ng-container>\r\n\t}\r\n\t<div class=\"menu-item-list\" fxLayout=\"column\" [fxLayoutAlign]=\"menuLayoutDirection\">\r\n\t\t<ng-container *ngFor=\"let menuItem of items\">\r\n\t\t\t<ng-container\r\n\t\t\t\t*ngTemplateOutlet=\"\r\n\t\t\t\t\t!menuItem.showChildren || !menuItem.children || menuItem?.children?.length === 0 ? (menuItem.clickAction ? menuItemBtn : menuItemLink) : itemWithChildren;\r\n\t\t\t\t\tcontext: { menuItem: menuItem }\r\n\t\t\t\t\"\r\n\t\t\t>\r\n\t\t\t</ng-container>\r\n\t\t</ng-container>\r\n\t</div>\r\n</div>\r\n\r\n<ng-template #itemWithChildren let-menuItem=\"menuItem\">\r\n\t<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\r\n\t\t*ngIf=\"menuItemGroup && labelsVisible\"\r\n\t\tmat-button\r\n\t\tclass=\"menu-title-btn menu-action-button\"\r\n\t\t(click)=\"menuItemGroup?.itemGroupClick()\"\r\n\t\t[class.active-menu-item-group]=\"menuItemGroup.isItemGroupActive && menuItemGroup.isItemGroupActive()\"\r\n\t>\r\n\t\t@if(menuItemGroup.isCustomItemGroupIcon){\r\n\t\t<mat-icon [svgIcon]=\"menuItemGroup.itemGroupIcon ?? ''\"></mat-icon>\r\n\t\t} @else {\r\n\t\t<mat-icon>{{ menuItemGroup.itemGroupIcon }}</mat-icon>\r\n\t\t}\r\n\t\t<span class=\"btn-label\" *ngIf=\"titleKey\">\r\n\t\t\t{{ titleKey | translate }}\r\n\t\t</span>\r\n\t</button>\r\n\r\n\t<button\r\n\t\t*ngIf=\"menuItemGroup && !labelsVisible && titleKey && menuItemGroup.itemGroupIcon\"\r\n\t\tmat-icon-button\r\n\t\tmatTooltipPosition=\"after\"\r\n\t\t[matTooltip]=\"titleKey | translate\"\r\n\t\t(click)=\"menuItemGroup?.itemGroupClick()\"\r\n\t>\r\n\t\t@if(menuItemGroup.isCustomItemGroupIcon){\r\n\t\t<mat-icon [svgIcon]=\"menuItemGroup.itemGroupIcon ?? ''\"></mat-icon>\r\n\t\t} @else {\r\n\t\t<mat-icon>{{ menuItemGroup.itemGroupIcon }}</mat-icon>\r\n\t\t}\r\n\t</button>\r\n</ng-template>\r\n\r\n<ng-template #itemGroupDescriptionBlock>\r\n\t<div class=\"description-block\">\r\n\t\t<span class=\"description-block-title\" [innerHTML]=\"(menuItemGroup.title || '') | translate\"></span>\r\n\t\t<p class=\"description-block-paragraph\" [innerHTML]=\"(menuItemGroup.description || '') | translate\"></p>\r\n\t</div>\r\n</ng-template>\r\n", styles: [".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}.description-block{margin-top:24px;display:flex;flex-direction:column;gap:4px;width:100%;padding:8px 14px;border-radius:8px;text-align:left;font-size:14px}.description-block .description-block-title{font-weight:500}.description-block .description-block-paragraph{font-weight:400;white-space:normal}.menu-action-button{justify-content:flex-start;align-items:center;max-width:100%;width:-webkit-fill-available}.menu-action-button.active-menu-item-group{background-color:var(--base-95)!important}: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"] }]
|
|
988
1028
|
}], null, { direction: [{
|
|
989
1029
|
type: Input
|
|
990
1030
|
}], labelsVisible: [{
|