mesauth-angular 1.1.6 → 1.1.7

package/dist/fesm2022/mesauth-angular.mjs

@@ -0,0 +1,1237 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, makeEnvironmentProviders, provideAppInitializer, inject, Injectable, NgModule, EventEmitter, signal, HostListener, HostBinding, Output, Component, ViewChild } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { HubConnectionBuilder, LogLevel } from '@microsoft/signalr';
+import { BehaviorSubject, Subject, throwError } from 'rxjs';
+import { filter, debounceTime, tap, catchError, takeUntil } from 'rxjs/operators';
+import * as i2 from '@angular/router';
+import { Router, NavigationEnd } from '@angular/router';
+import * as i3 from '@angular/common';
+import { NgIf, CommonModule, NgFor } from '@angular/common';
+
+/** Injection token for MesAuth configuration */
+const MES_AUTH_CONFIG = new InjectionToken('MES_AUTH_CONFIG');
+/**
+ * Provides MesAuth with configuration.
+ * This is the recommended way to set up mesauth-angular in standalone apps.
+ *
+ * @example
+ * ```typescript
+ * // app.config.ts
+ * export const appConfig: ApplicationConfig = {
+ *   providers: [
+ *     provideHttpClient(withInterceptors([mesAuthInterceptor])),
+ *     provideMesAuth({
+ *       apiBaseUrl: 'https://auth.example.com',
+ *       userBaseUrl: 'https://app.example.com'
+ *     })
+ *   ]
+ * };
+ * ```
+ */
+function provideMesAuth(config) {
+    return makeEnvironmentProviders([
+        { provide: MES_AUTH_CONFIG, useValue: config },
+        MesAuthService,
+        provideAppInitializer(() => {
+            const mesAuthService = inject(MesAuthService);
+            const httpClient = inject(HttpClient);
+            const router = inject(Router);
+            mesAuthService.init(config, httpClient, router);
+        })
+    ]);
+}
+var NotificationType;
+(function (NotificationType) {
+    NotificationType["Info"] = "Info";
+    NotificationType["Warning"] = "Warning";
+    NotificationType["Error"] = "Error";
+    NotificationType["Success"] = "Success";
+})(NotificationType || (NotificationType = {}));
+class MesAuthService {
+    hubConnection = null;
+    _currentUser = new BehaviorSubject(null);
+    currentUser$ = this._currentUser.asObservable();
+    _notifications = new Subject();
+    notifications$ = this._notifications.asObservable();
+    apiBase = '';
+    config = null;
+    http;
+    router;
+    constructor() {
+        // Empty constructor - all dependencies passed to init()
+    }
+    isProtectedRoute(url) {
+        // Consider routes protected if they don't include auth-related paths
+        return !url.includes('/login') && !url.includes('/auth') && !url.includes('/signin') && !url.includes('/logout');
+    }
+    init(config, httpClient, router) {
+        this.config = config;
+        this.http = httpClient;
+        this.router = router;
+        this.apiBase = config.apiBaseUrl.replace(/\/$/, '');
+        // Listen for route changes - only refresh user data if needed for SPA navigation
+        // This helps maintain authentication state in single-page applications
+        if (this.router) {
+            this.router.events
+                .pipe(filter(event => event instanceof NavigationEnd), debounceTime(1000) // Longer debounce to avoid interfering with login flow
+            )
+                .subscribe((event) => {
+                // Only refresh if user is logged in and navigating to protected routes
+                // Avoid refreshing during login/logout flows
+                if (this._currentUser.value && this.isProtectedRoute(event.url)) {
+                    // Small delay to ensure any login/logout operations complete
+                    setTimeout(() => {
+                        if (this._currentUser.value) {
+                            this.refreshUser();
+                        }
+                    }, 100);
+                }
+            });
+        }
+        this.fetchCurrentUser();
+    }
+    getConfig() {
+        return this.config;
+    }
+    fetchCurrentUser() {
+        if (!this.apiBase)
+            return;
+        const url = `${this.apiBase}/auth/me`;
+        this.http.get(url, { withCredentials: this.config?.withCredentials ?? true }).subscribe({
+            next: (u) => {
+                this._currentUser.next(u);
+                if (u && this.config) {
+                    this.startConnection(this.config);
+                    // Only fetch notifications after confirming user is logged in
+                    this.fetchInitialNotifications();
+                }
+            },
+            error: (err) => {
+                // Silently handle auth errors (401/403) - user is not logged in
+                if (err.status === 401 || err.status === 403) {
+                    this._currentUser.next(null);
+                }
+            }
+        });
+    }
+    fetchInitialNotifications() {
+        // Skip if no user is logged in or apiBase not set
+        if (!this.apiBase || !this._currentUser.value)
+            return;
+        this.http.get(`${this.apiBase}/notif/me`, { withCredentials: this.config?.withCredentials ?? true }).subscribe({
+            next: (notifications) => {
+                if (Array.isArray(notifications?.items)) {
+                    notifications.items.forEach((n) => this._notifications.next(n));
+                }
+            },
+            error: (err) => {
+                // Silently handle auth errors (401/403) - user is not logged in
+                // No need to emit anything
+            }
+        });
+    }
+    getUnreadCount() {
+        return this.http.get(`${this.apiBase}/notif/me/unread-count`, { withCredentials: this.config?.withCredentials ?? true });
+    }
+    getNotifications(page = 1, pageSize = 20, includeRead = false, type) {
+        let url = `${this.apiBase}/notif/me?page=${page}&pageSize=${pageSize}&includeRead=${includeRead}`;
+        if (type) {
+            url += `&type=${type}`;
+        }
+        return this.http.get(url, { withCredentials: this.config?.withCredentials ?? true });
+    }
+    markAsRead(notificationId) {
+        return this.http.patch(`${this.apiBase}/notif/${notificationId}/read`, {}, { withCredentials: this.config?.withCredentials ?? true });
+    }
+    markAllAsRead() {
+        return this.http.patch(`${this.apiBase}/notif/me/read-all`, {}, { withCredentials: this.config?.withCredentials ?? true });
+    }
+    deleteNotification(notificationId) {
+        return this.http.delete(`${this.apiBase}/notif/${notificationId}`, { withCredentials: this.config?.withCredentials ?? true });
+    }
+    /**
+     * Get frontend routes assigned to the current user
+     * Returns routes grouped by application
+     */
+    getFrontEndRoutes() {
+        if (!this.apiBase)
+            throw new Error('MesAuth not initialized');
+        return this.http.get(`${this.apiBase}/fe-routes/me`, { withCredentials: this.config?.withCredentials ?? true });
+    }
+    /**
+     * Get master routes for a specific application
+     * @param appId - The application ID
+     */
+    getRouteMasters(appId) {
+        if (!this.apiBase)
+            throw new Error('MesAuth not initialized');
+        return this.http.get(`${this.apiBase}/fe-routes/masters/${appId}`, { withCredentials: this.config?.withCredentials ?? true });
+    }
+    /**
+     * Register/sync frontend routes for an application
+     * This is typically called on app startup to sync routes from the frontend app
+     * @param appId - The application ID (passed via X-App-Id header)
+     * @param routes - Array of route definitions
+     */
+    registerFrontEndRoutes(appId, routes) {
+        if (!this.apiBase)
+            throw new Error('MesAuth not initialized');
+        const headers = { 'X-App-Id': appId };
+        return this.http.post(`${this.apiBase}/fe-routes/register`, routes, {
+            headers,
+            withCredentials: this.config?.withCredentials ?? true
+        });
+    }
+    /**
+     * Create a new route master
+     * @param appId - The application ID
+     * @param route - Route details
+     */
+    createRouteMaster(appId, route) {
+        if (!this.apiBase)
+            throw new Error('MesAuth not initialized');
+        return this.http.post(`${this.apiBase}/fe-routes/masters`, {
+            appId,
+            ...route
+        }, { withCredentials: this.config?.withCredentials ?? true });
+    }
+    /**
+     * Update an existing route master
+     * @param routeId - The route master ID
+     * @param route - Updated route details
+     */
+    updateRouteMaster(routeId, route) {
+        if (!this.apiBase)
+            throw new Error('MesAuth not initialized');
+        return this.http.put(`${this.apiBase}/fe-routes/masters/${routeId}`, route, {
+            withCredentials: this.config?.withCredentials ?? true
+        });
+    }
+    /**
+     * Delete a route master
+     * @param routeId - The route master ID
+     */
+    deleteRouteMaster(routeId) {
+        if (!this.apiBase)
+            throw new Error('MesAuth not initialized');
+        return this.http.delete(`${this.apiBase}/fe-routes/masters/${routeId}`, {
+            withCredentials: this.config?.withCredentials ?? true
+        });
+    }
+    /**
+     * Assign a route to a role
+     * @param routeMasterId - The route master ID
+     * @param roleId - The role ID (GUID)
+     */
+    assignRouteToRole(routeMasterId, roleId) {
+        if (!this.apiBase)
+            throw new Error('MesAuth not initialized');
+        return this.http.post(`${this.apiBase}/fe-routes/mappings`, {
+            routeMasterId,
+            roleId
+        }, { withCredentials: this.config?.withCredentials ?? true });
+    }
+    /**
+     * Remove a route assignment from a role
+     * @param mappingId - The mapping ID
+     */
+    removeRouteFromRole(mappingId) {
+        if (!this.apiBase)
+            throw new Error('MesAuth not initialized');
+        return this.http.delete(`${this.apiBase}/fe-routes/mappings/${mappingId}`, {
+            withCredentials: this.config?.withCredentials ?? true
+        });
+    }
+    /**
+     * Get route-to-role mappings for a specific role
+     * @param roleId - The role ID (GUID)
+     */
+    getRouteMappingsByRole(roleId) {
+        if (!this.apiBase)
+            throw new Error('MesAuth not initialized');
+        return this.http.get(`${this.apiBase}/fe-routes/mappings?roleId=${roleId}`, {
+            withCredentials: this.config?.withCredentials ?? true
+        });
+    }
+    startConnection(config) {
+        if (this.hubConnection)
+            return;
+        const signalrUrl = config.apiBaseUrl.replace(/\/$/, '') + '/hub/notification';
+        const builder = new HubConnectionBuilder()
+            .withUrl(signalrUrl, { withCredentials: config.withCredentials ?? true })
+            .withAutomaticReconnect()
+            .configureLogging(LogLevel.Warning);
+        this.hubConnection = builder.build();
+        this.hubConnection.on('ReceiveNotification', (n) => {
+            this._notifications.next(n);
+        });
+        this.hubConnection.start().then(() => { }).catch((err) => { });
+        this.hubConnection.onclose(() => { });
+        this.hubConnection.onreconnecting(() => { });
+        this.hubConnection.onreconnected(() => { });
+    }
+    stop() {
+        if (!this.hubConnection)
+            return;
+        this.hubConnection.stop().catch(() => { });
+        this.hubConnection = null;
+    }
+    logout() {
+        const url = `${this.apiBase}/auth/logout`;
+        return this.http.post(url, {}, { withCredentials: this.config?.withCredentials ?? true }).pipe(tap(() => {
+            this._currentUser.next(null);
+            this.stop();
+        }));
+    }
+    get currentUser() {
+        return this._currentUser.value;
+    }
+    get isAuthenticated() {
+        return this._currentUser.value !== null;
+    }
+    refreshUser() {
+        this.fetchCurrentUser();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MesAuthService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MesAuthService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MesAuthService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+// Track if we're currently redirecting to prevent loopback
+let isRedirecting = false;
+/**
+ * Functional HTTP interceptor for handling 401/403 auth errors.
+ * Redirects to login page on 401, and to 403 page on 403.
+ * Includes loopback prevention to avoid infinite redirects.
+ */
+const mesAuthInterceptor = (req, next) => {
+    const authService = inject(MesAuthService);
+    const router = inject(Router);
+    return next(req).pipe(catchError((error) => {
+        const status = error.status;
+        // Check if we should handle this error and prevent loopback
+        if ((status === 401 || status === 403) && !isRedirecting) {
+            const config = authService.getConfig();
+            const baseUrl = config?.userBaseUrl || '';
+            // Use router URL for internal navigation (cleaner URLs)
+            // Falls back to window.location for full URL if needed
+            const currentUrl = router.url + (window.location.hash || '');
+            const returnUrl = encodeURIComponent(currentUrl);
+            // Avoid loops if already on auth/unauth pages
+            const isLoginPage = currentUrl.includes('/login');
+            const is403Page = currentUrl.includes('/403');
+            const isAuthPage = currentUrl.includes('/auth');
+            const isMeAuthPage = req.url.includes('/auth/me');
+            // Check if user is authenticated
+            const isAuthenticated = authService.isAuthenticated;
+            if (status === 401 && !isLoginPage && !isAuthPage && !isAuthenticated && !isMeAuthPage) {
+                isRedirecting = true;
+                // Reset flag after a delay to allow future redirects after user returns
+                setTimeout(() => { isRedirecting = false; }, 5000);
+                window.location.href = `${baseUrl}/login?returnUrl=${returnUrl}`;
+            }
+            else if (status === 403 && !is403Page) {
+                isRedirecting = true;
+                setTimeout(() => { isRedirecting = false; }, 5000);
+                let redirectUrl = `${baseUrl}/403?returnUrl=${returnUrl}`;
+                if (error.error && error.error.required) {
+                    redirectUrl += `&required=${encodeURIComponent(error.error.required)}`;
+                }
+                window.location.href = redirectUrl;
+            }
+        }
+        return throwError(() => error);
+    }));
+};
+
+class MesAuthModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MesAuthModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: MesAuthModule });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MesAuthModule, providers: [
+            MesAuthService
+        ] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MesAuthModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    providers: [
+                        MesAuthService
+                    ]
+                }]
+        }] });
+
+class ThemeService {
+    _currentTheme = new BehaviorSubject('light');
+    currentTheme$ = this._currentTheme.asObservable();
+    observer = null;
+    constructor() {
+        this.detectTheme();
+        this.startWatching();
+    }
+    ngOnDestroy() {
+        this.stopWatching();
+    }
+    detectTheme() {
+        const html = document.documentElement;
+        const isDark = html.classList.contains('dark') ||
+            html.getAttribute('data-theme') === 'dark' ||
+            html.getAttribute('theme') === 'dark' ||
+            html.getAttribute('data-coreui-theme') === 'dark';
+        this._currentTheme.next(isDark ? 'dark' : 'light');
+    }
+    startWatching() {
+        if (typeof MutationObserver === 'undefined') {
+            // Fallback for older browsers - check periodically
+            setInterval(() => this.detectTheme(), 1000);
+            return;
+        }
+        this.observer = new MutationObserver(() => {
+            this.detectTheme();
+        });
+        this.observer.observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: ['class', 'data-theme', 'theme', 'data-coreui-theme']
+        });
+    }
+    stopWatching() {
+        if (this.observer) {
+            this.observer.disconnect();
+            this.observer = null;
+        }
+    }
+    get currentTheme() {
+        return this._currentTheme.value;
+    }
+    // Method to manually set theme if needed
+    setTheme(theme) {
+        this._currentTheme.next(theme);
+    }
+    // Re-detect theme from DOM
+    refreshTheme() {
+        this.detectTheme();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ThemeService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ThemeService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+class UserProfileComponent {
+    authService;
+    router;
+    themeService;
+    cdr;
+    notificationClick = new EventEmitter();
+    get themeClass() {
+        return `theme-${this.currentTheme}`;
+    }
+    currentUser = signal(null, ...(ngDevMode ? [{ debugName: "currentUser" }] : []));
+    currentTheme = 'light';
+    unreadCount = 0;
+    dropdownOpen = false;
+    hasUser = false;
+    destroy$ = new Subject();
+    // Signal to force avatar refresh
+    avatarRefresh = signal(Date.now(), ...(ngDevMode ? [{ debugName: "avatarRefresh" }] : []));
+    constructor(authService, router, themeService, cdr) {
+        this.authService = authService;
+        this.router = router;
+        this.themeService = themeService;
+        this.cdr = cdr;
+    }
+    ngOnInit() {
+        this.authService.currentUser$
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(user => {
+            this.currentUser.set(user);
+            this.hasUser = !!user;
+            // Force avatar refresh when user changes
+            this.avatarRefresh.set(Date.now());
+            if (!this.hasUser) {
+                this.unreadCount = 0;
+            }
+            else {
+                this.loadUnreadCount();
+            }
+            this.cdr.markForCheck();
+        });
+        this.themeService.currentTheme$
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(theme => {
+            this.currentTheme = theme;
+        });
+        // Listen for new notifications
+        this.authService.notifications$
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(() => {
+            console.log('Notification received, updating unread count');
+            if (this.hasUser) {
+                this.loadUnreadCount();
+            }
+        });
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    loadUnreadCount() {
+        if (!this.hasUser) {
+            this.unreadCount = 0;
+            return;
+        }
+        this.authService.getUnreadCount().subscribe({
+            next: (response) => {
+                this.unreadCount = response.unreadCount || 0;
+            },
+            error: (err) => { }
+        });
+    }
+    getAvatarUrl(user) {
+        // Use the refresh signal to force update
+        const refresh = this.avatarRefresh();
+        const config = this.authService.getConfig();
+        const baseUrl = config?.apiBaseUrl || '';
+        // If user has avatarPath, use it directly
+        if (user.avatarPath) {
+            // If avatarPath is already a full URL, use it as-is
+            if (user.avatarPath.startsWith('http://') || user.avatarPath.startsWith('https://')) {
+                return user.avatarPath;
+            }
+            // If it's a relative path, construct full URL with refresh timestamp
+            return `${baseUrl.replace(/\/$/, '')}${user.avatarPath}?t=${refresh}`;
+        }
+        // Fallback: construct URL using userId
+        const userId = user.userId;
+        if (userId && baseUrl) {
+            return `${baseUrl.replace(/\/$/, '')}/auth/${userId}/avatar?t=${refresh}`;
+        }
+        // Fallback to UI avatars service if no userId or baseUrl
+        const displayName = user.userName || user.userId || 'User';
+        return `https://ui-avatars.com/api/?name=${encodeURIComponent(displayName)}&background=1976d2&color=fff`;
+    }
+    getLastNameInitial(user) {
+        const fullName = user.fullName || user.userName || 'U';
+        const parts = fullName.split(' ');
+        const lastPart = parts[parts.length - 1];
+        return lastPart.charAt(0).toUpperCase();
+    }
+    toggleDropdown() {
+        this.dropdownOpen = !this.dropdownOpen;
+    }
+    onDocumentClick(event) {
+        const target = event.target;
+        const clickedInside = target.closest('.user-menu-wrapper');
+        if (!clickedInside) {
+            this.dropdownOpen = false;
+        }
+    }
+    onLogin() {
+        const config = this.authService.getConfig();
+        const baseUrl = config?.userBaseUrl || '';
+        const returnUrl = encodeURIComponent(this.router.url);
+        window.location.href = `${baseUrl}/login?returnUrl=${returnUrl}`;
+    }
+    onViewProfile() {
+        this.router.navigate(['/profile']);
+        this.dropdownOpen = false;
+    }
+    onLogout() {
+        this.authService.logout().subscribe({
+            next: () => {
+                // Clear current user after successful logout
+                this.dropdownOpen = false;
+                // Navigate to login with return URL
+                const config = this.authService.getConfig();
+                const baseUrl = config?.userBaseUrl || '';
+                const returnUrl = encodeURIComponent(window.location.href);
+                window.location.href = `${baseUrl}/login?returnUrl=${returnUrl}`;
+            },
+            error: (err) => {
+                // Still navigate to login even if logout fails
+                const config = this.authService.getConfig();
+                const baseUrl = config?.userBaseUrl || '';
+                window.location.href = `${baseUrl}/login`;
+            }
+        });
+    }
+    onNotificationClick() {
+        this.notificationClick.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: UserProfileComponent, deps: [{ token: MesAuthService }, { token: i2.Router }, { token: ThemeService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: UserProfileComponent, isStandalone: true, selector: "ma-user-profile", outputs: { notificationClick: "notificationClick" }, host: { listeners: { "document:click": "onDocumentClick($event)" }, properties: { "class": "this.themeClass" } }, ngImport: i0, template: `
+    <div class="user-profile-container">
+      <!-- Not logged in -->
+      <ng-container *ngIf="!currentUser()">
+        <button class="login-btn" (click)="onLogin()">
+          Login
+        </button>
+      </ng-container>
+
+      <!-- Logged in -->
+      <ng-container *ngIf="currentUser()">
+        <div class="user-header">
+          <button class="notification-btn" (click)="onNotificationClick()" title="Notifications">
+            <span class="icon">🔔</span>
+            <span class="badge" *ngIf="unreadCount > 0">{{ unreadCount }}</span>
+          </button>
+
+          <div class="user-menu-wrapper">
+            <button class="user-menu-btn" (click)="toggleDropdown()">
+              <img 
+                *ngIf="currentUser().fullName || currentUser().userName"
+                [src]="getAvatarUrl(currentUser())" 
+                [alt]="currentUser().fullName || currentUser().userName"
+                class="avatar"
+              />
+              <span *ngIf="!(currentUser().fullName || currentUser().userName)" class="avatar-initial">
+                {{ getLastNameInitial(currentUser()) }}
+              </span>
+            </button>
+
+            <div class="mes-dropdown-menu" *ngIf="dropdownOpen">
+              <div class="mes-dropdown-header">
+                {{ currentUser().fullName || currentUser().userName }}
+              </div>
+              <button class="mes-dropdown-item profile-link" (click)="onViewProfile()">
+                View Profile
+              </button>
+              <button class="mes-dropdown-item logout-item" (click)="onLogout()">
+                Logout
+              </button>
+            </div>
+          </div>
+        </div>
+      </ng-container>
+    </div>
+  `, 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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: UserProfileComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ma-user-profile', standalone: true, imports: [NgIf], template: `
+    <div class="user-profile-container">
+      <!-- Not logged in -->
+      <ng-container *ngIf="!currentUser()">
+        <button class="login-btn" (click)="onLogin()">
+          Login
+        </button>
+      </ng-container>
+
+      <!-- Logged in -->
+      <ng-container *ngIf="currentUser()">
+        <div class="user-header">
+          <button class="notification-btn" (click)="onNotificationClick()" title="Notifications">
+            <span class="icon">🔔</span>
+            <span class="badge" *ngIf="unreadCount > 0">{{ unreadCount }}</span>
+          </button>
+
+          <div class="user-menu-wrapper">
+            <button class="user-menu-btn" (click)="toggleDropdown()">
+              <img 
+                *ngIf="currentUser().fullName || currentUser().userName"
+                [src]="getAvatarUrl(currentUser())" 
+                [alt]="currentUser().fullName || currentUser().userName"
+                class="avatar"
+              />
+              <span *ngIf="!(currentUser().fullName || currentUser().userName)" class="avatar-initial">
+                {{ getLastNameInitial(currentUser()) }}
+              </span>
+            </button>
+
+            <div class="mes-dropdown-menu" *ngIf="dropdownOpen">
+              <div class="mes-dropdown-header">
+                {{ currentUser().fullName || currentUser().userName }}
+              </div>
+              <button class="mes-dropdown-item profile-link" (click)="onViewProfile()">
+                View Profile
+              </button>
+              <button class="mes-dropdown-item logout-item" (click)="onLogout()">
+                Logout
+              </button>
+            </div>
+          </div>
+        </div>
+      </ng-container>
+    </div>
+  `, 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"] }]
+        }], ctorParameters: () => [{ type: MesAuthService }, { type: i2.Router }, { type: ThemeService }, { type: i0.ChangeDetectorRef }], propDecorators: { notificationClick: [{
+                type: Output
+            }], themeClass: [{
+                type: HostBinding,
+                args: ['class']
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
+class ToastService {
+    toasts$ = new BehaviorSubject([]);
+    toasts = this.toasts$.asObservable();
+    show(message, title, type = 'info', duration = 5000) {
+        const id = Math.random().toString(36).substr(2, 9);
+        const toast = {
+            id,
+            message,
+            title,
+            type,
+            duration
+        };
+        const currentToasts = this.toasts$.value;
+        this.toasts$.next([...currentToasts, toast]);
+        if (duration > 0) {
+            setTimeout(() => {
+                this.remove(id);
+            }, duration);
+        }
+        return id;
+    }
+    remove(id) {
+        const currentToasts = this.toasts$.value;
+        this.toasts$.next(currentToasts.filter(t => t.id !== id));
+    }
+    clear() {
+        this.toasts$.next([]);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ToastService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ToastService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class ToastContainerComponent {
+    toastService;
+    themeService;
+    get themeClass() {
+        return `theme-${this.currentTheme}`;
+    }
+    toasts = [];
+    currentTheme = 'light';
+    destroy$ = new Subject();
+    constructor(toastService, themeService) {
+        this.toastService = toastService;
+        this.themeService = themeService;
+    }
+    ngOnInit() {
+        this.toastService.toasts
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(toasts => {
+            this.toasts = toasts;
+        });
+        this.themeService.currentTheme$
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(theme => {
+            this.currentTheme = theme;
+        });
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    close(id) {
+        this.toastService.remove(id);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ToastContainerComponent, deps: [{ token: ToastService }, { token: ThemeService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: ToastContainerComponent, isStandalone: true, selector: "ma-toast-container", host: { properties: { "class": "this.themeClass" } }, ngImport: i0, template: `
+    <div class="toast-container">
+      <div 
+        *ngFor="let toast of toasts"
+        class="toast"
+        [class]="'toast-' + toast.type"
+        [@slideIn]
+      >
+        <div class="toast-content">
+          <div *ngIf="toast.title" class="toast-title">{{ toast.title }}</div>
+          <div class="toast-message" [innerHTML]="toast.message"></div>
+        </div>
+        <button class="toast-close" (click)="close(toast.id)" aria-label="Close">
+          ✕
+        </button>
+      </div>
+    </div>
+  `, 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;--border-color: rgba(0, 0, 0, .1)}: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;--border-color: rgba(255, 255, 255, .1)}.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:var(--bg-primary);border:1px solid var(--border-color);box-shadow:0 4px 12px var(--shadow);pointer-events:auto;min-width:280px;max-width:400px;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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ToastContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ma-toast-container', standalone: true, imports: [CommonModule], template: `
+    <div class="toast-container">
+      <div 
+        *ngFor="let toast of toasts"
+        class="toast"
+        [class]="'toast-' + toast.type"
+        [@slideIn]
+      >
+        <div class="toast-content">
+          <div *ngIf="toast.title" class="toast-title">{{ toast.title }}</div>
+          <div class="toast-message" [innerHTML]="toast.message"></div>
+        </div>
+        <button class="toast-close" (click)="close(toast.id)" aria-label="Close">
+          ✕
+        </button>
+      </div>
+    </div>
+  `, 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;--border-color: rgba(0, 0, 0, .1)}: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;--border-color: rgba(255, 255, 255, .1)}.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:var(--bg-primary);border:1px solid var(--border-color);box-shadow:0 4px 12px var(--shadow);pointer-events:auto;min-width:280px;max-width:400px;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"] }]
+        }], ctorParameters: () => [{ type: ToastService }, { type: ThemeService }], propDecorators: { themeClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class NotificationPanelComponent {
+    authService;
+    toastService;
+    themeService;
+    notificationRead = new EventEmitter();
+    get themeClass() {
+        return `theme-${this.currentTheme}`;
+    }
+    isOpen = false;
+    notifications = [];
+    currentTheme = 'light';
+    activeTab = 'unread'; // Default to unread tab
+    destroy$ = new Subject();
+    get unreadNotifications() {
+        return this.notifications.filter(n => !n.isRead);
+    }
+    get readNotifications() {
+        return this.notifications.filter(n => n.isRead);
+    }
+    get currentNotifications() {
+        return this.activeTab === 'unread' ? this.unreadNotifications : this.readNotifications;
+    }
+    getNotificationMessage(notification) {
+        return notification.messageHtml || notification.message || '';
+    }
+    constructor(authService, toastService, themeService) {
+        this.authService = authService;
+        this.toastService = toastService;
+        this.themeService = themeService;
+    }
+    ngOnInit() {
+        this.themeService.currentTheme$
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(theme => {
+            this.currentTheme = theme;
+        });
+        this.loadNotifications();
+        // Listen for new real-time notifications
+        this.authService.notifications$
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((notification) => {
+            // Show toast for new notification
+            this.toastService.show(notification.messageHtml || notification.message || '', notification.title, 'info', 5000);
+            // Reload notifications list
+            this.loadNotifications();
+        });
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    loadNotifications() {
+        this.authService.getNotifications(1, 50, true).subscribe({
+            next: (response) => {
+                this.notifications = response.items || [];
+            },
+            error: (err) => { }
+        });
+    }
+    open() {
+        this.isOpen = true;
+        this.activeTab = 'unread'; // Reset to unread tab when opening
+    }
+    close() {
+        this.isOpen = false;
+    }
+    switchTab(tab) {
+        this.activeTab = tab;
+    }
+    markAsRead(notificationId, event) {
+        if (event) {
+            event.stopPropagation();
+        }
+        this.authService.markAsRead(notificationId).subscribe({
+            next: () => {
+                const notification = this.notifications.find(n => n.id === notificationId);
+                if (notification) {
+                    notification.isRead = true;
+                    this.notificationRead.emit();
+                }
+            },
+            error: (err) => { }
+        });
+    }
+    markAllAsRead() {
+        this.authService.markAllAsRead().subscribe({
+            next: () => {
+                this.notifications.forEach(n => n.isRead = true);
+                this.notificationRead.emit();
+            },
+            error: (err) => { }
+        });
+    }
+    deleteAllRead() {
+        const readNotificationIds = this.notifications
+            .filter(n => n.isRead)
+            .map(n => n.id);
+        // Delete all read notifications
+        const deletePromises = readNotificationIds.map(id => this.authService.deleteNotification(id).toPromise());
+        Promise.all(deletePromises).then(() => {
+            // Remove all read notifications from the local array
+            this.notifications = this.notifications.filter(n => !n.isRead);
+        }).catch((err) => {
+            // If bulk delete fails, reload notifications to get current state
+            this.loadNotifications();
+        });
+    }
+    deleteAllUnread() {
+        const unreadNotificationIds = this.notifications
+            .filter(n => !n.isRead)
+            .map(n => n.id);
+        // Delete all unread notifications
+        const deletePromises = unreadNotificationIds.map(id => this.authService.deleteNotification(id).toPromise());
+        Promise.all(deletePromises).then(() => {
+            // Remove all unread notifications from the local array
+            this.notifications = this.notifications.filter(n => n.isRead);
+        }).catch((err) => {
+            // If bulk delete fails, reload notifications to get current state
+            this.loadNotifications();
+        });
+    }
+    delete(notificationId, event) {
+        event.stopPropagation();
+        this.authService.deleteNotification(notificationId).subscribe({
+            next: () => {
+                this.notifications = this.notifications.filter(n => n.id !== notificationId);
+            },
+            error: (err) => { }
+        });
+    }
+    formatDate(dateString) {
+        const date = new Date(dateString);
+        const now = new Date();
+        const diffMs = now.getTime() - date.getTime();
+        const diffMins = Math.floor(diffMs / 60000);
+        const diffHours = Math.floor(diffMs / 3600000);
+        const diffDays = Math.floor(diffMs / 86400000);
+        if (diffMins < 1)
+            return 'Now';
+        if (diffMins < 60)
+            return `${diffMins}m ago`;
+        if (diffHours < 24)
+            return `${diffHours}h ago`;
+        if (diffDays < 7)
+            return `${diffDays}d ago`;
+        return date.toLocaleDateString();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NotificationPanelComponent, deps: [{ token: MesAuthService }, { token: ToastService }, { token: ThemeService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: NotificationPanelComponent, isStandalone: true, selector: "ma-notification-panel", outputs: { notificationRead: "notificationRead" }, host: { properties: { "class": "this.themeClass" } }, ngImport: i0, template: `
+    <div class="notification-panel" [class.open]="isOpen">
+      <!-- Header -->
+      <div class="panel-header">
+        <h3>Notifications</h3>
+        <button class="close-btn" (click)="close()" title="Close">✕</button>
+      </div>
+
+      <!-- Tabs -->
+      <div class="tabs">
+        <button 
+          class="tab-btn" 
+          [class.active]="activeTab === 'unread'"
+          (click)="switchTab('unread')"
+        >
+          Unread ({{ unreadNotifications.length }})
+        </button>
+        <button 
+          class="tab-btn" 
+          [class.active]="activeTab === 'read'"
+          (click)="switchTab('read')"
+        >
+          Read ({{ readNotifications.length }})
+        </button>
+      </div>
+
+      <!-- Notifications List -->
+      <div class="notifications-list">
+        <ng-container *ngIf="currentNotifications.length > 0">
+          <div 
+            *ngFor="let notification of currentNotifications"
+            class="notification-item"
+            [class.unread]="!notification.isRead"
+            (click)="markAsRead(notification.id)"
+          >
+            <div class="notification-content">
+              <div class="notification-title">{{ notification.title }}</div>
+              <div class="notification-message" [innerHTML]="getNotificationMessage(notification)"></div>
+              <div class="notification-meta">
+                <span class="app-name">{{ notification.sourceAppName }}</span>
+                <span class="time">{{ formatDate(notification.createdAt) }}</span>
+              </div>
+            </div>
+            <button 
+              class="read-btn" 
+              (click)="markAsRead(notification.id, $event)"
+              title="Mark as read"
+              *ngIf="!notification.isRead"
+            >
+              ✓
+            </button>
+            <button 
+              class="delete-btn" 
+              (click)="delete(notification.id, $event)"
+              title="Delete notification"
+              *ngIf="notification.isRead"
+            >
+              ✓
+            </button>
+          </div>
+        </ng-container>
+
+        <ng-container *ngIf="currentNotifications.length === 0">
+          <div class="empty-state">
+            No {{ activeTab }} notifications
+          </div>
+        </ng-container>
+      </div>
+
+      <!-- Footer Actions -->
+      <div class="panel-footer" *ngIf="currentNotifications.length > 0">
+        <div class="footer-actions" *ngIf="activeTab === 'unread'">
+          <button class="action-btn" (click)="markAllAsRead()" *ngIf="unreadNotifications.length > 0">
+            Mark all as read
+          </button>
+          <button class="action-btn delete-all-btn" (click)="deleteAllUnread()" *ngIf="unreadNotifications.length > 0">
+            Delete all
+          </button>
+        </div>
+        <button class="action-btn delete-all-btn" (click)="deleteAllRead()" *ngIf="activeTab === 'read' && readNotifications.length > 0">
+          Delete all
+        </button>
+      </div>
+    </div>
+  `, isInline: true, styles: [":host{--primary-color: #1976d2;--primary-hover: #1565c0;--success-color: #4caf50;--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;--success-color: #81c784;--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)}.tabs{display:flex;border-bottom:1px solid var(--border-color);background-color:var(--bg-secondary)}.tab-btn{flex:1;padding:12px 16px;background:none;border:none;color:var(--text-secondary);cursor:pointer;font-size:14px;font-weight:500;transition:all .2s;border-bottom:2px solid transparent}.tab-btn:hover{background-color:var(--bg-hover);color:var(--text-primary)}.tab-btn.active{color:var(--primary-color);border-bottom-color:var(--primary-color);background-color:var(--bg-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)}.read-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}.read-btn:hover{color:var(--success-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)}.footer-actions{display:flex;gap:8px}.footer-actions .action-btn{flex:1}.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)}.delete-all-btn{background-color:var(--error-color);color:#fff}.delete-all-btn:hover{background-color:#d32f2f}@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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NotificationPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ma-notification-panel', standalone: true, imports: [NgIf, NgFor], template: `
+    <div class="notification-panel" [class.open]="isOpen">
+      <!-- Header -->
+      <div class="panel-header">
+        <h3>Notifications</h3>
+        <button class="close-btn" (click)="close()" title="Close">✕</button>
+      </div>
+
+      <!-- Tabs -->
+      <div class="tabs">
+        <button 
+          class="tab-btn" 
+          [class.active]="activeTab === 'unread'"
+          (click)="switchTab('unread')"
+        >
+          Unread ({{ unreadNotifications.length }})
+        </button>
+        <button 
+          class="tab-btn" 
+          [class.active]="activeTab === 'read'"
+          (click)="switchTab('read')"
+        >
+          Read ({{ readNotifications.length }})
+        </button>
+      </div>
+
+      <!-- Notifications List -->
+      <div class="notifications-list">
+        <ng-container *ngIf="currentNotifications.length > 0">
+          <div 
+            *ngFor="let notification of currentNotifications"
+            class="notification-item"
+            [class.unread]="!notification.isRead"
+            (click)="markAsRead(notification.id)"
+          >
+            <div class="notification-content">
+              <div class="notification-title">{{ notification.title }}</div>
+              <div class="notification-message" [innerHTML]="getNotificationMessage(notification)"></div>
+              <div class="notification-meta">
+                <span class="app-name">{{ notification.sourceAppName }}</span>
+                <span class="time">{{ formatDate(notification.createdAt) }}</span>
+              </div>
+            </div>
+            <button 
+              class="read-btn" 
+              (click)="markAsRead(notification.id, $event)"
+              title="Mark as read"
+              *ngIf="!notification.isRead"
+            >
+              ✓
+            </button>
+            <button 
+              class="delete-btn" 
+              (click)="delete(notification.id, $event)"
+              title="Delete notification"
+              *ngIf="notification.isRead"
+            >
+              ✓
+            </button>
+          </div>
+        </ng-container>
+
+        <ng-container *ngIf="currentNotifications.length === 0">
+          <div class="empty-state">
+            No {{ activeTab }} notifications
+          </div>
+        </ng-container>
+      </div>
+
+      <!-- Footer Actions -->
+      <div class="panel-footer" *ngIf="currentNotifications.length > 0">
+        <div class="footer-actions" *ngIf="activeTab === 'unread'">
+          <button class="action-btn" (click)="markAllAsRead()" *ngIf="unreadNotifications.length > 0">
+            Mark all as read
+          </button>
+          <button class="action-btn delete-all-btn" (click)="deleteAllUnread()" *ngIf="unreadNotifications.length > 0">
+            Delete all
+          </button>
+        </div>
+        <button class="action-btn delete-all-btn" (click)="deleteAllRead()" *ngIf="activeTab === 'read' && readNotifications.length > 0">
+          Delete all
+        </button>
+      </div>
+    </div>
+  `, styles: [":host{--primary-color: #1976d2;--primary-hover: #1565c0;--success-color: #4caf50;--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;--success-color: #81c784;--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)}.tabs{display:flex;border-bottom:1px solid var(--border-color);background-color:var(--bg-secondary)}.tab-btn{flex:1;padding:12px 16px;background:none;border:none;color:var(--text-secondary);cursor:pointer;font-size:14px;font-weight:500;transition:all .2s;border-bottom:2px solid transparent}.tab-btn:hover{background-color:var(--bg-hover);color:var(--text-primary)}.tab-btn.active{color:var(--primary-color);border-bottom-color:var(--primary-color);background-color:var(--bg-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)}.read-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}.read-btn:hover{color:var(--success-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)}.footer-actions{display:flex;gap:8px}.footer-actions .action-btn{flex:1}.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)}.delete-all-btn{background-color:var(--error-color);color:#fff}.delete-all-btn:hover{background-color:#d32f2f}@media(max-width:600px){.notification-panel{width:100%;right:-100%}}\n"] }]
+        }], ctorParameters: () => [{ type: MesAuthService }, { type: ToastService }, { type: ThemeService }], propDecorators: { notificationRead: [{
+                type: Output
+            }], themeClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class MaUserComponent {
+    userProfile;
+    ngAfterViewInit() {
+        // Ensure proper initialization
+        if (this.userProfile) {
+            this.userProfile.loadUnreadCount();
+        }
+    }
+    onNotificationRead() {
+        if (this.userProfile) {
+            this.userProfile.loadUnreadCount();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MaUserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: MaUserComponent, isStandalone: true, selector: "ma-user", viewQueries: [{ propertyName: "userProfile", first: true, predicate: UserProfileComponent, descendants: true }], ngImport: i0, template: `
+    <ma-toast-container></ma-toast-container>
+    <div class="user-header">
+      <ma-user-profile (notificationClick)="notificationPanel.open()"></ma-user-profile>
+    </div>
+    <ma-notification-panel #notificationPanel (notificationRead)="onNotificationRead()"></ma-notification-panel>
+  `, isInline: true, 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", outputs: ["notificationClick"] }, { kind: "component", type: NotificationPanelComponent, selector: "ma-notification-panel", outputs: ["notificationRead"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MaUserComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ma-user', standalone: true, imports: [ToastContainerComponent, UserProfileComponent, NotificationPanelComponent], template: `
+    <ma-toast-container></ma-toast-container>
+    <div class="user-header">
+      <ma-user-profile (notificationClick)="notificationPanel.open()"></ma-user-profile>
+    </div>
+    <ma-notification-panel #notificationPanel (notificationRead)="onNotificationRead()"></ma-notification-panel>
+  `, styles: [".user-header{display:flex;justify-content:flex-end}\n"] }]
+        }], propDecorators: { userProfile: [{
+                type: ViewChild,
+                args: [UserProfileComponent]
+            }] } });
+
+class NotificationBadgeComponent {
+    authService;
+    themeService;
+    notificationClick = new EventEmitter();
+    get themeClass() {
+        return `theme-${this.currentTheme}`;
+    }
+    unreadCount = 0;
+    currentTheme = 'light';
+    hasUser = false;
+    destroy$ = new Subject();
+    constructor(authService, themeService) {
+        this.authService = authService;
+        this.themeService = themeService;
+    }
+    ngOnInit() {
+        this.themeService.currentTheme$
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(theme => {
+            this.currentTheme = theme;
+        });
+        this.authService.currentUser$
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(user => {
+            this.hasUser = !!user;
+            if (!this.hasUser) {
+                this.unreadCount = 0;
+                return;
+            }
+            this.loadUnreadCount();
+        });
+        // Listen for new notifications
+        this.authService.notifications$
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(() => {
+            if (this.hasUser) {
+                this.loadUnreadCount();
+            }
+        });
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    loadUnreadCount() {
+        if (!this.hasUser) {
+            this.unreadCount = 0;
+            return;
+        }
+        this.authService.getUnreadCount().subscribe({
+            next: (response) => {
+                this.unreadCount = response.unreadCount || 0;
+            },
+            error: (err) => console.error('Error loading unread count:', err)
+        });
+    }
+    onNotificationClick() {
+        this.notificationClick.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NotificationBadgeComponent, deps: [{ token: MesAuthService }, { token: ThemeService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: NotificationBadgeComponent, isStandalone: true, selector: "ma-notification-badge", outputs: { notificationClick: "notificationClick" }, host: { properties: { "class": "this.themeClass" } }, ngImport: i0, template: `
+    <button class="notification-btn" (click)="onNotificationClick()" title="Notifications">
+      <span class="icon">🔔</span>
+      <span class="badge" *ngIf="unreadCount > 0">{{ unreadCount }}</span>
+    </button>
+  `, 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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NotificationBadgeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ma-notification-badge', standalone: true, imports: [NgIf], template: `
+    <button class="notification-btn" (click)="onNotificationClick()" title="Notifications">
+      <span class="icon">🔔</span>
+      <span class="badge" *ngIf="unreadCount > 0">{{ unreadCount }}</span>
+    </button>
+  `, 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"] }]
+        }], ctorParameters: () => [{ type: MesAuthService }, { type: ThemeService }], propDecorators: { notificationClick: [{
+                type: Output
+            }], themeClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MES_AUTH_CONFIG, MaUserComponent, MesAuthModule, MesAuthService, NotificationBadgeComponent, NotificationPanelComponent, NotificationType, ThemeService, ToastContainerComponent, ToastService, UserProfileComponent, mesAuthInterceptor, provideMesAuth };
+//# sourceMappingURL=mesauth-angular.mjs.map