mesauth-angular 1.1.4 → 1.1.6

package/dist/fesm2022/mesauth-angular.mjs

@@ -1,1233 +0,0 @@
-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);
-                window.location.href = `${baseUrl}/403?returnUrl=${returnUrl}`;
-            }
-        }
-        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