mesauth-angular 0.1.9 → 0.1.11

package/dist/fesm2020/mesauth-angular.mjs

@@ -0,0 +1,700 @@
+import * as i0 from '@angular/core';
+import { Injectable, NgModule, EventEmitter, Component, Output } from '@angular/core';
+import { HubConnectionBuilder, LogLevel } from '@microsoft/signalr';
+import { BehaviorSubject, Subject, throwError } from 'rxjs';
+import * as i1 from '@angular/common/http';
+import { HTTP_INTERCEPTORS } from '@angular/common/http';
+import { catchError, takeUntil } from 'rxjs/operators';
+import * as i2 from '@angular/router';
+import * as i2$1 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) {
+        this.http = http;
+        this.hubConnection = null;
+        this._currentUser = new BehaviorSubject(null);
+        this.currentUser$ = this._currentUser.asObservable();
+        this._notifications = new Subject();
+        this.notifications$ = this._notifications.asObservable();
+        this.apiBase = '';
+        this.config = null;
+    }
+    init(config) {
+        this.config = config;
+        this.apiBase = config.apiBaseUrl.replace(/\/$/, '');
+        this.fetchCurrentUser();
+        this.fetchInitialNotifications();
+        this.startConnection(config);
+    }
+    getConfig() {
+        return this.config;
+    }
+    fetchCurrentUser() {
+        if (!this.apiBase)
+            return;
+        this.http.get(`${this.apiBase}/auth/me`).subscribe({
+            next: (u) => this._currentUser.next(u),
+            error: (err) => console.error('fetchCurrentUser error', err)
+        });
+    }
+    fetchInitialNotifications() {
+        if (!this.apiBase)
+            return;
+        this.http.get(`${this.apiBase}/notif/me`).subscribe({
+            next: (notifications) => {
+                if (Array.isArray(notifications?.items)) {
+                    notifications.items.forEach((n) => this._notifications.next(n));
+                }
+            },
+            error: (err) => console.error('fetchInitialNotifications error', err)
+        });
+    }
+    getUnreadCount() {
+        return this.http.get(`${this.apiBase}/notif/me/unread-count`);
+    }
+    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);
+    }
+    markAsRead(notificationId) {
+        return this.http.patch(`${this.apiBase}/notif/${notificationId}/read`, {});
+    }
+    markAllAsRead() {
+        return this.http.patch(`${this.apiBase}/notif/me/read-all`, {});
+    }
+    deleteNotification(notificationId) {
+        return this.http.delete(`${this.apiBase}/notif/${notificationId}`);
+    }
+    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().catch((err) => console.error('SignalR start error', err));
+    }
+    stop() {
+        if (!this.hubConnection)
+            return;
+        this.hubConnection.stop().catch(() => { });
+        this.hubConnection = null;
+    }
+    logout() {
+        return this.http.post(`${this.apiBase}/auth/logout`, {});
+    }
+    refreshUser() {
+        this.fetchCurrentUser();
+    }
+}
+MesAuthService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MesAuthService, deps: [{ token: i1.HttpClient }], 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 }]; } });
+
+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?.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 UserProfileComponent {
+    constructor(authService, router) {
+        this.authService = authService;
+        this.router = router;
+        this.notificationClick = new EventEmitter();
+        this.currentUser = null;
+        this.unreadCount = 0;
+        this.dropdownOpen = false;
+        this.destroy$ = new Subject();
+    }
+    ngOnInit() {
+        console.log('UserProfileComponent: Service injected?', !!this.authService);
+        this.authService.currentUser$
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(user => {
+            console.log('UserProfileComponent: currentUser', user);
+            this.currentUser = user;
+        });
+        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)
+        });
+    }
+    getAvatarUrl(user) {
+        const config = this.authService.getConfig();
+        const baseUrl = config?.avatarUrl || 'https://ui-avatars.com/api/';
+        // Use userName first, fallback to userId, final fallback to 'User'
+        const displayName = user.userName || user.userId || 'User';
+        return `${baseUrl}?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;
+    }
+    onLogin() {
+        const config = this.authService.getConfig();
+        const baseUrl = config?.userBaseUrl || '';
+        const returnUrl = encodeURIComponent(this.router.url);
+        window.location.href = `${baseUrl}/login?returnUrl=${returnUrl}`;
+    }
+    onViewProfile() {
+        const config = this.authService.getConfig();
+        const baseUrl = config?.userBaseUrl || '';
+        window.location.href = `${baseUrl}/profile`;
+        this.dropdownOpen = false;
+    }
+    onLogout() {
+        this.authService.logout().subscribe({
+            next: () => {
+                // Clear current user after successful logout
+                this.currentUser = null;
+                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) => {
+                console.error('Logout 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();
+    }
+}
+UserProfileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: UserProfileComponent, deps: [{ token: MesAuthService }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component });
+UserProfileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: UserProfileComponent, isStandalone: true, selector: "ma-user-profile", outputs: { notificationClick: "notificationClick" }, 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="dropdown-menu" *ngIf="dropdownOpen">
+              <div class="dropdown-header">
+                {{ currentUser.fullName || currentUser.userName }}
+              </div>
+              <button class="dropdown-item profile-link" (click)="onViewProfile()">
+                View Profile
+              </button>
+              <button class="dropdown-item logout-item" (click)="onLogout()">
+                Logout
+              </button>
+            </div>
+          </div>
+        </div>
+      </ng-container>
+    </div>
+  `, isInline: true, styles: [".user-profile-container{display:flex;align-items:center;gap:16px;padding:0 16px}.login-btn{padding:8px 16px;background-color:#1976d2;color:#fff;border:none;border-radius:4px;cursor:pointer;font-weight:500;transition:background-color .3s}.login-btn:hover{background-color:#1565c0}.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:#f44336;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:#1976d21a}.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:#1976d2;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px}.dropdown-menu{position:absolute;top:calc(100% + 8px);right:0;background:white;border:1px solid #e0e0e0;border-radius:4px;box-shadow:0 2px 8px #00000026;min-width:200px;z-index:1000;overflow:hidden}.dropdown-header{padding:12px 16px;border-bottom:1px solid #f0f0f0;font-weight:600;color:#333;font-size:14px}.dropdown-item{display:block;width:100%;padding:12px 16px;border:none;background:none;text-align:left;cursor:pointer;font-size:14px;color:#333;text-decoration:none;transition:background-color .2s}.dropdown-item:hover{background-color:#f5f5f5}.profile-link{color:#1976d2}.logout-item{border-top:1px solid #f0f0f0;color:#f44336}.logout-item:hover{background-color:#ffebee}.user-info{display:flex;flex-direction:column;gap:2px}.user-name{font-weight:500;font-size:14px;color:#333}.user-position{font-size:12px;color:#666}.logout-btn{background:none;border:none;font-size:20px;cursor:pointer;color:#666;padding:4px 8px;transition:color .2s}.logout-btn:hover{color:#1976d2}@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="dropdown-menu" *ngIf="dropdownOpen">
+              <div class="dropdown-header">
+                {{ currentUser.fullName || currentUser.userName }}
+              </div>
+              <button class="dropdown-item profile-link" (click)="onViewProfile()">
+                View Profile
+              </button>
+              <button class="dropdown-item logout-item" (click)="onLogout()">
+                Logout
+              </button>
+            </div>
+          </div>
+        </div>
+      </ng-container>
+    </div>
+  `, styles: [".user-profile-container{display:flex;align-items:center;gap:16px;padding:0 16px}.login-btn{padding:8px 16px;background-color:#1976d2;color:#fff;border:none;border-radius:4px;cursor:pointer;font-weight:500;transition:background-color .3s}.login-btn:hover{background-color:#1565c0}.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:#f44336;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:#1976d21a}.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:#1976d2;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px}.dropdown-menu{position:absolute;top:calc(100% + 8px);right:0;background:white;border:1px solid #e0e0e0;border-radius:4px;box-shadow:0 2px 8px #00000026;min-width:200px;z-index:1000;overflow:hidden}.dropdown-header{padding:12px 16px;border-bottom:1px solid #f0f0f0;font-weight:600;color:#333;font-size:14px}.dropdown-item{display:block;width:100%;padding:12px 16px;border:none;background:none;text-align:left;cursor:pointer;font-size:14px;color:#333;text-decoration:none;transition:background-color .2s}.dropdown-item:hover{background-color:#f5f5f5}.profile-link{color:#1976d2}.logout-item{border-top:1px solid #f0f0f0;color:#f44336}.logout-item:hover{background-color:#ffebee}.user-info{display:flex;flex-direction:column;gap:2px}.user-name{font-weight:500;font-size:14px;color:#333}.user-position{font-size:12px;color:#666}.logout-btn{background:none;border:none;font-size:20px;cursor:pointer;color:#666;padding:4px 8px;transition:color .2s}.logout-btn:hover{color:#1976d2}@media (max-width: 768px){.user-info{display:none}.avatar{width:32px;height:32px}}\n"] }]
+        }], ctorParameters: function () { return [{ type: MesAuthService }, { type: i2.Router }]; }, propDecorators: { notificationClick: [{
+                type: Output
+            }] } });
+
+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) {
+        this.toastService = toastService;
+        this.toasts = [];
+    }
+    ngOnInit() {
+        this.toastService.toasts.subscribe(toasts => {
+            this.toasts = toasts;
+        });
+    }
+    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 }], target: i0.ɵɵFactoryTarget.Component });
+ToastContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ToastContainerComponent, isStandalone: true, selector: "ma-toast-container", 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">{{ toast.message }}</div>
+        </div>
+        <button class="toast-close" (click)="close(toast.id)" aria-label="Close">
+          ✕
+        </button>
+      </div>
+    </div>
+  `, isInline: true, styles: [".toast-container{position:fixed;top:20px;right:20px;z-index:9999;pointer-events:none}.toast{display:flex;align-items:flex-start;gap:12px;padding:12px 16px;margin-bottom:12px;border-radius:4px;background-color:#fff;box-shadow:0 4px 12px #00000026;pointer-events:auto;min-width:300px;max-width:500px;animation:slideIn .3s ease-out}.toast-content{flex:1}.toast-title{font-weight:600;font-size:14px;margin-bottom:4px}.toast-message{font-size:13px;line-height:1.4}.toast-close{background:none;border:none;cursor:pointer;font-size:18px;color:#999;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:color .2s}.toast-close:hover{color:#333}.toast-info{border-left:4px solid #2196f3}.toast-info .toast-title{color:#2196f3}.toast-info .toast-message{color:#333}.toast-success{border-left:4px solid #4caf50}.toast-success .toast-title{color:#4caf50}.toast-success .toast-message{color:#333}.toast-warning{border-left:4px solid #ff9800}.toast-warning .toast-title{color:#ff9800}.toast-warning .toast-message{color:#333}.toast-error{border-left:4px solid #f44336}.toast-error .toast-title{color:#f44336}.toast-error .toast-message{color:#333}@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: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.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">{{ toast.message }}</div>
+        </div>
+        <button class="toast-close" (click)="close(toast.id)" aria-label="Close">
+          ✕
+        </button>
+      </div>
+    </div>
+  `, styles: [".toast-container{position:fixed;top:20px;right:20px;z-index:9999;pointer-events:none}.toast{display:flex;align-items:flex-start;gap:12px;padding:12px 16px;margin-bottom:12px;border-radius:4px;background-color:#fff;box-shadow:0 4px 12px #00000026;pointer-events:auto;min-width:300px;max-width:500px;animation:slideIn .3s ease-out}.toast-content{flex:1}.toast-title{font-weight:600;font-size:14px;margin-bottom:4px}.toast-message{font-size:13px;line-height:1.4}.toast-close{background:none;border:none;cursor:pointer;font-size:18px;color:#999;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:color .2s}.toast-close:hover{color:#333}.toast-info{border-left:4px solid #2196f3}.toast-info .toast-title{color:#2196f3}.toast-info .toast-message{color:#333}.toast-success{border-left:4px solid #4caf50}.toast-success .toast-title{color:#4caf50}.toast-success .toast-message{color:#333}.toast-warning{border-left:4px solid #ff9800}.toast-warning .toast-title{color:#ff9800}.toast-warning .toast-message{color:#333}.toast-error{border-left:4px solid #f44336}.toast-error .toast-title{color:#f44336}.toast-error .toast-message{color:#333}@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 }]; } });
+
+class NotificationPanelComponent {
+    constructor(authService, toastService) {
+        this.authService = authService;
+        this.toastService = toastService;
+        this.isOpen = false;
+        this.notifications = [];
+        this.destroy$ = new Subject();
+    }
+    ngOnInit() {
+        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.message, notification.title, 'info', 5000);
+            // Reload notifications list
+            this.loadNotifications();
+        });
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    loadNotifications() {
+        this.authService.getNotifications(1, 50, false).subscribe({
+            next: (response) => {
+                this.notifications = response.items || [];
+            },
+            error: (err) => console.error('Error loading notifications:', err)
+        });
+    }
+    open() {
+        this.isOpen = true;
+    }
+    close() {
+        this.isOpen = false;
+    }
+    markAsRead(notificationId) {
+        this.authService.markAsRead(notificationId).subscribe({
+            next: () => {
+                const notification = this.notifications.find(n => n.id === notificationId);
+                if (notification) {
+                    notification.isRead = true;
+                }
+            },
+            error: (err) => console.error('Error marking as read:', err)
+        });
+    }
+    markAllAsRead() {
+        this.authService.markAllAsRead().subscribe({
+            next: () => {
+                this.notifications.forEach(n => n.isRead = true);
+            },
+            error: (err) => console.error('Error marking all as read:', err)
+        });
+    }
+    delete(notificationId, event) {
+        event.stopPropagation();
+        this.authService.deleteNotification(notificationId).subscribe({
+            next: () => {
+                this.notifications = this.notifications.filter(n => n.id !== notificationId);
+            },
+            error: (err) => console.error('Error deleting notification:', 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 }], target: i0.ɵɵFactoryTarget.Component });
+NotificationPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NotificationPanelComponent, isStandalone: true, selector: "ma-notification-panel", 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>
+
+      <!-- Notifications List -->
+      <div class="notifications-list">
+        <ng-container *ngIf="notifications.length > 0">
+          <div 
+            *ngFor="let notification of notifications"
+            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">{{ notification.message }}</div>
+              <div class="notification-meta">
+                <span class="app-name">{{ notification.sourceAppName }}</span>
+                <span class="time">{{ formatDate(notification.createdAt) }}</span>
+              </div>
+            </div>
+            <button 
+              class="delete-btn" 
+              (click)="delete(notification.id, $event)"
+              title="Delete"
+            >
+              ✕
+            </button>
+          </div>
+        </ng-container>
+
+        <ng-container *ngIf="notifications.length === 0">
+          <div class="empty-state">
+            No notifications
+          </div>
+        </ng-container>
+      </div>
+
+      <!-- Footer Actions -->
+      <div class="panel-footer" *ngIf="notifications.length > 0">
+        <button class="action-btn" (click)="markAllAsRead()">
+          Mark all as read
+        </button>
+      </div>
+    </div>
+  `, isInline: true, styles: [".notification-panel{position:fixed;top:0;right:-350px;width:350px;height:100vh;background:white;box-shadow:-2px 0 8px #0000001a;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 #e0e0e0;background-color:#f5f5f5}.panel-header h3{margin:0;font-size:18px;color:#333}.close-btn{background:none;border:none;font-size:20px;cursor:pointer;color:#666;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;transition:color .2s}.close-btn:hover{color:#333}.notifications-list{flex:1;overflow-y:auto}.notification-item{display:flex;gap:12px;padding:12px 16px;border-bottom:1px solid #f0f0f0;cursor:pointer;background-color:#fafafa;transition:background-color .2s}.notification-item:hover{background-color:#f5f5f5}.notification-item.unread{background-color:#e3f2fd}.notification-content{flex:1;min-width:0}.notification-title{font-weight:600;color:#333;font-size:14px;margin-bottom:4px}.notification-message{color:#666;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:#999}.app-name{font-weight:500;color:#1976d2}.delete-btn{background:none;border:none;color:#999;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:#f44336}.empty-state{display:flex;align-items:center;justify-content:center;height:100%;color:#999;font-size:14px}.panel-footer{padding:12px 16px;border-top:1px solid #e0e0e0;background-color:#f5f5f5}.action-btn{width:100%;padding:8px;background-color:#1976d2;color:#fff;border:none;border-radius:4px;cursor:pointer;font-weight:500;transition:background-color .2s}.action-btn:hover{background-color:#1565c0}@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>
+
+      <!-- Notifications List -->
+      <div class="notifications-list">
+        <ng-container *ngIf="notifications.length > 0">
+          <div 
+            *ngFor="let notification of notifications"
+            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">{{ notification.message }}</div>
+              <div class="notification-meta">
+                <span class="app-name">{{ notification.sourceAppName }}</span>
+                <span class="time">{{ formatDate(notification.createdAt) }}</span>
+              </div>
+            </div>
+            <button 
+              class="delete-btn" 
+              (click)="delete(notification.id, $event)"
+              title="Delete"
+            >
+              ✕
+            </button>
+          </div>
+        </ng-container>
+
+        <ng-container *ngIf="notifications.length === 0">
+          <div class="empty-state">
+            No notifications
+          </div>
+        </ng-container>
+      </div>
+
+      <!-- Footer Actions -->
+      <div class="panel-footer" *ngIf="notifications.length > 0">
+        <button class="action-btn" (click)="markAllAsRead()">
+          Mark all as read
+        </button>
+      </div>
+    </div>
+  `, styles: [".notification-panel{position:fixed;top:0;right:-350px;width:350px;height:100vh;background:white;box-shadow:-2px 0 8px #0000001a;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 #e0e0e0;background-color:#f5f5f5}.panel-header h3{margin:0;font-size:18px;color:#333}.close-btn{background:none;border:none;font-size:20px;cursor:pointer;color:#666;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;transition:color .2s}.close-btn:hover{color:#333}.notifications-list{flex:1;overflow-y:auto}.notification-item{display:flex;gap:12px;padding:12px 16px;border-bottom:1px solid #f0f0f0;cursor:pointer;background-color:#fafafa;transition:background-color .2s}.notification-item:hover{background-color:#f5f5f5}.notification-item.unread{background-color:#e3f2fd}.notification-content{flex:1;min-width:0}.notification-title{font-weight:600;color:#333;font-size:14px;margin-bottom:4px}.notification-message{color:#666;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:#999}.app-name{font-weight:500;color:#1976d2}.delete-btn{background:none;border:none;color:#999;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:#f44336}.empty-state{display:flex;align-items:center;justify-content:center;height:100%;color:#999;font-size:14px}.panel-footer{padding:12px 16px;border-top:1px solid #e0e0e0;background-color:#f5f5f5}.action-btn{width:100%;padding:8px;background-color:#1976d2;color:#fff;border:none;border-radius:4px;cursor:pointer;font-weight:500;transition:background-color .2s}.action-btn:hover{background-color:#1565c0}@media (max-width: 600px){.notification-panel{width:100%;right:-100%}}\n"] }]
+        }], ctorParameters: function () { return [{ type: MesAuthService }, { type: ToastService }]; } });
+
+class MaUserComponent {
+}
+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", 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></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" }] });
+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></ma-notification-panel>
+  `, styles: [".user-header{display:flex;justify-content:flex-end}\n"] }]
+        }] });
+
+class NotificationBadgeComponent {
+    constructor(authService) {
+        this.authService = authService;
+        this.notificationClick = new EventEmitter();
+        this.unreadCount = 0;
+        this.destroy$ = new Subject();
+    }
+    ngOnInit() {
+        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 }], 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" }, 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: [".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:#f44336;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: [".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:#f44336;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 }]; }, propDecorators: { notificationClick: [{
+                type: Output
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MaUserComponent, MesAuthInterceptor, MesAuthModule, MesAuthService, NotificationBadgeComponent, NotificationPanelComponent, NotificationType, ToastContainerComponent, UserProfileComponent };
+//# sourceMappingURL=mesauth-angular.mjs.map