@valtimo/process-link 13.43.0 → 13.45.0

package/fesm2022/valtimo-process-link.mjs

@@ -1,32 +1,34 @@
 import * as i0 from '@angular/core';
-import { Injectable, InjectionToken, Optional, Inject, Component, EventEmitter, Output, Input, ViewChild, ChangeDetectionStrategy, NgModule, ViewContainerRef } from '@angular/core';
-import { catchError, of, BehaviorSubject, combineLatest, map, Subject, switchMap, filter, Subscription, forkJoin, startWith, mergeMap, tap, withLatestFrom as withLatestFrom$1, take as take$1, shareReplay, distinctUntilChanged } from 'rxjs';
+import { Injectable, InjectionToken, Optional, Inject, Component, EventEmitter, Output, Input, ViewChild, Directive, ChangeDetectionStrategy, NgModule, ViewContainerRef } from '@angular/core';
+import { catchError, of, BehaviorSubject, combineLatest, map, Subject, switchMap, throwError, filter, Subscription, forkJoin, startWith, mergeMap, tap, withLatestFrom as withLatestFrom$1, take as take$1, shareReplay, distinctUntilChanged } from 'rxjs';
 import * as i2 from '@angular/common/http';
 import { HttpHeaders, HttpParams } from '@angular/common/http';
 import * as i1 from '@valtimo/shared';
 import { BaseApiService, InterceptorSkip, getCaseManagementRouteParams, getBuildingBlockManagementRouteParams, getContextObservable, ROLE_ADMIN } from '@valtimo/shared';
-import { map as map$1, take, switchMap as switchMap$1, withLatestFrom, filter as filter$1, catchError as catchError$1, tap as tap$1 } from 'rxjs/operators';
+import { map as map$1, take, takeUntil, catchError as catchError$1, switchMap as switchMap$1, withLatestFrom, filter as filter$1, tap as tap$1 } from 'rxjs/operators';
 import * as i1$1 from '@valtimo/plugin';
 import { PluginTranslatePipeModule, PluginConfigurationContainerModule } from '@valtimo/plugin';
+import * as i1$5 from '@valtimo/form-flow-management';
+import { FormFlowComponentService } from '@valtimo/form-flow-management';
+export { FORM_FLOW_COMPONENT_TOKEN, FormFlowComponentService } from '@valtimo/form-flow-management';
 import * as i3 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
-import * as i3$1 from '@angular/common';
+import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i4 from 'carbon-components-angular';
+import * as i5 from 'carbon-components-angular';
 import { ComboBoxModule, RadioModule, InputModule, ButtonModule, IconModule, LayerModule, ModalModule as ModalModule$1, ProgressIndicatorModule, LoadingModule, StructuredListModule, TilesModule, SelectModule as SelectModule$1, ToggleModule, ToggletipModule, NotificationModule } from 'carbon-components-angular';
 import * as i1$2 from '@angular/forms';
 import { FormControl, Validators, FormGroup, FormArray, ReactiveFormsModule, FormsModule } from '@angular/forms';
 import { Upload16 } from '@carbon/icons';
 import * as i2$1 from '@valtimo/components';
 import { ValuePathSelectorPrefix, ValuePathSelectorComponent, InputLabelModule, SelectModule, FormioOptionsImpl, ModalModule, StepperModule, VModalModule, ParagraphModule, TooltipModule, TooltipIconModule, FormIoModule, ValtimoCdsModalDirective, RenderInPageHeaderDirective, CarbonMultiInputModule, RemoveClassnamesDirective } from '@valtimo/components';
-import * as i5 from 'carbon-components-angular/dropdown';
+import * as i6 from 'carbon-components-angular/dropdown';
 import NavigatedViewer from 'bpmn-js/lib/NavigatedViewer';
 import * as i1$3 from '@valtimo/process';
-import * as i3$2 from '@angular/router';
+import * as i3$1 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import { AuthGuardService } from '@valtimo/security';
 import * as i1$4 from '@valtimo/form';
