@tilde-nlp/ngx-menu 3.0.0 → 4.0.0

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.
Files changed (52) hide show
  1. package/{esm2020 → esm2022}/lib/components/menu-columns/menu-columns.component.mjs +4 -4
  2. package/esm2022/lib/components/menu-icon/menu-icon.component.mjs +23 -0
  3. package/{esm2020 → esm2022}/lib/components/menu-item-icon/menu-item-icon.component.mjs +7 -7
  4. package/esm2022/lib/components/menu-item-link/menu-item-link.component.mjs +52 -0
  5. package/esm2022/lib/components/menu-item-list/menu-item-list.component.mjs +61 -0
  6. package/{esm2020 → esm2022}/lib/components/modal-nav-menu/modal-nav-menu.component.mjs +4 -4
  7. package/{esm2020 → esm2022}/lib/components/nav-base/nav-base.component.mjs +4 -4
  8. package/{esm2020 → esm2022}/lib/components/side-nav-menu/side-nav-menu.component.mjs +6 -6
  9. package/esm2022/lib/menu.module.mjs +113 -0
  10. package/{esm2020 → esm2022}/lib/services/strapi.service.mjs +4 -4
  11. package/esm2022/public-api.mjs +16 -0
  12. package/fesm2022/tilde-nlp-ngx-menu.mjs +699 -0
  13. package/fesm2022/tilde-nlp-ngx-menu.mjs.map +1 -0
  14. package/lib/components/menu-columns/menu-columns.component.d.ts +1 -1
  15. package/lib/components/menu-icon/menu-icon.component.d.ts +10 -0
  16. package/lib/components/menu-item-icon/menu-item-icon.component.d.ts +1 -1
  17. package/lib/components/menu-item-link/menu-item-link.component.d.ts +25 -0
  18. package/lib/components/menu-item-list/menu-item-list.component.d.ts +1 -8
  19. package/lib/components/modal-nav-menu/modal-nav-menu.component.d.ts +1 -1
  20. package/lib/components/nav-base/nav-base.component.d.ts +1 -1
  21. package/lib/components/side-nav-menu/side-nav-menu.component.d.ts +1 -1
  22. package/lib/menu.module.d.ts +16 -15
  23. package/package.json +12 -18
  24. package/public-api.d.ts +0 -1
  25. package/esm2020/lib/components/menu-item-list/menu-item-list.component.mjs +0 -73
  26. package/esm2020/lib/components/menu-strapi-item-list/menu-strapi-item-list.component.mjs +0 -15
  27. package/esm2020/lib/menu.module.mjs +0 -109
  28. package/esm2020/public-api.mjs +0 -17
  29. package/fesm2015/tilde-nlp-ngx-menu.mjs +0 -671
  30. package/fesm2015/tilde-nlp-ngx-menu.mjs.map +0 -1
  31. package/fesm2020/tilde-nlp-ngx-menu.mjs +0 -658
  32. package/fesm2020/tilde-nlp-ngx-menu.mjs.map +0 -1
  33. package/lib/components/menu-strapi-item-list/menu-strapi-item-list.component.d.ts +0 -7
  34. /package/{esm2020 → esm2022}/lib/assets/menu-logo.svg.mjs +0 -0
  35. /package/{esm2020 → esm2022}/lib/components/menu-item-icon/menu.model.mjs +0 -0
  36. /package/{esm2020 → esm2022}/lib/components/menu-item-icon/models/menu-dialog-settings.model.mjs +0 -0
  37. /package/{esm2020 → esm2022}/lib/components/menu-item-icon/models/menu-item-settings.model.mjs +0 -0
  38. /package/{esm2020 → esm2022}/lib/components/menu-item-icon/models/menu-title-placement.model.mjs +0 -0
  39. /package/{esm2020 → esm2022}/lib/components/nav-base/models/index.mjs +0 -0
  40. /package/{esm2020 → esm2022}/lib/components/nav-base/models/strapi-data-location.enum.mjs +0 -0
  41. /package/{esm2020 → esm2022}/lib/components/side-nav-menu/index.mjs +0 -0
  42. /package/{esm2020 → esm2022}/lib/components/side-nav-menu/models/index.mjs +0 -0
  43. /package/{esm2020 → esm2022}/lib/components/side-nav-menu/models/side-nav-settings.model.mjs +0 -0
  44. /package/{esm2020 → esm2022}/lib/injection-tokens/index.mjs +0 -0
  45. /package/{esm2020 → esm2022}/lib/injection-tokens/menu-shared-config.token.mjs +0 -0
  46. /package/{esm2020 → esm2022}/lib/models/custom-menu-item.mjs +0 -0
  47. /package/{esm2020 → esm2022}/lib/models/index.mjs +0 -0
  48. /package/{esm2020 → esm2022}/lib/models/menu-icon-strapi-extension.const.mjs +0 -0
  49. /package/{esm2020 → esm2022}/lib/models/menu-item-group.model.mjs +0 -0
  50. /package/{esm2020 → esm2022}/lib/models/menu-layout-direction.model.mjs +0 -0
  51. /package/{esm2020 → esm2022}/lib/models/menu-shared-config.model.mjs +0 -0
  52. /package/{esm2020 → esm2022}/tilde-nlp-ngx-menu.mjs +0 -0
