@epistola.app/valtimo-plugin 0.3.1 → 0.3.3

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, Output, Input, Component, ChangeDetectionStrategy, NgModule } 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 { HttpHeaders, HttpClientModule } from '@angular/common/http';
 import * as i2 from '@valtimo/shared';
@@ -10,7 +10,7 @@ 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 { startWith, delay, takeUntil, filter, map, tap, switchMap, catchError, take as take$1, debounceTime } from 'rxjs/operators';
 import * as i4 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i2$2 from '@valtimo/process-link';
@@ -18,6 +18,19 @@ import * as i7 from '@formio/angular';
 import { FormioModule } from '@formio/angular';
 import * as i4$1 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.
  * Provides methods to fetch templates, environments, variants,
@@ -44,6 +57,12 @@ class EpistolaPluginService {
     getTemplateDetails(pluginConfigurationId, templateId) {
         return this.http.get(`${this.apiEndpoint}/configurations/${pluginConfigurationId}/templates/${templateId}`);
     }
+    /**
+     * Get all attribute definitions for a plugin configuration's tenant.
+     */
+    getAttributes(pluginConfigurationId) {
+        return this.http.get(`${this.apiEndpoint}/configurations/${pluginConfigurationId}/attributes`);
+    }
     /**
      * Get all available environments for a plugin configuration.
      */
@@ -223,149 +242,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: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PluginTranslatePipeModule }, { kind: "pipe", type: i2$1.PluginTranslatePipe, name: "pluginTranslate" }, { kind: "ngmodule", type: 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) {
@@ -376,59 +449,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++;
@@ -442,37 +486,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: [{
@@ -495,35 +589,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 === '') {
@@ -544,7 +627,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,
@@ -555,11 +638,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
@@ -575,53 +658,32 @@ 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)
+    availableAttributeKeys = [];
     caseDefinitionKey = null;
-    // Discovered process variables
     processVariables = [];
-    // Required fields status
     requiredFieldsStatus = { mapped: 0, total: 0 };
+    prefillDataMapping = {};
     destroy$ = new Subject();
     saveSubscription;
     formValue$ = new BehaviorSubject(null);
@@ -634,10 +696,11 @@ class GenerateDocumentConfigurationComponent {
     }
     ngOnInit() {
         this.initContext();
-        this.initPrefillDataMapping();
+        this.initPrefill();
         this.initPluginConfiguration();
         this.initTemplatesLoading();
         this.initEnvironmentsLoading();
+        this.initAttributesLoading();
         this.initVariantsLoading();
         this.initTemplateFieldsLoading();
         this.openSaveSubscription();
@@ -650,12 +713,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);
         }
@@ -663,7 +724,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);
@@ -671,7 +731,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);
@@ -680,16 +739,12 @@ class GenerateDocumentConfigurationComponent {
     onVariantSelectionModeChange(mode) {
         this.variantSelectionMode = mode;
         if (mode === 'attributes' && this.variantAttributeEntries.length === 0) {
-            this.variantAttributeEntries = [{ key: '', value: '' }];
-        }
-        // Re-validate
-        const currentFormValue = this.formValue$.getValue();
-        if (currentFormValue) {
-            this.handleValid(currentFormValue);
+            this.variantAttributeEntries = [{ key: '', value: '', required: true }];
         }
+        this.revalidate();
     }
     addAttributeEntry() {
-        this.variantAttributeEntries = [...this.variantAttributeEntries, { key: '', value: '' }];
+        this.variantAttributeEntries = [...this.variantAttributeEntries, { key: '', value: '', required: true }];
         this.revalidate();
     }
     removeAttributeEntry(index) {
@@ -699,6 +754,21 @@ class GenerateDocumentConfigurationComponent {
     onAttributeEntryChange() {
         this.revalidate();
     }
+    onKeySelected(entry, value) {
+        if (value === '__custom__') {
+            entry._customKey = true;
+            entry.key = '';
+        }
+        else {
+            entry.key = value;
+        }
+        this.onAttributeEntryChange();
+    }
+    cancelCustomKey(entry) {
+        entry._customKey = false;
+        entry.key = '';
+        this.onAttributeEntryChange();
+    }
     revalidate() {
         const currentFormValue = this.formValue$.getValue();
         if (currentFormValue) {
@@ -719,118 +789,93 @@ 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) {
+                if (config.variantAttributes && (Array.isArray(config.variantAttributes) ? config.variantAttributes.length > 0 : Object.keys(config.variantAttributes).length > 0)) {
                     this.variantSelectionMode = 'attributes';
-                    this.variantAttributeEntries = Object.entries(config.variantAttributes)
-                        .map(([key, value]) => ({ key, value }));
+                    if (Array.isArray(config.variantAttributes)) {
+                        // New format: VariantAttributeEntry[]
+                        this.variantAttributeEntries = config.variantAttributes
+                            .map(e => ({ key: e.key, value: e.value, required: e.required !== false }));
+                    }
+                    else {
+                        // Old format: Record<string, string> — treat all as required
+                        this.variantAttributeEntries = Object.entries(config.variantAttributes)
+                            .map(([key, value]) => ({ key, value: String(value), required: true }));
+                    }
                 }
                 else if (config.variantId) {
                     this.variantSelectionMode = 'explicit';
                     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 }))));
+        });
+    }
+    initAttributesLoading() {
+        this.pluginConfigurationId$.pipe(takeUntil(this.destroy$), filter(id => !!id), switchMap(configurationId => this.epistolaPluginService.getAttributes(configurationId).pipe(catchError(() => of([]))))).subscribe(attributes => {
+            this.availableAttributeKeys = attributes.map(a => a.key).sort();
+            this.cdr.markForCheck();
         });
     }
     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;
