@valtimo/process-link 12.10.2 → 12.12.0

package/fesm2022/valtimo-process-link.mjs

@@ -16,16 +16,16 @@ 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, LayerModule, ToggletipModule } from 'carbon-components-angular';
 import * as i5 from '@angular/forms';
 import { FormGroup, FormControl, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import * as i2 from '@valtimo/components';
-import { FormioOptionsImpl, ModalModule, SearchableDropdownSelectModule, StepperModule, VModalModule, VCardModule, ParagraphModule, ButtonModule, TitleModule, TooltipModule, TooltipIconModule, FormIoModule, ValtimoCdsModalDirectiveModule, RenderInPageHeaderDirectiveModule, CarbonMultiInputModule } from '@valtimo/components';
+import * as i4$1 from '@valtimo/components';
+import { FormioOptionsImpl, ModalModule, SearchableDropdownSelectModule, StepperModule, VModalModule, VCardModule, ParagraphModule, ButtonModule, TitleModule, TooltipModule, TooltipIconModule, FormIoModule, ValtimoCdsModalDirectiveModule, RenderInPageHeaderDirectiveModule, CarbonMultiInputModule, RemoveClassnamesDirective } from '@valtimo/components';
 import { Upload16 } from '@carbon/icons';
-import * as i4$1 from 'carbon-components-angular/dropdown';
+import * as i5$1 from 'carbon-components-angular/dropdown';
 import BpmnJS from 'bpmn-js/dist/bpmn-navigated-viewer.production.min.js';
 import * as i1$3 from '@valtimo/process';
-import * as i2$1 from '@angular/router';
+import * as i2 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import { AuthGuardService } from '@valtimo/security';
-import * as i2$2 from '@valtimo/form';
+import * as i2$1 from '@valtimo/form';
 
 /*
  * Copyright 2015-2024 Ritense BV, the Netherlands.
@@ -1194,13 +1194,13 @@ class SelectUrlComponent {
     resolveUrlVariables(url) {
         return this.urlResolverService.resolveUrlVariables(url, this.variables);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectUrlComponent, deps: [{ token: ProcessLinkStateService }, { token: ProcessLinkButtonService }, { token: ProcessLinkService }, { token: UrlValidatorService }, { token: UrlResolverService }, { token: i2.AlertService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectUrlComponent, deps: [{ token: ProcessLinkStateService }, { token: ProcessLinkButtonService }, { token: ProcessLinkService }, { token: UrlValidatorService }, { token: UrlResolverService }, { token: i4$1.AlertService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SelectUrlComponent, selector: "valtimo-select-url", 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 [formGroup]=\"urlForm\">\n  <cds-label\n    [invalidText]=\"'processLinkUrlInvalid' | translate: {URL: url.errors?.invalidUrl ?? ''}\"\n    [invalid]=\"url.invalid && url.touched\"\n    [helperText]=\"url.invalid ? '' : resolveUrlVariables(url.value)\"\n    >Url\n    <input\n      cdsText\n      type=\"text\"\n      required\n      class=\"form-control\"\n      formControlName=\"url\"\n      [invalid]=\"url.invalid\"\n    />\n  </cds-label>\n</div>\n", dependencies: [{ kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i4.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectUrlComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-select-url', 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 [formGroup]=\"urlForm\">\n  <cds-label\n    [invalidText]=\"'processLinkUrlInvalid' | translate: {URL: url.errors?.invalidUrl ?? ''}\"\n    [invalid]=\"url.invalid && url.touched\"\n    [helperText]=\"url.invalid ? '' : resolveUrlVariables(url.value)\"\n    >Url\n    <input\n      cdsText\n      type=\"text\"\n      required\n      class=\"form-control\"\n      formControlName=\"url\"\n      [invalid]=\"url.invalid\"\n    />\n  </cds-label>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: ProcessLinkStateService }, { type: ProcessLinkButtonService }, { type: ProcessLinkService }, { type: UrlValidatorService }, { type: UrlResolverService }, { type: i2.AlertService }] });
+        }], ctorParameters: () => [{ type: ProcessLinkStateService }, { type: ProcessLinkButtonService }, { type: ProcessLinkService }, { type: UrlValidatorService }, { type: UrlResolverService }, { type: i4$1.AlertService }] });
 
 /*
  * Copyright 2015-2024 Ritense BV, the Netherlands.
@@ -1231,11 +1231,11 @@ class ImportPluginConfigurationComponent {
     get activity() {
         return this.importPluginForm.get('activity');
     }
-    constructor(formBuilder, processLinkService, iconService, elementRef) {
+    constructor(formBuilder, processLinkService, iconService, cdsThemeService) {
         this.formBuilder = formBuilder;
         this.processLinkService = processLinkService;
         this.iconService = iconService;
-        this.elementRef = elementRef;
+        this.cdsThemeService = cdsThemeService;
         this.configurationEvent = new EventEmitter();
         this.open$ = new Subject();
         this._compatiblePluginProcessLinksSubject$ = new BehaviorSubject([]);
@@ -1279,14 +1279,9 @@ class ImportPluginConfigurationComponent {
                 content: processLinkItem.activityId,
                 selected: processLinkItem.activityId === activityValue,
             }))));
+        this.toggletipTheme$ = this.cdsThemeService.toggletipTheme$;
         this.iconService.register(Upload16);
     }
-    ngAfterViewInit() {
-        const button = this.elementRef.nativeElement.querySelector('button.cds--toggletip-button');
-        if (!button)
-            return;
-        button.classList.remove('cds--toggletip-button');
-    }
     onSubmit() {
         this.configurationEvent.emit(this._compatiblePluginProcessLinksSubject$
             .getValue()
@@ -1316,13 +1311,13 @@ class ImportPluginConfigurationComponent {
     activitySelected(event) {
         this.activity.setValue(event?.item?.content);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ImportPluginConfigurationComponent, deps: [{ token: i5.FormBuilder }, { token: ProcessLinkService }, { token: i4.IconService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ImportPluginConfigurationComponent, selector: "valtimo-import-plugin-configuration", inputs: { pluginActionKey: "pluginActionKey" }, outputs: { configurationEvent: "configurationEvent" }, 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<cds-toggletip align=\"right-bottom\" [autoAlign]=\"true\" [isOpen]=\"open$ | async\">\n  <button\n    class=\"process-link-configuration-import-button\"\n    [disabled]=\"((compatiblePluginProcessLinks$ | async) || []).length === 0\"\n    cdsToggletipButton\n    cdsButton=\"ghost\"\n  >\n    {{ 'processLinkConfiguration.importConfiguration' | translate }}\n\n    <svg class=\"cds--btn__icon\" cdsIcon=\"upload\" size=\"16\"></svg>\n  </button>\n\n  <div cdsToggletipContent data-carbon-theme=\"g90\" class=\"process-link-configuration-select\">\n    <cds-dropdown\n      [label]=\"'processLinkConfiguration.process' | translate\"\n      [placeholder]=\"'processLinkConfiguration.selectProcess' | translate\"\n      (selected)=\"processSelected($event)\"\n      [appendInline]=\"true\"\n      [cdsLayer]=\"1\"\n    >\n      <cds-dropdown-list\n        [items]=\"processListItems$ | async\"\n        onclick=\"event.stopPropagation()\"\n      ></cds-dropdown-list>\n    </cds-dropdown>\n\n    <cds-dropdown\n      [label]=\"'processLinkConfiguration.version' | translate\"\n      [placeholder]=\"'processLinkConfiguration.selectVersion' | translate\"\n      [disabled]=\"!process.value\"\n      (selected)=\"versionSelected($event)\"\n      [appendInline]=\"true\"\n      [cdsLayer]=\"1\"\n    >\n      <cds-dropdown-list\n        [items]=\"versionListItems$ | async\"\n        onclick=\"event.stopPropagation()\"\n      ></cds-dropdown-list>\n    </cds-dropdown>\n\n    <cds-dropdown\n      [label]=\"'processLinkConfiguration.activity' | translate\"\n      [placeholder]=\"'processLinkConfiguration.selectActivity' | translate\"\n      [disabled]=\"!process.value || !version.value\"\n      (selected)=\"activitySelected($event)\"\n      [appendInline]=\"true\"\n      [cdsLayer]=\"1\"\n    >\n      <cds-dropdown-list\n        [items]=\"activityListItems$ | async\"\n        onclick=\"event.stopPropagation()\"\n      ></cds-dropdown-list>\n    </cds-dropdown>\n\n    <button cdsButton [disabled]=\"!importPluginForm.valid\" (click)=\"onSubmit()\" [cdsLayer]=\"1\">\n      {{ 'processLinkConfiguration.importConfiguration' | translate }}\n    </button>\n  </div>\n</cds-toggletip>\n", styles: [":host ::ng-deep .cds--popover-content{max-inline-size:unset}.process-link-configuration-import-button{margin-bottom:16px}.process-link-configuration-select{width:400px;max-inline-size:400px;display:flex;flex-direction:column;gap:16px}.process-link-configuration-select .cds--btn{width:100%;max-width:unset}\n/*!\n * Copyright 2015-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: i4.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i4.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i4$1.Dropdown, selector: "cds-dropdown, ibm-dropdown", inputs: ["id", "label", "hideLabel", "helperText", "placeholder", "displayValue", "clearText", "size", "type", "theme", "disabled", "skeleton", "inline", "disableArrowKeys", "invalid", "invalidText", "warn", "warnText", "appendInline", "scrollableContainer", "itemValueKey", "selectionFeedback", "menuButtonLabel", "selectedLabel", "dropUp"], outputs: ["selected", "onClose", "close"] }, { kind: "component", type: i4$1.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "directive", type: i4.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "component", type: i4.Toggletip, selector: "cds-toggletip, ibm-toggletip", inputs: ["id", "isOpen"] }, { kind: "directive", type: i4.ToggletipButton, selector: "[cdsToggletipButton], [ibmToggletipButton]", inputs: ["ariaLabel"] }, { kind: "directive", type: i4.ToggletipContent, selector: "[cdsToggletipContent], [ibmToggletipContent]" }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ImportPluginConfigurationComponent, deps: [{ token: i5.FormBuilder }, { token: ProcessLinkService }, { token: i4.IconService }, { token: i4$1.CdsThemeService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ImportPluginConfigurationComponent, selector: "valtimo-import-plugin-configuration", inputs: { pluginActionKey: "pluginActionKey" }, outputs: { configurationEvent: "configurationEvent" }, 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<cds-toggletip align=\"right-bottom\" [autoAlign]=\"true\" [isOpen]=\"open$ | async\">\n  <button\n    class=\"process-link-configuration-import-button\"\n    [disabled]=\"((compatiblePluginProcessLinks$ | async) || []).length === 0\"\n    cdsToggletipButton\n    [removeClassnames]=\"['cds--toggletip-button']\"\n    cdsButton=\"ghost\"\n  >\n    {{ 'processLinkConfiguration.importConfiguration' | translate }}\n\n    <svg class=\"cds--btn__icon\" cdsIcon=\"upload\" size=\"16\"></svg>\n  </button>\n\n  <div\n    cdsToggletipContent\n    [attr.data-carbon-theme]=\"toggletipTheme$ | async\"\n    class=\"process-link-configuration-select\"\n  >\n    <cds-dropdown\n      [label]=\"'processLinkConfiguration.process' | translate\"\n      [placeholder]=\"'processLinkConfiguration.selectProcess' | translate\"\n      (selected)=\"processSelected($event)\"\n      [appendInline]=\"true\"\n      [cdsLayer]=\"1\"\n    >\n      <cds-dropdown-list\n        [items]=\"processListItems$ | async\"\n        onclick=\"event.stopPropagation()\"\n      ></cds-dropdown-list>\n    </cds-dropdown>\n\n    <cds-dropdown\n      [label]=\"'processLinkConfiguration.version' | translate\"\n      [placeholder]=\"'processLinkConfiguration.selectVersion' | translate\"\n      [disabled]=\"!process.value\"\n      (selected)=\"versionSelected($event)\"\n      [appendInline]=\"true\"\n      [cdsLayer]=\"1\"\n    >\n      <cds-dropdown-list\n        [items]=\"versionListItems$ | async\"\n        onclick=\"event.stopPropagation()\"\n      ></cds-dropdown-list>\n    </cds-dropdown>\n\n    <cds-dropdown\n      [label]=\"'processLinkConfiguration.activity' | translate\"\n      [placeholder]=\"'processLinkConfiguration.selectActivity' | translate\"\n      [disabled]=\"!process.value || !version.value\"\n      (selected)=\"activitySelected($event)\"\n      [appendInline]=\"true\"\n      [cdsLayer]=\"1\"\n    >\n      <cds-dropdown-list\n        [items]=\"activityListItems$ | async\"\n        onclick=\"event.stopPropagation()\"\n      ></cds-dropdown-list>\n    </cds-dropdown>\n\n    <button cdsButton [disabled]=\"!importPluginForm.valid\" (click)=\"onSubmit()\" [cdsLayer]=\"1\">\n      {{ 'processLinkConfiguration.importConfiguration' | translate }}\n    </button>\n  </div>\n</cds-toggletip>\n", styles: [":host ::ng-deep .cds--popover-content{max-inline-size:unset}.process-link-configuration-import-button{margin-bottom:16px}.process-link-configuration-select{width:400px;max-inline-size:400px;display:flex;flex-direction:column;gap:16px}.process-link-configuration-select .cds--btn{width:100%;max-width:unset}\n/*!\n * Copyright 2015-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: i4.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i4.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i5$1.Dropdown, selector: "cds-dropdown, ibm-dropdown", inputs: ["id", "label", "hideLabel", "helperText", "placeholder", "displayValue", "clearText", "size", "type", "theme", "disabled", "skeleton", "inline", "disableArrowKeys", "invalid", "invalidText", "warn", "warnText", "appendInline", "scrollableContainer", "itemValueKey", "selectionFeedback", "menuButtonLabel", "selectedLabel", "dropUp"], outputs: ["selected", "onClose", "close"] }, { kind: "component", type: i5$1.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "directive", type: i4.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "component", type: i4.Toggletip, selector: "cds-toggletip, ibm-toggletip", inputs: ["id", "isOpen"] }, { kind: "directive", type: i4.ToggletipButton, selector: "[cdsToggletipButton], [ibmToggletipButton]", inputs: ["ariaLabel"] }, { kind: "directive", type: i4.ToggletipContent, selector: "[cdsToggletipContent], [ibmToggletipContent]" }, { kind: "directive", type: i4$1.RemoveClassnamesDirective, selector: "[removeClassnames]", inputs: ["removeClassnames"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ImportPluginConfigurationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-import-plugin-configuration', 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<cds-toggletip align=\"right-bottom\" [autoAlign]=\"true\" [isOpen]=\"open$ | async\">\n  <button\n    class=\"process-link-configuration-import-button\"\n    [disabled]=\"((compatiblePluginProcessLinks$ | async) || []).length === 0\"\n    cdsToggletipButton\n    cdsButton=\"ghost\"\n  >\n    {{ 'processLinkConfiguration.importConfiguration' | translate }}\n\n    <svg class=\"cds--btn__icon\" cdsIcon=\"upload\" size=\"16\"></svg>\n  </button>\n\n  <div cdsToggletipContent data-carbon-theme=\"g90\" class=\"process-link-configuration-select\">\n    <cds-dropdown\n      [label]=\"'processLinkConfiguration.process' | translate\"\n      [placeholder]=\"'processLinkConfiguration.selectProcess' | translate\"\n      (selected)=\"processSelected($event)\"\n      [appendInline]=\"true\"\n      [cdsLayer]=\"1\"\n    >\n      <cds-dropdown-list\n        [items]=\"processListItems$ | async\"\n        onclick=\"event.stopPropagation()\"\n      ></cds-dropdown-list>\n    </cds-dropdown>\n\n    <cds-dropdown\n      [label]=\"'processLinkConfiguration.version' | translate\"\n      [placeholder]=\"'processLinkConfiguration.selectVersion' | translate\"\n      [disabled]=\"!process.value\"\n      (selected)=\"versionSelected($event)\"\n      [appendInline]=\"true\"\n      [cdsLayer]=\"1\"\n    >\n      <cds-dropdown-list\n        [items]=\"versionListItems$ | async\"\n        onclick=\"event.stopPropagation()\"\n      ></cds-dropdown-list>\n    </cds-dropdown>\n\n    <cds-dropdown\n      [label]=\"'processLinkConfiguration.activity' | translate\"\n      [placeholder]=\"'processLinkConfiguration.selectActivity' | translate\"\n      [disabled]=\"!process.value || !version.value\"\n      (selected)=\"activitySelected($event)\"\n      [appendInline]=\"true\"\n      [cdsLayer]=\"1\"\n    >\n      <cds-dropdown-list\n        [items]=\"activityListItems$ | async\"\n        onclick=\"event.stopPropagation()\"\n      ></cds-dropdown-list>\n    </cds-dropdown>\n\n    <button cdsButton [disabled]=\"!importPluginForm.valid\" (click)=\"onSubmit()\" [cdsLayer]=\"1\">\n      {{ 'processLinkConfiguration.importConfiguration' | translate }}\n    </button>\n  </div>\n</cds-toggletip>\n", styles: [":host ::ng-deep .cds--popover-content{max-inline-size:unset}.process-link-configuration-import-button{margin-bottom:16px}.process-link-configuration-select{width:400px;max-inline-size:400px;display:flex;flex-direction:column;gap:16px}.process-link-configuration-select .cds--btn{width:100%;max-width:unset}\n/*!\n * Copyright 2015-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: i5.FormBuilder }, { type: ProcessLinkService }, { type: i4.IconService }, { type: i0.ElementRef }], propDecorators: { pluginActionKey: [{
+            args: [{ selector: 'valtimo-import-plugin-configuration', 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<cds-toggletip align=\"right-bottom\" [autoAlign]=\"true\" [isOpen]=\"open$ | async\">\n  <button\n    class=\"process-link-configuration-import-button\"\n    [disabled]=\"((compatiblePluginProcessLinks$ | async) || []).length === 0\"\n    cdsToggletipButton\n    [removeClassnames]=\"['cds--toggletip-button']\"\n    cdsButton=\"ghost\"\n  >\n    {{ 'processLinkConfiguration.importConfiguration' | translate }}\n\n    <svg class=\"cds--btn__icon\" cdsIcon=\"upload\" size=\"16\"></svg>\n  </button>\n\n  <div\n    cdsToggletipContent\n    [attr.data-carbon-theme]=\"toggletipTheme$ | async\"\n    class=\"process-link-configuration-select\"\n  >\n    <cds-dropdown\n      [label]=\"'processLinkConfiguration.process' | translate\"\n      [placeholder]=\"'processLinkConfiguration.selectProcess' | translate\"\n      (selected)=\"processSelected($event)\"\n      [appendInline]=\"true\"\n      [cdsLayer]=\"1\"\n    >\n      <cds-dropdown-list\n        [items]=\"processListItems$ | async\"\n        onclick=\"event.stopPropagation()\"\n      ></cds-dropdown-list>\n    </cds-dropdown>\n\n    <cds-dropdown\n      [label]=\"'processLinkConfiguration.version' | translate\"\n      [placeholder]=\"'processLinkConfiguration.selectVersion' | translate\"\n      [disabled]=\"!process.value\"\n      (selected)=\"versionSelected($event)\"\n      [appendInline]=\"true\"\n      [cdsLayer]=\"1\"\n    >\n      <cds-dropdown-list\n        [items]=\"versionListItems$ | async\"\n        onclick=\"event.stopPropagation()\"\n      ></cds-dropdown-list>\n    </cds-dropdown>\n\n    <cds-dropdown\n      [label]=\"'processLinkConfiguration.activity' | translate\"\n      [placeholder]=\"'processLinkConfiguration.selectActivity' | translate\"\n      [disabled]=\"!process.value || !version.value\"\n      (selected)=\"activitySelected($event)\"\n      [appendInline]=\"true\"\n      [cdsLayer]=\"1\"\n    >\n      <cds-dropdown-list\n        [items]=\"activityListItems$ | async\"\n        onclick=\"event.stopPropagation()\"\n      ></cds-dropdown-list>\n    </cds-dropdown>\n\n    <button cdsButton [disabled]=\"!importPluginForm.valid\" (click)=\"onSubmit()\" [cdsLayer]=\"1\">\n      {{ 'processLinkConfiguration.importConfiguration' | translate }}\n    </button>\n  </div>\n</cds-toggletip>\n", styles: [":host ::ng-deep .cds--popover-content{max-inline-size:unset}.process-link-configuration-import-button{margin-bottom:16px}.process-link-configuration-select{width:400px;max-inline-size:400px;display:flex;flex-direction:column;gap:16px}.process-link-configuration-select .cds--btn{width:100%;max-width:unset}\n/*!\n * Copyright 2015-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: i5.FormBuilder }, { type: ProcessLinkService }, { type: i4.IconService }, { type: i4$1.CdsThemeService }], propDecorators: { pluginActionKey: [{
                 type: Input
             }], configurationEvent: [{
                 type: Output
@@ -1581,13 +1576,13 @@ class FormLinkProcessDiagramComponent {
         }
         this.version = +version;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FormLinkProcessDiagramComponent, deps: [{ token: i1$3.ProcessService }, { token: i2$1.ActivatedRoute }, { token: i2.PageTitleService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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$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.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" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FormLinkProcessDiagramComponent, deps: [{ token: i1$3.ProcessService }, { token: i2.ActivatedRoute }, { token: i4$1.PageTitleService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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$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: i4$1.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.12", 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$3.ProcessService }, { type: i2$1.ActivatedRoute }, { type: i2.PageTitleService }], propDecorators: { el: [{
+        }], ctorParameters: () => [{ type: i1$3.ProcessService }, { type: i2.ActivatedRoute }, { type: i4$1.PageTitleService }], propDecorators: { el: [{
                 type: ViewChild,
                 args: ['ref']
             }], bpmnElementModalOpen: [{
@@ -1620,7 +1615,7 @@ class ChooseProcessLinkTypeComponent {
         this.processLinkStateService.selectProcessLinkType(processLinkTypeId);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ChooseProcessLinkTypeComponent, deps: [{ token: ProcessLinkStateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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          <svg\n            *ngIf=\"processLinkTypeId === 'ui-component'\"\n            class=\"cds--btn__icon\"\n            cdsIcon=\"receipt\"\n            size=\"16\"\n          ></svg>\n        </button>\n      </ng-container>\n    </div>\n  </div>\n</ng-container>\n", styles: [".process-link-type-button{width:100%}.process-link-grid{margin-top:24px;display:flex;justify-content:flex-start;width:100%;flex-wrap:wrap;gap:8px}.process-link-item{flex-basis:calc(33.3% - 5.3333333333px)}\n/*!\n * Copyright 2015-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$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i4.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "directive", type: i2.TooltipDirective, selector: "[vTooltip]", inputs: ["vTooltip", "onBottom", "tooltipDisabled"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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          <svg\n            *ngIf=\"processLinkTypeId === 'ui-component'\"\n            class=\"cds--btn__icon\"\n            cdsIcon=\"receipt\"\n            size=\"16\"\n          ></svg>\n        </button>\n      </ng-container>\n    </div>\n  </div>\n</ng-container>\n", styles: [".process-link-type-button{width:100%}.process-link-grid{margin-top:24px;display:flex;justify-content:flex-start;width:100%;flex-wrap:wrap;gap:8px}.process-link-item{flex-basis:calc(33.3% - 5.3333333333px)}\n/*!\n * Copyright 2015-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$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i4.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "directive", type: i4$1.TooltipDirective, selector: "[vTooltip]", inputs: ["vTooltip", "onBottom", "tooltipDisabled"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ChooseProcessLinkTypeComponent, decorators: [{
             type: Component,
@@ -1720,7 +1715,7 @@ class FormDisplayConfigurationComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FormDisplayConfigurationComponent, deps: [{ token: ProcessLinkButtonService }, { token: i1$1.ConfigService }, { token: ProcessLinkStateService }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: FormDisplayConfigurationComponent, selector: "valtimo-form-display-configuration", inputs: { selectedFormDefinition: "selectedFormDefinition" }, outputs: { formDisplayValue: "formDisplayValue", formSizeValue: "formSizeValue", subtitlesValue: "subtitlesValue" }, ngImport: i0, template: "<ng-container\n  *ngIf=\"{\n    formDisplayValue: formDisplayValue$ | async,\n    formDisplayTypeListItems: formDisplayTypeListItems$ | async,\n    formSizeListItems: formSizeListItems$ | async,\n    disableFormSizeInput: disableFormSizeInput$ | async,\n    subtitles: subtitles$ | async,\n    isUserTask: isUserTask$ | async,\n    taskPanelEnabled: taskPanelEnabled$ | async,\n    saving: saving$ | async,\n  } as obs\"\n>\n  @if (obs.taskPanelEnabled && obs.isUserTask) {\n    <cds-combo-box\n      [placeholder]=\"'processLinkSteps.displayType.placeholder' | translate\"\n      [label]=\"'processLinkSteps.displayType.label' | translate\"\n      [disabled]=\"obs.saving\"\n      (selected)=\"selectFormDisplayType($event)\"\n    >\n      <cds-dropdown-list [items]=\"obs.formDisplayTypeListItems || []\"></cds-dropdown-list>\n    </cds-combo-box>\n\n    <br />\n\n    <cds-combo-box\n      [placeholder]=\"'processLinkSteps.formSize.placeholder' | translate\"\n      [label]=\"'processLinkSteps.formSize.label' | translate\"\n      [disabled]=\"obs.disableFormSizeInput || obs.saving\"\n      (selected)=\"selectFormSize($event)\"\n    >\n      <cds-dropdown-list [items]=\"obs.formSizeListItems || []\"></cds-dropdown-list>\n    </cds-combo-box>\n\n    <br />\n\n    <valtimo-carbon-multi-input\n      type=\"value\"\n      titleTranslationKey=\"processLinkSteps.subtitles\"\n      addRowTranslationKey=\"processLinkSteps.addSubtitle\"\n      [disabled]=\"obs.saving\"\n      [fullWidth]=\"true\"\n      [minimumAmountOfRows]=\"0\"\n      [initialAmountOfRows]=\"0\"\n      [defaultValues]=\"obs.subtitles\"\n      (valueChange)=\"onSubtitlesChange($event)\"\n    ></valtimo-carbon-multi-input>\n  }\n</ng-container>\n", dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.ComboBox, selector: "cds-combo-box, ibm-combo-box", inputs: ["placeholder", "openMenuAria", "closeMenuAria", "clearSelectionsTitle", "clearSelectionsAria", "clearSelectionTitle", "clearSelectionAria", "id", "labelId", "items", "type", "size", "itemValueKey", "label", "hideLabel", "helperText", "appendInline", "invalid", "invalidText", "warn", "warnText", "maxLength", "theme", "selectionFeedback", "autocomplete", "dropUp", "disabled"], outputs: ["selected", "submit", "close", "search", "clear"] }, { kind: "component", type: i4$1.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "component", type: i2.CarbonMultiInputComponent, selector: "valtimo-carbon-multi-input", inputs: ["addRowText", "addRowTranslationKey", "arbitraryAmountTitles", "arbitraryValueAmount", "defaultValues", "deleteRowText", "deleteRowTranslationKey", "disabled", "dropdownColumnTitle", "dropdownItems", "dropdownWidth", "fullWidth", "hideAddButton", "hideDeleteButton", "initialAmountOfRows", "keyColumnTitle", "margin", "maxRows", "minimumAmountOfRows", "name", "required", "title", "titleTranslationKey", "tooltip", "type", "valueColumnTitle", "valuePathSelectorDocumentDefinitionName", "valuePathSelectorPrefixes", "valuePathSelectorShowDocumentDefinitionSelector", "valuePathSelectorNotation", "keyColumnFlex", "dropdownColumnFlex", "valueColumnFlex"], outputs: ["valueChange", "allValuesValidEvent"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: FormDisplayConfigurationComponent, selector: "valtimo-form-display-configuration", inputs: { selectedFormDefinition: "selectedFormDefinition" }, outputs: { formDisplayValue: "formDisplayValue", formSizeValue: "formSizeValue", subtitlesValue: "subtitlesValue" }, ngImport: i0, template: "<ng-container\n  *ngIf=\"{\n    formDisplayValue: formDisplayValue$ | async,\n    formDisplayTypeListItems: formDisplayTypeListItems$ | async,\n    formSizeListItems: formSizeListItems$ | async,\n    disableFormSizeInput: disableFormSizeInput$ | async,\n    subtitles: subtitles$ | async,\n    isUserTask: isUserTask$ | async,\n    taskPanelEnabled: taskPanelEnabled$ | async,\n    saving: saving$ | async,\n  } as obs\"\n>\n  @if (obs.taskPanelEnabled && obs.isUserTask) {\n    <cds-combo-box\n      [placeholder]=\"'processLinkSteps.displayType.placeholder' | translate\"\n      [label]=\"'processLinkSteps.displayType.label' | translate\"\n      [disabled]=\"obs.saving\"\n      (selected)=\"selectFormDisplayType($event)\"\n    >\n      <cds-dropdown-list [items]=\"obs.formDisplayTypeListItems || []\"></cds-dropdown-list>\n    </cds-combo-box>\n\n    <br />\n\n    <cds-combo-box\n      [placeholder]=\"'processLinkSteps.formSize.placeholder' | translate\"\n      [label]=\"'processLinkSteps.formSize.label' | translate\"\n      [disabled]=\"obs.disableFormSizeInput || obs.saving\"\n      (selected)=\"selectFormSize($event)\"\n    >\n      <cds-dropdown-list [items]=\"obs.formSizeListItems || []\"></cds-dropdown-list>\n    </cds-combo-box>\n\n    <br />\n\n    <valtimo-carbon-multi-input\n      type=\"value\"\n      titleTranslationKey=\"processLinkSteps.subtitles\"\n      addRowTranslationKey=\"processLinkSteps.addSubtitle\"\n      [disabled]=\"obs.saving\"\n      [fullWidth]=\"true\"\n      [minimumAmountOfRows]=\"0\"\n      [initialAmountOfRows]=\"0\"\n      [defaultValues]=\"obs.subtitles\"\n      (valueChange)=\"onSubtitlesChange($event)\"\n    ></valtimo-carbon-multi-input>\n  }\n</ng-container>\n", dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.ComboBox, selector: "cds-combo-box, ibm-combo-box", inputs: ["placeholder", "openMenuAria", "closeMenuAria", "clearSelectionsTitle", "clearSelectionsAria", "clearSelectionTitle", "clearSelectionAria", "id", "labelId", "items", "type", "size", "itemValueKey", "label", "hideLabel", "helperText", "appendInline", "invalid", "invalidText", "warn", "warnText", "maxLength", "theme", "selectionFeedback", "autocomplete", "dropUp", "disabled"], 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: "component", type: i4$1.CarbonMultiInputComponent, selector: "valtimo-carbon-multi-input", inputs: ["addRowText", "addRowTranslationKey", "arbitraryAmountTitles", "arbitraryValueAmount", "defaultValues", "deleteRowText", "deleteRowTranslationKey", "disabled", "dropdownColumnTitle", "dropdownItems", "dropdownWidth", "fullWidth", "hideAddButton", "hideDeleteButton", "initialAmountOfRows", "keyColumnTitle", "margin", "maxRows", "minimumAmountOfRows", "name", "required", "title", "titleTranslationKey", "tooltip", "type", "valueColumnTitle", "valuePathSelectorDocumentDefinitionName", "valuePathSelectorPrefixes", "valuePathSelectorShowDocumentDefinitionSelector", "valuePathSelectorNotation", "keyColumnFlex", "dropdownColumnFlex", "valueColumnFlex"], outputs: ["valueChange", "allValuesValidEvent"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FormDisplayConfigurationComponent, decorators: [{
             type: Component,
@@ -1887,13 +1882,13 @@ class SelectFormComponent {
             this.stateService.stopSaving();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectFormComponent, deps: [{ token: i1$1.ConfigService }, { token: i2$2.FormService }, { token: ProcessLinkStateService }, { token: ProcessLinkService }, { token: ProcessLinkButtonService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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    <br />\n\n    <valtimo-form-display-configuration\n      [selectedFormDefinition]=\"selectedFormDefinition\"\n      (formDisplayValue)=\"selectedFormDisplayValue($event)\"\n      (formSizeValue)=\"selectedFormSizeValue($event)\"\n      (subtitlesValue)=\"selectedSubtitlesValue($event)\"\n    ></valtimo-form-display-configuration>\n  </div>\n</ng-container>\n", styles: [".label-with-tooltip{display:flex;align-items:center}.select-form{display:flex;flex-direction:column;width:100%;margin-top:24px}\n/*!\n * Copyright 2015-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$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.ComboBox, selector: "cds-combo-box, ibm-combo-box", inputs: ["placeholder", "openMenuAria", "closeMenuAria", "clearSelectionsTitle", "clearSelectionsAria", "clearSelectionTitle", "clearSelectionAria", "id", "labelId", "items", "type", "size", "itemValueKey", "label", "hideLabel", "helperText", "appendInline", "invalid", "invalidText", "warn", "warnText", "maxLength", "theme", "selectionFeedback", "autocomplete", "dropUp", "disabled"], outputs: ["selected", "submit", "close", "search", "clear"] }, { kind: "component", type: i4$1.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "component", type: FormDisplayConfigurationComponent, selector: "valtimo-form-display-configuration", inputs: ["selectedFormDefinition"], outputs: ["formDisplayValue", "formSizeValue", "subtitlesValue"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectFormComponent, deps: [{ token: i1$1.ConfigService }, { token: i2$1.FormService }, { token: ProcessLinkStateService }, { token: ProcessLinkService }, { token: ProcessLinkButtonService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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    <br />\n\n    <valtimo-form-display-configuration\n      [selectedFormDefinition]=\"selectedFormDefinition\"\n      (formDisplayValue)=\"selectedFormDisplayValue($event)\"\n      (formSizeValue)=\"selectedFormSizeValue($event)\"\n      (subtitlesValue)=\"selectedSubtitlesValue($event)\"\n    ></valtimo-form-display-configuration>\n  </div>\n</ng-container>\n", styles: [".label-with-tooltip{display:flex;align-items:center}.select-form{display:flex;flex-direction:column;width:100%;margin-top:24px}\n/*!\n * Copyright 2015-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$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.ComboBox, selector: "cds-combo-box, ibm-combo-box", inputs: ["placeholder", "openMenuAria", "closeMenuAria", "clearSelectionsTitle", "clearSelectionsAria", "clearSelectionTitle", "clearSelectionAria", "id", "labelId", "items", "type", "size", "itemValueKey", "label", "hideLabel", "helperText", "appendInline", "invalid", "invalidText", "warn", "warnText", "maxLength", "theme", "selectionFeedback", "autocomplete", "dropUp", "disabled"], 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: "component", type: FormDisplayConfigurationComponent, selector: "valtimo-form-display-configuration", inputs: ["selectedFormDefinition"], outputs: ["formDisplayValue", "formSizeValue", "subtitlesValue"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectFormComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-select-form', 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    <br />\n\n    <valtimo-form-display-configuration\n      [selectedFormDefinition]=\"selectedFormDefinition\"\n      (formDisplayValue)=\"selectedFormDisplayValue($event)\"\n      (formSizeValue)=\"selectedFormSizeValue($event)\"\n      (subtitlesValue)=\"selectedSubtitlesValue($event)\"\n    ></valtimo-form-display-configuration>\n  </div>\n</ng-container>\n", styles: [".label-with-tooltip{display:flex;align-items:center}.select-form{display:flex;flex-direction:column;width:100%;margin-top:24px}\n/*!\n * Copyright 2015-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$1.ConfigService }, { type: i2$2.FormService }, { type: ProcessLinkStateService }, { type: ProcessLinkService }, { type: ProcessLinkButtonService }] });
+        }], ctorParameters: () => [{ type: i1$1.ConfigService }, { type: i2$1.FormService }, { type: ProcessLinkStateService }, { type: ProcessLinkService }, { type: ProcessLinkButtonService }] });
 
 /*
  * Copyright 2015-2024 Ritense BV, the Netherlands.
@@ -2037,7 +2032,7 @@ class SelectFormFlowComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectFormFlowComponent, deps: [{ token: i1$1.ConfigService }, { token: FormFlowService }, { token: ProcessLinkStateService }, { token: ProcessLinkService }, { token: ProcessLinkButtonService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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    <br />\n\n    <valtimo-form-display-configuration\n      [selectedFormDefinition]=\"selectedFormFlowDefinition\"\n      (formDisplayValue)=\"selectedFormDisplayValue($event)\"\n      (formSizeValue)=\"selectedFormSizeValue($event)\"\n      (subtitlesValue)=\"selectedSubtitlesValue($event)\"\n    ></valtimo-form-display-configuration>\n  </div>\n</ng-container>\n", styles: [".label-with-tooltip{display:flex;align-items:center}.select-form-flow{display:flex;flex-direction:column;width:100%;margin-top:24px}\n/*!\n * Copyright 2015-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$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.ComboBox, selector: "cds-combo-box, ibm-combo-box", inputs: ["placeholder", "openMenuAria", "closeMenuAria", "clearSelectionsTitle", "clearSelectionsAria", "clearSelectionTitle", "clearSelectionAria", "id", "labelId", "items", "type", "size", "itemValueKey", "label", "hideLabel", "helperText", "appendInline", "invalid", "invalidText", "warn", "warnText", "maxLength", "theme", "selectionFeedback", "autocomplete", "dropUp", "disabled"], outputs: ["selected", "submit", "close", "search", "clear"] }, { kind: "component", type: i4$1.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "component", type: FormDisplayConfigurationComponent, selector: "valtimo-form-display-configuration", inputs: ["selectedFormDefinition"], outputs: ["formDisplayValue", "formSizeValue", "subtitlesValue"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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    <br />\n\n    <valtimo-form-display-configuration\n      [selectedFormDefinition]=\"selectedFormFlowDefinition\"\n      (formDisplayValue)=\"selectedFormDisplayValue($event)\"\n      (formSizeValue)=\"selectedFormSizeValue($event)\"\n      (subtitlesValue)=\"selectedSubtitlesValue($event)\"\n    ></valtimo-form-display-configuration>\n  </div>\n</ng-container>\n", styles: [".label-with-tooltip{display:flex;align-items:center}.select-form-flow{display:flex;flex-direction:column;width:100%;margin-top:24px}\n/*!\n * Copyright 2015-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$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.ComboBox, selector: "cds-combo-box, ibm-combo-box", inputs: ["placeholder", "openMenuAria", "closeMenuAria", "clearSelectionsTitle", "clearSelectionsAria", "clearSelectionTitle", "clearSelectionAria", "id", "labelId", "items", "type", "size", "itemValueKey", "label", "hideLabel", "helperText", "appendInline", "invalid", "invalidText", "warn", "warnText", "maxLength", "theme", "selectionFeedback", "autocomplete", "dropUp", "disabled"], 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: "component", type: FormDisplayConfigurationComponent, selector: "valtimo-form-display-configuration", inputs: ["selectedFormDefinition"], outputs: ["formDisplayValue", "formSizeValue", "subtitlesValue"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectFormFlowComponent, decorators: [{
             type: Component,
@@ -2150,7 +2145,7 @@ class SelectUIComponentComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectUIComponentComponent, deps: [{ token: ProcessLinkStateService }, { token: ProcessLinkButtonService }, { token: ProcessLinkService }, { token: FORM_CUSTOM_COMPONENT_TOKEN, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SelectUIComponentComponent, selector: "valtimo-select-ui-component", 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<cds-combo-box\n  [dropUp]=\"false\"\n  formControlName=\"contentKey\"\n  [items]=\"formCustomComponentListItems$ | async\"\n  itemValueKey=\"contentKey\"\n  [label]=\"'processLinkSteps.uiComponent' | translate\"\n  (selected)=\"selectCustomComponent($event)\"\n>\n  <cds-dropdown-list></cds-dropdown-list>\n</cds-combo-box>\n", styles: [".custom-widget{padding:24px}.custom-widget__header{display:flex;align-items:center;justify-content:space-between}.custom-widget__title{color:var(--cds-text-primary);font-weight:600;font-size:16px;line-height:24px}\n/*!\n * Copyright 2015-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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.ComboBox, selector: "cds-combo-box, ibm-combo-box", inputs: ["placeholder", "openMenuAria", "closeMenuAria", "clearSelectionsTitle", "clearSelectionsAria", "clearSelectionTitle", "clearSelectionAria", "id", "labelId", "items", "type", "size", "itemValueKey", "label", "hideLabel", "helperText", "appendInline", "invalid", "invalidText", "warn", "warnText", "maxLength", "theme", "selectionFeedback", "autocomplete", "dropUp", "disabled"], outputs: ["selected", "submit", "close", "search", "clear"] }, { kind: "component", type: i4$1.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SelectUIComponentComponent, selector: "valtimo-select-ui-component", 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<cds-combo-box\n  [dropUp]=\"false\"\n  formControlName=\"contentKey\"\n  [items]=\"formCustomComponentListItems$ | async\"\n  itemValueKey=\"contentKey\"\n  [label]=\"'processLinkSteps.uiComponent' | translate\"\n  (selected)=\"selectCustomComponent($event)\"\n>\n  <cds-dropdown-list></cds-dropdown-list>\n</cds-combo-box>\n", styles: [".custom-widget{padding:24px}.custom-widget__header{display:flex;align-items:center;justify-content:space-between}.custom-widget__title{color:var(--cds-text-primary);font-weight:600;font-size:16px;line-height:24px}\n/*!\n * Copyright 2015-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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.ComboBox, selector: "cds-combo-box, ibm-combo-box", inputs: ["placeholder", "openMenuAria", "closeMenuAria", "clearSelectionsTitle", "clearSelectionsAria", "clearSelectionTitle", "clearSelectionAria", "id", "labelId", "items", "type", "size", "itemValueKey", "label", "hideLabel", "helperText", "appendInline", "invalid", "invalidText", "warn", "warnText", "maxLength", "theme", "selectionFeedback", "autocomplete", "dropUp", "disabled"], 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$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectUIComponentComponent, decorators: [{
             type: Component,
@@ -2229,7 +2224,7 @@ class ProcessLinkModalComponent {
         this.processLinkStateService.setViewModelEnabled(value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ProcessLinkModalComponent, deps: [{ token: ProcessLinkStateService }, { token: ProcessLinkStepService }, { token: ProcessLinkButtonService }, { token: PluginStateService }, { token: ProcessLinkService }, { token: ProcessLinkStateService }, { token: i1$1.ConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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 [cdsLayer]=\"1\">\n      <ng-container *ngTemplateOutlet=\"stepContent; context: {obs: obs}\"></ng-container>\n    </section>\n    <ng-template *ngTemplateOutlet=\"footer; context: {obs: obs}\"></ng-template>\n  </cds-modal>\n</div>\n\n<ng-template #progressIndicator let-obs=\"obs\">\n  <cds-progress-indicator\n    *ngIf=\"obs.steps && !obs.hideProgressIndicator\"\n    [steps]=\"obs.steps\"\n    [current]=\"obs.currentStepIndex\"\n    spacing=\"equal\"\n  ></cds-progress-indicator>\n</ng-template>\n\n<ng-template #stepContent let-obs=\"obs\">\n  <div class=\"cds-loading-container\" *ngIf=\"obs.saving\">\n    <cds-loading></cds-loading>\n  </div>\n  <div [ngClass]=\"{hidden: obs.saving}\">\n    <ng-container>\n      <ng-container *ngIf=\"obs.currentStepId === 'chooseProcessLinkType'\">\n        <valtimo-choose-process-link-type></valtimo-choose-process-link-type>\n      </ng-container>\n      <ng-container\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\n          [selectedPluginConfiguration$]=\"selectedPluginConfiguration$\"\n        ></valtimo-plugin-action-configuration>\n      </ng-container>\n    </ng-container>\n    <valtimo-select-url\n      *ngIf=\"obs.currentStepId === 'selectURL' || obs.typeOfSelectedProgressLink === 'url'\"\n    ></valtimo-select-url>\n    <ng-container\n      *ngIf=\"\n        obs.currentStepId === 'uiComponent' || obs.typeOfSelectedProgressLink === 'ui-component'\n      \"\n    >\n      <valtimo-select-ui-component></valtimo-select-ui-component>\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #footer let-obs=\"obs\">\n  <cds-modal-footer *ngIf=\"!obs.saving\">\n    <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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i4.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i4.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i4.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i4.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "directive", type: i4.ModalHeaderLabel, selector: "[cdsModalHeaderLabel], [ibmModalHeaderLabel]" }, { kind: "component", type: i4.ProgressIndicator, selector: "cds-progress-indicator, ibm-progress-indicator", inputs: ["current", "steps", "translations", "orientation", "skeleton", "spacing"], outputs: ["stepSelected"] }, { kind: "directive", type: i4.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "component", type: i4.Loading, selector: "cds-loading, ibm-loading", inputs: ["title", "isActive", "size", "overlay"] }, { kind: "directive", type: i2.ValtimoCdsModalDirective, selector: "[valtimoCdsModal]" }, { kind: "component", type: i4.Toggle, selector: "cds-toggle, ibm-toggle", inputs: ["offText", "onText", "label", "size", "hideLabel", "skeleton"] }, { kind: "directive", type: i4.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "component", type: SelectPluginConfigurationComponent, selector: "valtimo-select-plugin-configuration" }, { kind: "component", type: SelectPluginActionComponent, selector: "valtimo-select-plugin-action" }, { kind: "component", type: PluginActionConfigurationComponent, selector: "valtimo-plugin-action-configuration", inputs: ["selectedPluginConfiguration$"], outputs: ["valid", "configuration"] }, { kind: "component", type: ChooseProcessLinkTypeComponent, selector: "valtimo-choose-process-link-type" }, { kind: "component", type: SelectFormComponent, selector: "valtimo-select-form" }, { kind: "component", type: SelectFormFlowComponent, selector: "valtimo-select-form-flow" }, { kind: "component", type: SelectUrlComponent, selector: "valtimo-select-url" }, { kind: "component", type: SelectUIComponentComponent, selector: "valtimo-select-ui-component" }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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 [cdsLayer]=\"1\">\n      <ng-container *ngTemplateOutlet=\"stepContent; context: {obs: obs}\"></ng-container>\n    </section>\n    <ng-template *ngTemplateOutlet=\"footer; context: {obs: obs}\"></ng-template>\n  </cds-modal>\n</div>\n\n<ng-template #progressIndicator let-obs=\"obs\">\n  <cds-progress-indicator\n    *ngIf=\"obs.steps && !obs.hideProgressIndicator\"\n    [steps]=\"obs.steps\"\n    [current]=\"obs.currentStepIndex\"\n    spacing=\"equal\"\n  ></cds-progress-indicator>\n</ng-template>\n\n<ng-template #stepContent let-obs=\"obs\">\n  <div class=\"cds-loading-container\" *ngIf=\"obs.saving\">\n    <cds-loading></cds-loading>\n  </div>\n  <div [ngClass]=\"{hidden: obs.saving}\">\n    <ng-container>\n      <ng-container *ngIf=\"obs.currentStepId === 'chooseProcessLinkType'\">\n        <valtimo-choose-process-link-type></valtimo-choose-process-link-type>\n      </ng-container>\n      <ng-container\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\n          [selectedPluginConfiguration$]=\"selectedPluginConfiguration$\"\n        ></valtimo-plugin-action-configuration>\n      </ng-container>\n    </ng-container>\n    <valtimo-select-url\n      *ngIf=\"obs.currentStepId === 'selectURL' || obs.typeOfSelectedProgressLink === 'url'\"\n    ></valtimo-select-url>\n    <ng-container\n      *ngIf=\"\n        obs.currentStepId === 'uiComponent' || obs.typeOfSelectedProgressLink === 'ui-component'\n      \"\n    >\n      <valtimo-select-ui-component></valtimo-select-ui-component>\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #footer let-obs=\"obs\">\n  <cds-modal-footer *ngIf=\"!obs.saving\">\n    <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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i4.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i4.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i4.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i4.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "directive", type: i4.ModalHeaderLabel, selector: "[cdsModalHeaderLabel], [ibmModalHeaderLabel]" }, { kind: "component", type: i4.ProgressIndicator, selector: "cds-progress-indicator, ibm-progress-indicator", inputs: ["current", "steps", "translations", "orientation", "skeleton", "spacing"], outputs: ["stepSelected"] }, { kind: "directive", type: i4.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "component", type: i4.Loading, selector: "cds-loading, ibm-loading", inputs: ["title", "isActive", "size", "overlay"] }, { kind: "directive", type: i4$1.ValtimoCdsModalDirective, selector: "[valtimoCdsModal]" }, { kind: "component", type: i4.Toggle, selector: "cds-toggle, ibm-toggle", inputs: ["offText", "onText", "label", "size", "hideLabel", "skeleton"] }, { kind: "directive", type: i4.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "component", type: SelectPluginConfigurationComponent, selector: "valtimo-select-plugin-configuration" }, { kind: "component", type: SelectPluginActionComponent, selector: "valtimo-select-plugin-action" }, { kind: "component", type: PluginActionConfigurationComponent, selector: "valtimo-plugin-action-configuration", inputs: ["selectedPluginConfiguration$"], outputs: ["valid", "configuration"] }, { kind: "component", type: ChooseProcessLinkTypeComponent, selector: "valtimo-choose-process-link-type" }, { kind: "component", type: SelectFormComponent, selector: "valtimo-select-form" }, { kind: "component", type: SelectFormFlowComponent, selector: "valtimo-select-form-flow" }, { kind: "component", type: SelectUrlComponent, selector: "valtimo-select-url" }, { kind: "component", type: SelectUIComponentComponent, selector: "valtimo-select-ui-component" }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ProcessLinkModalComponent, decorators: [{
             type: Component,
@@ -2289,13 +2284,13 @@ class ProcessLinkComponent {
                 .subscribe();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ProcessLinkComponent, deps: [{ token: ProcessLinkService }, { token: ProcessLinkStateService }, { token: i2.ModalService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ProcessLinkComponent, deps: [{ token: ProcessLinkService }, { token: ProcessLinkStateService }, { token: i4$1.ModalService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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.12", 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.ModalService }] });
+        }], ctorParameters: () => [{ type: ProcessLinkService }, { type: ProcessLinkStateService }, { type: i4$1.ModalService }] });
 
 /*
  * Copyright 2015-2024 Ritense BV, the Netherlands.
@@ -2322,7 +2317,7 @@ const routes = [
 ];
 class ProcessLinkRoutingModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ProcessLinkRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: ProcessLinkRoutingModule, imports: [i2$1.RouterModule], exports: [RouterModule] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: ProcessLinkRoutingModule, imports: [i2.RouterModule], exports: [RouterModule] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ProcessLinkRoutingModule, imports: [RouterModule.forRoot(routes), RouterModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ProcessLinkRoutingModule, decorators: [{
@@ -2643,13 +2638,13 @@ class FormFlowComponent {
     enable() {
         this.disabled$.next(false);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FormFlowComponent, deps: [{ token: FormFlowService }, { token: i2.ValtimoModalService }, { token: i3.TranslateService }, { token: i1$1.ConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FormFlowComponent, selector: "valtimo-form-flow", inputs: { formIoFormData: "formIoFormData", formFlowInstanceId: "formFlowInstanceId" }, outputs: { formFlowComplete: "formFlowComplete", formFlowChange: "formFlowChange" }, viewQueries: [{ propertyName: "form", first: true, predicate: ["form"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-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  *ngIf=\"{\n    breadcrumbs: breadcrumbs$ | async,\n    currentStepIndex: currentStepIndex$ | async,\n    enableFormFlowBreadcrumbs: enableFormFlowBreadcrumbs$ | async,\n    formFlowInstanceId: formFlowInstanceId$ | async,\n  } as obs\"\n>\n  <div *ngIf=\"formDefinition && (formFlowStepType$ | async) === 'form'\">\n    <div *ngIf=\"obs.enableFormFlowBreadcrumbs\" class=\"form-flow__progress-bar-indicator\">\n      <cds-progress-indicator\n        [spacing]=\"'equal'\"\n        [skeleton]=\"obs.breadcrumbs.length === 0\"\n        [current]=\"obs.currentStepIndex\"\n        [steps]=\"obs.breadcrumbs\"\n        (stepSelected)=\"onStepSelected($event)\"\n      >\n      </cds-progress-indicator>\n    </div>\n\n    <valtimo-form-io\n      #form\n      [form]=\"formDefinition\"\n      (submit)=\"onSubmit($event)\"\n      (change)=\"onChange($event)\"\n      (event)=\"onEvent($event)\"\n      [options]=\"formioOptions\"\n    ></valtimo-form-io>\n  </div>\n\n  <div *ngIf=\"(formFlowStepType$ | async) === 'custom-component'\">\n    <valtimo-form-flow-configuration-container\n      [componentId]=\"FormFlowCustomComponentId$ | async\"\n      [formFlowInstanceId]=\"obs.formFlowInstanceId\"\n      [disabled]=\"disabled$ | async\"\n      (submitEvent)=\"onSubmit($event)\"\n      (changeEvent)=\"onChange($event)\"\n    >\n    </valtimo-form-flow-configuration-container>\n  </div>\n</div>\n", styles: [".form-flow__progress-bar-indicator{height:64px;overflow-x:auto;-ms-overflow-style:none;scrollbar-width:none}.form-flow__progress-bar-indicator ::-webkit-scrollbar{display:none}\n"], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.ProgressIndicator, selector: "cds-progress-indicator, ibm-progress-indicator", inputs: ["current", "steps", "translations", "orientation", "skeleton", "spacing"], outputs: ["stepSelected"] }, { kind: "component", type: i2.FormioComponent, selector: "valtimo-form-io", inputs: ["options", "submission", "form", "readOnly", "formRefresh$"], outputs: ["submit", "change", "event"] }, { kind: "component", type: FormFlowConfigurationContainerComponent, selector: "valtimo-form-flow-configuration-container", inputs: ["disabled", "componentId", "formFlowInstanceId"], outputs: ["changeEvent", "submitEvent"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FormFlowComponent, deps: [{ token: FormFlowService }, { token: i4$1.ValtimoModalService }, { token: i3.TranslateService }, { token: i1$1.ConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FormFlowComponent, selector: "valtimo-form-flow", inputs: { formIoFormData: "formIoFormData", formFlowInstanceId: "formFlowInstanceId" }, outputs: { formFlowComplete: "formFlowComplete", formFlowChange: "formFlowChange" }, viewQueries: [{ propertyName: "form", first: true, predicate: ["form"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-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  *ngIf=\"{\n    breadcrumbs: breadcrumbs$ | async,\n    currentStepIndex: currentStepIndex$ | async,\n    enableFormFlowBreadcrumbs: enableFormFlowBreadcrumbs$ | async,\n    formFlowInstanceId: formFlowInstanceId$ | async,\n  } as obs\"\n>\n  <div *ngIf=\"formDefinition && (formFlowStepType$ | async) === 'form'\">\n    <div *ngIf=\"obs.enableFormFlowBreadcrumbs\" class=\"form-flow__progress-bar-indicator\">\n      <cds-progress-indicator\n        [spacing]=\"'equal'\"\n        [skeleton]=\"obs.breadcrumbs.length === 0\"\n        [current]=\"obs.currentStepIndex\"\n        [steps]=\"obs.breadcrumbs\"\n        (stepSelected)=\"onStepSelected($event)\"\n      >\n      </cds-progress-indicator>\n    </div>\n\n    <valtimo-form-io\n      #form\n      [form]=\"formDefinition\"\n      (submit)=\"onSubmit($event)\"\n      (change)=\"onChange($event)\"\n      (event)=\"onEvent($event)\"\n      [options]=\"formioOptions\"\n    ></valtimo-form-io>\n  </div>\n\n  <div *ngIf=\"(formFlowStepType$ | async) === 'custom-component'\">\n    <valtimo-form-flow-configuration-container\n      [componentId]=\"FormFlowCustomComponentId$ | async\"\n      [formFlowInstanceId]=\"obs.formFlowInstanceId\"\n      [disabled]=\"disabled$ | async\"\n      (submitEvent)=\"onSubmit($event)\"\n      (changeEvent)=\"onChange($event)\"\n    >\n    </valtimo-form-flow-configuration-container>\n  </div>\n</div>\n", styles: [".form-flow__progress-bar-indicator{height:64px;overflow-x:auto;-ms-overflow-style:none;scrollbar-width:none}.form-flow__progress-bar-indicator ::-webkit-scrollbar{display:none}\n"], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.ProgressIndicator, selector: "cds-progress-indicator, ibm-progress-indicator", inputs: ["current", "steps", "translations", "orientation", "skeleton", "spacing"], outputs: ["stepSelected"] }, { kind: "component", type: i4$1.FormioComponent, selector: "valtimo-form-io", inputs: ["options", "submission", "form", "readOnly", "formRefresh$"], outputs: ["submit", "change", "event"] }, { kind: "component", type: FormFlowConfigurationContainerComponent, selector: "valtimo-form-flow-configuration-container", inputs: ["disabled", "componentId", "formFlowInstanceId"], outputs: ["changeEvent", "submitEvent"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", 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  *ngIf=\"{\n    breadcrumbs: breadcrumbs$ | async,\n    currentStepIndex: currentStepIndex$ | async,\n    enableFormFlowBreadcrumbs: enableFormFlowBreadcrumbs$ | async,\n    formFlowInstanceId: formFlowInstanceId$ | async,\n  } as obs\"\n>\n  <div *ngIf=\"formDefinition && (formFlowStepType$ | async) === 'form'\">\n    <div *ngIf=\"obs.enableFormFlowBreadcrumbs\" class=\"form-flow__progress-bar-indicator\">\n      <cds-progress-indicator\n        [spacing]=\"'equal'\"\n        [skeleton]=\"obs.breadcrumbs.length === 0\"\n        [current]=\"obs.currentStepIndex\"\n        [steps]=\"obs.breadcrumbs\"\n        (stepSelected)=\"onStepSelected($event)\"\n      >\n      </cds-progress-indicator>\n    </div>\n\n    <valtimo-form-io\n      #form\n      [form]=\"formDefinition\"\n      (submit)=\"onSubmit($event)\"\n      (change)=\"onChange($event)\"\n      (event)=\"onEvent($event)\"\n      [options]=\"formioOptions\"\n    ></valtimo-form-io>\n  </div>\n\n  <div *ngIf=\"(formFlowStepType$ | async) === 'custom-component'\">\n    <valtimo-form-flow-configuration-container\n      [componentId]=\"FormFlowCustomComponentId$ | async\"\n      [formFlowInstanceId]=\"obs.formFlowInstanceId\"\n      [disabled]=\"disabled$ | async\"\n      (submitEvent)=\"onSubmit($event)\"\n      (changeEvent)=\"onChange($event)\"\n    >\n    </valtimo-form-flow-configuration-container>\n  </div>\n</div>\n", styles: [".form-flow__progress-bar-indicator{height:64px;overflow-x:auto;-ms-overflow-style:none;scrollbar-width:none}.form-flow__progress-bar-indicator ::-webkit-scrollbar{display:none}\n"] }]
-        }], ctorParameters: () => [{ type: FormFlowService }, { type: i2.ValtimoModalService }, { type: i3.TranslateService }, { type: i1$1.ConfigService }], propDecorators: { form: [{
+        }], ctorParameters: () => [{ type: FormFlowService }, { type: i4$1.ValtimoModalService }, { type: i3.TranslateService }, { type: i1$1.ConfigService }], propDecorators: { form: [{
                 type: ViewChild,
                 args: ['form']
             }], formIoFormData: [{
@@ -2758,7 +2753,8 @@ class ProcessLinkModule {
             ToggleModule,
             CarbonMultiInputModule,
             LayerModule,
-            ToggletipModule], exports: [ProcessLinkComponent,
+            ToggletipModule,
+            RemoveClassnamesDirective], exports: [ProcessLinkComponent,
             SelectPluginConfigurationComponent,
             SelectPluginActionComponent,
             PluginActionConfigurationComponent,
@@ -2855,6 +2851,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         CarbonMultiInputModule,
                         LayerModule,
                         ToggletipModule,
+                        RemoveClassnamesDirective,
                     ],
                     exports: [
                         ProcessLinkComponent,