@mediusinc/mng-commons-layout 5.0.0-rc.2 → 5.0.0-rc.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/components/breadcrumb.component.mjs +8 -6
- package/esm2022/lib/components/footer.component.mjs +3 -3
- package/esm2022/lib/components/main-layout.component.mjs +2 -2
- package/esm2022/lib/components/sidebar.component.mjs +3 -3
- package/esm2022/lib/components/topbar-user.component.mjs +6 -11
- package/esm2022/lib/components/topbar.component.mjs +9 -9
- package/esm2022/lib/services/menu.service.mjs +7 -3
- package/fesm2022/mediusinc-mng-commons-layout.mjs +29 -27
- package/fesm2022/mediusinc-mng-commons-layout.mjs.map +1 -1
- package/lib/components/breadcrumb.component.d.ts +2 -3
- package/lib/components/topbar-user.component.d.ts +3 -6
- package/lib/components/topbar.component.d.ts +3 -3
- package/lib/services/menu.service.d.ts +1 -0
- package/package.json +2 -2
- package/version-info.json +4 -4
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { AsyncPipe, NgOptimizedImage, NgClass, NgTemplateOutlet } from '@angular/common';
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
|
-
import { InjectionToken, inject, Injectable, Component, ChangeDetectionStrategy, Input,
|
|
3
|
+
import { InjectionToken, inject, Injectable, Component, ChangeDetectionStrategy, Input, computed, signal, DestroyRef, Injector, EventEmitter, effect, runInInjectionContext, HostBinding, Output, ViewChild, ElementRef, Renderer2 } from '@angular/core';
|
|
4
4
|
import * as i1$1 from '@ngx-translate/core';
|
|
5
5
|
import { TranslateModule } from '@ngx-translate/core';
|
|
6
6
|
import * as i2 from '@mediusinc/mng-commons/core';
|
|
@@ -9,10 +9,10 @@ import { ReplaySubject, BehaviorSubject, take, Subject, Observable, from, of, co
|
|
|
9
9
|
import * as i1 from '@angular/common/http';
|
|
10
10
|
import { ButtonModule } from 'primeng/button';
|
|
11
11
|
import { InputTextModule } from 'primeng/inputtext';
|
|
12
|
-
import { map, filter, first } from 'rxjs/operators';
|
|
13
12
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
14
13
|
import * as i1$3 from '@angular/router';
|
|
15
14
|
import { Router, NavigationEnd, ActivatedRoute, GuardsCheckEnd, RouterModule } from '@angular/router';
|
|
15
|
+
import { filter, first, map } from 'rxjs/operators';
|
|
16
16
|
import * as i2$1 from '@angular/forms';
|
|
17
17
|
import { FormsModule } from '@angular/forms';
|
|
18
18
|
import * as i1$4 from 'primeng/dropdown';
|
|
@@ -133,17 +133,20 @@ class FooterComponent {
|
|
|
133
133
|
}
|
|
134
134
|
}
|
|
135
135
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: FooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
136
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", 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]=\"commons.
|
|
136
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", 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]=\"commons.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 }); }
|
|
137
137
|
}
|
|
138
138
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: FooterComponent, decorators: [{
|
|
139
139
|
type: Component,
|
|
140
|
-
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]=\"commons.
|
|
140
|
+
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]=\"commons.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" }]
|
|
141
141
|
}] });
|
|
142
142
|
|
|
143
143
|
class BreadcrumbComponent {
|
|
144
144
|
constructor() {
|
|
145
145
|
this.commons = inject(CommonsService);
|
|
146
|
-
this.mappedBreadcrumbs
|
|
146
|
+
this.mappedBreadcrumbs = computed(() => {
|
|
147
|
+
const items = this.commons.breadcrumbs();
|
|
148
|
+
return items.map(el => this.mapMenuItem(el));
|
|
149
|
+
});
|
|
147
150
|
}
|
|
148
151
|
mapMenuItem(item) {
|
|
149
152
|
return {
|
|
@@ -154,11 +157,11 @@ class BreadcrumbComponent {
|
|
|
154
157
|
};
|
|
155
158
|
}
|
|
156
159
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: BreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
157
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", 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
|
|
160
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", 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; 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: InputTextModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
158
161
|
}
|
|
159
162
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: BreadcrumbComponent, decorators: [{
|
|
160
163
|
type: Component,
|
|
161
|
-
args: [{ standalone: true, selector: 'mng-breadcrumb', imports: [NgClass, InputTextModule, ButtonModule, AsyncPipe, 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
|
|
164
|
+
args: [{ standalone: true, selector: 'mng-breadcrumb', imports: [NgClass, InputTextModule, ButtonModule, AsyncPipe, 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; 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" }]
|
|
162
165
|
}] });
|
|
163
166
|
|
|
164
167
|
class MainLayoutComponentService {
|
|
@@ -230,6 +233,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
230
233
|
|
|
231
234
|
class MenuService {
|
|
232
235
|
constructor() {
|
|
236
|
+
this.destroyRef = inject(DestroyRef);
|
|
233
237
|
this.logger = LoggerService.create('MenuService');
|
|
234
238
|
this.router = inject(Router);
|
|
235
239
|
this.commonsRouter = inject(CommonsRouterService);
|
|
@@ -245,7 +249,9 @@ class MenuService {
|
|
|
245
249
|
this.routeLoadedChildrenSubscriptions.forEach(s => s.unsubscribe());
|
|
246
250
|
this.routeLoadedChildrenSubscriptions = [];
|
|
247
251
|
this.generateMenuItemKeys(menuItems);
|
|
248
|
-
this.router.events
|
|
252
|
+
this.router.events
|
|
253
|
+
.pipe(filter(event => event instanceof NavigationEnd), takeUntilDestroyed(this.destroyRef))
|
|
254
|
+
.subscribe(e => {
|
|
249
255
|
this.findAndSetActiveMenuItem(e.urlAfterRedirects);
|
|
250
256
|
});
|
|
251
257
|
this.findAndSetActiveMenuItem(this.router.url);
|
|
@@ -676,11 +682,11 @@ class SidebarComponent {
|
|
|
676
682
|
}));
|
|
677
683
|
}
|
|
678
684
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
679
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: SidebarComponent, isStandalone: true, selector: "mng-sidebar", viewQueries: [{ propertyName: "menuContainer", first: true, predicate: ["menuContainer"], descendants: true }], 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]=\"commons.
|
|
685
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: SidebarComponent, isStandalone: true, selector: "mng-sidebar", viewQueries: [{ propertyName: "menuContainer", first: true, predicate: ["menuContainer"], descendants: true }], 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]=\"commons.appLogo()\" [alt]=\"'App logo'\" />\n </div>\n <div class=\"app-logo-normal\">\n <img class=\"h-2rem\" [src]=\"commons.appLogo()\" [alt]=\"'App logo'\" />\n <img class=\"h-2rem ml-3\" [src]=\"commons.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$3.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 }); }
|
|
680
686
|
}
|
|
681
687
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SidebarComponent, decorators: [{
|
|
682
688
|
type: Component,
|
|
683
|
-
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]=\"commons.
|
|
689
|
+
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]=\"commons.appLogo()\" [alt]=\"'App logo'\" />\n </div>\n <div class=\"app-logo-normal\">\n <img class=\"h-2rem\" [src]=\"commons.appLogo()\" [alt]=\"'App logo'\" />\n <img class=\"h-2rem ml-3\" [src]=\"commons.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" }]
|
|
684
690
|
}], propDecorators: { menuContainer: [{
|
|
685
691
|
type: ViewChild,
|
|
686
692
|
args: ['menuContainer']
|
|
@@ -690,14 +696,10 @@ class TopbarUserComponent {
|
|
|
690
696
|
constructor() {
|
|
691
697
|
this.destroyRef = inject(DestroyRef);
|
|
692
698
|
this.commons = inject(CommonsService);
|
|
699
|
+
this.user = computed(() => this.commons.user());
|
|
700
|
+
this.userRoles = computed(() => this.commons.userRoles());
|
|
693
701
|
this.hrefJsVoid = inject(DomSanitizer).bypassSecurityTrustUrl('javascript:void(0)');
|
|
694
702
|
}
|
|
695
|
-
ngOnInit() {
|
|
696
|
-
this.commons.user$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(u => {
|
|
697
|
-
this.user = u;
|
|
698
|
-
});
|
|
699
|
-
this.userRoles$ = this.commons.userRoles$;
|
|
700
|
-
}
|
|
701
703
|
logout(user, event) {
|
|
702
704
|
if (typeof user?.logout === 'function') {
|
|
703
705
|
event.preventDefault();
|
|
@@ -706,11 +708,11 @@ class TopbarUserComponent {
|
|
|
706
708
|
}
|
|
707
709
|
}
|
|
708
710
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TopbarUserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
709
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", 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 ((
|
|
711
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", 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 (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$2.Ripple, selector: "[pRipple]" }, { kind: "ngmodule", type: StyleClassModule }, { kind: "directive", type: i3.StyleClass, selector: "[pStyleClass]", inputs: ["pStyleClass", "enterClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass", "hideOnEscape"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
710
712
|
}
|
|
711
713
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TopbarUserComponent, decorators: [{
|
|
712
714
|
type: Component,
|
|
713
|
-
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 ((
|
|
715
|
+
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 (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" }]
|
|
714
716
|
}] });
|
|
715
717
|
|
|
716
718
|
class TopbarComponent {
|
|
@@ -721,8 +723,8 @@ class TopbarComponent {
|
|
|
721
723
|
this.config = inject(COMMONS_LAYOUT_FEATURE_CONFIG_IT, { optional: true });
|
|
722
724
|
this.breadcrumbComponent = BreadcrumbComponent;
|
|
723
725
|
this.topbarUserComponent = TopbarUserComponent;
|
|
724
|
-
this.
|
|
725
|
-
this.
|
|
726
|
+
this.locales = ['en'];
|
|
727
|
+
this.selectedLocale = 'en';
|
|
726
728
|
}
|
|
727
729
|
ngOnInit() {
|
|
728
730
|
if (this.config?.components?.topbarUser !== undefined) {
|
|
@@ -731,21 +733,21 @@ class TopbarComponent {
|
|
|
731
733
|
if (this.config?.components?.breadcrumb !== undefined) {
|
|
732
734
|
this.breadcrumbComponent = this.config.components.breadcrumb;
|
|
733
735
|
}
|
|
734
|
-
this.
|
|
735
|
-
this.
|
|
736
|
+
this.locales = this.commons.appLocales();
|
|
737
|
+
this.selectedLocale = this.commons.appLocale();
|
|
736
738
|
}
|
|
737
739
|
onMenuButtonClick() {
|
|
738
740
|
this.mainLayoutService.onMenuToggle();
|
|
739
741
|
}
|
|
740
|
-
|
|
741
|
-
this.commons.
|
|
742
|
+
switchLocale(language) {
|
|
743
|
+
this.commons.setAppLocale(language);
|
|
742
744
|
}
|
|
743
745
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TopbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
744
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: TopbarComponent, isStandalone: true, selector: "mng-topbar", viewQueries: [{ propertyName: "menuButton", first: true, predicate: ["menubutton"], descendants: true }, { propertyName: "appSidebar", first: true, predicate: SidebarComponent, descendants: true }], 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 (
|
|
746
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: TopbarComponent, isStandalone: true, selector: "mng-topbar", viewQueries: [{ propertyName: "menuButton", first: true, predicate: ["menubutton"], descendants: true }, { propertyName: "appSidebar", first: true, predicate: SidebarComponent, descendants: true }], 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 (locales.length > 1) {\n <li class=\"profile-item\">\n <i class=\"pi pi-fw pi-globe\"></i>\n <p-dropdown [ngModel]=\"selectedLocale\" [options]=\"locales\" (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: i1$4.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "dropdownIcon", "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", "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: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
745
747
|
}
|
|
746
748
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TopbarComponent, decorators: [{
|
|
747
749
|
type: Component,
|
|
748
|
-
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 (
|
|
750
|
+
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 (locales.length > 1) {\n <li class=\"profile-item\">\n <i class=\"pi pi-fw pi-globe\"></i>\n <p-dropdown [ngModel]=\"selectedLocale\" [options]=\"locales\" (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" }]
|
|
749
751
|
}], propDecorators: { menuButton: [{
|
|
750
752
|
type: ViewChild,
|
|
751
753
|
args: ['menubutton']
|
|
@@ -830,7 +832,7 @@ class MainLayoutComponent {
|
|
|
830
832
|
}
|
|
831
833
|
}
|
|
832
834
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: MainLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
833
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: MainLayoutComponent, isStandalone: true, selector: "mng-main-layout", providers: [MainLayoutComponentService], viewQueries: [{ propertyName: "appTopbar", first: true, predicate: ["topbarCmp"], descendants: 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': colorScheme() === 'light',\n 'layout-dark': colorScheme() === 'dark',\n 'layout-overlay': menuMode() === 'overlay',\n 'layout-static': menuMode() === 'static',\n 'layout-reveal': menuMode() === 'reveal',\n 'layout-drawer': menuMode() === 'drawer',\n 'layout-slim': menuMode() === 'slim',\n 'layout-slim-plus': menuMode() === 'slim-plus',\n 'layout-static-inactive': layoutService.state().staticMenuDesktopInactive && menuMode() === 'static',\n 'layout-overlay-active': layoutService.state().overlayMenuActive,\n 'layout-mobile-active': layoutService.state().staticMenuMobileActive,\n 'p-ripple-disabled': !ripple(),\n 'layout-sidebar-active': layoutService.state().sidebarActive,\n 'layout-sidebar-anchored': layoutService.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$3.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: ComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent", "injectionToken", "inputs", "attachToHost", "
|
|
835
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: MainLayoutComponent, isStandalone: true, selector: "mng-main-layout", providers: [MainLayoutComponentService], viewQueries: [{ propertyName: "appTopbar", first: true, predicate: ["topbarCmp"], descendants: 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': colorScheme() === 'light',\n 'layout-dark': colorScheme() === 'dark',\n 'layout-overlay': menuMode() === 'overlay',\n 'layout-static': menuMode() === 'static',\n 'layout-reveal': menuMode() === 'reveal',\n 'layout-drawer': menuMode() === 'drawer',\n 'layout-slim': menuMode() === 'slim',\n 'layout-slim-plus': menuMode() === 'slim-plus',\n 'layout-static-inactive': layoutService.state().staticMenuDesktopInactive && menuMode() === 'static',\n 'layout-overlay-active': layoutService.state().overlayMenuActive,\n 'layout-mobile-active': layoutService.state().staticMenuMobileActive,\n 'p-ripple-disabled': !ripple(),\n 'layout-sidebar-active': layoutService.state().sidebarActive,\n 'layout-sidebar-anchored': layoutService.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$3.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 }); }
|
|
834
836
|
}
|
|
835
837
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: MainLayoutComponent, decorators: [{
|
|
836
838
|
type: Component,
|