@epistola.app/valtimo-plugin 0.6.0 → 0.8.0

package/fesm2022/epistola.app-valtimo-plugin.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, Output, Input, Component, ChangeDetectionStrategy, NgModule, ENVIRONMENT_INITIALIZER, inject, Injector } from '@angular/core';
+import { Injectable, EventEmitter, Output, Input, Component, ChangeDetectionStrategy, inject, NgModule, ENVIRONMENT_INITIALIZER, Injector } from '@angular/core';
 import * as i1 from '@angular/common/http';
-import { HttpHeaders, HttpClientModule } from '@angular/common/http';
+import { HttpHeaders, HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
 import * as i2 from '@valtimo/shared';
 import { ROLE_ADMIN } from '@valtimo/shared';
 import { of, BehaviorSubject, combineLatest, take, Subject, debounceTime, takeUntil, merge } from 'rxjs';
@@ -12,16 +12,16 @@ import { CommonModule } from '@angular/common';
 import * as i2$1 from '@valtimo/plugin';
 import { PluginTranslatePipeModule } from '@valtimo/plugin';
 import { startWith, delay, shareReplay, take as take$1, takeUntil as takeUntil$1, filter, map, distinctUntilChanged, tap, switchMap, catchError, debounceTime as debounceTime$1 } from 'rxjs/operators';
-import * as i4 from '@angular/forms';
+import * as i2$2 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as _jsonata from 'jsonata';
-import * as i2$2 from '@valtimo/process-link';
-import * as i7 from '@formio/angular';
+import * as i2$3 from '@valtimo/process-link';
+import * as i2$4 from '@angular/platform-browser';
+import * as i5 from '@formio/angular';
 import { FormioModule } from '@formio/angular';
-import * as i4$1 from '@angular/platform-browser';
-import * as i2$3 from '@angular/router';
-import { RouterModule } from '@angular/router';
-import * as i5 from 'carbon-components-angular/tabs';
+import * as i2$5 from '@angular/router';
+import { RouterModule, Router } from '@angular/router';
+import * as i5$1 from 'carbon-components-angular/tabs';
 import { TabsModule } from 'carbon-components-angular/tabs';
 import * as i6 from 'carbon-components-angular/tag';
 import { TagModule } from 'carbon-components-angular/tag';
@@ -77,6 +77,23 @@ class EpistolaAdminService {
     getPendingJobs() {
         return this.http.get(`${this.apiEndpoint}/pending`);
     }
+    /**
+     * Manually reconcile a stuck Epistola catch event by querying Epistola for the
+     * job's current status and re-running message correlation. Returns 200 with
+     * `correlated=true` on success, 409 with `correlated=false` when the job is
+     * still in flight, or surfaces a validation error when the execution can't be
+     * recovered (no subscription, missing variable, unknown tenant).
+     */
+    reconcilePending(executionId) {
+        return this.http.post(`${this.apiEndpoint}/pending/${encodeURIComponent(executionId)}/reconcile`, null);
+    }
+    /**
+     * Get the latest BPMN race-safety validation violations across deployed
+     * process definitions. Empty list = healthy.
+     */
+    getValidationViolations() {
+        return this.http.get(`${this.apiEndpoint}/validations`);
+    }
     /**
      * Export a single process link as a .process-link.json file.
      */
@@ -220,9 +237,11 @@ class EpistolaPluginService {
     }
     /**
      * Get a dynamically generated Formio form for retrying a failed document generation.
+     *
+     * @param taskId Operaton user task id (required — backend authorizes via OperatonTask:VIEW)
      */
-    getRetryForm(processInstanceId, documentId, sourceActivityId) {
-        const params = { processInstanceId };
+    getRetryForm(taskId, processInstanceId, documentId, sourceActivityId) {
+        const params = { taskId, processInstanceId };
         if (documentId) {
             params['documentId'] = documentId;
         }
@@ -238,24 +257,43 @@ class EpistolaPluginService {
         return this.http.get(`${this.apiEndpoint}/expression-functions`);
     }
     /**
-     * Discover all previewable document sources for a given Valtimo document.
+     * Validate the JSONata syntax of action-config expressions before save.
+     * Parse-only; runtime errors (missing variables, type mismatches) are not detected.
+     */
+    validateJsonata(request) {
+        return this.http.post(`${this.apiEndpoint}/validate-jsonata`, request);
+    }
+    /**
+     * Preview a document by dry-running the {@code generate-document} process
+     * link. Returns the rendered PDF as a {@link Blob}.
+     *
+     * <p>The {@code X-Skip-Interceptor: 422} header tells the global Valtimo
+     * error interceptor to skip its toast for validation failures so the
+     * caller can render an inline error message.
      */
-    getPreviewSources(documentId) {
-        return this.http.get(`${this.apiEndpoint}/preview-sources`, {
-            params: { documentId },
+    previewToBlob(request) {
+        return this.http.post(`${this.apiEndpoint}/preview`, request, {
+            responseType: 'blob',
+            headers: new HttpHeaders().set('X-Skip-Interceptor', '422'),
         });
     }
     /**
-     * Preview a document by dry-running the generate-document process link.
-     * Returns the resolved data as a mock preview (Phase 1).
+     * Stream an already-generated Epistola PDF for the caller's task. The
+     * backend resolves the Epistola document id and tenant id from the named
+     * process variables on the task's process instance, so the wire never
+     * carries a raw PDF id.
      */
-    previewDocument(documentId, processDefinitionKey, sourceActivityId, processInstanceId, overrides) {
-        return this.http.post(`${this.apiEndpoint}/preview`, {
-            documentId,
-            processDefinitionKey,
-            sourceActivityId,
-            processInstanceId: processInstanceId || null,
-            overrides: overrides || null,
+    downloadDocumentBlob(request) {
+        const params = new URLSearchParams({
+            taskId: request.taskId,
+            caseDocumentId: request.caseDocumentId,
+            documentVariable: request.documentVariable,
+            tenantIdVariable: request.tenantIdVariable,
+            filename: request.filename,
+            disposition: request.disposition,
+        });
+        return this.http.get(`${this.apiEndpoint}/documents/download?${params.toString()}`, {
+            responseType: 'blob',
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaPluginService, deps: [{ token: i1.HttpClient }, { token: i2.ConfigService }], target: i0.ɵɵFactoryTarget.Injectable });
@@ -265,6 +303,101 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             type: Injectable
         }], ctorParameters: () => [{ type: i1.HttpClient }, { type: i2.ConfigService }] });
 
+/**
+ * Holds the currently-open Operaton user task instance id so that custom
+ * Formio components rendered inside a Valtimo task form (preview, download,
+ * retry-form) can include it in backend requests for PBAC.
+ *
+ * Populated by {@link EpistolaTaskContextInterceptor}, which sniffs Valtimo's
+ * canonical "load process link for task" GET (`/api/v2/process-link/task/{taskId}`)
+ * — the request always fires when a task opens, before the form renders.
+ *
+ * <p><b>Why this exists:</b> Valtimo 13.21 does not expose the active task
+ * instance id through any service that custom Formio components can inject
+ * (`FormIoStateService` carries documentId and processInstanceId only;
+ * `TaskDetailContentComponent.taskInstanceId$` is private to that component
+ * and Formio elements live in their own injector tree). This service is a
+ * workaround until upstream exposes `taskInstanceId` via `FormIoStateService`.
+ */
+class EpistolaTaskContextService {
+    _taskInstanceId$ = new BehaviorSubject(null);
+    taskInstanceId$ = this._taskInstanceId$.asObservable();
+    get taskInstanceId() {
+        return this._taskInstanceId$.value;
+    }
+    setTaskInstanceId(id) {
+        this._taskInstanceId$.next(id);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaTaskContextService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaTaskContextService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaTaskContextService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * Pure helpers for {@link EpistolaTaskContextInterceptor}, extracted so they
+ * can be unit-tested without pulling in {@code @angular/core} (which ts-jest
+ * cannot transform without {@code jest-preset-angular}).
+ */
+/**
+ * Pattern Valtimo uses for the canonical task-open call:
+ * {@code GET /api/v2/process-link/task/{taskInstanceId}}.
+ *
+ * Captures the {@code taskInstanceId} (UUID v4-style 36-character hyphenated
+ * hex string). Anchored at the end of the URL or at a query-string delimiter
+ * so we don't accidentally match a longer trailing segment.
+ */
+const TASK_PROCESS_LINK_PATTERN = /\/api\/v2\/process-link\/task\/([0-9a-fA-F-]{36})(?:\?|$)/;
+/**
+ * Returns the captured {@code taskInstanceId} from a Valtimo task-open
+ * request URL, or {@code null} if the request does not match.
+ */
+function extractTaskInstanceIdFromUrl(method, url) {
+    if (method !== 'GET')
+        return null;
+    const match = TASK_PROCESS_LINK_PATTERN.exec(url);
+    return match ? match[1] : null;
+}
+
+/**
+ * Sniffs Valtimo's task-open signal and pushes the active taskInstanceId into
+ * {@link EpistolaTaskContextService}. The signal is the canonical
+ * {@code GET /api/v2/process-link/task/{taskId}} call that
+ * {@code TaskDetailContentComponent.loadTaskDetails(...)} fires unconditionally
+ * before any task form is rendered (see @valtimo/task internals).
+ *
+ * <p>This interceptor does <b>not</b> modify the outgoing request. It only
+ * captures the taskId from the URL.
+ *
+ * <p>Workaround for Valtimo 13.21 not exposing taskInstanceId through any
+ * injectable service. Remove once upstream adds e.g.
+ * {@code FormIoStateService.setTaskInstanceId(...)}.
+ *
+ * <p>The actual URL-matching logic lives in
+ * {@link extractTaskInstanceIdFromUrl} so it can be unit-tested without an
+ * Angular harness.
+ */
+class EpistolaTaskContextInterceptor {
+    taskContext;
+    constructor(taskContext) {
+        this.taskContext = taskContext;
+    }
+    intercept(request, next) {
+        const taskId = extractTaskInstanceIdFromUrl(request.method, request.url);
+        if (taskId !== null && taskId !== this.taskContext.taskInstanceId) {
+            this.taskContext.setTaskInstanceId(taskId);
+        }
+        return next.handle(request);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaTaskContextInterceptor, deps: [{ token: EpistolaTaskContextService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaTaskContextInterceptor });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaTaskContextInterceptor, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: EpistolaTaskContextService }] });
+
 class EpistolaConfigurationComponent {
     save$;
     disabled$;
@@ -796,7 +929,7 @@ class BuilderFieldComponent {
         ></epistola-builder-field>
       </div>
     </div>
-  `, isInline: true, styles: [".builder-field{margin-bottom:4px}.builder-field__name{margin-bottom:2px}.builder-field__name--clickable{cursor:pointer;-webkit-user-select:none;user-select:none}.builder-field__name--clickable:hover{color:#0f62fe}.builder-field__chevron{font-size:.7em;margin-right:4px}.builder-field__label{font-weight:500;font-size:.9em}.builder-field__required{color:#da1e28;margin-left:2px}.builder-field__type{color:#8d8d8d;font-size:.8em;margin-left:4px}.builder-field__value{display:flex;align-items:center;gap:4px}.builder-field__input{flex:1;padding:6px 8px;border:1px solid #e0e0e0;border-radius:4px;font-size:.85em;font-family:IBM Plex Mono,monospace}.builder-field__input:focus{outline:2px solid #0f62fe;border-color:#0f62fe}.builder-field__input--raw{background:#f4f4f4}.builder-field__mode-toggle{width:28px;height:28px;border:1px solid #e0e0e0;border-radius:4px;background:#fff;cursor:pointer;font-family:monospace;font-size:.8em;display:flex;align-items:center;justify-content:center}.builder-field__mode-toggle:hover{background:#f4f4f4}.builder-field__children{border-left:2px solid #e0e0e0;padding-left:12px;margin-top:4px}\n"], dependencies: [{ kind: "component", type: BuilderFieldComponent, selector: "epistola-builder-field", inputs: ["field", "path", "suggestions", "disabled", "collapsed", "required", "collapsedPaths"], outputs: ["valueChange", "modeToggle", "collapseToggle"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+  `, isInline: true, styles: [".builder-field{margin-bottom:4px}.builder-field__name{margin-bottom:2px}.builder-field__name--clickable{cursor:pointer;-webkit-user-select:none;user-select:none}.builder-field__name--clickable:hover{color:#0f62fe}.builder-field__chevron{font-size:.7em;margin-right:4px}.builder-field__label{font-weight:500;font-size:.9em}.builder-field__required{color:#da1e28;margin-left:2px}.builder-field__type{color:#8d8d8d;font-size:.8em;margin-left:4px}.builder-field__value{display:flex;align-items:center;gap:4px}.builder-field__input{flex:1;padding:6px 8px;border:1px solid #e0e0e0;border-radius:4px;font-size:.85em;font-family:IBM Plex Mono,monospace}.builder-field__input:focus{outline:2px solid #0f62fe;border-color:#0f62fe}.builder-field__input--raw{background:#f4f4f4}.builder-field__mode-toggle{width:28px;height:28px;border:1px solid #e0e0e0;border-radius:4px;background:#fff;cursor:pointer;font-family:monospace;font-size:.8em;display:flex;align-items:center;justify-content:center}.builder-field__mode-toggle:hover{background:#f4f4f4}.builder-field__children{border-left:2px solid #e0e0e0;padding-left:12px;margin-top:4px}\n"], dependencies: [{ kind: "component", type: BuilderFieldComponent, selector: "epistola-builder-field", inputs: ["field", "path", "suggestions", "disabled", "collapsed", "required", "collapsedPaths"], outputs: ["valueChange", "modeToggle", "collapseToggle"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: BuilderFieldComponent, decorators: [{
             type: Component,
@@ -1379,7 +1512,7 @@ class MappingPreviewComponent {
         <strong>{{ missingRequired.join(', ') }}</strong>
       </div>
     </div>
-  `, isInline: true, styles: [".preview{border:1px solid #e0e0e0;border-radius:4px;margin-top:16px;overflow:hidden}.preview__header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:#f4f4f4;border-bottom:1px solid #e0e0e0}.preview__title{font-weight:600;font-size:.85em}.preview__controls{display:flex;gap:4px}.preview__doc-input{padding:4px 8px;border:1px solid #e0e0e0;border-radius:4px;font-size:.8em;width:220px;font-family:monospace}.preview__run-btn{padding:4px 10px;border:1px solid #0f62fe;border-radius:4px;background:#0f62fe;color:#fff;cursor:pointer;font-size:.8em}.preview__run-btn:disabled{opacity:.4;cursor:not-allowed}.preview__panels{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#e0e0e0}.preview__panel{background:#fff;padding:8px 12px;min-height:80px}.preview__panel-label{font-size:.75em;color:#6f6f6f;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}.preview__code{font-family:IBM Plex Mono,monospace;font-size:.8em;line-height:1.4;margin:0;white-space:pre-wrap;word-break:break-word}.preview__loading{color:#8d8d8d}.preview__error{color:#da1e28;font-size:.85em}.preview__placeholder{color:#8d8d8d;font-size:.85em;font-style:italic}.preview__warnings{padding:8px 12px;background:#fff8e1;border-top:1px solid #e0e0e0;font-size:.85em;color:#663c00}.preview__warning-icon{margin-right:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PluginTranslatePipeModule }, { kind: "pipe", type: i2$1.PluginTranslatePipe, name: "pluginTranslate" }] });
+  `, isInline: true, styles: [".preview{border:1px solid #e0e0e0;border-radius:4px;margin-top:16px;overflow:hidden}.preview__header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:#f4f4f4;border-bottom:1px solid #e0e0e0}.preview__title{font-weight:600;font-size:.85em}.preview__controls{display:flex;gap:4px}.preview__doc-input{padding:4px 8px;border:1px solid #e0e0e0;border-radius:4px;font-size:.8em;width:220px;font-family:monospace}.preview__run-btn{padding:4px 10px;border:1px solid #0f62fe;border-radius:4px;background:#0f62fe;color:#fff;cursor:pointer;font-size:.8em}.preview__run-btn:disabled{opacity:.4;cursor:not-allowed}.preview__panels{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#e0e0e0}.preview__panel{background:#fff;padding:8px 12px;min-height:80px}.preview__panel-label{font-size:.75em;color:#6f6f6f;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}.preview__code{font-family:IBM Plex Mono,monospace;font-size:.8em;line-height:1.4;margin:0;white-space:pre-wrap;word-break:break-word}.preview__loading{color:#8d8d8d}.preview__error{color:#da1e28;font-size:.85em}.preview__placeholder{color:#8d8d8d;font-size:.85em;font-style:italic}.preview__warnings{padding:8px 12px;background:#fff8e1;border-top:1px solid #e0e0e0;font-size:.85em;color:#663c00}.preview__warning-icon{margin-right:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PluginTranslatePipeModule }, { kind: "pipe", type: i2$1.PluginTranslatePipe, name: "pluginTranslate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: MappingPreviewComponent, decorators: [{
             type: Component,
@@ -1450,6 +1583,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 type: Input
             }] } });
 
+const FORM_REF_PREFIX$1 = 'form:';
+/**
+ * Detect if a string value is a JSONata expression (vs a plain literal).
+ * Checks for characters that indicate JSONata operators: $, &, (, {, ?, [
+ */
+function isExpression(value) {
+    return /[$&({?\[]/.test(value);
+}
+/**
+ * Expand dot-notation keys into nested objects.
+ * e.g. { "beslissing.tekst": "value" } -> { beslissing: { tekst: "value" } }
+ */
+function expandDotNotation(flat) {
+    const result = {};
+    for (const [key, value] of Object.entries(flat)) {
+        const parts = key.split('.');
+        let current = result;
+        for (let i = 0; i < parts.length - 1; i++) {
+            if (!current[parts[i]] || typeof current[parts[i]] !== 'object') {
+                current[parts[i]] = {};
+            }
+            current = current[parts[i]];
+        }
+        current[parts[parts.length - 1]] = value;
+    }
+    return result;
+}
+/**
+ * Given an override mapping (scope -> { inputPath -> "form:<componentKey>" })
+ * and form data, produce the inputOverrides object for the backend.
+ * The "form:" prefix identifies form field references; the remainder is the Formio component key.
+ */
+function computeInputOverrides(mapping, formData) {
+    const result = {};
+    for (const [scope, fields] of Object.entries(mapping)) {
+        if (scope !== 'doc' && scope !== 'pv')
+            continue;
+        const flatOverrides = {};
+        for (const [inputPath, ref] of Object.entries(fields)) {
+            const formFieldKey = String(ref).startsWith(FORM_REF_PREFIX$1)
+                ? String(ref).substring(FORM_REF_PREFIX$1.length)
+                : String(ref);
+            const value = formData[formFieldKey];
+            if (value !== undefined) {
+                flatOverrides[inputPath] = value;
+            }
+        }
+        if (Object.keys(flatOverrides).length > 0) {
+            result[scope] = expandDotNotation(flatOverrides);
+        }
+    }
+    return result;
+}
+
 class GenerateDocumentConfigurationComponent {
     epistolaPluginService;
     processLinkStateService;
@@ -1480,6 +1667,10 @@ class GenerateDocumentConfigurationComponent {
     selectedTemplateId$ = new BehaviorSubject('');
     selectedVariantId$ = new BehaviorSubject('');
     variantSelectionMode = 'explicit';
+    variantIdExpressionMode = false;
+    variantIdExpression = '';
+    filenameExpressionMode = false;
+    filenameExpression = '';
     variantAttributeEntries = [];
     availableAttributeKeys = [];
     caseDefinitionKey = null;
@@ -1488,6 +1679,7 @@ class GenerateDocumentConfigurationComponent {
     variableSuggestions = null;
     requiredFieldsStatus = { mapped: 0, total: 0 };
     prefillDataMapping = {};
+    validationErrors$ = new BehaviorSubject([]);
     destroy$ = new Subject();
     saveSubscription;
     formValue$ = new BehaviorSubject(null);
@@ -1567,6 +1759,12 @@ class GenerateDocumentConfigurationComponent {
     onAttributeEntryChange() {
         this.revalidate();
     }
+    onVariantIdExpressionChange() {
+        this.revalidate();
+    }
+    onFilenameExpressionChange() {
+        this.revalidate();
+    }
     onKeySelected(entry, value) {
         if (value === '__custom__') {
             entry._customKey = true;
@@ -1717,6 +1915,7 @@ class GenerateDocumentConfigurationComponent {
                         key: e.key,
                         value: e.value,
                         required: e.required !== false,
+                        _expressionMode: isExpression(e.value),
                     }));
                 }
                 else {
@@ -1725,7 +1924,18 @@ class GenerateDocumentConfigurationComponent {
             }
             else if (config.variantId) {
                 this.variantSelectionMode = 'explicit';
-                this.selectedVariantId$.next(config.variantId);
+                if (isExpression(config.variantId)) {
+                    this.variantIdExpressionMode = true;
+                    this.variantIdExpression = config.variantId;
+                }
+                else {
+                    this.selectedVariantId$.next(config.variantId);
+                }
+            }
+            // Detect expression mode for filename
+            if (config.filename && isExpression(config.filename)) {
+                this.filenameExpressionMode = true;
+                this.filenameExpression = config.filename;
             }
             // Apply dataMapping prefill (JSONata expression string)
             if (config.dataMapping) {
@@ -1796,25 +2006,66 @@ class GenerateDocumentConfigurationComponent {
                         environmentId: formValue.environmentId || undefined,
                         dataMapping: dataMapping,
                         outputFormat: formValue.outputFormat,
-                        filename: formValue.filename,
+                        filename: this.filenameExpressionMode ? this.filenameExpression : formValue.filename,
                         correlationId: formValue.correlationId || undefined,
                         resultProcessVariable: formValue.resultProcessVariable,
                     };
                     if (this.variantSelectionMode === 'explicit') {
-                        config.variantId = formValue.variantId;
+                        config.variantId = this.variantIdExpressionMode
+                            ? this.variantIdExpression
+                            : formValue.variantId;
                     }
                     else {
                         config.variantAttributes = this.variantAttributeEntries
                             .filter((e) => e.key && e.value)
                             .map((e) => ({ key: e.key, value: e.value, required: e.required }));
                     }
-                    this.configuration.emit(config);
+                    this.validateAndEmit(config);
                 }
             });
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: GenerateDocumentConfigurationComponent, deps: [{ token: EpistolaPluginService }, { token: i2$2.ProcessLinkStateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: GenerateDocumentConfigurationComponent, isStandalone: true, selector: "epistola-generate-document-configuration", inputs: { save$: "save$", disabled$: "disabled$", pluginId: "pluginId", prefillConfiguration$: "prefillConfiguration$", selectedPluginConfigurationData$: "selectedPluginConfigurationData$", context$: "context$" }, outputs: { valid: "valid", configuration: "configuration" }, ngImport: i0, template: "<v-form\n  (valueChange)=\"formValueChange($event)\"\n  *ngIf=\"{\n    disabled: disabled$ | async,\n    prefill: prefillConfiguration$ ? (prefillConfiguration$ | async) : null,\n    catalogs: catalogs$ | async,\n    templates: templates$ | async,\n    variants: variants$ | async,\n    environments: environments$ | async,\n    templateFields: templateFields$ | async,\n    selectedCatalogId: selectedCatalogId$ | async,\n    selectedTemplateId: selectedTemplateId$ | async,\n  } as obs\"\n>\n  <v-select\n    name=\"catalogId\"\n    [title]=\"'catalogId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'catalogIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [items]=\"obs.catalogs.data\"\n    [defaultSelectionId]=\"obs.prefill?.catalogId\"\n    [disabled]=\"obs.disabled || obs.catalogs.loading\"\n    [required]=\"true\"\n    [loading]=\"obs.catalogs.loading\"\n  >\n  </v-select>\n  <div *ngIf=\"obs.catalogs.error\" class=\"loading-error\">{{ obs.catalogs.error }}</div>\n\n  <v-select\n    name=\"templateId\"\n    [title]=\"'templateId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'templateIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [items]=\"obs.templates.data\"\n    [defaultSelectionId]=\"obs.prefill?.templateId\"\n    [disabled]=\"obs.disabled || obs.templates.loading || !obs.selectedCatalogId\"\n    [required]=\"true\"\n    [loading]=\"obs.templates.loading\"\n  >\n  </v-select>\n  <div *ngIf=\"obs.templates.error\" class=\"loading-error\">{{ obs.templates.error }}</div>\n\n  <!-- Variant selection mode toggle -->\n  <div class=\"variant-mode-toggle\" *ngIf=\"obs.selectedTemplateId\">\n    <label class=\"variant-mode-label\">{{\n      'variantSelectionMode' | pluginTranslate: pluginId | async\n    }}</label>\n    <div class=\"variant-mode-buttons\">\n      <button\n        type=\"button\"\n        class=\"variant-mode-btn\"\n        [class.active]=\"variantSelectionMode === 'explicit'\"\n        (click)=\"onVariantSelectionModeChange('explicit')\"\n        [disabled]=\"obs.disabled\"\n      >\n        {{ 'selectByVariant' | pluginTranslate: pluginId | async }}\n      </button>\n      <button\n        type=\"button\"\n        class=\"variant-mode-btn\"\n        [class.active]=\"variantSelectionMode === 'attributes'\"\n        (click)=\"onVariantSelectionModeChange('attributes')\"\n        [disabled]=\"obs.disabled\"\n      >\n        {{ 'selectByAttributes' | pluginTranslate: pluginId | async }}\n      </button>\n    </div>\n  </div>\n\n  <!-- Explicit variant selection (dropdown) -->\n  <v-select\n    *ngIf=\"variantSelectionMode === 'explicit'\"\n    name=\"variantId\"\n    [title]=\"'variantId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'variantIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [items]=\"obs.variants.data\"\n    [defaultSelectionId]=\"obs.prefill?.variantId\"\n    [disabled]=\"obs.disabled || obs.variants.loading || !obs.selectedTemplateId\"\n    [required]=\"false\"\n    [loading]=\"obs.variants.loading\"\n  >\n  </v-select>\n  <div *ngIf=\"obs.variants.error\" class=\"loading-error\">{{ obs.variants.error }}</div>\n\n  <!-- Attribute-based variant selection -->\n  <div\n    *ngIf=\"variantSelectionMode === 'attributes' && obs.selectedTemplateId\"\n    class=\"variant-attributes-section\"\n  >\n    <label class=\"variant-attributes-label\">{{\n      'variantAttributes' | pluginTranslate: pluginId | async\n    }}</label>\n    <div class=\"variant-attributes-list\">\n      <div\n        *ngFor=\"let entry of variantAttributeEntries; let i = index\"\n        class=\"variant-attribute-row\"\n      >\n        <select\n          *ngIf=\"!entry._customKey\"\n          class=\"variant-attribute-input\"\n          [ngModel]=\"entry.key\"\n          (ngModelChange)=\"onKeySelected(entry, $event)\"\n          [disabled]=\"obs.disabled\"\n        >\n          <option value=\"\" disabled>\n            {{ 'attributeKey' | pluginTranslate: pluginId | async }}\n          </option>\n          <option *ngFor=\"let key of availableAttributeKeys\" [value]=\"key\">{{ key }}</option>\n          <option value=\"__custom__\">\n            {{ 'attributeKeyCustom' | pluginTranslate: pluginId | async }}\n          </option>\n        </select>\n        <div *ngIf=\"entry._customKey\" class=\"custom-key-input\">\n          <input\n            type=\"text\"\n            class=\"variant-attribute-input\"\n            [placeholder]=\"'attributeKey' | pluginTranslate: pluginId | async\"\n            [(ngModel)]=\"entry.key\"\n            (ngModelChange)=\"onAttributeEntryChange()\"\n            [disabled]=\"obs.disabled\"\n          />\n          <button\n            type=\"button\"\n            class=\"custom-key-cancel\"\n            (click)=\"cancelCustomKey(entry)\"\n            [disabled]=\"obs.disabled\"\n          >\n            &times;\n          </button>\n        </div>\n        <input\n          type=\"text\"\n          class=\"variant-attribute-input\"\n          [placeholder]=\"'attributeValue' | pluginTranslate: pluginId | async\"\n          [(ngModel)]=\"entry.value\"\n          (ngModelChange)=\"onAttributeEntryChange()\"\n          [disabled]=\"obs.disabled\"\n        />\n        <label class=\"variant-attribute-required-toggle\">\n          <input\n            type=\"checkbox\"\n            [(ngModel)]=\"entry.required\"\n            (ngModelChange)=\"onAttributeEntryChange()\"\n            [disabled]=\"obs.disabled\"\n          />\n          <span class=\"required-label\">{{\n            (entry.required ? 'attributeRequired' : 'attributePreferred')\n              | pluginTranslate: pluginId\n              | async\n          }}</span>\n        </label>\n        <button\n          type=\"button\"\n          class=\"variant-attribute-remove-btn\"\n          (click)=\"removeAttributeEntry(i)\"\n          [disabled]=\"obs.disabled\"\n          title=\"{{ 'removeAttribute' | pluginTranslate: pluginId | async }}\"\n        >\n          &times;\n        </button>\n      </div>\n    </div>\n    <button\n      type=\"button\"\n      class=\"variant-attribute-add-btn\"\n      (click)=\"addAttributeEntry()\"\n      [disabled]=\"obs.disabled\"\n    >\n      + {{ 'addAttribute' | pluginTranslate: pluginId | async }}\n    </button>\n  </div>\n\n  <v-select\n    name=\"environmentId\"\n    [title]=\"'environmentId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'environmentIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [items]=\"obs.environments.data\"\n    [defaultSelectionId]=\"obs.prefill?.environmentId\"\n    [disabled]=\"obs.disabled || obs.environments.loading\"\n    [required]=\"false\"\n    [loading]=\"obs.environments.loading\"\n  >\n  </v-select>\n  <div *ngIf=\"obs.environments.error\" class=\"loading-error\">{{ obs.environments.error }}</div>\n\n  <v-select\n    name=\"outputFormat\"\n    [title]=\"'outputFormat' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'outputFormatTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [items]=\"outputFormatOptions\"\n    [defaultSelectionId]=\"obs.prefill?.outputFormat || 'PDF'\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-select>\n\n  <v-input\n    name=\"filename\"\n    [title]=\"'filename' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'filenameTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.filename\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"correlationId\"\n    [title]=\"'correlationId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'correlationIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.correlationId\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"false\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"resultProcessVariable\"\n    [title]=\"'resultProcessVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'resultProcessVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.resultProcessVariable\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-input>\n</v-form>\n\n<div *ngIf=\"(templateFields$ | async)?.error as templateFieldsError\" class=\"loading-error\">\n  {{ templateFieldsError }}\n</div>\n\n<div *ngIf=\"selectedTemplateId$ | async\" class=\"mapping-section\">\n  <h5 class=\"mapping-section__title\">\n    {{ 'dataMappingTitle' | pluginTranslate: pluginId | async }}\n  </h5>\n  <p class=\"mapping-section__description\">\n    {{ 'dataMappingDescription' | pluginTranslate: pluginId | async }}\n  </p>\n  <div class=\"mapping-mode-toggle\">\n    <button\n      class=\"mapping-mode-toggle__btn\"\n      [class.mapping-mode-toggle__btn--active]=\"mappingMode === 'simple'\"\n      (click)=\"mappingMode = 'simple'\"\n    >\n      {{ 'mappingModeSimple' | pluginTranslate: pluginId | async }}\n    </button>\n    <button\n      class=\"mapping-mode-toggle__btn\"\n      [class.mapping-mode-toggle__btn--active]=\"mappingMode === 'advanced'\"\n      (click)=\"mappingMode = 'advanced'\"\n    >\n      {{ 'mappingModeAdvanced' | pluginTranslate: pluginId | async }}\n    </button>\n  </div>\n\n  <!-- Editor area (full width) -->\n  <epistola-mapping-builder\n    *ngIf=\"mappingMode === 'simple'\"\n    [expression]=\"dataMapping$ | async\"\n    [templateFields]=\"(templateFields$ | async)?.data ?? []\"\n    [suggestions]=\"variableSuggestions\"\n    [disabled]=\"!!(disabled$ | async)\"\n    (expressionChange)=\"onDataMappingChange($event)\"\n  ></epistola-mapping-builder>\n\n  <epistola-jsonata-editor\n    *ngIf=\"mappingMode === 'advanced'\"\n    [expression]=\"dataMapping$ | async\"\n    [disabled]=\"!!(disabled$ | async)\"\n    [suggestions]=\"variableSuggestions\"\n    [functions]=\"expressionFunctions\"\n    (expressionChange)=\"onDataMappingChange($event)\"\n  ></epistola-jsonata-editor>\n\n  <!-- Bottom tabs: Schema + Preview (collapsible) -->\n  <div class=\"mapping-tools\" [class.mapping-tools--collapsed]=\"toolsCollapsed\">\n    <div class=\"mapping-tools__header\" (click)=\"toolsCollapsed = !toolsCollapsed\">\n      <span class=\"mapping-tools__chevron\">{{ toolsCollapsed ? '&#x25B6;' : '&#x25BC;' }}</span>\n      <span>{{ 'mappingTools' | pluginTranslate: pluginId | async }}</span>\n    </div>\n    <div *ngIf=\"!toolsCollapsed\" class=\"mapping-tools__content\">\n      <div class=\"mapping-tools__tabs\">\n        <button\n          class=\"mapping-tools__tab\"\n          [class.mapping-tools__tab--active]=\"activeToolTab === 'schema'\"\n          (click)=\"activeToolTab = 'schema'\"\n        >\n          {{ 'expectedStructure' | pluginTranslate: pluginId | async }}\n        </button>\n        <button\n          class=\"mapping-tools__tab\"\n          [class.mapping-tools__tab--active]=\"activeToolTab === 'preview'\"\n          (click)=\"activeToolTab = 'preview'\"\n        >\n          {{ 'previewTitle' | pluginTranslate: pluginId | async }}\n        </button>\n      </div>\n\n      <epistola-expected-structure\n        *ngIf=\"activeToolTab === 'schema'\"\n        [templateFields]=\"(templateFields$ | async)?.data ?? []\"\n      ></epistola-expected-structure>\n\n      <epistola-mapping-preview\n        *ngIf=\"activeToolTab === 'preview'\"\n        [expression]=\"dataMapping$ | async\"\n        [templateFields]=\"(templateFields$ | async)?.data ?? []\"\n        [caseDefinitionKey]=\"caseDefinitionKey\"\n      ></epistola-mapping-preview>\n    </div>\n  </div>\n</div>\n", styles: [".loading-error{padding:.25rem .75rem;font-size:.8125rem;color:#dc3545}.validation-summary{margin-top:.5rem;padding:.5rem .75rem;border-radius:4px;font-size:.875rem}.validation-summary .validation-complete{color:#198754}.validation-summary .validation-incomplete{color:#dc3545;font-weight:500}.variant-mode-toggle{margin-bottom:1rem;padding:0 .75rem}.variant-mode-label{display:block;font-size:.875rem;font-weight:500;margin-bottom:.375rem}.variant-mode-buttons{display:flex;gap:0;border:1px solid #d1d5db;border-radius:4px;overflow:hidden;width:fit-content}.variant-mode-btn{padding:.375rem .75rem;font-size:.8125rem;background:#fff;border:none;border-right:1px solid #d1d5db;cursor:pointer;color:#374151;transition:background-color .15s,color .15s}.variant-mode-btn:last-child{border-right:none}.variant-mode-btn:hover:not([disabled]){background:#f3f4f6}.variant-mode-btn.active{background:#2563eb;color:#fff}.variant-mode-btn[disabled]{opacity:.5;cursor:not-allowed}.variant-attributes-section{margin-bottom:1rem;padding:0 .75rem}.variant-attributes-label{display:block;font-size:.875rem;font-weight:500;margin-bottom:.375rem}.variant-attributes-list{display:flex;flex-direction:column;gap:.375rem}.variant-attribute-row{display:flex;gap:.375rem;align-items:center}.variant-attribute-input{flex:1;padding:.375rem .5rem;font-size:.8125rem;border:1px solid #d1d5db;border-radius:4px;outline:none}.variant-attribute-input:focus{border-color:#2563eb;box-shadow:0 0 0 1px #2563eb}.variant-attribute-input[disabled]{opacity:.5;background:#f9fafb}.custom-key-input{display:flex;flex:1;gap:.25rem}.custom-key-input .variant-attribute-input{flex:1}.custom-key-cancel{padding:.25rem .5rem;font-size:1rem;line-height:1;background:none;border:1px solid #d1d5db;border-radius:4px;cursor:pointer;color:#6b7280}.custom-key-cancel:hover:not([disabled]){color:#dc3545;border-color:#dc3545}.custom-key-cancel[disabled]{opacity:.5;cursor:not-allowed}.variant-attribute-required-toggle{display:flex;align-items:center;gap:.25rem;font-size:.75rem;color:#374151;white-space:nowrap;cursor:pointer}.variant-attribute-required-toggle input[type=checkbox]{margin:0;cursor:pointer}.variant-attribute-required-toggle .required-label{-webkit-user-select:none;user-select:none}.variant-attribute-remove-btn{padding:.25rem .5rem;font-size:1rem;line-height:1;background:none;border:1px solid #d1d5db;border-radius:4px;cursor:pointer;color:#6b7280}.variant-attribute-remove-btn:hover:not([disabled]){color:#dc3545;border-color:#dc3545}.variant-attribute-remove-btn[disabled]{opacity:.5;cursor:not-allowed}.variant-attribute-add-btn{margin-top:.375rem;padding:.25rem .5rem;font-size:.8125rem;background:none;border:1px dashed #d1d5db;border-radius:4px;cursor:pointer;color:#6b7280}.variant-attribute-add-btn:hover:not([disabled]){color:#2563eb;border-color:#2563eb}.variant-attribute-add-btn[disabled]{opacity:.5;cursor:not-allowed}.mapping-section{margin-top:1rem}.mapping-section__title{font-size:1rem;font-weight:600;margin:0 0 4px}.mapping-section__description{font-size:.85em;color:#6f6f6f;margin:0 0 12px}.mapping-mode-toggle{display:flex;gap:0;margin-bottom:12px}.mapping-mode-toggle__btn{padding:6px 16px;border:1px solid #e0e0e0;background:#fff;font-size:.85em;cursor:pointer}.mapping-mode-toggle__btn:first-child{border-radius:4px 0 0 4px}.mapping-mode-toggle__btn:last-child{border-radius:0 4px 4px 0;border-left:none}.mapping-mode-toggle__btn--active{background:#0f62fe;color:#fff;border-color:#0f62fe}.mapping-tools{margin-top:12px;border:1px solid #e0e0e0;border-radius:4px;overflow:hidden}.mapping-tools__header{display:flex;align-items:center;gap:6px;padding:8px 12px;background:#f4f4f4;cursor:pointer;font-size:.85em;font-weight:500;-webkit-user-select:none;user-select:none}.mapping-tools__header:hover{background:#e8e8e8}.mapping-tools__chevron{font-size:.7em}.mapping-tools__content{border-top:1px solid #e0e0e0}.mapping-tools__tabs{display:flex;border-bottom:1px solid #e0e0e0}.mapping-tools__tab{padding:6px 16px;border:none;background:transparent;font-size:.8em;cursor:pointer;border-bottom:2px solid transparent}.mapping-tools__tab--active{border-bottom-color:#0f62fe;font-weight:500}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PluginTranslatePipeModule }, { kind: "pipe", type: i2$1.PluginTranslatePipe, name: "pluginTranslate" }, { kind: "ngmodule", type: FormModule }, { kind: "component", type: i3.FormComponent, selector: "v-form", inputs: ["className"], outputs: ["valueChange"] }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i3.InputComponent, selector: "v-input", inputs: ["name", "type", "title", "titleTranslationKey", "defaultValue", "widthPx", "fullWidth", "margin", "smallMargin", "disabled", "step", "min", "maxLength", "tooltip", "required", "hideNumberSpinBox", "smallLabel", "rows", "clear$", "carbonTheme", "placeholder", "dataTestId", "trim", "presetsTitle", "presetOptions"], outputs: ["valueChange"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3.SelectComponent, selector: "v-select", inputs: ["items", "defaultSelection", "defaultSelectionId", "defaultSelectionIds", "disabled", "dropUp", "invalid", "multiple", "margin", "widthInPx", "notFoundText", "clearAllText", "clearText", "clearable", "name", "title", "titleTranslationKey", "clearSelectionSubject$", "tooltip", "required", "loading", "loadingText", "placeholder", "smallMargin", "carbonTheme", "appendInline", "warn", "warnText", "dataTestId"], outputs: ["selectedChange"] }, { kind: "component", type: ExpectedStructureComponent, selector: "epistola-expected-structure", inputs: ["templateFields"] }, { kind: "component", type: JsonataEditorComponent, selector: "epistola-jsonata-editor", inputs: ["expression", "disabled", "suggestions", "functions"], outputs: ["expressionChange", "validChange"] }, { kind: "component", type: MappingBuilderComponent, selector: "epistola-mapping-builder", inputs: ["expression", "templateFields", "suggestions", "disabled"], outputs: ["expressionChange"] }, { kind: "component", type: MappingPreviewComponent, selector: "epistola-mapping-preview", inputs: ["expression", "templateFields", "caseDefinitionKey"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    /**
+     * Build a JSONata validation request from the config and call the backend.
+     * Only fields that are JSONata expressions get validated:
+     * - dataMapping is always JSONata
+     * - filename / variantId only when their `fx` toggle is on
+     * - variant attribute values only when isExpression() reports true
+     * On invalid response, surface errors and abort the emit.
+     * If the validator endpoint itself fails (network/server), proceed with the
+     * emit — the validation is a quality-of-life check, not a hard gate.
+     */
+    validateAndEmit(config) {
+        const variantAttributeValues = {};
+        if (config.variantAttributes) {
+            for (const attr of config.variantAttributes) {
+                if (isExpression(attr.value)) {
+                    variantAttributeValues[attr.key] = attr.value;
+                }
+            }
+        }
+        const request = {
+            dataMapping: config.dataMapping || null,
+            filename: this.filenameExpressionMode ? config.filename : null,
+            variantId: this.variantIdExpressionMode ? config.variantId || null : null,
+            variantAttributeValues: Object.keys(variantAttributeValues).length > 0 ? variantAttributeValues : null,
+        };
+        this.epistolaPluginService
+            .validateJsonata(request)
+            .pipe(take$1(1), catchError(() => of({ valid: true, errors: [] })))
+            .subscribe((result) => {
+            if (result.valid) {
+                this.validationErrors$.next([]);
+                this.configuration.emit(config);
+            }
+            else {
+                this.validationErrors$.next(result.errors);
+                this.cdr.markForCheck();
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: GenerateDocumentConfigurationComponent, deps: [{ token: EpistolaPluginService }, { token: i2$3.ProcessLinkStateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: GenerateDocumentConfigurationComponent, isStandalone: true, selector: "epistola-generate-document-configuration", inputs: { save$: "save$", disabled$: "disabled$", pluginId: "pluginId", prefillConfiguration$: "prefillConfiguration$", selectedPluginConfigurationData$: "selectedPluginConfigurationData$", context$: "context$" }, outputs: { valid: "valid", configuration: "configuration" }, ngImport: i0, template: "<v-form\n  (valueChange)=\"formValueChange($event)\"\n  *ngIf=\"{\n    disabled: disabled$ | async,\n    prefill: prefillConfiguration$ ? (prefillConfiguration$ | async) : null,\n    catalogs: catalogs$ | async,\n    templates: templates$ | async,\n    variants: variants$ | async,\n    environments: environments$ | async,\n    templateFields: templateFields$ | async,\n    selectedCatalogId: selectedCatalogId$ | async,\n    selectedTemplateId: selectedTemplateId$ | async,\n    validationErrors: validationErrors$ | async,\n  } as obs\"\n>\n  <div\n    *ngIf=\"obs.validationErrors && obs.validationErrors.length > 0\"\n    class=\"jsonata-validation-errors\"\n  >\n    <strong>{{ 'jsonataValidationErrorsHeading' | pluginTranslate: pluginId | async }}</strong>\n    <ul>\n      <li *ngFor=\"let err of obs.validationErrors\">\n        <code>{{ err.field }}</code\n        >: {{ err.message }}\n      </li>\n    </ul>\n  </div>\n  <v-select\n    name=\"catalogId\"\n    [title]=\"'catalogId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'catalogIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [items]=\"obs.catalogs.data\"\n    [defaultSelectionId]=\"obs.prefill?.catalogId\"\n    [disabled]=\"obs.disabled || obs.catalogs.loading\"\n    [required]=\"true\"\n    [loading]=\"obs.catalogs.loading\"\n  >\n  </v-select>\n  <div *ngIf=\"obs.catalogs.error\" class=\"loading-error\">{{ obs.catalogs.error }}</div>\n\n  <v-select\n    name=\"templateId\"\n    [title]=\"'templateId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'templateIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [items]=\"obs.templates.data\"\n    [defaultSelectionId]=\"obs.prefill?.templateId\"\n    [disabled]=\"obs.disabled || obs.templates.loading || !obs.selectedCatalogId\"\n    [required]=\"true\"\n    [loading]=\"obs.templates.loading\"\n  >\n  </v-select>\n  <div *ngIf=\"obs.templates.error\" class=\"loading-error\">{{ obs.templates.error }}</div>\n\n  <!-- Variant selection mode toggle -->\n  <div class=\"variant-mode-toggle\" *ngIf=\"obs.selectedTemplateId\">\n    <label class=\"variant-mode-label\">{{\n      'variantSelectionMode' | pluginTranslate: pluginId | async\n    }}</label>\n    <div class=\"variant-mode-buttons\">\n      <button\n        type=\"button\"\n        class=\"variant-mode-btn\"\n        [class.active]=\"variantSelectionMode === 'explicit'\"\n        (click)=\"onVariantSelectionModeChange('explicit')\"\n        [disabled]=\"obs.disabled\"\n      >\n        {{ 'selectByVariant' | pluginTranslate: pluginId | async }}\n      </button>\n      <button\n        type=\"button\"\n        class=\"variant-mode-btn\"\n        [class.active]=\"variantSelectionMode === 'attributes'\"\n        (click)=\"onVariantSelectionModeChange('attributes')\"\n        [disabled]=\"obs.disabled\"\n      >\n        {{ 'selectByAttributes' | pluginTranslate: pluginId | async }}\n      </button>\n    </div>\n  </div>\n\n  <!-- Explicit variant selection (dropdown or expression) -->\n  <div *ngIf=\"variantSelectionMode === 'explicit'\" class=\"field-with-fx\">\n    <v-select\n      *ngIf=\"!variantIdExpressionMode\"\n      name=\"variantId\"\n      [title]=\"'variantId' | pluginTranslate: pluginId | async\"\n      [tooltip]=\"'variantIdTooltip' | pluginTranslate: pluginId | async\"\n      [margin]=\"true\"\n      [items]=\"obs.variants.data\"\n      [defaultSelectionId]=\"obs.prefill?.variantId\"\n      [disabled]=\"obs.disabled || obs.variants.loading || !obs.selectedTemplateId\"\n      [required]=\"false\"\n      [loading]=\"obs.variants.loading\"\n    >\n    </v-select>\n    <div *ngIf=\"variantIdExpressionMode\" class=\"fx-input-group\">\n      <label class=\"fx-input-label\">{{ 'variantId' | pluginTranslate: pluginId | async }}</label>\n      <input\n        type=\"text\"\n        class=\"fx-input\"\n        [ngModel]=\"variantIdExpression\"\n        (ngModelChange)=\"variantIdExpression = $event; onVariantIdExpressionChange()\"\n        [disabled]=\"obs.disabled\"\n        placeholder=\"$pv.letterType\"\n      />\n    </div>\n    <button\n      type=\"button\"\n      class=\"fx-toggle\"\n      (click)=\"variantIdExpressionMode = !variantIdExpressionMode\"\n      [disabled]=\"obs.disabled\"\n      [title]=\"variantIdExpressionMode ? 'Switch to dropdown' : 'Switch to expression'\"\n    >\n      {{ variantIdExpressionMode ? '\u00B7' : 'fx' }}\n    </button>\n  </div>\n  <div *ngIf=\"obs.variants.error\" class=\"loading-error\">{{ obs.variants.error }}</div>\n\n  <!-- Attribute-based variant selection -->\n  <div\n    *ngIf=\"variantSelectionMode === 'attributes' && obs.selectedTemplateId\"\n    class=\"variant-attributes-section\"\n  >\n    <label class=\"variant-attributes-label\">{{\n      'variantAttributes' | pluginTranslate: pluginId | async\n    }}</label>\n    <div class=\"variant-attributes-list\">\n      <div\n        *ngFor=\"let entry of variantAttributeEntries; let i = index\"\n        class=\"variant-attribute-row\"\n      >\n        <select\n          *ngIf=\"!entry._customKey\"\n          class=\"variant-attribute-input\"\n          [ngModel]=\"entry.key\"\n          (ngModelChange)=\"onKeySelected(entry, $event)\"\n          [disabled]=\"obs.disabled\"\n        >\n          <option value=\"\" disabled>\n            {{ 'attributeKey' | pluginTranslate: pluginId | async }}\n          </option>\n          <option *ngFor=\"let key of availableAttributeKeys\" [value]=\"key\">{{ key }}</option>\n          <option value=\"__custom__\">\n            {{ 'attributeKeyCustom' | pluginTranslate: pluginId | async }}\n          </option>\n        </select>\n        <div *ngIf=\"entry._customKey\" class=\"custom-key-input\">\n          <input\n            type=\"text\"\n            class=\"variant-attribute-input\"\n            [placeholder]=\"'attributeKey' | pluginTranslate: pluginId | async\"\n            [(ngModel)]=\"entry.key\"\n            (ngModelChange)=\"onAttributeEntryChange()\"\n            [disabled]=\"obs.disabled\"\n          />\n          <button\n            type=\"button\"\n            class=\"custom-key-cancel\"\n            (click)=\"cancelCustomKey(entry)\"\n            [disabled]=\"obs.disabled\"\n          >\n            &times;\n          </button>\n        </div>\n        <div class=\"attribute-value-with-fx\">\n          <input\n            type=\"text\"\n            class=\"variant-attribute-input\"\n            [class.fx-input]=\"entry._expressionMode\"\n            [placeholder]=\"\n              entry._expressionMode\n                ? '$pv.language'\n                : ('attributeValue' | pluginTranslate: pluginId | async)\n            \"\n            [(ngModel)]=\"entry.value\"\n            (ngModelChange)=\"onAttributeEntryChange()\"\n            [disabled]=\"obs.disabled\"\n          />\n          <button\n            type=\"button\"\n            class=\"fx-toggle fx-toggle--inline\"\n            (click)=\"entry._expressionMode = !entry._expressionMode\"\n            [disabled]=\"obs.disabled\"\n            [title]=\"entry._expressionMode ? 'Switch to plain value' : 'Switch to expression'\"\n          >\n            {{ entry._expressionMode ? '\u00B7' : 'fx' }}\n          </button>\n        </div>\n        <label class=\"variant-attribute-required-toggle\">\n          <input\n            type=\"checkbox\"\n            [(ngModel)]=\"entry.required\"\n            (ngModelChange)=\"onAttributeEntryChange()\"\n            [disabled]=\"obs.disabled\"\n          />\n          <span class=\"required-label\">{{\n            (entry.required ? 'attributeRequired' : 'attributePreferred')\n              | pluginTranslate: pluginId\n              | async\n          }}</span>\n        </label>\n        <button\n          type=\"button\"\n          class=\"variant-attribute-remove-btn\"\n          (click)=\"removeAttributeEntry(i)\"\n          [disabled]=\"obs.disabled\"\n          title=\"{{ 'removeAttribute' | pluginTranslate: pluginId | async }}\"\n        >\n          &times;\n        </button>\n      </div>\n    </div>\n    <button\n      type=\"button\"\n      class=\"variant-attribute-add-btn\"\n      (click)=\"addAttributeEntry()\"\n      [disabled]=\"obs.disabled\"\n    >\n      + {{ 'addAttribute' | pluginTranslate: pluginId | async }}\n    </button>\n  </div>\n\n  <v-select\n    name=\"environmentId\"\n    [title]=\"'environmentId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'environmentIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [items]=\"obs.environments.data\"\n    [defaultSelectionId]=\"obs.prefill?.environmentId\"\n    [disabled]=\"obs.disabled || obs.environments.loading\"\n    [required]=\"false\"\n    [loading]=\"obs.environments.loading\"\n  >\n  </v-select>\n  <div *ngIf=\"obs.environments.error\" class=\"loading-error\">{{ obs.environments.error }}</div>\n\n  <v-select\n    name=\"outputFormat\"\n    [title]=\"'outputFormat' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'outputFormatTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [items]=\"outputFormatOptions\"\n    [defaultSelectionId]=\"obs.prefill?.outputFormat || 'PDF'\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-select>\n\n  <div class=\"field-with-fx\">\n    <v-input\n      *ngIf=\"!filenameExpressionMode\"\n      name=\"filename\"\n      [title]=\"'filename' | pluginTranslate: pluginId | async\"\n      [tooltip]=\"'filenameTooltip' | pluginTranslate: pluginId | async\"\n      [margin]=\"true\"\n      [defaultValue]=\"obs.prefill?.filename\"\n      [disabled]=\"obs.disabled\"\n      [required]=\"true\"\n    >\n    </v-input>\n    <div *ngIf=\"filenameExpressionMode\" class=\"fx-input-group\">\n      <label class=\"fx-input-label\">{{ 'filename' | pluginTranslate: pluginId | async }}</label>\n      <input\n        type=\"text\"\n        class=\"fx-input\"\n        [ngModel]=\"filenameExpression\"\n        (ngModelChange)=\"filenameExpression = $event; onFilenameExpressionChange()\"\n        [disabled]=\"obs.disabled\"\n        placeholder='\"besluit-\" & $doc.name & \".pdf\"'\n      />\n    </div>\n    <button\n      type=\"button\"\n      class=\"fx-toggle\"\n      (click)=\"filenameExpressionMode = !filenameExpressionMode\"\n      [disabled]=\"obs.disabled\"\n      [title]=\"filenameExpressionMode ? 'Switch to plain input' : 'Switch to expression'\"\n    >\n      {{ filenameExpressionMode ? '\u00B7' : 'fx' }}\n    </button>\n  </div>\n\n  <v-input\n    name=\"correlationId\"\n    [title]=\"'correlationId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'correlationIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.correlationId\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"false\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"resultProcessVariable\"\n    [title]=\"'resultProcessVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'resultProcessVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.resultProcessVariable\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-input>\n</v-form>\n\n<div *ngIf=\"(templateFields$ | async)?.error as templateFieldsError\" class=\"loading-error\">\n  {{ templateFieldsError }}\n</div>\n\n<div *ngIf=\"selectedTemplateId$ | async\" class=\"mapping-section\">\n  <h5 class=\"mapping-section__title\">\n    {{ 'dataMappingTitle' | pluginTranslate: pluginId | async }}\n  </h5>\n  <p class=\"mapping-section__description\">\n    {{ 'dataMappingDescription' | pluginTranslate: pluginId | async }}\n  </p>\n  <div class=\"mapping-mode-toggle\">\n    <button\n      class=\"mapping-mode-toggle__btn\"\n      [class.mapping-mode-toggle__btn--active]=\"mappingMode === 'simple'\"\n      (click)=\"mappingMode = 'simple'\"\n    >\n      {{ 'mappingModeSimple' | pluginTranslate: pluginId | async }}\n    </button>\n    <button\n      class=\"mapping-mode-toggle__btn\"\n      [class.mapping-mode-toggle__btn--active]=\"mappingMode === 'advanced'\"\n      (click)=\"mappingMode = 'advanced'\"\n    >\n      {{ 'mappingModeAdvanced' | pluginTranslate: pluginId | async }}\n    </button>\n  </div>\n\n  <!-- Editor area (full width) -->\n  <epistola-mapping-builder\n    *ngIf=\"mappingMode === 'simple'\"\n    [expression]=\"dataMapping$ | async\"\n    [templateFields]=\"(templateFields$ | async)?.data ?? []\"\n    [suggestions]=\"variableSuggestions\"\n    [disabled]=\"!!(disabled$ | async)\"\n    (expressionChange)=\"onDataMappingChange($event)\"\n  ></epistola-mapping-builder>\n\n  <epistola-jsonata-editor\n    *ngIf=\"mappingMode === 'advanced'\"\n    [expression]=\"dataMapping$ | async\"\n    [disabled]=\"!!(disabled$ | async)\"\n    [suggestions]=\"variableSuggestions\"\n    [functions]=\"expressionFunctions\"\n    (expressionChange)=\"onDataMappingChange($event)\"\n  ></epistola-jsonata-editor>\n\n  <!-- Bottom tabs: Schema + Preview (collapsible) -->\n  <div class=\"mapping-tools\" [class.mapping-tools--collapsed]=\"toolsCollapsed\">\n    <div class=\"mapping-tools__header\" (click)=\"toolsCollapsed = !toolsCollapsed\">\n      <span class=\"mapping-tools__chevron\">{{ toolsCollapsed ? '&#x25B6;' : '&#x25BC;' }}</span>\n      <span>{{ 'mappingTools' | pluginTranslate: pluginId | async }}</span>\n    </div>\n    <div *ngIf=\"!toolsCollapsed\" class=\"mapping-tools__content\">\n      <div class=\"mapping-tools__tabs\">\n        <button\n          class=\"mapping-tools__tab\"\n          [class.mapping-tools__tab--active]=\"activeToolTab === 'schema'\"\n          (click)=\"activeToolTab = 'schema'\"\n        >\n          {{ 'expectedStructure' | pluginTranslate: pluginId | async }}\n        </button>\n        <button\n          class=\"mapping-tools__tab\"\n          [class.mapping-tools__tab--active]=\"activeToolTab === 'preview'\"\n          (click)=\"activeToolTab = 'preview'\"\n        >\n          {{ 'previewTitle' | pluginTranslate: pluginId | async }}\n        </button>\n      </div>\n\n      <epistola-expected-structure\n        *ngIf=\"activeToolTab === 'schema'\"\n        [templateFields]=\"(templateFields$ | async)?.data ?? []\"\n      ></epistola-expected-structure>\n\n      <epistola-mapping-preview\n        *ngIf=\"activeToolTab === 'preview'\"\n        [expression]=\"dataMapping$ | async\"\n        [templateFields]=\"(templateFields$ | async)?.data ?? []\"\n        [caseDefinitionKey]=\"caseDefinitionKey\"\n      ></epistola-mapping-preview>\n    </div>\n  </div>\n</div>\n", styles: [".loading-error{padding:.25rem .75rem;font-size:.8125rem;color:#dc3545}.jsonata-validation-errors{margin-bottom:1rem;padding:.75rem 1rem;border:1px solid #dc3545;border-radius:4px;background:#fdf3f4;color:#dc3545;font-size:.875rem}.jsonata-validation-errors ul{margin:.5rem 0 0;padding-left:1.25rem}.jsonata-validation-errors code{background:#dc35451a;padding:0 .25rem;border-radius:2px;font-family:monospace}.validation-summary{margin-top:.5rem;padding:.5rem .75rem;border-radius:4px;font-size:.875rem}.validation-summary .validation-complete{color:#198754}.validation-summary .validation-incomplete{color:#dc3545;font-weight:500}.variant-mode-toggle{margin-bottom:1rem;padding:0 .75rem}.variant-mode-label{display:block;font-size:.875rem;font-weight:500;margin-bottom:.375rem}.variant-mode-buttons{display:flex;gap:0;border:1px solid #d1d5db;border-radius:4px;overflow:hidden;width:fit-content}.variant-mode-btn{padding:.375rem .75rem;font-size:.8125rem;background:#fff;border:none;border-right:1px solid #d1d5db;cursor:pointer;color:#374151;transition:background-color .15s,color .15s}.variant-mode-btn:last-child{border-right:none}.variant-mode-btn:hover:not([disabled]){background:#f3f4f6}.variant-mode-btn.active{background:#2563eb;color:#fff}.variant-mode-btn[disabled]{opacity:.5;cursor:not-allowed}.variant-attributes-section{margin-bottom:1rem;padding:0 .75rem}.variant-attributes-label{display:block;font-size:.875rem;font-weight:500;margin-bottom:.375rem}.variant-attributes-list{display:flex;flex-direction:column;gap:.375rem}.variant-attribute-row{display:flex;gap:.375rem;align-items:center}.variant-attribute-input{flex:1;padding:.375rem .5rem;font-size:.8125rem;border:1px solid #d1d5db;border-radius:4px;outline:none}.variant-attribute-input:focus{border-color:#2563eb;box-shadow:0 0 0 1px #2563eb}.variant-attribute-input[disabled]{opacity:.5;background:#f9fafb}.custom-key-input{display:flex;flex:1;gap:.25rem}.custom-key-input .variant-attribute-input{flex:1}.custom-key-cancel{padding:.25rem .5rem;font-size:1rem;line-height:1;background:none;border:1px solid #d1d5db;border-radius:4px;cursor:pointer;color:#6b7280}.custom-key-cancel:hover:not([disabled]){color:#dc3545;border-color:#dc3545}.custom-key-cancel[disabled]{opacity:.5;cursor:not-allowed}.variant-attribute-required-toggle{display:flex;align-items:center;gap:.25rem;font-size:.75rem;color:#374151;white-space:nowrap;cursor:pointer}.variant-attribute-required-toggle input[type=checkbox]{margin:0;cursor:pointer}.variant-attribute-required-toggle .required-label{-webkit-user-select:none;user-select:none}.variant-attribute-remove-btn{padding:.25rem .5rem;font-size:1rem;line-height:1;background:none;border:1px solid #d1d5db;border-radius:4px;cursor:pointer;color:#6b7280}.variant-attribute-remove-btn:hover:not([disabled]){color:#dc3545;border-color:#dc3545}.variant-attribute-remove-btn[disabled]{opacity:.5;cursor:not-allowed}.variant-attribute-add-btn{margin-top:.375rem;padding:.25rem .5rem;font-size:.8125rem;background:none;border:1px dashed #d1d5db;border-radius:4px;cursor:pointer;color:#6b7280}.variant-attribute-add-btn:hover:not([disabled]){color:#2563eb;border-color:#2563eb}.variant-attribute-add-btn[disabled]{opacity:.5;cursor:not-allowed}.field-with-fx{display:flex;align-items:flex-start;gap:4px}.field-with-fx>*:first-child{flex:1;min-width:0}.fx-toggle{width:28px;height:28px;margin-top:22px;border:1px solid #e0e0e0;border-radius:4px;background:#fff;cursor:pointer;font-family:monospace;font-size:.8em;display:flex;align-items:center;justify-content:center;flex-shrink:0}.fx-toggle:hover{background:#f4f4f4}.fx-toggle--inline{margin-top:0}.fx-input-group{flex:1;min-width:0;margin-bottom:.75rem}.fx-input-label{display:block;font-size:.875rem;margin-bottom:.25rem;color:#525252}.fx-input{width:100%;border:1px solid #8d8d8d;border-radius:0;padding:.4rem .75rem;font-family:monospace;font-size:.875rem;background:#f4f4f4}.attribute-value-with-fx{display:flex;align-items:center;gap:4px;flex:1;min-width:0}.attribute-value-with-fx>input{flex:1;min-width:0}.mapping-section{margin-top:1rem}.mapping-section__title{font-size:1rem;font-weight:600;margin:0 0 4px}.mapping-section__description{font-size:.85em;color:#6f6f6f;margin:0 0 12px}.mapping-mode-toggle{display:flex;gap:0;margin-bottom:12px}.mapping-mode-toggle__btn{padding:6px 16px;border:1px solid #e0e0e0;background:#fff;font-size:.85em;cursor:pointer}.mapping-mode-toggle__btn:first-child{border-radius:4px 0 0 4px}.mapping-mode-toggle__btn:last-child{border-radius:0 4px 4px 0;border-left:none}.mapping-mode-toggle__btn--active{background:#0f62fe;color:#fff;border-color:#0f62fe}.mapping-tools{margin-top:12px;border:1px solid #e0e0e0;border-radius:4px;overflow:hidden}.mapping-tools__header{display:flex;align-items:center;gap:6px;padding:8px 12px;background:#f4f4f4;cursor:pointer;font-size:.85em;font-weight:500;-webkit-user-select:none;user-select:none}.mapping-tools__header:hover{background:#e8e8e8}.mapping-tools__chevron{font-size:.7em}.mapping-tools__content{border-top:1px solid #e0e0e0}.mapping-tools__tabs{display:flex;border-bottom:1px solid #e0e0e0}.mapping-tools__tab{padding:6px 16px;border:none;background:transparent;font-size:.8em;cursor:pointer;border-bottom:2px solid transparent}.mapping-tools__tab--active{border-bottom-color:#0f62fe;font-weight:500}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PluginTranslatePipeModule }, { kind: "pipe", type: i2$1.PluginTranslatePipe, name: "pluginTranslate" }, { kind: "ngmodule", type: FormModule }, { kind: "component", type: i3.FormComponent, selector: "v-form", inputs: ["className"], outputs: ["valueChange"] }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i3.InputComponent, selector: "v-input", inputs: ["name", "type", "title", "titleTranslationKey", "defaultValue", "widthPx", "fullWidth", "margin", "smallMargin", "disabled", "step", "min", "maxLength", "tooltip", "required", "hideNumberSpinBox", "smallLabel", "rows", "clear$", "carbonTheme", "placeholder", "dataTestId", "trim", "presetsTitle", "presetOptions"], outputs: ["valueChange"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3.SelectComponent, selector: "v-select", inputs: ["items", "defaultSelection", "defaultSelectionId", "defaultSelectionIds", "disabled", "dropUp", "invalid", "multiple", "margin", "widthInPx", "notFoundText", "clearAllText", "clearText", "clearable", "name", "title", "titleTranslationKey", "clearSelectionSubject$", "tooltip", "required", "loading", "loadingText", "placeholder", "smallMargin", "carbonTheme", "appendInline", "warn", "warnText", "dataTestId"], outputs: ["selectedChange"] }, { kind: "component", type: ExpectedStructureComponent, selector: "epistola-expected-structure", inputs: ["templateFields"] }, { kind: "component", type: JsonataEditorComponent, selector: "epistola-jsonata-editor", inputs: ["expression", "disabled", "suggestions", "functions"], outputs: ["expressionChange", "validChange"] }, { kind: "component", type: MappingBuilderComponent, selector: "epistola-mapping-builder", inputs: ["expression", "templateFields", "suggestions", "disabled"], outputs: ["expressionChange"] }, { kind: "component", type: MappingPreviewComponent, selector: "epistola-mapping-preview", inputs: ["expression", "templateFields", "caseDefinitionKey"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: GenerateDocumentConfigurationComponent, decorators: [{
             type: Component,
@@ -1829,8 +2080,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                         JsonataEditorComponent,
                         MappingBuilderComponent,
                         MappingPreviewComponent,
-                    ], template: "<v-form\n  (valueChange)=\"formValueChange($event)\"\n  *ngIf=\"{\n    disabled: disabled$ | async,\n    prefill: prefillConfiguration$ ? (prefillConfiguration$ | async) : null,\n    catalogs: catalogs$ | async,\n    templates: templates$ | async,\n    variants: variants$ | async,\n    environments: environments$ | async,\n    templateFields: templateFields$ | async,\n    selectedCatalogId: selectedCatalogId$ | async,\n    selectedTemplateId: selectedTemplateId$ | async,\n  } as obs\"\n>\n  <v-select\n    name=\"catalogId\"\n    [title]=\"'catalogId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'catalogIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [items]=\"obs.catalogs.data\"\n    [defaultSelectionId]=\"obs.prefill?.catalogId\"\n    [disabled]=\"obs.disabled || obs.catalogs.loading\"\n    [required]=\"true\"\n    [loading]=\"obs.catalogs.loading\"\n  >\n  </v-select>\n  <div *ngIf=\"obs.catalogs.error\" class=\"loading-error\">{{ obs.catalogs.error }}</div>\n\n  <v-select\n    name=\"templateId\"\n    [title]=\"'templateId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'templateIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [items]=\"obs.templates.data\"\n    [defaultSelectionId]=\"obs.prefill?.templateId\"\n    [disabled]=\"obs.disabled || obs.templates.loading || !obs.selectedCatalogId\"\n    [required]=\"true\"\n    [loading]=\"obs.templates.loading\"\n  >\n  </v-select>\n  <div *ngIf=\"obs.templates.error\" class=\"loading-error\">{{ obs.templates.error }}</div>\n\n  <!-- Variant selection mode toggle -->\n  <div class=\"variant-mode-toggle\" *ngIf=\"obs.selectedTemplateId\">\n    <label class=\"variant-mode-label\">{{\n      'variantSelectionMode' | pluginTranslate: pluginId | async\n    }}</label>\n    <div class=\"variant-mode-buttons\">\n      <button\n        type=\"button\"\n        class=\"variant-mode-btn\"\n        [class.active]=\"variantSelectionMode === 'explicit'\"\n        (click)=\"onVariantSelectionModeChange('explicit')\"\n        [disabled]=\"obs.disabled\"\n      >\n        {{ 'selectByVariant' | pluginTranslate: pluginId | async }}\n      </button>\n      <button\n        type=\"button\"\n        class=\"variant-mode-btn\"\n        [class.active]=\"variantSelectionMode === 'attributes'\"\n        (click)=\"onVariantSelectionModeChange('attributes')\"\n        [disabled]=\"obs.disabled\"\n      >\n        {{ 'selectByAttributes' | pluginTranslate: pluginId | async }}\n      </button>\n    </div>\n  </div>\n\n  <!-- Explicit variant selection (dropdown) -->\n  <v-select\n    *ngIf=\"variantSelectionMode === 'explicit'\"\n    name=\"variantId\"\n    [title]=\"'variantId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'variantIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [items]=\"obs.variants.data\"\n    [defaultSelectionId]=\"obs.prefill?.variantId\"\n    [disabled]=\"obs.disabled || obs.variants.loading || !obs.selectedTemplateId\"\n    [required]=\"false\"\n    [loading]=\"obs.variants.loading\"\n  >\n  </v-select>\n  <div *ngIf=\"obs.variants.error\" class=\"loading-error\">{{ obs.variants.error }}</div>\n\n  <!-- Attribute-based variant selection -->\n  <div\n    *ngIf=\"variantSelectionMode === 'attributes' && obs.selectedTemplateId\"\n    class=\"variant-attributes-section\"\n  >\n    <label class=\"variant-attributes-label\">{{\n      'variantAttributes' | pluginTranslate: pluginId | async\n    }}</label>\n    <div class=\"variant-attributes-list\">\n      <div\n        *ngFor=\"let entry of variantAttributeEntries; let i = index\"\n        class=\"variant-attribute-row\"\n      >\n        <select\n          *ngIf=\"!entry._customKey\"\n          class=\"variant-attribute-input\"\n          [ngModel]=\"entry.key\"\n          (ngModelChange)=\"onKeySelected(entry, $event)\"\n          [disabled]=\"obs.disabled\"\n        >\n          <option value=\"\" disabled>\n            {{ 'attributeKey' | pluginTranslate: pluginId | async }}\n          </option>\n          <option *ngFor=\"let key of availableAttributeKeys\" [value]=\"key\">{{ key }}</option>\n          <option value=\"__custom__\">\n            {{ 'attributeKeyCustom' | pluginTranslate: pluginId | async }}\n          </option>\n        </select>\n        <div *ngIf=\"entry._customKey\" class=\"custom-key-input\">\n          <input\n            type=\"text\"\n            class=\"variant-attribute-input\"\n            [placeholder]=\"'attributeKey' | pluginTranslate: pluginId | async\"\n            [(ngModel)]=\"entry.key\"\n            (ngModelChange)=\"onAttributeEntryChange()\"\n            [disabled]=\"obs.disabled\"\n          />\n          <button\n            type=\"button\"\n            class=\"custom-key-cancel\"\n            (click)=\"cancelCustomKey(entry)\"\n            [disabled]=\"obs.disabled\"\n          >\n            &times;\n          </button>\n        </div>\n        <input\n          type=\"text\"\n          class=\"variant-attribute-input\"\n          [placeholder]=\"'attributeValue' | pluginTranslate: pluginId | async\"\n          [(ngModel)]=\"entry.value\"\n          (ngModelChange)=\"onAttributeEntryChange()\"\n          [disabled]=\"obs.disabled\"\n        />\n        <label class=\"variant-attribute-required-toggle\">\n          <input\n            type=\"checkbox\"\n            [(ngModel)]=\"entry.required\"\n            (ngModelChange)=\"onAttributeEntryChange()\"\n            [disabled]=\"obs.disabled\"\n          />\n          <span class=\"required-label\">{{\n            (entry.required ? 'attributeRequired' : 'attributePreferred')\n              | pluginTranslate: pluginId\n              | async\n          }}</span>\n        </label>\n        <button\n          type=\"button\"\n          class=\"variant-attribute-remove-btn\"\n          (click)=\"removeAttributeEntry(i)\"\n          [disabled]=\"obs.disabled\"\n          title=\"{{ 'removeAttribute' | pluginTranslate: pluginId | async }}\"\n        >\n          &times;\n        </button>\n      </div>\n    </div>\n    <button\n      type=\"button\"\n      class=\"variant-attribute-add-btn\"\n      (click)=\"addAttributeEntry()\"\n      [disabled]=\"obs.disabled\"\n    >\n      + {{ 'addAttribute' | pluginTranslate: pluginId | async }}\n    </button>\n  </div>\n\n  <v-select\n    name=\"environmentId\"\n    [title]=\"'environmentId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'environmentIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [items]=\"obs.environments.data\"\n    [defaultSelectionId]=\"obs.prefill?.environmentId\"\n    [disabled]=\"obs.disabled || obs.environments.loading\"\n    [required]=\"false\"\n    [loading]=\"obs.environments.loading\"\n  >\n  </v-select>\n  <div *ngIf=\"obs.environments.error\" class=\"loading-error\">{{ obs.environments.error }}</div>\n\n  <v-select\n    name=\"outputFormat\"\n    [title]=\"'outputFormat' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'outputFormatTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [items]=\"outputFormatOptions\"\n    [defaultSelectionId]=\"obs.prefill?.outputFormat || 'PDF'\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-select>\n\n  <v-input\n    name=\"filename\"\n    [title]=\"'filename' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'filenameTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.filename\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"correlationId\"\n    [title]=\"'correlationId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'correlationIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.correlationId\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"false\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"resultProcessVariable\"\n    [title]=\"'resultProcessVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'resultProcessVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.resultProcessVariable\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-input>\n</v-form>\n\n<div *ngIf=\"(templateFields$ | async)?.error as templateFieldsError\" class=\"loading-error\">\n  {{ templateFieldsError }}\n</div>\n\n<div *ngIf=\"selectedTemplateId$ | async\" class=\"mapping-section\">\n  <h5 class=\"mapping-section__title\">\n    {{ 'dataMappingTitle' | pluginTranslate: pluginId | async }}\n  </h5>\n  <p class=\"mapping-section__description\">\n    {{ 'dataMappingDescription' | pluginTranslate: pluginId | async }}\n  </p>\n  <div class=\"mapping-mode-toggle\">\n    <button\n      class=\"mapping-mode-toggle__btn\"\n      [class.mapping-mode-toggle__btn--active]=\"mappingMode === 'simple'\"\n      (click)=\"mappingMode = 'simple'\"\n    >\n      {{ 'mappingModeSimple' | pluginTranslate: pluginId | async }}\n    </button>\n    <button\n      class=\"mapping-mode-toggle__btn\"\n      [class.mapping-mode-toggle__btn--active]=\"mappingMode === 'advanced'\"\n      (click)=\"mappingMode = 'advanced'\"\n    >\n      {{ 'mappingModeAdvanced' | pluginTranslate: pluginId | async }}\n    </button>\n  </div>\n\n  <!-- Editor area (full width) -->\n  <epistola-mapping-builder\n    *ngIf=\"mappingMode === 'simple'\"\n    [expression]=\"dataMapping$ | async\"\n    [templateFields]=\"(templateFields$ | async)?.data ?? []\"\n    [suggestions]=\"variableSuggestions\"\n    [disabled]=\"!!(disabled$ | async)\"\n    (expressionChange)=\"onDataMappingChange($event)\"\n  ></epistola-mapping-builder>\n\n  <epistola-jsonata-editor\n    *ngIf=\"mappingMode === 'advanced'\"\n    [expression]=\"dataMapping$ | async\"\n    [disabled]=\"!!(disabled$ | async)\"\n    [suggestions]=\"variableSuggestions\"\n    [functions]=\"expressionFunctions\"\n    (expressionChange)=\"onDataMappingChange($event)\"\n  ></epistola-jsonata-editor>\n\n  <!-- Bottom tabs: Schema + Preview (collapsible) -->\n  <div class=\"mapping-tools\" [class.mapping-tools--collapsed]=\"toolsCollapsed\">\n    <div class=\"mapping-tools__header\" (click)=\"toolsCollapsed = !toolsCollapsed\">\n      <span class=\"mapping-tools__chevron\">{{ toolsCollapsed ? '&#x25B6;' : '&#x25BC;' }}</span>\n      <span>{{ 'mappingTools' | pluginTranslate: pluginId | async }}</span>\n    </div>\n    <div *ngIf=\"!toolsCollapsed\" class=\"mapping-tools__content\">\n      <div class=\"mapping-tools__tabs\">\n        <button\n          class=\"mapping-tools__tab\"\n          [class.mapping-tools__tab--active]=\"activeToolTab === 'schema'\"\n          (click)=\"activeToolTab = 'schema'\"\n        >\n          {{ 'expectedStructure' | pluginTranslate: pluginId | async }}\n        </button>\n        <button\n          class=\"mapping-tools__tab\"\n          [class.mapping-tools__tab--active]=\"activeToolTab === 'preview'\"\n          (click)=\"activeToolTab = 'preview'\"\n        >\n          {{ 'previewTitle' | pluginTranslate: pluginId | async }}\n        </button>\n      </div>\n\n      <epistola-expected-structure\n        *ngIf=\"activeToolTab === 'schema'\"\n        [templateFields]=\"(templateFields$ | async)?.data ?? []\"\n      ></epistola-expected-structure>\n\n      <epistola-mapping-preview\n        *ngIf=\"activeToolTab === 'preview'\"\n        [expression]=\"dataMapping$ | async\"\n        [templateFields]=\"(templateFields$ | async)?.data ?? []\"\n        [caseDefinitionKey]=\"caseDefinitionKey\"\n      ></epistola-mapping-preview>\n    </div>\n  </div>\n</div>\n", styles: [".loading-error{padding:.25rem .75rem;font-size:.8125rem;color:#dc3545}.validation-summary{margin-top:.5rem;padding:.5rem .75rem;border-radius:4px;font-size:.875rem}.validation-summary .validation-complete{color:#198754}.validation-summary .validation-incomplete{color:#dc3545;font-weight:500}.variant-mode-toggle{margin-bottom:1rem;padding:0 .75rem}.variant-mode-label{display:block;font-size:.875rem;font-weight:500;margin-bottom:.375rem}.variant-mode-buttons{display:flex;gap:0;border:1px solid #d1d5db;border-radius:4px;overflow:hidden;width:fit-content}.variant-mode-btn{padding:.375rem .75rem;font-size:.8125rem;background:#fff;border:none;border-right:1px solid #d1d5db;cursor:pointer;color:#374151;transition:background-color .15s,color .15s}.variant-mode-btn:last-child{border-right:none}.variant-mode-btn:hover:not([disabled]){background:#f3f4f6}.variant-mode-btn.active{background:#2563eb;color:#fff}.variant-mode-btn[disabled]{opacity:.5;cursor:not-allowed}.variant-attributes-section{margin-bottom:1rem;padding:0 .75rem}.variant-attributes-label{display:block;font-size:.875rem;font-weight:500;margin-bottom:.375rem}.variant-attributes-list{display:flex;flex-direction:column;gap:.375rem}.variant-attribute-row{display:flex;gap:.375rem;align-items:center}.variant-attribute-input{flex:1;padding:.375rem .5rem;font-size:.8125rem;border:1px solid #d1d5db;border-radius:4px;outline:none}.variant-attribute-input:focus{border-color:#2563eb;box-shadow:0 0 0 1px #2563eb}.variant-attribute-input[disabled]{opacity:.5;background:#f9fafb}.custom-key-input{display:flex;flex:1;gap:.25rem}.custom-key-input .variant-attribute-input{flex:1}.custom-key-cancel{padding:.25rem .5rem;font-size:1rem;line-height:1;background:none;border:1px solid #d1d5db;border-radius:4px;cursor:pointer;color:#6b7280}.custom-key-cancel:hover:not([disabled]){color:#dc3545;border-color:#dc3545}.custom-key-cancel[disabled]{opacity:.5;cursor:not-allowed}.variant-attribute-required-toggle{display:flex;align-items:center;gap:.25rem;font-size:.75rem;color:#374151;white-space:nowrap;cursor:pointer}.variant-attribute-required-toggle input[type=checkbox]{margin:0;cursor:pointer}.variant-attribute-required-toggle .required-label{-webkit-user-select:none;user-select:none}.variant-attribute-remove-btn{padding:.25rem .5rem;font-size:1rem;line-height:1;background:none;border:1px solid #d1d5db;border-radius:4px;cursor:pointer;color:#6b7280}.variant-attribute-remove-btn:hover:not([disabled]){color:#dc3545;border-color:#dc3545}.variant-attribute-remove-btn[disabled]{opacity:.5;cursor:not-allowed}.variant-attribute-add-btn{margin-top:.375rem;padding:.25rem .5rem;font-size:.8125rem;background:none;border:1px dashed #d1d5db;border-radius:4px;cursor:pointer;color:#6b7280}.variant-attribute-add-btn:hover:not([disabled]){color:#2563eb;border-color:#2563eb}.variant-attribute-add-btn[disabled]{opacity:.5;cursor:not-allowed}.mapping-section{margin-top:1rem}.mapping-section__title{font-size:1rem;font-weight:600;margin:0 0 4px}.mapping-section__description{font-size:.85em;color:#6f6f6f;margin:0 0 12px}.mapping-mode-toggle{display:flex;gap:0;margin-bottom:12px}.mapping-mode-toggle__btn{padding:6px 16px;border:1px solid #e0e0e0;background:#fff;font-size:.85em;cursor:pointer}.mapping-mode-toggle__btn:first-child{border-radius:4px 0 0 4px}.mapping-mode-toggle__btn:last-child{border-radius:0 4px 4px 0;border-left:none}.mapping-mode-toggle__btn--active{background:#0f62fe;color:#fff;border-color:#0f62fe}.mapping-tools{margin-top:12px;border:1px solid #e0e0e0;border-radius:4px;overflow:hidden}.mapping-tools__header{display:flex;align-items:center;gap:6px;padding:8px 12px;background:#f4f4f4;cursor:pointer;font-size:.85em;font-weight:500;-webkit-user-select:none;user-select:none}.mapping-tools__header:hover{background:#e8e8e8}.mapping-tools__chevron{font-size:.7em}.mapping-tools__content{border-top:1px solid #e0e0e0}.mapping-tools__tabs{display:flex;border-bottom:1px solid #e0e0e0}.mapping-tools__tab{padding:6px 16px;border:none;background:transparent;font-size:.8em;cursor:pointer;border-bottom:2px solid transparent}.mapping-tools__tab--active{border-bottom-color:#0f62fe;font-weight:500}\n"] }]
-        }], ctorParameters: () => [{ type: EpistolaPluginService }, { type: i2$2.ProcessLinkStateService }, { type: i0.ChangeDetectorRef }], propDecorators: { save$: [{
+                    ], template: "<v-form\n  (valueChange)=\"formValueChange($event)\"\n  *ngIf=\"{\n    disabled: disabled$ | async,\n    prefill: prefillConfiguration$ ? (prefillConfiguration$ | async) : null,\n    catalogs: catalogs$ | async,\n    templates: templates$ | async,\n    variants: variants$ | async,\n    environments: environments$ | async,\n    templateFields: templateFields$ | async,\n    selectedCatalogId: selectedCatalogId$ | async,\n    selectedTemplateId: selectedTemplateId$ | async,\n    validationErrors: validationErrors$ | async,\n  } as obs\"\n>\n  <div\n    *ngIf=\"obs.validationErrors && obs.validationErrors.length > 0\"\n    class=\"jsonata-validation-errors\"\n  >\n    <strong>{{ 'jsonataValidationErrorsHeading' | pluginTranslate: pluginId | async }}</strong>\n    <ul>\n      <li *ngFor=\"let err of obs.validationErrors\">\n        <code>{{ err.field }}</code\n        >: {{ err.message }}\n      </li>\n    </ul>\n  </div>\n  <v-select\n    name=\"catalogId\"\n    [title]=\"'catalogId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'catalogIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [items]=\"obs.catalogs.data\"\n    [defaultSelectionId]=\"obs.prefill?.catalogId\"\n    [disabled]=\"obs.disabled || obs.catalogs.loading\"\n    [required]=\"true\"\n    [loading]=\"obs.catalogs.loading\"\n  >\n  </v-select>\n  <div *ngIf=\"obs.catalogs.error\" class=\"loading-error\">{{ obs.catalogs.error }}</div>\n\n  <v-select\n    name=\"templateId\"\n    [title]=\"'templateId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'templateIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [items]=\"obs.templates.data\"\n    [defaultSelectionId]=\"obs.prefill?.templateId\"\n    [disabled]=\"obs.disabled || obs.templates.loading || !obs.selectedCatalogId\"\n    [required]=\"true\"\n    [loading]=\"obs.templates.loading\"\n  >\n  </v-select>\n  <div *ngIf=\"obs.templates.error\" class=\"loading-error\">{{ obs.templates.error }}</div>\n\n  <!-- Variant selection mode toggle -->\n  <div class=\"variant-mode-toggle\" *ngIf=\"obs.selectedTemplateId\">\n    <label class=\"variant-mode-label\">{{\n      'variantSelectionMode' | pluginTranslate: pluginId | async\n    }}</label>\n    <div class=\"variant-mode-buttons\">\n      <button\n        type=\"button\"\n        class=\"variant-mode-btn\"\n        [class.active]=\"variantSelectionMode === 'explicit'\"\n        (click)=\"onVariantSelectionModeChange('explicit')\"\n        [disabled]=\"obs.disabled\"\n      >\n        {{ 'selectByVariant' | pluginTranslate: pluginId | async }}\n      </button>\n      <button\n        type=\"button\"\n        class=\"variant-mode-btn\"\n        [class.active]=\"variantSelectionMode === 'attributes'\"\n        (click)=\"onVariantSelectionModeChange('attributes')\"\n        [disabled]=\"obs.disabled\"\n      >\n        {{ 'selectByAttributes' | pluginTranslate: pluginId | async }}\n      </button>\n    </div>\n  </div>\n\n  <!-- Explicit variant selection (dropdown or expression) -->\n  <div *ngIf=\"variantSelectionMode === 'explicit'\" class=\"field-with-fx\">\n    <v-select\n      *ngIf=\"!variantIdExpressionMode\"\n      name=\"variantId\"\n      [title]=\"'variantId' | pluginTranslate: pluginId | async\"\n      [tooltip]=\"'variantIdTooltip' | pluginTranslate: pluginId | async\"\n      [margin]=\"true\"\n      [items]=\"obs.variants.data\"\n      [defaultSelectionId]=\"obs.prefill?.variantId\"\n      [disabled]=\"obs.disabled || obs.variants.loading || !obs.selectedTemplateId\"\n      [required]=\"false\"\n      [loading]=\"obs.variants.loading\"\n    >\n    </v-select>\n    <div *ngIf=\"variantIdExpressionMode\" class=\"fx-input-group\">\n      <label class=\"fx-input-label\">{{ 'variantId' | pluginTranslate: pluginId | async }}</label>\n      <input\n        type=\"text\"\n        class=\"fx-input\"\n        [ngModel]=\"variantIdExpression\"\n        (ngModelChange)=\"variantIdExpression = $event; onVariantIdExpressionChange()\"\n        [disabled]=\"obs.disabled\"\n        placeholder=\"$pv.letterType\"\n      />\n    </div>\n    <button\n      type=\"button\"\n      class=\"fx-toggle\"\n      (click)=\"variantIdExpressionMode = !variantIdExpressionMode\"\n      [disabled]=\"obs.disabled\"\n      [title]=\"variantIdExpressionMode ? 'Switch to dropdown' : 'Switch to expression'\"\n    >\n      {{ variantIdExpressionMode ? '\u00B7' : 'fx' }}\n    </button>\n  </div>\n  <div *ngIf=\"obs.variants.error\" class=\"loading-error\">{{ obs.variants.error }}</div>\n\n  <!-- Attribute-based variant selection -->\n  <div\n    *ngIf=\"variantSelectionMode === 'attributes' && obs.selectedTemplateId\"\n    class=\"variant-attributes-section\"\n  >\n    <label class=\"variant-attributes-label\">{{\n      'variantAttributes' | pluginTranslate: pluginId | async\n    }}</label>\n    <div class=\"variant-attributes-list\">\n      <div\n        *ngFor=\"let entry of variantAttributeEntries; let i = index\"\n        class=\"variant-attribute-row\"\n      >\n        <select\n          *ngIf=\"!entry._customKey\"\n          class=\"variant-attribute-input\"\n          [ngModel]=\"entry.key\"\n          (ngModelChange)=\"onKeySelected(entry, $event)\"\n          [disabled]=\"obs.disabled\"\n        >\n          <option value=\"\" disabled>\n            {{ 'attributeKey' | pluginTranslate: pluginId | async }}\n          </option>\n          <option *ngFor=\"let key of availableAttributeKeys\" [value]=\"key\">{{ key }}</option>\n          <option value=\"__custom__\">\n            {{ 'attributeKeyCustom' | pluginTranslate: pluginId | async }}\n          </option>\n        </select>\n        <div *ngIf=\"entry._customKey\" class=\"custom-key-input\">\n          <input\n            type=\"text\"\n            class=\"variant-attribute-input\"\n            [placeholder]=\"'attributeKey' | pluginTranslate: pluginId | async\"\n            [(ngModel)]=\"entry.key\"\n            (ngModelChange)=\"onAttributeEntryChange()\"\n            [disabled]=\"obs.disabled\"\n          />\n          <button\n            type=\"button\"\n            class=\"custom-key-cancel\"\n            (click)=\"cancelCustomKey(entry)\"\n            [disabled]=\"obs.disabled\"\n          >\n            &times;\n          </button>\n        </div>\n        <div class=\"attribute-value-with-fx\">\n          <input\n            type=\"text\"\n            class=\"variant-attribute-input\"\n            [class.fx-input]=\"entry._expressionMode\"\n            [placeholder]=\"\n              entry._expressionMode\n                ? '$pv.language'\n                : ('attributeValue' | pluginTranslate: pluginId | async)\n            \"\n            [(ngModel)]=\"entry.value\"\n            (ngModelChange)=\"onAttributeEntryChange()\"\n            [disabled]=\"obs.disabled\"\n          />\n          <button\n            type=\"button\"\n            class=\"fx-toggle fx-toggle--inline\"\n            (click)=\"entry._expressionMode = !entry._expressionMode\"\n            [disabled]=\"obs.disabled\"\n            [title]=\"entry._expressionMode ? 'Switch to plain value' : 'Switch to expression'\"\n          >\n            {{ entry._expressionMode ? '\u00B7' : 'fx' }}\n          </button>\n        </div>\n        <label class=\"variant-attribute-required-toggle\">\n          <input\n            type=\"checkbox\"\n            [(ngModel)]=\"entry.required\"\n            (ngModelChange)=\"onAttributeEntryChange()\"\n            [disabled]=\"obs.disabled\"\n          />\n          <span class=\"required-label\">{{\n            (entry.required ? 'attributeRequired' : 'attributePreferred')\n              | pluginTranslate: pluginId\n              | async\n          }}</span>\n        </label>\n        <button\n          type=\"button\"\n          class=\"variant-attribute-remove-btn\"\n          (click)=\"removeAttributeEntry(i)\"\n          [disabled]=\"obs.disabled\"\n          title=\"{{ 'removeAttribute' | pluginTranslate: pluginId | async }}\"\n        >\n          &times;\n        </button>\n      </div>\n    </div>\n    <button\n      type=\"button\"\n      class=\"variant-attribute-add-btn\"\n      (click)=\"addAttributeEntry()\"\n      [disabled]=\"obs.disabled\"\n    >\n      + {{ 'addAttribute' | pluginTranslate: pluginId | async }}\n    </button>\n  </div>\n\n  <v-select\n    name=\"environmentId\"\n    [title]=\"'environmentId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'environmentIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [items]=\"obs.environments.data\"\n    [defaultSelectionId]=\"obs.prefill?.environmentId\"\n    [disabled]=\"obs.disabled || obs.environments.loading\"\n    [required]=\"false\"\n    [loading]=\"obs.environments.loading\"\n  >\n  </v-select>\n  <div *ngIf=\"obs.environments.error\" class=\"loading-error\">{{ obs.environments.error }}</div>\n\n  <v-select\n    name=\"outputFormat\"\n    [title]=\"'outputFormat' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'outputFormatTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [items]=\"outputFormatOptions\"\n    [defaultSelectionId]=\"obs.prefill?.outputFormat || 'PDF'\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-select>\n\n  <div class=\"field-with-fx\">\n    <v-input\n      *ngIf=\"!filenameExpressionMode\"\n      name=\"filename\"\n      [title]=\"'filename' | pluginTranslate: pluginId | async\"\n      [tooltip]=\"'filenameTooltip' | pluginTranslate: pluginId | async\"\n      [margin]=\"true\"\n      [defaultValue]=\"obs.prefill?.filename\"\n      [disabled]=\"obs.disabled\"\n      [required]=\"true\"\n    >\n    </v-input>\n    <div *ngIf=\"filenameExpressionMode\" class=\"fx-input-group\">\n      <label class=\"fx-input-label\">{{ 'filename' | pluginTranslate: pluginId | async }}</label>\n      <input\n        type=\"text\"\n        class=\"fx-input\"\n        [ngModel]=\"filenameExpression\"\n        (ngModelChange)=\"filenameExpression = $event; onFilenameExpressionChange()\"\n        [disabled]=\"obs.disabled\"\n        placeholder='\"besluit-\" & $doc.name & \".pdf\"'\n      />\n    </div>\n    <button\n      type=\"button\"\n      class=\"fx-toggle\"\n      (click)=\"filenameExpressionMode = !filenameExpressionMode\"\n      [disabled]=\"obs.disabled\"\n      [title]=\"filenameExpressionMode ? 'Switch to plain input' : 'Switch to expression'\"\n    >\n      {{ filenameExpressionMode ? '\u00B7' : 'fx' }}\n    </button>\n  </div>\n\n  <v-input\n    name=\"correlationId\"\n    [title]=\"'correlationId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'correlationIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.correlationId\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"false\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"resultProcessVariable\"\n    [title]=\"'resultProcessVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'resultProcessVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.resultProcessVariable\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-input>\n</v-form>\n\n<div *ngIf=\"(templateFields$ | async)?.error as templateFieldsError\" class=\"loading-error\">\n  {{ templateFieldsError }}\n</div>\n\n<div *ngIf=\"selectedTemplateId$ | async\" class=\"mapping-section\">\n  <h5 class=\"mapping-section__title\">\n    {{ 'dataMappingTitle' | pluginTranslate: pluginId | async }}\n  </h5>\n  <p class=\"mapping-section__description\">\n    {{ 'dataMappingDescription' | pluginTranslate: pluginId | async }}\n  </p>\n  <div class=\"mapping-mode-toggle\">\n    <button\n      class=\"mapping-mode-toggle__btn\"\n      [class.mapping-mode-toggle__btn--active]=\"mappingMode === 'simple'\"\n      (click)=\"mappingMode = 'simple'\"\n    >\n      {{ 'mappingModeSimple' | pluginTranslate: pluginId | async }}\n    </button>\n    <button\n      class=\"mapping-mode-toggle__btn\"\n      [class.mapping-mode-toggle__btn--active]=\"mappingMode === 'advanced'\"\n      (click)=\"mappingMode = 'advanced'\"\n    >\n      {{ 'mappingModeAdvanced' | pluginTranslate: pluginId | async }}\n    </button>\n  </div>\n\n  <!-- Editor area (full width) -->\n  <epistola-mapping-builder\n    *ngIf=\"mappingMode === 'simple'\"\n    [expression]=\"dataMapping$ | async\"\n    [templateFields]=\"(templateFields$ | async)?.data ?? []\"\n    [suggestions]=\"variableSuggestions\"\n    [disabled]=\"!!(disabled$ | async)\"\n    (expressionChange)=\"onDataMappingChange($event)\"\n  ></epistola-mapping-builder>\n\n  <epistola-jsonata-editor\n    *ngIf=\"mappingMode === 'advanced'\"\n    [expression]=\"dataMapping$ | async\"\n    [disabled]=\"!!(disabled$ | async)\"\n    [suggestions]=\"variableSuggestions\"\n    [functions]=\"expressionFunctions\"\n    (expressionChange)=\"onDataMappingChange($event)\"\n  ></epistola-jsonata-editor>\n\n  <!-- Bottom tabs: Schema + Preview (collapsible) -->\n  <div class=\"mapping-tools\" [class.mapping-tools--collapsed]=\"toolsCollapsed\">\n    <div class=\"mapping-tools__header\" (click)=\"toolsCollapsed = !toolsCollapsed\">\n      <span class=\"mapping-tools__chevron\">{{ toolsCollapsed ? '&#x25B6;' : '&#x25BC;' }}</span>\n      <span>{{ 'mappingTools' | pluginTranslate: pluginId | async }}</span>\n    </div>\n    <div *ngIf=\"!toolsCollapsed\" class=\"mapping-tools__content\">\n      <div class=\"mapping-tools__tabs\">\n        <button\n          class=\"mapping-tools__tab\"\n          [class.mapping-tools__tab--active]=\"activeToolTab === 'schema'\"\n          (click)=\"activeToolTab = 'schema'\"\n        >\n          {{ 'expectedStructure' | pluginTranslate: pluginId | async }}\n        </button>\n        <button\n          class=\"mapping-tools__tab\"\n          [class.mapping-tools__tab--active]=\"activeToolTab === 'preview'\"\n          (click)=\"activeToolTab = 'preview'\"\n        >\n          {{ 'previewTitle' | pluginTranslate: pluginId | async }}\n        </button>\n      </div>\n\n      <epistola-expected-structure\n        *ngIf=\"activeToolTab === 'schema'\"\n        [templateFields]=\"(templateFields$ | async)?.data ?? []\"\n      ></epistola-expected-structure>\n\n      <epistola-mapping-preview\n        *ngIf=\"activeToolTab === 'preview'\"\n        [expression]=\"dataMapping$ | async\"\n        [templateFields]=\"(templateFields$ | async)?.data ?? []\"\n        [caseDefinitionKey]=\"caseDefinitionKey\"\n      ></epistola-mapping-preview>\n    </div>\n  </div>\n</div>\n", styles: [".loading-error{padding:.25rem .75rem;font-size:.8125rem;color:#dc3545}.jsonata-validation-errors{margin-bottom:1rem;padding:.75rem 1rem;border:1px solid #dc3545;border-radius:4px;background:#fdf3f4;color:#dc3545;font-size:.875rem}.jsonata-validation-errors ul{margin:.5rem 0 0;padding-left:1.25rem}.jsonata-validation-errors code{background:#dc35451a;padding:0 .25rem;border-radius:2px;font-family:monospace}.validation-summary{margin-top:.5rem;padding:.5rem .75rem;border-radius:4px;font-size:.875rem}.validation-summary .validation-complete{color:#198754}.validation-summary .validation-incomplete{color:#dc3545;font-weight:500}.variant-mode-toggle{margin-bottom:1rem;padding:0 .75rem}.variant-mode-label{display:block;font-size:.875rem;font-weight:500;margin-bottom:.375rem}.variant-mode-buttons{display:flex;gap:0;border:1px solid #d1d5db;border-radius:4px;overflow:hidden;width:fit-content}.variant-mode-btn{padding:.375rem .75rem;font-size:.8125rem;background:#fff;border:none;border-right:1px solid #d1d5db;cursor:pointer;color:#374151;transition:background-color .15s,color .15s}.variant-mode-btn:last-child{border-right:none}.variant-mode-btn:hover:not([disabled]){background:#f3f4f6}.variant-mode-btn.active{background:#2563eb;color:#fff}.variant-mode-btn[disabled]{opacity:.5;cursor:not-allowed}.variant-attributes-section{margin-bottom:1rem;padding:0 .75rem}.variant-attributes-label{display:block;font-size:.875rem;font-weight:500;margin-bottom:.375rem}.variant-attributes-list{display:flex;flex-direction:column;gap:.375rem}.variant-attribute-row{display:flex;gap:.375rem;align-items:center}.variant-attribute-input{flex:1;padding:.375rem .5rem;font-size:.8125rem;border:1px solid #d1d5db;border-radius:4px;outline:none}.variant-attribute-input:focus{border-color:#2563eb;box-shadow:0 0 0 1px #2563eb}.variant-attribute-input[disabled]{opacity:.5;background:#f9fafb}.custom-key-input{display:flex;flex:1;gap:.25rem}.custom-key-input .variant-attribute-input{flex:1}.custom-key-cancel{padding:.25rem .5rem;font-size:1rem;line-height:1;background:none;border:1px solid #d1d5db;border-radius:4px;cursor:pointer;color:#6b7280}.custom-key-cancel:hover:not([disabled]){color:#dc3545;border-color:#dc3545}.custom-key-cancel[disabled]{opacity:.5;cursor:not-allowed}.variant-attribute-required-toggle{display:flex;align-items:center;gap:.25rem;font-size:.75rem;color:#374151;white-space:nowrap;cursor:pointer}.variant-attribute-required-toggle input[type=checkbox]{margin:0;cursor:pointer}.variant-attribute-required-toggle .required-label{-webkit-user-select:none;user-select:none}.variant-attribute-remove-btn{padding:.25rem .5rem;font-size:1rem;line-height:1;background:none;border:1px solid #d1d5db;border-radius:4px;cursor:pointer;color:#6b7280}.variant-attribute-remove-btn:hover:not([disabled]){color:#dc3545;border-color:#dc3545}.variant-attribute-remove-btn[disabled]{opacity:.5;cursor:not-allowed}.variant-attribute-add-btn{margin-top:.375rem;padding:.25rem .5rem;font-size:.8125rem;background:none;border:1px dashed #d1d5db;border-radius:4px;cursor:pointer;color:#6b7280}.variant-attribute-add-btn:hover:not([disabled]){color:#2563eb;border-color:#2563eb}.variant-attribute-add-btn[disabled]{opacity:.5;cursor:not-allowed}.field-with-fx{display:flex;align-items:flex-start;gap:4px}.field-with-fx>*:first-child{flex:1;min-width:0}.fx-toggle{width:28px;height:28px;margin-top:22px;border:1px solid #e0e0e0;border-radius:4px;background:#fff;cursor:pointer;font-family:monospace;font-size:.8em;display:flex;align-items:center;justify-content:center;flex-shrink:0}.fx-toggle:hover{background:#f4f4f4}.fx-toggle--inline{margin-top:0}.fx-input-group{flex:1;min-width:0;margin-bottom:.75rem}.fx-input-label{display:block;font-size:.875rem;margin-bottom:.25rem;color:#525252}.fx-input{width:100%;border:1px solid #8d8d8d;border-radius:0;padding:.4rem .75rem;font-family:monospace;font-size:.875rem;background:#f4f4f4}.attribute-value-with-fx{display:flex;align-items:center;gap:4px;flex:1;min-width:0}.attribute-value-with-fx>input{flex:1;min-width:0}.mapping-section{margin-top:1rem}.mapping-section__title{font-size:1rem;font-weight:600;margin:0 0 4px}.mapping-section__description{font-size:.85em;color:#6f6f6f;margin:0 0 12px}.mapping-mode-toggle{display:flex;gap:0;margin-bottom:12px}.mapping-mode-toggle__btn{padding:6px 16px;border:1px solid #e0e0e0;background:#fff;font-size:.85em;cursor:pointer}.mapping-mode-toggle__btn:first-child{border-radius:4px 0 0 4px}.mapping-mode-toggle__btn:last-child{border-radius:0 4px 4px 0;border-left:none}.mapping-mode-toggle__btn--active{background:#0f62fe;color:#fff;border-color:#0f62fe}.mapping-tools{margin-top:12px;border:1px solid #e0e0e0;border-radius:4px;overflow:hidden}.mapping-tools__header{display:flex;align-items:center;gap:6px;padding:8px 12px;background:#f4f4f4;cursor:pointer;font-size:.85em;font-weight:500;-webkit-user-select:none;user-select:none}.mapping-tools__header:hover{background:#e8e8e8}.mapping-tools__chevron{font-size:.7em}.mapping-tools__content{border-top:1px solid #e0e0e0}.mapping-tools__tabs{display:flex;border-bottom:1px solid #e0e0e0}.mapping-tools__tab{padding:6px 16px;border:none;background:transparent;font-size:.8em;cursor:pointer;border-bottom:2px solid transparent}.mapping-tools__tab--active{border-bottom-color:#0f62fe;font-weight:500}\n"] }]
+        }], ctorParameters: () => [{ type: EpistolaPluginService }, { type: i2$3.ProcessLinkStateService }, { type: i0.ChangeDetectorRef }], propDecorators: { save$: [{
                 type: Input
             }], disabled$: [{
                 type: Input
@@ -1858,9 +2109,17 @@ class CheckJobStatusConfigurationComponent {
     saveSubscription;
     formValue$ = new BehaviorSubject(null);
     valid$ = new BehaviorSubject(false);
+    /** Resolved synchronously before the v-form renders — see download-document-configuration for the why. */
+    resolvedPrefill = {};
+    prefillResolved$ = new BehaviorSubject(false);
     safeDisabled$;
     ngOnInit() {
         this.safeDisabled$ = this.disabled$.pipe(startWith(true), delay(0));
+        const prefill$ = this.prefillConfiguration$ ?? of({});
+        prefill$.pipe(take(1)).subscribe((prefill) => {
+            this.resolvedPrefill = prefill ?? {};
+            this.prefillResolved$.next(true);
+        });
         this.openSaveSubscription();
     }
     ngOnDestroy() {
@@ -1888,11 +2147,11 @@ class CheckJobStatusConfigurationComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: CheckJobStatusConfigurationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: CheckJobStatusConfigurationComponent, isStandalone: true, selector: "epistola-check-job-status-configuration", inputs: { save$: "save$", disabled$: "disabled$", pluginId: "pluginId", prefillConfiguration$: "prefillConfiguration$" }, outputs: { valid: "valid", configuration: "configuration" }, ngImport: i0, template: "<v-form\n  (valueChange)=\"formValueChange($event)\"\n  *ngIf=\"{\n    disabled: safeDisabled$ | async,\n    prefill: prefillConfiguration$ ? (prefillConfiguration$ | async) : null,\n  } as obs\"\n>\n  <v-input\n    name=\"requestIdVariable\"\n    [title]=\"'requestIdVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'requestIdVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.requestIdVariable || 'epistolaRequestId'\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"statusVariable\"\n    [title]=\"'statusVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'statusVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.statusVariable || 'epistolaStatus'\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"documentIdVariable\"\n    [title]=\"'documentIdVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'documentIdVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.documentIdVariable || 'epistolaDocumentId'\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"false\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"errorMessageVariable\"\n    [title]=\"'errorMessageVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'errorMessageVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.errorMessageVariable || 'epistolaErrorMessage'\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"false\"\n  >\n  </v-input>\n</v-form>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: PluginTranslatePipeModule }, { kind: "pipe", type: i2$1.PluginTranslatePipe, name: "pluginTranslate" }, { kind: "ngmodule", type: FormModule }, { kind: "component", type: i3.FormComponent, selector: "v-form", inputs: ["className"], outputs: ["valueChange"] }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i3.InputComponent, selector: "v-input", inputs: ["name", "type", "title", "titleTranslationKey", "defaultValue", "widthPx", "fullWidth", "margin", "smallMargin", "disabled", "step", "min", "maxLength", "tooltip", "required", "hideNumberSpinBox", "smallLabel", "rows", "clear$", "carbonTheme", "placeholder", "dataTestId", "trim", "presetsTitle", "presetOptions"], outputs: ["valueChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: CheckJobStatusConfigurationComponent, isStandalone: true, selector: "epistola-check-job-status-configuration", inputs: { save$: "save$", disabled$: "disabled$", pluginId: "pluginId", prefillConfiguration$: "prefillConfiguration$" }, outputs: { valid: "valid", configuration: "configuration" }, ngImport: i0, template: "<v-form (valueChange)=\"formValueChange($event)\" *ngIf=\"prefillResolved$ | async\">\n  <v-input\n    name=\"requestIdVariable\"\n    [title]=\"'requestIdVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'requestIdVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"resolvedPrefill?.requestIdVariable\"\n    [disabled]=\"safeDisabled$ | async\"\n    [required]=\"true\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"statusVariable\"\n    [title]=\"'statusVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'statusVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"resolvedPrefill?.statusVariable\"\n    [disabled]=\"safeDisabled$ | async\"\n    [required]=\"true\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"documentIdVariable\"\n    [title]=\"'documentIdVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'documentIdVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"resolvedPrefill?.documentIdVariable\"\n    [disabled]=\"safeDisabled$ | async\"\n    [required]=\"false\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"errorMessageVariable\"\n    [title]=\"'errorMessageVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'errorMessageVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"resolvedPrefill?.errorMessageVariable\"\n    [disabled]=\"safeDisabled$ | async\"\n    [required]=\"false\"\n  >\n  </v-input>\n</v-form>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: PluginTranslatePipeModule }, { kind: "pipe", type: i2$1.PluginTranslatePipe, name: "pluginTranslate" }, { kind: "ngmodule", type: FormModule }, { kind: "component", type: i3.FormComponent, selector: "v-form", inputs: ["className"], outputs: ["valueChange"] }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i3.InputComponent, selector: "v-input", inputs: ["name", "type", "title", "titleTranslationKey", "defaultValue", "widthPx", "fullWidth", "margin", "smallMargin", "disabled", "step", "min", "maxLength", "tooltip", "required", "hideNumberSpinBox", "smallLabel", "rows", "clear$", "carbonTheme", "placeholder", "dataTestId", "trim", "presetsTitle", "presetOptions"], outputs: ["valueChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: CheckJobStatusConfigurationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'epistola-check-job-status-configuration', standalone: true, imports: [CommonModule, PluginTranslatePipeModule, FormModule, InputModule], template: "<v-form\n  (valueChange)=\"formValueChange($event)\"\n  *ngIf=\"{\n    disabled: safeDisabled$ | async,\n    prefill: prefillConfiguration$ ? (prefillConfiguration$ | async) : null,\n  } as obs\"\n>\n  <v-input\n    name=\"requestIdVariable\"\n    [title]=\"'requestIdVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'requestIdVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.requestIdVariable || 'epistolaRequestId'\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"statusVariable\"\n    [title]=\"'statusVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'statusVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.statusVariable || 'epistolaStatus'\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"documentIdVariable\"\n    [title]=\"'documentIdVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'documentIdVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.documentIdVariable || 'epistolaDocumentId'\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"false\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"errorMessageVariable\"\n    [title]=\"'errorMessageVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'errorMessageVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.errorMessageVariable || 'epistolaErrorMessage'\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"false\"\n  >\n  </v-input>\n</v-form>\n" }]
+            args: [{ selector: 'epistola-check-job-status-configuration', standalone: true, imports: [CommonModule, PluginTranslatePipeModule, FormModule, InputModule], template: "<v-form (valueChange)=\"formValueChange($event)\" *ngIf=\"prefillResolved$ | async\">\n  <v-input\n    name=\"requestIdVariable\"\n    [title]=\"'requestIdVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'requestIdVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"resolvedPrefill?.requestIdVariable\"\n    [disabled]=\"safeDisabled$ | async\"\n    [required]=\"true\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"statusVariable\"\n    [title]=\"'statusVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'statusVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"resolvedPrefill?.statusVariable\"\n    [disabled]=\"safeDisabled$ | async\"\n    [required]=\"true\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"documentIdVariable\"\n    [title]=\"'documentIdVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'documentIdVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"resolvedPrefill?.documentIdVariable\"\n    [disabled]=\"safeDisabled$ | async\"\n    [required]=\"false\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"errorMessageVariable\"\n    [title]=\"'errorMessageVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'errorMessageVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"resolvedPrefill?.errorMessageVariable\"\n    [disabled]=\"safeDisabled$ | async\"\n    [required]=\"false\"\n  >\n  </v-input>\n</v-form>\n" }]
         }], propDecorators: { save$: [{
                 type: Input
             }], disabled$: [{
@@ -1917,9 +2176,21 @@ class DownloadDocumentConfigurationComponent {
     saveSubscription;
     formValue$ = new BehaviorSubject(null);
     valid$ = new BehaviorSubject(false);
+    /**
+     * Resolved prefill — populated synchronously before the v-form renders. Avoids the
+     * v-input `[defaultValue]` async-binding race that otherwise drops one of the
+     * fields when prefill arrives after mount.
+     */
+    resolvedPrefill = {};
+    prefillResolved$ = new BehaviorSubject(false);
     safeDisabled$;
     ngOnInit() {
         this.safeDisabled$ = this.disabled$.pipe(startWith(true), delay(0));
+        const prefill$ = this.prefillConfiguration$ ?? of({});
+        prefill$.pipe(take(1)).subscribe((prefill) => {
+            this.resolvedPrefill = prefill ?? {};
+            this.prefillResolved$.next(true);
+        });
         this.openSaveSubscription();
     }
     ngOnDestroy() {
@@ -1931,7 +2202,7 @@ class DownloadDocumentConfigurationComponent {
         this.handleValid(formValue);
     }
     handleValid(formValue) {
-        const valid = !!(formValue?.documentIdVariable && formValue?.contentVariable);
+        const valid = !!(formValue?.documentVariable && formValue?.contentVariable);
         this.valid$.next(valid);
         this.valid.emit(valid);
     }
@@ -1947,11 +2218,11 @@ class DownloadDocumentConfigurationComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DownloadDocumentConfigurationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: DownloadDocumentConfigurationComponent, isStandalone: true, selector: "epistola-download-document-configuration", inputs: { save$: "save$", disabled$: "disabled$", pluginId: "pluginId", prefillConfiguration$: "prefillConfiguration$" }, outputs: { valid: "valid", configuration: "configuration" }, ngImport: i0, template: "<v-form\n  (valueChange)=\"formValueChange($event)\"\n  *ngIf=\"{\n    disabled: safeDisabled$ | async,\n    prefill: prefillConfiguration$ ? (prefillConfiguration$ | async) : null,\n  } as obs\"\n>\n  <v-input\n    name=\"documentIdVariable\"\n    [title]=\"'documentIdVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'documentIdVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.documentIdVariable || 'epistolaDocumentId'\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"contentVariable\"\n    [title]=\"'contentVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'contentVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.contentVariable || 'documentContent'\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-input>\n</v-form>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: PluginTranslatePipeModule }, { kind: "pipe", type: i2$1.PluginTranslatePipe, name: "pluginTranslate" }, { kind: "ngmodule", type: FormModule }, { kind: "component", type: i3.FormComponent, selector: "v-form", inputs: ["className"], outputs: ["valueChange"] }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i3.InputComponent, selector: "v-input", inputs: ["name", "type", "title", "titleTranslationKey", "defaultValue", "widthPx", "fullWidth", "margin", "smallMargin", "disabled", "step", "min", "maxLength", "tooltip", "required", "hideNumberSpinBox", "smallLabel", "rows", "clear$", "carbonTheme", "placeholder", "dataTestId", "trim", "presetsTitle", "presetOptions"], outputs: ["valueChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: DownloadDocumentConfigurationComponent, isStandalone: true, selector: "epistola-download-document-configuration", inputs: { save$: "save$", disabled$: "disabled$", pluginId: "pluginId", prefillConfiguration$: "prefillConfiguration$" }, outputs: { valid: "valid", configuration: "configuration" }, ngImport: i0, template: "<v-form (valueChange)=\"formValueChange($event)\" *ngIf=\"prefillResolved$ | async\">\n  <v-input\n    name=\"documentVariable\"\n    [title]=\"'documentVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'documentVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"resolvedPrefill?.documentVariable\"\n    [disabled]=\"safeDisabled$ | async\"\n    [required]=\"true\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"contentVariable\"\n    [title]=\"'contentVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'contentVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"resolvedPrefill?.contentVariable\"\n    [disabled]=\"safeDisabled$ | async\"\n    [required]=\"true\"\n  >\n  </v-input>\n</v-form>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: PluginTranslatePipeModule }, { kind: "pipe", type: i2$1.PluginTranslatePipe, name: "pluginTranslate" }, { kind: "ngmodule", type: FormModule }, { kind: "component", type: i3.FormComponent, selector: "v-form", inputs: ["className"], outputs: ["valueChange"] }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i3.InputComponent, selector: "v-input", inputs: ["name", "type", "title", "titleTranslationKey", "defaultValue", "widthPx", "fullWidth", "margin", "smallMargin", "disabled", "step", "min", "maxLength", "tooltip", "required", "hideNumberSpinBox", "smallLabel", "rows", "clear$", "carbonTheme", "placeholder", "dataTestId", "trim", "presetsTitle", "presetOptions"], outputs: ["valueChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DownloadDocumentConfigurationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'epistola-download-document-configuration', standalone: true, imports: [CommonModule, PluginTranslatePipeModule, FormModule, InputModule], template: "<v-form\n  (valueChange)=\"formValueChange($event)\"\n  *ngIf=\"{\n    disabled: safeDisabled$ | async,\n    prefill: prefillConfiguration$ ? (prefillConfiguration$ | async) : null,\n  } as obs\"\n>\n  <v-input\n    name=\"documentIdVariable\"\n    [title]=\"'documentIdVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'documentIdVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.documentIdVariable || 'epistolaDocumentId'\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"contentVariable\"\n    [title]=\"'contentVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'contentVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.contentVariable || 'documentContent'\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-input>\n</v-form>\n" }]
+            args: [{ selector: 'epistola-download-document-configuration', standalone: true, imports: [CommonModule, PluginTranslatePipeModule, FormModule, InputModule], template: "<v-form (valueChange)=\"formValueChange($event)\" *ngIf=\"prefillResolved$ | async\">\n  <v-input\n    name=\"documentVariable\"\n    [title]=\"'documentVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'documentVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"resolvedPrefill?.documentVariable\"\n    [disabled]=\"safeDisabled$ | async\"\n    [required]=\"true\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"contentVariable\"\n    [title]=\"'contentVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'contentVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"resolvedPrefill?.contentVariable\"\n    [disabled]=\"safeDisabled$ | async\"\n    [required]=\"true\"\n  >\n  </v-input>\n</v-form>\n" }]
         }], propDecorators: { save$: [{
                 type: Input
             }], disabled$: [{
@@ -1966,35 +2237,89 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 type: Output
             }] } });
 
-class EpistolaDownloadComponent {
-    http;
+/**
+ * Unified Formio component for the after-generation Epistola PDF UX. Reads
+ * the PDF id and tenant id from named process variables on the caller's
+ * task via the {@code /documents/download} endpoint.
+ *
+ * <p>Three presentations, all backed by the same backend call:
+ * <ul>
+ *   <li>{@code display="inline"} — render the PDF inline in a panel.</li>
+ *   <li>{@code display="button"} — show a click-to-save download button only.</li>
+ *   <li>{@code display="both"} (default) — inline panel with a download icon
+ *       in the header.</li>
+ * </ul>
+ *
+ * <p>For the dry-run / what-would-be-generated UX use
+ * {@code epistola-document-preview} instead.
+ */
+class EpistolaDocumentComponent {
+    epistolaPluginService;
+    sanitizer;
+    formIoStateService;
+    taskContext;
+    cdr;
     value;
     valueChange = new EventEmitter();
     disabled = false;
+    label = 'Document';
+    /** How to present the document. `both` (default) shows an inline panel with a download icon. */
+    display = 'both';
+    /**
+     * Process-variable name holding the Epistola result. Default: `epistolaResult`.
+     *
+     * Type-tolerant on the backend: if the named variable holds a rich result object
+     * (`Map<String, Object>` written by `generate-document` and updated by the result
+     * collector), the backend digs out the `documentId` key. If it holds a plain
+     * String (custom flow that wrote a bare id), the backend uses it as-is.
+     */
+    documentVariable = 'epistolaResult';
+    /** Process-variable name holding the Epistola tenant id. Default: `epistolaTenantId`. */
+    tenantIdVariable = 'epistolaTenantId';
+    /** Filename used for the download disposition. */
     filename = 'document.pdf';
-    label = 'Download PDF';
+    loading = false;
     downloading = false;
     error = null;
-    get buttonLabel() {
-        return this.label || 'Download PDF';
+    previewUrl = null;
+    currentBlobUrl = null;
+    subscription;
+    get designMode() {
+        return !this.formIoStateService.documentId;
     }
-    constructor(http) {
-        this.http = http;
+    constructor(epistolaPluginService, sanitizer, formIoStateService, taskContext, cdr) {
+        this.epistolaPluginService = epistolaPluginService;
+        this.sanitizer = sanitizer;
+        this.formIoStateService = formIoStateService;
+        this.taskContext = taskContext;
+        this.cdr = cdr;
+    }
+    ngOnInit() {
+        if (this.designMode) {
+            return;
+        }
+        if (this.display !== 'button') {
+            this.loadInline();
+        }
+    }
+    ngOnDestroy() {
+        this.subscription?.unsubscribe();
+        this.revokeBlobUrl();
     }
-    hasRequiredData() {
-        return !!(this.value?.documentId && this.value?.tenantId);
+    refresh() {
+        this.loadInline();
     }
     download() {
-        if (!this.hasRequiredData() || this.downloading) {
+        if (this.designMode || this.downloading) {
             return;
         }
+        const request = this.buildRequest('attachment');
+        if (!request)
+            return;
         this.downloading = true;
         this.error = null;
-        const { documentId, tenantId } = this.value;
-        const url = `/api/v1/plugin/epistola/documents/${encodeURIComponent(documentId)}/download` +
-            `?tenantId=${encodeURIComponent(tenantId)}` +
-            `&filename=${encodeURIComponent(this.filename)}`;
-        this.http.get(url, { responseType: 'blob' }).subscribe({
+        this.cdr.markForCheck();
+        this.epistolaPluginService.downloadDocumentBlob(request).subscribe({
             next: (blob) => {
                 const objectUrl = URL.createObjectURL(blob);
                 const anchor = document.createElement('a');
@@ -2003,66 +2328,246 @@ class EpistolaDownloadComponent {
                 anchor.click();
                 URL.revokeObjectURL(objectUrl);
                 this.downloading = false;
+                this.cdr.markForCheck();
             },
             error: (err) => {
-                console.error('Download failed', err);
-                this.error = 'Download mislukt. Probeer opnieuw.';
+                this.error = err.status === 404 ? 'Document is nog niet gegenereerd.' : 'Download mislukt.';
                 this.downloading = false;
+                this.cdr.markForCheck();
             },
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaDownloadComponent, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: EpistolaDownloadComponent, isStandalone: true, selector: "epistola-download-component", inputs: { value: "value", disabled: "disabled", filename: "filename", label: "label" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: `
-    <button
-      type="button"
-      class="btn btn-outline-primary"
-      [disabled]="disabled || downloading || !hasRequiredData()"
-      (click)="download()"
-    >
-      <i class="mdi mdi-download mr-1"></i>
-      {{ downloading ? 'Downloading...' : buttonLabel }}
-    </button>
-    <span *ngIf="error" class="text-danger ml-2">{{ error }}</span>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    loadInline() {
+        const request = this.buildRequest('inline');
+        if (!request)
+            return;
+        this.loading = true;
+        this.error = null;
+        this.cdr.markForCheck();
+        this.revokeBlobUrl();
+        this.subscription?.unsubscribe();
+        this.subscription = this.epistolaPluginService.downloadDocumentBlob(request).subscribe({
+            next: (blob) => {
+                this.currentBlobUrl = URL.createObjectURL(blob);
+                this.previewUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.currentBlobUrl);
+                this.loading = false;
+                this.cdr.markForCheck();
+            },
+            error: (err) => {
+                this.previewUrl = null;
+                this.error =
+                    err.status === 404
+                        ? 'Document is nog niet gegenereerd.'
+                        : 'Document kon niet geladen worden.';
+                this.loading = false;
+                this.cdr.markForCheck();
+            },
+        });
+    }
+    buildRequest(disposition) {
+        const taskId = this.taskContext.taskInstanceId;
+        const caseDocumentId = this.formIoStateService.documentId;
+        if (!taskId || !caseDocumentId) {
+            this.error = 'Document is alleen beschikbaar binnen een taak.';
+            this.cdr.markForCheck();
+            return null;
+        }
+        return {
+            taskId,
+            caseDocumentId,
+            documentVariable: this.documentVariable,
+            tenantIdVariable: this.tenantIdVariable,
+            filename: this.filename,
+            disposition,
+        };
+    }
+    revokeBlobUrl() {
+        if (this.currentBlobUrl) {
+            URL.revokeObjectURL(this.currentBlobUrl);
+            this.currentBlobUrl = null;
+            this.previewUrl = null;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaDocumentComponent, deps: [{ token: EpistolaPluginService }, { token: i2$4.DomSanitizer }, { token: i3.FormIoStateService }, { token: EpistolaTaskContextService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: EpistolaDocumentComponent, isStandalone: true, selector: "epistola-document-component", inputs: { value: "value", disabled: "disabled", label: "label", display: "display", documentVariable: "documentVariable", tenantIdVariable: "tenantIdVariable", filename: "filename" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: `
+    <!-- Design-time placeholder -->
+    <div *ngIf="designMode" class="epistola-doc-panel">
+      <div class="doc-header">
+        <span>{{ label || 'Document' }}</span>
+        <span class="design-tag">design mode</span>
+      </div>
+      <div class="doc-body design-info">
+        <div class="design-section">
+          <div class="design-label">Display</div>
+          <div class="design-value">{{ display }}</div>
+          <div class="design-label">Document variable</div>
+          <div class="design-value">{{ documentVariable }}</div>
+          <div class="design-label">Tenant ID variable</div>
+          <div class="design-value">{{ tenantIdVariable }}</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Button-only display -->
+    <div *ngIf="!designMode && display === 'button'">
+      <button
+        type="button"
+        class="btn btn-outline-primary"
+        [disabled]="disabled || downloading"
+        (click)="download()"
+      >
+        <i class="mdi mdi-download mr-1"></i>
+        {{ downloading ? 'Downloading...' : label || 'Download PDF' }}
+      </button>
+      <span *ngIf="error" class="text-danger ml-2">{{ error }}</span>
+    </div>
+
+    <!-- Inline / both: panel with optional download icon -->
+    <div *ngIf="!designMode && display !== 'button'" class="epistola-doc-panel">
+      <div class="doc-header">
+        <span>{{ label || 'Document' }}</span>
+        <div class="doc-controls">
+          <button
+            *ngIf="display === 'both'"
+            type="button"
+            class="doc-icon-btn"
+            [disabled]="disabled || downloading"
+            (click)="download()"
+            [title]="downloading ? 'Downloading...' : 'Download'"
+          >
+            <i class="mdi mdi-download"></i>
+          </button>
+          <button
+            type="button"
+            class="doc-icon-btn"
+            [disabled]="loading"
+            (click)="refresh()"
+            title="Refresh"
+          >
+            <i class="mdi mdi-refresh"></i>
+          </button>
+        </div>
+      </div>
+      <div class="doc-body">
+        <div *ngIf="loading" class="doc-loading">Loading document...</div>
+        <div *ngIf="error && !loading" class="doc-unavailable">
+          <i class="mdi mdi-information-outline"></i>
+          {{ error }}
+        </div>
+        <object
+          *ngIf="previewUrl && !loading"
+          [data]="previewUrl"
+          type="application/pdf"
+          class="doc-pdf"
+        >
+          PDF preview is not supported in this browser.
+        </object>
+      </div>
+    </div>
+  `, isInline: true, styles: [".epistola-doc-panel{border:1px solid #dee2e6;border-radius:4px;background:#f8f9fa;display:flex;flex-direction:column}.doc-header{display:flex;justify-content:space-between;align-items:center;padding:.5rem 1rem;border-bottom:1px solid #dee2e6;font-weight:700;color:#495057}.doc-controls{display:flex;gap:.25rem}.doc-icon-btn{background:none;border:1px solid #6c757d;border-radius:4px;color:#6c757d;padding:.25rem .5rem;font-size:.9rem;cursor:pointer}.doc-icon-btn:hover:not(:disabled){background:#e9ecef}.doc-icon-btn:disabled{opacity:.5;cursor:not-allowed}.doc-body{display:flex;flex-direction:column;min-height:500px}.doc-loading,.doc-unavailable{padding:2rem;text-align:center;color:#6c757d;font-style:italic}.doc-unavailable i{margin-right:.25rem}.doc-pdf{width:100%;flex:1;min-height:500px}.design-info{padding:1rem;min-height:auto}.design-section{margin-bottom:.5rem}.design-label{font-size:.7rem;text-transform:uppercase;color:#868e96;font-weight:600;letter-spacing:.05em}.design-value{font-family:monospace;font-size:.85rem;color:#212529;margin-bottom:.25rem}.design-tag{font-size:.7rem;font-weight:400;color:#6c757d;font-style:italic}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaDownloadComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaDocumentComponent, decorators: [{
             type: Component,
-            args: [{
-                    standalone: true,
-                    imports: [CommonModule],
-                    selector: 'epistola-download-component',
-                    template: `
-    <button
-      type="button"
-      class="btn btn-outline-primary"
-      [disabled]="disabled || downloading || !hasRequiredData()"
-      (click)="download()"
-    >
-      <i class="mdi mdi-download mr-1"></i>
-      {{ downloading ? 'Downloading...' : buttonLabel }}
-    </button>
-    <span *ngIf="error" class="text-danger ml-2">{{ error }}</span>
-  `,
-                }]
-        }], ctorParameters: () => [{ type: i1.HttpClient }], propDecorators: { value: [{
+            args: [{ standalone: true, imports: [CommonModule], selector: 'epistola-document-component', changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <!-- Design-time placeholder -->
+    <div *ngIf="designMode" class="epistola-doc-panel">
+      <div class="doc-header">
+        <span>{{ label || 'Document' }}</span>
+        <span class="design-tag">design mode</span>
+      </div>
+      <div class="doc-body design-info">
+        <div class="design-section">
+          <div class="design-label">Display</div>
+          <div class="design-value">{{ display }}</div>
+          <div class="design-label">Document variable</div>
+          <div class="design-value">{{ documentVariable }}</div>
+          <div class="design-label">Tenant ID variable</div>
+          <div class="design-value">{{ tenantIdVariable }}</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Button-only display -->
+    <div *ngIf="!designMode && display === 'button'">
+      <button
+        type="button"
+        class="btn btn-outline-primary"
+        [disabled]="disabled || downloading"
+        (click)="download()"
+      >
+        <i class="mdi mdi-download mr-1"></i>
+        {{ downloading ? 'Downloading...' : label || 'Download PDF' }}
+      </button>
+      <span *ngIf="error" class="text-danger ml-2">{{ error }}</span>
+    </div>
+
+    <!-- Inline / both: panel with optional download icon -->
+    <div *ngIf="!designMode && display !== 'button'" class="epistola-doc-panel">
+      <div class="doc-header">
+        <span>{{ label || 'Document' }}</span>
+        <div class="doc-controls">
+          <button
+            *ngIf="display === 'both'"
+            type="button"
+            class="doc-icon-btn"
+            [disabled]="disabled || downloading"
+            (click)="download()"
+            [title]="downloading ? 'Downloading...' : 'Download'"
+          >
+            <i class="mdi mdi-download"></i>
+          </button>
+          <button
+            type="button"
+            class="doc-icon-btn"
+            [disabled]="loading"
+            (click)="refresh()"
+            title="Refresh"
+          >
+            <i class="mdi mdi-refresh"></i>
+          </button>
+        </div>
+      </div>
+      <div class="doc-body">
+        <div *ngIf="loading" class="doc-loading">Loading document...</div>
+        <div *ngIf="error && !loading" class="doc-unavailable">
+          <i class="mdi mdi-information-outline"></i>
+          {{ error }}
+        </div>
+        <object
+          *ngIf="previewUrl && !loading"
+          [data]="previewUrl"
+          type="application/pdf"
+          class="doc-pdf"
+        >
+          PDF preview is not supported in this browser.
+        </object>
+      </div>
+    </div>
+  `, styles: [".epistola-doc-panel{border:1px solid #dee2e6;border-radius:4px;background:#f8f9fa;display:flex;flex-direction:column}.doc-header{display:flex;justify-content:space-between;align-items:center;padding:.5rem 1rem;border-bottom:1px solid #dee2e6;font-weight:700;color:#495057}.doc-controls{display:flex;gap:.25rem}.doc-icon-btn{background:none;border:1px solid #6c757d;border-radius:4px;color:#6c757d;padding:.25rem .5rem;font-size:.9rem;cursor:pointer}.doc-icon-btn:hover:not(:disabled){background:#e9ecef}.doc-icon-btn:disabled{opacity:.5;cursor:not-allowed}.doc-body{display:flex;flex-direction:column;min-height:500px}.doc-loading,.doc-unavailable{padding:2rem;text-align:center;color:#6c757d;font-style:italic}.doc-unavailable i{margin-right:.25rem}.doc-pdf{width:100%;flex:1;min-height:500px}.design-info{padding:1rem;min-height:auto}.design-section{margin-bottom:.5rem}.design-label{font-size:.7rem;text-transform:uppercase;color:#868e96;font-weight:600;letter-spacing:.05em}.design-value{font-family:monospace;font-size:.85rem;color:#212529;margin-bottom:.25rem}.design-tag{font-size:.7rem;font-weight:400;color:#6c757d;font-style:italic}\n"] }]
+        }], ctorParameters: () => [{ type: EpistolaPluginService }, { type: i2$4.DomSanitizer }, { type: i3.FormIoStateService }, { type: EpistolaTaskContextService }, { type: i0.ChangeDetectorRef }], propDecorators: { value: [{
                 type: Input
             }], valueChange: [{
                 type: Output
             }], disabled: [{
                 type: Input
-            }], filename: [{
-                type: Input
             }], label: [{
                 type: Input
+            }], display: [{
+                type: Input
+            }], documentVariable: [{
+                type: Input
+            }], tenantIdVariable: [{
+                type: Input
+            }], filename: [{
+                type: Input
             }] } });
 
 class EpistolaRetryFormComponent {
     epistolaPluginService;
     formIoStateService;
     cdr;
-    http;
     sanitizer;
-    configService;
+    taskContext;
     value;
     valueChange = new EventEmitter();
     disabled = false;
@@ -2083,19 +2588,16 @@ class EpistolaRetryFormComponent {
     currentBlobUrl = null;
     resolvedSourceActivityId;
     processDefinitionKey;
-    apiEndpoint;
     formOptions = {
         noAlerts: true,
         buttonSettings: { showCancel: false, showSubmit: false, showPrevious: false, showNext: false },
     };
-    constructor(epistolaPluginService, formIoStateService, cdr, http, sanitizer, configService) {
+    constructor(epistolaPluginService, formIoStateService, cdr, sanitizer, taskContext) {
         this.epistolaPluginService = epistolaPluginService;
         this.formIoStateService = formIoStateService;
         this.cdr = cdr;
-        this.http = http;
         this.sanitizer = sanitizer;
-        this.configService = configService;
-        this.apiEndpoint = `${this.configService.config.valtimoApi.endpointUri}v1/plugin/epistola`;
+        this.taskContext = taskContext;
         // Debounce preview calls
         this.previewSubscription = this.previewSubject.pipe(debounceTime$1(1500)).subscribe((data) => {
             this.loadPreview(data);
@@ -2132,6 +2634,12 @@ class EpistolaRetryFormComponent {
         const processInstanceId = this.formIoStateService.processInstanceId;
         if (!documentId || !processInstanceId)
             return;
+        const taskId = this.taskContext.taskInstanceId;
+        if (!taskId) {
+            this.previewError = 'Preview is only available from within a user task.';
+            this.cdr.markForCheck();
+            return;
+        }
         this.previewLoading = true;
         this.previewError = null;
         this.cdr.markForCheck();
@@ -2140,13 +2648,14 @@ class EpistolaRetryFormComponent {
             URL.revokeObjectURL(this.currentBlobUrl);
             this.currentBlobUrl = null;
         }
-        this.http
-            .post(`${this.apiEndpoint}/preview`, {
+        this.epistolaPluginService
+            .previewToBlob({
+            taskId,
             documentId,
             processInstanceId,
             sourceActivityId: this.sourceActivityId || null,
             overrides: formData,
-        }, { responseType: 'blob', headers: new HttpHeaders().set('X-Skip-Interceptor', '422') })
+        })
             .subscribe({
             next: (blob) => {
                 this.currentBlobUrl = URL.createObjectURL(blob);
@@ -2188,8 +2697,15 @@ class EpistolaRetryFormComponent {
             this.cdr.markForCheck();
             return;
         }
+        const taskId = this.taskContext.taskInstanceId;
+        if (!taskId) {
+            this.error = 'Retry form is only available from within a user task.';
+            this.loading = false;
+            this.cdr.markForCheck();
+            return;
+        }
         this.loadSubscription = this.epistolaPluginService
-            .getRetryForm(processInstanceId, documentId ?? undefined, this.sourceActivityId)
+            .getRetryForm(taskId, processInstanceId, documentId ?? undefined, this.sourceActivityId)
             .subscribe({
             next: (form) => {
                 this.formDefinition = form;
@@ -2212,7 +2728,7 @@ class EpistolaRetryFormComponent {
             },
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaRetryFormComponent, deps: [{ token: EpistolaPluginService }, { token: i3.FormIoStateService }, { token: i0.ChangeDetectorRef }, { token: i1.HttpClient }, { token: i4$1.DomSanitizer }, { token: i2.ConfigService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaRetryFormComponent, deps: [{ token: EpistolaPluginService }, { token: i3.FormIoStateService }, { token: i0.ChangeDetectorRef }, { token: i2$4.DomSanitizer }, { token: EpistolaTaskContextService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: EpistolaRetryFormComponent, isStandalone: true, selector: "epistola-retry-form-component", inputs: { value: "value", disabled: "disabled", label: "label", sourceActivityId: "sourceActivityId" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: `
     <div *ngIf="loading" class="epistola-retry-loading">Loading form...</div>
     <div *ngIf="error" class="epistola-retry-error">{{ error }}</div>
@@ -2251,7 +2767,7 @@ class EpistolaRetryFormComponent {
         </div>
       </div>
     </div>
-  `, isInline: true, styles: [".epistola-retry-loading{padding:1rem;color:#6c757d}.epistola-retry-error{padding:.5rem;color:#dc3545}.epistola-retry-container{display:flex;gap:1rem}.epistola-retry-form{flex:2;min-width:0}.epistola-retry-preview{flex:1;min-width:0;border:1px solid #dee2e6;border-radius:4px;padding:1rem;background:#f8f9fa;display:flex;flex-direction:column}.preview-expanded .epistola-retry-preview{flex:1}.preview-header{display:flex;justify-content:space-between;align-items:center;font-weight:700;margin-bottom:.5rem;color:#495057}.preview-toggle{background:none;border:1px solid #6c757d;border-radius:4px;color:#6c757d;padding:.2rem .5rem;font-size:.75rem;cursor:pointer}.preview-toggle:hover{background:#e9ecef}.preview-loading{color:#6c757d;font-style:italic}.preview-pdf{width:100%;flex:1;min-height:500px}.preview-expanded .preview-pdf{min-height:80vh}.preview-error{color:#dc3545}.preview-empty{color:#6c757d;font-style:italic}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormioModule }, { kind: "component", type: i7.FormioComponent, selector: "formio" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".epistola-retry-loading{padding:1rem;color:#6c757d}.epistola-retry-error{padding:.5rem;color:#dc3545}.epistola-retry-container{display:flex;gap:1rem}.epistola-retry-form{flex:2;min-width:0}.epistola-retry-preview{flex:1;min-width:0;border:1px solid #dee2e6;border-radius:4px;padding:1rem;background:#f8f9fa;display:flex;flex-direction:column}.preview-expanded .epistola-retry-preview{flex:1}.preview-header{display:flex;justify-content:space-between;align-items:center;font-weight:700;margin-bottom:.5rem;color:#495057}.preview-toggle{background:none;border:1px solid #6c757d;border-radius:4px;color:#6c757d;padding:.2rem .5rem;font-size:.75rem;cursor:pointer}.preview-toggle:hover{background:#e9ecef}.preview-loading{color:#6c757d;font-style:italic}.preview-pdf{width:100%;flex:1;min-height:500px}.preview-expanded .preview-pdf{min-height:80vh}.preview-error{color:#dc3545}.preview-empty{color:#6c757d;font-style:italic}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormioModule }, { kind: "component", type: i5.FormioComponent, selector: "formio" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaRetryFormComponent, decorators: [{
             type: Component,
@@ -2294,7 +2810,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
       </div>
     </div>
   `, styles: [".epistola-retry-loading{padding:1rem;color:#6c757d}.epistola-retry-error{padding:.5rem;color:#dc3545}.epistola-retry-container{display:flex;gap:1rem}.epistola-retry-form{flex:2;min-width:0}.epistola-retry-preview{flex:1;min-width:0;border:1px solid #dee2e6;border-radius:4px;padding:1rem;background:#f8f9fa;display:flex;flex-direction:column}.preview-expanded .epistola-retry-preview{flex:1}.preview-header{display:flex;justify-content:space-between;align-items:center;font-weight:700;margin-bottom:.5rem;color:#495057}.preview-toggle{background:none;border:1px solid #6c757d;border-radius:4px;color:#6c757d;padding:.2rem .5rem;font-size:.75rem;cursor:pointer}.preview-toggle:hover{background:#e9ecef}.preview-loading{color:#6c757d;font-style:italic}.preview-pdf{width:100%;flex:1;min-height:500px}.preview-expanded .preview-pdf{min-height:80vh}.preview-error{color:#dc3545}.preview-empty{color:#6c757d;font-style:italic}\n"] }]
-        }], ctorParameters: () => [{ type: EpistolaPluginService }, { type: i3.FormIoStateService }, { type: i0.ChangeDetectorRef }, { type: i1.HttpClient }, { type: i4$1.DomSanitizer }, { type: i2.ConfigService }], propDecorators: { value: [{
+        }], ctorParameters: () => [{ type: EpistolaPluginService }, { type: i3.FormIoStateService }, { type: i0.ChangeDetectorRef }, { type: i2$4.DomSanitizer }, { type: EpistolaTaskContextService }], propDecorators: { value: [{
                 type: Input
             }], valueChange: [{
                 type: Output
@@ -2306,281 +2822,156 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 type: Input
             }] } });
 
-class EpistolaPreviewButtonComponent {
-    http;
+class EpistolaDocumentPreviewComponent {
+    epistolaPluginService;
     sanitizer;
-    configService;
+    formIoStateService;
+    cdr;
+    taskContext;
     value;
     valueChange = new EventEmitter();
     disabled = false;
-    label = 'Preview PDF';
-    modalOpen = false;
+    label = 'Document Preview';
+    processDefinitionKey;
+    sourceActivityId;
+    overrideMapping;
     loading = false;
-    previewLoading = false;
-    previewError = null;
+    error = null;
     previewUrl = null;
+    designMode = false;
+    initialized = false;
     currentBlobUrl = null;
-    apiEndpoint;
-    get buttonLabel() {
-        return this.label || 'Preview PDF';
-    }
-    constructor(http, sanitizer, configService) {
-        this.http = http;
+    previewSubscription;
+    constructor(epistolaPluginService, sanitizer, formIoStateService, cdr, taskContext) {
+        this.epistolaPluginService = epistolaPluginService;
         this.sanitizer = sanitizer;
-        this.configService = configService;
-        this.apiEndpoint = `${this.configService.config.valtimoApi.endpointUri}v1/plugin/epistola`;
+        this.formIoStateService = formIoStateService;
+        this.cdr = cdr;
+        this.taskContext = taskContext;
     }
-    ngOnDestroy() {
-        this.revokeBlobUrl();
+    /**
+     * Resolve the active task id from {@link EpistolaTaskContextService}, populated
+     * by {@code EpistolaTaskContextInterceptor} on the canonical Valtimo task-open
+     * call. Returns null when used outside a task context (e.g. Formio builder).
+     */
+    get currentTaskId() {
+        return this.taskContext.taskInstanceId;
     }
-    hasRequiredData() {
-        return !!(this.value?.documentId && this.value?.tenantId);
+    get overrideMappingScopes() {
+        return this.overrideMapping ? Object.keys(this.overrideMapping) : [];
     }
-    openPreview() {
-        if (!this.hasRequiredData() || this.loading)
-            return;
-        this.modalOpen = true;
-        this.previewLoading = true;
-        this.previewError = null;
-        this.revokeBlobUrl();
-        const { documentId, tenantId } = this.value;
-        const url = `${this.apiEndpoint}/documents/${encodeURIComponent(documentId)}/download` +
-            `?tenantId=${encodeURIComponent(tenantId)}` +
-            `&filename=preview.pdf`;
-        this.http.get(url, { responseType: 'blob' }).subscribe({
-            next: (blob) => {
-                this.currentBlobUrl = URL.createObjectURL(blob);
-                this.previewUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.currentBlobUrl);
-                this.previewLoading = false;
-            },
-            error: () => {
-                this.previewError = 'Could not load the document.';
-                this.previewLoading = false;
-            },
-        });
-    }
-    closePreview() {
-        this.modalOpen = false;
-        this.revokeBlobUrl();
-        this.previewUrl = null;
-        this.previewError = null;
-    }
-    revokeBlobUrl() {
-        if (this.currentBlobUrl) {
-            URL.revokeObjectURL(this.currentBlobUrl);
-            this.currentBlobUrl = null;
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaPreviewButtonComponent, deps: [{ token: i1.HttpClient }, { token: i4$1.DomSanitizer }, { token: i2.ConfigService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: EpistolaPreviewButtonComponent, isStandalone: true, selector: "epistola-preview-button-component", inputs: { value: "value", disabled: "disabled", label: "label" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: `
-    <button
-      type="button"
-      class="btn btn-outline-secondary"
-      [disabled]="disabled || loading || !hasRequiredData()"
-      (click)="openPreview()"
-    >
-      <i class="mdi mdi-eye mr-1"></i>
-      {{ loading ? 'Loading...' : buttonLabel }}
-    </button>
-
-    <div *ngIf="modalOpen" class="preview-modal-overlay" (click)="closePreview()">
-      <div class="preview-modal-content" (click)="$event.stopPropagation()">
-        <div class="preview-modal-header">
-          <span>Document Preview</span>
-          <button type="button" class="preview-modal-close" (click)="closePreview()">
-            &times;
-          </button>
-        </div>
-        <div class="preview-modal-body">
-          <div *ngIf="previewLoading" class="preview-loading">Generating preview...</div>
-          <div *ngIf="previewError" class="preview-error">{{ previewError }}</div>
-          <object
-            *ngIf="previewUrl && !previewLoading"
-            [data]="previewUrl"
-            type="application/pdf"
-            class="preview-pdf"
-          >
-            PDF preview is not supported in this browser.
-          </object>
-        </div>
-      </div>
-    </div>
-  `, isInline: true, styles: [".preview-modal-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:10000}.preview-modal-content{background:#fff;border-radius:8px;width:90vw;height:90vh;max-width:1200px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 8px 32px #0000004d}.preview-modal-header{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;border-bottom:1px solid #dee2e6;font-weight:700;font-size:1rem}.preview-modal-close{background:none;border:none;font-size:1.5rem;cursor:pointer;color:#6c757d;line-height:1;padding:0 .25rem}.preview-modal-close:hover{color:#333}.preview-modal-body{flex:1;overflow:hidden;display:flex;flex-direction:column}.preview-loading,.preview-error{padding:2rem;text-align:center}.preview-error{color:#dc3545}.preview-pdf{width:100%;flex:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaPreviewButtonComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: true, imports: [CommonModule], selector: 'epistola-preview-button-component', template: `
-    <button
-      type="button"
-      class="btn btn-outline-secondary"
-      [disabled]="disabled || loading || !hasRequiredData()"
-      (click)="openPreview()"
-    >
-      <i class="mdi mdi-eye mr-1"></i>
-      {{ loading ? 'Loading...' : buttonLabel }}
-    </button>
-
-    <div *ngIf="modalOpen" class="preview-modal-overlay" (click)="closePreview()">
-      <div class="preview-modal-content" (click)="$event.stopPropagation()">
-        <div class="preview-modal-header">
-          <span>Document Preview</span>
-          <button type="button" class="preview-modal-close" (click)="closePreview()">
-            &times;
-          </button>
-        </div>
-        <div class="preview-modal-body">
-          <div *ngIf="previewLoading" class="preview-loading">Generating preview...</div>
-          <div *ngIf="previewError" class="preview-error">{{ previewError }}</div>
-          <object
-            *ngIf="previewUrl && !previewLoading"
-            [data]="previewUrl"
-            type="application/pdf"
-            class="preview-pdf"
-          >
-            PDF preview is not supported in this browser.
-          </object>
-        </div>
-      </div>
-    </div>
-  `, styles: [".preview-modal-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:10000}.preview-modal-content{background:#fff;border-radius:8px;width:90vw;height:90vh;max-width:1200px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 8px 32px #0000004d}.preview-modal-header{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;border-bottom:1px solid #dee2e6;font-weight:700;font-size:1rem}.preview-modal-close{background:none;border:none;font-size:1.5rem;cursor:pointer;color:#6c757d;line-height:1;padding:0 .25rem}.preview-modal-close:hover{color:#333}.preview-modal-body{flex:1;overflow:hidden;display:flex;flex-direction:column}.preview-loading,.preview-error{padding:2rem;text-align:center}.preview-error{color:#dc3545}.preview-pdf{width:100%;flex:1}\n"] }]
-        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: i4$1.DomSanitizer }, { type: i2.ConfigService }], propDecorators: { value: [{
-                type: Input
-            }], valueChange: [{
-                type: Output
-            }], disabled: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }] } });
-
-class EpistolaDocumentPreviewComponent {
-    epistolaPluginService;
-    http;
-    sanitizer;
-    configService;
-    formIoStateService;
-    cdr;
-    value;
-    valueChange = new EventEmitter();
-    disabled = false;
-    label = 'Document Preview';
-    sources = [];
-    selectedIndex = 0;
-    discovering = false;
-    loading = false;
-    error = null;
-    previewUrl = null;
-    initialized = false;
-    currentBlobUrl = null;
-    discoverSubscription;
-    previewSubscription;
-    apiEndpoint;
-    constructor(epistolaPluginService, http, sanitizer, configService, formIoStateService, cdr) {
-        this.epistolaPluginService = epistolaPluginService;
-        this.http = http;
-        this.sanitizer = sanitizer;
-        this.configService = configService;
-        this.formIoStateService = formIoStateService;
-        this.cdr = cdr;
-        this.apiEndpoint = `${this.configService.config.valtimoApi.endpointUri}v1/plugin/epistola`;
+    overrideMappingEntries(scope) {
+        const fields = this.overrideMapping?.[scope];
+        if (!fields || typeof fields !== 'object')
+            return [];
+        return Object.entries(fields).map(([path, field]) => ({ path, field: String(field) }));
     }
     ngOnChanges(changes) {
         if (!this.initialized) {
             this.initialized = true;
-            this.discoverSources();
+            // Detect design mode: no runtime context (Formio builder)
+            const documentId = this.formIoStateService.documentId;
+            if (!documentId) {
+                this.designMode = true;
+                this.cdr.markForCheck();
+                return;
+            }
+            if (!this.sourceActivityId) {
+                this.error = 'Preview is not configured: set the source activity on the form component.';
+                this.cdr.markForCheck();
+                return;
+            }
+            this.loadPreview();
+            return;
+        }
+        // React to value changes (input overrides from the Formio wrapper).
+        if (changes['value']) {
+            this.loadPreview();
         }
     }
     ngOnDestroy() {
-        this.discoverSubscription?.unsubscribe();
         this.previewSubscription?.unsubscribe();
         this.revokeBlobUrl();
     }
-    onSourceChange(event) {
-        this.selectedIndex = +event.target.value;
-        this.loadPreview();
-    }
     refresh() {
         this.loadPreview();
     }
-    discoverSources() {
+    /**
+     * Preview using the explicitly configured process link + input overrides.
+     * Requires a runtime task context — the backend authorizes the request against
+     * the task's process instance and case document, so all three ids must match.
+     */
+    loadPreview() {
         const documentId = this.formIoStateService.documentId;
         if (!documentId) {
             this.error = 'Could not determine document ID from context.';
             this.cdr.markForCheck();
             return;
         }
-        this.discovering = true;
-        this.error = null;
-        this.cdr.markForCheck();
-        this.discoverSubscription = this.epistolaPluginService.getPreviewSources(documentId).subscribe({
-            next: (sources) => {
-                this.sources = sources;
-                this.discovering = false;
-                this.cdr.markForCheck();
-                if (sources.length > 0) {
-                    this.selectedIndex = 0;
-                    this.loadPreview();
-                }
-            },
-            error: (err) => {
-                this.error = err.error?.error || 'Failed to discover preview sources';
-                this.discovering = false;
-                this.cdr.markForCheck();
-            },
-        });
-    }
-    loadPreview() {
-        const source = this.sources[this.selectedIndex];
-        if (!source)
+        if (!this.sourceActivityId) {
+            this.error = 'Preview is not configured: set the source activity on the form component.';
+            this.cdr.markForCheck();
             return;
-        const documentId = this.formIoStateService.documentId;
-        if (!documentId)
+        }
+        const processInstanceId = this.formIoStateService.processInstanceId;
+        if (!processInstanceId) {
+            this.error = 'Preview is only available from within a running process.';
+            this.cdr.markForCheck();
+            return;
+        }
+        const taskId = this.currentTaskId;
+        if (!taskId) {
+            this.error = 'Preview is only available from within a user task.';
+            this.cdr.markForCheck();
             return;
+        }
         this.loading = true;
         this.error = null;
         this.cdr.markForCheck();
         this.revokeBlobUrl();
         this.previewSubscription?.unsubscribe();
-        this.previewSubscription = this.http
-            .post(`${this.apiEndpoint}/preview`, {
+        this.previewSubscription = this.epistolaPluginService
+            .previewToBlob({
+            taskId,
             documentId,
-            processInstanceId: source.processInstanceId,
-            sourceActivityId: source.activityId,
+            processDefinitionKey: this.processDefinitionKey || null,
+            processInstanceId,
+            sourceActivityId: this.sourceActivityId,
+            inputOverrides: this.value || null,
             overrides: null,
-        }, {
-            responseType: 'blob',
-            headers: new HttpHeaders().set('X-Skip-Interceptor', '422'),
         })
             .subscribe({
-            next: (blob) => {
-                this.currentBlobUrl = URL.createObjectURL(blob);
-                this.previewUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.currentBlobUrl);
-                this.error = null;
-                this.loading = false;
-                this.cdr.markForCheck();
-            },
-            error: (err) => {
-                this.previewUrl = null;
-                if (err.error instanceof Blob) {
-                    err.error.text().then((text) => {
-                        try {
-                            const body = JSON.parse(text);
-                            this.error = body.details || body.error || 'Preview could not be generated';
-                        }
-                        catch {
-                            this.error = 'Preview could not be generated';
-                        }
-                        this.loading = false;
-                        this.cdr.markForCheck();
-                    });
+            next: (blob) => this.handlePreviewSuccess(blob),
+            error: (err) => this.handlePreviewError(err),
+        });
+    }
+    handlePreviewSuccess(blob) {
+        this.currentBlobUrl = URL.createObjectURL(blob);
+        this.previewUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.currentBlobUrl);
+        this.error = null;
+        this.loading = false;
+        this.cdr.markForCheck();
+    }
+    handlePreviewError(err) {
+        this.previewUrl = null;
+        if (err.error instanceof Blob) {
+            err.error.text().then((text) => {
+                try {
+                    const body = JSON.parse(text);
+                    this.error = body.details || body.error || 'Preview could not be generated';
                 }
-                else {
-                    this.error = err.error?.error || 'Preview could not be generated';
-                    this.loading = false;
-                    this.cdr.markForCheck();
+                catch {
+                    this.error = 'Preview could not be generated';
                 }
-            },
-        });
+                this.loading = false;
+                this.cdr.markForCheck();
+            });
+        }
+        else {
+            this.error = err.error?.error || 'Preview could not be generated';
+            this.loading = false;
+            this.cdr.markForCheck();
+        }
     }
     revokeBlobUrl() {
         if (this.currentBlobUrl) {
@@ -2589,111 +2980,127 @@ class EpistolaDocumentPreviewComponent {
             this.previewUrl = null;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaDocumentPreviewComponent, deps: [{ token: EpistolaPluginService }, { token: i1.HttpClient }, { token: i4$1.DomSanitizer }, { token: i2.ConfigService }, { token: i3.FormIoStateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: EpistolaDocumentPreviewComponent, isStandalone: true, selector: "epistola-document-preview-component", inputs: { value: "value", disabled: "disabled", label: "label" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: `
-    <div class="epistola-preview-panel">
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaDocumentPreviewComponent, deps: [{ token: EpistolaPluginService }, { token: i2$4.DomSanitizer }, { token: i3.FormIoStateService }, { token: i0.ChangeDetectorRef }, { token: EpistolaTaskContextService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: EpistolaDocumentPreviewComponent, isStandalone: true, selector: "epistola-document-preview-component", inputs: { value: "value", disabled: "disabled", label: "label", processDefinitionKey: "processDefinitionKey", sourceActivityId: "sourceActivityId", overrideMapping: "overrideMapping" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: `
+    <!-- Design-time view: show configuration summary when no runtime context -->
+    <div *ngIf="designMode" class="epistola-preview-panel">
+      <div class="preview-header">
+        <span>{{ label || 'Document Preview' }}</span>
+      </div>
+      <div class="preview-body design-info">
+        <div class="design-section" *ngIf="sourceActivityId">
+          <div class="design-label">Process</div>
+          <div class="design-value">{{ processDefinitionKey || '(any)' }}</div>
+          <div class="design-label">Activity</div>
+          <div class="design-value">{{ sourceActivityId }}</div>
+        </div>
+        <div class="design-section" *ngIf="overrideMapping">
+          <div class="design-label">Input Overrides</div>
+          <div *ngFor="let scope of overrideMappingScopes" class="design-mapping">
+            <div *ngFor="let entry of overrideMappingEntries(scope)" class="design-entry">
+              <span class="design-scope">{{ scope }}</span
+              >.{{ entry.path }}
+              <i class="mdi mdi-arrow-left"></i>
+              <span class="design-field">{{ entry.field }}</span>
+            </div>
+          </div>
+        </div>
+        <div *ngIf="!sourceActivityId" class="design-unconfigured">
+          Auto-discover mode (no process link configured)
+        </div>
+      </div>
+    </div>
+
+    <!-- Runtime view: actual preview -->
+    <div *ngIf="!designMode" class="epistola-preview-panel">
       <div class="preview-header">
         <span>{{ label || 'Document Preview' }}</span>
         <div class="preview-controls">
-          <select
-            *ngIf="sources.length > 1"
-            class="preview-select"
-            [value]="selectedIndex"
-            (change)="onSourceChange($event)"
-          >
-            <option *ngFor="let source of sources; let i = index" [value]="i">
-              {{ source.templateName }} ({{ source.activityId }})
-            </option>
-          </select>
-          <button
-            type="button"
-            class="preview-refresh"
-            [disabled]="loading || discovering"
-            (click)="refresh()"
-          >
+          <button type="button" class="preview-refresh" [disabled]="loading" (click)="refresh()">
             <i class="mdi mdi-refresh mr-1"></i>
             {{ loading ? 'Generating...' : 'Refresh' }}
           </button>
         </div>
       </div>
       <div class="preview-body">
-        <div *ngIf="discovering" class="preview-loading">Discovering documents...</div>
-        <div *ngIf="loading && !discovering" class="preview-loading">Generating preview...</div>
-        <div *ngIf="error && !loading && !discovering" class="preview-unavailable">
+        <div *ngIf="loading" class="preview-loading">Generating preview...</div>
+        <div *ngIf="error && !loading" class="preview-unavailable">
           <i class="mdi mdi-information-outline"></i>
-          Preview is niet beschikbaar — niet alle gegevens zijn al ingevuld.
+          {{ error }}
         </div>
         <object
-          *ngIf="previewUrl && !loading && !discovering"
+          *ngIf="previewUrl && !loading"
           [data]="previewUrl"
           type="application/pdf"
           class="preview-pdf"
         >
           PDF preview is not supported in this browser.
         </object>
-        <div
-          *ngIf="!previewUrl && !loading && !discovering && !error && sources.length === 0"
-          class="preview-empty"
-        >
-          No previewable documents found
-        </div>
       </div>
     </div>
-  `, isInline: true, styles: [".epistola-preview-panel{border:1px solid #dee2e6;border-radius:4px;background:#f8f9fa;display:flex;flex-direction:column}.preview-header{display:flex;justify-content:space-between;align-items:center;padding:.5rem 1rem;border-bottom:1px solid #dee2e6;font-weight:700;color:#495057;flex-wrap:wrap;gap:.5rem}.preview-controls{display:flex;align-items:center;gap:.5rem}.preview-select{border:1px solid #ced4da;border-radius:4px;padding:.25rem .5rem;font-size:.8rem;background:#fff;max-width:300px}.preview-refresh{background:none;border:1px solid #6c757d;border-radius:4px;color:#6c757d;padding:.25rem .75rem;font-size:.8rem;cursor:pointer;display:flex;align-items:center;white-space:nowrap}.preview-refresh:hover:not(:disabled){background:#e9ecef}.preview-refresh:disabled{opacity:.5;cursor:not-allowed}.preview-body{display:flex;flex-direction:column;min-height:500px}.preview-loading{padding:2rem;text-align:center;color:#6c757d;font-style:italic}.preview-unavailable{padding:1.5rem;text-align:center;color:#6c757d;font-style:italic}.preview-unavailable i{margin-right:.25rem}.preview-pdf{width:100%;flex:1;min-height:500px}.preview-empty{padding:2rem;text-align:center;color:#6c757d;font-style:italic}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".epistola-preview-panel{border:1px solid #dee2e6;border-radius:4px;background:#f8f9fa;display:flex;flex-direction:column}.preview-header{display:flex;justify-content:space-between;align-items:center;padding:.5rem 1rem;border-bottom:1px solid #dee2e6;font-weight:700;color:#495057;flex-wrap:wrap;gap:.5rem}.preview-controls{display:flex;align-items:center;gap:.5rem}.preview-select{border:1px solid #ced4da;border-radius:4px;padding:.25rem .5rem;font-size:.8rem;background:#fff;max-width:300px}.preview-refresh{background:none;border:1px solid #6c757d;border-radius:4px;color:#6c757d;padding:.25rem .75rem;font-size:.8rem;cursor:pointer;display:flex;align-items:center;white-space:nowrap}.preview-refresh:hover:not(:disabled){background:#e9ecef}.preview-refresh:disabled{opacity:.5;cursor:not-allowed}.preview-body{display:flex;flex-direction:column;min-height:500px}.preview-loading{padding:2rem;text-align:center;color:#6c757d;font-style:italic}.preview-unavailable{padding:1.5rem;text-align:center;color:#6c757d;font-style:italic}.preview-unavailable i{margin-right:.25rem}.preview-pdf{width:100%;flex:1;min-height:500px}.preview-empty{padding:2rem;text-align:center;color:#6c757d;font-style:italic}.design-info{padding:1rem;min-height:auto}.design-section{margin-bottom:.75rem}.design-label{font-size:.7rem;text-transform:uppercase;color:#868e96;font-weight:600;letter-spacing:.05em}.design-value{font-family:monospace;font-size:.85rem;color:#212529;margin-bottom:.25rem}.design-mapping{margin-top:.25rem}.design-entry{font-family:monospace;font-size:.8rem;color:#495057;padding:.15rem 0}.design-scope{color:#0d6efd}.design-field{color:#198754}.design-entry i{font-size:.7rem;margin:0 .25rem;color:#adb5bd}.design-unconfigured{color:#6c757d;font-style:italic;font-size:.85rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaDocumentPreviewComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [CommonModule], selector: 'epistola-document-preview-component', changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <div class="epistola-preview-panel">
+    <!-- Design-time view: show configuration summary when no runtime context -->
+    <div *ngIf="designMode" class="epistola-preview-panel">
+      <div class="preview-header">
+        <span>{{ label || 'Document Preview' }}</span>
+      </div>
+      <div class="preview-body design-info">
+        <div class="design-section" *ngIf="sourceActivityId">
+          <div class="design-label">Process</div>
+          <div class="design-value">{{ processDefinitionKey || '(any)' }}</div>
+          <div class="design-label">Activity</div>
+          <div class="design-value">{{ sourceActivityId }}</div>
+        </div>
+        <div class="design-section" *ngIf="overrideMapping">
+          <div class="design-label">Input Overrides</div>
+          <div *ngFor="let scope of overrideMappingScopes" class="design-mapping">
+            <div *ngFor="let entry of overrideMappingEntries(scope)" class="design-entry">
+              <span class="design-scope">{{ scope }}</span
+              >.{{ entry.path }}
+              <i class="mdi mdi-arrow-left"></i>
+              <span class="design-field">{{ entry.field }}</span>
+            </div>
+          </div>
+        </div>
+        <div *ngIf="!sourceActivityId" class="design-unconfigured">
+          Auto-discover mode (no process link configured)
+        </div>
+      </div>
+    </div>
+
+    <!-- Runtime view: actual preview -->
+    <div *ngIf="!designMode" class="epistola-preview-panel">
       <div class="preview-header">
         <span>{{ label || 'Document Preview' }}</span>
         <div class="preview-controls">
-          <select
-            *ngIf="sources.length > 1"
-            class="preview-select"
-            [value]="selectedIndex"
-            (change)="onSourceChange($event)"
-          >
-            <option *ngFor="let source of sources; let i = index" [value]="i">
-              {{ source.templateName }} ({{ source.activityId }})
-            </option>
-          </select>
-          <button
-            type="button"
-            class="preview-refresh"
-            [disabled]="loading || discovering"
-            (click)="refresh()"
-          >
+          <button type="button" class="preview-refresh" [disabled]="loading" (click)="refresh()">
             <i class="mdi mdi-refresh mr-1"></i>
             {{ loading ? 'Generating...' : 'Refresh' }}
           </button>
         </div>
       </div>
       <div class="preview-body">
-        <div *ngIf="discovering" class="preview-loading">Discovering documents...</div>
-        <div *ngIf="loading && !discovering" class="preview-loading">Generating preview...</div>
-        <div *ngIf="error && !loading && !discovering" class="preview-unavailable">
+        <div *ngIf="loading" class="preview-loading">Generating preview...</div>
+        <div *ngIf="error && !loading" class="preview-unavailable">
           <i class="mdi mdi-information-outline"></i>
-          Preview is niet beschikbaar — niet alle gegevens zijn al ingevuld.
+          {{ error }}
         </div>
         <object
-          *ngIf="previewUrl && !loading && !discovering"
+          *ngIf="previewUrl && !loading"
           [data]="previewUrl"
           type="application/pdf"
           class="preview-pdf"
         >
           PDF preview is not supported in this browser.
         </object>
-        <div
-          *ngIf="!previewUrl && !loading && !discovering && !error && sources.length === 0"
-          class="preview-empty"
-        >
-          No previewable documents found
-        </div>
       </div>
     </div>
-  `, styles: [".epistola-preview-panel{border:1px solid #dee2e6;border-radius:4px;background:#f8f9fa;display:flex;flex-direction:column}.preview-header{display:flex;justify-content:space-between;align-items:center;padding:.5rem 1rem;border-bottom:1px solid #dee2e6;font-weight:700;color:#495057;flex-wrap:wrap;gap:.5rem}.preview-controls{display:flex;align-items:center;gap:.5rem}.preview-select{border:1px solid #ced4da;border-radius:4px;padding:.25rem .5rem;font-size:.8rem;background:#fff;max-width:300px}.preview-refresh{background:none;border:1px solid #6c757d;border-radius:4px;color:#6c757d;padding:.25rem .75rem;font-size:.8rem;cursor:pointer;display:flex;align-items:center;white-space:nowrap}.preview-refresh:hover:not(:disabled){background:#e9ecef}.preview-refresh:disabled{opacity:.5;cursor:not-allowed}.preview-body{display:flex;flex-direction:column;min-height:500px}.preview-loading{padding:2rem;text-align:center;color:#6c757d;font-style:italic}.preview-unavailable{padding:1.5rem;text-align:center;color:#6c757d;font-style:italic}.preview-unavailable i{margin-right:.25rem}.preview-pdf{width:100%;flex:1;min-height:500px}.preview-empty{padding:2rem;text-align:center;color:#6c757d;font-style:italic}\n"] }]
-        }], ctorParameters: () => [{ type: EpistolaPluginService }, { type: i1.HttpClient }, { type: i4$1.DomSanitizer }, { type: i2.ConfigService }, { type: i3.FormIoStateService }, { type: i0.ChangeDetectorRef }], propDecorators: { value: [{
+  `, styles: [".epistola-preview-panel{border:1px solid #dee2e6;border-radius:4px;background:#f8f9fa;display:flex;flex-direction:column}.preview-header{display:flex;justify-content:space-between;align-items:center;padding:.5rem 1rem;border-bottom:1px solid #dee2e6;font-weight:700;color:#495057;flex-wrap:wrap;gap:.5rem}.preview-controls{display:flex;align-items:center;gap:.5rem}.preview-select{border:1px solid #ced4da;border-radius:4px;padding:.25rem .5rem;font-size:.8rem;background:#fff;max-width:300px}.preview-refresh{background:none;border:1px solid #6c757d;border-radius:4px;color:#6c757d;padding:.25rem .75rem;font-size:.8rem;cursor:pointer;display:flex;align-items:center;white-space:nowrap}.preview-refresh:hover:not(:disabled){background:#e9ecef}.preview-refresh:disabled{opacity:.5;cursor:not-allowed}.preview-body{display:flex;flex-direction:column;min-height:500px}.preview-loading{padding:2rem;text-align:center;color:#6c757d;font-style:italic}.preview-unavailable{padding:1.5rem;text-align:center;color:#6c757d;font-style:italic}.preview-unavailable i{margin-right:.25rem}.preview-pdf{width:100%;flex:1;min-height:500px}.preview-empty{padding:2rem;text-align:center;color:#6c757d;font-style:italic}.design-info{padding:1rem;min-height:auto}.design-section{margin-bottom:.75rem}.design-label{font-size:.7rem;text-transform:uppercase;color:#868e96;font-weight:600;letter-spacing:.05em}.design-value{font-family:monospace;font-size:.85rem;color:#212529;margin-bottom:.25rem}.design-mapping{margin-top:.25rem}.design-entry{font-family:monospace;font-size:.8rem;color:#495057;padding:.15rem 0}.design-scope{color:#0d6efd}.design-field{color:#198754}.design-entry i{font-size:.7rem;margin:0 .25rem;color:#adb5bd}.design-unconfigured{color:#6c757d;font-style:italic;font-size:.85rem}\n"] }]
+        }], ctorParameters: () => [{ type: EpistolaPluginService }, { type: i2$4.DomSanitizer }, { type: i3.FormIoStateService }, { type: i0.ChangeDetectorRef }, { type: EpistolaTaskContextService }], propDecorators: { value: [{
                 type: Input
             }], valueChange: [{
                 type: Output
@@ -2701,6 +3108,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 type: Input
             }], label: [{
                 type: Input
+            }], processDefinitionKey: [{
+                type: Input
+            }], sourceActivityId: [{
+                type: Input
+            }], overrideMapping: [{
+                type: Input
             }] } });
 
 class EpistolaAdminPageComponent {
@@ -2710,8 +3123,12 @@ class EpistolaAdminPageComponent {
     cards = [];
     selectedCard = null;
     activeTab = 'actions';
+    overviewTab = 'configurations';
     loading = false;
     pluginVersion = null;
+    validationViolations = [];
+    reconcilingExecutionIds = new Set();
+    reconcileFeedback = null;
     connectionStatuses = [];
     usageEntries = [];
     pendingJobs = [];
@@ -2747,6 +3164,9 @@ class EpistolaAdminPageComponent {
         this.activeTab = tab;
         this.updateUrl(this.selectedCard?.configurationId ?? null, tab);
     }
+    setOverviewTab(tab) {
+        this.overviewTab = tab;
+    }
     refresh() {
         this.selectedCard = null;
         this.loadData();
@@ -2763,6 +3183,53 @@ class EpistolaAdminPageComponent {
             },
         });
     }
+    /**
+     * Manually reconcile a single stuck catch event. Pulls the current Epistola job
+     * status and re-runs message correlation if the job is in a terminal state.
+     * Refreshes the Pending list on success so the row drops out of the table.
+     */
+    reconcilePending(job) {
+        if (this.reconcilingExecutionIds.has(job.executionId)) {
+            return;
+        }
+        this.reconcilingExecutionIds.add(job.executionId);
+        this.reconcileFeedback = null;
+        this.adminService.reconcilePending(job.executionId).subscribe({
+            next: (result) => {
+                this.reconcilingExecutionIds.delete(job.executionId);
+                this.reconcileFeedback = {
+                    executionId: job.executionId,
+                    type: 'success',
+                    message: `OK (${result.epistolaStatus}, ${result.correlatedCount ?? 0} correlated)`,
+                };
+                this.loadData();
+            },
+            error: (err) => {
+                this.reconcilingExecutionIds.delete(job.executionId);
+                // 409 from the backend = job is still PENDING/IN_PROGRESS, surface as
+                // informational rather than an error.
+                if (err?.status === 409) {
+                    const status = err.error?.epistolaStatus ?? 'still pending';
+                    this.reconcileFeedback = {
+                        executionId: job.executionId,
+                        type: 'pending',
+                        message: `Epistola: ${status}. Try again in a moment.`,
+                    };
+                }
+                else {
+                    const message = err?.error?.detail ?? err?.error?.message ?? err?.message ?? 'unknown error';
+                    this.reconcileFeedback = {
+                        executionId: job.executionId,
+                        type: 'error',
+                        message,
+                    };
+                }
+            },
+        });
+    }
+    isReconciling(job) {
+        return this.reconcilingExecutionIds.has(job.executionId);
+    }
     updateUrl(configurationId, tab) {
         this.router.navigate([], {
             relativeTo: this.route,
@@ -2814,6 +3281,16 @@ class EpistolaAdminPageComponent {
                 this.tryBuildCards();
             },
         });
+        // Validation violations are independent of cards — load alongside but don't
+        // gate the loading flag on them.
+        this.adminService.getValidationViolations().subscribe({
+            next: (violations) => {
+                this.validationViolations = violations;
+            },
+            error: () => {
+                this.validationViolations = [];
+            },
+        });
     }
     tryBuildCards() {
         if (!this.connectionLoaded || !this.usageLoaded || !this.pendingLoaded) {
@@ -2854,25 +3331,60 @@ class EpistolaAdminPageComponent {
             },
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaAdminPageComponent, deps: [{ token: EpistolaAdminService }, { token: i2$3.ActivatedRoute }, { token: i2$3.Router }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: EpistolaAdminPageComponent, isStandalone: true, selector: "epistola-admin-page", ngImport: i0, template: "<div class=\"epistola-admin\">\n  <!-- Overview: card grid (no configuration selected) -->\n  <ng-container *ngIf=\"!selectedCard\">\n    <div class=\"d-flex justify-content-between align-items-center mb-3\">\n      <div class=\"d-flex align-items-center\">\n        <h5 class=\"mb-0\">{{ 'epistolaAdminOverview' | pluginTranslate: 'epistola' | async }}</h5>\n        <span *ngIf=\"pluginVersion\" class=\"version-badge ms-2\">v{{ pluginVersion }}</span>\n      </div>\n      <button class=\"btn btn-outline-primary btn-sm\" (click)=\"refresh()\" [disabled]=\"loading\">\n        {{ 'epistolaAdminRefresh' | pluginTranslate: 'epistola' | async }}\n      </button>\n    </div>\n\n    <div *ngIf=\"loading\" class=\"text-muted\">\n      {{ 'epistolaAdminLoading' | pluginTranslate: 'epistola' | async }}\n    </div>\n\n    <div *ngIf=\"!loading && cards.length === 0\" class=\"text-muted\">\n      {{ 'epistolaAdminNoConfigurations' | pluginTranslate: 'epistola' | async }}\n    </div>\n\n    <div *ngIf=\"!loading && cards.length > 0\" class=\"card-grid\">\n      <div\n        *ngFor=\"let card of cards\"\n        class=\"config-card\"\n        [class.config-card--ok]=\"card.reachable && card.problemCount === 0\"\n        [class.config-card--warning]=\"card.reachable && card.problemCount > 0\"\n        [class.config-card--error]=\"!card.reachable\"\n        (click)=\"selectConfiguration(card)\"\n      >\n        <div class=\"config-card__header\">\n          <span\n            class=\"status-dot\"\n            [class.status-dot--ok]=\"card.reachable\"\n            [class.status-dot--error]=\"!card.reachable\"\n          >\n          </span>\n          <h5 class=\"config-card__title\">{{ card.configurationTitle }}</h5>\n        </div>\n\n        <div class=\"config-card__body\">\n          <div class=\"config-card__field\">\n            <span class=\"config-card__label\">{{\n              'epistolaAdminTenantId' | pluginTranslate: 'epistola' | async\n            }}</span>\n            <code class=\"config-card__value\">{{ card.tenantId }}</code>\n          </div>\n          <div class=\"config-card__field\">\n            <span class=\"config-card__label\">{{\n              'epistolaAdminStatus' | pluginTranslate: 'epistola' | async\n            }}</span>\n            <cds-tag size=\"sm\" [type]=\"card.reachable ? 'green' : 'red'\">\n              {{\n                card.reachable\n                  ? ('epistolaAdminConnected' | pluginTranslate: 'epistola' | async)\n                  : ('epistolaAdminUnreachable' | pluginTranslate: 'epistola' | async)\n              }}\n            </cds-tag>\n          </div>\n          <div *ngIf=\"card.serverVersion\" class=\"config-card__field\">\n            <span class=\"config-card__label\">{{\n              'epistolaAdminServerVersion' | pluginTranslate: 'epistola' | async\n            }}</span>\n            <span class=\"config-card__value\">{{ card.serverVersion }}</span>\n          </div>\n          <div class=\"config-card__field\">\n            <span class=\"config-card__label\">{{\n              'epistolaAdminPluginActions' | pluginTranslate: 'epistola' | async\n            }}</span>\n            <span class=\"config-card__value\">{{ card.usageCount }}</span>\n          </div>\n          <div *ngIf=\"card.pendingJobs.length > 0\" class=\"config-card__field\">\n            <span class=\"config-card__label\">{{\n              'epistolaAdminPendingJobs' | pluginTranslate: 'epistola' | async\n            }}</span>\n            <cds-tag size=\"sm\" type=\"blue\">{{ card.pendingJobs.length }}</cds-tag>\n          </div>\n          <div *ngIf=\"card.problemCount > 0\" class=\"config-card__field\">\n            <span class=\"config-card__label\">{{\n              'epistolaAdminProblems' | pluginTranslate: 'epistola' | async\n            }}</span>\n            <cds-tag size=\"sm\" type=\"red\">{{ card.problemCount }}</cds-tag>\n          </div>\n        </div>\n\n        <div class=\"config-card__footer\">\n          <span class=\"config-card__latency\">{{ card.latencyMs }} ms</span>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n\n  <!-- Detail view: selected configuration -->\n  <ng-container *ngIf=\"selectedCard\">\n    <div class=\"detail-header mb-3\">\n      <button class=\"btn btn-link btn-sm p-0\" (click)=\"backToOverview()\">\n        &larr; {{ 'epistolaAdminBackToOverview' | pluginTranslate: 'epistola' | async }}\n      </button>\n    </div>\n\n    <div class=\"detail-summary mb-4\">\n      <h4>\n        <span\n          class=\"status-dot me-2\"\n          [class.status-dot--ok]=\"selectedCard.reachable\"\n          [class.status-dot--error]=\"!selectedCard.reachable\"\n        >\n        </span>\n        {{ selectedCard.configurationTitle }}\n      </h4>\n\n      <table class=\"table table-sm detail-info-table\">\n        <tbody>\n          <tr>\n            <th>{{ 'epistolaAdminTenantId' | pluginTranslate: 'epistola' | async }}</th>\n            <td>\n              <code>{{ selectedCard.tenantId }}</code>\n            </td>\n          </tr>\n          <tr>\n            <th>{{ 'epistolaAdminStatus' | pluginTranslate: 'epistola' | async }}</th>\n            <td>\n              <cds-tag size=\"sm\" [type]=\"selectedCard.reachable ? 'green' : 'red'\">\n                {{\n                  selectedCard.reachable\n                    ? ('epistolaAdminConnected' | pluginTranslate: 'epistola' | async)\n                    : ('epistolaAdminUnreachable' | pluginTranslate: 'epistola' | async)\n                }}\n              </cds-tag>\n              <span class=\"text-muted ms-2\">{{ selectedCard.latencyMs }} ms</span>\n            </td>\n          </tr>\n          <tr *ngIf=\"selectedCard.serverVersion\">\n            <th>{{ 'epistolaAdminServerVersion' | pluginTranslate: 'epistola' | async }}</th>\n            <td>{{ selectedCard.serverVersion }}</td>\n          </tr>\n          <tr *ngIf=\"selectedCard.errorMessage\">\n            <th>{{ 'epistolaAdminError' | pluginTranslate: 'epistola' | async }}</th>\n            <td class=\"text-danger\">{{ selectedCard.errorMessage }}</td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n\n    <!-- Tabs -->\n    <ng-template #actionsHeading>\n      {{ 'epistolaAdminPluginActions' | pluginTranslate: 'epistola' | async }}\n      <cds-tag size=\"sm\" type=\"gray\" class=\"ms-1\">{{ selectedCard.usageEntries.length }}</cds-tag>\n    </ng-template>\n\n    <ng-template #pendingHeading>\n      {{ 'epistolaAdminPendingJobs' | pluginTranslate: 'epistola' | async }}\n      <cds-tag\n        size=\"sm\"\n        [type]=\"selectedCard.pendingJobs.length > 0 ? 'blue' : 'gray'\"\n        class=\"ms-1\"\n      >\n        {{ selectedCard.pendingJobs.length }}\n      </cds-tag>\n    </ng-template>\n\n    <cds-tabs [cacheActive]=\"true\" type=\"contained\">\n      <cds-tab\n        [heading]=\"actionsHeading\"\n        [active]=\"activeTab === 'actions'\"\n        (selected)=\"setActiveTab('actions')\"\n      >\n        <div *ngIf=\"selectedCard.usageEntries.length === 0\" class=\"text-muted mt-3 mb-3\">\n          {{ 'epistolaAdminNoUsageForConfig' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <table *ngIf=\"selectedCard.usageEntries.length > 0\" class=\"table table-striped mt-3\">\n          <thead>\n            <tr>\n              <th>{{ 'epistolaAdminCase' | pluginTranslate: 'epistola' | async }}</th>\n              <th>{{ 'epistolaAdminProcess' | pluginTranslate: 'epistola' | async }}</th>\n              <th>{{ 'epistolaAdminActivity' | pluginTranslate: 'epistola' | async }}</th>\n              <th>{{ 'epistolaAdminAction' | pluginTranslate: 'epistola' | async }}</th>\n              <th>{{ 'epistolaAdminProblems' | pluginTranslate: 'epistola' | async }}</th>\n              <th></th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr\n              *ngFor=\"let entry of selectedCard.usageEntries\"\n              [class.table-warning]=\"entry.problems.length > 0\"\n            >\n              <td>{{ entry.caseDefinitionKey || '-' }}</td>\n              <td>\n                <a\n                  *ngIf=\"entry.caseDefinitionKey && entry.caseDefinitionVersionTag\"\n                  [routerLink]=\"[\n                    '/case-management',\n                    'case',\n                    entry.caseDefinitionKey,\n                    'version',\n                    entry.caseDefinitionVersionTag,\n                    'processes',\n                    entry.processDefinitionKey,\n                  ]\"\n                  class=\"usage-link\"\n                >\n                  {{ entry.processDefinitionName }}\n                </a>\n                <span *ngIf=\"!entry.caseDefinitionKey || !entry.caseDefinitionVersionTag\">\n                  {{ entry.processDefinitionName }}\n                </span>\n              </td>\n              <td>{{ entry.activityName }}</td>\n              <td>\n                <code>{{ entry.actionKey }}</code>\n              </td>\n              <td>\n                <cds-tag *ngIf=\"entry.problems.length === 0\" size=\"sm\" type=\"green\">OK</cds-tag>\n                <cds-tag\n                  *ngFor=\"let problem of entry.problems\"\n                  size=\"sm\"\n                  type=\"red\"\n                  class=\"d-block mb-1\"\n                >\n                  {{ problem }}\n                </cds-tag>\n              </td>\n              <td>\n                <button\n                  class=\"btn btn-sm btn-outline-secondary\"\n                  (click)=\"exportProcessLink(entry)\"\n                  [title]=\"'epistolaAdminExport' | pluginTranslate: 'epistola' | async\"\n                >\n                  &#x2913;\n                </button>\n              </td>\n            </tr>\n          </tbody>\n        </table>\n      </cds-tab>\n\n      <cds-tab\n        [heading]=\"pendingHeading\"\n        [active]=\"activeTab === 'pending'\"\n        (selected)=\"setActiveTab('pending')\"\n      >\n        <div *ngIf=\"selectedCard.pendingJobs.length === 0\" class=\"text-muted mt-3 mb-3\">\n          {{ 'epistolaAdminNoPendingJobs' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <table *ngIf=\"selectedCard.pendingJobs.length > 0\" class=\"table table-striped mt-3\">\n          <thead>\n            <tr>\n              <th>{{ 'epistolaAdminProcess' | pluginTranslate: 'epistola' | async }}</th>\n              <th>{{ 'epistolaAdminActivity' | pluginTranslate: 'epistola' | async }}</th>\n              <th>{{ 'epistolaAdminRequestId' | pluginTranslate: 'epistola' | async }}</th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr *ngFor=\"let job of selectedCard.pendingJobs\">\n              <td>{{ job.processDefinitionName }}</td>\n              <td>{{ job.activityName }}</td>\n              <td>\n                <code>{{ job.requestId }}</code>\n              </td>\n            </tr>\n          </tbody>\n        </table>\n      </cds-tab>\n    </cds-tabs>\n  </ng-container>\n</div>\n", styles: [".epistola-admin{padding:1.5rem}.epistola-admin .version-badge{font-size:.75rem;font-weight:500;padding:.2em .6em;border-radius:4px;background-color:#e8e8e8;color:#525252}.epistola-admin .badge{font-size:.85em;padding:.35em .65em}.epistola-admin code{font-size:.9em;color:#525252}.epistola-admin table th{font-weight:600;white-space:nowrap}.epistola-admin .status-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:.5rem;flex-shrink:0;background-color:#adb5bd}.epistola-admin .status-dot--ok{background-color:#198754}.epistola-admin .status-dot--error{background-color:#dc3545}.epistola-admin .card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1rem}.epistola-admin .config-card{border:1px solid #dee2e6;border-radius:8px;padding:1.25rem;cursor:pointer;transition:box-shadow .15s ease,border-color .15s ease;background:#fff}.epistola-admin .config-card:hover{box-shadow:0 2px 8px #0000001a}.epistola-admin .config-card--ok{border-left:4px solid #198754}.epistola-admin .config-card--warning{border-left:4px solid #ffc107}.epistola-admin .config-card--error{border-left:4px solid #dc3545}.epistola-admin .config-card__header{display:flex;align-items:center;margin-bottom:1rem}.epistola-admin .config-card__title{margin:0;font-size:1.05rem;font-weight:600;color:#161616}.epistola-admin .config-card__body{display:flex;flex-direction:column;gap:.5rem}.epistola-admin .config-card__field{display:flex;justify-content:space-between;align-items:center}.epistola-admin .config-card__label{font-size:.875rem;color:#6c757d}.epistola-admin .config-card__value{font-size:.875rem;color:#161616}.epistola-admin .config-card__footer{margin-top:1rem;padding-top:.75rem;border-top:1px solid #f0f0f0;text-align:right}.epistola-admin .config-card__latency{font-size:.8rem;color:#adb5bd}.epistola-admin .usage-link{color:#0f62fe;text-decoration:none}.epistola-admin .usage-link:hover{text-decoration:underline}.epistola-admin .detail-info-table{max-width:500px}.epistola-admin .detail-info-table th{width:140px}.epistola-admin .detail-summary{padding:1rem 0;border-bottom:1px solid #dee2e6}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2$3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: PluginTranslatePipeModule }, { kind: "pipe", type: i2$1.PluginTranslatePipe, name: "pluginTranslate" }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: i5.Tabs, selector: "cds-tabs, ibm-tabs", inputs: ["position", "cacheActive", "followFocus", "isNavigation", "ariaLabel", "ariaLabelledby", "type", "theme", "skeleton"] }, { kind: "component", type: i5.Tab, selector: "cds-tab, ibm-tab", inputs: ["heading", "title", "context", "active", "disabled", "tabIndex", "id", "cacheActive", "tabContent", "templateContext"], outputs: ["selected"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i6.Tag, selector: "cds-tag, ibm-tag", inputs: ["type", "size", "class", "skeleton"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaAdminPageComponent, deps: [{ token: EpistolaAdminService }, { token: i2$5.ActivatedRoute }, { token: i2$5.Router }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: EpistolaAdminPageComponent, isStandalone: true, selector: "epistola-admin-page", ngImport: i0, template: "<div class=\"epistola-admin\">\n  <!-- Overview: tabs (no configuration selected) -->\n  <ng-container *ngIf=\"!selectedCard\">\n    <div class=\"d-flex justify-content-between align-items-center mb-3\">\n      <div class=\"d-flex align-items-center\">\n        <h5 class=\"mb-0\">{{ 'epistolaAdminOverview' | pluginTranslate: 'epistola' | async }}</h5>\n        <span *ngIf=\"pluginVersion\" class=\"version-badge ms-2\">v{{ pluginVersion }}</span>\n      </div>\n      <button class=\"btn btn-outline-primary btn-sm\" (click)=\"refresh()\" [disabled]=\"loading\">\n        {{ 'epistolaAdminRefresh' | pluginTranslate: 'epistola' | async }}\n      </button>\n    </div>\n\n    <ng-template #configurationsHeading>\n      {{ 'epistolaAdminConfigurations' | pluginTranslate: 'epistola' | async }}\n      <cds-tag size=\"sm\" type=\"gray\" class=\"ms-1\">{{ cards.length }}</cds-tag>\n    </ng-template>\n\n    <ng-template #validationsHeading>\n      {{ 'epistolaAdminValidations' | pluginTranslate: 'epistola' | async }}\n      <cds-tag size=\"sm\" [type]=\"validationViolations.length > 0 ? 'red' : 'gray'\" class=\"ms-1\">\n        {{ validationViolations.length }}\n      </cds-tag>\n    </ng-template>\n\n    <cds-tabs [cacheActive]=\"true\" type=\"contained\">\n      <cds-tab\n        [heading]=\"configurationsHeading\"\n        [active]=\"overviewTab === 'configurations'\"\n        (selected)=\"setOverviewTab('configurations')\"\n      >\n        <div *ngIf=\"loading\" class=\"text-muted mt-3\">\n          {{ 'epistolaAdminLoading' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <div *ngIf=\"!loading && cards.length === 0\" class=\"text-muted mt-3\">\n          {{ 'epistolaAdminNoConfigurations' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <div *ngIf=\"!loading && cards.length > 0\" class=\"card-grid\">\n          <div\n            *ngFor=\"let card of cards\"\n            class=\"config-card\"\n            [class.config-card--ok]=\"card.reachable && card.problemCount === 0\"\n            [class.config-card--warning]=\"card.reachable && card.problemCount > 0\"\n            [class.config-card--error]=\"!card.reachable\"\n            (click)=\"selectConfiguration(card)\"\n          >\n            <div class=\"config-card__header\">\n              <span\n                class=\"status-dot\"\n                [class.status-dot--ok]=\"card.reachable\"\n                [class.status-dot--error]=\"!card.reachable\"\n              >\n              </span>\n              <h5 class=\"config-card__title\">{{ card.configurationTitle }}</h5>\n            </div>\n\n            <div class=\"config-card__body\">\n              <div class=\"config-card__field\">\n                <span class=\"config-card__label\">{{\n                  'epistolaAdminTenantId' | pluginTranslate: 'epistola' | async\n                }}</span>\n                <code class=\"config-card__value\">{{ card.tenantId }}</code>\n              </div>\n              <div class=\"config-card__field\">\n                <span class=\"config-card__label\">{{\n                  'epistolaAdminStatus' | pluginTranslate: 'epistola' | async\n                }}</span>\n                <cds-tag size=\"sm\" [type]=\"card.reachable ? 'green' : 'red'\">\n                  {{\n                    card.reachable\n                      ? ('epistolaAdminConnected' | pluginTranslate: 'epistola' | async)\n                      : ('epistolaAdminUnreachable' | pluginTranslate: 'epistola' | async)\n                  }}\n                </cds-tag>\n              </div>\n              <div *ngIf=\"card.serverVersion\" class=\"config-card__field\">\n                <span class=\"config-card__label\">{{\n                  'epistolaAdminServerVersion' | pluginTranslate: 'epistola' | async\n                }}</span>\n                <span class=\"config-card__value\">{{ card.serverVersion }}</span>\n              </div>\n              <div class=\"config-card__field\">\n                <span class=\"config-card__label\">{{\n                  'epistolaAdminPluginActions' | pluginTranslate: 'epistola' | async\n                }}</span>\n                <span class=\"config-card__value\">{{ card.usageCount }}</span>\n              </div>\n              <div *ngIf=\"card.pendingJobs.length > 0\" class=\"config-card__field\">\n                <span class=\"config-card__label\">{{\n                  'epistolaAdminPendingJobs' | pluginTranslate: 'epistola' | async\n                }}</span>\n                <cds-tag size=\"sm\" type=\"blue\">{{ card.pendingJobs.length }}</cds-tag>\n              </div>\n              <div *ngIf=\"card.problemCount > 0\" class=\"config-card__field\">\n                <span class=\"config-card__label\">{{\n                  'epistolaAdminProblems' | pluginTranslate: 'epistola' | async\n                }}</span>\n                <cds-tag size=\"sm\" type=\"red\">{{ card.problemCount }}</cds-tag>\n              </div>\n            </div>\n\n            <div class=\"config-card__footer\">\n              <span class=\"config-card__latency\">{{ card.latencyMs }} ms</span>\n            </div>\n          </div>\n        </div>\n      </cds-tab>\n\n      <cds-tab\n        [heading]=\"validationsHeading\"\n        [active]=\"overviewTab === 'validations'\"\n        (selected)=\"setOverviewTab('validations')\"\n      >\n        <div *ngIf=\"validationViolations.length === 0\" class=\"text-muted mt-3 mb-3\">\n          {{ 'epistolaAdminNoValidations' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <div *ngIf=\"validationViolations.length > 0\" class=\"mt-3\">\n          <p class=\"text-muted mb-3\">\n            {{ 'epistolaAdminValidationWarningBody' | pluginTranslate: 'epistola' | async }}\n          </p>\n          <table class=\"table table-striped\">\n            <thead>\n              <tr>\n                <th>{{ 'epistolaAdminProcess' | pluginTranslate: 'epistola' | async }}</th>\n                <th>{{ 'epistolaAdminActivity' | pluginTranslate: 'epistola' | async }}</th>\n                <th>{{ 'epistolaAdminValidationCode' | pluginTranslate: 'epistola' | async }}</th>\n                <th>\n                  {{ 'epistolaAdminValidationMessage' | pluginTranslate: 'epistola' | async }}\n                </th>\n              </tr>\n            </thead>\n            <tbody>\n              <tr *ngFor=\"let v of validationViolations\">\n                <td>\n                  {{ v.processDefinitionName || v.processDefinitionKey }}\n                  <div *ngIf=\"v.processDefinitionName\" class=\"text-muted small\">\n                    <code>{{ v.processDefinitionKey }}</code>\n                  </div>\n                </td>\n                <td>\n                  <code>{{ v.activityId }}</code>\n                </td>\n                <td>\n                  <cds-tag size=\"sm\" type=\"red\">{{ v.code }}</cds-tag>\n                </td>\n                <td>{{ v.message }}</td>\n              </tr>\n            </tbody>\n          </table>\n        </div>\n      </cds-tab>\n    </cds-tabs>\n  </ng-container>\n\n  <!-- Detail view: selected configuration -->\n  <ng-container *ngIf=\"selectedCard\">\n    <div class=\"detail-header mb-3\">\n      <button class=\"btn btn-link btn-sm p-0\" (click)=\"backToOverview()\">\n        &larr; {{ 'epistolaAdminBackToOverview' | pluginTranslate: 'epistola' | async }}\n      </button>\n    </div>\n\n    <div class=\"detail-summary mb-4\">\n      <h4>\n        <span\n          class=\"status-dot me-2\"\n          [class.status-dot--ok]=\"selectedCard.reachable\"\n          [class.status-dot--error]=\"!selectedCard.reachable\"\n        >\n        </span>\n        {{ selectedCard.configurationTitle }}\n      </h4>\n\n      <table class=\"table table-sm detail-info-table\">\n        <tbody>\n          <tr>\n            <th>{{ 'epistolaAdminTenantId' | pluginTranslate: 'epistola' | async }}</th>\n            <td>\n              <code>{{ selectedCard.tenantId }}</code>\n            </td>\n          </tr>\n          <tr>\n            <th>{{ 'epistolaAdminStatus' | pluginTranslate: 'epistola' | async }}</th>\n            <td>\n              <cds-tag size=\"sm\" [type]=\"selectedCard.reachable ? 'green' : 'red'\">\n                {{\n                  selectedCard.reachable\n                    ? ('epistolaAdminConnected' | pluginTranslate: 'epistola' | async)\n                    : ('epistolaAdminUnreachable' | pluginTranslate: 'epistola' | async)\n                }}\n              </cds-tag>\n              <span class=\"text-muted ms-2\">{{ selectedCard.latencyMs }} ms</span>\n            </td>\n          </tr>\n          <tr *ngIf=\"selectedCard.serverVersion\">\n            <th>{{ 'epistolaAdminServerVersion' | pluginTranslate: 'epistola' | async }}</th>\n            <td>{{ selectedCard.serverVersion }}</td>\n          </tr>\n          <tr *ngIf=\"selectedCard.errorMessage\">\n            <th>{{ 'epistolaAdminError' | pluginTranslate: 'epistola' | async }}</th>\n            <td class=\"text-danger\">{{ selectedCard.errorMessage }}</td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n\n    <!-- Tabs -->\n    <ng-template #actionsHeading>\n      {{ 'epistolaAdminPluginActions' | pluginTranslate: 'epistola' | async }}\n      <cds-tag size=\"sm\" type=\"gray\" class=\"ms-1\">{{ selectedCard.usageEntries.length }}</cds-tag>\n    </ng-template>\n\n    <ng-template #pendingHeading>\n      {{ 'epistolaAdminPendingJobs' | pluginTranslate: 'epistola' | async }}\n      <cds-tag\n        size=\"sm\"\n        [type]=\"selectedCard.pendingJobs.length > 0 ? 'blue' : 'gray'\"\n        class=\"ms-1\"\n      >\n        {{ selectedCard.pendingJobs.length }}\n      </cds-tag>\n    </ng-template>\n\n    <cds-tabs [cacheActive]=\"true\" type=\"contained\">\n      <cds-tab\n        [heading]=\"actionsHeading\"\n        [active]=\"activeTab === 'actions'\"\n        (selected)=\"setActiveTab('actions')\"\n      >\n        <div *ngIf=\"selectedCard.usageEntries.length === 0\" class=\"text-muted mt-3 mb-3\">\n          {{ 'epistolaAdminNoUsageForConfig' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <table *ngIf=\"selectedCard.usageEntries.length > 0\" class=\"table table-striped mt-3\">\n          <thead>\n            <tr>\n              <th>{{ 'epistolaAdminCase' | pluginTranslate: 'epistola' | async }}</th>\n              <th>{{ 'epistolaAdminProcess' | pluginTranslate: 'epistola' | async }}</th>\n              <th>{{ 'epistolaAdminActivity' | pluginTranslate: 'epistola' | async }}</th>\n              <th>{{ 'epistolaAdminAction' | pluginTranslate: 'epistola' | async }}</th>\n              <th>{{ 'epistolaAdminProblems' | pluginTranslate: 'epistola' | async }}</th>\n              <th></th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr\n              *ngFor=\"let entry of selectedCard.usageEntries\"\n              [class.table-warning]=\"entry.problems.length > 0\"\n            >\n              <td>{{ entry.caseDefinitionKey || '-' }}</td>\n              <td>\n                <a\n                  *ngIf=\"entry.caseDefinitionKey && entry.caseDefinitionVersionTag\"\n                  [routerLink]=\"[\n                    '/case-management',\n                    'case',\n                    entry.caseDefinitionKey,\n                    'version',\n                    entry.caseDefinitionVersionTag,\n                    'processes',\n                    entry.processDefinitionKey,\n                  ]\"\n                  class=\"usage-link\"\n                >\n                  {{ entry.processDefinitionName }}\n                </a>\n                <span *ngIf=\"!entry.caseDefinitionKey || !entry.caseDefinitionVersionTag\">\n                  {{ entry.processDefinitionName }}\n                </span>\n              </td>\n              <td>{{ entry.activityName }}</td>\n              <td>\n                <code>{{ entry.actionKey }}</code>\n              </td>\n              <td>\n                <cds-tag *ngIf=\"entry.problems.length === 0\" size=\"sm\" type=\"green\">OK</cds-tag>\n                <cds-tag\n                  *ngFor=\"let problem of entry.problems\"\n                  size=\"sm\"\n                  type=\"red\"\n                  class=\"d-block mb-1\"\n                >\n                  {{ problem }}\n                </cds-tag>\n              </td>\n              <td>\n                <button\n                  class=\"btn btn-sm btn-outline-secondary\"\n                  (click)=\"exportProcessLink(entry)\"\n                  [title]=\"'epistolaAdminExport' | pluginTranslate: 'epistola' | async\"\n                >\n                  &#x2913;\n                </button>\n              </td>\n            </tr>\n          </tbody>\n        </table>\n      </cds-tab>\n\n      <cds-tab\n        [heading]=\"pendingHeading\"\n        [active]=\"activeTab === 'pending'\"\n        (selected)=\"setActiveTab('pending')\"\n      >\n        <div *ngIf=\"selectedCard.pendingJobs.length === 0\" class=\"text-muted mt-3 mb-3\">\n          {{ 'epistolaAdminNoPendingJobs' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <table *ngIf=\"selectedCard.pendingJobs.length > 0\" class=\"table table-striped mt-3\">\n          <thead>\n            <tr>\n              <th>{{ 'epistolaAdminProcess' | pluginTranslate: 'epistola' | async }}</th>\n              <th>{{ 'epistolaAdminActivity' | pluginTranslate: 'epistola' | async }}</th>\n              <th>{{ 'epistolaAdminRequestId' | pluginTranslate: 'epistola' | async }}</th>\n              <th></th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr *ngFor=\"let job of selectedCard.pendingJobs\">\n              <td>{{ job.processDefinitionName }}</td>\n              <td>{{ job.activityName }}</td>\n              <td>\n                <code>{{ job.requestId }}</code>\n              </td>\n              <td class=\"text-end\">\n                <button\n                  class=\"btn btn-sm btn-outline-primary\"\n                  (click)=\"reconcilePending(job)\"\n                  [disabled]=\"isReconciling(job)\"\n                  [title]=\"'epistolaAdminReconcileTooltip' | pluginTranslate: 'epistola' | async\"\n                >\n                  <span *ngIf=\"!isReconciling(job)\">\n                    {{ 'epistolaAdminReconcile' | pluginTranslate: 'epistola' | async }}\n                  </span>\n                  <span *ngIf=\"isReconciling(job)\">\n                    {{ 'epistolaAdminReconciling' | pluginTranslate: 'epistola' | async }}\n                  </span>\n                </button>\n                <div\n                  *ngIf=\"reconcileFeedback && reconcileFeedback.executionId === job.executionId\"\n                  class=\"reconcile-feedback small mt-1\"\n                  [class.text-success]=\"reconcileFeedback.type === 'success'\"\n                  [class.text-warning]=\"reconcileFeedback.type === 'pending'\"\n                  [class.text-danger]=\"reconcileFeedback.type === 'error'\"\n                >\n                  {{ reconcileFeedback.message }}\n                </div>\n              </td>\n            </tr>\n          </tbody>\n        </table>\n      </cds-tab>\n    </cds-tabs>\n  </ng-container>\n</div>\n", styles: [".epistola-admin{padding:1.5rem}.epistola-admin .version-badge{font-size:.75rem;font-weight:500;padding:.2em .6em;border-radius:4px;background-color:#e8e8e8;color:#525252}.epistola-admin .badge{font-size:.85em;padding:.35em .65em}.epistola-admin code{font-size:.9em;color:#525252}.epistola-admin table th{font-weight:600;white-space:nowrap}.epistola-admin .status-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:.5rem;flex-shrink:0;background-color:#adb5bd}.epistola-admin .status-dot--ok{background-color:#198754}.epistola-admin .status-dot--error{background-color:#dc3545}.epistola-admin .card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1rem}.epistola-admin .config-card{border:1px solid #dee2e6;border-radius:8px;padding:1.25rem;cursor:pointer;transition:box-shadow .15s ease,border-color .15s ease;background:#fff}.epistola-admin .config-card:hover{box-shadow:0 2px 8px #0000001a}.epistola-admin .config-card--ok{border-left:4px solid #198754}.epistola-admin .config-card--warning{border-left:4px solid #ffc107}.epistola-admin .config-card--error{border-left:4px solid #dc3545}.epistola-admin .config-card__header{display:flex;align-items:center;margin-bottom:1rem}.epistola-admin .config-card__title{margin:0;font-size:1.05rem;font-weight:600;color:#161616}.epistola-admin .config-card__body{display:flex;flex-direction:column;gap:.5rem}.epistola-admin .config-card__field{display:flex;justify-content:space-between;align-items:center}.epistola-admin .config-card__label{font-size:.875rem;color:#6c757d}.epistola-admin .config-card__value{font-size:.875rem;color:#161616}.epistola-admin .config-card__footer{margin-top:1rem;padding-top:.75rem;border-top:1px solid #f0f0f0;text-align:right}.epistola-admin .config-card__latency{font-size:.8rem;color:#adb5bd}.epistola-admin .usage-link{color:#0f62fe;text-decoration:none}.epistola-admin .usage-link:hover{text-decoration:underline}.epistola-admin .detail-info-table{max-width:500px}.epistola-admin .detail-info-table th{width:140px}.epistola-admin .detail-summary{padding:1rem 0;border-bottom:1px solid #dee2e6}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2$5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: PluginTranslatePipeModule }, { kind: "pipe", type: i2$1.PluginTranslatePipe, name: "pluginTranslate" }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: i5$1.Tabs, selector: "cds-tabs, ibm-tabs", inputs: ["position", "cacheActive", "followFocus", "isNavigation", "ariaLabel", "ariaLabelledby", "type", "theme", "skeleton"] }, { kind: "component", type: i5$1.Tab, selector: "cds-tab, ibm-tab", inputs: ["heading", "title", "context", "active", "disabled", "tabIndex", "id", "cacheActive", "tabContent", "templateContext"], outputs: ["selected"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i6.Tag, selector: "cds-tag, ibm-tag", inputs: ["type", "size", "class", "skeleton"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaAdminPageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'epistola-admin-page', standalone: true, imports: [CommonModule, RouterModule, PluginTranslatePipeModule, TabsModule, TagModule], template: "<div class=\"epistola-admin\">\n  <!-- Overview: card grid (no configuration selected) -->\n  <ng-container *ngIf=\"!selectedCard\">\n    <div class=\"d-flex justify-content-between align-items-center mb-3\">\n      <div class=\"d-flex align-items-center\">\n        <h5 class=\"mb-0\">{{ 'epistolaAdminOverview' | pluginTranslate: 'epistola' | async }}</h5>\n        <span *ngIf=\"pluginVersion\" class=\"version-badge ms-2\">v{{ pluginVersion }}</span>\n      </div>\n      <button class=\"btn btn-outline-primary btn-sm\" (click)=\"refresh()\" [disabled]=\"loading\">\n        {{ 'epistolaAdminRefresh' | pluginTranslate: 'epistola' | async }}\n      </button>\n    </div>\n\n    <div *ngIf=\"loading\" class=\"text-muted\">\n      {{ 'epistolaAdminLoading' | pluginTranslate: 'epistola' | async }}\n    </div>\n\n    <div *ngIf=\"!loading && cards.length === 0\" class=\"text-muted\">\n      {{ 'epistolaAdminNoConfigurations' | pluginTranslate: 'epistola' | async }}\n    </div>\n\n    <div *ngIf=\"!loading && cards.length > 0\" class=\"card-grid\">\n      <div\n        *ngFor=\"let card of cards\"\n        class=\"config-card\"\n        [class.config-card--ok]=\"card.reachable && card.problemCount === 0\"\n        [class.config-card--warning]=\"card.reachable && card.problemCount > 0\"\n        [class.config-card--error]=\"!card.reachable\"\n        (click)=\"selectConfiguration(card)\"\n      >\n        <div class=\"config-card__header\">\n          <span\n            class=\"status-dot\"\n            [class.status-dot--ok]=\"card.reachable\"\n            [class.status-dot--error]=\"!card.reachable\"\n          >\n          </span>\n          <h5 class=\"config-card__title\">{{ card.configurationTitle }}</h5>\n        </div>\n\n        <div class=\"config-card__body\">\n          <div class=\"config-card__field\">\n            <span class=\"config-card__label\">{{\n              'epistolaAdminTenantId' | pluginTranslate: 'epistola' | async\n            }}</span>\n            <code class=\"config-card__value\">{{ card.tenantId }}</code>\n          </div>\n          <div class=\"config-card__field\">\n            <span class=\"config-card__label\">{{\n              'epistolaAdminStatus' | pluginTranslate: 'epistola' | async\n            }}</span>\n            <cds-tag size=\"sm\" [type]=\"card.reachable ? 'green' : 'red'\">\n              {{\n                card.reachable\n                  ? ('epistolaAdminConnected' | pluginTranslate: 'epistola' | async)\n                  : ('epistolaAdminUnreachable' | pluginTranslate: 'epistola' | async)\n              }}\n            </cds-tag>\n          </div>\n          <div *ngIf=\"card.serverVersion\" class=\"config-card__field\">\n            <span class=\"config-card__label\">{{\n              'epistolaAdminServerVersion' | pluginTranslate: 'epistola' | async\n            }}</span>\n            <span class=\"config-card__value\">{{ card.serverVersion }}</span>\n          </div>\n          <div class=\"config-card__field\">\n            <span class=\"config-card__label\">{{\n              'epistolaAdminPluginActions' | pluginTranslate: 'epistola' | async\n            }}</span>\n            <span class=\"config-card__value\">{{ card.usageCount }}</span>\n          </div>\n          <div *ngIf=\"card.pendingJobs.length > 0\" class=\"config-card__field\">\n            <span class=\"config-card__label\">{{\n              'epistolaAdminPendingJobs' | pluginTranslate: 'epistola' | async\n            }}</span>\n            <cds-tag size=\"sm\" type=\"blue\">{{ card.pendingJobs.length }}</cds-tag>\n          </div>\n          <div *ngIf=\"card.problemCount > 0\" class=\"config-card__field\">\n            <span class=\"config-card__label\">{{\n              'epistolaAdminProblems' | pluginTranslate: 'epistola' | async\n            }}</span>\n            <cds-tag size=\"sm\" type=\"red\">{{ card.problemCount }}</cds-tag>\n          </div>\n        </div>\n\n        <div class=\"config-card__footer\">\n          <span class=\"config-card__latency\">{{ card.latencyMs }} ms</span>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n\n  <!-- Detail view: selected configuration -->\n  <ng-container *ngIf=\"selectedCard\">\n    <div class=\"detail-header mb-3\">\n      <button class=\"btn btn-link btn-sm p-0\" (click)=\"backToOverview()\">\n        &larr; {{ 'epistolaAdminBackToOverview' | pluginTranslate: 'epistola' | async }}\n      </button>\n    </div>\n\n    <div class=\"detail-summary mb-4\">\n      <h4>\n        <span\n          class=\"status-dot me-2\"\n          [class.status-dot--ok]=\"selectedCard.reachable\"\n          [class.status-dot--error]=\"!selectedCard.reachable\"\n        >\n        </span>\n        {{ selectedCard.configurationTitle }}\n      </h4>\n\n      <table class=\"table table-sm detail-info-table\">\n        <tbody>\n          <tr>\n            <th>{{ 'epistolaAdminTenantId' | pluginTranslate: 'epistola' | async }}</th>\n            <td>\n              <code>{{ selectedCard.tenantId }}</code>\n            </td>\n          </tr>\n          <tr>\n            <th>{{ 'epistolaAdminStatus' | pluginTranslate: 'epistola' | async }}</th>\n            <td>\n              <cds-tag size=\"sm\" [type]=\"selectedCard.reachable ? 'green' : 'red'\">\n                {{\n                  selectedCard.reachable\n                    ? ('epistolaAdminConnected' | pluginTranslate: 'epistola' | async)\n                    : ('epistolaAdminUnreachable' | pluginTranslate: 'epistola' | async)\n                }}\n              </cds-tag>\n              <span class=\"text-muted ms-2\">{{ selectedCard.latencyMs }} ms</span>\n            </td>\n          </tr>\n          <tr *ngIf=\"selectedCard.serverVersion\">\n            <th>{{ 'epistolaAdminServerVersion' | pluginTranslate: 'epistola' | async }}</th>\n            <td>{{ selectedCard.serverVersion }}</td>\n          </tr>\n          <tr *ngIf=\"selectedCard.errorMessage\">\n            <th>{{ 'epistolaAdminError' | pluginTranslate: 'epistola' | async }}</th>\n            <td class=\"text-danger\">{{ selectedCard.errorMessage }}</td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n\n    <!-- Tabs -->\n    <ng-template #actionsHeading>\n      {{ 'epistolaAdminPluginActions' | pluginTranslate: 'epistola' | async }}\n      <cds-tag size=\"sm\" type=\"gray\" class=\"ms-1\">{{ selectedCard.usageEntries.length }}</cds-tag>\n    </ng-template>\n\n    <ng-template #pendingHeading>\n      {{ 'epistolaAdminPendingJobs' | pluginTranslate: 'epistola' | async }}\n      <cds-tag\n        size=\"sm\"\n        [type]=\"selectedCard.pendingJobs.length > 0 ? 'blue' : 'gray'\"\n        class=\"ms-1\"\n      >\n        {{ selectedCard.pendingJobs.length }}\n      </cds-tag>\n    </ng-template>\n\n    <cds-tabs [cacheActive]=\"true\" type=\"contained\">\n      <cds-tab\n        [heading]=\"actionsHeading\"\n        [active]=\"activeTab === 'actions'\"\n        (selected)=\"setActiveTab('actions')\"\n      >\n        <div *ngIf=\"selectedCard.usageEntries.length === 0\" class=\"text-muted mt-3 mb-3\">\n          {{ 'epistolaAdminNoUsageForConfig' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <table *ngIf=\"selectedCard.usageEntries.length > 0\" class=\"table table-striped mt-3\">\n          <thead>\n            <tr>\n              <th>{{ 'epistolaAdminCase' | pluginTranslate: 'epistola' | async }}</th>\n              <th>{{ 'epistolaAdminProcess' | pluginTranslate: 'epistola' | async }}</th>\n              <th>{{ 'epistolaAdminActivity' | pluginTranslate: 'epistola' | async }}</th>\n              <th>{{ 'epistolaAdminAction' | pluginTranslate: 'epistola' | async }}</th>\n              <th>{{ 'epistolaAdminProblems' | pluginTranslate: 'epistola' | async }}</th>\n              <th></th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr\n              *ngFor=\"let entry of selectedCard.usageEntries\"\n              [class.table-warning]=\"entry.problems.length > 0\"\n            >\n              <td>{{ entry.caseDefinitionKey || '-' }}</td>\n              <td>\n                <a\n                  *ngIf=\"entry.caseDefinitionKey && entry.caseDefinitionVersionTag\"\n                  [routerLink]=\"[\n                    '/case-management',\n                    'case',\n                    entry.caseDefinitionKey,\n                    'version',\n                    entry.caseDefinitionVersionTag,\n                    'processes',\n                    entry.processDefinitionKey,\n                  ]\"\n                  class=\"usage-link\"\n                >\n                  {{ entry.processDefinitionName }}\n                </a>\n                <span *ngIf=\"!entry.caseDefinitionKey || !entry.caseDefinitionVersionTag\">\n                  {{ entry.processDefinitionName }}\n                </span>\n              </td>\n              <td>{{ entry.activityName }}</td>\n              <td>\n                <code>{{ entry.actionKey }}</code>\n              </td>\n              <td>\n                <cds-tag *ngIf=\"entry.problems.length === 0\" size=\"sm\" type=\"green\">OK</cds-tag>\n                <cds-tag\n                  *ngFor=\"let problem of entry.problems\"\n                  size=\"sm\"\n                  type=\"red\"\n                  class=\"d-block mb-1\"\n                >\n                  {{ problem }}\n                </cds-tag>\n              </td>\n              <td>\n                <button\n                  class=\"btn btn-sm btn-outline-secondary\"\n                  (click)=\"exportProcessLink(entry)\"\n                  [title]=\"'epistolaAdminExport' | pluginTranslate: 'epistola' | async\"\n                >\n                  &#x2913;\n                </button>\n              </td>\n            </tr>\n          </tbody>\n        </table>\n      </cds-tab>\n\n      <cds-tab\n        [heading]=\"pendingHeading\"\n        [active]=\"activeTab === 'pending'\"\n        (selected)=\"setActiveTab('pending')\"\n      >\n        <div *ngIf=\"selectedCard.pendingJobs.length === 0\" class=\"text-muted mt-3 mb-3\">\n          {{ 'epistolaAdminNoPendingJobs' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <table *ngIf=\"selectedCard.pendingJobs.length > 0\" class=\"table table-striped mt-3\">\n          <thead>\n            <tr>\n              <th>{{ 'epistolaAdminProcess' | pluginTranslate: 'epistola' | async }}</th>\n              <th>{{ 'epistolaAdminActivity' | pluginTranslate: 'epistola' | async }}</th>\n              <th>{{ 'epistolaAdminRequestId' | pluginTranslate: 'epistola' | async }}</th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr *ngFor=\"let job of selectedCard.pendingJobs\">\n              <td>{{ job.processDefinitionName }}</td>\n              <td>{{ job.activityName }}</td>\n              <td>\n                <code>{{ job.requestId }}</code>\n              </td>\n            </tr>\n          </tbody>\n        </table>\n      </cds-tab>\n    </cds-tabs>\n  </ng-container>\n</div>\n", styles: [".epistola-admin{padding:1.5rem}.epistola-admin .version-badge{font-size:.75rem;font-weight:500;padding:.2em .6em;border-radius:4px;background-color:#e8e8e8;color:#525252}.epistola-admin .badge{font-size:.85em;padding:.35em .65em}.epistola-admin code{font-size:.9em;color:#525252}.epistola-admin table th{font-weight:600;white-space:nowrap}.epistola-admin .status-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:.5rem;flex-shrink:0;background-color:#adb5bd}.epistola-admin .status-dot--ok{background-color:#198754}.epistola-admin .status-dot--error{background-color:#dc3545}.epistola-admin .card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1rem}.epistola-admin .config-card{border:1px solid #dee2e6;border-radius:8px;padding:1.25rem;cursor:pointer;transition:box-shadow .15s ease,border-color .15s ease;background:#fff}.epistola-admin .config-card:hover{box-shadow:0 2px 8px #0000001a}.epistola-admin .config-card--ok{border-left:4px solid #198754}.epistola-admin .config-card--warning{border-left:4px solid #ffc107}.epistola-admin .config-card--error{border-left:4px solid #dc3545}.epistola-admin .config-card__header{display:flex;align-items:center;margin-bottom:1rem}.epistola-admin .config-card__title{margin:0;font-size:1.05rem;font-weight:600;color:#161616}.epistola-admin .config-card__body{display:flex;flex-direction:column;gap:.5rem}.epistola-admin .config-card__field{display:flex;justify-content:space-between;align-items:center}.epistola-admin .config-card__label{font-size:.875rem;color:#6c757d}.epistola-admin .config-card__value{font-size:.875rem;color:#161616}.epistola-admin .config-card__footer{margin-top:1rem;padding-top:.75rem;border-top:1px solid #f0f0f0;text-align:right}.epistola-admin .config-card__latency{font-size:.8rem;color:#adb5bd}.epistola-admin .usage-link{color:#0f62fe;text-decoration:none}.epistola-admin .usage-link:hover{text-decoration:underline}.epistola-admin .detail-info-table{max-width:500px}.epistola-admin .detail-info-table th{width:140px}.epistola-admin .detail-summary{padding:1rem 0;border-bottom:1px solid #dee2e6}\n"] }]
-        }], ctorParameters: () => [{ type: EpistolaAdminService }, { type: i2$3.ActivatedRoute }, { type: i2$3.Router }] });
+            args: [{ selector: 'epistola-admin-page', standalone: true, imports: [CommonModule, RouterModule, PluginTranslatePipeModule, TabsModule, TagModule], template: "<div class=\"epistola-admin\">\n  <!-- Overview: tabs (no configuration selected) -->\n  <ng-container *ngIf=\"!selectedCard\">\n    <div class=\"d-flex justify-content-between align-items-center mb-3\">\n      <div class=\"d-flex align-items-center\">\n        <h5 class=\"mb-0\">{{ 'epistolaAdminOverview' | pluginTranslate: 'epistola' | async }}</h5>\n        <span *ngIf=\"pluginVersion\" class=\"version-badge ms-2\">v{{ pluginVersion }}</span>\n      </div>\n      <button class=\"btn btn-outline-primary btn-sm\" (click)=\"refresh()\" [disabled]=\"loading\">\n        {{ 'epistolaAdminRefresh' | pluginTranslate: 'epistola' | async }}\n      </button>\n    </div>\n\n    <ng-template #configurationsHeading>\n      {{ 'epistolaAdminConfigurations' | pluginTranslate: 'epistola' | async }}\n      <cds-tag size=\"sm\" type=\"gray\" class=\"ms-1\">{{ cards.length }}</cds-tag>\n    </ng-template>\n\n    <ng-template #validationsHeading>\n      {{ 'epistolaAdminValidations' | pluginTranslate: 'epistola' | async }}\n      <cds-tag size=\"sm\" [type]=\"validationViolations.length > 0 ? 'red' : 'gray'\" class=\"ms-1\">\n        {{ validationViolations.length }}\n      </cds-tag>\n    </ng-template>\n\n    <cds-tabs [cacheActive]=\"true\" type=\"contained\">\n      <cds-tab\n        [heading]=\"configurationsHeading\"\n        [active]=\"overviewTab === 'configurations'\"\n        (selected)=\"setOverviewTab('configurations')\"\n      >\n        <div *ngIf=\"loading\" class=\"text-muted mt-3\">\n          {{ 'epistolaAdminLoading' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <div *ngIf=\"!loading && cards.length === 0\" class=\"text-muted mt-3\">\n          {{ 'epistolaAdminNoConfigurations' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <div *ngIf=\"!loading && cards.length > 0\" class=\"card-grid\">\n          <div\n            *ngFor=\"let card of cards\"\n            class=\"config-card\"\n            [class.config-card--ok]=\"card.reachable && card.problemCount === 0\"\n            [class.config-card--warning]=\"card.reachable && card.problemCount > 0\"\n            [class.config-card--error]=\"!card.reachable\"\n            (click)=\"selectConfiguration(card)\"\n          >\n            <div class=\"config-card__header\">\n              <span\n                class=\"status-dot\"\n                [class.status-dot--ok]=\"card.reachable\"\n                [class.status-dot--error]=\"!card.reachable\"\n              >\n              </span>\n              <h5 class=\"config-card__title\">{{ card.configurationTitle }}</h5>\n            </div>\n\n            <div class=\"config-card__body\">\n              <div class=\"config-card__field\">\n                <span class=\"config-card__label\">{{\n                  'epistolaAdminTenantId' | pluginTranslate: 'epistola' | async\n                }}</span>\n                <code class=\"config-card__value\">{{ card.tenantId }}</code>\n              </div>\n              <div class=\"config-card__field\">\n                <span class=\"config-card__label\">{{\n                  'epistolaAdminStatus' | pluginTranslate: 'epistola' | async\n                }}</span>\n                <cds-tag size=\"sm\" [type]=\"card.reachable ? 'green' : 'red'\">\n                  {{\n                    card.reachable\n                      ? ('epistolaAdminConnected' | pluginTranslate: 'epistola' | async)\n                      : ('epistolaAdminUnreachable' | pluginTranslate: 'epistola' | async)\n                  }}\n                </cds-tag>\n              </div>\n              <div *ngIf=\"card.serverVersion\" class=\"config-card__field\">\n                <span class=\"config-card__label\">{{\n                  'epistolaAdminServerVersion' | pluginTranslate: 'epistola' | async\n                }}</span>\n                <span class=\"config-card__value\">{{ card.serverVersion }}</span>\n              </div>\n              <div class=\"config-card__field\">\n                <span class=\"config-card__label\">{{\n                  'epistolaAdminPluginActions' | pluginTranslate: 'epistola' | async\n                }}</span>\n                <span class=\"config-card__value\">{{ card.usageCount }}</span>\n              </div>\n              <div *ngIf=\"card.pendingJobs.length > 0\" class=\"config-card__field\">\n                <span class=\"config-card__label\">{{\n                  'epistolaAdminPendingJobs' | pluginTranslate: 'epistola' | async\n                }}</span>\n                <cds-tag size=\"sm\" type=\"blue\">{{ card.pendingJobs.length }}</cds-tag>\n              </div>\n              <div *ngIf=\"card.problemCount > 0\" class=\"config-card__field\">\n                <span class=\"config-card__label\">{{\n                  'epistolaAdminProblems' | pluginTranslate: 'epistola' | async\n                }}</span>\n                <cds-tag size=\"sm\" type=\"red\">{{ card.problemCount }}</cds-tag>\n              </div>\n            </div>\n\n            <div class=\"config-card__footer\">\n              <span class=\"config-card__latency\">{{ card.latencyMs }} ms</span>\n            </div>\n          </div>\n        </div>\n      </cds-tab>\n\n      <cds-tab\n        [heading]=\"validationsHeading\"\n        [active]=\"overviewTab === 'validations'\"\n        (selected)=\"setOverviewTab('validations')\"\n      >\n        <div *ngIf=\"validationViolations.length === 0\" class=\"text-muted mt-3 mb-3\">\n          {{ 'epistolaAdminNoValidations' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <div *ngIf=\"validationViolations.length > 0\" class=\"mt-3\">\n          <p class=\"text-muted mb-3\">\n            {{ 'epistolaAdminValidationWarningBody' | pluginTranslate: 'epistola' | async }}\n          </p>\n          <table class=\"table table-striped\">\n            <thead>\n              <tr>\n                <th>{{ 'epistolaAdminProcess' | pluginTranslate: 'epistola' | async }}</th>\n                <th>{{ 'epistolaAdminActivity' | pluginTranslate: 'epistola' | async }}</th>\n                <th>{{ 'epistolaAdminValidationCode' | pluginTranslate: 'epistola' | async }}</th>\n                <th>\n                  {{ 'epistolaAdminValidationMessage' | pluginTranslate: 'epistola' | async }}\n                </th>\n              </tr>\n            </thead>\n            <tbody>\n              <tr *ngFor=\"let v of validationViolations\">\n                <td>\n                  {{ v.processDefinitionName || v.processDefinitionKey }}\n                  <div *ngIf=\"v.processDefinitionName\" class=\"text-muted small\">\n                    <code>{{ v.processDefinitionKey }}</code>\n                  </div>\n                </td>\n                <td>\n                  <code>{{ v.activityId }}</code>\n                </td>\n                <td>\n                  <cds-tag size=\"sm\" type=\"red\">{{ v.code }}</cds-tag>\n                </td>\n                <td>{{ v.message }}</td>\n              </tr>\n            </tbody>\n          </table>\n        </div>\n      </cds-tab>\n    </cds-tabs>\n  </ng-container>\n\n  <!-- Detail view: selected configuration -->\n  <ng-container *ngIf=\"selectedCard\">\n    <div class=\"detail-header mb-3\">\n      <button class=\"btn btn-link btn-sm p-0\" (click)=\"backToOverview()\">\n        &larr; {{ 'epistolaAdminBackToOverview' | pluginTranslate: 'epistola' | async }}\n      </button>\n    </div>\n\n    <div class=\"detail-summary mb-4\">\n      <h4>\n        <span\n          class=\"status-dot me-2\"\n          [class.status-dot--ok]=\"selectedCard.reachable\"\n          [class.status-dot--error]=\"!selectedCard.reachable\"\n        >\n        </span>\n        {{ selectedCard.configurationTitle }}\n      </h4>\n\n      <table class=\"table table-sm detail-info-table\">\n        <tbody>\n          <tr>\n            <th>{{ 'epistolaAdminTenantId' | pluginTranslate: 'epistola' | async }}</th>\n            <td>\n              <code>{{ selectedCard.tenantId }}</code>\n            </td>\n          </tr>\n          <tr>\n            <th>{{ 'epistolaAdminStatus' | pluginTranslate: 'epistola' | async }}</th>\n            <td>\n              <cds-tag size=\"sm\" [type]=\"selectedCard.reachable ? 'green' : 'red'\">\n                {{\n                  selectedCard.reachable\n                    ? ('epistolaAdminConnected' | pluginTranslate: 'epistola' | async)\n                    : ('epistolaAdminUnreachable' | pluginTranslate: 'epistola' | async)\n                }}\n              </cds-tag>\n              <span class=\"text-muted ms-2\">{{ selectedCard.latencyMs }} ms</span>\n            </td>\n          </tr>\n          <tr *ngIf=\"selectedCard.serverVersion\">\n            <th>{{ 'epistolaAdminServerVersion' | pluginTranslate: 'epistola' | async }}</th>\n            <td>{{ selectedCard.serverVersion }}</td>\n          </tr>\n          <tr *ngIf=\"selectedCard.errorMessage\">\n            <th>{{ 'epistolaAdminError' | pluginTranslate: 'epistola' | async }}</th>\n            <td class=\"text-danger\">{{ selectedCard.errorMessage }}</td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n\n    <!-- Tabs -->\n    <ng-template #actionsHeading>\n      {{ 'epistolaAdminPluginActions' | pluginTranslate: 'epistola' | async }}\n      <cds-tag size=\"sm\" type=\"gray\" class=\"ms-1\">{{ selectedCard.usageEntries.length }}</cds-tag>\n    </ng-template>\n\n    <ng-template #pendingHeading>\n      {{ 'epistolaAdminPendingJobs' | pluginTranslate: 'epistola' | async }}\n      <cds-tag\n        size=\"sm\"\n        [type]=\"selectedCard.pendingJobs.length > 0 ? 'blue' : 'gray'\"\n        class=\"ms-1\"\n      >\n        {{ selectedCard.pendingJobs.length }}\n      </cds-tag>\n    </ng-template>\n\n    <cds-tabs [cacheActive]=\"true\" type=\"contained\">\n      <cds-tab\n        [heading]=\"actionsHeading\"\n        [active]=\"activeTab === 'actions'\"\n        (selected)=\"setActiveTab('actions')\"\n      >\n        <div *ngIf=\"selectedCard.usageEntries.length === 0\" class=\"text-muted mt-3 mb-3\">\n          {{ 'epistolaAdminNoUsageForConfig' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <table *ngIf=\"selectedCard.usageEntries.length > 0\" class=\"table table-striped mt-3\">\n          <thead>\n            <tr>\n              <th>{{ 'epistolaAdminCase' | pluginTranslate: 'epistola' | async }}</th>\n              <th>{{ 'epistolaAdminProcess' | pluginTranslate: 'epistola' | async }}</th>\n              <th>{{ 'epistolaAdminActivity' | pluginTranslate: 'epistola' | async }}</th>\n              <th>{{ 'epistolaAdminAction' | pluginTranslate: 'epistola' | async }}</th>\n              <th>{{ 'epistolaAdminProblems' | pluginTranslate: 'epistola' | async }}</th>\n              <th></th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr\n              *ngFor=\"let entry of selectedCard.usageEntries\"\n              [class.table-warning]=\"entry.problems.length > 0\"\n            >\n              <td>{{ entry.caseDefinitionKey || '-' }}</td>\n              <td>\n                <a\n                  *ngIf=\"entry.caseDefinitionKey && entry.caseDefinitionVersionTag\"\n                  [routerLink]=\"[\n                    '/case-management',\n                    'case',\n                    entry.caseDefinitionKey,\n                    'version',\n                    entry.caseDefinitionVersionTag,\n                    'processes',\n                    entry.processDefinitionKey,\n                  ]\"\n                  class=\"usage-link\"\n                >\n                  {{ entry.processDefinitionName }}\n                </a>\n                <span *ngIf=\"!entry.caseDefinitionKey || !entry.caseDefinitionVersionTag\">\n                  {{ entry.processDefinitionName }}\n                </span>\n              </td>\n              <td>{{ entry.activityName }}</td>\n              <td>\n                <code>{{ entry.actionKey }}</code>\n              </td>\n              <td>\n                <cds-tag *ngIf=\"entry.problems.length === 0\" size=\"sm\" type=\"green\">OK</cds-tag>\n                <cds-tag\n                  *ngFor=\"let problem of entry.problems\"\n                  size=\"sm\"\n                  type=\"red\"\n                  class=\"d-block mb-1\"\n                >\n                  {{ problem }}\n                </cds-tag>\n              </td>\n              <td>\n                <button\n                  class=\"btn btn-sm btn-outline-secondary\"\n                  (click)=\"exportProcessLink(entry)\"\n                  [title]=\"'epistolaAdminExport' | pluginTranslate: 'epistola' | async\"\n                >\n                  &#x2913;\n                </button>\n              </td>\n            </tr>\n          </tbody>\n        </table>\n      </cds-tab>\n\n      <cds-tab\n        [heading]=\"pendingHeading\"\n        [active]=\"activeTab === 'pending'\"\n        (selected)=\"setActiveTab('pending')\"\n      >\n        <div *ngIf=\"selectedCard.pendingJobs.length === 0\" class=\"text-muted mt-3 mb-3\">\n          {{ 'epistolaAdminNoPendingJobs' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <table *ngIf=\"selectedCard.pendingJobs.length > 0\" class=\"table table-striped mt-3\">\n          <thead>\n            <tr>\n              <th>{{ 'epistolaAdminProcess' | pluginTranslate: 'epistola' | async }}</th>\n              <th>{{ 'epistolaAdminActivity' | pluginTranslate: 'epistola' | async }}</th>\n              <th>{{ 'epistolaAdminRequestId' | pluginTranslate: 'epistola' | async }}</th>\n              <th></th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr *ngFor=\"let job of selectedCard.pendingJobs\">\n              <td>{{ job.processDefinitionName }}</td>\n              <td>{{ job.activityName }}</td>\n              <td>\n                <code>{{ job.requestId }}</code>\n              </td>\n              <td class=\"text-end\">\n                <button\n                  class=\"btn btn-sm btn-outline-primary\"\n                  (click)=\"reconcilePending(job)\"\n                  [disabled]=\"isReconciling(job)\"\n                  [title]=\"'epistolaAdminReconcileTooltip' | pluginTranslate: 'epistola' | async\"\n                >\n                  <span *ngIf=\"!isReconciling(job)\">\n                    {{ 'epistolaAdminReconcile' | pluginTranslate: 'epistola' | async }}\n                  </span>\n                  <span *ngIf=\"isReconciling(job)\">\n                    {{ 'epistolaAdminReconciling' | pluginTranslate: 'epistola' | async }}\n                  </span>\n                </button>\n                <div\n                  *ngIf=\"reconcileFeedback && reconcileFeedback.executionId === job.executionId\"\n                  class=\"reconcile-feedback small mt-1\"\n                  [class.text-success]=\"reconcileFeedback.type === 'success'\"\n                  [class.text-warning]=\"reconcileFeedback.type === 'pending'\"\n                  [class.text-danger]=\"reconcileFeedback.type === 'error'\"\n                >\n                  {{ reconcileFeedback.message }}\n                </div>\n              </td>\n            </tr>\n          </tbody>\n        </table>\n      </cds-tab>\n    </cds-tabs>\n  </ng-container>\n</div>\n", styles: [".epistola-admin{padding:1.5rem}.epistola-admin .version-badge{font-size:.75rem;font-weight:500;padding:.2em .6em;border-radius:4px;background-color:#e8e8e8;color:#525252}.epistola-admin .badge{font-size:.85em;padding:.35em .65em}.epistola-admin code{font-size:.9em;color:#525252}.epistola-admin table th{font-weight:600;white-space:nowrap}.epistola-admin .status-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:.5rem;flex-shrink:0;background-color:#adb5bd}.epistola-admin .status-dot--ok{background-color:#198754}.epistola-admin .status-dot--error{background-color:#dc3545}.epistola-admin .card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1rem}.epistola-admin .config-card{border:1px solid #dee2e6;border-radius:8px;padding:1.25rem;cursor:pointer;transition:box-shadow .15s ease,border-color .15s ease;background:#fff}.epistola-admin .config-card:hover{box-shadow:0 2px 8px #0000001a}.epistola-admin .config-card--ok{border-left:4px solid #198754}.epistola-admin .config-card--warning{border-left:4px solid #ffc107}.epistola-admin .config-card--error{border-left:4px solid #dc3545}.epistola-admin .config-card__header{display:flex;align-items:center;margin-bottom:1rem}.epistola-admin .config-card__title{margin:0;font-size:1.05rem;font-weight:600;color:#161616}.epistola-admin .config-card__body{display:flex;flex-direction:column;gap:.5rem}.epistola-admin .config-card__field{display:flex;justify-content:space-between;align-items:center}.epistola-admin .config-card__label{font-size:.875rem;color:#6c757d}.epistola-admin .config-card__value{font-size:.875rem;color:#161616}.epistola-admin .config-card__footer{margin-top:1rem;padding-top:.75rem;border-top:1px solid #f0f0f0;text-align:right}.epistola-admin .config-card__latency{font-size:.8rem;color:#adb5bd}.epistola-admin .usage-link{color:#0f62fe;text-decoration:none}.epistola-admin .usage-link:hover{text-decoration:underline}.epistola-admin .detail-info-table{max-width:500px}.epistola-admin .detail-info-table th{width:140px}.epistola-admin .detail-summary{padding:1rem 0;border-bottom:1px solid #dee2e6}\n"] }]
+        }], ctorParameters: () => [{ type: EpistolaAdminService }, { type: i2$5.ActivatedRoute }, { type: i2$5.Router }] });
+
+function isRuntimeWindow(value) {
+    return typeof value === 'object' && value !== null;
+}
+/**
+ * Reads the runtime feature flag that decides whether the Epistola plugin
+ * surfaces (admin menu, /epistola route, plugin specification, Formio
+ * components) should activate in the host Valtimo app.
+ *
+ * The flag is sourced from `window['env']['epistolaEnabled']`, populated at
+ * container start by `envsubst` against `assets/config.template.js` (the
+ * standard Valtimo runtime-config pattern). Defaults to enabled — only the
+ * literal `false` or string `'false'` disables the plugin, matching the
+ * backend's `epistola.enabled` `matchIfMissing = true` semantics.
+ *
+ * Exposed as a runtime helper rather than evaluated directly in `@NgModule`
+ * decorator metadata because Angular's AOT compiler cannot statically resolve
+ * `window` accesses (NG1010). Read from runtime code such as specification
+ * property getters, route guards, or the environment initializer instead.
+ */
+function isEpistolaEnabled() {
+    const runtimeWindow = Reflect.get(globalThis, 'window');
+    if (!runtimeWindow)
+        return true;
+    if (!isRuntimeWindow(runtimeWindow))
+        return true;
+    const flag = runtimeWindow.env ? runtimeWindow.env.epistolaEnabled : undefined;
+    return flag !== false && flag !== 'false';
+}
+
+const epistolaEnabledGuard = () => {
+    if (isEpistolaEnabled())
+        return true;
+    return inject(Router).parseUrl('/');
+};
 
 const routes = [
     {
         path: 'epistola',
         component: EpistolaAdminPageComponent,
-        canActivate: [AuthGuardService],
+        canActivate: [epistolaEnabledGuard, AuthGuardService],
         data: { title: 'Epistola', roles: ['ROLE_ADMIN'] },
     },
 ];
 class EpistolaAdminRoutingModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaAdminRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.20", ngImport: i0, type: EpistolaAdminRoutingModule, imports: [i2$3.RouterModule], exports: [RouterModule] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.20", ngImport: i0, type: EpistolaAdminRoutingModule, imports: [i2$5.RouterModule], exports: [RouterModule] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaAdminRoutingModule, imports: [RouterModule.forChild(routes), RouterModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaAdminRoutingModule, decorators: [{
@@ -2883,19 +3395,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 }]
         }] });
 
-const EPISTOLA_DOWNLOAD_OPTIONS = {
-    type: 'epistola-download',
-    selector: 'epistola-download-button',
-    title: 'Epistola Download',
+const EPISTOLA_DOCUMENT_OPTIONS = {
+    type: 'epistola-document',
+    selector: 'epistola-document-element',
+    title: 'Epistola Document',
     group: 'basic',
-    icon: 'download',
+    icon: 'file-pdf-o',
     emptyValue: null,
-    fieldOptions: ['filename', 'label'],
+    fieldOptions: ['label', 'display', 'documentVariable', 'tenantIdVariable', 'filename'],
 };
-function registerEpistolaDownloadComponent(injector) {
-    if (!customElements.get(EPISTOLA_DOWNLOAD_OPTIONS.selector)) {
-        registerCustomFormioComponent(EPISTOLA_DOWNLOAD_OPTIONS, EpistolaDownloadComponent, injector);
+function registerEpistolaDocumentComponent(injector) {
+    if (customElements.get(EPISTOLA_DOCUMENT_OPTIONS.selector)) {
+        return;
     }
+    registerCustomFormioComponent(EPISTOLA_DOCUMENT_OPTIONS, EpistolaDocumentComponent, injector);
 }
 
 const EPISTOLA_RETRY_FORM_OPTIONS = {
@@ -2913,33 +3426,548 @@ function registerEpistolaRetryFormComponent(injector) {
     }
 }
 
-const EPISTOLA_PREVIEW_BUTTON_OPTIONS = {
-    type: 'epistola-preview-button',
-    selector: 'epistola-preview-button-element',
-    title: 'Epistola Preview',
+const EPISTOLA_DOCUMENT_PREVIEW_OPTIONS = {
+    type: 'epistola-document-preview',
+    selector: 'epistola-document-preview-element',
+    title: 'Epistola Document Preview',
     group: 'basic',
-    icon: 'eye',
+    icon: 'file-pdf-o',
     emptyValue: null,
-    fieldOptions: ['label'],
+    fieldOptions: ['label', 'processDefinitionKey', 'sourceActivityId', 'overrideMapping'],
+    editForm: () => ({
+        components: [
+            {
+                type: 'epistola-process-link-selector',
+                key: 'processLinkSelection',
+                label: 'Process Link',
+                weight: 10,
+                validate: { required: true },
+            },
+            {
+                type: 'epistola-override-builder',
+                key: 'overrideMapping',
+                label: 'Input Overrides',
+                weight: 20,
+            },
+        ],
+    }),
 };
-function registerEpistolaPreviewButtonComponent(injector) {
-    if (!customElements.get(EPISTOLA_PREVIEW_BUTTON_OPTIONS.selector)) {
-        registerCustomFormioComponent(EPISTOLA_PREVIEW_BUTTON_OPTIONS, EpistolaPreviewButtonComponent, injector);
+function registerEpistolaDocumentPreviewComponent(injector) {
+    if (customElements.get(EPISTOLA_DOCUMENT_PREVIEW_OPTIONS.selector)) {
+        return;
     }
+    // Register the base component (Angular element + Formio component class)
+    registerCustomFormioComponent(EPISTOLA_DOCUMENT_PREVIEW_OPTIONS, EpistolaDocumentPreviewComponent, injector);
+    // Get the Formio Components registry and the registered base class
+    const Formio = window.Formio;
+    if (!Formio?.Components)
+        return;
+    const BasePreviewComponent = Formio.Components.components[EPISTOLA_DOCUMENT_PREVIEW_OPTIONS.type];
+    if (!BasePreviewComponent)
+        return;
+    // Extend the base class to listen for form data changes and compute input overrides
+    class PreviewWithOverrides extends BasePreviewComponent {
+        _debounceTimer = null;
+        _changeListenerAttached = false;
+        attach(element) {
+            // Bidirectional sync between processLinkSelection object and separate properties.
+            // The editForm uses processLinkSelection (single field), while the component
+            // config and Angular inputs use processDefinitionKey + sourceActivityId.
+            if (this.component?.processLinkSelection) {
+                const sel = this.component.processLinkSelection;
+                this.component.processDefinitionKey = sel.processDefinitionKey || '';
+                this.component.sourceActivityId = sel.sourceActivityId || '';
+            }
+            else if (this.component?.processDefinitionKey && this.component?.sourceActivityId) {
+                this.component.processLinkSelection = {
+                    processDefinitionKey: this.component.processDefinitionKey,
+                    sourceActivityId: this.component.sourceActivityId,
+                };
+            }
+            const result = super.attach(element);
+            if (this._customAngularElement) {
+                this._customAngularElement['processDefinitionKey'] =
+                    this.component.processDefinitionKey || '';
+                this._customAngularElement['sourceActivityId'] = this.component.sourceActivityId || '';
+            }
+            // Listen to form changes and compute input overrides from the mapping
+            if (this.root && this.component?.overrideMapping && !this._changeListenerAttached) {
+                this._changeListenerAttached = true;
+                this.root.on('change', () => {
+                    this._computeAndSetOverrides();
+                });
+                // Compute initial value
+                this._computeAndSetOverrides();
+            }
+            return result;
+        }
+        _computeAndSetOverrides() {
+            if (this._debounceTimer) {
+                clearTimeout(this._debounceTimer);
+            }
+            this._debounceTimer = setTimeout(() => {
+                const mapping = this.component?.overrideMapping;
+                const formData = this.root?.data;
+                if (mapping && formData) {
+                    const overrides = computeInputOverrides(mapping, formData);
+                    if (Object.keys(overrides).length > 0) {
+                        this.setValue(overrides);
+                    }
+                }
+            }, 1500);
+        }
+    }
+    // Re-register with the extended class
+    Formio.Components.setComponent(EPISTOLA_DOCUMENT_PREVIEW_OPTIONS.type, PreviewWithOverrides);
 }
 
-const EPISTOLA_DOCUMENT_PREVIEW_OPTIONS = {
-    type: 'epistola-document-preview',
-    selector: 'epistola-document-preview-element',
-    title: 'Epistola Document Preview',
+const FORM_REF_PREFIX = 'form:';
+class EpistolaOverrideBuilderComponent {
+    cdr;
+    value;
+    valueChange = new EventEmitter();
+    disabled = false;
+    label = 'Input Overrides';
+    availableFields = [];
+    rows = [];
+    advancedMode = false;
+    jsonText = '';
+    jsonError = null;
+    initialized = false;
+    constructor(cdr) {
+        this.cdr = cdr;
+    }
+    ngOnChanges() {
+        if (!this.initialized && this.value) {
+            this.initialized = true;
+            this.rows = this.mappingToRows(this.value);
+            this.jsonText = JSON.stringify(this.value, null, 2);
+        }
+        this.cdr.markForCheck();
+    }
+    toggleMode() {
+        this.advancedMode = !this.advancedMode;
+        if (this.advancedMode) {
+            const mapping = this.rowsToMapping();
+            this.jsonText = Object.keys(mapping).length > 0 ? JSON.stringify(mapping, null, 2) : '';
+            this.jsonError = null;
+        }
+        else {
+            try {
+                const parsed = this.jsonText.trim() ? JSON.parse(this.jsonText) : {};
+                this.rows = this.mappingToRows(parsed);
+                this.jsonError = null;
+            }
+            catch {
+                // Keep current rows if JSON is invalid
+            }
+        }
+    }
+    addRow() {
+        this.rows.push({ scope: 'doc', inputPath: '', formFieldKey: '' });
+    }
+    removeRow(index) {
+        this.rows.splice(index, 1);
+        this.emitChange();
+    }
+    emitChange() {
+        const mapping = this.rowsToMapping();
+        this.value = Object.keys(mapping).length > 0 ? mapping : null;
+        this.valueChange.emit(this.value);
+    }
+    onJsonChange(text) {
+        this.jsonText = text;
+        if (!text.trim()) {
+            this.jsonError = null;
+            this.value = null;
+            this.valueChange.emit(null);
+            return;
+        }
+        try {
+            const parsed = JSON.parse(text);
+            this.jsonError = null;
+            this.value = parsed;
+            this.valueChange.emit(parsed);
+        }
+        catch (e) {
+            this.jsonError = 'Invalid JSON';
+        }
+    }
+    rowsToMapping() {
+        const mapping = {};
+        for (const row of this.rows) {
+            if (row.inputPath && row.formFieldKey) {
+                if (!mapping[row.scope]) {
+                    mapping[row.scope] = {};
+                }
+                mapping[row.scope][row.inputPath] = FORM_REF_PREFIX + row.formFieldKey;
+            }
+        }
+        return mapping;
+    }
+    mappingToRows(mapping) {
+        const rows = [];
+        for (const [scope, fields] of Object.entries(mapping)) {
+            if (scope === 'doc' || scope === 'pv') {
+                for (const [path, ref] of Object.entries(fields)) {
+                    const formFieldKey = String(ref).startsWith(FORM_REF_PREFIX)
+                        ? String(ref).substring(FORM_REF_PREFIX.length)
+                        : String(ref);
+                    rows.push({ scope, inputPath: path, formFieldKey });
+                }
+            }
+        }
+        return rows;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaOverrideBuilderComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: EpistolaOverrideBuilderComponent, isStandalone: true, selector: "epistola-override-builder-component", inputs: { value: "value", disabled: "disabled", label: "label", availableFields: "availableFields" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: `
+    <div class="override-builder">
+      <div class="builder-header">
+        <span class="builder-label">{{ label || 'Input Overrides' }}</span>
+        <button type="button" class="mode-toggle" (click)="toggleMode()">
+          {{ advancedMode ? 'Simple' : 'Advanced' }}
+        </button>
+      </div>
+
+      <!-- Simple mode: table -->
+      <div *ngIf="!advancedMode" class="builder-table">
+        <div *ngIf="rows.length > 0" class="table-header">
+          <span class="col-scope">Scope</span>
+          <span class="col-path">Input Path</span>
+          <span class="col-field">Form Field</span>
+          <span class="col-action"></span>
+        </div>
+        <div *ngFor="let row of rows; let i = index" class="table-row">
+          <select class="col-scope" [(ngModel)]="row.scope" (ngModelChange)="emitChange()">
+            <option value="doc">doc</option>
+            <option value="pv">pv</option>
+          </select>
+          <input
+            class="col-path"
+            type="text"
+            [(ngModel)]="row.inputPath"
+            (ngModelChange)="emitChange()"
+            placeholder="e.g. beslissing.tekst"
+          />
+          <!-- Dropdown when form fields are available, text input as fallback -->
+          <select
+            *ngIf="availableFields.length > 0"
+            class="col-field"
+            [(ngModel)]="row.formFieldKey"
+            (ngModelChange)="emitChange()"
+          >
+            <option value="">-- Select field --</option>
+            <option *ngFor="let field of availableFields" [value]="field.key">
+              {{ field.label }}
+            </option>
+          </select>
+          <input
+            *ngIf="availableFields.length === 0"
+            class="col-field"
+            type="text"
+            [(ngModel)]="row.formFieldKey"
+            (ngModelChange)="emitChange()"
+            placeholder="form field key"
+          />
+          <button type="button" class="col-action remove-btn" (click)="removeRow(i)">
+            <i class="mdi mdi-close"></i>
+          </button>
+        </div>
+        <button type="button" class="add-btn" (click)="addRow()">
+          <i class="mdi mdi-plus mr-1"></i> Add override
+        </button>
+      </div>
+
+      <!-- Advanced mode: JSON editor -->
+      <div *ngIf="advancedMode" class="builder-advanced">
+        <textarea
+          class="json-editor"
+          [ngModel]="jsonText"
+          (ngModelChange)="onJsonChange($event)"
+          placeholder='{ "pv": { "motivation": "form:pv:motivation" } }'
+          rows="6"
+        ></textarea>
+        <div *ngIf="jsonError" class="json-error">{{ jsonError }}</div>
+      </div>
+    </div>
+  `, isInline: true, styles: [".override-builder{border:1px solid #dee2e6;border-radius:4px;padding:.75rem;background:#f8f9fa}.builder-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.builder-label{font-weight:600;font-size:.85rem;color:#495057}.mode-toggle{background:none;border:1px solid #6c757d;border-radius:4px;color:#6c757d;padding:.15rem .5rem;font-size:.75rem;cursor:pointer}.mode-toggle:hover{background:#e9ecef}.table-header{display:flex;gap:.5rem;padding:.25rem 0;font-size:.75rem;color:#6c757d;font-weight:600}.table-row{display:flex;gap:.5rem;margin-bottom:.25rem;align-items:center}.col-scope{width:70px;flex-shrink:0}.col-path,.col-field{flex:1;min-width:0}.col-action{width:30px;flex-shrink:0}.table-row select,.table-row input{border:1px solid #ced4da;border-radius:4px;padding:.25rem .4rem;font-size:.8rem;background:#fff}.remove-btn{background:none;border:none;color:#dc3545;cursor:pointer;padding:.25rem;font-size:.9rem}.remove-btn:hover{color:#a71d2a}.add-btn{background:none;border:1px dashed #6c757d;border-radius:4px;color:#6c757d;padding:.25rem .75rem;font-size:.8rem;cursor:pointer;margin-top:.25rem;display:flex;align-items:center}.add-btn:hover{background:#e9ecef;border-color:#495057}.json-editor{width:100%;border:1px solid #ced4da;border-radius:4px;padding:.5rem;font-family:monospace;font-size:.8rem;resize:vertical;background:#fff}.json-error{color:#dc3545;font-size:.75rem;margin-top:.25rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaOverrideBuilderComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [CommonModule, FormsModule], selector: 'epistola-override-builder-component', changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="override-builder">
+      <div class="builder-header">
+        <span class="builder-label">{{ label || 'Input Overrides' }}</span>
+        <button type="button" class="mode-toggle" (click)="toggleMode()">
+          {{ advancedMode ? 'Simple' : 'Advanced' }}
+        </button>
+      </div>
+
+      <!-- Simple mode: table -->
+      <div *ngIf="!advancedMode" class="builder-table">
+        <div *ngIf="rows.length > 0" class="table-header">
+          <span class="col-scope">Scope</span>
+          <span class="col-path">Input Path</span>
+          <span class="col-field">Form Field</span>
+          <span class="col-action"></span>
+        </div>
+        <div *ngFor="let row of rows; let i = index" class="table-row">
+          <select class="col-scope" [(ngModel)]="row.scope" (ngModelChange)="emitChange()">
+            <option value="doc">doc</option>
+            <option value="pv">pv</option>
+          </select>
+          <input
+            class="col-path"
+            type="text"
+            [(ngModel)]="row.inputPath"
+            (ngModelChange)="emitChange()"
+            placeholder="e.g. beslissing.tekst"
+          />
+          <!-- Dropdown when form fields are available, text input as fallback -->
+          <select
+            *ngIf="availableFields.length > 0"
+            class="col-field"
+            [(ngModel)]="row.formFieldKey"
+            (ngModelChange)="emitChange()"
+          >
+            <option value="">-- Select field --</option>
+            <option *ngFor="let field of availableFields" [value]="field.key">
+              {{ field.label }}
+            </option>
+          </select>
+          <input
+            *ngIf="availableFields.length === 0"
+            class="col-field"
+            type="text"
+            [(ngModel)]="row.formFieldKey"
+            (ngModelChange)="emitChange()"
+            placeholder="form field key"
+          />
+          <button type="button" class="col-action remove-btn" (click)="removeRow(i)">
+            <i class="mdi mdi-close"></i>
+          </button>
+        </div>
+        <button type="button" class="add-btn" (click)="addRow()">
+          <i class="mdi mdi-plus mr-1"></i> Add override
+        </button>
+      </div>
+
+      <!-- Advanced mode: JSON editor -->
+      <div *ngIf="advancedMode" class="builder-advanced">
+        <textarea
+          class="json-editor"
+          [ngModel]="jsonText"
+          (ngModelChange)="onJsonChange($event)"
+          placeholder='{ "pv": { "motivation": "form:pv:motivation" } }'
+          rows="6"
+        ></textarea>
+        <div *ngIf="jsonError" class="json-error">{{ jsonError }}</div>
+      </div>
+    </div>
+  `, styles: [".override-builder{border:1px solid #dee2e6;border-radius:4px;padding:.75rem;background:#f8f9fa}.builder-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.builder-label{font-weight:600;font-size:.85rem;color:#495057}.mode-toggle{background:none;border:1px solid #6c757d;border-radius:4px;color:#6c757d;padding:.15rem .5rem;font-size:.75rem;cursor:pointer}.mode-toggle:hover{background:#e9ecef}.table-header{display:flex;gap:.5rem;padding:.25rem 0;font-size:.75rem;color:#6c757d;font-weight:600}.table-row{display:flex;gap:.5rem;margin-bottom:.25rem;align-items:center}.col-scope{width:70px;flex-shrink:0}.col-path,.col-field{flex:1;min-width:0}.col-action{width:30px;flex-shrink:0}.table-row select,.table-row input{border:1px solid #ced4da;border-radius:4px;padding:.25rem .4rem;font-size:.8rem;background:#fff}.remove-btn{background:none;border:none;color:#dc3545;cursor:pointer;padding:.25rem;font-size:.9rem}.remove-btn:hover{color:#a71d2a}.add-btn{background:none;border:1px dashed #6c757d;border-radius:4px;color:#6c757d;padding:.25rem .75rem;font-size:.8rem;cursor:pointer;margin-top:.25rem;display:flex;align-items:center}.add-btn:hover{background:#e9ecef;border-color:#495057}.json-editor{width:100%;border:1px solid #ced4da;border-radius:4px;padding:.5rem;font-family:monospace;font-size:.8rem;resize:vertical;background:#fff}.json-error{color:#dc3545;font-size:.75rem;margin-top:.25rem}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], disabled: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], availableFields: [{
+                type: Input
+            }] } });
+
+const EPISTOLA_OVERRIDE_BUILDER_OPTIONS = {
+    type: 'epistola-override-builder',
+    selector: 'epistola-override-builder-element',
+    title: 'Epistola Override Builder',
     group: 'basic',
-    icon: 'file-pdf-o',
+    icon: 'list',
+    emptyValue: null,
+    fieldOptions: ['label', 'availableFields'],
+};
+/**
+ * Recursively collect input field keys and labels from a Formio component tree.
+ * Skips epistola custom components (which are builder UI, not form fields).
+ */
+function collectFormFields(components) {
+    const fields = [];
+    for (const comp of components) {
+        if (comp.input && comp.key && comp.type !== 'button' && !comp.type?.startsWith('epistola-')) {
+            fields.push({ key: comp.key, label: comp.label || comp.key });
+        }
+        if (comp.components) {
+            fields.push(...collectFormFields(comp.components));
+        }
+        if (comp.columns) {
+            for (const col of comp.columns) {
+                if (col.components) {
+                    fields.push(...collectFormFields(col.components));
+                }
+            }
+        }
+    }
+    return fields;
+}
+function registerEpistolaOverrideBuilderComponent(injector) {
+    if (customElements.get(EPISTOLA_OVERRIDE_BUILDER_OPTIONS.selector)) {
+        return;
+    }
+    // Register the base component (Angular element + Formio component class)
+    registerCustomFormioComponent(EPISTOLA_OVERRIDE_BUILDER_OPTIONS, EpistolaOverrideBuilderComponent, injector);
+    // Get the Formio Components registry and the registered base class
+    const Formio = window.Formio;
+    if (!Formio?.Components)
+        return;
+    const BaseComponent = Formio.Components.components[EPISTOLA_OVERRIDE_BUILDER_OPTIONS.type];
+    if (!BaseComponent)
+        return;
+    // Extend the base class to pass available form fields to the Angular component
+    class OverrideBuilderWithFields extends BaseComponent {
+        attach(element) {
+            // Set form fields on the component BEFORE super.attach() reads fieldOptions
+            this.component.availableFields = this._extractFormFields();
+            return super.attach(element);
+        }
+        _extractFormFields() {
+            // The Formio builder passes the main form schema as options.editForm
+            // when opening the edit dialog (editFormOptions.editForm = this.form).
+            const components = this.options?.editForm?.components;
+            if (Array.isArray(components)) {
+                return collectFormFields(components);
+            }
+            return [];
+        }
+    }
+    // Re-register with the extended class
+    Formio.Components.setComponent(EPISTOLA_OVERRIDE_BUILDER_OPTIONS.type, OverrideBuilderWithFields);
+}
+
+class EpistolaProcessLinkSelectorComponent {
+    adminService;
+    cdr;
+    value;
+    valueChange = new EventEmitter();
+    disabled = false;
+    label = 'Process Link';
+    filteredEntries = [];
+    selectedKey = '';
+    loading = false;
+    error = null;
+    initialized = false;
+    loadSubscription;
+    constructor(adminService, cdr) {
+        this.adminService = adminService;
+        this.cdr = cdr;
+    }
+    ngOnChanges(changes) {
+        if (!this.initialized) {
+            this.initialized = true;
+            this.loadEntries();
+        }
+        // Restore selection whenever value changes (Formio may set it after init)
+        if (changes['value'] && this.value) {
+            this.selectedKey = `${this.value.processDefinitionKey}::${this.value.sourceActivityId}`;
+            this.cdr.markForCheck();
+        }
+    }
+    ngOnDestroy() {
+        this.loadSubscription?.unsubscribe();
+    }
+    onSelect(key) {
+        this.selectedKey = key;
+        if (!key) {
+            this.value = null;
+            this.valueChange.emit(null);
+            return;
+        }
+        const [processDefinitionKey, sourceActivityId] = key.split('::');
+        this.value = { processDefinitionKey, sourceActivityId };
+        this.valueChange.emit(this.value);
+    }
+    entryKey(entry) {
+        return `${entry.processDefinitionKey}::${entry.activityId}`;
+    }
+    loadEntries() {
+        this.loading = true;
+        this.cdr.markForCheck();
+        this.loadSubscription = this.adminService.getPluginUsage().subscribe({
+            next: (entries) => {
+                this.filteredEntries = entries.filter((e) => e.actionKey === 'generate-document');
+                this.loading = false;
+                // Restore selection from value
+                if (this.value) {
+                    this.selectedKey = `${this.value.processDefinitionKey}::${this.value.sourceActivityId}`;
+                }
+                this.cdr.markForCheck();
+            },
+            error: (err) => {
+                this.error = 'Failed to load process links';
+                this.loading = false;
+                this.cdr.markForCheck();
+            },
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaProcessLinkSelectorComponent, deps: [{ token: EpistolaAdminService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: EpistolaProcessLinkSelectorComponent, isStandalone: true, selector: "epistola-process-link-selector-component", inputs: { value: "value", disabled: "disabled", label: "label" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: `
+    <div class="process-link-selector">
+      <label class="selector-label">{{ label || 'Process Link' }}</label>
+      <select
+        class="selector-dropdown"
+        [ngModel]="selectedKey"
+        (ngModelChange)="onSelect($event)"
+        [disabled]="disabled || loading"
+      >
+        <option value="">{{ loading ? 'Loading...' : '-- Select a process link --' }}</option>
+        <option *ngFor="let entry of filteredEntries" [value]="entryKey(entry)">
+          {{ entry.processDefinitionName }} / {{ entry.activityName }} ({{ entry.activityId }})
+        </option>
+      </select>
+      <div *ngIf="error" class="selector-error">{{ error }}</div>
+    </div>
+  `, isInline: true, styles: [".process-link-selector{margin-bottom:.5rem}.selector-label{display:block;font-weight:600;font-size:.85rem;color:#495057;margin-bottom:.25rem}.selector-dropdown{width:100%;border:1px solid #ced4da;border-radius:4px;padding:.4rem .5rem;font-size:.85rem;background:#fff}.selector-error{color:#dc3545;font-size:.75rem;margin-top:.25rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaProcessLinkSelectorComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [CommonModule, FormsModule], selector: 'epistola-process-link-selector-component', changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="process-link-selector">
+      <label class="selector-label">{{ label || 'Process Link' }}</label>
+      <select
+        class="selector-dropdown"
+        [ngModel]="selectedKey"
+        (ngModelChange)="onSelect($event)"
+        [disabled]="disabled || loading"
+      >
+        <option value="">{{ loading ? 'Loading...' : '-- Select a process link --' }}</option>
+        <option *ngFor="let entry of filteredEntries" [value]="entryKey(entry)">
+          {{ entry.processDefinitionName }} / {{ entry.activityName }} ({{ entry.activityId }})
+        </option>
+      </select>
+      <div *ngIf="error" class="selector-error">{{ error }}</div>
+    </div>
+  `, styles: [".process-link-selector{margin-bottom:.5rem}.selector-label{display:block;font-weight:600;font-size:.85rem;color:#495057;margin-bottom:.25rem}.selector-dropdown{width:100%;border:1px solid #ced4da;border-radius:4px;padding:.4rem .5rem;font-size:.85rem;background:#fff}.selector-error{color:#dc3545;font-size:.75rem;margin-top:.25rem}\n"] }]
+        }], ctorParameters: () => [{ type: EpistolaAdminService }, { type: i0.ChangeDetectorRef }], propDecorators: { value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], disabled: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }] } });
+
+const EPISTOLA_PROCESS_LINK_SELECTOR_OPTIONS = {
+    type: 'epistola-process-link-selector',
+    selector: 'epistola-process-link-selector-element',
+    title: 'Epistola Process Link Selector',
+    group: 'basic',
+    icon: 'link',
     emptyValue: null,
     fieldOptions: ['label'],
 };
-function registerEpistolaDocumentPreviewComponent(injector) {
-    if (!customElements.get(EPISTOLA_DOCUMENT_PREVIEW_OPTIONS.selector)) {
-        registerCustomFormioComponent(EPISTOLA_DOCUMENT_PREVIEW_OPTIONS, EpistolaDocumentPreviewComponent, injector);
+function registerEpistolaProcessLinkSelectorComponent(injector) {
+    if (!customElements.get(EPISTOLA_PROCESS_LINK_SELECTOR_OPTIONS.selector)) {
+        registerCustomFormioComponent(EPISTOLA_PROCESS_LINK_SELECTOR_OPTIONS, EpistolaProcessLinkSelectorComponent, injector);
     }
 }
 
@@ -2949,14 +3977,22 @@ class EpistolaPluginModule {
             ngModule: EpistolaPluginModule,
             providers: [
                 EpistolaMenuService,
+                {
+                    provide: HTTP_INTERCEPTORS,
+                    useClass: EpistolaTaskContextInterceptor,
+                    multi: true,
+                },
                 {
                     provide: ENVIRONMENT_INITIALIZER,
                     multi: true,
                     useValue: () => {
+                        if (!isEpistolaEnabled())
+                            return;
                         const injector = inject(Injector);
-                        registerEpistolaDownloadComponent(injector);
+                        registerEpistolaDocumentComponent(injector);
                         registerEpistolaRetryFormComponent(injector);
-                        registerEpistolaPreviewButtonComponent(injector);
+                        registerEpistolaOverrideBuilderComponent(injector);
+                        registerEpistolaProcessLinkSelectorComponent(injector);
                         registerEpistolaDocumentPreviewComponent(injector);
                         // Eagerly create EpistolaMenuService to trigger menu registration
                         inject(EpistolaMenuService);
@@ -2977,17 +4013,15 @@ class EpistolaPluginModule {
             GenerateDocumentConfigurationComponent,
             CheckJobStatusConfigurationComponent,
             DownloadDocumentConfigurationComponent,
-            EpistolaDownloadComponent,
+            EpistolaDocumentComponent,
             EpistolaRetryFormComponent,
-            EpistolaPreviewButtonComponent,
             EpistolaDocumentPreviewComponent,
             EpistolaAdminPageComponent], exports: [EpistolaConfigurationComponent,
             GenerateDocumentConfigurationComponent,
             CheckJobStatusConfigurationComponent,
             DownloadDocumentConfigurationComponent,
-            EpistolaDownloadComponent,
+            EpistolaDocumentComponent,
             EpistolaRetryFormComponent,
-            EpistolaPreviewButtonComponent,
             EpistolaDocumentPreviewComponent,
             EpistolaAdminPageComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaPluginModule, providers: [EpistolaPluginService, EpistolaAdminService], imports: [CommonModule,
@@ -3001,9 +4035,8 @@ class EpistolaPluginModule {
             GenerateDocumentConfigurationComponent,
             CheckJobStatusConfigurationComponent,
             DownloadDocumentConfigurationComponent,
-            EpistolaDownloadComponent,
+            EpistolaDocumentComponent,
             EpistolaRetryFormComponent,
-            EpistolaPreviewButtonComponent,
             EpistolaDocumentPreviewComponent,
             EpistolaAdminPageComponent] });
 }
@@ -3022,9 +4055,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                         GenerateDocumentConfigurationComponent,
                         CheckJobStatusConfigurationComponent,
                         DownloadDocumentConfigurationComponent,
-                        EpistolaDownloadComponent,
+                        EpistolaDocumentComponent,
                         EpistolaRetryFormComponent,
-                        EpistolaPreviewButtonComponent,
                         EpistolaDocumentPreviewComponent,
                         EpistolaAdminPageComponent,
                     ],
@@ -3033,9 +4065,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                         GenerateDocumentConfigurationComponent,
                         CheckJobStatusConfigurationComponent,
                         DownloadDocumentConfigurationComponent,
-                        EpistolaDownloadComponent,
+                        EpistolaDocumentComponent,
                         EpistolaRetryFormComponent,
-                        EpistolaPreviewButtonComponent,
                         EpistolaDocumentPreviewComponent,
                         EpistolaAdminPageComponent,
                     ],
@@ -3043,22 +4074,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 }]
         }] });
 
-// Placeholder logo - a simple document icon in SVG format, base64 encoded
-// TODO: Replace with actual Epistola logo
-const EPISTOLA_PLUGIN_LOGO_BASE64 = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iIzMzNjZjYyI+PHBhdGggZD0iTTE0IDJINmMtMS4xIDAtMiAuOS0yIDJ2MTZjMCAxLjEuOSAyIDIgMmgxMmMxLjEgMCAyLS45IDItMlY4bC02LTZ6bTQgMThINlY0aDd2NWg1djExeiIvPjxwYXRoIGQ9Ik04IDEyaDh2Mkg4em0wIDRoOHYtMkg4em0wLThWNmg0djJ6Ii8+PC9zdmc+';
+const EPISTOLA_PLUGIN_LOGO_BASE64 = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjAgMTIwIiB3aWR0aD0iMTIwIiBoZWlnaHQ9IjEyMCI+CiAgPCEtLSBTdGFjayBiYXNlIC0tPgogIDxyZWN0IHg9IjM2IiB5PSIxNiIgd2lkdGg9IjU0IiBoZWlnaHQ9IjcwIiByeD0iMyIgZmlsbD0iI2U2YzJiMCIgc3Ryb2tlPSIjNGYyZjJiIiBzdHJva2Utd2lkdGg9IjIiIHRyYW5zZm9ybT0icm90YXRlKDUgNjMgNTEpIi8+CiAgPHJlY3QgeD0iMzIiIHk9IjIyIiB3aWR0aD0iNTQiIGhlaWdodD0iNzAiIHJ4PSIzIiBmaWxsPSIjZjBkOGM4IiBzdHJva2U9IiM0ZjJmMmIiIHN0cm9rZS13aWR0aD0iMiIvPgogIDxyZWN0IHg9IjI4IiB5PSIyOCIgd2lkdGg9IjU0IiBoZWlnaHQ9IjcwIiByeD0iMyIgZmlsbD0iI2Y1ZWJlMyIgc3Ryb2tlPSIjNGYyZjJiIiBzdHJva2Utd2lkdGg9IjIuNSIvPgogIDxsaW5lIHgxPSIzOCIgeTE9IjQ0IiB4Mj0iNzIiIHkyPSI0NCIgc3Ryb2tlPSIjYzRhODgyIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgogIDxsaW5lIHgxPSIzOCIgeTE9IjU0IiB4Mj0iNzIiIHkyPSI1NCIgc3Ryb2tlPSIjYzRhODgyIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgogIDxsaW5lIHgxPSIzOCIgeTE9IjY0IiB4Mj0iNTgiIHkyPSI2NCIgc3Ryb2tlPSIjYzRhODgyIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgogIDwhLS0gV2F4IHNlYWwgd2l0aCBjaGVja21hcmsgLS0+CiAgPGNpcmNsZSBjeD0iNTUiIGN5PSI4NCIgcj0iMTUiIGZpbGw9IiNiODVjM2MiIHN0cm9rZT0iIzRmMmYyYiIgc3Ryb2tlLXdpZHRoPSIyIi8+CiAgPGNpcmNsZSBjeD0iNTUiIGN5PSI4NCIgcj0iMTAuNSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZDQ4MzZhIiBzdHJva2Utd2lkdGg9IjEiLz4KICA8cG9seWxpbmUgcG9pbnRzPSI0OSw4NCA1Myw4OSA2Miw3OCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNGYyZjJiIiBzdHJva2Utd2lkdGg9IjIuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=';
 
+const EPISTOLA_PLUGIN_ID = 'epistola';
+const DISABLED_EPISTOLA_PLUGIN_ID = '__epistola_disabled__';
 const epistolaPluginSpecification = {
-    // Must match backend @Plugin(key = "epistola")
-    pluginId: 'epistola',
+    get pluginId() {
+        return isEpistolaEnabled() ? EPISTOLA_PLUGIN_ID : DISABLED_EPISTOLA_PLUGIN_ID;
+    },
     // Component for plugin-level configuration (tenantId)
     pluginConfigurationComponent: EpistolaConfigurationComponent,
     // Plugin logo
     pluginLogoBase64: EPISTOLA_PLUGIN_LOGO_BASE64,
     // Map action keys to their configuration components
     functionConfigurationComponents: {
-        'generate-document': GenerateDocumentConfigurationComponent,
-        'check-job-status': CheckJobStatusConfigurationComponent,
-        'download-document': DownloadDocumentConfigurationComponent,
+        'epistola-generate-document': GenerateDocumentConfigurationComponent,
+        'epistola-check-job-status': CheckJobStatusConfigurationComponent,
+        'epistola-download-document': DownloadDocumentConfigurationComponent,
     },
     // Translations
     pluginTranslations: {
@@ -3076,7 +4108,7 @@ const epistolaPluginSpecification = {
             defaultEnvironmentIdTooltip: 'De standaard omgeving voor documentgeneratie (3-30 tekens, alleen kleine letters, cijfers en koppeltekens, bijv. "productie")',
             templateSyncEnabled: 'Template synchronisatie',
             templateSyncEnabledTooltip: 'Synchroniseer template definities automatisch van het classpath naar Epistola bij het opstarten',
-            'generate-document': 'Genereer Document',
+            'epistola-generate-document': 'Genereer Document',
             catalogId: 'Catalogus',
             catalogIdTooltip: 'Selecteer de catalogus waaruit een template gekozen wordt',
             templateId: 'Template',
@@ -3139,6 +4171,7 @@ const epistolaPluginSpecification = {
             requiredFieldsMissing: 'Niet alle verplichte velden zijn gekoppeld',
             requiredFieldsComplete: 'Alle verplichte velden zijn gekoppeld',
             validationSummary: 'verplichte velden gekoppeld',
+            jsonataValidationErrorsHeading: 'Ongeldige JSONata-expressies:',
             fieldRequired: 'Verplicht',
             fieldOptional: 'Optioneel',
             mapCollectionTo: 'Koppel collectie aan',
@@ -3152,7 +4185,7 @@ const epistolaPluginSpecification = {
             sourceFieldPlaceholder: 'Bronveldnaam',
             noTemplateFields: 'Geen template velden beschikbaar',
             // Check job status action
-            'check-job-status': 'Controleer Taakstatus',
+            'epistola-check-job-status': 'Controleer Taakstatus',
             requestIdVariable: 'Request ID Variabele',
             requestIdVariableTooltip: 'Naam van de procesvariabele met het Epistola request ID',
             statusVariable: 'Status Variabele',
@@ -3162,7 +4195,9 @@ const epistolaPluginSpecification = {
             errorMessageVariable: 'Foutmelding Variabele',
             errorMessageVariableTooltip: 'Naam van de procesvariabele waarin de foutmelding wordt opgeslagen (bij fout)',
             // Download document action
-            'download-document': 'Download Document',
+            'epistola-download-document': 'Download Document',
+            documentVariable: 'Document Variabele',
+            documentVariableTooltip: 'Naam van de procesvariabele met het Epistola resultaat. Mag een String document ID zijn (legacy) of een rich-result object met een documentId-veld; de actie haalt het document ID eruit.',
             contentVariable: 'Inhoud Variabele',
             contentVariableTooltip: 'Naam van de procesvariabele waarin de documentinhoud (Base64) wordt opgeslagen',
             // Admin page
@@ -3189,6 +4224,16 @@ const epistolaPluginSpecification = {
             epistolaAdminNoPendingJobs: 'Geen wachtende taken voor deze verbinding.',
             epistolaAdminConfiguration: 'Configuratie',
             epistolaAdminRequestId: 'Request ID',
+            epistolaAdminReconcile: 'Hersynchroniseer',
+            epistolaAdminReconciling: 'Bezig...',
+            epistolaAdminReconcileTooltip: 'Vraag de huidige status op bij Epistola en hervat het wachtende proces als het klaar is.',
+            epistolaAdminConfigurations: 'Configuraties',
+            epistolaAdminValidations: 'BPMN-validatie',
+            epistolaAdminNoValidations: 'Geen race-onveilige procesdefinities gevonden. Alles ziet er goed uit.',
+            epistolaAdminValidationWarningTitle: 'BPMN configuratie waarschuwing',
+            epistolaAdminValidationWarningBody: 'In deze procesdefinities is de grens tussen de generate-document service task en de EpistolaDocumentGenerated catch event niet synchroon. Resultaten kunnen verloren gaan; gebruik in dat geval de Hersynchroniseer-knop in de Wachtende taken-tab.',
+            epistolaAdminValidationCode: 'Code',
+            epistolaAdminValidationMessage: 'Bericht',
         },
         en: {
             title: 'Epistola Document Suite',
@@ -3204,7 +4249,7 @@ const epistolaPluginSpecification = {
             defaultEnvironmentIdTooltip: 'The default environment for document generation (3-30 chars, lowercase letters, digits and hyphens only, e.g. "production")',
             templateSyncEnabled: 'Template sync',
             templateSyncEnabledTooltip: 'Automatically synchronize template definitions from classpath to Epistola on startup',
-            'generate-document': 'Generate Document',
+            'epistola-generate-document': 'Generate Document',
             catalogId: 'Catalog',
             catalogIdTooltip: 'Select the catalog to choose a template from',
             templateId: 'Template',
@@ -3267,6 +4312,7 @@ const epistolaPluginSpecification = {
             requiredFieldsMissing: 'Not all required fields are mapped',
             requiredFieldsComplete: 'All required fields are mapped',
             validationSummary: 'required fields mapped',
+            jsonataValidationErrorsHeading: 'Invalid JSONata expressions:',
             fieldRequired: 'Required',
             fieldOptional: 'Optional',
             mapCollectionTo: 'Map collection to',
@@ -3280,7 +4326,7 @@ const epistolaPluginSpecification = {
             sourceFieldPlaceholder: 'Source field name',
             noTemplateFields: 'No template fields available',
             // Check job status action
-            'check-job-status': 'Check Job Status',
+            'epistola-check-job-status': 'Check Job Status',
             requestIdVariable: 'Request ID Variable',
             requestIdVariableTooltip: 'Name of the process variable containing the Epistola request ID',
             statusVariable: 'Status Variable',
@@ -3290,7 +4336,9 @@ const epistolaPluginSpecification = {
             errorMessageVariable: 'Error Message Variable',
             errorMessageVariableTooltip: 'Name of the process variable to store the error message in (when failed)',
             // Download document action
-            'download-document': 'Download Document',
+            'epistola-download-document': 'Download Document',
+            documentVariable: 'Document Variable',
+            documentVariableTooltip: 'Name of the process variable holding the Epistola result. May be a String document id (legacy) or a rich result object with a `documentId` key — the action extracts the document id from it.',
             contentVariable: 'Content Variable',
             contentVariableTooltip: 'Name of the process variable to store the document content (Base64) in',
             // Admin page
@@ -3317,6 +4365,16 @@ const epistolaPluginSpecification = {
             epistolaAdminNoPendingJobs: 'No pending jobs for this connection.',
             epistolaAdminConfiguration: 'Configuration',
             epistolaAdminRequestId: 'Request ID',
+            epistolaAdminReconcile: 'Reconcile',
+            epistolaAdminReconciling: 'Reconciling...',
+            epistolaAdminReconcileTooltip: "Ask Epistola for this job's current status and resume the waiting process if it has finished.",
+            epistolaAdminConfigurations: 'Configurations',
+            epistolaAdminValidations: 'BPMN validation',
+            epistolaAdminNoValidations: 'No race-unsafe process definitions detected. Everything looks good.',
+            epistolaAdminValidationWarningTitle: 'BPMN configuration warning',
+            epistolaAdminValidationWarningBody: 'These process definitions have a non-synchronous boundary between the generate-document service task and the EpistolaDocumentGenerated catch event. Results can be missed; use the Reconcile button on the Pending Jobs tab to recover.',
+            epistolaAdminValidationCode: 'Code',
+            epistolaAdminValidationMessage: 'Message',
         },
     },
 };
@@ -3329,5 +4387,5 @@ const epistolaPluginSpecification = {
  * Generated bundle index. Do not edit.
  */
 
-export { CheckJobStatusConfigurationComponent, DownloadDocumentConfigurationComponent, EPISTOLA_DOCUMENT_PREVIEW_OPTIONS, EPISTOLA_DOWNLOAD_OPTIONS, EPISTOLA_PREVIEW_BUTTON_OPTIONS, EPISTOLA_RETRY_FORM_OPTIONS, EpistolaAdminPageComponent, EpistolaAdminRoutingModule, EpistolaAdminService, EpistolaConfigurationComponent, EpistolaDocumentPreviewComponent, EpistolaDownloadComponent, EpistolaMenuService, EpistolaPluginModule, EpistolaPluginService, EpistolaPreviewButtonComponent, EpistolaRetryFormComponent, GenerateDocumentConfigurationComponent, JsonataEditorComponent, MappingBuilderComponent, epistolaPluginSpecification, errorResource, initialResource, loadingResource, registerEpistolaDocumentPreviewComponent, registerEpistolaDownloadComponent, registerEpistolaPreviewButtonComponent, registerEpistolaRetryFormComponent, successResource };
+export { CheckJobStatusConfigurationComponent, DownloadDocumentConfigurationComponent, EPISTOLA_DOCUMENT_OPTIONS, EPISTOLA_DOCUMENT_PREVIEW_OPTIONS, EPISTOLA_OVERRIDE_BUILDER_OPTIONS, EPISTOLA_PROCESS_LINK_SELECTOR_OPTIONS, EPISTOLA_RETRY_FORM_OPTIONS, EpistolaAdminPageComponent, EpistolaAdminRoutingModule, EpistolaAdminService, EpistolaConfigurationComponent, EpistolaDocumentComponent, EpistolaDocumentPreviewComponent, EpistolaMenuService, EpistolaOverrideBuilderComponent, EpistolaPluginModule, EpistolaPluginService, EpistolaProcessLinkSelectorComponent, EpistolaRetryFormComponent, EpistolaTaskContextInterceptor, EpistolaTaskContextService, GenerateDocumentConfigurationComponent, JsonataEditorComponent, MappingBuilderComponent, epistolaPluginSpecification, errorResource, initialResource, isEpistolaEnabled, loadingResource, registerEpistolaDocumentComponent, registerEpistolaDocumentPreviewComponent, registerEpistolaOverrideBuilderComponent, registerEpistolaProcessLinkSelectorComponent, registerEpistolaRetryFormComponent, successResource };
 //# sourceMappingURL=epistola.app-valtimo-plugin.mjs.map