mesauth-angular 1.8.5 → 1.8.7

package/fesm2022/mesauth-angular.mjs

@@ -1,16 +1,16 @@
 import * as i0 from '@angular/core';
-import { signal, Injectable, InjectionToken, makeEnvironmentProviders, provideAppInitializer, inject, NgZone, NgModule, output, HostListener, HostBinding, Component, ViewChild, input, DestroyRef, computed, Directive } from '@angular/core';
-import { catchError, of, BehaviorSubject, Subject, EMPTY, timer, throwError, firstValueFrom, forkJoin } from 'rxjs';
+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 { catchError, of, Subject, EMPTY, timer, throwError, firstValueFrom, forkJoin } from 'rxjs';
 import { HttpClient } from '@angular/common/http';
 import { HubConnectionBuilder, LogLevel } from '@microsoft/signalr';
 import { tap, catchError as catchError$1, switchMap, map } from 'rxjs/operators';
 import { Router } from '@angular/router';
-import { toObservable, takeUntilDestroyed, rxResource } from '@angular/core/rxjs-interop';
 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.5';
+const PACKAGE_VERSION = '1.8.7';
 /**
  * Provides server-driven UI configuration loaded from the hosted manifest.
  * Components read `labels()` and `features()` signals instead of hardcoded strings.
@@ -103,8 +103,7 @@ function provideMesAuth(config) {
             const mesAuthService = inject(MesAuthService);
             const httpClient = inject(HttpClient);
             const router = inject(Router);
-            const ngZone = inject(NgZone);
-            mesAuthService.init(config, httpClient, router, ngZone);
+            mesAuthService.init(config, httpClient, router);
         })
     ]);
 }
@@ -117,8 +116,9 @@ var NotificationType;
 })(NotificationType || (NotificationType = {}));
 class MesAuthService {
     hubConnection = null;
-    _currentUser = new BehaviorSubject(null);
-    currentUser$ = this._currentUser.asObservable();
+    _currentUser = signal(null, ...(ngDevMode ? [{ debugName: "_currentUser" }] : /* istanbul ignore next */ []));
+    /** Observable for components that prefer RxJS — backed by the signal. */
+    currentUser$ = toObservable(this._currentUser);
     _notifications = new Subject();
     notifications$ = this._notifications.asObservable();
     _approvalEvents = new Subject();
