@valtimo/process-link 12.0.0 → 12.1.0

package/fesm2022/valtimo-process-link.mjs

@@ -10,15 +10,15 @@ import * as i1$1 from '@valtimo/plugin';
 import { PluginTranslatePipeModule, PluginConfigurationContainerModule } from '@valtimo/plugin';
 import * as i6 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
-import * as i2$1 from '@angular/common';
+import * as i3 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i3 from 'carbon-components-angular';
-import { ModalModule as ModalModule$1, ProgressIndicatorModule, ButtonModule as ButtonModule$1, IconModule, ComboBoxModule, InputModule, LoadingModule, StructuredListModule, TilesModule, SelectModule } from 'carbon-components-angular';
+import * as i4 from 'carbon-components-angular';
+import { ModalModule as ModalModule$1, ProgressIndicatorModule, ButtonModule as ButtonModule$1, IconModule, ComboBoxModule, InputModule, LoadingModule, StructuredListModule, TilesModule, SelectModule, ToggleModule } from 'carbon-components-angular';
 import BpmnJS from 'bpmn-js/dist/bpmn-navigated-viewer.production.min.js';
 import * as i1$2 from '@valtimo/process';
-import * as i2$2 from '@angular/router';
+import * as i2$1 from '@angular/router';
 import { RouterModule } from '@angular/router';
-import * as i2$3 from '@valtimo/components';
+import * as i2$2 from '@valtimo/components';
 import { FormioOptionsImpl, ModalModule, SearchableDropdownSelectModule, StepperModule, VModalModule, VCardModule, ParagraphModule, ButtonModule, TitleModule, TooltipModule, TooltipIconModule, FormIoModule, ValtimoCdsModalDirectiveModule, RenderInPageHeaderDirectiveModule } from '@valtimo/components';
 import * as i5 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
