mesauth-angular 0.1.19 → 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/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 -8
- package/dist/fesm2015/mesauth-angular.mjs +122 -28
- package/dist/fesm2015/mesauth-angular.mjs.map +1 -1
- package/dist/fesm2020/mesauth-angular.mjs +122 -28
- 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
5
|
import { tap, catchError, takeUntil } from 'rxjs/operators';
|
|
6
6
|
import * as i1 from '@angular/common/http';
|
|
7
7
|
import { HTTP_INTERCEPTORS } from '@angular/common/http';
|
|
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;
|
|
@@ -161,16 +161,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
161
161
|
}]
|
|
162
162
|
}] });
|
|
163
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
|
+
|
|
164
199
|
class UserProfileComponent {
|
|
165
|
-
constructor(authService, router) {
|
|
200
|
+
constructor(authService, router, themeService) {
|
|
166
201
|
this.authService = authService;
|
|
167
202
|
this.router = router;
|
|
203
|
+
this.themeService = themeService;
|
|
168
204
|
this.notificationClick = new EventEmitter();
|
|
169
205
|
this.currentUser = null;
|
|
206
|
+
this.currentTheme = 'light';
|
|
170
207
|
this.unreadCount = 0;
|
|
171
208
|
this.dropdownOpen = false;
|
|
172
209
|
this.destroy$ = new Subject();
|
|
173
210
|
}
|
|
211
|
+
get themeClass() {
|
|
212
|
+
return `theme-${this.currentTheme}`;
|
|
213
|
+
}
|
|
174
214
|
ngOnInit() {
|
|
175
215
|
console.log('UserProfileComponent: Service injected?', !!this.authService);
|
|
176
216
|
this.authService.currentUser$
|
|
@@ -179,6 +219,11 @@ class UserProfileComponent {
|
|
|
179
219
|
console.log('UserProfileComponent: currentUser', user);
|
|
180
220
|
this.currentUser = user;
|
|
181
221
|
});
|
|
222
|
+
this.themeService.currentTheme$
|
|
223
|
+
.pipe(takeUntil(this.destroy$))
|
|
224
|
+
.subscribe(theme => {
|
|
225
|
+
this.currentTheme = theme;
|
|
226
|
+
});
|
|
182
227
|
this.loadUnreadCount();
|
|
183
228
|
// Listen for new notifications
|
|
184
229
|
this.authService.notifications$
|
|
@@ -259,8 +304,8 @@ class UserProfileComponent {
|
|
|
259
304
|
this.notificationClick.emit();
|
|
260
305
|
}
|
|
261
306
|
}
|
|
262
|
-
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 });
|
|
263
|
-
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: `
|
|
264
309
|
<div class="user-profile-container">
|
|
265
310
|
<!-- Not logged in -->
|
|
266
311
|
<ng-container *ngIf="!currentUser">
|
|
@@ -305,7 +350,7 @@ UserProfileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
|
|
|
305
350
|
</div>
|
|
306
351
|
</ng-container>
|
|
307
352
|
</div>
|
|
308
|
-
`, 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"] }] });
|
|
309
354
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: UserProfileComponent, decorators: [{
|
|
310
355
|
type: Component,
|
|
311
356
|
args: [{ selector: 'ma-user-profile', standalone: true, imports: [NgIf], template: `
|
|
@@ -353,9 +398,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
353
398
|
</div>
|
|
354
399
|
</ng-container>
|
|
355
400
|
</div>
|
|
356
|
-
`, styles: [".user-profile-container{display:flex;align-items:center;gap:16px;padding:0 16px}.login-btn{padding:8px 16px;background-color
|
|
357
|
-
}], 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: [{
|
|
358
403
|
type: Output
|
|
404
|
+
}], themeClass: [{
|
|
405
|
+
type: HostBinding,
|
|
406
|
+
args: ['class']
|
|
359
407
|
}], onDocumentClick: [{
|
|
360
408
|
type: HostListener,
|
|
361
409
|
args: ['document:click', ['$event']]
|
|
@@ -400,21 +448,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
400
448
|
}] });
|
|
401
449
|
|
|
402
450
|
class ToastContainerComponent {
|
|
403
|
-
constructor(toastService) {
|
|
451
|
+
constructor(toastService, themeService) {
|
|
404
452
|
this.toastService = toastService;
|
|
453
|
+
this.themeService = themeService;
|
|
405
454
|
this.toasts = [];
|
|
455
|
+
this.currentTheme = 'light';
|
|
456
|
+
this.destroy$ = new Subject();
|
|
457
|
+
}
|
|
458
|
+
get themeClass() {
|
|
459
|
+
return `theme-${this.currentTheme}`;
|
|
406
460
|
}
|
|
407
461
|
ngOnInit() {
|
|
408
|
-
this.toastService.toasts
|
|
462
|
+
this.toastService.toasts
|
|
463
|
+
.pipe(takeUntil(this.destroy$))
|
|
464
|
+
.subscribe(toasts => {
|
|
409
465
|
this.toasts = toasts;
|
|
410
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();
|
|
411
476
|
}
|
|
412
477
|
close(id) {
|
|
413
478
|
this.toastService.remove(id);
|
|
414
479
|
}
|
|
415
480
|
}
|
|
416
|
-
ToastContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ToastContainerComponent, deps: [{ token: ToastService }], target: i0.ɵɵFactoryTarget.Component });
|
|
417
|
-
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: `
|
|
418
483
|
<div class="toast-container">
|
|
419
484
|
<div
|
|
420
485
|
*ngFor="let toast of toasts"
|
|
@@ -431,7 +496,7 @@ ToastContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
|
|
|
431
496
|
</button>
|
|
432
497
|
</div>
|
|
433
498
|
</div>
|
|
434
|
-
`, 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"] }] });
|
|
435
500
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ToastContainerComponent, decorators: [{
|
|
436
501
|
type: Component,
|
|
437
502
|
args: [{ selector: 'ma-toast-container', standalone: true, imports: [CommonModule], template: `
|
|
@@ -451,18 +516,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
451
516
|
</button>
|
|
452
517
|
</div>
|
|
453
518
|
</div>
|
|
454
|
-
`, 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
|
|
455
|
-
}], 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
|
+
}] } });
|
|
456
524
|
|
|
457
525
|
class NotificationPanelComponent {
|
|
458
|
-
constructor(authService, toastService) {
|
|
526
|
+
constructor(authService, toastService, themeService) {
|
|
459
527
|
this.authService = authService;
|
|
460
528
|
this.toastService = toastService;
|
|
529
|
+
this.themeService = themeService;
|
|
461
530
|
this.isOpen = false;
|
|
462
531
|
this.notifications = [];
|
|
532
|
+
this.currentTheme = 'light';
|
|
463
533
|
this.destroy$ = new Subject();
|
|
464
534
|
}
|
|
535
|
+
get themeClass() {
|
|
536
|
+
return `theme-${this.currentTheme}`;
|
|
537
|
+
}
|
|
465
538
|
ngOnInit() {
|
|
539
|
+
this.themeService.currentTheme$
|
|
540
|
+
.pipe(takeUntil(this.destroy$))
|
|
541
|
+
.subscribe(theme => {
|
|
542
|
+
this.currentTheme = theme;
|
|
543
|
+
});
|
|
466
544
|
this.loadNotifications();
|
|
467
545
|
// Listen for new real-time notifications
|
|
468
546
|
this.authService.notifications$
|
|
@@ -539,8 +617,8 @@ class NotificationPanelComponent {
|
|
|
539
617
|
return date.toLocaleDateString();
|
|
540
618
|
}
|
|
541
619
|
}
|
|
542
|
-
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 });
|
|
543
|
-
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: `
|
|
544
622
|
<div class="notification-panel" [class.open]="isOpen">
|
|
545
623
|
<!-- Header -->
|
|
546
624
|
<div class="panel-header">
|
|
@@ -589,7 +667,7 @@ NotificationPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0
|
|
|
589
667
|
</button>
|
|
590
668
|
</div>
|
|
591
669
|
</div>
|
|
592
|
-
`, 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"] }] });
|
|
593
671
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NotificationPanelComponent, decorators: [{
|
|
594
672
|
type: Component,
|
|
595
673
|
args: [{ selector: 'ma-notification-panel', standalone: true, imports: [NgIf, NgFor], template: `
|
|
@@ -641,8 +719,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
641
719
|
</button>
|
|
642
720
|
</div>
|
|
643
721
|
</div>
|
|
644
|
-
`, styles: [".notification-panel{position:fixed;top:0;right:-350px;width:350px;height:100vh;background:
|
|
645
|
-
}], 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
|
+
}] } });
|
|
646
727
|
|
|
647
728
|
class MaUserComponent {
|
|
648
729
|
}
|
|
@@ -666,13 +747,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
666
747
|
}] });
|
|
667
748
|
|
|
668
749
|
class NotificationBadgeComponent {
|
|
669
|
-
constructor(authService) {
|
|
750
|
+
constructor(authService, themeService) {
|
|
670
751
|
this.authService = authService;
|
|
752
|
+
this.themeService = themeService;
|
|
671
753
|
this.notificationClick = new EventEmitter();
|
|
672
754
|
this.unreadCount = 0;
|
|
755
|
+
this.currentTheme = 'light';
|
|
673
756
|
this.destroy$ = new Subject();
|
|
674
757
|
}
|
|
758
|
+
get themeClass() {
|
|
759
|
+
return `theme-${this.currentTheme}`;
|
|
760
|
+
}
|
|
675
761
|
ngOnInit() {
|
|
762
|
+
this.themeService.currentTheme$
|
|
763
|
+
.pipe(takeUntil(this.destroy$))
|
|
764
|
+
.subscribe(theme => {
|
|
765
|
+
this.currentTheme = theme;
|
|
766
|
+
});
|
|
676
767
|
this.loadUnreadCount();
|
|
677
768
|
// Listen for new notifications
|
|
678
769
|
this.authService.notifications$
|
|
@@ -697,13 +788,13 @@ class NotificationBadgeComponent {
|
|
|
697
788
|
this.notificationClick.emit();
|
|
698
789
|
}
|
|
699
790
|
}
|
|
700
|
-
NotificationBadgeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NotificationBadgeComponent, deps: [{ token: MesAuthService }], target: i0.ɵɵFactoryTarget.Component });
|
|
701
|
-
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: `
|
|
702
793
|
<button class="notification-btn" (click)="onNotificationClick()" title="Notifications">
|
|
703
794
|
<span class="icon">🔔</span>
|
|
704
795
|
<span class="badge" *ngIf="unreadCount > 0">{{ unreadCount }}</span>
|
|
705
796
|
</button>
|
|
706
|
-
`, 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"] }] });
|
|
707
798
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NotificationBadgeComponent, decorators: [{
|
|
708
799
|
type: Component,
|
|
709
800
|
args: [{ selector: 'ma-notification-badge', standalone: true, imports: [NgIf], template: `
|
|
@@ -711,14 +802,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
711
802
|
<span class="icon">🔔</span>
|
|
712
803
|
<span class="badge" *ngIf="unreadCount > 0">{{ unreadCount }}</span>
|
|
713
804
|
</button>
|
|
714
|
-
`, 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
|
|
715
|
-
}], 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: [{
|
|
716
807
|
type: Output
|
|
808
|
+
}], themeClass: [{
|
|
809
|
+
type: HostBinding,
|
|
810
|
+
args: ['class']
|
|
717
811
|
}] } });
|
|
718
812
|
|
|
719
813
|
/**
|
|
720
814
|
* Generated bundle index. Do not edit.
|
|
721
815
|
*/
|
|
722
816
|
|
|
723
|
-
export { MaUserComponent, MesAuthInterceptor, MesAuthModule, MesAuthService, NotificationBadgeComponent, NotificationPanelComponent, NotificationType, ToastContainerComponent, UserProfileComponent };
|
|
817
|
+
export { MaUserComponent, MesAuthInterceptor, MesAuthModule, MesAuthService, NotificationBadgeComponent, NotificationPanelComponent, NotificationType, ThemeService, ToastContainerComponent, UserProfileComponent };
|
|
724
818
|
//# sourceMappingURL=mesauth-angular.mjs.map
|