-import * as i1$5 from '@valtimo/form-flow-management';
 
 /*
  * Copyright 2015-2026 Ritense BV, the Netherlands.
@@ -97,9 +99,13 @@ class ProcessLinkBuildingBlockApiService extends BaseApiService {
         this.configService = configService;
         this.httpClient = httpClient;
     }
+    getAllVersionsForBuildingBlock(key) {
+        return this.getVersionsForBuildingBlock(key, 0, 5, true);
+    }
     getVersionsForBuildingBlock(key, page = 0, size = 5, all = false) {
-        const allParam = all ? 'all=true' : '';
-        return this.httpClient.get(this.getApiUrl(`management/v1/building-block/${key}/version?page=${page}&size=${size}${allParam}`));
+        return this.httpClient.get(this.getApiUrl(`management/v1/building-block/${key}/version`), {
+            params: { page, size, all },
+        });
     }
     getPluginDefinitionsForBuildingBlock(key, versionTag) {
         return this.httpClient.get(this.getApiUrl(`management/v1/building-block/${key}/version/${versionTag}/plugin`));
@@ -242,12 +248,10 @@ class BuildingBlockStateService {
         if (!key)
             return;
         this._versionSubscription = this.processLinkBuildingBlockApiService
-            .getVersionsForBuildingBlock(key)
+            .getAllVersionsForBuildingBlock(key)
             .subscribe({
             next: versions => {
-                this._versions$.next(versions.content.map(version => {
-                    return version.versionTag;
-                }) ?? []);
+                this._versions$.next(versions.content?.map(version => version.versionTag) ?? []);
                 if (initialVersionTag) {
                     this.setDefinitionVersionTag(initialVersionTag, true);
                 }
@@ -283,6 +287,24 @@ class BuildingBlockStateService {
             this.loadFields(key, versionTag);
         }
     }
+    /**
+     * Switches building block version, keeping the plugin, input and output mappings the user entered;
+     * only the parts absent from the new version are dropped once its requirements and fields load.
+     */
+    changeDefinitionVersionTag(versionTag) {
+        this._definitionVersionTag$.next(versionTag);
+        this.clearFields();
+        const key = this._definitionKey$.getValue();
+        if (!key || !versionTag) {
+            // No version means no fields to prune against, so clear the mappings.
+            this.clearPluginRequirements();
+            this.clearMappings();
+            return;
+        }
+        this.clearPluginRequirements({ preserveMappings: true });
+        this.loadPluginRequirements(key, versionTag);
+        this.loadFields(key, versionTag, { pruneMappingsToFields: true });
+    }
     setPluginConfigurationMapping(pluginDefinitionKey, configurationId) {
         const current = this._pluginMappings$.getValue();
         this._pluginMappings$.next({
@@ -377,14 +399,21 @@ class BuildingBlockStateService {
         this._requiredPluginKeys$.next(pluginKeys);
         this._pluginMappings$.next(normalized);
     }
-    loadFields(key, versionTag) {
+    loadFields(key, versionTag, options = {}) {
         this._loadingFields$.next(true);
         this._fieldsSubscription?.unsubscribe();
         this._fieldsSubscription = this.processLinkBuildingBlockApiService
             .getFieldsForBuildingBlock(key, versionTag)
             .subscribe({
             next: fields => {
-                this._buildingBlockFields$.next((fields ?? []).map(field => ({ ...field, name: ensureDocPrefix(field.name) })));
+                const buildingBlockFields = (fields ?? []).map(field => ({
+                    ...field,
+                    name: ensureDocPrefix(field.name),
+                }));
+                this._buildingBlockFields$.next(buildingBlockFields);
+                if (options.pruneMappingsToFields) {
+                    this.pruneMappingsToFields(buildingBlockFields);
+                }
                 this._loadingFields$.next(false);
             },
             error: () => {
@@ -393,6 +422,23 @@ class BuildingBlockStateService {
             },
         });
     }
+    /**
+     * Drops mappings pointing at fields outside the given set, so switching between versions with the
+     * same fields keeps the configuration intact.
+     */
+    pruneMappingsToFields(fields) {
+        const fieldNames = new Set(fields.map(field => field.name));
+        const inputMappings = this._inputMappings$.getValue();
+        const prunedInputMappings = inputMappings.filter(mapping => fieldNames.has(mapping.target));
+        if (prunedInputMappings.length !== inputMappings.length) {
+            this._inputMappings$.next(prunedInputMappings);
+        }
+        const outputMappings = this._outputMappings$.getValue();
+        const prunedOutputMappings = outputMappings.filter(mapping => fieldNames.has(mapping.source));
+        if (prunedOutputMappings.length !== outputMappings.length) {
+            this._outputMappings$.next(prunedOutputMappings);
+        }
+    }
     clearPluginRequirements(options = {}) {
         this._requirementsSubscription?.unsubscribe();
         this._requiredPluginKeys$.next([]);
@@ -499,6 +545,7 @@ class PluginStateService {
         this._selectedPluginFunction$ = new BehaviorSubject(undefined);
         this._save$ = new Subject();
         this._selectedProcessLink$ = new BehaviorSubject(undefined);
+        this._cancelPluginLoad$ = new Subject();
     }
     get selectedPluginDefinition$() {
         return this._selectedPluginDefinition$.asObservable();
@@ -522,20 +569,7 @@ class PluginStateService {
                 this._selectedPluginConfiguration$,
                 this._selectedPluginDefinition$,
             ]).pipe(map$1(([configuration, definition]) => configuration?.pluginDefinition.key || definition?.key))
-            : combineLatest([
-                this._selectedProcessLink$,
-                this.pluginService.pluginSpecifications$,
-            ]).pipe(map$1(([processLink, pluginSpecifications]) => {
-                if (processLink?.pluginDefinitionKey) {
-                    return processLink.pluginDefinitionKey;
-                }
-                const pluginSpecification = pluginSpecifications.find(specification => {
-                    const functionKeys = specification?.functionConfigurationComponents &&
-                        Object.keys(specification.functionConfigurationComponents);
-                    return functionKeys?.includes(processLink?.pluginActionDefinitionKey);
-                });
-                return pluginSpecification?.pluginId;
-            }))));
+            : this.getPluginDefinitionKeyForProcessLink(selectedProcesLink)));
     }
     selectPluginDefinition(definition) {
         this._selectedPluginDefinition$.next(definition);
@@ -547,62 +581,83 @@ class PluginStateService {
         this._selectedPluginFunction$.next(pluginFunction);
     }
     selectProcessLink(processLink) {
+        this._cancelPluginLoad$.next();
+        this.clearPluginSelection();
         this._selectedProcessLink$.next(processLink);
         // When editing a plugin process link, populate the plugin definition
         if (processLink?.processLinkType === 'plugin') {
             this.loadPluginDefinitionForProcessLink(processLink);
         }
     }
+    clearPluginSelection() {
+        this._selectedPluginDefinition$.next(undefined);
+        this._selectedPluginConfiguration$.next(undefined);
+        this._selectedPluginFunction$.next(undefined);
+    }
     loadPluginDefinitionForProcessLink(processLink) {
-        // Get the plugin definition key - either directly or from plugin specifications
+        // Get the plugin definition key - either directly or from the configuration the link points at
         this.getPluginDefinitionKeyForProcessLink(processLink)
-            .pipe(take(1))
-            .subscribe(pluginDefinitionKey => {
-            if (pluginDefinitionKey) {
-                // Fetch all plugin definitions and find the one matching the key
-                this.pluginManagementService
-                    .getPluginDefinitions()
-                    .pipe(take(1), map$1(definitions => definitions.find(d => d.key === pluginDefinitionKey)))
-                    .subscribe(definition => {
-                    if (definition) {
-                        this._selectedPluginDefinition$.next(definition);
-                        // Also set the selected function if available
-                        if (processLink.pluginActionDefinitionKey) {
-                            this._selectedPluginFunction$.next({
-                                key: processLink.pluginActionDefinitionKey,
-                            });
+            .pipe(take(1), takeUntil(this._cancelPluginLoad$))
+            .subscribe({
+            next: pluginDefinitionKey => {
+                if (pluginDefinitionKey) {
+                    // Fetch all plugin definitions and find the one matching the key
+                    this.pluginManagementService
+                        .getPluginDefinitions()
+                        .pipe(take(1), map$1(definitions => definitions.find(d => d.key === pluginDefinitionKey)), takeUntil(this._cancelPluginLoad$))
+                        .subscribe(definition => {
+                        if (definition) {
+                            this._selectedPluginDefinition$.next(definition);
+                            // Also set the selected function if available
+                            if (processLink.pluginActionDefinitionKey) {
+                                this._selectedPluginFunction$.next({
+                                    key: processLink.pluginActionDefinitionKey,
+                                });
+                            }
                         }
-                    }
-                });
-            }
+                    });
+                }
+            },
+            error: () => this.clearPluginSelection(),
         });
         // Load and set the plugin configuration if available
         if (processLink.pluginConfigurationId) {
-            this.pluginManagementService
-                .getAllPluginConfigurations()
-                .pipe(take(1), map$1(configs => configs.find(c => c.id === processLink.pluginConfigurationId)))
-                .subscribe(configuration => {
-                if (configuration) {
-                    this._selectedPluginConfiguration$.next(configuration);
-                }
+            this.getPluginConfigurationForProcessLink(processLink)
+                .pipe(take(1), takeUntil(this._cancelPluginLoad$))
+                .subscribe({
+                next: configuration => {
+                    if (configuration) {
+                        this._selectedPluginConfiguration$.next(configuration);
+                    }
+                },
+                error: () => this.clearPluginSelection(),
             });
         }
     }
     getPluginDefinitionKeyForProcessLink(processLink) {
         // If the key is directly available, use it
-        if (processLink.pluginDefinitionKey) {
+        if (processLink?.pluginDefinitionKey) {
             return of(processLink.pluginDefinitionKey);
         }
-        // Otherwise, derive it from plugin specifications using the action key
+        // An action key can occur in several plugins, so the configuration the link points at decides which one
+        if (processLink?.pluginConfigurationId) {
+            return this.getPluginConfigurationForProcessLink(processLink).pipe(map$1(configuration => configuration?.pluginDefinition?.key));
+        }
+        // Only a link recording neither is left to the action key, where a single match is all there is to go on
         return this.pluginService.pluginSpecifications$.pipe(map$1(pluginSpecifications => {
             const pluginSpecification = pluginSpecifications.find(specification => {
                 const functionKeys = specification?.functionConfigurationComponents &&
                     Object.keys(specification.functionConfigurationComponents);
-                return functionKeys?.includes(processLink.pluginActionDefinitionKey);
+                return functionKeys?.includes(processLink?.pluginActionDefinitionKey);
             });
             return pluginSpecification?.pluginId;
         }));
     }
+    getPluginConfigurationForProcessLink(processLink) {
+        return this.pluginManagementService
+            .getPluginConfiguration(processLink.pluginConfigurationId)
+            .pipe(catchError$1(error => (error?.status === 404 ? of(undefined) : throwError(() => error))));
+    }
     deselectProcessLink() {
         this._selectedProcessLink$.next(undefined);
     }
@@ -812,7 +867,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-const FORM_FLOW_COMPONENT_TOKEN = new InjectionToken('Supported form-flow Angular components', { factory: () => [] });
 const FORM_CUSTOM_COMPONENT_TOKEN = new InjectionToken('Custom component that can be used instead of FormIO or form-flow');
 
 /*
@@ -853,6 +907,49 @@ const UNSUPPORTED_PROCESS_LINK_TYPES_IN_BUILDING_BLOCK = ['ui-component'];
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+/** The process link wizard shell: header and footer navigation. */
+const PROCESS_LINK_MODAL_TEST_IDS = {
+    heading: 'processLinkModalHeading',
+    pluginConfigurationLabel: 'processLinkModalPluginConfigurationLabel',
+    progressIndicator: 'processLinkModalProgressIndicator',
+    cancelButton: 'processLinkModalCancelButton',
+    unlinkButton: 'processLinkModalUnlinkButton',
+    backButton: 'processLinkModalBackButton',
+    nextButton: 'processLinkModalNextButton',
+    completeButton: 'processLinkModalCompleteButton',
+};
+const PROCESS_LINK_TYPE_CHOOSER_TEST_IDS = {
+    container: 'processLinkTypeChooser',
+};
+/**
+ * Prefix for the buttons of the "Choose link type" step. The full test id is
+ * `processLinkTypeButton-<processLinkType>`, e.g. `processLinkTypeButton-plugin`.
+ */
+const PROCESS_LINK_TYPE_BUTTON_TEST_ID_PREFIX = 'processLinkTypeButton-';
+const SELECT_PLUGIN_CONFIGURATION_TEST_IDS = {
+    container: 'selectPluginConfiguration',
+    list: 'selectPluginConfigurationList',
+};
+/**
+ * Prefix for the rows of the plugin selection step. The full test id is
+ * `selectPluginConfigurationRow-<id>`, where the id is the plugin *definition*
+ * key in a building block (e.g. `zakenapi`) and the plugin *configuration* id in
+ * a case — the step lists definitions in the one and configurations in the other.
+ */
+const SELECT_PLUGIN_CONFIGURATION_ROW_TEST_ID_PREFIX = 'selectPluginConfigurationRow-';
+const SELECT_PLUGIN_ACTION_TEST_IDS = {
+    container: 'selectPluginAction',
+    tileGroup: 'selectPluginActionTileGroup',
+    noActionsMessage: 'selectPluginActionNoActions',
+};
+/**
+ * Prefix for the action tiles. The full test id is
+ * `selectPluginActionTile-<pluginFunctionKey>`.
+ */
+const SELECT_PLUGIN_ACTION_TILE_TEST_ID_PREFIX = 'selectPluginActionTile-';
+const PLUGIN_ACTION_CONFIGURATION_TEST_IDS = {
+    container: 'pluginActionConfiguration',
+};
 const BB_MAPPINGS_TEST_IDS = {
     inputSection: 'bbMappingsInputSection',
     outputSection: 'bbMappingsOutputSection',
@@ -1508,6 +1605,9 @@ class ProcessLinkStateService {
     get showModal$() {
         return this._showModal$.asObservable();
     }
+    get readOnly$() {
+        return this._readOnly$.asObservable();
+    }
     get elementName$() {
         return this._elementName$.asObservable();
     }
@@ -1566,6 +1666,7 @@ class ProcessLinkStateService {
         this.buildingBlockStateService = buildingBlockStateService;
         this.formCustomComponentConfig = formCustomComponentConfig;
         this._showModal$ = new BehaviorSubject(false);
+        this._readOnly$ = new BehaviorSubject(false);
         this._availableProcessLinkTypes$ = new BehaviorSubject([]);
         this._elementName$ = new BehaviorSubject('');
         this._selectedProcessLinkTypeId$ = new BehaviorSubject('');
@@ -1601,6 +1702,9 @@ class ProcessLinkStateService {
     showModal() {
         this._showModal$.next(true);
     }
+    setReadOnly(readOnly) {
+        this._readOnly$.next(readOnly);
+    }
     closeModal() {
         this._showModal$.next(false);
         setTimeout(() => {
@@ -1734,6 +1838,7 @@ class ProcessLinkStateService {
         this.deselectProcessLink();
         this.resetBuildingBlockState();
         this._isEditing$.next(false);
+        this._readOnly$.next(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ProcessLinkStateService, deps: [{ token: ProcessLinkStepService }, { token: ProcessLinkButtonService }, { token: PluginStateService }, { token: BuildingBlockStateService }, { token: FORM_CUSTOM_COMPONENT_TOKEN, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ProcessLinkStateService }); }
@@ -1762,30 +1867,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class FormFlowComponentService {
-    get supportedComponents$() {
-        return this._supportedComponents$.pipe(filter(components => !!components));
-    }
-    constructor(supportedCustomComponents) {
-        this.supportedCustomComponents = supportedCustomComponents;
-        this._supportedComponents$ = new BehaviorSubject(null);
-        this.setSupportedComponents(supportedCustomComponents);
-    }
-    setSupportedComponents(supportedComponents) {
-        this._supportedComponents$.next(supportedComponents);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FormFlowComponentService, deps: [{ token: FORM_FLOW_COMPONENT_TOKEN }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FormFlowComponentService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FormFlowComponentService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [{ type: Array, decorators: [{
-                    type: Inject,
-                    args: [FORM_FLOW_COMPONENT_TOKEN]
-                }] }] });
+// Moved to @valtimo/form-flow-management (the owning library); re-exported here for backwards
+// compatibility.
 
 /*
  * Copyright 2015-2025 Ritense BV, the Netherlands.
@@ -1881,6 +1964,8 @@ class SelectPluginConfigurationComponent {
         this.buttonService = buttonService;
         this.stepService = stepService;
         this.pluginTranslationService = pluginTranslationService;
+        this.testIds = SELECT_PLUGIN_CONFIGURATION_TEST_IDS;
+        this.rowTestIdPrefix = SELECT_PLUGIN_CONFIGURATION_ROW_TEST_ID_PREFIX;
         this.isBuildingBlockContext$ = this.stateService.context$.pipe(map$1(context => context === 'buildingBlock'));
         this.listItems$ = combineLatest([
             this.isBuildingBlockContext$,
@@ -1982,11 +2067,11 @@ class SelectPluginConfigurationComponent {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SelectPluginConfigurationComponent, deps: [{ token: i1$1.PluginManagementService }, { token: PluginStateService }, { token: i1$1.PluginService }, { token: ProcessLinkStateService }, { token: ProcessLinkButtonService }, { token: ProcessLinkStepService }, { token: i1$1.PluginTranslationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: SelectPluginConfigurationComponent, isStandalone: false, selector: "valtimo-select-plugin-configuration", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container *ngIf=\"listItems$ | async as items; else loading\">\n  <p class=\"step-description\">\n    {{ pageHeaderText$ | async | translate }}\n  </p>\n  <div class=\"list-container\">\n    <cds-structured-list (selected)=\"selected($event)\" selection=\"true\">\n      <cds-list-header>\n        <cds-list-column nowrap=\"true\"></cds-list-column>\n        <cds-list-column nowrap=\"true\">\n          {{ columnHeaderText$ | async | translate }}\n        </cds-list-column>\n        <cds-list-column>\n          {{ 'processLinkConfiguration.pluginDescription' | translate }}\n        </cds-list-column>\n      </cds-list-header>\n      <cds-list-row *ngFor=\"let item of items\" [value]=\"item.payload\">\n        <cds-list-column>\n          <div *ngIf=\"item.logo\">\n            <img [src]=\"item.logo\" [title]=\"item.title\" class=\"plugin-configuration-logo\" />\n          </div>\n        </cds-list-column>\n        <cds-list-column>{{ item.title }}</cds-list-column>\n        <cds-list-column>{{ item.description }}</cds-list-column>\n      </cds-list-row>\n    </cds-structured-list>\n  </div>\n</ng-container>\n\n<ng-template #loading>\n  <div class=\"loading-container\">\n    <cds-loading></cds-loading>\n  </div>\n</ng-template>\n", styles: [".btn-back{position:absolute}.plugin-configuration-logo{object-fit:contain;height:60px;width:100%;margin-bottom:-.5rem}.loading-container{display:flex;justify-content:center;margin-top:40px;flex-direction:row}.list-container{margin-top:32px;margin-bottom:32px}::ng-deep .list-container .cds--structured-list-td{vertical-align:top}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.Loading, selector: "cds-loading, ibm-loading", inputs: ["title", "isActive", "size", "overlay"] }, { kind: "component", type: i4.StructuredList, selector: "cds-structured-list, ibm-structured-list", inputs: ["selection", "flushed", "condensed", "name", "skeleton"], outputs: ["selected"] }, { kind: "component", type: i4.ListRow, selector: "cds-list-row, ibm-list-row", inputs: ["selected", "label", "value"], outputs: ["change"] }, { kind: "component", type: i4.ListHeader, selector: "cds-list-header, ibm-list-header", inputs: ["skeleton"] }, { kind: "component", type: i4.ListColumn, selector: "cds-list-column, ibm-list-column", inputs: ["skeleton", "nowrap"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: SelectPluginConfigurationComponent, isStandalone: false, selector: "valtimo-select-plugin-configuration", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container *ngIf=\"listItems$ | async as items; else loading\">\n  <p class=\"step-description\" [attr.data-test-id]=\"testIds.container\">\n    {{ pageHeaderText$ | async | translate }}\n  </p>\n  <div class=\"list-container\">\n    <cds-structured-list\n      [attr.data-test-id]=\"testIds.list\"\n      (selected)=\"selected($event)\"\n      selection=\"true\"\n    >\n      <cds-list-header>\n        <cds-list-column nowrap=\"true\"></cds-list-column>\n        <cds-list-column nowrap=\"true\">\n          {{ columnHeaderText$ | async | translate }}\n        </cds-list-column>\n        <cds-list-column>\n          {{ 'processLinkConfiguration.pluginDescription' | translate }}\n        </cds-list-column>\n      </cds-list-header>\n      <cds-list-row\n        *ngFor=\"let item of items\"\n        [attr.data-test-id]=\"rowTestIdPrefix + item.id\"\n        [value]=\"item.payload\"\n      >\n        <cds-list-column>\n          <div *ngIf=\"item.logo\">\n            <img [src]=\"item.logo\" [title]=\"item.title\" class=\"plugin-configuration-logo\" />\n          </div>\n        </cds-list-column>\n        <cds-list-column>{{ item.title }}</cds-list-column>\n        <cds-list-column>{{ item.description }}</cds-list-column>\n      </cds-list-row>\n    </cds-structured-list>\n  </div>\n</ng-container>\n\n<ng-template #loading>\n  <div class=\"loading-container\">\n    <cds-loading></cds-loading>\n  </div>\n</ng-template>\n", styles: [".btn-back{position:absolute}.plugin-configuration-logo{object-fit:contain;height:60px;width:100%;margin-bottom:-.5rem}.loading-container{display:flex;justify-content:center;margin-top:40px;flex-direction:row}.list-container{margin-top:32px;margin-bottom:32px}::ng-deep .list-container .cds--structured-list-td{vertical-align:top}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.Loading, selector: "cds-loading, ibm-loading", inputs: ["title", "isActive", "size", "overlay"] }, { kind: "component", type: i5.StructuredList, selector: "cds-structured-list, ibm-structured-list", inputs: ["selection", "flushed", "condensed", "name", "skeleton"], outputs: ["selected"] }, { kind: "component", type: i5.ListRow, selector: "cds-list-row, ibm-list-row", inputs: ["selected", "label", "value"], outputs: ["change"] }, { kind: "component", type: i5.ListHeader, selector: "cds-list-header, ibm-list-header", inputs: ["skeleton"] }, { kind: "component", type: i5.ListColumn, selector: "cds-list-column, ibm-list-column", inputs: ["skeleton", "nowrap"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SelectPluginConfigurationComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'valtimo-select-plugin-configuration', template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container *ngIf=\"listItems$ | async as items; else loading\">\n  <p class=\"step-description\">\n    {{ pageHeaderText$ | async | translate }}\n  </p>\n  <div class=\"list-container\">\n    <cds-structured-list (selected)=\"selected($event)\" selection=\"true\">\n      <cds-list-header>\n        <cds-list-column nowrap=\"true\"></cds-list-column>\n        <cds-list-column nowrap=\"true\">\n          {{ columnHeaderText$ | async | translate }}\n        </cds-list-column>\n        <cds-list-column>\n          {{ 'processLinkConfiguration.pluginDescription' | translate }}\n        </cds-list-column>\n      </cds-list-header>\n      <cds-list-row *ngFor=\"let item of items\" [value]=\"item.payload\">\n        <cds-list-column>\n          <div *ngIf=\"item.logo\">\n            <img [src]=\"item.logo\" [title]=\"item.title\" class=\"plugin-configuration-logo\" />\n          </div>\n        </cds-list-column>\n        <cds-list-column>{{ item.title }}</cds-list-column>\n        <cds-list-column>{{ item.description }}</cds-list-column>\n      </cds-list-row>\n    </cds-structured-list>\n  </div>\n</ng-container>\n\n<ng-template #loading>\n  <div class=\"loading-container\">\n    <cds-loading></cds-loading>\n  </div>\n</ng-template>\n", styles: [".btn-back{position:absolute}.plugin-configuration-logo{object-fit:contain;height:60px;width:100%;margin-bottom:-.5rem}.loading-container{display:flex;justify-content:center;margin-top:40px;flex-direction:row}.list-container{margin-top:32px;margin-bottom:32px}::ng-deep .list-container .cds--structured-list-td{vertical-align:top}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+            args: [{ standalone: false, selector: 'valtimo-select-plugin-configuration', template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container *ngIf=\"listItems$ | async as items; else loading\">\n  <p class=\"step-description\" [attr.data-test-id]=\"testIds.container\">\n    {{ pageHeaderText$ | async | translate }}\n  </p>\n  <div class=\"list-container\">\n    <cds-structured-list\n      [attr.data-test-id]=\"testIds.list\"\n      (selected)=\"selected($event)\"\n      selection=\"true\"\n    >\n      <cds-list-header>\n        <cds-list-column nowrap=\"true\"></cds-list-column>\n        <cds-list-column nowrap=\"true\">\n          {{ columnHeaderText$ | async | translate }}\n        </cds-list-column>\n        <cds-list-column>\n          {{ 'processLinkConfiguration.pluginDescription' | translate }}\n        </cds-list-column>\n      </cds-list-header>\n      <cds-list-row\n        *ngFor=\"let item of items\"\n        [attr.data-test-id]=\"rowTestIdPrefix + item.id\"\n        [value]=\"item.payload\"\n      >\n        <cds-list-column>\n          <div *ngIf=\"item.logo\">\n            <img [src]=\"item.logo\" [title]=\"item.title\" class=\"plugin-configuration-logo\" />\n          </div>\n        </cds-list-column>\n        <cds-list-column>{{ item.title }}</cds-list-column>\n        <cds-list-column>{{ item.description }}</cds-list-column>\n      </cds-list-row>\n    </cds-structured-list>\n  </div>\n</ng-container>\n\n<ng-template #loading>\n  <div class=\"loading-container\">\n    <cds-loading></cds-loading>\n  </div>\n</ng-template>\n", styles: [".btn-back{position:absolute}.plugin-configuration-logo{object-fit:contain;height:60px;width:100%;margin-bottom:-.5rem}.loading-container{display:flex;justify-content:center;margin-top:40px;flex-direction:row}.list-container{margin-top:32px;margin-bottom:32px}::ng-deep .list-container .cds--structured-list-td{vertical-align:top}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
         }], ctorParameters: () => [{ type: i1$1.PluginManagementService }, { type: PluginStateService }, { type: i1$1.PluginService }, { type: ProcessLinkStateService }, { type: ProcessLinkButtonService }, { type: ProcessLinkStepService }, { type: i1$1.PluginTranslationService }] });
 
 /*
@@ -2005,14 +2090,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
  * limitations under the License.
  */
 class SelectPluginActionComponent {
-    constructor(buttonService, injector, pluginManagementService, pluginService, stateService, stepService, processLinkStateService) {
+    constructor(buttonService, injector, pluginManagementService, pluginService, pluginTranslationService, stateService, stepService, processLinkStateService) {
         this.buttonService = buttonService;
         this.injector = injector;
         this.pluginManagementService = pluginManagementService;
         this.pluginService = pluginService;
+        this.pluginTranslationService = pluginTranslationService;
         this.stateService = stateService;
         this.stepService = stepService;
         this.processLinkStateService = processLinkStateService;
+        this.testIds = SELECT_PLUGIN_ACTION_TEST_IDS;
+        this.tileTestIdPrefix = SELECT_PLUGIN_ACTION_TILE_TEST_ID_PREFIX;
         this.pluginFunctions$ = combineLatest([
             this.stateService.selectedPluginDefinition$,
             this.processLinkStateService.modalParams$,
@@ -2030,7 +2118,7 @@ class SelectPluginActionComponent {
                 const props = (selectedConfiguration?.properties ?? {});
                 const filterFn = specification.functionConfigurationComponentsFilter;
                 return forkJoin(functions.map(fn => filterFn(props, fn.key, this.injector).pipe(map$1(visible => ({ fn, visible }))))).pipe(map$1(results => results.filter(r => r.visible).map(r => r.fn)));
-            }));
+            }), switchMap$1(functions => this.sortByTranslatedTitle(functions, selectedDefinition.key)));
         }));
         this.selectedPluginDefinition$ = this.stateService.selectedPluginDefinition$;
         this.selectedPluginFunction$ = this.stateService.selectedPluginFunction$;
@@ -2053,6 +2141,15 @@ class SelectPluginActionComponent {
     stringify(object) {
         return JSON.stringify(object);
     }
+    sortByTranslatedTitle(pluginFunctions, pluginDefinitionKey) {
+        if (!pluginFunctions?.length)
+            return of(pluginFunctions);
+        return combineLatest(pluginFunctions.map(pluginFunction => this.pluginTranslationService
+            .translate(pluginFunction.key, pluginDefinitionKey)
+            .pipe(map$1(title => ({ pluginFunction, title }))))).pipe(map$1(translatedFunctions => [...translatedFunctions]
+            .sort((a, b) => a.title.localeCompare(b.title))
+            .map(translatedFunction => translatedFunction.pluginFunction)));
+    }
     openBackButtonSubscription() {
         this.buttonService.backButtonClick$
             .pipe(withLatestFrom(this.processLinkStateService.isEditing$), filter$1(([, isEditing]) => !isEditing), switchMap$1(() => this.stepService.hasOneProcessLinkType$), take(1))
@@ -2067,13 +2164,13 @@ class SelectPluginActionComponent {
             this.stepService.setConfigurePluginActionSteps();
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SelectPluginActionComponent, deps: [{ token: ProcessLinkButtonService }, { token: i0.Injector }, { token: i1$1.PluginManagementService }, { token: i1$1.PluginService }, { token: PluginStateService }, { token: ProcessLinkStepService }, { token: ProcessLinkStateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: SelectPluginActionComponent, isStandalone: false, selector: "valtimo-select-plugin-action", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container *ngIf=\"pluginFunctions$ | async as pluginFunctions; else loading\">\n  <div class=\"choose-plugin-action\" *ngIf=\"pluginFunctions?.length > 0\">\n    <p class=\"step-description\">\n      {{ 'processLinkConfiguration.choosePluginActionDescription' | translate }}\n    </p>\n    <div class=\"action-tiles\">\n      <cds-tile-group\n        [multiple]=\"false\"\n        *ngIf=\"{selectedPluginDefinition: selectedPluginDefinition$ | async} as obs\"\n        (selected)=\"selected($event)\"\n      >\n        <cds-selection-tile\n          *ngFor=\"let pluginFunction of pluginFunctions\"\n          [value]=\"stringify(pluginFunction)\"\n          [selected]=\"false\"\n          >{{\n            pluginFunction.key | pluginTranslate: obs.selectedPluginDefinition.key | async\n          }}</cds-selection-tile\n        >\n      </cds-tile-group>\n    </div>\n  </div>\n  <ng-container *ngIf=\"!pluginFunctions || pluginFunctions?.length === 0\">\n    <ng-container *ngTemplateOutlet=\"noPluginFunctionsTemplate\"> </ng-container>\n  </ng-container>\n</ng-container>\n\n<ng-template #noPluginFunctionsTemplate>\n  <p class=\"step-description\">\n    {{ 'processLink.noPluginFunctions' | translate }}\n  </p>\n</ng-template>\n\n<ng-template #loading>\n  <div class=\"loading-container\">\n    <cds-loading></cds-loading>\n  </div>\n</ng-template>\n", styles: [".btn-back{position:absolute}.cards-container{display:flex;flex-flow:row wrap;width:100%}.card{width:calc(33.3% - 20px);margin-right:30px}.card:nth-child(3n+3){margin-right:0}.card-header{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.loading-container{display:flex;justify-content:center;margin-top:40px;flex-direction:row}.action-tiles{margin-top:24px;width:calc(100% + 8px);margin-left:-8px}::ng-deep .choose-plugin-action cds-selection-tile{display:flex;width:calc(33.3% - 8px)}::ng-deep .choose-plugin-action .cds--tile{width:100%}::ng-deep .choose-plugin-action cds-tile-group fieldset{display:flex;flex-direction:row;flex-wrap:wrap}::ng-deep .choose-plugin-action cds-selection-tile{margin-left:8px}::ng-deep .choose-plugin-action cds-selection-tile:nth-child(n+4){margin-top:8px}::ng-deep .action-tiles .cds--tile{background-color:var(--cds-layer-02, #ffffff)}::ng-deep .action-tiles .cds--tile:hover{background:var(--cds-layer-hover)}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.Loading, selector: "cds-loading, ibm-loading", inputs: ["title", "isActive", "size", "overlay"] }, { kind: "component", type: i4.SelectionTile, selector: "cds-selection-tile, ibm-selection-tile", inputs: ["theme", "id", "selected", "value", "disabled"], outputs: ["change"] }, { kind: "component", type: i4.TileGroup, selector: "cds-tile-group, ibm-tile-group", inputs: ["name", "multiple", "legend"], outputs: ["selected"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1$1.PluginTranslatePipe, name: "pluginTranslate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SelectPluginActionComponent, deps: [{ token: ProcessLinkButtonService }, { token: i0.Injector }, { token: i1$1.PluginManagementService }, { token: i1$1.PluginService }, { token: i1$1.PluginTranslationService }, { token: PluginStateService }, { token: ProcessLinkStepService }, { token: ProcessLinkStateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: SelectPluginActionComponent, isStandalone: false, selector: "valtimo-select-plugin-action", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container *ngIf=\"pluginFunctions$ | async as pluginFunctions; else loading\">\n  <div\n    class=\"choose-plugin-action\"\n    *ngIf=\"pluginFunctions?.length > 0\"\n    [attr.data-test-id]=\"testIds.container\"\n  >\n    <p class=\"step-description\">\n      {{ 'processLinkConfiguration.choosePluginActionDescription' | translate }}\n    </p>\n    <div class=\"action-tiles\">\n      <cds-tile-group\n        [attr.data-test-id]=\"testIds.tileGroup\"\n        [multiple]=\"false\"\n        *ngIf=\"{selectedPluginDefinition: selectedPluginDefinition$ | async} as obs\"\n        (selected)=\"selected($event)\"\n      >\n        <cds-selection-tile\n          *ngFor=\"let pluginFunction of pluginFunctions\"\n          [attr.data-test-id]=\"tileTestIdPrefix + pluginFunction.key\"\n          [value]=\"stringify(pluginFunction)\"\n          [selected]=\"false\"\n          >{{\n            pluginFunction.key | pluginTranslate: obs.selectedPluginDefinition.key | async\n          }}</cds-selection-tile\n        >\n      </cds-tile-group>\n    </div>\n  </div>\n  <ng-container *ngIf=\"!pluginFunctions || pluginFunctions?.length === 0\">\n    <ng-container *ngTemplateOutlet=\"noPluginFunctionsTemplate\"> </ng-container>\n  </ng-container>\n</ng-container>\n\n<ng-template #noPluginFunctionsTemplate>\n  <p class=\"step-description\" [attr.data-test-id]=\"testIds.noActionsMessage\">\n    {{ 'processLink.noPluginFunctions' | translate }}\n  </p>\n</ng-template>\n\n<ng-template #loading>\n  <div class=\"loading-container\">\n    <cds-loading></cds-loading>\n  </div>\n</ng-template>\n", styles: [".btn-back{position:absolute}.cards-container{display:flex;flex-flow:row wrap;width:100%}.card{width:calc(33.3% - 20px);margin-right:30px}.card:nth-child(3n+3){margin-right:0}.card-header{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.loading-container{display:flex;justify-content:center;margin-top:40px;flex-direction:row}.action-tiles{margin-top:24px;width:calc(100% + 8px);margin-left:-8px}::ng-deep .choose-plugin-action cds-selection-tile{display:flex;width:calc(33.3% - 8px)}::ng-deep .choose-plugin-action .cds--tile{width:100%}::ng-deep .choose-plugin-action cds-tile-group fieldset{display:flex;flex-direction:row;flex-wrap:wrap}::ng-deep .choose-plugin-action cds-selection-tile{margin-left:8px}::ng-deep .choose-plugin-action cds-selection-tile:nth-child(n+4){margin-top:8px}::ng-deep .action-tiles .cds--tile{background-color:var(--cds-layer-02, #ffffff)}::ng-deep .action-tiles .cds--tile:hover{background:var(--cds-layer-hover)}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.Loading, selector: "cds-loading, ibm-loading", inputs: ["title", "isActive", "size", "overlay"] }, { kind: "component", type: i5.SelectionTile, selector: "cds-selection-tile, ibm-selection-tile", inputs: ["theme", "id", "selected", "value", "disabled"], outputs: ["change"] }, { kind: "component", type: i5.TileGroup, selector: "cds-tile-group, ibm-tile-group", inputs: ["name", "multiple", "legend"], outputs: ["selected"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1$1.PluginTranslatePipe, name: "pluginTranslate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SelectPluginActionComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'valtimo-select-plugin-action', template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container *ngIf=\"pluginFunctions$ | async as pluginFunctions; else loading\">\n  <div class=\"choose-plugin-action\" *ngIf=\"pluginFunctions?.length > 0\">\n    <p class=\"step-description\">\n      {{ 'processLinkConfiguration.choosePluginActionDescription' | translate }}\n    </p>\n    <div class=\"action-tiles\">\n      <cds-tile-group\n        [multiple]=\"false\"\n        *ngIf=\"{selectedPluginDefinition: selectedPluginDefinition$ | async} as obs\"\n        (selected)=\"selected($event)\"\n      >\n        <cds-selection-tile\n          *ngFor=\"let pluginFunction of pluginFunctions\"\n          [value]=\"stringify(pluginFunction)\"\n          [selected]=\"false\"\n          >{{\n            pluginFunction.key | pluginTranslate: obs.selectedPluginDefinition.key | async\n          }}</cds-selection-tile\n        >\n      </cds-tile-group>\n    </div>\n  </div>\n  <ng-container *ngIf=\"!pluginFunctions || pluginFunctions?.length === 0\">\n    <ng-container *ngTemplateOutlet=\"noPluginFunctionsTemplate\"> </ng-container>\n  </ng-container>\n</ng-container>\n\n<ng-template #noPluginFunctionsTemplate>\n  <p class=\"step-description\">\n    {{ 'processLink.noPluginFunctions' | translate }}\n  </p>\n</ng-template>\n\n<ng-template #loading>\n  <div class=\"loading-container\">\n    <cds-loading></cds-loading>\n  </div>\n</ng-template>\n", styles: [".btn-back{position:absolute}.cards-container{display:flex;flex-flow:row wrap;width:100%}.card{width:calc(33.3% - 20px);margin-right:30px}.card:nth-child(3n+3){margin-right:0}.card-header{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.loading-container{display:flex;justify-content:center;margin-top:40px;flex-direction:row}.action-tiles{margin-top:24px;width:calc(100% + 8px);margin-left:-8px}::ng-deep .choose-plugin-action cds-selection-tile{display:flex;width:calc(33.3% - 8px)}::ng-deep .choose-plugin-action .cds--tile{width:100%}::ng-deep .choose-plugin-action cds-tile-group fieldset{display:flex;flex-direction:row;flex-wrap:wrap}::ng-deep .choose-plugin-action cds-selection-tile{margin-left:8px}::ng-deep .choose-plugin-action cds-selection-tile:nth-child(n+4){margin-top:8px}::ng-deep .action-tiles .cds--tile{background-color:var(--cds-layer-02, #ffffff)}::ng-deep .action-tiles .cds--tile:hover{background:var(--cds-layer-hover)}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
-        }], ctorParameters: () => [{ type: ProcessLinkButtonService }, { type: i0.Injector }, { type: i1$1.PluginManagementService }, { type: i1$1.PluginService }, { type: PluginStateService }, { type: ProcessLinkStepService }, { type: ProcessLinkStateService }] });
+            args: [{ standalone: false, selector: 'valtimo-select-plugin-action', template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container *ngIf=\"pluginFunctions$ | async as pluginFunctions; else loading\">\n  <div\n    class=\"choose-plugin-action\"\n    *ngIf=\"pluginFunctions?.length > 0\"\n    [attr.data-test-id]=\"testIds.container\"\n  >\n    <p class=\"step-description\">\n      {{ 'processLinkConfiguration.choosePluginActionDescription' | translate }}\n    </p>\n    <div class=\"action-tiles\">\n      <cds-tile-group\n        [attr.data-test-id]=\"testIds.tileGroup\"\n        [multiple]=\"false\"\n        *ngIf=\"{selectedPluginDefinition: selectedPluginDefinition$ | async} as obs\"\n        (selected)=\"selected($event)\"\n      >\n        <cds-selection-tile\n          *ngFor=\"let pluginFunction of pluginFunctions\"\n          [attr.data-test-id]=\"tileTestIdPrefix + pluginFunction.key\"\n          [value]=\"stringify(pluginFunction)\"\n          [selected]=\"false\"\n          >{{\n            pluginFunction.key | pluginTranslate: obs.selectedPluginDefinition.key | async\n          }}</cds-selection-tile\n        >\n      </cds-tile-group>\n    </div>\n  </div>\n  <ng-container *ngIf=\"!pluginFunctions || pluginFunctions?.length === 0\">\n    <ng-container *ngTemplateOutlet=\"noPluginFunctionsTemplate\"> </ng-container>\n  </ng-container>\n</ng-container>\n\n<ng-template #noPluginFunctionsTemplate>\n  <p class=\"step-description\" [attr.data-test-id]=\"testIds.noActionsMessage\">\n    {{ 'processLink.noPluginFunctions' | translate }}\n  </p>\n</ng-template>\n\n<ng-template #loading>\n  <div class=\"loading-container\">\n    <cds-loading></cds-loading>\n  </div>\n</ng-template>\n", styles: [".btn-back{position:absolute}.cards-container{display:flex;flex-flow:row wrap;width:100%}.card{width:calc(33.3% - 20px);margin-right:30px}.card:nth-child(3n+3){margin-right:0}.card-header{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.loading-container{display:flex;justify-content:center;margin-top:40px;flex-direction:row}.action-tiles{margin-top:24px;width:calc(100% + 8px);margin-left:-8px}::ng-deep .choose-plugin-action cds-selection-tile{display:flex;width:calc(33.3% - 8px)}::ng-deep .choose-plugin-action .cds--tile{width:100%}::ng-deep .choose-plugin-action cds-tile-group fieldset{display:flex;flex-direction:row;flex-wrap:wrap}::ng-deep .choose-plugin-action cds-selection-tile{margin-left:8px}::ng-deep .choose-plugin-action cds-selection-tile:nth-child(n+4){margin-top:8px}::ng-deep .action-tiles .cds--tile{background-color:var(--cds-layer-02, #ffffff)}::ng-deep .action-tiles .cds--tile:hover{background:var(--cds-layer-hover)}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+        }], ctorParameters: () => [{ type: ProcessLinkButtonService }, { type: i0.Injector }, { type: i1$1.PluginManagementService }, { type: i1$1.PluginService }, { type: i1$1.PluginTranslationService }, { type: PluginStateService }, { type: ProcessLinkStepService }, { type: ProcessLinkStateService }] });
 
 /*
  * Copyright 2015-2025 Ritense BV, the Netherlands.
@@ -2104,14 +2201,16 @@ class ImportPluginConfigurationComponent {
     get activity() {
         return this.importPluginForm.get('activity');
     }
-    constructor(cdsThemeService, formBuilder, processLinkService, iconService) {
+    constructor(cdsThemeService, formBuilder, processLinkService, iconService, stateService) {
         this.cdsThemeService = cdsThemeService;
         this.formBuilder = formBuilder;
         this.processLinkService = processLinkService;
         this.iconService = iconService;
+        this.stateService = stateService;
         this.configurationEvent = new EventEmitter();
         this.open$ = new Subject();
         this.toggletipTheme$ = this.cdsThemeService.toggletipTheme$;
+        this.readOnly$ = this.stateService.readOnly$;
         this._compatiblePluginProcessLinksSubject$ = new BehaviorSubject([]);
         this.compatiblePluginProcessLinks$ = this._compatiblePluginProcessLinksSubject$.asObservable();
         this.importPluginForm = this.formBuilder.group({
@@ -2184,13 +2283,13 @@ class ImportPluginConfigurationComponent {
     activitySelected(event) {
         this.activity.setValue(event?.item?.content);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ImportPluginConfigurationComponent, deps: [{ token: i2$1.CdsThemeService }, { token: i1$2.FormBuilder }, { token: ProcessLinkService }, { token: i4.IconService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: ImportPluginConfigurationComponent, isStandalone: false, selector: "valtimo-import-plugin-configuration", inputs: { pluginActionKey: "pluginActionKey" }, outputs: { configurationEvent: "configurationEvent" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<cds-toggletip align=\"right-bottom\" [autoAlign]=\"true\" [isOpen]=\"open$ | async\">\n  <button\n    class=\"process-link-configuration-import-button\"\n    [disabled]=\"((compatiblePluginProcessLinks$ | async) || []).length === 0\"\n    cdsToggletipButton\n    [removeClassnames]=\"['cds--toggletip-button']\"\n    cdsButton=\"ghost\"\n  >\n    {{ 'processLinkConfiguration.importConfiguration' | translate }}\n\n    <svg class=\"cds--btn__icon\" cdsIcon=\"upload\" size=\"16\"></svg>\n  </button>\n\n  <div\n    cdsToggletipContent\n    class=\"process-link-configuration-select\"\n  >\n    <cds-dropdown\n      [attr.data-carbon-theme]=\"toggletipTheme$ | async\"\n      [label]=\"'processLinkConfiguration.process' | translate\"\n      [placeholder]=\"'processLinkConfiguration.selectProcess' | translate\"\n      (selected)=\"processSelected($event)\"\n      [appendInline]=\"true\"\n      [cdsLayer]=\"1\"\n    >\n      <cds-dropdown-list\n        [items]=\"processListItems$ | async\"\n        onclick=\"event.stopPropagation()\"\n      ></cds-dropdown-list>\n    </cds-dropdown>\n\n    <cds-dropdown\n      [attr.data-carbon-theme]=\"toggletipTheme$ | async\"\n      [label]=\"'processLinkConfiguration.version' | translate\"\n      [placeholder]=\"'processLinkConfiguration.selectVersion' | translate\"\n      [disabled]=\"!process.value\"\n      (selected)=\"versionSelected($event)\"\n      [appendInline]=\"true\"\n      [cdsLayer]=\"1\"\n    >\n      <cds-dropdown-list\n        [items]=\"versionListItems$ | async\"\n        onclick=\"event.stopPropagation()\"\n      ></cds-dropdown-list>\n    </cds-dropdown>\n\n    <cds-dropdown\n      [attr.data-carbon-theme]=\"toggletipTheme$ | async\"\n      [label]=\"'processLinkConfiguration.activity' | translate\"\n      [placeholder]=\"'processLinkConfiguration.selectActivity' | translate\"\n      [disabled]=\"!process.value || !version.value\"\n      (selected)=\"activitySelected($event)\"\n      [appendInline]=\"true\"\n      [cdsLayer]=\"1\"\n    >\n      <cds-dropdown-list\n        [items]=\"activityListItems$ | async\"\n        onclick=\"event.stopPropagation()\"\n      ></cds-dropdown-list>\n    </cds-dropdown>\n\n    <button cdsButton [attr.data-carbon-theme]=\"toggletipTheme$ | async\" [disabled]=\"!importPluginForm.valid\" (click)=\"onSubmit()\" [cdsLayer]=\"1\">\n      {{ 'processLinkConfiguration.importConfiguration' | translate }}\n    </button>\n  </div>\n</cds-toggletip>\n", styles: [":host ::ng-deep .cds--popover-content{max-inline-size:unset}.process-link-configuration-import-button{margin-bottom:16px}.process-link-configuration-select{width:400px;max-inline-size:400px;display:flex;flex-direction:column;gap:16px}.process-link-configuration-select .cds--btn{width:100%;max-width:unset}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i4.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i4.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i5.Dropdown, selector: "cds-dropdown, ibm-dropdown", inputs: ["id", "label", "hideLabel", "helperText", "placeholder", "displayValue", "clearText", "size", "type", "theme", "disabled", "readonly", "skeleton", "inline", "disableArrowKeys", "invalid", "invalidText", "warn", "warnText", "appendInline", "scrollableContainer", "itemValueKey", "selectionFeedback", "menuButtonLabel", "selectedLabel", "dropUp", "fluid"], outputs: ["selected", "onClose", "close"] }, { kind: "component", type: i5.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "directive", type: i4.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "component", type: i4.Toggletip, selector: "cds-toggletip, ibm-toggletip", inputs: ["id", "isOpen"] }, { kind: "directive", type: i4.ToggletipButton, selector: "[cdsToggletipButton], [ibmToggletipButton]", inputs: ["ariaLabel"] }, { kind: "directive", type: i4.ToggletipContent, selector: "[cdsToggletipContent], [ibmToggletipContent]" }, { kind: "directive", type: i2$1.RemoveClassnamesDirective, selector: "[removeClassnames]", inputs: ["removeClassnames"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ImportPluginConfigurationComponent, deps: [{ token: i2$1.CdsThemeService }, { token: i1$2.FormBuilder }, { token: ProcessLinkService }, { token: i5.IconService }, { token: ProcessLinkStateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: ImportPluginConfigurationComponent, isStandalone: false, selector: "valtimo-import-plugin-configuration", inputs: { pluginActionKey: "pluginActionKey" }, outputs: { configurationEvent: "configurationEvent" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<cds-toggletip\n  *ngIf=\"!(readOnly$ | async)\"\n  align=\"right-bottom\"\n  [autoAlign]=\"true\"\n  [isOpen]=\"open$ | async\"\n>\n  <button\n    class=\"process-link-configuration-import-button\"\n    [disabled]=\"((compatiblePluginProcessLinks$ | async) || []).length === 0\"\n    cdsToggletipButton\n    [removeClassnames]=\"['cds--toggletip-button']\"\n    cdsButton=\"ghost\"\n  >\n    {{ 'processLinkConfiguration.importConfiguration' | translate }}\n\n    <svg class=\"cds--btn__icon\" cdsIcon=\"upload\" size=\"16\"></svg>\n  </button>\n\n  <div\n    cdsToggletipContent\n    class=\"process-link-configuration-select\"\n  >\n    <cds-dropdown\n      [attr.data-carbon-theme]=\"toggletipTheme$ | async\"\n      [label]=\"'processLinkConfiguration.process' | translate\"\n      [placeholder]=\"'processLinkConfiguration.selectProcess' | translate\"\n      (selected)=\"processSelected($event)\"\n      [appendInline]=\"true\"\n      [cdsLayer]=\"1\"\n    >\n      <cds-dropdown-list\n        [items]=\"processListItems$ | async\"\n        onclick=\"event.stopPropagation()\"\n      ></cds-dropdown-list>\n    </cds-dropdown>\n\n    <cds-dropdown\n      [attr.data-carbon-theme]=\"toggletipTheme$ | async\"\n      [label]=\"'processLinkConfiguration.version' | translate\"\n      [placeholder]=\"'processLinkConfiguration.selectVersion' | translate\"\n      [disabled]=\"!process.value\"\n      (selected)=\"versionSelected($event)\"\n      [appendInline]=\"true\"\n      [cdsLayer]=\"1\"\n    >\n      <cds-dropdown-list\n        [items]=\"versionListItems$ | async\"\n        onclick=\"event.stopPropagation()\"\n      ></cds-dropdown-list>\n    </cds-dropdown>\n\n    <cds-dropdown\n      [attr.data-carbon-theme]=\"toggletipTheme$ | async\"\n      [label]=\"'processLinkConfiguration.activity' | translate\"\n      [placeholder]=\"'processLinkConfiguration.selectActivity' | translate\"\n      [disabled]=\"!process.value || !version.value\"\n      (selected)=\"activitySelected($event)\"\n      [appendInline]=\"true\"\n      [cdsLayer]=\"1\"\n    >\n      <cds-dropdown-list\n        [items]=\"activityListItems$ | async\"\n        onclick=\"event.stopPropagation()\"\n      ></cds-dropdown-list>\n    </cds-dropdown>\n\n    <button cdsButton [attr.data-carbon-theme]=\"toggletipTheme$ | async\" [disabled]=\"!importPluginForm.valid\" (click)=\"onSubmit()\" [cdsLayer]=\"1\">\n      {{ 'processLinkConfiguration.importConfiguration' | translate }}\n    </button>\n  </div>\n</cds-toggletip>\n", styles: [":host ::ng-deep .cds--popover-content{max-inline-size:unset}.process-link-configuration-import-button{margin-bottom:16px}.process-link-configuration-select{width:400px;max-inline-size:400px;display:flex;flex-direction:column;gap:16px}.process-link-configuration-select .cds--btn{width:100%;max-width:unset}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i5.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i6.Dropdown, selector: "cds-dropdown, ibm-dropdown", inputs: ["id", "label", "hideLabel", "helperText", "placeholder", "displayValue", "clearText", "size", "type", "theme", "disabled", "readonly", "skeleton", "inline", "disableArrowKeys", "invalid", "invalidText", "warn", "warnText", "appendInline", "scrollableContainer", "itemValueKey", "selectionFeedback", "menuButtonLabel", "selectedLabel", "dropUp", "fluid"], outputs: ["selected", "onClose", "close"] }, { kind: "component", type: i6.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "directive", type: i5.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "component", type: i5.Toggletip, selector: "cds-toggletip, ibm-toggletip", inputs: ["id", "isOpen"] }, { kind: "directive", type: i5.ToggletipButton, selector: "[cdsToggletipButton], [ibmToggletipButton]", inputs: ["ariaLabel"] }, { kind: "directive", type: i5.ToggletipContent, selector: "[cdsToggletipContent], [ibmToggletipContent]" }, { kind: "directive", type: i2$1.RemoveClassnamesDirective, selector: "[removeClassnames]", inputs: ["removeClassnames"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ImportPluginConfigurationComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'valtimo-import-plugin-configuration', template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<cds-toggletip align=\"right-bottom\" [autoAlign]=\"true\" [isOpen]=\"open$ | async\">\n  <button\n    class=\"process-link-configuration-import-button\"\n    [disabled]=\"((compatiblePluginProcessLinks$ | async) || []).length === 0\"\n    cdsToggletipButton\n    [removeClassnames]=\"['cds--toggletip-button']\"\n    cdsButton=\"ghost\"\n  >\n    {{ 'processLinkConfiguration.importConfiguration' | translate }}\n\n    <svg class=\"cds--btn__icon\" cdsIcon=\"upload\" size=\"16\"></svg>\n  </button>\n\n  <div\n    cdsToggletipContent\n    class=\"process-link-configuration-select\"\n  >\n    <cds-dropdown\n      [attr.data-carbon-theme]=\"toggletipTheme$ | async\"\n      [label]=\"'processLinkConfiguration.process' | translate\"\n      [placeholder]=\"'processLinkConfiguration.selectProcess' | translate\"\n      (selected)=\"processSelected($event)\"\n      [appendInline]=\"true\"\n      [cdsLayer]=\"1\"\n    >\n      <cds-dropdown-list\n        [items]=\"processListItems$ | async\"\n        onclick=\"event.stopPropagation()\"\n      ></cds-dropdown-list>\n    </cds-dropdown>\n\n    <cds-dropdown\n      [attr.data-carbon-theme]=\"toggletipTheme$ | async\"\n      [label]=\"'processLinkConfiguration.version' | translate\"\n      [placeholder]=\"'processLinkConfiguration.selectVersion' | translate\"\n      [disabled]=\"!process.value\"\n      (selected)=\"versionSelected($event)\"\n      [appendInline]=\"true\"\n      [cdsLayer]=\"1\"\n    >\n      <cds-dropdown-list\n        [items]=\"versionListItems$ | async\"\n        onclick=\"event.stopPropagation()\"\n      ></cds-dropdown-list>\n    </cds-dropdown>\n\n    <cds-dropdown\n      [attr.data-carbon-theme]=\"toggletipTheme$ | async\"\n      [label]=\"'processLinkConfiguration.activity' | translate\"\n      [placeholder]=\"'processLinkConfiguration.selectActivity' | translate\"\n      [disabled]=\"!process.value || !version.value\"\n      (selected)=\"activitySelected($event)\"\n      [appendInline]=\"true\"\n      [cdsLayer]=\"1\"\n    >\n      <cds-dropdown-list\n        [items]=\"activityListItems$ | async\"\n        onclick=\"event.stopPropagation()\"\n      ></cds-dropdown-list>\n    </cds-dropdown>\n\n    <button cdsButton [attr.data-carbon-theme]=\"toggletipTheme$ | async\" [disabled]=\"!importPluginForm.valid\" (click)=\"onSubmit()\" [cdsLayer]=\"1\">\n      {{ 'processLinkConfiguration.importConfiguration' | translate }}\n    </button>\n  </div>\n</cds-toggletip>\n", styles: [":host ::ng-deep .cds--popover-content{max-inline-size:unset}.process-link-configuration-import-button{margin-bottom:16px}.process-link-configuration-select{width:400px;max-inline-size:400px;display:flex;flex-direction:column;gap:16px}.process-link-configuration-select .cds--btn{width:100%;max-width:unset}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
-        }], ctorParameters: () => [{ type: i2$1.CdsThemeService }, { type: i1$2.FormBuilder }, { type: ProcessLinkService }, { type: i4.IconService }], propDecorators: { pluginActionKey: [{
+            args: [{ standalone: false, selector: 'valtimo-import-plugin-configuration', template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<cds-toggletip\n  *ngIf=\"!(readOnly$ | async)\"\n  align=\"right-bottom\"\n  [autoAlign]=\"true\"\n  [isOpen]=\"open$ | async\"\n>\n  <button\n    class=\"process-link-configuration-import-button\"\n    [disabled]=\"((compatiblePluginProcessLinks$ | async) || []).length === 0\"\n    cdsToggletipButton\n    [removeClassnames]=\"['cds--toggletip-button']\"\n    cdsButton=\"ghost\"\n  >\n    {{ 'processLinkConfiguration.importConfiguration' | translate }}\n\n    <svg class=\"cds--btn__icon\" cdsIcon=\"upload\" size=\"16\"></svg>\n  </button>\n\n  <div\n    cdsToggletipContent\n    class=\"process-link-configuration-select\"\n  >\n    <cds-dropdown\n      [attr.data-carbon-theme]=\"toggletipTheme$ | async\"\n      [label]=\"'processLinkConfiguration.process' | translate\"\n      [placeholder]=\"'processLinkConfiguration.selectProcess' | translate\"\n      (selected)=\"processSelected($event)\"\n      [appendInline]=\"true\"\n      [cdsLayer]=\"1\"\n    >\n      <cds-dropdown-list\n        [items]=\"processListItems$ | async\"\n        onclick=\"event.stopPropagation()\"\n      ></cds-dropdown-list>\n    </cds-dropdown>\n\n    <cds-dropdown\n      [attr.data-carbon-theme]=\"toggletipTheme$ | async\"\n      [label]=\"'processLinkConfiguration.version' | translate\"\n      [placeholder]=\"'processLinkConfiguration.selectVersion' | translate\"\n      [disabled]=\"!process.value\"\n      (selected)=\"versionSelected($event)\"\n      [appendInline]=\"true\"\n      [cdsLayer]=\"1\"\n    >\n      <cds-dropdown-list\n        [items]=\"versionListItems$ | async\"\n        onclick=\"event.stopPropagation()\"\n      ></cds-dropdown-list>\n    </cds-dropdown>\n\n    <cds-dropdown\n      [attr.data-carbon-theme]=\"toggletipTheme$ | async\"\n      [label]=\"'processLinkConfiguration.activity' | translate\"\n      [placeholder]=\"'processLinkConfiguration.selectActivity' | translate\"\n      [disabled]=\"!process.value || !version.value\"\n      (selected)=\"activitySelected($event)\"\n      [appendInline]=\"true\"\n      [cdsLayer]=\"1\"\n    >\n      <cds-dropdown-list\n        [items]=\"activityListItems$ | async\"\n        onclick=\"event.stopPropagation()\"\n      ></cds-dropdown-list>\n    </cds-dropdown>\n\n    <button cdsButton [attr.data-carbon-theme]=\"toggletipTheme$ | async\" [disabled]=\"!importPluginForm.valid\" (click)=\"onSubmit()\" [cdsLayer]=\"1\">\n      {{ 'processLinkConfiguration.importConfiguration' | translate }}\n    </button>\n  </div>\n</cds-toggletip>\n", styles: [":host ::ng-deep .cds--popover-content{max-inline-size:unset}.process-link-configuration-import-button{margin-bottom:16px}.process-link-configuration-select{width:400px;max-inline-size:400px;display:flex;flex-direction:column;gap:16px}.process-link-configuration-select .cds--btn{width:100%;max-width:unset}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+        }], ctorParameters: () => [{ type: i2$1.CdsThemeService }, { type: i1$2.FormBuilder }, { type: ProcessLinkService }, { type: i5.IconService }, { type: ProcessLinkStateService }], propDecorators: { pluginActionKey: [{
                 type: Input
             }], configurationEvent: [{
                 type: Output
@@ -2218,6 +2317,7 @@ class PluginActionConfigurationComponent {
         this.buttonService = buttonService;
         this.stepService = stepService;
         this.processLinkService = processLinkService;
+        this.testIds = PLUGIN_ACTION_CONFIGURATION_TEST_IDS;
         this.valid = new EventEmitter();
         this.configuration = new EventEmitter();
         this.pluginDefinitionKey$ = this.pluginStateService.pluginDefinitionKey$;
@@ -2349,11 +2449,11 @@ class PluginActionConfigurationComponent {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: PluginActionConfigurationComponent, deps: [{ token: ProcessLinkStateService }, { token: PluginStateService }, { token: ProcessLinkButtonService }, { token: ProcessLinkStepService }, { token: ProcessLinkService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: PluginActionConfigurationComponent, isStandalone: false, selector: "valtimo-plugin-action-configuration", inputs: { selectedPluginConfiguration$: "selectedPluginConfiguration$" }, outputs: { valid: "valid", configuration: "configuration" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<valtimo-import-plugin-configuration\n  [pluginActionKey]=\"functionKey$ | async\"\n  (configurationEvent)=\"onImportConfiguration($event)\"\n></valtimo-import-plugin-configuration>\n\n<valtimo-plugin-configuration-container\n  [pluginDefinitionKey]=\"pluginDefinitionKey$ | async\"\n  [functionKey]=\"functionKey$ | async\"\n  [save$]=\"save$\"\n  [disabled$]=\"saving$\"\n  [selectedPluginConfiguration$]=\"selectedPluginConfiguration$\"\n  [prefillConfiguration$]=\"prefillConfiguration$\"\n  (valid)=\"onValid($event)\"\n  (configuration)=\"onConfiguration($event)\"\n  type=\"function\"\n></valtimo-plugin-configuration-container>\n", styles: ["/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "component", type: i1$1.PluginConfigurationContainerComponent, selector: "valtimo-plugin-configuration-container", inputs: ["type", "pluginDefinitionKey", "functionKey", "save$", "disabled$", "selectedPluginConfiguration$", "prefillConfiguration$"], outputs: ["valid", "configuration"] }, { kind: "component", type: ImportPluginConfigurationComponent, selector: "valtimo-import-plugin-configuration", inputs: ["pluginActionKey"], outputs: ["configurationEvent"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: PluginActionConfigurationComponent, isStandalone: false, selector: "valtimo-plugin-action-configuration", inputs: { selectedPluginConfiguration$: "selectedPluginConfiguration$" }, outputs: { valid: "valid", configuration: "configuration" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<valtimo-import-plugin-configuration\n  [attr.data-test-id]=\"testIds.container\"\n  [pluginActionKey]=\"functionKey$ | async\"\n  (configurationEvent)=\"onImportConfiguration($event)\"\n></valtimo-import-plugin-configuration>\n\n<valtimo-plugin-configuration-container\n  [pluginDefinitionKey]=\"pluginDefinitionKey$ | async\"\n  [functionKey]=\"functionKey$ | async\"\n  [save$]=\"save$\"\n  [disabled$]=\"saving$\"\n  [selectedPluginConfiguration$]=\"selectedPluginConfiguration$\"\n  [prefillConfiguration$]=\"prefillConfiguration$\"\n  (valid)=\"onValid($event)\"\n  (configuration)=\"onConfiguration($event)\"\n  type=\"function\"\n></valtimo-plugin-configuration-container>\n", styles: ["/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "component", type: i1$1.PluginConfigurationContainerComponent, selector: "valtimo-plugin-configuration-container", inputs: ["type", "pluginDefinitionKey", "functionKey", "save$", "disabled$", "selectedPluginConfiguration$", "prefillConfiguration$"], outputs: ["valid", "configuration"] }, { kind: "component", type: ImportPluginConfigurationComponent, selector: "valtimo-import-plugin-configuration", inputs: ["pluginActionKey"], outputs: ["configurationEvent"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: PluginActionConfigurationComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'valtimo-plugin-action-configuration', template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<valtimo-import-plugin-configuration\n  [pluginActionKey]=\"functionKey$ | async\"\n  (configurationEvent)=\"onImportConfiguration($event)\"\n></valtimo-import-plugin-configuration>\n\n<valtimo-plugin-configuration-container\n  [pluginDefinitionKey]=\"pluginDefinitionKey$ | async\"\n  [functionKey]=\"functionKey$ | async\"\n  [save$]=\"save$\"\n  [disabled$]=\"saving$\"\n  [selectedPluginConfiguration$]=\"selectedPluginConfiguration$\"\n  [prefillConfiguration$]=\"prefillConfiguration$\"\n  (valid)=\"onValid($event)\"\n  (configuration)=\"onConfiguration($event)\"\n  type=\"function\"\n></valtimo-plugin-configuration-container>\n", styles: ["/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+            args: [{ standalone: false, selector: 'valtimo-plugin-action-configuration', template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<valtimo-import-plugin-configuration\n  [attr.data-test-id]=\"testIds.container\"\n  [pluginActionKey]=\"functionKey$ | async\"\n  (configurationEvent)=\"onImportConfiguration($event)\"\n></valtimo-import-plugin-configuration>\n\n<valtimo-plugin-configuration-container\n  [pluginDefinitionKey]=\"pluginDefinitionKey$ | async\"\n  [functionKey]=\"functionKey$ | async\"\n  [save$]=\"save$\"\n  [disabled$]=\"saving$\"\n  [selectedPluginConfiguration$]=\"selectedPluginConfiguration$\"\n  [prefillConfiguration$]=\"prefillConfiguration$\"\n  (valid)=\"onValid($event)\"\n  (configuration)=\"onConfiguration($event)\"\n  type=\"function\"\n></valtimo-plugin-configuration-container>\n", styles: ["/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
         }], ctorParameters: () => [{ type: ProcessLinkStateService }, { type: PluginStateService }, { type: ProcessLinkButtonService }, { type: ProcessLinkStepService }, { type: ProcessLinkService }], propDecorators: { selectedPluginConfiguration$: [{
                 type: Input
             }], valid: [{
@@ -2486,13 +2586,13 @@ class FormLinkProcessDiagramComponent {
         }
         this.version = +version;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FormLinkProcessDiagramComponent, deps: [{ token: i1$3.ProcessService }, { token: i3$2.ActivatedRoute }, { token: i2$1.PageTitleService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: FormLinkProcessDiagramComponent, isStandalone: false, selector: "valtimo-form-link-process-diagram", outputs: { bpmnElementModalOpen: "bpmnElementModalOpen", bpmnElementModalClose: "bpmnElementModalClose" }, viewQueries: [{ propertyName: "el", first: true, predicate: ["ref"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"container-fluid\">\n  <div class=\"row p-4 bg-white\">\n    <div class=\"col\">\n      <div #ref class=\"diagram-container\"></div>\n    </div>\n  </div>\n</div>\n<div class=\"p-4 text-center legenda-holder\">\n  <span>Click on a User Task to specify a form definition for that User Task.</span>\n</div>\n\n<ng-container renderInPageHeader [fullWidth]=\"true\">\n  <ng-template>\n    <div class=\"form-link-dossier-actions\">\n      <cds-select [label]=\"'Process'\" (change)=\"setProcessDefinitionKey($event.target.value)\"\n        ><option\n          *ngFor=\"let processDefinition of processDefinitions\"\n          [value]=\"processDefinition.key\"\n          [selected]=\"processDefinitionKey === processDefinition.key\"\n        >\n          {{ processDefinition.name }}\n        </option>\n      </cds-select>\n      <cds-select [label]=\"'Version'\" (change)=\"setProcessDefinitionVersion($event.target.value)\">\n        <option\n          *ngFor=\"let processDefinitionVersion of processDefinitionVersions\"\n          [value]=\"processDefinitionVersion.version\"\n          [selected]=\"processDefinitionVersion.version === version\"\n        >\n          {{ processDefinitionVersion.version }}\n        </option>\n      </cds-select>\n    </div>\n  </ng-template>\n</ng-container>\n", styles: [".diagram-container-switch-holder{width:100%;z-index:1000}.diagram-container{height:58vh}.container-fluid{border:1px solid #dee2e6}.options{border-bottom:1px solid #dee2e6}.form-link-dossier-actions{display:flex;flex-direction:row;gap:8px}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.RenderInPageHeaderDirective, selector: "[renderInPageHeader]", inputs: ["fullWidth"] }, { kind: "component", type: i4.Select, selector: "cds-select, ibm-select", inputs: ["value", "display", "label", "helperText", "invalidText", "warn", "warnText", "id", "size", "disabled", "skeleton", "invalid", "readonly", "theme", "ariaLabel", "fluid"], outputs: ["valueChange"] }, { kind: "directive", type: i4.Option, selector: "option" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FormLinkProcessDiagramComponent, deps: [{ token: i1$3.ProcessService }, { token: i3$1.ActivatedRoute }, { token: i2$1.PageTitleService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: FormLinkProcessDiagramComponent, isStandalone: false, selector: "valtimo-form-link-process-diagram", outputs: { bpmnElementModalOpen: "bpmnElementModalOpen", bpmnElementModalClose: "bpmnElementModalClose" }, viewQueries: [{ propertyName: "el", first: true, predicate: ["ref"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"container-fluid\">\n  <div class=\"row p-4 bg-white\">\n    <div class=\"col\">\n      <div #ref class=\"diagram-container\"></div>\n    </div>\n  </div>\n</div>\n<div class=\"p-4 text-center legenda-holder\">\n  <span>Click on a User Task to specify a form definition for that User Task.</span>\n</div>\n\n<ng-container renderInPageHeader [fullWidth]=\"true\">\n  <ng-template>\n    <div class=\"form-link-dossier-actions\">\n      <cds-select [label]=\"'Process'\" (change)=\"setProcessDefinitionKey($event.target.value)\"\n        ><option\n          *ngFor=\"let processDefinition of processDefinitions\"\n          [value]=\"processDefinition.key\"\n          [selected]=\"processDefinitionKey === processDefinition.key\"\n        >\n          {{ processDefinition.name }}\n        </option>\n      </cds-select>\n      <cds-select [label]=\"'Version'\" (change)=\"setProcessDefinitionVersion($event.target.value)\">\n        <option\n          *ngFor=\"let processDefinitionVersion of processDefinitionVersions\"\n          [value]=\"processDefinitionVersion.version\"\n          [selected]=\"processDefinitionVersion.version === version\"\n        >\n          {{ processDefinitionVersion.version }}\n        </option>\n      </cds-select>\n    </div>\n  </ng-template>\n</ng-container>\n", styles: [".diagram-container-switch-holder{width:100%;z-index:1000}.diagram-container{height:58vh}.container-fluid{border:1px solid #dee2e6}.options{border-bottom:1px solid #dee2e6}.form-link-dossier-actions{display:flex;flex-direction:row;gap:8px}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.RenderInPageHeaderDirective, selector: "[renderInPageHeader]", inputs: ["fullWidth"] }, { kind: "component", type: i5.Select, selector: "cds-select, ibm-select", inputs: ["value", "display", "label", "helperText", "invalidText", "warn", "warnText", "id", "size", "disabled", "skeleton", "invalid", "readonly", "theme", "ariaLabel", "fluid"], outputs: ["valueChange"] }, { kind: "directive", type: i5.Option, selector: "option" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FormLinkProcessDiagramComponent, decorators: [{
             type: Component,
             args: [{ standalone: false, selector: 'valtimo-form-link-process-diagram', template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"container-fluid\">\n  <div class=\"row p-4 bg-white\">\n    <div class=\"col\">\n      <div #ref class=\"diagram-container\"></div>\n    </div>\n  </div>\n</div>\n<div class=\"p-4 text-center legenda-holder\">\n  <span>Click on a User Task to specify a form definition for that User Task.</span>\n</div>\n\n<ng-container renderInPageHeader [fullWidth]=\"true\">\n  <ng-template>\n    <div class=\"form-link-dossier-actions\">\n      <cds-select [label]=\"'Process'\" (change)=\"setProcessDefinitionKey($event.target.value)\"\n        ><option\n          *ngFor=\"let processDefinition of processDefinitions\"\n          [value]=\"processDefinition.key\"\n          [selected]=\"processDefinitionKey === processDefinition.key\"\n        >\n          {{ processDefinition.name }}\n        </option>\n      </cds-select>\n      <cds-select [label]=\"'Version'\" (change)=\"setProcessDefinitionVersion($event.target.value)\">\n        <option\n          *ngFor=\"let processDefinitionVersion of processDefinitionVersions\"\n          [value]=\"processDefinitionVersion.version\"\n          [selected]=\"processDefinitionVersion.version === version\"\n        >\n          {{ processDefinitionVersion.version }}\n        </option>\n      </cds-select>\n    </div>\n  </ng-template>\n</ng-container>\n", styles: [".diagram-container-switch-holder{width:100%;z-index:1000}.diagram-container{height:58vh}.container-fluid{border:1px solid #dee2e6}.options{border-bottom:1px solid #dee2e6}.form-link-dossier-actions{display:flex;flex-direction:row;gap:8px}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
-        }], ctorParameters: () => [{ type: i1$3.ProcessService }, { type: i3$2.ActivatedRoute }, { type: i2$1.PageTitleService }], propDecorators: { el: [{
+        }], ctorParameters: () => [{ type: i1$3.ProcessService }, { type: i3$1.ActivatedRoute }, { type: i2$1.PageTitleService }], propDecorators: { el: [{
                 type: ViewChild,
                 args: ['ref']
             }], bpmnElementModalOpen: [{
@@ -2501,6 +2601,182 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                 type: Output
             }] } });
 
+/*
+ * Copyright 2015-2026 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+const READ_ONLY_INPUT_TYPES = ['email', 'number', 'password', 'search', 'tel', 'text', 'url'];
+const FOCUSABLE = 'a[href], area[href], button, input, select, textarea, iframe, [tabindex], [contenteditable]';
+// Carbon draws a control read-only through a modifier class on its wrapper.
+const CARBON_READ_ONLY_MODIFIERS = [
+    ['.cds--checkbox-group', 'cds--checkbox-group--readonly'],
+    ['.cds--checkbox-wrapper', 'cds--checkbox-wrapper--readonly'],
+    ['.cds--combo-box', 'cds--combo-box--readonly'],
+    ['.cds--dropdown', 'cds--dropdown--readonly'],
+    ['.cds--multi-select', 'cds--multi-select--readonly'],
+    ['.cds--number', 'cds--number--readonly'],
+    ['.cds--radio-button-group', 'cds--radio-button-group--readonly'],
+    ['.cds--select', 'cds--select--readonly'],
+    ['.cds--slider-container', 'cds--slider-container--readonly'],
+    ['.cds--text-area__wrapper', 'cds--text-area__wrapper--readonly'],
+    ['.cds--text-input-wrapper', 'cds--text-input-wrapper--readonly'],
+    ['.cds--time-picker', 'cds--time-picker--readonly'],
+    ['.cds--toggle', 'cds--toggle--readonly'],
+];
+// Fields used without their Carbon wrapper need their parent to carry the modifier instead.
+const CARBON_UNWRAPPED_FIELDS = [
+    ['.cds--text-area', '.cds--text-area__wrapper', 'cds--text-area__wrapper--readonly'],
+    ['.cds--text-input', '.cds--text-input-wrapper', 'cds--text-input-wrapper--readonly'],
+];
+// Carbon buttons change the content, so read-only content leaves them out instead of disabling them.
+const EDIT_ACTIONS = '.cds--btn:not(.cds--text-input--password__visibility__toggle)';
+class ReadOnlyContentDirective {
+    set readOnly(readOnly) {
+        this._readOnly = !!readOnly;
+        this.apply();
+    }
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+        this._readOnly = false;
+        this._observer = null;
+        this._originalStates = new Map();
+        this._blockActivation = (event) => {
+            if (!this._readOnly)
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+        };
+    }
+    ngOnInit() {
+        this._observer = new MutationObserver(() => this.apply());
+        this._observer.observe(this.elementRef.nativeElement, { childList: true, subtree: true });
+        this.elementRef.nativeElement.addEventListener('click', this._blockActivation, true);
+        this.apply();
+    }
+    ngOnDestroy() {
+        this._observer?.disconnect();
+        this.elementRef.nativeElement.removeEventListener('click', this._blockActivation, true);
+        this._originalStates.clear();
+    }
+    apply() {
+        const host = this.elementRef?.nativeElement;
+        if (!host)
+            return;
+        if (!this._readOnly) {
+            this.restore();
+            return;
+        }
+        Array.from(host.children).forEach(child => this.setStyle(child, 'pointerEvents', 'none'));
+        host
+            .querySelectorAll(FOCUSABLE)
+            .forEach(element => this.setAttribute(element, 'tabindex', '-1'));
+        host.querySelectorAll('input').forEach(input => {
+            if (READ_ONLY_INPUT_TYPES.includes(input.type))
+                this.setReadOnly(input);
+        });
+        host.querySelectorAll('textarea').forEach(textarea => this.setReadOnly(textarea));
+        host
+            .querySelectorAll('[contenteditable="true"]')
+            .forEach(editor => this.setAttribute(editor, 'contenteditable', 'false'));
+        host
+            .querySelectorAll('[role="combobox"], [role="listbox"]')
+            .forEach(element => this.setAttribute(element, 'aria-readonly', 'true'));
+        host
+            .querySelectorAll('[role="button"]')
+            .forEach(element => this.setAttribute(element, 'aria-disabled', 'true'));
+        host
+            .querySelectorAll(EDIT_ACTIONS)
+            .forEach(action => this.setStyle(action, 'display', 'none'));
+        this.applyCarbonReadOnlyStyling(host);
+    }
+    applyCarbonReadOnlyStyling(host) {
+        CARBON_READ_ONLY_MODIFIERS.forEach(([selector, modifier]) => host
+            .querySelectorAll(selector)
+            .forEach(wrapper => this.addClass(wrapper, modifier)));
+        CARBON_UNWRAPPED_FIELDS.forEach(([field, wrapper, modifier]) => host.querySelectorAll(field).forEach(control => {
+            const parent = control.parentElement;
+            if (!parent || control.closest(wrapper))
+                return;
+            this.addClass(parent, modifier);
+        }));
+    }
+    addClass(element, className) {
+        if (element.classList.contains(className))
+            return;
+        element.classList.add(className);
+        this.stateOf(element).addedClasses.push(className);
+    }
+    setAttribute(element, name, value) {
+        const attributes = this.stateOf(element).attributes;
+        if (!attributes.has(name))
+            attributes.set(name, element.getAttribute(name));
+        element.setAttribute(name, value);
+    }
+    setReadOnly(control) {
+        const state = this.stateOf(control);
+        if (state.readOnly === null)
+            state.readOnly = control.readOnly;
+        control.readOnly = true;
+    }
+    setStyle(element, property, value) {
+        const styles = this.stateOf(element).styles;
+        if (!styles.has(property))
+            styles.set(property, element.style[property]);
+        element.style[property] = value;
+    }
+    stateOf(element) {
+        const state = this._originalStates.get(element) ?? {
+            addedClasses: [],
+            attributes: new Map(),
+            readOnly: null,
+            styles: new Map(),
+        };
+        this._originalStates.set(element, state);
+        return state;
+    }
+    restore() {
+        this._originalStates.forEach((original, element) => {
+            original.attributes.forEach((value, name) => {
+                if (value === null) {
+                    element.removeAttribute(name);
+                }
+                else {
+                    element.setAttribute(name, value);
+                }
+            });
+            original.styles.forEach((value, property) => (element.style[property] = value));
+            original.addedClasses.forEach(className => element.classList.remove(className));
+            if (original.readOnly !== null) {
+                element.readOnly = original.readOnly;
+            }
+        });
+        this._originalStates.clear();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ReadOnlyContentDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: ReadOnlyContentDirective, isStandalone: true, selector: "[valtimoReadOnlyContent]", inputs: { readOnly: ["valtimoReadOnlyContent", "readOnly"] }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ReadOnlyContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: '[valtimoReadOnlyContent]',
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { readOnly: [{
+                type: Input,
+                args: ['valtimoReadOnlyContent']
+            }] } });
+
 /*
  * Copyright 2015-2026 Ritense BV, the Netherlands.
  *
@@ -3018,8 +3294,8 @@ class ConfigureBuildingBlockMappingsComponent {
             return false;
         return fields.some(field => field.required && field.name === target);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ConfigureBuildingBlockMappingsComponent, deps: [{ token: i1$2.FormBuilder }, { token: BuildingBlockStateService }, { token: ProcessLinkButtonService }, { token: ProcessLinkStepService }, { token: ProcessLinkService }, { token: ProcessLinkStateService }, { token: i3.TranslateService }, { token: i3$2.ActivatedRoute }, { token: i0.ChangeDetectorRef }, { token: ProcessLinkBuildingBlockApiService }, { token: ProcessLinkStateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: ConfigureBuildingBlockMappingsComponent, isStandalone: true, selector: "valtimo-configure-building-block-mappings", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2026 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n@let obs =\n  {\n    fields: (buildingBlockFields$ | async),\n    fieldItems: (buildingBlockFieldItems$ | async),\n    params: (params$ | async),\n    buildingBlockParams: (buildingBlockParams$ | async),\n    sourceContextName: (sourceContextName$ | async),\n    targetBuildingBlockName: (targetBuildingBlockName$ | async),\n    sourceIsCase: (sourceIsCase$ | async),\n    sourceIsIndependent: (sourceIsIndependent$ | async),\n    caseLabelTranslation: ('Case' | translate),\n    processLabelTranslation: ('processLinkConfiguration.buildingBlock.process' | translate),\n    buildingBlockLabelTranslation:\n      ('processLinkConfiguration.buildingBlock.selectLabel' | translate),\n  };\n\n<div class=\"mapping-step\">\n  <section class=\"mapping-section\" [attr.data-test-id]=\"testIds.inputSection\">\n    <h4 class=\"section-header\">\n      {{ 'processLinkConfiguration.buildingBlock.inputTitle' | translate }}\n    </h4>\n\n    <div class=\"mapping-table\" [formGroup]=\"inputsForm\">\n      <div class=\"mapping-header input\">\n        <v-input-label\n          [title]=\"\n            (obs.sourceIsIndependent\n              ? obs.processLabelTranslation\n              : obs.sourceIsCase\n                ? obs.caseLabelTranslation\n                : obs.buildingBlockLabelTranslation) +\n            (obs.sourceIsIndependent ? '' : ': ' + obs.sourceContextName)\n          \"\n        />\n\n        <v-input-label\n          [title]=\"obs.buildingBlockLabelTranslation + ': ' + obs.targetBuildingBlockName\"\n        />\n      </div>\n\n      <div formArrayName=\"inputs\">\n        @for (group of inputs.controls; let inputIndex = $index; track inputIndex) {\n          <div\n            class=\"mapping-row input\"\n            [formGroup]=\"group\"\n            [attr.data-test-id]=\"testIds.inputRow\"\n          >\n            <div class=\"mapping-part\">\n              @if (obs.sourceIsIndependent) {\n                <input [cdsLayer]=\"2\" cdsText formControlName=\"source\" [placeholder]=\"'pv:'\" />\n              } @else {\n                <valtimo-value-path-selector\n                  [cdsLayer]=\"2\"\n                  [prefixes]=\"[ValuePathSelectorPrefix.DOC, ValuePathSelectorPrefix.CASE]\"\n                  [notation]=\"'slashes'\"\n                  [caseDefinitionKey]=\"obs.params?.caseDefinitionKey\"\n                  [caseDefinitionVersionTag]=\"obs.params?.caseDefinitionVersionTag\"\n                  [excludePrefixes]=\"[ValuePathSelectorPrefix.TASK]\"\n                  [buildingBlockDefinitionKey]=\"obs.buildingBlockParams?.buildingBlockDefinitionKey\"\n                  [buildingBlockDefinitionVersionTag]=\"\n                    obs.buildingBlockParams?.buildingBlockDefinitionVersionTag\n                  \"\n                  [appendInline]=\"false\"\n                  [dropUp]=\"false\"\n                  [formControl]=\"group.get('source')\"\n                ></valtimo-value-path-selector>\n              }\n\n              <div class=\"arrow\">\u2192</div>\n            </div>\n\n            <div class=\"mapping-part\">\n              <div class=\"mapping-cell\" [attr.data-test-id]=\"testIds.inputTargetSelectWrapper\">\n                @if (isRequiredTarget(obs.fields, group.get('target')?.value)) {\n                  <div class=\"required-target\" [attr.data-test-id]=\"testIds.inputRequiredTargetLabel\">\n                    {{ group.get('target')?.value }}\n                  </div>\n                } @else {\n                  <v-select\n                    [cdsLayer]=\"2\"\n                    [appendInline]=\"false\"\n                    formControlName=\"target\"\n                    [placeholder]=\"\n                      'processLinkConfiguration.buildingBlock.selectedBuildingBlockFieldPlaceholder'\n                        | translate\n                    \"\n                    [items]=\"getBuildingBlockFieldItemsForRow$(group) | async\"\n                    [dropUp]=\"false\"\n                  >\n                  </v-select>\n                }\n              </div>\n\n              <div class=\"mapping-cell-actions\">\n                @if (!isRequiredTarget(obs.fields, group.get('target')?.value)) {\n                  <button\n                    cdsButton=\"danger--ghost\"\n                    iconOnly\n                    size=\"sm\"\n                    (click)=\"deleteInput(inputIndex)\"\n                    [attr.data-test-id]=\"testIds.inputDeleteButton\"\n                  >\n                    <svg cdsIcon=\"trash-can\" class=\"cds--btn__icon\" size=\"16\"></svg>\n                  </button>\n                } @else {\n                  <div class=\"required-indicator\" [attr.data-test-id]=\"testIds.inputRequiredIndicator\">\n                    *\n                  </div>\n\n                  <div>\n                    {{ 'interface.required' | translate }}\n                  </div>\n                }\n              </div>\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n\n    <button\n      cdsButton=\"tertiary\"\n      size=\"sm\"\n      (click)=\"addInput()\"\n      [title]=\"'processLinkConfiguration.buildingBlock.addInput' | translate\"\n      [disabled]=\"allInputsMapped$ | async\"\n      [attr.data-test-id]=\"testIds.addInputButton\"\n    >\n      {{ 'processLinkConfiguration.buildingBlock.addInput' | translate }}\n\n      <svg cdsIcon=\"add\" class=\"cds--btn__icon\" size=\"16\"></svg>\n    </button>\n  </section>\n\n  <section class=\"mapping-section\" [attr.data-test-id]=\"testIds.outputSection\">\n    <h4 class=\"section-header\">\n      {{ 'processLinkConfiguration.buildingBlock.outputTitle' | translate }}\n    </h4>\n\n    <div class=\"mapping-table\" [formGroup]=\"outputsForm\">\n      <div class=\"mapping-header output\">\n        <v-input-label\n          [title]=\"obs.buildingBlockLabelTranslation + ': ' + obs.targetBuildingBlockName\"\n        />\n\n        <v-input-label\n          [title]=\"\n            (obs.sourceIsIndependent\n              ? obs.processLabelTranslation\n              : obs.sourceIsCase\n                ? obs.caseLabelTranslation\n                : obs.buildingBlockLabelTranslation) +\n            (obs.sourceIsIndependent ? '' : ': ' + obs.sourceContextName)\n          \"\n        />\n\n        <div class=\"sync-options\">\n          <v-input-label\n            [title]=\"'processLinkConfiguration.buildingBlock.sync.title' | translate\"\n          />\n        </div>\n      </div>\n\n      <div formArrayName=\"outputs\">\n        @for (group of outputs.controls; let outputIndex = $index; track outputIndex) {\n          <div\n            class=\"mapping-row output\"\n            [formGroup]=\"group\"\n            [attr.data-test-id]=\"testIds.outputRow\"\n          >\n            <div class=\"mapping-part\">\n              <div class=\"mapping-cell\" [attr.data-test-id]=\"testIds.outputSourceSelectWrapper\">\n                <v-select\n                  [cdsLayer]=\"2\"\n                  [appendInline]=\"false\"\n                  formControlName=\"source\"\n                  [items]=\"obs.fieldItems || []\"\n                  [placeholder]=\"\n                    'processLinkConfiguration.buildingBlock.selectedBuildingBlockFieldPlaceholder'\n                      | translate\n                  \"\n                  [dropUp]=\"true\"\n                >\n                </v-select>\n              </div>\n\n              <div class=\"arrow\">\u2192</div>\n            </div>\n\n            <div class=\"mapping-part\">\n              @if (obs.sourceIsIndependent) {\n                <input [cdsLayer]=\"2\" cdsText formControlName=\"target\" [placeholder]=\"'pv:'\" />\n              } @else {\n                <valtimo-value-path-selector\n                  [cdsLayer]=\"2\"\n                  [prefixes]=\"[ValuePathSelectorPrefix.DOC, ValuePathSelectorPrefix.CASE]\"\n                  [notation]=\"'slashes'\"\n                  [caseDefinitionKey]=\"obs.params?.caseDefinitionKey\"\n                  [caseDefinitionVersionTag]=\"obs.params?.caseDefinitionVersionTag\"\n                  [excludePrefixes]=\"[ValuePathSelectorPrefix.TASK]\"\n                  [buildingBlockDefinitionKey]=\"obs.buildingBlockParams?.buildingBlockDefinitionKey\"\n                  [buildingBlockDefinitionVersionTag]=\"\n                    obs.buildingBlockParams?.buildingBlockDefinitionVersionTag\n                  \"\n                  [formControl]=\"group.get('target')\"\n                  [appendInline]=\"false\"\n                  [filterItems]=\"getUsedCaseTargetsForRow$(group) | async\"\n                  [dropUp]=\"true\"\n                ></valtimo-value-path-selector>\n              }\n            </div>\n\n            <div class=\"mapping-part\">\n              <div class=\"mapping-cell\">\n                <cds-radio-group\n                  class=\"sync-radio-group\"\n                  formControlName=\"syncTiming\"\n                  [attr.name]=\"'syncTiming-' + outputIndex\"\n                >\n                  @for (item of syncTimingItems; track item.id) {\n                    <cds-radio [value]=\"item.id\" [checked]=\"isSyncTimingSelected(group, item.id)\">\n                      {{ item.labelKey | translate }}\n                    </cds-radio>\n                  }\n                </cds-radio-group>\n              </div>\n\n              <div class=\"mapping-cell-actions\">\n                <button\n                  cdsButton=\"danger--ghost\"\n                  iconOnly\n                  size=\"sm\"\n                  (click)=\"deleteOutput(outputIndex)\"\n                  [attr.data-test-id]=\"testIds.outputDeleteButton\"\n                >\n                  <svg cdsIcon=\"trash-can\" class=\"cds--btn__icon\" size=\"16\"></svg>\n                </button>\n              </div>\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n\n    <button\n      cdsButton=\"tertiary\"\n      size=\"sm\"\n      (click)=\"addOutput()\"\n      [title]=\"'processLinkConfiguration.buildingBlock.addOutput' | translate\"\n      [attr.data-test-id]=\"testIds.addOutputButton\"\n    >\n      {{ 'processLinkConfiguration.buildingBlock.addOutput' | translate }}\n\n      <svg cdsIcon=\"add\" class=\"cds--btn__icon\" size=\"16\"></svg>\n    </button>\n  </section>\n</div>\n", styles: [".section-header{font-size:14px;line-height:18px;font-weight:600}.mapping-section{margin-bottom:16px}.mapping-row,.mapping-header{display:grid;align-items:center}.mapping-row.input,.mapping-header.input{grid-template-columns:1fr 1fr}.mapping-row.output,.mapping-header.output{grid-template-columns:5fr 6fr 3fr}.mapping-header.output .sync-options{padding-left:10px;display:flex}.mapping-row{margin-bottom:8px;padding:8px;background-color:var(--cds-layer)}.mapping-row .mapping-part{display:flex}.mapping-row .arrow{text-align:center;width:40px;line-height:40px;font-size:large}.mapping-row .mapping-cell{flex:1;min-width:0}.mapping-row .mapping-cell-actions{display:flex;align-self:flex-end;text-transform:capitalize;margin-left:10px}.mapping-row .mapping-cell-actions .required-indicator{margin:0 5px;color:var(--cds-text-error)}.mapping-row .mapping-cell-actions button{margin-bottom:5px}.mapping-row .mapping-cell-actions button ::ng-deep .cds--btn__icon{margin:0!important}.mapping-row .sync-radio-group{padding-left:10px;margin-top:8px}.mapping-row .sync-radio-group .sync-radio:first-child{margin-right:0}.mapping-row .sync-radio-group ::ng-deep .cds--radio-button__label{justify-content:normal}::ng-deep .process-link-modal-container .cds--modal-container{max-width:1280px}\n/*!\n * Copyright 2015-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: ComboBoxModule }, { kind: "ngmodule", type: RadioModule }, { kind: "component", type: i4.Radio, selector: "cds-radio, ibm-radio", inputs: ["checked", "name", "disabled", "labelPlacement", "ariaLabelledby", "ariaLabel", "required", "value", "skeleton", "id"], outputs: ["change"] }, { kind: "component", type: i4.RadioGroup, selector: "cds-radio-group, ibm-radio-group", inputs: ["selected", "value", "name", "disabled", "skeleton", "orientation", "labelPlacement", "legend", "ariaLabel", "ariaLabelledby", "helperText", "invalid", "invalidText", "warn", "warnText"], outputs: ["change"] }, { kind: "ngmodule", type: InputModule }, { kind: "directive", type: i4.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "component", type: ValuePathSelectorComponent, selector: "valtimo-value-path-selector", inputs: ["name", "appendInline", "margin", "marginLg", "marginXl", "disabled", "caseDefinitionKey", "caseDefinitionVersionTag", "buildingBlockDefinitionKey", "buildingBlockDefinitionVersionTag", "prefixes", "excludePrefixes", "label", "tooltip", "required", "showCaseDefinitionSelector", "notation", "dropUp", "defaultValue", "type", "parentItem", "filterItems"], outputs: ["valueChangeEvent", "collectionSelected"] }, { kind: "ngmodule", type: InputLabelModule }, { kind: "component", type: i2$1.InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "tooltipTranslationKey", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i4.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i4.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i2$1.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: "ngmodule", type: LayerModule }, { kind: "directive", type: i4.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ConfigureBuildingBlockMappingsComponent, deps: [{ token: i1$2.FormBuilder }, { token: BuildingBlockStateService }, { token: ProcessLinkButtonService }, { token: ProcessLinkStepService }, { token: ProcessLinkService }, { token: ProcessLinkStateService }, { token: i3.TranslateService }, { token: i3$1.ActivatedRoute }, { token: i0.ChangeDetectorRef }, { token: ProcessLinkBuildingBlockApiService }, { token: ProcessLinkStateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: ConfigureBuildingBlockMappingsComponent, isStandalone: true, selector: "valtimo-configure-building-block-mappings", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2026 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n@let obs =\n  {\n    fields: (buildingBlockFields$ | async),\n    fieldItems: (buildingBlockFieldItems$ | async),\n    params: (params$ | async),\n    buildingBlockParams: (buildingBlockParams$ | async),\n    sourceContextName: (sourceContextName$ | async),\n    targetBuildingBlockName: (targetBuildingBlockName$ | async),\n    sourceIsCase: (sourceIsCase$ | async),\n    sourceIsIndependent: (sourceIsIndependent$ | async),\n    caseLabelTranslation: ('Case' | translate),\n    processLabelTranslation: ('processLinkConfiguration.buildingBlock.process' | translate),\n    buildingBlockLabelTranslation:\n      ('processLinkConfiguration.buildingBlock.selectLabel' | translate),\n  };\n\n<div class=\"mapping-step\">\n  <section class=\"mapping-section\" [attr.data-test-id]=\"testIds.inputSection\">\n    <h4 class=\"section-header\">\n      {{ 'processLinkConfiguration.buildingBlock.inputTitle' | translate }}\n    </h4>\n\n    <div class=\"mapping-table\" [formGroup]=\"inputsForm\">\n      <div class=\"mapping-header input\">\n        <v-input-label\n          [title]=\"\n            (obs.sourceIsIndependent\n              ? obs.processLabelTranslation\n              : obs.sourceIsCase\n                ? obs.caseLabelTranslation\n                : obs.buildingBlockLabelTranslation) +\n            (obs.sourceIsIndependent ? '' : ': ' + obs.sourceContextName)\n          \"\n        />\n\n        <v-input-label\n          [title]=\"obs.buildingBlockLabelTranslation + ': ' + obs.targetBuildingBlockName\"\n        />\n      </div>\n\n      <div formArrayName=\"inputs\">\n        @for (group of inputs.controls; let inputIndex = $index; track inputIndex) {\n          <div\n            class=\"mapping-row input\"\n            [formGroup]=\"group\"\n            [attr.data-test-id]=\"testIds.inputRow\"\n          >\n            <div class=\"mapping-part\">\n              @if (obs.sourceIsIndependent) {\n                <input [cdsLayer]=\"2\" cdsText formControlName=\"source\" [placeholder]=\"'pv:'\" />\n              } @else {\n                <valtimo-value-path-selector\n                  [cdsLayer]=\"2\"\n                  [prefixes]=\"[ValuePathSelectorPrefix.DOC, ValuePathSelectorPrefix.CASE]\"\n                  [notation]=\"'slashes'\"\n                  [caseDefinitionKey]=\"obs.params?.caseDefinitionKey\"\n                  [caseDefinitionVersionTag]=\"obs.params?.caseDefinitionVersionTag\"\n                  [excludePrefixes]=\"[ValuePathSelectorPrefix.TASK]\"\n                  [buildingBlockDefinitionKey]=\"obs.buildingBlockParams?.buildingBlockDefinitionKey\"\n                  [buildingBlockDefinitionVersionTag]=\"\n                    obs.buildingBlockParams?.buildingBlockDefinitionVersionTag\n                  \"\n                  [appendInline]=\"false\"\n                  [dropUp]=\"false\"\n                  [formControl]=\"group.get('source')\"\n                ></valtimo-value-path-selector>\n              }\n\n              <div class=\"arrow\">\u2192</div>\n            </div>\n\n            <div class=\"mapping-part\">\n              <div class=\"mapping-cell\" [attr.data-test-id]=\"testIds.inputTargetSelectWrapper\">\n                @if (isRequiredTarget(obs.fields, group.get('target')?.value)) {\n                  <div class=\"required-target\" [attr.data-test-id]=\"testIds.inputRequiredTargetLabel\">\n                    {{ group.get('target')?.value }}\n                  </div>\n                } @else {\n                  <v-select\n                    [cdsLayer]=\"2\"\n                    [appendInline]=\"false\"\n                    formControlName=\"target\"\n                    [placeholder]=\"\n                      'processLinkConfiguration.buildingBlock.selectedBuildingBlockFieldPlaceholder'\n                        | translate\n                    \"\n                    [items]=\"getBuildingBlockFieldItemsForRow$(group) | async\"\n                    [dropUp]=\"false\"\n                  >\n                  </v-select>\n                }\n              </div>\n\n              <div class=\"mapping-cell-actions\">\n                @if (!isRequiredTarget(obs.fields, group.get('target')?.value)) {\n                  <button\n                    cdsButton=\"danger--ghost\"\n                    iconOnly\n                    size=\"sm\"\n                    (click)=\"deleteInput(inputIndex)\"\n                    [attr.data-test-id]=\"testIds.inputDeleteButton\"\n                  >\n                    <svg cdsIcon=\"trash-can\" class=\"cds--btn__icon\" size=\"16\"></svg>\n                  </button>\n                } @else {\n                  <div class=\"required-indicator\" [attr.data-test-id]=\"testIds.inputRequiredIndicator\">\n                    *\n                  </div>\n\n                  <div>\n                    {{ 'interface.required' | translate }}\n                  </div>\n                }\n              </div>\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n\n    <button\n      cdsButton=\"tertiary\"\n      size=\"sm\"\n      (click)=\"addInput()\"\n      [title]=\"'processLinkConfiguration.buildingBlock.addInput' | translate\"\n      [disabled]=\"allInputsMapped$ | async\"\n      [attr.data-test-id]=\"testIds.addInputButton\"\n    >\n      {{ 'processLinkConfiguration.buildingBlock.addInput' | translate }}\n\n      <svg cdsIcon=\"add\" class=\"cds--btn__icon\" size=\"16\"></svg>\n    </button>\n  </section>\n\n  <section class=\"mapping-section\" [attr.data-test-id]=\"testIds.outputSection\">\n    <h4 class=\"section-header\">\n      {{ 'processLinkConfiguration.buildingBlock.outputTitle' | translate }}\n    </h4>\n\n    <div class=\"mapping-table\" [formGroup]=\"outputsForm\">\n      <div class=\"mapping-header output\">\n        <v-input-label\n          [title]=\"obs.buildingBlockLabelTranslation + ': ' + obs.targetBuildingBlockName\"\n        />\n\n        <v-input-label\n          [title]=\"\n            (obs.sourceIsIndependent\n              ? obs.processLabelTranslation\n              : obs.sourceIsCase\n                ? obs.caseLabelTranslation\n                : obs.buildingBlockLabelTranslation) +\n            (obs.sourceIsIndependent ? '' : ': ' + obs.sourceContextName)\n          \"\n        />\n\n        <div class=\"sync-options\">\n          <v-input-label\n            [title]=\"'processLinkConfiguration.buildingBlock.sync.title' | translate\"\n          />\n        </div>\n      </div>\n\n      <div formArrayName=\"outputs\">\n        @for (group of outputs.controls; let outputIndex = $index; track outputIndex) {\n          <div\n            class=\"mapping-row output\"\n            [formGroup]=\"group\"\n            [attr.data-test-id]=\"testIds.outputRow\"\n          >\n            <div class=\"mapping-part\">\n              <div class=\"mapping-cell\" [attr.data-test-id]=\"testIds.outputSourceSelectWrapper\">\n                <v-select\n                  [cdsLayer]=\"2\"\n                  [appendInline]=\"false\"\n                  formControlName=\"source\"\n                  [items]=\"obs.fieldItems || []\"\n                  [placeholder]=\"\n                    'processLinkConfiguration.buildingBlock.selectedBuildingBlockFieldPlaceholder'\n                      | translate\n                  \"\n                  [dropUp]=\"true\"\n                >\n                </v-select>\n              </div>\n\n              <div class=\"arrow\">\u2192</div>\n            </div>\n\n            <div class=\"mapping-part\">\n              @if (obs.sourceIsIndependent) {\n                <input [cdsLayer]=\"2\" cdsText formControlName=\"target\" [placeholder]=\"'pv:'\" />\n              } @else {\n                <valtimo-value-path-selector\n                  [cdsLayer]=\"2\"\n                  [prefixes]=\"[ValuePathSelectorPrefix.DOC, ValuePathSelectorPrefix.CASE]\"\n                  [notation]=\"'slashes'\"\n                  [caseDefinitionKey]=\"obs.params?.caseDefinitionKey\"\n                  [caseDefinitionVersionTag]=\"obs.params?.caseDefinitionVersionTag\"\n                  [excludePrefixes]=\"[ValuePathSelectorPrefix.TASK]\"\n                  [buildingBlockDefinitionKey]=\"obs.buildingBlockParams?.buildingBlockDefinitionKey\"\n                  [buildingBlockDefinitionVersionTag]=\"\n                    obs.buildingBlockParams?.buildingBlockDefinitionVersionTag\n                  \"\n                  [formControl]=\"group.get('target')\"\n                  [appendInline]=\"false\"\n                  [filterItems]=\"getUsedCaseTargetsForRow$(group) | async\"\n                  [dropUp]=\"true\"\n                ></valtimo-value-path-selector>\n              }\n            </div>\n\n            <div class=\"mapping-part\">\n              <div class=\"mapping-cell\">\n                <cds-radio-group\n                  class=\"sync-radio-group\"\n                  formControlName=\"syncTiming\"\n                  [attr.name]=\"'syncTiming-' + outputIndex\"\n                >\n                  @for (item of syncTimingItems; track item.id) {\n                    <cds-radio [value]=\"item.id\" [checked]=\"isSyncTimingSelected(group, item.id)\">\n                      {{ item.labelKey | translate }}\n                    </cds-radio>\n                  }\n                </cds-radio-group>\n              </div>\n\n              <div class=\"mapping-cell-actions\">\n                <button\n                  cdsButton=\"danger--ghost\"\n                  iconOnly\n                  size=\"sm\"\n                  (click)=\"deleteOutput(outputIndex)\"\n                  [attr.data-test-id]=\"testIds.outputDeleteButton\"\n                >\n                  <svg cdsIcon=\"trash-can\" class=\"cds--btn__icon\" size=\"16\"></svg>\n                </button>\n              </div>\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n\n    <button\n      cdsButton=\"tertiary\"\n      size=\"sm\"\n      (click)=\"addOutput()\"\n      [title]=\"'processLinkConfiguration.buildingBlock.addOutput' | translate\"\n      [attr.data-test-id]=\"testIds.addOutputButton\"\n    >\n      {{ 'processLinkConfiguration.buildingBlock.addOutput' | translate }}\n\n      <svg cdsIcon=\"add\" class=\"cds--btn__icon\" size=\"16\"></svg>\n    </button>\n  </section>\n</div>\n", styles: [".section-header{font-size:14px;line-height:18px;font-weight:600}.mapping-section{margin-bottom:16px}.mapping-row,.mapping-header{display:grid;align-items:center}.mapping-row.input,.mapping-header.input{grid-template-columns:1fr 1fr}.mapping-row.output,.mapping-header.output{grid-template-columns:5fr 6fr 3fr}.mapping-header.output .sync-options{padding-left:10px;display:flex}.mapping-row{margin-bottom:8px;padding:8px;background-color:var(--cds-layer)}.mapping-row .mapping-part{display:flex}.mapping-row .arrow{text-align:center;width:40px;line-height:40px;font-size:large}.mapping-row .mapping-cell{flex:1;min-width:0}.mapping-row .mapping-cell-actions{display:flex;align-self:flex-end;text-transform:capitalize;margin-left:10px}.mapping-row .mapping-cell-actions .required-indicator{margin:0 5px;color:var(--cds-text-error)}.mapping-row .mapping-cell-actions button{margin-bottom:5px}.mapping-row .mapping-cell-actions button ::ng-deep .cds--btn__icon{margin:0!important}.mapping-row .sync-radio-group{padding-left:10px;margin-top:8px}.mapping-row .sync-radio-group .sync-radio:first-child{margin-right:0}.mapping-row .sync-radio-group ::ng-deep .cds--radio-button__label{justify-content:normal}::ng-deep .process-link-modal-container .cds--modal-container{max-width:1280px}\n/*!\n * Copyright 2015-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: ComboBoxModule }, { kind: "ngmodule", type: RadioModule }, { kind: "component", type: i5.Radio, selector: "cds-radio, ibm-radio", inputs: ["checked", "name", "disabled", "labelPlacement", "ariaLabelledby", "ariaLabel", "required", "value", "skeleton", "id"], outputs: ["change"] }, { kind: "component", type: i5.RadioGroup, selector: "cds-radio-group, ibm-radio-group", inputs: ["selected", "value", "name", "disabled", "skeleton", "orientation", "labelPlacement", "legend", "ariaLabel", "ariaLabelledby", "helperText", "invalid", "invalidText", "warn", "warnText"], outputs: ["change"] }, { kind: "ngmodule", type: InputModule }, { kind: "directive", type: i5.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "component", type: ValuePathSelectorComponent, selector: "valtimo-value-path-selector", inputs: ["name", "appendInline", "margin", "marginLg", "marginXl", "disabled", "caseDefinitionKey", "caseDefinitionVersionTag", "buildingBlockDefinitionKey", "buildingBlockDefinitionVersionTag", "prefixes", "excludePrefixes", "label", "tooltip", "required", "showCaseDefinitionSelector", "notation", "dropUp", "defaultValue", "type", "parentItem", "filterItems"], outputs: ["valueChangeEvent", "collectionSelected"] }, { kind: "ngmodule", type: InputLabelModule }, { kind: "component", type: i2$1.InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "tooltipTranslationKey", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i5.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i5.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i2$1.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: "ngmodule", type: LayerModule }, { kind: "directive", type: i5.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ConfigureBuildingBlockMappingsComponent, decorators: [{
             type: Component,
@@ -3037,7 +3313,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                         SelectModule,
                         LayerModule,
                     ], template: "<!--\n  ~ Copyright 2015-2026 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n@let obs =\n  {\n    fields: (buildingBlockFields$ | async),\n    fieldItems: (buildingBlockFieldItems$ | async),\n    params: (params$ | async),\n    buildingBlockParams: (buildingBlockParams$ | async),\n    sourceContextName: (sourceContextName$ | async),\n    targetBuildingBlockName: (targetBuildingBlockName$ | async),\n    sourceIsCase: (sourceIsCase$ | async),\n    sourceIsIndependent: (sourceIsIndependent$ | async),\n    caseLabelTranslation: ('Case' | translate),\n    processLabelTranslation: ('processLinkConfiguration.buildingBlock.process' | translate),\n    buildingBlockLabelTranslation:\n      ('processLinkConfiguration.buildingBlock.selectLabel' | translate),\n  };\n\n<div class=\"mapping-step\">\n  <section class=\"mapping-section\" [attr.data-test-id]=\"testIds.inputSection\">\n    <h4 class=\"section-header\">\n      {{ 'processLinkConfiguration.buildingBlock.inputTitle' | translate }}\n    </h4>\n\n    <div class=\"mapping-table\" [formGroup]=\"inputsForm\">\n      <div class=\"mapping-header input\">\n        <v-input-label\n          [title]=\"\n            (obs.sourceIsIndependent\n              ? obs.processLabelTranslation\n              : obs.sourceIsCase\n                ? obs.caseLabelTranslation\n                : obs.buildingBlockLabelTranslation) +\n            (obs.sourceIsIndependent ? '' : ': ' + obs.sourceContextName)\n          \"\n        />\n\n        <v-input-label\n          [title]=\"obs.buildingBlockLabelTranslation + ': ' + obs.targetBuildingBlockName\"\n        />\n      </div>\n\n      <div formArrayName=\"inputs\">\n        @for (group of inputs.controls; let inputIndex = $index; track inputIndex) {\n          <div\n            class=\"mapping-row input\"\n            [formGroup]=\"group\"\n            [attr.data-test-id]=\"testIds.inputRow\"\n          >\n            <div class=\"mapping-part\">\n              @if (obs.sourceIsIndependent) {\n                <input [cdsLayer]=\"2\" cdsText formControlName=\"source\" [placeholder]=\"'pv:'\" />\n              } @else {\n                <valtimo-value-path-selector\n                  [cdsLayer]=\"2\"\n                  [prefixes]=\"[ValuePathSelectorPrefix.DOC, ValuePathSelectorPrefix.CASE]\"\n                  [notation]=\"'slashes'\"\n                  [caseDefinitionKey]=\"obs.params?.caseDefinitionKey\"\n                  [caseDefinitionVersionTag]=\"obs.params?.caseDefinitionVersionTag\"\n                  [excludePrefixes]=\"[ValuePathSelectorPrefix.TASK]\"\n                  [buildingBlockDefinitionKey]=\"obs.buildingBlockParams?.buildingBlockDefinitionKey\"\n                  [buildingBlockDefinitionVersionTag]=\"\n                    obs.buildingBlockParams?.buildingBlockDefinitionVersionTag\n                  \"\n                  [appendInline]=\"false\"\n                  [dropUp]=\"false\"\n                  [formControl]=\"group.get('source')\"\n                ></valtimo-value-path-selector>\n              }\n\n              <div class=\"arrow\">\u2192</div>\n            </div>\n\n            <div class=\"mapping-part\">\n              <div class=\"mapping-cell\" [attr.data-test-id]=\"testIds.inputTargetSelectWrapper\">\n                @if (isRequiredTarget(obs.fields, group.get('target')?.value)) {\n                  <div class=\"required-target\" [attr.data-test-id]=\"testIds.inputRequiredTargetLabel\">\n                    {{ group.get('target')?.value }}\n                  </div>\n                } @else {\n                  <v-select\n                    [cdsLayer]=\"2\"\n                    [appendInline]=\"false\"\n                    formControlName=\"target\"\n                    [placeholder]=\"\n                      'processLinkConfiguration.buildingBlock.selectedBuildingBlockFieldPlaceholder'\n                        | translate\n                    \"\n                    [items]=\"getBuildingBlockFieldItemsForRow$(group) | async\"\n                    [dropUp]=\"false\"\n                  >\n                  </v-select>\n                }\n              </div>\n\n              <div class=\"mapping-cell-actions\">\n                @if (!isRequiredTarget(obs.fields, group.get('target')?.value)) {\n                  <button\n                    cdsButton=\"danger--ghost\"\n                    iconOnly\n                    size=\"sm\"\n                    (click)=\"deleteInput(inputIndex)\"\n                    [attr.data-test-id]=\"testIds.inputDeleteButton\"\n                  >\n                    <svg cdsIcon=\"trash-can\" class=\"cds--btn__icon\" size=\"16\"></svg>\n                  </button>\n                } @else {\n                  <div class=\"required-indicator\" [attr.data-test-id]=\"testIds.inputRequiredIndicator\">\n                    *\n                  </div>\n\n                  <div>\n                    {{ 'interface.required' | translate }}\n                  </div>\n                }\n              </div>\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n\n    <button\n      cdsButton=\"tertiary\"\n      size=\"sm\"\n      (click)=\"addInput()\"\n      [title]=\"'processLinkConfiguration.buildingBlock.addInput' | translate\"\n      [disabled]=\"allInputsMapped$ | async\"\n      [attr.data-test-id]=\"testIds.addInputButton\"\n    >\n      {{ 'processLinkConfiguration.buildingBlock.addInput' | translate }}\n\n      <svg cdsIcon=\"add\" class=\"cds--btn__icon\" size=\"16\"></svg>\n    </button>\n  </section>\n\n  <section class=\"mapping-section\" [attr.data-test-id]=\"testIds.outputSection\">\n    <h4 class=\"section-header\">\n      {{ 'processLinkConfiguration.buildingBlock.outputTitle' | translate }}\n    </h4>\n\n    <div class=\"mapping-table\" [formGroup]=\"outputsForm\">\n      <div class=\"mapping-header output\">\n        <v-input-label\n          [title]=\"obs.buildingBlockLabelTranslation + ': ' + obs.targetBuildingBlockName\"\n        />\n\n        <v-input-label\n          [title]=\"\n            (obs.sourceIsIndependent\n              ? obs.processLabelTranslation\n              : obs.sourceIsCase\n                ? obs.caseLabelTranslation\n                : obs.buildingBlockLabelTranslation) +\n            (obs.sourceIsIndependent ? '' : ': ' + obs.sourceContextName)\n          \"\n        />\n\n        <div class=\"sync-options\">\n          <v-input-label\n            [title]=\"'processLinkConfiguration.buildingBlock.sync.title' | translate\"\n          />\n        </div>\n      </div>\n\n      <div formArrayName=\"outputs\">\n        @for (group of outputs.controls; let outputIndex = $index; track outputIndex) {\n          <div\n            class=\"mapping-row output\"\n            [formGroup]=\"group\"\n            [attr.data-test-id]=\"testIds.outputRow\"\n          >\n            <div class=\"mapping-part\">\n              <div class=\"mapping-cell\" [attr.data-test-id]=\"testIds.outputSourceSelectWrapper\">\n                <v-select\n                  [cdsLayer]=\"2\"\n                  [appendInline]=\"false\"\n                  formControlName=\"source\"\n                  [items]=\"obs.fieldItems || []\"\n                  [placeholder]=\"\n                    'processLinkConfiguration.buildingBlock.selectedBuildingBlockFieldPlaceholder'\n                      | translate\n                  \"\n                  [dropUp]=\"true\"\n                >\n                </v-select>\n              </div>\n\n              <div class=\"arrow\">\u2192</div>\n            </div>\n\n            <div class=\"mapping-part\">\n              @if (obs.sourceIsIndependent) {\n                <input [cdsLayer]=\"2\" cdsText formControlName=\"target\" [placeholder]=\"'pv:'\" />\n              } @else {\n                <valtimo-value-path-selector\n                  [cdsLayer]=\"2\"\n                  [prefixes]=\"[ValuePathSelectorPrefix.DOC, ValuePathSelectorPrefix.CASE]\"\n                  [notation]=\"'slashes'\"\n                  [caseDefinitionKey]=\"obs.params?.caseDefinitionKey\"\n                  [caseDefinitionVersionTag]=\"obs.params?.caseDefinitionVersionTag\"\n                  [excludePrefixes]=\"[ValuePathSelectorPrefix.TASK]\"\n                  [buildingBlockDefinitionKey]=\"obs.buildingBlockParams?.buildingBlockDefinitionKey\"\n                  [buildingBlockDefinitionVersionTag]=\"\n                    obs.buildingBlockParams?.buildingBlockDefinitionVersionTag\n                  \"\n                  [formControl]=\"group.get('target')\"\n                  [appendInline]=\"false\"\n                  [filterItems]=\"getUsedCaseTargetsForRow$(group) | async\"\n                  [dropUp]=\"true\"\n                ></valtimo-value-path-selector>\n              }\n            </div>\n\n            <div class=\"mapping-part\">\n              <div class=\"mapping-cell\">\n                <cds-radio-group\n                  class=\"sync-radio-group\"\n                  formControlName=\"syncTiming\"\n                  [attr.name]=\"'syncTiming-' + outputIndex\"\n                >\n                  @for (item of syncTimingItems; track item.id) {\n                    <cds-radio [value]=\"item.id\" [checked]=\"isSyncTimingSelected(group, item.id)\">\n                      {{ item.labelKey | translate }}\n                    </cds-radio>\n                  }\n                </cds-radio-group>\n              </div>\n\n              <div class=\"mapping-cell-actions\">\n                <button\n                  cdsButton=\"danger--ghost\"\n                  iconOnly\n                  size=\"sm\"\n                  (click)=\"deleteOutput(outputIndex)\"\n                  [attr.data-test-id]=\"testIds.outputDeleteButton\"\n                >\n                  <svg cdsIcon=\"trash-can\" class=\"cds--btn__icon\" size=\"16\"></svg>\n                </button>\n              </div>\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n\n    <button\n      cdsButton=\"tertiary\"\n      size=\"sm\"\n      (click)=\"addOutput()\"\n      [title]=\"'processLinkConfiguration.buildingBlock.addOutput' | translate\"\n      [attr.data-test-id]=\"testIds.addOutputButton\"\n    >\n      {{ 'processLinkConfiguration.buildingBlock.addOutput' | translate }}\n\n      <svg cdsIcon=\"add\" class=\"cds--btn__icon\" size=\"16\"></svg>\n    </button>\n  </section>\n</div>\n", styles: [".section-header{font-size:14px;line-height:18px;font-weight:600}.mapping-section{margin-bottom:16px}.mapping-row,.mapping-header{display:grid;align-items:center}.mapping-row.input,.mapping-header.input{grid-template-columns:1fr 1fr}.mapping-row.output,.mapping-header.output{grid-template-columns:5fr 6fr 3fr}.mapping-header.output .sync-options{padding-left:10px;display:flex}.mapping-row{margin-bottom:8px;padding:8px;background-color:var(--cds-layer)}.mapping-row .mapping-part{display:flex}.mapping-row .arrow{text-align:center;width:40px;line-height:40px;font-size:large}.mapping-row .mapping-cell{flex:1;min-width:0}.mapping-row .mapping-cell-actions{display:flex;align-self:flex-end;text-transform:capitalize;margin-left:10px}.mapping-row .mapping-cell-actions .required-indicator{margin:0 5px;color:var(--cds-text-error)}.mapping-row .mapping-cell-actions button{margin-bottom:5px}.mapping-row .mapping-cell-actions button ::ng-deep .cds--btn__icon{margin:0!important}.mapping-row .sync-radio-group{padding-left:10px;margin-top:8px}.mapping-row .sync-radio-group .sync-radio:first-child{margin-right:0}.mapping-row .sync-radio-group ::ng-deep .cds--radio-button__label{justify-content:normal}::ng-deep .process-link-modal-container .cds--modal-container{max-width:1280px}\n/*!\n * Copyright 2015-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
-        }], ctorParameters: () => [{ type: i1$2.FormBuilder }, { type: BuildingBlockStateService }, { type: ProcessLinkButtonService }, { type: ProcessLinkStepService }, { type: ProcessLinkService }, { type: ProcessLinkStateService }, { type: i3.TranslateService }, { type: i3$2.ActivatedRoute }, { type: i0.ChangeDetectorRef }, { type: ProcessLinkBuildingBlockApiService }, { type: ProcessLinkStateService }] });
+        }], ctorParameters: () => [{ type: i1$2.FormBuilder }, { type: BuildingBlockStateService }, { type: ProcessLinkButtonService }, { type: ProcessLinkStepService }, { type: ProcessLinkService }, { type: ProcessLinkStateService }, { type: i3.TranslateService }, { type: i3$1.ActivatedRoute }, { type: i0.ChangeDetectorRef }, { type: ProcessLinkBuildingBlockApiService }, { type: ProcessLinkStateService }] });
 
 /*
  * Copyright 2015-2026 Ritense BV, the Netherlands.
@@ -3057,6 +3333,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
 class ChooseProcessLinkTypeComponent {
     constructor(processLinkStateService) {
         this.processLinkStateService = processLinkStateService;
+        this.testIds = PROCESS_LINK_TYPE_CHOOSER_TEST_IDS;
+        this.testIdPrefix = PROCESS_LINK_TYPE_BUTTON_TEST_ID_PREFIX;
         this.availableProcessLinkTypes$ = this.processLinkStateService.availableProcessLinkTypes$;
     }
     getTooltipKey(processLinkTypeId) {
@@ -3070,11 +3348,11 @@ class ChooseProcessLinkTypeComponent {
         this.processLinkStateService.selectProcessLinkType(processLinkTypeId);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ChooseProcessLinkTypeComponent, deps: [{ token: ProcessLinkStateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: ChooseProcessLinkTypeComponent, isStandalone: false, selector: "valtimo-choose-process-link-type", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    availableProcessLinkTypes: availableProcessLinkTypes$ | async,\n  } as obs\"\n>\n  <p class=\"step-description\">\n    {{ 'processLinkConfiguration.chooseProcessLinkTypeDescription' | translate }}\n  </p>\n  <div class=\"process-link-grid\">\n    <div\n      class=\"process-link-item\"\n      *ngFor=\"let availableProcessLinkType of obs.availableProcessLinkTypes\"\n    >\n      <ng-container *ngIf=\"availableProcessLinkType.processLinkType as processLinkTypeId\">\n        <button\n          (click)=\"selectProcessLinkType(processLinkTypeId)\"\n          cdsButton=\"secondary\"\n          size=\"xl\"\n          class=\"process-link-type-button\"\n          [disabled]=\"!availableProcessLinkType.enabled\"\n          [vTooltip]=\"getTooltipKey(processLinkTypeId) | translate\"\n          [onBottom]=\"true\"\n          [tooltipDisabled]=\"availableProcessLinkType.enabled\"\n        >\n          {{ 'processLinkType.' + processLinkTypeId | translate }}\n          <svg\n            *ngIf=\"processLinkTypeId === 'plugin'\"\n            class=\"cds--btn__icon\"\n            cdsIcon=\"link\"\n            size=\"16\"\n          ></svg>\n          <svg\n            *ngIf=\"processLinkTypeId === 'form'\"\n            class=\"cds--btn__icon\"\n            cdsIcon=\"receipt\"\n            size=\"16\"\n          ></svg>\n          <svg\n            *ngIf=\"processLinkTypeId === 'form-flow'\"\n            class=\"cds--btn__icon\"\n            cdsIcon=\"flow--data\"\n            size=\"16\"\n          ></svg>\n          <svg\n            *ngIf=\"processLinkTypeId === 'ui-component'\"\n            class=\"cds--btn__icon\"\n            cdsIcon=\"receipt\"\n            size=\"16\"\n          ></svg>\n        </button>\n      </ng-container>\n    </div>\n  </div>\n</ng-container>\n", styles: [".process-link-type-button{width:100%}.process-link-grid{margin-top:24px;display:flex;justify-content:flex-start;width:100%;flex-wrap:wrap;gap:8px}.process-link-item{flex-basis:calc(33.3% - 5.3333333333px)}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i4.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "directive", type: i2$1.TooltipDirective, selector: "[vTooltip]", inputs: ["vTooltip", "onBottom", "tooltipDisabled"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: ChooseProcessLinkTypeComponent, isStandalone: false, selector: "valtimo-choose-process-link-type", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    availableProcessLinkTypes: availableProcessLinkTypes$ | async,\n  } as obs\"\n>\n  <p class=\"step-description\">\n    {{ 'processLinkConfiguration.chooseProcessLinkTypeDescription' | translate }}\n  </p>\n  <div class=\"process-link-grid\" [attr.data-test-id]=\"testIds.container\">\n    <div\n      class=\"process-link-item\"\n      *ngFor=\"let availableProcessLinkType of obs.availableProcessLinkTypes\"\n    >\n      <ng-container *ngIf=\"availableProcessLinkType.processLinkType as processLinkTypeId\">\n        <button\n          [attr.data-test-id]=\"testIdPrefix + processLinkTypeId\"\n          (click)=\"selectProcessLinkType(processLinkTypeId)\"\n          cdsButton=\"secondary\"\n          size=\"xl\"\n          class=\"process-link-type-button\"\n          [disabled]=\"!availableProcessLinkType.enabled\"\n          [vTooltip]=\"getTooltipKey(processLinkTypeId) | translate\"\n          [onBottom]=\"true\"\n          [tooltipDisabled]=\"availableProcessLinkType.enabled\"\n        >\n          {{ 'processLinkType.' + processLinkTypeId | translate }}\n          <svg\n            *ngIf=\"processLinkTypeId === 'plugin'\"\n            class=\"cds--btn__icon\"\n            cdsIcon=\"link\"\n            size=\"16\"\n          ></svg>\n          <svg\n            *ngIf=\"processLinkTypeId === 'form'\"\n            class=\"cds--btn__icon\"\n            cdsIcon=\"receipt\"\n            size=\"16\"\n          ></svg>\n          <svg\n            *ngIf=\"processLinkTypeId === 'form-flow'\"\n            class=\"cds--btn__icon\"\n            cdsIcon=\"flow--data\"\n            size=\"16\"\n          ></svg>\n          <svg\n            *ngIf=\"processLinkTypeId === 'ui-component'\"\n            class=\"cds--btn__icon\"\n            cdsIcon=\"receipt\"\n            size=\"16\"\n          ></svg>\n        </button>\n      </ng-container>\n    </div>\n  </div>\n</ng-container>\n", styles: [".process-link-type-button{width:100%}.process-link-grid{margin-top:24px;display:flex;justify-content:flex-start;width:100%;flex-wrap:wrap;gap:8px}.process-link-item{flex-basis:calc(33.3% - 5.3333333333px)}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i5.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "directive", type: i2$1.TooltipDirective, selector: "[vTooltip]", inputs: ["vTooltip", "onBottom", "tooltipDisabled"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ChooseProcessLinkTypeComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'valtimo-choose-process-link-type', template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    availableProcessLinkTypes: availableProcessLinkTypes$ | async,\n  } as obs\"\n>\n  <p class=\"step-description\">\n    {{ 'processLinkConfiguration.chooseProcessLinkTypeDescription' | translate }}\n  </p>\n  <div class=\"process-link-grid\">\n    <div\n      class=\"process-link-item\"\n      *ngFor=\"let availableProcessLinkType of obs.availableProcessLinkTypes\"\n    >\n      <ng-container *ngIf=\"availableProcessLinkType.processLinkType as processLinkTypeId\">\n        <button\n          (click)=\"selectProcessLinkType(processLinkTypeId)\"\n          cdsButton=\"secondary\"\n          size=\"xl\"\n          class=\"process-link-type-button\"\n          [disabled]=\"!availableProcessLinkType.enabled\"\n          [vTooltip]=\"getTooltipKey(processLinkTypeId) | translate\"\n          [onBottom]=\"true\"\n          [tooltipDisabled]=\"availableProcessLinkType.enabled\"\n        >\n          {{ 'processLinkType.' + processLinkTypeId | translate }}\n          <svg\n            *ngIf=\"processLinkTypeId === 'plugin'\"\n            class=\"cds--btn__icon\"\n            cdsIcon=\"link\"\n            size=\"16\"\n          ></svg>\n          <svg\n            *ngIf=\"processLinkTypeId === 'form'\"\n            class=\"cds--btn__icon\"\n            cdsIcon=\"receipt\"\n            size=\"16\"\n          ></svg>\n          <svg\n            *ngIf=\"processLinkTypeId === 'form-flow'\"\n            class=\"cds--btn__icon\"\n            cdsIcon=\"flow--data\"\n            size=\"16\"\n          ></svg>\n          <svg\n            *ngIf=\"processLinkTypeId === 'ui-component'\"\n            class=\"cds--btn__icon\"\n            cdsIcon=\"receipt\"\n            size=\"16\"\n          ></svg>\n        </button>\n      </ng-container>\n    </div>\n  </div>\n</ng-container>\n", styles: [".process-link-type-button{width:100%}.process-link-grid{margin-top:24px;display:flex;justify-content:flex-start;width:100%;flex-wrap:wrap;gap:8px}.process-link-item{flex-basis:calc(33.3% - 5.3333333333px)}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+            args: [{ standalone: false, selector: 'valtimo-choose-process-link-type', template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    availableProcessLinkTypes: availableProcessLinkTypes$ | async,\n  } as obs\"\n>\n  <p class=\"step-description\">\n    {{ 'processLinkConfiguration.chooseProcessLinkTypeDescription' | translate }}\n  </p>\n  <div class=\"process-link-grid\" [attr.data-test-id]=\"testIds.container\">\n    <div\n      class=\"process-link-item\"\n      *ngFor=\"let availableProcessLinkType of obs.availableProcessLinkTypes\"\n    >\n      <ng-container *ngIf=\"availableProcessLinkType.processLinkType as processLinkTypeId\">\n        <button\n          [attr.data-test-id]=\"testIdPrefix + processLinkTypeId\"\n          (click)=\"selectProcessLinkType(processLinkTypeId)\"\n          cdsButton=\"secondary\"\n          size=\"xl\"\n          class=\"process-link-type-button\"\n          [disabled]=\"!availableProcessLinkType.enabled\"\n          [vTooltip]=\"getTooltipKey(processLinkTypeId) | translate\"\n          [onBottom]=\"true\"\n          [tooltipDisabled]=\"availableProcessLinkType.enabled\"\n        >\n          {{ 'processLinkType.' + processLinkTypeId | translate }}\n          <svg\n            *ngIf=\"processLinkTypeId === 'plugin'\"\n            class=\"cds--btn__icon\"\n            cdsIcon=\"link\"\n            size=\"16\"\n          ></svg>\n          <svg\n            *ngIf=\"processLinkTypeId === 'form'\"\n            class=\"cds--btn__icon\"\n            cdsIcon=\"receipt\"\n            size=\"16\"\n          ></svg>\n          <svg\n            *ngIf=\"processLinkTypeId === 'form-flow'\"\n            class=\"cds--btn__icon\"\n            cdsIcon=\"flow--data\"\n            size=\"16\"\n          ></svg>\n          <svg\n            *ngIf=\"processLinkTypeId === 'ui-component'\"\n            class=\"cds--btn__icon\"\n            cdsIcon=\"receipt\"\n            size=\"16\"\n          ></svg>\n        </button>\n      </ng-container>\n    </div>\n  </div>\n</ng-container>\n", styles: [".process-link-type-button{width:100%}.process-link-grid{margin-top:24px;display:flex;justify-content:flex-start;width:100%;flex-wrap:wrap;gap:8px}.process-link-item{flex-basis:calc(33.3% - 5.3333333333px)}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
         }], ctorParameters: () => [{ type: ProcessLinkStateService }] });
 
 /*
@@ -3195,7 +3473,7 @@ class FormDisplayConfigurationComponent {
             this.buttonService.disableSaveButton();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FormDisplayConfigurationComponent, deps: [{ token: ProcessLinkButtonService }, { token: ProcessLinkStateService }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: FormDisplayConfigurationComponent, isStandalone: false, selector: "valtimo-form-display-configuration", inputs: { selectedFormDefinition: "selectedFormDefinition" }, outputs: { formDisplayValue: "formDisplayValue", formSizeValue: "formSizeValue", subtitlesValue: "subtitlesValue" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    formDisplayValue: formDisplayValue$ | async,\n    formDisplayTypeListItems: formDisplayTypeListItems$ | async,\n    formSizeListItems: formSizeListItems$ | async,\n    disableFormSizeInput: disableFormSizeInput$ | async,\n    subtitles: subtitles$ | async,\n    isUserTask: isUserTask$ | async,\n    isStartEvent: isStartEvent$ | async,\n    saving: saving$ | async,\n  } as obs\"\n>\n  @if (obs.isUserTask || obs.isStartEvent) {\n    <cds-combo-box\n      [placeholder]=\"'processLinkSteps.displayType.placeholder' | translate\"\n      [label]=\"'processLinkSteps.displayType.label' | translate\"\n      [disabled]=\"obs.saving\"\n      (selected)=\"selectFormDisplayType($event)\"\n    >\n      <cds-dropdown-list [items]=\"obs.formDisplayTypeListItems || []\"></cds-dropdown-list>\n    </cds-combo-box>\n\n    <br />\n  }\n\n  @if (obs.isUserTask || obs.isStartEvent) {\n    <cds-combo-box\n      [placeholder]=\"'processLinkSteps.formSize.placeholder' | translate\"\n      [label]=\"'processLinkSteps.formSize.label' | translate\"\n      [disabled]=\"obs.disableFormSizeInput || obs.saving\"\n      (selected)=\"selectFormSize($event)\"\n    >\n      <cds-dropdown-list [items]=\"obs.formSizeListItems || []\"></cds-dropdown-list>\n    </cds-combo-box>\n\n    <br />\n  }\n\n  @if (obs.isUserTask) {\n    <valtimo-carbon-multi-input\n      type=\"value\"\n      titleTranslationKey=\"processLinkSteps.subtitles\"\n      addRowTranslationKey=\"processLinkSteps.addSubtitle\"\n      [disabled]=\"obs.saving\"\n      [fullWidth]=\"true\"\n      [minimumAmountOfRows]=\"0\"\n      [initialAmountOfRows]=\"0\"\n      [defaultValues]=\"obs.subtitles\"\n      (valueChange)=\"onSubtitlesChange($event)\"\n    ></valtimo-carbon-multi-input>\n  }\n</ng-container>\n", dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.ComboBox, selector: "cds-combo-box, ibm-combo-box", inputs: ["placeholder", "openMenuAria", "closeMenuAria", "clearSelectionsTitle", "clearSelectionsAria", "clearSelectionTitle", "clearSelectionAria", "id", "labelId", "items", "type", "size", "itemValueKey", "label", "hideLabel", "helperText", "appendInline", "invalid", "invalidText", "warn", "warnText", "maxLength", "theme", "selectionFeedback", "autocomplete", "dropUp", "disabled", "readonly", "fluid"], outputs: ["selected", "submit", "close", "search", "clear"] }, { kind: "component", type: i5.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "component", type: i2$1.CarbonMultiInputComponent, selector: "valtimo-carbon-multi-input", inputs: ["addRowText", "addButtonType", "addRowTranslationKey", "arbitraryAmountTitles", "arbitraryValueAmount", "defaultValues", "deleteRowText", "deleteRowTranslationKey", "disabled", "dropdownColumnTitle", "dropdownItems", "dropdownWidth", "fullWidth", "hideAddButton", "hideDeleteButton", "initialAmountOfRows", "keyColumnTitle", "margin", "maxRows", "minimumAmountOfRows", "name", "required", "title", "titleTranslationKey", "tooltip", "type", "valueColumnTitle", "valuePathSelectorCaseDefinitionKey", "valuePathSelectorPrefixes", "valuePathSelectorShowCaseDefinitionSelector", "valuePathSelectorNotation", "keyColumnFlex", "dropdownColumnFlex", "valueColumnFlex"], outputs: ["valueChange", "allValuesValidEvent"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: FormDisplayConfigurationComponent, isStandalone: false, selector: "valtimo-form-display-configuration", inputs: { selectedFormDefinition: "selectedFormDefinition" }, outputs: { formDisplayValue: "formDisplayValue", formSizeValue: "formSizeValue", subtitlesValue: "subtitlesValue" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    formDisplayValue: formDisplayValue$ | async,\n    formDisplayTypeListItems: formDisplayTypeListItems$ | async,\n    formSizeListItems: formSizeListItems$ | async,\n    disableFormSizeInput: disableFormSizeInput$ | async,\n    subtitles: subtitles$ | async,\n    isUserTask: isUserTask$ | async,\n    isStartEvent: isStartEvent$ | async,\n    saving: saving$ | async,\n  } as obs\"\n>\n  @if (obs.isUserTask || obs.isStartEvent) {\n    <cds-combo-box\n      [placeholder]=\"'processLinkSteps.displayType.placeholder' | translate\"\n      [label]=\"'processLinkSteps.displayType.label' | translate\"\n      [disabled]=\"obs.saving\"\n      (selected)=\"selectFormDisplayType($event)\"\n    >\n      <cds-dropdown-list [items]=\"obs.formDisplayTypeListItems || []\"></cds-dropdown-list>\n    </cds-combo-box>\n\n    <br />\n  }\n\n  @if (obs.isUserTask || obs.isStartEvent) {\n    <cds-combo-box\n      [placeholder]=\"'processLinkSteps.formSize.placeholder' | translate\"\n      [label]=\"'processLinkSteps.formSize.label' | translate\"\n      [disabled]=\"obs.disableFormSizeInput || obs.saving\"\n      (selected)=\"selectFormSize($event)\"\n    >\n      <cds-dropdown-list [items]=\"obs.formSizeListItems || []\"></cds-dropdown-list>\n    </cds-combo-box>\n\n    <br />\n  }\n\n  @if (obs.isUserTask) {\n    <valtimo-carbon-multi-input\n      type=\"value\"\n      titleTranslationKey=\"processLinkSteps.subtitles\"\n      addRowTranslationKey=\"processLinkSteps.addSubtitle\"\n      [disabled]=\"obs.saving\"\n      [fullWidth]=\"true\"\n      [minimumAmountOfRows]=\"0\"\n      [initialAmountOfRows]=\"0\"\n      [defaultValues]=\"obs.subtitles\"\n      (valueChange)=\"onSubtitlesChange($event)\"\n    ></valtimo-carbon-multi-input>\n  }\n</ng-container>\n", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.ComboBox, selector: "cds-combo-box, ibm-combo-box", inputs: ["placeholder", "openMenuAria", "closeMenuAria", "clearSelectionsTitle", "clearSelectionsAria", "clearSelectionTitle", "clearSelectionAria", "id", "labelId", "items", "type", "size", "itemValueKey", "label", "hideLabel", "helperText", "appendInline", "invalid", "invalidText", "warn", "warnText", "maxLength", "theme", "selectionFeedback", "autocomplete", "dropUp", "disabled", "readonly", "fluid"], outputs: ["selected", "submit", "close", "search", "clear"] }, { kind: "component", type: i6.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "component", type: i2$1.CarbonMultiInputComponent, selector: "valtimo-carbon-multi-input", inputs: ["addRowText", "addButtonType", "addRowTranslationKey", "arbitraryAmountTitles", "arbitraryValueAmount", "defaultValues", "deleteRowText", "deleteRowTranslationKey", "disabled", "dropdownColumnTitle", "dropdownItems", "dropdownWidth", "fullWidth", "hideAddButton", "hideDeleteButton", "initialAmountOfRows", "keyColumnTitle", "margin", "maxRows", "minimumAmountOfRows", "name", "required", "title", "titleTranslationKey", "tooltip", "type", "valueColumnTitle", "valuePathSelectorCaseDefinitionKey", "valuePathSelectorPrefixes", "valuePathSelectorShowCaseDefinitionSelector", "valuePathSelectorNotation", "keyColumnFlex", "dropdownColumnFlex", "valueColumnFlex"], outputs: ["valueChange", "allValuesValidEvent"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FormDisplayConfigurationComponent, decorators: [{
             type: Component,
@@ -3385,13 +3663,13 @@ class SelectFormComponent {
             this.stateService.sendProcessLinkCreateEvent(createRequest);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SelectFormComponent, deps: [{ token: i1$4.FormService }, { token: ProcessLinkStateService }, { token: ProcessLinkService }, { token: ProcessLinkButtonService }, { token: i3$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: SelectFormComponent, isStandalone: false, selector: "valtimo-select-form", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    formDefinitions: formDefinitionListItems$ | async,\n    saving: saving$ | async,\n  } as obs\"\n>\n  <p class=\"step-description\">\n    {{ 'processLinkConfiguration.chooseFormDescription' | translate }}\n  </p>\n  <div class=\"select-form\">\n    <cds-combo-box\n      [appendInline]=\"true\"\n      [disabled]=\"!obs.formDefinitions || obs.saving\"\n      [items]=\"obs.formDefinitions || []\"\n      [placeholder]=\"'interface.typeToSearch' | translate\"\n      (selected)=\"selectFormDefinition($event)\"\n      [label]=\"'processLinkSteps.selectForm' | translate\"\n      ><cds-dropdown-list></cds-dropdown-list\n    ></cds-combo-box>\n    <br />\n\n    <valtimo-form-display-configuration\n      [selectedFormDefinition]=\"selectedFormDefinition\"\n      (formDisplayValue)=\"selectedFormDisplayValue($event)\"\n      (formSizeValue)=\"selectedFormSizeValue($event)\"\n      (subtitlesValue)=\"selectedSubtitlesValue($event)\"\n    ></valtimo-form-display-configuration>\n  </div>\n</ng-container>\n", styles: [".label-with-tooltip{display:flex;align-items:center}.select-form{display:flex;flex-direction:column;width:100%;margin-top:24px}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.ComboBox, selector: "cds-combo-box, ibm-combo-box", inputs: ["placeholder", "openMenuAria", "closeMenuAria", "clearSelectionsTitle", "clearSelectionsAria", "clearSelectionTitle", "clearSelectionAria", "id", "labelId", "items", "type", "size", "itemValueKey", "label", "hideLabel", "helperText", "appendInline", "invalid", "invalidText", "warn", "warnText", "maxLength", "theme", "selectionFeedback", "autocomplete", "dropUp", "disabled", "readonly", "fluid"], outputs: ["selected", "submit", "close", "search", "clear"] }, { kind: "component", type: i5.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "component", type: FormDisplayConfigurationComponent, selector: "valtimo-form-display-configuration", inputs: ["selectedFormDefinition"], outputs: ["formDisplayValue", "formSizeValue", "subtitlesValue"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SelectFormComponent, deps: [{ token: i1$4.FormService }, { token: ProcessLinkStateService }, { token: ProcessLinkService }, { token: ProcessLinkButtonService }, { token: i3$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: SelectFormComponent, isStandalone: false, selector: "valtimo-select-form", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    formDefinitions: formDefinitionListItems$ | async,\n    saving: saving$ | async,\n  } as obs\"\n>\n  <p class=\"step-description\">\n    {{ 'processLinkConfiguration.chooseFormDescription' | translate }}\n  </p>\n  <div class=\"select-form\">\n    <cds-combo-box\n      [appendInline]=\"true\"\n      [disabled]=\"!obs.formDefinitions || obs.saving\"\n      [items]=\"obs.formDefinitions || []\"\n      [placeholder]=\"'interface.typeToSearch' | translate\"\n      (selected)=\"selectFormDefinition($event)\"\n      [label]=\"'processLinkSteps.selectForm' | translate\"\n      ><cds-dropdown-list></cds-dropdown-list\n    ></cds-combo-box>\n    <br />\n\n    <valtimo-form-display-configuration\n      [selectedFormDefinition]=\"selectedFormDefinition\"\n      (formDisplayValue)=\"selectedFormDisplayValue($event)\"\n      (formSizeValue)=\"selectedFormSizeValue($event)\"\n      (subtitlesValue)=\"selectedSubtitlesValue($event)\"\n    ></valtimo-form-display-configuration>\n  </div>\n</ng-container>\n", styles: [".label-with-tooltip{display:flex;align-items:center}.select-form{display:flex;flex-direction:column;width:100%;margin-top:24px}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.ComboBox, selector: "cds-combo-box, ibm-combo-box", inputs: ["placeholder", "openMenuAria", "closeMenuAria", "clearSelectionsTitle", "clearSelectionsAria", "clearSelectionTitle", "clearSelectionAria", "id", "labelId", "items", "type", "size", "itemValueKey", "label", "hideLabel", "helperText", "appendInline", "invalid", "invalidText", "warn", "warnText", "maxLength", "theme", "selectionFeedback", "autocomplete", "dropUp", "disabled", "readonly", "fluid"], outputs: ["selected", "submit", "close", "search", "clear"] }, { kind: "component", type: i6.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "component", type: FormDisplayConfigurationComponent, selector: "valtimo-form-display-configuration", inputs: ["selectedFormDefinition"], outputs: ["formDisplayValue", "formSizeValue", "subtitlesValue"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SelectFormComponent, decorators: [{
             type: Component,
             args: [{ standalone: false, selector: 'valtimo-select-form', template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    formDefinitions: formDefinitionListItems$ | async,\n    saving: saving$ | async,\n  } as obs\"\n>\n  <p class=\"step-description\">\n    {{ 'processLinkConfiguration.chooseFormDescription' | translate }}\n  </p>\n  <div class=\"select-form\">\n    <cds-combo-box\n      [appendInline]=\"true\"\n      [disabled]=\"!obs.formDefinitions || obs.saving\"\n      [items]=\"obs.formDefinitions || []\"\n      [placeholder]=\"'interface.typeToSearch' | translate\"\n      (selected)=\"selectFormDefinition($event)\"\n      [label]=\"'processLinkSteps.selectForm' | translate\"\n      ><cds-dropdown-list></cds-dropdown-list\n    ></cds-combo-box>\n    <br />\n\n    <valtimo-form-display-configuration\n      [selectedFormDefinition]=\"selectedFormDefinition\"\n      (formDisplayValue)=\"selectedFormDisplayValue($event)\"\n      (formSizeValue)=\"selectedFormSizeValue($event)\"\n      (subtitlesValue)=\"selectedSubtitlesValue($event)\"\n    ></valtimo-form-display-configuration>\n  </div>\n</ng-container>\n", styles: [".label-with-tooltip{display:flex;align-items:center}.select-form{display:flex;flex-direction:column;width:100%;margin-top:24px}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
-        }], ctorParameters: () => [{ type: i1$4.FormService }, { type: ProcessLinkStateService }, { type: ProcessLinkService }, { type: ProcessLinkButtonService }, { type: i3$2.ActivatedRoute }] });
+        }], ctorParameters: () => [{ type: i1$4.FormService }, { type: ProcessLinkStateService }, { type: ProcessLinkService }, { type: ProcessLinkButtonService }, { type: i3$1.ActivatedRoute }] });
 
 /*
  * Copyright 2015-2025 Ritense BV, the Netherlands.
@@ -3505,7 +3783,7 @@ class SelectFormFlowComponent {
             .subscribe(([selectedProcessLink, isUserTask, isStartEvent]) => {
             const updateProcessLinkRequest = {
                 id: selectedProcessLink.id,
-                formFlowDefinitionId: this.selectedFormFlowDefinitionId,
+                formFlowDefinitionKey: this.selectedFormFlowDefinitionId,
                 activityId: selectedProcessLink.activityId,
                 ...(isUserTask && {
                     formDisplayType: this.formDisplayValue || this._DEFAULT_FORM_DISPLAY_TYPE,
@@ -3550,13 +3828,13 @@ class SelectFormFlowComponent {
             this.stateService.sendProcessLinkCreateEvent(createRequest);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SelectFormFlowComponent, deps: [{ token: i1$5.FormFlowService }, { token: ProcessLinkStateService }, { token: ProcessLinkService }, { token: ProcessLinkButtonService }, { token: i3$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: SelectFormFlowComponent, isStandalone: false, selector: "valtimo-select-form-flow", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    formFlowDefinitions: formFlowDefinitionListItems$ | async,\n    saving: saving$ | async,\n  } as obs\"\n>\n  <p class=\"step-description\">\n    {{ 'processLinkConfiguration.chooseFormFlowDescription' | translate }}\n  </p>\n\n  <div class=\"select-form-flow\">\n    <cds-combo-box\n      [appendInline]=\"true\"\n      [disabled]=\"!obs.formFlowDefinitions || obs.saving\"\n      [items]=\"obs.formFlowDefinitions || []\"\n      [placeholder]=\"'interface.typeToSearch' | translate\"\n      (selected)=\"selectFormFlowDefinition($event)\"\n      [label]=\"'processLinkSteps.selectFormFlow' | translate\"\n      ><cds-dropdown-list></cds-dropdown-list\n    ></cds-combo-box>\n\n    <br />\n\n    <valtimo-form-display-configuration\n      [selectedFormDefinition]=\"selectedFormFlowDefinitionId\"\n      (formDisplayValue)=\"selectedFormDisplayValue($event)\"\n      (formSizeValue)=\"selectedFormSizeValue($event)\"\n      (subtitlesValue)=\"selectedSubtitlesValue($event)\"\n    ></valtimo-form-display-configuration>\n  </div>\n</ng-container>\n", styles: [".label-with-tooltip{display:flex;align-items:center}.select-form-flow{display:flex;flex-direction:column;width:100%;margin-top:24px}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.ComboBox, selector: "cds-combo-box, ibm-combo-box", inputs: ["placeholder", "openMenuAria", "closeMenuAria", "clearSelectionsTitle", "clearSelectionsAria", "clearSelectionTitle", "clearSelectionAria", "id", "labelId", "items", "type", "size", "itemValueKey", "label", "hideLabel", "helperText", "appendInline", "invalid", "invalidText", "warn", "warnText", "maxLength", "theme", "selectionFeedback", "autocomplete", "dropUp", "disabled", "readonly", "fluid"], outputs: ["selected", "submit", "close", "search", "clear"] }, { kind: "component", type: i5.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "component", type: FormDisplayConfigurationComponent, selector: "valtimo-form-display-configuration", inputs: ["selectedFormDefinition"], outputs: ["formDisplayValue", "formSizeValue", "subtitlesValue"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SelectFormFlowComponent, deps: [{ token: i1$5.FormFlowService }, { token: ProcessLinkStateService }, { token: ProcessLinkService }, { token: ProcessLinkButtonService }, { token: i3$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: SelectFormFlowComponent, isStandalone: false, selector: "valtimo-select-form-flow", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    formFlowDefinitions: formFlowDefinitionListItems$ | async,\n    saving: saving$ | async,\n  } as obs\"\n>\n  <p class=\"step-description\">\n    {{ 'processLinkConfiguration.chooseFormFlowDescription' | translate }}\n  </p>\n\n  <div class=\"select-form-flow\">\n    <cds-combo-box\n      [appendInline]=\"true\"\n      [disabled]=\"!obs.formFlowDefinitions || obs.saving\"\n      [items]=\"obs.formFlowDefinitions || []\"\n      [placeholder]=\"'interface.typeToSearch' | translate\"\n      (selected)=\"selectFormFlowDefinition($event)\"\n      [label]=\"'processLinkSteps.selectFormFlow' | translate\"\n      ><cds-dropdown-list></cds-dropdown-list\n    ></cds-combo-box>\n\n    <br />\n\n    <valtimo-form-display-configuration\n      [selectedFormDefinition]=\"selectedFormFlowDefinitionId\"\n      (formDisplayValue)=\"selectedFormDisplayValue($event)\"\n      (formSizeValue)=\"selectedFormSizeValue($event)\"\n      (subtitlesValue)=\"selectedSubtitlesValue($event)\"\n    ></valtimo-form-display-configuration>\n  </div>\n</ng-container>\n", styles: [".label-with-tooltip{display:flex;align-items:center}.select-form-flow{display:flex;flex-direction:column;width:100%;margin-top:24px}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.ComboBox, selector: "cds-combo-box, ibm-combo-box", inputs: ["placeholder", "openMenuAria", "closeMenuAria", "clearSelectionsTitle", "clearSelectionsAria", "clearSelectionTitle", "clearSelectionAria", "id", "labelId", "items", "type", "size", "itemValueKey", "label", "hideLabel", "helperText", "appendInline", "invalid", "invalidText", "warn", "warnText", "maxLength", "theme", "selectionFeedback", "autocomplete", "dropUp", "disabled", "readonly", "fluid"], outputs: ["selected", "submit", "close", "search", "clear"] }, { kind: "component", type: i6.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "component", type: FormDisplayConfigurationComponent, selector: "valtimo-form-display-configuration", inputs: ["selectedFormDefinition"], outputs: ["formDisplayValue", "formSizeValue", "subtitlesValue"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SelectFormFlowComponent, decorators: [{
             type: Component,
             args: [{ standalone: false, selector: 'valtimo-select-form-flow', template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    formFlowDefinitions: formFlowDefinitionListItems$ | async,\n    saving: saving$ | async,\n  } as obs\"\n>\n  <p class=\"step-description\">\n    {{ 'processLinkConfiguration.chooseFormFlowDescription' | translate }}\n  </p>\n\n  <div class=\"select-form-flow\">\n    <cds-combo-box\n      [appendInline]=\"true\"\n      [disabled]=\"!obs.formFlowDefinitions || obs.saving\"\n      [items]=\"obs.formFlowDefinitions || []\"\n      [placeholder]=\"'interface.typeToSearch' | translate\"\n      (selected)=\"selectFormFlowDefinition($event)\"\n      [label]=\"'processLinkSteps.selectFormFlow' | translate\"\n      ><cds-dropdown-list></cds-dropdown-list\n    ></cds-combo-box>\n\n    <br />\n\n    <valtimo-form-display-configuration\n      [selectedFormDefinition]=\"selectedFormFlowDefinitionId\"\n      (formDisplayValue)=\"selectedFormDisplayValue($event)\"\n      (formSizeValue)=\"selectedFormSizeValue($event)\"\n      (subtitlesValue)=\"selectedSubtitlesValue($event)\"\n    ></valtimo-form-display-configuration>\n  </div>\n</ng-container>\n", styles: [".label-with-tooltip{display:flex;align-items:center}.select-form-flow{display:flex;flex-direction:column;width:100%;margin-top:24px}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
-        }], ctorParameters: () => [{ type: i1$5.FormFlowService }, { type: ProcessLinkStateService }, { type: ProcessLinkService }, { type: ProcessLinkButtonService }, { type: i3$2.ActivatedRoute }] });
+        }], ctorParameters: () => [{ type: i1$5.FormFlowService }, { type: ProcessLinkStateService }, { type: ProcessLinkService }, { type: ProcessLinkButtonService }, { type: i3$1.ActivatedRoute }] });
 
 /*
  * Copyright 2015-2025 Ritense BV, the Netherlands.
@@ -3655,7 +3933,7 @@ class SelectUIComponentComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SelectUIComponentComponent, deps: [{ token: ProcessLinkStateService }, { token: ProcessLinkButtonService }, { token: ProcessLinkService }, { token: FORM_CUSTOM_COMPONENT_TOKEN, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: SelectUIComponentComponent, isStandalone: false, selector: "valtimo-select-ui-component", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n<cds-combo-box\n  [dropUp]=\"false\"\n  formControlName=\"contentKey\"\n  [items]=\"formCustomComponentListItems$ | async\"\n  itemValueKey=\"contentKey\"\n  [label]=\"'processLinkSteps.uiComponent' | translate\"\n  (selected)=\"selectCustomComponent($event)\"\n>\n  <cds-dropdown-list></cds-dropdown-list>\n</cds-combo-box>\n", styles: [".custom-widget{padding:24px}.custom-widget__header{display:flex;align-items:center;justify-content:space-between}.custom-widget__title{color:var(--cds-text-primary);font-weight:600;font-size:16px;line-height:24px}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.ComboBox, selector: "cds-combo-box, ibm-combo-box", inputs: ["placeholder", "openMenuAria", "closeMenuAria", "clearSelectionsTitle", "clearSelectionsAria", "clearSelectionTitle", "clearSelectionAria", "id", "labelId", "items", "type", "size", "itemValueKey", "label", "hideLabel", "helperText", "appendInline", "invalid", "invalidText", "warn", "warnText", "maxLength", "theme", "selectionFeedback", "autocomplete", "dropUp", "disabled", "readonly", "fluid"], outputs: ["selected", "submit", "close", "search", "clear"] }, { kind: "component", type: i5.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: SelectUIComponentComponent, isStandalone: false, selector: "valtimo-select-ui-component", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n<cds-combo-box\n  [dropUp]=\"false\"\n  formControlName=\"contentKey\"\n  [items]=\"formCustomComponentListItems$ | async\"\n  itemValueKey=\"contentKey\"\n  [label]=\"'processLinkSteps.uiComponent' | translate\"\n  (selected)=\"selectCustomComponent($event)\"\n>\n  <cds-dropdown-list></cds-dropdown-list>\n</cds-combo-box>\n", styles: [".custom-widget{padding:24px}.custom-widget__header{display:flex;align-items:center;justify-content:space-between}.custom-widget__title{color:var(--cds-text-primary);font-weight:600;font-size:16px;line-height:24px}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i5.ComboBox, selector: "cds-combo-box, ibm-combo-box", inputs: ["placeholder", "openMenuAria", "closeMenuAria", "clearSelectionsTitle", "clearSelectionsAria", "clearSelectionTitle", "clearSelectionAria", "id", "labelId", "items", "type", "size", "itemValueKey", "label", "hideLabel", "helperText", "appendInline", "invalid", "invalidText", "warn", "warnText", "maxLength", "theme", "selectionFeedback", "autocomplete", "dropUp", "disabled", "readonly", "fluid"], outputs: ["selected", "submit", "close", "search", "clear"] }, { kind: "component", type: i6.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SelectUIComponentComponent, decorators: [{
             type: Component,
@@ -3758,7 +4036,7 @@ class SelectBuildingBlockComponent {
         return name;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SelectBuildingBlockComponent, deps: [{ token: ProcessLinkBuildingBlockApiService }, { token: ProcessLinkStateService }, { token: BuildingBlockStateService }, { token: ProcessLinkButtonService }, { token: ProcessLinkStepService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: SelectBuildingBlockComponent, isStandalone: false, selector: "valtimo-select-building-block", ngImport: i0, template: "<!--\n  Copyright 2015-2025 Ritense BV\n  Licensed under the EUPL, Version 1.2\n-->\n\n<div class=\"select-building-block\" *ngIf=\"!loading; else loadingState\">\n  <ng-container *ngIf=\"buildingBlocks$ | async as buildingBlocks\">\n    <ng-container *ngIf=\"buildingBlocks.length; else emptyState\">\n      <div class=\"list-container\">\n        <cds-structured-list (selected)=\"onSelectionChange($event)\" selection=\"true\">\n          <cds-list-header>\n            <cds-list-column nowrap=\"true\"></cds-list-column>\n            <cds-list-column nowrap=\"true\">\n              {{ 'processLinkConfiguration.buildingBlock.name' | translate }}\n            </cds-list-column>\n            <cds-list-column>\n              {{ 'processLinkConfiguration.buildingBlock.description' | translate }}\n            </cds-list-column>\n          </cds-list-header>\n          <cds-list-row *ngFor=\"let buildingBlock of buildingBlocks\" [value]=\"buildingBlock\">\n            <cds-list-column>\n              <div *ngIf=\"buildingBlock.imageBase64\">\n                <img\n                  class=\"building-block-artwork\"\n                  [src]=\"'data:image/png;base64,' + buildingBlock.imageBase64\"\n                  [title]=\"buildingBlock.name\"\n                />\n              </div>\n            </cds-list-column>\n            <cds-list-column>{{ buildingBlock.name }}</cds-list-column>\n            <cds-list-column>{{ buildingBlock.description }}</cds-list-column>\n          </cds-list-row>\n        </cds-structured-list>\n      </div>\n    </ng-container>\n  </ng-container>\n</div>\n\n<ng-template #loadingState>\n  <div class=\"loading-container\">\n    <cds-loading></cds-loading>\n  </div>\n</ng-template>\n\n<ng-template #emptyState>\n  <div class=\"empty-state\">\n    {{ 'processLinkConfiguration.buildingBlock.emptyState' | translate }}\n  </div>\n</ng-template>\n", styles: [".loading-container{display:flex;justify-content:center;padding:16px 0}.empty-state{padding:1rem;border:1px solid #e0e0e0;border-radius:4px;background-color:#f4f4f4;color:#8d8d8d}.building-block-artwork{object-fit:contain;height:60px;width:100%;margin-bottom:-.5rem}::ng-deep .list-container .cds--structured-list-td{vertical-align:top}\n"], dependencies: [{ kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.Loading, selector: "cds-loading, ibm-loading", inputs: ["title", "isActive", "size", "overlay"] }, { kind: "component", type: i4.StructuredList, selector: "cds-structured-list, ibm-structured-list", inputs: ["selection", "flushed", "condensed", "name", "skeleton"], outputs: ["selected"] }, { kind: "component", type: i4.ListRow, selector: "cds-list-row, ibm-list-row", inputs: ["selected", "label", "value"], outputs: ["change"] }, { kind: "component", type: i4.ListHeader, selector: "cds-list-header, ibm-list-header", inputs: ["skeleton"] }, { kind: "component", type: i4.ListColumn, selector: "cds-list-column, ibm-list-column", inputs: ["skeleton", "nowrap"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: SelectBuildingBlockComponent, isStandalone: false, selector: "valtimo-select-building-block", ngImport: i0, template: "<!--\n  Copyright 2015-2025 Ritense BV\n  Licensed under the EUPL, Version 1.2\n-->\n\n<div class=\"select-building-block\" *ngIf=\"!loading; else loadingState\">\n  <ng-container *ngIf=\"buildingBlocks$ | async as buildingBlocks\">\n    <ng-container *ngIf=\"buildingBlocks.length; else emptyState\">\n      <div class=\"list-container\">\n        <cds-structured-list (selected)=\"onSelectionChange($event)\" selection=\"true\">\n          <cds-list-header>\n            <cds-list-column nowrap=\"true\"></cds-list-column>\n            <cds-list-column nowrap=\"true\">\n              {{ 'processLinkConfiguration.buildingBlock.name' | translate }}\n            </cds-list-column>\n            <cds-list-column>\n              {{ 'processLinkConfiguration.buildingBlock.description' | translate }}\n            </cds-list-column>\n          </cds-list-header>\n          <cds-list-row *ngFor=\"let buildingBlock of buildingBlocks\" [value]=\"buildingBlock\">\n            <cds-list-column>\n              <div *ngIf=\"buildingBlock.imageBase64\">\n                <img\n                  class=\"building-block-artwork\"\n                  [src]=\"'data:image/png;base64,' + buildingBlock.imageBase64\"\n                  [title]=\"buildingBlock.name\"\n                />\n              </div>\n            </cds-list-column>\n            <cds-list-column>{{ buildingBlock.name }}</cds-list-column>\n            <cds-list-column>{{ buildingBlock.description }}</cds-list-column>\n          </cds-list-row>\n        </cds-structured-list>\n      </div>\n    </ng-container>\n  </ng-container>\n</div>\n\n<ng-template #loadingState>\n  <div class=\"loading-container\">\n    <cds-loading></cds-loading>\n  </div>\n</ng-template>\n\n<ng-template #emptyState>\n  <div class=\"empty-state\">\n    {{ 'processLinkConfiguration.buildingBlock.emptyState' | translate }}\n  </div>\n</ng-template>\n", styles: [".loading-container{display:flex;justify-content:center;padding:16px 0}.empty-state{padding:1rem;border:1px solid #e0e0e0;border-radius:4px;background-color:#f4f4f4;color:#8d8d8d}.building-block-artwork{object-fit:contain;height:60px;width:100%;margin-bottom:-.5rem}::ng-deep .list-container .cds--structured-list-td{vertical-align:top}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.Loading, selector: "cds-loading, ibm-loading", inputs: ["title", "isActive", "size", "overlay"] }, { kind: "component", type: i5.StructuredList, selector: "cds-structured-list, ibm-structured-list", inputs: ["selection", "flushed", "condensed", "name", "skeleton"], outputs: ["selected"] }, { kind: "component", type: i5.ListRow, selector: "cds-list-row, ibm-list-row", inputs: ["selected", "label", "value"], outputs: ["change"] }, { kind: "component", type: i5.ListHeader, selector: "cds-list-header, ibm-list-header", inputs: ["skeleton"] }, { kind: "component", type: i5.ListColumn, selector: "cds-list-column, ibm-list-column", inputs: ["skeleton", "nowrap"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SelectBuildingBlockComponent, decorators: [{
             type: Component,
@@ -3880,9 +4158,15 @@ class ConfigureBuildingBlockPluginsComponent {
             this.buildingBlockStateService.requiredPluginKeys$,
             this.buildingBlockStateService.mappingsComplete$,
             this.buildingBlockStateService.requirementsLoading$,
+            /*
+              Changing the version keeps the existing mappings and prunes them only once the new
+              version's fields have loaded. Without this, the fields of the previous version could
+              still be in play on the next step, and a save would send mappings that no longer exist.
+            */
+            this.buildingBlockStateService.fieldsLoading$,
             this.definitionVersionTag$,
-        ]).subscribe(([keys, complete, loading, version]) => {
-            if (loading || !version) {
+        ]).subscribe(([keys, complete, requirementsLoading, fieldsLoading, version]) => {
+            if (requirementsLoading || fieldsLoading || !version) {
                 this.buttonService.disableNextButton();
                 return;
             }
@@ -3946,8 +4230,7 @@ class ConfigureBuildingBlockPluginsComponent {
         const currentVersion = this.buildingBlockStateService.getDefinitionSnapshot().versionTag;
         if (normalizedValue === currentVersion)
             return;
-        this.buildingBlockStateService.setPluginConfigurationMappings(undefined);
-        this.buildingBlockStateService.setDefinitionVersionTag(normalizedValue);
+        this.buildingBlockStateService.changeDefinitionVersionTag(normalizedValue);
     }
     createProcessLink() {
         this.stateService.modalParams$.pipe(take(1)).subscribe(modalParams => {
@@ -4005,11 +4288,11 @@ class ConfigureBuildingBlockPluginsComponent {
         }, {});
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ConfigureBuildingBlockPluginsComponent, deps: [{ token: ProcessLinkStateService }, { token: BuildingBlockStateService }, { token: ProcessLinkButtonService }, { token: ProcessLinkStepService }, { token: i1$1.PluginManagementService }, { token: i1$1.PluginTranslationService }, { token: ProcessLinkService }, { token: i3.TranslateService }, { token: ProcessLinkBuildingBlockApiService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: ConfigureBuildingBlockPluginsComponent, isStandalone: false, selector: "valtimo-configure-building-block-plugins", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"configure-building-block-plugins\">\n  <div\n    *ngIf=\"dependenciesNotificationObject$ | async as dependenciesNotificationObject\"\n    class=\"configure-building-block-plugins__warning\"\n  >\n    <cds-notification [notificationObj]=\"dependenciesNotificationObject\"> </cds-notification>\n  </div>\n\n  @if (versionItems$ | async; as versionItems) {\n    @let versionPlaceholder = versionPlaceholder$ | async;\n    <div class=\"version-select\">\n      <cds-combo-box\n        cdsLayer\n        size=\"lg\"\n        [appendInline]=\"true\"\n        [items]=\"versionItems\"\n        [label]=\"'processLinkConfiguration.buildingBlock.versionLabel' | translate\"\n        [placeholder]=\"versionPlaceholder || ''\"\n        (selected)=\"onVersionChange($event?.id || '')\"\n        (clear)=\"onVersionChange('')\"\n      >\n        <cds-dropdown-list></cds-dropdown-list>\n      </cds-combo-box>\n    </div>\n  }\n\n  @if (loading$ | async) {\n    <div class=\"loading-container\">\n      <cds-loading></cds-loading>\n    </div>\n  } @else {\n    <div class=\"plugin-list\">\n      @if (definitionVersionTag$ | async) {\n        @if (isNestedBuildingBlock$ | async) {\n          <div class=\"empty-state\">\n            {{ 'processLinkConfiguration.buildingBlock.nestedBuildingBlockInfo' | translate }}\n          </div>\n        } @else {\n          @if (pluginConfigurationViewModels$ | async; as pluginConfigurationViewModels) {\n            @if (pluginConfigurationViewModels.length === 0) {\n              <div class=\"empty-state\">\n                {{ 'processLinkConfiguration.buildingBlock.noRequirements' | translate }}\n              </div>\n            } @else {\n              @let configurationPlaceholder = configurationPlaceholder$ | async;\n\n              <div class=\"plugin-row\">\n                <v-input-label\n                  [title]=\"'processLinkConfiguration.buildingBlock.pluginLabel' | translate\"\n                >\n                </v-input-label>\n                <v-input-label\n                  [title]=\"'processLinkConfiguration.buildingBlock.configurationLabel' | translate\"\n                  required=\"true\"\n                >\n                </v-input-label>\n              </div>\n\n              @for (plugin of pluginConfigurationViewModels; track plugin.key) {\n                <div class=\"plugin-row\">\n                  <div class=\"plugin-label\">\n                    {{ plugin.label }}\n                  </div>\n\n                  <cds-combo-box\n                    cdsLayer\n                    size=\"lg\"\n                    [appendInline]=\"true\"\n                    [items]=\"plugin.dropdownItems\"\n                    [placeholder]=\"configurationPlaceholder || ''\"\n                    (selected)=\"onMappingChange(plugin.key, $event?.id || '')\"\n                    (clear)=\"onMappingChange(plugin.key, '')\"\n                  >\n                    <cds-dropdown-list></cds-dropdown-list>\n                  </cds-combo-box>\n                </div>\n              }\n            }\n          }\n        }\n      }\n    </div>\n  }\n</div>\n", styles: [".loading-container{display:flex;justify-content:center;padding:2rem 0}.empty-state{padding:1rem;border:1px solid #e0e0e0;border-radius:4px;background-color:#f4f4f4;color:#8d8d8d}.plugin-row{display:grid;align-items:center;grid-template-columns:1fr 1fr;margin-bottom:15px}.plugin-row .plugin-label{padding-left:16px;border-block-end:1px solid var(--cds-border-strong);height:100%;margin-right:15px;display:grid;align-items:center}.plugin-list{margin-top:30px}.configure-building-block-plugins__warning{display:flex;width:100%;margin-bottom:24px}.configure-building-block-plugins__warning ::ng-deep cds-notification{max-inline-size:100%;min-inline-size:100%}\n"], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.ComboBox, selector: "cds-combo-box, ibm-combo-box", inputs: ["placeholder", "openMenuAria", "closeMenuAria", "clearSelectionsTitle", "clearSelectionsAria", "clearSelectionTitle", "clearSelectionAria", "id", "labelId", "items", "type", "size", "itemValueKey", "label", "hideLabel", "helperText", "appendInline", "invalid", "invalidText", "warn", "warnText", "maxLength", "theme", "selectionFeedback", "autocomplete", "dropUp", "disabled", "readonly", "fluid"], outputs: ["selected", "submit", "close", "search", "clear"] }, { kind: "component", type: i5.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "component", type: i4.Loading, selector: "cds-loading, ibm-loading", inputs: ["title", "isActive", "size", "overlay"] }, { kind: "directive", type: i4.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "component", type: i2$1.InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "tooltipTranslationKey", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "component", type: i4.Notification, selector: "cds-notification, cds-inline-notification, ibm-notification, ibm-inline-notification", inputs: ["notificationObj"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: ConfigureBuildingBlockPluginsComponent, isStandalone: false, selector: "valtimo-configure-building-block-plugins", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"configure-building-block-plugins\">\n  <div\n    *ngIf=\"dependenciesNotificationObject$ | async as dependenciesNotificationObject\"\n    class=\"configure-building-block-plugins__warning\"\n  >\n    <cds-notification [notificationObj]=\"dependenciesNotificationObject\"> </cds-notification>\n  </div>\n\n  @if (versionItems$ | async; as versionItems) {\n    @let versionPlaceholder = versionPlaceholder$ | async;\n    <div class=\"version-select\">\n      <cds-combo-box\n        cdsLayer\n        size=\"lg\"\n        [appendInline]=\"true\"\n        [dropUp]=\"false\"\n        [items]=\"versionItems\"\n        [label]=\"'processLinkConfiguration.buildingBlock.versionLabel' | translate\"\n        [placeholder]=\"versionPlaceholder || ''\"\n        (selected)=\"onVersionChange($event?.id || '')\"\n        (clear)=\"onVersionChange('')\"\n      >\n        <cds-dropdown-list></cds-dropdown-list>\n      </cds-combo-box>\n    </div>\n  }\n\n  @if (loading$ | async) {\n    <div class=\"loading-container\">\n      <cds-loading></cds-loading>\n    </div>\n  } @else {\n    <div class=\"plugin-list\">\n      @if (definitionVersionTag$ | async) {\n        @if (isNestedBuildingBlock$ | async) {\n          <div class=\"empty-state\">\n            {{ 'processLinkConfiguration.buildingBlock.nestedBuildingBlockInfo' | translate }}\n          </div>\n        } @else {\n          @if (pluginConfigurationViewModels$ | async; as pluginConfigurationViewModels) {\n            @if (pluginConfigurationViewModels.length === 0) {\n              <div class=\"empty-state\">\n                {{ 'processLinkConfiguration.buildingBlock.noRequirements' | translate }}\n              </div>\n            } @else {\n              @let configurationPlaceholder = configurationPlaceholder$ | async;\n\n              <div class=\"plugin-row\">\n                <v-input-label\n                  [title]=\"'processLinkConfiguration.buildingBlock.pluginLabel' | translate\"\n                >\n                </v-input-label>\n                <v-input-label\n                  [title]=\"'processLinkConfiguration.buildingBlock.configurationLabel' | translate\"\n                  required=\"true\"\n                >\n                </v-input-label>\n              </div>\n\n              @for (plugin of pluginConfigurationViewModels; track plugin.key) {\n                <div class=\"plugin-row\">\n                  <div class=\"plugin-label\">\n                    {{ plugin.label }}\n                  </div>\n\n                  <cds-combo-box\n                    cdsLayer\n                    size=\"lg\"\n                    [appendInline]=\"true\"\n                    [dropUp]=\"false\"\n                    [items]=\"plugin.dropdownItems\"\n                    [placeholder]=\"configurationPlaceholder || ''\"\n                    (selected)=\"onMappingChange(plugin.key, $event?.id || '')\"\n                    (clear)=\"onMappingChange(plugin.key, '')\"\n                  >\n                    <cds-dropdown-list></cds-dropdown-list>\n                  </cds-combo-box>\n                </div>\n              }\n            }\n          }\n        }\n      }\n    </div>\n  }\n</div>\n", styles: [".version-select ::ng-deep .cds--list-box__menu{scrollbar-color:var(--cds-border-strong) var(--cds-layer);scrollbar-width:thin}.version-select ::ng-deep .cds--list-box__menu::-webkit-scrollbar{width:8px}.version-select ::ng-deep .cds--list-box__menu::-webkit-scrollbar-track{background:var(--cds-layer)}.version-select ::ng-deep .cds--list-box__menu::-webkit-scrollbar-thumb{background:var(--cds-border-strong);border-radius:4px}.loading-container{display:flex;justify-content:center;padding:2rem 0}.empty-state{padding:1rem;border:1px solid #e0e0e0;border-radius:4px;background-color:#f4f4f4;color:#8d8d8d}.plugin-row{display:grid;align-items:center;grid-template-columns:1fr 1fr;margin-bottom:15px}.plugin-row .plugin-label{padding-left:16px;border-block-end:1px solid var(--cds-border-strong);height:100%;margin-right:15px;display:grid;align-items:center}.plugin-list{margin-top:30px}.configure-building-block-plugins__warning{display:flex;width:100%;margin-bottom:24px}.configure-building-block-plugins__warning ::ng-deep cds-notification{max-inline-size:100%;min-inline-size:100%}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.ComboBox, selector: "cds-combo-box, ibm-combo-box", inputs: ["placeholder", "openMenuAria", "closeMenuAria", "clearSelectionsTitle", "clearSelectionsAria", "clearSelectionTitle", "clearSelectionAria", "id", "labelId", "items", "type", "size", "itemValueKey", "label", "hideLabel", "helperText", "appendInline", "invalid", "invalidText", "warn", "warnText", "maxLength", "theme", "selectionFeedback", "autocomplete", "dropUp", "disabled", "readonly", "fluid"], outputs: ["selected", "submit", "close", "search", "clear"] }, { kind: "component", type: i6.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "component", type: i5.Loading, selector: "cds-loading, ibm-loading", inputs: ["title", "isActive", "size", "overlay"] }, { kind: "directive", type: i5.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "component", type: i2$1.InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "tooltipTranslationKey", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "component", type: i5.Notification, selector: "cds-notification, cds-inline-notification, ibm-notification, ibm-inline-notification", inputs: ["notificationObj"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ConfigureBuildingBlockPluginsComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'valtimo-configure-building-block-plugins', template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"configure-building-block-plugins\">\n  <div\n    *ngIf=\"dependenciesNotificationObject$ | async as dependenciesNotificationObject\"\n    class=\"configure-building-block-plugins__warning\"\n  >\n    <cds-notification [notificationObj]=\"dependenciesNotificationObject\"> </cds-notification>\n  </div>\n\n  @if (versionItems$ | async; as versionItems) {\n    @let versionPlaceholder = versionPlaceholder$ | async;\n    <div class=\"version-select\">\n      <cds-combo-box\n        cdsLayer\n        size=\"lg\"\n        [appendInline]=\"true\"\n        [items]=\"versionItems\"\n        [label]=\"'processLinkConfiguration.buildingBlock.versionLabel' | translate\"\n        [placeholder]=\"versionPlaceholder || ''\"\n        (selected)=\"onVersionChange($event?.id || '')\"\n        (clear)=\"onVersionChange('')\"\n      >\n        <cds-dropdown-list></cds-dropdown-list>\n      </cds-combo-box>\n    </div>\n  }\n\n  @if (loading$ | async) {\n    <div class=\"loading-container\">\n      <cds-loading></cds-loading>\n    </div>\n  } @else {\n    <div class=\"plugin-list\">\n      @if (definitionVersionTag$ | async) {\n        @if (isNestedBuildingBlock$ | async) {\n          <div class=\"empty-state\">\n            {{ 'processLinkConfiguration.buildingBlock.nestedBuildingBlockInfo' | translate }}\n          </div>\n        } @else {\n          @if (pluginConfigurationViewModels$ | async; as pluginConfigurationViewModels) {\n            @if (pluginConfigurationViewModels.length === 0) {\n              <div class=\"empty-state\">\n                {{ 'processLinkConfiguration.buildingBlock.noRequirements' | translate }}\n              </div>\n            } @else {\n              @let configurationPlaceholder = configurationPlaceholder$ | async;\n\n              <div class=\"plugin-row\">\n                <v-input-label\n                  [title]=\"'processLinkConfiguration.buildingBlock.pluginLabel' | translate\"\n                >\n                </v-input-label>\n                <v-input-label\n                  [title]=\"'processLinkConfiguration.buildingBlock.configurationLabel' | translate\"\n                  required=\"true\"\n                >\n                </v-input-label>\n              </div>\n\n              @for (plugin of pluginConfigurationViewModels; track plugin.key) {\n                <div class=\"plugin-row\">\n                  <div class=\"plugin-label\">\n                    {{ plugin.label }}\n                  </div>\n\n                  <cds-combo-box\n                    cdsLayer\n                    size=\"lg\"\n                    [appendInline]=\"true\"\n                    [items]=\"plugin.dropdownItems\"\n                    [placeholder]=\"configurationPlaceholder || ''\"\n                    (selected)=\"onMappingChange(plugin.key, $event?.id || '')\"\n                    (clear)=\"onMappingChange(plugin.key, '')\"\n                  >\n                    <cds-dropdown-list></cds-dropdown-list>\n                  </cds-combo-box>\n                </div>\n              }\n            }\n          }\n        }\n      }\n    </div>\n  }\n</div>\n", styles: [".loading-container{display:flex;justify-content:center;padding:2rem 0}.empty-state{padding:1rem;border:1px solid #e0e0e0;border-radius:4px;background-color:#f4f4f4;color:#8d8d8d}.plugin-row{display:grid;align-items:center;grid-template-columns:1fr 1fr;margin-bottom:15px}.plugin-row .plugin-label{padding-left:16px;border-block-end:1px solid var(--cds-border-strong);height:100%;margin-right:15px;display:grid;align-items:center}.plugin-list{margin-top:30px}.configure-building-block-plugins__warning{display:flex;width:100%;margin-bottom:24px}.configure-building-block-plugins__warning ::ng-deep cds-notification{max-inline-size:100%;min-inline-size:100%}\n"] }]
+            args: [{ standalone: false, selector: 'valtimo-configure-building-block-plugins', template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"configure-building-block-plugins\">\n  <div\n    *ngIf=\"dependenciesNotificationObject$ | async as dependenciesNotificationObject\"\n    class=\"configure-building-block-plugins__warning\"\n  >\n    <cds-notification [notificationObj]=\"dependenciesNotificationObject\"> </cds-notification>\n  </div>\n\n  @if (versionItems$ | async; as versionItems) {\n    @let versionPlaceholder = versionPlaceholder$ | async;\n    <div class=\"version-select\">\n      <cds-combo-box\n        cdsLayer\n        size=\"lg\"\n        [appendInline]=\"true\"\n        [dropUp]=\"false\"\n        [items]=\"versionItems\"\n        [label]=\"'processLinkConfiguration.buildingBlock.versionLabel' | translate\"\n        [placeholder]=\"versionPlaceholder || ''\"\n        (selected)=\"onVersionChange($event?.id || '')\"\n        (clear)=\"onVersionChange('')\"\n      >\n        <cds-dropdown-list></cds-dropdown-list>\n      </cds-combo-box>\n    </div>\n  }\n\n  @if (loading$ | async) {\n    <div class=\"loading-container\">\n      <cds-loading></cds-loading>\n    </div>\n  } @else {\n    <div class=\"plugin-list\">\n      @if (definitionVersionTag$ | async) {\n        @if (isNestedBuildingBlock$ | async) {\n          <div class=\"empty-state\">\n            {{ 'processLinkConfiguration.buildingBlock.nestedBuildingBlockInfo' | translate }}\n          </div>\n        } @else {\n          @if (pluginConfigurationViewModels$ | async; as pluginConfigurationViewModels) {\n            @if (pluginConfigurationViewModels.length === 0) {\n              <div class=\"empty-state\">\n                {{ 'processLinkConfiguration.buildingBlock.noRequirements' | translate }}\n              </div>\n            } @else {\n              @let configurationPlaceholder = configurationPlaceholder$ | async;\n\n              <div class=\"plugin-row\">\n                <v-input-label\n                  [title]=\"'processLinkConfiguration.buildingBlock.pluginLabel' | translate\"\n                >\n                </v-input-label>\n                <v-input-label\n                  [title]=\"'processLinkConfiguration.buildingBlock.configurationLabel' | translate\"\n                  required=\"true\"\n                >\n                </v-input-label>\n              </div>\n\n              @for (plugin of pluginConfigurationViewModels; track plugin.key) {\n                <div class=\"plugin-row\">\n                  <div class=\"plugin-label\">\n                    {{ plugin.label }}\n                  </div>\n\n                  <cds-combo-box\n                    cdsLayer\n                    size=\"lg\"\n                    [appendInline]=\"true\"\n                    [dropUp]=\"false\"\n                    [items]=\"plugin.dropdownItems\"\n                    [placeholder]=\"configurationPlaceholder || ''\"\n                    (selected)=\"onMappingChange(plugin.key, $event?.id || '')\"\n                    (clear)=\"onMappingChange(plugin.key, '')\"\n                  >\n                    <cds-dropdown-list></cds-dropdown-list>\n                  </cds-combo-box>\n                </div>\n              }\n            }\n          }\n        }\n      }\n    </div>\n  }\n</div>\n", styles: [".version-select ::ng-deep .cds--list-box__menu{scrollbar-color:var(--cds-border-strong) var(--cds-layer);scrollbar-width:thin}.version-select ::ng-deep .cds--list-box__menu::-webkit-scrollbar{width:8px}.version-select ::ng-deep .cds--list-box__menu::-webkit-scrollbar-track{background:var(--cds-layer)}.version-select ::ng-deep .cds--list-box__menu::-webkit-scrollbar-thumb{background:var(--cds-border-strong);border-radius:4px}.loading-container{display:flex;justify-content:center;padding:2rem 0}.empty-state{padding:1rem;border:1px solid #e0e0e0;border-radius:4px;background-color:#f4f4f4;color:#8d8d8d}.plugin-row{display:grid;align-items:center;grid-template-columns:1fr 1fr;margin-bottom:15px}.plugin-row .plugin-label{padding-left:16px;border-block-end:1px solid var(--cds-border-strong);height:100%;margin-right:15px;display:grid;align-items:center}.plugin-list{margin-top:30px}.configure-building-block-plugins__warning{display:flex;width:100%;margin-bottom:24px}.configure-building-block-plugins__warning ::ng-deep cds-notification{max-inline-size:100%;min-inline-size:100%}\n"] }]
         }], ctorParameters: () => [{ type: ProcessLinkStateService }, { type: BuildingBlockStateService }, { type: ProcessLinkButtonService }, { type: ProcessLinkStepService }, { type: i1$1.PluginManagementService }, { type: i1$1.PluginTranslationService }, { type: ProcessLinkService }, { type: i3.TranslateService }, { type: ProcessLinkBuildingBlockApiService }] });
 
 /*
@@ -4035,6 +4318,7 @@ class ProcessLinkModalComponent {
         this.pluginStateService = pluginStateService;
         this.processLinkStateService = processLinkStateService;
         this.configService = configService;
+        this.testIds = PROCESS_LINK_MODAL_TEST_IDS;
         this.showModal$ = this.stateService.showModal$;
         this.processStepName$ = this.stateService.elementName$;
         this.steps$ = this.stepService.steps$;
@@ -4050,6 +4334,7 @@ class ProcessLinkModalComponent {
         this.typeOfSelectedProcessLink$ = this.stateService.typeOfSelectedProcessLink$;
         this.viewModelEnabled$ = this.stateService.viewModelEnabled$;
         this.isEditing$ = this.stateService.isEditing$;
+        this.readOnly$ = this.stateService.readOnly$;
         this.isAdHocBuildingBlock$ = this.stepService.skipBuildingBlockSelectionStep$;
         this.selectedPluginConfiguration$ = this.pluginStateService.selectedPluginConfiguration$;
         this.showViewModelToggle$ = this.configService.getFeatureToggleObservable('enableFormViewModel');
@@ -4077,11 +4362,11 @@ class ProcessLinkModalComponent {
         this.processLinkStateService.setViewModelEnabled(value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ProcessLinkModalComponent, deps: [{ token: ProcessLinkStateService }, { token: ProcessLinkStepService }, { token: ProcessLinkButtonService }, { token: PluginStateService }, { token: ProcessLinkStateService }, { token: i1.ConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: ProcessLinkModalComponent, isStandalone: false, selector: "valtimo-process-link-modal", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  class=\"process-link-modal-container\"\n  *ngIf=\"{\n    showModal: showModal$ | async,\n    processStepName: processStepName$ | async,\n    steps: steps$ | async,\n    selectedPluginConfiguration: selectedPluginConfiguration$ | async,\n    currentStepIndex: currentStepIndex$ | async,\n    currentStepId: currentStepId$ | async,\n    showSaveButton: showSaveButton$ | async,\n    enableSaveButton: enableSaveButton$ | async,\n    showBackButton: showBackButton$ | async,\n    showNextButton: showNextButton$ | async,\n    enableNextButton: enableNextButton$ | async,\n    saving: saving$ | async,\n    hideProgressIndicator: hideProgressIndicator$ | async,\n    typeOfSelectedProgressLink: typeOfSelectedProcessLink$ | async,\n    isEditing: isEditing$ | async,\n    isAdHocBuildingBlock: isAdHocBuildingBlock$ | async,\n  } as obs\"\n>\n  <cds-modal valtimoCdsModal [open]=\"obs.showModal\" size=\"lg\" (close)=\"closeModal()\">\n    <cds-modal-header (closeSelect)=\"closeModal()\">\n      <h2 *ngIf=\"!obs.isAdHocBuildingBlock\" cdsModalHeaderLabel>{{ 'processLinkConfiguration.configureStep' | translate }}</h2>\n      <h3 cdsModalHeaderHeading>\n        <ng-container *ngIf=\"obs.isAdHocBuildingBlock; else defaultModalTitle\">\n          {{ 'processLinkConfiguration.buildingBlockActionTitle' | translate: {buildingBlockName: obs.processStepName || '-'} }}\n        </ng-container>\n        <ng-template #defaultModalTitle>\n          {{\n            'processLinkConfiguration.modalTitle'\n                    | translate: {processStepName: obs.processStepName || '-'}\n          }}\n        </ng-template>\n      </h3>\n      <h4 cdsModalHeaderLabel *ngIf=\"obs.typeOfSelectedProgressLink === 'plugin'\">\n        {{\n          'processLinkConfiguration.pluginConfiguration'\n                  | translate: {pluginConfigTitle: obs.selectedPluginConfiguration?.title || '-'}\n        }}\n      </h4>\n      <div class=\"process-link-progress\">\n        <ng-container *ngTemplateOutlet=\"progressIndicator; context: {obs: obs}\"></ng-container>\n      </div>\n    </cds-modal-header>\n    <section cdsModalContent [cdsLayer]=\"1\">\n      <ng-container *ngTemplateOutlet=\"stepContent; context: {obs: obs}\"></ng-container>\n    </section>\n    <ng-template *ngTemplateOutlet=\"footer; context: {obs: obs}\"></ng-template>\n  </cds-modal>\n</div>\n\n<ng-template #progressIndicator let-obs=\"obs\">\n  <cds-progress-indicator\n    *ngIf=\"obs.steps && !obs.hideProgressIndicator\"\n    [steps]=\"obs.steps\"\n    [current]=\"obs.currentStepIndex\"\n    spacing=\"equal\"\n  ></cds-progress-indicator>\n</ng-template>\n\n<ng-template #stepContent let-obs=\"obs\">\n  <div class=\"cds-loading-container\" *ngIf=\"obs.saving\">\n    <cds-loading></cds-loading>\n  </div>\n  <div [ngClass]=\"{hidden: obs.saving}\">\n    <ng-container>\n      <ng-container *ngIf=\"obs.currentStepId === 'chooseProcessLinkType'\">\n        <valtimo-choose-process-link-type></valtimo-choose-process-link-type>\n      </ng-container>\n      <ng-container *ngIf=\"obs.currentStepId === 'selectForm'\">\n        <valtimo-select-form></valtimo-select-form>\n        <br />\n        <cds-toggle\n          *ngIf=\"showViewModelToggle$ | async\"\n          [label]=\"'processLinkConfiguration.toggleViewModel.title' | translate\"\n          [onText]=\"'processLinkConfiguration.toggleViewModel.checkboxDescription' | translate\"\n          [offText]=\"'processLinkConfiguration.toggleViewModel.checkboxDescription' | translate\"\n          [checked]=\"viewModelEnabled$ | async\"\n          (checkedChange)=\"toggleCheckedChange($event)\"\n        ></cds-toggle>\n      </ng-container>\n      <ng-container *ngIf=\"obs.currentStepId === 'selectFormFlow'\">\n        <valtimo-select-form-flow></valtimo-select-form-flow>\n      </ng-container>\n\n      <ng-container\n        *ngIf=\"\n          obs.currentStepId === 'choosePluginConfiguration' ||\n          obs.currentStepId === 'choosePluginDefinition'\n        \"\n      >\n        <valtimo-select-plugin-configuration></valtimo-select-plugin-configuration>\n      </ng-container>\n\n      <ng-container *ngIf=\"obs.currentStepId === 'selectBuildingBlock'\">\n        <valtimo-select-building-block></valtimo-select-building-block>\n      </ng-container>\n\n      <ng-container *ngIf=\"obs.currentStepId === 'choosePluginAction'\">\n        <valtimo-select-plugin-action></valtimo-select-plugin-action>\n      </ng-container>\n\n      <ng-container *ngIf=\"obs.currentStepId === 'configurePluginAction'\">\n        <valtimo-plugin-action-configuration\n          [selectedPluginConfiguration$]=\"selectedPluginConfiguration$\"\n        ></valtimo-plugin-action-configuration>\n      </ng-container>\n\n      <ng-container *ngIf=\"obs.currentStepId === 'configureBuildingBlockPlugins'\">\n        <valtimo-configure-building-block-plugins></valtimo-configure-building-block-plugins>\n      </ng-container>\n\n      <ng-container *ngIf=\"obs.currentStepId === 'configureBuildingBlockMappings'\">\n        <valtimo-configure-building-block-mappings></valtimo-configure-building-block-mappings>\n      </ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"obs.currentStepId === 'uiComponent'\">\n      <valtimo-select-ui-component></valtimo-select-ui-component>\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #footer let-obs=\"obs\">\n  <cds-modal-footer *ngIf=\"!obs.saving\">\n    <button cdsButton=\"ghost\" (click)=\"closeModal()\" [disabled]=\"obs.disabled\">\n      {{ 'processLinkConfiguration.cancel' | translate }}\n    </button>\n    <div class=\"footer-spacer\"></div>\n    <button\n      cdsButton=\"danger--primary\"\n      *ngIf=\"obs.isEditing\"\n      (click)=\"unlinkButtonClick()\"\n    >\n      {{ 'processLinkConfiguration.unlink' | translate }}\n    </button>\n    <button\n      *ngIf=\"obs.showBackButton && !obs.saving\"\n      cdsButton=\"secondary\"\n      (click)=\"backButtonClick()\"\n    >\n      {{ 'processLinkConfiguration.back' | translate }}\n    </button>\n    <button\n      cdsButton=\"primary\"\n      *ngIf=\"obs.showNextButton && !obs.saving\"\n      [disabled]=\"!obs.enableNextButton\"\n      (click)=\"nextButtonClick()\"\n    >\n      {{ 'processLinkConfiguration.next' | translate }}\n    </button>\n    <button\n      cdsButton=\"primary\"\n      *ngIf=\"obs.showSaveButton && !obs.saving\"\n      [disabled]=\"!obs.enableSaveButton\"\n      (click)=\"saveButtonClick()\"\n    >\n      {{ 'processLinkConfiguration.complete' | translate }}\n    </button>\n  </cds-modal-footer>\n</ng-template>\n", styles: ["::ng-deep .process-link-modal-container .cds--modal-container{max-width:960px;min-height:70%}::ng-deep .process-link-modal-container .cds--modal-footer .footer-spacer{flex:0 1 50%}.cds-loading-container{position:absolute;top:50px;padding-bottom:50px;left:0;width:100%;height:calc(100% - 50px);display:flex;justify-content:center;align-items:center;background:var(--cds-layer);z-index:99;box-sizing:border-box}.process-link-progress{width:100%;margin-top:32px;margin-bottom:16px}.hidden{visibility:hidden}\n/*!\n * Copyright 2015-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i4.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i4.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i4.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i4.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "directive", type: i4.ModalHeaderLabel, selector: "[cdsModalHeaderLabel], [ibmModalHeaderLabel]" }, { kind: "component", type: i4.ProgressIndicator, selector: "cds-progress-indicator, ibm-progress-indicator", inputs: ["current", "steps", "translations", "orientation", "skeleton", "spacing"], outputs: ["stepSelected"] }, { kind: "directive", type: i4.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "component", type: i4.Loading, selector: "cds-loading, ibm-loading", inputs: ["title", "isActive", "size", "overlay"] }, { kind: "directive", type: i2$1.ValtimoCdsModalDirective, selector: "[valtimoCdsModal]", inputs: ["minContentHeight"] }, { kind: "component", type: i4.Toggle, selector: "cds-toggle, ibm-toggle", inputs: ["offText", "onText", "label", "size", "hideLabel", "ariaLabel", "skeleton"] }, { kind: "directive", type: i4.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "component", type: ConfigureBuildingBlockMappingsComponent, selector: "valtimo-configure-building-block-mappings" }, { kind: "component", type: SelectPluginConfigurationComponent, selector: "valtimo-select-plugin-configuration" }, { kind: "component", type: SelectPluginActionComponent, selector: "valtimo-select-plugin-action" }, { kind: "component", type: PluginActionConfigurationComponent, selector: "valtimo-plugin-action-configuration", inputs: ["selectedPluginConfiguration$"], outputs: ["valid", "configuration"] }, { kind: "component", type: ChooseProcessLinkTypeComponent, selector: "valtimo-choose-process-link-type" }, { kind: "component", type: SelectFormComponent, selector: "valtimo-select-form" }, { kind: "component", type: SelectFormFlowComponent, selector: "valtimo-select-form-flow" }, { kind: "component", type: SelectUIComponentComponent, selector: "valtimo-select-ui-component" }, { kind: "component", type: SelectBuildingBlockComponent, selector: "valtimo-select-building-block" }, { kind: "component", type: ConfigureBuildingBlockPluginsComponent, selector: "valtimo-configure-building-block-plugins" }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: ProcessLinkModalComponent, isStandalone: false, selector: "valtimo-process-link-modal", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  class=\"process-link-modal-container\"\n  *ngIf=\"{\n    showModal: showModal$ | async,\n    processStepName: processStepName$ | async,\n    steps: steps$ | async,\n    selectedPluginConfiguration: selectedPluginConfiguration$ | async,\n    currentStepIndex: currentStepIndex$ | async,\n    currentStepId: currentStepId$ | async,\n    showSaveButton: showSaveButton$ | async,\n    enableSaveButton: enableSaveButton$ | async,\n    showBackButton: showBackButton$ | async,\n    showNextButton: showNextButton$ | async,\n    enableNextButton: enableNextButton$ | async,\n    saving: saving$ | async,\n    hideProgressIndicator: hideProgressIndicator$ | async,\n    typeOfSelectedProgressLink: typeOfSelectedProcessLink$ | async,\n    isEditing: isEditing$ | async,\n    isAdHocBuildingBlock: isAdHocBuildingBlock$ | async,\n    readOnly: readOnly$ | async,\n  } as obs\"\n>\n  <cds-modal valtimoCdsModal [open]=\"obs.showModal\" size=\"lg\" (close)=\"closeModal()\">\n    <cds-modal-header (closeSelect)=\"closeModal()\">\n      <h2 *ngIf=\"!obs.isAdHocBuildingBlock\" cdsModalHeaderLabel>\n        {{ 'processLinkConfiguration.configureStep' | translate }}\n      </h2>\n      <h3 cdsModalHeaderHeading [attr.data-test-id]=\"testIds.heading\">\n        <ng-container *ngIf=\"obs.isAdHocBuildingBlock; else defaultModalTitle\">\n          {{\n            'processLinkConfiguration.buildingBlockActionTitle'\n              | translate: {buildingBlockName: obs.processStepName || '-'}\n          }}\n        </ng-container>\n        <ng-template #defaultModalTitle>\n          {{\n            'processLinkConfiguration.modalTitle'\n              | translate: {processStepName: obs.processStepName || '-'}\n          }}\n        </ng-template>\n      </h3>\n      <h4\n        cdsModalHeaderLabel\n        *ngIf=\"obs.typeOfSelectedProgressLink === 'plugin'\"\n        [attr.data-test-id]=\"testIds.pluginConfigurationLabel\"\n      >\n        {{\n          'processLinkConfiguration.pluginConfiguration'\n            | translate: {pluginConfigTitle: obs.selectedPluginConfiguration?.title || '-'}\n        }}\n      </h4>\n      <div class=\"process-link-progress\">\n        <ng-container *ngTemplateOutlet=\"progressIndicator; context: {obs: obs}\"></ng-container>\n      </div>\n    </cds-modal-header>\n    <section cdsModalContent [cdsLayer]=\"1\" [valtimoReadOnlyContent]=\"obs.readOnly\">\n      <ng-container *ngTemplateOutlet=\"stepContent; context: {obs: obs}\"></ng-container>\n    </section>\n    <ng-template *ngTemplateOutlet=\"footer; context: {obs: obs}\"></ng-template>\n  </cds-modal>\n</div>\n\n<ng-template #progressIndicator let-obs=\"obs\">\n  <cds-progress-indicator\n    *ngIf=\"obs.steps && !obs.hideProgressIndicator\"\n    [attr.data-test-id]=\"testIds.progressIndicator\"\n    [steps]=\"obs.steps\"\n    [current]=\"obs.currentStepIndex\"\n    spacing=\"equal\"\n  ></cds-progress-indicator>\n</ng-template>\n\n<ng-template #stepContent let-obs=\"obs\">\n  <div class=\"cds-loading-container\" *ngIf=\"obs.saving\">\n    <cds-loading></cds-loading>\n  </div>\n  <div [ngClass]=\"{hidden: obs.saving}\">\n    <ng-container>\n      <ng-container *ngIf=\"obs.currentStepId === 'chooseProcessLinkType'\">\n        <valtimo-choose-process-link-type></valtimo-choose-process-link-type>\n      </ng-container>\n      <ng-container *ngIf=\"obs.currentStepId === 'selectForm'\">\n        <valtimo-select-form></valtimo-select-form>\n        <br />\n        <cds-toggle\n          *ngIf=\"showViewModelToggle$ | async\"\n          [label]=\"'processLinkConfiguration.toggleViewModel.title' | translate\"\n          [onText]=\"'processLinkConfiguration.toggleViewModel.checkboxDescription' | translate\"\n          [offText]=\"'processLinkConfiguration.toggleViewModel.checkboxDescription' | translate\"\n          [checked]=\"viewModelEnabled$ | async\"\n          (checkedChange)=\"toggleCheckedChange($event)\"\n        ></cds-toggle>\n      </ng-container>\n      <ng-container *ngIf=\"obs.currentStepId === 'selectFormFlow'\">\n        <valtimo-select-form-flow></valtimo-select-form-flow>\n      </ng-container>\n\n      <ng-container\n        *ngIf=\"\n          obs.currentStepId === 'choosePluginConfiguration' ||\n          obs.currentStepId === 'choosePluginDefinition'\n        \"\n      >\n        <valtimo-select-plugin-configuration></valtimo-select-plugin-configuration>\n      </ng-container>\n\n      <ng-container *ngIf=\"obs.currentStepId === 'selectBuildingBlock'\">\n        <valtimo-select-building-block></valtimo-select-building-block>\n      </ng-container>\n\n      <ng-container *ngIf=\"obs.currentStepId === 'choosePluginAction'\">\n        <valtimo-select-plugin-action></valtimo-select-plugin-action>\n      </ng-container>\n\n      <ng-container *ngIf=\"obs.currentStepId === 'configurePluginAction'\">\n        <valtimo-plugin-action-configuration\n          [selectedPluginConfiguration$]=\"selectedPluginConfiguration$\"\n        ></valtimo-plugin-action-configuration>\n      </ng-container>\n\n      <ng-container *ngIf=\"obs.currentStepId === 'configureBuildingBlockPlugins'\">\n        <valtimo-configure-building-block-plugins></valtimo-configure-building-block-plugins>\n      </ng-container>\n\n      <ng-container *ngIf=\"obs.currentStepId === 'configureBuildingBlockMappings'\">\n        <valtimo-configure-building-block-mappings></valtimo-configure-building-block-mappings>\n      </ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"obs.currentStepId === 'uiComponent'\">\n      <valtimo-select-ui-component></valtimo-select-ui-component>\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #footer let-obs=\"obs\">\n  <cds-modal-footer *ngIf=\"!obs.saving\">\n    <button\n      cdsButton=\"ghost\"\n      [attr.data-test-id]=\"testIds.cancelButton\"\n      (click)=\"closeModal()\"\n      [disabled]=\"obs.disabled\"\n    >\n      {{ (obs.readOnly ? 'interface.close' : 'processLinkConfiguration.cancel') | translate }}\n    </button>\n    <div class=\"footer-spacer\"></div>\n    <button\n      cdsButton=\"danger--primary\"\n      *ngIf=\"obs.isEditing && !obs.readOnly\"\n      [attr.data-test-id]=\"testIds.unlinkButton\"\n      (click)=\"unlinkButtonClick()\"\n    >\n      {{ 'processLinkConfiguration.unlink' | translate }}\n    </button>\n    <button\n      *ngIf=\"obs.showBackButton && !obs.saving && !obs.readOnly\"\n      cdsButton=\"secondary\"\n      [attr.data-test-id]=\"testIds.backButton\"\n      (click)=\"backButtonClick()\"\n    >\n      {{ 'processLinkConfiguration.back' | translate }}\n    </button>\n    <button\n      cdsButton=\"primary\"\n      *ngIf=\"obs.showNextButton && !obs.saving && !obs.readOnly\"\n      [attr.data-test-id]=\"testIds.nextButton\"\n      [disabled]=\"!obs.enableNextButton\"\n      (click)=\"nextButtonClick()\"\n    >\n      {{ 'processLinkConfiguration.next' | translate }}\n    </button>\n    <button\n      cdsButton=\"primary\"\n      *ngIf=\"obs.showSaveButton && !obs.saving && !obs.readOnly\"\n      [attr.data-test-id]=\"testIds.completeButton\"\n      [disabled]=\"!obs.enableSaveButton\"\n      (click)=\"saveButtonClick()\"\n    >\n      {{ 'processLinkConfiguration.complete' | translate }}\n    </button>\n  </cds-modal-footer>\n</ng-template>\n", styles: ["::ng-deep .process-link-modal-container .cds--modal-container{max-width:960px;min-height:70%}::ng-deep .process-link-modal-container .cds--modal-footer .footer-spacer{flex:0 1 50%}.cds-loading-container{position:absolute;top:50px;padding-bottom:50px;left:0;width:100%;height:calc(100% - 50px);display:flex;justify-content:center;align-items:center;background:var(--cds-layer);z-index:99;box-sizing:border-box}.process-link-progress{width:100%;margin-top:32px;margin-bottom:16px}.hidden{visibility:hidden}\n/*!\n * Copyright 2015-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: ReadOnlyContentDirective, selector: "[valtimoReadOnlyContent]", inputs: ["valtimoReadOnlyContent"] }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i5.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i5.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i5.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i5.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "directive", type: i5.ModalHeaderLabel, selector: "[cdsModalHeaderLabel], [ibmModalHeaderLabel]" }, { kind: "component", type: i5.ProgressIndicator, selector: "cds-progress-indicator, ibm-progress-indicator", inputs: ["current", "steps", "translations", "orientation", "skeleton", "spacing"], outputs: ["stepSelected"] }, { kind: "directive", type: i5.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "component", type: i5.Loading, selector: "cds-loading, ibm-loading", inputs: ["title", "isActive", "size", "overlay"] }, { kind: "directive", type: i2$1.ValtimoCdsModalDirective, selector: "[valtimoCdsModal]", inputs: ["minContentHeight"] }, { kind: "component", type: i5.Toggle, selector: "cds-toggle, ibm-toggle", inputs: ["offText", "onText", "label", "size", "hideLabel", "ariaLabel", "skeleton"] }, { kind: "directive", type: i5.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "component", type: ConfigureBuildingBlockMappingsComponent, selector: "valtimo-configure-building-block-mappings" }, { kind: "component", type: SelectPluginConfigurationComponent, selector: "valtimo-select-plugin-configuration" }, { kind: "component", type: SelectPluginActionComponent, selector: "valtimo-select-plugin-action" }, { kind: "component", type: PluginActionConfigurationComponent, selector: "valtimo-plugin-action-configuration", inputs: ["selectedPluginConfiguration$"], outputs: ["valid", "configuration"] }, { kind: "component", type: ChooseProcessLinkTypeComponent, selector: "valtimo-choose-process-link-type" }, { kind: "component", type: SelectFormComponent, selector: "valtimo-select-form" }, { kind: "component", type: SelectFormFlowComponent, selector: "valtimo-select-form-flow" }, { kind: "component", type: SelectUIComponentComponent, selector: "valtimo-select-ui-component" }, { kind: "component", type: SelectBuildingBlockComponent, selector: "valtimo-select-building-block" }, { kind: "component", type: ConfigureBuildingBlockPluginsComponent, selector: "valtimo-configure-building-block-plugins" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ProcessLinkModalComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'valtimo-process-link-modal', template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  class=\"process-link-modal-container\"\n  *ngIf=\"{\n    showModal: showModal$ | async,\n    processStepName: processStepName$ | async,\n    steps: steps$ | async,\n    selectedPluginConfiguration: selectedPluginConfiguration$ | async,\n    currentStepIndex: currentStepIndex$ | async,\n    currentStepId: currentStepId$ | async,\n    showSaveButton: showSaveButton$ | async,\n    enableSaveButton: enableSaveButton$ | async,\n    showBackButton: showBackButton$ | async,\n    showNextButton: showNextButton$ | async,\n    enableNextButton: enableNextButton$ | async,\n    saving: saving$ | async,\n    hideProgressIndicator: hideProgressIndicator$ | async,\n    typeOfSelectedProgressLink: typeOfSelectedProcessLink$ | async,\n    isEditing: isEditing$ | async,\n    isAdHocBuildingBlock: isAdHocBuildingBlock$ | async,\n  } as obs\"\n>\n  <cds-modal valtimoCdsModal [open]=\"obs.showModal\" size=\"lg\" (close)=\"closeModal()\">\n    <cds-modal-header (closeSelect)=\"closeModal()\">\n      <h2 *ngIf=\"!obs.isAdHocBuildingBlock\" cdsModalHeaderLabel>{{ 'processLinkConfiguration.configureStep' | translate }}</h2>\n      <h3 cdsModalHeaderHeading>\n        <ng-container *ngIf=\"obs.isAdHocBuildingBlock; else defaultModalTitle\">\n          {{ 'processLinkConfiguration.buildingBlockActionTitle' | translate: {buildingBlockName: obs.processStepName || '-'} }}\n        </ng-container>\n        <ng-template #defaultModalTitle>\n          {{\n            'processLinkConfiguration.modalTitle'\n                    | translate: {processStepName: obs.processStepName || '-'}\n          }}\n        </ng-template>\n      </h3>\n      <h4 cdsModalHeaderLabel *ngIf=\"obs.typeOfSelectedProgressLink === 'plugin'\">\n        {{\n          'processLinkConfiguration.pluginConfiguration'\n                  | translate: {pluginConfigTitle: obs.selectedPluginConfiguration?.title || '-'}\n        }}\n      </h4>\n      <div class=\"process-link-progress\">\n        <ng-container *ngTemplateOutlet=\"progressIndicator; context: {obs: obs}\"></ng-container>\n      </div>\n    </cds-modal-header>\n    <section cdsModalContent [cdsLayer]=\"1\">\n      <ng-container *ngTemplateOutlet=\"stepContent; context: {obs: obs}\"></ng-container>\n    </section>\n    <ng-template *ngTemplateOutlet=\"footer; context: {obs: obs}\"></ng-template>\n  </cds-modal>\n</div>\n\n<ng-template #progressIndicator let-obs=\"obs\">\n  <cds-progress-indicator\n    *ngIf=\"obs.steps && !obs.hideProgressIndicator\"\n    [steps]=\"obs.steps\"\n    [current]=\"obs.currentStepIndex\"\n    spacing=\"equal\"\n  ></cds-progress-indicator>\n</ng-template>\n\n<ng-template #stepContent let-obs=\"obs\">\n  <div class=\"cds-loading-container\" *ngIf=\"obs.saving\">\n    <cds-loading></cds-loading>\n  </div>\n  <div [ngClass]=\"{hidden: obs.saving}\">\n    <ng-container>\n      <ng-container *ngIf=\"obs.currentStepId === 'chooseProcessLinkType'\">\n        <valtimo-choose-process-link-type></valtimo-choose-process-link-type>\n      </ng-container>\n      <ng-container *ngIf=\"obs.currentStepId === 'selectForm'\">\n        <valtimo-select-form></valtimo-select-form>\n        <br />\n        <cds-toggle\n          *ngIf=\"showViewModelToggle$ | async\"\n          [label]=\"'processLinkConfiguration.toggleViewModel.title' | translate\"\n          [onText]=\"'processLinkConfiguration.toggleViewModel.checkboxDescription' | translate\"\n          [offText]=\"'processLinkConfiguration.toggleViewModel.checkboxDescription' | translate\"\n          [checked]=\"viewModelEnabled$ | async\"\n          (checkedChange)=\"toggleCheckedChange($event)\"\n        ></cds-toggle>\n      </ng-container>\n      <ng-container *ngIf=\"obs.currentStepId === 'selectFormFlow'\">\n        <valtimo-select-form-flow></valtimo-select-form-flow>\n      </ng-container>\n\n      <ng-container\n        *ngIf=\"\n          obs.currentStepId === 'choosePluginConfiguration' ||\n          obs.currentStepId === 'choosePluginDefinition'\n        \"\n      >\n        <valtimo-select-plugin-configuration></valtimo-select-plugin-configuration>\n      </ng-container>\n\n      <ng-container *ngIf=\"obs.currentStepId === 'selectBuildingBlock'\">\n        <valtimo-select-building-block></valtimo-select-building-block>\n      </ng-container>\n\n      <ng-container *ngIf=\"obs.currentStepId === 'choosePluginAction'\">\n        <valtimo-select-plugin-action></valtimo-select-plugin-action>\n      </ng-container>\n\n      <ng-container *ngIf=\"obs.currentStepId === 'configurePluginAction'\">\n        <valtimo-plugin-action-configuration\n          [selectedPluginConfiguration$]=\"selectedPluginConfiguration$\"\n        ></valtimo-plugin-action-configuration>\n      </ng-container>\n\n      <ng-container *ngIf=\"obs.currentStepId === 'configureBuildingBlockPlugins'\">\n        <valtimo-configure-building-block-plugins></valtimo-configure-building-block-plugins>\n      </ng-container>\n\n      <ng-container *ngIf=\"obs.currentStepId === 'configureBuildingBlockMappings'\">\n        <valtimo-configure-building-block-mappings></valtimo-configure-building-block-mappings>\n      </ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"obs.currentStepId === 'uiComponent'\">\n      <valtimo-select-ui-component></valtimo-select-ui-component>\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #footer let-obs=\"obs\">\n  <cds-modal-footer *ngIf=\"!obs.saving\">\n    <button cdsButton=\"ghost\" (click)=\"closeModal()\" [disabled]=\"obs.disabled\">\n      {{ 'processLinkConfiguration.cancel' | translate }}\n    </button>\n    <div class=\"footer-spacer\"></div>\n    <button\n      cdsButton=\"danger--primary\"\n      *ngIf=\"obs.isEditing\"\n      (click)=\"unlinkButtonClick()\"\n    >\n      {{ 'processLinkConfiguration.unlink' | translate }}\n    </button>\n    <button\n      *ngIf=\"obs.showBackButton && !obs.saving\"\n      cdsButton=\"secondary\"\n      (click)=\"backButtonClick()\"\n    >\n      {{ 'processLinkConfiguration.back' | translate }}\n    </button>\n    <button\n      cdsButton=\"primary\"\n      *ngIf=\"obs.showNextButton && !obs.saving\"\n      [disabled]=\"!obs.enableNextButton\"\n      (click)=\"nextButtonClick()\"\n    >\n      {{ 'processLinkConfiguration.next' | translate }}\n    </button>\n    <button\n      cdsButton=\"primary\"\n      *ngIf=\"obs.showSaveButton && !obs.saving\"\n      [disabled]=\"!obs.enableSaveButton\"\n      (click)=\"saveButtonClick()\"\n    >\n      {{ 'processLinkConfiguration.complete' | translate }}\n    </button>\n  </cds-modal-footer>\n</ng-template>\n", styles: ["::ng-deep .process-link-modal-container .cds--modal-container{max-width:960px;min-height:70%}::ng-deep .process-link-modal-container .cds--modal-footer .footer-spacer{flex:0 1 50%}.cds-loading-container{position:absolute;top:50px;padding-bottom:50px;left:0;width:100%;height:calc(100% - 50px);display:flex;justify-content:center;align-items:center;background:var(--cds-layer);z-index:99;box-sizing:border-box}.process-link-progress{width:100%;margin-top:32px;margin-bottom:16px}.hidden{visibility:hidden}\n/*!\n * Copyright 2015-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+            args: [{ standalone: false, selector: 'valtimo-process-link-modal', template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  class=\"process-link-modal-container\"\n  *ngIf=\"{\n    showModal: showModal$ | async,\n    processStepName: processStepName$ | async,\n    steps: steps$ | async,\n    selectedPluginConfiguration: selectedPluginConfiguration$ | async,\n    currentStepIndex: currentStepIndex$ | async,\n    currentStepId: currentStepId$ | async,\n    showSaveButton: showSaveButton$ | async,\n    enableSaveButton: enableSaveButton$ | async,\n    showBackButton: showBackButton$ | async,\n    showNextButton: showNextButton$ | async,\n    enableNextButton: enableNextButton$ | async,\n    saving: saving$ | async,\n    hideProgressIndicator: hideProgressIndicator$ | async,\n    typeOfSelectedProgressLink: typeOfSelectedProcessLink$ | async,\n    isEditing: isEditing$ | async,\n    isAdHocBuildingBlock: isAdHocBuildingBlock$ | async,\n    readOnly: readOnly$ | async,\n  } as obs\"\n>\n  <cds-modal valtimoCdsModal [open]=\"obs.showModal\" size=\"lg\" (close)=\"closeModal()\">\n    <cds-modal-header (closeSelect)=\"closeModal()\">\n      <h2 *ngIf=\"!obs.isAdHocBuildingBlock\" cdsModalHeaderLabel>\n        {{ 'processLinkConfiguration.configureStep' | translate }}\n      </h2>\n      <h3 cdsModalHeaderHeading [attr.data-test-id]=\"testIds.heading\">\n        <ng-container *ngIf=\"obs.isAdHocBuildingBlock; else defaultModalTitle\">\n          {{\n            'processLinkConfiguration.buildingBlockActionTitle'\n              | translate: {buildingBlockName: obs.processStepName || '-'}\n          }}\n        </ng-container>\n        <ng-template #defaultModalTitle>\n          {{\n            'processLinkConfiguration.modalTitle'\n              | translate: {processStepName: obs.processStepName || '-'}\n          }}\n        </ng-template>\n      </h3>\n      <h4\n        cdsModalHeaderLabel\n        *ngIf=\"obs.typeOfSelectedProgressLink === 'plugin'\"\n        [attr.data-test-id]=\"testIds.pluginConfigurationLabel\"\n      >\n        {{\n          'processLinkConfiguration.pluginConfiguration'\n            | translate: {pluginConfigTitle: obs.selectedPluginConfiguration?.title || '-'}\n        }}\n      </h4>\n      <div class=\"process-link-progress\">\n        <ng-container *ngTemplateOutlet=\"progressIndicator; context: {obs: obs}\"></ng-container>\n      </div>\n    </cds-modal-header>\n    <section cdsModalContent [cdsLayer]=\"1\" [valtimoReadOnlyContent]=\"obs.readOnly\">\n      <ng-container *ngTemplateOutlet=\"stepContent; context: {obs: obs}\"></ng-container>\n    </section>\n    <ng-template *ngTemplateOutlet=\"footer; context: {obs: obs}\"></ng-template>\n  </cds-modal>\n</div>\n\n<ng-template #progressIndicator let-obs=\"obs\">\n  <cds-progress-indicator\n    *ngIf=\"obs.steps && !obs.hideProgressIndicator\"\n    [attr.data-test-id]=\"testIds.progressIndicator\"\n    [steps]=\"obs.steps\"\n    [current]=\"obs.currentStepIndex\"\n    spacing=\"equal\"\n  ></cds-progress-indicator>\n</ng-template>\n\n<ng-template #stepContent let-obs=\"obs\">\n  <div class=\"cds-loading-container\" *ngIf=\"obs.saving\">\n    <cds-loading></cds-loading>\n  </div>\n  <div [ngClass]=\"{hidden: obs.saving}\">\n    <ng-container>\n      <ng-container *ngIf=\"obs.currentStepId === 'chooseProcessLinkType'\">\n        <valtimo-choose-process-link-type></valtimo-choose-process-link-type>\n      </ng-container>\n      <ng-container *ngIf=\"obs.currentStepId === 'selectForm'\">\n        <valtimo-select-form></valtimo-select-form>\n        <br />\n        <cds-toggle\n          *ngIf=\"showViewModelToggle$ | async\"\n          [label]=\"'processLinkConfiguration.toggleViewModel.title' | translate\"\n          [onText]=\"'processLinkConfiguration.toggleViewModel.checkboxDescription' | translate\"\n          [offText]=\"'processLinkConfiguration.toggleViewModel.checkboxDescription' | translate\"\n          [checked]=\"viewModelEnabled$ | async\"\n          (checkedChange)=\"toggleCheckedChange($event)\"\n        ></cds-toggle>\n      </ng-container>\n      <ng-container *ngIf=\"obs.currentStepId === 'selectFormFlow'\">\n        <valtimo-select-form-flow></valtimo-select-form-flow>\n      </ng-container>\n\n      <ng-container\n        *ngIf=\"\n          obs.currentStepId === 'choosePluginConfiguration' ||\n          obs.currentStepId === 'choosePluginDefinition'\n        \"\n      >\n        <valtimo-select-plugin-configuration></valtimo-select-plugin-configuration>\n      </ng-container>\n\n      <ng-container *ngIf=\"obs.currentStepId === 'selectBuildingBlock'\">\n        <valtimo-select-building-block></valtimo-select-building-block>\n      </ng-container>\n\n      <ng-container *ngIf=\"obs.currentStepId === 'choosePluginAction'\">\n        <valtimo-select-plugin-action></valtimo-select-plugin-action>\n      </ng-container>\n\n      <ng-container *ngIf=\"obs.currentStepId === 'configurePluginAction'\">\n        <valtimo-plugin-action-configuration\n          [selectedPluginConfiguration$]=\"selectedPluginConfiguration$\"\n        ></valtimo-plugin-action-configuration>\n      </ng-container>\n\n      <ng-container *ngIf=\"obs.currentStepId === 'configureBuildingBlockPlugins'\">\n        <valtimo-configure-building-block-plugins></valtimo-configure-building-block-plugins>\n      </ng-container>\n\n      <ng-container *ngIf=\"obs.currentStepId === 'configureBuildingBlockMappings'\">\n        <valtimo-configure-building-block-mappings></valtimo-configure-building-block-mappings>\n      </ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"obs.currentStepId === 'uiComponent'\">\n      <valtimo-select-ui-component></valtimo-select-ui-component>\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #footer let-obs=\"obs\">\n  <cds-modal-footer *ngIf=\"!obs.saving\">\n    <button\n      cdsButton=\"ghost\"\n      [attr.data-test-id]=\"testIds.cancelButton\"\n      (click)=\"closeModal()\"\n      [disabled]=\"obs.disabled\"\n    >\n      {{ (obs.readOnly ? 'interface.close' : 'processLinkConfiguration.cancel') | translate }}\n    </button>\n    <div class=\"footer-spacer\"></div>\n    <button\n      cdsButton=\"danger--primary\"\n      *ngIf=\"obs.isEditing && !obs.readOnly\"\n      [attr.data-test-id]=\"testIds.unlinkButton\"\n      (click)=\"unlinkButtonClick()\"\n    >\n      {{ 'processLinkConfiguration.unlink' | translate }}\n    </button>\n    <button\n      *ngIf=\"obs.showBackButton && !obs.saving && !obs.readOnly\"\n      cdsButton=\"secondary\"\n      [attr.data-test-id]=\"testIds.backButton\"\n      (click)=\"backButtonClick()\"\n    >\n      {{ 'processLinkConfiguration.back' | translate }}\n    </button>\n    <button\n      cdsButton=\"primary\"\n      *ngIf=\"obs.showNextButton && !obs.saving && !obs.readOnly\"\n      [attr.data-test-id]=\"testIds.nextButton\"\n      [disabled]=\"!obs.enableNextButton\"\n      (click)=\"nextButtonClick()\"\n    >\n      {{ 'processLinkConfiguration.next' | translate }}\n    </button>\n    <button\n      cdsButton=\"primary\"\n      *ngIf=\"obs.showSaveButton && !obs.saving && !obs.readOnly\"\n      [attr.data-test-id]=\"testIds.completeButton\"\n      [disabled]=\"!obs.enableSaveButton\"\n      (click)=\"saveButtonClick()\"\n    >\n      {{ 'processLinkConfiguration.complete' | translate }}\n    </button>\n  </cds-modal-footer>\n</ng-template>\n", styles: ["::ng-deep .process-link-modal-container .cds--modal-container{max-width:960px;min-height:70%}::ng-deep .process-link-modal-container .cds--modal-footer .footer-spacer{flex:0 1 50%}.cds-loading-container{position:absolute;top:50px;padding-bottom:50px;left:0;width:100%;height:calc(100% - 50px);display:flex;justify-content:center;align-items:center;background:var(--cds-layer);z-index:99;box-sizing:border-box}.process-link-progress{width:100%;margin-top:32px;margin-bottom:16px}.hidden{visibility:hidden}\n/*!\n * Copyright 2015-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
         }], ctorParameters: () => [{ type: ProcessLinkStateService }, { type: ProcessLinkStepService }, { type: ProcessLinkButtonService }, { type: PluginStateService }, { type: ProcessLinkStateService }, { type: i1.ConfigService }] });
 
 /*
@@ -4170,7 +4455,7 @@ const routes = [
 ];
 class ProcessLinkRoutingModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ProcessLinkRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.25", ngImport: i0, type: ProcessLinkRoutingModule, imports: [i3$2.RouterModule], exports: [RouterModule] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.25", ngImport: i0, type: ProcessLinkRoutingModule, imports: [i3$1.RouterModule], exports: [RouterModule] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ProcessLinkRoutingModule, imports: [RouterModule.forChild(routes), RouterModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ProcessLinkRoutingModule, decorators: [{
@@ -4499,7 +4784,7 @@ class FormFlowComponent {
         this.disabled$.next(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FormFlowComponent, deps: [{ token: FormFlowService }, { token: i2$1.ValtimoModalService }, { token: i3.TranslateService }, { token: i1.ConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: FormFlowComponent, isStandalone: false, selector: "valtimo-form-flow", inputs: { formIoFormData: "formIoFormData", formFlowInstanceId: "formFlowInstanceId" }, outputs: { formFlowComplete: "formFlowComplete", formFlowChange: "formFlowChange" }, viewQueries: [{ propertyName: "form", first: true, predicate: ["form"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  *ngIf=\"{\n    breadcrumbs: breadcrumbs$ | async,\n    currentStepIndex: currentStepIndex$ | async,\n    enableFormFlowBreadcrumbs: enableFormFlowBreadcrumbs$ | async,\n    formFlowInstanceId: formFlowInstanceId$ | async,\n  } as obs\"\n>\n  <div *ngIf=\"formDefinition && (formFlowStepType$ | async) === 'form'\">\n    <div *ngIf=\"obs.enableFormFlowBreadcrumbs\" class=\"form-flow__progress-bar-indicator\">\n      <cds-progress-indicator\n        [spacing]=\"'equal'\"\n        [skeleton]=\"obs.breadcrumbs.length === 0\"\n        [current]=\"obs.currentStepIndex\"\n        [steps]=\"obs.breadcrumbs\"\n        (stepSelected)=\"onStepSelected($event)\"\n      >\n      </cds-progress-indicator>\n    </div>\n\n    <valtimo-form-io\n      #form\n      [form]=\"formDefinition\"\n      (submit)=\"onSubmit($event)\"\n      (change)=\"onChange($event)\"\n      (event)=\"onEvent($event)\"\n      [options]=\"formioOptions\"\n    ></valtimo-form-io>\n  </div>\n\n  <div *ngIf=\"(formFlowStepType$ | async) === 'custom-component'\">\n    <valtimo-form-flow-configuration-container\n      [componentId]=\"FormFlowCustomComponentId$ | async\"\n      [formFlowInstanceId]=\"obs.formFlowInstanceId\"\n      [disabled]=\"disabled$ | async\"\n      (submitEvent)=\"onSubmit($event)\"\n      (changeEvent)=\"onChange($event)\"\n    >\n    </valtimo-form-flow-configuration-container>\n  </div>\n</div>\n", styles: [".form-flow__progress-bar-indicator{height:64px;overflow-x:auto;-ms-overflow-style:none;scrollbar-width:none}.form-flow__progress-bar-indicator ::-webkit-scrollbar{display:none}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.ProgressIndicator, selector: "cds-progress-indicator, ibm-progress-indicator", inputs: ["current", "steps", "translations", "orientation", "skeleton", "spacing"], outputs: ["stepSelected"] }, { kind: "component", type: i2$1.FormioComponent, selector: "valtimo-form-io", inputs: ["options", "submission", "form", "readOnly", "errors", "formRefresh$"], outputs: ["submit", "change", "event"] }, { kind: "component", type: FormFlowConfigurationContainerComponent, selector: "valtimo-form-flow-configuration-container", inputs: ["disabled", "componentId", "formFlowInstanceId"], outputs: ["changeEvent", "submitEvent"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: FormFlowComponent, isStandalone: false, selector: "valtimo-form-flow", inputs: { formIoFormData: "formIoFormData", formFlowInstanceId: "formFlowInstanceId" }, outputs: { formFlowComplete: "formFlowComplete", formFlowChange: "formFlowChange" }, viewQueries: [{ propertyName: "form", first: true, predicate: ["form"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  *ngIf=\"{\n    breadcrumbs: breadcrumbs$ | async,\n    currentStepIndex: currentStepIndex$ | async,\n    enableFormFlowBreadcrumbs: enableFormFlowBreadcrumbs$ | async,\n    formFlowInstanceId: formFlowInstanceId$ | async,\n  } as obs\"\n>\n  <div *ngIf=\"formDefinition && (formFlowStepType$ | async) === 'form'\">\n    <div *ngIf=\"obs.enableFormFlowBreadcrumbs\" class=\"form-flow__progress-bar-indicator\">\n      <cds-progress-indicator\n        [spacing]=\"'equal'\"\n        [skeleton]=\"obs.breadcrumbs.length === 0\"\n        [current]=\"obs.currentStepIndex\"\n        [steps]=\"obs.breadcrumbs\"\n        (stepSelected)=\"onStepSelected($event)\"\n      >\n      </cds-progress-indicator>\n    </div>\n\n    <valtimo-form-io\n      #form\n      [form]=\"formDefinition\"\n      (submit)=\"onSubmit($event)\"\n      (change)=\"onChange($event)\"\n      (event)=\"onEvent($event)\"\n      [options]=\"formioOptions\"\n    ></valtimo-form-io>\n  </div>\n\n  <div *ngIf=\"(formFlowStepType$ | async) === 'custom-component'\">\n    <valtimo-form-flow-configuration-container\n      [componentId]=\"FormFlowCustomComponentId$ | async\"\n      [formFlowInstanceId]=\"obs.formFlowInstanceId\"\n      [disabled]=\"disabled$ | async\"\n      (submitEvent)=\"onSubmit($event)\"\n      (changeEvent)=\"onChange($event)\"\n    >\n    </valtimo-form-flow-configuration-container>\n  </div>\n</div>\n", styles: [".form-flow__progress-bar-indicator{height:64px;overflow-x:auto;-ms-overflow-style:none;scrollbar-width:none}.form-flow__progress-bar-indicator ::-webkit-scrollbar{display:none}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.ProgressIndicator, selector: "cds-progress-indicator, ibm-progress-indicator", inputs: ["current", "steps", "translations", "orientation", "skeleton", "spacing"], outputs: ["stepSelected"] }, { kind: "component", type: i2$1.FormioComponent, selector: "valtimo-form-io", inputs: ["options", "submission", "form", "readOnly", "errors", "formRefresh$"], outputs: ["submit", "change", "event"] }, { kind: "component", type: FormFlowConfigurationContainerComponent, selector: "valtimo-form-flow-configuration-container", inputs: ["disabled", "componentId", "formFlowInstanceId"], outputs: ["changeEvent", "submitEvent"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FormFlowComponent, decorators: [{
             type: Component,
@@ -4549,6 +4834,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
  * limitations under the License.
  */
 
+/*
+ * Copyright 2015-2026 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
 /*
  * Copyright 2015-2025 Ritense BV, the Netherlands.
  *
@@ -4581,7 +4882,8 @@ class ProcessLinkModule {
             SelectUIComponentComponent,
             ImportPluginConfigurationComponent,
             SelectBuildingBlockComponent,
-            ConfigureBuildingBlockPluginsComponent], imports: [CommonModule,
+            ConfigureBuildingBlockPluginsComponent], imports: [ReadOnlyContentDirective,
+            CommonModule,
             ProcessLinkRoutingModule,
             FormsModule,
             ReactiveFormsModule,
@@ -4688,6 +4990,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                         ConfigureBuildingBlockPluginsComponent,
                     ],
                     imports: [
+                        ReadOnlyContentDirective,
                         CommonModule,
                         ProcessLinkRoutingModule,
                         FormsModule,
@@ -4861,5 +5164,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BB_MAPPINGS_TEST_IDS, BuildingBlockStateService, ChooseProcessLinkTypeComponent, FORM_CUSTOM_COMPONENT_TOKEN, FORM_FLOW_COMPONENT_TOKEN, FormFlowComponent, FormFlowComponentService, FormFlowService, PluginActionConfigurationComponent, PluginStateService, ProcessLinkBuildingBlockApiService, ProcessLinkButtonService, ProcessLinkComponent, ProcessLinkModalComponent, ProcessLinkModule, ProcessLinkService, ProcessLinkStateService, ProcessLinkStepService, SelectPluginActionComponent, SelectPluginConfigurationComponent, UNSUPPORTED_PROCESS_LINK_TYPES_IN_BUILDING_BLOCK, UrlResolverService, UrlValidatorService, ensureDocPrefix, formSizeToCarbonModalSizeMap };
+export { BB_MAPPINGS_TEST_IDS, BuildingBlockStateService, ChooseProcessLinkTypeComponent, FORM_CUSTOM_COMPONENT_TOKEN, FormFlowComponent, FormFlowService, PLUGIN_ACTION_CONFIGURATION_TEST_IDS, PROCESS_LINK_MODAL_TEST_IDS, PROCESS_LINK_TYPE_BUTTON_TEST_ID_PREFIX, PROCESS_LINK_TYPE_CHOOSER_TEST_IDS, PluginActionConfigurationComponent, PluginStateService, ProcessLinkBuildingBlockApiService, ProcessLinkButtonService, ProcessLinkComponent, ProcessLinkModalComponent, ProcessLinkModule, ProcessLinkService, ProcessLinkStateService, ProcessLinkStepService, SELECT_PLUGIN_ACTION_TEST_IDS, SELECT_PLUGIN_ACTION_TILE_TEST_ID_PREFIX, SELECT_PLUGIN_CONFIGURATION_ROW_TEST_ID_PREFIX, SELECT_PLUGIN_CONFIGURATION_TEST_IDS, SelectPluginActionComponent, SelectPluginConfigurationComponent, UNSUPPORTED_PROCESS_LINK_TYPES_IN_BUILDING_BLOCK, UrlResolverService, UrlValidatorService, ensureDocPrefix, formSizeToCarbonModalSizeMap };
 //# sourceMappingURL=valtimo-process-link.mjs.map