@epistola.app/valtimo-plugin 0.3.0 → 0.3.2

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

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, Output, Input, Component, ChangeDetectionStrategy, NgModule } from '@angular/core';
+import { Injectable, EventEmitter, Output, Input, Component, ChangeDetectionStrategy, forwardRef, ENVIRONMENT_INITIALIZER, inject, Injector, 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,13 +10,26 @@ 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, debounceTime } from 'rxjs/operators';
-import * as i4 from '@angular/forms';
+import { startWith, delay, takeUntil, filter, map, tap, switchMap, catchError, take as take$1, debounceTime } from 'rxjs/operators';
+import * as i2$2 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import * as i2$2 from '@valtimo/process-link';
+import * as i2$3 from '@valtimo/process-link';
 import * as i7 from '@formio/angular';
 import { FormioModule } from '@formio/angular';
-import * as i4$1 from '@angular/platform-browser';
+import * as i4 from '@angular/platform-browser';
+
+function initialResource(empty) {
+    return { data: empty, loading: false, error: null };
+}
+function loadingResource(current) {
+    return { data: current, loading: true, error: null };
+}
+function successResource(data) {
+    return { data, loading: false, error: null };
+}
+function errorResource(current, error) {
+    return { data: current, loading: false, error };
+}
 
 /**
  * Service for interacting with Epistola plugin API endpoints.
@@ -81,6 +94,12 @@ class EpistolaPluginService {
         }
         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).
@@ -217,149 +236,203 @@ function countRequiredMapped(fields, mapping) {
 }
 
 /**
- * Recursive component that renders a single TemplateField node as part of a tree form.
- *
- * - SCALAR fields render as a label + input row with a 3-mode selector (browse / pv / expression)
- * - OBJECT fields render as a collapsible section with children indented inside
- * - ARRAY fields render as a collapsible section with source collection input and optional per-item field mappings
- *
- * Input modes:
- * - Browse (⊞): ValuePathSelector for doc:/case: paths
- * - PV (pv): Dropdown of discovered process variables (text fallback when none found)
- * - Expression (fx): Free-text input for manual expressions
+ * Reusable 3-mode input (browse / pv / expression) for value resolver expressions.
+ * Used by both ScalarFieldComponent and ArrayFieldComponent for source mapping.
  */
