mesauth-angular 0.1.18 → 0.1.20
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/dist/esm2020/index.mjs +2 -1
- package/dist/esm2020/mes-auth.service.mjs +12 -4
- package/dist/esm2020/notification-badge.component.mjs +22 -8
- package/dist/esm2020/notification-panel.component.mjs +22 -8
- package/dist/esm2020/theme.service.mjs +38 -0
- package/dist/esm2020/toast-container.component.mjs +33 -10
- package/dist/esm2020/user-profile.component.mjs +22 -9
- package/dist/fesm2015/mesauth-angular.mjs +133 -33
- package/dist/fesm2015/mesauth-angular.mjs.map +1 -1
- package/dist/fesm2020/mesauth-angular.mjs +133 -33
- package/dist/fesm2020/mesauth-angular.mjs.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/notification-badge.component.d.ts +5 -1
- package/dist/notification-panel.component.d.ts +5 -1
- package/dist/package.json +1 -1
- package/dist/theme.service.d.ts +14 -0
- package/dist/toast-container.component.d.ts +9 -3
- package/dist/user-profile.component.d.ts +5 -1
- package/package.json +1 -1
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Injectable, NgModule, EventEmitter, Component, Output, HostListener } from '@angular/core';
|
|
2
|
+
import { Injectable, NgModule, EventEmitter, Component, Output, HostBinding, HostListener } from '@angular/core';
|
|
3
3
|
import { HubConnectionBuilder, LogLevel } from '@microsoft/signalr';
|
|
4
4
|
import { BehaviorSubject, Subject, throwError } from 'rxjs';
|
|
5
|
+
import { tap, catchError, takeUntil } from 'rxjs/operators';
|
|
5
6
|
import * as i1 from '@angular/common/http';
|
|
6
7
|
import { HTTP_INTERCEPTORS } from '@angular/common/http';
|
|
7
|
-
import { catchError, takeUntil } from 'rxjs/operators';
|
|
8
8
|
import * as i2 from '@angular/router';
|
|
9
|
-
import * as
|
|
9
|
+
import * as i3 from '@angular/common';
|
|
10
10
|
import { NgIf, CommonModule, NgFor } from '@angular/common';
|
|
11
11
|
|
|
12
12
|
var NotificationType;
|
|
@@ -32,7 +32,6 @@ class MesAuthService {
|
|
|
32
32
|
this.apiBase = config.apiBaseUrl.replace(/\/$/, '');
|
|
33
33
|
this.fetchCurrentUser();
|
|
34
34
|
this.fetchInitialNotifications();
|
|
35
|
-
this.startConnection(config);
|
|
36
35
|
}
|
|
37
36
|
getConfig() {
|
|
38
37
|
return this.config;
|
|
@@ -41,7 +40,12 @@ class MesAuthService {
|
|
|
41
40
|
if (!this.apiBase)
|
|
42
41
|
return;
|
|
43
42
|
this.http.get(`${this.apiBase}/auth/me`).subscribe({
|
|
44
|
-
next: (u) =>
|
|
43
|
+
next: (u) => {
|
|
44
|
+
this._currentUser.next(u);
|
|
45
|
+
if (u && this.config) {
|
|
46
|
+
this.startConnection(this.config);
|
|
47
|
+
}
|
|
48
|
+
},
|
|
45
49
|
error: (err) => console.error('fetchCurrentUser error', err)
|
|
46
50
|
});
|
|
47
51
|
}
|
|
@@ -101,7 +105,10 @@ class MesAuthService {
|
|
|
101
105
|
this.hubConnection = null;
|
|
102
106
|
}
|
|
103
107
|
logout() {
|
|
104
|
-
return this.http.post(`${this.apiBase}/auth/logout`, {})
|
|
108
|
+
return this.http.post(`${this.apiBase}/auth/logout`, {}).pipe(tap(() => {
|
|
109
|
+
this._currentUser.next(null);
|
|
110
|
+
this.stop();
|
|
111
|
+
}));
|
|
105
112
|
}
|
|
106
113
|
refreshUser() {
|
|
107
114
|
this.fetchCurrentUser();
|
|
@@ -154,16 +161,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
154
161
|
}]
|
|
155
162
|
}] });
|
|
156
163
|
|
|
164
|
+
class ThemeService {
|
|
165
|
+
constructor() {
|
|
166
|
+
this._currentTheme = new BehaviorSubject('light');
|
|
167
|
+
this.currentTheme$ = this._currentTheme.asObservable();
|
|
168
|
+
this.detectTheme();
|
|
169
|
+
}
|
|
170
|
+
detectTheme() {
|
|
171
|
+
const html = document.documentElement;
|
|
172
|
+
const isDark = html.classList.contains('dark') ||
|
|
173
|
+
html.getAttribute('data-theme') === 'dark' ||
|
|
174
|
+
html.getAttribute('theme') === 'dark' ||
|
|
175
|
+
html.getAttribute('data-coreui-theme') === 'dark';
|
|
176
|
+
this._currentTheme.next(isDark ? 'dark' : 'light');
|
|
177
|
+
}
|
|
178
|
+
get currentTheme() {
|
|
179
|
+
return this._currentTheme.value;
|
|
180
|
+
}
|
|
181
|
+
// Method to manually set theme if needed
|
|
182
|
+
setTheme(theme) {
|
|
183
|
+
this._currentTheme.next(theme);
|
|
184
|
+
}
|
|
185
|
+
// Re-detect theme from DOM
|
|
186
|
+
refreshTheme() {
|
|
187
|
+
this.detectTheme();
|
|
188
|
+
}
|
|
189
|
+
}
|
|
190
|
+
ThemeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
191
|
+
ThemeService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ThemeService, providedIn: 'root' });
|
|
192
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ThemeService, decorators: [{
|
|
193
|
+
type: Injectable,
|
|
194
|
+
args: [{
|
|
195
|
+
providedIn: 'root'
|
|
196
|
+
}]
|
|
197
|
+
}], ctorParameters: function () { return []; } });
|
|
198
|
+
|
|
157
199
|
class UserProfileComponent {
|
|
158
|
-
constructor(authService, router) {
|
|
200
|
+
constructor(authService, router, themeService) {
|
|
159
201
|
this.authService = authService;
|
|
160
202
|
this.router = router;
|
|
203
|
+
this.themeService = themeService;
|
|
161
204
|
this.notificationClick = new EventEmitter();
|
|
162
205
|
this.currentUser = null;
|
|
206
|
+
this.currentTheme = 'light';
|
|
163
207
|
this.unreadCount = 0;
|
|
164
208
|
this.dropdownOpen = false;
|
|
165
209
|
this.destroy$ = new Subject();
|
|
166
210
|
}
|
|
211
|
+
get themeClass() {
|
|
212
|
+
return `theme-${this.currentTheme}`;
|
|
213
|
+
}
|
|
167
214
|
ngOnInit() {
|
|
168
215
|
console.log('UserProfileComponent: Service injected?', !!this.authService);
|
|
169
216
|
this.authService.currentUser$
|
|
@@ -172,6 +219,11 @@ class UserProfileComponent {
|
|
|
172
219
|
console.log('UserProfileComponent: currentUser', user);
|
|
173
220
|
this.currentUser = user;
|
|
174
221
|
});
|
|
222
|
+
this.themeService.currentTheme$
|
|
223
|
+
.pipe(takeUntil(this.destroy$))
|
|
224
|
+
.subscribe(theme => {
|
|
225
|
+
this.currentTheme = theme;
|
|
226
|
+
});
|
|
175
227
|
this.loadUnreadCount();
|
|
176
228
|
// Listen for new notifications
|
|
177
229
|
this.authService.notifications$
|
|
@@ -232,7 +284,6 @@ class UserProfileComponent {
|
|
|
232
284
|
this.authService.logout().subscribe({
|
|
233
285
|
next: () => {
|
|
234
286
|
// Clear current user after successful logout
|
|
235
|
-
this.currentUser = null;
|
|
236
287
|
this.dropdownOpen = false;
|
|
237
288
|
// Navigate to login with return URL
|
|
238
289
|
const config = this.authService.getConfig();
|
|
@@ -253,8 +304,8 @@ class UserProfileComponent {
|
|
|
253
304
|
this.notificationClick.emit();
|
|
254
305
|
}
|
|
255
306
|
}
|
|
256
|
-
UserProfileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: UserProfileComponent, deps: [{ token: MesAuthService }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component });
|
|
257
|
-
UserProfileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: UserProfileComponent, isStandalone: true, selector: "ma-user-profile", outputs: { notificationClick: "notificationClick" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: `
|
|
307
|
+
UserProfileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: UserProfileComponent, deps: [{ token: MesAuthService }, { token: i2.Router }, { token: ThemeService }], target: i0.ɵɵFactoryTarget.Component });
|
|
308
|
+
UserProfileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: UserProfileComponent, isStandalone: true, selector: "ma-user-profile", outputs: { notificationClick: "notificationClick" }, host: { listeners: { "document:click": "onDocumentClick($event)" }, properties: { "class": "this.themeClass" } }, ngImport: i0, template: `
|
|
258
309
|
<div class="user-profile-container">
|
|
259
310
|
<!-- Not logged in -->
|
|
260
311
|
<ng-container *ngIf="!currentUser">
|
|
@@ -299,7 +350,7 @@ UserProfileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
|
|
|
299
350
|
</div>
|
|
300
351
|
</ng-container>
|
|
301
352
|
</div>
|
|
302
|
-
`, isInline: true, styles: [".user-profile-container{display:flex;align-items:center;gap:16px;padding:0 16px}.login-btn{padding:8px 16px;background-color
|
|
353
|
+
`, isInline: true, styles: [":host{--primary-color: #1976d2;--primary-hover: #1565c0;--primary-light: rgba(25, 118, 210, .1);--error-color: #f44336;--error-light: #ffebee;--text-primary: #333;--text-secondary: #666;--text-muted: #999;--bg-primary: white;--bg-secondary: #f5f5f5;--bg-tertiary: #fafafa;--bg-hover: #f5f5f5;--border-color: #e0e0e0;--border-light: #f0f0f0;--shadow: rgba(0, 0, 0, .15);--shadow-light: rgba(0, 0, 0, .1)}:host(.theme-dark){--primary-color: #90caf9;--primary-hover: #64b5f6;--primary-light: rgba(144, 202, 249, .1);--error-color: #ef5350;--error-light: rgba(239, 83, 80, .1);--text-primary: #e0e0e0;--text-secondary: #b0b0b0;--text-muted: #888;--bg-primary: #1e1e1e;--bg-secondary: #2d2d2d;--bg-tertiary: #252525;--bg-hover: #333;--border-color: #404040;--border-light: #333;--shadow: rgba(0, 0, 0, .3);--shadow-light: rgba(0, 0, 0, .2)}.user-profile-container{display:flex;align-items:center;gap:16px;padding:0 16px}.login-btn{padding:8px 16px;background-color:var(--primary-color);color:#fff;border:none;border-radius:4px;cursor:pointer;font-weight:500;transition:background-color .3s}.login-btn:hover{background-color:var(--primary-hover)}.user-header{display:flex;align-items:center;gap:16px}.notification-btn{position:relative;background:none;border:none;font-size:24px;cursor:pointer;padding:8px;transition:opacity .2s}.notification-btn:hover{opacity:.7}.icon{display:inline-block}.badge{position:absolute;top:0;right:0;background-color:var(--error-color);color:#fff;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}.user-menu-wrapper{position:relative}.user-menu-btn{background:none;border:none;cursor:pointer;padding:4px;border-radius:50%;transition:background-color .2s;display:flex;align-items:center;justify-content:center}.user-menu-btn:hover{background-color:var(--primary-light)}.avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;background-color:#e0e0e0}.avatar-initial{width:40px;height:40px;border-radius:50%;background-color:var(--primary-color);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px}.mes-dropdown-menu{position:absolute;top:calc(100% + 8px);right:0;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:4px;box-shadow:0 2px 8px var(--shadow);min-width:200px;z-index:1000;overflow:hidden}.mes-dropdown-header{padding:12px 16px;border-bottom:1px solid var(--border-light);font-weight:600;color:var(--text-primary);font-size:14px}.mes-dropdown-item{display:block;width:100%;padding:12px 16px;border:none;background:none;text-align:left;cursor:pointer;font-size:14px;color:var(--text-primary);text-decoration:none;transition:background-color .2s}.mes-dropdown-item:hover{background-color:var(--bg-hover)}.profile-link{color:var(--primary-color)}.logout-item{border-top:1px solid var(--border-light);color:var(--error-color)}.logout-item:hover{background-color:var(--error-light)}.user-info{display:flex;flex-direction:column;gap:2px}.user-name{font-weight:500;font-size:14px;color:var(--text-primary)}.user-position{font-size:12px;color:var(--text-secondary)}.logout-btn{background:none;border:none;font-size:20px;cursor:pointer;color:var(--text-secondary);padding:4px 8px;transition:color .2s}.logout-btn:hover{color:var(--primary-color)}@media (max-width: 768px){.user-info{display:none}.avatar{width:32px;height:32px}}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
303
354
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: UserProfileComponent, decorators: [{
|
|
304
355
|
type: Component,
|
|
305
356
|
args: [{ selector: 'ma-user-profile', standalone: true, imports: [NgIf], template: `
|
|
@@ -347,9 +398,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
347
398
|
</div>
|
|
348
399
|
</ng-container>
|
|
349
400
|
</div>
|
|
350
|
-
`, styles: [".user-profile-container{display:flex;align-items:center;gap:16px;padding:0 16px}.login-btn{padding:8px 16px;background-color
|
|
351
|
-
}], ctorParameters: function () { return [{ type: MesAuthService }, { type: i2.Router }]; }, propDecorators: { notificationClick: [{
|
|
401
|
+
`, styles: [":host{--primary-color: #1976d2;--primary-hover: #1565c0;--primary-light: rgba(25, 118, 210, .1);--error-color: #f44336;--error-light: #ffebee;--text-primary: #333;--text-secondary: #666;--text-muted: #999;--bg-primary: white;--bg-secondary: #f5f5f5;--bg-tertiary: #fafafa;--bg-hover: #f5f5f5;--border-color: #e0e0e0;--border-light: #f0f0f0;--shadow: rgba(0, 0, 0, .15);--shadow-light: rgba(0, 0, 0, .1)}:host(.theme-dark){--primary-color: #90caf9;--primary-hover: #64b5f6;--primary-light: rgba(144, 202, 249, .1);--error-color: #ef5350;--error-light: rgba(239, 83, 80, .1);--text-primary: #e0e0e0;--text-secondary: #b0b0b0;--text-muted: #888;--bg-primary: #1e1e1e;--bg-secondary: #2d2d2d;--bg-tertiary: #252525;--bg-hover: #333;--border-color: #404040;--border-light: #333;--shadow: rgba(0, 0, 0, .3);--shadow-light: rgba(0, 0, 0, .2)}.user-profile-container{display:flex;align-items:center;gap:16px;padding:0 16px}.login-btn{padding:8px 16px;background-color:var(--primary-color);color:#fff;border:none;border-radius:4px;cursor:pointer;font-weight:500;transition:background-color .3s}.login-btn:hover{background-color:var(--primary-hover)}.user-header{display:flex;align-items:center;gap:16px}.notification-btn{position:relative;background:none;border:none;font-size:24px;cursor:pointer;padding:8px;transition:opacity .2s}.notification-btn:hover{opacity:.7}.icon{display:inline-block}.badge{position:absolute;top:0;right:0;background-color:var(--error-color);color:#fff;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}.user-menu-wrapper{position:relative}.user-menu-btn{background:none;border:none;cursor:pointer;padding:4px;border-radius:50%;transition:background-color .2s;display:flex;align-items:center;justify-content:center}.user-menu-btn:hover{background-color:var(--primary-light)}.avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;background-color:#e0e0e0}.avatar-initial{width:40px;height:40px;border-radius:50%;background-color:var(--primary-color);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px}.mes-dropdown-menu{position:absolute;top:calc(100% + 8px);right:0;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:4px;box-shadow:0 2px 8px var(--shadow);min-width:200px;z-index:1000;overflow:hidden}.mes-dropdown-header{padding:12px 16px;border-bottom:1px solid var(--border-light);font-weight:600;color:var(--text-primary);font-size:14px}.mes-dropdown-item{display:block;width:100%;padding:12px 16px;border:none;background:none;text-align:left;cursor:pointer;font-size:14px;color:var(--text-primary);text-decoration:none;transition:background-color .2s}.mes-dropdown-item:hover{background-color:var(--bg-hover)}.profile-link{color:var(--primary-color)}.logout-item{border-top:1px solid var(--border-light);color:var(--error-color)}.logout-item:hover{background-color:var(--error-light)}.user-info{display:flex;flex-direction:column;gap:2px}.user-name{font-weight:500;font-size:14px;color:var(--text-primary)}.user-position{font-size:12px;color:var(--text-secondary)}.logout-btn{background:none;border:none;font-size:20px;cursor:pointer;color:var(--text-secondary);padding:4px 8px;transition:color .2s}.logout-btn:hover{color:var(--primary-color)}@media (max-width: 768px){.user-info{display:none}.avatar{width:32px;height:32px}}\n"] }]
|
|
402
|
+
}], ctorParameters: function () { return [{ type: MesAuthService }, { type: i2.Router }, { type: ThemeService }]; }, propDecorators: { notificationClick: [{
|
|
352
403
|
type: Output
|
|
404
|
+
}], themeClass: [{
|
|
405
|
+
type: HostBinding,
|
|
406
|
+
args: ['class']
|
|
353
407
|
}], onDocumentClick: [{
|
|
354
408
|
type: HostListener,
|
|
355
409
|
args: ['document:click', ['$event']]
|
|
@@ -394,21 +448,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
394
448
|
}] });
|
|
395
449
|
|
|
396
450
|
class ToastContainerComponent {
|
|
397
|
-
constructor(toastService) {
|
|
451
|
+
constructor(toastService, themeService) {
|
|
398
452
|
this.toastService = toastService;
|
|
453
|
+
this.themeService = themeService;
|
|
399
454
|
this.toasts = [];
|
|
455
|
+
this.currentTheme = 'light';
|
|
456
|
+
this.destroy$ = new Subject();
|
|
457
|
+
}
|
|
458
|
+
get themeClass() {
|
|
459
|
+
return `theme-${this.currentTheme}`;
|
|
400
460
|
}
|
|
401
461
|
ngOnInit() {
|
|
402
|
-
this.toastService.toasts
|
|
462
|
+
this.toastService.toasts
|
|
463
|
+
.pipe(takeUntil(this.destroy$))
|
|
464
|
+
.subscribe(toasts => {
|
|
403
465
|
this.toasts = toasts;
|
|
404
466
|
});
|
|
467
|
+
this.themeService.currentTheme$
|
|
468
|
+
.pipe(takeUntil(this.destroy$))
|
|
469
|
+
.subscribe(theme => {
|
|
470
|
+
this.currentTheme = theme;
|
|
471
|
+
});
|
|
472
|
+
}
|
|
473
|
+
ngOnDestroy() {
|
|
474
|
+
this.destroy$.next();
|
|
475
|
+
this.destroy$.complete();
|
|
405
476
|
}
|
|
406
477
|
close(id) {
|
|
407
478
|
this.toastService.remove(id);
|
|
408
479
|
}
|
|
409
480
|
}
|
|
410
|
-
ToastContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ToastContainerComponent, deps: [{ token: ToastService }], target: i0.ɵɵFactoryTarget.Component });
|
|
411
|
-
ToastContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ToastContainerComponent, isStandalone: true, selector: "ma-toast-container", ngImport: i0, template: `
|
|
481
|
+
ToastContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ToastContainerComponent, deps: [{ token: ToastService }, { token: ThemeService }], target: i0.ɵɵFactoryTarget.Component });
|
|
482
|
+
ToastContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ToastContainerComponent, isStandalone: true, selector: "ma-toast-container", host: { properties: { "class": "this.themeClass" } }, ngImport: i0, template: `
|
|
412
483
|
<div class="toast-container">
|
|
413
484
|
<div
|
|
414
485
|
*ngFor="let toast of toasts"
|
|
@@ -425,7 +496,7 @@ ToastContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
|
|
|
425
496
|
</button>
|
|
426
497
|
</div>
|
|
427
498
|
</div>
|
|
428
|
-
`, isInline: true, styles: [".toast-container{position:fixed;top:20px;right:20px;z-index:9999;pointer-events:none}.toast{display:flex;align-items:flex-start;gap:12px;padding:12px 16px;margin-bottom:12px;border-radius:4px;background-color
|
|
499
|
+
`, isInline: true, styles: [":host{--info-color: #2196f3;--success-color: #4caf50;--warning-color: #ff9800;--error-color: #f44336;--text-primary: #333;--bg-primary: white;--shadow: rgba(0, 0, 0, .15);--text-secondary: #999}:host(.theme-dark){--info-color: #64b5f6;--success-color: #81c784;--warning-color: #ffb74d;--error-color: #ef5350;--text-primary: #e0e0e0;--bg-primary: #1e1e1e;--shadow: rgba(0, 0, 0, .3);--text-secondary: #888}.toast-container{position:fixed;top:20px;right:20px;z-index:9999;pointer-events:none}.toast{display:flex;align-items:flex-start;gap:12px;padding:12px 16px;margin-bottom:12px;border-radius:4px;background-color:var(--bg-primary);box-shadow:0 4px 12px var(--shadow);pointer-events:auto;min-width:300px;max-width:500px;animation:slideIn .3s ease-out}.toast-content{flex:1}.toast-title{font-weight:600;font-size:14px;margin-bottom:4px}.toast-message{font-size:13px;line-height:1.4}.toast-close{background:none;border:none;cursor:pointer;font-size:18px;color:var(--text-secondary);padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:color .2s}.toast-close:hover{color:var(--text-primary)}.toast-info{border-left:4px solid var(--info-color)}.toast-info .toast-title{color:var(--info-color)}.toast-info .toast-message{color:var(--text-primary)}.toast-success{border-left:4px solid var(--success-color)}.toast-success .toast-title{color:var(--success-color)}.toast-success .toast-message{color:var(--text-primary)}.toast-warning{border-left:4px solid var(--warning-color)}.toast-warning .toast-title{color:var(--warning-color)}.toast-warning .toast-message{color:var(--text-primary)}.toast-error{border-left:4px solid var(--error-color)}.toast-error .toast-title{color:var(--error-color)}.toast-error .toast-message{color:var(--text-primary)}@keyframes slideIn{0%{transform:translate(400px);opacity:0}to{transform:translate(0);opacity:1}}@media (max-width: 600px){.toast-container{top:10px;right:10px;left:10px}.toast{min-width:auto;max-width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
429
500
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ToastContainerComponent, decorators: [{
|
|
430
501
|
type: Component,
|
|
431
502
|
args: [{ selector: 'ma-toast-container', standalone: true, imports: [CommonModule], template: `
|
|
@@ -445,18 +516,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
445
516
|
</button>
|
|
446
517
|
</div>
|
|
447
518
|
</div>
|
|
448
|
-
`, styles: [".toast-container{position:fixed;top:20px;right:20px;z-index:9999;pointer-events:none}.toast{display:flex;align-items:flex-start;gap:12px;padding:12px 16px;margin-bottom:12px;border-radius:4px;background-color
|
|
449
|
-
}], ctorParameters: function () { return [{ type: ToastService }]; }
|
|
519
|
+
`, styles: [":host{--info-color: #2196f3;--success-color: #4caf50;--warning-color: #ff9800;--error-color: #f44336;--text-primary: #333;--bg-primary: white;--shadow: rgba(0, 0, 0, .15);--text-secondary: #999}:host(.theme-dark){--info-color: #64b5f6;--success-color: #81c784;--warning-color: #ffb74d;--error-color: #ef5350;--text-primary: #e0e0e0;--bg-primary: #1e1e1e;--shadow: rgba(0, 0, 0, .3);--text-secondary: #888}.toast-container{position:fixed;top:20px;right:20px;z-index:9999;pointer-events:none}.toast{display:flex;align-items:flex-start;gap:12px;padding:12px 16px;margin-bottom:12px;border-radius:4px;background-color:var(--bg-primary);box-shadow:0 4px 12px var(--shadow);pointer-events:auto;min-width:300px;max-width:500px;animation:slideIn .3s ease-out}.toast-content{flex:1}.toast-title{font-weight:600;font-size:14px;margin-bottom:4px}.toast-message{font-size:13px;line-height:1.4}.toast-close{background:none;border:none;cursor:pointer;font-size:18px;color:var(--text-secondary);padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:color .2s}.toast-close:hover{color:var(--text-primary)}.toast-info{border-left:4px solid var(--info-color)}.toast-info .toast-title{color:var(--info-color)}.toast-info .toast-message{color:var(--text-primary)}.toast-success{border-left:4px solid var(--success-color)}.toast-success .toast-title{color:var(--success-color)}.toast-success .toast-message{color:var(--text-primary)}.toast-warning{border-left:4px solid var(--warning-color)}.toast-warning .toast-title{color:var(--warning-color)}.toast-warning .toast-message{color:var(--text-primary)}.toast-error{border-left:4px solid var(--error-color)}.toast-error .toast-title{color:var(--error-color)}.toast-error .toast-message{color:var(--text-primary)}@keyframes slideIn{0%{transform:translate(400px);opacity:0}to{transform:translate(0);opacity:1}}@media (max-width: 600px){.toast-container{top:10px;right:10px;left:10px}.toast{min-width:auto;max-width:100%}}\n"] }]
|
|
520
|
+
}], ctorParameters: function () { return [{ type: ToastService }, { type: ThemeService }]; }, propDecorators: { themeClass: [{
|
|
521
|
+
type: HostBinding,
|
|
522
|
+
args: ['class']
|
|
523
|
+
}] } });
|
|
450
524
|
|
|
451
525
|
class NotificationPanelComponent {
|
|
452
|
-
constructor(authService, toastService) {
|
|
526
|
+
constructor(authService, toastService, themeService) {
|
|
453
527
|
this.authService = authService;
|
|
454
528
|
this.toastService = toastService;
|
|
529
|
+
this.themeService = themeService;
|
|
455
530
|
this.isOpen = false;
|
|
456
531
|
this.notifications = [];
|
|
532
|
+
this.currentTheme = 'light';
|
|
457
533
|
this.destroy$ = new Subject();
|
|
458
534
|
}
|
|
535
|
+
get themeClass() {
|
|
536
|
+
return `theme-${this.currentTheme}`;
|
|
537
|
+
}
|
|
459
538
|
ngOnInit() {
|
|
539
|
+
this.themeService.currentTheme$
|
|
540
|
+
.pipe(takeUntil(this.destroy$))
|
|
541
|
+
.subscribe(theme => {
|
|
542
|
+
this.currentTheme = theme;
|
|
543
|
+
});
|
|
460
544
|
this.loadNotifications();
|
|
461
545
|
// Listen for new real-time notifications
|
|
462
546
|
this.authService.notifications$
|
|
@@ -533,8 +617,8 @@ class NotificationPanelComponent {
|
|
|
533
617
|
return date.toLocaleDateString();
|
|
534
618
|
}
|
|
535
619
|
}
|
|
536
|
-
NotificationPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NotificationPanelComponent, deps: [{ token: MesAuthService }, { token: ToastService }], target: i0.ɵɵFactoryTarget.Component });
|
|
537
|
-
NotificationPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NotificationPanelComponent, isStandalone: true, selector: "ma-notification-panel", ngImport: i0, template: `
|
|
620
|
+
NotificationPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NotificationPanelComponent, deps: [{ token: MesAuthService }, { token: ToastService }, { token: ThemeService }], target: i0.ɵɵFactoryTarget.Component });
|
|
621
|
+
NotificationPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NotificationPanelComponent, isStandalone: true, selector: "ma-notification-panel", host: { properties: { "class": "this.themeClass" } }, ngImport: i0, template: `
|
|
538
622
|
<div class="notification-panel" [class.open]="isOpen">
|
|
539
623
|
<!-- Header -->
|
|
540
624
|
<div class="panel-header">
|
|
@@ -583,7 +667,7 @@ NotificationPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0
|
|
|
583
667
|
</button>
|
|
584
668
|
</div>
|
|
585
669
|
</div>
|
|
586
|
-
`, isInline: true, styles: [".notification-panel{position:fixed;top:0;right:-350px;width:350px;height:100vh;background:
|
|
670
|
+
`, isInline: true, styles: [":host{--primary-color: #1976d2;--primary-hover: #1565c0;--error-color: #f44336;--text-primary: #333;--text-secondary: #666;--text-muted: #999;--bg-primary: white;--bg-secondary: #f5f5f5;--bg-tertiary: #fafafa;--bg-hover: #f5f5f5;--bg-unread: #e3f2fd;--border-color: #e0e0e0;--border-light: #f0f0f0;--shadow: rgba(0, 0, 0, .1)}:host(.theme-dark){--primary-color: #90caf9;--primary-hover: #64b5f6;--error-color: #ef5350;--text-primary: #e0e0e0;--text-secondary: #b0b0b0;--text-muted: #888;--bg-primary: #1e1e1e;--bg-secondary: #2d2d2d;--bg-tertiary: #252525;--bg-hover: #333;--bg-unread: rgba(144, 202, 249, .1);--border-color: #404040;--border-light: #333;--shadow: rgba(0, 0, 0, .3)}.notification-panel{position:fixed;top:0;right:-350px;width:350px;height:100vh;background:var(--bg-primary);box-shadow:-2px 0 8px var(--shadow);display:flex;flex-direction:column;z-index:1000;transition:right .3s ease}.notification-panel.open{right:0}.panel-header{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid var(--border-color);background-color:var(--bg-secondary)}.panel-header h3{margin:0;font-size:18px;color:var(--text-primary)}.close-btn{background:none;border:none;font-size:20px;cursor:pointer;color:var(--text-secondary);padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;transition:color .2s}.close-btn:hover{color:var(--text-primary)}.notifications-list{flex:1;overflow-y:auto}.notification-item{display:flex;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border-light);cursor:pointer;background-color:var(--bg-tertiary);transition:background-color .2s}.notification-item:hover{background-color:var(--bg-hover)}.notification-item.unread{background-color:var(--bg-unread)}.notification-content{flex:1;min-width:0}.notification-title{font-weight:600;color:var(--text-primary);font-size:14px;margin-bottom:4px}.notification-message{color:var(--text-secondary);font-size:13px;line-height:1.4;margin-bottom:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.notification-meta{display:flex;justify-content:space-between;font-size:12px;color:var(--text-muted)}.app-name{font-weight:500;color:var(--primary-color)}.delete-btn{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:14px;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:color .2s}.delete-btn:hover{color:var(--error-color)}.empty-state{display:flex;align-items:center;justify-content:center;height:100%;color:var(--text-muted);font-size:14px}.panel-footer{padding:12px 16px;border-top:1px solid var(--border-color);background-color:var(--bg-secondary)}.action-btn{width:100%;padding:8px;background-color:var(--primary-color);color:#fff;border:none;border-radius:4px;cursor:pointer;font-weight:500;transition:background-color .2s}.action-btn:hover{background-color:var(--primary-hover)}@media (max-width: 600px){.notification-panel{width:100%;right:-100%}}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
587
671
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NotificationPanelComponent, decorators: [{
|
|
588
672
|
type: Component,
|
|
589
673
|
args: [{ selector: 'ma-notification-panel', standalone: true, imports: [NgIf, NgFor], template: `
|
|
@@ -635,8 +719,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
635
719
|
</button>
|
|
636
720
|
</div>
|
|
637
721
|
</div>
|
|
638
|
-
`, styles: [".notification-panel{position:fixed;top:0;right:-350px;width:350px;height:100vh;background:
|
|
639
|
-
}], ctorParameters: function () { return [{ type: MesAuthService }, { type: ToastService }]; }
|
|
722
|
+
`, styles: [":host{--primary-color: #1976d2;--primary-hover: #1565c0;--error-color: #f44336;--text-primary: #333;--text-secondary: #666;--text-muted: #999;--bg-primary: white;--bg-secondary: #f5f5f5;--bg-tertiary: #fafafa;--bg-hover: #f5f5f5;--bg-unread: #e3f2fd;--border-color: #e0e0e0;--border-light: #f0f0f0;--shadow: rgba(0, 0, 0, .1)}:host(.theme-dark){--primary-color: #90caf9;--primary-hover: #64b5f6;--error-color: #ef5350;--text-primary: #e0e0e0;--text-secondary: #b0b0b0;--text-muted: #888;--bg-primary: #1e1e1e;--bg-secondary: #2d2d2d;--bg-tertiary: #252525;--bg-hover: #333;--bg-unread: rgba(144, 202, 249, .1);--border-color: #404040;--border-light: #333;--shadow: rgba(0, 0, 0, .3)}.notification-panel{position:fixed;top:0;right:-350px;width:350px;height:100vh;background:var(--bg-primary);box-shadow:-2px 0 8px var(--shadow);display:flex;flex-direction:column;z-index:1000;transition:right .3s ease}.notification-panel.open{right:0}.panel-header{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid var(--border-color);background-color:var(--bg-secondary)}.panel-header h3{margin:0;font-size:18px;color:var(--text-primary)}.close-btn{background:none;border:none;font-size:20px;cursor:pointer;color:var(--text-secondary);padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;transition:color .2s}.close-btn:hover{color:var(--text-primary)}.notifications-list{flex:1;overflow-y:auto}.notification-item{display:flex;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border-light);cursor:pointer;background-color:var(--bg-tertiary);transition:background-color .2s}.notification-item:hover{background-color:var(--bg-hover)}.notification-item.unread{background-color:var(--bg-unread)}.notification-content{flex:1;min-width:0}.notification-title{font-weight:600;color:var(--text-primary);font-size:14px;margin-bottom:4px}.notification-message{color:var(--text-secondary);font-size:13px;line-height:1.4;margin-bottom:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.notification-meta{display:flex;justify-content:space-between;font-size:12px;color:var(--text-muted)}.app-name{font-weight:500;color:var(--primary-color)}.delete-btn{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:14px;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:color .2s}.delete-btn:hover{color:var(--error-color)}.empty-state{display:flex;align-items:center;justify-content:center;height:100%;color:var(--text-muted);font-size:14px}.panel-footer{padding:12px 16px;border-top:1px solid var(--border-color);background-color:var(--bg-secondary)}.action-btn{width:100%;padding:8px;background-color:var(--primary-color);color:#fff;border:none;border-radius:4px;cursor:pointer;font-weight:500;transition:background-color .2s}.action-btn:hover{background-color:var(--primary-hover)}@media (max-width: 600px){.notification-panel{width:100%;right:-100%}}\n"] }]
|
|
723
|
+
}], ctorParameters: function () { return [{ type: MesAuthService }, { type: ToastService }, { type: ThemeService }]; }, propDecorators: { themeClass: [{
|
|
724
|
+
type: HostBinding,
|
|
725
|
+
args: ['class']
|
|
726
|
+
}] } });
|
|
640
727
|
|
|
641
728
|
class MaUserComponent {
|
|
642
729
|
}
|
|
@@ -660,13 +747,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
660
747
|
}] });
|
|
661
748
|
|
|
662
749
|
class NotificationBadgeComponent {
|
|
663
|
-
constructor(authService) {
|
|
750
|
+
constructor(authService, themeService) {
|
|
664
751
|
this.authService = authService;
|
|
752
|
+
this.themeService = themeService;
|
|
665
753
|
this.notificationClick = new EventEmitter();
|
|
666
754
|
this.unreadCount = 0;
|
|
755
|
+
this.currentTheme = 'light';
|
|
667
756
|
this.destroy$ = new Subject();
|
|
668
757
|
}
|
|
758
|
+
get themeClass() {
|
|
759
|
+
return `theme-${this.currentTheme}`;
|
|
760
|
+
}
|
|
669
761
|
ngOnInit() {
|
|
762
|
+
this.themeService.currentTheme$
|
|
763
|
+
.pipe(takeUntil(this.destroy$))
|
|
764
|
+
.subscribe(theme => {
|
|
765
|
+
this.currentTheme = theme;
|
|
766
|
+
});
|
|
670
767
|
this.loadUnreadCount();
|
|
671
768
|
// Listen for new notifications
|
|
672
769
|
this.authService.notifications$
|
|
@@ -691,13 +788,13 @@ class NotificationBadgeComponent {
|
|
|
691
788
|
this.notificationClick.emit();
|
|
692
789
|
}
|
|
693
790
|
}
|
|
694
|
-
NotificationBadgeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NotificationBadgeComponent, deps: [{ token: MesAuthService }], target: i0.ɵɵFactoryTarget.Component });
|
|
695
|
-
NotificationBadgeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NotificationBadgeComponent, isStandalone: true, selector: "ma-notification-badge", outputs: { notificationClick: "notificationClick" }, ngImport: i0, template: `
|
|
791
|
+
NotificationBadgeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NotificationBadgeComponent, deps: [{ token: MesAuthService }, { token: ThemeService }], target: i0.ɵɵFactoryTarget.Component });
|
|
792
|
+
NotificationBadgeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NotificationBadgeComponent, isStandalone: true, selector: "ma-notification-badge", outputs: { notificationClick: "notificationClick" }, host: { properties: { "class": "this.themeClass" } }, ngImport: i0, template: `
|
|
696
793
|
<button class="notification-btn" (click)="onNotificationClick()" title="Notifications">
|
|
697
794
|
<span class="icon">🔔</span>
|
|
698
795
|
<span class="badge" *ngIf="unreadCount > 0">{{ unreadCount }}</span>
|
|
699
796
|
</button>
|
|
700
|
-
`, isInline: true, styles: [".notification-btn{position:relative;background:none;border:none;font-size:24px;cursor:pointer;padding:8px;transition:opacity .2s}.notification-btn:hover{opacity:.7}.icon{display:inline-block}.badge{position:absolute;top:0;right:0;background-color
|
|
797
|
+
`, isInline: true, styles: [":host{--error-color: #f44336}:host(.theme-dark){--error-color: #ef5350}.notification-btn{position:relative;background:none;border:none;font-size:24px;cursor:pointer;padding:8px;transition:opacity .2s}.notification-btn:hover{opacity:.7}.icon{display:inline-block}.badge{position:absolute;top:0;right:0;background-color:var(--error-color);color:#fff;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
701
798
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NotificationBadgeComponent, decorators: [{
|
|
702
799
|
type: Component,
|
|
703
800
|
args: [{ selector: 'ma-notification-badge', standalone: true, imports: [NgIf], template: `
|
|
@@ -705,14 +802,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
705
802
|
<span class="icon">🔔</span>
|
|
706
803
|
<span class="badge" *ngIf="unreadCount > 0">{{ unreadCount }}</span>
|
|
707
804
|
</button>
|
|
708
|
-
`, styles: [".notification-btn{position:relative;background:none;border:none;font-size:24px;cursor:pointer;padding:8px;transition:opacity .2s}.notification-btn:hover{opacity:.7}.icon{display:inline-block}.badge{position:absolute;top:0;right:0;background-color
|
|
709
|
-
}], ctorParameters: function () { return [{ type: MesAuthService }]; }, propDecorators: { notificationClick: [{
|
|
805
|
+
`, styles: [":host{--error-color: #f44336}:host(.theme-dark){--error-color: #ef5350}.notification-btn{position:relative;background:none;border:none;font-size:24px;cursor:pointer;padding:8px;transition:opacity .2s}.notification-btn:hover{opacity:.7}.icon{display:inline-block}.badge{position:absolute;top:0;right:0;background-color:var(--error-color);color:#fff;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}\n"] }]
|
|
806
|
+
}], ctorParameters: function () { return [{ type: MesAuthService }, { type: ThemeService }]; }, propDecorators: { notificationClick: [{
|
|
710
807
|
type: Output
|
|
808
|
+
}], themeClass: [{
|
|
809
|
+
type: HostBinding,
|
|
810
|
+
args: ['class']
|
|
711
811
|
}] } });
|
|
712
812
|
|
|
713
813
|
/**
|
|
714
814
|
* Generated bundle index. Do not edit.
|
|
715
815
|
*/
|
|
716
816
|
|
|
717
|
-
export { MaUserComponent, MesAuthInterceptor, MesAuthModule, MesAuthService, NotificationBadgeComponent, NotificationPanelComponent, NotificationType, ToastContainerComponent, UserProfileComponent };
|
|
817
|
+
export { MaUserComponent, MesAuthInterceptor, MesAuthModule, MesAuthService, NotificationBadgeComponent, NotificationPanelComponent, NotificationType, ThemeService, ToastContainerComponent, UserProfileComponent };
|
|
718
818
|
//# sourceMappingURL=mesauth-angular.mjs.map
|