@@ -127,15 +127,14 @@ class MesAuthService {
     config = null;
     http;
     router;
-    ngZone = null;
     constructor() {
         // Empty constructor - all dependencies passed to init()
     }
-    init(config, httpClient, router, ngZone) {
+    /** _ngZone accepted but ignored — not needed in zoneless apps. */
+    init(config, httpClient, router, _ngZone) {
         this.config = config;
         this.http = httpClient;
         this.router = router;
-        this.ngZone = ngZone ?? null;
         this.apiBase = config.apiBaseUrl.replace(/\/$/, '');
         // Inject server-hosted theme CSS and manifest so visual/config changes
         // don't require a package republish.
@@ -165,14 +164,14 @@ class MesAuthService {
             return EMPTY;
         const url = `${this.apiBase}/auth/me`;
         return this.http.get(url, { withCredentials: this.config?.withCredentials ?? true }).pipe(tap((u) => {
-            this._currentUser.next(u);
+            this._currentUser.set(u);
             if (u && this.config) {
                 this.startConnection(this.config);
             }
         }), catchError$1((err) => {
             // Silently handle auth errors (401/403) - user is not logged in
             if (err.status === 401 || err.status === 403) {
-                this._currentUser.next(null);
+                this._currentUser.set(null);
             }
             return of(null);
         }));
@@ -214,29 +213,16 @@ class MesAuthService {
             .withAutomaticReconnect()
             .configureLogging(LogLevel.Warning);
         this.hubConnection = builder.build();
+        // No NgZone.run() needed — signal mutations and toSignal() in consumers
+        // schedule Angular change detection correctly in zoneless apps.
         this.hubConnection.on('ReceiveNotification', (n) => {
-            if (this.ngZone) {
-                this.ngZone.run(() => this._notifications.next(n));
-            }
-            else {
-                this._notifications.next(n);
-            }
+            this._notifications.next(n);
         });
         this.hubConnection.on('ApprovalCompleted', (e) => {
-            if (this.ngZone) {
-                this.ngZone.run(() => this._approvalEvents.next({ type: 'ApprovalCompleted', ...e }));
-            }
-            else {
-                this._approvalEvents.next({ type: 'ApprovalCompleted', ...e });
-            }
+            this._approvalEvents.next({ type: 'ApprovalCompleted', ...e });
         });
         this.hubConnection.on('ApprovalStepChanged', (e) => {
-            if (this.ngZone) {
-                this.ngZone.run(() => this._approvalEvents.next({ type: 'ApprovalStepChanged', ...e }));
-            }
-            else {
-                this._approvalEvents.next({ type: 'ApprovalStepChanged', ...e });
-            }
+            this._approvalEvents.next({ type: 'ApprovalStepChanged', ...e });
         });
         this.hubConnection.start().then(() => { }).catch((err) => { });
         this.hubConnection.onclose(() => { });
@@ -252,15 +238,15 @@ class MesAuthService {
     logout() {
         const url = `${this.apiBase}/auth/logout`;
         return this.http.post(url, {}, { withCredentials: this.config?.withCredentials ?? true }).pipe(tap(() => {
-            this._currentUser.next(null);
+            this._currentUser.set(null);
             this.stop();
         }));
     }
     get currentUser() {
-        return this._currentUser.value;
+        return this._currentUser();
     }
     get isAuthenticated() {
-        return this._currentUser.value !== null;
+        return this._currentUser() !== null;
     }
     /**
      * Refreshes the current user from the server.
@@ -581,32 +567,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
             }] } });
 
 class ToastService {
-    toasts$ = new BehaviorSubject([]);
-    toasts = this.toasts$.asObservable();
+    _toasts = signal([], ...(ngDevMode ? [{ debugName: "_toasts" }] : /* istanbul ignore next */ []));
+    toasts = this._toasts.asReadonly();
     show(message, title, type = 'info', duration = 5000) {
         const id = Math.random().toString(36).substr(2, 9);
-        const toast = {
-            id,
-            message,
-            title,
-            type,
-            duration
-        };
-        const currentToasts = this.toasts$.value;
-        this.toasts$.next([...currentToasts, toast]);
+        const toast = { id, message, title, type, duration };
+        this._toasts.update(t => [...t, toast]);
         if (duration > 0) {
-            setTimeout(() => {
-                this.remove(id);
-            }, duration);
+            setTimeout(() => this.remove(id), duration);
         }
         return id;
     }
     remove(id) {
-        const currentToasts = this.toasts$.value;
-        this.toasts$.next(currentToasts.filter(t => t.id !== id));
+        this._toasts.update(t => t.filter(toast => toast.id !== id));
     }
     clear() {
-        this.toasts$.next([]);
+        this._toasts.set([]);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ToastService, providedIn: 'root' });
@@ -620,26 +596,19 @@ class ToastContainerComponent {
     get themeClass() {
         return `theme-${this.themeService.currentTheme()}`;
     }
-    toasts = [];
     toastService = inject(ToastService);
     themeService = inject(ThemeService);
-    constructor() {
-        this.toastService.toasts
-            .pipe(takeUntilDestroyed())
-            .subscribe(toasts => {
-            this.toasts = toasts;
-        });
-    }
+    toasts = this.toastService.toasts;
     close(id) {
         this.toastService.remove(id);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ToastContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: ToastContainerComponent, isStandalone: true, selector: "ma-toast-container", host: { properties: { "class": "this.themeClass" } }, ngImport: i0, template: "<div class=\"toast-container\">\n  @for (toast of toasts; track toast.id) {\n    <div class=\"toast toast-{{ toast.type }}\">\n\n      <!-- Type icon -->\n      <div class=\"toast-icon\">\n        @if (toast.type === 'info') {\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\"/><path d=\"M13.73 21a2 2 0 0 1-3.46 0\"/>\n          </svg>\n        }\n        @if (toast.type === 'success') {\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=\"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 (toast.type === 'warning') {\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=\"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 (toast.type === 'error') {\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            <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\n      <!-- Content -->\n      <div class=\"toast-content\">\n        @if (toast.title) {\n          <div class=\"toast-title\">{{ toast.title }}</div>\n        }\n        <div class=\"toast-message\" [innerHTML]=\"toast.message\"></div>\n      </div>\n\n      <!-- Close -->\n      <button class=\"toast-close\" (click)=\"close(toast.id)\" aria-label=\"Close\">\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          <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"/>\n        </svg>\n      </button>\n\n      <!-- Auto-dismiss progress bar \u2014 hidden when duration <= 0 (persistent toast) -->\n      @if (toast.duration == null || toast.duration > 0) {\n        <div class=\"toast-progress\" [style.animation-duration]=\"(toast.duration ?? 5000) + 'ms'\"></div>\n      }\n    </div>\n  }\n</div>\n", styles: [".toast-container{position:fixed;top:20px;right:20px;z-index:9999;pointer-events:none;display:flex;flex-direction:column;gap:10px}.toast{position:relative;display:flex;align-items:flex-start;gap:11px;padding:13px 13px 16px 16px;border-radius:12px;background:var(--bg-primary);border:1px solid var(--border-color);box-shadow:0 8px 28px var(--shadow-lg),0 2px 8px var(--shadow);pointer-events:auto;min-width:300px;max-width:420px;overflow:hidden;animation:toast-in .35s cubic-bezier(.16,1,.3,1)}@keyframes toast-in{0%{opacity:0;transform:translate(36px) scale(.96)}to{opacity:1;transform:translate(0) scale(1)}}.toast:before{content:\"\";position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:12px 0 0 12px}.toast-info:before{background:var(--info-color)}.toast-success:before{background:var(--success-color)}.toast-warning:before{background:var(--warning-color)}.toast-error:before{background:var(--error-color)}.toast-icon{flex-shrink:0;width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;margin-left:2px}.toast-info .toast-icon{color:var(--info-color);background:var(--info-bg)}.toast-success .toast-icon{color:var(--success-color);background:var(--success-bg)}.toast-warning .toast-icon{color:var(--warning-color);background:var(--warning-bg)}.toast-error .toast-icon{color:var(--error-color);background:var(--error-bg)}.toast-content{flex:1;min-width:0;padding-top:1px}.toast-title{font-weight:700;font-size:13.5px;margin-bottom:3px;line-height:1.3}.toast-info .toast-title{color:var(--info-color)}.toast-success .toast-title{color:var(--success-color)}.toast-warning .toast-title{color:var(--warning-color)}.toast-error .toast-title{color:var(--error-color)}.toast-message{font-size:12.5px;line-height:1.45;color:var(--text-secondary)}.toast-message h3{margin:0 0 4px;font-size:13.5px;color:inherit}.toast-close{background:none;border:none;cursor:pointer;color:var(--text-secondary);width:26px;height:26px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;transition:color .15s,background-color .15s}.toast-close:hover{color:var(--text-primary);background:var(--border-color)}.toast-progress{position:absolute;bottom:0;left:4px;right:0;height:3px;border-radius:0 0 12px;animation:toast-progress linear forwards;opacity:.7}.toast-info .toast-progress{background:var(--info-color)}.toast-success .toast-progress{background:var(--success-color)}.toast-warning .toast-progress{background:var(--warning-color)}.toast-error .toast-progress{background:var(--error-color)}@keyframes toast-progress{0%{width:calc(100% - 4px)}to{width:0}}@media(max-width:600px){.toast-container{top:10px;right:10px;left:10px}.toast{min-width:auto;max-width:100%}}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: ToastContainerComponent, isStandalone: true, selector: "ma-toast-container", host: { properties: { "class": "this.themeClass" } }, ngImport: i0, template: "<div class=\"toast-container\">\n  @for (toast of toasts(); track toast.id) {\n    <div class=\"toast toast-{{ toast.type }}\">\n\n      <!-- Type icon -->\n      <div class=\"toast-icon\">\n        @if (toast.type === 'info') {\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\"/><path d=\"M13.73 21a2 2 0 0 1-3.46 0\"/>\n          </svg>\n        }\n        @if (toast.type === 'success') {\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=\"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 (toast.type === 'warning') {\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=\"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 (toast.type === 'error') {\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            <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\n      <!-- Content -->\n      <div class=\"toast-content\">\n        @if (toast.title) {\n          <div class=\"toast-title\">{{ toast.title }}</div>\n        }\n        <div class=\"toast-message\" [innerHTML]=\"toast.message\"></div>\n      </div>\n\n      <!-- Close -->\n      <button class=\"toast-close\" (click)=\"close(toast.id)\" aria-label=\"Close\">\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          <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"/>\n        </svg>\n      </button>\n\n      <!-- Auto-dismiss progress bar \u2014 hidden when duration <= 0 (persistent toast) -->\n      @if (toast.duration == null || toast.duration > 0) {\n        <div class=\"toast-progress\" [style.animation-duration]=\"(toast.duration ?? 5000) + 'ms'\"></div>\n      }\n    </div>\n  }\n</div>\n", styles: [".toast-container{position:fixed;top:20px;right:20px;z-index:9999;pointer-events:none;display:flex;flex-direction:column;gap:10px}.toast{position:relative;display:flex;align-items:flex-start;gap:11px;padding:13px 13px 16px 16px;border-radius:12px;background:var(--bg-primary);border:1px solid var(--border-color);box-shadow:0 8px 28px var(--shadow-lg),0 2px 8px var(--shadow);pointer-events:auto;min-width:300px;max-width:420px;overflow:hidden;animation:toast-in .35s cubic-bezier(.16,1,.3,1)}@keyframes toast-in{0%{opacity:0;transform:translate(36px) scale(.96)}to{opacity:1;transform:translate(0) scale(1)}}.toast:before{content:\"\";position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:12px 0 0 12px}.toast-info:before{background:var(--info-color)}.toast-success:before{background:var(--success-color)}.toast-warning:before{background:var(--warning-color)}.toast-error:before{background:var(--error-color)}.toast-icon{flex-shrink:0;width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;margin-left:2px}.toast-info .toast-icon{color:var(--info-color);background:var(--info-bg)}.toast-success .toast-icon{color:var(--success-color);background:var(--success-bg)}.toast-warning .toast-icon{color:var(--warning-color);background:var(--warning-bg)}.toast-error .toast-icon{color:var(--error-color);background:var(--error-bg)}.toast-content{flex:1;min-width:0;padding-top:1px}.toast-title{font-weight:700;font-size:13.5px;margin-bottom:3px;line-height:1.3}.toast-info .toast-title{color:var(--info-color)}.toast-success .toast-title{color:var(--success-color)}.toast-warning .toast-title{color:var(--warning-color)}.toast-error .toast-title{color:var(--error-color)}.toast-message{font-size:12.5px;line-height:1.45;color:var(--text-secondary)}.toast-message h3{margin:0 0 4px;font-size:13.5px;color:inherit}.toast-close{background:none;border:none;cursor:pointer;color:var(--text-secondary);width:26px;height:26px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;transition:color .15s,background-color .15s}.toast-close:hover{color:var(--text-primary);background:var(--border-color)}.toast-progress{position:absolute;bottom:0;left:4px;right:0;height:3px;border-radius:0 0 12px;animation:toast-progress linear forwards;opacity:.7}.toast-info .toast-progress{background:var(--info-color)}.toast-success .toast-progress{background:var(--success-color)}.toast-warning .toast-progress{background:var(--warning-color)}.toast-error .toast-progress{background:var(--error-color)}@keyframes toast-progress{0%{width:calc(100% - 4px)}to{width:0}}@media(max-width:600px){.toast-container{top:10px;right:10px;left:10px}.toast{min-width:auto;max-width:100%}}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ToastContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ma-toast-container', imports: [], template: "<div class=\"toast-container\">\n  @for (toast of toasts; track toast.id) {\n    <div class=\"toast toast-{{ toast.type }}\">\n\n      <!-- Type icon -->\n      <div class=\"toast-icon\">\n        @if (toast.type === 'info') {\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\"/><path d=\"M13.73 21a2 2 0 0 1-3.46 0\"/>\n          </svg>\n        }\n        @if (toast.type === 'success') {\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=\"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 (toast.type === 'warning') {\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=\"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 (toast.type === 'error') {\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            <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\n      <!-- Content -->\n      <div class=\"toast-content\">\n        @if (toast.title) {\n          <div class=\"toast-title\">{{ toast.title }}</div>\n        }\n        <div class=\"toast-message\" [innerHTML]=\"toast.message\"></div>\n      </div>\n\n      <!-- Close -->\n      <button class=\"toast-close\" (click)=\"close(toast.id)\" aria-label=\"Close\">\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          <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"/>\n        </svg>\n      </button>\n\n      <!-- Auto-dismiss progress bar \u2014 hidden when duration <= 0 (persistent toast) -->\n      @if (toast.duration == null || toast.duration > 0) {\n        <div class=\"toast-progress\" [style.animation-duration]=\"(toast.duration ?? 5000) + 'ms'\"></div>\n      }\n    </div>\n  }\n</div>\n", styles: [".toast-container{position:fixed;top:20px;right:20px;z-index:9999;pointer-events:none;display:flex;flex-direction:column;gap:10px}.toast{position:relative;display:flex;align-items:flex-start;gap:11px;padding:13px 13px 16px 16px;border-radius:12px;background:var(--bg-primary);border:1px solid var(--border-color);box-shadow:0 8px 28px var(--shadow-lg),0 2px 8px var(--shadow);pointer-events:auto;min-width:300px;max-width:420px;overflow:hidden;animation:toast-in .35s cubic-bezier(.16,1,.3,1)}@keyframes toast-in{0%{opacity:0;transform:translate(36px) scale(.96)}to{opacity:1;transform:translate(0) scale(1)}}.toast:before{content:\"\";position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:12px 0 0 12px}.toast-info:before{background:var(--info-color)}.toast-success:before{background:var(--success-color)}.toast-warning:before{background:var(--warning-color)}.toast-error:before{background:var(--error-color)}.toast-icon{flex-shrink:0;width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;margin-left:2px}.toast-info .toast-icon{color:var(--info-color);background:var(--info-bg)}.toast-success .toast-icon{color:var(--success-color);background:var(--success-bg)}.toast-warning .toast-icon{color:var(--warning-color);background:var(--warning-bg)}.toast-error .toast-icon{color:var(--error-color);background:var(--error-bg)}.toast-content{flex:1;min-width:0;padding-top:1px}.toast-title{font-weight:700;font-size:13.5px;margin-bottom:3px;line-height:1.3}.toast-info .toast-title{color:var(--info-color)}.toast-success .toast-title{color:var(--success-color)}.toast-warning .toast-title{color:var(--warning-color)}.toast-error .toast-title{color:var(--error-color)}.toast-message{font-size:12.5px;line-height:1.45;color:var(--text-secondary)}.toast-message h3{margin:0 0 4px;font-size:13.5px;color:inherit}.toast-close{background:none;border:none;cursor:pointer;color:var(--text-secondary);width:26px;height:26px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;transition:color .15s,background-color .15s}.toast-close:hover{color:var(--text-primary);background:var(--border-color)}.toast-progress{position:absolute;bottom:0;left:4px;right:0;height:3px;border-radius:0 0 12px;animation:toast-progress linear forwards;opacity:.7}.toast-info .toast-progress{background:var(--info-color)}.toast-success .toast-progress{background:var(--success-color)}.toast-warning .toast-progress{background:var(--warning-color)}.toast-error .toast-progress{background:var(--error-color)}@keyframes toast-progress{0%{width:calc(100% - 4px)}to{width:0}}@media(max-width:600px){.toast-container{top:10px;right:10px;left:10px}.toast{min-width:auto;max-width:100%}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { themeClass: [{
+            args: [{ selector: 'ma-toast-container', imports: [], template: "<div class=\"toast-container\">\n  @for (toast of toasts(); track toast.id) {\n    <div class=\"toast toast-{{ toast.type }}\">\n\n      <!-- Type icon -->\n      <div class=\"toast-icon\">\n        @if (toast.type === 'info') {\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\"/><path d=\"M13.73 21a2 2 0 0 1-3.46 0\"/>\n          </svg>\n        }\n        @if (toast.type === 'success') {\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=\"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 (toast.type === 'warning') {\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=\"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 (toast.type === 'error') {\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            <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\n      <!-- Content -->\n      <div class=\"toast-content\">\n        @if (toast.title) {\n          <div class=\"toast-title\">{{ toast.title }}</div>\n        }\n        <div class=\"toast-message\" [innerHTML]=\"toast.message\"></div>\n      </div>\n\n      <!-- Close -->\n      <button class=\"toast-close\" (click)=\"close(toast.id)\" aria-label=\"Close\">\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          <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"/>\n        </svg>\n      </button>\n\n      <!-- Auto-dismiss progress bar \u2014 hidden when duration <= 0 (persistent toast) -->\n      @if (toast.duration == null || toast.duration > 0) {\n        <div class=\"toast-progress\" [style.animation-duration]=\"(toast.duration ?? 5000) + 'ms'\"></div>\n      }\n    </div>\n  }\n</div>\n", styles: [".toast-container{position:fixed;top:20px;right:20px;z-index:9999;pointer-events:none;display:flex;flex-direction:column;gap:10px}.toast{position:relative;display:flex;align-items:flex-start;gap:11px;padding:13px 13px 16px 16px;border-radius:12px;background:var(--bg-primary);border:1px solid var(--border-color);box-shadow:0 8px 28px var(--shadow-lg),0 2px 8px var(--shadow);pointer-events:auto;min-width:300px;max-width:420px;overflow:hidden;animation:toast-in .35s cubic-bezier(.16,1,.3,1)}@keyframes toast-in{0%{opacity:0;transform:translate(36px) scale(.96)}to{opacity:1;transform:translate(0) scale(1)}}.toast:before{content:\"\";position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:12px 0 0 12px}.toast-info:before{background:var(--info-color)}.toast-success:before{background:var(--success-color)}.toast-warning:before{background:var(--warning-color)}.toast-error:before{background:var(--error-color)}.toast-icon{flex-shrink:0;width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;margin-left:2px}.toast-info .toast-icon{color:var(--info-color);background:var(--info-bg)}.toast-success .toast-icon{color:var(--success-color);background:var(--success-bg)}.toast-warning .toast-icon{color:var(--warning-color);background:var(--warning-bg)}.toast-error .toast-icon{color:var(--error-color);background:var(--error-bg)}.toast-content{flex:1;min-width:0;padding-top:1px}.toast-title{font-weight:700;font-size:13.5px;margin-bottom:3px;line-height:1.3}.toast-info .toast-title{color:var(--info-color)}.toast-success .toast-title{color:var(--success-color)}.toast-warning .toast-title{color:var(--warning-color)}.toast-error .toast-title{color:var(--error-color)}.toast-message{font-size:12.5px;line-height:1.45;color:var(--text-secondary)}.toast-message h3{margin:0 0 4px;font-size:13.5px;color:inherit}.toast-close{background:none;border:none;cursor:pointer;color:var(--text-secondary);width:26px;height:26px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;transition:color .15s,background-color .15s}.toast-close:hover{color:var(--text-primary);background:var(--border-color)}.toast-progress{position:absolute;bottom:0;left:4px;right:0;height:3px;border-radius:0 0 12px;animation:toast-progress linear forwards;opacity:.7}.toast-info .toast-progress{background:var(--info-color)}.toast-success .toast-progress{background:var(--success-color)}.toast-warning .toast-progress{background:var(--warning-color)}.toast-error .toast-progress{background:var(--error-color)}@keyframes toast-progress{0%{width:calc(100% - 4px)}to{width:0}}@media(max-width:600px){.toast-container{top:10px;right:10px;left:10px}.toast{min-width:auto;max-width:100%}}\n"] }]
+        }], propDecorators: { themeClass: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
@@ -1223,7 +1192,7 @@ class MaArvContainerComponent {
     get themeClass() { return `theme-${this.themeService.currentTheme()}`; }
     routingMode = 'template';
     templates = signal([], ...(ngDevMode ? [{ debugName: "templates" }] : /* istanbul ignore next */ []));
-    selectedTemplateId = null;
+    selectedTemplateId = signal(null, ...(ngDevMode ? [{ debugName: "selectedTemplateId" }] : /* istanbul ignore next */ []));
     selectedTemplate = signal(null, ...(ngDevMode ? [{ debugName: "selectedTemplate" }] : /* istanbul ignore next */ []));
     loadingTemplate = signal(false, ...(ngDevMode ? [{ debugName: "loadingTemplate" }] : /* istanbul ignore next */ []));
     // Per-step role candidates and selected user
@@ -1238,9 +1207,54 @@ class MaArvContainerComponent {
     userSearchResults = [];
     candidateSearchQuery = [];
     candidateSearchResults = [];
-    submitting = false;
-    isSubmitted = false;
-    errorMessage = '';
+    submitting = signal(false, ...(ngDevMode ? [{ debugName: "submitting" }] : /* istanbul ignore next */ []));
+    isSubmitted = signal(false, ...(ngDevMode ? [{ debugName: "isSubmitted" }] : /* istanbul ignore next */ []));
+    errorMessage = computed(() => {
+        if (!this.approvalSvc) {
+            return 'Approval service not initialized. Ensure provideMesAuth() is configured.';
+        }
+        if (!this.referenceId()) {
+            return 'ReferenceId is required.';
+        }
+        if (!this.title()) {
+            return 'Title is required.';
+        }
+        if (this.routingMode === 'template' && !this.selectedTemplateId()) {
+            return 'Please select a template or switch to Custom Steps.';
+        }
+        if (this.routingMode === 'adhoc' && this.adHocSteps.length === 0) {
+            return 'Please add at least one approval step.';
+        }
+        // Validate selectable steps (role-based or multi-assignee) have a selected approver
+        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]) {
+                    return `Please select an approver for step "${step.stepName}".`;
+                }
+            }
+        }
+        return '';
+    }, ...(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()) {
+            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;
+            }
+        }
+        return stepsError;
+    }, ...(ngDevMode ? [{ debugName: "isStepsError" }] : /* istanbul ignore next */ []));
+    submitResultError = signal(null, ...(ngDevMode ? [{ debugName: "submitResultError" }] : /* istanbul ignore next */ []));
     userLabelMap = {};
     mesAuth = inject(MesAuthService);
     themeService = inject(ThemeService);
@@ -1264,8 +1278,8 @@ class MaArvContainerComponent {
                     t = t.filter(temp => ids.includes(temp.id));
                 this.templates.set(t);
                 if (ids && ids.length > 0) {
-                    this.selectedTemplateId = ids[0];
-                    this.loadTemplateDetail(this.selectedTemplateId);
+                    this.selectedTemplateId.set(ids[0]);
+                    this.loadTemplateDetail(this.selectedTemplateId());
                 }
             },
             error: () => { }
@@ -1360,9 +1374,10 @@ class MaArvContainerComponent {
                         });
                         // Single assignee — pre-select automatically
                         if (this.stepCandidates()[i].length === 1) {
-                            this.stepSelectedUsers.update(users => {
-                                users[i] = this.stepCandidates()[i][0].userId;
-                                return users;
+                            this.stepSelectedUsers.update(u => {
+                                const next = [...u];
+                                next[i] = this.stepCandidates()[i][0].userId;
+                                return next;
                             });
                         }
                         this.stepLoadingCandidates.update(c => {
@@ -1383,15 +1398,17 @@ class MaArvContainerComponent {
         });
     }
     onStepUserChange(stepIndex, event) {
-        this.stepSelectedUsers.update(users => {
-            users[stepIndex] = event.target.value;
-            return users;
+        this.stepSelectedUsers.update(u => {
+            const next = [...u];
+            next[stepIndex] = event.target.value;
+            return next;
         });
     }
     onStepUserChangeInput(stepIndex, userId) {
-        this.stepSelectedUsers.update(users => {
-            users[stepIndex] = userId;
-            return users;
+        this.stepSelectedUsers.update(u => {
+            const next = [...u];
+            next[stepIndex] = userId;
+            return next;
         });
         this.storeLabelFromCandidates(userId, this.stepCandidates()[stepIndex]);
         this.candidateSearchQuery[stepIndex] = '';
@@ -1422,10 +1439,10 @@ class MaArvContainerComponent {
     }
     onTemplateChange(event) {
         const val = event.target.value;
-        this.selectedTemplateId = val ? parseInt(val, 10) : null;
+        this.selectedTemplateId.set(val ? parseInt(val, 10) : null);
         this.selectedTemplate.set(null);
-        if (this.selectedTemplateId) {
-            this.loadTemplateDetail(this.selectedTemplateId);
+        if (this.selectedTemplateId()) {
+            this.loadTemplateDetail(this.selectedTemplateId());
         }
     }
     addStep() {
@@ -1511,45 +1528,34 @@ class MaArvContainerComponent {
         }).catch(() => []);
     }
     async submit() {
-        if (this.submitting)
-            return;
-        this.errorMessage = '';
-        if (!this.approvalSvc) {
-            this.errorMessage = 'Approval service not initialized. Ensure provideMesAuth() is configured.';
+        if (this.submitting())
             return;
-        }
-        if (!this.referenceId()) {
-            this.errorMessage = 'ReferenceId is required.';
+        if (this.errorMessage())
             return;
-        }
-        if (!this.title()) {
-            this.errorMessage = 'Title is required.';
-            return;
-        }
-        if (this.routingMode === 'template' && !this.selectedTemplateId) {
-            this.errorMessage = 'Please select a template or switch to Custom Steps.';
-            return;
-        }
-        if (this.routingMode === 'adhoc' && this.adHocSteps.length === 0) {
-            this.errorMessage = 'Please add at least one approval step.';
-            return;
-        }
-        // Validate selectable steps (role-based or multi-assignee) have a selected approver
-        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]) {
-                    this.errorMessage = `Please select an approver for step "${step.stepName}".`;
-                    return;
-                }
-            }
-        }
+        // if (!this.approvalSvc) { this.errorMessage.set('Approval service not initialized. Ensure provideMesAuth() is configured.'); return; }
+        // if (!this.referenceId()) { this.errorMessage.set('ReferenceId is required.'); return; }
+        // if (!this.title()) { this.errorMessage.set('Title is required.'); return; }
+        // if (this.routingMode === 'template' && !this.selectedTemplateId()) {
+        //   this.errorMessage.set('Please select a template or switch to Custom Steps.'); return;
+        // }
+        // if (this.routingMode === 'adhoc' && this.adHocSteps.length === 0) {
+        //   this.errorMessage.set('Please add at least one approval step.'); return;
+        // }
+        // // Validate selectable steps (role-based or multi-assignee) have a selected approver
+        // 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]) {
+        //       this.errorMessage.set(`Please select an approver for step "${step.stepName}".`); return;
+        //     }
+        //   }
+        // }
         // Emit before capture so parent can hide edit controls (inputs, buttons)
         // then wait one tick for Angular CD to update the DOM before snapshotting
         this.approvalSubmitting.emit();
         await new Promise(resolve => setTimeout(resolve));
-        this.submitting = true;
+        this.submitting.set(true);
         try {
             const contentHtml = await this.captureContent();
             const thumbnailBase64 = await this.captureThumbnail().catch(() => undefined);
@@ -1564,10 +1570,10 @@ class MaArvContainerComponent {
                 referenceUserIds: this.referenceUserIds.length > 0 ? this.referenceUserIds : undefined
             };
             if (this.routingMode === 'template') {
-                request.templateId = this.selectedTemplateId ?? this.templateIds()?.[0];
+                request.templateId = this.selectedTemplateId() ?? this.templateIds()?.[0];
                 // If template has role-based steps with selected approvers, pass explicit steps
                 if (this.selectedTemplate()) {
-                    const hasSelectableSteps = this.selectedTemplate().steps.some((s, i) => (this.stepCandidates[i]?.length ?? 0) > 0);
+                    const hasSelectableSteps = this.selectedTemplate().steps.some((s, i) => (this.stepCandidates()[i]?.length ?? 0) > 0);
                     if (hasSelectableSteps) {
                         request.steps = this.selectedTemplate().steps.map((s, i) => ({
                             stepOrder: s.stepOrder,
@@ -1575,9 +1581,9 @@ class MaArvContainerComponent {
                             mode: s.mode,
                             approverUserIds: this.stepSelectedUsers()[i]
                                 ? [this.stepSelectedUsers()[i]]
-                                : (this.stepCandidates[i] && this.stepCandidates[i].length > 0
-                                    ? this.stepCandidates[i].map(u => u.userId)
-                                    : s.assigneeUserIds)
+                                : (this.stepCandidates()[i] && this.stepCandidates()[i].length > 0
+                                    ? this.stepCandidates()[i].map(u => u.userId)
+                                    : s.assigneeUserIds) // fallback to original assignees if no selection made
                         }));
                     }
                 }
@@ -1592,19 +1598,19 @@ class MaArvContainerComponent {
             }
             this.approvalSvc.createApproval(request).subscribe({
                 next: (result) => {
-                    this.isSubmitted = true;
-                    this.submitting = false;
+                    this.isSubmitted.set(true);
+                    this.submitting.set(false);
                     this.approvalSubmitted.emit({ documentId: result.documentId, message: result.message });
                 },
                 error: (err) => {
-                    this.submitting = false;
-                    this.errorMessage = err?.error?.message || 'Failed to submit approval. Please try again.';
+                    this.submitting.set(false);
+                    this.submitResultError.set(err?.error?.message || 'Failed to submit approval. Please try again.');
                 }
             });
         }
         catch (err) {
-            this.submitting = false;
-            this.errorMessage = err?.message || 'Failed to capture content.';
+            this.submitting.set(false);
+            this.submitResultError.set(err?.message || 'Failed to capture content.');
         }
     }
     onCancel() {
@@ -1747,11 +1753,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 (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\" (click)=\"submit()\">\n            @if (submitting) {\n              <span class=\"arv-spinner\"></span>\n            }\n            {{ submitting ? 'Submitting...' : 'Submit for Approval' }}\n          </button>\n        </div>\n\n        @if (errorMessage) {\n          <div class=\"arv-error\">{{ errorMessage }}</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-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 = '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"] });
 }
 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 (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\" (click)=\"submit()\">\n            @if (submitting) {\n              <span class=\"arv-spinner\"></span>\n            }\n            {{ submitting ? 'Submitting...' : 'Submit for Approval' }}\n          </button>\n        </div>\n\n        @if (errorMessage) {\n          <div class=\"arv-error\">{{ errorMessage }}</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-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 = '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"] }]
         }], 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 }]