@tilde-nlp/ngx-menu 6.1.4 → 6.1.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/components/menu-item-list/menu-item-list.component.mjs +8 -7
- package/esm2022/lib/components/side-nav-menu/models/user-options.model.mjs +1 -1
- package/esm2022/lib/components/side-nav-menu/side-nav-menu.component.mjs +108 -47
- package/fesm2022/tilde-nlp-ngx-menu.mjs +111 -50
- package/fesm2022/tilde-nlp-ngx-menu.mjs.map +1 -1
- package/lib/components/side-nav-menu/models/user-options.model.d.ts +4 -1
- package/package.json +1 -1
|
@@ -13,9 +13,9 @@ import * as i3 from '@angular/common';
|
|
|
13
13
|
import { CommonModule } from '@angular/common';
|
|
14
14
|
import * as i2$1 from '@angular/material/icon';
|
|
15
15
|
import { MatIconModule } from '@angular/material/icon';
|
|
16
|
-
import * as
|
|
16
|
+
import * as i8$1 from '@angular/material/button';
|
|
17
17
|
import { MatButtonModule } from '@angular/material/button';
|
|
18
|
-
import * as
|
|
18
|
+
import * as i9 from '@angular/material/menu';
|
|
19
19
|
import { MatMenuModule } from '@angular/material/menu';
|
|
20
20
|
import * as i4 from '@angular/material/divider';
|
|
21
21
|
import * as i3$1 from '@ngbracket/ngx-layout/extended';
|
|
@@ -406,7 +406,7 @@ class MenuItemLinkComponent {
|
|
|
406
406
|
}] }); })();
|
|
407
407
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MenuItemLinkComponent, { className: "MenuItemLinkComponent", filePath: "lib\\components\\menu-item-link\\menu-item-link.component.ts", lineNumber: 10 }); })();
|
|
408
408
|
|
|
409
|
-
const _c0$
|
|
409
|
+
const _c0$3 = a0 => ({ menuItem: a0 });
|
|
410
410
|
function MenuItemListComponent_div_1_Template(rf, ctx) { if (rf & 1) {
|
|
411
411
|
i0.ɵɵelementStart(0, "div", 6);
|
|
412
412
|
i0.ɵɵtext(1);
|
|
@@ -430,7 +430,7 @@ function MenuItemListComponent_ng_container_3_Template(rf, ctx) { if (rf & 1) {
|
|
|
430
430
|
const itemWithChildren_r3 = i0.ɵɵreference(5);
|
|
431
431
|
const menuItemLink_r4 = i0.ɵɵreference(7);
|
|
432
432
|
i0.ɵɵadvance();
|
|
433
|
-
i0.ɵɵproperty("ngTemplateOutlet", !menuItem_r2.showChildren || !menuItem_r2.children || (menuItem_r2 == null ? null : menuItem_r2.children == null ? null : menuItem_r2.children.length) === 0 ? menuItemLink_r4 : itemWithChildren_r3)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c0$
|
|
433
|
+
i0.ɵɵproperty("ngTemplateOutlet", !menuItem_r2.showChildren || !menuItem_r2.children || (menuItem_r2 == null ? null : menuItem_r2.children == null ? null : menuItem_r2.children.length) === 0 ? menuItemLink_r4 : itemWithChildren_r3)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c0$3, menuItem_r2));
|
|
434
434
|
} }
|
|
435
435
|
function MenuItemListComponent_ng_template_4_ng_container_2_Template(rf, ctx) { if (rf & 1) {
|
|
436
436
|
i0.ɵɵelementContainerStart(0);
|
|
@@ -470,11 +470,11 @@ function MenuItemListComponent_ng_template_4_ng_container_4_menu_item_list_1_Tem
|
|
|
470
470
|
} if (rf & 2) {
|
|
471
471
|
const menuItem_r6 = i0.ɵɵnextContext(2).menuItem;
|
|
472
472
|
const ctx_r0 = i0.ɵɵnextContext();
|
|
473
|
-
i0.ɵɵproperty("items", menuItem_r6.children)("direction", ctx_r0.direction)("labelsVisible", ctx_r0.labelsVisible)("activeItem", ctx_r0.activeItem);
|
|
473
|
+
i0.ɵɵproperty("ngClass.lt-md", "mobile-child-list")("items", menuItem_r6.children)("direction", ctx_r0.direction)("labelsVisible", ctx_r0.labelsVisible)("activeItem", ctx_r0.activeItem);
|
|
474
474
|
} }
|
|
475
475
|
function MenuItemListComponent_ng_template_4_ng_container_4_Template(rf, ctx) { if (rf & 1) {
|
|
476
476
|
i0.ɵɵelementContainerStart(0);
|
|
477
|
-
i0.ɵɵtemplate(1, MenuItemListComponent_ng_template_4_ng_container_4_menu_item_list_1_Template, 1,
|
|
477
|
+
i0.ɵɵtemplate(1, MenuItemListComponent_ng_template_4_ng_container_4_menu_item_list_1_Template, 1, 5, "menu-item-list", 15);
|
|
478
478
|
i0.ɵɵelementContainerEnd();
|
|
479
479
|
} if (rf & 2) {
|
|
480
480
|
const menuItem_r6 = i0.ɵɵnextContext().menuItem;
|
|
@@ -493,7 +493,8 @@ function MenuItemListComponent_ng_template_4_Template(rf, ctx) { if (rf & 1) {
|
|
|
493
493
|
const menuItem_r6 = ctx.menuItem;
|
|
494
494
|
const ctx_r0 = i0.ɵɵnextContext();
|
|
495
495
|
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);
|
|
496
|
-
i0.ɵɵproperty("ngClass.lt-md", "mob-menu-item")("fxLayout", ctx_r0.menuItemLayout)("matTooltip", !ctx_r0.labelsVisible ? i0.ɵɵpipeBind1(1,
|
|
496
|
+
i0.ɵɵproperty("ngClass.lt-md", "mob-menu-item")("fxLayout", ctx_r0.menuItemLayout)("matTooltip", !ctx_r0.labelsVisible ? i0.ɵɵpipeBind1(1, 12, menuItem_r6.title) : "")("fxLayoutAlign", ctx_r0.menuLayoutDirection);
|
|
497
|
+
i0.ɵɵattribute("id", menuItem_r6.customId);
|
|
497
498
|
i0.ɵɵadvance(2);
|
|
498
499
|
i0.ɵɵproperty("ngIf", ctx_r0.showIcons && menuItem_r6.icon);
|
|
499
500
|
i0.ɵɵadvance();
|
|
@@ -538,13 +539,13 @@ class MenuItemListComponent {
|
|
|
538
539
|
this.toggleExpand.next(menuItem);
|
|
539
540
|
}
|
|
540
541
|
static { this.ɵfac = function MenuItemListComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MenuItemListComponent)(); }; }
|
|
541
|
-
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: 8, vars: 3, consts: [["itemWithChildren", ""], ["menuItemLink", ""], [1, "menu-list-wrapper"], ["fxLayoutAlign", "start center", "class", "menu-item-list-title", 4, "ngIf"], ["fxLayout", "column", 1, "menu-item-list", 3, "fxLayoutAlign"], [4, "ngFor", "ngForOf"], ["fxLayoutAlign", "start center", 1, "menu-item-list-title"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], ["matTooltipPosition", "after", "matTooltipClass", "menu-tooltip", "fxLayoutGap", "0.375rem", 1, "text-m", "menu-item", 3, "click", "ngClass.lt-md", "fxLayout", "matTooltip", "fxLayoutAlign"], [4, "ngIf"], [3, "menuItem"], [1, "menu-item-title"], [1, "title-content"], ["class", "material-icons", 4, "ngIf"], [1, "material-icons"], ["class", "child-list", 3, "items", "direction", "labelsVisible", "activeItem", 4, "ngIf"], [1, "child-list", 3, "items", "direction", "labelsVisible", "activeItem"], [3, "ngClass.lt-md", "menuItem", "direction", "labelsVisible", "activeItem", "showIcons"]], template: function MenuItemListComponent_Template(rf, ctx) { if (rf & 1) {
|
|
542
|
+
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: 8, vars: 3, consts: [["itemWithChildren", ""], ["menuItemLink", ""], [1, "menu-list-wrapper"], ["fxLayoutAlign", "start center", "class", "menu-item-list-title", 4, "ngIf"], ["fxLayout", "column", 1, "menu-item-list", 3, "fxLayoutAlign"], [4, "ngFor", "ngForOf"], ["fxLayoutAlign", "start center", 1, "menu-item-list-title"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], ["matTooltipPosition", "after", "matTooltipClass", "menu-tooltip", "fxLayoutGap", "0.375rem", 1, "text-m", "menu-item", 3, "click", "ngClass.lt-md", "fxLayout", "matTooltip", "fxLayoutAlign"], [4, "ngIf"], [3, "menuItem"], [1, "menu-item-title"], [1, "title-content"], ["class", "material-icons", 4, "ngIf"], [1, "material-icons"], ["class", "child-list", 3, "ngClass.lt-md", "items", "direction", "labelsVisible", "activeItem", 4, "ngIf"], [1, "child-list", 3, "ngClass.lt-md", "items", "direction", "labelsVisible", "activeItem"], [3, "ngClass.lt-md", "menuItem", "direction", "labelsVisible", "activeItem", "showIcons"]], template: function MenuItemListComponent_Template(rf, ctx) { if (rf & 1) {
|
|
542
543
|
i0.ɵɵelementStart(0, "div", 2);
|
|
543
544
|
i0.ɵɵtemplate(1, MenuItemListComponent_div_1_Template, 3, 3, "div", 3);
|
|
544
545
|
i0.ɵɵelementStart(2, "div", 4);
|
|
545
546
|
i0.ɵɵtemplate(3, MenuItemListComponent_ng_container_3_Template, 2, 4, "ng-container", 5);
|
|
546
547
|
i0.ɵɵelementEnd()();
|
|
547
|
-
i0.ɵɵtemplate(4, MenuItemListComponent_ng_template_4_Template, 5,
|
|
548
|
+
i0.ɵɵtemplate(4, MenuItemListComponent_ng_template_4_Template, 5, 14, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor)(6, MenuItemListComponent_ng_template_6_Template, 1, 6, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor);
|
|
548
549
|
} if (rf & 2) {
|
|
549
550
|
i0.ɵɵadvance();
|
|
550
551
|
i0.ɵɵproperty("ngIf", ctx.titleKey && ctx.showTitle && ctx.labelsVisible);
|
|
@@ -556,7 +557,7 @@ class MenuItemListComponent {
|
|
|
556
557
|
}
|
|
557
558
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuItemListComponent, [{
|
|
558
559
|
type: Component,
|
|
559
|
-
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 [ngClass.lt-md]=\"'mob-menu-item'\" [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 .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{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{margin-top:16px}\n"] }]
|
|
560
|
+
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 [attr.id]=\"menuItem.customId\" [ngClass.lt-md]=\"'mob-menu-item'\" [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 [ngClass.lt-md]=\"'mobile-child-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 .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{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{margin-top:16px}\n"] }]
|
|
560
561
|
}], null, { direction: [{
|
|
561
562
|
type: Input
|
|
562
563
|
}], labelsVisible: [{
|
|
@@ -668,6 +669,8 @@ class MenuColumnsComponent {
|
|
|
668
669
|
}] }); })();
|
|
669
670
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MenuColumnsComponent, { className: "MenuColumnsComponent", filePath: "lib\\components\\menu-columns\\menu-columns.component.ts", lineNumber: 16 }); })();
|
|
670
671
|
|
|
672
|
+
const _forTrack0 = ($index, $item) => $item.label;
|
|
673
|
+
const _c0$2 = (a0, a1, a2, a3) => ({ icon: a0, isIconCustom: a1, isIconOutlined: a2, label: a3 });
|
|
671
674
|
function SideNavMenuComponent_a_3_Template(rf, ctx) { if (rf & 1) {
|
|
672
675
|
const _r2 = i0.ɵɵgetCurrentView();
|
|
673
676
|
i0.ɵɵelementStart(0, "a", 13);
|
|
@@ -703,7 +706,7 @@ function SideNavMenuComponent_button_10_ng_container_4_Template(rf, ctx) { if (r
|
|
|
703
706
|
i0.ɵɵelementStart(1, "span", 18);
|
|
704
707
|
i0.ɵɵtext(2);
|
|
705
708
|
i0.ɵɵelementEnd();
|
|
706
|
-
i0.ɵɵtemplate(3, SideNavMenuComponent_button_10_ng_container_4_mat_icon_3_Template, 2, 1, "mat-icon", 19)(4, SideNavMenuComponent_button_10_ng_container_4_ng_template_4_Template, 2, 1, "ng-template", null,
|
|
709
|
+
i0.ɵɵtemplate(3, SideNavMenuComponent_button_10_ng_container_4_mat_icon_3_Template, 2, 1, "mat-icon", 19)(4, SideNavMenuComponent_button_10_ng_container_4_ng_template_4_Template, 2, 1, "ng-template", null, 3, i0.ɵɵtemplateRefExtractor);
|
|
707
710
|
i0.ɵɵelementContainerEnd();
|
|
708
711
|
} if (rf & 2) {
|
|
709
712
|
const iconDown_r4 = i0.ɵɵreference(5);
|
|
@@ -716,7 +719,7 @@ function SideNavMenuComponent_button_10_ng_container_4_Template(rf, ctx) { if (r
|
|
|
716
719
|
i0.ɵɵproperty("ngIf", state_r5.menuOpen)("ngIfElse", iconDown_r4);
|
|
717
720
|
} }
|
|
718
721
|
function SideNavMenuComponent_button_10_Template(rf, ctx) { if (rf & 1) {
|
|
719
|
-
i0.ɵɵelementStart(0, "button", 15,
|
|
722
|
+
i0.ɵɵelementStart(0, "button", 15, 2)(2, "div", 16);
|
|
720
723
|
i0.ɵɵtext(3);
|
|
721
724
|
i0.ɵɵelementEnd();
|
|
722
725
|
i0.ɵɵtemplate(4, SideNavMenuComponent_button_10_ng_container_4_Template, 6, 3, "ng-container", 17);
|
|
@@ -730,42 +733,98 @@ function SideNavMenuComponent_button_10_Template(rf, ctx) { if (rf & 1) {
|
|
|
730
733
|
i0.ɵɵadvance();
|
|
731
734
|
i0.ɵɵproperty("ngIf", !ctx_r2.collapsed);
|
|
732
735
|
} }
|
|
733
|
-
function
|
|
734
|
-
i0.ɵɵ
|
|
735
|
-
|
|
736
|
+
function SideNavMenuComponent_For_14_Conditional_0_Conditional_0_ng_container_1_Template(rf, ctx) { if (rf & 1) {
|
|
737
|
+
i0.ɵɵelementContainer(0);
|
|
738
|
+
} }
|
|
739
|
+
function SideNavMenuComponent_For_14_Conditional_0_Conditional_0_Template(rf, ctx) { if (rf & 1) {
|
|
740
|
+
i0.ɵɵelementStart(0, "a", 22);
|
|
741
|
+
i0.ɵɵtemplate(1, SideNavMenuComponent_For_14_Conditional_0_Conditional_0_ng_container_1_Template, 1, 0, "ng-container", 24);
|
|
736
742
|
i0.ɵɵelementEnd();
|
|
737
743
|
} if (rf & 2) {
|
|
738
|
-
const
|
|
739
|
-
i0.ɵɵ
|
|
744
|
+
const item_r7 = i0.ɵɵnextContext(2).$implicit;
|
|
745
|
+
i0.ɵɵnextContext();
|
|
746
|
+
const profileMenuItem_r8 = i0.ɵɵreference(16);
|
|
747
|
+
i0.ɵɵproperty("href", item_r7.href, i0.ɵɵsanitizeUrl);
|
|
740
748
|
i0.ɵɵadvance();
|
|
741
|
-
i0.ɵɵ
|
|
749
|
+
i0.ɵɵproperty("ngTemplateOutlet", profileMenuItem_r8)("ngTemplateOutletContext", i0.ɵɵpureFunction4(3, _c0$2, item_r7.icon, item_r7.isIconCustom, item_r7.isIconOutlined, item_r7.label));
|
|
742
750
|
} }
|
|
743
|
-
function
|
|
744
|
-
i0.ɵɵ
|
|
751
|
+
function SideNavMenuComponent_For_14_Conditional_0_Conditional_1_ng_container_1_Template(rf, ctx) { if (rf & 1) {
|
|
752
|
+
i0.ɵɵelementContainer(0);
|
|
753
|
+
} }
|
|
754
|
+
function SideNavMenuComponent_For_14_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
755
|
+
i0.ɵɵelementStart(0, "a", 23);
|
|
756
|
+
i0.ɵɵtemplate(1, SideNavMenuComponent_For_14_Conditional_0_Conditional_1_ng_container_1_Template, 1, 0, "ng-container", 24);
|
|
757
|
+
i0.ɵɵelementEnd();
|
|
745
758
|
} if (rf & 2) {
|
|
746
|
-
const
|
|
747
|
-
i0.ɵɵ
|
|
759
|
+
const item_r7 = i0.ɵɵnextContext(2).$implicit;
|
|
760
|
+
i0.ɵɵnextContext();
|
|
761
|
+
const profileMenuItem_r8 = i0.ɵɵreference(16);
|
|
762
|
+
i0.ɵɵproperty("routerLink", item_r7.href);
|
|
763
|
+
i0.ɵɵadvance();
|
|
764
|
+
i0.ɵɵproperty("ngTemplateOutlet", profileMenuItem_r8)("ngTemplateOutletContext", i0.ɵɵpureFunction4(3, _c0$2, item_r7.icon, item_r7.isIconCustom, item_r7.isIconOutlined, item_r7.label));
|
|
748
765
|
} }
|
|
749
|
-
function
|
|
750
|
-
i0.ɵɵtemplate(0,
|
|
766
|
+
function SideNavMenuComponent_For_14_Conditional_0_Template(rf, ctx) { if (rf & 1) {
|
|
767
|
+
i0.ɵɵtemplate(0, SideNavMenuComponent_For_14_Conditional_0_Conditional_0_Template, 2, 8, "a", 22)(1, SideNavMenuComponent_For_14_Conditional_0_Conditional_1_Template, 2, 8, "a", 23);
|
|
751
768
|
} if (rf & 2) {
|
|
752
|
-
const
|
|
753
|
-
i0.ɵɵconditional(
|
|
769
|
+
const item_r7 = i0.ɵɵnextContext().$implicit;
|
|
770
|
+
i0.ɵɵconditional(item_r7.openInNewTab ? 0 : 1);
|
|
754
771
|
} }
|
|
755
|
-
function
|
|
756
|
-
|
|
757
|
-
|
|
758
|
-
|
|
759
|
-
i0.ɵɵ
|
|
760
|
-
i0.ɵɵ
|
|
761
|
-
i0.ɵɵ
|
|
772
|
+
function SideNavMenuComponent_For_14_Conditional_1_ng_container_1_Template(rf, ctx) { if (rf & 1) {
|
|
773
|
+
i0.ɵɵelementContainer(0);
|
|
774
|
+
} }
|
|
775
|
+
function SideNavMenuComponent_For_14_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
776
|
+
const _r9 = i0.ɵɵgetCurrentView();
|
|
777
|
+
i0.ɵɵelementStart(0, "button", 25);
|
|
778
|
+
i0.ɵɵlistener("click", function SideNavMenuComponent_For_14_Conditional_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r9); const item_r7 = i0.ɵɵnextContext().$implicit; return i0.ɵɵresetView(item_r7 == null ? null : item_r7.callback()); });
|
|
779
|
+
i0.ɵɵtemplate(1, SideNavMenuComponent_For_14_Conditional_1_ng_container_1_Template, 1, 0, "ng-container", 24);
|
|
762
780
|
i0.ɵɵelementEnd();
|
|
763
781
|
} if (rf & 2) {
|
|
764
|
-
const
|
|
782
|
+
const item_r7 = i0.ɵɵnextContext().$implicit;
|
|
783
|
+
i0.ɵɵnextContext();
|
|
784
|
+
const profileMenuItem_r8 = i0.ɵɵreference(16);
|
|
765
785
|
i0.ɵɵadvance();
|
|
766
|
-
i0.ɵɵ
|
|
786
|
+
i0.ɵɵproperty("ngTemplateOutlet", profileMenuItem_r8)("ngTemplateOutletContext", i0.ɵɵpureFunction4(2, _c0$2, item_r7.icon, item_r7.isIconCustom, item_r7.isIconOutlined, item_r7.label));
|
|
787
|
+
} }
|
|
788
|
+
function SideNavMenuComponent_For_14_Template(rf, ctx) { if (rf & 1) {
|
|
789
|
+
i0.ɵɵtemplate(0, SideNavMenuComponent_For_14_Conditional_0_Template, 2, 1)(1, SideNavMenuComponent_For_14_Conditional_1_Template, 2, 7, "button", 21);
|
|
790
|
+
} if (rf & 2) {
|
|
791
|
+
const item_r7 = ctx.$implicit;
|
|
792
|
+
i0.ɵɵconditional(item_r7.isLink ? 0 : 1);
|
|
793
|
+
} }
|
|
794
|
+
function SideNavMenuComponent_ng_template_15_Conditional_0_Conditional_0_Template(rf, ctx) { if (rf & 1) {
|
|
795
|
+
i0.ɵɵelementStart(0, "span", 28);
|
|
796
|
+
i0.ɵɵtext(1);
|
|
797
|
+
i0.ɵɵelementEnd();
|
|
798
|
+
} if (rf & 2) {
|
|
799
|
+
const ctx_r9 = i0.ɵɵnextContext(2);
|
|
800
|
+
const icon_r11 = ctx_r9.icon;
|
|
801
|
+
const isIconOutlined_r12 = ctx_r9.isIconOutlined;
|
|
802
|
+
i0.ɵɵclassProp("material-icons-outlined", isIconOutlined_r12);
|
|
767
803
|
i0.ɵɵadvance();
|
|
768
|
-
i0.ɵɵtextInterpolate1(" ",
|
|
804
|
+
i0.ɵɵtextInterpolate1(" ", icon_r11, " ");
|
|
805
|
+
} }
|
|
806
|
+
function SideNavMenuComponent_ng_template_15_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
807
|
+
i0.ɵɵelement(0, "mat-icon", 27);
|
|
808
|
+
} if (rf & 2) {
|
|
809
|
+
const icon_r11 = i0.ɵɵnextContext(2).icon;
|
|
810
|
+
i0.ɵɵproperty("svgIcon", icon_r11);
|
|
811
|
+
} }
|
|
812
|
+
function SideNavMenuComponent_ng_template_15_Conditional_0_Template(rf, ctx) { if (rf & 1) {
|
|
813
|
+
i0.ɵɵtemplate(0, SideNavMenuComponent_ng_template_15_Conditional_0_Conditional_0_Template, 2, 3, "span", 26)(1, SideNavMenuComponent_ng_template_15_Conditional_0_Conditional_1_Template, 1, 1, "mat-icon", 27);
|
|
814
|
+
} if (rf & 2) {
|
|
815
|
+
const isIconCustom_r13 = i0.ɵɵnextContext().isIconCustom;
|
|
816
|
+
i0.ɵɵconditional(!isIconCustom_r13 ? 0 : 1);
|
|
817
|
+
} }
|
|
818
|
+
function SideNavMenuComponent_ng_template_15_Template(rf, ctx) { if (rf & 1) {
|
|
819
|
+
i0.ɵɵtemplate(0, SideNavMenuComponent_ng_template_15_Conditional_0_Template, 2, 1);
|
|
820
|
+
i0.ɵɵtext(1);
|
|
821
|
+
i0.ɵɵpipe(2, "translate");
|
|
822
|
+
} if (rf & 2) {
|
|
823
|
+
const icon_r11 = ctx.icon;
|
|
824
|
+
const label_r14 = ctx.label;
|
|
825
|
+
i0.ɵɵconditional(icon_r11 ? 0 : -1);
|
|
826
|
+
i0.ɵɵadvance();
|
|
827
|
+
i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(2, 2, label_r14), "\n");
|
|
769
828
|
} }
|
|
770
829
|
class SideNavMenuComponent extends NavBaseComponent {
|
|
771
830
|
#username;
|
|
@@ -853,23 +912,25 @@ class SideNavMenuComponent extends NavBaseComponent {
|
|
|
853
912
|
this.userInitials = splittedUsername[0][0] + splittedUsername[1][0];
|
|
854
913
|
}
|
|
855
914
|
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)); }; }
|
|
856
|
-
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SideNavMenuComponent, selectors: [["lib-side-nav-menu"]], inputs: { username: "username", menuSettings: "menuSettings" }, features: [i0.ɵɵInheritDefinitionFeature], decls:
|
|
915
|
+
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SideNavMenuComponent, selectors: [["lib-side-nav-menu"]], inputs: { username: "username", menuSettings: "menuSettings" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 17, vars: 15, consts: [["menu", "matMenu"], ["profileMenuItem", ""], ["state", "matMenuTrigger"], ["iconDown", ""], ["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"], [1, "profile-menu"], ["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"], [4, "ngIf"], [1, "profile-name"], ["class", "spin", 4, "ngIf", "ngIfElse"], [1, "spin"], ["mat-menu-item", "", 1, "profile-option"], ["target", "_blank", 1, "mat-mdc-menu-item", 3, "href"], [1, "mat-mdc-menu-item", 3, "routerLink"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], ["mat-menu-item", "", 1, "profile-option", 3, "click"], [1, "material-icons", "profile-option-icon", 3, "material-icons-outlined"], [1, "profile-option-icon", 3, "svgIcon"], [1, "material-icons", "profile-option-icon"]], template: function SideNavMenuComponent_Template(rf, ctx) { if (rf & 1) {
|
|
857
916
|
const _r1 = i0.ɵɵgetCurrentView();
|
|
858
|
-
i0.ɵɵelementStart(0, "div",
|
|
859
|
-
i0.ɵɵtemplate(3, SideNavMenuComponent_a_3_Template, 3, 6, "a",
|
|
860
|
-
i0.ɵɵelementStart(4, "button",
|
|
917
|
+
i0.ɵɵelementStart(0, "div", 4)(1, "div", 5)(2, "div", 6);
|
|
918
|
+
i0.ɵɵtemplate(3, SideNavMenuComponent_a_3_Template, 3, 6, "a", 7);
|
|
919
|
+
i0.ɵɵelementStart(4, "button", 8);
|
|
861
920
|
i0.ɵɵpipe(5, "translate");
|
|
862
921
|
i0.ɵɵlistener("click", function SideNavMenuComponent_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.toggleCollapse()); });
|
|
863
922
|
i0.ɵɵelementStart(6, "mat-icon");
|
|
864
923
|
i0.ɵɵtext(7);
|
|
865
924
|
i0.ɵɵelementEnd()()();
|
|
866
|
-
i0.ɵɵelementStart(8, "div",
|
|
925
|
+
i0.ɵɵelementStart(8, "div", 9)(9, "menu-columns", 10);
|
|
867
926
|
i0.ɵɵlistener("toggleCollapseEvent", function SideNavMenuComponent_Template_menu_columns_toggleCollapseEvent_9_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.toggleCollapse()); });
|
|
868
927
|
i0.ɵɵelementEnd()();
|
|
869
|
-
i0.ɵɵtemplate(10, SideNavMenuComponent_button_10_Template, 5, 3, "button",
|
|
870
|
-
i0.ɵɵelementStart(11, "mat-menu",
|
|
871
|
-
i0.ɵɵ
|
|
872
|
-
i0.ɵɵelementEnd()()
|
|
928
|
+
i0.ɵɵtemplate(10, SideNavMenuComponent_button_10_Template, 5, 3, "button", 11);
|
|
929
|
+
i0.ɵɵelementStart(11, "mat-menu", 12, 0);
|
|
930
|
+
i0.ɵɵrepeaterCreate(13, SideNavMenuComponent_For_14_Template, 2, 1, null, null, _forTrack0);
|
|
931
|
+
i0.ɵɵelementEnd()();
|
|
932
|
+
i0.ɵɵtemplate(15, SideNavMenuComponent_ng_template_15_Template, 3, 4, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor);
|
|
933
|
+
i0.ɵɵelementEnd();
|
|
873
934
|
} if (rf & 2) {
|
|
874
935
|
i0.ɵɵstyleProp("width", ctx.sideNavWidth);
|
|
875
936
|
i0.ɵɵclassProp("collapsed", ctx.collapsed);
|
|
@@ -879,7 +940,7 @@ class SideNavMenuComponent extends NavBaseComponent {
|
|
|
879
940
|
i0.ɵɵproperty("ngIf", !ctx.collapsed);
|
|
880
941
|
i0.ɵɵadvance();
|
|
881
942
|
i0.ɵɵproperty("libPlausibleEvent", ctx.collapsed ? ctx.EXPAND_PLAUSIBLE_EVENT : ctx.COLLAPSE_PLAUSIBLE_EVENT);
|
|
882
|
-
i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(5,
|
|
943
|
+
i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(5, 13, "ARIA_LABELS.MENU_TOGGLER"));
|
|
883
944
|
i0.ɵɵadvance(3);
|
|
884
945
|
i0.ɵɵtextInterpolate(ctx.collapsed ? "keyboard_double_arrow_right" : "keyboard_double_arrow_left");
|
|
885
946
|
i0.ɵɵadvance(2);
|
|
@@ -887,12 +948,12 @@ class SideNavMenuComponent extends NavBaseComponent {
|
|
|
887
948
|
i0.ɵɵadvance();
|
|
888
949
|
i0.ɵɵproperty("ngIf", ctx.userInitials);
|
|
889
950
|
i0.ɵɵadvance(3);
|
|
890
|
-
i0.ɵɵ
|
|
891
|
-
} }, dependencies: [i2$2.DefaultLayoutDirective, i2$2.DefaultLayoutAlignDirective, i2$2.FlexFillDirective, i2$2.DefaultFlexDirective,
|
|
951
|
+
i0.ɵɵrepeater(ctx.menuSettings.userOptions);
|
|
952
|
+
} }, dependencies: [i2$2.DefaultLayoutDirective, i2$2.DefaultLayoutAlignDirective, i2$2.FlexFillDirective, i2$2.DefaultFlexDirective, i1$1.RouterLink, i3.NgIf, i3.NgTemplateOutlet, i2$1.MatIcon, i8$1.MatIconButton, i9.MatMenu, i9.MatMenuItem, i9.MatMenuTrigger, i2.PlausibleEventDirective, MenuColumnsComponent, i8.TranslatePipe], styles: [".menu-container[_ngcontent-%COMP%]{white-space:nowrap;height:100%;transition:width .2s ease;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;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%}.menu-container[_ngcontent-%COMP%] .profile-wrapper[_ngcontent-%COMP%]{background:none;color:var(--base-30);display:flex;align-items:center;justify-content:start;margin:32px 16px}.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%]{max-width:145px;overflow:hidden;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%] .child-list .menu-item{padding:8px 46px!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}.spin[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_spinArrow .3s forwards}[_nghost-%COMP%] button.collapse-btn .mat-mdc-button-persistent-ripple, [_nghost-%COMP%] button.toggler .mat-mdc-button-persistent-ripple{display:none} .mobile-child-list{margin-left:25px!important} .cdk-overlay-container .profile-menu{margin:10px 0!important} .mat-mdc-menu-item .mat-icon{margin-right:5px!important} .collapsed .profile-wrapper{justify-content:center!important} .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}@keyframes _ngcontent-%COMP%_spinArrow{to{transform:rotate(180deg)}}"] }); }
|
|
892
953
|
}
|
|
893
954
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SideNavMenuComponent, [{
|
|
894
955
|
type: Component,
|
|
895
|
-
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 [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>{{ 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\" #state=\"matMenuTrigger\" [matMenuTriggerFor]=\"menu\" class=\"profile-wrapper\">\r\n <div class=\"profile-icon\">\r\n {{userInitials}}\r\n </div>\r\n\r\n <ng-container *ngIf=\"!collapsed\">\r\n <span class=\"profile-name\">\r\n {{ username }}\r\n </span>\r\n \r\n <mat-icon *ngIf=\"state.menuOpen; else iconDown\" class=\"spin\">{{\"keyboard_arrow_down\"}}</mat-icon>\r\n\r\n <ng-template #iconDown>\r\n <mat-icon class=\"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
|
|
956
|
+
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 [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>{{ 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\" #state=\"matMenuTrigger\" [matMenuTriggerFor]=\"menu\" class=\"profile-wrapper\">\r\n <div class=\"profile-icon\">\r\n {{userInitials}}\r\n </div>\r\n\r\n <ng-container *ngIf=\"!collapsed\">\r\n <span class=\"profile-name\">\r\n {{ username }}\r\n </span>\r\n \r\n <mat-icon *ngIf=\"state.menuOpen; else iconDown\" class=\"spin\">{{\"keyboard_arrow_down\"}}</mat-icon>\r\n\r\n <ng-template #iconDown>\r\n <mat-icon class=\"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 menuSettings.userOptions; track item.label) {\r\n @if (item.isLink) {\r\n @if (item.openInNewTab) {\r\n <a class=\"mat-mdc-menu-item\" [href]=\"item.href\" target=\"_blank\">\r\n <ng-container\r\n *ngTemplateOutlet=\"profileMenuItem; context: { icon: item.icon, isIconCustom: item.isIconCustom, isIconOutlined: item.isIconOutlined, label: item.label }\">\r\n </ng-container>\r\n </a>\r\n } @else {\r\n <a class=\"mat-mdc-menu-item\" [routerLink]=\"item.href\">\r\n <ng-container\r\n *ngTemplateOutlet=\"profileMenuItem; context: { icon: item.icon, isIconCustom: item.isIconCustom, isIconOutlined: item.isIconOutlined, 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?.callback()\"\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"profileMenuItem; context: { icon: item.icon, isIconCustom: item.isIconCustom, isIconOutlined: item.isIconOutlined, 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-isIconCustom=\"isIconCustom\" let-isIconOutlined=\"isIconOutlined\" let-label=\"label\">\r\n @if (icon) {\r\n @if (!isIconCustom) {\r\n <span class=\"material-icons profile-option-icon\" [class.material-icons-outlined]=\"isIconOutlined\">\r\n {{icon}}\r\n </span>\r\n } @else {\r\n <mat-icon class=\"profile-option-icon\" [svgIcon]=\"icon\"></mat-icon>\r\n }\r\n }\r\n {{ label | translate }}\r\n</ng-template>", styles: [".menu-container{white-space:nowrap;height:100%;transition:width .2s ease;min-height:100vh;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%}.menu-container .profile-wrapper{background:none;color:var(--base-30);display:flex;align-items:center;justify-content:start;margin:32px 16px}.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{max-width:145px;overflow:hidden;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 .child-list .menu-item{padding:8px 46px!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}.spin{animation:spinArrow .3s forwards}: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 .mobile-child-list{margin-left:25px!important}::ng-deep .cdk-overlay-container .profile-menu{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}::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}@keyframes spinArrow{to{transform:rotate(180deg)}}\n"] }]
|
|
896
957
|
}], () => [{ type: i1.StrapiLinkService }, { type: i2.DOMService }, { type: MenuItemsService }, { type: undefined, decorators: [{
|
|
897
958
|
type: Optional
|
|
898
959
|
}, {
|
|
@@ -1076,7 +1137,7 @@ class MenuItemIconComponent {
|
|
|
1076
1137
|
i0.ɵɵproperty("hasBackdrop", true);
|
|
1077
1138
|
i0.ɵɵadvance(2);
|
|
1078
1139
|
i0.ɵɵproperty("menuDialogSettings", ctx.menuDialogSettings)("direction", ctx.direction);
|
|
1079
|
-
} }, dependencies: [i2$2.DefaultLayoutDirective, i2$2.DefaultLayoutGapDirective, i2$2.DefaultLayoutAlignDirective, i2$2.DefaultFlexOrderDirective, i3.NgIf, i2$1.MatIcon,
|
|
1140
|
+
} }, dependencies: [i2$2.DefaultLayoutDirective, i2$2.DefaultLayoutGapDirective, i2$2.DefaultLayoutAlignDirective, i2$2.DefaultFlexOrderDirective, i3.NgIf, i2$1.MatIcon, i8$1.MatButton, i9.MatMenu, i9.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}"] }); }
|
|
1080
1141
|
}
|
|
1081
1142
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuItemIconComponent, [{
|
|
1082
1143
|
type: Component,
|