@epistola.app/valtimo-plugin 0.11.0 → 0.11.1

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

@@ -721,11 +721,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  data-testid=\"epistola-config-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    data-testid=\"epistola-config-title\"\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    data-testid=\"epistola-config-base-url\"\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    data-testid=\"epistola-config-api-key\"\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    data-testid=\"epistola-config-tenant-id\"\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    data-testid=\"epistola-config-default-environment-id\"\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    data-testid=\"epistola-config-template-sync-enabled\"\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  data-testid=\"epistola-config-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    data-testid=\"epistola-config-title\"\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    data-testid=\"epistola-config-base-url\"\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    data-testid=\"epistola-config-api-key\"\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    data-testid=\"epistola-config-tenant-id\"\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    data-testid=\"epistola-config-default-environment-id\"\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    data-testid=\"epistola-config-template-sync-enabled\"\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$: [{
@@ -1039,8 +1039,9 @@ class JsonataEditorComponent {
     }
     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", contextVariables: "contextVariables", functions: "functions", variablesHint: "variablesHint" }, outputs: { expressionChange: "expressionChange", validChange: "validChange" }, usesOnChanges: true, ngImport: i0, template: `
-    <div class="jsonata-editor">
+    <div class="jsonata-editor" data-testid="epistola-jsonata-editor">
       <valtimo-editor
+        data-testid="epistola-jsonata-editor-input"
         [model]="editorModel"
         [editorOptions]="editorOptions"
         [disabled]="disabled"