-class FieldTreeComponent {
-    field;
-    value = undefined;
-    pluginId;
+class ValueInputComponent {
+    cdr;
+    name = '';
+    value = '';
+    pluginId = '';
     caseDefinitionKey = null;
     processVariables = [];
     disabled = false;
+    placeholder = 'e.g. pv:variableName or doc:path.to.field';
     valueChange = new EventEmitter();
     ValuePathSelectorPrefix = ValuePathSelectorPrefix;
     inputMode = 'browse';
-    expanded = false;
-    /** For ARRAY fields: whether to show per-item field mapping */
-    arrayPerFieldMode = false;
-    /** Completeness badge for collapsed object/array sections */
-    mappedCount = 0;
-    totalRequired = 0;
+    selectedPv = '';
+    browseDefault = '';
+    constructor(cdr) {
+        this.cdr = cdr;
+    }
     ngOnChanges(changes) {
-        if (changes['value'] || changes['field']) {
-            this.updateCompleteness();
-            // Auto-expand if there are unmapped required children
-            if (!this.expanded && this.totalRequired > 0 && this.mappedCount < this.totalRequired) {
-                this.expanded = true;
-            }
+        if (changes['value']) {
+            this.inputMode = this.detectInputMode(this.value);
+            this.browseDefault = normalizeToDots(this.value);
+            this.selectedPv = extractPvName(this.value);
         }
-        // Detect input mode from prefill value
-        if (changes['value'] && this.value != null) {
-            if (this.field?.fieldType === 'SCALAR') {
-                this.inputMode = this.detectInputMode(this.value);
-            }
-            else if (this.field?.fieldType === 'ARRAY') {
-                const sourceValue = this.getSourceValue();
-                if (sourceValue) {
-                    this.inputMode = this.detectInputMode(sourceValue);
-                }
-                // Detect per-field mode from value shape
-                if (typeof this.value === 'object' && this.value !== null && '_source' in this.value) {
-                    this.arrayPerFieldMode = true;
-                }
-            }
+        if (changes['processVariables']) {
+            this.cdr.markForCheck();
         }
     }
-    toggleExpanded() {
-        this.expanded = !this.expanded;
-    }
     setInputMode(mode) {
         this.inputMode = mode;
     }
-    /** Handle value change from ValuePathSelector (browse mode) */
     onBrowseValueChange(newValue) {
-        this.emitScalarValue(newValue);
+        this.valueChange.emit(normalizeToDots(newValue));
     }
-    /** Handle value change from PV dropdown */
     onPvChange(newValue) {
-        if (newValue) {
-            this.emitScalarValue('pv:' + newValue);
-        }
-        else {
-            this.emitScalarValue('');
-        }
+        this.selectedPv = newValue;
+        this.valueChange.emit(newValue ? 'pv:' + newValue : '');
     }
-    /** Handle value change from text input (expression mode) */
     onExpressionValueChange(newValue) {
-        this.emitScalarValue(newValue);
+        this.valueChange.emit(newValue);
     }
-    /** Handle child value change for OBJECT fields */
-    onChildChange(childName, childValue) {
-        const current = (typeof this.value === 'object' && this.value !== null) ? { ...this.value } : {};
-        if (childValue === undefined || childValue === null || childValue === '') {
-            delete current[childName];
-        }
-        else {
-            current[childName] = childValue;
-        }
-        this.valueChange.emit(Object.keys(current).length > 0 ? current : undefined);
+    detectInputMode(value) {
+        if (!value)
+            return 'browse';
+        if (value.startsWith('doc:') || value.startsWith('case:'))
+            return 'browse';
+        if (value.startsWith('pv:'))
+            return 'pv';
+        if (value.length > 0)
+            return 'expression';
+        return 'browse';
     }
-    /** Get the current value for a child field within an OBJECT */
-    getChildValue(childName) {
-        if (typeof this.value === 'object' && this.value !== null) {
-            return this.value[childName];
-        }
-        return undefined;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ValueInputComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: ValueInputComponent, isStandalone: true, selector: "epistola-value-input", inputs: { name: "name", value: "value", pluginId: "pluginId", caseDefinitionKey: "caseDefinitionKey", processVariables: "processVariables", disabled: "disabled", placeholder: "placeholder" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"value-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=\"input-control\" *ngIf=\"inputMode === 'browse'\">\n    <valtimo-value-path-selector\n      [name]=\"name\"\n      [caseDefinitionKey]=\"caseDefinitionKey\"\n      [prefixes]=\"[ValuePathSelectorPrefix.DOC, ValuePathSelectorPrefix.CASE]\"\n      [notation]=\"'dots'\"\n      [disabled]=\"disabled\"\n      [defaultValue]=\"browseDefault\"\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=\"input-control\" *ngIf=\"inputMode === 'pv'\">\n    <select\n      *ngIf=\"processVariables.length > 0; else pvFallback\"\n      class=\"pv-select\"\n      [disabled]=\"disabled\"\n      [(ngModel)]=\"selectedPv\"\n      (ngModelChange)=\"onPvChange($event)\"\n    >\n      <option value=\"\">{{ 'pvPlaceholder' | pluginTranslate: pluginId | async }}</option>\n      <option *ngFor=\"let pv of processVariables\" [value]=\"pv\">{{ pv }}</option>\n    </select>\n    <ng-template #pvFallback>\n      <v-input\n        [name]=\"'pvfb_' + name\"\n        [defaultValue]=\"selectedPv\"\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=\"input-control\" *ngIf=\"inputMode === 'expression'\">\n    <v-input\n      [name]=\"'fx_' + name\"\n      [defaultValue]=\"value\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"placeholder\"\n      (valueChange)=\"onExpressionValueChange($event)\"\n    ></v-input>\n  </div>\n</div>\n", styles: [".value-input{display:flex;align-items:flex-start;gap:.5rem;min-width:0}.value-input ::ng-deep [data-test-id=valuePathSelectorToggle]{display:none!important}.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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PluginTranslatePipeModule }, { kind: "pipe", type: i2$1.PluginTranslatePipe, name: "pluginTranslate" }, { kind: "ngmodule", type: 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.20", ngImport: i0, type: ValueInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'epistola-value-input', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CommonModule,
+                        FormsModule,
+                        PluginTranslatePipeModule,
+                        InputModule,
+                        ValuePathSelectorComponent
+                    ], template: "<div class=\"value-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=\"input-control\" *ngIf=\"inputMode === 'browse'\">\n    <valtimo-value-path-selector\n      [name]=\"name\"\n      [caseDefinitionKey]=\"caseDefinitionKey\"\n      [prefixes]=\"[ValuePathSelectorPrefix.DOC, ValuePathSelectorPrefix.CASE]\"\n      [notation]=\"'dots'\"\n      [disabled]=\"disabled\"\n      [defaultValue]=\"browseDefault\"\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=\"input-control\" *ngIf=\"inputMode === 'pv'\">\n    <select\n      *ngIf=\"processVariables.length > 0; else pvFallback\"\n      class=\"pv-select\"\n      [disabled]=\"disabled\"\n      [(ngModel)]=\"selectedPv\"\n      (ngModelChange)=\"onPvChange($event)\"\n    >\n      <option value=\"\">{{ 'pvPlaceholder' | pluginTranslate: pluginId | async }}</option>\n      <option *ngFor=\"let pv of processVariables\" [value]=\"pv\">{{ pv }}</option>\n    </select>\n    <ng-template #pvFallback>\n      <v-input\n        [name]=\"'pvfb_' + name\"\n        [defaultValue]=\"selectedPv\"\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=\"input-control\" *ngIf=\"inputMode === 'expression'\">\n    <v-input\n      [name]=\"'fx_' + name\"\n      [defaultValue]=\"value\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"placeholder\"\n      (valueChange)=\"onExpressionValueChange($event)\"\n    ></v-input>\n  </div>\n</div>\n", styles: [".value-input{display:flex;align-items:flex-start;gap:.5rem;min-width:0}.value-input ::ng-deep [data-test-id=valuePathSelectorToggle]{display:none!important}.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}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { name: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], pluginId: [{
+                type: Input
+            }], caseDefinitionKey: [{
+                type: Input
+            }], processVariables: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+/** Convert slash-notation paths (e.g. doc:/a/b) to dot notation (doc:a.b). */
+function normalizeToDots(value) {
+    if (typeof value !== 'string')
+        return value;
+    const colonIndex = value.indexOf(':');
+    if (colonIndex < 0)
+        return value;
+    const prefix = value.substring(0, colonIndex);
+    const path = value.substring(colonIndex + 1);
+    if (!path.includes('/'))
+        return value;
+    const normalized = path.split('/').filter(p => p.length > 0).join('.');
+    return `${prefix}:${normalized}`;
+}
+function extractPvName(value) {
+    if (typeof value === 'string' && value.startsWith('pv:')) {
+        return value.substring(3);
     }
-    /** Get the string value for display (for SCALAR leaf inputs and direct array mode) */
-    getStringValue() {
+    return '';
+}
+
+class ScalarFieldComponent {
+    field;
+    value = undefined;
+    pluginId;
+    caseDefinitionKey = null;
+    processVariables = [];
+    disabled = false;
+    valueChange = new EventEmitter();
+    get stringValue() {
         return typeof this.value === 'string' ? this.value : '';
     }
-    /** Get the PV name from a pv: prefixed value (for PV dropdown default selection) */
-    getPvName() {
-        const str = this.getStringValue();
-        return str.startsWith('pv:') ? str.substring(3) : '';
+    onValueChange(newValue) {
+        this.valueChange.emit(newValue || undefined);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ScalarFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: ScalarFieldComponent, isStandalone: true, selector: "epistola-scalar-field", inputs: { field: "field", value: "value", pluginId: "pluginId", caseDefinitionKey: "caseDefinitionKey", processVariables: "processVariables", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"field-row\" [class.field-required-unmapped]=\"field.required && !stringValue\">\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  <epistola-value-input\n    [name]=\"'field_' + field.path\"\n    [value]=\"stringValue\"\n    [pluginId]=\"pluginId\"\n    [caseDefinitionKey]=\"caseDefinitionKey\"\n    [processVariables]=\"processVariables\"\n    [disabled]=\"disabled\"\n    (valueChange)=\"onValueChange($event)\"\n  ></epistola-value-input>\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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: PluginTranslatePipeModule }, { kind: "component", type: ValueInputComponent, selector: "epistola-value-input", inputs: ["name", "value", "pluginId", "caseDefinitionKey", "processVariables", "disabled", "placeholder"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ScalarFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'epistola-scalar-field', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, PluginTranslatePipeModule, ValueInputComponent], template: "<div class=\"field-row\" [class.field-required-unmapped]=\"field.required && !stringValue\">\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  <epistola-value-input\n    [name]=\"'field_' + field.path\"\n    [value]=\"stringValue\"\n    [pluginId]=\"pluginId\"\n    [caseDefinitionKey]=\"caseDefinitionKey\"\n    [processVariables]=\"processVariables\"\n    [disabled]=\"disabled\"\n    (valueChange)=\"onValueChange($event)\"\n  ></epistola-value-input>\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}\n"] }]
+        }], propDecorators: { field: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], pluginId: [{
+                type: Input
+            }], caseDefinitionKey: [{
+                type: Input
+            }], processVariables: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
+class ArrayFieldComponent {
+    field;
+    value = undefined;
+    pluginId;
+    caseDefinitionKey = null;
+    processVariables = [];
+    disabled = false;
+    valueChange = new EventEmitter();
+    expanded = false;
+    arrayPerFieldMode = false;
+    mappedCount = 0;
+    totalRequired = 0;
+    ngOnChanges(changes) {
+        if (changes['value'] || changes['field']) {
+            this.updateCompleteness();
+            if (!this.expanded && this.totalRequired > 0 && this.mappedCount < this.totalRequired) {
+                this.expanded = true;
+            }
+            // Detect per-field mode from value shape
+            if (changes['value'] && typeof this.value === 'object' && this.value !== null && '_source' in this.value) {
+                this.arrayPerFieldMode = true;
+            }
+        }
+    }
+    toggleExpanded() {
+        this.expanded = !this.expanded;
     }
-    // --- ARRAY-specific methods ---
-    /** Get the source collection value (works for both direct string and _source format) */
     getSourceValue() {
         if (typeof this.value === 'string') {
-            return this.value;
+            return normalizeToDots(this.value);
         }
         if (typeof this.value === 'object' && this.value !== null && '_source' in this.value) {
-            return this.value['_source'] || '';
+            return normalizeToDots(this.value['_source'] || '');
         }
         return '';
     }
-    /** Get the PV name from the source value */
-    getSourcePvName() {
-        const source = this.getSourceValue();
-        return source.startsWith('pv:') ? source.substring(3) : '';
+    onSourceValueChange(newValue) {
+        if (this.arrayPerFieldMode) {
+            const current = (typeof this.value === 'object' && this.value !== null) ? { ...this.value } : {};
+            current['_source'] = newValue || '';
+            this.valueChange.emit(current);
+        }
+        else {
+            this.valueChange.emit(newValue || undefined);
+        }
     }
     toggleArrayPerFieldMode() {
         this.arrayPerFieldMode = !this.arrayPerFieldMode;
         if (this.arrayPerFieldMode) {
-            // Switch from direct to per-field: convert string value to _source object
             const currentSource = this.getSourceValue();
-            const obj = { _source: currentSource };
-            this.valueChange.emit(obj);
+            this.valueChange.emit({ _source: currentSource });
         }
         else {
-            // Switch from per-field to direct: extract _source as string value
             const source = this.getSourceValue();
             this.valueChange.emit(source || undefined);
         }
     }
-    /** Handle source collection value change (used in ARRAY mode) */
-    onSourceBrowseChange(newValue) {
-        this.updateSourceValue(newValue);
-    }
-    onSourcePvChange(newValue) {
-        this.updateSourceValue(newValue ? 'pv:' + newValue : '');
-    }
-    onSourceExpressionChange(newValue) {
-        this.updateSourceValue(newValue);
-    }
-    /** Handle per-item field mapping change */
     onItemFieldChange(childName, sourceFieldName) {
         const current = (typeof this.value === 'object' && this.value !== null) ? { ...this.value } : { _source: '' };
         if (sourceFieldName && sourceFieldName.trim().length > 0) {
@@ -370,59 +443,30 @@ class FieldTreeComponent {
         }
         this.valueChange.emit(current);
     }
-    /** Get the current source field name mapping for a child */
     getItemFieldValue(childName) {
         if (typeof this.value === 'object' && this.value !== null) {
             return this.value[childName] || '';
         }
         return '';
     }
-    /** Check if the array has any children that can be mapped per-item */
     hasArrayChildren() {
         return !!(this.field?.children && this.field.children.length > 0);
     }
-    emitScalarValue(newValue) {
-        this.valueChange.emit(newValue || undefined);
-    }
-    updateSourceValue(newValue) {
-        if (this.arrayPerFieldMode) {
-            const current = (typeof this.value === 'object' && this.value !== null) ? { ...this.value } : {};
-            current['_source'] = newValue || '';
-            this.valueChange.emit(current);
-        }
-        else {
-            this.valueChange.emit(newValue || undefined);
-        }
-    }
     updateCompleteness() {
-        if (this.field?.fieldType === 'OBJECT' && this.field.children) {
-            const stats = countRequiredMapped(this.field.children, this.value || {});
-            this.mappedCount = stats.mapped;
-            this.totalRequired = stats.total;
-        }
-        else if (this.field?.fieldType === 'ARRAY') {
-            this.updateArrayCompleteness();
-        }
-    }
-    updateArrayCompleteness() {
         if (!this.field?.children || this.field.children.length === 0) {
-            // No children: just check if source is set
             this.totalRequired = this.field?.required ? 1 : 0;
             this.mappedCount = this.getSourceValue() ? (this.field?.required ? 1 : 0) : 0;
             return;
         }
         if (typeof this.value === 'object' && this.value !== null && '_source' in this.value) {
-            // Per-field mode: count source + required children
             let total = 0;
             let mapped = 0;
-            // Source counts as 1 required
             if (this.field?.required) {
                 total++;
                 if (this.value['_source'] && this.value['_source'].trim().length > 0) {
                     mapped++;
                 }
             }
-            // Count required children
             for (const child of this.field.children) {
                 if (child.required) {
                     total++;
@@ -436,37 +480,87 @@ class FieldTreeComponent {
             this.totalRequired = total;
         }
         else {
-            // Direct mode: just check if source is set
             this.totalRequired = this.field?.required ? 1 : 0;
             this.mappedCount = this.getSourceValue() ? (this.field?.required ? 1 : 0) : 0;
         }
     }
-    detectInputMode(value) {
-        if (typeof value !== 'string')
-            return 'browse';
-        if (value.startsWith('doc:') || value.startsWith('case:'))
-            return 'browse';
-        if (value.startsWith('pv:'))
-            return 'pv';
-        if (value.length > 0)
-            return 'expression';
-        return 'browse';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ArrayFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: ArrayFieldComponent, isStandalone: true, selector: "epistola-array-field", inputs: { field: "field", value: "value", pluginId: "pluginId", caseDefinitionKey: "caseDefinitionKey", processVariables: "processVariables", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: "<div 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      <epistola-value-input\n        [name]=\"'field_' + field.path\"\n        [value]=\"getSourceValue()\"\n        [pluginId]=\"pluginId\"\n        [caseDefinitionKey]=\"caseDefinitionKey\"\n        [processVariables]=\"processVariables\"\n        [disabled]=\"disabled\"\n        (valueChange)=\"onSourceValueChange($event)\"\n      ></epistola-value-input>\n    </div>\n\n    <!-- Per-item field mapping toggle -->\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-array{margin:.25rem 0}.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-array-header:hover{background:#f4f4f4}.field-array-header.field-required-unmapped{border-left-color:#dc3545;background-color:#fff5f5}.field-array-header .expand-icon{flex:0 0 1rem;font-size:.75rem;color:#525252}.field-array-header .field-name{font-weight:500}.field-array-header .field-meta{font-size:.8125rem;color:#6c757d}.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-array-header .mapped-indicator{margin-left:auto;color:#198754;font-weight:600}.field-array-content{padding-left:1.25rem;border-left:1px solid #e0e0e0;margin-left:.5rem}.field-row{display:flex;align-items:flex-start;gap:.75rem;padding:.5rem 0}.field-label{flex:0 0 200px;min-width:140px;padding-top:.5rem;word-break:break-word}.field-label .field-name{font-weight:500}.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: "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: "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: ValueInputComponent, selector: "epistola-value-input", inputs: ["name", "value", "pluginId", "caseDefinitionKey", "processVariables", "disabled", "placeholder"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ArrayFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'epistola-array-field', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, PluginTranslatePipeModule, InputModule, ValueInputComponent], template: "<div 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      <epistola-value-input\n        [name]=\"'field_' + field.path\"\n        [value]=\"getSourceValue()\"\n        [pluginId]=\"pluginId\"\n        [caseDefinitionKey]=\"caseDefinitionKey\"\n        [processVariables]=\"processVariables\"\n        [disabled]=\"disabled\"\n        (valueChange)=\"onSourceValueChange($event)\"\n      ></epistola-value-input>\n    </div>\n\n    <!-- Per-item field mapping toggle -->\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-array{margin:.25rem 0}.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-array-header:hover{background:#f4f4f4}.field-array-header.field-required-unmapped{border-left-color:#dc3545;background-color:#fff5f5}.field-array-header .expand-icon{flex:0 0 1rem;font-size:.75rem;color:#525252}.field-array-header .field-name{font-weight:500}.field-array-header .field-meta{font-size:.8125rem;color:#6c757d}.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-array-header .mapped-indicator{margin-left:auto;color:#198754;font-weight:600}.field-array-content{padding-left:1.25rem;border-left:1px solid #e0e0e0;margin-left:.5rem}.field-row{display:flex;align-items:flex-start;gap:.75rem;padding:.5rem 0}.field-label{flex:0 0 200px;min-width:140px;padding-top:.5rem;word-break:break-word}.field-label .field-name{font-weight:500}.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"] }]
+        }], propDecorators: { field: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], pluginId: [{
+                type: Input
+            }], caseDefinitionKey: [{
+                type: Input
+            }], processVariables: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
+/**
+ * Recursive field tree component.
+ * Dispatches SCALAR and ARRAY to dedicated sub-components.
+ * Handles OBJECT inline to avoid circular import issues (OBJECT children recurse back to this component).
+ * Uses forwardRef(() => FieldTreeComponent) in imports to allow self-referencing in the template.
+ */
+class FieldTreeComponent {
+    field;
+    value = undefined;
+    pluginId;
+    caseDefinitionKey = null;
+    processVariables = [];
+    disabled = false;
+    valueChange = new EventEmitter();
+    // OBJECT-specific state
+    expanded = false;
+    mappedCount = 0;
+    totalRequired = 0;
+    ngOnChanges(changes) {
+        if (this.field?.fieldType === 'OBJECT' && (changes['value'] || changes['field'])) {
+            if (this.field.children) {
+                const stats = countRequiredMapped(this.field.children, this.value || {});
+                this.mappedCount = stats.mapped;
+                this.totalRequired = stats.total;
+            }
+            if (!this.expanded && this.totalRequired > 0 && this.mappedCount < this.totalRequired) {
+                this.expanded = true;
+            }
+        }
     }
-    isResolvableValue(value) {
-        return value.startsWith('doc:') || value.startsWith('case:') || value.startsWith('pv:') || value.startsWith('template:');
+    toggleExpanded() {
+        this.expanded = !this.expanded;
+    }
+    onChildChange(childName, childValue) {
+        const current = (typeof this.value === 'object' && this.value !== null) ? { ...this.value } : {};
+        if (childValue === undefined || childValue === null || childValue === '') {
+            delete current[childName];
+        }
+        else {
+            current[childName] = childValue;
+        }
+        this.valueChange.emit(Object.keys(current).length > 0 ? current : undefined);
+    }
+    getChildValue(childName) {
+        if (typeof this.value === 'object' && this.value !== null) {
+            return this.value[childName];
+        }
+        return undefined;
     }
     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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.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: "@switch (field.fieldType) {\n  @case ('SCALAR') {\n    <epistola-scalar-field\n      [field]=\"field\"\n      [value]=\"value\"\n      [pluginId]=\"pluginId\"\n      [caseDefinitionKey]=\"caseDefinitionKey\"\n      [processVariables]=\"processVariables\"\n      [disabled]=\"disabled\"\n      (valueChange)=\"valueChange.emit($event)\"\n    ></epistola-scalar-field>\n  }\n  @case ('OBJECT') {\n    <div 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  @case ('ARRAY') {\n    <epistola-array-field\n      [field]=\"field\"\n      [value]=\"value\"\n      [pluginId]=\"pluginId\"\n      [caseDefinitionKey]=\"caseDefinitionKey\"\n      [processVariables]=\"processVariables\"\n      [disabled]=\"disabled\"\n      (valueChange)=\"valueChange.emit($event)\"\n    ></epistola-array-field>\n  }\n}\n", styles: [".field-object{margin:.25rem 0}.field-object-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{background:#f4f4f4}.field-object-header.field-required-unmapped{border-left-color:#dc3545;background-color:#fff5f5}.field-object-header .expand-icon{flex:0 0 1rem;font-size:.75rem;color:#525252}.field-object-header .field-name{font-weight:500}.field-object-header .field-meta{font-size:.8125rem;color:#6c757d}.field-object-header .completeness-badge{margin-left:auto;font-size:.75rem;padding:.125rem .5rem;border-radius:10px;background:#e0e0e0;color:#525252;font-weight:500}.field-object-children{padding-left:1.25rem;border-left:1px solid #e0e0e0;margin-left:.5rem}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => FieldTreeComponent), selector: "epistola-field-tree", inputs: ["field", "value", "pluginId", "caseDefinitionKey", "processVariables", "disabled"], outputs: ["valueChange"] }, { kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i1$1.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i1$1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(() => PluginTranslatePipeModule) }, { kind: "component", type: i0.forwardRef(() => ScalarFieldComponent), selector: "epistola-scalar-field", inputs: ["field", "value", "pluginId", "caseDefinitionKey", "processVariables", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: i0.forwardRef(() => ArrayFieldComponent), selector: "epistola-array-field", inputs: ["field", "value", "pluginId", "caseDefinitionKey", "processVariables", "disabled"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FieldTreeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'epistola-field-tree', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        CommonModule,
-                        FormsModule,
-                        PluginTranslatePipeModule,
-                        InputModule,
-                        ValuePathSelectorComponent
-                    ], 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"] }]
+            args: [{ selector: 'epistola-field-tree', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, PluginTranslatePipeModule, ScalarFieldComponent, ArrayFieldComponent, forwardRef(() => FieldTreeComponent)], template: "@switch (field.fieldType) {\n  @case ('SCALAR') {\n    <epistola-scalar-field\n      [field]=\"field\"\n      [value]=\"value\"\n      [pluginId]=\"pluginId\"\n      [caseDefinitionKey]=\"caseDefinitionKey\"\n      [processVariables]=\"processVariables\"\n      [disabled]=\"disabled\"\n      (valueChange)=\"valueChange.emit($event)\"\n    ></epistola-scalar-field>\n  }\n  @case ('OBJECT') {\n    <div 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  @case ('ARRAY') {\n    <epistola-array-field\n      [field]=\"field\"\n      [value]=\"value\"\n      [pluginId]=\"pluginId\"\n      [caseDefinitionKey]=\"caseDefinitionKey\"\n      [processVariables]=\"processVariables\"\n      [disabled]=\"disabled\"\n      (valueChange)=\"valueChange.emit($event)\"\n    ></epistola-array-field>\n  }\n}\n", styles: [".field-object{margin:.25rem 0}.field-object-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{background:#f4f4f4}.field-object-header.field-required-unmapped{border-left-color:#dc3545;background-color:#fff5f5}.field-object-header .expand-icon{flex:0 0 1rem;font-size:.75rem;color:#525252}.field-object-header .field-name{font-weight:500}.field-object-header .field-meta{font-size:.8125rem;color:#6c757d}.field-object-header .completeness-badge{margin-left:auto;font-size:.75rem;padding:.125rem .5rem;border-radius:10px;background:#e0e0e0;color:#525252;font-weight:500}.field-object-children{padding-left:1.25rem;border-left:1px solid #e0e0e0;margin-left:.5rem}\n"] }]
         }], propDecorators: { field: [{
                 type: Input
             }], value: [{
@@ -489,35 +583,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
  */
 class DataMappingTreeComponent {
     pluginId;
-    templateFields$;
-    prefillMapping$;
-    disabled$;
+    templateFields = [];
+    prefillMapping = {};
+    disabled = false;
     caseDefinitionKey = null;
     processVariables = [];
     mappingChange = new EventEmitter();
     requiredFieldsStatus = new EventEmitter();
-    templateFields = [];
     mapping = {};
-    disabled = false;
-    destroy$ = new Subject();
-    ngOnInit() {
-        this.templateFields$.pipe(takeUntil(this.destroy$)).subscribe(fields => {
-            this.templateFields = fields;
-            this.emitRequiredFieldsStatus();
-        });
-        this.prefillMapping$.pipe(takeUntil(this.destroy$)).subscribe(mapping => {
+    ngOnChanges(changes) {
+        if (changes['prefillMapping']) {
+            const mapping = this.prefillMapping;
             if (mapping && Object.keys(mapping).length > 0) {
                 this.mapping = { ...mapping };
             }
+        }
+        if (changes['templateFields'] || changes['prefillMapping']) {
             this.emitRequiredFieldsStatus();
-        });
-        this.disabled$.pipe(takeUntil(this.destroy$)).subscribe(disabled => {
-            this.disabled = disabled;
-        });
-    }
-    ngOnDestroy() {
-        this.destroy$.next();
-        this.destroy$.complete();
+        }
     }
     onFieldValueChange(fieldName, value) {
         if (value === undefined || value === null || value === '') {
@@ -538,7 +621,7 @@ class DataMappingTreeComponent {
         this.requiredFieldsStatus.emit(stats);
     }
     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 });
+    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" }, usesOnChanges: true, 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.20", ngImport: i0, type: DataMappingTreeComponent, decorators: [{
             type: Component,
@@ -549,11 +632,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                     ], 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"] }]
         }], propDecorators: { pluginId: [{
                 type: Input
-            }], templateFields$: [{
+            }], templateFields: [{
                 type: Input
-            }], prefillMapping$: [{
+            }], prefillMapping: [{
                 type: Input
-            }], disabled$: [{
+            }], disabled: [{
                 type: Input
             }], caseDefinitionKey: [{
                 type: Input
@@ -569,53 +652,31 @@ class GenerateDocumentConfigurationComponent {
     epistolaPluginService;
     processLinkStateService;
     cdr;
-    // Required inputs from FunctionConfigurationComponent
     save$;
     disabled$;
     pluginId;
     prefillConfiguration$;
-    // Optional inputs from FunctionConfigurationComponent
     selectedPluginConfigurationData$;
     context$;
     valid = new EventEmitter();
     configuration = new EventEmitter();
-    // 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)
+    templates$ = new BehaviorSubject(initialResource([]));
+    variants$ = new BehaviorSubject(initialResource([]));
+    environments$ = new BehaviorSubject(initialResource([]));
+    templateFields$ = new BehaviorSubject(initialResource([]));
     dataMapping$ = new BehaviorSubject({});
-    // Prefill data mapping observable for the tree
-    prefillDataMapping$;
     outputFormatOptions = [
         { id: 'PDF', text: 'PDF' },
         { id: 'HTML', text: 'HTML' }
     ];
-    // Show data mapping builder only when template is selected
     selectedTemplateId$ = new BehaviorSubject('');
     selectedVariantId$ = new BehaviorSubject('');
-    // Variant selection mode: 'explicit' (dropdown) or 'attributes' (key-value pairs)
     variantSelectionMode = 'explicit';
-    // Variant attributes for attribute-based selection
     variantAttributeEntries = [];
-    // Case definition key from context (for ValuePathSelector)
     caseDefinitionKey = null;
-    // Discovered process variables
     processVariables = [];
-    // Required fields status
     requiredFieldsStatus = { mapped: 0, total: 0 };
+    prefillDataMapping = {};
     destroy$ = new Subject();
     saveSubscription;
     formValue$ = new BehaviorSubject(null);
@@ -628,7 +689,7 @@ class GenerateDocumentConfigurationComponent {
     }
     ngOnInit() {
         this.initContext();
-        this.initPrefillDataMapping();
+        this.initPrefill();
         this.initPluginConfiguration();
         this.initTemplatesLoading();
         this.initEnvironmentsLoading();
@@ -644,12 +705,10 @@ class GenerateDocumentConfigurationComponent {
     formValueChange(formOutput) {
         const formValue = formOutput;
         this.formValue$.next(formValue);
-        // Update selected template if changed (also clears variant selection)
         if (formValue.templateId && formValue.templateId !== this.selectedTemplateId$.getValue()) {
             this.selectedTemplateId$.next(formValue.templateId);
             this.selectedVariantId$.next('');
         }
-        // Update selected variant if changed
         if (formValue.variantId && formValue.variantId !== this.selectedVariantId$.getValue()) {
             this.selectedVariantId$.next(formValue.variantId);
         }
@@ -657,7 +716,6 @@ class GenerateDocumentConfigurationComponent {
     }
     onDataMappingChange(mapping) {
         this.dataMapping$.next(mapping);
-        // Re-validate when data mapping changes
         const currentFormValue = this.formValue$.getValue();
         if (currentFormValue) {
             this.handleValid(currentFormValue);
@@ -665,7 +723,6 @@ class GenerateDocumentConfigurationComponent {
     }
     onRequiredFieldsStatusChange(status) {
         this.requiredFieldsStatus = status;
-        // Re-validate when required fields status changes
         const currentFormValue = this.formValue$.getValue();
         if (currentFormValue) {
             this.handleValid(currentFormValue);
@@ -676,11 +733,7 @@ class GenerateDocumentConfigurationComponent {
         if (mode === 'attributes' && this.variantAttributeEntries.length === 0) {
             this.variantAttributeEntries = [{ key: '', value: '' }];
         }
-        // Re-validate
-        const currentFormValue = this.formValue$.getValue();
-        if (currentFormValue) {
-            this.handleValid(currentFormValue);
-        }
+        this.revalidate();
     }
     addAttributeEntry() {
         this.variantAttributeEntries = [...this.variantAttributeEntries, { key: '', value: '' }];
@@ -713,10 +766,8 @@ class GenerateDocumentConfigurationComponent {
             });
         }
     }
-    initPrefillDataMapping() {
+    initPrefill() {
         if (this.prefillConfiguration$) {
-            this.prefillDataMapping$ = this.prefillConfiguration$.pipe(map(config => config?.dataMapping || {}));
-            // Also set initial selected template, variant mode, and variant
             this.prefillConfiguration$.pipe(takeUntil(this.destroy$), filter(config => !!config?.templateId)).subscribe(config => {
                 this.selectedTemplateId$.next(config.templateId);
                 if (config.variantAttributes && Object.keys(config.variantAttributes).length > 0) {
@@ -729,102 +780,65 @@ class GenerateDocumentConfigurationComponent {
                     this.selectedVariantId$.next(config.variantId);
                 }
                 if (config.dataMapping) {
+                    this.prefillDataMapping = config.dataMapping;
                     this.dataMapping$.next(config.dataMapping);
                 }
                 this.cdr.markForCheck();
             });
         }
-        else {
-            this.prefillDataMapping$ = new BehaviorSubject({}).asObservable();
-        }
     }
     initPluginConfiguration() {
         const sources = [];
-        // Create mode: framework emits when user selects a plugin configuration
         if (this.selectedPluginConfigurationData$) {
             sources.push(this.selectedPluginConfigurationData$.pipe(filter(config => !!config?.configurationId), map(config => config.configurationId)));
         }
-        // Edit mode: read pluginConfigurationId from the ProcessLink entity
-        // (selectedPluginConfigurationData$ does not emit in edit mode)
         sources.push(this.processLinkStateService.selectedProcessLink$.pipe(filter(processLink => !!processLink?.pluginConfigurationId), map(processLink => processLink.pluginConfigurationId)));
         merge(...sources).pipe(takeUntil(this.destroy$)).subscribe(configurationId => {
             this.pluginConfigurationId$.next(configurationId);
         });
     }
     initTemplatesLoading() {
-        this.pluginConfigurationId$.pipe(takeUntil(this.destroy$), filter(id => !!id)).subscribe(configurationId => {
-            this.templatesLoading$.next(true);
-            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
-                }));
-                this.templateOptions$.next(options);
-                this.templatesLoading$.next(false);
-            });
+        this.pluginConfigurationId$.pipe(takeUntil(this.destroy$), filter(id => !!id), tap(() => this.templates$.next(loadingResource(this.templates$.getValue().data))), switchMap(configurationId => this.epistolaPluginService.getTemplates(configurationId).pipe(catchError(() => {
+            this.templates$.next(errorResource([], 'Failed to load templates'));
+            return of(null);
+        }))), filter(result => result !== null)).subscribe(templates => {
+            this.templates$.next(successResource(templates.map(t => ({ id: t.id, text: t.name }))));
         });
     }
     initEnvironmentsLoading() {
-        this.pluginConfigurationId$.pipe(takeUntil(this.destroy$), filter(id => !!id)).subscribe(configurationId => {
-            this.environmentsLoading$.next(true);
-            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
-                }));
-                this.environmentOptions$.next(options);
-                this.environmentsLoading$.next(false);
-            });
+        this.pluginConfigurationId$.pipe(takeUntil(this.destroy$), filter(id => !!id), tap(() => this.environments$.next(loadingResource(this.environments$.getValue().data))), switchMap(configurationId => this.epistolaPluginService.getEnvironments(configurationId).pipe(catchError(() => {
+            this.environments$.next(errorResource([], 'Failed to load environments'));
+            return of(null);
+        }))), filter(result => result !== null)).subscribe(environments => {
+            this.environments$.next(successResource(environments.map(e => ({ id: e.id, text: e.name }))));
         });
     }
     initVariantsLoading() {
         combineLatest([
             this.pluginConfigurationId$,
             this.selectedTemplateId$
-        ]).pipe(takeUntil(this.destroy$), filter(([configId, templateId]) => !!configId && !!templateId)).subscribe(([configurationId, templateId]) => {
-            this.variantsLoading$.next(true);
-            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)
-                }));
-                this.variantOptions$.next(options);
-                this.variantsLoading$.next(false);
-            });
+        ]).pipe(takeUntil(this.destroy$), filter(([configId, templateId]) => !!configId && !!templateId), tap(() => this.variants$.next(loadingResource(this.variants$.getValue().data))), switchMap(([configurationId, templateId]) => this.epistolaPluginService.getVariants(configurationId, templateId).pipe(catchError(() => {
+            this.variants$.next(errorResource([], 'Failed to load variants'));
+            return of(null);
+        }))), filter(result => result !== null)).subscribe(variants => {
+            this.variants$.next(successResource(variants.map(v => ({ id: v.id, text: v.name + this.formatAttributes(v.attributes) }))));
         });
     }
     initTemplateFieldsLoading() {
         combineLatest([
             this.pluginConfigurationId$,
             this.selectedTemplateId$
-        ]).pipe(takeUntil(this.destroy$), filter(([configId, templateId]) => !!configId && !!templateId)).subscribe(([configurationId, templateId]) => {
-            this.templateFieldsLoading$.next(true);
-            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);
-            });
-            // Also load process variables if we have a case context
+        ]).pipe(takeUntil(this.destroy$), filter(([configId, templateId]) => !!configId && !!templateId), tap(() => {
+            this.templateFields$.next(loadingResource(this.templateFields$.getValue().data));
             this.loadProcessVariables();
+        }), switchMap(([configurationId, templateId]) => this.epistolaPluginService.getTemplateDetails(configurationId, templateId).pipe(catchError(() => {
+            this.templateFields$.next(errorResource([], 'Failed to load template fields'));
+            return of(null);
+        }))), filter(result => result !== null)).subscribe(details => {
+            this.templateFields$.next(successResource(details.fields || []));
         });
     }
     loadProcessVariables() {
-        // Try to discover process variables (best-effort, may not always have context)
         if (this.caseDefinitionKey) {
             this.epistolaPluginService.getProcessVariables(this.caseDefinitionKey).pipe(takeUntil(this.destroy$), catchError(() => of([]))).subscribe(variables => {
                 this.processVariables = variables;
@@ -837,13 +851,10 @@ class GenerateDocumentConfigurationComponent {
             formValue?.outputFormat &&
             formValue?.filename &&
             formValue?.resultProcessVariable);
-        // Variant selection: if attribute mode is used, all entries must have both key and value filled.
-        // Neither variant nor attributes are required — omitting both uses the template's default variant.
         let variantValid = true;
         if (this.variantSelectionMode === 'attributes' && this.variantAttributeEntries.length > 0) {
             variantValid = this.variantAttributeEntries.every(e => !!e.key && !!e.value);
         }
-        // Check if all required template fields are mapped
         const requiredFieldsMapped = this.requiredFieldsStatus.total === 0 ||
             this.requiredFieldsStatus.mapped === this.requiredFieldsStatus.total;
         const valid = baseComplete && variantValid && requiredFieldsMapped;
@@ -881,8 +892,8 @@ class GenerateDocumentConfigurationComponent {
             });
         });
     }
-    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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: GenerateDocumentConfigurationComponent, deps: [{ token: EpistolaPluginService }, { token: i2$3.ProcessLinkStateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: GenerateDocumentConfigurationComponent, isStandalone: true, selector: "epistola-generate-document-configuration", inputs: { save$: "save$", disabled$: "disabled$", pluginId: "pluginId", prefillConfiguration$: "prefillConfiguration$", selectedPluginConfigurationData$: "selectedPluginConfigurationData$", context$: "context$" }, outputs: { valid: "valid", configuration: "configuration" }, ngImport: i0, template: "<v-form\n    (valueChange)=\"formValueChange($event)\"\n    *ngIf=\"{\n      disabled: disabled$ | async,\n      prefill: prefillConfiguration$ ? (prefillConfiguration$ | async) : null,\n      templates: templates$ | async,\n      variants: variants$ | async,\n      environments: environments$ | async,\n      templateFields: templateFields$ | 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.templates.data\"\n    [defaultSelectionId]=\"obs.prefill?.templateId\"\n    [disabled]=\"obs.disabled || obs.templates.loading\"\n    [required]=\"true\"\n    [loading]=\"obs.templates.loading\"\n  >\n  </v-select>\n  <div *ngIf=\"obs.templates.error\" class=\"loading-error\">{{ obs.templates.error }}</div>\n\n  <!-- Variant selection mode toggle -->\n  <div class=\"variant-mode-toggle\" *ngIf=\"obs.selectedTemplateId\">\n    <label class=\"variant-mode-label\">{{ '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.variants.data\"\n    [defaultSelectionId]=\"obs.prefill?.variantId\"\n    [disabled]=\"obs.disabled || obs.variants.loading || !obs.selectedTemplateId\"\n    [required]=\"false\"\n    [loading]=\"obs.variants.loading\"\n  >\n  </v-select>\n  <div *ngIf=\"obs.variants.error\" class=\"loading-error\">{{ obs.variants.error }}</div>\n\n  <!-- Attribute-based variant selection -->\n  <div *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.environments.data\"\n    [defaultSelectionId]=\"obs.prefill?.environmentId\"\n    [disabled]=\"obs.disabled || obs.environments.loading\"\n    [required]=\"false\"\n    [loading]=\"obs.environments.loading\"\n  >\n  </v-select>\n  <div *ngIf=\"obs.environments.error\" class=\"loading-error\">{{ obs.environments.error }}</div>\n\n  <v-select\n    name=\"outputFormat\"\n    [title]=\"'outputFormat' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'outputFormatTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [items]=\"outputFormatOptions\"\n    [defaultSelectionId]=\"obs.prefill?.outputFormat || 'PDF'\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-select>\n\n  <v-input\n    name=\"filename\"\n    [title]=\"'filename' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'filenameTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.filename\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"correlationId\"\n    [title]=\"'correlationId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'correlationIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.correlationId\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"false\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"resultProcessVariable\"\n    [title]=\"'resultProcessVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'resultProcessVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.resultProcessVariable\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-input>\n</v-form>\n\n<div *ngIf=\"(templateFields$ | async)?.error as templateFieldsError\" class=\"loading-error\">{{ templateFieldsError }}</div>\n\n<epistola-data-mapping-tree\n  *ngIf=\"(selectedTemplateId$ | async)\"\n  [pluginId]=\"pluginId\"\n  [templateFields]=\"(templateFields$ | async)?.data ?? []\"\n  [disabled]=\"!!(disabled$ | async)\"\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: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PluginTranslatePipeModule }, { kind: "pipe", type: i2$1.PluginTranslatePipe, name: "pluginTranslate" }, { 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.20", ngImport: i0, type: GenerateDocumentConfigurationComponent, decorators: [{
             type: Component,
@@ -894,8 +905,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", 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      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$: [{
+                    ], template: "<v-form\n    (valueChange)=\"formValueChange($event)\"\n    *ngIf=\"{\n      disabled: disabled$ | async,\n      prefill: prefillConfiguration$ ? (prefillConfiguration$ | async) : null,\n      templates: templates$ | async,\n      variants: variants$ | async,\n      environments: environments$ | async,\n      templateFields: templateFields$ | 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.templates.data\"\n    [defaultSelectionId]=\"obs.prefill?.templateId\"\n    [disabled]=\"obs.disabled || obs.templates.loading\"\n    [required]=\"true\"\n    [loading]=\"obs.templates.loading\"\n  >\n  </v-select>\n  <div *ngIf=\"obs.templates.error\" class=\"loading-error\">{{ obs.templates.error }}</div>\n\n  <!-- Variant selection mode toggle -->\n  <div class=\"variant-mode-toggle\" *ngIf=\"obs.selectedTemplateId\">\n    <label class=\"variant-mode-label\">{{ '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.variants.data\"\n    [defaultSelectionId]=\"obs.prefill?.variantId\"\n    [disabled]=\"obs.disabled || obs.variants.loading || !obs.selectedTemplateId\"\n    [required]=\"false\"\n    [loading]=\"obs.variants.loading\"\n  >\n  </v-select>\n  <div *ngIf=\"obs.variants.error\" class=\"loading-error\">{{ obs.variants.error }}</div>\n\n  <!-- Attribute-based variant selection -->\n  <div *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.environments.data\"\n    [defaultSelectionId]=\"obs.prefill?.environmentId\"\n    [disabled]=\"obs.disabled || obs.environments.loading\"\n    [required]=\"false\"\n    [loading]=\"obs.environments.loading\"\n  >\n  </v-select>\n  <div *ngIf=\"obs.environments.error\" class=\"loading-error\">{{ obs.environments.error }}</div>\n\n  <v-select\n    name=\"outputFormat\"\n    [title]=\"'outputFormat' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'outputFormatTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [items]=\"outputFormatOptions\"\n    [defaultSelectionId]=\"obs.prefill?.outputFormat || 'PDF'\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-select>\n\n  <v-input\n    name=\"filename\"\n    [title]=\"'filename' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'filenameTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.filename\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"correlationId\"\n    [title]=\"'correlationId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'correlationIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.correlationId\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"false\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"resultProcessVariable\"\n    [title]=\"'resultProcessVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'resultProcessVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.resultProcessVariable\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-input>\n</v-form>\n\n<div *ngIf=\"(templateFields$ | async)?.error as templateFieldsError\" class=\"loading-error\">{{ templateFieldsError }}</div>\n\n<epistola-data-mapping-tree\n  *ngIf=\"(selectedTemplateId$ | async)\"\n  [pluginId]=\"pluginId\"\n  [templateFields]=\"(templateFields$ | async)?.data ?? []\"\n  [disabled]=\"!!(disabled$ | async)\"\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$3.ProcessLinkStateService }, { type: i0.ChangeDetectorRef }], propDecorators: { save$: [{
                 type: Input
             }], disabled$: [{
                 type: Input
@@ -1275,7 +1286,7 @@ class EpistolaRetryFormComponent {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaRetryFormComponent, deps: [{ token: EpistolaPluginService }, { token: i3.FormIoStateService }, { token: i0.ChangeDetectorRef }, { token: i1.HttpClient }, { token: i4$1.DomSanitizer }, { token: i2.ConfigService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaRetryFormComponent, deps: [{ token: EpistolaPluginService }, { token: i3.FormIoStateService }, { token: i0.ChangeDetectorRef }, { token: i1.HttpClient }, { token: i4.DomSanitizer }, { token: i2.ConfigService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: EpistolaRetryFormComponent, isStandalone: true, selector: "epistola-retry-form-component", inputs: { value: "value", disabled: "disabled", label: "label", sourceActivityId: "sourceActivityId" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: `
     <div *ngIf="loading" class="epistola-retry-loading">Loading form...</div>
     <div *ngIf="error" class="epistola-retry-error">{{ error }}</div>
@@ -1339,7 +1350,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
       </div>
     </div>
   `, styles: [".epistola-retry-loading{padding:1rem;color:#6c757d}.epistola-retry-error{padding:.5rem;color:#dc3545}.epistola-retry-container{display:flex;gap:1rem}.epistola-retry-form{flex:2;min-width:0}.epistola-retry-preview{flex:1;min-width:0;border:1px solid #dee2e6;border-radius:4px;padding:1rem;background:#f8f9fa;display:flex;flex-direction:column}.preview-expanded .epistola-retry-preview{flex:1}.preview-header{display:flex;justify-content:space-between;align-items:center;font-weight:700;margin-bottom:.5rem;color:#495057}.preview-toggle{background:none;border:1px solid #6c757d;border-radius:4px;color:#6c757d;padding:.2rem .5rem;font-size:.75rem;cursor:pointer}.preview-toggle:hover{background:#e9ecef}.preview-loading{color:#6c757d;font-style:italic}.preview-pdf{width:100%;flex:1;min-height:500px}.preview-expanded .preview-pdf{min-height:80vh}.preview-error{color:#dc3545}.preview-empty{color:#6c757d;font-style:italic}\n"] }]
-        }], ctorParameters: () => [{ type: EpistolaPluginService }, { type: i3.FormIoStateService }, { type: i0.ChangeDetectorRef }, { type: i1.HttpClient }, { type: i4$1.DomSanitizer }, { type: i2.ConfigService }], propDecorators: { value: [{
+        }], ctorParameters: () => [{ type: EpistolaPluginService }, { type: i3.FormIoStateService }, { type: i0.ChangeDetectorRef }, { type: i1.HttpClient }, { type: i4.DomSanitizer }, { type: i2.ConfigService }], propDecorators: { value: [{
                 type: Input
             }], valueChange: [{
                 type: Output
@@ -1416,7 +1427,7 @@ class EpistolaPreviewButtonComponent {
             this.currentBlobUrl = null;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaPreviewButtonComponent, deps: [{ token: i1.HttpClient }, { token: i4$1.DomSanitizer }, { token: i2.ConfigService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaPreviewButtonComponent, deps: [{ token: i1.HttpClient }, { token: i4.DomSanitizer }, { token: i2.ConfigService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: EpistolaPreviewButtonComponent, isStandalone: true, selector: "epistola-preview-button-component", inputs: { value: "value", disabled: "disabled", label: "label" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: `
     <button
       type="button"
@@ -1484,7 +1495,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
       </div>
     </div>
   `, styles: [".preview-modal-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:10000}.preview-modal-content{background:#fff;border-radius:8px;width:90vw;height:90vh;max-width:1200px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 8px 32px #0000004d}.preview-modal-header{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;border-bottom:1px solid #dee2e6;font-weight:700;font-size:1rem}.preview-modal-close{background:none;border:none;font-size:1.5rem;cursor:pointer;color:#6c757d;line-height:1;padding:0 .25rem}.preview-modal-close:hover{color:#333}.preview-modal-body{flex:1;overflow:hidden;display:flex;flex-direction:column}.preview-loading,.preview-error{padding:2rem;text-align:center}.preview-error{color:#dc3545}.preview-pdf{width:100%;flex:1}\n"] }]
-        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: i4$1.DomSanitizer }, { type: i2.ConfigService }], propDecorators: { value: [{
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: i4.DomSanitizer }, { type: i2.ConfigService }], propDecorators: { value: [{
                 type: Input
             }], valueChange: [{
                 type: Output
@@ -1494,7 +1505,325 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 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.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.DomSanitizer }, { type: i2.ConfigService }, { type: i3.FormIoStateService }, { type: i0.ChangeDetectorRef }], propDecorators: { value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], disabled: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }] } });
+
+const EPISTOLA_DOWNLOAD_OPTIONS = {
+    type: 'epistola-download',
+    selector: 'epistola-download-button',
+    title: 'Epistola Download',
+    group: 'basic',
+    icon: 'download',
+    emptyValue: null,
+    fieldOptions: ['filename', 'label'],
+};
+function registerEpistolaDownloadComponent(injector) {
+    if (!customElements.get(EPISTOLA_DOWNLOAD_OPTIONS.selector)) {
+        registerCustomFormioComponent(EPISTOLA_DOWNLOAD_OPTIONS, EpistolaDownloadComponent, 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);
+    }
+}
+
 class EpistolaPluginModule {
+    static forRoot() {
+        return {
+            ngModule: EpistolaPluginModule,
+            providers: [
+                {
+                    provide: ENVIRONMENT_INITIALIZER,
+                    multi: true,
+                    useValue: () => {
+                        const injector = inject(Injector);
+                        registerEpistolaDownloadComponent(injector);
+                        registerEpistolaRetryFormComponent(injector);
+                        registerEpistolaPreviewButtonComponent(injector);
+                        registerEpistolaDocumentPreviewComponent(injector);
+                    }
+                }
+            ]
+        };
+    }
     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,
@@ -1507,18 +1836,26 @@ class EpistolaPluginModule {
             CheckJobStatusConfigurationComponent,
             DownloadDocumentConfigurationComponent,
             DataMappingTreeComponent,
+            ValueInputComponent,
+            ScalarFieldComponent,
+            ArrayFieldComponent,
             FieldTreeComponent,
             EpistolaDownloadComponent,
             EpistolaRetryFormComponent,
-            EpistolaPreviewButtonComponent], exports: [EpistolaConfigurationComponent,
+            EpistolaPreviewButtonComponent,
+            EpistolaDocumentPreviewComponent], exports: [EpistolaConfigurationComponent,
             GenerateDocumentConfigurationComponent,
             CheckJobStatusConfigurationComponent,
             DownloadDocumentConfigurationComponent,
             DataMappingTreeComponent,
+            ValueInputComponent,
+            ScalarFieldComponent,
+            ArrayFieldComponent,
             FieldTreeComponent,
             EpistolaDownloadComponent,
             EpistolaRetryFormComponent,
-            EpistolaPreviewButtonComponent] });
+            EpistolaPreviewButtonComponent,
+            EpistolaDocumentPreviewComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaPluginModule, providers: [
             EpistolaPluginService
         ], imports: [CommonModule,
@@ -1532,10 +1869,14 @@ class EpistolaPluginModule {
             CheckJobStatusConfigurationComponent,
             DownloadDocumentConfigurationComponent,
             DataMappingTreeComponent,
+            ValueInputComponent,
+            ScalarFieldComponent,
+            ArrayFieldComponent,
             FieldTreeComponent,
             EpistolaDownloadComponent,
             EpistolaRetryFormComponent,
-            EpistolaPreviewButtonComponent] });
+            EpistolaPreviewButtonComponent,
+            EpistolaDocumentPreviewComponent] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaPluginModule, decorators: [{
             type: NgModule,
@@ -1552,10 +1893,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                         CheckJobStatusConfigurationComponent,
                         DownloadDocumentConfigurationComponent,
                         DataMappingTreeComponent,
+                        ValueInputComponent,
+                        ScalarFieldComponent,
+                        ArrayFieldComponent,
                         FieldTreeComponent,
                         EpistolaDownloadComponent,
                         EpistolaRetryFormComponent,
-                        EpistolaPreviewButtonComponent
+                        EpistolaPreviewButtonComponent,
+                        EpistolaDocumentPreviewComponent
                     ],
                     exports: [
                         EpistolaConfigurationComponent,
@@ -1563,10 +1908,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                         CheckJobStatusConfigurationComponent,
                         DownloadDocumentConfigurationComponent,
                         DataMappingTreeComponent,
+                        ValueInputComponent,
+                        ScalarFieldComponent,
+                        ArrayFieldComponent,
                         FieldTreeComponent,
                         EpistolaDownloadComponent,
                         EpistolaRetryFormComponent,
-                        EpistolaPreviewButtonComponent
+                        EpistolaPreviewButtonComponent,
+                        EpistolaDocumentPreviewComponent
                     ],
                     providers: [
                         EpistolaPluginService
@@ -1768,51 +2117,6 @@ const epistolaPluginSpecification = {
     }
 };
 
-const EPISTOLA_DOWNLOAD_OPTIONS = {
-    type: 'epistola-download',
-    selector: 'epistola-download-button',
-    title: 'Epistola Download',
-    group: 'basic',
-    icon: 'download',
-    emptyValue: null,
-    fieldOptions: ['filename', 'label'],
-};
-function registerEpistolaDownloadComponent(injector) {
-    if (!customElements.get(EPISTOLA_DOWNLOAD_OPTIONS.selector)) {
-        registerCustomFormioComponent(EPISTOLA_DOWNLOAD_OPTIONS, EpistolaDownloadComponent, 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);
-    }
-}
-
 /*
  * Public API Surface of epistola plugin
  */
@@ -1821,5 +2125,5 @@ function registerEpistolaPreviewButtonComponent(injector) {
  * Generated bundle index. Do not edit.
  */
 
-export { CheckJobStatusConfigurationComponent, DataMappingTreeComponent, DownloadDocumentConfigurationComponent, EPISTOLA_DOWNLOAD_OPTIONS, EPISTOLA_PREVIEW_BUTTON_OPTIONS, EPISTOLA_RETRY_FORM_OPTIONS, EpistolaConfigurationComponent, EpistolaDownloadComponent, EpistolaPluginModule, EpistolaPluginService, EpistolaPreviewButtonComponent, EpistolaRetryFormComponent, FieldTreeComponent, GenerateDocumentConfigurationComponent, epistolaPluginSpecification, registerEpistolaDownloadComponent, registerEpistolaPreviewButtonComponent, registerEpistolaRetryFormComponent };
+export { ArrayFieldComponent, 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, ScalarFieldComponent, ValueInputComponent, epistolaPluginSpecification, errorResource, initialResource, loadingResource, normalizeToDots, registerEpistolaDocumentPreviewComponent, registerEpistolaDownloadComponent, registerEpistolaPreviewButtonComponent, registerEpistolaRetryFormComponent, successResource };
 //# sourceMappingURL=epistola.app-valtimo-plugin.mjs.map