@tilde-nlp/ngx-menu 6.1.13 → 6.1.15
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-icon/menu-icon.component.mjs +6 -5
- package/esm2022/lib/components/menu-item-list/menu-item-list.component.mjs +2 -2
- package/esm2022/lib/components/side-nav-menu/side-nav-menu.component.mjs +130 -152
- package/esm2022/lib/models/custom-menu-item.model.mjs +1 -1
- package/esm2022/lib/services/menu-items.service.mjs +10 -5
- package/fesm2022/tilde-nlp-ngx-menu.mjs +146 -161
- package/fesm2022/tilde-nlp-ngx-menu.mjs.map +1 -1
- package/lib/components/side-nav-menu/side-nav-menu.component.d.ts +2 -4
- package/lib/models/custom-menu-item.model.d.ts +1 -0
- package/lib/services/menu-items.service.d.ts +5 -3
- package/package.json +1 -1
|
@@ -10,17 +10,18 @@ function MenuIconComponent_ng_container_0_mat_icon_1_Template(rf, ctx) { if (rf
|
|
|
10
10
|
i0.ɵɵproperty("svgIcon", ctx_r0.menuItem.icon);
|
|
11
11
|
} }
|
|
12
12
|
function MenuIconComponent_ng_container_0_ng_template_2_Template(rf, ctx) { if (rf & 1) {
|
|
13
|
-
i0.ɵɵelementStart(0, "
|
|
13
|
+
i0.ɵɵelementStart(0, "span", 4);
|
|
14
14
|
i0.ɵɵtext(1);
|
|
15
15
|
i0.ɵɵelementEnd();
|
|
16
16
|
} if (rf & 2) {
|
|
17
17
|
const ctx_r0 = i0.ɵɵnextContext(2);
|
|
18
|
+
i0.ɵɵclassProp("material-icons-outlined", ctx_r0.menuItem == null ? null : ctx_r0.menuItem.isIconOutlined);
|
|
18
19
|
i0.ɵɵadvance();
|
|
19
20
|
i0.ɵɵtextInterpolate(ctx_r0.menuItem.icon);
|
|
20
21
|
} }
|
|
21
22
|
function MenuIconComponent_ng_container_0_Template(rf, ctx) { if (rf & 1) {
|
|
22
23
|
i0.ɵɵelementContainerStart(0);
|
|
23
|
-
i0.ɵɵtemplate(1, MenuIconComponent_ng_container_0_mat_icon_1_Template, 1, 1, "mat-icon", 2)(2, MenuIconComponent_ng_container_0_ng_template_2_Template, 2,
|
|
24
|
+
i0.ɵɵtemplate(1, MenuIconComponent_ng_container_0_mat_icon_1_Template, 1, 1, "mat-icon", 2)(2, MenuIconComponent_ng_container_0_ng_template_2_Template, 2, 3, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
|
|
24
25
|
i0.ɵɵelementContainerEnd();
|
|
25
26
|
} if (rf & 2) {
|
|
26
27
|
const materialIcon_r2 = i0.ɵɵreference(3);
|
|
@@ -37,7 +38,7 @@ export class MenuIconComponent {
|
|
|
37
38
|
return typeof icon !== "string";
|
|
38
39
|
}
|
|
39
40
|
static { this.ɵfac = function MenuIconComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MenuIconComponent)(); }; }
|
|
40
|
-
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MenuIconComponent, selectors: [["tld-menu-icon"]], inputs: { menuItem: "menuItem" }, decls: 1, vars: 1, consts: [["materialIcon", ""], [4, "ngIf"], ["class", "menu-icon", 3, "svgIcon", 4, "ngIf", "ngIfElse"], [1, "menu-icon", 3, "svgIcon"], [1, "menu-icon"]], template: function MenuIconComponent_Template(rf, ctx) { if (rf & 1) {
|
|
41
|
+
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MenuIconComponent, selectors: [["tld-menu-icon"]], inputs: { menuItem: "menuItem" }, decls: 1, vars: 1, consts: [["materialIcon", ""], [4, "ngIf"], ["class", "menu-icon", 3, "svgIcon", 4, "ngIf", "ngIfElse"], [1, "menu-icon", 3, "svgIcon"], [1, "material-icons", "menu-icon"]], template: function MenuIconComponent_Template(rf, ctx) { if (rf & 1) {
|
|
41
42
|
i0.ɵɵtemplate(0, MenuIconComponent_ng_container_0_Template, 4, 2, "ng-container", 1);
|
|
42
43
|
} if (rf & 2) {
|
|
43
44
|
i0.ɵɵproperty("ngIf", ctx.menuItem.icon);
|
|
@@ -45,9 +46,9 @@ export class MenuIconComponent {
|
|
|
45
46
|
}
|
|
46
47
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuIconComponent, [{
|
|
47
48
|
type: Component,
|
|
48
|
-
args: [{ selector: 'tld-menu-icon', template: "<ng-container *ngIf=\"menuItem.icon\">\r\n <mat-icon class=\"menu-icon\" [svgIcon]=\"menuItem.icon\" *ngIf=\"!menuItem.materialIcon; else materialIcon;\"></mat-icon>\r\n <ng-template #materialIcon>\r\n <
|
|
49
|
+
args: [{ selector: 'tld-menu-icon', template: "<ng-container *ngIf=\"menuItem.icon\">\r\n <mat-icon class=\"menu-icon\" [svgIcon]=\"menuItem.icon\" *ngIf=\"!menuItem.materialIcon; else materialIcon;\"></mat-icon>\r\n <ng-template #materialIcon>\r\n <span class=\"material-icons menu-icon\" [class.material-icons-outlined]=\"menuItem?.isIconOutlined\">{{menuItem.icon}}</span>\r\n </ng-template>\r\n</ng-container>\r\n", styles: [".menu-icon{color:var(--base-30);margin:auto;min-width:24px;min-height:24px;max-width:24px;max-height:24px;vertical-align:middle}\n"] }]
|
|
49
50
|
}], null, { menuItem: [{
|
|
50
51
|
type: Input
|
|
51
52
|
}] }); })();
|
|
52
53
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MenuIconComponent, { className: "MenuIconComponent", filePath: "lib\\components\\menu-icon\\menu-icon.component.ts", lineNumber: 10 }); })();
|
|
53
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
54
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWVudS1pY29uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1tZW51L3NyYy9saWIvY29tcG9uZW50cy9tZW51LWljb24vbWVudS1pY29uLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1tZW51L3NyYy9saWIvY29tcG9uZW50cy9tZW51LWljb24vbWVudS1pY29uLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBRWpELE9BQU8sRUFBa0IsMEJBQTBCLEVBQUUsTUFBTSxjQUFjLENBQUM7Ozs7O0lDRHhFLDhCQUFvSDs7O0lBQXhGLDhDQUF5Qjs7O0lBRW5ELCtCQUFrRztJQUFBLFlBQWlCO0lBQUEsaUJBQU87OztJQUFuRiwwR0FBMEQ7SUFBQyxjQUFpQjtJQUFqQiwwQ0FBaUI7OztJQUh2SCw2QkFBb0M7SUFFbEMsQUFEQSwyRkFBeUcscUhBQzlFOzs7OztJQUQ0QixjQUE4QjtJQUFBLEFBQTlCLG9EQUE4Qiw2QkFBa0I7O0FEUXpHLE1BQU0sT0FBTyxpQkFBaUI7SUFMOUI7UUFNVyxpQkFBWSxHQUFHLDBCQUEwQixDQUFDO0tBUXBEO0lBSkMsOERBQThEO0lBQzlELGVBQWUsQ0FBQyxJQUFTO1FBQ3ZCLE9BQU8sT0FBTyxJQUFJLEtBQUssUUFBUSxDQUFDO0lBQ2xDLENBQUM7a0hBUlUsaUJBQWlCO29FQUFqQixpQkFBaUI7WUNUOUIsb0ZBQW9DOztZQUFyQix3Q0FBbUI7OztpRkRTckIsaUJBQWlCO2NBTDdCLFNBQVM7MkJBQ0UsZUFBZTtnQkFPaEIsUUFBUTtrQkFBaEIsS0FBSzs7a0ZBSEssaUJBQWlCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBNZWRpYSB9IGZyb20gJ0B0aWxkZS1ubHAvc3RyYXBpLW1vZGVscyc7XHJcbmltcG9ydCB7IEN1c3RvbU1lbnVJdGVtLCBNRU5VX0lDT05fU1RSQVBJX0VYVEVOU0lPTiB9IGZyb20gJy4uLy4uL21vZGVscyc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ3RsZC1tZW51LWljb24nLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi9tZW51LWljb24uY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsczogWycuL21lbnUtaWNvbi5jb21wb25lbnQuc2NzcyddXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBNZW51SWNvbkNvbXBvbmVudCB7XHJcbiAgcmVhZG9ubHkgc3ZnRXh0ZW5zaW9uID0gTUVOVV9JQ09OX1NUUkFQSV9FWFRFTlNJT047XHJcblxyXG4gIEBJbnB1dCgpIG1lbnVJdGVtITogQ3VzdG9tTWVudUl0ZW07XHJcblxyXG4gIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBAdHlwZXNjcmlwdC1lc2xpbnQvbm8tZXhwbGljaXQtYW55XHJcbiAgaXNJY29uTWVkaWFUeXBlKGljb246IGFueSk6IGljb24gaXMgTWVkaWEge1xyXG4gICAgcmV0dXJuIHR5cGVvZiBpY29uICE9PSBcInN0cmluZ1wiO1xyXG4gIH1cclxufVxyXG4iLCI8bmctY29udGFpbmVyICpuZ0lmPVwibWVudUl0ZW0uaWNvblwiPlxyXG4gIDxtYXQtaWNvbiBjbGFzcz1cIm1lbnUtaWNvblwiIFtzdmdJY29uXT1cIm1lbnVJdGVtLmljb25cIiAqbmdJZj1cIiFtZW51SXRlbS5tYXRlcmlhbEljb247IGVsc2UgbWF0ZXJpYWxJY29uO1wiPjwvbWF0LWljb24+XHJcbiAgPG5nLXRlbXBsYXRlICNtYXRlcmlhbEljb24+XHJcbiAgICA8c3BhbiBjbGFzcz1cIm1hdGVyaWFsLWljb25zIG1lbnUtaWNvblwiIFtjbGFzcy5tYXRlcmlhbC1pY29ucy1vdXRsaW5lZF09XCJtZW51SXRlbT8uaXNJY29uT3V0bGluZWRcIj57e21lbnVJdGVtLmljb259fTwvc3Bhbj5cclxuICA8L25nLXRlbXBsYXRlPlxyXG48L25nLWNvbnRhaW5lcj5cclxuIl19
|
|
@@ -155,11 +155,11 @@ export class MenuItemListComponent {
|
|
|
155
155
|
i0.ɵɵproperty("fxLayoutAlign", ctx.menuLayoutDirection);
|
|
156
156
|
i0.ɵɵadvance();
|
|
157
157
|
i0.ɵɵproperty("ngForOf", ctx.items);
|
|
158
|
-
} }, dependencies: [i1.DefaultLayoutDirective, i1.DefaultLayoutGapDirective, i1.DefaultLayoutAlignDirective, i2.DefaultClassDirective, i3.NgForOf, i3.NgIf, i3.NgTemplateOutlet, i4.MatTooltip, MenuItemListComponent, i5.MenuIconComponent, i6.MenuItemLinkComponent, i7.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}"] }); }
|
|
158
|
+
} }, dependencies: [i1.DefaultLayoutDirective, i1.DefaultLayoutGapDirective, i1.DefaultLayoutAlignDirective, i2.DefaultClassDirective, i3.NgForOf, i3.NgIf, i3.NgTemplateOutlet, i4.MatTooltip, MenuItemListComponent, i5.MenuIconComponent, i6.MenuItemLinkComponent, i7.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%]{margin-left:20px;padding:8px 0 24px;font-size:16px;font-weight:600}.menu-item-list[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_slide-in .3s forwards}@keyframes _ngcontent-%COMP%_slide-in{0%{margin-left:-100px}to{margin-left:0}}"] }); }
|
|
159
159
|
}
|
|
160
160
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuItemListComponent, [{
|
|
161
161
|
type: Component,
|
|
162
|
-
args: [{ selector: 'menu-item-list', template: "<div class=\"menu-list-wrapper\">\r\n <div *ngIf=\"titleKey && showTitle && labelsVisible\" fxLayoutAlign=\"start center\" class=\"menu-item-list-title\">\r\n {{ titleKey | translate }}\r\n </div>\r\n <div fxLayout=\"column\" [fxLayoutAlign]=\"menuLayoutDirection\" class=\"menu-item-list\">\r\n <ng-container *ngFor=\"let menuItem of items\">\r\n <ng-container\r\n *ngTemplateOutlet=\"!menuItem.showChildren || !menuItem.children || menuItem?.children?.length === 0 ? menuItemLink : itemWithChildren; context: {menuItem: menuItem}\">\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n</div>\r\n\r\n<ng-template #itemWithChildren let-menuItem=\"menuItem\">\r\n <button [attr.id]=\"menuItem.customId\" [ngClass.lt-md]=\"'mob-menu-item'\" [fxLayout]=\"menuItemLayout\" class=\"text-m menu-item\"\r\n [matTooltip]=\"!labelsVisible ? (menuItem.title | translate) : ''\" matTooltipPosition=\"after\" [class.menu-labels-visible]=\"labelsVisible\"\r\n [fxLayoutAlign]=\"menuLayoutDirection\" matTooltipClass=\"menu-tooltip\" fxLayoutGap=\"0.375rem\"\r\n [class.active-menu-item]=\"activeItem?.link && menuItem === activeItem\" (click)=\"toggleItemExpand($event,menuItem)\">\r\n <ng-container *ngIf=\"showIcons && menuItem.icon\">\r\n <tld-menu-icon [menuItem]=\"menuItem\"></tld-menu-icon>\r\n </ng-container>\r\n <ng-container *ngIf=\"labelsVisible\">\r\n <span class=\"menu-item-title\">\r\n <span class=\"title-content\">{{ menuItem.title | translate }}</span></span>\r\n <span class=\"material-icons\" *ngIf=\"menuItem.showChildren && menuItem.children\">\r\n {{ menuItem.expanded ? 'arrow_drop_up' : 'arrow_drop_down' }}\r\n </span>\r\n </ng-container>\r\n </button>\r\n <ng-container *ngIf=\"menuItem.showChildren && menuItem.expanded && labelsVisible\">\r\n <menu-item-list 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}\n"] }]
|
|
162
|
+
args: [{ selector: 'menu-item-list', template: "<div class=\"menu-list-wrapper\">\r\n <div *ngIf=\"titleKey && showTitle && labelsVisible\" fxLayoutAlign=\"start center\" class=\"menu-item-list-title\">\r\n {{ titleKey | translate }}\r\n </div>\r\n <div fxLayout=\"column\" [fxLayoutAlign]=\"menuLayoutDirection\" class=\"menu-item-list\">\r\n <ng-container *ngFor=\"let menuItem of items\">\r\n <ng-container\r\n *ngTemplateOutlet=\"!menuItem.showChildren || !menuItem.children || menuItem?.children?.length === 0 ? menuItemLink : itemWithChildren; context: {menuItem: menuItem}\">\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n</div>\r\n\r\n<ng-template #itemWithChildren let-menuItem=\"menuItem\">\r\n <button [attr.id]=\"menuItem.customId\" [ngClass.lt-md]=\"'mob-menu-item'\" [fxLayout]=\"menuItemLayout\" class=\"text-m menu-item\"\r\n [matTooltip]=\"!labelsVisible ? (menuItem.title | translate) : ''\" matTooltipPosition=\"after\" [class.menu-labels-visible]=\"labelsVisible\"\r\n [fxLayoutAlign]=\"menuLayoutDirection\" matTooltipClass=\"menu-tooltip\" fxLayoutGap=\"0.375rem\"\r\n [class.active-menu-item]=\"activeItem?.link && menuItem === activeItem\" (click)=\"toggleItemExpand($event,menuItem)\">\r\n <ng-container *ngIf=\"showIcons && menuItem.icon\">\r\n <tld-menu-icon [menuItem]=\"menuItem\"></tld-menu-icon>\r\n </ng-container>\r\n <ng-container *ngIf=\"labelsVisible\">\r\n <span class=\"menu-item-title\">\r\n <span class=\"title-content\">{{ menuItem.title | translate }}</span></span>\r\n <span class=\"material-icons\" *ngIf=\"menuItem.showChildren && menuItem.children\">\r\n {{ menuItem.expanded ? 'arrow_drop_up' : 'arrow_drop_down' }}\r\n </span>\r\n </ng-container>\r\n </button>\r\n <ng-container *ngIf=\"menuItem.showChildren && menuItem.expanded && labelsVisible\">\r\n <menu-item-list 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{margin-left:20px;padding:8px 0 24px;font-size:16px;font-weight:600}.menu-item-list{animation:slide-in .3s forwards}@keyframes slide-in{0%{margin-left:-100px}to{margin-left:0}}\n"] }]
|
|
163
163
|
}], null, { direction: [{
|
|
164
164
|
type: Input
|
|
165
165
|
}], labelsVisible: [{
|