@epistola.app/valtimo-plugin 0.0.1

package/src/lib/components/download-document-configuration/download-document-configuration.component.html

@@ -0,0 +1,29 @@
+<v-form
+    (valueChange)="formValueChange($event)"
+    *ngIf="{
+      disabled: safeDisabled$ | async,
+      prefill: prefillConfiguration$ ? (prefillConfiguration$ | async) : null
+    } as obs"
+>
+  <v-input
+    name="documentIdVariable"
+    [title]="'documentIdVariable' | pluginTranslate: pluginId | async"
+    [tooltip]="'documentIdVariableTooltip' | pluginTranslate: pluginId | async"
+    [margin]="true"
+    [defaultValue]="obs.prefill?.documentIdVariable || 'epistolaDocumentId'"
+    [disabled]="obs.disabled"
+    [required]="true"
+  >
+  </v-input>
+
+  <v-input
+    name="contentVariable"
+    [title]="'contentVariable' | pluginTranslate: pluginId | async"
+    [tooltip]="'contentVariableTooltip' | pluginTranslate: pluginId | async"
+    [margin]="true"
+    [defaultValue]="obs.prefill?.contentVariable || 'documentContent'"
+    [disabled]="obs.disabled"
+    [required]="true"
+  >
+  </v-input>
+</v-form>

package/src/lib/components/download-document-configuration/download-document-configuration.component.scss

@@ -0,0 +1 @@
+// Download document configuration styles

package/src/lib/components/download-document-configuration/download-document-configuration.component.ts

@@ -0,0 +1,71 @@
+import {Component, EventEmitter, Input, OnDestroy, OnInit, Output} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {FunctionConfigurationComponent, PluginTranslatePipeModule} from '@valtimo/plugin';
+import {FormModule, FormOutput, InputModule} from '@valtimo/components';
+import {BehaviorSubject, combineLatest, Observable, Subscription, take} from 'rxjs';
+import {delay, startWith} from 'rxjs/operators';
+import {DownloadDocumentConfig} from '../../models';
+
+@Component({
+  selector: 'epistola-download-document-configuration',
+  templateUrl: './download-document-configuration.component.html',
+  styleUrls: ['./download-document-configuration.component.scss'],
+  standalone: true,
+  imports: [CommonModule, PluginTranslatePipeModule, FormModule, InputModule]
+})
+export class DownloadDocumentConfigurationComponent
+  implements FunctionConfigurationComponent, OnInit, OnDestroy
+{
+  @Input() save$!: Observable<void>;
+  @Input() disabled$!: Observable<boolean>;
+  @Input() pluginId!: string;
+  @Input() prefillConfiguration$!: Observable<DownloadDocumentConfig>;
+
+  @Output() valid: EventEmitter<boolean> = new EventEmitter<boolean>();
+  @Output() configuration: EventEmitter<DownloadDocumentConfig> = new EventEmitter<DownloadDocumentConfig>();
+
+  private saveSubscription!: Subscription;
+  private readonly formValue$ = new BehaviorSubject<DownloadDocumentConfig | null>(null);
+  private readonly valid$ = new BehaviorSubject<boolean>(false);
+
+  safeDisabled$!: Observable<boolean>;
+
+  ngOnInit(): void {
+    this.safeDisabled$ = this.disabled$.pipe(
+      startWith(true),
+      delay(0)
+    );
+    this.openSaveSubscription();
+  }
+
+  ngOnDestroy() {
+    this.saveSubscription?.unsubscribe();
+  }
+
+  formValueChange(formOutput: FormOutput): void {
+    const formValue = formOutput as unknown as DownloadDocumentConfig;
+    this.formValue$.next(formValue);
+    this.handleValid(formValue);
+  }
+
+  private handleValid(formValue: DownloadDocumentConfig): void {
+    const valid = !!(
+      formValue?.documentIdVariable &&
+      formValue?.contentVariable
+    );
+    this.valid$.next(valid);
+    this.valid.emit(valid);
+  }
+
+  private openSaveSubscription(): void {
+    this.saveSubscription = this.save$?.subscribe(() => {
+      combineLatest([this.formValue$, this.valid$])
+        .pipe(take(1))
+        .subscribe(([formValue, valid]) => {
+          if (valid && formValue) {
+            this.configuration.emit(formValue);
+          }
+        });
+    });
+  }
+}

