@tilde-nlp/ngx-menu 6.0.1 → 6.0.3
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-icon/menu-item-icon.component.mjs +2 -2
- package/esm2022/lib/components/menu-item-link/menu-item-link.component.mjs +4 -4
- package/esm2022/lib/components/menu-item-list/menu-item-list.component.mjs +6 -6
- package/esm2022/lib/components/side-nav-menu/models/side-nav-settings.model.mjs +1 -1
- package/esm2022/lib/components/side-nav-menu/models/user-options.model.mjs +2 -0
- package/esm2022/lib/components/side-nav-menu/side-nav-menu.component.mjs +107 -31
- package/esm2022/lib/services/menu-items.service.mjs +1 -5
- package/fesm2022/tilde-nlp-ngx-menu.mjs +117 -46
- package/fesm2022/tilde-nlp-ngx-menu.mjs.map +1 -1
- package/lib/components/side-nav-menu/models/side-nav-settings.model.d.ts +2 -0
- package/lib/components/side-nav-menu/models/user-options.model.d.ts +5 -0
- package/lib/components/side-nav-menu/side-nav-menu.component.d.ts +6 -3
- package/package.json +1 -1
|
@@ -15,17 +15,17 @@ import * as i2$1 from '@angular/material/icon';
|
|
|
15
15
|
import { MatIconModule } from '@angular/material/icon';
|
|
16
16
|
import * as i7 from '@angular/material/button';
|
|
17
17
|
import { MatButtonModule } from '@angular/material/button';
|
|
18
|
+
import * as i8$1 from '@angular/material/menu';
|
|
19
|
+
import { MatMenuModule } from '@angular/material/menu';
|
|
18
20
|
import * as i4 from '@angular/material/divider';
|
|
19
21
|
import * as i3$1 from '@ngbracket/ngx-layout/extended';
|
|
20
22
|
import * as i5 from '@angular/material/tooltip';
|
|
21
23
|
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
22
|
-
import * as
|
|
24
|
+
import * as i8 from '@ngx-translate/core';
|
|
23
25
|
import { TranslateModule } from '@ngx-translate/core';
|
|
24
26
|
import { FlexLayoutModule } from '@ngbracket/ngx-layout';
|
|
25
27
|
import { MatDialogModule } from '@angular/material/dialog';
|
|
26
28
|
import { MatListModule } from '@angular/material/list';
|
|
27
|
-
import * as i7$1 from '@angular/material/menu';
|
|
28
|
-
import { MatMenuModule } from '@angular/material/menu';
|
|
29
29
|
import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
|
|
30
30
|
|
|
31
31
|
const MENU_SHARED_CONFIG = "menu-shared-config";
|
|
@@ -214,10 +214,6 @@ class MenuItemsService {
|
|
|
214
214
|
this._allRootItems = newArray;
|
|
215
215
|
this.updateActive();
|
|
216
216
|
}
|
|
217
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
218
|
-
// private isMenuItem(item: any): item is MenuItems {
|
|
219
|
-
// return item.customId;
|
|
220
|
-
// }
|
|
221
217
|
isElementCustomIdActive(element) {
|
|
222
218
|
return this.customId && element.customId === this.customId;
|
|
223
219
|
}
|
|
@@ -375,7 +371,7 @@ class MenuItemLinkComponent {
|
|
|
375
371
|
this.placeholderService.unregister(this.placeholderServiceId);
|
|
376
372
|
}
|
|
377
373
|
static { this.ɵfac = function MenuItemLinkComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MenuItemLinkComponent)(i0.ɵɵdirectiveInject(i1.StrapiLinkService), i0.ɵɵdirectiveInject(i1.StrapiVariablesService)); }; }
|
|
378
|
-
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: [["matTooltipPosition", "after", "matTooltipClass", "menu-tooltip",
|
|
374
|
+
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: [["matTooltipPosition", "after", "matTooltipClass", "menu-tooltip", 1, "text-m", "menu-item", 3, "click", "libPlausibleEvent", "fxLayout", "ngClass.lt-md", "matTooltip", "fxLayoutAlign", "href"], [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) {
|
|
379
375
|
i0.ɵɵelementStart(0, "a", 0);
|
|
380
376
|
i0.ɵɵpipe(1, "translate");
|
|
381
377
|
i0.ɵɵpipe(2, "translate");
|
|
@@ -390,11 +386,11 @@ class MenuItemLinkComponent {
|
|
|
390
386
|
i0.ɵɵproperty("ngIf", ctx.showIcons && ctx.menuItem.icon);
|
|
391
387
|
i0.ɵɵadvance();
|
|
392
388
|
i0.ɵɵproperty("ngIf", ctx.labelsVisible);
|
|
393
|
-
} }, dependencies: [i2$2.DefaultLayoutDirective, i2$2.
|
|
389
|
+
} }, dependencies: [i2$2.DefaultLayoutDirective, i2$2.DefaultLayoutAlignDirective, i3$1.DefaultClassDirective, i3.NgIf, i5.MatTooltip, i2.PlausibleEventDirective, MenuIconComponent, i8.TranslatePipe], styles: ["[_nghost-%COMP%]{width:100%}"] }); }
|
|
394
390
|
}
|
|
395
391
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuItemLinkComponent, [{
|
|
396
392
|
type: Component,
|
|
397
|
-
args: [{ selector: 'tld-menu-item-link', template: "<a [libPlausibleEvent]=\"menuItem.plausibleEvent\" [fxLayout]=\"menuItemLayout\"\r\n [ngClass.lt-md]=\"'mobile'\" [class.text-center]=\"menuItemLayout === 'column'\" class=\"text-m menu-item\"\r\n [matTooltip]=\"!labelsVisible ? (menuItem.title | translate) : ''\" matTooltipPosition=\"after\"\r\n [fxLayoutAlign]=\"menuLayoutDirection\" matTooltipClass=\"menu-tooltip\" (click)=\"linkClick($event, menuItem)\"\r\n [href]=\"href | translate\" [attr.target]=\"menuItem.externalLink?'_blank': '_self'\"
|
|
393
|
+
args: [{ selector: 'tld-menu-item-link', template: "<a [libPlausibleEvent]=\"menuItem.plausibleEvent\" [fxLayout]=\"menuItemLayout\"\r\n [ngClass.lt-md]=\"'mobile'\" [class.text-center]=\"menuItemLayout === 'column'\" class=\"text-m menu-item\"\r\n [matTooltip]=\"!labelsVisible ? (menuItem.title | translate) : ''\" matTooltipPosition=\"after\"\r\n [fxLayoutAlign]=\"menuLayoutDirection\" matTooltipClass=\"menu-tooltip\" (click)=\"linkClick($event, menuItem)\"\r\n [href]=\"href | translate\" [attr.target]=\"menuItem.externalLink?'_blank': '_self'\"\r\n [class.active-menu-item]=\"menuItem === activeItem\">\r\n <ng-container *ngIf=\"showIcons && menuItem.icon\">\r\n <tld-menu-icon [menuItem]=\"menuItem\"></tld-menu-icon>\r\n </ng-container>\r\n <span *ngIf=\"labelsVisible\" class=\"menu-item-title\">\r\n <span class=\"title-content\" [attr.content]=\"menuItem.title | translate\">\r\n {{ menuItem.title | translate}}\r\n </span>\r\n </span>\r\n</a>\r\n", styles: [":host{width:100%}\n"] }]
|
|
398
394
|
}], () => [{ type: i1.StrapiLinkService }, { type: i1.StrapiVariablesService }], { direction: [{
|
|
399
395
|
type: Input
|
|
400
396
|
}], labelsVisible: [{
|
|
@@ -494,8 +490,8 @@ function MenuItemListComponent_ng_template_4_Template(rf, ctx) { if (rf & 1) {
|
|
|
494
490
|
} if (rf & 2) {
|
|
495
491
|
const menuItem_r6 = ctx.menuItem;
|
|
496
492
|
const ctx_r0 = i0.ɵɵnextContext();
|
|
497
|
-
i0.ɵɵclassProp("
|
|
498
|
-
i0.ɵɵproperty("fxLayout", ctx_r0.menuItemLayout)("matTooltip", !ctx_r0.labelsVisible ? i0.ɵɵpipeBind1(1,
|
|
493
|
+
i0.ɵɵclassProp("menu-labels-visible", ctx_r0.labelsVisible)("active-menu-item", (ctx_r0.activeItem == null ? null : ctx_r0.activeItem.link) && menuItem_r6 === ctx_r0.activeItem);
|
|
494
|
+
i0.ɵɵproperty("fxLayout", ctx_r0.menuItemLayout)("matTooltip", !ctx_r0.labelsVisible ? i0.ɵɵpipeBind1(1, 10, menuItem_r6.title) : "")("fxLayoutAlign", ctx_r0.menuLayoutDirection);
|
|
499
495
|
i0.ɵɵadvance(2);
|
|
500
496
|
i0.ɵɵproperty("ngIf", ctx_r0.showIcons && menuItem_r6.icon);
|
|
501
497
|
i0.ɵɵadvance();
|
|
@@ -546,7 +542,7 @@ class MenuItemListComponent {
|
|
|
546
542
|
i0.ɵɵelementStart(2, "div", 4);
|
|
547
543
|
i0.ɵɵtemplate(3, MenuItemListComponent_ng_container_3_Template, 2, 4, "ng-container", 5);
|
|
548
544
|
i0.ɵɵelementEnd()();
|
|
549
|
-
i0.ɵɵtemplate(4, MenuItemListComponent_ng_template_4_Template, 5,
|
|
545
|
+
i0.ɵɵtemplate(4, MenuItemListComponent_ng_template_4_Template, 5, 12, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor)(6, MenuItemListComponent_ng_template_6_Template, 1, 6, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor);
|
|
550
546
|
} if (rf & 2) {
|
|
551
547
|
i0.ɵɵadvance();
|
|
552
548
|
i0.ɵɵproperty("ngIf", ctx.titleKey && ctx.showTitle && ctx.labelsVisible);
|
|
@@ -554,11 +550,11 @@ class MenuItemListComponent {
|
|
|
554
550
|
i0.ɵɵproperty("fxLayoutAlign", ctx.menuLayoutDirection);
|
|
555
551
|
i0.ɵɵadvance();
|
|
556
552
|
i0.ɵɵproperty("ngForOf", ctx.items);
|
|
557
|
-
} }, dependencies: [i2$2.DefaultLayoutDirective, i2$2.DefaultLayoutGapDirective, i2$2.DefaultLayoutAlignDirective, i3$1.DefaultClassDirective, i3.NgForOf, i3.NgIf, i3.NgTemplateOutlet, i5.MatTooltip, MenuItemListComponent, MenuIconComponent, MenuItemLinkComponent,
|
|
553
|
+
} }, dependencies: [i2$2.DefaultLayoutDirective, i2$2.DefaultLayoutGapDirective, i2$2.DefaultLayoutAlignDirective, i3$1.DefaultClassDirective, i3.NgForOf, i3.NgIf, i3.NgTemplateOutlet, i5.MatTooltip, MenuItemListComponent, MenuIconComponent, MenuItemLinkComponent, i8.TranslatePipe], styles: ["[_nghost-%COMP%]{display:inline-block} .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}[_nghost-%COMP%] .menu-list-wrapper .child-list tld-menu-item-link{margin-top:1em}[_nghost-%COMP%] .menu-list-wrapper .menu-item{cursor:pointer;font-style:normal;color:var(--base-40);text-decoration:none;align-items:center!important;font-weight:400;background:none;border:none}[_nghost-%COMP%] .menu-list-wrapper .menu-item:not(button):hover{font-weight:600}[_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{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}.child-list[_nghost-%COMP%]{margin-bottom:1rem}.child-list[_nghost-%COMP%] .menu-item[_ngcontent-%COMP%] + .menu-item[_ngcontent-%COMP%]{margin-top:.5rem} .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}.mob-menu-item[_ngcontent-%COMP%]{width:100%}"] }); }
|
|
558
554
|
}
|
|
559
555
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuItemListComponent, [{
|
|
560
556
|
type: Component,
|
|
561
|
-
args: [{ selector: 'menu-item-list', template: "<div class=\"menu-list-wrapper\">\r\n <div *ngIf=\"titleKey && showTitle && labelsVisible\" fxLayoutAlign=\"start center\" class=\"menu-item-list-title\">\r\n {{ titleKey | translate }}\r\n </div>\r\n <div fxLayout=\"column\" [fxLayoutAlign]=\"menuLayoutDirection\" class=\"menu-item-list\">\r\n <ng-container *ngFor=\"let menuItem of items\">\r\n <ng-container\r\n *ngTemplateOutlet=\"!menuItem.showChildren || !menuItem.children || menuItem?.children?.length === 0 ? menuItemLink : itemWithChildren; context: {menuItem: menuItem}\">\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 [fxLayout]=\"menuItemLayout\"
|
|
557
|
+
args: [{ selector: 'menu-item-list', template: "<div class=\"menu-list-wrapper\">\r\n <div *ngIf=\"titleKey && showTitle && labelsVisible\" fxLayoutAlign=\"start center\" class=\"menu-item-list-title\">\r\n {{ titleKey | translate }}\r\n </div>\r\n <div fxLayout=\"column\" [fxLayoutAlign]=\"menuLayoutDirection\" class=\"menu-item-list\">\r\n <ng-container *ngFor=\"let menuItem of items\">\r\n <ng-container\r\n *ngTemplateOutlet=\"!menuItem.showChildren || !menuItem.children || menuItem?.children?.length === 0 ? menuItemLink : itemWithChildren; context: {menuItem: menuItem}\">\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 [fxLayout]=\"menuItemLayout\" class=\"text-m menu-item\"\r\n [matTooltip]=\"!labelsVisible ? (menuItem.title | translate) : ''\" matTooltipPosition=\"after\" [class.menu-labels-visible]=\"labelsVisible\"\r\n [fxLayoutAlign]=\"menuLayoutDirection\" matTooltipClass=\"menu-tooltip\" fxLayoutGap=\"0.375rem\"\r\n [class.active-menu-item]=\"activeItem?.link && menuItem === activeItem\" (click)=\"toggleItemExpand($event,menuItem)\">\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\">{{ menuItem.title | translate }}</span></span>\r\n <span class=\"material-icons\" *ngIf=\"menuItem.showChildren && menuItem.children\">\r\n {{ menuItem.expanded ? 'arrow_drop_up' : 'arrow_drop_down' }}\r\n </span>\r\n </ng-container>\r\n </button>\r\n <ng-container *ngIf=\"menuItem.showChildren && menuItem.expanded && labelsVisible\">\r\n <menu-item-list class=\"child-list\" *ngIf=\"menuItem.children && menuItem.children.length\" [items]=\"menuItem.children\"\r\n [direction]=\"direction\" [labelsVisible]=\"labelsVisible\" [activeItem]=\"activeItem\">\r\n </menu-item-list>\r\n </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #menuItemLink let-menuItem=\"menuItem\">\r\n <tld-menu-item-link [ngClass.lt-md]=\"'mob-menu-item'\" [menuItem]=\"menuItem\" [direction]=\"direction\" [labelsVisible]=\"labelsVisible\"\r\n [activeItem]=\"activeItem\" [showIcons]=\"showIcons\"></tld-menu-item-link>\r\n</ng-template>", styles: [":host{display:inline-block}::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}:host ::ng-deep .menu-list-wrapper .child-list tld-menu-item-link{margin-top:1em}:host ::ng-deep .menu-list-wrapper .menu-item{cursor:pointer;font-style:normal;color:var(--base-40);text-decoration:none;align-items:center!important;font-weight:400;background:none;border:none}:host ::ng-deep .menu-list-wrapper .menu-item:not(button):hover{font-weight:600}: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{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.child-list{margin-bottom:1rem}:host.child-list .menu-item+.menu-item{margin-top:.5rem}::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}.mob-menu-item{width:100%}\n"] }]
|
|
562
558
|
}], null, { direction: [{
|
|
563
559
|
type: Input
|
|
564
560
|
}], labelsVisible: [{
|
|
@@ -671,18 +667,66 @@ class MenuColumnsComponent {
|
|
|
671
667
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MenuColumnsComponent, { className: "MenuColumnsComponent", filePath: "lib\\components\\menu-columns\\menu-columns.component.ts", lineNumber: 16 }); })();
|
|
672
668
|
|
|
673
669
|
function SideNavMenuComponent_a_3_Template(rf, ctx) { if (rf & 1) {
|
|
674
|
-
const
|
|
675
|
-
i0.ɵɵelementStart(0, "a",
|
|
670
|
+
const _r2 = i0.ɵɵgetCurrentView();
|
|
671
|
+
i0.ɵɵelementStart(0, "a", 10);
|
|
676
672
|
i0.ɵɵpipe(1, "translate");
|
|
677
|
-
i0.ɵɵlistener("click", function SideNavMenuComponent_a_3_Template_a_click_0_listener($event) { i0.ɵɵrestoreView(
|
|
678
|
-
i0.ɵɵelement(2, "img",
|
|
673
|
+
i0.ɵɵlistener("click", function SideNavMenuComponent_a_3_Template_a_click_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.logoClick($event)); });
|
|
674
|
+
i0.ɵɵelement(2, "img", 11);
|
|
679
675
|
i0.ɵɵelementEnd();
|
|
680
676
|
} if (rf & 2) {
|
|
681
|
-
const
|
|
682
|
-
i0.ɵɵproperty("libPlausibleEvent",
|
|
677
|
+
const ctx_r2 = i0.ɵɵnextContext();
|
|
678
|
+
i0.ɵɵproperty("libPlausibleEvent", ctx_r2.LOGOCLICK_PLAUSIBLE_EVENT)("href", ctx_r2.baseUrl, i0.ɵɵsanitizeUrl);
|
|
683
679
|
i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(1, 4, "MENU.ARIA_LABELS.LOGO"));
|
|
684
680
|
i0.ɵɵadvance(2);
|
|
685
|
-
i0.ɵɵproperty("src",
|
|
681
|
+
i0.ɵɵproperty("src", ctx_r2.menuLogoImage, i0.ɵɵsanitizeUrl);
|
|
682
|
+
} }
|
|
683
|
+
function SideNavMenuComponent_button_9_span_3_Template(rf, ctx) { if (rf & 1) {
|
|
684
|
+
i0.ɵɵelementStart(0, "span", 15);
|
|
685
|
+
i0.ɵɵtext(1);
|
|
686
|
+
i0.ɵɵelementEnd();
|
|
687
|
+
} if (rf & 2) {
|
|
688
|
+
const ctx_r2 = i0.ɵɵnextContext(2);
|
|
689
|
+
i0.ɵɵadvance();
|
|
690
|
+
i0.ɵɵtextInterpolate1(" ", ctx_r2.username, " ");
|
|
691
|
+
} }
|
|
692
|
+
function SideNavMenuComponent_button_9_Template(rf, ctx) { if (rf & 1) {
|
|
693
|
+
i0.ɵɵelementStart(0, "button", 12)(1, "div", 13);
|
|
694
|
+
i0.ɵɵtext(2);
|
|
695
|
+
i0.ɵɵelementEnd();
|
|
696
|
+
i0.ɵɵtemplate(3, SideNavMenuComponent_button_9_span_3_Template, 2, 1, "span", 14);
|
|
697
|
+
i0.ɵɵelementEnd();
|
|
698
|
+
} if (rf & 2) {
|
|
699
|
+
const ctx_r2 = i0.ɵɵnextContext();
|
|
700
|
+
const menu_r4 = i0.ɵɵreference(11);
|
|
701
|
+
i0.ɵɵproperty("matMenuTriggerFor", menu_r4);
|
|
702
|
+
i0.ɵɵadvance(2);
|
|
703
|
+
i0.ɵɵtextInterpolate1(" ", ctx_r2.userInitials, " ");
|
|
704
|
+
i0.ɵɵadvance();
|
|
705
|
+
i0.ɵɵproperty("ngIf", !ctx_r2.collapsed);
|
|
706
|
+
} }
|
|
707
|
+
function SideNavMenuComponent_button_12_span_1_Template(rf, ctx) { if (rf & 1) {
|
|
708
|
+
i0.ɵɵelementStart(0, "span", 18);
|
|
709
|
+
i0.ɵɵtext(1);
|
|
710
|
+
i0.ɵɵelementEnd();
|
|
711
|
+
} if (rf & 2) {
|
|
712
|
+
const item_r6 = i0.ɵɵnextContext().$implicit;
|
|
713
|
+
i0.ɵɵadvance();
|
|
714
|
+
i0.ɵɵtextInterpolate(item_r6.icon);
|
|
715
|
+
} }
|
|
716
|
+
function SideNavMenuComponent_button_12_Template(rf, ctx) { if (rf & 1) {
|
|
717
|
+
const _r5 = i0.ɵɵgetCurrentView();
|
|
718
|
+
i0.ɵɵelementStart(0, "button", 16);
|
|
719
|
+
i0.ɵɵlistener("click", function SideNavMenuComponent_button_12_Template_button_click_0_listener() { const item_r6 = i0.ɵɵrestoreView(_r5).$implicit; return i0.ɵɵresetView(item_r6.callback()); });
|
|
720
|
+
i0.ɵɵtemplate(1, SideNavMenuComponent_button_12_span_1_Template, 2, 1, "span", 17);
|
|
721
|
+
i0.ɵɵtext(2);
|
|
722
|
+
i0.ɵɵpipe(3, "translate");
|
|
723
|
+
i0.ɵɵelementEnd();
|
|
724
|
+
} if (rf & 2) {
|
|
725
|
+
const item_r6 = ctx.$implicit;
|
|
726
|
+
i0.ɵɵadvance();
|
|
727
|
+
i0.ɵɵproperty("ngIf", item_r6.icon);
|
|
728
|
+
i0.ɵɵadvance();
|
|
729
|
+
i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(3, 2, item_r6.label), " ");
|
|
686
730
|
} }
|
|
687
731
|
class SideNavMenuComponent extends NavBaseComponent {
|
|
688
732
|
get menuLogoImage() {
|
|
@@ -698,6 +742,14 @@ class SideNavMenuComponent extends NavBaseComponent {
|
|
|
698
742
|
this.strapiLinkService = strapiLinkService;
|
|
699
743
|
this.domService = domService;
|
|
700
744
|
this.menuItems = menuItems;
|
|
745
|
+
this.menuSettings = {
|
|
746
|
+
expandedWidth: '241px',
|
|
747
|
+
collapsedWidth: '56px',
|
|
748
|
+
menuLogo: '',
|
|
749
|
+
menuLogoCollapsed: '',
|
|
750
|
+
disableStrapi: false
|
|
751
|
+
};
|
|
752
|
+
this.collapsed = false;
|
|
701
753
|
this.COLLAPSED_LOCAL_STORAGE_KEY = "TLD_MENU_SIDE_NAV_COLLAPSED";
|
|
702
754
|
//#region Plausible event variables for collapse button
|
|
703
755
|
this.COLLAPSE_PLAUSIBLE_EVENT_ID = "collapseMenu";
|
|
@@ -715,20 +767,12 @@ class SideNavMenuComponent extends NavBaseComponent {
|
|
|
715
767
|
eventId: this.COLLAPSE_PLAUSIBLE_EVENT_ID,
|
|
716
768
|
properties: [{ key: this.COLLAPSE_PLAUSIBLE_ACTION_KEY, value: "collapse" }]
|
|
717
769
|
};
|
|
718
|
-
//#endregion
|
|
719
|
-
this.menuSettings = {
|
|
720
|
-
expandedWidth: '9.375em',
|
|
721
|
-
collapsedWidth: '5em',
|
|
722
|
-
menuLogo: '',
|
|
723
|
-
menuLogoCollapsed: '',
|
|
724
|
-
disableStrapi: false
|
|
725
|
-
};
|
|
726
|
-
this.collapsed = false;
|
|
727
770
|
this.baseUrl = menuSharedConfig.baseUrl || '';
|
|
728
771
|
}
|
|
729
772
|
ngOnInit() {
|
|
730
773
|
super.ngOnInit();
|
|
731
774
|
this.getColapsedFromLocalStorage();
|
|
775
|
+
this.setUserInitials();
|
|
732
776
|
}
|
|
733
777
|
logoClick(event) {
|
|
734
778
|
this.strapiLinkService.strapiLinkClick(event);
|
|
@@ -749,22 +793,43 @@ class SideNavMenuComponent extends NavBaseComponent {
|
|
|
749
793
|
}
|
|
750
794
|
this.domService.localStorage.setItem(this.COLLAPSED_LOCAL_STORAGE_KEY, this.collapsed.toString());
|
|
751
795
|
}
|
|
796
|
+
setUserInitials() {
|
|
797
|
+
if (!this.username) {
|
|
798
|
+
return;
|
|
799
|
+
}
|
|
800
|
+
// displaying first letters of name and surname
|
|
801
|
+
const splittedUsername = this.username.split(' ');
|
|
802
|
+
if (splittedUsername.length === 1) {
|
|
803
|
+
// If there's only one word, use the first letter
|
|
804
|
+
this.userInitials = splittedUsername[0][0];
|
|
805
|
+
return;
|
|
806
|
+
}
|
|
807
|
+
// If there are more than one word, use the first letter of the first two names
|
|
808
|
+
this.userInitials = splittedUsername[0][0] + splittedUsername[1][0];
|
|
809
|
+
}
|
|
752
810
|
static { this.ɵfac = function SideNavMenuComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SideNavMenuComponent)(i0.ɵɵdirectiveInject(i1.StrapiLinkService), i0.ɵɵdirectiveInject(i2.DOMService), i0.ɵɵdirectiveInject(MenuItemsService), i0.ɵɵdirectiveInject(MENU_SHARED_CONFIG, 8)); }; }
|
|
753
|
-
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SideNavMenuComponent, selectors: [["lib-side-nav-menu"]], inputs: { menuSettings: "menuSettings" }, features: [i0.ɵɵInheritDefinitionFeature], decls:
|
|
754
|
-
|
|
755
|
-
i0.ɵɵ
|
|
756
|
-
i0.ɵɵ
|
|
757
|
-
i0.ɵɵ
|
|
811
|
+
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SideNavMenuComponent, selectors: [["lib-side-nav-menu"]], inputs: { username: "username", menuSettings: "menuSettings" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 13, vars: 13, consts: [["menu", "matMenu"], ["fxLayout", "column", 1, "menu-container"], ["fxLayout", "column", "fxFlexFill", "", 1, "content"], ["fxLayout", "row", 1, "menu-container-header", 3, "fxLayoutAlign"], ["fxFlex", "3.125em", "fxLayoutAlign", "start center", 3, "libPlausibleEvent", "href", "click", 4, "ngIf"], ["mat-icon-button", "", 1, "toggler", 3, "click", "libPlausibleEvent"], ["fxLayout", "column", "fxFlex", "", 1, "menu-wrapper"], ["role", "navigation", "fxFlex", "", 3, "toggleCollapseEvent", "direction", "labelsVisible", "active"], ["class", "profile-wrapper", 3, "matMenuTriggerFor", 4, "ngIf"], ["mat-menu-item", "", "class", "profile-option", 3, "click", 4, "ngFor", "ngForOf"], ["fxFlex", "3.125em", "fxLayoutAlign", "start center", 3, "click", "libPlausibleEvent", "href"], ["height", "40", "alt", "logo", 1, "menu-logo", 3, "src"], [1, "profile-wrapper", 3, "matMenuTriggerFor"], [1, "profile-icon"], ["class", "profile-name", 4, "ngIf"], [1, "profile-name"], ["mat-menu-item", "", 1, "profile-option", 3, "click"], ["class", "material-icons profile-option-icon", 4, "ngIf"], [1, "material-icons", "profile-option-icon"]], template: function SideNavMenuComponent_Template(rf, ctx) { if (rf & 1) {
|
|
812
|
+
const _r1 = i0.ɵɵgetCurrentView();
|
|
813
|
+
i0.ɵɵelementStart(0, "div", 1)(1, "div", 2)(2, "div", 3);
|
|
814
|
+
i0.ɵɵtemplate(3, SideNavMenuComponent_a_3_Template, 3, 6, "a", 4);
|
|
815
|
+
i0.ɵɵelementStart(4, "button", 5);
|
|
816
|
+
i0.ɵɵlistener("click", function SideNavMenuComponent_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.toggleCollapse()); });
|
|
758
817
|
i0.ɵɵelementStart(5, "mat-icon");
|
|
759
818
|
i0.ɵɵtext(6);
|
|
760
819
|
i0.ɵɵelementEnd()()();
|
|
761
|
-
i0.ɵɵelementStart(7, "div",
|
|
762
|
-
i0.ɵɵlistener("toggleCollapseEvent", function SideNavMenuComponent_Template_menu_columns_toggleCollapseEvent_8_listener() { return ctx.toggleCollapse(); });
|
|
763
|
-
i0.ɵɵelementEnd()()
|
|
820
|
+
i0.ɵɵelementStart(7, "div", 6)(8, "menu-columns", 7);
|
|
821
|
+
i0.ɵɵlistener("toggleCollapseEvent", function SideNavMenuComponent_Template_menu_columns_toggleCollapseEvent_8_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.toggleCollapse()); });
|
|
822
|
+
i0.ɵɵelementEnd()();
|
|
823
|
+
i0.ɵɵtemplate(9, SideNavMenuComponent_button_9_Template, 4, 3, "button", 8);
|
|
824
|
+
i0.ɵɵelementStart(10, "mat-menu", null, 0);
|
|
825
|
+
i0.ɵɵtemplate(12, SideNavMenuComponent_button_12_Template, 4, 4, "button", 9);
|
|
826
|
+
i0.ɵɵelementEnd()()();
|
|
764
827
|
} if (rf & 2) {
|
|
765
828
|
i0.ɵɵstyleProp("width", ctx.sideNavWidth);
|
|
766
829
|
i0.ɵɵclassProp("collapsed", ctx.collapsed);
|
|
767
|
-
i0.ɵɵadvance(
|
|
830
|
+
i0.ɵɵadvance(2);
|
|
831
|
+
i0.ɵɵproperty("fxLayoutAlign", ctx.collapsed ? "center center" : "space-between center");
|
|
832
|
+
i0.ɵɵadvance();
|
|
768
833
|
i0.ɵɵproperty("ngIf", !ctx.collapsed);
|
|
769
834
|
i0.ɵɵadvance();
|
|
770
835
|
i0.ɵɵproperty("libPlausibleEvent", ctx.collapsed ? ctx.EXPAND_PLAUSIBLE_EVENT : ctx.COLLAPSE_PLAUSIBLE_EVENT);
|
|
@@ -772,17 +837,23 @@ class SideNavMenuComponent extends NavBaseComponent {
|
|
|
772
837
|
i0.ɵɵtextInterpolate(ctx.collapsed ? "keyboard_double_arrow_right" : "keyboard_double_arrow_left");
|
|
773
838
|
i0.ɵɵadvance(2);
|
|
774
839
|
i0.ɵɵproperty("direction", ctx.direction)("labelsVisible", !ctx.collapsed)("active", ctx.active);
|
|
775
|
-
|
|
840
|
+
i0.ɵɵadvance();
|
|
841
|
+
i0.ɵɵproperty("ngIf", ctx.userInitials);
|
|
842
|
+
i0.ɵɵadvance(3);
|
|
843
|
+
i0.ɵɵproperty("ngForOf", ctx.menuSettings.userOptions);
|
|
844
|
+
} }, dependencies: [i2$2.DefaultLayoutDirective, i2$2.DefaultLayoutAlignDirective, i2$2.FlexFillDirective, i2$2.DefaultFlexDirective, i3.NgForOf, i3.NgIf, i2$1.MatIcon, i7.MatIconButton, i8$1.MatMenu, i8$1.MatMenuItem, i8$1.MatMenuTrigger, i2.PlausibleEventDirective, MenuColumnsComponent, i8.TranslatePipe], styles: [".menu-container[_ngcontent-%COMP%]{height:100%;min-height:100vh;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}.menu-container[_ngcontent-%COMP%] .content[_ngcontent-%COMP%]:not(.collapsed){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%;margin:0}.menu-container[_ngcontent-%COMP%] .profile-wrapper[_ngcontent-%COMP%]{color:var(--base-40);display:flex;align-items:center;justify-content:center;margin:32px 0}.menu-container[_ngcontent-%COMP%] .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}.menu-container[_ngcontent-%COMP%] .profile-name[_ngcontent-%COMP%]{margin-left:12px}.profile-option-icon[_ngcontent-%COMP%]{vertical-align:middle;margin:0 5px 5px 0}[_nghost-%COMP%] .collapsed .profile-wrapper{left:8px!important}[_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}[_nghost-%COMP%] button.collapse-btn .mat-mdc-button-persistent-ripple, [_nghost-%COMP%] button.toggler .mat-mdc-button-persistent-ripple{display:none}"] }); }
|
|
776
845
|
}
|
|
777
846
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SideNavMenuComponent, [{
|
|
778
847
|
type: Component,
|
|
779
|
-
args: [{ selector: 'lib-side-nav-menu', template: "<div 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=\"space-between center\">\r\n <a *ngIf=\"!collapsed\" [libPlausibleEvent]=\"LOGOCLICK_PLAUSIBLE_EVENT\" fxFlex=\"3.125em\" [href]=\"baseUrl\"\r\n [attr.aria-label]=\"'MENU.ARIA_LABELS.LOGO' | translate\" (click)=\"logoClick($event)\" fxLayoutAlign=\"start center\"\r\n >\r\n <img class=\"menu-logo\" [src]=\"menuLogoImage\" alt=\"\" />\r\n </a>\r\n\r\n <button\r\n mat-icon-button\r\n class=\"toggler\"\r\n [libPlausibleEvent]=\"collapsed ? EXPAND_PLAUSIBLE_EVENT : COLLAPSE_PLAUSIBLE_EVENT\"\r\n (click)=\"toggleCollapse()\"\r\n >\r\n <mat-icon>{{ 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\" fxFlex>\r\n <menu-columns (toggleCollapseEvent)=\"toggleCollapse()\" [direction]=\"direction\" role=\"navigation\" fxFlex [labelsVisible]=\"!collapsed\"\r\n [active]=\"active\"></menu-columns>\r\n </div>\r\n </div>", styles: [".menu-container{height:100%;overflow:auto;background:var(--base-100);border-right:
|
|
848
|
+
args: [{ selector: 'lib-side-nav-menu', template: "<div 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\" [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\" class=\"menu-logo\" [src]=\"menuLogoImage\" alt=\"logo\" />\r\n </a>\r\n \r\n <button\r\n mat-icon-button\r\n class=\"toggler\"\r\n [libPlausibleEvent]=\"collapsed ? EXPAND_PLAUSIBLE_EVENT : COLLAPSE_PLAUSIBLE_EVENT\"\r\n (click)=\"toggleCollapse()\"\r\n >\r\n <mat-icon>{{ 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\" fxFlex>\r\n <menu-columns (toggleCollapseEvent)=\"toggleCollapse()\" [direction]=\"direction\" role=\"navigation\" fxFlex [labelsVisible]=\"!collapsed\"\r\n [active]=\"active\"></menu-columns>\r\n </div>\r\n\r\n\r\n <button *ngIf=\"userInitials\" [matMenuTriggerFor]=\"menu\" class=\"profile-wrapper\">\r\n <div class=\"profile-icon\">\r\n {{userInitials}}\r\n </div>\r\n\r\n <span *ngIf=\"!collapsed\" class=\"profile-name\">\r\n {{ username }}\r\n </span>\r\n </button>\r\n\r\n <mat-menu #menu=\"matMenu\">\r\n <button\r\n mat-menu-item\r\n class=\"profile-option\"\r\n *ngFor=\"let item of menuSettings.userOptions\"\r\n (click)=\"item.callback()\"\r\n >\r\n <span *ngIf=\"item.icon\" class=\"material-icons profile-option-icon\">{{item.icon}}</span>\r\n {{ item.label | translate }}\r\n </button>\r\n </mat-menu>\r\n </div>", styles: [".menu-container{height:100%;min-height:100vh;overflow:auto;background:var(--base-100);border-right:2px solid var(--base-95)}.menu-container .menu-container-header{margin:24px 0}.menu-container .content:not(.collapsed){padding:0 12px}.menu-container .content:not(.collapsed) .menu-logo{margin-left:16px;max-width:100%}.menu-container .divider{width:100%;margin:0}.menu-container .profile-wrapper{color:var(--base-40);display:flex;align-items:center;justify-content:center;margin:32px 0}.menu-container .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}.menu-container .profile-name{margin-left:12px}.profile-option-icon{vertical-align:middle;margin:0 5px 5px 0}:host ::ng-deep .collapsed .profile-wrapper{left:8px!important}: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}:host::ng-deep button.collapse-btn .mat-mdc-button-persistent-ripple,:host::ng-deep button.toggler .mat-mdc-button-persistent-ripple{display:none}\n"] }]
|
|
780
849
|
}], () => [{ type: i1.StrapiLinkService }, { type: i2.DOMService }, { type: MenuItemsService }, { type: undefined, decorators: [{
|
|
781
850
|
type: Optional
|
|
782
851
|
}, {
|
|
783
852
|
type: Inject,
|
|
784
853
|
args: [MENU_SHARED_CONFIG]
|
|
785
|
-
}] }], {
|
|
854
|
+
}] }], { username: [{
|
|
855
|
+
type: Input
|
|
856
|
+
}], menuSettings: [{
|
|
786
857
|
type: Input
|
|
787
858
|
}] }); })();
|
|
788
859
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SideNavMenuComponent, { className: "SideNavMenuComponent", filePath: "lib\\components\\side-nav-menu\\side-nav-menu.component.ts", lineNumber: 16 }); })();
|
|
@@ -848,7 +919,7 @@ class ModalNavMenuComponent extends NavBaseComponent {
|
|
|
848
919
|
i0.ɵɵproperty("ngIf", ctx.menuDialogSettings.showCloseMenuButton);
|
|
849
920
|
i0.ɵɵadvance(2);
|
|
850
921
|
i0.ɵɵproperty("direction", ctx.direction)("active", ctx.active);
|
|
851
|
-
} }, dependencies: [i2$2.DefaultLayoutDirective, i2$2.DefaultLayoutAlignDirective, i2$2.FlexFillDirective, i2$2.DefaultFlexDirective, i3.NgIf, i2$1.MatIcon, MenuColumnsComponent,
|
|
922
|
+
} }, dependencies: [i2$2.DefaultLayoutDirective, i2$2.DefaultLayoutAlignDirective, i2$2.FlexFillDirective, i2$2.DefaultFlexDirective, i3.NgIf, i2$1.MatIcon, MenuColumnsComponent, i8.TranslatePipe], styles: [".menu-modal[_ngcontent-%COMP%]{background-color:var(--base-100);padding:1.375rem 1.5rem}.close-icon[_ngcontent-%COMP%]{cursor:pointer}.menu-header[_ngcontent-%COMP%]{font-style:normal;font-weight:500;font-size:1.3125rem;line-height:1.75rem;text-align:center;margin:1em 0;color:var(--menu-dark-color)}.close-icon[_ngcontent-%COMP%] > mat-icon[_ngcontent-%COMP%]{transform:scale(1.5)}"] }); }
|
|
852
923
|
}
|
|
853
924
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ModalNavMenuComponent, [{
|
|
854
925
|
type: Component,
|
|
@@ -958,11 +1029,11 @@ class MenuItemIconComponent {
|
|
|
958
1029
|
i0.ɵɵproperty("hasBackdrop", true);
|
|
959
1030
|
i0.ɵɵadvance(2);
|
|
960
1031
|
i0.ɵɵproperty("menuDialogSettings", ctx.menuDialogSettings)("direction", ctx.direction);
|
|
961
|
-
} }, dependencies: [i2$2.DefaultLayoutDirective, i2$2.DefaultLayoutGapDirective, i2$2.DefaultLayoutAlignDirective, i2$2.DefaultFlexOrderDirective, i3.NgIf, i2$1.MatIcon, i7.MatButton,
|
|
1032
|
+
} }, dependencies: [i2$2.DefaultLayoutDirective, i2$2.DefaultLayoutGapDirective, i2$2.DefaultLayoutAlignDirective, i2$2.DefaultFlexOrderDirective, i3.NgIf, i2$1.MatIcon, i7.MatButton, i8$1.MatMenu, i8$1.MatMenuTrigger, i2.PlausibleEventDirective, ModalNavMenuComponent, i8.TranslatePipe], styles: [".content[_ngcontent-%COMP%]{gap:1.5em;cursor:pointer}button.mat-mdc-icon-button[_ngcontent-%COMP%]{width:inherit} lib-modal-nav-menu>.content.menu-modal>div.full-screen{width:100%} lib-modal-nav-menu>.content.menu-modal>div.full-screen .menu-list-wrapper .menu-item{width:100%} div:has(.mat-mdc-menu-panel.mobile-menu-dialog.full-screen){width:100%;max-width:100%} .mat-mdc-menu-panel.mobile-menu-dialog.full-screen{width:100vw;margin-top:-2.5em;max-width:none}"] }); }
|
|
962
1033
|
}
|
|
963
1034
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuItemIconComponent, [{
|
|
964
1035
|
type: Component,
|
|
965
|
-
args: [{ selector: 'lib-menu-item-icon', template: "<button class=\"content text-l\" mat-button [disableRipple]=\"true\" #menuTrigger=\"matMenuTrigger\"\r\n [matMenuTriggerFor]=\"menu\" [libPlausibleEvent]=\"PLAUSIBLE_EVENT\">\r\n <span fxLayout=\"row\" fxLayoutGap=\"1.5em\" fxLayoutAlign=\"center center\">\r\n <span *ngIf=\"menuSettings.titlePlacement !== TITLE_PLACEMENT_NONE\" [fxFlexOrder]=\"\r\n menuSettings.titlePlacement === TITLE_PLACEMENT_LEFT ? 1 : 2\r\n \" class=\"menu-label\">{{ \"MENU.MENU\" | translate }}</span>\r\n <mat-icon [fxFlexOrder]=\"\r\n menuSettings.titlePlacement === TITLE_PLACEMENT_LEFT ? 2 : 1\r\n \" [svgIcon]=\"iconName\">\r\n </mat-icon>\r\n </span>\r\n</button>\r\n\r\n<mat-menu [hasBackdrop]=\"true\" #menu class=\"mobile-menu-dialog {{\r\n menuDialogSettings.fullScreen ? 'full-screen' : 'minimized-screen'\r\n }}\">\r\n <!-- Click method so that menu does not get closed when clicking outside of items-->\r\n <lib-modal-nav-menu (click)=\"$event.stopPropagation()\" (closeButtonClick)=\"closeMenu()\"\r\n [menuDialogSettings]=\"menuDialogSettings\" [direction]=\"direction\">\r\n <ng-content top select=\"[top]\"></ng-content>\r\n <ng-content bottom select=\"[bottom]\"></ng-content>\r\n </lib-modal-nav-menu>\r\n</mat-menu>", styles: [".content{gap:1.5em;cursor:pointer}button.mat-mdc-icon-button{width:inherit}
|
|
1036
|
+
args: [{ selector: 'lib-menu-item-icon', template: "<button class=\"content text-l\" mat-button [disableRipple]=\"true\" #menuTrigger=\"matMenuTrigger\"\r\n [matMenuTriggerFor]=\"menu\" [libPlausibleEvent]=\"PLAUSIBLE_EVENT\">\r\n <span fxLayout=\"row\" fxLayoutGap=\"1.5em\" fxLayoutAlign=\"center center\">\r\n <span *ngIf=\"menuSettings.titlePlacement !== TITLE_PLACEMENT_NONE\" [fxFlexOrder]=\"\r\n menuSettings.titlePlacement === TITLE_PLACEMENT_LEFT ? 1 : 2\r\n \" class=\"menu-label\">{{ \"MENU.MENU\" | translate }}</span>\r\n <mat-icon [fxFlexOrder]=\"\r\n menuSettings.titlePlacement === TITLE_PLACEMENT_LEFT ? 2 : 1\r\n \" [svgIcon]=\"iconName\">\r\n </mat-icon>\r\n </span>\r\n</button>\r\n\r\n<mat-menu [hasBackdrop]=\"true\" #menu class=\"mobile-menu-dialog {{\r\n menuDialogSettings.fullScreen ? 'full-screen' : 'minimized-screen'\r\n }}\">\r\n <!-- Click method so that menu does not get closed when clicking outside of items-->\r\n <lib-modal-nav-menu (click)=\"$event.stopPropagation()\" (closeButtonClick)=\"closeMenu()\"\r\n [menuDialogSettings]=\"menuDialogSettings\" [direction]=\"direction\">\r\n <ng-content top select=\"[top]\"></ng-content>\r\n <ng-content bottom select=\"[bottom]\"></ng-content>\r\n </lib-modal-nav-menu>\r\n</mat-menu>", styles: [".content{gap:1.5em;cursor:pointer}button.mat-mdc-icon-button{width:inherit}::ng-deep lib-modal-nav-menu>.content.menu-modal>div.full-screen{width:100%}::ng-deep lib-modal-nav-menu>.content.menu-modal>div.full-screen .menu-list-wrapper .menu-item{width:100%}::ng-deep div:has(.mat-mdc-menu-panel.mobile-menu-dialog.full-screen){width:100%;max-width:100%}::ng-deep .mat-mdc-menu-panel.mobile-menu-dialog.full-screen{width:100vw;margin-top:-2.5em;max-width:none}\n"] }]
|
|
966
1037
|
}], () => [{ type: i2.IconService }, { type: i1$1.Router }], { menuTrigger: [{
|
|
967
1038
|
type: ViewChild,
|
|
968
1039
|
args: ['menuTrigger']
|