@tilde-nlp/ngx-menu 6.1.28 → 6.1.29
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-btn/menu-item-btn.component.mjs +73 -0
- package/esm2022/lib/components/menu-item-list/menu-item-list.component.mjs +151 -66
- package/esm2022/lib/menu.module.mjs +6 -3
- 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 +226 -76
- package/fesm2022/tilde-nlp-ngx-menu.mjs.map +1 -1
- package/lib/components/menu-item-btn/menu-item-btn.component.d.ts +9 -0
- package/lib/menu.module.d.ts +13 -12
- package/lib/models/custom-menu-item.model.d.ts +7 -0
- package/lib/models/menu-item-group.model.d.ts +5 -0
- package/package.json +1 -1
|
@@ -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 i1$2 from '@ngbracket/ngx-layout/flex';
|
|
12
|
+
import * as i2$2 from '@ngbracket/ngx-layout/extended';
|
|
13
13
|
import * as i4 from '@angular/common';
|
|
14
14
|
import { CommonModule } from '@angular/common';
|
|
15
|
-
import * as i5
|
|
15
|
+
import * as i5 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 i6 from '@angular/material/menu';
|
|
22
22
|
import { MatMenuModule } from '@angular/material/menu';
|
|
23
|
-
import * as i4$
|
|
23
|
+
import * as i4$1 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: [i1$2.DefaultLayoutDirective, i1$2.DefaultLayoutAlignDirective, i2$2.DefaultClassDirective, i4.NgIf, i5.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,123 +412,271 @@ 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
|
+
|
|
415
479
|
const _c0$1 = a0 => ({ menuItem: a0 });
|
|
416
|
-
function
|
|
417
|
-
i0.ɵɵelementStart(0, "
|
|
480
|
+
function MenuItemListComponent_Conditional_1_mat_icon_1_Template(rf, ctx) { if (rf & 1) {
|
|
481
|
+
i0.ɵɵelementStart(0, "mat-icon", 10);
|
|
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);
|
|
418
491
|
i0.ɵɵpipe(1, "translate");
|
|
419
492
|
i0.ɵɵelementStart(2, "mat-icon");
|
|
420
493
|
i0.ɵɵtext(3);
|
|
421
494
|
i0.ɵɵelementEnd()();
|
|
422
495
|
} if (rf & 2) {
|
|
496
|
+
let tmp_7_0;
|
|
423
497
|
const ctx_r0 = i0.ɵɵnextContext(2);
|
|
424
|
-
i0.ɵɵproperty("routerLink", ctx_r0.menuItemGroup.titleNavigation.path)("matTooltip", i0.ɵɵpipeBind1(1, 3, ctx_r0.menuItemGroup.titleNavigation.tooltip));
|
|
498
|
+
i0.ɵɵproperty("routerLink", ctx_r0.menuItemGroup.titleNavigation.path)("matTooltip", i0.ɵɵpipeBind1(1, 3, (tmp_7_0 = ctx_r0.menuItemGroup.titleNavigation == null ? null : ctx_r0.menuItemGroup.titleNavigation.tooltip) !== null && tmp_7_0 !== undefined ? tmp_7_0 : ""));
|
|
425
499
|
i0.ɵɵadvance(3);
|
|
426
500
|
i0.ɵɵtextInterpolate(ctx_r0.menuItemGroup.titleNavigation.icon);
|
|
427
501
|
} }
|
|
428
|
-
function
|
|
429
|
-
i0.ɵɵelementStart(0, "div",
|
|
430
|
-
i0.ɵɵtemplate(1,
|
|
431
|
-
i0.ɵɵtext(
|
|
432
|
-
i0.ɵɵpipe(
|
|
502
|
+
function MenuItemListComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
503
|
+
i0.ɵɵelementStart(0, "div", 5);
|
|
504
|
+
i0.ɵɵtemplate(1, MenuItemListComponent_Conditional_1_mat_icon_1_Template, 2, 1, "mat-icon", 8)(2, MenuItemListComponent_Conditional_1_button_2_Template, 4, 5, "button", 9);
|
|
505
|
+
i0.ɵɵtext(3);
|
|
506
|
+
i0.ɵɵpipe(4, "translate");
|
|
433
507
|
i0.ɵɵelementEnd();
|
|
434
508
|
} if (rf & 2) {
|
|
435
509
|
const ctx_r0 = i0.ɵɵnextContext();
|
|
436
510
|
i0.ɵɵadvance();
|
|
511
|
+
i0.ɵɵproperty("ngIf", ctx_r0.menuItemGroup.titleIcon);
|
|
512
|
+
i0.ɵɵadvance();
|
|
437
513
|
i0.ɵɵproperty("ngIf", ctx_r0.menuItemGroup.titleNavigation);
|
|
438
514
|
i0.ɵɵadvance();
|
|
439
|
-
i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(
|
|
515
|
+
i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(4, 3, ctx_r0.titleKey), " ");
|
|
440
516
|
} }
|
|
441
|
-
function
|
|
517
|
+
function MenuItemListComponent_Conditional_2_ng_container_0_Template(rf, ctx) { if (rf & 1) {
|
|
442
518
|
i0.ɵɵelementContainer(0);
|
|
443
519
|
} }
|
|
444
|
-
function
|
|
520
|
+
function MenuItemListComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
|
|
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) {
|
|
445
531
|
i0.ɵɵelementContainerStart(0);
|
|
446
|
-
i0.ɵɵtemplate(1,
|
|
532
|
+
i0.ɵɵtemplate(1, MenuItemListComponent_ng_container_4_ng_container_1_Template, 1, 0, "ng-container", 13);
|
|
447
533
|
i0.ɵɵelementContainerEnd();
|
|
448
534
|
} if (rf & 2) {
|
|
449
|
-
const
|
|
535
|
+
const menuItem_r3 = ctx.$implicit;
|
|
450
536
|
i0.ɵɵnextContext();
|
|
451
|
-
const
|
|
452
|
-
const
|
|
537
|
+
const itemWithChildren_r4 = i0.ɵɵreference(6);
|
|
538
|
+
const menuItemLink_r5 = i0.ɵɵreference(8);
|
|
539
|
+
const menuItemBtn_r6 = i0.ɵɵreference(10);
|
|
453
540
|
i0.ɵɵadvance();
|
|
454
|
-
i0.ɵɵproperty("ngTemplateOutlet", !
|
|
541
|
+
i0.ɵɵproperty("ngTemplateOutlet", !menuItem_r3.showChildren || !menuItem_r3.children || (menuItem_r3 == null ? null : menuItem_r3.children == null ? null : menuItem_r3.children.length) === 0 ? menuItem_r3.clickAction ? menuItemBtn_r6 : menuItemLink_r5 : itemWithChildren_r4)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c0$1, menuItem_r3));
|
|
455
542
|
} }
|
|
456
|
-
function
|
|
543
|
+
function MenuItemListComponent_ng_template_5_ng_container_2_Template(rf, ctx) { if (rf & 1) {
|
|
457
544
|
i0.ɵɵelementContainerStart(0);
|
|
458
|
-
i0.ɵɵelement(1, "tld-menu-icon",
|
|
545
|
+
i0.ɵɵelement(1, "tld-menu-icon", 16);
|
|
459
546
|
i0.ɵɵelementContainerEnd();
|
|
460
547
|
} if (rf & 2) {
|
|
461
|
-
const
|
|
548
|
+
const menuItem_r8 = i0.ɵɵnextContext().menuItem;
|
|
462
549
|
i0.ɵɵadvance();
|
|
463
|
-
i0.ɵɵproperty("menuItem",
|
|
550
|
+
i0.ɵɵproperty("menuItem", menuItem_r8);
|
|
464
551
|
} }
|
|
465
|
-
function
|
|
466
|
-
i0.ɵɵelementStart(0, "span",
|
|
552
|
+
function MenuItemListComponent_ng_template_5_ng_container_3_span_5_Template(rf, ctx) { if (rf & 1) {
|
|
553
|
+
i0.ɵɵelementStart(0, "span", 20);
|
|
467
554
|
i0.ɵɵtext(1);
|
|
468
555
|
i0.ɵɵelementEnd();
|
|
469
556
|
} if (rf & 2) {
|
|
470
|
-
const
|
|
557
|
+
const menuItem_r8 = i0.ɵɵnextContext(2).menuItem;
|
|
471
558
|
i0.ɵɵadvance();
|
|
472
|
-
i0.ɵɵtextInterpolate1(" ",
|
|
559
|
+
i0.ɵɵtextInterpolate1(" ", menuItem_r8.expanded ? "arrow_drop_up" : "arrow_drop_down", " ");
|
|
473
560
|
} }
|
|
474
|
-
function
|
|
561
|
+
function MenuItemListComponent_ng_template_5_ng_container_3_Template(rf, ctx) { if (rf & 1) {
|
|
475
562
|
i0.ɵɵelementContainerStart(0);
|
|
476
|
-
i0.ɵɵelementStart(1, "span",
|
|
563
|
+
i0.ɵɵelementStart(1, "span", 17)(2, "span", 18);
|
|
477
564
|
i0.ɵɵtext(3);
|
|
478
565
|
i0.ɵɵpipe(4, "translate");
|
|
479
566
|
i0.ɵɵelementEnd()();
|
|
480
|
-
i0.ɵɵtemplate(5,
|
|
567
|
+
i0.ɵɵtemplate(5, MenuItemListComponent_ng_template_5_ng_container_3_span_5_Template, 2, 1, "span", 19);
|
|
481
568
|
i0.ɵɵelementContainerEnd();
|
|
482
569
|
} if (rf & 2) {
|
|
483
|
-
const
|
|
570
|
+
const menuItem_r8 = i0.ɵɵnextContext().menuItem;
|
|
484
571
|
i0.ɵɵadvance(3);
|
|
485
|
-
i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(4, 2,
|
|
572
|
+
i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(4, 2, menuItem_r8.title));
|
|
486
573
|
i0.ɵɵadvance(2);
|
|
487
|
-
i0.ɵɵproperty("ngIf",
|
|
574
|
+
i0.ɵɵproperty("ngIf", menuItem_r8.showChildren && menuItem_r8.children);
|
|
488
575
|
} }
|
|
489
|
-
function
|
|
490
|
-
i0.ɵɵelement(0, "menu-item-list",
|
|
576
|
+
function MenuItemListComponent_ng_template_5_ng_container_4_menu_item_list_1_Template(rf, ctx) { if (rf & 1) {
|
|
577
|
+
i0.ɵɵelement(0, "menu-item-list", 22);
|
|
491
578
|
} if (rf & 2) {
|
|
492
|
-
const
|
|
579
|
+
const menuItem_r8 = i0.ɵɵnextContext(2).menuItem;
|
|
493
580
|
const ctx_r0 = i0.ɵɵnextContext();
|
|
494
|
-
i0.ɵɵproperty("items",
|
|
581
|
+
i0.ɵɵproperty("items", menuItem_r8.children)("direction", ctx_r0.direction)("labelsVisible", ctx_r0.labelsVisible)("activeItem", ctx_r0.activeItem);
|
|
495
582
|
} }
|
|
496
|
-
function
|
|
583
|
+
function MenuItemListComponent_ng_template_5_ng_container_4_Template(rf, ctx) { if (rf & 1) {
|
|
497
584
|
i0.ɵɵelementContainerStart(0);
|
|
498
|
-
i0.ɵɵtemplate(1,
|
|
585
|
+
i0.ɵɵtemplate(1, MenuItemListComponent_ng_template_5_ng_container_4_menu_item_list_1_Template, 1, 4, "menu-item-list", 21);
|
|
499
586
|
i0.ɵɵelementContainerEnd();
|
|
500
587
|
} if (rf & 2) {
|
|
501
|
-
const
|
|
588
|
+
const menuItem_r8 = i0.ɵɵnextContext().menuItem;
|
|
502
589
|
i0.ɵɵadvance();
|
|
503
|
-
i0.ɵɵproperty("ngIf",
|
|
590
|
+
i0.ɵɵproperty("ngIf", menuItem_r8.children && menuItem_r8.children.length);
|
|
504
591
|
} }
|
|
505
|
-
function
|
|
506
|
-
const
|
|
507
|
-
i0.ɵɵelementStart(0, "button",
|
|
592
|
+
function MenuItemListComponent_ng_template_5_Template(rf, ctx) { if (rf & 1) {
|
|
593
|
+
const _r7 = i0.ɵɵgetCurrentView();
|
|
594
|
+
i0.ɵɵelementStart(0, "button", 14);
|
|
508
595
|
i0.ɵɵpipe(1, "translate");
|
|
509
|
-
i0.ɵɵlistener("click", function
|
|
510
|
-
i0.ɵɵtemplate(2,
|
|
596
|
+
i0.ɵɵlistener("click", function MenuItemListComponent_ng_template_5_Template_button_click_0_listener($event) { const menuItem_r8 = i0.ɵɵrestoreView(_r7).menuItem; const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.toggleItemExpand($event, menuItem_r8)); });
|
|
597
|
+
i0.ɵɵtemplate(2, MenuItemListComponent_ng_template_5_ng_container_2_Template, 2, 1, "ng-container", 15)(3, MenuItemListComponent_ng_template_5_ng_container_3_Template, 6, 4, "ng-container", 15);
|
|
511
598
|
i0.ɵɵelementEnd();
|
|
512
|
-
i0.ɵɵtemplate(4,
|
|
599
|
+
i0.ɵɵtemplate(4, MenuItemListComponent_ng_template_5_ng_container_4_Template, 2, 1, "ng-container", 15);
|
|
513
600
|
} if (rf & 2) {
|
|
514
|
-
const
|
|
601
|
+
const menuItem_r8 = ctx.menuItem;
|
|
515
602
|
const ctx_r0 = i0.ɵɵnextContext();
|
|
516
|
-
i0.ɵɵclassProp("menu-labels-visible", ctx_r0.labelsVisible)("active-menu-item", (ctx_r0.activeItem == null ? null : ctx_r0.activeItem.link) &&
|
|
517
|
-
i0.ɵɵproperty("ngClass.lt-md", "mob-menu-item")("fxLayout", ctx_r0.menuItemLayout)("matTooltip", !ctx_r0.labelsVisible ? i0.ɵɵpipeBind1(1, 12,
|
|
518
|
-
i0.ɵɵattribute("id",
|
|
603
|
+
i0.ɵɵclassProp("menu-labels-visible", ctx_r0.labelsVisible)("active-menu-item", (ctx_r0.activeItem == null ? null : ctx_r0.activeItem.link) && menuItem_r8 === ctx_r0.activeItem);
|
|
604
|
+
i0.ɵɵproperty("ngClass.lt-md", "mob-menu-item")("fxLayout", ctx_r0.menuItemLayout)("matTooltip", !ctx_r0.labelsVisible ? i0.ɵɵpipeBind1(1, 12, menuItem_r8.title) : "")("fxLayoutAlign", ctx_r0.menuLayoutDirection);
|
|
605
|
+
i0.ɵɵattribute("id", menuItem_r8.customId);
|
|
519
606
|
i0.ɵɵadvance(2);
|
|
520
|
-
i0.ɵɵproperty("ngIf", ctx_r0.showIcons &&
|
|
607
|
+
i0.ɵɵproperty("ngIf", ctx_r0.showIcons && menuItem_r8.icon);
|
|
521
608
|
i0.ɵɵadvance();
|
|
522
609
|
i0.ɵɵproperty("ngIf", ctx_r0.labelsVisible);
|
|
523
610
|
i0.ɵɵadvance();
|
|
524
|
-
i0.ɵɵproperty("ngIf",
|
|
611
|
+
i0.ɵɵproperty("ngIf", menuItem_r8.showChildren && menuItem_r8.expanded && ctx_r0.labelsVisible);
|
|
525
612
|
} }
|
|
526
|
-
function
|
|
527
|
-
i0.ɵɵelement(0, "tld-menu-item-link",
|
|
613
|
+
function MenuItemListComponent_ng_template_7_Template(rf, ctx) { if (rf & 1) {
|
|
614
|
+
i0.ɵɵelement(0, "tld-menu-item-link", 23);
|
|
528
615
|
} if (rf & 2) {
|
|
529
|
-
const
|
|
616
|
+
const menuItem_r9 = ctx.menuItem;
|
|
530
617
|
const ctx_r0 = i0.ɵɵnextContext();
|
|
531
|
-
i0.ɵɵproperty("ngClass.lt-md", "mob-menu-item")("menuItem",
|
|
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);
|
|
658
|
+
} }
|
|
659
|
+
function MenuItemListComponent_ng_template_11_button_1_Template(rf, ctx) { if (rf & 1) {
|
|
660
|
+
const _r12 = i0.ɵɵgetCurrentView();
|
|
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);
|
|
675
|
+
} if (rf & 2) {
|
|
676
|
+
const ctx_r0 = i0.ɵɵnextContext();
|
|
677
|
+
i0.ɵɵproperty("ngIf", ctx_r0.menuItemGroup && ctx_r0.labelsVisible);
|
|
678
|
+
i0.ɵɵadvance();
|
|
679
|
+
i0.ɵɵproperty("ngIf", ctx_r0.menuItemGroup && !ctx_r0.labelsVisible && ctx_r0.titleKey && ctx_r0.menuItemGroup.itemGroupIcon);
|
|
532
680
|
} }
|
|
533
681
|
class MenuItemListComponent {
|
|
534
682
|
constructor() {
|
|
@@ -560,25 +708,25 @@ class MenuItemListComponent {
|
|
|
560
708
|
this.toggleExpand.next(menuItem);
|
|
561
709
|
}
|
|
562
710
|
static { this.ɵfac = function MenuItemListComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MenuItemListComponent)(); }; }
|
|
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:
|
|
564
|
-
i0.ɵɵelementStart(0, "div",
|
|
565
|
-
i0.ɵɵtemplate(1,
|
|
566
|
-
i0.ɵɵelementStart(
|
|
567
|
-
i0.ɵɵtemplate(
|
|
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: 13, vars: 3, consts: [["itemWithChildren", ""], ["menuItemLink", ""], ["menuItemBtn", ""], ["itemGroupButton", ""], [1, "menu-list-wrapper"], ["fxLayoutAlign", "start center", 1, "menu-item-list-title"], ["fxLayout", "column", 1, "menu-item-list", 3, "fxLayoutAlign"], [4, "ngFor", "ngForOf"], ["class", "menu-title-btn", 4, "ngIf"], ["class", "menu-title-btn", "mat-icon-button", "", 3, "routerLink", "matTooltip", 4, "ngIf"], [1, "menu-title-btn"], ["mat-icon-button", "", 1, "menu-title-btn", 3, "routerLink", "matTooltip"], [4, "ngTemplateOutlet"], [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"], [3, "ngClass.lt-md", "menuItem", "direction", "activeItem", 4, "ngIf"], [3, "ngClass.lt-md", "menuItem", "direction", "activeItem"], ["class", "menu-title-btn menu-action-button", "mat-button", "", 3, "click", 4, "ngIf"], ["mat-icon-button", "", "matTooltipPosition", "after", 3, "matTooltip", "click", 4, "ngIf"], ["mat-button", "", 1, "menu-title-btn", "menu-action-button", 3, "click"], ["class", "btn-label", 4, "ngIf"], [1, "btn-label"], ["mat-icon-button", "", "matTooltipPosition", "after", 3, "click", "matTooltip"]], template: function MenuItemListComponent_Template(rf, ctx) { if (rf & 1) {
|
|
712
|
+
i0.ɵɵelementStart(0, "div", 4);
|
|
713
|
+
i0.ɵɵtemplate(1, MenuItemListComponent_Conditional_1_Template, 5, 5, "div", 5)(2, MenuItemListComponent_Conditional_2_Template, 1, 1, "ng-container");
|
|
714
|
+
i0.ɵɵelementStart(3, "div", 6);
|
|
715
|
+
i0.ɵɵtemplate(4, MenuItemListComponent_ng_container_4_Template, 2, 4, "ng-container", 7);
|
|
568
716
|
i0.ɵɵelementEnd()();
|
|
569
|
-
i0.ɵɵtemplate(
|
|
717
|
+
i0.ɵɵtemplate(5, MenuItemListComponent_ng_template_5_Template, 5, 14, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor)(7, MenuItemListComponent_ng_template_7_Template, 1, 6, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor)(9, MenuItemListComponent_ng_template_9_Template, 1, 1, "ng-template", null, 2, i0.ɵɵtemplateRefExtractor)(11, MenuItemListComponent_ng_template_11_Template, 2, 2, "ng-template", null, 3, i0.ɵɵtemplateRefExtractor);
|
|
570
718
|
} if (rf & 2) {
|
|
571
719
|
i0.ɵɵadvance();
|
|
572
|
-
i0.ɵɵ
|
|
573
|
-
i0.ɵɵadvance();
|
|
720
|
+
i0.ɵɵconditional(ctx.titleKey && ctx.showTitle && ctx.labelsVisible && !ctx.menuItemGroup.itemGroupClick ? 1 : (ctx.menuItemGroup == null ? null : ctx.menuItemGroup.itemGroupClick) ? 2 : -1);
|
|
721
|
+
i0.ɵɵadvance(2);
|
|
574
722
|
i0.ɵɵproperty("fxLayoutAlign", ctx.menuLayoutDirection);
|
|
575
723
|
i0.ɵɵadvance();
|
|
576
724
|
i0.ɵɵproperty("ngForOf", ctx.items);
|
|
577
|
-
} }, dependencies: [
|
|
725
|
+
} }, dependencies: [i1$2.DefaultLayoutDirective, i1$2.DefaultLayoutGapDirective, i1$2.DefaultLayoutAlignDirective, i2$2.DefaultClassDirective, i1$1.RouterLink, i4.NgForOf, i4.NgIf, i4.NgTemplateOutlet, i5.MatTooltip, i2$1.MatIcon, i7.MatButton, i7.MatIconButton, MenuItemListComponent, MenuIconComponent, MenuItemLinkComponent, MenuItemBtnComponent, 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}.menu-action-button[_ngcontent-%COMP%]{justify-content:flex-start;align-items:center;max-width:100%;width:-webkit-fill-available}[_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}}"] }); }
|
|
578
726
|
}
|
|
579
727
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuItemListComponent, [{
|
|
580
728
|
type: Component,
|
|
581
|
-
args: [{ selector: 'menu-item-list', template: "<div class=\"menu-list-wrapper\">\r\n
|
|
729
|
+
args: [{ selector: 'menu-item-list', template: "<div class=\"menu-list-wrapper\">\r\n @if (titleKey && showTitle && labelsVisible && !menuItemGroup.itemGroupClick) {\r\n <div fxLayoutAlign=\"start center\" class=\"menu-item-list-title\">\r\n <mat-icon class=\"menu-title-btn\" *ngIf=\"menuItemGroup.titleIcon\">{{menuItemGroup.titleIcon}}</mat-icon>\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 } @else if (menuItemGroup?.itemGroupClick) {\r\n <ng-container *ngTemplateOutlet=\"itemGroupButton\">\r\n </ng-container>\r\n }\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 ? (menuItem.clickAction ? menuItemBtn : 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>\r\n\r\n<ng-template #menuItemBtn let-menuItem=\"menuItem\">\r\n <lib-menu-item-btn *ngIf=\"labelsVisible\" [ngClass.lt-md]=\"'mob-menu-item'\" [menuItem]=\"menuItem\" [direction]=\"direction\"\r\n [activeItem]=\"activeItem\"></lib-menu-item-btn>\r\n</ng-template>\r\n\r\n<ng-template #itemGroupButton>\r\n <button \r\n class=\"menu-title-btn menu-action-button\"\r\n mat-button\r\n *ngIf=\"menuItemGroup && labelsVisible\"\r\n (click)=\"menuItemGroup?.itemGroupClick()\"\r\n >\r\n <mat-icon>{{ menuItemGroup.itemGroupIcon }}</mat-icon>\r\n <span class=\"btn-label\" *ngIf=\"titleKey\">\r\n {{ titleKey | translate }}\r\n </span>\r\n </button>\r\n\r\n <button \r\n mat-icon-button\r\n *ngIf=\"menuItemGroup && !labelsVisible && titleKey && menuItemGroup.itemGroupIcon\"\r\n (click)=\"menuItemGroup?.itemGroupClick()\"\r\n [matTooltip]=\"titleKey | translate\"\r\n matTooltipPosition=\"after\"\r\n >\r\n <mat-icon>{{ menuItemGroup.itemGroupIcon }}</mat-icon>\r\n </button>\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}.menu-action-button{justify-content:flex-start;align-items:center;max-width:100%;width:-webkit-fill-available}: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"] }]
|
|
582
730
|
}], null, { direction: [{
|
|
583
731
|
type: Input
|
|
584
732
|
}], labelsVisible: [{
|
|
@@ -618,7 +766,7 @@ function MenuColumnsComponent_ng_container_0_Template(rf, ctx) { if (rf & 1) {
|
|
|
618
766
|
} if (rf & 2) {
|
|
619
767
|
const group_r3 = ctx.$implicit;
|
|
620
768
|
i0.ɵɵadvance();
|
|
621
|
-
i0.ɵɵproperty("ngIf", group_r3.items.length);
|
|
769
|
+
i0.ɵɵproperty("ngIf", group_r3.items.length || group_r3.showEmpty);
|
|
622
770
|
i0.ɵɵadvance();
|
|
623
771
|
i0.ɵɵproperty("ngIf", group_r3.bottomDivider && group_r3.items.length);
|
|
624
772
|
} }
|
|
@@ -671,11 +819,11 @@ class MenuColumnsComponent {
|
|
|
671
819
|
i0.ɵɵtemplate(0, MenuColumnsComponent_ng_container_0_Template, 3, 2, "ng-container", 0);
|
|
672
820
|
} if (rf & 2) {
|
|
673
821
|
i0.ɵɵproperty("ngForOf", ctx.mergedGroups);
|
|
674
|
-
} }, dependencies: [i4.NgForOf, i4.NgIf, i4$
|
|
822
|
+
} }, dependencies: [i4.NgForOf, i4.NgIf, i4$1.MatDivider, MenuItemListComponent], styles: ["[_nghost-%COMP%]{display:inline-block}[_nghost-%COMP%] menu-item-list[_ngcontent-%COMP%]{display:block}.divider[_ngcontent-%COMP%]{margin:10px 0}"] }); }
|
|
675
823
|
}
|
|
676
824
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuColumnsComponent, [{
|
|
677
825
|
type: Component,
|
|
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"] }]
|
|
826
|
+
args: [{ selector: 'menu-columns', template: "<ng-container *ngFor=\"let group of mergedGroups\">\r\n <menu-item-list *ngIf=\"group.items.length || group.showEmpty\" [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"] }]
|
|
679
827
|
}], () => [{ type: i1$1.Router }, { type: undefined, decorators: [{
|
|
680
828
|
type: Optional
|
|
681
829
|
}, {
|
|
@@ -1006,7 +1154,7 @@ class SideNavMenuComponent extends NavBaseComponent {
|
|
|
1006
1154
|
i0.ɵɵproperty("ngIf", ctx.userInitials);
|
|
1007
1155
|
i0.ɵɵadvance(3);
|
|
1008
1156
|
i0.ɵɵrepeater(ctx.menuSettings.userOptions);
|
|
1009
|
-
} }, dependencies: [
|
|
1157
|
+
} }, dependencies: [i1$2.DefaultLayoutDirective, i1$2.DefaultLayoutAlignDirective, i1$2.FlexFillDirective, i1$2.DefaultFlexDirective, i2$2.DefaultShowHideDirective, i2$2.DefaultClassDirective, i1$1.RouterLink, i4.NgIf, i4.NgTemplateOutlet, i5.MatTooltip, i2$1.MatIcon, i7.MatIconButton, i6.MatMenu, i6.MatMenuItem, i6.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:fixed;min-width:100vw;min-height:100dvh;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:100dvh;white-space:nowrap;height:100%;transition:width .2s ease;min-height:100dvh;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}.profile-arrow[_ngcontent-%COMP%]{position:absolute;right:3px;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)}}"] }); }
|
|
1010
1158
|
}
|
|
1011
1159
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SideNavMenuComponent, [{
|
|
1012
1160
|
type: Component,
|
|
@@ -1052,6 +1200,7 @@ class MenuModule {
|
|
|
1052
1200
|
MenuColumnsComponent,
|
|
1053
1201
|
MenuIconComponent,
|
|
1054
1202
|
MenuItemLinkComponent,
|
|
1203
|
+
MenuItemBtnComponent
|
|
1055
1204
|
],
|
|
1056
1205
|
exports: [
|
|
1057
1206
|
SideNavMenuComponent,
|
|
@@ -1069,7 +1218,7 @@ class MenuModule {
|
|
|
1069
1218
|
MatMenuModule,
|
|
1070
1219
|
MatIconModule,
|
|
1071
1220
|
TranslateModule,
|
|
1072
|
-
PlausibleModule
|
|
1221
|
+
PlausibleModule
|
|
1073
1222
|
],
|
|
1074
1223
|
providers: [StarpiMenuService, provideHttpClient(withInterceptorsFromDi())],
|
|
1075
1224
|
}]
|
|
@@ -1079,7 +1228,8 @@ class MenuModule {
|
|
|
1079
1228
|
MenuItemListComponent,
|
|
1080
1229
|
MenuColumnsComponent,
|
|
1081
1230
|
MenuIconComponent,
|
|
1082
|
-
MenuItemLinkComponent
|
|
1231
|
+
MenuItemLinkComponent,
|
|
1232
|
+
MenuItemBtnComponent], imports: [FlexLayoutModule,
|
|
1083
1233
|
RouterModule,
|
|
1084
1234
|
CommonModule,
|
|
1085
1235
|
MatTooltipModule,
|