@tilde-nlp/ngx-menu 6.0.1 → 6.0.2
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 +104 -31
- package/esm2022/lib/services/menu-items.service.mjs +1 -5
- package/fesm2022/tilde-nlp-ngx-menu.mjs +114 -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,40 @@ 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
|
+
// displaying first letters of name and surname
|
|
798
|
+
const splittedUsername = this.username.split(' ');
|
|
799
|
+
if (splittedUsername.length === 1) {
|
|
800
|
+
// If there's only one word, use the first letter
|
|
801
|
+
this.userInitials = splittedUsername[0][0];
|
|
802
|
+
return;
|
|
803
|
+
}
|
|
804
|
+
// If there are more than one word, use the first letter of the first two names
|
|
805
|
+
this.userInitials = splittedUsername[0][0] + splittedUsername[1][0];
|
|
806
|
+
}
|
|
752
807
|
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.ɵɵ
|
|
808
|
+
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) {
|
|
809
|
+
const _r1 = i0.ɵɵgetCurrentView();
|
|
810
|
+
i0.ɵɵelementStart(0, "div", 1)(1, "div", 2)(2, "div", 3);
|
|
811
|
+
i0.ɵɵtemplate(3, SideNavMenuComponent_a_3_Template, 3, 6, "a", 4);
|
|
812
|
+
i0.ɵɵelementStart(4, "button", 5);
|
|
813
|
+
i0.ɵɵlistener("click", function SideNavMenuComponent_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.toggleCollapse()); });
|
|
758
814
|
i0.ɵɵelementStart(5, "mat-icon");
|
|
759
815
|
i0.ɵɵtext(6);
|
|
760
816
|
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()()
|
|
817
|
+
i0.ɵɵelementStart(7, "div", 6)(8, "menu-columns", 7);
|
|
818
|
+
i0.ɵɵlistener("toggleCollapseEvent", function SideNavMenuComponent_Template_menu_columns_toggleCollapseEvent_8_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.toggleCollapse()); });
|
|
819
|
+
i0.ɵɵelementEnd()();
|
|
820
|
+
i0.ɵɵtemplate(9, SideNavMenuComponent_button_9_Template, 4, 3, "button", 8);
|
|
821
|
+
i0.ɵɵelementStart(10, "mat-menu", null, 0);
|
|
822
|
+
i0.ɵɵtemplate(12, SideNavMenuComponent_button_12_Template, 4, 4, "button", 9);
|
|
823
|
+
i0.ɵɵelementEnd()()();
|
|
764
824
|
} if (rf & 2) {
|
|
765
825
|
i0.ɵɵstyleProp("width", ctx.sideNavWidth);
|
|
766
826
|
i0.ɵɵclassProp("collapsed", ctx.collapsed);
|
|
767
|
-
i0.ɵɵadvance(
|
|
827
|
+
i0.ɵɵadvance(2);
|
|
828
|
+
i0.ɵɵproperty("fxLayoutAlign", ctx.collapsed ? "center center" : "space-between center");
|
|
829
|
+
i0.ɵɵadvance();
|
|
768
830
|
i0.ɵɵproperty("ngIf", !ctx.collapsed);
|
|
769
831
|
i0.ɵɵadvance();
|
|
770
832
|
i0.ɵɵproperty("libPlausibleEvent", ctx.collapsed ? ctx.EXPAND_PLAUSIBLE_EVENT : ctx.COLLAPSE_PLAUSIBLE_EVENT);
|
|
@@ -772,17 +834,23 @@ class SideNavMenuComponent extends NavBaseComponent {
|
|
|
772
834
|
i0.ɵɵtextInterpolate(ctx.collapsed ? "keyboard_double_arrow_right" : "keyboard_double_arrow_left");
|
|
773
835
|
i0.ɵɵadvance(2);
|
|
774
836
|
i0.ɵɵproperty("direction", ctx.direction)("labelsVisible", !ctx.collapsed)("active", ctx.active);
|
|
775
|
-
|
|
837
|
+
i0.ɵɵadvance();
|
|
838
|
+
i0.ɵɵproperty("ngIf", ctx.userInitials);
|
|
839
|
+
i0.ɵɵadvance(3);
|
|
840
|
+
i0.ɵɵproperty("ngForOf", ctx.menuSettings.userOptions);
|
|
841
|
+
} }, 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
842
|
}
|
|
777
843
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SideNavMenuComponent, [{
|
|
778
844
|
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:
|
|
845
|
+
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
846
|
}], () => [{ type: i1.StrapiLinkService }, { type: i2.DOMService }, { type: MenuItemsService }, { type: undefined, decorators: [{
|
|
781
847
|
type: Optional
|
|
782
848
|
}, {
|
|
783
849
|
type: Inject,
|
|
784
850
|
args: [MENU_SHARED_CONFIG]
|
|
785
|
-
}] }], {
|
|
851
|
+
}] }], { username: [{
|
|
852
|
+
type: Input
|
|
853
|
+
}], menuSettings: [{
|
|
786
854
|
type: Input
|
|
787
855
|
}] }); })();
|
|
788
856
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SideNavMenuComponent, { className: "SideNavMenuComponent", filePath: "lib\\components\\side-nav-menu\\side-nav-menu.component.ts", lineNumber: 16 }); })();
|
|
@@ -848,7 +916,7 @@ class ModalNavMenuComponent extends NavBaseComponent {
|
|
|
848
916
|
i0.ɵɵproperty("ngIf", ctx.menuDialogSettings.showCloseMenuButton);
|
|
849
917
|
i0.ɵɵadvance(2);
|
|
850
918
|
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,
|
|
919
|
+
} }, 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
920
|
}
|
|
853
921
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ModalNavMenuComponent, [{
|
|
854
922
|
type: Component,
|
|
@@ -958,11 +1026,11 @@ class MenuItemIconComponent {
|
|
|
958
1026
|
i0.ɵɵproperty("hasBackdrop", true);
|
|
959
1027
|
i0.ɵɵadvance(2);
|
|
960
1028
|
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,
|
|
1029
|
+
} }, 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
1030
|
}
|
|
963
1031
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuItemIconComponent, [{
|
|
964
1032
|
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}
|
|
1033
|
+
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
1034
|
}], () => [{ type: i2.IconService }, { type: i1$1.Router }], { menuTrigger: [{
|
|
967
1035
|
type: ViewChild,
|
|
968
1036
|
args: ['menuTrigger']
|