@tilde-nlp/ngx-menu 6.1.29 → 6.1.31
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/components/menu-columns/menu-columns.component.mjs +3 -3
- package/esm2022/lib/components/menu-item-list/menu-item-list.component.mjs +66 -151
- package/esm2022/lib/components/side-nav-menu/side-nav-menu.component.mjs +2 -2
- package/esm2022/lib/constants/user-menu-options.const.mjs +13 -5
- package/esm2022/lib/menu.module.mjs +3 -6
- package/esm2022/lib/models/custom-menu-item.model.mjs +1 -1
- package/esm2022/lib/models/menu-item-group.model.mjs +1 -1
- package/fesm2022/tilde-nlp-ngx-menu.mjs +89 -231
- package/fesm2022/tilde-nlp-ngx-menu.mjs.map +1 -1
- package/lib/constants/user-menu-options.const.d.ts +2 -1
- package/lib/menu.module.d.ts +12 -13
- package/lib/models/custom-menu-item.model.d.ts +0 -7
- package/lib/models/menu-item-group.model.d.ts +0 -5
- package/package.json +1 -1
- package/esm2022/lib/components/menu-item-btn/menu-item-btn.component.mjs +0 -73
- package/lib/components/menu-item-btn/menu-item-btn.component.d.ts +0 -9
|
@@ -8,19 +8,19 @@ import { map, BehaviorSubject, filter } from 'rxjs';
|
|
|
8
8
|
import * as i1 from '@tilde-nlp/ngx-strapi';
|
|
9
9
|
import { STRAPI_API_CONFIG_TOKEN } from '@tilde-nlp/ngx-strapi';
|
|
10
10
|
import { CollectionTypes } from '@tilde-nlp/strapi-models';
|
|
11
|
-
import * as
|
|
12
|
-
import * as
|
|
11
|
+
import * as i4$1 from '@ngbracket/ngx-layout/flex';
|
|
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 from '@angular/material/tooltip';
|
|
15
|
+
import * as i5$1 from '@angular/material/tooltip';
|
|
16
16
|
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
17
17
|
import * as i2$1 from '@angular/material/icon';
|
|
18
18
|
import { MatIconModule } from '@angular/material/icon';
|
|
19
19
|
import * as i7 from '@angular/material/button';
|
|
20
20
|
import { MatButtonModule } from '@angular/material/button';
|
|
21
|
-
import * as
|
|
21
|
+
import * as i11 from '@angular/material/menu';
|
|
22
22
|
import { MatMenuModule } from '@angular/material/menu';
|
|
23
|
-
import * as i4$
|
|
23
|
+
import * as i4$2 from '@angular/material/divider';
|
|
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';
|
|
@@ -394,7 +394,7 @@ class MenuItemLinkComponent {
|
|
|
394
394
|
i0.ɵɵproperty("ngIf", ctx.showIcons && ctx.menuItem.icon);
|
|
395
395
|
i0.ɵɵadvance();
|
|
396
396
|
i0.ɵɵproperty("ngIf", ctx.labelsVisible);
|
|
397
|
-
} }, dependencies: [
|
|
397
|
+
} }, dependencies: [i4$1.DefaultLayoutDirective, i4$1.DefaultLayoutAlignDirective, i5.DefaultClassDirective, i4.NgIf, i5$1.MatTooltip, i2.PlausibleEventDirective, MenuIconComponent, i8.TranslatePipe], styles: ["[_nghost-%COMP%]{width:100%}.mobile[_ngcontent-%COMP%] .menu-item-title[_ngcontent-%COMP%]{margin-left:5px}"] }); }
|
|
398
398
|
}
|
|
399
399
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuItemLinkComponent, [{
|
|
400
400
|
type: Component,
|
|
@@ -412,271 +412,123 @@ class MenuItemLinkComponent {
|
|
|
412
412
|
}] }); })();
|
|
413
413
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MenuItemLinkComponent, { className: "MenuItemLinkComponent", filePath: "lib\\components\\menu-item-link\\menu-item-link.component.ts", lineNumber: 10 }); })();
|
|
414
414
|
|
|
415
|
-
function MenuItemBtnComponent_ng_container_4_button_6_Template(rf, ctx) { if (rf & 1) {
|
|
416
|
-
const _r2 = i0.ɵɵgetCurrentView();
|
|
417
|
-
i0.ɵɵelementStart(0, "button", 6);
|
|
418
|
-
i0.ɵɵlistener("click", function MenuItemBtnComponent_ng_container_4_button_6_Template_button_click_0_listener() { const item_r3 = i0.ɵɵrestoreView(_r2).$implicit; return i0.ɵɵresetView(item_r3.onOptionClick()); });
|
|
419
|
-
i0.ɵɵtext(1);
|
|
420
|
-
i0.ɵɵpipe(2, "translate");
|
|
421
|
-
i0.ɵɵelementEnd();
|
|
422
|
-
} if (rf & 2) {
|
|
423
|
-
const item_r3 = ctx.$implicit;
|
|
424
|
-
i0.ɵɵadvance();
|
|
425
|
-
i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(2, 1, item_r3.title), " ");
|
|
426
|
-
} }
|
|
427
|
-
function MenuItemBtnComponent_ng_container_4_Template(rf, ctx) { if (rf & 1) {
|
|
428
|
-
const _r1 = i0.ɵɵgetCurrentView();
|
|
429
|
-
i0.ɵɵelementContainerStart(0);
|
|
430
|
-
i0.ɵɵelementStart(1, "button", 4);
|
|
431
|
-
i0.ɵɵlistener("click", function MenuItemBtnComponent_ng_container_4_Template_button_click_1_listener($event) { i0.ɵɵrestoreView(_r1); $event.preventDefault(); return i0.ɵɵresetView($event.stopImmediatePropagation()); });
|
|
432
|
-
i0.ɵɵelementStart(2, "mat-icon");
|
|
433
|
-
i0.ɵɵtext(3, "more_vert");
|
|
434
|
-
i0.ɵɵelementEnd()();
|
|
435
|
-
i0.ɵɵelementStart(4, "mat-menu", null, 0);
|
|
436
|
-
i0.ɵɵtemplate(6, MenuItemBtnComponent_ng_container_4_button_6_Template, 3, 3, "button", 5);
|
|
437
|
-
i0.ɵɵelementEnd();
|
|
438
|
-
i0.ɵɵelementContainerEnd();
|
|
439
|
-
} if (rf & 2) {
|
|
440
|
-
const menu_r4 = i0.ɵɵreference(5);
|
|
441
|
-
const ctx_r4 = i0.ɵɵnextContext();
|
|
442
|
-
i0.ɵɵadvance();
|
|
443
|
-
i0.ɵɵproperty("matMenuTriggerFor", menu_r4);
|
|
444
|
-
i0.ɵɵadvance(5);
|
|
445
|
-
i0.ɵɵproperty("ngForOf", ctx_r4.menuItem.subMenu);
|
|
446
|
-
} }
|
|
447
|
-
class MenuItemBtnComponent {
|
|
448
|
-
static { this.ɵfac = function MenuItemBtnComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MenuItemBtnComponent)(); }; }
|
|
449
|
-
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MenuItemBtnComponent, selectors: [["lib-menu-item-btn"]], inputs: { direction: "direction", activeItem: "activeItem", menuItem: "menuItem" }, decls: 5, vars: 7, consts: [["menu", "matMenu"], ["fxLayoutAlign", "space-between start", 1, "menu-item", "w-full", "flex", "justify-center", "items-center", 3, "click", "ngClass.lt-md"], [1, "btn-label"], [4, "ngIf"], ["mat-icon-button", "", 3, "click", "matMenuTriggerFor"], ["mat-menu-item", "", 3, "click", 4, "ngFor", "ngForOf"], ["mat-menu-item", "", 3, "click"]], template: function MenuItemBtnComponent_Template(rf, ctx) { if (rf & 1) {
|
|
450
|
-
i0.ɵɵelementStart(0, "button", 1);
|
|
451
|
-
i0.ɵɵlistener("click", function MenuItemBtnComponent_Template_button_click_0_listener() { return ctx.menuItem.clickAction && ctx.menuItem.clickAction(); });
|
|
452
|
-
i0.ɵɵelementStart(1, "span", 2);
|
|
453
|
-
i0.ɵɵtext(2);
|
|
454
|
-
i0.ɵɵpipe(3, "translate");
|
|
455
|
-
i0.ɵɵelementEnd();
|
|
456
|
-
i0.ɵɵtemplate(4, MenuItemBtnComponent_ng_container_4_Template, 7, 2, "ng-container", 3);
|
|
457
|
-
i0.ɵɵelementEnd();
|
|
458
|
-
} if (rf & 2) {
|
|
459
|
-
i0.ɵɵclassProp("active-menu-item", ctx.menuItem === ctx.activeItem);
|
|
460
|
-
i0.ɵɵproperty("ngClass.lt-md", "mobile");
|
|
461
|
-
i0.ɵɵadvance(2);
|
|
462
|
-
i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(3, 5, ctx.menuItem.title), " ");
|
|
463
|
-
i0.ɵɵadvance(2);
|
|
464
|
-
i0.ɵɵproperty("ngIf", ctx.menuItem.subMenu == null ? null : ctx.menuItem.subMenu.length);
|
|
465
|
-
} }, dependencies: [i1$2.DefaultLayoutAlignDirective, i2$2.DefaultClassDirective, i4.NgForOf, i4.NgIf, i2$1.MatIcon, i7.MatIconButton, i6.MatMenu, i6.MatMenuItem, i6.MatMenuTrigger, i8.TranslatePipe], styles: ["[_nghost-%COMP%]{width:100%}.mobile[_ngcontent-%COMP%] .btn-label[_ngcontent-%COMP%]{margin-left:5px}.btn-label[_ngcontent-%COMP%]{font-size:14px;font-weight:500;line-height:20px;letter-spacing:.1px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}"] }); }
|
|
466
|
-
}
|
|
467
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuItemBtnComponent, [{
|
|
468
|
-
type: Component,
|
|
469
|
-
args: [{ selector: 'lib-menu-item-btn', standalone: false, template: "<button\r\n [ngClass.lt-md]=\"'mobile'\"\r\n class=\"menu-item w-full flex justify-center items-center\"\r\n fxLayoutAlign=\"space-between start\"\r\n [class.active-menu-item]=\"menuItem === activeItem\"\r\n (click)=\"menuItem.clickAction && menuItem.clickAction()\"\r\n>\r\n <span class=\"btn-label\">\r\n {{ menuItem.title | translate }}\r\n </span>\r\n <ng-container *ngIf=\"menuItem.subMenu?.length\">\r\n <button\r\n mat-icon-button\r\n [matMenuTriggerFor]=\"menu\"\r\n (click)=\"$event.preventDefault(); $event.stopImmediatePropagation()\"\r\n >\r\n <mat-icon>more_vert</mat-icon>\r\n </button>\r\n <mat-menu #menu=\"matMenu\">\r\n <button\r\n *ngFor=\"let item of menuItem.subMenu\"\r\n mat-menu-item\r\n (click)=\"item.onOptionClick()\"\r\n >\r\n {{ item.title | translate }}\r\n </button>\r\n </mat-menu>\r\n </ng-container>\r\n</button>\r\n", styles: [":host{width:100%}.mobile .btn-label{margin-left:5px}.btn-label{font-size:14px;font-weight:500;line-height:20px;letter-spacing:.1px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
|
|
470
|
-
}], null, { direction: [{
|
|
471
|
-
type: Input
|
|
472
|
-
}], activeItem: [{
|
|
473
|
-
type: Input
|
|
474
|
-
}], menuItem: [{
|
|
475
|
-
type: Input
|
|
476
|
-
}] }); })();
|
|
477
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MenuItemBtnComponent, { className: "MenuItemBtnComponent", filePath: "lib\\components\\menu-item-btn\\menu-item-btn.component.ts", lineNumber: 10 }); })();
|
|
478
|
-
|
|
479
415
|
const _c0$1 = a0 => ({ menuItem: a0 });
|
|
480
|
-
function
|
|
481
|
-
i0.ɵɵelementStart(0, "
|
|
482
|
-
i0.ɵɵtext(1);
|
|
483
|
-
i0.ɵɵelementEnd();
|
|
484
|
-
} if (rf & 2) {
|
|
485
|
-
const ctx_r0 = i0.ɵɵnextContext(2);
|
|
486
|
-
i0.ɵɵadvance();
|
|
487
|
-
i0.ɵɵtextInterpolate(ctx_r0.menuItemGroup.titleIcon);
|
|
488
|
-
} }
|
|
489
|
-
function MenuItemListComponent_Conditional_1_button_2_Template(rf, ctx) { if (rf & 1) {
|
|
490
|
-
i0.ɵɵelementStart(0, "button", 11);
|
|
416
|
+
function MenuItemListComponent_div_1_button_1_Template(rf, ctx) { if (rf & 1) {
|
|
417
|
+
i0.ɵɵelementStart(0, "button", 8);
|
|
491
418
|
i0.ɵɵpipe(1, "translate");
|
|
492
419
|
i0.ɵɵelementStart(2, "mat-icon");
|
|
493
420
|
i0.ɵɵtext(3);
|
|
494
421
|
i0.ɵɵelementEnd()();
|
|
495
422
|
} if (rf & 2) {
|
|
496
|
-
let tmp_7_0;
|
|
497
423
|
const ctx_r0 = i0.ɵɵnextContext(2);
|
|
498
|
-
i0.ɵɵproperty("routerLink", ctx_r0.menuItemGroup.titleNavigation.path)("matTooltip", i0.ɵɵpipeBind1(1, 3,
|
|
424
|
+
i0.ɵɵproperty("routerLink", ctx_r0.menuItemGroup.titleNavigation.path)("matTooltip", i0.ɵɵpipeBind1(1, 3, ctx_r0.menuItemGroup.titleNavigation.tooltip));
|
|
499
425
|
i0.ɵɵadvance(3);
|
|
500
426
|
i0.ɵɵtextInterpolate(ctx_r0.menuItemGroup.titleNavigation.icon);
|
|
501
427
|
} }
|
|
502
|
-
function
|
|
503
|
-
i0.ɵɵelementStart(0, "div",
|
|
504
|
-
i0.ɵɵtemplate(1,
|
|
505
|
-
i0.ɵɵtext(
|
|
506
|
-
i0.ɵɵpipe(
|
|
428
|
+
function MenuItemListComponent_div_1_Template(rf, ctx) { if (rf & 1) {
|
|
429
|
+
i0.ɵɵelementStart(0, "div", 6);
|
|
430
|
+
i0.ɵɵtemplate(1, MenuItemListComponent_div_1_button_1_Template, 4, 5, "button", 7);
|
|
431
|
+
i0.ɵɵtext(2);
|
|
432
|
+
i0.ɵɵpipe(3, "translate");
|
|
507
433
|
i0.ɵɵelementEnd();
|
|
508
434
|
} if (rf & 2) {
|
|
509
435
|
const ctx_r0 = i0.ɵɵnextContext();
|
|
510
436
|
i0.ɵɵadvance();
|
|
511
|
-
i0.ɵɵproperty("ngIf", ctx_r0.menuItemGroup.titleIcon);
|
|
512
|
-
i0.ɵɵadvance();
|
|
513
437
|
i0.ɵɵproperty("ngIf", ctx_r0.menuItemGroup.titleNavigation);
|
|
514
438
|
i0.ɵɵadvance();
|
|
515
|
-
i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(
|
|
439
|
+
i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(3, 2, ctx_r0.titleKey), " ");
|
|
516
440
|
} }
|
|
517
|
-
function
|
|
441
|
+
function MenuItemListComponent_ng_container_3_ng_container_1_Template(rf, ctx) { if (rf & 1) {
|
|
518
442
|
i0.ɵɵelementContainer(0);
|
|
519
443
|
} }
|
|
520
|
-
function
|
|
521
|
-
i0.ɵɵtemplate(0, MenuItemListComponent_Conditional_2_ng_container_0_Template, 1, 0, "ng-container", 12);
|
|
522
|
-
} if (rf & 2) {
|
|
523
|
-
i0.ɵɵnextContext();
|
|
524
|
-
const itemGroupButton_r2 = i0.ɵɵreference(12);
|
|
525
|
-
i0.ɵɵproperty("ngTemplateOutlet", itemGroupButton_r2);
|
|
526
|
-
} }
|
|
527
|
-
function MenuItemListComponent_ng_container_4_ng_container_1_Template(rf, ctx) { if (rf & 1) {
|
|
528
|
-
i0.ɵɵelementContainer(0);
|
|
529
|
-
} }
|
|
530
|
-
function MenuItemListComponent_ng_container_4_Template(rf, ctx) { if (rf & 1) {
|
|
444
|
+
function MenuItemListComponent_ng_container_3_Template(rf, ctx) { if (rf & 1) {
|
|
531
445
|
i0.ɵɵelementContainerStart(0);
|
|
532
|
-
i0.ɵɵtemplate(1,
|
|
446
|
+
i0.ɵɵtemplate(1, MenuItemListComponent_ng_container_3_ng_container_1_Template, 1, 0, "ng-container", 9);
|
|
533
447
|
i0.ɵɵelementContainerEnd();
|
|
534
448
|
} if (rf & 2) {
|
|
535
|
-
const
|
|
449
|
+
const menuItem_r2 = ctx.$implicit;
|
|
536
450
|
i0.ɵɵnextContext();
|
|
537
|
-
const
|
|
538
|
-
const
|
|
539
|
-
const menuItemBtn_r6 = i0.ɵɵreference(10);
|
|
451
|
+
const itemWithChildren_r3 = i0.ɵɵreference(5);
|
|
452
|
+
const menuItemLink_r4 = i0.ɵɵreference(7);
|
|
540
453
|
i0.ɵɵadvance();
|
|
541
|
-
i0.ɵɵproperty("ngTemplateOutlet", !
|
|
454
|
+
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$1, menuItem_r2));
|
|
542
455
|
} }
|
|
543
|
-
function
|
|
456
|
+
function MenuItemListComponent_ng_template_4_ng_container_2_Template(rf, ctx) { if (rf & 1) {
|
|
544
457
|
i0.ɵɵelementContainerStart(0);
|
|
545
|
-
i0.ɵɵelement(1, "tld-menu-icon",
|
|
458
|
+
i0.ɵɵelement(1, "tld-menu-icon", 12);
|
|
546
459
|
i0.ɵɵelementContainerEnd();
|
|
547
460
|
} if (rf & 2) {
|
|
548
|
-
const
|
|
461
|
+
const menuItem_r6 = i0.ɵɵnextContext().menuItem;
|
|
549
462
|
i0.ɵɵadvance();
|
|
550
|
-
i0.ɵɵproperty("menuItem",
|
|
463
|
+
i0.ɵɵproperty("menuItem", menuItem_r6);
|
|
551
464
|
} }
|
|
552
|
-
function
|
|
553
|
-
i0.ɵɵelementStart(0, "span",
|
|
465
|
+
function MenuItemListComponent_ng_template_4_ng_container_3_span_5_Template(rf, ctx) { if (rf & 1) {
|
|
466
|
+
i0.ɵɵelementStart(0, "span", 16);
|
|
554
467
|
i0.ɵɵtext(1);
|
|
555
468
|
i0.ɵɵelementEnd();
|
|
556
469
|
} if (rf & 2) {
|
|
557
|
-
const
|
|
470
|
+
const menuItem_r6 = i0.ɵɵnextContext(2).menuItem;
|
|
558
471
|
i0.ɵɵadvance();
|
|
559
|
-
i0.ɵɵtextInterpolate1(" ",
|
|
472
|
+
i0.ɵɵtextInterpolate1(" ", menuItem_r6.expanded ? "arrow_drop_up" : "arrow_drop_down", " ");
|
|
560
473
|
} }
|
|
561
|
-
function
|
|
474
|
+
function MenuItemListComponent_ng_template_4_ng_container_3_Template(rf, ctx) { if (rf & 1) {
|
|
562
475
|
i0.ɵɵelementContainerStart(0);
|
|
563
|
-
i0.ɵɵelementStart(1, "span",
|
|
476
|
+
i0.ɵɵelementStart(1, "span", 13)(2, "span", 14);
|
|
564
477
|
i0.ɵɵtext(3);
|
|
565
478
|
i0.ɵɵpipe(4, "translate");
|
|
566
479
|
i0.ɵɵelementEnd()();
|
|
567
|
-
i0.ɵɵtemplate(5,
|
|
480
|
+
i0.ɵɵtemplate(5, MenuItemListComponent_ng_template_4_ng_container_3_span_5_Template, 2, 1, "span", 15);
|
|
568
481
|
i0.ɵɵelementContainerEnd();
|
|
569
482
|
} if (rf & 2) {
|
|
570
|
-
const
|
|
483
|
+
const menuItem_r6 = i0.ɵɵnextContext().menuItem;
|
|
571
484
|
i0.ɵɵadvance(3);
|
|
572
|
-
i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(4, 2,
|
|
485
|
+
i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(4, 2, menuItem_r6.title));
|
|
573
486
|
i0.ɵɵadvance(2);
|
|
574
|
-
i0.ɵɵproperty("ngIf",
|
|
487
|
+
i0.ɵɵproperty("ngIf", menuItem_r6.showChildren && menuItem_r6.children);
|
|
575
488
|
} }
|
|
576
|
-
function
|
|
577
|
-
i0.ɵɵelement(0, "menu-item-list",
|
|
489
|
+
function MenuItemListComponent_ng_template_4_ng_container_4_menu_item_list_1_Template(rf, ctx) { if (rf & 1) {
|
|
490
|
+
i0.ɵɵelement(0, "menu-item-list", 18);
|
|
578
491
|
} if (rf & 2) {
|
|
579
|
-
const
|
|
492
|
+
const menuItem_r6 = i0.ɵɵnextContext(2).menuItem;
|
|
580
493
|
const ctx_r0 = i0.ɵɵnextContext();
|
|
581
|
-
i0.ɵɵproperty("items",
|
|
494
|
+
i0.ɵɵproperty("items", menuItem_r6.children)("direction", ctx_r0.direction)("labelsVisible", ctx_r0.labelsVisible)("activeItem", ctx_r0.activeItem);
|
|
582
495
|
} }
|
|
583
|
-
function
|
|
496
|
+
function MenuItemListComponent_ng_template_4_ng_container_4_Template(rf, ctx) { if (rf & 1) {
|
|
584
497
|
i0.ɵɵelementContainerStart(0);
|
|
585
|
-
i0.ɵɵtemplate(1,
|
|
498
|
+
i0.ɵɵtemplate(1, MenuItemListComponent_ng_template_4_ng_container_4_menu_item_list_1_Template, 1, 4, "menu-item-list", 17);
|
|
586
499
|
i0.ɵɵelementContainerEnd();
|
|
587
500
|
} if (rf & 2) {
|
|
588
|
-
const
|
|
501
|
+
const menuItem_r6 = i0.ɵɵnextContext().menuItem;
|
|
589
502
|
i0.ɵɵadvance();
|
|
590
|
-
i0.ɵɵproperty("ngIf",
|
|
503
|
+
i0.ɵɵproperty("ngIf", menuItem_r6.children && menuItem_r6.children.length);
|
|
591
504
|
} }
|
|
592
|
-
function
|
|
593
|
-
const
|
|
594
|
-
i0.ɵɵelementStart(0, "button",
|
|
505
|
+
function MenuItemListComponent_ng_template_4_Template(rf, ctx) { if (rf & 1) {
|
|
506
|
+
const _r5 = i0.ɵɵgetCurrentView();
|
|
507
|
+
i0.ɵɵelementStart(0, "button", 10);
|
|
595
508
|
i0.ɵɵpipe(1, "translate");
|
|
596
|
-
i0.ɵɵlistener("click", function
|
|
597
|
-
i0.ɵɵtemplate(2,
|
|
509
|
+
i0.ɵɵlistener("click", function MenuItemListComponent_ng_template_4_Template_button_click_0_listener($event) { const menuItem_r6 = i0.ɵɵrestoreView(_r5).menuItem; const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.toggleItemExpand($event, menuItem_r6)); });
|
|
510
|
+
i0.ɵɵtemplate(2, MenuItemListComponent_ng_template_4_ng_container_2_Template, 2, 1, "ng-container", 11)(3, MenuItemListComponent_ng_template_4_ng_container_3_Template, 6, 4, "ng-container", 11);
|
|
598
511
|
i0.ɵɵelementEnd();
|
|
599
|
-
i0.ɵɵtemplate(4,
|
|
512
|
+
i0.ɵɵtemplate(4, MenuItemListComponent_ng_template_4_ng_container_4_Template, 2, 1, "ng-container", 11);
|
|
600
513
|
} if (rf & 2) {
|
|
601
|
-
const
|
|
514
|
+
const menuItem_r6 = ctx.menuItem;
|
|
602
515
|
const ctx_r0 = i0.ɵɵnextContext();
|
|
603
|
-
i0.ɵɵclassProp("menu-labels-visible", ctx_r0.labelsVisible)("active-menu-item", (ctx_r0.activeItem == null ? null : ctx_r0.activeItem.link) &&
|
|
604
|
-
i0.ɵɵproperty("ngClass.lt-md", "mob-menu-item")("fxLayout", ctx_r0.menuItemLayout)("matTooltip", !ctx_r0.labelsVisible ? i0.ɵɵpipeBind1(1, 12,
|
|
605
|
-
i0.ɵɵattribute("id",
|
|
516
|
+
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);
|
|
517
|
+
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);
|
|
518
|
+
i0.ɵɵattribute("id", menuItem_r6.customId);
|
|
606
519
|
i0.ɵɵadvance(2);
|
|
607
|
-
i0.ɵɵproperty("ngIf", ctx_r0.showIcons &&
|
|
520
|
+
i0.ɵɵproperty("ngIf", ctx_r0.showIcons && menuItem_r6.icon);
|
|
608
521
|
i0.ɵɵadvance();
|
|
609
522
|
i0.ɵɵproperty("ngIf", ctx_r0.labelsVisible);
|
|
610
523
|
i0.ɵɵadvance();
|
|
611
|
-
i0.ɵɵproperty("ngIf",
|
|
612
|
-
} }
|
|
613
|
-
function MenuItemListComponent_ng_template_7_Template(rf, ctx) { if (rf & 1) {
|
|
614
|
-
i0.ɵɵelement(0, "tld-menu-item-link", 23);
|
|
615
|
-
} if (rf & 2) {
|
|
616
|
-
const menuItem_r9 = ctx.menuItem;
|
|
617
|
-
const ctx_r0 = i0.ɵɵnextContext();
|
|
618
|
-
i0.ɵɵproperty("ngClass.lt-md", "mob-menu-item")("menuItem", menuItem_r9)("direction", ctx_r0.direction)("labelsVisible", ctx_r0.labelsVisible)("activeItem", ctx_r0.activeItem)("showIcons", ctx_r0.showIcons);
|
|
619
|
-
} }
|
|
620
|
-
function MenuItemListComponent_ng_template_9_lib_menu_item_btn_0_Template(rf, ctx) { if (rf & 1) {
|
|
621
|
-
i0.ɵɵelement(0, "lib-menu-item-btn", 25);
|
|
622
|
-
} if (rf & 2) {
|
|
623
|
-
const menuItem_r10 = i0.ɵɵnextContext().menuItem;
|
|
624
|
-
const ctx_r0 = i0.ɵɵnextContext();
|
|
625
|
-
i0.ɵɵproperty("ngClass.lt-md", "mob-menu-item")("menuItem", menuItem_r10)("direction", ctx_r0.direction)("activeItem", ctx_r0.activeItem);
|
|
626
|
-
} }
|
|
627
|
-
function MenuItemListComponent_ng_template_9_Template(rf, ctx) { if (rf & 1) {
|
|
628
|
-
i0.ɵɵtemplate(0, MenuItemListComponent_ng_template_9_lib_menu_item_btn_0_Template, 1, 4, "lib-menu-item-btn", 24);
|
|
629
|
-
} if (rf & 2) {
|
|
630
|
-
const ctx_r0 = i0.ɵɵnextContext();
|
|
631
|
-
i0.ɵɵproperty("ngIf", ctx_r0.labelsVisible);
|
|
632
|
-
} }
|
|
633
|
-
function MenuItemListComponent_ng_template_11_button_0_span_3_Template(rf, ctx) { if (rf & 1) {
|
|
634
|
-
i0.ɵɵelementStart(0, "span", 30);
|
|
635
|
-
i0.ɵɵtext(1);
|
|
636
|
-
i0.ɵɵpipe(2, "translate");
|
|
637
|
-
i0.ɵɵelementEnd();
|
|
638
|
-
} if (rf & 2) {
|
|
639
|
-
const ctx_r0 = i0.ɵɵnextContext(3);
|
|
640
|
-
i0.ɵɵadvance();
|
|
641
|
-
i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(2, 1, ctx_r0.titleKey), " ");
|
|
642
|
-
} }
|
|
643
|
-
function MenuItemListComponent_ng_template_11_button_0_Template(rf, ctx) { if (rf & 1) {
|
|
644
|
-
const _r11 = i0.ɵɵgetCurrentView();
|
|
645
|
-
i0.ɵɵelementStart(0, "button", 28);
|
|
646
|
-
i0.ɵɵlistener("click", function MenuItemListComponent_ng_template_11_button_0_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r11); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.menuItemGroup == null ? null : ctx_r0.menuItemGroup.itemGroupClick()); });
|
|
647
|
-
i0.ɵɵelementStart(1, "mat-icon");
|
|
648
|
-
i0.ɵɵtext(2);
|
|
649
|
-
i0.ɵɵelementEnd();
|
|
650
|
-
i0.ɵɵtemplate(3, MenuItemListComponent_ng_template_11_button_0_span_3_Template, 3, 3, "span", 29);
|
|
651
|
-
i0.ɵɵelementEnd();
|
|
652
|
-
} if (rf & 2) {
|
|
653
|
-
const ctx_r0 = i0.ɵɵnextContext(2);
|
|
654
|
-
i0.ɵɵadvance(2);
|
|
655
|
-
i0.ɵɵtextInterpolate(ctx_r0.menuItemGroup.itemGroupIcon);
|
|
656
|
-
i0.ɵɵadvance();
|
|
657
|
-
i0.ɵɵproperty("ngIf", ctx_r0.titleKey);
|
|
524
|
+
i0.ɵɵproperty("ngIf", menuItem_r6.showChildren && menuItem_r6.expanded && ctx_r0.labelsVisible);
|
|
658
525
|
} }
|
|
659
|
-
function
|
|
660
|
-
|
|
661
|
-
i0.ɵɵelementStart(0, "button", 31);
|
|
662
|
-
i0.ɵɵpipe(1, "translate");
|
|
663
|
-
i0.ɵɵlistener("click", function MenuItemListComponent_ng_template_11_button_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r12); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.menuItemGroup == null ? null : ctx_r0.menuItemGroup.itemGroupClick()); });
|
|
664
|
-
i0.ɵɵelementStart(2, "mat-icon");
|
|
665
|
-
i0.ɵɵtext(3);
|
|
666
|
-
i0.ɵɵelementEnd()();
|
|
667
|
-
} if (rf & 2) {
|
|
668
|
-
const ctx_r0 = i0.ɵɵnextContext(2);
|
|
669
|
-
i0.ɵɵproperty("matTooltip", i0.ɵɵpipeBind1(1, 2, ctx_r0.titleKey));
|
|
670
|
-
i0.ɵɵadvance(3);
|
|
671
|
-
i0.ɵɵtextInterpolate(ctx_r0.menuItemGroup.itemGroupIcon);
|
|
672
|
-
} }
|
|
673
|
-
function MenuItemListComponent_ng_template_11_Template(rf, ctx) { if (rf & 1) {
|
|
674
|
-
i0.ɵɵtemplate(0, MenuItemListComponent_ng_template_11_button_0_Template, 4, 2, "button", 26)(1, MenuItemListComponent_ng_template_11_button_1_Template, 4, 4, "button", 27);
|
|
526
|
+
function MenuItemListComponent_ng_template_6_Template(rf, ctx) { if (rf & 1) {
|
|
527
|
+
i0.ɵɵelement(0, "tld-menu-item-link", 19);
|
|
675
528
|
} if (rf & 2) {
|
|
529
|
+
const menuItem_r7 = ctx.menuItem;
|
|
676
530
|
const ctx_r0 = i0.ɵɵnextContext();
|
|
677
|
-
i0.ɵɵproperty("
|
|
678
|
-
i0.ɵɵadvance();
|
|
679
|
-
i0.ɵɵproperty("ngIf", ctx_r0.menuItemGroup && !ctx_r0.labelsVisible && ctx_r0.titleKey && ctx_r0.menuItemGroup.itemGroupIcon);
|
|
531
|
+
i0.ɵɵproperty("ngClass.lt-md", "mob-menu-item")("menuItem", menuItem_r7)("direction", ctx_r0.direction)("labelsVisible", ctx_r0.labelsVisible)("activeItem", ctx_r0.activeItem)("showIcons", ctx_r0.showIcons);
|
|
680
532
|
} }
|
|
681
533
|
class MenuItemListComponent {
|
|
682
534
|
constructor() {
|
|
@@ -708,25 +560,25 @@ class MenuItemListComponent {
|
|
|
708
560
|
this.toggleExpand.next(menuItem);
|
|
709
561
|
}
|
|
710
562
|
static { this.ɵfac = function MenuItemListComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MenuItemListComponent)(); }; }
|
|
711
|
-
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:
|
|
712
|
-
i0.ɵɵelementStart(0, "div",
|
|
713
|
-
i0.ɵɵtemplate(1,
|
|
714
|
-
i0.ɵɵelementStart(
|
|
715
|
-
i0.ɵɵtemplate(
|
|
563
|
+
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"], ["class", "menu-title-btn", "mat-icon-button", "", 3, "routerLink", "matTooltip", 4, "ngIf"], ["mat-icon-button", "", 1, "menu-title-btn", 3, "routerLink", "matTooltip"], [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) {
|
|
564
|
+
i0.ɵɵelementStart(0, "div", 2);
|
|
565
|
+
i0.ɵɵtemplate(1, MenuItemListComponent_div_1_Template, 4, 4, "div", 3);
|
|
566
|
+
i0.ɵɵelementStart(2, "div", 4);
|
|
567
|
+
i0.ɵɵtemplate(3, MenuItemListComponent_ng_container_3_Template, 2, 4, "ng-container", 5);
|
|
716
568
|
i0.ɵɵelementEnd()();
|
|
717
|
-
i0.ɵɵtemplate(
|
|
569
|
+
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);
|
|
718
570
|
} if (rf & 2) {
|
|
719
571
|
i0.ɵɵadvance();
|
|
720
|
-
i0.ɵɵ
|
|
721
|
-
i0.ɵɵadvance(
|
|
572
|
+
i0.ɵɵproperty("ngIf", ctx.titleKey && ctx.showTitle && ctx.labelsVisible);
|
|
573
|
+
i0.ɵɵadvance();
|
|
722
574
|
i0.ɵɵproperty("fxLayoutAlign", ctx.menuLayoutDirection);
|
|
723
575
|
i0.ɵɵadvance();
|
|
724
576
|
i0.ɵɵproperty("ngForOf", ctx.items);
|
|
725
|
-
} }, dependencies: [
|
|
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-title[_ngcontent-%COMP%]:has(.menu-title-btn){margin-left:0}.menu-item-list[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_slide-in .3s forwards}.menu-title-btn[_ngcontent-%COMP%]{margin-right:2px;transition:opacity .3s}@keyframes _ngcontent-%COMP%_slide-in{0%{opacity:0;margin-left:-100px}to{opacity:1;margin-left:0}}"] }); }
|
|
726
578
|
}
|
|
727
579
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuItemListComponent, [{
|
|
728
580
|
type: Component,
|
|
729
|
-
args: [{ selector: 'menu-item-list', template: "<div class=\"menu-list-wrapper\">\r\n
|
|
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-title:has(.menu-title-btn){margin-left:0}.menu-item-list{animation:slide-in .3s forwards}.menu-title-btn{margin-right:2px;transition:opacity .3s}@keyframes slide-in{0%{opacity:0;margin-left:-100px}to{opacity:1;margin-left:0}}\n"] }]
|
|
730
582
|
}], null, { direction: [{
|
|
731
583
|
type: Input
|
|
732
584
|
}], labelsVisible: [{
|
|
@@ -766,7 +618,7 @@ function MenuColumnsComponent_ng_container_0_Template(rf, ctx) { if (rf & 1) {
|
|
|
766
618
|
} if (rf & 2) {
|
|
767
619
|
const group_r3 = ctx.$implicit;
|
|
768
620
|
i0.ɵɵadvance();
|
|
769
|
-
i0.ɵɵproperty("ngIf", group_r3.items.length
|
|
621
|
+
i0.ɵɵproperty("ngIf", group_r3.items.length);
|
|
770
622
|
i0.ɵɵadvance();
|
|
771
623
|
i0.ɵɵproperty("ngIf", group_r3.bottomDivider && group_r3.items.length);
|
|
772
624
|
} }
|
|
@@ -819,11 +671,11 @@ class MenuColumnsComponent {
|
|
|
819
671
|
i0.ɵɵtemplate(0, MenuColumnsComponent_ng_container_0_Template, 3, 2, "ng-container", 0);
|
|
820
672
|
} if (rf & 2) {
|
|
821
673
|
i0.ɵɵproperty("ngForOf", ctx.mergedGroups);
|
|
822
|
-
} }, dependencies: [i4.NgForOf, i4.NgIf, i4$
|
|
674
|
+
} }, dependencies: [i4.NgForOf, i4.NgIf, i4$2.MatDivider, MenuItemListComponent], styles: ["[_nghost-%COMP%]{display:inline-block}[_nghost-%COMP%] menu-item-list[_ngcontent-%COMP%]{display:block}.divider[_ngcontent-%COMP%]{margin:10px 0}"] }); }
|
|
823
675
|
}
|
|
824
676
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuColumnsComponent, [{
|
|
825
677
|
type: Component,
|
|
826
|
-
args: [{ selector: 'menu-columns', template: "<ng-container *ngFor=\"let group of mergedGroups\">\r\n <menu-item-list *ngIf=\"group.items.length
|
|
678
|
+
args: [{ selector: 'menu-columns', template: "<ng-container *ngFor=\"let group of mergedGroups\">\r\n <menu-item-list *ngIf=\"group.items.length\" [activeItem]=\"activeItem\" [direction]=\"direction\"\r\n (toggleExpand)=\"elementExpanded($event)\" [labelsVisible]=\"isOpen\" [menuItemGroup]=\"group\"\r\n [items]=\"group.items\">\r\n </menu-item-list>\r\n <div class=\"divider\" *ngIf=\"group.bottomDivider && group.items.length\">\r\n <mat-divider></mat-divider>\r\n </div>\r\n</ng-container>", styles: [":host{display:inline-block}:host menu-item-list{display:block}.divider{margin:10px 0}\n"] }]
|
|
827
679
|
}], () => [{ type: i1$1.Router }, { type: undefined, decorators: [{
|
|
828
680
|
type: Optional
|
|
829
681
|
}, {
|
|
@@ -1154,11 +1006,11 @@ class SideNavMenuComponent extends NavBaseComponent {
|
|
|
1154
1006
|
i0.ɵɵproperty("ngIf", ctx.userInitials);
|
|
1155
1007
|
i0.ɵɵadvance(3);
|
|
1156
1008
|
i0.ɵɵrepeater(ctx.menuSettings.userOptions);
|
|
1157
|
-
} }, dependencies: [
|
|
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;text-overflow:ellipsis}.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)}}"] }); }
|
|
1158
1010
|
}
|
|
1159
1011
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SideNavMenuComponent, [{
|
|
1160
1012
|
type: Component,
|
|
1161
|
-
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:
|
|
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;text-overflow:ellipsis}.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"] }]
|
|
1162
1014
|
}], () => [{ type: i1.StrapiLinkService }, { type: i2.DOMService }, { type: MenuItemsService }], { username: [{
|
|
1163
1015
|
type: Input
|
|
1164
1016
|
}], menuSettings: [{
|
|
@@ -1200,7 +1052,6 @@ class MenuModule {
|
|
|
1200
1052
|
MenuColumnsComponent,
|
|
1201
1053
|
MenuIconComponent,
|
|
1202
1054
|
MenuItemLinkComponent,
|
|
1203
|
-
MenuItemBtnComponent
|
|
1204
1055
|
],
|
|
1205
1056
|
exports: [
|
|
1206
1057
|
SideNavMenuComponent,
|
|
@@ -1218,7 +1069,7 @@ class MenuModule {
|
|
|
1218
1069
|
MatMenuModule,
|
|
1219
1070
|
MatIconModule,
|
|
1220
1071
|
TranslateModule,
|
|
1221
|
-
PlausibleModule
|
|
1072
|
+
PlausibleModule,
|
|
1222
1073
|
],
|
|
1223
1074
|
providers: [StarpiMenuService, provideHttpClient(withInterceptorsFromDi())],
|
|
1224
1075
|
}]
|
|
@@ -1228,8 +1079,7 @@ class MenuModule {
|
|
|
1228
1079
|
MenuItemListComponent,
|
|
1229
1080
|
MenuColumnsComponent,
|
|
1230
1081
|
MenuIconComponent,
|
|
1231
|
-
MenuItemLinkComponent,
|
|
1232
|
-
MenuItemBtnComponent], imports: [FlexLayoutModule,
|
|
1082
|
+
MenuItemLinkComponent], imports: [FlexLayoutModule,
|
|
1233
1083
|
RouterModule,
|
|
1234
1084
|
CommonModule,
|
|
1235
1085
|
MatTooltipModule,
|
|
@@ -1272,12 +1122,20 @@ const USER_MENU_OPTIONS = {
|
|
|
1272
1122
|
icon: { name: `mail` },
|
|
1273
1123
|
link: { href, isExternal: true }
|
|
1274
1124
|
}),
|
|
1275
|
-
|
|
1125
|
+
/** use language update callback to save in localstorage */
|
|
1126
|
+
changeLanguage: (dialog, languages, languageChangeCallback) => ({
|
|
1276
1127
|
label: 'MENU.CHANGE_LANGUAGE',
|
|
1277
1128
|
icon: { name: "language" },
|
|
1278
|
-
button: {
|
|
1279
|
-
|
|
1280
|
-
|
|
1129
|
+
button: {
|
|
1130
|
+
callback: () => {
|
|
1131
|
+
const ref = dialog.open(SelectLanguageDialogComponent, { data: { languages: languages } });
|
|
1132
|
+
ref.afterClosed().subscribe((language) => {
|
|
1133
|
+
if (language && languageChangeCallback) {
|
|
1134
|
+
languageChangeCallback(language);
|
|
1135
|
+
}
|
|
1136
|
+
});
|
|
1137
|
+
}
|
|
1138
|
+
}
|
|
1281
1139
|
}),
|
|
1282
1140
|
logout: (callback) => ({
|
|
1283
1141
|
icon: { name: "logout" },
|