@epistola.app/valtimo-plugin 0.5.1 → 0.6.0

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

@@ -1,22 +1,31 @@
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, Output, Input, Component, ChangeDetectionStrategy, forwardRef, ENVIRONMENT_INITIALIZER, inject, Injector, NgModule } from '@angular/core';
+import { Injectable, EventEmitter, Output, Input, Component, ChangeDetectionStrategy, NgModule, ENVIRONMENT_INITIALIZER, inject, Injector } from '@angular/core';
 import * as i1 from '@angular/common/http';
 import { HttpHeaders, HttpClientModule } from '@angular/common/http';
 import * as i2 from '@valtimo/shared';
+import { ROLE_ADMIN } from '@valtimo/shared';
+import { of, BehaviorSubject, combineLatest, take, Subject, debounceTime, takeUntil, merge } from 'rxjs';
+import * as i3 from '@valtimo/components';
+import { FormModule, InputModule, EditorModule, SelectModule, registerCustomFormioComponent } from '@valtimo/components';
 import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2$1 from '@valtimo/plugin';
 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, of, merge } from 'rxjs';
-import { startWith, delay, shareReplay, take as take$1, takeUntil, filter, map, distinctUntilChanged, tap, switchMap, catchError, debounceTime } from 'rxjs/operators';
+import { startWith, delay, shareReplay, take as take$1, takeUntil as takeUntil$1, filter, map, distinctUntilChanged, tap, switchMap, catchError, debounceTime as debounceTime$1 } from 'rxjs/operators';
 import * as i4 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
+import * as _jsonata from 'jsonata';
 import * as i2$2 from '@valtimo/process-link';
 import * as i7 from '@formio/angular';
 import { FormioModule } from '@formio/angular';
 import * as i4$1 from '@angular/platform-browser';
