mesauth-angular 1.10.0 → 1.12.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { signal, Injectable, InjectionToken, makeEnvironmentProviders, provideAppInitializer, inject, NgModule, input, computed, HostBinding, Component, output, effect, HostListener, ViewChild, DestroyRef, Directive } from '@angular/core';
|
|
2
|
+
import { signal, Injectable, InjectionToken, makeEnvironmentProviders, provideAppInitializer, inject, NgModule, input, booleanAttribute, computed, HostBinding, Component, output, effect, HostListener, ViewChild, DestroyRef, Directive } from '@angular/core';
|
|
3
3
|
import { toObservable, toSignal, takeUntilDestroyed, rxResource } from '@angular/core/rxjs-interop';
|
|
4
4
|
import { catchError, of, Subject, EMPTY, timer, throwError, firstValueFrom, forkJoin } from 'rxjs';
|
|
5
5
|
import { HttpClient } from '@angular/common/http';
|
|
@@ -10,7 +10,7 @@ import { DomSanitizer } from '@angular/platform-browser';
|
|
|
10
10
|
import { DatePipe } from '@angular/common';
|
|
11
11
|
|
|
12
12
|
/** Current installed package version — keep in sync with package.json. */
|
|
13
|
-
const PACKAGE_VERSION = '1.
|
|
13
|
+
const PACKAGE_VERSION = '1.12.0';
|
|
14
14
|
/**
|
|
15
15
|
* Provides server-driven UI configuration loaded from the hosted manifest.
|
|
16
16
|
* Components read `labels()` and `features()` signals instead of hardcoded strings.
|
|
@@ -491,6 +491,8 @@ class MaAvatarComponent {
|
|
|
491
491
|
frame = input(null, ...(ngDevMode ? [{ debugName: "frame" }] : /* istanbul ignore next */ []));
|
|
492
492
|
ratio = input(null, ...(ngDevMode ? [{ debugName: "ratio" }] : /* istanbul ignore next */ []));
|
|
493
493
|
scale = input(1, ...(ngDevMode ? [{ debugName: "scale" }] : /* istanbul ignore next */ []));
|
|
494
|
+
ring = input(false, { ...(ngDevMode ? { debugName: "ring" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
495
|
+
ringActive = input(false, { ...(ngDevMode ? { debugName: "ringActive" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
494
496
|
themeService = inject(ThemeService);
|
|
495
497
|
get themeClass() { return `theme-${this.themeService.currentTheme()}`; }
|
|
496
498
|
wrapperClass = computed(() => {
|
|
@@ -501,7 +503,9 @@ class MaAvatarComponent {
|
|
|
501
503
|
`ma-avatar--${this.shape()}`,
|
|
502
504
|
`ma-avatar--${this.size()}`,
|
|
503
505
|
f,
|
|
504
|
-
r
|
|
506
|
+
r,
|
|
507
|
+
this.ring() ? 'ma-avatar--ring' : '',
|
|
508
|
+
this.ringActive() ? 'ma-avatar--ring-active' : '',
|
|
505
509
|
].filter(Boolean).join(' ');
|
|
506
510
|
}, ...(ngDevMode ? [{ debugName: "wrapperClass" }] : /* istanbul ignore next */ []));
|
|
507
511
|
wrapperStyle = computed(() => ({
|
|
@@ -509,17 +513,20 @@ class MaAvatarComponent {
|
|
|
509
513
|
}), ...(ngDevMode ? [{ debugName: "wrapperStyle" }] : /* istanbul ignore next */ []));
|
|
510
514
|
showImage = computed(() => !!this.src(), ...(ngDevMode ? [{ debugName: "showImage" }] : /* istanbul ignore next */ []));
|
|
511
515
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MaAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
512
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: MaAvatarComponent, isStandalone: true, selector: "ma-avatar", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, initials: { classPropertyName: "initials", publicName: "initials", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, frame: { classPropertyName: "frame", publicName: "frame", isSignal: true, isRequired: false, transformFunction: null }, ratio: { classPropertyName: "ratio", publicName: "ratio", isSignal: true, isRequired: false, transformFunction: null }, scale: { classPropertyName: "scale", publicName: "scale", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.themeClass" } }, ngImport: i0, template: "<div [class]=\"wrapperClass()\" [style]=\"wrapperStyle()\">\n @if (showImage()) {\n <img [src]=\"src()\" [alt]=\"alt()\" class=\"ma-avatar__img\" />\n } @else {\n <span class=\"ma-avatar__initial\">{{ initials() }}</span>\n }\n</div>\n", styles: [".ma-avatar{position:relative;flex-shrink:0;overflow:visible}.ma-avatar--circle .ma-avatar__img,.ma-avatar--circle .ma-avatar__initial{border-radius:50%}.ma-avatar--rounded .ma-avatar__img,.ma-avatar--rounded .ma-avatar__initial{border-radius:20%}.ma-avatar--rectangle .ma-avatar__img,.ma-avatar--rectangle .ma-avatar__initial{border-radius:0}.ma-avatar--portrait .ma-avatar__img,.ma-avatar--portrait .ma-avatar__initial{border-radius:4px}.ma-avatar__img,.ma-avatar__initial{width:100%;height:100%;object-fit:cover;display:block;position:relative;z-index:0}.ma-avatar__initial{background:linear-gradient(135deg,var(--primary-color, #1976d2),var(--primary-glow, rgba(79,70,229,.4)));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700}.ma-avatar--sm .ma-avatar__initial{font-size:14px}.ma-avatar--md .ma-avatar__initial{font-size:17px}.ma-avatar--lg .ma-avatar__initial{font-size:22px}.ma-avatar--xl .ma-avatar__initial{font-size:38px}.ma-avatar--sm{--h: calc(36px * var(--avatar-scale, 1));--h-m: 30px}.ma-avatar--md{--h: calc(44px * var(--avatar-scale, 1));--h-m: 38px}.ma-avatar--lg{--h: calc(56px * var(--avatar-scale, 1));--h-m: 48px}.ma-avatar--xl{--h: calc(96px * var(--avatar-scale, 1))}[class*=ma-avatar--ratio-]{height:var(--h);width:var(--h)}.ma-avatar--ratio-ar-43{width:calc(var(--h) * 4 / 3)}.ma-avatar--ratio-ar-169{width:calc(var(--h) * 16 / 9)}@media(max-width:768px){[class*=ma-avatar--ratio-]{height:var(--h-m);width:var(--h-m)}.ma-avatar--ratio-ar-43{width:calc(var(--h-m) * 4 / 3)}.ma-avatar--ratio-ar-169{width:calc(var(--h-m) * 16 / 9)}}\n"] });
|
|
516
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: MaAvatarComponent, isStandalone: true, selector: "ma-avatar", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, initials: { classPropertyName: "initials", publicName: "initials", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, frame: { classPropertyName: "frame", publicName: "frame", isSignal: true, isRequired: false, transformFunction: null }, ratio: { classPropertyName: "ratio", publicName: "ratio", isSignal: true, isRequired: false, transformFunction: null }, scale: { classPropertyName: "scale", publicName: "scale", isSignal: true, isRequired: false, transformFunction: null }, ring: { classPropertyName: "ring", publicName: "ring", isSignal: true, isRequired: false, transformFunction: null }, ringActive: { classPropertyName: "ringActive", publicName: "ringActive", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.themeClass" } }, ngImport: i0, template: "<div [class]=\"wrapperClass()\" [style]=\"wrapperStyle()\">\n @if (showImage()) {\n <img [src]=\"src()\" [alt]=\"alt()\" class=\"ma-avatar__img\" />\n } @else {\n <span class=\"ma-avatar__initial\">{{ initials() }}</span>\n }\n</div>\n", styles: [".ma-avatar{position:relative;flex-shrink:0;overflow:visible}.ma-avatar--circle{border-radius:50%}.ma-avatar--rounded{border-radius:20%}.ma-avatar--rectangle{border-radius:0}.ma-avatar--portrait{border-radius:4px}.ma-avatar--circle .ma-avatar__img,.ma-avatar--circle .ma-avatar__initial{border-radius:50%}.ma-avatar--rounded .ma-avatar__img,.ma-avatar--rounded .ma-avatar__initial{border-radius:20%}.ma-avatar--rectangle .ma-avatar__img,.ma-avatar--rectangle .ma-avatar__initial{border-radius:0}.ma-avatar--portrait .ma-avatar__img,.ma-avatar--portrait .ma-avatar__initial{border-radius:4px}.ma-avatar--ring{cursor:pointer;transition:box-shadow .3s ease,filter .3s ease}.ma-avatar--ring:hover{box-shadow:0 0 0 2px var(--primary-color, #1976d2),0 0 8px 2px var(--primary-glow, rgba(25, 118, 210, .4));filter:drop-shadow(0 0 6px var(--primary-glow, rgba(25, 118, 210, .45)))}.ma-avatar--ring-active{box-shadow:0 0 0 2px var(--primary-color, #1976d2),0 0 10px 4px var(--primary-glow, rgba(25, 118, 210, .5));animation:ring-breathe 2.5s ease-in-out infinite}@keyframes ring-breathe{0%,to{filter:drop-shadow(0 0 5px var(--primary-color, #1976d2)) drop-shadow(0 0 12px var(--primary-glow, rgba(25, 118, 210, .3)))}50%{filter:drop-shadow(0 0 10px var(--primary-color, #1976d2)) drop-shadow(0 0 24px var(--primary-glow, rgba(25, 118, 210, .5)))}}.ma-avatar__img,.ma-avatar__initial{width:100%;height:100%;object-fit:cover;display:block;position:relative;z-index:0}.ma-avatar__initial{background:linear-gradient(135deg,var(--primary-color, #1976d2),var(--primary-glow, rgba(79,70,229,.4)));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700}.ma-avatar--sm .ma-avatar__initial{font-size:14px}.ma-avatar--md .ma-avatar__initial{font-size:17px}.ma-avatar--lg .ma-avatar__initial{font-size:22px}.ma-avatar--xl .ma-avatar__initial{font-size:38px}.ma-avatar--sm{--h: calc(36px * var(--avatar-scale, 1));--h-m: 30px}.ma-avatar--md{--h: calc(44px * var(--avatar-scale, 1));--h-m: 38px}.ma-avatar--lg{--h: calc(56px * var(--avatar-scale, 1));--h-m: 48px}.ma-avatar--xl{--h: calc(96px * var(--avatar-scale, 1))}[class*=ma-avatar--ratio-]{height:var(--h);width:var(--h)}.ma-avatar--ratio-ar-43{width:calc(var(--h) * 4 / 3)}.ma-avatar--ratio-ar-169{width:calc(var(--h) * 16 / 9)}@media(max-width:768px){[class*=ma-avatar--ratio-]{height:var(--h-m);width:var(--h-m)}.ma-avatar--ratio-ar-43{width:calc(var(--h-m) * 4 / 3)}.ma-avatar--ratio-ar-169{width:calc(var(--h-m) * 16 / 9)}}\n"] });
|
|
513
517
|
}
|
|
514
518
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MaAvatarComponent, decorators: [{
|
|
515
519
|
type: Component,
|
|
516
|
-
args: [{ selector: 'ma-avatar', imports: [], template: "<div [class]=\"wrapperClass()\" [style]=\"wrapperStyle()\">\n @if (showImage()) {\n <img [src]=\"src()\" [alt]=\"alt()\" class=\"ma-avatar__img\" />\n } @else {\n <span class=\"ma-avatar__initial\">{{ initials() }}</span>\n }\n</div>\n", styles: [".ma-avatar{position:relative;flex-shrink:0;overflow:visible}.ma-avatar--circle .ma-avatar__img,.ma-avatar--circle .ma-avatar__initial{border-radius:50%}.ma-avatar--rounded .ma-avatar__img,.ma-avatar--rounded .ma-avatar__initial{border-radius:20%}.ma-avatar--rectangle .ma-avatar__img,.ma-avatar--rectangle .ma-avatar__initial{border-radius:0}.ma-avatar--portrait .ma-avatar__img,.ma-avatar--portrait .ma-avatar__initial{border-radius:4px}.ma-avatar__img,.ma-avatar__initial{width:100%;height:100%;object-fit:cover;display:block;position:relative;z-index:0}.ma-avatar__initial{background:linear-gradient(135deg,var(--primary-color, #1976d2),var(--primary-glow, rgba(79,70,229,.4)));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700}.ma-avatar--sm .ma-avatar__initial{font-size:14px}.ma-avatar--md .ma-avatar__initial{font-size:17px}.ma-avatar--lg .ma-avatar__initial{font-size:22px}.ma-avatar--xl .ma-avatar__initial{font-size:38px}.ma-avatar--sm{--h: calc(36px * var(--avatar-scale, 1));--h-m: 30px}.ma-avatar--md{--h: calc(44px * var(--avatar-scale, 1));--h-m: 38px}.ma-avatar--lg{--h: calc(56px * var(--avatar-scale, 1));--h-m: 48px}.ma-avatar--xl{--h: calc(96px * var(--avatar-scale, 1))}[class*=ma-avatar--ratio-]{height:var(--h);width:var(--h)}.ma-avatar--ratio-ar-43{width:calc(var(--h) * 4 / 3)}.ma-avatar--ratio-ar-169{width:calc(var(--h) * 16 / 9)}@media(max-width:768px){[class*=ma-avatar--ratio-]{height:var(--h-m);width:var(--h-m)}.ma-avatar--ratio-ar-43{width:calc(var(--h-m) * 4 / 3)}.ma-avatar--ratio-ar-169{width:calc(var(--h-m) * 16 / 9)}}\n"] }]
|
|
517
|
-
}], propDecorators: { src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], initials: [{ type: i0.Input, args: [{ isSignal: true, alias: "initials", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], frame: [{ type: i0.Input, args: [{ isSignal: true, alias: "frame", required: false }] }], ratio: [{ type: i0.Input, args: [{ isSignal: true, alias: "ratio", required: false }] }], scale: [{ type: i0.Input, args: [{ isSignal: true, alias: "scale", required: false }] }], themeClass: [{
|
|
520
|
+
args: [{ selector: 'ma-avatar', imports: [], template: "<div [class]=\"wrapperClass()\" [style]=\"wrapperStyle()\">\n @if (showImage()) {\n <img [src]=\"src()\" [alt]=\"alt()\" class=\"ma-avatar__img\" />\n } @else {\n <span class=\"ma-avatar__initial\">{{ initials() }}</span>\n }\n</div>\n", styles: [".ma-avatar{position:relative;flex-shrink:0;overflow:visible}.ma-avatar--circle{border-radius:50%}.ma-avatar--rounded{border-radius:20%}.ma-avatar--rectangle{border-radius:0}.ma-avatar--portrait{border-radius:4px}.ma-avatar--circle .ma-avatar__img,.ma-avatar--circle .ma-avatar__initial{border-radius:50%}.ma-avatar--rounded .ma-avatar__img,.ma-avatar--rounded .ma-avatar__initial{border-radius:20%}.ma-avatar--rectangle .ma-avatar__img,.ma-avatar--rectangle .ma-avatar__initial{border-radius:0}.ma-avatar--portrait .ma-avatar__img,.ma-avatar--portrait .ma-avatar__initial{border-radius:4px}.ma-avatar--ring{cursor:pointer;transition:box-shadow .3s ease,filter .3s ease}.ma-avatar--ring:hover{box-shadow:0 0 0 2px var(--primary-color, #1976d2),0 0 8px 2px var(--primary-glow, rgba(25, 118, 210, .4));filter:drop-shadow(0 0 6px var(--primary-glow, rgba(25, 118, 210, .45)))}.ma-avatar--ring-active{box-shadow:0 0 0 2px var(--primary-color, #1976d2),0 0 10px 4px var(--primary-glow, rgba(25, 118, 210, .5));animation:ring-breathe 2.5s ease-in-out infinite}@keyframes ring-breathe{0%,to{filter:drop-shadow(0 0 5px var(--primary-color, #1976d2)) drop-shadow(0 0 12px var(--primary-glow, rgba(25, 118, 210, .3)))}50%{filter:drop-shadow(0 0 10px var(--primary-color, #1976d2)) drop-shadow(0 0 24px var(--primary-glow, rgba(25, 118, 210, .5)))}}.ma-avatar__img,.ma-avatar__initial{width:100%;height:100%;object-fit:cover;display:block;position:relative;z-index:0}.ma-avatar__initial{background:linear-gradient(135deg,var(--primary-color, #1976d2),var(--primary-glow, rgba(79,70,229,.4)));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700}.ma-avatar--sm .ma-avatar__initial{font-size:14px}.ma-avatar--md .ma-avatar__initial{font-size:17px}.ma-avatar--lg .ma-avatar__initial{font-size:22px}.ma-avatar--xl .ma-avatar__initial{font-size:38px}.ma-avatar--sm{--h: calc(36px * var(--avatar-scale, 1));--h-m: 30px}.ma-avatar--md{--h: calc(44px * var(--avatar-scale, 1));--h-m: 38px}.ma-avatar--lg{--h: calc(56px * var(--avatar-scale, 1));--h-m: 48px}.ma-avatar--xl{--h: calc(96px * var(--avatar-scale, 1))}[class*=ma-avatar--ratio-]{height:var(--h);width:var(--h)}.ma-avatar--ratio-ar-43{width:calc(var(--h) * 4 / 3)}.ma-avatar--ratio-ar-169{width:calc(var(--h) * 16 / 9)}@media(max-width:768px){[class*=ma-avatar--ratio-]{height:var(--h-m);width:var(--h-m)}.ma-avatar--ratio-ar-43{width:calc(var(--h-m) * 4 / 3)}.ma-avatar--ratio-ar-169{width:calc(var(--h-m) * 16 / 9)}}\n"] }]
|
|
521
|
+
}], propDecorators: { src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], initials: [{ type: i0.Input, args: [{ isSignal: true, alias: "initials", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], frame: [{ type: i0.Input, args: [{ isSignal: true, alias: "frame", required: false }] }], ratio: [{ type: i0.Input, args: [{ isSignal: true, alias: "ratio", required: false }] }], scale: [{ type: i0.Input, args: [{ isSignal: true, alias: "scale", required: false }] }], ring: [{ type: i0.Input, args: [{ isSignal: true, alias: "ring", required: false }] }], ringActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "ringActive", required: false }] }], themeClass: [{
|
|
518
522
|
type: HostBinding,
|
|
519
523
|
args: ['class']
|
|
520
524
|
}] } });
|
|
521
525
|
|
|
522
526
|
class UserProfileComponent {
|
|
527
|
+
inputAvatarShape = input('circle', ...(ngDevMode ? [{ debugName: "inputAvatarShape" }] : /* istanbul ignore next */ []));
|
|
528
|
+
showBell = input(true, ...(ngDevMode ? [{ debugName: "showBell" }] : /* istanbul ignore next */ []));
|
|
529
|
+
showApproval = input(true, ...(ngDevMode ? [{ debugName: "showApproval" }] : /* istanbul ignore next */ []));
|
|
523
530
|
notificationClick = output();
|
|
524
531
|
approvalClick = output();
|
|
525
532
|
get themeClass() {
|
|
@@ -537,7 +544,7 @@ class UserProfileComponent {
|
|
|
537
544
|
const s = this.navAvatarSize();
|
|
538
545
|
return s === 'sm' ? 'md' : s === 'md' ? 'lg' : 'xl';
|
|
539
546
|
}, ...(ngDevMode ? [{ debugName: "dropAvatarSize" }] : /* istanbul ignore next */ []));
|
|
540
|
-
avatarShape = computed(() => this.currentUser()?.avatarShape ??
|
|
547
|
+
avatarShape = computed(() => this.currentUser()?.avatarShape ?? this.inputAvatarShape(), ...(ngDevMode ? [{ debugName: "avatarShape" }] : /* istanbul ignore next */ []));
|
|
541
548
|
avatarFrame = computed(() => this.currentUser()?.avatarFrame ?? null, ...(ngDevMode ? [{ debugName: "avatarFrame" }] : /* istanbul ignore next */ []));
|
|
542
549
|
avatarRatio = computed(() => this.currentUser()?.avatarRatio ?? 'ar-11', ...(ngDevMode ? [{ debugName: "avatarRatio" }] : /* istanbul ignore next */ []));
|
|
543
550
|
authService = inject(MesAuthService);
|
|
@@ -617,11 +624,18 @@ class UserProfileComponent {
|
|
|
617
624
|
toggleDropdown() {
|
|
618
625
|
this.dropdownOpen.set(!this.dropdownOpen());
|
|
619
626
|
}
|
|
627
|
+
closeDropdown() {
|
|
628
|
+
this.dropdownOpen.set(false);
|
|
629
|
+
}
|
|
620
630
|
onDocumentClick(event) {
|
|
621
631
|
const target = event.target;
|
|
622
632
|
const clickedInside = target.closest('.user-menu-wrapper');
|
|
623
633
|
if (!clickedInside) {
|
|
624
634
|
this.dropdownOpen.set(false);
|
|
635
|
+
return;
|
|
636
|
+
}
|
|
637
|
+
if (target.closest('.ma-user-menu-btn')) {
|
|
638
|
+
this.dropdownOpen.set(false);
|
|
625
639
|
}
|
|
626
640
|
}
|
|
627
641
|
onLogin() {
|
|
@@ -631,7 +645,9 @@ class UserProfileComponent {
|
|
|
631
645
|
window.location.href = `${baseUrl}/login?returnUrl=${returnUrl}`;
|
|
632
646
|
}
|
|
633
647
|
onViewProfile() {
|
|
634
|
-
this.
|
|
648
|
+
const config = this.authService.getConfig();
|
|
649
|
+
const baseUrl = config?.userBaseUrl || '';
|
|
650
|
+
window.location.href = `${baseUrl}/profile`;
|
|
635
651
|
this.dropdownOpen.set(false);
|
|
636
652
|
}
|
|
637
653
|
onLogout() {
|
|
@@ -654,12 +670,12 @@ class UserProfileComponent {
|
|
|
654
670
|
this.notificationClick.emit();
|
|
655
671
|
}
|
|
656
672
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: UserProfileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
657
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: UserProfileComponent, isStandalone: true, selector: "ma-user-profile", outputs: { notificationClick: "notificationClick", approvalClick: "approvalClick" }, host: { listeners: { "document:click": "onDocumentClick($event)" }, properties: { "class": "this.themeClass" } }, ngImport: i0, template: "<div class=\"user-profile-container\">\n @if (!currentUser()) {\n <!-- Not logged in -->\n <button class=\"login-btn\" (click)=\"onLogin()\">Login</button>\n } @else {\n <!-- Logged in -->\n <div class=\"user-header\">\n <!-- Notification Bell -->\n
|
|
673
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: UserProfileComponent, isStandalone: true, selector: "ma-user-profile", inputs: { inputAvatarShape: { classPropertyName: "inputAvatarShape", publicName: "inputAvatarShape", isSignal: true, isRequired: false, transformFunction: null }, showBell: { classPropertyName: "showBell", publicName: "showBell", isSignal: true, isRequired: false, transformFunction: null }, showApproval: { classPropertyName: "showApproval", publicName: "showApproval", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { notificationClick: "notificationClick", approvalClick: "approvalClick" }, host: { listeners: { "document:click": "onDocumentClick($event)" }, properties: { "class": "this.themeClass" } }, ngImport: i0, template: "<div class=\"user-profile-container\">\n @if (!currentUser()) {\n <!-- Not logged in -->\n <button class=\"login-btn\" (click)=\"onLogin()\">Login</button>\n } @else {\n <!-- Logged in -->\n <div class=\"user-header\">\n <!-- Notification Bell -->\n @if (showBell()) {\n <button class=\"notification-btn\" [class.has-unread]=\"unreadCount() > 0\" (click)=\"onNotificationClick()\" title=\"Notifications\" aria-label=\"Notifications\">\n <svg class=\"bell-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9\"/>\n <path d=\"M13.73 21a2 2 0 0 1-3.46 0\"/>\n </svg>\n @if (unreadCount() > 0) {\n <span class=\"badge\">{{ unreadCount() > 99 ? '99+' : unreadCount() }}</span>\n }\n </button>\n }\n \n\n <!-- Approval Button -->\n @if (showApproval()) {\n <button class=\"notification-btn\" [class.has-unread]=\"pendingApprovalCount() > 0\" (click)=\"onApprovalClick()\" title=\"Approvals\" aria-label=\"Approvals\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M9 11l3 3L22 4\"/>\n <path d=\"M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11\"/>\n </svg>\n @if (pendingApprovalCount() > 0) {\n <span class=\"badge\">{{ pendingApprovalCount() > 99 ? '99+' : pendingApprovalCount() }}</span>\n }\n </button>\n } \n\n <!-- User Avatar + Dropdown -->\n <div class=\"user-menu-wrapper\">\n <button class=\"user-menu-btn\" (click)=\"toggleDropdown()\" [attr.aria-label]=\"'User menu for ' + (currentUser().fullName || currentUser().userName)\" aria-haspopup=\"true\" [attr.aria-expanded]=\"dropdownOpen()\">\n <ma-avatar\n [src]=\"getAvatarUrl(currentUser())\"\n [alt]=\"currentUser().fullName || currentUser().userName || ''\"\n [initials]=\"getLastNameInitial(currentUser())\"\n [size]=\"navAvatarSize()\"\n [shape]=\"avatarShape()\"\n [ratio]=\"avatarRatio()\"\n [frame]=\"avatarFrame()\"\n [ring]=\"true\"\n [ringActive]=\"dropdownOpen()\">\n </ma-avatar>\n </button>\n\n @if (dropdownOpen()) {\n <div class=\"mes-dropdown-menu\">\n <!-- User info header -->\n <div class=\"mes-dropdown-header\">\n <div class=\"dropdown-avatar-wrap\">\n <ma-avatar\n [src]=\"getAvatarUrl(currentUser())\"\n [alt]=\"currentUser().fullName || currentUser().userName || ''\"\n [initials]=\"getLastNameInitial(currentUser())\"\n [size]=\"dropAvatarSize()\"\n [shape]=\"avatarShape()\"\n [ratio]=\"avatarRatio()\"\n [frame]=\"avatarFrame()\">\n </ma-avatar>\n </div>\n <div class=\"dropdown-info-col\">\n <div class=\"dropdown-user-info\">\n <span class=\"dropdown-user-name\">{{ currentUser().fullName || currentUser().userName }}</span>\n @if (currentUser().position || currentUser().department) {\n <span class=\"dropdown-user-sub\">{{ currentUser().position || currentUser().department }}</span>\n }\n </div>\n <div class=\"dropdown-user-actions\">\n <button class=\"icon-action profile-link\" (click)=\"onViewProfile()\" title=\"View Profile\" aria-label=\"View Profile\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\"/><circle cx=\"12\" cy=\"7\" r=\"4\"/>\n </svg>\n </button>\n <button class=\"icon-action logout-item\" (click)=\"onLogout()\" title=\"Logout\" aria-label=\"Logout\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4\"/><polyline points=\"16 17 21 12 16 7\"/><line x1=\"21\" y1=\"12\" x2=\"9\" y2=\"12\"/>\n </svg>\n </button>\n </div>\n </div>\n </div>\n\n <div class=\"mes-dropdown-items\">\n <ng-content></ng-content>\n </div>\n </div>\n }\n </div>\n </div>\n }\n</div>\n", styles: [".user-profile-container{display:flex;align-items:center;gap:4px}.login-btn{padding:7px 18px;background-color:var(--primary-color);color:#fff;border:none;border-radius:8px;cursor:pointer;font-weight:500;font-size:13px;letter-spacing:.2px;transition:background-color .2s,transform .15s}.login-btn:hover{background-color:var(--primary-hover);transform:translateY(-1px)}.user-header{display:flex;align-items:center;gap:4px}.notification-btn{position:relative;background:none;border:none;cursor:pointer;padding:8px;border-radius:10px;color:var(--text-secondary);display:flex;align-items:center;justify-content:center;transition:color .2s,background-color .2s}.notification-btn:hover{background-color:var(--primary-light);color:var(--primary-color)}.notification-btn.has-unread{color:var(--primary-color)}.bell-icon{display:block;transition:transform .35s cubic-bezier(.34,1.56,.64,1)}.notification-btn:hover .bell-icon{transform:rotate(-20deg) scale(1.15)}.badge{position:absolute;top:2px;right:2px;background-color:var(--error-color);color:#fff;border-radius:10px;min-width:17px;height:17px;padding:0 4px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;line-height:1;box-shadow:0 0 0 2px var(--bg-primary);animation:badge-pop .25s cubic-bezier(.34,1.56,.64,1)}@keyframes badge-pop{0%{transform:scale(0)}to{transform:scale(1)}}.user-menu-wrapper{position:relative}.user-menu-btn{background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;transition:transform .2s}.user-menu-btn:hover{transform:scale(1.06)}.mes-dropdown-menu{position:absolute;top:calc(100% + 10px);right:0;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:14px;box-shadow:0 8px 32px var(--shadow-lg),0 2px 8px var(--shadow);min-width:220px;z-index:1000;overflow:hidden;animation:dropdown-in .16s cubic-bezier(.16,1,.3,1)}@keyframes dropdown-in{0%{opacity:0;transform:translateY(-8px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.mes-dropdown-header{display:flex;align-items:center;gap:12px;padding:16px;background:var(--bg-secondary)}.dropdown-avatar-wrap{flex-shrink:0}.dropdown-user-info{display:flex;flex-direction:column;gap:3px;min-width:0}.dropdown-user-name{font-weight:600;font-size:14px;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dropdown-user-sub{font-size:11px;color:var(--primary-color);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mes-dropdown-divider{height:1px;background:var(--border-color)}.dropdown-info-col{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1}.dropdown-user-actions{display:flex;align-items:center;justify-content:flex-end;gap:4px}.icon-action{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:none;background:none;border-radius:8px;cursor:pointer;color:var(--text-secondary);transition:background-color .15s,color .15s,transform .15s}.icon-action:hover{transform:translateY(-1px)}.icon-action.profile-link{color:var(--primary-color)}.icon-action.profile-link:hover{background-color:var(--primary-light)}.icon-action.logout-item{color:var(--error-color)}.icon-action.logout-item:hover{background-color:var(--error-light)}.mes-dropdown-items:not(:empty){border-top:1px solid var(--border-color)}\n"], dependencies: [{ kind: "component", type: MaAvatarComponent, selector: "ma-avatar", inputs: ["src", "alt", "initials", "size", "shape", "frame", "ratio", "scale", "ring", "ringActive"] }] });
|
|
658
674
|
}
|
|
659
675
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: UserProfileComponent, decorators: [{
|
|
660
676
|
type: Component,
|
|
661
|
-
args: [{ selector: 'ma-user-profile', imports: [MaAvatarComponent], template: "<div class=\"user-profile-container\">\n @if (!currentUser()) {\n <!-- Not logged in -->\n <button class=\"login-btn\" (click)=\"onLogin()\">Login</button>\n } @else {\n <!-- Logged in -->\n <div class=\"user-header\">\n <!-- Notification Bell -->\n
|
|
662
|
-
}], ctorParameters: () => [], propDecorators: { notificationClick: [{ type: i0.Output, args: ["notificationClick"] }], approvalClick: [{ type: i0.Output, args: ["approvalClick"] }], themeClass: [{
|
|
677
|
+
args: [{ selector: 'ma-user-profile', imports: [MaAvatarComponent], template: "<div class=\"user-profile-container\">\n @if (!currentUser()) {\n <!-- Not logged in -->\n <button class=\"login-btn\" (click)=\"onLogin()\">Login</button>\n } @else {\n <!-- Logged in -->\n <div class=\"user-header\">\n <!-- Notification Bell -->\n @if (showBell()) {\n <button class=\"notification-btn\" [class.has-unread]=\"unreadCount() > 0\" (click)=\"onNotificationClick()\" title=\"Notifications\" aria-label=\"Notifications\">\n <svg class=\"bell-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9\"/>\n <path d=\"M13.73 21a2 2 0 0 1-3.46 0\"/>\n </svg>\n @if (unreadCount() > 0) {\n <span class=\"badge\">{{ unreadCount() > 99 ? '99+' : unreadCount() }}</span>\n }\n </button>\n }\n \n\n <!-- Approval Button -->\n @if (showApproval()) {\n <button class=\"notification-btn\" [class.has-unread]=\"pendingApprovalCount() > 0\" (click)=\"onApprovalClick()\" title=\"Approvals\" aria-label=\"Approvals\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M9 11l3 3L22 4\"/>\n <path d=\"M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11\"/>\n </svg>\n @if (pendingApprovalCount() > 0) {\n <span class=\"badge\">{{ pendingApprovalCount() > 99 ? '99+' : pendingApprovalCount() }}</span>\n }\n </button>\n } \n\n <!-- User Avatar + Dropdown -->\n <div class=\"user-menu-wrapper\">\n <button class=\"user-menu-btn\" (click)=\"toggleDropdown()\" [attr.aria-label]=\"'User menu for ' + (currentUser().fullName || currentUser().userName)\" aria-haspopup=\"true\" [attr.aria-expanded]=\"dropdownOpen()\">\n <ma-avatar\n [src]=\"getAvatarUrl(currentUser())\"\n [alt]=\"currentUser().fullName || currentUser().userName || ''\"\n [initials]=\"getLastNameInitial(currentUser())\"\n [size]=\"navAvatarSize()\"\n [shape]=\"avatarShape()\"\n [ratio]=\"avatarRatio()\"\n [frame]=\"avatarFrame()\"\n [ring]=\"true\"\n [ringActive]=\"dropdownOpen()\">\n </ma-avatar>\n </button>\n\n @if (dropdownOpen()) {\n <div class=\"mes-dropdown-menu\">\n <!-- User info header -->\n <div class=\"mes-dropdown-header\">\n <div class=\"dropdown-avatar-wrap\">\n <ma-avatar\n [src]=\"getAvatarUrl(currentUser())\"\n [alt]=\"currentUser().fullName || currentUser().userName || ''\"\n [initials]=\"getLastNameInitial(currentUser())\"\n [size]=\"dropAvatarSize()\"\n [shape]=\"avatarShape()\"\n [ratio]=\"avatarRatio()\"\n [frame]=\"avatarFrame()\">\n </ma-avatar>\n </div>\n <div class=\"dropdown-info-col\">\n <div class=\"dropdown-user-info\">\n <span class=\"dropdown-user-name\">{{ currentUser().fullName || currentUser().userName }}</span>\n @if (currentUser().position || currentUser().department) {\n <span class=\"dropdown-user-sub\">{{ currentUser().position || currentUser().department }}</span>\n }\n </div>\n <div class=\"dropdown-user-actions\">\n <button class=\"icon-action profile-link\" (click)=\"onViewProfile()\" title=\"View Profile\" aria-label=\"View Profile\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\"/><circle cx=\"12\" cy=\"7\" r=\"4\"/>\n </svg>\n </button>\n <button class=\"icon-action logout-item\" (click)=\"onLogout()\" title=\"Logout\" aria-label=\"Logout\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4\"/><polyline points=\"16 17 21 12 16 7\"/><line x1=\"21\" y1=\"12\" x2=\"9\" y2=\"12\"/>\n </svg>\n </button>\n </div>\n </div>\n </div>\n\n <div class=\"mes-dropdown-items\">\n <ng-content></ng-content>\n </div>\n </div>\n }\n </div>\n </div>\n }\n</div>\n", styles: [".user-profile-container{display:flex;align-items:center;gap:4px}.login-btn{padding:7px 18px;background-color:var(--primary-color);color:#fff;border:none;border-radius:8px;cursor:pointer;font-weight:500;font-size:13px;letter-spacing:.2px;transition:background-color .2s,transform .15s}.login-btn:hover{background-color:var(--primary-hover);transform:translateY(-1px)}.user-header{display:flex;align-items:center;gap:4px}.notification-btn{position:relative;background:none;border:none;cursor:pointer;padding:8px;border-radius:10px;color:var(--text-secondary);display:flex;align-items:center;justify-content:center;transition:color .2s,background-color .2s}.notification-btn:hover{background-color:var(--primary-light);color:var(--primary-color)}.notification-btn.has-unread{color:var(--primary-color)}.bell-icon{display:block;transition:transform .35s cubic-bezier(.34,1.56,.64,1)}.notification-btn:hover .bell-icon{transform:rotate(-20deg) scale(1.15)}.badge{position:absolute;top:2px;right:2px;background-color:var(--error-color);color:#fff;border-radius:10px;min-width:17px;height:17px;padding:0 4px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;line-height:1;box-shadow:0 0 0 2px var(--bg-primary);animation:badge-pop .25s cubic-bezier(.34,1.56,.64,1)}@keyframes badge-pop{0%{transform:scale(0)}to{transform:scale(1)}}.user-menu-wrapper{position:relative}.user-menu-btn{background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;transition:transform .2s}.user-menu-btn:hover{transform:scale(1.06)}.mes-dropdown-menu{position:absolute;top:calc(100% + 10px);right:0;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:14px;box-shadow:0 8px 32px var(--shadow-lg),0 2px 8px var(--shadow);min-width:220px;z-index:1000;overflow:hidden;animation:dropdown-in .16s cubic-bezier(.16,1,.3,1)}@keyframes dropdown-in{0%{opacity:0;transform:translateY(-8px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.mes-dropdown-header{display:flex;align-items:center;gap:12px;padding:16px;background:var(--bg-secondary)}.dropdown-avatar-wrap{flex-shrink:0}.dropdown-user-info{display:flex;flex-direction:column;gap:3px;min-width:0}.dropdown-user-name{font-weight:600;font-size:14px;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dropdown-user-sub{font-size:11px;color:var(--primary-color);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mes-dropdown-divider{height:1px;background:var(--border-color)}.dropdown-info-col{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1}.dropdown-user-actions{display:flex;align-items:center;justify-content:flex-end;gap:4px}.icon-action{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:none;background:none;border-radius:8px;cursor:pointer;color:var(--text-secondary);transition:background-color .15s,color .15s,transform .15s}.icon-action:hover{transform:translateY(-1px)}.icon-action.profile-link{color:var(--primary-color)}.icon-action.profile-link:hover{background-color:var(--primary-light)}.icon-action.logout-item{color:var(--error-color)}.icon-action.logout-item:hover{background-color:var(--error-light)}.mes-dropdown-items:not(:empty){border-top:1px solid var(--border-color)}\n"] }]
|
|
678
|
+
}], ctorParameters: () => [], propDecorators: { inputAvatarShape: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputAvatarShape", required: false }] }], showBell: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBell", required: false }] }], showApproval: [{ type: i0.Input, args: [{ isSignal: true, alias: "showApproval", required: false }] }], notificationClick: [{ type: i0.Output, args: ["notificationClick"] }], approvalClick: [{ type: i0.Output, args: ["approvalClick"] }], themeClass: [{
|
|
663
679
|
type: HostBinding,
|
|
664
680
|
args: ['class']
|
|
665
681
|
}], onDocumentClick: [{
|
|
@@ -1155,6 +1171,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
1155
1171
|
class MaUserComponent {
|
|
1156
1172
|
userProfile;
|
|
1157
1173
|
approvalPanel;
|
|
1174
|
+
avatarShape = input('rounded', ...(ngDevMode ? [{ debugName: "avatarShape" }] : /* istanbul ignore next */ []));
|
|
1175
|
+
showBell = input(true, ...(ngDevMode ? [{ debugName: "showBell" }] : /* istanbul ignore next */ []));
|
|
1176
|
+
showApproval = input(true, ...(ngDevMode ? [{ debugName: "showApproval" }] : /* istanbul ignore next */ []));
|
|
1158
1177
|
ngAfterViewInit() {
|
|
1159
1178
|
if (this.userProfile) {
|
|
1160
1179
|
this.userProfile.loadUnreadCount();
|
|
@@ -1172,18 +1191,18 @@ class MaUserComponent {
|
|
|
1172
1191
|
}
|
|
1173
1192
|
}
|
|
1174
1193
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MaUserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1175
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1194
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: MaUserComponent, isStandalone: true, selector: "ma-user", inputs: { avatarShape: { classPropertyName: "avatarShape", publicName: "avatarShape", isSignal: true, isRequired: false, transformFunction: null }, showBell: { classPropertyName: "showBell", publicName: "showBell", isSignal: true, isRequired: false, transformFunction: null }, showApproval: { classPropertyName: "showApproval", publicName: "showApproval", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "userProfile", first: true, predicate: UserProfileComponent, descendants: true }, { propertyName: "approvalPanel", first: true, predicate: MaApprovalPanelComponent, descendants: true }], ngImport: i0, template: "<ma-toast-container></ma-toast-container>\n<div class=\"user-header\">\n <ma-user-profile\n (notificationClick)=\"notificationPanel.open()\"\n (approvalClick)=\"approvalPanel.open()\"\n [inputAvatarShape]=\"avatarShape()\"\n [showBell]=\"showBell()\"\n [showApproval]=\"showApproval()\">\n <ng-content></ng-content>\n </ma-user-profile>\n</div>\n<ma-notification-panel #notificationPanel (notificationRead)=\"onNotificationRead()\"></ma-notification-panel>\n<ma-approval-panel #approvalPanel (approvalActioned)=\"onApprovalActioned()\"></ma-approval-panel>\n", styles: [".user-header{display:flex;justify-content:flex-end}\n"], dependencies: [{ kind: "component", type: ToastContainerComponent, selector: "ma-toast-container" }, { kind: "component", type: UserProfileComponent, selector: "ma-user-profile", inputs: ["inputAvatarShape", "showBell", "showApproval"], outputs: ["notificationClick", "approvalClick"] }, { kind: "component", type: NotificationPanelComponent, selector: "ma-notification-panel", outputs: ["notificationRead"] }, { kind: "component", type: MaApprovalPanelComponent, selector: "ma-approval-panel", outputs: ["approvalActioned"] }] });
|
|
1176
1195
|
}
|
|
1177
1196
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MaUserComponent, decorators: [{
|
|
1178
1197
|
type: Component,
|
|
1179
|
-
args: [{ selector: 'ma-user', imports: [ToastContainerComponent, UserProfileComponent, NotificationPanelComponent, MaApprovalPanelComponent], template: "<ma-toast-container></ma-toast-container>\n<div class=\"user-header\">\n <ma-user-profile\n (notificationClick)=\"notificationPanel.open()\"\n (approvalClick)=\"approvalPanel.open()\">\n </ma-user-profile>\n</div>\n<ma-notification-panel #notificationPanel (notificationRead)=\"onNotificationRead()\"></ma-notification-panel>\n<ma-approval-panel #approvalPanel (approvalActioned)=\"onApprovalActioned()\"></ma-approval-panel>\n", styles: [".user-header{display:flex;justify-content:flex-end}\n"] }]
|
|
1198
|
+
args: [{ selector: 'ma-user', imports: [ToastContainerComponent, UserProfileComponent, NotificationPanelComponent, MaApprovalPanelComponent], template: "<ma-toast-container></ma-toast-container>\n<div class=\"user-header\">\n <ma-user-profile\n (notificationClick)=\"notificationPanel.open()\"\n (approvalClick)=\"approvalPanel.open()\"\n [inputAvatarShape]=\"avatarShape()\"\n [showBell]=\"showBell()\"\n [showApproval]=\"showApproval()\">\n <ng-content></ng-content>\n </ma-user-profile>\n</div>\n<ma-notification-panel #notificationPanel (notificationRead)=\"onNotificationRead()\"></ma-notification-panel>\n<ma-approval-panel #approvalPanel (approvalActioned)=\"onApprovalActioned()\"></ma-approval-panel>\n", styles: [".user-header{display:flex;justify-content:flex-end}\n"] }]
|
|
1180
1199
|
}], propDecorators: { userProfile: [{
|
|
1181
1200
|
type: ViewChild,
|
|
1182
1201
|
args: [UserProfileComponent]
|
|
1183
1202
|
}], approvalPanel: [{
|
|
1184
1203
|
type: ViewChild,
|
|
1185
1204
|
args: [MaApprovalPanelComponent]
|
|
1186
|
-
}] } });
|
|
1205
|
+
}], avatarShape: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarShape", required: false }] }], showBell: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBell", required: false }] }], showApproval: [{ type: i0.Input, args: [{ isSignal: true, alias: "showApproval", required: false }] }] } });
|
|
1187
1206
|
|
|
1188
1207
|
class NotificationBadgeComponent {
|
|
1189
1208
|
notificationClick = output();
|
|
@@ -1968,6 +1987,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
1968
1987
|
args: ['class']
|
|
1969
1988
|
}] } });
|
|
1970
1989
|
|
|
1990
|
+
var MaUserMenuColor;
|
|
1991
|
+
(function (MaUserMenuColor) {
|
|
1992
|
+
MaUserMenuColor["Default"] = "default";
|
|
1993
|
+
MaUserMenuColor["Primary"] = "primary";
|
|
1994
|
+
MaUserMenuColor["Success"] = "success";
|
|
1995
|
+
MaUserMenuColor["Warning"] = "warning";
|
|
1996
|
+
MaUserMenuColor["Danger"] = "danger";
|
|
1997
|
+
MaUserMenuColor["Info"] = "info";
|
|
1998
|
+
})(MaUserMenuColor || (MaUserMenuColor = {}));
|
|
1999
|
+
|
|
2000
|
+
class MaUserMenuComponent {
|
|
2001
|
+
name = input.required(...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
|
|
2002
|
+
color = input(MaUserMenuColor.Default, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
|
|
2003
|
+
disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
2004
|
+
itemClick = output();
|
|
2005
|
+
onClick() {
|
|
2006
|
+
if (this.disabled())
|
|
2007
|
+
return;
|
|
2008
|
+
this.itemClick.emit();
|
|
2009
|
+
}
|
|
2010
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MaUserMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2011
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: MaUserMenuComponent, isStandalone: true, selector: "ma-user-menu", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: "<button\n type=\"button\"\n class=\"ma-user-menu-btn\"\n [class]=\"'ma-user-menu--' + color()\"\n [disabled]=\"disabled()\"\n (click)=\"onClick()\">\n <span class=\"ma-user-menu-icon\">\n <ng-content select=\"[maUserMenuIcon]\"></ng-content>\n </span>\n <span class=\"ma-user-menu-name\">{{ name() }}</span>\n</button>\n", styles: [":host{display:block}.ma-user-menu-btn{display:flex;align-items:center;gap:10px;width:100%;padding:11px 16px;border:none;background:none;text-align:left;cursor:pointer;font-size:13.5px;font-weight:500;color:var(--text-primary);transition:background-color .15s,color .15s}.ma-user-menu-btn:disabled{opacity:.5;cursor:not-allowed}.ma-user-menu-icon{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;opacity:.8}.ma-user-menu-icon:empty{display:none}.ma-user-menu-name{flex:1 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ma-user-menu--default{color:var(--text-primary)}.ma-user-menu--default:hover:not(:disabled){background-color:var(--bg-secondary)}.ma-user-menu--primary{color:var(--primary-color, #1976d2)}.ma-user-menu--primary:hover:not(:disabled){background-color:var(--primary-light, rgba(25, 118, 210, .08))}.ma-user-menu--success{color:var(--success-color, #2e7d32)}.ma-user-menu--success:hover:not(:disabled){background-color:var(--success-light, rgba(46, 125, 50, .08))}.ma-user-menu--warning{color:var(--warning-color, #ed6c02)}.ma-user-menu--warning:hover:not(:disabled){background-color:var(--warning-light, rgba(237, 108, 2, .08))}.ma-user-menu--danger{color:var(--error-color, #d32f2f)}.ma-user-menu--danger:hover:not(:disabled){background-color:var(--error-light, rgba(211, 47, 47, .08))}.ma-user-menu--info{color:var(--info-color, #0288d1)}.ma-user-menu--info:hover:not(:disabled){background-color:var(--info-light, rgba(2, 136, 209, .08))}\n"] });
|
|
2012
|
+
}
|
|
2013
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MaUserMenuComponent, decorators: [{
|
|
2014
|
+
type: Component,
|
|
2015
|
+
args: [{ selector: 'ma-user-menu', template: "<button\n type=\"button\"\n class=\"ma-user-menu-btn\"\n [class]=\"'ma-user-menu--' + color()\"\n [disabled]=\"disabled()\"\n (click)=\"onClick()\">\n <span class=\"ma-user-menu-icon\">\n <ng-content select=\"[maUserMenuIcon]\"></ng-content>\n </span>\n <span class=\"ma-user-menu-name\">{{ name() }}</span>\n</button>\n", styles: [":host{display:block}.ma-user-menu-btn{display:flex;align-items:center;gap:10px;width:100%;padding:11px 16px;border:none;background:none;text-align:left;cursor:pointer;font-size:13.5px;font-weight:500;color:var(--text-primary);transition:background-color .15s,color .15s}.ma-user-menu-btn:disabled{opacity:.5;cursor:not-allowed}.ma-user-menu-icon{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;opacity:.8}.ma-user-menu-icon:empty{display:none}.ma-user-menu-name{flex:1 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ma-user-menu--default{color:var(--text-primary)}.ma-user-menu--default:hover:not(:disabled){background-color:var(--bg-secondary)}.ma-user-menu--primary{color:var(--primary-color, #1976d2)}.ma-user-menu--primary:hover:not(:disabled){background-color:var(--primary-light, rgba(25, 118, 210, .08))}.ma-user-menu--success{color:var(--success-color, #2e7d32)}.ma-user-menu--success:hover:not(:disabled){background-color:var(--success-light, rgba(46, 125, 50, .08))}.ma-user-menu--warning{color:var(--warning-color, #ed6c02)}.ma-user-menu--warning:hover:not(:disabled){background-color:var(--warning-light, rgba(237, 108, 2, .08))}.ma-user-menu--danger{color:var(--error-color, #d32f2f)}.ma-user-menu--danger:hover:not(:disabled){background-color:var(--error-light, rgba(211, 47, 47, .08))}.ma-user-menu--info{color:var(--info-color, #0288d1)}.ma-user-menu--info:hover:not(:disabled){background-color:var(--info-light, rgba(2, 136, 209, .08))}\n"] }]
|
|
2016
|
+
}], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }] } });
|
|
2017
|
+
|
|
1971
2018
|
// mesauth-angular — primary entry point (backward compatible)
|
|
1972
2019
|
// Re-exports everything so existing imports from 'mesauth-angular' continue to work.
|
|
1973
2020
|
// Prefer importing from 'mesauth-angular/core' or 'mesauth-angular/ui' for
|
|
@@ -1977,5 +2024,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
1977
2024
|
* Generated bundle index. Do not edit.
|
|
1978
2025
|
*/
|
|
1979
2026
|
|
|
1980
|
-
export { ALL_ACTIONS, AVATAR_FRAMES, ApprovalActionType, ApprovalDocumentStatus, ApprovalStepMode, ApprovalStepStatus, MES_AUTH_CONFIG, MaApprovalPanelComponent, MaApprovalService, MaArvContainerComponent, MaAvatarComponent, MaIconComponent, MaThemeDirective, MaUiConfigService, MaUserComponent, MesAuthModule, MesAuthService, NotificationBadgeComponent, NotificationPanelComponent, NotificationType, PACKAGE_VERSION, ThemeService, ToastContainerComponent, ToastService, UserProfileComponent, extractXMaPerm, mesAuthInterceptor, provideMesAuth, withXMaPerm, xMaResource };
|
|
2027
|
+
export { ALL_ACTIONS, AVATAR_FRAMES, ApprovalActionType, ApprovalDocumentStatus, ApprovalStepMode, ApprovalStepStatus, MES_AUTH_CONFIG, MaApprovalPanelComponent, MaApprovalService, MaArvContainerComponent, MaAvatarComponent, MaIconComponent, MaThemeDirective, MaUiConfigService, MaUserComponent, MaUserMenuColor, MaUserMenuComponent, MesAuthModule, MesAuthService, NotificationBadgeComponent, NotificationPanelComponent, NotificationType, PACKAGE_VERSION, ThemeService, ToastContainerComponent, ToastService, UserProfileComponent, extractXMaPerm, mesAuthInterceptor, provideMesAuth, withXMaPerm, xMaResource };
|
|
1981
2028
|
//# sourceMappingURL=mesauth-angular.mjs.map
|