@epistola.app/valtimo-plugin 0.6.0 → 0.7.0

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

@@ -1,5 +1,5 @@
 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 * as i2 from '@valtimo/shared';
@@ -12,15 +12,15 @@ 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 i2$3 from '@valtimo/process-link';
 import * as i7 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 i4 from '@angular/platform-browser';
+import * as i2$4 from '@angular/router';
+import { RouterModule, Router } from '@angular/router';
 import * as i5 from 'carbon-components-angular/tabs';
 import { TabsModule } from 'carbon-components-angular/tabs';
 import * as i6 from 'carbon-components-angular/tag';
@@ -237,6 +237,13 @@ class EpistolaPluginService {
     getExpressionFunctions() {
         return this.http.get(`${this.apiEndpoint}/expression-functions`);
     }
+    /**
+     * 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);
+    }
     /**
      * Discover all previewable document sources for a given Valtimo document.
      */
@@ -796,7 +803,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 +1386,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 +1457,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 +1541,10 @@ class GenerateDocumentConfigurationComponent {
     selectedTemplateId$ = new BehaviorSubject('');
     selectedVariantId$ = new BehaviorSubject('');
     variantSelectionMode = 'explicit';
+    variantIdExpressionMode = false;
+    variantIdExpression = '';
+    filenameExpressionMode = false;
+    filenameExpression = '';
     variantAttributeEntries = [];
     availableAttributeKeys = [];
     caseDefinitionKey = null;
@@ -1488,6 +1553,7 @@ class GenerateDocumentConfigurationComponent {
     variableSuggestions = null;
     requiredFieldsStatus = { mapped: 0, total: 0 };
     prefillDataMapping = {};
+    validationErrors$ = new BehaviorSubject([]);
     destroy$ = new Subject();
     saveSubscription;
     formValue$ = new BehaviorSubject(null);
@@ -1567,6 +1633,12 @@ class GenerateDocumentConfigurationComponent {
     onAttributeEntryChange() {
         this.revalidate();
     }
+    onVariantIdExpressionChange() {
+        this.revalidate();
+    }
+    onFilenameExpressionChange() {
+        this.revalidate();
+    }
     onKeySelected(entry, value) {
         if (value === '__custom__') {
             entry._customKey = true;
@@ -1717,6 +1789,7 @@ class GenerateDocumentConfigurationComponent {
                         key: e.key,
                         value: e.value,
                         required: e.required !== false,
+                        _expressionMode: isExpression(e.value),
                     }));
                 }
                 else {
@@ -1725,7 +1798,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 +1880,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 +1954,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
@@ -2212,7 +2337,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: i1.HttpClient }, { token: i4.DomSanitizer }, { token: i2.ConfigService }], 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>
@@ -2294,7 +2419,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: i1.HttpClient }, { type: i4.DomSanitizer }, { type: i2.ConfigService }], propDecorators: { value: [{
                 type: Input
             }], valueChange: [{
                 type: Output
@@ -2371,7 +2496,7 @@ class EpistolaPreviewButtonComponent {
             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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaPreviewButtonComponent, deps: [{ token: i1.HttpClient }, { token: i4.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"
@@ -2443,7 +2568,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
       </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: [{
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: i4.DomSanitizer }, { type: i2.ConfigService }], propDecorators: { value: [{
                 type: Input
             }], valueChange: [{
                 type: Output
@@ -2464,17 +2589,25 @@ class EpistolaDocumentPreviewComponent {
     valueChange = new EventEmitter();
     disabled = false;
     label = 'Document Preview';
+    processDefinitionKey;
+    sourceActivityId;
+    overrideMapping;
     sources = [];
     selectedIndex = 0;
     discovering = false;
     loading = false;
     error = null;
     previewUrl = null;
+    designMode = false;
     initialized = false;
     currentBlobUrl = null;
     discoverSubscription;
     previewSubscription;
     apiEndpoint;
+    /** Whether the component is in configured mode (explicit process link) vs auto-discover mode */
+    get configuredMode() {
+        return !!this.sourceActivityId;
+    }
     constructor(epistolaPluginService, http, sanitizer, configService, formIoStateService, cdr) {
         this.epistolaPluginService = epistolaPluginService;
         this.http = http;
@@ -2484,10 +2617,36 @@ class EpistolaDocumentPreviewComponent {
         this.cdr = cdr;
         this.apiEndpoint = `${this.configService.config.valtimoApi.endpointUri}v1/plugin/epistola`;
     }
+    get overrideMappingScopes() {
+        return this.overrideMapping ? Object.keys(this.overrideMapping) : [];
+    }
+    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.configuredMode) {
+                this.loadConfiguredPreview();
+            }
+            else {
+                this.discoverSources();
+            }
+            return;
+        }
+        // In configured mode, react to value changes (input overrides from Formio wrapper)
+        if (this.configuredMode && changes['value']) {
+            this.loadConfiguredPreview();
         }
     }
     ngOnDestroy() {
@@ -2497,11 +2656,51 @@ class EpistolaDocumentPreviewComponent {
     }
     onSourceChange(event) {
         this.selectedIndex = +event.target.value;
-        this.loadPreview();
+        this.loadDiscoveredPreview();
     }
     refresh() {
-        this.loadPreview();
+        if (this.configuredMode) {
+            this.loadConfiguredPreview();
+        }
+        else {
+            this.loadDiscoveredPreview();
+        }
     }
+    /**
+     * Configured mode: preview using the explicitly configured process link + input overrides.
+     */
+    loadConfiguredPreview() {
+        const documentId = this.formIoStateService.documentId;
+        if (!documentId) {
+            this.error = 'Could not determine document ID from context.';
+            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`, {
+            documentId,
+            processDefinitionKey: this.processDefinitionKey || null,
+            processInstanceId: this.formIoStateService.processInstanceId || null,
+            sourceActivityId: this.sourceActivityId,
+            inputOverrides: this.value || null,
+            overrides: null,
+        }, {
+            responseType: 'blob',
+            headers: new HttpHeaders().set('X-Skip-Interceptor', '422'),
+        })
+            .subscribe({
+            next: (blob) => this.handlePreviewSuccess(blob),
+            error: (err) => this.handlePreviewError(err),
+        });
+    }
+    /**
+     * Auto-discover mode: discover sources from running process instances.
+     */
     discoverSources() {
         const documentId = this.formIoStateService.documentId;
         if (!documentId) {
@@ -2519,7 +2718,7 @@ class EpistolaDocumentPreviewComponent {
                 this.cdr.markForCheck();
                 if (sources.length > 0) {
                     this.selectedIndex = 0;
-                    this.loadPreview();
+                    this.loadDiscoveredPreview();
                 }
             },
             error: (err) => {
@@ -2529,7 +2728,10 @@ class EpistolaDocumentPreviewComponent {
             },
         });
     }
-    loadPreview() {
+    /**
+     * Auto-discover mode: load preview for the selected discovered source.
+     */
+    loadDiscoveredPreview() {
         const source = this.sources[this.selectedIndex];
         if (!source)
             return;
@@ -2552,35 +2754,37 @@ class EpistolaDocumentPreviewComponent {
             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,14 +2793,44 @@ 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: i1.HttpClient }, { token: i4.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", 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"
+            *ngIf="!sourceActivityId && sources.length > 1"
             class="preview-select"
             [value]="selectedIndex"
             (change)="onSourceChange($event)"
@@ -2632,24 +2866,61 @@ class EpistolaDocumentPreviewComponent {
           PDF preview is not supported in this browser.
         </object>
         <div
-          *ngIf="!previewUrl && !loading && !discovering && !error && sources.length === 0"
+          *ngIf="
+            !previewUrl &&
+            !loading &&
+            !discovering &&
+            !error &&
+            !sourceActivityId &&
+            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"
+            *ngIf="!sourceActivityId && sources.length > 1"
             class="preview-select"
             [value]="selectedIndex"
             (change)="onSourceChange($event)"
@@ -2685,15 +2956,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
           PDF preview is not supported in this browser.
         </object>
         <div
-          *ngIf="!previewUrl && !loading && !discovering && !error && sources.length === 0"
+          *ngIf="
+            !previewUrl &&
+            !loading &&
+            !discovering &&
+            !error &&
+            !sourceActivityId &&
+            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: i1.HttpClient }, { type: i4.DomSanitizer }, { type: i2.ConfigService }, { type: i3.FormIoStateService }, { type: i0.ChangeDetectorRef }], propDecorators: { value: [{
                 type: Input
             }], valueChange: [{
                 type: Output
@@ -2701,6 +2979,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 {
@@ -2854,25 +3138,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$4.ActivatedRoute }, { token: i2$4.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$4.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"] }] });
 }
 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 }] });
+        }], ctorParameters: () => [{ type: EpistolaAdminService }, { type: i2$4.ActivatedRoute }, { type: i2$4.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$4.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: [{
@@ -2935,11 +3254,541 @@ const EPISTOLA_DOCUMENT_PREVIEW_OPTIONS = {
     group: 'basic',
     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 registerEpistolaDocumentPreviewComponent(injector) {
-    if (!customElements.get(EPISTOLA_DOCUMENT_PREVIEW_OPTIONS.selector)) {
-        registerCustomFormioComponent(EPISTOLA_DOCUMENT_PREVIEW_OPTIONS, EpistolaDocumentPreviewComponent, 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 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: '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 registerEpistolaProcessLinkSelectorComponent(injector) {
+    if (!customElements.get(EPISTOLA_PROCESS_LINK_SELECTOR_OPTIONS.selector)) {
+        registerCustomFormioComponent(EPISTOLA_PROCESS_LINK_SELECTOR_OPTIONS, EpistolaProcessLinkSelectorComponent, injector);
     }
 }
 
@@ -2953,10 +3802,14 @@ class EpistolaPluginModule {
                     provide: ENVIRONMENT_INITIALIZER,
                     multi: true,
                     useValue: () => {
+                        if (!isEpistolaEnabled())
+                            return;
                         const injector = inject(Injector);
                         registerEpistolaDownloadComponent(injector);
                         registerEpistolaRetryFormComponent(injector);
                         registerEpistolaPreviewButtonComponent(injector);
+                        registerEpistolaOverrideBuilderComponent(injector);
+                        registerEpistolaProcessLinkSelectorComponent(injector);
                         registerEpistolaDocumentPreviewComponent(injector);
                         // Eagerly create EpistolaMenuService to trigger menu registration
                         inject(EpistolaMenuService);
@@ -3043,13 +3896,14 @@ 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
@@ -3139,6 +3993,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',
@@ -3267,6 +4122,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',
@@ -3329,5 +4185,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_PREVIEW_OPTIONS, EPISTOLA_DOWNLOAD_OPTIONS, EPISTOLA_OVERRIDE_BUILDER_OPTIONS, EPISTOLA_PREVIEW_BUTTON_OPTIONS, EPISTOLA_PROCESS_LINK_SELECTOR_OPTIONS, EPISTOLA_RETRY_FORM_OPTIONS, EpistolaAdminPageComponent, EpistolaAdminRoutingModule, EpistolaAdminService, EpistolaConfigurationComponent, EpistolaDocumentPreviewComponent, EpistolaDownloadComponent, EpistolaMenuService, EpistolaOverrideBuilderComponent, EpistolaPluginModule, EpistolaPluginService, EpistolaPreviewButtonComponent, EpistolaProcessLinkSelectorComponent, EpistolaRetryFormComponent, GenerateDocumentConfigurationComponent, JsonataEditorComponent, MappingBuilderComponent, epistolaPluginSpecification, errorResource, initialResource, isEpistolaEnabled, loadingResource, registerEpistolaDocumentPreviewComponent, registerEpistolaDownloadComponent, registerEpistolaOverrideBuilderComponent, registerEpistolaPreviewButtonComponent, registerEpistolaProcessLinkSelectorComponent, registerEpistolaRetryFormComponent, successResource };
 //# sourceMappingURL=epistola.app-valtimo-plugin.mjs.map