@tilde-nlp/ngx-menu 5.0.1 → 5.0.3
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 +59 -22
- package/esm2022/lib/components/menu-icon/menu-icon.component.mjs +39 -9
- package/esm2022/lib/components/menu-item-icon/menu-item-icon.component.mjs +60 -19
- package/esm2022/lib/components/menu-item-link/menu-item-link.component.mjs +61 -22
- package/esm2022/lib/components/menu-item-list/menu-item-list.component.mjs +141 -25
- package/esm2022/lib/components/modal-nav-menu/modal-nav-menu.component.mjs +57 -14
- package/esm2022/lib/components/nav-base/nav-base.component.mjs +14 -9
- package/esm2022/lib/components/side-nav-menu/side-nav-menu.component.mjs +51 -14
- package/esm2022/lib/menu.module.mjs +66 -65
- package/esm2022/lib/models/custom-menu-item.mjs +1 -1
- package/esm2022/lib/services/menu-items.service.mjs +14 -14
- package/esm2022/lib/services/strapi.service.mjs +17 -17
- package/fesm2022/tilde-nlp-ngx-menu.mjs +567 -219
- package/fesm2022/tilde-nlp-ngx-menu.mjs.map +1 -1
- package/lib/components/menu-columns/menu-columns.component.d.ts +3 -3
- package/lib/components/menu-item-icon/menu-item-icon.component.d.ts +1 -2
- package/lib/components/menu-item-list/menu-item-list.component.d.ts +1 -2
- package/lib/components/modal-nav-menu/modal-nav-menu.component.d.ts +1 -2
- package/lib/models/custom-menu-item.d.ts +1 -0
- package/package.json +5 -2
|
@@ -13,18 +13,18 @@ import * as i3 from '@angular/common';
|
|
|
13
13
|
import { CommonModule } from '@angular/common';
|
|
14
14
|
import * as i2$1 from '@angular/material/icon';
|
|
15
15
|
import { MatIconModule } from '@angular/material/icon';
|
|
16
|
-
import * as i7
|
|
16
|
+
import * as i7 from '@angular/material/button';
|
|
17
17
|
import { MatButtonModule } from '@angular/material/button';
|
|
18
|
-
import * as i4
|
|
19
|
-
import * as
|
|
20
|
-
import * as
|
|
18
|
+
import * as i4 from '@angular/material/divider';
|
|
19
|
+
import * as i3$1 from '@ngbracket/ngx-layout/extended';
|
|
20
|
+
import * as i5 from '@angular/material/tooltip';
|
|
21
21
|
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
22
|
-
import * as
|
|
22
|
+
import * as i9 from '@ngx-translate/core';
|
|
23
23
|
import { TranslateModule } from '@ngx-translate/core';
|
|
24
24
|
import { FlexLayoutModule } from '@ngbracket/ngx-layout';
|
|
25
25
|
import { MatDialogModule } from '@angular/material/dialog';
|
|
26
26
|
import { MatListModule } from '@angular/material/list';
|
|
27
|
-
import * as i7$
|
|
27
|
+
import * as i7$1 from '@angular/material/menu';
|
|
28
28
|
import { MatMenuModule } from '@angular/material/menu';
|
|
29
29
|
import { HttpClientModule } from '@angular/common/http';
|
|
30
30
|
|
|
@@ -105,23 +105,23 @@ class StarpiMenuService {
|
|
|
105
105
|
customId: item.customId
|
|
106
106
|
};
|
|
107
107
|
}
|
|
108
|
-
static { this.ɵfac =
|
|
109
|
-
static { this.ɵprov = i0.ɵɵ
|
|
108
|
+
static { this.ɵfac = function StarpiMenuService_Factory(t) { return new (t || StarpiMenuService)(i0.ɵɵinject(i1.StrapiSubscriptionService), i0.ɵɵinject(MENU_SHARED_CONFIG, 8), i0.ɵɵinject(STRAPI_API_CONFIG_TOKEN), i0.ɵɵinject(i2.IconService)); }; }
|
|
109
|
+
static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: StarpiMenuService, factory: StarpiMenuService.ɵfac, providedIn: 'root' }); }
|
|
110
110
|
}
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
111
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(StarpiMenuService, [{
|
|
112
|
+
type: Injectable,
|
|
113
|
+
args: [{
|
|
114
|
+
providedIn: 'root'
|
|
115
|
+
}]
|
|
116
|
+
}], () => [{ type: i1.StrapiSubscriptionService }, { type: undefined, decorators: [{
|
|
117
|
+
type: Optional
|
|
118
|
+
}, {
|
|
119
|
+
type: Inject,
|
|
120
|
+
args: [MENU_SHARED_CONFIG]
|
|
121
|
+
}] }, { type: undefined, decorators: [{
|
|
122
|
+
type: Inject,
|
|
123
|
+
args: [STRAPI_API_CONFIG_TOKEN]
|
|
124
|
+
}] }, { type: i2.IconService }], null); })();
|
|
125
125
|
|
|
126
126
|
class MenuItemsService {
|
|
127
127
|
get activeElements() { return this._activeElements.asObservable(); }
|
|
@@ -225,20 +225,20 @@ class MenuItemsService {
|
|
|
225
225
|
const routerLinkActiveOptions = element.routerLinkActiveOptions ?? this.menuSharedConfig.activeMatchOptions ?? this.isActiveMatchOptions;
|
|
226
226
|
return this.router.isActive(element.link, routerLinkActiveOptions);
|
|
227
227
|
}
|
|
228
|
-
static { this.ɵfac =
|
|
229
|
-
static { this.ɵprov = i0.ɵɵ
|
|
228
|
+
static { this.ɵfac = function MenuItemsService_Factory(t) { return new (t || MenuItemsService)(i0.ɵɵinject(i1$1.Router), i0.ɵɵinject(MENU_SHARED_CONFIG, 8), i0.ɵɵinject(StarpiMenuService)); }; }
|
|
229
|
+
static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: MenuItemsService, factory: MenuItemsService.ɵfac, providedIn: 'root' }); }
|
|
230
230
|
}
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
231
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuItemsService, [{
|
|
232
|
+
type: Injectable,
|
|
233
|
+
args: [{
|
|
234
|
+
providedIn: 'root'
|
|
235
|
+
}]
|
|
236
|
+
}], () => [{ type: i1$1.Router }, { type: undefined, decorators: [{
|
|
237
|
+
type: Optional
|
|
238
|
+
}, {
|
|
239
|
+
type: Inject,
|
|
240
|
+
args: [MENU_SHARED_CONFIG]
|
|
241
|
+
}] }, { type: StarpiMenuService }], null); })();
|
|
242
242
|
|
|
243
243
|
/** This component is created to help nest some common input params through nav components. */
|
|
244
244
|
class NavBaseComponent {
|
|
@@ -259,15 +259,20 @@ class NavBaseComponent {
|
|
|
259
259
|
destroyBase() {
|
|
260
260
|
this.activeItemSubscription?.unsubscribe();
|
|
261
261
|
}
|
|
262
|
-
static { this.ɵfac =
|
|
263
|
-
static { this.ɵcmp = i0.ɵɵ
|
|
262
|
+
static { this.ɵfac = function NavBaseComponent_Factory(t) { return new (t || NavBaseComponent)(i0.ɵɵdirectiveInject(MenuItemsService)); }; }
|
|
263
|
+
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: NavBaseComponent, selectors: [["nav-base"]], inputs: { direction: "direction" }, decls: 2, vars: 0, template: function NavBaseComponent_Template(rf, ctx) { if (rf & 1) {
|
|
264
|
+
i0.ɵɵelementStart(0, "p");
|
|
265
|
+
i0.ɵɵtext(1, "nav-base works!");
|
|
266
|
+
i0.ɵɵelementEnd();
|
|
267
|
+
} } }); }
|
|
264
268
|
}
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
269
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NavBaseComponent, [{
|
|
270
|
+
type: Component,
|
|
271
|
+
args: [{ selector: 'nav-base', template: "<p>nav-base works!</p>\r\n" }]
|
|
272
|
+
}], () => [{ type: MenuItemsService }], { direction: [{
|
|
273
|
+
type: Input
|
|
274
|
+
}] }); })();
|
|
275
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(NavBaseComponent, { className: "NavBaseComponent", filePath: "lib\\components\\nav-base\\nav-base.component.ts", lineNumber: 13 }); })();
|
|
271
276
|
|
|
272
277
|
var MenuLayoutDirection;
|
|
273
278
|
(function (MenuLayoutDirection) {
|
|
@@ -275,6 +280,31 @@ var MenuLayoutDirection;
|
|
|
275
280
|
MenuLayoutDirection["row"] = "row";
|
|
276
281
|
})(MenuLayoutDirection || (MenuLayoutDirection = {}));
|
|
277
282
|
|
|
283
|
+
function MenuIconComponent_ng_container_0_mat_icon_1_Template(rf, ctx) { if (rf & 1) {
|
|
284
|
+
i0.ɵɵelement(0, "mat-icon", 3);
|
|
285
|
+
} if (rf & 2) {
|
|
286
|
+
const ctx_r0 = i0.ɵɵnextContext(2);
|
|
287
|
+
i0.ɵɵproperty("svgIcon", ctx_r0.menuItem.icon);
|
|
288
|
+
} }
|
|
289
|
+
function MenuIconComponent_ng_container_0_ng_template_2_Template(rf, ctx) { if (rf & 1) {
|
|
290
|
+
i0.ɵɵelementStart(0, "mat-icon", 4);
|
|
291
|
+
i0.ɵɵtext(1);
|
|
292
|
+
i0.ɵɵelementEnd();
|
|
293
|
+
} if (rf & 2) {
|
|
294
|
+
const ctx_r0 = i0.ɵɵnextContext(2);
|
|
295
|
+
i0.ɵɵadvance();
|
|
296
|
+
i0.ɵɵtextInterpolate(ctx_r0.menuItem.icon);
|
|
297
|
+
} }
|
|
298
|
+
function MenuIconComponent_ng_container_0_Template(rf, ctx) { if (rf & 1) {
|
|
299
|
+
i0.ɵɵelementContainerStart(0);
|
|
300
|
+
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, 1, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
|
|
301
|
+
i0.ɵɵelementContainerEnd();
|
|
302
|
+
} if (rf & 2) {
|
|
303
|
+
const materialIcon_r2 = i0.ɵɵreference(3);
|
|
304
|
+
const ctx_r0 = i0.ɵɵnextContext();
|
|
305
|
+
i0.ɵɵadvance();
|
|
306
|
+
i0.ɵɵproperty("ngIf", !ctx_r0.menuItem.materialIcon)("ngIfElse", materialIcon_r2);
|
|
307
|
+
} }
|
|
278
308
|
class MenuIconComponent {
|
|
279
309
|
constructor() {
|
|
280
310
|
this.svgExtension = MENU_ICON_STRAPI_EXTENSION;
|
|
@@ -283,16 +313,43 @@ class MenuIconComponent {
|
|
|
283
313
|
isIconMediaType(icon) {
|
|
284
314
|
return typeof icon !== "string";
|
|
285
315
|
}
|
|
286
|
-
static { this.ɵfac =
|
|
287
|
-
static { this.ɵcmp = i0.ɵɵ
|
|
316
|
+
static { this.ɵfac = function MenuIconComponent_Factory(t) { return new (t || MenuIconComponent)(); }; }
|
|
317
|
+
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) {
|
|
318
|
+
i0.ɵɵtemplate(0, MenuIconComponent_ng_container_0_Template, 4, 2, "ng-container", 1);
|
|
319
|
+
} if (rf & 2) {
|
|
320
|
+
i0.ɵɵproperty("ngIf", ctx.menuItem.icon);
|
|
321
|
+
} }, dependencies: [i3.NgIf, i2$1.MatIcon], styles: [".menu-icon[_ngcontent-%COMP%]{color:var(--base-40);margin:auto;min-width:24px;min-height:24px;max-width:24px;max-height:24px;vertical-align:middle}"] }); }
|
|
288
322
|
}
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
323
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuIconComponent, [{
|
|
324
|
+
type: Component,
|
|
325
|
+
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 <mat-icon class=\"menu-icon\">{{menuItem.icon}}</mat-icon>\r\n </ng-template>\r\n</ng-container>\r\n", styles: [".menu-icon{color:var(--base-40);margin:auto;min-width:24px;min-height:24px;max-width:24px;max-height:24px;vertical-align:middle}\n"] }]
|
|
326
|
+
}], null, { menuItem: [{
|
|
327
|
+
type: Input
|
|
328
|
+
}] }); })();
|
|
329
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MenuIconComponent, { className: "MenuIconComponent", filePath: "lib\\components\\menu-icon\\menu-icon.component.ts", lineNumber: 10 }); })();
|
|
295
330
|
|
|
331
|
+
function MenuItemLinkComponent_ng_container_3_Template(rf, ctx) { if (rf & 1) {
|
|
332
|
+
i0.ɵɵelementContainerStart(0);
|
|
333
|
+
i0.ɵɵelement(1, "tld-menu-icon", 3);
|
|
334
|
+
i0.ɵɵelementContainerEnd();
|
|
335
|
+
} if (rf & 2) {
|
|
336
|
+
const ctx_r0 = i0.ɵɵnextContext();
|
|
337
|
+
i0.ɵɵadvance();
|
|
338
|
+
i0.ɵɵproperty("menuItem", ctx_r0.menuItem);
|
|
339
|
+
} }
|
|
340
|
+
function MenuItemLinkComponent_span_4_Template(rf, ctx) { if (rf & 1) {
|
|
341
|
+
i0.ɵɵelementStart(0, "span", 4)(1, "span", 5);
|
|
342
|
+
i0.ɵɵpipe(2, "translate");
|
|
343
|
+
i0.ɵɵtext(3);
|
|
344
|
+
i0.ɵɵpipe(4, "translate");
|
|
345
|
+
i0.ɵɵelementEnd()();
|
|
346
|
+
} if (rf & 2) {
|
|
347
|
+
const ctx_r0 = i0.ɵɵnextContext();
|
|
348
|
+
i0.ɵɵadvance();
|
|
349
|
+
i0.ɵɵattribute("content", i0.ɵɵpipeBind1(2, 2, ctx_r0.menuItem.title));
|
|
350
|
+
i0.ɵɵadvance(2);
|
|
351
|
+
i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(4, 4, ctx_r0.menuItem.title), " ");
|
|
352
|
+
} }
|
|
296
353
|
class MenuItemLinkComponent {
|
|
297
354
|
get menuItemLayout() {
|
|
298
355
|
return this.direction === MenuLayoutDirection.column ? 'column' : 'row';
|
|
@@ -317,30 +374,147 @@ class MenuItemLinkComponent {
|
|
|
317
374
|
ngOnDestroy() {
|
|
318
375
|
this.placeholderService.unregister(this.placeholderServiceId);
|
|
319
376
|
}
|
|
320
|
-
static { this.ɵfac =
|
|
321
|
-
static { this.ɵcmp = i0.ɵɵ
|
|
377
|
+
static { this.ɵfac = function MenuItemLinkComponent_Factory(t) { return new (t || MenuItemLinkComponent)(i0.ɵɵdirectiveInject(i1.StrapiLinkService), i0.ɵɵdirectiveInject(i1.StrapiVariablesService)); }; }
|
|
378
|
+
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MenuItemLinkComponent, selectors: [["tld-menu-item-link"]], inputs: { direction: "direction", labelsVisible: "labelsVisible", activeItem: "activeItem", showIcons: "showIcons", menuItem: "menuItem" }, decls: 5, vars: 17, consts: [["matTooltipPosition", "after", "matTooltipClass", "menu-tooltip", "fxLayoutGap", "0.375rem", 1, "text-m", "menu-item", 3, "click", "libPlausibleEvent", "fxLayout", "ngClass.lt-md", "matTooltip", "fxLayoutAlign", "href"], [4, "ngIf"], ["class", "menu-item-title", 4, "ngIf"], [3, "menuItem"], [1, "menu-item-title"], [1, "title-content"]], template: function MenuItemLinkComponent_Template(rf, ctx) { if (rf & 1) {
|
|
379
|
+
i0.ɵɵelementStart(0, "a", 0);
|
|
380
|
+
i0.ɵɵpipe(1, "translate");
|
|
381
|
+
i0.ɵɵpipe(2, "translate");
|
|
382
|
+
i0.ɵɵlistener("click", function MenuItemLinkComponent_Template_a_click_0_listener($event) { return ctx.linkClick($event, ctx.menuItem); });
|
|
383
|
+
i0.ɵɵtemplate(3, MenuItemLinkComponent_ng_container_3_Template, 2, 1, "ng-container", 1)(4, MenuItemLinkComponent_span_4_Template, 5, 6, "span", 2);
|
|
384
|
+
i0.ɵɵelementEnd();
|
|
385
|
+
} if (rf & 2) {
|
|
386
|
+
i0.ɵɵclassProp("text-center", ctx.menuItemLayout === "column")("active-menu-item", ctx.menuItem === ctx.activeItem);
|
|
387
|
+
i0.ɵɵproperty("libPlausibleEvent", ctx.menuItem.plausibleEvent)("fxLayout", ctx.menuItemLayout)("ngClass.lt-md", "mobile")("matTooltip", !ctx.labelsVisible ? i0.ɵɵpipeBind1(1, 13, ctx.menuItem.title) : "")("fxLayoutAlign", ctx.menuLayoutDirection)("href", i0.ɵɵpipeBind1(2, 15, ctx.href), i0.ɵɵsanitizeUrl);
|
|
388
|
+
i0.ɵɵattribute("target", ctx.menuItem.externalLink ? "_blank" : "_self");
|
|
389
|
+
i0.ɵɵadvance(3);
|
|
390
|
+
i0.ɵɵproperty("ngIf", ctx.showIcons && ctx.menuItem.icon);
|
|
391
|
+
i0.ɵɵadvance();
|
|
392
|
+
i0.ɵɵproperty("ngIf", ctx.labelsVisible);
|
|
393
|
+
} }, dependencies: [i2$2.DefaultLayoutDirective, i2$2.DefaultLayoutGapDirective, i2$2.DefaultLayoutAlignDirective, i3$1.DefaultClassDirective, i3.NgIf, i5.MatTooltip, i2.PlausibleEventDirective, MenuIconComponent, i9.TranslatePipe] }); }
|
|
322
394
|
}
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
395
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuItemLinkComponent, [{
|
|
396
|
+
type: Component,
|
|
397
|
+
args: [{ selector: 'tld-menu-item-link', template: "<a [libPlausibleEvent]=\"menuItem.plausibleEvent\" [fxLayout]=\"menuItemLayout\"\r\n [ngClass.lt-md]=\"'mobile'\" [class.text-center]=\"menuItemLayout === 'column'\" class=\"text-m menu-item\"\r\n [matTooltip]=\"!labelsVisible ? (menuItem.title | translate) : ''\" matTooltipPosition=\"after\"\r\n [fxLayoutAlign]=\"menuLayoutDirection\" matTooltipClass=\"menu-tooltip\" (click)=\"linkClick($event, menuItem)\"\r\n [href]=\"href | translate\" [attr.target]=\"menuItem.externalLink?'_blank': '_self'\" fxLayoutGap=\"0.375rem\"\r\n [class.active-menu-item]=\"menuItem === activeItem\">\r\n <ng-container *ngIf=\"showIcons && menuItem.icon\">\r\n <tld-menu-icon [menuItem]=\"menuItem\"></tld-menu-icon>\r\n </ng-container>\r\n <span *ngIf=\"labelsVisible\" class=\"menu-item-title\">\r\n <span class=\"title-content\" [attr.content]=\"menuItem.title | translate\">\r\n {{ menuItem.title | translate}}\r\n </span>\r\n </span>\r\n</a>\r\n" }]
|
|
398
|
+
}], () => [{ type: i1.StrapiLinkService }, { type: i1.StrapiVariablesService }], { direction: [{
|
|
399
|
+
type: Input
|
|
400
|
+
}], labelsVisible: [{
|
|
401
|
+
type: Input
|
|
402
|
+
}], activeItem: [{
|
|
403
|
+
type: Input
|
|
404
|
+
}], showIcons: [{
|
|
405
|
+
type: Input
|
|
406
|
+
}], menuItem: [{
|
|
407
|
+
type: Input
|
|
408
|
+
}] }); })();
|
|
409
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MenuItemLinkComponent, { className: "MenuItemLinkComponent", filePath: "lib\\components\\menu-item-link\\menu-item-link.component.ts", lineNumber: 10 }); })();
|
|
337
410
|
|
|
411
|
+
const _c0$2 = a0 => ({ menuItem: a0 });
|
|
412
|
+
function MenuItemListComponent_div_1_Template(rf, ctx) { if (rf & 1) {
|
|
413
|
+
i0.ɵɵelementStart(0, "div", 6);
|
|
414
|
+
i0.ɵɵtext(1);
|
|
415
|
+
i0.ɵɵpipe(2, "translate");
|
|
416
|
+
i0.ɵɵelementEnd();
|
|
417
|
+
} if (rf & 2) {
|
|
418
|
+
const ctx_r0 = i0.ɵɵnextContext();
|
|
419
|
+
i0.ɵɵadvance();
|
|
420
|
+
i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(2, 1, ctx_r0.titleKey), " ");
|
|
421
|
+
} }
|
|
422
|
+
function MenuItemListComponent_ng_container_3_ng_container_1_Template(rf, ctx) { if (rf & 1) {
|
|
423
|
+
i0.ɵɵelementContainer(0);
|
|
424
|
+
} }
|
|
425
|
+
function MenuItemListComponent_ng_container_3_Template(rf, ctx) { if (rf & 1) {
|
|
426
|
+
i0.ɵɵelementContainerStart(0);
|
|
427
|
+
i0.ɵɵtemplate(1, MenuItemListComponent_ng_container_3_ng_container_1_Template, 1, 0, "ng-container", 7);
|
|
428
|
+
i0.ɵɵelementContainerEnd();
|
|
429
|
+
} if (rf & 2) {
|
|
430
|
+
const menuItem_r2 = ctx.$implicit;
|
|
431
|
+
i0.ɵɵnextContext();
|
|
432
|
+
const itemWithChildren_r3 = i0.ɵɵreference(5);
|
|
433
|
+
const menuItemLink_r4 = i0.ɵɵreference(7);
|
|
434
|
+
i0.ɵɵadvance();
|
|
435
|
+
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$2, menuItem_r2));
|
|
436
|
+
} }
|
|
437
|
+
function MenuItemListComponent_ng_template_4_ng_container_2_Template(rf, ctx) { if (rf & 1) {
|
|
438
|
+
i0.ɵɵelementContainerStart(0);
|
|
439
|
+
i0.ɵɵelement(1, "tld-menu-icon", 10);
|
|
440
|
+
i0.ɵɵelementContainerEnd();
|
|
441
|
+
} if (rf & 2) {
|
|
442
|
+
const menuItem_r6 = i0.ɵɵnextContext().menuItem;
|
|
443
|
+
i0.ɵɵadvance();
|
|
444
|
+
i0.ɵɵproperty("menuItem", menuItem_r6);
|
|
445
|
+
} }
|
|
446
|
+
function MenuItemListComponent_ng_template_4_ng_container_3_span_5_Template(rf, ctx) { if (rf & 1) {
|
|
447
|
+
i0.ɵɵelementStart(0, "span", 14);
|
|
448
|
+
i0.ɵɵtext(1);
|
|
449
|
+
i0.ɵɵelementEnd();
|
|
450
|
+
} if (rf & 2) {
|
|
451
|
+
const menuItem_r6 = i0.ɵɵnextContext(2).menuItem;
|
|
452
|
+
i0.ɵɵadvance();
|
|
453
|
+
i0.ɵɵtextInterpolate1(" ", menuItem_r6.expanded ? "arrow_drop_up" : "arrow_drop_down", " ");
|
|
454
|
+
} }
|
|
455
|
+
function MenuItemListComponent_ng_template_4_ng_container_3_Template(rf, ctx) { if (rf & 1) {
|
|
456
|
+
i0.ɵɵelementContainerStart(0);
|
|
457
|
+
i0.ɵɵelementStart(1, "span", 11)(2, "span", 12);
|
|
458
|
+
i0.ɵɵtext(3);
|
|
459
|
+
i0.ɵɵpipe(4, "translate");
|
|
460
|
+
i0.ɵɵelementEnd()();
|
|
461
|
+
i0.ɵɵtemplate(5, MenuItemListComponent_ng_template_4_ng_container_3_span_5_Template, 2, 1, "span", 13);
|
|
462
|
+
i0.ɵɵelementContainerEnd();
|
|
463
|
+
} if (rf & 2) {
|
|
464
|
+
const menuItem_r6 = i0.ɵɵnextContext().menuItem;
|
|
465
|
+
i0.ɵɵadvance(3);
|
|
466
|
+
i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(4, 2, menuItem_r6.title));
|
|
467
|
+
i0.ɵɵadvance(2);
|
|
468
|
+
i0.ɵɵproperty("ngIf", menuItem_r6.showChildren && menuItem_r6.children);
|
|
469
|
+
} }
|
|
470
|
+
function MenuItemListComponent_ng_template_4_ng_container_4_menu_item_list_1_Template(rf, ctx) { if (rf & 1) {
|
|
471
|
+
i0.ɵɵelement(0, "menu-item-list", 16);
|
|
472
|
+
} if (rf & 2) {
|
|
473
|
+
const menuItem_r6 = i0.ɵɵnextContext(2).menuItem;
|
|
474
|
+
const ctx_r0 = i0.ɵɵnextContext();
|
|
475
|
+
i0.ɵɵproperty("items", menuItem_r6.children)("direction", ctx_r0.direction)("labelsVisible", ctx_r0.labelsVisible)("activeItem", ctx_r0.activeItem);
|
|
476
|
+
} }
|
|
477
|
+
function MenuItemListComponent_ng_template_4_ng_container_4_Template(rf, ctx) { if (rf & 1) {
|
|
478
|
+
i0.ɵɵelementContainerStart(0);
|
|
479
|
+
i0.ɵɵtemplate(1, MenuItemListComponent_ng_template_4_ng_container_4_menu_item_list_1_Template, 1, 4, "menu-item-list", 15);
|
|
480
|
+
i0.ɵɵelementContainerEnd();
|
|
481
|
+
} if (rf & 2) {
|
|
482
|
+
const menuItem_r6 = i0.ɵɵnextContext().menuItem;
|
|
483
|
+
i0.ɵɵadvance();
|
|
484
|
+
i0.ɵɵproperty("ngIf", menuItem_r6.children && menuItem_r6.children.length);
|
|
485
|
+
} }
|
|
486
|
+
function MenuItemListComponent_ng_template_4_Template(rf, ctx) { if (rf & 1) {
|
|
487
|
+
const _r5 = i0.ɵɵgetCurrentView();
|
|
488
|
+
i0.ɵɵelementStart(0, "button", 8);
|
|
489
|
+
i0.ɵɵpipe(1, "translate");
|
|
490
|
+
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)); });
|
|
491
|
+
i0.ɵɵtemplate(2, MenuItemListComponent_ng_template_4_ng_container_2_Template, 2, 1, "ng-container", 9)(3, MenuItemListComponent_ng_template_4_ng_container_3_Template, 6, 4, "ng-container", 9);
|
|
492
|
+
i0.ɵɵelementEnd();
|
|
493
|
+
i0.ɵɵtemplate(4, MenuItemListComponent_ng_template_4_ng_container_4_Template, 2, 1, "ng-container", 9);
|
|
494
|
+
} if (rf & 2) {
|
|
495
|
+
const menuItem_r6 = ctx.menuItem;
|
|
496
|
+
const ctx_r0 = i0.ɵɵnextContext();
|
|
497
|
+
i0.ɵɵclassProp("text-center", ctx_r0.menuItemLayout === "column")("menu-labels-visible", ctx_r0.labelsVisible)("active-menu-item", (ctx_r0.activeItem == null ? null : ctx_r0.activeItem.link) && menuItem_r6 === ctx_r0.activeItem);
|
|
498
|
+
i0.ɵɵproperty("fxLayout", ctx_r0.menuItemLayout)("matTooltip", !ctx_r0.labelsVisible ? i0.ɵɵpipeBind1(1, 12, menuItem_r6.title) : "")("fxLayoutAlign", ctx_r0.menuLayoutDirection);
|
|
499
|
+
i0.ɵɵadvance(2);
|
|
500
|
+
i0.ɵɵproperty("ngIf", ctx_r0.showIcons && menuItem_r6.icon);
|
|
501
|
+
i0.ɵɵadvance();
|
|
502
|
+
i0.ɵɵproperty("ngIf", ctx_r0.labelsVisible);
|
|
503
|
+
i0.ɵɵadvance();
|
|
504
|
+
i0.ɵɵproperty("ngIf", menuItem_r6.showChildren && menuItem_r6.expanded && ctx_r0.labelsVisible);
|
|
505
|
+
} }
|
|
506
|
+
function MenuItemListComponent_ng_template_6_Template(rf, ctx) { if (rf & 1) {
|
|
507
|
+
i0.ɵɵelement(0, "tld-menu-item-link", 17);
|
|
508
|
+
} if (rf & 2) {
|
|
509
|
+
const menuItem_r7 = ctx.menuItem;
|
|
510
|
+
const ctx_r0 = i0.ɵɵnextContext();
|
|
511
|
+
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);
|
|
512
|
+
} }
|
|
338
513
|
class MenuItemListComponent {
|
|
339
514
|
constructor() {
|
|
340
515
|
this.direction = MenuLayoutDirection.column;
|
|
341
516
|
this.labelsVisible = true;
|
|
342
517
|
this.showIcons = true;
|
|
343
|
-
this.showChildren = true;
|
|
344
518
|
this.items = [];
|
|
345
519
|
this.toggleExpand = new EventEmitter();
|
|
346
520
|
}
|
|
@@ -360,33 +534,74 @@ class MenuItemListComponent {
|
|
|
360
534
|
toggleItemExpand(event, menuItem) {
|
|
361
535
|
// so menu doesnt get closed.
|
|
362
536
|
event.stopPropagation();
|
|
363
|
-
|
|
537
|
+
if (this.labelsVisible || !menuItem.expanded) {
|
|
538
|
+
menuItem.expanded = !menuItem.expanded;
|
|
539
|
+
}
|
|
364
540
|
this.toggleExpand.next(menuItem);
|
|
365
541
|
}
|
|
366
|
-
static { this.ɵfac =
|
|
367
|
-
static { this.ɵcmp = i0.ɵɵ
|
|
542
|
+
static { this.ɵfac = function MenuItemListComponent_Factory(t) { return new (t || MenuItemListComponent)(); }; }
|
|
543
|
+
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MenuItemListComponent, selectors: [["menu-item-list"]], inputs: { direction: "direction", labelsVisible: "labelsVisible", activeItem: "activeItem", showIcons: "showIcons", items: "items", menuItemGroup: "menuItemGroup" }, outputs: { toggleExpand: "toggleExpand" }, decls: 8, vars: 3, consts: [["itemWithChildren", ""], ["menuItemLink", ""], [1, "menu-list-wrapper"], ["fxLayoutAlign", "start center", "class", "menu-item-list-title", 4, "ngIf"], ["fxLayout", "column", 1, "menu-item-list", 3, "fxLayoutAlign"], [4, "ngFor", "ngForOf"], ["fxLayoutAlign", "start center", 1, "menu-item-list-title"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], ["matTooltipPosition", "after", "matTooltipClass", "menu-tooltip", "fxLayoutGap", "0.375rem", 1, "text-m", "menu-item", 3, "click", "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) {
|
|
544
|
+
i0.ɵɵelementStart(0, "div", 2);
|
|
545
|
+
i0.ɵɵtemplate(1, MenuItemListComponent_div_1_Template, 3, 3, "div", 3);
|
|
546
|
+
i0.ɵɵelementStart(2, "div", 4);
|
|
547
|
+
i0.ɵɵtemplate(3, MenuItemListComponent_ng_container_3_Template, 2, 4, "ng-container", 5);
|
|
548
|
+
i0.ɵɵelementEnd()();
|
|
549
|
+
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);
|
|
550
|
+
} if (rf & 2) {
|
|
551
|
+
i0.ɵɵadvance();
|
|
552
|
+
i0.ɵɵproperty("ngIf", ctx.titleKey && ctx.showTitle && ctx.labelsVisible);
|
|
553
|
+
i0.ɵɵadvance();
|
|
554
|
+
i0.ɵɵproperty("fxLayoutAlign", ctx.menuLayoutDirection);
|
|
555
|
+
i0.ɵɵadvance();
|
|
556
|
+
i0.ɵɵproperty("ngForOf", ctx.items);
|
|
557
|
+
} }, dependencies: [i2$2.DefaultLayoutDirective, i2$2.DefaultLayoutGapDirective, i2$2.DefaultLayoutAlignDirective, i3$1.DefaultClassDirective, i3.NgForOf, i3.NgIf, i3.NgTemplateOutlet, i5.MatTooltip, MenuItemListComponent, MenuIconComponent, MenuItemLinkComponent, i9.TranslatePipe], styles: ["[_nghost-%COMP%]{margin:1em 0;display:inline-block}[_nghost-%COMP%] .menu-list-wrapper .menu-item-list-title{margin-bottom:1em;font-size:1rem;font-weight:500;line-height:1.5rem}[_nghost-%COMP%] .menu-list-wrapper .text-center{text-align:center}[_nghost-%COMP%] .menu-list-wrapper tld-menu-item-link+tld-menu-item-link, [_nghost-%COMP%] .menu-list-wrapper tld-menu-item-link+.menu-item, [_nghost-%COMP%] .menu-list-wrapper .menu-item+tld-menu-item-link, [_nghost-%COMP%] .menu-list-wrapper .menu-item+.menu-item{margin-top:1.5625em}[_nghost-%COMP%] .menu-list-wrapper .child-list tld-menu-item-link{margin-top:1em}[_nghost-%COMP%] .menu-list-wrapper .menu-labels-visible{width:100%}[_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:focus-visible{outline:black solid 2px}[_nghost-%COMP%] .menu-list-wrapper .menu-item:not(button):hover{font-weight:600}[_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{color:var(--primary-accent)!important;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[_ngcontent-%COMP%]{padding-left:30px;margin:0}.mob-menu-item[_ngcontent-%COMP%]{width:100%}"] }); }
|
|
368
558
|
}
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
}] } });
|
|
559
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuItemListComponent, [{
|
|
560
|
+
type: Component,
|
|
561
|
+
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 [fxLayout]=\"menuItemLayout\" [class.text-center]=\"menuItemLayout === 'column'\" 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{margin:1em 0;display:inline-block}:host::ng-deep .menu-list-wrapper .menu-item-list-title{margin-bottom:1em;font-size:1rem;font-weight:500;line-height:1.5rem}:host::ng-deep .menu-list-wrapper .text-center{text-align:center}:host::ng-deep .menu-list-wrapper tld-menu-item-link+tld-menu-item-link,:host::ng-deep .menu-list-wrapper tld-menu-item-link+.menu-item,:host::ng-deep .menu-list-wrapper .menu-item+tld-menu-item-link,:host::ng-deep .menu-list-wrapper .menu-item+.menu-item{margin-top:1.5625em}:host::ng-deep .menu-list-wrapper .child-list tld-menu-item-link{margin-top:1em}:host::ng-deep .menu-list-wrapper .menu-labels-visible{width:100%}: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:focus-visible{outline:black solid 2px}:host::ng-deep .menu-list-wrapper .menu-item:not(button):hover{font-weight:600}: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{color:var(--primary-accent)!important;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{padding-left:30px;margin:0}.mob-menu-item{width:100%}\n"] }]
|
|
562
|
+
}], null, { direction: [{
|
|
563
|
+
type: Input
|
|
564
|
+
}], labelsVisible: [{
|
|
565
|
+
type: Input
|
|
566
|
+
}], activeItem: [{
|
|
567
|
+
type: Input
|
|
568
|
+
}], showIcons: [{
|
|
569
|
+
type: Input
|
|
570
|
+
}], items: [{
|
|
571
|
+
type: Input
|
|
572
|
+
}], menuItemGroup: [{
|
|
573
|
+
type: Input
|
|
574
|
+
}], toggleExpand: [{
|
|
575
|
+
type: Output
|
|
576
|
+
}] }); })();
|
|
577
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MenuItemListComponent, { className: "MenuItemListComponent", filePath: "lib\\components\\menu-item-list\\menu-item-list.component.ts", lineNumber: 11 }); })();
|
|
389
578
|
|
|
579
|
+
function MenuColumnsComponent_ng_container_0_menu_item_list_1_Template(rf, ctx) { if (rf & 1) {
|
|
580
|
+
const _r1 = i0.ɵɵgetCurrentView();
|
|
581
|
+
i0.ɵɵelementStart(0, "menu-item-list", 3);
|
|
582
|
+
i0.ɵɵlistener("toggleExpand", function MenuColumnsComponent_ng_container_0_menu_item_list_1_Template_menu_item_list_toggleExpand_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.elementExpanded($event)); });
|
|
583
|
+
i0.ɵɵelementEnd();
|
|
584
|
+
} if (rf & 2) {
|
|
585
|
+
const group_r3 = i0.ɵɵnextContext().$implicit;
|
|
586
|
+
const ctx_r1 = i0.ɵɵnextContext();
|
|
587
|
+
i0.ɵɵproperty("activeItem", ctx_r1.activeItem)("direction", ctx_r1.direction)("labelsVisible", ctx_r1.labelsVisible)("menuItemGroup", group_r3)("items", group_r3.items);
|
|
588
|
+
} }
|
|
589
|
+
function MenuColumnsComponent_ng_container_0_div_2_Template(rf, ctx) { if (rf & 1) {
|
|
590
|
+
i0.ɵɵelementStart(0, "div", 4);
|
|
591
|
+
i0.ɵɵelement(1, "mat-divider");
|
|
592
|
+
i0.ɵɵelementEnd();
|
|
593
|
+
} }
|
|
594
|
+
function MenuColumnsComponent_ng_container_0_Template(rf, ctx) { if (rf & 1) {
|
|
595
|
+
i0.ɵɵelementContainerStart(0);
|
|
596
|
+
i0.ɵɵtemplate(1, MenuColumnsComponent_ng_container_0_menu_item_list_1_Template, 1, 5, "menu-item-list", 1)(2, MenuColumnsComponent_ng_container_0_div_2_Template, 2, 0, "div", 2);
|
|
597
|
+
i0.ɵɵelementContainerEnd();
|
|
598
|
+
} if (rf & 2) {
|
|
599
|
+
const group_r3 = ctx.$implicit;
|
|
600
|
+
i0.ɵɵadvance();
|
|
601
|
+
i0.ɵɵproperty("ngIf", group_r3.items.length);
|
|
602
|
+
i0.ɵɵadvance();
|
|
603
|
+
i0.ɵɵproperty("ngIf", group_r3.bottomDivider && group_r3.items.length);
|
|
604
|
+
} }
|
|
390
605
|
class MenuColumnsComponent {
|
|
391
606
|
get active() { return this._active; }
|
|
392
607
|
set active(value) {
|
|
@@ -404,6 +619,7 @@ class MenuColumnsComponent {
|
|
|
404
619
|
this.menuItemsService = menuItemsService;
|
|
405
620
|
this.direction = MenuLayoutDirection.column;
|
|
406
621
|
this.labelsVisible = true;
|
|
622
|
+
this.toggleCollapseEvent = new EventEmitter();
|
|
407
623
|
this.subscriptions = [];
|
|
408
624
|
}
|
|
409
625
|
ngOnInit() {
|
|
@@ -414,36 +630,60 @@ class MenuColumnsComponent {
|
|
|
414
630
|
}
|
|
415
631
|
elementExpanded(element) {
|
|
416
632
|
if (!this.active || !element) {
|
|
633
|
+
this.activeItem = undefined;
|
|
417
634
|
return;
|
|
418
635
|
}
|
|
419
|
-
if
|
|
636
|
+
// if menu is collapsed and chilren are expandable, we should open menu
|
|
637
|
+
if (element.showChildren && !this.labelsVisible) {
|
|
638
|
+
this.toggleCollapseEvent.emit();
|
|
639
|
+
}
|
|
640
|
+
if (element.showChildren && element.expanded && element === this.active.root) {
|
|
420
641
|
this.activeItem = this.active.child;
|
|
421
642
|
}
|
|
422
643
|
else {
|
|
423
644
|
this.activeItem = this.active.root;
|
|
424
645
|
}
|
|
425
646
|
}
|
|
426
|
-
static { this.ɵfac =
|
|
427
|
-
static { this.ɵcmp = i0.ɵɵ
|
|
647
|
+
static { this.ɵfac = function MenuColumnsComponent_Factory(t) { return new (t || MenuColumnsComponent)(i0.ɵɵdirectiveInject(i1$1.Router), i0.ɵɵdirectiveInject(MENU_SHARED_CONFIG, 8), i0.ɵɵdirectiveInject(MenuItemsService)); }; }
|
|
648
|
+
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MenuColumnsComponent, selectors: [["menu-columns"]], inputs: { direction: "direction", labelsVisible: "labelsVisible", active: "active" }, outputs: { toggleCollapseEvent: "toggleCollapseEvent" }, decls: 1, vars: 1, consts: [[4, "ngFor", "ngForOf"], [3, "activeItem", "direction", "labelsVisible", "menuItemGroup", "items", "toggleExpand", 4, "ngIf"], ["class", "divider", 4, "ngIf"], [3, "toggleExpand", "activeItem", "direction", "labelsVisible", "menuItemGroup", "items"], [1, "divider"]], template: function MenuColumnsComponent_Template(rf, ctx) { if (rf & 1) {
|
|
649
|
+
i0.ɵɵtemplate(0, MenuColumnsComponent_ng_container_0_Template, 3, 2, "ng-container", 0);
|
|
650
|
+
} if (rf & 2) {
|
|
651
|
+
i0.ɵɵproperty("ngForOf", ctx.mergedGroups);
|
|
652
|
+
} }, dependencies: [i3.NgForOf, i3.NgIf, i4.MatDivider, MenuItemListComponent], styles: ["[_nghost-%COMP%]{display:inline-block}[_nghost-%COMP%] menu-item-list[_ngcontent-%COMP%]{display:block}"] }); }
|
|
428
653
|
}
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
654
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuColumnsComponent, [{
|
|
655
|
+
type: Component,
|
|
656
|
+
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]=\"labelsVisible\" [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}\n"] }]
|
|
657
|
+
}], () => [{ type: i1$1.Router }, { type: undefined, decorators: [{
|
|
658
|
+
type: Optional
|
|
659
|
+
}, {
|
|
660
|
+
type: Inject,
|
|
661
|
+
args: [MENU_SHARED_CONFIG]
|
|
662
|
+
}] }, { type: MenuItemsService }], { direction: [{
|
|
663
|
+
type: Input
|
|
664
|
+
}], labelsVisible: [{
|
|
665
|
+
type: Input
|
|
666
|
+
}], toggleCollapseEvent: [{
|
|
667
|
+
type: Output
|
|
668
|
+
}], active: [{
|
|
669
|
+
type: Input
|
|
670
|
+
}] }); })();
|
|
671
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MenuColumnsComponent, { className: "MenuColumnsComponent", filePath: "lib\\components\\menu-columns\\menu-columns.component.ts", lineNumber: 16 }); })();
|
|
446
672
|
|
|
673
|
+
function SideNavMenuComponent_a_3_Template(rf, ctx) { if (rf & 1) {
|
|
674
|
+
const _r1 = i0.ɵɵgetCurrentView();
|
|
675
|
+
i0.ɵɵelementStart(0, "a", 7);
|
|
676
|
+
i0.ɵɵpipe(1, "translate");
|
|
677
|
+
i0.ɵɵlistener("click", function SideNavMenuComponent_a_3_Template_a_click_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.logoClick($event)); });
|
|
678
|
+
i0.ɵɵelement(2, "img", 8);
|
|
679
|
+
i0.ɵɵelementEnd();
|
|
680
|
+
} if (rf & 2) {
|
|
681
|
+
const ctx_r1 = i0.ɵɵnextContext();
|
|
682
|
+
i0.ɵɵproperty("libPlausibleEvent", ctx_r1.LOGOCLICK_PLAUSIBLE_EVENT)("href", ctx_r1.baseUrl, i0.ɵɵsanitizeUrl);
|
|
683
|
+
i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(1, 4, "MENU.ARIA_LABELS.LOGO"));
|
|
684
|
+
i0.ɵɵadvance(2);
|
|
685
|
+
i0.ɵɵproperty("src", ctx_r1.menuLogoImage, i0.ɵɵsanitizeUrl);
|
|
686
|
+
} }
|
|
447
687
|
class SideNavMenuComponent extends NavBaseComponent {
|
|
448
688
|
get menuLogoImage() {
|
|
449
689
|
return this.collapsed
|
|
@@ -509,21 +749,69 @@ class SideNavMenuComponent extends NavBaseComponent {
|
|
|
509
749
|
}
|
|
510
750
|
this.domService.localStorage.setItem(this.COLLAPSED_LOCAL_STORAGE_KEY, this.collapsed.toString());
|
|
511
751
|
}
|
|
512
|
-
static { this.ɵfac =
|
|
513
|
-
static { this.ɵcmp = i0.ɵɵ
|
|
752
|
+
static { this.ɵfac = function SideNavMenuComponent_Factory(t) { return new (t || SideNavMenuComponent)(i0.ɵɵdirectiveInject(i1.StrapiLinkService), i0.ɵɵdirectiveInject(i2.DOMService), i0.ɵɵdirectiveInject(MenuItemsService), i0.ɵɵdirectiveInject(MENU_SHARED_CONFIG, 8)); }; }
|
|
753
|
+
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SideNavMenuComponent, selectors: [["lib-side-nav-menu"]], inputs: { menuSettings: "menuSettings" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 9, vars: 10, consts: [["fxLayout", "column", 1, "menu-container"], ["fxLayout", "column", "fxFlexFill", "", 1, "content"], ["fxLayout", "row", "fxLayoutAlign", "space-between center", 1, "menu-container-header"], ["fxFlex", "3.125em", "fxLayoutAlign", "start center", 3, "libPlausibleEvent", "href", "click", 4, "ngIf"], ["mat-icon-button", "", 1, "toggler", 3, "click", "libPlausibleEvent"], ["fxLayout", "column", "fxFlex", "", 1, "menu-wrapper"], ["role", "navigation", "fxFlex", "", 3, "toggleCollapseEvent", "direction", "labelsVisible", "active"], ["fxFlex", "3.125em", "fxLayoutAlign", "start center", 3, "click", "libPlausibleEvent", "href"], ["alt", "", 1, "menu-logo", 3, "src"]], template: function SideNavMenuComponent_Template(rf, ctx) { if (rf & 1) {
|
|
754
|
+
i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2);
|
|
755
|
+
i0.ɵɵtemplate(3, SideNavMenuComponent_a_3_Template, 3, 6, "a", 3);
|
|
756
|
+
i0.ɵɵelementStart(4, "button", 4);
|
|
757
|
+
i0.ɵɵlistener("click", function SideNavMenuComponent_Template_button_click_4_listener() { return ctx.toggleCollapse(); });
|
|
758
|
+
i0.ɵɵelementStart(5, "mat-icon");
|
|
759
|
+
i0.ɵɵtext(6);
|
|
760
|
+
i0.ɵɵelementEnd()()();
|
|
761
|
+
i0.ɵɵelementStart(7, "div", 5)(8, "menu-columns", 6);
|
|
762
|
+
i0.ɵɵlistener("toggleCollapseEvent", function SideNavMenuComponent_Template_menu_columns_toggleCollapseEvent_8_listener() { return ctx.toggleCollapse(); });
|
|
763
|
+
i0.ɵɵelementEnd()()()();
|
|
764
|
+
} if (rf & 2) {
|
|
765
|
+
i0.ɵɵstyleProp("width", ctx.sideNavWidth);
|
|
766
|
+
i0.ɵɵclassProp("collapsed", ctx.collapsed);
|
|
767
|
+
i0.ɵɵadvance(3);
|
|
768
|
+
i0.ɵɵproperty("ngIf", !ctx.collapsed);
|
|
769
|
+
i0.ɵɵadvance();
|
|
770
|
+
i0.ɵɵproperty("libPlausibleEvent", ctx.collapsed ? ctx.EXPAND_PLAUSIBLE_EVENT : ctx.COLLAPSE_PLAUSIBLE_EVENT);
|
|
771
|
+
i0.ɵɵadvance(2);
|
|
772
|
+
i0.ɵɵtextInterpolate(ctx.collapsed ? "keyboard_double_arrow_right" : "keyboard_double_arrow_left");
|
|
773
|
+
i0.ɵɵadvance(2);
|
|
774
|
+
i0.ɵɵproperty("direction", ctx.direction)("labelsVisible", !ctx.collapsed)("active", ctx.active);
|
|
775
|
+
} }, dependencies: [i2$2.DefaultLayoutDirective, i2$2.DefaultLayoutAlignDirective, i2$2.FlexFillDirective, i2$2.DefaultFlexDirective, i3.NgIf, i2$1.MatIcon, i7.MatIconButton, i2.PlausibleEventDirective, MenuColumnsComponent, i9.TranslatePipe], styles: [".menu-container[_ngcontent-%COMP%]{height:100%;overflow:auto;background:var(--base-100);border-right:1px solid var(--base-70)}.menu-container[_ngcontent-%COMP%] .menu-container-header[_ngcontent-%COMP%]{margin:24px 0}.menu-container[_ngcontent-%COMP%] .content[_ngcontent-%COMP%]{padding:0 .8em}.menu-container[_ngcontent-%COMP%] .content[_ngcontent-%COMP%] .toggler[_ngcontent-%COMP%]{margin-right:-10px}.menu-container[_ngcontent-%COMP%] .content[_ngcontent-%COMP%] .menu-logo[_ngcontent-%COMP%]{max-width:100%}.menu-container[_ngcontent-%COMP%] .divider[_ngcontent-%COMP%]{width:100%;margin:0}[_nghost-%COMP%] .collapsed .menu-item{padding:calc(.125em + 1px)}[_nghost-%COMP%] .collapsed .menu-item.active-menu-item{padding:.125em;border:1px solid var(--primary-accent);border-radius:var(--default-border-radius)}[_nghost-%COMP%] button.collapse-btn .mat-mdc-button-persistent-ripple, [_nghost-%COMP%] button.toggler .mat-mdc-button-persistent-ripple{display:none}"] }); }
|
|
514
776
|
}
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
777
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SideNavMenuComponent, [{
|
|
778
|
+
type: Component,
|
|
779
|
+
args: [{ selector: 'lib-side-nav-menu', template: "<div class=\"menu-container\" [style.width]=\"sideNavWidth\" fxLayout=\"column\" [class.collapsed]=\"collapsed\">\r\n <div class=\"content\" fxLayout=\"column\" fxFlexFill>\r\n <div class=\"menu-container-header\" fxLayout=\"row\" fxLayoutAlign=\"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 class=\"menu-logo\" [src]=\"menuLogoImage\" alt=\"\" />\r\n </a>\r\n\r\n <button\r\n mat-icon-button\r\n class=\"toggler\"\r\n [libPlausibleEvent]=\"collapsed ? EXPAND_PLAUSIBLE_EVENT : COLLAPSE_PLAUSIBLE_EVENT\"\r\n (click)=\"toggleCollapse()\"\r\n >\r\n <mat-icon>{{ collapsed ? 'keyboard_double_arrow_right' : 'keyboard_double_arrow_left' }}</mat-icon>\r\n </button>\r\n </div>\r\n \r\n <div class=\"menu-wrapper\" fxLayout=\"column\" fxFlex>\r\n <menu-columns (toggleCollapseEvent)=\"toggleCollapse()\" [direction]=\"direction\" role=\"navigation\" fxFlex [labelsVisible]=\"!collapsed\"\r\n [active]=\"active\"></menu-columns>\r\n </div>\r\n </div>", styles: [".menu-container{height:100%;overflow:auto;background:var(--base-100);border-right:1px solid var(--base-70)}.menu-container .menu-container-header{margin:24px 0}.menu-container .content{padding:0 .8em}.menu-container .content .toggler{margin-right:-10px}.menu-container .content .menu-logo{max-width:100%}.menu-container .divider{width:100%;margin:0}:host ::ng-deep .collapsed .menu-item{padding:calc(.125em + 1px)}:host ::ng-deep .collapsed .menu-item.active-menu-item{padding:.125em;border:1px solid var(--primary-accent);border-radius:var(--default-border-radius)}:host::ng-deep button.collapse-btn .mat-mdc-button-persistent-ripple,:host::ng-deep button.toggler .mat-mdc-button-persistent-ripple{display:none}\n"] }]
|
|
780
|
+
}], () => [{ type: i1.StrapiLinkService }, { type: i2.DOMService }, { type: MenuItemsService }, { type: undefined, decorators: [{
|
|
781
|
+
type: Optional
|
|
782
|
+
}, {
|
|
783
|
+
type: Inject,
|
|
784
|
+
args: [MENU_SHARED_CONFIG]
|
|
785
|
+
}] }], { menuSettings: [{
|
|
786
|
+
type: Input
|
|
787
|
+
}] }); })();
|
|
788
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SideNavMenuComponent, { className: "SideNavMenuComponent", filePath: "lib\\components\\side-nav-menu\\side-nav-menu.component.ts", lineNumber: 16 }); })();
|
|
526
789
|
|
|
790
|
+
const _c0$1 = [[["", "top", ""]], [["", "bottom", ""]]];
|
|
791
|
+
const _c1$1 = ["[top]", "[bottom]"];
|
|
792
|
+
function ModalNavMenuComponent_img_3_Template(rf, ctx) { if (rf & 1) {
|
|
793
|
+
i0.ɵɵelement(0, "img", 7);
|
|
794
|
+
} if (rf & 2) {
|
|
795
|
+
const ctx_r0 = i0.ɵɵnextContext();
|
|
796
|
+
i0.ɵɵproperty("src", ctx_r0.menuDialogSettings.logo, i0.ɵɵsanitizeUrl);
|
|
797
|
+
} }
|
|
798
|
+
function ModalNavMenuComponent_span_4_Template(rf, ctx) { if (rf & 1) {
|
|
799
|
+
i0.ɵɵelementStart(0, "span", 8);
|
|
800
|
+
i0.ɵɵtext(1);
|
|
801
|
+
i0.ɵɵpipe(2, "translate");
|
|
802
|
+
i0.ɵɵelementEnd();
|
|
803
|
+
} if (rf & 2) {
|
|
804
|
+
i0.ɵɵadvance();
|
|
805
|
+
i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(2, 1, "MENU.MENU"));
|
|
806
|
+
} }
|
|
807
|
+
function ModalNavMenuComponent_span_5_Template(rf, ctx) { if (rf & 1) {
|
|
808
|
+
const _r2 = i0.ɵɵgetCurrentView();
|
|
809
|
+
i0.ɵɵelementStart(0, "span", 9);
|
|
810
|
+
i0.ɵɵlistener("click", function ModalNavMenuComponent_span_5_Template_span_click_0_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.close()); });
|
|
811
|
+
i0.ɵɵelementStart(1, "mat-icon");
|
|
812
|
+
i0.ɵɵtext(2, "close");
|
|
813
|
+
i0.ɵɵelementEnd()();
|
|
814
|
+
} }
|
|
527
815
|
class ModalNavMenuComponent extends NavBaseComponent {
|
|
528
816
|
constructor(menuItems) {
|
|
529
817
|
super(menuItems);
|
|
@@ -532,7 +820,6 @@ class ModalNavMenuComponent extends NavBaseComponent {
|
|
|
532
820
|
showMenuTitle: false,
|
|
533
821
|
fullScreen: true
|
|
534
822
|
};
|
|
535
|
-
this.showChildren = true;
|
|
536
823
|
// any type because emitter doesn't really need a value
|
|
537
824
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
538
825
|
this.closeButtonClick = new EventEmitter();
|
|
@@ -540,19 +827,38 @@ class ModalNavMenuComponent extends NavBaseComponent {
|
|
|
540
827
|
close() {
|
|
541
828
|
this.closeButtonClick.emit(null);
|
|
542
829
|
}
|
|
543
|
-
static { this.ɵfac =
|
|
544
|
-
static { this.ɵcmp = i0.ɵɵ
|
|
830
|
+
static { this.ɵfac = function ModalNavMenuComponent_Factory(t) { return new (t || ModalNavMenuComponent)(i0.ɵɵdirectiveInject(MenuItemsService)); }; }
|
|
831
|
+
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ModalNavMenuComponent, selectors: [["lib-modal-nav-menu"]], inputs: { menuDialogSettings: "menuDialogSettings" }, outputs: { closeButtonClick: "closeButtonClick" }, features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c1$1, decls: 9, vars: 7, consts: [["fxLayout", "row", "fxFlexFill", "", 1, "content", "menu-modal"], ["fxLayout", "column"], ["fxLayout", "row", 1, "menu-header"], ["width", "75", "alt", "", 3, "src", 4, "ngIf"], ["fxLayoutAlign", "start center", "fxFlex", "", 4, "ngIf"], ["class", "close-icon", "fxFlex", "", "fxLayoutAlign", "end center", 3, "click", 4, "ngIf"], [3, "direction", "active"], ["width", "75", "alt", "", 3, "src"], ["fxLayoutAlign", "start center", "fxFlex", ""], ["fxFlex", "", "fxLayoutAlign", "end center", 1, "close-icon", 3, "click"]], template: function ModalNavMenuComponent_Template(rf, ctx) { if (rf & 1) {
|
|
832
|
+
i0.ɵɵprojectionDef(_c0$1);
|
|
833
|
+
i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2);
|
|
834
|
+
i0.ɵɵtemplate(3, ModalNavMenuComponent_img_3_Template, 1, 1, "img", 3)(4, ModalNavMenuComponent_span_4_Template, 3, 3, "span", 4)(5, ModalNavMenuComponent_span_5_Template, 3, 0, "span", 5);
|
|
835
|
+
i0.ɵɵelementEnd();
|
|
836
|
+
i0.ɵɵprojection(6);
|
|
837
|
+
i0.ɵɵelement(7, "menu-columns", 6);
|
|
838
|
+
i0.ɵɵprojection(8, 1);
|
|
839
|
+
i0.ɵɵelementEnd()();
|
|
840
|
+
} if (rf & 2) {
|
|
841
|
+
i0.ɵɵadvance();
|
|
842
|
+
i0.ɵɵclassProp("full-screen", ctx.menuDialogSettings.fullScreen);
|
|
843
|
+
i0.ɵɵadvance(2);
|
|
844
|
+
i0.ɵɵproperty("ngIf", ctx.menuDialogSettings.logo);
|
|
845
|
+
i0.ɵɵadvance();
|
|
846
|
+
i0.ɵɵproperty("ngIf", ctx.menuDialogSettings.showMenuTitle);
|
|
847
|
+
i0.ɵɵadvance();
|
|
848
|
+
i0.ɵɵproperty("ngIf", ctx.menuDialogSettings.showCloseMenuButton);
|
|
849
|
+
i0.ɵɵadvance(2);
|
|
850
|
+
i0.ɵɵproperty("direction", ctx.direction)("active", ctx.active);
|
|
851
|
+
} }, dependencies: [i2$2.DefaultLayoutDirective, i2$2.DefaultLayoutAlignDirective, i2$2.FlexFillDirective, i2$2.DefaultFlexDirective, i3.NgIf, i2$1.MatIcon, MenuColumnsComponent, i9.TranslatePipe], styles: [".menu-modal[_ngcontent-%COMP%]{background-color:var(--base-100);padding:1.375rem 1.5rem}.close-icon[_ngcontent-%COMP%]{cursor:pointer}.menu-header[_ngcontent-%COMP%]{font-style:normal;font-weight:500;font-size:1.3125rem;line-height:1.75rem;text-align:center;margin:1em 0;color:var(--menu-dark-color)}.close-icon[_ngcontent-%COMP%] > mat-icon[_ngcontent-%COMP%]{transform:scale(1.5)}"] }); }
|
|
545
852
|
}
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
}] } });
|
|
853
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ModalNavMenuComponent, [{
|
|
854
|
+
type: Component,
|
|
855
|
+
args: [{ selector: 'lib-modal-nav-menu', template: "<div class=\"content menu-modal\" fxLayout=\"row\" fxFlexFill>\r\n <div fxLayout=\"column\" [class.full-screen]=\"menuDialogSettings.fullScreen\">\r\n <div fxLayout=\"row\" class=\"menu-header\">\r\n <img [src]=\"menuDialogSettings.logo\" *ngIf=\"menuDialogSettings.logo\" width=\"75\" alt=\"\">\r\n <span *ngIf=\"menuDialogSettings.showMenuTitle\" fxLayoutAlign=\"start center\" fxFlex>{{\r\n \"MENU.MENU\" | translate\r\n }}</span>\r\n <span *ngIf=\"menuDialogSettings.showCloseMenuButton\" (click)=\"close()\" class=\"close-icon\" fxFlex\r\n fxLayoutAlign=\"end center\">\r\n <mat-icon>close</mat-icon>\r\n </span>\r\n </div>\r\n <ng-content select=\"[top]\"></ng-content>\r\n <menu-columns [direction]=\"direction\" [active]=\"active\">\r\n </menu-columns>\r\n <ng-content select=\"[bottom]\"></ng-content>\r\n </div>\r\n</div>", styles: [".menu-modal{background-color:var(--base-100);padding:1.375rem 1.5rem}.close-icon{cursor:pointer}.menu-header{font-style:normal;font-weight:500;font-size:1.3125rem;line-height:1.75rem;text-align:center;margin:1em 0;color:var(--menu-dark-color)}.close-icon>mat-icon{transform:scale(1.5)}\n"] }]
|
|
856
|
+
}], () => [{ type: MenuItemsService }], { menuDialogSettings: [{
|
|
857
|
+
type: Input
|
|
858
|
+
}], closeButtonClick: [{
|
|
859
|
+
type: Output
|
|
860
|
+
}] }); })();
|
|
861
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ModalNavMenuComponent, { className: "ModalNavMenuComponent", filePath: "lib\\components\\modal-nav-menu\\modal-nav-menu.component.ts", lineNumber: 11 }); })();
|
|
556
862
|
|
|
557
863
|
const menuLogo = `
|
|
558
864
|
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
@@ -568,6 +874,20 @@ var TitlePlacement;
|
|
|
568
874
|
TitlePlacement["right"] = "right";
|
|
569
875
|
})(TitlePlacement || (TitlePlacement = {}));
|
|
570
876
|
|
|
877
|
+
const _c0 = ["menuTrigger"];
|
|
878
|
+
const _c1 = [[["", "top", ""]], [["", "bottom", ""]]];
|
|
879
|
+
const _c2 = ["[top]", "[bottom]"];
|
|
880
|
+
function MenuItemIconComponent_span_3_Template(rf, ctx) { if (rf & 1) {
|
|
881
|
+
i0.ɵɵelementStart(0, "span", 8);
|
|
882
|
+
i0.ɵɵtext(1);
|
|
883
|
+
i0.ɵɵpipe(2, "translate");
|
|
884
|
+
i0.ɵɵelementEnd();
|
|
885
|
+
} if (rf & 2) {
|
|
886
|
+
const ctx_r1 = i0.ɵɵnextContext();
|
|
887
|
+
i0.ɵɵproperty("fxFlexOrder", ctx_r1.menuSettings.titlePlacement === ctx_r1.TITLE_PLACEMENT_LEFT ? 1 : 2);
|
|
888
|
+
i0.ɵɵadvance();
|
|
889
|
+
i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(2, 2, "MENU.MENU"));
|
|
890
|
+
} }
|
|
571
891
|
class MenuItemIconComponent {
|
|
572
892
|
constructor(iconService, router) {
|
|
573
893
|
this.iconService = iconService;
|
|
@@ -580,7 +900,6 @@ class MenuItemIconComponent {
|
|
|
580
900
|
disableStrapi: true,
|
|
581
901
|
fullScreen: true
|
|
582
902
|
};
|
|
583
|
-
this.showChildren = true;
|
|
584
903
|
this.direction = MenuLayoutDirection.row;
|
|
585
904
|
this.subscription = [];
|
|
586
905
|
this.iconName = 'tld-menu-icon';
|
|
@@ -609,24 +928,52 @@ class MenuItemIconComponent {
|
|
|
609
928
|
this.iconService.registerIcons({ [this.iconName]: menuLogo });
|
|
610
929
|
}
|
|
611
930
|
}
|
|
612
|
-
static { this.ɵfac =
|
|
613
|
-
static { this.ɵcmp = i0.ɵɵ
|
|
931
|
+
static { this.ɵfac = function MenuItemIconComponent_Factory(t) { return new (t || MenuItemIconComponent)(i0.ɵɵdirectiveInject(i2.IconService), i0.ɵɵdirectiveInject(i1$1.Router)); }; }
|
|
932
|
+
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MenuItemIconComponent, selectors: [["lib-menu-item-icon"]], viewQuery: function MenuItemIconComponent_Query(rf, ctx) { if (rf & 1) {
|
|
933
|
+
i0.ɵɵviewQuery(_c0, 5);
|
|
934
|
+
} if (rf & 2) {
|
|
935
|
+
let _t;
|
|
936
|
+
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.menuTrigger = _t.first);
|
|
937
|
+
} }, inputs: { menuSettings: "menuSettings", menuDialogSettings: "menuDialogSettings", direction: "direction" }, ngContentSelectors: _c2, decls: 10, vars: 12, consts: [["menuTrigger", "matMenuTrigger"], ["menu", ""], ["mat-button", "", 1, "content", "text-l", 3, "disableRipple", "matMenuTriggerFor", "libPlausibleEvent"], ["fxLayout", "row", "fxLayoutGap", "1.5em", "fxLayoutAlign", "center center"], ["class", "menu-label", 3, "fxFlexOrder", 4, "ngIf"], [3, "fxFlexOrder", "svgIcon"], [3, "hasBackdrop"], [3, "click", "closeButtonClick", "menuDialogSettings", "direction"], [1, "menu-label", 3, "fxFlexOrder"]], template: function MenuItemIconComponent_Template(rf, ctx) { if (rf & 1) {
|
|
938
|
+
const _r1 = i0.ɵɵgetCurrentView();
|
|
939
|
+
i0.ɵɵprojectionDef(_c1);
|
|
940
|
+
i0.ɵɵelementStart(0, "button", 2, 0)(2, "span", 3);
|
|
941
|
+
i0.ɵɵtemplate(3, MenuItemIconComponent_span_3_Template, 3, 4, "span", 4);
|
|
942
|
+
i0.ɵɵelement(4, "mat-icon", 5);
|
|
943
|
+
i0.ɵɵelementEnd()();
|
|
944
|
+
i0.ɵɵelementStart(5, "mat-menu", 6, 1)(7, "lib-modal-nav-menu", 7);
|
|
945
|
+
i0.ɵɵlistener("click", function MenuItemIconComponent_Template_lib_modal_nav_menu_click_7_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView($event.stopPropagation()); })("closeButtonClick", function MenuItemIconComponent_Template_lib_modal_nav_menu_closeButtonClick_7_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.closeMenu()); });
|
|
946
|
+
i0.ɵɵprojection(8, 0, ["top", ""]);
|
|
947
|
+
i0.ɵɵprojection(9, 1, ["bottom", ""]);
|
|
948
|
+
i0.ɵɵelementEnd()();
|
|
949
|
+
} if (rf & 2) {
|
|
950
|
+
const menu_r3 = i0.ɵɵreference(6);
|
|
951
|
+
i0.ɵɵproperty("disableRipple", true)("matMenuTriggerFor", menu_r3)("libPlausibleEvent", ctx.PLAUSIBLE_EVENT);
|
|
952
|
+
i0.ɵɵadvance(3);
|
|
953
|
+
i0.ɵɵproperty("ngIf", ctx.menuSettings.titlePlacement !== ctx.TITLE_PLACEMENT_NONE);
|
|
954
|
+
i0.ɵɵadvance();
|
|
955
|
+
i0.ɵɵproperty("fxFlexOrder", ctx.menuSettings.titlePlacement === ctx.TITLE_PLACEMENT_LEFT ? 2 : 1)("svgIcon", ctx.iconName);
|
|
956
|
+
i0.ɵɵadvance();
|
|
957
|
+
i0.ɵɵclassMapInterpolate1("mobile-menu-dialog ", ctx.menuDialogSettings.fullScreen ? "full-screen" : "minimized-screen", "");
|
|
958
|
+
i0.ɵɵproperty("hasBackdrop", true);
|
|
959
|
+
i0.ɵɵadvance(2);
|
|
960
|
+
i0.ɵɵproperty("menuDialogSettings", ctx.menuDialogSettings)("direction", ctx.direction);
|
|
961
|
+
} }, dependencies: [i2$2.DefaultLayoutDirective, i2$2.DefaultLayoutGapDirective, i2$2.DefaultLayoutAlignDirective, i2$2.DefaultFlexOrderDirective, i3.NgIf, i2$1.MatIcon, i7.MatButton, i7$1.MatMenu, i7$1.MatMenuTrigger, i2.PlausibleEventDirective, ModalNavMenuComponent, i9.TranslatePipe], styles: [".content[_ngcontent-%COMP%]{gap:1.5em;cursor:pointer}button.mat-mdc-icon-button[_ngcontent-%COMP%]{width:inherit}[_nghost-%COMP%] button span.mat-button-focus-overlay{opacity:0!important} lib-modal-nav-menu>.content.menu-modal>div.full-screen{width:100%} lib-modal-nav-menu>.content.menu-modal>div.full-screen .menu-list-wrapper .menu-item{width:100%} div:has(.mat-mdc-menu-panel.mobile-menu-dialog.full-screen){width:100%;max-width:100%} .mat-mdc-menu-panel.mobile-menu-dialog.full-screen{width:100vw;margin-top:-2.5em;max-width:none}"] }); }
|
|
614
962
|
}
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
}] } });
|
|
963
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuItemIconComponent, [{
|
|
964
|
+
type: Component,
|
|
965
|
+
args: [{ selector: 'lib-menu-item-icon', template: "<button class=\"content text-l\" mat-button [disableRipple]=\"true\" #menuTrigger=\"matMenuTrigger\"\r\n [matMenuTriggerFor]=\"menu\" [libPlausibleEvent]=\"PLAUSIBLE_EVENT\">\r\n <span fxLayout=\"row\" fxLayoutGap=\"1.5em\" fxLayoutAlign=\"center center\">\r\n <span *ngIf=\"menuSettings.titlePlacement !== TITLE_PLACEMENT_NONE\" [fxFlexOrder]=\"\r\n menuSettings.titlePlacement === TITLE_PLACEMENT_LEFT ? 1 : 2\r\n \" class=\"menu-label\">{{ \"MENU.MENU\" | translate }}</span>\r\n <mat-icon [fxFlexOrder]=\"\r\n menuSettings.titlePlacement === TITLE_PLACEMENT_LEFT ? 2 : 1\r\n \" [svgIcon]=\"iconName\">\r\n </mat-icon>\r\n </span>\r\n</button>\r\n\r\n<mat-menu [hasBackdrop]=\"true\" #menu class=\"mobile-menu-dialog {{\r\n menuDialogSettings.fullScreen ? 'full-screen' : 'minimized-screen'\r\n }}\">\r\n <!-- Click method so that menu does not get closed when clicking outside of items-->\r\n <lib-modal-nav-menu (click)=\"$event.stopPropagation()\" (closeButtonClick)=\"closeMenu()\"\r\n [menuDialogSettings]=\"menuDialogSettings\" [direction]=\"direction\">\r\n <ng-content top select=\"[top]\"></ng-content>\r\n <ng-content bottom select=\"[bottom]\"></ng-content>\r\n </lib-modal-nav-menu>\r\n</mat-menu>", styles: [".content{gap:1.5em;cursor:pointer}button.mat-mdc-icon-button{width:inherit}:host::ng-deep button span.mat-button-focus-overlay{opacity:0!important}::ng-deep lib-modal-nav-menu>.content.menu-modal>div.full-screen{width:100%}::ng-deep lib-modal-nav-menu>.content.menu-modal>div.full-screen .menu-list-wrapper .menu-item{width:100%}::ng-deep div:has(.mat-mdc-menu-panel.mobile-menu-dialog.full-screen){width:100%;max-width:100%}::ng-deep .mat-mdc-menu-panel.mobile-menu-dialog.full-screen{width:100vw;margin-top:-2.5em;max-width:none}\n"] }]
|
|
966
|
+
}], () => [{ type: i2.IconService }, { type: i1$1.Router }], { menuTrigger: [{
|
|
967
|
+
type: ViewChild,
|
|
968
|
+
args: ['menuTrigger']
|
|
969
|
+
}], menuSettings: [{
|
|
970
|
+
type: Input
|
|
971
|
+
}], menuDialogSettings: [{
|
|
972
|
+
type: Input
|
|
973
|
+
}], direction: [{
|
|
974
|
+
type: Input
|
|
975
|
+
}] }); })();
|
|
976
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MenuItemIconComponent, { className: "MenuItemIconComponent", filePath: "lib\\components\\menu-item-icon\\menu-item-icon.component.ts", lineNumber: 14 }); })();
|
|
630
977
|
|
|
631
978
|
class MenuModule {
|
|
632
979
|
static forRoot(config) {
|
|
@@ -637,31 +984,9 @@ class MenuModule {
|
|
|
637
984
|
]
|
|
638
985
|
};
|
|
639
986
|
}
|
|
640
|
-
static { this.ɵfac =
|
|
641
|
-
static { this.ɵmod = i0.ɵɵ
|
|
642
|
-
|
|
643
|
-
MenuItemIconComponent,
|
|
644
|
-
NavBaseComponent,
|
|
645
|
-
MenuItemListComponent,
|
|
646
|
-
MenuColumnsComponent,
|
|
647
|
-
MenuIconComponent,
|
|
648
|
-
MenuItemLinkComponent], imports: [HttpClientModule,
|
|
649
|
-
FlexLayoutModule,
|
|
650
|
-
RouterModule,
|
|
651
|
-
CommonModule,
|
|
652
|
-
MatTooltipModule,
|
|
653
|
-
MatDialogModule,
|
|
654
|
-
MatIconModule,
|
|
655
|
-
MatButtonModule,
|
|
656
|
-
MatListModule,
|
|
657
|
-
MatMenuModule,
|
|
658
|
-
MatIconModule,
|
|
659
|
-
TranslateModule,
|
|
660
|
-
PlausibleModule], exports: [SideNavMenuComponent,
|
|
661
|
-
ModalNavMenuComponent,
|
|
662
|
-
MenuItemIconComponent,
|
|
663
|
-
MenuColumnsComponent] }); }
|
|
664
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MenuModule, providers: [
|
|
987
|
+
static { this.ɵfac = function MenuModule_Factory(t) { return new (t || MenuModule)(); }; }
|
|
988
|
+
static { this.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: MenuModule }); }
|
|
989
|
+
static { this.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ providers: [
|
|
665
990
|
StarpiMenuService
|
|
666
991
|
], imports: [HttpClientModule,
|
|
667
992
|
FlexLayoutModule,
|
|
@@ -677,45 +1002,68 @@ class MenuModule {
|
|
|
677
1002
|
TranslateModule,
|
|
678
1003
|
PlausibleModule] }); }
|
|
679
1004
|
}
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
1005
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuModule, [{
|
|
1006
|
+
type: NgModule,
|
|
1007
|
+
args: [{
|
|
1008
|
+
declarations: [
|
|
1009
|
+
SideNavMenuComponent,
|
|
1010
|
+
ModalNavMenuComponent,
|
|
1011
|
+
MenuItemIconComponent,
|
|
1012
|
+
NavBaseComponent,
|
|
1013
|
+
MenuItemListComponent,
|
|
1014
|
+
MenuColumnsComponent,
|
|
1015
|
+
MenuIconComponent,
|
|
1016
|
+
MenuItemLinkComponent
|
|
1017
|
+
],
|
|
1018
|
+
providers: [
|
|
1019
|
+
StarpiMenuService
|
|
1020
|
+
],
|
|
1021
|
+
imports: [
|
|
1022
|
+
HttpClientModule,
|
|
1023
|
+
FlexLayoutModule,
|
|
1024
|
+
RouterModule,
|
|
1025
|
+
CommonModule,
|
|
1026
|
+
MatTooltipModule,
|
|
1027
|
+
MatDialogModule,
|
|
1028
|
+
MatIconModule,
|
|
1029
|
+
MatButtonModule,
|
|
1030
|
+
MatListModule,
|
|
1031
|
+
MatMenuModule,
|
|
1032
|
+
MatIconModule,
|
|
1033
|
+
TranslateModule,
|
|
1034
|
+
PlausibleModule
|
|
1035
|
+
],
|
|
1036
|
+
exports: [
|
|
1037
|
+
SideNavMenuComponent,
|
|
1038
|
+
ModalNavMenuComponent,
|
|
1039
|
+
MenuItemIconComponent,
|
|
1040
|
+
MenuColumnsComponent,
|
|
1041
|
+
]
|
|
1042
|
+
}]
|
|
1043
|
+
}], null, null); })();
|
|
1044
|
+
(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MenuModule, { declarations: [SideNavMenuComponent,
|
|
1045
|
+
ModalNavMenuComponent,
|
|
1046
|
+
MenuItemIconComponent,
|
|
1047
|
+
NavBaseComponent,
|
|
1048
|
+
MenuItemListComponent,
|
|
1049
|
+
MenuColumnsComponent,
|
|
1050
|
+
MenuIconComponent,
|
|
1051
|
+
MenuItemLinkComponent], imports: [HttpClientModule,
|
|
1052
|
+
FlexLayoutModule,
|
|
1053
|
+
RouterModule,
|
|
1054
|
+
CommonModule,
|
|
1055
|
+
MatTooltipModule,
|
|
1056
|
+
MatDialogModule,
|
|
1057
|
+
MatIconModule,
|
|
1058
|
+
MatButtonModule,
|
|
1059
|
+
MatListModule,
|
|
1060
|
+
MatMenuModule,
|
|
1061
|
+
MatIconModule,
|
|
1062
|
+
TranslateModule,
|
|
1063
|
+
PlausibleModule], exports: [SideNavMenuComponent,
|
|
1064
|
+
ModalNavMenuComponent,
|
|
1065
|
+
MenuItemIconComponent,
|
|
1066
|
+
MenuColumnsComponent] }); })();
|
|
719
1067
|
|
|
720
1068
|
/*
|
|
721
1069
|
* Public API Surface of ngx-menu
|