mesauth-angular 1.8.8 → 1.8.9

package/fesm2022/mesauth-angular.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
-import { signal, Injectable, InjectionToken, makeEnvironmentProviders, provideAppInitializer, inject, NgModule, output, HostListener, HostBinding, Component, ViewChild, input, computed, DestroyRef, Directive } from '@angular/core';
-import { toObservable, takeUntilDestroyed, rxResource } from '@angular/core/rxjs-interop';
+import { signal, Injectable, InjectionToken, makeEnvironmentProviders, provideAppInitializer, inject, NgModule, output, effect, HostListener, HostBinding, Component, computed, ViewChild, input, DestroyRef, Directive } from '@angular/core';
+import { toObservable, toSignal, takeUntilDestroyed, rxResource } from '@angular/core/rxjs-interop';
 import { catchError, of, Subject, EMPTY, timer, throwError, firstValueFrom, forkJoin } from 'rxjs';
 import { HttpClient } from '@angular/common/http';
 import { HubConnectionBuilder, LogLevel } from '@microsoft/signalr';
@@ -10,7 +10,7 @@ import { DomSanitizer } from '@angular/platform-browser';
 import { DatePipe } from '@angular/common';
 
 /** Current installed package version — keep in sync with package.json. */
-const PACKAGE_VERSION = '1.8.8';
+const PACKAGE_VERSION = '1.8.9';
 /**
  * Provides server-driven UI configuration loaded from the hosted manifest.
  * Components read `labels()` and `features()` signals instead of hardcoded strings.
@@ -117,7 +117,7 @@ var NotificationType;
 class MesAuthService {
     hubConnection = null;
     _currentUser = signal(null, ...(ngDevMode ? [{ debugName: "_currentUser" }] : /* istanbul ignore next */ []));
-    /** Observable for components that prefer RxJS — backed by the signal. */
+    /** Observable for components that prefer RxJS - backed by the signal. */
     currentUser$ = toObservable(this._currentUser);
     _notifications = new Subject();
     notifications$ = this._notifications.asObservable();