@@ -843,13 +888,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;
@@ -875,12 +917,9 @@ class GenerateDocumentConfigurationComponent {
                         config.variantId = formValue.variantId;
                     }
                     else {
-                        config.variantAttributes = {};
-                        for (const entry of this.variantAttributeEntries) {
-                            if (entry.key && entry.value) {
-                                config.variantAttributes[entry.key] = entry.value;
-                            }
-                        }
+                        config.variantAttributes = this.variantAttributeEntries
+                            .filter(e => e.key && e.value)
+                            .map(e => ({ key: e.key, value: e.value, required: e.required }));
                     }
                     this.configuration.emit(config);
                 }
@@ -888,7 +927,7 @@ 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 ɵ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        <select\n          *ngIf=\"!entry._customKey\"\n          class=\"variant-attribute-input\"\n          [ngModel]=\"entry.key\"\n          (ngModelChange)=\"onKeySelected(entry, $event)\"\n          [disabled]=\"obs.disabled\"\n        >\n          <option value=\"\" disabled>{{ 'attributeKey' | pluginTranslate: pluginId | async }}</option>\n          <option *ngFor=\"let key of availableAttributeKeys\" [value]=\"key\">{{ key }}</option>\n          <option value=\"__custom__\">{{ 'attributeKeyCustom' | pluginTranslate: pluginId | async }}</option>\n        </select>\n        <div *ngIf=\"entry._customKey\" class=\"custom-key-input\">\n          <input\n            type=\"text\"\n            class=\"variant-attribute-input\"\n            [placeholder]=\"'attributeKey' | pluginTranslate: pluginId | async\"\n            [(ngModel)]=\"entry.key\"\n            (ngModelChange)=\"onAttributeEntryChange()\"\n            [disabled]=\"obs.disabled\"\n          />\n          <button type=\"button\" class=\"custom-key-cancel\" (click)=\"cancelCustomKey(entry)\" [disabled]=\"obs.disabled\">&times;</button>\n        </div>\n        <input\n          type=\"text\"\n          class=\"variant-attribute-input\"\n          [placeholder]=\"'attributeValue' | pluginTranslate: pluginId | async\"\n          [(ngModel)]=\"entry.value\"\n          (ngModelChange)=\"onAttributeEntryChange()\"\n          [disabled]=\"obs.disabled\"\n        />\n        <label class=\"variant-attribute-required-toggle\">\n          <input\n            type=\"checkbox\"\n            [(ngModel)]=\"entry.required\"\n            (ngModelChange)=\"onAttributeEntryChange()\"\n            [disabled]=\"obs.disabled\"\n          />\n          <span class=\"required-label\">{{ (entry.required ? 'attributeRequired' : 'attributePreferred') | pluginTranslate: pluginId | async }}</span>\n        </label>\n        <button\n          type=\"button\"\n          class=\"variant-attribute-remove-btn\"\n          (click)=\"removeAttributeEntry(i)\"\n          [disabled]=\"obs.disabled\"\n          title=\"{{ 'removeAttribute' | pluginTranslate: pluginId | async }}\"\n        >&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}.custom-key-input{display:flex;flex:1;gap:.25rem}.custom-key-input .variant-attribute-input{flex:1}.custom-key-cancel{padding:.25rem .5rem;font-size:1rem;line-height:1;background:none;border:1px solid #d1d5db;border-radius:4px;cursor:pointer;color:#6b7280}.custom-key-cancel:hover:not([disabled]){color:#dc3545;border-color:#dc3545}.custom-key-cancel[disabled]{opacity:.5;cursor:not-allowed}.variant-attribute-required-toggle{display:flex;align-items:center;gap:.25rem;font-size:.75rem;color:#374151;white-space:nowrap;cursor:pointer}.variant-attribute-required-toggle input[type=checkbox]{margin:0;cursor:pointer}.variant-attribute-required-toggle .required-label{-webkit-user-select:none;user-select:none}.variant-attribute-remove-btn{padding:.25rem .5rem;font-size:1rem;line-height:1;background:none;border:1px solid #d1d5db;border-radius:4px;cursor:pointer;color:#6b7280}.variant-attribute-remove-btn:hover:not([disabled]){color:#dc3545;border-color:#dc3545}.variant-attribute-remove-btn[disabled]{opacity:.5;cursor:not-allowed}.variant-attribute-add-btn{margin-top:.375rem;padding:.25rem .5rem;font-size:.8125rem;background:none;border:1px dashed #d1d5db;border-radius:4px;cursor:pointer;color:#6b7280}.variant-attribute-add-btn:hover:not([disabled]){color:#2563eb;border-color:#2563eb}.variant-attribute-add-btn[disabled]{opacity:.5;cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PluginTranslatePipeModule }, { kind: "pipe", type: i2$1.PluginTranslatePipe, name: "pluginTranslate" }, { kind: "ngmodule", type: FormModule }, { kind: "component", type: i3.FormComponent, selector: "v-form", inputs: ["className"], outputs: ["valueChange"] }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i3.InputComponent, selector: "v-input", inputs: ["name", "type", "title", "titleTranslationKey", "defaultValue", "widthPx", "fullWidth", "margin", "smallMargin", "disabled", "step", "min", "maxLength", "tooltip", "required", "hideNumberSpinBox", "smallLabel", "rows", "clear$", "carbonTheme", "placeholder", "dataTestId", "trim", "presetsTitle", "presetOptions"], outputs: ["valueChange"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3.SelectComponent, selector: "v-select", inputs: ["items", "defaultSelection", "defaultSelectionId", "defaultSelectionIds", "disabled", "dropUp", "invalid", "multiple", "margin", "widthInPx", "notFoundText", "clearAllText", "clearText", "clearable", "name", "title", "titleTranslationKey", "clearSelectionSubject$", "tooltip", "required", "loading", "loadingText", "placeholder", "smallMargin", "carbonTheme", "appendInline", "warn", "warnText", "dataTestId"], outputs: ["selectedChange"] }, { kind: "component", type: 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,
@@ -900,7 +939,7 @@ 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"] }]
+                    ], 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        <select\n          *ngIf=\"!entry._customKey\"\n          class=\"variant-attribute-input\"\n          [ngModel]=\"entry.key\"\n          (ngModelChange)=\"onKeySelected(entry, $event)\"\n          [disabled]=\"obs.disabled\"\n        >\n          <option value=\"\" disabled>{{ 'attributeKey' | pluginTranslate: pluginId | async }}</option>\n          <option *ngFor=\"let key of availableAttributeKeys\" [value]=\"key\">{{ key }}</option>\n          <option value=\"__custom__\">{{ 'attributeKeyCustom' | pluginTranslate: pluginId | async }}</option>\n        </select>\n        <div *ngIf=\"entry._customKey\" class=\"custom-key-input\">\n          <input\n            type=\"text\"\n            class=\"variant-attribute-input\"\n            [placeholder]=\"'attributeKey' | pluginTranslate: pluginId | async\"\n            [(ngModel)]=\"entry.key\"\n            (ngModelChange)=\"onAttributeEntryChange()\"\n            [disabled]=\"obs.disabled\"\n          />\n          <button type=\"button\" class=\"custom-key-cancel\" (click)=\"cancelCustomKey(entry)\" [disabled]=\"obs.disabled\">&times;</button>\n        </div>\n        <input\n          type=\"text\"\n          class=\"variant-attribute-input\"\n          [placeholder]=\"'attributeValue' | pluginTranslate: pluginId | async\"\n          [(ngModel)]=\"entry.value\"\n          (ngModelChange)=\"onAttributeEntryChange()\"\n          [disabled]=\"obs.disabled\"\n        />\n        <label class=\"variant-attribute-required-toggle\">\n          <input\n            type=\"checkbox\"\n            [(ngModel)]=\"entry.required\"\n            (ngModelChange)=\"onAttributeEntryChange()\"\n            [disabled]=\"obs.disabled\"\n          />\n          <span class=\"required-label\">{{ (entry.required ? 'attributeRequired' : 'attributePreferred') | pluginTranslate: pluginId | async }}</span>\n        </label>\n        <button\n          type=\"button\"\n          class=\"variant-attribute-remove-btn\"\n          (click)=\"removeAttributeEntry(i)\"\n          [disabled]=\"obs.disabled\"\n          title=\"{{ 'removeAttribute' | pluginTranslate: pluginId | async }}\"\n        >&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}.custom-key-input{display:flex;flex:1;gap:.25rem}.custom-key-input .variant-attribute-input{flex:1}.custom-key-cancel{padding:.25rem .5rem;font-size:1rem;line-height:1;background:none;border:1px solid #d1d5db;border-radius:4px;cursor:pointer;color:#6b7280}.custom-key-cancel:hover:not([disabled]){color:#dc3545;border-color:#dc3545}.custom-key-cancel[disabled]{opacity:.5;cursor:not-allowed}.variant-attribute-required-toggle{display:flex;align-items:center;gap:.25rem;font-size:.75rem;color:#374151;white-space:nowrap;cursor:pointer}.variant-attribute-required-toggle input[type=checkbox]{margin:0;cursor:pointer}.variant-attribute-required-toggle .required-label{-webkit-user-select:none;user-select:none}.variant-attribute-remove-btn{padding:.25rem .5rem;font-size:1rem;line-height:1;background:none;border:1px solid #d1d5db;border-radius:4px;cursor:pointer;color:#6b7280}.variant-attribute-remove-btn:hover:not([disabled]){color:#dc3545;border-color:#dc3545}.variant-attribute-remove-btn[disabled]{opacity:.5;cursor:not-allowed}.variant-attribute-add-btn{margin-top:.375rem;padding:.25rem .5rem;font-size:.8125rem;background:none;border:1px dashed #d1d5db;border-radius:4px;cursor:pointer;color:#6b7280}.variant-attribute-add-btn:hover:not([disabled]){color:#2563eb;border-color:#2563eb}.variant-attribute-add-btn[disabled]{opacity:.5;cursor:not-allowed}\n"] }]
         }], ctorParameters: () => [{ type: EpistolaPluginService }, { type: i2$2.ProcessLinkStateService }, { type: i0.ChangeDetectorRef }], propDecorators: { save$: [{
                 type: Input
             }], disabled$: [{
@@ -1218,7 +1257,7 @@ class EpistolaRetryFormComponent {
             processInstanceId,
             sourceActivityId: this.sourceActivityId || null,
             overrides: formData
-        }, { responseType: 'blob' }).subscribe({
+        }, { 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);
@@ -1740,7 +1779,85 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 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,
@@ -1753,6 +1870,9 @@ class EpistolaPluginModule {
             CheckJobStatusConfigurationComponent,
             DownloadDocumentConfigurationComponent,
             DataMappingTreeComponent,
+            ValueInputComponent,
+            ScalarFieldComponent,
+            ArrayFieldComponent,
             FieldTreeComponent,
             EpistolaDownloadComponent,
             EpistolaRetryFormComponent,
@@ -1762,6 +1882,9 @@ class EpistolaPluginModule {
             CheckJobStatusConfigurationComponent,
             DownloadDocumentConfigurationComponent,
             DataMappingTreeComponent,
+            ValueInputComponent,
+            ScalarFieldComponent,
+            ArrayFieldComponent,
             FieldTreeComponent,
             EpistolaDownloadComponent,
             EpistolaRetryFormComponent,
@@ -1780,6 +1903,9 @@ class EpistolaPluginModule {
             CheckJobStatusConfigurationComponent,
             DownloadDocumentConfigurationComponent,
             DataMappingTreeComponent,
+            ValueInputComponent,
+            ScalarFieldComponent,
+            ArrayFieldComponent,
             FieldTreeComponent,
             EpistolaDownloadComponent,
             EpistolaRetryFormComponent,
@@ -1801,6 +1927,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                         CheckJobStatusConfigurationComponent,
                         DownloadDocumentConfigurationComponent,
                         DataMappingTreeComponent,
+                        ValueInputComponent,
+                        ScalarFieldComponent,
+                        ArrayFieldComponent,
                         FieldTreeComponent,
                         EpistolaDownloadComponent,
                         EpistolaRetryFormComponent,
@@ -1813,6 +1942,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                         CheckJobStatusConfigurationComponent,
                         DownloadDocumentConfigurationComponent,
                         DataMappingTreeComponent,
+                        ValueInputComponent,
+                        ScalarFieldComponent,
+                        ArrayFieldComponent,
                         FieldTreeComponent,
                         EpistolaDownloadComponent,
                         EpistolaRetryFormComponent,
@@ -1870,9 +2002,12 @@ const epistolaPluginSpecification = {
             variantAttributes: 'Variant kenmerken',
             variantAttributesTooltip: 'Kenmerken voor automatische variant selectie. Waarden kunnen expressies zijn (doc:, pv:, case:).',
             attributeKey: 'Kenmerk',
+            attributeKeyCustom: 'Aangepast...',
             attributeValue: 'Waarde',
             addAttribute: 'Kenmerk toevoegen',
             removeAttribute: 'Kenmerk verwijderen',
+            attributeRequired: 'Verplicht',
+            attributePreferred: 'Voorkeur',
             environmentId: 'Omgeving',
             environmentIdTooltip: 'Selecteer de doelomgeving (optioneel)',
             correlationId: 'Correlatie ID',
@@ -1956,9 +2091,12 @@ const epistolaPluginSpecification = {
             variantAttributes: 'Variant attributes',
             variantAttributesTooltip: 'Attributes for automatic variant selection. Values can be expressions (doc:, pv:, case:).',
             attributeKey: 'Attribute',
+            attributeKeyCustom: 'Custom...',
             attributeValue: 'Value',
             addAttribute: 'Add attribute',
             removeAttribute: 'Remove attribute',
+            attributeRequired: 'Required',
+            attributePreferred: 'Preferred',
             environmentId: 'Environment',
             environmentIdTooltip: 'Select the target environment (optional)',
             correlationId: 'Correlation ID',
@@ -2019,66 +2157,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);
-    }
-}
-
-const EPISTOLA_DOCUMENT_PREVIEW_OPTIONS = {
-    type: 'epistola-document-preview',
-    selector: 'epistola-document-preview-element',
-    title: 'Epistola Document Preview',
-    group: 'basic',
-    icon: 'file-pdf-o',
-    emptyValue: null,
-    fieldOptions: ['label'],
-};
-function registerEpistolaDocumentPreviewComponent(injector) {
-    if (!customElements.get(EPISTOLA_DOCUMENT_PREVIEW_OPTIONS.selector)) {
-        registerCustomFormioComponent(EPISTOLA_DOCUMENT_PREVIEW_OPTIONS, EpistolaDocumentPreviewComponent, injector);
-    }
-}
-
 /*
  * Public API Surface of epistola plugin
  */
@@ -2087,5 +2165,5 @@ function registerEpistolaDocumentPreviewComponent(injector) {
  * Generated bundle index. Do not edit.
  */
 
-export { CheckJobStatusConfigurationComponent, DataMappingTreeComponent, DownloadDocumentConfigurationComponent, EPISTOLA_DOCUMENT_PREVIEW_OPTIONS, EPISTOLA_DOWNLOAD_OPTIONS, EPISTOLA_PREVIEW_BUTTON_OPTIONS, EPISTOLA_RETRY_FORM_OPTIONS, EpistolaConfigurationComponent, EpistolaDocumentPreviewComponent, EpistolaDownloadComponent, EpistolaPluginModule, EpistolaPluginService, EpistolaPreviewButtonComponent, EpistolaRetryFormComponent, FieldTreeComponent, GenerateDocumentConfigurationComponent, epistolaPluginSpecification, registerEpistolaDocumentPreviewComponent, registerEpistolaDownloadComponent, registerEpistolaPreviewButtonComponent, registerEpistolaRetryFormComponent };
+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