@epistola.app/valtimo-plugin 0.4.5 → 0.5.1

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

@@ -9,8 +9,8 @@ import * as i2$1 from '@valtimo/plugin';
 import { PluginTranslatePipeModule } from '@valtimo/plugin';
 import * as i3 from '@valtimo/components';
 import { FormModule, InputModule, ValuePathSelectorPrefix, ValuePathSelectorComponent, SelectModule, registerCustomFormioComponent } from '@valtimo/components';
-import { BehaviorSubject, combineLatest, take, Subject, merge, of } from 'rxjs';
-import { startWith, delay, takeUntil, filter, map, tap, switchMap, catchError, take as take$1, debounceTime } from 'rxjs/operators';
+import { BehaviorSubject, combineLatest, take, Subject, of, merge } from 'rxjs';
+import { startWith, delay, shareReplay, take as take$1, takeUntil, filter, map, distinctUntilChanged, tap, switchMap, catchError, debounceTime } from 'rxjs/operators';
 import * as i4 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i2$2 from '@valtimo/process-link';
@@ -46,22 +46,34 @@ class EpistolaPluginService {
         this.apiEndpoint = `${this.configService.config.valtimoApi.endpointUri}v1/plugin/epistola`;
     }
     /**
-     * Get all available templates for a plugin configuration.
+     * Get all available catalogs for a plugin configuration.
      */
