@tilde-nlp/ngx-menu 6.1.45 → 6.1.47
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-columns/menu-columns.component.mjs +2 -11
- package/esm2022/lib/components/menu-item-link/menu-item-link.component.mjs +7 -5
- package/esm2022/lib/components/menu-item-list/menu-item-list.component.mjs +77 -69
- package/esm2022/lib/components/menu-lang-switcher/menu-lang-switcher.component.mjs +4 -4
- package/esm2022/lib/components/menu-profile/menu-profile.component.mjs +2 -2
- package/esm2022/lib/components/side-nav-menu/side-nav-menu.component.mjs +2 -2
- package/fesm2022/tilde-nlp-ngx-menu.mjs +85 -85
- package/fesm2022/tilde-nlp-ngx-menu.mjs.map +1 -1
- package/lib/components/menu-item-link/menu-item-link.component.d.ts +2 -1
- package/package.json +1 -1
|
@@ -461,11 +461,11 @@ class SideNavMenuComponent extends NavBaseComponent {
|
|
|
461
461
|
i0.ɵɵconditional(ctx.supportedLanguages.length > 1 ? 24 : -1);
|
|
462
462
|
i0.ɵɵadvance(3);
|
|
463
463
|
i0.ɵɵproperty("userOptions", ctx.menuSettings.userOptions)("username", ctx.username)("collapsed", ctx.collapsed);
|
|
464
|
-
} }, styles: ["a[_ngcontent-%COMP%]{text-decoration:none}.no-click[_ngcontent-%COMP%]{pointer-events:none!important}.mobile-header[_ngcontent-%COMP%]{display:flex;justify-content:space-between;padding:23px 27px;background-color:#fcfcfc;border:1px solid var(--base-70)}.mobile.menu-container.collapsed[_ngcontent-%COMP%]{display:none!important}.mobile.menu-container[_ngcontent-%COMP%]:not(.collapsed){display:block!important;position:fixed;min-width:100vw;min-height:100dvh;z-index:1000}button[_ngcontent-%COMP%]:has(.mob-close-icon){margin-right:14px}.menu-container[_ngcontent-%COMP%] [_ngcontent-%COMP%]::-webkit-scrollbar{width:5px}.menu-container[_ngcontent-%COMP%] [_ngcontent-%COMP%]::-webkit-scrollbar-thumb{background:var(--base-95);background-clip:padding-box}.menu-container[_ngcontent-%COMP%] [_ngcontent-%COMP%]::-webkit-scrollbar-track{background:var(--base-100)}.menu-product-name[_ngcontent-%COMP%]{white-space:nowrap;margin-left:12px;font-weight:600;color:var(--base-10)}.menu-container[_ngcontent-%COMP%]{max-height:100dvh;white-space:nowrap;height:100%;transition:width .2s ease;min-height:100dvh;overflow:auto;background:var(--base-100);border-right:2px solid var(--base-95)}.menu-container[_ngcontent-%COMP%] .menu-container-header[_ngcontent-%COMP%]{margin:24px 0;max-height:40px}.menu-container.collapsed[_ngcontent-%COMP%] .menu-container-header[_ngcontent-%COMP%]{margin:24px 0 32px!important}.menu-container[_ngcontent-%COMP%] .content[_ngcontent-%COMP%]:not(.collapsed){overflow-x:hidden;padding:0 12px}.menu-container[_ngcontent-%COMP%] .content[_ngcontent-%COMP%]:not(.collapsed) .menu-logo[_ngcontent-%COMP%]{margin-left:16px;max-width:100%}.menu-container[_ngcontent-%COMP%] .divider[_ngcontent-%COMP%]{width:100%}[_nghost-%COMP%] .collapsed .profile-wrapper{margin:36px 0!important}[_nghost-%COMP%] .mobile .profile-name{max-width:60vw}[_nghost-%COMP%] .menu-item{display:flex;padding:16px!important;border-radius:4px!important}[_nghost-%COMP%] .
|
|
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!important;margin:10px 0!important} .mat-mdc-menu-item .mat-icon{margin-right:5px!important} .collapsed .profile-wrapper{justify-content:center!important}"] }); }
|
|
465
465
|
}
|
|
466
466
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SideNavMenuComponent, [{
|
|
467
467
|
type: Component,
|
|
468
|
-
args: [{ selector: 'lib-side-nav-menu', template: "<div fxHide.gt-xs>\r\n <div [fxHide]=\"!collapsed\" class=\"mobile-header\">\r\n <a [libPlausibleEvent]=\"LOGOCLICK_PLAUSIBLE_EVENT\" fxFlex=\"3.125em\" [href]=\"baseUrl\" [class.no-click]=\"menuSettings?.disableLogoNavigation\"\r\n [attr.aria-label]=\"'MENU.ARIA_LABELS.LOGO' | translate\" (click)=\"logoClick($event)\" fxLayoutAlign=\"start center\"\r\n >\r\n <img height=\"40\" width=\"40\" class=\"menu-logo\" [src]=\"menuLogoImage\" alt=\"logo\" />\r\n <span class=\"menu-product-name\">\r\n {{ productName }}\r\n </span>\r\n </a>\r\n\r\n <button\r\n mat-icon-button\r\n class=\"toggler\"\r\n [attr.aria-label]=\"'ARIA_LABELS.MENU_TOGGLER' | translate\"\r\n [libPlausibleEvent]=\"collapsed ? EXPAND_PLAUSIBLE_EVENT : COLLAPSE_PLAUSIBLE_EVENT\"\r\n (click)=\"toggleCollapse()\"\r\n >\r\n <mat-icon>menu</mat-icon>\r\n </button>\r\n </div>\r\n</div>\r\n\r\n<div [ngClass.lt-sm]=\"'mobile'\" class=\"menu-container\" [style.width]=\"sideNavWidth\" fxLayout=\"column\" [class.collapsed]=\"collapsed\">\r\n <div class=\"content\" fxLayout=\"column\" fxFlexFill>\r\n <div class=\"menu-container-header\" fxLayout=\"row\" [fxLayoutAlign]=\"collapsed ? 'center center' : 'space-between center'\">\r\n <a *ngIf=\"!collapsed\" [libPlausibleEvent]=\"LOGOCLICK_PLAUSIBLE_EVENT\" fxFlex=\"3.125em\" [class.no-click]=\"menuSettings?.disableLogoNavigation\" [href]=\"baseUrl\"\r\n [attr.aria-label]=\"'MENU.ARIA_LABELS.LOGO' | translate\" (click)=\"logoClick($event)\" fxLayoutAlign=\"start center\"\r\n >\r\n <img height=\"40\" width=\"40\" class=\"menu-logo\" [src]=\"menuLogoImage\" alt=\"logo\" />\r\n <span class=\"menu-product-name\">\r\n {{ productName }}\r\n </span>\r\n </a>\r\n\r\n <button\r\n mat-icon-button\r\n class=\"toggler\"\r\n [attr.aria-label]=\"'ARIA_LABELS.MENU_TOGGLER' | translate\"\r\n [libPlausibleEvent]=\"collapsed ? EXPAND_PLAUSIBLE_EVENT : COLLAPSE_PLAUSIBLE_EVENT\"\r\n [matTooltip]=\"(collapsed ? 'MENU.EXPAND' : 'MENU.COLLAPSE') | translate\"\r\n (click)=\"toggleCollapse()\"\r\n >\r\n <mat-icon fxHide.gt-xs [ngClass.lt-sm]=\"'mob-close-icon'\">close</mat-icon>\r\n <mat-icon fxHide.lt-sm>{{ collapsed ? 'keyboard_double_arrow_right' : 'keyboard_double_arrow_left' }}</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <div class=\"menu-wrapper\" fxLayout=\"column\">\r\n <menu-columns (toggleCollapseEvent)=\"toggleCollapse()\" [direction]=\"direction\" role=\"navigation\" [isOpen]=\"!collapsed\"\r\n [active]=\"active\"></menu-columns>\r\n\r\n @if (supportedLanguages.length > 1) {\r\n <lib-menu-lang-switcher [isCollapsed]=\"collapsed\" [languages]=\"supportedLanguages\" (changeLanguageEvent)=\"changeLanguage($event)\"></lib-menu-lang-switcher>\r\n }\r\n </div>\r\n <div fxFlex fxLayout=\"column\">\r\n <ng-content></ng-content>\r\n </div>\r\n\r\n <lib-menu-profile\r\n [userOptions]=\"menuSettings.userOptions\"\r\n [username]=\"username\"\r\n [collapsed]=\"collapsed\"\r\n (linkCallbackEvent)=\"linkCallback($event)\"\r\n ></lib-menu-profile>\r\n</div>\r\n", styles: ["a{text-decoration:none}.no-click{pointer-events:none!important}.mobile-header{display:flex;justify-content:space-between;padding:23px 27px;background-color:#fcfcfc;border:1px solid var(--base-70)}.mobile.menu-container.collapsed{display:none!important}.mobile.menu-container:not(.collapsed){display:block!important;position:fixed;min-width:100vw;min-height:100dvh;z-index:1000}button:has(.mob-close-icon){margin-right:14px}.menu-container ::-webkit-scrollbar{width:5px}.menu-container ::-webkit-scrollbar-thumb{background:var(--base-95);background-clip:padding-box}.menu-container ::-webkit-scrollbar-track{background:var(--base-100)}.menu-product-name{white-space:nowrap;margin-left:12px;font-weight:600;color:var(--base-10)}.menu-container{max-height:100dvh;white-space:nowrap;height:100%;transition:width .2s ease;min-height:100dvh;overflow:auto;background:var(--base-100);border-right:2px solid var(--base-95)}.menu-container .menu-container-header{margin:24px 0;max-height:40px}.menu-container.collapsed .menu-container-header{margin:24px 0 32px!important}.menu-container .content:not(.collapsed){overflow-x:hidden;padding:0 12px}.menu-container .content:not(.collapsed) .menu-logo{margin-left:16px;max-width:100%}.menu-container .divider{width:100%}:host ::ng-deep .collapsed .profile-wrapper{margin:36px 0!important}:host ::ng-deep .mobile .profile-name{max-width:60vw}:host ::ng-deep .menu-item{display:flex;padding:16px!important;border-radius:4px!important}:host ::ng-deep .
|
|
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!important;margin:10px 0!important}::ng-deep .mat-mdc-menu-item .mat-icon{margin-right:5px!important}::ng-deep .collapsed .profile-wrapper{justify-content:center!important}\n"] }]
|
|
469
469
|
}], () => [{ type: i1.StrapiLinkService }, { type: i2.DOMService }, { type: MenuItemsService }], { username: [{
|
|
470
470
|
type: Input
|
|
471
471
|
}], menuSettings: [{
|
|
@@ -581,7 +581,7 @@ class MenuItemLinkComponent {
|
|
|
581
581
|
this.placeholderService.unregister(this.placeholderServiceId);
|
|
582
582
|
}
|
|
583
583
|
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", activeItem: "activeItem", showIcons: "showIcons", menuItem: "menuItem" }, decls: 5, vars: 17, consts: [["
|
|
584
|
+
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MenuItemLinkComponent, selectors: [["tld-menu-item-link"]], inputs: { direction: "direction", labelsVisible: "labelsVisible", isChild: "isChild", 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
585
|
i0.ɵɵelementStart(0, "a", 0);
|
|
586
586
|
i0.ɵɵpipe(1, "translate");
|
|
587
587
|
i0.ɵɵpipe(2, "translate");
|
|
@@ -590,21 +590,23 @@ class MenuItemLinkComponent {
|
|
|
590
590
|
i0.ɵɵelementEnd();
|
|
591
591
|
} if (rf & 2) {
|
|
592
592
|
i0.ɵɵclassProp("text-center", ctx.menuItemLayout === "column")("active-menu-item", ctx.menuItem === ctx.activeItem);
|
|
593
|
-
i0.ɵɵproperty("
|
|
593
|
+
i0.ɵɵproperty("matTooltip", !ctx.labelsVisible ? i0.ɵɵpipeBind1(1, 13, ctx.menuItem.title) : "")("fxLayout", ctx.menuItemLayout)("fxLayoutAlign", ctx.menuLayoutDirection)("libPlausibleEvent", ctx.menuItem.plausibleEvent)("href", i0.ɵɵpipeBind1(2, 15, ctx.href), i0.ɵɵsanitizeUrl)("ngClass.lt-md", "mobile");
|
|
594
594
|
i0.ɵɵattribute("target", ctx.menuItem.externalLink ? "_blank" : "_self");
|
|
595
595
|
i0.ɵɵadvance(3);
|
|
596
596
|
i0.ɵɵproperty("ngIf", ctx.showIcons && ctx.menuItem.icon);
|
|
597
597
|
i0.ɵɵadvance();
|
|
598
|
-
i0.ɵɵproperty("ngIf", ctx.labelsVisible);
|
|
598
|
+
i0.ɵɵproperty("ngIf", ctx.labelsVisible || ctx.isChild);
|
|
599
599
|
} }, dependencies: [i1$2.DefaultLayoutDirective, i1$2.DefaultLayoutAlignDirective, i2$2.DefaultClassDirective, i3.NgIf, i5.MatTooltip, i2.PlausibleEventDirective, MenuIconComponent, i8.TranslatePipe], styles: ["[_nghost-%COMP%]{width:100%}.mobile[_ngcontent-%COMP%] .menu-item-title[_ngcontent-%COMP%]{margin-left:5px}"] }); }
|
|
600
600
|
}
|
|
601
601
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuItemLinkComponent, [{
|
|
602
602
|
type: Component,
|
|
603
|
-
args: [{ selector: 'tld-menu-item-link', template: "<a
|
|
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 || isChild\" 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
604
|
}], () => [{ type: i1.StrapiLinkService }, { type: i1.StrapiVariablesService }], { direction: [{
|
|
605
605
|
type: Input
|
|
606
606
|
}], labelsVisible: [{
|
|
607
607
|
type: Input
|
|
608
|
+
}], isChild: [{
|
|
609
|
+
type: Input
|
|
608
610
|
}], activeItem: [{
|
|
609
611
|
type: Input
|
|
610
612
|
}], showIcons: [{
|
|
@@ -683,17 +685,18 @@ class MenuItemBtnComponent {
|
|
|
683
685
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MenuItemBtnComponent, { className: "MenuItemBtnComponent", filePath: "lib\\components\\menu-item-btn\\menu-item-btn.component.ts", lineNumber: 10 }); })();
|
|
684
686
|
|
|
685
687
|
const _c0$1 = a0 => ({ menuItem: a0 });
|
|
688
|
+
const _c1 = a0 => ({ menuItem: a0, isChild: true });
|
|
686
689
|
function MenuItemListComponent_Conditional_1_mat_icon_1_Template(rf, ctx) { if (rf & 1) {
|
|
687
|
-
i0.ɵɵelementStart(0, "mat-icon",
|
|
690
|
+
i0.ɵɵelementStart(0, "mat-icon", 13);
|
|
688
691
|
i0.ɵɵtext(1);
|
|
689
692
|
i0.ɵɵelementEnd();
|
|
690
693
|
} if (rf & 2) {
|
|
691
694
|
const ctx_r0 = i0.ɵɵnextContext(2);
|
|
692
695
|
i0.ɵɵadvance();
|
|
693
|
-
i0.ɵɵ
|
|
696
|
+
i0.ɵɵtextInterpolate1(" ", ctx_r0.menuItemGroup.titleIcon, " ");
|
|
694
697
|
} }
|
|
695
698
|
function MenuItemListComponent_Conditional_1_button_2_Template(rf, ctx) { if (rf & 1) {
|
|
696
|
-
i0.ɵɵelementStart(0, "button",
|
|
699
|
+
i0.ɵɵelementStart(0, "button", 14);
|
|
697
700
|
i0.ɵɵpipe(1, "translate");
|
|
698
701
|
i0.ɵɵelementStart(2, "mat-icon");
|
|
699
702
|
i0.ɵɵtext(3);
|
|
@@ -706,8 +709,8 @@ function MenuItemListComponent_Conditional_1_button_2_Template(rf, ctx) { if (rf
|
|
|
706
709
|
i0.ɵɵtextInterpolate(ctx_r0.menuItemGroup.titleNavigation.icon);
|
|
707
710
|
} }
|
|
708
711
|
function MenuItemListComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
709
|
-
i0.ɵɵelementStart(0, "div",
|
|
710
|
-
i0.ɵɵtemplate(1, MenuItemListComponent_Conditional_1_mat_icon_1_Template, 2, 1, "mat-icon",
|
|
712
|
+
i0.ɵɵelementStart(0, "div", 8);
|
|
713
|
+
i0.ɵɵtemplate(1, MenuItemListComponent_Conditional_1_mat_icon_1_Template, 2, 1, "mat-icon", 11)(2, MenuItemListComponent_Conditional_1_button_2_Template, 4, 5, "button", 12);
|
|
711
714
|
i0.ɵɵtext(3);
|
|
712
715
|
i0.ɵɵpipe(4, "translate");
|
|
713
716
|
i0.ɵɵelementEnd();
|
|
@@ -724,7 +727,7 @@ function MenuItemListComponent_Conditional_2_ng_container_0_Template(rf, ctx) {
|
|
|
724
727
|
i0.ɵɵelementContainer(0);
|
|
725
728
|
} }
|
|
726
729
|
function MenuItemListComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
|
|
727
|
-
i0.ɵɵtemplate(0, MenuItemListComponent_Conditional_2_ng_container_0_Template, 1, 0, "ng-container",
|
|
730
|
+
i0.ɵɵtemplate(0, MenuItemListComponent_Conditional_2_ng_container_0_Template, 1, 0, "ng-container", 15);
|
|
728
731
|
} if (rf & 2) {
|
|
729
732
|
i0.ɵɵnextContext();
|
|
730
733
|
const itemGroupButton_r2 = i0.ɵɵreference(12);
|
|
@@ -735,7 +738,7 @@ function MenuItemListComponent_ng_container_4_ng_container_1_Template(rf, ctx) {
|
|
|
735
738
|
} }
|
|
736
739
|
function MenuItemListComponent_ng_container_4_Template(rf, ctx) { if (rf & 1) {
|
|
737
740
|
i0.ɵɵelementContainerStart(0);
|
|
738
|
-
i0.ɵɵtemplate(1, MenuItemListComponent_ng_container_4_ng_container_1_Template, 1, 0, "ng-container",
|
|
741
|
+
i0.ɵɵtemplate(1, MenuItemListComponent_ng_container_4_ng_container_1_Template, 1, 0, "ng-container", 16);
|
|
739
742
|
i0.ɵɵelementContainerEnd();
|
|
740
743
|
} if (rf & 2) {
|
|
741
744
|
const menuItem_r3 = ctx.$implicit;
|
|
@@ -746,42 +749,43 @@ function MenuItemListComponent_ng_container_4_Template(rf, ctx) { if (rf & 1) {
|
|
|
746
749
|
i0.ɵɵadvance();
|
|
747
750
|
i0.ɵɵproperty("ngTemplateOutlet", !menuItem_r3.showChildren || !menuItem_r3.children || (menuItem_r3 == null ? null : menuItem_r3.children == null ? null : menuItem_r3.children.length) === 0 ? menuItem_r3.clickAction ? menuItemBtn_r6 : menuItemLink_r5 : itemWithChildren_r4)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c0$1, menuItem_r3));
|
|
748
751
|
} }
|
|
749
|
-
function
|
|
752
|
+
function MenuItemListComponent_ng_template_5_ng_container_3_Template(rf, ctx) { if (rf & 1) {
|
|
750
753
|
i0.ɵɵelementContainerStart(0);
|
|
751
|
-
i0.ɵɵelement(1, "tld-menu-icon",
|
|
754
|
+
i0.ɵɵelement(1, "tld-menu-icon", 21);
|
|
752
755
|
i0.ɵɵelementContainerEnd();
|
|
753
756
|
} if (rf & 2) {
|
|
754
757
|
const menuItem_r8 = i0.ɵɵnextContext().menuItem;
|
|
755
758
|
i0.ɵɵadvance();
|
|
756
759
|
i0.ɵɵproperty("menuItem", menuItem_r8);
|
|
757
760
|
} }
|
|
758
|
-
function
|
|
759
|
-
i0.ɵɵelementStart(0, "span",
|
|
761
|
+
function MenuItemListComponent_ng_template_5_ng_container_4_ng_container_5_span_1_Template(rf, ctx) { if (rf & 1) {
|
|
762
|
+
i0.ɵɵelementStart(0, "span", 25);
|
|
760
763
|
i0.ɵɵtext(1, " keyboard_arrow_down ");
|
|
761
764
|
i0.ɵɵelementEnd();
|
|
762
765
|
} }
|
|
763
|
-
function
|
|
764
|
-
i0.ɵɵelementStart(0, "span",
|
|
766
|
+
function MenuItemListComponent_ng_template_5_ng_container_4_ng_container_5_ng_template_2_Template(rf, ctx) { if (rf & 1) {
|
|
767
|
+
i0.ɵɵelementStart(0, "span", 25);
|
|
765
768
|
i0.ɵɵtext(1, " keyboard_arrow_up ");
|
|
766
769
|
i0.ɵɵelementEnd();
|
|
767
770
|
} }
|
|
768
|
-
function
|
|
771
|
+
function MenuItemListComponent_ng_template_5_ng_container_4_ng_container_5_Template(rf, ctx) { if (rf & 1) {
|
|
769
772
|
i0.ɵɵelementContainerStart(0);
|
|
770
|
-
i0.ɵɵtemplate(1,
|
|
773
|
+
i0.ɵɵtemplate(1, MenuItemListComponent_ng_template_5_ng_container_4_ng_container_5_span_1_Template, 2, 0, "span", 24)(2, MenuItemListComponent_ng_template_5_ng_container_4_ng_container_5_ng_template_2_Template, 2, 0, "ng-template", null, 6, i0.ɵɵtemplateRefExtractor);
|
|
771
774
|
i0.ɵɵelementContainerEnd();
|
|
772
775
|
} if (rf & 2) {
|
|
773
776
|
const iconDown_r9 = i0.ɵɵreference(3);
|
|
774
|
-
|
|
777
|
+
i0.ɵɵnextContext(2);
|
|
778
|
+
const state_r10 = i0.ɵɵreference(1);
|
|
775
779
|
i0.ɵɵadvance();
|
|
776
|
-
i0.ɵɵproperty("ngIf",
|
|
780
|
+
i0.ɵɵproperty("ngIf", state_r10.menuOpen)("ngIfElse", iconDown_r9);
|
|
777
781
|
} }
|
|
778
|
-
function
|
|
782
|
+
function MenuItemListComponent_ng_template_5_ng_container_4_Template(rf, ctx) { if (rf & 1) {
|
|
779
783
|
i0.ɵɵelementContainerStart(0);
|
|
780
|
-
i0.ɵɵelementStart(1, "span",
|
|
784
|
+
i0.ɵɵelementStart(1, "span", 22)(2, "span", 23);
|
|
781
785
|
i0.ɵɵtext(3);
|
|
782
786
|
i0.ɵɵpipe(4, "translate");
|
|
783
787
|
i0.ɵɵelementEnd()();
|
|
784
|
-
i0.ɵɵtemplate(5,
|
|
788
|
+
i0.ɵɵtemplate(5, MenuItemListComponent_ng_template_5_ng_container_4_ng_container_5_Template, 4, 2, "ng-container", 18);
|
|
785
789
|
i0.ɵɵelementContainerEnd();
|
|
786
790
|
} if (rf & 2) {
|
|
787
791
|
const menuItem_r8 = i0.ɵɵnextContext().menuItem;
|
|
@@ -790,65 +794,70 @@ function MenuItemListComponent_ng_template_5_ng_container_3_Template(rf, ctx) {
|
|
|
790
794
|
i0.ɵɵadvance(2);
|
|
791
795
|
i0.ɵɵproperty("ngIf", menuItem_r8.showChildren && menuItem_r8.children);
|
|
792
796
|
} }
|
|
793
|
-
function
|
|
794
|
-
i0.ɵɵ
|
|
795
|
-
} if (rf & 2) {
|
|
796
|
-
const menuItem_r8 = i0.ɵɵnextContext(2).menuItem;
|
|
797
|
-
const ctx_r0 = i0.ɵɵnextContext();
|
|
798
|
-
i0.ɵɵproperty("items", menuItem_r8.children)("direction", ctx_r0.direction)("labelsVisible", ctx_r0.labelsVisible)("activeItem", ctx_r0.activeItem);
|
|
797
|
+
function MenuItemListComponent_ng_template_5_For_8_ng_container_1_Template(rf, ctx) { if (rf & 1) {
|
|
798
|
+
i0.ɵɵelementContainer(0);
|
|
799
799
|
} }
|
|
800
|
-
function
|
|
801
|
-
i0.ɵɵ
|
|
802
|
-
i0.ɵɵtemplate(1,
|
|
803
|
-
i0.ɵɵ
|
|
800
|
+
function MenuItemListComponent_ng_template_5_For_8_Template(rf, ctx) { if (rf & 1) {
|
|
801
|
+
i0.ɵɵelementStart(0, "div", 20);
|
|
802
|
+
i0.ɵɵtemplate(1, MenuItemListComponent_ng_template_5_For_8_ng_container_1_Template, 1, 0, "ng-container", 16);
|
|
803
|
+
i0.ɵɵelementEnd();
|
|
804
804
|
} if (rf & 2) {
|
|
805
|
+
const child_r11 = ctx.$implicit;
|
|
805
806
|
const menuItem_r8 = i0.ɵɵnextContext().menuItem;
|
|
807
|
+
i0.ɵɵnextContext();
|
|
808
|
+
const menuItemLink_r5 = i0.ɵɵreference(8);
|
|
809
|
+
const menuItemBtn_r6 = i0.ɵɵreference(10);
|
|
806
810
|
i0.ɵɵadvance();
|
|
807
|
-
i0.ɵɵproperty("
|
|
811
|
+
i0.ɵɵproperty("ngTemplateOutlet", menuItem_r8.clickAction ? menuItemBtn_r6 : menuItemLink_r5)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c1, child_r11));
|
|
808
812
|
} }
|
|
809
813
|
function MenuItemListComponent_ng_template_5_Template(rf, ctx) { if (rf & 1) {
|
|
810
814
|
const _r7 = i0.ɵɵgetCurrentView();
|
|
811
|
-
i0.ɵɵelementStart(0, "button",
|
|
812
|
-
i0.ɵɵpipe(
|
|
815
|
+
i0.ɵɵelementStart(0, "button", 17, 4);
|
|
816
|
+
i0.ɵɵpipe(2, "translate");
|
|
813
817
|
i0.ɵɵlistener("click", function MenuItemListComponent_ng_template_5_Template_button_click_0_listener($event) { const menuItem_r8 = i0.ɵɵrestoreView(_r7).menuItem; const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.toggleItemExpand($event, menuItem_r8)); });
|
|
814
|
-
i0.ɵɵtemplate(
|
|
818
|
+
i0.ɵɵtemplate(3, MenuItemListComponent_ng_template_5_ng_container_3_Template, 2, 1, "ng-container", 18)(4, MenuItemListComponent_ng_template_5_ng_container_4_Template, 6, 4, "ng-container", 18);
|
|
819
|
+
i0.ɵɵelementEnd();
|
|
820
|
+
i0.ɵɵelementStart(5, "mat-menu", 19, 5);
|
|
821
|
+
i0.ɵɵrepeaterCreate(7, MenuItemListComponent_ng_template_5_For_8_Template, 2, 4, "div", 20, i0.ɵɵrepeaterTrackByIndex);
|
|
815
822
|
i0.ɵɵelementEnd();
|
|
816
|
-
i0.ɵɵtemplate(4, MenuItemListComponent_ng_template_5_ng_container_4_Template, 2, 1, "ng-container", 16);
|
|
817
823
|
} if (rf & 2) {
|
|
818
824
|
const menuItem_r8 = ctx.menuItem;
|
|
825
|
+
const state_r10 = i0.ɵɵreference(1);
|
|
826
|
+
const menu_r12 = i0.ɵɵreference(6);
|
|
819
827
|
const ctx_r0 = i0.ɵɵnextContext();
|
|
820
|
-
i0.ɵɵclassProp("menu-labels-visible", ctx_r0.labelsVisible)("active-menu-item", (ctx_r0.activeItem == null ? null : ctx_r0.activeItem.link) && menuItem_r8 === ctx_r0.activeItem);
|
|
821
|
-
i0.ɵɵproperty("
|
|
828
|
+
i0.ɵɵclassProp("menu-labels-visible", ctx_r0.labelsVisible)("active-menu-item", (ctx_r0.activeItem == null ? null : ctx_r0.activeItem.link) && menuItem_r8 === ctx_r0.activeItem || state_r10.menuOpen);
|
|
829
|
+
i0.ɵɵproperty("matTooltip", !ctx_r0.labelsVisible ? i0.ɵɵpipeBind1(2, 12, menuItem_r8.title) : "")("fxLayout", ctx_r0.menuItemLayout)("fxLayoutAlign", ctx_r0.menuLayoutDirection)("matMenuTriggerFor", menu_r12)("ngClass.lt-md", "mob-menu-item");
|
|
822
830
|
i0.ɵɵattribute("id", menuItem_r8.customId);
|
|
823
|
-
i0.ɵɵadvance(
|
|
831
|
+
i0.ɵɵadvance(3);
|
|
824
832
|
i0.ɵɵproperty("ngIf", ctx_r0.showIcons && menuItem_r8.icon);
|
|
825
833
|
i0.ɵɵadvance();
|
|
826
834
|
i0.ɵɵproperty("ngIf", ctx_r0.labelsVisible);
|
|
827
|
-
i0.ɵɵadvance();
|
|
828
|
-
i0.ɵɵ
|
|
835
|
+
i0.ɵɵadvance(3);
|
|
836
|
+
i0.ɵɵrepeater(menuItem_r8.children);
|
|
829
837
|
} }
|
|
830
838
|
function MenuItemListComponent_ng_template_7_Template(rf, ctx) { if (rf & 1) {
|
|
831
|
-
i0.ɵɵelement(0, "tld-menu-item-link",
|
|
839
|
+
i0.ɵɵelement(0, "tld-menu-item-link", 26);
|
|
832
840
|
} if (rf & 2) {
|
|
833
|
-
const
|
|
841
|
+
const menuItem_r13 = ctx.menuItem;
|
|
842
|
+
const isChild_r14 = ctx.isChild;
|
|
834
843
|
const ctx_r0 = i0.ɵɵnextContext();
|
|
835
|
-
i0.ɵɵproperty("ngClass.lt-md", "mob-menu-item")("menuItem",
|
|
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)("isChild", isChild_r14);
|
|
836
845
|
} }
|
|
837
846
|
function MenuItemListComponent_ng_template_9_lib_menu_item_btn_0_Template(rf, ctx) { if (rf & 1) {
|
|
838
|
-
i0.ɵɵelement(0, "lib-menu-item-btn",
|
|
847
|
+
i0.ɵɵelement(0, "lib-menu-item-btn", 28);
|
|
839
848
|
} if (rf & 2) {
|
|
840
|
-
const
|
|
849
|
+
const menuItem_r15 = i0.ɵɵnextContext().menuItem;
|
|
841
850
|
const ctx_r0 = i0.ɵɵnextContext();
|
|
842
|
-
i0.ɵɵproperty("ngClass.lt-md", "mob-menu-item")("menuItem",
|
|
851
|
+
i0.ɵɵproperty("ngClass.lt-md", "mob-menu-item")("menuItem", menuItem_r15)("direction", ctx_r0.direction)("activeItem", ctx_r0.activeItem);
|
|
843
852
|
} }
|
|
844
853
|
function MenuItemListComponent_ng_template_9_Template(rf, ctx) { if (rf & 1) {
|
|
845
|
-
i0.ɵɵtemplate(0, MenuItemListComponent_ng_template_9_lib_menu_item_btn_0_Template, 1, 4, "lib-menu-item-btn",
|
|
854
|
+
i0.ɵɵtemplate(0, MenuItemListComponent_ng_template_9_lib_menu_item_btn_0_Template, 1, 4, "lib-menu-item-btn", 27);
|
|
846
855
|
} if (rf & 2) {
|
|
847
856
|
const ctx_r0 = i0.ɵɵnextContext();
|
|
848
857
|
i0.ɵɵproperty("ngIf", ctx_r0.labelsVisible);
|
|
849
858
|
} }
|
|
850
859
|
function MenuItemListComponent_ng_template_11_button_0_span_3_Template(rf, ctx) { if (rf & 1) {
|
|
851
|
-
i0.ɵɵelementStart(0, "span",
|
|
860
|
+
i0.ɵɵelementStart(0, "span", 33);
|
|
852
861
|
i0.ɵɵtext(1);
|
|
853
862
|
i0.ɵɵpipe(2, "translate");
|
|
854
863
|
i0.ɵɵelementEnd();
|
|
@@ -858,13 +867,13 @@ function MenuItemListComponent_ng_template_11_button_0_span_3_Template(rf, ctx)
|
|
|
858
867
|
i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(2, 1, ctx_r0.titleKey), " ");
|
|
859
868
|
} }
|
|
860
869
|
function MenuItemListComponent_ng_template_11_button_0_Template(rf, ctx) { if (rf & 1) {
|
|
861
|
-
const
|
|
862
|
-
i0.ɵɵelementStart(0, "button",
|
|
863
|
-
i0.ɵɵlistener("click", function MenuItemListComponent_ng_template_11_button_0_Template_button_click_0_listener() { i0.ɵɵrestoreView(
|
|
870
|
+
const _r16 = i0.ɵɵgetCurrentView();
|
|
871
|
+
i0.ɵɵelementStart(0, "button", 31);
|
|
872
|
+
i0.ɵɵlistener("click", function MenuItemListComponent_ng_template_11_button_0_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r16); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.menuItemGroup == null ? null : ctx_r0.menuItemGroup.itemGroupClick()); });
|
|
864
873
|
i0.ɵɵelementStart(1, "mat-icon");
|
|
865
874
|
i0.ɵɵtext(2);
|
|
866
875
|
i0.ɵɵelementEnd();
|
|
867
|
-
i0.ɵɵtemplate(3, MenuItemListComponent_ng_template_11_button_0_span_3_Template, 3, 3, "span",
|
|
876
|
+
i0.ɵɵtemplate(3, MenuItemListComponent_ng_template_11_button_0_span_3_Template, 3, 3, "span", 32);
|
|
868
877
|
i0.ɵɵelementEnd();
|
|
869
878
|
} if (rf & 2) {
|
|
870
879
|
const ctx_r0 = i0.ɵɵnextContext(2);
|
|
@@ -874,10 +883,10 @@ function MenuItemListComponent_ng_template_11_button_0_Template(rf, ctx) { if (r
|
|
|
874
883
|
i0.ɵɵproperty("ngIf", ctx_r0.titleKey);
|
|
875
884
|
} }
|
|
876
885
|
function MenuItemListComponent_ng_template_11_button_1_Template(rf, ctx) { if (rf & 1) {
|
|
877
|
-
const
|
|
878
|
-
i0.ɵɵelementStart(0, "button",
|
|
886
|
+
const _r17 = i0.ɵɵgetCurrentView();
|
|
887
|
+
i0.ɵɵelementStart(0, "button", 34);
|
|
879
888
|
i0.ɵɵpipe(1, "translate");
|
|
880
|
-
i0.ɵɵlistener("click", function MenuItemListComponent_ng_template_11_button_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(
|
|
889
|
+
i0.ɵɵlistener("click", function MenuItemListComponent_ng_template_11_button_1_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()); });
|
|
881
890
|
i0.ɵɵelementStart(2, "mat-icon");
|
|
882
891
|
i0.ɵɵtext(3);
|
|
883
892
|
i0.ɵɵelementEnd()();
|
|
@@ -888,7 +897,7 @@ function MenuItemListComponent_ng_template_11_button_1_Template(rf, ctx) { if (r
|
|
|
888
897
|
i0.ɵɵtextInterpolate(ctx_r0.menuItemGroup.itemGroupIcon);
|
|
889
898
|
} }
|
|
890
899
|
function MenuItemListComponent_ng_template_11_Template(rf, ctx) { if (rf & 1) {
|
|
891
|
-
i0.ɵɵtemplate(0, MenuItemListComponent_ng_template_11_button_0_Template, 4, 2, "button",
|
|
900
|
+
i0.ɵɵtemplate(0, MenuItemListComponent_ng_template_11_button_0_Template, 4, 2, "button", 29)(1, MenuItemListComponent_ng_template_11_button_1_Template, 4, 4, "button", 30);
|
|
892
901
|
} if (rf & 2) {
|
|
893
902
|
const ctx_r0 = i0.ɵɵnextContext();
|
|
894
903
|
i0.ɵɵproperty("ngIf", ctx_r0.menuItemGroup && ctx_r0.labelsVisible);
|
|
@@ -925,13 +934,13 @@ class MenuItemListComponent {
|
|
|
925
934
|
this.toggleExpand.next(menuItem);
|
|
926
935
|
}
|
|
927
936
|
static { this.ɵfac = function MenuItemListComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MenuItemListComponent)(); }; }
|
|
928
|
-
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MenuItemListComponent, selectors: [["menu-item-list"]], inputs: { direction: "direction", labelsVisible: "labelsVisible", activeItem: "activeItem", showIcons: "showIcons", items: "items", menuItemGroup: "menuItemGroup" }, outputs: { toggleExpand: "toggleExpand" }, decls: 13, vars: 3, consts: [["itemWithChildren", ""], ["menuItemLink", ""], ["menuItemBtn", ""], ["itemGroupButton", ""], ["iconDown", ""], [1, "menu-list-wrapper"], ["fxLayoutAlign", "start center", 1, "menu-item-list-title"], ["fxLayout", "column", 1, "menu-item-list", 3, "fxLayoutAlign"], [4, "ngFor", "ngForOf"], ["class", "menu-title-btn", 4, "ngIf"], ["
|
|
929
|
-
i0.ɵɵelementStart(0, "div",
|
|
930
|
-
i0.ɵɵtemplate(1, MenuItemListComponent_Conditional_1_Template, 5, 5, "div",
|
|
931
|
-
i0.ɵɵelementStart(3, "div",
|
|
932
|
-
i0.ɵɵtemplate(4, MenuItemListComponent_ng_container_4_Template, 2, 4, "ng-container",
|
|
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", "isChild"], [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
|
+
i0.ɵɵelementStart(0, "div", 7);
|
|
939
|
+
i0.ɵɵtemplate(1, MenuItemListComponent_Conditional_1_Template, 5, 5, "div", 8)(2, MenuItemListComponent_Conditional_2_Template, 1, 1, "ng-container");
|
|
940
|
+
i0.ɵɵelementStart(3, "div", 9);
|
|
941
|
+
i0.ɵɵtemplate(4, MenuItemListComponent_ng_container_4_Template, 2, 4, "ng-container", 10);
|
|
933
942
|
i0.ɵɵelementEnd()();
|
|
934
|
-
i0.ɵɵtemplate(5, MenuItemListComponent_ng_template_5_Template,
|
|
943
|
+
i0.ɵɵtemplate(5, MenuItemListComponent_ng_template_5_Template, 9, 14, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor)(7, MenuItemListComponent_ng_template_7_Template, 1, 7, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor)(9, MenuItemListComponent_ng_template_9_Template, 1, 1, "ng-template", null, 2, i0.ɵɵtemplateRefExtractor)(11, MenuItemListComponent_ng_template_11_Template, 2, 2, "ng-template", null, 3, i0.ɵɵtemplateRefExtractor);
|
|
935
944
|
} if (rf & 2) {
|
|
936
945
|
i0.ɵɵadvance();
|
|
937
946
|
i0.ɵɵconditional(ctx.titleKey && ctx.showTitle && ctx.labelsVisible && !ctx.menuItemGroup.itemGroupClick ? 1 : (ctx.menuItemGroup == null ? null : ctx.menuItemGroup.itemGroupClick) ? 2 : -1);
|
|
@@ -939,11 +948,11 @@ class MenuItemListComponent {
|
|
|
939
948
|
i0.ɵɵproperty("fxLayoutAlign", ctx.menuLayoutDirection);
|
|
940
949
|
i0.ɵɵadvance();
|
|
941
950
|
i0.ɵɵproperty("ngForOf", ctx.items);
|
|
942
|
-
} }, dependencies: [i1$2.DefaultLayoutDirective, i1$2.DefaultLayoutAlignDirective, i2$2.DefaultClassDirective, i1$1.RouterLink, i3.NgForOf, i3.NgIf, i3.NgTemplateOutlet, i5.MatTooltip, i2$1.MatIcon, i7.MatButton, i7.MatIconButton,
|
|
951
|
+
} }, 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}[_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}}"] }); }
|
|
943
952
|
}
|
|
944
953
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuItemListComponent, [{
|
|
945
954
|
type: Component,
|
|
946
|
-
args: [{ selector: 'menu-item-list', template: "<div class=\"menu-list-wrapper\">\r\n @if (titleKey && showTitle && labelsVisible && !menuItemGroup.itemGroupClick) {\r\n
|
|
955
|
+
args: [{ selector: 'menu-item-list', template: "<div class=\"menu-list-wrapper\">\r\n @if (titleKey && showTitle && labelsVisible && !menuItemGroup.itemGroupClick) {\r\n <div fxLayoutAlign=\"start center\" class=\"menu-item-list-title\">\r\n <mat-icon *ngIf=\"menuItemGroup.titleIcon\" class=\"menu-title-btn\">\r\n {{ menuItemGroup.titleIcon }}\r\n </mat-icon>\r\n\r\n <button\r\n *ngIf=\"menuItemGroup.titleNavigation\"\r\n mat-icon-button\r\n class=\"menu-title-btn\"\r\n [routerLink]=\"menuItemGroup.titleNavigation.path\"\r\n [matTooltip]=\"menuItemGroup.titleNavigation?.tooltip ?? '' | translate\"\r\n >\r\n <mat-icon>{{ menuItemGroup.titleNavigation.icon }}</mat-icon>\r\n </button>\r\n\r\n {{ titleKey | translate }}\r\n </div>\r\n } @else if (menuItemGroup?.itemGroupClick) {\r\n <ng-container *ngTemplateOutlet=\"itemGroupButton\"> </ng-container>\r\n }\r\n <div\r\n class=\"menu-item-list\"\r\n fxLayout=\"column\"\r\n [fxLayoutAlign]=\"menuLayoutDirection\"\r\n >\r\n <ng-container *ngFor=\"let menuItem of items\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n !menuItem.showChildren ||\r\n !menuItem.children ||\r\n menuItem?.children?.length === 0\r\n ? menuItem.clickAction\r\n ? menuItemBtn\r\n : menuItemLink\r\n : itemWithChildren;\r\n context: { menuItem: menuItem }\r\n \"\r\n >\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n</div>\r\n\r\n<ng-template #itemWithChildren let-menuItem=\"menuItem\">\r\n <button\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 #state=\"matMenuTrigger\"\r\n [matMenuTriggerFor]=\"menu\"\r\n [attr.id]=\"menuItem.customId\"\r\n class=\"text-m menu-item menu-parent-item\"\r\n [class.menu-labels-visible]=\"labelsVisible\"\r\n [class.active-menu-item]=\"(activeItem?.link && menuItem === activeItem) || state.menuOpen\"\r\n [ngClass.lt-md]=\"'mob-menu-item'\"\r\n (click)=\"toggleItemExpand($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 <ng-container *ngIf=\"labelsVisible\">\r\n <span class=\"menu-item-title\">\r\n <span class=\"title-content\">{{\r\n menuItem.title | translate\r\n }}</span></span\r\n >\r\n <ng-container *ngIf=\"menuItem.showChildren && menuItem.children\">\r\n <span\r\n *ngIf=\"state.menuOpen; else iconDown\"\r\n class=\"material-icons spin arrow-icon\"\r\n >\r\n keyboard_arrow_down\r\n </span>\r\n\r\n <ng-template #iconDown>\r\n <span class=\"material-icons spin arrow-icon\">\r\n keyboard_arrow_up\r\n </span>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n </button>\r\n <mat-menu #menu=\"matMenu\" class=\"child-menu\">\r\n @for (child of menuItem.children; track $index) {\r\n <div mat-menu-item>\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n menuItem.clickAction ? menuItemBtn : menuItemLink;\r\n context: { menuItem: child, isChild: true }\r\n \"\r\n >\r\n </ng-container>\r\n </div>\r\n }\r\n </mat-menu>\r\n</ng-template>\r\n\r\n<ng-template #menuItemLink let-menuItem=\"menuItem\" let-isChild=\"isChild\">\r\n <tld-menu-item-link\r\n [ngClass.lt-md]=\"'mob-menu-item'\"\r\n [menuItem]=\"menuItem\"\r\n [direction]=\"direction\"\r\n [labelsVisible]=\"labelsVisible\"\r\n [activeItem]=\"activeItem\"\r\n [showIcons]=\"showIcons\"\r\n [isChild]=\"isChild\"\r\n ></tld-menu-item-link>\r\n</ng-template>\r\n\r\n<ng-template #menuItemBtn let-menuItem=\"menuItem\">\r\n <lib-menu-item-btn\r\n *ngIf=\"labelsVisible\"\r\n [ngClass.lt-md]=\"'mob-menu-item'\"\r\n [menuItem]=\"menuItem\"\r\n [direction]=\"direction\"\r\n [activeItem]=\"activeItem\"\r\n ></lib-menu-item-btn>\r\n</ng-template>\r\n\r\n<ng-template #itemGroupButton>\r\n <button\r\n *ngIf=\"menuItemGroup && labelsVisible\"\r\n mat-button\r\n class=\"menu-title-btn menu-action-button\"\r\n (click)=\"menuItemGroup?.itemGroupClick()\"\r\n >\r\n <mat-icon>{{ menuItemGroup.itemGroupIcon }}</mat-icon>\r\n <span class=\"btn-label\" *ngIf=\"titleKey\">\r\n {{ titleKey | translate }}\r\n </span>\r\n </button>\r\n\r\n <button\r\n *ngIf=\"menuItemGroup && !labelsVisible && titleKey && menuItemGroup.itemGroupIcon\"\r\n mat-icon-button\r\n matTooltipPosition=\"after\"\r\n [matTooltip]=\"titleKey | translate\"\r\n (click)=\"menuItemGroup?.itemGroupClick()\"\r\n >\r\n <mat-icon>{{ menuItemGroup.itemGroupIcon }}</mat-icon>\r\n </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"] }]
|
|
947
956
|
}], null, { direction: [{
|
|
948
957
|
type: Input
|
|
949
958
|
}], labelsVisible: [{
|
|
@@ -1017,16 +1026,7 @@ class MenuColumnsComponent {
|
|
|
1017
1026
|
this.activeItem = undefined;
|
|
1018
1027
|
return;
|
|
1019
1028
|
}
|
|
1020
|
-
|
|
1021
|
-
if (element.showChildren && !this.isOpen) {
|
|
1022
|
-
this.toggleCollapseEvent.emit();
|
|
1023
|
-
}
|
|
1024
|
-
if (element.showChildren && element.expanded && element === this.active.root) {
|
|
1025
|
-
this.activeItem = this.active.child;
|
|
1026
|
-
}
|
|
1027
|
-
else {
|
|
1028
|
-
this.activeItem = this.active.root;
|
|
1029
|
-
}
|
|
1029
|
+
this.activeItem = this.active.root;
|
|
1030
1030
|
}
|
|
1031
1031
|
toggleOnMobileSelect() {
|
|
1032
1032
|
return this.isOpen && ResolutionHelper.isMobileRes() && (this.active && Object.values(this.active)?.length > 0);
|
|
@@ -1238,11 +1238,11 @@ class MenuProfileComponent {
|
|
|
1238
1238
|
i0.ɵɵproperty("ngIf", !ctx.collapsed);
|
|
1239
1239
|
i0.ɵɵadvance(3);
|
|
1240
1240
|
i0.ɵɵrepeater(ctx.userOptions);
|
|
1241
|
-
} }, dependencies: [i1$1.RouterLink, i3.NgIf, i3.NgTemplateOutlet, i2$1.MatIcon, i6.MatMenu, i6.MatMenuItem, i6.MatMenuTrigger, i8.TranslatePipe], styles: ["a[_ngcontent-%COMP%]{text-decoration:none}.profile[_ngcontent-%COMP%]{position:relative;margin-top:100px}.profile-wrapper[_ngcontent-%COMP%]{background:none;color:var(--base-30);display:flex;align-items:center;justify-content:start;width:100%;position:absolute;bottom:0;margin:32px 0}.profile-icon[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:center;min-width:40px;height:40px;border-radius:100%;color:var(--base-0);background-color:var(--base-70);font-size:16px;font-weight:600}.profile-name[_ngcontent-%COMP%]{max-width:145px;overflow:hidden;margin-left:12px;text-overflow:ellipsis}.profile-option-icon[_ngcontent-%COMP%]{vertical-align:middle;margin:0 5px 5px 0}.profile-arrow[_ngcontent-%COMP%]{position:absolute;right:0;margin-right:8px}.mobile[_ngcontent-%COMP%] .profile-arrow[_ngcontent-%COMP%]{margin-right:20px}
|
|
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:8px}.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
1242
|
}
|
|
1243
1243
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuProfileComponent, [{
|
|
1244
1244
|
type: Component,
|
|
1245
|
-
args: [{ selector: 'lib-menu-profile', template: "<div class=\"profile\">\r\n <button #state=\"matMenuTrigger\" [matMenuTriggerFor]=\"menu\" class=\"profile-wrapper\">\r\n <div class=\"profile-icon\">\r\n @if (userInitials) {\r\n {{userInitials}}\r\n } @else {\r\n <mat-icon>person</mat-icon>\r\n }\r\n </div>\r\n\r\n <ng-container *ngIf=\"!collapsed\">\r\n <span class=\"profile-name\">\r\n {{ username ?? 'MENU.ANONYMOUS' | translate }}\r\n </span>\r\n\r\n <mat-icon *ngIf=\"state.menuOpen; else iconDown\" class=\"profile-arrow spin\">keyboard_arrow_down</mat-icon>\r\n\r\n <ng-template #iconDown>\r\n <mat-icon class=\"profile-arrow spin\">keyboard_arrow_up</mat-icon>\r\n </ng-template>\r\n </ng-container>\r\n </button>\r\n\r\n <mat-menu #menu=\"matMenu\" class=\"profile-menu\">\r\n @for (item of userOptions; track item.label) {\r\n @if (item.link) {\r\n @if (item.link.isExternal) {\r\n <a class=\"mat-mdc-menu-item\" [href]=\"item.link.href\" target=\"_blank\" (click)=\"linkCallback(item.link)\">\r\n <ng-container\r\n *ngTemplateOutlet=\"profileMenuItem; context: { icon: item.icon, label: item.label }\">\r\n </ng-container>\r\n </a>\r\n } @else {\r\n <a class=\"mat-mdc-menu-item\" [routerLink]=\"item.link.href\" (click)=\"linkCallback(item.link)\">\r\n <ng-container\r\n *ngTemplateOutlet=\"profileMenuItem; context: { icon: item.icon, label: item.label }\">\r\n </ng-container>\r\n </a>\r\n }\r\n } @else {\r\n <button\r\n mat-menu-item\r\n class=\"profile-option\"\r\n (click)=\"item.button?.callback()\"\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"profileMenuItem; context: { icon: item.icon, label: item.label }\">\r\n </ng-container>\r\n </button>\r\n }\r\n }\r\n </mat-menu>\r\n</div>\r\n\r\n<ng-template #profileMenuItem let-icon=\"icon\" let-label=\"label\">\r\n @if (icon) {\r\n @if (!icon?.isCustom) {\r\n <span class=\"material-icons profile-option-icon\" [class.material-icons-outlined]=\"icon?.isOutlined\">\r\n {{icon?.name}}\r\n </span>\r\n } @else {\r\n <mat-icon class=\"profile-option-icon\" [svgIcon]=\"icon?.name\"></mat-icon>\r\n }\r\n }\r\n {{ label | translate }}\r\n</ng-template>", styles: ["a{text-decoration:none}.profile{position:relative;margin-top:100px}.profile-wrapper{background:none;color:var(--base-30);display:flex;align-items:center;justify-content:start;width:100%;position:absolute;bottom:0;margin:32px 0}.profile-icon{display:flex;justify-content:center;align-items:center;min-width:40px;height:40px;border-radius:100%;color:var(--base-0);background-color:var(--base-70);font-size:16px;font-weight:600}.profile-name{max-width:145px;overflow:hidden;margin-left:12px;text-overflow:ellipsis}.profile-option-icon{vertical-align:middle;margin:0 5px 5px 0}.profile-arrow{position:absolute;right:0;margin-right:8px}.mobile .profile-arrow{margin-right:20px}
|
|
1245
|
+
args: [{ selector: 'lib-menu-profile', template: "<div class=\"profile\">\r\n <button #state=\"matMenuTrigger\" [matMenuTriggerFor]=\"menu\" class=\"profile-wrapper\">\r\n <div class=\"profile-icon\">\r\n @if (userInitials) {\r\n {{userInitials}}\r\n } @else {\r\n <mat-icon>person</mat-icon>\r\n }\r\n </div>\r\n\r\n <ng-container *ngIf=\"!collapsed\">\r\n <span class=\"profile-name\">\r\n {{ username ?? 'MENU.ANONYMOUS' | translate }}\r\n </span>\r\n\r\n <mat-icon *ngIf=\"state.menuOpen; else iconDown\" class=\"profile-arrow spin\">keyboard_arrow_down</mat-icon>\r\n\r\n <ng-template #iconDown>\r\n <mat-icon class=\"profile-arrow spin\">keyboard_arrow_up</mat-icon>\r\n </ng-template>\r\n </ng-container>\r\n </button>\r\n\r\n <mat-menu #menu=\"matMenu\" class=\"profile-menu\">\r\n @for (item of userOptions; track item.label) {\r\n @if (item.link) {\r\n @if (item.link.isExternal) {\r\n <a class=\"mat-mdc-menu-item\" [href]=\"item.link.href\" target=\"_blank\" (click)=\"linkCallback(item.link)\">\r\n <ng-container\r\n *ngTemplateOutlet=\"profileMenuItem; context: { icon: item.icon, label: item.label }\">\r\n </ng-container>\r\n </a>\r\n } @else {\r\n <a class=\"mat-mdc-menu-item\" [routerLink]=\"item.link.href\" (click)=\"linkCallback(item.link)\">\r\n <ng-container\r\n *ngTemplateOutlet=\"profileMenuItem; context: { icon: item.icon, label: item.label }\">\r\n </ng-container>\r\n </a>\r\n }\r\n } @else {\r\n <button\r\n mat-menu-item\r\n class=\"profile-option\"\r\n (click)=\"item.button?.callback()\"\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"profileMenuItem; context: { icon: item.icon, label: item.label }\">\r\n </ng-container>\r\n </button>\r\n }\r\n }\r\n </mat-menu>\r\n</div>\r\n\r\n<ng-template #profileMenuItem let-icon=\"icon\" let-label=\"label\">\r\n @if (icon) {\r\n @if (!icon?.isCustom) {\r\n <span class=\"material-icons profile-option-icon\" [class.material-icons-outlined]=\"icon?.isOutlined\">\r\n {{icon?.name}}\r\n </span>\r\n } @else {\r\n <mat-icon class=\"profile-option-icon\" [svgIcon]=\"icon?.name\"></mat-icon>\r\n }\r\n }\r\n {{ label | translate }}\r\n</ng-template>", styles: [".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:32px 0}.profile-icon{display:flex;justify-content:center;align-items:center;min-width:40px;height:40px;border-radius:100%;color:var(--base-0);background-color:var(--base-70);font-size:16px;font-weight:600}.profile-name{max-width:145px;overflow:hidden;margin-left:12px;text-overflow:ellipsis}.profile-option-icon{vertical-align:middle;margin:0 5px 5px 0}.profile-arrow{position:absolute;right:0;margin-right:8px}.mobile .profile-arrow{margin-right:20px}::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"] }]
|
|
1246
1246
|
}], null, { collapsed: [{
|
|
1247
1247
|
type: Input
|
|
1248
1248
|
}], username: [{
|
|
@@ -1315,7 +1315,7 @@ class MenuLangSwitcherComponent {
|
|
|
1315
1315
|
this.changeLanguageEvent.emit(lang);
|
|
1316
1316
|
}
|
|
1317
1317
|
static { this.ɵfac = function MenuLangSwitcherComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MenuLangSwitcherComponent)(); }; }
|
|
1318
|
-
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MenuLangSwitcherComponent, selectors: [["lib-menu-lang-switcher"]], inputs: { isCollapsed: "isCollapsed", languages: "languages" }, outputs: { changeLanguageEvent: "changeLanguageEvent" }, decls: 12, vars: 10, consts: [["state", "matMenuTrigger"], ["menu", "matMenu"], ["matTooltipPosition", "after", "matTooltipClass", "menu-tooltip", 1, "lang-switcher", 3, "matMenuTriggerFor", "matTooltip"], [1, "current-lang"], [1, "lang-icon"], [1, "lang-menu"], [1, "menu-arrow", "spin"], ["mat-menu-item", ""
|
|
1318
|
+
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MenuLangSwitcherComponent, selectors: [["lib-menu-lang-switcher"]], inputs: { isCollapsed: "isCollapsed", languages: "languages" }, outputs: { changeLanguageEvent: "changeLanguageEvent" }, decls: 12, vars: 10, consts: [["state", "matMenuTrigger"], ["menu", "matMenu"], ["matTooltipPosition", "after", "matTooltipClass", "menu-tooltip", 1, "lang-switcher", 3, "matMenuTriggerFor", "matTooltip"], [1, "current-lang"], [1, "lang-icon"], [1, "lang-menu"], [1, "menu-arrow", "spin"], ["mat-menu-item", ""], ["mat-menu-item", "", 3, "click"]], template: function MenuLangSwitcherComponent_Template(rf, ctx) { if (rf & 1) {
|
|
1319
1319
|
i0.ɵɵelementStart(0, "button", 2, 0);
|
|
1320
1320
|
i0.ɵɵpipe(2, "translate");
|
|
1321
1321
|
i0.ɵɵelementStart(3, "div", 3)(4, "mat-icon", 4);
|
|
@@ -1339,11 +1339,11 @@ class MenuLangSwitcherComponent {
|
|
|
1339
1339
|
i0.ɵɵconditional(!ctx.isCollapsed ? 7 : -1);
|
|
1340
1340
|
i0.ɵɵadvance(3);
|
|
1341
1341
|
i0.ɵɵrepeater(ctx.languages);
|
|
1342
|
-
} }, dependencies: [i5.MatTooltip, i2$1.MatIcon, i6.MatMenu, i6.MatMenuItem, i6.MatMenuTrigger, i8.TranslatePipe, i2.LanguageTranslatePipe], styles: ["span[_ngcontent-%COMP%]{font-size:14px}.lang-switcher[_ngcontent-%COMP%]{white-space:nowrap;overflow:hidden;display:flex;align-items:center;color:var(--base-
|
|
1342
|
+
} }, dependencies: [i5.MatTooltip, i2$1.MatIcon, i6.MatMenu, i6.MatMenuItem, i6.MatMenuTrigger, i8.TranslatePipe, i2.LanguageTranslatePipe], styles: [".spin[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_spinArrow .3s forwards}@keyframes _ngcontent-%COMP%_spinArrow{to{transform:rotate(180deg)}}span[_ngcontent-%COMP%]{font-size:14px}.lang-switcher[_ngcontent-%COMP%]{white-space:nowrap;overflow:hidden;display:flex;align-items:center;color:var(--base-30);background:none;width:100%;padding:16px 8px 16px 18px;border-radius:5px}.lang-switcher.active[_ngcontent-%COMP%], .lang-switcher[_ngcontent-%COMP%]:hover{background-color:var(--base-70)}.collapsed[_ngcontent-%COMP%]{padding:0;min-width:40px;height:40px;border-radius:50%;margin-top:10px;justify-content:center;width:100%;margin-left:-6px}.current-lang[_ngcontent-%COMP%]{display:flex;align-items:center;width:100%;gap:12px}.collapsed[_ngcontent-%COMP%] .current-lang[_ngcontent-%COMP%]{justify-content:center;width:100%}"] }); }
|
|
1343
1343
|
}
|
|
1344
1344
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuLangSwitcherComponent, [{
|
|
1345
1345
|
type: Component,
|
|
1346
|
-
args: [{ selector: 'lib-menu-lang-switcher', template: "<button\r\n [class.collapsed]=\"isCollapsed\"\r\n #state=\"matMenuTrigger\"\r\n [matMenuTriggerFor]=\"menu\"\r\n [matTooltip]=\"isCollapsed ? ('MENU.CHANGE_LANGUAGE' | translate) : ''\"\r\n matTooltipPosition=\"after\"\r\n matTooltipClass=\"menu-tooltip\" \r\n class=\"lang-switcher\"\r\n [class.active]=\"state.menuOpen\"\r\n>\r\n<div class=\"current-lang\">\r\n <mat-icon class=\"lang-icon\">language</mat-icon>\r\n\r\n @if (!isCollapsed) {\r\n <span>\r\n {{ currentLanguageCode | languageTranslate }}\r\n </span>\r\n }\r\n</div>\r\n\r\n @if (!isCollapsed) {\r\n @if (state.menuOpen) {\r\n <mat-icon class=\"menu-arrow spin\">keyboard_arrow_down</mat-icon>\r\n } @else {\r\n <mat-icon class=\"menu-arrow spin\">keyboard_arrow_up</mat-icon>\r\n }\r\n }\r\n</button>\r\n\r\n<mat-menu #menu=\"matMenu\" class=\"lang-menu\">\r\n @for (lang of languages; track lang) {\r\n @if (lang !== currentLanguageCode) {\r\n <button mat-menu-item
|
|
1346
|
+
args: [{ selector: 'lib-menu-lang-switcher', template: "<button\r\n [class.collapsed]=\"isCollapsed\"\r\n #state=\"matMenuTrigger\"\r\n [matMenuTriggerFor]=\"menu\"\r\n [matTooltip]=\"isCollapsed ? ('MENU.CHANGE_LANGUAGE' | translate) : ''\"\r\n matTooltipPosition=\"after\"\r\n matTooltipClass=\"menu-tooltip\" \r\n class=\"lang-switcher\"\r\n [class.active]=\"state.menuOpen\"\r\n>\r\n<div class=\"current-lang\">\r\n <mat-icon class=\"lang-icon\">language</mat-icon>\r\n\r\n @if (!isCollapsed) {\r\n <span>\r\n {{ currentLanguageCode | languageTranslate }}\r\n </span>\r\n }\r\n</div>\r\n\r\n @if (!isCollapsed) {\r\n @if (state.menuOpen) {\r\n <mat-icon class=\"menu-arrow spin\">keyboard_arrow_down</mat-icon>\r\n } @else {\r\n <mat-icon class=\"menu-arrow spin\">keyboard_arrow_up</mat-icon>\r\n }\r\n }\r\n</button>\r\n\r\n<mat-menu #menu=\"matMenu\" class=\"lang-menu\">\r\n @for (lang of languages; track lang) {\r\n @if (lang !== currentLanguageCode) {\r\n <button mat-menu-item (click)=\"changeLanguage(lang)\">\r\n {{ lang | languageTranslate }}\r\n </button>\r\n }\r\n }\r\n</mat-menu>\r\n", styles: [".spin{animation:spinArrow .3s forwards}@keyframes spinArrow{to{transform:rotate(180deg)}}span{font-size:14px}.lang-switcher{white-space:nowrap;overflow:hidden;display:flex;align-items:center;color:var(--base-30);background:none;width:100%;padding:16px 8px 16px 18px;border-radius:5px}.lang-switcher.active,.lang-switcher:hover{background-color:var(--base-70)}.collapsed{padding:0;min-width:40px;height:40px;border-radius:50%;margin-top:10px;justify-content:center;width:100%;margin-left:-6px}.current-lang{display:flex;align-items:center;width:100%;gap:12px}.collapsed .current-lang{justify-content:center;width:100%}\n"] }]
|
|
1347
1347
|
}], null, { isCollapsed: [{
|
|
1348
1348
|
type: Input
|
|
1349
1349
|
}], languages: [{
|