@epistola.app/valtimo-plugin 0.2.3 → 0.3.1

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

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, Output, Input, Component, NgModule } from '@angular/core';
+import { Injectable, EventEmitter, Output, Input, Component, ChangeDetectionStrategy, NgModule } from '@angular/core';
 import * as i1 from '@angular/common/http';
-import { HttpClientModule } from '@angular/common/http';
+import { HttpHeaders, HttpClientModule } from '@angular/common/http';
 import * as i2 from '@valtimo/shared';
 import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
@@ -10,10 +10,13 @@ import { PluginTranslatePipeModule } from '@valtimo/plugin';
 import * as i3 from '@valtimo/components';
 import { FormModule, InputModule, ValuePathSelectorPrefix, ValuePathSelectorComponent, SelectModule, registerCustomFormioComponent } from '@valtimo/components';
 import { BehaviorSubject, combineLatest, take, Subject, merge, of } from 'rxjs';
-import { startWith, delay, takeUntil, filter, map, catchError, take as take$1 } from 'rxjs/operators';
+import { startWith, delay, takeUntil, filter, map, catchError, take as take$1, debounceTime } from 'rxjs/operators';
 import * as i4 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i2$2 from '@valtimo/process-link';
+import * as i7 from '@formio/angular';
+import { FormioModule } from '@formio/angular';
+import * as i4$1 from '@angular/platform-browser';
 
 /**
  * Service for interacting with Epistola plugin API endpoints.
@@ -65,10 +68,42 @@ class EpistolaPluginService {
     validateMapping(pluginConfigurationId, templateId, dataMapping) {
         return this.http.post(`${this.apiEndpoint}/configurations/${pluginConfigurationId}/templates/${templateId}/validate-mapping`, { dataMapping });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EpistolaPluginService, deps: [{ token: i1.HttpClient }, { token: i2.ConfigService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EpistolaPluginService });
+    /**
+     * Get a dynamically generated Formio form for retrying a failed document generation.
+     */
+    getRetryForm(processInstanceId, documentId, sourceActivityId) {
+        const params = { processInstanceId };
+        if (documentId) {
+            params['documentId'] = documentId;
+        }
+        if (sourceActivityId) {
+            params['sourceActivityId'] = sourceActivityId;
+        }
+        return this.http.get(`${this.apiEndpoint}/retry-form`, { params });
+    }
+    /**
+     * Discover all previewable document sources for a given Valtimo document.
+     */
+    getPreviewSources(documentId) {
+        return this.http.get(`${this.apiEndpoint}/preview-sources`, { params: { documentId } });
+    }
+    /**
+     * Preview a document by dry-running the generate-document process link.
+     * Returns the resolved data as a mock preview (Phase 1).
+     */
+    previewDocument(documentId, processDefinitionKey, sourceActivityId, processInstanceId, overrides) {
+        return this.http.post(`${this.apiEndpoint}/preview`, {
+            documentId,
+            processDefinitionKey,
+            sourceActivityId,
+            processInstanceId: processInstanceId || null,
+            overrides: overrides || null
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaPluginService, deps: [{ token: i1.HttpClient }, { token: i2.ConfigService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaPluginService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EpistolaPluginService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaPluginService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i1.HttpClient }, { type: i2.ConfigService }] });
 
@@ -132,10 +167,10 @@ class EpistolaConfigurationComponent {
             });
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EpistolaConfigurationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: EpistolaConfigurationComponent, isStandalone: true, selector: "epistola-configuration", inputs: { save$: "save$", disabled$: "disabled$", pluginId: "pluginId", prefillConfiguration$: "prefillConfiguration$" }, outputs: { valid: "valid", configuration: "configuration" }, ngImport: i0, template: "<v-form\n    (valueChange)=\"formValueChange($event)\"\n    *ngIf=\"{\n      disabled: safeDisabled$ | async,\n      prefill: prefillConfiguration$ ? (prefillConfiguration$ | async) : null\n    } as obs\"\n>\n  <v-input\n    name=\"configurationTitle\"\n    [title]=\"'configurationTitle' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.configurationTitle\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"baseUrl\"\n    [title]=\"'baseUrl' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'baseUrlTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.baseUrl\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"apiKey\"\n    [title]=\"'apiKey' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'apiKeyTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.apiKey\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n    type=\"password\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"tenantId\"\n    [title]=\"'tenantId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'tenantIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.tenantId\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"defaultEnvironmentId\"\n    [title]=\"'defaultEnvironmentId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'defaultEnvironmentIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.defaultEnvironmentId\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"false\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"templateSyncEnabled\"\n    type=\"checkbox\"\n    [title]=\"'templateSyncEnabled' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'templateSyncEnabledTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.templateSyncEnabled ? 'true' : ''\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"false\"\n  >\n  </v-input>\n</v-form>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: PluginTranslatePipeModule }, { kind: "pipe", type: i2$1.PluginTranslatePipe, name: "pluginTranslate" }, { kind: "ngmodule", type: FormModule }, { kind: "component", type: i3.FormComponent, selector: "v-form", inputs: ["className"], outputs: ["valueChange"] }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i3.InputComponent, selector: "v-input", inputs: ["name", "type", "title", "titleTranslationKey", "defaultValue", "widthPx", "fullWidth", "margin", "smallMargin", "disabled", "step", "min", "maxLength", "tooltip", "required", "hideNumberSpinBox", "smallLabel", "rows", "clear$", "carbonTheme", "placeholder", "dataTestId", "trim", "presetsTitle", "presetOptions"], outputs: ["valueChange"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaConfigurationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: EpistolaConfigurationComponent, isStandalone: true, selector: "epistola-configuration", inputs: { save$: "save$", disabled$: "disabled$", pluginId: "pluginId", prefillConfiguration$: "prefillConfiguration$" }, outputs: { valid: "valid", configuration: "configuration" }, ngImport: i0, template: "<v-form\n    (valueChange)=\"formValueChange($event)\"\n    *ngIf=\"{\n      disabled: safeDisabled$ | async,\n      prefill: prefillConfiguration$ ? (prefillConfiguration$ | async) : null\n    } as obs\"\n>\n  <v-input\n    name=\"configurationTitle\"\n    [title]=\"'configurationTitle' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.configurationTitle\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"baseUrl\"\n    [title]=\"'baseUrl' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'baseUrlTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.baseUrl\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"apiKey\"\n    [title]=\"'apiKey' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'apiKeyTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.apiKey\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n    type=\"password\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"tenantId\"\n    [title]=\"'tenantId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'tenantIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.tenantId\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"defaultEnvironmentId\"\n    [title]=\"'defaultEnvironmentId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'defaultEnvironmentIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.defaultEnvironmentId\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"false\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"templateSyncEnabled\"\n    type=\"checkbox\"\n    [title]=\"'templateSyncEnabled' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'templateSyncEnabledTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.templateSyncEnabled ? 'true' : ''\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"false\"\n  >\n  </v-input>\n</v-form>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: PluginTranslatePipeModule }, { kind: "pipe", type: i2$1.PluginTranslatePipe, name: "pluginTranslate" }, { kind: "ngmodule", type: FormModule }, { kind: "component", type: i3.FormComponent, selector: "v-form", inputs: ["className"], outputs: ["valueChange"] }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i3.InputComponent, selector: "v-input", inputs: ["name", "type", "title", "titleTranslationKey", "defaultValue", "widthPx", "fullWidth", "margin", "smallMargin", "disabled", "step", "min", "maxLength", "tooltip", "required", "hideNumberSpinBox", "smallLabel", "rows", "clear$", "carbonTheme", "placeholder", "dataTestId", "trim", "presetsTitle", "presetOptions"], outputs: ["valueChange"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EpistolaConfigurationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaConfigurationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'epistola-configuration', standalone: true, imports: [CommonModule, PluginTranslatePipeModule, FormModule, InputModule], template: "<v-form\n    (valueChange)=\"formValueChange($event)\"\n    *ngIf=\"{\n      disabled: safeDisabled$ | async,\n      prefill: prefillConfiguration$ ? (prefillConfiguration$ | async) : null\n    } as obs\"\n>\n  <v-input\n    name=\"configurationTitle\"\n    [title]=\"'configurationTitle' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.configurationTitle\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"baseUrl\"\n    [title]=\"'baseUrl' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'baseUrlTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.baseUrl\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"apiKey\"\n    [title]=\"'apiKey' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'apiKeyTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.apiKey\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n    type=\"password\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"tenantId\"\n    [title]=\"'tenantId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'tenantIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.tenantId\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"defaultEnvironmentId\"\n    [title]=\"'defaultEnvironmentId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'defaultEnvironmentIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.defaultEnvironmentId\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"false\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"templateSyncEnabled\"\n    type=\"checkbox\"\n    [title]=\"'templateSyncEnabled' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'templateSyncEnabledTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.templateSyncEnabled ? 'true' : ''\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"false\"\n  >\n  </v-input>\n</v-form>\n" }]
         }], propDecorators: { save$: [{
@@ -152,6 +187,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                 type: Output
             }] } });
 