package/src/lib/components/epistola-configuration/epistola-configuration.component.html

@@ -0,0 +1,74 @@
+<v-form
+    (valueChange)="formValueChange($event)"
+    *ngIf="{
+      disabled: safeDisabled$ | async,
+      prefill: prefillConfiguration$ ? (prefillConfiguration$ | async) : null
+    } as obs"
+>
+  <v-input
+    name="configurationTitle"
+    [title]="'configurationTitle' | pluginTranslate: pluginId | async"
+    [margin]="true"
+    [defaultValue]="obs.prefill?.configurationTitle"
+    [disabled]="obs.disabled"
+    [required]="true"
+  >
+  </v-input>
+
+  <v-input
+    name="baseUrl"
+    [title]="'baseUrl' | pluginTranslate: pluginId | async"
+    [tooltip]="'baseUrlTooltip' | pluginTranslate: pluginId | async"
+    [margin]="true"
+    [defaultValue]="obs.prefill?.baseUrl"
+    [disabled]="obs.disabled"
+    [required]="true"
+  >
+  </v-input>
+
+  <v-input
+    name="apiKey"
+    [title]="'apiKey' | pluginTranslate: pluginId | async"
+    [tooltip]="'apiKeyTooltip' | pluginTranslate: pluginId | async"
+    [margin]="true"
+    [defaultValue]="obs.prefill?.apiKey"
+    [disabled]="obs.disabled"
+    [required]="true"
+    type="password"
+  >
+  </v-input>
+
+  <v-input
+    name="tenantId"
+    [title]="'tenantId' | pluginTranslate: pluginId | async"
+    [tooltip]="'tenantIdTooltip' | pluginTranslate: pluginId | async"
+    [margin]="true"
+    [defaultValue]="obs.prefill?.tenantId"
+    [disabled]="obs.disabled"
+    [required]="true"
+  >
+  </v-input>
+
+  <v-input
+    name="defaultEnvironmentId"
+    [title]="'defaultEnvironmentId' | pluginTranslate: pluginId | async"
+    [tooltip]="'defaultEnvironmentIdTooltip' | pluginTranslate: pluginId | async"
+    [margin]="true"
+    [defaultValue]="obs.prefill?.defaultEnvironmentId"
+    [disabled]="obs.disabled"
+    [required]="false"
+  >
+  </v-input>
+
+  <v-input
+    name="templateSyncEnabled"
+    type="checkbox"
+    [title]="'templateSyncEnabled' | pluginTranslate: pluginId | async"
+    [tooltip]="'templateSyncEnabledTooltip' | pluginTranslate: pluginId | async"
+    [margin]="true"
+    [defaultValue]="obs.prefill?.templateSyncEnabled ? 'true' : ''"
+    [disabled]="obs.disabled"
+    [required]="false"
+  >
+  </v-input>
+</v-form>

package/src/lib/components/epistola-configuration/epistola-configuration.component.scss

@@ -0,0 +1 @@
+// Epistola plugin configuration styles

package/src/lib/components/epistola-configuration/epistola-configuration.component.ts

