mesauth-angular 1.3.5 → 1.5.5

package/fesm2022/mesauth-angular.mjs

@@ -1,5 +1,6 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, makeEnvironmentProviders, provideAppInitializer, inject, NgZone, Injectable, NgModule, EventEmitter, signal, HostListener, HostBinding, Output, Component, ViewChild } from '@angular/core';
+import { InjectionToken, makeEnvironmentProviders, provideAppInitializer, inject, NgZone, Injectable, NgModule, EventEmitter, signal, HostListener, HostBinding, Output, Component, ViewChild, Input } from '@angular/core';
+import * as i4 from '@angular/common/http';
 import { HttpClient } from '@angular/common/http';
 import { HubConnectionBuilder, LogLevel } from '@microsoft/signalr';
 import { BehaviorSubject, Subject, EMPTY, of, timer, throwError } from 'rxjs';
@@ -7,7 +8,7 @@ import { tap, catchError, switchMap, takeUntil } from 'rxjs/operators';
 import * as i2 from '@angular/router';
 import { Router } from '@angular/router';
 import * as i3 from '@angular/common';
-import { NgIf, CommonModule, NgFor } from '@angular/common';
+import { NgIf, CommonModule, NgFor, DatePipe } from '@angular/common';
 import { DomSanitizer } from '@angular/platform-browser';
 
 /** Injection token for MesAuth configuration */
@@ -56,6 +57,8 @@ class MesAuthService {
     currentUser$ = this._currentUser.asObservable();
     _notifications = new Subject();
     notifications$ = this._notifications.asObservable();
+    _approvalEvents = new Subject();
+    approvalEvents$ = this._approvalEvents.asObservable();
     apiBase = '';
     config = null;
     http;
@@ -123,101 +126,6 @@ class MesAuthService {
             throw new Error('MesAuth not initialized');
         return this.http.get(`${this.apiBase}/fe-routes/me`, { withCredentials: this.config?.withCredentials ?? true });
     }
-    /**
-     * Get master routes for a specific application
-     * @param appId - The application ID
-     */
-    getRouteMasters(appId) {
-        if (!this.apiBase)
-            throw new Error('MesAuth not initialized');
-        return this.http.get(`${this.apiBase}/fe-routes/masters/${appId}`, { withCredentials: this.config?.withCredentials ?? true });
-    }
-    /**
-     * Register/sync frontend routes for an application
-     * This is typically called on app startup to sync routes from the frontend app
-     * @param appId - The application ID (passed via X-App-Id header)
-     * @param routes - Array of route definitions
-     */
-    registerFrontEndRoutes(appId, routes) {
-        if (!this.apiBase)
-            throw new Error('MesAuth not initialized');
-        const headers = { 'X-App-Id': appId };
-        return this.http.post(`${this.apiBase}/fe-routes/register`, routes, {
-            headers,
-            withCredentials: this.config?.withCredentials ?? true
-        });
-    }
-    /**
-     * Create a new route master
-     * @param appId - The application ID
-     * @param route - Route details
-     */
-    createRouteMaster(appId, route) {
-        if (!this.apiBase)
-            throw new Error('MesAuth not initialized');
-        return this.http.post(`${this.apiBase}/fe-routes/masters`, {
-            appId,
-            ...route
-        }, { withCredentials: this.config?.withCredentials ?? true });
-    }
-    /**
-     * Update an existing route master
-     * @param routeId - The route master ID
-     * @param route - Updated route details
-     */
-    updateRouteMaster(routeId, route) {
-        if (!this.apiBase)
-            throw new Error('MesAuth not initialized');
-        return this.http.put(`${this.apiBase}/fe-routes/masters/${routeId}`, route, {
-            withCredentials: this.config?.withCredentials ?? true
-        });
-    }
-    /**
-     * Delete a route master
-     * @param routeId - The route master ID
-     */
-    deleteRouteMaster(routeId) {
-        if (!this.apiBase)
-            throw new Error('MesAuth not initialized');
-        return this.http.delete(`${this.apiBase}/fe-routes/masters/${routeId}`, {
-            withCredentials: this.config?.withCredentials ?? true
-        });
-    }
-    /**
-     * Assign a route to a role
-     * @param routeMasterId - The route master ID
-     * @param roleId - The role ID (GUID)
-     */
-    assignRouteToRole(routeMasterId, roleId) {
-        if (!this.apiBase)
-            throw new Error('MesAuth not initialized');
-        return this.http.post(`${this.apiBase}/fe-routes/mappings`, {
-            routeMasterId,
-            roleId
-        }, { withCredentials: this.config?.withCredentials ?? true });
-    }
-    /**
-     * Remove a route assignment from a role
-     * @param mappingId - The mapping ID
-     */
-    removeRouteFromRole(mappingId) {
-        if (!this.apiBase)
-            throw new Error('MesAuth not initialized');
-        return this.http.delete(`${this.apiBase}/fe-routes/mappings/${mappingId}`, {
-            withCredentials: this.config?.withCredentials ?? true
-        });
-    }
-    /**
-     * Get route-to-role mappings for a specific role
-     * @param roleId - The role ID (GUID)
-     */
-    getRouteMappingsByRole(roleId) {
-        if (!this.apiBase)
-            throw new Error('MesAuth not initialized');
-        return this.http.get(`${this.apiBase}/fe-routes/mappings?roleId=${roleId}`, {
-            withCredentials: this.config?.withCredentials ?? true
-        });
-    }
     startConnection(config) {
         if (this.hubConnection)
             return;
@@ -235,6 +143,22 @@ class MesAuthService {
                 this._notifications.next(n);
             }
         });
+        this.hubConnection.on('ApprovalCompleted', (e) => {
+            if (this.ngZone) {
+                this.ngZone.run(() => this._approvalEvents.next({ type: 'ApprovalCompleted', ...e }));
+            }
+            else {
+                this._approvalEvents.next({ type: 'ApprovalCompleted', ...e });
+            }
+        });
+        this.hubConnection.on('ApprovalStepChanged', (e) => {
+            if (this.ngZone) {
+                this.ngZone.run(() => this._approvalEvents.next({ type: 'ApprovalStepChanged', ...e }));
+            }
+            else {
+                this._approvalEvents.next({ type: 'ApprovalStepChanged', ...e });
+            }
+        });
         this.hubConnection.start().then(() => { }).catch((err) => { });
         this.hubConnection.onclose(() => { });
         this.hubConnection.onreconnecting(() => { });