+function countRequiredMapped(fields, mapping) {
+    let mapped = 0;
+    let total = 0;
+    for (const field of fields) {
+        if (field.fieldType === 'SCALAR' && field.required) {
+            total++;
+            const val = mapping[field.name];
+            if (typeof val === 'string' && val.trim().length > 0) {
+                mapped++;
+            }
+        }
+        else if (field.fieldType === 'ARRAY' && field.required) {
+            total++;
+            const val = mapping[field.name];
+            if (typeof val === 'string' && val.trim().length > 0) {
+                mapped++;
+            }
+            else if (typeof val === 'object' && val !== null && '_source' in val) {
+                if (typeof val['_source'] === 'string' && val['_source'].trim().length > 0) {
+                    mapped++;
+                }
+            }
+        }
+        else if (field.fieldType === 'OBJECT' && field.children) {
+            const nested = (typeof mapping[field.name] === 'object' && mapping[field.name] !== null)
+                ? mapping[field.name]
+                : {};
+            const childStats = countRequiredMapped(field.children, nested);
+            mapped += childStats.mapped;
+            total += childStats.total;
+        }
+    }
+    return { mapped, total };
+}
+
 /**
  * Recursive component that renders a single TemplateField node as part of a tree form.
  *
@@ -332,7 +402,7 @@ class FieldTreeComponent {
     }
     updateCompleteness() {
         if (this.field?.fieldType === 'OBJECT' && this.field.children) {
-            const stats = this.countRequiredMapped(this.field.children, this.value || {});
+            const stats = countRequiredMapped(this.field.children, this.value || {});
             this.mappedCount = stats.mapped;
             this.totalRequired = stats.total;
         }
@@ -377,40 +447,6 @@ class FieldTreeComponent {
             this.mappedCount = this.getSourceValue() ? (this.field?.required ? 1 : 0) : 0;
         }
     }
-    countRequiredMapped(fields, mapping) {
-        let mapped = 0;
-        let total = 0;
-        for (const field of fields) {
-            if (field.fieldType === 'SCALAR' && field.required) {
-                total++;
-                const val = mapping[field.name];
-                if (typeof val === 'string' && val.trim().length > 0) {
-                    mapped++;
-                }
-            }
-            else if (field.fieldType === 'ARRAY' && field.required) {
-                total++;
-                const val = mapping[field.name];
-                if (typeof val === 'string' && val.trim().length > 0) {
-                    mapped++;
-                }
-                else if (typeof val === 'object' && val !== null && '_source' in val) {
-                    if (typeof val['_source'] === 'string' && val['_source'].trim().length > 0) {
-                        mapped++;
-                    }
-                }
-            }
-            else if (field.fieldType === 'OBJECT' && field.children) {
-                const nested = (typeof mapping[field.name] === 'object' && mapping[field.name] !== null)
-                    ? mapping[field.name]
-                    : {};
-                const childStats = this.countRequiredMapped(field.children, nested);
-                mapped += childStats.mapped;
-                total += childStats.total;
-            }
-        }
-        return { mapped, total };
-    }
     detectInputMode(value) {
         if (typeof value !== 'string')
             return 'browse';
@@ -425,12 +461,12 @@ class FieldTreeComponent {
     isResolvableValue(value) {
         return value.startsWith('doc:') || value.startsWith('case:') || value.startsWith('pv:') || value.startsWith('template:');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FieldTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: FieldTreeComponent, isStandalone: true, selector: "epistola-field-tree", inputs: { field: "field", value: "value", pluginId: "pluginId", caseDefinitionKey: "caseDefinitionKey", processVariables: "processVariables", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: "<!-- SCALAR field: label row + input with 3-mode selector -->\n<div *ngIf=\"field.fieldType === 'SCALAR'\" class=\"field-row\" [class.field-required-unmapped]=\"field.required && !getStringValue()\">\n  <div class=\"field-label\">\n    <span class=\"field-name\">{{ field.name }}</span>\n    <span class=\"field-meta\">({{ field.type }}{{ field.required ? ', required' : '' }})</span>\n  </div>\n  <div class=\"field-input\">\n    <div class=\"input-mode-group\">\n      <button type=\"button\" class=\"mode-btn\" [class.mode-active]=\"inputMode === 'browse'\" [disabled]=\"disabled\" (click)=\"setInputMode('browse')\" [title]=\"'browseMode' | pluginTranslate: pluginId | async\">\u229E</button>\n      <button type=\"button\" class=\"mode-btn\" [class.mode-active]=\"inputMode === 'pv'\" [disabled]=\"disabled\" (click)=\"setInputMode('pv')\" [title]=\"'pvMode' | pluginTranslate: pluginId | async\">pv</button>\n      <button type=\"button\" class=\"mode-btn\" [class.mode-active]=\"inputMode === 'expression'\" [disabled]=\"disabled\" (click)=\"setInputMode('expression')\" [title]=\"'expressionMode' | pluginTranslate: pluginId | async\">fx</button>\n    </div>\n\n    <!-- Browse mode: ValuePathSelector -->\n    <div class=\"field-input-control\" *ngIf=\"inputMode === 'browse'\">\n      <valtimo-value-path-selector\n        [name]=\"'field_' + field.path\"\n        [caseDefinitionKey]=\"caseDefinitionKey\"\n        [prefixes]=\"[ValuePathSelectorPrefix.DOC, ValuePathSelectorPrefix.CASE]\"\n        [notation]=\"'dots'\"\n        [disabled]=\"disabled\"\n        [defaultValue]=\"getStringValue()\"\n        [showCaseDefinitionSelector]=\"!caseDefinitionKey\"\n        (valueChangeEvent)=\"onBrowseValueChange($event)\"\n      ></valtimo-value-path-selector>\n    </div>\n\n    <!-- PV mode: dropdown (when available) or text fallback -->\n    <div class=\"field-input-control\" *ngIf=\"inputMode === 'pv'\">\n      <select\n        *ngIf=\"processVariables.length > 0; else pvFallback\"\n        class=\"pv-select\"\n        [disabled]=\"disabled\"\n        (change)=\"onPvChange($any($event.target).value)\"\n      >\n        <option value=\"\">{{ 'pvPlaceholder' | pluginTranslate: pluginId | async }}</option>\n        <option *ngFor=\"let pv of processVariables\" [value]=\"pv\" [selected]=\"pv === getPvName()\">{{ pv }}</option>\n      </select>\n      <ng-template #pvFallback>\n        <v-input\n          [name]=\"'pvfb_' + field.path\"\n          [defaultValue]=\"getPvName()\"\n          [disabled]=\"disabled\"\n          [placeholder]=\"'pvPlaceholder' | pluginTranslate: pluginId | async\"\n          (valueChange)=\"onPvChange($event)\"\n        ></v-input>\n      </ng-template>\n    </div>\n\n    <!-- Expression mode: text input -->\n    <div class=\"field-input-control\" *ngIf=\"inputMode === 'expression'\">\n      <v-input\n        [name]=\"'fx_' + field.path\"\n        [defaultValue]=\"getStringValue()\"\n        [disabled]=\"disabled\"\n        [placeholder]=\"'e.g. pv:variableName or doc:path.to.field'\"\n        (valueChange)=\"onExpressionValueChange($event)\"\n      ></v-input>\n    </div>\n  </div>\n</div>\n\n<!-- OBJECT field: collapsible section with children -->\n<div *ngIf=\"field.fieldType === 'OBJECT'\" class=\"field-object\">\n  <div class=\"field-object-header\" (click)=\"toggleExpanded()\" [class.field-required-unmapped]=\"totalRequired > 0 && mappedCount < totalRequired\">\n    <span class=\"expand-icon\">{{ expanded ? '\u25BC' : '\u25B6' }}</span>\n    <span class=\"field-name\">{{ field.name }}</span>\n    <span class=\"field-meta\">(object{{ field.required ? ', required' : '' }})</span>\n    <span class=\"completeness-badge\" *ngIf=\"totalRequired > 0 && !expanded\">\n      {{ mappedCount }}/{{ totalRequired }}\n    </span>\n  </div>\n  <div class=\"field-object-children\" *ngIf=\"expanded\">\n    <epistola-field-tree\n      *ngFor=\"let child of field.children\"\n      [field]=\"child\"\n      [value]=\"getChildValue(child.name)\"\n      [pluginId]=\"pluginId\"\n      [caseDefinitionKey]=\"caseDefinitionKey\"\n      [processVariables]=\"processVariables\"\n      [disabled]=\"disabled\"\n      (valueChange)=\"onChildChange(child.name, $event)\"\n    ></epistola-field-tree>\n  </div>\n</div>\n\n<!-- ARRAY field: collapsible section with source collection + optional per-item mapping -->\n<div *ngIf=\"field.fieldType === 'ARRAY'\" class=\"field-array\">\n  <div class=\"field-array-header\" (click)=\"toggleExpanded()\" [class.field-required-unmapped]=\"field.required && !getSourceValue()\">\n    <span class=\"expand-icon\">{{ expanded ? '\u25BC' : '\u25B6' }}</span>\n    <span class=\"field-name\">{{ field.name }}</span>\n    <span class=\"field-meta\">(array{{ field.required ? ', required' : '' }})</span>\n    <span class=\"completeness-badge\" *ngIf=\"totalRequired > 0 && !expanded\">\n      {{ mappedCount }}/{{ totalRequired }}\n    </span>\n    <span class=\"mapped-indicator\" *ngIf=\"totalRequired === 0 && getSourceValue() && !expanded\">\u2713</span>\n  </div>\n  <div class=\"field-array-content\" *ngIf=\"expanded\">\n    <!-- Source collection input -->\n    <div class=\"field-row\">\n      <div class=\"field-label\">\n        <span class=\"field-name\">{{ 'mapCollectionTo' | pluginTranslate: pluginId | async }}</span>\n      </div>\n      <div class=\"field-input\">\n        <div class=\"input-mode-group\">\n          <button type=\"button\" class=\"mode-btn\" [class.mode-active]=\"inputMode === 'browse'\" [disabled]=\"disabled\" (click)=\"setInputMode('browse')\" [title]=\"'browseMode' | pluginTranslate: pluginId | async\">\u229E</button>\n          <button type=\"button\" class=\"mode-btn\" [class.mode-active]=\"inputMode === 'pv'\" [disabled]=\"disabled\" (click)=\"setInputMode('pv')\" [title]=\"'pvMode' | pluginTranslate: pluginId | async\">pv</button>\n          <button type=\"button\" class=\"mode-btn\" [class.mode-active]=\"inputMode === 'expression'\" [disabled]=\"disabled\" (click)=\"setInputMode('expression')\" [title]=\"'expressionMode' | pluginTranslate: pluginId | async\">fx</button>\n        </div>\n\n        <div class=\"field-input-control\" *ngIf=\"inputMode === 'browse'\">\n          <valtimo-value-path-selector\n            [name]=\"'field_' + field.path\"\n            [caseDefinitionKey]=\"caseDefinitionKey\"\n            [prefixes]=\"[ValuePathSelectorPrefix.DOC, ValuePathSelectorPrefix.CASE]\"\n            [notation]=\"'dots'\"\n            [disabled]=\"disabled\"\n            [defaultValue]=\"getSourceValue()\"\n            [showCaseDefinitionSelector]=\"!caseDefinitionKey\"\n            (valueChangeEvent)=\"onSourceBrowseChange($event)\"\n          ></valtimo-value-path-selector>\n        </div>\n\n        <div class=\"field-input-control\" *ngIf=\"inputMode === 'pv'\">\n          <select\n            *ngIf=\"processVariables.length > 0; else pvSourceFallback\"\n            class=\"pv-select\"\n            [disabled]=\"disabled\"\n            (change)=\"onSourcePvChange($any($event.target).value)\"\n          >\n            <option value=\"\">{{ 'pvPlaceholder' | pluginTranslate: pluginId | async }}</option>\n            <option *ngFor=\"let pv of processVariables\" [value]=\"pv\" [selected]=\"pv === getSourcePvName()\">{{ pv }}</option>\n          </select>\n          <ng-template #pvSourceFallback>\n            <v-input\n              [name]=\"'pvfb_' + field.path\"\n              [defaultValue]=\"getSourcePvName()\"\n              [disabled]=\"disabled\"\n              [placeholder]=\"'pvPlaceholder' | pluginTranslate: pluginId | async\"\n              (valueChange)=\"onSourcePvChange($event)\"\n            ></v-input>\n          </ng-template>\n        </div>\n\n        <div class=\"field-input-control\" *ngIf=\"inputMode === 'expression'\">\n          <v-input\n            [name]=\"'fx_' + field.path\"\n            [defaultValue]=\"getSourceValue()\"\n            [disabled]=\"disabled\"\n            [placeholder]=\"'e.g. pv:variableName or doc:path.to.field'\"\n            (valueChange)=\"onSourceExpressionChange($event)\"\n          ></v-input>\n        </div>\n      </div>\n    </div>\n\n    <!-- Per-item field mapping toggle (only shown when array has children) -->\n    <div class=\"array-per-field-toggle\" *ngIf=\"hasArrayChildren()\">\n      <label class=\"toggle-label\">\n        <input\n          type=\"checkbox\"\n          [checked]=\"arrayPerFieldMode\"\n          [disabled]=\"disabled\"\n          (change)=\"toggleArrayPerFieldMode()\"\n        />\n        <span>{{ 'itemFieldMapping' | pluginTranslate: pluginId | async }}</span>\n      </label>\n    </div>\n\n    <!-- Per-item field mappings -->\n    <div class=\"array-item-fields\" *ngIf=\"arrayPerFieldMode && hasArrayChildren()\">\n      <div class=\"item-fields-header\">\n        <span class=\"item-fields-title\">{{ 'itemFieldMappingTitle' | pluginTranslate: pluginId | async }}</span>\n      </div>\n      <div class=\"item-field-row\" *ngFor=\"let child of field.children\">\n        <div class=\"item-field-label\">\n          <span class=\"field-name\">{{ child.name }}</span>\n          <span class=\"field-meta\">({{ child.type }}{{ child.required ? ', required' : '' }})</span>\n        </div>\n        <div class=\"item-field-input\">\n          <v-input\n            [name]=\"'itemField_' + child.path\"\n            [defaultValue]=\"getItemFieldValue(child.name)\"\n            [disabled]=\"disabled\"\n            [placeholder]=\"'sourceFieldPlaceholder' | pluginTranslate: pluginId | async\"\n            (valueChange)=\"onItemFieldChange(child.name, $event)\"\n          ></v-input>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".field-row{display:flex;align-items:flex-start;gap:.75rem;padding:.5rem 0;border-left:3px solid transparent}.field-row.field-required-unmapped{border-left-color:#dc3545;background-color:#fff5f5;padding-left:.5rem}.field-label{flex:0 0 200px;min-width:140px;padding-top:.5rem;word-break:break-word}.field-label .field-name{font-weight:500}.field-label .field-meta{font-size:.8125rem;color:#6c757d;margin-left:.25rem}.field-input{flex:1;display:flex;align-items:flex-start;gap:.5rem;min-width:0}.field-input-control{flex:1;min-width:0}.input-mode-group{flex:0 0 auto;display:flex;margin-top:.25rem;border:1px solid #c6c6c6;border-radius:4px;overflow:hidden}.input-mode-group .mode-btn{width:32px;height:32px;padding:0;border:none;border-right:1px solid #c6c6c6;background:#f4f4f4;color:#525252;font-size:.75rem;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .15s}.input-mode-group .mode-btn:last-child{border-right:none}.input-mode-group .mode-btn:hover:not(:disabled){background:#e0e0e0}.input-mode-group .mode-btn.mode-active{background:#0f62fe;color:#fff}.input-mode-group .mode-btn.mode-active:hover:not(:disabled){background:#0353e9}.input-mode-group .mode-btn:disabled{opacity:.5;cursor:not-allowed}.pv-select{width:100%;height:2.5rem;padding:0 .75rem;border:1px solid #c6c6c6;border-radius:4px;background:#fff;color:#161616;font-size:.875rem;cursor:pointer}.pv-select:focus{outline:2px solid #0f62fe;outline-offset:-2px}.pv-select:disabled{opacity:.5;cursor:not-allowed;background:#f4f4f4}.field-object{margin:.25rem 0}.field-object-header,.field-array-header{display:flex;align-items:center;gap:.5rem;padding:.5rem .25rem;cursor:pointer;-webkit-user-select:none;user-select:none;border-left:3px solid transparent;border-radius:2px}.field-object-header:hover,.field-array-header:hover{background:#f4f4f4}.field-object-header.field-required-unmapped,.field-array-header.field-required-unmapped{border-left-color:#dc3545;background-color:#fff5f5}.field-object-header .expand-icon,.field-array-header .expand-icon{flex:0 0 1rem;font-size:.75rem;color:#525252}.field-object-header .field-name,.field-array-header .field-name{font-weight:500}.field-object-header .field-meta,.field-array-header .field-meta{font-size:.8125rem;color:#6c757d}.field-object-header .completeness-badge,.field-array-header .completeness-badge{margin-left:auto;font-size:.75rem;padding:.125rem .5rem;border-radius:10px;background:#e0e0e0;color:#525252;font-weight:500}.field-object-header .mapped-indicator,.field-array-header .mapped-indicator{margin-left:auto;color:#198754;font-weight:600}.field-object-children{padding-left:1.25rem;border-left:1px solid #e0e0e0;margin-left:.5rem}.field-array{margin:.25rem 0}.field-array-content{padding-left:1.25rem;border-left:1px solid #e0e0e0;margin-left:.5rem}.array-per-field-toggle{padding:.5rem 0}.array-per-field-toggle .toggle-label{display:flex;align-items:center;gap:.5rem;cursor:pointer;font-size:.875rem;color:#525252}.array-per-field-toggle .toggle-label input[type=checkbox]{cursor:pointer}.array-item-fields{margin-left:.5rem;border-left:1px dashed #c6c6c6;padding:.25rem 0 .5rem 1rem}.item-fields-header{padding-bottom:.25rem}.item-fields-header .item-fields-title{font-size:.8125rem;font-weight:500;color:#6c757d}.item-field-row{display:flex;align-items:center;gap:.75rem;padding:.25rem 0}.item-field-label{flex:0 0 180px;min-width:120px;word-break:break-word}.item-field-label .field-name{font-weight:500;font-size:.875rem}.item-field-label .field-meta{font-size:.75rem;color:#6c757d;margin-left:.25rem}.item-field-input{flex:1;min-width:0}\n"], dependencies: [{ kind: "component", type: FieldTreeComponent, selector: "epistola-field-tree", inputs: ["field", "value", "pluginId", "caseDefinitionKey", "processVariables", "disabled"], outputs: ["valueChange"] }, { 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: "ngmodule", type: PluginTranslatePipeModule }, { kind: "pipe", type: i2$1.PluginTranslatePipe, name: "pluginTranslate" }, { 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: "component", type: ValuePathSelectorComponent, selector: "valtimo-value-path-selector", inputs: ["name", "appendInline", "margin", "marginLg", "marginXl", "disabled", "caseDefinitionKey", "caseDefinitionVersionTag", "prefixes", "label", "tooltip", "required", "showCaseDefinitionSelector", "notation", "defaultValue", "type", "parentItem"], outputs: ["valueChangeEvent", "collectionSelected"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FieldTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: FieldTreeComponent, isStandalone: true, selector: "epistola-field-tree", inputs: { field: "field", value: "value", pluginId: "pluginId", caseDefinitionKey: "caseDefinitionKey", processVariables: "processVariables", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: "<!-- SCALAR field: label row + input with 3-mode selector -->\n<div *ngIf=\"field.fieldType === 'SCALAR'\" class=\"field-row\" [class.field-required-unmapped]=\"field.required && !getStringValue()\">\n  <div class=\"field-label\">\n    <span class=\"field-name\">{{ field.name }}</span>\n    <span class=\"field-meta\">({{ field.type }}{{ field.required ? ', required' : '' }})</span>\n  </div>\n  <div class=\"field-input\">\n    <div class=\"input-mode-group\">\n      <button type=\"button\" class=\"mode-btn\" [class.mode-active]=\"inputMode === 'browse'\" [disabled]=\"disabled\" (click)=\"setInputMode('browse')\" [title]=\"'browseMode' | pluginTranslate: pluginId | async\">\u229E</button>\n      <button type=\"button\" class=\"mode-btn\" [class.mode-active]=\"inputMode === 'pv'\" [disabled]=\"disabled\" (click)=\"setInputMode('pv')\" [title]=\"'pvMode' | pluginTranslate: pluginId | async\">pv</button>\n      <button type=\"button\" class=\"mode-btn\" [class.mode-active]=\"inputMode === 'expression'\" [disabled]=\"disabled\" (click)=\"setInputMode('expression')\" [title]=\"'expressionMode' | pluginTranslate: pluginId | async\">fx</button>\n    </div>\n\n    <!-- Browse mode: ValuePathSelector -->\n    <div class=\"field-input-control\" *ngIf=\"inputMode === 'browse'\">\n      <valtimo-value-path-selector\n        [name]=\"'field_' + field.path\"\n        [caseDefinitionKey]=\"caseDefinitionKey\"\n        [prefixes]=\"[ValuePathSelectorPrefix.DOC, ValuePathSelectorPrefix.CASE]\"\n        [notation]=\"'dots'\"\n        [disabled]=\"disabled\"\n        [defaultValue]=\"getStringValue()\"\n        [showCaseDefinitionSelector]=\"!caseDefinitionKey\"\n        (valueChangeEvent)=\"onBrowseValueChange($event)\"\n      ></valtimo-value-path-selector>\n    </div>\n\n    <!-- PV mode: dropdown (when available) or text fallback -->\n    <div class=\"field-input-control\" *ngIf=\"inputMode === 'pv'\">\n      <select\n        *ngIf=\"processVariables.length > 0; else pvFallback\"\n        class=\"pv-select\"\n        [disabled]=\"disabled\"\n        (change)=\"onPvChange($any($event.target).value)\"\n      >\n        <option value=\"\">{{ 'pvPlaceholder' | pluginTranslate: pluginId | async }}</option>\n        <option *ngFor=\"let pv of processVariables\" [value]=\"pv\" [selected]=\"pv === getPvName()\">{{ pv }}</option>\n      </select>\n      <ng-template #pvFallback>\n        <v-input\n          [name]=\"'pvfb_' + field.path\"\n          [defaultValue]=\"getPvName()\"\n          [disabled]=\"disabled\"\n          [placeholder]=\"'pvPlaceholder' | pluginTranslate: pluginId | async\"\n          (valueChange)=\"onPvChange($event)\"\n        ></v-input>\n      </ng-template>\n    </div>\n\n    <!-- Expression mode: text input -->\n    <div class=\"field-input-control\" *ngIf=\"inputMode === 'expression'\">\n      <v-input\n        [name]=\"'fx_' + field.path\"\n        [defaultValue]=\"getStringValue()\"\n        [disabled]=\"disabled\"\n        [placeholder]=\"'e.g. pv:variableName or doc:path.to.field'\"\n        (valueChange)=\"onExpressionValueChange($event)\"\n      ></v-input>\n    </div>\n  </div>\n</div>\n\n<!-- OBJECT field: collapsible section with children -->\n<div *ngIf=\"field.fieldType === 'OBJECT'\" class=\"field-object\">\n  <div class=\"field-object-header\" (click)=\"toggleExpanded()\" [class.field-required-unmapped]=\"totalRequired > 0 && mappedCount < totalRequired\">\n    <span class=\"expand-icon\">{{ expanded ? '\u25BC' : '\u25B6' }}</span>\n    <span class=\"field-name\">{{ field.name }}</span>\n    <span class=\"field-meta\">(object{{ field.required ? ', required' : '' }})</span>\n    <span class=\"completeness-badge\" *ngIf=\"totalRequired > 0 && !expanded\">\n      {{ mappedCount }}/{{ totalRequired }}\n    </span>\n  </div>\n  <div class=\"field-object-children\" *ngIf=\"expanded\">\n    <epistola-field-tree\n      *ngFor=\"let child of field.children\"\n      [field]=\"child\"\n      [value]=\"getChildValue(child.name)\"\n      [pluginId]=\"pluginId\"\n      [caseDefinitionKey]=\"caseDefinitionKey\"\n      [processVariables]=\"processVariables\"\n      [disabled]=\"disabled\"\n      (valueChange)=\"onChildChange(child.name, $event)\"\n    ></epistola-field-tree>\n  </div>\n</div>\n\n<!-- ARRAY field: collapsible section with source collection + optional per-item mapping -->\n<div *ngIf=\"field.fieldType === 'ARRAY'\" class=\"field-array\">\n  <div class=\"field-array-header\" (click)=\"toggleExpanded()\" [class.field-required-unmapped]=\"field.required && !getSourceValue()\">\n    <span class=\"expand-icon\">{{ expanded ? '\u25BC' : '\u25B6' }}</span>\n    <span class=\"field-name\">{{ field.name }}</span>\n    <span class=\"field-meta\">(array{{ field.required ? ', required' : '' }})</span>\n    <span class=\"completeness-badge\" *ngIf=\"totalRequired > 0 && !expanded\">\n      {{ mappedCount }}/{{ totalRequired }}\n    </span>\n    <span class=\"mapped-indicator\" *ngIf=\"totalRequired === 0 && getSourceValue() && !expanded\">\u2713</span>\n  </div>\n  <div class=\"field-array-content\" *ngIf=\"expanded\">\n    <!-- Source collection input -->\n    <div class=\"field-row\">\n      <div class=\"field-label\">\n        <span class=\"field-name\">{{ 'mapCollectionTo' | pluginTranslate: pluginId | async }}</span>\n      </div>\n      <div class=\"field-input\">\n        <div class=\"input-mode-group\">\n          <button type=\"button\" class=\"mode-btn\" [class.mode-active]=\"inputMode === 'browse'\" [disabled]=\"disabled\" (click)=\"setInputMode('browse')\" [title]=\"'browseMode' | pluginTranslate: pluginId | async\">\u229E</button>\n          <button type=\"button\" class=\"mode-btn\" [class.mode-active]=\"inputMode === 'pv'\" [disabled]=\"disabled\" (click)=\"setInputMode('pv')\" [title]=\"'pvMode' | pluginTranslate: pluginId | async\">pv</button>\n          <button type=\"button\" class=\"mode-btn\" [class.mode-active]=\"inputMode === 'expression'\" [disabled]=\"disabled\" (click)=\"setInputMode('expression')\" [title]=\"'expressionMode' | pluginTranslate: pluginId | async\">fx</button>\n        </div>\n\n        <div class=\"field-input-control\" *ngIf=\"inputMode === 'browse'\">\n          <valtimo-value-path-selector\n            [name]=\"'field_' + field.path\"\n            [caseDefinitionKey]=\"caseDefinitionKey\"\n            [prefixes]=\"[ValuePathSelectorPrefix.DOC, ValuePathSelectorPrefix.CASE]\"\n            [notation]=\"'dots'\"\n            [disabled]=\"disabled\"\n            [defaultValue]=\"getSourceValue()\"\n            [showCaseDefinitionSelector]=\"!caseDefinitionKey\"\n            (valueChangeEvent)=\"onSourceBrowseChange($event)\"\n          ></valtimo-value-path-selector>\n        </div>\n\n        <div class=\"field-input-control\" *ngIf=\"inputMode === 'pv'\">\n          <select\n            *ngIf=\"processVariables.length > 0; else pvSourceFallback\"\n            class=\"pv-select\"\n            [disabled]=\"disabled\"\n            (change)=\"onSourcePvChange($any($event.target).value)\"\n          >\n            <option value=\"\">{{ 'pvPlaceholder' | pluginTranslate: pluginId | async }}</option>\n            <option *ngFor=\"let pv of processVariables\" [value]=\"pv\" [selected]=\"pv === getSourcePvName()\">{{ pv }}</option>\n          </select>\n          <ng-template #pvSourceFallback>\n            <v-input\n              [name]=\"'pvfb_' + field.path\"\n              [defaultValue]=\"getSourcePvName()\"\n              [disabled]=\"disabled\"\n              [placeholder]=\"'pvPlaceholder' | pluginTranslate: pluginId | async\"\n              (valueChange)=\"onSourcePvChange($event)\"\n            ></v-input>\n          </ng-template>\n        </div>\n\n        <div class=\"field-input-control\" *ngIf=\"inputMode === 'expression'\">\n          <v-input\n            [name]=\"'fx_' + field.path\"\n            [defaultValue]=\"getSourceValue()\"\n            [disabled]=\"disabled\"\n            [placeholder]=\"'e.g. pv:variableName or doc:path.to.field'\"\n            (valueChange)=\"onSourceExpressionChange($event)\"\n          ></v-input>\n        </div>\n      </div>\n    </div>\n\n    <!-- Per-item field mapping toggle (only shown when array has children) -->\n    <div class=\"array-per-field-toggle\" *ngIf=\"hasArrayChildren()\">\n      <label class=\"toggle-label\">\n        <input\n          type=\"checkbox\"\n          [checked]=\"arrayPerFieldMode\"\n          [disabled]=\"disabled\"\n          (change)=\"toggleArrayPerFieldMode()\"\n        />\n        <span>{{ 'itemFieldMapping' | pluginTranslate: pluginId | async }}</span>\n      </label>\n    </div>\n\n    <!-- Per-item field mappings -->\n    <div class=\"array-item-fields\" *ngIf=\"arrayPerFieldMode && hasArrayChildren()\">\n      <div class=\"item-fields-header\">\n        <span class=\"item-fields-title\">{{ 'itemFieldMappingTitle' | pluginTranslate: pluginId | async }}</span>\n      </div>\n      <div class=\"item-field-row\" *ngFor=\"let child of field.children\">\n        <div class=\"item-field-label\">\n          <span class=\"field-name\">{{ child.name }}</span>\n          <span class=\"field-meta\">({{ child.type }}{{ child.required ? ', required' : '' }})</span>\n        </div>\n        <div class=\"item-field-input\">\n          <v-input\n            [name]=\"'itemField_' + child.path\"\n            [defaultValue]=\"getItemFieldValue(child.name)\"\n            [disabled]=\"disabled\"\n            [placeholder]=\"'sourceFieldPlaceholder' | pluginTranslate: pluginId | async\"\n            (valueChange)=\"onItemFieldChange(child.name, $event)\"\n          ></v-input>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".field-row{display:flex;align-items:flex-start;gap:.75rem;padding:.5rem 0;border-left:3px solid transparent}.field-row.field-required-unmapped{border-left-color:#dc3545;background-color:#fff5f5;padding-left:.5rem}.field-label{flex:0 0 200px;min-width:140px;padding-top:.5rem;word-break:break-word}.field-label .field-name{font-weight:500}.field-label .field-meta{font-size:.8125rem;color:#6c757d;margin-left:.25rem}.field-input{flex:1;display:flex;align-items:flex-start;gap:.5rem;min-width:0}.field-input-control{flex:1;min-width:0}.input-mode-group{flex:0 0 auto;display:flex;margin-top:.25rem;border:1px solid #c6c6c6;border-radius:4px;overflow:hidden}.input-mode-group .mode-btn{width:32px;height:32px;padding:0;border:none;border-right:1px solid #c6c6c6;background:#f4f4f4;color:#525252;font-size:.75rem;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .15s}.input-mode-group .mode-btn:last-child{border-right:none}.input-mode-group .mode-btn:hover:not(:disabled){background:#e0e0e0}.input-mode-group .mode-btn.mode-active{background:#0f62fe;color:#fff}.input-mode-group .mode-btn.mode-active:hover:not(:disabled){background:#0353e9}.input-mode-group .mode-btn:disabled{opacity:.5;cursor:not-allowed}.pv-select{width:100%;height:2.5rem;padding:0 .75rem;border:1px solid #c6c6c6;border-radius:4px;background:#fff;color:#161616;font-size:.875rem;cursor:pointer}.pv-select:focus{outline:2px solid #0f62fe;outline-offset:-2px}.pv-select:disabled{opacity:.5;cursor:not-allowed;background:#f4f4f4}.field-object{margin:.25rem 0}.field-object-header,.field-array-header{display:flex;align-items:center;gap:.5rem;padding:.5rem .25rem;cursor:pointer;-webkit-user-select:none;user-select:none;border-left:3px solid transparent;border-radius:2px}.field-object-header:hover,.field-array-header:hover{background:#f4f4f4}.field-object-header.field-required-unmapped,.field-array-header.field-required-unmapped{border-left-color:#dc3545;background-color:#fff5f5}.field-object-header .expand-icon,.field-array-header .expand-icon{flex:0 0 1rem;font-size:.75rem;color:#525252}.field-object-header .field-name,.field-array-header .field-name{font-weight:500}.field-object-header .field-meta,.field-array-header .field-meta{font-size:.8125rem;color:#6c757d}.field-object-header .completeness-badge,.field-array-header .completeness-badge{margin-left:auto;font-size:.75rem;padding:.125rem .5rem;border-radius:10px;background:#e0e0e0;color:#525252;font-weight:500}.field-object-header .mapped-indicator,.field-array-header .mapped-indicator{margin-left:auto;color:#198754;font-weight:600}.field-object-children{padding-left:1.25rem;border-left:1px solid #e0e0e0;margin-left:.5rem}.field-array{margin:.25rem 0}.field-array-content{padding-left:1.25rem;border-left:1px solid #e0e0e0;margin-left:.5rem}.array-per-field-toggle{padding:.5rem 0}.array-per-field-toggle .toggle-label{display:flex;align-items:center;gap:.5rem;cursor:pointer;font-size:.875rem;color:#525252}.array-per-field-toggle .toggle-label input[type=checkbox]{cursor:pointer}.array-item-fields{margin-left:.5rem;border-left:1px dashed #c6c6c6;padding:.25rem 0 .5rem 1rem}.item-fields-header{padding-bottom:.25rem}.item-fields-header .item-fields-title{font-size:.8125rem;font-weight:500;color:#6c757d}.item-field-row{display:flex;align-items:center;gap:.75rem;padding:.25rem 0}.item-field-label{flex:0 0 180px;min-width:120px;word-break:break-word}.item-field-label .field-name{font-weight:500;font-size:.875rem}.item-field-label .field-meta{font-size:.75rem;color:#6c757d;margin-left:.25rem}.item-field-input{flex:1;min-width:0}\n"], dependencies: [{ kind: "component", type: FieldTreeComponent, selector: "epistola-field-tree", inputs: ["field", "value", "pluginId", "caseDefinitionKey", "processVariables", "disabled"], outputs: ["valueChange"] }, { 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: "ngmodule", type: PluginTranslatePipeModule }, { kind: "pipe", type: i2$1.PluginTranslatePipe, name: "pluginTranslate" }, { 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: "component", type: ValuePathSelectorComponent, selector: "valtimo-value-path-selector", inputs: ["name", "appendInline", "margin", "marginLg", "marginXl", "disabled", "caseDefinitionKey", "caseDefinitionVersionTag", "buildingBlockDefinitionKey", "buildingBlockDefinitionVersionTag", "prefixes", "label", "tooltip", "required", "showCaseDefinitionSelector", "notation", "dropUp", "defaultValue", "type", "parentItem", "filterItems"], outputs: ["valueChangeEvent", "collectionSelected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FieldTreeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FieldTreeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'epistola-field-tree', standalone: true, imports: [
+            args: [{ selector: 'epistola-field-tree', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         CommonModule,
                         FormsModule,
                         PluginTranslatePipeModule,
@@ -504,49 +540,15 @@ class DataMappingTreeComponent {
         return this.mapping[fieldName];
     }
     emitRequiredFieldsStatus() {
-        const stats = this.countRequiredMapped(this.templateFields, this.mapping);
+        const stats = countRequiredMapped(this.templateFields, this.mapping);
         this.requiredFieldsStatus.emit(stats);
     }
-    countRequiredMapped(fields, mapping) {
-        let mapped = 0;
-        let total = 0;
-        for (const field of fields) {
-            if (field.fieldType === 'SCALAR' && field.required) {
-                total++;
-                const val = mapping[field.name];
-                if (typeof val === 'string' && val.trim().length > 0) {
-                    mapped++;
-                }
-            }
-            else if (field.fieldType === 'ARRAY' && field.required) {
-                total++;
-                const val = mapping[field.name];
-                if (typeof val === 'string' && val.trim().length > 0) {
-                    mapped++;
-                }
-                else if (typeof val === 'object' && val !== null && '_source' in val) {
-                    if (typeof val['_source'] === 'string' && val['_source'].trim().length > 0) {
-                        mapped++;
-                    }
-                }
-            }
-            else if (field.fieldType === 'OBJECT' && field.children) {
-                const nested = (typeof mapping[field.name] === 'object' && mapping[field.name] !== null)
-                    ? mapping[field.name]
-                    : {};
-                const childStats = this.countRequiredMapped(field.children, nested);
-                mapped += childStats.mapped;
-                total += childStats.total;
-            }
-        }
-        return { mapped, total };
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DataMappingTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: DataMappingTreeComponent, isStandalone: true, selector: "epistola-data-mapping-tree", inputs: { pluginId: "pluginId", templateFields$: "templateFields$", prefillMapping$: "prefillMapping$", disabled$: "disabled$", caseDefinitionKey: "caseDefinitionKey", processVariables: "processVariables" }, outputs: { mappingChange: "mappingChange", requiredFieldsStatus: "requiredFieldsStatus" }, ngImport: i0, template: "<div class=\"data-mapping-tree\">\n  <div class=\"mapping-header\">\n    <h5>{{ 'dataMappingTitle' | pluginTranslate: pluginId | async }}</h5>\n    <p class=\"helper-text\">{{ 'dataMappingDescription' | pluginTranslate: pluginId | async }}</p>\n  </div>\n\n  <div class=\"field-tree-root\" *ngIf=\"templateFields.length > 0\">\n    <epistola-field-tree\n      *ngFor=\"let field of templateFields\"\n      [field]=\"field\"\n      [value]=\"getFieldValue(field.name)\"\n      [pluginId]=\"pluginId\"\n      [caseDefinitionKey]=\"caseDefinitionKey\"\n      [processVariables]=\"processVariables\"\n      [disabled]=\"disabled\"\n      (valueChange)=\"onFieldValueChange(field.name, $event)\"\n    ></epistola-field-tree>\n  </div>\n\n  <div class=\"no-fields\" *ngIf=\"templateFields.length === 0\">\n    <p>{{ 'noTemplateFields' | pluginTranslate: pluginId | async }}</p>\n  </div>\n</div>\n", styles: [".data-mapping-tree{margin-top:1rem;margin-bottom:1rem}.mapping-header{margin-bottom:.75rem}.mapping-header h5{margin-bottom:.25rem;font-weight:600}.mapping-header .helper-text{color:#6c757d;font-size:.875rem;margin-bottom:0}.field-tree-root{border:1px solid #e0e0e0;border-radius:4px;padding:.5rem .75rem}.no-fields{padding:1rem;text-align:center;color:#6c757d;background-color:#f8f9fa;border:1px solid #dee2e6;border-radius:4px}.no-fields p{margin-bottom:0}\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: PluginTranslatePipeModule }, { kind: "pipe", type: i2$1.PluginTranslatePipe, name: "pluginTranslate" }, { kind: "component", type: FieldTreeComponent, selector: "epistola-field-tree", inputs: ["field", "value", "pluginId", "caseDefinitionKey", "processVariables", "disabled"], outputs: ["valueChange"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DataMappingTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: DataMappingTreeComponent, isStandalone: true, selector: "epistola-data-mapping-tree", inputs: { pluginId: "pluginId", templateFields$: "templateFields$", prefillMapping$: "prefillMapping$", disabled$: "disabled$", caseDefinitionKey: "caseDefinitionKey", processVariables: "processVariables" }, outputs: { mappingChange: "mappingChange", requiredFieldsStatus: "requiredFieldsStatus" }, ngImport: i0, template: "<div class=\"data-mapping-tree\">\n  <div class=\"mapping-header\">\n    <h5>{{ 'dataMappingTitle' | pluginTranslate: pluginId | async }}</h5>\n    <p class=\"helper-text\">{{ 'dataMappingDescription' | pluginTranslate: pluginId | async }}</p>\n  </div>\n\n  <div class=\"field-tree-root\" *ngIf=\"templateFields.length > 0\">\n    <epistola-field-tree\n      *ngFor=\"let field of templateFields\"\n      [field]=\"field\"\n      [value]=\"getFieldValue(field.name)\"\n      [pluginId]=\"pluginId\"\n      [caseDefinitionKey]=\"caseDefinitionKey\"\n      [processVariables]=\"processVariables\"\n      [disabled]=\"disabled\"\n      (valueChange)=\"onFieldValueChange(field.name, $event)\"\n    ></epistola-field-tree>\n  </div>\n\n  <div class=\"no-fields\" *ngIf=\"templateFields.length === 0\">\n    <p>{{ 'noTemplateFields' | pluginTranslate: pluginId | async }}</p>\n  </div>\n</div>\n", styles: [".data-mapping-tree{margin-top:1rem;margin-bottom:1rem}.mapping-header{margin-bottom:.75rem}.mapping-header h5{margin-bottom:.25rem;font-weight:600}.mapping-header .helper-text{color:#6c757d;font-size:.875rem;margin-bottom:0}.field-tree-root{border:1px solid #e0e0e0;border-radius:4px;padding:.5rem .75rem}.no-fields{padding:1rem;text-align:center;color:#6c757d;background-color:#f8f9fa;border:1px solid #dee2e6;border-radius:4px}.no-fields p{margin-bottom:0}\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: PluginTranslatePipeModule }, { kind: "pipe", type: i2$1.PluginTranslatePipe, name: "pluginTranslate" }, { kind: "component", type: FieldTreeComponent, selector: "epistola-field-tree", inputs: ["field", "value", "pluginId", "caseDefinitionKey", "processVariables", "disabled"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DataMappingTreeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DataMappingTreeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'epistola-data-mapping-tree', standalone: true, imports: [
+            args: [{ selector: 'epistola-data-mapping-tree', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         CommonModule,
                         PluginTranslatePipeModule,
                         FieldTreeComponent
@@ -572,6 +574,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
 class GenerateDocumentConfigurationComponent {
     epistolaPluginService;
     processLinkStateService;
+    cdr;
     // Required inputs from FunctionConfigurationComponent
     save$;
     disabled$;
@@ -585,15 +588,19 @@ class GenerateDocumentConfigurationComponent {
     // Template options loaded from API
     templateOptions$ = new BehaviorSubject([]);
     templatesLoading$ = new BehaviorSubject(false);
+    templatesError$ = new BehaviorSubject(null);
     // Variant options loaded based on selected template
     variantOptions$ = new BehaviorSubject([]);
     variantsLoading$ = new BehaviorSubject(false);
+    variantsError$ = new BehaviorSubject(null);
     // Environment options loaded from API
     environmentOptions$ = new BehaviorSubject([]);
     environmentsLoading$ = new BehaviorSubject(false);
+    environmentsError$ = new BehaviorSubject(null);
     // Template fields for data mapping
     templateFields$ = new BehaviorSubject([]);
     templateFieldsLoading$ = new BehaviorSubject(false);
+    templateFieldsError$ = new BehaviorSubject(null);
     // Current data mapping (nested structure mirroring template schema)
     dataMapping$ = new BehaviorSubject({});
     // Prefill data mapping observable for the tree
@@ -620,9 +627,10 @@ class GenerateDocumentConfigurationComponent {
     formValue$ = new BehaviorSubject(null);
     valid$ = new BehaviorSubject(false);
     pluginConfigurationId$ = new BehaviorSubject('');
-    constructor(epistolaPluginService, processLinkStateService) {
+    constructor(epistolaPluginService, processLinkStateService, cdr) {
         this.epistolaPluginService = epistolaPluginService;
         this.processLinkStateService = processLinkStateService;
+        this.cdr = cdr;
     }
     ngOnInit() {
         this.initContext();
@@ -707,6 +715,7 @@ class GenerateDocumentConfigurationComponent {
         if (this.context$) {
             this.context$.pipe(takeUntil(this.destroy$), filter(([context]) => context === 'case')).subscribe(([, params]) => {
                 this.caseDefinitionKey = params.caseDefinitionKey;
+                this.cdr.markForCheck();
             });
         }
     }
@@ -728,6 +737,7 @@ class GenerateDocumentConfigurationComponent {
                 if (config.dataMapping) {
                     this.dataMapping$.next(config.dataMapping);
                 }
+                this.cdr.markForCheck();
             });
         }
         else {
@@ -750,7 +760,11 @@ class GenerateDocumentConfigurationComponent {
     initTemplatesLoading() {
         this.pluginConfigurationId$.pipe(takeUntil(this.destroy$), filter(id => !!id)).subscribe(configurationId => {
             this.templatesLoading$.next(true);
-            this.epistolaPluginService.getTemplates(configurationId).pipe(takeUntil(this.destroy$), catchError(() => of([]))).subscribe(templates => {
+            this.templatesError$.next(null);
+            this.epistolaPluginService.getTemplates(configurationId).pipe(takeUntil(this.destroy$), catchError(() => {
+                this.templatesError$.next('Failed to load templates');
+                return of([]);
+            })).subscribe(templates => {
                 const options = templates.map(t => ({
                     id: t.id,
                     text: t.name
@@ -763,7 +777,11 @@ class GenerateDocumentConfigurationComponent {
     initEnvironmentsLoading() {
         this.pluginConfigurationId$.pipe(takeUntil(this.destroy$), filter(id => !!id)).subscribe(configurationId => {
             this.environmentsLoading$.next(true);
-            this.epistolaPluginService.getEnvironments(configurationId).pipe(takeUntil(this.destroy$), catchError(() => of([]))).subscribe(environments => {
+            this.environmentsError$.next(null);
+            this.epistolaPluginService.getEnvironments(configurationId).pipe(takeUntil(this.destroy$), catchError(() => {
+                this.environmentsError$.next('Failed to load environments');
+                return of([]);
+            })).subscribe(environments => {
                 const options = environments.map(e => ({
                     id: e.id,
                     text: e.name
@@ -779,7 +797,11 @@ class GenerateDocumentConfigurationComponent {
             this.selectedTemplateId$
         ]).pipe(takeUntil(this.destroy$), filter(([configId, templateId]) => !!configId && !!templateId)).subscribe(([configurationId, templateId]) => {
             this.variantsLoading$.next(true);
-            this.epistolaPluginService.getVariants(configurationId, templateId).pipe(takeUntil(this.destroy$), catchError(() => of([]))).subscribe(variants => {
+            this.variantsError$.next(null);
+            this.epistolaPluginService.getVariants(configurationId, templateId).pipe(takeUntil(this.destroy$), catchError(() => {
+                this.variantsError$.next('Failed to load variants');
+                return of([]);
+            })).subscribe(variants => {
                 const options = variants.map(v => ({
                     id: v.id,
                     text: v.name + this.formatAttributes(v.attributes)
@@ -795,7 +817,11 @@ class GenerateDocumentConfigurationComponent {
             this.selectedTemplateId$
         ]).pipe(takeUntil(this.destroy$), filter(([configId, templateId]) => !!configId && !!templateId)).subscribe(([configurationId, templateId]) => {
             this.templateFieldsLoading$.next(true);
-            this.epistolaPluginService.getTemplateDetails(configurationId, templateId).pipe(takeUntil(this.destroy$), catchError(() => of({ fields: [] }))).subscribe(details => {
+            this.templateFieldsError$.next(null);
+            this.epistolaPluginService.getTemplateDetails(configurationId, templateId).pipe(takeUntil(this.destroy$), catchError(() => {
+                this.templateFieldsError$.next('Failed to load template fields');
+                return of({ fields: [] });
+            })).subscribe(details => {
                 this.templateFields$.next(details.fields || []);
                 this.templateFieldsLoading$.next(false);
             });
@@ -808,6 +834,7 @@ class GenerateDocumentConfigurationComponent {
         if (this.caseDefinitionKey) {
             this.epistolaPluginService.getProcessVariables(this.caseDefinitionKey).pipe(takeUntil(this.destroy$), catchError(() => of([]))).subscribe(variables => {
                 this.processVariables = variables;
+                this.cdr.markForCheck();
             });
         }
     }
@@ -860,12 +887,12 @@ class GenerateDocumentConfigurationComponent {
             });
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: GenerateDocumentConfigurationComponent, deps: [{ token: EpistolaPluginService }, { token: i2$2.ProcessLinkStateService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", 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      templateOptions: templateOptions$ | async,\n      templatesLoading: templatesLoading$ | async,\n      variantOptions: variantOptions$ | async,\n      variantsLoading: variantsLoading$ | async,\n      environmentOptions: environmentOptions$ | async,\n      environmentsLoading: environmentsLoading$ | async,\n      templateFieldsLoading: templateFieldsLoading$ | async,\n      selectedTemplateId: selectedTemplateId$ | async\n    } as obs\"\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.templateOptions\"\n    [defaultSelectionId]=\"obs.prefill?.templateId\"\n    [disabled]=\"obs.disabled || obs.templatesLoading\"\n    [required]=\"true\"\n    [loading]=\"obs.templatesLoading\"\n  >\n  </v-select>\n\n  <!-- Variant selection mode toggle -->\n  <div class=\"variant-mode-toggle\" *ngIf=\"obs.selectedTemplateId\">\n    <label class=\"variant-mode-label\">{{ 'variantSelectionMode' | pluginTranslate: pluginId | async }}</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      >{{ 'selectByVariant' | pluginTranslate: pluginId | async }}</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      >{{ 'selectByAttributes' | pluginTranslate: pluginId | async }}</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.variantOptions\"\n    [defaultSelectionId]=\"obs.prefill?.variantId\"\n    [disabled]=\"obs.disabled || obs.variantsLoading || !obs.selectedTemplateId\"\n    [required]=\"false\"\n    [loading]=\"obs.variantsLoading\"\n  >\n  </v-select>\n\n  <!-- Attribute-based variant selection -->\n  <div *ngIf=\"variantSelectionMode === 'attributes' && obs.selectedTemplateId\" class=\"variant-attributes-section\">\n    <label class=\"variant-attributes-label\">{{ 'variantAttributes' | pluginTranslate: pluginId | async }}</label>\n    <div class=\"variant-attributes-list\">\n      <div *ngFor=\"let entry of variantAttributeEntries; let i = index\" class=\"variant-attribute-row\">\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        <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        <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        >&times;</button>\n      </div>\n    </div>\n    <button\n      type=\"button\"\n      class=\"variant-attribute-add-btn\"\n      (click)=\"addAttributeEntry()\"\n      [disabled]=\"obs.disabled\"\n    >+ {{ 'addAttribute' | pluginTranslate: pluginId | async }}</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.environmentOptions\"\n    [defaultSelectionId]=\"obs.prefill?.environmentId\"\n    [disabled]=\"obs.disabled || obs.environmentsLoading\"\n    [required]=\"false\"\n    [loading]=\"obs.environmentsLoading\"\n  >\n  </v-select>\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<epistola-data-mapping-tree\n  *ngIf=\"(selectedTemplateId$ | async)\"\n  [pluginId]=\"pluginId\"\n  [templateFields$]=\"templateFields$\"\n  [disabled$]=\"disabled$\"\n  [prefillMapping$]=\"prefillDataMapping$\"\n  [caseDefinitionKey]=\"caseDefinitionKey\"\n  [processVariables]=\"processVariables\"\n  (mappingChange)=\"onDataMappingChange($event)\"\n  (requiredFieldsStatus)=\"onRequiredFieldsStatusChange($event)\"\n></epistola-data-mapping-tree>\n\n<div class=\"validation-summary\" *ngIf=\"(selectedTemplateId$ | async) && requiredFieldsStatus.total > 0\">\n  <span *ngIf=\"requiredFieldsStatus.mapped === requiredFieldsStatus.total\" class=\"validation-complete\">\n    {{ 'requiredFieldsComplete' | pluginTranslate: pluginId | async }}\n  </span>\n  <span *ngIf=\"requiredFieldsStatus.mapped < requiredFieldsStatus.total\" class=\"validation-incomplete\">\n    {{ requiredFieldsStatus.mapped }} / {{ requiredFieldsStatus.total }}\n    {{ 'validationSummary' | pluginTranslate: pluginId | async }}\n  </span>\n</div>\n", styles: [".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}.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}\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.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" }, { 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", "dataTestId"], outputs: ["selectedChange"] }, { kind: "component", type: DataMappingTreeComponent, selector: "epistola-data-mapping-tree", inputs: ["pluginId", "templateFields$", "prefillMapping$", "disabled$", "caseDefinitionKey", "processVariables"], outputs: ["mappingChange", "requiredFieldsStatus"] }] });
+    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      templateOptions: templateOptions$ | async,\n      templatesLoading: templatesLoading$ | async,\n      templatesError: templatesError$ | async,\n      variantOptions: variantOptions$ | async,\n      variantsLoading: variantsLoading$ | async,\n      variantsError: variantsError$ | async,\n      environmentOptions: environmentOptions$ | async,\n      environmentsLoading: environmentsLoading$ | async,\n      environmentsError: environmentsError$ | async,\n      templateFieldsLoading: templateFieldsLoading$ | async,\n      selectedTemplateId: selectedTemplateId$ | async\n    } as obs\"\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.templateOptions\"\n    [defaultSelectionId]=\"obs.prefill?.templateId\"\n    [disabled]=\"obs.disabled || obs.templatesLoading\"\n    [required]=\"true\"\n    [loading]=\"obs.templatesLoading\"\n  >\n  </v-select>\n  <div *ngIf=\"obs.templatesError\" class=\"loading-error\">{{ obs.templatesError }}</div>\n\n  <!-- Variant selection mode toggle -->\n  <div class=\"variant-mode-toggle\" *ngIf=\"obs.selectedTemplateId\">\n    <label class=\"variant-mode-label\">{{ 'variantSelectionMode' | pluginTranslate: pluginId | async }}</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      >{{ 'selectByVariant' | pluginTranslate: pluginId | async }}</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      >{{ 'selectByAttributes' | pluginTranslate: pluginId | async }}</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.variantOptions\"\n    [defaultSelectionId]=\"obs.prefill?.variantId\"\n    [disabled]=\"obs.disabled || obs.variantsLoading || !obs.selectedTemplateId\"\n    [required]=\"false\"\n    [loading]=\"obs.variantsLoading\"\n  >\n  </v-select>\n  <div *ngIf=\"obs.variantsError\" class=\"loading-error\">{{ obs.variantsError }}</div>\n\n  <!-- Attribute-based variant selection -->\n  <div *ngIf=\"variantSelectionMode === 'attributes' && obs.selectedTemplateId\" class=\"variant-attributes-section\">\n    <label class=\"variant-attributes-label\">{{ 'variantAttributes' | pluginTranslate: pluginId | async }}</label>\n    <div class=\"variant-attributes-list\">\n      <div *ngFor=\"let entry of variantAttributeEntries; let i = index\" class=\"variant-attribute-row\">\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        <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        <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        >&times;</button>\n      </div>\n    </div>\n    <button\n      type=\"button\"\n      class=\"variant-attribute-add-btn\"\n      (click)=\"addAttributeEntry()\"\n      [disabled]=\"obs.disabled\"\n    >+ {{ 'addAttribute' | pluginTranslate: pluginId | async }}</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.environmentOptions\"\n    [defaultSelectionId]=\"obs.prefill?.environmentId\"\n    [disabled]=\"obs.disabled || obs.environmentsLoading\"\n    [required]=\"false\"\n    [loading]=\"obs.environmentsLoading\"\n  >\n  </v-select>\n  <div *ngIf=\"obs.environmentsError\" class=\"loading-error\">{{ obs.environmentsError }}</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=\"templateFieldsError$ | async as templateFieldsError\" class=\"loading-error\">{{ templateFieldsError }}</div>\n\n<epistola-data-mapping-tree\n  *ngIf=\"(selectedTemplateId$ | async)\"\n  [pluginId]=\"pluginId\"\n  [templateFields$]=\"templateFields$\"\n  [disabled$]=\"disabled$\"\n  [prefillMapping$]=\"prefillDataMapping$\"\n  [caseDefinitionKey]=\"caseDefinitionKey\"\n  [processVariables]=\"processVariables\"\n  (mappingChange)=\"onDataMappingChange($event)\"\n  (requiredFieldsStatus)=\"onRequiredFieldsStatusChange($event)\"\n></epistola-data-mapping-tree>\n\n<div class=\"validation-summary\" *ngIf=\"(selectedTemplateId$ | async) && requiredFieldsStatus.total > 0\">\n  <span *ngIf=\"requiredFieldsStatus.mapped === requiredFieldsStatus.total\" class=\"validation-complete\">\n    {{ 'requiredFieldsComplete' | pluginTranslate: pluginId | async }}\n  </span>\n  <span *ngIf=\"requiredFieldsStatus.mapped < requiredFieldsStatus.total\" class=\"validation-incomplete\">\n    {{ requiredFieldsStatus.mapped }} / {{ requiredFieldsStatus.total }}\n    {{ 'validationSummary' | pluginTranslate: pluginId | async }}\n  </span>\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}.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}\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.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" }, { 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: DataMappingTreeComponent, selector: "epistola-data-mapping-tree", inputs: ["pluginId", "templateFields$", "prefillMapping$", "disabled$", "caseDefinitionKey", "processVariables"], outputs: ["mappingChange", "requiredFieldsStatus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: GenerateDocumentConfigurationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: GenerateDocumentConfigurationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'epistola-generate-document-configuration', standalone: true, imports: [
+            args: [{ selector: 'epistola-generate-document-configuration', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         CommonModule,
                         FormsModule,
                         PluginTranslatePipeModule,
@@ -873,8 +900,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                         InputModule,
                         SelectModule,
                         DataMappingTreeComponent
-                    ], template: "<v-form\n    (valueChange)=\"formValueChange($event)\"\n    *ngIf=\"{\n      disabled: disabled$ | async,\n      prefill: prefillConfiguration$ ? (prefillConfiguration$ | async) : null,\n      templateOptions: templateOptions$ | async,\n      templatesLoading: templatesLoading$ | async,\n      variantOptions: variantOptions$ | async,\n      variantsLoading: variantsLoading$ | async,\n      environmentOptions: environmentOptions$ | async,\n      environmentsLoading: environmentsLoading$ | async,\n      templateFieldsLoading: templateFieldsLoading$ | async,\n      selectedTemplateId: selectedTemplateId$ | async\n    } as obs\"\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.templateOptions\"\n    [defaultSelectionId]=\"obs.prefill?.templateId\"\n    [disabled]=\"obs.disabled || obs.templatesLoading\"\n    [required]=\"true\"\n    [loading]=\"obs.templatesLoading\"\n  >\n  </v-select>\n\n  <!-- Variant selection mode toggle -->\n  <div class=\"variant-mode-toggle\" *ngIf=\"obs.selectedTemplateId\">\n    <label class=\"variant-mode-label\">{{ 'variantSelectionMode' | pluginTranslate: pluginId | async }}</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      >{{ 'selectByVariant' | pluginTranslate: pluginId | async }}</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      >{{ 'selectByAttributes' | pluginTranslate: pluginId | async }}</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.variantOptions\"\n    [defaultSelectionId]=\"obs.prefill?.variantId\"\n    [disabled]=\"obs.disabled || obs.variantsLoading || !obs.selectedTemplateId\"\n    [required]=\"false\"\n    [loading]=\"obs.variantsLoading\"\n  >\n  </v-select>\n\n  <!-- Attribute-based variant selection -->\n  <div *ngIf=\"variantSelectionMode === 'attributes' && obs.selectedTemplateId\" class=\"variant-attributes-section\">\n    <label class=\"variant-attributes-label\">{{ 'variantAttributes' | pluginTranslate: pluginId | async }}</label>\n    <div class=\"variant-attributes-list\">\n      <div *ngFor=\"let entry of variantAttributeEntries; let i = index\" class=\"variant-attribute-row\">\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        <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        <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        >&times;</button>\n      </div>\n    </div>\n    <button\n      type=\"button\"\n      class=\"variant-attribute-add-btn\"\n      (click)=\"addAttributeEntry()\"\n      [disabled]=\"obs.disabled\"\n    >+ {{ 'addAttribute' | pluginTranslate: pluginId | async }}</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.environmentOptions\"\n    [defaultSelectionId]=\"obs.prefill?.environmentId\"\n    [disabled]=\"obs.disabled || obs.environmentsLoading\"\n    [required]=\"false\"\n    [loading]=\"obs.environmentsLoading\"\n  >\n  </v-select>\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<epistola-data-mapping-tree\n  *ngIf=\"(selectedTemplateId$ | async)\"\n  [pluginId]=\"pluginId\"\n  [templateFields$]=\"templateFields$\"\n  [disabled$]=\"disabled$\"\n  [prefillMapping$]=\"prefillDataMapping$\"\n  [caseDefinitionKey]=\"caseDefinitionKey\"\n  [processVariables]=\"processVariables\"\n  (mappingChange)=\"onDataMappingChange($event)\"\n  (requiredFieldsStatus)=\"onRequiredFieldsStatusChange($event)\"\n></epistola-data-mapping-tree>\n\n<div class=\"validation-summary\" *ngIf=\"(selectedTemplateId$ | async) && requiredFieldsStatus.total > 0\">\n  <span *ngIf=\"requiredFieldsStatus.mapped === requiredFieldsStatus.total\" class=\"validation-complete\">\n    {{ 'requiredFieldsComplete' | pluginTranslate: pluginId | async }}\n  </span>\n  <span *ngIf=\"requiredFieldsStatus.mapped < requiredFieldsStatus.total\" class=\"validation-incomplete\">\n    {{ requiredFieldsStatus.mapped }} / {{ requiredFieldsStatus.total }}\n    {{ 'validationSummary' | pluginTranslate: pluginId | async }}\n  </span>\n</div>\n", styles: [".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}.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}\n"] }]
-        }], ctorParameters: () => [{ type: EpistolaPluginService }, { type: i2$2.ProcessLinkStateService }], propDecorators: { save$: [{
+                    ], template: "<v-form\n    (valueChange)=\"formValueChange($event)\"\n    *ngIf=\"{\n      disabled: disabled$ | async,\n      prefill: prefillConfiguration$ ? (prefillConfiguration$ | async) : null,\n      templateOptions: templateOptions$ | async,\n      templatesLoading: templatesLoading$ | async,\n      templatesError: templatesError$ | async,\n      variantOptions: variantOptions$ | async,\n      variantsLoading: variantsLoading$ | async,\n      variantsError: variantsError$ | async,\n      environmentOptions: environmentOptions$ | async,\n      environmentsLoading: environmentsLoading$ | async,\n      environmentsError: environmentsError$ | async,\n      templateFieldsLoading: templateFieldsLoading$ | async,\n      selectedTemplateId: selectedTemplateId$ | async\n    } as obs\"\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.templateOptions\"\n    [defaultSelectionId]=\"obs.prefill?.templateId\"\n    [disabled]=\"obs.disabled || obs.templatesLoading\"\n    [required]=\"true\"\n    [loading]=\"obs.templatesLoading\"\n  >\n  </v-select>\n  <div *ngIf=\"obs.templatesError\" class=\"loading-error\">{{ obs.templatesError }}</div>\n\n  <!-- Variant selection mode toggle -->\n  <div class=\"variant-mode-toggle\" *ngIf=\"obs.selectedTemplateId\">\n    <label class=\"variant-mode-label\">{{ 'variantSelectionMode' | pluginTranslate: pluginId | async }}</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      >{{ 'selectByVariant' | pluginTranslate: pluginId | async }}</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      >{{ 'selectByAttributes' | pluginTranslate: pluginId | async }}</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.variantOptions\"\n    [defaultSelectionId]=\"obs.prefill?.variantId\"\n    [disabled]=\"obs.disabled || obs.variantsLoading || !obs.selectedTemplateId\"\n    [required]=\"false\"\n    [loading]=\"obs.variantsLoading\"\n  >\n  </v-select>\n  <div *ngIf=\"obs.variantsError\" class=\"loading-error\">{{ obs.variantsError }}</div>\n\n  <!-- Attribute-based variant selection -->\n  <div *ngIf=\"variantSelectionMode === 'attributes' && obs.selectedTemplateId\" class=\"variant-attributes-section\">\n    <label class=\"variant-attributes-label\">{{ 'variantAttributes' | pluginTranslate: pluginId | async }}</label>\n    <div class=\"variant-attributes-list\">\n      <div *ngFor=\"let entry of variantAttributeEntries; let i = index\" class=\"variant-attribute-row\">\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        <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        <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        >&times;</button>\n      </div>\n    </div>\n    <button\n      type=\"button\"\n      class=\"variant-attribute-add-btn\"\n      (click)=\"addAttributeEntry()\"\n      [disabled]=\"obs.disabled\"\n    >+ {{ 'addAttribute' | pluginTranslate: pluginId | async }}</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.environmentOptions\"\n    [defaultSelectionId]=\"obs.prefill?.environmentId\"\n    [disabled]=\"obs.disabled || obs.environmentsLoading\"\n    [required]=\"false\"\n    [loading]=\"obs.environmentsLoading\"\n  >\n  </v-select>\n  <div *ngIf=\"obs.environmentsError\" class=\"loading-error\">{{ obs.environmentsError }}</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=\"templateFieldsError$ | async as templateFieldsError\" class=\"loading-error\">{{ templateFieldsError }}</div>\n\n<epistola-data-mapping-tree\n  *ngIf=\"(selectedTemplateId$ | async)\"\n  [pluginId]=\"pluginId\"\n  [templateFields$]=\"templateFields$\"\n  [disabled$]=\"disabled$\"\n  [prefillMapping$]=\"prefillDataMapping$\"\n  [caseDefinitionKey]=\"caseDefinitionKey\"\n  [processVariables]=\"processVariables\"\n  (mappingChange)=\"onDataMappingChange($event)\"\n  (requiredFieldsStatus)=\"onRequiredFieldsStatusChange($event)\"\n></epistola-data-mapping-tree>\n\n<div class=\"validation-summary\" *ngIf=\"(selectedTemplateId$ | async) && requiredFieldsStatus.total > 0\">\n  <span *ngIf=\"requiredFieldsStatus.mapped === requiredFieldsStatus.total\" class=\"validation-complete\">\n    {{ 'requiredFieldsComplete' | pluginTranslate: pluginId | async }}\n  </span>\n  <span *ngIf=\"requiredFieldsStatus.mapped < requiredFieldsStatus.total\" class=\"validation-incomplete\">\n    {{ requiredFieldsStatus.mapped }} / {{ requiredFieldsStatus.total }}\n    {{ 'validationSummary' | pluginTranslate: pluginId | async }}\n  </span>\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}.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}\n"] }]
+        }], ctorParameters: () => [{ type: EpistolaPluginService }, { type: i2$2.ProcessLinkStateService }, { type: i0.ChangeDetectorRef }], propDecorators: { save$: [{
                 type: Input
             }], disabled$: [{
                 type: Input
@@ -932,10 +959,10 @@ class CheckJobStatusConfigurationComponent {
             });
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CheckJobStatusConfigurationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: CheckJobStatusConfigurationComponent, isStandalone: true, selector: "epistola-check-job-status-configuration", inputs: { save$: "save$", disabled$: "disabled$", pluginId: "pluginId", prefillConfiguration$: "prefillConfiguration$" }, outputs: { valid: "valid", configuration: "configuration" }, ngImport: i0, template: "<v-form\n    (valueChange)=\"formValueChange($event)\"\n    *ngIf=\"{\n      disabled: safeDisabled$ | async,\n      prefill: prefillConfiguration$ ? (prefillConfiguration$ | async) : null\n    } as obs\"\n>\n  <v-input\n    name=\"requestIdVariable\"\n    [title]=\"'requestIdVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'requestIdVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.requestIdVariable || 'epistolaRequestId'\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"statusVariable\"\n    [title]=\"'statusVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'statusVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.statusVariable || 'epistolaStatus'\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"documentIdVariable\"\n    [title]=\"'documentIdVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'documentIdVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.documentIdVariable || 'epistolaDocumentId'\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"false\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"errorMessageVariable\"\n    [title]=\"'errorMessageVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'errorMessageVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.errorMessageVariable || 'epistolaErrorMessage'\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"false\"\n  >\n  </v-input>\n</v-form>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: PluginTranslatePipeModule }, { kind: "pipe", type: i2$1.PluginTranslatePipe, name: "pluginTranslate" }, { kind: "ngmodule", type: FormModule }, { kind: "component", type: i3.FormComponent, selector: "v-form", inputs: ["className"], outputs: ["valueChange"] }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i3.InputComponent, selector: "v-input", inputs: ["name", "type", "title", "titleTranslationKey", "defaultValue", "widthPx", "fullWidth", "margin", "smallMargin", "disabled", "step", "min", "maxLength", "tooltip", "required", "hideNumberSpinBox", "smallLabel", "rows", "clear$", "carbonTheme", "placeholder", "dataTestId", "trim", "presetsTitle", "presetOptions"], outputs: ["valueChange"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: CheckJobStatusConfigurationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: CheckJobStatusConfigurationComponent, isStandalone: true, selector: "epistola-check-job-status-configuration", inputs: { save$: "save$", disabled$: "disabled$", pluginId: "pluginId", prefillConfiguration$: "prefillConfiguration$" }, outputs: { valid: "valid", configuration: "configuration" }, ngImport: i0, template: "<v-form\n    (valueChange)=\"formValueChange($event)\"\n    *ngIf=\"{\n      disabled: safeDisabled$ | async,\n      prefill: prefillConfiguration$ ? (prefillConfiguration$ | async) : null\n    } as obs\"\n>\n  <v-input\n    name=\"requestIdVariable\"\n    [title]=\"'requestIdVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'requestIdVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.requestIdVariable || 'epistolaRequestId'\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"statusVariable\"\n    [title]=\"'statusVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'statusVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.statusVariable || 'epistolaStatus'\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"documentIdVariable\"\n    [title]=\"'documentIdVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'documentIdVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.documentIdVariable || 'epistolaDocumentId'\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"false\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"errorMessageVariable\"\n    [title]=\"'errorMessageVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'errorMessageVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.errorMessageVariable || 'epistolaErrorMessage'\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"false\"\n  >\n  </v-input>\n</v-form>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: PluginTranslatePipeModule }, { kind: "pipe", type: i2$1.PluginTranslatePipe, name: "pluginTranslate" }, { kind: "ngmodule", type: FormModule }, { kind: "component", type: i3.FormComponent, selector: "v-form", inputs: ["className"], outputs: ["valueChange"] }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i3.InputComponent, selector: "v-input", inputs: ["name", "type", "title", "titleTranslationKey", "defaultValue", "widthPx", "fullWidth", "margin", "smallMargin", "disabled", "step", "min", "maxLength", "tooltip", "required", "hideNumberSpinBox", "smallLabel", "rows", "clear$", "carbonTheme", "placeholder", "dataTestId", "trim", "presetsTitle", "presetOptions"], outputs: ["valueChange"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CheckJobStatusConfigurationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: CheckJobStatusConfigurationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'epistola-check-job-status-configuration', standalone: true, imports: [CommonModule, PluginTranslatePipeModule, FormModule, InputModule], template: "<v-form\n    (valueChange)=\"formValueChange($event)\"\n    *ngIf=\"{\n      disabled: safeDisabled$ | async,\n      prefill: prefillConfiguration$ ? (prefillConfiguration$ | async) : null\n    } as obs\"\n>\n  <v-input\n    name=\"requestIdVariable\"\n    [title]=\"'requestIdVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'requestIdVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.requestIdVariable || 'epistolaRequestId'\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"statusVariable\"\n    [title]=\"'statusVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'statusVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.statusVariable || 'epistolaStatus'\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"documentIdVariable\"\n    [title]=\"'documentIdVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'documentIdVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.documentIdVariable || 'epistolaDocumentId'\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"false\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"errorMessageVariable\"\n    [title]=\"'errorMessageVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'errorMessageVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.errorMessageVariable || 'epistolaErrorMessage'\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"false\"\n  >\n  </v-input>\n</v-form>\n" }]
         }], propDecorators: { save$: [{
@@ -992,10 +1019,10 @@ class DownloadDocumentConfigurationComponent {
             });
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DownloadDocumentConfigurationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: DownloadDocumentConfigurationComponent, isStandalone: true, selector: "epistola-download-document-configuration", inputs: { save$: "save$", disabled$: "disabled$", pluginId: "pluginId", prefillConfiguration$: "prefillConfiguration$" }, outputs: { valid: "valid", configuration: "configuration" }, ngImport: i0, template: "<v-form\n    (valueChange)=\"formValueChange($event)\"\n    *ngIf=\"{\n      disabled: safeDisabled$ | async,\n      prefill: prefillConfiguration$ ? (prefillConfiguration$ | async) : null\n    } as obs\"\n>\n  <v-input\n    name=\"documentIdVariable\"\n    [title]=\"'documentIdVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'documentIdVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.documentIdVariable || 'epistolaDocumentId'\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"contentVariable\"\n    [title]=\"'contentVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'contentVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.contentVariable || 'documentContent'\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-input>\n</v-form>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: PluginTranslatePipeModule }, { kind: "pipe", type: i2$1.PluginTranslatePipe, name: "pluginTranslate" }, { kind: "ngmodule", type: FormModule }, { kind: "component", type: i3.FormComponent, selector: "v-form", inputs: ["className"], outputs: ["valueChange"] }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i3.InputComponent, selector: "v-input", inputs: ["name", "type", "title", "titleTranslationKey", "defaultValue", "widthPx", "fullWidth", "margin", "smallMargin", "disabled", "step", "min", "maxLength", "tooltip", "required", "hideNumberSpinBox", "smallLabel", "rows", "clear$", "carbonTheme", "placeholder", "dataTestId", "trim", "presetsTitle", "presetOptions"], outputs: ["valueChange"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DownloadDocumentConfigurationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: DownloadDocumentConfigurationComponent, isStandalone: true, selector: "epistola-download-document-configuration", inputs: { save$: "save$", disabled$: "disabled$", pluginId: "pluginId", prefillConfiguration$: "prefillConfiguration$" }, outputs: { valid: "valid", configuration: "configuration" }, ngImport: i0, template: "<v-form\n    (valueChange)=\"formValueChange($event)\"\n    *ngIf=\"{\n      disabled: safeDisabled$ | async,\n      prefill: prefillConfiguration$ ? (prefillConfiguration$ | async) : null\n    } as obs\"\n>\n  <v-input\n    name=\"documentIdVariable\"\n    [title]=\"'documentIdVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'documentIdVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.documentIdVariable || 'epistolaDocumentId'\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"contentVariable\"\n    [title]=\"'contentVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'contentVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.contentVariable || 'documentContent'\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-input>\n</v-form>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: PluginTranslatePipeModule }, { kind: "pipe", type: i2$1.PluginTranslatePipe, name: "pluginTranslate" }, { kind: "ngmodule", type: FormModule }, { kind: "component", type: i3.FormComponent, selector: "v-form", inputs: ["className"], outputs: ["valueChange"] }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i3.InputComponent, selector: "v-input", inputs: ["name", "type", "title", "titleTranslationKey", "defaultValue", "widthPx", "fullWidth", "margin", "smallMargin", "disabled", "step", "min", "maxLength", "tooltip", "required", "hideNumberSpinBox", "smallLabel", "rows", "clear$", "carbonTheme", "placeholder", "dataTestId", "trim", "presetsTitle", "presetOptions"], outputs: ["valueChange"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DownloadDocumentConfigurationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DownloadDocumentConfigurationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'epistola-download-document-configuration', standalone: true, imports: [CommonModule, PluginTranslatePipeModule, FormModule, InputModule], template: "<v-form\n    (valueChange)=\"formValueChange($event)\"\n    *ngIf=\"{\n      disabled: safeDisabled$ | async,\n      prefill: prefillConfiguration$ ? (prefillConfiguration$ | async) : null\n    } as obs\"\n>\n  <v-input\n    name=\"documentIdVariable\"\n    [title]=\"'documentIdVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'documentIdVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.documentIdVariable || 'epistolaDocumentId'\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"contentVariable\"\n    [title]=\"'contentVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'contentVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.contentVariable || 'documentContent'\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-input>\n</v-form>\n" }]
         }], propDecorators: { save$: [{
@@ -1057,8 +1084,8 @@ class EpistolaDownloadComponent {
             },
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EpistolaDownloadComponent, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: EpistolaDownloadComponent, isStandalone: true, selector: "epistola-download-component", inputs: { value: "value", disabled: "disabled", filename: "filename", label: "label" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaDownloadComponent, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: EpistolaDownloadComponent, isStandalone: true, selector: "epistola-download-component", inputs: { value: "value", disabled: "disabled", filename: "filename", label: "label" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: `
     <button
       type="button"
       class="btn btn-outline-primary"
@@ -1071,7 +1098,7 @@ class EpistolaDownloadComponent {
     <span *ngIf="error" class="text-danger ml-2">{{ error }}</span>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EpistolaDownloadComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaDownloadComponent, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
@@ -1102,9 +1129,620 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                 type: Input
             }] } });
 
+class EpistolaRetryFormComponent {
+    epistolaPluginService;
+    formIoStateService;
+    cdr;
+    http;
+    sanitizer;
+    configService;
+    value;
+    valueChange = new EventEmitter();
+    disabled = false;
+    label = 'Document Data';
+    sourceActivityId;
+    formDefinition;
+    submission;
+    loading = true;
+    error = null;
+    previewUrl = null;
+    previewLoading = false;
+    previewError = null;
+    previewExpanded = false;
+    loaded = false;
+    loadSubscription;
+    previewSubscription;
+    previewSubject = new Subject();
+    currentBlobUrl = null;
+    resolvedSourceActivityId;
+    processDefinitionKey;
+    apiEndpoint;
+    formOptions = {
+        noAlerts: true,
+        buttonSettings: { showCancel: false, showSubmit: false, showPrevious: false, showNext: false }
+    };
+    constructor(epistolaPluginService, formIoStateService, cdr, http, sanitizer, configService) {
+        this.epistolaPluginService = epistolaPluginService;
+        this.formIoStateService = formIoStateService;
+        this.cdr = cdr;
+        this.http = http;
+        this.sanitizer = sanitizer;
+        this.configService = configService;
+        this.apiEndpoint = `${this.configService.config.valtimoApi.endpointUri}v1/plugin/epistola`;
+        // Debounce preview calls
+        this.previewSubscription = this.previewSubject.pipe(debounceTime(1500)).subscribe(data => {
+            this.loadPreview(data);
+        });
+    }
+    ngOnChanges(changes) {
+        if (!this.loaded) {
+            this.loaded = true;
+            this.loadForm();
+        }
+    }
+    ngOnDestroy() {
+        this.loadSubscription?.unsubscribe();
+        this.previewSubscription?.unsubscribe();
+        if (this.currentBlobUrl) {
+            URL.revokeObjectURL(this.currentBlobUrl);
+        }
+    }
+    togglePreview() {
+        this.previewExpanded = !this.previewExpanded;
+        this.cdr.markForCheck();
+    }
+    onFormChange(event) {
+        if (event?.data) {
+            const json = JSON.stringify(event.data);
+            this.value = json; // Formio reads element.value on change event
+            this.valueChange.emit(json);
+            // Trigger debounced preview
+            this.previewSubject.next(event.data);
+        }
+    }
+    loadPreview(formData) {
+        const documentId = this.formIoStateService.documentId;
+        const processInstanceId = this.formIoStateService.processInstanceId;
+        if (!documentId || !processInstanceId)
+            return;
+        this.previewLoading = true;
+        this.previewError = null;
+        this.cdr.markForCheck();
+        // Revoke previous blob URL to prevent memory leaks
+        if (this.currentBlobUrl) {
+            URL.revokeObjectURL(this.currentBlobUrl);
+            this.currentBlobUrl = null;
+        }
+        this.http.post(`${this.apiEndpoint}/preview`, {
+            documentId,
+            processInstanceId,
+            sourceActivityId: this.sourceActivityId || null,
+            overrides: formData
+        }, { responseType: 'blob' }).subscribe({
+            next: (blob) => {
+                this.currentBlobUrl = URL.createObjectURL(blob);
+                this.previewUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.currentBlobUrl);
+                this.previewError = null;
+                this.previewLoading = false;
+                this.cdr.markForCheck();
+            },
+            error: (err) => {
+                this.previewUrl = null;
+                // Try to extract error message from JSON response body
+                if (err.error instanceof Blob) {
+                    err.error.text().then((text) => {
+                        try {
+                            const body = JSON.parse(text);
+                            this.previewError = body.details || body.error || 'Preview could not be generated';
+                        }
+                        catch {
+                            this.previewError = 'Preview could not be generated';
+                        }
+                        this.previewLoading = false;
+                        this.cdr.markForCheck();
+                    });
+                }
+                else {
+                    this.previewError = err.error?.error || 'Preview could not be generated';
+                    this.previewLoading = false;
+                    this.cdr.markForCheck();
+                }
+            }
+        });
+    }
+    loadForm() {
+        const processInstanceId = this.formIoStateService.processInstanceId;
+        const documentId = this.formIoStateService.documentId;
+        if (!processInstanceId) {
+            this.error = 'Could not determine process instance ID.';
+            this.loading = false;
+            this.cdr.markForCheck();
+            return;
+        }
+        this.loadSubscription = this.epistolaPluginService.getRetryForm(processInstanceId, documentId ?? undefined, this.sourceActivityId).subscribe({
+            next: (form) => {
+                this.formDefinition = form;
+                if (this.value) {
+                    try {
+                        this.submission = { data: JSON.parse(this.value) };
+                    }
+                    catch {
+                        // value is not valid JSON, start fresh
+                    }
+                }
+                this.loading = false;
+                this.cdr.markForCheck();
+            },
+            error: (err) => {
+                console.error('Failed to load retry form', err);
+                this.error = 'Failed to load the retry form. Please try again.';
+                this.loading = false;
+                this.cdr.markForCheck();
+            }
+        });
+    }
+    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 ɵ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>
+    <div *ngIf="formDefinition && !loading" class="epistola-retry-container" [class.preview-expanded]="previewExpanded">
+      <div class="epistola-retry-form" [hidden]="previewExpanded">
+        <formio
+          [form]="formDefinition"
+          [submission]="submission"
+          (change)="onFormChange($event)"
+          [options]="formOptions"
+        ></formio>
+      </div>
+      <div class="epistola-retry-preview">
+        <div class="preview-header">
+          <span>Preview</span>
+          <button type="button" class="preview-toggle" (click)="togglePreview()">
+            {{ previewExpanded ? 'Show form' : 'Expand' }}
+          </button>
+        </div>
+        <div *ngIf="previewLoading" class="preview-loading">Generating preview...</div>
+        <object *ngIf="previewUrl && !previewLoading" [data]="previewUrl" type="application/pdf" class="preview-pdf">
+          PDF preview not supported in this browser.
+        </object>
+        <div *ngIf="previewError" class="preview-error">{{ previewError }}</div>
+        <div *ngIf="!previewUrl && !previewLoading && !previewError" class="preview-empty">
+          Edit fields to see a preview
+        </div>
+      </div>
+    </div>
+  `, isInline: true, styles: [".epistola-retry-loading{padding:1rem;color:#6c757d}.epistola-retry-error{padding:.5rem;color:#dc3545}.epistola-retry-container{display:flex;gap:1rem}.epistola-retry-form{flex:2;min-width:0}.epistola-retry-preview{flex:1;min-width:0;border:1px solid #dee2e6;border-radius:4px;padding:1rem;background:#f8f9fa;display:flex;flex-direction:column}.preview-expanded .epistola-retry-preview{flex:1}.preview-header{display:flex;justify-content:space-between;align-items:center;font-weight:700;margin-bottom:.5rem;color:#495057}.preview-toggle{background:none;border:1px solid #6c757d;border-radius:4px;color:#6c757d;padding:.2rem .5rem;font-size:.75rem;cursor:pointer}.preview-toggle:hover{background:#e9ecef}.preview-loading{color:#6c757d;font-style:italic}.preview-pdf{width:100%;flex:1;min-height:500px}.preview-expanded .preview-pdf{min-height:80vh}.preview-error{color:#dc3545}.preview-empty{color:#6c757d;font-style:italic}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormioModule }, { kind: "component", type: i7.FormioComponent, selector: "formio" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaRetryFormComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [CommonModule, FormioModule], selector: 'epistola-retry-form-component', changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div *ngIf="loading" class="epistola-retry-loading">Loading form...</div>
+    <div *ngIf="error" class="epistola-retry-error">{{ error }}</div>
+    <div *ngIf="formDefinition && !loading" class="epistola-retry-container" [class.preview-expanded]="previewExpanded">
+      <div class="epistola-retry-form" [hidden]="previewExpanded">
+        <formio
+          [form]="formDefinition"
+          [submission]="submission"
+          (change)="onFormChange($event)"
+          [options]="formOptions"
+        ></formio>
+      </div>
+      <div class="epistola-retry-preview">
+        <div class="preview-header">
+          <span>Preview</span>
+          <button type="button" class="preview-toggle" (click)="togglePreview()">
+            {{ previewExpanded ? 'Show form' : 'Expand' }}
+          </button>
+        </div>
+        <div *ngIf="previewLoading" class="preview-loading">Generating preview...</div>
+        <object *ngIf="previewUrl && !previewLoading" [data]="previewUrl" type="application/pdf" class="preview-pdf">
+          PDF preview not supported in this browser.
+        </object>
+        <div *ngIf="previewError" class="preview-error">{{ previewError }}</div>
+        <div *ngIf="!previewUrl && !previewLoading && !previewError" class="preview-empty">
+          Edit fields to see a preview
+        </div>
+      </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: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], disabled: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], sourceActivityId: [{
+                type: Input
+            }] } });
+
+class EpistolaPreviewButtonComponent {
+    http;
+    sanitizer;
+    configService;
+    value;
+    valueChange = new EventEmitter();
+    disabled = false;
+    label = 'Preview PDF';
+    modalOpen = false;
+    loading = false;
+    previewLoading = false;
+    previewError = null;
+    previewUrl = null;
+    currentBlobUrl = null;
+    apiEndpoint;
+    get buttonLabel() {
+        return this.label || 'Preview PDF';
+    }
+    constructor(http, sanitizer, configService) {
+        this.http = http;
+        this.sanitizer = sanitizer;
+        this.configService = configService;
+        this.apiEndpoint = `${this.configService.config.valtimoApi.endpointUri}v1/plugin/epistola`;
+    }
+    ngOnDestroy() {
+        this.revokeBlobUrl();
+    }
+    hasRequiredData() {
+        return !!(this.value?.documentId && this.value?.tenantId);
+    }
+    openPreview() {
+        if (!this.hasRequiredData() || this.loading)
+            return;
+        this.modalOpen = true;
+        this.previewLoading = true;
+        this.previewError = null;
+        this.revokeBlobUrl();
+        const { documentId, tenantId } = this.value;
+        const url = `${this.apiEndpoint}/documents/${encodeURIComponent(documentId)}/download`
+            + `?tenantId=${encodeURIComponent(tenantId)}`
+            + `&filename=preview.pdf`;
+        this.http.get(url, { responseType: 'blob' }).subscribe({
+            next: (blob) => {
+                this.currentBlobUrl = URL.createObjectURL(blob);
+                this.previewUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.currentBlobUrl);
+                this.previewLoading = false;
+            },
+            error: () => {
+                this.previewError = 'Could not load the document.';
+                this.previewLoading = false;
+            }
+        });
+    }
+    closePreview() {
+        this.modalOpen = false;
+        this.revokeBlobUrl();
+        this.previewUrl = null;
+        this.previewError = null;
+    }
+    revokeBlobUrl() {
+        if (this.currentBlobUrl) {
+            URL.revokeObjectURL(this.currentBlobUrl);
+            this.currentBlobUrl = null;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaPreviewButtonComponent, deps: [{ token: i1.HttpClient }, { token: i4$1.DomSanitizer }, { token: i2.ConfigService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: EpistolaPreviewButtonComponent, isStandalone: true, selector: "epistola-preview-button-component", inputs: { value: "value", disabled: "disabled", label: "label" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: `
+    <button
+      type="button"
+      class="btn btn-outline-secondary"
+      [disabled]="disabled || loading || !hasRequiredData()"
+      (click)="openPreview()"
+    >
+      <i class="mdi mdi-eye mr-1"></i>
+      {{ loading ? 'Loading...' : buttonLabel }}
+    </button>
+
+    <div *ngIf="modalOpen" class="preview-modal-overlay" (click)="closePreview()">
+      <div class="preview-modal-content" (click)="$event.stopPropagation()">
+        <div class="preview-modal-header">
+          <span>Document Preview</span>
+          <button type="button" class="preview-modal-close" (click)="closePreview()">&times;</button>
+        </div>
+        <div class="preview-modal-body">
+          <div *ngIf="previewLoading" class="preview-loading">Generating preview...</div>
+          <div *ngIf="previewError" class="preview-error">{{ previewError }}</div>
+          <object
+            *ngIf="previewUrl && !previewLoading"
+            [data]="previewUrl"
+            type="application/pdf"
+            class="preview-pdf"
+          >
+            PDF preview is not supported in this browser.
+          </object>
+        </div>
+      </div>
+    </div>
+  `, isInline: true, styles: [".preview-modal-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:10000}.preview-modal-content{background:#fff;border-radius:8px;width:90vw;height:90vh;max-width:1200px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 8px 32px #0000004d}.preview-modal-header{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;border-bottom:1px solid #dee2e6;font-weight:700;font-size:1rem}.preview-modal-close{background:none;border:none;font-size:1.5rem;cursor:pointer;color:#6c757d;line-height:1;padding:0 .25rem}.preview-modal-close:hover{color:#333}.preview-modal-body{flex:1;overflow:hidden;display:flex;flex-direction:column}.preview-loading,.preview-error{padding:2rem;text-align:center}.preview-error{color:#dc3545}.preview-pdf{width:100%;flex:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaPreviewButtonComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [CommonModule], selector: 'epistola-preview-button-component', template: `
+    <button
+      type="button"
+      class="btn btn-outline-secondary"
+      [disabled]="disabled || loading || !hasRequiredData()"
+      (click)="openPreview()"
+    >
+      <i class="mdi mdi-eye mr-1"></i>
+      {{ loading ? 'Loading...' : buttonLabel }}
+    </button>
+
+    <div *ngIf="modalOpen" class="preview-modal-overlay" (click)="closePreview()">
+      <div class="preview-modal-content" (click)="$event.stopPropagation()">
+        <div class="preview-modal-header">
+          <span>Document Preview</span>
+          <button type="button" class="preview-modal-close" (click)="closePreview()">&times;</button>
+        </div>
+        <div class="preview-modal-body">
+          <div *ngIf="previewLoading" class="preview-loading">Generating preview...</div>
+          <div *ngIf="previewError" class="preview-error">{{ previewError }}</div>
+          <object
+            *ngIf="previewUrl && !previewLoading"
+            [data]="previewUrl"
+            type="application/pdf"
+            class="preview-pdf"
+          >
+            PDF preview is not supported in this browser.
+          </object>
+        </div>
+      </div>
+    </div>
+  `, styles: [".preview-modal-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:10000}.preview-modal-content{background:#fff;border-radius:8px;width:90vw;height:90vh;max-width:1200px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 8px 32px #0000004d}.preview-modal-header{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;border-bottom:1px solid #dee2e6;font-weight:700;font-size:1rem}.preview-modal-close{background:none;border:none;font-size:1.5rem;cursor:pointer;color:#6c757d;line-height:1;padding:0 .25rem}.preview-modal-close:hover{color:#333}.preview-modal-body{flex:1;overflow:hidden;display:flex;flex-direction:column}.preview-loading,.preview-error{padding:2rem;text-align:center}.preview-error{color:#dc3545}.preview-pdf{width:100%;flex:1}\n"] }]
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: i4$1.DomSanitizer }, { type: i2.ConfigService }], propDecorators: { value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], disabled: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }] } });
+
+class EpistolaDocumentPreviewComponent {
+    epistolaPluginService;
+    http;
+    sanitizer;
+    configService;
+    formIoStateService;
+    cdr;
+    value;
+    valueChange = new EventEmitter();
+    disabled = false;
+    label = 'Document Preview';
+    sources = [];
+    selectedIndex = 0;
+    discovering = false;
+    loading = false;
+    error = null;
+    previewUrl = null;
+    initialized = false;
+    currentBlobUrl = null;
+    discoverSubscription;
+    previewSubscription;
+    apiEndpoint;
+    constructor(epistolaPluginService, http, sanitizer, configService, formIoStateService, cdr) {
+        this.epistolaPluginService = epistolaPluginService;
+        this.http = http;
+        this.sanitizer = sanitizer;
+        this.configService = configService;
+        this.formIoStateService = formIoStateService;
+        this.cdr = cdr;
+        this.apiEndpoint = `${this.configService.config.valtimoApi.endpointUri}v1/plugin/epistola`;
+    }
+    ngOnChanges(changes) {
+        if (!this.initialized) {
+            this.initialized = true;
+            this.discoverSources();
+        }
+    }
+    ngOnDestroy() {
+        this.discoverSubscription?.unsubscribe();
+        this.previewSubscription?.unsubscribe();
+        this.revokeBlobUrl();
+    }
+    onSourceChange(event) {
+        this.selectedIndex = +event.target.value;
+        this.loadPreview();
+    }
+    refresh() {
+        this.loadPreview();
+    }
+    discoverSources() {
+        const documentId = this.formIoStateService.documentId;
+        if (!documentId) {
+            this.error = 'Could not determine document ID from context.';
+            this.cdr.markForCheck();
+            return;
+        }
+        this.discovering = true;
+        this.error = null;
+        this.cdr.markForCheck();
+        this.discoverSubscription = this.epistolaPluginService.getPreviewSources(documentId).subscribe({
+            next: (sources) => {
+                this.sources = sources;
+                this.discovering = false;
+                this.cdr.markForCheck();
+                if (sources.length > 0) {
+                    this.selectedIndex = 0;
+                    this.loadPreview();
+                }
+            },
+            error: (err) => {
+                this.error = err.error?.error || 'Failed to discover preview sources';
+                this.discovering = false;
+                this.cdr.markForCheck();
+            }
+        });
+    }
+    loadPreview() {
+        const source = this.sources[this.selectedIndex];
+        if (!source)
+            return;
+        const documentId = this.formIoStateService.documentId;
+        if (!documentId)
+            return;
+        this.loading = true;
+        this.error = null;
+        this.cdr.markForCheck();
+        this.revokeBlobUrl();
+        this.previewSubscription?.unsubscribe();
+        this.previewSubscription = this.http.post(`${this.apiEndpoint}/preview`, {
+            documentId,
+            processInstanceId: source.processInstanceId,
+            sourceActivityId: source.activityId,
+            overrides: null
+        }, {
+            responseType: 'blob',
+            headers: new HttpHeaders().set('X-Skip-Interceptor', '422')
+        }).subscribe({
+            next: (blob) => {
+                this.currentBlobUrl = URL.createObjectURL(blob);
+                this.previewUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.currentBlobUrl);
+                this.error = null;
+                this.loading = false;
+                this.cdr.markForCheck();
+            },
+            error: (err) => {
+                this.previewUrl = null;
+                if (err.error instanceof Blob) {
+                    err.error.text().then((text) => {
+                        try {
+                            const body = JSON.parse(text);
+                            this.error = body.details || body.error || 'Preview could not be generated';
+                        }
+                        catch {
+                            this.error = 'Preview could not be generated';
+                        }
+                        this.loading = false;
+                        this.cdr.markForCheck();
+                    });
+                }
+                else {
+                    this.error = err.error?.error || 'Preview could not be generated';
+                    this.loading = false;
+                    this.cdr.markForCheck();
+                }
+            }
+        });
+    }
+    revokeBlobUrl() {
+        if (this.currentBlobUrl) {
+            URL.revokeObjectURL(this.currentBlobUrl);
+            this.currentBlobUrl = null;
+            this.previewUrl = null;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: 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">
+      <div class="preview-header">
+        <span>{{ label || 'Document Preview' }}</span>
+        <div class="preview-controls">
+          <select
+            *ngIf="sources.length > 1"
+            class="preview-select"
+            [value]="selectedIndex"
+            (change)="onSourceChange($event)"
+          >
+            <option *ngFor="let source of sources; let i = index" [value]="i">
+              {{ source.templateName }} ({{ source.activityId }})
+            </option>
+          </select>
+          <button type="button" class="preview-refresh" [disabled]="loading || discovering" (click)="refresh()">
+            <i class="mdi mdi-refresh mr-1"></i>
+            {{ loading ? 'Generating...' : 'Refresh' }}
+          </button>
+        </div>
+      </div>
+      <div class="preview-body">
+        <div *ngIf="discovering" class="preview-loading">
+          Discovering documents...
+        </div>
+        <div *ngIf="loading && !discovering" class="preview-loading">
+          Generating preview...
+        </div>
+        <div *ngIf="error && !loading && !discovering" class="preview-unavailable">
+          <i class="mdi mdi-information-outline"></i>
+          Preview is niet beschikbaar — niet alle gegevens zijn al ingevuld.
+        </div>
+        <object
+          *ngIf="previewUrl && !loading && !discovering"
+          [data]="previewUrl"
+          type="application/pdf"
+          class="preview-pdf"
+        >
+          PDF preview is not supported in this browser.
+        </object>
+        <div *ngIf="!previewUrl && !loading && !discovering && !error && sources.length === 0" class="preview-empty">
+          No previewable documents found
+        </div>
+      </div>
+    </div>
+  `, isInline: true, styles: [".epistola-preview-panel{border:1px solid #dee2e6;border-radius:4px;background:#f8f9fa;display:flex;flex-direction:column}.preview-header{display:flex;justify-content:space-between;align-items:center;padding:.5rem 1rem;border-bottom:1px solid #dee2e6;font-weight:700;color:#495057;flex-wrap:wrap;gap:.5rem}.preview-controls{display:flex;align-items:center;gap:.5rem}.preview-select{border:1px solid #ced4da;border-radius:4px;padding:.25rem .5rem;font-size:.8rem;background:#fff;max-width:300px}.preview-refresh{background:none;border:1px solid #6c757d;border-radius:4px;color:#6c757d;padding:.25rem .75rem;font-size:.8rem;cursor:pointer;display:flex;align-items:center;white-space:nowrap}.preview-refresh:hover:not(:disabled){background:#e9ecef}.preview-refresh:disabled{opacity:.5;cursor:not-allowed}.preview-body{display:flex;flex-direction:column;min-height:500px}.preview-loading{padding:2rem;text-align:center;color:#6c757d;font-style:italic}.preview-unavailable{padding:1.5rem;text-align:center;color:#6c757d;font-style:italic}.preview-unavailable i{margin-right:.25rem}.preview-pdf{width:100%;flex:1;min-height:500px}.preview-empty{padding:2rem;text-align:center;color:#6c757d;font-style:italic}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+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">
+      <div class="preview-header">
+        <span>{{ label || 'Document Preview' }}</span>
+        <div class="preview-controls">
+          <select
+            *ngIf="sources.length > 1"
+            class="preview-select"
+            [value]="selectedIndex"
+            (change)="onSourceChange($event)"
+          >
+            <option *ngFor="let source of sources; let i = index" [value]="i">
+              {{ source.templateName }} ({{ source.activityId }})
+            </option>
+          </select>
+          <button type="button" class="preview-refresh" [disabled]="loading || discovering" (click)="refresh()">
+            <i class="mdi mdi-refresh mr-1"></i>
+            {{ loading ? 'Generating...' : 'Refresh' }}
+          </button>
+        </div>
+      </div>
+      <div class="preview-body">
+        <div *ngIf="discovering" class="preview-loading">
+          Discovering documents...
+        </div>
+        <div *ngIf="loading && !discovering" class="preview-loading">
+          Generating preview...
+        </div>
+        <div *ngIf="error && !loading && !discovering" class="preview-unavailable">
+          <i class="mdi mdi-information-outline"></i>
+          Preview is niet beschikbaar — niet alle gegevens zijn al ingevuld.
+        </div>
+        <object
+          *ngIf="previewUrl && !loading && !discovering"
+          [data]="previewUrl"
+          type="application/pdf"
+          class="preview-pdf"
+        >
+          PDF preview is not supported in this browser.
+        </object>
+        <div *ngIf="!previewUrl && !loading && !discovering && !error && sources.length === 0" class="preview-empty">
+          No previewable documents found
+        </div>
+      </div>
+    </div>
+  `, styles: [".epistola-preview-panel{border:1px solid #dee2e6;border-radius:4px;background:#f8f9fa;display:flex;flex-direction:column}.preview-header{display:flex;justify-content:space-between;align-items:center;padding:.5rem 1rem;border-bottom:1px solid #dee2e6;font-weight:700;color:#495057;flex-wrap:wrap;gap:.5rem}.preview-controls{display:flex;align-items:center;gap:.5rem}.preview-select{border:1px solid #ced4da;border-radius:4px;padding:.25rem .5rem;font-size:.8rem;background:#fff;max-width:300px}.preview-refresh{background:none;border:1px solid #6c757d;border-radius:4px;color:#6c757d;padding:.25rem .75rem;font-size:.8rem;cursor:pointer;display:flex;align-items:center;white-space:nowrap}.preview-refresh:hover:not(:disabled){background:#e9ecef}.preview-refresh:disabled{opacity:.5;cursor:not-allowed}.preview-body{display:flex;flex-direction:column;min-height:500px}.preview-loading{padding:2rem;text-align:center;color:#6c757d;font-style:italic}.preview-unavailable{padding:1.5rem;text-align:center;color:#6c757d;font-style:italic}.preview-unavailable i{margin-right:.25rem}.preview-pdf{width:100%;flex:1;min-height:500px}.preview-empty{padding:2rem;text-align:center;color:#6c757d;font-style:italic}\n"] }]
+        }], ctorParameters: () => [{ type: EpistolaPluginService }, { type: i1.HttpClient }, { type: i4$1.DomSanitizer }, { type: i2.ConfigService }, { type: i3.FormIoStateService }, { type: i0.ChangeDetectorRef }], propDecorators: { value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], disabled: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }] } });
+
 class EpistolaPluginModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EpistolaPluginModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: EpistolaPluginModule, imports: [CommonModule,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaPluginModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.20", ngImport: i0, type: EpistolaPluginModule, imports: [CommonModule,
             HttpClientModule,
             PluginTranslatePipeModule,
             FormModule,
@@ -1116,14 +1754,20 @@ class EpistolaPluginModule {
             DownloadDocumentConfigurationComponent,
             DataMappingTreeComponent,
             FieldTreeComponent,
-            EpistolaDownloadComponent], exports: [EpistolaConfigurationComponent,
+            EpistolaDownloadComponent,
+            EpistolaRetryFormComponent,
+            EpistolaPreviewButtonComponent,
+            EpistolaDocumentPreviewComponent], exports: [EpistolaConfigurationComponent,
             GenerateDocumentConfigurationComponent,
             CheckJobStatusConfigurationComponent,
             DownloadDocumentConfigurationComponent,
             DataMappingTreeComponent,
             FieldTreeComponent,
-            EpistolaDownloadComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EpistolaPluginModule, providers: [
+            EpistolaDownloadComponent,
+            EpistolaRetryFormComponent,
+            EpistolaPreviewButtonComponent,
+            EpistolaDocumentPreviewComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaPluginModule, providers: [
             EpistolaPluginService
         ], imports: [CommonModule,
             HttpClientModule,
@@ -1137,9 +1781,12 @@ class EpistolaPluginModule {
             DownloadDocumentConfigurationComponent,
             DataMappingTreeComponent,
             FieldTreeComponent,
-            EpistolaDownloadComponent] });
+            EpistolaDownloadComponent,
+            EpistolaRetryFormComponent,
+            EpistolaPreviewButtonComponent,
+            EpistolaDocumentPreviewComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EpistolaPluginModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaPluginModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -1155,7 +1802,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                         DownloadDocumentConfigurationComponent,
                         DataMappingTreeComponent,
                         FieldTreeComponent,
-                        EpistolaDownloadComponent
+                        EpistolaDownloadComponent,
+                        EpistolaRetryFormComponent,
+                        EpistolaPreviewButtonComponent,
+                        EpistolaDocumentPreviewComponent
                     ],
                     exports: [
                         EpistolaConfigurationComponent,
@@ -1164,7 +1814,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                         DownloadDocumentConfigurationComponent,
                         DataMappingTreeComponent,
                         FieldTreeComponent,
-                        EpistolaDownloadComponent
+                        EpistolaDownloadComponent,
+                        EpistolaRetryFormComponent,
+                        EpistolaPreviewButtonComponent,
+                        EpistolaDocumentPreviewComponent
                     ],
                     providers: [
                         EpistolaPluginService
@@ -1381,6 +2034,51 @@ function registerEpistolaDownloadComponent(injector) {
     }
 }
 
+const EPISTOLA_RETRY_FORM_OPTIONS = {
+    type: 'epistola-retry-form',
+    selector: 'epistola-retry-form-element',
+    title: 'Epistola Retry Form',
+    group: 'basic',
+    icon: 'refresh',
+    emptyValue: null,
+    fieldOptions: ['sourceActivityId', 'label'], // sourceActivityId is optional (set via BPMN input parameter)
+};
+function registerEpistolaRetryFormComponent(injector) {
+    if (!customElements.get(EPISTOLA_RETRY_FORM_OPTIONS.selector)) {
+        registerCustomFormioComponent(EPISTOLA_RETRY_FORM_OPTIONS, EpistolaRetryFormComponent, injector);
+    }
+}
+
+const EPISTOLA_PREVIEW_BUTTON_OPTIONS = {
+    type: 'epistola-preview-button',
+    selector: 'epistola-preview-button-element',
+    title: 'Epistola Preview',
+    group: 'basic',
+    icon: 'eye',
+    emptyValue: null,
+    fieldOptions: ['label'],
+};
+function registerEpistolaPreviewButtonComponent(injector) {
+    if (!customElements.get(EPISTOLA_PREVIEW_BUTTON_OPTIONS.selector)) {
+        registerCustomFormioComponent(EPISTOLA_PREVIEW_BUTTON_OPTIONS, EpistolaPreviewButtonComponent, injector);
+    }
+}
+
+const EPISTOLA_DOCUMENT_PREVIEW_OPTIONS = {
+    type: 'epistola-document-preview',
+    selector: 'epistola-document-preview-element',
+    title: 'Epistola Document Preview',
+    group: 'basic',
+    icon: 'file-pdf-o',
+    emptyValue: null,
+    fieldOptions: ['label'],
+};
+function registerEpistolaDocumentPreviewComponent(injector) {
+    if (!customElements.get(EPISTOLA_DOCUMENT_PREVIEW_OPTIONS.selector)) {
+        registerCustomFormioComponent(EPISTOLA_DOCUMENT_PREVIEW_OPTIONS, EpistolaDocumentPreviewComponent, injector);
+    }
+}
+
 /*
  * Public API Surface of epistola plugin
  */