@@ -0,0 +1,96 @@
+import {Component, EventEmitter, Input, OnDestroy, OnInit, Output} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {PluginConfigurationComponent, PluginTranslatePipeModule} from '@valtimo/plugin';
+import {FormModule, FormOutput, InputModule} from '@valtimo/components';
+import {BehaviorSubject, combineLatest, Observable, Subscription, take} from 'rxjs';
+import {delay, startWith} from 'rxjs/operators';
+import {EpistolaPluginConfig} from '../../models';
+
+@Component({
+  selector: 'epistola-configuration',
+  templateUrl: './epistola-configuration.component.html',
+  styleUrls: ['./epistola-configuration.component.scss'],
+  standalone: true,
+  imports: [CommonModule, PluginTranslatePipeModule, FormModule, InputModule]
+})
+export class EpistolaConfigurationComponent
+  implements PluginConfigurationComponent, OnInit, OnDestroy
+{
+  @Input() save$!: Observable<void>;
+  @Input() disabled$!: Observable<boolean>;
+  @Input() pluginId!: string;
+  @Input() prefillConfiguration$!: Observable<EpistolaPluginConfig>;
+
+  @Output() valid: EventEmitter<boolean> = new EventEmitter<boolean>();
+  @Output() configuration: EventEmitter<EpistolaPluginConfig> = new EventEmitter<EpistolaPluginConfig>();
+
+  /** Epistola slug pattern: lowercase alphanumeric with hyphens, no leading/trailing hyphens. */
+  private static readonly SLUG_PATTERN = /^[a-z][a-z0-9]*(-[a-z0-9]+)*$/;
+
+  private saveSubscription!: Subscription;
+  private readonly formValue$ = new BehaviorSubject<EpistolaPluginConfig | null>(null);
+  private readonly valid$ = new BehaviorSubject<boolean>(false);
+
+  safeDisabled$!: Observable<boolean>;
+
+  ngOnInit(): void {
+    // Wrap disabled$ with startWith and delay to prevent NG0100 ExpressionChangedAfterItHasBeenCheckedError
+    // The disabled$ observable from Valtimo's plugin framework can emit value changes after Angular's
+    // change detection cycle completes, causing the error.
+    this.safeDisabled$ = this.disabled$.pipe(
+      startWith(true),
+      delay(0)
+    );
+    this.openSaveSubscription();
+  }
+
+  ngOnDestroy() {
+    this.saveSubscription?.unsubscribe();
+  }
+
+  formValueChange(formOutput: FormOutput): void {
+    const formValue = formOutput as unknown as EpistolaPluginConfig;
+    this.formValue$.next(formValue);
+    this.handleValid(formValue);
+  }
+
+  private handleValid(formValue: EpistolaPluginConfig): void {
+    const valid = !!(
+      formValue?.configurationTitle &&
+      formValue?.baseUrl &&
+      formValue?.apiKey &&
+      formValue?.tenantId &&
+      this.isValidSlug(formValue.tenantId, 3, 63) &&
+      this.isValidOptionalSlug(formValue.defaultEnvironmentId, 3, 30)
+    );
+    this.valid$.next(valid);
+    this.valid.emit(valid);
+  }
+
+  private isValidSlug(value: string, minLength: number, maxLength: number): boolean {
+    return (
+      value.length >= minLength &&
+      value.length <= maxLength &&
+      EpistolaConfigurationComponent.SLUG_PATTERN.test(value)
+    );
+  }
+
+  private isValidOptionalSlug(value: string | undefined, minLength: number, maxLength: number): boolean {
+    if (!value) {
+      return true;
+    }
+    return this.isValidSlug(value, minLength, maxLength);
+  }
+
+  private openSaveSubscription(): void {
+    this.saveSubscription = this.save$?.subscribe(() => {
+      combineLatest([this.formValue$, this.valid$])
+        .pipe(take(1))
+        .subscribe(([formValue, valid]) => {
+          if (valid) {
+            this.configuration.emit(formValue);
+          }
+        });
+    });
+  }
+}

package/src/lib/components/epistola-download/epistola-download.component.ts

