@mediusinc/mng-commons-layout 5.4.0 → 5.5.0-rc.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/components/breadcrumb.component.mjs +4 -4
- package/esm2022/lib/components/footer.component.mjs +5 -5
- package/esm2022/lib/components/main-layout.component.mjs +7 -7
- package/esm2022/lib/components/menu-item.component.mjs +5 -5
- package/esm2022/lib/components/menu.component.mjs +4 -4
- package/esm2022/lib/components/pages/error/error.page.component.mjs +4 -4
- package/esm2022/lib/components/pages/not-found/not-found.page.component.mjs +4 -4
- package/esm2022/lib/components/settings.component.mjs +4 -4
- package/esm2022/lib/components/sidebar.component.mjs +5 -5
- package/esm2022/lib/components/topbar-user.component.mjs +4 -4
- package/esm2022/lib/components/topbar.component.mjs +6 -6
- package/esm2022/lib/components/version.component.mjs +52 -43
- package/esm2022/lib/services/layout.service.mjs +4 -4
- package/esm2022/lib/services/menu.service.mjs +10 -13
- package/esm2022/lib/services/version.service.mjs +4 -4
- package/fesm2022/mediusinc-mng-commons-layout.mjs +107 -101
- package/fesm2022/mediusinc-mng-commons-layout.mjs.map +1 -1
- package/lib/components/version.component.d.ts +10 -7
- package/lib/services/menu.service.d.ts +1 -1
- package/package.json +3 -3
- package/version-info.json +6 -6
|
@@ -9,7 +9,7 @@ import { ButtonModule, Button } from 'primeng/button';
|
|
|
9
9
|
import { DOCUMENT, AsyncPipe, NgOptimizedImage, NgClass, NgTemplateOutlet } from '@angular/common';
|
|
10
10
|
import { Subject, ReplaySubject, catchError, of, switchMap, take, startWith, distinctUntilChanged } from 'rxjs';
|
|
11
11
|
import * as i2 from '@mediusinc/mng-commons/core';
|
|
12
|
-
import { COMMONS_MODULE_CONFIG_IT, CommonsStorageService, LoggerService, JsonPathPipe, CommonsService, ComponentDirective, CommonsRouterService, adjustRouteMenuLazyChildrenRouterLinks, doesUrlMatchRouterLink, PermissionService, toObservable as toObservable$1, EnumerateAsyncPipe, NotificationWrapperComponent, createRoute, CommonsFeatureTypeEnum } from '@mediusinc/mng-commons/core';
|
|
12
|
+
import { COMMONS_MODULE_CONFIG_IT, CommonsStorageService, LoggerService, CommonsConfigurationService, JsonPathPipe, CommonsService, ComponentDirective, CommonsRouterService, adjustRouteMenuLazyChildrenRouterLinks, doesUrlMatchRouterLink, PermissionService, toObservable as toObservable$1, EnumerateAsyncPipe, NotificationWrapperComponent, createRoute, CommonsFeatureTypeEnum } from '@mediusinc/mng-commons/core';
|
|
13
13
|
import { toObservable, takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
|
|
14
14
|
import { map, filter } from 'rxjs/operators';
|
|
15
15
|
import * as i1$2 from '@angular/common/http';
|
|
@@ -195,10 +195,10 @@ class LayoutService {
|
|
|
195
195
|
}
|
|
196
196
|
return this.config?.menuMode ?? 'static';
|
|
197
197
|
}
|
|
198
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.
|
|
199
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.
|
|
198
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: LayoutService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
199
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: LayoutService }); }
|
|
200
200
|
}
|
|
201
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.
|
|
201
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: LayoutService, decorators: [{
|
|
202
202
|
type: Injectable
|
|
203
203
|
}], ctorParameters: () => [] });
|
|
204
204
|
|
|
@@ -206,10 +206,10 @@ class ErrorPageComponent {
|
|
|
206
206
|
constructor() {
|
|
207
207
|
this.layout = inject(LayoutService);
|
|
208
208
|
}
|
|
209
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.
|
|
210
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.
|
|
209
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: ErrorPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
210
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: ErrorPageComponent, isStandalone: true, selector: "mng-error-page", ngImport: i0, template: "<div [class]=\"'exception-body min-h-screen ' + (layout.colorSchemeIsLight() ? 'layout-light' : 'layout-dark')\">\n <div class=\"exception-container min-h-screen flex align-items-center justify-content-center flex-column bg-auto md:bg-contain bg-no-repeat\">\n <div class=\"exception-panel text-center flex align-items-center justify-content-center flex-column\">\n <h1 class=\"text-red-400 mb-0\">{{ 'pages.notFound.title' | translate }}</h1>\n <h3 class=\"text-red-300\">{{ 'pages.notFound.subtitle' | translate }}</h3>\n <button type=\"button\" pButton [label]=\"'general.returnHome' | translate\" [routerLink]=\"['/']\"></button>\n </div>\n <div class=\"exception-footer align-items-center flex\">\n <img [src]=\"layout.appLogo()\" class=\"exception-logo\" alt=\"App logo\" />\n <img [src]=\"layout.appLogoName()\" class=\"exception-appname ml-3\" alt=\"App name\" />\n </div>\n </div>\n</div>\n", styles: [".exception-body{background:var(--surface-ground)}.exception-body .exception-container{background:var(--exception-pages-image);background-repeat:no-repeat;background-size:contain;box-sizing:border-box}.exception-body .exception-container .exception-panel{box-sizing:border-box;flex-grow:1;margin-top:3rem;margin-bottom:3rem}.exception-body .exception-container .exception-panel h1{font-size:140px;font-weight:900;text-shadow:0 0 50px rgba(252,97,97,.2)}.exception-body .exception-container .exception-panel h3{font-size:80px;font-weight:900;margin-top:-90px;margin-bottom:50px}.exception-body .exception-container .exception-panel button{margin-top:50px}.exception-body .exception-container .exception-footer{margin-bottom:2rem}.exception-body .exception-container .exception-footer .exception-logo{width:34px}.exception-body .exception-container .exception-footer .exception-appname{width:72px}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
211
211
|
}
|
|
212
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.
|
|
212
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: ErrorPageComponent, decorators: [{
|
|
213
213
|
type: Component,
|
|
214
214
|
args: [{ standalone: true, selector: 'mng-error-page', imports: [ButtonModule, TranslateModule, RouterLink], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"'exception-body min-h-screen ' + (layout.colorSchemeIsLight() ? 'layout-light' : 'layout-dark')\">\n <div class=\"exception-container min-h-screen flex align-items-center justify-content-center flex-column bg-auto md:bg-contain bg-no-repeat\">\n <div class=\"exception-panel text-center flex align-items-center justify-content-center flex-column\">\n <h1 class=\"text-red-400 mb-0\">{{ 'pages.notFound.title' | translate }}</h1>\n <h3 class=\"text-red-300\">{{ 'pages.notFound.subtitle' | translate }}</h3>\n <button type=\"button\" pButton [label]=\"'general.returnHome' | translate\" [routerLink]=\"['/']\"></button>\n </div>\n <div class=\"exception-footer align-items-center flex\">\n <img [src]=\"layout.appLogo()\" class=\"exception-logo\" alt=\"App logo\" />\n <img [src]=\"layout.appLogoName()\" class=\"exception-appname ml-3\" alt=\"App name\" />\n </div>\n </div>\n</div>\n", styles: [".exception-body{background:var(--surface-ground)}.exception-body .exception-container{background:var(--exception-pages-image);background-repeat:no-repeat;background-size:contain;box-sizing:border-box}.exception-body .exception-container .exception-panel{box-sizing:border-box;flex-grow:1;margin-top:3rem;margin-bottom:3rem}.exception-body .exception-container .exception-panel h1{font-size:140px;font-weight:900;text-shadow:0 0 50px rgba(252,97,97,.2)}.exception-body .exception-container .exception-panel h3{font-size:80px;font-weight:900;margin-top:-90px;margin-bottom:50px}.exception-body .exception-container .exception-panel button{margin-top:50px}.exception-body .exception-container .exception-footer{margin-bottom:2rem}.exception-body .exception-container .exception-footer .exception-logo{width:34px}.exception-body .exception-container .exception-footer .exception-appname{width:72px}\n"] }]
|
|
215
215
|
}] });
|
|
@@ -218,10 +218,10 @@ class NotFoundPageComponent {
|
|
|
218
218
|
constructor() {
|
|
219
219
|
this.layout = inject(LayoutService);
|
|
220
220
|
}
|
|
221
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.
|
|
222
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.
|
|
221
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: NotFoundPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
222
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: NotFoundPageComponent, isStandalone: true, selector: "mng-not-found-page", ngImport: i0, template: "<div [class]=\"'exception-body min-h-screen ' + (layout.colorSchemeIsLight() ? 'layout-light' : 'layout-dark')\">\n <div class=\"exception-container min-h-screen flex align-items-center justify-content-center flex-column bg-auto md:bg-contain bg-no-repeat\">\n <div class=\"exception-panel text-center flex align-items-center justify-content-center flex-column\">\n <h1 class=\"text-red-400 mb-0\">{{ 'pages.notFound.title' | translate }}</h1>\n <h3 class=\"text-red-300\">{{ 'pages.notFound.subtitle' | translate }}</h3>\n <p>{{ 'pages.notFound.message' | translate }}</p>\n <button type=\"button\" pButton [label]=\"'general.returnHome' | translate\" [routerLink]=\"['/']\"></button>\n </div>\n <div class=\"exception-footer align-items-center flex\">\n <img [src]=\"layout.appLogo()\" class=\"exception-logo\" alt=\"App logo\" />\n <img [src]=\"layout.appLogoName()\" class=\"exception-appname ml-3\" alt=\"App name\" />\n </div>\n </div>\n</div>\n", styles: [".exception-body{background:var(--surface-ground)}.exception-body .exception-container{background:var(--exception-pages-image);background-repeat:no-repeat;background-size:contain;box-sizing:border-box}.exception-body .exception-container .exception-panel{box-sizing:border-box;flex-grow:1;margin-top:3rem;margin-bottom:3rem}.exception-body .exception-container .exception-panel h1{font-size:140px;font-weight:900;text-shadow:0 0 50px rgba(252,97,97,.2)}.exception-body .exception-container .exception-panel h3{font-size:80px;font-weight:900;margin-top:-90px;margin-bottom:50px}.exception-body .exception-container .exception-panel p{font-size:24px;font-weight:400;max-width:320px}.exception-body .exception-container .exception-panel button{margin-top:50px}.exception-body .exception-container .exception-footer{margin-bottom:2rem}.exception-body .exception-container .exception-footer .exception-logo{width:34px}.exception-body .exception-container .exception-footer .exception-appname{width:72px}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
223
223
|
}
|
|
224
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.
|
|
224
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: NotFoundPageComponent, decorators: [{
|
|
225
225
|
type: Component,
|
|
226
226
|
args: [{ standalone: true, selector: 'mng-not-found-page', imports: [ButtonModule, RouterLink, TranslateModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"'exception-body min-h-screen ' + (layout.colorSchemeIsLight() ? 'layout-light' : 'layout-dark')\">\n <div class=\"exception-container min-h-screen flex align-items-center justify-content-center flex-column bg-auto md:bg-contain bg-no-repeat\">\n <div class=\"exception-panel text-center flex align-items-center justify-content-center flex-column\">\n <h1 class=\"text-red-400 mb-0\">{{ 'pages.notFound.title' | translate }}</h1>\n <h3 class=\"text-red-300\">{{ 'pages.notFound.subtitle' | translate }}</h3>\n <p>{{ 'pages.notFound.message' | translate }}</p>\n <button type=\"button\" pButton [label]=\"'general.returnHome' | translate\" [routerLink]=\"['/']\"></button>\n </div>\n <div class=\"exception-footer align-items-center flex\">\n <img [src]=\"layout.appLogo()\" class=\"exception-logo\" alt=\"App logo\" />\n <img [src]=\"layout.appLogoName()\" class=\"exception-appname ml-3\" alt=\"App name\" />\n </div>\n </div>\n</div>\n", styles: [".exception-body{background:var(--surface-ground)}.exception-body .exception-container{background:var(--exception-pages-image);background-repeat:no-repeat;background-size:contain;box-sizing:border-box}.exception-body .exception-container .exception-panel{box-sizing:border-box;flex-grow:1;margin-top:3rem;margin-bottom:3rem}.exception-body .exception-container .exception-panel h1{font-size:140px;font-weight:900;text-shadow:0 0 50px rgba(252,97,97,.2)}.exception-body .exception-container .exception-panel h3{font-size:80px;font-weight:900;margin-top:-90px;margin-bottom:50px}.exception-body .exception-container .exception-panel p{font-size:24px;font-weight:400;max-width:320px}.exception-body .exception-container .exception-panel button{margin-top:50px}.exception-body .exception-container .exception-footer{margin-bottom:2rem}.exception-body .exception-container .exception-footer .exception-logo{width:34px}.exception-body .exception-container .exception-footer .exception-appname{width:72px}\n"] }]
|
|
227
227
|
}] });
|
|
@@ -257,72 +257,81 @@ class VersionService {
|
|
|
257
257
|
}
|
|
258
258
|
return this.cache[url].asObservable();
|
|
259
259
|
}
|
|
260
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.
|
|
261
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.
|
|
260
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: VersionService, deps: [{ token: i1$2.HttpClient }, { token: i2.CommonsConfigurationService }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
261
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: VersionService }); }
|
|
262
262
|
}
|
|
263
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.
|
|
263
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: VersionService, decorators: [{
|
|
264
264
|
type: Injectable
|
|
265
265
|
}], ctorParameters: () => [{ type: i1$2.HttpClient }, { type: i2.CommonsConfigurationService }] });
|
|
266
266
|
|
|
267
267
|
class VersionComponent {
|
|
268
268
|
constructor() {
|
|
269
269
|
this.versionService = inject(VersionService);
|
|
270
|
+
this.configService = inject(CommonsConfigurationService);
|
|
270
271
|
this.destroyRef = inject(DestroyRef);
|
|
271
272
|
this.jsonPathPipe = new JsonPathPipe();
|
|
272
|
-
this.
|
|
273
|
+
this.versionInput = input(undefined, { alias: 'version' });
|
|
273
274
|
this.isLoading = signal(false);
|
|
274
275
|
this.loadedVersion = signal(undefined);
|
|
275
|
-
this.
|
|
276
|
-
if (
|
|
277
|
-
return this.
|
|
276
|
+
this.versionAsArray = computed(() => {
|
|
277
|
+
if (Array.isArray(this.versionInput())) {
|
|
278
|
+
return this.versionInput();
|
|
278
279
|
}
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
280
|
+
return undefined;
|
|
281
|
+
});
|
|
282
|
+
this.versionInfo = computed(() => {
|
|
283
|
+
if (this.versionAsArray() !== undefined) {
|
|
284
|
+
return undefined; // Each version will be processed separately in child component
|
|
285
|
+
}
|
|
286
|
+
const initVersion = this.versionInput();
|
|
287
|
+
if (typeof initVersion === 'string') {
|
|
288
|
+
return initVersion;
|
|
289
|
+
}
|
|
290
|
+
else if (typeof initVersion !== 'undefined' && !Array.isArray(initVersion)) {
|
|
291
|
+
const source = initVersion.source;
|
|
292
|
+
switch (source) {
|
|
293
|
+
case 'config':
|
|
294
|
+
return this.configService.getConfigValue(initVersion.configKey);
|
|
295
|
+
case 'httpResource':
|
|
282
296
|
return this.loadedVersion();
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
return
|
|
287
|
-
}
|
|
288
|
-
}
|
|
289
|
-
else {
|
|
290
|
-
const info = this.initVersion();
|
|
291
|
-
return this.jsonPathPipe.transform(info, '$.raw');
|
|
297
|
+
case 'info':
|
|
298
|
+
return initVersion.info;
|
|
299
|
+
default:
|
|
300
|
+
return initVersion;
|
|
292
301
|
}
|
|
293
302
|
}
|
|
294
|
-
return;
|
|
303
|
+
return undefined;
|
|
295
304
|
});
|
|
296
|
-
this.
|
|
297
|
-
|
|
298
|
-
|
|
305
|
+
this.versionAsString = computed(() => {
|
|
306
|
+
const versionInfo = this.versionInfo();
|
|
307
|
+
if (versionInfo == null) {
|
|
308
|
+
return undefined;
|
|
299
309
|
}
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
const config = this.initVersion();
|
|
306
|
-
return config.displayName;
|
|
307
|
-
}
|
|
310
|
+
else if (typeof versionInfo === 'string') {
|
|
311
|
+
return versionInfo;
|
|
312
|
+
}
|
|
313
|
+
else {
|
|
314
|
+
return versionInfo.raw;
|
|
308
315
|
}
|
|
309
|
-
return;
|
|
310
316
|
});
|
|
311
|
-
|
|
317
|
+
this.displayName = computed(() => this.versionInput()?.displayName);
|
|
318
|
+
this.displayText = computed(() => `${this.displayName() ?? ''}${this.displayName() && this.versionAsString() ? ': ' : ''}${!this.isLoading() ? (this.versionAsString() ?? '') : ''}`);
|
|
319
|
+
toObservable(this.versionInput)
|
|
312
320
|
.pipe(catchError(() => of(undefined)), switchMap(version => {
|
|
313
|
-
if (typeof version !== 'undefined' && (version
|
|
321
|
+
if (typeof version !== 'undefined' && !Array.isArray(version)) {
|
|
314
322
|
const config = version;
|
|
315
|
-
if (config.
|
|
323
|
+
if (config.source === 'httpResource') {
|
|
316
324
|
this.isLoading.set(true);
|
|
317
|
-
|
|
325
|
+
const infoJsonPath = config.infoJsonPath;
|
|
326
|
+
return this.versionService.loadVersion(config.urlPath, config.urlBaseConfigKey).pipe(take(1), map(res => ({ res, infoJsonPath })));
|
|
318
327
|
}
|
|
319
328
|
}
|
|
320
|
-
return of({ res: undefined,
|
|
329
|
+
return of({ res: undefined, infoJsonPath: undefined });
|
|
321
330
|
}), takeUntilDestroyed(this.destroyRef))
|
|
322
331
|
.subscribe({
|
|
323
|
-
next: ({ res,
|
|
324
|
-
if (typeof res !== 'undefined'
|
|
325
|
-
this.loadedVersion.set(this.jsonPathPipe.transform(res,
|
|
332
|
+
next: ({ res, infoJsonPath }) => {
|
|
333
|
+
if (typeof res !== 'undefined') {
|
|
334
|
+
this.loadedVersion.set(this.jsonPathPipe.transform(res, infoJsonPath ?? '$'));
|
|
326
335
|
}
|
|
327
336
|
else {
|
|
328
337
|
this.loadedVersion.set(undefined);
|
|
@@ -335,12 +344,12 @@ class VersionComponent {
|
|
|
335
344
|
}
|
|
336
345
|
});
|
|
337
346
|
}
|
|
338
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.
|
|
339
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.
|
|
347
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: VersionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
348
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.12", 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 <mng-version [version]=\"v\"></mng-version>\n @if (!last) {\n <br />\n }\n }\n} @else if (displayText()) {\n {{ displayText() }}\n}\n", dependencies: [{ kind: "component", type: VersionComponent, selector: "mng-version", inputs: ["version"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
340
349
|
}
|
|
341
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.
|
|
350
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: VersionComponent, decorators: [{
|
|
342
351
|
type: Component,
|
|
343
|
-
args: [{ standalone: true, selector: 'mng-version', imports: [AsyncPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (
|
|
352
|
+
args: [{ standalone: true, selector: 'mng-version', imports: [AsyncPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (versionAsArray()) {\n @for (v of versionAsArray(); track v; let last = $last) {\n <mng-version [version]=\"v\"></mng-version>\n @if (!last) {\n <br />\n }\n }\n} @else if (displayText()) {\n {{ displayText() }}\n}\n" }]
|
|
344
353
|
}], ctorParameters: () => [] });
|
|
345
354
|
|
|
346
355
|
class FooterComponent {
|
|
@@ -349,12 +358,12 @@ class FooterComponent {
|
|
|
349
358
|
this.layout = inject(LayoutService);
|
|
350
359
|
this.commons = inject(CommonsService);
|
|
351
360
|
this.currentYear = signal(new Date().getFullYear());
|
|
352
|
-
this.versionComponent = signal(this.config?.components?.version === false ? undefined : this.config?.components?.version ?? VersionComponent);
|
|
361
|
+
this.versionComponent = signal(this.config?.components?.version === false ? undefined : (this.config?.components?.version ?? VersionComponent));
|
|
353
362
|
}
|
|
354
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.
|
|
355
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.
|
|
363
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: FooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
364
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.12", type: FooterComponent, isStandalone: true, selector: "mng-footer", ngImport: i0, template: "<div class=\"layout-footer\">\n <div class=\"footer-logo-container\">\n <img id=\"footer-logo\" [src]=\"layout.appLogo()\" alt=\"atlantis-layout\" />\n <span class=\"app-name\">{{ commons.appName() | translate }}</span>\n </div>\n <div class=\"flex flex-column\">\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: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "directive", type: ComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent", "injectionToken", "inputs", "attachToHost", "parentInjector"], outputs: ["instanceCreated"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
356
365
|
}
|
|
357
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.
|
|
366
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: FooterComponent, decorators: [{
|
|
358
367
|
type: Component,
|
|
359
368
|
args: [{ standalone: true, selector: 'mng-footer', imports: [TranslateModule, NgOptimizedImage, VersionComponent, ComponentDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"layout-footer\">\n <div class=\"footer-logo-container\">\n <img id=\"footer-logo\" [src]=\"layout.appLogo()\" alt=\"atlantis-layout\" />\n <span class=\"app-name\">{{ commons.appName() | translate }}</span>\n </div>\n <div class=\"flex flex-column\">\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" }]
|
|
360
369
|
}] });
|
|
@@ -375,10 +384,10 @@ class BreadcrumbComponent {
|
|
|
375
384
|
styleClass: item.className
|
|
376
385
|
};
|
|
377
386
|
}
|
|
378
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.
|
|
379
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.
|
|
387
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: BreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
388
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.12", type: BreadcrumbComponent, isStandalone: true, selector: "mng-breadcrumb", ngImport: i0, template: "<div class=\"layout-breadcrumb flex align-items-center relative h-3rem\">\n <nav>\n <ol class=\"relative z-2\">\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</div>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
380
389
|
}
|
|
381
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.
|
|
390
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: BreadcrumbComponent, decorators: [{
|
|
382
391
|
type: Component,
|
|
383
392
|
args: [{ standalone: true, selector: 'mng-breadcrumb', imports: [TranslateModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"layout-breadcrumb flex align-items-center relative h-3rem\">\n <nav>\n <ol class=\"relative z-2\">\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</div>\n" }]
|
|
384
393
|
}] });
|
|
@@ -425,12 +434,9 @@ class MenuService {
|
|
|
425
434
|
this.routeLoadedChildrenSubscriptions = [];
|
|
426
435
|
this._menuItems.set(prepareMenuItemsToInternal(menuItems));
|
|
427
436
|
this.appendListenersToLazyChildren(this._menuItems());
|
|
428
|
-
this.router.events;
|
|
429
437
|
this.router.events
|
|
430
438
|
.pipe(startWith(new NavigationEnd(0, this.router.url, this.router.url)), filter(event => event instanceof NavigationEnd), map(e => e), takeUntilDestroyed(this.destroyRef))
|
|
431
|
-
.subscribe(e =>
|
|
432
|
-
this.findAndSetActiveMenuItem(e.urlAfterRedirects);
|
|
433
|
-
});
|
|
439
|
+
.subscribe(e => this.findAndSetActiveMenuItem(e.urlAfterRedirects));
|
|
434
440
|
}
|
|
435
441
|
appendListenersToLazyChildren(menuItems) {
|
|
436
442
|
menuItems.forEach(item => {
|
|
@@ -485,12 +491,12 @@ class MenuService {
|
|
|
485
491
|
findActiveRouteMatches(menuItems, url) {
|
|
486
492
|
const matches = [];
|
|
487
493
|
for (const menuItem of menuItems) {
|
|
488
|
-
const
|
|
494
|
+
const children = menuItem.items();
|
|
489
495
|
if (menuItem.routerLink) {
|
|
490
496
|
const isActive = doesUrlMatchRouterLink(menuItem.routerLink, url);
|
|
491
497
|
if (isActive) {
|
|
492
|
-
if (Array.isArray(
|
|
493
|
-
const itemsMatches = this.findActiveRouteMatches(
|
|
498
|
+
if (Array.isArray(children)) {
|
|
499
|
+
const itemsMatches = this.findActiveRouteMatches(children, url);
|
|
494
500
|
if (itemsMatches.length > 0) {
|
|
495
501
|
matches.push(...itemsMatches.map(c => [menuItem, ...c]));
|
|
496
502
|
}
|
|
@@ -503,8 +509,8 @@ class MenuService {
|
|
|
503
509
|
}
|
|
504
510
|
}
|
|
505
511
|
}
|
|
506
|
-
else if (Array.isArray(
|
|
507
|
-
const itemsMatches = this.findActiveRouteMatches(
|
|
512
|
+
else if (Array.isArray(children)) {
|
|
513
|
+
const itemsMatches = this.findActiveRouteMatches(children, url);
|
|
508
514
|
if (itemsMatches.length > 0) {
|
|
509
515
|
matches.push(...itemsMatches.map(c => [menuItem, ...c]));
|
|
510
516
|
}
|
|
@@ -517,10 +523,10 @@ class MenuService {
|
|
|
517
523
|
eventType: 'reset'
|
|
518
524
|
});
|
|
519
525
|
}
|
|
520
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.
|
|
521
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.
|
|
526
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: MenuService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
527
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: MenuService }); }
|
|
522
528
|
}
|
|
523
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.
|
|
529
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: MenuService, decorators: [{
|
|
524
530
|
type: Injectable
|
|
525
531
|
}] });
|
|
526
532
|
|
|
@@ -635,8 +641,8 @@ class MenuItemComponent {
|
|
|
635
641
|
}
|
|
636
642
|
}
|
|
637
643
|
}
|
|
638
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.
|
|
639
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.
|
|
644
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: MenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
645
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.12", 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() && active()", "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 <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 [routerLink]=\"item().routerLink\"\n [attr.target]=\"item().target\"\n [attr.tabindex]=\"0\"\n [ngClass]=\"item().className ?? '' + (this.active() ? ' active-route' : '')\"\n [preserveFragment]=\"item().preserveFragment\"\n [skipLocationChange]=\"item().skipLocationChange\"\n [replaceUrl]=\"item().replaceUrl\"\n [queryParams]=\"item().queryParams\"\n pRipple>\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 ?? ''\" pRipple>\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 }\n @if (item().hasItems()) {\n <ul #submenu [@children]=\"submenuAnimation()\" (@children.done)=\"onSubmenuAnimated($event)\">\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", 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: RippleModule }, { kind: "directive", type: i1$3.Ripple, selector: "[pRipple]" }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], animations: [
|
|
640
646
|
trigger('children', [
|
|
641
647
|
state('collapsed', style({
|
|
642
648
|
height: '0'
|
|
@@ -654,7 +660,7 @@ class MenuItemComponent {
|
|
|
654
660
|
])
|
|
655
661
|
], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
656
662
|
}
|
|
657
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.
|
|
663
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: MenuItemComponent, decorators: [{
|
|
658
664
|
type: Component,
|
|
659
665
|
args: [{ standalone: true, selector: '[mng-menuitem]', imports: [NgClass, RippleModule, TooltipModule, RouterModule, TranslateModule, AsyncPipe], changeDetection: ChangeDetectionStrategy.OnPush, animations: [
|
|
660
666
|
trigger('children', [
|
|
@@ -675,7 +681,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
|
|
|
675
681
|
], host: {
|
|
676
682
|
'[class.active-menuitem]': '!root() && active()',
|
|
677
683
|
'[class.layout-root-menuitem]': 'root()'
|
|
678
|
-
}, 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 ?? ''\"\n pRipple>\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 [routerLink]=\"item().routerLink\"\n [attr.target]=\"item().target\"\n [attr.tabindex]=\"0\"\n [ngClass]=\"item().className ?? '' + (this.active() ? ' active-route' : '')\"\n [preserveFragment]=\"item().preserveFragment\"\n [skipLocationChange]=\"item().skipLocationChange\"\n [replaceUrl]=\"item().replaceUrl\"\n [queryParams]=\"item().queryParams\"\n pRipple>\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 ?? ''\" pRipple>\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 }\n @if (item().hasItems()) {\n <ul #submenu [@children]=\"submenuAnimation()\" (@children.done)=\"onSubmenuAnimated($event)\">\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" }]
|
|
684
|
+
}, 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 <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 [routerLink]=\"item().routerLink\"\n [attr.target]=\"item().target\"\n [attr.tabindex]=\"0\"\n [ngClass]=\"item().className ?? '' + (this.active() ? ' active-route' : '')\"\n [preserveFragment]=\"item().preserveFragment\"\n [skipLocationChange]=\"item().skipLocationChange\"\n [replaceUrl]=\"item().replaceUrl\"\n [queryParams]=\"item().queryParams\"\n pRipple>\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 ?? ''\" pRipple>\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 }\n @if (item().hasItems()) {\n <ul #submenu [@children]=\"submenuAnimation()\" (@children.done)=\"onSubmenuAnimated($event)\">\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" }]
|
|
679
685
|
}], ctorParameters: () => [] });
|
|
680
686
|
|
|
681
687
|
class MenuComponent {
|
|
@@ -700,10 +706,10 @@ class MenuComponent {
|
|
|
700
706
|
untracked(() => this.menuService.setItems(items));
|
|
701
707
|
});
|
|
702
708
|
}
|
|
703
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.
|
|
704
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.
|
|
709
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: MenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
710
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.12", 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
705
711
|
}
|
|
706
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.
|
|
712
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: MenuComponent, decorators: [{
|
|
707
713
|
type: Component,
|
|
708
714
|
args: [{ standalone: true, selector: 'mng-menu', imports: [MenuItemComponent], changeDetection: ChangeDetectionStrategy.OnPush, 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" }]
|
|
709
715
|
}], ctorParameters: () => [] });
|
|
@@ -713,7 +719,7 @@ class SidebarComponent {
|
|
|
713
719
|
this.config = inject(COMMONS_LAYOUT_FEATURE_CONFIG_IT, { optional: true });
|
|
714
720
|
this.layout = inject(LayoutService);
|
|
715
721
|
this.el = inject(ElementRef);
|
|
716
|
-
this.menuComponent = signal(this.config?.components?.menu === false ? undefined : this.config?.components?.menu ?? MenuComponent);
|
|
722
|
+
this.menuComponent = signal(this.config?.components?.menu === false ? undefined : (this.config?.components?.menu ?? MenuComponent));
|
|
717
723
|
this.timeout = null;
|
|
718
724
|
}
|
|
719
725
|
onMouseEnter() {
|
|
@@ -744,10 +750,10 @@ class SidebarComponent {
|
|
|
744
750
|
anchored: !state.anchored
|
|
745
751
|
}));
|
|
746
752
|
}
|
|
747
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.
|
|
748
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.
|
|
753
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
754
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.12", type: SidebarComponent, isStandalone: true, selector: "mng-sidebar", ngImport: i0, template: "<div class=\"layout-sidebar\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\n <div class=\"sidebar-header\">\n <a [routerLink]=\"['/']\" class=\"app-logo\">\n <div class=\"app-logo-small h-2rem\">\n <img [src]=\"layout.appLogo()\" [alt]=\"'App logo'\" />\n </div>\n <div class=\"app-logo-normal\">\n <img class=\"h-2rem\" [src]=\"layout.appLogo()\" [alt]=\"'App logo'\" />\n <img class=\"h-2rem ml-3\" [src]=\"layout.appLogoName()\" [alt]=\"'App name'\" />\n </div>\n </a>\n <button class=\"layout-sidebar-anchor p-link z-2\" type=\"button\" (click)=\"anchor()\"></button>\n </div>\n\n @if (menuComponent()) {\n <div #menuContainer class=\"layout-menu-container\">\n <div [mngComponent]=\"menuComponent()\" [attachToHost]=\"true\"></div>\n </div>\n }\n</div>\n", dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: ComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent", "injectionToken", "inputs", "attachToHost", "parentInjector"], outputs: ["instanceCreated"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
749
755
|
}
|
|
750
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.
|
|
756
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: SidebarComponent, decorators: [{
|
|
751
757
|
type: Component,
|
|
752
758
|
args: [{ standalone: true, selector: 'mng-sidebar', imports: [RouterModule, MenuComponent, ComponentDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"layout-sidebar\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\n <div class=\"sidebar-header\">\n <a [routerLink]=\"['/']\" class=\"app-logo\">\n <div class=\"app-logo-small h-2rem\">\n <img [src]=\"layout.appLogo()\" [alt]=\"'App logo'\" />\n </div>\n <div class=\"app-logo-normal\">\n <img class=\"h-2rem\" [src]=\"layout.appLogo()\" [alt]=\"'App logo'\" />\n <img class=\"h-2rem ml-3\" [src]=\"layout.appLogoName()\" [alt]=\"'App name'\" />\n </div>\n </a>\n <button class=\"layout-sidebar-anchor p-link z-2\" type=\"button\" (click)=\"anchor()\"></button>\n </div>\n\n @if (menuComponent()) {\n <div #menuContainer class=\"layout-menu-container\">\n <div [mngComponent]=\"menuComponent()\" [attachToHost]=\"true\"></div>\n </div>\n }\n</div>\n" }]
|
|
753
759
|
}] });
|
|
@@ -813,10 +819,10 @@ class SettingsComponent {
|
|
|
813
819
|
closeDialog() {
|
|
814
820
|
this.dynamicDialogRef.close();
|
|
815
821
|
}
|
|
816
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.
|
|
817
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.
|
|
822
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: SettingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
823
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.12", type: SettingsComponent, isStandalone: true, selector: "mng-settings", ngImport: i0, template: "<div class=\"h-full flex flex-column\">\n <div class=\"flex-grow-1 mng-action-editor-form-container\">\n @if (commons.appLocales().length > 1 || commons.appDataLocales().length > 1) {\n <h5>{{ 'mngSettings.locales' | translate }}</h5>\n <div class=\"formgrid grid\">\n @if (commons.appLocales().length > 1) {\n <div class=\"field pr-4\">\n <i class=\"pi pi-fw pi-globe\"></i>\n <p-dropdown [ngModel]=\"commons.appLocale()\" [options]=\"commons.appLocales()\" (onChange)=\"switchLocale($event.value)\"></p-dropdown>\n </div>\n }\n @if (commons.appDataLocales().length > 1) {\n <div class=\"field pr-4\">\n <i class=\"pi pi-fw pi-database\"></i>\n <p-dropdown [ngModel]=\"commons.appDataLocale()\" [options]=\"commons.appDataLocales()\" (onChange)=\"switchDataLocale($event.value)\"></p-dropdown>\n </div>\n }\n </div>\n }\n\n <h5>{{ 'mngSettings.colorScheme.title' | translate }}</h5>\n <div class=\"formgrid grid\">\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>{{ 'mngSettings.menuMode.title' | translate }}</h5>\n <div class=\"formgrid grid\">\n @for (mode of menuModes; track mode) {\n <div class=\"field-radiobutton col-6 md:col-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-content-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: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: RadioButtonModule }, { kind: "component", type: i2$1.RadioButton, selector: "p-radioButton", inputs: ["value", "formControlName", "name", "disabled", "label", "variant", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "style", "styleClass", "labelStyleClass", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i4.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "autoShowPanelOnPrintableCharacterKeyDown", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: InputSwitchModule }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "component", type: i5.SelectButton, selector: "p-selectButton", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "style", "styleClass", "ariaLabelledBy", "disabled", "dataKey", "autofocus"], outputs: ["onOptionClick", "onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
818
824
|
}
|
|
819
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.
|
|
825
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: SettingsComponent, decorators: [{
|
|
820
826
|
type: Component,
|
|
821
827
|
args: [{ standalone: true, selector: 'mng-settings', imports: [TranslateModule, RadioButtonModule, FormsModule, Button, DropdownModule, InputSwitchModule, SelectButtonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"h-full flex flex-column\">\n <div class=\"flex-grow-1 mng-action-editor-form-container\">\n @if (commons.appLocales().length > 1 || commons.appDataLocales().length > 1) {\n <h5>{{ 'mngSettings.locales' | translate }}</h5>\n <div class=\"formgrid grid\">\n @if (commons.appLocales().length > 1) {\n <div class=\"field pr-4\">\n <i class=\"pi pi-fw pi-globe\"></i>\n <p-dropdown [ngModel]=\"commons.appLocale()\" [options]=\"commons.appLocales()\" (onChange)=\"switchLocale($event.value)\"></p-dropdown>\n </div>\n }\n @if (commons.appDataLocales().length > 1) {\n <div class=\"field pr-4\">\n <i class=\"pi pi-fw pi-database\"></i>\n <p-dropdown [ngModel]=\"commons.appDataLocale()\" [options]=\"commons.appDataLocales()\" (onChange)=\"switchDataLocale($event.value)\"></p-dropdown>\n </div>\n }\n </div>\n }\n\n <h5>{{ 'mngSettings.colorScheme.title' | translate }}</h5>\n <div class=\"formgrid grid\">\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>{{ 'mngSettings.menuMode.title' | translate }}</h5>\n <div class=\"formgrid grid\">\n @for (mode of menuModes; track mode) {\n <div class=\"field-radiobutton col-6 md:col-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-content-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" }]
|
|
822
828
|
}], ctorParameters: () => [] });
|
|
@@ -851,10 +857,10 @@ class TopbarUserComponent {
|
|
|
851
857
|
}
|
|
852
858
|
});
|
|
853
859
|
}
|
|
854
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.
|
|
855
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.
|
|
860
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: TopbarUserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
861
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.12", type: TopbarUserComponent, isStandalone: true, selector: "mng-topbar-user-component", ngImport: i0, template: "<a\n class=\"cursor-pointer lg:pr-4\"\n pStyleClass=\"@next\"\n enterFromClass=\"ng-hidden\"\n enterActiveClass=\"px-scalein\"\n leaveToClass=\"ng-hidden\"\n leaveActiveClass=\"px-fadeout\"\n [hideOnOutsideClick]=\"true\"\n pRipple>\n <i class=\"pi pi-fw pi-user text-2xl\"></i>\n <span class=\"hidden sm:inline-block\"> {{ user()?.displayName ?? user()?.username }}</span>\n</a>\n<ul class=\"topbar-menu active-topbar-menu w-15rem z-5 ng-hidden border-round\">\n <li role=\"menuitem\">\n <a\n class=\"flex align-items-center transition-duration-200\"\n pStyleClass=\"@grandparent\"\n enterFromClass=\"ng-hidden\"\n enterActiveClass=\"px-scalein\"\n leaveToClass=\"ng-hidden\"\n leaveActiveClass=\"px-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\">\n <a\n [href]=\"hrefJsVoid\"\n (click)=\"openSettings()\"\n class=\"flex align-items-center transition-duration-200\"\n pStyleClass=\"@grandparent\"\n enterFromClass=\"ng-hidden\"\n enterActiveClass=\"px-scalein\"\n leaveToClass=\"ng-hidden\"\n leaveActiveClass=\"px-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\">\n <a\n [href]=\"user()?.logoutUrl ?? hrefJsVoid\"\n (click)=\"logout(user(), $event)\"\n class=\"flex align-items-center hover:text-primary-500 transition-duration-200\"\n pStyleClass=\"@grandparent\"\n enterFromClass=\"ng-hidden\"\n enterActiveClass=\"px-scalein\"\n leaveToClass=\"ng-hidden\"\n leaveActiveClass=\"px-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: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i1$3.Ripple, selector: "[pRipple]" }, { kind: "ngmodule", type: StyleClassModule }, { kind: "directive", type: i3$1.StyleClass, selector: "[pStyleClass]", inputs: ["pStyleClass", "enterClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass", "hideOnEscape"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
856
862
|
}
|
|
857
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.
|
|
863
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: TopbarUserComponent, decorators: [{
|
|
858
864
|
type: Component,
|
|
859
865
|
args: [{ standalone: true, selector: 'mng-topbar-user-component', imports: [AsyncPipe, EnumerateAsyncPipe, TranslateModule, RippleModule, StyleClassModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<a\n class=\"cursor-pointer lg:pr-4\"\n pStyleClass=\"@next\"\n enterFromClass=\"ng-hidden\"\n enterActiveClass=\"px-scalein\"\n leaveToClass=\"ng-hidden\"\n leaveActiveClass=\"px-fadeout\"\n [hideOnOutsideClick]=\"true\"\n pRipple>\n <i class=\"pi pi-fw pi-user text-2xl\"></i>\n <span class=\"hidden sm:inline-block\"> {{ user()?.displayName ?? user()?.username }}</span>\n</a>\n<ul class=\"topbar-menu active-topbar-menu w-15rem z-5 ng-hidden border-round\">\n <li role=\"menuitem\">\n <a\n class=\"flex align-items-center transition-duration-200\"\n pStyleClass=\"@grandparent\"\n enterFromClass=\"ng-hidden\"\n enterActiveClass=\"px-scalein\"\n leaveToClass=\"ng-hidden\"\n leaveActiveClass=\"px-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\">\n <a\n [href]=\"hrefJsVoid\"\n (click)=\"openSettings()\"\n class=\"flex align-items-center transition-duration-200\"\n pStyleClass=\"@grandparent\"\n enterFromClass=\"ng-hidden\"\n enterActiveClass=\"px-scalein\"\n leaveToClass=\"ng-hidden\"\n leaveActiveClass=\"px-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\">\n <a\n [href]=\"user()?.logoutUrl ?? hrefJsVoid\"\n (click)=\"logout(user(), $event)\"\n class=\"flex align-items-center hover:text-primary-500 transition-duration-200\"\n pStyleClass=\"@grandparent\"\n enterFromClass=\"ng-hidden\"\n enterActiveClass=\"px-scalein\"\n leaveToClass=\"ng-hidden\"\n leaveActiveClass=\"px-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" }]
|
|
860
866
|
}] });
|
|
@@ -865,8 +871,8 @@ class TopbarComponent {
|
|
|
865
871
|
this.commons = inject(CommonsService);
|
|
866
872
|
this.layout = inject(LayoutService);
|
|
867
873
|
this.config = inject(COMMONS_LAYOUT_FEATURE_CONFIG_IT, { optional: true });
|
|
868
|
-
this.topbarUserComponent = signal(this.config?.components?.topbarUser === false ? undefined : this.config?.components?.topbarUser ?? TopbarUserComponent);
|
|
869
|
-
this.breadcrumbComponent = signal(this.config?.components?.breadcrumb === false ? undefined : this.config?.components?.breadcrumb ?? BreadcrumbComponent);
|
|
874
|
+
this.topbarUserComponent = signal(this.config?.components?.topbarUser === false ? undefined : (this.config?.components?.topbarUser ?? TopbarUserComponent));
|
|
875
|
+
this.breadcrumbComponent = signal(this.config?.components?.breadcrumb === false ? undefined : (this.config?.components?.breadcrumb ?? BreadcrumbComponent));
|
|
870
876
|
}
|
|
871
877
|
onMenuButtonClick() {
|
|
872
878
|
this.layout.onMenuToggle();
|
|
@@ -874,10 +880,10 @@ class TopbarComponent {
|
|
|
874
880
|
switchLocale(language) {
|
|
875
881
|
this.commons.setAppLocale(language);
|
|
876
882
|
}
|
|
877
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.
|
|
878
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.
|
|
883
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: TopbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
884
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.12", type: TopbarComponent, isStandalone: true, selector: "mng-topbar", ngImport: i0, template: "<div class=\"layout-topbar\">\n <div class=\"topbar-start\">\n <button #menubutton type=\"button\" class=\"topbar-menubutton p-link 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=\"profile-item\">\n <i class=\"pi pi-fw pi-globe\"></i>\n <p-dropdown [ngModel]=\"commons.appLocale()\" [options]=\"commons.appLocales()\" (onChange)=\"switchLocale($event.value)\"></p-dropdown>\n </li>\n }\n @if (topbarUserComponent()) {\n <li #userMenuItem class=\"profile-item topbar-item mr-3\" [mngComponent]=\"topbarUserComponent()\" [attachToHost]=\"true\"></li>\n }\n </ul>\n </div>\n</div>\n", dependencies: [{ kind: "component", type: SidebarComponent, selector: "mng-sidebar" }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: StyleClassModule }, { kind: "ngmodule", type: RippleModule }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i4.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "autoShowPanelOnPrintableCharacterKeyDown", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "directive", type: ComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent", "injectionToken", "inputs", "attachToHost", "parentInjector"], outputs: ["instanceCreated"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
879
885
|
}
|
|
880
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.
|
|
886
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: TopbarComponent, decorators: [{
|
|
881
887
|
type: Component,
|
|
882
888
|
args: [{ standalone: true, selector: 'mng-topbar', imports: [SidebarComponent, NgClass, ButtonModule, StyleClassModule, RippleModule, BreadcrumbComponent, AsyncPipe, DropdownModule, ComponentDirective, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"layout-topbar\">\n <div class=\"topbar-start\">\n <button #menubutton type=\"button\" class=\"topbar-menubutton p-link 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=\"profile-item\">\n <i class=\"pi pi-fw pi-globe\"></i>\n <p-dropdown [ngModel]=\"commons.appLocale()\" [options]=\"commons.appLocales()\" (onChange)=\"switchLocale($event.value)\"></p-dropdown>\n </li>\n }\n @if (topbarUserComponent()) {\n <li #userMenuItem class=\"profile-item topbar-item mr-3\" [mngComponent]=\"topbarUserComponent()\" [attachToHost]=\"true\"></li>\n }\n </ul>\n </div>\n</div>\n" }]
|
|
883
889
|
}] });
|
|
@@ -891,9 +897,9 @@ class MainLayoutComponent {
|
|
|
891
897
|
this.renderer = inject(Renderer2);
|
|
892
898
|
this.appTopbar = viewChild('topbarCmp');
|
|
893
899
|
this.ripple = signal(this.config?.ripple ?? true);
|
|
894
|
-
this.topbarComponent = signal(this.config?.components?.topbar === false ? undefined : this.config?.components?.topbar ?? TopbarComponent);
|
|
895
|
-
this.breadcrumbsComponent = signal(this.config?.components?.breadcrumb === false ? undefined : this.config?.components?.breadcrumb ?? BreadcrumbComponent);
|
|
896
|
-
this.footerComponent = signal(this.config?.components?.footer === false ? undefined : this.config?.components?.footer ?? FooterComponent);
|
|
900
|
+
this.topbarComponent = signal(this.config?.components?.topbar === false ? undefined : (this.config?.components?.topbar ?? TopbarComponent));
|
|
901
|
+
this.breadcrumbsComponent = signal(this.config?.components?.breadcrumb === false ? undefined : (this.config?.components?.breadcrumb ?? BreadcrumbComponent));
|
|
902
|
+
this.footerComponent = signal(this.config?.components?.footer === false ? undefined : (this.config?.components?.footer ?? FooterComponent));
|
|
897
903
|
this.useNotificationWrapper = signal(!this.config?.disableNotificationWrapper);
|
|
898
904
|
this.layout.overlayOpen$.pipe(takeUntilDestroyed()).subscribe(() => {
|
|
899
905
|
if (!this.menuOutsideClickListener) {
|
|
@@ -949,10 +955,10 @@ class MainLayoutComponent {
|
|
|
949
955
|
this.menuOutsideClickListener();
|
|
950
956
|
}
|
|
951
957
|
}
|
|
952
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.
|
|
953
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.
|
|
958
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: MainLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
959
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.12", 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-container\"\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 #topbarCmp class=\"layout-topbar-wrapper\" [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$4.RouterOutlet, selector: "router-outlet", inputs: ["name"], 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
954
960
|
}
|
|
955
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.
|
|
961
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: MainLayoutComponent, decorators: [{
|
|
956
962
|
type: Component,
|
|
957
963
|
args: [{ standalone: true, selector: 'mng-main-layout', imports: [NgClass, RouterModule, TopbarComponent, BreadcrumbComponent, ComponentDirective, AsyncPipe, NotificationWrapperComponent, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, 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-container\"\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 #topbarCmp class=\"layout-topbar-wrapper\" [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" }]
|
|
958
964
|
}], ctorParameters: () => [] });
|