mesauth-angular 1.5.5 → 1.6.0

package/README.md

@@ -4,12 +4,23 @@ Angular helper library to connect to a backend API and SignalR hub to surface th
 
 ## Changelog
 
+### v1.6.0 (2026-03-28) - **Approval Module Enhancements**
+- **`[templateId]` locks routing UI**: When bound, the routing mode toggle and template dropdown are hidden — the template name is shown as read-only. Role-based steps auto-load candidate pickers from `GET /approval/roles/preview`; the requester selects one user per step before submitting. Pass as number binding: `[templateId]="6"`.
+- **`(approvalSubmitting)` output** *(corrected from single-t typo)*: Fires before content capture starts. Use it to hide edit controls (`*ngIf="!isSubmitting"`) so they are excluded from the approval snapshot. Angular CD runs after the emit so DOM updates are captured.
+- **Automatic theme support**: `<ma-arv-container>` applies `ThemeService` internally — adapts to the app's light/dark theme via `@HostBinding('class')` with no extra setup.
+- **`previewRole(orgCode, level)`** added to `MaApprovalService`: Fetch candidate users for a role-based approval step.
+- **Callback security**: MesAuth.Api sends `X-APP-ID` + `X-APP-KEY` headers on every callback POST using its own app credentials. Protect callback endpoints with `[MesAuth]` from `MesAuth.Authorizer`.
+
 ### v1.5.0 (2026-03-24) - **Approval Module**
 - **New `<ma-approval-panel>` component**: Slide-out sidebar with 3 tabs (Processing / Approved / Rejected). Shows all pending approvals requiring action, and recent approved/rejected items. Listens to `approvalEvents$` for real-time refresh via SignalR.
 - **New `<ma-arv-container>` component**: Content capture container for submitting documents for approval. Captures projected `<ng-content>` as a self-contained HTML document by inlining all computed styles, replacing canvas elements with images, and stripping Angular/script artifacts. Supports ad-hoc step builder and template selector.
-- **New `MaApprovalService`**: Service for all approval API calls — `getPendingApprovals()`, `getMyRequests()`, `getDashboard()`, `approve()`, `reject()`, `delegate()`, `getTemplates()`, `createApproval()`, etc. Manual init pattern (same as `MesAuthService`).
+  - **`[templateId]` locks routing UI**: When bound, the routing mode toggle and template dropdown are hidden — the template name is shown as read-only. Role-based steps auto-load candidate pickers from `GET /approval/roles/preview`; the requester selects one user per step before submitting. Pass as number binding: `[templateId]="6"`.
+  - **`(approvalSubmitting)` output** *(corrected from single-t typo)*: Fires before content capture starts. Use it to hide edit controls (`*ngIf="!isSubmitting"`) so they are excluded from the approval snapshot. Angular CD runs after the emit so DOM updates are captured.
+  - **Automatic theme support**: Applies `ThemeService` internally — adapts to the app's light/dark theme via `@HostBinding('class')` with no extra setup.
+- **New `MaApprovalService`**: Service for all approval API calls — `getPendingApprovals()`, `getMyRequests()`, `getDashboard()`, `approve()`, `reject()`, `delegate()`, `getTemplates()`, `createApproval()`, `previewRole(orgCode, level)`, etc. Manual init pattern (same as `MesAuthService`).
 - **Approval icon in `ma-user-profile`**: Clipboard/checkmark icon button added between notification bell and avatar. Shows pending count badge. Emits `approvalClick` output for panel toggle.
 - **`approvalEvents$` observable in `MesAuthService`**: Real-time SignalR events (`ApprovalCompleted`, `ApprovalStepChanged`) exposed as an observable stream.
+- **Callback security**: MesAuth.Api sends `X-APP-ID` + `X-APP-KEY` headers on every callback POST using its own app credentials. Protect callback endpoints with `[MesAuth]` from `MesAuth.Authorizer`.
 - **New exports**: `MaApprovalService`, `MaApprovalPanelComponent`, `MaArvContainerComponent`, and all approval model interfaces/enums.
 
 ### v1.4.0 (2026-03-20) - **Remove Unused Route Registration API**

package/fesm2022/mesauth-angular.mjs