@@ -130,7 +130,7 @@ class MesAuthService {
     constructor() {
         // Empty constructor - all dependencies passed to init()
     }
-    /** _ngZone accepted but ignored — not needed in zoneless apps. */
+    /** _ngZone accepted but ignored - not needed in zoneless apps. */
     init(config, httpClient, router, _ngZone) {
         this.config = config;
         this.http = httpClient;
@@ -213,7 +213,7 @@ class MesAuthService {
             .withAutomaticReconnect()
             .configureLogging(LogLevel.Warning);
         this.hubConnection = builder.build();
-        // No NgZone.run() needed — signal mutations and toSignal() in consumers
+        // No NgZone.run() needed - signal mutations and toSignal() in consumers
         // schedule Angular change detection correctly in zoneless apps.
         this.hubConnection.on('ReceiveNotification', (n) => {
             this._notifications.next(n);
@@ -413,69 +413,51 @@ class UserProfileComponent {
     unreadCount = signal(0, ...(ngDevMode ? [{ debugName: "unreadCount" }] : /* istanbul ignore next */ []));
     pendingApprovalCount = signal(0, ...(ngDevMode ? [{ debugName: "pendingApprovalCount" }] : /* istanbul ignore next */ []));
     dropdownOpen = signal(false, ...(ngDevMode ? [{ debugName: "dropdownOpen" }] : /* istanbul ignore next */ []));
-    // Signal to force avatar refresh
     avatarRefresh = signal(Date.now(), ...(ngDevMode ? [{ debugName: "avatarRefresh" }] : /* istanbul ignore next */ []));
-    hasUser = false;
     authService = inject(MesAuthService);
     router = inject(Router);
     themeService = inject(ThemeService);
     http = inject(HttpClient);
     constructor() {
-        this.authService.currentUser$
-            .pipe(takeUntilDestroyed())
-            .subscribe(user => {
+        const currentUserSig = toSignal(this.authService.currentUser$, { initialValue: null });
+        const approvalEvent = toSignal(this.authService.approvalEvents$);
+        const notification = toSignal(this.authService.notifications$);
+        effect(() => {
+            const user = currentUserSig();
             this.currentUser.set(user);
-            this.hasUser = !!user;
-            // Force avatar refresh when user changes
             this.avatarRefresh.set(Date.now());
-            if (!this.hasUser) {
+            if (!user) {
                 this.unreadCount.set(0);
                 this.pendingApprovalCount.set(0);
+                return;
             }
-            else {
-                this.loadUnreadCount();
-                this.loadPendingApprovalCount();
-            }
+            this.loadUnreadCount();
+            this.loadPendingApprovalCount();
         });
-        // Listen for approval events (SignalR) to refresh pending count
-        this.authService.approvalEvents$
-            .pipe(takeUntilDestroyed())
-            .subscribe(() => {
-            if (this.hasUser)
+        effect(() => {
+            approvalEvent(); // track SignalR approval events
+            if (currentUserSig())
                 this.loadPendingApprovalCount();
         });
-        // Listen for new real-time notifications (SignalR only)
-        this.authService.notifications$
-            .pipe(takeUntilDestroyed())
-            .subscribe(() => {
-            if (this.hasUser) {
+        effect(() => {
+            notification(); // track SignalR notification events
+            if (currentUserSig())
                 this.loadUnreadCount();
-            }
         });
     }
     loadUnreadCount() {
-        if (!this.hasUser) {
-            this.unreadCount.set(0);
-            return;
-        }
         this.authService.getUnreadCount().subscribe({
-            next: (response) => {
-                this.unreadCount.set(response.unreadCount || 0);
-            },
-            error: (err) => { }
+            next: (response) => this.unreadCount.set(response.unreadCount || 0),
+            error: () => { }
         });
     }
     loadPendingApprovalCount() {
-        if (!this.hasUser) {
-            this.pendingApprovalCount.set(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.set(r?.pendingCount ?? 0); },
+            next: (r) => this.pendingApprovalCount.set(r?.pendingCount ?? 0),
             error: () => { }
         });
     }
@@ -487,21 +469,16 @@ class UserProfileComponent {
         const refresh = this.avatarRefresh();
         const config = this.authService.getConfig();
         const baseUrl = config?.apiBaseUrl || '';
-        // If user has avatarPath, use it directly
         if (user.avatarPath) {
-            // If avatarPath is already a full URL, use it as-is
             if (user.avatarPath.startsWith('http://') || user.avatarPath.startsWith('https://')) {
                 return user.avatarPath;
             }
-            // If it's a relative path, construct full URL with refresh timestamp
             return `${baseUrl.replace(/\/$/, '')}${user.avatarPath}?t=${refresh}`;
         }
-        // Fallback: construct URL using userId
         const userId = user.userId;
         if (userId && baseUrl) {
             return `${baseUrl.replace(/\/$/, '')}/auth/${userId}/avatar?t=${refresh}`;
         }
-        // Fallback to UI avatars service if no userId or baseUrl
         const displayName = user.userName || user.userId || 'User';
         return `https://ui-avatars.com/api/?name=${encodeURIComponent(displayName)}&background=1976d2&color=fff`;
     }
@@ -535,14 +512,12 @@ class UserProfileComponent {
         this.authService.logout().subscribe({
             next: () => {
                 this.dropdownOpen.set(false);
-                // Navigate to login with return URL
                 const config = this.authService.getConfig();
                 const baseUrl = config?.userBaseUrl || '';
                 const returnUrl = encodeURIComponent(window.location.href);
                 window.location.href = `${baseUrl}/login?returnUrl=${returnUrl}`;
             },
-            error: (err) => {
-                // Still navigate to login even if logout fails
+            error: () => {
                 const config = this.authService.getConfig();
                 const baseUrl = config?.userBaseUrl || '';
                 window.location.href = `${baseUrl}/login`;
@@ -618,32 +593,19 @@ class NotificationPanelComponent {
     get themeClass() {
         return `theme-${this.themeService.currentTheme()}`;
     }
-    isOpen = false;
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    activeTab = signal('unread', ...(ngDevMode ? [{ debugName: "activeTab" }] : /* istanbul ignore next */ []));
     notifications = signal([], ...(ngDevMode ? [{ debugName: "notifications" }] : /* istanbul ignore next */ []));
-    activeTab = 'unread';
-    // Cached filtered lists — updated explicitly to avoid re-filtering on every CD cycle
-    _unreadNotifications = signal([], ...(ngDevMode ? [{ debugName: "_unreadNotifications" }] : /* istanbul ignore next */ []));
-    _readNotifications = signal([], ...(ngDevMode ? [{ debugName: "_readNotifications" }] : /* istanbul ignore next */ []));
-    // Stable time-ago strings keyed by notification id — refreshed every 30s
-    dateLabels = new Map();
+    selectedNotification = signal(null, ...(ngDevMode ? [{ debugName: "selectedNotification" }] : /* istanbul ignore next */ []));
+    selectedNotificationHtml = signal(null, ...(ngDevMode ? [{ debugName: "selectedNotificationHtml" }] : /* istanbul ignore next */ []));
+    selectedNotificationDate = signal('', ...(ngDevMode ? [{ debugName: "selectedNotificationDate" }] : /* istanbul ignore next */ []));
+    // Stable time-ago strings keyed by notification id - refreshed every 30s via signal
+    dateLabels = signal(new Map(), ...(ngDevMode ? [{ debugName: "dateLabels" }] : /* istanbul ignore next */ []));
+    unreadNotifications = computed(() => this.notifications().filter(n => !n.isRead), ...(ngDevMode ? [{ debugName: "unreadNotifications" }] : /* istanbul ignore next */ []));
+    readNotifications = computed(() => this.notifications().filter(n => n.isRead), ...(ngDevMode ? [{ debugName: "readNotifications" }] : /* istanbul ignore next */ []));
+    currentNotifications = computed(() => this.activeTab() === 'unread' ? this.unreadNotifications() : this.readNotifications(), ...(ngDevMode ? [{ debugName: "currentNotifications" }] : /* istanbul ignore next */ []));
     dateTimer = null;
-    get unreadNotifications() {
-        return this._unreadNotifications();
-    }
-    get readNotifications() {
-        return this._readNotifications();
-    }
-    get currentNotifications() {
-        return this.activeTab === 'unread' ? this._unreadNotifications() : this._readNotifications();
-    }
-    selectedNotification = null;
-    selectedNotificationHtml = null;
-    selectedNotificationDate = '';
-    // Returns plain text message for list display
-    getNotificationMessage(notification) {
-        return notification.message || '';
-    }
-    // Normalize type to string — API may return integer or string
+    // Normalize type to string - API may return integer or string
     // Backend enum: Info=0, Success=1, Warning=2, Error=3
     typeOf(notification) {
         const t = notification.type;
@@ -667,15 +629,14 @@ class NotificationPanelComponent {
     themeService = inject(ThemeService);
     constructor() {
         this.loadNotifications();
-        // Refresh time-ago labels every 30s to avoid NG0100 from live new Date() in template
+        // Refresh time-ago labels every 30s - signal mutation triggers CD in zoneless
         this.dateTimer = setInterval(() => this.refreshDateLabels(), 30000);
-        // Listen for new real-time notifications
-        this.authService.notifications$
-            .pipe(takeUntilDestroyed())
-            .subscribe((notification) => {
-            // Show toast for new notification
+        const latestNotification = toSignal(this.authService.notifications$);
+        effect(() => {
+            const notification = latestNotification();
+            if (!notification)
+                return;
             this.toastService.show(notification.message || '', notification.title, this.toastType(notification.type), 5000);
-            // Reload notifications list
             this.loadNotifications();
         });
     }
@@ -689,125 +650,107 @@ class NotificationPanelComponent {
         this.authService.getNotifications(1, 50, true).subscribe({
             next: (response) => {
                 this.notifications.set(response.items || []);
-                this.onNotificationsChanged();
+                this.refreshDateLabels();
             },
-            error: (err) => { }
+            error: () => { }
         });
     }
     open() {
-        this.isOpen = true;
-        this.activeTab = 'unread'; // Reset to unread tab when opening
+        this.isOpen.set(true);
+        this.activeTab.set('unread');
     }
     close() {
-        this.isOpen = false;
+        this.isOpen.set(false);
     }
     switchTab(tab) {
-        this.activeTab = tab;
+        this.activeTab.set(tab);
     }
     openDetails(notification) {
-        this.selectedNotification = notification;
-        // Cache computed values to avoid re-rendering on every change detection cycle
+        this.selectedNotification.set(notification);
         const html = notification.messageHtml || notification.message || '';
-        this.selectedNotificationHtml = this.sanitizer.bypassSecurityTrustHtml(html);
-        this.selectedNotificationDate = this.formatDate(notification.createdAt);
-        // Mark as read when opening details (if not already read)
+        this.selectedNotificationHtml.set(this.sanitizer.bypassSecurityTrustHtml(html));
+        this.selectedNotificationDate.set(this.formatDate(notification.createdAt));
         if (!notification.isRead) {
             this.authService.markAsRead(notification.id).subscribe({
                 next: () => {
-                    notification.isRead = true;
+                    this.notifications.update(notifs => notifs.map(n => n.id === notification.id ? { ...n, isRead: true } : n));
                     this.notificationRead.emit();
-                    this.onNotificationsChanged();
                 },
                 error: () => { }
             });
         }
     }
     closeDetails() {
-        this.selectedNotification = null;
-        this.selectedNotificationHtml = null;
-        this.selectedNotificationDate = '';
+        this.selectedNotification.set(null);
+        this.selectedNotificationHtml.set(null);
+        this.selectedNotificationDate.set('');
     }
     openUrl() {
-        const url = this.selectedNotification?.url?.trim();
+        const url = this.selectedNotification()?.url?.trim();
         if (url) {
             window.open(url, '_blank', 'noopener,noreferrer');
         }
     }
     markAsRead(notificationId, event) {
-        if (event) {
+        if (event)
             event.stopPropagation();
-        }
         this.authService.markAsRead(notificationId).subscribe({
             next: () => {
-                const notification = this.notifications().find(n => n.id === notificationId);
-                if (notification) {
-                    notification.isRead = true;
-                    this.notificationRead.emit();
-                    this.onNotificationsChanged();
-                }
+                this.notifications.update(notifs => notifs.map(n => n.id === notificationId ? { ...n, isRead: true } : n));
+                this.notificationRead.emit();
             },
-            error: (err) => { }
+            error: () => { }
         });
     }
     markAllAsRead() {
         this.authService.markAllAsRead().subscribe({
             next: () => {
-                this.notifications().forEach(n => n.isRead = true);
+                this.notifications.update(notifs => notifs.map(n => ({ ...n, isRead: true })));
                 this.notificationRead.emit();
-                this.onNotificationsChanged();
             },
-            error: (err) => { }
+            error: () => { }
         });
     }
     deleteAllRead() {
-        const readNotificationIds = this.notifications()
-            .filter(n => n.isRead)
-            .map(n => n.id);
-        const deletePromises = readNotificationIds.map(id => firstValueFrom(this.authService.deleteNotification(id)));
+        const readIds = this.notifications().filter(n => n.isRead).map(n => n.id);
+        const deletePromises = readIds.map(id => firstValueFrom(this.authService.deleteNotification(id)));
         Promise.all(deletePromises).then(() => {
-            this.notifications.update((notis) => notis.filter(n => !n.isRead));
-            this.onNotificationsChanged();
-        }).catch((err) => {
+            this.notifications.update(notifs => notifs.filter(n => !n.isRead));
+        }).catch(() => {
             this.loadNotifications();
         });
     }
     deleteAllUnread() {
-        const unreadNotificationIds = this.notifications()
-            .filter(n => !n.isRead)
-            .map(n => n.id);
-        const deletePromises = unreadNotificationIds.map(id => firstValueFrom(this.authService.deleteNotification(id)));
+        const unreadIds = this.notifications().filter(n => !n.isRead).map(n => n.id);
+        const deletePromises = unreadIds.map(id => firstValueFrom(this.authService.deleteNotification(id)));
         Promise.all(deletePromises).then(() => {
-            this.notifications.update((notis) => notis.filter(n => !n.isRead));
+            this.notifications.update(notifs => notifs.filter(n => n.isRead));
             this.notificationRead.emit();
-            this.onNotificationsChanged();
-        }).catch((err) => {
+        }).catch(() => {
             this.loadNotifications();
         });
     }
     delete(notificationId, event) {
         event.stopPropagation();
-        const wasUnread = this.notifications().find(n => n.id === notificationId && !n.isRead) !== undefined;
+        const wasUnread = this.notifications().some(n => n.id === notificationId && !n.isRead);
         this.authService.deleteNotification(notificationId).subscribe({
             next: () => {
-                this.notifications.update((notis) => notis.filter(n => n.id !== notificationId));
-                if (wasUnread) {
+                this.notifications.update(notifs => notifs.filter(n => n.id !== notificationId));
+                if (wasUnread)
                     this.notificationRead.emit();
-                }
-                this.onNotificationsChanged();
             },
-            error: (err) => { }
+            error: () => { }
         });
     }
     formatDate(dateString) {
         return this.computeTimeAgo(dateString, new Date());
     }
-    // Pure computation — takes now as param so it never calls new Date() internally
+    // Pure computation - takes now as param so it never calls new Date() internally
     computeTimeAgo(dateString, now) {
         const normalizedDateString = this.parseUtcDate(dateString);
         const date = new Date(normalizedDateString);
-        if (isNaN(date.getTime())) {
+        if (isNaN(date.getTime()))
             return 'Invalid date';
-        }
         const diffMs = now.getTime() - date.getTime();
         const diffMins = Math.floor(diffMs / 60000);
         const diffHours = Math.floor(diffMs / 3600000);
@@ -822,38 +765,29 @@ class NotificationPanelComponent {
             return `${diffDays}d ago`;
         return date.toLocaleDateString();
     }
-    // Rebuild dateLabels map using a single shared now — prevents mid-loop clock drift
+    // Rebuild dateLabels map and store as a new signal value so CD is triggered
     refreshDateLabels() {
         const now = new Date();
+        const newLabels = new Map();
         for (const n of this.notifications()) {
-            this.dateLabels.set(n.id, this.computeTimeAgo(n.createdAt, now));
+            newLabels.set(n.id, this.computeTimeAgo(n.createdAt, now));
         }
-    }
-    // Re-run filter once and store results in stable arrays
-    recomputeFilteredLists() {
-        this._unreadNotifications.set(this.notifications().filter(n => !n.isRead));
-        this._readNotifications.set(this.notifications().filter(n => n.isRead));
-    }
-    // Single call-site after every notification mutation
-    onNotificationsChanged() {
-        this.recomputeFilteredLists();
-        this.refreshDateLabels();
+        this.dateLabels.set(newLabels);
     }
     // Parse date string from server (stored in UTC but without 'Z' suffix or 'T' separator)
     parseUtcDate(dateStr) {
         let normalized = dateStr.includes('T') ? dateStr : dateStr.replace(' ', 'T');
-        // If no timezone indicator, assume UTC by appending 'Z'
         if (!normalized.endsWith('Z') && !normalized.includes('+') && !normalized.includes('-', 10)) {
             normalized += 'Z';
         }
         return normalized;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: NotificationPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: NotificationPanelComponent, isStandalone: true, selector: "ma-notification-panel", outputs: { notificationRead: "notificationRead" }, host: { properties: { "class": "this.themeClass" } }, ngImport: i0, template: "<div class=\"notification-panel\" [class.open]=\"isOpen\">\n  <!-- Header -->\n  <div class=\"panel-header\">\n    <div class=\"panel-header-left\">\n      <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\">\n        <path d=\"M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9\"/>\n        <path d=\"M13.73 21a2 2 0 0 1-3.46 0\"/>\n      </svg>\n      <h3>Notifications</h3>\n    </div>\n    <button class=\"close-btn\" (click)=\"close()\" title=\"Close\" aria-label=\"Close notifications\">\n      <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\">\n        <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"/>\n      </svg>\n    </button>\n  </div>\n\n  <!-- Tabs -->\n  <div class=\"tabs\">\n    <button class=\"tab-btn\" [class.active]=\"activeTab === 'unread'\" (click)=\"switchTab('unread')\">\n      Unread\n      @if (unreadNotifications.length > 0) {\n        <span class=\"tab-badge\">{{ unreadNotifications.length }}</span>\n      }\n    </button>\n    <button class=\"tab-btn\" [class.active]=\"activeTab === 'read'\" (click)=\"switchTab('read')\">\n      Read\n      @if (readNotifications.length > 0) {\n        <span class=\"tab-badge read-badge\">{{ readNotifications.length }}</span>\n      }\n    </button>\n  </div>\n\n  <!-- Notifications List -->\n  <div class=\"notifications-list\">\n    @if (currentNotifications.length > 0) {\n      @for (notification of currentNotifications; track notification.id) {\n        <div\n          class=\"notification-item\"\n          [class.unread]=\"!notification.isRead\"\n          (click)=\"openDetails(notification)\"\n        >\n          @let t = typeOf(notification);\n          <div class=\"notif-accent\"\n            [class.type-info]=\"t === 'Info'\"\n            [class.type-success]=\"t === 'Success'\"\n            [class.type-warning]=\"t === 'Warning'\"\n            [class.type-error]=\"t === 'Error'\"></div>\n          <div class=\"notif-type-icon\"\n            [class.type-info]=\"t === 'Info'\"\n            [class.type-success]=\"t === 'Success'\"\n            [class.type-warning]=\"t === 'Warning'\"\n            [class.type-error]=\"t === 'Error'\">\n            @if (t === 'Info') {\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <path d=\"M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9\"/><path d=\"M13.73 21a2 2 0 0 1-3.46 0\"/>\n              </svg>\n            }\n            @if (t === 'Success') {\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <polyline points=\"20 6 9 17 4 12\"/>\n              </svg>\n            }\n            @if (t === 'Warning') {\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <path d=\"M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z\"/><line x1=\"12\" y1=\"9\" x2=\"12\" y2=\"13\"/><line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"/>\n              </svg>\n            }\n            @if (t === 'Error') {\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <circle cx=\"12\" cy=\"12\" r=\"10\"/><line x1=\"15\" y1=\"9\" x2=\"9\" y2=\"15\"/><line x1=\"9\" y1=\"9\" x2=\"15\" y2=\"15\"/>\n              </svg>\n            }\n          </div>\n          <div class=\"notification-content\">\n            <div class=\"notification-title\">{{ notification.title }}</div>\n            <div class=\"notification-message\">{{ getNotificationMessage(notification) }}</div>\n            <div class=\"notification-meta\">\n              <span class=\"app-name\">{{ notification.sourceAppName }}</span>\n              <span class=\"time\">{{ dateLabels.get(notification.id) }}</span>\n            </div>\n          </div>\n          @if (!notification.isRead) {\n            <button class=\"icon-btn read-btn\" (click)=\"markAsRead(notification.id, $event)\" title=\"Mark as read\" aria-label=\"Mark as read\">\n              <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\">\n                <polyline points=\"20 6 9 17 4 12\"/>\n              </svg>\n            </button>\n          }\n          @if (notification.isRead) {\n            <button class=\"icon-btn delete-btn\" (click)=\"delete(notification.id, $event)\" title=\"Delete\" aria-label=\"Delete notification\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6\"/><path d=\"M10 11v6\"/><path d=\"M14 11v6\"/><path d=\"M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2\"/>\n              </svg>\n            </button>\n          }\n        </div>\n      }\n    } @else {\n      <div class=\"empty-state\">\n        <svg class=\"empty-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"44\" height=\"44\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <path d=\"M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9\"/>\n          <path d=\"M13.73 21a2 2 0 0 1-3.46 0\"/>\n        </svg>\n        <p>No {{ activeTab }} notifications</p>\n      </div>\n    }\n  </div>\n\n  <!-- Footer Actions -->\n  @if (currentNotifications.length > 0) {\n    <div class=\"panel-footer\">\n      @if (activeTab === 'unread') {\n        <div class=\"footer-actions\">\n          @if (unreadNotifications.length > 0) {\n            <button class=\"action-btn\" (click)=\"markAllAsRead()\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg>\n              Mark all read\n            </button>\n            <button class=\"action-btn delete-all-btn\" (click)=\"deleteAllUnread()\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6\"/></svg>\n              Delete all\n            </button>\n          }\n        </div>\n      }\n      @if (activeTab === 'read' && readNotifications.length > 0) {\n        <button class=\"action-btn delete-all-btn\" (click)=\"deleteAllRead()\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6\"/></svg>\n          Delete all\n        </button>\n      }\n    </div>\n  }\n</div>\n\n<!-- Details Modal -->\n@if (selectedNotification) {\n  <div class=\"modal-overlay\" (click)=\"closeDetails()\">\n    <div class=\"modal-container\" (click)=\"$event.stopPropagation()\">\n      <div class=\"modal-header\"\n        [class.modal-type-info]=\"typeOf(selectedNotification) === 'Info'\"\n        [class.modal-type-success]=\"typeOf(selectedNotification) === 'Success'\"\n        [class.modal-type-warning]=\"typeOf(selectedNotification) === 'Warning'\"\n        [class.modal-type-error]=\"typeOf(selectedNotification) === 'Error'\">\n        <div class=\"modal-header-left\">\n          <div class=\"modal-type-icon\">\n            @if (typeOf(selectedNotification) === 'Info') {\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <path d=\"M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9\"/><path d=\"M13.73 21a2 2 0 0 1-3.46 0\"/>\n              </svg>\n            }\n            @if (typeOf(selectedNotification) === 'Success') {\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"/><polyline points=\"22 4 12 14.01 9 11.01\"/>\n              </svg>\n            }\n            @if (typeOf(selectedNotification) === 'Warning') {\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <path d=\"M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z\"/><line x1=\"12\" y1=\"9\" x2=\"12\" y2=\"13\"/>\n              </svg>\n            }\n            @if (typeOf(selectedNotification) === 'Error') {\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <circle cx=\"12\" cy=\"12\" r=\"10\"/><line x1=\"15\" y1=\"9\" x2=\"9\" y2=\"15\"/><line x1=\"9\" y1=\"9\" x2=\"15\" y2=\"15\"/>\n              </svg>\n            }\n          </div>\n          <h3>{{ selectedNotification.title }}</h3>\n        </div>\n        <button class=\"close-btn\" (click)=\"closeDetails()\" title=\"Close\" aria-label=\"Close notification detail\">\n          <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\">\n            <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"/>\n          </svg>\n        </button>\n      </div>\n      <div class=\"modal-meta\">\n        <span class=\"app-name\">{{ selectedNotification.sourceAppName }}</span>\n        <span class=\"time\">{{ selectedNotificationDate }}</span>\n      </div>\n      <div class=\"modal-body\" [innerHTML]=\"selectedNotificationHtml\"></div>\n      <div class=\"modal-footer\">\n        @if (selectedNotification.url?.trim()) {\n          <button class=\"action-btn see-details-btn\" (click)=\"openUrl()\">See Details</button>\n        }\n        <button class=\"action-btn\" (click)=\"closeDetails()\">Close</button>\n      </div>\n    </div>\n  </div>\n}\n", styles: [".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;color:var(--text-muted);cursor:pointer;font-size:13px;font-weight:500;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}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;gap:12px;color:var(--text-muted)}.empty-state p{margin:0;font-size:13px}.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)}}\n", ":host{display:block;position:relative;--primary: #1976d2;--primary-hover: #1565c0;--success: #43a047;--error: #f44336;--error-hover: #d32f2f;--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)}.tab-btn:not(.active) .tab-badge{background:var(--error)}.read-badge{background:var(--text-muted)}.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}.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)}.notif-accent.type-warning{background:var(--warning-color)}.notif-accent.type-error{background:var(--error)}.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);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);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)}.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);background:#43a0471a}.delete-btn:hover{color:var(--error);background:#f443361a}.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:#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)}.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)}.modal-header.modal-type-warning{border-top-color:var(--warning-color)}.modal-header.modal-type-error{border-top-color:var(--error)}.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);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);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;gap:8px}.modal-footer .action-btn{width:auto;padding:8px 24px}.modal-footer .see-details-btn{background:var(--info-bg);color:var(--info-color);border:1px solid var(--info-color)}.modal-footer .see-details-btn:hover{opacity:.85}@media(max-width:600px){.notification-panel{width:100%;right:-100%}.modal-container{width:95%;max-height:90vh}}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: NotificationPanelComponent, isStandalone: true, selector: "ma-notification-panel", outputs: { notificationRead: "notificationRead" }, host: { properties: { "class": "this.themeClass" } }, ngImport: i0, template: "<div class=\"notification-panel\" [class.open]=\"isOpen()\">\n  <!-- Header -->\n  <div class=\"panel-header\">\n    <div class=\"panel-header-left\">\n      <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\">\n        <path d=\"M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9\"/>\n        <path d=\"M13.73 21a2 2 0 0 1-3.46 0\"/>\n      </svg>\n      <h3>Notifications</h3>\n    </div>\n    <button class=\"close-btn\" (click)=\"close()\" title=\"Close\" aria-label=\"Close notifications\">\n      <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\">\n        <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"/>\n      </svg>\n    </button>\n  </div>\n\n  <!-- Tabs -->\n  <div class=\"tabs\">\n    <button class=\"tab-btn\" [class.active]=\"activeTab() === 'unread'\" (click)=\"switchTab('unread')\">\n      Unread\n      @if (unreadNotifications().length > 0) {\n        <span class=\"tab-badge\">{{ unreadNotifications().length }}</span>\n      }\n    </button>\n    <button class=\"tab-btn\" [class.active]=\"activeTab() === 'read'\" (click)=\"switchTab('read')\">\n      Read\n      @if (readNotifications().length > 0) {\n        <span class=\"tab-badge read-badge\">{{ readNotifications().length }}</span>\n      }\n    </button>\n  </div>\n\n  <!-- Notifications List -->\n  <div class=\"notifications-list\">\n    @if (currentNotifications().length > 0) {\n      @for (notification of currentNotifications(); track notification.id) {\n        <div\n          class=\"notification-item\"\n          [class.unread]=\"!notification.isRead\"\n          (click)=\"openDetails(notification)\"\n        >\n          @let t = typeOf(notification);\n          <div class=\"notif-accent\"\n            [class.type-info]=\"t === 'Info'\"\n            [class.type-success]=\"t === 'Success'\"\n            [class.type-warning]=\"t === 'Warning'\"\n            [class.type-error]=\"t === 'Error'\"></div>\n          <div class=\"notif-type-icon\"\n            [class.type-info]=\"t === 'Info'\"\n            [class.type-success]=\"t === 'Success'\"\n            [class.type-warning]=\"t === 'Warning'\"\n            [class.type-error]=\"t === 'Error'\">\n            @if (t === 'Info') {\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <path d=\"M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9\"/><path d=\"M13.73 21a2 2 0 0 1-3.46 0\"/>\n              </svg>\n            }\n            @if (t === 'Success') {\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <polyline points=\"20 6 9 17 4 12\"/>\n              </svg>\n            }\n            @if (t === 'Warning') {\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <path d=\"M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z\"/><line x1=\"12\" y1=\"9\" x2=\"12\" y2=\"13\"/><line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"/>\n              </svg>\n            }\n            @if (t === 'Error') {\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <circle cx=\"12\" cy=\"12\" r=\"10\"/><line x1=\"15\" y1=\"9\" x2=\"9\" y2=\"15\"/><line x1=\"9\" y1=\"9\" x2=\"15\" y2=\"15\"/>\n              </svg>\n            }\n          </div>\n          <div class=\"notification-content\">\n            <div class=\"notification-title\">{{ notification.title }}</div>\n            <div class=\"notification-message\">{{ notification.message }}</div>\n            <div class=\"notification-meta\">\n              <span class=\"app-name\">{{ notification.sourceAppName }}</span>\n              <span class=\"time\">{{ dateLabels().get(notification.id) }}</span>\n            </div>\n          </div>\n          @if (!notification.isRead) {\n            <button class=\"icon-btn read-btn\" (click)=\"markAsRead(notification.id, $event)\" title=\"Mark as read\" aria-label=\"Mark as read\">\n              <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\">\n                <polyline points=\"20 6 9 17 4 12\"/>\n              </svg>\n            </button>\n          }\n          @if (notification.isRead) {\n            <button class=\"icon-btn delete-btn\" (click)=\"delete(notification.id, $event)\" title=\"Delete\" aria-label=\"Delete notification\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6\"/><path d=\"M10 11v6\"/><path d=\"M14 11v6\"/><path d=\"M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2\"/>\n              </svg>\n            </button>\n          }\n        </div>\n      }\n    } @else {\n      <div class=\"empty-state\">\n        <svg class=\"empty-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"44\" height=\"44\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <path d=\"M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9\"/>\n          <path d=\"M13.73 21a2 2 0 0 1-3.46 0\"/>\n        </svg>\n        <p>No {{ activeTab() }} notifications</p>\n      </div>\n    }\n  </div>\n\n  <!-- Footer Actions -->\n  @if (currentNotifications().length > 0) {\n    <div class=\"panel-footer\">\n      @if (activeTab() === 'unread') {\n        <div class=\"footer-actions\">\n          @if (unreadNotifications().length > 0) {\n            <button class=\"action-btn\" (click)=\"markAllAsRead()\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg>\n              Mark all read\n            </button>\n            <button class=\"action-btn delete-all-btn\" (click)=\"deleteAllUnread()\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6\"/></svg>\n              Delete all\n            </button>\n          }\n        </div>\n      }\n      @if (activeTab() === 'read' && readNotifications().length > 0) {\n        <button class=\"action-btn delete-all-btn\" (click)=\"deleteAllRead()\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6\"/></svg>\n          Delete all\n        </button>\n      }\n    </div>\n  }\n</div>\n\n<!-- Details Modal -->\n@if (selectedNotification()) {\n  <div class=\"modal-overlay\" (click)=\"closeDetails()\">\n    <div class=\"modal-container\" (click)=\"$event.stopPropagation()\">\n      <div class=\"modal-header\"\n        [class.modal-type-info]=\"typeOf(selectedNotification()!) === 'Info'\"\n        [class.modal-type-success]=\"typeOf(selectedNotification()!) === 'Success'\"\n        [class.modal-type-warning]=\"typeOf(selectedNotification()!) === 'Warning'\"\n        [class.modal-type-error]=\"typeOf(selectedNotification()!) === 'Error'\">\n        <div class=\"modal-header-left\">\n          <div class=\"modal-type-icon\">\n            @if (typeOf(selectedNotification()!) === 'Info') {\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <path d=\"M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9\"/><path d=\"M13.73 21a2 2 0 0 1-3.46 0\"/>\n              </svg>\n            }\n            @if (typeOf(selectedNotification()!) === 'Success') {\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"/><polyline points=\"22 4 12 14.01 9 11.01\"/>\n              </svg>\n            }\n            @if (typeOf(selectedNotification()!) === 'Warning') {\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <path d=\"M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z\"/><line x1=\"12\" y1=\"9\" x2=\"12\" y2=\"13\"/>\n              </svg>\n            }\n            @if (typeOf(selectedNotification()!) === 'Error') {\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <circle cx=\"12\" cy=\"12\" r=\"10\"/><line x1=\"15\" y1=\"9\" x2=\"9\" y2=\"15\"/><line x1=\"9\" y1=\"9\" x2=\"15\" y2=\"15\"/>\n              </svg>\n            }\n          </div>\n          <h3>{{ selectedNotification()!.title }}</h3>\n        </div>\n        <button class=\"close-btn\" (click)=\"closeDetails()\" title=\"Close\" aria-label=\"Close notification detail\">\n          <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\">\n            <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"/>\n          </svg>\n        </button>\n      </div>\n      <div class=\"modal-meta\">\n        <span class=\"app-name\">{{ selectedNotification()!.sourceAppName }}</span>\n        <span class=\"time\">{{ selectedNotificationDate() }}</span>\n      </div>\n      <div class=\"modal-body\" [innerHTML]=\"selectedNotificationHtml()\"></div>\n      <div class=\"modal-footer\">\n        @if (selectedNotification()?.url?.trim()) {\n          <button class=\"action-btn see-details-btn\" (click)=\"openUrl()\">See Details</button>\n        }\n        <button class=\"action-btn\" (click)=\"closeDetails()\">Close</button>\n      </div>\n    </div>\n  </div>\n}\n", styles: [".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;color:var(--text-muted);cursor:pointer;font-size:13px;font-weight:500;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}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;gap:12px;color:var(--text-muted)}.empty-state p{margin:0;font-size:13px}.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)}}\n", ":host{display:block;position:relative;--primary: #1976d2;--primary-hover: #1565c0;--success: #43a047;--error: #f44336;--error-hover: #d32f2f;--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)}.tab-btn:not(.active) .tab-badge{background:var(--error)}.read-badge{background:var(--text-muted)}.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}.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)}.notif-accent.type-warning{background:var(--warning-color)}.notif-accent.type-error{background:var(--error)}.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);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);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)}.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);background:#43a0471a}.delete-btn:hover{color:var(--error);background:#f443361a}.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:#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)}.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)}.modal-header.modal-type-warning{border-top-color:var(--warning-color)}.modal-header.modal-type-error{border-top-color:var(--error)}.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);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);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;gap:8px}.modal-footer .action-btn{width:auto;padding:8px 24px}.modal-footer .see-details-btn{background:var(--info-bg);color:var(--info-color);border:1px solid var(--info-color)}.modal-footer .see-details-btn:hover{opacity:.85}@media(max-width:600px){.notification-panel{width:100%;right:-100%}.modal-container{width:95%;max-height:90vh}}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: NotificationPanelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ma-notification-panel', imports: [], template: "<div class=\"notification-panel\" [class.open]=\"isOpen\">\n  <!-- Header -->\n  <div class=\"panel-header\">\n    <div class=\"panel-header-left\">\n      <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\">\n        <path d=\"M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9\"/>\n        <path d=\"M13.73 21a2 2 0 0 1-3.46 0\"/>\n      </svg>\n      <h3>Notifications</h3>\n    </div>\n    <button class=\"close-btn\" (click)=\"close()\" title=\"Close\" aria-label=\"Close notifications\">\n      <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\">\n        <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"/>\n      </svg>\n    </button>\n  </div>\n\n  <!-- Tabs -->\n  <div class=\"tabs\">\n    <button class=\"tab-btn\" [class.active]=\"activeTab === 'unread'\" (click)=\"switchTab('unread')\">\n      Unread\n      @if (unreadNotifications.length > 0) {\n        <span class=\"tab-badge\">{{ unreadNotifications.length }}</span>\n      }\n    </button>\n    <button class=\"tab-btn\" [class.active]=\"activeTab === 'read'\" (click)=\"switchTab('read')\">\n      Read\n      @if (readNotifications.length > 0) {\n        <span class=\"tab-badge read-badge\">{{ readNotifications.length }}</span>\n      }\n    </button>\n  </div>\n\n  <!-- Notifications List -->\n  <div class=\"notifications-list\">\n    @if (currentNotifications.length > 0) {\n      @for (notification of currentNotifications; track notification.id) {\n        <div\n          class=\"notification-item\"\n          [class.unread]=\"!notification.isRead\"\n          (click)=\"openDetails(notification)\"\n        >\n          @let t = typeOf(notification);\n          <div class=\"notif-accent\"\n            [class.type-info]=\"t === 'Info'\"\n            [class.type-success]=\"t === 'Success'\"\n            [class.type-warning]=\"t === 'Warning'\"\n            [class.type-error]=\"t === 'Error'\"></div>\n          <div class=\"notif-type-icon\"\n            [class.type-info]=\"t === 'Info'\"\n            [class.type-success]=\"t === 'Success'\"\n            [class.type-warning]=\"t === 'Warning'\"\n            [class.type-error]=\"t === 'Error'\">\n            @if (t === 'Info') {\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <path d=\"M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9\"/><path d=\"M13.73 21a2 2 0 0 1-3.46 0\"/>\n              </svg>\n            }\n            @if (t === 'Success') {\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <polyline points=\"20 6 9 17 4 12\"/>\n              </svg>\n            }\n            @if (t === 'Warning') {\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <path d=\"M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z\"/><line x1=\"12\" y1=\"9\" x2=\"12\" y2=\"13\"/><line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"/>\n              </svg>\n            }\n            @if (t === 'Error') {\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <circle cx=\"12\" cy=\"12\" r=\"10\"/><line x1=\"15\" y1=\"9\" x2=\"9\" y2=\"15\"/><line x1=\"9\" y1=\"9\" x2=\"15\" y2=\"15\"/>\n              </svg>\n            }\n          </div>\n          <div class=\"notification-content\">\n            <div class=\"notification-title\">{{ notification.title }}</div>\n            <div class=\"notification-message\">{{ getNotificationMessage(notification) }}</div>\n            <div class=\"notification-meta\">\n              <span class=\"app-name\">{{ notification.sourceAppName }}</span>\n              <span class=\"time\">{{ dateLabels.get(notification.id) }}</span>\n            </div>\n          </div>\n          @if (!notification.isRead) {\n            <button class=\"icon-btn read-btn\" (click)=\"markAsRead(notification.id, $event)\" title=\"Mark as read\" aria-label=\"Mark as read\">\n              <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\">\n                <polyline points=\"20 6 9 17 4 12\"/>\n              </svg>\n            </button>\n          }\n          @if (notification.isRead) {\n            <button class=\"icon-btn delete-btn\" (click)=\"delete(notification.id, $event)\" title=\"Delete\" aria-label=\"Delete notification\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6\"/><path d=\"M10 11v6\"/><path d=\"M14 11v6\"/><path d=\"M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2\"/>\n              </svg>\n            </button>\n          }\n        </div>\n      }\n    } @else {\n      <div class=\"empty-state\">\n        <svg class=\"empty-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"44\" height=\"44\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <path d=\"M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9\"/>\n          <path d=\"M13.73 21a2 2 0 0 1-3.46 0\"/>\n        </svg>\n        <p>No {{ activeTab }} notifications</p>\n      </div>\n    }\n  </div>\n\n  <!-- Footer Actions -->\n  @if (currentNotifications.length > 0) {\n    <div class=\"panel-footer\">\n      @if (activeTab === 'unread') {\n        <div class=\"footer-actions\">\n          @if (unreadNotifications.length > 0) {\n            <button class=\"action-btn\" (click)=\"markAllAsRead()\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg>\n              Mark all read\n            </button>\n            <button class=\"action-btn delete-all-btn\" (click)=\"deleteAllUnread()\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6\"/></svg>\n              Delete all\n            </button>\n          }\n        </div>\n      }\n      @if (activeTab === 'read' && readNotifications.length > 0) {\n        <button class=\"action-btn delete-all-btn\" (click)=\"deleteAllRead()\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6\"/></svg>\n          Delete all\n        </button>\n      }\n    </div>\n  }\n</div>\n\n<!-- Details Modal -->\n@if (selectedNotification) {\n  <div class=\"modal-overlay\" (click)=\"closeDetails()\">\n    <div class=\"modal-container\" (click)=\"$event.stopPropagation()\">\n      <div class=\"modal-header\"\n        [class.modal-type-info]=\"typeOf(selectedNotification) === 'Info'\"\n        [class.modal-type-success]=\"typeOf(selectedNotification) === 'Success'\"\n        [class.modal-type-warning]=\"typeOf(selectedNotification) === 'Warning'\"\n        [class.modal-type-error]=\"typeOf(selectedNotification) === 'Error'\">\n        <div class=\"modal-header-left\">\n          <div class=\"modal-type-icon\">\n            @if (typeOf(selectedNotification) === 'Info') {\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <path d=\"M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9\"/><path d=\"M13.73 21a2 2 0 0 1-3.46 0\"/>\n              </svg>\n            }\n            @if (typeOf(selectedNotification) === 'Success') {\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"/><polyline points=\"22 4 12 14.01 9 11.01\"/>\n              </svg>\n            }\n            @if (typeOf(selectedNotification) === 'Warning') {\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <path d=\"M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z\"/><line x1=\"12\" y1=\"9\" x2=\"12\" y2=\"13\"/>\n              </svg>\n            }\n            @if (typeOf(selectedNotification) === 'Error') {\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <circle cx=\"12\" cy=\"12\" r=\"10\"/><line x1=\"15\" y1=\"9\" x2=\"9\" y2=\"15\"/><line x1=\"9\" y1=\"9\" x2=\"15\" y2=\"15\"/>\n              </svg>\n            }\n          </div>\n          <h3>{{ selectedNotification.title }}</h3>\n        </div>\n        <button class=\"close-btn\" (click)=\"closeDetails()\" title=\"Close\" aria-label=\"Close notification detail\">\n          <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\">\n            <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"/>\n          </svg>\n        </button>\n      </div>\n      <div class=\"modal-meta\">\n        <span class=\"app-name\">{{ selectedNotification.sourceAppName }}</span>\n        <span class=\"time\">{{ selectedNotificationDate }}</span>\n      </div>\n      <div class=\"modal-body\" [innerHTML]=\"selectedNotificationHtml\"></div>\n      <div class=\"modal-footer\">\n        @if (selectedNotification.url?.trim()) {\n          <button class=\"action-btn see-details-btn\" (click)=\"openUrl()\">See Details</button>\n        }\n        <button class=\"action-btn\" (click)=\"closeDetails()\">Close</button>\n      </div>\n    </div>\n  </div>\n}\n", styles: [".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;color:var(--text-muted);cursor:pointer;font-size:13px;font-weight:500;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}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;gap:12px;color:var(--text-muted)}.empty-state p{margin:0;font-size:13px}.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)}}\n", ":host{display:block;position:relative;--primary: #1976d2;--primary-hover: #1565c0;--success: #43a047;--error: #f44336;--error-hover: #d32f2f;--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)}.tab-btn:not(.active) .tab-badge{background:var(--error)}.read-badge{background:var(--text-muted)}.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}.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)}.notif-accent.type-warning{background:var(--warning-color)}.notif-accent.type-error{background:var(--error)}.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);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);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)}.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);background:#43a0471a}.delete-btn:hover{color:var(--error);background:#f443361a}.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:#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)}.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)}.modal-header.modal-type-warning{border-top-color:var(--warning-color)}.modal-header.modal-type-error{border-top-color:var(--error)}.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);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);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;gap:8px}.modal-footer .action-btn{width:auto;padding:8px 24px}.modal-footer .see-details-btn{background:var(--info-bg);color:var(--info-color);border:1px solid var(--info-color)}.modal-footer .see-details-btn:hover{opacity:.85}@media(max-width:600px){.notification-panel{width:100%;right:-100%}.modal-container{width:95%;max-height:90vh}}\n"] }]
+            args: [{ selector: 'ma-notification-panel', imports: [], template: "<div class=\"notification-panel\" [class.open]=\"isOpen()\">\n  <!-- Header -->\n  <div class=\"panel-header\">\n    <div class=\"panel-header-left\">\n      <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\">\n        <path d=\"M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9\"/>\n        <path d=\"M13.73 21a2 2 0 0 1-3.46 0\"/>\n      </svg>\n      <h3>Notifications</h3>\n    </div>\n    <button class=\"close-btn\" (click)=\"close()\" title=\"Close\" aria-label=\"Close notifications\">\n      <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\">\n        <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"/>\n      </svg>\n    </button>\n  </div>\n\n  <!-- Tabs -->\n  <div class=\"tabs\">\n    <button class=\"tab-btn\" [class.active]=\"activeTab() === 'unread'\" (click)=\"switchTab('unread')\">\n      Unread\n      @if (unreadNotifications().length > 0) {\n        <span class=\"tab-badge\">{{ unreadNotifications().length }}</span>\n      }\n    </button>\n    <button class=\"tab-btn\" [class.active]=\"activeTab() === 'read'\" (click)=\"switchTab('read')\">\n      Read\n      @if (readNotifications().length > 0) {\n        <span class=\"tab-badge read-badge\">{{ readNotifications().length }}</span>\n      }\n    </button>\n  </div>\n\n  <!-- Notifications List -->\n  <div class=\"notifications-list\">\n    @if (currentNotifications().length > 0) {\n      @for (notification of currentNotifications(); track notification.id) {\n        <div\n          class=\"notification-item\"\n          [class.unread]=\"!notification.isRead\"\n          (click)=\"openDetails(notification)\"\n        >\n          @let t = typeOf(notification);\n          <div class=\"notif-accent\"\n            [class.type-info]=\"t === 'Info'\"\n            [class.type-success]=\"t === 'Success'\"\n            [class.type-warning]=\"t === 'Warning'\"\n            [class.type-error]=\"t === 'Error'\"></div>\n          <div class=\"notif-type-icon\"\n            [class.type-info]=\"t === 'Info'\"\n            [class.type-success]=\"t === 'Success'\"\n            [class.type-warning]=\"t === 'Warning'\"\n            [class.type-error]=\"t === 'Error'\">\n            @if (t === 'Info') {\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <path d=\"M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9\"/><path d=\"M13.73 21a2 2 0 0 1-3.46 0\"/>\n              </svg>\n            }\n            @if (t === 'Success') {\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <polyline points=\"20 6 9 17 4 12\"/>\n              </svg>\n            }\n            @if (t === 'Warning') {\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <path d=\"M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z\"/><line x1=\"12\" y1=\"9\" x2=\"12\" y2=\"13\"/><line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"/>\n              </svg>\n            }\n            @if (t === 'Error') {\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <circle cx=\"12\" cy=\"12\" r=\"10\"/><line x1=\"15\" y1=\"9\" x2=\"9\" y2=\"15\"/><line x1=\"9\" y1=\"9\" x2=\"15\" y2=\"15\"/>\n              </svg>\n            }\n          </div>\n          <div class=\"notification-content\">\n            <div class=\"notification-title\">{{ notification.title }}</div>\n            <div class=\"notification-message\">{{ notification.message }}</div>\n            <div class=\"notification-meta\">\n              <span class=\"app-name\">{{ notification.sourceAppName }}</span>\n              <span class=\"time\">{{ dateLabels().get(notification.id) }}</span>\n            </div>\n          </div>\n          @if (!notification.isRead) {\n            <button class=\"icon-btn read-btn\" (click)=\"markAsRead(notification.id, $event)\" title=\"Mark as read\" aria-label=\"Mark as read\">\n              <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\">\n                <polyline points=\"20 6 9 17 4 12\"/>\n              </svg>\n            </button>\n          }\n          @if (notification.isRead) {\n            <button class=\"icon-btn delete-btn\" (click)=\"delete(notification.id, $event)\" title=\"Delete\" aria-label=\"Delete notification\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6\"/><path d=\"M10 11v6\"/><path d=\"M14 11v6\"/><path d=\"M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2\"/>\n              </svg>\n            </button>\n          }\n        </div>\n      }\n    } @else {\n      <div class=\"empty-state\">\n        <svg class=\"empty-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"44\" height=\"44\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <path d=\"M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9\"/>\n          <path d=\"M13.73 21a2 2 0 0 1-3.46 0\"/>\n        </svg>\n        <p>No {{ activeTab() }} notifications</p>\n      </div>\n    }\n  </div>\n\n  <!-- Footer Actions -->\n  @if (currentNotifications().length > 0) {\n    <div class=\"panel-footer\">\n      @if (activeTab() === 'unread') {\n        <div class=\"footer-actions\">\n          @if (unreadNotifications().length > 0) {\n            <button class=\"action-btn\" (click)=\"markAllAsRead()\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg>\n              Mark all read\n            </button>\n            <button class=\"action-btn delete-all-btn\" (click)=\"deleteAllUnread()\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6\"/></svg>\n              Delete all\n            </button>\n          }\n        </div>\n      }\n      @if (activeTab() === 'read' && readNotifications().length > 0) {\n        <button class=\"action-btn delete-all-btn\" (click)=\"deleteAllRead()\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6\"/></svg>\n          Delete all\n        </button>\n      }\n    </div>\n  }\n</div>\n\n<!-- Details Modal -->\n@if (selectedNotification()) {\n  <div class=\"modal-overlay\" (click)=\"closeDetails()\">\n    <div class=\"modal-container\" (click)=\"$event.stopPropagation()\">\n      <div class=\"modal-header\"\n        [class.modal-type-info]=\"typeOf(selectedNotification()!) === 'Info'\"\n        [class.modal-type-success]=\"typeOf(selectedNotification()!) === 'Success'\"\n        [class.modal-type-warning]=\"typeOf(selectedNotification()!) === 'Warning'\"\n        [class.modal-type-error]=\"typeOf(selectedNotification()!) === 'Error'\">\n        <div class=\"modal-header-left\">\n          <div class=\"modal-type-icon\">\n            @if (typeOf(selectedNotification()!) === 'Info') {\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <path d=\"M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9\"/><path d=\"M13.73 21a2 2 0 0 1-3.46 0\"/>\n              </svg>\n            }\n            @if (typeOf(selectedNotification()!) === 'Success') {\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"/><polyline points=\"22 4 12 14.01 9 11.01\"/>\n              </svg>\n            }\n            @if (typeOf(selectedNotification()!) === 'Warning') {\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <path d=\"M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z\"/><line x1=\"12\" y1=\"9\" x2=\"12\" y2=\"13\"/>\n              </svg>\n            }\n            @if (typeOf(selectedNotification()!) === 'Error') {\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <circle cx=\"12\" cy=\"12\" r=\"10\"/><line x1=\"15\" y1=\"9\" x2=\"9\" y2=\"15\"/><line x1=\"9\" y1=\"9\" x2=\"15\" y2=\"15\"/>\n              </svg>\n            }\n          </div>\n          <h3>{{ selectedNotification()!.title }}</h3>\n        </div>\n        <button class=\"close-btn\" (click)=\"closeDetails()\" title=\"Close\" aria-label=\"Close notification detail\">\n          <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\">\n            <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"/>\n          </svg>\n        </button>\n      </div>\n      <div class=\"modal-meta\">\n        <span class=\"app-name\">{{ selectedNotification()!.sourceAppName }}</span>\n        <span class=\"time\">{{ selectedNotificationDate() }}</span>\n      </div>\n      <div class=\"modal-body\" [innerHTML]=\"selectedNotificationHtml()\"></div>\n      <div class=\"modal-footer\">\n        @if (selectedNotification()?.url?.trim()) {\n          <button class=\"action-btn see-details-btn\" (click)=\"openUrl()\">See Details</button>\n        }\n        <button class=\"action-btn\" (click)=\"closeDetails()\">Close</button>\n      </div>\n    </div>\n  </div>\n}\n", styles: [".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;color:var(--text-muted);cursor:pointer;font-size:13px;font-weight:500;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}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;gap:12px;color:var(--text-muted)}.empty-state p{margin:0;font-size:13px}.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)}}\n", ":host{display:block;position:relative;--primary: #1976d2;--primary-hover: #1565c0;--success: #43a047;--error: #f44336;--error-hover: #d32f2f;--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)}.tab-btn:not(.active) .tab-badge{background:var(--error)}.read-badge{background:var(--text-muted)}.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}.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)}.notif-accent.type-warning{background:var(--warning-color)}.notif-accent.type-error{background:var(--error)}.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);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);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)}.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);background:#43a0471a}.delete-btn:hover{color:var(--error);background:#f443361a}.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:#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)}.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)}.modal-header.modal-type-warning{border-top-color:var(--warning-color)}.modal-header.modal-type-error{border-top-color:var(--error)}.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);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);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;gap:8px}.modal-footer .action-btn{width:auto;padding:8px 24px}.modal-footer .see-details-btn{background:var(--info-bg);color:var(--info-color);border:1px solid var(--info-color)}.modal-footer .see-details-btn:hover{opacity:.85}@media(max-width:600px){.notification-panel{width:100%;right:-100%}.modal-container{width:95%;max-height:90vh}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { notificationRead: [{ type: i0.Output, args: ["notificationRead"] }], themeClass: [{
                 type: HostBinding,
                 args: ['class']
@@ -991,12 +925,12 @@ var ApprovalActionType;
 
 class MaApprovalPanelComponent {
     approvalActioned = output();
-    isOpen = false;
-    loading = false;
-    activeTab = 'processing';
-    processingItems = [];
-    approvedItems = [];
-    rejectedItems = [];
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    activeTab = signal('processing', ...(ngDevMode ? [{ debugName: "activeTab" }] : /* istanbul ignore next */ []));
+    processingItems = signal([], ...(ngDevMode ? [{ debugName: "processingItems" }] : /* istanbul ignore next */ []));
+    approvedItems = signal([], ...(ngDevMode ? [{ debugName: "approvedItems" }] : /* istanbul ignore next */ []));
+    rejectedItems = signal([], ...(ngDevMode ? [{ debugName: "rejectedItems" }] : /* istanbul ignore next */ []));
     mesAuth = inject(MesAuthService);
     http = inject(HttpClient);
     router = inject(Router);
@@ -1007,68 +941,70 @@ class MaApprovalPanelComponent {
             this.approvalSvc = new MaApprovalService();
             this.approvalSvc.init(config, this.http);
         }
-        this.mesAuth.approvalEvents$.pipe(takeUntilDestroyed()).subscribe(() => {
-            if (this.isOpen)
+        const approvalEvent = toSignal(this.mesAuth.approvalEvents$);
+        effect(() => {
+            approvalEvent(); // track SignalR approval events
+            if (this.isOpen())
                 this.loadCurrentTab();
         });
     }
     open() {
-        this.isOpen = true;
+        this.isOpen.set(true);
         this.loadAllTabs();
     }
     close() {
-        this.isOpen = false;
+        this.isOpen.set(false);
     }
     toggle() {
-        if (this.isOpen)
+        if (this.isOpen())
             this.close();
         else
             this.open();
     }
     switchTab(tab) {
-        this.activeTab = tab;
+        this.activeTab.set(tab);
         this.loadCurrentTab();
     }
     loadAllTabs() {
-        this.loading = true;
+        this.loading.set(true);
         if (!this.approvalSvc) {
-            this.loading = false;
+            this.loading.set(false);
             return;
         }
         let pending = 3;
         const done = () => { if (--pending === 0)
-            this.loading = false; };
+            this.loading.set(false); };
         this.approvalSvc.getPendingApprovals(1, 100).subscribe({
-            next: r => { this.processingItems = r.items; done(); },
+            next: r => { this.processingItems.set(r.items); done(); },
             error: () => done()
         });
         this.approvalSvc.getMyRequests(1, 10, ApprovalDocumentStatus.Approved).subscribe({
-            next: r => { this.approvedItems = r.items; done(); },
+            next: r => { this.approvedItems.set(r.items); done(); },
             error: () => done()
         });
         this.approvalSvc.getMyRequests(1, 10, ApprovalDocumentStatus.Rejected).subscribe({
-            next: r => { this.rejectedItems = r.items; done(); },
+            next: r => { this.rejectedItems.set(r.items); done(); },
             error: () => done()
         });
     }
     loadCurrentTab() {
         if (!this.approvalSvc)
             return;
-        if (this.activeTab === 'processing') {
+        if (this.activeTab() === 'processing') {
             this.approvalSvc.getPendingApprovals(1, 100).subscribe({
-                next: r => this.processingItems = r.items,
+                next: r => this.processingItems.set(r.items),
                 error: () => { }
             });
         }
-        else if (this.activeTab === 'approved') {
+        else if (this.activeTab() === 'approved') {
             this.approvalSvc.getMyRequests(1, 10, ApprovalDocumentStatus.Approved).subscribe({
-                next: r => this.approvedItems = r.items,
+                next: r => this.approvedItems.set(r.items),
                 error: () => { }
             });
         }
         else {
             this.approvalSvc.getMyRequests(1, 10, ApprovalDocumentStatus.Rejected).subscribe({
-                next: r => this.rejectedItems = r.items,
+                next: r => this.rejectedItems.set(r.items),
                 error: () => { }
             });
         }
@@ -1083,11 +1019,11 @@ class MaApprovalPanelComponent {
         this.router.navigate(['/auth/approval/my-requests'], { queryParams: { status } });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: MaApprovalPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: MaApprovalPanelComponent, isStandalone: true, selector: "ma-approval-panel", outputs: { approvalActioned: "approvalActioned" }, ngImport: i0, template: "<div class=\"approval-backdrop\" [class.open]=\"isOpen\" (click)=\"close()\"></div>\n<div class=\"approval-panel\" [class.open]=\"isOpen\">\n\n  <!-- Header -->\n  <div class=\"panel-header\">\n    <div class=\"panel-header-left\">\n      <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\">\n        <path d=\"M9 11l3 3L22 4\"/>\n        <path d=\"M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11\"/>\n      </svg>\n      <h3>Approvals</h3>\n    </div>\n    <button class=\"close-btn\" (click)=\"close()\" aria-label=\"Close\">\n      <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\">\n        <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"/>\n      </svg>\n    </button>\n  </div>\n\n  <!-- Tabs -->\n  <div class=\"tabs\">\n    <button class=\"tab-btn\" [class.active]=\"activeTab === 'processing'\" (click)=\"switchTab('processing')\">\n      Processing\n      @if (processingItems.length > 0) {\n        <span class=\"tab-badge\">{{ processingItems.length }}</span>\n      }\n    </button>\n    <button class=\"tab-btn\" [class.active]=\"activeTab === 'approved'\" (click)=\"switchTab('approved')\">\n      Approved\n    </button>\n    <button class=\"tab-btn\" [class.active]=\"activeTab === 'rejected'\" (click)=\"switchTab('rejected')\">\n      Rejected\n    </button>\n  </div>\n\n  <!-- Content -->\n  <div class=\"panel-content\">\n    <!-- Loading -->\n    @if (loading) {\n      <div class=\"loading-state\">\n        <div class=\"spinner\"></div>\n        <span>Loading...</span>\n      </div>\n    }\n\n    <!-- Processing tab -->\n    @if (!loading && activeTab === 'processing') {\n      @if (processingItems.length === 0) {\n        <div class=\"empty-state\">\n          <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>\n          <p>No pending approvals</p>\n        </div>\n      }\n      @for (item of processingItems; track item.id) {\n        <div class=\"approval-item\" (click)=\"navigateToDetail(item.id)\">\n          <div class=\"item-title\">{{ item.title }}</div>\n          <div class=\"item-meta\">\n            <span class=\"item-requester\">By {{ item.requestedByUserName }}</span>\n            @if (item.currentStepName) {\n              <span class=\"item-step\">\u00B7 {{ item.currentStepName }}</span>\n            }\n          </div>\n          <div class=\"item-footer\">\n            <span class=\"item-time\">{{ item.createdAt | date:'shortDate' }}</span>\n            <span class=\"item-link\">View &rarr;</span>\n          </div>\n        </div>\n      }\n    }\n\n    <!-- Approved tab -->\n    @if (!loading && activeTab === 'approved') {\n      @if (approvedItems.length === 0) {\n        <div class=\"empty-state\">\n          <p>No approved documents</p>\n        </div>\n      }\n      @for (item of approvedItems; track item.id) {\n        <div class=\"approval-item approved\" (click)=\"navigateToDetail(item.id)\">\n          <div class=\"item-title\">{{ item.title }}</div>\n          <div class=\"item-meta\">\n            <span class=\"item-requester\">By {{ item.requestedByUserName }}</span>\n          </div>\n          <div class=\"item-footer\">\n            <span class=\"status-badge approved-badge\">Approved</span>\n            <span class=\"item-time\">{{ item.completedAt | date:'shortDate' }}</span>\n            <span class=\"item-link\">View &rarr;</span>\n          </div>\n        </div>\n      }\n      @if (approvedItems.length >= 10) {\n        <div class=\"show-more\" (click)=\"showMore('approved')\">Show more &rarr;</div>\n      }\n    }\n\n    <!-- Rejected tab -->\n    @if (!loading && activeTab === 'rejected') {\n      @if (rejectedItems.length === 0) {\n        <div class=\"empty-state\">\n          <p>No rejected documents</p>\n        </div>\n      }\n      @for (item of rejectedItems; track item.id) {\n        <div class=\"approval-item rejected\" (click)=\"navigateToDetail(item.id)\">\n          <div class=\"item-title\">{{ item.title }}</div>\n          <div class=\"item-meta\">\n            <span class=\"item-requester\">By {{ item.requestedByUserName }}</span>\n          </div>\n          <div class=\"item-footer\">\n            <span class=\"status-badge rejected-badge\">Rejected</span>\n            <span class=\"item-time\">{{ item.completedAt | date:'shortDate' }}</span>\n            <span class=\"item-link\">View &rarr;</span>\n          </div>\n        </div>\n      }\n      @if (rejectedItems.length >= 10) {\n        <div class=\"show-more\" (click)=\"showMore('rejected')\">Show more &rarr;</div>\n      }\n    }\n  </div>\n</div>\n", styles: [".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;color:var(--text-muted);cursor:pointer;font-size:13px;font-weight:500;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}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;gap:12px;color:var(--text-muted)}.empty-state p{margin:0;font-size:13px}.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)}}\n", ":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-content{flex:1;overflow-y:auto;padding:8px 0}.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: "pipe", type: DatePipe, name: "date" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: MaApprovalPanelComponent, isStandalone: true, selector: "ma-approval-panel", outputs: { approvalActioned: "approvalActioned" }, ngImport: i0, template: "<div class=\"approval-backdrop\" [class.open]=\"isOpen()\" (click)=\"close()\"></div>\n<div class=\"approval-panel\" [class.open]=\"isOpen()\">\n\n  <!-- Header -->\n  <div class=\"panel-header\">\n    <div class=\"panel-header-left\">\n      <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\">\n        <path d=\"M9 11l3 3L22 4\"/>\n        <path d=\"M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11\"/>\n      </svg>\n      <h3>Approvals</h3>\n    </div>\n    <button class=\"close-btn\" (click)=\"close()\" aria-label=\"Close\">\n      <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\">\n        <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"/>\n      </svg>\n    </button>\n  </div>\n\n  <!-- Tabs -->\n  <div class=\"tabs\">\n    <button class=\"tab-btn\" [class.active]=\"activeTab() === 'processing'\" (click)=\"switchTab('processing')\">\n      Processing\n      @if (processingItems().length > 0) {\n        <span class=\"tab-badge\">{{ processingItems().length }}</span>\n      }\n    </button>\n    <button class=\"tab-btn\" [class.active]=\"activeTab() === 'approved'\" (click)=\"switchTab('approved')\">\n      Approved\n    </button>\n    <button class=\"tab-btn\" [class.active]=\"activeTab() === 'rejected'\" (click)=\"switchTab('rejected')\">\n      Rejected\n    </button>\n  </div>\n\n  <!-- Content -->\n  <div class=\"panel-content\">\n    <!-- Loading -->\n    @if (loading()) {\n      <div class=\"loading-state\">\n        <div class=\"spinner\"></div>\n        <span>Loading...</span>\n      </div>\n    }\n\n    <!-- Processing tab -->\n    @if (!loading() && activeTab() === 'processing') {\n      @if (processingItems().length === 0) {\n        <div class=\"empty-state\">\n          <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>\n          <p>No pending approvals</p>\n        </div>\n      }\n      @for (item of processingItems(); track item.id) {\n        <div class=\"approval-item\" (click)=\"navigateToDetail(item.id)\">\n          <div class=\"item-title\">{{ item.title }}</div>\n          <div class=\"item-meta\">\n            <span class=\"item-requester\">By {{ item.requestedByUserName }}</span>\n            @if (item.currentStepName) {\n              <span class=\"item-step\">\u00B7 {{ item.currentStepName }}</span>\n            }\n          </div>\n          <div class=\"item-footer\">\n            <span class=\"item-time\">{{ item.createdAt | date:'shortDate' }}</span>\n            <span class=\"item-link\">View &rarr;</span>\n          </div>\n        </div>\n      }\n    }\n\n    <!-- Approved tab -->\n    @if (!loading() && activeTab() === 'approved') {\n      @if (approvedItems().length === 0) {\n        <div class=\"empty-state\">\n          <p>No approved documents</p>\n        </div>\n      }\n      @for (item of approvedItems(); track item.id) {\n        <div class=\"approval-item approved\" (click)=\"navigateToDetail(item.id)\">\n          <div class=\"item-title\">{{ item.title }}</div>\n          <div class=\"item-meta\">\n            <span class=\"item-requester\">By {{ item.requestedByUserName }}</span>\n          </div>\n          <div class=\"item-footer\">\n            <span class=\"status-badge approved-badge\">Approved</span>\n            <span class=\"item-time\">{{ item.completedAt | date:'shortDate' }}</span>\n            <span class=\"item-link\">View &rarr;</span>\n          </div>\n        </div>\n      }\n      @if (approvedItems().length >= 10) {\n        <div class=\"show-more\" (click)=\"showMore('approved')\">Show more &rarr;</div>\n      }\n    }\n\n    <!-- Rejected tab -->\n    @if (!loading() && activeTab() === 'rejected') {\n      @if (rejectedItems().length === 0) {\n        <div class=\"empty-state\">\n          <p>No rejected documents</p>\n        </div>\n      }\n      @for (item of rejectedItems(); track item.id) {\n        <div class=\"approval-item rejected\" (click)=\"navigateToDetail(item.id)\">\n          <div class=\"item-title\">{{ item.title }}</div>\n          <div class=\"item-meta\">\n            <span class=\"item-requester\">By {{ item.requestedByUserName }}</span>\n          </div>\n          <div class=\"item-footer\">\n            <span class=\"status-badge rejected-badge\">Rejected</span>\n            <span class=\"item-time\">{{ item.completedAt | date:'shortDate' }}</span>\n            <span class=\"item-link\">View &rarr;</span>\n          </div>\n        </div>\n      }\n      @if (rejectedItems().length >= 10) {\n        <div class=\"show-more\" (click)=\"showMore('rejected')\">Show more &rarr;</div>\n      }\n    }\n  </div>\n</div>\n", styles: [".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;color:var(--text-muted);cursor:pointer;font-size:13px;font-weight:500;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}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;gap:12px;color:var(--text-muted)}.empty-state p{margin:0;font-size:13px}.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)}}\n", ":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-content{flex:1;overflow-y:auto;padding:8px 0}.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: "pipe", type: DatePipe, name: "date" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: MaApprovalPanelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ma-approval-panel', imports: [DatePipe], template: "<div class=\"approval-backdrop\" [class.open]=\"isOpen\" (click)=\"close()\"></div>\n<div class=\"approval-panel\" [class.open]=\"isOpen\">\n\n  <!-- Header -->\n  <div class=\"panel-header\">\n    <div class=\"panel-header-left\">\n      <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\">\n        <path d=\"M9 11l3 3L22 4\"/>\n        <path d=\"M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11\"/>\n      </svg>\n      <h3>Approvals</h3>\n    </div>\n    <button class=\"close-btn\" (click)=\"close()\" aria-label=\"Close\">\n      <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\">\n        <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"/>\n      </svg>\n    </button>\n  </div>\n\n  <!-- Tabs -->\n  <div class=\"tabs\">\n    <button class=\"tab-btn\" [class.active]=\"activeTab === 'processing'\" (click)=\"switchTab('processing')\">\n      Processing\n      @if (processingItems.length > 0) {\n        <span class=\"tab-badge\">{{ processingItems.length }}</span>\n      }\n    </button>\n    <button class=\"tab-btn\" [class.active]=\"activeTab === 'approved'\" (click)=\"switchTab('approved')\">\n      Approved\n    </button>\n    <button class=\"tab-btn\" [class.active]=\"activeTab === 'rejected'\" (click)=\"switchTab('rejected')\">\n      Rejected\n    </button>\n  </div>\n\n  <!-- Content -->\n  <div class=\"panel-content\">\n    <!-- Loading -->\n    @if (loading) {\n      <div class=\"loading-state\">\n        <div class=\"spinner\"></div>\n        <span>Loading...</span>\n      </div>\n    }\n\n    <!-- Processing tab -->\n    @if (!loading && activeTab === 'processing') {\n      @if (processingItems.length === 0) {\n        <div class=\"empty-state\">\n          <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>\n          <p>No pending approvals</p>\n        </div>\n      }\n      @for (item of processingItems; track item.id) {\n        <div class=\"approval-item\" (click)=\"navigateToDetail(item.id)\">\n          <div class=\"item-title\">{{ item.title }}</div>\n          <div class=\"item-meta\">\n            <span class=\"item-requester\">By {{ item.requestedByUserName }}</span>\n            @if (item.currentStepName) {\n              <span class=\"item-step\">\u00B7 {{ item.currentStepName }}</span>\n            }\n          </div>\n          <div class=\"item-footer\">\n            <span class=\"item-time\">{{ item.createdAt | date:'shortDate' }}</span>\n            <span class=\"item-link\">View &rarr;</span>\n          </div>\n        </div>\n      }\n    }\n\n    <!-- Approved tab -->\n    @if (!loading && activeTab === 'approved') {\n      @if (approvedItems.length === 0) {\n        <div class=\"empty-state\">\n          <p>No approved documents</p>\n        </div>\n      }\n      @for (item of approvedItems; track item.id) {\n        <div class=\"approval-item approved\" (click)=\"navigateToDetail(item.id)\">\n          <div class=\"item-title\">{{ item.title }}</div>\n          <div class=\"item-meta\">\n            <span class=\"item-requester\">By {{ item.requestedByUserName }}</span>\n          </div>\n          <div class=\"item-footer\">\n            <span class=\"status-badge approved-badge\">Approved</span>\n            <span class=\"item-time\">{{ item.completedAt | date:'shortDate' }}</span>\n            <span class=\"item-link\">View &rarr;</span>\n          </div>\n        </div>\n      }\n      @if (approvedItems.length >= 10) {\n        <div class=\"show-more\" (click)=\"showMore('approved')\">Show more &rarr;</div>\n      }\n    }\n\n    <!-- Rejected tab -->\n    @if (!loading && activeTab === 'rejected') {\n      @if (rejectedItems.length === 0) {\n        <div class=\"empty-state\">\n          <p>No rejected documents</p>\n        </div>\n      }\n      @for (item of rejectedItems; track item.id) {\n        <div class=\"approval-item rejected\" (click)=\"navigateToDetail(item.id)\">\n          <div class=\"item-title\">{{ item.title }}</div>\n          <div class=\"item-meta\">\n            <span class=\"item-requester\">By {{ item.requestedByUserName }}</span>\n          </div>\n          <div class=\"item-footer\">\n            <span class=\"status-badge rejected-badge\">Rejected</span>\n            <span class=\"item-time\">{{ item.completedAt | date:'shortDate' }}</span>\n            <span class=\"item-link\">View &rarr;</span>\n          </div>\n        </div>\n      }\n      @if (rejectedItems.length >= 10) {\n        <div class=\"show-more\" (click)=\"showMore('rejected')\">Show more &rarr;</div>\n      }\n    }\n  </div>\n</div>\n", styles: [".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;color:var(--text-muted);cursor:pointer;font-size:13px;font-weight:500;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}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;gap:12px;color:var(--text-muted)}.empty-state p{margin:0;font-size:13px}.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)}}\n", ":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-content{flex:1;overflow-y:auto;padding:8px 0}.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"] }]
+            args: [{ selector: 'ma-approval-panel', imports: [DatePipe], template: "<div class=\"approval-backdrop\" [class.open]=\"isOpen()\" (click)=\"close()\"></div>\n<div class=\"approval-panel\" [class.open]=\"isOpen()\">\n\n  <!-- Header -->\n  <div class=\"panel-header\">\n    <div class=\"panel-header-left\">\n      <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\">\n        <path d=\"M9 11l3 3L22 4\"/>\n        <path d=\"M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11\"/>\n      </svg>\n      <h3>Approvals</h3>\n    </div>\n    <button class=\"close-btn\" (click)=\"close()\" aria-label=\"Close\">\n      <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\">\n        <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"/>\n      </svg>\n    </button>\n  </div>\n\n  <!-- Tabs -->\n  <div class=\"tabs\">\n    <button class=\"tab-btn\" [class.active]=\"activeTab() === 'processing'\" (click)=\"switchTab('processing')\">\n      Processing\n      @if (processingItems().length > 0) {\n        <span class=\"tab-badge\">{{ processingItems().length }}</span>\n      }\n    </button>\n    <button class=\"tab-btn\" [class.active]=\"activeTab() === 'approved'\" (click)=\"switchTab('approved')\">\n      Approved\n    </button>\n    <button class=\"tab-btn\" [class.active]=\"activeTab() === 'rejected'\" (click)=\"switchTab('rejected')\">\n      Rejected\n    </button>\n  </div>\n\n  <!-- Content -->\n  <div class=\"panel-content\">\n    <!-- Loading -->\n    @if (loading()) {\n      <div class=\"loading-state\">\n        <div class=\"spinner\"></div>\n        <span>Loading...</span>\n      </div>\n    }\n\n    <!-- Processing tab -->\n    @if (!loading() && activeTab() === 'processing') {\n      @if (processingItems().length === 0) {\n        <div class=\"empty-state\">\n          <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>\n          <p>No pending approvals</p>\n        </div>\n      }\n      @for (item of processingItems(); track item.id) {\n        <div class=\"approval-item\" (click)=\"navigateToDetail(item.id)\">\n          <div class=\"item-title\">{{ item.title }}</div>\n          <div class=\"item-meta\">\n            <span class=\"item-requester\">By {{ item.requestedByUserName }}</span>\n            @if (item.currentStepName) {\n              <span class=\"item-step\">\u00B7 {{ item.currentStepName }}</span>\n            }\n          </div>\n          <div class=\"item-footer\">\n            <span class=\"item-time\">{{ item.createdAt | date:'shortDate' }}</span>\n            <span class=\"item-link\">View &rarr;</span>\n          </div>\n        </div>\n      }\n    }\n\n    <!-- Approved tab -->\n    @if (!loading() && activeTab() === 'approved') {\n      @if (approvedItems().length === 0) {\n        <div class=\"empty-state\">\n          <p>No approved documents</p>\n        </div>\n      }\n      @for (item of approvedItems(); track item.id) {\n        <div class=\"approval-item approved\" (click)=\"navigateToDetail(item.id)\">\n          <div class=\"item-title\">{{ item.title }}</div>\n          <div class=\"item-meta\">\n            <span class=\"item-requester\">By {{ item.requestedByUserName }}</span>\n          </div>\n          <div class=\"item-footer\">\n            <span class=\"status-badge approved-badge\">Approved</span>\n            <span class=\"item-time\">{{ item.completedAt | date:'shortDate' }}</span>\n            <span class=\"item-link\">View &rarr;</span>\n          </div>\n        </div>\n      }\n      @if (approvedItems().length >= 10) {\n        <div class=\"show-more\" (click)=\"showMore('approved')\">Show more &rarr;</div>\n      }\n    }\n\n    <!-- Rejected tab -->\n    @if (!loading() && activeTab() === 'rejected') {\n      @if (rejectedItems().length === 0) {\n        <div class=\"empty-state\">\n          <p>No rejected documents</p>\n        </div>\n      }\n      @for (item of rejectedItems(); track item.id) {\n        <div class=\"approval-item rejected\" (click)=\"navigateToDetail(item.id)\">\n          <div class=\"item-title\">{{ item.title }}</div>\n          <div class=\"item-meta\">\n            <span class=\"item-requester\">By {{ item.requestedByUserName }}</span>\n          </div>\n          <div class=\"item-footer\">\n            <span class=\"status-badge rejected-badge\">Rejected</span>\n            <span class=\"item-time\">{{ item.completedAt | date:'shortDate' }}</span>\n            <span class=\"item-link\">View &rarr;</span>\n          </div>\n        </div>\n      }\n      @if (rejectedItems().length >= 10) {\n        <div class=\"show-more\" (click)=\"showMore('rejected')\">Show more &rarr;</div>\n      }\n    }\n  </div>\n</div>\n", styles: [".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;color:var(--text-muted);cursor:pointer;font-size:13px;font-weight:500;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}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;gap:12px;color:var(--text-muted)}.empty-state p{margin:0;font-size:13px}.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)}}\n", ":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-content{flex:1;overflow-y:auto;padding:8px 0}.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"] }]
         }], ctorParameters: () => [], propDecorators: { approvalActioned: [{ type: i0.Output, args: ["approvalActioned"] }] } });
 
 class MaUserComponent {
@@ -1129,39 +1065,28 @@ class NotificationBadgeComponent {
         return `theme-${this.themeService.currentTheme()}`;
     }
     unreadCount = signal(0, ...(ngDevMode ? [{ debugName: "unreadCount" }] : /* istanbul ignore next */ []));
-    hasUser = false;
     authService = inject(MesAuthService);
     themeService = inject(ThemeService);
     constructor() {
-        this.authService.currentUser$
-            .pipe(takeUntilDestroyed())
-            .subscribe(user => {
-            this.hasUser = !!user;
-            if (!this.hasUser) {
+        const currentUser = toSignal(this.authService.currentUser$, { initialValue: null });
+        const latestNotification = toSignal(this.authService.notifications$);
+        effect(() => {
+            if (!currentUser()) {
                 this.unreadCount.set(0);
                 return;
             }
             this.loadUnreadCount();
         });
-        // Listen for new notifications
-        this.authService.notifications$
-            .pipe(takeUntilDestroyed())
-            .subscribe(() => {
-            if (this.hasUser) {
+        effect(() => {
+            latestNotification(); // track SignalR notification events
+            if (currentUser())
                 this.loadUnreadCount();
-            }
         });
     }
     loadUnreadCount() {
-        if (!this.hasUser) {
-            this.unreadCount.set(0);
-            return;
-        }
         this.authService.getUnreadCount().subscribe({
-            next: (response) => {
-                this.unreadCount.set(response.unreadCount || 0);
-            },
-            error: (err) => console.error('Error loading unread count:', err)
+            next: (response) => this.unreadCount.set(response.unreadCount || 0),
+            error: () => { }
         });
     }
     onNotificationClick() {
@@ -1190,7 +1115,7 @@ class MaArvContainerComponent {
     cancelled = output();
     contentBody;
     get themeClass() { return `theme-${this.themeService.currentTheme()}`; }
-    routingMode = 'template';
+    routingMode = signal('template', ...(ngDevMode ? [{ debugName: "routingMode" }] : /* istanbul ignore next */ []));
     templates = signal([], ...(ngDevMode ? [{ debugName: "templates" }] : /* istanbul ignore next */ []));
     selectedTemplateId = signal(null, ...(ngDevMode ? [{ debugName: "selectedTemplateId" }] : /* istanbul ignore next */ []));
     selectedTemplate = signal(null, ...(ngDevMode ? [{ debugName: "selectedTemplate" }] : /* istanbul ignore next */ []));
@@ -1199,14 +1124,14 @@ class MaArvContainerComponent {
     stepCandidates = signal([], ...(ngDevMode ? [{ debugName: "stepCandidates" }] : /* istanbul ignore next */ []));
     stepLoadingCandidates = signal([], ...(ngDevMode ? [{ debugName: "stepLoadingCandidates" }] : /* istanbul ignore next */ []));
     stepSelectedUsers = signal([], ...(ngDevMode ? [{ debugName: "stepSelectedUsers" }] : /* istanbul ignore next */ []));
-    adHocSteps = [];
-    referenceUserIds = [];
-    refSearchQuery = '';
-    refSearchResults = [];
-    userSearchQuery = [];
-    userSearchResults = [];
-    candidateSearchQuery = [];
-    candidateSearchResults = [];
+    adHocSteps = signal([], ...(ngDevMode ? [{ debugName: "adHocSteps" }] : /* istanbul ignore next */ []));
+    referenceUserIds = signal([], ...(ngDevMode ? [{ debugName: "referenceUserIds" }] : /* istanbul ignore next */ []));
+    refSearchQuery = signal('', ...(ngDevMode ? [{ debugName: "refSearchQuery" }] : /* istanbul ignore next */ []));
+    refSearchResults = signal([], ...(ngDevMode ? [{ debugName: "refSearchResults" }] : /* istanbul ignore next */ []));
+    userSearchQuery = signal([], ...(ngDevMode ? [{ debugName: "userSearchQuery" }] : /* istanbul ignore next */ []));
+    userSearchResults = signal([], ...(ngDevMode ? [{ debugName: "userSearchResults" }] : /* istanbul ignore next */ []));
+    candidateSearchQuery = signal([], ...(ngDevMode ? [{ debugName: "candidateSearchQuery" }] : /* istanbul ignore next */ []));
+    candidateSearchResults = signal([], ...(ngDevMode ? [{ debugName: "candidateSearchResults" }] : /* istanbul ignore next */ []));
     submitting = signal(false, ...(ngDevMode ? [{ debugName: "submitting" }] : /* istanbul ignore next */ []));
     isSubmitted = signal(false, ...(ngDevMode ? [{ debugName: "isSubmitted" }] : /* istanbul ignore next */ []));
     errorMessage = computed(() => {
@@ -1219,14 +1144,21 @@ class MaArvContainerComponent {
         if (!this.title()) {
             return 'Title is required.';
         }
-        if (this.routingMode === 'template' && !this.selectedTemplateId()) {
+        if (this.routingMode() === 'template' && !this.selectedTemplateId()) {
             return 'Please select a template or switch to Custom Steps.';
         }
-        if (this.routingMode === 'adhoc' && this.adHocSteps.length === 0) {
+        if (this.routingMode() === 'adhoc' && this.adHocSteps().length === 0) {
             return 'Please add at least one approval step.';
         }
+        if (this.routingMode() === 'adhoc') {
+            for (const step of this.adHocSteps()) {
+                if (step.approverUserIds.length === 0) {
+                    return `Step "${step.stepName}" needs at least one approver.`;
+                }
+            }
+        }
         // Validate selectable steps (role-based or multi-assignee) have a selected approver
-        if (this.routingMode === 'template' && this.selectedTemplate()) {
+        if (this.routingMode() === 'template' && this.selectedTemplate()) {
             for (let i = 0; i < this.selectedTemplate().steps.length; i++) {
                 const step = this.selectedTemplate().steps[i];
                 const isSelectable = (this.stepCandidates()[i]?.length ?? 0) > 1;
@@ -1239,23 +1171,22 @@ class MaArvContainerComponent {
     }, ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
     isError = computed(() => !!this.errorMessage(), ...(ngDevMode ? [{ debugName: "isError" }] : /* istanbul ignore next */ []));
     isStepsError = computed(() => {
-        let stepsError = {};
-        // Validate selectable steps (role-based or multi-assignee) have a selected approver
-        if (this.routingMode === 'template' && this.selectedTemplate()) {
+        const stepsError = {};
+        if (this.routingMode() === 'template' && this.selectedTemplate()) {
             for (let i = 0; i < this.selectedTemplate().steps.length; i++) {
-                const step = this.selectedTemplate().steps[i];
                 const isSelectable = (this.stepCandidates()[i]?.length ?? 0) > 1;
-                if (isSelectable && !this.stepSelectedUsers()[i]) {
-                    stepsError[i] = true;
-                }
-                else
-                    stepsError[i] = false;
+                stepsError[i] = isSelectable && !this.stepSelectedUsers()[i];
+            }
+        }
+        if (this.routingMode() === 'adhoc') {
+            for (let i = 0; i < this.adHocSteps().length; i++) {
+                stepsError[i] = this.adHocSteps()[i].approverUserIds.length === 0;
             }
         }
         return stepsError;
     }, ...(ngDevMode ? [{ debugName: "isStepsError" }] : /* istanbul ignore next */ []));
     submitResultError = signal(null, ...(ngDevMode ? [{ debugName: "submitResultError" }] : /* istanbul ignore next */ []));
-    userLabelMap = {};
+    userLabelMap = signal({}, ...(ngDevMode ? [{ debugName: "userLabelMap" }] : /* istanbul ignore next */ []));
     mesAuth = inject(MesAuthService);
     themeService = inject(ThemeService);
     approvalSvc = null;
@@ -1291,6 +1222,8 @@ class MaArvContainerComponent {
         this.stepCandidates.set([]);
         this.stepLoadingCandidates.set([]);
         this.stepSelectedUsers.set([]);
+        this.candidateSearchQuery.set([]);
+        this.candidateSearchResults.set([]);
         this.approvalSvc.getTemplate(id).pipe(takeUntilDestroyed(this.destroyRef)).subscribe({
             next: (t) => {
                 this.selectedTemplate.set(t);
@@ -1304,6 +1237,8 @@ class MaArvContainerComponent {
         this.stepCandidates.set(steps.map(() => []));
         this.stepLoadingCandidates.set(steps.map(() => false));
         this.stepSelectedUsers.set(steps.map(() => ''));
+        this.candidateSearchQuery.set(steps.map(() => ''));
+        this.candidateSearchResults.set(steps.map(() => []));
         const config = this.mesAuth.getConfig();
         steps.forEach((step, i) => {
             if (step.roles && step.roles.length > 0) {
@@ -1325,7 +1260,7 @@ class MaArvContainerComponent {
                             next[i] = Array.from(merged.values());
                             return next;
                         });
-                        // Single candidate — pre-select automatically
+                        // Single candidate - pre-select automatically
                         if (this.stepCandidates()[i].length === 1) {
                             this.stepSelectedUsers.update(u => {
                                 const next = [...u];
@@ -1373,7 +1308,7 @@ class MaArvContainerComponent {
                             }));
                             return next;
                         });
-                        // Single assignee — pre-select automatically
+                        // Single assignee - pre-select automatically
                         if (this.stepCandidates()[i].length === 1) {
                             this.stepSelectedUsers.update(u => {
                                 const next = [...u];
@@ -1412,8 +1347,8 @@ class MaArvContainerComponent {
             return next;
         });
         this.storeLabelFromCandidates(userId, this.stepCandidates()[stepIndex]);
-        this.candidateSearchQuery[stepIndex] = '';
-        this.candidateSearchResults[stepIndex] = [];
+        this.candidateSearchQuery.update(q => { const copy = [...q]; copy[stepIndex] = ''; return copy; });
+        this.candidateSearchResults.update(r => { const copy = [...r]; copy[stepIndex] = []; return copy; });
     }
     normalize(str) {
         if (!str)
@@ -1426,17 +1361,23 @@ class MaArvContainerComponent {
             .toLowerCase();
     }
     onCandidateSearchInput(stepIndex, query) {
-        this.candidateSearchQuery[stepIndex] = query;
+        this.candidateSearchQuery.update(q => { const copy = [...q]; copy[stepIndex] = query; return copy; });
         if (!query || query.length < 2) {
-            this.candidateSearchResults[stepIndex] = this.stepCandidates()[stepIndex];
+            this.candidateSearchResults.update(r => { const copy = [...r]; copy[stepIndex] = this.stepCandidates()[stepIndex]; return copy; });
             return;
         }
         const q = this.normalize(query);
-        this.candidateSearchResults[stepIndex] = this.stepCandidates()[stepIndex]
-            .filter(u => this.normalize(u.fullName).includes(q)
-            || this.normalize(u.employeeCode).includes(q)
-            || this.normalize(u.department).includes(q)
-            || this.normalize(u.position).includes(q));
+        this.candidateSearchResults.update(r => {
+            const copy = [...r];
+            copy[stepIndex] = this.stepCandidates()[stepIndex].filter(u => this.normalize(u.fullName).includes(q)
+                || this.normalize(u.employeeCode).includes(q)
+                || this.normalize(u.department).includes(q)
+                || this.normalize(u.position).includes(q));
+            return copy;
+        });
+    }
+    clearCandidateResults(stepIndex) {
+        this.candidateSearchResults.update(r => { const copy = [...r]; copy[stepIndex] = []; return copy; });
     }
     onTemplateChange(event) {
         const val = event.target.value;
@@ -1447,68 +1388,96 @@ class MaArvContainerComponent {
         }
     }
     addStep() {
-        const order = this.adHocSteps.length + 1;
-        this.adHocSteps.push({ stepOrder: order, stepName: `Step ${order}`, approverUserIds: [] });
-        this.userSearchQuery.push('');
-        this.userSearchResults.push([]);
+        this.adHocSteps.update(steps => {
+            const order = steps.length + 1;
+            return [...steps, { stepOrder: order, stepName: `Step ${order}`, approverUserIds: [] }];
+        });
+        this.userSearchQuery.update(q => [...q, '']);
+        this.userSearchResults.update(r => [...r, []]);
     }
     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);
+        this.adHocSteps.update(steps => {
+            const copy = steps.filter((_, idx) => idx !== i);
+            copy.forEach((s, idx) => s.stepOrder = idx + 1);
+            return copy;
+        });
+        this.userSearchQuery.update(q => q.filter((_, idx) => idx !== i));
+        this.userSearchResults.update(r => r.filter((_, idx) => idx !== i));
+    }
+    updateStepName(stepIndex, name) {
+        this.adHocSteps.update(steps => {
+            const copy = [...steps];
+            copy[stepIndex] = { ...copy[stepIndex], stepName: name };
+            return copy;
+        });
     }
     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] = [];
+        this.adHocSteps.update(steps => {
+            const copy = [...steps];
+            const step = copy[stepIndex];
+            if (!step.approverUserIds.includes(userId)) {
+                copy[stepIndex] = { ...step, approverUserIds: [...step.approverUserIds, userId] };
+            }
+            return copy;
+        });
+        this.storeLabelFromResults(userId, this.userSearchResults()[stepIndex]);
+        this.userSearchQuery.update(q => { const copy = [...q]; copy[stepIndex] = ''; return copy; });
+        this.userSearchResults.update(r => { const copy = [...r]; copy[stepIndex] = []; return copy; });
     }
     removeApprover(stepIndex, approverIndex) {
-        this.adHocSteps[stepIndex].approverUserIds.splice(approverIndex, 1);
+        this.adHocSteps.update(steps => {
+            const copy = [...steps];
+            const step = copy[stepIndex];
+            const newApprovers = [...step.approverUserIds];
+            newApprovers.splice(approverIndex, 1);
+            copy[stepIndex] = { ...step, approverUserIds: newApprovers };
+            return copy;
+        });
     }
     addReference(userId) {
-        if (!this.referenceUserIds.includes(userId)) {
-            this.referenceUserIds.push(userId);
+        if (!this.referenceUserIds().includes(userId)) {
+            this.referenceUserIds.update(ids => [...ids, userId]);
         }
-        this.storeLabelFromResults(userId, this.refSearchResults);
-        this.refSearchQuery = '';
-        this.refSearchResults = [];
+        this.storeLabelFromResults(userId, this.refSearchResults());
+        this.refSearchQuery.set('');
+        this.refSearchResults.set([]);
     }
     storeLabelFromResults(userId, results) {
         const user = results.find((u) => u.id === userId);
         if (user) {
             const parts = [user.department, user.position, user.fullName, user.employeeCode].filter(Boolean);
-            this.userLabelMap[userId] = parts.length > 0 ? parts.join(' - ') : (user.userName || userId);
+            const label = parts.length > 0 ? parts.join(' - ') : (user.userName || userId);
+            this.userLabelMap.update(m => ({ ...m, [userId]: label }));
         }
     }
     storeLabelFromCandidates(userId, candidates) {
         const user = candidates.find((u) => u.userId === userId);
         if (user) {
             const parts = [user.department, user.position, user.fullName, user.employeeCode].filter(Boolean);
-            this.userLabelMap[userId] = parts.length > 0 ? parts.join(' - ') : (user.employeeCode || userId);
+            const label = parts.length > 0 ? parts.join(' - ') : (user.employeeCode || userId);
+            this.userLabelMap.update(m => ({ ...m, [userId]: label }));
         }
     }
     removeReference(j) {
-        this.referenceUserIds.splice(j, 1);
+        this.referenceUserIds.update(ids => ids.filter((_, idx) => idx !== j));
     }
     onUserSearchInput(stepIndex, query) {
-        this.userSearchQuery[stepIndex] = query;
+        this.userSearchQuery.update(q => { const copy = [...q]; copy[stepIndex] = query; return copy; });
         if (!query || query.length < 2) {
-            this.userSearchResults[stepIndex] = [];
+            this.userSearchResults.update(r => { const copy = [...r]; copy[stepIndex] = []; return copy; });
             return;
         }
-        this.searchUsers(query).then(r => this.userSearchResults[stepIndex] = r);
+        this.searchUsers(query).then(r => {
+            this.userSearchResults.update(results => { const copy = [...results]; copy[stepIndex] = r; return copy; });
+        });
     }
     onRefSearchInput(query) {
-        this.refSearchQuery = query;
+        this.refSearchQuery.set(query);
         if (!query || query.length < 2) {
-            this.refSearchResults = [];
+            this.refSearchResults.set([]);
             return;
         }
-        this.searchUsers(query).then(r => this.refSearchResults = r);
+        this.searchUsers(query).then(r => this.refSearchResults.set(r));
     }
     searchUsers(query) {
         const config = this.mesAuth.getConfig();
@@ -1568,9 +1537,9 @@ class MaArvContainerComponent {
                 referenceId: this.referenceId(),
                 callbackUrl: this.callbackUrl(),
                 deadlineHours: this.deadlineHours(),
-                referenceUserIds: this.referenceUserIds.length > 0 ? this.referenceUserIds : undefined
+                referenceUserIds: this.referenceUserIds().length > 0 ? this.referenceUserIds() : undefined
             };
-            if (this.routingMode === 'template') {
+            if (this.routingMode() === 'template') {
                 request.templateId = this.selectedTemplateId() ?? this.templateIds()?.[0];
                 // If template has role-based steps with selected approvers, pass explicit steps
                 if (this.selectedTemplate()) {
@@ -1590,7 +1559,7 @@ class MaArvContainerComponent {
                 }
             }
             else {
-                request.steps = this.adHocSteps.map((s, i) => ({
+                request.steps = this.adHocSteps().map((s, i) => ({
                     stepOrder: i + 1,
                     stepName: s.stepName,
                     mode: ApprovalStepMode.Sequential,
@@ -1754,11 +1723,11 @@ ${clone.outerHTML}
         ];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: MaArvContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: MaArvContainerComponent, isStandalone: true, selector: "ma-arv-container", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, referenceId: { classPropertyName: "referenceId", publicName: "referenceId", isSignal: true, isRequired: false, transformFunction: null }, templateIds: { classPropertyName: "templateIds", publicName: "templateIds", isSignal: true, isRequired: false, transformFunction: null }, callbackUrl: { classPropertyName: "callbackUrl", publicName: "callbackUrl", isSignal: true, isRequired: false, transformFunction: null }, deadlineHours: { classPropertyName: "deadlineHours", publicName: "deadlineHours", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { approvalSubmitted: "approvalSubmitted", approvalSubmitting: "approvalSubmitting", cancelled: "cancelled" }, host: { properties: { "class": "this.themeClass" } }, viewQueries: [{ propertyName: "contentBody", first: true, predicate: ["contentBody"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"arv-container\">\n  <!-- Content Area -->\n  <div class=\"arv-content-body\" #contentBody>\n    <ng-content></ng-content>\n  </div>\n\n  <!-- Approval Footer -->\n  <div class=\"arv-footer\">\n    @if (!isSubmitted()) {\n      <div class=\"arv-footer-inner\">\n\n        <!-- Routing mode -->\n        <div class=\"arv-routing\">\n          <div class=\"arv-routing-header\">\n            <h4 class=\"arv-section-title\">Approval Routing</h4>\n            <!-- Show routing toggle only when templateId is NOT locked to a single template -->\n            @if (!templateIds() || templateIds()!.length <= 0) {\n              <div class=\"arv-routing-mode\">\n                <label class=\"arv-radio\">\n                  <input type=\"radio\" name=\"routingMode\" value=\"template\" [checked]=\"routingMode === 'template'\" (change)=\"routingMode = 'template'\"> Use Template\n                </label>\n                <label class=\"arv-radio\">\n                  <input type=\"radio\" name=\"routingMode\" value=\"adhoc\" [checked]=\"routingMode === 'adhoc'\" (change)=\"routingMode = 'adhoc'\"> Custom Steps\n                </label>\n              </div>\n            }\n          </div>\n\n          <!-- Locked template: only when templateId set and no multi-choice -->\n          @if (templateIds() && templateIds()!.length === 1 && routingMode === 'template') {\n            <div class=\"arv-template-select\">\n              @if (loadingTemplate()) {\n                <div class=\"arv-template-loading\">Loading template...</div>\n              }\n              @if (selectedTemplate() && !loadingTemplate()) {\n                <div class=\"arv-locked-template\">\n                  <span class=\"arv-locked-label\">Template</span>\n                  <span class=\"arv-locked-name\">{{ selectedTemplate()!.name }}</span>\n                </div>\n              }\n            </div>\n          }\n          <!-- Template selector: shown when no templateId, OR when templateIds has multiple choices -->\n          @else if (routingMode === 'template') {\n            <div class=\"arv-template-select\">\n              <label class=\"arv-label\">Select Template</label>\n              <select class=\"arv-select\" (change)=\"onTemplateChange($event)\">\n                <option value=\"\">-- Select a template --</option>\n                @for (t of templates(); track t.id) {\n                  <option [value]=\"t.id\" [selected]=\"t.id === selectedTemplateId()\">{{ t.name }}</option>\n                }\n              </select>\n            </div>\n          }\n\n          <!-- Step pickers (shared for both locked and free template) -->\n          @if (routingMode === 'template') {\n            <div class=\"arv-template-select\">\n              @if (!loadingTemplate() && selectedTemplate()) {\n                <!-- arv-template-steps  -->\n                <div class=\"arv-steps\"> \n                  @for (s of selectedTemplate()!.steps; track s.stepOrder; let i = $index) {\n                    <div class=\"arv-step\">\n                      <div class=\"arv-step-card-header\">\n                        <span class=\"arv-step-preview-num\">Step {{ s.stepOrder }}</span>\n                        <span class=\"arv-step-preview-name\">{{ s.stepName }}</span>\n                        @if(isStepsError()[i]) {\n                          <span class=\"arv-step-error\">Required (*)</span>\n                        }                        \n                        @if (s.roles && s.roles.length > 0) {\n                          <span class=\"arv-step-role-badge\">\n                            {{ s.roles[0].positionLevel }}{{ s.roles[0].orgName ? ' \u00B7 ' + s.roles[0].orgName : '' }}\n                          </span>\n                        }\n                      </div>\n                      <!-- Selectable step: show approver picker -->\n                      @if (stepCandidates()[i]?.length > 1 || stepLoadingCandidates()[i]) {\n                        <!-- <div class=\"arv-step-picker\">\n                          @if (stepLoadingCandidates[i]) {\n                            <div class=\"arv-template-loading\">Loading candidates...</div>\n                          }\n                          @if (!stepLoadingCandidates[i]) {\n                            <select class=\"arv-select arv-select-sm\" (change)=\"onStepUserChange(i, $event)\">\n                              <option value=\"\">-- Select approver --</option>\n                              @for (u of stepCandidates[i]; track u.userId) {\n                                <option [value]=\"u.userId\" [selected]=\"u.userId === stepSelectedUsers[i]\">\n                                  {{ u.fullName || u.userId }}{{ u.department ? ' \u00B7 ' + u.department : '' }}{{ u.position ? ' (' + u.position + ')' : '' }}{{ u.employeeCode ? ' (' + u.employeeCode + ')' : '' }}\n                                </option>\n                              }\n                            </select>\n                          }\n                        </div> -->\n                        @if (stepLoadingCandidates()[i]) {\n                          <div class=\"arv-template-loading\">Loading candidates...</div>\n                        }\n                        @if (!stepLoadingCandidates()[i]) {\n                          <div class=\"arv-approvers\">\n                            <div class=\"arv-approver-tags\">\n                              @if (stepSelectedUsers()[i]) {\n                                <span class=\"arv-tag\">\n                                  {{ userLabelMap[stepSelectedUsers()[i]] || stepSelectedUsers()[i] }}\n                                  <button class=\"arv-tag-remove\" (click)=\"onStepUserChangeInput(i, '')\">x</button>\n                                </span>\n                              }\n                            </div>\n                            @if (!stepSelectedUsers()[i]) {\n                              <div class=\"arv-user-search arv-step-picker\">\n                                <input class=\"arv-input arv-input-sm\" [value]=\"candidateSearchQuery[i] || ''\"\n                                  (input)=\"onCandidateSearchInput(i, $any($event.target).value)\"\n                                  (focus)=\"onCandidateSearchInput(i, candidateSearchQuery[i] || '')\"\n                                  (blur)=\"candidateSearchResults[i] = []\"\n                                  placeholder=\"Search approver...\" />\n                                @if (candidateSearchResults[i]?.length) {\n                                  <div class=\"arv-search-results\">\n                                    @for (u of candidateSearchResults[i]; track u.userId) {\n                                      <div class=\"arv-search-item\" (mousedown)=\"onStepUserChangeInput(i, u.userId)\">\n                                        {{ u.fullName || u.userName }} {{ u.department ? ' \u00B7 ' + u.department : '' }} {{ u.position ? ' (' + u.position + ')' : '' }} {{ u.employeeCode ? ' (' + u.employeeCode + ')' : '' }}\n                                      </div>\n                                    }\n                                  </div>\n                                }\n                              </div>\n                            }                    \n                          </div>\n                        }\n                        \n                      }\n                      <!-- Single fixed-user step: show who is assigned -->\n                      @if (!stepLoadingCandidates()[i] && stepCandidates()[i]?.length === 1) {\n                        <div class=\"arv-step-fixed\">\n                          {{ stepCandidates()[i][0].fullName || stepCandidates()[i][0].userId }}{{ stepCandidates()[i][0].department ? ' \u00B7 ' + stepCandidates()[i][0].department : '' }}{{ stepCandidates()[i][0].position ? ' (' + stepCandidates()[i][0].position + ')' : '' }}{{ stepCandidates()[i][0].employeeCode ? ' (' + stepCandidates()[i][0].employeeCode + ')' : '' }}  \n                        </div>\n                      }\n                    </div>\n                  }\n                  @if (selectedTemplate() && selectedTemplate()!.referenceUserIds.length > 0) {\n                    <div class=\"arv-step-preview arv-step-preview-cc\">\n                      <span class=\"arv-step-preview-num\">CC</span>\n                      <span class=\"arv-step-preview-name\">{{ selectedTemplate()!.referenceUserIds.length }} reference user(s) from template</span>\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          }\n\n          <!-- Ad-hoc steps -->\n          @if (routingMode === 'adhoc') {\n            <div class=\"arv-steps\">\n              @for (step of adHocSteps; track step.stepOrder; let i = $index) {\n                <div class=\"arv-step\">\n                  <div class=\"arv-step-header\">\n                    <span class=\"arv-step-num\">Step {{ i + 1 }}</span>\n                    <input class=\"arv-input\" [value]=\"step.stepName\" (input)=\"step.stepName = $any($event.target).value\" placeholder=\"Step name\" />\n                    <button class=\"arv-btn-icon arv-btn-danger\" (click)=\"removeStep(i)\" title=\"Remove step\">\n                      <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>\n                    </button>\n                  </div>\n                  <div class=\"arv-approvers\">\n                    <div class=\"arv-approver-tags\">\n                      @for (uid of step.approverUserIds; track uid; let j = $index) {\n                        <span class=\"arv-tag\">\n                          {{ userLabelMap[uid] || uid }}\n                          <button class=\"arv-tag-remove\" (click)=\"removeApprover(i, j)\">x</button>\n                        </span>\n                      }\n                    </div>\n                    @if (step.approverUserIds.length === 0) {\n                      <div class=\"arv-user-search\">\n                        <input class=\"arv-input arv-input-sm\" [value]=\"userSearchQuery[i] || ''\"\n                          (input)=\"onUserSearchInput(i, $any($event.target).value)\"\n                          placeholder=\"Search approver...\" />\n                        @if (userSearchResults[i]?.length) {\n                          <div class=\"arv-search-results\">\n                            @for (u of userSearchResults[i]; track u.id) {\n                              <div class=\"arv-search-item\" (click)=\"addApprover(i, u.id)\">\n                                {{ u.fullName || u.userName }} {{ u.department ? ' \u00B7 ' + u.department : '' }} {{ u.position ? ' (' + u.position + ')' : '' }} {{ u.employeeCode ? ' (' + u.employeeCode + ')' : '' }}\n                              </div>\n                            }\n                          </div>\n                        }\n                      </div>\n                    }                    \n                  </div>\n                </div>\n              }\n              <button class=\"arv-btn arv-btn-outline\" (click)=\"addStep()\">+ Add Step</button>\n            </div>\n          }\n        </div>\n\n        <!-- Reference / CC users -->\n        <div class=\"arv-references\">\n          <h4 class=\"arv-section-title\">CC / Reference</h4>\n          <p class=\"arv-hint\">These users will be notified when the approval completes, but won't be asked to approve.</p>\n          <div class=\"arv-approver-tags\">\n            @for (uid of referenceUserIds; track uid; let j = $index) {\n              <span class=\"arv-tag\">\n                {{ userLabelMap[uid] || uid }}\n                <button class=\"arv-tag-remove\" (click)=\"removeReference(j)\">x</button>\n              </span>\n            }\n          </div>\n          <div class=\"arv-user-search\">\n            <input class=\"arv-input arv-input-sm\" [value]=\"refSearchQuery\"\n              (input)=\"onRefSearchInput($any($event.target).value)\"\n              placeholder=\"Search CC user...\" />\n            @if (refSearchResults?.length) {\n              <div class=\"arv-search-results\">\n                @for (u of refSearchResults; track u.id) {\n                  <div class=\"arv-search-item\" (click)=\"addReference(u.id)\">\n                    {{ u.fullName || u.userName }} {{ u.department ? ' \u00B7 ' + u.department : '' }} {{ u.position ? ' (' + u.position + ')' : '' }} {{ u.employeeCode ? ' (' + u.employeeCode + ')' : '' }}\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        </div>\n\n        <!-- Actions -->\n        <div class=\"arv-actions\">\n          <button class=\"arv-btn arv-btn-secondary\" (click)=\"onCancel()\">Cancel</button>\n          <button class=\"arv-btn arv-btn-primary\" [disabled]=\"submitting() || isError()\" (click)=\"submit()\">\n            @if (submitting()) {\n              <span class=\"arv-spinner\"></span>\n            }\n            {{isError() ? 'Complete Form to Submit' : submitting() ? 'Submitting...' : 'Submit for Approval' }}\n          </button>\n        </div>\n\n        @if (errorMessage() || submitResultError()) {\n          <div class=\"arv-error\">{{ errorMessage() || submitResultError() }}</div>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Success state -->\n  @if (isSubmitted()) {\n    <div class=\"arv-success\">\n      <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\">\n        <path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"/>\n        <polyline points=\"22 4 12 14.01 9 11.01\"/>\n      </svg>\n      <p>Submitted for approval successfully.</p>\n    </div>\n  }\n</div>\n", styles: [".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-template-select .arv-approver-tags{margin-top: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}.arv-template-loading{font-size:12px;color:var(--arv-text-muted);margin-top:8px;padding:4px 0}.arv-template-steps{margin-top:8px;display:flex;flex-direction:column;gap:6px}.arv-step-card{background:var(--arv-bg);border:1px solid var(--arv-border);border-radius:var(--arv-radius);overflow:hidden}.arv-step-card-header{display:flex;align-items:center;gap:8px;padding:7px 10px;background:#00000008;border-bottom:1px solid var(--arv-border);flex-wrap:wrap}.arv-step-preview{display:flex;align-items:center;gap:8px;padding:5px 8px;background:var(--arv-bg);border:1px solid var(--arv-border);border-radius:4px;font-size:12px}.arv-step-preview-num{font-weight:700;color:var(--arv-primary);min-width:44px;flex-shrink:0;font-size:12px}.arv-step-preview-name{flex:1;color:var(--arv-text);font-size:12px;font-weight:600}.arv-step-error{font-size:11px;color:var(--arv-danger);font-weight:600}.arv-step-role-badge{font-size:11px;color:var(--arv-text-muted);background:#90caf91a;border:1px solid rgba(144,202,249,.25);border-radius:10px;padding:1px 7px}.arv-step-preview-cc .arv-step-preview-num{color:var(--arv-text-muted)}.arv-locked-template{display:flex;align-items:center;gap:8px;padding:7px 10px;background:var(--arv-bg);border:1px solid var(--arv-border);border-radius:var(--arv-radius);margin-top:6px}.arv-locked-label{font-size:11px;color:var(--arv-text-muted);text-transform:uppercase;letter-spacing:.5px;flex-shrink:0}.arv-locked-name{font-size:13px;font-weight:600;color:var(--arv-text)}.arv-step-picker{padding:8px 0}.arv-select-sm{font-size:12px;padding:6px 8px}.arv-step-fixed{padding:6px 10px;font-size:12px;color:var(--arv-text-muted)}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: MaArvContainerComponent, isStandalone: true, selector: "ma-arv-container", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, referenceId: { classPropertyName: "referenceId", publicName: "referenceId", isSignal: true, isRequired: false, transformFunction: null }, templateIds: { classPropertyName: "templateIds", publicName: "templateIds", isSignal: true, isRequired: false, transformFunction: null }, callbackUrl: { classPropertyName: "callbackUrl", publicName: "callbackUrl", isSignal: true, isRequired: false, transformFunction: null }, deadlineHours: { classPropertyName: "deadlineHours", publicName: "deadlineHours", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { approvalSubmitted: "approvalSubmitted", approvalSubmitting: "approvalSubmitting", cancelled: "cancelled" }, host: { properties: { "class": "this.themeClass" } }, viewQueries: [{ propertyName: "contentBody", first: true, predicate: ["contentBody"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"arv-container\">\n  <!-- Content Area -->\n  <div class=\"arv-content-body\" #contentBody>\n    <ng-content></ng-content>\n  </div>\n\n  <!-- Approval Footer -->\n  <div class=\"arv-footer\">\n    @if (!isSubmitted()) {\n      <div class=\"arv-footer-inner\">\n\n        <!-- Routing mode -->\n        <div class=\"arv-routing\">\n          <div class=\"arv-routing-header\">\n            <h4 class=\"arv-section-title\">Approval Routing</h4>\n            <!-- Show routing toggle only when templateId is NOT locked to a single template -->\n            @if (!templateIds() || templateIds()!.length <= 0) {\n              <div class=\"arv-routing-mode\">\n                <label class=\"arv-radio\">\n                  <input type=\"radio\" name=\"routingMode\" value=\"template\" [checked]=\"routingMode() === 'template'\" (change)=\"routingMode.set('template')\"> Use Template\n                </label>\n                <label class=\"arv-radio\">\n                  <input type=\"radio\" name=\"routingMode\" value=\"adhoc\" [checked]=\"routingMode() === 'adhoc'\" (change)=\"routingMode.set('adhoc')\"> Custom Steps\n                </label>\n              </div>\n            }\n          </div>\n\n          <!-- Locked template: only when templateId set and no multi-choice -->\n          @if (templateIds() && templateIds()!.length === 1 && routingMode() === 'template') {\n            <div class=\"arv-template-select\">\n              @if (loadingTemplate()) {\n                <div class=\"arv-template-loading\">Loading template...</div>\n              }\n              @if (selectedTemplate() && !loadingTemplate()) {\n                <div class=\"arv-locked-template\">\n                  <span class=\"arv-locked-label\">Template</span>\n                  <span class=\"arv-locked-name\">{{ selectedTemplate()!.name }}</span>\n                </div>\n              }\n            </div>\n          }\n          <!-- Template selector: shown when no templateId, OR when templateIds has multiple choices -->\n          @else if (routingMode() === 'template') {\n            <div class=\"arv-template-select\">\n              <label class=\"arv-label\">Select Template</label>\n              <select class=\"arv-select\" (change)=\"onTemplateChange($event)\">\n                <option value=\"\">-- Select a template --</option>\n                @for (t of templates(); track t.id) {\n                  <option [value]=\"t.id\" [selected]=\"t.id === selectedTemplateId()\">{{ t.name }}</option>\n                }\n              </select>\n            </div>\n          }\n\n          <!-- Step pickers (shared for both locked and free template) -->\n          @if (routingMode() === 'template') {\n            <div class=\"arv-template-select\">\n              @if (!loadingTemplate() && selectedTemplate()) {\n                <!-- arv-template-steps  -->\n                <div class=\"arv-steps\">\n                  @for (s of selectedTemplate()!.steps; track s.stepOrder; let i = $index) {\n                    <div class=\"arv-step\">\n                      <div class=\"arv-step-card-header\">\n                        <span class=\"arv-step-preview-num\">Step {{ s.stepOrder }}</span>\n                        <span class=\"arv-step-preview-name\">{{ s.stepName }}</span>\n                        @if(isStepsError()[i]) {\n                          <span class=\"arv-step-error\">Required (*)</span>\n                        }\n                        @if (s.roles && s.roles.length > 0) {\n                          <span class=\"arv-step-role-badge\">\n                            {{ s.roles[0].positionLevel }}{{ s.roles[0].orgName ? ' \u00B7 ' + s.roles[0].orgName : '' }}\n                          </span>\n                        }\n                      </div>\n                      <!-- Selectable step: show approver picker -->\n                      @if (stepCandidates()[i]?.length > 1 || stepLoadingCandidates()[i]) {\n                        @if (stepLoadingCandidates()[i]) {\n                          <div class=\"arv-template-loading\">Loading candidates...</div>\n                        }\n                        @if (!stepLoadingCandidates()[i]) {\n                          <div class=\"arv-approvers\">\n                            <div class=\"arv-approver-tags\">\n                              @if (stepSelectedUsers()[i]) {\n                                <span class=\"arv-tag\">\n                                  {{ userLabelMap()[stepSelectedUsers()[i]] || stepSelectedUsers()[i] }}\n                                  <button class=\"arv-tag-remove\" (click)=\"onStepUserChangeInput(i, '')\">x</button>\n                                </span>\n                              }\n                            </div>\n                            @if (!stepSelectedUsers()[i]) {\n                              <div class=\"arv-user-search arv-step-picker\">\n                                <input class=\"arv-input arv-input-sm\" [value]=\"candidateSearchQuery()[i] || ''\"\n                                  (input)=\"onCandidateSearchInput(i, $any($event.target).value)\"\n                                  (focus)=\"onCandidateSearchInput(i, candidateSearchQuery()[i] || '')\"\n                                  (blur)=\"clearCandidateResults(i)\"\n                                  placeholder=\"Search approver...\" />\n                                @if (candidateSearchResults()[i]?.length) {\n                                  <div class=\"arv-search-results\">\n                                    @for (u of candidateSearchResults()[i]; track u.userId) {\n                                      <div class=\"arv-search-item\" (mousedown)=\"onStepUserChangeInput(i, u.userId)\">\n                                        {{ u.fullName || u.userName }} {{ u.department ? ' \u00B7 ' + u.department : '' }} {{ u.position ? ' (' + u.position + ')' : '' }} {{ u.employeeCode ? ' (' + u.employeeCode + ')' : '' }}\n                                      </div>\n                                    }\n                                  </div>\n                                }\n                              </div>\n                            }\n                          </div>\n                        }\n\n                      }\n                      <!-- Single fixed-user step: show who is assigned -->\n                      @if (!stepLoadingCandidates()[i] && stepCandidates()[i]?.length === 1) {\n                        <div class=\"arv-step-fixed\">\n                          {{ stepCandidates()[i][0].fullName || stepCandidates()[i][0].userId }}{{ stepCandidates()[i][0].department ? ' \u00B7 ' + stepCandidates()[i][0].department : '' }}{{ stepCandidates()[i][0].position ? ' (' + stepCandidates()[i][0].position + ')' : '' }}{{ stepCandidates()[i][0].employeeCode ? ' (' + stepCandidates()[i][0].employeeCode + ')' : '' }}\n                        </div>\n                      }\n                    </div>\n                  }\n                  @if (selectedTemplate() && selectedTemplate()!.referenceUserIds.length > 0) {\n                    <div class=\"arv-step-preview arv-step-preview-cc\">\n                      <span class=\"arv-step-preview-num\">CC</span>\n                      <span class=\"arv-step-preview-name\">{{ selectedTemplate()!.referenceUserIds.length }} reference user(s) from template</span>\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          }\n\n          <!-- Ad-hoc steps -->\n          @if (routingMode() === 'adhoc') {\n            <div class=\"arv-steps\">\n              @for (step of adHocSteps(); track step.stepOrder; let i = $index) {\n                <div class=\"arv-step\">\n                  <div class=\"arv-step-header\">\n                    <span class=\"arv-step-num\">Step {{ i + 1 }}</span>\n                    @if (isStepsError()[i]) {\n                      <span class=\"arv-step-error\">Required (*)</span>\n                    }\n                    <input class=\"arv-input\" [value]=\"step.stepName\" (input)=\"updateStepName(i, $any($event.target).value)\" placeholder=\"Step name\" />\n                    <button class=\"arv-btn-icon arv-btn-danger\" (click)=\"removeStep(i)\" title=\"Remove step\">\n                      <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>\n                    </button>\n                  </div>\n                  <div class=\"arv-approvers\">\n                    <div class=\"arv-approver-tags\">\n                      @for (uid of step.approverUserIds; track uid; let j = $index) {\n                        <span class=\"arv-tag\">\n                          {{ userLabelMap()[uid] || uid }}\n                          <button class=\"arv-tag-remove\" (click)=\"removeApprover(i, j)\">x</button>\n                        </span>\n                      }\n                    </div>\n                    @if (step.approverUserIds.length === 0) {\n                      <div class=\"arv-user-search\">\n                        <input class=\"arv-input arv-input-sm\" [value]=\"userSearchQuery()[i] || ''\"\n                          (input)=\"onUserSearchInput(i, $any($event.target).value)\"\n                          placeholder=\"Search approver...\" />\n                        @if (userSearchResults()[i]?.length) {\n                          <div class=\"arv-search-results\">\n                            @for (u of userSearchResults()[i]; track u.id) {\n                              <div class=\"arv-search-item\" (click)=\"addApprover(i, u.id)\">\n                                {{ u.fullName || u.userName }} {{ u.department ? ' \u00B7 ' + u.department : '' }} {{ u.position ? ' (' + u.position + ')' : '' }} {{ u.employeeCode ? ' (' + u.employeeCode + ')' : '' }}\n                              </div>\n                            }\n                          </div>\n                        }\n                      </div>\n                    }\n                  </div>\n                </div>\n              }\n              <button class=\"arv-btn arv-btn-outline\" (click)=\"addStep()\">+ Add Step</button>\n            </div>\n          }\n        </div>\n\n        <!-- Reference / CC users -->\n        <div class=\"arv-references\">\n          <h4 class=\"arv-section-title\">CC / Reference</h4>\n          <p class=\"arv-hint\">These users will be notified when the approval completes, but won't be asked to approve.</p>\n          <div class=\"arv-approver-tags\">\n            @for (uid of referenceUserIds(); track uid; let j = $index) {\n              <span class=\"arv-tag\">\n                {{ userLabelMap()[uid] || uid }}\n                <button class=\"arv-tag-remove\" (click)=\"removeReference(j)\">x</button>\n              </span>\n            }\n          </div>\n          <div class=\"arv-user-search\">\n            <input class=\"arv-input arv-input-sm\" [value]=\"refSearchQuery()\"\n              (input)=\"onRefSearchInput($any($event.target).value)\"\n              placeholder=\"Search CC user...\" />\n            @if (refSearchResults().length) {\n              <div class=\"arv-search-results\">\n                @for (u of refSearchResults(); track u.id) {\n                  <div class=\"arv-search-item\" (click)=\"addReference(u.id)\">\n                    {{ u.fullName || u.userName }} {{ u.department ? ' \u00B7 ' + u.department : '' }} {{ u.position ? ' (' + u.position + ')' : '' }} {{ u.employeeCode ? ' (' + u.employeeCode + ')' : '' }}\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        </div>\n\n        <!-- Actions -->\n        <div class=\"arv-actions\">\n          <button class=\"arv-btn arv-btn-secondary\" (click)=\"onCancel()\">Cancel</button>\n          <button class=\"arv-btn arv-btn-primary\" [disabled]=\"submitting() || isError()\" (click)=\"submit()\">\n            @if (submitting()) {\n              <span class=\"arv-spinner\"></span>\n            }\n            {{isError() ? 'Complete Form to Submit' : submitting() ? 'Submitting...' : 'Submit for Approval' }}\n          </button>\n        </div>\n\n        @if (errorMessage() || submitResultError()) {\n          <div class=\"arv-error\">{{ errorMessage() || submitResultError() }}</div>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Success state -->\n  @if (isSubmitted()) {\n    <div class=\"arv-success\">\n      <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\">\n        <path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"/>\n        <polyline points=\"22 4 12 14.01 9 11.01\"/>\n      </svg>\n      <p>Submitted for approval successfully.</p>\n    </div>\n  }\n</div>\n", styles: [".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-template-select{margin-bottom:10px}.arv-select{width:100%;padding:8px 32px 8px 10px;border:1px solid var(--arv-border);border-radius:var(--arv-radius);background:var(--arv-bg) url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E\") no-repeat right 10px center;color:var(--arv-text);font-size:13px;appearance:none;-webkit-appearance:none;cursor:pointer}.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:0;padding:3px 10px}.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-template-select .arv-approver-tags{margin-top: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}.arv-template-loading{font-size:12px;color:var(--arv-text-muted);margin-top:8px;padding:4px 0}.arv-template-steps{margin-top:8px;display:flex;flex-direction:column;gap:6px}.arv-step-card{background:var(--arv-bg);border:1px solid var(--arv-border);border-radius:var(--arv-radius);overflow:hidden}.arv-step-card-header{display:flex;align-items:center;gap:8px;padding:7px 10px;background:#00000008;border-bottom:1px solid var(--arv-border);flex-wrap:wrap}.arv-step-preview{display:flex;align-items:center;gap:8px;padding:5px 8px;background:var(--arv-bg);border:1px solid var(--arv-border);border-radius:4px;font-size:12px}.arv-step-preview-num{font-weight:700;color:var(--arv-primary);min-width:44px;flex-shrink:0;font-size:12px}.arv-step-preview-name{flex:1;color:var(--arv-text);font-size:12px;font-weight:600}.arv-step-error{font-size:11px;color:var(--arv-danger);font-weight:600}.arv-step-role-badge{font-size:11px;color:var(--arv-text-muted);background:#90caf91a;border:1px solid rgba(144,202,249,.25);border-radius:10px;padding:1px 7px}.arv-step-preview-cc .arv-step-preview-num{color:var(--arv-text-muted)}.arv-locked-template{display:flex;align-items:center;gap:8px;padding:7px 10px;background:var(--arv-bg);border:1px solid var(--arv-border);border-radius:var(--arv-radius);margin-top:6px}.arv-locked-label{font-size:11px;color:var(--arv-text-muted);text-transform:uppercase;letter-spacing:.5px;flex-shrink:0}.arv-locked-name{font-size:13px;font-weight:600;color:var(--arv-text)}.arv-step-picker{padding:0}.arv-select-sm{font-size:12px;padding:6px 8px}.arv-step-fixed{padding:6px 10px;font-size:12px;color:var(--arv-text-muted)}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: MaArvContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ma-arv-container', imports: [], template: "<div class=\"arv-container\">\n  <!-- Content Area -->\n  <div class=\"arv-content-body\" #contentBody>\n    <ng-content></ng-content>\n  </div>\n\n  <!-- Approval Footer -->\n  <div class=\"arv-footer\">\n    @if (!isSubmitted()) {\n      <div class=\"arv-footer-inner\">\n\n        <!-- Routing mode -->\n        <div class=\"arv-routing\">\n          <div class=\"arv-routing-header\">\n            <h4 class=\"arv-section-title\">Approval Routing</h4>\n            <!-- Show routing toggle only when templateId is NOT locked to a single template -->\n            @if (!templateIds() || templateIds()!.length <= 0) {\n              <div class=\"arv-routing-mode\">\n                <label class=\"arv-radio\">\n                  <input type=\"radio\" name=\"routingMode\" value=\"template\" [checked]=\"routingMode === 'template'\" (change)=\"routingMode = 'template'\"> Use Template\n                </label>\n                <label class=\"arv-radio\">\n                  <input type=\"radio\" name=\"routingMode\" value=\"adhoc\" [checked]=\"routingMode === 'adhoc'\" (change)=\"routingMode = 'adhoc'\"> Custom Steps\n                </label>\n              </div>\n            }\n          </div>\n\n          <!-- Locked template: only when templateId set and no multi-choice -->\n          @if (templateIds() && templateIds()!.length === 1 && routingMode === 'template') {\n            <div class=\"arv-template-select\">\n              @if (loadingTemplate()) {\n                <div class=\"arv-template-loading\">Loading template...</div>\n              }\n              @if (selectedTemplate() && !loadingTemplate()) {\n                <div class=\"arv-locked-template\">\n                  <span class=\"arv-locked-label\">Template</span>\n                  <span class=\"arv-locked-name\">{{ selectedTemplate()!.name }}</span>\n                </div>\n              }\n            </div>\n          }\n          <!-- Template selector: shown when no templateId, OR when templateIds has multiple choices -->\n          @else if (routingMode === 'template') {\n            <div class=\"arv-template-select\">\n              <label class=\"arv-label\">Select Template</label>\n              <select class=\"arv-select\" (change)=\"onTemplateChange($event)\">\n                <option value=\"\">-- Select a template --</option>\n                @for (t of templates(); track t.id) {\n                  <option [value]=\"t.id\" [selected]=\"t.id === selectedTemplateId()\">{{ t.name }}</option>\n                }\n              </select>\n            </div>\n          }\n\n          <!-- Step pickers (shared for both locked and free template) -->\n          @if (routingMode === 'template') {\n            <div class=\"arv-template-select\">\n              @if (!loadingTemplate() && selectedTemplate()) {\n                <!-- arv-template-steps  -->\n                <div class=\"arv-steps\"> \n                  @for (s of selectedTemplate()!.steps; track s.stepOrder; let i = $index) {\n                    <div class=\"arv-step\">\n                      <div class=\"arv-step-card-header\">\n                        <span class=\"arv-step-preview-num\">Step {{ s.stepOrder }}</span>\n                        <span class=\"arv-step-preview-name\">{{ s.stepName }}</span>\n                        @if(isStepsError()[i]) {\n                          <span class=\"arv-step-error\">Required (*)</span>\n                        }                        \n                        @if (s.roles && s.roles.length > 0) {\n                          <span class=\"arv-step-role-badge\">\n                            {{ s.roles[0].positionLevel }}{{ s.roles[0].orgName ? ' \u00B7 ' + s.roles[0].orgName : '' }}\n                          </span>\n                        }\n                      </div>\n                      <!-- Selectable step: show approver picker -->\n                      @if (stepCandidates()[i]?.length > 1 || stepLoadingCandidates()[i]) {\n                        <!-- <div class=\"arv-step-picker\">\n                          @if (stepLoadingCandidates[i]) {\n                            <div class=\"arv-template-loading\">Loading candidates...</div>\n                          }\n                          @if (!stepLoadingCandidates[i]) {\n                            <select class=\"arv-select arv-select-sm\" (change)=\"onStepUserChange(i, $event)\">\n                              <option value=\"\">-- Select approver --</option>\n                              @for (u of stepCandidates[i]; track u.userId) {\n                                <option [value]=\"u.userId\" [selected]=\"u.userId === stepSelectedUsers[i]\">\n                                  {{ u.fullName || u.userId }}{{ u.department ? ' \u00B7 ' + u.department : '' }}{{ u.position ? ' (' + u.position + ')' : '' }}{{ u.employeeCode ? ' (' + u.employeeCode + ')' : '' }}\n                                </option>\n                              }\n                            </select>\n                          }\n                        </div> -->\n                        @if (stepLoadingCandidates()[i]) {\n                          <div class=\"arv-template-loading\">Loading candidates...</div>\n                        }\n                        @if (!stepLoadingCandidates()[i]) {\n                          <div class=\"arv-approvers\">\n                            <div class=\"arv-approver-tags\">\n                              @if (stepSelectedUsers()[i]) {\n                                <span class=\"arv-tag\">\n                                  {{ userLabelMap[stepSelectedUsers()[i]] || stepSelectedUsers()[i] }}\n                                  <button class=\"arv-tag-remove\" (click)=\"onStepUserChangeInput(i, '')\">x</button>\n                                </span>\n                              }\n                            </div>\n                            @if (!stepSelectedUsers()[i]) {\n                              <div class=\"arv-user-search arv-step-picker\">\n                                <input class=\"arv-input arv-input-sm\" [value]=\"candidateSearchQuery[i] || ''\"\n                                  (input)=\"onCandidateSearchInput(i, $any($event.target).value)\"\n                                  (focus)=\"onCandidateSearchInput(i, candidateSearchQuery[i] || '')\"\n                                  (blur)=\"candidateSearchResults[i] = []\"\n                                  placeholder=\"Search approver...\" />\n                                @if (candidateSearchResults[i]?.length) {\n                                  <div class=\"arv-search-results\">\n                                    @for (u of candidateSearchResults[i]; track u.userId) {\n                                      <div class=\"arv-search-item\" (mousedown)=\"onStepUserChangeInput(i, u.userId)\">\n                                        {{ u.fullName || u.userName }} {{ u.department ? ' \u00B7 ' + u.department : '' }} {{ u.position ? ' (' + u.position + ')' : '' }} {{ u.employeeCode ? ' (' + u.employeeCode + ')' : '' }}\n                                      </div>\n                                    }\n                                  </div>\n                                }\n                              </div>\n                            }                    \n                          </div>\n                        }\n                        \n                      }\n                      <!-- Single fixed-user step: show who is assigned -->\n                      @if (!stepLoadingCandidates()[i] && stepCandidates()[i]?.length === 1) {\n                        <div class=\"arv-step-fixed\">\n                          {{ stepCandidates()[i][0].fullName || stepCandidates()[i][0].userId }}{{ stepCandidates()[i][0].department ? ' \u00B7 ' + stepCandidates()[i][0].department : '' }}{{ stepCandidates()[i][0].position ? ' (' + stepCandidates()[i][0].position + ')' : '' }}{{ stepCandidates()[i][0].employeeCode ? ' (' + stepCandidates()[i][0].employeeCode + ')' : '' }}  \n                        </div>\n                      }\n                    </div>\n                  }\n                  @if (selectedTemplate() && selectedTemplate()!.referenceUserIds.length > 0) {\n                    <div class=\"arv-step-preview arv-step-preview-cc\">\n                      <span class=\"arv-step-preview-num\">CC</span>\n                      <span class=\"arv-step-preview-name\">{{ selectedTemplate()!.referenceUserIds.length }} reference user(s) from template</span>\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          }\n\n          <!-- Ad-hoc steps -->\n          @if (routingMode === 'adhoc') {\n            <div class=\"arv-steps\">\n              @for (step of adHocSteps; track step.stepOrder; let i = $index) {\n                <div class=\"arv-step\">\n                  <div class=\"arv-step-header\">\n                    <span class=\"arv-step-num\">Step {{ i + 1 }}</span>\n                    <input class=\"arv-input\" [value]=\"step.stepName\" (input)=\"step.stepName = $any($event.target).value\" placeholder=\"Step name\" />\n                    <button class=\"arv-btn-icon arv-btn-danger\" (click)=\"removeStep(i)\" title=\"Remove step\">\n                      <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>\n                    </button>\n                  </div>\n                  <div class=\"arv-approvers\">\n                    <div class=\"arv-approver-tags\">\n                      @for (uid of step.approverUserIds; track uid; let j = $index) {\n                        <span class=\"arv-tag\">\n                          {{ userLabelMap[uid] || uid }}\n                          <button class=\"arv-tag-remove\" (click)=\"removeApprover(i, j)\">x</button>\n                        </span>\n                      }\n                    </div>\n                    @if (step.approverUserIds.length === 0) {\n                      <div class=\"arv-user-search\">\n                        <input class=\"arv-input arv-input-sm\" [value]=\"userSearchQuery[i] || ''\"\n                          (input)=\"onUserSearchInput(i, $any($event.target).value)\"\n                          placeholder=\"Search approver...\" />\n                        @if (userSearchResults[i]?.length) {\n                          <div class=\"arv-search-results\">\n                            @for (u of userSearchResults[i]; track u.id) {\n                              <div class=\"arv-search-item\" (click)=\"addApprover(i, u.id)\">\n                                {{ u.fullName || u.userName }} {{ u.department ? ' \u00B7 ' + u.department : '' }} {{ u.position ? ' (' + u.position + ')' : '' }} {{ u.employeeCode ? ' (' + u.employeeCode + ')' : '' }}\n                              </div>\n                            }\n                          </div>\n                        }\n                      </div>\n                    }                    \n                  </div>\n                </div>\n              }\n              <button class=\"arv-btn arv-btn-outline\" (click)=\"addStep()\">+ Add Step</button>\n            </div>\n          }\n        </div>\n\n        <!-- Reference / CC users -->\n        <div class=\"arv-references\">\n          <h4 class=\"arv-section-title\">CC / Reference</h4>\n          <p class=\"arv-hint\">These users will be notified when the approval completes, but won't be asked to approve.</p>\n          <div class=\"arv-approver-tags\">\n            @for (uid of referenceUserIds; track uid; let j = $index) {\n              <span class=\"arv-tag\">\n                {{ userLabelMap[uid] || uid }}\n                <button class=\"arv-tag-remove\" (click)=\"removeReference(j)\">x</button>\n              </span>\n            }\n          </div>\n          <div class=\"arv-user-search\">\n            <input class=\"arv-input arv-input-sm\" [value]=\"refSearchQuery\"\n              (input)=\"onRefSearchInput($any($event.target).value)\"\n              placeholder=\"Search CC user...\" />\n            @if (refSearchResults?.length) {\n              <div class=\"arv-search-results\">\n                @for (u of refSearchResults; track u.id) {\n                  <div class=\"arv-search-item\" (click)=\"addReference(u.id)\">\n                    {{ u.fullName || u.userName }} {{ u.department ? ' \u00B7 ' + u.department : '' }} {{ u.position ? ' (' + u.position + ')' : '' }} {{ u.employeeCode ? ' (' + u.employeeCode + ')' : '' }}\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        </div>\n\n        <!-- Actions -->\n        <div class=\"arv-actions\">\n          <button class=\"arv-btn arv-btn-secondary\" (click)=\"onCancel()\">Cancel</button>\n          <button class=\"arv-btn arv-btn-primary\" [disabled]=\"submitting() || isError()\" (click)=\"submit()\">\n            @if (submitting()) {\n              <span class=\"arv-spinner\"></span>\n            }\n            {{isError() ? 'Complete Form to Submit' : submitting() ? 'Submitting...' : 'Submit for Approval' }}\n          </button>\n        </div>\n\n        @if (errorMessage() || submitResultError()) {\n          <div class=\"arv-error\">{{ errorMessage() || submitResultError() }}</div>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Success state -->\n  @if (isSubmitted()) {\n    <div class=\"arv-success\">\n      <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\">\n        <path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"/>\n        <polyline points=\"22 4 12 14.01 9 11.01\"/>\n      </svg>\n      <p>Submitted for approval successfully.</p>\n    </div>\n  }\n</div>\n", styles: [".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-template-select .arv-approver-tags{margin-top: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}.arv-template-loading{font-size:12px;color:var(--arv-text-muted);margin-top:8px;padding:4px 0}.arv-template-steps{margin-top:8px;display:flex;flex-direction:column;gap:6px}.arv-step-card{background:var(--arv-bg);border:1px solid var(--arv-border);border-radius:var(--arv-radius);overflow:hidden}.arv-step-card-header{display:flex;align-items:center;gap:8px;padding:7px 10px;background:#00000008;border-bottom:1px solid var(--arv-border);flex-wrap:wrap}.arv-step-preview{display:flex;align-items:center;gap:8px;padding:5px 8px;background:var(--arv-bg);border:1px solid var(--arv-border);border-radius:4px;font-size:12px}.arv-step-preview-num{font-weight:700;color:var(--arv-primary);min-width:44px;flex-shrink:0;font-size:12px}.arv-step-preview-name{flex:1;color:var(--arv-text);font-size:12px;font-weight:600}.arv-step-error{font-size:11px;color:var(--arv-danger);font-weight:600}.arv-step-role-badge{font-size:11px;color:var(--arv-text-muted);background:#90caf91a;border:1px solid rgba(144,202,249,.25);border-radius:10px;padding:1px 7px}.arv-step-preview-cc .arv-step-preview-num{color:var(--arv-text-muted)}.arv-locked-template{display:flex;align-items:center;gap:8px;padding:7px 10px;background:var(--arv-bg);border:1px solid var(--arv-border);border-radius:var(--arv-radius);margin-top:6px}.arv-locked-label{font-size:11px;color:var(--arv-text-muted);text-transform:uppercase;letter-spacing:.5px;flex-shrink:0}.arv-locked-name{font-size:13px;font-weight:600;color:var(--arv-text)}.arv-step-picker{padding:8px 0}.arv-select-sm{font-size:12px;padding:6px 8px}.arv-step-fixed{padding:6px 10px;font-size:12px;color:var(--arv-text-muted)}\n"] }]
+            args: [{ selector: 'ma-arv-container', imports: [], template: "<div class=\"arv-container\">\n  <!-- Content Area -->\n  <div class=\"arv-content-body\" #contentBody>\n    <ng-content></ng-content>\n  </div>\n\n  <!-- Approval Footer -->\n  <div class=\"arv-footer\">\n    @if (!isSubmitted()) {\n      <div class=\"arv-footer-inner\">\n\n        <!-- Routing mode -->\n        <div class=\"arv-routing\">\n          <div class=\"arv-routing-header\">\n            <h4 class=\"arv-section-title\">Approval Routing</h4>\n            <!-- Show routing toggle only when templateId is NOT locked to a single template -->\n            @if (!templateIds() || templateIds()!.length <= 0) {\n              <div class=\"arv-routing-mode\">\n                <label class=\"arv-radio\">\n                  <input type=\"radio\" name=\"routingMode\" value=\"template\" [checked]=\"routingMode() === 'template'\" (change)=\"routingMode.set('template')\"> Use Template\n                </label>\n                <label class=\"arv-radio\">\n                  <input type=\"radio\" name=\"routingMode\" value=\"adhoc\" [checked]=\"routingMode() === 'adhoc'\" (change)=\"routingMode.set('adhoc')\"> Custom Steps\n                </label>\n              </div>\n            }\n          </div>\n\n          <!-- Locked template: only when templateId set and no multi-choice -->\n          @if (templateIds() && templateIds()!.length === 1 && routingMode() === 'template') {\n            <div class=\"arv-template-select\">\n              @if (loadingTemplate()) {\n                <div class=\"arv-template-loading\">Loading template...</div>\n              }\n              @if (selectedTemplate() && !loadingTemplate()) {\n                <div class=\"arv-locked-template\">\n                  <span class=\"arv-locked-label\">Template</span>\n                  <span class=\"arv-locked-name\">{{ selectedTemplate()!.name }}</span>\n                </div>\n              }\n            </div>\n          }\n          <!-- Template selector: shown when no templateId, OR when templateIds has multiple choices -->\n          @else if (routingMode() === 'template') {\n            <div class=\"arv-template-select\">\n              <label class=\"arv-label\">Select Template</label>\n              <select class=\"arv-select\" (change)=\"onTemplateChange($event)\">\n                <option value=\"\">-- Select a template --</option>\n                @for (t of templates(); track t.id) {\n                  <option [value]=\"t.id\" [selected]=\"t.id === selectedTemplateId()\">{{ t.name }}</option>\n                }\n              </select>\n            </div>\n          }\n\n          <!-- Step pickers (shared for both locked and free template) -->\n          @if (routingMode() === 'template') {\n            <div class=\"arv-template-select\">\n              @if (!loadingTemplate() && selectedTemplate()) {\n                <!-- arv-template-steps  -->\n                <div class=\"arv-steps\">\n                  @for (s of selectedTemplate()!.steps; track s.stepOrder; let i = $index) {\n                    <div class=\"arv-step\">\n                      <div class=\"arv-step-card-header\">\n                        <span class=\"arv-step-preview-num\">Step {{ s.stepOrder }}</span>\n                        <span class=\"arv-step-preview-name\">{{ s.stepName }}</span>\n                        @if(isStepsError()[i]) {\n                          <span class=\"arv-step-error\">Required (*)</span>\n                        }\n                        @if (s.roles && s.roles.length > 0) {\n                          <span class=\"arv-step-role-badge\">\n                            {{ s.roles[0].positionLevel }}{{ s.roles[0].orgName ? ' \u00B7 ' + s.roles[0].orgName : '' }}\n                          </span>\n                        }\n                      </div>\n                      <!-- Selectable step: show approver picker -->\n                      @if (stepCandidates()[i]?.length > 1 || stepLoadingCandidates()[i]) {\n                        @if (stepLoadingCandidates()[i]) {\n                          <div class=\"arv-template-loading\">Loading candidates...</div>\n                        }\n                        @if (!stepLoadingCandidates()[i]) {\n                          <div class=\"arv-approvers\">\n                            <div class=\"arv-approver-tags\">\n                              @if (stepSelectedUsers()[i]) {\n                                <span class=\"arv-tag\">\n                                  {{ userLabelMap()[stepSelectedUsers()[i]] || stepSelectedUsers()[i] }}\n                                  <button class=\"arv-tag-remove\" (click)=\"onStepUserChangeInput(i, '')\">x</button>\n                                </span>\n                              }\n                            </div>\n                            @if (!stepSelectedUsers()[i]) {\n                              <div class=\"arv-user-search arv-step-picker\">\n                                <input class=\"arv-input arv-input-sm\" [value]=\"candidateSearchQuery()[i] || ''\"\n                                  (input)=\"onCandidateSearchInput(i, $any($event.target).value)\"\n                                  (focus)=\"onCandidateSearchInput(i, candidateSearchQuery()[i] || '')\"\n                                  (blur)=\"clearCandidateResults(i)\"\n                                  placeholder=\"Search approver...\" />\n                                @if (candidateSearchResults()[i]?.length) {\n                                  <div class=\"arv-search-results\">\n                                    @for (u of candidateSearchResults()[i]; track u.userId) {\n                                      <div class=\"arv-search-item\" (mousedown)=\"onStepUserChangeInput(i, u.userId)\">\n                                        {{ u.fullName || u.userName }} {{ u.department ? ' \u00B7 ' + u.department : '' }} {{ u.position ? ' (' + u.position + ')' : '' }} {{ u.employeeCode ? ' (' + u.employeeCode + ')' : '' }}\n                                      </div>\n                                    }\n                                  </div>\n                                }\n                              </div>\n                            }\n                          </div>\n                        }\n\n                      }\n                      <!-- Single fixed-user step: show who is assigned -->\n                      @if (!stepLoadingCandidates()[i] && stepCandidates()[i]?.length === 1) {\n                        <div class=\"arv-step-fixed\">\n                          {{ stepCandidates()[i][0].fullName || stepCandidates()[i][0].userId }}{{ stepCandidates()[i][0].department ? ' \u00B7 ' + stepCandidates()[i][0].department : '' }}{{ stepCandidates()[i][0].position ? ' (' + stepCandidates()[i][0].position + ')' : '' }}{{ stepCandidates()[i][0].employeeCode ? ' (' + stepCandidates()[i][0].employeeCode + ')' : '' }}\n                        </div>\n                      }\n                    </div>\n                  }\n                  @if (selectedTemplate() && selectedTemplate()!.referenceUserIds.length > 0) {\n                    <div class=\"arv-step-preview arv-step-preview-cc\">\n                      <span class=\"arv-step-preview-num\">CC</span>\n                      <span class=\"arv-step-preview-name\">{{ selectedTemplate()!.referenceUserIds.length }} reference user(s) from template</span>\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          }\n\n          <!-- Ad-hoc steps -->\n          @if (routingMode() === 'adhoc') {\n            <div class=\"arv-steps\">\n              @for (step of adHocSteps(); track step.stepOrder; let i = $index) {\n                <div class=\"arv-step\">\n                  <div class=\"arv-step-header\">\n                    <span class=\"arv-step-num\">Step {{ i + 1 }}</span>\n                    @if (isStepsError()[i]) {\n                      <span class=\"arv-step-error\">Required (*)</span>\n                    }\n                    <input class=\"arv-input\" [value]=\"step.stepName\" (input)=\"updateStepName(i, $any($event.target).value)\" placeholder=\"Step name\" />\n                    <button class=\"arv-btn-icon arv-btn-danger\" (click)=\"removeStep(i)\" title=\"Remove step\">\n                      <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>\n                    </button>\n                  </div>\n                  <div class=\"arv-approvers\">\n                    <div class=\"arv-approver-tags\">\n                      @for (uid of step.approverUserIds; track uid; let j = $index) {\n                        <span class=\"arv-tag\">\n                          {{ userLabelMap()[uid] || uid }}\n                          <button class=\"arv-tag-remove\" (click)=\"removeApprover(i, j)\">x</button>\n                        </span>\n                      }\n                    </div>\n                    @if (step.approverUserIds.length === 0) {\n                      <div class=\"arv-user-search\">\n                        <input class=\"arv-input arv-input-sm\" [value]=\"userSearchQuery()[i] || ''\"\n                          (input)=\"onUserSearchInput(i, $any($event.target).value)\"\n                          placeholder=\"Search approver...\" />\n                        @if (userSearchResults()[i]?.length) {\n                          <div class=\"arv-search-results\">\n                            @for (u of userSearchResults()[i]; track u.id) {\n                              <div class=\"arv-search-item\" (click)=\"addApprover(i, u.id)\">\n                                {{ u.fullName || u.userName }} {{ u.department ? ' \u00B7 ' + u.department : '' }} {{ u.position ? ' (' + u.position + ')' : '' }} {{ u.employeeCode ? ' (' + u.employeeCode + ')' : '' }}\n                              </div>\n                            }\n                          </div>\n                        }\n                      </div>\n                    }\n                  </div>\n                </div>\n              }\n              <button class=\"arv-btn arv-btn-outline\" (click)=\"addStep()\">+ Add Step</button>\n            </div>\n          }\n        </div>\n\n        <!-- Reference / CC users -->\n        <div class=\"arv-references\">\n          <h4 class=\"arv-section-title\">CC / Reference</h4>\n          <p class=\"arv-hint\">These users will be notified when the approval completes, but won't be asked to approve.</p>\n          <div class=\"arv-approver-tags\">\n            @for (uid of referenceUserIds(); track uid; let j = $index) {\n              <span class=\"arv-tag\">\n                {{ userLabelMap()[uid] || uid }}\n                <button class=\"arv-tag-remove\" (click)=\"removeReference(j)\">x</button>\n              </span>\n            }\n          </div>\n          <div class=\"arv-user-search\">\n            <input class=\"arv-input arv-input-sm\" [value]=\"refSearchQuery()\"\n              (input)=\"onRefSearchInput($any($event.target).value)\"\n              placeholder=\"Search CC user...\" />\n            @if (refSearchResults().length) {\n              <div class=\"arv-search-results\">\n                @for (u of refSearchResults(); track u.id) {\n                  <div class=\"arv-search-item\" (click)=\"addReference(u.id)\">\n                    {{ u.fullName || u.userName }} {{ u.department ? ' \u00B7 ' + u.department : '' }} {{ u.position ? ' (' + u.position + ')' : '' }} {{ u.employeeCode ? ' (' + u.employeeCode + ')' : '' }}\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        </div>\n\n        <!-- Actions -->\n        <div class=\"arv-actions\">\n          <button class=\"arv-btn arv-btn-secondary\" (click)=\"onCancel()\">Cancel</button>\n          <button class=\"arv-btn arv-btn-primary\" [disabled]=\"submitting() || isError()\" (click)=\"submit()\">\n            @if (submitting()) {\n              <span class=\"arv-spinner\"></span>\n            }\n            {{isError() ? 'Complete Form to Submit' : submitting() ? 'Submitting...' : 'Submit for Approval' }}\n          </button>\n        </div>\n\n        @if (errorMessage() || submitResultError()) {\n          <div class=\"arv-error\">{{ errorMessage() || submitResultError() }}</div>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Success state -->\n  @if (isSubmitted()) {\n    <div class=\"arv-success\">\n      <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\">\n        <path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"/>\n        <polyline points=\"22 4 12 14.01 9 11.01\"/>\n      </svg>\n      <p>Submitted for approval successfully.</p>\n    </div>\n  }\n</div>\n", styles: [".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-template-select{margin-bottom:10px}.arv-select{width:100%;padding:8px 32px 8px 10px;border:1px solid var(--arv-border);border-radius:var(--arv-radius);background:var(--arv-bg) url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E\") no-repeat right 10px center;color:var(--arv-text);font-size:13px;appearance:none;-webkit-appearance:none;cursor:pointer}.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:0;padding:3px 10px}.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-template-select .arv-approver-tags{margin-top: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}.arv-template-loading{font-size:12px;color:var(--arv-text-muted);margin-top:8px;padding:4px 0}.arv-template-steps{margin-top:8px;display:flex;flex-direction:column;gap:6px}.arv-step-card{background:var(--arv-bg);border:1px solid var(--arv-border);border-radius:var(--arv-radius);overflow:hidden}.arv-step-card-header{display:flex;align-items:center;gap:8px;padding:7px 10px;background:#00000008;border-bottom:1px solid var(--arv-border);flex-wrap:wrap}.arv-step-preview{display:flex;align-items:center;gap:8px;padding:5px 8px;background:var(--arv-bg);border:1px solid var(--arv-border);border-radius:4px;font-size:12px}.arv-step-preview-num{font-weight:700;color:var(--arv-primary);min-width:44px;flex-shrink:0;font-size:12px}.arv-step-preview-name{flex:1;color:var(--arv-text);font-size:12px;font-weight:600}.arv-step-error{font-size:11px;color:var(--arv-danger);font-weight:600}.arv-step-role-badge{font-size:11px;color:var(--arv-text-muted);background:#90caf91a;border:1px solid rgba(144,202,249,.25);border-radius:10px;padding:1px 7px}.arv-step-preview-cc .arv-step-preview-num{color:var(--arv-text-muted)}.arv-locked-template{display:flex;align-items:center;gap:8px;padding:7px 10px;background:var(--arv-bg);border:1px solid var(--arv-border);border-radius:var(--arv-radius);margin-top:6px}.arv-locked-label{font-size:11px;color:var(--arv-text-muted);text-transform:uppercase;letter-spacing:.5px;flex-shrink:0}.arv-locked-name{font-size:13px;font-weight:600;color:var(--arv-text)}.arv-step-picker{padding:0}.arv-select-sm{font-size:12px;padding:6px 8px}.arv-step-fixed{padding:6px 10px;font-size:12px;color:var(--arv-text-muted)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], referenceId: [{ type: i0.Input, args: [{ isSignal: true, alias: "referenceId", required: false }] }], templateIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "templateIds", required: false }] }], callbackUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "callbackUrl", required: false }] }], deadlineHours: [{ type: i0.Input, args: [{ isSignal: true, alias: "deadlineHours", required: false }] }], approvalSubmitted: [{ type: i0.Output, args: ["approvalSubmitted"] }], approvalSubmitting: [{ type: i0.Output, args: ["approvalSubmitting"] }], cancelled: [{ type: i0.Output, args: ["cancelled"] }], contentBody: [{
                 type: ViewChild,
                 args: ['contentBody', { static: true }]