@@ -630,6 +630,7 @@ class ProcessLinkStateService {
         this._availableProcessLinkTypes$ = new BehaviorSubject([]);
         this._elementName$ = new BehaviorSubject('');
         this._selectedProcessLinkTypeId$ = new BehaviorSubject('');
+        this._viewModelEnabled$ = new BehaviorSubject(false);
         this._saving$ = new BehaviorSubject(false);
         this._modalParams$ = new BehaviorSubject(undefined);
         this._selectedProcessLink$ = new BehaviorSubject(undefined);
@@ -662,6 +663,12 @@ class ProcessLinkStateService {
         this._selectedProcessLinkTypeId$.next(processLinkTypeId);
         this.processLinkStepService.setProcessLinkTypeSteps(processLinkTypeId, hasOneOption);
     }
+    setViewModelEnabled(viewModelEnabled) {
+        this._viewModelEnabled$.next(viewModelEnabled);
+    }
+    get viewModelEnabled$() {
+        return this._viewModelEnabled$.asObservable();
+    }
     clearSelectedProcessLinkType() {
         this._selectedProcessLinkTypeId$.next('');
     }
@@ -684,6 +691,7 @@ class ProcessLinkStateService {
     selectProcessLink(processLink) {
         this._selectedProcessLink$.next(processLink);
         this.pluginStateService.selectProcessLink(processLink);
+        this.setViewModelEnabled(processLink.viewModelEnabled);
     }
     deselectProcessLink() {
         this._selectedProcessLink$.next(undefined);
@@ -858,7 +866,7 @@ class SelectPluginConfigurationComponent {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: SelectPluginConfigurationComponent, deps: [{ token: i1$1.PluginManagementService }, { token: PluginStateService }, { token: i1$1.PluginService }, { token: ProcessLinkStateService }, { token: ProcessLinkButtonService }, { token: ProcessLinkStepService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: SelectPluginConfigurationComponent, selector: "valtimo-select-plugin-configuration", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 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=\"pluginConfigurations$ | async as pluginConfigurations; else loading\">\n  <p class=\"step-description\">\n    {{ 'processLinkConfiguration.choosePluginConfigurationDescription' | 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          'pluginManagement.labels.configurationName' | 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 pluginConfiguration of pluginConfigurations\"\n        [value]=\"pluginConfiguration\"\n      >\n        <cds-list-column>\n          <div *ngIf=\"pluginConfiguration.pluginLogoBase64\">\n            <img\n              [src]=\"pluginConfiguration.pluginLogoBase64\"\n              [title]=\"'title' | pluginTranslate: pluginConfiguration.pluginDefinition.key | async\"\n              class=\"plugin-configuration-logo\"\n            /></div\n        ></cds-list-column>\n        <cds-list-column>{{ pluginConfiguration.title }}</cds-list-column>\n        <cds-list-column>\n          {{ 'description' | pluginTranslate: pluginConfiguration.pluginDefinition.key | async }}\n        </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}.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}.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-2024 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: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.Loading, selector: "cds-loading, ibm-loading", inputs: ["title", "isActive", "size", "overlay"] }, { kind: "component", type: i3.StructuredList, selector: "cds-structured-list, ibm-structured-list", inputs: ["selection", "flushed", "condensed", "name", "skeleton"], outputs: ["selected"] }, { kind: "component", type: i3.ListRow, selector: "cds-list-row, ibm-list-row", inputs: ["selected", "label", "value"], outputs: ["change"] }, { kind: "component", type: i3.ListHeader, selector: "cds-list-header, ibm-list-header", inputs: ["skeleton"] }, { kind: "component", type: i3.ListColumn, selector: "cds-list-column, ibm-list-column", inputs: ["skeleton", "nowrap"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1$1.PluginTranslatePipe, name: "pluginTranslate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: SelectPluginConfigurationComponent, selector: "valtimo-select-plugin-configuration", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 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=\"pluginConfigurations$ | async as pluginConfigurations; else loading\">\n  <p class=\"step-description\">\n    {{ 'processLinkConfiguration.choosePluginConfigurationDescription' | 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          'pluginManagement.labels.configurationName' | 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 pluginConfiguration of pluginConfigurations\"\n        [value]=\"pluginConfiguration\"\n      >\n        <cds-list-column>\n          <div *ngIf=\"pluginConfiguration.pluginLogoBase64\">\n            <img\n              [src]=\"pluginConfiguration.pluginLogoBase64\"\n              [title]=\"'title' | pluginTranslate: pluginConfiguration.pluginDefinition.key | async\"\n              class=\"plugin-configuration-logo\"\n            /></div\n        ></cds-list-column>\n        <cds-list-column>{{ pluginConfiguration.title }}</cds-list-column>\n        <cds-list-column>\n          {{ 'description' | pluginTranslate: pluginConfiguration.pluginDefinition.key | async }}\n        </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}.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}.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-2024 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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.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.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1$1.PluginTranslatePipe, name: "pluginTranslate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: SelectPluginConfigurationComponent, decorators: [{
             type: Component,
@@ -923,7 +931,7 @@ class SelectPluginActionComponent {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: SelectPluginActionComponent, deps: [{ token: ProcessLinkButtonService }, { token: i1$1.PluginManagementService }, { token: PluginStateService }, { token: ProcessLinkStepService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: SelectPluginActionComponent, selector: "valtimo-select-plugin-action", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 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-2024 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: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.Loading, selector: "cds-loading, ibm-loading", inputs: ["title", "isActive", "size", "overlay"] }, { kind: "component", type: i3.SelectionTile, selector: "cds-selection-tile, ibm-selection-tile", inputs: ["theme", "id", "selected", "value", "disabled"], outputs: ["change"] }, { kind: "component", type: i3.TileGroup, selector: "cds-tile-group, ibm-tile-group", inputs: ["name", "multiple", "legend"], outputs: ["selected"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1$1.PluginTranslatePipe, name: "pluginTranslate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: SelectPluginActionComponent, selector: "valtimo-select-plugin-action", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 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-2024 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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.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.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1$1.PluginTranslatePipe, name: "pluginTranslate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: SelectPluginActionComponent, decorators: [{
             type: Component,
@@ -1038,7 +1046,7 @@ class PluginActionConfigurationComponent {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", 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: "17.3.3", type: PluginActionConfigurationComponent, selector: "valtimo-plugin-action-configuration", outputs: { valid: "valid", configuration: "configuration" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 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-plugin-configuration-container\n  [pluginDefinitionKey]=\"pluginDefinitionKey$ | async\"\n  [functionKey]=\"functionKey$ | async\"\n  [save$]=\"save$\"\n  [disabled$]=\"saving$\"\n  [prefillConfiguration$]=\"prefillConfiguration$\"\n  (valid)=\"onValid($event)\"\n  (configuration)=\"onConfiguration($event)\"\n  type=\"function\"\n></valtimo-plugin-configuration-container>\n", styles: ["/*!\n * Copyright 2015-2024 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$", "prefillConfiguration$"], outputs: ["valid", "configuration"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: PluginActionConfigurationComponent, selector: "valtimo-plugin-action-configuration", outputs: { valid: "valid", configuration: "configuration" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 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-plugin-configuration-container\n  [pluginDefinitionKey]=\"pluginDefinitionKey$ | async\"\n  [functionKey]=\"functionKey$ | async\"\n  [save$]=\"save$\"\n  [disabled$]=\"saving$\"\n  [prefillConfiguration$]=\"prefillConfiguration$\"\n  (valid)=\"onValid($event)\"\n  (configuration)=\"onConfiguration($event)\"\n  type=\"function\"\n></valtimo-plugin-configuration-container>\n", styles: ["/*!\n * Copyright 2015-2024 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$", "prefillConfiguration$"], outputs: ["valid", "configuration"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: PluginActionConfigurationComponent, decorators: [{
             type: Component,
@@ -1173,13 +1181,13 @@ class FormLinkProcessDiagramComponent {
         }
         this.version = +version;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: FormLinkProcessDiagramComponent, deps: [{ token: i1$2.ProcessService }, { token: i2$2.ActivatedRoute }, { token: i2$3.PageTitleService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: FormLinkProcessDiagramComponent, 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-2024 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-2024 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: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$3.RenderInPageHeaderDirective, selector: "[renderInPageHeader]", inputs: ["fullWidth"] }, { kind: "component", type: i3.Select, selector: "cds-select, ibm-select", inputs: ["display", "label", "helperText", "invalidText", "warn", "warnText", "id", "size", "disabled", "skeleton", "invalid", "theme", "ariaLabel", "value"], outputs: ["valueChange"] }, { kind: "directive", type: i3.Option, selector: "option" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: FormLinkProcessDiagramComponent, deps: [{ token: i1$2.ProcessService }, { token: i2$1.ActivatedRoute }, { token: i2$2.PageTitleService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: FormLinkProcessDiagramComponent, 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-2024 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-2024 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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.RenderInPageHeaderDirective, selector: "[renderInPageHeader]", inputs: ["fullWidth"] }, { kind: "component", type: i4.Select, selector: "cds-select, ibm-select", inputs: ["display", "label", "helperText", "invalidText", "warn", "warnText", "id", "size", "disabled", "skeleton", "invalid", "theme", "ariaLabel", "value"], outputs: ["valueChange"] }, { kind: "directive", type: i4.Option, selector: "option" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: FormLinkProcessDiagramComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-form-link-process-diagram', template: "<!--\n  ~ Copyright 2015-2024 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-2024 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.ProcessService }, { type: i2$2.ActivatedRoute }, { type: i2$3.PageTitleService }], propDecorators: { el: [{
+        }], ctorParameters: () => [{ type: i1$2.ProcessService }, { type: i2$1.ActivatedRoute }, { type: i2$2.PageTitleService }], propDecorators: { el: [{
                 type: ViewChild,
                 args: ['ref']
             }], bpmnElementModalOpen: [{
@@ -1212,7 +1220,7 @@ class ChooseProcessLinkTypeComponent {
         this.processLinkStateService.selectProcessLinkType(processLinkTypeId);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: ChooseProcessLinkTypeComponent, deps: [{ token: ProcessLinkStateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: ChooseProcessLinkTypeComponent, selector: "valtimo-choose-process-link-type", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 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]=\"'processLinkTypeDisabledTooltip.' + 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        </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-2024 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: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "directive", type: i2$3.TooltipDirective, selector: "[vTooltip]", inputs: ["vTooltip", "onBottom", "tooltipDisabled"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: ChooseProcessLinkTypeComponent, selector: "valtimo-choose-process-link-type", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 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]=\"'processLinkTypeDisabledTooltip.' + 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        </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-2024 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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.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$2.TooltipDirective, selector: "[vTooltip]", inputs: ["vTooltip", "onBottom", "tooltipDisabled"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: ChooseProcessLinkTypeComponent, decorators: [{
             type: Component,
@@ -1295,10 +1303,13 @@ class SelectFormComponent {
         });
     }
     updateProcessLink() {
-        this.stateService.selectedProcessLink$.pipe(take(1)).subscribe(selectedProcessLink => {
+        combineLatest([this.stateService.selectedProcessLink$, this.stateService.viewModelEnabled$])
+            .pipe(take(1))
+            .subscribe(([selectedProcessLink, viewModelEnabled]) => {
             const updateProcessLinkRequest = {
                 id: selectedProcessLink.id,
                 formDefinitionId: this._selectedFormDefinition.id,
+                viewModelEnabled,
             };
             this.processLinkService.updateProcessLink(updateProcessLinkRequest).subscribe(() => {
                 this.stateService.closeModal();
@@ -1308,13 +1319,18 @@ class SelectFormComponent {
         });
     }
     saveNewProcessLink() {
-        combineLatest([this.stateService.modalParams$, this.stateService.selectedProcessLinkTypeId$])
-            .pipe(take(1), switchMap(([modalParams, processLinkTypeId]) => this.processLinkService.saveProcessLink({
+        combineLatest([
+            this.stateService.modalParams$,
+            this.stateService.selectedProcessLinkTypeId$,
+            this.stateService.viewModelEnabled$,
+        ])
+            .pipe(take(1), switchMap(([modalParams, processLinkTypeId, viewModelEnabled]) => this.processLinkService.saveProcessLink({
             formDefinitionId: this._selectedFormDefinition.id,
             activityType: modalParams.element.activityListenerType,
             processDefinitionId: modalParams.processDefinitionId,
             processLinkType: processLinkTypeId,
             activityId: modalParams.element.id,
+            viewModelEnabled,
         })))
             .subscribe(() => {
             this.stateService.closeModal();
@@ -1323,7 +1339,7 @@ class SelectFormComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: SelectFormComponent, deps: [{ token: i1$3.FormService }, { token: ProcessLinkStateService }, { token: ProcessLinkService }, { token: ProcessLinkButtonService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: SelectFormComponent, selector: "valtimo-select-form", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 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  </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-2024 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: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.ComboBox, selector: "cds-combo-box, ibm-combo-box", inputs: ["placeholder", "openMenuAria", "closeMenuAria", "clearSelectionsTitle", "clearSelectionsAria", "clearSelectionTitle", "clearSelectionAria", "id", "items", "type", "size", "itemValueKey", "label", "helperText", "appendInline", "invalid", "invalidText", "warn", "warnText", "maxLength", "theme", "selectionFeedback", "autocomplete", "dropUp", "disabled"], outputs: ["selected", "submit", "close", "search", "clear"] }, { kind: "component", type: i5$1.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: SelectFormComponent, selector: "valtimo-select-form", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 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  </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-2024 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.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", "items", "type", "size", "itemValueKey", "label", "helperText", "appendInline", "invalid", "invalidText", "warn", "warnText", "maxLength", "theme", "selectionFeedback", "autocomplete", "dropUp", "disabled"], outputs: ["selected", "submit", "close", "search", "clear"] }, { kind: "component", type: i5$1.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: SelectFormComponent, decorators: [{
             type: Component,
@@ -1434,7 +1450,7 @@ class SelectFormFlowComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: SelectFormFlowComponent, deps: [{ token: FormFlowService }, { token: ProcessLinkStateService }, { token: ProcessLinkService }, { token: ProcessLinkButtonService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: SelectFormFlowComponent, selector: "valtimo-select-form-flow", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 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  <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  </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-2024 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: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.ComboBox, selector: "cds-combo-box, ibm-combo-box", inputs: ["placeholder", "openMenuAria", "closeMenuAria", "clearSelectionsTitle", "clearSelectionsAria", "clearSelectionTitle", "clearSelectionAria", "id", "items", "type", "size", "itemValueKey", "label", "helperText", "appendInline", "invalid", "invalidText", "warn", "warnText", "maxLength", "theme", "selectionFeedback", "autocomplete", "dropUp", "disabled"], outputs: ["selected", "submit", "close", "search", "clear"] }, { kind: "component", type: i5$1.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: SelectFormFlowComponent, selector: "valtimo-select-form-flow", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 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  <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  </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-2024 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.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", "items", "type", "size", "itemValueKey", "label", "helperText", "appendInline", "invalid", "invalidText", "warn", "warnText", "maxLength", "theme", "selectionFeedback", "autocomplete", "dropUp", "disabled"], outputs: ["selected", "submit", "close", "search", "clear"] }, { kind: "component", type: i5$1.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: SelectFormFlowComponent, decorators: [{
             type: Component,
@@ -1457,11 +1473,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
  * limitations under the License.
  */
 class ProcessLinkModalComponent {
-    constructor(stateService, stepService, buttonService, processLinkService) {
+    constructor(stateService, stepService, buttonService, processLinkService, processLinkStateService, configService) {
         this.stateService = stateService;
         this.stepService = stepService;
         this.buttonService = buttonService;
         this.processLinkService = processLinkService;
+        this.processLinkStateService = processLinkStateService;
+        this.configService = configService;
         this.showModal$ = this.stateService.showModal$;
         this.processStepName$ = this.stateService.elementName$;
         this.steps$ = this.stepService.steps$;
@@ -1475,6 +1493,8 @@ class ProcessLinkModalComponent {
         this.hideProgressIndicator$ = this.stateService.hideProgressIndicator$;
         this.saving$ = this.stateService.saving$;
         this.typeOfSelectedProcessLink$ = this.stateService.typeOfSelectedProcessLink$;
+        this.viewModelEnabled$ = this.stateService.viewModelEnabled$;
+        this.showViewModelToggle = this.configService.config.featureToggles.enableFormViewModel;
     }
     closeModal() {
         this.stateService.closeModal();
@@ -1498,13 +1518,16 @@ class ProcessLinkModalComponent {
             });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: ProcessLinkModalComponent, deps: [{ token: ProcessLinkStateService }, { token: ProcessLinkStepService }, { token: ProcessLinkButtonService }, { token: ProcessLinkService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: ProcessLinkModalComponent, selector: "valtimo-process-link-modal", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 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    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  } as obs\"\n>\n  <cds-modal valtimoCdsModal [open]=\"obs.showModal\" size=\"lg\">\n    <cds-modal-header (closeSelect)=\"closeModal()\">\n      <h2 cdsModalHeaderLabel>{{ 'processLinkConfiguration.configureStep' | translate }}</h2>\n      <h3 cdsModalHeaderHeading>\n        {{\n          'processLinkConfiguration.modalTitle'\n            | translate: {processStepName: obs.processStepName || '-'}\n        }}\n      </h3>\n      <div class=\"process-link-progress\" *ngIf=\"!obs.typeOfSelectedProgressLink\">\n        <ng-container *ngTemplateOutlet=\"progressIndicator; context: {obs: obs}\"></ng-container>\n      </div>\n    </cds-modal-header>\n    <section cdsModalContent>\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\n        *ngIf=\"obs.currentStepId === 'selectForm' || obs.typeOfSelectedProgressLink === 'form'\"\n      >\n        <valtimo-select-form></valtimo-select-form>\n      </ng-container>\n      <ng-container\n        *ngIf=\"\n          obs.currentStepId === 'selectFormFlow' || obs.typeOfSelectedProgressLink === 'form-flow'\n        \"\n      >\n        <valtimo-select-form-flow></valtimo-select-form-flow>\n      </ng-container>\n      <ng-container *ngIf=\"obs.currentStepId === 'choosePluginConfiguration'\">\n        <valtimo-select-plugin-configuration></valtimo-select-plugin-configuration>\n      </ng-container>\n      <ng-container *ngIf=\"obs.currentStepId === 'choosePluginAction'\">\n        <valtimo-select-plugin-action></valtimo-select-plugin-action>\n      </ng-container>\n      <ng-container\n        *ngIf=\"\n          obs.currentStepId === 'configurePluginAction' ||\n          obs.typeOfSelectedProgressLink === 'plugin'\n        \"\n      >\n        <valtimo-plugin-action-configuration></valtimo-plugin-action-configuration>\n      </ng-container>\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #footer let-obs=\"obs\">\n  <cds-modal-footer *ngIf=\"!obs.saving\">\n    <div class=\"cancel-button\">\n      <button cdsButton=\"ghost\" (click)=\"closeModal()\" [disabled]=\"obs.disabled\">\n        {{ 'processLinkConfiguration.cancel' | translate }}\n      </button>\n    </div>\n    <div class=\"navigation-buttons\">\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 === false\"\n        (click)=\"nextButtonClick()\"\n      >\n        {{ 'processLinkConfiguration.next' | translate }}\n      </button>\n      <button\n        cdsButton=\"danger--primary\"\n        *ngIf=\"obs.typeOfSelectedProgressLink\"\n        (click)=\"unlinkButtonClick()\"\n      >\n        {{ 'processLinkConfiguration.unlink' | translate }}\n      </button>\n      <button\n        cdsButton=\"primary\"\n        *ngIf=\"(obs.showSaveButton && !obs.saving) || obs.typeOfSelectedProgressLink\"\n        [disabled]=\"obs.enableSaveButton === false\"\n        (click)=\"saveButtonClick()\"\n      >\n        {{ 'processLinkConfiguration.complete' | translate }}\n      </button>\n    </div>\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{justify-content:space-between}.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}.navigation-buttons{justify-content:flex-end}.navigation-buttons,.cancel-button{max-width:50%;display:flex;flex-direction:row;flex-grow:1}.navigation-buttons button,.cancel-button button{min-width:50%}.cancel-button{max-width:25%}.cancel-button button{min-width:100%}.process-link-progress{width:100%;margin-top:32px;margin-bottom:40px}.hidden{visibility:hidden}\n/*!\n * Copyright 2015-2024 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: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i3.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i3.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i3.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i3.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "directive", type: i3.ModalHeaderLabel, selector: "[cdsModalHeaderLabel], [ibmModalHeaderLabel]" }, { kind: "component", type: i3.ProgressIndicator, selector: "cds-progress-indicator, ibm-progress-indicator", inputs: ["current", "steps", "translations", "orientation", "skeleton", "spacing"], outputs: ["stepSelected"] }, { kind: "directive", type: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "component", type: i3.Loading, selector: "cds-loading, ibm-loading", inputs: ["title", "isActive", "size", "overlay"] }, { kind: "directive", type: i2$3.ValtimoCdsModalDirective, selector: "[valtimoCdsModal]" }, { 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", 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: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
+    toggleCheckedChange(value) {
+        this.processLinkStateService.setViewModelEnabled(value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: ProcessLinkModalComponent, deps: [{ token: ProcessLinkStateService }, { token: ProcessLinkStepService }, { token: ProcessLinkButtonService }, { token: ProcessLinkService }, { token: ProcessLinkStateService }, { token: i2.ConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: ProcessLinkModalComponent, selector: "valtimo-process-link-modal", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 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    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  } as obs\"\n>\n  <cds-modal valtimoCdsModal [open]=\"obs.showModal\" size=\"lg\">\n    <cds-modal-header (closeSelect)=\"closeModal()\">\n      <h2 cdsModalHeaderLabel>{{ 'processLinkConfiguration.configureStep' | translate }}</h2>\n      <h3 cdsModalHeaderHeading>\n        {{\n          'processLinkConfiguration.modalTitle'\n            | translate: {processStepName: obs.processStepName || '-'}\n        }}\n      </h3>\n      <div class=\"process-link-progress\" *ngIf=\"!obs.typeOfSelectedProgressLink\">\n        <ng-container *ngTemplateOutlet=\"progressIndicator; context: {obs: obs}\"></ng-container>\n      </div>\n    </cds-modal-header>\n    <section cdsModalContent>\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\n        *ngIf=\"obs.currentStepId === 'selectForm' || obs.typeOfSelectedProgressLink === 'form'\"\n      >\n        <valtimo-select-form></valtimo-select-form>\n        <br />\n        <cds-toggle\n          *ngIf=\"showViewModelToggle\"\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\n        *ngIf=\"\n          obs.currentStepId === 'selectFormFlow' || obs.typeOfSelectedProgressLink === 'form-flow'\n        \"\n      >\n        <valtimo-select-form-flow></valtimo-select-form-flow>\n      </ng-container>\n      <ng-container *ngIf=\"obs.currentStepId === 'choosePluginConfiguration'\">\n        <valtimo-select-plugin-configuration></valtimo-select-plugin-configuration>\n      </ng-container>\n      <ng-container *ngIf=\"obs.currentStepId === 'choosePluginAction'\">\n        <valtimo-select-plugin-action></valtimo-select-plugin-action>\n      </ng-container>\n      <ng-container\n        *ngIf=\"\n          obs.currentStepId === 'configurePluginAction' ||\n          obs.typeOfSelectedProgressLink === 'plugin'\n        \"\n      >\n        <valtimo-plugin-action-configuration></valtimo-plugin-action-configuration>\n      </ng-container>\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #footer let-obs=\"obs\">\n  <cds-modal-footer *ngIf=\"!obs.saving\">\n    <div class=\"cancel-button\">\n      <button cdsButton=\"ghost\" (click)=\"closeModal()\" [disabled]=\"obs.disabled\">\n        {{ 'processLinkConfiguration.cancel' | translate }}\n      </button>\n    </div>\n    <div class=\"navigation-buttons\">\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 === false\"\n        (click)=\"nextButtonClick()\"\n      >\n        {{ 'processLinkConfiguration.next' | translate }}\n      </button>\n      <button\n        cdsButton=\"danger--primary\"\n        *ngIf=\"obs.typeOfSelectedProgressLink\"\n        (click)=\"unlinkButtonClick()\"\n      >\n        {{ 'processLinkConfiguration.unlink' | translate }}\n      </button>\n      <button\n        cdsButton=\"primary\"\n        *ngIf=\"(obs.showSaveButton && !obs.saving) || obs.typeOfSelectedProgressLink\"\n        [disabled]=\"obs.enableSaveButton === false\"\n        (click)=\"saveButtonClick()\"\n      >\n        {{ 'processLinkConfiguration.complete' | translate }}\n      </button>\n    </div>\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{justify-content:space-between}.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}.navigation-buttons{justify-content:flex-end}.navigation-buttons,.cancel-button{max-width:50%;display:flex;flex-direction:row;flex-grow:1}.navigation-buttons button,.cancel-button button{min-width:50%}.cancel-button{max-width:25%}.cancel-button button{min-width:100%}.process-link-progress{width:100%;margin-top:32px;margin-bottom:40px}.hidden{visibility:hidden}\n/*!\n * Copyright 2015-2024 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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.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$2.ValtimoCdsModalDirective, selector: "[valtimoCdsModal]" }, { kind: "component", type: i4.Toggle, selector: "cds-toggle, ibm-toggle", inputs: ["offText", "onText", "label", "size", "hideLabel", "skeleton"] }, { 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", 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: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: ProcessLinkModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-process-link-modal', template: "<!--\n  ~ Copyright 2015-2024 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    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  } as obs\"\n>\n  <cds-modal valtimoCdsModal [open]=\"obs.showModal\" size=\"lg\">\n    <cds-modal-header (closeSelect)=\"closeModal()\">\n      <h2 cdsModalHeaderLabel>{{ 'processLinkConfiguration.configureStep' | translate }}</h2>\n      <h3 cdsModalHeaderHeading>\n        {{\n          'processLinkConfiguration.modalTitle'\n            | translate: {processStepName: obs.processStepName || '-'}\n        }}\n      </h3>\n      <div class=\"process-link-progress\" *ngIf=\"!obs.typeOfSelectedProgressLink\">\n        <ng-container *ngTemplateOutlet=\"progressIndicator; context: {obs: obs}\"></ng-container>\n      </div>\n    </cds-modal-header>\n    <section cdsModalContent>\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\n        *ngIf=\"obs.currentStepId === 'selectForm' || obs.typeOfSelectedProgressLink === 'form'\"\n      >\n        <valtimo-select-form></valtimo-select-form>\n      </ng-container>\n      <ng-container\n        *ngIf=\"\n          obs.currentStepId === 'selectFormFlow' || obs.typeOfSelectedProgressLink === 'form-flow'\n        \"\n      >\n        <valtimo-select-form-flow></valtimo-select-form-flow>\n      </ng-container>\n      <ng-container *ngIf=\"obs.currentStepId === 'choosePluginConfiguration'\">\n        <valtimo-select-plugin-configuration></valtimo-select-plugin-configuration>\n      </ng-container>\n      <ng-container *ngIf=\"obs.currentStepId === 'choosePluginAction'\">\n        <valtimo-select-plugin-action></valtimo-select-plugin-action>\n      </ng-container>\n      <ng-container\n        *ngIf=\"\n          obs.currentStepId === 'configurePluginAction' ||\n          obs.typeOfSelectedProgressLink === 'plugin'\n        \"\n      >\n        <valtimo-plugin-action-configuration></valtimo-plugin-action-configuration>\n      </ng-container>\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #footer let-obs=\"obs\">\n  <cds-modal-footer *ngIf=\"!obs.saving\">\n    <div class=\"cancel-button\">\n      <button cdsButton=\"ghost\" (click)=\"closeModal()\" [disabled]=\"obs.disabled\">\n        {{ 'processLinkConfiguration.cancel' | translate }}\n      </button>\n    </div>\n    <div class=\"navigation-buttons\">\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 === false\"\n        (click)=\"nextButtonClick()\"\n      >\n        {{ 'processLinkConfiguration.next' | translate }}\n      </button>\n      <button\n        cdsButton=\"danger--primary\"\n        *ngIf=\"obs.typeOfSelectedProgressLink\"\n        (click)=\"unlinkButtonClick()\"\n      >\n        {{ 'processLinkConfiguration.unlink' | translate }}\n      </button>\n      <button\n        cdsButton=\"primary\"\n        *ngIf=\"(obs.showSaveButton && !obs.saving) || obs.typeOfSelectedProgressLink\"\n        [disabled]=\"obs.enableSaveButton === false\"\n        (click)=\"saveButtonClick()\"\n      >\n        {{ 'processLinkConfiguration.complete' | translate }}\n      </button>\n    </div>\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{justify-content:space-between}.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}.navigation-buttons{justify-content:flex-end}.navigation-buttons,.cancel-button{max-width:50%;display:flex;flex-direction:row;flex-grow:1}.navigation-buttons button,.cancel-button button{min-width:50%}.cancel-button{max-width:25%}.cancel-button button{min-width:100%}.process-link-progress{width:100%;margin-top:32px;margin-bottom:40px}.hidden{visibility:hidden}\n/*!\n * Copyright 2015-2024 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: ProcessLinkService }] });
+            args: [{ selector: 'valtimo-process-link-modal', template: "<!--\n  ~ Copyright 2015-2024 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    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  } as obs\"\n>\n  <cds-modal valtimoCdsModal [open]=\"obs.showModal\" size=\"lg\">\n    <cds-modal-header (closeSelect)=\"closeModal()\">\n      <h2 cdsModalHeaderLabel>{{ 'processLinkConfiguration.configureStep' | translate }}</h2>\n      <h3 cdsModalHeaderHeading>\n        {{\n          'processLinkConfiguration.modalTitle'\n            | translate: {processStepName: obs.processStepName || '-'}\n        }}\n      </h3>\n      <div class=\"process-link-progress\" *ngIf=\"!obs.typeOfSelectedProgressLink\">\n        <ng-container *ngTemplateOutlet=\"progressIndicator; context: {obs: obs}\"></ng-container>\n      </div>\n    </cds-modal-header>\n    <section cdsModalContent>\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\n        *ngIf=\"obs.currentStepId === 'selectForm' || obs.typeOfSelectedProgressLink === 'form'\"\n      >\n        <valtimo-select-form></valtimo-select-form>\n        <br />\n        <cds-toggle\n          *ngIf=\"showViewModelToggle\"\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\n        *ngIf=\"\n          obs.currentStepId === 'selectFormFlow' || obs.typeOfSelectedProgressLink === 'form-flow'\n        \"\n      >\n        <valtimo-select-form-flow></valtimo-select-form-flow>\n      </ng-container>\n      <ng-container *ngIf=\"obs.currentStepId === 'choosePluginConfiguration'\">\n        <valtimo-select-plugin-configuration></valtimo-select-plugin-configuration>\n      </ng-container>\n      <ng-container *ngIf=\"obs.currentStepId === 'choosePluginAction'\">\n        <valtimo-select-plugin-action></valtimo-select-plugin-action>\n      </ng-container>\n      <ng-container\n        *ngIf=\"\n          obs.currentStepId === 'configurePluginAction' ||\n          obs.typeOfSelectedProgressLink === 'plugin'\n        \"\n      >\n        <valtimo-plugin-action-configuration></valtimo-plugin-action-configuration>\n      </ng-container>\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #footer let-obs=\"obs\">\n  <cds-modal-footer *ngIf=\"!obs.saving\">\n    <div class=\"cancel-button\">\n      <button cdsButton=\"ghost\" (click)=\"closeModal()\" [disabled]=\"obs.disabled\">\n        {{ 'processLinkConfiguration.cancel' | translate }}\n      </button>\n    </div>\n    <div class=\"navigation-buttons\">\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 === false\"\n        (click)=\"nextButtonClick()\"\n      >\n        {{ 'processLinkConfiguration.next' | translate }}\n      </button>\n      <button\n        cdsButton=\"danger--primary\"\n        *ngIf=\"obs.typeOfSelectedProgressLink\"\n        (click)=\"unlinkButtonClick()\"\n      >\n        {{ 'processLinkConfiguration.unlink' | translate }}\n      </button>\n      <button\n        cdsButton=\"primary\"\n        *ngIf=\"(obs.showSaveButton && !obs.saving) || obs.typeOfSelectedProgressLink\"\n        [disabled]=\"obs.enableSaveButton === false\"\n        (click)=\"saveButtonClick()\"\n      >\n        {{ 'processLinkConfiguration.complete' | translate }}\n      </button>\n    </div>\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{justify-content:space-between}.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}.navigation-buttons{justify-content:flex-end}.navigation-buttons,.cancel-button{max-width:50%;display:flex;flex-direction:row;flex-grow:1}.navigation-buttons button,.cancel-button button{min-width:50%}.cancel-button{max-width:25%}.cancel-button button{min-width:100%}.process-link-progress{width:100%;margin-top:32px;margin-bottom:40px}.hidden{visibility:hidden}\n/*!\n * Copyright 2015-2024 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: ProcessLinkService }, { type: ProcessLinkStateService }, { type: i2.ConfigService }] });
 
 /*
  * Copyright 2015-2024 Ritense BV, the Netherlands.
@@ -1559,13 +1582,13 @@ class ProcessLinkComponent {
                 .subscribe();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: ProcessLinkComponent, deps: [{ token: ProcessLinkService }, { token: ProcessLinkStateService }, { token: i2$3.ModalService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: ProcessLinkComponent, deps: [{ token: ProcessLinkService }, { token: ProcessLinkStateService }, { token: i2$2.ModalService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: ProcessLinkComponent, selector: "valtimo-process-link", providers: [ProcessLinkStateService, ProcessLinkStepService, ProcessLinkButtonService], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 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=\"main-content\">\n  <div class=\"container-fluid\">\n    <valtimo-form-link-process-diagram\n      (bpmnElementModalOpen)=\"openModal($event)\"\n    ></valtimo-form-link-process-diagram>\n  </div>\n</div>\n\n<valtimo-process-link-modal></valtimo-process-link-modal>\n", styles: ["/*!\n * Copyright 2015-2024 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: FormLinkProcessDiagramComponent, selector: "valtimo-form-link-process-diagram", outputs: ["bpmnElementModalOpen", "bpmnElementModalClose"] }, { kind: "component", type: ProcessLinkModalComponent, selector: "valtimo-process-link-modal" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: ProcessLinkComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-process-link', providers: [ProcessLinkStateService, ProcessLinkStepService, ProcessLinkButtonService], template: "<!--\n  ~ Copyright 2015-2024 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=\"main-content\">\n  <div class=\"container-fluid\">\n    <valtimo-form-link-process-diagram\n      (bpmnElementModalOpen)=\"openModal($event)\"\n    ></valtimo-form-link-process-diagram>\n  </div>\n</div>\n\n<valtimo-process-link-modal></valtimo-process-link-modal>\n", styles: ["/*!\n * Copyright 2015-2024 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: ProcessLinkService }, { type: ProcessLinkStateService }, { type: i2$3.ModalService }] });
+        }], ctorParameters: () => [{ type: ProcessLinkService }, { type: ProcessLinkStateService }, { type: i2$2.ModalService }] });
 
 /*
  * Copyright 2015-2024 Ritense BV, the Netherlands.
@@ -1592,7 +1615,7 @@ const routes = [
 ];
 class ProcessLinkRoutingModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: ProcessLinkRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.3", ngImport: i0, type: ProcessLinkRoutingModule, imports: [i2$2.RouterModule], exports: [RouterModule] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.3", ngImport: i0, type: ProcessLinkRoutingModule, imports: [i2$1.RouterModule], exports: [RouterModule] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: ProcessLinkRoutingModule, imports: [RouterModule.forRoot(routes), RouterModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: ProcessLinkRoutingModule, decorators: [{
@@ -1830,13 +1853,13 @@ class FormFlowComponent {
     enable() {
         this.disabled$.next(false);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: FormFlowComponent, deps: [{ token: FormFlowService }, { token: i2$3.ValtimoModalService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: FormFlowComponent, selector: "valtimo-form-flow", inputs: { formIoFormData: "formIoFormData", formFlowInstanceId: "formFlowInstanceId" }, outputs: { formFlowComplete: "formFlowComplete" }, viewQueries: [{ propertyName: "form", first: true, predicate: ["form"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 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  <div body *ngIf=\"formDefinition && (formFlowStepType$ | async) === 'form'\">\n    <valtimo-form-io\n      #form\n      [form]=\"formDefinition\"\n      (submit)=\"onSubmit($event)\"\n      (change)=\"onChange($event)\"\n      [options]=\"formioOptions\"\n    ></valtimo-form-io>\n  </div>\n  <div body *ngIf=\"(formFlowStepType$ | async) === 'custom-component'\">\n    <valtimo-form-flow-configuration-container\n      [componentId]=\"FormFlowCustomComponentId$ | async\"\n      [formFlowInstanceId]=\"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: [""], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.FormioComponent, selector: "valtimo-form-io", inputs: ["options", "submission", "form", "readOnly", "formRefresh$"], outputs: ["submit", "change"] }, { kind: "component", type: FormFlowConfigurationContainerComponent, selector: "valtimo-form-flow-configuration-container", inputs: ["disabled", "componentId", "formFlowInstanceId"], outputs: ["changeEvent", "submitEvent"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: FormFlowComponent, deps: [{ token: FormFlowService }, { token: i2$2.ValtimoModalService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: FormFlowComponent, selector: "valtimo-form-flow", inputs: { formIoFormData: "formIoFormData", formFlowInstanceId: "formFlowInstanceId" }, outputs: { formFlowComplete: "formFlowComplete" }, viewQueries: [{ propertyName: "form", first: true, predicate: ["form"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 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  <div body *ngIf=\"formDefinition && (formFlowStepType$ | async) === 'form'\">\n    <valtimo-form-io\n      #form\n      [form]=\"formDefinition\"\n      (submit)=\"onSubmit($event)\"\n      (change)=\"onChange($event)\"\n      [options]=\"formioOptions\"\n    ></valtimo-form-io>\n  </div>\n  <div body *ngIf=\"(formFlowStepType$ | async) === 'custom-component'\">\n    <valtimo-form-flow-configuration-container\n      [componentId]=\"FormFlowCustomComponentId$ | async\"\n      [formFlowInstanceId]=\"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: [""], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.FormioComponent, selector: "valtimo-form-io", inputs: ["options", "submission", "form", "readOnly", "formRefresh$"], outputs: ["submit", "change"] }, { kind: "component", type: FormFlowConfigurationContainerComponent, selector: "valtimo-form-flow-configuration-container", inputs: ["disabled", "componentId", "formFlowInstanceId"], outputs: ["changeEvent", "submitEvent"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: FormFlowComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-form-flow', template: "<!--\n  ~ Copyright 2015-2024 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  <div body *ngIf=\"formDefinition && (formFlowStepType$ | async) === 'form'\">\n    <valtimo-form-io\n      #form\n      [form]=\"formDefinition\"\n      (submit)=\"onSubmit($event)\"\n      (change)=\"onChange($event)\"\n      [options]=\"formioOptions\"\n    ></valtimo-form-io>\n  </div>\n  <div body *ngIf=\"(formFlowStepType$ | async) === 'custom-component'\">\n    <valtimo-form-flow-configuration-container\n      [componentId]=\"FormFlowCustomComponentId$ | async\"\n      [formFlowInstanceId]=\"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" }]
-        }], ctorParameters: () => [{ type: FormFlowService }, { type: i2$3.ValtimoModalService }], propDecorators: { form: [{
+        }], ctorParameters: () => [{ type: FormFlowService }, { type: i2$2.ValtimoModalService }], propDecorators: { form: [{
                 type: ViewChild,
                 args: ['form']
             }], formIoFormData: [{
@@ -1934,7 +1957,8 @@ class ProcessLinkModule {
             StructuredListModule,
             TilesModule,
             RenderInPageHeaderDirectiveModule,
-            SelectModule], exports: [ProcessLinkComponent,
+            SelectModule,
+            ToggleModule], exports: [ProcessLinkComponent,
             SelectPluginConfigurationComponent,
             SelectPluginActionComponent,
             PluginActionConfigurationComponent,
@@ -1968,7 +1992,8 @@ class ProcessLinkModule {
             StructuredListModule,
             TilesModule,
             RenderInPageHeaderDirectiveModule,
-            SelectModule] }); }
+            SelectModule,
+            ToggleModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: ProcessLinkModule, decorators: [{
             type: NgModule,
@@ -2016,6 +2041,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
                         TilesModule,
                         RenderInPageHeaderDirectiveModule,
                         SelectModule,
+                        ToggleModule,
                     ],
                     exports: [
                         ProcessLinkComponent,