@@ -409,23 +333,27 @@ class UserProfileComponent {
     router;
     themeService;
     cdr;
+    http;
     notificationClick = new EventEmitter();
+    approvalClick = new EventEmitter();
     get themeClass() {
         return `theme-${this.currentTheme}`;
     }
     currentUser = signal(null, ...(ngDevMode ? [{ debugName: "currentUser" }] : []));
     currentTheme = 'light';
     unreadCount = 0;
+    pendingApprovalCount = 0;
     dropdownOpen = false;
     hasUser = false;
     destroy$ = new Subject();
     // Signal to force avatar refresh
     avatarRefresh = signal(Date.now(), ...(ngDevMode ? [{ debugName: "avatarRefresh" }] : []));
-    constructor(authService, router, themeService, cdr) {
+    constructor(authService, router, themeService, cdr, http) {
         this.authService = authService;
         this.router = router;
         this.themeService = themeService;
         this.cdr = cdr;
+        this.http = http;
     }
     ngOnInit() {
         this.authService.currentUser$
@@ -437,9 +365,11 @@ class UserProfileComponent {
             this.avatarRefresh.set(Date.now());
             if (!this.hasUser) {
                 this.unreadCount = 0;
+                this.pendingApprovalCount = 0;
             }
             else {
                 this.loadUnreadCount();
+                this.loadPendingApprovalCount();
             }
             this.cdr.markForCheck();
         });
@@ -448,6 +378,13 @@ class UserProfileComponent {
             .subscribe(theme => {
             this.currentTheme = theme;
         });
+        // Listen for approval events (SignalR) to refresh pending count
+        this.authService.approvalEvents$
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(() => {
+            if (this.hasUser)
+                this.loadPendingApprovalCount();
+        });
         // Listen for new real-time notifications (SignalR only)
         this.authService.notifications$
             .pipe(takeUntil(this.destroy$))
@@ -473,6 +410,23 @@ class UserProfileComponent {
             error: (err) => { }
         });
     }
+    loadPendingApprovalCount() {
+        if (!this.hasUser) {
+            this.pendingApprovalCount = 0;
+            return;
+        }
+        const config = this.authService.getConfig();
+        if (!config)
+            return;
+        const url = `${config.apiBaseUrl.replace(/\/$/, '')}/approval/dashboard`;
+        this.http.get(url, { withCredentials: config.withCredentials ?? true }).subscribe({
+            next: (r) => { this.pendingApprovalCount = r?.pendingCount ?? 0; },
+            error: () => { }
+        });
+    }
+    onApprovalClick() {
+        this.approvalClick.emit();
+    }
     getAvatarUrl(user) {
         // Use the refresh signal to force update
         const refresh = this.avatarRefresh();
@@ -544,8 +498,8 @@ class UserProfileComponent {
     onNotificationClick() {
         this.notificationClick.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: UserProfileComponent, deps: [{ token: MesAuthService }, { token: i2.Router }, { token: ThemeService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: UserProfileComponent, isStandalone: true, selector: "ma-user-profile", outputs: { notificationClick: "notificationClick" }, host: { listeners: { "document:click": "onDocumentClick($event)" }, properties: { "class": "this.themeClass" } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: UserProfileComponent, deps: [{ token: MesAuthService }, { token: i2.Router }, { token: ThemeService }, { token: i0.ChangeDetectorRef }, { token: i4.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: UserProfileComponent, isStandalone: true, selector: "ma-user-profile", outputs: { notificationClick: "notificationClick", approvalClick: "approvalClick" }, 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()">
@@ -564,6 +518,15 @@ class UserProfileComponent {
             <span class="badge" *ngIf="unreadCount > 0">{{ unreadCount > 99 ? '99+' : unreadCount }}</span>
           </button>
 
+          <!-- Approval Button -->
+          <button class="notification-btn" [class.has-unread]="pendingApprovalCount > 0" (click)="onApprovalClick()" title="Approvals" aria-label="Approvals">
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M9 11l3 3L22 4"/>
+              <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/>
+            </svg>
+            <span class="badge" *ngIf="pendingApprovalCount > 0">{{ pendingApprovalCount > 99 ? '99+' : pendingApprovalCount }}</span>
+          </button>
+
           <!-- User Avatar + Dropdown -->
           <div class="user-menu-wrapper">
             <button class="user-menu-btn" (click)="toggleDropdown()" [attr.aria-label]="'User menu for ' + (currentUser().fullName || currentUser().userName)" aria-haspopup="true" [attr.aria-expanded]="dropdownOpen">
@@ -647,6 +610,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
             <span class="badge" *ngIf="unreadCount > 0">{{ unreadCount > 99 ? '99+' : unreadCount }}</span>
           </button>
 
+          <!-- Approval Button -->
+          <button class="notification-btn" [class.has-unread]="pendingApprovalCount > 0" (click)="onApprovalClick()" title="Approvals" aria-label="Approvals">
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M9 11l3 3L22 4"/>
+              <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/>
+            </svg>
+            <span class="badge" *ngIf="pendingApprovalCount > 0">{{ pendingApprovalCount > 99 ? '99+' : pendingApprovalCount }}</span>
+          </button>
+
           <!-- User Avatar + Dropdown -->
           <div class="user-menu-wrapper">
             <button class="user-menu-btn" (click)="toggleDropdown()" [attr.aria-label]="'User menu for ' + (currentUser().fullName || currentUser().userName)" aria-haspopup="true" [attr.aria-expanded]="dropdownOpen">
@@ -708,7 +680,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
       </ng-container>
     </div>
   `, styles: [":host{--primary-color: #1976d2;--primary-hover: #1565c0;--primary-light: rgba(25, 118, 210, .12);--primary-glow: rgba(25, 118, 210, .3);--error-color: #f44336;--error-light: rgba(244, 67, 54, .1);--text-primary: #212121;--text-secondary: #616161;--text-muted: #9e9e9e;--bg-primary: #ffffff;--bg-secondary: #f8f9fa;--bg-hover: #f0f4ff;--border-color: #e0e0e0;--shadow: rgba(0, 0, 0, .12);--shadow-lg: rgba(0, 0, 0, .18)}:host(.theme-dark){--primary-color: #90caf9;--primary-hover: #64b5f6;--primary-light: rgba(144, 202, 249, .12);--primary-glow: rgba(144, 202, 249, .25);--error-color: #ef5350;--error-light: rgba(239, 83, 80, .12);--text-primary: #e0e0e0;--text-secondary: #b0b0b0;--text-muted: #757575;--bg-primary: #1e1e2e;--bg-secondary: #27273a;--bg-hover: #2a2d4a;--border-color: #383850;--shadow: rgba(0, 0, 0, .35);--shadow-lg: rgba(0, 0, 0, .5)}.user-profile-container{display:flex;align-items:center;gap:4px}.login-btn{padding:7px 18px;background-color:var(--primary-color);color:#fff;border:none;border-radius:8px;cursor:pointer;font-weight:500;font-size:13px;letter-spacing:.2px;transition:background-color .2s,transform .15s}.login-btn:hover{background-color:var(--primary-hover);transform:translateY(-1px)}.user-header{display:flex;align-items:center;gap:4px}.notification-btn{position:relative;background:none;border:none;cursor:pointer;padding:8px;border-radius:10px;color:var(--text-secondary);display:flex;align-items:center;justify-content:center;transition:color .2s,background-color .2s}.notification-btn:hover{background-color:var(--primary-light);color:var(--primary-color)}.notification-btn.has-unread{color:var(--primary-color)}.bell-icon{display:block;transition:transform .35s cubic-bezier(.34,1.56,.64,1)}.notification-btn:hover .bell-icon{transform:rotate(-20deg) scale(1.15)}.badge{position:absolute;top:2px;right:2px;background-color:var(--error-color);color:#fff;border-radius:10px;min-width:17px;height:17px;padding:0 4px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;line-height:1;box-shadow:0 0 0 2px var(--bg-primary);animation:badge-pop .25s cubic-bezier(.34,1.56,.64,1)}@keyframes badge-pop{0%{transform:scale(0)}to{transform:scale(1)}}.user-menu-wrapper{position:relative}.user-menu-btn{background:none;border:none;cursor:pointer;padding:2px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:transform .2s}.user-menu-btn:hover{transform:scale(1.06)}.avatar-ring{border-radius:50%;padding:2px;border:2px solid transparent;transition:border-color .25s,box-shadow .25s}.avatar-ring.active,.user-menu-btn:hover .avatar-ring{border-color:var(--primary-color);box-shadow:0 0 0 3px var(--primary-glow)}.avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;display:block}.avatar-initial{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--primary-color),var(--primary-hover));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px}.mes-dropdown-menu{position:absolute;top:calc(100% + 10px);right:0;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:14px;box-shadow:0 8px 32px var(--shadow-lg),0 2px 8px var(--shadow);min-width:220px;z-index:1000;overflow:hidden;animation:dropdown-in .16s cubic-bezier(.16,1,.3,1)}@keyframes dropdown-in{0%{opacity:0;transform:translateY(-8px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.mes-dropdown-header{display:flex;align-items:center;gap:12px;padding:16px;background:var(--bg-secondary)}.dropdown-avatar-wrap{flex-shrink:0}.dropdown-avatar{width:46px;height:46px;border-radius:50%;object-fit:cover;border:2px solid var(--primary-color);display:block}.dropdown-avatar-initial{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,var(--primary-color),var(--primary-hover));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;border:2px solid var(--primary-color)}.dropdown-user-info{display:flex;flex-direction:column;gap:3px;min-width:0}.dropdown-user-name{font-weight:600;font-size:14px;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dropdown-user-sub{font-size:11px;color:var(--primary-color);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mes-dropdown-divider{height:1px;background:var(--border-color)}.mes-dropdown-item{display:flex;align-items:center;gap:10px;width:100%;padding:11px 16px;border:none;background:none;text-align:left;cursor:pointer;font-size:13.5px;font-weight:500;transition:background-color .15s}.item-icon{flex-shrink:0;opacity:.8}.profile-link{color:var(--primary-color)}.profile-link:hover{background-color:var(--primary-light)}.logout-item{color:var(--error-color)}.logout-item:hover{background-color:var(--error-light)}@media(max-width:768px){.avatar,.avatar-initial{width:32px;height:32px;font-size:13px}}\n"] }]
-        }], ctorParameters: () => [{ type: MesAuthService }, { type: i2.Router }, { type: ThemeService }, { type: i0.ChangeDetectorRef }], propDecorators: { notificationClick: [{
+        }], ctorParameters: () => [{ type: MesAuthService }, { type: i2.Router }, { type: ThemeService }, { type: i0.ChangeDetectorRef }, { type: i4.HttpClient }], propDecorators: { notificationClick: [{
+                type: Output
+            }], approvalClick: [{
                 type: Output
             }], themeClass: [{
                 type: HostBinding,
@@ -901,6 +875,7 @@ class NotificationPanelComponent {
     }
     selectedNotification = null;
     selectedNotificationHtml = null;
+    selectedNotificationUrl = null;
     selectedNotificationDate = '';
     // Returns plain text message for list display
     getNotificationMessage(notification) {
@@ -981,6 +956,9 @@ class NotificationPanelComponent {
         // Cache computed values to avoid re-rendering on every change detection cycle
         const html = notification.messageHtml || notification.message || '';
         this.selectedNotificationHtml = this.sanitizer.bypassSecurityTrustHtml(html);
+        this.selectedNotificationUrl = notification.url?.trim()
+            ? this.sanitizer.bypassSecurityTrustResourceUrl(notification.url.trim())
+            : null;
         this.selectedNotificationDate = this.formatDate(notification.createdAt);
         // Mark as read when opening details (if not already read)
         if (!notification.isRead) {
@@ -997,6 +975,7 @@ class NotificationPanelComponent {
     closeDetails() {
         this.selectedNotification = null;
         this.selectedNotificationHtml = null;
+        this.selectedNotificationUrl = null;
         this.selectedNotificationDate = '';
     }
     markAsRead(notificationId, event) {
@@ -1272,13 +1251,16 @@ class NotificationPanelComponent {
           <span class="app-name">{{ selectedNotification.sourceAppName }}</span>
           <span class="time">{{ selectedNotificationDate }}</span>
         </div>
-        <div class="modal-body" [innerHTML]="selectedNotificationHtml"></div>
+        <div class="modal-body" *ngIf="!selectedNotificationUrl" [innerHTML]="selectedNotificationHtml"></div>
+        <div class="modal-body modal-body-iframe" *ngIf="selectedNotificationUrl">
+          <iframe [src]="selectedNotificationUrl" sandbox="allow-same-origin" class="notification-iframe"></iframe>
+        </div>
         <div class="modal-footer">
           <button class="action-btn" (click)="closeDetails()">Close</button>
         </div>
       </div>
     </div>
-  `, isInline: true, styles: [":host{display:block;position:relative;--primary-color: #1976d2;--primary-hover: #1565c0;--primary-light: rgba(25, 118, 210, .1);--success-color: #43a047;--error-color: #f44336;--error-hover: #d32f2f;--unread-accent: #1976d2;--info-color: #2196f3;--info-bg: rgba(33, 150, 243, .1);--success-bg: rgba(67, 160, 71, .1);--warning-color: #f57c00;--warning-bg: rgba(245, 124, 0, .1);--error-bg: rgba(244, 67, 54, .1);--text-primary: #212121;--text-secondary: #616161;--text-muted: #9e9e9e;--bg-primary: #ffffff;--bg-secondary: #f8f9fa;--bg-hover: #f0f4ff;--bg-unread: rgba(25, 118, 210, .06);--border-color: #e0e0e0;--border-light: #eeeeee;--shadow: rgba(0, 0, 0, .15)}:host(.theme-dark){display:block;position:relative;--primary-color: #90caf9;--primary-hover: #64b5f6;--primary-light: rgba(144, 202, 249, .1);--success-color: #66bb6a;--error-color: #ef5350;--error-hover: #c62828;--unread-accent: #90caf9;--info-color: #64b5f6;--info-bg: rgba(100, 181, 246, .12);--success-bg: rgba(102, 187, 106, .12);--warning-color: #ffb74d;--warning-bg: rgba(255, 183, 77, .12);--error-bg: rgba(239, 83, 80, .12);--text-primary: #e0e0e0;--text-secondary: #b0b0b0;--text-muted: #757575;--bg-primary: #1e1e2e;--bg-secondary: #27273a;--bg-hover: #2a2d4a;--bg-unread: rgba(144, 202, 249, .08);--border-color: #383850;--border-light: #2e2e42;--shadow: rgba(0, 0, 0, .4)}.notification-panel{position:fixed;top:0;right:-360px;width:360px;height:100vh;background:var(--bg-primary);box-shadow:-4px 0 24px var(--shadow);display:flex;flex-direction:column;z-index:1030;transition:right .3s cubic-bezier(.16,1,.3,1)}.notification-panel.open{right:0}.panel-header{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid var(--border-color);background:var(--bg-secondary);flex-shrink:0}.panel-header-left{display:flex;align-items:center;gap:9px;color:var(--primary-color)}.panel-header h3{margin:0;font-size:16px;font-weight:700;color:var(--text-primary);letter-spacing:.1px}.close-btn{background:none;border:none;cursor:pointer;color:var(--text-muted);width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:color .2s,background-color .2s}.close-btn:hover{color:var(--text-primary);background-color:var(--bg-hover)}.tabs{display:flex;gap:6px;padding:10px 14px;border-bottom:1px solid var(--border-color);background:var(--bg-secondary);flex-shrink:0}.tab-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:7px 12px;background:none;border:1px solid var(--border-color);border-radius:20px;color:var(--text-secondary);cursor:pointer;font-size:13px;font-weight:500;transition:all .18s}.tab-btn:hover{background:var(--bg-hover);color:var(--primary-color);border-color:var(--primary-color)}.tab-btn.active{background:var(--primary-color);border-color:var(--primary-color);color:#fff}.tab-count{background:#ffffff40;border-radius:10px;min-width:18px;height:18px;padding:0 5px;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center}.tab-btn:not(.active) .tab-count{background:var(--error-color);color:#fff}.read-count{background:#ffffff40}.tab-btn:not(.active) .read-count{background:var(--text-muted)}.notifications-list{flex:1;overflow-y:auto}.notification-item{display:flex;align-items:flex-start;gap:0;border-bottom:1px solid var(--border-light);cursor:pointer;background:var(--bg-primary);transition:background-color .15s;position:relative}.notification-item:hover{background:var(--bg-hover)}.notification-item.unread{background:var(--bg-unread)}.notif-accent{width:3px;align-self:stretch;flex-shrink:0;background:transparent;border-radius:0 2px 2px 0;opacity:.3}.notification-item.unread .notif-accent{opacity:1}.notif-accent.type-info{background:var(--info-color)}.notif-accent.type-success{background:var(--success-color)}.notif-accent.type-warning{background:var(--warning-color)}.notif-accent.type-error{background:var(--error-color)}.notif-type-icon{flex-shrink:0;width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;align-self:center;margin-left:10px}.notif-type-icon.type-info{color:var(--info-color);background:var(--info-bg)}.notif-type-icon.type-success{color:var(--success-color);background:var(--success-bg)}.notif-type-icon.type-warning{color:var(--warning-color);background:var(--warning-bg)}.notif-type-icon.type-error{color:var(--error-color);background:var(--error-bg)}.notification-content{flex:1;min-width:0;padding:12px 8px 12px 12px}.notification-title{font-weight:600;color:var(--text-primary);font-size:13.5px;margin-bottom:3px;line-height:1.35}.notification-message{color:var(--text-secondary);font-size:12px;line-height:1.45;margin-bottom:7px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.notification-meta{display:flex;justify-content:space-between;font-size:11px;color:var(--text-muted)}.app-name{font-weight:600;color:var(--primary-color)}.icon-btn{background:none;border:none;cursor:pointer;width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;align-self:center;margin-right:8px;transition:color .15s,background-color .15s;color:var(--text-muted)}.read-btn:hover{color:var(--success-color);background:#43a0471a}.delete-btn:hover{color:var(--error-color);background:#f443361a}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;height:100%;padding:40px 20px;color:var(--text-muted)}.empty-icon{opacity:.35}.empty-state p{margin:0;font-size:13px}.panel-footer{padding:10px 14px;border-top:1px solid var(--border-color);background:var(--bg-secondary);flex-shrink:0}.footer-actions{display:flex;gap:8px}.footer-actions .action-btn{flex:1}.action-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:8px 12px;background:var(--primary-color);color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:12.5px;font-weight:600;transition:background-color .18s,transform .12s}.action-btn:hover{background:var(--primary-hover);transform:translateY(-1px)}.delete-all-btn{background:var(--error-color)}.delete-all-btn:hover{background:var(--error-hover)}.modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1060;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.modal-container{background:var(--bg-primary);border-radius:14px;width:90%;max-width:580px;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 16px 48px #00000040;animation:modal-in .2s cubic-bezier(.16,1,.3,1)}@keyframes modal-in{0%{opacity:0;transform:scale(.94) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--border-color);background:var(--bg-secondary);border-radius:14px 14px 0 0;border-top:3px solid transparent}.modal-header.modal-type-info{border-top-color:var(--info-color)}.modal-header.modal-type-success{border-top-color:var(--success-color)}.modal-header.modal-type-warning{border-top-color:var(--warning-color)}.modal-header.modal-type-error{border-top-color:var(--error-color)}.modal-header-left{display:flex;align-items:center;gap:10px;min-width:0}.modal-type-icon{flex-shrink:0;width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center}.modal-type-info .modal-type-icon{color:var(--info-color);background:var(--info-bg)}.modal-type-success .modal-type-icon{color:var(--success-color);background:var(--success-bg)}.modal-type-warning .modal-type-icon{color:var(--warning-color);background:var(--warning-bg)}.modal-type-error .modal-type-icon{color:var(--error-color);background:var(--error-bg)}.modal-header h3{margin:0;font-size:15px;font-weight:700;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.modal-meta{display:flex;justify-content:space-between;padding:8px 20px;font-size:11.5px;color:var(--text-muted);border-bottom:1px solid var(--border-light)}.modal-body{padding:20px;overflow-y:auto;flex:1;color:var(--text-primary);font-size:14px;line-height:1.65}.modal-footer{padding:12px 20px;border-top:1px solid var(--border-color);background:var(--bg-secondary);border-radius:0 0 14px 14px;display:flex;justify-content:flex-end}.modal-footer .action-btn{width:auto;padding:8px 24px}@media(max-width:600px){.notification-panel{width:100%;right:-100%}.modal-container{width:95%;max-height:90vh}}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+  `, isInline: true, styles: [":host{display:block;position:relative;--primary-color: #1976d2;--primary-hover: #1565c0;--primary-light: rgba(25, 118, 210, .1);--success-color: #43a047;--error-color: #f44336;--error-hover: #d32f2f;--unread-accent: #1976d2;--info-color: #2196f3;--info-bg: rgba(33, 150, 243, .1);--success-bg: rgba(67, 160, 71, .1);--warning-color: #f57c00;--warning-bg: rgba(245, 124, 0, .1);--error-bg: rgba(244, 67, 54, .1);--text-primary: #212121;--text-secondary: #616161;--text-muted: #9e9e9e;--bg-primary: #ffffff;--bg-secondary: #f8f9fa;--bg-hover: #f0f4ff;--bg-unread: rgba(25, 118, 210, .06);--border-color: #e0e0e0;--border-light: #eeeeee;--shadow: rgba(0, 0, 0, .15)}:host(.theme-dark){display:block;position:relative;--primary-color: #90caf9;--primary-hover: #64b5f6;--primary-light: rgba(144, 202, 249, .1);--success-color: #66bb6a;--error-color: #ef5350;--error-hover: #c62828;--unread-accent: #90caf9;--info-color: #64b5f6;--info-bg: rgba(100, 181, 246, .12);--success-bg: rgba(102, 187, 106, .12);--warning-color: #ffb74d;--warning-bg: rgba(255, 183, 77, .12);--error-bg: rgba(239, 83, 80, .12);--text-primary: #e0e0e0;--text-secondary: #b0b0b0;--text-muted: #757575;--bg-primary: #1e1e2e;--bg-secondary: #27273a;--bg-hover: #2a2d4a;--bg-unread: rgba(144, 202, 249, .08);--border-color: #383850;--border-light: #2e2e42;--shadow: rgba(0, 0, 0, .4)}.notification-panel{position:fixed;top:0;right:-360px;width:360px;height:100vh;background:var(--bg-primary);box-shadow:-4px 0 24px var(--shadow);display:flex;flex-direction:column;z-index:1030;transition:right .3s cubic-bezier(.16,1,.3,1)}.notification-panel.open{right:0}.panel-header{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid var(--border-color);background:var(--bg-secondary);flex-shrink:0}.panel-header-left{display:flex;align-items:center;gap:9px;color:var(--primary-color)}.panel-header h3{margin:0;font-size:16px;font-weight:700;color:var(--text-primary);letter-spacing:.1px}.close-btn{background:none;border:none;cursor:pointer;color:var(--text-muted);width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:color .2s,background-color .2s}.close-btn:hover{color:var(--text-primary);background-color:var(--bg-hover)}.tabs{display:flex;gap:6px;padding:10px 14px;border-bottom:1px solid var(--border-color);background:var(--bg-secondary);flex-shrink:0}.tab-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:7px 12px;background:none;border:1px solid var(--border-color);border-radius:20px;color:var(--text-secondary);cursor:pointer;font-size:13px;font-weight:500;transition:all .18s}.tab-btn:hover{background:var(--bg-hover);color:var(--primary-color);border-color:var(--primary-color)}.tab-btn.active{background:var(--primary-color);border-color:var(--primary-color);color:#fff}.tab-count{background:#ffffff40;border-radius:10px;min-width:18px;height:18px;padding:0 5px;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center}.tab-btn:not(.active) .tab-count{background:var(--error-color);color:#fff}.read-count{background:#ffffff40}.tab-btn:not(.active) .read-count{background:var(--text-muted)}.notifications-list{flex:1;overflow-y:auto}.notification-item{display:flex;align-items:flex-start;gap:0;border-bottom:1px solid var(--border-light);cursor:pointer;background:var(--bg-primary);transition:background-color .15s;position:relative}.notification-item:hover{background:var(--bg-hover)}.notification-item.unread{background:var(--bg-unread)}.notif-accent{width:3px;align-self:stretch;flex-shrink:0;background:transparent;border-radius:0 2px 2px 0;opacity:.3}.notification-item.unread .notif-accent{opacity:1}.notif-accent.type-info{background:var(--info-color)}.notif-accent.type-success{background:var(--success-color)}.notif-accent.type-warning{background:var(--warning-color)}.notif-accent.type-error{background:var(--error-color)}.notif-type-icon{flex-shrink:0;width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;align-self:center;margin-left:10px}.notif-type-icon.type-info{color:var(--info-color);background:var(--info-bg)}.notif-type-icon.type-success{color:var(--success-color);background:var(--success-bg)}.notif-type-icon.type-warning{color:var(--warning-color);background:var(--warning-bg)}.notif-type-icon.type-error{color:var(--error-color);background:var(--error-bg)}.notification-content{flex:1;min-width:0;padding:12px 8px 12px 12px}.notification-title{font-weight:600;color:var(--text-primary);font-size:13.5px;margin-bottom:3px;line-height:1.35}.notification-message{color:var(--text-secondary);font-size:12px;line-height:1.45;margin-bottom:7px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.notification-meta{display:flex;justify-content:space-between;font-size:11px;color:var(--text-muted)}.app-name{font-weight:600;color:var(--primary-color)}.icon-btn{background:none;border:none;cursor:pointer;width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;align-self:center;margin-right:8px;transition:color .15s,background-color .15s;color:var(--text-muted)}.read-btn:hover{color:var(--success-color);background:#43a0471a}.delete-btn:hover{color:var(--error-color);background:#f443361a}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;height:100%;padding:40px 20px;color:var(--text-muted)}.empty-icon{opacity:.35}.empty-state p{margin:0;font-size:13px}.panel-footer{padding:10px 14px;border-top:1px solid var(--border-color);background:var(--bg-secondary);flex-shrink:0}.footer-actions{display:flex;gap:8px}.footer-actions .action-btn{flex:1}.action-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:8px 12px;background:var(--primary-color);color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:12.5px;font-weight:600;transition:background-color .18s,transform .12s}.action-btn:hover{background:var(--primary-hover);transform:translateY(-1px)}.delete-all-btn{background:var(--error-color)}.delete-all-btn:hover{background:var(--error-hover)}.modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1060;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.modal-container{background:var(--bg-primary);border-radius:14px;width:90%;max-width:580px;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 16px 48px #00000040;animation:modal-in .2s cubic-bezier(.16,1,.3,1)}@keyframes modal-in{0%{opacity:0;transform:scale(.94) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--border-color);background:var(--bg-secondary);border-radius:14px 14px 0 0;border-top:3px solid transparent}.modal-header.modal-type-info{border-top-color:var(--info-color)}.modal-header.modal-type-success{border-top-color:var(--success-color)}.modal-header.modal-type-warning{border-top-color:var(--warning-color)}.modal-header.modal-type-error{border-top-color:var(--error-color)}.modal-header-left{display:flex;align-items:center;gap:10px;min-width:0}.modal-type-icon{flex-shrink:0;width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center}.modal-type-info .modal-type-icon{color:var(--info-color);background:var(--info-bg)}.modal-type-success .modal-type-icon{color:var(--success-color);background:var(--success-bg)}.modal-type-warning .modal-type-icon{color:var(--warning-color);background:var(--warning-bg)}.modal-type-error .modal-type-icon{color:var(--error-color);background:var(--error-bg)}.modal-header h3{margin:0;font-size:15px;font-weight:700;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.modal-meta{display:flex;justify-content:space-between;padding:8px 20px;font-size:11.5px;color:var(--text-muted);border-bottom:1px solid var(--border-light)}.modal-body{padding:20px;overflow-y:auto;flex:1;color:var(--text-primary);font-size:14px;line-height:1.65}.modal-body-iframe{padding:0}.notification-iframe{width:100%;height:100%;border:none;display:block}.modal-footer{padding:12px 20px;border-top:1px solid var(--border-color);background:var(--bg-secondary);border-radius:0 0 14px 14px;display:flex;justify-content:flex-end}.modal-footer .action-btn{width:auto;padding:8px 24px}@media(max-width:600px){.notification-panel{width:100%;right:-100%}.modal-container{width:95%;max-height:90vh}}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: NotificationPanelComponent, decorators: [{
             type: Component,
@@ -1431,13 +1413,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
           <span class="app-name">{{ selectedNotification.sourceAppName }}</span>
           <span class="time">{{ selectedNotificationDate }}</span>
         </div>
-        <div class="modal-body" [innerHTML]="selectedNotificationHtml"></div>
+        <div class="modal-body" *ngIf="!selectedNotificationUrl" [innerHTML]="selectedNotificationHtml"></div>
+        <div class="modal-body modal-body-iframe" *ngIf="selectedNotificationUrl">
+          <iframe [src]="selectedNotificationUrl" sandbox="allow-same-origin" class="notification-iframe"></iframe>
+        </div>
         <div class="modal-footer">
           <button class="action-btn" (click)="closeDetails()">Close</button>
         </div>
       </div>
     </div>
-  `, styles: [":host{display:block;position:relative;--primary-color: #1976d2;--primary-hover: #1565c0;--primary-light: rgba(25, 118, 210, .1);--success-color: #43a047;--error-color: #f44336;--error-hover: #d32f2f;--unread-accent: #1976d2;--info-color: #2196f3;--info-bg: rgba(33, 150, 243, .1);--success-bg: rgba(67, 160, 71, .1);--warning-color: #f57c00;--warning-bg: rgba(245, 124, 0, .1);--error-bg: rgba(244, 67, 54, .1);--text-primary: #212121;--text-secondary: #616161;--text-muted: #9e9e9e;--bg-primary: #ffffff;--bg-secondary: #f8f9fa;--bg-hover: #f0f4ff;--bg-unread: rgba(25, 118, 210, .06);--border-color: #e0e0e0;--border-light: #eeeeee;--shadow: rgba(0, 0, 0, .15)}:host(.theme-dark){display:block;position:relative;--primary-color: #90caf9;--primary-hover: #64b5f6;--primary-light: rgba(144, 202, 249, .1);--success-color: #66bb6a;--error-color: #ef5350;--error-hover: #c62828;--unread-accent: #90caf9;--info-color: #64b5f6;--info-bg: rgba(100, 181, 246, .12);--success-bg: rgba(102, 187, 106, .12);--warning-color: #ffb74d;--warning-bg: rgba(255, 183, 77, .12);--error-bg: rgba(239, 83, 80, .12);--text-primary: #e0e0e0;--text-secondary: #b0b0b0;--text-muted: #757575;--bg-primary: #1e1e2e;--bg-secondary: #27273a;--bg-hover: #2a2d4a;--bg-unread: rgba(144, 202, 249, .08);--border-color: #383850;--border-light: #2e2e42;--shadow: rgba(0, 0, 0, .4)}.notification-panel{position:fixed;top:0;right:-360px;width:360px;height:100vh;background:var(--bg-primary);box-shadow:-4px 0 24px var(--shadow);display:flex;flex-direction:column;z-index:1030;transition:right .3s cubic-bezier(.16,1,.3,1)}.notification-panel.open{right:0}.panel-header{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid var(--border-color);background:var(--bg-secondary);flex-shrink:0}.panel-header-left{display:flex;align-items:center;gap:9px;color:var(--primary-color)}.panel-header h3{margin:0;font-size:16px;font-weight:700;color:var(--text-primary);letter-spacing:.1px}.close-btn{background:none;border:none;cursor:pointer;color:var(--text-muted);width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:color .2s,background-color .2s}.close-btn:hover{color:var(--text-primary);background-color:var(--bg-hover)}.tabs{display:flex;gap:6px;padding:10px 14px;border-bottom:1px solid var(--border-color);background:var(--bg-secondary);flex-shrink:0}.tab-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:7px 12px;background:none;border:1px solid var(--border-color);border-radius:20px;color:var(--text-secondary);cursor:pointer;font-size:13px;font-weight:500;transition:all .18s}.tab-btn:hover{background:var(--bg-hover);color:var(--primary-color);border-color:var(--primary-color)}.tab-btn.active{background:var(--primary-color);border-color:var(--primary-color);color:#fff}.tab-count{background:#ffffff40;border-radius:10px;min-width:18px;height:18px;padding:0 5px;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center}.tab-btn:not(.active) .tab-count{background:var(--error-color);color:#fff}.read-count{background:#ffffff40}.tab-btn:not(.active) .read-count{background:var(--text-muted)}.notifications-list{flex:1;overflow-y:auto}.notification-item{display:flex;align-items:flex-start;gap:0;border-bottom:1px solid var(--border-light);cursor:pointer;background:var(--bg-primary);transition:background-color .15s;position:relative}.notification-item:hover{background:var(--bg-hover)}.notification-item.unread{background:var(--bg-unread)}.notif-accent{width:3px;align-self:stretch;flex-shrink:0;background:transparent;border-radius:0 2px 2px 0;opacity:.3}.notification-item.unread .notif-accent{opacity:1}.notif-accent.type-info{background:var(--info-color)}.notif-accent.type-success{background:var(--success-color)}.notif-accent.type-warning{background:var(--warning-color)}.notif-accent.type-error{background:var(--error-color)}.notif-type-icon{flex-shrink:0;width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;align-self:center;margin-left:10px}.notif-type-icon.type-info{color:var(--info-color);background:var(--info-bg)}.notif-type-icon.type-success{color:var(--success-color);background:var(--success-bg)}.notif-type-icon.type-warning{color:var(--warning-color);background:var(--warning-bg)}.notif-type-icon.type-error{color:var(--error-color);background:var(--error-bg)}.notification-content{flex:1;min-width:0;padding:12px 8px 12px 12px}.notification-title{font-weight:600;color:var(--text-primary);font-size:13.5px;margin-bottom:3px;line-height:1.35}.notification-message{color:var(--text-secondary);font-size:12px;line-height:1.45;margin-bottom:7px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.notification-meta{display:flex;justify-content:space-between;font-size:11px;color:var(--text-muted)}.app-name{font-weight:600;color:var(--primary-color)}.icon-btn{background:none;border:none;cursor:pointer;width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;align-self:center;margin-right:8px;transition:color .15s,background-color .15s;color:var(--text-muted)}.read-btn:hover{color:var(--success-color);background:#43a0471a}.delete-btn:hover{color:var(--error-color);background:#f443361a}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;height:100%;padding:40px 20px;color:var(--text-muted)}.empty-icon{opacity:.35}.empty-state p{margin:0;font-size:13px}.panel-footer{padding:10px 14px;border-top:1px solid var(--border-color);background:var(--bg-secondary);flex-shrink:0}.footer-actions{display:flex;gap:8px}.footer-actions .action-btn{flex:1}.action-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:8px 12px;background:var(--primary-color);color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:12.5px;font-weight:600;transition:background-color .18s,transform .12s}.action-btn:hover{background:var(--primary-hover);transform:translateY(-1px)}.delete-all-btn{background:var(--error-color)}.delete-all-btn:hover{background:var(--error-hover)}.modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1060;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.modal-container{background:var(--bg-primary);border-radius:14px;width:90%;max-width:580px;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 16px 48px #00000040;animation:modal-in .2s cubic-bezier(.16,1,.3,1)}@keyframes modal-in{0%{opacity:0;transform:scale(.94) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--border-color);background:var(--bg-secondary);border-radius:14px 14px 0 0;border-top:3px solid transparent}.modal-header.modal-type-info{border-top-color:var(--info-color)}.modal-header.modal-type-success{border-top-color:var(--success-color)}.modal-header.modal-type-warning{border-top-color:var(--warning-color)}.modal-header.modal-type-error{border-top-color:var(--error-color)}.modal-header-left{display:flex;align-items:center;gap:10px;min-width:0}.modal-type-icon{flex-shrink:0;width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center}.modal-type-info .modal-type-icon{color:var(--info-color);background:var(--info-bg)}.modal-type-success .modal-type-icon{color:var(--success-color);background:var(--success-bg)}.modal-type-warning .modal-type-icon{color:var(--warning-color);background:var(--warning-bg)}.modal-type-error .modal-type-icon{color:var(--error-color);background:var(--error-bg)}.modal-header h3{margin:0;font-size:15px;font-weight:700;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.modal-meta{display:flex;justify-content:space-between;padding:8px 20px;font-size:11.5px;color:var(--text-muted);border-bottom:1px solid var(--border-light)}.modal-body{padding:20px;overflow-y:auto;flex:1;color:var(--text-primary);font-size:14px;line-height:1.65}.modal-footer{padding:12px 20px;border-top:1px solid var(--border-color);background:var(--bg-secondary);border-radius:0 0 14px 14px;display:flex;justify-content:flex-end}.modal-footer .action-btn{width:auto;padding:8px 24px}@media(max-width:600px){.notification-panel{width:100%;right:-100%}.modal-container{width:95%;max-height:90vh}}\n"] }]
+  `, styles: [":host{display:block;position:relative;--primary-color: #1976d2;--primary-hover: #1565c0;--primary-light: rgba(25, 118, 210, .1);--success-color: #43a047;--error-color: #f44336;--error-hover: #d32f2f;--unread-accent: #1976d2;--info-color: #2196f3;--info-bg: rgba(33, 150, 243, .1);--success-bg: rgba(67, 160, 71, .1);--warning-color: #f57c00;--warning-bg: rgba(245, 124, 0, .1);--error-bg: rgba(244, 67, 54, .1);--text-primary: #212121;--text-secondary: #616161;--text-muted: #9e9e9e;--bg-primary: #ffffff;--bg-secondary: #f8f9fa;--bg-hover: #f0f4ff;--bg-unread: rgba(25, 118, 210, .06);--border-color: #e0e0e0;--border-light: #eeeeee;--shadow: rgba(0, 0, 0, .15)}:host(.theme-dark){display:block;position:relative;--primary-color: #90caf9;--primary-hover: #64b5f6;--primary-light: rgba(144, 202, 249, .1);--success-color: #66bb6a;--error-color: #ef5350;--error-hover: #c62828;--unread-accent: #90caf9;--info-color: #64b5f6;--info-bg: rgba(100, 181, 246, .12);--success-bg: rgba(102, 187, 106, .12);--warning-color: #ffb74d;--warning-bg: rgba(255, 183, 77, .12);--error-bg: rgba(239, 83, 80, .12);--text-primary: #e0e0e0;--text-secondary: #b0b0b0;--text-muted: #757575;--bg-primary: #1e1e2e;--bg-secondary: #27273a;--bg-hover: #2a2d4a;--bg-unread: rgba(144, 202, 249, .08);--border-color: #383850;--border-light: #2e2e42;--shadow: rgba(0, 0, 0, .4)}.notification-panel{position:fixed;top:0;right:-360px;width:360px;height:100vh;background:var(--bg-primary);box-shadow:-4px 0 24px var(--shadow);display:flex;flex-direction:column;z-index:1030;transition:right .3s cubic-bezier(.16,1,.3,1)}.notification-panel.open{right:0}.panel-header{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid var(--border-color);background:var(--bg-secondary);flex-shrink:0}.panel-header-left{display:flex;align-items:center;gap:9px;color:var(--primary-color)}.panel-header h3{margin:0;font-size:16px;font-weight:700;color:var(--text-primary);letter-spacing:.1px}.close-btn{background:none;border:none;cursor:pointer;color:var(--text-muted);width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:color .2s,background-color .2s}.close-btn:hover{color:var(--text-primary);background-color:var(--bg-hover)}.tabs{display:flex;gap:6px;padding:10px 14px;border-bottom:1px solid var(--border-color);background:var(--bg-secondary);flex-shrink:0}.tab-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:7px 12px;background:none;border:1px solid var(--border-color);border-radius:20px;color:var(--text-secondary);cursor:pointer;font-size:13px;font-weight:500;transition:all .18s}.tab-btn:hover{background:var(--bg-hover);color:var(--primary-color);border-color:var(--primary-color)}.tab-btn.active{background:var(--primary-color);border-color:var(--primary-color);color:#fff}.tab-count{background:#ffffff40;border-radius:10px;min-width:18px;height:18px;padding:0 5px;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center}.tab-btn:not(.active) .tab-count{background:var(--error-color);color:#fff}.read-count{background:#ffffff40}.tab-btn:not(.active) .read-count{background:var(--text-muted)}.notifications-list{flex:1;overflow-y:auto}.notification-item{display:flex;align-items:flex-start;gap:0;border-bottom:1px solid var(--border-light);cursor:pointer;background:var(--bg-primary);transition:background-color .15s;position:relative}.notification-item:hover{background:var(--bg-hover)}.notification-item.unread{background:var(--bg-unread)}.notif-accent{width:3px;align-self:stretch;flex-shrink:0;background:transparent;border-radius:0 2px 2px 0;opacity:.3}.notification-item.unread .notif-accent{opacity:1}.notif-accent.type-info{background:var(--info-color)}.notif-accent.type-success{background:var(--success-color)}.notif-accent.type-warning{background:var(--warning-color)}.notif-accent.type-error{background:var(--error-color)}.notif-type-icon{flex-shrink:0;width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;align-self:center;margin-left:10px}.notif-type-icon.type-info{color:var(--info-color);background:var(--info-bg)}.notif-type-icon.type-success{color:var(--success-color);background:var(--success-bg)}.notif-type-icon.type-warning{color:var(--warning-color);background:var(--warning-bg)}.notif-type-icon.type-error{color:var(--error-color);background:var(--error-bg)}.notification-content{flex:1;min-width:0;padding:12px 8px 12px 12px}.notification-title{font-weight:600;color:var(--text-primary);font-size:13.5px;margin-bottom:3px;line-height:1.35}.notification-message{color:var(--text-secondary);font-size:12px;line-height:1.45;margin-bottom:7px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.notification-meta{display:flex;justify-content:space-between;font-size:11px;color:var(--text-muted)}.app-name{font-weight:600;color:var(--primary-color)}.icon-btn{background:none;border:none;cursor:pointer;width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;align-self:center;margin-right:8px;transition:color .15s,background-color .15s;color:var(--text-muted)}.read-btn:hover{color:var(--success-color);background:#43a0471a}.delete-btn:hover{color:var(--error-color);background:#f443361a}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;height:100%;padding:40px 20px;color:var(--text-muted)}.empty-icon{opacity:.35}.empty-state p{margin:0;font-size:13px}.panel-footer{padding:10px 14px;border-top:1px solid var(--border-color);background:var(--bg-secondary);flex-shrink:0}.footer-actions{display:flex;gap:8px}.footer-actions .action-btn{flex:1}.action-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:8px 12px;background:var(--primary-color);color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:12.5px;font-weight:600;transition:background-color .18s,transform .12s}.action-btn:hover{background:var(--primary-hover);transform:translateY(-1px)}.delete-all-btn{background:var(--error-color)}.delete-all-btn:hover{background:var(--error-hover)}.modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1060;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.modal-container{background:var(--bg-primary);border-radius:14px;width:90%;max-width:580px;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 16px 48px #00000040;animation:modal-in .2s cubic-bezier(.16,1,.3,1)}@keyframes modal-in{0%{opacity:0;transform:scale(.94) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--border-color);background:var(--bg-secondary);border-radius:14px 14px 0 0;border-top:3px solid transparent}.modal-header.modal-type-info{border-top-color:var(--info-color)}.modal-header.modal-type-success{border-top-color:var(--success-color)}.modal-header.modal-type-warning{border-top-color:var(--warning-color)}.modal-header.modal-type-error{border-top-color:var(--error-color)}.modal-header-left{display:flex;align-items:center;gap:10px;min-width:0}.modal-type-icon{flex-shrink:0;width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center}.modal-type-info .modal-type-icon{color:var(--info-color);background:var(--info-bg)}.modal-type-success .modal-type-icon{color:var(--success-color);background:var(--success-bg)}.modal-type-warning .modal-type-icon{color:var(--warning-color);background:var(--warning-bg)}.modal-type-error .modal-type-icon{color:var(--error-color);background:var(--error-bg)}.modal-header h3{margin:0;font-size:15px;font-weight:700;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.modal-meta{display:flex;justify-content:space-between;padding:8px 20px;font-size:11.5px;color:var(--text-muted);border-bottom:1px solid var(--border-light)}.modal-body{padding:20px;overflow-y:auto;flex:1;color:var(--text-primary);font-size:14px;line-height:1.65}.modal-body-iframe{padding:0}.notification-iframe{width:100%;height:100%;border:none;display:block}.modal-footer{padding:12px 20px;border-top:1px solid var(--border-color);background:var(--bg-secondary);border-radius:0 0 14px 14px;display:flex;justify-content:flex-end}.modal-footer .action-btn{width:auto;padding:8px 24px}@media(max-width:600px){.notification-panel{width:100%;right:-100%}.modal-container{width:95%;max-height:90vh}}\n"] }]
         }], ctorParameters: () => [{ type: MesAuthService }, { type: ToastService }, { type: ThemeService }], propDecorators: { notificationRead: [{
                 type: Output
             }], themeClass: [{
@@ -1445,12 +1430,456 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 args: ['class']
             }] } });
 
+class MaApprovalService {
+    apiBase = '';
+    http;
+    config = null;
+    constructor() { }
+    init(config, httpClient) {
+        this.config = config;
+        this.http = httpClient;
+        this.apiBase = config.apiBaseUrl.replace(/\/$/, '');
+    }
+    get opts() {
+        return { withCredentials: this.config?.withCredentials ?? true };
+    }
+    // ====================== Dashboard ======================
+    getDashboard() {
+        return this.http.get(`${this.apiBase}/approval/dashboard`, this.opts);
+    }
+    // ====================== Pending & My Requests ======================
+    getPendingApprovals(page = 1, pageSize = 20) {
+        return this.http.get(`${this.apiBase}/approval/pending?page=${page}&pageSize=${pageSize}`, this.opts);
+    }
+    getMyRequests(page = 1, pageSize = 20, status) {
+        let url = `${this.apiBase}/approval/my-requests?page=${page}&pageSize=${pageSize}`;
+        if (status !== undefined)
+            url += `&status=${status}`;
+        return this.http.get(url, this.opts);
+    }
+    // ====================== Document ======================
+    getDocument(id) {
+        return this.http.get(`${this.apiBase}/approval/documents/${id}`, this.opts);
+    }
+    getDocumentHistory(id) {
+        return this.http.get(`${this.apiBase}/approval/documents/${id}/history`, this.opts);
+    }
+    getDocumentContentUrl(id) {
+        return `${this.apiBase}/approval/documents/${id}/content`;
+    }
+    getDocumentThumbnailUrl(id) {
+        return `${this.apiBase}/approval/documents/${id}/thumbnail`;
+    }
+    // ====================== Actions ======================
+    approve(documentId, comment) {
+        const body = { comment };
+        return this.http.post(`${this.apiBase}/approval/documents/${documentId}/approve`, body, this.opts);
+    }
+    reject(documentId, comment) {
+        const body = { comment };
+        return this.http.post(`${this.apiBase}/approval/documents/${documentId}/reject`, body, this.opts);
+    }
+    delegate(documentId, toUserId, reason) {
+        const body = { toUserId, reason };
+        return this.http.post(`${this.apiBase}/approval/documents/${documentId}/delegate`, body, this.opts);
+    }
+    cancel(documentId, reason) {
+        let url = `${this.apiBase}/approval/documents/${documentId}`;
+        if (reason)
+            url += `?reason=${encodeURIComponent(reason)}`;
+        return this.http.delete(url, this.opts);
+    }
+    // ====================== Templates ======================
+    getTemplates(appId) {
+        let url = `${this.apiBase}/approval/templates`;
+        if (appId)
+            url += `?appId=${encodeURIComponent(appId)}`;
+        return this.http.get(url, this.opts);
+    }
+    getTemplate(id) {
+        return this.http.get(`${this.apiBase}/approval/templates/${id}`, this.opts);
+    }
+    createTemplate(request) {
+        return this.http.post(`${this.apiBase}/approval/templates`, request, this.opts);
+    }
+    updateTemplate(id, request) {
+        return this.http.put(`${this.apiBase}/approval/templates/${id}`, request, this.opts);
+    }
+    deleteTemplate(id) {
+        return this.http.delete(`${this.apiBase}/approval/templates/${id}`, this.opts);
+    }
+    // ====================== Create (used by ma-arv-container) ======================
+    createApproval(request) {
+        return this.http.post(`${this.apiBase}/approval/documents`, request, this.opts);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MaApprovalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MaApprovalService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MaApprovalService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+// ====================== Enums ======================
+var ApprovalStepMode;
+(function (ApprovalStepMode) {
+    ApprovalStepMode[ApprovalStepMode["Sequential"] = 0] = "Sequential";
+    ApprovalStepMode[ApprovalStepMode["Parallel"] = 1] = "Parallel";
+})(ApprovalStepMode || (ApprovalStepMode = {}));
+var ApprovalDocumentStatus;
+(function (ApprovalDocumentStatus) {
+    ApprovalDocumentStatus[ApprovalDocumentStatus["Draft"] = 0] = "Draft";
+    ApprovalDocumentStatus[ApprovalDocumentStatus["Pending"] = 1] = "Pending";
+    ApprovalDocumentStatus[ApprovalDocumentStatus["Approved"] = 2] = "Approved";
+    ApprovalDocumentStatus[ApprovalDocumentStatus["Rejected"] = 3] = "Rejected";
+    ApprovalDocumentStatus[ApprovalDocumentStatus["Cancelled"] = 4] = "Cancelled";
+    ApprovalDocumentStatus[ApprovalDocumentStatus["Expired"] = 5] = "Expired";
+})(ApprovalDocumentStatus || (ApprovalDocumentStatus = {}));
+var ApprovalStepStatus;
+(function (ApprovalStepStatus) {
+    ApprovalStepStatus[ApprovalStepStatus["Waiting"] = 0] = "Waiting";
+    ApprovalStepStatus[ApprovalStepStatus["Active"] = 1] = "Active";
+    ApprovalStepStatus[ApprovalStepStatus["Approved"] = 2] = "Approved";
+    ApprovalStepStatus[ApprovalStepStatus["Rejected"] = 3] = "Rejected";
+    ApprovalStepStatus[ApprovalStepStatus["Delegated"] = 4] = "Delegated";
+    ApprovalStepStatus[ApprovalStepStatus["Expired"] = 5] = "Expired";
+    ApprovalStepStatus[ApprovalStepStatus["Skipped"] = 6] = "Skipped";
+})(ApprovalStepStatus || (ApprovalStepStatus = {}));
+var ApprovalActionType;
+(function (ApprovalActionType) {
+    ApprovalActionType[ApprovalActionType["Created"] = 0] = "Created";
+    ApprovalActionType[ApprovalActionType["Submitted"] = 1] = "Submitted";
+    ApprovalActionType[ApprovalActionType["Approved"] = 2] = "Approved";
+    ApprovalActionType[ApprovalActionType["Rejected"] = 3] = "Rejected";
+    ApprovalActionType[ApprovalActionType["Delegated"] = 4] = "Delegated";
+    ApprovalActionType[ApprovalActionType["Cancelled"] = 5] = "Cancelled";
+    ApprovalActionType[ApprovalActionType["Commented"] = 6] = "Commented";
+    ApprovalActionType[ApprovalActionType["Expired"] = 7] = "Expired";
+    ApprovalActionType[ApprovalActionType["StepAdvanced"] = 8] = "StepAdvanced";
+})(ApprovalActionType || (ApprovalActionType = {}));
+
+class MaApprovalPanelComponent {
+    approvalActioned = new EventEmitter();
+    isOpen = false;
+    loading = false;
+    activeTab = 'processing';
+    processingItems = [];
+    approvedItems = [];
+    rejectedItems = [];
+    destroy$ = new Subject();
+    mesAuth = inject(MesAuthService);
+    http = inject(HttpClient);
+    router = inject(Router);
+    approvalSvc = null;
+    ngOnInit() {
+        const config = this.mesAuth.getConfig();
+        if (config) {
+            this.approvalSvc = new MaApprovalService();
+            this.approvalSvc.init(config, this.http);
+        }
+        this.mesAuth.approvalEvents$.pipe(takeUntil(this.destroy$)).subscribe(() => {
+            if (this.isOpen)
+                this.loadCurrentTab();
+        });
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    open() {
+        this.isOpen = true;
+        this.loadAllTabs();
+    }
+    close() {
+        this.isOpen = false;
+    }
+    toggle() {
+        if (this.isOpen)
+            this.close();
+        else
+            this.open();
+    }
+    switchTab(tab) {
+        this.activeTab = tab;
+        this.loadCurrentTab();
+    }
+    loadAllTabs() {
+        this.loading = true;
+        if (!this.approvalSvc) {
+            this.loading = false;
+            return;
+        }
+        let pending = 3;
+        const done = () => { if (--pending === 0)
+            this.loading = false; };
+        this.approvalSvc.getPendingApprovals(1, 100).pipe(takeUntil(this.destroy$)).subscribe({
+            next: r => { this.processingItems = r.items; done(); },
+            error: () => done()
+        });
+        this.approvalSvc.getMyRequests(1, 10, ApprovalDocumentStatus.Approved).pipe(takeUntil(this.destroy$)).subscribe({
+            next: r => { this.approvedItems = r.items; done(); },
+            error: () => done()
+        });
+        this.approvalSvc.getMyRequests(1, 10, ApprovalDocumentStatus.Rejected).pipe(takeUntil(this.destroy$)).subscribe({
+            next: r => { this.rejectedItems = r.items; done(); },
+            error: () => done()
+        });
+    }
+    loadCurrentTab() {
+        if (!this.approvalSvc)
+            return;
+        if (this.activeTab === 'processing') {
+            this.approvalSvc.getPendingApprovals(1, 100).pipe(takeUntil(this.destroy$)).subscribe({
+                next: r => this.processingItems = r.items,
+                error: () => { }
+            });
+        }
+        else if (this.activeTab === 'approved') {
+            this.approvalSvc.getMyRequests(1, 10, ApprovalDocumentStatus.Approved).pipe(takeUntil(this.destroy$)).subscribe({
+                next: r => this.approvedItems = r.items,
+                error: () => { }
+            });
+        }
+        else {
+            this.approvalSvc.getMyRequests(1, 10, ApprovalDocumentStatus.Rejected).pipe(takeUntil(this.destroy$)).subscribe({
+                next: r => this.rejectedItems = r.items,
+                error: () => { }
+            });
+        }
+    }
+    navigateToDetail(id) {
+        this.close();
+        this.router.navigate(['/auth/approval/detail', id]);
+        this.approvalActioned.emit();
+    }
+    showMore(status) {
+        this.close();
+        this.router.navigate(['/auth/approval/my-requests'], { queryParams: { status } });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MaApprovalPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: MaApprovalPanelComponent, isStandalone: true, selector: "ma-approval-panel", outputs: { approvalActioned: "approvalActioned" }, ngImport: i0, template: `
+    <div class="approval-backdrop" [class.open]="isOpen" (click)="close()"></div>
+    <div class="approval-panel" [class.open]="isOpen">
+
+      <!-- Header -->
+      <div class="panel-header">
+        <div class="panel-header-left">
+          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M9 11l3 3L22 4"/>
+            <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/>
+          </svg>
+          <h3>Approvals</h3>
+        </div>
+        <button class="close-btn" (click)="close()" aria-label="Close">
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+            <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
+          </svg>
+        </button>
+      </div>
+
+      <!-- Tabs -->
+      <div class="tabs">
+        <button class="tab-btn" [class.active]="activeTab === 'processing'" (click)="switchTab('processing')">
+          Processing
+          <span class="tab-badge" *ngIf="processingItems.length > 0">{{ processingItems.length }}</span>
+        </button>
+        <button class="tab-btn" [class.active]="activeTab === 'approved'" (click)="switchTab('approved')">
+          Approved
+        </button>
+        <button class="tab-btn" [class.active]="activeTab === 'rejected'" (click)="switchTab('rejected')">
+          Rejected
+        </button>
+      </div>
+
+      <!-- Content -->
+      <div class="panel-content">
+        <!-- Loading -->
+        <div class="loading-state" *ngIf="loading">
+          <div class="spinner"></div>
+          <span>Loading...</span>
+        </div>
+
+        <!-- Processing tab -->
+        <ng-container *ngIf="!loading && activeTab === 'processing'">
+          <div class="empty-state" *ngIf="processingItems.length === 0">
+            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" opacity="0.4"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>
+            <p>No pending approvals</p>
+          </div>
+          <div class="approval-item" *ngFor="let item of processingItems" (click)="navigateToDetail(item.id)">
+            <div class="item-title">{{ item.title }}</div>
+            <div class="item-meta">
+              <span class="item-requester">By {{ item.requestedByUserName }}</span>
+              <span class="item-step" *ngIf="item.currentStepName">· {{ item.currentStepName }}</span>
+            </div>
+            <div class="item-footer">
+              <span class="item-time">{{ item.createdAt | date:'shortDate' }}</span>
+              <span class="item-link">View &rarr;</span>
+            </div>
+          </div>
+        </ng-container>
+
+        <!-- Approved tab -->
+        <ng-container *ngIf="!loading && activeTab === 'approved'">
+          <div class="empty-state" *ngIf="approvedItems.length === 0">
+            <p>No approved documents</p>
+          </div>
+          <div class="approval-item approved" *ngFor="let item of approvedItems" (click)="navigateToDetail(item.id)">
+            <div class="item-title">{{ item.title }}</div>
+            <div class="item-meta">
+              <span class="item-requester">By {{ item.requestedByUserName }}</span>
+            </div>
+            <div class="item-footer">
+              <span class="status-badge approved-badge">Approved</span>
+              <span class="item-time">{{ item.completedAt | date:'shortDate' }}</span>
+              <span class="item-link">View &rarr;</span>
+            </div>
+          </div>
+          <div class="show-more" *ngIf="approvedItems.length >= 10" (click)="showMore('approved')">
+            Show more &rarr;
+          </div>
+        </ng-container>
+
+        <!-- Rejected tab -->
+        <ng-container *ngIf="!loading && activeTab === 'rejected'">
+          <div class="empty-state" *ngIf="rejectedItems.length === 0">
+            <p>No rejected documents</p>
+          </div>
+          <div class="approval-item rejected" *ngFor="let item of rejectedItems" (click)="navigateToDetail(item.id)">
+            <div class="item-title">{{ item.title }}</div>
+            <div class="item-meta">
+              <span class="item-requester">By {{ item.requestedByUserName }}</span>
+            </div>
+            <div class="item-footer">
+              <span class="status-badge rejected-badge">Rejected</span>
+              <span class="item-time">{{ item.completedAt | date:'shortDate' }}</span>
+              <span class="item-link">View &rarr;</span>
+            </div>
+          </div>
+          <div class="show-more" *ngIf="rejectedItems.length >= 10" (click)="showMore('rejected')">
+            Show more &rarr;
+          </div>
+        </ng-container>
+      </div>
+    </div>
+  `, isInline: true, styles: [":host{--primary: #90caf9;--success: #66bb6a;--error: #ef5350;--text-primary: #e0e0e0;--text-secondary: #b0b0b0;--text-muted: #757575;--bg-primary: #1e1e2e;--bg-secondary: #27273a;--bg-hover: #2a2d4a;--border-color: #383850;--shadow: rgba(0,0,0,.4)}:host(.theme-light){--primary: #1565c0;--success: #2e7d32;--error: #c62828;--text-primary: #212121;--text-secondary: #616161;--text-muted: #9e9e9e;--bg-primary: #ffffff;--bg-secondary: #f5f5f5;--bg-hover: #e8eaf6;--border-color: #e0e0e0;--shadow: rgba(0,0,0,.15)}.approval-backdrop{display:none;position:fixed;inset:0;background:#0006;z-index:1029}.approval-backdrop.open{display:block}.approval-panel{position:fixed;top:0;right:-380px;width:380px;height:100vh;background:var(--bg-primary);box-shadow:-4px 0 24px var(--shadow);display:flex;flex-direction:column;z-index:1030;transition:right .3s cubic-bezier(.16,1,.3,1)}.approval-panel.open{right:0}.panel-header{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid var(--border-color);background:var(--bg-secondary);flex-shrink:0}.panel-header-left{display:flex;align-items:center;gap:9px;color:var(--primary)}.panel-header h3{margin:0;font-size:16px;font-weight:700;color:var(--text-primary)}.close-btn{background:none;border:none;cursor:pointer;color:var(--text-muted);width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s}.close-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.tabs{display:flex;border-bottom:1px solid var(--border-color);background:var(--bg-secondary);flex-shrink:0}.tab-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:11px 8px;background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;font-size:13px;font-weight:500;color:var(--text-muted);transition:color .15s,border-color .15s}.tab-btn.active{color:var(--primary);border-bottom-color:var(--primary)}.tab-btn:hover:not(.active){color:var(--text-secondary)}.tab-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;background:var(--primary);color:#fff;font-size:11px;font-weight:700;border-radius:9px}.panel-content{flex:1;overflow-y:auto;padding:8px 0}.loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;gap:12px;color:var(--text-muted);font-size:13px}.spinner{width:24px;height:24px;border:2px solid var(--border-color);border-top-color:var(--primary);border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;gap:10px;color:var(--text-muted)}.empty-state p{margin:0;font-size:14px}.approval-item{padding:14px 18px;border-bottom:1px solid var(--border-color);cursor:pointer;transition:background .15s}.approval-item:hover{background:var(--bg-hover)}.approval-item:last-child{border-bottom:none}.item-title{font-size:14px;font-weight:600;color:var(--text-primary);margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.item-meta{font-size:12px;color:var(--text-muted);margin-bottom:8px;display:flex;gap:4px;flex-wrap:wrap}.item-footer{display:flex;align-items:center;gap:8px}.item-time{font-size:11px;color:var(--text-muted);margin-right:auto}.item-link{font-size:12px;color:var(--primary);font-weight:500}.status-badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:600;letter-spacing:.3px}.approved-badge{background:#66bb6a26;color:var(--success)}.rejected-badge{background:#ef53501f;color:var(--error)}.show-more{text-align:center;padding:14px;font-size:13px;color:var(--primary);cursor:pointer;font-weight:500}.show-more:hover{text-decoration:underline}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: DatePipe, name: "date" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MaApprovalPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ma-approval-panel', standalone: true, imports: [NgIf, NgFor, DatePipe], template: `
+    <div class="approval-backdrop" [class.open]="isOpen" (click)="close()"></div>
+    <div class="approval-panel" [class.open]="isOpen">
+
+      <!-- Header -->
+      <div class="panel-header">
+        <div class="panel-header-left">
+          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M9 11l3 3L22 4"/>
+            <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/>
+          </svg>
+          <h3>Approvals</h3>
+        </div>
+        <button class="close-btn" (click)="close()" aria-label="Close">
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+            <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
+          </svg>
+        </button>
+      </div>
+
+      <!-- Tabs -->
+      <div class="tabs">
+        <button class="tab-btn" [class.active]="activeTab === 'processing'" (click)="switchTab('processing')">
+          Processing
+          <span class="tab-badge" *ngIf="processingItems.length > 0">{{ processingItems.length }}</span>
+        </button>
+        <button class="tab-btn" [class.active]="activeTab === 'approved'" (click)="switchTab('approved')">
+          Approved
+        </button>
+        <button class="tab-btn" [class.active]="activeTab === 'rejected'" (click)="switchTab('rejected')">
+          Rejected
+        </button>
+      </div>
+
+      <!-- Content -->
+      <div class="panel-content">
+        <!-- Loading -->
+        <div class="loading-state" *ngIf="loading">
+          <div class="spinner"></div>
+          <span>Loading...</span>
+        </div>
+
+        <!-- Processing tab -->
+        <ng-container *ngIf="!loading && activeTab === 'processing'">
+          <div class="empty-state" *ngIf="processingItems.length === 0">
+            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" opacity="0.4"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>
+            <p>No pending approvals</p>
+          </div>
+          <div class="approval-item" *ngFor="let item of processingItems" (click)="navigateToDetail(item.id)">
+            <div class="item-title">{{ item.title }}</div>
+            <div class="item-meta">
+              <span class="item-requester">By {{ item.requestedByUserName }}</span>
+              <span class="item-step" *ngIf="item.currentStepName">· {{ item.currentStepName }}</span>
+            </div>
+            <div class="item-footer">
+              <span class="item-time">{{ item.createdAt | date:'shortDate' }}</span>
+              <span class="item-link">View &rarr;</span>
+            </div>
+          </div>
+        </ng-container>
+
+        <!-- Approved tab -->
+        <ng-container *ngIf="!loading && activeTab === 'approved'">
+          <div class="empty-state" *ngIf="approvedItems.length === 0">
+            <p>No approved documents</p>
+          </div>
+          <div class="approval-item approved" *ngFor="let item of approvedItems" (click)="navigateToDetail(item.id)">
+            <div class="item-title">{{ item.title }}</div>
+            <div class="item-meta">
+              <span class="item-requester">By {{ item.requestedByUserName }}</span>
+            </div>
+            <div class="item-footer">
+              <span class="status-badge approved-badge">Approved</span>
+              <span class="item-time">{{ item.completedAt | date:'shortDate' }}</span>
+              <span class="item-link">View &rarr;</span>
+            </div>
+          </div>
+          <div class="show-more" *ngIf="approvedItems.length >= 10" (click)="showMore('approved')">
+            Show more &rarr;
+          </div>
+        </ng-container>
+
+        <!-- Rejected tab -->
+        <ng-container *ngIf="!loading && activeTab === 'rejected'">
+          <div class="empty-state" *ngIf="rejectedItems.length === 0">
+            <p>No rejected documents</p>
+          </div>
+          <div class="approval-item rejected" *ngFor="let item of rejectedItems" (click)="navigateToDetail(item.id)">
+            <div class="item-title">{{ item.title }}</div>
+            <div class="item-meta">
+              <span class="item-requester">By {{ item.requestedByUserName }}</span>
+            </div>
+            <div class="item-footer">
+              <span class="status-badge rejected-badge">Rejected</span>
+              <span class="item-time">{{ item.completedAt | date:'shortDate' }}</span>
+              <span class="item-link">View &rarr;</span>
+            </div>
+          </div>
+          <div class="show-more" *ngIf="rejectedItems.length >= 10" (click)="showMore('rejected')">
+            Show more &rarr;
+          </div>
+        </ng-container>
+      </div>
+    </div>
+  `, styles: [":host{--primary: #90caf9;--success: #66bb6a;--error: #ef5350;--text-primary: #e0e0e0;--text-secondary: #b0b0b0;--text-muted: #757575;--bg-primary: #1e1e2e;--bg-secondary: #27273a;--bg-hover: #2a2d4a;--border-color: #383850;--shadow: rgba(0,0,0,.4)}:host(.theme-light){--primary: #1565c0;--success: #2e7d32;--error: #c62828;--text-primary: #212121;--text-secondary: #616161;--text-muted: #9e9e9e;--bg-primary: #ffffff;--bg-secondary: #f5f5f5;--bg-hover: #e8eaf6;--border-color: #e0e0e0;--shadow: rgba(0,0,0,.15)}.approval-backdrop{display:none;position:fixed;inset:0;background:#0006;z-index:1029}.approval-backdrop.open{display:block}.approval-panel{position:fixed;top:0;right:-380px;width:380px;height:100vh;background:var(--bg-primary);box-shadow:-4px 0 24px var(--shadow);display:flex;flex-direction:column;z-index:1030;transition:right .3s cubic-bezier(.16,1,.3,1)}.approval-panel.open{right:0}.panel-header{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid var(--border-color);background:var(--bg-secondary);flex-shrink:0}.panel-header-left{display:flex;align-items:center;gap:9px;color:var(--primary)}.panel-header h3{margin:0;font-size:16px;font-weight:700;color:var(--text-primary)}.close-btn{background:none;border:none;cursor:pointer;color:var(--text-muted);width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s}.close-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.tabs{display:flex;border-bottom:1px solid var(--border-color);background:var(--bg-secondary);flex-shrink:0}.tab-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:11px 8px;background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;font-size:13px;font-weight:500;color:var(--text-muted);transition:color .15s,border-color .15s}.tab-btn.active{color:var(--primary);border-bottom-color:var(--primary)}.tab-btn:hover:not(.active){color:var(--text-secondary)}.tab-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;background:var(--primary);color:#fff;font-size:11px;font-weight:700;border-radius:9px}.panel-content{flex:1;overflow-y:auto;padding:8px 0}.loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;gap:12px;color:var(--text-muted);font-size:13px}.spinner{width:24px;height:24px;border:2px solid var(--border-color);border-top-color:var(--primary);border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;gap:10px;color:var(--text-muted)}.empty-state p{margin:0;font-size:14px}.approval-item{padding:14px 18px;border-bottom:1px solid var(--border-color);cursor:pointer;transition:background .15s}.approval-item:hover{background:var(--bg-hover)}.approval-item:last-child{border-bottom:none}.item-title{font-size:14px;font-weight:600;color:var(--text-primary);margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.item-meta{font-size:12px;color:var(--text-muted);margin-bottom:8px;display:flex;gap:4px;flex-wrap:wrap}.item-footer{display:flex;align-items:center;gap:8px}.item-time{font-size:11px;color:var(--text-muted);margin-right:auto}.item-link{font-size:12px;color:var(--primary);font-weight:500}.status-badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:600;letter-spacing:.3px}.approved-badge{background:#66bb6a26;color:var(--success)}.rejected-badge{background:#ef53501f;color:var(--error)}.show-more{text-align:center;padding:14px;font-size:13px;color:var(--primary);cursor:pointer;font-weight:500}.show-more:hover{text-decoration:underline}\n"] }]
+        }], propDecorators: { approvalActioned: [{
+                type: Output
+            }] } });
+
 class MaUserComponent {
     userProfile;
+    approvalPanel;
     ngAfterViewInit() {
-        // Ensure proper initialization
         if (this.userProfile) {
             this.userProfile.loadUnreadCount();
+            this.userProfile.loadPendingApprovalCount();
         }
     }
     onNotificationRead() {
@@ -1458,27 +1887,43 @@ class MaUserComponent {
             this.userProfile.loadUnreadCount();
         }
     }
+    onApprovalActioned() {
+        if (this.userProfile) {
+            this.userProfile.loadPendingApprovalCount();
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MaUserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: MaUserComponent, isStandalone: true, selector: "ma-user", viewQueries: [{ propertyName: "userProfile", first: true, predicate: UserProfileComponent, descendants: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: MaUserComponent, isStandalone: true, selector: "ma-user", viewQueries: [{ propertyName: "userProfile", first: true, predicate: UserProfileComponent, descendants: true }, { propertyName: "approvalPanel", first: true, predicate: MaApprovalPanelComponent, descendants: true }], ngImport: i0, template: `
     <ma-toast-container></ma-toast-container>
     <div class="user-header">
-      <ma-user-profile (notificationClick)="notificationPanel.open()"></ma-user-profile>
+      <ma-user-profile
+        (notificationClick)="notificationPanel.open()"
+        (approvalClick)="approvalPanel.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"] }] });
+    <ma-approval-panel #approvalPanel (approvalActioned)="onApprovalActioned()"></ma-approval-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", "approvalClick"] }, { kind: "component", type: NotificationPanelComponent, selector: "ma-notification-panel", outputs: ["notificationRead"] }, { kind: "component", type: MaApprovalPanelComponent, selector: "ma-approval-panel", outputs: ["approvalActioned"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MaUserComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ma-user', standalone: true, imports: [ToastContainerComponent, UserProfileComponent, NotificationPanelComponent], template: `
+            args: [{ selector: 'ma-user', standalone: true, imports: [ToastContainerComponent, UserProfileComponent, NotificationPanelComponent, MaApprovalPanelComponent], template: `
     <ma-toast-container></ma-toast-container>
     <div class="user-header">
-      <ma-user-profile (notificationClick)="notificationPanel.open()"></ma-user-profile>
+      <ma-user-profile
+        (notificationClick)="notificationPanel.open()"
+        (approvalClick)="approvalPanel.open()">
+      </ma-user-profile>
     </div>
     <ma-notification-panel #notificationPanel (notificationRead)="onNotificationRead()"></ma-notification-panel>
+    <ma-approval-panel #approvalPanel (approvalActioned)="onApprovalActioned()"></ma-approval-panel>
   `, styles: [".user-header{display:flex;justify-content:flex-end}\n"] }]
         }], propDecorators: { userProfile: [{
                 type: ViewChild,
                 args: [UserProfileComponent]
+            }], approvalPanel: [{
+                type: ViewChild,
+                args: [MaApprovalPanelComponent]
             }] } });
 
 class NotificationBadgeComponent {
@@ -1563,9 +2008,587 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 args: ['class']
             }] } });
 
