@mediusinc/mng-commons-layout 7.4.0 → 8.0.0-rc.2
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/fesm2022/mediusinc-mng-commons-layout-components-pages-error.mjs +6 -6
- package/fesm2022/mediusinc-mng-commons-layout-components-pages-error.mjs.map +1 -1
- package/fesm2022/mediusinc-mng-commons-layout-components-pages-main-lazy.mjs.map +1 -1
- package/fesm2022/mediusinc-mng-commons-layout-components-pages-main.mjs +17 -11
- package/fesm2022/mediusinc-mng-commons-layout-components-pages-main.mjs.map +1 -1
- package/fesm2022/mediusinc-mng-commons-layout-components-pages-not-found.mjs +6 -6
- package/fesm2022/mediusinc-mng-commons-layout-components-pages-not-found.mjs.map +1 -1
- package/fesm2022/mediusinc-mng-commons-layout-components.mjs +134 -124
- package/fesm2022/mediusinc-mng-commons-layout-components.mjs.map +1 -1
- package/fesm2022/mediusinc-mng-commons-layout.mjs +50 -38
- package/fesm2022/mediusinc-mng-commons-layout.mjs.map +1 -1
- package/package.json +11 -14
- package/styles/atlantis/index.scss +1 -15
- package/styles/atlantis/layout/_breadcrumb.scss +2 -2
- package/styles/atlantis/layout/_layout.scss +18 -0
- package/styles/atlantis/layout/_main.scss +1 -1
- package/styles/atlantis/layout/_responsive.scss +64 -68
- package/styles/atlantis/layout/_sidebar_drawer.scss +209 -193
- package/styles/atlantis/layout/_sidebar_horizontal.scss +115 -106
- package/styles/atlantis/layout/_sidebar_reveal.scss +138 -132
- package/styles/atlantis/layout/_sidebar_slim.scss +109 -96
- package/styles/atlantis/layout/_sidebar_slim_plus.scss +101 -101
- package/styles/atlantis/layout/_sidebar_vertical.scss +17 -5
- package/styles/atlantis/layout/_topbar.scss +34 -10
- package/styles/tailwindcss-commons/atlantis/layout/breadcrumb.css +2 -2
- package/styles/tailwindcss-commons/atlantis/layout/main.css +2 -1
- package/styles/tailwindcss-commons/atlantis/layout/responsive.css +64 -68
- package/styles/tailwindcss-commons/atlantis/layout/sidebar-drawer.css +186 -189
- package/styles/tailwindcss-commons/atlantis/layout/sidebar-reveal.css +128 -132
- package/styles/tailwindcss-commons/atlantis/layout/sidebar-slim-plus.css +98 -101
- package/styles/tailwindcss-commons/atlantis/layout/sidebar-slim.css +107 -96
- package/styles/tailwindcss-commons/atlantis/layout/sidebar-vertical.css +38 -24
- package/styles/tailwindcss-commons/atlantis/layout/topbar.css +34 -10
- package/types/mediusinc-mng-commons-layout-components.d.ts +9 -6
- package/types/mediusinc-mng-commons-layout.d.ts +5 -5
- package/styles/atlantis/layout/atlantis.scss +0 -0
- package/styles/atlantis/layout/layout.scss +0 -32
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { inject, DestroyRef, input, signal, computed,
|
|
2
|
+
import { inject, DestroyRef, input, signal, computed, Component, output, viewChild, effect, untracked, ElementRef, HostListener, Injector, Renderer2 } from '@angular/core';
|
|
3
3
|
import { TranslatePipe, TranslateService } from '@ngx-translate/core';
|
|
4
4
|
import { VersionService, COMMONS_LAYOUT_FEATURE_CONFIG_IT, LayoutService, MenuService } from '@mediusinc/mng-commons-layout';
|
|
5
5
|
import { CommonsConfigurationService, JsonPathPipe, ComponentDirective, CommonsService, PermissionService, toObservable as toObservable$1, NotificationWrapperComponent } from '@mediusinc/mng-commons/core';
|
|
@@ -11,14 +11,15 @@ import * as i1 from '@angular/router';
|
|
|
11
11
|
import { RouterModule, ActivatedRoute } from '@angular/router';
|
|
12
12
|
import * as i1$1 from '@angular/forms';
|
|
13
13
|
import { FormsModule } from '@angular/forms';
|
|
14
|
-
import { Button, ButtonDirective } from '
|
|
15
|
-
import { Select } from '
|
|
16
|
-
import { StyleClass, StyleClassModule } from '
|
|
17
|
-
import {
|
|
14
|
+
import { Button, ButtonDirective } from '@openng/optimus-ui/button';
|
|
15
|
+
import { Select } from '@openng/optimus-ui/select';
|
|
16
|
+
import { StyleClass, StyleClassModule } from '@openng/optimus-ui/styleclass';
|
|
17
|
+
import { Ripple } from '@openng/optimus-ui/ripple';
|
|
18
|
+
import { Tooltip } from '@openng/optimus-ui/tooltip';
|
|
18
19
|
import { DomSanitizer } from '@angular/platform-browser';
|
|
19
|
-
import { DynamicDialogConfig, DynamicDialogRef, DialogService } from '
|
|
20
|
-
import { RadioButton } from '
|
|
21
|
-
import { SelectButton } from '
|
|
20
|
+
import { DynamicDialogConfig, DynamicDialogRef, DialogService } from '@openng/optimus-ui/dynamicdialog';
|
|
21
|
+
import { RadioButton } from '@openng/optimus-ui/radiobutton';
|
|
22
|
+
import { SelectButton } from '@openng/optimus-ui/selectbutton';
|
|
22
23
|
|
|
23
24
|
class VersionComponent {
|
|
24
25
|
constructor() {
|
|
@@ -27,15 +28,18 @@ class VersionComponent {
|
|
|
27
28
|
this.configService = inject(CommonsConfigurationService);
|
|
28
29
|
this.destroyRef = inject(DestroyRef);
|
|
29
30
|
this.jsonPathPipe = new JsonPathPipe();
|
|
30
|
-
this.versionInput = input(undefined, { ...(ngDevMode ? { debugName: "versionInput" } : {}), alias: 'version' });
|
|
31
|
-
this.isLoading = signal(false,
|
|
32
|
-
|
|
31
|
+
this.versionInput = input(undefined, { ...(ngDevMode ? { debugName: "versionInput" } : /* istanbul ignore next */ {}), alias: 'version' });
|
|
32
|
+
this.isLoading = signal(false, /* @ts-ignore */
|
|
33
|
+
...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
|
|
34
|
+
this.loadedVersion = signal(undefined, /* @ts-ignore */
|
|
35
|
+
...(ngDevMode ? [{ debugName: "loadedVersion" }] : /* istanbul ignore next */ []));
|
|
33
36
|
this.versionAsArray = computed(() => {
|
|
34
37
|
if (Array.isArray(this.versionInput())) {
|
|
35
38
|
return this.versionInput();
|
|
36
39
|
}
|
|
37
40
|
return undefined;
|
|
38
|
-
},
|
|
41
|
+
}, /* @ts-ignore */
|
|
42
|
+
...(ngDevMode ? [{ debugName: "versionAsArray" }] : /* istanbul ignore next */ []));
|
|
39
43
|
this.versionInfo = computed(() => {
|
|
40
44
|
if (this.versionAsArray() !== undefined) {
|
|
41
45
|
return undefined; // Each version will be processed separately in child component
|
|
@@ -58,7 +62,8 @@ class VersionComponent {
|
|
|
58
62
|
}
|
|
59
63
|
}
|
|
60
64
|
return undefined;
|
|
61
|
-
},
|
|
65
|
+
}, /* @ts-ignore */
|
|
66
|
+
...(ngDevMode ? [{ debugName: "versionInfo" }] : /* istanbul ignore next */ []));
|
|
62
67
|
this.versionAsString = computed(() => {
|
|
63
68
|
const versionInfo = this.versionInfo();
|
|
64
69
|
if (versionInfo == null) {
|
|
@@ -70,9 +75,12 @@ class VersionComponent {
|
|
|
70
75
|
else {
|
|
71
76
|
return versionInfo.raw;
|
|
72
77
|
}
|
|
73
|
-
},
|
|
74
|
-
|
|
75
|
-
this.
|
|
78
|
+
}, /* @ts-ignore */
|
|
79
|
+
...(ngDevMode ? [{ debugName: "versionAsString" }] : /* istanbul ignore next */ []));
|
|
80
|
+
this.displayName = computed(() => this.versionInput()?.displayName, /* @ts-ignore */
|
|
81
|
+
...(ngDevMode ? [{ debugName: "displayName" }] : /* istanbul ignore next */ []));
|
|
82
|
+
this.displayText = computed(() => `${this.displayName() ?? ''}${this.displayName() && this.versionAsString() ? ': ' : ''}${!this.isLoading() ? (this.versionAsString() ?? '') : ''}`, /* @ts-ignore */
|
|
83
|
+
...(ngDevMode ? [{ debugName: "displayText" }] : /* istanbul ignore next */ []));
|
|
76
84
|
toObservable(this.versionInput)
|
|
77
85
|
.pipe(catchError(() => of(undefined)), switchMap(version => {
|
|
78
86
|
if (typeof version !== 'undefined' && !Array.isArray(version)) {
|
|
@@ -101,12 +109,12 @@ class VersionComponent {
|
|
|
101
109
|
}
|
|
102
110
|
});
|
|
103
111
|
}
|
|
104
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
105
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
112
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: VersionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
113
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: VersionComponent, isStandalone: true, selector: "mng-version", inputs: { versionInput: { classPropertyName: "versionInput", publicName: "version", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (versionAsArray()) {\n @for (v of versionAsArray(); track v; let last = $last) {\n <!-- Bypasses problems with self-importing component -->\n <ng-container [mngComponent]=\"cmp\" [inputs]=\"{version: v}\"></ng-container>\n @if (!last) {\n <br />\n }\n }\n} @else if (displayText()) {\n {{ displayText() }}\n}\n", dependencies: [{ kind: "directive", type: ComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent", "injectionToken", "inputs", "attachToHost", "parentInjector"], outputs: ["instanceCreated"] }] }); }
|
|
106
114
|
}
|
|
107
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
115
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: VersionComponent, decorators: [{
|
|
108
116
|
type: Component,
|
|
109
|
-
args: [{ selector: 'mng-version', imports: [ComponentDirective],
|
|
117
|
+
args: [{ selector: 'mng-version', imports: [ComponentDirective], template: "@if (versionAsArray()) {\n @for (v of versionAsArray(); track v; let last = $last) {\n <!-- Bypasses problems with self-importing component -->\n <ng-container [mngComponent]=\"cmp\" [inputs]=\"{version: v}\"></ng-container>\n @if (!last) {\n <br />\n }\n }\n} @else if (displayText()) {\n {{ displayText() }}\n}\n" }]
|
|
110
118
|
}], ctorParameters: () => [], propDecorators: { versionInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "version", required: false }] }] } });
|
|
111
119
|
|
|
112
120
|
class FooterComponent {
|
|
@@ -114,15 +122,17 @@ class FooterComponent {
|
|
|
114
122
|
this.config = inject(COMMONS_LAYOUT_FEATURE_CONFIG_IT, { optional: true });
|
|
115
123
|
this.layout = inject(LayoutService);
|
|
116
124
|
this.commons = inject(CommonsService);
|
|
117
|
-
this.currentYear = signal(new Date().getFullYear(),
|
|
118
|
-
|
|
125
|
+
this.currentYear = signal(new Date().getFullYear(), /* @ts-ignore */
|
|
126
|
+
...(ngDevMode ? [{ debugName: "currentYear" }] : /* istanbul ignore next */ []));
|
|
127
|
+
this.versionComponent = signal(this.config?.components?.version === false ? undefined : (this.config?.components?.version ?? VersionComponent), /* @ts-ignore */
|
|
128
|
+
...(ngDevMode ? [{ debugName: "versionComponent" }] : /* istanbul ignore next */ []));
|
|
119
129
|
}
|
|
120
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
121
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
130
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: FooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
131
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: FooterComponent, isStandalone: true, selector: "mng-footer", host: { classAttribute: "mt-auto" }, ngImport: i0, template: "<div class=\"layout-footer\">\n <div class=\"footer-logo-container\">\n @if (layout.appLogo()) {\n <img id=\"footer-logo\" [src]=\"layout.appLogo()\" alt=\"atlantis-layout\" />\n }\n <span class=\"app-name\">{{ commons.appName() | translate }}</span>\n </div>\n <div class=\"flex flex-col\">\n <div>\n <span class=\"copyright\">© {{ commons.appOwner() | translate }} - {{ currentYear() }}</span>\n </div>\n @if (versionComponent()) {\n <div class=\"version\" [mngComponent]=\"versionComponent()\" [inputs]=\"{version: commons.appVersion()}\" [attachToHost]=\"true\"></div>\n }\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: ComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent", "injectionToken", "inputs", "attachToHost", "parentInjector"], outputs: ["instanceCreated"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
|
|
122
132
|
}
|
|
123
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
133
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: FooterComponent, decorators: [{
|
|
124
134
|
type: Component,
|
|
125
|
-
args: [{ selector: 'mng-footer', imports: [TranslatePipe, ComponentDirective],
|
|
135
|
+
args: [{ selector: 'mng-footer', imports: [TranslatePipe, ComponentDirective], host: {
|
|
126
136
|
class: 'mt-auto'
|
|
127
137
|
}, template: "<div class=\"layout-footer\">\n <div class=\"footer-logo-container\">\n @if (layout.appLogo()) {\n <img id=\"footer-logo\" [src]=\"layout.appLogo()\" alt=\"atlantis-layout\" />\n }\n <span class=\"app-name\">{{ commons.appName() | translate }}</span>\n </div>\n <div class=\"flex flex-col\">\n <div>\n <span class=\"copyright\">© {{ commons.appOwner() | translate }} - {{ currentYear() }}</span>\n </div>\n @if (versionComponent()) {\n <div class=\"version\" [mngComponent]=\"versionComponent()\" [inputs]=\"{version: commons.appVersion()}\" [attachToHost]=\"true\"></div>\n }\n </div>\n</div>\n" }]
|
|
128
138
|
}] });
|
|
@@ -133,7 +143,8 @@ class BreadcrumbComponent {
|
|
|
133
143
|
this.mappedBreadcrumbs = computed(() => {
|
|
134
144
|
const items = this.commons.breadcrumbs();
|
|
135
145
|
return items.map(el => this.mapMenuItem(el));
|
|
136
|
-
},
|
|
146
|
+
}, /* @ts-ignore */
|
|
147
|
+
...(ngDevMode ? [{ debugName: "mappedBreadcrumbs" }] : /* istanbul ignore next */ []));
|
|
137
148
|
}
|
|
138
149
|
mapMenuItem(item) {
|
|
139
150
|
return {
|
|
@@ -143,12 +154,12 @@ class BreadcrumbComponent {
|
|
|
143
154
|
styleClass: item.className
|
|
144
155
|
};
|
|
145
156
|
}
|
|
146
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
147
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
157
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: BreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
158
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: BreadcrumbComponent, isStandalone: true, selector: "mng-breadcrumb", host: { classAttribute: "layout-breadcrumb flex items-center relative h-12" }, ngImport: i0, template: "<nav>\n <ol class=\"relative z-20\">\n @for (item of mappedBreadcrumbs(); track item.id; let last = $last) {\n <li>{{ item.label! | translate }}</li>\n @if (!last) {\n <li class=\"layout-breadcrumb-chevron\">/</li>\n }\n }\n </ol>\n</nav>\n", dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
|
|
148
159
|
}
|
|
149
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
160
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: BreadcrumbComponent, decorators: [{
|
|
150
161
|
type: Component,
|
|
151
|
-
args: [{ selector: 'mng-breadcrumb', imports: [TranslatePipe],
|
|
162
|
+
args: [{ selector: 'mng-breadcrumb', imports: [TranslatePipe], host: {
|
|
152
163
|
class: 'layout-breadcrumb flex items-center relative h-12'
|
|
153
164
|
}, template: "<nav>\n <ol class=\"relative z-20\">\n @for (item of mappedBreadcrumbs(); track item.id; let last = $last) {\n <li>{{ item.label! | translate }}</li>\n @if (!last) {\n <li class=\"layout-breadcrumb-chevron\">/</li>\n }\n }\n </ol>\n</nav>\n" }]
|
|
154
165
|
}] });
|
|
@@ -158,10 +169,13 @@ class MenuItemComponent {
|
|
|
158
169
|
this.menuService = inject(MenuService);
|
|
159
170
|
this.permissionService = inject(PermissionService);
|
|
160
171
|
this.layout = inject(LayoutService);
|
|
161
|
-
this.item = input.required(
|
|
162
|
-
|
|
172
|
+
this.item = input.required(/* @ts-ignore */
|
|
173
|
+
...(ngDevMode ? [{ debugName: "item" }] : /* istanbul ignore next */ []));
|
|
174
|
+
this.root = input(false, /* @ts-ignore */
|
|
175
|
+
...(ngDevMode ? [{ debugName: "root" }] : /* istanbul ignore next */ []));
|
|
163
176
|
this.visibleChange = output();
|
|
164
|
-
this.submenuElRef = viewChild('submenu',
|
|
177
|
+
this.submenuElRef = viewChild('submenu', /* @ts-ignore */
|
|
178
|
+
...(ngDevMode ? [{ debugName: "submenuElRef" }] : /* istanbul ignore next */ []));
|
|
165
179
|
this.isPermitted = toSignal(toObservable(this.item).pipe(switchMap(i => (i.permissions ? this.permissionService.isMenuItemVisible(i.permissions, i.config) : of(true)))));
|
|
166
180
|
this.isVisibleFromItemSettings = toSignal(toObservable(this.item).pipe(switchMap(i => (typeof i.isVisible === 'function' ? toObservable$1(i.isVisible(i.config)) : of(i.isVisible ?? true)))));
|
|
167
181
|
this.menuChangeEvents = toSignal(this.menuService.menuChange$.pipe(distinctUntilChanged((v1, v2) => v1.key === v2.key)));
|
|
@@ -176,7 +190,8 @@ class MenuItemComponent {
|
|
|
176
190
|
: this.item().key === menuChangeEvent.key || menuChangeEvent.key.startsWith((this.item().key ?? '') + '-');
|
|
177
191
|
}
|
|
178
192
|
return false;
|
|
179
|
-
},
|
|
193
|
+
}, /* @ts-ignore */
|
|
194
|
+
...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
|
|
180
195
|
this.visible = computed(() => {
|
|
181
196
|
const isPermitted = this.isPermitted();
|
|
182
197
|
if (!isPermitted) {
|
|
@@ -194,21 +209,34 @@ class MenuItemComponent {
|
|
|
194
209
|
return false;
|
|
195
210
|
}
|
|
196
211
|
return true;
|
|
197
|
-
},
|
|
198
|
-
|
|
212
|
+
}, /* @ts-ignore */
|
|
213
|
+
...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
|
|
214
|
+
this.isTooltipDisabled = computed(() => !(this.layout.isSlim() && this.root() && !this.active()), /* @ts-ignore */
|
|
215
|
+
...(ngDevMode ? [{ debugName: "isTooltipDisabled" }] : /* istanbul ignore next */ []));
|
|
216
|
+
this.initialized = signal(false, /* @ts-ignore */
|
|
217
|
+
...(ngDevMode ? [{ debugName: "initialized" }] : /* istanbul ignore next */ []));
|
|
218
|
+
this.menuHoverActive = computed(() => this.layout.state().menuHoverActive, /* @ts-ignore */
|
|
219
|
+
...(ngDevMode ? [{ debugName: "menuHoverActive" }] : /* istanbul ignore next */ []));
|
|
220
|
+
this.submenuVisible = computed(() => {
|
|
199
221
|
if (this.layout.isDesktop() && (this.layout.isSlim() || this.layout.isSlimPlus())) {
|
|
200
|
-
return this.layout.submenuOverlayKey() === this.item().key
|
|
222
|
+
return this.layout.submenuOverlayKey() === this.item().key;
|
|
201
223
|
}
|
|
202
224
|
else {
|
|
203
|
-
return this.root()
|
|
225
|
+
return this.root() || this.active();
|
|
204
226
|
}
|
|
205
|
-
},
|
|
227
|
+
}, /* @ts-ignore */
|
|
228
|
+
...(ngDevMode ? [{ debugName: "submenuVisible" }] : /* istanbul ignore next */ []));
|
|
206
229
|
effect(() => {
|
|
207
|
-
if (this.root() && this.
|
|
230
|
+
if (this.root() && this.submenuVisible() && this.layout.isDesktop() && (this.layout.isSlim() || this.layout.isSlimPlus())) {
|
|
208
231
|
this.calculatePosition(this.submenuElRef()?.nativeElement, this.submenuElRef()?.nativeElement.parentElement);
|
|
209
232
|
}
|
|
210
233
|
});
|
|
211
234
|
}
|
|
235
|
+
ngAfterViewInit() {
|
|
236
|
+
setTimeout(() => {
|
|
237
|
+
this.initialized.set(true);
|
|
238
|
+
});
|
|
239
|
+
}
|
|
212
240
|
itemClick(event) {
|
|
213
241
|
const item = this.item();
|
|
214
242
|
// avoid processing disabled items
|
|
@@ -240,16 +268,17 @@ class MenuItemComponent {
|
|
|
240
268
|
}
|
|
241
269
|
}
|
|
242
270
|
}
|
|
243
|
-
onSubmenuAnimated(event) {
|
|
244
|
-
if (event.toState === 'visible' && this.layout.isDesktop() && (this.layout.isSlim() || this.layout.isSlimPlus())) {
|
|
245
|
-
const el = event.element;
|
|
246
|
-
const elParent = el.parentElement;
|
|
247
|
-
this.calculatePosition(el, elParent);
|
|
248
|
-
}
|
|
249
|
-
}
|
|
250
271
|
onChildVisibleChange(visible, item, idx) {
|
|
251
272
|
this.item().itemsVisibility()[idx]?.set(visible);
|
|
252
273
|
}
|
|
274
|
+
onMouseEnter() {
|
|
275
|
+
if (this.layout.isDesktop() && this.root() && this.item().hasItemsOrLazyChildren() && this.menuHoverActive() && !this.active()) {
|
|
276
|
+
this.layout.state.update(state => ({
|
|
277
|
+
...state,
|
|
278
|
+
menuHoverActive: true
|
|
279
|
+
}));
|
|
280
|
+
}
|
|
281
|
+
}
|
|
253
282
|
calculatePosition(overlay, target) {
|
|
254
283
|
if (overlay) {
|
|
255
284
|
const top = target.getBoundingClientRect().top;
|
|
@@ -264,47 +293,15 @@ class MenuItemComponent {
|
|
|
264
293
|
}
|
|
265
294
|
}
|
|
266
295
|
}
|
|
267
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
268
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
269
|
-
trigger('children', [
|
|
270
|
-
state('collapsed', style({
|
|
271
|
-
height: '0'
|
|
272
|
-
})),
|
|
273
|
-
state('expanded', style({
|
|
274
|
-
height: '*'
|
|
275
|
-
})),
|
|
276
|
-
state('hidden', style({
|
|
277
|
-
display: 'none'
|
|
278
|
-
})),
|
|
279
|
-
state('visible', style({
|
|
280
|
-
display: 'block'
|
|
281
|
-
})),
|
|
282
|
-
transition('collapsed <=> expanded', animate('400ms cubic-bezier(0.86, 0, 0.07, 1)'))
|
|
283
|
-
])
|
|
284
|
-
], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
296
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: MenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
297
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: MenuItemComponent, isStandalone: true, selector: "[mng-menuitem]", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, root: { classPropertyName: "root", publicName: "root", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visibleChange: "visibleChange" }, host: { properties: { "class.active-menuitem": "!root() && submenuVisible()", "class.layout-root-menuitem": "root()" } }, providers: [PermissionService], viewQueries: [{ propertyName: "submenuElRef", first: true, predicate: ["submenu"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (visible()) {\n @if (root()) {\n <div class=\"layout-menuitem-root-text\">\n {{ item().label! | translate }}\n </div>\n }\n @if (!item().href) {\n @if (!item().routerLink || item().hasItems()) {\n <a\n [attr.href]=\"item().href\"\n [routerLink]=\"layout.isSlim() || layout.isSlimPlus() ? null : item().routerLink\"\n (click)=\"itemClick($event)\"\n (keydown.enter)=\"itemClick($event)\"\n [attr.target]=\"item().target\"\n [attr.tabindex]=\"0\"\n [ngClass]=\"item().className ?? '' + (this.active() ? ' active-route' : '')\"\n pRipple\n [pTooltip]=\"item().label | translate\"\n [tooltipDisabled]=\"isTooltipDisabled()\">\n <i [ngClass]=\"item().icon ?? ''\" class=\"layout-menuitem-icon\"></i>\n <span class=\"layout-menuitem-text\">{{ item().label! | translate }}</span>\n @if (item().hasItemsOrLazyChildren()) {\n <i class=\"pi pi-fw pi-angle-down layout-submenu-toggler\"></i>\n }\n @if (item().badge) {\n <span class=\"menuitem-badge\">{{ item().badge }}</span>\n }\n </a>\n } @else if (item().routerLink && !item().hasItems()) {\n <a\n (click)=\"itemClick($event)\"\n (mouseenter)=\"onMouseEnter()\"\n [ngClass]=\"item().className\"\n [routerLink]=\"item().routerLink\"\n routerLinkActive=\"active-route\"\n [routerLinkActiveOptions]=\"item().routerLinkActiveOptions || {paths: 'exact', queryParams: 'ignored', matrixParams: 'ignored', fragment: 'ignored'}\"\n [fragment]=\"item().fragment\"\n [queryParamsHandling]=\"item().queryParamsHandling\"\n [preserveFragment]=\"item().preserveFragment\"\n [skipLocationChange]=\"item().skipLocationChange\"\n [replaceUrl]=\"item().replaceUrl\"\n [state]=\"item().state\"\n [queryParams]=\"item().queryParams\"\n [attr.target]=\"item().target\"\n tabindex=\"0\"\n pRipple\n [pTooltip]=\"item().label | translate\"\n [tooltipDisabled]=\"isTooltipDisabled()\">\n <i [ngClass]=\"item().icon ?? ''\" class=\"layout-menuitem-icon\"></i>\n <span class=\"layout-menuitem-text\">{{ item().label! | translate }}</span>\n @if (item().hasItemsOrLazyChildren()) {\n <i class=\"pi pi-fw pi-angle-down layout-submenu-toggler\"></i>\n }\n @if (item().badge) {\n <span class=\"menuitem-badge\">{{ item().badge }}</span>\n }\n </a>\n }\n } @else {\n @if (!item().hasItems()) {\n <a (click)=\"itemClick($event)\" [attr.href]=\"item().href\" [attr.target]=\"item().target\" [attr.tabindex]=\"0\" [ngClass]=\"item().className ?? ''\">\n <i [ngClass]=\"item().icon ?? ''\" class=\"layout-menuitem-icon\"></i>\n <span class=\"layout-menuitem-text\">{{ item().label! | translate }}</span>\n @if (item().hrefExternalIcon !== null) {\n <i [ngClass]=\"item().hrefExternalIcon ?? 'pi pi-fw pi-external-link'\" class=\"ml-auto\"></i>\n }\n @if (item().hasItemsOrLazyChildren()) {\n <i class=\"pi pi-fw pi-angle-down layout-submenu-toggler\"></i>\n }\n @if (item().badge) {\n <span class=\"menuitem-badge\">{{ item().badge }}</span>\n }\n </a>\n }\n }\n @if (item().hasItems() && submenuVisible()) {\n @let isSlimOrSlimPlus = layout.isSlim() || layout.isSlimPlus();\n <ul\n #submenu\n [animate.enter]=\"initialized() && !isSlimOrSlimPlus ? 'p-submenu-enter' : null\"\n [animate.leave]=\"!isSlimOrSlimPlus ? 'p-submenu-leave' : null\"\n [class.layout-root-submenulist]=\"root()\"\n class=\"block!\">\n @for (child of item().items(); track child; let i = $index) {\n <li mng-menuitem [item]=\"child\" [class]=\"child.badgeClassName\" (visibleChange)=\"onChildVisibleChange($event, child, i)\"></li>\n }\n </ul>\n }\n}\n", styles: [".p-submenu-enter{animation:p-animate-submenu-expand .45s cubic-bezier(.86,0,.07,1) forwards;overflow:hidden}.p-submenu-leave{animation:p-animate-submenu-collapse .45s cubic-bezier(.86,0,.07,1) forwards;overflow:hidden}@keyframes p-animate-submenu-collapse{0%{max-height:1000px;overflow:hidden}to{max-height:0;overflow:hidden}}@keyframes p-animate-submenu-expand{0%{max-height:0}to{max-height:1000px}}\n"], dependencies: [{ kind: "component", type: MenuItemComponent, selector: "[mng-menuitem]", inputs: ["item", "root"], outputs: ["visibleChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: i1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: Ripple, selector: "[pRipple]" }, { kind: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
|
|
285
298
|
}
|
|
286
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
299
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: MenuItemComponent, decorators: [{
|
|
287
300
|
type: Component,
|
|
288
|
-
args: [{ selector: '[mng-menuitem]', imports: [NgClass, RouterModule, TranslatePipe
|
|
289
|
-
|
|
290
|
-
state('collapsed', style({
|
|
291
|
-
height: '0'
|
|
292
|
-
})),
|
|
293
|
-
state('expanded', style({
|
|
294
|
-
height: '*'
|
|
295
|
-
})),
|
|
296
|
-
state('hidden', style({
|
|
297
|
-
display: 'none'
|
|
298
|
-
})),
|
|
299
|
-
state('visible', style({
|
|
300
|
-
display: 'block'
|
|
301
|
-
})),
|
|
302
|
-
transition('collapsed <=> expanded', animate('400ms cubic-bezier(0.86, 0, 0.07, 1)'))
|
|
303
|
-
])
|
|
304
|
-
], host: {
|
|
305
|
-
'[class.active-menuitem]': '!root() && active()',
|
|
301
|
+
args: [{ selector: '[mng-menuitem]', imports: [NgClass, RouterModule, TranslatePipe, Ripple, Tooltip], host: {
|
|
302
|
+
'[class.active-menuitem]': '!root() && submenuVisible()',
|
|
306
303
|
'[class.layout-root-menuitem]': 'root()'
|
|
307
|
-
}, providers: [PermissionService], template: "@if (visible()) {\n @if (root()) {\n <div class=\"layout-menuitem-root-text\">\n {{ item().label! | translate }}\n </div>\n }\n @if (!item().href) {\n @if (!item().routerLink || item().hasItems()) {\n <a\n [attr.href]=\"item().href\"\n [routerLink]=\"layout.isSlim() || layout.isSlimPlus() ? null : item().routerLink\"\n (click)=\"itemClick($event)\"\n (keydown.enter)=\"itemClick($event)\"\n [attr.target]=\"item().target\"\n [attr.tabindex]=\"0\"\n [ngClass]=\"item().className ?? '' + (this.active() ? ' active-route' : '')\">\n <i [ngClass]=\"item().icon ?? ''\" class=\"layout-menuitem-icon\"></i>\n <span class=\"layout-menuitem-text\">{{ item().label! | translate }}</span>\n @if (item().hasItemsOrLazyChildren()) {\n <i class=\"pi pi-fw pi-angle-down layout-submenu-toggler\"></i>\n }\n @if (item().badge) {\n <span class=\"menuitem-badge\">{{ item().badge }}</span>\n }\n </a>\n } @else if (item().routerLink && !item().hasItems()) {\n <a\n (click)=\"itemClick($event)\"\n [
|
|
304
|
+
}, providers: [PermissionService], template: "@if (visible()) {\n @if (root()) {\n <div class=\"layout-menuitem-root-text\">\n {{ item().label! | translate }}\n </div>\n }\n @if (!item().href) {\n @if (!item().routerLink || item().hasItems()) {\n <a\n [attr.href]=\"item().href\"\n [routerLink]=\"layout.isSlim() || layout.isSlimPlus() ? null : item().routerLink\"\n (click)=\"itemClick($event)\"\n (keydown.enter)=\"itemClick($event)\"\n [attr.target]=\"item().target\"\n [attr.tabindex]=\"0\"\n [ngClass]=\"item().className ?? '' + (this.active() ? ' active-route' : '')\"\n pRipple\n [pTooltip]=\"item().label | translate\"\n [tooltipDisabled]=\"isTooltipDisabled()\">\n <i [ngClass]=\"item().icon ?? ''\" class=\"layout-menuitem-icon\"></i>\n <span class=\"layout-menuitem-text\">{{ item().label! | translate }}</span>\n @if (item().hasItemsOrLazyChildren()) {\n <i class=\"pi pi-fw pi-angle-down layout-submenu-toggler\"></i>\n }\n @if (item().badge) {\n <span class=\"menuitem-badge\">{{ item().badge }}</span>\n }\n </a>\n } @else if (item().routerLink && !item().hasItems()) {\n <a\n (click)=\"itemClick($event)\"\n (mouseenter)=\"onMouseEnter()\"\n [ngClass]=\"item().className\"\n [routerLink]=\"item().routerLink\"\n routerLinkActive=\"active-route\"\n [routerLinkActiveOptions]=\"item().routerLinkActiveOptions || {paths: 'exact', queryParams: 'ignored', matrixParams: 'ignored', fragment: 'ignored'}\"\n [fragment]=\"item().fragment\"\n [queryParamsHandling]=\"item().queryParamsHandling\"\n [preserveFragment]=\"item().preserveFragment\"\n [skipLocationChange]=\"item().skipLocationChange\"\n [replaceUrl]=\"item().replaceUrl\"\n [state]=\"item().state\"\n [queryParams]=\"item().queryParams\"\n [attr.target]=\"item().target\"\n tabindex=\"0\"\n pRipple\n [pTooltip]=\"item().label | translate\"\n [tooltipDisabled]=\"isTooltipDisabled()\">\n <i [ngClass]=\"item().icon ?? ''\" class=\"layout-menuitem-icon\"></i>\n <span class=\"layout-menuitem-text\">{{ item().label! | translate }}</span>\n @if (item().hasItemsOrLazyChildren()) {\n <i class=\"pi pi-fw pi-angle-down layout-submenu-toggler\"></i>\n }\n @if (item().badge) {\n <span class=\"menuitem-badge\">{{ item().badge }}</span>\n }\n </a>\n }\n } @else {\n @if (!item().hasItems()) {\n <a (click)=\"itemClick($event)\" [attr.href]=\"item().href\" [attr.target]=\"item().target\" [attr.tabindex]=\"0\" [ngClass]=\"item().className ?? ''\">\n <i [ngClass]=\"item().icon ?? ''\" class=\"layout-menuitem-icon\"></i>\n <span class=\"layout-menuitem-text\">{{ item().label! | translate }}</span>\n @if (item().hrefExternalIcon !== null) {\n <i [ngClass]=\"item().hrefExternalIcon ?? 'pi pi-fw pi-external-link'\" class=\"ml-auto\"></i>\n }\n @if (item().hasItemsOrLazyChildren()) {\n <i class=\"pi pi-fw pi-angle-down layout-submenu-toggler\"></i>\n }\n @if (item().badge) {\n <span class=\"menuitem-badge\">{{ item().badge }}</span>\n }\n </a>\n }\n }\n @if (item().hasItems() && submenuVisible()) {\n @let isSlimOrSlimPlus = layout.isSlim() || layout.isSlimPlus();\n <ul\n #submenu\n [animate.enter]=\"initialized() && !isSlimOrSlimPlus ? 'p-submenu-enter' : null\"\n [animate.leave]=\"!isSlimOrSlimPlus ? 'p-submenu-leave' : null\"\n [class.layout-root-submenulist]=\"root()\"\n class=\"block!\">\n @for (child of item().items(); track child; let i = $index) {\n <li mng-menuitem [item]=\"child\" [class]=\"child.badgeClassName\" (visibleChange)=\"onChildVisibleChange($event, child, i)\"></li>\n }\n </ul>\n }\n}\n", styles: [".p-submenu-enter{animation:p-animate-submenu-expand .45s cubic-bezier(.86,0,.07,1) forwards;overflow:hidden}.p-submenu-leave{animation:p-animate-submenu-collapse .45s cubic-bezier(.86,0,.07,1) forwards;overflow:hidden}@keyframes p-animate-submenu-collapse{0%{max-height:1000px;overflow:hidden}to{max-height:0;overflow:hidden}}@keyframes p-animate-submenu-expand{0%{max-height:0}to{max-height:1000px}}\n"] }]
|
|
308
305
|
}], ctorParameters: () => [], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], root: [{ type: i0.Input, args: [{ isSignal: true, alias: "root", required: false }] }], visibleChange: [{ type: i0.Output, args: ["visibleChange"] }], submenuElRef: [{ type: i0.ViewChild, args: ['submenu', { isSignal: true }] }] } });
|
|
309
306
|
|
|
310
307
|
class MenuComponent {
|
|
@@ -329,12 +326,12 @@ class MenuComponent {
|
|
|
329
326
|
untracked(() => this.menuService.setItems(items));
|
|
330
327
|
});
|
|
331
328
|
}
|
|
332
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
333
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
329
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: MenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
330
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: MenuComponent, isStandalone: true, selector: "mng-menu", ngImport: i0, template: "<ul class=\"layout-menu\">\n @for (item of menuService.menuItems(); track item) {\n @if (!item.separator) {\n <li mng-menuitem [item]=\"item\" [root]=\"true\"></li>\n }\n @if (item.separator) {\n <li class=\"menu-separator\"></li>\n }\n }\n</ul>\n", dependencies: [{ kind: "component", type: MenuItemComponent, selector: "[mng-menuitem]", inputs: ["item", "root"], outputs: ["visibleChange"] }] }); }
|
|
334
331
|
}
|
|
335
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
332
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: MenuComponent, decorators: [{
|
|
336
333
|
type: Component,
|
|
337
|
-
args: [{ selector: 'mng-menu', imports: [MenuItemComponent],
|
|
334
|
+
args: [{ selector: 'mng-menu', imports: [MenuItemComponent], template: "<ul class=\"layout-menu\">\n @for (item of menuService.menuItems(); track item) {\n @if (!item.separator) {\n <li mng-menuitem [item]=\"item\" [root]=\"true\"></li>\n }\n @if (item.separator) {\n <li class=\"menu-separator\"></li>\n }\n }\n</ul>\n" }]
|
|
338
335
|
}], ctorParameters: () => [] });
|
|
339
336
|
|
|
340
337
|
class SidebarComponent {
|
|
@@ -342,7 +339,8 @@ class SidebarComponent {
|
|
|
342
339
|
this.config = inject(COMMONS_LAYOUT_FEATURE_CONFIG_IT, { optional: true });
|
|
343
340
|
this.layout = inject(LayoutService);
|
|
344
341
|
this.el = inject(ElementRef);
|
|
345
|
-
this.menuComponent = signal(this.config?.components?.menu === false ? undefined : (this.config?.components?.menu ?? MenuComponent),
|
|
342
|
+
this.menuComponent = signal(this.config?.components?.menu === false ? undefined : (this.config?.components?.menu ?? MenuComponent), /* @ts-ignore */
|
|
343
|
+
...(ngDevMode ? [{ debugName: "menuComponent" }] : /* istanbul ignore next */ []));
|
|
346
344
|
this.timeout = null;
|
|
347
345
|
}
|
|
348
346
|
onMouseEnter() {
|
|
@@ -373,14 +371,14 @@ class SidebarComponent {
|
|
|
373
371
|
anchored: !state.anchored
|
|
374
372
|
}));
|
|
375
373
|
}
|
|
376
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
377
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
374
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
375
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: SidebarComponent, isStandalone: true, selector: "mng-sidebar", host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" }, classAttribute: "layout-sidebar" }, ngImport: i0, template: "<div class=\"sidebar-header\">\n <a [routerLink]=\"['/']\" class=\"app-logo\">\n <div class=\"app-logo-small\">\n @if (layout.appLogo()) {\n <img class=\"inline-block!\" [src]=\"layout.appLogo()\" [alt]=\"'App logo'\" />\n }\n </div>\n <div class=\"app-logo-normal\">\n @if (layout.appLogo()) {\n <img class=\"inline-block!\" [src]=\"layout.appLogo()\" [alt]=\"'App logo'\" />\n }\n @if (layout.appLogoName()) {\n <img class=\"ml-6 inline-block!\" [src]=\"layout.appLogoName()\" [alt]=\"'App name'\" />\n }\n </div>\n </a>\n <button class=\"layout-sidebar-anchor p-link z-20 hover:cursor-pointer\" type=\"button\" (click)=\"anchor()\"></button>\n</div>\n\n@if (menuComponent()) {\n <div class=\"layout-menu-container\">\n <div [mngComponent]=\"menuComponent()\" [attachToHost]=\"true\"></div>\n </div>\n}\n", dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: ComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent", "injectionToken", "inputs", "attachToHost", "parentInjector"], outputs: ["instanceCreated"] }] }); }
|
|
378
376
|
}
|
|
379
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
377
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SidebarComponent, decorators: [{
|
|
380
378
|
type: Component,
|
|
381
|
-
args: [{ selector: 'mng-sidebar', imports: [RouterModule, ComponentDirective],
|
|
379
|
+
args: [{ selector: 'mng-sidebar', imports: [RouterModule, ComponentDirective], host: {
|
|
382
380
|
class: 'layout-sidebar'
|
|
383
|
-
}, template: "<div class=\"sidebar-header\">\n <a [routerLink]=\"['/']\" class=\"app-logo\">\n <div class=\"app-logo-small\">\n @if (layout.appLogo()) {\n <img class=\"inline-block!\" [src]=\"layout.appLogo()\" [alt]=\"'App logo'\" />\n }\n </div>\n <div class=\"app-logo-normal\">\n @if (layout.appLogo()) {\n <img class=\"inline-block!\" [src]=\"layout.appLogo()\" [alt]=\"'App logo'\" />\n }\n @if (layout.appLogoName()) {\n <img class=\"ml-6 inline-block!\" [src]=\"layout.appLogoName()\" [alt]=\"'App name'\" />\n }\n </div>\n </a>\n <button class=\"layout-sidebar-anchor z-20\" type=\"button\" (click)=\"anchor()\"></button>\n</div>\n\n@if (menuComponent()) {\n <div class=\"layout-menu-container\">\n <div [mngComponent]=\"menuComponent()\" [attachToHost]=\"true\"></div>\n </div>\n}\n" }]
|
|
381
|
+
}, template: "<div class=\"sidebar-header\">\n <a [routerLink]=\"['/']\" class=\"app-logo\">\n <div class=\"app-logo-small\">\n @if (layout.appLogo()) {\n <img class=\"inline-block!\" [src]=\"layout.appLogo()\" [alt]=\"'App logo'\" />\n }\n </div>\n <div class=\"app-logo-normal\">\n @if (layout.appLogo()) {\n <img class=\"inline-block!\" [src]=\"layout.appLogo()\" [alt]=\"'App logo'\" />\n }\n @if (layout.appLogoName()) {\n <img class=\"ml-6 inline-block!\" [src]=\"layout.appLogoName()\" [alt]=\"'App name'\" />\n }\n </div>\n </a>\n <button class=\"layout-sidebar-anchor p-link z-20 hover:cursor-pointer\" type=\"button\" (click)=\"anchor()\"></button>\n</div>\n\n@if (menuComponent()) {\n <div class=\"layout-menu-container\">\n <div [mngComponent]=\"menuComponent()\" [attachToHost]=\"true\"></div>\n </div>\n}\n" }]
|
|
384
382
|
}], propDecorators: { onMouseEnter: [{
|
|
385
383
|
type: HostListener,
|
|
386
384
|
args: ['mouseenter']
|
|
@@ -407,7 +405,8 @@ class SettingsComponent {
|
|
|
407
405
|
constructor() {
|
|
408
406
|
this.dynamicDialogConfig = inject(DynamicDialogConfig);
|
|
409
407
|
this.dynamicDialogRef = inject(DynamicDialogRef);
|
|
410
|
-
this.colorSchemeOptions = signal(defaultColorSchemeOpts,
|
|
408
|
+
this.colorSchemeOptions = signal(defaultColorSchemeOpts, /* @ts-ignore */
|
|
409
|
+
...(ngDevMode ? [{ debugName: "colorSchemeOptions" }] : /* istanbul ignore next */ []));
|
|
411
410
|
this.injector = this.dynamicDialogConfig.data.injector;
|
|
412
411
|
this.translate = this.injector.get(TranslateService);
|
|
413
412
|
this.commons = this.injector.get(CommonsService);
|
|
@@ -450,12 +449,12 @@ class SettingsComponent {
|
|
|
450
449
|
closeDialog() {
|
|
451
450
|
this.dynamicDialogRef.close();
|
|
452
451
|
}
|
|
453
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
454
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
452
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SettingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
453
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: SettingsComponent, isStandalone: true, selector: "mng-settings", ngImport: i0, template: "<div class=\"h-full flex flex-col\">\n <div class=\"grow mng-action-editor-form-container\">\n @if (commons.appLocales().length > 1 || commons.appDataLocales().length > 1) {\n <h5>{{ 'mngSettings.locales' | translate }}</h5>\n <div class=\"flex\">\n @if (commons.appLocales().length > 1) {\n <div class=\"mb-2 pr-6\">\n <i class=\"pi pi-fw pi-globe\"></i>\n <p-select [ngModel]=\"commons.appLocale()\" [options]=\"commons.appLocales()\" (onChange)=\"switchLocale($event.value)\"></p-select>\n </div>\n }\n @if (commons.appDataLocales().length > 1) {\n <div class=\"mb-2 pr-6\">\n <i class=\"pi pi-fw pi-database\"></i>\n <p-select [ngModel]=\"commons.appDataLocale()\" [options]=\"commons.appDataLocales()\" (onChange)=\"switchDataLocale($event.value)\"></p-select>\n </div>\n }\n </div>\n }\n\n <h5 class=\"mt-2\">{{ 'mngSettings.colorScheme.title' | translate }}</h5>\n <div class=\"flex\">\n <p-selectButton\n [options]=\"colorSchemeOptions()\"\n [ngModel]=\"layout.colorSchemeSetting()\"\n (ngModelChange)=\"onColorSchemeChange($event)\"\n optionLabel=\"label\"\n optionValue=\"value\"\n allowEmpty=\"false\" />\n </div>\n\n @if (menuModes.length > 1) {\n <h5 class=\"mt-2\">{{ 'mngSettings.menuMode.title' | translate }}</h5>\n <div class=\"grid grid-cols-12\">\n @for (mode of menuModes; track mode) {\n <div class=\"mb-2 col-span-6 md:col-span-4\">\n <p-radioButton name=\"category\" [value]=\"mode\" [ngModel]=\"layout.menuMode()\" (ngModelChange)=\"onMenuModeChange(mode)\" />\n <label [for]=\"mode\" class=\"ml-2\">\n {{ 'mngSettings.menuMode.' + mode | translate }}\n </label>\n </div>\n }\n </div>\n }\n\n <div class=\"flex flex-row justify-between mng-action-editor-footer-container\">\n <div></div>\n <div>\n <p-button (onClick)=\"closeDialog()\" [label]=\"'general.close' | translate\" icon=\"pi pi-times\" styleClass=\"p-button-primary p-button-text\" />\n </div>\n </div>\n </div>\n</div>\n", dependencies: [{ kind: "component", type: RadioButton, selector: "p-radioButton, p-radiobutton, p-radio-button", inputs: ["value", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "styleClass", "autofocus", "binary", "variant", "size"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "styleClass", "ariaLabelledBy", "dataKey", "autofocus", "size", "fluid"], outputs: ["onOptionClick", "onChange"] }, { kind: "component", type: Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
|
|
455
454
|
}
|
|
456
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
455
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SettingsComponent, decorators: [{
|
|
457
456
|
type: Component,
|
|
458
|
-
args: [{ selector: 'mng-settings', imports: [TranslatePipe, RadioButton, FormsModule, Button, SelectButton, Select],
|
|
457
|
+
args: [{ selector: 'mng-settings', imports: [TranslatePipe, RadioButton, FormsModule, Button, SelectButton, Select], template: "<div class=\"h-full flex flex-col\">\n <div class=\"grow mng-action-editor-form-container\">\n @if (commons.appLocales().length > 1 || commons.appDataLocales().length > 1) {\n <h5>{{ 'mngSettings.locales' | translate }}</h5>\n <div class=\"flex\">\n @if (commons.appLocales().length > 1) {\n <div class=\"mb-2 pr-6\">\n <i class=\"pi pi-fw pi-globe\"></i>\n <p-select [ngModel]=\"commons.appLocale()\" [options]=\"commons.appLocales()\" (onChange)=\"switchLocale($event.value)\"></p-select>\n </div>\n }\n @if (commons.appDataLocales().length > 1) {\n <div class=\"mb-2 pr-6\">\n <i class=\"pi pi-fw pi-database\"></i>\n <p-select [ngModel]=\"commons.appDataLocale()\" [options]=\"commons.appDataLocales()\" (onChange)=\"switchDataLocale($event.value)\"></p-select>\n </div>\n }\n </div>\n }\n\n <h5 class=\"mt-2\">{{ 'mngSettings.colorScheme.title' | translate }}</h5>\n <div class=\"flex\">\n <p-selectButton\n [options]=\"colorSchemeOptions()\"\n [ngModel]=\"layout.colorSchemeSetting()\"\n (ngModelChange)=\"onColorSchemeChange($event)\"\n optionLabel=\"label\"\n optionValue=\"value\"\n allowEmpty=\"false\" />\n </div>\n\n @if (menuModes.length > 1) {\n <h5 class=\"mt-2\">{{ 'mngSettings.menuMode.title' | translate }}</h5>\n <div class=\"grid grid-cols-12\">\n @for (mode of menuModes; track mode) {\n <div class=\"mb-2 col-span-6 md:col-span-4\">\n <p-radioButton name=\"category\" [value]=\"mode\" [ngModel]=\"layout.menuMode()\" (ngModelChange)=\"onMenuModeChange(mode)\" />\n <label [for]=\"mode\" class=\"ml-2\">\n {{ 'mngSettings.menuMode.' + mode | translate }}\n </label>\n </div>\n }\n </div>\n }\n\n <div class=\"flex flex-row justify-between mng-action-editor-footer-container\">\n <div></div>\n <div>\n <p-button (onClick)=\"closeDialog()\" [label]=\"'general.close' | translate\" icon=\"pi pi-times\" styleClass=\"p-button-primary p-button-text\" />\n </div>\n </div>\n </div>\n</div>\n" }]
|
|
459
458
|
}], ctorParameters: () => [] });
|
|
460
459
|
|
|
461
460
|
class TopbarUserComponent {
|
|
@@ -465,9 +464,12 @@ class TopbarUserComponent {
|
|
|
465
464
|
this.commons = inject(CommonsService);
|
|
466
465
|
this.hrefJsVoid = inject(DomSanitizer).bypassSecurityTrustUrl('javascript:void(0)');
|
|
467
466
|
this.config = inject(COMMONS_LAYOUT_FEATURE_CONFIG_IT, { optional: true });
|
|
468
|
-
this.user = computed(() => this.commons.user(),
|
|
469
|
-
|
|
470
|
-
this.
|
|
467
|
+
this.user = computed(() => this.commons.user(), /* @ts-ignore */
|
|
468
|
+
...(ngDevMode ? [{ debugName: "user" }] : /* istanbul ignore next */ []));
|
|
469
|
+
this.userRoles = computed(() => this.commons.userRoles(), /* @ts-ignore */
|
|
470
|
+
...(ngDevMode ? [{ debugName: "userRoles" }] : /* istanbul ignore next */ []));
|
|
471
|
+
this.settingsDisabled = signal(this.config?.components?.settings === false, /* @ts-ignore */
|
|
472
|
+
...(ngDevMode ? [{ debugName: "settingsDisabled" }] : /* istanbul ignore next */ []));
|
|
471
473
|
}
|
|
472
474
|
logout(user, event) {
|
|
473
475
|
if (typeof user?.logout === 'function') {
|
|
@@ -488,12 +490,12 @@ class TopbarUserComponent {
|
|
|
488
490
|
}
|
|
489
491
|
});
|
|
490
492
|
}
|
|
491
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
492
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
493
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: TopbarUserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
494
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: TopbarUserComponent, isStandalone: true, selector: "mng-topbar-user-component", ngImport: i0, template: "<a\n [hideOnOutsideClick]=\"true\"\n class=\"cursor-pointer\"\n pStyleClass=\"@next\"\n enterFromClass=\"hidden!\"\n enterActiveClass=\"animate-scalein\"\n leaveToClass=\"hidden!\"\n leaveActiveClass=\"animate-fadeout\">\n <i class=\"pi pi-fw pi-user text-2xl\"></i>\n <span> {{ user()?.displayName ?? user()?.username }}</span>\n</a>\n<ul class=\"topbar-menu active-topbar-menu p-6! w-60 z-50 hidden! rounded\">\n <li role=\"menuitem\" class=\"m-0! mb-4!\">\n <a\n class=\"flex items-center hover:text-primary-500 duration-200\"\n pStyleClass=\"@grandparent\"\n enterFromClass=\"hidden!\"\n enterActiveClass=\"animate-scalein\"\n leaveToClass=\"hidden!\"\n leaveActiveClass=\"animate-fadeout\">\n <i class=\"pi pi-fw pi-user text-base mr-2\"></i>\n <div>\n <strong>{{ user()?.displayName ?? user()?.username }}</strong>\n @if (userRoles().length > 0) {\n <small>\n <br />\n {{ userRoles() }}\n </small>\n }\n </div>\n </a>\n </li>\n @if (!settingsDisabled()) {\n <li role=\"menuitem\" class=\"m-0!\">\n <a\n [href]=\"hrefJsVoid\"\n (click)=\"openSettings()\"\n class=\"flex items-center hover:text-primary-500 duration-200\"\n pStyleClass=\"@grandparent\"\n enterFromClass=\"hidden!\"\n enterActiveClass=\"animate-scalein\"\n leaveToClass=\"hidden!\"\n leaveActiveClass=\"animate-fadeout\">\n <i class=\"pi pi-fw pi-cog text-base mr-2\"></i>\n {{ 'mngSettings.title' | translate }}\n </a>\n </li>\n }\n @if (user()?.logout || user()?.logoutUrl) {\n <li role=\"menuitem\" class=\"m-0!\">\n <a\n [href]=\"user()?.logoutUrl ?? hrefJsVoid\"\n (click)=\"logout(user(), $event)\"\n class=\"flex items-center hover:text-primary-500 duration-200\"\n pStyleClass=\"@grandparent\"\n enterFromClass=\"hidden!\"\n enterActiveClass=\"animate-scalein\"\n leaveToClass=\"hidden!\"\n leaveActiveClass=\"animate-fadeout\">\n <i class=\"pi pi-fw pi-sign-out text-base mr-2\"></i>\n <span>{{ 'mngTopbar.logout' | translate }}</span>\n </a>\n </li>\n }\n</ul>\n", dependencies: [{ kind: "directive", type: StyleClass, selector: "[pStyleClass]", inputs: ["pStyleClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass", "hideOnEscape", "hideOnResize", "resizeSelector"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
|
|
493
495
|
}
|
|
494
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
496
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: TopbarUserComponent, decorators: [{
|
|
495
497
|
type: Component,
|
|
496
|
-
args: [{ selector: 'mng-topbar-user-component', imports: [TranslatePipe, StyleClass],
|
|
498
|
+
args: [{ selector: 'mng-topbar-user-component', imports: [TranslatePipe, StyleClass], template: "<a\n [hideOnOutsideClick]=\"true\"\n class=\"cursor-pointer\"\n pStyleClass=\"@next\"\n enterFromClass=\"hidden!\"\n enterActiveClass=\"animate-scalein\"\n leaveToClass=\"hidden!\"\n leaveActiveClass=\"animate-fadeout\">\n <i class=\"pi pi-fw pi-user text-2xl\"></i>\n <span> {{ user()?.displayName ?? user()?.username }}</span>\n</a>\n<ul class=\"topbar-menu active-topbar-menu p-6! w-60 z-50 hidden! rounded\">\n <li role=\"menuitem\" class=\"m-0! mb-4!\">\n <a\n class=\"flex items-center hover:text-primary-500 duration-200\"\n pStyleClass=\"@grandparent\"\n enterFromClass=\"hidden!\"\n enterActiveClass=\"animate-scalein\"\n leaveToClass=\"hidden!\"\n leaveActiveClass=\"animate-fadeout\">\n <i class=\"pi pi-fw pi-user text-base mr-2\"></i>\n <div>\n <strong>{{ user()?.displayName ?? user()?.username }}</strong>\n @if (userRoles().length > 0) {\n <small>\n <br />\n {{ userRoles() }}\n </small>\n }\n </div>\n </a>\n </li>\n @if (!settingsDisabled()) {\n <li role=\"menuitem\" class=\"m-0!\">\n <a\n [href]=\"hrefJsVoid\"\n (click)=\"openSettings()\"\n class=\"flex items-center hover:text-primary-500 duration-200\"\n pStyleClass=\"@grandparent\"\n enterFromClass=\"hidden!\"\n enterActiveClass=\"animate-scalein\"\n leaveToClass=\"hidden!\"\n leaveActiveClass=\"animate-fadeout\">\n <i class=\"pi pi-fw pi-cog text-base mr-2\"></i>\n {{ 'mngSettings.title' | translate }}\n </a>\n </li>\n }\n @if (user()?.logout || user()?.logoutUrl) {\n <li role=\"menuitem\" class=\"m-0!\">\n <a\n [href]=\"user()?.logoutUrl ?? hrefJsVoid\"\n (click)=\"logout(user(), $event)\"\n class=\"flex items-center hover:text-primary-500 duration-200\"\n pStyleClass=\"@grandparent\"\n enterFromClass=\"hidden!\"\n enterActiveClass=\"animate-scalein\"\n leaveToClass=\"hidden!\"\n leaveActiveClass=\"animate-fadeout\">\n <i class=\"pi pi-fw pi-sign-out text-base mr-2\"></i>\n <span>{{ 'mngTopbar.logout' | translate }}</span>\n </a>\n </li>\n }\n</ul>\n" }]
|
|
497
499
|
}] });
|
|
498
500
|
|
|
499
501
|
class TopbarComponent {
|
|
@@ -502,8 +504,10 @@ class TopbarComponent {
|
|
|
502
504
|
this.commons = inject(CommonsService);
|
|
503
505
|
this.layout = inject(LayoutService);
|
|
504
506
|
this.config = inject(COMMONS_LAYOUT_FEATURE_CONFIG_IT, { optional: true });
|
|
505
|
-
this.topbarUserComponent = signal(this.config?.components?.topbarUser === false ? undefined : (this.config?.components?.topbarUser ?? TopbarUserComponent),
|
|
506
|
-
|
|
507
|
+
this.topbarUserComponent = signal(this.config?.components?.topbarUser === false ? undefined : (this.config?.components?.topbarUser ?? TopbarUserComponent), /* @ts-ignore */
|
|
508
|
+
...(ngDevMode ? [{ debugName: "topbarUserComponent" }] : /* istanbul ignore next */ []));
|
|
509
|
+
this.breadcrumbComponent = signal(this.config?.components?.breadcrumb === false ? undefined : (this.config?.components?.breadcrumb ?? BreadcrumbComponent), /* @ts-ignore */
|
|
510
|
+
...(ngDevMode ? [{ debugName: "breadcrumbComponent" }] : /* istanbul ignore next */ []));
|
|
507
511
|
}
|
|
508
512
|
onMenuButtonClick() {
|
|
509
513
|
this.layout.onMenuToggle();
|
|
@@ -511,12 +515,12 @@ class TopbarComponent {
|
|
|
511
515
|
switchLocale(language) {
|
|
512
516
|
this.commons.setAppLocale(language);
|
|
513
517
|
}
|
|
514
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
515
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
518
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: TopbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
519
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: TopbarComponent, isStandalone: true, selector: "mng-topbar", host: { classAttribute: "layout-topbar" }, ngImport: i0, template: "<div class=\"topbar-start\">\n <button #menubutton pButton type=\"button\" class=\"topbar-menubutton p-trigger\" (click)=\"onMenuButtonClick()\">\n <i class=\"pi pi-bars\"></i>\n </button>\n\n @if (breadcrumbComponent()) {\n <div class=\"topbar-breadcrumb\">\n <div [mngComponent]=\"breadcrumbComponent()\" [attachToHost]=\"true\"></div>\n </div>\n }\n</div>\n<div class=\"layout-topbar-menu-section\">\n <mng-sidebar></mng-sidebar>\n</div>\n<div class=\"topbar-end\">\n <ul class=\"topbar-menu\">\n @if (commons.appLocales().length > 1) {\n <li class=\"topbar-item\">\n <i class=\"pi pi-fw pi-globe\"></i>\n <p-select [ngModel]=\"commons.appLocale()\" [options]=\"commons.appLocales()\" (onChange)=\"switchLocale($event.value)\" appendTo=\"body\" />\n </li>\n }\n @if (topbarUserComponent()) {\n <li #userMenuItem class=\"profile-item topbar-item mr-8\" [mngComponent]=\"topbarUserComponent()\" [attachToHost]=\"true\"></li>\n }\n </ul>\n</div>\n", dependencies: [{ kind: "component", type: SidebarComponent, selector: "mng-sidebar" }, { kind: "ngmodule", type: StyleClassModule }, { kind: "directive", type: ComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent", "injectionToken", "inputs", "attachToHost", "parentInjector"], outputs: ["instanceCreated"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "directive", type: ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }] }); }
|
|
516
520
|
}
|
|
517
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
521
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: TopbarComponent, decorators: [{
|
|
518
522
|
type: Component,
|
|
519
|
-
args: [{ selector: 'mng-topbar', imports: [SidebarComponent, StyleClassModule, ComponentDirective, FormsModule, Select, ButtonDirective],
|
|
523
|
+
args: [{ selector: 'mng-topbar', imports: [SidebarComponent, StyleClassModule, ComponentDirective, FormsModule, Select, ButtonDirective], host: {
|
|
520
524
|
class: 'layout-topbar'
|
|
521
525
|
}, template: "<div class=\"topbar-start\">\n <button #menubutton pButton type=\"button\" class=\"topbar-menubutton p-trigger\" (click)=\"onMenuButtonClick()\">\n <i class=\"pi pi-bars\"></i>\n </button>\n\n @if (breadcrumbComponent()) {\n <div class=\"topbar-breadcrumb\">\n <div [mngComponent]=\"breadcrumbComponent()\" [attachToHost]=\"true\"></div>\n </div>\n }\n</div>\n<div class=\"layout-topbar-menu-section\">\n <mng-sidebar></mng-sidebar>\n</div>\n<div class=\"topbar-end\">\n <ul class=\"topbar-menu\">\n @if (commons.appLocales().length > 1) {\n <li class=\"topbar-item\">\n <i class=\"pi pi-fw pi-globe\"></i>\n <p-select [ngModel]=\"commons.appLocale()\" [options]=\"commons.appLocales()\" (onChange)=\"switchLocale($event.value)\" appendTo=\"body\" />\n </li>\n }\n @if (topbarUserComponent()) {\n <li #userMenuItem class=\"profile-item topbar-item mr-8\" [mngComponent]=\"topbarUserComponent()\" [attachToHost]=\"true\"></li>\n }\n </ul>\n</div>\n" }]
|
|
522
526
|
}] });
|
|
@@ -528,12 +532,18 @@ class MainLayoutComponent {
|
|
|
528
532
|
this.layout = inject(LayoutService);
|
|
529
533
|
this.menuService = inject(MenuService);
|
|
530
534
|
this.renderer = inject(Renderer2);
|
|
531
|
-
this.appTopbar = viewChild('topbarCmp',
|
|
532
|
-
|
|
533
|
-
this.
|
|
534
|
-
|
|
535
|
-
this.
|
|
536
|
-
|
|
535
|
+
this.appTopbar = viewChild('topbarCmp', /* @ts-ignore */
|
|
536
|
+
...(ngDevMode ? [{ debugName: "appTopbar" }] : /* istanbul ignore next */ []));
|
|
537
|
+
this.ripple = signal(this.config?.ripple ?? true, /* @ts-ignore */
|
|
538
|
+
...(ngDevMode ? [{ debugName: "ripple" }] : /* istanbul ignore next */ []));
|
|
539
|
+
this.topbarComponent = signal(this.config?.components?.topbar === false ? undefined : (this.config?.components?.topbar ?? TopbarComponent), /* @ts-ignore */
|
|
540
|
+
...(ngDevMode ? [{ debugName: "topbarComponent" }] : /* istanbul ignore next */ []));
|
|
541
|
+
this.breadcrumbsComponent = signal(this.config?.components?.breadcrumb === false ? undefined : (this.config?.components?.breadcrumb ?? BreadcrumbComponent), /* @ts-ignore */
|
|
542
|
+
...(ngDevMode ? [{ debugName: "breadcrumbsComponent" }] : /* istanbul ignore next */ []));
|
|
543
|
+
this.footerComponent = signal(this.config?.components?.footer === false ? undefined : (this.config?.components?.footer ?? FooterComponent), /* @ts-ignore */
|
|
544
|
+
...(ngDevMode ? [{ debugName: "footerComponent" }] : /* istanbul ignore next */ []));
|
|
545
|
+
this.useNotificationWrapper = signal(!this.config?.disableNotificationWrapper, /* @ts-ignore */
|
|
546
|
+
...(ngDevMode ? [{ debugName: "useNotificationWrapper" }] : /* istanbul ignore next */ []));
|
|
537
547
|
this.layout.overlayOpen$.pipe(takeUntilDestroyed()).subscribe(() => {
|
|
538
548
|
if (!this.menuOutsideClickListener) {
|
|
539
549
|
this.menuOutsideClickListener = this.renderer.listen('document', 'click', event => {
|
|
@@ -588,12 +598,12 @@ class MainLayoutComponent {
|
|
|
588
598
|
this.menuOutsideClickListener();
|
|
589
599
|
}
|
|
590
600
|
}
|
|
591
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
592
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
601
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: MainLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
602
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: MainLayoutComponent, isStandalone: true, selector: "mng-main-layout", viewQueries: [{ propertyName: "appTopbar", first: true, predicate: ["topbarCmp"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (useNotificationWrapper()) {\n <mng-notification-wrapper>\n <ng-template [ngTemplateOutlet]=\"content\"></ng-template>\n </mng-notification-wrapper>\n} @else {\n <ng-template [ngTemplateOutlet]=\"content\"></ng-template>\n}\n\n<ng-template #content>\n <div\n class=\"layout-wrapper\"\n [ngClass]=\"{\n 'layout-light': layout.colorScheme() === 'light',\n 'layout-dark': layout.colorScheme() === 'dark',\n 'layout-overlay': layout.menuMode() === 'overlay',\n 'layout-static': layout.menuMode() === 'static',\n 'layout-reveal': layout.menuMode() === 'reveal',\n 'layout-drawer': layout.menuMode() === 'drawer',\n 'layout-slim': layout.menuMode() === 'slim',\n 'layout-slim-plus': layout.menuMode() === 'slim-plus',\n 'layout-static-inactive': layout.state().staticMenuDesktopInactive && layout.menuMode() === 'static',\n 'layout-overlay-active': layout.state().overlayMenuActive,\n 'layout-mobile-active': layout.state().staticMenuMobileActive,\n 'p-ripple-disabled': !ripple(),\n 'layout-sidebar-active': layout.state().sidebarActive,\n 'layout-sidebar-anchored': layout.state().anchored\n }\">\n <div class=\"layout-content-wrapper\">\n @if (topbarComponent()) {\n <div [mngComponent]=\"topbarComponent()\" [attachToHost]=\"true\"></div>\n }\n @if (breadcrumbsComponent()) {\n <div class=\"content-breadcrumb\">\n <div [mngComponent]=\"breadcrumbsComponent()\" [attachToHost]=\"true\"></div>\n </div>\n }\n <div class=\"layout-content\">\n <router-outlet></router-outlet>\n </div>\n <div class=\"layout-mask\"></div>\n @if (footerComponent()) {\n <div [mngComponent]=\"footerComponent()\" [attachToHost]=\"true\"></div>\n }\n </div>\n </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: ComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent", "injectionToken", "inputs", "attachToHost", "parentInjector"], outputs: ["instanceCreated"] }, { kind: "component", type: NotificationWrapperComponent, selector: "mng-notification-wrapper" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
|
|
593
603
|
}
|
|
594
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
604
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: MainLayoutComponent, decorators: [{
|
|
595
605
|
type: Component,
|
|
596
|
-
args: [{ selector: 'mng-main-layout', imports: [NgClass, RouterModule, ComponentDirective, NotificationWrapperComponent, NgTemplateOutlet],
|
|
606
|
+
args: [{ selector: 'mng-main-layout', imports: [NgClass, RouterModule, ComponentDirective, NotificationWrapperComponent, NgTemplateOutlet], template: "@if (useNotificationWrapper()) {\n <mng-notification-wrapper>\n <ng-template [ngTemplateOutlet]=\"content\"></ng-template>\n </mng-notification-wrapper>\n} @else {\n <ng-template [ngTemplateOutlet]=\"content\"></ng-template>\n}\n\n<ng-template #content>\n <div\n class=\"layout-wrapper\"\n [ngClass]=\"{\n 'layout-light': layout.colorScheme() === 'light',\n 'layout-dark': layout.colorScheme() === 'dark',\n 'layout-overlay': layout.menuMode() === 'overlay',\n 'layout-static': layout.menuMode() === 'static',\n 'layout-reveal': layout.menuMode() === 'reveal',\n 'layout-drawer': layout.menuMode() === 'drawer',\n 'layout-slim': layout.menuMode() === 'slim',\n 'layout-slim-plus': layout.menuMode() === 'slim-plus',\n 'layout-static-inactive': layout.state().staticMenuDesktopInactive && layout.menuMode() === 'static',\n 'layout-overlay-active': layout.state().overlayMenuActive,\n 'layout-mobile-active': layout.state().staticMenuMobileActive,\n 'p-ripple-disabled': !ripple(),\n 'layout-sidebar-active': layout.state().sidebarActive,\n 'layout-sidebar-anchored': layout.state().anchored\n }\">\n <div class=\"layout-content-wrapper\">\n @if (topbarComponent()) {\n <div [mngComponent]=\"topbarComponent()\" [attachToHost]=\"true\"></div>\n }\n @if (breadcrumbsComponent()) {\n <div class=\"content-breadcrumb\">\n <div [mngComponent]=\"breadcrumbsComponent()\" [attachToHost]=\"true\"></div>\n </div>\n }\n <div class=\"layout-content\">\n <router-outlet></router-outlet>\n </div>\n <div class=\"layout-mask\"></div>\n @if (footerComponent()) {\n <div [mngComponent]=\"footerComponent()\" [attachToHost]=\"true\"></div>\n }\n </div>\n </div>\n</ng-template>\n" }]
|
|
597
607
|
}], ctorParameters: () => [], propDecorators: { appTopbar: [{ type: i0.ViewChild, args: ['topbarCmp', { isSignal: true }] }] } });
|
|
598
608
|
|
|
599
609
|
// components
|