@@ -1048,10 +1049,19 @@ class JsonataEditorComponent {
         [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">{{ variablesHint }}</span>
+      <div class="jsonata-editor__footer" data-testid="epistola-jsonata-footer">
+        <span *ngIf="error" class="jsonata-editor__error" data-testid="epistola-jsonata-error">{{
+          error
+        }}</span>
+        <span
+          *ngIf="!error && expression"
+          class="jsonata-editor__valid"
+          data-testid="epistola-jsonata-valid"
+          >&#x2713;</span
+        >
+        <span class="jsonata-editor__variables" data-testid="epistola-jsonata-variables-hint">{{
+          variablesHint
+        }}</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"] }] });
@@ -1059,8 +1069,9 @@ class JsonataEditorComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: JsonataEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'epistola-jsonata-editor', standalone: true, imports: [CommonModule, PluginTranslatePipeModule, EditorModule], template: `
-    <div class="jsonata-editor">
+    <div class="jsonata-editor" data-testid="epistola-jsonata-editor">
       <valtimo-editor
+        data-testid="epistola-jsonata-editor-input"
         [model]="editorModel"
         [editorOptions]="editorOptions"
         [disabled]="disabled"
@@ -1068,10 +1079,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
         [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">{{ variablesHint }}</span>
+      <div class="jsonata-editor__footer" data-testid="epistola-jsonata-footer">
+        <span *ngIf="error" class="jsonata-editor__error" data-testid="epistola-jsonata-error">{{
+          error
+        }}</span>
+        <span
+          *ngIf="!error && expression"
+          class="jsonata-editor__valid"
+          data-testid="epistola-jsonata-valid"
+          >&#x2713;</span
+        >
+        <span class="jsonata-editor__variables" data-testid="epistola-jsonata-variables-hint">{{
+          variablesHint
+        }}</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"] }]
@@ -1140,32 +1160,46 @@ class ExpectedStructureComponent {
     }
     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">
+    <div class="expected" data-testid="epistola-schema-panel">
+      <div class="expected__header" data-testid="epistola-schema-header">
         {{ 'expectedStructure' | pluginTranslate: 'epistola' | async }}
       </div>
-      <div *ngIf="!templateFields || templateFields.length === 0" class="expected__empty">
+      <div
+        *ngIf="!templateFields || templateFields.length === 0"
+        class="expected__empty"
+        data-testid="epistola-schema-empty"
+      >
         {{ 'expectedStructureLoading' | pluginTranslate: 'epistola' | async }}
       </div>
-      <pre *ngIf="templateFields && templateFields.length > 0" class="expected__code">{{
-        structureText
-      }}</pre>
+      <pre
+        *ngIf="templateFields && templateFields.length > 0"
+        class="expected__code"
+        data-testid="epistola-schema-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">
+    <div class="expected" data-testid="epistola-schema-panel">
+      <div class="expected__header" data-testid="epistola-schema-header">
         {{ 'expectedStructure' | pluginTranslate: 'epistola' | async }}
       </div>
-      <div *ngIf="!templateFields || templateFields.length === 0" class="expected__empty">
+      <div
+        *ngIf="!templateFields || templateFields.length === 0"
+        class="expected__empty"
+        data-testid="epistola-schema-empty"
+      >
         {{ 'expectedStructureLoading' | pluginTranslate: 'epistola' | async }}
       </div>
-      <pre *ngIf="templateFields && templateFields.length > 0" class="expected__code">{{
-        structureText
-      }}</pre>
+      <pre
+        *ngIf="templateFields && templateFields.length > 0"
+        class="expected__code"
+        data-testid="epistola-schema-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: [{
@@ -1205,21 +1239,41 @@ class BuilderFieldComponent {
     }
     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" [attr.data-testid]="'epistola-mapping-field-' + field.name">
       <div
         class="builder-field__name"
         [class.builder-field__name--clickable]="field.children"
         (click)="field.children && collapseToggle.emit(path)"
+        [attr.data-testid]="'epistola-mapping-field-name-' + field.name"
       >
-        <span *ngIf="field.children" class="builder-field__chevron">{{
-          collapsed ? '&#x25B6;' : '&#x25BC;'
+        <span
+          *ngIf="field.children"
+          class="builder-field__chevron"
+          [attr.data-testid]="'epistola-mapping-field-chevron-' + field.name"
+          >{{ collapsed ? '&#x25B6;' : '&#x25BC;' }}</span
+        >
+        <span class="builder-field__label" [attr.data-testid]="'epistola-mapping-field-label-' + field.name">{{
+          field.name
         }}</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>
+        <span
+          *ngIf="required"
+          class="builder-field__required"
+          [attr.data-testid]="'epistola-mapping-field-required-' + field.name"
+          >*</span
+        >
+        <span
+          *ngIf="field.children"
+          class="builder-field__type"
+          [attr.data-testid]="'epistola-mapping-field-type-' + field.name"
+          >(object)</span
+        >
       </div>
 
-      <div class="builder-field__value" *ngIf="!field.children">
+      <div
+        class="builder-field__value"
+        *ngIf="!field.children"
+        [attr.data-testid]="'epistola-mapping-field-value-' + field.name"
+      >
         <input
           *ngIf="field.mode === 'ref'"
           type="text"
@@ -1229,8 +1283,13 @@ class BuilderFieldComponent {
           [disabled]="disabled"
           placeholder="$doc.path.to.field"
           [attr.list]="'suggestions-' + path.join('-')"
+          [attr.data-testid]="'epistola-mapping-field-input-ref-' + field.name"
         />
-        <datalist *ngIf="field.mode === 'ref'" [id]="'suggestions-' + path.join('-')">
+        <datalist
+          *ngIf="field.mode === 'ref'"
+          [id]="'suggestions-' + path.join('-')"
+          [attr.data-testid]="'epistola-mapping-field-suggestions-' + field.name"
+        >
           <option *ngFor="let s of suggestions" [value]="s"></option>
         </datalist>
         <input
@@ -1241,18 +1300,24 @@ class BuilderFieldComponent {
           (ngModelChange)="valueChange.emit({ path: path, value: $event })"
           [disabled]="disabled"
           placeholder="JSONata expression"
+          [attr.data-testid]="'epistola-mapping-field-input-raw-' + field.name"
         />
         <button
           class="builder-field__mode-toggle"
           (click)="modeToggle.emit(path)"
           [disabled]="disabled"
           [title]="field.mode === 'ref' ? 'Switch to raw JSONata' : 'Switch to reference'"
+          [attr.data-testid]="'epistola-mapping-field-mode-toggle-' + field.name"
         >
           {{ field.mode === 'ref' ? 'fx' : '·' }}
         </button>
       </div>
 
-      <div *ngIf="field.children && !collapsed" class="builder-field__children">
+      <div
+        *ngIf="field.children && !collapsed"
+        class="builder-field__children"
+        [attr.data-testid]="'epistola-mapping-field-children-' + field.name"
+      >
         <epistola-builder-field
           *ngFor="let child of field.children; let j = index"
           [field]="child"
@@ -1273,21 +1338,41 @@ class BuilderFieldComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: BuilderFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'epistola-builder-field', standalone: true, imports: [CommonModule, FormsModule], template: `
-    <div class="builder-field">
+    <div class="builder-field" [attr.data-testid]="'epistola-mapping-field-' + field.name">
       <div
         class="builder-field__name"
         [class.builder-field__name--clickable]="field.children"
         (click)="field.children && collapseToggle.emit(path)"
+        [attr.data-testid]="'epistola-mapping-field-name-' + field.name"
       >
-        <span *ngIf="field.children" class="builder-field__chevron">{{
-          collapsed ? '&#x25B6;' : '&#x25BC;'
+        <span
+          *ngIf="field.children"
+          class="builder-field__chevron"
+          [attr.data-testid]="'epistola-mapping-field-chevron-' + field.name"
+          >{{ collapsed ? '&#x25B6;' : '&#x25BC;' }}</span
+        >
+        <span class="builder-field__label" [attr.data-testid]="'epistola-mapping-field-label-' + field.name">{{
+          field.name
         }}</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>
+        <span
+          *ngIf="required"
+          class="builder-field__required"
+          [attr.data-testid]="'epistola-mapping-field-required-' + field.name"
+          >*</span
+        >
+        <span
+          *ngIf="field.children"
+          class="builder-field__type"
+          [attr.data-testid]="'epistola-mapping-field-type-' + field.name"
+          >(object)</span
+        >
       </div>
 
-      <div class="builder-field__value" *ngIf="!field.children">
+      <div
+        class="builder-field__value"
+        *ngIf="!field.children"
+        [attr.data-testid]="'epistola-mapping-field-value-' + field.name"
+      >
         <input
           *ngIf="field.mode === 'ref'"
           type="text"
@@ -1297,8 +1382,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
           [disabled]="disabled"
           placeholder="$doc.path.to.field"
           [attr.list]="'suggestions-' + path.join('-')"
+          [attr.data-testid]="'epistola-mapping-field-input-ref-' + field.name"
         />
-        <datalist *ngIf="field.mode === 'ref'" [id]="'suggestions-' + path.join('-')">
+        <datalist
+          *ngIf="field.mode === 'ref'"
+          [id]="'suggestions-' + path.join('-')"
+          [attr.data-testid]="'epistola-mapping-field-suggestions-' + field.name"
+        >
           <option *ngFor="let s of suggestions" [value]="s"></option>
         </datalist>
         <input
@@ -1309,18 +1399,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
           (ngModelChange)="valueChange.emit({ path: path, value: $event })"
           [disabled]="disabled"
           placeholder="JSONata expression"
+          [attr.data-testid]="'epistola-mapping-field-input-raw-' + field.name"
         />
         <button
           class="builder-field__mode-toggle"
           (click)="modeToggle.emit(path)"
           [disabled]="disabled"
           [title]="field.mode === 'ref' ? 'Switch to raw JSONata' : 'Switch to reference'"
+          [attr.data-testid]="'epistola-mapping-field-mode-toggle-' + field.name"
         >
           {{ field.mode === 'ref' ? 'fx' : '·' }}
         </button>
       </div>
 
-      <div *ngIf="field.children && !collapsed" class="builder-field__children">
+      <div
+        *ngIf="field.children && !collapsed"
+        class="builder-field__children"
+        [attr.data-testid]="'epistola-mapping-field-children-' + field.name"
+      >
         <epistola-builder-field
           *ngFor="let child of field.children; let j = index"
           [field]="child"
@@ -1689,16 +1785,18 @@ class MappingBuilderComponent {
     }
     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 class="mapping-builder" data-testid="epistola-mapping-builder">
       <div
         *ngIf="fields.length === 0 && (!templateFields || templateFields.length === 0)"
         class="mapping-builder__empty"
+        data-testid="epistola-mapping-empty"
       >
         {{ 'noTemplateFields' | pluginTranslate: 'epistola' | async }}
       </div>
 
       <epistola-builder-field
         *ngFor="let field of fields; let i = index"
+        [attr.data-testid]="'epistola-mapping-row-' + field.name"
         [field]="field"
         [path]="[i]"
         [suggestions]="allSuggestions"
@@ -1716,16 +1814,18 @@ class MappingBuilderComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: MappingBuilderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'epistola-mapping-builder', standalone: true, imports: [CommonModule, FormsModule, PluginTranslatePipeModule, BuilderFieldComponent], template: `
-    <div class="mapping-builder">
+    <div class="mapping-builder" data-testid="epistola-mapping-builder">
       <div
         *ngIf="fields.length === 0 && (!templateFields || templateFields.length === 0)"
         class="mapping-builder__empty"
+        data-testid="epistola-mapping-empty"
       >
         {{ 'noTemplateFields' | pluginTranslate: 'epistola' | async }}
       </div>
 
       <epistola-builder-field
         *ngFor="let field of fields; let i = index"
+        [attr.data-testid]="'epistola-mapping-row-' + field.name"
         [field]="field"
         [path]="[i]"
         [suggestions]="allSuggestions"
@@ -1845,21 +1945,23 @@ class MappingPreviewComponent {
     }
     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" data-testid="epistola-mapping-preview-root">
       <div class="preview__header">
-        <span class="preview__title">{{
+        <span class="preview__title" data-testid="epistola-mapping-preview-title">{{
           'previewTitle' | pluginTranslate: 'epistola' | async
         }}</span>
         <div class="preview__controls">
           <input
             type="text"
             class="preview__doc-input"
+            data-testid="epistola-mapping-preview-doc-input"
             [ngModel]="documentId"
             (ngModelChange)="documentId = $event"
             [placeholder]="'previewDocPlaceholder' | pluginTranslate: 'epistola' | async"
           />
           <button
             class="preview__run-btn"
+            data-testid="epistola-mapping-preview-run-btn"
             (click)="runPreview()"
             [disabled]="!documentId || !expression || loading"
           >
@@ -1870,33 +1972,56 @@ class MappingPreviewComponent {
 
       <div class="preview__panels">
         <!-- Expected structure -->
-        <div class="preview__panel">
+        <div class="preview__panel" data-testid="epistola-mapping-preview-panel-expected">
           <div class="preview__panel-label">
             {{ 'previewExpected' | pluginTranslate: 'epistola' | async }}
           </div>
-          <pre class="preview__code">{{ expectedJson }}</pre>
+          <pre class="preview__code" data-testid="epistola-mapping-preview-expected-code">{{
+            expectedJson
+          }}</pre>
         </div>
 
         <!-- Produced output -->
-        <div class="preview__panel">
+        <div class="preview__panel" data-testid="epistola-mapping-preview-panel-produced">
           <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">
+          <div
+            *ngIf="loading"
+            class="preview__loading"
+            data-testid="epistola-mapping-preview-loading"
+          >
+            ...
+          </div>
+          <pre
+            *ngIf="!loading && result?.success"
+            class="preview__code"
+            data-testid="epistola-mapping-preview-produced-code"
+            >{{ result.result | json }}</pre
+          >
+          <div
+            *ngIf="!loading && result && !result.success"
+            class="preview__error"
+            data-testid="epistola-mapping-preview-error"
+          >
             {{ result.error }}
           </div>
-          <div *ngIf="!loading && !result" class="preview__placeholder">
+          <div
+            *ngIf="!loading && !result"
+            class="preview__placeholder"
+            data-testid="epistola-mapping-preview-placeholder"
+          >
             {{ 'previewRunHint' | pluginTranslate: 'epistola' | async }}
           </div>
         </div>
       </div>
 
       <!-- Missing fields warning -->
-      <div *ngIf="missingRequired.length > 0" class="preview__warnings">
+      <div
+        *ngIf="missingRequired.length > 0"
+        class="preview__warnings"
+        data-testid="epistola-mapping-preview-warnings"
+      >
         <span class="preview__warning-icon">&#x26A0;</span>
         {{ 'previewMissing' | pluginTranslate: 'epistola' | async }}:
         <strong>{{ missingRequired.join(', ') }}</strong>
@@ -1907,21 +2032,23 @@ class MappingPreviewComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: MappingPreviewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'epistola-mapping-preview', standalone: true, imports: [CommonModule, FormsModule, PluginTranslatePipeModule], template: `
-    <div class="preview">
+    <div class="preview" data-testid="epistola-mapping-preview-root">
       <div class="preview__header">
-        <span class="preview__title">{{
+        <span class="preview__title" data-testid="epistola-mapping-preview-title">{{
           'previewTitle' | pluginTranslate: 'epistola' | async
         }}</span>
         <div class="preview__controls">
           <input
             type="text"
             class="preview__doc-input"
+            data-testid="epistola-mapping-preview-doc-input"
             [ngModel]="documentId"
             (ngModelChange)="documentId = $event"
             [placeholder]="'previewDocPlaceholder' | pluginTranslate: 'epistola' | async"
           />
           <button
             class="preview__run-btn"
+            data-testid="epistola-mapping-preview-run-btn"
             (click)="runPreview()"
             [disabled]="!documentId || !expression || loading"
           >
@@ -1932,33 +2059,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
 
       <div class="preview__panels">
         <!-- Expected structure -->
-        <div class="preview__panel">
+        <div class="preview__panel" data-testid="epistola-mapping-preview-panel-expected">
           <div class="preview__panel-label">
             {{ 'previewExpected' | pluginTranslate: 'epistola' | async }}
           </div>
-          <pre class="preview__code">{{ expectedJson }}</pre>
+          <pre class="preview__code" data-testid="epistola-mapping-preview-expected-code">{{
+            expectedJson
+          }}</pre>
         </div>
 
         <!-- Produced output -->
-        <div class="preview__panel">
+        <div class="preview__panel" data-testid="epistola-mapping-preview-panel-produced">
           <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">
+          <div
+            *ngIf="loading"
+            class="preview__loading"
+            data-testid="epistola-mapping-preview-loading"
+          >
+            ...
+          </div>
+          <pre
+            *ngIf="!loading && result?.success"
+            class="preview__code"
+            data-testid="epistola-mapping-preview-produced-code"
+            >{{ result.result | json }}</pre
+          >
+          <div
+            *ngIf="!loading && result && !result.success"
+            class="preview__error"
+            data-testid="epistola-mapping-preview-error"
+          >
             {{ result.error }}
           </div>
-          <div *ngIf="!loading && !result" class="preview__placeholder">
+          <div
+            *ngIf="!loading && !result"
+            class="preview__placeholder"
+            data-testid="epistola-mapping-preview-placeholder"
+          >
             {{ 'previewRunHint' | pluginTranslate: 'epistola' | async }}
           </div>
         </div>
       </div>
 
       <!-- Missing fields warning -->
-      <div *ngIf="missingRequired.length > 0" class="preview__warnings">
+      <div
+        *ngIf="missingRequired.length > 0"
+        class="preview__warnings"
+        data-testid="epistola-mapping-preview-warnings"
+      >
         <span class="preview__warning-icon">&#x26A0;</span>
         {{ 'previewMissing' | pluginTranslate: 'epistola' | async }}:
         <strong>{{ missingRequired.join(', ') }}</strong>
@@ -2786,7 +2936,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    validationErrors: validationErrors$ | async,\n  } as obs\"\n>\n  <div\n    *ngIf=\"obs.validationErrors && obs.validationErrors.length > 0\"\n    class=\"jsonata-validation-errors\"\n  >\n    <strong>{{ 'jsonataValidationErrorsHeading' | pluginTranslate: pluginId | async }}</strong>\n    <ul>\n      <li *ngFor=\"let err of obs.validationErrors\">\n        <code>{{ err.field }}</code\n        >: {{ err.message }}\n      </li>\n    </ul>\n  </div>\n  <v-select\n    name=\"catalogId\"\n    [title]=\"'catalogId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'catalogIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [items]=\"obs.catalogs.data\"\n    [defaultSelectionId]=\"obs.prefill?.catalogId\"\n    [disabled]=\"obs.disabled || obs.catalogs.loading\"\n    [required]=\"true\"\n    [loading]=\"obs.catalogs.loading\"\n  >\n  </v-select>\n  <div *ngIf=\"obs.catalogs.error\" class=\"loading-error\">{{ obs.catalogs.error }}</div>\n\n  <v-select\n    name=\"templateId\"\n    [title]=\"'templateId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'templateIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [items]=\"obs.templates.data\"\n    [defaultSelectionId]=\"obs.prefill?.templateId\"\n    [clearSelectionSubject$]=\"clearTemplateId$\"\n    [disabled]=\"obs.disabled || obs.templates.loading || !obs.selectedCatalogId\"\n    [required]=\"true\"\n    [loading]=\"obs.templates.loading\"\n  >\n  </v-select>\n  <div *ngIf=\"obs.templates.error\" class=\"loading-error\">{{ obs.templates.error }}</div>\n\n  <!-- Variant selection mode toggle -->\n  <div class=\"variant-mode-toggle\" *ngIf=\"obs.selectedTemplateId\">\n    <label class=\"variant-mode-label\">{{\n      'variantSelectionMode' | pluginTranslate: pluginId | async\n    }}</label>\n    <div class=\"variant-mode-buttons\">\n      <button\n        type=\"button\"\n        class=\"variant-mode-btn\"\n        [class.active]=\"variantSelectionMode === 'explicit'\"\n        (click)=\"onVariantSelectionModeChange('explicit')\"\n        [disabled]=\"obs.disabled\"\n      >\n        {{ 'selectByVariant' | pluginTranslate: pluginId | async }}\n      </button>\n      <button\n        type=\"button\"\n        class=\"variant-mode-btn\"\n        [class.active]=\"variantSelectionMode === 'attributes'\"\n        (click)=\"onVariantSelectionModeChange('attributes')\"\n        [disabled]=\"obs.disabled\"\n      >\n        {{ 'selectByAttributes' | pluginTranslate: pluginId | async }}\n      </button>\n    </div>\n  </div>\n\n  <!-- Explicit variant selection (dropdown or expression) -->\n  <!--\n    The v-select / v-input here is intentionally NOT named into the v-form: v-form's\n    @ContentChildren queries default to descendants:false and would skip anything nested\n    in this `field-with-fx` wrapper. The value is tracked via (selectedChange)/(valueChange)\n    on the component, see variantIdValue / filenameValue.\n  -->\n  <div *ngIf=\"variantSelectionMode === 'explicit'\" class=\"field-with-fx\">\n    <v-select\n      *ngIf=\"!variantIdExpressionMode\"\n      [title]=\"'variantId' | pluginTranslate: pluginId | async\"\n      [tooltip]=\"'variantIdTooltip' | pluginTranslate: pluginId | async\"\n      [margin]=\"true\"\n      [items]=\"obs.variants.data\"\n      [defaultSelectionId]=\"variantIdValue\"\n      [clearSelectionSubject$]=\"clearVariantId$\"\n      (selectedChange)=\"onVariantIdValueChange($event)\"\n      [disabled]=\"obs.disabled || obs.variants.loading || !obs.selectedTemplateId\"\n      [required]=\"false\"\n      [loading]=\"obs.variants.loading\"\n    >\n    </v-select>\n    <div *ngIf=\"variantIdExpressionMode\" class=\"fx-input-group\">\n      <label class=\"fx-input-label\">{{ 'variantId' | pluginTranslate: pluginId | async }}</label>\n      <input\n        type=\"text\"\n        class=\"fx-input\"\n        [ngModel]=\"variantIdExpression\"\n        (ngModelChange)=\"variantIdExpression = $event; onVariantIdExpressionChange()\"\n        [disabled]=\"obs.disabled\"\n        placeholder=\"$pv.letterType\"\n      />\n    </div>\n    <button\n      type=\"button\"\n      class=\"fx-toggle\"\n      (click)=\"toggleVariantIdExpressionMode()\"\n      [disabled]=\"obs.disabled\"\n      [title]=\"variantIdExpressionMode ? 'Switch to dropdown' : 'Switch to expression'\"\n    >\n      {{ variantIdExpressionMode ? '\u00B7' : 'fx' }}\n    </button>\n  </div>\n  <div *ngIf=\"obs.variants.error\" class=\"loading-error\">{{ obs.variants.error }}</div>\n\n  <!-- Attribute-based variant selection -->\n  <div\n    *ngIf=\"variantSelectionMode === 'attributes' && obs.selectedTemplateId\"\n    class=\"variant-attributes-section\"\n  >\n    <label class=\"variant-attributes-label\">{{\n      'variantAttributes' | pluginTranslate: pluginId | async\n    }}</label>\n    <div class=\"variant-attributes-list\">\n      <div\n        *ngFor=\"let entry of variantAttributeEntries; let i = index\"\n        class=\"variant-attribute-row\"\n      >\n        <select\n          *ngIf=\"!entry._customKey\"\n          class=\"variant-attribute-input\"\n          [ngModel]=\"entry.key\"\n          (ngModelChange)=\"onKeySelected(entry, $event)\"\n          [disabled]=\"obs.disabled\"\n        >\n          <option value=\"\" disabled>\n            {{ 'attributeKey' | pluginTranslate: pluginId | async }}\n          </option>\n          <option *ngFor=\"let key of availableAttributeKeys\" [value]=\"key\">{{ key }}</option>\n          <option value=\"__custom__\">\n            {{ 'attributeKeyCustom' | pluginTranslate: pluginId | async }}\n          </option>\n        </select>\n        <div *ngIf=\"entry._customKey\" class=\"custom-key-input\">\n          <input\n            type=\"text\"\n            class=\"variant-attribute-input\"\n            [placeholder]=\"'attributeKey' | pluginTranslate: pluginId | async\"\n            [(ngModel)]=\"entry.key\"\n            (ngModelChange)=\"onAttributeEntryChange()\"\n            [disabled]=\"obs.disabled\"\n          />\n          <button\n            type=\"button\"\n            class=\"custom-key-cancel\"\n            (click)=\"cancelCustomKey(entry)\"\n            [disabled]=\"obs.disabled\"\n          >\n            &times;\n          </button>\n        </div>\n        <div class=\"attribute-value-with-fx\">\n          <input\n            type=\"text\"\n            class=\"variant-attribute-input\"\n            [class.fx-input]=\"entry._expressionMode\"\n            [placeholder]=\"\n              entry._expressionMode\n                ? '$pv.language'\n                : ('attributeValue' | pluginTranslate: pluginId | async)\n            \"\n            [(ngModel)]=\"entry.value\"\n            (ngModelChange)=\"onAttributeEntryChange()\"\n            [disabled]=\"obs.disabled\"\n          />\n          <button\n            type=\"button\"\n            class=\"fx-toggle fx-toggle--inline\"\n            (click)=\"entry._expressionMode = !entry._expressionMode\"\n            [disabled]=\"obs.disabled\"\n            [title]=\"entry._expressionMode ? 'Switch to plain value' : 'Switch to expression'\"\n          >\n            {{ entry._expressionMode ? '\u00B7' : 'fx' }}\n          </button>\n        </div>\n        <label class=\"variant-attribute-required-toggle\">\n          <input\n            type=\"checkbox\"\n            [(ngModel)]=\"entry.required\"\n            (ngModelChange)=\"onAttributeEntryChange()\"\n            [disabled]=\"obs.disabled\"\n          />\n          <span class=\"required-label\">{{\n            (entry.required ? 'attributeRequired' : 'attributePreferred')\n              | pluginTranslate: pluginId\n              | async\n          }}</span>\n        </label>\n        <button\n          type=\"button\"\n          class=\"variant-attribute-remove-btn\"\n          (click)=\"removeAttributeEntry(i)\"\n          [disabled]=\"obs.disabled\"\n          title=\"{{ 'removeAttribute' | pluginTranslate: pluginId | async }}\"\n        >\n          &times;\n        </button>\n      </div>\n    </div>\n    <button\n      type=\"button\"\n      class=\"variant-attribute-add-btn\"\n      (click)=\"addAttributeEntry()\"\n      [disabled]=\"obs.disabled\"\n    >\n      + {{ 'addAttribute' | pluginTranslate: pluginId | async }}\n    </button>\n  </div>\n\n  <v-select\n    name=\"environmentId\"\n    [title]=\"'environmentId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'environmentIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [items]=\"obs.environments.data\"\n    [defaultSelectionId]=\"obs.prefill?.environmentId\"\n    [disabled]=\"obs.disabled || obs.environments.loading\"\n    [required]=\"false\"\n    [loading]=\"obs.environments.loading\"\n  >\n  </v-select>\n  <div *ngIf=\"obs.environments.error\" class=\"loading-error\">{{ obs.environments.error }}</div>\n\n  <v-select\n    name=\"outputFormat\"\n    [title]=\"'outputFormat' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'outputFormatTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [items]=\"outputFormatOptions\"\n    [defaultSelectionId]=\"obs.prefill?.outputFormat || 'PDF'\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-select>\n\n  <div class=\"field-with-fx\">\n    <v-input\n      *ngIf=\"!filenameExpressionMode\"\n      [title]=\"'filename' | pluginTranslate: pluginId | async\"\n      [tooltip]=\"'filenameTooltip' | pluginTranslate: pluginId | async\"\n      [margin]=\"true\"\n      [defaultValue]=\"filenameValue\"\n      (valueChange)=\"onFilenameValueChange($event)\"\n      [disabled]=\"obs.disabled\"\n      [required]=\"true\"\n    >\n    </v-input>\n    <div *ngIf=\"filenameExpressionMode\" class=\"fx-input-group\">\n      <label class=\"fx-input-label\">{{ 'filename' | pluginTranslate: pluginId | async }}</label>\n      <input\n        type=\"text\"\n        class=\"fx-input\"\n        [ngModel]=\"filenameExpression\"\n        (ngModelChange)=\"filenameExpression = $event; onFilenameExpressionChange()\"\n        [disabled]=\"obs.disabled\"\n        placeholder='\"besluit-\" & $doc.name & \".pdf\"'\n      />\n    </div>\n    <button\n      type=\"button\"\n      class=\"fx-toggle\"\n      (click)=\"toggleFilenameExpressionMode()\"\n      [disabled]=\"obs.disabled\"\n      [title]=\"filenameExpressionMode ? 'Switch to plain input' : 'Switch to expression'\"\n    >\n      {{ filenameExpressionMode ? '\u00B7' : 'fx' }}\n    </button>\n  </div>\n\n  <v-input\n    name=\"correlationId\"\n    [title]=\"'correlationId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'correlationIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.correlationId\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"false\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"resultProcessVariable\"\n    [title]=\"'resultProcessVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'resultProcessVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.resultProcessVariable\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-input>\n</v-form>\n\n<div *ngIf=\"(templateFields$ | async)?.error as templateFieldsError\" class=\"loading-error\">\n  {{ templateFieldsError }}\n</div>\n\n<div *ngIf=\"selectedTemplateId$ | async\" class=\"mapping-section\">\n  <h5 class=\"mapping-section__title\">\n    {{ 'dataMappingTitle' | pluginTranslate: pluginId | async }}\n  </h5>\n  <p class=\"mapping-section__description\">\n    {{ 'dataMappingDescription' | pluginTranslate: pluginId | async }}\n  </p>\n  <div class=\"mapping-mode-toggle\">\n    <button\n      class=\"mapping-mode-toggle__btn\"\n      [class.mapping-mode-toggle__btn--active]=\"mappingMode === 'simple'\"\n      (click)=\"mappingMode = 'simple'\"\n    >\n      {{ 'mappingModeSimple' | pluginTranslate: pluginId | async }}\n    </button>\n    <button\n      class=\"mapping-mode-toggle__btn\"\n      [class.mapping-mode-toggle__btn--active]=\"mappingMode === 'advanced'\"\n      (click)=\"mappingMode = 'advanced'\"\n    >\n      {{ 'mappingModeAdvanced' | pluginTranslate: pluginId | async }}\n    </button>\n  </div>\n\n  <!-- Editor area (full width) -->\n  <epistola-mapping-builder\n    *ngIf=\"mappingMode === 'simple'\"\n    [expression]=\"dataMapping$ | async\"\n    [templateFields]=\"(templateFields$ | async)?.data ?? []\"\n    [suggestions]=\"variableSuggestions\"\n    [disabled]=\"!!(disabled$ | async)\"\n    (expressionChange)=\"onDataMappingChange($event)\"\n  ></epistola-mapping-builder>\n\n  <epistola-jsonata-editor\n    *ngIf=\"mappingMode === 'advanced'\"\n    [expression]=\"dataMapping$ | async\"\n    [disabled]=\"!!(disabled$ | async)\"\n    [contextVariables]=\"editorContextVariables\"\n    [functions]=\"expressionFunctions\"\n    (expressionChange)=\"onDataMappingChange($event)\"\n  ></epistola-jsonata-editor>\n\n  <!-- Bottom tabs: Schema + Preview (collapsible) -->\n  <div class=\"mapping-tools\" [class.mapping-tools--collapsed]=\"toolsCollapsed\">\n    <div class=\"mapping-tools__header\" (click)=\"toolsCollapsed = !toolsCollapsed\">\n      <span class=\"mapping-tools__chevron\">{{ toolsCollapsed ? '&#x25B6;' : '&#x25BC;' }}</span>\n      <span>{{ 'mappingTools' | pluginTranslate: pluginId | async }}</span>\n    </div>\n    <div *ngIf=\"!toolsCollapsed\" class=\"mapping-tools__content\">\n      <div class=\"mapping-tools__tabs\">\n        <button\n          class=\"mapping-tools__tab\"\n          [class.mapping-tools__tab--active]=\"activeToolTab === 'schema'\"\n          (click)=\"activeToolTab = 'schema'\"\n        >\n          {{ 'expectedStructure' | pluginTranslate: pluginId | async }}\n        </button>\n        <button\n          class=\"mapping-tools__tab\"\n          [class.mapping-tools__tab--active]=\"activeToolTab === 'preview'\"\n          (click)=\"activeToolTab = 'preview'\"\n        >\n          {{ 'previewTitle' | pluginTranslate: pluginId | async }}\n        </button>\n      </div>\n\n      <epistola-expected-structure\n        *ngIf=\"activeToolTab === 'schema'\"\n        [templateFields]=\"(templateFields$ | async)?.data ?? []\"\n      ></epistola-expected-structure>\n\n      <epistola-mapping-preview\n        *ngIf=\"activeToolTab === 'preview'\"\n        [expression]=\"dataMapping$ | async\"\n        [templateFields]=\"(templateFields$ | async)?.data ?? []\"\n        [caseDefinitionKey]=\"caseDefinitionKey\"\n      ></epistola-mapping-preview>\n    </div>\n  </div>\n</div>\n", styles: [".loading-error{padding:.25rem .75rem;font-size:.8125rem;color:#dc3545}.jsonata-validation-errors{margin-bottom:1rem;padding:.75rem 1rem;border:1px solid #dc3545;border-radius:4px;background:#fdf3f4;color:#dc3545;font-size:.875rem}.jsonata-validation-errors ul{margin:.5rem 0 0;padding-left:1.25rem}.jsonata-validation-errors code{background:#dc35451a;padding:0 .25rem;border-radius:2px;font-family:monospace}.validation-summary{margin-top:.5rem;padding:.5rem .75rem;border-radius:4px;font-size:.875rem}.validation-summary .validation-complete{color:#198754}.validation-summary .validation-incomplete{color:#dc3545;font-weight:500}.variant-mode-toggle{margin-bottom:1rem;padding:0 .75rem}.variant-mode-label{display:block;font-size:.875rem;font-weight:500;margin-bottom:.375rem}.variant-mode-buttons{display:flex;gap:0;border:1px solid #d1d5db;border-radius:4px;overflow:hidden;width:fit-content}.variant-mode-btn{padding:.375rem .75rem;font-size:.8125rem;background:#fff;border:none;border-right:1px solid #d1d5db;cursor:pointer;color:#374151;transition:background-color .15s,color .15s}.variant-mode-btn:last-child{border-right:none}.variant-mode-btn:hover:not([disabled]){background:#f3f4f6}.variant-mode-btn.active{background:#2563eb;color:#fff}.variant-mode-btn[disabled]{opacity:.5;cursor:not-allowed}.variant-attributes-section{margin-bottom:1rem;padding:0 .75rem}.variant-attributes-label{display:block;font-size:.875rem;font-weight:500;margin-bottom:.375rem}.variant-attributes-list{display:flex;flex-direction:column;gap:.375rem}.variant-attribute-row{display:flex;gap:.375rem;align-items:center}.variant-attribute-input{flex:1;padding:.375rem .5rem;font-size:.8125rem;border:1px solid #d1d5db;border-radius:4px;outline:none}.variant-attribute-input:focus{border-color:#2563eb;box-shadow:0 0 0 1px #2563eb}.variant-attribute-input[disabled]{opacity:.5;background:#f9fafb}.custom-key-input{display:flex;flex:1;gap:.25rem}.custom-key-input .variant-attribute-input{flex:1}.custom-key-cancel{padding:.25rem .5rem;font-size:1rem;line-height:1;background:none;border:1px solid #d1d5db;border-radius:4px;cursor:pointer;color:#6b7280}.custom-key-cancel:hover:not([disabled]){color:#dc3545;border-color:#dc3545}.custom-key-cancel[disabled]{opacity:.5;cursor:not-allowed}.variant-attribute-required-toggle{display:flex;align-items:center;gap:.25rem;font-size:.75rem;color:#374151;white-space:nowrap;cursor:pointer}.variant-attribute-required-toggle input[type=checkbox]{margin:0;cursor:pointer}.variant-attribute-required-toggle .required-label{-webkit-user-select:none;user-select:none}.variant-attribute-remove-btn{padding:.25rem .5rem;font-size:1rem;line-height:1;background:none;border:1px solid #d1d5db;border-radius:4px;cursor:pointer;color:#6b7280}.variant-attribute-remove-btn:hover:not([disabled]){color:#dc3545;border-color:#dc3545}.variant-attribute-remove-btn[disabled]{opacity:.5;cursor:not-allowed}.variant-attribute-add-btn{margin-top:.375rem;padding:.25rem .5rem;font-size:.8125rem;background:none;border:1px dashed #d1d5db;border-radius:4px;cursor:pointer;color:#6b7280}.variant-attribute-add-btn:hover:not([disabled]){color:#2563eb;border-color:#2563eb}.variant-attribute-add-btn[disabled]{opacity:.5;cursor:not-allowed}.field-with-fx{display:flex;align-items:flex-start;gap:4px}.field-with-fx>*:first-child{flex:1;min-width:0}.fx-toggle{width:28px;height:28px;margin-top:22px;border:1px solid #e0e0e0;border-radius:4px;background:#fff;cursor:pointer;font-family:monospace;font-size:.8em;display:flex;align-items:center;justify-content:center;flex-shrink:0}.fx-toggle:hover{background:#f4f4f4}.fx-toggle--inline{margin-top:0}.fx-input-group{flex:1;min-width:0;margin-bottom:.75rem}.fx-input-label{display:block;font-size:.875rem;margin-bottom:.25rem;color:#525252}.fx-input{width:100%;border:1px solid #8d8d8d;border-radius:0;padding:.4rem .75rem;font-family:monospace;font-size:.875rem;background:#f4f4f4}.attribute-value-with-fx{display:flex;align-items:center;gap:4px;flex:1;min-width:0}.attribute-value-with-fx>input{flex:1;min-width:0}.mapping-section{margin-top:1rem}.mapping-section__title{font-size:1rem;font-weight:600;margin:0 0 4px}.mapping-section__description{font-size:.85em;color:#6f6f6f;margin:0 0 12px}.mapping-mode-toggle{display:flex;gap:0;margin-bottom:12px}.mapping-mode-toggle__btn{padding:6px 16px;border:1px solid #e0e0e0;background:#fff;font-size:.85em;cursor:pointer}.mapping-mode-toggle__btn:first-child{border-radius:4px 0 0 4px}.mapping-mode-toggle__btn:last-child{border-radius:0 4px 4px 0;border-left:none}.mapping-mode-toggle__btn--active{background:#0f62fe;color:#fff;border-color:#0f62fe}.mapping-tools{margin-top:12px;border:1px solid #e0e0e0;border-radius:4px;overflow:hidden}.mapping-tools__header{display:flex;align-items:center;gap:6px;padding:8px 12px;background:#f4f4f4;cursor:pointer;font-size:.85em;font-weight:500;-webkit-user-select:none;user-select:none}.mapping-tools__header:hover{background:#e8e8e8}.mapping-tools__chevron{font-size:.7em}.mapping-tools__content{border-top:1px solid #e0e0e0}.mapping-tools__tabs{display:flex;border-bottom:1px solid #e0e0e0}.mapping-tools__tab{padding:6px 16px;border:none;background:transparent;font-size:.8em;cursor:pointer;border-bottom:2px solid transparent}.mapping-tools__tab--active{border-bottom-color:#0f62fe;font-weight:500}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$1.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: i3$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.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", "contextVariables", "functions", "variablesHint"], 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 });
+    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  data-testid=\"epistola-generate-form\"\n  (valueChange)=\"formValueChange($event)\"\n  *ngIf=\"{\n    disabled: disabled$ | async,\n    prefill: prefillConfiguration$ ? (prefillConfiguration$ | async) : null,\n    catalogs: catalogs$ | async,\n    templates: templates$ | async,\n    variants: variants$ | async,\n    environments: environments$ | async,\n    templateFields: templateFields$ | async,\n    selectedCatalogId: selectedCatalogId$ | async,\n    selectedTemplateId: selectedTemplateId$ | async,\n    validationErrors: validationErrors$ | async,\n  } as obs\"\n>\n  <div\n    *ngIf=\"obs.validationErrors && obs.validationErrors.length > 0\"\n    class=\"jsonata-validation-errors\"\n    data-testid=\"epistola-generate-validation-errors\"\n  >\n    <strong>{{ 'jsonataValidationErrorsHeading' | pluginTranslate: pluginId | async }}</strong>\n    <ul>\n      <li *ngFor=\"let err of obs.validationErrors\">\n        <code>{{ err.field }}</code\n        >: {{ err.message }}\n      </li>\n    </ul>\n  </div>\n  <v-select\n    name=\"catalogId\"\n    data-testid=\"epistola-generate-catalog-id\"\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\n    *ngIf=\"obs.catalogs.error\"\n    class=\"loading-error\"\n    data-testid=\"epistola-generate-catalog-error\"\n  >\n    {{ obs.catalogs.error }}\n  </div>\n\n  <v-select\n    name=\"templateId\"\n    data-testid=\"epistola-generate-template-id\"\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    [clearSelectionSubject$]=\"clearTemplateId$\"\n    [disabled]=\"obs.disabled || obs.templates.loading || !obs.selectedCatalogId\"\n    [required]=\"true\"\n    [loading]=\"obs.templates.loading\"\n  >\n  </v-select>\n  <div\n    *ngIf=\"obs.templates.error\"\n    class=\"loading-error\"\n    data-testid=\"epistola-generate-template-error\"\n  >\n    {{ obs.templates.error }}\n  </div>\n\n  <!-- Variant selection mode toggle -->\n  <div\n    class=\"variant-mode-toggle\"\n    *ngIf=\"obs.selectedTemplateId\"\n    data-testid=\"epistola-generate-variant-mode-toggle\"\n  >\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        data-testid=\"epistola-generate-variant-mode-explicit\"\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        data-testid=\"epistola-generate-variant-mode-attributes\"\n        [class.active]=\"variantSelectionMode === 'attributes'\"\n        (click)=\"onVariantSelectionModeChange('attributes')\"\n        [disabled]=\"obs.disabled\"\n      >\n        {{ 'selectByAttributes' | pluginTranslate: pluginId | async }}\n      </button>\n    </div>\n  </div>\n\n  <!-- Explicit variant selection (dropdown or expression) -->\n  <!--\n    The v-select / v-input here is intentionally NOT named into the v-form: v-form's\n    @ContentChildren queries default to descendants:false and would skip anything nested\n    in this `field-with-fx` wrapper. The value is tracked via (selectedChange)/(valueChange)\n    on the component, see variantIdValue / filenameValue.\n  -->\n  <div *ngIf=\"variantSelectionMode === 'explicit'\" class=\"field-with-fx\">\n    <v-select\n      *ngIf=\"!variantIdExpressionMode\"\n      data-testid=\"epistola-generate-variant-id\"\n      [title]=\"'variantId' | pluginTranslate: pluginId | async\"\n      [tooltip]=\"'variantIdTooltip' | pluginTranslate: pluginId | async\"\n      [margin]=\"true\"\n      [items]=\"obs.variants.data\"\n      [defaultSelectionId]=\"variantIdValue\"\n      [clearSelectionSubject$]=\"clearVariantId$\"\n      (selectedChange)=\"onVariantIdValueChange($event)\"\n      [disabled]=\"obs.disabled || obs.variants.loading || !obs.selectedTemplateId\"\n      [required]=\"false\"\n      [loading]=\"obs.variants.loading\"\n    >\n    </v-select>\n    <div *ngIf=\"variantIdExpressionMode\" class=\"fx-input-group\">\n      <label class=\"fx-input-label\">{{ 'variantId' | pluginTranslate: pluginId | async }}</label>\n      <input\n        type=\"text\"\n        class=\"fx-input\"\n        data-testid=\"epistola-generate-variant-id-expression\"\n        [ngModel]=\"variantIdExpression\"\n        (ngModelChange)=\"variantIdExpression = $event; onVariantIdExpressionChange()\"\n        [disabled]=\"obs.disabled\"\n        placeholder=\"$pv.letterType\"\n      />\n    </div>\n    <button\n      type=\"button\"\n      class=\"fx-toggle\"\n      data-testid=\"epistola-generate-variant-id-fx-toggle\"\n      (click)=\"toggleVariantIdExpressionMode()\"\n      [disabled]=\"obs.disabled\"\n      [title]=\"variantIdExpressionMode ? 'Switch to dropdown' : 'Switch to expression'\"\n    >\n      {{ variantIdExpressionMode ? '\u00B7' : 'fx' }}\n    </button>\n  </div>\n  <div\n    *ngIf=\"obs.variants.error\"\n    class=\"loading-error\"\n    data-testid=\"epistola-generate-variant-error\"\n  >\n    {{ obs.variants.error }}\n  </div>\n\n  <!-- Attribute-based variant selection -->\n  <div\n    *ngIf=\"variantSelectionMode === 'attributes' && obs.selectedTemplateId\"\n    class=\"variant-attributes-section\"\n    data-testid=\"epistola-generate-variant-attributes\"\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        [attr.data-testid]=\"'epistola-generate-attribute-row-' + i\"\n      >\n        <select\n          *ngIf=\"!entry._customKey\"\n          class=\"variant-attribute-input\"\n          [attr.data-testid]=\"'epistola-generate-attribute-key-' + i\"\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            [attr.data-testid]=\"'epistola-generate-attribute-key-custom-' + i\"\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            [attr.data-testid]=\"'epistola-generate-attribute-key-custom-cancel-' + i\"\n            (click)=\"cancelCustomKey(entry)\"\n            [disabled]=\"obs.disabled\"\n          >\n            &times;\n          </button>\n        </div>\n        <div class=\"attribute-value-with-fx\">\n          <input\n            type=\"text\"\n            class=\"variant-attribute-input\"\n            [attr.data-testid]=\"'epistola-generate-attribute-value-' + i\"\n            [class.fx-input]=\"entry._expressionMode\"\n            [placeholder]=\"\n              entry._expressionMode\n                ? '$pv.language'\n                : ('attributeValue' | pluginTranslate: pluginId | async)\n            \"\n            [(ngModel)]=\"entry.value\"\n            (ngModelChange)=\"onAttributeEntryChange()\"\n            [disabled]=\"obs.disabled\"\n          />\n          <button\n            type=\"button\"\n            class=\"fx-toggle fx-toggle--inline\"\n            [attr.data-testid]=\"'epistola-generate-attribute-value-fx-toggle-' + i\"\n            (click)=\"entry._expressionMode = !entry._expressionMode\"\n            [disabled]=\"obs.disabled\"\n            [title]=\"entry._expressionMode ? 'Switch to plain value' : 'Switch to expression'\"\n          >\n            {{ entry._expressionMode ? '\u00B7' : 'fx' }}\n          </button>\n        </div>\n        <label class=\"variant-attribute-required-toggle\">\n          <input\n            type=\"checkbox\"\n            [attr.data-testid]=\"'epistola-generate-attribute-required-' + i\"\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          [attr.data-testid]=\"'epistola-generate-attribute-remove-' + i\"\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      data-testid=\"epistola-generate-attribute-add\"\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    data-testid=\"epistola-generate-environment-id\"\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\n    *ngIf=\"obs.environments.error\"\n    class=\"loading-error\"\n    data-testid=\"epistola-generate-environment-error\"\n  >\n    {{ obs.environments.error }}\n  </div>\n\n  <v-select\n    name=\"outputFormat\"\n    data-testid=\"epistola-generate-output-format\"\n    [title]=\"'outputFormat' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'outputFormatTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [items]=\"outputFormatOptions\"\n    [defaultSelectionId]=\"obs.prefill?.outputFormat || 'PDF'\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-select>\n\n  <div class=\"field-with-fx\">\n    <v-input\n      *ngIf=\"!filenameExpressionMode\"\n      data-testid=\"epistola-generate-filename\"\n      [title]=\"'filename' | pluginTranslate: pluginId | async\"\n      [tooltip]=\"'filenameTooltip' | pluginTranslate: pluginId | async\"\n      [margin]=\"true\"\n      [defaultValue]=\"filenameValue\"\n      (valueChange)=\"onFilenameValueChange($event)\"\n      [disabled]=\"obs.disabled\"\n      [required]=\"true\"\n    >\n    </v-input>\n    <div *ngIf=\"filenameExpressionMode\" class=\"fx-input-group\">\n      <label class=\"fx-input-label\">{{ 'filename' | pluginTranslate: pluginId | async }}</label>\n      <input\n        type=\"text\"\n        class=\"fx-input\"\n        data-testid=\"epistola-generate-filename-expression\"\n        [ngModel]=\"filenameExpression\"\n        (ngModelChange)=\"filenameExpression = $event; onFilenameExpressionChange()\"\n        [disabled]=\"obs.disabled\"\n        placeholder='\"besluit-\" & $doc.name & \".pdf\"'\n      />\n    </div>\n    <button\n      type=\"button\"\n      class=\"fx-toggle\"\n      data-testid=\"epistola-generate-filename-fx-toggle\"\n      (click)=\"toggleFilenameExpressionMode()\"\n      [disabled]=\"obs.disabled\"\n      [title]=\"filenameExpressionMode ? 'Switch to plain input' : 'Switch to expression'\"\n    >\n      {{ filenameExpressionMode ? '\u00B7' : 'fx' }}\n    </button>\n  </div>\n\n  <v-input\n    name=\"correlationId\"\n    data-testid=\"epistola-generate-correlation-id\"\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    data-testid=\"epistola-generate-result-process-variable\"\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      data-testid=\"epistola-generate-mapping-mode-simple\"\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      data-testid=\"epistola-generate-mapping-mode-advanced\"\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    [contextVariables]=\"editorContextVariables\"\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\n      class=\"mapping-tools__header\"\n      data-testid=\"epistola-generate-mapping-tools-header\"\n      (click)=\"toolsCollapsed = !toolsCollapsed\"\n    >\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          data-testid=\"epistola-generate-mapping-tab-schema\"\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          data-testid=\"epistola-generate-mapping-tab-preview\"\n          [class.mapping-tools__tab--active]=\"activeToolTab === 'preview'\"\n          (click)=\"activeToolTab = 'preview'\"\n        >\n          {{ 'previewTitle' | pluginTranslate: pluginId | async }}\n        </button>\n      </div>\n\n      <epistola-expected-structure\n        *ngIf=\"activeToolTab === 'schema'\"\n        [templateFields]=\"(templateFields$ | async)?.data ?? []\"\n      ></epistola-expected-structure>\n\n      <epistola-mapping-preview\n        *ngIf=\"activeToolTab === 'preview'\"\n        [expression]=\"dataMapping$ | async\"\n        [templateFields]=\"(templateFields$ | async)?.data ?? []\"\n        [caseDefinitionKey]=\"caseDefinitionKey\"\n      ></epistola-mapping-preview>\n    </div>\n  </div>\n</div>\n", styles: [".loading-error{padding:.25rem .75rem;font-size:.8125rem;color:#dc3545}.jsonata-validation-errors{margin-bottom:1rem;padding:.75rem 1rem;border:1px solid #dc3545;border-radius:4px;background:#fdf3f4;color:#dc3545;font-size:.875rem}.jsonata-validation-errors ul{margin:.5rem 0 0;padding-left:1.25rem}.jsonata-validation-errors code{background:#dc35451a;padding:0 .25rem;border-radius:2px;font-family:monospace}.validation-summary{margin-top:.5rem;padding:.5rem .75rem;border-radius:4px;font-size:.875rem}.validation-summary .validation-complete{color:#198754}.validation-summary .validation-incomplete{color:#dc3545;font-weight:500}.variant-mode-toggle{margin-bottom:1rem;padding:0 .75rem}.variant-mode-label{display:block;font-size:.875rem;font-weight:500;margin-bottom:.375rem}.variant-mode-buttons{display:flex;gap:0;border:1px solid #d1d5db;border-radius:4px;overflow:hidden;width:fit-content}.variant-mode-btn{padding:.375rem .75rem;font-size:.8125rem;background:#fff;border:none;border-right:1px solid #d1d5db;cursor:pointer;color:#374151;transition:background-color .15s,color .15s}.variant-mode-btn:last-child{border-right:none}.variant-mode-btn:hover:not([disabled]){background:#f3f4f6}.variant-mode-btn.active{background:#2563eb;color:#fff}.variant-mode-btn[disabled]{opacity:.5;cursor:not-allowed}.variant-attributes-section{margin-bottom:1rem;padding:0 .75rem}.variant-attributes-label{display:block;font-size:.875rem;font-weight:500;margin-bottom:.375rem}.variant-attributes-list{display:flex;flex-direction:column;gap:.375rem}.variant-attribute-row{display:flex;gap:.375rem;align-items:center}.variant-attribute-input{flex:1;padding:.375rem .5rem;font-size:.8125rem;border:1px solid #d1d5db;border-radius:4px;outline:none}.variant-attribute-input:focus{border-color:#2563eb;box-shadow:0 0 0 1px #2563eb}.variant-attribute-input[disabled]{opacity:.5;background:#f9fafb}.custom-key-input{display:flex;flex:1;gap:.25rem}.custom-key-input .variant-attribute-input{flex:1}.custom-key-cancel{padding:.25rem .5rem;font-size:1rem;line-height:1;background:none;border:1px solid #d1d5db;border-radius:4px;cursor:pointer;color:#6b7280}.custom-key-cancel:hover:not([disabled]){color:#dc3545;border-color:#dc3545}.custom-key-cancel[disabled]{opacity:.5;cursor:not-allowed}.variant-attribute-required-toggle{display:flex;align-items:center;gap:.25rem;font-size:.75rem;color:#374151;white-space:nowrap;cursor:pointer}.variant-attribute-required-toggle input[type=checkbox]{margin:0;cursor:pointer}.variant-attribute-required-toggle .required-label{-webkit-user-select:none;user-select:none}.variant-attribute-remove-btn{padding:.25rem .5rem;font-size:1rem;line-height:1;background:none;border:1px solid #d1d5db;border-radius:4px;cursor:pointer;color:#6b7280}.variant-attribute-remove-btn:hover:not([disabled]){color:#dc3545;border-color:#dc3545}.variant-attribute-remove-btn[disabled]{opacity:.5;cursor:not-allowed}.variant-attribute-add-btn{margin-top:.375rem;padding:.25rem .5rem;font-size:.8125rem;background:none;border:1px dashed #d1d5db;border-radius:4px;cursor:pointer;color:#6b7280}.variant-attribute-add-btn:hover:not([disabled]){color:#2563eb;border-color:#2563eb}.variant-attribute-add-btn[disabled]{opacity:.5;cursor:not-allowed}.field-with-fx{display:flex;align-items:flex-start;gap:4px}.field-with-fx>*:first-child{flex:1;min-width:0}.fx-toggle{width:28px;height:28px;margin-top:22px;border:1px solid #e0e0e0;border-radius:4px;background:#fff;cursor:pointer;font-family:monospace;font-size:.8em;display:flex;align-items:center;justify-content:center;flex-shrink:0}.fx-toggle:hover{background:#f4f4f4}.fx-toggle--inline{margin-top:0}.fx-input-group{flex:1;min-width:0;margin-bottom:.75rem}.fx-input-label{display:block;font-size:.875rem;margin-bottom:.25rem;color:#525252}.fx-input{width:100%;border:1px solid #8d8d8d;border-radius:0;padding:.4rem .75rem;font-family:monospace;font-size:.875rem;background:#f4f4f4}.attribute-value-with-fx{display:flex;align-items:center;gap:4px;flex:1;min-width:0}.attribute-value-with-fx>input{flex:1;min-width:0}.mapping-section{margin-top:1rem}.mapping-section__title{font-size:1rem;font-weight:600;margin:0 0 4px}.mapping-section__description{font-size:.85em;color:#6f6f6f;margin:0 0 12px}.mapping-mode-toggle{display:flex;gap:0;margin-bottom:12px}.mapping-mode-toggle__btn{padding:6px 16px;border:1px solid #e0e0e0;background:#fff;font-size:.85em;cursor:pointer}.mapping-mode-toggle__btn:first-child{border-radius:4px 0 0 4px}.mapping-mode-toggle__btn:last-child{border-radius:0 4px 4px 0;border-left:none}.mapping-mode-toggle__btn--active{background:#0f62fe;color:#fff;border-color:#0f62fe}.mapping-tools{margin-top:12px;border:1px solid #e0e0e0;border-radius:4px;overflow:hidden}.mapping-tools__header{display:flex;align-items:center;gap:6px;padding:8px 12px;background:#f4f4f4;cursor:pointer;font-size:.85em;font-weight:500;-webkit-user-select:none;user-select:none}.mapping-tools__header:hover{background:#e8e8e8}.mapping-tools__chevron{font-size:.7em}.mapping-tools__content{border-top:1px solid #e0e0e0}.mapping-tools__tabs{display:flex;border-bottom:1px solid #e0e0e0}.mapping-tools__tab{padding:6px 16px;border:none;background:transparent;font-size:.8em;cursor:pointer;border-bottom:2px solid transparent}.mapping-tools__tab--active{border-bottom-color:#0f62fe;font-weight:500}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$1.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: i3$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.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", "contextVariables", "functions", "variablesHint"], 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,
@@ -2801,7 +2951,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                         JsonataEditorComponent,
                         MappingBuilderComponent,
                         MappingPreviewComponent,
-                    ], template: "<v-form\n  (valueChange)=\"formValueChange($event)\"\n  *ngIf=\"{\n    disabled: disabled$ | async,\n    prefill: prefillConfiguration$ ? (prefillConfiguration$ | async) : null,\n    catalogs: catalogs$ | async,\n    templates: templates$ | async,\n    variants: variants$ | async,\n    environments: environments$ | async,\n    templateFields: templateFields$ | async,\n    selectedCatalogId: selectedCatalogId$ | async,\n    selectedTemplateId: selectedTemplateId$ | async,\n    validationErrors: validationErrors$ | async,\n  } as obs\"\n>\n  <div\n    *ngIf=\"obs.validationErrors && obs.validationErrors.length > 0\"\n    class=\"jsonata-validation-errors\"\n  >\n    <strong>{{ 'jsonataValidationErrorsHeading' | pluginTranslate: pluginId | async }}</strong>\n    <ul>\n      <li *ngFor=\"let err of obs.validationErrors\">\n        <code>{{ err.field }}</code\n        >: {{ err.message }}\n      </li>\n    </ul>\n  </div>\n  <v-select\n    name=\"catalogId\"\n    [title]=\"'catalogId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'catalogIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [items]=\"obs.catalogs.data\"\n    [defaultSelectionId]=\"obs.prefill?.catalogId\"\n    [disabled]=\"obs.disabled || obs.catalogs.loading\"\n    [required]=\"true\"\n    [loading]=\"obs.catalogs.loading\"\n  >\n  </v-select>\n  <div *ngIf=\"obs.catalogs.error\" class=\"loading-error\">{{ obs.catalogs.error }}</div>\n\n  <v-select\n    name=\"templateId\"\n    [title]=\"'templateId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'templateIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [items]=\"obs.templates.data\"\n    [defaultSelectionId]=\"obs.prefill?.templateId\"\n    [clearSelectionSubject$]=\"clearTemplateId$\"\n    [disabled]=\"obs.disabled || obs.templates.loading || !obs.selectedCatalogId\"\n    [required]=\"true\"\n    [loading]=\"obs.templates.loading\"\n  >\n  </v-select>\n  <div *ngIf=\"obs.templates.error\" class=\"loading-error\">{{ obs.templates.error }}</div>\n\n  <!-- Variant selection mode toggle -->\n  <div class=\"variant-mode-toggle\" *ngIf=\"obs.selectedTemplateId\">\n    <label class=\"variant-mode-label\">{{\n      'variantSelectionMode' | pluginTranslate: pluginId | async\n    }}</label>\n    <div class=\"variant-mode-buttons\">\n      <button\n        type=\"button\"\n        class=\"variant-mode-btn\"\n        [class.active]=\"variantSelectionMode === 'explicit'\"\n        (click)=\"onVariantSelectionModeChange('explicit')\"\n        [disabled]=\"obs.disabled\"\n      >\n        {{ 'selectByVariant' | pluginTranslate: pluginId | async }}\n      </button>\n      <button\n        type=\"button\"\n        class=\"variant-mode-btn\"\n        [class.active]=\"variantSelectionMode === 'attributes'\"\n        (click)=\"onVariantSelectionModeChange('attributes')\"\n        [disabled]=\"obs.disabled\"\n      >\n        {{ 'selectByAttributes' | pluginTranslate: pluginId | async }}\n      </button>\n    </div>\n  </div>\n\n  <!-- Explicit variant selection (dropdown or expression) -->\n  <!--\n    The v-select / v-input here is intentionally NOT named into the v-form: v-form's\n    @ContentChildren queries default to descendants:false and would skip anything nested\n    in this `field-with-fx` wrapper. The value is tracked via (selectedChange)/(valueChange)\n    on the component, see variantIdValue / filenameValue.\n  -->\n  <div *ngIf=\"variantSelectionMode === 'explicit'\" class=\"field-with-fx\">\n    <v-select\n      *ngIf=\"!variantIdExpressionMode\"\n      [title]=\"'variantId' | pluginTranslate: pluginId | async\"\n      [tooltip]=\"'variantIdTooltip' | pluginTranslate: pluginId | async\"\n      [margin]=\"true\"\n      [items]=\"obs.variants.data\"\n      [defaultSelectionId]=\"variantIdValue\"\n      [clearSelectionSubject$]=\"clearVariantId$\"\n      (selectedChange)=\"onVariantIdValueChange($event)\"\n      [disabled]=\"obs.disabled || obs.variants.loading || !obs.selectedTemplateId\"\n      [required]=\"false\"\n      [loading]=\"obs.variants.loading\"\n    >\n    </v-select>\n    <div *ngIf=\"variantIdExpressionMode\" class=\"fx-input-group\">\n      <label class=\"fx-input-label\">{{ 'variantId' | pluginTranslate: pluginId | async }}</label>\n      <input\n        type=\"text\"\n        class=\"fx-input\"\n        [ngModel]=\"variantIdExpression\"\n        (ngModelChange)=\"variantIdExpression = $event; onVariantIdExpressionChange()\"\n        [disabled]=\"obs.disabled\"\n        placeholder=\"$pv.letterType\"\n      />\n    </div>\n    <button\n      type=\"button\"\n      class=\"fx-toggle\"\n      (click)=\"toggleVariantIdExpressionMode()\"\n      [disabled]=\"obs.disabled\"\n      [title]=\"variantIdExpressionMode ? 'Switch to dropdown' : 'Switch to expression'\"\n    >\n      {{ variantIdExpressionMode ? '\u00B7' : 'fx' }}\n    </button>\n  </div>\n  <div *ngIf=\"obs.variants.error\" class=\"loading-error\">{{ obs.variants.error }}</div>\n\n  <!-- Attribute-based variant selection -->\n  <div\n    *ngIf=\"variantSelectionMode === 'attributes' && obs.selectedTemplateId\"\n    class=\"variant-attributes-section\"\n  >\n    <label class=\"variant-attributes-label\">{{\n      'variantAttributes' | pluginTranslate: pluginId | async\n    }}</label>\n    <div class=\"variant-attributes-list\">\n      <div\n        *ngFor=\"let entry of variantAttributeEntries; let i = index\"\n        class=\"variant-attribute-row\"\n      >\n        <select\n          *ngIf=\"!entry._customKey\"\n          class=\"variant-attribute-input\"\n          [ngModel]=\"entry.key\"\n          (ngModelChange)=\"onKeySelected(entry, $event)\"\n          [disabled]=\"obs.disabled\"\n        >\n          <option value=\"\" disabled>\n            {{ 'attributeKey' | pluginTranslate: pluginId | async }}\n          </option>\n          <option *ngFor=\"let key of availableAttributeKeys\" [value]=\"key\">{{ key }}</option>\n          <option value=\"__custom__\">\n            {{ 'attributeKeyCustom' | pluginTranslate: pluginId | async }}\n          </option>\n        </select>\n        <div *ngIf=\"entry._customKey\" class=\"custom-key-input\">\n          <input\n            type=\"text\"\n            class=\"variant-attribute-input\"\n            [placeholder]=\"'attributeKey' | pluginTranslate: pluginId | async\"\n            [(ngModel)]=\"entry.key\"\n            (ngModelChange)=\"onAttributeEntryChange()\"\n            [disabled]=\"obs.disabled\"\n          />\n          <button\n            type=\"button\"\n            class=\"custom-key-cancel\"\n            (click)=\"cancelCustomKey(entry)\"\n            [disabled]=\"obs.disabled\"\n          >\n            &times;\n          </button>\n        </div>\n        <div class=\"attribute-value-with-fx\">\n          <input\n            type=\"text\"\n            class=\"variant-attribute-input\"\n            [class.fx-input]=\"entry._expressionMode\"\n            [placeholder]=\"\n              entry._expressionMode\n                ? '$pv.language'\n                : ('attributeValue' | pluginTranslate: pluginId | async)\n            \"\n            [(ngModel)]=\"entry.value\"\n            (ngModelChange)=\"onAttributeEntryChange()\"\n            [disabled]=\"obs.disabled\"\n          />\n          <button\n            type=\"button\"\n            class=\"fx-toggle fx-toggle--inline\"\n            (click)=\"entry._expressionMode = !entry._expressionMode\"\n            [disabled]=\"obs.disabled\"\n            [title]=\"entry._expressionMode ? 'Switch to plain value' : 'Switch to expression'\"\n          >\n            {{ entry._expressionMode ? '\u00B7' : 'fx' }}\n          </button>\n        </div>\n        <label class=\"variant-attribute-required-toggle\">\n          <input\n            type=\"checkbox\"\n            [(ngModel)]=\"entry.required\"\n            (ngModelChange)=\"onAttributeEntryChange()\"\n            [disabled]=\"obs.disabled\"\n          />\n          <span class=\"required-label\">{{\n            (entry.required ? 'attributeRequired' : 'attributePreferred')\n              | pluginTranslate: pluginId\n              | async\n          }}</span>\n        </label>\n        <button\n          type=\"button\"\n          class=\"variant-attribute-remove-btn\"\n          (click)=\"removeAttributeEntry(i)\"\n          [disabled]=\"obs.disabled\"\n          title=\"{{ 'removeAttribute' | pluginTranslate: pluginId | async }}\"\n        >\n          &times;\n        </button>\n      </div>\n    </div>\n    <button\n      type=\"button\"\n      class=\"variant-attribute-add-btn\"\n      (click)=\"addAttributeEntry()\"\n      [disabled]=\"obs.disabled\"\n    >\n      + {{ 'addAttribute' | pluginTranslate: pluginId | async }}\n    </button>\n  </div>\n\n  <v-select\n    name=\"environmentId\"\n    [title]=\"'environmentId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'environmentIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [items]=\"obs.environments.data\"\n    [defaultSelectionId]=\"obs.prefill?.environmentId\"\n    [disabled]=\"obs.disabled || obs.environments.loading\"\n    [required]=\"false\"\n    [loading]=\"obs.environments.loading\"\n  >\n  </v-select>\n  <div *ngIf=\"obs.environments.error\" class=\"loading-error\">{{ obs.environments.error }}</div>\n\n  <v-select\n    name=\"outputFormat\"\n    [title]=\"'outputFormat' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'outputFormatTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [items]=\"outputFormatOptions\"\n    [defaultSelectionId]=\"obs.prefill?.outputFormat || 'PDF'\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-select>\n\n  <div class=\"field-with-fx\">\n    <v-input\n      *ngIf=\"!filenameExpressionMode\"\n      [title]=\"'filename' | pluginTranslate: pluginId | async\"\n      [tooltip]=\"'filenameTooltip' | pluginTranslate: pluginId | async\"\n      [margin]=\"true\"\n      [defaultValue]=\"filenameValue\"\n      (valueChange)=\"onFilenameValueChange($event)\"\n      [disabled]=\"obs.disabled\"\n      [required]=\"true\"\n    >\n    </v-input>\n    <div *ngIf=\"filenameExpressionMode\" class=\"fx-input-group\">\n      <label class=\"fx-input-label\">{{ 'filename' | pluginTranslate: pluginId | async }}</label>\n      <input\n        type=\"text\"\n        class=\"fx-input\"\n        [ngModel]=\"filenameExpression\"\n        (ngModelChange)=\"filenameExpression = $event; onFilenameExpressionChange()\"\n        [disabled]=\"obs.disabled\"\n        placeholder='\"besluit-\" & $doc.name & \".pdf\"'\n      />\n    </div>\n    <button\n      type=\"button\"\n      class=\"fx-toggle\"\n      (click)=\"toggleFilenameExpressionMode()\"\n      [disabled]=\"obs.disabled\"\n      [title]=\"filenameExpressionMode ? 'Switch to plain input' : 'Switch to expression'\"\n    >\n      {{ filenameExpressionMode ? '\u00B7' : 'fx' }}\n    </button>\n  </div>\n\n  <v-input\n    name=\"correlationId\"\n    [title]=\"'correlationId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'correlationIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.correlationId\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"false\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"resultProcessVariable\"\n    [title]=\"'resultProcessVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'resultProcessVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.resultProcessVariable\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-input>\n</v-form>\n\n<div *ngIf=\"(templateFields$ | async)?.error as templateFieldsError\" class=\"loading-error\">\n  {{ templateFieldsError }}\n</div>\n\n<div *ngIf=\"selectedTemplateId$ | async\" class=\"mapping-section\">\n  <h5 class=\"mapping-section__title\">\n    {{ 'dataMappingTitle' | pluginTranslate: pluginId | async }}\n  </h5>\n  <p class=\"mapping-section__description\">\n    {{ 'dataMappingDescription' | pluginTranslate: pluginId | async }}\n  </p>\n  <div class=\"mapping-mode-toggle\">\n    <button\n      class=\"mapping-mode-toggle__btn\"\n      [class.mapping-mode-toggle__btn--active]=\"mappingMode === 'simple'\"\n      (click)=\"mappingMode = 'simple'\"\n    >\n      {{ 'mappingModeSimple' | pluginTranslate: pluginId | async }}\n    </button>\n    <button\n      class=\"mapping-mode-toggle__btn\"\n      [class.mapping-mode-toggle__btn--active]=\"mappingMode === 'advanced'\"\n      (click)=\"mappingMode = 'advanced'\"\n    >\n      {{ 'mappingModeAdvanced' | pluginTranslate: pluginId | async }}\n    </button>\n  </div>\n\n  <!-- Editor area (full width) -->\n  <epistola-mapping-builder\n    *ngIf=\"mappingMode === 'simple'\"\n    [expression]=\"dataMapping$ | async\"\n    [templateFields]=\"(templateFields$ | async)?.data ?? []\"\n    [suggestions]=\"variableSuggestions\"\n    [disabled]=\"!!(disabled$ | async)\"\n    (expressionChange)=\"onDataMappingChange($event)\"\n  ></epistola-mapping-builder>\n\n  <epistola-jsonata-editor\n    *ngIf=\"mappingMode === 'advanced'\"\n    [expression]=\"dataMapping$ | async\"\n    [disabled]=\"!!(disabled$ | async)\"\n    [contextVariables]=\"editorContextVariables\"\n    [functions]=\"expressionFunctions\"\n    (expressionChange)=\"onDataMappingChange($event)\"\n  ></epistola-jsonata-editor>\n\n  <!-- Bottom tabs: Schema + Preview (collapsible) -->\n  <div class=\"mapping-tools\" [class.mapping-tools--collapsed]=\"toolsCollapsed\">\n    <div class=\"mapping-tools__header\" (click)=\"toolsCollapsed = !toolsCollapsed\">\n      <span class=\"mapping-tools__chevron\">{{ toolsCollapsed ? '&#x25B6;' : '&#x25BC;' }}</span>\n      <span>{{ 'mappingTools' | pluginTranslate: pluginId | async }}</span>\n    </div>\n    <div *ngIf=\"!toolsCollapsed\" class=\"mapping-tools__content\">\n      <div class=\"mapping-tools__tabs\">\n        <button\n          class=\"mapping-tools__tab\"\n          [class.mapping-tools__tab--active]=\"activeToolTab === 'schema'\"\n          (click)=\"activeToolTab = 'schema'\"\n        >\n          {{ 'expectedStructure' | pluginTranslate: pluginId | async }}\n        </button>\n        <button\n          class=\"mapping-tools__tab\"\n          [class.mapping-tools__tab--active]=\"activeToolTab === 'preview'\"\n          (click)=\"activeToolTab = 'preview'\"\n        >\n          {{ 'previewTitle' | pluginTranslate: pluginId | async }}\n        </button>\n      </div>\n\n      <epistola-expected-structure\n        *ngIf=\"activeToolTab === 'schema'\"\n        [templateFields]=\"(templateFields$ | async)?.data ?? []\"\n      ></epistola-expected-structure>\n\n      <epistola-mapping-preview\n        *ngIf=\"activeToolTab === 'preview'\"\n        [expression]=\"dataMapping$ | async\"\n        [templateFields]=\"(templateFields$ | async)?.data ?? []\"\n        [caseDefinitionKey]=\"caseDefinitionKey\"\n      ></epistola-mapping-preview>\n    </div>\n  </div>\n</div>\n", styles: [".loading-error{padding:.25rem .75rem;font-size:.8125rem;color:#dc3545}.jsonata-validation-errors{margin-bottom:1rem;padding:.75rem 1rem;border:1px solid #dc3545;border-radius:4px;background:#fdf3f4;color:#dc3545;font-size:.875rem}.jsonata-validation-errors ul{margin:.5rem 0 0;padding-left:1.25rem}.jsonata-validation-errors code{background:#dc35451a;padding:0 .25rem;border-radius:2px;font-family:monospace}.validation-summary{margin-top:.5rem;padding:.5rem .75rem;border-radius:4px;font-size:.875rem}.validation-summary .validation-complete{color:#198754}.validation-summary .validation-incomplete{color:#dc3545;font-weight:500}.variant-mode-toggle{margin-bottom:1rem;padding:0 .75rem}.variant-mode-label{display:block;font-size:.875rem;font-weight:500;margin-bottom:.375rem}.variant-mode-buttons{display:flex;gap:0;border:1px solid #d1d5db;border-radius:4px;overflow:hidden;width:fit-content}.variant-mode-btn{padding:.375rem .75rem;font-size:.8125rem;background:#fff;border:none;border-right:1px solid #d1d5db;cursor:pointer;color:#374151;transition:background-color .15s,color .15s}.variant-mode-btn:last-child{border-right:none}.variant-mode-btn:hover:not([disabled]){background:#f3f4f6}.variant-mode-btn.active{background:#2563eb;color:#fff}.variant-mode-btn[disabled]{opacity:.5;cursor:not-allowed}.variant-attributes-section{margin-bottom:1rem;padding:0 .75rem}.variant-attributes-label{display:block;font-size:.875rem;font-weight:500;margin-bottom:.375rem}.variant-attributes-list{display:flex;flex-direction:column;gap:.375rem}.variant-attribute-row{display:flex;gap:.375rem;align-items:center}.variant-attribute-input{flex:1;padding:.375rem .5rem;font-size:.8125rem;border:1px solid #d1d5db;border-radius:4px;outline:none}.variant-attribute-input:focus{border-color:#2563eb;box-shadow:0 0 0 1px #2563eb}.variant-attribute-input[disabled]{opacity:.5;background:#f9fafb}.custom-key-input{display:flex;flex:1;gap:.25rem}.custom-key-input .variant-attribute-input{flex:1}.custom-key-cancel{padding:.25rem .5rem;font-size:1rem;line-height:1;background:none;border:1px solid #d1d5db;border-radius:4px;cursor:pointer;color:#6b7280}.custom-key-cancel:hover:not([disabled]){color:#dc3545;border-color:#dc3545}.custom-key-cancel[disabled]{opacity:.5;cursor:not-allowed}.variant-attribute-required-toggle{display:flex;align-items:center;gap:.25rem;font-size:.75rem;color:#374151;white-space:nowrap;cursor:pointer}.variant-attribute-required-toggle input[type=checkbox]{margin:0;cursor:pointer}.variant-attribute-required-toggle .required-label{-webkit-user-select:none;user-select:none}.variant-attribute-remove-btn{padding:.25rem .5rem;font-size:1rem;line-height:1;background:none;border:1px solid #d1d5db;border-radius:4px;cursor:pointer;color:#6b7280}.variant-attribute-remove-btn:hover:not([disabled]){color:#dc3545;border-color:#dc3545}.variant-attribute-remove-btn[disabled]{opacity:.5;cursor:not-allowed}.variant-attribute-add-btn{margin-top:.375rem;padding:.25rem .5rem;font-size:.8125rem;background:none;border:1px dashed #d1d5db;border-radius:4px;cursor:pointer;color:#6b7280}.variant-attribute-add-btn:hover:not([disabled]){color:#2563eb;border-color:#2563eb}.variant-attribute-add-btn[disabled]{opacity:.5;cursor:not-allowed}.field-with-fx{display:flex;align-items:flex-start;gap:4px}.field-with-fx>*:first-child{flex:1;min-width:0}.fx-toggle{width:28px;height:28px;margin-top:22px;border:1px solid #e0e0e0;border-radius:4px;background:#fff;cursor:pointer;font-family:monospace;font-size:.8em;display:flex;align-items:center;justify-content:center;flex-shrink:0}.fx-toggle:hover{background:#f4f4f4}.fx-toggle--inline{margin-top:0}.fx-input-group{flex:1;min-width:0;margin-bottom:.75rem}.fx-input-label{display:block;font-size:.875rem;margin-bottom:.25rem;color:#525252}.fx-input{width:100%;border:1px solid #8d8d8d;border-radius:0;padding:.4rem .75rem;font-family:monospace;font-size:.875rem;background:#f4f4f4}.attribute-value-with-fx{display:flex;align-items:center;gap:4px;flex:1;min-width:0}.attribute-value-with-fx>input{flex:1;min-width:0}.mapping-section{margin-top:1rem}.mapping-section__title{font-size:1rem;font-weight:600;margin:0 0 4px}.mapping-section__description{font-size:.85em;color:#6f6f6f;margin:0 0 12px}.mapping-mode-toggle{display:flex;gap:0;margin-bottom:12px}.mapping-mode-toggle__btn{padding:6px 16px;border:1px solid #e0e0e0;background:#fff;font-size:.85em;cursor:pointer}.mapping-mode-toggle__btn:first-child{border-radius:4px 0 0 4px}.mapping-mode-toggle__btn:last-child{border-radius:0 4px 4px 0;border-left:none}.mapping-mode-toggle__btn--active{background:#0f62fe;color:#fff;border-color:#0f62fe}.mapping-tools{margin-top:12px;border:1px solid #e0e0e0;border-radius:4px;overflow:hidden}.mapping-tools__header{display:flex;align-items:center;gap:6px;padding:8px 12px;background:#f4f4f4;cursor:pointer;font-size:.85em;font-weight:500;-webkit-user-select:none;user-select:none}.mapping-tools__header:hover{background:#e8e8e8}.mapping-tools__chevron{font-size:.7em}.mapping-tools__content{border-top:1px solid #e0e0e0}.mapping-tools__tabs{display:flex;border-bottom:1px solid #e0e0e0}.mapping-tools__tab{padding:6px 16px;border:none;background:transparent;font-size:.8em;cursor:pointer;border-bottom:2px solid transparent}.mapping-tools__tab--active{border-bottom-color:#0f62fe;font-weight:500}\n"] }]
+                    ], template: "<v-form\n  data-testid=\"epistola-generate-form\"\n  (valueChange)=\"formValueChange($event)\"\n  *ngIf=\"{\n    disabled: disabled$ | async,\n    prefill: prefillConfiguration$ ? (prefillConfiguration$ | async) : null,\n    catalogs: catalogs$ | async,\n    templates: templates$ | async,\n    variants: variants$ | async,\n    environments: environments$ | async,\n    templateFields: templateFields$ | async,\n    selectedCatalogId: selectedCatalogId$ | async,\n    selectedTemplateId: selectedTemplateId$ | async,\n    validationErrors: validationErrors$ | async,\n  } as obs\"\n>\n  <div\n    *ngIf=\"obs.validationErrors && obs.validationErrors.length > 0\"\n    class=\"jsonata-validation-errors\"\n    data-testid=\"epistola-generate-validation-errors\"\n  >\n    <strong>{{ 'jsonataValidationErrorsHeading' | pluginTranslate: pluginId | async }}</strong>\n    <ul>\n      <li *ngFor=\"let err of obs.validationErrors\">\n        <code>{{ err.field }}</code\n        >: {{ err.message }}\n      </li>\n    </ul>\n  </div>\n  <v-select\n    name=\"catalogId\"\n    data-testid=\"epistola-generate-catalog-id\"\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\n    *ngIf=\"obs.catalogs.error\"\n    class=\"loading-error\"\n    data-testid=\"epistola-generate-catalog-error\"\n  >\n    {{ obs.catalogs.error }}\n  </div>\n\n  <v-select\n    name=\"templateId\"\n    data-testid=\"epistola-generate-template-id\"\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    [clearSelectionSubject$]=\"clearTemplateId$\"\n    [disabled]=\"obs.disabled || obs.templates.loading || !obs.selectedCatalogId\"\n    [required]=\"true\"\n    [loading]=\"obs.templates.loading\"\n  >\n  </v-select>\n  <div\n    *ngIf=\"obs.templates.error\"\n    class=\"loading-error\"\n    data-testid=\"epistola-generate-template-error\"\n  >\n    {{ obs.templates.error }}\n  </div>\n\n  <!-- Variant selection mode toggle -->\n  <div\n    class=\"variant-mode-toggle\"\n    *ngIf=\"obs.selectedTemplateId\"\n    data-testid=\"epistola-generate-variant-mode-toggle\"\n  >\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        data-testid=\"epistola-generate-variant-mode-explicit\"\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        data-testid=\"epistola-generate-variant-mode-attributes\"\n        [class.active]=\"variantSelectionMode === 'attributes'\"\n        (click)=\"onVariantSelectionModeChange('attributes')\"\n        [disabled]=\"obs.disabled\"\n      >\n        {{ 'selectByAttributes' | pluginTranslate: pluginId | async }}\n      </button>\n    </div>\n  </div>\n\n  <!-- Explicit variant selection (dropdown or expression) -->\n  <!--\n    The v-select / v-input here is intentionally NOT named into the v-form: v-form's\n    @ContentChildren queries default to descendants:false and would skip anything nested\n    in this `field-with-fx` wrapper. The value is tracked via (selectedChange)/(valueChange)\n    on the component, see variantIdValue / filenameValue.\n  -->\n  <div *ngIf=\"variantSelectionMode === 'explicit'\" class=\"field-with-fx\">\n    <v-select\n      *ngIf=\"!variantIdExpressionMode\"\n      data-testid=\"epistola-generate-variant-id\"\n      [title]=\"'variantId' | pluginTranslate: pluginId | async\"\n      [tooltip]=\"'variantIdTooltip' | pluginTranslate: pluginId | async\"\n      [margin]=\"true\"\n      [items]=\"obs.variants.data\"\n      [defaultSelectionId]=\"variantIdValue\"\n      [clearSelectionSubject$]=\"clearVariantId$\"\n      (selectedChange)=\"onVariantIdValueChange($event)\"\n      [disabled]=\"obs.disabled || obs.variants.loading || !obs.selectedTemplateId\"\n      [required]=\"false\"\n      [loading]=\"obs.variants.loading\"\n    >\n    </v-select>\n    <div *ngIf=\"variantIdExpressionMode\" class=\"fx-input-group\">\n      <label class=\"fx-input-label\">{{ 'variantId' | pluginTranslate: pluginId | async }}</label>\n      <input\n        type=\"text\"\n        class=\"fx-input\"\n        data-testid=\"epistola-generate-variant-id-expression\"\n        [ngModel]=\"variantIdExpression\"\n        (ngModelChange)=\"variantIdExpression = $event; onVariantIdExpressionChange()\"\n        [disabled]=\"obs.disabled\"\n        placeholder=\"$pv.letterType\"\n      />\n    </div>\n    <button\n      type=\"button\"\n      class=\"fx-toggle\"\n      data-testid=\"epistola-generate-variant-id-fx-toggle\"\n      (click)=\"toggleVariantIdExpressionMode()\"\n      [disabled]=\"obs.disabled\"\n      [title]=\"variantIdExpressionMode ? 'Switch to dropdown' : 'Switch to expression'\"\n    >\n      {{ variantIdExpressionMode ? '\u00B7' : 'fx' }}\n    </button>\n  </div>\n  <div\n    *ngIf=\"obs.variants.error\"\n    class=\"loading-error\"\n    data-testid=\"epistola-generate-variant-error\"\n  >\n    {{ obs.variants.error }}\n  </div>\n\n  <!-- Attribute-based variant selection -->\n  <div\n    *ngIf=\"variantSelectionMode === 'attributes' && obs.selectedTemplateId\"\n    class=\"variant-attributes-section\"\n    data-testid=\"epistola-generate-variant-attributes\"\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        [attr.data-testid]=\"'epistola-generate-attribute-row-' + i\"\n      >\n        <select\n          *ngIf=\"!entry._customKey\"\n          class=\"variant-attribute-input\"\n          [attr.data-testid]=\"'epistola-generate-attribute-key-' + i\"\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            [attr.data-testid]=\"'epistola-generate-attribute-key-custom-' + i\"\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            [attr.data-testid]=\"'epistola-generate-attribute-key-custom-cancel-' + i\"\n            (click)=\"cancelCustomKey(entry)\"\n            [disabled]=\"obs.disabled\"\n          >\n            &times;\n          </button>\n        </div>\n        <div class=\"attribute-value-with-fx\">\n          <input\n            type=\"text\"\n            class=\"variant-attribute-input\"\n            [attr.data-testid]=\"'epistola-generate-attribute-value-' + i\"\n            [class.fx-input]=\"entry._expressionMode\"\n            [placeholder]=\"\n              entry._expressionMode\n                ? '$pv.language'\n                : ('attributeValue' | pluginTranslate: pluginId | async)\n            \"\n            [(ngModel)]=\"entry.value\"\n            (ngModelChange)=\"onAttributeEntryChange()\"\n            [disabled]=\"obs.disabled\"\n          />\n          <button\n            type=\"button\"\n            class=\"fx-toggle fx-toggle--inline\"\n            [attr.data-testid]=\"'epistola-generate-attribute-value-fx-toggle-' + i\"\n            (click)=\"entry._expressionMode = !entry._expressionMode\"\n            [disabled]=\"obs.disabled\"\n            [title]=\"entry._expressionMode ? 'Switch to plain value' : 'Switch to expression'\"\n          >\n            {{ entry._expressionMode ? '\u00B7' : 'fx' }}\n          </button>\n        </div>\n        <label class=\"variant-attribute-required-toggle\">\n          <input\n            type=\"checkbox\"\n            [attr.data-testid]=\"'epistola-generate-attribute-required-' + i\"\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          [attr.data-testid]=\"'epistola-generate-attribute-remove-' + i\"\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      data-testid=\"epistola-generate-attribute-add\"\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    data-testid=\"epistola-generate-environment-id\"\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\n    *ngIf=\"obs.environments.error\"\n    class=\"loading-error\"\n    data-testid=\"epistola-generate-environment-error\"\n  >\n    {{ obs.environments.error }}\n  </div>\n\n  <v-select\n    name=\"outputFormat\"\n    data-testid=\"epistola-generate-output-format\"\n    [title]=\"'outputFormat' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'outputFormatTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [items]=\"outputFormatOptions\"\n    [defaultSelectionId]=\"obs.prefill?.outputFormat || 'PDF'\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-select>\n\n  <div class=\"field-with-fx\">\n    <v-input\n      *ngIf=\"!filenameExpressionMode\"\n      data-testid=\"epistola-generate-filename\"\n      [title]=\"'filename' | pluginTranslate: pluginId | async\"\n      [tooltip]=\"'filenameTooltip' | pluginTranslate: pluginId | async\"\n      [margin]=\"true\"\n      [defaultValue]=\"filenameValue\"\n      (valueChange)=\"onFilenameValueChange($event)\"\n      [disabled]=\"obs.disabled\"\n      [required]=\"true\"\n    >\n    </v-input>\n    <div *ngIf=\"filenameExpressionMode\" class=\"fx-input-group\">\n      <label class=\"fx-input-label\">{{ 'filename' | pluginTranslate: pluginId | async }}</label>\n      <input\n        type=\"text\"\n        class=\"fx-input\"\n        data-testid=\"epistola-generate-filename-expression\"\n        [ngModel]=\"filenameExpression\"\n        (ngModelChange)=\"filenameExpression = $event; onFilenameExpressionChange()\"\n        [disabled]=\"obs.disabled\"\n        placeholder='\"besluit-\" & $doc.name & \".pdf\"'\n      />\n    </div>\n    <button\n      type=\"button\"\n      class=\"fx-toggle\"\n      data-testid=\"epistola-generate-filename-fx-toggle\"\n      (click)=\"toggleFilenameExpressionMode()\"\n      [disabled]=\"obs.disabled\"\n      [title]=\"filenameExpressionMode ? 'Switch to plain input' : 'Switch to expression'\"\n    >\n      {{ filenameExpressionMode ? '\u00B7' : 'fx' }}\n    </button>\n  </div>\n\n  <v-input\n    name=\"correlationId\"\n    data-testid=\"epistola-generate-correlation-id\"\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    data-testid=\"epistola-generate-result-process-variable\"\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      data-testid=\"epistola-generate-mapping-mode-simple\"\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      data-testid=\"epistola-generate-mapping-mode-advanced\"\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    [contextVariables]=\"editorContextVariables\"\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\n      class=\"mapping-tools__header\"\n      data-testid=\"epistola-generate-mapping-tools-header\"\n      (click)=\"toolsCollapsed = !toolsCollapsed\"\n    >\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          data-testid=\"epistola-generate-mapping-tab-schema\"\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          data-testid=\"epistola-generate-mapping-tab-preview\"\n          [class.mapping-tools__tab--active]=\"activeToolTab === 'preview'\"\n          (click)=\"activeToolTab = 'preview'\"\n        >\n          {{ 'previewTitle' | pluginTranslate: pluginId | async }}\n        </button>\n      </div>\n\n      <epistola-expected-structure\n        *ngIf=\"activeToolTab === 'schema'\"\n        [templateFields]=\"(templateFields$ | async)?.data ?? []\"\n      ></epistola-expected-structure>\n\n      <epistola-mapping-preview\n        *ngIf=\"activeToolTab === 'preview'\"\n        [expression]=\"dataMapping$ | async\"\n        [templateFields]=\"(templateFields$ | async)?.data ?? []\"\n        [caseDefinitionKey]=\"caseDefinitionKey\"\n      ></epistola-mapping-preview>\n    </div>\n  </div>\n</div>\n", styles: [".loading-error{padding:.25rem .75rem;font-size:.8125rem;color:#dc3545}.jsonata-validation-errors{margin-bottom:1rem;padding:.75rem 1rem;border:1px solid #dc3545;border-radius:4px;background:#fdf3f4;color:#dc3545;font-size:.875rem}.jsonata-validation-errors ul{margin:.5rem 0 0;padding-left:1.25rem}.jsonata-validation-errors code{background:#dc35451a;padding:0 .25rem;border-radius:2px;font-family:monospace}.validation-summary{margin-top:.5rem;padding:.5rem .75rem;border-radius:4px;font-size:.875rem}.validation-summary .validation-complete{color:#198754}.validation-summary .validation-incomplete{color:#dc3545;font-weight:500}.variant-mode-toggle{margin-bottom:1rem;padding:0 .75rem}.variant-mode-label{display:block;font-size:.875rem;font-weight:500;margin-bottom:.375rem}.variant-mode-buttons{display:flex;gap:0;border:1px solid #d1d5db;border-radius:4px;overflow:hidden;width:fit-content}.variant-mode-btn{padding:.375rem .75rem;font-size:.8125rem;background:#fff;border:none;border-right:1px solid #d1d5db;cursor:pointer;color:#374151;transition:background-color .15s,color .15s}.variant-mode-btn:last-child{border-right:none}.variant-mode-btn:hover:not([disabled]){background:#f3f4f6}.variant-mode-btn.active{background:#2563eb;color:#fff}.variant-mode-btn[disabled]{opacity:.5;cursor:not-allowed}.variant-attributes-section{margin-bottom:1rem;padding:0 .75rem}.variant-attributes-label{display:block;font-size:.875rem;font-weight:500;margin-bottom:.375rem}.variant-attributes-list{display:flex;flex-direction:column;gap:.375rem}.variant-attribute-row{display:flex;gap:.375rem;align-items:center}.variant-attribute-input{flex:1;padding:.375rem .5rem;font-size:.8125rem;border:1px solid #d1d5db;border-radius:4px;outline:none}.variant-attribute-input:focus{border-color:#2563eb;box-shadow:0 0 0 1px #2563eb}.variant-attribute-input[disabled]{opacity:.5;background:#f9fafb}.custom-key-input{display:flex;flex:1;gap:.25rem}.custom-key-input .variant-attribute-input{flex:1}.custom-key-cancel{padding:.25rem .5rem;font-size:1rem;line-height:1;background:none;border:1px solid #d1d5db;border-radius:4px;cursor:pointer;color:#6b7280}.custom-key-cancel:hover:not([disabled]){color:#dc3545;border-color:#dc3545}.custom-key-cancel[disabled]{opacity:.5;cursor:not-allowed}.variant-attribute-required-toggle{display:flex;align-items:center;gap:.25rem;font-size:.75rem;color:#374151;white-space:nowrap;cursor:pointer}.variant-attribute-required-toggle input[type=checkbox]{margin:0;cursor:pointer}.variant-attribute-required-toggle .required-label{-webkit-user-select:none;user-select:none}.variant-attribute-remove-btn{padding:.25rem .5rem;font-size:1rem;line-height:1;background:none;border:1px solid #d1d5db;border-radius:4px;cursor:pointer;color:#6b7280}.variant-attribute-remove-btn:hover:not([disabled]){color:#dc3545;border-color:#dc3545}.variant-attribute-remove-btn[disabled]{opacity:.5;cursor:not-allowed}.variant-attribute-add-btn{margin-top:.375rem;padding:.25rem .5rem;font-size:.8125rem;background:none;border:1px dashed #d1d5db;border-radius:4px;cursor:pointer;color:#6b7280}.variant-attribute-add-btn:hover:not([disabled]){color:#2563eb;border-color:#2563eb}.variant-attribute-add-btn[disabled]{opacity:.5;cursor:not-allowed}.field-with-fx{display:flex;align-items:flex-start;gap:4px}.field-with-fx>*:first-child{flex:1;min-width:0}.fx-toggle{width:28px;height:28px;margin-top:22px;border:1px solid #e0e0e0;border-radius:4px;background:#fff;cursor:pointer;font-family:monospace;font-size:.8em;display:flex;align-items:center;justify-content:center;flex-shrink:0}.fx-toggle:hover{background:#f4f4f4}.fx-toggle--inline{margin-top:0}.fx-input-group{flex:1;min-width:0;margin-bottom:.75rem}.fx-input-label{display:block;font-size:.875rem;margin-bottom:.25rem;color:#525252}.fx-input{width:100%;border:1px solid #8d8d8d;border-radius:0;padding:.4rem .75rem;font-family:monospace;font-size:.875rem;background:#f4f4f4}.attribute-value-with-fx{display:flex;align-items:center;gap:4px;flex:1;min-width:0}.attribute-value-with-fx>input{flex:1;min-width:0}.mapping-section{margin-top:1rem}.mapping-section__title{font-size:1rem;font-weight:600;margin:0 0 4px}.mapping-section__description{font-size:.85em;color:#6f6f6f;margin:0 0 12px}.mapping-mode-toggle{display:flex;gap:0;margin-bottom:12px}.mapping-mode-toggle__btn{padding:6px 16px;border:1px solid #e0e0e0;background:#fff;font-size:.85em;cursor:pointer}.mapping-mode-toggle__btn:first-child{border-radius:4px 0 0 4px}.mapping-mode-toggle__btn:last-child{border-radius:0 4px 4px 0;border-left:none}.mapping-mode-toggle__btn--active{background:#0f62fe;color:#fff;border-color:#0f62fe}.mapping-tools{margin-top:12px;border:1px solid #e0e0e0;border-radius:4px;overflow:hidden}.mapping-tools__header{display:flex;align-items:center;gap:6px;padding:8px 12px;background:#f4f4f4;cursor:pointer;font-size:.85em;font-weight:500;-webkit-user-select:none;user-select:none}.mapping-tools__header:hover{background:#e8e8e8}.mapping-tools__chevron{font-size:.7em}.mapping-tools__content{border-top:1px solid #e0e0e0}.mapping-tools__tabs{display:flex;border-bottom:1px solid #e0e0e0}.mapping-tools__tab{padding:6px 16px;border:none;background:transparent;font-size:.8em;cursor:pointer;border-bottom:2px solid transparent}.mapping-tools__tab--active{border-bottom-color:#0f62fe;font-weight:500}\n"] }]
         }], ctorParameters: () => [{ type: EpistolaPluginService }, { type: i2$2.ProcessLinkStateService }, { type: i0.ChangeDetectorRef }], propDecorators: { save$: [{
                 type: Input
             }], disabled$: [{
@@ -2888,11 +3038,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 (valueChange)=\"formValueChange($event)\" *ngIf=\"prefillResolved$ | async\">\n  <v-input\n    name=\"requestIdVariable\"\n    [title]=\"'requestIdVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'requestIdVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"resolvedPrefill?.requestIdVariable\"\n    [disabled]=\"safeDisabled$ | async\"\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]=\"resolvedPrefill?.statusVariable\"\n    [disabled]=\"safeDisabled$ | async\"\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]=\"resolvedPrefill?.documentIdVariable\"\n    [disabled]=\"safeDisabled$ | async\"\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]=\"resolvedPrefill?.errorMessageVariable\"\n    [disabled]=\"safeDisabled$ | async\"\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  data-testid=\"epistola-check-status-form\"\n  (valueChange)=\"formValueChange($event)\"\n  *ngIf=\"prefillResolved$ | async\"\n>\n  <v-input\n    name=\"requestIdVariable\"\n    data-testid=\"epistola-check-status-request-id-variable\"\n    [title]=\"'requestIdVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'requestIdVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"resolvedPrefill?.requestIdVariable\"\n    [disabled]=\"safeDisabled$ | async\"\n    [required]=\"true\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"statusVariable\"\n    data-testid=\"epistola-check-status-status-variable\"\n    [title]=\"'statusVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'statusVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"resolvedPrefill?.statusVariable\"\n    [disabled]=\"safeDisabled$ | async\"\n    [required]=\"true\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"documentIdVariable\"\n    data-testid=\"epistola-check-status-document-id-variable\"\n    [title]=\"'documentIdVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'documentIdVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"resolvedPrefill?.documentIdVariable\"\n    [disabled]=\"safeDisabled$ | async\"\n    [required]=\"false\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"errorMessageVariable\"\n    data-testid=\"epistola-check-status-error-message-variable\"\n    [title]=\"'errorMessageVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'errorMessageVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"resolvedPrefill?.errorMessageVariable\"\n    [disabled]=\"safeDisabled$ | async\"\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 (valueChange)=\"formValueChange($event)\" *ngIf=\"prefillResolved$ | async\">\n  <v-input\n    name=\"requestIdVariable\"\n    [title]=\"'requestIdVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'requestIdVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"resolvedPrefill?.requestIdVariable\"\n    [disabled]=\"safeDisabled$ | async\"\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]=\"resolvedPrefill?.statusVariable\"\n    [disabled]=\"safeDisabled$ | async\"\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]=\"resolvedPrefill?.documentIdVariable\"\n    [disabled]=\"safeDisabled$ | async\"\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]=\"resolvedPrefill?.errorMessageVariable\"\n    [disabled]=\"safeDisabled$ | async\"\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  data-testid=\"epistola-check-status-form\"\n  (valueChange)=\"formValueChange($event)\"\n  *ngIf=\"prefillResolved$ | async\"\n>\n  <v-input\n    name=\"requestIdVariable\"\n    data-testid=\"epistola-check-status-request-id-variable\"\n    [title]=\"'requestIdVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'requestIdVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"resolvedPrefill?.requestIdVariable\"\n    [disabled]=\"safeDisabled$ | async\"\n    [required]=\"true\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"statusVariable\"\n    data-testid=\"epistola-check-status-status-variable\"\n    [title]=\"'statusVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'statusVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"resolvedPrefill?.statusVariable\"\n    [disabled]=\"safeDisabled$ | async\"\n    [required]=\"true\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"documentIdVariable\"\n    data-testid=\"epistola-check-status-document-id-variable\"\n    [title]=\"'documentIdVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'documentIdVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"resolvedPrefill?.documentIdVariable\"\n    [disabled]=\"safeDisabled$ | async\"\n    [required]=\"false\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"errorMessageVariable\"\n    data-testid=\"epistola-check-status-error-message-variable\"\n    [title]=\"'errorMessageVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'errorMessageVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"resolvedPrefill?.errorMessageVariable\"\n    [disabled]=\"safeDisabled$ | async\"\n    [required]=\"false\"\n  >\n  </v-input>\n</v-form>\n" }]
         }], propDecorators: { save$: [{
                 type: Input
             }], disabled$: [{
@@ -3029,11 +3179,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 (valueChange)=\"formValueChange($event)\" *ngIf=\"prefillResolved$ | async\">\n  <v-input\n    name=\"documentVariable\"\n    [title]=\"'documentVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'documentVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"resolvedPrefill?.documentVariable\"\n    [disabled]=\"safeDisabled$ | async\"\n    [required]=\"true\"\n  >\n  </v-input>\n\n  <v-select\n    name=\"storageTarget\"\n    [title]=\"'storageTarget' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'storageTargetTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [items]=\"storageTargetOptions\"\n    [defaultSelectionId]=\"resolvedPrefill?.storageTarget || defaultStorageTarget\"\n    [disabled]=\"safeDisabled$ | async\"\n    [required]=\"true\"\n  >\n  </v-select>\n\n  <v-input\n    *ngIf=\"(selectedTarget$ | async) === 'TEMPORARY_RESOURCE'\"\n    name=\"resourceIdVariable\"\n    [title]=\"'resourceIdVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'resourceIdVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"resolvedPrefill?.resourceIdVariable\"\n    [disabled]=\"safeDisabled$ | async\"\n    [required]=\"true\"\n  >\n  </v-input>\n\n  <v-input\n    *ngIf=\"(selectedTarget$ | async) === 'PROCESS_VARIABLE'\"\n    name=\"contentVariable\"\n    [title]=\"'contentVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'contentVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"resolvedPrefill?.contentVariable\"\n    [disabled]=\"safeDisabled$ | async\"\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"] }, { 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"] }] });
+    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  data-testid=\"epistola-download-form\"\n  (valueChange)=\"formValueChange($event)\"\n  *ngIf=\"prefillResolved$ | async\"\n>\n  <v-input\n    name=\"documentVariable\"\n    data-testid=\"epistola-download-document-variable\"\n    [title]=\"'documentVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'documentVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"resolvedPrefill?.documentVariable\"\n    [disabled]=\"safeDisabled$ | async\"\n    [required]=\"true\"\n  >\n  </v-input>\n\n  <v-select\n    name=\"storageTarget\"\n    data-testid=\"epistola-download-storage-target\"\n    [title]=\"'storageTarget' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'storageTargetTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [items]=\"storageTargetOptions\"\n    [defaultSelectionId]=\"resolvedPrefill?.storageTarget || defaultStorageTarget\"\n    [disabled]=\"safeDisabled$ | async\"\n    [required]=\"true\"\n  >\n  </v-select>\n\n  <v-input\n    *ngIf=\"(selectedTarget$ | async) === 'TEMPORARY_RESOURCE'\"\n    name=\"resourceIdVariable\"\n    data-testid=\"epistola-download-resource-id-variable\"\n    [title]=\"'resourceIdVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'resourceIdVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"resolvedPrefill?.resourceIdVariable\"\n    [disabled]=\"safeDisabled$ | async\"\n    [required]=\"true\"\n  >\n  </v-input>\n\n  <v-input\n    *ngIf=\"(selectedTarget$ | async) === 'PROCESS_VARIABLE'\"\n    name=\"contentVariable\"\n    data-testid=\"epistola-download-content-variable\"\n    [title]=\"'contentVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'contentVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"resolvedPrefill?.contentVariable\"\n    [disabled]=\"safeDisabled$ | async\"\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"] }, { 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"] }] });
 }
 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, SelectModule], template: "<v-form (valueChange)=\"formValueChange($event)\" *ngIf=\"prefillResolved$ | async\">\n  <v-input\n    name=\"documentVariable\"\n    [title]=\"'documentVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'documentVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"resolvedPrefill?.documentVariable\"\n    [disabled]=\"safeDisabled$ | async\"\n    [required]=\"true\"\n  >\n  </v-input>\n\n  <v-select\n    name=\"storageTarget\"\n    [title]=\"'storageTarget' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'storageTargetTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [items]=\"storageTargetOptions\"\n    [defaultSelectionId]=\"resolvedPrefill?.storageTarget || defaultStorageTarget\"\n    [disabled]=\"safeDisabled$ | async\"\n    [required]=\"true\"\n  >\n  </v-select>\n\n  <v-input\n    *ngIf=\"(selectedTarget$ | async) === 'TEMPORARY_RESOURCE'\"\n    name=\"resourceIdVariable\"\n    [title]=\"'resourceIdVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'resourceIdVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"resolvedPrefill?.resourceIdVariable\"\n    [disabled]=\"safeDisabled$ | async\"\n    [required]=\"true\"\n  >\n  </v-input>\n\n  <v-input\n    *ngIf=\"(selectedTarget$ | async) === 'PROCESS_VARIABLE'\"\n    name=\"contentVariable\"\n    [title]=\"'contentVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'contentVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"resolvedPrefill?.contentVariable\"\n    [disabled]=\"safeDisabled$ | async\"\n    [required]=\"true\"\n  >\n  </v-input>\n</v-form>\n" }]