+class MaArvContainerComponent {
+    title = '';
+    description;
+    referenceId = '';
+    templateId;
+    callbackUrl;
+    deadlineHours;
+    approvalSubmitted = new EventEmitter();
+    approvalSubmiting = new EventEmitter();
+    cancelled = new EventEmitter();
+    contentBody;
+    routingMode = 'template';
+    templates = [];
+    selectedTemplateId = null;
+    adHocSteps = [];
+    referenceUserIds = [];
+    refSearchQuery = '';
+    refSearchResults = [];
+    userSearchQuery = [];
+    userSearchResults = [];
+    submitting = false;
+    isSubmitted = false;
+    errorMessage = '';
+    userLabelMap = {};
+    destroy$ = new Subject();
+    mesAuth = inject(MesAuthService);
+    approvalSvc = null;
+    http = inject(HttpClient);
+    ngOnInit() {
+        const config = this.mesAuth.getConfig();
+        if (config) {
+            this.approvalSvc = new MaApprovalService();
+            this.approvalSvc.init(config, this.http);
+            this.loadTemplates();
+        }
+        this.addStep();
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    loadTemplates() {
+        this.approvalSvc.getTemplates().pipe(takeUntil(this.destroy$)).subscribe({
+            next: (t) => this.templates = t,
+            error: () => { }
+        });
+    }
+    onTemplateChange(event) {
+        const val = event.target.value;
+        this.selectedTemplateId = val ? parseInt(val, 10) : null;
+    }
+    addStep() {
+        const order = this.adHocSteps.length + 1;
+        this.adHocSteps.push({ stepOrder: order, stepName: `Step ${order}`, approverUserIds: [] });
+        this.userSearchQuery.push('');
+        this.userSearchResults.push([]);
+    }
+    removeStep(i) {
+        this.adHocSteps.splice(i, 1);
+        this.userSearchQuery.splice(i, 1);
+        this.userSearchResults.splice(i, 1);
+        this.adHocSteps.forEach((s, idx) => s.stepOrder = idx + 1);
+    }
+    addApprover(stepIndex, userId) {
+        if (!this.adHocSteps[stepIndex].approverUserIds.includes(userId)) {
+            this.adHocSteps[stepIndex].approverUserIds.push(userId);
+        }
+        this.storeLabelFromResults(userId, this.userSearchResults[stepIndex]);
+        this.userSearchQuery[stepIndex] = '';
+        this.userSearchResults[stepIndex] = [];
+    }
+    removeApprover(stepIndex, approverIndex) {
+        this.adHocSteps[stepIndex].approverUserIds.splice(approverIndex, 1);
+    }
+    addReference(userId) {
+        if (!this.referenceUserIds.includes(userId)) {
+            this.referenceUserIds.push(userId);
+        }
+        this.storeLabelFromResults(userId, this.refSearchResults);
+        this.refSearchQuery = '';
+        this.refSearchResults = [];
+    }
+    storeLabelFromResults(userId, results) {
+        const user = results.find((u) => u.id === userId);
+        if (user) {
+            const parts = [user.department, user.position, user.fullName].filter(Boolean);
+            this.userLabelMap[userId] = parts.length > 0 ? parts.join(' - ') : (user.userName || userId);
+        }
+    }
+    removeReference(j) {
+        this.referenceUserIds.splice(j, 1);
+    }
+    onUserSearchInput(stepIndex, query) {
+        this.userSearchQuery[stepIndex] = query;
+        if (!query || query.length < 2) {
+            this.userSearchResults[stepIndex] = [];
+            return;
+        }
+        this.searchUsers(query).then(r => this.userSearchResults[stepIndex] = r);
+    }
+    onRefSearchInput(query) {
+        this.refSearchQuery = query;
+        if (!query || query.length < 2) {
+            this.refSearchResults = [];
+            return;
+        }
+        this.searchUsers(query).then(r => this.refSearchResults = r);
+    }
+    searchUsers(query) {
+        const config = this.mesAuth.getConfig();
+        if (!config)
+            return Promise.resolve([]);
+        const url = `${config.apiBaseUrl.replace(/\/$/, '')}/urs/users?search=${encodeURIComponent(query)}&page=1&pageSize=20`;
+        return this.http.get(url, { withCredentials: config.withCredentials ?? true })
+            .toPromise()
+            .then((r) => {
+            const items = r?.data || r?.Data || r?.items || r || [];
+            // Normalize PascalCase to camelCase for template binding
+            return (Array.isArray(items) ? items : []).map((u) => ({
+                id: u.id || u.Id,
+                userName: u.userName || u.UserName,
+                fullName: u.fullName || u.FullName,
+                email: u.email || u.Email,
+                department: u.department || u.Department,
+                position: u.position || u.Position
+            }));
+        })
+            .catch(() => []);
+    }
+    async submit() {
+        this.errorMessage = '';
+        if (!this.approvalSvc) {
+            this.errorMessage = 'Approval service not initialized. Ensure provideMesAuth() is configured.';
+            return;
+        }
+        if (!this.referenceId) {
+            this.errorMessage = 'ReferenceId is required.';
+            return;
+        }
+        if (!this.title) {
+            this.errorMessage = 'Title is required.';
+            return;
+        }
+        if (this.routingMode === 'template' && !this.selectedTemplateId && !this.templateId) {
+            this.errorMessage = 'Please select a template or switch to Custom Steps.';
+            return;
+        }
+        if (this.routingMode === 'adhoc' && this.adHocSteps.length === 0) {
+            this.errorMessage = 'Please add at least one approval step.';
+            return;
+        }
+        this.submitting = true;
+        if (this.approvalSubmiting.observers.length > 0) {
+            this.approvalSubmiting.emit();
+        }
+        try {
+            const contentHtml = await this.captureContent();
+            const thumbnailBase64 = await this.captureThumbnail().catch(() => undefined);
+            const request = {
+                title: this.title,
+                description: this.description,
+                contentHtml,
+                thumbnailBase64,
+                referenceId: this.referenceId,
+                callbackUrl: this.callbackUrl,
+                deadlineHours: this.deadlineHours,
+                referenceUserIds: this.referenceUserIds.length > 0 ? this.referenceUserIds : undefined
+            };
+            if (this.routingMode === 'template') {
+                request.templateId = this.selectedTemplateId ?? this.templateId;
+            }
+            else {
+                request.steps = this.adHocSteps.map((s, i) => ({
+                    stepOrder: i + 1,
+                    stepName: s.stepName,
+                    mode: ApprovalStepMode.Sequential,
+                    approverUserIds: s.approverUserIds
+                }));
+            }
+            this.approvalSvc.createApproval(request).pipe(takeUntil(this.destroy$)).subscribe({
+                next: (result) => {
+                    this.isSubmitted = true;
+                    this.submitting = false;
+                    this.approvalSubmitted.emit({ documentId: result.documentId, message: result.message });
+                },
+                error: (err) => {
+                    this.submitting = false;
+                    this.errorMessage = err?.error?.message || 'Failed to submit approval. Please try again.';
+                }
+            });
+        }
+        catch (err) {
+            this.submitting = false;
+            this.errorMessage = err?.message || 'Failed to capture content.';
+        }
+    }
+    onCancel() {
+        this.cancelled.emit();
+    }
+    // ====================== Content Capture ======================
+    async captureContent() {
+        const host = this.contentBody.nativeElement;
+        // Step 1: Build canvas -> img map from the live DOM
+        const canvasMap = new Map();
+        host.querySelectorAll('canvas').forEach((canvas) => {
+            try {
+                const img = document.createElement('img');
+                img.src = canvas.toDataURL('image/png');
+                img.style.width = canvas.offsetWidth + 'px';
+                img.style.height = canvas.offsetHeight + 'px';
+                canvasMap.set(canvas, img);
+            }
+            catch { }
+        });
+        // Step 2: Deep clone
+        const clone = host.cloneNode(true);
+        // Step 3: Replace canvas nodes in clone with img snapshots
+        const originalCanvases = Array.from(host.querySelectorAll('canvas'));
+        clone.querySelectorAll('canvas').forEach((cloneCanvas, idx) => {
+            const img = canvasMap.get(originalCanvases[idx]);
+            if (img)
+                cloneCanvas.replaceWith(img.cloneNode(true));
+        });
+        // Step 4: Inline only essential layout styles (skip colors, widths, cursors)
+        const liveElements = Array.from(host.querySelectorAll('*'));
+        const cloneElements = Array.from(clone.querySelectorAll('*'));
+        const styleProps = this.getStyleProperties();
+        liveElements.forEach((liveEl, i) => {
+            const cloneEl = cloneElements[i];
+            if (!cloneEl || typeof cloneEl.setAttribute !== 'function')
+                return;
+            try {
+                const computed = window.getComputedStyle(liveEl);
+                const styles = [];
+                styleProps.forEach(prop => {
+                    const val = computed.getPropertyValue(prop);
+                    if (val && val !== '' && val !== 'initial' && val !== 'normal' && val !== 'none' && val !== 'auto') {
+                        styles.push(`${prop}:${val}`);
+                    }
+                });
+                if (styles.length)
+                    cloneEl.setAttribute('style', styles.join(';'));
+            }
+            catch { }
+        });
+        // Step 5: Strip scripts, Angular attributes, style/link tags, and form elements
+        clone.querySelectorAll('script, link, style').forEach(el => el.remove());
+        clone.querySelectorAll('*').forEach(el => {
+            // Remove Angular-specific attributes
+            Array.from(el.attributes).forEach(attr => {
+                if (attr.name.startsWith('_ngcontent-') ||
+                    attr.name.startsWith('_nghost-') ||
+                    attr.name.startsWith('ng-reflect-') ||
+                    attr.name.startsWith('ng-version') ||
+                    attr.name.startsWith('on') ||
+                    attr.name === 'cformcontrol' ||
+                    attr.name === 'clabel') {
+                    el.removeAttribute(attr.name);
+                }
+            });
+            // Remove class attribute (framework-specific classes add no value)
+            el.removeAttribute('class');
+        });
+        // Step 6: Wrap in a clean, print-friendly HTML document
+        return `<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <style>
+    *, *::before, *::after { box-sizing: border-box; }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+      margin: 0; padding: 24px;
+      color: #212121; background: #fff;
+      font-size: 14px; line-height: 1.6;
+      max-width: 210mm;
+    }
+    h1, h2, h3, h4, h5, h6 { color: #1565c0; margin: 0 0 12px; }
+    p { margin: 0 0 8px; }
+    img { max-width: 100%; }
+    table { border-collapse: collapse; width: 100%; }
+    td, th { padding: 8px 12px; border: 1px solid #ddd; text-align: left; vertical-align: top; }
+    input, textarea, select { 
+      border: 1px solid #ccc; border-radius: 4px; padding: 6px 10px;
+      font-size: 14px; width: 100%; background: #fafafa; color: #333;
+    }
+    label { font-weight: 500; display: block; margin-bottom: 4px; color: #333; }
+    div { max-width: 100%; }
+  </style>
+</head>
+<body>
+${clone.outerHTML}
+</body>
+</html>`;
+    }
+    async captureThumbnail() {
+        const html2canvas = window['html2canvas'];
+        if (!html2canvas)
+            return undefined;
+        const canvas = await html2canvas(this.contentBody.nativeElement, {
+            scale: 1, useCORS: true, logging: false, width: 600, height: 400
+        });
+        return canvas.toDataURL('image/png').split(',')[1];
+    }
+    getStyleProperties() {
+        // Only capture essential layout/typography — NOT colors, widths, or cursor styles
+        // Colors and backgrounds are handled by the clean document stylesheet instead
+        return [
+            'font-size', 'font-weight', 'font-style', 'line-height', 'text-align', 'text-decoration',
+            'border', 'border-top', 'border-right', 'border-bottom', 'border-left',
+            'border-width', 'border-style', 'border-radius',
+            'padding', 'padding-top', 'padding-right', 'padding-bottom', 'padding-left',
+            'margin', 'margin-top', 'margin-right', 'margin-bottom', 'margin-left',
+            'display', 'flex-direction', 'flex-wrap', 'justify-content', 'align-items', 'gap',
+            'vertical-align', 'table-layout', 'border-collapse', 'border-spacing',
+            'text-transform', 'letter-spacing', 'white-space', 'word-break'
+        ];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MaArvContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: MaArvContainerComponent, isStandalone: true, selector: "ma-arv-container", inputs: { title: "title", description: "description", referenceId: "referenceId", templateId: "templateId", callbackUrl: "callbackUrl", deadlineHours: "deadlineHours" }, outputs: { approvalSubmitted: "approvalSubmitted", approvalSubmiting: "approvalSubmiting", cancelled: "cancelled" }, viewQueries: [{ propertyName: "contentBody", first: true, predicate: ["contentBody"], descendants: true, static: true }], ngImport: i0, template: `
+    <div class="arv-container">
+      <!-- Content Area -->
+      <div class="arv-content-body" #contentBody>
+        <ng-content></ng-content>
+      </div>
+
+      <!-- Approval Footer -->
+      <div class="arv-footer" *ngIf="!isSubmitted">
+        <div class="arv-footer-inner">
+
+          <!-- Routing mode -->
+          <div class="arv-routing">
+            <div class="arv-routing-header">
+              <h4 class="arv-section-title">Approval Routing</h4>
+              <div class="arv-routing-mode">
+                <label class="arv-radio">
+                  <input type="radio" name="routingMode" value="template" [checked]="routingMode === 'template'" (change)="routingMode = 'template'"> Use Template
+                </label>
+                <label class="arv-radio">
+                  <input type="radio" name="routingMode" value="adhoc" [checked]="routingMode === 'adhoc'" (change)="routingMode = 'adhoc'"> Custom Steps
+                </label>
+              </div>
+            </div>
+
+            <!-- Template selector -->
+            <div *ngIf="routingMode === 'template'" class="arv-template-select">
+              <label class="arv-label">Select Template</label>
+              <select class="arv-select" (change)="onTemplateChange($event)">
+                <option value="">-- Select a template --</option>
+                <option *ngFor="let t of templates" [value]="t.id">{{ t.name }}</option>
+              </select>
+            </div>
+
+            <!-- Ad-hoc steps -->
+            <div *ngIf="routingMode === 'adhoc'" class="arv-steps">
+              <div class="arv-step" *ngFor="let step of adHocSteps; let i = index">
+                <div class="arv-step-header">
+                  <span class="arv-step-num">Step {{ i + 1 }}</span>
+                  <input class="arv-input" [value]="step.stepName" (input)="step.stepName = $any($event.target).value" placeholder="Step name" />
+                  <button class="arv-btn-icon arv-btn-danger" (click)="removeStep(i)" title="Remove step">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+                  </button>
+                </div>
+                <div class="arv-approvers">
+                  <div class="arv-approver-tags">
+                    <span class="arv-tag" *ngFor="let uid of step.approverUserIds; let j = index">
+                      {{ userLabelMap[uid] || uid }}
+                      <button class="arv-tag-remove" (click)="removeApprover(i, j)">x</button>
+                    </span>
+                  </div>
+                  <div class="arv-user-search">
+                    <input class="arv-input arv-input-sm" [value]="userSearchQuery[i] || ''"
+                      (input)="onUserSearchInput(i, $any($event.target).value)"
+                      placeholder="Search approver..." />
+                    <div class="arv-search-results" *ngIf="userSearchResults[i]?.length">
+                      <div class="arv-search-item"
+                        *ngFor="let u of userSearchResults[i]"
+                        (click)="addApprover(i, u.id)">
+                        {{ u.fullName || u.userName }}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <button class="arv-btn arv-btn-outline" (click)="addStep()">+ Add Step</button>
+            </div>
+          </div>
+
+          <!-- Reference / CC users -->
+          <div class="arv-references">
+            <h4 class="arv-section-title">CC / Reference</h4>
+            <p class="arv-hint">These users will be notified when the approval completes, but won't be asked to approve.</p>
+            <div class="arv-approver-tags">
+              <span class="arv-tag" *ngFor="let uid of referenceUserIds; let j = index">
+                {{ userLabelMap[uid] || uid }}
+                <button class="arv-tag-remove" (click)="removeReference(j)">x</button>
+              </span>
+            </div>
+            <div class="arv-user-search">
+              <input class="arv-input arv-input-sm" [value]="refSearchQuery"
+                (input)="onRefSearchInput($any($event.target).value)"
+                placeholder="Search CC user..." />
+              <div class="arv-search-results" *ngIf="refSearchResults?.length">
+                <div class="arv-search-item"
+                  *ngFor="let u of refSearchResults"
+                  (click)="addReference(u.id)">
+                  {{ u.fullName || u.userName }}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Actions -->
+          <div class="arv-actions">
+            <button class="arv-btn arv-btn-secondary" (click)="onCancel()">Cancel</button>
+            <button class="arv-btn arv-btn-primary" [disabled]="submitting" (click)="submit()">
+              <span *ngIf="submitting" class="arv-spinner"></span>
+              {{ submitting ? 'Submitting...' : 'Submit for Approval' }}
+            </button>
+          </div>
+
+          <div class="arv-error" *ngIf="errorMessage">{{ errorMessage }}</div>
+        </div>
+      </div>
+
+      <!-- Success state -->
+      <div class="arv-success" *ngIf="isSubmitted">
+        <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#66bb6a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
+          <polyline points="22 4 12 14.01 9 11.01"/>
+        </svg>
+        <p>Submitted for approval successfully.</p>
+      </div>
+    </div>
+  `, isInline: true, styles: [":host{display:block;--arv-primary: #90caf9;--arv-primary-hover: #64b5f6;--arv-success: #66bb6a;--arv-danger: #ef5350;--arv-text: #e0e0e0;--arv-text-muted: #9e9e9e;--arv-bg: #1e1e2e;--arv-bg2: #27273a;--arv-border: #383850;--arv-radius: 8px}:host(.theme-light){--arv-primary: #1565c0;--arv-primary-hover: #0d47a1;--arv-success: #2e7d32;--arv-danger: #c62828;--arv-text: #212121;--arv-text-muted: #616161;--arv-bg: #ffffff;--arv-bg2: #f5f5f5;--arv-border: #e0e0e0}.arv-container{display:flex;flex-direction:column;height:100%}.arv-content-body{flex:1;overflow:auto}.arv-footer{border-top:1px solid var(--arv-border);background:var(--arv-bg2)}.arv-footer-inner{padding:16px;display:flex;flex-direction:column;gap:14px}.arv-section-title{margin:0 0 8px;font-size:13px;font-weight:700;color:var(--arv-primary);text-transform:uppercase;letter-spacing:.5px}.arv-routing-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}.arv-routing-mode{display:flex;gap:12px}.arv-radio{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--arv-text);cursor:pointer}.arv-label{font-size:12px;color:var(--arv-text-muted);display:block;margin-bottom:4px}.arv-select{width:100%;padding:8px 10px;border:1px solid var(--arv-border);border-radius:var(--arv-radius);background:var(--arv-bg);color:var(--arv-text);font-size:13px}.arv-input{padding:7px 10px;border:1px solid var(--arv-border);border-radius:var(--arv-radius);background:var(--arv-bg);color:var(--arv-text);font-size:13px}.arv-input-sm{width:100%;margin-top:4px}.arv-steps{display:flex;flex-direction:column;gap:10px}.arv-step{background:var(--arv-bg);border:1px solid var(--arv-border);border-radius:var(--arv-radius);padding:10px}.arv-step-header{display:flex;align-items:center;gap:8px;margin-bottom:8px}.arv-step-num{font-size:12px;font-weight:700;color:var(--arv-primary);min-width:44px}.arv-approver-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}.arv-tag{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;background:#90caf91f;border:1px solid rgba(144,202,249,.3);border-radius:12px;font-size:12px;color:var(--arv-primary)}.arv-tag-remove{background:none;border:none;cursor:pointer;color:var(--arv-text-muted);font-size:11px;padding:0 2px;line-height:1}.arv-tag-remove:hover{color:var(--arv-danger)}.arv-user-search{position:relative}.arv-search-results{position:absolute;left:0;right:0;z-index:100;background:var(--arv-bg2);border:1px solid var(--arv-border);border-radius:var(--arv-radius);max-height:150px;overflow-y:auto}.arv-search-item{padding:8px 12px;cursor:pointer;font-size:13px;color:var(--arv-text)}.arv-search-item:hover{background:var(--arv-bg)}.arv-hint{font-size:12px;color:var(--arv-text-muted);margin:0 0 8px}.arv-btn-icon{background:none;border:none;cursor:pointer;padding:2px;border-radius:4px;display:inline-flex;align-items:center;justify-content:center}.arv-btn-danger{color:var(--arv-danger)}.arv-btn-danger:hover{background:#ef53501a}.arv-actions{display:flex;justify-content:flex-end;gap:10px}.arv-btn{padding:9px 18px;border-radius:var(--arv-radius);font-size:13px;font-weight:600;cursor:pointer;border:none;transition:background .15s}.arv-btn-primary{background:var(--arv-primary);color:#fff}.arv-btn-primary:hover:not(:disabled){background:var(--arv-primary-hover)}.arv-btn-primary:disabled{opacity:.6;cursor:not-allowed}.arv-btn-secondary{background:transparent;border:1px solid var(--arv-border);color:var(--arv-text-muted)}.arv-btn-secondary:hover{color:var(--arv-text);border-color:var(--arv-text-muted)}.arv-btn-outline{background:transparent;border:1px dashed var(--arv-border);color:var(--arv-text-muted);font-size:12px;padding:6px 12px}.arv-btn-outline:hover{border-color:var(--arv-primary);color:var(--arv-primary)}.arv-spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:arv-spin .6s linear infinite;margin-right:6px}@keyframes arv-spin{to{transform:rotate(360deg)}}.arv-error{padding:8px 12px;background:#ef53501a;border:1px solid rgba(239,83,80,.3);border-radius:var(--arv-radius);font-size:13px;color:var(--arv-danger)}.arv-success{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px;gap:12px;text-align:center}.arv-success p{color:var(--arv-success);font-size:15px;font-weight:600;margin:0}.arv-references{border-top:1px solid var(--arv-border);padding-top:12px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MaArvContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ma-arv-container', standalone: true, imports: [NgIf, NgFor], template: `
+    <div class="arv-container">
+      <!-- Content Area -->
+      <div class="arv-content-body" #contentBody>
+        <ng-content></ng-content>
+      </div>
+
+      <!-- Approval Footer -->
+      <div class="arv-footer" *ngIf="!isSubmitted">
+        <div class="arv-footer-inner">
+
+          <!-- Routing mode -->
+          <div class="arv-routing">
+            <div class="arv-routing-header">
+              <h4 class="arv-section-title">Approval Routing</h4>
+              <div class="arv-routing-mode">
+                <label class="arv-radio">
+                  <input type="radio" name="routingMode" value="template" [checked]="routingMode === 'template'" (change)="routingMode = 'template'"> Use Template
+                </label>
+                <label class="arv-radio">
+                  <input type="radio" name="routingMode" value="adhoc" [checked]="routingMode === 'adhoc'" (change)="routingMode = 'adhoc'"> Custom Steps
+                </label>
+              </div>
+            </div>
+
+            <!-- Template selector -->
+            <div *ngIf="routingMode === 'template'" class="arv-template-select">
+              <label class="arv-label">Select Template</label>
+              <select class="arv-select" (change)="onTemplateChange($event)">
+                <option value="">-- Select a template --</option>
+                <option *ngFor="let t of templates" [value]="t.id">{{ t.name }}</option>
+              </select>
+            </div>
+
+            <!-- Ad-hoc steps -->
+            <div *ngIf="routingMode === 'adhoc'" class="arv-steps">
+              <div class="arv-step" *ngFor="let step of adHocSteps; let i = index">
+                <div class="arv-step-header">
+                  <span class="arv-step-num">Step {{ i + 1 }}</span>
+                  <input class="arv-input" [value]="step.stepName" (input)="step.stepName = $any($event.target).value" placeholder="Step name" />
+                  <button class="arv-btn-icon arv-btn-danger" (click)="removeStep(i)" title="Remove step">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+                  </button>
+                </div>
+                <div class="arv-approvers">
+                  <div class="arv-approver-tags">
+                    <span class="arv-tag" *ngFor="let uid of step.approverUserIds; let j = index">
+                      {{ userLabelMap[uid] || uid }}
+                      <button class="arv-tag-remove" (click)="removeApprover(i, j)">x</button>
+                    </span>
+                  </div>
+                  <div class="arv-user-search">
+                    <input class="arv-input arv-input-sm" [value]="userSearchQuery[i] || ''"
+                      (input)="onUserSearchInput(i, $any($event.target).value)"
+                      placeholder="Search approver..." />
+                    <div class="arv-search-results" *ngIf="userSearchResults[i]?.length">
+                      <div class="arv-search-item"
+                        *ngFor="let u of userSearchResults[i]"
+                        (click)="addApprover(i, u.id)">
+                        {{ u.fullName || u.userName }}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <button class="arv-btn arv-btn-outline" (click)="addStep()">+ Add Step</button>
+            </div>
+          </div>
+
+          <!-- Reference / CC users -->
+          <div class="arv-references">
+            <h4 class="arv-section-title">CC / Reference</h4>
+            <p class="arv-hint">These users will be notified when the approval completes, but won't be asked to approve.</p>
+            <div class="arv-approver-tags">
+              <span class="arv-tag" *ngFor="let uid of referenceUserIds; let j = index">
+                {{ userLabelMap[uid] || uid }}
+                <button class="arv-tag-remove" (click)="removeReference(j)">x</button>
+              </span>
+            </div>
+            <div class="arv-user-search">
+              <input class="arv-input arv-input-sm" [value]="refSearchQuery"
+                (input)="onRefSearchInput($any($event.target).value)"
+                placeholder="Search CC user..." />
+              <div class="arv-search-results" *ngIf="refSearchResults?.length">
+                <div class="arv-search-item"
+                  *ngFor="let u of refSearchResults"
+                  (click)="addReference(u.id)">
+                  {{ u.fullName || u.userName }}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Actions -->
+          <div class="arv-actions">
+            <button class="arv-btn arv-btn-secondary" (click)="onCancel()">Cancel</button>
+            <button class="arv-btn arv-btn-primary" [disabled]="submitting" (click)="submit()">
+              <span *ngIf="submitting" class="arv-spinner"></span>
+              {{ submitting ? 'Submitting...' : 'Submit for Approval' }}
+            </button>
+          </div>
+
+          <div class="arv-error" *ngIf="errorMessage">{{ errorMessage }}</div>
+        </div>
+      </div>
+
+      <!-- Success state -->
+      <div class="arv-success" *ngIf="isSubmitted">
+        <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#66bb6a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
+          <polyline points="22 4 12 14.01 9 11.01"/>
+        </svg>
+        <p>Submitted for approval successfully.</p>
+      </div>
+    </div>
+  `, styles: [":host{display:block;--arv-primary: #90caf9;--arv-primary-hover: #64b5f6;--arv-success: #66bb6a;--arv-danger: #ef5350;--arv-text: #e0e0e0;--arv-text-muted: #9e9e9e;--arv-bg: #1e1e2e;--arv-bg2: #27273a;--arv-border: #383850;--arv-radius: 8px}:host(.theme-light){--arv-primary: #1565c0;--arv-primary-hover: #0d47a1;--arv-success: #2e7d32;--arv-danger: #c62828;--arv-text: #212121;--arv-text-muted: #616161;--arv-bg: #ffffff;--arv-bg2: #f5f5f5;--arv-border: #e0e0e0}.arv-container{display:flex;flex-direction:column;height:100%}.arv-content-body{flex:1;overflow:auto}.arv-footer{border-top:1px solid var(--arv-border);background:var(--arv-bg2)}.arv-footer-inner{padding:16px;display:flex;flex-direction:column;gap:14px}.arv-section-title{margin:0 0 8px;font-size:13px;font-weight:700;color:var(--arv-primary);text-transform:uppercase;letter-spacing:.5px}.arv-routing-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}.arv-routing-mode{display:flex;gap:12px}.arv-radio{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--arv-text);cursor:pointer}.arv-label{font-size:12px;color:var(--arv-text-muted);display:block;margin-bottom:4px}.arv-select{width:100%;padding:8px 10px;border:1px solid var(--arv-border);border-radius:var(--arv-radius);background:var(--arv-bg);color:var(--arv-text);font-size:13px}.arv-input{padding:7px 10px;border:1px solid var(--arv-border);border-radius:var(--arv-radius);background:var(--arv-bg);color:var(--arv-text);font-size:13px}.arv-input-sm{width:100%;margin-top:4px}.arv-steps{display:flex;flex-direction:column;gap:10px}.arv-step{background:var(--arv-bg);border:1px solid var(--arv-border);border-radius:var(--arv-radius);padding:10px}.arv-step-header{display:flex;align-items:center;gap:8px;margin-bottom:8px}.arv-step-num{font-size:12px;font-weight:700;color:var(--arv-primary);min-width:44px}.arv-approver-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}.arv-tag{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;background:#90caf91f;border:1px solid rgba(144,202,249,.3);border-radius:12px;font-size:12px;color:var(--arv-primary)}.arv-tag-remove{background:none;border:none;cursor:pointer;color:var(--arv-text-muted);font-size:11px;padding:0 2px;line-height:1}.arv-tag-remove:hover{color:var(--arv-danger)}.arv-user-search{position:relative}.arv-search-results{position:absolute;left:0;right:0;z-index:100;background:var(--arv-bg2);border:1px solid var(--arv-border);border-radius:var(--arv-radius);max-height:150px;overflow-y:auto}.arv-search-item{padding:8px 12px;cursor:pointer;font-size:13px;color:var(--arv-text)}.arv-search-item:hover{background:var(--arv-bg)}.arv-hint{font-size:12px;color:var(--arv-text-muted);margin:0 0 8px}.arv-btn-icon{background:none;border:none;cursor:pointer;padding:2px;border-radius:4px;display:inline-flex;align-items:center;justify-content:center}.arv-btn-danger{color:var(--arv-danger)}.arv-btn-danger:hover{background:#ef53501a}.arv-actions{display:flex;justify-content:flex-end;gap:10px}.arv-btn{padding:9px 18px;border-radius:var(--arv-radius);font-size:13px;font-weight:600;cursor:pointer;border:none;transition:background .15s}.arv-btn-primary{background:var(--arv-primary);color:#fff}.arv-btn-primary:hover:not(:disabled){background:var(--arv-primary-hover)}.arv-btn-primary:disabled{opacity:.6;cursor:not-allowed}.arv-btn-secondary{background:transparent;border:1px solid var(--arv-border);color:var(--arv-text-muted)}.arv-btn-secondary:hover{color:var(--arv-text);border-color:var(--arv-text-muted)}.arv-btn-outline{background:transparent;border:1px dashed var(--arv-border);color:var(--arv-text-muted);font-size:12px;padding:6px 12px}.arv-btn-outline:hover{border-color:var(--arv-primary);color:var(--arv-primary)}.arv-spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:arv-spin .6s linear infinite;margin-right:6px}@keyframes arv-spin{to{transform:rotate(360deg)}}.arv-error{padding:8px 12px;background:#ef53501a;border:1px solid rgba(239,83,80,.3);border-radius:var(--arv-radius);font-size:13px;color:var(--arv-danger)}.arv-success{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px;gap:12px;text-align:center}.arv-success p{color:var(--arv-success);font-size:15px;font-weight:600;margin:0}.arv-references{border-top:1px solid var(--arv-border);padding-top:12px}\n"] }]
+        }], propDecorators: { title: [{
+                type: Input
+            }], description: [{
+                type: Input
+            }], referenceId: [{
+                type: Input
+            }], templateId: [{
+                type: Input
+            }], callbackUrl: [{
+                type: Input
+            }], deadlineHours: [{
+                type: Input
+            }], approvalSubmitted: [{
+                type: Output
+            }], approvalSubmiting: [{
+                type: Output
+            }], cancelled: [{
+                type: Output
+            }], contentBody: [{
+                type: ViewChild,
+                args: ['contentBody', { static: true }]
+            }] } });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { MES_AUTH_CONFIG, MaUserComponent, MesAuthModule, MesAuthService, NotificationBadgeComponent, NotificationPanelComponent, NotificationType, ThemeService, ToastContainerComponent, ToastService, UserProfileComponent, mesAuthInterceptor, provideMesAuth };
+export { ApprovalActionType, ApprovalDocumentStatus, ApprovalStepMode, ApprovalStepStatus, MES_AUTH_CONFIG, MaApprovalPanelComponent, MaApprovalService, MaArvContainerComponent, MaUserComponent, MesAuthModule, MesAuthService, NotificationBadgeComponent, NotificationPanelComponent, NotificationType, ThemeService, ToastContainerComponent, ToastService, UserProfileComponent, mesAuthInterceptor, provideMesAuth };
 //# sourceMappingURL=mesauth-angular.mjs.map