@@ -0,0 +1,79 @@
+import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {HttpClient} from '@angular/common/http';
+import {FormioCustomComponent} from '@valtimo/components';
+
+export interface DownloadData {
+  documentId: string;
+  tenantId: string;
+}
+
+@Component({
+  standalone: true,
+  imports: [CommonModule],
+  selector: 'epistola-download-component',
+  template: `
+    <button
+      type="button"
+      class="btn btn-outline-primary"
+      [disabled]="disabled || downloading || !hasRequiredData()"
+      (click)="download()"
+    >
+      <i class="mdi mdi-download mr-1"></i>
+      {{ downloading ? 'Downloading...' : buttonLabel }}
+    </button>
+    <span *ngIf="error" class="text-danger ml-2">{{ error }}</span>
+  `,
+})
+export class EpistolaDownloadComponent implements FormioCustomComponent<DownloadData> {
+  @Input() value: DownloadData;
+  @Output() valueChange = new EventEmitter<DownloadData>();
+
+  @Input() disabled = false;
+  @Input() filename = 'document.pdf';
+  @Input() label = 'Download PDF';
+
+  downloading = false;
+  error: string | null = null;
+
+  get buttonLabel(): string {
+    return this.label || 'Download PDF';
+  }
+
+  constructor(private readonly http: HttpClient) {}
+
+  hasRequiredData(): boolean {
+    return !!(this.value?.documentId && this.value?.tenantId);
+  }
+
+  download(): void {
+    if (!this.hasRequiredData() || this.downloading) {
+      return;
+    }
+
+    this.downloading = true;
+    this.error = null;
+
+    const {documentId, tenantId} = this.value;
+    const url = `/api/v1/plugin/epistola/documents/${encodeURIComponent(documentId)}/download`
+      + `?tenantId=${encodeURIComponent(tenantId)}`
+      + `&filename=${encodeURIComponent(this.filename)}`;
+
+    this.http.get(url, {responseType: 'blob'}).subscribe({
+      next: (blob) => {
+        const objectUrl = URL.createObjectURL(blob);
+        const anchor = document.createElement('a');
+        anchor.href = objectUrl;
+        anchor.download = this.filename;
+        anchor.click();
+        URL.revokeObjectURL(objectUrl);
+        this.downloading = false;
+      },
+      error: (err) => {
+        console.error('Download failed', err);
+        this.error = 'Download mislukt. Probeer opnieuw.';
+        this.downloading = false;
+      },
+    });
+  }
+}

package/src/lib/components/epistola-download/epistola-download.formio.ts

@@ -0,0 +1,19 @@
+import {Injector} from '@angular/core';
+import {FormioCustomComponentInfo, registerCustomFormioComponent} from '@valtimo/components';
+import {EpistolaDownloadComponent} from './epistola-download.component';
+
+export const EPISTOLA_DOWNLOAD_OPTIONS: FormioCustomComponentInfo = {
+  type: 'epistola-download',
+  selector: 'epistola-download-button',
+  title: 'Epistola Download',
+  group: 'basic',
+  icon: 'download',
+  emptyValue: null,
+  fieldOptions: ['filename', 'label'],
+};
+
+export function registerEpistolaDownloadComponent(injector: Injector): void {
+  if (!customElements.get(EPISTOLA_DOWNLOAD_OPTIONS.selector)) {
+    registerCustomFormioComponent(EPISTOLA_DOWNLOAD_OPTIONS, EpistolaDownloadComponent, injector);
+  }
+}

package/src/lib/components/field-tree/field-tree.component.html