@@ -1389,5 +2087,5 @@ function registerEpistolaDownloadComponent(injector) {
  * Generated bundle index. Do not edit.
  */
 
-export { CheckJobStatusConfigurationComponent, DataMappingTreeComponent, DownloadDocumentConfigurationComponent, EPISTOLA_DOWNLOAD_OPTIONS, EpistolaConfigurationComponent, EpistolaDownloadComponent, EpistolaPluginModule, EpistolaPluginService, FieldTreeComponent, GenerateDocumentConfigurationComponent, epistolaPluginSpecification, registerEpistolaDownloadComponent };
+export { CheckJobStatusConfigurationComponent, DataMappingTreeComponent, DownloadDocumentConfigurationComponent, EPISTOLA_DOCUMENT_PREVIEW_OPTIONS, EPISTOLA_DOWNLOAD_OPTIONS, EPISTOLA_PREVIEW_BUTTON_OPTIONS, EPISTOLA_RETRY_FORM_OPTIONS, EpistolaConfigurationComponent, EpistolaDocumentPreviewComponent, EpistolaDownloadComponent, EpistolaPluginModule, EpistolaPluginService, EpistolaPreviewButtonComponent, EpistolaRetryFormComponent, FieldTreeComponent, GenerateDocumentConfigurationComponent, epistolaPluginSpecification, registerEpistolaDocumentPreviewComponent, registerEpistolaDownloadComponent, registerEpistolaPreviewButtonComponent, registerEpistolaRetryFormComponent };
 //# sourceMappingURL=epistola.app-valtimo-plugin.mjs.map