-    getTemplates(pluginConfigurationId) {
-        return this.http.get(`${this.apiEndpoint}/configurations/${pluginConfigurationId}/templates`);
+    getCatalogs(pluginConfigurationId) {
+        return this.http.get(`${this.apiEndpoint}/configurations/${pluginConfigurationId}/catalogs`);
+    }
+    /**
+     * Get all available templates for a plugin configuration and catalog.
+     */
+    getTemplates(pluginConfigurationId, catalogId) {
+        const params = {};
+        if (catalogId)
+            params['catalogId'] = catalogId;
+        return this.http.get(`${this.apiEndpoint}/configurations/${pluginConfigurationId}/templates`, { params });
     }
     /**
      * Get template details including its fields.
      */
-    getTemplateDetails(pluginConfigurationId, templateId) {
-        return this.http.get(`${this.apiEndpoint}/configurations/${pluginConfigurationId}/templates/${templateId}`);
+    getTemplateDetails(pluginConfigurationId, templateId, catalogId) {
+        return this.http.get(`${this.apiEndpoint}/configurations/${pluginConfigurationId}/templates/${templateId}`, { params: { catalogId } });
     }
     /**
-     * Get all attribute definitions for a plugin configuration's tenant.
+     * Get all attribute definitions for a plugin configuration's tenant and catalog.
      */
-    getAttributes(pluginConfigurationId) {
-        return this.http.get(`${this.apiEndpoint}/configurations/${pluginConfigurationId}/attributes`);
+    getAttributes(pluginConfigurationId, catalogId) {
+        const params = {};
+        if (catalogId)
+            params['catalogId'] = catalogId;
+        return this.http.get(`${this.apiEndpoint}/configurations/${pluginConfigurationId}/attributes`, { params });
     }
     /**
      * Get all available environments for a plugin configuration.
@@ -72,8 +84,11 @@ class EpistolaPluginService {
     /**
      * Get all variants for a specific template.
      */
-    getVariants(pluginConfigurationId, templateId) {
-        return this.http.get(`${this.apiEndpoint}/configurations/${pluginConfigurationId}/templates/${templateId}/variants`);
+    getVariants(pluginConfigurationId, templateId, catalogId) {
+        const params = {};
+        if (catalogId)
+            params['catalogId'] = catalogId;
+        return this.http.get(`${this.apiEndpoint}/configurations/${pluginConfigurationId}/templates/${templateId}/variants`, { params });
     }
     /**
      * Discover process variable names for a given process definition.
@@ -666,6 +681,7 @@ class GenerateDocumentConfigurationComponent {
     context$;
     valid = new EventEmitter();
     configuration = new EventEmitter();
+    catalogs$ = new BehaviorSubject(initialResource([]));
     templates$ = new BehaviorSubject(initialResource([]));
     variants$ = new BehaviorSubject(initialResource([]));
     environments$ = new BehaviorSubject(initialResource([]));
@@ -675,6 +691,8 @@ class GenerateDocumentConfigurationComponent {
         { id: 'PDF', text: 'PDF' },
         { id: 'HTML', text: 'HTML' }
     ];
+    selectedCatalogId$ = new BehaviorSubject('');
+    /** Composite ID: "catalogId/templateId" */
     selectedTemplateId$ = new BehaviorSubject('');
     selectedVariantId$ = new BehaviorSubject('');
     variantSelectionMode = 'explicit';
@@ -689,20 +707,18 @@ class GenerateDocumentConfigurationComponent {
     formValue$ = new BehaviorSubject(null);
     valid$ = new BehaviorSubject(false);
     pluginConfigurationId$ = new BehaviorSubject('');
+    /** Resolves once with the prefill config (or empty config if none). */
+    prefill$;
     constructor(epistolaPluginService, processLinkStateService, cdr) {
         this.epistolaPluginService = epistolaPluginService;
         this.processLinkStateService = processLinkStateService;
         this.cdr = cdr;
     }
     ngOnInit() {
+        this.prefill$ = this.resolvePrefill$();
         this.initContext();
-        this.initPrefill();
         this.initPluginConfiguration();
-        this.initTemplatesLoading();
-        this.initEnvironmentsLoading();
-        this.initAttributesLoading();
-        this.initVariantsLoading();
-        this.initTemplateFieldsLoading();
+        this.initCascade();
         this.openSaveSubscription();
     }
     ngOnDestroy() {
@@ -713,6 +729,13 @@ class GenerateDocumentConfigurationComponent {
     formValueChange(formOutput) {
         const formValue = formOutput;
         this.formValue$.next(formValue);
+        // When catalog changes, reset template and variant selection
+        if (formValue.catalogId && formValue.catalogId !== this.selectedCatalogId$.getValue()) {
+            this.selectedCatalogId$.next(formValue.catalogId);
+            this.selectedTemplateId$.next('');
+            this.selectedVariantId$.next('');
+        }
+        // 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('');
@@ -781,6 +804,17 @@ class GenerateDocumentConfigurationComponent {
             return '';
         return ` (${entries.map(([k, v]) => `${k}=${v}`).join(', ')})`;
     }
+    /**
+     * Creates a shared observable that resolves once with the prefill config
+     * (or null if no prefill is provided). This is used to seed the cascade
+     * with initial selection values before any loading starts.
+     */
+    resolvePrefill$() {
+        if (!this.prefillConfiguration$) {
+            return of(null).pipe(shareReplay(1));
+        }
+        return this.prefillConfiguration$.pipe(take$1(1), shareReplay(1));
+    }
     initContext() {
         if (this.context$) {
             this.context$.pipe(takeUntil(this.destroy$), filter(([context]) => context === 'case')).subscribe(([, params]) => {
@@ -789,35 +823,6 @@ class GenerateDocumentConfigurationComponent {
             });
         }
     }
-    initPrefill() {
-        if (this.prefillConfiguration$) {
-            this.prefillConfiguration$.pipe(takeUntil(this.destroy$), filter(config => !!config?.templateId)).subscribe(config => {
-                this.selectedTemplateId$.next(config.templateId);
-                if (config.variantAttributes && (Array.isArray(config.variantAttributes) ? config.variantAttributes.length > 0 : Object.keys(config.variantAttributes).length > 0)) {
-                    this.variantSelectionMode = 'attributes';
-                    if (Array.isArray(config.variantAttributes)) {
-                        // New format: VariantAttributeEntry[]
-                        this.variantAttributeEntries = config.variantAttributes
-                            .map(e => ({ key: e.key, value: e.value, required: e.required !== false }));
-                    }
-                    else {
-                        // Old format: Record<string, string> — treat all as required
-                        this.variantAttributeEntries = Object.entries(config.variantAttributes)
-                            .map(([key, value]) => ({ key, value: String(value), required: true }));
-                    }
-                }
-                else if (config.variantId) {
-                    this.variantSelectionMode = 'explicit';
-                    this.selectedVariantId$.next(config.variantId);
-                }
-                if (config.dataMapping) {
-                    this.prefillDataMapping = config.dataMapping;
-                    this.dataMapping$.next(config.dataMapping);
-                }
-                this.cdr.markForCheck();
-            });
-        }
-    }
     initPluginConfiguration() {
         const sources = [];
         if (this.selectedPluginConfigurationData$) {
@@ -828,51 +833,88 @@ class GenerateDocumentConfigurationComponent {
             this.pluginConfigurationId$.next(configurationId);
         });
     }
-    initTemplatesLoading() {
-        this.pluginConfigurationId$.pipe(takeUntil(this.destroy$), filter(id => !!id), tap(() => this.templates$.next(loadingResource(this.templates$.getValue().data))), switchMap(configurationId => this.epistolaPluginService.getTemplates(configurationId).pipe(catchError(() => {
-            this.templates$.next(errorResource([], 'Failed to load templates'));
-            return of(null);
-        }))), filter(result => result !== null)).subscribe(templates => {
-            this.templates$.next(successResource(templates.map(t => ({ id: t.id, text: t.name }))));
-        });
-    }
-    initEnvironmentsLoading() {
-        this.pluginConfigurationId$.pipe(takeUntil(this.destroy$), filter(id => !!id), tap(() => this.environments$.next(loadingResource(this.environments$.getValue().data))), switchMap(configurationId => this.epistolaPluginService.getEnvironments(configurationId).pipe(catchError(() => {
-            this.environments$.next(errorResource([], 'Failed to load environments'));
-            return of(null);
-        }))), filter(result => result !== null)).subscribe(environments => {
-            this.environments$.next(successResource(environments.map(e => ({ id: e.id, text: e.name }))));
+    /**
+     * Sets up the entire reactive cascade:
+     *
+     *   pluginConfigurationId$ → catalogs (+ environments independently)
+     *   prefill + catalogs loaded → seed selectedCatalogId$
+     *   selectedCatalogId$ → templates (+ attributes)
+     *   prefill + templates loaded → seed selectedTemplateId$
+     *   selectedTemplateId$ → variants + templateFields
+     *   prefill + templateFields loaded → seed dataMapping
+     */
+    initCascade() {
+        const configId$ = this.pluginConfigurationId$.pipe(filter(id => !!id), distinctUntilChanged());
+        // ── Catalogs: load when pluginConfigurationId changes ──
+        configId$.pipe(takeUntil(this.destroy$), tap(() => this.catalogs$.next(loadingResource(this.catalogs$.getValue().data))), switchMap(configurationId => this.epistolaPluginService.getCatalogs(configurationId).pipe(map(catalogs => successResource(catalogs.map(c => ({ id: c.id, text: c.name })))), catchError(() => of(errorResource([], 'Failed to load catalogs')))))).subscribe(resource => this.catalogs$.next(resource));
+        // ── Environments: load when pluginConfigurationId changes (independent) ──
+        configId$.pipe(takeUntil(this.destroy$), tap(() => this.environments$.next(loadingResource(this.environments$.getValue().data))), switchMap(configurationId => this.epistolaPluginService.getEnvironments(configurationId).pipe(map(envs => successResource(envs.map(e => ({ id: e.id, text: e.name })))), catchError(() => of(errorResource([], 'Failed to load environments')))))).subscribe(resource => this.environments$.next(resource));
+        // ── Seed selectedCatalogId$ from prefill once catalogs are loaded ──
+        combineLatest([
+            this.prefill$.pipe(filter(config => !!config?.catalogId)),
+            this.catalogs$.pipe(filter(c => !c.loading && c.data.length > 0))
+        ]).pipe(takeUntil(this.destroy$), take$1(1)).subscribe(([config]) => {
+            this.selectedCatalogId$.next(config.catalogId);
         });
-    }
-    initAttributesLoading() {
-        this.pluginConfigurationId$.pipe(takeUntil(this.destroy$), filter(id => !!id), switchMap(configurationId => this.epistolaPluginService.getAttributes(configurationId).pipe(catchError(() => of([]))))).subscribe(attributes => {
+        // ── Templates: load when catalogId changes ──
+        const catalogId$ = this.selectedCatalogId$.pipe(filter(id => !!id), distinctUntilChanged());
+        combineLatest([configId$, catalogId$]).pipe(takeUntil(this.destroy$), tap(() => this.templates$.next(loadingResource(this.templates$.getValue().data))), switchMap(([configurationId, catalogId]) => this.epistolaPluginService.getTemplates(configurationId, catalogId).pipe(map(templates => successResource(templates.map(t => ({ id: t.id, text: t.name })))), catchError(() => of(errorResource([], 'Failed to load templates')))))).subscribe(resource => this.templates$.next(resource));
+        // ── Attributes: load when catalogId changes ──
+        combineLatest([configId$, catalogId$]).pipe(takeUntil(this.destroy$), switchMap(([configurationId, catalogId]) => this.epistolaPluginService.getAttributes(configurationId, catalogId).pipe(catchError(() => of([]))))).subscribe(attributes => {
             this.availableAttributeKeys = attributes.map(a => a.key).sort();
             this.cdr.markForCheck();
         });
-    }
-    initVariantsLoading() {
+        // ── Seed selectedTemplateId$ from prefill once templates are loaded ──
         combineLatest([
-            this.pluginConfigurationId$,
-            this.selectedTemplateId$
-        ]).pipe(takeUntil(this.destroy$), filter(([configId, templateId]) => !!configId && !!templateId), tap(() => this.variants$.next(loadingResource(this.variants$.getValue().data))), switchMap(([configurationId, templateId]) => this.epistolaPluginService.getVariants(configurationId, templateId).pipe(catchError(() => {
-            this.variants$.next(errorResource([], 'Failed to load variants'));
-            return of(null);
-        }))), filter(result => result !== null)).subscribe(variants => {
-            this.variants$.next(successResource(variants.map(v => ({ id: v.id, text: v.name + this.formatAttributes(v.attributes) }))));
+            this.prefill$.pipe(filter(config => !!config?.templateId)),
+            this.templates$.pipe(filter(t => !t.loading && t.data.length > 0))
+        ]).pipe(takeUntil(this.destroy$), take$1(1)).subscribe(([config]) => {
+            this.selectedTemplateId$.next(config.templateId);
         });
-    }
-    initTemplateFieldsLoading() {
-        combineLatest([
-            this.pluginConfigurationId$,
-            this.selectedTemplateId$
-        ]).pipe(takeUntil(this.destroy$), filter(([configId, templateId]) => !!configId && !!templateId), tap(() => {
+        // ── Variants: load when templateId changes ──
+        const templateId$ = this.selectedTemplateId$.pipe(filter(id => !!id), distinctUntilChanged());
+        combineLatest([configId$, catalogId$, templateId$]).pipe(takeUntil(this.destroy$), tap(() => this.variants$.next(loadingResource(this.variants$.getValue().data))), switchMap(([configurationId, catalogId, templateId]) => this.epistolaPluginService.getVariants(configurationId, templateId, catalogId).pipe(map(variants => successResource(variants.map(v => ({ id: v.id, text: v.name + this.formatAttributes(v.attributes) })))), catchError(() => of(errorResource([], 'Failed to load variants')))))).subscribe(resource => this.variants$.next(resource));
+        // ── Template fields: load when templateId changes ──
+        combineLatest([configId$, catalogId$, templateId$]).pipe(takeUntil(this.destroy$), tap(() => {
             this.templateFields$.next(loadingResource(this.templateFields$.getValue().data));
             this.loadProcessVariables();
-        }), switchMap(([configurationId, templateId]) => this.epistolaPluginService.getTemplateDetails(configurationId, templateId).pipe(catchError(() => {
-            this.templateFields$.next(errorResource([], 'Failed to load template fields'));
-            return of(null);
-        }))), filter(result => result !== null)).subscribe(details => {
-            this.templateFields$.next(successResource(details.fields || []));
+        }), switchMap(([configurationId, catalogId, templateId]) => this.epistolaPluginService.getTemplateDetails(configurationId, templateId, catalogId).pipe(map(details => successResource(details.fields || [])), catchError(() => of(errorResource([], 'Failed to load template fields')))))).subscribe(resource => this.templateFields$.next(resource));
+        // ── Seed variant + dataMapping from prefill once templateFields are loaded ──
+        combineLatest([
+            this.prefill$.pipe(filter(config => !!config?.templateId)),
+            this.templateFields$.pipe(filter(tf => !tf.loading && tf.data.length > 0))
+        ]).pipe(takeUntil(this.destroy$), take$1(1)).subscribe(([config]) => {
+            if (!config)
+                return;
+            // Apply variant prefill
+            if (config.variantAttributes && (Array.isArray(config.variantAttributes) ? config.variantAttributes.length > 0 : Object.keys(config.variantAttributes).length > 0)) {
+                this.variantSelectionMode = 'attributes';
+                if (Array.isArray(config.variantAttributes)) {
+                    this.variantAttributeEntries = config.variantAttributes
+                        .map(e => ({ key: e.key, value: e.value, required: e.required !== false }));
+                }
+                else {
+                    this.variantAttributeEntries = Object.entries(config.variantAttributes)
+                        .map(([key, value]) => ({ key, value: String(value), required: true }));
+                }
+            }
+            else if (config.variantId) {
+                this.variantSelectionMode = 'explicit';
+                this.selectedVariantId$.next(config.variantId);
+            }
+            // Apply dataMapping prefill — templateFields are guaranteed loaded at this point.
+            // Use setTimeout to ensure the tree component exists in the DOM (after *ngIf resolves)
+            // before setting the prefill, so ngOnChanges fires correctly on the child.
+            if (config.dataMapping) {
+                this.dataMapping$.next(config.dataMapping);
+                setTimeout(() => {
+                    this.prefillDataMapping = { ...config.dataMapping };
+                    this.cdr.detectChanges();
+                });
+            }
+            else {
+                this.cdr.detectChanges();
+            }
         });
     }
     loadProcessVariables() {
@@ -884,7 +926,8 @@ class GenerateDocumentConfigurationComponent {
         }
     }
     handleValid(formValue) {
-        const baseComplete = !!(formValue?.templateId &&
+        const baseComplete = !!(this.selectedCatalogId$.getValue() &&
+            formValue?.templateId &&
             formValue?.outputFormat &&
             formValue?.filename &&
             formValue?.resultProcessVariable);
@@ -904,8 +947,11 @@ class GenerateDocumentConfigurationComponent {
                 .pipe(take$1(1))
                 .subscribe(([formValue, valid, dataMapping]) => {
                 if (valid && formValue) {
+                    const catalogId = this.selectedCatalogId$.getValue();
+                    const templateId = formValue.templateId;
                     const config = {
-                        templateId: formValue.templateId,
+                        catalogId,
+                        templateId,
                         environmentId: formValue.environmentId || undefined,
                         dataMapping: dataMapping,
                         outputFormat: formValue.outputFormat,
@@ -927,7 +973,7 @@ class GenerateDocumentConfigurationComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: GenerateDocumentConfigurationComponent, deps: [{ token: EpistolaPluginService }, { token: i2$2.ProcessLinkStateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: GenerateDocumentConfigurationComponent, isStandalone: true, selector: "epistola-generate-document-configuration", inputs: { save$: "save$", disabled$: "disabled$", pluginId: "pluginId", prefillConfiguration$: "prefillConfiguration$", selectedPluginConfigurationData$: "selectedPluginConfigurationData$", context$: "context$" }, outputs: { valid: "valid", configuration: "configuration" }, ngImport: i0, template: "<v-form\n    (valueChange)=\"formValueChange($event)\"\n    *ngIf=\"{\n      disabled: disabled$ | async,\n      prefill: prefillConfiguration$ ? (prefillConfiguration$ | async) : null,\n      templates: templates$ | async,\n      variants: variants$ | async,\n      environments: environments$ | async,\n      templateFields: templateFields$ | async,\n      selectedTemplateId: selectedTemplateId$ | async\n    } as obs\"\n>\n  <v-select\n    name=\"templateId\"\n    [title]=\"'templateId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'templateIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [items]=\"obs.templates.data\"\n    [defaultSelectionId]=\"obs.prefill?.templateId\"\n    [disabled]=\"obs.disabled || obs.templates.loading\"\n    [required]=\"true\"\n    [loading]=\"obs.templates.loading\"\n  >\n  </v-select>\n  <div *ngIf=\"obs.templates.error\" class=\"loading-error\">{{ obs.templates.error }}</div>\n\n  <!-- Variant selection mode toggle -->\n  <div class=\"variant-mode-toggle\" *ngIf=\"obs.selectedTemplateId\">\n    <label class=\"variant-mode-label\">{{ 'variantSelectionMode' | pluginTranslate: pluginId | async }}</label>\n    <div class=\"variant-mode-buttons\">\n      <button\n        type=\"button\"\n        class=\"variant-mode-btn\"\n        [class.active]=\"variantSelectionMode === 'explicit'\"\n        (click)=\"onVariantSelectionModeChange('explicit')\"\n        [disabled]=\"obs.disabled\"\n      >{{ 'selectByVariant' | pluginTranslate: pluginId | async }}</button>\n      <button\n        type=\"button\"\n        class=\"variant-mode-btn\"\n        [class.active]=\"variantSelectionMode === 'attributes'\"\n        (click)=\"onVariantSelectionModeChange('attributes')\"\n        [disabled]=\"obs.disabled\"\n      >{{ 'selectByAttributes' | pluginTranslate: pluginId | async }}</button>\n    </div>\n  </div>\n\n  <!-- Explicit variant selection (dropdown) -->\n  <v-select\n    *ngIf=\"variantSelectionMode === 'explicit'\"\n    name=\"variantId\"\n    [title]=\"'variantId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'variantIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [items]=\"obs.variants.data\"\n    [defaultSelectionId]=\"obs.prefill?.variantId\"\n    [disabled]=\"obs.disabled || obs.variants.loading || !obs.selectedTemplateId\"\n    [required]=\"false\"\n    [loading]=\"obs.variants.loading\"\n  >\n  </v-select>\n  <div *ngIf=\"obs.variants.error\" class=\"loading-error\">{{ obs.variants.error }}</div>\n\n  <!-- Attribute-based variant selection -->\n  <div *ngIf=\"variantSelectionMode === 'attributes' && obs.selectedTemplateId\" class=\"variant-attributes-section\">\n    <label class=\"variant-attributes-label\">{{ 'variantAttributes' | pluginTranslate: pluginId | async }}</label>\n    <div class=\"variant-attributes-list\">\n      <div *ngFor=\"let entry of variantAttributeEntries; let i = index\" class=\"variant-attribute-row\">\n        <select\n          *ngIf=\"!entry._customKey\"\n          class=\"variant-attribute-input\"\n          [ngModel]=\"entry.key\"\n          (ngModelChange)=\"onKeySelected(entry, $event)\"\n          [disabled]=\"obs.disabled\"\n        >\n          <option value=\"\" disabled>{{ 'attributeKey' | pluginTranslate: pluginId | async }}</option>\n          <option *ngFor=\"let key of availableAttributeKeys\" [value]=\"key\">{{ key }}</option>\n          <option value=\"__custom__\">{{ 'attributeKeyCustom' | pluginTranslate: pluginId | async }}</option>\n        </select>\n        <div *ngIf=\"entry._customKey\" class=\"custom-key-input\">\n          <input\n            type=\"text\"\n            class=\"variant-attribute-input\"\n            [placeholder]=\"'attributeKey' | pluginTranslate: pluginId | async\"\n            [(ngModel)]=\"entry.key\"\n            (ngModelChange)=\"onAttributeEntryChange()\"\n            [disabled]=\"obs.disabled\"\n          />\n          <button type=\"button\" class=\"custom-key-cancel\" (click)=\"cancelCustomKey(entry)\" [disabled]=\"obs.disabled\">&times;</button>\n        </div>\n        <input\n          type=\"text\"\n          class=\"variant-attribute-input\"\n          [placeholder]=\"'attributeValue' | pluginTranslate: pluginId | async\"\n          [(ngModel)]=\"entry.value\"\n          (ngModelChange)=\"onAttributeEntryChange()\"\n          [disabled]=\"obs.disabled\"\n        />\n        <label class=\"variant-attribute-required-toggle\">\n          <input\n            type=\"checkbox\"\n            [(ngModel)]=\"entry.required\"\n            (ngModelChange)=\"onAttributeEntryChange()\"\n            [disabled]=\"obs.disabled\"\n          />\n          <span class=\"required-label\">{{ (entry.required ? 'attributeRequired' : 'attributePreferred') | pluginTranslate: pluginId | async }}</span>\n        </label>\n        <button\n          type=\"button\"\n          class=\"variant-attribute-remove-btn\"\n          (click)=\"removeAttributeEntry(i)\"\n          [disabled]=\"obs.disabled\"\n          title=\"{{ 'removeAttribute' | pluginTranslate: pluginId | async }}\"\n        >&times;</button>\n      </div>\n    </div>\n    <button\n      type=\"button\"\n      class=\"variant-attribute-add-btn\"\n      (click)=\"addAttributeEntry()\"\n      [disabled]=\"obs.disabled\"\n    >+ {{ 'addAttribute' | pluginTranslate: pluginId | async }}</button>\n  </div>\n\n  <v-select\n    name=\"environmentId\"\n    [title]=\"'environmentId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'environmentIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [items]=\"obs.environments.data\"\n    [defaultSelectionId]=\"obs.prefill?.environmentId\"\n    [disabled]=\"obs.disabled || obs.environments.loading\"\n    [required]=\"false\"\n    [loading]=\"obs.environments.loading\"\n  >\n  </v-select>\n  <div *ngIf=\"obs.environments.error\" class=\"loading-error\">{{ obs.environments.error }}</div>\n\n  <v-select\n    name=\"outputFormat\"\n    [title]=\"'outputFormat' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'outputFormatTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [items]=\"outputFormatOptions\"\n    [defaultSelectionId]=\"obs.prefill?.outputFormat || 'PDF'\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-select>\n\n  <v-input\n    name=\"filename\"\n    [title]=\"'filename' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'filenameTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.filename\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"correlationId\"\n    [title]=\"'correlationId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'correlationIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.correlationId\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"false\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"resultProcessVariable\"\n    [title]=\"'resultProcessVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'resultProcessVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.resultProcessVariable\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-input>\n</v-form>\n\n<div *ngIf=\"(templateFields$ | async)?.error as templateFieldsError\" class=\"loading-error\">{{ templateFieldsError }}</div>\n\n<epistola-data-mapping-tree\n  *ngIf=\"(selectedTemplateId$ | async)\"\n  [pluginId]=\"pluginId\"\n  [templateFields]=\"(templateFields$ | async)?.data ?? []\"\n  [disabled]=\"!!(disabled$ | async)\"\n  [prefillMapping]=\"prefillDataMapping\"\n  [caseDefinitionKey]=\"caseDefinitionKey\"\n  [processVariables]=\"processVariables\"\n  (mappingChange)=\"onDataMappingChange($event)\"\n  (requiredFieldsStatus)=\"onRequiredFieldsStatusChange($event)\"\n></epistola-data-mapping-tree>\n\n<div class=\"validation-summary\" *ngIf=\"(selectedTemplateId$ | async) && requiredFieldsStatus.total > 0\">\n  <span *ngIf=\"requiredFieldsStatus.mapped === requiredFieldsStatus.total\" class=\"validation-complete\">\n    {{ 'requiredFieldsComplete' | pluginTranslate: pluginId | async }}\n  </span>\n  <span *ngIf=\"requiredFieldsStatus.mapped < requiredFieldsStatus.total\" class=\"validation-incomplete\">\n    {{ requiredFieldsStatus.mapped }} / {{ requiredFieldsStatus.total }}\n    {{ 'validationSummary' | pluginTranslate: pluginId | async }}\n  </span>\n</div>\n", styles: [".loading-error{padding:.25rem .75rem;font-size:.8125rem;color:#dc3545}.validation-summary{margin-top:.5rem;padding:.5rem .75rem;border-radius:4px;font-size:.875rem}.validation-summary .validation-complete{color:#198754}.validation-summary .validation-incomplete{color:#dc3545;font-weight:500}.variant-mode-toggle{margin-bottom:1rem;padding:0 .75rem}.variant-mode-label{display:block;font-size:.875rem;font-weight:500;margin-bottom:.375rem}.variant-mode-buttons{display:flex;gap:0;border:1px solid #d1d5db;border-radius:4px;overflow:hidden;width:fit-content}.variant-mode-btn{padding:.375rem .75rem;font-size:.8125rem;background:#fff;border:none;border-right:1px solid #d1d5db;cursor:pointer;color:#374151;transition:background-color .15s,color .15s}.variant-mode-btn:last-child{border-right:none}.variant-mode-btn:hover:not([disabled]){background:#f3f4f6}.variant-mode-btn.active{background:#2563eb;color:#fff}.variant-mode-btn[disabled]{opacity:.5;cursor:not-allowed}.variant-attributes-section{margin-bottom:1rem;padding:0 .75rem}.variant-attributes-label{display:block;font-size:.875rem;font-weight:500;margin-bottom:.375rem}.variant-attributes-list{display:flex;flex-direction:column;gap:.375rem}.variant-attribute-row{display:flex;gap:.375rem;align-items:center}.variant-attribute-input{flex:1;padding:.375rem .5rem;font-size:.8125rem;border:1px solid #d1d5db;border-radius:4px;outline:none}.variant-attribute-input:focus{border-color:#2563eb;box-shadow:0 0 0 1px #2563eb}.variant-attribute-input[disabled]{opacity:.5;background:#f9fafb}.custom-key-input{display:flex;flex:1;gap:.25rem}.custom-key-input .variant-attribute-input{flex:1}.custom-key-cancel{padding:.25rem .5rem;font-size:1rem;line-height:1;background:none;border:1px solid #d1d5db;border-radius:4px;cursor:pointer;color:#6b7280}.custom-key-cancel:hover:not([disabled]){color:#dc3545;border-color:#dc3545}.custom-key-cancel[disabled]{opacity:.5;cursor:not-allowed}.variant-attribute-required-toggle{display:flex;align-items:center;gap:.25rem;font-size:.75rem;color:#374151;white-space:nowrap;cursor:pointer}.variant-attribute-required-toggle input[type=checkbox]{margin:0;cursor:pointer}.variant-attribute-required-toggle .required-label{-webkit-user-select:none;user-select:none}.variant-attribute-remove-btn{padding:.25rem .5rem;font-size:1rem;line-height:1;background:none;border:1px solid #d1d5db;border-radius:4px;cursor:pointer;color:#6b7280}.variant-attribute-remove-btn:hover:not([disabled]){color:#dc3545;border-color:#dc3545}.variant-attribute-remove-btn[disabled]{opacity:.5;cursor:not-allowed}.variant-attribute-add-btn{margin-top:.375rem;padding:.25rem .5rem;font-size:.8125rem;background:none;border:1px dashed #d1d5db;border-radius:4px;cursor:pointer;color:#6b7280}.variant-attribute-add-btn:hover:not([disabled]){color:#2563eb;border-color:#2563eb}.variant-attribute-add-btn[disabled]{opacity:.5;cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PluginTranslatePipeModule }, { kind: "pipe", type: i2$1.PluginTranslatePipe, name: "pluginTranslate" }, { kind: "ngmodule", type: FormModule }, { kind: "component", type: i3.FormComponent, selector: "v-form", inputs: ["className"], outputs: ["valueChange"] }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i3.InputComponent, selector: "v-input", inputs: ["name", "type", "title", "titleTranslationKey", "defaultValue", "widthPx", "fullWidth", "margin", "smallMargin", "disabled", "step", "min", "maxLength", "tooltip", "required", "hideNumberSpinBox", "smallLabel", "rows", "clear$", "carbonTheme", "placeholder", "dataTestId", "trim", "presetsTitle", "presetOptions"], outputs: ["valueChange"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3.SelectComponent, selector: "v-select", inputs: ["items", "defaultSelection", "defaultSelectionId", "defaultSelectionIds", "disabled", "dropUp", "invalid", "multiple", "margin", "widthInPx", "notFoundText", "clearAllText", "clearText", "clearable", "name", "title", "titleTranslationKey", "clearSelectionSubject$", "tooltip", "required", "loading", "loadingText", "placeholder", "smallMargin", "carbonTheme", "appendInline", "warn", "warnText", "dataTestId"], outputs: ["selectedChange"] }, { kind: "component", type: DataMappingTreeComponent, selector: "epistola-data-mapping-tree", inputs: ["pluginId", "templateFields", "prefillMapping", "disabled", "caseDefinitionKey", "processVariables"], outputs: ["mappingChange", "requiredFieldsStatus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: GenerateDocumentConfigurationComponent, isStandalone: true, selector: "epistola-generate-document-configuration", inputs: { save$: "save$", disabled$: "disabled$", pluginId: "pluginId", prefillConfiguration$: "prefillConfiguration$", selectedPluginConfigurationData$: "selectedPluginConfigurationData$", context$: "context$" }, outputs: { valid: "valid", configuration: "configuration" }, ngImport: i0, template: "<v-form\n    (valueChange)=\"formValueChange($event)\"\n    *ngIf=\"{\n      disabled: disabled$ | async,\n      prefill: prefillConfiguration$ ? (prefillConfiguration$ | async) : null,\n      catalogs: catalogs$ | async,\n      templates: templates$ | async,\n      variants: variants$ | async,\n      environments: environments$ | async,\n      templateFields: templateFields$ | async,\n      selectedCatalogId: selectedCatalogId$ | async,\n      selectedTemplateId: selectedTemplateId$ | async\n    } as obs\"\n>\n  <v-select\n    name=\"catalogId\"\n    [title]=\"'catalogId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'catalogIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [items]=\"obs.catalogs.data\"\n    [defaultSelectionId]=\"obs.prefill?.catalogId\"\n    [disabled]=\"obs.disabled || obs.catalogs.loading\"\n    [required]=\"true\"\n    [loading]=\"obs.catalogs.loading\"\n  >\n  </v-select>\n  <div *ngIf=\"obs.catalogs.error\" class=\"loading-error\">{{ obs.catalogs.error }}</div>\n\n  <v-select\n    name=\"templateId\"\n    [title]=\"'templateId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'templateIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [items]=\"obs.templates.data\"\n    [defaultSelectionId]=\"obs.prefill?.templateId\"\n    [disabled]=\"obs.disabled || obs.templates.loading || !obs.selectedCatalogId\"\n    [required]=\"true\"\n    [loading]=\"obs.templates.loading\"\n  >\n  </v-select>\n  <div *ngIf=\"obs.templates.error\" class=\"loading-error\">{{ obs.templates.error }}</div>\n\n  <!-- Variant selection mode toggle -->\n  <div class=\"variant-mode-toggle\" *ngIf=\"obs.selectedTemplateId\">\n    <label class=\"variant-mode-label\">{{ 'variantSelectionMode' | pluginTranslate: pluginId | async }}</label>\n    <div class=\"variant-mode-buttons\">\n      <button\n        type=\"button\"\n        class=\"variant-mode-btn\"\n        [class.active]=\"variantSelectionMode === 'explicit'\"\n        (click)=\"onVariantSelectionModeChange('explicit')\"\n        [disabled]=\"obs.disabled\"\n      >{{ 'selectByVariant' | pluginTranslate: pluginId | async }}</button>\n      <button\n        type=\"button\"\n        class=\"variant-mode-btn\"\n        [class.active]=\"variantSelectionMode === 'attributes'\"\n        (click)=\"onVariantSelectionModeChange('attributes')\"\n        [disabled]=\"obs.disabled\"\n      >{{ 'selectByAttributes' | pluginTranslate: pluginId | async }}</button>\n    </div>\n  </div>\n\n  <!-- Explicit variant selection (dropdown) -->\n  <v-select\n    *ngIf=\"variantSelectionMode === 'explicit'\"\n    name=\"variantId\"\n    [title]=\"'variantId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'variantIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [items]=\"obs.variants.data\"\n    [defaultSelectionId]=\"obs.prefill?.variantId\"\n    [disabled]=\"obs.disabled || obs.variants.loading || !obs.selectedTemplateId\"\n    [required]=\"false\"\n    [loading]=\"obs.variants.loading\"\n  >\n  </v-select>\n  <div *ngIf=\"obs.variants.error\" class=\"loading-error\">{{ obs.variants.error }}</div>\n\n  <!-- Attribute-based variant selection -->\n  <div *ngIf=\"variantSelectionMode === 'attributes' && obs.selectedTemplateId\" class=\"variant-attributes-section\">\n    <label class=\"variant-attributes-label\">{{ 'variantAttributes' | pluginTranslate: pluginId | async }}</label>\n    <div class=\"variant-attributes-list\">\n      <div *ngFor=\"let entry of variantAttributeEntries; let i = index\" class=\"variant-attribute-row\">\n        <select\n          *ngIf=\"!entry._customKey\"\n          class=\"variant-attribute-input\"\n          [ngModel]=\"entry.key\"\n          (ngModelChange)=\"onKeySelected(entry, $event)\"\n          [disabled]=\"obs.disabled\"\n        >\n          <option value=\"\" disabled>{{ 'attributeKey' | pluginTranslate: pluginId | async }}</option>\n          <option *ngFor=\"let key of availableAttributeKeys\" [value]=\"key\">{{ key }}</option>\n          <option value=\"__custom__\">{{ 'attributeKeyCustom' | pluginTranslate: pluginId | async }}</option>\n        </select>\n        <div *ngIf=\"entry._customKey\" class=\"custom-key-input\">\n          <input\n            type=\"text\"\n            class=\"variant-attribute-input\"\n            [placeholder]=\"'attributeKey' | pluginTranslate: pluginId | async\"\n            [(ngModel)]=\"entry.key\"\n            (ngModelChange)=\"onAttributeEntryChange()\"\n            [disabled]=\"obs.disabled\"\n          />\n          <button type=\"button\" class=\"custom-key-cancel\" (click)=\"cancelCustomKey(entry)\" [disabled]=\"obs.disabled\">&times;</button>\n        </div>\n        <input\n          type=\"text\"\n          class=\"variant-attribute-input\"\n          [placeholder]=\"'attributeValue' | pluginTranslate: pluginId | async\"\n          [(ngModel)]=\"entry.value\"\n          (ngModelChange)=\"onAttributeEntryChange()\"\n          [disabled]=\"obs.disabled\"\n        />\n        <label class=\"variant-attribute-required-toggle\">\n          <input\n            type=\"checkbox\"\n            [(ngModel)]=\"entry.required\"\n            (ngModelChange)=\"onAttributeEntryChange()\"\n            [disabled]=\"obs.disabled\"\n          />\n          <span class=\"required-label\">{{ (entry.required ? 'attributeRequired' : 'attributePreferred') | pluginTranslate: pluginId | async }}</span>\n        </label>\n        <button\n          type=\"button\"\n          class=\"variant-attribute-remove-btn\"\n          (click)=\"removeAttributeEntry(i)\"\n          [disabled]=\"obs.disabled\"\n          title=\"{{ 'removeAttribute' | pluginTranslate: pluginId | async }}\"\n        >&times;</button>\n      </div>\n    </div>\n    <button\n      type=\"button\"\n      class=\"variant-attribute-add-btn\"\n      (click)=\"addAttributeEntry()\"\n      [disabled]=\"obs.disabled\"\n    >+ {{ 'addAttribute' | pluginTranslate: pluginId | async }}</button>\n  </div>\n\n  <v-select\n    name=\"environmentId\"\n    [title]=\"'environmentId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'environmentIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [items]=\"obs.environments.data\"\n    [defaultSelectionId]=\"obs.prefill?.environmentId\"\n    [disabled]=\"obs.disabled || obs.environments.loading\"\n    [required]=\"false\"\n    [loading]=\"obs.environments.loading\"\n  >\n  </v-select>\n  <div *ngIf=\"obs.environments.error\" class=\"loading-error\">{{ obs.environments.error }}</div>\n\n  <v-select\n    name=\"outputFormat\"\n    [title]=\"'outputFormat' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'outputFormatTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [items]=\"outputFormatOptions\"\n    [defaultSelectionId]=\"obs.prefill?.outputFormat || 'PDF'\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-select>\n\n  <v-input\n    name=\"filename\"\n    [title]=\"'filename' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'filenameTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.filename\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"correlationId\"\n    [title]=\"'correlationId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'correlationIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.correlationId\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"false\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"resultProcessVariable\"\n    [title]=\"'resultProcessVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'resultProcessVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.resultProcessVariable\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-input>\n</v-form>\n\n<div *ngIf=\"(templateFields$ | async)?.error as templateFieldsError\" class=\"loading-error\">{{ templateFieldsError }}</div>\n\n<epistola-data-mapping-tree\n  *ngIf=\"(selectedTemplateId$ | async)\"\n  [pluginId]=\"pluginId\"\n  [templateFields]=\"(templateFields$ | async)?.data ?? []\"\n  [disabled]=\"!!(disabled$ | async)\"\n  [prefillMapping]=\"prefillDataMapping\"\n  [caseDefinitionKey]=\"caseDefinitionKey\"\n  [processVariables]=\"processVariables\"\n  (mappingChange)=\"onDataMappingChange($event)\"\n  (requiredFieldsStatus)=\"onRequiredFieldsStatusChange($event)\"\n></epistola-data-mapping-tree>\n\n<div class=\"validation-summary\" *ngIf=\"(selectedTemplateId$ | async) && requiredFieldsStatus.total > 0\">\n  <span *ngIf=\"requiredFieldsStatus.mapped === requiredFieldsStatus.total\" class=\"validation-complete\">\n    {{ 'requiredFieldsComplete' | pluginTranslate: pluginId | async }}\n  </span>\n  <span *ngIf=\"requiredFieldsStatus.mapped < requiredFieldsStatus.total\" class=\"validation-incomplete\">\n    {{ requiredFieldsStatus.mapped }} / {{ requiredFieldsStatus.total }}\n    {{ 'validationSummary' | pluginTranslate: pluginId | async }}\n  </span>\n</div>\n", styles: [".loading-error{padding:.25rem .75rem;font-size:.8125rem;color:#dc3545}.validation-summary{margin-top:.5rem;padding:.5rem .75rem;border-radius:4px;font-size:.875rem}.validation-summary .validation-complete{color:#198754}.validation-summary .validation-incomplete{color:#dc3545;font-weight:500}.variant-mode-toggle{margin-bottom:1rem;padding:0 .75rem}.variant-mode-label{display:block;font-size:.875rem;font-weight:500;margin-bottom:.375rem}.variant-mode-buttons{display:flex;gap:0;border:1px solid #d1d5db;border-radius:4px;overflow:hidden;width:fit-content}.variant-mode-btn{padding:.375rem .75rem;font-size:.8125rem;background:#fff;border:none;border-right:1px solid #d1d5db;cursor:pointer;color:#374151;transition:background-color .15s,color .15s}.variant-mode-btn:last-child{border-right:none}.variant-mode-btn:hover:not([disabled]){background:#f3f4f6}.variant-mode-btn.active{background:#2563eb;color:#fff}.variant-mode-btn[disabled]{opacity:.5;cursor:not-allowed}.variant-attributes-section{margin-bottom:1rem;padding:0 .75rem}.variant-attributes-label{display:block;font-size:.875rem;font-weight:500;margin-bottom:.375rem}.variant-attributes-list{display:flex;flex-direction:column;gap:.375rem}.variant-attribute-row{display:flex;gap:.375rem;align-items:center}.variant-attribute-input{flex:1;padding:.375rem .5rem;font-size:.8125rem;border:1px solid #d1d5db;border-radius:4px;outline:none}.variant-attribute-input:focus{border-color:#2563eb;box-shadow:0 0 0 1px #2563eb}.variant-attribute-input[disabled]{opacity:.5;background:#f9fafb}.custom-key-input{display:flex;flex:1;gap:.25rem}.custom-key-input .variant-attribute-input{flex:1}.custom-key-cancel{padding:.25rem .5rem;font-size:1rem;line-height:1;background:none;border:1px solid #d1d5db;border-radius:4px;cursor:pointer;color:#6b7280}.custom-key-cancel:hover:not([disabled]){color:#dc3545;border-color:#dc3545}.custom-key-cancel[disabled]{opacity:.5;cursor:not-allowed}.variant-attribute-required-toggle{display:flex;align-items:center;gap:.25rem;font-size:.75rem;color:#374151;white-space:nowrap;cursor:pointer}.variant-attribute-required-toggle input[type=checkbox]{margin:0;cursor:pointer}.variant-attribute-required-toggle .required-label{-webkit-user-select:none;user-select:none}.variant-attribute-remove-btn{padding:.25rem .5rem;font-size:1rem;line-height:1;background:none;border:1px solid #d1d5db;border-radius:4px;cursor:pointer;color:#6b7280}.variant-attribute-remove-btn:hover:not([disabled]){color:#dc3545;border-color:#dc3545}.variant-attribute-remove-btn[disabled]{opacity:.5;cursor:not-allowed}.variant-attribute-add-btn{margin-top:.375rem;padding:.25rem .5rem;font-size:.8125rem;background:none;border:1px dashed #d1d5db;border-radius:4px;cursor:pointer;color:#6b7280}.variant-attribute-add-btn:hover:not([disabled]){color:#2563eb;border-color:#2563eb}.variant-attribute-add-btn[disabled]{opacity:.5;cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PluginTranslatePipeModule }, { kind: "pipe", type: i2$1.PluginTranslatePipe, name: "pluginTranslate" }, { kind: "ngmodule", type: FormModule }, { kind: "component", type: i3.FormComponent, selector: "v-form", inputs: ["className"], outputs: ["valueChange"] }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i3.InputComponent, selector: "v-input", inputs: ["name", "type", "title", "titleTranslationKey", "defaultValue", "widthPx", "fullWidth", "margin", "smallMargin", "disabled", "step", "min", "maxLength", "tooltip", "required", "hideNumberSpinBox", "smallLabel", "rows", "clear$", "carbonTheme", "placeholder", "dataTestId", "trim", "presetsTitle", "presetOptions"], outputs: ["valueChange"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3.SelectComponent, selector: "v-select", inputs: ["items", "defaultSelection", "defaultSelectionId", "defaultSelectionIds", "disabled", "dropUp", "invalid", "multiple", "margin", "widthInPx", "notFoundText", "clearAllText", "clearText", "clearable", "name", "title", "titleTranslationKey", "clearSelectionSubject$", "tooltip", "required", "loading", "loadingText", "placeholder", "smallMargin", "carbonTheme", "appendInline", "warn", "warnText", "dataTestId"], outputs: ["selectedChange"] }, { kind: "component", type: DataMappingTreeComponent, selector: "epistola-data-mapping-tree", inputs: ["pluginId", "templateFields", "prefillMapping", "disabled", "caseDefinitionKey", "processVariables"], outputs: ["mappingChange", "requiredFieldsStatus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: GenerateDocumentConfigurationComponent, decorators: [{
             type: Component,
@@ -939,7 +985,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                         InputModule,
                         SelectModule,
                         DataMappingTreeComponent
-                    ], template: "<v-form\n    (valueChange)=\"formValueChange($event)\"\n    *ngIf=\"{\n      disabled: disabled$ | async,\n      prefill: prefillConfiguration$ ? (prefillConfiguration$ | async) : null,\n      templates: templates$ | async,\n      variants: variants$ | async,\n      environments: environments$ | async,\n      templateFields: templateFields$ | async,\n      selectedTemplateId: selectedTemplateId$ | async\n    } as obs\"\n>\n  <v-select\n    name=\"templateId\"\n    [title]=\"'templateId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'templateIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [items]=\"obs.templates.data\"\n    [defaultSelectionId]=\"obs.prefill?.templateId\"\n    [disabled]=\"obs.disabled || obs.templates.loading\"\n    [required]=\"true\"\n    [loading]=\"obs.templates.loading\"\n  >\n  </v-select>\n  <div *ngIf=\"obs.templates.error\" class=\"loading-error\">{{ obs.templates.error }}</div>\n\n  <!-- Variant selection mode toggle -->\n  <div class=\"variant-mode-toggle\" *ngIf=\"obs.selectedTemplateId\">\n    <label class=\"variant-mode-label\">{{ 'variantSelectionMode' | pluginTranslate: pluginId | async }}</label>\n    <div class=\"variant-mode-buttons\">\n      <button\n        type=\"button\"\n        class=\"variant-mode-btn\"\n        [class.active]=\"variantSelectionMode === 'explicit'\"\n        (click)=\"onVariantSelectionModeChange('explicit')\"\n        [disabled]=\"obs.disabled\"\n      >{{ 'selectByVariant' | pluginTranslate: pluginId | async }}</button>\n      <button\n        type=\"button\"\n        class=\"variant-mode-btn\"\n        [class.active]=\"variantSelectionMode === 'attributes'\"\n        (click)=\"onVariantSelectionModeChange('attributes')\"\n        [disabled]=\"obs.disabled\"\n      >{{ 'selectByAttributes' | pluginTranslate: pluginId | async }}</button>\n    </div>\n  </div>\n\n  <!-- Explicit variant selection (dropdown) -->\n  <v-select\n    *ngIf=\"variantSelectionMode === 'explicit'\"\n    name=\"variantId\"\n    [title]=\"'variantId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'variantIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [items]=\"obs.variants.data\"\n    [defaultSelectionId]=\"obs.prefill?.variantId\"\n    [disabled]=\"obs.disabled || obs.variants.loading || !obs.selectedTemplateId\"\n    [required]=\"false\"\n    [loading]=\"obs.variants.loading\"\n  >\n  </v-select>\n  <div *ngIf=\"obs.variants.error\" class=\"loading-error\">{{ obs.variants.error }}</div>\n\n  <!-- Attribute-based variant selection -->\n  <div *ngIf=\"variantSelectionMode === 'attributes' && obs.selectedTemplateId\" class=\"variant-attributes-section\">\n    <label class=\"variant-attributes-label\">{{ 'variantAttributes' | pluginTranslate: pluginId | async }}</label>\n    <div class=\"variant-attributes-list\">\n      <div *ngFor=\"let entry of variantAttributeEntries; let i = index\" class=\"variant-attribute-row\">\n        <select\n          *ngIf=\"!entry._customKey\"\n          class=\"variant-attribute-input\"\n          [ngModel]=\"entry.key\"\n          (ngModelChange)=\"onKeySelected(entry, $event)\"\n          [disabled]=\"obs.disabled\"\n        >\n          <option value=\"\" disabled>{{ 'attributeKey' | pluginTranslate: pluginId | async }}</option>\n          <option *ngFor=\"let key of availableAttributeKeys\" [value]=\"key\">{{ key }}</option>\n          <option value=\"__custom__\">{{ 'attributeKeyCustom' | pluginTranslate: pluginId | async }}</option>\n        </select>\n        <div *ngIf=\"entry._customKey\" class=\"custom-key-input\">\n          <input\n            type=\"text\"\n            class=\"variant-attribute-input\"\n            [placeholder]=\"'attributeKey' | pluginTranslate: pluginId | async\"\n            [(ngModel)]=\"entry.key\"\n            (ngModelChange)=\"onAttributeEntryChange()\"\n            [disabled]=\"obs.disabled\"\n          />\n          <button type=\"button\" class=\"custom-key-cancel\" (click)=\"cancelCustomKey(entry)\" [disabled]=\"obs.disabled\">&times;</button>\n        </div>\n        <input\n          type=\"text\"\n          class=\"variant-attribute-input\"\n          [placeholder]=\"'attributeValue' | pluginTranslate: pluginId | async\"\n          [(ngModel)]=\"entry.value\"\n          (ngModelChange)=\"onAttributeEntryChange()\"\n          [disabled]=\"obs.disabled\"\n        />\n        <label class=\"variant-attribute-required-toggle\">\n          <input\n            type=\"checkbox\"\n            [(ngModel)]=\"entry.required\"\n            (ngModelChange)=\"onAttributeEntryChange()\"\n            [disabled]=\"obs.disabled\"\n          />\n          <span class=\"required-label\">{{ (entry.required ? 'attributeRequired' : 'attributePreferred') | pluginTranslate: pluginId | async }}</span>\n        </label>\n        <button\n          type=\"button\"\n          class=\"variant-attribute-remove-btn\"\n          (click)=\"removeAttributeEntry(i)\"\n          [disabled]=\"obs.disabled\"\n          title=\"{{ 'removeAttribute' | pluginTranslate: pluginId | async }}\"\n        >&times;</button>\n      </div>\n    </div>\n    <button\n      type=\"button\"\n      class=\"variant-attribute-add-btn\"\n      (click)=\"addAttributeEntry()\"\n      [disabled]=\"obs.disabled\"\n    >+ {{ 'addAttribute' | pluginTranslate: pluginId | async }}</button>\n  </div>\n\n  <v-select\n    name=\"environmentId\"\n    [title]=\"'environmentId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'environmentIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [items]=\"obs.environments.data\"\n    [defaultSelectionId]=\"obs.prefill?.environmentId\"\n    [disabled]=\"obs.disabled || obs.environments.loading\"\n    [required]=\"false\"\n    [loading]=\"obs.environments.loading\"\n  >\n  </v-select>\n  <div *ngIf=\"obs.environments.error\" class=\"loading-error\">{{ obs.environments.error }}</div>\n\n  <v-select\n    name=\"outputFormat\"\n    [title]=\"'outputFormat' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'outputFormatTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [items]=\"outputFormatOptions\"\n    [defaultSelectionId]=\"obs.prefill?.outputFormat || 'PDF'\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-select>\n\n  <v-input\n    name=\"filename\"\n    [title]=\"'filename' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'filenameTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.filename\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"correlationId\"\n    [title]=\"'correlationId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'correlationIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.correlationId\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"false\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"resultProcessVariable\"\n    [title]=\"'resultProcessVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'resultProcessVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.resultProcessVariable\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-input>\n</v-form>\n\n<div *ngIf=\"(templateFields$ | async)?.error as templateFieldsError\" class=\"loading-error\">{{ templateFieldsError }}</div>\n\n<epistola-data-mapping-tree\n  *ngIf=\"(selectedTemplateId$ | async)\"\n  [pluginId]=\"pluginId\"\n  [templateFields]=\"(templateFields$ | async)?.data ?? []\"\n  [disabled]=\"!!(disabled$ | async)\"\n  [prefillMapping]=\"prefillDataMapping\"\n  [caseDefinitionKey]=\"caseDefinitionKey\"\n  [processVariables]=\"processVariables\"\n  (mappingChange)=\"onDataMappingChange($event)\"\n  (requiredFieldsStatus)=\"onRequiredFieldsStatusChange($event)\"\n></epistola-data-mapping-tree>\n\n<div class=\"validation-summary\" *ngIf=\"(selectedTemplateId$ | async) && requiredFieldsStatus.total > 0\">\n  <span *ngIf=\"requiredFieldsStatus.mapped === requiredFieldsStatus.total\" class=\"validation-complete\">\n    {{ 'requiredFieldsComplete' | pluginTranslate: pluginId | async }}\n  </span>\n  <span *ngIf=\"requiredFieldsStatus.mapped < requiredFieldsStatus.total\" class=\"validation-incomplete\">\n    {{ requiredFieldsStatus.mapped }} / {{ requiredFieldsStatus.total }}\n    {{ 'validationSummary' | pluginTranslate: pluginId | async }}\n  </span>\n</div>\n", styles: [".loading-error{padding:.25rem .75rem;font-size:.8125rem;color:#dc3545}.validation-summary{margin-top:.5rem;padding:.5rem .75rem;border-radius:4px;font-size:.875rem}.validation-summary .validation-complete{color:#198754}.validation-summary .validation-incomplete{color:#dc3545;font-weight:500}.variant-mode-toggle{margin-bottom:1rem;padding:0 .75rem}.variant-mode-label{display:block;font-size:.875rem;font-weight:500;margin-bottom:.375rem}.variant-mode-buttons{display:flex;gap:0;border:1px solid #d1d5db;border-radius:4px;overflow:hidden;width:fit-content}.variant-mode-btn{padding:.375rem .75rem;font-size:.8125rem;background:#fff;border:none;border-right:1px solid #d1d5db;cursor:pointer;color:#374151;transition:background-color .15s,color .15s}.variant-mode-btn:last-child{border-right:none}.variant-mode-btn:hover:not([disabled]){background:#f3f4f6}.variant-mode-btn.active{background:#2563eb;color:#fff}.variant-mode-btn[disabled]{opacity:.5;cursor:not-allowed}.variant-attributes-section{margin-bottom:1rem;padding:0 .75rem}.variant-attributes-label{display:block;font-size:.875rem;font-weight:500;margin-bottom:.375rem}.variant-attributes-list{display:flex;flex-direction:column;gap:.375rem}.variant-attribute-row{display:flex;gap:.375rem;align-items:center}.variant-attribute-input{flex:1;padding:.375rem .5rem;font-size:.8125rem;border:1px solid #d1d5db;border-radius:4px;outline:none}.variant-attribute-input:focus{border-color:#2563eb;box-shadow:0 0 0 1px #2563eb}.variant-attribute-input[disabled]{opacity:.5;background:#f9fafb}.custom-key-input{display:flex;flex:1;gap:.25rem}.custom-key-input .variant-attribute-input{flex:1}.custom-key-cancel{padding:.25rem .5rem;font-size:1rem;line-height:1;background:none;border:1px solid #d1d5db;border-radius:4px;cursor:pointer;color:#6b7280}.custom-key-cancel:hover:not([disabled]){color:#dc3545;border-color:#dc3545}.custom-key-cancel[disabled]{opacity:.5;cursor:not-allowed}.variant-attribute-required-toggle{display:flex;align-items:center;gap:.25rem;font-size:.75rem;color:#374151;white-space:nowrap;cursor:pointer}.variant-attribute-required-toggle input[type=checkbox]{margin:0;cursor:pointer}.variant-attribute-required-toggle .required-label{-webkit-user-select:none;user-select:none}.variant-attribute-remove-btn{padding:.25rem .5rem;font-size:1rem;line-height:1;background:none;border:1px solid #d1d5db;border-radius:4px;cursor:pointer;color:#6b7280}.variant-attribute-remove-btn:hover:not([disabled]){color:#dc3545;border-color:#dc3545}.variant-attribute-remove-btn[disabled]{opacity:.5;cursor:not-allowed}.variant-attribute-add-btn{margin-top:.375rem;padding:.25rem .5rem;font-size:.8125rem;background:none;border:1px dashed #d1d5db;border-radius:4px;cursor:pointer;color:#6b7280}.variant-attribute-add-btn:hover:not([disabled]){color:#2563eb;border-color:#2563eb}.variant-attribute-add-btn[disabled]{opacity:.5;cursor:not-allowed}\n"] }]
+                    ], template: "<v-form\n    (valueChange)=\"formValueChange($event)\"\n    *ngIf=\"{\n      disabled: disabled$ | async,\n      prefill: prefillConfiguration$ ? (prefillConfiguration$ | async) : null,\n      catalogs: catalogs$ | async,\n      templates: templates$ | async,\n      variants: variants$ | async,\n      environments: environments$ | async,\n      templateFields: templateFields$ | async,\n      selectedCatalogId: selectedCatalogId$ | async,\n      selectedTemplateId: selectedTemplateId$ | async\n    } as obs\"\n>\n  <v-select\n    name=\"catalogId\"\n    [title]=\"'catalogId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'catalogIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [items]=\"obs.catalogs.data\"\n    [defaultSelectionId]=\"obs.prefill?.catalogId\"\n    [disabled]=\"obs.disabled || obs.catalogs.loading\"\n    [required]=\"true\"\n    [loading]=\"obs.catalogs.loading\"\n  >\n  </v-select>\n  <div *ngIf=\"obs.catalogs.error\" class=\"loading-error\">{{ obs.catalogs.error }}</div>\n\n  <v-select\n    name=\"templateId\"\n    [title]=\"'templateId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'templateIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [items]=\"obs.templates.data\"\n    [defaultSelectionId]=\"obs.prefill?.templateId\"\n    [disabled]=\"obs.disabled || obs.templates.loading || !obs.selectedCatalogId\"\n    [required]=\"true\"\n    [loading]=\"obs.templates.loading\"\n  >\n  </v-select>\n  <div *ngIf=\"obs.templates.error\" class=\"loading-error\">{{ obs.templates.error }}</div>\n\n  <!-- Variant selection mode toggle -->\n  <div class=\"variant-mode-toggle\" *ngIf=\"obs.selectedTemplateId\">\n    <label class=\"variant-mode-label\">{{ 'variantSelectionMode' | pluginTranslate: pluginId | async }}</label>\n    <div class=\"variant-mode-buttons\">\n      <button\n        type=\"button\"\n        class=\"variant-mode-btn\"\n        [class.active]=\"variantSelectionMode === 'explicit'\"\n        (click)=\"onVariantSelectionModeChange('explicit')\"\n        [disabled]=\"obs.disabled\"\n      >{{ 'selectByVariant' | pluginTranslate: pluginId | async }}</button>\n      <button\n        type=\"button\"\n        class=\"variant-mode-btn\"\n        [class.active]=\"variantSelectionMode === 'attributes'\"\n        (click)=\"onVariantSelectionModeChange('attributes')\"\n        [disabled]=\"obs.disabled\"\n      >{{ 'selectByAttributes' | pluginTranslate: pluginId | async }}</button>\n    </div>\n  </div>\n\n  <!-- Explicit variant selection (dropdown) -->\n  <v-select\n    *ngIf=\"variantSelectionMode === 'explicit'\"\n    name=\"variantId\"\n    [title]=\"'variantId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'variantIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [items]=\"obs.variants.data\"\n    [defaultSelectionId]=\"obs.prefill?.variantId\"\n    [disabled]=\"obs.disabled || obs.variants.loading || !obs.selectedTemplateId\"\n    [required]=\"false\"\n    [loading]=\"obs.variants.loading\"\n  >\n  </v-select>\n  <div *ngIf=\"obs.variants.error\" class=\"loading-error\">{{ obs.variants.error }}</div>\n\n  <!-- Attribute-based variant selection -->\n  <div *ngIf=\"variantSelectionMode === 'attributes' && obs.selectedTemplateId\" class=\"variant-attributes-section\">\n    <label class=\"variant-attributes-label\">{{ 'variantAttributes' | pluginTranslate: pluginId | async }}</label>\n    <div class=\"variant-attributes-list\">\n      <div *ngFor=\"let entry of variantAttributeEntries; let i = index\" class=\"variant-attribute-row\">\n        <select\n          *ngIf=\"!entry._customKey\"\n          class=\"variant-attribute-input\"\n          [ngModel]=\"entry.key\"\n          (ngModelChange)=\"onKeySelected(entry, $event)\"\n          [disabled]=\"obs.disabled\"\n        >\n          <option value=\"\" disabled>{{ 'attributeKey' | pluginTranslate: pluginId | async }}</option>\n          <option *ngFor=\"let key of availableAttributeKeys\" [value]=\"key\">{{ key }}</option>\n          <option value=\"__custom__\">{{ 'attributeKeyCustom' | pluginTranslate: pluginId | async }}</option>\n        </select>\n        <div *ngIf=\"entry._customKey\" class=\"custom-key-input\">\n          <input\n            type=\"text\"\n            class=\"variant-attribute-input\"\n            [placeholder]=\"'attributeKey' | pluginTranslate: pluginId | async\"\n            [(ngModel)]=\"entry.key\"\n            (ngModelChange)=\"onAttributeEntryChange()\"\n            [disabled]=\"obs.disabled\"\n          />\n          <button type=\"button\" class=\"custom-key-cancel\" (click)=\"cancelCustomKey(entry)\" [disabled]=\"obs.disabled\">&times;</button>\n        </div>\n        <input\n          type=\"text\"\n          class=\"variant-attribute-input\"\n          [placeholder]=\"'attributeValue' | pluginTranslate: pluginId | async\"\n          [(ngModel)]=\"entry.value\"\n          (ngModelChange)=\"onAttributeEntryChange()\"\n          [disabled]=\"obs.disabled\"\n        />\n        <label class=\"variant-attribute-required-toggle\">\n          <input\n            type=\"checkbox\"\n            [(ngModel)]=\"entry.required\"\n            (ngModelChange)=\"onAttributeEntryChange()\"\n            [disabled]=\"obs.disabled\"\n          />\n          <span class=\"required-label\">{{ (entry.required ? 'attributeRequired' : 'attributePreferred') | pluginTranslate: pluginId | async }}</span>\n        </label>\n        <button\n          type=\"button\"\n          class=\"variant-attribute-remove-btn\"\n          (click)=\"removeAttributeEntry(i)\"\n          [disabled]=\"obs.disabled\"\n          title=\"{{ 'removeAttribute' | pluginTranslate: pluginId | async }}\"\n        >&times;</button>\n      </div>\n    </div>\n    <button\n      type=\"button\"\n      class=\"variant-attribute-add-btn\"\n      (click)=\"addAttributeEntry()\"\n      [disabled]=\"obs.disabled\"\n    >+ {{ 'addAttribute' | pluginTranslate: pluginId | async }}</button>\n  </div>\n\n  <v-select\n    name=\"environmentId\"\n    [title]=\"'environmentId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'environmentIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [items]=\"obs.environments.data\"\n    [defaultSelectionId]=\"obs.prefill?.environmentId\"\n    [disabled]=\"obs.disabled || obs.environments.loading\"\n    [required]=\"false\"\n    [loading]=\"obs.environments.loading\"\n  >\n  </v-select>\n  <div *ngIf=\"obs.environments.error\" class=\"loading-error\">{{ obs.environments.error }}</div>\n\n  <v-select\n    name=\"outputFormat\"\n    [title]=\"'outputFormat' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'outputFormatTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [items]=\"outputFormatOptions\"\n    [defaultSelectionId]=\"obs.prefill?.outputFormat || 'PDF'\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-select>\n\n  <v-input\n    name=\"filename\"\n    [title]=\"'filename' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'filenameTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.filename\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"correlationId\"\n    [title]=\"'correlationId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'correlationIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.correlationId\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"false\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"resultProcessVariable\"\n    [title]=\"'resultProcessVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'resultProcessVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.resultProcessVariable\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-input>\n</v-form>\n\n<div *ngIf=\"(templateFields$ | async)?.error as templateFieldsError\" class=\"loading-error\">{{ templateFieldsError }}</div>\n\n<epistola-data-mapping-tree\n  *ngIf=\"(selectedTemplateId$ | async)\"\n  [pluginId]=\"pluginId\"\n  [templateFields]=\"(templateFields$ | async)?.data ?? []\"\n  [disabled]=\"!!(disabled$ | async)\"\n  [prefillMapping]=\"prefillDataMapping\"\n  [caseDefinitionKey]=\"caseDefinitionKey\"\n  [processVariables]=\"processVariables\"\n  (mappingChange)=\"onDataMappingChange($event)\"\n  (requiredFieldsStatus)=\"onRequiredFieldsStatusChange($event)\"\n></epistola-data-mapping-tree>\n\n<div class=\"validation-summary\" *ngIf=\"(selectedTemplateId$ | async) && requiredFieldsStatus.total > 0\">\n  <span *ngIf=\"requiredFieldsStatus.mapped === requiredFieldsStatus.total\" class=\"validation-complete\">\n    {{ 'requiredFieldsComplete' | pluginTranslate: pluginId | async }}\n  </span>\n  <span *ngIf=\"requiredFieldsStatus.mapped < requiredFieldsStatus.total\" class=\"validation-incomplete\">\n    {{ requiredFieldsStatus.mapped }} / {{ requiredFieldsStatus.total }}\n    {{ 'validationSummary' | pluginTranslate: pluginId | async }}\n  </span>\n</div>\n", styles: [".loading-error{padding:.25rem .75rem;font-size:.8125rem;color:#dc3545}.validation-summary{margin-top:.5rem;padding:.5rem .75rem;border-radius:4px;font-size:.875rem}.validation-summary .validation-complete{color:#198754}.validation-summary .validation-incomplete{color:#dc3545;font-weight:500}.variant-mode-toggle{margin-bottom:1rem;padding:0 .75rem}.variant-mode-label{display:block;font-size:.875rem;font-weight:500;margin-bottom:.375rem}.variant-mode-buttons{display:flex;gap:0;border:1px solid #d1d5db;border-radius:4px;overflow:hidden;width:fit-content}.variant-mode-btn{padding:.375rem .75rem;font-size:.8125rem;background:#fff;border:none;border-right:1px solid #d1d5db;cursor:pointer;color:#374151;transition:background-color .15s,color .15s}.variant-mode-btn:last-child{border-right:none}.variant-mode-btn:hover:not([disabled]){background:#f3f4f6}.variant-mode-btn.active{background:#2563eb;color:#fff}.variant-mode-btn[disabled]{opacity:.5;cursor:not-allowed}.variant-attributes-section{margin-bottom:1rem;padding:0 .75rem}.variant-attributes-label{display:block;font-size:.875rem;font-weight:500;margin-bottom:.375rem}.variant-attributes-list{display:flex;flex-direction:column;gap:.375rem}.variant-attribute-row{display:flex;gap:.375rem;align-items:center}.variant-attribute-input{flex:1;padding:.375rem .5rem;font-size:.8125rem;border:1px solid #d1d5db;border-radius:4px;outline:none}.variant-attribute-input:focus{border-color:#2563eb;box-shadow:0 0 0 1px #2563eb}.variant-attribute-input[disabled]{opacity:.5;background:#f9fafb}.custom-key-input{display:flex;flex:1;gap:.25rem}.custom-key-input .variant-attribute-input{flex:1}.custom-key-cancel{padding:.25rem .5rem;font-size:1rem;line-height:1;background:none;border:1px solid #d1d5db;border-radius:4px;cursor:pointer;color:#6b7280}.custom-key-cancel:hover:not([disabled]){color:#dc3545;border-color:#dc3545}.custom-key-cancel[disabled]{opacity:.5;cursor:not-allowed}.variant-attribute-required-toggle{display:flex;align-items:center;gap:.25rem;font-size:.75rem;color:#374151;white-space:nowrap;cursor:pointer}.variant-attribute-required-toggle input[type=checkbox]{margin:0;cursor:pointer}.variant-attribute-required-toggle .required-label{-webkit-user-select:none;user-select:none}.variant-attribute-remove-btn{padding:.25rem .5rem;font-size:1rem;line-height:1;background:none;border:1px solid #d1d5db;border-radius:4px;cursor:pointer;color:#6b7280}.variant-attribute-remove-btn:hover:not([disabled]){color:#dc3545;border-color:#dc3545}.variant-attribute-remove-btn[disabled]{opacity:.5;cursor:not-allowed}.variant-attribute-add-btn{margin-top:.375rem;padding:.25rem .5rem;font-size:.8125rem;background:none;border:1px dashed #d1d5db;border-radius:4px;cursor:pointer;color:#6b7280}.variant-attribute-add-btn:hover:not([disabled]){color:#2563eb;border-color:#2563eb}.variant-attribute-add-btn[disabled]{opacity:.5;cursor:not-allowed}\n"] }]
         }], ctorParameters: () => [{ type: EpistolaPluginService }, { type: i2$2.ProcessLinkStateService }, { type: i0.ChangeDetectorRef }], propDecorators: { save$: [{
                 type: Input
             }], disabled$: [{
@@ -1991,6 +2037,8 @@ const epistolaPluginSpecification = {
             templateSyncEnabled: 'Template synchronisatie',
             templateSyncEnabledTooltip: 'Synchroniseer template definities automatisch van het classpath naar Epistola bij het opstarten',
             'generate-document': 'Genereer Document',
+            catalogId: 'Catalogus',
+            catalogIdTooltip: 'Selecteer de catalogus waaruit een template gekozen wordt',
             templateId: 'Template',
             templateIdTooltip: 'Selecteer het template dat gebruikt wordt voor documentgeneratie',
             variantId: 'Variant',
@@ -2080,6 +2128,8 @@ const epistolaPluginSpecification = {
             templateSyncEnabled: 'Template sync',
             templateSyncEnabledTooltip: 'Automatically synchronize template definitions from classpath to Epistola on startup',
             'generate-document': 'Generate Document',
+            catalogId: 'Catalog',
+            catalogIdTooltip: 'Select the catalog to choose a template from',
             templateId: 'Template',
             templateIdTooltip: 'Select the template to use for document generation',
             variantId: 'Variant',