mesauth-angular 0.2.15 → 0.2.26

package/dist/fesm2015/mesauth-angular.mjs

@@ -1,1042 +0,0 @@
-import * as i0 from '@angular/core';
-import { Injectable, Optional, NgModule, EventEmitter, Component, Output, HostBinding, HostListener, ViewChild } from '@angular/core';
-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 { NavigationEnd } from '@angular/router';
-import * as i1 from '@angular/common/http';
-import { HTTP_INTERCEPTORS } from '@angular/common/http';
-import * as i3 from '@angular/common';
-import { NgIf, CommonModule, NgFor } from '@angular/common';
-
-var NotificationType;
-(function (NotificationType) {
-    NotificationType["Info"] = "Info";
-    NotificationType["Warning"] = "Warning";
-    NotificationType["Error"] = "Error";
-    NotificationType["Success"] = "Success";
-})(NotificationType || (NotificationType = {}));
-class MesAuthService {
-    constructor(http, router) {
-        this.http = http;
-        this.router = router;
-        this.hubConnection = null;
-        this._currentUser = new BehaviorSubject(null);
-        this.currentUser$ = this._currentUser.asObservable();
-        this._notifications = new Subject();
-        this.notifications$ = this._notifications.asObservable();
-        this._feNav = new BehaviorSubject(null);
-        this.feNav$ = this._feNav.asObservable();
-        this.apiBase = '';
-        this.config = null;
-        // 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);
-                }
-            });
-        }
-    }
-    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) {
-        this.config = config;
-        this.apiBase = config.apiBaseUrl.replace(/\/$/, '');
-        this.fetchCurrentUser();
-        this.fetchInitialNotifications();
-    }
-    getConfig() {
-        return this.config;
-    }
-    fetchCurrentUser() {
-        var _a, _b;
-        if (!this.apiBase)
-            return;
-        const url = `${this.apiBase}/auth/me`;
-        this.http.get(url, { withCredentials: (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.withCredentials) !== null && _b !== void 0 ? _b : true }).subscribe({
-            next: (u) => {
-                this._currentUser.next(u);
-                if (u && this.config) {
-                    this.startConnection(this.config);
-                    this.fetchFeNav();
-                }
-                else {
-                    this._feNav.next(null);
-                }
-            },
-            error: (err) => {
-                this._currentUser.next(null);
-                this._feNav.next(null);
-            }
-        });
-    }
-    fetchInitialNotifications() {
-        var _a, _b;
-        if (!this.apiBase)
-            return;
-        this.http.get(`${this.apiBase}/notif/me`, { withCredentials: (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.withCredentials) !== null && _b !== void 0 ? _b : true }).subscribe({
-            next: (notifications) => {
-                if (Array.isArray(notifications === null || notifications === void 0 ? void 0 : notifications.items)) {
-                    notifications.items.forEach((n) => this._notifications.next(n));
-                }
-            },
-            error: (err) => { }
-        });
-    }
-    fetchFeNav() {
-        var _a, _b, _c;
-        if (!this.apiBase || !((_a = this._currentUser.value) === null || _a === void 0 ? void 0 : _a.userId))
-            return;
-        const url = `${this.apiBase}/fenavs/${this._currentUser.value.userId}`;
-        this.http.get(url, { withCredentials: (_c = (_b = this.config) === null || _b === void 0 ? void 0 : _b.withCredentials) !== null && _c !== void 0 ? _c : true }).subscribe({
-            next: (response) => {
-                if (response === null || response === void 0 ? void 0 : response.content) {
-                    const feNavData = {
-                        items: response.content,
-                        lastUpdated: new Date().toISOString()
-                    };
-                    this._feNav.next(feNavData);
-                }
-            },
-            error: (err) => {
-                this._feNav.next(null);
-            }
-        });
-    }
-    getUnreadCount() {
-        var _a, _b;
-        return this.http.get(`${this.apiBase}/notif/me/unread-count`, { withCredentials: (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.withCredentials) !== null && _b !== void 0 ? _b : true });
-    }
-    getNotifications(page = 1, pageSize = 20, includeRead = false, type) {
-        var _a, _b;
-        let url = `${this.apiBase}/notif/me?page=${page}&pageSize=${pageSize}&includeRead=${includeRead}`;
-        if (type) {
-            url += `&type=${type}`;
-        }
-        return this.http.get(url, { withCredentials: (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.withCredentials) !== null && _b !== void 0 ? _b : true });
-    }
-    markAsRead(notificationId) {
-        var _a, _b;
-        return this.http.patch(`${this.apiBase}/notif/${notificationId}/read`, {}, { withCredentials: (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.withCredentials) !== null && _b !== void 0 ? _b : true });
-    }
-    markAllAsRead() {
-        var _a, _b;
-        return this.http.patch(`${this.apiBase}/notif/me/read-all`, {}, { withCredentials: (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.withCredentials) !== null && _b !== void 0 ? _b : true });
-    }
-    deleteNotification(notificationId) {
-        var _a, _b;
-        return this.http.delete(`${this.apiBase}/notif/${notificationId}`, { withCredentials: (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.withCredentials) !== null && _b !== void 0 ? _b : true });
-    }
-    startConnection(config) {
-        var _a;
-        if (this.hubConnection)
-            return;
-        const signalrUrl = config.apiBaseUrl.replace(/\/$/, '') + '/hub/notification';
-        const builder = new HubConnectionBuilder()
-            .withUrl(signalrUrl, { withCredentials: (_a = config.withCredentials) !== null && _a !== void 0 ? _a : 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() {
-        var _a, _b;
-        const url = `${this.apiBase}/auth/logout`;
-        return this.http.post(url, {}, { withCredentials: (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.withCredentials) !== null && _b !== void 0 ? _b : true }).pipe(tap(() => {
-            this._currentUser.next(null);
-            this._feNav.next(null);
-            this.stop();
-        }));
-    }
-    refreshUser() {
-        this.fetchCurrentUser();
-    }
-}
-MesAuthService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MesAuthService, deps: [{ token: i1.HttpClient }, { token: i2.Router, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
-MesAuthService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MesAuthService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MesAuthService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () {
-        return [{ type: i1.HttpClient }, { type: i2.Router, decorators: [{
-                        type: Optional
-                    }] }];
-    } });
-
-class MesAuthInterceptor {
-    constructor(authService, router) {
-        this.authService = authService;
-        this.router = router;
-    }
-    intercept(req, next) {
-        return next.handle(req).pipe(catchError((error) => {
-            if (error.status === 403) {
-                const config = this.authService.getConfig();
-                const baseUrl = (config === null || config === void 0 ? void 0 : config.userBaseUrl) || '';
-                const returnUrl = encodeURIComponent(window.location.href);
-                window.location.href = `${baseUrl}/403?returnUrl=${returnUrl}`;
-            }
-            return throwError(error);
-        }));
-    }
-}
-MesAuthInterceptor.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MesAuthInterceptor, deps: [{ token: MesAuthService }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Injectable });
-MesAuthInterceptor.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MesAuthInterceptor });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MesAuthInterceptor, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: MesAuthService }, { type: i2.Router }]; } });
-
-class MesAuthModule {
-}
-MesAuthModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MesAuthModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-MesAuthModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: MesAuthModule });
-MesAuthModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MesAuthModule, providers: [
-        MesAuthService,
-        { provide: HTTP_INTERCEPTORS, useClass: MesAuthInterceptor, multi: true }
-    ] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MesAuthModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    providers: [
-                        MesAuthService,
-                        { provide: HTTP_INTERCEPTORS, useClass: MesAuthInterceptor, multi: true }
-                    ]
-                }]
-        }] });
-
-class ThemeService {
-    constructor() {
-        this._currentTheme = new BehaviorSubject('light');
-        this.currentTheme$ = this._currentTheme.asObservable();
-        this.observer = null;
-        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();
-    }
-}
-ThemeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-ThemeService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ThemeService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ThemeService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: function () { return []; } });
-
-class UserProfileComponent {
-    constructor(authService, router, themeService) {
-        this.authService = authService;
-        this.router = router;
-        this.themeService = themeService;
-        this.notificationClick = new EventEmitter();
-        this.currentUser = null;
-        this.currentTheme = 'light';
-        this.unreadCount = 0;
-        this.dropdownOpen = false;
-        this.destroy$ = new Subject();
-    }
-    get themeClass() {
-        return `theme-${this.currentTheme}`;
-    }
-    ngOnInit() {
-        this.authService.currentUser$
-            .pipe(takeUntil(this.destroy$))
-            .subscribe(user => {
-            this.currentUser = user;
-        });
-        this.themeService.currentTheme$
-            .pipe(takeUntil(this.destroy$))
-            .subscribe(theme => {
-            this.currentTheme = theme;
-        });
-        this.loadUnreadCount();
-        // Listen for new notifications
-        this.authService.notifications$
-            .pipe(takeUntil(this.destroy$))
-            .subscribe(() => {
-            console.log('Notification received, updating unread count');
-            this.loadUnreadCount();
-        });
-    }
-    ngOnDestroy() {
-        this.destroy$.next();
-        this.destroy$.complete();
-    }
-    loadUnreadCount() {
-        this.authService.getUnreadCount().subscribe({
-            next: (response) => {
-                this.unreadCount = response.unreadCount || 0;
-            },
-            error: (err) => { }
-        });
-    }
-    getAvatarUrl(user) {
-        const config = this.authService.getConfig();
-        const baseUrl = (config === null || config === void 0 ? void 0 : config.apiBaseUrl) || '';
-        // Use userId for the avatar endpoint
-        const userId = user.userId;
-        if (userId && baseUrl) {
-            return `${baseUrl.replace(/\/$/, '')}/auth/${userId}/avatar`;
-        }
-        // 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 === null || config === void 0 ? void 0 : config.userBaseUrl) || '';
-        const returnUrl = encodeURIComponent(this.router.url);
-        window.location.href = `${baseUrl}/login?returnUrl=${returnUrl}`;
-    }
-    onViewProfile() {
-        const config = this.authService.getConfig();
-        const baseUrl = (config === null || config === void 0 ? void 0 : config.userBaseUrl) || '';
-        window.location.href = `${baseUrl}/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 === null || config === void 0 ? void 0 : 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 === null || config === void 0 ? void 0 : config.userBaseUrl) || '';
-                window.location.href = `${baseUrl}/login`;
-            }
-        });
-    }
-    onNotificationClick() {
-        this.notificationClick.emit();
-    }
-}
-UserProfileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: UserProfileComponent, deps: [{ token: MesAuthService }, { token: i2.Router }, { token: ThemeService }], target: i0.ɵɵFactoryTarget.Component });
-UserProfileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: UserProfileComponent, isStandalone: true, selector: "ma-user-profile", outputs: { notificationClick: "notificationClick" }, host: { listeners: { "document:click": "onDocumentClick($event)" }, properties: { "class": "this.themeClass" } }, ngImport: i0, template: `
-    <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: "14.3.0", 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: function () { return [{ type: MesAuthService }, { type: i2.Router }, { type: ThemeService }]; }, propDecorators: { notificationClick: [{
-                type: Output
-            }], themeClass: [{
-                type: HostBinding,
-                args: ['class']
-            }], onDocumentClick: [{
-                type: HostListener,
-                args: ['document:click', ['$event']]
-            }] } });
-
-class ToastService {
-    constructor() {
-        this.toasts$ = new BehaviorSubject([]);
-        this.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([]);
-    }
-}
-ToastService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-ToastService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ToastService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ToastService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-
-class ToastContainerComponent {
-    constructor(toastService, themeService) {
-        this.toastService = toastService;
-        this.themeService = themeService;
-        this.toasts = [];
-        this.currentTheme = 'light';
-        this.destroy$ = new Subject();
-    }
-    get themeClass() {
-        return `theme-${this.currentTheme}`;
-    }
-    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);
-    }
-}
-ToastContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ToastContainerComponent, deps: [{ token: ToastService }, { token: ThemeService }], target: i0.ɵɵFactoryTarget.Component });
-ToastContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ToastContainerComponent, isStandalone: true, selector: "ma-toast-container", host: { properties: { "class": "this.themeClass" } }, ngImport: i0, template: `
-    <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: "14.3.0", 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: function () { return [{ type: ToastService }, { type: ThemeService }]; }, propDecorators: { themeClass: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
-class NotificationPanelComponent {
-    constructor(authService, toastService, themeService) {
-        this.authService = authService;
-        this.toastService = toastService;
-        this.themeService = themeService;
-        this.notificationRead = new EventEmitter();
-        this.isOpen = false;
-        this.notifications = [];
-        this.currentTheme = 'light';
-        this.activeTab = 'unread'; // Default to unread tab
-        this.destroy$ = new Subject();
-    }
-    get themeClass() {
-        return `theme-${this.currentTheme}`;
-    }
-    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 || '';
-    }
-    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();
-    }
-}
-NotificationPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NotificationPanelComponent, deps: [{ token: MesAuthService }, { token: ToastService }, { token: ThemeService }], target: i0.ɵɵFactoryTarget.Component });
-NotificationPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", 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: "14.3.0", 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: function () { return [{ type: MesAuthService }, { type: ToastService }, { type: ThemeService }]; }, propDecorators: { notificationRead: [{
-                type: Output
-            }], themeClass: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
-class MaUserComponent {
-    onNotificationRead() {
-        this.userProfile.loadUnreadCount();
-    }
-}
-MaUserComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MaUserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MaUserComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", 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: "14.3.0", 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 {
-    constructor(authService, themeService) {
-        this.authService = authService;
-        this.themeService = themeService;
-        this.notificationClick = new EventEmitter();
-        this.unreadCount = 0;
-        this.currentTheme = 'light';
-        this.destroy$ = new Subject();
-    }
-    get themeClass() {
-        return `theme-${this.currentTheme}`;
-    }
-    ngOnInit() {
-        this.themeService.currentTheme$
-            .pipe(takeUntil(this.destroy$))
-            .subscribe(theme => {
-            this.currentTheme = theme;
-        });
-        this.loadUnreadCount();
-        // Listen for new notifications
-        this.authService.notifications$
-            .pipe(takeUntil(this.destroy$))
-            .subscribe(() => {
-            this.loadUnreadCount();
-        });
-    }
-    ngOnDestroy() {
-        this.destroy$.next();
-        this.destroy$.complete();
-    }
-    loadUnreadCount() {
-        this.authService.getUnreadCount().subscribe({
-            next: (response) => {
-                this.unreadCount = response.unreadCount || 0;
-            },
-            error: (err) => console.error('Error loading unread count:', err)
-        });
-    }
-    onNotificationClick() {
-        this.notificationClick.emit();
-    }
-}
-NotificationBadgeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NotificationBadgeComponent, deps: [{ token: MesAuthService }, { token: ThemeService }], target: i0.ɵɵFactoryTarget.Component });
-NotificationBadgeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NotificationBadgeComponent, isStandalone: true, selector: "ma-notification-badge", outputs: { notificationClick: "notificationClick" }, host: { properties: { "class": "this.themeClass" } }, ngImport: i0, template: `
-    <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: "14.3.0", 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: function () { return [{ type: MesAuthService }, { type: ThemeService }]; }, propDecorators: { notificationClick: [{
-                type: Output
-            }], themeClass: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { MaUserComponent, MesAuthInterceptor, MesAuthModule, MesAuthService, NotificationBadgeComponent, NotificationPanelComponent, NotificationType, ThemeService, ToastContainerComponent, UserProfileComponent };
-//# sourceMappingURL=mesauth-angular.mjs.map