@@ -1,671 +0,0 @@
1
- import * as i0 from '@angular/core';
2
- import { Component, Input, Injectable, Optional, Inject, EventEmitter, Output, ViewChild, NgModule } from '@angular/core';
3
- import * as i1 from '@tilde-nlp/ngx-strapi';
4
- import { STRAPI_API_CONFIG_TOKEN } from '@tilde-nlp/ngx-strapi';
5
- import * as i2 from '@tilde-nlp/ngx-common';
6
- import { PlausibleModule } from '@tilde-nlp/ngx-common';
7
- import * as i3 from '@angular/flex-layout/flex';
8
- import * as i3$1 from '@angular/common';
9
- import { CommonModule } from '@angular/common';
10
- import * as i5$1 from '@angular/material/button';
11
- import { MatButtonModule } from '@angular/material/button';
12
- import * as i5 from '@angular/material/icon';
13
- import { MatIconModule } from '@angular/material/icon';
14
- import * as i2$1 from '@angular/router';
15
- import { NavigationEnd, RouterModule } from '@angular/router';
16
- import { map, filter } from 'rxjs';
17
- import { CollectionTypes } from '@tilde-nlp/strapi-models';
18
- import * as i4$1 from '@angular/material/divider';
19
- import * as i4 from '@angular/material/tooltip';
20
- import { MatTooltipModule } from '@angular/material/tooltip';
21
- import * as i7 from '@ngx-translate/core';
22
- import { TranslateModule } from '@ngx-translate/core';
23
- import { FlexLayoutModule } from '@angular/flex-layout';
24
- import { MatDialogModule } from '@angular/material/dialog';
25
- import { MatListModule } from '@angular/material/list';
26
- import * as i6 from '@angular/material/menu';
27
- import { MatMenuModule } from '@angular/material/menu';
28
- import { HttpClientModule } from '@angular/common/http';
29
-
30
- const MENU_SHARED_CONFIG = "menu-shared-config";
31
-
32
- /** Necessary for menu components to determine where loaded data from strapi should be placed - either in front of pre defined items or in end. */
33
- var StrapiDataLocation;
34
- (function (StrapiDataLocation) {
35
- StrapiDataLocation[StrapiDataLocation["START"] = 0] = "START";
36
- StrapiDataLocation[StrapiDataLocation["END"] = 1] = "END";
37
- })(StrapiDataLocation || (StrapiDataLocation = {}));
38
-
39
- /** This component is created to help nest some common input params through nav components. */
40
- class NavBaseComponent {
41
- constructor() {
42
- this.hideSelectedCustomId = false;
43
- this.strapiGroupBase = {};
44
- this.strapiDataLocation = StrapiDataLocation.END;
45
- }
46
- }
47
- NavBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NavBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
48
- NavBaseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NavBaseComponent, selector: "nav-base", inputs: { hideSelectedCustomId: "hideSelectedCustomId", direction: "direction", menuItemGroups: "menuItemGroups", strapiGroupBase: "strapiGroupBase", strapiDataLocation: "strapiDataLocation" }, ngImport: i0, template: "<p>nav-base works!</p>\r\n", styles: [""] });
49
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NavBaseComponent, decorators: [{
50
- type: Component,
51
- args: [{ selector: 'nav-base', template: "<p>nav-base works!</p>\r\n" }]
52
- }], propDecorators: { hideSelectedCustomId: [{
53
- type: Input
54
- }], direction: [{
55
- type: Input
56
- }], menuItemGroups: [{
57
- type: Input
58
- }], strapiGroupBase: [{
59
- type: Input
60
- }], strapiDataLocation: [{
61
- type: Input
62
- }] } });
63
-
64
- var MenuLayoutDirection;
65
- (function (MenuLayoutDirection) {
66
- MenuLayoutDirection["column"] = "column";
67
- MenuLayoutDirection["row"] = "row";
68
- })(MenuLayoutDirection || (MenuLayoutDirection = {}));
69
-
70
- const MENU_ICON_STRAPI_EXTENSION = ".svg";
71
-
72
- class StarpiMenuService {
73
- constructor(strapiSubscription, menuConfig, strapiConfig, iconService) {
74
- this.strapiSubscription = strapiSubscription;
75
- this.menuConfig = menuConfig;
76
- this.iconService = iconService;
77
- this.svgIconNamePrefix = "strapi-menu-icon-";
78
- this.imgBaseUrl = '';
79
- this.imgBaseUrl = strapiConfig.apiUrl;
80
- }
81
- getMenuItems() {
82
- const responseObs = this.strapiSubscription.subscribeCollectionType(CollectionTypes.MENU_ITEMS)
83
- .pipe(map((items) => {
84
- // Remove disabled items so they are not processed later.
85
- const convertedItems = [];
86
- if (!items || items.length === 0) {
87
- return convertedItems;
88
- }
89
- items = items.filter(item => !item.disabled);
90
- items.forEach((menu) => {
91
- menu.link = this.addBaseUrlIfNecessary(menu.link);
92
- const originalMenuIcon = menu.icon.data.attributes;
93
- if (originalMenuIcon.url.startsWith('/')) {
94
- originalMenuIcon.url = this.imgBaseUrl + originalMenuIcon.url;
95
- }
96
- if (originalMenuIcon.ext === MENU_ICON_STRAPI_EXTENSION) {
97
- // add custom prefix so that it is not easy to mix with other icons in registry
98
- menu.icon.data.attributes.name = this.svgIconNamePrefix + originalMenuIcon.name;
99
- this.iconService.registerIconFromUrl(originalMenuIcon.name, originalMenuIcon.url);
100
- }
101
- convertedItems.push(this.convertToCustomMenuItem(menu));
102
- });
103
- return convertedItems;
104
- }));
105
- return responseObs;
106
- }
107
- unsubscribe() {
108
- this.strapiSubscription.unsubscribe(CollectionTypes.MENU_ITEMS);
109
- }
110
- addBaseUrlIfNecessary(link) {
111
- var _a;
112
- if (!((_a = this.menuConfig) === null || _a === void 0 ? void 0 : _a.baseUrl)) {
113
- return link;
114
- }
115
- try {
116
- new URL(link);
117
- // eslint-disable-next-line no-empty
118
- }
119
- catch (_b) { }
120
- try {
121
- return new URL(link, this.menuConfig.baseUrl).href;
122
- }
123
- catch (_c) {
124
- return link;
125
- }
126
- }
127
- convertToCustomMenuItem(item) {
128
- return {
129
- icon: item.icon.data.attributes.name,
130
- link: item.link,
131
- title: item.title,
132
- externalLink: item.externalLink,
133
- // Material icons should not come from strapi
134
- materialIcon: false,
135
- plausibleEvent: item.plausibleEvent,
136
- customId: item.customId
137
- };
138
- }
139
- }
140
- StarpiMenuService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: StarpiMenuService, deps: [{ token: i1.StrapiSubscriptionService }, { token: MENU_SHARED_CONFIG, optional: true }, { token: STRAPI_API_CONFIG_TOKEN }, { token: i2.IconService }], target: i0.ɵɵFactoryTarget.Injectable });
141
- StarpiMenuService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: StarpiMenuService, providedIn: 'root' });
142
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: StarpiMenuService, decorators: [{
143
- type: Injectable,
144
- args: [{
145
- providedIn: 'root'
146
- }]
147
- }], ctorParameters: function () {
148
- return [{ type: i1.StrapiSubscriptionService }, { type: undefined, decorators: [{
149
- type: Optional
150
- }, {
151
- type: Inject,
152
- args: [MENU_SHARED_CONFIG]
153
- }] }, { type: undefined, decorators: [{
154
- type: Inject,
155
- args: [STRAPI_API_CONFIG_TOKEN]
156
- }] }, { type: i2.IconService }];
157
- } });
158
-
159
- class MenuItemListComponent {
160
- get titleKey() {
161
- var _a;
162
- return (_a = this.menuItemGroup) === null || _a === void 0 ? void 0 : _a.title;
163
- }
164
- get showTitle() {
165
- var _a;
166
- return (_a = this.menuItemGroup) === null || _a === void 0 ? void 0 : _a.showTitle;
167
- }
168
- get menuLayoutDirection() {
169
- return this.direction === MenuLayoutDirection.column
170
- ? 'start center'
171
- : (!this.labelsVisible ? 'start center' : 'start start');
172
- }
173
- get menuItemLayout() {
174
- return this.direction === MenuLayoutDirection.column ? 'column' : 'row';
175
- }
176
- constructor(strapiLinkService) {
177
- this.strapiLinkService = strapiLinkService;
178
- this.direction = MenuLayoutDirection.column;
179
- this.labelsVisible = true;
180
- this.showIcons = true;
181
- this.showChildren = true;
182
- this.items = [];
183
- this.toggleExpand = new EventEmitter();
184
- this.svgExtension = MENU_ICON_STRAPI_EXTENSION;
185
- }
186
- linkClick(event, item) {
187
- this.strapiLinkService.strapiLinkClick(event, item.externalLink);
188
- }
189
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
190
- isIconMediaType(icon) {
191
- return typeof icon !== "string";
192
- }
193
- toggleItemExpand(event, menuItem) {
194
- // so menu doesnt get closed.
195
- event.stopPropagation();
196
- menuItem.expanded = !menuItem.expanded;
197
- this.toggleExpand.next(menuItem);
198
- }
199
- }
200
- MenuItemListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MenuItemListComponent, deps: [{ token: i1.StrapiLinkService }], target: i0.ɵɵFactoryTarget.Component });
201
- MenuItemListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: MenuItemListComponent, selector: "menu-item-list", inputs: { direction: "direction", labelsVisible: "labelsVisible", activeItem: "activeItem", showIcons: "showIcons", showChildren: "showChildren", items: "items", menuItemGroup: "menuItemGroup" }, outputs: { toggleExpand: "toggleExpand" }, ngImport: i0, 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=\"!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\"\r\n [fxLayoutAlign]=\"menuLayoutDirection\" matTooltipClass=\"menu-tooltip\" fxLayoutGap=\"0.375rem\"\r\n [class.active-menu-item]=\"menuItem === activeItem\" (click)=\"toggleItemExpand($event,menuItem)\">\r\n <ng-container *ngIf=\"showIcons && menuItem.icon\">\r\n <ng-template\r\n *ngTemplateOutlet=\"isIconMediaType(menuItem.icon) ? iconImgTemplate : svgIconTemplate; context: { menuItem:menuItem }\">\r\n </ng-template>\r\n </ng-container>\r\n <span *ngIf=\"labelsVisible\" class=\"menu-item-title\">\r\n <span class=\"title-content\">{{ menuItem.title | translate }}</span></span>\r\n <span class=\"material-icons\" *ngIf=\"showChildren && menuItem.children\">\r\n {{menuItem.expanded? 'expand_more' : 'navigate_next'}}\r\n </span>\r\n </button>\r\n <ng-container *ngIf=\"showChildren && menuItem.expanded\">\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\" [showIcons]=\"false\">\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 <a [libPlausibleEvent]=\"menuItem.plausibleEvent\" [fxLayout]=\"menuItemLayout\"\r\n [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]=\"menuItem.link\" [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 <ng-template\r\n *ngTemplateOutlet=\"isIconMediaType(menuItem.icon) ? iconImgTemplate : svgIconTemplate; context: { menuItem:menuItem }\">\r\n </ng-template>\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</ng-template>\r\n\r\n<ng-template #iconImgTemplate let-icon=\"menuItem.icon\">\r\n <mat-icon class=\"menu-icon\" *ngIf=\"icon.ext===svgExtension; else nonSvgTemplate;\" [svgIcon]=\"icon.name\"></mat-icon>\r\n <ng-template #nonSvgTemplate>\r\n <img class=\"menu-icon\" [src]=\"icon.url\" [alt]=\"icon.alternativeText\" />\r\n </ng-template>\r\n</ng-template>\r\n\r\n\r\n<ng-template #svgIconTemplate let-menuItem=\"menuItem\">\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-template>\r\n", 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 .menu-item{cursor:pointer;font-family:Inter;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:hover{font-weight:600}:host::ng-deep .menu-list-wrapper .menu-item+.menu-item{margin-top:1.5625em}: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}: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;flex-grow:100;align-items:start}: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::ng-deep .menu-list-wrapper .menu-icon{color:var(--base-40);margin:auto;min-width:24px;min-height:24px;max-width:24px;max-height:24px}:host.child-list{margin-top:1rem;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:3rem;margin:0}\n"], dependencies: [{ kind: "directive", type: i3.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i3.DefaultLayoutGapDirective, selector: " [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md], [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md], [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm], [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i3.DefaultLayoutAlignDirective, selector: " [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md], [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md], [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm], [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i2.PlausibleEventDirective, selector: "[libPlausibleEvent]", inputs: ["libPlausibleEvent"] }, { kind: "component", type: MenuItemListComponent, selector: "menu-item-list", inputs: ["direction", "labelsVisible", "activeItem", "showIcons", "showChildren", "items", "menuItemGroup"], outputs: ["toggleExpand"] }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }] });
202
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MenuItemListComponent, decorators: [{
203
- type: Component,
204
- 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=\"!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\"\r\n [fxLayoutAlign]=\"menuLayoutDirection\" matTooltipClass=\"menu-tooltip\" fxLayoutGap=\"0.375rem\"\r\n [class.active-menu-item]=\"menuItem === activeItem\" (click)=\"toggleItemExpand($event,menuItem)\">\r\n <ng-container *ngIf=\"showIcons && menuItem.icon\">\r\n <ng-template\r\n *ngTemplateOutlet=\"isIconMediaType(menuItem.icon) ? iconImgTemplate : svgIconTemplate; context: { menuItem:menuItem }\">\r\n </ng-template>\r\n </ng-container>\r\n <span *ngIf=\"labelsVisible\" class=\"menu-item-title\">\r\n <span class=\"title-content\">{{ menuItem.title | translate }}</span></span>\r\n <span class=\"material-icons\" *ngIf=\"showChildren && menuItem.children\">\r\n {{menuItem.expanded? 'expand_more' : 'navigate_next'}}\r\n </span>\r\n </button>\r\n <ng-container *ngIf=\"showChildren && menuItem.expanded\">\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\" [showIcons]=\"false\">\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 <a [libPlausibleEvent]=\"menuItem.plausibleEvent\" [fxLayout]=\"menuItemLayout\"\r\n [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]=\"menuItem.link\" [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 <ng-template\r\n *ngTemplateOutlet=\"isIconMediaType(menuItem.icon) ? iconImgTemplate : svgIconTemplate; context: { menuItem:menuItem }\">\r\n </ng-template>\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</ng-template>\r\n\r\n<ng-template #iconImgTemplate let-icon=\"menuItem.icon\">\r\n <mat-icon class=\"menu-icon\" *ngIf=\"icon.ext===svgExtension; else nonSvgTemplate;\" [svgIcon]=\"icon.name\"></mat-icon>\r\n <ng-template #nonSvgTemplate>\r\n <img class=\"menu-icon\" [src]=\"icon.url\" [alt]=\"icon.alternativeText\" />\r\n </ng-template>\r\n</ng-template>\r\n\r\n\r\n<ng-template #svgIconTemplate let-menuItem=\"menuItem\">\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-template>\r\n", 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 .menu-item{cursor:pointer;font-family:Inter;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:hover{font-weight:600}:host::ng-deep .menu-list-wrapper .menu-item+.menu-item{margin-top:1.5625em}: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}: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;flex-grow:100;align-items:start}: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::ng-deep .menu-list-wrapper .menu-icon{color:var(--base-40);margin:auto;min-width:24px;min-height:24px;max-width:24px;max-height:24px}:host.child-list{margin-top:1rem;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:3rem;margin:0}\n"] }]
205
- }], ctorParameters: function () { return [{ type: i1.StrapiLinkService }]; }, propDecorators: { direction: [{
206
- type: Input
207
- }], labelsVisible: [{
208
- type: Input
209
- }], activeItem: [{
210
- type: Input
211
- }], showIcons: [{
212
- type: Input
213
- }], showChildren: [{
214
- type: Input
215
- }], items: [{
216
- type: Input
217
- }], menuItemGroup: [{
218
- type: Input
219
- }], toggleExpand: [{
220
- type: Output
221
- }] } });
222
-
223
- class MenuColumnsComponent {
224
- get customId() {
225
- var _a;
226
- return (_a = this.menuSharedConfig) === null || _a === void 0 ? void 0 : _a.customId;
227
- }
228
- get strapiGroup() { return this._strapiGroup; }
229
- get menuItemGroups() { return this._menuItemGroups; }
230
- set menuItemGroups(groups) {
231
- this._menuItemGroups = groups !== null && groups !== void 0 ? groups : [];
232
- }
233
- get mergedGroups() { return this._mergedGroups; }
234
- get allRootItems() {
235
- const allItems = this.mergedGroups.map(map => map.items);
236
- let newArray = [];
237
- allItems.forEach((array) => { newArray = newArray.concat(array); });
238
- return newArray;
239
- }
240
- constructor(strapiService, router, menuSharedConfig) {
241
- this.strapiService = strapiService;
242
- this.router = router;
243
- this.menuSharedConfig = menuSharedConfig;
244
- this.direction = MenuLayoutDirection.column;
245
- this.hideSelectedCustomId = false;
246
- this.strapiGroupBase = {};
247
- this.strapiDataLocation = StrapiDataLocation.END;
248
- this.labelsVisible = true;
249
- this._menuItemGroups = [];
250
- this.subscribedToStrapi = false;
251
- this.strapiItems = [];
252
- this._mergedGroups = [];
253
- this.subscriptions = [];
254
- this.isActiveMatchOptions = {
255
- matrixParams: 'exact',
256
- queryParams: 'exact',
257
- paths: 'exact',
258
- fragment: 'exact'
259
- };
260
- }
261
- ngOnInit() {
262
- this.subscribeOnRouteChange();
263
- this.getStrapiData();
264
- }
265
- ngOnDestroy() {
266
- this.subscriptions.forEach(sub => sub.unsubscribe());
267
- if (this.subscribedToStrapi) {
268
- this.strapiService.unsubscribe();
269
- }
270
- }
271
- elementExpanded(element) {
272
- var _a;
273
- if (!this.activeItem) {
274
- return;
275
- }
276
- // if active item is expanded, most likely some of his child should be active, or if it is collapsed, most likely parent should be active if no route change.
277
- if (element !== this.activeItem && !((_a = element.children) === null || _a === void 0 ? void 0 : _a.includes(this.activeItem))) {
278
- return;
279
- }
280
- this.changeActiveElement();
281
- }
282
- getStrapiData() {
283
- var _a;
284
- if (!((_a = this.menuSharedConfig) === null || _a === void 0 ? void 0 : _a.disableStrapi)) {
285
- this.subscribedToStrapi = true;
286
- this.strapiService.getMenuItems().subscribe(this.loadData.bind(this));
287
- }
288
- }
289
- loadData(data) {
290
- // hide custom id based on input param
291
- this.strapiItems = (this.hideSelectedCustomId && this.customId) ? data.filter(item => item.customId !== this.customId) : data;
292
- this._strapiGroup = Object.assign(Object.assign({}, this.strapiGroupBase), { items: this.strapiItems });
293
- if (this.strapiDataLocation === StrapiDataLocation.START) {
294
- this._mergedGroups = [this.strapiGroup, ...this.menuItemGroups];
295
- }
296
- else if (this.strapiDataLocation === StrapiDataLocation.END) {
297
- this._mergedGroups = [...this.menuItemGroups, this.strapiGroup];
298
- }
299
- this.changeActiveElement();
300
- }
301
- subscribeOnRouteChange() {
302
- const subscription = this.router.events
303
- .pipe(filter(e => e instanceof NavigationEnd))
304
- .subscribe(() => { this.changeActiveElement(); });
305
- this.subscriptions.push(subscription);
306
- }
307
- changeActiveElement() {
308
- this.activeItem = this.findActiveElement(this.allRootItems);
309
- }
310
- /** Finds active element from whole list. RouterLink has priority over custom Id. */
311
- // at this version, child elements should not have customId, since that property comes from strapi and strapi provides only one level structure
312
- findActiveElement(list) {
313
- var _a, _b;
314
- if (!list) {
315
- return null;
316
- }
317
- let customIdElement = null;
318
- for (const item of list) {
319
- // Child element has priority over parent, so need to check if any child is active
320
- if (this.isElementRouterLinkActive(item)) {
321
- // If has children and they are visible, return active child or current item
322
- return this.showChildren && item.expanded ? (_a = this.findActiveElement(item.children)) !== null && _a !== void 0 ? _a : item : item;
323
- }
324
- // if selected custom id element is hidden, no need to look for it and set it to active;
325
- else if (!this.hideSelectedCustomId && this.isElementCustomIdActive(item)) {
326
- customIdElement = item;
327
- }
328
- else if (this.showChildren && ((_b = item.children) === null || _b === void 0 ? void 0 : _b.length)) {
329
- const activeChild = this.findActiveElement(item.children);
330
- if (activeChild) {
331
- return activeChild;
332
- }
333
- }
334
- }
335
- return customIdElement;
336
- }
337
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
338
- // private isMenuItem(item: any): item is MenuItems {
339
- // return item.customId;
340
- // }
341
- isElementCustomIdActive(element) {
342
- return this.customId && element.customId === this.customId;
343
- }
344
- isElementRouterLinkActive(element) {
345
- var _a, _b;
346
- const routerLinkActiveOptions = (_b = (_a = element.routerLinkActiveOptions) !== null && _a !== void 0 ? _a : this.menuSharedConfig.activeMatchOptions) !== null && _b !== void 0 ? _b : this.isActiveMatchOptions;
347
- return this.router.isActive(element.link, routerLinkActiveOptions);
348
- }
349
- }
350
- MenuColumnsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MenuColumnsComponent, deps: [{ token: StarpiMenuService }, { token: i2$1.Router }, { token: MENU_SHARED_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component });
351
- MenuColumnsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: MenuColumnsComponent, selector: "menu-columns", inputs: { direction: "direction", hideSelectedCustomId: "hideSelectedCustomId", strapiGroupBase: "strapiGroupBase", strapiDataLocation: "strapiDataLocation", labelsVisible: "labelsVisible", showChildren: "showChildren", menuItemGroups: "menuItemGroups" }, ngImport: i0, template: "<ng-container *ngFor=\"let group of mergedGroups\">\r\n <menu-item-list *ngIf=\"group.items.length\" [activeItem]=\"activeItem\" [direction]=\"direction\" (toggleExpand)=\"elementExpanded($event)\"\r\n [labelsVisible]=\"labelsVisible\" [menuItemGroup]=\"group\" [items]=\"group.items\" [showChildren]=\"showChildren\">\r\n </menu-item-list>\r\n <div class=\"divider\" *ngIf=\"group.bottomDivider\">\r\n <mat-divider></mat-divider>\r\n </div>\r\n</ng-container>\r\n", styles: [":host{display:inline-block}:host menu-item-list{display:block}\n"], dependencies: [{ kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: MenuItemListComponent, selector: "menu-item-list", inputs: ["direction", "labelsVisible", "activeItem", "showIcons", "showChildren", "items", "menuItemGroup"], outputs: ["toggleExpand"] }] });
352
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MenuColumnsComponent, decorators: [{
353
- type: Component,
354
- 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\" (toggleExpand)=\"elementExpanded($event)\"\r\n [labelsVisible]=\"labelsVisible\" [menuItemGroup]=\"group\" [items]=\"group.items\" [showChildren]=\"showChildren\">\r\n </menu-item-list>\r\n <div class=\"divider\" *ngIf=\"group.bottomDivider\">\r\n <mat-divider></mat-divider>\r\n </div>\r\n</ng-container>\r\n", styles: [":host{display:inline-block}:host menu-item-list{display:block}\n"] }]
355
- }], ctorParameters: function () {
356
- return [{ type: StarpiMenuService }, { type: i2$1.Router }, { type: undefined, decorators: [{
357
- type: Optional
358
- }, {
359
- type: Inject,
360
- args: [MENU_SHARED_CONFIG]
361
- }] }];
362
- }, propDecorators: { direction: [{
363
- type: Input
364
- }], hideSelectedCustomId: [{
365
- type: Input
366
- }], strapiGroupBase: [{
367
- type: Input
368
- }], strapiDataLocation: [{
369
- type: Input
370
- }], labelsVisible: [{
371
- type: Input
372
- }], showChildren: [{
373
- type: Input
374
- }], menuItemGroups: [{
375
- type: Input
376
- }] } });
377
-
378
- class SideNavMenuComponent extends NavBaseComponent {
379
- get menuLogoImage() {
380
- var _a;
381
- return this.collapsed
382
- ? (_a = this.menuSettings.menuLogoCollapsed) !== null && _a !== void 0 ? _a : this.menuSettings.menuLogo
383
- : this.menuSettings.menuLogo;
384
- }
385
- get sideNavWidth() {
386
- return this.collapsed ? this.menuSettings.collapsedWidth : this.menuSettings.expandedWidth;
387
- }
388
- constructor(strapiLinkService, domService, menuSharedConfig) {
389
- super();
390
- this.strapiLinkService = strapiLinkService;
391
- this.domService = domService;
392
- this.COLLAPSED_LOCAL_STORAGE_KEY = "TLD_MENU_SIDE_NAV_COLLAPSED";
393
- //#region Plausible event variables for collapse button
394
- this.COLLAPSE_PLAUSIBLE_EVENT_ID = "collapseMenu";
395
- this.COLLAPSE_PLAUSIBLE_ACTION_KEY = "action";
396
- this.LOGOCLICK_PLAUSIBLE_ACTION_ID = "tilde_logo_click";
397
- this.LOGOCLICK_PLAUSIBLE_EVENT = {
398
- eventId: this.LOGOCLICK_PLAUSIBLE_ACTION_ID,
399
- properties: []
400
- };
401
- this.EXPAND_PLAUSIBLE_EVENT = {
402
- eventId: this.COLLAPSE_PLAUSIBLE_EVENT_ID,
403
- properties: [{ key: this.COLLAPSE_PLAUSIBLE_ACTION_KEY, value: "expand" }]
404
- };
405
- this.COLLAPSE_PLAUSIBLE_EVENT = {
406
- eventId: this.COLLAPSE_PLAUSIBLE_EVENT_ID,
407
- properties: [{ key: this.COLLAPSE_PLAUSIBLE_ACTION_KEY, value: "collapse" }]
408
- };
409
- //#endregion
410
- this.menuSettings = {
411
- expandedWidth: '9.375em',
412
- collapsedWidth: '5em',
413
- menuLogo: '',
414
- menuLogoCollapsed: '',
415
- disableStrapi: false
416
- };
417
- this.collapsed = false;
418
- this.baseUrl = menuSharedConfig.baseUrl || '';
419
- }
420
- ngOnInit() {
421
- this.getColapsedFromLocalStorage();
422
- }
423
- logoClick(event) {
424
- this.strapiLinkService.strapiLinkClick(event);
425
- }
426
- toggleCollapse() {
427
- this.collapsed = !this.collapsed;
428
- this.setColapsedFromLocalStorage();
429
- }
430
- getColapsedFromLocalStorage() {
431
- if (!this.domService.localStorage) {
432
- return;
433
- }
434
- this.collapsed = this.domService.localStorage.getItem(this.COLLAPSED_LOCAL_STORAGE_KEY) == 'true' ? true : false;
435
- }
436
- setColapsedFromLocalStorage() {
437
- if (!this.domService.localStorage) {
438
- return;
439
- }
440
- this.domService.localStorage.setItem(this.COLLAPSED_LOCAL_STORAGE_KEY, this.collapsed.toString());
441
- }
442
- }
443
- SideNavMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SideNavMenuComponent, deps: [{ token: i1.StrapiLinkService }, { token: i2.DOMService }, { token: MENU_SHARED_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component });
444
- SideNavMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SideNavMenuComponent, selector: "lib-side-nav-menu", inputs: { menuSettings: "menuSettings" }, usesInheritance: true, ngImport: i0, template: "<div class=\"menu-container\" [style.width]=\"sideNavWidth\" fxLayout=\"column\" [class.collapsed]=\"collapsed\">\r\n <div class=\"content\" fxLayout=\"column\" fxFlexFill>\r\n <a [libPlausibleEvent]=\"LOGOCLICK_PLAUSIBLE_EVENT\" fxFlex=\"3.125em\" [href]=\"baseUrl\" [attr.aria-label]=\"'MENU.ARIA_LABELS.LOGO' | translate\" (click)=\"logoClick($event)\"\r\n fxLayoutAlign=\"center center\" fxFlexOffset=\"1em\">\r\n <img class=\"menu-logo\" [src]=\"menuLogoImage\" alt=\"\" />\r\n </a>\r\n <div class=\"menu-wrapper\" fxLayout=\"column\" fxFlex>\r\n <menu-columns role=\"navigation\" fxFlex [labelsVisible]=\"!collapsed\" [direction]=\"direction\"\r\n [hideSelectedCustomId]=\"hideSelectedCustomId\" [showChildren]=\"false\" [strapiGroupBase]=\"strapiGroupBase\"\r\n [strapiDataLocation]=\"strapiDataLocation\" [menuItemGroups]=\"menuItemGroups\"></menu-columns>\r\n <div fxLayoutAlign=\"center center\">\r\n <button [libPlausibleEvent]=\"COLLAPSE_PLAUSIBLE_EVENT\" class=\"collapse-btn\" [disableRipple]=\"true\"\r\n *ngIf=\"!collapsed; else expandButton\" (click)=\"toggleCollapse()\" mat-button>\r\n <mat-icon>keyboard_arrow_left</mat-icon>\r\n <span> {{ \"MENU.COLLAPSE\" | translate }} </span>\r\n </button>\r\n <ng-template #expandButton>\r\n <button class=\"toggler\" [libPlausibleEvent]=\"EXPAND_PLAUSIBLE_EVENT\" mat-icon-button\r\n (click)=\"toggleCollapse()\">\r\n <mat-icon>keyboard_arrow_right</mat-icon>\r\n </button>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n", styles: [".menu-container{height:100%;overflow:auto;background:var(--base-100);border-right:1px solid var(--base-70)}.menu-container .content{padding:0 .8em}.menu-container .content .menu-logo{margin:auto;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{background-color:transparent;font-size:.8125rem;font-weight:400;line-height:1.25rem;letter-spacing:0px;text-align:left;padding:0!important}:host::ng-deep button.collapse-btn,:host::ng-deep button.toggler{margin-bottom:1em}:host::ng-deep button.collapse-btn .mat-mdc-button-persistent-ripple,:host::ng-deep button.toggler .mat-mdc-button-persistent-ripple{display:none}\n"], dependencies: [{ kind: "directive", type: i3.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i3.DefaultLayoutAlignDirective, selector: " [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md], [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md], [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm], [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i3.DefaultFlexOffsetDirective, selector: " [fxFlexOffset], [fxFlexOffset.xs], [fxFlexOffset.sm], [fxFlexOffset.md], [fxFlexOffset.lg], [fxFlexOffset.xl], [fxFlexOffset.lt-sm], [fxFlexOffset.lt-md], [fxFlexOffset.lt-lg], [fxFlexOffset.lt-xl], [fxFlexOffset.gt-xs], [fxFlexOffset.gt-sm], [fxFlexOffset.gt-md], [fxFlexOffset.gt-lg]", inputs: ["fxFlexOffset", "fxFlexOffset.xs", "fxFlexOffset.sm", "fxFlexOffset.md", "fxFlexOffset.lg", "fxFlexOffset.xl", "fxFlexOffset.lt-sm", "fxFlexOffset.lt-md", "fxFlexOffset.lt-lg", "fxFlexOffset.lt-xl", "fxFlexOffset.gt-xs", "fxFlexOffset.gt-sm", "fxFlexOffset.gt-md", "fxFlexOffset.gt-lg"] }, { kind: "directive", type: i3.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i3.DefaultFlexDirective, selector: " [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md], [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md], [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm], [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i2.PlausibleEventDirective, selector: "[libPlausibleEvent]", inputs: ["libPlausibleEvent"] }, { kind: "component", type: MenuColumnsComponent, selector: "menu-columns", inputs: ["direction", "hideSelectedCustomId", "strapiGroupBase", "strapiDataLocation", "labelsVisible", "showChildren", "menuItemGroups"] }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }] });
445
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SideNavMenuComponent, decorators: [{
446
- type: Component,
447
- 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 <a [libPlausibleEvent]=\"LOGOCLICK_PLAUSIBLE_EVENT\" fxFlex=\"3.125em\" [href]=\"baseUrl\" [attr.aria-label]=\"'MENU.ARIA_LABELS.LOGO' | translate\" (click)=\"logoClick($event)\"\r\n fxLayoutAlign=\"center center\" fxFlexOffset=\"1em\">\r\n <img class=\"menu-logo\" [src]=\"menuLogoImage\" alt=\"\" />\r\n </a>\r\n <div class=\"menu-wrapper\" fxLayout=\"column\" fxFlex>\r\n <menu-columns role=\"navigation\" fxFlex [labelsVisible]=\"!collapsed\" [direction]=\"direction\"\r\n [hideSelectedCustomId]=\"hideSelectedCustomId\" [showChildren]=\"false\" [strapiGroupBase]=\"strapiGroupBase\"\r\n [strapiDataLocation]=\"strapiDataLocation\" [menuItemGroups]=\"menuItemGroups\"></menu-columns>\r\n <div fxLayoutAlign=\"center center\">\r\n <button [libPlausibleEvent]=\"COLLAPSE_PLAUSIBLE_EVENT\" class=\"collapse-btn\" [disableRipple]=\"true\"\r\n *ngIf=\"!collapsed; else expandButton\" (click)=\"toggleCollapse()\" mat-button>\r\n <mat-icon>keyboard_arrow_left</mat-icon>\r\n <span> {{ \"MENU.COLLAPSE\" | translate }} </span>\r\n </button>\r\n <ng-template #expandButton>\r\n <button class=\"toggler\" [libPlausibleEvent]=\"EXPAND_PLAUSIBLE_EVENT\" mat-icon-button\r\n (click)=\"toggleCollapse()\">\r\n <mat-icon>keyboard_arrow_right</mat-icon>\r\n </button>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n", styles: [".menu-container{height:100%;overflow:auto;background:var(--base-100);border-right:1px solid var(--base-70)}.menu-container .content{padding:0 .8em}.menu-container .content .menu-logo{margin:auto;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{background-color:transparent;font-size:.8125rem;font-weight:400;line-height:1.25rem;letter-spacing:0px;text-align:left;padding:0!important}:host::ng-deep button.collapse-btn,:host::ng-deep button.toggler{margin-bottom:1em}:host::ng-deep button.collapse-btn .mat-mdc-button-persistent-ripple,:host::ng-deep button.toggler .mat-mdc-button-persistent-ripple{display:none}\n"] }]
448
- }], ctorParameters: function () {
449
- return [{ type: i1.StrapiLinkService }, { type: i2.DOMService }, { type: undefined, decorators: [{
450
- type: Optional
451
- }, {
452
- type: Inject,
453
- args: [MENU_SHARED_CONFIG]
454
- }] }];
455
- }, propDecorators: { menuSettings: [{
456
- type: Input
457
- }] } });
458
-
459
- class ModalNavMenuComponent extends NavBaseComponent {
460
- constructor() {
461
- super();
462
- this.menuDialogSettings = {
463
- showMenuTitle: false,
464
- fullScreen: true
465
- };
466
- this.showChildren = true;
467
- // any type because emitter doesn't really need a value
468
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
469
- this.closeButtonClick = new EventEmitter();
470
- }
471
- close() {
472
- this.closeButtonClick.emit(null);
473
- }
474
- }
475
- ModalNavMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ModalNavMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
476
- ModalNavMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ModalNavMenuComponent, selector: "lib-modal-nav-menu", inputs: { menuDialogSettings: "menuDialogSettings", showChildren: "showChildren" }, outputs: { closeButtonClick: "closeButtonClick" }, usesInheritance: true, ngImport: i0, 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\" 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 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\" [hideSelectedCustomId]=\"hideSelectedCustomId\" [showChildren]=\"showChildren\"\r\n [strapiGroupBase]=\"strapiGroupBase\" [strapiDataLocation]=\"strapiDataLocation\" [menuItemGroups]=\"menuItemGroups\">\r\n </menu-columns>\r\n <ng-content select=\"[bottom]\"></ng-content>\r\n </div>\r\n</div>\r\n", 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-bottom:1em;color:var(--menu-dark-color)}.close-icon>mat-icon{transform:scale(1.5)}\n"], dependencies: [{ kind: "directive", type: i3.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i3.DefaultLayoutAlignDirective, selector: " [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md], [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md], [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm], [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i3.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i3.DefaultFlexDirective, selector: " [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md], [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md], [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm], [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MenuColumnsComponent, selector: "menu-columns", inputs: ["direction", "hideSelectedCustomId", "strapiGroupBase", "strapiDataLocation", "labelsVisible", "showChildren", "menuItemGroups"] }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }] });
477
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ModalNavMenuComponent, decorators: [{
478
- type: Component,
479
- 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\" 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 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\" [hideSelectedCustomId]=\"hideSelectedCustomId\" [showChildren]=\"showChildren\"\r\n [strapiGroupBase]=\"strapiGroupBase\" [strapiDataLocation]=\"strapiDataLocation\" [menuItemGroups]=\"menuItemGroups\">\r\n </menu-columns>\r\n <ng-content select=\"[bottom]\"></ng-content>\r\n </div>\r\n</div>\r\n", 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-bottom:1em;color:var(--menu-dark-color)}.close-icon>mat-icon{transform:scale(1.5)}\n"] }]
480
- }], ctorParameters: function () { return []; }, propDecorators: { menuDialogSettings: [{
481
- type: Input
482
- }], showChildren: [{
483
- type: Input
484
- }], closeButtonClick: [{
485
- type: Output
486
- }] } });
487
-
488
- const menuLogo = `
489
- <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
490
- <path d="M3.3 6.6C2.36667 6.6 1.58333 6.28333 0.95 5.65C0.316666 5.01667 0 4.23333 0 3.3C0 2.36667 0.316666 1.58333 0.95 0.95C1.58333 0.316666 2.36667 0 3.3 0C4.23333 0 5.01667 0.316666 5.65 0.95C6.28333 1.58333 6.6 2.36667 6.6 3.3C6.6 4.23333 6.28333 5.01667 5.65 5.65C5.01667 6.28333 4.23333 6.6 3.3 6.6ZM16 32C15.0667 32 14.2833 31.6833 13.65 31.05C13.0167 30.4167 12.7 29.6333 12.7 28.7C12.7 27.7667 13.0167 26.9833 13.65 26.35C14.2833 25.7167 15.0667 25.4 16 25.4C16.9333 25.4 17.7167 25.7167 18.35 26.35C18.9833 26.9833 19.3 27.7667 19.3 28.7C19.3 29.6333 18.9833 30.4167 18.35 31.05C17.7167 31.6833 16.9333 32 16 32ZM3.3 32C2.36667 32 1.58333 31.6833 0.95 31.05C0.316666 30.4167 0 29.6333 0 28.7C0 27.7667 0.316666 26.9833 0.95 26.35C1.58333 25.7167 2.36667 25.4 3.3 25.4C4.23333 25.4 5.01667 25.7167 5.65 26.35C6.28333 26.9833 6.6 27.7667 6.6 28.7C6.6 29.6333 6.28333 30.4167 5.65 31.05C5.01667 31.6833 4.23333 32 3.3 32ZM3.3 19.3C2.36667 19.3 1.58333 18.9833 0.95 18.35C0.316666 17.7167 0 16.9333 0 16C0 15.0667 0.316666 14.2833 0.95 13.65C1.58333 13.0167 2.36667 12.7 3.3 12.7C4.23333 12.7 5.01667 13.0167 5.65 13.65C6.28333 14.2833 6.6 15.0667 6.6 16C6.6 16.9333 6.28333 17.7167 5.65 18.35C5.01667 18.9833 4.23333 19.3 3.3 19.3ZM16 19.3C15.0667 19.3 14.2833 18.9833 13.65 18.35C13.0167 17.7167 12.7 16.9333 12.7 16C12.7 15.0667 13.0167 14.2833 13.65 13.65C14.2833 13.0167 15.0667 12.7 16 12.7C16.9333 12.7 17.7167 13.0167 18.35 13.65C18.9833 14.2833 19.3 15.0667 19.3 16C19.3 16.9333 18.9833 17.7167 18.35 18.35C17.7167 18.9833 16.9333 19.3 16 19.3ZM28.7 6.6C27.7667 6.6 26.9833 6.28333 26.35 5.65C25.7167 5.01667 25.4 4.23333 25.4 3.3C25.4 2.36667 25.7167 1.58333 26.35 0.95C26.9833 0.316666 27.7667 0 28.7 0C29.6333 0 30.4167 0.316666 31.05 0.95C31.6833 1.58333 32 2.36667 32 3.3C32 4.23333 31.6833 5.01667 31.05 5.65C30.4167 6.28333 29.6333 6.6 28.7 6.6ZM16 6.6C15.0667 6.6 14.2833 6.28333 13.65 5.65C13.0167 5.01667 12.7 4.23333 12.7 3.3C12.7 2.36667 13.0167 1.58333 13.65 0.95C14.2833 0.316666 15.0667 0 16 0C16.9333 0 17.7167 0.316666 18.35 0.95C18.9833 1.58333 19.3 2.36667 19.3 3.3C19.3 4.23333 18.9833 5.01667 18.35 5.65C17.7167 6.28333 16.9333 6.6 16 6.6ZM28.7 19.3C27.7667 19.3 26.9833 18.9833 26.35 18.35C25.7167 17.7167 25.4 16.9333 25.4 16C25.4 15.0667 25.7167 14.2833 26.35 13.65C26.9833 13.0167 27.7667 12.7 28.7 12.7C29.6333 12.7 30.4167 13.0167 31.05 13.65C31.6833 14.2833 32 15.0667 32 16C32 16.9333 31.6833 17.7167 31.05 18.35C30.4167 18.9833 29.6333 19.3 28.7 19.3ZM28.7 32C27.7667 32 26.9833 31.6833 26.35 31.05C25.7167 30.4167 25.4 29.6333 25.4 28.7C25.4 27.7667 25.7167 26.9833 26.35 26.35C26.9833 25.7167 27.7667 25.4 28.7 25.4C29.6333 25.4 30.4167 25.7167 31.05 26.35C31.6833 26.9833 32 27.7667 32 28.7C32 29.6333 31.6833 30.4167 31.05 31.05C30.4167 31.6833 29.6333 32 28.7 32Z" fill="#434C56"/>
491
- </svg>
492
-
493
- `;
494
-
495
- var TitlePlacement;
496
- (function (TitlePlacement) {
497
- TitlePlacement["none"] = "none";
498
- TitlePlacement["left"] = "left";
499
- TitlePlacement["right"] = "right";
500
- })(TitlePlacement || (TitlePlacement = {}));
501
-
502
- class MenuItemIconComponent extends NavBaseComponent {
503
- constructor(iconService, router) {
504
- super();
505
- this.iconService = iconService;
506
- this.router = router;
507
- this.menuSettings = {
508
- titlePlacement: TitlePlacement.left
509
- };
510
- this.menuDialogSettings = {
511
- showMenuTitle: true,
512
- disableStrapi: true,
513
- fullScreen: true
514
- };
515
- this.showChildren = true;
516
- this.direction = MenuLayoutDirection.row;
517
- this.subscription = [];
518
- this.iconName = 'tld-menu-icon';
519
- this.TITLE_PLACEMENT_NONE = TitlePlacement.none;
520
- this.TITLE_PLACEMENT_LEFT = TitlePlacement.left;
521
- this.PLAUSIBLE_EVENT = {
522
- eventId: "burger_click"
523
- };
524
- }
525
- ngOnInit() {
526
- const routeChangeSub = this.router.events.subscribe(() => this.closeMenu());
527
- this.subscription.push(routeChangeSub);
528
- this.registerIcon();
529
- }
530
- closeMenu() {
531
- var _a;
532
- (_a = this.menuTrigger) === null || _a === void 0 ? void 0 : _a.closeMenu();
533
- }
534
- ngOnDestroy() {
535
- this.subscription.forEach(e => e.unsubscribe());
536
- }
537
- registerIcon() {
538
- if (this.menuSettings.iconPath) {
539
- this.iconService.registerIconFromUrl(this.iconName, this.menuSettings.iconPath);
540
- }
541
- else {
542
- this.iconService.registerIcons({ [this.iconName]: menuLogo });
543
- }
544
- }
545
- }
546
- MenuItemIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MenuItemIconComponent, deps: [{ token: i2.IconService }, { token: i2$1.Router }], target: i0.ɵɵFactoryTarget.Component });
547
- MenuItemIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: MenuItemIconComponent, selector: "lib-menu-item-icon", inputs: { menuSettings: "menuSettings", menuDialogSettings: "menuDialogSettings", showChildren: "showChildren", direction: "direction" }, viewQueries: [{ propertyName: "menuTrigger", first: true, predicate: ["menuTrigger"], descendants: true }], usesInheritance: true, ngImport: i0, 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()\" [menuDialogSettings]=\"menuDialogSettings\" [direction]=\"direction\"\r\n [hideSelectedCustomId]=\"hideSelectedCustomId\" [showChildren]=\"showChildren\" [strapiGroupBase]=\"strapiGroupBase\"\r\n [strapiDataLocation]=\"strapiDataLocation\" [menuItemGroups]=\"menuItemGroups\">\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>\r\n", 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"], dependencies: [{ kind: "directive", type: i3.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i3.DefaultLayoutGapDirective, selector: " [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md], [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md], [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm], [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i3.DefaultLayoutAlignDirective, selector: " [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md], [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md], [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm], [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i3.DefaultFlexOrderDirective, selector: " [fxFlexOrder], [fxFlexOrder.xs], [fxFlexOrder.sm], [fxFlexOrder.md], [fxFlexOrder.lg], [fxFlexOrder.xl], [fxFlexOrder.lt-sm], [fxFlexOrder.lt-md], [fxFlexOrder.lt-lg], [fxFlexOrder.lt-xl], [fxFlexOrder.gt-xs], [fxFlexOrder.gt-sm], [fxFlexOrder.gt-md], [fxFlexOrder.gt-lg]", inputs: ["fxFlexOrder", "fxFlexOrder.xs", "fxFlexOrder.sm", "fxFlexOrder.md", "fxFlexOrder.lg", "fxFlexOrder.xl", "fxFlexOrder.lt-sm", "fxFlexOrder.lt-md", "fxFlexOrder.lt-lg", "fxFlexOrder.lt-xl", "fxFlexOrder.gt-xs", "fxFlexOrder.gt-sm", "fxFlexOrder.gt-md", "fxFlexOrder.gt-lg"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "directive", type: i6.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i2.PlausibleEventDirective, selector: "[libPlausibleEvent]", inputs: ["libPlausibleEvent"] }, { kind: "component", type: ModalNavMenuComponent, selector: "lib-modal-nav-menu", inputs: ["menuDialogSettings", "showChildren"], outputs: ["closeButtonClick"] }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }] });
548
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MenuItemIconComponent, decorators: [{
549
- type: Component,
550
- 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()\" [menuDialogSettings]=\"menuDialogSettings\" [direction]=\"direction\"\r\n [hideSelectedCustomId]=\"hideSelectedCustomId\" [showChildren]=\"showChildren\" [strapiGroupBase]=\"strapiGroupBase\"\r\n [strapiDataLocation]=\"strapiDataLocation\" [menuItemGroups]=\"menuItemGroups\">\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>\r\n", 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"] }]
551
- }], ctorParameters: function () { return [{ type: i2.IconService }, { type: i2$1.Router }]; }, propDecorators: { menuTrigger: [{
552
- type: ViewChild,
553
- args: ['menuTrigger']
554
- }], menuSettings: [{
555
- type: Input
556
- }], menuDialogSettings: [{
557
- type: Input
558
- }], showChildren: [{
559
- type: Input
560
- }], direction: [{
561
- type: Input
562
- }] } });
563
-
564
- // TODO. REMOVE THIS COMPONENT IN FUTURE, SINCE IT IS JUST WRAPPER FOR MENU-COLUMN WITH RESTRICTED FUNCTIONALITY.
565
- class MenuStrapiItemListComponent {
566
- }
567
- MenuStrapiItemListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MenuStrapiItemListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
568
- MenuStrapiItemListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: MenuStrapiItemListComponent, selector: "lib-menu-strapi-item-list", inputs: { direction: "direction" }, ngImport: i0, template: "<menu-columns [direction]=\"direction\"></menu-columns>", styles: [""], dependencies: [{ kind: "component", type: MenuColumnsComponent, selector: "menu-columns", inputs: ["direction", "hideSelectedCustomId", "strapiGroupBase", "strapiDataLocation", "labelsVisible", "showChildren", "menuItemGroups"] }] });
569
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MenuStrapiItemListComponent, decorators: [{
570
- type: Component,
571
- args: [{ selector: 'lib-menu-strapi-item-list', template: "<menu-columns [direction]=\"direction\"></menu-columns>" }]
572
- }], propDecorators: { direction: [{
573
- type: Input
574
- }] } });
575
-
576
- class MenuModule {
577
- static forRoot(config) {
578
- return {
579
- ngModule: MenuModule,
580
- providers: [
581
- { provide: MENU_SHARED_CONFIG, useValue: config }
582
- ]
583
- };
584
- }
585
- }
586
- MenuModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
587
- MenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: MenuModule, declarations: [SideNavMenuComponent,
588
- ModalNavMenuComponent,
589
- MenuItemIconComponent,
590
- NavBaseComponent,
591
- MenuItemListComponent,
592
- MenuStrapiItemListComponent,
593
- MenuColumnsComponent], imports: [HttpClientModule,
594
- FlexLayoutModule,
595
- RouterModule,
596
- CommonModule,
597
- MatTooltipModule,
598
- MatDialogModule,
599
- MatButtonModule,
600
- MatListModule,
601
- MatMenuModule,
602
- MatIconModule,
603
- TranslateModule,
604
- PlausibleModule], exports: [SideNavMenuComponent,
605
- ModalNavMenuComponent,
606
- MenuItemIconComponent,
607
- MenuStrapiItemListComponent,
608
- MenuColumnsComponent] });
609
- MenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MenuModule, providers: [
610
- StarpiMenuService
611
- ], imports: [HttpClientModule,
612
- FlexLayoutModule,
613
- RouterModule,
614
- CommonModule,
615
- MatTooltipModule,
616
- MatDialogModule,
617
- MatButtonModule,
618
- MatListModule,
619
- MatMenuModule,
620
- MatIconModule,
621
- TranslateModule,
622
- PlausibleModule] });
623
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MenuModule, decorators: [{
624
- type: NgModule,
625
- args: [{
626
- declarations: [
627
- SideNavMenuComponent,
628
- ModalNavMenuComponent,
629
- MenuItemIconComponent,
630
- NavBaseComponent,
631
- MenuItemListComponent,
632
- MenuStrapiItemListComponent,
633
- MenuColumnsComponent
634
- ],
635
- providers: [
636
- StarpiMenuService
637
- ],
638
- imports: [
639
- HttpClientModule,
640
- FlexLayoutModule,
641
- RouterModule,
642
- CommonModule,
643
- MatTooltipModule,
644
- MatDialogModule,
645
- MatButtonModule,
646
- MatListModule,
647
- MatMenuModule,
648
- MatIconModule,
649
- TranslateModule,
650
- PlausibleModule
651
- ],
652
- exports: [
653
- SideNavMenuComponent,
654
- ModalNavMenuComponent,
655
- MenuItemIconComponent,
656
- MenuStrapiItemListComponent,
657
- MenuColumnsComponent
658
- ]
659
- }]
660
- }] });
661
-
662
- /*
663
- * Public API Surface of ngx-menu
664
- */
665
-
666
- /**
667
- * Generated bundle index. Do not edit.
668
- */
669
-
670
- export { MENU_ICON_STRAPI_EXTENSION, MENU_SHARED_CONFIG, MenuColumnsComponent, MenuItemIconComponent, MenuLayoutDirection, MenuModule, MenuStrapiItemListComponent, ModalNavMenuComponent, NavBaseComponent, SideNavMenuComponent, StarpiMenuService, StrapiDataLocation, TitlePlacement };
671
- //# sourceMappingURL=tilde-nlp-ngx-menu.mjs.map