+import * as i2$3 from '@angular/router';
+import { RouterModule } from '@angular/router';
+import * as i5 from 'carbon-components-angular/tabs';
+import { TabsModule } from 'carbon-components-angular/tabs';
+import * as i6 from 'carbon-components-angular/tag';
+import { TagModule } from 'carbon-components-angular/tag';
+import { AuthGuardService } from '@valtimo/security';
 
 function initialResource(empty) {
     return { data: empty, loading: false, error: null };
@@ -31,6 +40,94 @@ function errorResource(current, error) {
     return { data: current, loading: false, error };
 }
 
+/**
+ * Service for Epistola plugin administrative operations.
+ * Provides health checks, version info, and usage overview.
+ */
+class EpistolaAdminService {
+    http;
+    configService;
+    apiEndpoint;
+    constructor(http, configService) {
+        this.http = http;
+        this.configService = configService;
+        this.apiEndpoint = `${this.configService.config.valtimoApi.endpointUri}v1/plugin/epistola/admin`;
+    }
+    /**
+     * Check connectivity to Epistola for all plugin configurations.
+     */
+    getConnectionStatus() {
+        return this.http.get(`${this.apiEndpoint}/health`);
+    }
+    /**
+     * Get version information for the plugin and connected Epistola server.
+     */
+    getVersions() {
+        return this.http.get(`${this.apiEndpoint}/versions`);
+    }
+    /**
+     * Get an overview of all Epistola plugin usages across process definitions.
+     */
+    getPluginUsage() {
+        return this.http.get(`${this.apiEndpoint}/usage`);
+    }
+    /**
+     * Get all process instances currently waiting for an Epistola document generation result.
+     */
+    getPendingJobs() {
+        return this.http.get(`${this.apiEndpoint}/pending`);
+    }
+    /**
+     * Export a single process link as a .process-link.json file.
+     */
+    exportProcessLink(processLinkId) {
+        return this.http.get(`${this.apiEndpoint}/export/${encodeURIComponent(processLinkId)}`, {
+            responseType: 'blob',
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaAdminService, deps: [{ token: i1.HttpClient }, { token: i2.ConfigService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaAdminService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaAdminService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: i2.ConfigService }] });
+
+/**
+ * Registers the Epistola admin page menu item under the Admin > Other section.
+ * Instantiated eagerly via ENVIRONMENT_INITIALIZER so the menu item
+ * appears without any manual configuration in the host application.
+ */
+class EpistolaMenuService {
+    menuService;
+    constructor(menuService) {
+        this.menuService = menuService;
+        this.menuService.registerAppendMenuItemsFunction((items) => {
+            return of(items.map((item) => {
+                const isAdminMenu = item.roles?.includes(ROLE_ADMIN) && item.children;
+                if (!isAdminMenu) {
+                    return item;
+                }
+                return {
+                    ...item,
+                    children: [
+                        ...item.children,
+                        {
+                            link: ['/epistola'],
+                            title: 'Epistola',
+                            sequence: 18,
+                        },
+                    ],
+                };
+            }));
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaMenuService, deps: [{ token: i3.MenuService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaMenuService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaMenuService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: i3.MenuService }] });
+
 /**
  * Service for interacting with Epistola plugin API endpoints.
  * Provides methods to fetch templates, environments, variants,
@@ -94,13 +191,32 @@ class EpistolaPluginService {
      * Discover process variable names for a given process definition.
      */
     getProcessVariables(processDefinitionKey) {
-        return this.http.get(`${this.apiEndpoint}/process-variables`, { params: { processDefinitionKey } });
+        return this.http.get(`${this.apiEndpoint}/process-variables`, {
+            params: { processDefinitionKey },
+        });
     }
     /**
-     * Validate that a data mapping covers all required template fields.
+     * Get variable suggestions for JSONata autocompletion.
      */
-    validateMapping(pluginConfigurationId, templateId, dataMapping) {
-        return this.http.post(`${this.apiEndpoint}/configurations/${pluginConfigurationId}/templates/${templateId}/validate-mapping`, { dataMapping });
+    getVariableSuggestions(caseDefinitionKey, processDefinitionKey) {
+        const params = {};
+        if (caseDefinitionKey)
+            params['caseDefinitionKey'] = caseDefinitionKey;
+        if (processDefinitionKey)
+            params['processDefinitionKey'] = processDefinitionKey;
+        return this.http.get(`${this.apiEndpoint}/variable-suggestions`, {
+            params,
+        });
+    }
+    /**
+     * Evaluate a JSONata expression against a real document.
+     */
+    evaluateMapping(expression, documentId, processInstanceId) {
+        return this.http.post(`${this.apiEndpoint}/evaluate-mapping`, {
+            expression,
+            documentId,
+            processInstanceId: processInstanceId ?? null,
+        });
     }
     /**
      * Get a dynamically generated Formio form for retrying a failed document generation.
@@ -115,11 +231,19 @@ class EpistolaPluginService {
         }
         return this.http.get(`${this.apiEndpoint}/retry-form`, { params });
     }
+    /**
+     * List all available expression functions for expr: data mapping values.
+     */
+    getExpressionFunctions() {
+        return this.http.get(`${this.apiEndpoint}/expression-functions`);
+    }
     /**
      * Discover all previewable document sources for a given Valtimo document.
      */
     getPreviewSources(documentId) {
-        return this.http.get(`${this.apiEndpoint}/preview-sources`, { params: { documentId } });
+        return this.http.get(`${this.apiEndpoint}/preview-sources`, {
+            params: { documentId },
+        });
     }
     /**
      * Preview a document by dry-running the generate-document process link.
@@ -131,7 +255,7 @@ class EpistolaPluginService {
             processDefinitionKey,
             sourceActivityId,
             processInstanceId: processInstanceId || null,
-            overrides: overrides || null
+            overrides: overrides || null,
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaPluginService, deps: [{ token: i1.HttpClient }, { token: i2.ConfigService }], target: i0.ɵɵFactoryTarget.Injectable });
@@ -202,11 +326,11 @@ class EpistolaConfigurationComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaConfigurationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: EpistolaConfigurationComponent, isStandalone: true, selector: "epistola-configuration", inputs: { save$: "save$", disabled$: "disabled$", pluginId: "pluginId", prefillConfiguration$: "prefillConfiguration$" }, outputs: { valid: "valid", configuration: "configuration" }, ngImport: i0, template: "<v-form\n    (valueChange)=\"formValueChange($event)\"\n    *ngIf=\"{\n      disabled: safeDisabled$ | async,\n      prefill: prefillConfiguration$ ? (prefillConfiguration$ | async) : null\n    } as obs\"\n>\n  <v-input\n    name=\"configurationTitle\"\n    [title]=\"'configurationTitle' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.configurationTitle\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"baseUrl\"\n    [title]=\"'baseUrl' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'baseUrlTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.baseUrl\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"apiKey\"\n    [title]=\"'apiKey' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'apiKeyTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.apiKey\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n    type=\"password\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"tenantId\"\n    [title]=\"'tenantId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'tenantIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.tenantId\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"defaultEnvironmentId\"\n    [title]=\"'defaultEnvironmentId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'defaultEnvironmentIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.defaultEnvironmentId\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"false\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"templateSyncEnabled\"\n    type=\"checkbox\"\n    [title]=\"'templateSyncEnabled' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'templateSyncEnabledTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.templateSyncEnabled ? 'true' : ''\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"false\"\n  >\n  </v-input>\n</v-form>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: PluginTranslatePipeModule }, { kind: "pipe", type: i2$1.PluginTranslatePipe, name: "pluginTranslate" }, { kind: "ngmodule", type: FormModule }, { kind: "component", type: i3.FormComponent, selector: "v-form", inputs: ["className"], outputs: ["valueChange"] }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i3.InputComponent, selector: "v-input", inputs: ["name", "type", "title", "titleTranslationKey", "defaultValue", "widthPx", "fullWidth", "margin", "smallMargin", "disabled", "step", "min", "maxLength", "tooltip", "required", "hideNumberSpinBox", "smallLabel", "rows", "clear$", "carbonTheme", "placeholder", "dataTestId", "trim", "presetsTitle", "presetOptions"], outputs: ["valueChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: EpistolaConfigurationComponent, isStandalone: true, selector: "epistola-configuration", inputs: { save$: "save$", disabled$: "disabled$", pluginId: "pluginId", prefillConfiguration$: "prefillConfiguration$" }, outputs: { valid: "valid", configuration: "configuration" }, ngImport: i0, template: "<v-form\n  (valueChange)=\"formValueChange($event)\"\n  *ngIf=\"{\n    disabled: safeDisabled$ | async,\n    prefill: prefillConfiguration$ ? (prefillConfiguration$ | async) : null,\n  } as obs\"\n>\n  <v-input\n    name=\"configurationTitle\"\n    [title]=\"'configurationTitle' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.configurationTitle\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"baseUrl\"\n    [title]=\"'baseUrl' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'baseUrlTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.baseUrl\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"apiKey\"\n    [title]=\"'apiKey' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'apiKeyTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.apiKey\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n    type=\"password\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"tenantId\"\n    [title]=\"'tenantId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'tenantIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.tenantId\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"defaultEnvironmentId\"\n    [title]=\"'defaultEnvironmentId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'defaultEnvironmentIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.defaultEnvironmentId\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"false\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"templateSyncEnabled\"\n    type=\"checkbox\"\n    [title]=\"'templateSyncEnabled' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'templateSyncEnabledTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.templateSyncEnabled ? 'true' : ''\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"false\"\n  >\n  </v-input>\n</v-form>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: PluginTranslatePipeModule }, { kind: "pipe", type: i2$1.PluginTranslatePipe, name: "pluginTranslate" }, { kind: "ngmodule", type: FormModule }, { kind: "component", type: i3.FormComponent, selector: "v-form", inputs: ["className"], outputs: ["valueChange"] }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i3.InputComponent, selector: "v-input", inputs: ["name", "type", "title", "titleTranslationKey", "defaultValue", "widthPx", "fullWidth", "margin", "smallMargin", "disabled", "step", "min", "maxLength", "tooltip", "required", "hideNumberSpinBox", "smallLabel", "rows", "clear$", "carbonTheme", "placeholder", "dataTestId", "trim", "presetsTitle", "presetOptions"], outputs: ["valueChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaConfigurationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'epistola-configuration', standalone: true, imports: [CommonModule, PluginTranslatePipeModule, FormModule, InputModule], template: "<v-form\n    (valueChange)=\"formValueChange($event)\"\n    *ngIf=\"{\n      disabled: safeDisabled$ | async,\n      prefill: prefillConfiguration$ ? (prefillConfiguration$ | async) : null\n    } as obs\"\n>\n  <v-input\n    name=\"configurationTitle\"\n    [title]=\"'configurationTitle' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.configurationTitle\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"baseUrl\"\n    [title]=\"'baseUrl' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'baseUrlTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.baseUrl\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"apiKey\"\n    [title]=\"'apiKey' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'apiKeyTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.apiKey\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n    type=\"password\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"tenantId\"\n    [title]=\"'tenantId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'tenantIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.tenantId\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"defaultEnvironmentId\"\n    [title]=\"'defaultEnvironmentId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'defaultEnvironmentIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.defaultEnvironmentId\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"false\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"templateSyncEnabled\"\n    type=\"checkbox\"\n    [title]=\"'templateSyncEnabled' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'templateSyncEnabledTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.templateSyncEnabled ? 'true' : ''\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"false\"\n  >\n  </v-input>\n</v-form>\n" }]
+            args: [{ selector: 'epistola-configuration', standalone: true, imports: [CommonModule, PluginTranslatePipeModule, FormModule, InputModule], template: "<v-form\n  (valueChange)=\"formValueChange($event)\"\n  *ngIf=\"{\n    disabled: safeDisabled$ | async,\n    prefill: prefillConfiguration$ ? (prefillConfiguration$ | async) : null,\n  } as obs\"\n>\n  <v-input\n    name=\"configurationTitle\"\n    [title]=\"'configurationTitle' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.configurationTitle\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"baseUrl\"\n    [title]=\"'baseUrl' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'baseUrlTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.baseUrl\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"apiKey\"\n    [title]=\"'apiKey' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'apiKeyTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.apiKey\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n    type=\"password\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"tenantId\"\n    [title]=\"'tenantId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'tenantIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.tenantId\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"defaultEnvironmentId\"\n    [title]=\"'defaultEnvironmentId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'defaultEnvironmentIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.defaultEnvironmentId\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"false\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"templateSyncEnabled\"\n    type=\"checkbox\"\n    [title]=\"'templateSyncEnabled' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'templateSyncEnabledTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.templateSyncEnabled ? 'true' : ''\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"false\"\n  >\n  </v-input>\n</v-form>\n" }]
         }], propDecorators: { save$: [{
                 type: Input
             }], disabled$: [{
@@ -221,452 +345,1109 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 type: Output
             }] } });
 
-function countRequiredMapped(fields, mapping) {
-    let mapped = 0;
-    let total = 0;
-    for (const field of fields) {
-        if (field.fieldType === 'SCALAR' && field.required) {
-            total++;
-            const val = mapping[field.name];
-            if (typeof val === 'string' && val.trim().length > 0) {
-                mapped++;
+/**
+ * Shared state for the JSONata completion provider.
+ * Updated by the editor component when suggestions/functions change.
+ */
+const jsonataCompletionData = {
+    suggestions: null,
+    functions: [],
+};
+/**
+ * Register the JSONata language in Monaco editor.
+ * Call this once when Monaco is available (e.g., in editor component OnInit).
+ */
+function registerJsonataLanguage(monaco) {
+    // Only register once
+    if (monaco.languages.getLanguages().some((lang) => lang.id === 'jsonata')) {
+        return;
+    }
+    monaco.languages.register({ id: 'jsonata' });
+    // Syntax highlighting via Monarch tokenizer
+    monaco.languages.setMonarchTokensProvider('jsonata', {
+        defaultToken: '',
+        tokenPostfix: '.jsonata',
+        keywords: ['true', 'false', 'null', 'in', 'and', 'or', 'not'],
+        operators: ['&', '?', ':', '=', '!=', '>', '<', '>=', '<=', '+', '-', '*', '/', '%', '~>'],
+        symbols: /[=><!~?:&|+\-*/^%]+/,
+        tokenizer: {
+            root: [
+                // Variables: $identifier
+                [/\$[a-zA-Z_]\w*/, 'variable'],
+                // Identifiers and keywords
+                [
+                    /[a-zA-Z_]\w*/,
+                    {
+                        cases: {
+                            '@keywords': 'keyword',
+                            '@default': 'identifier',
+                        },
+                    },
+                ],
+                // Whitespace
+                { include: '@whitespace' },
+                // Strings
+                [/"([^"\\]|\\.)*$/, 'string.invalid'],
+                [/"/, 'string', '@string_double'],
+                [/'([^'\\]|\\.)*$/, 'string.invalid'],
+                [/'/, 'string', '@string_single'],
+                // Numbers
+                [/\d+(\.\d+)?([eE][-+]?\d+)?/, 'number'],
+                // Delimiters and operators
+                [/[{}()\[\]]/, '@brackets'],
+                [/[,;.]/, 'delimiter'],
+                [
+                    /@symbols/,
+                    {
+                        cases: {
+                            '@operators': 'operator',
+                            '@default': '',
+                        },
+                    },
+                ],
+            ],
+            string_double: [
+                [/[^\\"]+/, 'string'],
+                [/\\./, 'string.escape'],
+                [/"/, 'string', '@pop'],
+            ],
+            string_single: [
+                [/[^\\']+/, 'string'],
+                [/\\./, 'string.escape'],
+                [/'/, 'string', '@pop'],
+            ],
+            whitespace: [[/[ \t\r\n]+/, 'white']],
+        },
+    });
+    // Autocomplete provider
+    monaco.languages.registerCompletionItemProvider('jsonata', {
+        triggerCharacters: ['$', '.'],
+        provideCompletionItems: (model, position) => {
+            const textUntilPosition = model.getValueInRange({
+                startLineNumber: position.lineNumber,
+                startColumn: 1,
+                endLineNumber: position.lineNumber,
+                endColumn: position.column,
+            });
+            const suggestions = [];
+            const CompletionItemKind = monaco.languages.CompletionItemKind;
+            // After "$" — suggest variables and functions
+            if (textUntilPosition.endsWith('$')) {
+                suggestions.push(...['doc', 'pv', 'case'].map((v) => ({
+                    label: `$${v}`,
+                    kind: CompletionItemKind.Variable,
+                    insertText: v,
+                    detail: `Context variable`,
+                })));
+                // Custom functions
+                for (const func of jsonataCompletionData.functions) {
+                    suggestions.push({
+                        label: `$${func.name}`,
+                        kind: CompletionItemKind.Function,
+                        insertText: `${func.name}($0)`,
+                        insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
+                        detail: func.description || 'Custom function',
+                    });
+                }
+                // Built-in JSONata functions
+                const builtins = [
+                    'string',
+                    'number',
+                    'boolean',
+                    'length',
+                    'substring',
+                    'uppercase',
+                    'lowercase',
+                    'trim',
+                    'contains',
+                    'split',
+                    'join',
+                    'sum',
+                    'count',
+                    'max',
+                    'min',
+                    'average',
+                    'append',
+                    'sort',
+                    'reverse',
+                    'keys',
+                    'values',
+                    'lookup',
+                    'now',
+                    'exists',
+                    'type',
+                    'not',
+                ];
+                for (const fn of builtins) {
+                    suggestions.push({
+                        label: `$${fn}`,
+                        kind: CompletionItemKind.Function,
+                        insertText: `${fn}($0)`,
+                        insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
+                        detail: 'Built-in JSONata function',
+                    });
+                }
             }
-        }
-        else if (field.fieldType === 'ARRAY' && field.required) {
-            total++;
-            const val = mapping[field.name];
-            if (typeof val === 'string' && val.trim().length > 0) {
-                mapped++;
+            // After "$doc." — suggest document paths
+            if (/\$doc\.\s*$/.test(textUntilPosition) || /\$doc\.[a-zA-Z_]*$/.test(textUntilPosition)) {
+                const docPaths = jsonataCompletionData.suggestions?.doc || [];
+                for (const path of docPaths) {
+                    suggestions.push({
+                        label: path,
+                        kind: CompletionItemKind.Field,
+                        insertText: path,
+                        detail: 'Document field',
+                    });
+                }
             }
-            else if (typeof val === 'object' && val !== null && '_source' in val) {
-                if (typeof val['_source'] === 'string' && val['_source'].trim().length > 0) {
-                    mapped++;
+            // After "$pv." — suggest process variables
+            if (/\$pv\.\s*$/.test(textUntilPosition) || /\$pv\.[a-zA-Z_]*$/.test(textUntilPosition)) {
+                const pvNames = jsonataCompletionData.suggestions?.pv || [];
+                for (const name of pvNames) {
+                    suggestions.push({
+                        label: name,
+                        kind: CompletionItemKind.Variable,
+                        insertText: name,
+                        detail: 'Process variable',
+                    });
                 }
             }
-        }
-        else if (field.fieldType === 'OBJECT' && field.children) {
-            const nested = (typeof mapping[field.name] === 'object' && mapping[field.name] !== null)
-                ? mapping[field.name]
-                : {};
-            const childStats = countRequiredMapped(field.children, nested);
-            mapped += childStats.mapped;
-            total += childStats.total;
-        }
-    }
-    return { mapped, total };
+            return { suggestions };
+        },
+    });
 }
 
-/**
- * Reusable 3-mode input (browse / pv / expression) for value resolver expressions.
- * Used by both ScalarFieldComponent and ArrayFieldComponent for source mapping.
- */
-class ValueInputComponent {
-    cdr;
-    name = '';
-    value = '';
-    pluginId = '';
-    caseDefinitionKey = null;
-    processVariables = [];
+const jsonata$1 = _jsonata.default || _jsonata;
+class JsonataEditorComponent {
+    expression = '';
     disabled = false;
-    placeholder = 'e.g. pv:variableName or doc:path.to.field';
-    valueChange = new EventEmitter();
-    ValuePathSelectorPrefix = ValuePathSelectorPrefix;
-    inputMode = 'browse';
-    selectedPv = '';
-    browseDefault = '';
-    constructor(cdr) {
-        this.cdr = cdr;
+    suggestions = null;
+    functions = [];
+    expressionChange = new EventEmitter();
+    validChange = new EventEmitter();
+    editorModel = { value: '', language: 'jsonata' };
+    editorOptions = {
+        minimap: { enabled: false },
+        lineNumbers: 'on',
+        scrollBeyondLastLine: false,
+        fontSize: 13,
+        tabSize: 2,
+        wordWrap: 'on',
+        renderWhitespace: 'none',
+    };
+    error = null;
+    destroy$ = new Subject();
+    validate$ = new Subject();
+    suppressChange = false;
+    languageRegistered = false;
+    constructor() {
+        this.validate$.pipe(debounceTime(300), takeUntil(this.destroy$)).subscribe((value) => {
+            this.validateExpression(value);
+        });
+        // Try to register language eagerly if Monaco is already loaded
+        this.tryRegisterLanguage();
     }
     ngOnChanges(changes) {
-        if (changes['value']) {
-            this.inputMode = this.detectInputMode(this.value);
-            this.browseDefault = normalizeToDots(this.value);
-            this.selectedPv = extractPvName(this.value);
+        if (changes['expression'] && !this.suppressChange) {
+            this.editorModel = { value: this.expression || '', language: 'jsonata' };
+            this.validate$.next(this.expression);
         }
-        if (changes['processVariables']) {
-            this.cdr.markForCheck();
+        if (changes['suggestions']) {
+            jsonataCompletionData.suggestions = this.suggestions;
+        }
+        if (changes['functions']) {
+            jsonataCompletionData.functions = this.functions;
         }
     }
-    setInputMode(mode) {
-        this.inputMode = mode;
-    }
-    onBrowseValueChange(newValue) {
-        this.valueChange.emit(normalizeToDots(newValue));
-    }
-    onPvChange(newValue) {
-        this.selectedPv = newValue;
-        this.valueChange.emit(newValue ? 'pv:' + newValue : '');
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
     }
-    onExpressionValueChange(newValue) {
-        this.valueChange.emit(newValue);
+    onEditorValueChange(value) {
+        // Register language on first editor event (Monaco is now loaded)
+        if (!this.languageRegistered) {
+            this.tryRegisterLanguage();
+        }
+        if (this.suppressChange)
+            return;
+        this.suppressChange = true;
+        this.expression = value;
+        this.expressionChange.emit(value);
+        this.validate$.next(value);
+        setTimeout(() => (this.suppressChange = false));
+    }
+    tryRegisterLanguage() {
+        const m = window.monaco;
+        if (m) {
+            registerJsonataLanguage(m);
+            this.languageRegistered = true;
+            jsonataCompletionData.suggestions = this.suggestions;
+            jsonataCompletionData.functions = this.functions;
+        }
     }
-    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';
+    validateExpression(value) {
+        if (!value || !value.trim()) {
+            this.error = null;
+            this.validChange.emit(true);
+            return;
+        }
+        try {
+            jsonata$1(value);
+            this.error = null;
+            this.validChange.emit(true);
+        }
+        catch (e) {
+            this.error = e.message || 'Invalid expression';
+            this.validChange.emit(false);
+        }
     }
-    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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: JsonataEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: JsonataEditorComponent, isStandalone: true, selector: "epistola-jsonata-editor", inputs: { expression: "expression", disabled: "disabled", suggestions: "suggestions", functions: "functions" }, outputs: { expressionChange: "expressionChange", validChange: "validChange" }, usesOnChanges: true, ngImport: i0, template: `
+    <div class="jsonata-editor">
+      <valtimo-editor
+        [model]="editorModel"
+        [editorOptions]="editorOptions"
+        [disabled]="disabled"
+        [heightPx]="250"
+        [formatOnLoad]="false"
+        (valueChangeEvent)="onEditorValueChange($event)"
+      ></valtimo-editor>
+      <div class="jsonata-editor__footer">
+        <span *ngIf="error" class="jsonata-editor__error">{{ error }}</span>
+        <span *ngIf="!error && expression" class="jsonata-editor__valid">&#x2713;</span>
+        <span class="jsonata-editor__variables">$doc · $pv · $case</span>
+      </div>
+    </div>
+  `, isInline: true, styles: [".jsonata-editor__footer{display:flex;align-items:center;gap:8px;margin-top:4px;font-size:.8em}.jsonata-editor__error{color:#da1e28}.jsonata-editor__valid{color:#198038}.jsonata-editor__variables{margin-left:auto;color:#8d8d8d;font-family:monospace}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: PluginTranslatePipeModule }, { kind: "ngmodule", type: EditorModule }, { kind: "component", type: i3.EditorComponent, selector: "valtimo-editor", inputs: ["editorOptions", "model", "disabled", "formatOnLoad", "widthPx", "heightPx", "heightStyle", "jsonSchema", "fitPage", "fitPageSpaceAdjustment"], outputs: ["validEvent", "valueChangeEvent"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ValueInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: JsonataEditorComponent, 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: [{
+            args: [{ selector: 'epistola-jsonata-editor', standalone: true, imports: [CommonModule, PluginTranslatePipeModule, EditorModule], template: `
+    <div class="jsonata-editor">
+      <valtimo-editor
+        [model]="editorModel"
+        [editorOptions]="editorOptions"
+        [disabled]="disabled"
+        [heightPx]="250"
+        [formatOnLoad]="false"
+        (valueChangeEvent)="onEditorValueChange($event)"
+      ></valtimo-editor>
+      <div class="jsonata-editor__footer">
+        <span *ngIf="error" class="jsonata-editor__error">{{ error }}</span>
+        <span *ngIf="!error && expression" class="jsonata-editor__valid">&#x2713;</span>
+        <span class="jsonata-editor__variables">$doc · $pv · $case</span>
+      </div>
+    </div>
+  `, styles: [".jsonata-editor__footer{display:flex;align-items:center;gap:8px;margin-top:4px;font-size:.8em}.jsonata-editor__error{color:#da1e28}.jsonata-editor__valid{color:#198038}.jsonata-editor__variables{margin-left:auto;color:#8d8d8d;font-family:monospace}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { expression: [{
                 type: Input
             }], disabled: [{
                 type: Input
-            }], placeholder: [{
+            }], suggestions: [{
                 type: Input
-            }], valueChange: [{
+            }], functions: [{
+                type: Input
+            }], expressionChange: [{
+                type: Output
+            }], validChange: [{
                 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);
+
+class ExpectedStructureComponent {
+    templateFields = [];
+    structureText = '{}';
+    ngOnChanges(changes) {
+        if (changes['templateFields']) {
+            this.structureText = this.buildStructure(this.templateFields, 0);
+        }
     }
-    return '';
+    buildStructure(fields, depth) {
+        if (!fields || fields.length === 0)
+            return '{}';
+        const indent = '  '.repeat(depth + 1);
+        const closing = '  '.repeat(depth);
+        const lines = fields.map((f) => {
+            const req = f.required ? ' (required)' : '';
+            if (f.fieldType === 'OBJECT' && f.children?.length) {
+                const nested = this.buildStructure(f.children, depth + 1);
+                return `${indent}"${f.name}": ${nested}${req}`;
+            }
+            if (f.fieldType === 'ARRAY') {
+                if (f.children?.length) {
+                    const itemStructure = this.buildStructure(f.children, depth + 2);
+                    return `${indent}"${f.name}": [${itemStructure}]${req}`;
+                }
+                return `${indent}"${f.name}": array${req}`;
+            }
+            return `${indent}"${f.name}": ${f.type || 'any'}${req}`;
+        });
+        return `{\n${lines.join(',\n')}\n${closing}}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ExpectedStructureComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: ExpectedStructureComponent, isStandalone: true, selector: "epistola-expected-structure", inputs: { templateFields: "templateFields" }, usesOnChanges: true, ngImport: i0, template: `
+    <div class="expected">
+      <div class="expected__header">
+        {{ 'expectedStructure' | pluginTranslate: 'epistola' | async }}
+      </div>
+      <div *ngIf="!templateFields || templateFields.length === 0" class="expected__empty">
+        {{ 'expectedStructureLoading' | pluginTranslate: 'epistola' | async }}
+      </div>
+      <pre *ngIf="templateFields && templateFields.length > 0" class="expected__code">{{
+        structureText
+      }}</pre>
+    </div>
+  `, isInline: true, styles: [".expected{border:1px solid #e0e0e0;border-radius:4px;overflow:hidden;height:100%;display:flex;flex-direction:column}.expected__header{padding:6px 12px;background:#f4f4f4;border-bottom:1px solid #e0e0e0;font-size:.75em;color:#6f6f6f;text-transform:uppercase;letter-spacing:.5px}.expected__code{flex:1;font-family:IBM Plex Mono,monospace;font-size:.8em;line-height:1.5;margin:0;padding:8px 12px;white-space:pre-wrap;overflow-y:auto}.expected__empty{padding:8px 12px;color:#8d8d8d;font-size:.85em;font-style:italic}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: PluginTranslatePipeModule }, { kind: "pipe", type: i2$1.PluginTranslatePipe, name: "pluginTranslate" }] });
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ExpectedStructureComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'epistola-expected-structure', standalone: true, imports: [CommonModule, PluginTranslatePipeModule], template: `
+    <div class="expected">
+      <div class="expected__header">
+        {{ 'expectedStructure' | pluginTranslate: 'epistola' | async }}
+      </div>
+      <div *ngIf="!templateFields || templateFields.length === 0" class="expected__empty">
+        {{ 'expectedStructureLoading' | pluginTranslate: 'epistola' | async }}
+      </div>
+      <pre *ngIf="templateFields && templateFields.length > 0" class="expected__code">{{
+        structureText
+      }}</pre>
+    </div>
+  `, styles: [".expected{border:1px solid #e0e0e0;border-radius:4px;overflow:hidden;height:100%;display:flex;flex-direction:column}.expected__header{padding:6px 12px;background:#f4f4f4;border-bottom:1px solid #e0e0e0;font-size:.75em;color:#6f6f6f;text-transform:uppercase;letter-spacing:.5px}.expected__code{flex:1;font-family:IBM Plex Mono,monospace;font-size:.8em;line-height:1.5;margin:0;padding:8px 12px;white-space:pre-wrap;overflow-y:auto}.expected__empty{padding:8px 12px;color:#8d8d8d;font-size:.85em;font-style:italic}\n"] }]
+        }], propDecorators: { templateFields: [{
+                type: Input
+            }] } });
 
-class ScalarFieldComponent {
+class BuilderFieldComponent {
     field;
-    value = undefined;
-    pluginId;
-    caseDefinitionKey = null;
-    processVariables = [];
+    path = [];
+    suggestions = [];
     disabled = false;
+    collapsed = false;
+    required = false;
+    collapsedPaths = new Set();
     valueChange = new EventEmitter();
-    get stringValue() {
-        return typeof this.value === 'string' ? this.value : '';
-    }
-    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 });
+    modeToggle = new EventEmitter();
+    collapseToggle = new EventEmitter();
+    isChildCollapsed(childIndex) {
+        return this.collapsedPaths.has(this.path.concat(childIndex).join('.'));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: BuilderFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: BuilderFieldComponent, isStandalone: true, selector: "epistola-builder-field", inputs: { field: "field", path: "path", suggestions: "suggestions", disabled: "disabled", collapsed: "collapsed", required: "required", collapsedPaths: "collapsedPaths" }, outputs: { valueChange: "valueChange", modeToggle: "modeToggle", collapseToggle: "collapseToggle" }, ngImport: i0, template: `
+    <div class="builder-field">
+      <div
+        class="builder-field__name"
+        [class.builder-field__name--clickable]="field.children"
+        (click)="field.children && collapseToggle.emit(path)"
+      >
+        <span *ngIf="field.children" class="builder-field__chevron">{{
+          collapsed ? '&#x25B6;' : '&#x25BC;'
+        }}</span>
+        <span class="builder-field__label">{{ field.name }}</span>
+        <span *ngIf="required" class="builder-field__required">*</span>
+        <span *ngIf="field.children" class="builder-field__type">(object)</span>
+      </div>
+
+      <div class="builder-field__value" *ngIf="!field.children">
+        <input
+          *ngIf="field.mode === 'ref'"
+          type="text"
+          class="builder-field__input"
+          [ngModel]="field.value"
+          (ngModelChange)="valueChange.emit({ path: path, value: $event })"
+          [disabled]="disabled"
+          placeholder="$doc.path.to.field"
+          [attr.list]="'suggestions-' + path.join('-')"
+        />
+        <datalist *ngIf="field.mode === 'ref'" [id]="'suggestions-' + path.join('-')">
+          <option *ngFor="let s of suggestions" [value]="s"></option>
+        </datalist>
+        <input
+          *ngIf="field.mode === 'raw'"
+          type="text"
+          class="builder-field__input builder-field__input--raw"
+          [ngModel]="field.value"
+          (ngModelChange)="valueChange.emit({ path: path, value: $event })"
+          [disabled]="disabled"
+          placeholder="JSONata expression"
+        />
+        <button
+          class="builder-field__mode-toggle"
+          (click)="modeToggle.emit(path)"
+          [disabled]="disabled"
+          [title]="field.mode === 'ref' ? 'Switch to raw JSONata' : 'Switch to reference'"
+        >
+          {{ field.mode === 'ref' ? 'fx' : '·' }}
+        </button>
+      </div>
+
+      <div *ngIf="field.children && !collapsed" class="builder-field__children">
+        <epistola-builder-field
+          *ngFor="let child of field.children; let j = index"
+          [field]="child"
+          [path]="path.concat(j)"
+          [suggestions]="suggestions"
+          [disabled]="disabled"
+          [collapsed]="isChildCollapsed(j)"
+          [collapsedPaths]="collapsedPaths"
+          [required]="false"
+          (valueChange)="valueChange.emit($event)"
+          (modeToggle)="modeToggle.emit($event)"
+          (collapseToggle)="collapseToggle.emit($event)"
+        ></epistola-builder-field>
+      </div>
+    </div>
+  `, isInline: true, styles: [".builder-field{margin-bottom:4px}.builder-field__name{margin-bottom:2px}.builder-field__name--clickable{cursor:pointer;-webkit-user-select:none;user-select:none}.builder-field__name--clickable:hover{color:#0f62fe}.builder-field__chevron{font-size:.7em;margin-right:4px}.builder-field__label{font-weight:500;font-size:.9em}.builder-field__required{color:#da1e28;margin-left:2px}.builder-field__type{color:#8d8d8d;font-size:.8em;margin-left:4px}.builder-field__value{display:flex;align-items:center;gap:4px}.builder-field__input{flex:1;padding:6px 8px;border:1px solid #e0e0e0;border-radius:4px;font-size:.85em;font-family:IBM Plex Mono,monospace}.builder-field__input:focus{outline:2px solid #0f62fe;border-color:#0f62fe}.builder-field__input--raw{background:#f4f4f4}.builder-field__mode-toggle{width:28px;height:28px;border:1px solid #e0e0e0;border-radius:4px;background:#fff;cursor:pointer;font-family:monospace;font-size:.8em;display:flex;align-items:center;justify-content:center}.builder-field__mode-toggle:hover{background:#f4f4f4}.builder-field__children{border-left:2px solid #e0e0e0;padding-left:12px;margin-top:4px}\n"], dependencies: [{ kind: "component", type: BuilderFieldComponent, selector: "epistola-builder-field", inputs: ["field", "path", "suggestions", "disabled", "collapsed", "required", "collapsedPaths"], outputs: ["valueChange", "modeToggle", "collapseToggle"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ScalarFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: BuilderFieldComponent, 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"] }]
+            args: [{ selector: 'epistola-builder-field', standalone: true, imports: [CommonModule, FormsModule], template: `
+    <div class="builder-field">
+      <div
+        class="builder-field__name"
+        [class.builder-field__name--clickable]="field.children"
+        (click)="field.children && collapseToggle.emit(path)"
+      >
+        <span *ngIf="field.children" class="builder-field__chevron">{{
+          collapsed ? '&#x25B6;' : '&#x25BC;'
+        }}</span>
+        <span class="builder-field__label">{{ field.name }}</span>
+        <span *ngIf="required" class="builder-field__required">*</span>
+        <span *ngIf="field.children" class="builder-field__type">(object)</span>
+      </div>
+
+      <div class="builder-field__value" *ngIf="!field.children">
+        <input
+          *ngIf="field.mode === 'ref'"
+          type="text"
+          class="builder-field__input"
+          [ngModel]="field.value"
+          (ngModelChange)="valueChange.emit({ path: path, value: $event })"
+          [disabled]="disabled"
+          placeholder="$doc.path.to.field"
+          [attr.list]="'suggestions-' + path.join('-')"
+        />
+        <datalist *ngIf="field.mode === 'ref'" [id]="'suggestions-' + path.join('-')">
+          <option *ngFor="let s of suggestions" [value]="s"></option>
+        </datalist>
+        <input
+          *ngIf="field.mode === 'raw'"
+          type="text"
+          class="builder-field__input builder-field__input--raw"
+          [ngModel]="field.value"
+          (ngModelChange)="valueChange.emit({ path: path, value: $event })"
+          [disabled]="disabled"
+          placeholder="JSONata expression"
+        />
+        <button
+          class="builder-field__mode-toggle"
+          (click)="modeToggle.emit(path)"
+          [disabled]="disabled"
+          [title]="field.mode === 'ref' ? 'Switch to raw JSONata' : 'Switch to reference'"
+        >
+          {{ field.mode === 'ref' ? 'fx' : '·' }}
+        </button>
+      </div>
+
+      <div *ngIf="field.children && !collapsed" class="builder-field__children">
+        <epistola-builder-field
+          *ngFor="let child of field.children; let j = index"
+          [field]="child"
+          [path]="path.concat(j)"
+          [suggestions]="suggestions"
+          [disabled]="disabled"
+          [collapsed]="isChildCollapsed(j)"
+          [collapsedPaths]="collapsedPaths"
+          [required]="false"
+          (valueChange)="valueChange.emit($event)"
+          (modeToggle)="modeToggle.emit($event)"
+          (collapseToggle)="collapseToggle.emit($event)"
+        ></epistola-builder-field>
+      </div>
+    </div>
+  `, styles: [".builder-field{margin-bottom:4px}.builder-field__name{margin-bottom:2px}.builder-field__name--clickable{cursor:pointer;-webkit-user-select:none;user-select:none}.builder-field__name--clickable:hover{color:#0f62fe}.builder-field__chevron{font-size:.7em;margin-right:4px}.builder-field__label{font-weight:500;font-size:.9em}.builder-field__required{color:#da1e28;margin-left:2px}.builder-field__type{color:#8d8d8d;font-size:.8em;margin-left:4px}.builder-field__value{display:flex;align-items:center;gap:4px}.builder-field__input{flex:1;padding:6px 8px;border:1px solid #e0e0e0;border-radius:4px;font-size:.85em;font-family:IBM Plex Mono,monospace}.builder-field__input:focus{outline:2px solid #0f62fe;border-color:#0f62fe}.builder-field__input--raw{background:#f4f4f4}.builder-field__mode-toggle{width:28px;height:28px;border:1px solid #e0e0e0;border-radius:4px;background:#fff;cursor:pointer;font-family:monospace;font-size:.8em;display:flex;align-items:center;justify-content:center}.builder-field__mode-toggle:hover{background:#f4f4f4}.builder-field__children{border-left:2px solid #e0e0e0;padding-left:12px;margin-top:4px}\n"] }]
         }], propDecorators: { field: [{
                 type: Input
-            }], value: [{
+            }], path: [{
                 type: Input
-            }], pluginId: [{
+            }], suggestions: [{
                 type: Input
-            }], caseDefinitionKey: [{
+            }], disabled: [{
                 type: Input
-            }], processVariables: [{
+            }], collapsed: [{
                 type: Input
-            }], disabled: [{
+            }], required: [{
+                type: Input
+            }], collapsedPaths: [{
                 type: Input
             }], valueChange: [{
                 type: Output
+            }], modeToggle: [{
+                type: Output
+            }], collapseToggle: [{
+                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;
-            }
+const jsonata = _jsonata.default || _jsonata;
+/**
+ * Parse a JSONata expression into BuilderField array.
+ * Only supports top-level object literals with simple path references or nested objects.
+ * Anything else is stored as raw JSONata text.
+ */
+function parseJsonataToBuilder(expression) {
+    if (!expression || !expression.trim()) {
+        return [];
+    }
+    try {
+        const ast = jsonata(expression).ast();
+        if (ast.type === 'unary' && ast.value === '{') {
+            return parseObjectEntries(ast.lhs, expression);
         }
+        // Not a top-level object — can't represent in builder
+        return [{ name: '_root', mode: 'raw', value: expression }];
     }
-    toggleExpanded() {
-        this.expanded = !this.expanded;
+    catch {
+        // Invalid JSONata — return as single raw field
+        return [{ name: '_root', mode: 'raw', value: expression }];
     }
-    getSourceValue() {
-        if (typeof this.value === 'string') {
-            return normalizeToDots(this.value);
-        }
-        if (typeof this.value === 'object' && this.value !== null && '_source' in this.value) {
-            return normalizeToDots(this.value['_source'] || '');
-        }
+}
+/**
+ * Convert BuilderField array back to a JSONata expression string.
+ */
+function builderToJsonata(fields) {
+    if (fields.length === 0) {
         return '';
     }
-    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);
+    // Special case: single _root raw field means the whole expression is raw
+    if (fields.length === 1 && fields[0].name === '_root' && fields[0].mode === 'raw') {
+        return fields[0].value;
+    }
+    const entries = fields.map((field) => formatFieldEntry(field)).filter(Boolean);
+    return `{\n${entries.join(',\n')}\n}`;
+}
+/**
+ * Check if a JSONata expression can be fully represented by the builder
+ * (i.e., all fields are simple refs or nested objects of simple refs).
+ */
+function isBuilderCompatible(expression) {
+    const fields = parseJsonataToBuilder(expression);
+    return fields.every((f) => f.mode === 'ref' || (f.children && f.children.every(isFieldSimple)));
+}
+function isFieldSimple(field) {
+    if (field.mode === 'raw')
+        return false;
+    if (field.children)
+        return field.children.every(isFieldSimple);
+    return true;
+}
+function parseObjectEntries(entries, source) {
+    return entries.map(([keyNode, valueNode]) => {
+        const name = keyNode.value;
+        return classifyValue(name, valueNode, source);
+    });
+}
+function classifyValue(name, node, source) {
+    // Simple path reference: $doc.x.y, $pv.x, $case.x — store as JSONata directly
+    if (node.type === 'path' && node.steps?.length > 0 && node.steps[0].type === 'variable') {
+        const varName = node.steps[0].value; // doc, pv, case
+        if (['doc', 'pv', 'case'].includes(varName)) {
+            const path = node.steps
+                .slice(1)
+                .map((s) => s.value)
+                .join('.');
+            return { name, mode: 'ref', value: `$${varName}.${path}` };
         }
     }
-    toggleArrayPerFieldMode() {
-        this.arrayPerFieldMode = !this.arrayPerFieldMode;
-        if (this.arrayPerFieldMode) {
-            const currentSource = this.getSourceValue();
-            this.valueChange.emit({ _source: currentSource });
+    // String literal
+    if (node.type === 'string') {
+        return { name, mode: 'ref', value: `"${node.value}"` };
+    }
+    // Number literal
+    if (node.type === 'number') {
+        return { name, mode: 'ref', value: String(node.value) };
+    }
+    // Boolean literal (value node)
+    if (node.type === 'value' && typeof node.value === 'boolean') {
+        return { name, mode: 'ref', value: String(node.value) };
+    }
+    // Nested object
+    if (node.type === 'unary' && node.value === '{' && node.lhs) {
+        const children = parseObjectEntries(node.lhs, source);
+        return { name, mode: 'ref', value: '', children };
+    }
+    // Anything else: extract raw source text
+    const raw = extractSourceFragment(node, source);
+    return { name, mode: 'raw', value: raw };
+}
+/**
+ * Extract the source text for a node using position info.
+ * Falls back to a generic representation if positions aren't useful.
+ */
+function extractSourceFragment(node, source) {
+    // Try to reconstruct from AST for common patterns
+    if (node.type === 'condition') {
+        const cond = reconstructExpression(node.condition);
+        const then = reconstructExpression(node.then);
+        const els = reconstructExpression(node.else);
+        return `${cond} ? ${then} : ${els}`;
+    }
+    if (node.type === 'binary') {
+        const left = reconstructExpression(node.lhs);
+        const right = reconstructExpression(node.rhs);
+        return `${left} ${node.value} ${right}`;
+    }
+    if (node.type === 'function') {
+        const name = reconstructExpression(node.procedure);
+        const args = (node.arguments || []).map(reconstructExpression).join(', ');
+        return `${name}(${args})`;
+    }
+    // Generic fallback
+    return reconstructExpression(node);
+}
+function reconstructExpression(node) {
+    if (!node)
+        return '';
+    if (node.type === 'string')
+        return `"${node.value}"`;
+    if (node.type === 'number')
+        return String(node.value);
+    if (node.type === 'value')
+        return String(node.value);
+    if (node.type === 'path' && node.steps) {
+        return node.steps.map((s) => (s.type === 'variable' ? `$${s.value}` : s.value)).join('.');
+    }
+    if (node.type === 'binary') {
+        return `${reconstructExpression(node.lhs)} ${node.value} ${reconstructExpression(node.rhs)}`;
+    }
+    if (node.type === 'condition') {
+        return `${reconstructExpression(node.condition)} ? ${reconstructExpression(node.then)} : ${reconstructExpression(node.else)}`;
+    }
+    if (node.type === 'function') {
+        const proc = reconstructExpression(node.procedure);
+        const args = (node.arguments || []).map(reconstructExpression).join(', ');
+        return `${proc}(${args})`;
+    }
+    if (node.type === 'unary' && node.value === '{') {
+        const entries = (node.lhs || [])
+            .map(([k, v]) => `"${k.value}": ${reconstructExpression(v)}`)
+            .join(', ');
+        return `{${entries}}`;
+    }
+    return '...';
+}
+function formatFieldEntry(field, indent = '  ') {
+    if (field.children && field.children.length > 0) {
+        const childEntries = field.children.map((c) => formatFieldEntry(c, indent + '  ')).join(',\n');
+        return `${indent}"${field.name}": {\n${childEntries}\n${indent}}`;
+    }
+    // Value is already valid JSONata (e.g. $doc.x.y, "string", 42, or raw expression)
+    const value = field.value || 'null';
+    return `${indent}"${field.name}": ${value}`;
+}
+
+class MappingBuilderComponent {
+    expression = '';
+    templateFields = [];
+    suggestions = null;
+    disabled = false;
+    expressionChange = new EventEmitter();
+    fields = [];
+    allSuggestions = [];
+    collapsedPaths = new Set();
+    initialCollapseApplied = false;
+    ngOnChanges(changes) {
+        // Skip re-parse only when expression alone changed (from our own emit)
+        const expressionChanged = !!changes['expression'];
+        const templateFieldsChanged = !!changes['templateFields'];
+        if (expressionChanged && !templateFieldsChanged && !changes['expression'].firstChange) {
+            return; // Don't re-parse when we emit changes ourselves
         }
-        else {
-            const source = this.getSourceValue();
-            this.valueChange.emit(source || undefined);
+        if (expressionChanged || templateFieldsChanged) {
+            this.rebuildFields();
+            if (!this.initialCollapseApplied && this.fields.length > 0) {
+                this.collapseAll();
+                this.initialCollapseApplied = true;
+            }
         }
-    }
-    onItemFieldChange(childName, sourceFieldName) {
-        const current = (typeof this.value === 'object' && this.value !== null) ? { ...this.value } : { _source: '' };
-        if (sourceFieldName && sourceFieldName.trim().length > 0) {
-            current[childName] = sourceFieldName;
+        if (changes['suggestions']) {
+            this.buildSuggestionList();
         }
-        else {
-            delete current[childName];
+    }
+    onNestedValueChange(path, value) {
+        const field = this.getFieldAtPath(path);
+        if (field) {
+            field.value = value;
+            this.emit();
         }
-        this.valueChange.emit(current);
     }
-    getItemFieldValue(childName) {
-        if (typeof this.value === 'object' && this.value !== null) {
-            return this.value[childName] || '';
+    onNestedModeToggle(path) {
+        const field = this.getFieldAtPath(path);
+        if (field) {
+            field.mode = field.mode === 'ref' ? 'raw' : 'ref';
+            this.emit();
         }
-        return '';
     }
-    hasArrayChildren() {
-        return !!(this.field?.children && this.field.children.length > 0);
+    isRequired(fieldName) {
+        return this.templateFields?.find((tf) => tf.name === fieldName)?.required ?? false;
     }
-    updateCompleteness() {
-        if (!this.field?.children || this.field.children.length === 0) {
-            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) {
-            let total = 0;
-            let mapped = 0;
-            if (this.field?.required) {
-                total++;
-                if (this.value['_source'] && this.value['_source'].trim().length > 0) {
-                    mapped++;
-                }
-            }
-            for (const child of this.field.children) {
-                if (child.required) {
-                    total++;
-                    const val = this.value[child.name];
-                    if (typeof val === 'string' && val.trim().length > 0) {
-                        mapped++;
-                    }
-                }
-            }
-            this.mappedCount = mapped;
-            this.totalRequired = total;
+    isCollapsed(path) {
+        return this.collapsedPaths.has(path.join('.'));
+    }
+    toggleCollapse(path) {
+        const key = path.join('.');
+        if (this.collapsedPaths.has(key)) {
+            this.collapsedPaths.delete(key);
         }
         else {
-            this.totalRequired = this.field?.required ? 1 : 0;
-            this.mappedCount = this.getSourceValue() ? (this.field?.required ? 1 : 0) : 0;
+            this.collapsedPaths.add(key);
         }
     }
-    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;
+    collapseAll() {
+        this.collapsedPaths.clear();
+        this.fields.forEach((field, i) => {
+            if (field.children) {
+                this.collapsedPaths.add(String(i));
+                this.collapseChildren(field.children, [i]);
             }
-            if (!this.expanded && this.totalRequired > 0 && this.mappedCount < this.totalRequired) {
-                this.expanded = true;
+        });
+    }
+    collapseChildren(children, parentPath) {
+        children.forEach((child, j) => {
+            if (child.children) {
+                this.collapsedPaths.add([...parentPath, j].join('.'));
+                this.collapseChildren(child.children, [...parentPath, j]);
             }
+        });
+    }
+    getFieldAtPath(path) {
+        if (path.length === 0)
+            return null;
+        let current = this.fields[path[0]];
+        for (let i = 1; i < path.length; i++) {
+            if (!current.children)
+                return null;
+            current = current.children[path[i]];
         }
+        return current;
     }
-    toggleExpanded() {
-        this.expanded = !this.expanded;
+    emit() {
+        const jsonata = builderToJsonata(this.fields);
+        this.expressionChange.emit(jsonata);
     }
-    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;
+    /**
+     * Ensure all template fields have a corresponding builder field.
+     * Adds missing fields with empty values.
+     */
+    buildSuggestionList() {
+        if (!this.suggestions) {
+            this.allSuggestions = [];
+            return;
         }
-        this.valueChange.emit(Object.keys(current).length > 0 ? current : undefined);
+        const docSuggestions = (this.suggestions.doc || []).map((p) => `$doc.${p}`);
+        const pvSuggestions = (this.suggestions.pv || []).map((p) => `$pv.${p}`);
+        this.allSuggestions = [...docSuggestions, ...pvSuggestions];
     }
-    getChildValue(childName) {
-        if (typeof this.value === 'object' && this.value !== null) {
-            return this.value[childName];
+    /**
+     * Rebuild fields using template fields as the source of truth.
+     * Expression values fill in where available; unmapped fields show empty.
+     */
+    rebuildFields() {
+        const parsed = parseJsonataToBuilder(this.expression);
+        const parsedByName = new Map(parsed.map((f) => [f.name, f]));
+        if (!this.templateFields || this.templateFields.length === 0) {
+            // No template fields yet — use whatever we parsed
+            this.fields = parsed;
+            return;
+        }
+        // Template fields drive the structure
+        this.fields = this.templateFields.map((tf) => {
+            const existing = parsedByName.get(tf.name);
+            if (existing) {
+                return existing;
+            }
+            if (tf.fieldType === 'OBJECT' && tf.children?.length) {
+                return {
+                    name: tf.name,
+                    mode: 'ref',
+                    value: '',
+                    children: tf.children.map((c) => ({ name: c.name, mode: 'ref', value: '' })),
+                };
+            }
+            return { name: tf.name, mode: 'ref', value: '' };
+        });
+        // Include extra fields from expression not in the template schema
+        for (const p of parsed) {
+            if (!this.templateFields.find((tf) => tf.name === p.name)) {
+                this.fields.push(p);
+            }
         }
-        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: "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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: MappingBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: MappingBuilderComponent, isStandalone: true, selector: "epistola-mapping-builder", inputs: { expression: "expression", templateFields: "templateFields", suggestions: "suggestions", disabled: "disabled" }, outputs: { expressionChange: "expressionChange" }, usesOnChanges: true, ngImport: i0, template: `
+    <div class="mapping-builder">
+      <div
+        *ngIf="fields.length === 0 && (!templateFields || templateFields.length === 0)"
+        class="mapping-builder__empty"
+      >
+        {{ 'noTemplateFields' | pluginTranslate: 'epistola' | async }}
+      </div>
+
+      <epistola-builder-field
+        *ngFor="let field of fields; let i = index"
+        [field]="field"
+        [path]="[i]"
+        [suggestions]="allSuggestions"
+        [disabled]="disabled"
+        [collapsed]="isCollapsed([i])"
+        [collapsedPaths]="collapsedPaths"
+        [required]="isRequired(field.name)"
+        (valueChange)="onNestedValueChange($event.path, $event.value)"
+        (modeToggle)="onNestedModeToggle($event)"
+        (collapseToggle)="toggleCollapse($event)"
+      ></epistola-builder-field>
+    </div>
+  `, isInline: true, styles: [".mapping-builder__empty{color:#6f6f6f;font-size:.9em;padding:12px 0}.mapping-builder__row{margin-bottom:8px}.mapping-builder__row--child{margin-left:20px;margin-bottom:4px}.mapping-builder__name{margin-bottom:2px}.mapping-builder__name--clickable{cursor:pointer;-webkit-user-select:none;user-select:none}.mapping-builder__name--clickable:hover{color:#0f62fe}.mapping-builder__chevron{font-size:.7em;margin-right:4px}.mapping-builder__field-name{font-weight:500;font-size:.9em}.mapping-builder__required{color:#da1e28;margin-left:2px}.mapping-builder__type{color:#8d8d8d;font-size:.8em;margin-left:4px}.mapping-builder__value{display:flex;align-items:center;gap:4px}.mapping-builder__input{flex:1;padding:6px 8px;border:1px solid #e0e0e0;border-radius:4px;font-size:.85em;font-family:IBM Plex Mono,monospace}.mapping-builder__input:focus{outline:2px solid #0f62fe;border-color:#0f62fe}.mapping-builder__input--raw{background:#f4f4f4}.mapping-builder__mode-toggle{width:28px;height:28px;border:1px solid #e0e0e0;border-radius:4px;background:#fff;cursor:pointer;font-family:monospace;font-size:.8em;display:flex;align-items:center;justify-content:center}.mapping-builder__mode-toggle:hover{background:#f4f4f4}.mapping-builder__children{border-left:2px solid #e0e0e0;padding-left:12px;margin-top:4px}\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: "ngmodule", type: PluginTranslatePipeModule }, { kind: "pipe", type: i2$1.PluginTranslatePipe, name: "pluginTranslate" }, { kind: "component", type: BuilderFieldComponent, selector: "epistola-builder-field", inputs: ["field", "path", "suggestions", "disabled", "collapsed", "required", "collapsedPaths"], outputs: ["valueChange", "modeToggle", "collapseToggle"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FieldTreeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: MappingBuilderComponent, decorators: [{
             type: Component,
-            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: [{
-                type: Input
-            }], pluginId: [{
+            args: [{ selector: 'epistola-mapping-builder', standalone: true, imports: [CommonModule, FormsModule, PluginTranslatePipeModule, BuilderFieldComponent], template: `
+    <div class="mapping-builder">
+      <div
+        *ngIf="fields.length === 0 && (!templateFields || templateFields.length === 0)"
+        class="mapping-builder__empty"
+      >
+        {{ 'noTemplateFields' | pluginTranslate: 'epistola' | async }}
+      </div>
+
+      <epistola-builder-field
+        *ngFor="let field of fields; let i = index"
+        [field]="field"
+        [path]="[i]"
+        [suggestions]="allSuggestions"
+        [disabled]="disabled"
+        [collapsed]="isCollapsed([i])"
+        [collapsedPaths]="collapsedPaths"
+        [required]="isRequired(field.name)"
+        (valueChange)="onNestedValueChange($event.path, $event.value)"
+        (modeToggle)="onNestedModeToggle($event)"
+        (collapseToggle)="toggleCollapse($event)"
+      ></epistola-builder-field>
+    </div>
+  `, styles: [".mapping-builder__empty{color:#6f6f6f;font-size:.9em;padding:12px 0}.mapping-builder__row{margin-bottom:8px}.mapping-builder__row--child{margin-left:20px;margin-bottom:4px}.mapping-builder__name{margin-bottom:2px}.mapping-builder__name--clickable{cursor:pointer;-webkit-user-select:none;user-select:none}.mapping-builder__name--clickable:hover{color:#0f62fe}.mapping-builder__chevron{font-size:.7em;margin-right:4px}.mapping-builder__field-name{font-weight:500;font-size:.9em}.mapping-builder__required{color:#da1e28;margin-left:2px}.mapping-builder__type{color:#8d8d8d;font-size:.8em;margin-left:4px}.mapping-builder__value{display:flex;align-items:center;gap:4px}.mapping-builder__input{flex:1;padding:6px 8px;border:1px solid #e0e0e0;border-radius:4px;font-size:.85em;font-family:IBM Plex Mono,monospace}.mapping-builder__input:focus{outline:2px solid #0f62fe;border-color:#0f62fe}.mapping-builder__input--raw{background:#f4f4f4}.mapping-builder__mode-toggle{width:28px;height:28px;border:1px solid #e0e0e0;border-radius:4px;background:#fff;cursor:pointer;font-family:monospace;font-size:.8em;display:flex;align-items:center;justify-content:center}.mapping-builder__mode-toggle:hover{background:#f4f4f4}.mapping-builder__children{border-left:2px solid #e0e0e0;padding-left:12px;margin-top:4px}\n"] }]
+        }], propDecorators: { expression: [{
                 type: Input
-            }], caseDefinitionKey: [{
+            }], templateFields: [{
                 type: Input
-            }], processVariables: [{
+            }], suggestions: [{
                 type: Input
             }], disabled: [{
                 type: Input
-            }], valueChange: [{
+            }], expressionChange: [{
                 type: Output
             }] } });
 
-/**
- * Top-level wrapper that hosts FieldTreeComponent instances for each top-level template field.
- * Manages the full nested mapping object, completeness tracking, and emits mapping changes.
- */
-class DataMappingTreeComponent {
-    pluginId;
+class MappingPreviewComponent {
+    epistolaPluginService;
+    expression = '';
     templateFields = [];
-    prefillMapping = {};
-    disabled = false;
     caseDefinitionKey = null;
-    processVariables = [];
-    mappingChange = new EventEmitter();
-    requiredFieldsStatus = new EventEmitter();
-    mapping = {};
+    documentId = '';
+    loading = false;
+    result = null;
+    expectedJson = '';
+    missingRequired = [];
+    destroy$ = new Subject();
+    evaluate$ = new Subject();
+    constructor(epistolaPluginService) {
+        this.epistolaPluginService = epistolaPluginService;
+        this.evaluate$.pipe(debounceTime(300), takeUntil(this.destroy$)).subscribe(() => {
+            this.doEvaluate();
+        });
+    }
     ngOnChanges(changes) {
-        if (changes['prefillMapping']) {
-            const mapping = this.prefillMapping;
-            if (mapping && Object.keys(mapping).length > 0) {
-                this.mapping = { ...mapping };
-            }
+        if (changes['templateFields']) {
+            this.expectedJson = this.buildExpectedJson();
         }
-        if (changes['templateFields'] || changes['prefillMapping']) {
-            this.emitRequiredFieldsStatus();
+        if (changes['expression'] || changes['templateFields']) {
+            this.checkMissingRequired();
         }
     }
-    onFieldValueChange(fieldName, value) {
-        if (value === undefined || value === null || value === '') {
-            const { [fieldName]: _, ...rest } = this.mapping;
-            this.mapping = rest;
-        }
-        else {
-            this.mapping = { ...this.mapping, [fieldName]: value };
-        }
-        this.mappingChange.emit(this.mapping);
-        this.emitRequiredFieldsStatus();
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
     }
-    getFieldValue(fieldName) {
-        return this.mapping[fieldName];
+    runPreview() {
+        this.evaluate$.next();
     }
-    emitRequiredFieldsStatus() {
-        const stats = countRequiredMapped(this.templateFields, this.mapping);
-        this.requiredFieldsStatus.emit(stats);
+    doEvaluate() {
+        if (!this.documentId || !this.expression)
+            return;
+        this.loading = true;
+        this.epistolaPluginService.evaluateMapping(this.expression, this.documentId).subscribe({
+            next: (result) => {
+                this.result = result;
+                this.loading = false;
+                if (result.success) {
+                    this.checkMissingRequired();
+                }
+            },
+            error: (err) => {
+                this.result = { success: false, result: null, error: err.message || 'Request failed' };
+                this.loading = false;
+            },
+        });
     }
-    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" }, 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 });
+    buildExpectedJson() {
+        if (!this.templateFields || this.templateFields.length === 0)
+            return '{}';
+        const obj = {};
+        for (const field of this.templateFields) {
+            const type = field.type || 'any';
+            obj[field.name] = field.required ? `${type} (required)` : type;
+        }
+        return JSON.stringify(obj, null, 2);
+    }
+    checkMissingRequired() {
+        if (!this.templateFields) {
+            this.missingRequired = [];
+            return;
+        }
+        const requiredFields = this.templateFields.filter((f) => f.required).map((f) => f.name);
+        if (!this.result?.success || !this.result.result) {
+            // If no evaluation result yet, check statically from expression
+            this.missingRequired = requiredFields;
+            return;
+        }
+        const producedKeys = new Set(Object.keys(this.result.result));
+        this.missingRequired = requiredFields.filter((f) => !producedKeys.has(f));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: MappingPreviewComponent, deps: [{ token: EpistolaPluginService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: MappingPreviewComponent, isStandalone: true, selector: "epistola-mapping-preview", inputs: { expression: "expression", templateFields: "templateFields", caseDefinitionKey: "caseDefinitionKey" }, usesOnChanges: true, ngImport: i0, template: `
+    <div class="preview">
+      <div class="preview__header">
+        <span class="preview__title">{{
+          'previewTitle' | pluginTranslate: 'epistola' | async
+        }}</span>
+        <div class="preview__controls">
+          <input
+            type="text"
+            class="preview__doc-input"
+            [ngModel]="documentId"
+            (ngModelChange)="documentId = $event"
+            [placeholder]="'previewDocPlaceholder' | pluginTranslate: 'epistola' | async"
+          />
+          <button
+            class="preview__run-btn"
+            (click)="runPreview()"
+            [disabled]="!documentId || !expression || loading"
+          >
+            &#x25B6;
+          </button>
+        </div>
+      </div>
+
+      <div class="preview__panels">
+        <!-- Expected structure -->
+        <div class="preview__panel">
+          <div class="preview__panel-label">
+            {{ 'previewExpected' | pluginTranslate: 'epistola' | async }}
+          </div>
+          <pre class="preview__code">{{ expectedJson }}</pre>
+        </div>
+
+        <!-- Produced output -->
+        <div class="preview__panel">
+          <div class="preview__panel-label">
+            {{ 'previewProduced' | pluginTranslate: 'epistola' | async }}
+          </div>
+          <div *ngIf="loading" class="preview__loading">...</div>
+          <pre *ngIf="!loading && result?.success" class="preview__code">{{
+            result.result | json
+          }}</pre>
+          <div *ngIf="!loading && result && !result.success" class="preview__error">
+            {{ result.error }}
+          </div>
+          <div *ngIf="!loading && !result" class="preview__placeholder">
+            {{ 'previewRunHint' | pluginTranslate: 'epistola' | async }}
+          </div>
+        </div>
+      </div>
+
+      <!-- Missing fields warning -->
+      <div *ngIf="missingRequired.length > 0" class="preview__warnings">
+        <span class="preview__warning-icon">&#x26A0;</span>
+        {{ 'previewMissing' | pluginTranslate: 'epistola' | async }}:
+        <strong>{{ missingRequired.join(', ') }}</strong>
+      </div>
+    </div>
+  `, isInline: true, styles: [".preview{border:1px solid #e0e0e0;border-radius:4px;margin-top:16px;overflow:hidden}.preview__header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:#f4f4f4;border-bottom:1px solid #e0e0e0}.preview__title{font-weight:600;font-size:.85em}.preview__controls{display:flex;gap:4px}.preview__doc-input{padding:4px 8px;border:1px solid #e0e0e0;border-radius:4px;font-size:.8em;width:220px;font-family:monospace}.preview__run-btn{padding:4px 10px;border:1px solid #0f62fe;border-radius:4px;background:#0f62fe;color:#fff;cursor:pointer;font-size:.8em}.preview__run-btn:disabled{opacity:.4;cursor:not-allowed}.preview__panels{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#e0e0e0}.preview__panel{background:#fff;padding:8px 12px;min-height:80px}.preview__panel-label{font-size:.75em;color:#6f6f6f;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}.preview__code{font-family:IBM Plex Mono,monospace;font-size:.8em;line-height:1.4;margin:0;white-space:pre-wrap;word-break:break-word}.preview__loading{color:#8d8d8d}.preview__error{color:#da1e28;font-size:.85em}.preview__placeholder{color:#8d8d8d;font-size:.85em;font-style:italic}.preview__warnings{padding:8px 12px;background:#fff8e1;border-top:1px solid #e0e0e0;font-size:.85em;color:#663c00}.preview__warning-icon{margin-right:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PluginTranslatePipeModule }, { kind: "pipe", type: i2$1.PluginTranslatePipe, name: "pluginTranslate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DataMappingTreeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: MappingPreviewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'epistola-data-mapping-tree', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        CommonModule,
-                        PluginTranslatePipeModule,
-                        FieldTreeComponent
-                    ], 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: [{
+            args: [{ selector: 'epistola-mapping-preview', standalone: true, imports: [CommonModule, FormsModule, PluginTranslatePipeModule], template: `
+    <div class="preview">
+      <div class="preview__header">
+        <span class="preview__title">{{
+          'previewTitle' | pluginTranslate: 'epistola' | async
+        }}</span>
+        <div class="preview__controls">
+          <input
+            type="text"
+            class="preview__doc-input"
+            [ngModel]="documentId"
+            (ngModelChange)="documentId = $event"
+            [placeholder]="'previewDocPlaceholder' | pluginTranslate: 'epistola' | async"
+          />
+          <button
+            class="preview__run-btn"
+            (click)="runPreview()"
+            [disabled]="!documentId || !expression || loading"
+          >
+            &#x25B6;
+          </button>
+        </div>
+      </div>
+
+      <div class="preview__panels">
+        <!-- Expected structure -->
+        <div class="preview__panel">
+          <div class="preview__panel-label">
+            {{ 'previewExpected' | pluginTranslate: 'epistola' | async }}
+          </div>
+          <pre class="preview__code">{{ expectedJson }}</pre>
+        </div>
+
+        <!-- Produced output -->
+        <div class="preview__panel">
+          <div class="preview__panel-label">
+            {{ 'previewProduced' | pluginTranslate: 'epistola' | async }}
+          </div>
+          <div *ngIf="loading" class="preview__loading">...</div>
+          <pre *ngIf="!loading && result?.success" class="preview__code">{{
+            result.result | json
+          }}</pre>
+          <div *ngIf="!loading && result && !result.success" class="preview__error">
+            {{ result.error }}
+          </div>
+          <div *ngIf="!loading && !result" class="preview__placeholder">
+            {{ 'previewRunHint' | pluginTranslate: 'epistola' | async }}
+          </div>
+        </div>
+      </div>
+
+      <!-- Missing fields warning -->
+      <div *ngIf="missingRequired.length > 0" class="preview__warnings">
+        <span class="preview__warning-icon">&#x26A0;</span>
+        {{ 'previewMissing' | pluginTranslate: 'epistola' | async }}:
+        <strong>{{ missingRequired.join(', ') }}</strong>
+      </div>
+    </div>
+  `, styles: [".preview{border:1px solid #e0e0e0;border-radius:4px;margin-top:16px;overflow:hidden}.preview__header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:#f4f4f4;border-bottom:1px solid #e0e0e0}.preview__title{font-weight:600;font-size:.85em}.preview__controls{display:flex;gap:4px}.preview__doc-input{padding:4px 8px;border:1px solid #e0e0e0;border-radius:4px;font-size:.8em;width:220px;font-family:monospace}.preview__run-btn{padding:4px 10px;border:1px solid #0f62fe;border-radius:4px;background:#0f62fe;color:#fff;cursor:pointer;font-size:.8em}.preview__run-btn:disabled{opacity:.4;cursor:not-allowed}.preview__panels{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#e0e0e0}.preview__panel{background:#fff;padding:8px 12px;min-height:80px}.preview__panel-label{font-size:.75em;color:#6f6f6f;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}.preview__code{font-family:IBM Plex Mono,monospace;font-size:.8em;line-height:1.4;margin:0;white-space:pre-wrap;word-break:break-word}.preview__loading{color:#8d8d8d}.preview__error{color:#da1e28;font-size:.85em}.preview__placeholder{color:#8d8d8d;font-size:.85em;font-style:italic}.preview__warnings{padding:8px 12px;background:#fff8e1;border-top:1px solid #e0e0e0;font-size:.85em;color:#663c00}.preview__warning-icon{margin-right:4px}\n"] }]
+        }], ctorParameters: () => [{ type: EpistolaPluginService }], propDecorators: { expression: [{
                 type: Input
             }], templateFields: [{
                 type: Input
-            }], prefillMapping: [{
-                type: Input
-            }], disabled: [{
-                type: Input
             }], caseDefinitionKey: [{
                 type: Input
-            }], processVariables: [{
-                type: Input
-            }], mappingChange: [{
-                type: Output
-            }], requiredFieldsStatus: [{
-                type: Output
             }] } });
 
 class GenerateDocumentConfigurationComponent {
@@ -686,10 +1467,13 @@ class GenerateDocumentConfigurationComponent {
     variants$ = new BehaviorSubject(initialResource([]));
     environments$ = new BehaviorSubject(initialResource([]));
     templateFields$ = new BehaviorSubject(initialResource([]));
-    dataMapping$ = new BehaviorSubject({});
+    dataMapping$ = new BehaviorSubject('');
+    mappingMode = 'simple';
+    toolsCollapsed = true;
+    activeToolTab = 'preview';
     outputFormatOptions = [
         { id: 'PDF', text: 'PDF' },
-        { id: 'HTML', text: 'HTML' }
+        { id: 'HTML', text: 'HTML' },
     ];
     selectedCatalogId$ = new BehaviorSubject('');
     /** Composite ID: "catalogId/templateId" */
@@ -700,6 +1484,8 @@ class GenerateDocumentConfigurationComponent {
     availableAttributeKeys = [];
     caseDefinitionKey = null;
     processVariables = [];
+    expressionFunctions = [];
+    variableSuggestions = null;
     requiredFieldsStatus = { mapped: 0, total: 0 };
     prefillDataMapping = {};
     destroy$ = new Subject();
@@ -719,6 +1505,7 @@ class GenerateDocumentConfigurationComponent {
         this.initContext();
         this.initPluginConfiguration();
         this.initCascade();
+        this.loadExpressionFunctions();
         this.openSaveSubscription();
     }
     ngOnDestroy() {
@@ -745,8 +1532,8 @@ class GenerateDocumentConfigurationComponent {
         }
         this.handleValid(formValue);
     }
-    onDataMappingChange(mapping) {
-        this.dataMapping$.next(mapping);
+    onDataMappingChange(expression) {
+        this.dataMapping$.next(expression);
         const currentFormValue = this.formValue$.getValue();
         if (currentFormValue) {
             this.handleValid(currentFormValue);
@@ -767,7 +1554,10 @@ class GenerateDocumentConfigurationComponent {
         this.revalidate();
     }
     addAttributeEntry() {
-        this.variantAttributeEntries = [...this.variantAttributeEntries, { key: '', value: '', required: true }];
+        this.variantAttributeEntries = [
+            ...this.variantAttributeEntries,
+            { key: '', value: '', required: true },
+        ];
         this.revalidate();
     }
     removeAttributeEntry(index) {
@@ -817,7 +1607,9 @@ class GenerateDocumentConfigurationComponent {
     }
     initContext() {
         if (this.context$) {
-            this.context$.pipe(takeUntil(this.destroy$), filter(([context]) => context === 'case')).subscribe(([, params]) => {
+            this.context$
+                .pipe(takeUntil$1(this.destroy$), filter(([context]) => context === 'case'))
+                .subscribe(([, params]) => {
                 this.caseDefinitionKey = params.caseDefinitionKey;
                 this.cdr.markForCheck();
             });
@@ -826,10 +1618,12 @@ class GenerateDocumentConfigurationComponent {
     initPluginConfiguration() {
         const sources = [];
         if (this.selectedPluginConfigurationData$) {
-            sources.push(this.selectedPluginConfigurationData$.pipe(filter(config => !!config?.configurationId), map(config => config.configurationId)));
+            sources.push(this.selectedPluginConfigurationData$.pipe(filter((config) => !!config?.configurationId), map((config) => config.configurationId)));
         }
-        sources.push(this.processLinkStateService.selectedProcessLink$.pipe(filter(processLink => !!processLink?.pluginConfigurationId), map(processLink => processLink.pluginConfigurationId)));
-        merge(...sources).pipe(takeUntil(this.destroy$)).subscribe(configurationId => {
+        sources.push(this.processLinkStateService.selectedProcessLink$.pipe(filter((processLink) => !!processLink?.pluginConfigurationId), map((processLink) => processLink.pluginConfigurationId)));
+        merge(...sources)
+            .pipe(takeUntil$1(this.destroy$))
+            .subscribe((configurationId) => {
             this.pluginConfigurationId$.next(configurationId);
         });
     }
@@ -844,87 +1638,134 @@ class GenerateDocumentConfigurationComponent {
      *   prefill + templateFields loaded → seed dataMapping
      */
     initCascade() {
-        const configId$ = this.pluginConfigurationId$.pipe(filter(id => !!id), distinctUntilChanged());
+        const configId$ = this.pluginConfigurationId$.pipe(filter((id) => !!id), distinctUntilChanged());
         // ── Catalogs: load when pluginConfigurationId changes ──
-        configId$.pipe(takeUntil(this.destroy$), tap(() => this.catalogs$.next(loadingResource(this.catalogs$.getValue().data))), switchMap(configurationId => this.epistolaPluginService.getCatalogs(configurationId).pipe(map(catalogs => successResource(catalogs.map(c => ({ id: c.id, text: c.name })))), catchError(() => of(errorResource([], 'Failed to load catalogs')))))).subscribe(resource => this.catalogs$.next(resource));
+        configId$
+            .pipe(takeUntil$1(this.destroy$), tap(() => this.catalogs$.next(loadingResource(this.catalogs$.getValue().data))), switchMap((configurationId) => this.epistolaPluginService.getCatalogs(configurationId).pipe(map((catalogs) => successResource(catalogs.map((c) => ({ id: c.id, text: c.name })))), catchError(() => of(errorResource([], 'Failed to load catalogs'))))))
+            .subscribe((resource) => this.catalogs$.next(resource));
         // ── Environments: load when pluginConfigurationId changes (independent) ──
-        configId$.pipe(takeUntil(this.destroy$), tap(() => this.environments$.next(loadingResource(this.environments$.getValue().data))), switchMap(configurationId => this.epistolaPluginService.getEnvironments(configurationId).pipe(map(envs => successResource(envs.map(e => ({ id: e.id, text: e.name })))), catchError(() => of(errorResource([], 'Failed to load environments')))))).subscribe(resource => this.environments$.next(resource));
+        configId$
+            .pipe(takeUntil$1(this.destroy$), tap(() => this.environments$.next(loadingResource(this.environments$.getValue().data))), switchMap((configurationId) => this.epistolaPluginService.getEnvironments(configurationId).pipe(map((envs) => successResource(envs.map((e) => ({ id: e.id, text: e.name })))), catchError(() => of(errorResource([], 'Failed to load environments'))))))
+            .subscribe((resource) => this.environments$.next(resource));
         // ── Seed selectedCatalogId$ from prefill once catalogs are loaded ──
         combineLatest([
-            this.prefill$.pipe(filter(config => !!config?.catalogId)),
-            this.catalogs$.pipe(filter(c => !c.loading && c.data.length > 0))
-        ]).pipe(takeUntil(this.destroy$), take$1(1)).subscribe(([config]) => {
+            this.prefill$.pipe(filter((config) => !!config?.catalogId)),
+            this.catalogs$.pipe(filter((c) => !c.loading && c.data.length > 0)),
+        ])
+            .pipe(takeUntil$1(this.destroy$), take$1(1))
+            .subscribe(([config]) => {
             this.selectedCatalogId$.next(config.catalogId);
         });
         // ── Templates: load when catalogId changes ──
-        const catalogId$ = this.selectedCatalogId$.pipe(filter(id => !!id), distinctUntilChanged());
-        combineLatest([configId$, catalogId$]).pipe(takeUntil(this.destroy$), tap(() => this.templates$.next(loadingResource(this.templates$.getValue().data))), switchMap(([configurationId, catalogId]) => this.epistolaPluginService.getTemplates(configurationId, catalogId).pipe(map(templates => successResource(templates.map(t => ({ id: t.id, text: t.name })))), catchError(() => of(errorResource([], 'Failed to load templates')))))).subscribe(resource => this.templates$.next(resource));
+        const catalogId$ = this.selectedCatalogId$.pipe(filter((id) => !!id), distinctUntilChanged());
+        combineLatest([configId$, catalogId$])
+            .pipe(takeUntil$1(this.destroy$), tap(() => this.templates$.next(loadingResource(this.templates$.getValue().data))), switchMap(([configurationId, catalogId]) => this.epistolaPluginService.getTemplates(configurationId, catalogId).pipe(map((templates) => successResource(templates.map((t) => ({ id: t.id, text: t.name })))), catchError(() => of(errorResource([], 'Failed to load templates'))))))
+            .subscribe((resource) => this.templates$.next(resource));
         // ── Attributes: load when catalogId changes ──
-        combineLatest([configId$, catalogId$]).pipe(takeUntil(this.destroy$), switchMap(([configurationId, catalogId]) => this.epistolaPluginService.getAttributes(configurationId, catalogId).pipe(catchError(() => of([]))))).subscribe(attributes => {
-            this.availableAttributeKeys = attributes.map(a => a.key).sort();
+        combineLatest([configId$, catalogId$])
+            .pipe(takeUntil$1(this.destroy$), switchMap(([configurationId, catalogId]) => this.epistolaPluginService
+            .getAttributes(configurationId, catalogId)
+            .pipe(catchError(() => of([])))))
+            .subscribe((attributes) => {
+            this.availableAttributeKeys = attributes.map((a) => a.key).sort();
             this.cdr.markForCheck();
         });
         // ── Seed selectedTemplateId$ from prefill once templates are loaded ──
         combineLatest([
-            this.prefill$.pipe(filter(config => !!config?.templateId)),
-            this.templates$.pipe(filter(t => !t.loading && t.data.length > 0))
-        ]).pipe(takeUntil(this.destroy$), take$1(1)).subscribe(([config]) => {
+            this.prefill$.pipe(filter((config) => !!config?.templateId)),
+            this.templates$.pipe(filter((t) => !t.loading && t.data.length > 0)),
+        ])
+            .pipe(takeUntil$1(this.destroy$), take$1(1))
+            .subscribe(([config]) => {
             this.selectedTemplateId$.next(config.templateId);
         });
         // ── Variants: load when templateId changes ──
-        const templateId$ = this.selectedTemplateId$.pipe(filter(id => !!id), distinctUntilChanged());
-        combineLatest([configId$, catalogId$, templateId$]).pipe(takeUntil(this.destroy$), tap(() => this.variants$.next(loadingResource(this.variants$.getValue().data))), switchMap(([configurationId, catalogId, templateId]) => this.epistolaPluginService.getVariants(configurationId, templateId, catalogId).pipe(map(variants => successResource(variants.map(v => ({ id: v.id, text: v.name + this.formatAttributes(v.attributes) })))), catchError(() => of(errorResource([], 'Failed to load variants')))))).subscribe(resource => this.variants$.next(resource));
+        const templateId$ = this.selectedTemplateId$.pipe(filter((id) => !!id), distinctUntilChanged());
+        combineLatest([configId$, catalogId$, templateId$])
+            .pipe(takeUntil$1(this.destroy$), tap(() => this.variants$.next(loadingResource(this.variants$.getValue().data))), switchMap(([configurationId, catalogId, templateId]) => this.epistolaPluginService.getVariants(configurationId, templateId, catalogId).pipe(map((variants) => successResource(variants.map((v) => ({
+            id: v.id,
+            text: v.name + this.formatAttributes(v.attributes),
+        })))), catchError(() => of(errorResource([], 'Failed to load variants'))))))
+            .subscribe((resource) => this.variants$.next(resource));
         // ── Template fields: load when templateId changes ──
-        combineLatest([configId$, catalogId$, templateId$]).pipe(takeUntil(this.destroy$), tap(() => {
+        combineLatest([configId$, catalogId$, templateId$])
+            .pipe(takeUntil$1(this.destroy$), tap(() => {
             this.templateFields$.next(loadingResource(this.templateFields$.getValue().data));
             this.loadProcessVariables();
-        }), switchMap(([configurationId, catalogId, templateId]) => this.epistolaPluginService.getTemplateDetails(configurationId, templateId, catalogId).pipe(map(details => successResource(details.fields || [])), catchError(() => of(errorResource([], 'Failed to load template fields')))))).subscribe(resource => this.templateFields$.next(resource));
+            this.loadVariableSuggestions();
+        }), switchMap(([configurationId, catalogId, templateId]) => this.epistolaPluginService
+            .getTemplateDetails(configurationId, templateId, catalogId)
+            .pipe(map((details) => successResource(details.fields || [])), catchError(() => of(errorResource([], 'Failed to load template fields'))))))
+            .subscribe((resource) => this.templateFields$.next(resource));
         // ── Seed variant + dataMapping from prefill once templateFields are loaded ──
         combineLatest([
-            this.prefill$.pipe(filter(config => !!config?.templateId)),
-            this.templateFields$.pipe(filter(tf => !tf.loading && tf.data.length > 0))
-        ]).pipe(takeUntil(this.destroy$), take$1(1)).subscribe(([config]) => {
+            this.prefill$.pipe(filter((config) => !!config?.templateId)),
+            this.templateFields$.pipe(filter((tf) => !tf.loading && tf.data.length > 0)),
+        ])
+            .pipe(takeUntil$1(this.destroy$), take$1(1))
+            .subscribe(([config]) => {
             if (!config)
                 return;
             // Apply variant prefill
-            if (config.variantAttributes && (Array.isArray(config.variantAttributes) ? config.variantAttributes.length > 0 : 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';
                 if (Array.isArray(config.variantAttributes)) {
-                    this.variantAttributeEntries = config.variantAttributes
-                        .map(e => ({ key: e.key, value: e.value, required: e.required !== false }));
+                    this.variantAttributeEntries = config.variantAttributes.map((e) => ({
+                        key: e.key,
+                        value: e.value,
+                        required: e.required !== false,
+                    }));
                 }
                 else {
-                    this.variantAttributeEntries = Object.entries(config.variantAttributes)
-                        .map(([key, value]) => ({ key, value: String(value), required: true }));
+                    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);
             }
-            // Apply dataMapping prefill — templateFields are guaranteed loaded at this point.
-            // Use setTimeout to ensure the tree component exists in the DOM (after *ngIf resolves)
-            // before setting the prefill, so ngOnChanges fires correctly on the child.
+            // Apply dataMapping prefill (JSONata expression string)
             if (config.dataMapping) {
-                this.dataMapping$.next(config.dataMapping);
-                setTimeout(() => {
-                    this.prefillDataMapping = { ...config.dataMapping };
-                    this.cdr.detectChanges();
-                });
+                const expr = typeof config.dataMapping === 'string' ? config.dataMapping : '';
+                this.dataMapping$.next(expr);
             }
             else {
                 this.cdr.detectChanges();
             }
         });
     }
+    loadExpressionFunctions() {
+        this.epistolaPluginService
+            .getExpressionFunctions()
+            .pipe(takeUntil$1(this.destroy$), catchError(() => of([])))
+            .subscribe((functions) => {
+            this.expressionFunctions = functions;
+            this.cdr.markForCheck();
+        });
+    }
     loadProcessVariables() {
         if (this.caseDefinitionKey) {
-            this.epistolaPluginService.getProcessVariables(this.caseDefinitionKey).pipe(takeUntil(this.destroy$), catchError(() => of([]))).subscribe(variables => {
+            this.epistolaPluginService
+                .getProcessVariables(this.caseDefinitionKey)
+                .pipe(takeUntil$1(this.destroy$), catchError(() => of([])))
+                .subscribe((variables) => {
                 this.processVariables = variables;
                 this.cdr.markForCheck();
             });
         }
     }
+    loadVariableSuggestions() {
+        this.epistolaPluginService
+            .getVariableSuggestions(this.caseDefinitionKey ?? undefined, this.caseDefinitionKey ?? undefined)
+            .pipe(takeUntil$1(this.destroy$), catchError(() => of({ doc: [], pv: [] })))
+            .subscribe((suggestions) => {
+            this.variableSuggestions = suggestions;
+            this.cdr.markForCheck();
+        });
+    }
     handleValid(formValue) {
         const baseComplete = !!(this.selectedCatalogId$.getValue() &&
             formValue?.templateId &&
@@ -933,7 +1774,7 @@ class GenerateDocumentConfigurationComponent {
             formValue?.resultProcessVariable);
         let variantValid = true;
         if (this.variantSelectionMode === 'attributes' && this.variantAttributeEntries.length > 0) {
-            variantValid = this.variantAttributeEntries.every(e => !!e.key && !!e.value);
+            variantValid = this.variantAttributeEntries.every((e) => !!e.key && !!e.value);
         }
         const requiredFieldsMapped = this.requiredFieldsStatus.total === 0 ||
             this.requiredFieldsStatus.mapped === this.requiredFieldsStatus.total;
@@ -957,15 +1798,15 @@ class GenerateDocumentConfigurationComponent {
                         outputFormat: formValue.outputFormat,
                         filename: formValue.filename,
                         correlationId: formValue.correlationId || undefined,
-                        resultProcessVariable: formValue.resultProcessVariable
+                        resultProcessVariable: formValue.resultProcessVariable,
                     };
                     if (this.variantSelectionMode === 'explicit') {
                         config.variantId = formValue.variantId;
                     }
                     else {
                         config.variantAttributes = this.variantAttributeEntries
-                            .filter(e => e.key && e.value)
-                            .map(e => ({ key: e.key, value: e.value, required: e.required }));
+                            .filter((e) => e.key && e.value)
+                            .map((e) => ({ key: e.key, value: e.value, required: e.required }));
                     }
                     this.configuration.emit(config);
                 }
@@ -973,7 +1814,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      catalogs: catalogs$ | async,\n      templates: templates$ | async,\n      variants: variants$ | async,\n      environments: environments$ | async,\n      templateFields: templateFields$ | async,\n      selectedCatalogId: selectedCatalogId$ | async,\n      selectedTemplateId: selectedTemplateId$ | async\n    } as obs\"\n>\n  <v-select\n    name=\"catalogId\"\n    [title]=\"'catalogId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'catalogIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [items]=\"obs.catalogs.data\"\n    [defaultSelectionId]=\"obs.prefill?.catalogId\"\n    [disabled]=\"obs.disabled || obs.catalogs.loading\"\n    [required]=\"true\"\n    [loading]=\"obs.catalogs.loading\"\n  >\n  </v-select>\n  <div *ngIf=\"obs.catalogs.error\" class=\"loading-error\">{{ obs.catalogs.error }}</div>\n\n  <v-select\n    name=\"templateId\"\n    [title]=\"'templateId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'templateIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [items]=\"obs.templates.data\"\n    [defaultSelectionId]=\"obs.prefill?.templateId\"\n    [disabled]=\"obs.disabled || obs.templates.loading || !obs.selectedCatalogId\"\n    [required]=\"true\"\n    [loading]=\"obs.templates.loading\"\n  >\n  </v-select>\n  <div *ngIf=\"obs.templates.error\" class=\"loading-error\">{{ obs.templates.error }}</div>\n\n  <!-- Variant selection mode toggle -->\n  <div class=\"variant-mode-toggle\" *ngIf=\"obs.selectedTemplateId\">\n    <label class=\"variant-mode-label\">{{ '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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: GenerateDocumentConfigurationComponent, isStandalone: true, selector: "epistola-generate-document-configuration", inputs: { save$: "save$", disabled$: "disabled$", pluginId: "pluginId", prefillConfiguration$: "prefillConfiguration$", selectedPluginConfigurationData$: "selectedPluginConfigurationData$", context$: "context$" }, outputs: { valid: "valid", configuration: "configuration" }, ngImport: i0, template: "<v-form\n  (valueChange)=\"formValueChange($event)\"\n  *ngIf=\"{\n    disabled: disabled$ | async,\n    prefill: prefillConfiguration$ ? (prefillConfiguration$ | async) : null,\n    catalogs: catalogs$ | async,\n    templates: templates$ | async,\n    variants: variants$ | async,\n    environments: environments$ | async,\n    templateFields: templateFields$ | async,\n    selectedCatalogId: selectedCatalogId$ | async,\n    selectedTemplateId: selectedTemplateId$ | async,\n  } as obs\"\n>\n  <v-select\n    name=\"catalogId\"\n    [title]=\"'catalogId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'catalogIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [items]=\"obs.catalogs.data\"\n    [defaultSelectionId]=\"obs.prefill?.catalogId\"\n    [disabled]=\"obs.disabled || obs.catalogs.loading\"\n    [required]=\"true\"\n    [loading]=\"obs.catalogs.loading\"\n  >\n  </v-select>\n  <div *ngIf=\"obs.catalogs.error\" class=\"loading-error\">{{ obs.catalogs.error }}</div>\n\n  <v-select\n    name=\"templateId\"\n    [title]=\"'templateId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'templateIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [items]=\"obs.templates.data\"\n    [defaultSelectionId]=\"obs.prefill?.templateId\"\n    [disabled]=\"obs.disabled || obs.templates.loading || !obs.selectedCatalogId\"\n    [required]=\"true\"\n    [loading]=\"obs.templates.loading\"\n  >\n  </v-select>\n  <div *ngIf=\"obs.templates.error\" class=\"loading-error\">{{ obs.templates.error }}</div>\n\n  <!-- Variant selection mode toggle -->\n  <div class=\"variant-mode-toggle\" *ngIf=\"obs.selectedTemplateId\">\n    <label class=\"variant-mode-label\">{{\n      'variantSelectionMode' | pluginTranslate: pluginId | async\n    }}</label>\n    <div class=\"variant-mode-buttons\">\n      <button\n        type=\"button\"\n        class=\"variant-mode-btn\"\n        [class.active]=\"variantSelectionMode === 'explicit'\"\n        (click)=\"onVariantSelectionModeChange('explicit')\"\n        [disabled]=\"obs.disabled\"\n      >\n        {{ 'selectByVariant' | pluginTranslate: pluginId | async }}\n      </button>\n      <button\n        type=\"button\"\n        class=\"variant-mode-btn\"\n        [class.active]=\"variantSelectionMode === 'attributes'\"\n        (click)=\"onVariantSelectionModeChange('attributes')\"\n        [disabled]=\"obs.disabled\"\n      >\n        {{ 'selectByAttributes' | pluginTranslate: pluginId | async }}\n      </button>\n    </div>\n  </div>\n\n  <!-- Explicit variant selection (dropdown) -->\n  <v-select\n    *ngIf=\"variantSelectionMode === 'explicit'\"\n    name=\"variantId\"\n    [title]=\"'variantId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'variantIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [items]=\"obs.variants.data\"\n    [defaultSelectionId]=\"obs.prefill?.variantId\"\n    [disabled]=\"obs.disabled || obs.variants.loading || !obs.selectedTemplateId\"\n    [required]=\"false\"\n    [loading]=\"obs.variants.loading\"\n  >\n  </v-select>\n  <div *ngIf=\"obs.variants.error\" class=\"loading-error\">{{ obs.variants.error }}</div>\n\n  <!-- Attribute-based variant selection -->\n  <div\n    *ngIf=\"variantSelectionMode === 'attributes' && obs.selectedTemplateId\"\n    class=\"variant-attributes-section\"\n  >\n    <label class=\"variant-attributes-label\">{{\n      'variantAttributes' | pluginTranslate: pluginId | async\n    }}</label>\n    <div class=\"variant-attributes-list\">\n      <div\n        *ngFor=\"let entry of variantAttributeEntries; let i = index\"\n        class=\"variant-attribute-row\"\n      >\n        <select\n          *ngIf=\"!entry._customKey\"\n          class=\"variant-attribute-input\"\n          [ngModel]=\"entry.key\"\n          (ngModelChange)=\"onKeySelected(entry, $event)\"\n          [disabled]=\"obs.disabled\"\n        >\n          <option value=\"\" disabled>\n            {{ 'attributeKey' | pluginTranslate: pluginId | async }}\n          </option>\n          <option *ngFor=\"let key of availableAttributeKeys\" [value]=\"key\">{{ key }}</option>\n          <option value=\"__custom__\">\n            {{ 'attributeKeyCustom' | pluginTranslate: pluginId | async }}\n          </option>\n        </select>\n        <div *ngIf=\"entry._customKey\" class=\"custom-key-input\">\n          <input\n            type=\"text\"\n            class=\"variant-attribute-input\"\n            [placeholder]=\"'attributeKey' | pluginTranslate: pluginId | async\"\n            [(ngModel)]=\"entry.key\"\n            (ngModelChange)=\"onAttributeEntryChange()\"\n            [disabled]=\"obs.disabled\"\n          />\n          <button\n            type=\"button\"\n            class=\"custom-key-cancel\"\n            (click)=\"cancelCustomKey(entry)\"\n            [disabled]=\"obs.disabled\"\n          >\n            &times;\n          </button>\n        </div>\n        <input\n          type=\"text\"\n          class=\"variant-attribute-input\"\n          [placeholder]=\"'attributeValue' | pluginTranslate: pluginId | async\"\n          [(ngModel)]=\"entry.value\"\n          (ngModelChange)=\"onAttributeEntryChange()\"\n          [disabled]=\"obs.disabled\"\n        />\n        <label class=\"variant-attribute-required-toggle\">\n          <input\n            type=\"checkbox\"\n            [(ngModel)]=\"entry.required\"\n            (ngModelChange)=\"onAttributeEntryChange()\"\n            [disabled]=\"obs.disabled\"\n          />\n          <span class=\"required-label\">{{\n            (entry.required ? 'attributeRequired' : 'attributePreferred')\n              | pluginTranslate: pluginId\n              | async\n          }}</span>\n        </label>\n        <button\n          type=\"button\"\n          class=\"variant-attribute-remove-btn\"\n          (click)=\"removeAttributeEntry(i)\"\n          [disabled]=\"obs.disabled\"\n          title=\"{{ 'removeAttribute' | pluginTranslate: pluginId | async }}\"\n        >\n          &times;\n        </button>\n      </div>\n    </div>\n    <button\n      type=\"button\"\n      class=\"variant-attribute-add-btn\"\n      (click)=\"addAttributeEntry()\"\n      [disabled]=\"obs.disabled\"\n    >\n      + {{ 'addAttribute' | pluginTranslate: pluginId | async }}\n    </button>\n  </div>\n\n  <v-select\n    name=\"environmentId\"\n    [title]=\"'environmentId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'environmentIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [items]=\"obs.environments.data\"\n    [defaultSelectionId]=\"obs.prefill?.environmentId\"\n    [disabled]=\"obs.disabled || obs.environments.loading\"\n    [required]=\"false\"\n    [loading]=\"obs.environments.loading\"\n  >\n  </v-select>\n  <div *ngIf=\"obs.environments.error\" class=\"loading-error\">{{ obs.environments.error }}</div>\n\n  <v-select\n    name=\"outputFormat\"\n    [title]=\"'outputFormat' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'outputFormatTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [items]=\"outputFormatOptions\"\n    [defaultSelectionId]=\"obs.prefill?.outputFormat || 'PDF'\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-select>\n\n  <v-input\n    name=\"filename\"\n    [title]=\"'filename' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'filenameTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.filename\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"correlationId\"\n    [title]=\"'correlationId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'correlationIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.correlationId\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"false\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"resultProcessVariable\"\n    [title]=\"'resultProcessVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'resultProcessVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.resultProcessVariable\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-input>\n</v-form>\n\n<div *ngIf=\"(templateFields$ | async)?.error as templateFieldsError\" class=\"loading-error\">\n  {{ templateFieldsError }}\n</div>\n\n<div *ngIf=\"selectedTemplateId$ | async\" class=\"mapping-section\">\n  <h5 class=\"mapping-section__title\">\n    {{ 'dataMappingTitle' | pluginTranslate: pluginId | async }}\n  </h5>\n  <p class=\"mapping-section__description\">\n    {{ 'dataMappingDescription' | pluginTranslate: pluginId | async }}\n  </p>\n  <div class=\"mapping-mode-toggle\">\n    <button\n      class=\"mapping-mode-toggle__btn\"\n      [class.mapping-mode-toggle__btn--active]=\"mappingMode === 'simple'\"\n      (click)=\"mappingMode = 'simple'\"\n    >\n      {{ 'mappingModeSimple' | pluginTranslate: pluginId | async }}\n    </button>\n    <button\n      class=\"mapping-mode-toggle__btn\"\n      [class.mapping-mode-toggle__btn--active]=\"mappingMode === 'advanced'\"\n      (click)=\"mappingMode = 'advanced'\"\n    >\n      {{ 'mappingModeAdvanced' | pluginTranslate: pluginId | async }}\n    </button>\n  </div>\n\n  <!-- Editor area (full width) -->\n  <epistola-mapping-builder\n    *ngIf=\"mappingMode === 'simple'\"\n    [expression]=\"dataMapping$ | async\"\n    [templateFields]=\"(templateFields$ | async)?.data ?? []\"\n    [suggestions]=\"variableSuggestions\"\n    [disabled]=\"!!(disabled$ | async)\"\n    (expressionChange)=\"onDataMappingChange($event)\"\n  ></epistola-mapping-builder>\n\n  <epistola-jsonata-editor\n    *ngIf=\"mappingMode === 'advanced'\"\n    [expression]=\"dataMapping$ | async\"\n    [disabled]=\"!!(disabled$ | async)\"\n    [suggestions]=\"variableSuggestions\"\n    [functions]=\"expressionFunctions\"\n    (expressionChange)=\"onDataMappingChange($event)\"\n  ></epistola-jsonata-editor>\n\n  <!-- Bottom tabs: Schema + Preview (collapsible) -->\n  <div class=\"mapping-tools\" [class.mapping-tools--collapsed]=\"toolsCollapsed\">\n    <div class=\"mapping-tools__header\" (click)=\"toolsCollapsed = !toolsCollapsed\">\n      <span class=\"mapping-tools__chevron\">{{ toolsCollapsed ? '&#x25B6;' : '&#x25BC;' }}</span>\n      <span>{{ 'mappingTools' | pluginTranslate: pluginId | async }}</span>\n    </div>\n    <div *ngIf=\"!toolsCollapsed\" class=\"mapping-tools__content\">\n      <div class=\"mapping-tools__tabs\">\n        <button\n          class=\"mapping-tools__tab\"\n          [class.mapping-tools__tab--active]=\"activeToolTab === 'schema'\"\n          (click)=\"activeToolTab = 'schema'\"\n        >\n          {{ 'expectedStructure' | pluginTranslate: pluginId | async }}\n        </button>\n        <button\n          class=\"mapping-tools__tab\"\n          [class.mapping-tools__tab--active]=\"activeToolTab === 'preview'\"\n          (click)=\"activeToolTab = 'preview'\"\n        >\n          {{ 'previewTitle' | pluginTranslate: pluginId | async }}\n        </button>\n      </div>\n\n      <epistola-expected-structure\n        *ngIf=\"activeToolTab === 'schema'\"\n        [templateFields]=\"(templateFields$ | async)?.data ?? []\"\n      ></epistola-expected-structure>\n\n      <epistola-mapping-preview\n        *ngIf=\"activeToolTab === 'preview'\"\n        [expression]=\"dataMapping$ | async\"\n        [templateFields]=\"(templateFields$ | async)?.data ?? []\"\n        [caseDefinitionKey]=\"caseDefinitionKey\"\n      ></epistola-mapping-preview>\n    </div>\n  </div>\n</div>\n", styles: [".loading-error{padding:.25rem .75rem;font-size:.8125rem;color:#dc3545}.validation-summary{margin-top:.5rem;padding:.5rem .75rem;border-radius:4px;font-size:.875rem}.validation-summary .validation-complete{color:#198754}.validation-summary .validation-incomplete{color:#dc3545;font-weight:500}.variant-mode-toggle{margin-bottom:1rem;padding:0 .75rem}.variant-mode-label{display:block;font-size:.875rem;font-weight:500;margin-bottom:.375rem}.variant-mode-buttons{display:flex;gap:0;border:1px solid #d1d5db;border-radius:4px;overflow:hidden;width:fit-content}.variant-mode-btn{padding:.375rem .75rem;font-size:.8125rem;background:#fff;border:none;border-right:1px solid #d1d5db;cursor:pointer;color:#374151;transition:background-color .15s,color .15s}.variant-mode-btn:last-child{border-right:none}.variant-mode-btn:hover:not([disabled]){background:#f3f4f6}.variant-mode-btn.active{background:#2563eb;color:#fff}.variant-mode-btn[disabled]{opacity:.5;cursor:not-allowed}.variant-attributes-section{margin-bottom:1rem;padding:0 .75rem}.variant-attributes-label{display:block;font-size:.875rem;font-weight:500;margin-bottom:.375rem}.variant-attributes-list{display:flex;flex-direction:column;gap:.375rem}.variant-attribute-row{display:flex;gap:.375rem;align-items:center}.variant-attribute-input{flex:1;padding:.375rem .5rem;font-size:.8125rem;border:1px solid #d1d5db;border-radius:4px;outline:none}.variant-attribute-input:focus{border-color:#2563eb;box-shadow:0 0 0 1px #2563eb}.variant-attribute-input[disabled]{opacity:.5;background:#f9fafb}.custom-key-input{display:flex;flex:1;gap:.25rem}.custom-key-input .variant-attribute-input{flex:1}.custom-key-cancel{padding:.25rem .5rem;font-size:1rem;line-height:1;background:none;border:1px solid #d1d5db;border-radius:4px;cursor:pointer;color:#6b7280}.custom-key-cancel:hover:not([disabled]){color:#dc3545;border-color:#dc3545}.custom-key-cancel[disabled]{opacity:.5;cursor:not-allowed}.variant-attribute-required-toggle{display:flex;align-items:center;gap:.25rem;font-size:.75rem;color:#374151;white-space:nowrap;cursor:pointer}.variant-attribute-required-toggle input[type=checkbox]{margin:0;cursor:pointer}.variant-attribute-required-toggle .required-label{-webkit-user-select:none;user-select:none}.variant-attribute-remove-btn{padding:.25rem .5rem;font-size:1rem;line-height:1;background:none;border:1px solid #d1d5db;border-radius:4px;cursor:pointer;color:#6b7280}.variant-attribute-remove-btn:hover:not([disabled]){color:#dc3545;border-color:#dc3545}.variant-attribute-remove-btn[disabled]{opacity:.5;cursor:not-allowed}.variant-attribute-add-btn{margin-top:.375rem;padding:.25rem .5rem;font-size:.8125rem;background:none;border:1px dashed #d1d5db;border-radius:4px;cursor:pointer;color:#6b7280}.variant-attribute-add-btn:hover:not([disabled]){color:#2563eb;border-color:#2563eb}.variant-attribute-add-btn[disabled]{opacity:.5;cursor:not-allowed}.mapping-section{margin-top:1rem}.mapping-section__title{font-size:1rem;font-weight:600;margin:0 0 4px}.mapping-section__description{font-size:.85em;color:#6f6f6f;margin:0 0 12px}.mapping-mode-toggle{display:flex;gap:0;margin-bottom:12px}.mapping-mode-toggle__btn{padding:6px 16px;border:1px solid #e0e0e0;background:#fff;font-size:.85em;cursor:pointer}.mapping-mode-toggle__btn:first-child{border-radius:4px 0 0 4px}.mapping-mode-toggle__btn:last-child{border-radius:0 4px 4px 0;border-left:none}.mapping-mode-toggle__btn--active{background:#0f62fe;color:#fff;border-color:#0f62fe}.mapping-tools{margin-top:12px;border:1px solid #e0e0e0;border-radius:4px;overflow:hidden}.mapping-tools__header{display:flex;align-items:center;gap:6px;padding:8px 12px;background:#f4f4f4;cursor:pointer;font-size:.85em;font-weight:500;-webkit-user-select:none;user-select:none}.mapping-tools__header:hover{background:#e8e8e8}.mapping-tools__chevron{font-size:.7em}.mapping-tools__content{border-top:1px solid #e0e0e0}.mapping-tools__tabs{display:flex;border-bottom:1px solid #e0e0e0}.mapping-tools__tab{padding:6px 16px;border:none;background:transparent;font-size:.8em;cursor:pointer;border-bottom:2px solid transparent}.mapping-tools__tab--active{border-bottom-color:#0f62fe;font-weight:500}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PluginTranslatePipeModule }, { kind: "pipe", type: i2$1.PluginTranslatePipe, name: "pluginTranslate" }, { kind: "ngmodule", type: FormModule }, { kind: "component", type: i3.FormComponent, selector: "v-form", inputs: ["className"], outputs: ["valueChange"] }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i3.InputComponent, selector: "v-input", inputs: ["name", "type", "title", "titleTranslationKey", "defaultValue", "widthPx", "fullWidth", "margin", "smallMargin", "disabled", "step", "min", "maxLength", "tooltip", "required", "hideNumberSpinBox", "smallLabel", "rows", "clear$", "carbonTheme", "placeholder", "dataTestId", "trim", "presetsTitle", "presetOptions"], outputs: ["valueChange"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3.SelectComponent, selector: "v-select", inputs: ["items", "defaultSelection", "defaultSelectionId", "defaultSelectionIds", "disabled", "dropUp", "invalid", "multiple", "margin", "widthInPx", "notFoundText", "clearAllText", "clearText", "clearable", "name", "title", "titleTranslationKey", "clearSelectionSubject$", "tooltip", "required", "loading", "loadingText", "placeholder", "smallMargin", "carbonTheme", "appendInline", "warn", "warnText", "dataTestId"], outputs: ["selectedChange"] }, { kind: "component", type: ExpectedStructureComponent, selector: "epistola-expected-structure", inputs: ["templateFields"] }, { kind: "component", type: JsonataEditorComponent, selector: "epistola-jsonata-editor", inputs: ["expression", "disabled", "suggestions", "functions"], outputs: ["expressionChange", "validChange"] }, { kind: "component", type: MappingBuilderComponent, selector: "epistola-mapping-builder", inputs: ["expression", "templateFields", "suggestions", "disabled"], outputs: ["expressionChange"] }, { kind: "component", type: MappingPreviewComponent, selector: "epistola-mapping-preview", inputs: ["expression", "templateFields", "caseDefinitionKey"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: GenerateDocumentConfigurationComponent, decorators: [{
             type: Component,
@@ -984,8 +1825,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                         FormModule,
                         InputModule,
                         SelectModule,
-                        DataMappingTreeComponent
-                    ], template: "<v-form\n    (valueChange)=\"formValueChange($event)\"\n    *ngIf=\"{\n      disabled: disabled$ | async,\n      prefill: prefillConfiguration$ ? (prefillConfiguration$ | async) : null,\n      catalogs: catalogs$ | async,\n      templates: templates$ | async,\n      variants: variants$ | async,\n      environments: environments$ | async,\n      templateFields: templateFields$ | async,\n      selectedCatalogId: selectedCatalogId$ | async,\n      selectedTemplateId: selectedTemplateId$ | async\n    } as obs\"\n>\n  <v-select\n    name=\"catalogId\"\n    [title]=\"'catalogId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'catalogIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [items]=\"obs.catalogs.data\"\n    [defaultSelectionId]=\"obs.prefill?.catalogId\"\n    [disabled]=\"obs.disabled || obs.catalogs.loading\"\n    [required]=\"true\"\n    [loading]=\"obs.catalogs.loading\"\n  >\n  </v-select>\n  <div *ngIf=\"obs.catalogs.error\" class=\"loading-error\">{{ obs.catalogs.error }}</div>\n\n  <v-select\n    name=\"templateId\"\n    [title]=\"'templateId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'templateIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [items]=\"obs.templates.data\"\n    [defaultSelectionId]=\"obs.prefill?.templateId\"\n    [disabled]=\"obs.disabled || obs.templates.loading || !obs.selectedCatalogId\"\n    [required]=\"true\"\n    [loading]=\"obs.templates.loading\"\n  >\n  </v-select>\n  <div *ngIf=\"obs.templates.error\" class=\"loading-error\">{{ obs.templates.error }}</div>\n\n  <!-- Variant selection mode toggle -->\n  <div class=\"variant-mode-toggle\" *ngIf=\"obs.selectedTemplateId\">\n    <label class=\"variant-mode-label\">{{ '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"] }]
+                        ExpectedStructureComponent,
+                        JsonataEditorComponent,
+                        MappingBuilderComponent,
+                        MappingPreviewComponent,
+                    ], template: "<v-form\n  (valueChange)=\"formValueChange($event)\"\n  *ngIf=\"{\n    disabled: disabled$ | async,\n    prefill: prefillConfiguration$ ? (prefillConfiguration$ | async) : null,\n    catalogs: catalogs$ | async,\n    templates: templates$ | async,\n    variants: variants$ | async,\n    environments: environments$ | async,\n    templateFields: templateFields$ | async,\n    selectedCatalogId: selectedCatalogId$ | async,\n    selectedTemplateId: selectedTemplateId$ | async,\n  } as obs\"\n>\n  <v-select\n    name=\"catalogId\"\n    [title]=\"'catalogId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'catalogIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [items]=\"obs.catalogs.data\"\n    [defaultSelectionId]=\"obs.prefill?.catalogId\"\n    [disabled]=\"obs.disabled || obs.catalogs.loading\"\n    [required]=\"true\"\n    [loading]=\"obs.catalogs.loading\"\n  >\n  </v-select>\n  <div *ngIf=\"obs.catalogs.error\" class=\"loading-error\">{{ obs.catalogs.error }}</div>\n\n  <v-select\n    name=\"templateId\"\n    [title]=\"'templateId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'templateIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [items]=\"obs.templates.data\"\n    [defaultSelectionId]=\"obs.prefill?.templateId\"\n    [disabled]=\"obs.disabled || obs.templates.loading || !obs.selectedCatalogId\"\n    [required]=\"true\"\n    [loading]=\"obs.templates.loading\"\n  >\n  </v-select>\n  <div *ngIf=\"obs.templates.error\" class=\"loading-error\">{{ obs.templates.error }}</div>\n\n  <!-- Variant selection mode toggle -->\n  <div class=\"variant-mode-toggle\" *ngIf=\"obs.selectedTemplateId\">\n    <label class=\"variant-mode-label\">{{\n      'variantSelectionMode' | pluginTranslate: pluginId | async\n    }}</label>\n    <div class=\"variant-mode-buttons\">\n      <button\n        type=\"button\"\n        class=\"variant-mode-btn\"\n        [class.active]=\"variantSelectionMode === 'explicit'\"\n        (click)=\"onVariantSelectionModeChange('explicit')\"\n        [disabled]=\"obs.disabled\"\n      >\n        {{ 'selectByVariant' | pluginTranslate: pluginId | async }}\n      </button>\n      <button\n        type=\"button\"\n        class=\"variant-mode-btn\"\n        [class.active]=\"variantSelectionMode === 'attributes'\"\n        (click)=\"onVariantSelectionModeChange('attributes')\"\n        [disabled]=\"obs.disabled\"\n      >\n        {{ 'selectByAttributes' | pluginTranslate: pluginId | async }}\n      </button>\n    </div>\n  </div>\n\n  <!-- Explicit variant selection (dropdown) -->\n  <v-select\n    *ngIf=\"variantSelectionMode === 'explicit'\"\n    name=\"variantId\"\n    [title]=\"'variantId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'variantIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [items]=\"obs.variants.data\"\n    [defaultSelectionId]=\"obs.prefill?.variantId\"\n    [disabled]=\"obs.disabled || obs.variants.loading || !obs.selectedTemplateId\"\n    [required]=\"false\"\n    [loading]=\"obs.variants.loading\"\n  >\n  </v-select>\n  <div *ngIf=\"obs.variants.error\" class=\"loading-error\">{{ obs.variants.error }}</div>\n\n  <!-- Attribute-based variant selection -->\n  <div\n    *ngIf=\"variantSelectionMode === 'attributes' && obs.selectedTemplateId\"\n    class=\"variant-attributes-section\"\n  >\n    <label class=\"variant-attributes-label\">{{\n      'variantAttributes' | pluginTranslate: pluginId | async\n    }}</label>\n    <div class=\"variant-attributes-list\">\n      <div\n        *ngFor=\"let entry of variantAttributeEntries; let i = index\"\n        class=\"variant-attribute-row\"\n      >\n        <select\n          *ngIf=\"!entry._customKey\"\n          class=\"variant-attribute-input\"\n          [ngModel]=\"entry.key\"\n          (ngModelChange)=\"onKeySelected(entry, $event)\"\n          [disabled]=\"obs.disabled\"\n        >\n          <option value=\"\" disabled>\n            {{ 'attributeKey' | pluginTranslate: pluginId | async }}\n          </option>\n          <option *ngFor=\"let key of availableAttributeKeys\" [value]=\"key\">{{ key }}</option>\n          <option value=\"__custom__\">\n            {{ 'attributeKeyCustom' | pluginTranslate: pluginId | async }}\n          </option>\n        </select>\n        <div *ngIf=\"entry._customKey\" class=\"custom-key-input\">\n          <input\n            type=\"text\"\n            class=\"variant-attribute-input\"\n            [placeholder]=\"'attributeKey' | pluginTranslate: pluginId | async\"\n            [(ngModel)]=\"entry.key\"\n            (ngModelChange)=\"onAttributeEntryChange()\"\n            [disabled]=\"obs.disabled\"\n          />\n          <button\n            type=\"button\"\n            class=\"custom-key-cancel\"\n            (click)=\"cancelCustomKey(entry)\"\n            [disabled]=\"obs.disabled\"\n          >\n            &times;\n          </button>\n        </div>\n        <input\n          type=\"text\"\n          class=\"variant-attribute-input\"\n          [placeholder]=\"'attributeValue' | pluginTranslate: pluginId | async\"\n          [(ngModel)]=\"entry.value\"\n          (ngModelChange)=\"onAttributeEntryChange()\"\n          [disabled]=\"obs.disabled\"\n        />\n        <label class=\"variant-attribute-required-toggle\">\n          <input\n            type=\"checkbox\"\n            [(ngModel)]=\"entry.required\"\n            (ngModelChange)=\"onAttributeEntryChange()\"\n            [disabled]=\"obs.disabled\"\n          />\n          <span class=\"required-label\">{{\n            (entry.required ? 'attributeRequired' : 'attributePreferred')\n              | pluginTranslate: pluginId\n              | async\n          }}</span>\n        </label>\n        <button\n          type=\"button\"\n          class=\"variant-attribute-remove-btn\"\n          (click)=\"removeAttributeEntry(i)\"\n          [disabled]=\"obs.disabled\"\n          title=\"{{ 'removeAttribute' | pluginTranslate: pluginId | async }}\"\n        >\n          &times;\n        </button>\n      </div>\n    </div>\n    <button\n      type=\"button\"\n      class=\"variant-attribute-add-btn\"\n      (click)=\"addAttributeEntry()\"\n      [disabled]=\"obs.disabled\"\n    >\n      + {{ 'addAttribute' | pluginTranslate: pluginId | async }}\n    </button>\n  </div>\n\n  <v-select\n    name=\"environmentId\"\n    [title]=\"'environmentId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'environmentIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [items]=\"obs.environments.data\"\n    [defaultSelectionId]=\"obs.prefill?.environmentId\"\n    [disabled]=\"obs.disabled || obs.environments.loading\"\n    [required]=\"false\"\n    [loading]=\"obs.environments.loading\"\n  >\n  </v-select>\n  <div *ngIf=\"obs.environments.error\" class=\"loading-error\">{{ obs.environments.error }}</div>\n\n  <v-select\n    name=\"outputFormat\"\n    [title]=\"'outputFormat' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'outputFormatTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [items]=\"outputFormatOptions\"\n    [defaultSelectionId]=\"obs.prefill?.outputFormat || 'PDF'\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-select>\n\n  <v-input\n    name=\"filename\"\n    [title]=\"'filename' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'filenameTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.filename\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"correlationId\"\n    [title]=\"'correlationId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'correlationIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.correlationId\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"false\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"resultProcessVariable\"\n    [title]=\"'resultProcessVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'resultProcessVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.resultProcessVariable\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-input>\n</v-form>\n\n<div *ngIf=\"(templateFields$ | async)?.error as templateFieldsError\" class=\"loading-error\">\n  {{ templateFieldsError }}\n</div>\n\n<div *ngIf=\"selectedTemplateId$ | async\" class=\"mapping-section\">\n  <h5 class=\"mapping-section__title\">\n    {{ 'dataMappingTitle' | pluginTranslate: pluginId | async }}\n  </h5>\n  <p class=\"mapping-section__description\">\n    {{ 'dataMappingDescription' | pluginTranslate: pluginId | async }}\n  </p>\n  <div class=\"mapping-mode-toggle\">\n    <button\n      class=\"mapping-mode-toggle__btn\"\n      [class.mapping-mode-toggle__btn--active]=\"mappingMode === 'simple'\"\n      (click)=\"mappingMode = 'simple'\"\n    >\n      {{ 'mappingModeSimple' | pluginTranslate: pluginId | async }}\n    </button>\n    <button\n      class=\"mapping-mode-toggle__btn\"\n      [class.mapping-mode-toggle__btn--active]=\"mappingMode === 'advanced'\"\n      (click)=\"mappingMode = 'advanced'\"\n    >\n      {{ 'mappingModeAdvanced' | pluginTranslate: pluginId | async }}\n    </button>\n  </div>\n\n  <!-- Editor area (full width) -->\n  <epistola-mapping-builder\n    *ngIf=\"mappingMode === 'simple'\"\n    [expression]=\"dataMapping$ | async\"\n    [templateFields]=\"(templateFields$ | async)?.data ?? []\"\n    [suggestions]=\"variableSuggestions\"\n    [disabled]=\"!!(disabled$ | async)\"\n    (expressionChange)=\"onDataMappingChange($event)\"\n  ></epistola-mapping-builder>\n\n  <epistola-jsonata-editor\n    *ngIf=\"mappingMode === 'advanced'\"\n    [expression]=\"dataMapping$ | async\"\n    [disabled]=\"!!(disabled$ | async)\"\n    [suggestions]=\"variableSuggestions\"\n    [functions]=\"expressionFunctions\"\n    (expressionChange)=\"onDataMappingChange($event)\"\n  ></epistola-jsonata-editor>\n\n  <!-- Bottom tabs: Schema + Preview (collapsible) -->\n  <div class=\"mapping-tools\" [class.mapping-tools--collapsed]=\"toolsCollapsed\">\n    <div class=\"mapping-tools__header\" (click)=\"toolsCollapsed = !toolsCollapsed\">\n      <span class=\"mapping-tools__chevron\">{{ toolsCollapsed ? '&#x25B6;' : '&#x25BC;' }}</span>\n      <span>{{ 'mappingTools' | pluginTranslate: pluginId | async }}</span>\n    </div>\n    <div *ngIf=\"!toolsCollapsed\" class=\"mapping-tools__content\">\n      <div class=\"mapping-tools__tabs\">\n        <button\n          class=\"mapping-tools__tab\"\n          [class.mapping-tools__tab--active]=\"activeToolTab === 'schema'\"\n          (click)=\"activeToolTab = 'schema'\"\n        >\n          {{ 'expectedStructure' | pluginTranslate: pluginId | async }}\n        </button>\n        <button\n          class=\"mapping-tools__tab\"\n          [class.mapping-tools__tab--active]=\"activeToolTab === 'preview'\"\n          (click)=\"activeToolTab = 'preview'\"\n        >\n          {{ 'previewTitle' | pluginTranslate: pluginId | async }}\n        </button>\n      </div>\n\n      <epistola-expected-structure\n        *ngIf=\"activeToolTab === 'schema'\"\n        [templateFields]=\"(templateFields$ | async)?.data ?? []\"\n      ></epistola-expected-structure>\n\n      <epistola-mapping-preview\n        *ngIf=\"activeToolTab === 'preview'\"\n        [expression]=\"dataMapping$ | async\"\n        [templateFields]=\"(templateFields$ | async)?.data ?? []\"\n        [caseDefinitionKey]=\"caseDefinitionKey\"\n      ></epistola-mapping-preview>\n    </div>\n  </div>\n</div>\n", styles: [".loading-error{padding:.25rem .75rem;font-size:.8125rem;color:#dc3545}.validation-summary{margin-top:.5rem;padding:.5rem .75rem;border-radius:4px;font-size:.875rem}.validation-summary .validation-complete{color:#198754}.validation-summary .validation-incomplete{color:#dc3545;font-weight:500}.variant-mode-toggle{margin-bottom:1rem;padding:0 .75rem}.variant-mode-label{display:block;font-size:.875rem;font-weight:500;margin-bottom:.375rem}.variant-mode-buttons{display:flex;gap:0;border:1px solid #d1d5db;border-radius:4px;overflow:hidden;width:fit-content}.variant-mode-btn{padding:.375rem .75rem;font-size:.8125rem;background:#fff;border:none;border-right:1px solid #d1d5db;cursor:pointer;color:#374151;transition:background-color .15s,color .15s}.variant-mode-btn:last-child{border-right:none}.variant-mode-btn:hover:not([disabled]){background:#f3f4f6}.variant-mode-btn.active{background:#2563eb;color:#fff}.variant-mode-btn[disabled]{opacity:.5;cursor:not-allowed}.variant-attributes-section{margin-bottom:1rem;padding:0 .75rem}.variant-attributes-label{display:block;font-size:.875rem;font-weight:500;margin-bottom:.375rem}.variant-attributes-list{display:flex;flex-direction:column;gap:.375rem}.variant-attribute-row{display:flex;gap:.375rem;align-items:center}.variant-attribute-input{flex:1;padding:.375rem .5rem;font-size:.8125rem;border:1px solid #d1d5db;border-radius:4px;outline:none}.variant-attribute-input:focus{border-color:#2563eb;box-shadow:0 0 0 1px #2563eb}.variant-attribute-input[disabled]{opacity:.5;background:#f9fafb}.custom-key-input{display:flex;flex:1;gap:.25rem}.custom-key-input .variant-attribute-input{flex:1}.custom-key-cancel{padding:.25rem .5rem;font-size:1rem;line-height:1;background:none;border:1px solid #d1d5db;border-radius:4px;cursor:pointer;color:#6b7280}.custom-key-cancel:hover:not([disabled]){color:#dc3545;border-color:#dc3545}.custom-key-cancel[disabled]{opacity:.5;cursor:not-allowed}.variant-attribute-required-toggle{display:flex;align-items:center;gap:.25rem;font-size:.75rem;color:#374151;white-space:nowrap;cursor:pointer}.variant-attribute-required-toggle input[type=checkbox]{margin:0;cursor:pointer}.variant-attribute-required-toggle .required-label{-webkit-user-select:none;user-select:none}.variant-attribute-remove-btn{padding:.25rem .5rem;font-size:1rem;line-height:1;background:none;border:1px solid #d1d5db;border-radius:4px;cursor:pointer;color:#6b7280}.variant-attribute-remove-btn:hover:not([disabled]){color:#dc3545;border-color:#dc3545}.variant-attribute-remove-btn[disabled]{opacity:.5;cursor:not-allowed}.variant-attribute-add-btn{margin-top:.375rem;padding:.25rem .5rem;font-size:.8125rem;background:none;border:1px dashed #d1d5db;border-radius:4px;cursor:pointer;color:#6b7280}.variant-attribute-add-btn:hover:not([disabled]){color:#2563eb;border-color:#2563eb}.variant-attribute-add-btn[disabled]{opacity:.5;cursor:not-allowed}.mapping-section{margin-top:1rem}.mapping-section__title{font-size:1rem;font-weight:600;margin:0 0 4px}.mapping-section__description{font-size:.85em;color:#6f6f6f;margin:0 0 12px}.mapping-mode-toggle{display:flex;gap:0;margin-bottom:12px}.mapping-mode-toggle__btn{padding:6px 16px;border:1px solid #e0e0e0;background:#fff;font-size:.85em;cursor:pointer}.mapping-mode-toggle__btn:first-child{border-radius:4px 0 0 4px}.mapping-mode-toggle__btn:last-child{border-radius:0 4px 4px 0;border-left:none}.mapping-mode-toggle__btn--active{background:#0f62fe;color:#fff;border-color:#0f62fe}.mapping-tools{margin-top:12px;border:1px solid #e0e0e0;border-radius:4px;overflow:hidden}.mapping-tools__header{display:flex;align-items:center;gap:6px;padding:8px 12px;background:#f4f4f4;cursor:pointer;font-size:.85em;font-weight:500;-webkit-user-select:none;user-select:none}.mapping-tools__header:hover{background:#e8e8e8}.mapping-tools__chevron{font-size:.7em}.mapping-tools__content{border-top:1px solid #e0e0e0}.mapping-tools__tabs{display:flex;border-bottom:1px solid #e0e0e0}.mapping-tools__tab{padding:6px 16px;border:none;background:transparent;font-size:.8em;cursor:pointer;border-bottom:2px solid transparent}.mapping-tools__tab--active{border-bottom-color:#0f62fe;font-weight:500}\n"] }]
         }], ctorParameters: () => [{ type: EpistolaPluginService }, { type: i2$2.ProcessLinkStateService }, { type: i0.ChangeDetectorRef }], propDecorators: { save$: [{
                 type: Input
             }], disabled$: [{
@@ -1028,8 +1872,7 @@ class CheckJobStatusConfigurationComponent {
         this.handleValid(formValue);
     }
     handleValid(formValue) {
-        const valid = !!(formValue?.requestIdVariable &&
-            formValue?.statusVariable);
+        const valid = !!(formValue?.requestIdVariable && formValue?.statusVariable);
         this.valid$.next(valid);
         this.valid.emit(valid);
     }
@@ -1045,11 +1888,11 @@ class CheckJobStatusConfigurationComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: CheckJobStatusConfigurationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: CheckJobStatusConfigurationComponent, isStandalone: true, selector: "epistola-check-job-status-configuration", inputs: { save$: "save$", disabled$: "disabled$", pluginId: "pluginId", prefillConfiguration$: "prefillConfiguration$" }, outputs: { valid: "valid", configuration: "configuration" }, ngImport: i0, template: "<v-form\n    (valueChange)=\"formValueChange($event)\"\n    *ngIf=\"{\n      disabled: safeDisabled$ | async,\n      prefill: prefillConfiguration$ ? (prefillConfiguration$ | async) : null\n    } as obs\"\n>\n  <v-input\n    name=\"requestIdVariable\"\n    [title]=\"'requestIdVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'requestIdVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.requestIdVariable || 'epistolaRequestId'\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"statusVariable\"\n    [title]=\"'statusVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'statusVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.statusVariable || 'epistolaStatus'\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"documentIdVariable\"\n    [title]=\"'documentIdVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'documentIdVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.documentIdVariable || 'epistolaDocumentId'\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"false\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"errorMessageVariable\"\n    [title]=\"'errorMessageVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'errorMessageVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.errorMessageVariable || 'epistolaErrorMessage'\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"false\"\n  >\n  </v-input>\n</v-form>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: PluginTranslatePipeModule }, { kind: "pipe", type: i2$1.PluginTranslatePipe, name: "pluginTranslate" }, { kind: "ngmodule", type: FormModule }, { kind: "component", type: i3.FormComponent, selector: "v-form", inputs: ["className"], outputs: ["valueChange"] }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i3.InputComponent, selector: "v-input", inputs: ["name", "type", "title", "titleTranslationKey", "defaultValue", "widthPx", "fullWidth", "margin", "smallMargin", "disabled", "step", "min", "maxLength", "tooltip", "required", "hideNumberSpinBox", "smallLabel", "rows", "clear$", "carbonTheme", "placeholder", "dataTestId", "trim", "presetsTitle", "presetOptions"], outputs: ["valueChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: CheckJobStatusConfigurationComponent, isStandalone: true, selector: "epistola-check-job-status-configuration", inputs: { save$: "save$", disabled$: "disabled$", pluginId: "pluginId", prefillConfiguration$: "prefillConfiguration$" }, outputs: { valid: "valid", configuration: "configuration" }, ngImport: i0, template: "<v-form\n  (valueChange)=\"formValueChange($event)\"\n  *ngIf=\"{\n    disabled: safeDisabled$ | async,\n    prefill: prefillConfiguration$ ? (prefillConfiguration$ | async) : null,\n  } as obs\"\n>\n  <v-input\n    name=\"requestIdVariable\"\n    [title]=\"'requestIdVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'requestIdVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.requestIdVariable || 'epistolaRequestId'\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"statusVariable\"\n    [title]=\"'statusVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'statusVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.statusVariable || 'epistolaStatus'\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"documentIdVariable\"\n    [title]=\"'documentIdVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'documentIdVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.documentIdVariable || 'epistolaDocumentId'\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"false\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"errorMessageVariable\"\n    [title]=\"'errorMessageVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'errorMessageVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.errorMessageVariable || 'epistolaErrorMessage'\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"false\"\n  >\n  </v-input>\n</v-form>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: PluginTranslatePipeModule }, { kind: "pipe", type: i2$1.PluginTranslatePipe, name: "pluginTranslate" }, { kind: "ngmodule", type: FormModule }, { kind: "component", type: i3.FormComponent, selector: "v-form", inputs: ["className"], outputs: ["valueChange"] }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i3.InputComponent, selector: "v-input", inputs: ["name", "type", "title", "titleTranslationKey", "defaultValue", "widthPx", "fullWidth", "margin", "smallMargin", "disabled", "step", "min", "maxLength", "tooltip", "required", "hideNumberSpinBox", "smallLabel", "rows", "clear$", "carbonTheme", "placeholder", "dataTestId", "trim", "presetsTitle", "presetOptions"], outputs: ["valueChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: CheckJobStatusConfigurationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'epistola-check-job-status-configuration', standalone: true, imports: [CommonModule, PluginTranslatePipeModule, FormModule, InputModule], template: "<v-form\n    (valueChange)=\"formValueChange($event)\"\n    *ngIf=\"{\n      disabled: safeDisabled$ | async,\n      prefill: prefillConfiguration$ ? (prefillConfiguration$ | async) : null\n    } as obs\"\n>\n  <v-input\n    name=\"requestIdVariable\"\n    [title]=\"'requestIdVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'requestIdVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.requestIdVariable || 'epistolaRequestId'\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"statusVariable\"\n    [title]=\"'statusVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'statusVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.statusVariable || 'epistolaStatus'\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"documentIdVariable\"\n    [title]=\"'documentIdVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'documentIdVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.documentIdVariable || 'epistolaDocumentId'\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"false\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"errorMessageVariable\"\n    [title]=\"'errorMessageVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'errorMessageVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.errorMessageVariable || 'epistolaErrorMessage'\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"false\"\n  >\n  </v-input>\n</v-form>\n" }]
+            args: [{ selector: 'epistola-check-job-status-configuration', standalone: true, imports: [CommonModule, PluginTranslatePipeModule, FormModule, InputModule], template: "<v-form\n  (valueChange)=\"formValueChange($event)\"\n  *ngIf=\"{\n    disabled: safeDisabled$ | async,\n    prefill: prefillConfiguration$ ? (prefillConfiguration$ | async) : null,\n  } as obs\"\n>\n  <v-input\n    name=\"requestIdVariable\"\n    [title]=\"'requestIdVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'requestIdVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.requestIdVariable || 'epistolaRequestId'\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"statusVariable\"\n    [title]=\"'statusVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'statusVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.statusVariable || 'epistolaStatus'\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"documentIdVariable\"\n    [title]=\"'documentIdVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'documentIdVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.documentIdVariable || 'epistolaDocumentId'\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"false\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"errorMessageVariable\"\n    [title]=\"'errorMessageVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'errorMessageVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.errorMessageVariable || 'epistolaErrorMessage'\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"false\"\n  >\n  </v-input>\n</v-form>\n" }]
         }], propDecorators: { save$: [{
                 type: Input
             }], disabled$: [{
@@ -1088,8 +1931,7 @@ class DownloadDocumentConfigurationComponent {
         this.handleValid(formValue);
     }
     handleValid(formValue) {
-        const valid = !!(formValue?.documentIdVariable &&
-            formValue?.contentVariable);
+        const valid = !!(formValue?.documentIdVariable && formValue?.contentVariable);
         this.valid$.next(valid);
         this.valid.emit(valid);
     }
@@ -1105,11 +1947,11 @@ class DownloadDocumentConfigurationComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DownloadDocumentConfigurationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: DownloadDocumentConfigurationComponent, isStandalone: true, selector: "epistola-download-document-configuration", inputs: { save$: "save$", disabled$: "disabled$", pluginId: "pluginId", prefillConfiguration$: "prefillConfiguration$" }, outputs: { valid: "valid", configuration: "configuration" }, ngImport: i0, template: "<v-form\n    (valueChange)=\"formValueChange($event)\"\n    *ngIf=\"{\n      disabled: safeDisabled$ | async,\n      prefill: prefillConfiguration$ ? (prefillConfiguration$ | async) : null\n    } as obs\"\n>\n  <v-input\n    name=\"documentIdVariable\"\n    [title]=\"'documentIdVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'documentIdVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.documentIdVariable || 'epistolaDocumentId'\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"contentVariable\"\n    [title]=\"'contentVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'contentVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.contentVariable || 'documentContent'\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-input>\n</v-form>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: PluginTranslatePipeModule }, { kind: "pipe", type: i2$1.PluginTranslatePipe, name: "pluginTranslate" }, { kind: "ngmodule", type: FormModule }, { kind: "component", type: i3.FormComponent, selector: "v-form", inputs: ["className"], outputs: ["valueChange"] }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i3.InputComponent, selector: "v-input", inputs: ["name", "type", "title", "titleTranslationKey", "defaultValue", "widthPx", "fullWidth", "margin", "smallMargin", "disabled", "step", "min", "maxLength", "tooltip", "required", "hideNumberSpinBox", "smallLabel", "rows", "clear$", "carbonTheme", "placeholder", "dataTestId", "trim", "presetsTitle", "presetOptions"], outputs: ["valueChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: DownloadDocumentConfigurationComponent, isStandalone: true, selector: "epistola-download-document-configuration", inputs: { save$: "save$", disabled$: "disabled$", pluginId: "pluginId", prefillConfiguration$: "prefillConfiguration$" }, outputs: { valid: "valid", configuration: "configuration" }, ngImport: i0, template: "<v-form\n  (valueChange)=\"formValueChange($event)\"\n  *ngIf=\"{\n    disabled: safeDisabled$ | async,\n    prefill: prefillConfiguration$ ? (prefillConfiguration$ | async) : null,\n  } as obs\"\n>\n  <v-input\n    name=\"documentIdVariable\"\n    [title]=\"'documentIdVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'documentIdVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.documentIdVariable || 'epistolaDocumentId'\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"contentVariable\"\n    [title]=\"'contentVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'contentVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.contentVariable || 'documentContent'\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-input>\n</v-form>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: PluginTranslatePipeModule }, { kind: "pipe", type: i2$1.PluginTranslatePipe, name: "pluginTranslate" }, { kind: "ngmodule", type: FormModule }, { kind: "component", type: i3.FormComponent, selector: "v-form", inputs: ["className"], outputs: ["valueChange"] }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i3.InputComponent, selector: "v-input", inputs: ["name", "type", "title", "titleTranslationKey", "defaultValue", "widthPx", "fullWidth", "margin", "smallMargin", "disabled", "step", "min", "maxLength", "tooltip", "required", "hideNumberSpinBox", "smallLabel", "rows", "clear$", "carbonTheme", "placeholder", "dataTestId", "trim", "presetsTitle", "presetOptions"], outputs: ["valueChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DownloadDocumentConfigurationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'epistola-download-document-configuration', standalone: true, imports: [CommonModule, PluginTranslatePipeModule, FormModule, InputModule], template: "<v-form\n    (valueChange)=\"formValueChange($event)\"\n    *ngIf=\"{\n      disabled: safeDisabled$ | async,\n      prefill: prefillConfiguration$ ? (prefillConfiguration$ | async) : null\n    } as obs\"\n>\n  <v-input\n    name=\"documentIdVariable\"\n    [title]=\"'documentIdVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'documentIdVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.documentIdVariable || 'epistolaDocumentId'\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"contentVariable\"\n    [title]=\"'contentVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'contentVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.contentVariable || 'documentContent'\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-input>\n</v-form>\n" }]
+            args: [{ selector: 'epistola-download-document-configuration', standalone: true, imports: [CommonModule, PluginTranslatePipeModule, FormModule, InputModule], template: "<v-form\n  (valueChange)=\"formValueChange($event)\"\n  *ngIf=\"{\n    disabled: safeDisabled$ | async,\n    prefill: prefillConfiguration$ ? (prefillConfiguration$ | async) : null,\n  } as obs\"\n>\n  <v-input\n    name=\"documentIdVariable\"\n    [title]=\"'documentIdVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'documentIdVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.documentIdVariable || 'epistolaDocumentId'\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"contentVariable\"\n    [title]=\"'contentVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'contentVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.contentVariable || 'documentContent'\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-input>\n</v-form>\n" }]
         }], propDecorators: { save$: [{
                 type: Input
             }], disabled$: [{
@@ -1149,9 +1991,9 @@ class EpistolaDownloadComponent {
         this.downloading = true;
         this.error = null;
         const { documentId, tenantId } = this.value;
-        const url = `/api/v1/plugin/epistola/documents/${encodeURIComponent(documentId)}/download`
-            + `?tenantId=${encodeURIComponent(tenantId)}`
-            + `&filename=${encodeURIComponent(this.filename)}`;
+        const url = `/api/v1/plugin/epistola/documents/${encodeURIComponent(documentId)}/download` +
+            `?tenantId=${encodeURIComponent(tenantId)}` +
+            `&filename=${encodeURIComponent(this.filename)}`;
         this.http.get(url, { responseType: 'blob' }).subscribe({
             next: (blob) => {
                 const objectUrl = URL.createObjectURL(blob);
@@ -1244,7 +2086,7 @@ class EpistolaRetryFormComponent {
     apiEndpoint;
     formOptions = {
         noAlerts: true,
-        buttonSettings: { showCancel: false, showSubmit: false, showPrevious: false, showNext: false }
+        buttonSettings: { showCancel: false, showSubmit: false, showPrevious: false, showNext: false },
     };
     constructor(epistolaPluginService, formIoStateService, cdr, http, sanitizer, configService) {
         this.epistolaPluginService = epistolaPluginService;
@@ -1255,7 +2097,7 @@ class EpistolaRetryFormComponent {
         this.configService = configService;
         this.apiEndpoint = `${this.configService.config.valtimoApi.endpointUri}v1/plugin/epistola`;
         // Debounce preview calls
-        this.previewSubscription = this.previewSubject.pipe(debounceTime(1500)).subscribe(data => {
+        this.previewSubscription = this.previewSubject.pipe(debounceTime$1(1500)).subscribe((data) => {
             this.loadPreview(data);
         });
     }
@@ -1298,12 +2140,14 @@ class EpistolaRetryFormComponent {
             URL.revokeObjectURL(this.currentBlobUrl);
             this.currentBlobUrl = null;
         }
-        this.http.post(`${this.apiEndpoint}/preview`, {
+        this.http
+            .post(`${this.apiEndpoint}/preview`, {
             documentId,
             processInstanceId,
             sourceActivityId: this.sourceActivityId || null,
-            overrides: formData
-        }, { responseType: 'blob', headers: new HttpHeaders().set('X-Skip-Interceptor', '422') }).subscribe({
+            overrides: formData,
+        }, { 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);
@@ -1332,7 +2176,7 @@ class EpistolaRetryFormComponent {
                     this.previewLoading = false;
                     this.cdr.markForCheck();
                 }
-            }
+            },
         });
     }
     loadForm() {
@@ -1344,7 +2188,9 @@ class EpistolaRetryFormComponent {
             this.cdr.markForCheck();
             return;
         }
-        this.loadSubscription = this.epistolaPluginService.getRetryForm(processInstanceId, documentId ?? undefined, this.sourceActivityId).subscribe({
+        this.loadSubscription = this.epistolaPluginService
+            .getRetryForm(processInstanceId, documentId ?? undefined, this.sourceActivityId)
+            .subscribe({
             next: (form) => {
                 this.formDefinition = form;
                 if (this.value) {
@@ -1363,14 +2209,18 @@ class EpistolaRetryFormComponent {
                 this.error = 'Failed to load the retry form. Please try again.';
                 this.loading = false;
                 this.cdr.markForCheck();
-            }
+            },
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaRetryFormComponent, deps: [{ token: EpistolaPluginService }, { token: i3.FormIoStateService }, { token: i0.ChangeDetectorRef }, { token: i1.HttpClient }, { token: i4$1.DomSanitizer }, { token: i2.ConfigService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: EpistolaRetryFormComponent, isStandalone: true, selector: "epistola-retry-form-component", inputs: { value: "value", disabled: "disabled", label: "label", sourceActivityId: "sourceActivityId" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: `
     <div *ngIf="loading" class="epistola-retry-loading">Loading form...</div>
     <div *ngIf="error" class="epistola-retry-error">{{ error }}</div>
-    <div *ngIf="formDefinition && !loading" class="epistola-retry-container" [class.preview-expanded]="previewExpanded">
+    <div
+      *ngIf="formDefinition && !loading"
+      class="epistola-retry-container"
+      [class.preview-expanded]="previewExpanded"
+    >
       <div class="epistola-retry-form" [hidden]="previewExpanded">
         <formio
           [form]="formDefinition"
@@ -1387,7 +2237,12 @@ class EpistolaRetryFormComponent {
           </button>
         </div>
         <div *ngIf="previewLoading" class="preview-loading">Generating preview...</div>
-        <object *ngIf="previewUrl && !previewLoading" [data]="previewUrl" type="application/pdf" class="preview-pdf">
+        <object
+          *ngIf="previewUrl && !previewLoading"
+          [data]="previewUrl"
+          type="application/pdf"
+          class="preview-pdf"
+        >
           PDF preview not supported in this browser.
         </object>
         <div *ngIf="previewError" class="preview-error">{{ previewError }}</div>
@@ -1403,7 +2258,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             args: [{ standalone: true, imports: [CommonModule, FormioModule], selector: 'epistola-retry-form-component', changeDetection: ChangeDetectionStrategy.OnPush, template: `
     <div *ngIf="loading" class="epistola-retry-loading">Loading form...</div>
     <div *ngIf="error" class="epistola-retry-error">{{ error }}</div>
-    <div *ngIf="formDefinition && !loading" class="epistola-retry-container" [class.preview-expanded]="previewExpanded">
+    <div
+      *ngIf="formDefinition && !loading"
+      class="epistola-retry-container"
+      [class.preview-expanded]="previewExpanded"
+    >
       <div class="epistola-retry-form" [hidden]="previewExpanded">
         <formio
           [form]="formDefinition"
@@ -1420,7 +2279,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
           </button>
         </div>
         <div *ngIf="previewLoading" class="preview-loading">Generating preview...</div>
-        <object *ngIf="previewUrl && !previewLoading" [data]="previewUrl" type="application/pdf" class="preview-pdf">
+        <object
+          *ngIf="previewUrl && !previewLoading"
+          [data]="previewUrl"
+          type="application/pdf"
+          class="preview-pdf"
+        >
           PDF preview not supported in this browser.
         </object>
         <div *ngIf="previewError" class="preview-error">{{ previewError }}</div>
@@ -1480,9 +2344,9 @@ class EpistolaPreviewButtonComponent {
         this.previewError = null;
         this.revokeBlobUrl();
         const { documentId, tenantId } = this.value;
-        const url = `${this.apiEndpoint}/documents/${encodeURIComponent(documentId)}/download`
-            + `?tenantId=${encodeURIComponent(tenantId)}`
-            + `&filename=preview.pdf`;
+        const url = `${this.apiEndpoint}/documents/${encodeURIComponent(documentId)}/download` +
+            `?tenantId=${encodeURIComponent(tenantId)}` +
+            `&filename=preview.pdf`;
         this.http.get(url, { responseType: 'blob' }).subscribe({
             next: (blob) => {
                 this.currentBlobUrl = URL.createObjectURL(blob);
@@ -1492,7 +2356,7 @@ class EpistolaPreviewButtonComponent {
             error: () => {
                 this.previewError = 'Could not load the document.';
                 this.previewLoading = false;
-            }
+            },
         });
     }
     closePreview() {
@@ -1523,7 +2387,9 @@ class EpistolaPreviewButtonComponent {
       <div class="preview-modal-content" (click)="$event.stopPropagation()">
         <div class="preview-modal-header">
           <span>Document Preview</span>
-          <button type="button" class="preview-modal-close" (click)="closePreview()">&times;</button>
+          <button type="button" class="preview-modal-close" (click)="closePreview()">
+            &times;
+          </button>
         </div>
         <div class="preview-modal-body">
           <div *ngIf="previewLoading" class="preview-loading">Generating preview...</div>
@@ -1558,7 +2424,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
       <div class="preview-modal-content" (click)="$event.stopPropagation()">
         <div class="preview-modal-header">
           <span>Document Preview</span>
-          <button type="button" class="preview-modal-close" (click)="closePreview()">&times;</button>
+          <button type="button" class="preview-modal-close" (click)="closePreview()">
+            &times;
+          </button>
         </div>
         <div class="preview-modal-body">
           <div *ngIf="previewLoading" class="preview-loading">Generating preview...</div>
@@ -1658,7 +2526,7 @@ class EpistolaDocumentPreviewComponent {
                 this.error = err.error?.error || 'Failed to discover preview sources';
                 this.discovering = false;
                 this.cdr.markForCheck();
-            }
+            },
         });
     }
     loadPreview() {
@@ -1673,15 +2541,17 @@ class EpistolaDocumentPreviewComponent {
         this.cdr.markForCheck();
         this.revokeBlobUrl();
         this.previewSubscription?.unsubscribe();
-        this.previewSubscription = this.http.post(`${this.apiEndpoint}/preview`, {
+        this.previewSubscription = this.http
+            .post(`${this.apiEndpoint}/preview`, {
             documentId,
             processInstanceId: source.processInstanceId,
             sourceActivityId: source.activityId,
-            overrides: null
+            overrides: null,
         }, {
             responseType: 'blob',
-            headers: new HttpHeaders().set('X-Skip-Interceptor', '422')
-        }).subscribe({
+            headers: new HttpHeaders().set('X-Skip-Interceptor', '422'),
+        })
+            .subscribe({
             next: (blob) => {
                 this.currentBlobUrl = URL.createObjectURL(blob);
                 this.previewUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.currentBlobUrl);
@@ -1709,7 +2579,7 @@ class EpistolaDocumentPreviewComponent {
                     this.loading = false;
                     this.cdr.markForCheck();
                 }
-            }
+            },
         });
     }
     revokeBlobUrl() {
@@ -1735,19 +2605,20 @@ class EpistolaDocumentPreviewComponent {
               {{ source.templateName }} ({{ source.activityId }})
             </option>
           </select>
-          <button type="button" class="preview-refresh" [disabled]="loading || discovering" (click)="refresh()">
+          <button
+            type="button"
+            class="preview-refresh"
+            [disabled]="loading || discovering"
+            (click)="refresh()"
+          >
             <i class="mdi mdi-refresh mr-1"></i>
             {{ loading ? 'Generating...' : 'Refresh' }}
           </button>
         </div>
       </div>
       <div class="preview-body">
-        <div *ngIf="discovering" class="preview-loading">
-          Discovering documents...
-        </div>
-        <div *ngIf="loading && !discovering" class="preview-loading">
-          Generating preview...
-        </div>
+        <div *ngIf="discovering" class="preview-loading">Discovering documents...</div>
+        <div *ngIf="loading && !discovering" class="preview-loading">Generating preview...</div>
         <div *ngIf="error && !loading && !discovering" class="preview-unavailable">
           <i class="mdi mdi-information-outline"></i>
           Preview is niet beschikbaar — niet alle gegevens zijn al ingevuld.
@@ -1760,7 +2631,10 @@ class EpistolaDocumentPreviewComponent {
         >
           PDF preview is not supported in this browser.
         </object>
-        <div *ngIf="!previewUrl && !loading && !discovering && !error && sources.length === 0" class="preview-empty">
+        <div
+          *ngIf="!previewUrl && !loading && !discovering && !error && sources.length === 0"
+          class="preview-empty"
+        >
           No previewable documents found
         </div>
       </div>
@@ -1784,19 +2658,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
               {{ source.templateName }} ({{ source.activityId }})
             </option>
           </select>
-          <button type="button" class="preview-refresh" [disabled]="loading || discovering" (click)="refresh()">
+          <button
+            type="button"
+            class="preview-refresh"
+            [disabled]="loading || discovering"
+            (click)="refresh()"
+          >
             <i class="mdi mdi-refresh mr-1"></i>
             {{ loading ? 'Generating...' : 'Refresh' }}
           </button>
         </div>
       </div>
       <div class="preview-body">
-        <div *ngIf="discovering" class="preview-loading">
-          Discovering documents...
-        </div>
-        <div *ngIf="loading && !discovering" class="preview-loading">
-          Generating preview...
-        </div>
+        <div *ngIf="discovering" class="preview-loading">Discovering documents...</div>
+        <div *ngIf="loading && !discovering" class="preview-loading">Generating preview...</div>
         <div *ngIf="error && !loading && !discovering" class="preview-unavailable">
           <i class="mdi mdi-information-outline"></i>
           Preview is niet beschikbaar — niet alle gegevens zijn al ingevuld.
@@ -1809,7 +2684,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
         >
           PDF preview is not supported in this browser.
         </object>
-        <div *ngIf="!previewUrl && !loading && !discovering && !error && sources.length === 0" class="preview-empty">
+        <div
+          *ngIf="!previewUrl && !loading && !discovering && !error && sources.length === 0"
+          class="preview-empty"
+        >
           No previewable documents found
         </div>
       </div>
@@ -1825,6 +2703,186 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 type: Input
             }] } });
 
+class EpistolaAdminPageComponent {
+    adminService;
+    route;
+    router;
+    cards = [];
+    selectedCard = null;
+    activeTab = 'actions';
+    loading = false;
+    pluginVersion = null;
+    connectionStatuses = [];
+    usageEntries = [];
+    pendingJobs = [];
+    connectionLoaded = false;
+    usageLoaded = false;
+    pendingLoaded = false;
+    deepLinkConfigId = null;
+    constructor(adminService, route, router) {
+        this.adminService = adminService;
+        this.route = route;
+        this.router = router;
+    }
+    ngOnInit() {
+        this.deepLinkConfigId = this.route.snapshot.queryParamMap.get('configurationId');
+        const tab = this.route.snapshot.queryParamMap.get('tab');
+        if (tab === 'pending' || tab === 'actions') {
+            this.activeTab = tab;
+        }
+        this.loadData();
+        this.loadPluginVersion();
+    }
+    selectConfiguration(card) {
+        this.selectedCard = card;
+        this.activeTab = 'actions';
+        this.updateUrl(card.configurationId, this.activeTab);
+    }
+    backToOverview() {
+        this.selectedCard = null;
+        this.activeTab = 'actions';
+        this.updateUrl(null, null);
+    }
+    setActiveTab(tab) {
+        this.activeTab = tab;
+        this.updateUrl(this.selectedCard?.configurationId ?? null, tab);
+    }
+    refresh() {
+        this.selectedCard = null;
+        this.loadData();
+    }
+    exportProcessLink(entry) {
+        this.adminService.exportProcessLink(entry.processLinkId).subscribe({
+            next: (blob) => {
+                const url = URL.createObjectURL(blob);
+                const anchor = document.createElement('a');
+                anchor.href = url;
+                anchor.download = `${entry.activityId}.process-link.json`;
+                anchor.click();
+                URL.revokeObjectURL(url);
+            },
+        });
+    }
+    updateUrl(configurationId, tab) {
+        this.router.navigate([], {
+            relativeTo: this.route,
+            queryParams: {
+                configurationId: configurationId ?? null,
+                tab: tab ?? null,
+            },
+            replaceUrl: true,
+        });
+    }
+    loadData() {
+        this.loading = true;
+        this.connectionLoaded = false;
+        this.usageLoaded = false;
+        this.pendingLoaded = false;
+        this.adminService.getConnectionStatus().subscribe({
+            next: (statuses) => {
+                this.connectionStatuses = statuses;
+                this.connectionLoaded = true;
+                this.tryBuildCards();
+            },
+            error: () => {
+                this.connectionStatuses = [];
+                this.connectionLoaded = true;
+                this.tryBuildCards();
+            },
+        });
+        this.adminService.getPluginUsage().subscribe({
+            next: (entries) => {
+                this.usageEntries = entries;
+                this.usageLoaded = true;
+                this.tryBuildCards();
+            },
+            error: () => {
+                this.usageEntries = [];
+                this.usageLoaded = true;
+                this.tryBuildCards();
+            },
+        });
+        this.adminService.getPendingJobs().subscribe({
+            next: (jobs) => {
+                this.pendingJobs = jobs;
+                this.pendingLoaded = true;
+                this.tryBuildCards();
+            },
+            error: () => {
+                this.pendingJobs = [];
+                this.pendingLoaded = true;
+                this.tryBuildCards();
+            },
+        });
+    }
+    tryBuildCards() {
+        if (!this.connectionLoaded || !this.usageLoaded || !this.pendingLoaded) {
+            return;
+        }
+        this.cards = this.connectionStatuses.map((status) => {
+            const entries = this.usageEntries.filter((e) => e.configurationId === status.configurationId);
+            const jobs = this.pendingJobs.filter((j) => j.tenantId === status.tenantId);
+            const problemCount = entries.reduce((sum, e) => sum + e.problems.length, 0);
+            return {
+                configurationId: status.configurationId,
+                configurationTitle: status.configurationTitle,
+                tenantId: status.tenantId,
+                reachable: status.reachable,
+                latencyMs: status.latencyMs,
+                errorMessage: status.errorMessage,
+                serverVersion: status.serverVersion,
+                usageCount: entries.length,
+                problemCount,
+                usageEntries: entries,
+                pendingJobs: jobs,
+            };
+        });
+        // Restore deep link selection
+        if (this.deepLinkConfigId) {
+            const match = this.cards.find((c) => c.configurationId === this.deepLinkConfigId);
+            if (match) {
+                this.selectedCard = match;
+            }
+            this.deepLinkConfigId = null;
+        }
+        this.loading = false;
+    }
+    loadPluginVersion() {
+        this.adminService.getVersions().subscribe({
+            next: (info) => {
+                this.pluginVersion = info.pluginVersion;
+            },
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaAdminPageComponent, deps: [{ token: EpistolaAdminService }, { token: i2$3.ActivatedRoute }, { token: i2$3.Router }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: EpistolaAdminPageComponent, isStandalone: true, selector: "epistola-admin-page", ngImport: i0, template: "<div class=\"epistola-admin\">\n  <!-- Overview: card grid (no configuration selected) -->\n  <ng-container *ngIf=\"!selectedCard\">\n    <div class=\"d-flex justify-content-between align-items-center mb-3\">\n      <div class=\"d-flex align-items-center\">\n        <h5 class=\"mb-0\">{{ 'epistolaAdminOverview' | pluginTranslate: 'epistola' | async }}</h5>\n        <span *ngIf=\"pluginVersion\" class=\"version-badge ms-2\">v{{ pluginVersion }}</span>\n      </div>\n      <button class=\"btn btn-outline-primary btn-sm\" (click)=\"refresh()\" [disabled]=\"loading\">\n        {{ 'epistolaAdminRefresh' | pluginTranslate: 'epistola' | async }}\n      </button>\n    </div>\n\n    <div *ngIf=\"loading\" class=\"text-muted\">\n      {{ 'epistolaAdminLoading' | pluginTranslate: 'epistola' | async }}\n    </div>\n\n    <div *ngIf=\"!loading && cards.length === 0\" class=\"text-muted\">\n      {{ 'epistolaAdminNoConfigurations' | pluginTranslate: 'epistola' | async }}\n    </div>\n\n    <div *ngIf=\"!loading && cards.length > 0\" class=\"card-grid\">\n      <div\n        *ngFor=\"let card of cards\"\n        class=\"config-card\"\n        [class.config-card--ok]=\"card.reachable && card.problemCount === 0\"\n        [class.config-card--warning]=\"card.reachable && card.problemCount > 0\"\n        [class.config-card--error]=\"!card.reachable\"\n        (click)=\"selectConfiguration(card)\"\n      >\n        <div class=\"config-card__header\">\n          <span\n            class=\"status-dot\"\n            [class.status-dot--ok]=\"card.reachable\"\n            [class.status-dot--error]=\"!card.reachable\"\n          >\n          </span>\n          <h5 class=\"config-card__title\">{{ card.configurationTitle }}</h5>\n        </div>\n\n        <div class=\"config-card__body\">\n          <div class=\"config-card__field\">\n            <span class=\"config-card__label\">{{\n              'epistolaAdminTenantId' | pluginTranslate: 'epistola' | async\n            }}</span>\n            <code class=\"config-card__value\">{{ card.tenantId }}</code>\n          </div>\n          <div class=\"config-card__field\">\n            <span class=\"config-card__label\">{{\n              'epistolaAdminStatus' | pluginTranslate: 'epistola' | async\n            }}</span>\n            <cds-tag size=\"sm\" [type]=\"card.reachable ? 'green' : 'red'\">\n              {{\n                card.reachable\n                  ? ('epistolaAdminConnected' | pluginTranslate: 'epistola' | async)\n                  : ('epistolaAdminUnreachable' | pluginTranslate: 'epistola' | async)\n              }}\n            </cds-tag>\n          </div>\n          <div *ngIf=\"card.serverVersion\" class=\"config-card__field\">\n            <span class=\"config-card__label\">{{\n              'epistolaAdminServerVersion' | pluginTranslate: 'epistola' | async\n            }}</span>\n            <span class=\"config-card__value\">{{ card.serverVersion }}</span>\n          </div>\n          <div class=\"config-card__field\">\n            <span class=\"config-card__label\">{{\n              'epistolaAdminPluginActions' | pluginTranslate: 'epistola' | async\n            }}</span>\n            <span class=\"config-card__value\">{{ card.usageCount }}</span>\n          </div>\n          <div *ngIf=\"card.pendingJobs.length > 0\" class=\"config-card__field\">\n            <span class=\"config-card__label\">{{\n              'epistolaAdminPendingJobs' | pluginTranslate: 'epistola' | async\n            }}</span>\n            <cds-tag size=\"sm\" type=\"blue\">{{ card.pendingJobs.length }}</cds-tag>\n          </div>\n          <div *ngIf=\"card.problemCount > 0\" class=\"config-card__field\">\n            <span class=\"config-card__label\">{{\n              'epistolaAdminProblems' | pluginTranslate: 'epistola' | async\n            }}</span>\n            <cds-tag size=\"sm\" type=\"red\">{{ card.problemCount }}</cds-tag>\n          </div>\n        </div>\n\n        <div class=\"config-card__footer\">\n          <span class=\"config-card__latency\">{{ card.latencyMs }} ms</span>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n\n  <!-- Detail view: selected configuration -->\n  <ng-container *ngIf=\"selectedCard\">\n    <div class=\"detail-header mb-3\">\n      <button class=\"btn btn-link btn-sm p-0\" (click)=\"backToOverview()\">\n        &larr; {{ 'epistolaAdminBackToOverview' | pluginTranslate: 'epistola' | async }}\n      </button>\n    </div>\n\n    <div class=\"detail-summary mb-4\">\n      <h4>\n        <span\n          class=\"status-dot me-2\"\n          [class.status-dot--ok]=\"selectedCard.reachable\"\n          [class.status-dot--error]=\"!selectedCard.reachable\"\n        >\n        </span>\n        {{ selectedCard.configurationTitle }}\n      </h4>\n\n      <table class=\"table table-sm detail-info-table\">\n        <tbody>\n          <tr>\n            <th>{{ 'epistolaAdminTenantId' | pluginTranslate: 'epistola' | async }}</th>\n            <td>\n              <code>{{ selectedCard.tenantId }}</code>\n            </td>\n          </tr>\n          <tr>\n            <th>{{ 'epistolaAdminStatus' | pluginTranslate: 'epistola' | async }}</th>\n            <td>\n              <cds-tag size=\"sm\" [type]=\"selectedCard.reachable ? 'green' : 'red'\">\n                {{\n                  selectedCard.reachable\n                    ? ('epistolaAdminConnected' | pluginTranslate: 'epistola' | async)\n                    : ('epistolaAdminUnreachable' | pluginTranslate: 'epistola' | async)\n                }}\n              </cds-tag>\n              <span class=\"text-muted ms-2\">{{ selectedCard.latencyMs }} ms</span>\n            </td>\n          </tr>\n          <tr *ngIf=\"selectedCard.serverVersion\">\n            <th>{{ 'epistolaAdminServerVersion' | pluginTranslate: 'epistola' | async }}</th>\n            <td>{{ selectedCard.serverVersion }}</td>\n          </tr>\n          <tr *ngIf=\"selectedCard.errorMessage\">\n            <th>{{ 'epistolaAdminError' | pluginTranslate: 'epistola' | async }}</th>\n            <td class=\"text-danger\">{{ selectedCard.errorMessage }}</td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n\n    <!-- Tabs -->\n    <ng-template #actionsHeading>\n      {{ 'epistolaAdminPluginActions' | pluginTranslate: 'epistola' | async }}\n      <cds-tag size=\"sm\" type=\"gray\" class=\"ms-1\">{{ selectedCard.usageEntries.length }}</cds-tag>\n    </ng-template>\n\n    <ng-template #pendingHeading>\n      {{ 'epistolaAdminPendingJobs' | pluginTranslate: 'epistola' | async }}\n      <cds-tag\n        size=\"sm\"\n        [type]=\"selectedCard.pendingJobs.length > 0 ? 'blue' : 'gray'\"\n        class=\"ms-1\"\n      >\n        {{ selectedCard.pendingJobs.length }}\n      </cds-tag>\n    </ng-template>\n\n    <cds-tabs [cacheActive]=\"true\" type=\"contained\">\n      <cds-tab\n        [heading]=\"actionsHeading\"\n        [active]=\"activeTab === 'actions'\"\n        (selected)=\"setActiveTab('actions')\"\n      >\n        <div *ngIf=\"selectedCard.usageEntries.length === 0\" class=\"text-muted mt-3 mb-3\">\n          {{ 'epistolaAdminNoUsageForConfig' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <table *ngIf=\"selectedCard.usageEntries.length > 0\" class=\"table table-striped mt-3\">\n          <thead>\n            <tr>\n              <th>{{ 'epistolaAdminCase' | pluginTranslate: 'epistola' | async }}</th>\n              <th>{{ 'epistolaAdminProcess' | pluginTranslate: 'epistola' | async }}</th>\n              <th>{{ 'epistolaAdminActivity' | pluginTranslate: 'epistola' | async }}</th>\n              <th>{{ 'epistolaAdminAction' | pluginTranslate: 'epistola' | async }}</th>\n              <th>{{ 'epistolaAdminProblems' | pluginTranslate: 'epistola' | async }}</th>\n              <th></th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr\n              *ngFor=\"let entry of selectedCard.usageEntries\"\n              [class.table-warning]=\"entry.problems.length > 0\"\n            >\n              <td>{{ entry.caseDefinitionKey || '-' }}</td>\n              <td>\n                <a\n                  *ngIf=\"entry.caseDefinitionKey && entry.caseDefinitionVersionTag\"\n                  [routerLink]=\"[\n                    '/case-management',\n                    'case',\n                    entry.caseDefinitionKey,\n                    'version',\n                    entry.caseDefinitionVersionTag,\n                    'processes',\n                    entry.processDefinitionKey,\n                  ]\"\n                  class=\"usage-link\"\n                >\n                  {{ entry.processDefinitionName }}\n                </a>\n                <span *ngIf=\"!entry.caseDefinitionKey || !entry.caseDefinitionVersionTag\">\n                  {{ entry.processDefinitionName }}\n                </span>\n              </td>\n              <td>{{ entry.activityName }}</td>\n              <td>\n                <code>{{ entry.actionKey }}</code>\n              </td>\n              <td>\n                <cds-tag *ngIf=\"entry.problems.length === 0\" size=\"sm\" type=\"green\">OK</cds-tag>\n                <cds-tag\n                  *ngFor=\"let problem of entry.problems\"\n                  size=\"sm\"\n                  type=\"red\"\n                  class=\"d-block mb-1\"\n                >\n                  {{ problem }}\n                </cds-tag>\n              </td>\n              <td>\n                <button\n                  class=\"btn btn-sm btn-outline-secondary\"\n                  (click)=\"exportProcessLink(entry)\"\n                  [title]=\"'epistolaAdminExport' | pluginTranslate: 'epistola' | async\"\n                >\n                  &#x2913;\n                </button>\n              </td>\n            </tr>\n          </tbody>\n        </table>\n      </cds-tab>\n\n      <cds-tab\n        [heading]=\"pendingHeading\"\n        [active]=\"activeTab === 'pending'\"\n        (selected)=\"setActiveTab('pending')\"\n      >\n        <div *ngIf=\"selectedCard.pendingJobs.length === 0\" class=\"text-muted mt-3 mb-3\">\n          {{ 'epistolaAdminNoPendingJobs' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <table *ngIf=\"selectedCard.pendingJobs.length > 0\" class=\"table table-striped mt-3\">\n          <thead>\n            <tr>\n              <th>{{ 'epistolaAdminProcess' | pluginTranslate: 'epistola' | async }}</th>\n              <th>{{ 'epistolaAdminActivity' | pluginTranslate: 'epistola' | async }}</th>\n              <th>{{ 'epistolaAdminRequestId' | pluginTranslate: 'epistola' | async }}</th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr *ngFor=\"let job of selectedCard.pendingJobs\">\n              <td>{{ job.processDefinitionName }}</td>\n              <td>{{ job.activityName }}</td>\n              <td>\n                <code>{{ job.requestId }}</code>\n              </td>\n            </tr>\n          </tbody>\n        </table>\n      </cds-tab>\n    </cds-tabs>\n  </ng-container>\n</div>\n", styles: [".epistola-admin{padding:1.5rem}.epistola-admin .version-badge{font-size:.75rem;font-weight:500;padding:.2em .6em;border-radius:4px;background-color:#e8e8e8;color:#525252}.epistola-admin .badge{font-size:.85em;padding:.35em .65em}.epistola-admin code{font-size:.9em;color:#525252}.epistola-admin table th{font-weight:600;white-space:nowrap}.epistola-admin .status-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:.5rem;flex-shrink:0;background-color:#adb5bd}.epistola-admin .status-dot--ok{background-color:#198754}.epistola-admin .status-dot--error{background-color:#dc3545}.epistola-admin .card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1rem}.epistola-admin .config-card{border:1px solid #dee2e6;border-radius:8px;padding:1.25rem;cursor:pointer;transition:box-shadow .15s ease,border-color .15s ease;background:#fff}.epistola-admin .config-card:hover{box-shadow:0 2px 8px #0000001a}.epistola-admin .config-card--ok{border-left:4px solid #198754}.epistola-admin .config-card--warning{border-left:4px solid #ffc107}.epistola-admin .config-card--error{border-left:4px solid #dc3545}.epistola-admin .config-card__header{display:flex;align-items:center;margin-bottom:1rem}.epistola-admin .config-card__title{margin:0;font-size:1.05rem;font-weight:600;color:#161616}.epistola-admin .config-card__body{display:flex;flex-direction:column;gap:.5rem}.epistola-admin .config-card__field{display:flex;justify-content:space-between;align-items:center}.epistola-admin .config-card__label{font-size:.875rem;color:#6c757d}.epistola-admin .config-card__value{font-size:.875rem;color:#161616}.epistola-admin .config-card__footer{margin-top:1rem;padding-top:.75rem;border-top:1px solid #f0f0f0;text-align:right}.epistola-admin .config-card__latency{font-size:.8rem;color:#adb5bd}.epistola-admin .usage-link{color:#0f62fe;text-decoration:none}.epistola-admin .usage-link:hover{text-decoration:underline}.epistola-admin .detail-info-table{max-width:500px}.epistola-admin .detail-info-table th{width:140px}.epistola-admin .detail-summary{padding:1rem 0;border-bottom:1px solid #dee2e6}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2$3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: PluginTranslatePipeModule }, { kind: "pipe", type: i2$1.PluginTranslatePipe, name: "pluginTranslate" }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: i5.Tabs, selector: "cds-tabs, ibm-tabs", inputs: ["position", "cacheActive", "followFocus", "isNavigation", "ariaLabel", "ariaLabelledby", "type", "theme", "skeleton"] }, { kind: "component", type: i5.Tab, selector: "cds-tab, ibm-tab", inputs: ["heading", "title", "context", "active", "disabled", "tabIndex", "id", "cacheActive", "tabContent", "templateContext"], outputs: ["selected"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i6.Tag, selector: "cds-tag, ibm-tag", inputs: ["type", "size", "class", "skeleton"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaAdminPageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'epistola-admin-page', standalone: true, imports: [CommonModule, RouterModule, PluginTranslatePipeModule, TabsModule, TagModule], template: "<div class=\"epistola-admin\">\n  <!-- Overview: card grid (no configuration selected) -->\n  <ng-container *ngIf=\"!selectedCard\">\n    <div class=\"d-flex justify-content-between align-items-center mb-3\">\n      <div class=\"d-flex align-items-center\">\n        <h5 class=\"mb-0\">{{ 'epistolaAdminOverview' | pluginTranslate: 'epistola' | async }}</h5>\n        <span *ngIf=\"pluginVersion\" class=\"version-badge ms-2\">v{{ pluginVersion }}</span>\n      </div>\n      <button class=\"btn btn-outline-primary btn-sm\" (click)=\"refresh()\" [disabled]=\"loading\">\n        {{ 'epistolaAdminRefresh' | pluginTranslate: 'epistola' | async }}\n      </button>\n    </div>\n\n    <div *ngIf=\"loading\" class=\"text-muted\">\n      {{ 'epistolaAdminLoading' | pluginTranslate: 'epistola' | async }}\n    </div>\n\n    <div *ngIf=\"!loading && cards.length === 0\" class=\"text-muted\">\n      {{ 'epistolaAdminNoConfigurations' | pluginTranslate: 'epistola' | async }}\n    </div>\n\n    <div *ngIf=\"!loading && cards.length > 0\" class=\"card-grid\">\n      <div\n        *ngFor=\"let card of cards\"\n        class=\"config-card\"\n        [class.config-card--ok]=\"card.reachable && card.problemCount === 0\"\n        [class.config-card--warning]=\"card.reachable && card.problemCount > 0\"\n        [class.config-card--error]=\"!card.reachable\"\n        (click)=\"selectConfiguration(card)\"\n      >\n        <div class=\"config-card__header\">\n          <span\n            class=\"status-dot\"\n            [class.status-dot--ok]=\"card.reachable\"\n            [class.status-dot--error]=\"!card.reachable\"\n          >\n          </span>\n          <h5 class=\"config-card__title\">{{ card.configurationTitle }}</h5>\n        </div>\n\n        <div class=\"config-card__body\">\n          <div class=\"config-card__field\">\n            <span class=\"config-card__label\">{{\n              'epistolaAdminTenantId' | pluginTranslate: 'epistola' | async\n            }}</span>\n            <code class=\"config-card__value\">{{ card.tenantId }}</code>\n          </div>\n          <div class=\"config-card__field\">\n            <span class=\"config-card__label\">{{\n              'epistolaAdminStatus' | pluginTranslate: 'epistola' | async\n            }}</span>\n            <cds-tag size=\"sm\" [type]=\"card.reachable ? 'green' : 'red'\">\n              {{\n                card.reachable\n                  ? ('epistolaAdminConnected' | pluginTranslate: 'epistola' | async)\n                  : ('epistolaAdminUnreachable' | pluginTranslate: 'epistola' | async)\n              }}\n            </cds-tag>\n          </div>\n          <div *ngIf=\"card.serverVersion\" class=\"config-card__field\">\n            <span class=\"config-card__label\">{{\n              'epistolaAdminServerVersion' | pluginTranslate: 'epistola' | async\n            }}</span>\n            <span class=\"config-card__value\">{{ card.serverVersion }}</span>\n          </div>\n          <div class=\"config-card__field\">\n            <span class=\"config-card__label\">{{\n              'epistolaAdminPluginActions' | pluginTranslate: 'epistola' | async\n            }}</span>\n            <span class=\"config-card__value\">{{ card.usageCount }}</span>\n          </div>\n          <div *ngIf=\"card.pendingJobs.length > 0\" class=\"config-card__field\">\n            <span class=\"config-card__label\">{{\n              'epistolaAdminPendingJobs' | pluginTranslate: 'epistola' | async\n            }}</span>\n            <cds-tag size=\"sm\" type=\"blue\">{{ card.pendingJobs.length }}</cds-tag>\n          </div>\n          <div *ngIf=\"card.problemCount > 0\" class=\"config-card__field\">\n            <span class=\"config-card__label\">{{\n              'epistolaAdminProblems' | pluginTranslate: 'epistola' | async\n            }}</span>\n            <cds-tag size=\"sm\" type=\"red\">{{ card.problemCount }}</cds-tag>\n          </div>\n        </div>\n\n        <div class=\"config-card__footer\">\n          <span class=\"config-card__latency\">{{ card.latencyMs }} ms</span>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n\n  <!-- Detail view: selected configuration -->\n  <ng-container *ngIf=\"selectedCard\">\n    <div class=\"detail-header mb-3\">\n      <button class=\"btn btn-link btn-sm p-0\" (click)=\"backToOverview()\">\n        &larr; {{ 'epistolaAdminBackToOverview' | pluginTranslate: 'epistola' | async }}\n      </button>\n    </div>\n\n    <div class=\"detail-summary mb-4\">\n      <h4>\n        <span\n          class=\"status-dot me-2\"\n          [class.status-dot--ok]=\"selectedCard.reachable\"\n          [class.status-dot--error]=\"!selectedCard.reachable\"\n        >\n        </span>\n        {{ selectedCard.configurationTitle }}\n      </h4>\n\n      <table class=\"table table-sm detail-info-table\">\n        <tbody>\n          <tr>\n            <th>{{ 'epistolaAdminTenantId' | pluginTranslate: 'epistola' | async }}</th>\n            <td>\n              <code>{{ selectedCard.tenantId }}</code>\n            </td>\n          </tr>\n          <tr>\n            <th>{{ 'epistolaAdminStatus' | pluginTranslate: 'epistola' | async }}</th>\n            <td>\n              <cds-tag size=\"sm\" [type]=\"selectedCard.reachable ? 'green' : 'red'\">\n                {{\n                  selectedCard.reachable\n                    ? ('epistolaAdminConnected' | pluginTranslate: 'epistola' | async)\n                    : ('epistolaAdminUnreachable' | pluginTranslate: 'epistola' | async)\n                }}\n              </cds-tag>\n              <span class=\"text-muted ms-2\">{{ selectedCard.latencyMs }} ms</span>\n            </td>\n          </tr>\n          <tr *ngIf=\"selectedCard.serverVersion\">\n            <th>{{ 'epistolaAdminServerVersion' | pluginTranslate: 'epistola' | async }}</th>\n            <td>{{ selectedCard.serverVersion }}</td>\n          </tr>\n          <tr *ngIf=\"selectedCard.errorMessage\">\n            <th>{{ 'epistolaAdminError' | pluginTranslate: 'epistola' | async }}</th>\n            <td class=\"text-danger\">{{ selectedCard.errorMessage }}</td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n\n    <!-- Tabs -->\n    <ng-template #actionsHeading>\n      {{ 'epistolaAdminPluginActions' | pluginTranslate: 'epistola' | async }}\n      <cds-tag size=\"sm\" type=\"gray\" class=\"ms-1\">{{ selectedCard.usageEntries.length }}</cds-tag>\n    </ng-template>\n\n    <ng-template #pendingHeading>\n      {{ 'epistolaAdminPendingJobs' | pluginTranslate: 'epistola' | async }}\n      <cds-tag\n        size=\"sm\"\n        [type]=\"selectedCard.pendingJobs.length > 0 ? 'blue' : 'gray'\"\n        class=\"ms-1\"\n      >\n        {{ selectedCard.pendingJobs.length }}\n      </cds-tag>\n    </ng-template>\n\n    <cds-tabs [cacheActive]=\"true\" type=\"contained\">\n      <cds-tab\n        [heading]=\"actionsHeading\"\n        [active]=\"activeTab === 'actions'\"\n        (selected)=\"setActiveTab('actions')\"\n      >\n        <div *ngIf=\"selectedCard.usageEntries.length === 0\" class=\"text-muted mt-3 mb-3\">\n          {{ 'epistolaAdminNoUsageForConfig' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <table *ngIf=\"selectedCard.usageEntries.length > 0\" class=\"table table-striped mt-3\">\n          <thead>\n            <tr>\n              <th>{{ 'epistolaAdminCase' | pluginTranslate: 'epistola' | async }}</th>\n              <th>{{ 'epistolaAdminProcess' | pluginTranslate: 'epistola' | async }}</th>\n              <th>{{ 'epistolaAdminActivity' | pluginTranslate: 'epistola' | async }}</th>\n              <th>{{ 'epistolaAdminAction' | pluginTranslate: 'epistola' | async }}</th>\n              <th>{{ 'epistolaAdminProblems' | pluginTranslate: 'epistola' | async }}</th>\n              <th></th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr\n              *ngFor=\"let entry of selectedCard.usageEntries\"\n              [class.table-warning]=\"entry.problems.length > 0\"\n            >\n              <td>{{ entry.caseDefinitionKey || '-' }}</td>\n              <td>\n                <a\n                  *ngIf=\"entry.caseDefinitionKey && entry.caseDefinitionVersionTag\"\n                  [routerLink]=\"[\n                    '/case-management',\n                    'case',\n                    entry.caseDefinitionKey,\n                    'version',\n                    entry.caseDefinitionVersionTag,\n                    'processes',\n                    entry.processDefinitionKey,\n                  ]\"\n                  class=\"usage-link\"\n                >\n                  {{ entry.processDefinitionName }}\n                </a>\n                <span *ngIf=\"!entry.caseDefinitionKey || !entry.caseDefinitionVersionTag\">\n                  {{ entry.processDefinitionName }}\n                </span>\n              </td>\n              <td>{{ entry.activityName }}</td>\n              <td>\n                <code>{{ entry.actionKey }}</code>\n              </td>\n              <td>\n                <cds-tag *ngIf=\"entry.problems.length === 0\" size=\"sm\" type=\"green\">OK</cds-tag>\n                <cds-tag\n                  *ngFor=\"let problem of entry.problems\"\n                  size=\"sm\"\n                  type=\"red\"\n                  class=\"d-block mb-1\"\n                >\n                  {{ problem }}\n                </cds-tag>\n              </td>\n              <td>\n                <button\n                  class=\"btn btn-sm btn-outline-secondary\"\n                  (click)=\"exportProcessLink(entry)\"\n                  [title]=\"'epistolaAdminExport' | pluginTranslate: 'epistola' | async\"\n                >\n                  &#x2913;\n                </button>\n              </td>\n            </tr>\n          </tbody>\n        </table>\n      </cds-tab>\n\n      <cds-tab\n        [heading]=\"pendingHeading\"\n        [active]=\"activeTab === 'pending'\"\n        (selected)=\"setActiveTab('pending')\"\n      >\n        <div *ngIf=\"selectedCard.pendingJobs.length === 0\" class=\"text-muted mt-3 mb-3\">\n          {{ 'epistolaAdminNoPendingJobs' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <table *ngIf=\"selectedCard.pendingJobs.length > 0\" class=\"table table-striped mt-3\">\n          <thead>\n            <tr>\n              <th>{{ 'epistolaAdminProcess' | pluginTranslate: 'epistola' | async }}</th>\n              <th>{{ 'epistolaAdminActivity' | pluginTranslate: 'epistola' | async }}</th>\n              <th>{{ 'epistolaAdminRequestId' | pluginTranslate: 'epistola' | async }}</th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr *ngFor=\"let job of selectedCard.pendingJobs\">\n              <td>{{ job.processDefinitionName }}</td>\n              <td>{{ job.activityName }}</td>\n              <td>\n                <code>{{ job.requestId }}</code>\n              </td>\n            </tr>\n          </tbody>\n        </table>\n      </cds-tab>\n    </cds-tabs>\n  </ng-container>\n</div>\n", styles: [".epistola-admin{padding:1.5rem}.epistola-admin .version-badge{font-size:.75rem;font-weight:500;padding:.2em .6em;border-radius:4px;background-color:#e8e8e8;color:#525252}.epistola-admin .badge{font-size:.85em;padding:.35em .65em}.epistola-admin code{font-size:.9em;color:#525252}.epistola-admin table th{font-weight:600;white-space:nowrap}.epistola-admin .status-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:.5rem;flex-shrink:0;background-color:#adb5bd}.epistola-admin .status-dot--ok{background-color:#198754}.epistola-admin .status-dot--error{background-color:#dc3545}.epistola-admin .card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1rem}.epistola-admin .config-card{border:1px solid #dee2e6;border-radius:8px;padding:1.25rem;cursor:pointer;transition:box-shadow .15s ease,border-color .15s ease;background:#fff}.epistola-admin .config-card:hover{box-shadow:0 2px 8px #0000001a}.epistola-admin .config-card--ok{border-left:4px solid #198754}.epistola-admin .config-card--warning{border-left:4px solid #ffc107}.epistola-admin .config-card--error{border-left:4px solid #dc3545}.epistola-admin .config-card__header{display:flex;align-items:center;margin-bottom:1rem}.epistola-admin .config-card__title{margin:0;font-size:1.05rem;font-weight:600;color:#161616}.epistola-admin .config-card__body{display:flex;flex-direction:column;gap:.5rem}.epistola-admin .config-card__field{display:flex;justify-content:space-between;align-items:center}.epistola-admin .config-card__label{font-size:.875rem;color:#6c757d}.epistola-admin .config-card__value{font-size:.875rem;color:#161616}.epistola-admin .config-card__footer{margin-top:1rem;padding-top:.75rem;border-top:1px solid #f0f0f0;text-align:right}.epistola-admin .config-card__latency{font-size:.8rem;color:#adb5bd}.epistola-admin .usage-link{color:#0f62fe;text-decoration:none}.epistola-admin .usage-link:hover{text-decoration:underline}.epistola-admin .detail-info-table{max-width:500px}.epistola-admin .detail-info-table th{width:140px}.epistola-admin .detail-summary{padding:1rem 0;border-bottom:1px solid #dee2e6}\n"] }]
+        }], ctorParameters: () => [{ type: EpistolaAdminService }, { type: i2$3.ActivatedRoute }, { type: i2$3.Router }] });
+
+const routes = [
+    {
+        path: 'epistola',
+        component: EpistolaAdminPageComponent,
+        canActivate: [AuthGuardService],
+        data: { title: 'Epistola', roles: ['ROLE_ADMIN'] },
+    },
+];
+class EpistolaAdminRoutingModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaAdminRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.20", ngImport: i0, type: EpistolaAdminRoutingModule, imports: [i2$3.RouterModule], exports: [RouterModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaAdminRoutingModule, imports: [RouterModule.forChild(routes), RouterModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaAdminRoutingModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [RouterModule.forChild(routes)],
+                    exports: [RouterModule],
+                }]
+        }] });
+
 const EPISTOLA_DOWNLOAD_OPTIONS = {
     type: 'epistola-download',
     selector: 'epistola-download-button',
@@ -1890,6 +2948,7 @@ class EpistolaPluginModule {
         return {
             ngModule: EpistolaPluginModule,
             providers: [
+                EpistolaMenuService,
                 {
                     provide: ENVIRONMENT_INITIALIZER,
                     multi: true,
@@ -1899,9 +2958,11 @@ class EpistolaPluginModule {
                         registerEpistolaRetryFormComponent(injector);
                         registerEpistolaPreviewButtonComponent(injector);
                         registerEpistolaDocumentPreviewComponent(injector);
-                    }
-                }
-            ]
+                        // Eagerly create EpistolaMenuService to trigger menu registration
+                        inject(EpistolaMenuService);
+                    },
+                },
+            ],
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaPluginModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -1911,52 +2972,40 @@ class EpistolaPluginModule {
             FormModule,
             InputModule,
             SelectModule,
+            EpistolaAdminRoutingModule,
             EpistolaConfigurationComponent,
             GenerateDocumentConfigurationComponent,
             CheckJobStatusConfigurationComponent,
             DownloadDocumentConfigurationComponent,
-            DataMappingTreeComponent,
-            ValueInputComponent,
-            ScalarFieldComponent,
-            ArrayFieldComponent,
-            FieldTreeComponent,
             EpistolaDownloadComponent,
             EpistolaRetryFormComponent,
             EpistolaPreviewButtonComponent,
-            EpistolaDocumentPreviewComponent], exports: [EpistolaConfigurationComponent,
+            EpistolaDocumentPreviewComponent,
+            EpistolaAdminPageComponent], exports: [EpistolaConfigurationComponent,
             GenerateDocumentConfigurationComponent,
             CheckJobStatusConfigurationComponent,
             DownloadDocumentConfigurationComponent,
-            DataMappingTreeComponent,
-            ValueInputComponent,
-            ScalarFieldComponent,
-            ArrayFieldComponent,
-            FieldTreeComponent,
             EpistolaDownloadComponent,
             EpistolaRetryFormComponent,
             EpistolaPreviewButtonComponent,
-            EpistolaDocumentPreviewComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaPluginModule, providers: [
-            EpistolaPluginService
-        ], imports: [CommonModule,
+            EpistolaDocumentPreviewComponent,
+            EpistolaAdminPageComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaPluginModule, providers: [EpistolaPluginService, EpistolaAdminService], imports: [CommonModule,
             HttpClientModule,
             PluginTranslatePipeModule,
             FormModule,
             InputModule,
             SelectModule,
+            EpistolaAdminRoutingModule,
             EpistolaConfigurationComponent,
             GenerateDocumentConfigurationComponent,
             CheckJobStatusConfigurationComponent,
             DownloadDocumentConfigurationComponent,
-            DataMappingTreeComponent,
-            ValueInputComponent,
-            ScalarFieldComponent,
-            ArrayFieldComponent,
-            FieldTreeComponent,
             EpistolaDownloadComponent,
             EpistolaRetryFormComponent,
             EpistolaPreviewButtonComponent,
-            EpistolaDocumentPreviewComponent] });
+            EpistolaDocumentPreviewComponent,
+            EpistolaAdminPageComponent] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaPluginModule, decorators: [{
             type: NgModule,
@@ -1968,38 +3017,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                         FormModule,
                         InputModule,
                         SelectModule,
+                        EpistolaAdminRoutingModule,
                         EpistolaConfigurationComponent,
                         GenerateDocumentConfigurationComponent,
                         CheckJobStatusConfigurationComponent,
                         DownloadDocumentConfigurationComponent,
-                        DataMappingTreeComponent,
-                        ValueInputComponent,
-                        ScalarFieldComponent,
-                        ArrayFieldComponent,
-                        FieldTreeComponent,
                         EpistolaDownloadComponent,
                         EpistolaRetryFormComponent,
                         EpistolaPreviewButtonComponent,
-                        EpistolaDocumentPreviewComponent
+                        EpistolaDocumentPreviewComponent,
+                        EpistolaAdminPageComponent,
                     ],
                     exports: [
                         EpistolaConfigurationComponent,
                         GenerateDocumentConfigurationComponent,
                         CheckJobStatusConfigurationComponent,
                         DownloadDocumentConfigurationComponent,
-                        DataMappingTreeComponent,
-                        ValueInputComponent,
-                        ScalarFieldComponent,
-                        ArrayFieldComponent,
-                        FieldTreeComponent,
                         EpistolaDownloadComponent,
                         EpistolaRetryFormComponent,
                         EpistolaPreviewButtonComponent,
-                        EpistolaDocumentPreviewComponent
+                        EpistolaDocumentPreviewComponent,
+                        EpistolaAdminPageComponent,
                     ],
-                    providers: [
-                        EpistolaPluginService
-                    ]
+                    providers: [EpistolaPluginService, EpistolaAdminService],
                 }]
         }] });
 
@@ -2073,6 +3113,18 @@ const epistolaPluginSpecification = {
             // Data mapping builder translations
             dataMappingTitle: 'Data Mapping',
             dataMappingDescription: 'Koppel template velden aan Valtimo data bronnen',
+            jsonataDescription: 'JSONata expressie die de template data genereert. Gebruik $doc, $pv en $case voor toegang tot document-, procesvariabelen- en zaakdata.',
+            mappingModeSimple: 'Eenvoudig',
+            mappingModeAdvanced: 'Geavanceerd',
+            mappingTools: 'Schema & Voorbeeld',
+            expectedStructure: 'Verwacht schema',
+            expectedStructureLoading: 'Schema laden...',
+            previewTitle: 'Voorbeeld',
+            previewDocPlaceholder: 'Document ID',
+            previewExpected: 'Verwacht',
+            previewProduced: 'Geproduceerd',
+            previewRunHint: 'Voer een document ID in en klik ▶ om een voorbeeld te zien',
+            previewMissing: 'Ontbrekende verplichte velden',
             templateField: 'Template veld',
             dataSource: 'Data bron',
             addMapping: 'Mapping toevoegen',
@@ -2094,6 +3146,7 @@ const epistolaPluginSpecification = {
             pvMode: 'Procesvariabele modus',
             pvPlaceholder: 'Naam procesvariabele',
             expressionMode: 'Expressiemodus',
+            availableFunctions: 'Beschikbare functies',
             itemFieldMapping: 'Veldnamen per item koppelen',
             itemFieldMappingTitle: 'Veldkoppeling per item:',
             sourceFieldPlaceholder: 'Bronveldnaam',
@@ -2111,7 +3164,31 @@ const epistolaPluginSpecification = {
             // Download document action
             'download-document': 'Download Document',
             contentVariable: 'Inhoud Variabele',
-            contentVariableTooltip: 'Naam van de procesvariabele waarin de documentinhoud (Base64) wordt opgeslagen'
+            contentVariableTooltip: 'Naam van de procesvariabele waarin de documentinhoud (Base64) wordt opgeslagen',
+            // Admin page
+            epistolaAdminOverview: 'Overzicht',
+            epistolaAdminRefresh: 'Vernieuwen',
+            epistolaAdminLoading: 'Laden...',
+            epistolaAdminNoConfigurations: 'Geen Epistola plugin configuraties gevonden.',
+            epistolaAdminTenantId: 'Tenant ID',
+            epistolaAdminStatus: 'Status',
+            epistolaAdminConnected: 'Verbonden',
+            epistolaAdminUnreachable: 'Onbereikbaar',
+            epistolaAdminError: 'Fout',
+            epistolaAdminPluginActions: 'Plugin acties',
+            epistolaAdminProblems: 'Problemen',
+            epistolaAdminBackToOverview: 'Terug naar overzicht',
+            epistolaAdminNoUsageForConfig: 'Geen procesacties geconfigureerd voor deze verbinding.',
+            epistolaAdminCase: 'Zaak',
+            epistolaAdminProcess: 'Proces',
+            epistolaAdminActivity: 'Activiteit',
+            epistolaAdminAction: 'Actie',
+            epistolaAdminServerVersion: 'Server versie',
+            epistolaAdminExport: 'Exporteren',
+            epistolaAdminPendingJobs: 'Wachtende taken',
+            epistolaAdminNoPendingJobs: 'Geen wachtende taken voor deze verbinding.',
+            epistolaAdminConfiguration: 'Configuratie',
+            epistolaAdminRequestId: 'Request ID',
         },
         en: {
             title: 'Epistola Document Suite',
@@ -2164,6 +3241,18 @@ const epistolaPluginSpecification = {
             // Data mapping builder translations
             dataMappingTitle: 'Data Mapping',
             dataMappingDescription: 'Map template fields to Valtimo data sources',
+            mappingModeSimple: 'Simple',
+            mappingModeAdvanced: 'Advanced',
+            mappingTools: 'Schema & Preview',
+            expectedStructure: 'Expected schema',
+            expectedStructureLoading: 'Loading schema...',
+            previewTitle: 'Preview',
+            previewDocPlaceholder: 'Document ID',
+            previewExpected: 'Expected',
+            previewProduced: 'Produced',
+            previewRunHint: 'Enter a document ID and click ▶ to preview the output',
+            previewMissing: 'Missing required fields',
+            jsonataDescription: 'JSONata expression that generates the template data. Use $doc, $pv and $case to access document, process variable and case data.',
             templateField: 'Template field',
             dataSource: 'Data source',
             addMapping: 'Add mapping',
@@ -2185,6 +3274,7 @@ const epistolaPluginSpecification = {
             pvMode: 'Process variable mode',
             pvPlaceholder: 'Process variable name',
             expressionMode: 'Expression mode',
+            availableFunctions: 'Available functions',
             itemFieldMapping: 'Map field names per item',
             itemFieldMappingTitle: 'Item field mapping:',
             sourceFieldPlaceholder: 'Source field name',
@@ -2202,9 +3292,33 @@ const epistolaPluginSpecification = {
             // Download document action
             'download-document': 'Download Document',
             contentVariable: 'Content Variable',
-            contentVariableTooltip: 'Name of the process variable to store the document content (Base64) in'
-        }
-    }
+            contentVariableTooltip: 'Name of the process variable to store the document content (Base64) in',
+            // Admin page
+            epistolaAdminOverview: 'Overview',
+            epistolaAdminRefresh: 'Refresh',
+            epistolaAdminLoading: 'Loading...',
+            epistolaAdminNoConfigurations: 'No Epistola plugin configurations found.',
+            epistolaAdminTenantId: 'Tenant ID',
+            epistolaAdminStatus: 'Status',
+            epistolaAdminConnected: 'Connected',
+            epistolaAdminUnreachable: 'Unreachable',
+            epistolaAdminError: 'Error',
+            epistolaAdminPluginActions: 'Plugin actions',
+            epistolaAdminProblems: 'Problems',
+            epistolaAdminBackToOverview: 'Back to overview',
+            epistolaAdminNoUsageForConfig: 'No process actions configured for this connection.',
+            epistolaAdminCase: 'Case',
+            epistolaAdminProcess: 'Process',
+            epistolaAdminActivity: 'Activity',
+            epistolaAdminAction: 'Action',
+            epistolaAdminServerVersion: 'Server version',
+            epistolaAdminExport: 'Export',
+            epistolaAdminPendingJobs: 'Pending jobs',
+            epistolaAdminNoPendingJobs: 'No pending jobs for this connection.',
+            epistolaAdminConfiguration: 'Configuration',
+            epistolaAdminRequestId: 'Request ID',
+        },
+    },
 };
 
 /*
@@ -2215,5 +3329,5 @@ const epistolaPluginSpecification = {
  * Generated bundle index. Do not edit.
  */
 
-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 };
+export { CheckJobStatusConfigurationComponent, DownloadDocumentConfigurationComponent, EPISTOLA_DOCUMENT_PREVIEW_OPTIONS, EPISTOLA_DOWNLOAD_OPTIONS, EPISTOLA_PREVIEW_BUTTON_OPTIONS, EPISTOLA_RETRY_FORM_OPTIONS, EpistolaAdminPageComponent, EpistolaAdminRoutingModule, EpistolaAdminService, EpistolaConfigurationComponent, EpistolaDocumentPreviewComponent, EpistolaDownloadComponent, EpistolaMenuService, EpistolaPluginModule, EpistolaPluginService, EpistolaPreviewButtonComponent, EpistolaRetryFormComponent, GenerateDocumentConfigurationComponent, JsonataEditorComponent, MappingBuilderComponent, epistolaPluginSpecification, errorResource, initialResource, loadingResource, registerEpistolaDocumentPreviewComponent, registerEpistolaDownloadComponent, registerEpistolaPreviewButtonComponent, registerEpistolaRetryFormComponent, successResource };
 //# sourceMappingURL=epistola.app-valtimo-plugin.mjs.map