@@ -0,0 +1,192 @@
+<!-- SCALAR field: label row + input with 3-mode selector -->
+<div *ngIf="field.fieldType === 'SCALAR'" class="field-row" [class.field-required-unmapped]="field.required && !getStringValue()">
+  <div class="field-label">
+    <span class="field-name">{{ field.name }}</span>
+    <span class="field-meta">({{ field.type }}{{ field.required ? ', required' : '' }})</span>
+  </div>
+  <div class="field-input">
+    <div class="input-mode-group">
+      <button type="button" class="mode-btn" [class.mode-active]="inputMode === 'browse'" [disabled]="disabled" (click)="setInputMode('browse')" [title]="'browseMode' | pluginTranslate: pluginId | async">⊞</button>
+      <button type="button" class="mode-btn" [class.mode-active]="inputMode === 'pv'" [disabled]="disabled" (click)="setInputMode('pv')" [title]="'pvMode' | pluginTranslate: pluginId | async">pv</button>
+      <button type="button" class="mode-btn" [class.mode-active]="inputMode === 'expression'" [disabled]="disabled" (click)="setInputMode('expression')" [title]="'expressionMode' | pluginTranslate: pluginId | async">fx</button>
+    </div>
+
+    <!-- Browse mode: ValuePathSelector -->
+    <div class="field-input-control" *ngIf="inputMode === 'browse'">
+      <valtimo-value-path-selector
+        [name]="'field_' + field.path"
+        [caseDefinitionKey]="caseDefinitionKey"
+        [prefixes]="[ValuePathSelectorPrefix.DOC, ValuePathSelectorPrefix.CASE]"
+        [notation]="'dots'"
+        [disabled]="disabled"
+        [defaultValue]="getStringValue()"
+        [showCaseDefinitionSelector]="!caseDefinitionKey"
+        (valueChangeEvent)="onBrowseValueChange($event)"
+      ></valtimo-value-path-selector>
+    </div>
+
+    <!-- PV mode: dropdown (when available) or text fallback -->
+    <div class="field-input-control" *ngIf="inputMode === 'pv'">
+      <select
+        *ngIf="processVariables.length > 0; else pvFallback"
+        class="pv-select"
+        [disabled]="disabled"
+        (change)="onPvChange($any($event.target).value)"
+      >
+        <option value="">{{ 'pvPlaceholder' | pluginTranslate: pluginId | async }}</option>
+        <option *ngFor="let pv of processVariables" [value]="pv" [selected]="pv === getPvName()">{{ pv }}</option>
+      </select>
+      <ng-template #pvFallback>
+        <v-input
+          [name]="'pvfb_' + field.path"
+          [defaultValue]="getPvName()"
+          [disabled]="disabled"
+          [placeholder]="'pvPlaceholder' | pluginTranslate: pluginId | async"
+          (valueChange)="onPvChange($event)"
+        ></v-input>
+      </ng-template>
+    </div>
+
+    <!-- Expression mode: text input -->
+    <div class="field-input-control" *ngIf="inputMode === 'expression'">
+      <v-input
+        [name]="'fx_' + field.path"
+        [defaultValue]="getStringValue()"
+        [disabled]="disabled"
+        [placeholder]="'e.g. pv:variableName or doc:path.to.field'"
+        (valueChange)="onExpressionValueChange($event)"
+      ></v-input>
+    </div>
+  </div>
+</div>
+
+<!-- OBJECT field: collapsible section with children -->
+<div *ngIf="field.fieldType === 'OBJECT'" class="field-object">
+  <div class="field-object-header" (click)="toggleExpanded()" [class.field-required-unmapped]="totalRequired > 0 && mappedCount < totalRequired">
+    <span class="expand-icon">{{ expanded ? '▼' : '▶' }}</span>
+    <span class="field-name">{{ field.name }}</span>
+    <span class="field-meta">(object{{ field.required ? ', required' : '' }})</span>
+    <span class="completeness-badge" *ngIf="totalRequired > 0 && !expanded">
+      {{ mappedCount }}/{{ totalRequired }}
+    </span>
+  </div>
+  <div class="field-object-children" *ngIf="expanded">
+    <epistola-field-tree
+      *ngFor="let child of field.children"
+      [field]="child"
+      [value]="getChildValue(child.name)"
+      [pluginId]="pluginId"
+      [caseDefinitionKey]="caseDefinitionKey"
+      [processVariables]="processVariables"
+      [disabled]="disabled"
+      (valueChange)="onChildChange(child.name, $event)"
+    ></epistola-field-tree>
+  </div>
+</div>
+
+<!-- ARRAY field: collapsible section with source collection + optional per-item mapping -->
+<div *ngIf="field.fieldType === 'ARRAY'" class="field-array">
+  <div class="field-array-header" (click)="toggleExpanded()" [class.field-required-unmapped]="field.required && !getSourceValue()">
+    <span class="expand-icon">{{ expanded ? '▼' : '▶' }}</span>
+    <span class="field-name">{{ field.name }}</span>
+    <span class="field-meta">(array{{ field.required ? ', required' : '' }})</span>
+    <span class="completeness-badge" *ngIf="totalRequired > 0 && !expanded">
+      {{ mappedCount }}/{{ totalRequired }}
+    </span>
+    <span class="mapped-indicator" *ngIf="totalRequired === 0 && getSourceValue() && !expanded">✓</span>
+  </div>
+  <div class="field-array-content" *ngIf="expanded">
+    <!-- Source collection input -->
+    <div class="field-row">
+      <div class="field-label">
+        <span class="field-name">{{ 'mapCollectionTo' | pluginTranslate: pluginId | async }}</span>
+      </div>
+      <div class="field-input">
+        <div class="input-mode-group">
+          <button type="button" class="mode-btn" [class.mode-active]="inputMode === 'browse'" [disabled]="disabled" (click)="setInputMode('browse')" [title]="'browseMode' | pluginTranslate: pluginId | async">⊞</button>
+          <button type="button" class="mode-btn" [class.mode-active]="inputMode === 'pv'" [disabled]="disabled" (click)="setInputMode('pv')" [title]="'pvMode' | pluginTranslate: pluginId | async">pv</button>
+          <button type="button" class="mode-btn" [class.mode-active]="inputMode === 'expression'" [disabled]="disabled" (click)="setInputMode('expression')" [title]="'expressionMode' | pluginTranslate: pluginId | async">fx</button>
+        </div>
+
+        <div class="field-input-control" *ngIf="inputMode === 'browse'">
+          <valtimo-value-path-selector
+            [name]="'field_' + field.path"
+            [caseDefinitionKey]="caseDefinitionKey"
+            [prefixes]="[ValuePathSelectorPrefix.DOC, ValuePathSelectorPrefix.CASE]"
+            [notation]="'dots'"
+            [disabled]="disabled"
+            [defaultValue]="getSourceValue()"
+            [showCaseDefinitionSelector]="!caseDefinitionKey"
+            (valueChangeEvent)="onSourceBrowseChange($event)"
+          ></valtimo-value-path-selector>
+        </div>
+
+        <div class="field-input-control" *ngIf="inputMode === 'pv'">
+          <select
+            *ngIf="processVariables.length > 0; else pvSourceFallback"
+            class="pv-select"
+            [disabled]="disabled"
+            (change)="onSourcePvChange($any($event.target).value)"
+          >
+            <option value="">{{ 'pvPlaceholder' | pluginTranslate: pluginId | async }}</option>
+            <option *ngFor="let pv of processVariables" [value]="pv" [selected]="pv === getSourcePvName()">{{ pv }}</option>
+          </select>
+          <ng-template #pvSourceFallback>
+            <v-input
+              [name]="'pvfb_' + field.path"
+              [defaultValue]="getSourcePvName()"
+              [disabled]="disabled"
+              [placeholder]="'pvPlaceholder' | pluginTranslate: pluginId | async"
+              (valueChange)="onSourcePvChange($event)"
+            ></v-input>
+          </ng-template>
+        </div>
+
+        <div class="field-input-control" *ngIf="inputMode === 'expression'">
+          <v-input
+            [name]="'fx_' + field.path"
+            [defaultValue]="getSourceValue()"
+            [disabled]="disabled"
+            [placeholder]="'e.g. pv:variableName or doc:path.to.field'"
+            (valueChange)="onSourceExpressionChange($event)"
+          ></v-input>
+        </div>
+      </div>
+    </div>
+
+    <!-- Per-item field mapping toggle (only shown when array has children) -->
+    <div class="array-per-field-toggle" *ngIf="hasArrayChildren()">
+      <label class="toggle-label">
+        <input
+          type="checkbox"
+          [checked]="arrayPerFieldMode"
+          [disabled]="disabled"
+          (change)="toggleArrayPerFieldMode()"
+        />
+        <span>{{ 'itemFieldMapping' | pluginTranslate: pluginId | async }}</span>
+      </label>
+    </div>
+
+    <!-- Per-item field mappings -->
+    <div class="array-item-fields" *ngIf="arrayPerFieldMode && hasArrayChildren()">
+      <div class="item-fields-header">
+        <span class="item-fields-title">{{ 'itemFieldMappingTitle' | pluginTranslate: pluginId | async }}</span>
+      </div>
+      <div class="item-field-row" *ngFor="let child of field.children">
+        <div class="item-field-label">
+          <span class="field-name">{{ child.name }}</span>
+          <span class="field-meta">({{ child.type }}{{ child.required ? ', required' : '' }})</span>
+        </div>
+        <div class="item-field-input">
+          <v-input
+            [name]="'itemField_' + child.path"
+            [defaultValue]="getItemFieldValue(child.name)"
+            [disabled]="disabled"
+            [placeholder]="'sourceFieldPlaceholder' | pluginTranslate: pluginId | async"
+            (valueChange)="onItemFieldChange(child.name, $event)"
+          ></v-input>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>