+            args: [{ selector: 'epistola-download-document-configuration', standalone: true, imports: [CommonModule, PluginTranslatePipeModule, FormModule, InputModule, SelectModule], template: "<v-form\n  data-testid=\"epistola-download-form\"\n  (valueChange)=\"formValueChange($event)\"\n  *ngIf=\"prefillResolved$ | async\"\n>\n  <v-input\n    name=\"documentVariable\"\n    data-testid=\"epistola-download-document-variable\"\n    [title]=\"'documentVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'documentVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"resolvedPrefill?.documentVariable\"\n    [disabled]=\"safeDisabled$ | async\"\n    [required]=\"true\"\n  >\n  </v-input>\n\n  <v-select\n    name=\"storageTarget\"\n    data-testid=\"epistola-download-storage-target\"\n    [title]=\"'storageTarget' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'storageTargetTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [items]=\"storageTargetOptions\"\n    [defaultSelectionId]=\"resolvedPrefill?.storageTarget || defaultStorageTarget\"\n    [disabled]=\"safeDisabled$ | async\"\n    [required]=\"true\"\n  >\n  </v-select>\n\n  <v-input\n    *ngIf=\"(selectedTarget$ | async) === 'TEMPORARY_RESOURCE'\"\n    name=\"resourceIdVariable\"\n    data-testid=\"epistola-download-resource-id-variable\"\n    [title]=\"'resourceIdVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'resourceIdVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"resolvedPrefill?.resourceIdVariable\"\n    [disabled]=\"safeDisabled$ | async\"\n    [required]=\"true\"\n  >\n  </v-input>\n\n  <v-input\n    *ngIf=\"(selectedTarget$ | async) === 'PROCESS_VARIABLE'\"\n    name=\"contentVariable\"\n    data-testid=\"epistola-download-content-variable\"\n    [title]=\"'contentVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'contentVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"resolvedPrefill?.contentVariable\"\n    [disabled]=\"safeDisabled$ | async\"\n    [required]=\"true\"\n  >\n  </v-input>\n</v-form>\n" }]
         }], propDecorators: { save$: [{
                 type: Input
             }], disabled$: [{
@@ -3226,7 +3376,7 @@ class EpistolaDocumentComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaDocumentComponent, deps: [{ token: EpistolaPluginService }, { token: i2$3.DomSanitizer }, { token: i3.FormIoStateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: EpistolaDocumentComponent, isStandalone: true, selector: "epistola-document-component", inputs: { value: "value", disabled: "disabled", label: "label", display: "display", documentVariable: "documentVariable", tenantIdVariable: "tenantIdVariable", filename: "filename", taskInstanceId: "taskInstanceId" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: `
     <!-- Design-time placeholder -->
-    <div *ngIf="designMode" class="epistola-doc-panel">
+    <div *ngIf="designMode" class="epistola-doc-panel" data-testid="epistola-document-design">
       <div class="doc-header">
         <span>{{ label || 'Document' }}</span>
         <span class="design-tag">design mode</span>
@@ -3244,21 +3394,28 @@ class EpistolaDocumentComponent {
     </div>
 
     <!-- Button-only display -->
-    <div *ngIf="!designMode && display === 'button'">
+    <div *ngIf="!designMode && display === 'button'" data-testid="epistola-document-button-view">
       <button
         type="button"
         class="btn btn-outline-primary"
+        data-testid="epistola-document-download-button"
         [disabled]="disabled || downloading"
         (click)="download()"
       >
         <i class="mdi mdi-download mr-1"></i>
         {{ downloading ? 'Downloading...' : label || 'Download PDF' }}
       </button>
-      <span *ngIf="error" class="text-danger ml-2">{{ error }}</span>
+      <span *ngIf="error" class="text-danger ml-2" data-testid="epistola-document-button-error">{{
+        error
+      }}</span>
     </div>
 
     <!-- Inline / both: panel with optional download icon -->
-    <div *ngIf="!designMode && display !== 'button'" class="epistola-doc-panel">
+    <div
+      *ngIf="!designMode && display !== 'button'"
+      class="epistola-doc-panel"
+      data-testid="epistola-document-inline-view"
+    >
       <div class="doc-header">
         <span>{{ label || 'Document' }}</span>
         <div class="doc-controls">
@@ -3266,6 +3423,7 @@ class EpistolaDocumentComponent {
             *ngIf="display === 'both'"
             type="button"
             class="doc-icon-btn"
+            data-testid="epistola-document-download-icon"
             [disabled]="disabled || downloading"
             (click)="download()"
             [title]="downloading ? 'Downloading...' : 'Download'"
@@ -3275,6 +3433,7 @@ class EpistolaDocumentComponent {
           <button
             type="button"
             class="doc-icon-btn"
+            data-testid="epistola-document-refresh"
             [disabled]="loading"
             (click)="refresh()"
             title="Refresh"
@@ -3284,8 +3443,14 @@ class EpistolaDocumentComponent {
         </div>
       </div>
       <div class="doc-body">
-        <div *ngIf="loading" class="doc-loading">Loading document...</div>
-        <div *ngIf="error && !loading" class="doc-unavailable">
+        <div *ngIf="loading" class="doc-loading" data-testid="epistola-document-loading">
+          Loading document...
+        </div>
+        <div
+          *ngIf="error && !loading"
+          class="doc-unavailable"
+          data-testid="epistola-document-error"
+        >
           <i class="mdi mdi-information-outline"></i>
           {{ error }}
         </div>
@@ -3294,6 +3459,7 @@ class EpistolaDocumentComponent {
           [data]="previewUrl"
           type="application/pdf"
           class="doc-pdf"
+          data-testid="epistola-document-pdf"
         >
           PDF preview is not supported in this browser.
         </object>
@@ -3305,7 +3471,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             type: Component,
             args: [{ standalone: true, imports: [CommonModule], selector: 'epistola-document-component', changeDetection: ChangeDetectionStrategy.OnPush, template: `
     <!-- Design-time placeholder -->
-    <div *ngIf="designMode" class="epistola-doc-panel">
+    <div *ngIf="designMode" class="epistola-doc-panel" data-testid="epistola-document-design">
       <div class="doc-header">
         <span>{{ label || 'Document' }}</span>
         <span class="design-tag">design mode</span>
@@ -3323,21 +3489,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
     </div>
 
     <!-- Button-only display -->
-    <div *ngIf="!designMode && display === 'button'">
+    <div *ngIf="!designMode && display === 'button'" data-testid="epistola-document-button-view">
       <button
         type="button"
         class="btn btn-outline-primary"
+        data-testid="epistola-document-download-button"
         [disabled]="disabled || downloading"
         (click)="download()"
       >
         <i class="mdi mdi-download mr-1"></i>
         {{ downloading ? 'Downloading...' : label || 'Download PDF' }}
       </button>
-      <span *ngIf="error" class="text-danger ml-2">{{ error }}</span>
+      <span *ngIf="error" class="text-danger ml-2" data-testid="epistola-document-button-error">{{
+        error
+      }}</span>
     </div>
 
     <!-- Inline / both: panel with optional download icon -->
-    <div *ngIf="!designMode && display !== 'button'" class="epistola-doc-panel">
+    <div
+      *ngIf="!designMode && display !== 'button'"
+      class="epistola-doc-panel"
+      data-testid="epistola-document-inline-view"
+    >
       <div class="doc-header">
         <span>{{ label || 'Document' }}</span>
         <div class="doc-controls">
@@ -3345,6 +3518,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             *ngIf="display === 'both'"
             type="button"
             class="doc-icon-btn"
+            data-testid="epistola-document-download-icon"
             [disabled]="disabled || downloading"
             (click)="download()"
             [title]="downloading ? 'Downloading...' : 'Download'"
@@ -3354,6 +3528,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
           <button
             type="button"
             class="doc-icon-btn"
+            data-testid="epistola-document-refresh"
             [disabled]="loading"
             (click)="refresh()"
             title="Refresh"
@@ -3363,8 +3538,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
         </div>
       </div>
       <div class="doc-body">
-        <div *ngIf="loading" class="doc-loading">Loading document...</div>
-        <div *ngIf="error && !loading" class="doc-unavailable">
+        <div *ngIf="loading" class="doc-loading" data-testid="epistola-document-loading">
+          Loading document...
+        </div>
+        <div
+          *ngIf="error && !loading"
+          class="doc-unavailable"
+          data-testid="epistola-document-error"
+        >
           <i class="mdi mdi-information-outline"></i>
           {{ error }}
         </div>
@@ -3373,6 +3554,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
           [data]="previewUrl"
           type="application/pdf"
           class="doc-pdf"
+          data-testid="epistola-document-pdf"
         >
           PDF preview is not supported in this browser.
         </object>
@@ -3579,39 +3761,63 @@ class EpistolaRetryFormComponent {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaRetryFormComponent, deps: [{ token: EpistolaPluginService }, { token: i0.ChangeDetectorRef }, { token: i2$3.DomSanitizer }], 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", taskInstanceId: "taskInstanceId" }, 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="loading" class="epistola-retry-loading" data-testid="epistola-retry-loading">
+      Loading form...
+    </div>
+    <div *ngIf="error" class="epistola-retry-error" data-testid="epistola-retry-error">
+      {{ error }}
+    </div>
     <div
       *ngIf="formDefinition && !loading"
       class="epistola-retry-container"
       [class.preview-expanded]="previewExpanded"
+      data-testid="epistola-retry-container"
     >
-      <div class="epistola-retry-form" [hidden]="previewExpanded">
+      <div class="epistola-retry-form" [hidden]="previewExpanded" data-testid="epistola-retry-form">
         <formio
           [form]="formDefinition"
           [submission]="submission"
           (change)="onFormChange($event)"
           [options]="formOptions"
+          data-testid="epistola-retry-formio"
         ></formio>
       </div>
-      <div class="epistola-retry-preview">
-        <div class="preview-header">
+      <div class="epistola-retry-preview" data-testid="epistola-retry-preview">
+        <div class="preview-header" data-testid="epistola-retry-preview-header">
           <span>Preview</span>
-          <button type="button" class="preview-toggle" (click)="togglePreview()">
+          <button
+            type="button"
+            class="preview-toggle"
+            (click)="togglePreview()"
+            data-testid="epistola-retry-preview-toggle"
+          >
             {{ previewExpanded ? 'Show form' : 'Expand' }}
           </button>
         </div>
-        <div *ngIf="previewLoading" class="preview-loading">Generating preview...</div>
+        <div
+          *ngIf="previewLoading"
+          class="preview-loading"
+          data-testid="epistola-retry-preview-loading"
+        >
+          Generating preview...
+        </div>
         <object
           *ngIf="previewUrl && !previewLoading"
           [data]="previewUrl"
           type="application/pdf"
           class="preview-pdf"
+          data-testid="epistola-retry-preview-pdf"
         >
           PDF preview not supported in this browser.
         </object>
-        <div *ngIf="previewError" class="preview-error">{{ previewError }}</div>
-        <div *ngIf="!previewUrl && !previewLoading && !previewError" class="preview-empty">
+        <div *ngIf="previewError" class="preview-error" data-testid="epistola-retry-preview-error">
+          {{ previewError }}
+        </div>
+        <div
+          *ngIf="!previewUrl && !previewLoading && !previewError"
+          class="preview-empty"
+          data-testid="epistola-retry-preview-empty"
+        >
           Edit fields to see a preview
         </div>
       </div>
@@ -3621,39 +3827,63 @@ class EpistolaRetryFormComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaRetryFormComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [CommonModule, FormioModule], selector: 'epistola-retry-form-component', changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <div *ngIf="loading" class="epistola-retry-loading">Loading form...</div>
-    <div *ngIf="error" class="epistola-retry-error">{{ error }}</div>
+    <div *ngIf="loading" class="epistola-retry-loading" data-testid="epistola-retry-loading">
+      Loading form...
+    </div>
+    <div *ngIf="error" class="epistola-retry-error" data-testid="epistola-retry-error">
+      {{ error }}
+    </div>
     <div
       *ngIf="formDefinition && !loading"
       class="epistola-retry-container"
       [class.preview-expanded]="previewExpanded"
+      data-testid="epistola-retry-container"
     >
-      <div class="epistola-retry-form" [hidden]="previewExpanded">
+      <div class="epistola-retry-form" [hidden]="previewExpanded" data-testid="epistola-retry-form">
         <formio
           [form]="formDefinition"
           [submission]="submission"
           (change)="onFormChange($event)"
           [options]="formOptions"
+          data-testid="epistola-retry-formio"
         ></formio>
       </div>
-      <div class="epistola-retry-preview">
-        <div class="preview-header">
+      <div class="epistola-retry-preview" data-testid="epistola-retry-preview">
+        <div class="preview-header" data-testid="epistola-retry-preview-header">
           <span>Preview</span>
-          <button type="button" class="preview-toggle" (click)="togglePreview()">
+          <button
+            type="button"
+            class="preview-toggle"
+            (click)="togglePreview()"
+            data-testid="epistola-retry-preview-toggle"
+          >
             {{ previewExpanded ? 'Show form' : 'Expand' }}
           </button>
         </div>
-        <div *ngIf="previewLoading" class="preview-loading">Generating preview...</div>
+        <div
+          *ngIf="previewLoading"
+          class="preview-loading"
+          data-testid="epistola-retry-preview-loading"
+        >
+          Generating preview...
+        </div>
         <object
           *ngIf="previewUrl && !previewLoading"
           [data]="previewUrl"
           type="application/pdf"
           class="preview-pdf"
+          data-testid="epistola-retry-preview-pdf"
         >
           PDF preview not supported in this browser.
         </object>
-        <div *ngIf="previewError" class="preview-error">{{ previewError }}</div>
-        <div *ngIf="!previewUrl && !previewLoading && !previewError" class="preview-empty">
+        <div *ngIf="previewError" class="preview-error" data-testid="epistola-retry-preview-error">
+          {{ previewError }}
+        </div>
+        <div
+          *ngIf="!previewUrl && !previewLoading && !previewError"
+          class="preview-empty"
+          data-testid="epistola-retry-preview-empty"
+        >
           Edit fields to see a preview
         </div>
       </div>
@@ -3918,7 +4148,7 @@ class EpistolaDocumentPreviewComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaDocumentPreviewComponent, deps: [{ token: EpistolaPluginService }, { token: i2$3.DomSanitizer }, { token: i3.FormIoStateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: EpistolaDocumentPreviewComponent, isStandalone: true, selector: "epistola-document-preview-component", inputs: { value: "value", disabled: "disabled", label: "label", processDefinitionKey: "processDefinitionKey", sourceActivityId: "sourceActivityId", overrideMapping: "overrideMapping", taskInstanceId: "taskInstanceId", inputOverrides: "inputOverrides", requestOverrides: "requestOverrides", autoRefresh: "autoRefresh", setAutoRefresh: "setAutoRefresh" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: `
     <!-- Design-time view: show configuration summary when no runtime context -->
-    <div *ngIf="designMode" class="epistola-preview-panel">
+    <div *ngIf="designMode" class="epistola-preview-panel" data-testid="epistola-preview-design">
       <div class="preview-header">
         <span>{{ label || 'Document Preview' }}</span>
       </div>
@@ -3940,7 +4170,7 @@ class EpistolaDocumentPreviewComponent {
     </div>
 
     <!-- Runtime view: actual preview -->
-    <div *ngIf="!designMode" class="epistola-preview-panel">
+    <div *ngIf="!designMode" class="epistola-preview-panel" data-testid="epistola-preview-runtime">
       <div class="preview-header">
         <span>{{ label || 'Document Preview' }}</span>
         <div class="preview-controls">
@@ -3951,20 +4181,33 @@ class EpistolaDocumentPreviewComponent {
           >
             <input
               type="checkbox"
+              data-testid="epistola-preview-autorefresh"
               [checked]="autoRefreshEnabled"
               (change)="onToggleAutoRefresh($event)"
             />
             Auto-refresh
           </label>
-          <button type="button" class="preview-refresh" [disabled]="loading" (click)="refresh()">
+          <button
+            type="button"
+            class="preview-refresh"
+            data-testid="epistola-preview-refresh"
+            [disabled]="loading"
+            (click)="refresh()"
+          >
             <i class="mdi mdi-refresh mr-1"></i>
             {{ loading ? 'Generating...' : 'Refresh' }}
           </button>
         </div>
       </div>
       <div class="preview-body">
-        <div *ngIf="loading" class="preview-loading">Generating preview...</div>
-        <div *ngIf="error && !loading" class="preview-unavailable">
+        <div *ngIf="loading" class="preview-loading" data-testid="epistola-preview-loading">
+          Generating preview...
+        </div>
+        <div
+          *ngIf="error && !loading"
+          class="preview-unavailable"
+          data-testid="epistola-preview-error"
+        >
           <i class="mdi mdi-information-outline"></i>
           {{ error }}
         </div>
@@ -3973,6 +4216,7 @@ class EpistolaDocumentPreviewComponent {
           [data]="previewUrl"
           type="application/pdf"
           class="preview-pdf"
+          data-testid="epistola-preview-pdf"
         >
           PDF preview is not supported in this browser.
         </object>
@@ -3984,7 +4228,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             type: Component,
             args: [{ standalone: true, imports: [CommonModule], selector: 'epistola-document-preview-component', changeDetection: ChangeDetectionStrategy.OnPush, template: `
     <!-- Design-time view: show configuration summary when no runtime context -->
-    <div *ngIf="designMode" class="epistola-preview-panel">
+    <div *ngIf="designMode" class="epistola-preview-panel" data-testid="epistola-preview-design">
       <div class="preview-header">
         <span>{{ label || 'Document Preview' }}</span>
       </div>
@@ -4006,7 +4250,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
     </div>
 
     <!-- Runtime view: actual preview -->
-    <div *ngIf="!designMode" class="epistola-preview-panel">
+    <div *ngIf="!designMode" class="epistola-preview-panel" data-testid="epistola-preview-runtime">
       <div class="preview-header">
         <span>{{ label || 'Document Preview' }}</span>
         <div class="preview-controls">
@@ -4017,20 +4261,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
           >
             <input
               type="checkbox"
+              data-testid="epistola-preview-autorefresh"
               [checked]="autoRefreshEnabled"
               (change)="onToggleAutoRefresh($event)"
             />
             Auto-refresh
           </label>
-          <button type="button" class="preview-refresh" [disabled]="loading" (click)="refresh()">
+          <button
+            type="button"
+            class="preview-refresh"
+            data-testid="epistola-preview-refresh"
+            [disabled]="loading"
+            (click)="refresh()"
+          >
             <i class="mdi mdi-refresh mr-1"></i>
             {{ loading ? 'Generating...' : 'Refresh' }}
           </button>
         </div>
       </div>
       <div class="preview-body">
-        <div *ngIf="loading" class="preview-loading">Generating preview...</div>
-        <div *ngIf="error && !loading" class="preview-unavailable">
+        <div *ngIf="loading" class="preview-loading" data-testid="epistola-preview-loading">
+          Generating preview...
+        </div>
+        <div
+          *ngIf="error && !loading"
+          class="preview-unavailable"
+          data-testid="epistola-preview-error"
+        >
           <i class="mdi mdi-information-outline"></i>
           {{ error }}
         </div>
@@ -4039,6 +4296,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
           [data]="previewUrl"
           type="application/pdf"
           class="preview-pdf"
+          data-testid="epistola-preview-pdf"
         >
           PDF preview is not supported in this browser.
         </object>
@@ -4501,11 +4759,11 @@ class EpistolaAdminPageComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaAdminPageComponent, deps: [{ token: EpistolaAdminService }, { token: i2$4.ActivatedRoute }, { token: i2$4.Router }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: EpistolaAdminPageComponent, isStandalone: true, selector: "epistola-admin-page", ngImport: i0, template: "<div class=\"epistola-admin\">\n  <!-- Overview: tabs (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    <ng-template #configurationsHeading>\n      {{ 'epistolaAdminConfigurations' | pluginTranslate: 'epistola' | async }}\n      <cds-tag size=\"sm\" type=\"gray\" class=\"ms-1\">{{ cards.length }}</cds-tag>\n    </ng-template>\n\n    <ng-template #validationsHeading>\n      {{ 'epistolaAdminValidations' | pluginTranslate: 'epistola' | async }}\n      <cds-tag size=\"sm\" [type]=\"validationViolations.length > 0 ? 'red' : 'gray'\" class=\"ms-1\">\n        {{ validationViolations.length }}\n      </cds-tag>\n    </ng-template>\n\n    <ng-template #changelogHeading>\n      {{ 'epistolaAdminChangelog' | pluginTranslate: 'epistola' | async }}\n    </ng-template>\n\n    <!-- TEMPORARY (removed in 1.0.0): forms missing the task-id carrier -->\n    <ng-template #formsHeading>\n      {{ 'epistolaAdminForms' | pluginTranslate: 'epistola' | async }}\n      <cds-tag\n        *ngIf=\"formsScanLoaded\"\n        size=\"sm\"\n        [type]=\"formsAttentionCount > 0 ? 'red' : 'gray'\"\n        class=\"ms-1\"\n        >{{ formsAttentionCount }}</cds-tag\n      >\n    </ng-template>\n\n    <cds-tabs [cacheActive]=\"true\" type=\"contained\">\n      <cds-tab\n        [heading]=\"configurationsHeading\"\n        [active]=\"overviewTab === 'configurations'\"\n        (selected)=\"setOverviewTab('configurations')\"\n      >\n        <div *ngIf=\"loading\" class=\"text-muted mt-3\">\n          {{ 'epistolaAdminLoading' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <div *ngIf=\"!loading && cards.length === 0\" class=\"text-muted mt-3\">\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      </cds-tab>\n\n      <cds-tab\n        [heading]=\"validationsHeading\"\n        [active]=\"overviewTab === 'validations'\"\n        (selected)=\"setOverviewTab('validations')\"\n      >\n        <div class=\"text-muted small mt-3\">\n          <div>\n            {{ 'epistolaAdminValidationLastChecked' | pluginTranslate: 'epistola' | async }}:\n            <ng-container *ngIf=\"validationReport?.lastCheckedAt; else notYetRun\">\n              {{ validationReport?.lastCheckedAt | date: 'medium' }}\n            </ng-container>\n            <ng-template #notYetRun>\n              {{ 'epistolaAdminValidationNotYetRun' | pluginTranslate: 'epistola' | async }}\n            </ng-template>\n            \u00B7 {{ 'epistolaAdminValidationAutoRefresh' | pluginTranslate: 'epistola' | async }}\n            {{ refreshIntervalMinutes }} min.\n          </div>\n          <div>\n            {{ 'epistolaAdminValidationLatestVersionNote' | pluginTranslate: 'epistola' | async }}\n          </div>\n        </div>\n\n        <div *ngIf=\"validationViolations.length === 0\" class=\"text-muted mt-3 mb-3\">\n          {{ 'epistolaAdminNoValidations' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <div *ngIf=\"validationViolations.length > 0\" class=\"mt-3\">\n          <p class=\"text-muted mb-3\">\n            {{ 'epistolaAdminValidationWarningBody' | pluginTranslate: 'epistola' | async }}\n          </p>\n          <table class=\"table table-striped\">\n            <thead>\n              <tr>\n                <th>{{ 'epistolaAdminProcess' | pluginTranslate: 'epistola' | async }}</th>\n                <th>{{ 'epistolaAdminActivity' | pluginTranslate: 'epistola' | async }}</th>\n                <th>{{ 'epistolaAdminValidationCode' | pluginTranslate: 'epistola' | async }}</th>\n                <th>\n                  {{ 'epistolaAdminValidationMessage' | pluginTranslate: 'epistola' | async }}\n                </th>\n              </tr>\n            </thead>\n            <tbody>\n              <tr *ngFor=\"let v of validationViolations\">\n                <td>\n                  {{ v.processDefinitionName || v.processDefinitionKey }}\n                  <div *ngIf=\"v.processDefinitionName\" class=\"text-muted small\">\n                    <code>{{ v.processDefinitionKey }}</code>\n                  </div>\n                </td>\n                <td>\n                  <code>{{ v.activityId }}</code>\n                </td>\n                <td>\n                  <cds-tag size=\"sm\" type=\"red\">{{ v.code }}</cds-tag>\n                </td>\n                <td>{{ v.message }}</td>\n              </tr>\n            </tbody>\n          </table>\n        </div>\n      </cds-tab>\n\n      <cds-tab\n        [heading]=\"changelogHeading\"\n        [active]=\"overviewTab === 'changelog'\"\n        (selected)=\"setOverviewTab('changelog')\"\n      >\n        <div class=\"d-flex align-items-center mt-3 mb-3\">\n          <span class=\"text-muted me-2\">{{\n            'epistolaAdminRunningVersion' | pluginTranslate: 'epistola' | async\n          }}</span>\n          <cds-tag size=\"sm\" type=\"blue\">v{{ pluginVersion || '\u2014' }}</cds-tag>\n        </div>\n\n        <div *ngIf=\"changelogLoading\" class=\"text-muted mb-3\">\n          {{ 'epistolaAdminLoading' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <div\n          *ngIf=\"!changelogLoading && changelog && changelog.length === 0\"\n          class=\"text-muted mb-3\"\n        >\n          {{ 'epistolaAdminNoChangelog' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <div\n          *ngIf=\"!changelogLoading && changelog && changelog.length > 0\"\n          class=\"epistola-changelog\"\n        >\n          <section *ngFor=\"let release of changelog\" class=\"changelog-release\">\n            <div class=\"changelog-release__header\">\n              <cds-tag size=\"sm\" type=\"purple\">{{ release.version }}</cds-tag>\n              <span *ngIf=\"release.date\" class=\"text-muted ms-2\">{{ release.date }}</span>\n            </div>\n            <div *ngFor=\"let section of release.sections\" class=\"changelog-section\">\n              <h6 class=\"changelog-section__title\">{{ section.title }}</h6>\n              <ul class=\"changelog-section__items\">\n                <li *ngFor=\"let item of section.items\">{{ item }}</li>\n              </ul>\n            </div>\n          </section>\n        </div>\n      </cds-tab>\n\n      <!-- TEMPORARY (removed in 1.0.0): forms missing the task-id carrier -->\n      <cds-tab\n        [heading]=\"formsHeading\"\n        [active]=\"overviewTab === 'forms'\"\n        (selected)=\"setOverviewTab('forms')\"\n      >\n        <p class=\"text-muted mt-3 mb-3\">\n          {{ 'epistolaAdminFormsIntro' | pluginTranslate: 'epistola' | async }}\n        </p>\n\n        <div *ngIf=\"formIssuesLoading\" class=\"text-muted mb-3\">\n          {{ 'epistolaAdminLoading' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <div\n          *ngIf=\"!formIssuesLoading && formIssues && formIssues.length === 0\"\n          class=\"text-muted mb-3\"\n        >\n          {{ 'epistolaAdminNoFormIssues' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <div *ngIf=\"!formIssuesLoading && formIssues && formIssues.length > 0\">\n          <div class=\"mb-2\">\n            <button\n              class=\"btn btn-sm btn-primary\"\n              (click)=\"repairAllForms()\"\n              [disabled]=\"repairingAll\"\n            >\n              {{\n                (repairingAll ? 'epistolaAdminRepairing' : 'epistolaAdminRepairAll')\n                  | pluginTranslate: 'epistola'\n                  | async\n              }}\n            </button>\n            <span\n              *ngIf=\"formFeedback && formFeedback.formId === 'all'\"\n              class=\"small ms-2\"\n              [class.text-success]=\"formFeedback.type === 'success'\"\n              [class.text-danger]=\"formFeedback.type === 'error'\"\n              >{{ formFeedback.message }}</span\n            >\n          </div>\n\n          <table class=\"table table-striped\">\n            <thead>\n              <tr>\n                <th>{{ 'epistolaAdminFormName' | pluginTranslate: 'epistola' | async }}</th>\n                <th>{{ 'epistolaAdminFormMissing' | pluginTranslate: 'epistola' | async }}</th>\n                <th></th>\n              </tr>\n            </thead>\n            <tbody>\n              <tr *ngFor=\"let issue of formIssues\">\n                <td>\n                  <code>{{ issue.name }}</code>\n                  <cds-tag\n                    *ngIf=\"issue.readOnly\"\n                    size=\"sm\"\n                    type=\"warm-gray\"\n                    class=\"ms-1\"\n                    [title]=\"'epistolaAdminFormReadOnlyHint' | pluginTranslate: 'epistola' | async\"\n                    >{{\n                      'epistolaAdminFormReadOnly' | pluginTranslate: 'epistola' | async\n                    }}</cds-tag\n                  >\n                </td>\n                <td>{{ issue.missingComponents }}</td>\n                <td class=\"text-end\">\n                  <button\n                    class=\"btn btn-sm btn-outline-primary\"\n                    (click)=\"repairForm(issue)\"\n                    [disabled]=\"isRepairingForm(issue)\"\n                    [title]=\"'epistolaAdminRepairTooltip' | pluginTranslate: 'epistola' | async\"\n                  >\n                    {{\n                      (isRepairingForm(issue) ? 'epistolaAdminRepairing' : 'epistolaAdminRepair')\n                        | pluginTranslate: 'epistola'\n                        | async\n                    }}\n                  </button>\n                  <div\n                    *ngIf=\"formFeedback && formFeedback.formId === issue.formId\"\n                    class=\"small mt-1\"\n                    [class.text-success]=\"formFeedback.type === 'success'\"\n                    [class.text-danger]=\"formFeedback.type === 'error'\"\n                  >\n                    {{ formFeedback.message }}\n                  </div>\n                </td>\n              </tr>\n            </tbody>\n          </table>\n        </div>\n\n        <!-- TEMPORARY: forms still using the legacy override-mapping object format -->\n        <hr class=\"my-4\" />\n        <h5 class=\"mb-1\">\n          {{ 'epistolaAdminLegacyOverrideTitle' | pluginTranslate: 'epistola' | async }}\n        </h5>\n        <p class=\"text-muted mb-3\">\n          {{ 'epistolaAdminLegacyOverrideIntro' | pluginTranslate: 'epistola' | async }}\n        </p>\n\n        <div *ngIf=\"legacyOverrideLoading\" class=\"text-muted mb-3\">\n          {{ 'epistolaAdminLoading' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <div\n          *ngIf=\"!legacyOverrideLoading && legacyOverrideForms && legacyOverrideForms.length === 0\"\n          class=\"text-muted mb-3\"\n        >\n          {{ 'epistolaAdminNoLegacyOverride' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <table\n          *ngIf=\"!legacyOverrideLoading && legacyOverrideForms && legacyOverrideForms.length > 0\"\n          class=\"table table-striped\"\n        >\n          <thead>\n            <tr>\n              <th>{{ 'epistolaAdminFormName' | pluginTranslate: 'epistola' | async }}</th>\n              <th>\n                {{ 'epistolaAdminLegacyOverrideComponents' | pluginTranslate: 'epistola' | async }}\n              </th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr *ngFor=\"let form of legacyOverrideForms\">\n              <td>\n                <code>{{ form.name }}</code>\n                <cds-tag\n                  *ngIf=\"form.readOnly\"\n                  size=\"sm\"\n                  type=\"warm-gray\"\n                  class=\"ms-1\"\n                  [title]=\"'epistolaAdminFormReadOnlyHint' | pluginTranslate: 'epistola' | async\"\n                  >{{ 'epistolaAdminFormReadOnly' | pluginTranslate: 'epistola' | async }}</cds-tag\n                >\n              </td>\n              <td>{{ form.legacyComponents }}</td>\n            </tr>\n          </tbody>\n        </table>\n      </cds-tab>\n    </cds-tabs>\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    <ng-template #catalogsHeading>\n      {{ 'epistolaAdminCatalogs' | pluginTranslate: 'epistola' | async }}\n      <cds-tag size=\"sm\" type=\"gray\" class=\"ms-1\">{{ catalogs.length }}</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>{{ 'epistolaAdminStatus' | pluginTranslate: 'epistola' | async }}</th>\n              <th>{{ 'epistolaAdminRequestId' | pluginTranslate: 'epistola' | async }}</th>\n              <th></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                <cds-tag\n                  *ngIf=\"job.status === 'UNWIRED'; else waitingTag\"\n                  size=\"sm\"\n                  type=\"red\"\n                  [title]=\"'epistolaAdminUnwiredTooltip' | pluginTranslate: 'epistola' | async\"\n                >\n                  {{ 'epistolaAdminStatusUnwired' | pluginTranslate: 'epistola' | async }}\n                </cds-tag>\n                <ng-template #waitingTag>\n                  <cds-tag size=\"sm\" type=\"blue\">\n                    {{ 'epistolaAdminStatusWaiting' | pluginTranslate: 'epistola' | async }}\n                  </cds-tag>\n                </ng-template>\n              </td>\n              <td>\n                <code *ngIf=\"job.status !== 'UNWIRED'\">{{ job.requestId }}</code>\n                <span *ngIf=\"job.status === 'UNWIRED'\" class=\"text-muted\">\u2014</span>\n              </td>\n              <td class=\"text-end\">\n                <button\n                  *ngIf=\"job.status !== 'UNWIRED'\"\n                  class=\"btn btn-sm btn-outline-primary\"\n                  (click)=\"reconcilePending(job)\"\n                  [disabled]=\"isReconciling(job)\"\n                  [title]=\"'epistolaAdminReconcileTooltip' | pluginTranslate: 'epistola' | async\"\n                >\n                  <span *ngIf=\"!isReconciling(job)\">\n                    {{ 'epistolaAdminReconcile' | pluginTranslate: 'epistola' | async }}\n                  </span>\n                  <span *ngIf=\"isReconciling(job)\">\n                    {{ 'epistolaAdminReconciling' | pluginTranslate: 'epistola' | async }}\n                  </span>\n                </button>\n                <span\n                  *ngIf=\"job.status === 'UNWIRED'\"\n                  class=\"text-muted small\"\n                  [title]=\"'epistolaAdminUnwiredTooltip' | pluginTranslate: 'epistola' | async\"\n                >\n                  {{ 'epistolaAdminUnwiredHint' | pluginTranslate: 'epistola' | async }}\n                </span>\n                <div\n                  *ngIf=\"reconcileFeedback && reconcileFeedback.executionId === job.executionId\"\n                  class=\"reconcile-feedback small mt-1\"\n                  [class.text-success]=\"reconcileFeedback.type === 'success'\"\n                  [class.text-warning]=\"reconcileFeedback.type === 'pending'\"\n                  [class.text-danger]=\"reconcileFeedback.type === 'error'\"\n                >\n                  {{ reconcileFeedback.message }}\n                </div>\n              </td>\n            </tr>\n          </tbody>\n        </table>\n      </cds-tab>\n\n      <cds-tab\n        [heading]=\"catalogsHeading\"\n        [active]=\"activeTab === 'catalogs'\"\n        (selected)=\"setActiveTab('catalogs')\"\n      >\n        <p class=\"text-muted mt-3 mb-3\">\n          {{ 'epistolaAdminCatalogsIntro' | pluginTranslate: 'epistola' | async }}\n        </p>\n\n        <div *ngIf=\"catalogsLoading\" class=\"text-muted mb-3\">\n          {{ 'epistolaAdminLoading' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <div *ngIf=\"!catalogsLoading && catalogs.length === 0\" class=\"text-muted mb-3\">\n          {{ 'epistolaAdminNoCatalogs' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <table *ngIf=\"!catalogsLoading && catalogs.length > 0\" class=\"table table-striped\">\n          <thead>\n            <tr>\n              <th>{{ 'epistolaAdminCatalogSlug' | pluginTranslate: 'epistola' | async }}</th>\n              <th>{{ 'epistolaAdminCatalogVersion' | pluginTranslate: 'epistola' | async }}</th>\n              <th>{{ 'epistolaAdminCatalogStatus' | pluginTranslate: 'epistola' | async }}</th>\n              <th></th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr *ngFor=\"let catalog of catalogs\">\n              <td>\n                <code>{{ catalog.slug }}</code>\n              </td>\n              <td>{{ catalog.version }}</td>\n              <td>\n                <cds-tag *ngIf=\"catalog.status === 'IN_EPISTOLA'\" size=\"sm\" type=\"green\">\n                  {{ 'epistolaAdminCatalogInEpistola' | pluginTranslate: 'epistola' | async }}\n                </cds-tag>\n                <cds-tag *ngIf=\"catalog.status === 'NOT_IN_EPISTOLA'\" size=\"sm\" type=\"red\">\n                  {{ 'epistolaAdminCatalogNotInEpistola' | pluginTranslate: 'epistola' | async }}\n                </cds-tag>\n                <cds-tag *ngIf=\"catalog.status === 'UNKNOWN'\" size=\"sm\" type=\"gray\">\n                  {{ 'epistolaAdminCatalogStatusUnknown' | pluginTranslate: 'epistola' | async }}\n                </cds-tag>\n              </td>\n              <td class=\"text-end\">\n                <button\n                  class=\"btn btn-sm btn-outline-primary\"\n                  (click)=\"redeployCatalog(catalog)\"\n                  [disabled]=\"isRedeploying(catalog)\"\n                  [title]=\"'epistolaAdminRedeployTooltip' | pluginTranslate: 'epistola' | async\"\n                >\n                  <span *ngIf=\"!isRedeploying(catalog)\">\n                    {{ 'epistolaAdminRedeploy' | pluginTranslate: 'epistola' | async }}\n                  </span>\n                  <span *ngIf=\"isRedeploying(catalog)\">\n                    {{ 'epistolaAdminRedeploying' | pluginTranslate: 'epistola' | async }}\n                  </span>\n                </button>\n                <div\n                  *ngIf=\"catalogFeedback && catalogFeedback.slug === catalog.slug\"\n                  class=\"reconcile-feedback small mt-1\"\n                  [class.text-success]=\"catalogFeedback.type === 'success'\"\n                  [class.text-danger]=\"catalogFeedback.type === 'error'\"\n                >\n                  {{ catalogFeedback.message }}\n                </div>\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}.epistola-admin .epistola-changelog{max-height:60vh;overflow:auto;padding:.5rem 1rem;border:1px solid #dee2e6;border-radius:4px}.epistola-admin .epistola-changelog .changelog-release{padding:.75rem 0}.epistola-admin .epistola-changelog .changelog-release+.changelog-release{border-top:1px solid #eee}.epistola-admin .epistola-changelog .changelog-release__header{display:flex;align-items:center;margin-bottom:.5rem}.epistola-admin .epistola-changelog .changelog-section{margin:.25rem 0 .75rem}.epistola-admin .epistola-changelog .changelog-section__title{font-size:.8125rem;font-weight:600;text-transform:uppercase;letter-spacing:.02em;color:#6f6f6f;margin-bottom:.25rem}.epistola-admin .epistola-changelog .changelog-section__items{margin:0;padding-left:1.25rem;font-size:.8125rem;line-height:1.5}.epistola-admin .epistola-changelog .changelog-section__items li{margin-bottom:.25rem;word-break:break-word}\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: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2$4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: PluginTranslatePipeModule }, { kind: "pipe", type: i2$1.PluginTranslatePipe, name: "pluginTranslate" }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: i5.Tabs, selector: "cds-tabs, ibm-tabs", inputs: ["position", "cacheActive", "followFocus", "isNavigation", "ariaLabel", "ariaLabelledby", "type", "theme", "skeleton"] }, { kind: "component", type: i5.Tab, selector: "cds-tab, ibm-tab", inputs: ["heading", "title", "context", "active", "disabled", "tabIndex", "id", "cacheActive", "tabContent", "templateContext"], outputs: ["selected"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i6.Tag, selector: "cds-tag, ibm-tag", inputs: ["type", "size", "class", "skeleton"] }] });
+    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\" data-testid=\"epistola-admin\">\n  <!-- Overview: tabs (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\n        class=\"btn btn-outline-primary btn-sm\"\n        data-testid=\"epistola-admin-refresh\"\n        (click)=\"refresh()\"\n        [disabled]=\"loading\"\n      >\n        {{ 'epistolaAdminRefresh' | pluginTranslate: 'epistola' | async }}\n      </button>\n    </div>\n\n    <ng-template #configurationsHeading>\n      {{ 'epistolaAdminConfigurations' | pluginTranslate: 'epistola' | async }}\n      <cds-tag size=\"sm\" type=\"gray\" class=\"ms-1\">{{ cards.length }}</cds-tag>\n    </ng-template>\n\n    <ng-template #validationsHeading>\n      {{ 'epistolaAdminValidations' | pluginTranslate: 'epistola' | async }}\n      <cds-tag size=\"sm\" [type]=\"validationViolations.length > 0 ? 'red' : 'gray'\" class=\"ms-1\">\n        {{ validationViolations.length }}\n      </cds-tag>\n    </ng-template>\n\n    <ng-template #changelogHeading>\n      {{ 'epistolaAdminChangelog' | pluginTranslate: 'epistola' | async }}\n    </ng-template>\n\n    <!-- TEMPORARY (removed in 1.0.0): forms missing the task-id carrier -->\n    <ng-template #formsHeading>\n      {{ 'epistolaAdminForms' | pluginTranslate: 'epistola' | async }}\n      <cds-tag\n        *ngIf=\"formsScanLoaded\"\n        size=\"sm\"\n        [type]=\"formsAttentionCount > 0 ? 'red' : 'gray'\"\n        class=\"ms-1\"\n        >{{ formsAttentionCount }}</cds-tag\n      >\n    </ng-template>\n\n    <cds-tabs [cacheActive]=\"true\" type=\"contained\" data-testid=\"epistola-admin-overview-tabs\">\n      <cds-tab\n        [heading]=\"configurationsHeading\"\n        data-testid=\"epistola-admin-tab-configurations\"\n        [active]=\"overviewTab === 'configurations'\"\n        (selected)=\"setOverviewTab('configurations')\"\n      >\n        <div\n          *ngIf=\"loading\"\n          class=\"text-muted mt-3\"\n          data-testid=\"epistola-admin-configurations-loading\"\n        >\n          {{ 'epistolaAdminLoading' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <div\n          *ngIf=\"!loading && cards.length === 0\"\n          class=\"text-muted mt-3\"\n          data-testid=\"epistola-admin-configurations-empty\"\n        >\n          {{ 'epistolaAdminNoConfigurations' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <div\n          *ngIf=\"!loading && cards.length > 0\"\n          class=\"card-grid\"\n          data-testid=\"epistola-admin-card-grid\"\n        >\n          <div\n            *ngFor=\"let card of cards\"\n            class=\"config-card\"\n            [attr.data-testid]=\"'epistola-admin-config-card-' + card.tenantId\"\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      </cds-tab>\n\n      <cds-tab\n        [heading]=\"validationsHeading\"\n        data-testid=\"epistola-admin-tab-validations\"\n        [active]=\"overviewTab === 'validations'\"\n        (selected)=\"setOverviewTab('validations')\"\n      >\n        <div class=\"text-muted small mt-3\">\n          <div>\n            {{ 'epistolaAdminValidationLastChecked' | pluginTranslate: 'epistola' | async }}:\n            <ng-container *ngIf=\"validationReport?.lastCheckedAt; else notYetRun\">\n              {{ validationReport?.lastCheckedAt | date: 'medium' }}\n            </ng-container>\n            <ng-template #notYetRun>\n              {{ 'epistolaAdminValidationNotYetRun' | pluginTranslate: 'epistola' | async }}\n            </ng-template>\n            \u00B7 {{ 'epistolaAdminValidationAutoRefresh' | pluginTranslate: 'epistola' | async }}\n            {{ refreshIntervalMinutes }} min.\n          </div>\n          <div>\n            {{ 'epistolaAdminValidationLatestVersionNote' | pluginTranslate: 'epistola' | async }}\n          </div>\n        </div>\n\n        <div *ngIf=\"validationViolations.length === 0\" class=\"text-muted mt-3 mb-3\">\n          {{ 'epistolaAdminNoValidations' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <div *ngIf=\"validationViolations.length > 0\" class=\"mt-3\">\n          <p class=\"text-muted mb-3\">\n            {{ 'epistolaAdminValidationWarningBody' | pluginTranslate: 'epistola' | async }}\n          </p>\n          <table class=\"table table-striped\" data-testid=\"epistola-admin-validations-table\">\n            <thead>\n              <tr>\n                <th>{{ 'epistolaAdminProcess' | pluginTranslate: 'epistola' | async }}</th>\n                <th>{{ 'epistolaAdminActivity' | pluginTranslate: 'epistola' | async }}</th>\n                <th>{{ 'epistolaAdminValidationCode' | pluginTranslate: 'epistola' | async }}</th>\n                <th>\n                  {{ 'epistolaAdminValidationMessage' | pluginTranslate: 'epistola' | async }}\n                </th>\n              </tr>\n            </thead>\n            <tbody>\n              <tr\n                *ngFor=\"let v of validationViolations; let i = index\"\n                [attr.data-testid]=\"'epistola-admin-validation-row-' + i\"\n              >\n                <td>\n                  {{ v.processDefinitionName || v.processDefinitionKey }}\n                  <div *ngIf=\"v.processDefinitionName\" class=\"text-muted small\">\n                    <code>{{ v.processDefinitionKey }}</code>\n                  </div>\n                </td>\n                <td>\n                  <code>{{ v.activityId }}</code>\n                </td>\n                <td>\n                  <cds-tag size=\"sm\" type=\"red\">{{ v.code }}</cds-tag>\n                </td>\n                <td>{{ v.message }}</td>\n              </tr>\n            </tbody>\n          </table>\n        </div>\n      </cds-tab>\n\n      <cds-tab\n        [heading]=\"changelogHeading\"\n        data-testid=\"epistola-admin-tab-changelog\"\n        [active]=\"overviewTab === 'changelog'\"\n        (selected)=\"setOverviewTab('changelog')\"\n      >\n        <div class=\"d-flex align-items-center mt-3 mb-3\">\n          <span class=\"text-muted me-2\">{{\n            'epistolaAdminRunningVersion' | pluginTranslate: 'epistola' | async\n          }}</span>\n          <cds-tag size=\"sm\" type=\"blue\">v{{ pluginVersion || '\u2014' }}</cds-tag>\n        </div>\n\n        <div *ngIf=\"changelogLoading\" class=\"text-muted mb-3\">\n          {{ 'epistolaAdminLoading' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <div\n          *ngIf=\"!changelogLoading && changelog && changelog.length === 0\"\n          class=\"text-muted mb-3\"\n        >\n          {{ 'epistolaAdminNoChangelog' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <div\n          *ngIf=\"!changelogLoading && changelog && changelog.length > 0\"\n          class=\"epistola-changelog\"\n        >\n          <section *ngFor=\"let release of changelog\" class=\"changelog-release\">\n            <div class=\"changelog-release__header\">\n              <cds-tag size=\"sm\" type=\"purple\">{{ release.version }}</cds-tag>\n              <span *ngIf=\"release.date\" class=\"text-muted ms-2\">{{ release.date }}</span>\n            </div>\n            <div *ngFor=\"let section of release.sections\" class=\"changelog-section\">\n              <h6 class=\"changelog-section__title\">{{ section.title }}</h6>\n              <ul class=\"changelog-section__items\">\n                <li *ngFor=\"let item of section.items\">{{ item }}</li>\n              </ul>\n            </div>\n          </section>\n        </div>\n      </cds-tab>\n\n      <!-- TEMPORARY (removed in 1.0.0): forms missing the task-id carrier -->\n      <cds-tab\n        [heading]=\"formsHeading\"\n        data-testid=\"epistola-admin-tab-forms\"\n        [active]=\"overviewTab === 'forms'\"\n        (selected)=\"setOverviewTab('forms')\"\n      >\n        <p class=\"text-muted mt-3 mb-3\">\n          {{ 'epistolaAdminFormsIntro' | pluginTranslate: 'epistola' | async }}\n        </p>\n\n        <div *ngIf=\"formIssuesLoading\" class=\"text-muted mb-3\">\n          {{ 'epistolaAdminLoading' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <div\n          *ngIf=\"!formIssuesLoading && formIssues && formIssues.length === 0\"\n          class=\"text-muted mb-3\"\n        >\n          {{ 'epistolaAdminNoFormIssues' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <div *ngIf=\"!formIssuesLoading && formIssues && formIssues.length > 0\">\n          <div class=\"mb-2\">\n            <button\n              class=\"btn btn-sm btn-primary\"\n              data-testid=\"epistola-admin-repair-all\"\n              (click)=\"repairAllForms()\"\n              [disabled]=\"repairingAll\"\n            >\n              {{\n                (repairingAll ? 'epistolaAdminRepairing' : 'epistolaAdminRepairAll')\n                  | pluginTranslate: 'epistola'\n                  | async\n              }}\n            </button>\n            <span\n              *ngIf=\"formFeedback && formFeedback.formId === 'all'\"\n              class=\"small ms-2\"\n              [class.text-success]=\"formFeedback.type === 'success'\"\n              [class.text-danger]=\"formFeedback.type === 'error'\"\n              >{{ formFeedback.message }}</span\n            >\n          </div>\n\n          <table class=\"table table-striped\">\n            <thead>\n              <tr>\n                <th>{{ 'epistolaAdminFormName' | pluginTranslate: 'epistola' | async }}</th>\n                <th>{{ 'epistolaAdminFormMissing' | pluginTranslate: 'epistola' | async }}</th>\n                <th></th>\n              </tr>\n            </thead>\n            <tbody>\n              <tr\n                *ngFor=\"let issue of formIssues\"\n                [attr.data-testid]=\"'epistola-admin-form-issue-' + issue.formId\"\n              >\n                <td>\n                  <code>{{ issue.name }}</code>\n                  <cds-tag\n                    *ngIf=\"issue.readOnly\"\n                    size=\"sm\"\n                    type=\"warm-gray\"\n                    class=\"ms-1\"\n                    [title]=\"'epistolaAdminFormReadOnlyHint' | pluginTranslate: 'epistola' | async\"\n                    >{{\n                      'epistolaAdminFormReadOnly' | pluginTranslate: 'epistola' | async\n                    }}</cds-tag\n                  >\n                </td>\n                <td>{{ issue.missingComponents }}</td>\n                <td class=\"text-end\">\n                  <button\n                    class=\"btn btn-sm btn-outline-primary\"\n                    [attr.data-testid]=\"'epistola-admin-repair-form-' + issue.formId\"\n                    (click)=\"repairForm(issue)\"\n                    [disabled]=\"isRepairingForm(issue)\"\n                    [title]=\"'epistolaAdminRepairTooltip' | pluginTranslate: 'epistola' | async\"\n                  >\n                    {{\n                      (isRepairingForm(issue) ? 'epistolaAdminRepairing' : 'epistolaAdminRepair')\n                        | pluginTranslate: 'epistola'\n                        | async\n                    }}\n                  </button>\n                  <div\n                    *ngIf=\"formFeedback && formFeedback.formId === issue.formId\"\n                    class=\"small mt-1\"\n                    [class.text-success]=\"formFeedback.type === 'success'\"\n                    [class.text-danger]=\"formFeedback.type === 'error'\"\n                  >\n                    {{ formFeedback.message }}\n                  </div>\n                </td>\n              </tr>\n            </tbody>\n          </table>\n        </div>\n\n        <!-- TEMPORARY: forms still using the legacy override-mapping object format -->\n        <hr class=\"my-4\" />\n        <h5 class=\"mb-1\">\n          {{ 'epistolaAdminLegacyOverrideTitle' | pluginTranslate: 'epistola' | async }}\n        </h5>\n        <p class=\"text-muted mb-3\">\n          {{ 'epistolaAdminLegacyOverrideIntro' | pluginTranslate: 'epistola' | async }}\n        </p>\n\n        <div *ngIf=\"legacyOverrideLoading\" class=\"text-muted mb-3\">\n          {{ 'epistolaAdminLoading' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <div\n          *ngIf=\"!legacyOverrideLoading && legacyOverrideForms && legacyOverrideForms.length === 0\"\n          class=\"text-muted mb-3\"\n        >\n          {{ 'epistolaAdminNoLegacyOverride' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <table\n          *ngIf=\"!legacyOverrideLoading && legacyOverrideForms && legacyOverrideForms.length > 0\"\n          class=\"table table-striped\"\n        >\n          <thead>\n            <tr>\n              <th>{{ 'epistolaAdminFormName' | pluginTranslate: 'epistola' | async }}</th>\n              <th>\n                {{ 'epistolaAdminLegacyOverrideComponents' | pluginTranslate: 'epistola' | async }}\n              </th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr *ngFor=\"let form of legacyOverrideForms\">\n              <td>\n                <code>{{ form.name }}</code>\n                <cds-tag\n                  *ngIf=\"form.readOnly\"\n                  size=\"sm\"\n                  type=\"warm-gray\"\n                  class=\"ms-1\"\n                  [title]=\"'epistolaAdminFormReadOnlyHint' | pluginTranslate: 'epistola' | async\"\n                  >{{ 'epistolaAdminFormReadOnly' | pluginTranslate: 'epistola' | async }}</cds-tag\n                >\n              </td>\n              <td>{{ form.legacyComponents }}</td>\n            </tr>\n          </tbody>\n        </table>\n      </cds-tab>\n    </cds-tabs>\n  </ng-container>\n\n  <!-- Detail view: selected configuration -->\n  <ng-container *ngIf=\"selectedCard\">\n    <div class=\"detail-header mb-3\">\n      <button\n        class=\"btn btn-link btn-sm p-0\"\n        data-testid=\"epistola-admin-back\"\n        (click)=\"backToOverview()\"\n      >\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    <ng-template #catalogsHeading>\n      {{ 'epistolaAdminCatalogs' | pluginTranslate: 'epistola' | async }}\n      <cds-tag size=\"sm\" type=\"gray\" class=\"ms-1\">{{ catalogs.length }}</cds-tag>\n    </ng-template>\n\n    <cds-tabs [cacheActive]=\"true\" type=\"contained\" data-testid=\"epistola-admin-detail-tabs\">\n      <cds-tab\n        [heading]=\"actionsHeading\"\n        data-testid=\"epistola-admin-detail-tab-actions\"\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; let i = index\"\n              [attr.data-testid]=\"'epistola-admin-usage-row-' + i\"\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                  [attr.data-testid]=\"'epistola-admin-export-' + i\"\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        data-testid=\"epistola-admin-detail-tab-pending\"\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>{{ 'epistolaAdminStatus' | pluginTranslate: 'epistola' | async }}</th>\n              <th>{{ 'epistolaAdminRequestId' | pluginTranslate: 'epistola' | async }}</th>\n              <th></th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr\n              *ngFor=\"let job of selectedCard.pendingJobs\"\n              [attr.data-testid]=\"'epistola-admin-pending-row-' + job.executionId\"\n            >\n              <td>{{ job.processDefinitionName }}</td>\n              <td>{{ job.activityName }}</td>\n              <td>\n                <cds-tag\n                  *ngIf=\"job.status === 'UNWIRED'; else waitingTag\"\n                  size=\"sm\"\n                  type=\"red\"\n                  [title]=\"'epistolaAdminUnwiredTooltip' | pluginTranslate: 'epistola' | async\"\n                >\n                  {{ 'epistolaAdminStatusUnwired' | pluginTranslate: 'epistola' | async }}\n                </cds-tag>\n                <ng-template #waitingTag>\n                  <cds-tag size=\"sm\" type=\"blue\">\n                    {{ 'epistolaAdminStatusWaiting' | pluginTranslate: 'epistola' | async }}\n                  </cds-tag>\n                </ng-template>\n              </td>\n              <td>\n                <code *ngIf=\"job.status !== 'UNWIRED'\">{{ job.requestId }}</code>\n                <span *ngIf=\"job.status === 'UNWIRED'\" class=\"text-muted\">\u2014</span>\n              </td>\n              <td class=\"text-end\">\n                <button\n                  *ngIf=\"job.status !== 'UNWIRED'\"\n                  class=\"btn btn-sm btn-outline-primary\"\n                  [attr.data-testid]=\"'epistola-admin-reconcile-' + job.executionId\"\n                  (click)=\"reconcilePending(job)\"\n                  [disabled]=\"isReconciling(job)\"\n                  [title]=\"'epistolaAdminReconcileTooltip' | pluginTranslate: 'epistola' | async\"\n                >\n                  <span *ngIf=\"!isReconciling(job)\">\n                    {{ 'epistolaAdminReconcile' | pluginTranslate: 'epistola' | async }}\n                  </span>\n                  <span *ngIf=\"isReconciling(job)\">\n                    {{ 'epistolaAdminReconciling' | pluginTranslate: 'epistola' | async }}\n                  </span>\n                </button>\n                <span\n                  *ngIf=\"job.status === 'UNWIRED'\"\n                  class=\"text-muted small\"\n                  [title]=\"'epistolaAdminUnwiredTooltip' | pluginTranslate: 'epistola' | async\"\n                >\n                  {{ 'epistolaAdminUnwiredHint' | pluginTranslate: 'epistola' | async }}\n                </span>\n                <div\n                  *ngIf=\"reconcileFeedback && reconcileFeedback.executionId === job.executionId\"\n                  class=\"reconcile-feedback small mt-1\"\n                  [class.text-success]=\"reconcileFeedback.type === 'success'\"\n                  [class.text-warning]=\"reconcileFeedback.type === 'pending'\"\n                  [class.text-danger]=\"reconcileFeedback.type === 'error'\"\n                >\n                  {{ reconcileFeedback.message }}\n                </div>\n              </td>\n            </tr>\n          </tbody>\n        </table>\n      </cds-tab>\n\n      <cds-tab\n        [heading]=\"catalogsHeading\"\n        data-testid=\"epistola-admin-detail-tab-catalogs\"\n        [active]=\"activeTab === 'catalogs'\"\n        (selected)=\"setActiveTab('catalogs')\"\n      >\n        <p class=\"text-muted mt-3 mb-3\">\n          {{ 'epistolaAdminCatalogsIntro' | pluginTranslate: 'epistola' | async }}\n        </p>\n\n        <div *ngIf=\"catalogsLoading\" class=\"text-muted mb-3\">\n          {{ 'epistolaAdminLoading' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <div *ngIf=\"!catalogsLoading && catalogs.length === 0\" class=\"text-muted mb-3\">\n          {{ 'epistolaAdminNoCatalogs' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <table *ngIf=\"!catalogsLoading && catalogs.length > 0\" class=\"table table-striped\">\n          <thead>\n            <tr>\n              <th>{{ 'epistolaAdminCatalogSlug' | pluginTranslate: 'epistola' | async }}</th>\n              <th>{{ 'epistolaAdminCatalogVersion' | pluginTranslate: 'epistola' | async }}</th>\n              <th>{{ 'epistolaAdminCatalogStatus' | pluginTranslate: 'epistola' | async }}</th>\n              <th></th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr\n              *ngFor=\"let catalog of catalogs\"\n              [attr.data-testid]=\"'epistola-admin-catalog-row-' + catalog.slug\"\n            >\n              <td>\n                <code>{{ catalog.slug }}</code>\n              </td>\n              <td>{{ catalog.version }}</td>\n              <td>\n                <cds-tag *ngIf=\"catalog.status === 'IN_EPISTOLA'\" size=\"sm\" type=\"green\">\n                  {{ 'epistolaAdminCatalogInEpistola' | pluginTranslate: 'epistola' | async }}\n                </cds-tag>\n                <cds-tag *ngIf=\"catalog.status === 'NOT_IN_EPISTOLA'\" size=\"sm\" type=\"red\">\n                  {{ 'epistolaAdminCatalogNotInEpistola' | pluginTranslate: 'epistola' | async }}\n                </cds-tag>\n                <cds-tag *ngIf=\"catalog.status === 'UNKNOWN'\" size=\"sm\" type=\"gray\">\n                  {{ 'epistolaAdminCatalogStatusUnknown' | pluginTranslate: 'epistola' | async }}\n                </cds-tag>\n              </td>\n              <td class=\"text-end\">\n                <button\n                  class=\"btn btn-sm btn-outline-primary\"\n                  [attr.data-testid]=\"'epistola-admin-redeploy-' + catalog.slug\"\n                  (click)=\"redeployCatalog(catalog)\"\n                  [disabled]=\"isRedeploying(catalog)\"\n                  [title]=\"'epistolaAdminRedeployTooltip' | pluginTranslate: 'epistola' | async\"\n                >\n                  <span *ngIf=\"!isRedeploying(catalog)\">\n                    {{ 'epistolaAdminRedeploy' | pluginTranslate: 'epistola' | async }}\n                  </span>\n                  <span *ngIf=\"isRedeploying(catalog)\">\n                    {{ 'epistolaAdminRedeploying' | pluginTranslate: 'epistola' | async }}\n                  </span>\n                </button>\n                <div\n                  *ngIf=\"catalogFeedback && catalogFeedback.slug === catalog.slug\"\n                  class=\"reconcile-feedback small mt-1\"\n                  [class.text-success]=\"catalogFeedback.type === 'success'\"\n                  [class.text-danger]=\"catalogFeedback.type === 'error'\"\n                >\n                  {{ catalogFeedback.message }}\n                </div>\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}.epistola-admin .epistola-changelog{max-height:60vh;overflow:auto;padding:.5rem 1rem;border:1px solid #dee2e6;border-radius:4px}.epistola-admin .epistola-changelog .changelog-release{padding:.75rem 0}.epistola-admin .epistola-changelog .changelog-release+.changelog-release{border-top:1px solid #eee}.epistola-admin .epistola-changelog .changelog-release__header{display:flex;align-items:center;margin-bottom:.5rem}.epistola-admin .epistola-changelog .changelog-section{margin:.25rem 0 .75rem}.epistola-admin .epistola-changelog .changelog-section__title{font-size:.8125rem;font-weight:600;text-transform:uppercase;letter-spacing:.02em;color:#6f6f6f;margin-bottom:.25rem}.epistola-admin .epistola-changelog .changelog-section__items{margin:0;padding-left:1.25rem;font-size:.8125rem;line-height:1.5}.epistola-admin .epistola-changelog .changelog-section__items li{margin-bottom:.25rem;word-break:break-word}\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: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2$4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: PluginTranslatePipeModule }, { kind: "pipe", type: i2$1.PluginTranslatePipe, name: "pluginTranslate" }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: i5.Tabs, selector: "cds-tabs, ibm-tabs", inputs: ["position", "cacheActive", "followFocus", "isNavigation", "ariaLabel", "ariaLabelledby", "type", "theme", "skeleton"] }, { kind: "component", type: i5.Tab, selector: "cds-tab, ibm-tab", inputs: ["heading", "title", "context", "active", "disabled", "tabIndex", "id", "cacheActive", "tabContent", "templateContext"], outputs: ["selected"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i6.Tag, selector: "cds-tag, ibm-tag", inputs: ["type", "size", "class", "skeleton"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaAdminPageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'epistola-admin-page', standalone: true, imports: [CommonModule, RouterModule, PluginTranslatePipeModule, TabsModule, TagModule], template: "<div class=\"epistola-admin\">\n  <!-- Overview: tabs (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    <ng-template #configurationsHeading>\n      {{ 'epistolaAdminConfigurations' | pluginTranslate: 'epistola' | async }}\n      <cds-tag size=\"sm\" type=\"gray\" class=\"ms-1\">{{ cards.length }}</cds-tag>\n    </ng-template>\n\n    <ng-template #validationsHeading>\n      {{ 'epistolaAdminValidations' | pluginTranslate: 'epistola' | async }}\n      <cds-tag size=\"sm\" [type]=\"validationViolations.length > 0 ? 'red' : 'gray'\" class=\"ms-1\">\n        {{ validationViolations.length }}\n      </cds-tag>\n    </ng-template>\n\n    <ng-template #changelogHeading>\n      {{ 'epistolaAdminChangelog' | pluginTranslate: 'epistola' | async }}\n    </ng-template>\n\n    <!-- TEMPORARY (removed in 1.0.0): forms missing the task-id carrier -->\n    <ng-template #formsHeading>\n      {{ 'epistolaAdminForms' | pluginTranslate: 'epistola' | async }}\n      <cds-tag\n        *ngIf=\"formsScanLoaded\"\n        size=\"sm\"\n        [type]=\"formsAttentionCount > 0 ? 'red' : 'gray'\"\n        class=\"ms-1\"\n        >{{ formsAttentionCount }}</cds-tag\n      >\n    </ng-template>\n\n    <cds-tabs [cacheActive]=\"true\" type=\"contained\">\n      <cds-tab\n        [heading]=\"configurationsHeading\"\n        [active]=\"overviewTab === 'configurations'\"\n        (selected)=\"setOverviewTab('configurations')\"\n      >\n        <div *ngIf=\"loading\" class=\"text-muted mt-3\">\n          {{ 'epistolaAdminLoading' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <div *ngIf=\"!loading && cards.length === 0\" class=\"text-muted mt-3\">\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      </cds-tab>\n\n      <cds-tab\n        [heading]=\"validationsHeading\"\n        [active]=\"overviewTab === 'validations'\"\n        (selected)=\"setOverviewTab('validations')\"\n      >\n        <div class=\"text-muted small mt-3\">\n          <div>\n            {{ 'epistolaAdminValidationLastChecked' | pluginTranslate: 'epistola' | async }}:\n            <ng-container *ngIf=\"validationReport?.lastCheckedAt; else notYetRun\">\n              {{ validationReport?.lastCheckedAt | date: 'medium' }}\n            </ng-container>\n            <ng-template #notYetRun>\n              {{ 'epistolaAdminValidationNotYetRun' | pluginTranslate: 'epistola' | async }}\n            </ng-template>\n            \u00B7 {{ 'epistolaAdminValidationAutoRefresh' | pluginTranslate: 'epistola' | async }}\n            {{ refreshIntervalMinutes }} min.\n          </div>\n          <div>\n            {{ 'epistolaAdminValidationLatestVersionNote' | pluginTranslate: 'epistola' | async }}\n          </div>\n        </div>\n\n        <div *ngIf=\"validationViolations.length === 0\" class=\"text-muted mt-3 mb-3\">\n          {{ 'epistolaAdminNoValidations' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <div *ngIf=\"validationViolations.length > 0\" class=\"mt-3\">\n          <p class=\"text-muted mb-3\">\n            {{ 'epistolaAdminValidationWarningBody' | pluginTranslate: 'epistola' | async }}\n          </p>\n          <table class=\"table table-striped\">\n            <thead>\n              <tr>\n                <th>{{ 'epistolaAdminProcess' | pluginTranslate: 'epistola' | async }}</th>\n                <th>{{ 'epistolaAdminActivity' | pluginTranslate: 'epistola' | async }}</th>\n                <th>{{ 'epistolaAdminValidationCode' | pluginTranslate: 'epistola' | async }}</th>\n                <th>\n                  {{ 'epistolaAdminValidationMessage' | pluginTranslate: 'epistola' | async }}\n                </th>\n              </tr>\n            </thead>\n            <tbody>\n              <tr *ngFor=\"let v of validationViolations\">\n                <td>\n                  {{ v.processDefinitionName || v.processDefinitionKey }}\n                  <div *ngIf=\"v.processDefinitionName\" class=\"text-muted small\">\n                    <code>{{ v.processDefinitionKey }}</code>\n                  </div>\n                </td>\n                <td>\n                  <code>{{ v.activityId }}</code>\n                </td>\n                <td>\n                  <cds-tag size=\"sm\" type=\"red\">{{ v.code }}</cds-tag>\n                </td>\n                <td>{{ v.message }}</td>\n              </tr>\n            </tbody>\n          </table>\n        </div>\n      </cds-tab>\n\n      <cds-tab\n        [heading]=\"changelogHeading\"\n        [active]=\"overviewTab === 'changelog'\"\n        (selected)=\"setOverviewTab('changelog')\"\n      >\n        <div class=\"d-flex align-items-center mt-3 mb-3\">\n          <span class=\"text-muted me-2\">{{\n            'epistolaAdminRunningVersion' | pluginTranslate: 'epistola' | async\n          }}</span>\n          <cds-tag size=\"sm\" type=\"blue\">v{{ pluginVersion || '\u2014' }}</cds-tag>\n        </div>\n\n        <div *ngIf=\"changelogLoading\" class=\"text-muted mb-3\">\n          {{ 'epistolaAdminLoading' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <div\n          *ngIf=\"!changelogLoading && changelog && changelog.length === 0\"\n          class=\"text-muted mb-3\"\n        >\n          {{ 'epistolaAdminNoChangelog' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <div\n          *ngIf=\"!changelogLoading && changelog && changelog.length > 0\"\n          class=\"epistola-changelog\"\n        >\n          <section *ngFor=\"let release of changelog\" class=\"changelog-release\">\n            <div class=\"changelog-release__header\">\n              <cds-tag size=\"sm\" type=\"purple\">{{ release.version }}</cds-tag>\n              <span *ngIf=\"release.date\" class=\"text-muted ms-2\">{{ release.date }}</span>\n            </div>\n            <div *ngFor=\"let section of release.sections\" class=\"changelog-section\">\n              <h6 class=\"changelog-section__title\">{{ section.title }}</h6>\n              <ul class=\"changelog-section__items\">\n                <li *ngFor=\"let item of section.items\">{{ item }}</li>\n              </ul>\n            </div>\n          </section>\n        </div>\n      </cds-tab>\n\n      <!-- TEMPORARY (removed in 1.0.0): forms missing the task-id carrier -->\n      <cds-tab\n        [heading]=\"formsHeading\"\n        [active]=\"overviewTab === 'forms'\"\n        (selected)=\"setOverviewTab('forms')\"\n      >\n        <p class=\"text-muted mt-3 mb-3\">\n          {{ 'epistolaAdminFormsIntro' | pluginTranslate: 'epistola' | async }}\n        </p>\n\n        <div *ngIf=\"formIssuesLoading\" class=\"text-muted mb-3\">\n          {{ 'epistolaAdminLoading' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <div\n          *ngIf=\"!formIssuesLoading && formIssues && formIssues.length === 0\"\n          class=\"text-muted mb-3\"\n        >\n          {{ 'epistolaAdminNoFormIssues' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <div *ngIf=\"!formIssuesLoading && formIssues && formIssues.length > 0\">\n          <div class=\"mb-2\">\n            <button\n              class=\"btn btn-sm btn-primary\"\n              (click)=\"repairAllForms()\"\n              [disabled]=\"repairingAll\"\n            >\n              {{\n                (repairingAll ? 'epistolaAdminRepairing' : 'epistolaAdminRepairAll')\n                  | pluginTranslate: 'epistola'\n                  | async\n              }}\n            </button>\n            <span\n              *ngIf=\"formFeedback && formFeedback.formId === 'all'\"\n              class=\"small ms-2\"\n              [class.text-success]=\"formFeedback.type === 'success'\"\n              [class.text-danger]=\"formFeedback.type === 'error'\"\n              >{{ formFeedback.message }}</span\n            >\n          </div>\n\n          <table class=\"table table-striped\">\n            <thead>\n              <tr>\n                <th>{{ 'epistolaAdminFormName' | pluginTranslate: 'epistola' | async }}</th>\n                <th>{{ 'epistolaAdminFormMissing' | pluginTranslate: 'epistola' | async }}</th>\n                <th></th>\n              </tr>\n            </thead>\n            <tbody>\n              <tr *ngFor=\"let issue of formIssues\">\n                <td>\n                  <code>{{ issue.name }}</code>\n                  <cds-tag\n                    *ngIf=\"issue.readOnly\"\n                    size=\"sm\"\n                    type=\"warm-gray\"\n                    class=\"ms-1\"\n                    [title]=\"'epistolaAdminFormReadOnlyHint' | pluginTranslate: 'epistola' | async\"\n                    >{{\n                      'epistolaAdminFormReadOnly' | pluginTranslate: 'epistola' | async\n                    }}</cds-tag\n                  >\n                </td>\n                <td>{{ issue.missingComponents }}</td>\n                <td class=\"text-end\">\n                  <button\n                    class=\"btn btn-sm btn-outline-primary\"\n                    (click)=\"repairForm(issue)\"\n                    [disabled]=\"isRepairingForm(issue)\"\n                    [title]=\"'epistolaAdminRepairTooltip' | pluginTranslate: 'epistola' | async\"\n                  >\n                    {{\n                      (isRepairingForm(issue) ? 'epistolaAdminRepairing' : 'epistolaAdminRepair')\n                        | pluginTranslate: 'epistola'\n                        | async\n                    }}\n                  </button>\n                  <div\n                    *ngIf=\"formFeedback && formFeedback.formId === issue.formId\"\n                    class=\"small mt-1\"\n                    [class.text-success]=\"formFeedback.type === 'success'\"\n                    [class.text-danger]=\"formFeedback.type === 'error'\"\n                  >\n                    {{ formFeedback.message }}\n                  </div>\n                </td>\n              </tr>\n            </tbody>\n          </table>\n        </div>\n\n        <!-- TEMPORARY: forms still using the legacy override-mapping object format -->\n        <hr class=\"my-4\" />\n        <h5 class=\"mb-1\">\n          {{ 'epistolaAdminLegacyOverrideTitle' | pluginTranslate: 'epistola' | async }}\n        </h5>\n        <p class=\"text-muted mb-3\">\n          {{ 'epistolaAdminLegacyOverrideIntro' | pluginTranslate: 'epistola' | async }}\n        </p>\n\n        <div *ngIf=\"legacyOverrideLoading\" class=\"text-muted mb-3\">\n          {{ 'epistolaAdminLoading' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <div\n          *ngIf=\"!legacyOverrideLoading && legacyOverrideForms && legacyOverrideForms.length === 0\"\n          class=\"text-muted mb-3\"\n        >\n          {{ 'epistolaAdminNoLegacyOverride' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <table\n          *ngIf=\"!legacyOverrideLoading && legacyOverrideForms && legacyOverrideForms.length > 0\"\n          class=\"table table-striped\"\n        >\n          <thead>\n            <tr>\n              <th>{{ 'epistolaAdminFormName' | pluginTranslate: 'epistola' | async }}</th>\n              <th>\n                {{ 'epistolaAdminLegacyOverrideComponents' | pluginTranslate: 'epistola' | async }}\n              </th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr *ngFor=\"let form of legacyOverrideForms\">\n              <td>\n                <code>{{ form.name }}</code>\n                <cds-tag\n                  *ngIf=\"form.readOnly\"\n                  size=\"sm\"\n                  type=\"warm-gray\"\n                  class=\"ms-1\"\n                  [title]=\"'epistolaAdminFormReadOnlyHint' | pluginTranslate: 'epistola' | async\"\n                  >{{ 'epistolaAdminFormReadOnly' | pluginTranslate: 'epistola' | async }}</cds-tag\n                >\n              </td>\n              <td>{{ form.legacyComponents }}</td>\n            </tr>\n          </tbody>\n        </table>\n      </cds-tab>\n    </cds-tabs>\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    <ng-template #catalogsHeading>\n      {{ 'epistolaAdminCatalogs' | pluginTranslate: 'epistola' | async }}\n      <cds-tag size=\"sm\" type=\"gray\" class=\"ms-1\">{{ catalogs.length }}</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>{{ 'epistolaAdminStatus' | pluginTranslate: 'epistola' | async }}</th>\n              <th>{{ 'epistolaAdminRequestId' | pluginTranslate: 'epistola' | async }}</th>\n              <th></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                <cds-tag\n                  *ngIf=\"job.status === 'UNWIRED'; else waitingTag\"\n                  size=\"sm\"\n                  type=\"red\"\n                  [title]=\"'epistolaAdminUnwiredTooltip' | pluginTranslate: 'epistola' | async\"\n                >\n                  {{ 'epistolaAdminStatusUnwired' | pluginTranslate: 'epistola' | async }}\n                </cds-tag>\n                <ng-template #waitingTag>\n                  <cds-tag size=\"sm\" type=\"blue\">\n                    {{ 'epistolaAdminStatusWaiting' | pluginTranslate: 'epistola' | async }}\n                  </cds-tag>\n                </ng-template>\n              </td>\n              <td>\n                <code *ngIf=\"job.status !== 'UNWIRED'\">{{ job.requestId }}</code>\n                <span *ngIf=\"job.status === 'UNWIRED'\" class=\"text-muted\">\u2014</span>\n              </td>\n              <td class=\"text-end\">\n                <button\n                  *ngIf=\"job.status !== 'UNWIRED'\"\n                  class=\"btn btn-sm btn-outline-primary\"\n                  (click)=\"reconcilePending(job)\"\n                  [disabled]=\"isReconciling(job)\"\n                  [title]=\"'epistolaAdminReconcileTooltip' | pluginTranslate: 'epistola' | async\"\n                >\n                  <span *ngIf=\"!isReconciling(job)\">\n                    {{ 'epistolaAdminReconcile' | pluginTranslate: 'epistola' | async }}\n                  </span>\n                  <span *ngIf=\"isReconciling(job)\">\n                    {{ 'epistolaAdminReconciling' | pluginTranslate: 'epistola' | async }}\n                  </span>\n                </button>\n                <span\n                  *ngIf=\"job.status === 'UNWIRED'\"\n                  class=\"text-muted small\"\n                  [title]=\"'epistolaAdminUnwiredTooltip' | pluginTranslate: 'epistola' | async\"\n                >\n                  {{ 'epistolaAdminUnwiredHint' | pluginTranslate: 'epistola' | async }}\n                </span>\n                <div\n                  *ngIf=\"reconcileFeedback && reconcileFeedback.executionId === job.executionId\"\n                  class=\"reconcile-feedback small mt-1\"\n                  [class.text-success]=\"reconcileFeedback.type === 'success'\"\n                  [class.text-warning]=\"reconcileFeedback.type === 'pending'\"\n                  [class.text-danger]=\"reconcileFeedback.type === 'error'\"\n                >\n                  {{ reconcileFeedback.message }}\n                </div>\n              </td>\n            </tr>\n          </tbody>\n        </table>\n      </cds-tab>\n\n      <cds-tab\n        [heading]=\"catalogsHeading\"\n        [active]=\"activeTab === 'catalogs'\"\n        (selected)=\"setActiveTab('catalogs')\"\n      >\n        <p class=\"text-muted mt-3 mb-3\">\n          {{ 'epistolaAdminCatalogsIntro' | pluginTranslate: 'epistola' | async }}\n        </p>\n\n        <div *ngIf=\"catalogsLoading\" class=\"text-muted mb-3\">\n          {{ 'epistolaAdminLoading' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <div *ngIf=\"!catalogsLoading && catalogs.length === 0\" class=\"text-muted mb-3\">\n          {{ 'epistolaAdminNoCatalogs' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <table *ngIf=\"!catalogsLoading && catalogs.length > 0\" class=\"table table-striped\">\n          <thead>\n            <tr>\n              <th>{{ 'epistolaAdminCatalogSlug' | pluginTranslate: 'epistola' | async }}</th>\n              <th>{{ 'epistolaAdminCatalogVersion' | pluginTranslate: 'epistola' | async }}</th>\n              <th>{{ 'epistolaAdminCatalogStatus' | pluginTranslate: 'epistola' | async }}</th>\n              <th></th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr *ngFor=\"let catalog of catalogs\">\n              <td>\n                <code>{{ catalog.slug }}</code>\n              </td>\n              <td>{{ catalog.version }}</td>\n              <td>\n                <cds-tag *ngIf=\"catalog.status === 'IN_EPISTOLA'\" size=\"sm\" type=\"green\">\n                  {{ 'epistolaAdminCatalogInEpistola' | pluginTranslate: 'epistola' | async }}\n                </cds-tag>\n                <cds-tag *ngIf=\"catalog.status === 'NOT_IN_EPISTOLA'\" size=\"sm\" type=\"red\">\n                  {{ 'epistolaAdminCatalogNotInEpistola' | pluginTranslate: 'epistola' | async }}\n                </cds-tag>\n                <cds-tag *ngIf=\"catalog.status === 'UNKNOWN'\" size=\"sm\" type=\"gray\">\n                  {{ 'epistolaAdminCatalogStatusUnknown' | pluginTranslate: 'epistola' | async }}\n                </cds-tag>\n              </td>\n              <td class=\"text-end\">\n                <button\n                  class=\"btn btn-sm btn-outline-primary\"\n                  (click)=\"redeployCatalog(catalog)\"\n                  [disabled]=\"isRedeploying(catalog)\"\n                  [title]=\"'epistolaAdminRedeployTooltip' | pluginTranslate: 'epistola' | async\"\n                >\n                  <span *ngIf=\"!isRedeploying(catalog)\">\n                    {{ 'epistolaAdminRedeploy' | pluginTranslate: 'epistola' | async }}\n                  </span>\n                  <span *ngIf=\"isRedeploying(catalog)\">\n                    {{ 'epistolaAdminRedeploying' | pluginTranslate: 'epistola' | async }}\n                  </span>\n                </button>\n                <div\n                  *ngIf=\"catalogFeedback && catalogFeedback.slug === catalog.slug\"\n                  class=\"reconcile-feedback small mt-1\"\n                  [class.text-success]=\"catalogFeedback.type === 'success'\"\n                  [class.text-danger]=\"catalogFeedback.type === 'error'\"\n                >\n                  {{ catalogFeedback.message }}\n                </div>\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}.epistola-admin .epistola-changelog{max-height:60vh;overflow:auto;padding:.5rem 1rem;border:1px solid #dee2e6;border-radius:4px}.epistola-admin .epistola-changelog .changelog-release{padding:.75rem 0}.epistola-admin .epistola-changelog .changelog-release+.changelog-release{border-top:1px solid #eee}.epistola-admin .epistola-changelog .changelog-release__header{display:flex;align-items:center;margin-bottom:.5rem}.epistola-admin .epistola-changelog .changelog-section{margin:.25rem 0 .75rem}.epistola-admin .epistola-changelog .changelog-section__title{font-size:.8125rem;font-weight:600;text-transform:uppercase;letter-spacing:.02em;color:#6f6f6f;margin-bottom:.25rem}.epistola-admin .epistola-changelog .changelog-section__items{margin:0;padding-left:1.25rem;font-size:.8125rem;line-height:1.5}.epistola-admin .epistola-changelog .changelog-section__items li{margin-bottom:.25rem;word-break:break-word}\n"] }]
+            args: [{ selector: 'epistola-admin-page', standalone: true, imports: [CommonModule, RouterModule, PluginTranslatePipeModule, TabsModule, TagModule], template: "<div class=\"epistola-admin\" data-testid=\"epistola-admin\">\n  <!-- Overview: tabs (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\n        class=\"btn btn-outline-primary btn-sm\"\n        data-testid=\"epistola-admin-refresh\"\n        (click)=\"refresh()\"\n        [disabled]=\"loading\"\n      >\n        {{ 'epistolaAdminRefresh' | pluginTranslate: 'epistola' | async }}\n      </button>\n    </div>\n\n    <ng-template #configurationsHeading>\n      {{ 'epistolaAdminConfigurations' | pluginTranslate: 'epistola' | async }}\n      <cds-tag size=\"sm\" type=\"gray\" class=\"ms-1\">{{ cards.length }}</cds-tag>\n    </ng-template>\n\n    <ng-template #validationsHeading>\n      {{ 'epistolaAdminValidations' | pluginTranslate: 'epistola' | async }}\n      <cds-tag size=\"sm\" [type]=\"validationViolations.length > 0 ? 'red' : 'gray'\" class=\"ms-1\">\n        {{ validationViolations.length }}\n      </cds-tag>\n    </ng-template>\n\n    <ng-template #changelogHeading>\n      {{ 'epistolaAdminChangelog' | pluginTranslate: 'epistola' | async }}\n    </ng-template>\n\n    <!-- TEMPORARY (removed in 1.0.0): forms missing the task-id carrier -->\n    <ng-template #formsHeading>\n      {{ 'epistolaAdminForms' | pluginTranslate: 'epistola' | async }}\n      <cds-tag\n        *ngIf=\"formsScanLoaded\"\n        size=\"sm\"\n        [type]=\"formsAttentionCount > 0 ? 'red' : 'gray'\"\n        class=\"ms-1\"\n        >{{ formsAttentionCount }}</cds-tag\n      >\n    </ng-template>\n\n    <cds-tabs [cacheActive]=\"true\" type=\"contained\" data-testid=\"epistola-admin-overview-tabs\">\n      <cds-tab\n        [heading]=\"configurationsHeading\"\n        data-testid=\"epistola-admin-tab-configurations\"\n        [active]=\"overviewTab === 'configurations'\"\n        (selected)=\"setOverviewTab('configurations')\"\n      >\n        <div\n          *ngIf=\"loading\"\n          class=\"text-muted mt-3\"\n          data-testid=\"epistola-admin-configurations-loading\"\n        >\n          {{ 'epistolaAdminLoading' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <div\n          *ngIf=\"!loading && cards.length === 0\"\n          class=\"text-muted mt-3\"\n          data-testid=\"epistola-admin-configurations-empty\"\n        >\n          {{ 'epistolaAdminNoConfigurations' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <div\n          *ngIf=\"!loading && cards.length > 0\"\n          class=\"card-grid\"\n          data-testid=\"epistola-admin-card-grid\"\n        >\n          <div\n            *ngFor=\"let card of cards\"\n            class=\"config-card\"\n            [attr.data-testid]=\"'epistola-admin-config-card-' + card.tenantId\"\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      </cds-tab>\n\n      <cds-tab\n        [heading]=\"validationsHeading\"\n        data-testid=\"epistola-admin-tab-validations\"\n        [active]=\"overviewTab === 'validations'\"\n        (selected)=\"setOverviewTab('validations')\"\n      >\n        <div class=\"text-muted small mt-3\">\n          <div>\n            {{ 'epistolaAdminValidationLastChecked' | pluginTranslate: 'epistola' | async }}:\n            <ng-container *ngIf=\"validationReport?.lastCheckedAt; else notYetRun\">\n              {{ validationReport?.lastCheckedAt | date: 'medium' }}\n            </ng-container>\n            <ng-template #notYetRun>\n              {{ 'epistolaAdminValidationNotYetRun' | pluginTranslate: 'epistola' | async }}\n            </ng-template>\n            \u00B7 {{ 'epistolaAdminValidationAutoRefresh' | pluginTranslate: 'epistola' | async }}\n            {{ refreshIntervalMinutes }} min.\n          </div>\n          <div>\n            {{ 'epistolaAdminValidationLatestVersionNote' | pluginTranslate: 'epistola' | async }}\n          </div>\n        </div>\n\n        <div *ngIf=\"validationViolations.length === 0\" class=\"text-muted mt-3 mb-3\">\n          {{ 'epistolaAdminNoValidations' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <div *ngIf=\"validationViolations.length > 0\" class=\"mt-3\">\n          <p class=\"text-muted mb-3\">\n            {{ 'epistolaAdminValidationWarningBody' | pluginTranslate: 'epistola' | async }}\n          </p>\n          <table class=\"table table-striped\" data-testid=\"epistola-admin-validations-table\">\n            <thead>\n              <tr>\n                <th>{{ 'epistolaAdminProcess' | pluginTranslate: 'epistola' | async }}</th>\n                <th>{{ 'epistolaAdminActivity' | pluginTranslate: 'epistola' | async }}</th>\n                <th>{{ 'epistolaAdminValidationCode' | pluginTranslate: 'epistola' | async }}</th>\n                <th>\n                  {{ 'epistolaAdminValidationMessage' | pluginTranslate: 'epistola' | async }}\n                </th>\n              </tr>\n            </thead>\n            <tbody>\n              <tr\n                *ngFor=\"let v of validationViolations; let i = index\"\n                [attr.data-testid]=\"'epistola-admin-validation-row-' + i\"\n              >\n                <td>\n                  {{ v.processDefinitionName || v.processDefinitionKey }}\n                  <div *ngIf=\"v.processDefinitionName\" class=\"text-muted small\">\n                    <code>{{ v.processDefinitionKey }}</code>\n                  </div>\n                </td>\n                <td>\n                  <code>{{ v.activityId }}</code>\n                </td>\n                <td>\n                  <cds-tag size=\"sm\" type=\"red\">{{ v.code }}</cds-tag>\n                </td>\n                <td>{{ v.message }}</td>\n              </tr>\n            </tbody>\n          </table>\n        </div>\n      </cds-tab>\n\n      <cds-tab\n        [heading]=\"changelogHeading\"\n        data-testid=\"epistola-admin-tab-changelog\"\n        [active]=\"overviewTab === 'changelog'\"\n        (selected)=\"setOverviewTab('changelog')\"\n      >\n        <div class=\"d-flex align-items-center mt-3 mb-3\">\n          <span class=\"text-muted me-2\">{{\n            'epistolaAdminRunningVersion' | pluginTranslate: 'epistola' | async\n          }}</span>\n          <cds-tag size=\"sm\" type=\"blue\">v{{ pluginVersion || '\u2014' }}</cds-tag>\n        </div>\n\n        <div *ngIf=\"changelogLoading\" class=\"text-muted mb-3\">\n          {{ 'epistolaAdminLoading' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <div\n          *ngIf=\"!changelogLoading && changelog && changelog.length === 0\"\n          class=\"text-muted mb-3\"\n        >\n          {{ 'epistolaAdminNoChangelog' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <div\n          *ngIf=\"!changelogLoading && changelog && changelog.length > 0\"\n          class=\"epistola-changelog\"\n        >\n          <section *ngFor=\"let release of changelog\" class=\"changelog-release\">\n            <div class=\"changelog-release__header\">\n              <cds-tag size=\"sm\" type=\"purple\">{{ release.version }}</cds-tag>\n              <span *ngIf=\"release.date\" class=\"text-muted ms-2\">{{ release.date }}</span>\n            </div>\n            <div *ngFor=\"let section of release.sections\" class=\"changelog-section\">\n              <h6 class=\"changelog-section__title\">{{ section.title }}</h6>\n              <ul class=\"changelog-section__items\">\n                <li *ngFor=\"let item of section.items\">{{ item }}</li>\n              </ul>\n            </div>\n          </section>\n        </div>\n      </cds-tab>\n\n      <!-- TEMPORARY (removed in 1.0.0): forms missing the task-id carrier -->\n      <cds-tab\n        [heading]=\"formsHeading\"\n        data-testid=\"epistola-admin-tab-forms\"\n        [active]=\"overviewTab === 'forms'\"\n        (selected)=\"setOverviewTab('forms')\"\n      >\n        <p class=\"text-muted mt-3 mb-3\">\n          {{ 'epistolaAdminFormsIntro' | pluginTranslate: 'epistola' | async }}\n        </p>\n\n        <div *ngIf=\"formIssuesLoading\" class=\"text-muted mb-3\">\n          {{ 'epistolaAdminLoading' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <div\n          *ngIf=\"!formIssuesLoading && formIssues && formIssues.length === 0\"\n          class=\"text-muted mb-3\"\n        >\n          {{ 'epistolaAdminNoFormIssues' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <div *ngIf=\"!formIssuesLoading && formIssues && formIssues.length > 0\">\n          <div class=\"mb-2\">\n            <button\n              class=\"btn btn-sm btn-primary\"\n              data-testid=\"epistola-admin-repair-all\"\n              (click)=\"repairAllForms()\"\n              [disabled]=\"repairingAll\"\n            >\n              {{\n                (repairingAll ? 'epistolaAdminRepairing' : 'epistolaAdminRepairAll')\n                  | pluginTranslate: 'epistola'\n                  | async\n              }}\n            </button>\n            <span\n              *ngIf=\"formFeedback && formFeedback.formId === 'all'\"\n              class=\"small ms-2\"\n              [class.text-success]=\"formFeedback.type === 'success'\"\n              [class.text-danger]=\"formFeedback.type === 'error'\"\n              >{{ formFeedback.message }}</span\n            >\n          </div>\n\n          <table class=\"table table-striped\">\n            <thead>\n              <tr>\n                <th>{{ 'epistolaAdminFormName' | pluginTranslate: 'epistola' | async }}</th>\n                <th>{{ 'epistolaAdminFormMissing' | pluginTranslate: 'epistola' | async }}</th>\n                <th></th>\n              </tr>\n            </thead>\n            <tbody>\n              <tr\n                *ngFor=\"let issue of formIssues\"\n                [attr.data-testid]=\"'epistola-admin-form-issue-' + issue.formId\"\n              >\n                <td>\n                  <code>{{ issue.name }}</code>\n                  <cds-tag\n                    *ngIf=\"issue.readOnly\"\n                    size=\"sm\"\n                    type=\"warm-gray\"\n                    class=\"ms-1\"\n                    [title]=\"'epistolaAdminFormReadOnlyHint' | pluginTranslate: 'epistola' | async\"\n                    >{{\n                      'epistolaAdminFormReadOnly' | pluginTranslate: 'epistola' | async\n                    }}</cds-tag\n                  >\n                </td>\n                <td>{{ issue.missingComponents }}</td>\n                <td class=\"text-end\">\n                  <button\n                    class=\"btn btn-sm btn-outline-primary\"\n                    [attr.data-testid]=\"'epistola-admin-repair-form-' + issue.formId\"\n                    (click)=\"repairForm(issue)\"\n                    [disabled]=\"isRepairingForm(issue)\"\n                    [title]=\"'epistolaAdminRepairTooltip' | pluginTranslate: 'epistola' | async\"\n                  >\n                    {{\n                      (isRepairingForm(issue) ? 'epistolaAdminRepairing' : 'epistolaAdminRepair')\n                        | pluginTranslate: 'epistola'\n                        | async\n                    }}\n                  </button>\n                  <div\n                    *ngIf=\"formFeedback && formFeedback.formId === issue.formId\"\n                    class=\"small mt-1\"\n                    [class.text-success]=\"formFeedback.type === 'success'\"\n                    [class.text-danger]=\"formFeedback.type === 'error'\"\n                  >\n                    {{ formFeedback.message }}\n                  </div>\n                </td>\n              </tr>\n            </tbody>\n          </table>\n        </div>\n\n        <!-- TEMPORARY: forms still using the legacy override-mapping object format -->\n        <hr class=\"my-4\" />\n        <h5 class=\"mb-1\">\n          {{ 'epistolaAdminLegacyOverrideTitle' | pluginTranslate: 'epistola' | async }}\n        </h5>\n        <p class=\"text-muted mb-3\">\n          {{ 'epistolaAdminLegacyOverrideIntro' | pluginTranslate: 'epistola' | async }}\n        </p>\n\n        <div *ngIf=\"legacyOverrideLoading\" class=\"text-muted mb-3\">\n          {{ 'epistolaAdminLoading' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <div\n          *ngIf=\"!legacyOverrideLoading && legacyOverrideForms && legacyOverrideForms.length === 0\"\n          class=\"text-muted mb-3\"\n        >\n          {{ 'epistolaAdminNoLegacyOverride' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <table\n          *ngIf=\"!legacyOverrideLoading && legacyOverrideForms && legacyOverrideForms.length > 0\"\n          class=\"table table-striped\"\n        >\n          <thead>\n            <tr>\n              <th>{{ 'epistolaAdminFormName' | pluginTranslate: 'epistola' | async }}</th>\n              <th>\n                {{ 'epistolaAdminLegacyOverrideComponents' | pluginTranslate: 'epistola' | async }}\n              </th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr *ngFor=\"let form of legacyOverrideForms\">\n              <td>\n                <code>{{ form.name }}</code>\n                <cds-tag\n                  *ngIf=\"form.readOnly\"\n                  size=\"sm\"\n                  type=\"warm-gray\"\n                  class=\"ms-1\"\n                  [title]=\"'epistolaAdminFormReadOnlyHint' | pluginTranslate: 'epistola' | async\"\n                  >{{ 'epistolaAdminFormReadOnly' | pluginTranslate: 'epistola' | async }}</cds-tag\n                >\n              </td>\n              <td>{{ form.legacyComponents }}</td>\n            </tr>\n          </tbody>\n        </table>\n      </cds-tab>\n    </cds-tabs>\n  </ng-container>\n\n  <!-- Detail view: selected configuration -->\n  <ng-container *ngIf=\"selectedCard\">\n    <div class=\"detail-header mb-3\">\n      <button\n        class=\"btn btn-link btn-sm p-0\"\n        data-testid=\"epistola-admin-back\"\n        (click)=\"backToOverview()\"\n      >\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    <ng-template #catalogsHeading>\n      {{ 'epistolaAdminCatalogs' | pluginTranslate: 'epistola' | async }}\n      <cds-tag size=\"sm\" type=\"gray\" class=\"ms-1\">{{ catalogs.length }}</cds-tag>\n    </ng-template>\n\n    <cds-tabs [cacheActive]=\"true\" type=\"contained\" data-testid=\"epistola-admin-detail-tabs\">\n      <cds-tab\n        [heading]=\"actionsHeading\"\n        data-testid=\"epistola-admin-detail-tab-actions\"\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; let i = index\"\n              [attr.data-testid]=\"'epistola-admin-usage-row-' + i\"\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                  [attr.data-testid]=\"'epistola-admin-export-' + i\"\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        data-testid=\"epistola-admin-detail-tab-pending\"\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>{{ 'epistolaAdminStatus' | pluginTranslate: 'epistola' | async }}</th>\n              <th>{{ 'epistolaAdminRequestId' | pluginTranslate: 'epistola' | async }}</th>\n              <th></th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr\n              *ngFor=\"let job of selectedCard.pendingJobs\"\n              [attr.data-testid]=\"'epistola-admin-pending-row-' + job.executionId\"\n            >\n              <td>{{ job.processDefinitionName }}</td>\n              <td>{{ job.activityName }}</td>\n              <td>\n                <cds-tag\n                  *ngIf=\"job.status === 'UNWIRED'; else waitingTag\"\n                  size=\"sm\"\n                  type=\"red\"\n                  [title]=\"'epistolaAdminUnwiredTooltip' | pluginTranslate: 'epistola' | async\"\n                >\n                  {{ 'epistolaAdminStatusUnwired' | pluginTranslate: 'epistola' | async }}\n                </cds-tag>\n                <ng-template #waitingTag>\n                  <cds-tag size=\"sm\" type=\"blue\">\n                    {{ 'epistolaAdminStatusWaiting' | pluginTranslate: 'epistola' | async }}\n                  </cds-tag>\n                </ng-template>\n              </td>\n              <td>\n                <code *ngIf=\"job.status !== 'UNWIRED'\">{{ job.requestId }}</code>\n                <span *ngIf=\"job.status === 'UNWIRED'\" class=\"text-muted\">\u2014</span>\n              </td>\n              <td class=\"text-end\">\n                <button\n                  *ngIf=\"job.status !== 'UNWIRED'\"\n                  class=\"btn btn-sm btn-outline-primary\"\n                  [attr.data-testid]=\"'epistola-admin-reconcile-' + job.executionId\"\n                  (click)=\"reconcilePending(job)\"\n                  [disabled]=\"isReconciling(job)\"\n                  [title]=\"'epistolaAdminReconcileTooltip' | pluginTranslate: 'epistola' | async\"\n                >\n                  <span *ngIf=\"!isReconciling(job)\">\n                    {{ 'epistolaAdminReconcile' | pluginTranslate: 'epistola' | async }}\n                  </span>\n                  <span *ngIf=\"isReconciling(job)\">\n                    {{ 'epistolaAdminReconciling' | pluginTranslate: 'epistola' | async }}\n                  </span>\n                </button>\n                <span\n                  *ngIf=\"job.status === 'UNWIRED'\"\n                  class=\"text-muted small\"\n                  [title]=\"'epistolaAdminUnwiredTooltip' | pluginTranslate: 'epistola' | async\"\n                >\n                  {{ 'epistolaAdminUnwiredHint' | pluginTranslate: 'epistola' | async }}\n                </span>\n                <div\n                  *ngIf=\"reconcileFeedback && reconcileFeedback.executionId === job.executionId\"\n                  class=\"reconcile-feedback small mt-1\"\n                  [class.text-success]=\"reconcileFeedback.type === 'success'\"\n                  [class.text-warning]=\"reconcileFeedback.type === 'pending'\"\n                  [class.text-danger]=\"reconcileFeedback.type === 'error'\"\n                >\n                  {{ reconcileFeedback.message }}\n                </div>\n              </td>\n            </tr>\n          </tbody>\n        </table>\n      </cds-tab>\n\n      <cds-tab\n        [heading]=\"catalogsHeading\"\n        data-testid=\"epistola-admin-detail-tab-catalogs\"\n        [active]=\"activeTab === 'catalogs'\"\n        (selected)=\"setActiveTab('catalogs')\"\n      >\n        <p class=\"text-muted mt-3 mb-3\">\n          {{ 'epistolaAdminCatalogsIntro' | pluginTranslate: 'epistola' | async }}\n        </p>\n\n        <div *ngIf=\"catalogsLoading\" class=\"text-muted mb-3\">\n          {{ 'epistolaAdminLoading' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <div *ngIf=\"!catalogsLoading && catalogs.length === 0\" class=\"text-muted mb-3\">\n          {{ 'epistolaAdminNoCatalogs' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <table *ngIf=\"!catalogsLoading && catalogs.length > 0\" class=\"table table-striped\">\n          <thead>\n            <tr>\n              <th>{{ 'epistolaAdminCatalogSlug' | pluginTranslate: 'epistola' | async }}</th>\n              <th>{{ 'epistolaAdminCatalogVersion' | pluginTranslate: 'epistola' | async }}</th>\n              <th>{{ 'epistolaAdminCatalogStatus' | pluginTranslate: 'epistola' | async }}</th>\n              <th></th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr\n              *ngFor=\"let catalog of catalogs\"\n              [attr.data-testid]=\"'epistola-admin-catalog-row-' + catalog.slug\"\n            >\n              <td>\n                <code>{{ catalog.slug }}</code>\n              </td>\n              <td>{{ catalog.version }}</td>\n              <td>\n                <cds-tag *ngIf=\"catalog.status === 'IN_EPISTOLA'\" size=\"sm\" type=\"green\">\n                  {{ 'epistolaAdminCatalogInEpistola' | pluginTranslate: 'epistola' | async }}\n                </cds-tag>\n                <cds-tag *ngIf=\"catalog.status === 'NOT_IN_EPISTOLA'\" size=\"sm\" type=\"red\">\n                  {{ 'epistolaAdminCatalogNotInEpistola' | pluginTranslate: 'epistola' | async }}\n                </cds-tag>\n                <cds-tag *ngIf=\"catalog.status === 'UNKNOWN'\" size=\"sm\" type=\"gray\">\n                  {{ 'epistolaAdminCatalogStatusUnknown' | pluginTranslate: 'epistola' | async }}\n                </cds-tag>\n              </td>\n              <td class=\"text-end\">\n                <button\n                  class=\"btn btn-sm btn-outline-primary\"\n                  [attr.data-testid]=\"'epistola-admin-redeploy-' + catalog.slug\"\n                  (click)=\"redeployCatalog(catalog)\"\n                  [disabled]=\"isRedeploying(catalog)\"\n                  [title]=\"'epistolaAdminRedeployTooltip' | pluginTranslate: 'epistola' | async\"\n                >\n                  <span *ngIf=\"!isRedeploying(catalog)\">\n                    {{ 'epistolaAdminRedeploy' | pluginTranslate: 'epistola' | async }}\n                  </span>\n                  <span *ngIf=\"isRedeploying(catalog)\">\n                    {{ 'epistolaAdminRedeploying' | pluginTranslate: 'epistola' | async }}\n                  </span>\n                </button>\n                <div\n                  *ngIf=\"catalogFeedback && catalogFeedback.slug === catalog.slug\"\n                  class=\"reconcile-feedback small mt-1\"\n                  [class.text-success]=\"catalogFeedback.type === 'success'\"\n                  [class.text-danger]=\"catalogFeedback.type === 'error'\"\n                >\n                  {{ catalogFeedback.message }}\n                </div>\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}.epistola-admin .epistola-changelog{max-height:60vh;overflow:auto;padding:.5rem 1rem;border:1px solid #dee2e6;border-radius:4px}.epistola-admin .epistola-changelog .changelog-release{padding:.75rem 0}.epistola-admin .epistola-changelog .changelog-release+.changelog-release{border-top:1px solid #eee}.epistola-admin .epistola-changelog .changelog-release__header{display:flex;align-items:center;margin-bottom:.5rem}.epistola-admin .epistola-changelog .changelog-section{margin:.25rem 0 .75rem}.epistola-admin .epistola-changelog .changelog-section__title{font-size:.8125rem;font-weight:600;text-transform:uppercase;letter-spacing:.02em;color:#6f6f6f;margin-bottom:.25rem}.epistola-admin .epistola-changelog .changelog-section__items{margin:0;padding-left:1.25rem;font-size:.8125rem;line-height:1.5}.epistola-admin .epistola-changelog .changelog-section__items li{margin-bottom:.25rem;word-break:break-word}\n"] }]
         }], ctorParameters: () => [{ type: EpistolaAdminService }, { type: i2$4.ActivatedRoute }, { type: i2$4.Router }] });
 
 /*
@@ -5426,12 +5684,15 @@ class EpistolaOverrideBuilderComponent {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaOverrideBuilderComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: EpistolaPluginService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: EpistolaOverrideBuilderComponent, isStandalone: true, selector: "epistola-override-builder-component", inputs: { value: "value", disabled: "disabled", label: "label", availableFields: "availableFields", processDefinitionKey: "processDefinitionKey", sourceActivityId: "sourceActivityId" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: `
-    <div class="override-builder">
+    <div class="override-builder" data-testid="epistola-override-root">
       <div class="builder-header">
-        <span class="builder-label">{{ label || 'Input Overrides' }}</span>
+        <span class="builder-label" data-testid="epistola-override-label">{{
+          label || 'Input Overrides'
+        }}</span>
         <button
           type="button"
           class="mode-toggle"
+          data-testid="epistola-override-mode-toggle"
           [disabled]="simpleUnavailable && !advancedMode"
           (click)="toggleMode()"
         >
@@ -5444,8 +5705,8 @@ class EpistolaOverrideBuilderComponent {
         Make the preview reflect what the user is typing — <em>before</em> they submit — by feeding
         live form values into the document inputs.
       </p>
-      <details class="builder-help">
-        <summary>When should I map a field?</summary>
+      <details class="builder-help" data-testid="epistola-override-help">
+        <summary data-testid="epistola-override-help-summary">When should I map a field?</summary>
         <ul>
           <li>
             <strong>Map</strong> a field when its value ends up in the generated document — i.e. the
@@ -5471,17 +5732,26 @@ class EpistolaOverrideBuilderComponent {
       </details>
 
       <!-- Variables the selected template's mapping consumes (read-only guidance) -->
-      <details *ngIf="hasReferencedPaths" class="used-by-template">
-        <summary class="used-by-template__label">
+      <details
+        *ngIf="hasReferencedPaths"
+        class="used-by-template"
+        data-testid="epistola-override-used-by-template"
+      >
+        <summary
+          class="used-by-template__label"
+          data-testid="epistola-override-used-by-template-summary"
+        >
           Used by this template ({{ referencedPaths.length }})
         </summary>
         <p class="used-by-template__hint">
           This template's data mapping reads these inputs — the paths worth overriding for the
           preview.
         </p>
-        <ul class="used-by-template__list">
-          <li *ngFor="let ref of referencedPaths">
-            <code>{{ formatReferencedPath(ref) }}</code>
+        <ul class="used-by-template__list" data-testid="epistola-override-used-by-template-list">
+          <li *ngFor="let ref of referencedPaths; let i = index">
+            <code [attr.data-testid]="'epistola-override-used-by-template-item-' + i">{{
+              formatReferencedPath(ref)
+            }}</code>
           </li>
         </ul>
       </details>
@@ -5495,21 +5765,35 @@ class EpistolaOverrideBuilderComponent {
       </datalist>
 
       <!-- Simple mode: table -->
-      <div *ngIf="!advancedMode" class="builder-table">
-        <div *ngIf="rows.length > 0" class="table-header">
+      <div *ngIf="!advancedMode" class="builder-table" data-testid="epistola-override-table">
+        <div
+          *ngIf="rows.length > 0"
+          class="table-header"
+          data-testid="epistola-override-table-header"
+        >
           <span class="col-scope">Scope</span>
           <span class="col-path">Input Path</span>
           <span class="col-field">Form Field</span>
           <span class="col-action"></span>
         </div>
-        <div *ngFor="let row of rows; let i = index" class="table-row">
-          <select class="col-scope" [(ngModel)]="row.scope" (ngModelChange)="emitChange()">
+        <div
+          *ngFor="let row of rows; let i = index"
+          class="table-row"
+          [attr.data-testid]="'epistola-override-row-' + i"
+        >
+          <select
+            class="col-scope"
+            [attr.data-testid]="'epistola-override-row-scope-' + i"
+            [(ngModel)]="row.scope"
+            (ngModelChange)="emitChange()"
+          >
             <option value="doc">doc</option>
             <option value="pv">pv</option>
           </select>
           <input
             class="col-path"
             type="text"
+            [attr.data-testid]="'epistola-override-row-path-' + i"
             [(ngModel)]="row.inputPath"
             (ngModelChange)="emitChange()"
             [attr.list]="'epistola-override-paths-' + row.scope"
@@ -5519,6 +5803,7 @@ class EpistolaOverrideBuilderComponent {
           <select
             *ngIf="availableFields.length > 0"
             class="col-field"
+            [attr.data-testid]="'epistola-override-row-field-' + i"
             [(ngModel)]="row.formFieldKey"
             (ngModelChange)="emitChange()"
           >
@@ -5531,25 +5816,41 @@ class EpistolaOverrideBuilderComponent {
             *ngIf="availableFields.length === 0"
             class="col-field"
             type="text"
+            [attr.data-testid]="'epistola-override-row-field-' + i"
             [(ngModel)]="row.formFieldKey"
             (ngModelChange)="emitChange()"
             placeholder="form field key"
           />
-          <button type="button" class="col-action remove-btn" (click)="removeRow(i)">
+          <button
+            type="button"
+            class="col-action remove-btn"
+            [attr.data-testid]="'epistola-override-row-remove-' + i"
+            (click)="removeRow(i)"
+          >
             <i class="mdi mdi-close"></i>
           </button>
         </div>
-        <button type="button" class="add-btn" (click)="addRow()">
+        <button
+          type="button"
+          class="add-btn"
+          data-testid="epistola-override-add"
+          (click)="addRow()"
+        >
           <i class="mdi mdi-plus mr-1"></i> Add override
         </button>
       </div>
 
       <!-- Advanced mode: JSONata editor over $form -->
-      <div *ngIf="advancedMode" class="builder-advanced">
-        <div *ngIf="simpleUnavailable" class="advanced-note">
+      <div *ngIf="advancedMode" class="builder-advanced" data-testid="epistola-override-advanced">
+        <div
+          *ngIf="simpleUnavailable"
+          class="advanced-note"
+          data-testid="epistola-override-advanced-note"
+        >
           This expression is too rich for the simple table — edit it here.
         </div>
         <epistola-jsonata-editor
+          data-testid="epistola-override-jsonata-editor"
           [expression]="expression"
           [contextVariables]="editorContextVariables"
           variablesHint="$form"
@@ -5566,12 +5867,15 @@ class EpistolaOverrideBuilderComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaOverrideBuilderComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [CommonModule, FormsModule, JsonataEditorComponent], selector: 'epistola-override-builder-component', changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <div class="override-builder">
+    <div class="override-builder" data-testid="epistola-override-root">
       <div class="builder-header">
-        <span class="builder-label">{{ label || 'Input Overrides' }}</span>
+        <span class="builder-label" data-testid="epistola-override-label">{{
+          label || 'Input Overrides'
+        }}</span>
         <button
           type="button"
           class="mode-toggle"
+          data-testid="epistola-override-mode-toggle"
           [disabled]="simpleUnavailable && !advancedMode"
           (click)="toggleMode()"
         >
@@ -5584,8 +5888,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
         Make the preview reflect what the user is typing — <em>before</em> they submit — by feeding
         live form values into the document inputs.
       </p>
-      <details class="builder-help">
-        <summary>When should I map a field?</summary>
+      <details class="builder-help" data-testid="epistola-override-help">
+        <summary data-testid="epistola-override-help-summary">When should I map a field?</summary>
         <ul>
           <li>
             <strong>Map</strong> a field when its value ends up in the generated document — i.e. the
@@ -5611,17 +5915,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
       </details>
 
       <!-- Variables the selected template's mapping consumes (read-only guidance) -->
-      <details *ngIf="hasReferencedPaths" class="used-by-template">
-        <summary class="used-by-template__label">
+      <details
+        *ngIf="hasReferencedPaths"
+        class="used-by-template"
+        data-testid="epistola-override-used-by-template"
+      >
+        <summary
+          class="used-by-template__label"
+          data-testid="epistola-override-used-by-template-summary"
+        >
           Used by this template ({{ referencedPaths.length }})
         </summary>
         <p class="used-by-template__hint">
           This template's data mapping reads these inputs — the paths worth overriding for the
           preview.
         </p>
-        <ul class="used-by-template__list">
-          <li *ngFor="let ref of referencedPaths">
-            <code>{{ formatReferencedPath(ref) }}</code>
+        <ul class="used-by-template__list" data-testid="epistola-override-used-by-template-list">
+          <li *ngFor="let ref of referencedPaths; let i = index">
+            <code [attr.data-testid]="'epistola-override-used-by-template-item-' + i">{{
+              formatReferencedPath(ref)
+            }}</code>
           </li>
         </ul>
       </details>
@@ -5635,21 +5948,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
       </datalist>
 
       <!-- Simple mode: table -->
-      <div *ngIf="!advancedMode" class="builder-table">
-        <div *ngIf="rows.length > 0" class="table-header">
+      <div *ngIf="!advancedMode" class="builder-table" data-testid="epistola-override-table">
+        <div
+          *ngIf="rows.length > 0"
+          class="table-header"
+          data-testid="epistola-override-table-header"
+        >
           <span class="col-scope">Scope</span>
           <span class="col-path">Input Path</span>
           <span class="col-field">Form Field</span>
           <span class="col-action"></span>
         </div>
-        <div *ngFor="let row of rows; let i = index" class="table-row">
-          <select class="col-scope" [(ngModel)]="row.scope" (ngModelChange)="emitChange()">
+        <div
+          *ngFor="let row of rows; let i = index"
+          class="table-row"
+          [attr.data-testid]="'epistola-override-row-' + i"
+        >
+          <select
+            class="col-scope"
+            [attr.data-testid]="'epistola-override-row-scope-' + i"
+            [(ngModel)]="row.scope"
+            (ngModelChange)="emitChange()"
+          >
             <option value="doc">doc</option>
             <option value="pv">pv</option>
           </select>
           <input
             class="col-path"
             type="text"
+            [attr.data-testid]="'epistola-override-row-path-' + i"
             [(ngModel)]="row.inputPath"
             (ngModelChange)="emitChange()"
             [attr.list]="'epistola-override-paths-' + row.scope"
@@ -5659,6 +5986,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
           <select
             *ngIf="availableFields.length > 0"
             class="col-field"
+            [attr.data-testid]="'epistola-override-row-field-' + i"
             [(ngModel)]="row.formFieldKey"
             (ngModelChange)="emitChange()"
           >
@@ -5671,25 +5999,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             *ngIf="availableFields.length === 0"
             class="col-field"
             type="text"
+            [attr.data-testid]="'epistola-override-row-field-' + i"
             [(ngModel)]="row.formFieldKey"
             (ngModelChange)="emitChange()"
             placeholder="form field key"
           />
-          <button type="button" class="col-action remove-btn" (click)="removeRow(i)">
+          <button
+            type="button"
+            class="col-action remove-btn"
+            [attr.data-testid]="'epistola-override-row-remove-' + i"
+            (click)="removeRow(i)"
+          >
             <i class="mdi mdi-close"></i>
           </button>
         </div>
-        <button type="button" class="add-btn" (click)="addRow()">
+        <button
+          type="button"
+          class="add-btn"
+          data-testid="epistola-override-add"
+          (click)="addRow()"
+        >
           <i class="mdi mdi-plus mr-1"></i> Add override
         </button>
       </div>
 
       <!-- Advanced mode: JSONata editor over $form -->
-      <div *ngIf="advancedMode" class="builder-advanced">
-        <div *ngIf="simpleUnavailable" class="advanced-note">
+      <div *ngIf="advancedMode" class="builder-advanced" data-testid="epistola-override-advanced">
+        <div
+          *ngIf="simpleUnavailable"
+          class="advanced-note"
+          data-testid="epistola-override-advanced-note"
+        >
           This expression is too rich for the simple table — edit it here.
         </div>
         <epistola-jsonata-editor
+          data-testid="epistola-override-jsonata-editor"
           [expression]="expression"
           [contextVariables]="editorContextVariables"
           variablesHint="$form"
@@ -5949,40 +6293,62 @@ class EpistolaProcessLinkSelectorComponent {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaProcessLinkSelectorComponent, deps: [{ token: EpistolaAdminService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: EpistolaProcessLinkSelectorComponent, isStandalone: true, selector: "epistola-process-link-selector-component", inputs: { value: "value", disabled: "disabled", label: "label" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: `
-    <div class="process-link-selector">
-      <label class="selector-label">{{ label || 'Process Link' }}</label>
+    <div class="process-link-selector" data-testid="epistola-process-link-container">
+      <label class="selector-label" data-testid="epistola-process-link-label">{{
+        label || 'Process Link'
+      }}</label>
       <select
         class="selector-dropdown"
+        data-testid="epistola-process-link-select"
         [ngModel]="selectedKey"
         (ngModelChange)="onSelect($event)"
         [disabled]="disabled || loading"
       >
-        <option value="">{{ loading ? 'Loading...' : '-- Select a process link --' }}</option>
-        <option *ngFor="let entry of filteredEntries" [value]="entryKey(entry)">
+        <option value="" data-testid="epistola-process-link-option-empty">
+          {{ loading ? 'Loading...' : '-- Select a process link --' }}
+        </option>
+        <option
+          *ngFor="let entry of filteredEntries"
+          [value]="entryKey(entry)"
+          [attr.data-testid]="'epistola-process-link-option-' + entryKey(entry)"
+        >
           {{ entry.processDefinitionName }} / {{ entry.activityName }} ({{ entry.activityId }})
         </option>
       </select>
-      <div *ngIf="error" class="selector-error">{{ error }}</div>
+      <div *ngIf="error" class="selector-error" data-testid="epistola-process-link-error">
+        {{ error }}
+      </div>
     </div>
   `, isInline: true, styles: [".process-link-selector{margin-bottom:.5rem}.selector-label{display:block;font-weight:600;font-size:.85rem;color:#495057;margin-bottom:.25rem}.selector-dropdown{width:100%;border:1px solid #ced4da;border-radius:4px;padding:.4rem .5rem;font-size:.85rem;background:#fff}.selector-error{color:#dc3545;font-size:.75rem;margin-top:.25rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaProcessLinkSelectorComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [CommonModule, FormsModule], selector: 'epistola-process-link-selector-component', changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <div class="process-link-selector">
-      <label class="selector-label">{{ label || 'Process Link' }}</label>
+    <div class="process-link-selector" data-testid="epistola-process-link-container">
+      <label class="selector-label" data-testid="epistola-process-link-label">{{
+        label || 'Process Link'
+      }}</label>
       <select
         class="selector-dropdown"
+        data-testid="epistola-process-link-select"
         [ngModel]="selectedKey"
         (ngModelChange)="onSelect($event)"
         [disabled]="disabled || loading"
       >
-        <option value="">{{ loading ? 'Loading...' : '-- Select a process link --' }}</option>
-        <option *ngFor="let entry of filteredEntries" [value]="entryKey(entry)">
+        <option value="" data-testid="epistola-process-link-option-empty">
+          {{ loading ? 'Loading...' : '-- Select a process link --' }}
+        </option>
+        <option
+          *ngFor="let entry of filteredEntries"
+          [value]="entryKey(entry)"
+          [attr.data-testid]="'epistola-process-link-option-' + entryKey(entry)"
+        >
           {{ entry.processDefinitionName }} / {{ entry.activityName }} ({{ entry.activityId }})
         </option>
       </select>
-      <div *ngIf="error" class="selector-error">{{ error }}</div>
+      <div *ngIf="error" class="selector-error" data-testid="epistola-process-link-error">
+        {{ error }}
+      </div>
     </div>
   `, styles: [".process-link-selector{margin-bottom:.5rem}.selector-label{display:block;font-weight:600;font-size:.85rem;color:#495057;margin-bottom:.25rem}.selector-dropdown{width:100%;border:1px solid #ced4da;border-radius:4px;padding:.4rem .5rem;font-size:.85rem;background:#fff}.selector-error{color:#dc3545;font-size:.75rem;margin-top:.25rem}\n"] }]
         }], ctorParameters: () => [{ type: EpistolaAdminService }, { type: i0.ChangeDetectorRef }], propDecorators: { value: [{