@@ -3,7 +3,7 @@ import { InjectionToken, makeEnvironmentProviders, provideAppInitializer, inject
 import * as i4 from '@angular/common/http';
 import { HttpClient } from '@angular/common/http';
 import { HubConnectionBuilder, LogLevel } from '@microsoft/signalr';
-import { BehaviorSubject, Subject, EMPTY, of, timer, throwError } from 'rxjs';
+import { BehaviorSubject, Subject, EMPTY, of, timer, throwError, forkJoin } from 'rxjs';
 import { tap, catchError, switchMap, takeUntil } from 'rxjs/operators';
 import * as i2 from '@angular/router';
 import { Router } from '@angular/router';
@@ -1253,7 +1253,7 @@ class NotificationPanelComponent {
         </div>
         <div class="modal-body" *ngIf="!selectedNotificationUrl" [innerHTML]="selectedNotificationHtml"></div>
         <div class="modal-body modal-body-iframe" *ngIf="selectedNotificationUrl">
-          <iframe [src]="selectedNotificationUrl" sandbox="allow-same-origin" class="notification-iframe"></iframe>
+          <iframe [src]="selectedNotificationUrl" sandbox="allow-same-origin allow-scripts" class="notification-iframe"></iframe>
         </div>
         <div class="modal-footer">
           <button class="action-btn" (click)="closeDetails()">Close</button>
@@ -1415,7 +1415,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
         </div>
         <div class="modal-body" *ngIf="!selectedNotificationUrl" [innerHTML]="selectedNotificationHtml"></div>
         <div class="modal-body modal-body-iframe" *ngIf="selectedNotificationUrl">
-          <iframe [src]="selectedNotificationUrl" sandbox="allow-same-origin" class="notification-iframe"></iframe>
+          <iframe [src]="selectedNotificationUrl" sandbox="allow-same-origin allow-scripts" class="notification-iframe"></iframe>
         </div>
         <div class="modal-footer">
           <button class="action-btn" (click)="closeDetails()">Close</button>
@@ -1508,6 +1508,9 @@ class MaApprovalService {
     deleteTemplate(id) {
         return this.http.delete(`${this.apiBase}/approval/templates/${id}`, this.opts);
     }
+    previewRole(orgCode, level) {
+        return this.http.get(`${this.apiBase}/approval/roles/preview?orgCode=${encodeURIComponent(orgCode)}&level=${encodeURIComponent(level)}`, this.opts);
+    }
     // ====================== Create (used by ma-arv-container) ======================
     createApproval(request) {
         return this.http.post(`${this.apiBase}/approval/documents`, request, this.opts);
@@ -2016,12 +2019,18 @@ class MaArvContainerComponent {
     callbackUrl;
     deadlineHours;
     approvalSubmitted = new EventEmitter();
-    approvalSubmiting = new EventEmitter();
+    approvalSubmitting = new EventEmitter();
     cancelled = new EventEmitter();
     contentBody;
     routingMode = 'template';
     templates = [];
     selectedTemplateId = null;
+    selectedTemplate = null;
+    loadingTemplate = false;
+    // Per-step role candidates and selected user
+    stepCandidates = [];
+    stepLoadingCandidates = [];
+    stepSelectedUsers = [];
     adHocSteps = [];
     referenceUserIds = [];
     refSearchQuery = '';
@@ -2032,11 +2041,17 @@ class MaArvContainerComponent {
     isSubmitted = false;
     errorMessage = '';
     userLabelMap = {};
+    get themeClass() { return `theme-${this.currentTheme}`; }
+    currentTheme = 'light';
     destroy$ = new Subject();
     mesAuth = inject(MesAuthService);
+    themeService = inject(ThemeService);
     approvalSvc = null;
     http = inject(HttpClient);
     ngOnInit() {
+        this.themeService.currentTheme$
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(t => this.currentTheme = t);
         const config = this.mesAuth.getConfig();
         if (config) {
             this.approvalSvc = new MaApprovalService();
@@ -2051,13 +2066,63 @@ class MaArvContainerComponent {
     }
     loadTemplates() {
         this.approvalSvc.getTemplates().pipe(takeUntil(this.destroy$)).subscribe({
-            next: (t) => this.templates = t,
+            next: (t) => {
+                this.templates = t;
+                if (this.templateId != null && this.selectedTemplateId == null) {
+                    this.selectedTemplateId = this.templateId;
+                    this.loadTemplateDetail(this.templateId);
+                }
+            },
             error: () => { }
         });
     }
+    loadTemplateDetail(id) {
+        this.loadingTemplate = true;
+        this.selectedTemplate = null;
+        this.stepCandidates = [];
+        this.stepLoadingCandidates = [];
+        this.stepSelectedUsers = [];
+        this.approvalSvc.getTemplate(id).pipe(takeUntil(this.destroy$)).subscribe({
+            next: (t) => {
+                this.selectedTemplate = t;
+                this.loadingTemplate = false;
+                this.loadStepCandidates(t.steps);
+            },
+            error: () => { this.loadingTemplate = false; }
+        });
+    }
+    loadStepCandidates(steps) {
+        this.stepCandidates = steps.map(() => []);
+        this.stepLoadingCandidates = steps.map(() => false);
+        this.stepSelectedUsers = steps.map(() => '');
+        steps.forEach((step, i) => {
+            if (!step.roles || step.roles.length === 0)
+                return;
+            this.stepLoadingCandidates[i] = true;
+            const calls = step.roles.map(r => this.approvalSvc.previewRole(r.orgCode, r.positionLevel));
+            forkJoin(calls.length > 0 ? calls : [of([])])
+                .pipe(takeUntil(this.destroy$))
+                .subscribe({
+                next: results => {
+                    const merged = new Map();
+                    results.forEach(list => list.forEach(u => merged.set(u.userId, u)));
+                    this.stepCandidates[i] = Array.from(merged.values());
+                    this.stepLoadingCandidates[i] = false;
+                },
+                error: () => { this.stepLoadingCandidates[i] = false; }
+            });
+        });
+    }
+    onStepUserChange(stepIndex, event) {
+        this.stepSelectedUsers[stepIndex] = event.target.value;
+    }
     onTemplateChange(event) {
         const val = event.target.value;
         this.selectedTemplateId = val ? parseInt(val, 10) : null;
+        this.selectedTemplate = null;
+        if (this.selectedTemplateId) {
+            this.loadTemplateDetail(this.selectedTemplateId);
+        }
     }
     addStep() {
         const order = this.adHocSteps.length + 1;
@@ -2138,6 +2203,8 @@ class MaArvContainerComponent {
             .catch(() => []);
     }
     async submit() {
+        if (this.submitting)
+            return;
         this.errorMessage = '';
         if (!this.approvalSvc) {
             this.errorMessage = 'Approval service not initialized. Ensure provideMesAuth() is configured.';
@@ -2159,10 +2226,21 @@ class MaArvContainerComponent {
             this.errorMessage = 'Please add at least one approval step.';
             return;
         }
-        this.submitting = true;
-        if (this.approvalSubmiting.observers.length > 0) {
-            this.approvalSubmiting.emit();
+        // Validate role-based steps 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];
+                if (step.roles?.length > 0 && !this.stepSelectedUsers[i]) {
+                    this.errorMessage = `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;
         try {
             const contentHtml = await this.captureContent();
             const thumbnailBase64 = await this.captureThumbnail().catch(() => undefined);
@@ -2178,6 +2256,20 @@ class MaArvContainerComponent {
             };
             if (this.routingMode === 'template') {
                 request.templateId = this.selectedTemplateId ?? this.templateId;
+                // If template has role-based steps with selected approvers, pass explicit steps
+                if (this.selectedTemplate) {
+                    const hasRoleSteps = this.selectedTemplate.steps.some(s => s.roles?.length > 0);
+                    if (hasRoleSteps) {
+                        request.steps = this.selectedTemplate.steps.map((s, i) => ({
+                            stepOrder: s.stepOrder,
+                            stepName: s.stepName,
+                            mode: s.mode,
+                            approverUserIds: s.roles?.length > 0
+                                ? (this.stepSelectedUsers[i] ? [this.stepSelectedUsers[i]] : s.assigneeUserIds)
+                                : s.assigneeUserIds
+                        }));
+                    }
+                }
             }
             else {
                 request.steps = this.adHocSteps.map((s, i) => ({
@@ -2328,7 +2420,7 @@ ${clone.outerHTML}
         ];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MaArvContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: MaArvContainerComponent, isStandalone: true, selector: "ma-arv-container", inputs: { title: "title", description: "description", referenceId: "referenceId", templateId: "templateId", callbackUrl: "callbackUrl", deadlineHours: "deadlineHours" }, outputs: { approvalSubmitted: "approvalSubmitted", approvalSubmiting: "approvalSubmiting", cancelled: "cancelled" }, viewQueries: [{ propertyName: "contentBody", first: true, predicate: ["contentBody"], descendants: true, static: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: MaArvContainerComponent, isStandalone: true, selector: "ma-arv-container", inputs: { title: "title", description: "description", referenceId: "referenceId", templateId: "templateId", callbackUrl: "callbackUrl", deadlineHours: "deadlineHours" }, outputs: { approvalSubmitted: "approvalSubmitted", 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">
       <!-- Content Area -->
       <div class="arv-content-body" #contentBody>
@@ -2343,7 +2435,8 @@ ${clone.outerHTML}
           <div class="arv-routing">
             <div class="arv-routing-header">
               <h4 class="arv-section-title">Approval Routing</h4>
-              <div class="arv-routing-mode">
+              <!-- Show routing toggle only when templateId is NOT locked -->
+              <div *ngIf="!templateId" class="arv-routing-mode">
                 <label class="arv-radio">
                   <input type="radio" name="routingMode" value="template" [checked]="routingMode === 'template'" (change)="routingMode = 'template'"> Use Template
                 </label>
@@ -2353,15 +2446,62 @@ ${clone.outerHTML}
               </div>
             </div>
 
-            <!-- Template selector -->
-            <div *ngIf="routingMode === 'template'" class="arv-template-select">
+            <!-- Locked template: show name only, no selector -->
+            <div *ngIf="templateId && routingMode === 'template'" class="arv-template-select">
+              <div *ngIf="loadingTemplate" class="arv-template-loading">Loading template...</div>
+              <div *ngIf="selectedTemplate && !loadingTemplate" class="arv-locked-template">
+                <span class="arv-locked-label">Template</span>
+                <span class="arv-locked-name">{{ selectedTemplate.name }}</span>
+              </div>
+            </div>
+
+            <!-- Free template selector (no locked templateId) -->
+            <div *ngIf="!templateId && routingMode === 'template'" class="arv-template-select">
               <label class="arv-label">Select Template</label>
               <select class="arv-select" (change)="onTemplateChange($event)">
                 <option value="">-- Select a template --</option>
-                <option *ngFor="let t of templates" [value]="t.id">{{ t.name }}</option>
+                <option *ngFor="let t of templates" [value]="t.id" [selected]="t.id === selectedTemplateId">{{ t.name }}</option>
               </select>
             </div>
 
+            <!-- Step pickers (shared for both locked and free template) -->
+            <div *ngIf="routingMode === 'template'" class="arv-template-select">
+              <div *ngIf="!loadingTemplate && selectedTemplate" class="arv-template-steps">
+                <div class="arv-step-card" *ngFor="let s of selectedTemplate.steps; let i = index">
+                  <div class="arv-step-card-header">
+                    <span class="arv-step-preview-num">Step {{ s.stepOrder }}</span>
+                    <span class="arv-step-preview-name">{{ s.stepName }}</span>
+                    <span *ngIf="s.roles && s.roles.length > 0" class="arv-step-role-badge">
+                      {{ s.roles[0].positionLevel }}{{ s.roles[0].orgName ? ' · ' + s.roles[0].orgName : '' }}
+                    </span>
+                  </div>
+                  <!-- Role-based step: show approver picker -->
+                  <div *ngIf="s.roles && s.roles.length > 0" class="arv-step-picker">
+                    <div *ngIf="stepLoadingCandidates[i]" class="arv-template-loading">Loading candidates...</div>
+                    <select *ngIf="!stepLoadingCandidates[i]" class="arv-select arv-select-sm"
+                      (change)="onStepUserChange(i, $event)">
+                      <option value="">-- Select approver --</option>
+                      <option *ngFor="let u of stepCandidates[i]" [value]="u.userId"
+                        [selected]="u.userId === stepSelectedUsers[i]">
+                        {{ u.fullName || u.userId }}{{ u.department ? ' · ' + u.department : '' }}{{ u.position ? ' (' + u.position + ')' : '' }}
+                      </option>
+                    </select>
+                    <div *ngIf="!stepLoadingCandidates[i] && stepCandidates[i]?.length === 0" class="arv-template-loading">
+                      No candidates found for this role.
+                    </div>
+                  </div>
+                  <!-- Fixed-user step -->
+                  <div *ngIf="!s.roles || s.roles.length === 0" class="arv-step-fixed">
+                    {{ s.assigneeUserIds.length }} pre-configured approver(s)
+                  </div>
+                </div>
+                <div *ngIf="selectedTemplate.referenceUserIds.length > 0" class="arv-step-preview arv-step-preview-cc">
+                  <span class="arv-step-preview-num">CC</span>
+                  <span class="arv-step-preview-name">{{ selectedTemplate.referenceUserIds.length }} reference user(s) from template</span>
+                </div>
+              </div>
+            </div>
+
             <!-- Ad-hoc steps -->
             <div *ngIf="routingMode === 'adhoc'" class="arv-steps">
               <div class="arv-step" *ngFor="let step of adHocSteps; let i = index">
@@ -2443,7 +2583,7 @@ ${clone.outerHTML}
         <p>Submitted for approval successfully.</p>
       </div>
     </div>
-  `, isInline: true, styles: [":host{display:block;--arv-primary: #90caf9;--arv-primary-hover: #64b5f6;--arv-success: #66bb6a;--arv-danger: #ef5350;--arv-text: #e0e0e0;--arv-text-muted: #9e9e9e;--arv-bg: #1e1e2e;--arv-bg2: #27273a;--arv-border: #383850;--arv-radius: 8px}:host(.theme-light){--arv-primary: #1565c0;--arv-primary-hover: #0d47a1;--arv-success: #2e7d32;--arv-danger: #c62828;--arv-text: #212121;--arv-text-muted: #616161;--arv-bg: #ffffff;--arv-bg2: #f5f5f5;--arv-border: #e0e0e0}.arv-container{display:flex;flex-direction:column;height:100%}.arv-content-body{flex:1;overflow:auto}.arv-footer{border-top:1px solid var(--arv-border);background:var(--arv-bg2)}.arv-footer-inner{padding:16px;display:flex;flex-direction:column;gap:14px}.arv-section-title{margin:0 0 8px;font-size:13px;font-weight:700;color:var(--arv-primary);text-transform:uppercase;letter-spacing:.5px}.arv-routing-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}.arv-routing-mode{display:flex;gap:12px}.arv-radio{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--arv-text);cursor:pointer}.arv-label{font-size:12px;color:var(--arv-text-muted);display:block;margin-bottom:4px}.arv-select{width:100%;padding:8px 10px;border:1px solid var(--arv-border);border-radius:var(--arv-radius);background:var(--arv-bg);color:var(--arv-text);font-size:13px}.arv-input{padding:7px 10px;border:1px solid var(--arv-border);border-radius:var(--arv-radius);background:var(--arv-bg);color:var(--arv-text);font-size:13px}.arv-input-sm{width:100%;margin-top:4px}.arv-steps{display:flex;flex-direction:column;gap:10px}.arv-step{background:var(--arv-bg);border:1px solid var(--arv-border);border-radius:var(--arv-radius);padding:10px}.arv-step-header{display:flex;align-items:center;gap:8px;margin-bottom:8px}.arv-step-num{font-size:12px;font-weight:700;color:var(--arv-primary);min-width:44px}.arv-approver-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}.arv-tag{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;background:#90caf91f;border:1px solid rgba(144,202,249,.3);border-radius:12px;font-size:12px;color:var(--arv-primary)}.arv-tag-remove{background:none;border:none;cursor:pointer;color:var(--arv-text-muted);font-size:11px;padding:0 2px;line-height:1}.arv-tag-remove:hover{color:var(--arv-danger)}.arv-user-search{position:relative}.arv-search-results{position:absolute;left:0;right:0;z-index:100;background:var(--arv-bg2);border:1px solid var(--arv-border);border-radius:var(--arv-radius);max-height:150px;overflow-y:auto}.arv-search-item{padding:8px 12px;cursor:pointer;font-size:13px;color:var(--arv-text)}.arv-search-item:hover{background:var(--arv-bg)}.arv-hint{font-size:12px;color:var(--arv-text-muted);margin:0 0 8px}.arv-btn-icon{background:none;border:none;cursor:pointer;padding:2px;border-radius:4px;display:inline-flex;align-items:center;justify-content:center}.arv-btn-danger{color:var(--arv-danger)}.arv-btn-danger:hover{background:#ef53501a}.arv-actions{display:flex;justify-content:flex-end;gap:10px}.arv-btn{padding:9px 18px;border-radius:var(--arv-radius);font-size:13px;font-weight:600;cursor:pointer;border:none;transition:background .15s}.arv-btn-primary{background:var(--arv-primary);color:#fff}.arv-btn-primary:hover:not(:disabled){background:var(--arv-primary-hover)}.arv-btn-primary:disabled{opacity:.6;cursor:not-allowed}.arv-btn-secondary{background:transparent;border:1px solid var(--arv-border);color:var(--arv-text-muted)}.arv-btn-secondary:hover{color:var(--arv-text);border-color:var(--arv-text-muted)}.arv-btn-outline{background:transparent;border:1px dashed var(--arv-border);color:var(--arv-text-muted);font-size:12px;padding:6px 12px}.arv-btn-outline:hover{border-color:var(--arv-primary);color:var(--arv-primary)}.arv-spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:arv-spin .6s linear infinite;margin-right:6px}@keyframes arv-spin{to{transform:rotate(360deg)}}.arv-error{padding:8px 12px;background:#ef53501a;border:1px solid rgba(239,83,80,.3);border-radius:var(--arv-radius);font-size:13px;color:var(--arv-danger)}.arv-success{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px;gap:12px;text-align:center}.arv-success p{color:var(--arv-success);font-size:15px;font-weight:600;margin:0}.arv-references{border-top:1px solid var(--arv-border);padding-top:12px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+  `, isInline: true, styles: [":host{display:block;--arv-primary: #90caf9;--arv-primary-hover: #64b5f6;--arv-success: #66bb6a;--arv-danger: #ef5350;--arv-text: #e0e0e0;--arv-text-muted: #9e9e9e;--arv-bg: #1e1e2e;--arv-bg2: #27273a;--arv-border: #383850;--arv-radius: 8px}:host(.theme-light){--arv-primary: #1565c0;--arv-primary-hover: #0d47a1;--arv-success: #2e7d32;--arv-danger: #c62828;--arv-text: #212121;--arv-text-muted: #616161;--arv-bg: #ffffff;--arv-bg2: #f5f5f5;--arv-border: #e0e0e0}.arv-container{display:flex;flex-direction:column;height:100%}.arv-content-body{flex:1;overflow:auto}.arv-footer{border-top:1px solid var(--arv-border);background:var(--arv-bg2)}.arv-footer-inner{padding:16px;display:flex;flex-direction:column;gap:14px}.arv-section-title{margin:0 0 8px;font-size:13px;font-weight:700;color:var(--arv-primary);text-transform:uppercase;letter-spacing:.5px}.arv-routing-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}.arv-routing-mode{display:flex;gap:12px}.arv-radio{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--arv-text);cursor:pointer}.arv-label{font-size:12px;color:var(--arv-text-muted);display:block;margin-bottom:4px}.arv-select{width:100%;padding:8px 10px;border:1px solid var(--arv-border);border-radius:var(--arv-radius);background:var(--arv-bg);color:var(--arv-text);font-size:13px}.arv-input{padding:7px 10px;border:1px solid var(--arv-border);border-radius:var(--arv-radius);background:var(--arv-bg);color:var(--arv-text);font-size:13px}.arv-input-sm{width:100%;margin-top:4px}.arv-steps{display:flex;flex-direction:column;gap:10px}.arv-step{background:var(--arv-bg);border:1px solid var(--arv-border);border-radius:var(--arv-radius);padding:10px}.arv-step-header{display:flex;align-items:center;gap:8px;margin-bottom:8px}.arv-step-num{font-size:12px;font-weight:700;color:var(--arv-primary);min-width:44px}.arv-approver-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}.arv-tag{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;background:#90caf91f;border:1px solid rgba(144,202,249,.3);border-radius:12px;font-size:12px;color:var(--arv-primary)}.arv-tag-remove{background:none;border:none;cursor:pointer;color:var(--arv-text-muted);font-size:11px;padding:0 2px;line-height:1}.arv-tag-remove:hover{color:var(--arv-danger)}.arv-user-search{position:relative}.arv-search-results{position:absolute;left:0;right:0;z-index:100;background:var(--arv-bg2);border:1px solid var(--arv-border);border-radius:var(--arv-radius);max-height:150px;overflow-y:auto}.arv-search-item{padding:8px 12px;cursor:pointer;font-size:13px;color:var(--arv-text)}.arv-search-item:hover{background:var(--arv-bg)}.arv-hint{font-size:12px;color:var(--arv-text-muted);margin:0 0 8px}.arv-btn-icon{background:none;border:none;cursor:pointer;padding:2px;border-radius:4px;display:inline-flex;align-items:center;justify-content:center}.arv-btn-danger{color:var(--arv-danger)}.arv-btn-danger:hover{background:#ef53501a}.arv-actions{display:flex;justify-content:flex-end;gap:10px}.arv-btn{padding:9px 18px;border-radius:var(--arv-radius);font-size:13px;font-weight:600;cursor:pointer;border:none;transition:background .15s}.arv-btn-primary{background:var(--arv-primary);color:#fff}.arv-btn-primary:hover:not(:disabled){background:var(--arv-primary-hover)}.arv-btn-primary:disabled{opacity:.6;cursor:not-allowed}.arv-btn-secondary{background:transparent;border:1px solid var(--arv-border);color:var(--arv-text-muted)}.arv-btn-secondary:hover{color:var(--arv-text);border-color:var(--arv-text-muted)}.arv-btn-outline{background:transparent;border:1px dashed var(--arv-border);color:var(--arv-text-muted);font-size:12px;padding:6px 12px}.arv-btn-outline:hover{border-color:var(--arv-primary);color:var(--arv-primary)}.arv-spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:arv-spin .6s linear infinite;margin-right:6px}@keyframes arv-spin{to{transform:rotate(360deg)}}.arv-error{padding:8px 12px;background:#ef53501a;border:1px solid rgba(239,83,80,.3);border-radius:var(--arv-radius);font-size:13px;color:var(--arv-danger)}.arv-success{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px;gap:12px;text-align:center}.arv-success p{color:var(--arv-success);font-size:15px;font-weight:600;margin:0}.arv-references{border-top:1px solid var(--arv-border);padding-top:12px}.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 10px}.arv-select-sm{font-size:12px;padding:6px 8px}.arv-step-fixed{padding:6px 10px;font-size:12px;color:var(--arv-text-muted)}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MaArvContainerComponent, decorators: [{
             type: Component,
@@ -2462,7 +2602,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
           <div class="arv-routing">
             <div class="arv-routing-header">
               <h4 class="arv-section-title">Approval Routing</h4>
-              <div class="arv-routing-mode">
+              <!-- Show routing toggle only when templateId is NOT locked -->
+              <div *ngIf="!templateId" class="arv-routing-mode">
                 <label class="arv-radio">
                   <input type="radio" name="routingMode" value="template" [checked]="routingMode === 'template'" (change)="routingMode = 'template'"> Use Template
                 </label>
@@ -2472,15 +2613,62 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
               </div>
             </div>
 
-            <!-- Template selector -->
-            <div *ngIf="routingMode === 'template'" class="arv-template-select">
+            <!-- Locked template: show name only, no selector -->
+            <div *ngIf="templateId && routingMode === 'template'" class="arv-template-select">
+              <div *ngIf="loadingTemplate" class="arv-template-loading">Loading template...</div>
+              <div *ngIf="selectedTemplate && !loadingTemplate" class="arv-locked-template">
+                <span class="arv-locked-label">Template</span>
+                <span class="arv-locked-name">{{ selectedTemplate.name }}</span>
+              </div>
+            </div>
+
+            <!-- Free template selector (no locked templateId) -->
+            <div *ngIf="!templateId && routingMode === 'template'" class="arv-template-select">
               <label class="arv-label">Select Template</label>
               <select class="arv-select" (change)="onTemplateChange($event)">
                 <option value="">-- Select a template --</option>
-                <option *ngFor="let t of templates" [value]="t.id">{{ t.name }}</option>
+                <option *ngFor="let t of templates" [value]="t.id" [selected]="t.id === selectedTemplateId">{{ t.name }}</option>
               </select>
             </div>
 
+            <!-- Step pickers (shared for both locked and free template) -->
+            <div *ngIf="routingMode === 'template'" class="arv-template-select">
+              <div *ngIf="!loadingTemplate && selectedTemplate" class="arv-template-steps">
+                <div class="arv-step-card" *ngFor="let s of selectedTemplate.steps; let i = index">
+                  <div class="arv-step-card-header">
+                    <span class="arv-step-preview-num">Step {{ s.stepOrder }}</span>
+                    <span class="arv-step-preview-name">{{ s.stepName }}</span>
+                    <span *ngIf="s.roles && s.roles.length > 0" class="arv-step-role-badge">
+                      {{ s.roles[0].positionLevel }}{{ s.roles[0].orgName ? ' · ' + s.roles[0].orgName : '' }}
+                    </span>
+                  </div>
+                  <!-- Role-based step: show approver picker -->
+                  <div *ngIf="s.roles && s.roles.length > 0" class="arv-step-picker">
+                    <div *ngIf="stepLoadingCandidates[i]" class="arv-template-loading">Loading candidates...</div>
+                    <select *ngIf="!stepLoadingCandidates[i]" class="arv-select arv-select-sm"
+                      (change)="onStepUserChange(i, $event)">
+                      <option value="">-- Select approver --</option>
+                      <option *ngFor="let u of stepCandidates[i]" [value]="u.userId"
+                        [selected]="u.userId === stepSelectedUsers[i]">
+                        {{ u.fullName || u.userId }}{{ u.department ? ' · ' + u.department : '' }}{{ u.position ? ' (' + u.position + ')' : '' }}
+                      </option>
+                    </select>
+                    <div *ngIf="!stepLoadingCandidates[i] && stepCandidates[i]?.length === 0" class="arv-template-loading">
+                      No candidates found for this role.
+                    </div>
+                  </div>
+                  <!-- Fixed-user step -->
+                  <div *ngIf="!s.roles || s.roles.length === 0" class="arv-step-fixed">
+                    {{ s.assigneeUserIds.length }} pre-configured approver(s)
+                  </div>
+                </div>
+                <div *ngIf="selectedTemplate.referenceUserIds.length > 0" class="arv-step-preview arv-step-preview-cc">
+                  <span class="arv-step-preview-num">CC</span>
+                  <span class="arv-step-preview-name">{{ selectedTemplate.referenceUserIds.length }} reference user(s) from template</span>
+                </div>
+              </div>
+            </div>
+
             <!-- Ad-hoc steps -->
             <div *ngIf="routingMode === 'adhoc'" class="arv-steps">
               <div class="arv-step" *ngFor="let step of adHocSteps; let i = index">
@@ -2562,7 +2750,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
         <p>Submitted for approval successfully.</p>
       </div>
     </div>
-  `, styles: [":host{display:block;--arv-primary: #90caf9;--arv-primary-hover: #64b5f6;--arv-success: #66bb6a;--arv-danger: #ef5350;--arv-text: #e0e0e0;--arv-text-muted: #9e9e9e;--arv-bg: #1e1e2e;--arv-bg2: #27273a;--arv-border: #383850;--arv-radius: 8px}:host(.theme-light){--arv-primary: #1565c0;--arv-primary-hover: #0d47a1;--arv-success: #2e7d32;--arv-danger: #c62828;--arv-text: #212121;--arv-text-muted: #616161;--arv-bg: #ffffff;--arv-bg2: #f5f5f5;--arv-border: #e0e0e0}.arv-container{display:flex;flex-direction:column;height:100%}.arv-content-body{flex:1;overflow:auto}.arv-footer{border-top:1px solid var(--arv-border);background:var(--arv-bg2)}.arv-footer-inner{padding:16px;display:flex;flex-direction:column;gap:14px}.arv-section-title{margin:0 0 8px;font-size:13px;font-weight:700;color:var(--arv-primary);text-transform:uppercase;letter-spacing:.5px}.arv-routing-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}.arv-routing-mode{display:flex;gap:12px}.arv-radio{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--arv-text);cursor:pointer}.arv-label{font-size:12px;color:var(--arv-text-muted);display:block;margin-bottom:4px}.arv-select{width:100%;padding:8px 10px;border:1px solid var(--arv-border);border-radius:var(--arv-radius);background:var(--arv-bg);color:var(--arv-text);font-size:13px}.arv-input{padding:7px 10px;border:1px solid var(--arv-border);border-radius:var(--arv-radius);background:var(--arv-bg);color:var(--arv-text);font-size:13px}.arv-input-sm{width:100%;margin-top:4px}.arv-steps{display:flex;flex-direction:column;gap:10px}.arv-step{background:var(--arv-bg);border:1px solid var(--arv-border);border-radius:var(--arv-radius);padding:10px}.arv-step-header{display:flex;align-items:center;gap:8px;margin-bottom:8px}.arv-step-num{font-size:12px;font-weight:700;color:var(--arv-primary);min-width:44px}.arv-approver-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}.arv-tag{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;background:#90caf91f;border:1px solid rgba(144,202,249,.3);border-radius:12px;font-size:12px;color:var(--arv-primary)}.arv-tag-remove{background:none;border:none;cursor:pointer;color:var(--arv-text-muted);font-size:11px;padding:0 2px;line-height:1}.arv-tag-remove:hover{color:var(--arv-danger)}.arv-user-search{position:relative}.arv-search-results{position:absolute;left:0;right:0;z-index:100;background:var(--arv-bg2);border:1px solid var(--arv-border);border-radius:var(--arv-radius);max-height:150px;overflow-y:auto}.arv-search-item{padding:8px 12px;cursor:pointer;font-size:13px;color:var(--arv-text)}.arv-search-item:hover{background:var(--arv-bg)}.arv-hint{font-size:12px;color:var(--arv-text-muted);margin:0 0 8px}.arv-btn-icon{background:none;border:none;cursor:pointer;padding:2px;border-radius:4px;display:inline-flex;align-items:center;justify-content:center}.arv-btn-danger{color:var(--arv-danger)}.arv-btn-danger:hover{background:#ef53501a}.arv-actions{display:flex;justify-content:flex-end;gap:10px}.arv-btn{padding:9px 18px;border-radius:var(--arv-radius);font-size:13px;font-weight:600;cursor:pointer;border:none;transition:background .15s}.arv-btn-primary{background:var(--arv-primary);color:#fff}.arv-btn-primary:hover:not(:disabled){background:var(--arv-primary-hover)}.arv-btn-primary:disabled{opacity:.6;cursor:not-allowed}.arv-btn-secondary{background:transparent;border:1px solid var(--arv-border);color:var(--arv-text-muted)}.arv-btn-secondary:hover{color:var(--arv-text);border-color:var(--arv-text-muted)}.arv-btn-outline{background:transparent;border:1px dashed var(--arv-border);color:var(--arv-text-muted);font-size:12px;padding:6px 12px}.arv-btn-outline:hover{border-color:var(--arv-primary);color:var(--arv-primary)}.arv-spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:arv-spin .6s linear infinite;margin-right:6px}@keyframes arv-spin{to{transform:rotate(360deg)}}.arv-error{padding:8px 12px;background:#ef53501a;border:1px solid rgba(239,83,80,.3);border-radius:var(--arv-radius);font-size:13px;color:var(--arv-danger)}.arv-success{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px;gap:12px;text-align:center}.arv-success p{color:var(--arv-success);font-size:15px;font-weight:600;margin:0}.arv-references{border-top:1px solid var(--arv-border);padding-top:12px}\n"] }]
+  `, styles: [":host{display:block;--arv-primary: #90caf9;--arv-primary-hover: #64b5f6;--arv-success: #66bb6a;--arv-danger: #ef5350;--arv-text: #e0e0e0;--arv-text-muted: #9e9e9e;--arv-bg: #1e1e2e;--arv-bg2: #27273a;--arv-border: #383850;--arv-radius: 8px}:host(.theme-light){--arv-primary: #1565c0;--arv-primary-hover: #0d47a1;--arv-success: #2e7d32;--arv-danger: #c62828;--arv-text: #212121;--arv-text-muted: #616161;--arv-bg: #ffffff;--arv-bg2: #f5f5f5;--arv-border: #e0e0e0}.arv-container{display:flex;flex-direction:column;height:100%}.arv-content-body{flex:1;overflow:auto}.arv-footer{border-top:1px solid var(--arv-border);background:var(--arv-bg2)}.arv-footer-inner{padding:16px;display:flex;flex-direction:column;gap:14px}.arv-section-title{margin:0 0 8px;font-size:13px;font-weight:700;color:var(--arv-primary);text-transform:uppercase;letter-spacing:.5px}.arv-routing-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}.arv-routing-mode{display:flex;gap:12px}.arv-radio{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--arv-text);cursor:pointer}.arv-label{font-size:12px;color:var(--arv-text-muted);display:block;margin-bottom:4px}.arv-select{width:100%;padding:8px 10px;border:1px solid var(--arv-border);border-radius:var(--arv-radius);background:var(--arv-bg);color:var(--arv-text);font-size:13px}.arv-input{padding:7px 10px;border:1px solid var(--arv-border);border-radius:var(--arv-radius);background:var(--arv-bg);color:var(--arv-text);font-size:13px}.arv-input-sm{width:100%;margin-top:4px}.arv-steps{display:flex;flex-direction:column;gap:10px}.arv-step{background:var(--arv-bg);border:1px solid var(--arv-border);border-radius:var(--arv-radius);padding:10px}.arv-step-header{display:flex;align-items:center;gap:8px;margin-bottom:8px}.arv-step-num{font-size:12px;font-weight:700;color:var(--arv-primary);min-width:44px}.arv-approver-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}.arv-tag{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;background:#90caf91f;border:1px solid rgba(144,202,249,.3);border-radius:12px;font-size:12px;color:var(--arv-primary)}.arv-tag-remove{background:none;border:none;cursor:pointer;color:var(--arv-text-muted);font-size:11px;padding:0 2px;line-height:1}.arv-tag-remove:hover{color:var(--arv-danger)}.arv-user-search{position:relative}.arv-search-results{position:absolute;left:0;right:0;z-index:100;background:var(--arv-bg2);border:1px solid var(--arv-border);border-radius:var(--arv-radius);max-height:150px;overflow-y:auto}.arv-search-item{padding:8px 12px;cursor:pointer;font-size:13px;color:var(--arv-text)}.arv-search-item:hover{background:var(--arv-bg)}.arv-hint{font-size:12px;color:var(--arv-text-muted);margin:0 0 8px}.arv-btn-icon{background:none;border:none;cursor:pointer;padding:2px;border-radius:4px;display:inline-flex;align-items:center;justify-content:center}.arv-btn-danger{color:var(--arv-danger)}.arv-btn-danger:hover{background:#ef53501a}.arv-actions{display:flex;justify-content:flex-end;gap:10px}.arv-btn{padding:9px 18px;border-radius:var(--arv-radius);font-size:13px;font-weight:600;cursor:pointer;border:none;transition:background .15s}.arv-btn-primary{background:var(--arv-primary);color:#fff}.arv-btn-primary:hover:not(:disabled){background:var(--arv-primary-hover)}.arv-btn-primary:disabled{opacity:.6;cursor:not-allowed}.arv-btn-secondary{background:transparent;border:1px solid var(--arv-border);color:var(--arv-text-muted)}.arv-btn-secondary:hover{color:var(--arv-text);border-color:var(--arv-text-muted)}.arv-btn-outline{background:transparent;border:1px dashed var(--arv-border);color:var(--arv-text-muted);font-size:12px;padding:6px 12px}.arv-btn-outline:hover{border-color:var(--arv-primary);color:var(--arv-primary)}.arv-spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:arv-spin .6s linear infinite;margin-right:6px}@keyframes arv-spin{to{transform:rotate(360deg)}}.arv-error{padding:8px 12px;background:#ef53501a;border:1px solid rgba(239,83,80,.3);border-radius:var(--arv-radius);font-size:13px;color:var(--arv-danger)}.arv-success{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px;gap:12px;text-align:center}.arv-success p{color:var(--arv-success);font-size:15px;font-weight:600;margin:0}.arv-references{border-top:1px solid var(--arv-border);padding-top:12px}.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 10px}.arv-select-sm{font-size:12px;padding:6px 8px}.arv-step-fixed{padding:6px 10px;font-size:12px;color:var(--arv-text-muted)}\n"] }]
         }], propDecorators: { title: [{
                 type: Input
             }], description: [{
@@ -2577,13 +2765,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 type: Input
             }], approvalSubmitted: [{
                 type: Output
-            }], approvalSubmiting: [{
+            }], approvalSubmitting: [{
                 type: Output
             }], cancelled: [{
                 type: Output
             }], contentBody: [{
                 type: ViewChild,
                 args: ['contentBody', { static: true }]
+            }], themeClass: [{
+                type: HostBinding,
+                args: ['class']
             }] } });
 
 /**