@epistola.app/valtimo-plugin 0.9.1 → 0.9.3

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

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { Injectable, EventEmitter, Output, Input, Component, ChangeDetectionStrategy, inject, NgModule, ENVIRONMENT_INITIALIZER, Injector } from '@angular/core';
 import * as i1 from '@angular/common/http';
-import { HttpHeaders, HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
+import { HttpHeaders, HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
 import * as i2 from '@valtimo/shared';
 import { ROLE_ADMIN } from '@valtimo/shared';
 import { of, BehaviorSubject, combineLatest, take, Subject, debounceTime, takeUntil, merge } from 'rxjs';
@@ -1689,19 +1689,35 @@ class GenerateDocumentConfigurationComponent {
     selectedCatalogId$ = new BehaviorSubject('');
     /** Composite ID: "catalogId/templateId" */
     selectedTemplateId$ = new BehaviorSubject('');
-    selectedVariantId$ = new BehaviorSubject('');
+    /**
+     * Force-clears the templateId v-select. Triggered when the catalog changes —
+     * v-select's `setDefaultSelection` ignores empty-string defaults, so binding
+     * `[defaultSelectionId]=""` does NOT reset the dropdown. The `clearSelectionSubject$`
+     * input is the supported escape hatch.
+     */
+    clearTemplateId$ = new Subject();
+    /** Same pattern for the explicit-mode variantId v-select. */
+    clearVariantId$ = new Subject();
     variantSelectionMode = 'explicit';
     variantIdExpressionMode = false;
     variantIdExpression = '';
+    /**
+     * Plain-mode variant id. Tracked outside `<v-form>` because the explicit
+     * variant `<v-select>` lives inside `<div class="field-with-fx">`, and
+     * v-form's `@ContentChildren(SelectComponent)` query only sees direct
+     * children (Angular defaults `descendants: false`).
+     */
+    variantIdValue = '';
     filenameExpressionMode = false;
     filenameExpression = '';
+    /** Plain-mode filename. Tracked outside `<v-form>` for the same reason as `variantIdValue`. */
+    filenameValue = '';
     variantAttributeEntries = [];
     availableAttributeKeys = [];
     caseDefinitionKey = null;
     processVariables = [];
     expressionFunctions = [];
     variableSuggestions = null;
-    requiredFieldsStatus = { mapped: 0, total: 0 };
     prefillDataMapping = {};
     validationErrors$ = new BehaviorSubject([]);
     destroy$ = new Subject();
@@ -1732,35 +1748,48 @@ class GenerateDocumentConfigurationComponent {
     formValueChange(formOutput) {
         const formValue = formOutput;
         this.formValue$.next(formValue);
-        // When catalog changes, reset template and variant selection
+        // When catalog changes, reset template and variant selection.
+        // The clear$ subjects force-clear the v-selects' internal `selected$` state —
+        // without them the dropdown keeps the previous id and the next v-form emission
+        // re-applies it under the new catalog, causing 404s when the template doesn't exist
+        // in the newly selected catalog.
         if (formValue.catalogId && formValue.catalogId !== this.selectedCatalogId$.getValue()) {
             this.selectedCatalogId$.next(formValue.catalogId);
             this.selectedTemplateId$.next('');
-            this.selectedVariantId$.next('');
+            this.variantIdValue = '';
+            this.clearTemplateId$.next();
+            this.clearVariantId$.next();
+            return;
         }
         // templateId from v-select is the template ID within the selected catalog
         if (formValue.templateId && formValue.templateId !== this.selectedTemplateId$.getValue()) {
             this.selectedTemplateId$.next(formValue.templateId);
-            this.selectedVariantId$.next('');
-        }
-        if (formValue.variantId && formValue.variantId !== this.selectedVariantId$.getValue()) {
-            this.selectedVariantId$.next(formValue.variantId);
+            this.variantIdValue = '';
+            this.clearVariantId$.next();
         }
         this.handleValid(formValue);
     }
     onDataMappingChange(expression) {
         this.dataMapping$.next(expression);
-        const currentFormValue = this.formValue$.getValue();
-        if (currentFormValue) {
-            this.handleValid(currentFormValue);
-        }
+        this.revalidate();
     }
-    onRequiredFieldsStatusChange(status) {
-        this.requiredFieldsStatus = status;
-        const currentFormValue = this.formValue$.getValue();
-        if (currentFormValue) {
-            this.handleValid(currentFormValue);
-        }
+    onFilenameValueChange(value) {
+        this.filenameValue = value ?? '';
+        this.revalidate();
+    }
+    onVariantIdValueChange(value) {
+        // v-select is single-select here, so SelectedValue narrows to string | number;
+        // our variant ids are always strings — coerce defensively.
+        this.variantIdValue = value == null || Array.isArray(value) ? '' : String(value);
+        this.revalidate();
+    }
+    toggleFilenameExpressionMode() {
+        this.filenameExpressionMode = !this.filenameExpressionMode;
+        this.revalidate();
+    }
+    toggleVariantIdExpressionMode() {
+        this.variantIdExpressionMode = !this.variantIdExpressionMode;
+        this.revalidate();
     }
     onVariantSelectionModeChange(mode) {
         this.variantSelectionMode = mode;
@@ -1953,13 +1982,18 @@ class GenerateDocumentConfigurationComponent {
                     this.variantIdExpression = config.variantId;
                 }
                 else {
-                    this.selectedVariantId$.next(config.variantId);
+                    this.variantIdValue = config.variantId;
                 }
             }
             // Detect expression mode for filename
-            if (config.filename && isExpression(config.filename)) {
-                this.filenameExpressionMode = true;
-                this.filenameExpression = config.filename;
+            if (config.filename) {
+                if (isExpression(config.filename)) {
+                    this.filenameExpressionMode = true;
+                    this.filenameExpression = config.filename;
+                }
+                else {
+                    this.filenameValue = config.filename;
+                }
             }
             // Apply dataMapping prefill (JSONata expression string)
             if (config.dataMapping) {
@@ -2001,18 +2035,19 @@ class GenerateDocumentConfigurationComponent {
         });
     }
     handleValid(formValue) {
+        const filenameProvided = this.filenameExpressionMode
+            ? !!this.filenameExpression?.trim()
+            : !!this.filenameValue?.trim();
         const baseComplete = !!(this.selectedCatalogId$.getValue() &&
             formValue?.templateId &&
             formValue?.outputFormat &&
-            formValue?.filename &&
+            filenameProvided &&
             formValue?.resultProcessVariable);
         let variantValid = true;
         if (this.variantSelectionMode === 'attributes' && this.variantAttributeEntries.length > 0) {
             variantValid = this.variantAttributeEntries.every((e) => !!e.key && !!e.value);
         }
-        const requiredFieldsMapped = this.requiredFieldsStatus.total === 0 ||
-            this.requiredFieldsStatus.mapped === this.requiredFieldsStatus.total;
-        const valid = baseComplete && variantValid && requiredFieldsMapped;
+        const valid = baseComplete && variantValid;
         this.valid$.next(valid);
         this.valid.emit(valid);
     }
@@ -2030,14 +2065,14 @@ class GenerateDocumentConfigurationComponent {
                         environmentId: formValue.environmentId || undefined,
                         dataMapping: dataMapping,
                         outputFormat: formValue.outputFormat,
-                        filename: this.filenameExpressionMode ? this.filenameExpression : formValue.filename,
+                        filename: this.filenameExpressionMode ? this.filenameExpression : this.filenameValue,
                         correlationId: formValue.correlationId || undefined,
                         resultProcessVariable: formValue.resultProcessVariable,
                     };
                     if (this.variantSelectionMode === 'explicit') {
                         config.variantId = this.variantIdExpressionMode
                             ? this.variantIdExpression
-                            : formValue.variantId;
+                            : this.variantIdValue;
                     }
                     else {
                         config.variantAttributes = this.variantAttributeEntries
@@ -2089,7 +2124,7 @@ class GenerateDocumentConfigurationComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: GenerateDocumentConfigurationComponent, deps: [{ token: EpistolaPluginService }, { token: i2$3.ProcessLinkStateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: GenerateDocumentConfigurationComponent, isStandalone: true, selector: "epistola-generate-document-configuration", inputs: { save$: "save$", disabled$: "disabled$", pluginId: "pluginId", prefillConfiguration$: "prefillConfiguration$", selectedPluginConfigurationData$: "selectedPluginConfigurationData$", context$: "context$" }, outputs: { valid: "valid", configuration: "configuration" }, ngImport: i0, template: "<v-form\n  (valueChange)=\"formValueChange($event)\"\n  *ngIf=\"{\n    disabled: disabled$ | async,\n    prefill: prefillConfiguration$ ? (prefillConfiguration$ | async) : null,\n    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    [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  <div *ngIf=\"variantSelectionMode === 'explicit'\" class=\"field-with-fx\">\n    <v-select\n      *ngIf=\"!variantIdExpressionMode\"\n      name=\"variantId\"\n      [title]=\"'variantId' | pluginTranslate: pluginId | async\"\n      [tooltip]=\"'variantIdTooltip' | pluginTranslate: pluginId | async\"\n      [margin]=\"true\"\n      [items]=\"obs.variants.data\"\n      [defaultSelectionId]=\"obs.prefill?.variantId\"\n      [disabled]=\"obs.disabled || obs.variants.loading || !obs.selectedTemplateId\"\n      [required]=\"false\"\n      [loading]=\"obs.variants.loading\"\n    >\n    </v-select>\n    <div *ngIf=\"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)=\"variantIdExpressionMode = !variantIdExpressionMode\"\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      name=\"filename\"\n      [title]=\"'filename' | pluginTranslate: pluginId | async\"\n      [tooltip]=\"'filenameTooltip' | pluginTranslate: pluginId | async\"\n      [margin]=\"true\"\n      [defaultValue]=\"obs.prefill?.filename\"\n      [disabled]=\"obs.disabled\"\n      [required]=\"true\"\n    >\n    </v-input>\n    <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)=\"filenameExpressionMode = !filenameExpressionMode\"\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    [suggestions]=\"variableSuggestions\"\n    [functions]=\"expressionFunctions\"\n    (expressionChange)=\"onDataMappingChange($event)\"\n  ></epistola-jsonata-editor>\n\n  <!-- Bottom tabs: Schema + Preview (collapsible) -->\n  <div class=\"mapping-tools\" [class.mapping-tools--collapsed]=\"toolsCollapsed\">\n    <div class=\"mapping-tools__header\" (click)=\"toolsCollapsed = !toolsCollapsed\">\n      <span class=\"mapping-tools__chevron\">{{ toolsCollapsed ? '&#x25B6;' : '&#x25BC;' }}</span>\n      <span>{{ 'mappingTools' | pluginTranslate: pluginId | async }}</span>\n    </div>\n    <div *ngIf=\"!toolsCollapsed\" class=\"mapping-tools__content\">\n      <div class=\"mapping-tools__tabs\">\n        <button\n          class=\"mapping-tools__tab\"\n          [class.mapping-tools__tab--active]=\"activeToolTab === 'schema'\"\n          (click)=\"activeToolTab = 'schema'\"\n        >\n          {{ 'expectedStructure' | pluginTranslate: pluginId | async }}\n        </button>\n        <button\n          class=\"mapping-tools__tab\"\n          [class.mapping-tools__tab--active]=\"activeToolTab === 'preview'\"\n          (click)=\"activeToolTab = 'preview'\"\n        >\n          {{ 'previewTitle' | pluginTranslate: pluginId | async }}\n        </button>\n      </div>\n\n      <epistola-expected-structure\n        *ngIf=\"activeToolTab === 'schema'\"\n        [templateFields]=\"(templateFields$ | async)?.data ?? []\"\n      ></epistola-expected-structure>\n\n      <epistola-mapping-preview\n        *ngIf=\"activeToolTab === 'preview'\"\n        [expression]=\"dataMapping$ | async\"\n        [templateFields]=\"(templateFields$ | async)?.data ?? []\"\n        [caseDefinitionKey]=\"caseDefinitionKey\"\n      ></epistola-mapping-preview>\n    </div>\n  </div>\n</div>\n", styles: [".loading-error{padding:.25rem .75rem;font-size:.8125rem;color:#dc3545}.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: i2$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PluginTranslatePipeModule }, { kind: "pipe", type: i2$1.PluginTranslatePipe, name: "pluginTranslate" }, { kind: "ngmodule", type: FormModule }, { kind: "component", type: i3.FormComponent, selector: "v-form", inputs: ["className"], outputs: ["valueChange"] }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i3.InputComponent, selector: "v-input", inputs: ["name", "type", "title", "titleTranslationKey", "defaultValue", "widthPx", "fullWidth", "margin", "smallMargin", "disabled", "step", "min", "maxLength", "tooltip", "required", "hideNumberSpinBox", "smallLabel", "rows", "clear$", "carbonTheme", "placeholder", "dataTestId", "trim", "presetsTitle", "presetOptions"], outputs: ["valueChange"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3.SelectComponent, selector: "v-select", inputs: ["items", "defaultSelection", "defaultSelectionId", "defaultSelectionIds", "disabled", "dropUp", "invalid", "multiple", "margin", "widthInPx", "notFoundText", "clearAllText", "clearText", "clearable", "name", "title", "titleTranslationKey", "clearSelectionSubject$", "tooltip", "required", "loading", "loadingText", "placeholder", "smallMargin", "carbonTheme", "appendInline", "warn", "warnText", "dataTestId"], outputs: ["selectedChange"] }, { kind: "component", type: ExpectedStructureComponent, selector: "epistola-expected-structure", inputs: ["templateFields"] }, { kind: "component", type: JsonataEditorComponent, selector: "epistola-jsonata-editor", inputs: ["expression", "disabled", "suggestions", "functions"], outputs: ["expressionChange", "validChange"] }, { kind: "component", type: MappingBuilderComponent, selector: "epistola-mapping-builder", inputs: ["expression", "templateFields", "suggestions", "disabled"], outputs: ["expressionChange"] }, { kind: "component", type: MappingPreviewComponent, selector: "epistola-mapping-preview", inputs: ["expression", "templateFields", "caseDefinitionKey"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    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    [suggestions]=\"variableSuggestions\"\n    [functions]=\"expressionFunctions\"\n    (expressionChange)=\"onDataMappingChange($event)\"\n  ></epistola-jsonata-editor>\n\n  <!-- Bottom tabs: Schema + Preview (collapsible) -->\n  <div class=\"mapping-tools\" [class.mapping-tools--collapsed]=\"toolsCollapsed\">\n    <div class=\"mapping-tools__header\" (click)=\"toolsCollapsed = !toolsCollapsed\">\n      <span class=\"mapping-tools__chevron\">{{ toolsCollapsed ? '&#x25B6;' : '&#x25BC;' }}</span>\n      <span>{{ 'mappingTools' | pluginTranslate: pluginId | async }}</span>\n    </div>\n    <div *ngIf=\"!toolsCollapsed\" class=\"mapping-tools__content\">\n      <div class=\"mapping-tools__tabs\">\n        <button\n          class=\"mapping-tools__tab\"\n          [class.mapping-tools__tab--active]=\"activeToolTab === 'schema'\"\n          (click)=\"activeToolTab = 'schema'\"\n        >\n          {{ 'expectedStructure' | pluginTranslate: pluginId | async }}\n        </button>\n        <button\n          class=\"mapping-tools__tab\"\n          [class.mapping-tools__tab--active]=\"activeToolTab === 'preview'\"\n          (click)=\"activeToolTab = 'preview'\"\n        >\n          {{ 'previewTitle' | pluginTranslate: pluginId | async }}\n        </button>\n      </div>\n\n      <epistola-expected-structure\n        *ngIf=\"activeToolTab === 'schema'\"\n        [templateFields]=\"(templateFields$ | async)?.data ?? []\"\n      ></epistola-expected-structure>\n\n      <epistola-mapping-preview\n        *ngIf=\"activeToolTab === 'preview'\"\n        [expression]=\"dataMapping$ | async\"\n        [templateFields]=\"(templateFields$ | async)?.data ?? []\"\n        [caseDefinitionKey]=\"caseDefinitionKey\"\n      ></epistola-mapping-preview>\n    </div>\n  </div>\n</div>\n", styles: [".loading-error{padding:.25rem .75rem;font-size:.8125rem;color:#dc3545}.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: i2$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PluginTranslatePipeModule }, { kind: "pipe", type: i2$1.PluginTranslatePipe, name: "pluginTranslate" }, { kind: "ngmodule", type: FormModule }, { kind: "component", type: i3.FormComponent, selector: "v-form", inputs: ["className"], outputs: ["valueChange"] }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i3.InputComponent, selector: "v-input", inputs: ["name", "type", "title", "titleTranslationKey", "defaultValue", "widthPx", "fullWidth", "margin", "smallMargin", "disabled", "step", "min", "maxLength", "tooltip", "required", "hideNumberSpinBox", "smallLabel", "rows", "clear$", "carbonTheme", "placeholder", "dataTestId", "trim", "presetsTitle", "presetOptions"], outputs: ["valueChange"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3.SelectComponent, selector: "v-select", inputs: ["items", "defaultSelection", "defaultSelectionId", "defaultSelectionIds", "disabled", "dropUp", "invalid", "multiple", "margin", "widthInPx", "notFoundText", "clearAllText", "clearText", "clearable", "name", "title", "titleTranslationKey", "clearSelectionSubject$", "tooltip", "required", "loading", "loadingText", "placeholder", "smallMargin", "carbonTheme", "appendInline", "warn", "warnText", "dataTestId"], outputs: ["selectedChange"] }, { kind: "component", type: ExpectedStructureComponent, selector: "epistola-expected-structure", inputs: ["templateFields"] }, { kind: "component", type: JsonataEditorComponent, selector: "epistola-jsonata-editor", inputs: ["expression", "disabled", "suggestions", "functions"], outputs: ["expressionChange", "validChange"] }, { kind: "component", type: MappingBuilderComponent, selector: "epistola-mapping-builder", inputs: ["expression", "templateFields", "suggestions", "disabled"], outputs: ["expressionChange"] }, { kind: "component", type: MappingPreviewComponent, selector: "epistola-mapping-preview", inputs: ["expression", "templateFields", "caseDefinitionKey"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: GenerateDocumentConfigurationComponent, decorators: [{
             type: Component,
@@ -2104,7 +2139,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    [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  <div *ngIf=\"variantSelectionMode === 'explicit'\" class=\"field-with-fx\">\n    <v-select\n      *ngIf=\"!variantIdExpressionMode\"\n      name=\"variantId\"\n      [title]=\"'variantId' | pluginTranslate: pluginId | async\"\n      [tooltip]=\"'variantIdTooltip' | pluginTranslate: pluginId | async\"\n      [margin]=\"true\"\n      [items]=\"obs.variants.data\"\n      [defaultSelectionId]=\"obs.prefill?.variantId\"\n      [disabled]=\"obs.disabled || obs.variants.loading || !obs.selectedTemplateId\"\n      [required]=\"false\"\n      [loading]=\"obs.variants.loading\"\n    >\n    </v-select>\n    <div *ngIf=\"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)=\"variantIdExpressionMode = !variantIdExpressionMode\"\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      name=\"filename\"\n      [title]=\"'filename' | pluginTranslate: pluginId | async\"\n      [tooltip]=\"'filenameTooltip' | pluginTranslate: pluginId | async\"\n      [margin]=\"true\"\n      [defaultValue]=\"obs.prefill?.filename\"\n      [disabled]=\"obs.disabled\"\n      [required]=\"true\"\n    >\n    </v-input>\n    <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)=\"filenameExpressionMode = !filenameExpressionMode\"\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    [suggestions]=\"variableSuggestions\"\n    [functions]=\"expressionFunctions\"\n    (expressionChange)=\"onDataMappingChange($event)\"\n  ></epistola-jsonata-editor>\n\n  <!-- Bottom tabs: Schema + Preview (collapsible) -->\n  <div class=\"mapping-tools\" [class.mapping-tools--collapsed]=\"toolsCollapsed\">\n    <div class=\"mapping-tools__header\" (click)=\"toolsCollapsed = !toolsCollapsed\">\n      <span class=\"mapping-tools__chevron\">{{ toolsCollapsed ? '&#x25B6;' : '&#x25BC;' }}</span>\n      <span>{{ 'mappingTools' | pluginTranslate: pluginId | async }}</span>\n    </div>\n    <div *ngIf=\"!toolsCollapsed\" class=\"mapping-tools__content\">\n      <div class=\"mapping-tools__tabs\">\n        <button\n          class=\"mapping-tools__tab\"\n          [class.mapping-tools__tab--active]=\"activeToolTab === 'schema'\"\n          (click)=\"activeToolTab = 'schema'\"\n        >\n          {{ 'expectedStructure' | pluginTranslate: pluginId | async }}\n        </button>\n        <button\n          class=\"mapping-tools__tab\"\n          [class.mapping-tools__tab--active]=\"activeToolTab === 'preview'\"\n          (click)=\"activeToolTab = 'preview'\"\n        >\n          {{ 'previewTitle' | pluginTranslate: pluginId | async }}\n        </button>\n      </div>\n\n      <epistola-expected-structure\n        *ngIf=\"activeToolTab === 'schema'\"\n        [templateFields]=\"(templateFields$ | async)?.data ?? []\"\n      ></epistola-expected-structure>\n\n      <epistola-mapping-preview\n        *ngIf=\"activeToolTab === 'preview'\"\n        [expression]=\"dataMapping$ | async\"\n        [templateFields]=\"(templateFields$ | async)?.data ?? []\"\n        [caseDefinitionKey]=\"caseDefinitionKey\"\n      ></epistola-mapping-preview>\n    </div>\n  </div>\n</div>\n", styles: [".loading-error{padding:.25rem .75rem;font-size:.8125rem;color:#dc3545}.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  (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    [suggestions]=\"variableSuggestions\"\n    [functions]=\"expressionFunctions\"\n    (expressionChange)=\"onDataMappingChange($event)\"\n  ></epistola-jsonata-editor>\n\n  <!-- Bottom tabs: Schema + Preview (collapsible) -->\n  <div class=\"mapping-tools\" [class.mapping-tools--collapsed]=\"toolsCollapsed\">\n    <div class=\"mapping-tools__header\" (click)=\"toolsCollapsed = !toolsCollapsed\">\n      <span class=\"mapping-tools__chevron\">{{ toolsCollapsed ? '&#x25B6;' : '&#x25BC;' }}</span>\n      <span>{{ 'mappingTools' | pluginTranslate: pluginId | async }}</span>\n    </div>\n    <div *ngIf=\"!toolsCollapsed\" class=\"mapping-tools__content\">\n      <div class=\"mapping-tools__tabs\">\n        <button\n          class=\"mapping-tools__tab\"\n          [class.mapping-tools__tab--active]=\"activeToolTab === 'schema'\"\n          (click)=\"activeToolTab = 'schema'\"\n        >\n          {{ 'expectedStructure' | pluginTranslate: pluginId | async }}\n        </button>\n        <button\n          class=\"mapping-tools__tab\"\n          [class.mapping-tools__tab--active]=\"activeToolTab === 'preview'\"\n          (click)=\"activeToolTab = 'preview'\"\n        >\n          {{ 'previewTitle' | pluginTranslate: pluginId | async }}\n        </button>\n      </div>\n\n      <epistola-expected-structure\n        *ngIf=\"activeToolTab === 'schema'\"\n        [templateFields]=\"(templateFields$ | async)?.data ?? []\"\n      ></epistola-expected-structure>\n\n      <epistola-mapping-preview\n        *ngIf=\"activeToolTab === 'preview'\"\n        [expression]=\"dataMapping$ | async\"\n        [templateFields]=\"(templateFields$ | async)?.data ?? []\"\n        [caseDefinitionKey]=\"caseDefinitionKey\"\n      ></epistola-mapping-preview>\n    </div>\n  </div>\n</div>\n", styles: [".loading-error{padding:.25rem .75rem;font-size:.8125rem;color:#dc3545}.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$3.ProcessLinkStateService }, { type: i0.ChangeDetectorRef }], propDecorators: { save$: [{
                 type: Input
             }], disabled$: [{
@@ -4082,34 +4117,11 @@ function registerEpistolaProcessLinkSelectorComponent(injector) {
 }
 
 class EpistolaPluginModule {
+    // Kept for back-compat with hosts that follow the README's `forRoot()`
+    // setup. The providers above are now module-level so `imports: [EpistolaPluginModule]`
+    // (what the Valtimo Configurator emits) wires everything on its own.
     static forRoot() {
-        return {
-            ngModule: EpistolaPluginModule,
-            providers: [
-                EpistolaMenuService,
-                {
-                    provide: HTTP_INTERCEPTORS,
-                    useClass: EpistolaTaskContextInterceptor,
-                    multi: true,
-                },
-                {
-                    provide: ENVIRONMENT_INITIALIZER,
-                    multi: true,
-                    useValue: () => {
-                        if (!isEpistolaEnabled())
-                            return;
-                        const injector = inject(Injector);
-                        registerEpistolaDocumentComponent(injector);
-                        registerEpistolaRetryFormComponent(injector);
-                        registerEpistolaOverrideBuilderComponent(injector);
-                        registerEpistolaProcessLinkSelectorComponent(injector);
-                        registerEpistolaDocumentPreviewComponent(injector);
-                        // Eagerly create EpistolaMenuService to trigger menu registration
-                        inject(EpistolaMenuService);
-                    },
-                },
-            ],
-        };
+        return { ngModule: EpistolaPluginModule };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaPluginModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.20", ngImport: i0, type: EpistolaPluginModule, imports: [CommonModule,
@@ -4134,7 +4146,32 @@ class EpistolaPluginModule {
             EpistolaRetryFormComponent,
             EpistolaDocumentPreviewComponent,
             EpistolaAdminPageComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaPluginModule, providers: [EpistolaPluginService, EpistolaAdminService], imports: [CommonModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaPluginModule, providers: [
+            EpistolaPluginService,
+            EpistolaAdminService,
+            EpistolaMenuService,
+            {
+                provide: HTTP_INTERCEPTORS,
+                useClass: EpistolaTaskContextInterceptor,
+                multi: true,
+            },
+            {
+                provide: ENVIRONMENT_INITIALIZER,
+                multi: true,
+                useValue: () => {
+                    if (!isEpistolaEnabled())
+                        return;
+                    const injector = inject(Injector);
+                    registerEpistolaDocumentComponent(injector);
+                    registerEpistolaRetryFormComponent(injector);
+                    registerEpistolaOverrideBuilderComponent(injector);
+                    registerEpistolaProcessLinkSelectorComponent(injector);
+                    registerEpistolaDocumentPreviewComponent(injector);
+                    // Eagerly create EpistolaMenuService to trigger menu registration
+                    inject(EpistolaMenuService);
+                },
+            },
+        ], imports: [CommonModule,
             HttpClientModule,
             PluginTranslatePipeModule,
             FormModule,
@@ -4180,7 +4217,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                         EpistolaDocumentPreviewComponent,
                         EpistolaAdminPageComponent,
                     ],
-                    providers: [EpistolaPluginService, EpistolaAdminService],
+                    providers: [
+                        EpistolaPluginService,
+                        EpistolaAdminService,
+                        EpistolaMenuService,
+                        {
+                            provide: HTTP_INTERCEPTORS,
+                            useClass: EpistolaTaskContextInterceptor,
+                            multi: true,
+                        },
+                        {
+                            provide: ENVIRONMENT_INITIALIZER,
+                            multi: true,
+                            useValue: () => {
+                                if (!isEpistolaEnabled())
+                                    return;
+                                const injector = inject(Injector);
+                                registerEpistolaDocumentComponent(injector);
+                                registerEpistolaRetryFormComponent(injector);
+                                registerEpistolaOverrideBuilderComponent(injector);
+                                registerEpistolaProcessLinkSelectorComponent(injector);
+                                registerEpistolaDocumentPreviewComponent(injector);
+                                // Eagerly create EpistolaMenuService to trigger menu registration
+                                inject(EpistolaMenuService);
+                            },
+                        },
+                    ],
                 }]
         }] });