@tilde-nlp/ngx-menu 6.1.16 → 6.1.18
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.
|
@@ -12,15 +12,15 @@ import * as i4$1 from '@ngbracket/ngx-layout/flex';
|
|
|
12
12
|
import * as i5 from '@ngbracket/ngx-layout/extended';
|
|
13
13
|
import * as i4 from '@angular/common';
|
|
14
14
|
import { CommonModule } from '@angular/common';
|
|
15
|
+
import * as i5$1 from '@angular/material/tooltip';
|
|
16
|
+
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
15
17
|
import * as i2$1 from '@angular/material/icon';
|
|
16
18
|
import { MatIconModule } from '@angular/material/icon';
|
|
17
19
|
import * as i7 from '@angular/material/button';
|
|
18
20
|
import { MatButtonModule } from '@angular/material/button';
|
|
19
|
-
import * as
|
|
21
|
+
import * as i11 from '@angular/material/menu';
|
|
20
22
|
import { MatMenuModule } from '@angular/material/menu';
|
|
21
23
|
import * as i4$2 from '@angular/material/divider';
|
|
22
|
-
import * as i5$1 from '@angular/material/tooltip';
|
|
23
|
-
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
24
24
|
import * as i8 from '@ngx-translate/core';
|
|
25
25
|
import { TranslateModule } from '@ngx-translate/core';
|
|
26
26
|
import { FlexLayoutModule } from '@ngbracket/ngx-layout';
|
|
@@ -574,11 +574,11 @@ class MenuItemListComponent {
|
|
|
574
574
|
i0.ɵɵproperty("fxLayoutAlign", ctx.menuLayoutDirection);
|
|
575
575
|
i0.ɵɵadvance();
|
|
576
576
|
i0.ɵɵproperty("ngForOf", ctx.items);
|
|
577
|
-
} }, dependencies: [i4$1.DefaultLayoutDirective, i4$1.DefaultLayoutGapDirective, i4$1.DefaultLayoutAlignDirective, i5.DefaultClassDirective, i1$1.RouterLink, i4.NgForOf, i4.NgIf, i4.NgTemplateOutlet, i5$1.MatTooltip, i2$1.MatIcon, i7.MatIconButton, 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 .menu-item{cursor:pointer;font-style:normal;color:var(--base-30);text-decoration:none;align-items:center!important;font-weight:400;background:none;border:none}[_nghost-%COMP%] .menu-list-wrapper .menu-item:not(button):not(.active-menu-item):hover{background-color:var(--base-70)!important}[_nghost-%COMP%] .menu-list-wrapper .menu-item.active-menu-item, [_nghost-%COMP%] .menu-list-wrapper .menu-item.active-menu-item mat-icon, [_nghost-%COMP%] .menu-list-wrapper .menu-item.active-menu-item:hover{font-weight:600}[_nghost-%COMP%] .menu-list-wrapper .menu-item span{display:inline-block}[_nghost-%COMP%] .menu-list-wrapper .menu-item .menu-item-title{display:flex;flex-direction:row;align-items:start;width:100%}[_nghost-%COMP%] .menu-list-wrapper .menu-item .menu-item-title .title-content{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}.menu-item-list-title[_ngcontent-%COMP%]{padding:8px 0 24px;font-size:16px;font-weight:600;overflow:hidden;text-overflow:ellipsis;margin-left:20px;height:56px}.menu-item-list[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_slide-in .3s forwards}.menu-title-btn[_ngcontent-%COMP%]{
|
|
577
|
+
} }, dependencies: [i4$1.DefaultLayoutDirective, i4$1.DefaultLayoutGapDirective, i4$1.DefaultLayoutAlignDirective, i5.DefaultClassDirective, i1$1.RouterLink, i4.NgForOf, i4.NgIf, i4.NgTemplateOutlet, i5$1.MatTooltip, i2$1.MatIcon, i7.MatIconButton, 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 .menu-item{cursor:pointer;font-style:normal;color:var(--base-30);text-decoration:none;align-items:center!important;font-weight:400;background:none;border:none}[_nghost-%COMP%] .menu-list-wrapper .menu-item:not(button):not(.active-menu-item):hover{background-color:var(--base-70)!important}[_nghost-%COMP%] .menu-list-wrapper .menu-item.active-menu-item, [_nghost-%COMP%] .menu-list-wrapper .menu-item.active-menu-item mat-icon, [_nghost-%COMP%] .menu-list-wrapper .menu-item.active-menu-item:hover{font-weight:600}[_nghost-%COMP%] .menu-list-wrapper .menu-item span{display:inline-block}[_nghost-%COMP%] .menu-list-wrapper .menu-item .menu-item-title{display:flex;flex-direction:row;align-items:start;width:100%}[_nghost-%COMP%] .menu-list-wrapper .menu-item .menu-item-title .title-content{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}.menu-item-list-title[_ngcontent-%COMP%]{padding:8px 0 24px;font-size:16px;font-weight:600;overflow:hidden;text-overflow:ellipsis;margin-left:20px;height:56px;transition:margin-left .3s}.menu-item-list-title[_ngcontent-%COMP%]:has(.menu-title-btn){margin-left:-24px}.menu-item-list[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_slide-in .3s forwards}.menu-title-btn[_ngcontent-%COMP%]{opacity:0;margin-right:2px;transition:opacity .3s}.menu-list-wrapper[_ngcontent-%COMP%]:hover .menu-title-btn[_ngcontent-%COMP%]{opacity:1}.menu-list-wrapper[_ngcontent-%COMP%]:hover .menu-item-list-title[_ngcontent-%COMP%]:has(.menu-title-btn){margin-left:0}@keyframes _ngcontent-%COMP%_slide-in{0%{opacity:0;margin-left:-100px}to{opacity:1;margin-left:0}}"] }); }
|
|
578
578
|
}
|
|
579
579
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuItemListComponent, [{
|
|
580
580
|
type: Component,
|
|
581
|
-
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 \r\n <button class=\"menu-title-btn\" *ngIf=\"menuItemGroup.titleNavigation\" mat-icon-button [routerLink]=\"menuItemGroup.titleNavigation.path\" [matTooltip]=\"menuItemGroup.titleNavigation.tooltip | translate\">\r\n <mat-icon>{{menuItemGroup.titleNavigation.icon}}</mat-icon>\r\n </button>\r\n\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 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}.menu-item-list-title{padding:8px 0 24px;font-size:16px;font-weight:600;overflow:hidden;text-overflow:ellipsis;margin-left:20px;height:56px}.menu-item-list{animation:slide-in .3s forwards}.menu-title-btn{
|
|
581
|
+
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 \r\n <button class=\"menu-title-btn\" *ngIf=\"menuItemGroup.titleNavigation\" mat-icon-button [routerLink]=\"menuItemGroup.titleNavigation.path\" [matTooltip]=\"menuItemGroup.titleNavigation.tooltip | translate\">\r\n <mat-icon>{{menuItemGroup.titleNavigation.icon}}</mat-icon>\r\n </button>\r\n\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 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}.menu-item-list-title{padding:8px 0 24px;font-size:16px;font-weight:600;overflow:hidden;text-overflow:ellipsis;margin-left:20px;height:56px;transition:margin-left .3s}.menu-item-list-title:has(.menu-title-btn){margin-left:-24px}.menu-item-list{animation:slide-in .3s forwards}.menu-title-btn{opacity:0;margin-right:2px;transition:opacity .3s}.menu-list-wrapper:hover .menu-title-btn{opacity:1}.menu-list-wrapper:hover .menu-item-list-title:has(.menu-title-btn){margin-left:0}@keyframes slide-in{0%{opacity:0;margin-left:-100px}to{opacity:1;margin-left:0}}\n"] }]
|
|
582
582
|
}], null, { direction: [{
|
|
583
583
|
type: Input
|
|
584
584
|
}], labelsVisible: [{
|
|
@@ -712,28 +712,28 @@ function SideNavMenuComponent_a_14_Template(rf, ctx) { if (rf & 1) {
|
|
|
712
712
|
i0.ɵɵadvance(2);
|
|
713
713
|
i0.ɵɵtextInterpolate1(" ", ctx_r2.productName, " ");
|
|
714
714
|
} }
|
|
715
|
-
function
|
|
716
|
-
i0.ɵɵelementStart(0, "mat-icon",
|
|
715
|
+
function SideNavMenuComponent_button_25_ng_container_4_mat_icon_3_Template(rf, ctx) { if (rf & 1) {
|
|
716
|
+
i0.ɵɵelementStart(0, "mat-icon", 26);
|
|
717
717
|
i0.ɵɵtext(1);
|
|
718
718
|
i0.ɵɵelementEnd();
|
|
719
719
|
} if (rf & 2) {
|
|
720
720
|
i0.ɵɵadvance();
|
|
721
721
|
i0.ɵɵtextInterpolate("keyboard_arrow_down");
|
|
722
722
|
} }
|
|
723
|
-
function
|
|
724
|
-
i0.ɵɵelementStart(0, "mat-icon",
|
|
723
|
+
function SideNavMenuComponent_button_25_ng_container_4_ng_template_4_Template(rf, ctx) { if (rf & 1) {
|
|
724
|
+
i0.ɵɵelementStart(0, "mat-icon", 26);
|
|
725
725
|
i0.ɵɵtext(1);
|
|
726
726
|
i0.ɵɵelementEnd();
|
|
727
727
|
} if (rf & 2) {
|
|
728
728
|
i0.ɵɵadvance();
|
|
729
729
|
i0.ɵɵtextInterpolate("keyboard_arrow_up");
|
|
730
730
|
} }
|
|
731
|
-
function
|
|
731
|
+
function SideNavMenuComponent_button_25_ng_container_4_Template(rf, ctx) { if (rf & 1) {
|
|
732
732
|
i0.ɵɵelementContainerStart(0);
|
|
733
|
-
i0.ɵɵelementStart(1, "span",
|
|
733
|
+
i0.ɵɵelementStart(1, "span", 24);
|
|
734
734
|
i0.ɵɵtext(2);
|
|
735
735
|
i0.ɵɵelementEnd();
|
|
736
|
-
i0.ɵɵtemplate(3,
|
|
736
|
+
i0.ɵɵtemplate(3, SideNavMenuComponent_button_25_ng_container_4_mat_icon_3_Template, 2, 1, "mat-icon", 25)(4, SideNavMenuComponent_button_25_ng_container_4_ng_template_4_Template, 2, 1, "ng-template", null, 3, i0.ɵɵtemplateRefExtractor);
|
|
737
737
|
i0.ɵɵelementContainerEnd();
|
|
738
738
|
} if (rf & 2) {
|
|
739
739
|
const iconDown_r4 = i0.ɵɵreference(5);
|
|
@@ -745,81 +745,81 @@ function SideNavMenuComponent_button_24_ng_container_4_Template(rf, ctx) { if (r
|
|
|
745
745
|
i0.ɵɵadvance();
|
|
746
746
|
i0.ɵɵproperty("ngIf", state_r5.menuOpen)("ngIfElse", iconDown_r4);
|
|
747
747
|
} }
|
|
748
|
-
function
|
|
749
|
-
i0.ɵɵelementStart(0, "button",
|
|
748
|
+
function SideNavMenuComponent_button_25_Template(rf, ctx) { if (rf & 1) {
|
|
749
|
+
i0.ɵɵelementStart(0, "button", 21, 2)(2, "div", 22);
|
|
750
750
|
i0.ɵɵtext(3);
|
|
751
751
|
i0.ɵɵelementEnd();
|
|
752
|
-
i0.ɵɵtemplate(4,
|
|
752
|
+
i0.ɵɵtemplate(4, SideNavMenuComponent_button_25_ng_container_4_Template, 6, 3, "ng-container", 23);
|
|
753
753
|
i0.ɵɵelementEnd();
|
|
754
754
|
} if (rf & 2) {
|
|
755
755
|
const ctx_r2 = i0.ɵɵnextContext();
|
|
756
|
-
const menu_r6 = i0.ɵɵreference(
|
|
756
|
+
const menu_r6 = i0.ɵɵreference(27);
|
|
757
757
|
i0.ɵɵproperty("matMenuTriggerFor", menu_r6);
|
|
758
758
|
i0.ɵɵadvance(3);
|
|
759
759
|
i0.ɵɵtextInterpolate1(" ", ctx_r2.userInitials, " ");
|
|
760
760
|
i0.ɵɵadvance();
|
|
761
761
|
i0.ɵɵproperty("ngIf", !ctx_r2.collapsed);
|
|
762
762
|
} }
|
|
763
|
-
function
|
|
763
|
+
function SideNavMenuComponent_For_29_Conditional_0_Conditional_0_ng_container_1_Template(rf, ctx) { if (rf & 1) {
|
|
764
764
|
i0.ɵɵelementContainer(0);
|
|
765
765
|
} }
|
|
766
|
-
function
|
|
767
|
-
i0.ɵɵelementStart(0, "a",
|
|
768
|
-
i0.ɵɵtemplate(1,
|
|
766
|
+
function SideNavMenuComponent_For_29_Conditional_0_Conditional_0_Template(rf, ctx) { if (rf & 1) {
|
|
767
|
+
i0.ɵɵelementStart(0, "a", 28);
|
|
768
|
+
i0.ɵɵtemplate(1, SideNavMenuComponent_For_29_Conditional_0_Conditional_0_ng_container_1_Template, 1, 0, "ng-container", 30);
|
|
769
769
|
i0.ɵɵelementEnd();
|
|
770
770
|
} if (rf & 2) {
|
|
771
771
|
const item_r7 = i0.ɵɵnextContext(2).$implicit;
|
|
772
772
|
i0.ɵɵnextContext();
|
|
773
|
-
const profileMenuItem_r8 = i0.ɵɵreference(
|
|
773
|
+
const profileMenuItem_r8 = i0.ɵɵreference(31);
|
|
774
774
|
i0.ɵɵproperty("href", item_r7.link.href, i0.ɵɵsanitizeUrl);
|
|
775
775
|
i0.ɵɵadvance();
|
|
776
776
|
i0.ɵɵproperty("ngTemplateOutlet", profileMenuItem_r8)("ngTemplateOutletContext", i0.ɵɵpureFunction2(3, _c0, item_r7.icon, item_r7.label));
|
|
777
777
|
} }
|
|
778
|
-
function
|
|
778
|
+
function SideNavMenuComponent_For_29_Conditional_0_Conditional_1_ng_container_1_Template(rf, ctx) { if (rf & 1) {
|
|
779
779
|
i0.ɵɵelementContainer(0);
|
|
780
780
|
} }
|
|
781
|
-
function
|
|
782
|
-
i0.ɵɵelementStart(0, "a",
|
|
783
|
-
i0.ɵɵtemplate(1,
|
|
781
|
+
function SideNavMenuComponent_For_29_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
782
|
+
i0.ɵɵelementStart(0, "a", 29);
|
|
783
|
+
i0.ɵɵtemplate(1, SideNavMenuComponent_For_29_Conditional_0_Conditional_1_ng_container_1_Template, 1, 0, "ng-container", 30);
|
|
784
784
|
i0.ɵɵelementEnd();
|
|
785
785
|
} if (rf & 2) {
|
|
786
786
|
const item_r7 = i0.ɵɵnextContext(2).$implicit;
|
|
787
787
|
i0.ɵɵnextContext();
|
|
788
|
-
const profileMenuItem_r8 = i0.ɵɵreference(
|
|
788
|
+
const profileMenuItem_r8 = i0.ɵɵreference(31);
|
|
789
789
|
i0.ɵɵproperty("routerLink", item_r7.link.href);
|
|
790
790
|
i0.ɵɵadvance();
|
|
791
791
|
i0.ɵɵproperty("ngTemplateOutlet", profileMenuItem_r8)("ngTemplateOutletContext", i0.ɵɵpureFunction2(3, _c0, item_r7.icon, item_r7.label));
|
|
792
792
|
} }
|
|
793
|
-
function
|
|
794
|
-
i0.ɵɵtemplate(0,
|
|
793
|
+
function SideNavMenuComponent_For_29_Conditional_0_Template(rf, ctx) { if (rf & 1) {
|
|
794
|
+
i0.ɵɵtemplate(0, SideNavMenuComponent_For_29_Conditional_0_Conditional_0_Template, 2, 6, "a", 28)(1, SideNavMenuComponent_For_29_Conditional_0_Conditional_1_Template, 2, 6, "a", 29);
|
|
795
795
|
} if (rf & 2) {
|
|
796
796
|
const item_r7 = i0.ɵɵnextContext().$implicit;
|
|
797
797
|
i0.ɵɵconditional(item_r7.link.isExternal ? 0 : 1);
|
|
798
798
|
} }
|
|
799
|
-
function
|
|
799
|
+
function SideNavMenuComponent_For_29_Conditional_1_ng_container_1_Template(rf, ctx) { if (rf & 1) {
|
|
800
800
|
i0.ɵɵelementContainer(0);
|
|
801
801
|
} }
|
|
802
|
-
function
|
|
802
|
+
function SideNavMenuComponent_For_29_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
803
803
|
const _r9 = i0.ɵɵgetCurrentView();
|
|
804
|
-
i0.ɵɵelementStart(0, "button",
|
|
805
|
-
i0.ɵɵlistener("click", function
|
|
806
|
-
i0.ɵɵtemplate(1,
|
|
804
|
+
i0.ɵɵelementStart(0, "button", 31);
|
|
805
|
+
i0.ɵɵlistener("click", function SideNavMenuComponent_For_29_Conditional_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r9); const item_r7 = i0.ɵɵnextContext().$implicit; return i0.ɵɵresetView(item_r7.button == null ? null : item_r7.button.callback()); });
|
|
806
|
+
i0.ɵɵtemplate(1, SideNavMenuComponent_For_29_Conditional_1_ng_container_1_Template, 1, 0, "ng-container", 30);
|
|
807
807
|
i0.ɵɵelementEnd();
|
|
808
808
|
} if (rf & 2) {
|
|
809
809
|
const item_r7 = i0.ɵɵnextContext().$implicit;
|
|
810
810
|
i0.ɵɵnextContext();
|
|
811
|
-
const profileMenuItem_r8 = i0.ɵɵreference(
|
|
811
|
+
const profileMenuItem_r8 = i0.ɵɵreference(31);
|
|
812
812
|
i0.ɵɵadvance();
|
|
813
813
|
i0.ɵɵproperty("ngTemplateOutlet", profileMenuItem_r8)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c0, item_r7.icon, item_r7.label));
|
|
814
814
|
} }
|
|
815
|
-
function
|
|
816
|
-
i0.ɵɵtemplate(0,
|
|
815
|
+
function SideNavMenuComponent_For_29_Template(rf, ctx) { if (rf & 1) {
|
|
816
|
+
i0.ɵɵtemplate(0, SideNavMenuComponent_For_29_Conditional_0_Template, 2, 1)(1, SideNavMenuComponent_For_29_Conditional_1_Template, 2, 5, "button", 27);
|
|
817
817
|
} if (rf & 2) {
|
|
818
818
|
const item_r7 = ctx.$implicit;
|
|
819
819
|
i0.ɵɵconditional(item_r7.link ? 0 : 1);
|
|
820
820
|
} }
|
|
821
|
-
function
|
|
822
|
-
i0.ɵɵelementStart(0, "span",
|
|
821
|
+
function SideNavMenuComponent_ng_template_30_Conditional_0_Conditional_0_Template(rf, ctx) { if (rf & 1) {
|
|
822
|
+
i0.ɵɵelementStart(0, "span", 34);
|
|
823
823
|
i0.ɵɵtext(1);
|
|
824
824
|
i0.ɵɵelementEnd();
|
|
825
825
|
} if (rf & 2) {
|
|
@@ -828,20 +828,20 @@ function SideNavMenuComponent_ng_template_29_Conditional_0_Conditional_0_Templat
|
|
|
828
828
|
i0.ɵɵadvance();
|
|
829
829
|
i0.ɵɵtextInterpolate1(" ", icon_r10 == null ? null : icon_r10.name, " ");
|
|
830
830
|
} }
|
|
831
|
-
function
|
|
832
|
-
i0.ɵɵelement(0, "mat-icon",
|
|
831
|
+
function SideNavMenuComponent_ng_template_30_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
832
|
+
i0.ɵɵelement(0, "mat-icon", 33);
|
|
833
833
|
} if (rf & 2) {
|
|
834
834
|
const icon_r10 = i0.ɵɵnextContext(2).icon;
|
|
835
835
|
i0.ɵɵproperty("svgIcon", icon_r10 == null ? null : icon_r10.name);
|
|
836
836
|
} }
|
|
837
|
-
function
|
|
838
|
-
i0.ɵɵtemplate(0,
|
|
837
|
+
function SideNavMenuComponent_ng_template_30_Conditional_0_Template(rf, ctx) { if (rf & 1) {
|
|
838
|
+
i0.ɵɵtemplate(0, SideNavMenuComponent_ng_template_30_Conditional_0_Conditional_0_Template, 2, 3, "span", 32)(1, SideNavMenuComponent_ng_template_30_Conditional_0_Conditional_1_Template, 1, 1, "mat-icon", 33);
|
|
839
839
|
} if (rf & 2) {
|
|
840
840
|
const icon_r10 = i0.ɵɵnextContext().icon;
|
|
841
841
|
i0.ɵɵconditional(!(icon_r10 == null ? null : icon_r10.isCustom) ? 0 : 1);
|
|
842
842
|
} }
|
|
843
|
-
function
|
|
844
|
-
i0.ɵɵtemplate(0,
|
|
843
|
+
function SideNavMenuComponent_ng_template_30_Template(rf, ctx) { if (rf & 1) {
|
|
844
|
+
i0.ɵɵtemplate(0, SideNavMenuComponent_ng_template_30_Conditional_0_Template, 2, 1);
|
|
845
845
|
i0.ɵɵtext(1);
|
|
846
846
|
i0.ɵɵpipe(2, "translate");
|
|
847
847
|
} if (rf & 2) {
|
|
@@ -937,7 +937,7 @@ class SideNavMenuComponent extends NavBaseComponent {
|
|
|
937
937
|
this.userInitials = splittedUsername[0][0] + splittedUsername[1][0];
|
|
938
938
|
}
|
|
939
939
|
static { this.ɵfac = function SideNavMenuComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SideNavMenuComponent)(i0.ɵɵdirectiveInject(i1.StrapiLinkService), i0.ɵɵdirectiveInject(i2.DOMService), i0.ɵɵdirectiveInject(MenuItemsService)); }; }
|
|
940
|
-
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SideNavMenuComponent, selectors: [["lib-side-nav-menu"]], inputs: { username: "username", menuSettings: "menuSettings", productName: "productName" }, features: [i0.ɵɵInheritDefinitionFeature], decls:
|
|
940
|
+
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SideNavMenuComponent, selectors: [["lib-side-nav-menu"]], inputs: { username: "username", menuSettings: "menuSettings", productName: "productName" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 32, vars: 31, consts: [["menu", "matMenu"], ["profileMenuItem", ""], ["state", "matMenuTrigger"], ["iconDown", ""], ["fxHide.gt-xs", ""], [1, "mobile-header", 3, "fxHide"], ["fxFlex", "3.125em", "fxLayoutAlign", "start center", 3, "click", "libPlausibleEvent", "href"], ["height", "40", "width", "40", "alt", "logo", 1, "menu-logo", 3, "src"], [1, "menu-product-name"], ["mat-icon-button", "", 1, "toggler", 3, "click", "libPlausibleEvent"], ["fxLayout", "column", 1, "menu-container", 3, "ngClass.lt-sm"], ["fxLayout", "column", "fxFlexFill", "", 1, "content"], ["fxLayout", "row", 1, "menu-container-header", 3, "fxLayoutAlign"], ["fxFlex", "3.125em", "fxLayoutAlign", "start center", 3, "libPlausibleEvent", "href", "click", 4, "ngIf"], ["mat-icon-button", "", 1, "toggler", 3, "click", "libPlausibleEvent", "matTooltip"], ["fxHide.lt-sm", ""], ["fxLayout", "column", 1, "menu-wrapper"], ["role", "navigation", 3, "toggleCollapseEvent", "direction", "isOpen", "active"], [1, "profile"], ["class", "profile-wrapper", 3, "matMenuTriggerFor", 4, "ngIf"], [1, "profile-menu"], [1, "profile-wrapper", 3, "matMenuTriggerFor"], [1, "profile-icon"], [4, "ngIf"], [1, "profile-name"], ["class", "profile-arrow spin", 4, "ngIf", "ngIfElse"], [1, "profile-arrow", "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) {
|
|
941
941
|
const _r1 = i0.ɵɵgetCurrentView();
|
|
942
942
|
i0.ɵɵelementStart(0, "div", 4)(1, "div", 5)(2, "a", 6);
|
|
943
943
|
i0.ɵɵpipe(3, "translate");
|
|
@@ -954,38 +954,39 @@ class SideNavMenuComponent extends NavBaseComponent {
|
|
|
954
954
|
i0.ɵɵelementEnd()()()();
|
|
955
955
|
i0.ɵɵelementStart(11, "div", 10)(12, "div", 11)(13, "div", 12);
|
|
956
956
|
i0.ɵɵtemplate(14, SideNavMenuComponent_a_14_Template, 5, 7, "a", 13);
|
|
957
|
-
i0.ɵɵelementStart(15, "button",
|
|
957
|
+
i0.ɵɵelementStart(15, "button", 14);
|
|
958
958
|
i0.ɵɵpipe(16, "translate");
|
|
959
|
+
i0.ɵɵpipe(17, "translate");
|
|
959
960
|
i0.ɵɵlistener("click", function SideNavMenuComponent_Template_button_click_15_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.toggleCollapse()); });
|
|
960
|
-
i0.ɵɵelementStart(
|
|
961
|
-
i0.ɵɵtext(
|
|
961
|
+
i0.ɵɵelementStart(18, "mat-icon", 4);
|
|
962
|
+
i0.ɵɵtext(19, "close");
|
|
962
963
|
i0.ɵɵelementEnd();
|
|
963
|
-
i0.ɵɵelementStart(
|
|
964
|
-
i0.ɵɵtext(
|
|
964
|
+
i0.ɵɵelementStart(20, "mat-icon", 15);
|
|
965
|
+
i0.ɵɵtext(21);
|
|
965
966
|
i0.ɵɵelementEnd()()();
|
|
966
|
-
i0.ɵɵelementStart(
|
|
967
|
-
i0.ɵɵlistener("toggleCollapseEvent", function
|
|
967
|
+
i0.ɵɵelementStart(22, "div", 16)(23, "menu-columns", 17);
|
|
968
|
+
i0.ɵɵlistener("toggleCollapseEvent", function SideNavMenuComponent_Template_menu_columns_toggleCollapseEvent_23_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.toggleCollapse()); });
|
|
968
969
|
i0.ɵɵelementEnd()();
|
|
969
|
-
i0.ɵɵelementStart(
|
|
970
|
-
i0.ɵɵtemplate(
|
|
971
|
-
i0.ɵɵelementStart(
|
|
972
|
-
i0.ɵɵrepeaterCreate(
|
|
970
|
+
i0.ɵɵelementStart(24, "div", 18);
|
|
971
|
+
i0.ɵɵtemplate(25, SideNavMenuComponent_button_25_Template, 5, 3, "button", 19);
|
|
972
|
+
i0.ɵɵelementStart(26, "mat-menu", 20, 0);
|
|
973
|
+
i0.ɵɵrepeaterCreate(28, SideNavMenuComponent_For_29_Template, 2, 1, null, null, _forTrack0);
|
|
973
974
|
i0.ɵɵelementEnd()();
|
|
974
|
-
i0.ɵɵtemplate(
|
|
975
|
+
i0.ɵɵtemplate(30, SideNavMenuComponent_ng_template_30_Template, 3, 4, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor);
|
|
975
976
|
i0.ɵɵelementEnd()();
|
|
976
977
|
} if (rf & 2) {
|
|
977
978
|
i0.ɵɵadvance();
|
|
978
979
|
i0.ɵɵproperty("fxHide", !ctx.collapsed);
|
|
979
980
|
i0.ɵɵadvance();
|
|
980
981
|
i0.ɵɵproperty("libPlausibleEvent", ctx.LOGOCLICK_PLAUSIBLE_EVENT)("href", ctx.baseUrl, i0.ɵɵsanitizeUrl);
|
|
981
|
-
i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(3,
|
|
982
|
+
i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(3, 23, "MENU.ARIA_LABELS.LOGO"));
|
|
982
983
|
i0.ɵɵadvance(2);
|
|
983
984
|
i0.ɵɵproperty("src", ctx.menuLogoImage, i0.ɵɵsanitizeUrl);
|
|
984
985
|
i0.ɵɵadvance(2);
|
|
985
986
|
i0.ɵɵtextInterpolate1(" ", ctx.productName, " ");
|
|
986
987
|
i0.ɵɵadvance();
|
|
987
988
|
i0.ɵɵproperty("libPlausibleEvent", ctx.collapsed ? ctx.EXPAND_PLAUSIBLE_EVENT : ctx.COLLAPSE_PLAUSIBLE_EVENT);
|
|
988
|
-
i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(8,
|
|
989
|
+
i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(8, 25, "ARIA_LABELS.MENU_TOGGLER"));
|
|
989
990
|
i0.ɵɵadvance(4);
|
|
990
991
|
i0.ɵɵstyleProp("width", ctx.sideNavWidth);
|
|
991
992
|
i0.ɵɵclassProp("collapsed", ctx.collapsed);
|
|
@@ -995,9 +996,9 @@ class SideNavMenuComponent extends NavBaseComponent {
|
|
|
995
996
|
i0.ɵɵadvance();
|
|
996
997
|
i0.ɵɵproperty("ngIf", !ctx.collapsed);
|
|
997
998
|
i0.ɵɵadvance();
|
|
998
|
-
i0.ɵɵproperty("libPlausibleEvent", ctx.collapsed ? ctx.EXPAND_PLAUSIBLE_EVENT : ctx.COLLAPSE_PLAUSIBLE_EVENT);
|
|
999
|
-
i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(
|
|
1000
|
-
i0.ɵɵadvance(
|
|
999
|
+
i0.ɵɵproperty("libPlausibleEvent", ctx.collapsed ? ctx.EXPAND_PLAUSIBLE_EVENT : ctx.COLLAPSE_PLAUSIBLE_EVENT)("matTooltip", i0.ɵɵpipeBind1(16, 27, ctx.collapsed ? "MENU.EXPAND" : "MENU.COLLAPSE"));
|
|
1000
|
+
i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(17, 29, "ARIA_LABELS.MENU_TOGGLER"));
|
|
1001
|
+
i0.ɵɵadvance(6);
|
|
1001
1002
|
i0.ɵɵtextInterpolate(ctx.collapsed ? "keyboard_double_arrow_right" : "keyboard_double_arrow_left");
|
|
1002
1003
|
i0.ɵɵadvance(2);
|
|
1003
1004
|
i0.ɵɵproperty("direction", ctx.direction)("isOpen", !ctx.collapsed)("active", ctx.active);
|
|
@@ -1005,11 +1006,11 @@ class SideNavMenuComponent extends NavBaseComponent {
|
|
|
1005
1006
|
i0.ɵɵproperty("ngIf", ctx.userInitials);
|
|
1006
1007
|
i0.ɵɵadvance(3);
|
|
1007
1008
|
i0.ɵɵrepeater(ctx.menuSettings.userOptions);
|
|
1008
|
-
} }, dependencies: [i4$1.DefaultLayoutDirective, i4$1.DefaultLayoutAlignDirective, i4$1.FlexFillDirective, i4$1.DefaultFlexDirective, i5.DefaultShowHideDirective, i5.DefaultClassDirective, i1$1.RouterLink, i4.NgIf, i4.NgTemplateOutlet, i2$1.MatIcon, i7.MatIconButton,
|
|
1009
|
+
} }, dependencies: [i4$1.DefaultLayoutDirective, i4$1.DefaultLayoutAlignDirective, i4$1.FlexFillDirective, i4$1.DefaultFlexDirective, i5.DefaultShowHideDirective, i5.DefaultClassDirective, i1$1.RouterLink, i4.NgIf, i4.NgTemplateOutlet, i5$1.MatTooltip, i2$1.MatIcon, i7.MatIconButton, i11.MatMenu, i11.MatMenuItem, i11.MatMenuTrigger, i2.PlausibleEventDirective, MenuColumnsComponent, i8.TranslatePipe], styles: ["a[_ngcontent-%COMP%]{text-decoration:none}.mobile-header[_ngcontent-%COMP%]{display:flex;justify-content:space-between;padding:23px 27px;background-color:#fcfcfc;border:1px solid var(--base-70)}.mobile.menu-container.collapsed[_ngcontent-%COMP%]{display:none!important}.mobile.menu-container[_ngcontent-%COMP%]:not(.collapsed){display:block!important;position:absolute;min-width:100vw;min-height:100vh;z-index:1000}.mobile[_ngcontent-%COMP%] .profile-wrapper[_ngcontent-%COMP%]{position:relative}.mobile[_ngcontent-%COMP%] .profile-wrapper[_ngcontent-%COMP%] mat-icon[_ngcontent-%COMP%]{position:absolute!important;right:0}.menu-product-name[_ngcontent-%COMP%]{white-space:nowrap;margin-left:12px;font-weight:600;color:var(--primary-accent-darker)}.menu-container[_ngcontent-%COMP%]{max-height:100vh;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[_ngcontent-%COMP%]{position:relative;height:100%;margin-top:100px}.menu-container[_ngcontent-%COMP%] .profile-wrapper[_ngcontent-%COMP%]{background:none;color:var(--base-30);display:flex;align-items:center;justify-content:start;width:100%;position:absolute;bottom:0;margin:32px 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}.collapsed[_ngcontent-%COMP%] .profile-wrapper[_ngcontent-%COMP%]{margin:36px 0!important}.mobile[_ngcontent-%COMP%] .profile-name[_ngcontent-%COMP%]{max-width:60vw}.profile-option-icon[_ngcontent-%COMP%]{vertical-align:middle;margin:0 5px 5px 0}[_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}.mobile[_ngcontent-%COMP%] .profile-arrow[_ngcontent-%COMP%]{position:absolute;right:0;margin-right:20px}.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}[_nghost-%COMP%] .mobile .child-list .menu-item{padding:8px 54px!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)}}"] }); }
|
|
1009
1010
|
}
|
|
1010
1011
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SideNavMenuComponent, [{
|
|
1011
1012
|
type: Component,
|
|
1012
|
-
args: [{ selector: 'lib-side-nav-menu', template: "<div fxHide.gt-xs>\r\n <div [fxHide]=\"!collapsed\" class=\"mobile-header\">\r\n <a [libPlausibleEvent]=\"LOGOCLICK_PLAUSIBLE_EVENT\" fxFlex=\"3.125em\" [href]=\"baseUrl\"\r\n [attr.aria-label]=\"'MENU.ARIA_LABELS.LOGO' | translate\" (click)=\"logoClick($event)\" fxLayoutAlign=\"start center\"\r\n >\r\n <img height=\"40\" width=\"40\" class=\"menu-logo\" [src]=\"menuLogoImage\" alt=\"logo\" />\r\n <span class=\"menu-product-name\">\r\n {{ productName }}\r\n </span>\r\n </a>\r\n \r\n <button\r\n mat-icon-button\r\n class=\"toggler\"\r\n [attr.aria-label]=\"'ARIA_LABELS.MENU_TOGGLER' | translate\"\r\n [libPlausibleEvent]=\"collapsed ? EXPAND_PLAUSIBLE_EVENT : COLLAPSE_PLAUSIBLE_EVENT\"\r\n (click)=\"toggleCollapse()\"\r\n >\r\n <mat-icon>menu</mat-icon>\r\n </button>\r\n </div>\r\n</div>\r\n\r\n<div [ngClass.lt-sm]=\"'mobile'\" class=\"menu-container\" [style.width]=\"sideNavWidth\" fxLayout=\"column\" [class.collapsed]=\"collapsed\">\r\n <div class=\"content\" fxLayout=\"column\" fxFlexFill>\r\n <div class=\"menu-container-header\" fxLayout=\"row\" [fxLayoutAlign]=\"collapsed ? 'center center' : 'space-between center'\">\r\n <a *ngIf=\"!collapsed\" [libPlausibleEvent]=\"LOGOCLICK_PLAUSIBLE_EVENT\" fxFlex=\"3.125em\" [href]=\"baseUrl\"\r\n [attr.aria-label]=\"'MENU.ARIA_LABELS.LOGO' | translate\" (click)=\"logoClick($event)\" fxLayoutAlign=\"start center\"\r\n >\r\n <img height=\"40\" width=\"40\" class=\"menu-logo\" [src]=\"menuLogoImage\" alt=\"logo\" />\r\n <span class=\"menu-product-name\">\r\n {{ productName }}\r\n </span>\r\n </a>\r\n \r\n <button\r\n mat-icon-button\r\n class=\"toggler\"\r\n [attr.aria-label]=\"'ARIA_LABELS.MENU_TOGGLER' | translate\"\r\n [libPlausibleEvent]=\"collapsed ? EXPAND_PLAUSIBLE_EVENT : COLLAPSE_PLAUSIBLE_EVENT\"\r\n (click)=\"toggleCollapse()\"\r\n >\r\n <mat-icon fxHide.gt-xs>close</mat-icon>\r\n <mat-icon fxHide.lt-sm>{{ collapsed ? 'keyboard_double_arrow_right' : 'keyboard_double_arrow_left' }}</mat-icon>\r\n </button>\r\n </div>\r\n \r\n <div class=\"menu-wrapper\" fxLayout=\"column\">\r\n <menu-columns (toggleCollapseEvent)=\"toggleCollapse()\" [direction]=\"direction\" role=\"navigation\" [isOpen]=\"!collapsed\"\r\n [active]=\"active\"></menu-columns>\r\n </div>\r\n\r\n <div class=\"profile\">\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=\"profile-arrow spin\">{{\"keyboard_arrow_down\"}}</mat-icon>\r\n\r\n <ng-template #iconDown>\r\n <mat-icon class=\"profile-arrow spin\">{{\"keyboard_arrow_up\" }}</mat-icon>\r\n </ng-template>\r\n </ng-container>\r\n </button>\r\n\r\n <mat-menu #menu=\"matMenu\" class=\"profile-menu\">\r\n @for (item of menuSettings.userOptions; track item.label) {\r\n @if (item.link) {\r\n @if (item.link.isExternal) {\r\n <a class=\"mat-mdc-menu-item\" [href]=\"item.link.href\" target=\"_blank\">\r\n <ng-container\r\n *ngTemplateOutlet=\"profileMenuItem; context: { icon: item.icon, label: item.label }\">\r\n </ng-container>\r\n </a>\r\n } @else {\r\n <a class=\"mat-mdc-menu-item\" [routerLink]=\"item.link.href\">\r\n <ng-container\r\n *ngTemplateOutlet=\"profileMenuItem; context: { icon: item.icon, label: item.label }\">\r\n </ng-container>\r\n </a>\r\n }\r\n } @else {\r\n <button\r\n mat-menu-item\r\n class=\"profile-option\"\r\n (click)=\"item.button?.callback()\"\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"profileMenuItem; context: { icon: item.icon, label: item.label }\">\r\n </ng-container>\r\n </button>\r\n }\r\n }\r\n </mat-menu>\r\n </div>\r\n\r\n <ng-template #profileMenuItem let-icon=\"icon\" let-label=\"label\">\r\n @if (icon) {\r\n @if (!icon?.isCustom) {\r\n <span class=\"material-icons profile-option-icon\" [class.material-icons-outlined]=\"icon?.isOutlined\">\r\n {{icon?.name}}\r\n </span>\r\n } @else {\r\n <mat-icon class=\"profile-option-icon\" [svgIcon]=\"icon?.name\"></mat-icon>\r\n }\r\n }\r\n {{ label | translate }}\r\n </ng-template>\r\n</div>\r\n ", styles: ["a{text-decoration:none}.mobile-header{display:flex;justify-content:space-between;padding:23px 27px;background-color:#fcfcfc;border:1px solid var(--base-70)}.mobile.menu-container.collapsed{display:none!important}.mobile.menu-container:not(.collapsed){display:block!important;position:absolute;min-width:100vw;min-height:100vh;z-index:1000}.mobile .profile-wrapper{position:relative}.mobile .profile-wrapper mat-icon{position:absolute!important;right:0}.menu-product-name{white-space:nowrap;margin-left:12px;font-weight:600;color:var(--primary-accent-darker)}.menu-container{max-height:100vh;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{position:relative;height:100%;margin-top:100px}.menu-container .profile-wrapper{background:none;color:var(--base-30);display:flex;align-items:center;justify-content:start;width:100%;position:absolute;bottom:0;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}.collapsed .profile-wrapper{margin:36px 0!important}.mobile .profile-name{max-width:60vw}.profile-option-icon{vertical-align:middle;margin:0 5px 5px 0}: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}.mobile .profile-arrow{position:absolute;right:0;margin-right:20px}.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}:host ::ng-deep .mobile .child-list .menu-item{padding:8px 54px!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"] }]
|
|
1013
|
+
args: [{ selector: 'lib-side-nav-menu', template: "<div fxHide.gt-xs>\r\n <div [fxHide]=\"!collapsed\" class=\"mobile-header\">\r\n <a [libPlausibleEvent]=\"LOGOCLICK_PLAUSIBLE_EVENT\" fxFlex=\"3.125em\" [href]=\"baseUrl\"\r\n [attr.aria-label]=\"'MENU.ARIA_LABELS.LOGO' | translate\" (click)=\"logoClick($event)\" fxLayoutAlign=\"start center\"\r\n >\r\n <img height=\"40\" width=\"40\" class=\"menu-logo\" [src]=\"menuLogoImage\" alt=\"logo\" />\r\n <span class=\"menu-product-name\">\r\n {{ productName }}\r\n </span>\r\n </a>\r\n \r\n <button\r\n mat-icon-button\r\n class=\"toggler\"\r\n [attr.aria-label]=\"'ARIA_LABELS.MENU_TOGGLER' | translate\"\r\n [libPlausibleEvent]=\"collapsed ? EXPAND_PLAUSIBLE_EVENT : COLLAPSE_PLAUSIBLE_EVENT\"\r\n (click)=\"toggleCollapse()\"\r\n >\r\n <mat-icon>menu</mat-icon>\r\n </button>\r\n </div>\r\n</div>\r\n\r\n<div [ngClass.lt-sm]=\"'mobile'\" class=\"menu-container\" [style.width]=\"sideNavWidth\" fxLayout=\"column\" [class.collapsed]=\"collapsed\">\r\n <div class=\"content\" fxLayout=\"column\" fxFlexFill>\r\n <div class=\"menu-container-header\" fxLayout=\"row\" [fxLayoutAlign]=\"collapsed ? 'center center' : 'space-between center'\">\r\n <a *ngIf=\"!collapsed\" [libPlausibleEvent]=\"LOGOCLICK_PLAUSIBLE_EVENT\" fxFlex=\"3.125em\" [href]=\"baseUrl\"\r\n [attr.aria-label]=\"'MENU.ARIA_LABELS.LOGO' | translate\" (click)=\"logoClick($event)\" fxLayoutAlign=\"start center\"\r\n >\r\n <img height=\"40\" width=\"40\" class=\"menu-logo\" [src]=\"menuLogoImage\" alt=\"logo\" />\r\n <span class=\"menu-product-name\">\r\n {{ productName }}\r\n </span>\r\n </a>\r\n \r\n <button\r\n mat-icon-button\r\n class=\"toggler\"\r\n [attr.aria-label]=\"'ARIA_LABELS.MENU_TOGGLER' | translate\"\r\n [libPlausibleEvent]=\"collapsed ? EXPAND_PLAUSIBLE_EVENT : COLLAPSE_PLAUSIBLE_EVENT\"\r\n [matTooltip]=\"(collapsed ? 'MENU.EXPAND' : 'MENU.COLLAPSE') | translate\"\r\n (click)=\"toggleCollapse()\"\r\n >\r\n <mat-icon fxHide.gt-xs>close</mat-icon>\r\n <mat-icon fxHide.lt-sm>{{ collapsed ? 'keyboard_double_arrow_right' : 'keyboard_double_arrow_left' }}</mat-icon>\r\n </button>\r\n </div>\r\n \r\n <div class=\"menu-wrapper\" fxLayout=\"column\">\r\n <menu-columns (toggleCollapseEvent)=\"toggleCollapse()\" [direction]=\"direction\" role=\"navigation\" [isOpen]=\"!collapsed\"\r\n [active]=\"active\"></menu-columns>\r\n </div>\r\n\r\n <div class=\"profile\">\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=\"profile-arrow spin\">{{\"keyboard_arrow_down\"}}</mat-icon>\r\n\r\n <ng-template #iconDown>\r\n <mat-icon class=\"profile-arrow spin\">{{\"keyboard_arrow_up\" }}</mat-icon>\r\n </ng-template>\r\n </ng-container>\r\n </button>\r\n\r\n <mat-menu #menu=\"matMenu\" class=\"profile-menu\">\r\n @for (item of menuSettings.userOptions; track item.label) {\r\n @if (item.link) {\r\n @if (item.link.isExternal) {\r\n <a class=\"mat-mdc-menu-item\" [href]=\"item.link.href\" target=\"_blank\">\r\n <ng-container\r\n *ngTemplateOutlet=\"profileMenuItem; context: { icon: item.icon, label: item.label }\">\r\n </ng-container>\r\n </a>\r\n } @else {\r\n <a class=\"mat-mdc-menu-item\" [routerLink]=\"item.link.href\">\r\n <ng-container\r\n *ngTemplateOutlet=\"profileMenuItem; context: { icon: item.icon, label: item.label }\">\r\n </ng-container>\r\n </a>\r\n }\r\n } @else {\r\n <button\r\n mat-menu-item\r\n class=\"profile-option\"\r\n (click)=\"item.button?.callback()\"\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"profileMenuItem; context: { icon: item.icon, label: item.label }\">\r\n </ng-container>\r\n </button>\r\n }\r\n }\r\n </mat-menu>\r\n </div>\r\n\r\n <ng-template #profileMenuItem let-icon=\"icon\" let-label=\"label\">\r\n @if (icon) {\r\n @if (!icon?.isCustom) {\r\n <span class=\"material-icons profile-option-icon\" [class.material-icons-outlined]=\"icon?.isOutlined\">\r\n {{icon?.name}}\r\n </span>\r\n } @else {\r\n <mat-icon class=\"profile-option-icon\" [svgIcon]=\"icon?.name\"></mat-icon>\r\n }\r\n }\r\n {{ label | translate }}\r\n </ng-template>\r\n</div>\r\n ", styles: ["a{text-decoration:none}.mobile-header{display:flex;justify-content:space-between;padding:23px 27px;background-color:#fcfcfc;border:1px solid var(--base-70)}.mobile.menu-container.collapsed{display:none!important}.mobile.menu-container:not(.collapsed){display:block!important;position:absolute;min-width:100vw;min-height:100vh;z-index:1000}.mobile .profile-wrapper{position:relative}.mobile .profile-wrapper mat-icon{position:absolute!important;right:0}.menu-product-name{white-space:nowrap;margin-left:12px;font-weight:600;color:var(--primary-accent-darker)}.menu-container{max-height:100vh;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{position:relative;height:100%;margin-top:100px}.menu-container .profile-wrapper{background:none;color:var(--base-30);display:flex;align-items:center;justify-content:start;width:100%;position:absolute;bottom:0;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}.collapsed .profile-wrapper{margin:36px 0!important}.mobile .profile-name{max-width:60vw}.profile-option-icon{vertical-align:middle;margin:0 5px 5px 0}: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}.mobile .profile-arrow{position:absolute;right:0;margin-right:20px}.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}:host ::ng-deep .mobile .child-list .menu-item{padding:8px 54px!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"] }]
|
|
1013
1014
|
}], () => [{ type: i1.StrapiLinkService }, { type: i2.DOMService }, { type: MenuItemsService }], { username: [{
|
|
1014
1015
|
type: Input
|
|
1015
1016
|
}], menuSettings: [{
|